diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 2a414b3..046c476 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,86 +1,100 @@
-import { useWallet } from '@solana/wallet-adapter-react'
+import { FC, useState } from 'react'
+import Image from 'next/image'
+import { WalletMultiButton } from '@solana/wallet-adapter-react-ui'
+import { NavList, Breadcrumbs } from '@primer/react'
+import { useRouter } from 'next/router'
 import Link from 'next/link'
-import { FC } from 'react'
-
-interface INavbarElement {
-    title: string
-    url: string
-    tooltip?: string
-    disabled?: boolean
-}
+import { INavbarElement } from 'lib/interfaces'
 
 const Navbar: FC = () => {
-    const { publicKey } = useWallet()
-
+    const router = useRouter()
+    const [open, setOpen] = useState(false)
     const NAVBAR_ELEMENTS: INavbarElement[] = [
         {
-            title: 'Manage CMs',
+            title: 'Dashboard / Candy Machines',
             url: '/',
-            tooltip: 'Manage Candy Machines',
-        },
-        {
-            title: 'Create CMs',
-            url: '/create-candy-machine',
-            tooltip: 'Create Candy Machine',
         },
     ]
 
     return (
         <nav
-            className='
-                fixed top-0 left-0 z-10 
-                flex flex-row md:flex-col md:justify-between py-4 px-6
-                md:h-screen w-screen md:w-48 
-                bg-gray-200
-            '
+            className='color-bg-emphasis color-fg-subtle position-fixed top-0 left-0 z-10 width-full d-flex flex-row color-fg-on-emphasis'
+            style={{ height: '70px' }}
         >
-            <div className='w-full'>
-                <h4 className='uppercase mb-6'>Sugar Rush</h4>
-                <div className='w-full flex flex-row md:flex-col space-x-4 md:space-x-0 md:space-y-4'>
-                    {NAVBAR_ELEMENTS.map((element) => {
-                        return <NavbarElement disabled={!publicKey} key={element.url} {...element} />
-                    })}
+            <div className='d-flex width-full container-xl p-responsive py-4 flex-justify-between flex-items-center'>
+                <div
+                    className='d-flex flex-items-center flex-justify-start
+                         width-full'
+                >
+                    <div className='d-flex flex-shrink-0'>
+                        <Image src='/logo.png' alt='logo' width={29} height={21} />
+                        <h4 className='ml-2'>Sugar rush</h4>
+                    </div>
+
+                    <Breadcrumbs className='d-none d-md-flex flex-row ml-3'>
+                        {NAVBAR_ELEMENTS.map((element) => {
+                            return (
+                                <Link href={element.url} key={element.url}>
+                                    <Breadcrumbs.Item
+                                        href={element.url}
+                                        key={element.url}
+                                        className={`${
+                                            router.asPath === element.url ? 'text-bold' : ''
+                                        } color-fg-on-emphasis`}
+                                    >
+                                        {element.title}
+                                    </Breadcrumbs.Item>
+                                </Link>
+                            )
+                        })}
+                    </Breadcrumbs>
+                    <div className='d-md-none'>
+                        <div
+                            onClick={() => setOpen(!open)}
+                            className='ml-2 d-flex flex-justify-center flex-items-center'
+                            style={{ cursor: 'pointer' }}
+                        >
+                            <Image
+                                src='/down-arrow.svg'
+                                alt='logo'
+                                width={21}
+                                height={21}
+                                style={{
+                                    transform: `${open ? 'rotate(90deg)' : 'rotate(0deg)'}`,
+                                    transition: 'transform 0.2s linear',
+                                }}
+                            />
+                        </div>
+                    </div>
+                    {open && (
+                        <NavList
+                            className='d-flex position-absolute top-8 color-bg-emphasis color-fg-subtle width-full left-0'
+                            sx={{ height: '100vh' }}
+                        >
+                            {NAVBAR_ELEMENTS.map((element) => {
+                                return (
+                                    <Link href={element.url} key={element.url}>
+                                        <NavList.Item
+                                            key={element.url}
+                                            href={element.url}
+                                            onClick={() => setOpen(!open)}
+                                            className={`${
+                                                router.asPath === element.url ? 'text-bold' : ''
+                                            } color-fg-on-emphasis`}
+                                        >
+                                            {element.title}
+                                        </NavList.Item>
+                                    </Link>
+                                )
+                            })}
+                        </NavList>
+                    )}
                 </div>
+
+                <WalletMultiButton />
             </div>
-            <p className='text-left text-xs'>
-                By{' '}
-                <a href='https://boxfish.studio' target='_blank' rel='noopener noreferrer'>
-                    Boxfish Studio
-                </a>
-            </p>
         </nav>
     )
 }
 
