diff --git a/packages/docusaurus-playground/docusaurus.config.js b/packages/docusaurus-playground/docusaurus.config.js
index 6e77e84..867ad8f 100644
--- a/packages/docusaurus-playground/docusaurus.config.js
+++ b/packages/docusaurus-playground/docusaurus.config.js
@@ -41,7 +41,7 @@ const config = {
           },
         },
         docs: {
-          routeBasePath: '/docs',
+          routeBasePath: '/about',
           versions: {
             current: {
               label: 'current',
@@ -57,16 +57,65 @@ const config = {
   themeConfig:
     /** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
     ({
-      colorMode: {
-        defaultMode: 'dark',
-        disableSwitch: false,
-      },
       navbar: {
-        // items: [
-        //   {
-        //     type: 'search',
-        //   }
-        // ]
+        items: [
+          {
+            type: 'search',
+          },
+          {
+            label: 'About',
+            to: '/about',
+          },
+          {
+            label: 'Github',
+            href: 'https://github.com/status-im',
+          },
+        ],
+      },
+      footer: {
+        copyright: 'Nimbus @2023<br/>All Rights Reserved.',
+        links: [
+          {
+            items: [
+              {
+                href: 'https://twitter.com/ethnimbus',
+                label: 'Twitter',
+              },
+              {
+                href: 'https://discord.gg/EP8DZnXu9y',
+                label: 'Discord',
+              },
+              {
+                href: '/',
+                label: 'Docs',
+              },
+              {
+                href: '/',
+                label: 'Github',
+              },
+            ],
+          },
+          {
+            items: [
+              {
+                href: '/',
+                label: 'Contact us',
+              },
+              {
+                href: 'https://jobs.status.im/',
+                label: 'Work with us',
+              },
+              {
+                href: '/',
+                label: 'Privacy policy',
+              },
+              {
+                href: '/',
+                label: 'Terms & conditions',
+              },
+            ],
+          },
+        ],
       },
     }),
 }
diff --git a/packages/logos-docusaurus-preset/src/theme-config/base.ts b/packages/logos-docusaurus-preset/src/theme-config/base.ts
index 2820898..69ecd76 100644
--- a/packages/logos-docusaurus-preset/src/theme-config/base.ts
+++ b/packages/logos-docusaurus-preset/src/theme-config/base.ts
@@ -15,6 +15,7 @@ export const baseThemeConfig: ThemeConfig = {
   navbar: {
     title: '',
     logo: {},
+    hideOnScroll: true,
   },
   footer: {
     logo: {},
diff --git a/packages/logos-docusaurus-theme/src/client/css/custom.scss b/packages/logos-docusaurus-theme/src/client/css/custom.scss
index 481123e..59341d2 100644
--- a/packages/logos-docusaurus-theme/src/client/css/custom.scss
+++ b/packages/logos-docusaurus-theme/src/client/css/custom.scss
@@ -185,7 +185,7 @@
   --ifm-navbar-padding-vertical: calc(var(--ifm-spacing-vertical) * 0.5);
   --ifm-navbar-shadow: var(--ifm-global-shadow-lw);
   --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
-  --ifm-navbar-sidebar-width: 83vw;
+  --ifm-navbar-sidebar-width: 100vw;
   --ifm-pagination-border-radius: var(--ifm-global-radius);
   --ifm-pagination-font-size: 1rem;
   --ifm-pagination-item-active-background: var(--ifm-hover-overlay);
@@ -432,6 +432,10 @@ small {
   }
 }
 
+.menu__list-item .menu__link {
+  @include lsd.typography('body2');
+}
+
 .menu__link--active {
   border-left: 1px solid rgb(var(--lsd-border-primary));
   border-radius: 0;
@@ -540,6 +544,35 @@ small {
   align-items: center;
 }
 
+a[class^='sidebarLogo_'] {
+  margin: 0;
+
+  img {
+    height: 48px;
+  }
+}
+
+.navbar-sidebar__item {
+  padding-inline: var(--content-padding);
+  padding-block: 0;
+}
+
+.navbar-sidebar__back {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  width: 100% !important;
+  margin: 0 !important;
+  gap: 16px;
+  margin-top: 24px !important;
+  margin-bottom: 24px !important;
+}
+
+.theme-doc-sidebar-menu .menu__link {
+  padding-left: var(--content-padding);
+  padding-right: 0;
+}
+
 @include utils.responsive('sm', 'down') {
   :root {
     --ifm-global-spacing: 0.5rem;
@@ -630,6 +663,10 @@ small {
     flex: 1 0;
     margin: auto;
   }
+
+  nav.menu {
+    padding-top: 0;
+  }
 }
 
 @include utils.responsive('xl', 'up') {
@@ -653,6 +690,10 @@ small {
       }
     }
   }
+
+  .theme-doc-toc-desktop {
+    top: calc(var(--ifm-navbar-height)) !important;
+  }
 }
 
 .container {
@@ -713,6 +754,7 @@ small {
 .footer__title {
   @include lsd.typography('label1');
   margin-bottom: 4px;
+  font-weight: var(--ifm-font-weight-normal);
 }
 
 .footer > div:nth-child(1) > .footer__links {
@@ -870,6 +912,89 @@ small {
   .main-wrapper {
     padding-inline: 0;
   }
+
+  .navbar-sidebar:has(.navbar-sidebar__items--show-secondary)
+    .navbar-sidebar__brand {
+    button:first-of-type {
+      display: none;
+    }
+
+    button.lsd-icon-button {
+      margin-left: auto;
+    }
+  }
+
+  .navbar-sidebar:not(:has(.navbar-sidebar__items--show-secondary)) {
+    .navbar-sidebar__items {
+      height: 180px;
+    }
+
+    .navbar-sidebar__item {
+      padding-block: var(--content-padding);
+    }
+
+    .menu__list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .menu__link {
+      padding-left: 0;
+      border-left: none;
+
+      > div {
+        font-size: var(--lsd-body1-fontSize) !important;
+      }
+    }
+
+    .footer > div {
+      gap: 32px !important;
+    }
+
+    .footer > button {
+      display: none;
+    }
+
+    .footer .container.container-fluid {
+      margin-bottom: 16px !important;
+
+      > .footer__links {
+        gap: 0 !important;
+      }
+    }
+
+    .footer .footer__links {
+      gap: 16px !important;
+    }
+  }
+
+  .navbar-sidebar__brand {
+    height: 60px;
+    padding-block: 0;
+  }
+
+  .navbar-sidebar__brand > button {
+    width: 32px;
+    height: 32px;
+  }
+
+  .navbar-sidebar__brand > button:first-of-type {
+    margin-right: 0 !important;
+    margin-left: auto;
+  }
+
+  .navbar-sidebar__brand > button:not(:last-of-type) {
+    border-right: none;
+  }
+
+  .navbar-sidebar__close {
+    border: 1px solid rgb(var(--lsd-border-primary));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: unset;
+  }
 }
 
 [data-hidden-doc-sidebar='true'] {
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css
index 8863ded..a8fc5ff 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocSidebar/Desktop/styles.module.css
@@ -3,7 +3,7 @@
     display: flex;
     flex-direction: column;
     height: 100%;
-    margin-top: var(--ifm-navbar-height);
+    padding-top: var(--ifm-navbar-height);
     /* width: var(--doc-sidebar-width); */
   }
 
diff --git a/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx
index bba0b2d..e281f94 100644
--- a/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx
+++ b/packages/logos-docusaurus-theme/src/client/theme/DocSidebarItem/Category/index.tsx
@@ -17,7 +17,7 @@ import Link from '@docusaurus/Link'
 import { translate } from '@docusaurus/Translate'
 import useIsBrowser from '@docusaurus/useIsBrowser'
 import DocSidebarItems from '@theme/DocSidebarItems'
-import { ArrowDownIcon, ArrowUpIcon } from '@acid-info/lsd-react'
+import { ArrowDownIcon, ArrowUpIcon, Typography } from '@acid-info/lsd-react'
 
 // If we navigate to a category and it becomes active, it should automatically
 // expand itself
@@ -165,7 +165,9 @@ export default function DocSidebarItemCategory({
           href={collapsible ? hrefWithSSRFallback ?? '#' : hrefWithSSRFallback}
           {...props}
         >
-          {label}
+          <Typography variant="body2" color="primary">
+            {label}
+          </Typography>
           {collapsed ? <ArrowUpIcon /> : <ArrowDownIcon />}
         </Link>
         {href && collapsible && (
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx
new file mode 100644
index 0000000..f9b4166
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Header/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import { useNavbarMobileSidebar } from '@docusaurus/theme-common/internal'
+import { translate } from '@docusaurus/Translate'
+import NavbarColorModeToggle from '@theme/Navbar/ColorModeToggle'
+import NavbarLogo from '@theme/Navbar/Logo'
+import { CloseIcon } from '@acid-info/lsd-react'
+import SearchBar from '@theme/SearchBar'
+
+function CloseButton() {
+  const mobileSidebar = useNavbarMobileSidebar()
+  return (
+    <button
+      type="button"
+      aria-label={translate({
+        id: 'theme.docs.sidebar.closeSidebarButtonAriaLabel',
+        message: 'Close navigation bar',
+        description: 'The ARIA label for close button of mobile sidebar',
+      })}
+      className="clean-btn navbar-sidebar__close"
+      onClick={() => mobileSidebar.toggle()}
+    >
+      <CloseIcon />
+    </button>
+  )
+}
+export default function NavbarMobileSidebarHeader() {
+  return (
+    <div className="navbar-sidebar__brand">
+      <NavbarLogo />
+      <NavbarColorModeToggle className="margin-right--md" />
+      <SearchBar />
+      <CloseButton />
+    </div>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx
new file mode 100644
index 0000000..38978b9
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/Layout/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react'
+import clsx from 'clsx'
+import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
+import Footer from '@theme/Footer'
+
+export default function NavbarMobileSidebarLayout({
+  header,
+  primaryMenu,
+  secondaryMenu,
+}) {
+  const { shown: secondaryMenuShown } = useNavbarSecondaryMenu()
+
+  return (
+    <div className="navbar-sidebar">
+      {header}
+      <div
+        className={clsx('navbar-sidebar__items', {
+          'navbar-sidebar__items--show-secondary': secondaryMenuShown,
+        })}
+      >
+        <div className="navbar-sidebar__item menu">{primaryMenu}</div>
+        <div className="navbar-sidebar__item menu">{secondaryMenu}</div>
+      </div>
+      {!secondaryMenuShown && <Footer />}
+    </div>
+  )
+}
diff --git a/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
new file mode 100644
index 0000000..4e4d344
--- /dev/null
+++ b/packages/logos-docusaurus-theme/src/client/theme/Navbar/MobileSidebar/SecondaryMenu/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react'
+import { useThemeConfig } from '@docusaurus/theme-common'
+import { useNavbarSecondaryMenu } from '@docusaurus/theme-common/internal'
+import Translate from '@docusaurus/Translate'
+import { Typography } from '@acid-info/lsd-react'
+import { IconArrowLeft } from '@logos-theme/components/Icon'
+
+function SecondaryMenuBackButton(props) {
+  return (
+    <button {...props} type="button" className="clean-btn navbar-sidebar__back">
+      <IconArrowLeft />
+      <Typography>
+        <Translate
+          id="theme.navbar.mobileSidebarSecondaryMenu.backButtonLabel"
+          description="The label of the back button to return to main menu, inside the mobile navbar sidebar secondary menu (notably used to display the docs sidebar)"
+        >
+          Back to main menu
+        </Translate>
+      </Typography>
+    </button>
+  )
+}
+
+// The secondary menu slides from the right and shows contextual information
+// such as the docs sidebar
+export default function NavbarMobileSidebarSecondaryMenu() {
+  const isPrimaryMenuEmpty = useThemeConfig().navbar.items.length === 0
+  const secondaryMenu = useNavbarSecondaryMenu()
+  return (
+    <>
+      {/* edge-case: prevent returning to the primaryMenu when it's empty */}
+      {!isPrimaryMenuEmpty && (
+        <SecondaryMenuBackButton onClick={() => secondaryMenu.hide()} />
+      )}
+      {secondaryMenu.content}
+    </>
+  )
+}