diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx
index 0ee49eb8d..bf047e246 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx
+++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarFlyout/index.tsx
@@ -5,7 +5,7 @@ export const SidebarFlyout= () =>{
     return <div class="sidebar__flyout">
         <div class="sidebar__flyout__inner">
             <List gapSize='small'>
-                <SidebarListItem title='Settings' delegateClick={()=>{}} />
+                <SidebarListItem href='/settings' title='Settings' />
             </List>
         </div>
     </div>
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx
index 8bc0a7be2..9631865db 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx
+++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarHeader.tsx
@@ -1,10 +1,10 @@
-import {createSignal} from 'solid-js'
+import {createSignal, Show} from 'solid-js'
 
 import {Typography} from '@/src/components/Typography'
 import {SidebarFlyout} from './SidebarFlyout'
 
 interface SidebarHeader {
-    clanName?: string
+    clanName: string
 }
 
 export const SidebarHeader = (props:SidebarHeader)=>{
@@ -15,15 +15,21 @@ export const SidebarHeader = (props:SidebarHeader)=>{
     function handleClick(){
         toggleFlyout(!showFlyout())
     }
+
+    const renderClanProfile = () => <div class={`sidebar__profile ${showFlyout() ? 'sidebar__profile--flyout' : ''}`}>
+        <Typography classes='sidebar__profile__character' tag='span' hierarchy='title' size='m' weight='bold' color='primary' inverted={true}>
+            {clanName.slice(0,1)}
+        </Typography>
+    </div>
+    
+
+    const renderClanTitle = () => 
+        <Typography classes='sidebar__title' tag='h3' hierarchy='body' size='default' weight='medium' color='primary' inverted={true}>{clanName}</Typography>
     
     return <header class="sidebar__header">
         <div onClick={handleClick} class="sidebar__header__inner">
-            <div class={`sidebar__profile ${showFlyout() ? 'sidebar__profile--flyout' : ''}`}>
-                <Typography classes='sidebar__title' tag='span' hierarchy='title' size='m' weight='bold' color='primary' inverted={!showFlyout()}>
-                    {clanName?.slice(0,1) || 'U'}
-                </Typography>    
-            </div>
-            <Typography classes='sidebar__title' tag='h3' hierarchy='body' size='default' weight='medium' color='primary' inverted={true}>{clanName || 'Untitled'}</Typography>
+            {renderClanProfile()}
+            {renderClanTitle()}
         </div>
         { showFlyout() &&
             <SidebarFlyout/>
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
index 96e380ec3..db2d1331d 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
+++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
@@ -1,14 +1,19 @@
+import { A } from "@solidjs/router";
+
+
 import {Typography} from '@/src/components/Typography'
 
 interface SidebarListItem {
-    title:string;
-    delegateClick: () => void;
+    title:string
+    href:string
 }
 
 export const SidebarListItem = (props: SidebarListItem) =>{
-    const {title} = props;
+    const {title, href} = props;
 
     return <li class="sidebar__list__item">
-            <Typography classes='sidebar__list__content' tag='span' hierarchy='body' size='default' weight='normal' color="primary" inverted={true}>{title}</Typography>              
-         </li>
+        <A class="sidebar__list__link" href={href}>
+            <Typography classes='sidebar__list__content' tag='span' hierarchy='body' size='s' weight='normal' color="primary" inverted={true}>{title}</Typography>              
+        </A>
+    </li>
 }
\ No newline at end of file
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css
index 9951ad633..c6dc62e0f 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css
+++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-list-item.css
@@ -1,6 +1,5 @@
 .sidebar__list__item {
     position: relative;
-    padding: theme(padding.3);
     cursor: theme(cursor.pointer);
 
     &:after {
@@ -34,6 +33,13 @@
     }
 }
 
+.sidebar__list__link {
+    position: relative;
+    z-index: 20;
+    display: block;
+    padding: theme(padding.3);
+}
+
 .sidebar__list__content {
     position: relative;
     z-index: 20;
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css
index 9c5ffeb94..e476394a9 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css
+++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar-profile.css
@@ -12,4 +12,8 @@
 
 .sidebar__profile--flyout{
     background: rgb(var(--clr-bg-def-2));
+}
+
+.sidebar__profile--flyout > .sidebar__profile__character{
+    color: rgb(var(--clr-fg-def-1)) !important;
 }
\ No newline at end of file
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css
index f33e28443..3dea60651 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css
+++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css
@@ -8,6 +8,8 @@
 /* Sidebar Structure */
 
 .sidebar {
+    min-width: theme(width.72);
+    height: 100%;
     background-color: rgb(var(--clr-bg-inv-2));
     border: 1px solid rgb(var(--clr-border-inv-2)); 
     border-radius: theme(borderRadius.xl);
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/index.tsx b/pkgs/webview-ui/app/src/components/Sidebar/index.tsx
index a1aef1be1..a472b7de4 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/index.tsx
+++ b/pkgs/webview-ui/app/src/components/Sidebar/index.tsx
@@ -1,20 +1,35 @@
-import { type JSX } from "solid-js"
+import {For, createEffect, Show, type JSX, children } from "solid-js"
+import { A, RouteSectionProps } from "@solidjs/router";
 import { activeURI } from "@/src/App"
 import { createQuery } from "@tanstack/solid-query";
 import { callApi } from "@/src/api";
+import {AppRoute, routes} from '@/src/index'
 
-import { List } from "../Helpers";
+import {List} from '../Helpers';
+import {SidebarHeader} from "./SidebarHeader";
 
-import {SidebarHeader} from "./SidebarHeader"
-import "./css/sidebar.css";
 import { SidebarListItem } from "./SidebarListItem";
+import "./css/sidebar.css";
+import { Typography } from "../Typography";
 
-export const SidebarSection = (props:{children: JSX.Element}) =>{
-    const {children} = props
-    return <div class="sidebar__section">{children}</div>
+export const SidebarSection = (props:{title: string, children: JSX.Element}) =>{
+    const {title, children} = props
+    
+    return <details class="sidebar__section accordeon" open>
+            <summary class="accordeon__header">
+                <Typography classes="uppercase" tag="p" hierarchy="body" size="xs" weight="normal" color="tertiary" inverted={true}>{title}</Typography>
+            </summary>
+            <div class="accordeon__body">{children}</div>
+        </details>
 }
 
-export const Sidebar = () => {
+export const Sidebar = (props: RouteSectionProps) => {
+
+    createEffect(()=>{
+        console.log('machines')
+        console.log(routes)
+    })
+
     const query = createQuery(() => ({
         queryKey: [activeURI(), "meta"],
         queryFn: async () => {
@@ -29,27 +44,29 @@ export const Sidebar = () => {
         },
     }));
 
- return (
-    <div class="sidebar bg-opacity-95">
-        <SidebarHeader clanName={query.data?.name}/>
-        <div class="sidebar__body">
-            <SidebarSection>    
-                <List gapSize="small">
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                </List>
-            </SidebarSection>
-            <SidebarSection>    
-                <List gapSize="small">
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                    <SidebarListItem title="test" delegateClick={()=>{}}/>
-                </List>
-            </SidebarSection>        
+    return (
+        <div class="sidebar bg-opacity-95">
+            <Show when={query.data} fallback={<SidebarHeader clanName={'Untitled'}/>}>
+                {(meta) => <SidebarHeader clanName={meta().name}/>}
+            </Show>
+            <div class="sidebar__body">
+                <For each={routes.filter((r) => !r.hidden && r.path !="/clans" )}>
+                    {(route:AppRoute)=>(
+                        <Show when={route.children}>
+                            {(children)=>
+                                <SidebarSection title={route.label}>
+                                    <ul>
+                                        <For each={children().filter((r)=>!r.hidden)}>
+                                            {(child)=><SidebarListItem href={`${route.path}${child.path}`} title={child.label} />}
+                                        </For>
+                                    </ul>
+                                </SidebarSection>
+                            }
+                        </Show>
+                        )
+                    }
+                </For>        
+            </div>
         </div>
-    </div>
- )   
+    )   
 }
\ No newline at end of file
diff --git a/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css b/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css
index 9d0d170dd..886828664 100644
--- a/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css
+++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-color.css
@@ -1,23 +1,23 @@
 .fnt-clr-primary {
-    color: var(--clr-fg-def-1);
+    color:( rgb(--clr-fg-def-1));
 }
 
 .fnt-clr-secondary {
-    color: var(--clr-fg-def-2);
+    color: rgb(var(--clr-fg-def-2));
 }
 
 .fnt-clr-tertiary {
-    color: var(--clr-fg-def-3);
+    color: rgb(var(--clr-fg-def-3));
 }
 
 .fnt-clr-primary.fnt-clr--inverted {
-    color: var(--clr-fg-inv-1);
+    color: rgb(var(--clr-fg-inv-1));
 }
 
 .fnt-clr-secondary.fnt-clr--inverted {
-    color: var(--clr-fg-inv-2);
+    color: rgb(var(--clr-fg-inv-2));
 }
 
 .fnt-clr-tertiary.fnt-clr--inverted {
-    color: var(--clr-fg-inv-3);
+    color: rgb(var(--clr-fg-inv-3));
 }
\ No newline at end of file
diff --git a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
index df601ba41..6988b7276 100644
--- a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
+++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
@@ -5,13 +5,13 @@
 }
 
 .fnt-body-s {
-    font-size: 0.875rem;
+    font-size: 0.925rem;
     line-height: 132%;
     letter-spacing: 3%;
 }
 
 .fnt-body-xs {
-    font-size: 0.75rem;
+    font-size: 0.875rem;
     line-height: 132%;
     letter-spacing: 3%;
 }
\ No newline at end of file
diff --git a/pkgs/webview-ui/app/src/index.css b/pkgs/webview-ui/app/src/index.css
index e735a6311..a0c645673 100644
--- a/pkgs/webview-ui/app/src/index.css
+++ b/pkgs/webview-ui/app/src/index.css
@@ -56,7 +56,7 @@
   --clr-fg-def-3: theme(colors.clan-secondary.700);
   --clr-fg-def-4: theme(colors.clan-secondary.500);
 
-  --clr-fg-inv-1: theme(colors.white);
+  --clr-fg-inv-1: 255 255 255;
   --clr-fg-inv-2: theme(colors.clan-secondary.100);
   --clr-fg-inv-3: theme(colors.clan-secondary.300);
   --clr-fg-inv-4: theme(colors.clan-secondary.400);
@@ -67,3 +67,22 @@ html {
   overflow-x: hidden;
   overflow-y: scroll;
 }
+
+.accordeon {
+  display: flex;
+  flex-direction: column;
+  gap: theme(gap.3);
+}
+
+.accordeon__header {
+  padding: theme(padding.2) theme(padding[1.5]);
+  cursor: pointer;
+}
+
+.accordeon__header::-webkit-details-marker {
+  display: none;
+}
+
+.accordeon__body {
+  padding: theme(padding.2) 0 theme(padding.1);
+}
diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx
index 8d7ee1bb7..e67ea5e30 100644
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -7,6 +7,7 @@ import { redirect, RouteSectionProps, useNavigate } from "@solidjs/router";
 
 export const Layout: Component<RouteSectionProps> = (props) => {
   const navigate = useNavigate();
+  +
   createEffect(() => {
     console.log("Layout props", props.location);
     console.log(
@@ -20,7 +21,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
 
   return (
     <div class="h-screen bg-base-100 p-4">
-      <div class="drawer lg:drawer-open ">
+      <div class="drawer h-full lg:drawer-open ">
         <input
           id="toplevel-drawer"
           type="checkbox"
@@ -44,8 +45,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
             aria-label="close sidebar"
             class="drawer-overlay"
           ></label>
-          <SidebarUpdate/>
-          <Sidebar {...props} />
+          <SidebarUpdate />
         </div>
       </div>
     </div>