-const NavbarElement = ({ title, url, tooltip, disabled }: INavbarElement) => (
-    <Link href={url}>
-        <div
-            style={{ pointerEvents: disabled ? 'none' : 'auto', opacity: disabled ? '50%' : '' }}
-            className={`
-                    cursor-pointer
-                    group
-                    w-auto md:w-full
-                    relative
-                    flex items-center
-                    transition-all
-                    font-semibold text-blue-regular
-                    `}
-        >
-            {title}
-            <span
-                style={{ left: 'calc(100% + 16px)' }}
-                className='
-                    absolute p-2 m-2 w-max
-                    text-xs font-bold text-red 
-                    transition-all duration-300
-                    bg-gray-800 text-white
-                    rounded-md shadow-md 
-                    scale-0 group-hover:scale-100'
-            >
-                {tooltip}
-            </span>
-        </div>
-    </Link>
-)
-
 export default Navbar
diff --git a/lib/interfaces.ts b/lib/interfaces.ts
index e75cde6..f87d025 100644
--- a/lib/interfaces.ts
+++ b/lib/interfaces.ts
@@ -2,3 +2,9 @@ export interface ICarousel {
     title: string
     image: string
 }
+export interface INavbarElement {
+    title: string
+    url: string
+    tooltip?: string
+    disabled?: boolean
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index e2369eb..19f024c 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -11,7 +11,7 @@ import {
     TorusWalletAdapter,
 } from '@solana/wallet-adapter-wallets'
 import { clusterApiUrl } from '@solana/web3.js'
-import { Navbar, Wallet } from 'components'
+import { Navbar } from 'components'
 import type { AppProps } from 'next/app'
 import React, { useMemo } from 'react'
 import '../styles/globals.scss'
@@ -41,9 +41,8 @@ function MyApp({ Component, pageProps }: AppProps) {
         <ThemeProvider theme={customTheme}>
             <ConnectionProvider endpoint={endpoint}>
                 <WalletProvider wallets={wallets}>
-                    <Navbar />
                     <WalletModalProvider>
-                        <Wallet />
+                        <Navbar />
                         <Component {...pageProps} />
                     </WalletModalProvider>
                 </WalletProvider>
diff --git a/public/down-arrow.svg b/public/down-arrow.svg
new file mode 100644
index 0000000..3d79aa7
--- /dev/null
+++ b/public/down-arrow.svg
@@ -0,0 +1,4 @@
+<svg  width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+
+    <path d="M6 13L11 8L6 3" stroke="#ffffff" stroke-width="1.72854"></path>
+</svg>
\ No newline at end of file
diff --git a/public/favicon.ico b/public/favicon.ico
index cd75b43..20e8970 100644
Binary files a/public/favicon.ico and b/public/favicon.ico differ
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000..acf99d4
Binary files /dev/null and b/public/logo.png differ
diff --git a/styles/globals.scss b/styles/globals.scss
index aa0d90c..627b6ac 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
-@import './wallet-adapter.scss';
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
+@import "./wallet-adapter.scss";
 @import "@primer/css/index.scss";
 
 @tailwind base;
@@ -8,7 +8,7 @@
 @tailwind utilities;
 
 :root {
-    font-family: 'Inter', sans-serif;
+    font-family: "Inter", sans-serif;
     @apply text-base;
 }
 
@@ -30,11 +30,13 @@ h1 {
 }
 h2 {
     @apply text-2xl;
-} 
+}
 h3 {
     @apply text-xl;
 }
-h4, h5, h6 {
+h4,
+h5,
+h6 {
     @apply text-lg;
 }
 
@@ -42,3 +44,13 @@ a {
     text-decoration: none;
     @apply text-blue-regular;
 }
+
+.wallet-adapter-button {
+    background-color: #4e44ce !important;
+    padding: 6px 12px !important;
+    height: 32px !important;
+    border-radius: 2px !important;
+    flex-shrink: 0;
+    font-size: 12px;
+    letter-spacing: -0.15px;
+}