diff --git a/components/HeaderNav/HeaderNav.tsx b/components/HeaderNav/HeaderNav.tsx
index 8a8c30f..a72a521 100644
--- a/components/HeaderNav/HeaderNav.tsx
+++ b/components/HeaderNav/HeaderNav.tsx
@@ -20,7 +20,6 @@ import { useMediaQuery } from '@mantine/hooks';
 import {
   IconBell,
   IconCircleHalf2,
-  IconMenu2,
   IconMessageCircle,
   IconMoonStars,
   IconPower,
@@ -130,21 +129,12 @@ const NOTIFICATIONS = [
 type HeaderNavProps = {
   mobileOpened?: boolean;
   toggleMobile?: () => void;
-  desktopOpened?: boolean;
-  toggleDesktop?: () => void;
   sidebarState: SidebarState;
   onSidebarStateChange: () => void;
 };
 
 const HeaderNav = (props: HeaderNavProps) => {
-  const {
-    desktopOpened,
-    toggleDesktop,
-    toggleMobile,
-    mobileOpened,
-    sidebarState,
-    onSidebarStateChange,
-  } = props;
+  const { toggleMobile, mobileOpened, onSidebarStateChange } = props;
   const theme = useMantineTheme();
   const { setColorScheme, colorScheme } = useMantineColorScheme();
   const tablet_match = useMediaQuery('(max-width: 768px)');
@@ -209,13 +199,7 @@ const HeaderNav = (props: HeaderNavProps) => {
     <Group justify="space-between">
       <Group gap={0}>
         <Tooltip label="Toggle side navigation">
-          <ActionIcon
-            variant="default"
-            visibleFrom="md"
-            onClick={onSidebarStateChange}
-          >
-            <IconMenu2 size={16} />
-          </ActionIcon>
+          <Burger visibleFrom="md" size="sm" onClick={onSidebarStateChange} />
         </Tooltip>
         <Burger
           opened={mobileOpened}
diff --git a/components/Logo/Logo.module.css b/components/Logo/Logo.module.css
index 236479b..3357a26 100644
--- a/components/Logo/Logo.module.css
+++ b/components/Logo/Logo.module.css
@@ -2,7 +2,6 @@
   padding: rem(4px) rem(8px);
   font-size: var(--mantine-font-size-md);
   border-radius: var(--mantine-radius-sm);
-  color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-white));
   font-weight: 600;
 
   @mixin hover {
diff --git a/components/Logo/Logo.tsx b/components/Logo/Logo.tsx
index ec78981..48928d9 100644
--- a/components/Logo/Logo.tsx
+++ b/components/Logo/Logo.tsx
@@ -25,8 +25,8 @@ const Logo = ({ href, showText = true, ...others }: LogoProps) => {
       <Group gap="xs">
         <Image
           src="/logo-no-background.png"
-          height={24}
-          width={24}
+          height={showText ? 32 : 24}
+          width={showText ? 32 : 24}
           alt="design sparx logo"
         />
         {showText && <Text fw={700}>Mantine admin</Text>}
diff --git a/components/Navigation/Links/Links.module.css b/components/Navigation/Links/Links.module.css
index c9438f7..57d19a5 100644
--- a/components/Navigation/Links/Links.module.css
+++ b/components/Navigation/Links/Links.module.css
@@ -10,7 +10,7 @@
   }
 
   @mixin dark {
-    color: var(--mantine-color-black);
+    color: var(--mantine-color-white);
   }
 
   @mixin hover {
@@ -65,7 +65,7 @@
   }
 
   @mixin dark {
-    color: var(--mantine-color-black);
+    color: var(--mantine-color-white);
   }
 
   @mixin hover {
diff --git a/components/Navigation/Navigation.module.css b/components/Navigation/Navigation.module.css
index 5c5095e..023c539 100644
--- a/components/Navigation/Navigation.module.css
+++ b/components/Navigation/Navigation.module.css
@@ -1,7 +1,6 @@
 .navbar {
   background-color: var(--mantine-primary-color-filled);
   min-height: rem(100vh);
-  width: rem(300px);
   padding: var(--mantine-spacing-md);
   padding-bottom: 0;
   display: flex;
@@ -16,11 +15,19 @@
   }
 
   @mixin dark {
-    background-color: var(--mantine-primary-color-light-color);
+    background-color: var(--mantine-color-dark-7);
   }
 
   &[data-sidebar-state="full"] {
     width: rem(300px);
+
+    @media (max-width: $mantine-breakpoint-md) {
+      width: 100%;
+    }
+
+    @media (max-width: $mantine-breakpoint-sm) {
+      width: 100%;
+    }
   }
 
   &[data-sidebar-state="mini"] {
@@ -48,36 +55,27 @@
     overflow: hidden;
   }
 
-
   @media (max-width: $mantine-breakpoint-md) {
     width: 100%;
   }
 }
 
 .header {
-  padding: var(--mantine-spacing-md);
-  padding-top: 0;
+  padding: 0 var(--mantine-spacing-md) var(--mantine-spacing-sm) var(--mantine-spacing-md);
   margin-left: calc(var(--mantine-spacing-md) * -1);
   margin-right: calc(var(--mantine-spacing-md) * -1);
-  border-bottom: rem(1px) solid var(--mantine-primary-color-filled-hover);
-
-  @mixin light {
-    color: var(--mantine-color-white);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-black);
-  }
+  border-bottom: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  color: var(--mantine-color-white);
 }
 
 .logo {
-  @mixin light {
-    color: var(--mantine-color-white);
-  }
+  /*@mixin light {*/
+  /*  color: var(--mantine-color-white);*/
+  /*}*/
 
-  @mixin dark {
-    color: var(--mantine-color-black);
-  }
+  /*@mixin dark {*/
+  /*  color: var(--mantine-color-black);*/
+  /*}*/
 }
 
 .links {
@@ -89,30 +87,20 @@
 .linksInner {
   padding-top: var(--mantine-spacing-xl);
   padding-bottom: var(--mantine-spacing-xl);
+
+  &[data-sidebar-state="mini"] {
+    padding-top: 0;
+  }
 }
 
 .linkHeader {
   font-weight: 500;
-
-  @mixin light {
-    color: var(--mantine-color-gray-3);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-dark-8);
-  }
+  color: light-dark(var(--mantine-color-white), var(--mantine-color-gray-3));
 }
 
 .footer {
   margin-left: calc(var(--mantine-spacing-md) * -1);
   margin-right: calc(var(--mantine-spacing-md) * -1);
-  border-top: rem(1px) solid var(--mantine-primary-color-filled-hover);
-
-  @mixin light {
-    color: var(--mantine-color-white);
-  }
-
-  @mixin dark {
-    color: var(--mantine-color-black);
-  }
+  border-top: rem(1px) solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
+  color: var(--mantine-color-white);
 }
diff --git a/components/Navigation/Navigation.tsx b/components/Navigation/Navigation.tsx
index 95969a9..454a42f 100644
--- a/components/Navigation/Navigation.tsx
+++ b/components/Navigation/Navigation.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { ActionIcon, Box, Flex, Group, ScrollArea, Text } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
@@ -167,12 +167,18 @@ const Navigation = ({
     </Box>
   ));
 
+  useEffect(() => {
+    if (tablet_match) {
+      onSidebarStateChange('full');
+    }
+  }, [onSidebarStateChange, tablet_match]);
+
   return (
-    <nav className={classes.navbar} data-sidebar-state={sidebarState}>
+    <div className={classes.navbar} data-sidebar-state={sidebarState}>
       <div className={classes.header}>
         <Flex justify="space-between" align="center" gap="sm">
           <Group
-            justify="space-between"
+            justify={sidebarState === 'mini' ? 'center' : 'space-between'}
             style={{ flex: tablet_match ? 'auto' : 1 }}
           >
             <Logo className={classes.logo} showText={sidebarState !== 'mini'} />
@@ -186,7 +192,9 @@ const Navigation = ({
       </div>
 
       <ScrollArea className={classes.links}>
-        <div className={classes.linksInner}>{links}</div>
+        <div className={classes.linksInner} data-sidebar-state={sidebarState}>
+          {links}
+        </div>
       </ScrollArea>
 
       <div className={classes.footer}>
@@ -197,7 +205,7 @@ const Navigation = ({
           showText={sidebarState !== 'mini'}
         />
       </div>
-    </nav>
+    </div>
   );
 };
 
diff --git a/layout/Main/index.tsx b/layout/Main/index.tsx
index 74b5479..38c63c8 100644
--- a/layout/Main/index.tsx
+++ b/layout/Main/index.tsx
@@ -3,7 +3,7 @@
 import { ReactNode, useState } from 'react';
 
 import { AppShell, Container, rem, useMantineTheme } from '@mantine/core';
-import { useDisclosure, useMediaQuery } from '@mantine/hooks';
+import { useDisclosure, useLocalStorage, useMediaQuery } from '@mantine/hooks';
 
 import AppMain from '@/components/AppMain';
 import FooterNav from '@/components/FooterNav';
@@ -20,8 +20,11 @@ export function MainLayout({ children }: Props) {
   const theme = useMantineTheme();
   const tablet_match = useMediaQuery('(max-width: 768px)');
   const [mobileOpened, { toggle: toggleMobile }] = useDisclosure();
-  const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-  const [sidebarState, setSidebarState] = useState<SidebarState>('full');
+  const [desktopOpened] = useDisclosure(true);
+  const [sidebarState, setSidebarState] = useLocalStorage<SidebarState>({
+    key: 'mantine-nav-state',
+    defaultValue: 'full',
+  });
 
   const toggleSidebarState = () => {
     setSidebarState((current) => {
@@ -46,15 +49,12 @@ export function MainLayout({ children }: Props) {
       <AppShell.Header
         style={{
           height: rem(60),
-          border: 'none',
           boxShadow: tablet_match ? theme.shadows.md : theme.shadows.sm,
         }}
       >
         <Container fluid py="sm" px="lg">
           <HeaderNav
-            desktopOpened={desktopOpened}
             mobileOpened={mobileOpened}
-            toggleDesktop={toggleDesktop}
             toggleMobile={toggleMobile}
             sidebarState={sidebarState}
             onSidebarStateChange={toggleSidebarState}