diff --git a/components/Auth.tsx b/components/Auth.tsx
index 16ab760..c84f599 100644
--- a/components/Auth.tsx
+++ b/components/Auth.tsx
@@ -18,20 +18,20 @@ const Auth: FC<{ redirect: string }> = ({ redirect }) => {
   const { t } = useTranslation()
 
   return (
-    <div className="md:my-10 flex flex-col max-w-sm mx-auto space-y-4">
-      <div className="md:w-5/6 w-3/4 mx-auto">
+    <div className="mx-auto flex max-w-sm flex-col space-y-4 md:my-10">
+      <div className="mx-auto w-3/4 md:w-5/6">
         <Image src={'/images/fabulous-wapmire-weekdays.png'} alt="authenticate" width={912} height={912} priority />
       </div>
-      <div className="dark:text-gray-100 text-lg font-bold text-gray-900">{t('Enter Password')}</div>
+      <div className="text-lg font-bold text-gray-900 dark:text-gray-100">{t('Enter Password')}</div>
 
-      <p className="text-sm text-gray-500 font-medium">
+      <p className="text-sm font-medium text-gray-500">
         {t('This route (the folder itself and the files inside) is password protected. ') +
           t('If you know the password, please enter it below.')}
       </p>
 
       <div className="flex items-center space-x-2">
         <input
-          className="flex-1 border border-gray-600/10 dark:bg-gray-600 dark:text-white focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none p-2 font-mono rounded"
+          className="flex-1 rounded border border-gray-600/10 p-2 font-mono focus:outline-none focus:ring focus:ring-blue-300 dark:bg-gray-600 dark:text-white dark:focus:ring-blue-700"
           autoFocus
           type="text"
           placeholder="************"
@@ -47,7 +47,7 @@ const Auth: FC<{ redirect: string }> = ({ redirect }) => {
           }}
         />
         <button
-          className="focus:outline-none focus:ring focus:ring-blue-400 hover:bg-blue-500 px-4 py-2 text-white bg-blue-600 rounded"
+          className="rounded bg-blue-600 px-4 py-2 text-white hover:bg-blue-500 focus:outline-none focus:ring focus:ring-blue-400"
           onClick={() => {
             setPersistedToken(token)
             router.reload()
diff --git a/components/Footer.tsx b/components/Footer.tsx
index 80ee127..1e61d43 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -9,7 +9,7 @@ const createFooterMarkup = () => {
 const Footer = () => {
   return (
     <div
-      className="p-4 text-xs font-medium text-gray-400 w-full text-center border-t border-gray-900/10 dark:border-gray-500/30"
+      className="w-full border-t border-gray-900/10 p-4 text-center text-xs font-medium text-gray-400 dark:border-gray-500/30"
       dangerouslySetInnerHTML={createFooterMarkup()}
     ></div>
   )
diff --git a/components/FourOhFour.tsx b/components/FourOhFour.tsx
index d17328e..66b7a28 100644
--- a/components/FourOhFour.tsx
+++ b/components/FourOhFour.tsx
@@ -4,23 +4,23 @@ import { Trans } from 'next-i18next'
 const FourOhFour: React.FC<{ errorMsg: string }> = ({ errorMsg }) => {
   return (
     <div className="my-12">
-      <div className="w-1/3 mx-auto">
+      <div className="mx-auto w-1/3">
         <Image src="/images/fabulous-rip-2.png" alt="404" width={912} height={912} priority />
       </div>
-      <div className="mt-6 text-gray-500 max-w-xl mx-auto">
-        <div className="text-xl font-bold mb-8">
+      <div className="mx-auto mt-6 max-w-xl text-gray-500">
+        <div className="mb-8 text-xl font-bold">
           <Trans>
             {/* eslint-disable-next-line react/no-unescaped-entities */}
-            Oops, that's a <span className="underline decoration-wavy decoration-red-500">four-oh-four</span>.
+            Oops, that's a <span className="underline decoration-red-500 decoration-wavy">four-oh-four</span>.
           </Trans>
         </div>
-        <div className="font-mono border border-gray-400/20 rounded p-2 mb-4 text-xs bg-gray-50 dark:bg-gray-800">
+        <div className="mb-4 rounded border border-gray-400/20 bg-gray-50 p-2 font-mono text-xs dark:bg-gray-800">
           {errorMsg}
         </div>
         <div className="text-sm">
           <Trans>
             Press{' '}
-            <kbd className="border-opacity-20 font-mono text-xs p-1 bg-gray-100 dark:bg-gray-800 border rounded">
+            <kbd className="rounded border border-opacity-20 bg-gray-100 p-1 font-mono text-xs dark:bg-gray-800">
               F12
             </kbd>{' '}
             and open devtools for more details, or seek help at{' '}
diff --git a/components/Loading.tsx b/components/Loading.tsx
index c51a494..4589467 100644
--- a/components/Loading.tsx
+++ b/components/Loading.tsx
@@ -1,7 +1,7 @@
 const Loading: React.FC<{ loadingText: string }> = ({ loadingText }) => {
   return (
-    <div className="dark:text-white flex items-center justify-center py-32 space-x-1 rounded">
-      <LoadingIcon className="animate-spin w-5 h-5 mr-3 -ml-1" />
+    <div className="flex items-center justify-center space-x-1 rounded py-32 dark:text-white">
+      <LoadingIcon className="mr-3 -ml-1 h-5 w-5 animate-spin" />
       <div>{loadingText}</div>
     </div>
   )
diff --git a/components/MultiFileDownloader.tsx b/components/MultiFileDownloader.tsx
index 69a8c56..c837862 100644
--- a/components/MultiFileDownloader.tsx
+++ b/components/MultiFileDownloader.tsx
@@ -12,7 +12,7 @@ import { getStoredToken } from '../utils/protectedRouteHandler'
  * @param props.router Next router instance, used for reloading the page
  * @param props.progress Current downloading and compression progress (returned by jszip metadata)
  */
-export function DownloadingToast({ router, progress }: { router: NextRouter, progress?: string }) {
+export function DownloadingToast({ router, progress }: { router: NextRouter; progress?: string }) {
   const { t } = useTranslation()
 
   return (
@@ -21,13 +21,13 @@ export function DownloadingToast({ router, progress }: { router: NextRouter, pro
         <span>{progress ? t('Downloading {{progress}}%', { progress }) : t('Downloading selected files...')}</span>
 
         <div className="relative mt-2">
-          <div className="overflow-hidden h-1 flex rounded bg-gray-100">
-            <div style={{ width: `${progress}%` }} className="text-white bg-gray-500 transition-all duration-100"></div>
+          <div className="flex h-1 overflow-hidden rounded bg-gray-100">
+            <div style={{ width: `${progress}%` }} className="bg-gray-500 text-white transition-all duration-100"></div>
           </div>
         </div>
       </div>
       <button
-        className="p-2 rounded bg-red-500 hover:bg-red-400 text-white focus:outline-none focus:ring focus:ring-red-300"
+        className="rounded bg-red-500 p-2 text-white hover:bg-red-400 focus:outline-none focus:ring focus:ring-red-300"
         onClick={() => router.reload()}
       >
         {t('Cancel')}
diff --git a/components/SearchModal.tsx b/components/SearchModal.tsx
index 23741d1..98c09a4 100644
--- a/components/SearchModal.tsx
+++ b/components/SearchModal.tsx
@@ -91,14 +91,14 @@ function SearchResultItemTemplate({
     <Link href={driveItemPath} passHref>
       <a
         className={`flex items-center space-x-4 border-b border-gray-400/30 px-4 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-850 ${
-          disabled ? 'cursor-not-allowed pointer-events-none' : 'cursor-pointer'
+          disabled ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
         }`}
       >
         <FontAwesomeIcon icon={driveItem.file ? getFileIcon(driveItem.name) : ['far', 'folder']} />
         <div>
           <div className="text-sm font-medium leading-8">{driveItem.name}</div>
           <div
-            className={`text-xs font-mono opacity-60 truncate overflow-hidden ${
+            className={`overflow-hidden truncate font-mono text-xs opacity-60 ${
               itemDescription === 'Loading ...' && 'animate-pulse'
             }`}
           >
@@ -176,8 +176,8 @@ export default function SearchModal({
 
   return (
     <Transition appear show={searchOpen} as={Fragment}>
-      <Dialog as="div" className="inset-0 z-[200] fixed overflow-y-auto" onClose={closeSearchBox}>
-        <div className="min-h-screen text-center px-4">
+      <Dialog as="div" className="fixed inset-0 z-[200] overflow-y-auto" onClose={closeSearchBox}>
+        <div className="min-h-screen px-4 text-center">
           <Transition.Child
             as={Fragment}
             enter="ease-out duration-100"
@@ -187,7 +187,7 @@ export default function SearchModal({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <Dialog.Overlay className="bg-white/80 inset-0 fixed dark:bg-gray-800/80" />
+            <Dialog.Overlay className="fixed inset-0 bg-white/80 dark:bg-gray-800/80" />
           </Transition.Child>
 
           <Transition.Child
@@ -199,12 +199,12 @@ export default function SearchModal({
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <div className="border rounded border-gray-400/30 shadow-xl my-12 text-left w-full max-w-3xl transform transition-all inline-block overflow-hidden">
+            <div className="my-12 inline-block w-full max-w-3xl transform overflow-hidden rounded border border-gray-400/30 text-left shadow-xl transition-all">
               <Dialog.Title
                 as="h3"
-                className="flex items-center space-x-4 dark:text-white border-b bg-gray-50 border-gray-400/30 p-4 dark:bg-gray-800"
+                className="flex items-center space-x-4 border-b border-gray-400/30 bg-gray-50 p-4 dark:bg-gray-800 dark:text-white"
               >
-                <FontAwesomeIcon icon="search" className="w-4 h-4" />
+                <FontAwesomeIcon icon="search" className="h-4 w-4" />
                 <input
                   type="text"
                   id="search-box"
@@ -213,27 +213,27 @@ export default function SearchModal({
                   value={query}
                   onChange={e => setQuery(e.target.value)}
                 />
-                <div className="px-2 py-1 rounded-lg bg-gray-200 dark:bg-gray-700 font-medium text-xs">ESC</div>
+                <div className="rounded-lg bg-gray-200 px-2 py-1 text-xs font-medium dark:bg-gray-700">ESC</div>
               </Dialog.Title>
               <div
-                className="bg-white dark:text-white dark:bg-gray-900 max-h-[80vh] overflow-x-hidden overflow-y-scroll"
+                className="max-h-[80vh] overflow-x-hidden overflow-y-scroll bg-white dark:bg-gray-900 dark:text-white"
                 onClick={closeSearchBox}
               >
                 {results.loading && (
-                  <div className="text-center px-4 py-12 text-sm font-medium">
-                    <LoadingIcon className="animate-spin w-4 h-4 mr-2 inline-block svg-inline--fa" />
+                  <div className="px-4 py-12 text-center text-sm font-medium">
+                    <LoadingIcon className="svg-inline--fa mr-2 inline-block h-4 w-4 animate-spin" />
                     <span>{t('Loading ...')}</span>
                   </div>
                 )}
                 {results.error && (
-                  <div className="text-center px-4 py-12 text-sm font-medium">
+                  <div className="px-4 py-12 text-center text-sm font-medium">
                     {t('Error: {{message}}', { message: results.error.message })}
                   </div>
                 )}
                 {results.result && (
                   <>
                     {results.result.length === 0 ? (
-                      <div className="text-center px-4 py-12 text-sm font-medium">{t('Nothing here.')}</div>
+                      <div className="px-4 py-12 text-center text-sm font-medium">{t('Nothing here.')}</div>
                     ) : (
                       results.result.map(result => <SearchResultItem key={result.id} result={result} />)
                     )}
diff --git a/package.json b/package.json
index a61b285..05ce153 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "format": "prettier components/**/*.tsx config/*.js pages/**/*.{ts,tsx} {types,utils}/**/*.ts --write",
+    "format": "prettier 'components/**/*.tsx' 'config/*.js' 'pages/**/*.{ts,tsx}' '{types,utils}/**/*.ts' --write",
     "extract": "i18next"
   },
   "dependencies": {