diff --git a/.prettierrc.yaml b/.prettierrc.yaml
index 35893b3..dabdd95 100644
--- a/.prettierrc.yaml
+++ b/.prettierrc.yaml
@@ -2,3 +2,4 @@ singleQuote: true
 semi: false
 printWidth: 100
 trailingComma: none
+plugins: [prettier-plugin-tailwindcss]
diff --git a/package-lock.json b/package-lock.json
index 4f77f74..0f21091 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -95,6 +95,7 @@
         "globals": "^15.13.0",
         "postcss": "^8.4.49",
         "prettier": "3.4.2",
+        "prettier-plugin-tailwindcss": "^0.7.2",
         "tailwindcss": "^3.4.17",
         "typescript": "~5.6.2",
         "typescript-eslint": "^8.18.1",
@@ -10392,6 +10393,85 @@
         "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
+    "node_modules/prettier-plugin-tailwindcss": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz",
+      "integrity": "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.19"
+      },
+      "peerDependencies": {
+        "@ianvs/prettier-plugin-sort-imports": "*",
+        "@prettier/plugin-hermes": "*",
+        "@prettier/plugin-oxc": "*",
+        "@prettier/plugin-pug": "*",
+        "@shopify/prettier-plugin-liquid": "*",
+        "@trivago/prettier-plugin-sort-imports": "*",
+        "@zackad/prettier-plugin-twig": "*",
+        "prettier": "^3.0",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-css-order": "*",
+        "prettier-plugin-jsdoc": "*",
+        "prettier-plugin-marko": "*",
+        "prettier-plugin-multiline-arrays": "*",
+        "prettier-plugin-organize-attributes": "*",
+        "prettier-plugin-organize-imports": "*",
+        "prettier-plugin-sort-imports": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "@ianvs/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@prettier/plugin-hermes": {
+          "optional": true
+        },
+        "@prettier/plugin-oxc": {
+          "optional": true
+        },
+        "@prettier/plugin-pug": {
+          "optional": true
+        },
+        "@shopify/prettier-plugin-liquid": {
+          "optional": true
+        },
+        "@trivago/prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "@zackad/prettier-plugin-twig": {
+          "optional": true
+        },
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-css-order": {
+          "optional": true
+        },
+        "prettier-plugin-jsdoc": {
+          "optional": true
+        },
+        "prettier-plugin-marko": {
+          "optional": true
+        },
+        "prettier-plugin-multiline-arrays": {
+          "optional": true
+        },
+        "prettier-plugin-organize-attributes": {
+          "optional": true
+        },
+        "prettier-plugin-organize-imports": {
+          "optional": true
+        },
+        "prettier-plugin-sort-imports": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/pretty-bytes": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
diff --git a/package.json b/package.json
index 09801a9..ff3ae74 100644
--- a/package.json
+++ b/package.json
@@ -105,10 +105,11 @@
     "globals": "^15.13.0",
     "postcss": "^8.4.49",
     "prettier": "3.4.2",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.1",
     "vite": "^6.0.3",
     "vite-plugin-pwa": "^0.21.1"
   }
-}
\ No newline at end of file
+}
diff --git a/src/PageManager.tsx b/src/PageManager.tsx
index 19c911d..e9b91cb 100644
--- a/src/PageManager.tsx
+++ b/src/PageManager.tsx
@@ -339,11 +339,11 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
         >
           <CurrentRelaysProvider>
             <NotificationProvider>
-              <div className="flex lg:justify-around w-full">
-                <div className="sticky top-0 lg:w-full flex justify-end self-start h-[var(--vh)]">
+              <div className="flex w-full lg:justify-around">
+                <div className="sticky top-0 flex h-[var(--vh)] justify-end self-start lg:w-full">
                   <Sidebar />
                 </div>
-                <div className="flex-1 w-0 bg-background border-x lg:flex-auto lg:w-[640px] lg:shrink-0">
+                <div className="w-0 flex-1 border-x bg-background lg:w-[640px] lg:flex-auto lg:shrink-0">
                   {!!secondaryStack.length &&
                     secondaryStack.map((item, index) => (
                       <div
@@ -369,10 +369,10 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                     </div>
                   ))}
                 </div>
-                <div className="hidden lg:w-full lg:block" />
+                <div className="hidden lg:block lg:w-full" />
               </div>
               <TooManyRelaysAlertDialog />
-              <BackgroundAudio className="fixed bottom-20 right-0 z-50 w-80 rounded-l-full rounded-r-none overflow-hidden shadow-lg border" />
+              <BackgroundAudio className="fixed bottom-20 right-0 z-50 w-80 overflow-hidden rounded-l-full rounded-r-none border shadow-lg" />
             </NotificationProvider>
           </CurrentRelaysProvider>
         </SecondaryPageContext.Provider>
