diff --git a/.prettierrc b/.prettierrc
index 8d33878..5bd1ab7 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,6 +1,6 @@
 {
     "tabWidth": 4,
     "singleQuote": true,
-    "plugins": ["prettier-plugin-svelte"],
+    "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
     "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/package-lock.json b/package-lock.json
index 139cdb5..54d4f7e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -29,8 +29,9 @@
                 "highlight.js": "^11.9.0",
                 "markdown-it": "^14.0.0",
                 "postcss": "^8.4.35",
-                "prettier": "^3.1.1",
+                "prettier": "^3.2.5",
                 "prettier-plugin-svelte": "^3.1.2",
+                "prettier-plugin-tailwindcss": "^0.5.12",
                 "svelte": "^4.2.7",
                 "svelte-check": "^3.6.0",
                 "tailwindcss": "^3.4.1",
@@ -3475,6 +3476,79 @@
                 "svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
             }
         },
+        "node_modules/prettier-plugin-tailwindcss": {
+            "version": "0.5.12",
+            "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.5.12.tgz",
+            "integrity": "sha512-o74kiDBVE73oHW+pdkFSluHBL3cYEvru5YgEqNkBMFF7Cjv+w1vI565lTlfoJT4VLWDe0FMtZ7FkE/7a4pMXSQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=14.21.3"
+            },
+            "peerDependencies": {
+                "@ianvs/prettier-plugin-sort-imports": "*",
+                "@prettier/plugin-pug": "*",
+                "@shopify/prettier-plugin-liquid": "*",
+                "@trivago/prettier-plugin-sort-imports": "*",
+                "prettier": "^3.0",
+                "prettier-plugin-astro": "*",
+                "prettier-plugin-css-order": "*",
+                "prettier-plugin-import-sort": "*",
+                "prettier-plugin-jsdoc": "*",
+                "prettier-plugin-marko": "*",
+                "prettier-plugin-organize-attributes": "*",
+                "prettier-plugin-organize-imports": "*",
+                "prettier-plugin-sort-imports": "*",
+                "prettier-plugin-style-order": "*",
+                "prettier-plugin-svelte": "*"
+            },
+            "peerDependenciesMeta": {
+                "@ianvs/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "@prettier/plugin-pug": {
+                    "optional": true
+                },
+                "@shopify/prettier-plugin-liquid": {
+                    "optional": true
+                },
+                "@trivago/prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-astro": {
+                    "optional": true
+                },
+                "prettier-plugin-css-order": {
+                    "optional": true
+                },
+                "prettier-plugin-import-sort": {
+                    "optional": true
+                },
+                "prettier-plugin-jsdoc": {
+                    "optional": true
+                },
+                "prettier-plugin-marko": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-attributes": {
+                    "optional": true
+                },
+                "prettier-plugin-organize-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-sort-imports": {
+                    "optional": true
+                },
+                "prettier-plugin-style-order": {
+                    "optional": true
+                },
+                "prettier-plugin-svelte": {
+                    "optional": true
+                },
+                "prettier-plugin-twig-melody": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/punycode": {
             "version": "2.3.1",
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
diff --git a/package.json b/package.json
index 79bafb4..e42223c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "glass_cursor",
-    "version": "0.0.1",
+    "version": "1.0",
     "private": true,
     "scripts": {
         "dev": "vite dev",
@@ -35,8 +35,9 @@
         "highlight.js": "^11.9.0",
         "markdown-it": "^14.0.0",
         "postcss": "^8.4.35",
-        "prettier": "^3.1.1",
+        "prettier": "^3.2.5",
         "prettier-plugin-svelte": "^3.1.2",
+        "prettier-plugin-tailwindcss": "^0.5.12",
         "svelte": "^4.2.7",
         "svelte-check": "^3.6.0",
         "tailwindcss": "^3.4.1",
diff --git a/src/lib/app.css b/src/lib/app.css
index e310c81..4be713b 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -4,23 +4,23 @@
 
 @layer components {
     .link {
-        @apply text-blue-600 dark:text-blue-500 hover:underline;
+        @apply text-blue-600 hover:underline dark:text-blue-500;
     }
 
     .btn {
-        @apply bg-neutral-700 hover:bg-neutral-600 text-white rounded-full py-2 px-6 mx-2 font-medium shadow;
+        @apply mx-2 rounded-full bg-neutral-700 px-6 py-2 font-medium text-white shadow hover:bg-neutral-600;
     }
 
     .btn-blue {
-        @apply bg-blue-700 hover:bg-blue-600 border-0;
+        @apply border-0 bg-blue-700 hover:bg-blue-600;
     }
 
     .btn-red {
-        @apply bg-red-700 hover:bg-red-600 border-0;
+        @apply border-0 bg-red-700 hover:bg-red-600;
     }
 
     .input {
-        @apply bg-neutral-200 dark:bg-neutral-800 border-2 border-neutral-300 dark:border-neutral-700 flex-grow rounded-full py-3 px-6 focus:shadow-lg text-inherit inline;
+        @apply inline flex-grow rounded-full border-2 border-neutral-300 bg-neutral-200 px-6 py-3 text-inherit focus:shadow-lg dark:border-neutral-700 dark:bg-neutral-800;
     }
 }
 
diff --git a/src/lib/components/ConfirmDeletion.svelte b/src/lib/components/ConfirmDeletion.svelte
index 83b5544..5fe8765 100644
--- a/src/lib/components/ConfirmDeletion.svelte
+++ b/src/lib/components/ConfirmDeletion.svelte
@@ -12,13 +12,13 @@
 </script>
 
 <Popup bind:this={confirmDeletion}>
-    <h1 class="text-2xl font-bold mb-6">Delete the Note?</h1>
+    <h1 class="mb-6 text-2xl font-bold">Delete the Note?</h1>
     <p>
         You are about the delete the note named "<strong
             >{confirmDeleteTargetName}</strong
         >". Are you sure? This action cannot be reverted.
     </p>
-    <div class="flex mt-6 justify-center">
+    <div class="mt-6 flex justify-center">
         <button
             data-testid="delete-confirm"
             class="btn btn-red"
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index ddc6ae8..d7fa671 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -99,32 +99,32 @@
     }
 </script>
 
