diff --git a/src/components/NavSidebar.vue b/src/components/NavSidebar.vue
index df839cdabb38434fd5ee57506b55022bcfeb9484..c56783270c07b7221d5eb3810ad940f2fd2831e7 100644
--- a/src/components/NavSidebar.vue
+++ b/src/components/NavSidebar.vue
@@ -146,19 +146,14 @@ const data = {
 </script>
 
 <template>
-  <SidebarProvider>
-    <Sidebar v-bind="props">
-      <SidebarContent mt-topbar>
+  <SidebarProvider v-model:open="openstate">
+    <Sidebar v-bind="props" collapsible="icon">
+      <SidebarContent>
         <SidebarGroup>
-          <SidebarGroupLabel>Table of Contents</SidebarGroupLabel>
+          <SidebarGroupLabel>Navigation</SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              <SidebarMenuItem v-for="item in data.navMain" :key="item.title">
-                <SidebarMenuButton as-child>
-                  <a :href="item.url" class="font-medium">
-                    {{ item.title }}
-                  </a>
-                </SidebarMenuButton>
+              <NavSidebarElement v-for="item in data.navMain" :key="item.title" :title="item.title" :url="item.url" :icon="item.icon">
                 <SidebarMenuSub v-if="item.items.length">
                   <SidebarMenuSubItem v-for="subItem in item.items" :key="subItem.title">
                     <SidebarMenuSubButton as-child :is-active="subItem.isActive">
@@ -166,7 +161,17 @@ const data = {
                     </SidebarMenuSubButton>
                   </SidebarMenuSubItem>
                 </SidebarMenuSub>
-              </SidebarMenuItem>
+              </NavSidebarElement>
+            </SidebarMenu>
+          </SidebarGroupContent>
+        </SidebarGroup>
+        <SidebarGroup v-if="isMobile">
+          <SidebarGroupLabel>
+            Transactions
+          </SidebarGroupLabel>
+          <SidebarGroupContent>
+            <SidebarMenu>
+              <SidebarMenuButton />
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
diff --git a/src/components/NavSidebarElement.vue b/src/components/NavSidebarElement.vue
index 8df78cc2bf112672160b7031369dfa6b2a3063ee..e9073c4900d1feaec399e5b1b43dbdc8b456748d 100644
--- a/src/components/NavSidebarElement.vue
+++ b/src/components/NavSidebarElement.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useSidebar } from '@/components/ui/sidebar'
 
-const props = defineProps(['title', 'url', 'icon', 'active', 'mobile'])
+const props = defineProps(['title', 'url', 'icon', 'active'])
 const { open } = useSidebar()
 </script>
 
@@ -11,12 +11,13 @@ const { open } = useSidebar()
       <a :href="props.url">
         <Icon
           :icon="props.icon"
-          class="h-[1.2rem] w-[2.5rem]"
+          class="h-[1.2rem] w-[1.2rem]"
         />
         <span v-if="open">
           {{ props.title }}
         </span>
       </a>
     </SidebarMenuButton>
+    <slot />
   </SidebarMenuItem>
 </template>
diff --git a/src/components/ui/sidebar/Sidebar.vue b/src/components/ui/sidebar/Sidebar.vue
index 6bc20f5c814ecc37afba8bb9ced23eb0d351e667..638930ef9c6299a21cd372013ea2d37ea3520f60 100644
--- a/src/components/ui/sidebar/Sidebar.vue
+++ b/src/components/ui/sidebar/Sidebar.vue
@@ -62,7 +62,7 @@ const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
     />
     <div
       :class="cn(
-        'duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
+        'duration-200 fixed inset-y-0 z-10 hidden top-14 h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex',
         side === 'left'
           ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
           : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',