diff --git a/web/src/components/navigation/NavItem.tsx b/web/src/components/navigation/NavItem.tsx
index 6b8295be9..acda54ebe 100644
--- a/web/src/components/navigation/NavItem.tsx
+++ b/web/src/components/navigation/NavItem.tsx
@@ -11,8 +11,8 @@ import { IconType } from "react-icons";
 
 const variants = {
   primary: {
-    active: "font-bold text-white bg-selected",
-    inactive: "text-secondary-foreground bg-secondary",
+    active: "font-bold text-white bg-selected hover:bg-selected/80",
+    inactive: "text-secondary-foreground bg-secondary hover:bg-muted",
   },
   secondary: {
     active: "font-bold text-selected",
diff --git a/web/src/components/navigation/Sidebar.tsx b/web/src/components/navigation/Sidebar.tsx
index 505ebe047..e4b4d9c81 100644
--- a/web/src/components/navigation/Sidebar.tsx
+++ b/web/src/components/navigation/Sidebar.tsx
@@ -32,7 +32,7 @@ function Sidebar() {
           );
         })}
       </div>
-      <div className="flex flex-col items-center mb-8">
+      <div className="flex flex-col items-center gap-4 mb-8">
         <GeneralSettings />
         <AccountSettings />
       </div>
diff --git a/web/src/components/settings/AccountSettings.tsx b/web/src/components/settings/AccountSettings.tsx
index e5881465e..afa63ae4c 100644
--- a/web/src/components/settings/AccountSettings.tsx
+++ b/web/src/components/settings/AccountSettings.tsx
@@ -3,16 +3,18 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { isDesktop } from "react-device-detect";
 import { VscAccount } from "react-icons/vsc";
-import { Button } from "../ui/button";
 
 export default function AccountSettings() {
   return (
     <Tooltip>
       <TooltipTrigger asChild>
-        <Button size="icon" variant="ghost">
-          <VscAccount />
-        </Button>
+        <div
+          className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
+        >
+          <VscAccount className="size-5 md:m-[6px]" />
+        </div>
       </TooltipTrigger>
       <TooltipContent side="right">
         <p>Account</p>
diff --git a/web/src/components/settings/GeneralSettings.tsx b/web/src/components/settings/GeneralSettings.tsx
index 3ffcc540d..bc45f650f 100644
--- a/web/src/components/settings/GeneralSettings.tsx
+++ b/web/src/components/settings/GeneralSettings.tsx
@@ -118,9 +118,11 @@ export default function GeneralSettings({ className }: GeneralSettings) {
             <a href="#">
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Button size="icon" variant="ghost">
-                    <LuSettings />
-                  </Button>
+                  <div
+                    className={`flex flex-col justify-center items-center ${isDesktop ? "rounded-lg text-secondary-foreground bg-secondary hover:bg-muted cursor-pointer" : "text-secondary-foreground"}`}
+                  >
+                    <LuSettings className="size-5 md:m-[6px]" />
+                  </div>
                 </TooltipTrigger>
                 <TooltipContent side="right">
                   <p>Settings</p>