-<div class="flex flex-grow basis-0 p-10 overflow-hidden flex-col lg:flex-row">
+<div class="flex flex-grow basis-0 flex-col overflow-hidden p-10 lg:flex-row">
     <div
-        class={`border-2 border-neutral-300 dark:border-neutral-500 rounded-3xl overflow-hidden lg:w-1/2 h-1/2 lg:h-full flex flex-col flex-grow shadow-lg transition-all duration-300 mb-4 lg:mb-0 ${
+        class={`mb-4 flex h-1/2 flex-grow flex-col overflow-hidden rounded-3xl border-2 border-neutral-300 shadow-lg transition-all duration-300 lg:mb-0 lg:h-full lg:w-1/2 dark:border-neutral-500 ${
             $previewExtended && !$sourceExtended
                 ? 'lg:-ml-[110%] lg:mr-24'
                 : 'lg:mr-2'
         }`}
     >
         <div
-            class="w-full p-4 text-center backdrop-blur bg-neutral-200 dark:bg-neutral-800 bg-opacity-70 dark:bg-opacity-70 flex"
+            class="flex w-full bg-neutral-200 bg-opacity-70 p-4 text-center backdrop-blur dark:bg-neutral-800 dark:bg-opacity-70"
         >
             <a
                 href="https://commonmark.org/help/"
                 title="Help"
-                class="hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl px-2 flex items-center"
+                class="flex items-center rounded-xl px-2 hover:bg-gray-300 dark:hover:bg-gray-700"
             >
                 <FontAwesomeIcon icon={faQuestion} />
             </a>
             <strong class="mx-auto">
                 <FontAwesomeIcon icon={faMarkdown} class="align-middle" />
-                <span class="align-middle ml-1">Markdown Editor</span>
+                <span class="ml-1 align-middle">Markdown Editor</span>
             </strong>
             <button
                 title={sourceExtended ? 'Shrink' : 'Extend'}
                 data-testid="resize-editor"
-                class="hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl px-2 cursor-pointer invisible lg:visible"
+                class="invisible cursor-pointer rounded-xl px-2 hover:bg-gray-300 lg:visible dark:hover:bg-gray-700"
                 on:click={() => {
                     sourceExtended.set(!$sourceExtended);
                 }}
@@ -136,10 +136,10 @@
                 {/if}
             </button>
         </div>
-        <div class="overflow-auto -mt-16 h-full w-full flex flex-grow">
+        <div class="-mt-16 flex h-full w-full flex-grow overflow-auto">
             <textarea
                 data-testid="editor"
-                class="outline-none bg-transparent resize-none p-6 font-mono w-full pt-[5.5em] pb-8"
+                class="w-full resize-none bg-transparent p-6 pb-8 pt-[5.5em] font-mono outline-none"
                 placeholder={$currentNote === -1
                     ? 'Choose a note from the left-hand side panel to edit.'
                     : 'Dump your mind here.'}
@@ -154,19 +154,19 @@
         </div>
     </div>
     <div
-        class={`border-2 border-neutral-300 dark:border-neutral-500 rounded-3xl overflow-hidden lg:w-1/2 h-1/2 lg:h-full flex flex-col flex-grow shadow-lg transition-all duration-300 mt-4 lg:mt-0 ${
+        class={`mt-4 flex h-1/2 flex-grow flex-col overflow-hidden rounded-3xl border-2 border-neutral-300 shadow-lg transition-all duration-300 lg:mt-0 lg:h-full lg:w-1/2 dark:border-neutral-500 ${
             $sourceExtended && !$previewExtended
                 ? 'lg:-mr-[110%] lg:ml-24'
                 : 'lg:ml-2'
         }`}
     >
         <div
-            class="w-full p-4 text-center backdrop-blur bg-neutral-200 dark:bg-neutral-800 bg-opacity-70 dark:bg-opacity-70 flex"
+            class="flex w-full bg-neutral-200 bg-opacity-70 p-4 text-center backdrop-blur dark:bg-neutral-800 dark:bg-opacity-70"
         >
             <button
                 title={$previewExtended ? 'Shrink' : 'Extend'}
                 data-testid="resize-result-text"
-                class="hover:bg-gray-300 dark:hover:bg-gray-700 rounded-xl px-2 cursor-pointer invisible lg:visible"
+                class="invisible cursor-pointer rounded-xl px-2 hover:bg-gray-300 lg:visible dark:hover:bg-gray-700"
                 on:click={() => {
                     previewExtended.set(!$previewExtended);
                 }}
@@ -179,18 +179,18 @@
             </button>
             <strong class="mx-auto">
                 <FontAwesomeIcon icon={faAlignLeft} class="align-middle" />
-                <span class="align-middle ml-1">Formatted Text</span>
+                <span class="ml-1 align-middle">Formatted Text</span>
             </strong>
             <div class="w-[30px]"></div>
         </div>
         <div
-            class="overflow-auto -mt-16 pt-[5.5em] px-6"
+            class="-mt-16 overflow-auto px-6 pt-[5.5em]"
             bind:this={preview}
             on:scroll={syncScroll}
         >
             <article
                 data-testid="result-text"
-                class="prose dark:prose-invert dark:prose-pre:bg-gray-900 break-word pb-8 mx-auto"
+                class="break-word prose mx-auto pb-8 dark:prose-invert dark:prose-pre:bg-gray-900"
             >
                 <!-- eslint-disable-next-line svelte/no-at-html-tags -->
                 {@html previewContent}
diff --git a/src/lib/components/Panel.svelte b/src/lib/components/Panel.svelte
index b0fbe92..38df00c 100644
--- a/src/lib/components/Panel.svelte
+++ b/src/lib/components/Panel.svelte
@@ -31,22 +31,22 @@
     }
 </script>
 
-<div class="flex z-10" data-testid="panel">
+<div class="z-10 flex" data-testid="panel">
     {#if browser}
         <aside
             data-testid="panel-aside"
-            class={`bg-neutral-100 dark:bg-neutral-900 w-[95dvw] sm:w-80 px-2 flex flex-col transition-all duration-300${
+            class={`flex w-[95dvw] flex-col bg-neutral-100 px-2 transition-all sm:w-80 dark:bg-neutral-900 duration-300${
                 !$sidebarActive ? ' -ml-[95dvw] md:-ml-80' : ''
             }`}
         >
             <div
-                class="py-4 mx-4 border-gray-400 dark:border-gray-500 border-b-2 flex mt-2"
+                class="mx-4 mt-2 flex border-b-2 border-gray-400 py-4 dark:border-gray-500"
             >
                 <div class="basis-full">
-                    <h1 class="font-bold text-2xl">Your Notes</h1>
+                    <h1 class="text-2xl font-bold">Your Notes</h1>
                 </div>
                 <button
-                    class="flex items-center hover:bg-gray-300 dark:hover:bg-gray-800 rounded-xl cursor-pointer"
+                    class="flex cursor-pointer items-center rounded-xl hover:bg-gray-300 dark:hover:bg-gray-800"
                     title="New Note"
                     data-testid="new-note"
                     on:click={() => {
@@ -67,17 +67,17 @@
                 </button>
             </div>
             <div
-                class="px-5 pb-4 overflow-auto overflow-x-hidden h-full"
+                class="h-full overflow-auto overflow-x-hidden px-5 pb-4"
                 bind:this={notesDiv}
             >
                 {#if $notes && $notes.length !== 0}
                     {#each $notes as note (note.id)}
                         <div
-                            class={`rounded-xl my-4 p-1 pl-4 border-2 flex items-center
+                            class={`my-4 flex items-center rounded-xl border-2 p-1 pl-4
 							${
                                 $currentNote === note.id
-                                    ? ' bg-blue-200 border-blue-400 dark:bg-blue-950 dark:border-blue-700 dark:brightness-110'
-                                    : ' bg-gray-200 border-gray-300 dark:bg-neutral-800 dark:border-neutral-700 hover:bg-blue-100 hover:border-blue-400 dark:hover:bg-blue-950 dark:hover:border-blue-800 '
+                                    ? ' border-blue-400 bg-blue-200 dark:border-blue-700 dark:bg-blue-950 dark:brightness-110'
+                                    : ' border-gray-300 bg-gray-200 hover:border-blue-400 hover:bg-blue-100 dark:border-neutral-700 dark:bg-neutral-800 dark:hover:border-blue-800 dark:hover:bg-blue-950 '
                             }`}
                             data-testid="note"
                             id={($currentNote === note.id && 'current-note') ||
@@ -104,7 +104,7 @@
                             </div>
                             <div class="ml-auto flex">
                                 <button
-                                    class="p-2 flex items-center hover:text-yellow-700 min-w-[32px]"
+                                    class="flex min-w-[32px] items-center p-2 hover:text-yellow-700"
                                     data-testid="rename"
                                     title="Rename"
                                     on:click|stopPropagation={async () => {
@@ -118,7 +118,7 @@
                                     <FontAwesomeIcon icon={faPencil} />
                                 </button>
                                 <button
-                                    class="p-2 flex items-center hover:text-red-500 min-w-[32px]"
+                                    class="flex min-w-[32px] items-center p-2 hover:text-red-500"
                                     data-testid="delete"
                                     title="Delete"
                                     on:click|stopPropagation={() => {
@@ -140,11 +140,11 @@
                 {/if}
             </div>
             <div
-                class="py-4 mx-4 border-gray-400 dark:border-gray-500 border-t-2 mb-2 flex"
+                class="mx-4 mb-2 flex border-t-2 border-gray-400 py-4 dark:border-gray-500"
             >
                 <button
                     data-testid="settings-button"
-                    class="flex items-center px-2 hover:bg-gray-300 dark:hover:bg-gray-800 rounded-xl cursor-pointer"
+                    class="flex cursor-pointer items-center rounded-xl px-2 hover:bg-gray-300 dark:hover:bg-gray-800"
                     title="Settings"
                     on:click={() => {
                         settings.show();
@@ -153,7 +153,7 @@
                     <FontAwesomeIcon icon={faGear} />
                 </button>
                 <div
-                    class="flex mx-2 border-2 border-indigo-600 rounded-full shadow p-1 bg-indigo-50 ml-auto dark:bg-indigo-950"
+                    class="mx-2 ml-auto flex rounded-full border-2 border-indigo-600 bg-indigo-50 p-1 shadow dark:bg-indigo-950"
                 >
                     <Logo />
                     <span class="mx-1 align-middle font-medium"
@@ -166,7 +166,7 @@
     <div class="flex items-center">
         <button
             data-testid="toggle-panel"
-            class="-mr-1 p-2 group cursor-pointer"
+            class="group -mr-1 cursor-pointer p-2"
             title={$sidebarActive ? 'Hide' : 'Show'}
             on:click={() => {
                 sidebarActive.set(!$sidebarActive);
@@ -178,14 +178,14 @@
             }}
         >
             <div
-                class={`w-1 h-6 rounded-2xl bg-gray-400 dark:bg-gray-500 -mb-1 group-hover:bg-gray-500 dark:group-hover:bg-gray-400 transition-all ${
+                class={`-mb-1 h-6 w-1 rounded-2xl bg-gray-400 transition-all group-hover:bg-gray-500 dark:bg-gray-500 dark:group-hover:bg-gray-400 ${
                     $sidebarActive
                         ? 'group-hover:rotate-12'
                         : 'group-hover:-rotate-12'
                 }`}
             ></div>
             <div
-                class={`w-1 h-6 rounded-2xl bg-gray-400 dark:bg-gray-500 -mb-1 group-hover:bg-gray-500 dark:group-hover:bg-gray-400 transition-all ${
+                class={`-mb-1 h-6 w-1 rounded-2xl bg-gray-400 transition-all group-hover:bg-gray-500 dark:bg-gray-500 dark:group-hover:bg-gray-400 ${
                     $sidebarActive
                         ? 'group-hover:-rotate-12'
                         : 'group-hover:rotate-12'
diff --git a/src/lib/components/Popup.svelte b/src/lib/components/Popup.svelte
index 62f4722..8088d8f 100644
--- a/src/lib/components/Popup.svelte
+++ b/src/lib/components/Popup.svelte
@@ -26,12 +26,12 @@
 </script>
 
 <div
-    class="absolute w-full h-full flex justify-center items-center z-20 backdrop-blur"
+    class="absolute z-20 flex h-full w-full items-center justify-center backdrop-blur"
     class:hidden={!status}
     use:trapFocus
 >
     <div
-        class="max-w-[90dvw] w-[30em] m-8 bg-neutral-100 dark:bg-neutral-900 border-2 dark:border-neutral-700 border-gray-300 shadow-lg rounded-2xl py-8 px-4 sm:px-8 text-center"
+        class="m-8 w-[30em] max-w-[90dvw] rounded-2xl border-2 border-gray-300 bg-neutral-100 px-4 py-8 text-center shadow-lg sm:px-8 dark:border-neutral-700 dark:bg-neutral-900"
         bind:this={popup}
     >
         <slot />
diff --git a/src/lib/components/RenameNote.svelte b/src/lib/components/RenameNote.svelte
index 179bd59..e66ae7d 100644
--- a/src/lib/components/RenameNote.svelte
+++ b/src/lib/components/RenameNote.svelte
@@ -18,7 +18,7 @@
 </script>
 
 <Popup bind:this={renameNote}>
-    <h1 class="text-2xl font-bold mb-6">Rename the Note</h1>
+    <h1 class="mb-6 text-2xl font-bold">Rename the Note</h1>
     <label class="flex items-center">
         <b>Note Name</b>
         <input
@@ -34,7 +34,7 @@
             }}
         />
     </label>
-    <div class="flex mt-6 justify-center">
+    <div class="mt-6 flex justify-center">
         <button
             class="btn"
             on:click={() => {
diff --git a/src/lib/components/Settings.svelte b/src/lib/components/Settings.svelte
index 9b6c91a..09d73ca 100644
--- a/src/lib/components/Settings.svelte
+++ b/src/lib/components/Settings.svelte
@@ -28,15 +28,15 @@
 </script>
 
 <Popup bind:this={settings}>
-    <h1 class="text-2xl font-bold mb-6">Settings</h1>
+    <h1 class="mb-6 text-2xl font-bold">Settings</h1>
     <div
-        class="my-2 bg-neutral-200 dark:bg-neutral-800 border-neutral-400 dark:border-neutral-700 border-2 p-2 px-6 rounded-3xl shadow"
+        class="my-2 rounded-3xl border-2 border-neutral-400 bg-neutral-200 p-2 px-6 shadow dark:border-neutral-700 dark:bg-neutral-800"
     >
-        <label class="flex items-center min-h-10">
-            <span class="font-medium text-lg mr-4">Theme</span>
+        <label class="flex min-h-10 items-center">
+            <span class="mr-4 text-lg font-medium">Theme</span>
             <select
                 data-testid="theme-select"
-                class="ml-auto border-2 border-neutral-500 rounded-2xl p-2 min-w-40x"
+                class="min-w-40x ml-auto rounded-2xl border-2 border-neutral-500 p-2"
                 name="theme"
                 on:change={handleChange}
             >
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
index 4baa271..ba22263 100644
--- a/src/routes/+error.svelte
+++ b/src/routes/+error.svelte
@@ -2,14 +2,14 @@
     import { page } from '$app/stores';
 </script>
 
-<div class="sm:my-auto max-w-xl mx-auto flex">
+<div class="mx-auto flex max-w-xl sm:my-auto">
     <div
-        class="sm:action-box flex flex-col flex-grow items-center m-10 text-center border-2 p-8 pt-12 rounded-3xl"
+        class="sm:action-box m-10 flex flex-grow flex-col items-center rounded-3xl border-2 p-8 pt-12 text-center"
     >
         <h1 class="text-3xl font-bold">
             {$page.status}: {$page.error?.message}
         </h1>
-        <div class="text-lg my-4">
+        <div class="my-4 text-lg">
             {#if $page.status === 404}
                 <p>Sorry. We couldn't find what you are looking for.</p>
             {:else}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f423493..770150f 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -27,6 +27,6 @@
     </script>
 </svelte:head>
 
-<div class="min-h-screen flex flex-col">
+<div class="flex min-h-screen flex-col">
     <slot />
 </div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 0ea4892..ab0abbf 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -34,21 +34,21 @@
     const maxDuration = sentenceIntervalTime / 4;
 </script>
 
-<div class="flex flex-col items-center justify-center m-auto p-10 mx-8">
+<div class="m-auto mx-8 flex flex-col items-center justify-center p-10">
     <div
-        class="p-2 sm:p-4 border-4 border-indigo-600 rounded-full shadow-lg bg-indigo-50 dark:bg-indigo-950 text-nowrap"
+        class="text-nowrap rounded-full border-4 border-indigo-600 bg-indigo-50 p-2 shadow-lg sm:p-4 dark:bg-indigo-950"
     >
         <Logo classList="inline w-10 md:w-12" />
         <span
-            class="align-middle m-2 text-lg sm:text-xl lg:text-2xl font-semibold"
+            class="m-2 align-middle text-lg font-semibold sm:text-xl lg:text-2xl"
             >Glass Cursor</span
         >
     </div>
     <div
-        class="flex items-center my-2 sm:my-8 min-h-40 sm:min-h-32 md:min-h-24"
+        class="my-2 flex min-h-40 items-center sm:my-8 sm:min-h-32 md:min-h-24"
     >
         <h1
-            class="text-3xl sm:text-4xl lg:text-5xl font-bold text-center leading-tight"
+            class="text-center text-3xl font-bold leading-tight sm:text-4xl lg:text-5xl"
         >
             {#key sentenceCursor}
                 <span
@@ -62,10 +62,10 @@
                     <svelte:component this={sentences[sentenceCursor]} />
                 </span>
             {/key}
-            <span class="font-light hidden" bind:this={cursor}>|</span>
+            <span class="hidden font-light" bind:this={cursor}>|</span>
         </h1>
     </div>
-    <p class="lg:text-xl max-w-5xl text-center text-pretty">
+    <p class="max-w-5xl text-pretty text-center lg:text-xl">
         Glass Cursor is a free and open source simple web-based markdown
         note-taking app. It can be used for writing text for any purpose with
         markdown. It's designed to be simple but yet useful. With its elegant
@@ -76,7 +76,7 @@
     <a href="./app" class="btn btn-blue mt-6">Open app</a>
 </div>
 <div
-    class="h-screen w-screen overflow-hidden absolute inset-0 m-auto -z-10 hidden dark:md:flex"
+    class="absolute inset-0 -z-10 m-auto hidden h-screen w-screen overflow-hidden dark:md:flex"
 >
     <BlurryCloud classList="m-auto" />
 </div>
diff --git a/src/routes/app/+page.svelte b/src/routes/app/+page.svelte
index 825b1cc..532e315 100644
--- a/src/routes/app/+page.svelte
+++ b/src/routes/app/+page.svelte
@@ -8,7 +8,7 @@
     <base target="_blank" />
 </svelte:head>
 
-<div class="flex w-screen h-screen">
+<div class="flex h-screen w-screen">
     <Panel />
     {#await tick()}
         <!-- Waiting  -->
diff --git a/src/routes/faq/+page.svelte b/src/routes/faq/+page.svelte
index a09d963..c155591 100644
--- a/src/routes/faq/+page.svelte
+++ b/src/routes/faq/+page.svelte
@@ -1,6 +1,6 @@
-<div class="flex justify-center text-center my-10">
+<div class="my-10 flex justify-center text-center">
     <article
-        class="prose dark:prose-invert dark:prose-pre:bg-gray-900 text-pretty"
+        class="prose text-pretty dark:prose-invert dark:prose-pre:bg-gray-900"
     >
         <h1>FAQ</h1>
         <hr />