diff --git a/src/client/AppNext.tsx b/src/client/AppNext.tsx
index aecf2085..e8848843 100644
--- a/src/client/AppNext.tsx
+++ b/src/client/AppNext.tsx
@@ -15,6 +15,7 @@ import { MSErrorBoundary } from './components/ErrorBoundary';
 import { ComponentDetailedRoutable } from './components/msComponent/MSComponentDetailed';
 import { MSComponentListFetchable } from './components/msComponent/MSComponentList';
 import { Provider } from './components/Provider';
+import { SettingsContainer } from './components/settings/settings';
 
 function NoMatch() {
     const location = useLocation();
@@ -70,7 +71,8 @@ const routesNested: RouteObject[] = [
     {
         path: "/next",
         Component: Layout,
-        children: [ {
+        children: [ 
+        {
             index: true,
             element: <MSErrorBoundary><MSComponentListFetchable/></MSErrorBoundary>,
         },
@@ -78,6 +80,10 @@ const routesNested: RouteObject[] = [
             path: "components/:componentId",
             element: <Container boxSize="full" p="0" maxWidth="8xl"><MSErrorBoundary><ComponentDetailedRoutable/></MSErrorBoundary></Container>
         },
+        {
+            path: "settings",
+            element: <Container p="0" boxSize="full" maxWidth="4xl"><MSErrorBoundary><SettingsContainer/></MSErrorBoundary></Container>
+        },
         {
         path: "*",
         element: <NoMatch/>
diff --git a/src/client/components/MobileMenu.tsx b/src/client/components/MobileMenu.tsx
index a753c486..040ecb44 100644
--- a/src/client/components/MobileMenu.tsx
+++ b/src/client/components/MobileMenu.tsx
@@ -51,7 +51,7 @@ export const MobileSidebarNav = (props: { hideFrom?: BreakpointName | false } =
                                 </IconButton>
                             </Drawer.CloseTrigger>
                             <Drawer.Body display="flex" flexDir="column" gap="6" py="5" flex="1">
-                                <SideNavItems items={NAV_LINKS} />
+                                <SideNavItems items={NAV_LINKS} currentUrl={location.pathname} />
                             </Drawer.Body>
                         </Drawer.Content>
                     </Drawer.Positioner>
diff --git a/src/client/components/SideNav.tsx b/src/client/components/SideNav.tsx
index 130d2b2e..468760a6 100644
--- a/src/client/components/SideNav.tsx
+++ b/src/client/components/SideNav.tsx
@@ -73,8 +73,8 @@ export const SideNav = (props: SideNavProps) => {
               </Link>
             ) : (
               <RouterLink
-                href={item.url!}
-                aria-current={item.url === currentUrl ? "page" : undefined}
+                to={{pathname: item.url!}}
+                aria-current={(currentUrl.length <= item.url.length ? currentUrl.startsWith(item.url) : currentUrl === item.url) ? "page" : undefined}
               >
                 {item.title}
                 {item.status && <StatusBadge>{item.status}</StatusBadge>}
@@ -134,6 +134,10 @@ export const NAV_LINKS: SideNavProps[] = [
             {
                 title: 'Dashboard',
                 url: '/next/'
+            },
+            {
+                title: 'Settings',
+                url: '/next/settings'
             }
         ]
     },
diff --git a/src/client/components/settings/settings.tsx b/src/client/components/settings/settings.tsx
new file mode 100644
index 00000000..729abd8e
--- /dev/null
+++ b/src/client/components/settings/settings.tsx
@@ -0,0 +1,55 @@
+import { useCallback } from "react"
+import {
+    VStack,
+    Heading,
+    SegmentGroup} from "@chakra-ui/react"
+import { useTheme } from "next-themes"
+import { BsCircleHalf } from "react-icons/bs";
+import { LuMoon, LuSun } from "react-icons/lu"
+import { makeChakraIcon } from "../icons/ChakraIcons";
+
+const DarkIcon = makeChakraIcon(LuMoon);
+const LightIcon = makeChakraIcon(LuSun);
+const SystemIcon = makeChakraIcon(BsCircleHalf);
+
+export const SettingsContainer = () => {
+    const { resolvedTheme, setTheme, theme } = useTheme();
+    const setThemeCB = useCallback((val: string) => {
+        switch(val) {
+            case 'system':
+                setTheme('system');
+                localStorage.removeItem('theme');
+                break;
+            case 'dark':
+                setTheme('dark');
+                break;
+            case 'light':
+                setTheme('light');
+                break;
+        }
+    },[setTheme]);
+    return (
+        <VStack alignItems="flex-start">
+            <Heading my="3">Appearance</Heading>
+            <VStack>
+                <SegmentGroup.Root size="md" value={theme === 'system' ? 'system' : resolvedTheme} onValueChange={(val) => setThemeCB(val.value)}>
+                    <SegmentGroup.Indicator />
+                    <SegmentGroup.Item key="dark" value="dark">
+                        <SegmentGroup.ItemText>Dark <DarkIcon/></SegmentGroup.ItemText>
+                        <SegmentGroup.ItemHiddenInput />
+                    </SegmentGroup.Item>
+                    <SegmentGroup.Indicator />
+                    <SegmentGroup.Item key="light" value="light">
+                        <SegmentGroup.ItemText>Light <LightIcon/></SegmentGroup.ItemText>
+                        <SegmentGroup.ItemHiddenInput />
+                    </SegmentGroup.Item>
+                    <SegmentGroup.Indicator />
+                    <SegmentGroup.Item key="system" value="system">
+                        <SegmentGroup.ItemText>System <SystemIcon/></SegmentGroup.ItemText>
+                        <SegmentGroup.ItemHiddenInput />
+                    </SegmentGroup.Item>
+                </SegmentGroup.Root>
+            </VStack>
+        </VStack>
+    )
+}
\ No newline at end of file