diff --git a/.prettierrc.mjs b/prettier.config.mjs
similarity index 86%
rename from .prettierrc.mjs
rename to prettier.config.mjs
index 01af582..3fcbd54 100644
--- a/.prettierrc.mjs
+++ b/prettier.config.mjs
@@ -1,6 +1,6 @@
 /**
  * @see https://prettier.io/docs/en/configuration.html
- * @type {import("prettier").Config}
+ * @type {import("prettier").Config & import("prettier-plugin-tailwindcss").PluginOptions}
  */
 const config = {
   printWidth: 80,
@@ -12,8 +12,8 @@ const config = {
   bracketSameLine: false,
   endOfLine: 'auto',
   plugins: [
-    'prettier-plugin-tailwindcss',
     '@ianvs/prettier-plugin-sort-imports',
+    'prettier-plugin-tailwindcss',
   ],
   importOrder: [
     '<BUILTIN_MODULES>', // Node.js built-in modules
diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 74a589f..c444c2d 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -6,11 +6,11 @@ import AdminHeader from '@src/components/admin/AdminHeader';
 export default function Page() {
   return (
     <AdminHeader path={['Admin']}>
-      <div className="flex flex-wrap items-center gap-x-10 max-sm:gap-x-4 gap-y-2">
+      <div className="flex flex-wrap items-center gap-x-10 gap-y-2 max-sm:gap-x-4">
         {/*<Link href="/admin/sections">*/}
         <Button
           variant="contained"
-          className="normal-case whitespace-nowrap"
+          className="whitespace-nowrap normal-case"
           startIcon={<GroupsIcon />}
           size="large"
           disabled
diff --git a/src/app/auth/ProviderButtons.tsx b/src/app/auth/ProviderButtons.tsx
index 47c7e49..d6ab199 100644
--- a/src/app/auth/ProviderButtons.tsx
+++ b/src/app/auth/ProviderButtons.tsx
@@ -27,11 +27,11 @@ const ProviderButton = ({
         newUserCallbackURL: '/get-started',
       });
     }}
-    className="bg-white hover:bg-neutral-100 dark:bg-neutral-700 dark:hover:bg-neutral-600 normal-case whitespace-nowrap min-w-max"
+    className="min-w-max bg-white whitespace-nowrap normal-case hover:bg-neutral-100 dark:bg-neutral-700 dark:hover:bg-neutral-600"
     startIcon={AuthIcons[provider]}
   >
     <Typography
-      className={`text-base font-extrabold md:text-xs text-slate-800 dark:text-slate-200`}
+      className={`text-base font-extrabold text-slate-800 md:text-xs dark:text-slate-200`}
     >
       <span className="min-w-fit">Sign in with {providerNames[provider]}</span>
     </Typography>
diff --git a/src/app/auth/page.tsx b/src/app/auth/page.tsx
index b1c6c9c..65473c5 100644
--- a/src/app/auth/page.tsx
+++ b/src/app/auth/page.tsx
@@ -29,20 +29,20 @@ export default async function Auth(props: {
             className="select-none"
           />
         </div>
-        <div className="fixed inset-0 dark:bg-slightly-darken" />
+        <div className="dark:bg-slightly-darken fixed inset-0" />
         <div className="z-10">
           <Link
             href="/"
-            className="font-display flex gap-2 items-center select-none text-white drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]"
+            className="font-display flex items-center gap-2 text-white drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)] select-none"
           >
             <div className="flex flex-row items-center">
               <UTDNotebookLogoStandalone className="h-10 w-auto fill-white" />
             </div>
             <div className="flex flex-col">
-              <span className="whitespace-nowrap text-lg md:text-xl font-bold leading-5">
+              <span className="text-lg leading-5 font-bold whitespace-nowrap md:text-xl">
                 UTD NOTEBOOK
               </span>
-              <span className="whitespace-nowrap text-xs md:text-sm font-medium">
+              <span className="text-xs font-medium whitespace-nowrap md:text-sm">
                 by Nebula Labs
               </span>
             </div>
diff --git a/src/app/get-started/page.tsx b/src/app/get-started/page.tsx
index 5ffe2dd..7104c1f 100644
--- a/src/app/get-started/page.tsx
+++ b/src/app/get-started/page.tsx
@@ -17,17 +17,17 @@ export default async function Page() {
   const userMetadata = await api.userMetadata.byId({ id: session.user.id });
 
   return (
-    <main className="min-h-screen relative pb-24">
-      <div className="fixed inset-0 h-full w-full overflow-hidden bg-royal">
+    <main className="relative min-h-screen pb-24">
+      <div className="bg-royal fixed inset-0 h-full w-full overflow-hidden">
         <Image
           src={'/background.png'}
           alt="background"
           fill
           objectFit="cover"
-          className="select-none -z-20"
+          className="-z-20 select-none"
           draggable={false}
         />
-        <div className="absolute inset-0 dark:bg-slightly-darken" />
+        <div className="dark:bg-slightly-darken absolute inset-0" />
       </div>
       <div className="relative z-20">
         <Header
diff --git a/src/app/notes/[...slug]/layout.tsx b/src/app/notes/[...slug]/layout.tsx
index 7a3a693..c8d797f 100644
--- a/src/app/notes/[...slug]/layout.tsx
+++ b/src/app/notes/[...slug]/layout.tsx
@@ -9,7 +9,7 @@ export default function NotesLayout({ children }: NotesLayoutProps) {
   return (
     <main className="relative min-h-screen">
       <Header />
-      <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 pb-16 pt-24 lg:pt-28">
+      <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-5 pt-24 pb-16 lg:pt-28">
         {children}
       </section>
     </main>
diff --git a/src/app/notes/[id]/page.tsx b/src/app/notes/[id]/page.tsx
index da6fc8d..fd855f6 100644
--- a/src/app/notes/[id]/page.tsx
+++ b/src/app/notes/[id]/page.tsx
@@ -14,14 +14,14 @@ export default async function NotePage({ params }: NotePageProps) {
   if (!file) notFound();
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex h-full flex-col">
       <Header />
-      <main className="p-4 pt-0 flex w-full h-full flex-col items-center gap-4">
+      <main className="flex h-full w-full flex-col items-center gap-4 p-4 pt-0">
         {/* Info panel pinned to the top, floats over the PDF */}
         <NoteInfoPanel file={file} />
 
         {/* Scrollable area with white card background for the PDF */}
-        <BaseCard className="h-full min-h-[50vh] w-full overflow-hidden max-w-6xl">
+        <BaseCard className="h-full min-h-[50vh] w-full max-w-6xl overflow-hidden">
           <iframe
             src={file.publicUrl}
             title={file.name}
diff --git a/src/app/notes/create/NoteForm.tsx b/src/app/notes/create/NoteForm.tsx
index a5e964a..939cbbb 100644
--- a/src/app/notes/create/NoteForm.tsx
+++ b/src/app/notes/create/NoteForm.tsx
@@ -316,7 +316,7 @@ const NoteForm = ({ mode = 'create', file: existingFile }: NoteFormProps) => {
           </div>
         </div>
 
-        <div className="flex flex-wrap justify-end items-center gap-2">
+        <div className="flex flex-wrap items-center justify-end gap-2">
           <form.AppForm>
             <form.ResetButton />
           </form.AppForm>
@@ -333,7 +333,7 @@ export default NoteForm;
 
 export const NoteFormSkeleton = () => {
   return (
-    <div className="flex flex-col gap-4 max-w-full">
+    <div className="flex max-w-full flex-col gap-4">
       <PanelSkeleton />
     </div>
   );
diff --git a/src/app/notes/create/page.tsx b/src/app/notes/create/page.tsx
index c6d14d9..4fcbe12 100644
--- a/src/app/notes/create/page.tsx
+++ b/src/app/notes/create/page.tsx
@@ -23,7 +23,7 @@ export default async function Page() {
   return (
     <>
       <Header />
-      <main className="p-4 flex w-full flex-col items-center">
+      <main className="flex w-full flex-col items-center p-4">
         <NoteForm />
       </main>
     </>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 8fe57e4..e04bf35 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,7 +9,7 @@ const Home = () => {
       <div className="absolute inset-0 z-0">
         <div className="relative h-screen">
           <div className={`absolute inset-0 ${HOME_PAGE_GRADIENT_CLASS}`} />
-          <div className="absolute inset-0 dark:bg-slightly-darken" />
+          <div className="dark:bg-slightly-darken absolute inset-0" />
         </div>
       </div>
 
@@ -43,7 +43,7 @@ const Home = () => {
               UTD NOTEBOOK
             </h1>
 
-            <p className="mb-10 text-center text-white text-base md:text-lg text-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]">
+            <p className="mb-10 text-center text-base text-white text-shadow-[0_0_4px_rgb(0_0_0_/_0.4)] md:text-lg">
               Share and access course notes. By students, for students.
             </p>
             <SearchBar autoFocus />
diff --git a/src/components/common/Panel.tsx b/src/components/common/Panel.tsx
index a374ce5..e99caaa 100644
--- a/src/components/common/Panel.tsx
+++ b/src/components/common/Panel.tsx
@@ -30,8 +30,7 @@ const Panel = ({
 }: PanelProps) => {
   return (
     <BaseCard
-      className={`flex flex-col gap-2 ${smallPadding ? 'p-5' : 'sm:px-14 max-sm:px-2 sm:py-10 max-sm:py-4'} min-w-0 max-w-6xl
-        ${className ?? ''}`}
+      className={`flex flex-col gap-2 ${smallPadding ? 'p-5' : 'max-sm:px-2 max-sm:py-4 sm:px-14 sm:py-10'} max-w-6xl min-w-0 ${className ?? ''}`}
       {...(id ? { id } : {})}
       style={style}
     >
@@ -50,7 +49,7 @@ const Panel = ({
       )}
       {description && (
         <div
-          className={`mb-4 text-slate-600 dark:text-slate-400 text-sm ${smallPadding ? '' : 'ml-2'}`}
+          className={`mb-4 text-sm text-slate-600 dark:text-slate-400 ${smallPadding ? '' : 'ml-2'}`}
         >
           {description}
         </div>
@@ -70,7 +69,7 @@ export const PanelSkeleton = (props: PanelSkeletonProps) => {
   return (
     <Skeleton
       className={
-        'flex flex-col gap-2 rounded-lg sm:px-14 max-sm:px-2 sm:py-10 max-sm:py-4 min-w-0 w-6xl ' +
+        'flex w-6xl min-w-0 flex-col gap-2 rounded-lg max-sm:px-2 max-sm:py-4 sm:px-14 sm:py-10 ' +
         props.className
       }
       variant="rounded"
diff --git a/src/components/form/FormFile.tsx b/src/components/form/FormFile.tsx
index 848aec4..bca99d2 100644
--- a/src/components/form/FormFile.tsx
+++ b/src/components/form/FormFile.tsx
@@ -75,7 +75,7 @@ const FormFile = ({
 
   return (
     <div className={className}>
-      <div className="w-full lg:h-96 max-lg:h-48 flex flex-col justify-center items-center gap-2 p-8 rounded-md bg-cornflower-50 dark:bg-cornflower-950 has-[:hover]:bg-cornflower-100 dark:has-[:hover]:bg-cornflower-900 transition-colors relative">
+      <div className="bg-cornflower-50 dark:bg-cornflower-950 has-[:hover]:bg-cornflower-100 dark:has-[:hover]:bg-cornflower-900 relative flex w-full flex-col items-center justify-center gap-2 rounded-md p-8 transition-colors max-lg:h-48 lg:h-96">
         {label && (
           <p className="text-xs font-bold text-slate-800 dark:text-slate-200">
             {label}
diff --git a/src/components/form/FormQuestion.tsx b/src/components/form/FormQuestion.tsx
index 24b089f..53494a5 100644
--- a/src/components/form/FormQuestion.tsx
+++ b/src/components/form/FormQuestion.tsx
@@ -15,7 +15,7 @@ export default function FormQuestion({
       <div className="flex flex-col gap-2">
         <Typography variant="body1">{question}</Typography>
       </div>
-      <div className="flex flex-wrap gap-6 w-full">{children}</div>
+      <div className="flex w-full flex-wrap gap-6">{children}</div>
     </div>
   );
 }
diff --git a/src/components/form/FormTextField.tsx b/src/components/form/FormTextField.tsx
index 9f9a241..7f71990 100644
--- a/src/components/form/FormTextField.tsx
+++ b/src/components/form/FormTextField.tsx
@@ -8,7 +8,7 @@ export function StyledTextField(props: StyledTextFieldProps) {
     <TextField
       size={props.size ?? (props.multiline ? 'medium' : 'small')}
       {...props}
-      className={`[&>.MuiInputBase-root]:bg-white dark:[&>.MuiInputBase-root]:bg-neutral-800 w-64 ${props.className}`}
+      className={`w-64 [&>.MuiInputBase-root]:bg-white dark:[&>.MuiInputBase-root]:bg-neutral-800 ${props.className}`}
     />
   );
 }
diff --git a/src/components/form/NotesPanel.tsx b/src/components/form/NotesPanel.tsx
index 77ebcc1..2e4faa2 100644
--- a/src/components/form/NotesPanel.tsx
+++ b/src/components/form/NotesPanel.tsx
@@ -22,7 +22,7 @@ export default function NotesPanel({
         files={notes}
         noFilesMessage={
           noFilesMessage ?? (
-            <div className="w-full py-12 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl text-md font-medium text-slate-600 dark:text-slate-400">
+            <div className="text-md flex w-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-slate-200 py-12 font-medium text-slate-600 dark:border-slate-800 dark:text-slate-400">
               You haven&apos;t created any notes yet.
             </div>
           )
diff --git a/src/components/getting-started/OnboardingForm.tsx b/src/components/getting-started/OnboardingForm.tsx
index d829765..a5ec334 100644
--- a/src/components/getting-started/OnboardingForm.tsx
+++ b/src/components/getting-started/OnboardingForm.tsx
@@ -267,10 +267,10 @@ export default function OnboardingForm({
         e.stopPropagation();
         form.handleSubmit();
       }}
-      className="flex flex-col gap-8 w-full"
+      className="flex w-full flex-col gap-8"
       noValidate
     >
-      <BaseCard className="max-sm:px-0 sm:px-2 py-4 overflow-clip">
+      <BaseCard className="overflow-clip py-4 max-sm:px-0 sm:px-2">
         <div>
           <Stepper
             alternativeLabel={useMediaQuery(theme.breakpoints.down('sm'))}
@@ -317,7 +317,7 @@ export default function OnboardingForm({
           </Stepper>
         </div>
       </BaseCard>
-      <Panel className="shadow-lg overflow-clip">
+      <Panel className="overflow-clip shadow-lg">
         <div
           className="relative mb-4 transition-[height] duration-250 ease-in-out"
           style={
@@ -377,7 +377,7 @@ export default function OnboardingForm({
             );
           })}
         </div>
-        <div className="flex flex-row justify-end items-center gap-2">
+        <div className="flex flex-row items-center justify-end gap-2">
           {BackButton}
           {NextButton}
         </div>
diff --git a/src/components/getting-started/OnboardingFormStep.tsx b/src/components/getting-started/OnboardingFormStep.tsx
index db16c9b..3846eba 100644
--- a/src/components/getting-started/OnboardingFormStep.tsx
+++ b/src/components/getting-started/OnboardingFormStep.tsx
@@ -159,7 +159,7 @@ const OnboardingFormStep = withForm({
     } else if (step?.variant === 'start') {
       FormStepData = (
         <div className="flex flex-col gap-6">
-          <div className="flex flex-col gap-2 ml-3.5">
+          <div className="ml-3.5 flex flex-col gap-2">
             <Typography
               variant="h1"
               className="font-display text-4xl font-bold"
@@ -175,7 +175,7 @@ const OnboardingFormStep = withForm({
     } else if (step?.variant === 'finish') {
       FormStepData = (
         <div className="flex flex-col gap-6">
-          <div className="flex flex-col gap-2 ml-3.5">
+          <div className="ml-3.5 flex flex-col gap-2">
             <Typography
               variant="h1"
               className="font-display text-4xl font-bold"
diff --git a/src/components/global/RegisterModal.tsx b/src/components/global/RegisterModal.tsx
index 2389dad..3530c91 100644
--- a/src/components/global/RegisterModal.tsx
+++ b/src/components/global/RegisterModal.tsx
@@ -23,11 +23,11 @@ export const RegisterModalContents = ({
 }: Pick<RegisterModalProps, 'className' | 'onClose' | 'closeButton'>) => {
   return (
     <div
-      className={`flex flex-col items-center z-20 w-fit rounded-lg bg-white dark:bg-neutral-800 p-4 shadow-lg dark:shadow-xl ${className}`}
+      className={`z-20 flex w-fit flex-col items-center rounded-lg bg-white p-4 shadow-lg dark:bg-neutral-800 dark:shadow-xl ${className}`}
     >
-      <div className="flex flex-col h-fit w-full">
+      <div className="flex h-fit w-full flex-col">
         {closeButton && (
-          <div className="sm:absolute self-end">
+          <div className="self-end sm:absolute">
             <IconButton onClick={onClose} aria-label="close modal">
               <CloseRoundedIcon />
             </IconButton>
@@ -35,12 +35,12 @@ export const RegisterModalContents = ({
         )}
         <Typography
           variant="h1"
-          className="font-display text-2xl font-bold text-slate-600 dark:text-slate-400 grow-1 self-center text-center px-4 mt-1 mb-2"
+          className="font-display mt-1 mb-2 grow-1 self-center px-4 text-center text-2xl font-bold text-slate-600 dark:text-slate-400"
         >
           Sign In / Sign Up
         </Typography>
       </div>
-      <div className="flex w-full flex-col items-center justify-center gap-3 sm:flex-row p-4">
+      <div className="flex w-full flex-col items-center justify-center gap-3 p-4 sm:flex-row">
         {providers.map((provider) => (
           <ProviderButton key={provider} provider={provider} />
         ))}
@@ -61,7 +61,7 @@ const RegisterModal: React.FC<RegisterModalProps> = ({
     <Modal
       open={open}
       onClose={onClose}
-      className={`flex justify-center items-center h-screen p-4 ${className}`}
+      className={`flex h-screen items-center justify-center p-4 ${className}`}
     >
       {/* This span is required to receive the tabIndex prop, which will let the user quickly navigate the modal using the keyboard */}
       <span>
diff --git a/src/components/header/BaseHeader.tsx b/src/components/header/BaseHeader.tsx
index d2bceeb..d5aad87 100644
--- a/src/components/header/BaseHeader.tsx
+++ b/src/components/header/BaseHeader.tsx
@@ -138,7 +138,7 @@ export const BaseHeader = ({
   return (
     <BaseHeaderContext.Provider value={{ openCompactSearchBar }}>
       <div
-        className={`${disableSticky ? '' : 'sticky'} min-h-17 top-0 z-50 flex w-full justify-between items-center gap-y-2 gap-x-2 md:gap-x-4 lg:gap-x-8 py-2 px-4 ${menu ? 'max-sm:pl-2' : ''} flex-wrap sm:flex-nowrap ${transparent ? '' : 'bg-lighten dark:bg-darken'} ${className}`}
+        className={`${disableSticky ? '' : 'sticky'} top-0 z-50 flex min-h-17 w-full items-center justify-between gap-x-2 gap-y-2 px-4 py-2 md:gap-x-4 lg:gap-x-8 ${menu ? 'max-sm:pl-2' : ''} flex-wrap sm:flex-nowrap ${transparent ? '' : 'bg-lighten dark:bg-darken'} ${className}`}
       >
         {!transparent && (
           <>
@@ -146,20 +146,20 @@ export const BaseHeader = ({
               src={gradientBG}
               alt="gradient background"
               fill
-              className="object-cover -z-20 select-none"
+              className="-z-20 object-cover select-none"
               sizes="120vw"
             />
-            <div className="absolute inset-0 bg-lighten dark:bg-darken -z-10"></div>
+            <div className="bg-lighten dark:bg-darken absolute inset-0 -z-10"></div>
           </>
         )}
         {!openCompactSearchBar ? (
           <>
-            <div className="grow basis-0 flex gap-x-2 sm:gap-x-8">
+            <div className="flex grow basis-0 gap-x-2 sm:gap-x-8">
               {menuVisibility && menu}
               {logoVisibility && (
                 <Link
                   href="/"
-                  className={`font-display flex gap-2 items-center select-none ${
+                  className={`font-display flex items-center gap-2 select-none ${
                     color?.startsWith('light') ? 'text-white' : 'text-haiti'
                   } ${
                     color === 'lightDark'
@@ -190,10 +190,10 @@ export const BaseHeader = ({
                   )}
                   {logoTextVisibility && (
                     <div className="flex flex-col">
-                      <span className="whitespace-nowrap text-lg md:text-xl font-bold leading-5">
+                      <span className="text-lg leading-5 font-bold whitespace-nowrap md:text-xl">
                         UTD NOTEBOOK
                       </span>
-                      <span className="whitespace-nowrap text-xs md:text-sm font-medium">
+                      <span className="text-xs font-medium whitespace-nowrap md:text-sm">
                         by Nebula Labs
                       </span>
                     </div>
@@ -203,13 +203,13 @@ export const BaseHeader = ({
             </div>
             {fullSearchBarVisibility && searchBar && (
               <div
-                className={`order-last max-sm:basis-full basis-128 sm:order-none gap-x-2 md:gap-x-4 lg:gap-x-8 ${searchVisibility === true ? 'max-md:hidden' : ''} ${shadow ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]' : ''}`}
+                className={`order-last basis-128 gap-x-2 max-sm:basis-full sm:order-none md:gap-x-4 lg:gap-x-8 ${searchVisibility === true ? 'max-md:hidden' : ''} ${shadow ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]' : ''}`}
               >
                 {searchBar}
               </div>
             )}
             <div
-              className={`grow basis-0 flex justify-end items-center gap-x-2 ${shadow ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.2)]' : ''}`}
+              className={`flex grow basis-0 items-center justify-end gap-x-2 ${shadow ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.2)]' : ''}`}
             >
               {compactSearchBarVisibility && searchBar && (
                 <IconButton
@@ -225,8 +225,8 @@ export const BaseHeader = ({
             </div>
           </>
         ) : (
-          <div className="w-full flex justify-center">
-            <div className="w-full max-w-128 flex gap-x-2 items-center">
+          <div className="flex w-full justify-center">
+            <div className="flex w-full max-w-128 items-center gap-x-2">
               <IconButton
                 size="large"
                 onClick={() => setOpenCompactSearchBar(false)}
diff --git a/src/components/header/ProfileDropDown.tsx b/src/components/header/ProfileDropDown.tsx
index e4d5a8c..d54153a 100644
--- a/src/components/header/ProfileDropDown.tsx
+++ b/src/components/header/ProfileDropDown.tsx
@@ -78,7 +78,7 @@ export const ProfileDropDown = ({ shadow = false }: Props) => {
                   <Avatar
                     alt={session.user.name}
                     src={session.user.image ?? undefined}
-                    className="w-6 h-6"
+                    className="h-6 w-6"
                   />
                 </ListItemIcon>
                 <div>
diff --git a/src/components/header/SearchBar.tsx b/src/components/header/SearchBar.tsx
index f430f30..8882d9f 100644
--- a/src/components/header/SearchBar.tsx
+++ b/src/components/header/SearchBar.tsx
@@ -535,11 +535,11 @@ export default function SearchBar(props: Props) {
               // If option isSearchQuery and isRecent is declared & is true
               typeof option !== 'string' ? (
                 option.isRecent == true ? (
-                  <HistoryToggleOffIcon className="text-gray-400 self-start mr-2 mt-0.5" />
+                  <HistoryToggleOffIcon className="mt-0.5 mr-2 self-start text-gray-400" />
                 ) : option.hasNotes ? (
-                  <ArticleIcon className="text-gray-400 self-start mr-2 mt-0.5" />
+                  <ArticleIcon className="mt-0.5 mr-2 self-start text-gray-400" />
                 ) : (
-                  <AddIcon className="text-gray-400 self-start mr-2 mt-0.5" />
+                  <AddIcon className="mt-0.5 mr-2 self-start text-gray-400" />
                 )
               ) : null
             }
diff --git a/src/components/nav/NavMenu.tsx b/src/components/nav/NavMenu.tsx
index 3888ee7..4b0c914 100644
--- a/src/components/nav/NavMenu.tsx
+++ b/src/components/nav/NavMenu.tsx
@@ -49,15 +49,15 @@ const NavMenu = ({ userCapabilites }: NavMenuProps) => {
       </div>
 
       {/* Privacy Policy */}
-      <div className="w-full mt-auto px-6 py-2 flex flex-wrap gap-2 justify-evenly text-base font-medium capitalize md:text-sm text-slate-600 dark:text-slate-400">
+      <div className="mt-auto flex w-full flex-wrap justify-evenly gap-2 px-6 py-2 text-base font-medium text-slate-600 capitalize md:text-sm dark:text-slate-400">
         <Link
-          className="underline decoration-transparent hover:decoration-inherit transition"
+          className="underline decoration-transparent transition hover:decoration-inherit"
           href="https://www.utdnebula.com/legal/privacy-policy.txt"
         >
           Privacy Policy
         </Link>
         <Link
-          className="underline decoration-transparent hover:decoration-inherit transition"
+          className="underline decoration-transparent transition hover:decoration-inherit"
           href="/sitemap.xml"
         >
           Sitemap
diff --git a/src/components/nav/SidebarItems.tsx b/src/components/nav/SidebarItems.tsx
index 545f042..decfdf9 100644
--- a/src/components/nav/SidebarItems.tsx
+++ b/src/components/nav/SidebarItems.tsx
@@ -19,7 +19,7 @@ const SidebarItems = ({ cat }: { cat: allCats[number] }) => {
 
   return (
     <Link
-      className={`group flex items-center gap-x-4 rounded-full px-5 py-2.5 transition-colors duration-200 ${active ? 'bg-white dark:bg-neutral-800 shadow-md dark:shadow-lg' : ''} hover:bg-royal/10 dark:hover:bg-neutral-700`}
+      className={`group flex items-center gap-x-4 rounded-full px-5 py-2.5 transition-colors duration-200 ${active ? 'bg-white shadow-md dark:bg-neutral-800 dark:shadow-lg' : ''} hover:bg-royal/10 dark:hover:bg-neutral-700`}
       href={route}
       target={route.startsWith('http') ? '_blank' : ''}
     >
@@ -33,7 +33,7 @@ const SidebarItems = ({ cat }: { cat: allCats[number] }) => {
         />
       )}
       <h2
-        className={`text-base font-medium capitalize md:text-sm ${active ? 'text-royal dark:text-cornflower-300' : 'text-slate-800 dark:text-slate-200'} transition-colors group-hover:text-royal dark:group-hover:text-cornflower-300`}
+        className={`text-base font-medium capitalize md:text-sm ${active ? 'text-royal dark:text-cornflower-300' : 'text-slate-800 dark:text-slate-200'} group-hover:text-royal dark:group-hover:text-cornflower-300 transition-colors`}
       >
         {cat}
       </h2>
diff --git a/src/components/nav/Slide.tsx b/src/components/nav/Slide.tsx
index 29bdc12..ffdb874 100644
--- a/src/components/nav/Slide.tsx
+++ b/src/components/nav/Slide.tsx
@@ -24,7 +24,7 @@ const NewSidebar = ({
       <Tooltip title="Menu" enterDelay={0} arrow>
         <IconButton
           onClick={() => setOpen(true)}
-          className={`z-50 ${homepage ? ' drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]' : ''}`}
+          className={`z-50 ${homepage ? 'drop-shadow-[0_0_4px_rgb(0_0_0_/_0.4)]' : ''}`}
           size="large"
           // title='Menu'
         >
diff --git a/src/components/profile/ProfileNotes.tsx b/src/components/profile/ProfileNotes.tsx
index b3856a9..c9ebdc9 100644
--- a/src/components/profile/ProfileNotes.tsx
+++ b/src/components/profile/ProfileNotes.tsx
@@ -46,7 +46,7 @@ export default function ProfileNotes({
       <Panel
         className={`relative overflow-clip ${HOME_PAGE_GRADIENT_CLASS} p-0 shadow-xl`}
       >
-        <div className="absolute inset-0 dark:bg-slightly-darken" />
+        <div className="dark:bg-slightly-darken absolute inset-0" />
         <div className="z-10 border-b border-white/20 px-6 py-5">
           <div className="flex items-center gap-4 max-sm:flex-col-reverse max-sm:items-start sm:flex-row">
             <Avatar
@@ -58,10 +58,10 @@ export default function ProfileNotes({
             </Avatar>
 
             <div className="flex flex-col gap-2 text-shadow-[0_0_8px_rgb(0_0_0_/_0.4)]">
-              <h1 className="font-display text-4xl font-semibold max-sm:text-center text-white">
+              <h1 className="font-display text-4xl font-semibold text-white max-sm:text-center">
                 {displayName}
               </h1>
-              <span className="text-xl max-sm:text-lg max-sm:text-center text-white opacity-80">
+              <span className="text-xl text-white opacity-80 max-sm:text-center max-sm:text-lg">
                 @{username}
               </span>
             </div>
@@ -76,7 +76,7 @@ export default function ProfileNotes({
             defaultValue={tab}
             indicatorColor="primary"
             textColor="inherit"
-            className="[&_.MuiTab-root]:min-h-0 [&_.MuiTab-root]:text-sm [&_.MuiTab-root]:normal-case [&_.MuiTab-root]:text-slate-200 [&_.MuiTab-root:hover]:opacity-100 [&_.MuiTab-root.Mui-selected]:text-white [&_.MuiTab-root.Mui-selected]:font-medium [&_.MuiTab-root.Mui-selected]:drop-shadow-[0_0_10px_rgba(0,0,0,0.2)] [&_.MuiTabs-flexContainer]:gap-4"
+            className="[&_.MuiTab-root]:min-h-0 [&_.MuiTab-root]:text-sm [&_.MuiTab-root]:text-slate-200 [&_.MuiTab-root]:normal-case [&_.MuiTab-root.Mui-selected]:font-medium [&_.MuiTab-root.Mui-selected]:text-white [&_.MuiTab-root.Mui-selected]:drop-shadow-[0_0_10px_rgba(0,0,0,0.2)] [&_.MuiTab-root:hover]:opacity-100 [&_.MuiTabs-flexContainer]:gap-4"
             sx={{
               '& .MuiTabs-indicator': {
                 backgroundColor: '#ffffff',
@@ -94,7 +94,7 @@ export default function ProfileNotes({
         heading={activeHeading}
         notes={activeNotes}
         noFilesMessage={
-          <div className="w-full py-12 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 dark:border-slate-800 rounded-xl text-md font-medium text-slate-600 dark:text-slate-400">
+          <div className="text-md flex w-full flex-col items-center justify-center rounded-xl border-2 border-dashed border-slate-200 py-12 font-medium text-slate-600 dark:border-slate-800 dark:text-slate-400">
             {emptyMessage}
           </div>
         }
diff --git a/src/components/sections/Breadcrumbs.tsx b/src/components/sections/Breadcrumbs.tsx
index 1febf55..8a4ff54 100644
--- a/src/components/sections/Breadcrumbs.tsx
+++ b/src/components/sections/Breadcrumbs.tsx
@@ -26,7 +26,7 @@ export default function Breadcrumbs({ items }: BreadcrumbsProps) {
   return (
     <MuiBreadcrumbs
       aria-label="Breadcrumb"
-      className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-800 dark:text-slate-200"
+      className="text-xs font-semibold tracking-[0.2em] text-slate-800 uppercase dark:text-slate-200"
       separator={
         <span className="mx-2 text-slate-600 dark:text-slate-400">/</span>
       }
@@ -46,7 +46,7 @@ export default function Breadcrumbs({ items }: BreadcrumbsProps) {
             <Link
               key={`${text}-${href}`}
               href={href}
-              className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-600 dark:text-slate-400 transition hover:text-black dark:hover:text-white"
+              className="text-xs font-semibold tracking-[0.2em] text-slate-600 uppercase transition hover:text-black dark:text-slate-400 dark:hover:text-white"
             >
               {text}
             </Link>
@@ -55,7 +55,7 @@ export default function Breadcrumbs({ items }: BreadcrumbsProps) {
         return (
           <span
             key={`${text}-${index}`}
-            className="text-xs font-semibold uppercase tracking-[0.2em] text-slate-800 dark:text-slate-200"
+            className="text-xs font-semibold tracking-[0.2em] text-slate-800 uppercase dark:text-slate-200"
           >
             {text}
           </span>
@@ -65,7 +65,7 @@ export default function Breadcrumbs({ items }: BreadcrumbsProps) {
         (normalizedItems[normalizedItems.length - 1]?.text === 'loading' ? (
           <Skeleton variant="text" className="w-16" />
         ) : (
-          <span className="text-xs font-semibold uppercase tracking-[0.2em]">
+          <span className="text-xs font-semibold tracking-[0.2em] uppercase">
             {normalizedItems[normalizedItems.length - 1]?.text}
           </span>
         ))}
diff --git a/src/components/sections/FileCard.tsx b/src/components/sections/FileCard.tsx
index b7e991d..dbf8d38 100644
--- a/src/components/sections/FileCard.tsx
+++ b/src/components/sections/FileCard.tsx
@@ -126,7 +126,7 @@ export default function FileCard({ file }: FileCardProps) {
         </div>
       </Link>
 
-      <div className="mx-4 mb-2 mt-0">
+      <div className="mx-4 mt-0 mb-2">
         <RatingWidget fileId={file.id} />
       </div>
 
diff --git a/src/components/sections/LinkCard.tsx b/src/components/sections/LinkCard.tsx
index 5f21504..e2d996d 100644
--- a/src/components/sections/LinkCard.tsx
+++ b/src/components/sections/LinkCard.tsx
@@ -37,7 +37,7 @@ export default function LinkCard({
         )}
 
         {meta && (
-          <div className="mt-auto text-xs font-semibold text-royal dark:text-cornflower-300">
+          <div className="text-royal dark:text-cornflower-300 mt-auto text-xs font-semibold">
             {meta}
           </div>
         )}
diff --git a/src/components/sections/NoteEditButton.tsx b/src/components/sections/NoteEditButton.tsx
index 8879b0e..e66fd28 100644
--- a/src/components/sections/NoteEditButton.tsx
+++ b/src/components/sections/NoteEditButton.tsx
@@ -11,7 +11,7 @@ export default function NoteEditButton({ fileId }: { fileId: string }) {
       href={`/notes/${fileId}/edit`}
       variant="contained"
       size="small"
-      className="normal-case bg-white hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 text-haiti dark:text-white"
+      className="text-haiti bg-white normal-case hover:bg-neutral-200 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700"
       startIcon={<EditIcon />}
     >
       Edit
diff --git a/src/components/sections/NoteInfoPanel.tsx b/src/components/sections/NoteInfoPanel.tsx
index 4ba1154..cd72eaf 100644
--- a/src/components/sections/NoteInfoPanel.tsx
+++ b/src/components/sections/NoteInfoPanel.tsx
@@ -25,13 +25,13 @@ export default function NoteInfoPanel({ file }: NoteInfoPanelProps) {
 
   return (
     <Panel
-      className="w-full py-2 border-l-4 border-royal dark:border-cornflower-300 rounded-t-none gap-0"
+      className="border-royal dark:border-cornflower-300 w-full gap-0 rounded-t-none border-l-4 py-2"
       smallPadding
     >
       <div className="flex flex-col">
         {/* Top piece, always visible, has the name and buttons */}
         <div className="flex flex-wrap items-center gap-2">
-          <div className="flex items-center w-full md:w-auto flex-grow gap-2">
+          <div className="flex w-full flex-grow items-center gap-2 md:w-auto">
             <IconButton
               onClick={() => setExpanded((v) => !v)}
               aria-label={
@@ -48,7 +48,7 @@ export default function NoteInfoPanel({ file }: NoteInfoPanelProps) {
               {file.name}
             </Typography>
           </div>
-          <div className="w-full md:w-auto flex-shrink-0 flex md:ml-auto justify-end flex-wrap items-center gap-3">
+          <div className="flex w-full flex-shrink-0 flex-wrap items-center justify-end gap-3 md:ml-auto md:w-auto">
             <RatingWidget fileId={file.id} />
             {isAuthor && <NoteEditButton fileId={file.id} />}
             {isAuthor && <NoteDeleteButton fileId={file.id} />}
@@ -67,7 +67,7 @@ export default function NoteInfoPanel({ file }: NoteInfoPanelProps) {
 
         {/* Bottom piece, collapsible, has author, professor, description, and last modified date */}
         <Collapse in={expanded}>
-          <div className="pb-2 px-3 flex flex-col gap-1">
+          <div className="flex flex-col gap-1 px-3 pb-2">
             <p className="text-sm font-medium text-slate-800 dark:text-slate-200">
               By{' '}
               {
@@ -102,15 +102,15 @@ export default function NoteInfoPanel({ file }: NoteInfoPanelProps) {
               </p>
             )}
             {file.description ? (
-              <p className="text-sm text-slate-600 dark:text-slate-400 leading-relaxed mt-1">
+              <p className="mt-1 text-sm leading-relaxed text-slate-600 dark:text-slate-400">
                 {file.description}
               </p>
             ) : (
-              <p className="text-sm text-slate-400 italic mt-1">
+              <p className="mt-1 text-sm text-slate-400 italic">
                 No provided description.
               </p>
             )}
-            <span className="text-xs text-slate-600 dark:text-slate-400 mt-1">
+            <span className="mt-1 text-xs text-slate-600 dark:text-slate-400">
               Last modified{' '}
               {file.updatedAt.toLocaleDateString('en-US', {
                 day: 'numeric',
diff --git a/src/components/sections/ReportButton.tsx b/src/components/sections/ReportButton.tsx
index 199ebd0..ff72ceb 100644
--- a/src/components/sections/ReportButton.tsx
+++ b/src/components/sections/ReportButton.tsx
@@ -15,7 +15,7 @@ export default function ReportButton({ fileId }: ReportButtonProps) {
       href={`/report?fileId=${encodeURIComponent(fileId)}`}
       variant="contained"
       size="small"
-      className="normal-case bg-white hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 text-haiti dark:text-white"
+      className="text-haiti bg-white normal-case hover:bg-neutral-200 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700"
       startIcon={<FlagOutlinedIcon />}
     >
       Report
diff --git a/src/components/sections/SaveButton.tsx b/src/components/sections/SaveButton.tsx
index 85a4514..1c21d61 100644
--- a/src/components/sections/SaveButton.tsx
+++ b/src/components/sections/SaveButton.tsx
@@ -99,7 +99,7 @@ export default function SaveButton({ fileId }: SaveButtonProps) {
       variant="contained"
       size="small"
       onClick={handleClick}
-      className="normal-case bg-white hover:bg-neutral-200 dark:bg-neutral-800 dark:hover:bg-neutral-700 text-haiti dark:text-white"
+      className="text-haiti bg-white normal-case hover:bg-neutral-200 dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700"
       startIcon={isSaved ? <BookmarkIcon /> : <BookmarkBorderIcon />}
     >
       {isSaved ? 'Saved' : 'Save'}
diff --git a/src/components/sections/SectionHeader.tsx b/src/components/sections/SectionHeader.tsx
index f3ce589..6ccc8cf 100644
--- a/src/components/sections/SectionHeader.tsx
+++ b/src/components/sections/SectionHeader.tsx
@@ -21,7 +21,7 @@ export default function SectionHeader({
   const detailItems = (detailBreadcrumbs ?? []).filter(Boolean);
 
   return (
-    <div className="flex flex-row justify-between items-center gap-4">
+    <div className="flex flex-row items-center justify-between gap-4">
       <div className="flex flex-col gap-2">
         {breadcrumbs.length > 0 ? (
           <Breadcrumbs items={breadcrumbs} />
@@ -35,7 +35,7 @@ export default function SectionHeader({
           {title}
         </h1>
         {description && (
-          <p className="max-w-2xl text-sm text-slate-800 dark:text-slate-200 md:text-base">
+          <p className="max-w-2xl text-sm text-slate-800 md:text-base dark:text-slate-200">
             {description}
           </p>
         )}
@@ -45,7 +45,7 @@ export default function SectionHeader({
       {metaLabel && (
         <BaseCard className="w-fit px-4 py-2">
           <div className="flex items-center gap-2 text-sm font-semibold">
-            <span className="h-2 w-2 rounded-full bg-royal dark:bg-cornflower-300" />
+            <span className="bg-royal dark:bg-cornflower-300 h-2 w-2 rounded-full" />
             <span>{metaLabel}</span>
           </div>
         </BaseCard>
diff --git a/src/components/settings/SettingsForm.tsx b/src/components/settings/SettingsForm.tsx
index fe99aed..8e68c67 100644
--- a/src/components/settings/SettingsForm.tsx
+++ b/src/components/settings/SettingsForm.tsx
@@ -30,7 +30,7 @@ async function SettingsForm({
   );
 
   return (
-    <div className="flex flex-col gap-8 w-full max-w-6xl">
+    <div className="flex w-full max-w-6xl flex-col gap-8">
       {!userData && (
         <Alert severity="error" variant="filled" className="rounded-lg">
           One or more panels were hidden because their associated data could not
diff --git a/src/components/settings/SettingsHeader.tsx b/src/components/settings/SettingsHeader.tsx
index 26e4e10..57523f5 100644
--- a/src/components/settings/SettingsHeader.tsx
+++ b/src/components/settings/SettingsHeader.tsx
@@ -10,20 +10,20 @@ type SettingsHeaderProps = {
 export default function SettingsHeader({ user }: SettingsHeaderProps) {
   return (
     <Panel className={`relative ${HOME_PAGE_GRADIENT_CLASS}`}>
-      <div className="absolute inset-0 dark:bg-slightly-darken" />
+      <div className="dark:bg-slightly-darken absolute inset-0" />
       <div className="z-10">
-        <div className="flex gap-4 max-sm:flex-col-reverse sm:flex-row pl-2">
+        <div className="flex gap-4 pl-2 max-sm:flex-col-reverse sm:flex-row">
           <div className="flex flex-col gap-2 text-shadow-[0_0_8px_rgb(0_0_0_/_0.4)]">
-            <h1 className="font-display text-4xl font-semibold max-sm:text-center text-white">
+            <h1 className="font-display text-4xl font-semibold text-white max-sm:text-center">
               Settings
             </h1>
-            <span className="text-xl max-sm:text-lg max-sm:text-center text-white opacity-80">
+            <span className="text-xl text-white opacity-80 max-sm:text-center max-sm:text-lg">
               Manage your username and account preferences
             </span>
           </div>
           {user?.image && (
-            <div className="max-sm:mx-auto sm:ml-auto drop-shadow-[0_0_16px_rgb(0_0_0_/_0.2)]">
-              <Avatar src={user.image} className="w-18 h-18 rounded-full">
+            <div className="drop-shadow-[0_0_16px_rgb(0_0_0_/_0.2)] max-sm:mx-auto sm:ml-auto">
+              <Avatar src={user.image} className="h-18 w-18 rounded-full">
                 {user.name.charAt(0)}
               </Avatar>
             </div>
diff --git a/src/components/settings/forms/DeleteAccount.tsx b/src/components/settings/forms/DeleteAccount.tsx
index cbc7427..4e6747a 100644
--- a/src/components/settings/forms/DeleteAccount.tsx
+++ b/src/components/settings/forms/DeleteAccount.tsx
@@ -5,7 +5,7 @@ export default function DeleteAccount() {
   return (
     <Panel
       heading="Delete Account"
-      className="bg-red-100 dark:bg-red-950 border border-red-500 dark:border-red-700"
+      className="border border-red-500 bg-red-100 dark:border-red-700 dark:bg-red-950"
       description={
         <div className="text-slate-800 dark:text-slate-200">
           <p>This will permanently delete your account from UTD Notebook.</p>
diff --git a/src/components/settings/forms/UserInfo.tsx b/src/components/settings/forms/UserInfo.tsx
index a762930..e8351f9 100644
--- a/src/components/settings/forms/UserInfo.tsx
+++ b/src/components/settings/forms/UserInfo.tsx
@@ -90,7 +90,7 @@ export default function UserInfo({ user }: UserInfoProps) {
       }}
     >
       <Panel heading="Personal Information">
-        <div className="m-2 flex flex-col gap-6 max-w-2xl">
+        <div className="m-2 flex max-w-2xl flex-col gap-6">
           <form.FieldSet name="name" title="Name" icon={<PersonIconOutlined />}>
             <div className="flex flex-wrap gap-6">
               <form.AppField name="firstName">
@@ -188,7 +188,7 @@ export default function UserInfo({ user }: UserInfoProps) {
             title="Contact"
             icon={<EmailOutlinedIcon />}
           >
-            <div className="flex flex-wrap gap-6 w-full">
+            <div className="flex w-full flex-wrap gap-6">
               <form.AppField name="contactEmail">
                 {(field) => (
                   <div className="grow">
@@ -204,7 +204,7 @@ export default function UserInfo({ user }: UserInfoProps) {
             </div>
           </form.FieldSet>
         </div>
-        <div className="flex flex-wrap justify-end items-center gap-2">
+        <div className="flex flex-wrap items-center justify-end gap-2">
           <form.AppForm>
             <form.ResetButton />
           </form.AppForm>
diff --git a/src/components/settings/forms/Username.tsx b/src/components/settings/forms/Username.tsx
index 97a54c5..bd75027 100644
--- a/src/components/settings/forms/Username.tsx
+++ b/src/components/settings/forms/Username.tsx
@@ -213,7 +213,7 @@ export default function Username({ user }: UsernameProps) {
             )}
           </form.AppField>
         </div>
-        <div className="flex flex-wrap justify-end items-center gap-2">
+        <div className="flex flex-wrap items-center justify-end gap-2">
           <form.AppForm>
             <form.ResetButton />
           </form.AppForm>