From c9eba93fbb9a92b40cea644f44b9aef5edcadda3 Mon Sep 17 00:00:00 2001
From: Alex <32063118+alex-byteport@users.noreply.github.com>
Date: Tue, 17 Dec 2024 09:25:10 +0100
Subject: [PATCH] New sidebar with navigation added: UI changes and small fixes
 (#101)

* new sidebar with navigation added. ui changes and small fixes.

* prettier

* fix warnings

* fix dangling session proxies hwn changing role

---------

Co-authored-by: Alexey Popov <a.popov@tantumpay.com>
Co-authored-by: Alain Brenzikofer <alain@integritee.network>
---
 app.vue                                       |  11 +-
 assets/img/.DS_Store                          | Bin 6148 -> 8196 bytes
 assets/img/incognitee-full-logo.svg           |   1 +
 components/Logo/incognitee-logo.vue           |   2 +-
 components/overlays/SessionProxiesOverlay.vue |   3 -
 components/tabs/MessagingTab.vue              |  78 ++-
 components/tabs/SwapTab.vue                   |  32 +-
 components/tabs/VouchersTab.vue               | 613 +++++++++---------
 components/tabs/WalletTab.vue                 |  17 +-
 components/ui/CampaignBanner.vue              |   2 +-
 components/ui/HealthIndicator.vue             |   8 +-
 components/ui/InfoBanner.vue                  |   2 +-
 components/ui/NetworkSelector.vue             |   4 +-
 components/ui/PrivateMessageHistory.vue       |  17 +-
 components/ui/PrivateTxHistory.vue            |   6 +-
 components/ui/Sidebar.vue                     | 222 +++++++
 helpers/eventBus.ts                           |   6 +-
 layouts/default.vue                           | 277 ++------
 package.json                                  |   3 +-
 pages/index.vue                               |  27 +-
 public/.DS_Store                              | Bin 6148 -> 8196 bytes
 public/img/.DS_Store                          | Bin 6148 -> 6148 bytes
 public/img/index/.DS_Store                    | Bin 8196 -> 10244 bytes
 23 files changed, 728 insertions(+), 603 deletions(-)
 create mode 100644 assets/img/incognitee-full-logo.svg
 create mode 100644 components/ui/Sidebar.vue

diff --git a/app.vue b/app.vue
index 5cd504e..d3971a3 100644
--- a/app.vue
+++ b/app.vue
@@ -1,7 +1,16 @@
 <script setup lang="ts"></script>
 
 <template>
-  <NuxtLayout />
+  <div>
+    <NuxtLoadingIndicator />
+
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+
+    <UNotifications />
+    <UModals />
+  </div>
 </template>
 
 <style lang="scss">
diff --git a/assets/img/.DS_Store b/assets/img/.DS_Store
index 65e8314d814e81c870588fe50d355e645f695a20..0806ef0b14a7c64d77767872fa0e0c7e44f9742e 100644
GIT binary patch
literal 8196
zcmeHML2DC16n@jD?S|4)QK2Bx1+TRxMbscdOe5meh#pjGl8xz-%}(ehO`#NW*8kui
z@Zi-y;7?FI`VTyN((lbo>m<9WLP3h12{UiA^S<|HzxQ@FZ$m_)G6;%9t3>3Xvs_uk
zkkNRad#cTtGglx5@I-ZLQlFAXk!+^4-3iBlW56-s7;p?Y2F?NlcxH3+rabrctQ#Ez
zj)8N@0PhbzI?J+=BQ4d|fkBl3kU5-I4acYh6vj8QY~)Bw1%*vrJqQC8ro<2$j(MNe
zA<IUNwA64C8cxD^7N$ZG$~$nrQYTT?(v6M*$3U6^uH8LU?UG_t?pFQYh-3qEd^_Do
z-}tE-jxzKc!=z{QKQ?+%nDh&UFJfjkH#fiFdETP;vbH0KwSK)nNGkQ+=lt!7lu_g8
zxZZdgwuaj)m$qcwuZMAKR{_GH1(g@i!Z?t_iX6m2qOdhR;pOxB?UmJogIlF_zj*V`
z;ktiN+$?Oa`?pJ_!^6CH`Pz-UkGDHfH<oYI%1M~*gO>F7<MD0Qbp=T?YG9qLl_Du>
z7i&$~?P(MFds#YNS*;pkyye0iJ$(O($xPYm%HXf`dONnyGP_RM+N<rxk&N4z<BPpW
zAwtUmZbOC$atoj9)J3op>d*$pJ!<nS8!O}=fV4wCr>q1(?vHDVtJ5|AleDm|{WUUz
z6M~7gPLHL++J0wz)=q-2-;a~P!rS4`))))?+BZ0`{ZEA4qez8oN^k||x*gml=yQ5V
zq(x}<g3PoKKPHgN)Kh8HQrIIanb;XlNZacLU?n_vU?IR!AKp*4@Oi?*0#a9Ey&)__
z`mN*d6rSBWS$iyIl;?;}*t6rdoSQ$oc~e@}tvgj~EPhmgGweVEtUti||8U)E|9xle
zzl?UxF>qQ2X0?G;uKyoQfB%14HxBO@a15Mb21Kq}t5&c;eh6kYuC;yiSLobWZ=|Jy
rU{K{aq$<ZDkN+^lu@6<ol#Lu|i8E;b{6&EIwcwurihehoQwDwk73Q4*

delta 143
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGjUEV6q~50D9Q(t2a6>#Br}vS6sHs?=WHxo
z&dA6&*-%hqvWDQ2$$G-mCw~>0u(4EzWidMkhafXh4-g1&0|{4<SsM$#Gf(E1aRgZg
TGK~d9GeK+vi*1hQnZpbK6%-fk

diff --git a/assets/img/incognitee-full-logo.svg b/assets/img/incognitee-full-logo.svg
new file mode 100644
index 0000000..cd059a2
--- /dev/null
+++ b/assets/img/incognitee-full-logo.svg
@@ -0,0 +1 @@
+<svg data-v-bfd8894c="" data-v-433a9abd="" width="234" height="30" viewBox="0 0 236 30" xmlns="http://www.w3.org/2000/svg"><path class="blue-hover show-on-hover" d="M62 7.39438C61.8841 13.2019 61.0444 18.6842 58.4869 23.779C57.6472 25.4513 56.6038 26.9813 55.1652 28.1933C52.8518 30.1428 50.2784 30.5604 47.575 29.2222C45.9695 28.4279 44.5045 27.3492 42.9535 26.4376C41.3076 25.469 39.6652 24.4881 37.9683 23.6156C33.2625 21.1934 28.5127 21.197 23.8578 23.6991C21.1544 25.1527 18.5617 26.8179 15.9391 28.4208C14.3512 29.3893 12.7053 30.1126 10.8029 29.9491C8.71084 29.7696 7.10357 28.666 5.76858 27.1128C3.42355 24.3833 2.18165 21.1028 1.2981 17.6695C0.184429 13.3458 -0.189721 8.94399 0.0878175 4.48353C0.129975 3.7958 0.35306 3.27689 0.874762 2.82196C2.86672 1.07864 5.22755 0.271848 7.79039 0.0852548C13.0935 -0.303925 18.0804 0.916928 22.86 3.20403C24.4989 3.98772 26.194 4.6559 27.8838 5.32408C29.9952 6.15753 32.1365 6.1291 34.2321 5.27966C36.1591 4.49774 38.0597 3.64652 39.9638 2.80596C44.5695 0.774761 49.3492 -0.353684 54.3975 0.0994714C56.8849 0.321606 59.186 1.12485 61.1094 2.8344C61.5837 3.25556 61.856 3.72294 61.87 4.37157C61.8928 5.43604 61.9596 6.49873 62 7.39438ZM36.6175 14.0193C37.9016 15.704 39.3314 17.1221 41.0968 18.1688C43.3065 19.4785 45.5813 19.7078 47.9281 18.558C49.9429 17.5699 51.5378 16.0701 52.901 14.3054C53.0011 14.1757 52.9589 13.8008 52.843 13.6515C51.7311 12.2067 50.4312 10.9628 48.8854 9.99425C46.5755 8.54948 44.1901 8.25804 41.7098 9.52688C39.6529 10.5789 38.0368 12.1445 36.6175 14.0193ZM25.3684 14.0211C23.8332 12.0148 22.0907 10.3301 19.8054 9.31363C18.6425 8.7965 17.4182 8.56014 16.1499 8.8036C12.9459 9.4167 10.8099 11.5581 8.82677 14.0069C10.283 15.9155 11.9254 17.5131 14.0403 18.5527C16.2553 19.642 18.4352 19.5176 20.5853 18.3341C22.4876 17.2856 23.9965 15.7964 25.3684 14.0229V14.0211Z" fill="url(#paint0_linear_431_37837)" data-v-inspector="components/Logo/incognitee-logo.vue:9:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M219.12 15.1342C219.12 9.8775 222.556 6.29492 227.16 6.29492C231.964 6.29492 234.966 9.91098 234.966 14.8663C234.966 15.3686 234.933 15.7703 234.9 16.1387H223.157C223.29 19.3529 224.958 20.7592 227.26 20.7592C229.395 20.7592 230.563 19.4869 231.33 17.7458L235 19.1186C233.832 22.065 231.363 23.9735 227.227 23.9735C222.323 23.9735 219.12 20.6587 219.12 15.1342ZM223.29 13.1253H230.863C230.73 10.7146 229.295 9.34179 227.16 9.34179C225.125 9.34179 223.59 10.7146 223.29 13.1253Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:14:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M200.55 15.1342C200.55 9.8775 203.986 6.29492 208.59 6.29492C213.394 6.29492 216.397 9.91098 216.397 14.8663C216.397 15.3686 216.363 15.7703 216.33 16.1387H204.587C204.72 19.3529 206.388 20.7592 208.69 20.7592C210.825 20.7592 211.993 19.4869 212.76 17.7458L216.43 19.1186C215.262 22.065 212.794 23.9735 208.657 23.9735C203.753 23.9735 200.55 20.6587 200.55 15.1342ZM204.72 13.1253H212.293C212.16 10.7146 210.725 9.34179 208.59 9.34179C206.555 9.34179 205.021 10.7146 204.72 13.1253Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:19:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M189.702 9.97724H186.099V6.79645H189.702V1.57324H193.772V6.79645H198.175V9.97724H193.772V18.5821C193.772 19.6201 194.272 20.1223 195.306 20.1223H198.843V23.4705H193.905C191.203 23.4705 189.702 21.8969 189.702 19.2183V9.97724Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:24:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M178.908 4.15178V0H183.245V4.15178H178.908ZM179.074 23.4709V6.79686H183.111V23.4709H179.074Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:29:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M163.434 23.4712H159.364V6.79715H163.134C163.101 7.76813 162.433 9.27483 161.499 10.6476H163.401C164.101 8.40429 165.87 6.29492 168.605 6.29492C172.375 6.29492 174.31 8.60518 174.31 12.4891V23.4712H170.24V13.2927C170.24 10.882 169.139 9.71009 167.237 9.71009C163.768 9.71009 163.434 13.0583 163.434 15.8373V23.4712Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:34:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M137.664 26.9199C137.664 25.5471 138.631 24.5092 139.965 24.0069V22.6007C138.898 22.2324 138.197 21.4958 138.197 20.4244C138.197 19.0181 139.065 18.0136 140.833 17.3775V16.0047C139.599 15.0672 138.931 14.0293 138.931 12.2547C138.931 8.87304 141.834 6.29492 145.637 6.29492C148.606 6.29492 150.741 7.6342 151.508 9.67661H152.843C153.076 7.6342 153.81 6.79715 155.445 6.79715H156.412V9.97795H154.778C153.543 9.97795 153.21 10.2458 153.043 12.0538L152.976 12.5561C152.609 16.2726 149.907 18.5159 146.037 18.5159C144.603 18.5159 143.502 18.315 142.734 17.9132C141.834 18.2145 141.367 18.6833 141.367 19.286C141.367 19.8552 141.9 20.1565 142.968 20.1565H150.141C153.477 20.1565 155.745 22.2324 155.745 25.0449C155.745 28.2257 153.377 30.0002 150.141 30.0002H141.767C138.798 30.0002 137.664 28.4266 137.664 26.9199ZM149.24 12.4891C149.24 10.5806 148.005 9.20786 146.037 9.20786C144.069 9.20786 142.835 10.5806 142.835 12.4891C142.835 14.3976 144.036 15.7034 146.037 15.7034C147.939 15.7034 149.24 14.3976 149.24 12.4891ZM142.968 26.8864H149.44C150.941 26.8864 151.709 26.3172 151.709 25.1453C151.709 24.0404 150.941 23.4712 149.44 23.4712H141.967C141.433 23.7726 140.933 24.4757 140.933 25.2458C140.933 26.3507 141.6 26.8864 142.968 26.8864Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:39:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M118.645 15.1342C118.645 9.94447 122.115 6.29492 127.019 6.29492C131.923 6.29492 135.393 9.94447 135.393 15.1342C135.393 20.3909 131.823 23.9735 127.019 23.9735C122.215 23.9735 118.645 20.2235 118.645 15.1342ZM131.189 15.2012C131.189 11.5516 129.454 9.60965 127.019 9.60965C124.483 9.60965 122.849 11.5516 122.849 15.2012C122.849 18.8172 124.483 20.6587 127.019 20.6587C129.554 20.6587 131.189 18.8172 131.189 15.2012Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:44:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M100.173 15.1007C100.173 9.8775 103.876 6.29492 108.714 6.29492C112.583 6.29492 115.219 8.40429 116.253 11.2503L112.517 12.5896C111.85 10.7146 110.515 9.60965 108.614 9.60965C106.178 9.60965 104.31 11.4846 104.31 15.1007C104.31 18.7503 106.212 20.6587 108.647 20.6587C110.782 20.6587 112.05 19.4534 112.75 17.277L116.587 18.6498C115.386 21.8641 112.583 23.9735 108.714 23.9735C103.743 23.9735 100.173 20.4244 100.173 15.1007Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:49:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M85.7002 23.4712H81.6301V6.79715H85.3999C85.3666 7.76813 84.6993 9.27483 83.7652 10.6476H85.6668C86.3674 8.40429 88.1355 6.29492 90.8711 6.29492C94.6409 6.29492 96.5759 8.60518 96.5759 12.4891V23.4712H92.5058V13.2927C92.5058 10.882 91.4049 9.71009 89.5033 9.71009C86.0338 9.71009 85.7002 13.0583 85.7002 15.8373V23.4712Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:54:5" data-v-bfd8894c=""/><path class="blue-hover show-on-hover" d="M72 23.4707V0.0332031H76.3369V23.4707H72Z" fill="white" data-v-inspector="components/Logo/incognitee-logo.vue:59:5" data-v-bfd8894c=""/><defs data-v-inspector="components/Logo/incognitee-logo.vue:64:5" data-v-bfd8894c=""><linearGradient id="paint0_linear_431_37837" x1="62" y1="15" x2="0" y2="15" gradientUnits="userSpaceOnUse" data-v-inspector="components/Logo/incognitee-logo.vue:65:7" data-v-bfd8894c=""><stop offset="0.0913122" stop-color="#24AD7C" data-v-inspector="components/Logo/incognitee-logo.vue:73:9" data-v-bfd8894c=""/><stop offset="1" stop-color="#1845B9" data-v-inspector="components/Logo/incognitee-logo.vue:74:9" data-v-bfd8894c=""/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/components/Logo/incognitee-logo.vue b/components/Logo/incognitee-logo.vue
index 30199bd..3819e2f 100644
--- a/components/Logo/incognitee-logo.vue
+++ b/components/Logo/incognitee-logo.vue
@@ -2,7 +2,7 @@
   <svg
     width="234"
     height="30"
-    viewBox="0 0 330 30"
+    viewBox="0 0 236 30"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
diff --git a/components/overlays/SessionProxiesOverlay.vue b/components/overlays/SessionProxiesOverlay.vue
index e3d2c45..2e5dd5b 100644
--- a/components/overlays/SessionProxiesOverlay.vue
+++ b/components/overlays/SessionProxiesOverlay.vue
@@ -273,9 +273,6 @@ const modifySessionProxyRole = async (
       " expiry update to: " +
       expiry,
   );
-  // clear the cached proxy entry at old role. it will be added again with the new role
-  // at the next fetchIncogniteeBalance
-  accountStore.removeProxyForRole(bestSessionProxyRole.value);
   const nonce = new u32(
     new TypeRegistry(),
     accountStore.nonce[incogniteeSidechain.value],
diff --git a/components/tabs/MessagingTab.vue b/components/tabs/MessagingTab.vue
index 0ffa316..3a24a2a 100644
--- a/components/tabs/MessagingTab.vue
+++ b/components/tabs/MessagingTab.vue
@@ -50,16 +50,23 @@
     </div>
     <!-- Overlay End -->
 
-    <div class="bg-gray-900 text-white max-h-[650px] flex mt-10">
+    <div class="bg-incognitee-blue text-white flex">
       <!-- Form starts here -->
 
       <!-- Sidebar -->
       <div
         v-if="!isMobile || !showChatDetail"
         :class="isMobile ? 'w-full' : 'md:w-1/3'"
-        class="bg-gray-800 border-r border-gray-700 flex flex-col"
+        class="bg-incognitee-blue border-r border-gray-700 flex flex-col"
       >
         <div class="px-4 py-4 flex items-center justify-between">
+          <!-- Sidebar-Button -->
+          <button
+            @click="eventBus.emit('toggleSidebar')"
+            class="lg:hidden text-white focus:outline-none text-2xl"
+          >
+            ☰
+          </button>
           <!-- Linksbündiger Titel -->
           <div
             class="title text-2xl font-bold tracking-tight text-white sm:text-2xl"
@@ -168,7 +175,7 @@
       <div
         v-if="!isMobile || showChatDetail"
         :class="isMobile ? 'w-full' : 'md:w-2/3'"
-        class="bg-gray-900 flex flex-col"
+        class="bg-incognitee-blue flex flex-col h-screen relative"
       >
         <!-- Header -->
         <div
@@ -184,30 +191,27 @@
           <h2 class="text-lg font-bold">
             {{
               recipientValid(conversationAddress)
-                ? "Chat with " +
-                  (maybeUsername(conversationAddress) || "") +
+                ? (maybeUsername(conversationAddress) || "") +
                   " " +
-                  conversationAddress.slice(0, 12) +
-                  "..."
+                  (isMobile
+                    ? conversationAddress.slice(0, 10) + "..." // Mobile: Abgekürzt
+                    : conversationAddress) // Desktop: Vollständige Adresse
                 : "Chat"
             }}
           </h2>
         </div>
         <!-- Chat Messages -->
-        <div class="flex-1 overflow-y-auto">
+        <div class="flex-1 overflow-y-auto" style="height: calc(100vh - 12rem)">
           <div
             v-if="eventHorizon"
-            class="ml-5 mt-5 flex justify-center text-gray-500"
+            class="my-5 mx-5 flex text-center text-xs text-gray-500"
           >
-            <i
-              >messages before {{ formatMoment(eventHorizon) }} have been purged
-              from Incognitee state. more recent messages can be polled in
-              batches</i
-            >
+            messages before {{ formatMoment(eventHorizon) }} have been purged
+            from Incognitee state. more recent messages can be polled in batches
           </div>
           <div
             v-if="unfetchedBucketsCount > 0"
-            class="mt-5 flex justify-center text-gray-500"
+            class="my-5 mx-5 flex text-center text-xs text-gray-500"
           >
             <button @click="fetchOlderBucket">
               query more messages
@@ -228,7 +232,7 @@
         <!-- Input Box -->
         <div
           v-if="recipientValid(conversationAddress)"
-          class="border-t border-gray-700"
+          class="border-t border-gray-700 bg-gray-800 absolute bottom-0 left-0 right-0 z-10"
         >
           <div class="flex items-center bg-gray-800 px-4 py-2">
             <form class="flex w-full" @submit.prevent="submitSendForm">
@@ -385,10 +389,11 @@
 <script setup lang="ts">
 import PrivateMessageHistory from "~/components/ui/PrivateMessageHistory.vue";
 import { incogniteeSidechain } from "~/lib/environmentConfig";
+import { eventBus } from "@/helpers/eventBus";
 import { INCOGNITEE_TX_FEE } from "~/configs/incognitee";
 import { Health, useSystemHealth } from "~/store/systemHealth";
 import { TypeRegistry, u32 } from "@polkadot/types";
-import { defineProps, ref, watch, computed, onMounted } from "vue";
+import { defineProps, ref, watch, computed, onMounted, onUnmounted } from "vue";
 import { useAccount } from "~/store/account";
 import { useIncognitee } from "~/store/incognitee";
 import OverlayDialog from "~/components/overlays/OverlayDialog.vue";
@@ -709,47 +714,60 @@ const inputText = ref("");
 
 <style scoped>
 textarea {
-  resize: none; /* Disable resizing for better layout control */
+  resize: none;
+  /* Disable resizing for better layout control */
 }
 
 .relative {
-  position: relative; /* Ensure the counter is positioned relative to the input */
+  position: relative;
+  /* Ensure the counter is positioned relative to the input */
 }
+
 .bg-opacity-75 {
   background-color: rgba(0, 0, 0, 0.828);
 }
 
 .fixed {
-  z-index: 50; /* Ensure overlay is on top */
+  z-index: 50;
+  /* Ensure overlay is on top */
 }
 
 .pointer-events-none {
   pointer-events: none;
 }
+
 /* Für Webkit-basierte Browser (Chrome, Safari, Edge) */
 ::-webkit-scrollbar {
-  width: 5px; /* Breite der Scrollbar */
+  width: 5px;
+  /* Breite der Scrollbar */
 }
 
 ::-webkit-scrollbar-track {
-  background: #1f293700; /* Hintergrund des Tracks */
+  background: #1f293700;
+  /* Hintergrund des Tracks */
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #4b556300; /* Farbe der Scrollbar */
-  border-radius: 6px; /* Runde Ecken */
-  border: 3px solid #1f2937; /* Abstand zur Scrollspur */
+  background-color: #4b556300;
+  /* Farbe der Scrollbar */
+  border-radius: 6px;
+  /* Runde Ecken */
+  border: 3px solid #1f2937;
+  /* Abstand zur Scrollspur */
 }
 
 /* Für Firefox */
 * {
-  scrollbar-width: thin; /* Dünne Scrollbar */
-  scrollbar-color: #4b5563 #1f293700; /* Daumen- und Trackfarben */
+  scrollbar-width: thin;
+  /* Dünne Scrollbar */
+  scrollbar-color: #4b5563 #1f293700;
+  /* Daumen- und Trackfarben */
 }
 
 /* Optional: Hover-Effekt auf der Scrollbar */
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #6b7280; /* Hover-Farbe der Scrollbar */
+  background-color: #6b7280;
+  /* Hover-Farbe der Scrollbar */
 }
 
 .wallet-address {
@@ -760,14 +778,14 @@ textarea {
   /* Versteckt überlaufenden Text */
   text-overflow: ellipsis;
   /* Zeigt '...' bei zu langem Text an */
-  max-width: 15ch;
+  max-width: 10ch;
   /* Maximale Länge: 10 Zeichen */
 }
 
 /* Für größere Bildschirme (ab 641px) */
 @media (min-width: 641px) {
   .wallet-address {
-    max-width: 15ch;
+    max-width: 10ch;
     /* Begrenze auch hier auf 10 Zeichen */
   }
 }
diff --git a/components/tabs/SwapTab.vue b/components/tabs/SwapTab.vue
index d10e4a4..757b42a 100644
--- a/components/tabs/SwapTab.vue
+++ b/components/tabs/SwapTab.vue
@@ -1,37 +1,47 @@
 <template>
-  <div class="mt-3 text-center sm:mt-5">
+  <div class="mt-3 sm:mt-5 px-3">
+    <button
+      @click="eventBus.emit('toggleSidebar')"
+      class="lg:hidden text-white focus:outline-none text-2xl"
+    >
+      ☰
+    </button>
+  </div>
+  <div class="mt-3 text-center sm:mt-5 px-3">
     <span as="h3" class="text-base font-semibold leading-6 text-white"
       >Private Swaps
     </span>
 
     <div class="mt-2">
-      <p class="text-sm text-gray-400 text-justify">COMING SOON<sup>TM</sup></p>
-      <p class="text-sm text-gray-400 text-justify">
+      <div class="text-sm text-gray-400 text-justify">
+        COMING SOON<sup>TM</sup>
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         Whenever you use a centralized exchange (CEX), you trust them to operate
         a fair market and protect your data. Even worse, you hand over custody
         over your assets to them. The upside is: fast trading and something like
         privacy (in the best case your exposing your data and behavior to one
         entity only, not to the public)
-      </p>
-      <p class="text-sm text-gray-400 text-justify">
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         If you need more autonomy, you may want to use decentralized exchanges
         (DEX). There, you keep custody over your assets and no single entity has
         the power to deny you access to the trading platform. However, this
         freedom comes with downsides: High latency and front-running
-      </p>
-      <p class="text-sm text-gray-400 text-justify">
+      </div>
+      <div class="text-sm text-gray-400 text-justify my-3">
         Incognitee can support shielding of various digital assets and offer
         automated market makers (AMM, similar to uniswap) on L2. This will
         prevent front-running because no one can see the transactions before
         they are executed. It also offers enhanced speed because of subsecond
         block times on Incognitee
-      </p>
-      <!-- this is necessary to avoid the footer overlapping the text -->
-      <br /><br /><br /><br /><br /><br /><br />
+      </div>
     </div>
   </div>
 </template>
-
+<script setup lang="ts">
+import { eventBus } from "@/helpers/eventBus";
+</script>
 <style scoped>
 h1 {
   font-size: 2em; /* Adjust as needed */
diff --git a/components/tabs/VouchersTab.vue b/components/tabs/VouchersTab.vue
index bbafb42..1e12988 100644
--- a/components/tabs/VouchersTab.vue
+++ b/components/tabs/VouchersTab.vue
@@ -1,351 +1,361 @@
 <template>
-  <NetworkSelector
-    :openAssetsInfo="() => {}"
-    :selectedNetwork="shieldingTarget"
-  />
-  <div class="text-center mt-10 mb-5">
-    <span class="text-2xl font-black">Vouchers</span>
-    <p class="mt-2 text-sm text-gray-400">
-      Here you can create new vouchers to share tokens with your friends in
-      seconds. <br />Your friend doesn’t need an existing wallet but can redeem
-      the voucher to a secure wallet later at their convenience.​
-    </p>
+  <div class="mt-3 sm:mt-5 px-3">
     <button
-      @click="openCreateVoucher"
-      type="button"
-      class="my-10 bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
+      @click="eventBus.emit('toggleSidebar')"
+      class="lg:hidden text-white focus:outline-none text-2xl"
     >
-      Create Voucher​
+      ☰
     </button>
   </div>
+  <div class="p-3">
+    <NetworkSelector
+      :openAssetsInfo="() => {}"
+      :selectedNetwork="shieldingTarget"
+    />
+    <div class="text-center mt-10 mb-5">
+      <span class="text-2xl font-black">Vouchers</span>
+      <p class="mt-2 text-sm text-gray-400">
+        Here you can create new vouchers to share tokens with your friends in
+        seconds. <br />Your friend doesn’t need an existing wallet but can
+        redeem the voucher to a secure wallet later at their convenience.​
+      </p>
+      <button
+        @click="openCreateVoucher"
+        type="button"
+        class="my-10 bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
+      >
+        Create Voucher​
+      </button>
+    </div>
 
-  <div
-    v-if="allVouchers?.length > 0"
-    class="flex items-center justify-between text-2xl font-bold tracking-tight text-white sm:text-2xl"
-  >
-    <!-- Linke Seite: Überschrift -->
-    <div>History</div>
-
-    <!-- Rechte Seite: Button -->
-    <button
-      @click="openDeleteModal('all')"
-      type="button"
-      class="text-sm font-semibold hover:text-incognitee-green"
+    <div
+      v-if="allVouchers?.length > 0"
+      class="flex items-center justify-between text-2xl font-bold tracking-tight text-white sm:text-2xl"
     >
-      Clear all history
-    </button>
-  </div>
+      <!-- Linke Seite: Überschrift -->
+      <div>History</div>
+
+      <!-- Rechte Seite: Button -->
+      <button
+        @click="openDeleteModal('all')"
+        type="button"
+        class="text-sm font-semibold hover:text-incognitee-green"
+      >
+        Clear all history
+      </button>
+    </div>
 
-  <div class="flex-1 overflow-y-auto bg-gray-900 mt-5 rounded-md">
-    <table class="w-full whitespace-nowrap text-left">
-      <tbody class="divide-y divide-white/10">
-        <tr
-          v-for="(voucher, index) in allVouchers"
-          :key="index"
-          class="flex justify-between"
-        >
-          <!-- Linksbündige Zelle mit Icon, Text und "New"-Badge -->
-          <td
-            class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8"
+    <div class="flex-1 overflow-y-auto bg-gray-900 mt-5 rounded-md">
+      <table class="w-full whitespace-nowrap text-left">
+        <tbody class="divide-y divide-white/10">
+          <tr
+            v-for="(voucher, index) in allVouchers"
+            :key="index"
+            class="flex justify-between"
           >
-            <div class="flex flex-col">
-              <div class="flex items-start gap-x-3">
-                <div class="text-sm font-medium text-white wallet-address">
-                  {{ voucher.address }}
+            <!-- Linksbündige Zelle mit Icon, Text und "New"-Badge -->
+            <td
+              class="flex items-center gap-x-4 py-4 pl-4 pr-8 text-left sm:pl-6 lg:pl-8"
+            >
+              <div class="flex flex-col">
+                <div class="flex items-start gap-x-3">
+                  <div class="text-sm font-medium text-white wallet-address">
+                    {{ voucher.address }}
+                  </div>
                 </div>
+                <div class="mt-1 text-xs text-gray-500">{{ voucher.note }}</div>
               </div>
-              <div class="mt-1 text-xs text-gray-500">{{ voucher.note }}</div>
-            </div>
-          </td>
+            </td>
 
-          <!-- Rechtsbündige Zelle für TEER Betrag und Datum -->
-          <td
-            class="flex flex-col items-end py-4 pr-4 text-right text-sm text-white sm:pr-6 lg:pr-8"
-          >
-            <div class="text-sm font-medium text-white">
-              {{ voucher.amount }} {{ accountStore.getSymbol }}
-            </div>
-            <time class="mt-1 text-xs text-gray-500">{{
-              formatDate(voucher.timestamp)
-            }}</time>
-          </td>
-          <td
-            class="py-4 pl-0 pr-4 text-right text-sm/6 text-white sm:table-cell sm:pr-6 lg:pr-8"
-          >
-            <!-- Desktop Ansicht -->
-            <div class="flex items-center gap-4">
-              <svg
-                @click="showVoucher(voucher)"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                class="size-5 cursor-pointer"
-              >
-                <path
-                  d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
-                />
-                <path
-                  fill-rule="evenodd"
-                  d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
-                  clip-rule="evenodd"
-                />
-                <path
-                  d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
-                />
-              </svg>
-              <svg
-                @click="openDeleteModal(voucher)"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                class="size-5 cursor-pointer"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </div>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </div>
-  <div>
-    <!-- this is necessary to avoid the footer overlapping the text -->
-    <br /><br /><br /><br /><br /><br /><br />
-  </div>
+            <!-- Rechtsbündige Zelle für TEER Betrag und Datum -->
+            <td
+              class="flex flex-col items-end py-4 pr-4 text-right text-sm text-white sm:pr-6 lg:pr-8"
+            >
+              <div class="text-sm font-medium text-white">
+                {{ voucher.amount }} {{ accountStore.getSymbol }}
+              </div>
+              <time class="mt-1 text-xs text-gray-500">{{
+                formatDate(voucher.timestamp)
+              }}</time>
+            </td>
+            <td
+              class="py-4 pl-0 pr-4 text-right text-sm/6 text-white sm:table-cell sm:pr-6 lg:pr-8"
+            >
+              <!-- Desktop Ansicht -->
+              <div class="flex items-center gap-4">
+                <svg
+                  @click="showVoucher(voucher)"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  class="size-5 cursor-pointer"
+                >
+                  <path
+                    d="M11.625 16.5a1.875 1.875 0 1 0 0-3.75 1.875 1.875 0 0 0 0 3.75Z"
+                  />
+                  <path
+                    fill-rule="evenodd"
+                    d="M5.625 1.5H9a3.75 3.75 0 0 1 3.75 3.75v1.875c0 1.036.84 1.875 1.875 1.875H16.5a3.75 3.75 0 0 1 3.75 3.75v7.875c0 1.035-.84 1.875-1.875 1.875H5.625a1.875 1.875 0 0 1-1.875-1.875V3.375c0-1.036.84-1.875 1.875-1.875Zm6 16.5c.66 0 1.277-.19 1.797-.518l1.048 1.048a.75.75 0 0 0 1.06-1.06l-1.047-1.048A3.375 3.375 0 1 0 11.625 18Z"
+                    clip-rule="evenodd"
+                  />
+                  <path
+                    d="M14.25 5.25a5.23 5.23 0 0 0-1.279-3.434 9.768 9.768 0 0 1 6.963 6.963A5.23 5.23 0 0 0 16.5 7.5h-1.875a.375.375 0 0 1-.375-.375V5.25Z"
+                  />
+                </svg>
+                <svg
+                  @click="openDeleteModal(voucher)"
+                  viewBox="0 0 24 24"
+                  fill="currentColor"
+                  class="size-5 cursor-pointer"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div>
+      <!-- this is necessary to avoid the footer overlapping the text -->
+      <br /><br /><br /><br /><br /><br /><br />
+    </div>
 
-  <!-- Delete Popup -->
-  <div
-    v-if="isDeleteModalOpen"
-    class="relative z-10"
-    aria-labelledby="modal-title"
-    role="dialog"
-    aria-modal="true"
-  >
+    <!-- Delete Popup -->
     <div
-      class="fixed inset-0 bg-gray-500/75 transition-opacity"
-      aria-hidden="true"
-    ></div>
-
-    <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
+      v-if="isDeleteModalOpen"
+      class="relative z-10"
+      aria-labelledby="modal-title"
+      role="dialog"
+      aria-modal="true"
+    >
       <div
-        class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
-      >
+        class="fixed inset-0 bg-gray-500/75 transition-opacity"
+        aria-hidden="true"
+      ></div>
+
+      <div class="fixed inset-0 z-10 w-screen overflow-y-auto">
         <div
-          class="w-full relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
+          class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0"
         >
-          <!-- Close Button (X) -->
-          <button
-            @click="closeDeleteModal"
-            type="button"
-            class="absolute top-3 right-3 text-white bg-transparent hover:text-gray-300"
+          <div
+            class="w-full relative transform overflow-hidden rounded-lg bg-gray-800 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6"
           >
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              class="h-6 w-6"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke="currentColor"
-              stroke-width="2"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
-          </button>
-
-          <div class="sm:flex sm:items-start">
-            <div
-              class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-incognitee-gray sm:mx-0 sm:size-10"
+            <!-- Close Button (X) -->
+            <button
+              @click="closeDeleteModal"
+              type="button"
+              class="absolute top-3 right-3 text-white bg-transparent hover:text-gray-300"
             >
               <svg
-                class="size-6 text-green"
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6"
                 fill="none"
                 viewBox="0 0 24 24"
-                stroke-width="1.5"
                 stroke="currentColor"
-                aria-hidden="true"
-                data-slot="icon"
+                stroke-width="2"
               >
                 <path
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                  d="M6 18L18 6M6 6l12 12"
                 />
               </svg>
-            </div>
-            <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-              <h3 class="text-base font-semibold text-white" id="modal-title">
-                Forget voucher(s)
-              </h3>
-              <div class="mt-2">
-                <p class="text-sm text-gray-500">
-                  You are only clearing the entry, funds remain on the address
-                  and are accessible via the link if you shared or saved it
-                </p>
+            </button>
+
+            <div class="sm:flex sm:items-start">
+              <div
+                class="mx-auto flex size-12 shrink-0 items-center justify-center rounded-full bg-incognitee-gray sm:mx-0 sm:size-10"
+              >
+                <svg
+                  class="size-6 text-green"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  aria-hidden="true"
+                  data-slot="icon"
+                >
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z"
+                  />
+                </svg>
+              </div>
+              <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                <h3 class="text-base font-semibold text-white" id="modal-title">
+                  Forget voucher(s)
+                </h3>
+                <div class="mt-2">
+                  <p class="text-sm text-gray-500">
+                    You are only clearing the entry, funds remain on the address
+                    and are accessible via the link if you shared or saved it
+                  </p>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="relative group">
-            <div class="relative inline-block group"></div>
-          </div>
-          <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
-            <button
-              @click="doForgetVoucher()"
-              type="button"
-              class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
-            >
-              Forget
-            </button>
+            <div class="relative group">
+              <div class="relative inline-block group"></div>
+            </div>
+            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+              <button
+                @click="doForgetVoucher()"
+                type="button"
+                class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
+              >
+                Forget
+              </button>
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
 
-  <OverlayDialog
-    :show="showCreateVoucher"
-    :close="closeCreateVoucher"
-    title="Create new Voucher"
-  >
-    <div class="mt-5">
-      <p class="text-sm text-gray-400 text-left my-4">
-        We will create a new temporary keypair where you can transfer funds to.
-        In the next step, you'll be able to share your new voucher
-      </p>
-    </div>
-    <form class="mt-5" @submit.prevent="submitGenerateVoucherForm">
-      <div class="mt-10">
-        <!-- Label and available balance -->
-        <div class="flex justify-between items-center">
-          <label
-            for="CreateVoucher"
-            class="text-sm font-medium leading-6 text-white"
-            >{{ accountStore.getSymbol }} Amount</label
-          >
+    <OverlayDialog
+      :show="showCreateVoucher"
+      :close="closeCreateVoucher"
+      title="Create new Voucher"
+    >
+      <div class="mt-5">
+        <p class="text-sm text-gray-400 text-left my-4">
+          We will create a new temporary keypair where you can transfer funds
+          to. In the next step, you'll be able to share your new voucher
+        </p>
+      </div>
+      <form class="mt-5" @submit.prevent="submitGenerateVoucherForm">
+        <div class="mt-10">
+          <!-- Label and available balance -->
+          <div class="flex justify-between items-center">
+            <label
+              for="CreateVoucher"
+              class="text-sm font-medium leading-6 text-white"
+              >{{ accountStore.getSymbol }} Amount</label
+            >
 
-          <span class="text-xs text-gray-400"
-            >Available private balance:
-            {{ accountStore.formatBalanceFree(incogniteeSidechain) }}</span
-          >
-        </div>
+            <span class="text-xs text-gray-400"
+              >Available private balance:
+              {{ accountStore.formatBalanceFree(incogniteeSidechain) }}</span
+            >
+          </div>
 
-        <!-- Input field -->
-        <div>
-          <input
-            id="sendAmount"
-            v-model="sendAmount"
-            type="number"
-            step="0.01"
-            :min="0.1"
-            :max="
-              Math.max(
-                0,
-                accountStore.getDecimalBalanceFree(incogniteeSidechain) -
-                  accountStore.getDecimalExistentialDeposit(
-                    incogniteeSidechain,
-                  ) -
-                  0.1,
-              )
-            "
-            required
-            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input text-right"
-            placeholder="Amount"
-          />
-        </div>
+          <!-- Input field -->
+          <div>
+            <input
+              id="sendAmount"
+              v-model="sendAmount"
+              type="number"
+              step="0.01"
+              :min="0.1"
+              :max="
+                Math.max(
+                  0,
+                  accountStore.getDecimalBalanceFree(incogniteeSidechain) -
+                    accountStore.getDecimalExistentialDeposit(
+                      incogniteeSidechain,
+                    ) -
+                    0.1,
+                )
+              "
+              required
+              class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input text-right"
+              placeholder="Amount"
+            />
+          </div>
 
-        <!-- Fee description -->
-        <div class="text-right">
-          <span class="text-xs text-gray-400"
-            >Fee: {{ formatDecimalBalance(INCOGNITEE_TX_FEE) }}
-            {{ accountStore.getSymbol }} for Incognitee</span
+          <!-- Fee description -->
+          <div class="text-right">
+            <span class="text-xs text-gray-400"
+              >Fee: {{ formatDecimalBalance(INCOGNITEE_TX_FEE) }}
+              {{ accountStore.getSymbol }} for Incognitee</span
+            >
+          </div>
+        </div>
+        <!-- Messages -->
+        <div class="relative flex items-center rounded-lg">
+          <textarea
+            id="messages"
+            v-model="sendPrivateNote"
+            rows="2"
+            ref="messageTextarea"
+            name="messages"
+            placeholder="Enter a private note for the recipient"
+            :maxlength="140"
+            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input"
+          ></textarea>
+        </div>
+        <div class="mt-8 bottom-0 left-0 w-full bg-gray-800">
+          <button
+            type="submit"
+            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
           >
+            Generate Voucher
+          </button>
         </div>
+      </form>
+    </OverlayDialog>
+
+    <!-- share QR Voucher -->
+    <OverlayDialog
+      :show="showShareVoucher"
+      :close="closeShareVoucher"
+      title="Share Voucher"
+    >
+      <div class="mt-5">
+        <p class="text-sm text-gray-400 text-left my-4">
+          Share this voucher with your friend. You can either have them scan
+          this QR code or send them the link via private message. Make sure no
+          one else has access to this voucher as any holder can redeem the funds
+        </p>
       </div>
-      <!-- Messages -->
-      <div class="relative flex items-center rounded-lg">
-        <textarea
-          id="messages"
-          v-model="sendPrivateNote"
-          rows="2"
-          ref="messageTextarea"
-          name="messages"
-          placeholder="Enter a private note for the recipient"
-          :maxlength="140"
-          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input"
-        ></textarea>
-      </div>
-      <div class="mt-8 bottom-0 left-0 w-full bg-gray-800">
-        <button
-          type="submit"
-          class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
-        >
-          Generate Voucher
-        </button>
+      <div class="mt-5 flex justify-center items-center qrcode-container">
+        <qrcode :value="selectedVoucher?.url"></qrcode>
       </div>
-    </form>
-  </OverlayDialog>
-
-  <!-- share QR Voucher -->
-  <OverlayDialog
-    :show="showShareVoucher"
-    :close="closeShareVoucher"
-    title="Share Voucher"
-  >
-    <div class="mt-5">
-      <p class="text-sm text-gray-400 text-left my-4">
-        Share this voucher with your friend. You can either have them scan this
-        QR code or send them the link via private message. Make sure no one else
-        has access to this voucher as any holder can redeem the funds
-      </p>
-    </div>
-    <div class="mt-5 flex justify-center items-center qrcode-container">
-      <qrcode :value="selectedVoucher?.url"></qrcode>
-    </div>
 
-    <div class="flex flex-col mt-5">
-      <div
-        class="w-full mt-5 mb-2 text-sm font-medium leading-6 text-white font-semibold"
-      >
-        Voucher URL:
-      </div>
-      <div class="relative flex items-center rounded-lg">
-        <input
-          id="voucherAddress"
-          type="text"
-          :value="selectedVoucher?.url"
-          readonly
-          class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input pr-12"
-        />
-        <div class="absolute right-3 flex space-x-2">
-          <div @click="copyVoucherUrlToClipboard" class="cursor-pointer">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              stroke-width="1.5"
-              stroke="currentColor"
-              class="size-6"
-            >
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
-              />
-            </svg>
+      <div class="flex flex-col mt-5">
+        <div
+          class="w-full mt-5 mb-2 text-sm font-medium leading-6 text-white font-semibold"
+        >
+          Voucher URL:
+        </div>
+        <div class="relative flex items-center rounded-lg">
+          <input
+            id="voucherAddress"
+            type="text"
+            :value="selectedVoucher?.url"
+            readonly
+            class="w-full text-sm rounded-lg flex-grow py-2 bg-cool-900 text-white placeholder-gray-500 border border-transparent hover:border-incognitee-green focus:border-incognitee-blue truncate-input pr-12"
+          />
+          <div class="absolute right-3 flex space-x-2">
+            <div @click="copyVoucherUrlToClipboard" class="cursor-pointer">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="size-6"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0c.055.194.084.4.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0c0-.212.03-.418.084-.612m7.332 0c.646.049 1.288.11 1.927.184 1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48.208 48.208 0 0 1 1.927-.184"
+                />
+              </svg>
+            </div>
           </div>
         </div>
       </div>
-    </div>
-  </OverlayDialog>
-  <StatusOverlay
-    :tx-status="txStatus"
-    :show="showStatusOverlay"
-    :close="closeStatusOverlay"
-  />
+    </OverlayDialog>
+    <StatusOverlay
+      :tx-status="txStatus"
+      :show="showStatusOverlay"
+      :close="closeStatusOverlay"
+    />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -378,6 +388,7 @@ import {
   forgetAllVouchersForShard,
   forgetVoucherForShard,
 } from "~/lib/voucherStorage";
+import { eventBus } from "@/helpers/eventBus";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 
 const accountStore = useAccount();
diff --git a/components/tabs/WalletTab.vue b/components/tabs/WalletTab.vue
index 08a85af..2386dbc 100644
--- a/components/tabs/WalletTab.vue
+++ b/components/tabs/WalletTab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="show">
+  <div v-if="show" class="p-3">
     <WarningBanner
       v-if="
         accountStore.getSymbol === 'TEER' &&
@@ -11,6 +11,14 @@
       textDesktop="You are using a temporary voucher with low security. Everyone who knows your url (including the person who may have shared this url with you) could spend these funds. Please transfer funds to a <a href='https://docs.integritee.network/2-integritee-network/2.4-teer-token/2.4.1-how-to-set-up-a-wallet'>secure wallet</a>"
     />
     <div v-else>
+      <div class="mb-3">
+        <button
+          @click="eventBus.emit('toggleSidebar')"
+          class="lg:hidden text-white focus:outline-none text-2xl"
+        >
+          ☰
+        </button>
+      </div>
       <CampaignBanner
         v-if="enableActions"
         :onClick="openGuessTheNumberOverlay"
@@ -629,7 +637,11 @@
         </p>
       </div>
       <div class="mt-5 qrcode-container">
-        <qrcode :value="accountStore.getAddress"></qrcode>
+        <qrcode
+          :value="accountStore.getAddress"
+          :color="{ dark: '#000000', light: '#ffffff' }"
+          type="image/png"
+        ></qrcode>
       </div>
 
       <div class="flex flex-col mt-5">
@@ -1053,6 +1065,7 @@ import { chainConfigs } from "~/configs/chains";
 import { QrcodeStream } from "vue-qrcode-reader";
 import { ApiPromise } from "@polkadot/api";
 import { formatMoment } from "~/helpers/date";
+import { eventBus } from "@/helpers/eventBus";
 import { SessionProxyRole } from "~/lib/sessionProxyStorage";
 import SessionProxiesOverlay from "~/components/overlays/SessionProxiesOverlay.vue";
 
diff --git a/components/ui/CampaignBanner.vue b/components/ui/CampaignBanner.vue
index a4c7cc7..b71ee84 100644
--- a/components/ui/CampaignBanner.vue
+++ b/components/ui/CampaignBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col lg:flex-row container p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full"
+    class="flex flex-col lg:flex-row p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full"
   >
     <div
       class="flex w-full justify-between items-center"
diff --git a/components/ui/HealthIndicator.vue b/components/ui/HealthIndicator.vue
index 6d54b28..b4d1e2d 100644
--- a/components/ui/HealthIndicator.vue
+++ b/components/ui/HealthIndicator.vue
@@ -2,25 +2,25 @@
   <div @click="openHealthDetailsOverlay" class="cursor-pointer">
     <div v-if="contextualHealth === Health.Healthy">
       <div
-        class="bg-green-500 w-4 h-4 rounded-full"
+        class="bg-green-500 w-3 h-3 rounded-full"
         title="system health: all good"
       ></div>
     </div>
     <div v-else-if="contextualHealth === Health.Warning">
       <div
-        class="bg-yellow-500 w-4 h-4 rounded-full"
+        class="bg-yellow-500 w-3 h-3 rounded-full"
         title="system health: warnings"
       ></div>
     </div>
     <div v-else-if="contextualHealth === Health.Critical">
       <div
-        class="bg-red-500 w-4 h-4 rounded-full"
+        class="bg-red-500 w-3 h-3 rounded-full"
         title="system health: critical"
       ></div>
     </div>
     <div v-else>
       <div
-        class="bg-gray-500 w-4 h-4 rounded-full"
+        class="bg-gray-500 w-3 h-3 rounded-full"
         title="health unknown"
       ></div>
     </div>
diff --git a/components/ui/InfoBanner.vue b/components/ui/InfoBanner.vue
index 71bdb4f..0659f9f 100644
--- a/components/ui/InfoBanner.vue
+++ b/components/ui/InfoBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col lg:flex-row container p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full"
+    class="flex flex-col lg:flex-row p-2 incognitee-bg items-center text-indigo-100 leading-none lg:rounded-full"
   >
     <div
       class="flex w-full justify-between items-center"
diff --git a/components/ui/NetworkSelector.vue b/components/ui/NetworkSelector.vue
index bf22904..864e5c8 100644
--- a/components/ui/NetworkSelector.vue
+++ b/components/ui/NetworkSelector.vue
@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex flex-row justify-between w-full text-center gap-4 container mb-4"
-  >
+  <div class="flex flex-row justify-between w-full text-center gap-4 mb-4">
     <!-- TEER Box -->
     <div
       class="currency-box gap-2 p-3 basis-1/3 relative cursor-pointer"
diff --git a/components/ui/PrivateMessageHistory.vue b/components/ui/PrivateMessageHistory.vue
index 5361c0c..0f2c341 100644
--- a/components/ui/PrivateMessageHistory.vue
+++ b/components/ui/PrivateMessageHistory.vue
@@ -2,7 +2,10 @@
   <div v-if="show" class="flex justify-between items-center"></div>
   <div class="mb-10">
     <!-- Neuer Abschnitt, der nur angezeigt wird, wenn der "Private Balance" Tab aktiv ist -->
-    <div ref="chatWindow" class="flex-1 overflow-y-auto bg-gray-900 rounded-md">
+    <div
+      ref="chatWindow"
+      class="flex-1 overflow-y-auto bg-incognitee-blue rounded-md"
+    >
       <div
         v-for="(note, index) in noteStore.getMessagesWith(counterparty)"
         :key="index"
@@ -11,15 +14,15 @@
         <!-- Ausgehende Nachrichten -->
         <div
           v-if="note.direction === NoteDirection.Outgoing"
-          class="chat chat-end"
+          class="chat chat-end mb-3"
         >
-          <div class="chat-header text-xs text-gray-500">You</div>
+          <div class="chat-header text-xs text-gray-500 mb-1">You</div>
           <div
             class="chat-bubble message-box max-w-xs shadow-md bg-blue-500 text-white"
           >
             {{ note.note }}
           </div>
-          <div class="chat-footer text-xs text-gray-500">
+          <div class="chat-footer text-xs text-gray-500 mt-1">
             {{ formatDate(note.timestamp) }}
           </div>
         </div>
@@ -27,9 +30,9 @@
         <!-- Eingehende Nachrichten -->
         <div
           v-if="note.direction === NoteDirection.Incoming"
-          class="chat chat-start"
+          class="chat chat-start mb-3"
         >
-          <div class="chat-header wallet-address text-xs text-gray-500">
+          <div class="chat-header wallet-address text-xs text-gray-500 mb-1">
             {{ note.account }}
           </div>
           <div
@@ -37,7 +40,7 @@
           >
             {{ note.note }}
           </div>
-          <div class="chat-footer text-xs text-gray-500">
+          <div class="chat-footer text-xs text-gray-500 mt-1">
             {{ formatDate(note.timestamp) }}
           </div>
         </div>
diff --git a/components/ui/PrivateTxHistory.vue b/components/ui/PrivateTxHistory.vue
index 5edd4d1..1ca9d86 100644
--- a/components/ui/PrivateTxHistory.vue
+++ b/components/ui/PrivateTxHistory.vue
@@ -116,14 +116,12 @@
           </div>
         </div>
       </div>
-      <div class="mt-5 flex justify-center text-gray-500">
+      <div class="mt-5 flex text-xs font-bold justify-center text-white">
         <button @click="fetchOlderBucket">
-          fetch more events
+          Fetch more events
           {{ accountStore.hasInjector ? "(needs signature)" : "" }}
         </button>
       </div>
-      <!-- this is necessary to avoid the footer overlapping the text -->
-      <br /><br /><br /><br /><br /><br /><br />
     </div>
   </div>
   <NoteDetailsOverlay
diff --git a/components/ui/Sidebar.vue b/components/ui/Sidebar.vue
new file mode 100644
index 0000000..eacb025
--- /dev/null
+++ b/components/ui/Sidebar.vue
@@ -0,0 +1,222 @@
+<!-- components/Sidebar.vue -->
+<template>
+  <!-- Sidebar -->
+  <div
+    :class="[
+      'bg-incognitee-blue border-r border-gray-800 fixed top-0 left-0 h-full transform transition-transform lg:translate-x-0 w-64 z-50 flex flex-col justify-between text-white',
+      isSidebarOpen ? 'translate-x-0' : '-translate-x-full',
+    ]"
+  >
+    <!-- Sidebar Header -->
+    <div>
+      <div class="p-4 flex items-center justify-between">
+        <Incognitee class="h-5" />
+        <button
+          @click="eventBus.emit('toggleSidebar')"
+          class="lg:hidden text-white focus:outline-none"
+        >
+          ✕
+        </button>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="mt-8">
+        <ul class="space-y-4">
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToWallet');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M21 12.75H3M21 9.75h-4.5M3 12.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v5.25m-18 0h18m-18 0V16.5A2.25 2.25 0 0 0 5.25 18.75h13.5A2.25 2.25 0 0 0 21 16.5v-3.75"
+                />
+              </svg>
+              Wallet
+            </button>
+          </li>
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToSwap');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
+                />
+              </svg>
+              Swap
+            </button>
+          </li>
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToVouchers');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
+                />
+              </svg>
+              Vouchers
+            </button>
+          </li>
+          <li class="px-4">
+            <button
+              class="flex items-center w-full text-left text-sm font-semibold hover:bg-gray-800 px-2 py-2 rounded-md"
+              @click="
+                () => {
+                  emitEvent('switchToMessaging');
+                  toggleSidebar();
+                }
+              "
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke-width="1.5"
+                stroke="currentColor"
+                class="w-6 h-6 mr-2"
+              >
+                <path
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+                />
+              </svg>
+              Messages
+            </button>
+          </li>
+        </ul>
+      </nav>
+    </div>
+
+    <!-- Footer Content -->
+    <div class="px-4 space-y-4 mb-4">
+      <div class="flex items-center text-xs" @click="toggleSidebar">
+        <span class="mr-2">System Health</span>
+        <HealthIndicator />
+      </div>
+      <div class="text-sm flex flex-col space-y-1">
+        <div v-if="accountStore.getAddress === 'none'">
+          <button
+            @click="
+              () => {
+                emitEvent('addressClicked');
+                toggleSidebar();
+              }
+            "
+            class="bg-gradient-to-r from-incognitee-green to-incognitee-blue w-full justify-center rounded-md text-sm font-semibold text-white py-1.5 px-4 sm:w-auto hover:shadow-lg hover:shadow-incognitee-green/50"
+          >
+            Connect Wallet
+          </button>
+        </div>
+        <div v-else>
+          <div class="text-xs text-white">Connected with</div>
+          <div
+            class="text-xs text-gray-600 break-all cursor-pointer"
+            @click="
+              () => {
+                emitEvent('addressClicked');
+                toggleSidebar();
+              }
+            "
+          >
+            {{ accountStore.getAddress }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Overlay: Hintergrund abdunkeln -->
+  <!-- Overlay: Hintergrund abdunkeln nur in mobiler Ansicht -->
+  <div
+    v-if="isSidebarOpen"
+    class="fixed inset-0 bg-black bg-opacity-90 z-40 lg:hidden"
+    @click="toggleSidebar"
+  ></div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import HealthIndicator from "@/components/ui/HealthIndicator.vue";
+import { useAccount } from "@/store/account";
+import { eventBus } from "@/helpers/eventBus";
+import Incognitee from "@/assets/img/incognitee-full-logo.svg";
+
+// Sidebar-State (local)
+const isSidebarOpen = ref(false);
+
+// Event-Handler für Sidebar-Toggle
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value;
+};
+
+const emitAddressClicked = () => {
+  eventBus.emit("addressClicked");
+};
+
+// Event-Abonnement bei Mounten und Entfernen bei Unmounten
+onMounted(() => {
+  eventBus.on("toggleSidebar", toggleSidebar);
+});
+
+onUnmounted(() => {
+  eventBus.off("toggleSidebar", toggleSidebar);
+});
+
+// Account Store für Wallet-Adresse
+const accountStore = useAccount();
+
+// Event-Emitter-Funktionen
+const emitEvent = (eventName: string) => {
+  eventBus.emit(eventName);
+};
+</script>
+
+<style scoped>
+/* Optional: zusätzliche Styles für die Sidebar */
+</style>
diff --git a/helpers/eventBus.ts b/helpers/eventBus.ts
index 34c3187..a3a3a11 100644
--- a/helpers/eventBus.ts
+++ b/helpers/eventBus.ts
@@ -1,5 +1,7 @@
 import mitt from "mitt";
 
-const eventBus = mitt();
+type Events = {
+  toggleSidebar: void;
+};
 
-export { eventBus };
+export const eventBus = mitt<Events>();
diff --git a/layouts/default.vue b/layouts/default.vue
index 94f1200..96f312d 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,221 +1,58 @@
 <template>
-  <div class="container layout">
-    <header class="header bg-gray-800 text-white py-1">
-      <div class="header-content mx-auto flex items-center justify-between">
-        <!-- Logo -->
-        <Incognitee class="logo" />
-
-        <!-- Flex container for network health, indicator, and wallet information -->
-        <div class="flex items-center gap-4">
-          <!-- gap-4 steuert den Abstand zwischen den Elementen -->
-          <!-- Network health text and health indicator -->
-          <div class="flex items-center gap-2 ml-1 mr-1">
-            <!-- gap-2 für den Abstand zwischen Network Health und Indikator -->
-            <HealthIndicator />
-          </div>
-
-          <!-- SVG icon -->
-          <div v-if="accountStore.getAddress !== 'none'"></div>
-
-          <!-- Address and Connect Wallet button -->
-          <div
-            class="text-white text-sm cursor-pointer"
-            @click="emitAddressClicked"
-          >
-            <!-- Full address on larger screens and short address on mobile -->
-            <div v-if="accountStore.getAddress === 'none'">
-              <button
-                class="incognitee-bg btn btn_gradient rounded-md px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-400"
-              >
-                Connect Wallet
-              </button>
-            </div>
-            <div v-else class="flex">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                fill="none"
-                viewBox="0 0 24 24"
-                stroke-width="1.5"
-                stroke="currentColor"
-                class="w-6 h-6"
-              >
-                <path
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                  d="M21 12.75H3M21 9.75h-4.5M3 12.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v5.25m-18 0h18m-18 0V16.5A2.25 2.25 0 0 0 5.25 18.75h13.5A2.25 2.25 0 0 0 21 16.5v-3.75"
-                />
-              </svg>
-              <span class="hidden md:inline ml-1 mt-0.5">{{
-                accountStore.getAddress
-              }}</span>
-              <span class="inline md:hidden ml-1 mt-0.5">{{
-                accountStore.getShortAddress
-              }}</span>
-            </div>
-          </div>
-        </div>
+  <div class="flex bg-incognitee-blue text-white">
+    <Sidebar />
+
+    <!-- Content Area -->
+    <div class="flex h-screen w-screen bg-incognitee-blue text-white">
+      <!-- Sidebarplatzhalter für Desktop -->
+      <aside
+        class="bg-incognitee-blue border-r border-gray-800 w-64 hidden lg:block"
+      ></aside>
+      <!-- Main Content -->
+      <div class="flex flex-col flex-1">
+        <main class="flex-1">
+          <NuxtPage />
+        </main>
       </div>
-    </header>
-    <!-- Main Content -->
-    <main class="main flex-grow overflow-auto">
-      <NuxtPage />
-    </main>
-    <footer class="footer bg-incognitee-blue">
-      <nav class="footer-content container mx-auto">
-        <div class="container">
-          <div
-            class="flex mt-10 fixed left-0 right-0 bottom-10 w-full px-4 rounded justify-around z-20"
-          >
-            <div class="container custom-border-gradient">
-              <div class="inner-box">
-                <div class="flex justify-around text-white">
-                  <div
-                    class="flex flex-col items-center cursor-pointer text-center"
-                    @click="emitSwitchToWallet"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
-                      />
-                    </svg>
-                    <p class="text-xs">Wallet</p>
-                  </div>
-
-                  <div
-                    class="flex flex-col items-center cursor-pointer text-center"
-                    @click="emitSwitchToSwap"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5"
-                      />
-                    </svg>
-                    <p class="text-xs">Swap</p>
-                  </div>
-
-                  <div
-                    class="flex flex-col items-center cursor-pointer text-center"
-                    @click="emitSwitchToVouchers"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M16.5 6v.75m0 3v.75m0 3v.75m0 3V18m-9-5.25h5.25M7.5 15h3M3.375 5.25c-.621 0-1.125.504-1.125 1.125v3.026a2.999 2.999 0 0 1 0 5.198v3.026c0 .621.504 1.125 1.125 1.125h17.25c.621 0 1.125-.504 1.125-1.125v-3.026a2.999 2.999 0 0 1 0-5.198V6.375c0-.621-.504-1.125-1.125-1.125H3.375Z"
-                      />
-                    </svg>
-
-                    <p class="text-xs">Vouchers</p>
-                  </div>
-                  <div
-                    v-if="accountStore.getSymbol === 'TEER'"
-                    class="flex flex-col items-center justify-center text-center"
-                    @click="emitSwitchToTeerDays"
-                  >
-                    <TEERdays class="w-6 h-6 mb-2" />
-                    <!-- Make TEERdays icon the same size as others -->
-                    <p class="text-xs cursor-pointer">TEERDays</p>
-                  </div>
-                  <div
-                    v-if="accountStore.getSymbol === 'PAS'"
-                    class="flex flex-col items-center cursor-pointer text-center"
-                    @click="emitSwitchToMessaging"
-                  >
-                    <svg
-                      xmlns="http://www.w3.org/2000/svg"
-                      fill="none"
-                      viewBox="0 0 24 24"
-                      stroke-width="1.5"
-                      stroke="currentColor"
-                      class="size-6 mx-auto mb-2"
-                    >
-                      <path
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        d="M7.5 8.25h9m-9 3H12m-9.75 1.51c0 1.6 1.123 2.994 2.707 3.227 1.129.166 2.27.293 3.423.379.35.026.67.21.865.501L12 21l2.755-4.133a1.14 1.14 0 0 1 .865-.501 48.172 48.172 0 0 0 3.423-.379c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
-                      />
-                    </svg>
-
-                    <p class="text-xs cursor-pointer">Messages</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
-    </footer>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Incognitee from "@/assets/img/incognitee-mask.svg";
-import TEERdays from "@/public/img/index/TEERdays-icon-white.svg";
-import { useAccount } from "@/store/account.ts";
-import { eventBus } from "@/helpers/eventBus";
+import { ref, onMounted, onUnmounted } from "vue";
 import HealthIndicator from "@/components/ui/HealthIndicator.vue";
+import Sidebar from "@/components/ui/Sidebar.vue";
+import { useAccount } from "@/store/account";
+import { eventBus } from "@/helpers/eventBus";
+import Incognitee from "@/assets/img/incognitee-full-logo.svg";
 
-const accountStore = useAccount();
-
-const emitAddressClicked = () => {
-  eventBus.emit("addressClicked");
-};
+// Sidebar-State (local)
+const isSidebarOpen = ref(false);
 
-const emitSwitchToWallet = () => {
-  eventBus.emit("switchToWallet");
+// Event-Handler für Sidebar-Toggle
+const toggleSidebar = () => {
+  isSidebarOpen.value = !isSidebarOpen.value;
 };
 
-const emitSwitchToMessaging = () => {
-  eventBus.emit("switchToMessaging");
-};
+// Event-Abonnement bei Mounten und Entfernen bei Unmounten
+onMounted(() => {
+  eventBus.on("toggleSidebar", toggleSidebar);
+});
 
-const emitSwitchToSwap = () => {
-  eventBus.emit("switchToSwap");
-};
+onUnmounted(() => {
+  eventBus.off("toggleSidebar", toggleSidebar);
+});
 
-const emitSwitchToGov = () => {
-  eventBus.emit("switchToGov");
-};
-
-const emitSwitchToVouchers = () => {
-  eventBus.emit("switchToVouchers");
-};
+// Account Store für Wallet-Adresse
+const accountStore = useAccount();
 
-const emitSwitchToTeerDays = () => {
-  eventBus.emit("switchToTeerDays");
+// Event-Emitter-Funktionen
+const emitEvent = (eventName: string) => {
+  eventBus.emit(eventName);
 };
 </script>
 
 <style scoped>
-.address {
-  font-size: 0.875rem; /* Small text size */
-  color: white; /* Adjust as necessary for your theme */
-}
 .layout {
   display: flex;
   flex-direction: column;
@@ -228,11 +65,6 @@ const emitSwitchToTeerDays = () => {
   flex-shrink: 0;
 }
 
-.header,
-.footer {
-  flex-shrink: 0;
-}
-
 .header-content,
 .footer-content {
   display: flex;
@@ -241,34 +73,39 @@ const emitSwitchToTeerDays = () => {
   width: 100%;
 }
 
-.logo {
-  height: 50px;
-  width: 50px;
-}
-
 .main {
   flex-grow: 1;
   overflow-y: auto;
 }
 
-.address {
-  font-size: 0.875rem;
-  color: white;
-}
-
 .bg-green-500 {
-  background-color: #2dad24; /* Adjust the color as needed */
+  background-color: #2dad24;
 }
 
 .w-4 {
-  width: 1rem; /* Adjust the size as needed */
+  width: 1rem;
 }
 
 .h-4 {
-  height: 1rem; /* Adjust the size as needed */
+  height: 1rem;
+}
+.logo {
 }
-
 .rounded-full {
-  border-radius: 9999px; /* Makes the element a circle */
+  border-radius: 9999px;
+}
+.wallet-address {
+  display: block;
+  white-space: nowrap; /* Verhindert Zeilenumbruch */
+  overflow: hidden; /* Versteckt überlaufenden Text */
+  text-overflow: ellipsis; /* Zeigt '...' bei zu langem Text an */
+  max-width: 10ch; /* Maximale Länge: 10 Zeichen */
+}
+
+/* Für größere Bildschirme (ab 641px) */
+@media (min-width: 641px) {
+  .wallet-address {
+    max-width: 10ch; /* Begrenze auch hier auf 10 Zeichen */
+  }
 }
 </style>
diff --git a/package.json b/package.json
index 986b5b3..dffd6e9 100644
--- a/package.json
+++ b/package.json
@@ -75,5 +75,6 @@
     "vue-qrcode-reader": "^5.5.4",
     "vue3-form-wizard": "^0.2.3",
     "vuetify": "^3.7.0"
-  }
+  },
+  "packageManager": "yarn@4.5.3+sha512.3003a14012e2987072d244c720506549c1aab73ee728208f1b2580a9fd67b92d61ba6b08fe93f6dce68fd771e3af1e59a0afa28dd242dd0940d73b95fedd4e90"
 }
diff --git a/pages/index.vue b/pages/index.vue
index 007c60a..d75bb38 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -154,7 +154,10 @@ import { useSystemHealth } from "@/store/systemHealth";
 import { useNotes } from "~/store/notes";
 import { formatMoment } from "~/helpers/date";
 import { Note, NoteDirection } from "~/lib/notes";
-import { SessionProxyRole } from "@/lib/sessionProxyStorage.ts";
+import {
+  SessionProxyRole,
+  sessionProxyRoleOrder,
+} from "@/lib/sessionProxyStorage.ts";
 import MessagingTab from "~/components/tabs/MessagingTab.vue";
 import SwapTab from "~/components/tabs/SwapTab.vue";
 import GovTab from "~/components/tabs/GovTab.vue";
@@ -275,16 +278,18 @@ const fetchIncogniteeBalance = async () => {
 };
 
 const storeSessionProxies = (proxies) => {
-  for (const proxy of proxies) {
-    const localKeyring = new Keyring({ type: "sr25519" });
-    const seed = hexToU8a(proxy.seed.toString());
-    const account = localKeyring.addFromSeed(seed);
-    accountStore.addSessionProxy(
-      account,
-      seed,
-      proxy.role.toString() as SessionProxyRole,
-    );
-  }
+  // Add the first entry for each role in proxies to the store
+  sessionProxyRoleOrder.forEach((role) => {
+    const proxy = proxies.find((p) => p.role.toString() === role);
+    if (proxy) {
+      const localKeyring = new Keyring({ type: "sr25519" });
+      const seed = hexToU8a(proxy.seed.toString());
+      const account = localKeyring.addFromSeed(seed);
+      accountStore.addSessionProxy(account, seed, role);
+    } else {
+      accountStore.removeProxyForRole(role);
+    }
+  });
 };
 const fetchNetworkStatus = async () => {
   const promises = [];
diff --git a/public/.DS_Store b/public/.DS_Store
index 2df834dece04146da8756a60971fb2b38947670a..fc8968c52b3704873d6c5af5d5ec7c19f482f730 100644
GIT binary patch
literal 8196
zcmeHML2DC16n@*px}gfGwonSfg4ebtQCou`F^va75RB+SrOhU3vbfm^*`%qKLQWp^
z<`3}V!Gi}c9{dIV1N{O1i=Om*Gt;=)B<e*gbf(O_-I@2jdHc<q*}N?gS;by0OSD8p
zHY&^X9GVG*$GMJ`8QrrCX#r0p$fFvqQk9xx+NQ%WU>GnA7zPXjhJpWq0lc%h*i+v7
zYSgrb0mHzFWPr~H2bE<(%Yl;e=s+V=0LUb|Wx+M_0Euz5END4UQbJ)<We=8yS~|tB
z6ddCYt3wvF94M*aWGOgVdS**!D3+WZI7h0JRZ!Bjh5^ICI0Kx!FH?mA<n5i2{GIPw
zR7W<Sr99<mPs=rGL%VU?7gg66F7UkNZlbPzmjze9x0$1>v<{m}PPX|WW^)04w(;jn
zue$KBC%-hT;;TaycL7bbV_k^ZnI~61Yo9_`>S*i^tTbR@4^QonKArU{W+4f-1aM(Y
z?{J!4Ev)*k5I)9n;Aybm$d;?3)#gq*bN6+0tR+e%O|L!s?%9hw8=sltA+{xIzZ`Ej
zqqesJrFq%`fxAPpcwu=7xSdGcOarLsqMjeK@CVD7*o;{j_v5k*FK#FM@g-(qF6PIY
zdZy9EkRkad5|RmMwZ;OMgKUD9+Yj5C|4(k)_rh)_^VOP3Bu~wrwrzXPeo}6Vez{xe
z_QGPN^N8>6V}aeH>x%optM|9k3!5V7R=l9zkpQn&hsxuJUQiSLqUZ&+P-4q!z)q!7
zTj{0!{q_8clf827V8z+b<}$ezXCt3KI7r!x7cX7ExAoL-1>z+<N3rx9k<P07Vaq|Q
zpZO^KSXFn81mE7bk3UDEp*Mf{{%z}q3_XpD2HyDSNZ37>u4vqDxfA#z;E-Z3Z0urz
z{U)&FA%Ze?p2$5LU6ylLx{$h9Lbdy|I6pEncv(&i8@X$vHWp!_B15MGJF7TJJe(N;
z&H(;q*~OSU#T(w&QA=r9@_?vAzmL|1cYKC=uwG|BM?+C=q$pkzV;aN2u`-ZQvoCS}
ze{1^p|6}#hOl}x34E$XNtYoQNDq@bKUlQ@@IM;Siw^6yU-attSK_k;~NSTg94*y|@
fYX_=~DQG!R5<MvY{6hf$2sZD3$-QY#E(1RR5-Ev?

delta 131
zcmZp1XfcprU|?W$DortDU=RQ@Ie-{MGjUEV6q~50D98np2Z^N=C+8&P=jUuJT+PVH
zH91Xi!sJ)N%^S;Juq<Zh;1Fa6ssjQ6ZXn?b(!a6rJM(0I8Ap%>AQM<XG!w)Iu-N8!
Ho;l0_EaDb$

diff --git a/public/img/.DS_Store b/public/img/.DS_Store
index d5b6d84c9b54e1d463ab9c59bff41e2e79434bc9..e3f891194c517aa36cae16f99c7b70f7139c329b 100644
GIT binary patch
delta 338
zcmZoMXfc@JFDk&mz`)4B0HhKbay)bLlaq4tlQs)-EN6}eNwG1cGvqMjGbABP1I0md
zjzFyU9}IvjG_^_P#RVXvfZ{un3UV@wOAHLIF)}f;u(Gjpa7@0*60Ob2880AFU2SHm
zqhM%aQLCd+ZD?d*q@!SNX<1v#$sww&Zygk$os*lF-!(abRi3eXG7rlVClnWz1sCPz
z<maUWZ2@|Mft4YXA&()2A(f#5<`tkQ$gS&v80OZ=YgnX&sphE74XjR#o7p-3@&f?4
CrC8Mf

delta 150
zcmZoMXfc@JFUrHfz`)4BAi%(o$dHp#oSc)CpP#c?kYhPBBhO?W)+L&(44Djh3@Hq$
z3>8V`#RW+@`AI-6JCh1>GK)(L46ZRUF|)9;v2(CbmS>CB;oyuHkgTpYw6N4sFg7-+
z)lsN6G&BZs%!~|bYdJYYmG!NI;<Iyd^YXhVzhRMQ?Ad&j&53bigDc}^c8<UN0Mari
AH~;_u

