diff --git a/packages/apps/dev-wallet/src/Components/Aside/Aside.tsx b/packages/apps/dev-wallet/src/Components/Aside/Aside.tsx
index deb36d8c89..cf16b7e00e 100644
--- a/packages/apps/dev-wallet/src/Components/Aside/Aside.tsx
+++ b/packages/apps/dev-wallet/src/Components/Aside/Aside.tsx
@@ -1,15 +1,39 @@
 import { FC, lazy, ReactElement, Suspense, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
-const importView = async (key: string) =>
-  lazy(() => import(`./views/${key}`).catch(() => import(`./views/Error`)));
+const importView = async (key: string) => {
+  switch (key) {
+    case 'AddContact':
+      return lazy(() =>
+        import(`./views/AddContact`).catch(() => import(`./views/Error`)),
+      );
+
+    case 'KeySource':
+      return lazy(() =>
+        import(`./views/KeySource`).catch(() => import(`./views/Error`)),
+      );
+
+    case 'NewAsset':
+      return lazy(() =>
+        import(`./views/NewAsset`).catch(() => import(`./views/Error`)),
+      );
+
+    case 'NextAccount':
+      return lazy(() =>
+        import(`./views/NextAccount`).catch(() => import(`./views/Error`)),
+      );
+
+    default:
+      return lazy(() => import(`./views/Error`));
+  }
+};
 
 export const Aside: FC = () => {
   const [view, setView] = useState<ReactElement | undefined>();
   const location = useLocation();
 
   const loadView = async (data: Record<string, string>) => {
-    const Result = await importView(data.aside);
+    const Result: FC<any> = await importView(data.aside);
     setView(<Result {...data} />);
   };
   useEffect(() => {
diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx
index bf82b093f9..633bae97ac 100644
--- a/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx
+++ b/packages/apps/dev-wallet/src/Components/Aside/views/AddContact.tsx
@@ -1,9 +1,8 @@
 import { useWallet } from '@/modules/wallet/wallet.hook';
 import { ContactForm } from '@/pages/contacts/Components/ContactForm';
 import { useSideBar } from '@kadena/kode-ui/patterns';
-import { FC } from 'react';
 
-const AddContact: FC<{ contactId: string }> = ({ contactId }) => {
+const AddContact = ({ contactId }: { contactId: string }) => {
   const { handleSetAsideExpanded } = useSideBar();
   const { getContact } = useWallet();
   return (
diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/Error.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/Error.tsx
index 5ef301d116..acdd038e90 100644
--- a/packages/apps/dev-wallet/src/Components/Aside/views/Error.tsx
+++ b/packages/apps/dev-wallet/src/Components/Aside/views/Error.tsx
@@ -1,6 +1,4 @@
-import { FC } from 'react';
-
-const Error: FC = () => {
+const Error = () => {
   return <div>There was an error loading the view</div>;
 };
 
diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx
index c9a42d4f52..eb51469b2b 100644
--- a/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx
+++ b/packages/apps/dev-wallet/src/Components/Aside/views/KeySource.tsx
@@ -6,9 +6,9 @@ import { useWallet } from '@/modules/wallet/wallet.hook';
 import { AddKeySourceForm } from '@/pages/keys/Components/AddKeySourceForm';
 import { Notification, Stack } from '@kadena/kode-ui';
 import { useSideBar } from '@kadena/kode-ui/patterns';
-import { FC, useState } from 'react';
+import { useState } from 'react';
 
-const KeySource: FC = () => {
+const KeySource = () => {
   const { handleSetAsideExpanded } = useSideBar();
   const { keySources, profile, askForPassword } = useWallet();
   const [error, setError] = useState<string | null>(null);
diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/NewAsset.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/NewAsset.tsx
index 144d0336f7..0f64a224e0 100644
--- a/packages/apps/dev-wallet/src/Components/Aside/views/NewAsset.tsx
+++ b/packages/apps/dev-wallet/src/Components/Aside/views/NewAsset.tsx
@@ -1,7 +1,6 @@
 import { AddToken } from '@/Components/Assets/AddToken';
-import { FC } from 'react';
 
-const NewAsset: FC = () => {
+const NewAsset = () => {
   return (
     <div>
       <AddToken />
diff --git a/packages/apps/dev-wallet/src/Components/Aside/views/NextAccount.tsx b/packages/apps/dev-wallet/src/Components/Aside/views/NextAccount.tsx
index f19e1e62be..6dd7d517d1 100644
--- a/packages/apps/dev-wallet/src/Components/Aside/views/NextAccount.tsx
+++ b/packages/apps/dev-wallet/src/Components/Aside/views/NextAccount.tsx
@@ -1,6 +1,4 @@
-import { FC } from 'react';
-
-const NextAccount: FC<{ contract: string }> = ({ contract }) => {
+const NextAccount = ({ contract }: { contract: string }) => {
   return <div>new account {contract}</div>;
 };
 
diff --git a/packages/apps/dev-wallet/src/Components/Assets/Assets.tsx b/packages/apps/dev-wallet/src/Components/Assets/Assets.tsx
index 859b915038..7f5dbf7e95 100644
--- a/packages/apps/dev-wallet/src/Components/Assets/Assets.tsx
+++ b/packages/apps/dev-wallet/src/Components/Assets/Assets.tsx
@@ -43,11 +43,14 @@ export function Assets({
       >
         <Heading as="h4">Your Assets</Heading>
         {showAddToken && (
-          <Link to={createAsideUrl('NewAsset')}>
-            <LinkUI variant="outlined" isCompact>
-              Add new asset
-            </LinkUI>
-          </Link>
+          <LinkUI
+            variant="outlined"
+            isCompact
+            href={createAsideUrl('NewAsset')}
+            component={Link}
+          >
+            Add new asset
+          </LinkUI>
         )}
       </Stack>
       <Stack gap={'md'}>
diff --git a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
index da5e112a9c..cae216323a 100644
--- a/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
+++ b/packages/apps/dev-wallet/src/pages/contacts/contacts.tsx
@@ -30,11 +30,15 @@ export function Contacts() {
     <Stack flexDirection={'column'} className={panelClass} gap={'md'}>
       <Stack justifyContent={'space-between'}>
         <Heading variant="h3">Contacts</Heading>
-        <Link to={createAsideUrl('AddContact')}>
-          <LinkUI variant="outlined" isCompact>
-            Add Contact
-          </LinkUI>
-        </Link>
+
+        <LinkUI
+          component={Link}
+          href={createAsideUrl('AddContact')}
+          variant="outlined"
+          isCompact
+        >
+          Add Contact
+        </LinkUI>
       </Stack>
       <Stack flexDirection={'column'}>
         {contacts.map((contact) => (
diff --git a/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx b/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx
index 27b0395b23..eea2e60853 100644
--- a/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx
+++ b/packages/apps/dev-wallet/src/pages/keys/Components/Keys.tsx
@@ -26,11 +26,15 @@ export function Keys() {
           <Stack marginBlock={'md'}>
             <Heading variant="h3">Your Keys</Heading>
           </Stack>
-          <Link to={createAsideUrl('KeySource')}>
-            <LinkUI variant="outlined" isCompact>
-              Add key Source
-            </LinkUI>
-          </Link>
+
+          <LinkUI
+            variant="outlined"
+            isCompact
+            href={createAsideUrl('KeySource')}
+            component={Link}
+          >
+            Add key Source
+          </LinkUI>
         </Stack>
 
         <Stack flexDirection={'column'} gap="md">
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
index 6df59bbc38..3952925b8d 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/SideBarLayout.stories.tsx
@@ -84,13 +84,13 @@ const InnerLayout = () => {
         url: 'https://kadena.io',
         push: console.log,
       }}
-      // topBanner={
-      //   <div
-      //     style={{ paddingBlock: '10px', background: 'green', width: '100%' }}
-      //   >
-      //     topbanner
-      //   </div>
-      // }
+      topBanner={
+        <div
+          style={{ paddingBlock: '10px', background: 'green', width: '100%' }}
+        >
+          topbanner
+        </div>
+      }
       breadcrumbs={
         <Breadcrumbs icon={<MonoAccountTree />}>
           <BreadcrumbsItem href="/accounts">He-man</BreadcrumbsItem>
diff --git a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
index 3a74ebf5f0..b29d5706b9 100644
--- a/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SideBarLayout/styles.css.ts
@@ -72,6 +72,9 @@ export const layoutWrapperClass = recipe({
             "sidebarlayout-sidebar sidebarlayout-main sidebarlayout-aside"
           `,
           },
+          xl: {
+            position: 'relative',
+          },
         }),
       ],
     },