diff --git a/client/ui-wails/frontend/src/components/SwitchItem.tsx b/client/ui-wails/frontend/src/components/SwitchItem.tsx
index 0a50abf13..c09be5b05 100644
--- a/client/ui-wails/frontend/src/components/SwitchItem.tsx
+++ b/client/ui-wails/frontend/src/components/SwitchItem.tsx
@@ -27,13 +27,11 @@ export const SwitchItem = ({ value, children }: Props) => {
             {active && (
                 <motion.span
                     layoutId={layoutId}
-                    className={"absolute inset-0 rounded-md bg-nb-gray-800"}
+                    className={"absolute inset-0 rounded-md bg-nb-gray-700"}
                     transition={{ type: "spring", stiffness: 500, damping: 35 }}
                 />
             )}
-            <span
-                className={"relative inline-flex items-center justify-center gap-1"}
-            >
+            <span className={"relative inline-flex items-center justify-center gap-1"}>
                 {children}
             </span>
         </RadioGroup.Item>
diff --git a/client/ui-wails/frontend/src/components/SwitchItemGroup.tsx b/client/ui-wails/frontend/src/components/SwitchItemGroup.tsx
index 364d3d134..1c4ff9b92 100644
--- a/client/ui-wails/frontend/src/components/SwitchItemGroup.tsx
+++ b/client/ui-wails/frontend/src/components/SwitchItemGroup.tsx
@@ -7,9 +7,7 @@ type SwitchItemGroupContextValue = {
     layoutId: string;
 };
 
-const SwitchItemGroupContext = createContext<SwitchItemGroupContextValue | null>(
-    null,
-);
+const SwitchItemGroupContext = createContext<SwitchItemGroupContextValue | null>(null);
 
 export const useSwitchItemGroup = () => {
     const ctx = useContext(SwitchItemGroupContext);
@@ -35,7 +33,7 @@ export const SwitchItemGroup = ({ value, onChange, children, className }: Props)
                 value={value}
                 onValueChange={onChange}
                 className={cn(
-                    "flex shrink-0 rounded-lg border border-nb-gray-850 bg-nb-gray-920 p-1",
+                    "flex shrink-0 rounded-lg border border-nb-gray-850 bg-nb-gray-910 p-1",
                     className,
                 )}
             >
diff --git a/client/ui-wails/frontend/src/modules/settings/Settings.tsx b/client/ui-wails/frontend/src/modules/settings/Settings.tsx
index de0e8aba3..3825364de 100644
--- a/client/ui-wails/frontend/src/modules/settings/Settings.tsx
+++ b/client/ui-wails/frontend/src/modules/settings/Settings.tsx
@@ -1,4 +1,6 @@
 import { useState } from "react";
+import * as ScrollArea from "@radix-ui/react-scroll-area";
+import { cn } from "@/lib/cn";
 import { MainRightSide } from "@/layouts/MainRightSide.tsx";
 import { VerticalTabs } from "@/components/VerticalTabs.tsx";
 import { SettingsNavigationTriggers } from "@/modules/settings/SettingsNavigationTriggers.tsx";
@@ -18,31 +20,51 @@ export const Settings = () => {
         <VerticalTabs value={active} onValueChange={setActive} className={"p-4"}>
             <SettingsNavigationTriggers />
             <MainRightSide>
-                <div className={"py-8 px-7"}>
-                    <SettingsProvider>
-                        <VerticalTabs.Content value={"general"}>
-                            <SettingsGeneral />
-                        </VerticalTabs.Content>
-                        <VerticalTabs.Content value={"network"}>
-                            <SettingsNetwork />
-                        </VerticalTabs.Content>
-                        <VerticalTabs.Content value={"security"}>
-                            <SettingsSecurity />
-                        </VerticalTabs.Content>
-                        <VerticalTabs.Content value={"ssh"}>
-                            <SettingsSSH />
-                        </VerticalTabs.Content>
-                        <VerticalTabs.Content value={"advanced"}>
-                            <SettingsAdvanced />
-                        </VerticalTabs.Content>
-                        <VerticalTabs.Content value={"troubleshooting"}>
-                            <SettingsTroubleshooting />
-                        </VerticalTabs.Content>
-                        <VerticalTabs.Content value={"about"}>
-                            <SettingsAbout />
-                        </VerticalTabs.Content>
-                    </SettingsProvider>
-                </div>
+                <ScrollArea.Root
+                    type={"auto"}
+                    className={"flex-1 min-h-0 overflow-hidden"}
+                >
+                    <ScrollArea.Viewport className={"h-full w-full"}>
+                        <div className={"py-8 px-7"}>
+                            <SettingsProvider>
+                                <VerticalTabs.Content value={"general"}>
+                                    <SettingsGeneral />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"network"}>
+                                    <SettingsNetwork />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"security"}>
+                                    <SettingsSecurity />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"ssh"}>
+                                    <SettingsSSH />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"advanced"}>
+                                    <SettingsAdvanced />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"troubleshooting"}>
+                                    <SettingsTroubleshooting />
+                                </VerticalTabs.Content>
+                                <VerticalTabs.Content value={"about"}>
+                                    <SettingsAbout />
+                                </VerticalTabs.Content>
+                            </SettingsProvider>
+                        </div>
+                    </ScrollArea.Viewport>
+                    <ScrollArea.Scrollbar
+                        orientation={"vertical"}
+                        className={cn(
+                            "flex select-none touch-none transition-colors",
+                            "w-1.5 bg-transparent py-1",
+                        )}
+                    >
+                        <ScrollArea.Thumb
+                            className={
+                                "flex-1 rounded-full bg-nb-gray-800 hover:bg-nb-gray-700 relative"
+                            }
+                        />
+                    </ScrollArea.Scrollbar>
+                </ScrollArea.Root>
             </MainRightSide>
         </VerticalTabs>
     );