diff --git a/public/img/index/.DS_Store b/public/img/index/.DS_Store
index df9314cfd95c96a1e04d29fa7b596f96e963c9f3..dd0a16082783aefe1dabf205e3c10c28e5c2363d 100644
GIT binary patch
literal 10244
zcmeHM&u<$=6n>kyiA_osNK0rX=n8~XiKLB_Dru;MOzIwrIK>qlpi0-V<t(;$EdQu!
zqDVe*01ogER6^p;wcOyse^4Y&T+5XkT;O{%+x5(P)`0^N5;NBBvv=Nm^Sw9kz1bNP
zk+(Cb6^VQz%Hv|XcosKH<9@y-+D!c9T~H75M1nq{tJI;08WY^^f%Aa#fb)R!fb)R!
zz<<F5ShKn17Zi1O=K<#d=YhlnTpxT~OiM8xDJn|`ZgL9%n!{t+@E!XADdWeq6w{HS
zQWQGX?!k*iy?Be^DRK1s%nn+L=}1u}PM#7cFCN*8cPO459df>8C$FTayE_j!4@`Q1
z_wLV875nv7+_nAtotD_IwnP>EoKo-Ly85SV_%<oiqX*PT$$XoVDbPMfXyY@$2|-AG
zdT2^`ubeE=Y7{H`qTOK-G<*0n?iRgmQ7*^m^H;iupT4*CBU@nQto=>S&VfGi2<o7(
zMs;dY0RIKBM^HCq(dXdO{brFcETUJxvg_3?y7)-5XaYf7j4hhZX;`ER?i?M++3CZs
zv@O4<Y%zFED_;5yyhgu{|HW?-{3)I>@+=+;<|V{ZBx9=)$5kEZR}p6c^{9yxDNA(D
z@ClVZGZ!+n456ikPaX3cpKY0QJo6-_DJMq;CX;XWRu*4%*z3g6`ncL@g}wgT+E3oh
zZ0^k5d_JFF$lt3Rh+(B4^as72p!*^Jx+_Gh`s{m9eLt)Z_ZH9J5>Y=0qk2~ggta<Y
zKKdYxYGSw}22rgiWh<&9Unmsz7GFL(+T338i`Q=)ulPsB^|kdCe`|aD__&b2@cOlz
zyL-)6I})D(JDL|Szx2HNo!mLj6T6LAxO{F`@6+Sp7dm>DnTf0(y|#X1{xACsAd!7g
z=|(LP@ys&L^N0q4x)dN5^jTcRYzkzout$chb&s@KH;)s|fV!CfXfi8^tK1ZB!xyy7
z^)#hV_s9=(iAN^5#<`KrWq3zr^b*huSlomSHGJ#S$H<2hd>|{aZq*#Lbde#4@IcRu
zYmetXlUIxF?@m3oFCw-#wpRT0%}p8H#cf3T=JkzKaI*nunZf-9It>SylltpMx?i8t
zJC~9vHFW5Kp2cHKr+T$LgJ~GZa+ID1F3<WjXq+bA<)`4(dUdp4zm}jiIL5(e=P;0}
zz*|6=?aSgB;MF1oX3LT<%dn0*L&~&Zz6%R7I1OvwOsvV|)+{@b+hXMstQ^3;e^g@R
zlA&Au0@9L~nGo7|*@{j|P`Q}s8kXrU-Nt7ZNgmKcnc|^b6j@glx&!>mSPZ%3dFQl}
zcWJ7&24awlNr++)$z{>9z;a<UbWTS&#ES>VN8MhOxgZ(Z=D^Dm{8v*t6Ohl@yk;bg
zZpz%%bm{T){k0^1jPdl`&Ehd*<x32Moa0x-CVMSaLXo=$VvW<pd-e@ekB;`nTM1fC
zUdL+ZFp>I<v>=yFjz^9r%Zn}Nt%2AgVIp68Y}cz>@Z{~p0*gM~lIffli*k4c!0S0R
zP0w>C8g?XnCi>MsfIjKdF+VLQn6>_KRk8J(_}19tt~n2!vIl0>c>V(D?d<>mPZ^aP
z&UwIj;50qp<;s=v4o2inv#s%2yN~NWE^f>>QdElI#w`3?9>?PcAID#bpC#)X`b+V%
ek)l!@a#9>ro#y}Re+IbyzuW(7hg<*0{r_Ld>lRu7

delta 183
zcmZn(XmOBWU|?W$DortDU;r^WfEYvza8E20o2aKK3KVBx1o9aeN*VGPG8sx3Ds$2|
z7EWWI*ucA)or8sg(QvYYpxER+0t+Vh3C@}vB2+y&T%=-htmuTz@nRW_lRt|0Ox`Rp
zbMgnN$&=SgcT7%~nKoHf_LU$r&|n~t;06+|APYAZerKM{uM)@sv<~D9hRN|fQzze*
J$Vb!q8~~OlF}eT%