diff --git a/web-app/src/components/ui/button.tsx b/web-app/src/components/ui/button.tsx
index 2c755ed91..96d3e5691 100644
--- a/web-app/src/components/ui/button.tsx
+++ b/web-app/src/components/ui/button.tsx
@@ -17,7 +17,7 @@ const buttonVariants = cva(
         secondary:
           "bg-secondary rounded-full text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          "hover:bg-accent rounded-full hover:text-accent-foreground dark:hover:bg-accent/50",
+          "hover:bg-foreground/10 rounded-full hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/web-app/src/containers/SettingsMenu.tsx b/web-app/src/containers/SettingsMenu.tsx
index 3dd5a045e..39a0303fa 100644
--- a/web-app/src/containers/SettingsMenu.tsx
+++ b/web-app/src/containers/SettingsMenu.tsx
@@ -168,7 +168,7 @@ const SettingsMenu = () => {
                     matching the sidebar's selected treatment. */}
                 <Link
                   to={menu.route}
-                  className="block px-2 gap-1.5 cursor-pointer hover:dark:bg-secondary/60 hover:bg-secondary py-1 w-full rounded-sm [&.active]:bg-foreground/20"
+                  className="block px-2 gap-1.5 cursor-pointer hover:bg-foreground/10 py-1 w-full rounded-sm [&.active]:bg-foreground/20"
                 >
                   <div className="flex items-center justify-between">
                     <span>{t(menu.title)}</span>
@@ -207,7 +207,7 @@ const SettingsMenu = () => {
                         <div key={provider.provider}>
                           <div
                             className={cn(
-                              'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-secondary/60 py-1 w-full rounded-sm text-foreground',
+                              'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-foreground/10 py-1 w-full rounded-sm text-foreground',
                               isActive && 'bg-foreground/20',
                               // hidden for llama.cpp provider for setup remote provider
                               provider.provider === 'llama.cpp' &&
@@ -266,7 +266,7 @@ const SettingsMenu = () => {
                   <div
                     key={provider.provider}
                     className={cn(
-                      'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-secondary/60 py-1 w-full rounded-sm text-foreground',
+                      'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-foreground/10 py-1 w-full rounded-sm text-foreground',
                       isRouteActive && 'bg-foreground/20',
                       provider.provider === 'llama.cpp' &&
                         stepSetupRemoteProvider &&
@@ -293,7 +293,7 @@ const SettingsMenu = () => {
               {hiddenProviders.length > 0 && (
                 <>
                   <button
-                    className="flex items-center justify-between px-2 py-1 w-full rounded-sm text-muted-foreground hover:bg-secondary/60"
+                    className="flex items-center justify-between px-2 py-1 w-full rounded-sm text-muted-foreground hover:bg-foreground/10"
                     onClick={() => setExpandedProviders(!expandedProviders)}
                   >
                     <span className="text-sm">
@@ -320,7 +320,7 @@ const SettingsMenu = () => {
                         <div
                           key={provider.provider}
                           className={cn(
-                            'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-secondary/60 py-1 w-full rounded-sm text-muted-foreground',
+                            'flex px-2 items-center gap-1.5 cursor-pointer hover:bg-foreground/10 py-1 w-full rounded-sm text-muted-foreground',
                             isRouteActive && 'bg-foreground/20'
                           )}
                           onClick={() =>