@@ -407,20 +407,20 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                 <Sidebar />
                 <div
                   className={cn(
-                    'grid grid-cols-2 w-full',
-                    themeSetting === 'pure-black' ? '' : 'gap-2 pr-2 py-2'
+                    'grid w-full grid-cols-2',
+                    themeSetting === 'pure-black' ? '' : 'gap-2 py-2 pr-2'
                   )}
                 >
                   <div
                     className={cn(
-                      'bg-background overflow-hidden',
+                      'overflow-hidden bg-background',
                       themeSetting === 'pure-black' ? 'border-l' : 'rounded-2xl shadow-lg'
                     )}
                   >
                     {primaryPages.map(({ name, element, props }) => (
                       <div
                         key={name}
-                        className="flex flex-col h-full w-full"
+                        className="flex h-full w-full flex-col"
                         style={{
                           display: currentPrimaryPage === name ? 'block' : 'none'
                         }}
@@ -431,7 +431,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                   </div>
                   <div
                     className={cn(
-                      'bg-background overflow-hidden',
+                      'overflow-hidden bg-background',
                       themeSetting === 'pure-black' ? 'border-l' : 'rounded-2xl',
                       themeSetting !== 'pure-black' && secondaryStack.length > 0 && 'shadow-lg',
                       secondaryStack.length === 0 ? 'bg-surface' : ''
@@ -440,7 +440,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
                     {secondaryStack.map((item, index) => (
                       <div
                         key={item.index}
-                        className="flex flex-col h-full w-full"
+                        className="flex h-full w-full flex-col"
                         style={{ display: index === secondaryStack.length - 1 ? 'block' : 'none' }}
                       >
                         {item.element}
@@ -451,7 +451,7 @@ export function PageManager({ maxStackSize = 5 }: { maxStackSize?: number }) {
               </div>
             </div>
             <TooManyRelaysAlertDialog />
-            <BackgroundAudio className="fixed bottom-20 right-0 z-50 w-80 rounded-l-full rounded-r-none overflow-hidden shadow-lg border" />
+            <BackgroundAudio className="fixed bottom-20 right-0 z-50 w-80 overflow-hidden rounded-l-full rounded-r-none border shadow-lg" />
           </NotificationProvider>
         </CurrentRelaysProvider>
       </SecondaryPageContext.Provider>
diff --git a/src/components/AboutInfoDialog/index.tsx b/src/components/AboutInfoDialog/index.tsx
index 69e4e59..445160e 100644
--- a/src/components/AboutInfoDialog/index.tsx
+++ b/src/components/AboutInfoDialog/index.tsx
@@ -40,7 +40,7 @@ export default function AboutInfoDialog({ children }: { children: React.ReactNod
       <Drawer open={open} onOpenChange={setOpen}>
         <DrawerTrigger asChild>{children}</DrawerTrigger>
         <DrawerContent>
-          <div className="p-4 space-y-4">{content}</div>
+          <div className="space-y-4 p-4">{content}</div>
         </DrawerContent>
       </Drawer>
     )
diff --git a/src/components/AccountList/index.tsx b/src/components/AccountList/index.tsx
index 7145789..2e7481b 100644
--- a/src/components/AccountList/index.tsx
+++ b/src/components/AccountList/index.tsx
@@ -37,18 +37,18 @@ export default function AccountList({
               .finally(() => setSwitchingAccount(null))
           }}
         >
-          <div className="flex justify-between items-center p-2">
-            <div className="flex-1 flex items-center gap-2 relative">
+          <div className="flex items-center justify-between p-2">
+            <div className="relative flex flex-1 items-center gap-2">
               <SimpleUserAvatar userId={act.pubkey} />
-              <div className="flex-1 w-0">
-                <SimpleUsername userId={act.pubkey} className="font-semibold truncate" />
-                <div className="text-sm rounded-full bg-muted px-2 w-fit">
+              <div className="w-0 flex-1">
+                <SimpleUsername userId={act.pubkey} className="truncate font-semibold" />
+                <div className="w-fit rounded-full bg-muted px-2 text-sm">
                   {formatPubkey(act.pubkey)}
                 </div>
               </div>
             </div>
             <div className="flex items-center gap-2">
-              <div className="flex gap-2 items-center">
+              <div className="flex items-center gap-2">
                 <SignerTypeBadge signerType={act.signerType} />
               </div>
               <Button
@@ -65,7 +65,7 @@ export default function AccountList({
             </div>
           </div>
           {switchingAccount && isSameAccount(act, switchingAccount) && (
-            <div className="absolute top-0 left-0 flex w-full h-full items-center justify-center rounded-lg bg-muted/60">
+            <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center rounded-lg bg-muted/60">
               <Loader size={16} className="animate-spin" />
             </div>
           )}
diff --git a/src/components/AccountManager/BunkerLogin.tsx b/src/components/AccountManager/BunkerLogin.tsx
index 0cb3c92..7bf7cc5 100644
--- a/src/components/AccountManager/BunkerLogin.tsx
+++ b/src/components/AccountManager/BunkerLogin.tsx
@@ -42,7 +42,7 @@ export default function BunkerLogin({
           onChange={handleInputChange}
           className={errMsg ? 'border-destructive' : ''}
         />
-        {errMsg && <div className="text-xs text-destructive pl-3">{errMsg}</div>}
+        {errMsg && <div className="pl-3 text-xs text-destructive">{errMsg}</div>}
       </div>
       <Button onClick={handleLogin} disabled={pending}>
         <Loader className={pending ? 'animate-spin' : 'hidden'} />
diff --git a/src/components/AccountManager/NostrConnectionLogin.tsx b/src/components/AccountManager/NostrConnectionLogin.tsx
index 37fde9d..a6b01a1 100644
--- a/src/components/AccountManager/NostrConnectionLogin.tsx
+++ b/src/components/AccountManager/NostrConnectionLogin.tsx
@@ -186,17 +186,17 @@ export default function NostrConnectLogin({
 
   return (
     <div className="relative flex flex-col gap-4">
-      <div ref={qrContainerRef} className="flex flex-col items-center w-full space-y-3 mb-3">
+      <div ref={qrContainerRef} className="mb-3 flex w-full flex-col items-center space-y-3">
         <a href={loginDetails.connectionString} aria-label="Open with Nostr signer app">
           <QrCode size={qrCodeSize} value={loginDetails.connectionString} />
         </a>
         {nostrConnectionErrMsg && (
-          <div className="text-xs text-destructive text-center pt-1">{nostrConnectionErrMsg}</div>
+          <div className="pt-1 text-center text-xs text-destructive">{nostrConnectionErrMsg}</div>
         )}
       </div>
-      <div className="flex justify-center w-full mb-3">
+      <div className="mb-3 flex w-full justify-center">
         <div
-          className="flex items-center gap-2 text-sm text-muted-foreground bg-muted px-3 py-2 rounded-full cursor-pointer transition-all hover:bg-muted/80"
+          className="flex cursor-pointer items-center gap-2 rounded-full bg-muted px-3 py-2 text-sm text-muted-foreground transition-all hover:bg-muted/80"
           style={{
             width: qrCodeSize > 0 ? `${Math.max(150, Math.min(qrCodeSize, 320))}px` : 'auto'
           }}
@@ -204,14 +204,14 @@ export default function NostrConnectLogin({
           role="button"
           tabIndex={0}
         >
-          <div className="flex-grow min-w-0 truncate select-none">
+          <div className="min-w-0 flex-grow select-none truncate">
             {loginDetails.connectionString}
           </div>
           <div className="flex-shrink-0">{copied ? <Check size={14} /> : <Copy size={14} />}</div>
         </div>
       </div>
 
-      <div className="flex items-center w-full my-4">
+      <div className="my-4 flex w-full items-center">
         <div className="flex-grow border-t border-border/40"></div>
         <span className="px-3 text-xs text-muted-foreground">OR</span>
         <div className="flex-grow border-t border-border/40"></div>
@@ -219,7 +219,7 @@ export default function NostrConnectLogin({
 
       <div className="w-full space-y-1">
         <div className="flex items-start space-x-2">
-          <div className="flex-1 relative">
+          <div className="relative flex-1">
             <Input
               placeholder="bunker://..."
               value={bunkerInput}
@@ -229,7 +229,7 @@ export default function NostrConnectLogin({
             <Button
               size="sm"
               variant="ghost"
-              className="absolute right-1 top-1/2 -translate-y-1/2 h-8 w-8 p-0"
+              className="absolute right-1 top-1/2 h-8 w-8 -translate-y-1/2 p-0"
               onClick={startQrScan}
               disabled={pending}
             >
@@ -237,21 +237,21 @@ export default function NostrConnectLogin({
             </Button>
           </div>
           <Button onClick={() => handleLogin()} disabled={pending}>
-            <Loader className={pending ? 'animate-spin mr-2' : 'hidden'} />
+            <Loader className={pending ? 'mr-2 animate-spin' : 'hidden'} />
             {t('Login')}
           </Button>
         </div>
 
-        {errMsg && <div className="text-xs text-destructive pl-3 pt-1">{errMsg}</div>}
+        {errMsg && <div className="pl-3 pt-1 text-xs text-destructive">{errMsg}</div>}
       </div>
       <Button variant="secondary" onClick={back} className="w-full">
         {t('Back')}
       </Button>
 
-      <div className={cn('w-full h-full flex justify-center', isScanning ? '' : 'hidden')}>
+      <div className={cn('flex h-full w-full justify-center', isScanning ? '' : 'hidden')}>
         <video
           ref={videoRef}
-          className="absolute inset-0 w-full h-full bg-background"
+          className="absolute inset-0 h-full w-full bg-background"
           autoPlay
           playsInline
           muted
@@ -259,7 +259,7 @@ export default function NostrConnectLogin({
         <Button
           variant="secondary"
           size="sm"
-          className="absolute top-2 right-2"
+          className="absolute right-2 top-2"
           onClick={stopQrScan}
         >
           Cancel
diff --git a/src/components/AccountManager/NpubLogin.tsx b/src/components/AccountManager/NpubLogin.tsx
index eeb9c5c..5ff329e 100644
--- a/src/components/AccountManager/NpubLogin.tsx
+++ b/src/components/AccountManager/NpubLogin.tsx
@@ -42,7 +42,7 @@ export default function NpubLogin({
           onChange={handleInputChange}
           className={errMsg ? 'border-destructive' : ''}
         />
-        {errMsg && <div className="text-xs text-destructive pl-3">{errMsg}</div>}
+        {errMsg && <div className="pl-3 text-xs text-destructive">{errMsg}</div>}
       </div>
       <Button onClick={handleLogin} disabled={pending}>
         <Loader className={pending ? 'animate-spin' : 'hidden'} />
diff --git a/src/components/AccountManager/Signup.tsx b/src/components/AccountManager/Signup.tsx
index f55a981..83afb7c 100644
--- a/src/components/AccountManager/Signup.tsx
+++ b/src/components/AccountManager/Signup.tsx
@@ -53,7 +53,7 @@ export default function Signup({
       {(['generate', 'password'] as Step[]).map((s, index) => (
         <div key={s} className="flex items-center">
           <div
-            className={`w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold ${
+            className={`flex h-8 w-8 items-center justify-center rounded-full text-sm font-semibold ${
               step === s
                 ? 'bg-primary text-primary-foreground'
                 : step === 'password' && s === 'generate'
@@ -63,7 +63,7 @@ export default function Signup({
           >
             {index + 1}
           </div>
-          {index < 1 && <div className="w-12 h-0.5 bg-muted mx-1" />}
+          {index < 1 && <div className="mx-1 h-0.5 w-12 bg-muted" />}
         </div>
       ))}
     </div>
@@ -75,7 +75,7 @@ export default function Signup({
         {renderStepIndicator()}
 
         <div className="text-center">
-          <h3 className="text-lg font-semibold mb-2">{t('Create Your Nostr Account')}</h3>
+          <h3 className="mb-2 text-lg font-semibold">{t('Create Your Nostr Account')}</h3>
           <p className="text-sm text-muted-foreground">
             {t('Generate your unique private key. This is your digital identity.')}
           </p>
@@ -110,7 +110,7 @@ export default function Signup({
           </div>
         </div>
 
-        <div className="w-full flex flex-wrap gap-2">
+        <div className="flex w-full flex-wrap gap-2">
           <Button onClick={handleDownload} className="flex-1">
             <Download />
             {t('Download Backup File')}
@@ -129,7 +129,7 @@ export default function Signup({
           </Button>
         </div>
 
-        <div className="flex items-center gap-2 ml-2">
+        <div className="ml-2 flex items-center gap-2">
           <Checkbox
             id="acknowledge-checkbox"
             checked={checkedSaveKey}
@@ -159,7 +159,7 @@ export default function Signup({
       {renderStepIndicator()}
 
       <div className="text-center">
-        <h3 className="text-lg font-semibold mb-2">{t('Secure Your Account')}</h3>
+        <h3 className="mb-2 text-lg font-semibold">{t('Secure Your Account')}</h3>
         <p className="text-sm text-muted-foreground">
           {t('Add an extra layer of protection with a password')}
         </p>
@@ -201,7 +201,7 @@ export default function Signup({
         )}
       </div>
 
-      <div className="w-full flex gap-2">
+      <div className="flex w-full gap-2">
         <Button
           variant="secondary"
           onClick={() => {
diff --git a/src/components/AccountManager/index.tsx b/src/components/AccountManager/index.tsx
index 9ac595e..aa921ef 100644
--- a/src/components/AccountManager/index.tsx
+++ b/src/components/AccountManager/index.tsx
@@ -45,10 +45,10 @@ function AccountManagerNav({
   return (
     <div onClick={(e) => e.stopPropagation()} className="flex flex-col gap-8">
       <div>
-        <div className="text-center text-muted-foreground text-sm font-semibold">
+        <div className="text-center text-sm font-semibold text-muted-foreground">
           {t('Add an Account')}
         </div>
-        <div className="space-y-2 mt-4">
+        <div className="mt-4 space-y-2">
           {!!window.nostr && (
             <Button onClick={() => nip07Login().then(() => close?.())} className="w-full">
               {t('Login with Browser Extension')}
@@ -69,10 +69,10 @@ function AccountManagerNav({
       </div>
       <Separator />
       <div>
-        <div className="text-center text-muted-foreground text-sm font-semibold">
+        <div className="text-center text-sm font-semibold text-muted-foreground">
           {t("Don't have an account yet?")}
         </div>
-        <Button onClick={() => setPage('signup')} className="w-full mt-4">
+        <Button onClick={() => setPage('signup')} className="mt-4 w-full">
           {t('Create New Account')}
         </Button>
       </div>
@@ -80,7 +80,7 @@ function AccountManagerNav({
         <>
           <Separator />
           <div>
-            <div className="text-center text-muted-foreground text-sm font-semibold">
+            <div className="text-center text-sm font-semibold text-muted-foreground">
               {t('Logged in Accounts')}
             </div>
             <AccountList className="mt-4" afterSwitch={() => close?.()} />
diff --git a/src/components/AudioPlayer/index.tsx b/src/components/AudioPlayer/index.tsx
index bce7082..5233489 100644
--- a/src/components/AudioPlayer/index.tsx
+++ b/src/components/AudioPlayer/index.tsx
@@ -129,7 +129,7 @@ export default function AudioPlayer({
     <div
       ref={containerRef}
       className={cn(
-        'flex items-center gap-3 py-2 px-2 border rounded-full max-w-md bg-background',
+        'flex max-w-md items-center gap-3 rounded-full border bg-background px-2 py-2',
         className
       )}
       onClick={(e) => e.stopPropagation()}
@@ -137,12 +137,12 @@ export default function AudioPlayer({
       <audio ref={audioRef} src={src} preload="metadata" onError={() => setError(false)} />
 
       {/* Play/Pause Button */}
-      <Button size="icon" className="rounded-full shrink-0" onClick={togglePlay}>
+      <Button size="icon" className="shrink-0 rounded-full" onClick={togglePlay}>
         {isPlaying ? <Pause fill="currentColor" /> : <Play fill="currentColor" />}
       </Button>
 
       {/* Progress Section */}
-      <div className="flex-1 relative">
+      <div className="relative flex-1">
         <Slider
           value={[currentTime]}
           max={duration || 100}
@@ -153,14 +153,14 @@ export default function AudioPlayer({
         />
       </div>
 
-      <div className="text-sm font-mono text-muted-foreground">
+      <div className="font-mono text-sm text-muted-foreground">
         {formatTime(Math.max(duration - currentTime, 0))}
       </div>
       {isMinimized ? (
         <Button
           variant="ghost"
           size="icon"
-          className="rounded-full shrink-0 text-muted-foreground"
+          className="shrink-0 rounded-full text-muted-foreground"
           onClick={() => mediaManager.stopAudioBackground()}
         >
           <X />
@@ -169,7 +169,7 @@ export default function AudioPlayer({
         <Button
           variant="ghost"
           size="icon"
-          className="rounded-full shrink-0 text-muted-foreground"
+          className="shrink-0 rounded-full text-muted-foreground"
           onClick={() => mediaManager.playAudioBackground(src, audioRef.current?.currentTime || 0)}
         >
           <Minimize2 />
diff --git a/src/components/BookmarkButton/index.tsx b/src/components/BookmarkButton/index.tsx
index bec0015..5426089 100644
--- a/src/components/BookmarkButton/index.tsx
+++ b/src/components/BookmarkButton/index.tsx
@@ -52,7 +52,7 @@ export default function BookmarkButton({ stuff }: { stuff: Event | string }) {
     <button
       className={`flex items-center gap-1 ${
         isBookmarked ? 'text-rose-400' : 'text-muted-foreground'
-      } enabled:hover:text-rose-400 px-3 h-full disabled:text-muted-foreground/40 disabled:cursor-default`}
+      } h-full px-3 enabled:hover:text-rose-400 disabled:cursor-default disabled:text-muted-foreground/40`}
       onClick={isBookmarked ? handleRemoveBookmark : handleBookmark}
       disabled={!event || updating}
       title={isBookmarked ? t('Remove bookmark') : t('Bookmark')}
diff --git a/src/components/BookmarkList/index.tsx b/src/components/BookmarkList/index.tsx
index b6080e3..44d0450 100644
--- a/src/components/BookmarkList/index.tsx
+++ b/src/components/BookmarkList/index.tsx
@@ -62,7 +62,7 @@ export default function BookmarkList() {
 
   if (eventIds.length === 0) {
     return (
-      <div className="mt-2 text-sm text-center text-muted-foreground">
+      <div className="mt-2 text-center text-sm text-muted-foreground">
         {t('no bookmarks found')}
       </div>
     )
@@ -79,7 +79,7 @@ export default function BookmarkList() {
           <NoteCardLoadingSkeleton />
         </div>
       ) : (
-        <div className="text-center text-sm text-muted-foreground mt-2">
+        <div className="mt-2 text-center text-sm text-muted-foreground">
           {t('no more bookmarks')}
         </div>
       )}
diff --git a/src/components/BottomNavigationBar/AccountButton.tsx b/src/components/BottomNavigationBar/AccountButton.tsx
index 7b3e8b4..dfa6a81 100644
--- a/src/components/BottomNavigationBar/AccountButton.tsx
+++ b/src/components/BottomNavigationBar/AccountButton.tsx
@@ -42,10 +42,10 @@ export default function AccountButton() {
           profile ? (
             <SimpleUserAvatar
               userId={pubkey}
-              className={cn('size-6', active ? 'ring-primary ring-2' : '')}
+              className={cn('size-6', active ? 'ring-2 ring-primary' : '')}
             />
           ) : (
-            <Skeleton className={cn('size-6 rounded-full', active ? 'ring-primary ring-2' : '')} />
+            <Skeleton className={cn('size-6 rounded-full', active ? 'ring-2 ring-primary' : '')} />
           )
         ) : (
           <UserRound />
diff --git a/src/components/BottomNavigationBar/BottomNavigationBarItem.tsx b/src/components/BottomNavigationBar/BottomNavigationBarItem.tsx
index 16fdc99..3fc1a61 100644
--- a/src/components/BottomNavigationBar/BottomNavigationBarItem.tsx
+++ b/src/components/BottomNavigationBar/BottomNavigationBarItem.tsx
@@ -18,7 +18,7 @@ export default function BottomNavigationBarItem({
   return (
     <Button
       className={cn(
-        'flex shadow-none items-center bg-transparent w-full h-12 p-3 m-0 rounded-lg [&_svg]:size-6',
+        'm-0 flex h-12 w-full items-center rounded-lg bg-transparent p-3 shadow-none [&_svg]:size-6',
         active && 'text-primary hover:text-primary'
       )}
       variant="ghost"
diff --git a/src/components/BottomNavigationBar/NotificationsButton.tsx b/src/components/BottomNavigationBar/NotificationsButton.tsx
index b605530..03e5bc0 100644
--- a/src/components/BottomNavigationBar/NotificationsButton.tsx
+++ b/src/components/BottomNavigationBar/NotificationsButton.tsx
@@ -17,7 +17,7 @@ export default function NotificationsButton() {
       <div className="relative">
         <Bell />
         {hasNewNotification && (
-          <div className="absolute -top-0.5 right-0.5 w-2 h-2 ring-2 ring-background bg-primary rounded-full" />
+          <div className="absolute -top-0.5 right-0.5 h-2 w-2 rounded-full bg-primary ring-2 ring-background" />
         )}
       </div>
     </BottomNavigationBarItem>
diff --git a/src/components/BottomNavigationBar/index.tsx b/src/components/BottomNavigationBar/index.tsx
index 32c9136..c3bc87c 100644
--- a/src/components/BottomNavigationBar/index.tsx
+++ b/src/components/BottomNavigationBar/index.tsx
@@ -8,13 +8,13 @@ import NotificationsButton from './NotificationsButton'
 export default function BottomNavigationBar() {
   return (
     <div
-      className={cn('fixed bottom-0 w-full z-40 bg-background border-t')}
+      className={cn('fixed bottom-0 z-40 w-full border-t bg-background')}
       style={{
         paddingBottom: 'env(safe-area-inset-bottom)'
       }}
     >
-      <BackgroundAudio className="rounded-none border-x-0 border-t-0 border-b bg-background" />
-      <div className="w-full flex justify-around items-center [&_svg]:size-4 [&_svg]:shrink-0">
+      <BackgroundAudio className="rounded-none border-x-0 border-b border-t-0 bg-background" />
+      <div className="flex w-full items-center justify-around [&_svg]:size-4 [&_svg]:shrink-0">
         <HomeButton />
         <ExploreButton />
         <NotificationsButton />
diff --git a/src/components/ClientTag/index.tsx b/src/components/ClientTag/index.tsx
index b441cc0..8dd6753 100644
--- a/src/components/ClientTag/index.tsx
+++ b/src/components/ClientTag/index.tsx
@@ -10,7 +10,7 @@ export default function ClientTag({ event }: { event: NostrEvent }) {
   if (!usingClient) return null
 
   return (
-    <span className="text-sm text-muted-foreground shrink-0">
+    <span className="shrink-0 text-sm text-muted-foreground">
       {t('via {{client}}', { client: usingClient })}
     </span>
   )
diff --git a/src/components/Collapsible/index.tsx b/src/components/Collapsible/index.tsx
index 9a71888..9c82bc6 100644
--- a/src/components/Collapsible/index.tsx
+++ b/src/components/Collapsible/index.tsx
@@ -48,7 +48,7 @@ export default function Collapsible({
 
   return (
     <div
-      className={cn('relative text-left overflow-hidden', className)}
+      className={cn('relative overflow-hidden text-left', className)}
       ref={containerRef}
       {...props}
       style={{
@@ -57,8 +57,8 @@ export default function Collapsible({
     >
       {children}
       {shouldCollapse && !expanded && (
-        <div className="absolute bottom-0 h-40 w-full z-10 bg-gradient-to-b from-transparent to-background/90 flex items-end justify-center pb-4">
-          <div className="bg-background rounded-lg">
+        <div className="absolute bottom-0 z-10 flex h-40 w-full items-end justify-center bg-gradient-to-b from-transparent to-background/90 pb-4">
+          <div className="rounded-lg bg-background">
             <Button
               className="bg-foreground hover:bg-foreground/80"
               onClick={(e) => {
diff --git a/src/components/Content/index.tsx b/src/components/Content/index.tsx
index 72c534a..81ceaa0 100644
--- a/src/components/Content/index.tsx
+++ b/src/components/Content/index.tsx
@@ -110,7 +110,7 @@ export default function Content({
   let imageIndex = 0
   return (
     <>
-      <div ref={contentRef} className={cn('text-wrap break-words whitespace-pre-wrap', className)}>
+      <div ref={contentRef} className={cn('whitespace-pre-wrap text-wrap break-words', className)}>
         {nodes.map((node, index) => {
           if (node.type === 'text') {
             return node.data
diff --git a/src/components/ContentPreview/CommunityDefinitionPreview.tsx b/src/components/ContentPreview/CommunityDefinitionPreview.tsx
index 82d7e70..8c064f7 100644
--- a/src/components/ContentPreview/CommunityDefinitionPreview.tsx
+++ b/src/components/ContentPreview/CommunityDefinitionPreview.tsx
@@ -16,7 +16,7 @@ export default function CommunityDefinitionPreview({
 
   return (
     <div className={cn('pointer-events-none', className)}>
-      [{t('Community')}] <span className="italic pr-0.5">{metadata.name}</span>
+      [{t('Community')}] <span className="pr-0.5 italic">{metadata.name}</span>
     </div>
   )
 }
diff --git a/src/components/ContentPreview/EmojiPackPreview.tsx b/src/components/ContentPreview/EmojiPackPreview.tsx
index 207a406..064393e 100644
--- a/src/components/ContentPreview/EmojiPackPreview.tsx
+++ b/src/components/ContentPreview/EmojiPackPreview.tsx
@@ -16,7 +16,7 @@ export default function EmojiPackPreview({
 
   return (
     <div className={cn('pointer-events-none', className)}>
-      [{t('Emoji Pack')}] <span className="italic pr-0.5">{title}</span>
+      [{t('Emoji Pack')}] <span className="pr-0.5 italic">{title}</span>
       {emojis.length > 0 && <span>({emojis.length})</span>}
     </div>
   )
diff --git a/src/components/ContentPreview/FollowPackPreview.tsx b/src/components/ContentPreview/FollowPackPreview.tsx
index f68aebc..942cc60 100644
--- a/src/components/ContentPreview/FollowPackPreview.tsx
+++ b/src/components/ContentPreview/FollowPackPreview.tsx
@@ -16,7 +16,7 @@ export default function FollowPackPreview({
 
   return (
     <div className={cn('truncate', className)}>
-      [{t('Follow Pack')}] <span className="italic pr-0.5">{title}</span>
+      [{t('Follow Pack')}] <span className="pr-0.5 italic">{title}</span>
     </div>
   )
 }
diff --git a/src/components/ContentPreview/GroupMetadataPreview.tsx b/src/components/ContentPreview/GroupMetadataPreview.tsx
index 531e376..4d2c7c0 100644
--- a/src/components/ContentPreview/GroupMetadataPreview.tsx
+++ b/src/components/ContentPreview/GroupMetadataPreview.tsx
@@ -16,7 +16,7 @@ export default function GroupMetadataPreview({
 
   return (
     <div className={cn('pointer-events-none', className)}>
-      [{t('Group')}] <span className="italic pr-0.5">{metadata.name}</span>
+      [{t('Group')}] <span className="pr-0.5 italic">{metadata.name}</span>
     </div>
   )
 }
diff --git a/src/components/ContentPreview/HighlightPreview.tsx b/src/components/ContentPreview/HighlightPreview.tsx
index b165683..064c855 100644
--- a/src/components/ContentPreview/HighlightPreview.tsx
+++ b/src/components/ContentPreview/HighlightPreview.tsx
@@ -23,7 +23,7 @@ export default function HighlightPreview({
       <Content
         content={translatedEvent?.content ?? event.content}
         emojiInfos={emojiInfos}
-        className="italic pr-0.5"
+        className="pr-0.5 italic"
       />
     </div>
   )
diff --git a/src/components/ContentPreview/LiveEventPreview.tsx b/src/components/ContentPreview/LiveEventPreview.tsx
index 7de7324..ee9e98b 100644
--- a/src/components/ContentPreview/LiveEventPreview.tsx
+++ b/src/components/ContentPreview/LiveEventPreview.tsx
@@ -16,7 +16,7 @@ export default function LiveEventPreview({
 
   return (
     <div className={cn('pointer-events-none', className)}>
-      [{t('Live event')}] <span className="italic pr-0.5">{metadata.title}</span>
+      [{t('Live event')}] <span className="pr-0.5 italic">{metadata.title}</span>
     </div>
   )
 }
diff --git a/src/components/ContentPreview/LongFormArticlePreview.tsx b/src/components/ContentPreview/LongFormArticlePreview.tsx
index c42cb96..13680df 100644
--- a/src/components/ContentPreview/LongFormArticlePreview.tsx
+++ b/src/components/ContentPreview/LongFormArticlePreview.tsx
@@ -16,7 +16,7 @@ export default function LongFormArticlePreview({
 
   return (
     <div className={cn('pointer-events-none', className)}>
-      [{t('Article')}] <span className="italic pr-0.5">{metadata.title}</span>
+      [{t('Article')}] <span className="pr-0.5 italic">{metadata.title}</span>
     </div>
   )
 }
diff --git a/src/components/ContentPreview/PictureNotePreview.tsx b/src/components/ContentPreview/PictureNotePreview.tsx
index c0b97e4..ba596f3 100644
--- a/src/components/ContentPreview/PictureNotePreview.tsx
+++ b/src/components/ContentPreview/PictureNotePreview.tsx
@@ -13,7 +13,7 @@ export default function PictureNotePreview({
 
   return (
     <div className={cn('pointer-events-none', className)}>
-      [{t('Image')}] <span className="italic pr-0.5">{event.content}</span>
+      [{t('Image')}] <span className="pr-0.5 italic">{event.content}</span>
     </div>
   )
 }
diff --git a/src/components/ContentPreview/PollPreview.tsx b/src/components/ContentPreview/PollPreview.tsx
index 77e58d6..f31f6f7 100644
--- a/src/components/ContentPreview/PollPreview.tsx
+++ b/src/components/ContentPreview/PollPreview.tsx
@@ -17,7 +17,7 @@ export default function PollPreview({ event, className }: { event: Event; classN
       <Content
         content={translatedEvent?.content ?? event.content}
         emojiInfos={emojiInfos}
-        className="italic pr-0.5"
+        className="pr-0.5 italic"
       />
     </div>
   )
diff --git a/src/components/ContentPreview/VideoNotePreview.tsx b/src/components/ContentPreview/VideoNotePreview.tsx
index 8a7b4ba..d189b72 100644
--- a/src/components/ContentPreview/VideoNotePreview.tsx
+++ b/src/components/ContentPreview/VideoNotePreview.tsx
@@ -13,7 +13,7 @@ export default function VideoNotePreview({
 
   return (
     <div className={cn('pointer-events-none', className)}>
-      [{t('Media')}] <span className="italic pr-0.5">{event.content}</span>
+      [{t('Media')}] <span className="pr-0.5 italic">{event.content}</span>
     </div>
   )
 }
diff --git a/src/components/DefaultRelaysSetting/index.tsx b/src/components/DefaultRelaysSetting/index.tsx
index 0b3a989..20c24ac 100644
--- a/src/components/DefaultRelaysSetting/index.tsx
+++ b/src/components/DefaultRelaysSetting/index.tsx
@@ -85,23 +85,23 @@ export default function DefaultRelaysSetting() {
         />
         <Button onClick={saveNewRelayUrl}>{t('Add')}</Button>
       </div>
-      {newRelayUrlError && <div className="text-xs text-destructive mt-1">{newRelayUrlError}</div>}
+      {newRelayUrlError && <div className="mt-1 text-xs text-destructive">{newRelayUrlError}</div>}
     </div>
   )
 }
 
 function RelayUrl({ url, onRemove }: { url: string; onRemove: () => void }) {
   return (
-    <div className="flex items-center justify-between pl-1 pr-3 py-1">
-      <div className="flex gap-3 items-center flex-1 w-0">
-        <RelayIcon url={url} className="w-4 h-4" />
-        <div className="text-muted-foreground text-sm truncate">{url}</div>
+    <div className="flex items-center justify-between py-1 pl-1 pr-3">
+      <div className="flex w-0 flex-1 items-center gap-3">
+        <RelayIcon url={url} className="h-4 w-4" />
+        <div className="truncate text-sm text-muted-foreground">{url}</div>
       </div>
       <div className="shrink-0">
         <CircleX
           size={16}
           onClick={onRemove}
-          className="text-muted-foreground hover:text-destructive cursor-pointer"
+          className="cursor-pointer text-muted-foreground hover:text-destructive"
         />
       </div>
     </div>
diff --git a/src/components/Donation/PlatinumSponsors.tsx b/src/components/Donation/PlatinumSponsors.tsx
index 6c3c52c..0b27077 100644
--- a/src/components/Donation/PlatinumSponsors.tsx
+++ b/src/components/Donation/PlatinumSponsors.tsx
@@ -7,10 +7,10 @@ export default function PlatinumSponsors() {
 
   return (
     <div className="space-y-2">
-      <div className="font-semibold text-center">{t('Platinum Sponsors')}</div>
-      <div className="flex flex-col gap-2 items-center">
+      <div className="text-center font-semibold">{t('Platinum Sponsors')}</div>
+      <div className="flex flex-col items-center gap-2">
         <div
-          className="flex items-center gap-4 cursor-pointer"
+          className="flex cursor-pointer items-center gap-4"
           onClick={() => window.open('https://opensats.org/', '_blank')}
         >
           <Image
diff --git a/src/components/Donation/RecentSupporters.tsx b/src/components/Donation/RecentSupporters.tsx
index 274f562..5650686 100644
--- a/src/components/Donation/RecentSupporters.tsx
+++ b/src/components/Donation/RecentSupporters.tsx
@@ -21,23 +21,23 @@ export default function RecentSupporters() {
 
   return (
     <div className="space-y-2">
-      <div className="font-semibold text-center">{t('Recent Supporters')}</div>
+      <div className="text-center font-semibold">{t('Recent Supporters')}</div>
       <div className="flex flex-col gap-2">
         {supporters.map((item, index) => (
           <div
             key={index}
-            className="flex items-center justify-between rounded-md border p-2 sm:p-4 gap-2"
+            className="flex items-center justify-between gap-2 rounded-md border p-2 sm:p-4"
           >
-            <div className="flex items-center gap-2 flex-1 w-0">
+            <div className="flex w-0 flex-1 items-center gap-2">
               <UserAvatar userId={item.pubkey} />
-              <div className="flex-1 w-0">
-                <Username className="font-semibold w-fit" userId={item.pubkey} />
-                <div className="text-xs text-muted-foreground line-clamp-3 select-text">
+              <div className="w-0 flex-1">
+                <Username className="w-fit font-semibold" userId={item.pubkey} />
+                <div className="line-clamp-3 select-text text-xs text-muted-foreground">
                   {item.comment}
                 </div>
               </div>
             </div>
-            <div className="font-semibold text-yellow-400 shrink-0">
+            <div className="shrink-0 font-semibold text-yellow-400">
               {formatAmount(item.amount)} {t('sats')}
             </div>
           </div>
diff --git a/src/components/Donation/index.tsx b/src/components/Donation/index.tsx
index 4ef12db..0f99e9c 100644
--- a/src/components/Donation/index.tsx
+++ b/src/components/Donation/index.tsx
@@ -13,12 +13,12 @@ export default function Donation({ className }: { className?: string }) {
   const [donationAmount, setDonationAmount] = useState<number | undefined>(undefined)
 
   return (
-    <div className={cn('p-4 border rounded-lg space-y-4', className)}>
+    <div className={cn('space-y-4 rounded-lg border p-4', className)}>
       <div className="text-center font-semibold">{t('Enjoying Jumble?')}</div>
       <div className="text-center text-muted-foreground">
         {t('Your donation helps me maintain Jumble and make it better! 😊')}
       </div>
-      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
         {[
           { amount: 1000, text: '☕️ 1k' },
           { amount: 10000, text: '🍜 10k' },
diff --git a/src/components/DrawerMenuItem/index.tsx b/src/components/DrawerMenuItem/index.tsx
index 341fd3c..ecfc189 100644
--- a/src/components/DrawerMenuItem/index.tsx
+++ b/src/components/DrawerMenuItem/index.tsx
@@ -15,7 +15,7 @@ export default function DrawerMenuItem({
     <DrawerClose className="w-full">
       <Button
         onClick={onClick}
-        className={cn('w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5', className)}
+        className={cn('w-full justify-start gap-4 p-6 text-lg [&_svg]:size-5', className)}
         variant="ghost"
       >
         {children}
diff --git a/src/components/Embedded/EmbeddedLNInvoice.tsx b/src/components/Embedded/EmbeddedLNInvoice.tsx
index bbc959f..a73bf1d 100644
--- a/src/components/Embedded/EmbeddedLNInvoice.tsx
+++ b/src/components/Embedded/EmbeddedLNInvoice.tsx
@@ -42,21 +42,21 @@ export function EmbeddedLNInvoice({ invoice, className }: { invoice: string; cla
 
   return (
     <div
-      className={cn('p-3 border rounded-lg cursor-default flex flex-col gap-3 max-w-sm', className)}
+      className={cn('flex max-w-sm cursor-default flex-col gap-3 rounded-lg border p-3', className)}
       onClick={(e) => e.stopPropagation()}
     >
       <div className="flex items-center gap-2">
-        <Zap className="w-5 h-5 text-yellow-400" />
-        <div className="font-semibold text-sm">{t('Lightning Invoice')}</div>
+        <Zap className="h-5 w-5 text-yellow-400" />
+        <div className="text-sm font-semibold">{t('Lightning Invoice')}</div>
       </div>
       {description && (
-        <div className="text-sm text-muted-foreground break-words">{description}</div>
+        <div className="break-words text-sm text-muted-foreground">{description}</div>
       )}
       <div className="text-lg font-bold">
         {formatAmount(amount)} {t('sats')}
       </div>
       <Button onClick={handlePayClick}>
-        {paying && <Loader className="w-4 h-4 animate-spin" />}
+        {paying && <Loader className="h-4 w-4 animate-spin" />}
         {t('Pay')}
       </Button>
     </div>
diff --git a/src/components/Embedded/EmbeddedMention.tsx b/src/components/Embedded/EmbeddedMention.tsx
index 1b270c2..cc15ff9 100644
--- a/src/components/Embedded/EmbeddedMention.tsx
+++ b/src/components/Embedded/EmbeddedMention.tsx
@@ -6,7 +6,7 @@ export function EmbeddedMention({ userId, className }: { userId: string; classNa
     <Username
       userId={userId}
       showAt
-      className={cn('text-primary font-normal inline', className)}
+      className={cn('inline font-normal text-primary', className)}
       withoutSkeleton
     />
   )
diff --git a/src/components/Embedded/EmbeddedNote.tsx b/src/components/Embedded/EmbeddedNote.tsx
index 3ba066b..9a4e5b8 100644
--- a/src/components/Embedded/EmbeddedNote.tsx
+++ b/src/components/Embedded/EmbeddedNote.tsx
@@ -29,18 +29,18 @@ export function EmbeddedNote({ noteId, className }: { noteId: string; className?
 function EmbeddedNoteSkeleton({ className }: { className?: string }) {
   return (
     <div
-      className={cn('text-left p-2 sm:p-3 border rounded-xl bg-card', className)}
+      className={cn('rounded-xl border bg-card p-2 text-left sm:p-3', className)}
       onClick={(e) => e.stopPropagation()}
     >
       <div className="flex items-center space-x-2">
-        <Skeleton className="w-9 h-9 rounded-full" />
+        <Skeleton className="h-9 w-9 rounded-full" />
         <div>
-          <Skeleton className="h-3 w-16 my-1" />
-          <Skeleton className="h-3 w-16 my-1" />
+          <Skeleton className="my-1 h-3 w-16" />
+          <Skeleton className="my-1 h-3 w-16" />
         </div>
       </div>
-      <Skeleton className="w-full h-4 my-1 mt-2" />
-      <Skeleton className="w-2/3 h-4 my-1" />
+      <Skeleton className="my-1 mt-2 h-4 w-full" />
+      <Skeleton className="my-1 h-4 w-2/3" />
     </div>
   )
 }
@@ -49,10 +49,10 @@ function EmbeddedNoteNotFound({ noteId, className }: { noteId: string; className
   const { t } = useTranslation()
 
   return (
-    <div className={cn('text-left p-2 sm:p-3 border rounded-xl bg-card', className)}>
-      <div className="flex flex-col items-center text-muted-foreground font-medium gap-2">
+    <div className={cn('rounded-xl border bg-card p-2 text-left sm:p-3', className)}>
+      <div className="flex flex-col items-center gap-2 font-medium text-muted-foreground">
         <div>{t('Sorry! The note cannot be found 😔')}</div>
-        <ClientSelect className="w-full mt-2" originalNoteId={noteId} />
+        <ClientSelect className="mt-2 w-full" originalNoteId={noteId} />
       </div>
     </div>
   )
diff --git a/src/components/Embedded/EmbeddedWebsocketUrl.tsx b/src/components/Embedded/EmbeddedWebsocketUrl.tsx
index a184901..cb3f4d6 100644
--- a/src/components/Embedded/EmbeddedWebsocketUrl.tsx
+++ b/src/components/Embedded/EmbeddedWebsocketUrl.tsx
@@ -12,7 +12,7 @@ export function EmbeddedWebsocketUrl({ url }: { url: string }) {
       }}
     >
       [ {url} ]
-      <span className="w-2 h-1 bg-primary" />
+      <span className="h-1 w-2 bg-primary" />
     </span>
   )
 }
diff --git a/src/components/Emoji/index.tsx b/src/components/Emoji/index.tsx
index 14c0b4d..2a2603d 100644
--- a/src/components/Emoji/index.tsx
+++ b/src/components/Emoji/index.tsx
@@ -17,7 +17,7 @@ export default function Emoji({
 
   if (typeof emoji === 'string') {
     return emoji === '+' ? (
-      <Heart className={cn('size-5 text-red-400 fill-red-400', classNames?.img)} />
+      <Heart className={cn('size-5 fill-red-400 text-red-400', classNames?.img)} />
     ) : (
       <span className={cn('whitespace-nowrap', classNames?.text)}>{emoji}</span>
     )
@@ -34,7 +34,7 @@ export default function Emoji({
       src={emoji.url}
       alt={emoji.shortcode}
       draggable={false}
-      className={cn('inline-block size-5 pointer-events-none', classNames?.img)}
+      className={cn('pointer-events-none inline-block size-5', classNames?.img)}
       onLoad={() => {
         setHasError(false)
       }}
diff --git a/src/components/EmojiPackList/index.tsx b/src/components/EmojiPackList/index.tsx
index 0169e9c..b4f6806 100644
--- a/src/components/EmojiPackList/index.tsx
+++ b/src/components/EmojiPackList/index.tsx
@@ -56,7 +56,7 @@ export default function EmojiPackList() {
 
   if (eventIds.length === 0) {
     return (
-      <div className="mt-2 text-sm text-center text-muted-foreground">
+      <div className="mt-2 text-center text-sm text-muted-foreground">
         {t('no emoji packs found')}
       </div>
     )
diff --git a/src/components/EmojiPickerDialog/index.tsx b/src/components/EmojiPickerDialog/index.tsx
index 8bc068a..6d94a84 100644
--- a/src/components/EmojiPickerDialog/index.tsx
+++ b/src/components/EmojiPickerDialog/index.tsx
@@ -39,7 +39,7 @@ export default function EmojiPickerDialog({
   return (
     <DropdownMenu open={open} onOpenChange={setOpen}>
       <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
-      <DropdownMenuContent side="top" className="p-0 w-fit">
+      <DropdownMenuContent side="top" className="w-fit p-0">
         <EmojiPicker
           onEmojiClick={(emoji, e) => {
             e.stopPropagation()
diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx
index 8745855..75f547c 100644
--- a/src/components/ErrorBoundary.tsx
+++ b/src/components/ErrorBoundary.tsx
@@ -28,9 +28,9 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
   render() {
     if (this.state.hasError) {
       return (
-        <div className="w-screen h-screen flex flex-col items-center justify-center p-4 gap-4">
+        <div className="flex h-screen w-screen flex-col items-center justify-center gap-4 p-4">
           <h1 className="text-2xl font-bold">Oops, something went wrong.</h1>
-          <p className="text-lg text-center max-w-md">
+          <p className="max-w-md text-center text-lg">
             Sorry for the inconvenience. If you don't mind helping, you can{' '}
             <a
               href="https://github.com/CodyTseng/jumble/issues/new"
@@ -61,7 +61,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
               >
                 Copy Error Message
               </Button>
-              <pre className="bg-destructive/10 text-destructive p-2 rounded text-wrap break-words whitespace-pre-wrap">
+              <pre className="whitespace-pre-wrap text-wrap break-words rounded bg-destructive/10 p-2 text-destructive">
                 Error: {this.state.error.message}
               </pre>
             </>
diff --git a/src/components/Explore/index.tsx b/src/components/Explore/index.tsx
index aa5f0cd..0925885 100644
--- a/src/components/Explore/index.tsx
+++ b/src/components/Explore/index.tsx
@@ -30,7 +30,7 @@ export default function Explore() {
         <div className="p-4 max-md:border-b">
           <Skeleton className="h-6 w-20" />
         </div>
-        <div className="grid md:px-4 md:grid-cols-2 md:gap-2">
+        <div className="grid md:grid-cols-2 md:gap-2 md:px-4">
           <RelaySimpleInfoSkeleton className="h-auto px-4 py-3 md:rounded-lg md:border" />
         </div>
       </div>
@@ -62,13 +62,13 @@ function RelayCollection({ collection }: { collection: TAwesomeRelayCollection }
     <div>
       <div
         className={cn(
-          'sticky bg-background z-20 px-4 py-3 text-2xl font-semibold max-md:border-b',
+          'sticky z-20 bg-background px-4 py-3 text-2xl font-semibold max-md:border-b',
           deepBrowsing ? 'top-12' : 'top-24'
         )}
       >
         {collection.name}
       </div>
-      <div className="grid md:px-4 md:grid-cols-2 md:gap-3">
+      <div className="grid md:grid-cols-2 md:gap-3 md:px-4">
         {collection.relays.map((url) => (
           <RelayItem key={url} url={url} />
         ))}
@@ -82,7 +82,7 @@ function RelayItem({ url }: { url: string }) {
   const { relayInfo, isFetching } = useFetchRelayInfo(url)
 
   if (isFetching) {
-    return <RelaySimpleInfoSkeleton className="h-auto px-4 py-3 border-b md:rounded-lg md:border" />
+    return <RelaySimpleInfoSkeleton className="h-auto border-b px-4 py-3 md:rounded-lg md:border" />
   }
 
   if (!relayInfo) {
@@ -92,7 +92,7 @@ function RelayItem({ url }: { url: string }) {
   return (
     <RelaySimpleInfo
       key={relayInfo.url}
-      className="clickable h-auto px-4 py-3 border-b md:rounded-lg md:border"
+      className="clickable h-auto border-b px-4 py-3 md:rounded-lg md:border"
       relayInfo={relayInfo}
       onClick={(e) => {
         e.stopPropagation()
diff --git a/src/components/ExternalContent/index.tsx b/src/components/ExternalContent/index.tsx
index aa6e728..4ed918a 100644
--- a/src/components/ExternalContent/index.tsx
+++ b/src/components/ExternalContent/index.tsx
@@ -40,7 +40,7 @@ export default function ExternalContent({
 
   if (node.type === 'text') {
     return (
-      <div className={cn('text-wrap break-words whitespace-pre-wrap', className)}>{content}</div>
+      <div className={cn('whitespace-pre-wrap text-wrap break-words', className)}>{content}</div>
     )
   }
 
diff --git a/src/components/ExternalContentInteractions/Tabs.tsx b/src/components/ExternalContentInteractions/Tabs.tsx
index 365f09b..caba11c 100644
--- a/src/components/ExternalContentInteractions/Tabs.tsx
+++ b/src/components/ExternalContentInteractions/Tabs.tsx
@@ -37,13 +37,13 @@ export function Tabs({
 
   return (
     <div className="w-fit">
-      <div className="flex relative">
+      <div className="relative flex">
         {TABS.map((tab, index) => (
           <div
             key={tab.value}
             ref={(el) => (tabRefs.current[index] = el)}
             className={cn(
-              `text-center px-4 py-2 font-semibold clickable cursor-pointer rounded-lg`,
+              `clickable cursor-pointer rounded-lg px-4 py-2 text-center font-semibold`,
               selectedTab === tab.value ? '' : 'text-muted-foreground'
             )}
             onClick={() => onTabChange(tab.value)}
@@ -52,7 +52,7 @@ export function Tabs({
           </div>
         ))}
         <div
-          className="absolute bottom-0 h-1 bg-primary rounded-full transition-all duration-500"
+          className="absolute bottom-0 h-1 rounded-full bg-primary transition-all duration-500"
           style={{
             width: `${indicatorStyle.width}px`,
             left: `${indicatorStyle.left}px`
diff --git a/src/components/ExternalContentInteractions/index.tsx b/src/components/ExternalContentInteractions/index.tsx
index 2b76309..7d40642 100644
--- a/src/components/ExternalContentInteractions/index.tsx
+++ b/src/components/ExternalContentInteractions/index.tsx
@@ -32,12 +32,12 @@ export default function ExternalContentInteractions({
   return (
     <>
       <div className="flex items-center justify-between">
-        <ScrollArea className="flex-1 w-0">
+        <ScrollArea className="w-0 flex-1">
           <Tabs selectedTab={type} onTabChange={setType} />
-          <ScrollBar orientation="horizontal" className="opacity-0 pointer-events-none" />
+          <ScrollBar orientation="horizontal" className="pointer-events-none opacity-0" />
         </ScrollArea>
         <Separator orientation="vertical" className="h-6" />
-        <div className="size-10 flex items-center justify-center">
+        <div className="flex size-10 items-center justify-center">
           <TrustScoreFilter filterId={SPECIAL_TRUST_SCORE_FILTER_ID.INTERACTIONS} />
         </div>
       </div>
diff --git a/src/components/ExternalLink/index.tsx b/src/components/ExternalLink/index.tsx
index e622355..68b4116 100644
--- a/src/components/ExternalLink/index.tsx
+++ b/src/components/ExternalLink/index.tsx
@@ -92,7 +92,7 @@ export default function ExternalLink({
             <div className="py-2">
               <Button
                 onClick={handleOpenLink}
-                className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5"
+                className="w-full justify-start gap-4 p-6 text-lg [&_svg]:size-5"
                 variant="ghost"
               >
                 <ExternalLinkIcon />
@@ -100,7 +100,7 @@ export default function ExternalLink({
               </Button>
               <Button
                 onClick={handleViewDiscussions}
-                className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5"
+                className="w-full justify-start gap-4 p-6 text-lg [&_svg]:size-5"
                 variant="ghost"
               >
                 <MessageSquare />
diff --git a/src/components/FavoriteRelaysSetting/AddNewRelay.tsx b/src/components/FavoriteRelaysSetting/AddNewRelay.tsx
index d73ad38..172c930 100644
--- a/src/components/FavoriteRelaysSetting/AddNewRelay.tsx
+++ b/src/components/FavoriteRelaysSetting/AddNewRelay.tsx
@@ -40,7 +40,7 @@ export default function AddNewRelay() {
 
   return (
     <div className="space-y-1">
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         <Input
           placeholder={t('Add a new relay')}
           value={input}
@@ -50,7 +50,7 @@ export default function AddNewRelay() {
         />
         <Button onClick={saveRelay}>{t('Add')}</Button>
       </div>
-      {errorMsg && <div className="text-destructive text-sm pl-8">{errorMsg}</div>}
+      {errorMsg && <div className="pl-8 text-sm text-destructive">{errorMsg}</div>}
     </div>
   )
 }
diff --git a/src/components/FavoriteRelaysSetting/AddNewRelaySet.tsx b/src/components/FavoriteRelaysSetting/AddNewRelaySet.tsx
index 0c8de05..701933d 100644
--- a/src/components/FavoriteRelaysSetting/AddNewRelaySet.tsx
+++ b/src/components/FavoriteRelaysSetting/AddNewRelaySet.tsx
@@ -28,7 +28,7 @@ export default function AddNewRelaySet() {
 
   return (
     <div className="space-y-1">
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         <Input
           placeholder={t('Add a new relay set')}
           value={newRelaySetName}
diff --git a/src/components/FavoriteRelaysSetting/FavoriteRelayList.tsx b/src/components/FavoriteRelaysSetting/FavoriteRelayList.tsx
index 16a94a0..2646d36 100644
--- a/src/components/FavoriteRelaysSetting/FavoriteRelayList.tsx
+++ b/src/components/FavoriteRelaysSetting/FavoriteRelayList.tsx
@@ -43,7 +43,7 @@ export default function FavoriteRelayList() {
 
   return (
     <div className="space-y-2">
-      <div className="text-muted-foreground font-semibold select-none">{t('Relays')}</div>
+      <div className="select-none font-semibold text-muted-foreground">{t('Relays')}</div>
       <DndContext
         sensors={sensors}
         collisionDetection={closestCenter}
diff --git a/src/components/FavoriteRelaysSetting/PullRelaySetsButton.tsx b/src/components/FavoriteRelaysSetting/PullRelaySetsButton.tsx
index 079333d..76f342c 100644
--- a/src/components/FavoriteRelaysSetting/PullRelaySetsButton.tsx
+++ b/src/components/FavoriteRelaysSetting/PullRelaySetsButton.tsx
@@ -40,7 +40,7 @@ export default function PullRelaySetsButton() {
   const trigger = (
     <Button
       variant="link"
-      className="text-muted-foreground hover:no-underline hover:text-foreground p-0 h-fit"
+      className="h-fit p-0 text-muted-foreground hover:text-foreground hover:no-underline"
       disabled={!pubkey}
     >
       <CloudDownload />
@@ -53,7 +53,7 @@ export default function PullRelaySetsButton() {
       <Drawer open={open} onOpenChange={setOpen}>
         <DrawerTrigger asChild>{trigger}</DrawerTrigger>
         <DrawerContent className="max-h-[90vh]">
-          <div className="flex flex-col p-4 gap-4 overflow-auto">
+          <div className="flex flex-col gap-4 overflow-auto p-4">
             <DrawerHeader>
               <DrawerTitle>{t('Select the relay sets you want to pull')}</DrawerTitle>
               <DrawerDescription className="hidden" />
diff --git a/src/components/FavoriteRelaysSetting/RelayItem.tsx b/src/components/FavoriteRelaysSetting/RelayItem.tsx
index ae57e25..7e8dc40 100644
--- a/src/components/FavoriteRelaysSetting/RelayItem.tsx
+++ b/src/components/FavoriteRelaysSetting/RelayItem.tsx
@@ -20,22 +20,22 @@ export default function RelayItem({ relay }: { relay: string }) {
 
   return (
     <div
-      className="relative group clickable flex gap-2 border rounded-lg p-2 pr-2.5 items-center justify-between select-none"
+      className="clickable group relative flex select-none items-center justify-between gap-2 rounded-lg border p-2 pr-2.5"
       ref={setNodeRef}
       style={style}
       onClick={() => push(toRelay(relay))}
     >
-      <div className="flex items-center gap-1 flex-1">
+      <div className="flex flex-1 items-center gap-1">
         <div
-          className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded touch-none shrink-0"
+          className="shrink-0 cursor-grab touch-none rounded p-2 hover:bg-muted active:cursor-grabbing"
           {...attributes}
           {...listeners}
         >
           <GripVertical className="size-4 text-muted-foreground" />
         </div>
-        <div className="flex gap-2 items-center flex-1">
+        <div className="flex flex-1 items-center gap-2">
           <RelayIcon url={relay} />
-          <div className="flex-1 w-0 truncate font-semibold">{relay}</div>
+          <div className="w-0 flex-1 truncate font-semibold">{relay}</div>
         </div>
       </div>
       <SaveRelayDropdownMenu urls={[relay]} />
diff --git a/src/components/FavoriteRelaysSetting/RelaySet.tsx b/src/components/FavoriteRelaysSetting/RelaySet.tsx
index d52387d..b51d523 100644
--- a/src/components/FavoriteRelaysSetting/RelaySet.tsx
+++ b/src/components/FavoriteRelaysSetting/RelaySet.tsx
@@ -42,19 +42,19 @@ export default function RelaySet({ relaySet }: { relaySet: TRelaySet }) {
   }
 
   return (
-    <div ref={setNodeRef} style={style} className="relative group">
-      <div className="w-full border rounded-lg px-2 py-2.5">
-        <div className="flex justify-between items-center">
+    <div ref={setNodeRef} style={style} className="group relative">
+      <div className="w-full rounded-lg border px-2 py-2.5">
+        <div className="flex items-center justify-between">
           <div className="flex items-center">
             <div
-              className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded touch-none"
+              className="cursor-grab touch-none rounded p-2 hover:bg-muted active:cursor-grabbing"
               {...attributes}
               {...listeners}
             >
               <GripVertical className="size-4 text-muted-foreground" />
             </div>
-            <div className="flex gap-2 items-center">
-              <div className="flex justify-center items-center w-6 h-6 shrink-0">
+            <div className="flex items-center gap-2">
+              <div className="flex h-6 w-6 shrink-0 items-center justify-center">
                 <FolderClosed className="size-4" />
               </div>
               <RelaySetName relaySet={relaySet} />
@@ -98,20 +98,20 @@ function RelaySetName({ relaySet }: { relaySet: TRelaySet }) {
   }
 
   return renamingRelaySetId === relaySet.id ? (
-    <div className="flex gap-1 items-center">
+    <div className="flex items-center gap-1">
       <Input
         value={newSetName}
         onChange={handleRenameInputChange}
         onBlur={saveNewRelaySetName}
         onKeyDown={handleRenameInputKeyDown}
-        className="font-semibold w-28"
+        className="w-28 font-semibold"
       />
       <Button variant="ghost" size="icon" onClick={saveNewRelaySetName}>
         <Check size={18} className="text-green-500" />
       </Button>
     </div>
   ) : (
-    <div className="h-8 font-semibold flex items-center select-none">{relaySet.name}</div>
+    <div className="flex h-8 select-none items-center font-semibold">{relaySet.name}</div>
   )
 }
 
@@ -125,7 +125,7 @@ function RelayUrlsExpandToggle({
   const { expandedRelaySetId, setExpandedRelaySetId } = useRelaySetsSettingComponent()
   return (
     <div
-      className="text-sm text-muted-foreground flex items-center gap-1 cursor-pointer hover:text-foreground"
+      className="flex cursor-pointer items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
       onClick={() => setExpandedRelaySetId((pre) => (pre === relaySetId ? null : relaySetId))}
     >
       <div className="select-none">{children}</div>
diff --git a/src/components/FavoriteRelaysSetting/RelaySetList.tsx b/src/components/FavoriteRelaysSetting/RelaySetList.tsx
index c581a39..18ad1af 100644
--- a/src/components/FavoriteRelaysSetting/RelaySetList.tsx
+++ b/src/components/FavoriteRelaysSetting/RelaySetList.tsx
@@ -45,7 +45,7 @@ export default function RelaySetList() {
   return (
     <div className="space-y-2">
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <div className="text-muted-foreground font-semibold select-none shrink-0">
+        <div className="shrink-0 select-none font-semibold text-muted-foreground">
           {t('Relay sets')}
         </div>
         <PullRelaySetsButton />
diff --git a/src/components/FavoriteRelaysSetting/RelayUrl.tsx b/src/components/FavoriteRelaysSetting/RelayUrl.tsx
index 2684abb..6a99241 100644
--- a/src/components/FavoriteRelaysSetting/RelayUrl.tsx
+++ b/src/components/FavoriteRelaysSetting/RelayUrl.tsx
@@ -73,7 +73,7 @@ export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
         />
         <Button onClick={saveNewRelayUrl}>{t('Add')}</Button>
       </div>
-      {newRelayUrlError && <div className="text-xs text-destructive mt-1">{newRelayUrlError}</div>}
+      {newRelayUrlError && <div className="mt-1 text-xs text-destructive">{newRelayUrlError}</div>}
     </>
   )
 }
@@ -81,15 +81,15 @@ export default function RelayUrls({ relaySetId }: { relaySetId: string }) {
 function RelayUrl({ url, onRemove }: { url: string; onRemove: () => void }) {
   return (
     <div className="flex items-center justify-between pl-1 pr-3">
-      <div className="flex gap-3 items-center flex-1 w-0">
-        <RelayIcon url={url} className="w-4 h-4" />
-        <div className="text-muted-foreground text-sm truncate">{url}</div>
+      <div className="flex w-0 flex-1 items-center gap-3">
+        <RelayIcon url={url} className="h-4 w-4" />
+        <div className="truncate text-sm text-muted-foreground">{url}</div>
       </div>
       <div className="shrink-0">
         <CircleX
           size={16}
           onClick={onRemove}
-          className="text-muted-foreground hover:text-destructive cursor-pointer"
+          className="cursor-pointer text-muted-foreground hover:text-destructive"
         />
       </div>
     </div>
diff --git a/src/components/FeedSwitcher/index.tsx b/src/components/FeedSwitcher/index.tsx
index eac0e09..1eb4883 100644
--- a/src/components/FeedSwitcher/index.tsx
+++ b/src/components/FeedSwitcher/index.tsx
@@ -39,8 +39,8 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
               close?.()
             }}
           >
-            <div className="flex gap-3 items-center">
-              <div className="flex justify-center items-center size-6 shrink-0">
+            <div className="flex items-center gap-3">
+              <div className="flex size-6 shrink-0 items-center justify-center">
                 <UsersRound className="size-5" />
               </div>
               <div className="flex-1">{t('Following')}</div>
@@ -56,8 +56,8 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
               close?.()
             }}
           >
-            <div className="flex gap-3 items-center">
-              <div className="flex justify-center items-center size-6 shrink-0">
+            <div className="flex items-center gap-3">
+              <div className="flex size-6 shrink-0 items-center justify-center">
                 <Star className="size-5" />
               </div>
               <div className="flex-1">{t('Special Follow')}</div>
@@ -74,7 +74,7 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
             action={
               <SecondaryPageLink
                 to={toRelaySettings()}
-                className="flex items-center gap-1 text-xs text-primary hover:text-primary-hover transition-colors font-medium"
+                className="flex items-center gap-1 text-xs font-medium text-primary transition-colors hover:text-primary-hover"
                 onClick={() => close?.()}
               >
                 <Settings2 className="size-3" />
@@ -104,9 +104,9 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
                   close?.()
                 }}
               >
-                <div className="flex gap-3 items-center w-full">
+                <div className="flex w-full items-center gap-3">
                   <RelayIcon url={relay} className="shrink-0" />
-                  <div className="flex-1 w-0 truncate">{simplifyUrl(relay)}</div>
+                  <div className="w-0 flex-1 truncate">{simplifyUrl(relay)}</div>
                 </div>
               </FeedSwitcherItem>
             ))}
@@ -119,8 +119,8 @@ export default function FeedSwitcher({ close }: { close?: () => void }) {
 
 function SectionHeader({ title, action }: { title: string; action?: React.ReactNode }) {
   return (
-    <div className="flex justify-between items-center px-1 py-1">
-      <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+    <div className="flex items-center justify-between px-1 py-1">
+      <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
         {title}
       </h3>
       {action}
@@ -142,19 +142,19 @@ function FeedSwitcherItem({
   return (
     <div
       className={cn(
-        'group relative w-full border rounded-lg px-3 py-2.5 transition-all duration-200',
-        disabled && 'opacity-50 pointer-events-none',
+        'group relative w-full rounded-lg border px-3 py-2.5 transition-all duration-200',
+        disabled && 'pointer-events-none opacity-50',
         isActive
           ? 'border-primary bg-primary/5 shadow-sm'
-          : 'border-border hover:border-primary/50 hover:bg-accent/50 clickable'
+          : 'clickable border-border hover:border-primary/50 hover:bg-accent/50'
       )}
       onClick={() => {
         if (disabled) return
         onClick()
       }}
     >
-      <div className="flex justify-between items-center gap-2">
-        <div className="font-medium flex-1 min-w-0">{children}</div>
+      <div className="flex items-center justify-between gap-2">
+        <div className="min-w-0 flex-1 font-medium">{children}</div>
       </div>
     </div>
   )
diff --git a/src/components/FollowButton/index.tsx b/src/components/FollowButton/index.tsx
index f71fdfe..02d705b 100644
--- a/src/components/FollowButton/index.tsx
+++ b/src/components/FollowButton/index.tsx
@@ -53,7 +53,7 @@ export default function FollowButton({ pubkey }: { pubkey: string }) {
       <AlertDialog>
         <AlertDialogTrigger asChild>
           <Button
-            className="rounded-full min-w-28"
+            className="min-w-28 rounded-full"
             variant={hover ? 'destructive' : 'secondary'}
             disabled={updating}
             onMouseEnter={() => setHover(true)}
@@ -85,7 +85,7 @@ export default function FollowButton({ pubkey }: { pubkey: string }) {
       </AlertDialog>
     </div>
   ) : (
-    <Button className="rounded-full min-w-28" onClick={handleFollow} disabled={updating}>
+    <Button className="min-w-28 rounded-full" onClick={handleFollow} disabled={updating}>
       {updating ? <Loader className="animate-spin" /> : t('Follow')}
     </Button>
   )
diff --git a/src/components/FollowingBadge/index.tsx b/src/components/FollowingBadge/index.tsx
index d6d00c9..4e87897 100644
--- a/src/components/FollowingBadge/index.tsx
+++ b/src/components/FollowingBadge/index.tsx
@@ -16,7 +16,7 @@ export default function FollowingBadge({ pubkey, userId }: { pubkey?: string; us
   if (!isFollowing) return null
 
   return (
-    <div className="rounded-full bg-muted px-2 py-0.5 flex items-center" title={t('Following')}>
+    <div className="flex items-center rounded-full bg-muted px-2 py-0.5" title={t('Following')}>
       <UserRoundCheck className="!size-3" />
     </div>
   )
diff --git a/src/components/FollowingFavoriteRelayList/index.tsx b/src/components/FollowingFavoriteRelayList/index.tsx
index 8838267..815af88 100644
--- a/src/components/FollowingFavoriteRelayList/index.tsx
+++ b/src/components/FollowingFavoriteRelayList/index.tsx
@@ -64,7 +64,7 @@ export default function FollowingFavoriteRelayList() {
       {showCount < relays.length && <div ref={bottomRef} />}
       {loading && <RelaySimpleInfoSkeleton className="p-4" />}
       {!loading && (
-        <div className="text-center text-muted-foreground text-sm mt-2">
+        <div className="mt-2 text-center text-sm text-muted-foreground">
           {relays.length === 0 ? t('no relays found') : t('no more relays')}
         </div>
       )}
@@ -81,7 +81,7 @@ function RelayItem({ url, users }: { url: string; users: string[] }) {
       key={url}
       relayInfo={relayInfo}
       users={users}
-      className="clickable p-4 border-b"
+      className="clickable border-b p-4"
       onClick={(e) => {
         e.stopPropagation()
         push(toRelay(url))
diff --git a/src/components/HighlightButton/index.tsx b/src/components/HighlightButton/index.tsx
index 3406be6..0603000 100644
--- a/src/components/HighlightButton/index.tsx
+++ b/src/components/HighlightButton/index.tsx
@@ -87,7 +87,7 @@ export default function HighlightButton({ onHighlight, containerRef }: Highlight
 
   return (
     <div
-      className="fixed z-50 animate-in fade-in-0 slide-in-from-bottom-4 duration-200"
+      className="fixed z-50 duration-200 animate-in fade-in-0 slide-in-from-bottom-4"
       style={{
         top: `${position.top}px`,
         left: `${position.left}px`
@@ -97,7 +97,7 @@ export default function HighlightButton({ onHighlight, containerRef }: Highlight
         ref={buttonRef}
         size="sm"
         variant="default"
-        className="shadow-lg gap-2 -translate-x-1/2"
+        className="-translate-x-1/2 gap-2 shadow-lg"
         onClick={(e) => {
           e.stopPropagation()
           onHighlight(selectedText)
diff --git a/src/components/Image/index.tsx b/src/components/Image/index.tsx
index cf912d5..2fa599e 100644
--- a/src/components/Image/index.tsx
+++ b/src/components/Image/index.tsx
@@ -79,7 +79,7 @@ export default function Image({
         <img
           src={`data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='${dim.width}' height='${dim.height}'%3E%3C/svg%3E`}
           className={cn(
-            'object-cover transition-opacity pointer-events-none w-full h-full',
+            'pointer-events-none h-full w-full object-cover transition-opacity',
             className
           )}
           alt=""
@@ -91,7 +91,7 @@ export default function Image({
             <ThumbHashPlaceholder
               thumbHash={thumbHash}
               className={cn(
-                'w-full h-full transition-opacity',
+                'h-full w-full transition-opacity',
                 isLoading ? 'opacity-100' : 'opacity-0'
               )}
             />
@@ -99,14 +99,14 @@ export default function Image({
             <BlurHashCanvas
               blurHash={blurHash}
               className={cn(
-                'w-full h-full transition-opacity',
+                'h-full w-full transition-opacity',
                 isLoading ? 'opacity-100' : 'opacity-0'
               )}
             />
           ) : (
             <Skeleton
               className={cn(
-                'w-full h-full transition-opacity',
+                'h-full w-full transition-opacity',
                 isLoading ? 'opacity-100' : 'opacity-0',
                 classNames.skeleton
               )}
@@ -124,8 +124,8 @@ export default function Image({
           onLoad={handleLoad}
           onError={handleError}
           className={cn(
-            'object-cover transition-opacity pointer-events-none w-full h-full',
-            isLoading ? 'opacity-0 absolute inset-0' : '',
+            'pointer-events-none h-full w-full object-cover transition-opacity',
+            isLoading ? 'absolute inset-0 opacity-0' : '',
             className
           )}
         />
@@ -137,12 +137,12 @@ export default function Image({
             alt={alt}
             decoding="async"
             loading="lazy"
-            className={cn('object-cover w-full h-full transition-opacity', className)}
+            className={cn('h-full w-full object-cover transition-opacity', className)}
           />
         ) : (
           <div
             className={cn(
-              'object-cover flex flex-col items-center justify-center w-full h-full bg-muted',
+              'flex h-full w-full flex-col items-center justify-center bg-muted object-cover',
               className,
               classNames.errorPlaceholder
             )}
@@ -188,7 +188,7 @@ function BlurHashCanvas({ blurHash, className = '' }: { blurHash: string; classN
       ref={canvasRef}
       width={blurHashWidth}
       height={blurHashHeight}
-      className={cn('w-full h-full object-cover rounded-xl', className)}
+      className={cn('h-full w-full rounded-xl object-cover', className)}
       style={{
         imageRendering: 'auto',
         filter: 'blur(0.5px)'
@@ -218,7 +218,7 @@ function ThumbHashPlaceholder({
 
   return (
     <div
-      className={cn('w-full h-full object-cover rounded-lg', className)}
+      className={cn('h-full w-full rounded-lg object-cover', className)}
       style={{
         backgroundImage: `url(${dataUrl})`,
         backgroundSize: 'cover',
diff --git a/src/components/ImageGallery/index.tsx b/src/components/ImageGallery/index.tsx
index 09ba59a..20efc75 100644
--- a/src/components/ImageGallery/index.tsx
+++ b/src/components/ImageGallery/index.tsx
@@ -94,7 +94,7 @@ export default function ImageGallery({
       <ImageWithLightbox
         key={i}
         image={image}
-        className="max-h-[80vh] sm:max-h-[50vh] object-contain"
+        className="max-h-[80vh] object-contain sm:max-h-[50vh]"
         classNames={{
           wrapper: cn('w-fit max-w-full border', className)
         }}
@@ -107,7 +107,7 @@ export default function ImageGallery({
     imageContent = (
       <Image
         key={0}
-        className="max-h-[80vh] sm:max-h-[50vh] object-contain"
+        className="max-h-[80vh] object-contain sm:max-h-[50vh]"
         classNames={{
           errorPlaceholder: 'aspect-square h-[30vh]',
           wrapper: 'cursor-zoom-in border'
@@ -118,7 +118,7 @@ export default function ImageGallery({
     )
   } else if (displayImages.length === 2 || displayImages.length === 4) {
     imageContent = (
-      <div className="grid grid-cols-2 gap-2 w-full">
+      <div className="grid w-full grid-cols-2 gap-2">
         {displayImages.map((image, i) => (
           <Image
             key={i}
@@ -132,7 +132,7 @@ export default function ImageGallery({
     )
   } else {
     imageContent = (
-      <div className="grid grid-cols-3 gap-2 w-full">
+      <div className="grid w-full grid-cols-3 gap-2">
         {displayImages.map((image, i) => (
           <Image
             key={i}
diff --git a/src/components/ImageWithLightbox/index.tsx b/src/components/ImageWithLightbox/index.tsx
index e983ba0..3c02e5a 100644
--- a/src/components/ImageWithLightbox/index.tsx
+++ b/src/components/ImageWithLightbox/index.tsx
@@ -44,7 +44,7 @@ export default function ImageWithLightbox({
   if (!display) {
     return (
       <div
-        className="text-primary hover:underline truncate w-fit cursor-pointer"
+        className="w-fit cursor-pointer truncate text-primary hover:underline"
         onClick={(e) => {
           e.stopPropagation()
           setDisplay(true)
diff --git a/src/components/InfoCard/index.tsx b/src/components/InfoCard/index.tsx
index a3f7d38..6f253e4 100644
--- a/src/components/InfoCard/index.tsx
+++ b/src/components/InfoCard/index.tsx
@@ -25,7 +25,7 @@ export default function InfoCard({
   variant?: 'info' | 'success' | 'alert'
 }) {
   return (
-    <div className={cn('p-3 rounded-lg text-sm [&_svg]:size-4', VARIANT_STYLES[variant])}>
+    <div className={cn('rounded-lg p-3 text-sm [&_svg]:size-4', VARIANT_STYLES[variant])}>
       <div className="flex items-center gap-2">
         {icon ?? ICON_MAP[variant]}
         <div className="font-medium">{title}</div>
diff --git a/src/components/KindFilter/index.tsx b/src/components/KindFilter/index.tsx
index 2414eff..a22fa97 100644
--- a/src/components/KindFilter/index.tsx
+++ b/src/components/KindFilter/index.tsx
@@ -95,7 +95,7 @@ export default function KindFilter({
     >
       <ListFilter size={16} />
       {isDifferentFromSaved && (
-        <div className="absolute size-2 rounded-full bg-primary left-7 top-2 ring-2 ring-background" />
+        <div className="absolute left-7 top-2 size-2 rounded-full bg-primary ring-2 ring-background" />
       )}
     </Button>
   )
@@ -109,7 +109,7 @@ export default function KindFilter({
             <div
               key={label}
               className={cn(
-                'cursor-pointer grid gap-1.5 rounded-lg border px-4 py-3',
+                'grid cursor-pointer gap-1.5 rounded-lg border px-4 py-3',
                 checked ? 'border-primary/60 bg-primary/5' : 'clickable'
               )}
               onClick={() => {
@@ -122,14 +122,14 @@ export default function KindFilter({
                 }
               }}
             >
-              <p className="leading-none font-medium">{t(label)}</p>
-              <p className="text-muted-foreground text-xs">kind {kindGroup.join(', ')}</p>
+              <p className="font-medium leading-none">{t(label)}</p>
+              <p className="text-xs text-muted-foreground">kind {kindGroup.join(', ')}</p>
             </div>
           )
         })}
       </div>
 
-      <div className="grid grid-cols-3 gap-2 mt-4">
+      <div className="mt-4 grid grid-cols-3 gap-2">
         <Button
           variant="secondary"
           onClick={() => {
@@ -155,7 +155,7 @@ export default function KindFilter({
         </Button>
       </div>
 
-      <Label className="flex items-center gap-2 cursor-pointer mt-4">
+      <Label className="mt-4 flex cursor-pointer items-center gap-2">
         <Checkbox
           id="persistent-filter"
           checked={isPersistent}
diff --git a/src/components/LoadingBar/index.tsx b/src/components/LoadingBar/index.tsx
index 667e032..ce98055 100644
--- a/src/components/LoadingBar/index.tsx
+++ b/src/components/LoadingBar/index.tsx
@@ -4,7 +4,7 @@ export function LoadingBar({ className }: { className?: string }) {
   return (
     <div className={cn('h-0.5 w-full overflow-hidden', className)}>
       <div
-        className="h-full w-full bg-gradient-to-r from-primary/40 from-25% via-primary via-50% to-primary/40 to-75% animate-shimmer"
+        className="h-full w-full animate-shimmer bg-gradient-to-r from-primary/40 from-25% via-primary via-50% to-primary/40 to-75%"
         style={{
           backgroundSize: '400% 100%'
         }}
diff --git a/src/components/LoginDialog/index.tsx b/src/components/LoginDialog/index.tsx
index 94ca698..e881837 100644
--- a/src/components/LoginDialog/index.tsx
+++ b/src/components/LoginDialog/index.tsx
@@ -17,7 +17,7 @@ export default function LoginDialog({
     return (
       <Drawer open={open} onOpenChange={setOpen}>
         <DrawerContent className="max-h-[90vh]">
-          <div className="flex flex-col p-4 gap-4 overflow-auto">
+          <div className="flex flex-col gap-4 overflow-auto p-4">
             <AccountManager close={() => setOpen(false)} />
           </div>
         </DrawerContent>
@@ -27,7 +27,7 @@ export default function LoginDialog({
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="w-[520px] max-h-[90vh] py-8 overflow-auto">
+      <DialogContent className="max-h-[90vh] w-[520px] overflow-auto py-8">
         <AccountManager close={() => setOpen(false)} />
       </DialogContent>
     </Dialog>
diff --git a/src/components/MailboxSetting/MailboxRelay.tsx b/src/components/MailboxSetting/MailboxRelay.tsx
index 8caab1e..e8f4d01 100644
--- a/src/components/MailboxSetting/MailboxRelay.tsx
+++ b/src/components/MailboxSetting/MailboxRelay.tsx
@@ -38,21 +38,21 @@ export default function MailboxRelay({
 
   return (
     <div ref={setNodeRef} style={style} className="flex items-center justify-between">
-      <div className="flex items-center gap-2 flex-1 w-0">
+      <div className="flex w-0 flex-1 items-center gap-2">
         <div
           {...attributes}
           {...listeners}
-          className="cursor-grab active:cursor-grabbing p-2 hover:bg-muted rounded touch-none"
+          className="cursor-grab touch-none rounded p-2 hover:bg-muted active:cursor-grabbing"
           style={{ touchAction: 'none' }}
         >
           <GripVertical size={16} className="text-muted-foreground" />
         </div>
         <div
-          className="flex items-center gap-2 flex-1 w-0 cursor-pointer"
+          className="flex w-0 flex-1 cursor-pointer items-center gap-2"
           onClick={() => push(toRelay(mailboxRelay.url))}
         >
           <RelayIcon url={mailboxRelay.url} />
-          <div className="truncate flex-1 w-0">{mailboxRelay.url}</div>
+          <div className="w-0 flex-1 truncate">{mailboxRelay.url}</div>
         </div>
       </div>
       <div className="flex items-center gap-4">
@@ -72,7 +72,7 @@ export default function MailboxRelay({
         <CircleX
           size={16}
           onClick={() => removeMailboxRelay(mailboxRelay.url)}
-          className="text-muted-foreground hover:text-destructive clickable"
+          className="clickable text-muted-foreground hover:text-destructive"
         />
       </div>
     </div>
diff --git a/src/components/MailboxSetting/NewMailboxRelayInput.tsx b/src/components/MailboxSetting/NewMailboxRelayInput.tsx
index 64ee56e..c638294 100644
--- a/src/components/MailboxSetting/NewMailboxRelayInput.tsx
+++ b/src/components/MailboxSetting/NewMailboxRelayInput.tsx
@@ -46,7 +46,7 @@ export default function NewMailboxRelayInput({
         />
         <Button onClick={save}>{t('Add')}</Button>
       </div>
-      {newRelayUrlError && <div className="text-destructive text-xs mt-1">{newRelayUrlError}</div>}
+      {newRelayUrlError && <div className="mt-1 text-xs text-destructive">{newRelayUrlError}</div>}
     </div>
   )
 }
diff --git a/src/components/MailboxSetting/index.tsx b/src/components/MailboxSetting/index.tsx
index 0746925..4b94e86 100644
--- a/src/components/MailboxSetting/index.tsx
+++ b/src/components/MailboxSetting/index.tsx
@@ -71,7 +71,7 @@ export default function MailboxSetting() {
 
   if (!pubkey) {
     return (
-      <div className="flex flex-col w-full items-center">
+      <div className="flex w-full flex-col items-center">
         <Button size="lg" onClick={() => checkLogin()}>
           {t('Login to set')}
         </Button>
@@ -109,7 +109,7 @@ export default function MailboxSetting() {
 
   return (
     <div className="space-y-4">
-      <div className="text-xs text-muted-foreground space-y-1">
+      <div className="space-y-1 text-xs text-muted-foreground">
         <div>{t('read relays description')}</div>
         <div>{t('write relays description')}</div>
         <div>{t('read & write relays notice')}</div>
diff --git a/src/components/MediaPlayer/index.tsx b/src/components/MediaPlayer/index.tsx
index b686da6..ec75551 100644
--- a/src/components/MediaPlayer/index.tsx
+++ b/src/components/MediaPlayer/index.tsx
@@ -72,7 +72,7 @@ export default function MediaPlayer({
   if (!mustLoad && !display) {
     return (
       <div
-        className="text-primary hover:underline truncate w-fit cursor-pointer"
+        className="w-fit cursor-pointer truncate text-primary hover:underline"
         onClick={(e) => {
           e.stopPropagation()
           setDisplay(true)
diff --git a/src/components/MuteButton/index.tsx b/src/components/MuteButton/index.tsx
index 651c3a9..696526c 100644
--- a/src/components/MuteButton/index.tsx
+++ b/src/components/MuteButton/index.tsx
@@ -91,7 +91,7 @@ export default function MuteButton({ pubkey }: { pubkey: string }) {
         <DrawerContent>
           <div className="py-2">
             <Button
-              className="w-full p-6 justify-start text-destructive text-lg gap-4 [&_svg]:size-5 focus:text-destructive"
+              className="w-full justify-start gap-4 p-6 text-lg text-destructive focus:text-destructive [&_svg]:size-5"
               variant="ghost"
               onClick={(e) => handleMute(e, true)}
               disabled={updating || changing}
@@ -99,7 +99,7 @@ export default function MuteButton({ pubkey }: { pubkey: string }) {
               {updating ? <Loader className="animate-spin" /> : t('Mute user privately')}
             </Button>
             <Button
-              className="w-full p-6 justify-start text-destructive text-lg gap-4 [&_svg]:size-5 focus:text-destructive"
+              className="w-full justify-start gap-4 p-6 text-lg text-destructive focus:text-destructive [&_svg]:size-5"
               variant="ghost"
               onClick={(e) => handleMute(e, false)}
               disabled={updating || changing}
diff --git a/src/components/NewNotesButton/index.tsx b/src/components/NewNotesButton/index.tsx
index 8638ed3..07407cd 100644
--- a/src/components/NewNotesButton/index.tsx
+++ b/src/components/NewNotesButton/index.tsx
@@ -37,7 +37,7 @@ export default function NewNotesButton({
       {newEvents.length > 0 && (
         <div
           className={cn(
-            'w-full flex justify-center z-40 pointer-events-none',
+            'pointer-events-none z-40 flex w-full justify-center',
             enableSingleColumnLayout ? 'sticky' : 'absolute'
           )}
           style={{
@@ -48,10 +48,10 @@ export default function NewNotesButton({
         >
           <Button
             onClick={onClick}
-            className="group rounded-full h-fit py-2 pl-2 pr-3 hover:bg-primary-hover pointer-events-auto"
+            className="group pointer-events-auto h-fit rounded-full py-2 pl-2 pr-3 hover:bg-primary-hover"
           >
             {pubkeys.length > 0 && (
-              <div className="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale">
+              <div className="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale">
                 {pubkeys.map((pubkey) => (
                   <SimpleUserAvatar key={pubkey} userId={pubkey} size="small" />
                 ))}
diff --git a/src/components/Nip05/index.tsx b/src/components/Nip05/index.tsx
index 9b4e4f6..7ba04d7 100644
--- a/src/components/Nip05/index.tsx
+++ b/src/components/Nip05/index.tsx
@@ -29,24 +29,24 @@ export default function Nip05({ pubkey, append }: { pubkey: string; append?: str
       onClick={(e) => e.stopPropagation()}
     >
       {nip05Name !== '_' ? (
-        <span className="text-sm text-muted-foreground truncate">@{nip05Name}</span>
+        <span className="truncate text-sm text-muted-foreground">@{nip05Name}</span>
       ) : null}
       {nip05IsVerified ? (
         <Favicon
           domain={nip05Domain}
-          className="w-3.5 h-3.5 rounded-full shrink-0"
-          fallback={<BadgeCheck className="text-primary shrink-0" />}
+          className="h-3.5 w-3.5 shrink-0 rounded-full"
+          fallback={<BadgeCheck className="shrink-0 text-primary" />}
         />
       ) : (
-        <BadgeAlert className="text-muted-foreground shrink-0" />
+        <BadgeAlert className="shrink-0 text-muted-foreground" />
       )}
       <SecondaryPageLink
         to={toNoteList({ domain: nip05Domain })}
-        className={`hover:underline truncate text-sm ${nip05IsVerified ? 'text-primary' : 'text-muted-foreground'}`}
+        className={`truncate text-sm hover:underline ${nip05IsVerified ? 'text-primary' : 'text-muted-foreground'}`}
       >
         {nip05Domain}
       </SecondaryPageLink>
-      {append && <span className="text-sm text-muted-foreground truncate">{append}</span>}
+      {append && <span className="truncate text-sm text-muted-foreground">{append}</span>}
     </div>
   )
 }
diff --git a/src/components/NotFound/index.tsx b/src/components/NotFound/index.tsx
index b51e8ef..6d1bdb2 100644
--- a/src/components/NotFound/index.tsx
+++ b/src/components/NotFound/index.tsx
@@ -4,7 +4,7 @@ export default function NotFound() {
   const { t } = useTranslation()
 
   return (
-    <div className="text-muted-foreground w-full h-full flex flex-col items-center justify-center gap-2">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 text-muted-foreground">
       <div>{t('Lost in the void')} 🌌</div>
       <div>(404)</div>
     </div>
diff --git a/src/components/Note/CommunityDefinition.tsx b/src/components/Note/CommunityDefinition.tsx
index 673aef3..062e9f7 100644
--- a/src/components/Note/CommunityDefinition.tsx
+++ b/src/components/Note/CommunityDefinition.tsx
@@ -16,11 +16,11 @@ export default function CommunityDefinition({
   const metadata = useMemo(() => getCommunityDefinitionFromEvent(event), [event])
 
   const communityNameComponent = (
-    <div className="text-xl font-semibold line-clamp-1">{metadata.name}</div>
+    <div className="line-clamp-1 text-xl font-semibold">{metadata.name}</div>
   )
 
   const communityDescriptionComponent = metadata.description && (
-    <div className="text-sm text-muted-foreground line-clamp-2">{metadata.description}</div>
+    <div className="line-clamp-2 text-sm text-muted-foreground">{metadata.description}</div>
   )
 
   return (
@@ -29,16 +29,16 @@ export default function CommunityDefinition({
         {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="aspect-square bg-foreground h-20"
+            className="aspect-square h-20 bg-foreground"
             hideIfError
           />
         )}
-        <div className="flex-1 w-0 space-y-1">
+        <div className="w-0 flex-1 space-y-1">
           {communityNameComponent}
           {communityDescriptionComponent}
         </div>
       </div>
-      <ClientSelect className="w-full mt-2" event={event} />
+      <ClientSelect className="mt-2 w-full" event={event} />
     </div>
   )
 }
diff --git a/src/components/Note/EmojiPack.tsx b/src/components/Note/EmojiPack.tsx
index 4f60b92..a7e6479 100644
--- a/src/components/Note/EmojiPack.tsx
+++ b/src/components/Note/EmojiPack.tsx
@@ -44,7 +44,7 @@ export default function EmojiPack({ event, className }: { event: Event; classNam
 
   return (
     <div className={className}>
-      <div className="flex items-center justify-between mb-2">
+      <div className="mb-2 flex items-center justify-between">
         <h3 className="text-2xl font-semibold">{title}</h3>
         {accountPubkey && (
           <Button
@@ -55,7 +55,7 @@ export default function EmojiPack({ event, className }: { event: Event; classNam
             className="shrink-0"
           >
             {updating ? (
-              <Loader className="animate-spin mr-1" />
+              <Loader className="mr-1 animate-spin" />
             ) : isCollected ? (
               <CheckIcon />
             ) : (
diff --git a/src/components/Note/FollowPack.tsx b/src/components/Note/FollowPack.tsx
index 902ab9c..f4ecda2 100644
--- a/src/components/Note/FollowPack.tsx
+++ b/src/components/Note/FollowPack.tsx
@@ -22,11 +22,11 @@ export default function FollowPack({ event, className }: { event: Event; classNa
 
   return (
     <div className={className}>
-      <div className="flex items-start gap-2 mb-2">
+      <div className="mb-2 flex items-start gap-2">
         {image && (
           <Image
             image={{ url: image, pubkey: event.pubkey }}
-            className="w-24 h-20 object-cover"
+            className="h-20 w-24 object-cover"
             classNames={{
               wrapper: 'w-24 h-20 flex-shrink-0',
               errorPlaceholder: 'w-24 h-20'
@@ -34,15 +34,15 @@ export default function FollowPack({ event, className }: { event: Event; classNa
             hideIfError
           />
         )}
-        <div className="flex-1 min-w-0">
+        <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
-            <h3 className="text-xl font-semibold mb-1 truncate">{title}</h3>
-            <span className="text-xs text-muted-foreground shrink-0">
+            <h3 className="mb-1 truncate text-xl font-semibold">{title}</h3>
+            <span className="shrink-0 text-xs text-muted-foreground">
               {t('n users', { count: pubkeys.length })}
             </span>
           </div>
           {description && (
-            <p className="text-sm text-muted-foreground line-clamp-2">{description}</p>
+            <p className="line-clamp-2 text-sm text-muted-foreground">{description}</p>
           )}
         </div>
       </div>
diff --git a/src/components/Note/GroupMetadata.tsx b/src/components/Note/GroupMetadata.tsx
index bff5d40..b19e92c 100644
--- a/src/components/Note/GroupMetadata.tsx
+++ b/src/components/Note/GroupMetadata.tsx
@@ -18,11 +18,11 @@ export default function GroupMetadata({
   const metadata = useMemo(() => getGroupMetadataFromEvent(event), [event])
 
   const groupNameComponent = (
-    <div className="text-xl font-semibold line-clamp-1">{metadata.name}</div>
+    <div className="line-clamp-1 text-xl font-semibold">{metadata.name}</div>
   )
 
   const groupAboutComponent = metadata.about && (
-    <div className="text-sm text-muted-foreground line-clamp-2">{metadata.about}</div>
+    <div className="line-clamp-2 text-sm text-muted-foreground">{metadata.about}</div>
   )
 
   return (
@@ -31,16 +31,16 @@ export default function GroupMetadata({
         {metadata.picture && autoLoadMedia && (
           <Image
             image={{ url: metadata.picture, pubkey: event.pubkey }}
-            className="aspect-square bg-foreground h-20"
+            className="aspect-square h-20 bg-foreground"
             hideIfError
           />
         )}
-        <div className="flex-1 w-0 space-y-1">
+        <div className="w-0 flex-1 space-y-1">
           {groupNameComponent}
           {groupAboutComponent}
         </div>
       </div>
-      <ClientSelect className="w-full mt-2" event={event} originalNoteId={originalNoteId} />
+      <ClientSelect className="mt-2 w-full" event={event} originalNoteId={originalNoteId} />
     </div>
   )
 }
diff --git a/src/components/Note/Highlight.tsx b/src/components/Note/Highlight.tsx
index 805c3d0..acc768a 100644
--- a/src/components/Note/Highlight.tsx
+++ b/src/components/Note/Highlight.tsx
@@ -21,12 +21,12 @@ export default function Highlight({ event, className }: { event: Event; classNam
   )
 
   return (
-    <div className={cn('text-wrap break-words whitespace-pre-wrap space-y-4', className)}>
+    <div className={cn('space-y-4 whitespace-pre-wrap text-wrap break-words', className)}>
       {comment && <Content event={createFakeEvent({ content: comment, tags: event.tags })} />}
       <div className="flex gap-4">
-        <div className="w-1 flex-shrink-0 my-1 bg-primary/60 rounded-md" />
+        <div className="my-1 w-1 flex-shrink-0 rounded-md bg-primary/60" />
         <div
-          className="italic whitespace-pre-line"
+          className="whitespace-pre-line italic"
           style={{
             overflowWrap: 'anywhere'
           }}
@@ -112,7 +112,7 @@ function HighlightSource({ event }: { event: Event }) {
         {t('From')}{' '}
         <ExternalLink
           url={sourceTag[1]}
-          className="underline italic text-muted-foreground hover:text-foreground"
+          className="italic text-muted-foreground underline hover:text-foreground"
         />
       </div>
     )
@@ -124,7 +124,7 @@ function HighlightSource({ event }: { event: Event }) {
       {pubkey && <UserAvatar userId={pubkey} size="xSmall" className="cursor-pointer" />}
       {referenceEventId && (
         <div
-          className="truncate underline pointer-events-auto cursor-pointer hover:text-foreground"
+          className="pointer-events-auto cursor-pointer truncate underline hover:text-foreground"
           onClick={(e) => {
             e.stopPropagation()
             push(toNote(referenceEvent ?? referenceEventId))
diff --git a/src/components/Note/LiveEvent.tsx b/src/components/Note/LiveEvent.tsx
index ca9fb89..cee33fa 100644
--- a/src/components/Note/LiveEvent.tsx
+++ b/src/components/Note/LiveEvent.tsx
@@ -23,14 +23,14 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
       <Badge variant="secondary">{metadata.status}</Badge>
     ))
 
-  const titleComponent = <div className="text-xl font-semibold line-clamp-1">{metadata.title}</div>
+  const titleComponent = <div className="line-clamp-1 text-xl font-semibold">{metadata.title}</div>
 
   const summaryComponent = metadata.summary && (
-    <div className="text-sm text-muted-foreground line-clamp-4">{metadata.summary}</div>
+    <div className="line-clamp-4 text-sm text-muted-foreground">{metadata.summary}</div>
   )
 
   const tagsComponent = metadata.tags.length > 0 && (
-    <div className="flex gap-1 flex-wrap">
+    <div className="flex flex-wrap gap-1">
       {metadata.tags.map((tag) => (
         <Badge key={tag} variant="secondary">
           {tag}
@@ -45,7 +45,7 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
         {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="w-full aspect-video"
+            className="aspect-video w-full"
             hideIfError
           />
         )}
@@ -54,7 +54,7 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
           {liveStatusComponent}
           {summaryComponent}
           {tagsComponent}
-          <ClientSelect className="w-full mt-2" event={event} />
+          <ClientSelect className="mt-2 w-full" event={event} />
         </div>
       </div>
     )
@@ -66,18 +66,18 @@ export default function LiveEvent({ event, className }: { event: Event; classNam
         {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="aspect-[4/3] xl:aspect-video bg-foreground h-44"
+            className="aspect-[4/3] h-44 bg-foreground xl:aspect-video"
             hideIfError
           />
         )}
-        <div className="flex-1 w-0 space-y-1">
+        <div className="w-0 flex-1 space-y-1">
           {titleComponent}
           {liveStatusComponent}
           {summaryComponent}
           {tagsComponent}
         </div>
       </div>
-      <ClientSelect className="w-full mt-2" event={event} />
+      <ClientSelect className="mt-2 w-full" event={event} />
     </div>
   )
 }
diff --git a/src/components/Note/LongFormArticle/index.tsx b/src/components/Note/LongFormArticle/index.tsx
index 0b317c9..bc47543 100644
--- a/src/components/Note/LongFormArticle/index.tsx
+++ b/src/components/Note/LongFormArticle/index.tsx
@@ -43,7 +43,7 @@ export default function LongFormArticle({
             return (
               <SecondaryPageLink
                 to={toNote(href)}
-                className="break-words underline text-foreground"
+                className="break-words text-foreground underline"
               >
                 {children}
               </SecondaryPageLink>
@@ -53,7 +53,7 @@ export default function LongFormArticle({
             return (
               <SecondaryPageLink
                 to={toProfile(href)}
-                className="break-words underline text-foreground"
+                className="break-words text-foreground underline"
               >
                 {children}
               </SecondaryPageLink>
@@ -65,7 +65,7 @@ export default function LongFormArticle({
               href={href}
               target="_blank"
               rel="noreferrer noopener"
-              className="break-words inline-flex items-baseline gap-1"
+              className="inline-flex items-baseline gap-1 break-words"
             >
               {children} <ExternalLink className="size-3" />
             </a>
@@ -73,11 +73,11 @@ export default function LongFormArticle({
         },
         p: (props) => <p {...props} className="break-words" />,
         div: (props) => <div {...props} className="break-words" />,
-        code: (props) => <code {...props} className="break-words whitespace-pre-wrap" />,
+        code: (props) => <code {...props} className="whitespace-pre-wrap break-words" />,
         img: (props) => (
           <ImageWithLightbox
             image={{ url: props.src || '', pubkey: event.pubkey }}
-            className="max-h-[80vh] sm:max-h-[50vh] object-contain my-0"
+            className="my-0 max-h-[80vh] object-contain sm:max-h-[50vh]"
             classNames={{
               wrapper: 'w-fit max-w-full'
             }}
@@ -91,7 +91,7 @@ export default function LongFormArticle({
     <>
       <div
         ref={contentRef}
-        className={`prose prose-zinc max-w-none dark:prose-invert break-words overflow-wrap-anywhere ${className || ''}`}
+        className={`overflow-wrap-anywhere prose prose-zinc max-w-none break-words dark:prose-invert ${className || ''}`}
       >
         <h1 className="break-words">{metadata.title}</h1>
         {metadata.summary && (
@@ -102,7 +102,7 @@ export default function LongFormArticle({
         {metadata.image && (
           <ImageWithLightbox
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="w-full aspect-[3/1] object-cover my-0"
+            className="my-0 aspect-[3/1] w-full object-cover"
           />
         )}
         <Markdown
@@ -118,12 +118,12 @@ export default function LongFormArticle({
           {event.content}
         </Markdown>
         {metadata.tags.length > 0 && (
-          <div className="flex gap-2 flex-wrap pb-2">
+          <div className="flex flex-wrap gap-2 pb-2">
             {metadata.tags.map((tag) => (
               <div
                 key={tag}
                 title={tag}
-                className="flex items-center rounded-full px-3 bg-muted text-muted-foreground max-w-44 cursor-pointer hover:bg-accent hover:text-accent-foreground"
+                className="flex max-w-44 cursor-pointer items-center rounded-full bg-muted px-3 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
                 onClick={(e) => {
                   e.stopPropagation()
                   push(toNoteList({ hashtag: tag, kinds: [kinds.LongFormArticle] }))
diff --git a/src/components/Note/LongFormArticlePreview.tsx b/src/components/Note/LongFormArticlePreview.tsx
index ba5a705..f209f0d 100644
--- a/src/components/Note/LongFormArticlePreview.tsx
+++ b/src/components/Note/LongFormArticlePreview.tsx
@@ -19,14 +19,14 @@ export default function LongFormArticlePreview({
   const { autoLoadMedia } = useContentPolicy()
   const metadata = useMemo(() => getLongFormArticleMetadataFromEvent(event), [event])
 
-  const titleComponent = <div className="text-xl font-semibold line-clamp-2">{metadata.title}</div>
+  const titleComponent = <div className="line-clamp-2 text-xl font-semibold">{metadata.title}</div>
 
   const tagsComponent = metadata.tags.length > 0 && (
-    <div className="flex gap-1 flex-wrap">
+    <div className="flex flex-wrap gap-1">
       {metadata.tags.map((tag) => (
         <div
           key={tag}
-          className="flex items-center rounded-full text-xs px-2.5 py-0.5 bg-muted text-muted-foreground max-w-32 cursor-pointer hover:bg-accent hover:text-accent-foreground"
+          className="flex max-w-32 cursor-pointer items-center rounded-full bg-muted px-2.5 py-0.5 text-xs text-muted-foreground hover:bg-accent hover:text-accent-foreground"
           onClick={(e) => {
             e.stopPropagation()
             push(toNoteList({ hashtag: tag, kinds: [kinds.LongFormArticle] }))
@@ -39,7 +39,7 @@ export default function LongFormArticlePreview({
   )
 
   const summaryComponent = metadata.summary && (
-    <div className="text-sm text-muted-foreground line-clamp-4">{metadata.summary}</div>
+    <div className="line-clamp-4 text-sm text-muted-foreground">{metadata.summary}</div>
   )
 
   if (isSmallScreen) {
@@ -48,7 +48,7 @@ export default function LongFormArticlePreview({
         {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="w-full aspect-video"
+            className="aspect-video w-full"
             hideIfError
           />
         )}
@@ -67,11 +67,11 @@ export default function LongFormArticlePreview({
         {metadata.image && autoLoadMedia && (
           <Image
             image={{ url: metadata.image, pubkey: event.pubkey }}
-            className="aspect-[4/3] xl:aspect-video object-cover bg-foreground h-44"
+            className="aspect-[4/3] h-44 bg-foreground object-cover xl:aspect-video"
             hideIfError
           />
         )}
-        <div className="flex-1 w-0 space-y-1">
+        <div className="w-0 flex-1 space-y-1">
           {titleComponent}
           {summaryComponent}
           {tagsComponent}
diff --git a/src/components/Note/MutedNote.tsx b/src/components/Note/MutedNote.tsx
index bf8c131..1834519 100644
--- a/src/components/Note/MutedNote.tsx
+++ b/src/components/Note/MutedNote.tsx
@@ -6,7 +6,7 @@ export default function MutedNote({ show }: { show: () => void }) {
   const { t } = useTranslation()
 
   return (
-    <div className="flex flex-col gap-2 items-center text-muted-foreground font-medium my-4">
+    <div className="my-4 flex flex-col items-center gap-2 font-medium text-muted-foreground">
       <div>{t('This user has been muted')}</div>
       <Button
         onClick={(e) => {
diff --git a/src/components/Note/NsfwNote.tsx b/src/components/Note/NsfwNote.tsx
index a0cb039..d291841 100644
--- a/src/components/Note/NsfwNote.tsx
+++ b/src/components/Note/NsfwNote.tsx
@@ -6,7 +6,7 @@ export default function NsfwNote({ show }: { show: () => void }) {
   const { t } = useTranslation()
 
   return (
-    <div className="flex flex-col gap-2 items-center text-muted-foreground font-medium my-4">
+    <div className="my-4 flex flex-col items-center gap-2 font-medium text-muted-foreground">
       <div>{t('🔞 NSFW 🔞')}</div>
       <Button
         onClick={(e) => {
diff --git a/src/components/Note/Poll.tsx b/src/components/Note/Poll.tsx
index ef66dde..43bafb1 100644
--- a/src/components/Note/Poll.tsx
+++ b/src/components/Note/Poll.tsx
@@ -170,7 +170,7 @@ export default function Poll({ event, className }: { event: Event; className?: s
                 key={option.id}
                 title={option.label}
                 className={cn(
-                  'relative w-full px-4 py-3 rounded-lg border transition-all flex items-center gap-2 overflow-hidden',
+                  'relative flex w-full items-center gap-2 overflow-hidden rounded-lg border px-4 py-3 transition-all',
                   canVote ? 'cursor-pointer' : 'cursor-not-allowed',
                   canVote &&
                     (selectedOptionIds.includes(option.id)
@@ -184,7 +184,7 @@ export default function Poll({ event, className }: { event: Event; className?: s
                 disabled={!canVote}
               >
                 {/* Content */}
-                <div className="flex items-center gap-2 flex-1 w-0 z-10">
+                <div className="z-10 flex w-0 flex-1 items-center gap-2">
                   <div className={cn('line-clamp-2 text-left', isMax ? 'font-semibold' : '')}>
                     {option.label}
                   </div>
@@ -195,7 +195,7 @@ export default function Poll({ event, className }: { event: Event; className?: s
                 {showResults && (
                   <div
                     className={cn(
-                      'text-muted-foreground shrink-0 z-10',
+                      'z-10 shrink-0 text-muted-foreground',
                       isMax ? 'font-semibold text-foreground' : ''
                     )}
                   >
@@ -217,13 +217,13 @@ export default function Poll({ event, className }: { event: Event; className?: s
         </div>
 
         {/* Results Summary */}
-        <div className="flex justify-between items-center text-sm text-muted-foreground">
+        <div className="flex items-center justify-between text-sm text-muted-foreground">
           <div>{t('{{number}} votes', { number: pollResults?.totalVotes ?? 0 })}</div>
 
           {isLoadingResults && t('Loading...')}
           {!isLoadingResults && showResults && (
             <div
-              className="hover:underline cursor-pointer"
+              className="cursor-pointer hover:underline"
               onClick={(e) => {
                 e.stopPropagation()
                 fetchResults()
diff --git a/src/components/Note/RelayReview.tsx b/src/components/Note/RelayReview.tsx
index 076a6ba..d545b8d 100644
--- a/src/components/Note/RelayReview.tsx
+++ b/src/components/Note/RelayReview.tsx
@@ -20,7 +20,7 @@ export default function RelayReview({ event, className }: { event: Event; classN
         <Stars stars={stars} />
         <span className="text-sm text-muted-foreground">→</span>
         <div
-          className="text-sm text-muted-foreground hover:text-foreground hover:underline cursor-pointer truncate"
+          className="cursor-pointer truncate text-sm text-muted-foreground hover:text-foreground hover:underline"
           onClick={(e) => {
             e.stopPropagation()
             push(toRelay(url))
diff --git a/src/components/Note/UnknownNote.tsx b/src/components/Note/UnknownNote.tsx
index 962a048..fa8e183 100644
--- a/src/components/Note/UnknownNote.tsx
+++ b/src/components/Note/UnknownNote.tsx
@@ -9,7 +9,7 @@ export default function UnknownNote({ event, className }: { event: Event; classN
   return (
     <div
       className={cn(
-        'flex flex-col gap-2 items-center text-muted-foreground font-medium my-4',
+        'my-4 flex flex-col items-center gap-2 font-medium text-muted-foreground',
         className
       )}
     >
diff --git a/src/components/Note/index.tsx b/src/components/Note/index.tsx
index 950c197..ac68284 100644
--- a/src/components/Note/index.tsx
+++ b/src/components/Note/index.tsx
@@ -122,14 +122,14 @@ export default function Note({
 
   return (
     <div className={className}>
-      <div className="flex justify-between items-start gap-2">
-        <div className="flex items-center space-x-2 flex-1">
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex flex-1 items-center space-x-2">
           <UserAvatar userId={event.pubkey} size={size === 'small' ? 'medium' : 'normal'} />
-          <div className="flex-1 w-0">
-            <div className="flex gap-2 items-center">
+          <div className="w-0 flex-1">
+            <div className="flex items-center gap-2">
               <Username
                 userId={event.pubkey}
-                className={`font-semibold flex truncate ${size === 'small' ? 'text-sm' : ''}`}
+                className={`flex truncate font-semibold ${size === 'small' ? 'text-sm' : ''}`}
                 skeletonClassName={size === 'small' ? 'h-3' : 'h-4'}
               />
               <FollowingBadge pubkey={event.pubkey} />
@@ -149,7 +149,7 @@ export default function Note({
         <div className="flex items-center">
           <TranslateButton event={event} className={size === 'normal' ? '' : 'pr-0'} />
           {size === 'normal' && (
-            <NoteOptions event={event} className="py-1 shrink-0 [&_svg]:size-5" />
+            <NoteOptions event={event} className="shrink-0 py-1 [&_svg]:size-5" />
           )}
         </div>
       </div>
diff --git a/src/components/NoteCard/MainNoteCard.tsx b/src/components/NoteCard/MainNoteCard.tsx
index 0f83de3..4ce5496 100644
--- a/src/components/NoteCard/MainNoteCard.tsx
+++ b/src/components/NoteCard/MainNoteCard.tsx
@@ -37,7 +37,7 @@ export default function MainNoteCard({
       <div
         className={cn(
           'clickable transition-all duration-200',
-          embedded ? 'p-3 sm:p-4 border rounded-xl bg-card' : 'py-3 hover:bg-accent/30'
+          embedded ? 'rounded-xl border bg-card p-3 sm:p-4' : 'py-3 hover:bg-accent/30'
         )}
       >
         <Collapsible alwaysExpand={embedded}>
diff --git a/src/components/NoteCard/PinnedButton.tsx b/src/components/NoteCard/PinnedButton.tsx
index da2a57c..6499452 100644
--- a/src/components/NoteCard/PinnedButton.tsx
+++ b/src/components/NoteCard/PinnedButton.tsx
@@ -15,7 +15,7 @@ export default function PinnedButton({ event }: { event: NostrEvent }) {
 
   if (event.pubkey !== pubkey) {
     return (
-      <div className="flex gap-1 text-sm items-center text-primary mb-1 px-4 py-0 h-fit">
+      <div className="mb-1 flex h-fit items-center gap-1 px-4 py-0 text-sm text-primary">
         <Pin size={16} className="shrink-0" />
         {t('Pinned')}
       </div>
@@ -24,7 +24,7 @@ export default function PinnedButton({ event }: { event: NostrEvent }) {
 
   return (
     <Button
-      className="flex gap-1 text-sm text-primary items-center mb-1 px-4 py-0.5 h-fit"
+      className="mb-1 flex h-fit items-center gap-1 px-4 py-0.5 text-sm text-primary"
       variant="link"
       onClick={(e) => {
         e.stopPropagation()
@@ -36,7 +36,7 @@ export default function PinnedButton({ event }: { event: NostrEvent }) {
       onMouseLeave={() => setHovered(false)}
     >
       {unpinning ? (
-        <Loader size={16} className="animate-spin shrink-0" />
+        <Loader size={16} className="shrink-0 animate-spin" />
       ) : (
         <Pin size={16} className="shrink-0" />
       )}
diff --git a/src/components/NoteCard/RepostDescription.tsx b/src/components/NoteCard/RepostDescription.tsx
index aa4e7aa..f11ef8e 100644
--- a/src/components/NoteCard/RepostDescription.tsx
+++ b/src/components/NoteCard/RepostDescription.tsx
@@ -22,19 +22,19 @@ export default function RepostDescription({
   if (!reposters?.length) return null
 
   return (
-    <div className={cn('flex gap-1 text-sm items-center text-muted-foreground mb-1', className)}>
+    <div className={cn('mb-1 flex items-center gap-1 text-sm text-muted-foreground', className)}>
       <Repeat2 size={16} className="shrink-0" />
       <Username
         key={reposters[0]}
         userId={reposters[0]}
-        className={cn('font-semibold truncate', reposters.length > 1 && 'after:content-[","]')}
+        className={cn('truncate font-semibold', reposters.length > 1 && 'after:content-[","]')}
         skeletonClassName="h-3"
       />
       {reposters.length > 1 && (
         <Username
           key={reposters[1]}
           userId={reposters[1]}
-          className={cn('font-semibold truncate', reposters.length === 3 && 'after:content-[","]')}
+          className={cn('truncate font-semibold', reposters.length === 3 && 'after:content-[","]')}
           skeletonClassName="h-3"
         />
       )}
@@ -44,7 +44,7 @@ export default function RepostDescription({
         <Username
           key={reposters[2]}
           userId={reposters[2]}
-          className={cn('font-semibold truncate')}
+          className={cn('truncate font-semibold')}
           skeletonClassName="h-3"
         />
       ) : null}
@@ -63,7 +63,7 @@ function AndXOthers({ reposters }: { reposters: string[] }) {
           {t('and {{x}} others', { x: reposters.length })}
         </span>
       </HoverCardTrigger>
-      <HoverCardContent className="w-fit max-w-60 flex flex-wrap p-2">
+      <HoverCardContent className="flex w-fit max-w-60 flex-wrap p-2">
         {reposters.map((pubkey) => (
           <div key={pubkey} className="p-2">
             <UserAvatar key={pubkey} userId={pubkey} size="small" />
diff --git a/src/components/NoteCard/index.tsx b/src/components/NoteCard/index.tsx
index e42726a..97bc2a3 100644
--- a/src/components/NoteCard/index.tsx
+++ b/src/components/NoteCard/index.tsx
@@ -56,8 +56,8 @@ export function NoteCardLoadingSkeleton({ className }: { className?: string }) {
   return (
     <div className={cn('px-4 py-3', className)}>
       <div className="flex items-center space-x-2">
-        <Skeleton className="w-10 h-10 rounded-full" />
-        <div className={`flex-1 w-0`}>
+        <Skeleton className="h-10 w-10 rounded-full" />
+        <div className={`w-0 flex-1`}>
           <div className="py-1">
             <Skeleton className="h-4 w-16" />
           </div>
@@ -68,10 +68,10 @@ export function NoteCardLoadingSkeleton({ className }: { className?: string }) {
       </div>
       <div className="pt-2">
         <div className="my-1">
-          <Skeleton className="w-full h-4 my-1 mt-2" />
+          <Skeleton className="my-1 mt-2 h-4 w-full" />
         </div>
         <div className="my-1">
-          <Skeleton className="w-2/3 h-4 my-1" />
+          <Skeleton className="my-1 h-4 w-2/3" />
         </div>
       </div>
     </div>
diff --git a/src/components/NoteInteractions/Tabs.tsx b/src/components/NoteInteractions/Tabs.tsx
index 1c4ba58..0a2e447 100644
--- a/src/components/NoteInteractions/Tabs.tsx
+++ b/src/components/NoteInteractions/Tabs.tsx
@@ -39,13 +39,13 @@ export function Tabs({
 
   return (
     <div className="w-fit">
-      <div className="flex relative">
+      <div className="relative flex">
         {TABS.map((tab, index) => (
           <div
             key={tab.value}
             ref={(el) => (tabRefs.current[index] = el)}
             className={cn(
-              `text-center px-4 py-2 font-semibold clickable cursor-pointer rounded-lg`,
+              `clickable cursor-pointer rounded-lg px-4 py-2 text-center font-semibold`,
               selectedTab === tab.value ? '' : 'text-muted-foreground'
             )}
             onClick={() => onTabChange(tab.value)}
@@ -54,7 +54,7 @@ export function Tabs({
           </div>
         ))}
         <div
-          className="absolute bottom-0 h-1 bg-primary rounded-full transition-all duration-500"
+          className="absolute bottom-0 h-1 rounded-full bg-primary transition-all duration-500"
           style={{
             width: `${indicatorStyle.width}px`,
             left: `${indicatorStyle.left}px`
diff --git a/src/components/NoteInteractions/index.tsx b/src/components/NoteInteractions/index.tsx
index 1a02107..824da72 100644
--- a/src/components/NoteInteractions/index.tsx
+++ b/src/components/NoteInteractions/index.tsx
@@ -38,9 +38,9 @@ export default function NoteInteractions({ event }: { event: Event }) {
   return (
     <>
       <div className="flex items-center justify-between">
-        <ScrollArea className="flex-1 w-0">
+        <ScrollArea className="w-0 flex-1">
           <Tabs selectedTab={type} onTabChange={setType} />
-          <ScrollBar orientation="horizontal" className="opacity-0 pointer-events-none" />
+          <ScrollBar orientation="horizontal" className="pointer-events-none opacity-0" />
         </ScrollArea>
         <Separator orientation="vertical" className="h-6" />
         <TrustScoreFilter filterId={SPECIAL_TRUST_SCORE_FILTER_ID.INTERACTIONS} />
diff --git a/src/components/NoteList/index.tsx b/src/components/NoteList/index.tsx
index 2e09663..680c7fd 100644
--- a/src/components/NoteList/index.tsx
+++ b/src/components/NoteList/index.tsx
@@ -492,12 +492,12 @@ const NoteList = forwardRef<
         {shouldShowLoadingIndicator || filtering || initialLoading ? (
           <NoteCardLoadingSkeleton />
         ) : events.length ? (
-          <div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
+          <div className="mt-2 text-center text-sm text-muted-foreground">{t('no more notes')}</div>
         ) : (
-          <div className="flex flex-col items-center justify-center w-full mt-8 gap-4">
+          <div className="mt-8 flex w-full flex-col items-center justify-center gap-4">
             <div className="text-center text-muted-foreground">
               <div className="text-lg font-medium">{t('No notes found')}</div>
-              <div className="text-sm mt-1">{t('Try again later or check your connection')}</div>
+              <div className="mt-1 text-sm">{t('Try again later or check your connection')}</div>
             </div>
             <Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
               {t('Reload')}
diff --git a/src/components/NoteOptions/MobileMenu.tsx b/src/components/NoteOptions/MobileMenu.tsx
index a2e66ce..852793e 100644
--- a/src/components/NoteOptions/MobileMenu.tsx
+++ b/src/components/NoteOptions/MobileMenu.tsx
@@ -40,7 +40,7 @@ export function MobileMenu({
                   <Button
                     key={index}
                     onClick={action.onClick}
-                    className={`w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5 ${action.className || ''}`}
+                    className={`w-full justify-start gap-4 p-6 text-lg [&_svg]:size-5 ${action.className || ''}`}
                     variant="ghost"
                   >
                     <Icon />
@@ -52,18 +52,18 @@ export function MobileMenu({
               <>
                 <Button
                   onClick={goBackToMainMenu}
-                  className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5 mb-2"
+                  className="mb-2 w-full justify-start gap-4 p-6 text-lg [&_svg]:size-5"
                   variant="ghost"
                 >
                   <ArrowLeft />
                   {subMenuTitle}
                 </Button>
-                <div className="border-t border-border mb-2" />
+                <div className="mb-2 border-t border-border" />
                 {activeSubMenu.map((subAction, index) => (
                   <Button
                     key={index}
                     onClick={subAction.onClick}
-                    className={`w-full p-6 justify-start text-lg gap-4 ${subAction.className || ''}`}
+                    className={`w-full justify-start gap-4 p-6 text-lg ${subAction.className || ''}`}
                     variant="ghost"
                   >
                     {subAction.label}
diff --git a/src/components/NoteOptions/RawEventDialog.tsx b/src/components/NoteOptions/RawEventDialog.tsx
index 0f31900..55faf6c 100644
--- a/src/components/NoteOptions/RawEventDialog.tsx
+++ b/src/components/NoteOptions/RawEventDialog.tsx
@@ -25,7 +25,7 @@ export default function RawEventDialog({
           <DialogDescription className="hidden" />
         </DialogHeader>
         <ScrollArea className="h-full">
-          <pre className="text-sm text-muted-foreground select-text">
+          <pre className="select-text text-sm text-muted-foreground">
             {JSON.stringify(event, null, 2)}
           </pre>
           <ScrollBar orientation="horizontal" />
diff --git a/src/components/NoteOptions/index.tsx b/src/components/NoteOptions/index.tsx
index eb4b7a6..cece2cd 100644
--- a/src/components/NoteOptions/index.tsx
+++ b/src/components/NoteOptions/index.tsx
@@ -43,7 +43,7 @@ export default function NoteOptions({ event, className }: { event: Event; classN
 
   const trigger = (
     <button
-      className="flex items-center text-muted-foreground hover:text-foreground pl-2 h-full"
+      className="flex h-full items-center pl-2 text-muted-foreground hover:text-foreground"
       onClick={() => setIsDrawerOpen(true)}
     >
       <Ellipsis />
diff --git a/src/components/NoteOptions/useMenuActions.tsx b/src/components/NoteOptions/useMenuActions.tsx
index 8ad095f..9ca82ca 100644
--- a/src/components/NoteOptions/useMenuActions.tsx
+++ b/src/components/NoteOptions/useMenuActions.tsx
@@ -106,7 +106,7 @@ export function useMenuActions({
         ...relaySets
           .filter((set) => set.relayUrls.length)
           .map((set, index) => ({
-            label: <div className="text-left truncate">{set.name}</div>,
+            label: <div className="truncate text-left">{set.name}</div>,
             onClick: async () => {
               closeDrawer()
               const promise = client.publishEvent(set.relayUrls, event)
@@ -132,7 +132,7 @@ export function useMenuActions({
       items.push(
         ...relayUrls.map((relay, index) => ({
           label: (
-            <div className="flex items-center gap-2 w-full">
+            <div className="flex w-full items-center gap-2">
               <RelayIcon url={relay} />
               <div className="flex-1 truncate text-left">{simplifyUrl(relay)}</div>
             </div>
diff --git a/src/components/NotificationList/NotificationItem/Notification.tsx b/src/components/NotificationList/NotificationItem/Notification.tsx
index 0545de3..777d618 100644
--- a/src/components/NotificationList/NotificationItem/Notification.tsx
+++ b/src/components/NotificationList/NotificationItem/Notification.tsx
@@ -59,10 +59,10 @@ export default function Notification({
   if (notificationListStyle === NOTIFICATION_LIST_STYLE.COMPACT) {
     return (
       <div
-        className="flex items-center justify-between cursor-pointer py-2 px-4"
+        className="flex cursor-pointer items-center justify-between px-4 py-2"
         onClick={handleClick}
       >
-        <div className="flex gap-2 items-center flex-1 w-0">
+        <div className="flex w-0 flex-1 items-center gap-2">
           <div className="relative">
             <UserAvatar userId={sender} size="small" />
             <TrustScoreBadge
@@ -78,14 +78,14 @@ export default function Notification({
           {targetEvent && (
             <ContentPreview
               className={cn(
-                'truncate flex-1 w-0',
+                'w-0 flex-1 truncate',
                 unread ? 'font-semibold' : 'text-muted-foreground'
               )}
               event={targetEvent}
             />
           )}
         </div>
-        <div className="text-muted-foreground shrink-0">
+        <div className="shrink-0 text-muted-foreground">
           <FormattedTimestamp timestamp={sentAt} short />
         </div>
       </div>
@@ -94,27 +94,27 @@ export default function Notification({
 
   return (
     <div
-      className="clickable flex items-start gap-2 cursor-pointer py-2 px-4 border-b"
+      className="clickable flex cursor-pointer items-start gap-2 border-b px-4 py-2"
       onClick={handleClick}
     >
-      <div className="flex gap-2 items-center mt-1.5">
+      <div className="mt-1.5 flex items-center gap-2">
         {icon}
         <UserAvatar userId={sender} size="medium" />
       </div>
-      <div className="flex-1 w-0">
+      <div className="w-0 flex-1">
         <div className="flex items-center justify-between gap-1">
-          <div className="flex gap-1 items-center">
+          <div className="flex items-center gap-1">
             <Username
               userId={sender}
-              className="flex-1 max-w-fit truncate font-semibold"
+              className="max-w-fit flex-1 truncate font-semibold"
               skeletonClassName="h-4"
             />
             <TrustScoreBadge pubkey={sender} />
-            <div className="shrink-0 text-muted-foreground text-sm">{description}</div>
+            <div className="shrink-0 text-sm text-muted-foreground">{description}</div>
           </div>
           {unread && (
             <button
-              className="m-0.5 size-3 bg-primary rounded-full shrink-0 transition-all hover:ring-4 hover:ring-primary/20"
+              className="m-0.5 size-3 shrink-0 rounded-full bg-primary transition-all hover:ring-4 hover:ring-primary/20"
               title={t('Mark as read')}
               onClick={(e) => {
                 e.stopPropagation()
@@ -130,7 +130,7 @@ export default function Notification({
             event={targetEvent}
           />
         )}
-        <FormattedTimestamp timestamp={sentAt} className="shrink-0 text-muted-foreground text-sm" />
+        <FormattedTimestamp timestamp={sentAt} className="shrink-0 text-sm text-muted-foreground" />
         {showStats && targetEvent && <StuffStats stuff={targetEvent} className="mt-1" />}
       </div>
     </div>
@@ -142,28 +142,28 @@ export function NotificationSkeleton() {
 
   if (notificationListStyle === NOTIFICATION_LIST_STYLE.COMPACT) {
     return (
-      <div className="flex gap-2 items-center h-11 py-2 px-4">
-        <Skeleton className="w-7 h-7 rounded-full" />
-        <Skeleton className="h-6 flex-1 w-0" />
+      <div className="flex h-11 items-center gap-2 px-4 py-2">
+        <Skeleton className="h-7 w-7 rounded-full" />
+        <Skeleton className="h-6 w-0 flex-1" />
       </div>
     )
   }
 
   return (
-    <div className="flex items-start gap-2 cursor-pointer py-2 px-4">
-      <div className="flex gap-2 items-center mt-1.5">
-        <Skeleton className="w-6 h-6" />
-        <Skeleton className="w-9 h-9 rounded-full" />
+    <div className="flex cursor-pointer items-start gap-2 px-4 py-2">
+      <div className="mt-1.5 flex items-center gap-2">
+        <Skeleton className="h-6 w-6" />
+        <Skeleton className="h-9 w-9 rounded-full" />
       </div>
-      <div className="flex-1 w-0">
+      <div className="w-0 flex-1">
         <div className="py-1">
-          <Skeleton className="w-16 h-4" />
+          <Skeleton className="h-4 w-16" />
         </div>
         <div className="py-1">
-          <Skeleton className="w-full h-4" />
+          <Skeleton className="h-4 w-full" />
         </div>
         <div className="py-1">
-          <Skeleton className="w-12 h-4" />
+          <Skeleton className="h-4 w-12" />
         </div>
       </div>
     </div>
diff --git a/src/components/NotificationList/NotificationItem/ReactionNotification.tsx b/src/components/NotificationList/NotificationItem/ReactionNotification.tsx
index f385b38..9eb1cd3 100644
--- a/src/components/NotificationList/NotificationItem/ReactionNotification.tsx
+++ b/src/components/NotificationList/NotificationItem/ReactionNotification.tsx
@@ -42,7 +42,7 @@ export function ReactionNotification({
           <Image
             image={{ url: emojiUrl, pubkey: notification.pubkey }}
             alt={emojiName}
-            className="w-6 h-6"
+            className="h-6 w-6"
             classNames={{ errorPlaceholder: 'bg-transparent', wrapper: 'rounded-md' }}
             errorPlaceholder={<Heart size={24} className="text-red-400" />}
           />
@@ -65,7 +65,7 @@ export function ReactionNotification({
   return (
     <Notification
       notificationId={notification.id}
-      icon={<div className="text-xl min-w-6 text-center">{reaction}</div>}
+      icon={<div className="min-w-6 text-center text-xl">{reaction}</div>}
       sender={notification.pubkey}
       sentAt={notification.created_at}
       targetEvent={event}
diff --git a/src/components/NotificationList/NotificationItem/ZapNotification.tsx b/src/components/NotificationList/NotificationItem/ZapNotification.tsx
index 0bb6fc8..d5aa747 100644
--- a/src/components/NotificationList/NotificationItem/ZapNotification.tsx
+++ b/src/components/NotificationList/NotificationItem/ZapNotification.tsx
@@ -26,12 +26,12 @@ export function ZapNotification({
   return (
     <Notification
       notificationId={notification.id}
-      icon={<Zap size={24} className="text-yellow-400 shrink-0" />}
+      icon={<Zap size={24} className="shrink-0 text-yellow-400" />}
       sender={senderPubkey}
       sentAt={notification.created_at}
       targetEvent={event}
       middle={
-        <div className="font-semibold text-yellow-400 truncate">
+        <div className="truncate font-semibold text-yellow-400">
           {formatAmount(amount)} {t('sats')} {comment}
         </div>
       }
diff --git a/src/components/NpubQrCode/index.tsx b/src/components/NpubQrCode/index.tsx
index ff7f495..4011d86 100644
--- a/src/components/NpubQrCode/index.tsx
+++ b/src/components/NpubQrCode/index.tsx
@@ -16,17 +16,17 @@ export default function NpubQrCode({ pubkey }: { pubkey: string }) {
   if (!npub) return null
 
   const trigger = (
-    <div className="bg-muted rounded-full h-5 w-5 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground">
+    <div className="flex h-5 w-5 flex-col items-center justify-center rounded-full bg-muted text-muted-foreground hover:text-foreground">
       <QrCodeIcon size={14} />
     </div>
   )
 
   const content = (
-    <div className="w-full flex flex-col items-center gap-4 p-8">
-      <div className="flex items-center w-full gap-2 pointer-events-none px-1">
+    <div className="flex w-full flex-col items-center gap-4 p-8">
+      <div className="pointer-events-none flex w-full items-center gap-2 px-1">
         <UserAvatar size="big" userId={pubkey} />
-        <div className="flex-1 w-0">
-          <Username userId={pubkey} className="text-2xl font-semibold truncate" />
+        <div className="w-0 flex-1">
+          <Username userId={pubkey} className="truncate text-2xl font-semibold" />
           <Nip05 pubkey={pubkey} />
         </div>
       </div>
@@ -49,7 +49,7 @@ export default function NpubQrCode({ pubkey }: { pubkey: string }) {
   return (
     <Dialog>
       <DialogTrigger>{trigger}</DialogTrigger>
-      <DialogContent className="w-80 p-0 m-0" onOpenAutoFocus={(e) => e.preventDefault()}>
+      <DialogContent className="m-0 w-80 p-0" onOpenAutoFocus={(e) => e.preventDefault()}>
         {content}
       </DialogContent>
     </Dialog>
diff --git a/src/components/OthersRelayList/index.tsx b/src/components/OthersRelayList/index.tsx
index 55d1519..155c045 100644
--- a/src/components/OthersRelayList/index.tsx
+++ b/src/components/OthersRelayList/index.tsx
@@ -33,7 +33,7 @@ function RelayItem({ relay }: { relay: TMailboxRelay }) {
   const { url, scope } = relay
 
   return (
-    <div className="p-4 rounded-lg border clickable space-y-1" onClick={() => push(toRelay(url))}>
+    <div className="clickable space-y-1 rounded-lg border p-4" onClick={() => push(toRelay(url))}>
       <RelaySimpleInfo relayInfo={relayInfo} />
       <div className="flex gap-2">
         {['both', 'read'].includes(scope) && (
diff --git a/src/components/ParentNotePreview/index.tsx b/src/components/ParentNotePreview/index.tsx
index 3324de9..2466cef 100644
--- a/src/components/ParentNotePreview/index.tsx
+++ b/src/components/ParentNotePreview/index.tsx
@@ -23,7 +23,7 @@ export default function ParentNotePreview({
     return (
       <div
         className={cn(
-          'flex gap-1 items-center text-sm rounded-full px-2 bg-muted w-fit max-w-full text-muted-foreground hover:text-foreground cursor-pointer',
+          'flex w-fit max-w-full cursor-pointer items-center gap-1 rounded-full bg-muted px-2 text-sm text-muted-foreground hover:text-foreground',
           className
         )}
         onClick={onClick}
@@ -42,13 +42,13 @@ export default function ParentNotePreview({
     return (
       <div
         className={cn(
-          'flex gap-1 items-center text-sm rounded-full px-2 bg-muted w-44 max-w-full text-muted-foreground',
+          'flex w-44 max-w-full items-center gap-1 rounded-full bg-muted px-2 text-sm text-muted-foreground',
           className
         )}
       >
         <div className="shrink-0">{t('reply to')}</div>
-        <Skeleton className="w-4 h-4 rounded-full" />
-        <div className="py-1 flex-1">
+        <Skeleton className="h-4 w-4 rounded-full" />
+        <div className="flex-1 py-1">
           <Skeleton className="h-3" />
         </div>
       </div>
@@ -58,8 +58,8 @@ export default function ParentNotePreview({
   return (
     <div
       className={cn(
-        'flex gap-1 items-center text-sm rounded-full px-2 bg-muted w-fit max-w-full text-muted-foreground',
-        event && 'hover:text-foreground cursor-pointer',
+        'flex w-fit max-w-full items-center gap-1 rounded-full bg-muted px-2 text-sm text-muted-foreground',
+        event && 'cursor-pointer hover:text-foreground',
         className
       )}
       onClick={event ? onClick : undefined}
diff --git a/src/components/PasswordInputDialog/index.tsx b/src/components/PasswordInputDialog/index.tsx
index 6313658..534065e 100644
--- a/src/components/PasswordInputDialog/index.tsx
+++ b/src/components/PasswordInputDialog/index.tsx
@@ -67,7 +67,7 @@ export default function PasswordInputDialog({
           onKeyDown={handleKeyDown}
           placeholder={t('Password')}
         />
-        <DialogFooter className="w-full flex flex-wrap gap-2">
+        <DialogFooter className="flex w-full flex-wrap gap-2">
           <Button variant="outline" onClick={onCancel} className="flex-1">
             {t('Cancel')}
           </Button>
diff --git a/src/components/PostEditor/Mentions.tsx b/src/components/PostEditor/Mentions.tsx
index 27f1d58..2a72acc 100644
--- a/src/components/PostEditor/Mentions.tsx
+++ b/src/components/PostEditor/Mentions.tsx
@@ -89,7 +89,7 @@ export default function Mentions({
           <SimpleUserAvatar userId={pubkey} size="small" />
           <SimpleUsername
             userId={pubkey}
-            className="font-semibold text-sm truncate"
+            className="truncate text-sm font-semibold"
             skeletonClassName="h-3"
           />
         </MenuItem>
@@ -137,7 +137,7 @@ export default function Mentions({
           {potentialMentions.length > 0 && `(${mentions.length}/${potentialMentions.length})`}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent align="start" className="max-w-96 max-h-[50vh]" showScrollButtons>
+      <DropdownMenuContent align="start" className="max-h-[50vh] max-w-96" showScrollButtons>
         {items}
       </DropdownMenuContent>
     </DropdownMenu>
@@ -165,11 +165,11 @@ function MenuItem({
           onCheckedChange(!checked)
         }}
         className={cn(
-          'flex items-center gap-2 px-4 py-3 clickable',
-          disabled ? 'opacity-50 pointer-events-none' : ''
+          'clickable flex items-center gap-2 px-4 py-3',
+          disabled ? 'pointer-events-none opacity-50' : ''
         )}
       >
-        <div className="flex items-center justify-center size-4 shrink-0">
+        <div className="flex size-4 shrink-0 items-center justify-center">
           {checked && <Check className="size-4" />}
         </div>
         {children}
diff --git a/src/components/PostEditor/PollEditor.tsx b/src/components/PostEditor/PollEditor.tsx
index 0161af0..f820aa7 100644
--- a/src/components/PostEditor/PollEditor.tsx
+++ b/src/components/PostEditor/PollEditor.tsx
@@ -58,7 +58,7 @@ export default function PollEditor({
   }
 
   return (
-    <div className="space-y-4 border rounded-lg p-3">
+    <div className="space-y-4 rounded-lg border p-3">
       <div className="space-y-2">
         {options.map((option, index) => (
           <div key={index} className="flex gap-2">
diff --git a/src/components/PostEditor/PostContent.tsx b/src/components/PostEditor/PostContent.tsx
index e4bf863..42c7635 100644
--- a/src/components/PostEditor/PostContent.tsx
+++ b/src/components/PostEditor/PostContent.tsx
@@ -197,11 +197,11 @@ export default function PostContent({
     <div className="space-y-2">
       {parentEvent && (
         <ScrollArea className="flex max-h-48 flex-col overflow-y-auto rounded-lg border bg-muted/40">
-          <div className="p-2 sm:p-3 pointer-events-none">
+          <div className="pointer-events-none p-2 sm:p-3">
             {highlightedText ? (
               <div className="flex gap-4">
-                <div className="w-1 flex-shrink-0 my-1 bg-primary/60 rounded-md" />
-                <div className="italic whitespace-pre-line">{highlightedText}</div>
+                <div className="my-1 w-1 flex-shrink-0 rounded-md bg-primary/60" />
+                <div className="whitespace-pre-line italic">{highlightedText}</div>
               </div>
             ) : (
               <Note size="small" event={parentEvent} hideParentNotePreview />
@@ -233,10 +233,10 @@ export default function PostContent({
         uploadProgresses.map(({ file, progress, cancel }, index) => (
           <div key={`${file.name}-${index}`} className="mt-2 flex items-end gap-2">
             <div className="min-w-0 flex-1">
-              <div className="truncate text-xs text-muted-foreground mb-1">
+              <div className="mb-1 truncate text-xs text-muted-foreground">
                 {file.name ?? t('Uploading...')}
               </div>
-              <div className="h-0.5 w-full rounded-full bg-muted overflow-hidden">
+              <div className="h-0.5 w-full overflow-hidden rounded-full bg-muted">
                 <div
                   className="h-full bg-primary transition-[width] duration-200 ease-out"
                   style={{ width: `${progress}%` }}
@@ -265,7 +265,7 @@ export default function PostContent({
         />
       )}
       <div className="flex items-center justify-between">
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           <Uploader
             onUploadSuccess={({ url }) => {
               textareaRef.current?.appendText(url, true)
@@ -314,14 +314,14 @@ export default function PostContent({
             <Settings />
           </Button>
         </div>
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           <Mentions
             content={text}
             parentEvent={parentEvent}
             mentions={mentions}
             setMentions={setMentions}
           />
-          <div className="flex gap-2 items-center max-sm:hidden">
+          <div className="flex items-center gap-2 max-sm:hidden">
             <Button
               variant="secondary"
               onClick={(e) => {
@@ -348,7 +348,7 @@ export default function PostContent({
         minPow={minPow}
         setMinPow={setMinPow}
       />
-      <div className="flex gap-2 items-center justify-around sm:hidden">
+      <div className="flex items-center justify-around gap-2 sm:hidden">
         <Button
           className="w-full"
           variant="secondary"
diff --git a/src/components/PostEditor/PostOptions.tsx b/src/components/PostEditor/PostOptions.tsx
index d3dcd78..4b3528d 100644
--- a/src/components/PostEditor/PostOptions.tsx
+++ b/src/components/PostEditor/PostOptions.tsx
@@ -53,7 +53,7 @@ export default function PostOptions({
             disabled={posting}
           />
         </div>
-        <div className="text-muted-foreground text-xs">
+        <div className="text-xs text-muted-foreground">
           {t('Show others this was sent via Jumble')}
         </div>
       </div>
diff --git a/src/components/PostEditor/PostRelaySelector.tsx b/src/components/PostEditor/PostRelaySelector.tsx
index 820abde..d628c6c 100644
--- a/src/components/PostEditor/PostRelaySelector.tsx
+++ b/src/components/PostEditor/PostRelaySelector.tsx
@@ -211,7 +211,7 @@ export default function PostRelaySelector({
           <Label>{t('Post to')}</Label>
           <Button
             variant="outline"
-            className="px-2 flex-1 max-w-fit justify-start"
+            className="max-w-fit flex-1 justify-start px-2"
             onClick={() => setIsDrawerOpen(true)}
           >
             <div className="truncate">{description}</div>
@@ -237,12 +237,12 @@ export default function PostRelaySelector({
       <div className="flex items-center gap-2">
         <Label>{t('Post to')}</Label>
         <DropdownMenuTrigger asChild>
-          <Button variant="outline" className="px-2 flex-1 max-w-fit justify-start">
+          <Button variant="outline" className="max-w-fit flex-1 justify-start px-2">
             <div className="truncate">{description}</div>
           </Button>
         </DropdownMenuTrigger>
       </div>
-      <DropdownMenuContent align="start" className="max-w-96 max-h-[50vh]" showScrollButtons>
+      <DropdownMenuContent align="start" className="max-h-[50vh] max-w-96" showScrollButtons>
         {content}
       </DropdownMenuContent>
     </DropdownMenu>
@@ -272,9 +272,9 @@ function MenuItem({
     return (
       <div
         onClick={() => onCheckedChange(!checked)}
-        className="flex items-center gap-2 px-4 py-3 clickable"
+        className="clickable flex items-center gap-2 px-4 py-3"
       >
-        <div className="flex items-center justify-center size-4 shrink-0">
+        <div className="flex size-4 shrink-0 items-center justify-center">
           {checked && <Check className="size-4" />}
         </div>
         {children}
diff --git a/src/components/PostEditor/PostTextarea/Emoji/EmojiList.tsx b/src/components/PostEditor/PostTextarea/Emoji/EmojiList.tsx
index 8670baf..cf2f6bd 100644
--- a/src/components/PostEditor/PostTextarea/Emoji/EmojiList.tsx
+++ b/src/components/PostEditor/PostTextarea/Emoji/EmojiList.tsx
@@ -69,7 +69,7 @@ export const EmojiList = forwardRef<EmojiListHandler, EmojiListProps>((props, re
 
   return (
     <ScrollArea
-      className="border rounded-lg bg-background z-50 pointer-events-auto flex flex-col max-h-80 overflow-y-auto"
+      className="pointer-events-auto z-50 flex max-h-80 flex-col overflow-y-auto rounded-lg border bg-background"
       onWheel={(e) => e.stopPropagation()}
       onTouchMove={(e) => e.stopPropagation()}
     >
@@ -110,13 +110,13 @@ function EmojiListItem({
   return (
     <button
       className={cn(
-        'cursor-pointer w-full p-1 rounded-lg transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+        'w-full cursor-pointer rounded-lg p-1 transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
         selectedIndex === index && 'bg-accent text-accent-foreground'
       )}
       onClick={() => selectItem(index)}
       onMouseEnter={() => setSelectedIndex(index)}
     >
-      <div className="flex gap-2 items-center truncate pointer-events-none">
+      <div className="pointer-events-none flex items-center gap-2 truncate">
         <Emoji
           emoji={emoji}
           classNames={{
diff --git a/src/components/PostEditor/PostTextarea/Mention/MentionList.tsx b/src/components/PostEditor/PostTextarea/Mention/MentionList.tsx
index b0ed0d9..468ad28 100644
--- a/src/components/PostEditor/PostTextarea/Mention/MentionList.tsx
+++ b/src/components/PostEditor/PostTextarea/Mention/MentionList.tsx
@@ -71,25 +71,25 @@ const MentionList = forwardRef<MentionListHandle, MentionListProps>((props, ref)
 
   return (
     <ScrollArea
-      className="border rounded-lg bg-background z-50 pointer-events-auto flex flex-col max-h-80 overflow-y-auto"
+      className="pointer-events-auto z-50 flex max-h-80 flex-col overflow-y-auto rounded-lg border bg-background"
       onWheel={(e) => e.stopPropagation()}
       onTouchMove={(e) => e.stopPropagation()}
     >
       {props.items.map((item, index) => (
         <button
           className={cn(
-            'cursor-pointer text-start items-center m-1 p-2 outline-none transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 rounded-md',
+            'm-1 cursor-pointer items-center rounded-md p-2 text-start outline-none transition-colors [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
             selectedIndex === index && 'bg-accent text-accent-foreground'
           )}
           key={item}
           onClick={() => selectItem(index)}
           onMouseEnter={() => setSelectedIndex(index)}
         >
-          <div className="flex gap-2 w-80 items-center truncate pointer-events-none">
+          <div className="pointer-events-none flex w-80 items-center gap-2 truncate">
             <SimpleUserAvatar userId={item} />
-            <div className="flex-1 w-0">
+            <div className="w-0 flex-1">
               <div className="flex items-center gap-2">
-                <SimpleUsername userId={item} className="font-semibold truncate" />
+                <SimpleUsername userId={item} className="truncate font-semibold" />
                 <FollowingBadge userId={item} />
               </div>
               <Nip05 pubkey={userIdToPubkey(item)} />
diff --git a/src/components/PostEditor/PostTextarea/Mention/MentionNode.tsx b/src/components/PostEditor/PostTextarea/Mention/MentionNode.tsx
index d5b3e60..b8a10b6 100644
--- a/src/components/PostEditor/PostTextarea/Mention/MentionNode.tsx
+++ b/src/components/PostEditor/PostTextarea/Mention/MentionNode.tsx
@@ -9,7 +9,7 @@ export default function MentionNode(props: NodeViewRendererProps & { selected: b
 
   return (
     <NodeViewWrapper
-      className={cn('inline text-primary', props.selected ? 'bg-primary/20 rounded-sm' : '')}
+      className={cn('inline text-primary', props.selected ? 'rounded-sm bg-primary/20' : '')}
     >
       {'@'}
       {profile ? (
diff --git a/src/components/PostEditor/Title.tsx b/src/components/PostEditor/Title.tsx
index e6aa971..54438b0 100644
--- a/src/components/PostEditor/Title.tsx
+++ b/src/components/PostEditor/Title.tsx
@@ -5,10 +5,10 @@ export default function Title({ parentStuff }: { parentStuff?: Event | string })
   const { t } = useTranslation()
 
   return parentStuff ? (
-    <div className="flex gap-2 items-center w-full">
+    <div className="flex w-full items-center gap-2">
       <div className="shrink-0">{t('Reply to')}</div>
       {typeof parentStuff === 'string' && (
-        <div className="text-primary truncate">{parentStuff}</div>
+        <div className="truncate text-primary">{parentStuff}</div>
       )}
     </div>
   ) : (
diff --git a/src/components/PostEditor/index.tsx b/src/components/PostEditor/index.tsx
index 3c3c29b..4d8b57e 100644
--- a/src/components/PostEditor/index.tsx
+++ b/src/components/PostEditor/index.tsx
@@ -55,7 +55,7 @@ export default function PostEditor({
     return (
       <Sheet open={open} onOpenChange={setOpen}>
         <SheetContent
-          className="h-full w-full p-0 border-none"
+          className="h-full w-full border-none p-0"
           side="bottom"
           hideClose
           onEscapeKeyDown={(e) => {
@@ -65,7 +65,7 @@ export default function PostEditor({
             }
           }}
         >
-          <ScrollArea className="px-4 h-full max-h-screen">
+          <ScrollArea className="h-full max-h-screen px-4">
             <div className="space-y-4 px-2 py-6">
               <SheetHeader>
                 <SheetTitle className="text-start">
@@ -84,7 +84,7 @@ export default function PostEditor({
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent
-        className="p-0 max-w-2xl"
+        className="max-w-2xl p-0"
         withoutClose
         onEscapeKeyDown={(e) => {
           if (postEditor.isSuggestionPopupOpen) {
@@ -93,7 +93,7 @@ export default function PostEditor({
           }
         }}
       >
-        <ScrollArea className="px-4 h-full max-h-screen">
+        <ScrollArea className="h-full max-h-screen px-4">
           <div className="space-y-4 px-2 py-6">
             <DialogHeader>
               <DialogTitle>
diff --git a/src/components/Profile/AvatarWithLightbox.tsx b/src/components/Profile/AvatarWithLightbox.tsx
index dfbac13..10677f6 100644
--- a/src/components/Profile/AvatarWithLightbox.tsx
+++ b/src/components/Profile/AvatarWithLightbox.tsx
@@ -13,7 +13,7 @@ export default function AvatarWithLightbox({ userId }: { userId: string }) {
 
   if (!profile) {
     return (
-      <Skeleton className="shrink-0 w-24 h-24 rounded-full absolute left-3 bottom-0 translate-y-1/2 border-4 border-background" />
+      <Skeleton className="absolute bottom-0 left-3 h-24 w-24 shrink-0 translate-y-1/2 rounded-full border-4 border-background" />
     )
   }
   const { avatar, pubkey } = profile || {}
diff --git a/src/components/Profile/BannerWithLightbox.tsx b/src/components/Profile/BannerWithLightbox.tsx
index 183ed40..61b9027 100644
--- a/src/components/Profile/BannerWithLightbox.tsx
+++ b/src/components/Profile/BannerWithLightbox.tsx
@@ -23,7 +23,7 @@ export default function BannerWithLightbox({
   return (
     <ImageWithLightbox
       image={{ url: bannerUrl, pubkey }}
-      className="rounded-none w-full aspect-[3/1]"
+      className="aspect-[3/1] w-full rounded-none"
       classNames={{
         skeleton: 'rounded-none',
         wrapper: 'rounded-none border-none aspect-[3/1]'
diff --git a/src/components/Profile/Followings.tsx b/src/components/Profile/Followings.tsx
index 9538201..0dedc29 100644
--- a/src/components/Profile/Followings.tsx
+++ b/src/components/Profile/Followings.tsx
@@ -15,12 +15,12 @@ export default function Followings({ pubkey }: { pubkey: string }) {
   return (
     <SecondaryPageLink
       to={toFollowingList(pubkey)}
-      className="flex gap-1 hover:underline w-fit items-center"
+      className="flex w-fit items-center gap-1 hover:underline"
     >
       {accountPubkey === pubkey ? (
         selfFollowingSet.size
       ) : isFetching ? (
-        <Loader className="animate-spin size-4" />
+        <Loader className="size-4 animate-spin" />
       ) : (
         followings.length
       )}
diff --git a/src/components/Profile/Relays.tsx b/src/components/Profile/Relays.tsx
index d4772a4..5bb3309 100644
--- a/src/components/Profile/Relays.tsx
+++ b/src/components/Profile/Relays.tsx
@@ -13,9 +13,9 @@ export default function Relays({ pubkey }: { pubkey: string }) {
   return (
     <SecondaryPageLink
       to={accountPubkey === pubkey ? toRelaySettings('mailbox') : toOthersRelaySettings(pubkey)}
-      className="flex gap-1 hover:underline w-fit items-center"
+      className="flex w-fit items-center gap-1 hover:underline"
     >
-      {isFetching ? <Loader className="animate-spin size-4" /> : relayList.originalRelays.length}
+      {isFetching ? <Loader className="size-4 animate-spin" /> : relayList.originalRelays.length}
       <div className="text-muted-foreground">{t('Relays')}</div>
     </SecondaryPageLink>
   )
diff --git a/src/components/Profile/index.tsx b/src/components/Profile/index.tsx
index eda5218..e9bd9a2 100644
--- a/src/components/Profile/index.tsx
+++ b/src/components/Profile/index.tsx
@@ -98,14 +98,14 @@ export default function Profile({ id }: { id?: string }) {
     return (
       <>
         <div>
-          <div className="relative bg-cover bg-center mb-2">
-            <Skeleton className="w-full aspect-[3/1] rounded-none" />
-            <Skeleton className="w-24 h-24 absolute bottom-0 left-3 translate-y-1/2 border-4 border-background rounded-full" />
+          <div className="relative mb-2 bg-cover bg-center">
+            <Skeleton className="aspect-[3/1] w-full rounded-none" />
+            <Skeleton className="absolute bottom-0 left-3 h-24 w-24 translate-y-1/2 rounded-full border-4 border-background" />
           </div>
         </div>
         <div className="px-4">
-          <Skeleton className="h-5 w-28 mt-14 mb-1" />
-          <Skeleton className="h-5 w-56 mt-2 my-1 rounded-full" />
+          <Skeleton className="mb-1 mt-14 h-5 w-28" />
+          <Skeleton className="my-1 mt-2 h-5 w-56 rounded-full" />
         </div>
       </>
     )
@@ -116,12 +116,12 @@ export default function Profile({ id }: { id?: string }) {
   return (
     <>
       <div ref={topContainerRef}>
-        <div className="relative bg-cover bg-center mb-2">
+        <div className="relative mb-2 bg-cover bg-center">
           <BannerWithLightbox banner={banner} pubkey={pubkey} />
           <AvatarWithLightbox userId={pubkey} />
         </div>
         <div className="px-4">
-          <div className="flex justify-end h-8 gap-2 items-center">
+          <div className="flex h-8 items-center justify-end gap-2">
             <ProfileOptions pubkey={pubkey} />
             {isSelf ? (
               <Button
@@ -140,27 +140,27 @@ export default function Profile({ id }: { id?: string }) {
             )}
           </div>
           <div className="pt-2">
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <TextWithEmojis
                 text={username}
                 emojis={emojis}
-                className="text-xl font-semibold truncate select-text"
+                className="select-text truncate text-xl font-semibold"
               />
               <TrustScoreBadge pubkey={pubkey} />
               {isFollowingYou && (
-                <div className="text-muted-foreground rounded-full bg-muted text-xs h-fit px-2 shrink-0">
+                <div className="h-fit shrink-0 rounded-full bg-muted px-2 text-xs text-muted-foreground">
                   {t('Follows you')}
                 </div>
               )}
             </div>
             <Nip05 pubkey={pubkey} />
             {lightningAddress && (
-              <div className="text-sm text-yellow-400 flex gap-1 items-center select-text">
+              <div className="flex select-text items-center gap-1 text-sm text-yellow-400">
                 <Zap className="size-4 shrink-0" />
-                <div className="flex-1 max-w-fit w-0 truncate">{lightningAddress}</div>
+                <div className="w-0 max-w-fit flex-1 truncate">{lightningAddress}</div>
               </div>
             )}
-            <div className="flex gap-1 mt-1">
+            <div className="mt-1 flex gap-1">
               <PubkeyCopy pubkey={pubkey} />
               <NpubQrCode pubkey={pubkey} />
             </div>
@@ -168,27 +168,27 @@ export default function Profile({ id }: { id?: string }) {
               <ProfileAbout
                 about={about}
                 emojis={emojis}
-                className="text-wrap break-words whitespace-pre-wrap mt-2 select-text"
+                className="mt-2 select-text whitespace-pre-wrap text-wrap break-words"
               />
             </Collapsible>
             {website && (
-              <div className="flex gap-1 items-center text-primary mt-2 truncate select-text">
+              <div className="mt-2 flex select-text items-center gap-1 truncate text-primary">
                 <Link size={14} className="shrink-0" />
                 <a
                   href={website}
                   target="_blank"
-                  className="hover:underline truncate flex-1 max-w-fit w-0"
+                  className="w-0 max-w-fit flex-1 truncate hover:underline"
                 >
                   {website}
                 </a>
               </div>
             )}
-            <div className="flex justify-between items-center mt-2 text-sm">
-              <div className="flex gap-4 items-center">
+            <div className="mt-2 flex items-center justify-between text-sm">
+              <div className="flex items-center gap-4">
                 <Followings pubkey={pubkey} />
                 <Relays pubkey={pubkey} />
                 {isSelf && (
-                  <SecondaryPageLink to={toMuteList()} className="flex gap-1 hover:underline w-fit">
+                  <SecondaryPageLink to={toMuteList()} className="flex w-fit gap-1 hover:underline">
                     {mutePubkeySet.size}
                     <div className="text-muted-foreground">{t('Muted')}</div>
                   </SecondaryPageLink>
@@ -198,7 +198,7 @@ export default function Profile({ id }: { id?: string }) {
             </div>
           </div>
         </div>
-        <div className="px-4 pt-3.5 pb-0.5">
+        <div className="px-4 pb-0.5 pt-3.5">
           <SearchInput
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
diff --git a/src/components/ProfileCard/index.tsx b/src/components/ProfileCard/index.tsx
index b2a4c3b..aff6a15 100644
--- a/src/components/ProfileCard/index.tsx
+++ b/src/components/ProfileCard/index.tsx
@@ -14,17 +14,17 @@ export default function ProfileCard({ userId }: { userId: string }) {
   const { username, about, emojis } = profile || {}
 
   return (
-    <div className="w-full flex flex-col gap-2 not-prose">
-      <div className="flex space-x-2 w-full items-start justify-between">
-        <SimpleUserAvatar userId={pubkey} className="w-12 h-12" />
+    <div className="not-prose flex w-full flex-col gap-2">
+      <div className="flex w-full items-start justify-between space-x-2">
+        <SimpleUserAvatar userId={pubkey} className="h-12 w-12" />
         <FollowButton pubkey={pubkey} />
       </div>
       <div>
-        <div className="flex gap-2 items-center">
+        <div className="flex items-center gap-2">
           <TextWithEmojis
             text={username || ''}
             emojis={emojis}
-            className="text-lg font-semibold truncate"
+            className="truncate text-lg font-semibold"
           />
           <TrustScoreBadge pubkey={pubkey} />
         </div>
@@ -34,7 +34,7 @@ export default function ProfileCard({ userId }: { userId: string }) {
         <ProfileAbout
           about={about}
           emojis={emojis}
-          className="text-sm text-wrap break-words w-full overflow-hidden text-ellipsis line-clamp-6"
+          className="line-clamp-6 w-full overflow-hidden text-ellipsis text-wrap break-words text-sm"
         />
       )}
     </div>
diff --git a/src/components/ProfileOptions/index.tsx b/src/components/ProfileOptions/index.tsx
index 8b825d3..daa0e3a 100644
--- a/src/components/ProfileOptions/index.tsx
+++ b/src/components/ProfileOptions/index.tsx
@@ -52,7 +52,7 @@ export default function ProfileOptions({ pubkey }: { pubkey: string }) {
                   setIsDrawerOpen(false)
                   navigator.clipboard.writeText(pubkeyToNpub(pubkey) ?? '')
                 }}
-                className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5"
+                className="w-full justify-start gap-4 p-6 text-lg [&_svg]:size-5"
                 variant="ghost"
               >
                 <Copy />
@@ -65,7 +65,7 @@ export default function ProfileOptions({ pubkey }: { pubkey: string }) {
                       setIsDrawerOpen(false)
                       unmutePubkey(pubkey)
                     }}
-                    className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5 text-destructive focus:text-destructive"
+                    className="w-full justify-start gap-4 p-6 text-lg text-destructive focus:text-destructive [&_svg]:size-5"
                     variant="ghost"
                   >
                     <Bell />
@@ -78,7 +78,7 @@ export default function ProfileOptions({ pubkey }: { pubkey: string }) {
                         setIsDrawerOpen(false)
                         mutePubkeyPrivately(pubkey)
                       }}
-                      className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5 text-destructive focus:text-destructive"
+                      className="w-full justify-start gap-4 p-6 text-lg text-destructive focus:text-destructive [&_svg]:size-5"
                       variant="ghost"
                     >
                       <BellOff />
@@ -89,7 +89,7 @@ export default function ProfileOptions({ pubkey }: { pubkey: string }) {
                         setIsDrawerOpen(false)
                         mutePubkeyPublicly(pubkey)
                       }}
-                      className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5 text-destructive focus:text-destructive"
+                      className="w-full justify-start gap-4 p-6 text-lg text-destructive focus:text-destructive [&_svg]:size-5"
                       variant="ghost"
                     >
                       <BellOff />
diff --git a/src/components/PubkeyCopy/index.tsx b/src/components/PubkeyCopy/index.tsx
index ccb9bcd..5636b1e 100644
--- a/src/components/PubkeyCopy/index.tsx
+++ b/src/components/PubkeyCopy/index.tsx
@@ -17,7 +17,7 @@ export default function PubkeyCopy({ pubkey }: { pubkey: string }) {
 
   return (
     <div
-      className="flex gap-2 text-sm text-muted-foreground items-center bg-muted w-fit px-2 rounded-full clickable"
+      className="clickable flex w-fit items-center gap-2 rounded-full bg-muted px-2 text-sm text-muted-foreground"
       onClick={() => copyNpub()}
     >
       <div>{formatNpub(npub, 24)}</div>
diff --git a/src/components/QrCode/index.tsx b/src/components/QrCode/index.tsx
index a5821d6..da2ef4c 100644
--- a/src/components/QrCode/index.tsx
+++ b/src/components/QrCode/index.tsx
@@ -47,7 +47,7 @@ export default function QrCode({ value, size = 180 }: { value: string; size?: nu
   }, [value, size])
 
   return (
-    <div className="rounded-2xl overflow-hidden p-2 bg-white">
+    <div className="overflow-hidden rounded-2xl bg-white p-2">
       <div ref={ref} />
     </div>
   )
diff --git a/src/components/ReactionList/index.tsx b/src/components/ReactionList/index.tsx
index 6bb8d30..d025907 100644
--- a/src/components/ReactionList/index.tsx
+++ b/src/components/ReactionList/index.tsx
@@ -80,10 +80,10 @@ export default function ReactionList({ stuff }: { stuff: Event | string }) {
       {filteredLikes.slice(0, showCount).map((like) => (
         <div
           key={like.id}
-          className="px-4 py-3 border-b transition-colors clickable flex items-center gap-3"
+          className="clickable flex items-center gap-3 border-b px-4 py-3 transition-colors"
           onClick={() => push(toProfile(like.pubkey))}
         >
-          <div className="w-6 flex flex-col items-center">
+          <div className="flex w-6 flex-col items-center">
             <Emoji
               emoji={like.emoji}
               classNames={{
@@ -94,10 +94,10 @@ export default function ReactionList({ stuff }: { stuff: Event | string }) {
 
           <UserAvatar userId={like.pubkey} size="medium" className="shrink-0" />
 
-          <div className="flex-1 w-0">
+          <div className="w-0 flex-1">
             <Username
               userId={like.pubkey}
-              className="text-sm font-semibold text-muted-foreground hover:text-foreground max-w-fit truncate"
+              className="max-w-fit truncate text-sm font-semibold text-muted-foreground hover:text-foreground"
               skeletonClassName="h-3"
             />
             <div className="flex items-center gap-1 text-sm text-muted-foreground">
@@ -114,7 +114,7 @@ export default function ReactionList({ stuff }: { stuff: Event | string }) {
 
       <div ref={bottomRef} />
 
-      <div className="text-sm mt-2 text-center text-muted-foreground">
+      <div className="mt-2 text-center text-sm text-muted-foreground">
         {filteredLikes.length > 0 ? t('No more reactions') : t('No reactions yet')}
       </div>
     </div>
diff --git a/src/components/RelayInfo/RelayReviewCard.tsx b/src/components/RelayInfo/RelayReviewCard.tsx
index 12695ba..8a8a099 100644
--- a/src/components/RelayInfo/RelayReviewCard.tsx
+++ b/src/components/RelayInfo/RelayReviewCard.tsx
@@ -25,17 +25,17 @@ export default function RelayReviewCard({
 
   return (
     <div
-      className={cn('clickable border rounded-lg bg-muted/20 p-3 h-full', className)}
+      className={cn('clickable h-full rounded-lg border bg-muted/20 p-3', className)}
       onClick={() => push(toNote(event))}
     >
-      <div className="flex justify-between items-start gap-2">
-        <div className="flex items-center space-x-2 flex-1">
+      <div className="flex items-start justify-between gap-2">
+        <div className="flex flex-1 items-center space-x-2">
           <SimpleUserAvatar userId={event.pubkey} size="medium" />
-          <div className="flex-1 w-0">
-            <div className="flex gap-2 items-center">
+          <div className="w-0 flex-1">
+            <div className="flex items-center gap-2">
               <SimpleUsername
                 userId={event.pubkey}
-                className="font-semibold flex truncate text-sm"
+                className="flex truncate text-sm font-semibold"
                 skeletonClassName="h-3"
               />
               <ClientTag event={event} />
diff --git a/src/components/RelayInfo/RelayReviewsPreview.tsx b/src/components/RelayInfo/RelayReviewsPreview.tsx
index 4f22ad1..b5a3bc0 100644
--- a/src/components/RelayInfo/RelayReviewsPreview.tsx
+++ b/src/components/RelayInfo/RelayReviewsPreview.tsx
@@ -113,7 +113,7 @@ export default function RelayReviewsPreview({ relayUrl }: { relayUrl: string })
 
   return (
     <div className="space-y-4">
-      <div className="px-4 flex items-center justify-between">
+      <div className="flex items-center justify-between px-4">
         <div>
           <div className="flex items-center gap-2">
             <div className="text-lg font-semibold">{stars}</div>
@@ -122,7 +122,7 @@ export default function RelayReviewsPreview({ relayUrl }: { relayUrl: string })
           <div
             className={cn(
               'text-sm text-muted-foreground',
-              count > 0 && 'underline cursor-pointer hover:text-foreground'
+              count > 0 && 'cursor-pointer underline hover:text-foreground'
             )}
             onClick={() => {
               if (count > 0) {
@@ -145,7 +145,7 @@ export default function RelayReviewsPreview({ relayUrl }: { relayUrl: string })
       {myReview || reviews.length > 0 ? (
         <ReviewCarousel relayUrl={relayUrl} myReview={myReview} reviews={reviews} />
       ) : !showEditor ? (
-        <div className="flex items-center justify-center text-sm text-muted-foreground p-4">
+        <div className="flex items-center justify-center p-4 text-sm text-muted-foreground">
           {initialized ? t('No reviews yet. Be the first to write one!') : t('Loading...')}
         </div>
       ) : null}
@@ -187,7 +187,7 @@ function ReviewCarousel({
         {reviews.length > 10 && (
           <Item>
             <div
-              className="border rounded-lg bg-muted/20 p-3 flex items-center justify-center h-full hover:bg-muted cursor-pointer"
+              className="flex h-full cursor-pointer items-center justify-center rounded-lg border bg-muted/20 p-3 hover:bg-muted"
               onClick={() => push(toRelayReviews(relayUrl))}
             >
               <div className="text-sm text-muted-foreground">{t('View more reviews')}</div>
diff --git a/src/components/RelayInfo/ReviewEditor.tsx b/src/components/RelayInfo/ReviewEditor.tsx
index 1e9a593..ec615a9 100644
--- a/src/components/RelayInfo/ReviewEditor.tsx
+++ b/src/components/RelayInfo/ReviewEditor.tsx
@@ -44,25 +44,25 @@ export default function ReviewEditor({
   }
 
   return (
-    <div className="px-4 space-y-2">
+    <div className="space-y-2 px-4">
       <Textarea
         className="min-h-36"
         placeholder={t('Write a review and pick a star rating')}
         value={review}
         onChange={(e) => setReview(e.target.value)}
       />
-      <div className="flex justify-between items-center">
+      <div className="flex items-center justify-between">
         <div className="flex items-center">
           {Array.from({ length: 5 }).map((_, index) => (
             <div
               key={index}
-              className="pr-2 cursor-pointer"
+              className="cursor-pointer pr-2"
               onMouseEnter={() => setHoverStars(index + 1)}
               onMouseLeave={() => setHoverStars(0)}
             >
               {index < (hoverStars || stars) ? (
                 <Star
-                  className="size-6 text-yellow-400 fill-yellow-400"
+                  className="size-6 fill-yellow-400 text-yellow-400"
                   onClick={() => setStars(index + 1)}
                 />
               ) : (
diff --git a/src/components/RelayInfo/index.tsx b/src/components/RelayInfo/index.tsx
index eb59971..49e010f 100644
--- a/src/components/RelayInfo/index.tsx
+++ b/src/components/RelayInfo/index.tsx
@@ -34,13 +34,13 @@ export default function RelayInfo({ url, className }: { url: string; className?:
   }
 
   return (
-    <div className={cn('space-y-4 mb-2', className)}>
-      <div className="px-4 space-y-4">
+    <div className={cn('mb-2 space-y-4', className)}>
+      <div className="space-y-4 px-4">
         <div className="space-y-2">
-          <div className="flex items-center gap-2 justify-between">
-            <div className="flex gap-2 items-center flex-1">
-              <RelayIcon url={url} className="w-8 h-8" />
-              <div className="text-2xl font-semibold truncate select-text flex-1 w-0">
+          <div className="flex items-center justify-between gap-2">
+            <div className="flex flex-1 items-center gap-2">
+              <RelayIcon url={url} className="h-8 w-8" />
+              <div className="w-0 flex-1 select-text truncate text-2xl font-semibold">
                 {relayInfo.name || relayInfo.shortUrl}
               </div>
             </div>
@@ -54,7 +54,7 @@ export default function RelayInfo({ url, className }: { url: string; className?:
             </div>
           )}
           {relayInfo.description && (
-            <div className="text-wrap break-words whitespace-pre-wrap mt-2 select-text">
+            <div className="mt-2 select-text whitespace-pre-wrap text-wrap break-words">
               <Content event={createFakeEvent({ content: relayInfo.description })} />
             </div>
           )}
@@ -65,7 +65,7 @@ export default function RelayInfo({ url, className }: { url: string; className?:
           <a
             href={normalizeHttpUrl(relayInfo.url)}
             target="_blank"
-            className="hover:underline text-primary select-text truncate block w-fit max-w-full"
+            className="block w-fit max-w-full select-text truncate text-primary hover:underline"
           >
             {normalizeHttpUrl(relayInfo.url)}
           </a>
@@ -74,36 +74,36 @@ export default function RelayInfo({ url, className }: { url: string; className?:
         <ScrollArea className="overflow-x-auto">
           <div className="flex gap-8 pb-2">
             {relayInfo.pubkey && (
-              <div className="space-y-2 w-fit">
+              <div className="w-fit space-y-2">
                 <div className="text-sm font-semibold text-muted-foreground">{t('Operator')}</div>
-                <div className="flex gap-2 items-center">
+                <div className="flex items-center gap-2">
                   <UserAvatar userId={relayInfo.pubkey} size="small" />
-                  <Username userId={relayInfo.pubkey} className="font-semibold text-nowrap" />
+                  <Username userId={relayInfo.pubkey} className="text-nowrap font-semibold" />
                 </div>
               </div>
             )}
             {relayInfo.contact && (
-              <div className="space-y-2 w-fit">
+              <div className="w-fit space-y-2">
                 <div className="text-sm font-semibold text-muted-foreground">{t('Contact')}</div>
-                <div className="flex gap-2 items-center font-semibold select-text text-nowrap">
+                <div className="flex select-text items-center gap-2 text-nowrap font-semibold">
                   <Mail />
                   {relayInfo.contact}
                 </div>
               </div>
             )}
             {relayInfo.software && (
-              <div className="space-y-2 w-fit">
+              <div className="w-fit space-y-2">
                 <div className="text-sm font-semibold text-muted-foreground">{t('Software')}</div>
-                <div className="flex gap-2 items-center font-semibold select-text text-nowrap">
+                <div className="flex select-text items-center gap-2 text-nowrap font-semibold">
                   <SquareCode />
                   {formatSoftware(relayInfo.software)}
                 </div>
               </div>
             )}
             {relayInfo.version && (
-              <div className="space-y-2 w-fit">
+              <div className="w-fit space-y-2">
                 <div className="text-sm font-semibold text-muted-foreground">{t('Version')}</div>
-                <div className="flex gap-2 items-center font-semibold select-text text-nowrap">
+                <div className="flex select-text items-center gap-2 text-nowrap font-semibold">
                   <GitBranch />
                   {relayInfo.version}
                 </div>
diff --git a/src/components/RelayMembershipControl/InviteCodeDialog.tsx b/src/components/RelayMembershipControl/InviteCodeDialog.tsx
index b671893..144bf04 100644
--- a/src/components/RelayMembershipControl/InviteCodeDialog.tsx
+++ b/src/components/RelayMembershipControl/InviteCodeDialog.tsx
@@ -97,7 +97,7 @@ export default function InviteCodeDialog({
       </p>
     </div>
   ) : (
-    <div className="text-center py-8 text-muted-foreground">
+    <div className="py-8 text-center text-muted-foreground">
       {t('No invite code available from this relay.')}
     </div>
   )
diff --git a/src/components/RelayMembershipControl/index.tsx b/src/components/RelayMembershipControl/index.tsx
index 2b56998..f8e5d4a 100644
--- a/src/components/RelayMembershipControl/index.tsx
+++ b/src/components/RelayMembershipControl/index.tsx
@@ -127,7 +127,7 @@ export default function RelayMembershipControl({
             onClick={handleGetInviteCodeClick}
             disabled={isLoading}
           >
-            <Mail className="w-4 h-4 mr-2" />
+            <Mail className="mr-2 h-4 w-4" />
             {t('Get Invite Code')}
           </Button>
           <Button
@@ -136,7 +136,7 @@ export default function RelayMembershipControl({
             onClick={handleLeaveClick}
             disabled={isLoading}
           >
-            <LogOut className="w-4 h-4 mr-2" />
+            <LogOut className="mr-2 h-4 w-4" />
             {t('Leave')}
           </Button>
         </div>
@@ -149,7 +149,7 @@ export default function RelayMembershipControl({
           }}
           disabled={isLoading}
         >
-          <LogIn className="w-4 h-4 mr-2" />
+          <LogIn className="mr-2 h-4 w-4" />
           {t('Request to Join Relay')}
         </Button>
       )}
diff --git a/src/components/RelaySetCard/index.tsx b/src/components/RelaySetCard/index.tsx
index a709b72..7367bc5 100644
--- a/src/components/RelaySetCard/index.tsx
+++ b/src/components/RelaySetCard/index.tsx
@@ -20,21 +20,21 @@ export default function RelaySetCard({
   return (
     <div
       className={cn(
-        'group relative w-full border rounded-lg px-3 py-2.5 transition-all duration-200',
+        'group relative w-full rounded-lg border px-3 py-2.5 transition-all duration-200',
         select
           ? 'border-primary bg-primary/5 shadow-sm'
-          : 'border-border hover:border-primary/50 hover:bg-accent/50 clickable'
+          : 'clickable border-border hover:border-primary/50 hover:bg-accent/50'
       )}
       onClick={() => onSelectChange(!select)}
     >
-      <div className="flex justify-between items-center gap-2">
-        <div className="flex gap-3 items-center flex-1 min-w-0">
-          <div className="flex justify-center items-center size-6 shrink-0">
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex min-w-0 flex-1 items-center gap-3">
+          <div className="flex size-6 shrink-0 items-center justify-center">
             <FolderClosed className="size-5" />
           </div>
-          <div className="font-medium select-none truncate">{relaySet.name}</div>
+          <div className="select-none truncate font-medium">{relaySet.name}</div>
         </div>
-        <div className="flex gap-1 items-center shrink-0">
+        <div className="flex shrink-0 items-center gap-1">
           <RelayUrlsExpandToggle expand={expand} onExpandChange={setExpand}>
             {t('n relays', { n: relaySet.relayUrls.length })}
           </RelayUrlsExpandToggle>
@@ -56,7 +56,7 @@ function RelayUrlsExpandToggle({
 }) {
   return (
     <div
-      className="text-xs text-muted-foreground flex items-center gap-0.5 cursor-pointer hover:text-foreground transition-colors"
+      className="flex cursor-pointer items-center gap-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground"
       onClick={(e) => {
         e.stopPropagation()
         onExpandChange(!expand)
@@ -75,11 +75,11 @@ function RelayUrls({ urls }: { urls: string[] }) {
   if (!urls) return null
 
   return (
-    <div className="mt-2.5 pt-2.5 border-t space-y-1.5">
+    <div className="mt-2.5 space-y-1.5 border-t pt-2.5">
       {urls.map((url) => (
         <div key={url} className="flex items-center gap-2.5 pl-1">
           <RelayIcon url={url} className="size-4 shrink-0" classNames={{ fallback: 'size-3' }} />
-          <div className="text-muted-foreground text-xs truncate">{url}</div>
+          <div className="truncate text-xs text-muted-foreground">{url}</div>
         </div>
       ))}
     </div>
diff --git a/src/components/RelaySimpleInfo/index.tsx b/src/components/RelaySimpleInfo/index.tsx
index 255b9d8..8ce4dd2 100644
--- a/src/components/RelaySimpleInfo/index.tsx
+++ b/src/components/RelaySimpleInfo/index.tsx
@@ -20,13 +20,13 @@ export default function RelaySimpleInfo({
 
   return (
     <div className={cn('space-y-1', className)} {...props}>
-      <div className="flex items-start justify-between gap-2 w-full">
-        <div className="flex flex-1 w-0 items-center gap-2">
+      <div className="flex w-full items-start justify-between gap-2">
+        <div className="flex w-0 flex-1 items-center gap-2">
           <RelayIcon url={relayInfo?.url} className="h-9 w-9" />
-          <div className="flex-1 w-0">
+          <div className="w-0 flex-1">
             <div className="truncate font-semibold">{relayInfo?.name || relayInfo?.shortUrl}</div>
             {relayInfo?.name && (
-              <div className="text-xs text-muted-foreground truncate">{relayInfo?.shortUrl}</div>
+              <div className="truncate text-xs text-muted-foreground">{relayInfo?.shortUrl}</div>
             )}
           </div>
         </div>
@@ -34,7 +34,7 @@ export default function RelaySimpleInfo({
       </div>
       {!!relayInfo?.description && (
         <div
-          className="line-clamp-3 break-words whitespace-pre-wrap"
+          className="line-clamp-3 whitespace-pre-wrap break-words"
           style={{
             overflowWrap: 'anywhere'
           }}
@@ -50,7 +50,7 @@ export default function RelaySimpleInfo({
               <SimpleUserAvatar key={user} userId={user} size="xSmall" />
             ))}
             {users.length > 10 && (
-              <div className="text-muted-foreground text-xs rounded-full bg-muted w-5 h-5 flex items-center justify-center">
+              <div className="flex h-5 w-5 items-center justify-center rounded-full bg-muted text-xs text-muted-foreground">
                 +{users.length - 10}
               </div>
             )}
@@ -64,15 +64,15 @@ export default function RelaySimpleInfo({
 export function RelaySimpleInfoSkeleton({ className }: { className?: string }) {
   return (
     <div className={cn('space-y-1', className)}>
-      <div className="flex items-center gap-2 w-full">
+      <div className="flex w-full items-center gap-2">
         <Skeleton className="h-9 w-9 rounded-full" />
-        <div className="flex-1 w-0 space-y-1">
-          <Skeleton className="w-40 h-5" />
-          <Skeleton className="w-20 h-4" />
+        <div className="w-0 flex-1 space-y-1">
+          <Skeleton className="h-5 w-40" />
+          <Skeleton className="h-4 w-20" />
         </div>
       </div>
-      <Skeleton className="w-full h-4" />
-      <Skeleton className="w-2/3 h-4" />
+      <Skeleton className="h-4 w-full" />
+      <Skeleton className="h-4 w-2/3" />
     </div>
   )
 }
diff --git a/src/components/ReplyNote/index.tsx b/src/components/ReplyNote/index.tsx
index 38ad53a..17b9a28 100644
--- a/src/components/ReplyNote/index.tsx
+++ b/src/components/ReplyNote/index.tsx
@@ -99,23 +99,23 @@ export default function ReplyNote({
   return (
     <div
       className={cn(
-        'relative pb-3 transition-colors duration-500 clickable',
+        'clickable relative pb-3 transition-colors duration-500',
         highlight ? 'bg-primary/40' : '',
         className
       )}
       onClick={() => push(toNote(event))}
     >
-      {hasReplies && <div className="absolute left-[34px] top-14 bottom-0 border-l z-20" />}
+      {hasReplies && <div className="absolute bottom-0 left-[34px] top-14 z-20 border-l" />}
       <Collapsible>
-        <div className="flex space-x-2 items-start px-4 pt-3">
-          <UserAvatar userId={event.pubkey} size="medium" className="shrink-0 mt-0.5" />
+        <div className="flex items-start space-x-2 px-4 pt-3">
+          <UserAvatar userId={event.pubkey} size="medium" className="mt-0.5 shrink-0" />
           <div className="w-full overflow-hidden">
             <div className="flex items-start justify-between gap-2">
-              <div className="flex-1 w-0">
-                <div className="flex gap-1 items-center">
+              <div className="w-0 flex-1">
+                <div className="flex items-center gap-1">
                   <Username
                     userId={event.pubkey}
-                    className="text-sm font-semibold text-muted-foreground hover:text-foreground truncate"
+                    className="truncate text-sm font-semibold text-muted-foreground hover:text-foreground"
                     skeletonClassName="h-3"
                   />
                   <TrustScoreBadge pubkey={event.pubkey} className="!size-3.5" />
@@ -130,7 +130,7 @@ export default function ReplyNote({
                   />
                 </div>
               </div>
-              <div className="flex items-center shrink-0">
+              <div className="flex shrink-0 items-center">
                 <TranslateButton event={event} className="py-0" />
                 <NoteOptions event={event} className="shrink-0 [&_svg]:size-5" />
               </div>
@@ -150,7 +150,7 @@ export default function ReplyNote({
             ) : (
               <Button
                 variant="outline"
-                className="text-muted-foreground font-medium mt-2"
+                className="mt-2 font-medium text-muted-foreground"
                 onClick={(e) => {
                   e.stopPropagation()
                   setShowMuted(true)
@@ -162,24 +162,24 @@ export default function ReplyNote({
           </div>
         </div>
       </Collapsible>
-      {show && <StuffStats className="ml-14 pl-1 mr-4 mt-2" stuff={event} displayTopZapsAndLikes />}
+      {show && <StuffStats className="ml-14 mr-4 mt-2 pl-1" stuff={event} displayTopZapsAndLikes />}
     </div>
   )
 }
 
 export function ReplyNoteSkeleton() {
   return (
-    <div className="px-4 py-3 flex items-start space-x-2 w-full">
-      <Skeleton className="w-9 h-9 rounded-full shrink-0 mt-0.5" />
+    <div className="flex w-full items-start space-x-2 px-4 py-3">
+      <Skeleton className="mt-0.5 h-9 w-9 shrink-0 rounded-full" />
       <div className="w-full">
         <div className="py-1">
           <Skeleton className="h-3 w-16" />
         </div>
         <div className="my-1">
-          <Skeleton className="w-full h-4 my-1 mt-2" />
+          <Skeleton className="my-1 mt-2 h-4 w-full" />
         </div>
         <div className="my-1">
-          <Skeleton className="w-2/3 h-4 my-1" />
+          <Skeleton className="my-1 h-4 w-2/3" />
         </div>
       </div>
     </div>
diff --git a/src/components/ReplyNoteList/SubReplies.tsx b/src/components/ReplyNoteList/SubReplies.tsx
index 614a942..f979769 100644
--- a/src/components/ReplyNoteList/SubReplies.tsx
+++ b/src/components/ReplyNoteList/SubReplies.tsx
@@ -47,10 +47,10 @@ export default function SubReplies({ parentKey }: { parentKey: string }) {
             e.stopPropagation()
             setIsExpanded(!isExpanded)
           }}
-          className="relative w-full flex items-center gap-1.5 pl-14 py-2 text-sm text-muted-foreground hover:text-foreground transition-colors clickable"
+          className="clickable relative flex w-full items-center gap-1.5 py-2 pl-14 text-sm text-muted-foreground transition-colors hover:text-foreground"
         >
           <div
-            className={cn('absolute left-[34px] top-0 bottom-0 w-px text-border z-20')}
+            className={cn('absolute bottom-0 left-[34px] top-0 z-20 w-px text-border')}
             style={{
               background: isExpanded
                 ? 'currentColor'
@@ -86,14 +86,14 @@ export default function SubReplies({ parentKey }: { parentKey: string }) {
               <div
                 ref={(el) => (replyRefs.current[currentReplyKey] = el)}
                 key={currentReplyKey}
-                className="scroll-mt-12 flex relative"
+                className="relative flex scroll-mt-12"
               >
-                <div className="absolute left-[34px] top-0 h-8 w-4 rounded-bl-lg border-l border-b z-20" />
+                <div className="absolute left-[34px] top-0 z-20 h-8 w-4 rounded-bl-lg border-b border-l" />
                 {index < replies.length - 1 && (
-                  <div className="absolute left-[34px] top-0 bottom-0 border-l z-20" />
+                  <div className="absolute bottom-0 left-[34px] top-0 z-20 border-l" />
                 )}
                 <ReplyNote
-                  className="flex-1 w-0 pl-10"
+                  className="w-0 flex-1 pl-10"
                   event={reply}
                   parentEventId={_parentKey !== parentKey ? _parentEventId : undefined}
                   onClickParent={() => {
diff --git a/src/components/ReplyNoteList/index.tsx b/src/components/ReplyNoteList/index.tsx
index f231eb6..4b7da7e 100644
--- a/src/components/ReplyNoteList/index.tsx
+++ b/src/components/ReplyNoteList/index.tsx
@@ -57,7 +57,7 @@ export default function ReplyNoteList({ stuff }: { stuff: NEvent | string }) {
       {shouldShowLoadingIndicator ? (
         <ReplyNoteSkeleton />
       ) : (
-        <div className="text-sm mt-2 mb-3 text-center text-muted-foreground">
+        <div className="mb-3 mt-2 text-center text-sm text-muted-foreground">
           {replies.length > 0 ? t('no more replies') : t('no replies')}
         </div>
       )}
diff --git a/src/components/RepostList/index.tsx b/src/components/RepostList/index.tsx
index 5739b22..ed6098f 100644
--- a/src/components/RepostList/index.tsx
+++ b/src/components/RepostList/index.tsx
@@ -73,17 +73,17 @@ export default function RepostList({ event }: { event: Event }) {
       {filteredReposts.slice(0, showCount).map((repost) => (
         <div
           key={repost.id}
-          className="px-4 py-3 border-b transition-colors clickable flex items-center gap-3"
+          className="clickable flex items-center gap-3 border-b px-4 py-3 transition-colors"
           onClick={() => push(toProfile(repost.pubkey))}
         >
-          <Repeat className="text-green-400 size-5" />
+          <Repeat className="size-5 text-green-400" />
 
           <UserAvatar userId={repost.pubkey} size="medium" className="shrink-0" />
 
-          <div className="flex-1 w-0">
+          <div className="w-0 flex-1">
             <Username
               userId={repost.pubkey}
-              className="text-sm font-semibold text-muted-foreground hover:text-foreground max-w-fit truncate"
+              className="max-w-fit truncate text-sm font-semibold text-muted-foreground hover:text-foreground"
               skeletonClassName="h-3"
             />
             <div className="flex items-center gap-1 text-sm text-muted-foreground">
@@ -100,7 +100,7 @@ export default function RepostList({ event }: { event: Event }) {
 
       <div ref={bottomRef} />
 
-      <div className="text-sm mt-2 text-center text-muted-foreground">
+      <div className="mt-2 text-center text-sm text-muted-foreground">
         {filteredReposts.length > 0 ? t('No more reposts') : t('No reposts yet')}
       </div>
     </div>
diff --git a/src/components/SaveRelayDropdownMenu/index.tsx b/src/components/SaveRelayDropdownMenu/index.tsx
index 3f5114b..238114b 100644
--- a/src/components/SaveRelayDropdownMenu/index.tsx
+++ b/src/components/SaveRelayDropdownMenu/index.tsx
@@ -50,7 +50,7 @@ export default function SaveRelayDropdownMenu({
     </Button>
   ) : (
     <button
-      className="enabled:hover:text-primary [&_svg]:size-5 pr-0 pt-0.5"
+      className="pr-0 pt-0.5 enabled:hover:text-primary [&_svg]:size-5"
       onClick={(e) => {
         e.stopPropagation()
         setIsDrawerOpen(true)
diff --git a/src/components/ScrollToTopButton/index.tsx b/src/components/ScrollToTopButton/index.tsx
index 1e042e8..0a1ab36 100644
--- a/src/components/ScrollToTopButton/index.tsx
+++ b/src/components/ScrollToTopButton/index.tsx
@@ -52,8 +52,8 @@ export default function ScrollToTopButton({
   return (
     <div
       className={cn(
-        'sticky z-30 flex justify-end w-full pr-3 pointer-events-none transition-all duration-700',
-        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-4',
+        'pointer-events-none sticky z-30 flex w-full justify-end pr-3 transition-all duration-700',
+        visible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0',
         className
       )}
       style={{
@@ -64,7 +64,7 @@ export default function ScrollToTopButton({
     >
       <Button
         variant="secondary-2"
-        className="rounded-full size-12 p-0 hover:text-background pointer-events-auto disabled:pointer-events-none transition-all duration-200"
+        className="pointer-events-auto size-12 rounded-full p-0 transition-all duration-200 hover:text-background disabled:pointer-events-none"
         onClick={handleScrollToTop}
         disabled={!visible}
       >
diff --git a/src/components/SearchBar/index.tsx b/src/components/SearchBar/index.tsx
index 1111cae..2540513 100644
--- a/src/components/SearchBar/index.tsx
+++ b/src/components/SearchBar/index.tsx
@@ -313,27 +313,27 @@ const SearchBar = forwardRef<
   )
 
   return (
-    <div className="relative flex gap-1 items-center h-full w-full">
+    <div className="relative flex h-full w-full items-center gap-1">
       {displayList && list && (
         <>
           <div
             className={cn(
-              'bg-surface-background rounded-b-lg shadow-lg z-50',
+              'z-50 rounded-b-lg bg-surface-background shadow-lg',
               isSmallScreen
-                ? 'fixed top-12 inset-x-0'
-                : 'absolute top-full -translate-y-2 inset-x-0 pt-3.5 pb-1 border px-1'
+                ? 'fixed inset-x-0 top-12'
+                : 'absolute inset-x-0 top-full -translate-y-2 border px-1 pb-1 pt-3.5'
             )}
             onMouseDown={(e) => e.preventDefault()}
           >
             <div className="h-fit">{list}</div>
           </div>
-          <div className="fixed inset-0 w-full h-full" onClick={() => blur()} />
+          <div className="fixed inset-0 h-full w-full" onClick={() => blur()} />
         </>
       )}
       <SearchInput
         ref={searchInputRef}
         className={cn(
-          'bg-surface-background shadow-inner h-full border-transparent',
+          'h-full border-transparent bg-surface-background shadow-inner',
           searching ? 'z-50' : ''
         )}
         placeholder={t('People, keywords, or relays')}
@@ -366,11 +366,11 @@ function NormalItem({
   const { t } = useTranslation()
   return (
     <Item onClick={onClick} selected={selected}>
-      <div className="size-10 flex justify-center items-center">
-        <Search className="text-muted-foreground flex-shrink-0" />
+      <div className="flex size-10 items-center justify-center">
+        <Search className="flex-shrink-0 text-muted-foreground" />
       </div>
-      <div className="flex flex-col min-w-0 flex-1">
-        <div className="font-semibold truncate">{search}</div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="truncate font-semibold">{search}</div>
         <div className="text-sm text-muted-foreground">{t('Search for notes')}</div>
       </div>
     </Item>
@@ -389,11 +389,11 @@ function HashtagItem({
   const { t } = useTranslation()
   return (
     <Item onClick={onClick} selected={selected}>
-      <div className="size-10 flex justify-center items-center">
-        <Hash className="text-muted-foreground flex-shrink-0" />
+      <div className="flex size-10 items-center justify-center">
+        <Hash className="flex-shrink-0 text-muted-foreground" />
       </div>
-      <div className="flex flex-col min-w-0 flex-1">
-        <div className="font-semibold truncate">#{hashtag}</div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="truncate font-semibold">#{hashtag}</div>
         <div className="text-sm text-muted-foreground">{t('Search for hashtag')}</div>
       </div>
     </Item>
@@ -412,11 +412,11 @@ function NoteItem({
   const { t } = useTranslation()
   return (
     <Item onClick={onClick} selected={selected}>
-      <div className="size-10 flex justify-center items-center">
-        <Notebook className="text-muted-foreground flex-shrink-0" />
+      <div className="flex size-10 items-center justify-center">
+        <Notebook className="flex-shrink-0 text-muted-foreground" />
       </div>
-      <div className="flex flex-col min-w-0 flex-1">
-        <div className="font-semibold truncate font-mono text-sm">{id}</div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="truncate font-mono text-sm font-semibold">{id}</div>
         <div className="text-sm text-muted-foreground">{t('Go to note')}</div>
       </div>
     </Item>
@@ -434,7 +434,7 @@ function ProfileItem({
 }) {
   return (
     <div
-      className={cn('px-2 hover:bg-accent rounded-md cursor-pointer', selected && 'bg-accent')}
+      className={cn('cursor-pointer rounded-md px-2 hover:bg-accent', selected && 'bg-accent')}
       onClick={onClick}
     >
       <UserItem
@@ -459,11 +459,11 @@ function RelayItem({
   const { t } = useTranslation()
   return (
     <Item onClick={onClick} selected={selected}>
-      <div className="size-10 flex justify-center items-center">
-        <Server className="text-muted-foreground flex-shrink-0" />
+      <div className="flex size-10 items-center justify-center">
+        <Server className="flex-shrink-0 text-muted-foreground" />
       </div>
-      <div className="flex flex-col min-w-0 flex-1">
-        <div className="font-semibold truncate">{url}</div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="truncate font-semibold">{url}</div>
         <div className="text-sm text-muted-foreground">{t('Go to relay')}</div>
       </div>
     </Item>
@@ -482,11 +482,11 @@ function ExternalContentItem({
   const { t } = useTranslation()
   return (
     <Item onClick={onClick} selected={selected}>
-      <div className="size-10 flex justify-center items-center">
-        <MessageSquare className="text-muted-foreground flex-shrink-0" />
+      <div className="flex size-10 items-center justify-center">
+        <MessageSquare className="flex-shrink-0 text-muted-foreground" />
       </div>
-      <div className="flex flex-col min-w-0 flex-1">
-        <div className="font-semibold truncate">{search}</div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="truncate font-semibold">{search}</div>
         <div className="text-sm text-muted-foreground">{t('View discussions about this')}</div>
       </div>
     </Item>
@@ -504,12 +504,12 @@ function NakItem({
 }) {
   return (
     <Item onClick={onClick} selected={selected}>
-      <div className="size-10 flex justify-center items-center">
-        <Terminal className="text-muted-foreground flex-shrink-0" />
+      <div className="flex size-10 items-center justify-center">
+        <Terminal className="flex-shrink-0 text-muted-foreground" />
       </div>
-      <div className="flex flex-col min-w-0 flex-1">
-        <div className="font-semibold truncate">REQ</div>
-        <div className="text-sm text-muted-foreground truncate">{description}</div>
+      <div className="flex min-w-0 flex-1 flex-col">
+        <div className="truncate font-semibold">REQ</div>
+        <div className="truncate text-sm text-muted-foreground">{description}</div>
       </div>
     </Item>
   )
@@ -524,7 +524,7 @@ function Item({
   return (
     <div
       className={cn(
-        'flex gap-2 items-center px-2 py-1.5 hover:bg-accent rounded-md cursor-pointer',
+        'flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 hover:bg-accent',
         selected ? 'bg-accent' : '',
         className
       )}
diff --git a/src/components/SearchInput/index.tsx b/src/components/SearchInput/index.tsx
index 9a5df37..1af3810 100644
--- a/src/components/SearchInput/index.tsx
+++ b/src/components/SearchInput/index.tsx
@@ -24,7 +24,7 @@ const SearchInput = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
       <div
         tabIndex={0}
         className={cn(
-          'flex h-9 w-full items-center rounded-xl border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-all duration-200 md:text-sm [&:has(:focus-visible)]:ring-ring [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:outline-none hover:border-ring/50',
+          'flex h-9 w-full items-center rounded-xl border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-all duration-200 hover:border-ring/50 md:text-sm [&:has(:focus-visible)]:outline-none [&:has(:focus-visible)]:ring-2 [&:has(:focus-visible)]:ring-ring',
           className
         )}
       >
@@ -35,12 +35,12 @@ const SearchInput = forwardRef<HTMLInputElement, ComponentProps<'input'>>(
           ref={setRefs}
           value={value}
           onChange={onChange}
-          className="size-full mx-2 border-none bg-transparent focus:outline-none placeholder:text-muted-foreground"
+          className="mx-2 size-full border-none bg-transparent placeholder:text-muted-foreground focus:outline-none"
         />
         {displayClear && (
           <button
             type="button"
-            className="rounded-full bg-foreground/40 hover:bg-foreground transition-opacity size-5 shrink-0 flex flex-col items-center justify-center"
+            className="flex size-5 shrink-0 flex-col items-center justify-center rounded-full bg-foreground/40 transition-opacity hover:bg-foreground"
             onMouseDown={(e) => e.preventDefault()}
             onClick={() => onChange?.({ target: { value: '' } } as any)}
           >
diff --git a/src/components/Settings/index.tsx b/src/components/Settings/index.tsx
index 6584444..27c6f7c 100644
--- a/src/components/Settings/index.tsx
+++ b/src/components/Settings/index.tsx
@@ -142,7 +142,7 @@ export default function Settings() {
             <Info />
             <div>{t('About')}</div>
           </div>
-          <div className="flex gap-2 items-center">
+          <div className="flex items-center gap-2">
             <div className="text-muted-foreground">
               v{import.meta.env.APP_VERSION} ({import.meta.env.GIT_COMMIT})
             </div>
@@ -162,7 +162,7 @@ const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
     return (
       <div
         className={cn(
-          'flex justify-between select-none items-center px-4 py-2 h-[52px] rounded-lg [&_svg]:size-4 [&_svg]:shrink-0',
+          'flex h-[52px] select-none items-center justify-between rounded-lg px-4 py-2 [&_svg]:size-4 [&_svg]:shrink-0',
           className
         )}
         {...props}
diff --git a/src/components/Sidebar/AccountButton.tsx b/src/components/Sidebar/AccountButton.tsx
index 26e905f..5403fb1 100644
--- a/src/components/Sidebar/AccountButton.tsx
+++ b/src/components/Sidebar/AccountButton.tsx
@@ -46,14 +46,14 @@ function ProfileButton({ collapse }: { collapse: boolean }) {
         <Button
           variant="ghost"
           className={cn(
-            'clickable shadow-none p-2 flex items-center bg-transparent text-foreground hover:text-accent-foreground rounded-lg justify-start gap-4 text-lg font-semibold',
-            collapse ? 'w-12 h-12' : 'w-full h-auto'
+            'clickable flex items-center justify-start gap-4 rounded-lg bg-transparent p-2 text-lg font-semibold text-foreground shadow-none hover:text-accent-foreground',
+            collapse ? 'h-12 w-12' : 'h-auto w-full'
           )}
         >
-          <div className="flex gap-2 items-center flex-1 w-0">
+          <div className="flex w-0 flex-1 items-center gap-2">
             <SimpleUserAvatar size="medium" userId={pubkey} />
             {!collapse && (
-              <SimpleUsername className="truncate font-semibold text-lg" userId={pubkey} />
+              <SimpleUsername className="truncate text-lg font-semibold" userId={pubkey} />
             )}
           </div>
         </Button>
@@ -75,12 +75,12 @@ function ProfileButton({ collapse }: { collapse: boolean }) {
               }
             }}
           >
-            <div className="flex gap-2 items-center flex-1">
+            <div className="flex flex-1 items-center gap-2">
               <SimpleUserAvatar userId={act.pubkey} />
-              <div className="flex-1 w-0">
+              <div className="w-0 flex-1">
                 <SimpleUsername
                   userId={act.pubkey}
-                  className="font-medium truncate"
+                  className="truncate font-medium"
                   skeletonClassName="h-3"
                 />
                 <SignerTypeBadge signerType={act.signerType} />
@@ -88,7 +88,7 @@ function ProfileButton({ collapse }: { collapse: boolean }) {
             </div>
             <div
               className={cn(
-                'border border-muted-foreground rounded-full size-3.5',
+                'size-3.5 rounded-full border border-muted-foreground',
                 act.pubkey === pubkey && 'size-4 border-4 border-primary'
               )}
             />
@@ -96,9 +96,9 @@ function ProfileButton({ collapse }: { collapse: boolean }) {
         ))}
         <DropdownMenuItem
           onClick={() => setLoginDialogOpen(true)}
-          className="border border-dashed m-2 focus:border-muted-foreground focus:bg-background"
+          className="m-2 border border-dashed focus:border-muted-foreground focus:bg-background"
         >
-          <div className="flex gap-2 items-center justify-center w-full py-2">
+          <div className="flex w-full items-center justify-center gap-2 py-2">
             <Plus />
             {t('Add an Account')}
           </div>
@@ -111,7 +111,7 @@ function ProfileButton({ collapse }: { collapse: boolean }) {
           <span className="shrink-0">{t('Logout')}</span>
           <SimpleUsername
             userId={pubkey}
-            className="text-muted-foreground border border-muted-foreground px-1 rounded-md text-xs truncate"
+            className="truncate rounded-md border border-muted-foreground px-1 text-xs text-muted-foreground"
           />
         </DropdownMenuItem>
       </DropdownMenuContent>
diff --git a/src/components/Sidebar/LayoutSwitcher.tsx b/src/components/Sidebar/LayoutSwitcher.tsx
index 1e7e6b6..7f1ec0b 100644
--- a/src/components/Sidebar/LayoutSwitcher.tsx
+++ b/src/components/Sidebar/LayoutSwitcher.tsx
@@ -26,13 +26,13 @@ export default function LayoutSwitcher({ collapse }: { collapse: boolean }) {
     <div className="rounded-lg bg-muted p-1 shadow-inner">
       <div className="relative flex items-center justify-around">
         <div
-          className="py-1 w-full z-10 cursor-pointer flex flex-col items-center"
+          className="z-10 flex w-full cursor-pointer flex-col items-center py-1"
           onClick={() => updateEnableSingleColumnLayout(false)}
         >
           <Columns2 className={cn('size-5', enableSingleColumnLayout && 'text-muted-foreground')} />
         </div>
         <div
-          className="py-1 w-full z-10 cursor-pointer flex flex-col items-center"
+          className="z-10 flex w-full cursor-pointer flex-col items-center py-1"
           onClick={() => updateEnableSingleColumnLayout(true)}
         >
           <PanelLeft
@@ -41,7 +41,7 @@ export default function LayoutSwitcher({ collapse }: { collapse: boolean }) {
         </div>
         <div
           className={cn(
-            'rounded-md absolute top-0 left-0 inset-0 w-1/2 h-full transition-transform shadow-sm',
+            'absolute inset-0 left-0 top-0 h-full w-1/2 rounded-md shadow-sm transition-transform',
             !enableSingleColumnLayout
               ? 'translate-x-0 bg-surface-background'
               : 'translate-x-full bg-background'
diff --git a/src/components/Sidebar/NotificationButton.tsx b/src/components/Sidebar/NotificationButton.tsx
index 862a6b2..fb50ffb 100644
--- a/src/components/Sidebar/NotificationButton.tsx
+++ b/src/components/Sidebar/NotificationButton.tsx
@@ -19,7 +19,7 @@ export default function NotificationsButton({ collapse }: { collapse: boolean })
       <div className="relative">
         <Bell />
         {hasNewNotification && (
-          <div className="absolute -top-1 right-0 w-2 h-2 ring-2 ring-background bg-primary rounded-full" />
+          <div className="absolute -top-1 right-0 h-2 w-2 rounded-full bg-primary ring-2 ring-background" />
         )}
       </div>
     </SidebarItem>
diff --git a/src/components/Sidebar/PostButton.tsx b/src/components/Sidebar/PostButton.tsx
index 7882d8e..43c3b93 100644
--- a/src/components/Sidebar/PostButton.tsx
+++ b/src/components/Sidebar/PostButton.tsx
@@ -21,7 +21,7 @@ export default function PostButton({ collapse }: { collapse: boolean }) {
           })
         }}
         variant="default"
-        className={cn('bg-primary gap-2', !collapse && 'justify-center')}
+        className={cn('gap-2 bg-primary', !collapse && 'justify-center')}
         collapse={collapse}
       >
         <PencilLine />
diff --git a/src/components/Sidebar/SidebarItem.tsx b/src/components/Sidebar/SidebarItem.tsx
index 8e669b6..8a092bd 100644
--- a/src/components/Sidebar/SidebarItem.tsx
+++ b/src/components/Sidebar/SidebarItem.tsx
@@ -12,11 +12,11 @@ const SidebarItem = forwardRef<
   return (
     <Button
       className={cn(
-        'flex shadow-none items-center transition-colors duration-500 bg-transparent m-0 rounded-lg gap-4 text-lg font-semibold',
+        'm-0 flex items-center gap-4 rounded-lg bg-transparent text-lg font-semibold shadow-none transition-colors duration-500',
         collapse
-          ? 'w-12 h-12 p-3 [&_svg]:size-full'
-          : 'justify-start w-full h-auto py-2 px-3 [&_svg]:size-5',
-        active && 'text-primary hover:text-primary bg-primary/10 hover:bg-primary/10',
+          ? 'h-12 w-12 p-3 [&_svg]:size-full'
+          : 'h-auto w-full justify-start px-3 py-2 [&_svg]:size-5',
+        active && 'bg-primary/10 text-primary hover:bg-primary/10 hover:text-primary',
         className
       )}
       variant="ghost"
diff --git a/src/components/Sidebar/index.tsx b/src/components/Sidebar/index.tsx
index ac5faba..d97c4bd 100644
--- a/src/components/Sidebar/index.tsx
+++ b/src/components/Sidebar/index.tsx
@@ -30,14 +30,14 @@ export default function PrimaryPageSidebar() {
   return (
     <div
       className={cn(
-        'relative flex flex-col pb-2 pt-3 justify-between h-full shrink-0',
-        sidebarCollapse ? 'px-2 w-16' : 'px-4 w-52'
+        'relative flex h-full shrink-0 flex-col justify-between pb-2 pt-3',
+        sidebarCollapse ? 'w-16 px-2' : 'w-52 px-4'
       )}
     >
       <div className="space-y-2">
         {sidebarCollapse ? (
           <button
-            className="px-3 py-1 mb-4 w-full cursor-pointer hover:opacity-80 transition-opacity"
+            className="mb-4 w-full cursor-pointer px-3 py-1 transition-opacity hover:opacity-80"
             onClick={() => navigate('home')}
             aria-label="Go to home"
           >
@@ -45,7 +45,7 @@ export default function PrimaryPageSidebar() {
           </button>
         ) : (
           <button
-            className="px-4 mb-4 w-full cursor-pointer hover:opacity-80 transition-opacity"
+            className="mb-4 w-full cursor-pointer px-4 transition-opacity hover:opacity-80"
             onClick={() => navigate('home')}
             aria-label="Go to home"
           >
@@ -67,10 +67,10 @@ export default function PrimaryPageSidebar() {
       </div>
       <button
         className={cn(
-          'absolute flex flex-col justify-center items-center w-5 h-6 p-0 rounded-l-md hover:shadow-md text-muted-foreground hover:text-foreground hover:bg-background transition-colors [&_svg]:size-4',
+          'absolute flex h-6 w-5 flex-col items-center justify-center rounded-l-md p-0 text-muted-foreground transition-colors hover:bg-background hover:text-foreground hover:shadow-md [&_svg]:size-4',
           themeSetting === 'pure-black' || enableSingleColumnLayout
-            ? 'top-3 right-0'
-            : 'top-5 -right-0.5'
+            ? 'right-0 top-3'
+            : '-right-0.5 top-5'
         )}
         onClick={(e) => {
           e.stopPropagation()
diff --git a/src/components/SignerTypeBadge/index.tsx b/src/components/SignerTypeBadge/index.tsx
index 1117c86..9a85300 100644
--- a/src/components/SignerTypeBadge/index.tsx
+++ b/src/components/SignerTypeBadge/index.tsx
@@ -6,18 +6,16 @@ export default function SignerTypeBadge({ signerType }: { signerType: TSignerTyp
   const { t } = useTranslation()
 
   if (signerType === 'nip-07') {
-    return <Badge className=" bg-green-400 hover:bg-green-400 px-1 py-0">{t('Extension')}</Badge>
+    return <Badge className="bg-green-400 px-1 py-0 hover:bg-green-400">{t('Extension')}</Badge>
   } else if (signerType === 'bunker') {
-    return <Badge className=" bg-blue-400 hover:bg-blue-400 px-1 py-0">{t('Remote')}</Badge>
+    return <Badge className="bg-blue-400 px-1 py-0 hover:bg-blue-400">{t('Remote')}</Badge>
   } else if (signerType === 'ncryptsec') {
     return (
-      <Badge className="bg-violet-400 hover:bg-violet-400 px-1 py-0">{t('Encrypted Key')}</Badge>
+      <Badge className="bg-violet-400 px-1 py-0 hover:bg-violet-400">{t('Encrypted Key')}</Badge>
     )
   } else if (signerType === 'nsec') {
-    return (
-      <Badge className=" bg-orange-400 hover:bg-orange-400 px-1 py-0">{t('Private Key')}</Badge>
-    )
+    return <Badge className="bg-orange-400 px-1 py-0 hover:bg-orange-400">{t('Private Key')}</Badge>
   } else if (signerType === 'npub') {
-    return <Badge className=" bg-yellow-400 hover:bg-yellow-400 px-1 py-0">NPUB</Badge>
+    return <Badge className="bg-yellow-400 px-1 py-0 hover:bg-yellow-400">NPUB</Badge>
   }
 }
diff --git a/src/components/Stars/index.tsx b/src/components/Stars/index.tsx
index 533917d..82c179f 100644
--- a/src/components/Stars/index.tsx
+++ b/src/components/Stars/index.tsx
@@ -9,7 +9,7 @@ export default function Stars({ stars, className }: { stars: number; className?:
     <div className={cn('flex items-center gap-1', className)}>
       {Array.from({ length: 5 }).map((_, index) =>
         index < roundedStars ? (
-          <Star key={index} className="size-4 text-foreground fill-foreground" />
+          <Star key={index} className="size-4 fill-foreground text-foreground" />
         ) : (
           <Star key={index} className="size-4 text-muted-foreground" />
         )
diff --git a/src/components/StuffStats/LikeButton.tsx b/src/components/StuffStats/LikeButton.tsx
index 2e34498..209c609 100644
--- a/src/components/StuffStats/LikeButton.tsx
+++ b/src/components/StuffStats/LikeButton.tsx
@@ -138,7 +138,7 @@ export default function LikeButton({ stuff }: { stuff: Event | string }) {
 
   const trigger = (
     <button
-      className="flex items-center enabled:hover:text-primary gap-1 px-3 h-full text-muted-foreground"
+      className="flex h-full items-center gap-1 px-3 text-muted-foreground enabled:hover:text-primary"
       title={t('Like')}
       disabled={liking}
       onClick={handleClick}
@@ -188,7 +188,7 @@ export default function LikeButton({ stuff }: { stuff: Event | string }) {
   return (
     <Popover open={isEmojiReactionsOpen} onOpenChange={(open) => setIsEmojiReactionsOpen(open)}>
       <PopoverAnchor asChild>{trigger}</PopoverAnchor>
-      <PopoverContent side="top" className="p-0 w-fit border-0 shadow-lg">
+      <PopoverContent side="top" className="w-fit border-0 p-0 shadow-lg">
         {isPickerOpen ? (
           <EmojiPicker
             onEmojiClick={(emoji, e) => {
diff --git a/src/components/StuffStats/Likes.tsx b/src/components/StuffStats/Likes.tsx
index 0acde9a..40859f3 100644
--- a/src/components/StuffStats/Likes.tsx
+++ b/src/components/StuffStats/Likes.tsx
@@ -124,16 +124,16 @@ export default function Likes({ stuff }: { stuff: Event | string }) {
   }
 
   return (
-    <ScrollArea className="pb-2 mb-1">
+    <ScrollArea className="mb-1 pb-2">
       <div className="flex gap-1">
         {likes.map(({ key, emoji, pubkeys }) => (
           <div
             key={key}
             className={cn(
-              'flex h-7 w-fit gap-2 px-2 rounded-full items-center border shrink-0 select-none relative overflow-hidden transition-all duration-200',
+              'relative flex h-7 w-fit shrink-0 select-none items-center gap-2 overflow-hidden rounded-full border px-2 transition-all duration-200',
               pubkey && pubkeys.has(pubkey)
-                ? 'border-primary bg-primary/20 text-foreground cursor-not-allowed'
-                : 'bg-muted/80 text-muted-foreground cursor-pointer hover:bg-primary/40 hover:border-primary hover:text-foreground',
+                ? 'cursor-not-allowed border-primary bg-primary/20 text-foreground'
+                : 'cursor-pointer bg-muted/80 text-muted-foreground hover:border-primary hover:bg-primary/40 hover:text-foreground',
               (isLongPressing === key || isCompleted === key) && 'border-primary bg-primary/20'
             )}
             onClick={(e) => e.stopPropagation()}
@@ -146,7 +146,7 @@ export default function Likes({ stuff }: { stuff: Event | string }) {
             onTouchCancel={handleMouseLeave}
           >
             {(isLongPressing === key || isCompleted === key) && (
-              <div className="absolute inset-0 rounded-full overflow-hidden">
+              <div className="absolute inset-0 overflow-hidden rounded-full">
                 <div
                   className="h-full bg-gradient-to-r from-primary/40 via-primary/60 to-primary/80"
                   style={{
@@ -159,7 +159,7 @@ export default function Likes({ stuff }: { stuff: Event | string }) {
             )}
             <div className="relative z-10 flex items-center gap-2">
               {liking === key ? (
-                <Loader className="animate-spin size-4" />
+                <Loader className="size-4 animate-spin" />
               ) : (
                 <div
                   style={{
diff --git a/src/components/StuffStats/ReplyButton.tsx b/src/components/StuffStats/ReplyButton.tsx
index d41b777..1bea58a 100644
--- a/src/components/StuffStats/ReplyButton.tsx
+++ b/src/components/StuffStats/ReplyButton.tsx
@@ -20,7 +20,7 @@ export default function ReplyButton({ stuff }: { stuff: Event | string }) {
     <>
       <button
         className={cn(
-          'flex gap-1 items-center enabled:hover:text-blue-400 pr-3 h-full',
+          'flex h-full items-center gap-1 pr-3 enabled:hover:text-blue-400',
           hasReplied ? 'text-blue-400' : 'text-muted-foreground'
         )}
         onClick={(e) => {
diff --git a/src/components/StuffStats/RepostButton.tsx b/src/components/StuffStats/RepostButton.tsx
index 88aae57..4a92ccc 100644
--- a/src/components/StuffStats/RepostButton.tsx
+++ b/src/components/StuffStats/RepostButton.tsx
@@ -103,7 +103,7 @@ export default function RepostButton({ stuff }: { stuff: Event | string }) {
   const trigger = (
     <button
       className={cn(
-        'flex gap-1 items-center px-3 h-full enabled:hover:text-lime-500 disabled:text-muted-foreground/40',
+        'flex h-full items-center gap-1 px-3 enabled:hover:text-lime-500 disabled:text-muted-foreground/40',
         hasReposted ? 'text-lime-500' : 'text-muted-foreground'
       )}
       disabled={!event}
@@ -148,7 +148,7 @@ export default function RepostButton({ stuff }: { stuff: Event | string }) {
                   repost()
                 }}
                 disabled={!canRepost}
-                className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5"
+                className="w-full justify-start gap-4 p-6 text-lg [&_svg]:size-5"
                 variant="ghost"
               >
                 <Repeat /> {t('Repost')}
@@ -161,7 +161,7 @@ export default function RepostButton({ stuff }: { stuff: Event | string }) {
                     setIsPostDialogOpen(true)
                   })
                 }}
-                className="w-full p-6 justify-start text-lg gap-4 [&_svg]:size-5"
+                className="w-full justify-start gap-4 p-6 text-lg [&_svg]:size-5"
                 variant="ghost"
               >
                 <PencilLine /> {t('Quote')}
diff --git a/src/components/StuffStats/SeenOnButton.tsx b/src/components/StuffStats/SeenOnButton.tsx
index 84d3b49..ebe2703 100644
--- a/src/components/StuffStats/SeenOnButton.tsx
+++ b/src/components/StuffStats/SeenOnButton.tsx
@@ -37,7 +37,7 @@ export default function SeenOnButton({ stuff }: { stuff: Event | string }) {
 
   const trigger = (
     <button
-      className="flex gap-1 items-center text-muted-foreground enabled:hover:text-primary pl-3 h-full disabled:text-muted-foreground/40"
+      className="flex h-full items-center gap-1 pl-3 text-muted-foreground enabled:hover:text-primary disabled:text-muted-foreground/40"
       title={t('Seen on')}
       disabled={relays.length === 0}
       onClick={() => {
@@ -67,7 +67,7 @@ export default function SeenOnButton({ stuff }: { stuff: Event | string }) {
             <div className="py-2">
               {relays.map((relay) => (
                 <Button
-                  className="w-full p-6 justify-start text-lg gap-4"
+                  className="w-full justify-start gap-4 p-6 text-lg"
                   variant="ghost"
                   key={relay}
                   onClick={() => {
diff --git a/src/components/StuffStats/TopZaps.tsx b/src/components/StuffStats/TopZaps.tsx
index 12bba57..ee54005 100644
--- a/src/components/StuffStats/TopZaps.tsx
+++ b/src/components/StuffStats/TopZaps.tsx
@@ -21,19 +21,19 @@ export default function TopZaps({ stuff }: { stuff: Event | string }) {
   if (!topZaps.length || !event) return null
 
   return (
-    <ScrollArea className="pb-2 mb-1">
+    <ScrollArea className="mb-1 pb-2">
       <div className="flex gap-1">
         {topZaps.map((zap, index) => (
           <div key={zap.pr}>
             <div
-              className="flex gap-1 py-1 pl-1 pr-2 text-sm max-w-72 rounded-full bg-muted/80 items-center text-yellow-400 border border-yellow-400 hover:bg-yellow-400/20 cursor-pointer"
+              className="flex max-w-72 cursor-pointer items-center gap-1 rounded-full border border-yellow-400 bg-muted/80 py-1 pl-1 pr-2 text-sm text-yellow-400 hover:bg-yellow-400/20"
               onClick={(e) => {
                 e.stopPropagation()
                 setZapIndex(index)
               }}
             >
               <SimpleUserAvatar userId={zap.pubkey} size="xSmall" />
-              <Zap className="size-3 fill-yellow-400 shrink-0" />
+              <Zap className="size-3 shrink-0 fill-yellow-400" />
               <div className="font-semibold">{formatAmount(zap.amount)}</div>
               <ContentPreview
                 className="truncate"
diff --git a/src/components/StuffStats/ZapButton.tsx b/src/components/StuffStats/ZapButton.tsx
index 061bc5c..93d4e7f 100644
--- a/src/components/StuffStats/ZapButton.tsx
+++ b/src/components/StuffStats/ZapButton.tsx
@@ -135,7 +135,7 @@ export default function ZapButton({ stuff }: { stuff: Event | string }) {
     <>
       <button
         className={cn(
-          'flex items-center gap-1 select-none px-3 h-full cursor-pointer enabled:hover:text-yellow-400 disabled:text-muted-foreground/40 disabled:cursor-default',
+          'flex h-full cursor-pointer select-none items-center gap-1 px-3 enabled:hover:text-yellow-400 disabled:cursor-default disabled:text-muted-foreground/40',
           hasZapped ? 'text-yellow-400' : 'text-muted-foreground'
         )}
         title={t('Zap')}
diff --git a/src/components/StuffStats/index.tsx b/src/components/StuffStats/index.tsx
index 6512357..7c3ae53 100644
--- a/src/components/StuffStats/index.tsx
+++ b/src/components/StuffStats/index.tsx
@@ -51,7 +51,7 @@ export default function StuffStats({
         )}
         <div
           className={cn(
-            'flex justify-between items-center h-5 [&_svg]:size-5',
+            'flex h-5 items-center justify-between [&_svg]:size-5',
             loading ? 'animate-pulse' : '',
             classNames?.buttonBar
           )}
@@ -76,7 +76,7 @@ export default function StuffStats({
           <Likes stuff={stuff} />
         </>
       )}
-      <div className="flex justify-between h-5 [&_svg]:size-4">
+      <div className="flex h-5 justify-between [&_svg]:size-4">
         <div
           className={cn('flex items-center', loading ? 'animate-pulse' : '')}
           onClick={(e) => e.stopPropagation()}
diff --git a/src/components/SuggestedEmojis/index.tsx b/src/components/SuggestedEmojis/index.tsx
index 93bfa10..8d15f96 100644
--- a/src/components/SuggestedEmojis/index.tsx
+++ b/src/components/SuggestedEmojis/index.tsx
@@ -44,7 +44,7 @@ export default function SuggestedEmojis({
   return (
     <div className="flex gap-1 p-1" onClick={(e) => e.stopPropagation()}>
       <div
-        className="w-8 h-8 rounded-lg clickable flex justify-center items-center text-xl"
+        className="clickable flex h-8 w-8 items-center justify-center rounded-lg text-xl"
         onClick={() => onEmojiClick('+')}
       >
         <Emoji emoji="+" />
@@ -53,14 +53,14 @@ export default function SuggestedEmojis({
         typeof emoji === 'string' ? (
           <div
             key={index}
-            className="w-8 h-8 rounded-lg clickable flex justify-center items-center text-xl"
+            className="clickable flex h-8 w-8 items-center justify-center rounded-lg text-xl"
             onClick={() => onEmojiClick(emoji)}
           >
             {emoji}
           </div>
         ) : (
           <div
-            className="flex flex-col items-center justify-center p-1 rounded-lg clickable"
+            className="clickable flex flex-col items-center justify-center rounded-lg p-1"
             key={index}
             onClick={() => onEmojiClick(emoji)}
           >
@@ -68,7 +68,7 @@ export default function SuggestedEmojis({
           </div>
         )
       )}
-      <Button variant="ghost" className="w-8 h-8 text-muted-foreground" onClick={onMoreButtonClick}>
+      <Button variant="ghost" className="h-8 w-8 text-muted-foreground" onClick={onMoreButtonClick}>
         <MoreHorizontal size={24} />
       </Button>
     </div>
diff --git a/src/components/Tabs/index.tsx b/src/components/Tabs/index.tsx
index 71dba23..46e532f 100644
--- a/src/components/Tabs/index.tsx
+++ b/src/components/Tabs/index.tsx
@@ -90,20 +90,20 @@ export default function Tabs({
     <div
       ref={containerRef}
       className={cn(
-        'sticky flex justify-between top-12 bg-background z-30 px-1 w-full transition-all duration-300 border-b',
+        'sticky top-12 z-30 flex w-full justify-between border-b bg-background px-1 transition-all duration-300',
         deepBrowsing && lastScrollTop > threshold && !active
           ? '-translate-y-[calc(100%+12rem)]'
           : ''
       )}
     >
-      <ScrollArea className="flex-1 w-0">
-        <div className="flex w-fit relative">
+      <ScrollArea className="w-0 flex-1">
+        <div className="relative flex w-fit">
           {tabs.map((tab, index) => (
             <div
               key={tab.value}
               ref={(el) => (tabRefs.current[index] = el)}
               className={cn(
-                `w-fit text-center py-2 px-4 my-1 font-semibold whitespace-nowrap clickable cursor-pointer rounded-xl transition-all duration-200`,
+                `clickable my-1 w-fit cursor-pointer whitespace-nowrap rounded-xl px-4 py-2 text-center font-semibold transition-all duration-200`,
                 value === tab.value
                   ? 'text-foreground'
                   : 'text-muted-foreground hover:text-foreground'
@@ -116,17 +116,17 @@ export default function Tabs({
             </div>
           ))}
           <div
-            className="absolute bottom-0 h-1 bg-gradient-to-r from-primary to-primary-hover rounded-full transition-all duration-300"
+            className="absolute bottom-0 h-1 rounded-full bg-gradient-to-r from-primary to-primary-hover transition-all duration-300"
             style={{
               width: `${indicatorStyle.width}px`,
               left: `${indicatorStyle.left}px`
             }}
           />
         </div>
-        <ScrollBar orientation="horizontal" className="opacity-0 pointer-events-none" />
+        <ScrollBar orientation="horizontal" className="pointer-events-none opacity-0" />
       </ScrollArea>
       {options && (
-        <div className="py-1 flex items-center gap-1">
+        <div className="flex items-center gap-1 py-1">
           <Separator orientation="vertical" className="h-8" />
           {options}
         </div>
diff --git a/src/components/Titlebar/index.tsx b/src/components/Titlebar/index.tsx
index 65fa2a0..83c6f2e 100644
--- a/src/components/Titlebar/index.tsx
+++ b/src/components/Titlebar/index.tsx
@@ -12,7 +12,7 @@ export function Titlebar({
   return (
     <div
       className={cn(
-        'sticky top-0 w-full h-12 z-40 bg-background [&_svg]:size-5 [&_svg]:shrink-0 select-none',
+        'sticky top-0 z-40 h-12 w-full select-none bg-background [&_svg]:size-5 [&_svg]:shrink-0',
         !hideBottomBorder && 'border-b',
         className
       )}
diff --git a/src/components/TooManyRelaysAlertDialog/index.tsx b/src/components/TooManyRelaysAlertDialog/index.tsx
index dada866..a7dcfa1 100644
--- a/src/components/TooManyRelaysAlertDialog/index.tsx
+++ b/src/components/TooManyRelaysAlertDialog/index.tsx
@@ -78,7 +78,7 @@ export default function TooManyRelaysAlertDialog() {
             <Button
               onClick={handleDismiss}
               variant="link"
-              className="text-muted-foreground text-xs"
+              className="text-xs text-muted-foreground"
             >
               {t("Don't remind me again")}
             </Button>
@@ -96,7 +96,7 @@ export default function TooManyRelaysAlertDialog() {
           <AlertDialogDescription>{description}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <Button onClick={handleDismiss} variant="link" className="text-muted-foreground text-xs">
+          <Button onClick={handleDismiss} variant="link" className="text-xs text-muted-foreground">
             {t("Don't remind me again")}
           </Button>
           <Button variant="outline" onClick={handleMaybeLater}>
diff --git a/src/components/TranslateButton/index.tsx b/src/components/TranslateButton/index.tsx
index ae3f015..d0180fb 100644
--- a/src/components/TranslateButton/index.tsx
+++ b/src/components/TranslateButton/index.tsx
@@ -71,7 +71,7 @@ export default function TranslateButton({
   return (
     <button
       className={cn(
-        'flex items-center text-muted-foreground hover:text-pink-400 px-2 py-1 h-full disabled:text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0 transition-colors',
+        'flex h-full items-center px-2 py-1 text-muted-foreground transition-colors hover:text-pink-400 disabled:text-muted-foreground [&_svg]:size-4 [&_svg]:shrink-0',
         className
       )}
       disabled={translating}
diff --git a/src/components/TrendingNotes/index.tsx b/src/components/TrendingNotes/index.tsx
index 51c7503..c368bfd 100644
--- a/src/components/TrendingNotes/index.tsx
+++ b/src/components/TrendingNotes/index.tsx
@@ -10,10 +10,10 @@ export default function TrendingNotes() {
 
   return (
     <div>
-      <div className="top-12 h-12 px-4 flex flex-col justify-center text-lg font-bold bg-background z-30 border-b">
+      <div className="top-12 z-30 flex h-12 flex-col justify-center border-b bg-background px-4 text-lg font-bold">
         <div className="flex items-center gap-2">
           {t('Trending Notes')}
-          <span className="text-sm text-muted-foreground font-normal">
+          <span className="text-sm font-normal text-muted-foreground">
             ({RESOURCE_DESCRIPTION})
           </span>
         </div>
diff --git a/src/components/TrustScoreFilter/index.tsx b/src/components/TrustScoreFilter/index.tsx
index da160e0..79d53a3 100644
--- a/src/components/TrustScoreFilter/index.tsx
+++ b/src/components/TrustScoreFilter/index.tsx
@@ -93,7 +93,7 @@ export default function TrustScoreFilter({
     >
       {temporaryScore < 100 ? <Shield size={16} /> : <ShieldCheck size={16} />}
       {temporaryScore > 0 && temporaryScore < 100 && (
-        <div className="absolute inset-0 w-full h-full flex flex-col items-center justify-center text-[0.5rem] font-mono font-bold">
+        <div className="absolute inset-0 flex h-full w-full flex-col items-center justify-center font-mono text-[0.5rem] font-bold">
           {temporaryScore}
         </div>
       )}
@@ -131,10 +131,10 @@ export default function TrustScoreFilter({
               key={level.value}
               onClick={() => handleScoreChange(level.value)}
               className={cn(
-                'text-center py-1.5 px-2 flex-1 rounded text-xs transition-all duration-200',
+                'flex-1 rounded px-2 py-1.5 text-center text-xs transition-all duration-200',
                 temporaryScore === level.value
-                  ? 'bg-primary text-primary-foreground font-medium shadow-sm'
-                  : 'bg-secondary hover:bg-secondary/80 hover:shadow-sm hover:scale-[1.02]'
+                  ? 'bg-primary font-medium text-primary-foreground shadow-sm'
+                  : 'bg-secondary hover:scale-[1.02] hover:bg-secondary/80 hover:shadow-sm'
               )}
             >
               {t(level.label)}
@@ -144,7 +144,7 @@ export default function TrustScoreFilter({
       </div>
 
       {/* Description */}
-      <div className="space-y-1 pt-2 border-t">
+      <div className="space-y-1 border-t pt-2">
         <div className="text-sm font-medium text-foreground">{description}</div>
         <div className="text-xs text-muted-foreground">
           {t('trust-filter.trust-score-description')}
@@ -173,7 +173,7 @@ export default function TrustScoreFilter({
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      <PopoverContent className="p-4 space-y-4 w-96" collisionPadding={16} sideOffset={0}>
+      <PopoverContent className="w-96 space-y-4 p-4" collisionPadding={16} sideOffset={0}>
         {content}
       </PopoverContent>
     </Popover>
diff --git a/src/components/UserAggregationList/index.tsx b/src/components/UserAggregationList/index.tsx
index 4c684df..45b7527 100644
--- a/src/components/UserAggregationList/index.tsx
+++ b/src/components/UserAggregationList/index.tsx
@@ -449,13 +449,13 @@ const UserAggregationList = forwardRef<
             <UserAggregationItemSkeleton />
           </div>
         ) : aggregations.length === 0 ? (
-          <div className="flex justify-center w-full mt-2">
+          <div className="mt-2 flex w-full justify-center">
             <Button size="lg" onClick={() => setRefreshCount((count) => count + 1)}>
               {t('Reload')}
             </Button>
           </div>
         ) : (
-          <div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
+          <div className="mt-2 text-center text-sm text-muted-foreground">{t('no more notes')}</div>
         )}
       </div>
     )
@@ -464,8 +464,8 @@ const UserAggregationList = forwardRef<
       <div>
         <div ref={topRef} className="scroll-mt-[calc(6rem+1px)]" />
         {showLoadingBar && <LoadingBar />}
-        <div className="border-b h-12 pl-4 pr-1 flex items-center justify-between gap-2">
-          <div className="text-sm text-muted-foreground flex items-center gap-1.5 min-w-0">
+        <div className="flex h-12 items-center justify-between gap-2 border-b pl-4 pr-1">
+          <div className="flex min-w-0 items-center gap-1.5 text-sm text-muted-foreground">
             <span className="font-medium text-foreground">
               {lastXDays === 1
                 ? t('Last 24 hours')
@@ -478,7 +478,7 @@ const UserAggregationList = forwardRef<
           </div>
           <Button
             variant="ghost"
-            className="h-10 px-3 shrink-0 rounded-lg text-muted-foreground hover:text-foreground"
+            className="h-10 shrink-0 rounded-lg px-3 text-muted-foreground hover:text-foreground"
             disabled={showLoadingBar || !hasMore}
             onClick={handleLoadEarlier}
           >
@@ -567,7 +567,7 @@ function UserAggregationItem({
   return (
     <div
       className={cn(
-        'group relative flex items-center gap-4 px-4 py-3 border-b hover:bg-accent/30 cursor-pointer transition-all duration-200',
+        'group relative flex cursor-pointer items-center gap-4 border-b px-4 py-3 transition-all duration-200 hover:bg-accent/30',
         isNew && 'bg-primary/15 hover:bg-primary/20'
       )}
       onClick={onClick}
@@ -581,13 +581,13 @@ function UserAggregationItem({
         <UserAvatar userId={aggregation.pubkey} className={!hasNewEvents ? 'grayscale' : ''} />
       )}
 
-      <div className="flex-1 min-w-0 flex flex-col">
+      <div className="flex min-w-0 flex-1 flex-col">
         <div className="flex items-center gap-2">
           {supportTouch ? (
             <SimpleUsername
               userId={aggregation.pubkey}
               className={cn(
-                'font-semibold text-base truncate max-w-fit',
+                'max-w-fit truncate text-base font-semibold',
                 !hasNewEvents && 'text-muted-foreground'
               )}
               skeletonClassName="h-4"
@@ -596,7 +596,7 @@ function UserAggregationItem({
             <Username
               userId={aggregation.pubkey}
               className={cn(
-                'font-semibold text-base truncate max-w-fit',
+                'max-w-fit truncate text-base font-semibold',
                 !hasNewEvents && 'text-muted-foreground'
               )}
               skeletonClassName="h-4"
@@ -630,9 +630,9 @@ function UserAggregationItem({
 
       <button
         className={cn(
-          'flex-shrink-0 size-10 rounded-full font-bold tabular-nums text-primary border border-primary/80 bg-primary/10 hover:border-primary hover:bg-primary/20 flex flex-col items-center justify-center transition-colors',
+          'flex size-10 flex-shrink-0 flex-col items-center justify-center rounded-full border border-primary/80 bg-primary/10 font-bold tabular-nums text-primary transition-colors hover:border-primary hover:bg-primary/20',
           !hasNewEvents &&
-            'border-muted-foreground/80 text-muted-foreground/80 bg-muted-foreground/10 hover:border-muted-foreground hover:text-muted-foreground hover:bg-muted-foreground/20'
+            'border-muted-foreground/80 bg-muted-foreground/10 text-muted-foreground/80 hover:border-muted-foreground hover:bg-muted-foreground/20 hover:text-muted-foreground'
         )}
         onClick={onToggleViewed}
       >
@@ -647,8 +647,8 @@ function UserAggregationItemSkeleton() {
     <div className="flex items-center gap-4 px-4 py-3">
       <Skeleton className="size-10 rounded-full" />
       <div className="flex-1">
-        <Skeleton className="h-4 w-36 my-1" />
-        <Skeleton className="h-3 w-14 my-1" />
+        <Skeleton className="my-1 h-4 w-36" />
+        <Skeleton className="my-1 h-3 w-14" />
       </div>
       <Skeleton className="size-10 rounded-full" />
     </div>
diff --git a/src/components/UserItem/index.tsx b/src/components/UserItem/index.tsx
index dc2eef6..a706d58 100644
--- a/src/components/UserItem/index.tsx
+++ b/src/components/UserItem/index.tsx
@@ -23,13 +23,13 @@ export default function UserItem({
   const pubkey = useMemo(() => userIdToPubkey(userId), [userId])
 
   return (
-    <div className={cn('flex gap-2 items-center h-14', className)}>
+    <div className={cn('flex h-14 items-center gap-2', className)}>
       <UserAvatar userId={userId} className="shrink-0" />
       <div className="w-full overflow-hidden">
         <div className="flex items-center gap-2">
           <Username
             userId={userId}
-            className="font-semibold truncate max-w-full w-fit"
+            className="w-fit max-w-full truncate font-semibold"
             skeletonClassName="h-4"
           />
           {showFollowingBadge && <FollowingBadge pubkey={pubkey} />}
@@ -44,14 +44,14 @@ export default function UserItem({
 
 export function UserItemSkeleton({ hideFollowButton }: { hideFollowButton?: boolean }) {
   return (
-    <div className="flex gap-2 items-center h-14">
-      <Skeleton className="w-10 h-10 rounded-full shrink-0" />
+    <div className="flex h-14 items-center gap-2">
+      <Skeleton className="h-10 w-10 shrink-0 rounded-full" />
       <div className="w-full">
         <div className="py-1">
-          <Skeleton className="w-16 h-4" />
+          <Skeleton className="h-4 w-16" />
         </div>
       </div>
-      {!hideFollowButton && <Skeleton className="rounded-full min-w-28 h-9" />}
+      {!hideFollowButton && <Skeleton className="h-9 min-w-28 rounded-full" />}
     </div>
   )
 }
diff --git a/src/components/VideoPlayer/index.tsx b/src/components/VideoPlayer/index.tsx
index 03d22dd..86b420e 100644
--- a/src/components/VideoPlayer/index.tsx
+++ b/src/components/VideoPlayer/index.tsx
@@ -79,7 +79,7 @@ export default function VideoPlayer({ src, className }: { src: string; className
         ref={videoRef}
         controls
         playsInline
-        className={cn('rounded-xl max-h-[80vh] sm:max-h-[60vh] border', className)}
+        className={cn('max-h-[80vh] rounded-xl border sm:max-h-[60vh]', className)}
         src={src}
         onClick={(e) => e.stopPropagation()}
         onPlay={(event) => {
diff --git a/src/components/WebPreview/index.tsx b/src/components/WebPreview/index.tsx
index cdc5073..8441b75 100644
--- a/src/components/WebPreview/index.tsx
+++ b/src/components/WebPreview/index.tsx
@@ -42,7 +42,7 @@ export default function WebPreview({
   if (isSmallScreen && image) {
     return (
       <div
-        className="rounded-xl border mt-2 overflow-hidden"
+        className="mt-2 overflow-hidden rounded-xl border"
         onClick={(e) => {
           e.stopPropagation()
           window.open(url, '_blank')
@@ -50,15 +50,15 @@ export default function WebPreview({
       >
         <Image
           image={{ url: image }}
-          className="w-full h-44"
+          className="h-44 w-full"
           classNames={{
             wrapper: 'rounded-none'
           }}
           hideIfError
         />
-        <div className="bg-muted p-2 w-full">
+        <div className="w-full bg-muted p-2">
           <div className="text-xs text-muted-foreground">{hostname}</div>
-          <div className="font-semibold line-clamp-1">{title}</div>
+          <div className="line-clamp-1 font-semibold">{title}</div>
         </div>
       </div>
     )
@@ -66,7 +66,7 @@ export default function WebPreview({
 
   return (
     <div
-      className={cn('p-0 clickable flex w-full border rounded-xl overflow-hidden', className)}
+      className={cn('clickable flex w-full overflow-hidden rounded-xl border p-0', className)}
       onClick={(e) => {
         e.stopPropagation()
         window.open(url, '_blank')
@@ -75,17 +75,17 @@ export default function WebPreview({
       {image && (
         <Image
           image={{ url: image }}
-          className="aspect-[4/3] xl:aspect-video bg-foreground h-44"
+          className="aspect-[4/3] h-44 bg-foreground xl:aspect-video"
           classNames={{
             wrapper: 'rounded-none border-r'
           }}
           hideIfError
         />
       )}
-      <div className="flex-1 w-0 p-2">
+      <div className="w-0 flex-1 p-2">
         <div className="text-xs text-muted-foreground">{hostname}</div>
-        <div className="font-semibold line-clamp-2">{title}</div>
-        <div className="text-xs text-muted-foreground line-clamp-5">{description}</div>
+        <div className="line-clamp-2 font-semibold">{title}</div>
+        <div className="line-clamp-5 text-xs text-muted-foreground">{description}</div>
       </div>
     </div>
   )
diff --git a/src/components/XEmbeddedPost/Post.tsx b/src/components/XEmbeddedPost/Post.tsx
index fe5ddf7..441a5e2 100644
--- a/src/components/XEmbeddedPost/Post.tsx
+++ b/src/components/XEmbeddedPost/Post.tsx
@@ -101,18 +101,18 @@ const Post = memo(({ tweetId, url, className, embedded = true }: PostProps) => {
 
   return (
     <div
-      className={cn('relative group', className)}
+      className={cn('group relative', className)}
       style={{
         maxWidth: '550px',
         minHeight: '225px'
       }}
     >
       <div ref={containerRef} className="cursor-pointer" onClick={handleViewComments} />
-      {!loaded && <Skeleton className="absolute inset-0 w-full h-full rounded-lg" />}
+      {!loaded && <Skeleton className="absolute inset-0 h-full w-full rounded-lg" />}
       {loaded && embedded && !supportTouch && (
         /* Hover overlay mask */
         <div
-          className="absolute inset-0 bg-muted/40 backdrop-blur-md opacity-0 group-hover:opacity-100 transition-opacity duration-200 flex items-center justify-center cursor-pointer rounded-lg"
+          className="absolute inset-0 flex cursor-pointer items-center justify-center rounded-lg bg-muted/40 opacity-0 backdrop-blur-md transition-opacity duration-200 group-hover:opacity-100"
           onClick={handleViewComments}
         >
           <div className="flex flex-col items-center gap-3">
diff --git a/src/components/XEmbeddedPost/index.tsx b/src/components/XEmbeddedPost/index.tsx
index 3258132..9d09003 100644
--- a/src/components/XEmbeddedPost/index.tsx
+++ b/src/components/XEmbeddedPost/index.tsx
@@ -33,7 +33,7 @@ export default function XEmbeddedPost({
   if (!display) {
     return (
       <div
-        className="text-primary hover:underline truncate w-fit cursor-pointer"
+        className="w-fit cursor-pointer truncate text-primary hover:underline"
         onClick={(e) => {
           e.stopPropagation()
           setDisplay(true)
diff --git a/src/components/YoutubeEmbeddedPlayer/Player.tsx b/src/components/YoutubeEmbeddedPlayer/Player.tsx
index 33c1895..c1bd2cc 100644
--- a/src/components/YoutubeEmbeddedPlayer/Player.tsx
+++ b/src/components/YoutubeEmbeddedPlayer/Player.tsx
@@ -155,12 +155,12 @@ const Player = memo(({ videoId, isShort, className }: PlayerProps) => {
     <div
       ref={wrapperRef}
       className={cn(
-        'rounded-xl border overflow-hidden',
+        'overflow-hidden rounded-xl border',
         isShort ? 'aspect-[9/16] max-h-[80vh] sm:max-h-[60vh]' : 'aspect-video max-h-[60vh]',
         className
       )}
     >
-      <div id={playerIdRef.current} ref={containerRef} className="w-full h-full" />
+      <div id={playerIdRef.current} ref={containerRef} className="h-full w-full" />
     </div>
   )
 })
diff --git a/src/components/YoutubeEmbeddedPlayer/index.tsx b/src/components/YoutubeEmbeddedPlayer/index.tsx
index ff9ddbf..a95a725 100644
--- a/src/components/YoutubeEmbeddedPlayer/index.tsx
+++ b/src/components/YoutubeEmbeddedPlayer/index.tsx
@@ -31,7 +31,7 @@ export default function YoutubeEmbeddedPlayer({
   if (!display) {
     return (
       <div
-        className="text-primary hover:underline truncate w-fit cursor-pointer"
+        className="w-fit cursor-pointer truncate text-primary hover:underline"
         onClick={(e) => {
           e.stopPropagation()
           setDisplay(true)
diff --git a/src/components/ZapDialog/index.tsx b/src/components/ZapDialog/index.tsx
index 5a1e2c2..3d02a94 100644
--- a/src/components/ZapDialog/index.tsx
+++ b/src/components/ZapDialog/index.tsx
@@ -74,13 +74,13 @@ export default function ZapDialog({
           hideOverlay
           onOpenAutoFocus={(e) => e.preventDefault()}
           ref={drawerContentRef}
-          className="flex flex-col gap-4 px-4 mb-4"
+          className="mb-4 flex flex-col gap-4 px-4"
         >
           <DrawerHeader>
-            <DrawerTitle className="flex gap-2 items-center">
+            <DrawerTitle className="flex items-center gap-2">
               <div className="shrink-0">{t('Zap to')}</div>
               <UserAvatar size="small" userId={pubkey} />
-              <Username userId={pubkey} className="truncate flex-1 w-0 text-start h-5" />
+              <Username userId={pubkey} className="h-5 w-0 flex-1 truncate text-start" />
             </DrawerTitle>
             <DialogDescription></DialogDescription>
           </DrawerHeader>
@@ -101,10 +101,10 @@ export default function ZapDialog({
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogContent onOpenAutoFocus={(e) => e.preventDefault()}>
         <DialogHeader>
-          <DialogTitle className="flex gap-2 items-center">
+          <DialogTitle className="flex items-center gap-2">
             <div className="shrink-0">{t('Zap to')}</div>
             <UserAvatar size="small" userId={pubkey} />
-            <Username userId={pubkey} className="truncate flex-1 max-w-fit text-start h-5" />
+            <Username userId={pubkey} className="h-5 max-w-fit flex-1 truncate text-start" />
           </DialogTitle>
         </DialogHeader>
         <ZapDialogContent
@@ -202,7 +202,7 @@ function ZapDialogContent({
     <>
       {/* Sats slider or input */}
       <div className="flex flex-col items-center">
-        <div className="flex justify-center w-full">
+        <div className="flex w-full justify-center">
           <input
             id="sats"
             value={sats}
@@ -224,7 +224,7 @@ function ZapDialogContent({
                 e.target.setSelectionRange(val.length, val.length)
               })
             }}
-            className="bg-transparent text-center w-full p-0 focus-visible:outline-none text-6xl font-bold"
+            className="w-full bg-transparent p-0 text-center text-6xl font-bold focus-visible:outline-none"
           />
         </div>
         <Label htmlFor="sats">{t('Sats')}</Label>
@@ -232,7 +232,7 @@ function ZapDialogContent({
 
       {/* Self-zap easter egg warning */}
       {isSelfZap && (
-        <div className="text-sm text-yellow-600 dark:text-yellow-400 text-center px-4 py-2 bg-yellow-50 dark:bg-yellow-950/30 rounded-md border border-yellow-200 dark:border-yellow-900">
+        <div className="rounded-md border border-yellow-200 bg-yellow-50 px-4 py-2 text-center text-sm text-yellow-600 dark:border-yellow-900 dark:bg-yellow-950/30 dark:text-yellow-400">
           {t('selfZapWarning')}
         </div>
       )}
diff --git a/src/components/ZapList/index.tsx b/src/components/ZapList/index.tsx
index 8e15dfe..c9fc101 100644
--- a/src/components/ZapList/index.tsx
+++ b/src/components/ZapList/index.tsx
@@ -44,20 +44,20 @@ export default function ZapList({ event }: { event: Event }) {
       {filteredZaps.slice(0, showCount).map((zap) => (
         <div
           key={zap.pr}
-          className="px-4 py-3 border-b transition-colors clickable flex gap-2"
+          className="clickable flex gap-2 border-b px-4 py-3 transition-colors"
           onClick={() => push(toProfile(zap.pubkey))}
         >
-          <div className="w-8 flex flex-col items-center mt-0.5">
-            <Zap className="text-yellow-400 size-5" />
+          <div className="mt-0.5 flex w-8 flex-col items-center">
+            <Zap className="size-5 text-yellow-400" />
             <div className="text-sm font-semibold text-yellow-400">{formatAmount(zap.amount)}</div>
           </div>
 
-          <div className="flex space-x-2 items-start">
-            <UserAvatar userId={zap.pubkey} size="medium" className="shrink-0 mt-0.5" />
+          <div className="flex items-start space-x-2">
+            <UserAvatar userId={zap.pubkey} size="medium" className="mt-0.5 shrink-0" />
             <div className="flex-1">
               <Username
                 userId={zap.pubkey}
-                className="text-sm font-semibold text-muted-foreground hover:text-foreground max-w-fit truncate"
+                className="max-w-fit truncate text-sm font-semibold text-muted-foreground hover:text-foreground"
                 skeletonClassName="h-3"
               />
               <div className="flex items-center gap-1 text-sm text-muted-foreground">
@@ -76,7 +76,7 @@ export default function ZapList({ event }: { event: Event }) {
 
       <div ref={bottomRef} />
 
-      <div className="text-sm mt-2 text-center text-muted-foreground">
+      <div className="mt-2 text-center text-sm text-muted-foreground">
         {filteredZaps.length > 0 ? t('No more zaps') : t('No zaps yet')}
       </div>
     </div>
diff --git a/src/components/ui/checkbox.tsx b/src/components/ui/checkbox.tsx
index e3ef33e..640b6bd 100644
--- a/src/components/ui/checkbox.tsx
+++ b/src/components/ui/checkbox.tsx
@@ -11,7 +11,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      'peer h-4 w-4 shrink-0 rounded-md border border-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground transition-all duration-200 hover:border-primary/50',
+      'peer h-4 w-4 shrink-0 rounded-md border border-accent transition-all duration-200 hover:border-primary/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
       className
     )}
     {...props}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 2741e1f..086d6b6 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -41,7 +41,7 @@ const CommandDialog = ({
       </DialogHeader>
       <DialogContent
         className={cn(
-          'overflow-hidden p-0 shadow-lg top-4 translate-y-0 data-[state=closed]:slide-out-to-top-4 data-[state=open]:slide-in-from-top-4',
+          'top-4 translate-y-0 overflow-hidden p-0 shadow-lg data-[state=closed]:slide-out-to-top-4 data-[state=open]:slide-in-from-top-4',
           classNames?.content
         )}
       >
@@ -65,7 +65,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        'flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 pr-6',
+        'flex h-10 w-full rounded-md bg-transparent py-3 pr-6 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
         className
       )}
       {...props}
@@ -130,7 +130,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       className
     )}
     {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index 768671c..160231d 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -77,14 +77,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 sm:border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-xl sm:border',
         className
       )}
       {...props}
     >
       {children}
       {!withoutClose && (
-        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg opacity-70 ring-offset-background transition-all hover:opacity-100 hover:bg-accent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground p-1">
+        <DialogPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1 opacity-70 ring-offset-background transition-all hover:bg-accent hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
           <X className="h-4 w-4" />
           <span className="sr-only">Close</span>
         </DialogPrimitive.Close>
diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx
index 95848a9..4060a06 100644
--- a/src/components/ui/drawer.tsx
+++ b/src/components/ui/drawer.tsx
@@ -76,7 +76,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-2xl sm:border bg-background',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-2xl bg-background sm:border',
         className
       )}
       style={{
@@ -85,7 +85,7 @@ const DrawerContent = React.forwardRef<
       onOpenAutoFocus={(e) => e.preventDefault()}
       {...props}
     >
-      <div className="mx-auto mt-4 pb-2 mb-2 h-2 w-[100px] rounded-full bg-muted" />
+      <div className="mx-auto mb-2 mt-4 h-2 w-[100px] rounded-full bg-muted pb-2" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 229539a..782215b 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -45,7 +45,7 @@ const DropdownMenu = ({
         createPortal(
           <div
             ref={backdropRef}
-            className="fixed inset-0 z-50 pointer-events-auto"
+            className="pointer-events-auto fixed inset-0 z-50"
             onClick={(e) => {
               e.stopPropagation()
               handleOpenChange(false)
@@ -83,7 +83,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       inset && 'pl-8',
       className
     )}
@@ -143,11 +143,11 @@ const DropdownMenuSubContent = React.forwardRef<
         {...props}
       >
         {showScrollButtons && canScrollUp && (
-          <div className="absolute top-0 inset-x-0 z-10 flex items-center justify-center bg-popover">
+          <div className="absolute inset-x-0 top-0 z-10 flex items-center justify-center bg-popover">
             <button
               onClick={scrollUp}
               onMouseEnter={scrollUp}
-              className="flex items-center justify-center w-full h-6 hover:bg-accent rounded-sm transition-colors"
+              className="flex h-6 w-full items-center justify-center rounded-sm transition-colors hover:bg-accent"
               type="button"
             >
               <ChevronUp className="h-4 w-4" />
@@ -157,18 +157,18 @@ const DropdownMenuSubContent = React.forwardRef<
 
         <div
           ref={scrollAreaRef}
-          className={cn('p-1 overflow-y-auto scrollbar-hide', className)}
+          className={cn('scrollbar-hide overflow-y-auto p-1', className)}
           onScroll={checkScrollability}
         >
           {props.children}
         </div>
 
         {showScrollButtons && canScrollDown && (
-          <div className="absolute bottom-0 inset-x-0 flex items-center justify-center bg-popover">
+          <div className="absolute inset-x-0 bottom-0 flex items-center justify-center bg-popover">
             <button
               onClick={scrollDown}
               onMouseEnter={scrollDown}
-              className="flex items-center justify-center w-full h-6 hover:bg-accent rounded-sm transition-colors"
+              className="flex h-6 w-full items-center justify-center rounded-sm transition-colors hover:bg-accent"
               type="button"
             >
               <ChevronDown className="h-4 w-4" />
@@ -230,11 +230,11 @@ const DropdownMenuContent = React.forwardRef<
         {...props}
       >
         {showScrollButtons && canScrollUp && (
-          <div className="absolute top-0 inset-x-0 z-10 flex items-center justify-center bg-popover">
+          <div className="absolute inset-x-0 top-0 z-10 flex items-center justify-center bg-popover">
             <button
               onClick={scrollUp}
               onMouseEnter={scrollUp}
-              className="flex items-center justify-center w-full h-6 hover:bg-accent rounded-sm transition-colors"
+              className="flex h-6 w-full items-center justify-center rounded-sm transition-colors hover:bg-accent"
               type="button"
             >
               <ChevronUp className="h-4 w-4" />
@@ -244,7 +244,7 @@ const DropdownMenuContent = React.forwardRef<
 
         <div
           ref={scrollAreaRef}
-          className={cn('p-1 overflow-y-auto scrollbar-hide', className)}
+          className={cn('scrollbar-hide overflow-y-auto p-1', className)}
           onScroll={checkScrollability}
           onWheel={(e) => e.stopPropagation()}
         >
@@ -252,11 +252,11 @@ const DropdownMenuContent = React.forwardRef<
         </div>
 
         {showScrollButtons && canScrollDown && (
-          <div className="absolute bottom-0 inset-x-0 flex items-center justify-center bg-popover">
+          <div className="absolute inset-x-0 bottom-0 flex items-center justify-center bg-popover">
             <button
               onClick={scrollDown}
               onMouseEnter={scrollDown}
-              className="flex items-center justify-center w-full h-6 hover:bg-accent rounded-sm transition-colors"
+              className="flex h-6 w-full items-center justify-center rounded-sm transition-colors hover:bg-accent"
               type="button"
             >
               <ChevronDown className="h-4 w-4" />
@@ -278,7 +278,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 rounded-md',
+      'relative flex cursor-pointer select-none items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       inset && 'pl-8',
       className
     )}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 291ebc2..579a734 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<'input'>>(
       <input
         type={type}
         className={cn(
-          'flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-base transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm hover:border-ring/50',
+          'flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-base transition-all duration-200 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-ring/50 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx
index 0adf024..5fc42f4 100644
--- a/src/components/ui/popover.tsx
+++ b/src/components/ui/popover.tsx
@@ -30,7 +30,7 @@ const Popover = ({
         createPortal(
           <div
             ref={backdropRef}
-            className="fixed inset-0 z-40 pointer-events-auto"
+            className="pointer-events-auto fixed inset-0 z-40"
             onClick={(e) => {
               e.stopPropagation()
               handleOpenChange(false)
diff --git a/src/components/ui/select.tsx b/src/components/ui/select.tsx
index 294917f..5528dc4 100644
--- a/src/components/ui/select.tsx
+++ b/src/components/ui/select.tsx
@@ -17,7 +17,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-all duration-200 hover:border-ring/50',
+      'flex h-9 w-full items-center justify-between whitespace-nowrap rounded-lg border border-input bg-background px-3 py-2 text-sm ring-offset-background transition-all duration-200 placeholder:text-muted-foreground hover:border-ring/50 focus:border-ring focus:outline-none focus:ring-2 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
diff --git a/src/components/ui/slider.tsx b/src/components/ui/slider.tsx
index b4a4efb..4ce3e25 100644
--- a/src/components/ui/slider.tsx
+++ b/src/components/ui/slider.tsx
@@ -24,16 +24,16 @@ const Slider = React.forwardRef<
     >
       <SliderPrimitive.Track
         className={cn(
-          'relative w-full grow overflow-hidden rounded-full bg-primary/20 cursor-pointer transition-all',
+          'relative w-full grow cursor-pointer overflow-hidden rounded-full bg-primary/20 transition-all',
           isHovered && enableHoverAnimation ? 'h-3' : 'h-1.5'
         )}
       >
-        <SliderPrimitive.Range className="absolute h-full bg-primary disabled:bg-primary/30 rounded-full" />
+        <SliderPrimitive.Range className="absolute h-full rounded-full bg-primary disabled:bg-primary/30" />
       </SliderPrimitive.Track>
       {!hideThumb && (
         <SliderPrimitive.Thumb
           className={cn(
-            'block h-4 w-4 rounded-full border-2 border-primary bg-background transition-all duration-200 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
+            'block h-4 w-4 cursor-pointer rounded-full border-2 border-primary bg-background transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50'
           )}
         />
       )}
diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
index 057a6ab..6367ea3 100644
--- a/src/components/ui/textarea.tsx
+++ b/src/components/ui/textarea.tsx
@@ -7,7 +7,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<'tex
     return (
       <textarea
         className={cn(
-          'flex min-h-[80px] w-full rounded-lg border border-input bg-background select-text px-3 py-2 text-base placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:border-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm transition-all duration-200 hover:border-ring/50 resize-none',
+          'flex min-h-[80px] w-full select-text resize-none rounded-lg border border-input bg-background px-3 py-2 text-base transition-all duration-200 placeholder:text-muted-foreground hover:border-ring/50 focus-visible:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
           className
         )}
         ref={ref}
diff --git a/src/layouts/SecondaryPageLayout/index.tsx b/src/layouts/SecondaryPageLayout/index.tsx
index d024da7..3ccfb87 100644
--- a/src/layouts/SecondaryPageLayout/index.tsx
+++ b/src/layouts/SecondaryPageLayout/index.tsx
@@ -132,15 +132,15 @@ export function SecondaryPageTitlebar({
   }
   return (
     <Titlebar
-      className="flex gap-1 p-1 items-center justify-between font-semibold"
+      className="flex items-center justify-between gap-1 p-1 font-semibold"
       hideBottomBorder={hideBottomBorder}
     >
       {hideBackButton ? (
-        <div className="flex gap-2 items-center pl-3 w-fit truncate text-lg font-semibold">
+        <div className="flex w-fit items-center gap-2 truncate pl-3 text-lg font-semibold">
           {title}
         </div>
       ) : (
-        <div className="flex items-center flex-1 w-0">
+        <div className="flex w-0 flex-1 items-center">
           <BackButton>{title}</BackButton>
         </div>
       )}
@@ -155,7 +155,7 @@ function BackButton({ children }: { children?: React.ReactNode }) {
 
   return (
     <Button
-      className="flex gap-1 items-center w-fit max-w-full justify-start pl-2 pr-3"
+      className="flex w-fit max-w-full items-center justify-start gap-1 pl-2 pr-3"
       variant="ghost"
       size="titlebar-icon"
       title={t('back')}
diff --git a/src/lib/event-metadata.ts b/src/lib/event-metadata.ts
index 750a63b..969f26a 100644
--- a/src/lib/event-metadata.ts
+++ b/src/lib/event-metadata.ts
@@ -14,7 +14,7 @@ export function getRelayListFromEvent(
   filterOutOnionRelays: boolean = true
 ): TRelayList {
   const defaultRelays = getDefaultRelayUrls()
-  
+
   if (!event) {
     return { write: defaultRelays, read: defaultRelays, originalRelays: [] }
   }
diff --git a/src/pages/primary/BookmarkPage/index.tsx b/src/pages/primary/BookmarkPage/index.tsx
index 22a58a2..4851d08 100644
--- a/src/pages/primary/BookmarkPage/index.tsx
+++ b/src/pages/primary/BookmarkPage/index.tsx
@@ -22,7 +22,7 @@ function BookmarkPageTitlebar() {
   const { t } = useTranslation()
 
   return (
-    <div className="flex gap-2 items-center h-full pl-3">
+    <div className="flex h-full items-center gap-2 pl-3">
       <BookmarkIcon />
       <div className="text-lg font-semibold">{t('Bookmarks')}</div>
     </div>
diff --git a/src/pages/primary/ExplorePage/index.tsx b/src/pages/primary/ExplorePage/index.tsx
index ffb3d67..1539aac 100644
--- a/src/pages/primary/ExplorePage/index.tsx
+++ b/src/pages/primary/ExplorePage/index.tsx
@@ -83,8 +83,8 @@ function ExplorePageTitlebar() {
   const { t } = useTranslation()
 
   return (
-    <div className="flex gap-2 justify-between h-full">
-      <div className="flex gap-2 items-center h-full pl-3">
+    <div className="flex h-full justify-between gap-2">
+      <div className="flex h-full items-center gap-2 pl-3">
         <Compass />
         <div className="text-lg font-semibold">{t('Explore')}</div>
       </div>
diff --git a/src/pages/primary/MePage/index.tsx b/src/pages/primary/MePage/index.tsx
index 52034ba..d2631d8 100644
--- a/src/pages/primary/MePage/index.tsx
+++ b/src/pages/primary/MePage/index.tsx
@@ -41,7 +41,7 @@ const MePage = forwardRef<TPageRef>((_, ref) => {
         titlebar={<MePageTitlebar />}
         hideTitlebarBottomBorder
       >
-        <div className="flex flex-col p-4 gap-4 overflow-auto">
+        <div className="flex flex-col gap-4 overflow-auto p-4">
           <AccountManager />
         </div>
       </PrimaryPageLayout>
@@ -55,15 +55,15 @@ const MePage = forwardRef<TPageRef>((_, ref) => {
       titlebar={<MePageTitlebar />}
       hideTitlebarBottomBorder
     >
-      <div className="flex gap-4 items-center p-4">
+      <div className="flex items-center gap-4 p-4">
         <SimpleUserAvatar userId={pubkey} size="big" />
-        <div className="space-y-1 flex-1 w-0">
+        <div className="w-0 flex-1 space-y-1">
           <SimpleUsername
-            className="text-xl font-semibold text-wrap"
+            className="text-wrap text-xl font-semibold"
             userId={pubkey}
             skeletonClassName="h-6 w-32"
           />
-          <div className="flex gap-1 mt-1">
+          <div className="mt-1 flex gap-1">
             <PubkeyCopy pubkey={pubkey} />
             <NpubQrCode pubkey={pubkey} />
           </div>
@@ -108,7 +108,7 @@ export default MePage
 function MePageTitlebar() {
   const { push } = useSecondaryPage()
   return (
-    <div className="flex justify-end items-center">
+    <div className="flex items-center justify-end">
       <Button variant="ghost" size="titlebar-icon" onClick={() => push(toSettings())}>
         <Settings />
       </Button>
@@ -125,7 +125,7 @@ function Item({
   return (
     <div
       className={cn(
-        'flex clickable justify-between items-center px-4 py-2 h-[52px] rounded-lg [&_svg]:size-4 [&_svg]:shrink-0',
+        'clickable flex h-[52px] items-center justify-between rounded-lg px-4 py-2 [&_svg]:size-4 [&_svg]:shrink-0',
         className
       )}
       {...props}
diff --git a/src/pages/primary/NoteListPage/FeedButton.tsx b/src/pages/primary/NoteListPage/FeedButton.tsx
index ef75c55..7c491df 100644
--- a/src/pages/primary/NoteListPage/FeedButton.tsx
+++ b/src/pages/primary/NoteListPage/FeedButton.tsx
@@ -22,7 +22,7 @@ export default function FeedButton({ className }: { className?: string }) {
         <Drawer open={open} onOpenChange={setOpen}>
           <DrawerContent className="max-h-[85vh]">
             <div
-              className="flex-1 overflow-y-auto overscroll-contain py-3 px-4"
+              className="flex-1 overflow-y-auto overscroll-contain px-4 py-3"
               style={{
                 touchAction: 'pan-y',
                 WebkitOverflowScrolling: 'touch'
@@ -41,9 +41,9 @@ export default function FeedButton({ className }: { className?: string }) {
       <PopoverTrigger asChild>
         <FeedSwitcherTrigger className={className} />
       </PopoverTrigger>
-      <PopoverContent sideOffset={0} side="bottom" className="w-[400px] p-0 overflow-hidden">
+      <PopoverContent sideOffset={0} side="bottom" className="w-[400px] overflow-hidden p-0">
         <div
-          className="max-h-[calc(100vh-16rem)] overflow-y-auto overscroll-contain py-3 px-4"
+          className="max-h-[calc(100vh-16rem)] overflow-y-auto overscroll-contain px-4 py-3"
           onWheel={(e) => e.stopPropagation()}
           onTouchMove={(e) => e.stopPropagation()}
         >
@@ -94,12 +94,12 @@ const FeedSwitcherTrigger = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEle
 
     return (
       <div
-        className={cn('flex items-center gap-2 clickable px-3 h-full rounded-xl', className)}
+        className={cn('clickable flex h-full items-center gap-2 rounded-xl px-3', className)}
         ref={ref}
         {...props}
       >
         {icon}
-        <div className="text-lg font-semibold truncate">{title}</div>
+        <div className="truncate text-lg font-semibold">{title}</div>
         <ChevronDown />
       </div>
     )
diff --git a/src/pages/primary/NoteListPage/FollowingFeed.tsx b/src/pages/primary/NoteListPage/FollowingFeed.tsx
index 211ee3a..05d9f3c 100644
--- a/src/pages/primary/NoteListPage/FollowingFeed.tsx
+++ b/src/pages/primary/NoteListPage/FollowingFeed.tsx
@@ -44,15 +44,15 @@ export default function FollowingFeed() {
   // Show empty state when user has no followings
   if (hasFollowings === false && subRequests.length > 0) {
     return (
-      <div className="flex flex-col items-center justify-center min-h-[60vh] px-6 text-center">
-        <UserPlus size={64} className="text-muted-foreground mb-4" strokeWidth={1.5} />
-        <h2 className="text-2xl font-semibold mb-2">{t('Welcome to Jumble!')}</h2>
-        <p className="text-muted-foreground mb-6 max-w-md">
+      <div className="flex min-h-[60vh] flex-col items-center justify-center px-6 text-center">
+        <UserPlus size={64} className="mb-4 text-muted-foreground" strokeWidth={1.5} />
+        <h2 className="mb-2 text-2xl font-semibold">{t('Welcome to Jumble!')}</h2>
+        <p className="mb-6 max-w-md text-muted-foreground">
           {t(
             'Your feed is empty because you are not following anyone yet. Start by exploring interesting content and following users you like!'
           )}
         </p>
-        <div className="flex flex-col sm:flex-row gap-3 w-full max-w-md">
+        <div className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
           <Button size="lg" onClick={() => navigate('explore')} className="w-full">
             <Compass className="size-5" />
             {t('Explore')}
diff --git a/src/pages/primary/NoteListPage/index.tsx b/src/pages/primary/NoteListPage/index.tsx
index fd4751e..babc432 100644
--- a/src/pages/primary/NoteListPage/index.tsx
+++ b/src/pages/primary/NoteListPage/index.tsx
@@ -53,7 +53,7 @@ const NoteListPage = forwardRef<TPageRef>((_, ref) => {
   let content: React.ReactNode = null
   if (!isReady) {
     content = (
-      <div className="text-center text-sm text-muted-foreground pt-3">{t('loading...')}</div>
+      <div className="pt-3 text-center text-sm text-muted-foreground">{t('loading...')}</div>
     )
   } else if (!feedInfo) {
     content = <WelcomeGuide />
@@ -112,9 +112,9 @@ function NoteListPageTitlebar({
   const { isSmallScreen } = useScreenSize()
 
   return (
-    <div className="flex gap-1 items-center h-full justify-between">
-      <FeedButton className="flex-1 max-w-fit w-0" />
-      <div className="shrink-0 flex gap-1 items-center">
+    <div className="flex h-full items-center justify-between gap-1">
+      <FeedButton className="w-0 max-w-fit flex-1" />
+      <div className="flex shrink-0 items-center gap-1">
         {setShowRelayDetails && (
           <Button
             variant="ghost"
@@ -182,21 +182,21 @@ function WelcomeGuide() {
   const { checkLogin } = useNostr()
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-[60vh] px-4 text-center space-y-6">
+    <div className="flex min-h-[60vh] flex-col items-center justify-center space-y-6 px-4 text-center">
       <div className="space-y-2">
-        <div className="flex items-center w-full justify-center gap-2">
+        <div className="flex w-full items-center justify-center gap-2">
           <Sparkles className="text-yellow-400" />
           <h2 className="text-2xl font-bold">{t('Welcome to Jumble')}</h2>
           <Sparkles className="text-yellow-400" />
         </div>
-        <p className="text-muted-foreground max-w-md">
+        <p className="max-w-md text-muted-foreground">
           {t(
             'Jumble is a client focused on browsing relays. Get started by exploring interesting relays or login to view your following feed.'
           )}
         </p>
       </div>
 
-      <div className="flex flex-col sm:flex-row gap-3 w-full max-w-md">
+      <div className="flex w-full max-w-md flex-col gap-3 sm:flex-row">
         <Button size="lg" className="w-full" onClick={() => navigate('explore')}>
           <Compass className="size-5" />
           {t('Explore')}
diff --git a/src/pages/primary/NotificationListPage/index.tsx b/src/pages/primary/NotificationListPage/index.tsx
index ca52749..74fe7ae 100644
--- a/src/pages/primary/NotificationListPage/index.tsx
+++ b/src/pages/primary/NotificationListPage/index.tsx
@@ -59,7 +59,7 @@ function NotificationListPageTitlebar() {
   const { t } = useTranslation()
 
   return (
-    <div className="flex gap-2 items-center justify-between h-full pl-3">
+    <div className="flex h-full items-center justify-between gap-2 pl-3">
       <div className="flex items-center gap-2">
         <Bell />
         <div className="text-lg font-semibold">{t('Notifications')}</div>
@@ -77,8 +77,8 @@ function HideUnrelatedNotificationsToggle() {
     <Button
       variant="ghost"
       className={cn(
-        'h-10 px-3 shrink-0 rounded-xl [&_svg]:size-5',
-        hideIndirect ? 'text-foreground bg-muted/40' : 'text-muted-foreground'
+        'h-10 shrink-0 rounded-xl px-3 [&_svg]:size-5',
+        hideIndirect ? 'bg-muted/40 text-foreground' : 'text-muted-foreground'
       )}
       onClick={() => updateHideIndirect(!hideIndirect)}
     >
diff --git a/src/pages/primary/ProfilePage/index.tsx b/src/pages/primary/ProfilePage/index.tsx
index d2dbb46..9781208 100644
--- a/src/pages/primary/ProfilePage/index.tsx
+++ b/src/pages/primary/ProfilePage/index.tsx
@@ -27,7 +27,7 @@ function ProfilePageTitlebar() {
   const { t } = useTranslation()
 
   return (
-    <div className="flex gap-2 items-center h-full pl-3">
+    <div className="flex h-full items-center gap-2 pl-3">
       <UserRound />
       <div className="text-lg font-semibold">{t('Profile')}</div>
     </div>
diff --git a/src/pages/primary/RelayPage/index.tsx b/src/pages/primary/RelayPage/index.tsx
index 260ca8f..65df3a9 100644
--- a/src/pages/primary/RelayPage/index.tsx
+++ b/src/pages/primary/RelayPage/index.tsx
@@ -24,9 +24,9 @@ export default RelayPage
 
 function RelayPageTitlebar({ url }: { url?: string }) {
   return (
-    <div className="flex items-center gap-2 px-3 h-full">
+    <div className="flex h-full items-center gap-2 px-3">
       <Server />
-      <div className="text-lg font-semibold truncate">{simplifyUrl(url ?? '')}</div>
+      <div className="truncate text-lg font-semibold">{simplifyUrl(url ?? '')}</div>
     </div>
   )
 }
diff --git a/src/pages/primary/SettingsPage/index.tsx b/src/pages/primary/SettingsPage/index.tsx
index fde8482..7d629ce 100644
--- a/src/pages/primary/SettingsPage/index.tsx
+++ b/src/pages/primary/SettingsPage/index.tsx
@@ -22,7 +22,7 @@ function SettingsPageTitlebar() {
   const { t } = useTranslation()
 
   return (
-    <div className="flex gap-2 items-center h-full pl-3">
+    <div className="flex h-full items-center gap-2 pl-3">
       <SettingsIcon />
       <div className="text-lg font-semibold">{t('Settings')}</div>
     </div>
diff --git a/src/pages/secondary/AppearanceSettingsPage/index.tsx b/src/pages/secondary/AppearanceSettingsPage/index.tsx
index b8efd84..1570efa 100644
--- a/src/pages/secondary/AppearanceSettingsPage/index.tsx
+++ b/src/pages/secondary/AppearanceSettingsPage/index.tsx
@@ -39,10 +39,10 @@ const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) =
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Appearance')}>
-      <div className="space-y-4 my-3">
+      <div className="my-3 space-y-4">
         <div className="flex flex-col gap-2 px-4">
           <Label className="text-base">{t('Theme')}</Label>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 w-full">
+          <div className="grid w-full grid-cols-2 gap-4 md:grid-cols-4">
             {THEMES.map(({ key, label, icon }) => (
               <OptionButton
                 key={key}
@@ -57,7 +57,7 @@ const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) =
         {!isSmallScreen && (
           <div className="flex flex-col gap-2 px-4">
             <Label className="text-base">{t('Layout')}</Label>
-            <div className="grid grid-cols-2 gap-4 w-full">
+            <div className="grid w-full grid-cols-2 gap-4">
               {LAYOUTS.map(({ key, label, icon }) => (
                 <OptionButton
                   key={key.toString()}
@@ -72,7 +72,7 @@ const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) =
         )}
         <div className="flex flex-col gap-2 px-4">
           <Label className="text-base">{t('Notification list style')}</Label>
-          <div className="grid grid-cols-2 gap-4 w-full">
+          <div className="grid w-full grid-cols-2 gap-4">
             {NOTIFICATION_STYLES.map(({ key, label, icon }) => (
               <OptionButton
                 key={key}
@@ -86,7 +86,7 @@ const AppearanceSettingsPage = forwardRef(({ index }: { index?: number }, ref) =
         </div>
         <div className="flex flex-col gap-2 px-4">
           <Label className="text-base">{t('Primary color')}</Label>
-          <div className="grid grid-cols-4 gap-4 w-full">
+          <div className="grid w-full grid-cols-4 gap-4">
             {Object.entries(PRIMARY_COLORS).map(([key, config]) => (
               <OptionButton
                 key={key}
@@ -127,11 +127,11 @@ const OptionButton = ({
     <button
       onClick={onClick}
       className={cn(
-        'flex flex-col items-center gap-2 py-4 rounded-lg border-2 transition-all',
+        'flex flex-col items-center gap-2 rounded-lg border-2 py-4 transition-all',
         isSelected ? 'border-primary' : 'border-border hover:border-muted-foreground/40'
       )}
     >
-      <div className="flex items-center justify-center w-8 h-8">{icon}</div>
+      <div className="flex h-8 w-8 items-center justify-center">{icon}</div>
       <span className="text-xs font-medium">{label}</span>
     </button>
   )
diff --git a/src/pages/secondary/ExternalContentPage/index.tsx b/src/pages/secondary/ExternalContentPage/index.tsx
index e87e9df..d61cfb8 100644
--- a/src/pages/secondary/ExternalContentPage/index.tsx
+++ b/src/pages/secondary/ExternalContentPage/index.tsx
@@ -28,7 +28,7 @@ const ExternalContentPage = forwardRef(({ index }: { index?: number }, ref) => {
       title={t('External Content')}
       displayScrollToTopButton
     >
-      <div className="px-4 mt-3">
+      <div className="mt-3 px-4">
         <ExternalContent content={id} mustLoadMedia />
         <StuffStats className="mt-3" stuff={id} fetchIfNotExisting displayTopZapsAndLikes />
       </div>
diff --git a/src/pages/secondary/FollowPackPage/index.tsx b/src/pages/secondary/FollowPackPage/index.tsx
index 0445ff7..0bd27ac 100644
--- a/src/pages/secondary/FollowPackPage/index.tsx
+++ b/src/pages/secondary/FollowPackPage/index.tsx
@@ -27,9 +27,9 @@ const FollowPackPage = forwardRef(({ id, index }: { id?: string; index?: number
   if (isFetching) {
     return (
       <SecondaryPageLayout ref={ref} index={index} title={t('Follow Pack')}>
-        <div className="px-4 py-3 space-y-2">
+        <div className="space-y-2 px-4 py-3">
           <Skeleton className="h-48 w-full" />
-          <Skeleton className="h-7 py-1 w-full" />
+          <Skeleton className="h-7 w-full py-1" />
         </div>
       </SecondaryPageLayout>
     )
@@ -47,11 +47,11 @@ const FollowPackPage = forwardRef(({ id, index }: { id?: string; index?: number
     <SecondaryPageLayout ref={ref} index={index} title={t('Follow Pack')} displayScrollToTopButton>
       <div>
         {/* Header */}
-        <div className="px-4 pt-3 space-y-2">
+        <div className="space-y-2 px-4 pt-3">
           {image && (
             <ImageWithLightbox
               image={{ url: image, pubkey: event.pubkey }}
-              className="w-full h-48 object-cover rounded-lg"
+              className="h-48 w-full rounded-lg object-cover"
               classNames={{
                 wrapper: 'w-full h-48 border-none'
               }}
@@ -59,21 +59,21 @@ const FollowPackPage = forwardRef(({ id, index }: { id?: string; index?: number
           )}
 
           <div className="flex items-center gap-2">
-            <h3 className="text-2xl font-semibold mb-1 truncate">{title}</h3>
-            <span className="text-xs text-muted-foreground shrink-0">
+            <h3 className="mb-1 truncate text-2xl font-semibold">{title}</h3>
+            <span className="shrink-0 text-xs text-muted-foreground">
               {t('n users', { count: pubkeys.length })}
             </span>
           </div>
 
           {description && (
-            <p className="text-sm text-muted-foreground whitespace-pre-wrap">{description}</p>
+            <p className="whitespace-pre-wrap text-sm text-muted-foreground">{description}</p>
           )}
 
           <div className="inline-flex items-center rounded-lg border bg-muted/50">
             <button
               onClick={() => setTab('users')}
               className={cn(
-                'px-3 py-1.5 text-sm font-medium rounded-l-lg transition-colors',
+                'rounded-l-lg px-3 py-1.5 text-sm font-medium transition-colors',
                 tab === 'users'
                   ? 'bg-background text-foreground shadow-sm'
                   : 'text-muted-foreground hover:text-foreground'
@@ -84,7 +84,7 @@ const FollowPackPage = forwardRef(({ id, index }: { id?: string; index?: number
             <button
               onClick={() => setTab('feed')}
               className={cn(
-                'px-3 py-1.5 text-sm font-medium rounded-r-lg transition-colors',
+                'rounded-r-lg px-3 py-1.5 text-sm font-medium transition-colors',
                 tab === 'feed'
                   ? 'bg-background text-foreground shadow-sm'
                   : 'text-muted-foreground hover:text-foreground'
diff --git a/src/pages/secondary/GeneralSettingsPage/MutedWords.tsx b/src/pages/secondary/GeneralSettingsPage/MutedWords.tsx
index 7b6a104..c3707d1 100644
--- a/src/pages/secondary/GeneralSettingsPage/MutedWords.tsx
+++ b/src/pages/secondary/GeneralSettingsPage/MutedWords.tsx
@@ -57,7 +57,7 @@ export default function MutedWords() {
             {mutedWords.map((word) => (
               <div
                 key={word}
-                className="flex items-center gap-1 bg-muted px-2 py-1 rounded-md text-sm"
+                className="flex items-center gap-1 rounded-md bg-muted px-2 py-1 text-sm"
               >
                 <span>{word}</span>
                 <Button
diff --git a/src/pages/secondary/GeneralSettingsPage/SettingItem.tsx b/src/pages/secondary/GeneralSettingsPage/SettingItem.tsx
index 8ad96f9..d26a672 100644
--- a/src/pages/secondary/GeneralSettingsPage/SettingItem.tsx
+++ b/src/pages/secondary/GeneralSettingsPage/SettingItem.tsx
@@ -6,7 +6,7 @@ const SettingItem = forwardRef<HTMLDivElement, HTMLProps<HTMLDivElement>>(
     return (
       <div
         className={cn(
-          'flex justify-between select-none items-center px-4 min-h-9 [&_svg]:size-4 [&_svg]:shrink-0',
+          'flex min-h-9 select-none items-center justify-between px-4 [&_svg]:size-4 [&_svg]:shrink-0',
           className
         )}
         {...props}
diff --git a/src/pages/secondary/GeneralSettingsPage/index.tsx b/src/pages/secondary/GeneralSettingsPage/index.tsx
index fc574c8..5ab726c 100644
--- a/src/pages/secondary/GeneralSettingsPage/index.tsx
+++ b/src/pages/secondary/GeneralSettingsPage/index.tsx
@@ -48,7 +48,7 @@ const GeneralSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('General')}>
-      <div className="space-y-4 mt-3">
+      <div className="mt-3 space-y-4">
         <SettingItem>
           <Label htmlFor="languages" className="text-base font-normal">
             {t('Languages')}
diff --git a/src/pages/secondary/MuteListPage/index.tsx b/src/pages/secondary/MuteListPage/index.tsx
index a3a1594..205ca28 100644
--- a/src/pages/secondary/MuteListPage/index.tsx
+++ b/src/pages/secondary/MuteListPage/index.tsx
@@ -82,18 +82,18 @@ function UserItem({ pubkey }: { pubkey: string }) {
   const [switching, setSwitching] = useState(false)
 
   return (
-    <div className="flex gap-2 items-start">
+    <div className="flex items-start gap-2">
       <UserAvatar userId={pubkey} className="shrink-0" />
       <div className="w-full overflow-hidden">
         <Username
           userId={pubkey}
-          className="font-semibold truncate max-w-full w-fit"
+          className="w-fit max-w-full truncate font-semibold"
           skeletonClassName="h-4"
         />
         <Nip05 pubkey={pubkey} />
-        <div className="truncate text-muted-foreground text-sm">{profile?.about}</div>
+        <div className="truncate text-sm text-muted-foreground">{profile?.about}</div>
       </div>
-      <div className="flex gap-2 items-center">
+      <div className="flex items-center gap-2">
         {switching ? (
           <Button disabled variant="ghost" size="icon">
             <Loader className="animate-spin" />
diff --git a/src/pages/secondary/NoteListPage/index.tsx b/src/pages/secondary/NoteListPage/index.tsx
index 3556a11..e875ee2 100644
--- a/src/pages/secondary/NoteListPage/index.tsx
+++ b/src/pages/secondary/NoteListPage/index.tsx
@@ -70,7 +70,7 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
         setTitle(
           <div className="flex items-center gap-1">
             {domain}
-            <Favicon domain={domain} className="w-5 h-5" />
+            <Favicon domain={domain} className="h-5 w-5" />
           </div>
         )
         const pubkeys = await fetchPubkeysFromDomain(domain)
@@ -101,7 +101,7 @@ const NoteListPage = forwardRef(({ index }: { index?: number }, ref) => {
   let content: React.ReactNode = null
   if (data?.type === 'domain' && subRequests.length === 0) {
     content = (
-      <div className="text-center w-full py-10">
+      <div className="w-full py-10 text-center">
         <span className="text-muted-foreground">
           {t('No pubkeys found from {url}', { url: getWellKnownNip05Url(data.domain) })}
         </span>
diff --git a/src/pages/secondary/NotePage/NotFound.tsx b/src/pages/secondary/NotePage/NotFound.tsx
index 99c3acc..fbbb539 100644
--- a/src/pages/secondary/NotePage/NotFound.tsx
+++ b/src/pages/secondary/NotePage/NotFound.tsx
@@ -5,7 +5,7 @@ export default function NotFound({ bech32Id }: { bech32Id?: string }) {
   const { t } = useTranslation()
 
   return (
-    <div className="text-muted-foreground w-full h-full flex flex-col items-center justify-center gap-2">
+    <div className="flex h-full w-full flex-col items-center justify-center gap-2 text-muted-foreground">
       <div>{t('Note not found')}</div>
       <ClientSelect originalNoteId={bech32Id} />
     </div>
diff --git a/src/pages/secondary/NotePage/index.tsx b/src/pages/secondary/NotePage/index.tsx
index ee6623b..f71a208 100644
--- a/src/pages/secondary/NotePage/index.tsx
+++ b/src/pages/secondary/NotePage/index.tsx
@@ -43,8 +43,8 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
       <SecondaryPageLayout ref={ref} index={index} title={t('Note')}>
         <div className="px-4 pt-3">
           <div className="flex items-center space-x-2">
-            <Skeleton className="w-10 h-10 rounded-full" />
-            <div className={`flex-1 w-0`}>
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className={`w-0 flex-1`}>
               <div className="py-1">
                 <Skeleton className="h-4 w-16" />
               </div>
@@ -55,10 +55,10 @@ const NotePage = forwardRef(({ id, index }: { id?: string; index?: number }, ref
           </div>
           <div className="pt-2">
             <div className="my-1">
-              <Skeleton className="w-full h-4 my-1 mt-2" />
+              <Skeleton className="my-1 mt-2 h-4 w-full" />
             </div>
             <div className="my-1">
-              <Skeleton className="w-2/3 h-4 my-1" />
+              <Skeleton className="my-1 h-4 w-2/3" />
             </div>
           </div>
         </div>
@@ -118,12 +118,12 @@ function ExternalRoot({ value }: { value: string }) {
   return (
     <div>
       <Card
-        className="flex space-x-1 px-1.5 py-1 items-center clickable text-sm text-muted-foreground hover:text-foreground"
+        className="clickable flex items-center space-x-1 px-1.5 py-1 text-sm text-muted-foreground hover:text-foreground"
         onClick={() => push(toExternalContent(value))}
       >
         <div className="truncate">{value}</div>
       </Card>
-      <div className="ml-5 w-px h-2 bg-border" />
+      <div className="ml-5 h-2 w-px bg-border" />
     </div>
   )
 }
@@ -144,13 +144,13 @@ function ParentNote({
   if (isFetching) {
     return (
       <div>
-        <div className="flex space-x-1 px-[0.4375rem] py-1 items-center rounded-full border clickable text-sm text-muted-foreground">
-          <Skeleton className="shrink w-4 h-4 rounded-full" />
-          <div className="py-1 flex-1">
+        <div className="clickable flex items-center space-x-1 rounded-full border px-[0.4375rem] py-1 text-sm text-muted-foreground">
+          <Skeleton className="h-4 w-4 shrink rounded-full" />
+          <div className="flex-1 py-1">
             <Skeleton className="h-3" />
           </div>
         </div>
-        <div className="ml-5 w-px h-3 bg-border" />
+        <div className="ml-5 h-3 w-px bg-border" />
       </div>
     )
   }
@@ -159,7 +159,7 @@ function ParentNote({
     <div>
       <div
         className={cn(
-          'flex space-x-1 px-[0.4375rem] py-1 items-center rounded-full border clickable text-sm text-muted-foreground',
+          'clickable flex items-center space-x-1 rounded-full border px-[0.4375rem] py-1 text-sm text-muted-foreground',
           event && 'hover:text-foreground'
         )}
         onClick={() => {
@@ -170,9 +170,9 @@ function ParentNote({
         <ContentPreview className="truncate" event={event} />
       </div>
       {isConsecutive ? (
-        <div className="ml-5 w-px h-3 bg-border" />
+        <div className="ml-5 h-3 w-px bg-border" />
       ) : (
-        <Ellipsis className="ml-3.5 text-muted-foreground/60 size-3" />
+        <Ellipsis className="ml-3.5 size-3 text-muted-foreground/60" />
       )}
     </div>
   )
diff --git a/src/pages/secondary/PostSettingsPage/BlossomServerListSetting.tsx b/src/pages/secondary/PostSettingsPage/BlossomServerListSetting.tsx
index b392c79..7d51ef4 100644
--- a/src/pages/secondary/PostSettingsPage/BlossomServerListSetting.tsx
+++ b/src/pages/secondary/PostSettingsPage/BlossomServerListSetting.tsx
@@ -109,12 +109,12 @@ export default function BlossomServerListSetting() {
     <div className="space-y-2">
       <div className="text-sm font-medium">{t('Blossom server URLs')}</div>
       {serverUrls.length === 0 && (
-        <div className="flex flex-col gap-1 text-sm border rounded-lg p-2 bg-muted text-muted-foreground">
-          <div className="font-medium flex gap-2 items-center">
+        <div className="flex flex-col gap-1 rounded-lg border bg-muted p-2 text-sm text-muted-foreground">
+          <div className="flex items-center gap-2 font-medium">
             <AlertCircle className="size-4" />
             {t('You need to add at least one media server in order to upload media files.')}
           </div>
-          <Separator className="bg-muted-foreground my-2" />
+          <Separator className="my-2 bg-muted-foreground" />
           <div className="font-medium">{t('Recommended blossom servers')}:</div>
           <div className="flex flex-col">
             {RECOMMENDED_BLOSSOM_SERVERS.map((recommendedUrl) => (
@@ -123,7 +123,7 @@ export default function BlossomServerListSetting() {
                 key={recommendedUrl}
                 onClick={() => addBlossomUrl(recommendedUrl)}
                 disabled={removingIndex >= 0 || adding || movingIndex >= 0}
-                className="w-fit p-0 text-muted-foreground hover:text-foreground h-fit"
+                className="h-fit w-fit p-0 text-muted-foreground hover:text-foreground"
               >
                 {recommendedUrl}
               </Button>
@@ -135,7 +135,7 @@ export default function BlossomServerListSetting() {
         <div
           key={url}
           className={cn(
-            'flex items-center justify-between gap-2 pl-3 pr-1 py-1 border rounded-lg',
+            'flex items-center justify-between gap-2 rounded-lg border py-1 pl-3 pr-1',
             idx === 0 && 'border-primary'
           )}
         >
diff --git a/src/pages/secondary/PostSettingsPage/index.tsx b/src/pages/secondary/PostSettingsPage/index.tsx
index 8b8cc68..8e5f449 100644
--- a/src/pages/secondary/PostSettingsPage/index.tsx
+++ b/src/pages/secondary/PostSettingsPage/index.tsx
@@ -8,7 +8,7 @@ const PostSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Post settings')}>
-      <div className="px-4 pt-3 space-y-4">
+      <div className="space-y-4 px-4 pt-3">
         <MediaUploadServiceSetting />
       </div>
     </SecondaryPageLayout>
diff --git a/src/pages/secondary/ProfileEditorPage/index.tsx b/src/pages/secondary/ProfileEditorPage/index.tsx
index 6f83806..e39dd1a 100644
--- a/src/pages/secondary/ProfileEditorPage/index.tsx
+++ b/src/pages/secondary/ProfileEditorPage/index.tsx
@@ -132,15 +132,15 @@ const ProfileEditorPage = forwardRef(({ index }: { index?: number }, ref) => {
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={profile.username} controls={controls}>
-      <div className="relative bg-cover bg-center mb-2">
+      <div className="relative mb-2 bg-cover bg-center">
         <Uploader
           onUploadSuccess={onBannerUploadSuccess}
           onUploadStart={() => setUploadingBanner(true)}
           onUploadEnd={() => setUploadingBanner(false)}
-          className="w-full relative cursor-pointer"
+          className="relative w-full cursor-pointer"
         >
-          <ProfileBanner banner={banner} pubkey={account.pubkey} className="w-full aspect-[3/1]" />
-          <div className="absolute top-0 bg-muted/30 w-full h-full flex flex-col justify-center items-center">
+          <ProfileBanner banner={banner} pubkey={account.pubkey} className="aspect-[3/1] w-full" />
+          <div className="absolute top-0 flex h-full w-full flex-col items-center justify-center bg-muted/30">
             {uploadingBanner ? <Loader size={36} className="animate-spin" /> : <Upload size={36} />}
           </div>
         </Uploader>
@@ -148,20 +148,20 @@ const ProfileEditorPage = forwardRef(({ index }: { index?: number }, ref) => {
           onUploadSuccess={onAvatarUploadSuccess}
           onUploadStart={() => setUploadingAvatar(true)}
           onUploadEnd={() => setUploadingAvatar(false)}
-          className="w-24 h-24 absolute bottom-0 left-4 translate-y-1/2 border-4 border-background cursor-pointer rounded-full"
+          className="absolute bottom-0 left-4 h-24 w-24 translate-y-1/2 cursor-pointer rounded-full border-4 border-background"
         >
-          <Avatar className="w-full h-full">
+          <Avatar className="h-full w-full">
             <AvatarImage src={avatar} className="object-cover object-center" />
             <AvatarFallback>
               <img src={defaultImage} />
             </AvatarFallback>
           </Avatar>
-          <div className="absolute top-0 bg-muted/30 w-full h-full rounded-full flex flex-col justify-center items-center">
+          <div className="absolute top-0 flex h-full w-full flex-col items-center justify-center rounded-full bg-muted/30">
             {uploadingAvatar ? <Loader className="animate-spin" /> : <Upload />}
           </div>
         </Uploader>
       </div>
-      <div className="pt-14 px-4 flex flex-col gap-4">
+      <div className="flex flex-col gap-4 px-4 pt-14">
         <Item>
           <Label htmlFor="profile-username-input">{t('Display Name')}</Label>
           <Input
@@ -208,7 +208,7 @@ const ProfileEditorPage = forwardRef(({ index }: { index?: number }, ref) => {
             }}
             className={nip05Error ? 'border-destructive' : ''}
           />
-          {nip05Error && <div className="text-xs text-destructive pl-3">{nip05Error}</div>}
+          {nip05Error && <div className="pl-3 text-xs text-destructive">{nip05Error}</div>}
         </Item>
         <Item>
           <Label htmlFor="profile-lightning-address-input">
@@ -225,7 +225,7 @@ const ProfileEditorPage = forwardRef(({ index }: { index?: number }, ref) => {
             className={lightningAddressError ? 'border-destructive' : ''}
           />
           {lightningAddressError && (
-            <div className="text-xs text-destructive pl-3">{lightningAddressError}</div>
+            <div className="pl-3 text-xs text-destructive">{lightningAddressError}</div>
           )}
         </Item>
       </div>
diff --git a/src/pages/secondary/ProfileListPage/index.tsx b/src/pages/secondary/ProfileListPage/index.tsx
index 84bf498..f9f5beb 100644
--- a/src/pages/secondary/ProfileListPage/index.tsx
+++ b/src/pages/secondary/ProfileListPage/index.tsx
@@ -28,7 +28,7 @@ const ProfileListPage = forwardRef(({ index }: { index?: number }, ref) => {
       setTitle(
         <div className="flex items-center gap-1">
           {domain}
-          <Favicon domain={domain} className="w-5 h-5" />
+          <Favicon domain={domain} className="h-5 w-5" />
         </div>
       )
       setData({ type: 'domain', id: domain })
diff --git a/src/pages/secondary/RelaySettingsPage/index.tsx b/src/pages/secondary/RelaySettingsPage/index.tsx
index e9f06c4..7ea7096 100644
--- a/src/pages/secondary/RelaySettingsPage/index.tsx
+++ b/src/pages/secondary/RelaySettingsPage/index.tsx
@@ -22,7 +22,7 @@ const RelaySettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Relay settings')}>
-      <Tabs value={tabValue} onValueChange={setTabValue} className="px-4 py-3 space-y-4">
+      <Tabs value={tabValue} onValueChange={setTabValue} className="space-y-4 px-4 py-3">
         <TabsList>
           <TabsTrigger value="favorite-relays">{t('Favorite Relays')}</TabsTrigger>
           <TabsTrigger value="mailbox">{t('Read & Write Relays')}</TabsTrigger>
diff --git a/src/pages/secondary/RizfulPage/index.tsx b/src/pages/secondary/RizfulPage/index.tsx
index 4693f1f..30cc10d 100644
--- a/src/pages/secondary/RizfulPage/index.tsx
+++ b/src/pages/secondary/RizfulPage/index.tsx
@@ -115,9 +115,9 @@ const RizfulPage = forwardRef(({ index }: { index?: number }, ref) => {
   if (connected) {
     return (
       <SecondaryPageLayout ref={ref} index={index} title={t('Rizful Vault')}>
-        <div className="px-4 pt-3 space-y-6 flex flex-col items-center">
+        <div className="flex flex-col items-center space-y-6 px-4 pt-3">
           <CheckCircle2 className="size-40 fill-green-400 text-background" />
-          <div className="font-semibold text-2xl">{t('Rizful Vault connected!')}</div>
+          <div className="text-2xl font-semibold">{t('Rizful Vault connected!')}</div>
           <div className="text-center text-sm text-muted-foreground">
             {t('You can now use your Rizful Vault to zap your favorite notes and creators.')}
           </div>
@@ -125,7 +125,7 @@ const RizfulPage = forwardRef(({ index }: { index?: number }, ref) => {
             <div className="flex flex-col items-center gap-2">
               <div>{t('Your Lightning Address')}:</div>
               <div
-                className="font-semibold text-lg rounded-lg px-4 py-1 flex justify-center items-center gap-2 cursor-pointer hover:bg-accent/80"
+                className="flex cursor-pointer items-center justify-center gap-2 rounded-lg px-4 py-1 text-lg font-semibold hover:bg-accent/80"
                 onClick={() => {
                   navigator.clipboard.writeText(lightningAddress)
                   setCopiedLightningAddress(true)
@@ -148,11 +148,11 @@ const RizfulPage = forwardRef(({ index }: { index?: number }, ref) => {
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Rizful Vault')}>
-      <div className="px-4 pt-3 space-y-6">
+      <div className="space-y-6 px-4 pt-3">
         <div className="space-y-2">
           <div className="font-semibold">1. {t('New to Rizful?')}</div>
           <Button
-            className="bg-lime-500 hover:bg-lime-500/90 w-64"
+            className="w-64 bg-lime-500 hover:bg-lime-500/90"
             onClick={() => window.open(RIZFUL_SIGNUP_URL, '_blank')}
           >
             {t('Sign up for Rizful')} <ExternalLink />
@@ -165,7 +165,7 @@ const RizfulPage = forwardRef(({ index }: { index?: number }, ref) => {
         <div className="space-y-2">
           <div className="font-semibold">2. {t('Get your one-time code')}</div>
           <Button
-            className="bg-orange-500 hover:bg-orange-500/90 w-64"
+            className="w-64 bg-orange-500 hover:bg-orange-500/90"
             onClick={() => openPopup(RIZFUL_GET_TOKEN_URL, 'rizful_codes')}
           >
             {t('Get code')}
@@ -183,7 +183,7 @@ const RizfulPage = forwardRef(({ index }: { index?: number }, ref) => {
             }}
           />
           <Button
-            className="bg-sky-500 hover:bg-sky-500/90 w-64"
+            className="w-64 bg-sky-500 hover:bg-sky-500/90"
             disabled={!token || connecting}
             onClick={() => connectRizful()}
           >
diff --git a/src/pages/secondary/SearchPage/index.tsx b/src/pages/secondary/SearchPage/index.tsx
index 84034cc..15ad42e 100644
--- a/src/pages/secondary/SearchPage/index.tsx
+++ b/src/pages/secondary/SearchPage/index.tsx
@@ -60,7 +60,7 @@ const SearchPage = forwardRef(({ index }: { index?: number }, ref) => {
       ref={ref}
       index={index}
       titlebar={
-        <div className="flex items-center gap-1 h-full">
+        <div className="flex h-full items-center gap-1">
           <Button variant="ghost" size="titlebar-icon" onClick={() => pop()}>
             <ChevronLeft />
           </Button>
diff --git a/src/pages/secondary/SystemSettingsPage/index.tsx b/src/pages/secondary/SystemSettingsPage/index.tsx
index a043446..32ef490 100644
--- a/src/pages/secondary/SystemSettingsPage/index.tsx
+++ b/src/pages/secondary/SystemSettingsPage/index.tsx
@@ -18,8 +18,8 @@ const SystemSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('System')}>
-      <div className="space-y-4 mt-3">
-        <div className="px-4 space-y-2">
+      <div className="mt-3 space-y-4">
+        <div className="space-y-2 px-4">
           <Label htmlFor="favicon-url" className="text-base font-normal">
             {t('Favicon URL')}
           </Label>
@@ -31,7 +31,7 @@ const SystemSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
             placeholder={DEFAULT_FAVICON_URL_TEMPLATE}
           />
         </div>
-        <div className="flex justify-between items-center px-4 min-h-9">
+        <div className="flex min-h-9 items-center justify-between px-4">
           <Label htmlFor="filter-out-onion-relays" className="text-base font-normal">
             {t('Filter out onion relays')}
           </Label>
@@ -44,7 +44,7 @@ const SystemSettingsPage = forwardRef(({ index }: { index?: number }, ref) => {
             }}
           />
         </div>
-        <div className="px-4 space-y-2">
+        <div className="space-y-2 px-4">
           <DefaultRelaysSetting />
         </div>
       </div>
diff --git a/src/pages/secondary/TranslationPage/JumbleTranslate/AccountInfo.tsx b/src/pages/secondary/TranslationPage/JumbleTranslate/AccountInfo.tsx
index b733baa..bda6514 100644
--- a/src/pages/secondary/TranslationPage/JumbleTranslate/AccountInfo.tsx
+++ b/src/pages/secondary/TranslationPage/JumbleTranslate/AccountInfo.tsx
@@ -18,7 +18,7 @@ export function AccountInfo() {
 
   if (!pubkey) {
     return (
-      <div className="w-full flex justify-center">
+      <div className="flex w-full justify-center">
         <Button onClick={() => startLogin()}>{t('Login')}</Button>
       </div>
     )
@@ -43,7 +43,7 @@ export function AccountInfo() {
             type={showApiKey ? 'text' : 'password'}
             value={account?.api_key ?? ''}
             readOnly
-            className="font-mono flex-1 max-w-fit"
+            className="max-w-fit flex-1 font-mono"
           />
           <Button variant="outline" onClick={() => setShowApiKey(!showApiKey)}>
             {showApiKey ? <Eye /> : <EyeOff />}
@@ -62,7 +62,7 @@ export function AccountInfo() {
           </Button>
           <RegenerateApiKeyButton />
         </div>
-        <p className="text-sm text-muted-foreground select-text">
+        <p className="select-text text-sm text-muted-foreground">
           {t('jumbleTranslateApiKeyDescription', {
             serviceUrl: new URL('/v1/translation', JUMBLE_API_BASE_URL).toString()
           })}
diff --git a/src/pages/secondary/TranslationPage/JumbleTranslate/TopUp.tsx b/src/pages/secondary/TranslationPage/JumbleTranslate/TopUp.tsx
index 581957f..9a36434 100644
--- a/src/pages/secondary/TranslationPage/JumbleTranslate/TopUp.tsx
+++ b/src/pages/secondary/TranslationPage/JumbleTranslate/TopUp.tsx
@@ -108,7 +108,7 @@ export default function TopUp() {
             variant="outline"
             onClick={() => handlePresetClick(amount)}
             className={cn(
-              'flex flex-col h-auto py-3 hover:bg-primary/10',
+              'flex h-auto flex-col py-3 hover:bg-primary/10',
               selectedAmount === amount && 'border border-primary bg-primary/10'
             )}
           >
diff --git a/src/pages/secondary/TranslationPage/index.tsx b/src/pages/secondary/TranslationPage/index.tsx
index 7ec4e1a..a1e0908 100644
--- a/src/pages/secondary/TranslationPage/index.tsx
+++ b/src/pages/secondary/TranslationPage/index.tsx
@@ -27,7 +27,7 @@ const TranslationPage = forwardRef(({ index }: { index?: number }, ref) => {
 
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Translation')}>
-      <div className="px-4 pt-3 space-y-4">
+      <div className="space-y-4 px-4 pt-3">
         <div className="space-y-2">
           <Label htmlFor="languages" className="text-base font-medium">
             {t('Languages')}
diff --git a/src/pages/secondary/UserAggregationDetailPage/index.tsx b/src/pages/secondary/UserAggregationDetailPage/index.tsx
index b6e0b3a..ef5d831 100644
--- a/src/pages/secondary/UserAggregationDetailPage/index.tsx
+++ b/src/pages/secondary/UserAggregationDetailPage/index.tsx
@@ -56,7 +56,7 @@ const UserAggregationDetailPage = forwardRef(
     if (!pubkey || !feedId) {
       return (
         <SecondaryPageLayout ref={ref} index={index} title={t('User Posts')}>
-          <div className="flex justify-center items-center h-40 text-muted-foreground">
+          <div className="flex h-40 items-center justify-center text-muted-foreground">
             {t('Invalid user')}
           </div>
         </SecondaryPageLayout>
@@ -74,7 +74,7 @@ const UserAggregationDetailPage = forwardRef(
           {aggregation.map((event) => (
             <NoteCard key={event.id} className="w-full" event={event} filterMutedNotes={false} />
           ))}
-          <div className="text-center text-sm text-muted-foreground mt-2">{t('no more notes')}</div>
+          <div className="mt-2 text-center text-sm text-muted-foreground">{t('no more notes')}</div>
         </div>
       </SecondaryPageLayout>
     )
diff --git a/src/pages/secondary/WalletPage/QuickZapSwitch.tsx b/src/pages/secondary/WalletPage/QuickZapSwitch.tsx
index 4c9765c..a14af81 100644
--- a/src/pages/secondary/WalletPage/QuickZapSwitch.tsx
+++ b/src/pages/secondary/WalletPage/QuickZapSwitch.tsx
@@ -8,10 +8,10 @@ export default function QuickZapSwitch() {
   const { quickZap, updateQuickZap } = useZap()
 
   return (
-    <div className="w-full flex justify-between items-center">
+    <div className="flex w-full items-center justify-between">
       <Label htmlFor="quick-zap-switch">
         <div className="text-base font-medium">{t('Quick zap')}</div>
-        <div className="text-muted-foreground text-sm">
+        <div className="text-sm text-muted-foreground">
           {t('If enabled, you can zap with a single click. Click and hold for custom amounts')}
         </div>
       </Label>
diff --git a/src/pages/secondary/WalletPage/index.tsx b/src/pages/secondary/WalletPage/index.tsx
index 154e88e..cb506f3 100644
--- a/src/pages/secondary/WalletPage/index.tsx
+++ b/src/pages/secondary/WalletPage/index.tsx
@@ -30,7 +30,7 @@ const WalletPage = forwardRef(({ index }: { index?: number }, ref) => {
   return (
     <SecondaryPageLayout ref={ref} index={index} title={t('Wallet')}>
       {isWalletConnected ? (
-        <div className="px-4 pt-3 space-y-4">
+        <div className="space-y-4 px-4 pt-3">
           <div>
             {walletInfo?.node.alias && (
               <div className="mb-2">
@@ -63,13 +63,13 @@ const WalletPage = forwardRef(({ index }: { index?: number }, ref) => {
           <LightningAddressInput />
         </div>
       ) : (
-        <div className="px-4 pt-3 flex items-center gap-2">
+        <div className="flex items-center gap-2 px-4 pt-3">
           <Button className="bg-foreground hover:bg-foreground/90" onClick={() => push(toRizful())}>
             {t('Start with a Rizful Vault')}
           </Button>
           <Button
             variant="link"
-            className="text-muted-foreground hover:text-foreground px-0"
+            className="px-0 text-muted-foreground hover:text-foreground"
             onClick={() => {
               launchModal()
             }}