diff --git a/src/App.vue b/src/App.vue
index 67fb9548cdc6725db0e3b7b45bedb49fb5791fff..8fca00cb6054291e0bea8211e0972532ac4208e2 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,18 @@
 <script setup lang="ts">
 import './app.css'
+
+const navSidebarRef = useTemplateRef('navSidebarRef')
+const transactionSidebarRef = useTemplateRef('transactionSidebarRef')
 </script>
 
 <template>
-  <TopBar />
-  <NavSidebar>
-    <TransactionSidebar>
-      <main mt-topbar min-h-0 overflow-scroll p-4>
-        <RouterView />
-      </main>
-    </TransactionSidebar>
-  </NavSidebar>
+  <TopBar @toggle-nav-sidebar="navSidebarRef.providerRef.toggleSidebar()" @toggle-transaction-sidebar="transactionSidebarRef.providerRef.toggleSidebar()">
+    <NavSidebar ref="navSidebarRef" @toggle-transaction-sidebar="transactionSidebarRef.providerRef.toggleSidebar()">
+      <TransactionSidebar ref="transactionSidebarRef">
+        <main mt-topbar min-h-0 overflow-scroll p-4>
+          <RouterView />
+        </main>
+      </TransactionSidebar>
+    </NavSidebar>
+  </TopBar>
 </template>
diff --git a/src/components/NavSidebar.vue b/src/components/NavSidebar.vue
index 1a8f7526f8923c970f1678ad03e4565475e6f2c2..14a5500409dd65605664e57ec61b0dfed4fc7ba1 100644
--- a/src/components/NavSidebar.vue
+++ b/src/components/NavSidebar.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import type { SidebarProps } from './ui/sidebar'
 import { useMobileView } from '@/components/useMobileView'
 
-const props = defineProps<SidebarProps>()
-
+const emit = defineEmits(['toggleTransactionSidebar'])
+const providerRef = useTemplateRef('providerRef')
 const isMobile = useMobileView()
+defineExpose({ providerRef })
 // This is sample data.
 const data = {
   navMain: [
@@ -148,7 +148,7 @@ const data = {
 </script>
 
 <template>
-  <SidebarProvider v-model:open="openstate">
+  <SidebarProvider ref="providerRef">
     <Sidebar v-bind="props" collapsible="icon">
       <SidebarContent>
         <SidebarGroup>
@@ -173,7 +173,7 @@ const data = {
           </SidebarGroupLabel>
           <SidebarGroupContent>
             <SidebarMenu>
-              <SidebarMenuButton />
+              <TransactionSidebarWidget @click="emit('toggleTransactionSidebar')" />
             </SidebarMenu>
           </SidebarGroupContent>
         </SidebarGroup>
@@ -181,6 +181,7 @@ const data = {
       <SidebarRail />
     </Sidebar>
     <SidebarInset>
+      <a>{{ navopenstate }}</a>
       <slot />
     </SidebarInset>
   </SidebarProvider>
diff --git a/src/components/NavSidebarButton.vue b/src/components/NavSidebarButton.vue
deleted file mode 100644
index d401f10477da23c2b697f47457b651f6bafe9637..0000000000000000000000000000000000000000
--- a/src/components/NavSidebarButton.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<template>
-  <Button variant="outline">
-    <Icon
-      icon="radix-icons:moon"
-      class="h-[1.2rem] w-[0.2rem]"
-    />
-    <span class="sr-only">Toggle navigation sidebar</span>
-  </Button>
-</template>
diff --git a/src/components/NavSidebarElement.vue b/src/components/NavSidebarElement.vue
index e9073c4900d1feaec399e5b1b43dbdc8b456748d..e386d9e2966a0ed4fa9961e5ef6645c411dacc46 100644
--- a/src/components/NavSidebarElement.vue
+++ b/src/components/NavSidebarElement.vue
@@ -9,13 +9,12 @@ const { open } = useSidebar()
   <SidebarMenuItem>
     <SidebarMenuButton as-child :is-active="active" class="bg-active">
       <a :href="props.url">
-        <Icon
-          :icon="props.icon"
-          class="h-[1.2rem] w-[1.2rem]"
-        />
-        <span v-if="open">
-          {{ props.title }}
-        </span>
+        <div flex items-center>
+          <icon-ecosystem />
+          <span v-if="open" class="ml-2">
+            {{ props.title }}
+          </span>
+        </div>
       </a>
     </SidebarMenuButton>
     <slot />
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 49e4a41add77ac9533502c35683d34990c230309..835ee5a7b83e5c65821951679ab7022b04e7e57b 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,16 +1,22 @@
 <script setup lang="ts">
 import { useMobileView } from '@/components/useMobileView'
 
+const emit = defineEmits(['toggleNavSidebar', 'toggleTransactionSidebar'])
 const isMobile = useMobileView()
 </script>
 
 <template>
   <div h-14 b-b bg-background>
     <div flex justify-center gap-2 p-2>
-      <NavSidebarButton v-if="isMobile" />
+      <Button v-if="isMobile" variant="ghost" @click="emit('toggleNavSidebar')">
+        <icon-tooling />
+        <span class="sr-only">Toggle navigation sidebar</span>
+      </Button>
       <GlobalSearch />
+      <TransactionSidebarWidget v-if="!isMobile" @click="emit('toggleTransactionSidebar')" />
       <UserNav />
       <DarkModeToggle />
     </div>
   </div>
+  <slot />
 </template>
diff --git a/src/components/TransactionSidebar.vue b/src/components/TransactionSidebar.vue
index 27f650ff02175224ceaa187e481757bb8b8a36bf..087f0256b3d7565882c5145c5d54bd25e3ee205f 100644
--- a/src/components/TransactionSidebar.vue
+++ b/src/components/TransactionSidebar.vue
@@ -1,5 +1,10 @@
+<script setup lang="ts">
+const providerRef = useTemplateRef('providerRef')
+defineExpose({ providerRef })
+</script>
+
 <template>
-  <SidebarProvider cookie-name="transaction-sidebar">
+  <SidebarProvider ref="providerRef" cookie-name="transaction-sidebar">
     <SidebarInset>
       <slot />
     </SidebarInset>
diff --git a/src/components/TransactionSidebarWidget.vue b/src/components/TransactionSidebarWidget.vue
new file mode 100644
index 0000000000000000000000000000000000000000..f19d982a75c681e1738cf3fa389d0bd2c9df2fcf
--- /dev/null
+++ b/src/components/TransactionSidebarWidget.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+const count = ref(0)
+</script>
+
+<template>
+  <Button variant="outline">
+    <div flex items-center>
+      <icon-tooling />
+      <span ml-2 mr-2>
+        pending transactions
+      </span>
+      <Badge>
+        {{ count }}
+      </Badge>
+    </div>
+    <span class="sr-only">Toggle navigation sidebar</span>
+  </Button>
+</template>
diff --git a/src/components/ui/sidebar/SidebarProvider.vue b/src/components/ui/sidebar/SidebarProvider.vue
index 502ac417126aea41aa8f5fd1d13bf30531af03e7..bef1a1b1ff6bbc87df954fd12aed02bca5713cba 100644
--- a/src/components/ui/sidebar/SidebarProvider.vue
+++ b/src/components/ui/sidebar/SidebarProvider.vue
@@ -66,6 +66,8 @@ provideSidebarContext({
   setOpenMobile,
   toggleSidebar,
 })
+
+defineExpose({toggleSidebar})
 </script>
 
 <template>