diff --git a/web/package.json b/web/package.json
index d41c9ea75..a0b3739e6 100644
--- a/web/package.json
+++ b/web/package.json
@@ -7,6 +7,7 @@
     "dev": "vite --host",
     "build": "tsc && vite build --base=/BASE_PATH/",
     "lint": "eslint --ext .jsx,.js,.tsx,.ts --ignore-path .gitignore .",
+    "lint:fix": "eslint --ext .jsx,.js,.tsx,.ts --ignore-path .gitignore --fix .",
     "preview": "vite preview",
     "prettier:write": "prettier -u -w --ignore-path .gitignore \"*.{ts,tsx,js,jsx,css,html}\"",
     "test": "vitest",
diff --git a/web/src/components/auth/AuthForm.tsx b/web/src/components/auth/AuthForm.tsx
index aa2a3385e..e239ae5e6 100644
--- a/web/src/components/auth/AuthForm.tsx
+++ b/web/src/components/auth/AuthForm.tsx
@@ -92,7 +92,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                 <FormLabel>User</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-full text-md p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     {...field}
                   />
                 </FormControl>
@@ -106,7 +106,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
                 <FormLabel>Password</FormLabel>
                 <FormControl>
                   <Input
-                    className="w-full text-md p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                    className="text-md w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                     type="password"
                     {...field}
                   />
diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
index e17b3a2c9..4f0ed90b0 100644
--- a/web/src/components/menu/AccountSettings.tsx
+++ b/web/src/components/menu/AccountSettings.tsx
@@ -70,7 +70,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
         </Trigger>
         <Content
           className={
-            isDesktop ? "w-72 mr-5" : "max-h-[75dvh] p-2 overflow-hidden"
+            isDesktop ? "mr-5 w-72" : "max-h-[75dvh] overflow-hidden p-2"
           }
         >
           <div className="w-full flex-col overflow-y-auto overflow-x-hidden">
@@ -80,7 +80,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
             <DropdownMenuSeparator className={isDesktop ? "mt-3" : "mt-1"} />
             <MenuItem
               className={
-                isDesktop ? "cursor-pointer" : "p-2 flex items-center text-sm"
+                isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
               }
               onClick={() => handleLogout()}
             >
diff --git a/web/src/components/overlay/CreateUserDialog.tsx b/web/src/components/overlay/CreateUserDialog.tsx
index 2cc2e31b2..e05ba4134 100644
--- a/web/src/components/overlay/CreateUserDialog.tsx
+++ b/web/src/components/overlay/CreateUserDialog.tsx
@@ -74,7 +74,7 @@ export default function CreateUserDialog({
                   <FormLabel>User</FormLabel>
                   <FormControl>
                     <Input
-                      className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                       {...field}
                     />
                   </FormControl>
@@ -89,7 +89,7 @@ export default function CreateUserDialog({
                   <FormLabel>Password</FormLabel>
                   <FormControl>
                     <Input
-                      className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+                      className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
                       type="password"
                       {...field}
                     />
diff --git a/web/src/components/overlay/SetPasswordDialog.tsx b/web/src/components/overlay/SetPasswordDialog.tsx
index 1dfc8dcf9..d0191468b 100644
--- a/web/src/components/overlay/SetPasswordDialog.tsx
+++ b/web/src/components/overlay/SetPasswordDialog.tsx
@@ -28,7 +28,7 @@ export default function SetPasswordDialog({
           <DialogTitle>Set Password</DialogTitle>
         </DialogHeader>
         <Input
-          className="w-full p-2 border border-input bg-background hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
+          className="w-full border border-input bg-background p-2 hover:bg-accent hover:text-accent-foreground dark:[color-scheme:dark]"
           type="password"
           value={password}
           onChange={(event) => setPassword(event.target.value)}
diff --git a/web/src/components/settings/Authentication.tsx b/web/src/components/settings/Authentication.tsx
index 64119ab49..c33d2314e 100644
--- a/web/src/components/settings/Authentication.tsx
+++ b/web/src/components/settings/Authentication.tsx
@@ -83,13 +83,13 @@ export default function Authentication() {
   }
 
   return (
-    <div className="flex flex-col md:flex-row size-full">
+    <div className="flex size-full flex-col md:flex-row">
       <Toaster position="top-center" closeButton={true} />
-      <div className="flex flex-col h-full w-full overflow-y-auto mt-2 md:mt-0 mb-10 md:mb-0 order-last md:order-none md:mr-2 rounded-lg border-secondary-foreground border-[1px] p-2 bg-background_alt">
+      <div className="order-last mb-10 mt-2 flex h-full w-full flex-col overflow-y-auto rounded-lg border-[1px] border-secondary-foreground bg-background_alt p-2 md:order-none md:mb-0 md:mr-2 md:mt-0">
         <Heading as="h3" className="my-2">
           Users
         </Heading>
-        <div className="flex flex-row justify-end items-center gap-2">
+        <div className="flex flex-row items-center justify-end gap-2">
           <Button
             variant="select"
             onClick={() => {
@@ -101,9 +101,9 @@ export default function Authentication() {
         </div>
         <div className="mt-3 space-y-3">
           {users.map((u) => (
-            <Card key={u.username} className="p-2 mb-1">
+            <Card key={u.username} className="mb-1 p-2">
               <div className="flex items-center gap-3">
-                <div className="flex flex-none ml-3 text-lg align-middle text-ellipsis overflow-hidden shrink">
+                <div className="ml-3 flex flex-none shrink overflow-hidden text-ellipsis align-middle text-lg">
                   {u.username}
                 </div>
                 <div className="flex flex-1 justify-end space-x-2 ">
diff --git a/web/src/components/settings/General.tsx b/web/src/components/settings/General.tsx
index ee467849c..31510cd8e 100644
--- a/web/src/components/settings/General.tsx
+++ b/web/src/components/settings/General.tsx
@@ -80,7 +80,7 @@ export default function General() {
             <div className="mt-2 space-y-6">
               <div className="space-y-0.5">
                 <div className="text-md">Default Playback Rate</div>
-                <div className="text-sm text-muted-foreground my-2">
+                <div className="my-2 text-sm text-muted-foreground">
                   <p>Default playback rate for recordings playback.</p>
                 </div>
               </div>
@@ -106,7 +106,7 @@ export default function General() {
                 </SelectGroup>
               </SelectContent>
             </Select>
-            <Separator className="flex my-2 bg-secondary" />
+            <Separator className="my-2 flex bg-secondary" />
             <div className="mt-2 space-y-6">
               <div className="space-y-0.5">
                 <div className="text-md">Low Data Mode</div>
diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
index 3790f7104..d79a7c953 100644
--- a/web/src/pages/LoginPage.tsx
+++ b/web/src/pages/LoginPage.tsx
@@ -8,8 +8,8 @@ function LoginPage() {
       <div className="size-full overflow-hidden">
         <div className="p-8">
           <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
-            <div className="flex flex-col space-y-2 items-center">
-              <Logo className="w-8 h-8 mb-6" />
+            <div className="flex flex-col items-center space-y-2">
+              <Logo className="mb-6 h-8 w-8" />
             </div>
             <UserAuthForm />
           </div>