diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
index 15b0dd011..9037e4dc1 100644
--- a/apps/website/src/components/Navbar.tsx
+++ b/apps/website/src/components/Navbar.tsx
@@ -1,67 +1,94 @@
 "use client"
 
-import { Heading, HStack, Link } from "@chakra-ui/react"
-import NextLink from "next/link"
-import { usePathname } from "next/navigation"
+import {
+    Box,
+    Divider,
+    Drawer,
+    DrawerBody,
+    DrawerCloseButton,
+    DrawerContent,
+    DrawerFooter,
+    DrawerOverlay,
+    HStack,
+    Heading,
+    IconButton,
+    Link,
+    Text,
+    VStack,
+    useDisclosure
+} from "@chakra-ui/react"
 import Image from "next/image"
-import IconArrowUpRight from "../icons/IconArrowUpRight"
+import NextLink from "next/link"
+import IconDiscord from "../icons/IconDiscord"
+import IconMenu from "../icons/IconMenu"
+import IconThumbsUp from "../icons/IconThumbsUp"
+import NavbarLinks from "./NavbarLinks"
 
 export default function Navbar() {
-    const pathname = usePathname()
+    const { isOpen, onOpen, onClose } = useDisclosure()
 
     return (
         <HStack py="7" justify="space-between">
             <Link as={NextLink} href="/">
-                <Image width="148" height="40" src="./semaphore-logo.svg" alt="Semaphore logo" />
+                <Box display={{ base: "none", sm: "block" }}>
+                    <Image width="148" height="40" src="./semaphore-logo.svg" alt="Semaphore logo" />
+                </Box>
+                <Box display={{ base: "block", sm: "none" }}>
+                    <Image width="20" height="40" src="./semaphore-icon.svg" alt="Semaphore icon" />
+                </Box>
             </Link>
-            <HStack fontSize="18px" spacing="10">
-                <Link
-                    as={NextLink}
-                    href="/projects"
-                    variant="navlink"
-                    borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
-                >
-                    <Heading fontSize="18px" fontWeight="normal">
-                        Projects
-                    </Heading>
-                </Link>
-                <Link
-                    as={NextLink}
-                    href="/learn"
-                    variant="navlink"
-                    borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
-                >
-                    <Heading fontSize="18px" fontWeight="normal">
-                        Learn
-                    </Heading>
-                </Link>
-                <Link
-                    as={NextLink}
-                    href="/build"
-                    variant="navlink"
-                    borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
-                >
-                    <Heading fontSize="18px" fontWeight="normal">
-                        Build
-                    </Heading>
-                </Link>
-                <Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
-                    <HStack spacing="3">
-                        <Heading fontSize="18px" fontWeight="normal">
-                            Documentation
-                        </Heading>
-                        <IconArrowUpRight width="10px" mb={1} />
-                    </HStack>
-                </Link>
-                <Link href="https://github.com/semaphore-protocol" variant="navlink" isExternal>
-                    <HStack spacing="3">
-                        <Heading fontSize="18px" fontWeight="normal">
-                            Github
-                        </Heading>
-                        <IconArrowUpRight width="10px" mb={1} />
-                    </HStack>
-                </Link>
+            <HStack display={{ base: "none", md: "flex" }} fontSize="18px" spacing="10">
+                <NavbarLinks />
             </HStack>
+
+            <IconButton
+                onClick={onOpen}
+                display={{ base: "block", md: "none" }}
+                aria-label="Menu"
+                variant="unstyled"
+                icon={<IconMenu boxSize="6" />}
+            />
+
+            <Drawer isOpen={isOpen} placement="right" onClose={onClose}>
+                <DrawerOverlay />
+                <DrawerContent bgColor="darkBlueBg">
+                    <DrawerCloseButton />
+
+                    <DrawerBody>
+                        <VStack spacing="8" mt="20">
+                            <NavbarLinks />
+                        </VStack>
+                    </DrawerBody>
+
+                    <DrawerFooter mb="5" flexDirection="column">
+                        <Divider mb="20" />
+
+                        <VStack w="full" justify="center" spacing="5">
+                            <Link href="https://semaphore.pse.dev/discord" isExternal>
+                                <HStack>
+                                    <IconDiscord boxSize="16px" />
+                                    <Heading fontSize="14px" fontWeight="normal">
+                                        Discord
+                                    </Heading>
+                                </HStack>
+                            </Link>
+
+                            <Link href="" isExternal>
+                                <HStack>
+                                    <IconThumbsUp boxSize="16px" />
+                                    <Heading fontSize="14px" fontWeight="normal">
+                                        Give feedback about the website
+                                    </Heading>
+                                </HStack>
+                            </Link>
+
+                            <Text fontSize="12px" color="text.500" pt="2">
+                                Copyright © 2023 Ethereum Foundation
+                            </Text>
+                        </VStack>
+                    </DrawerFooter>
+                </DrawerContent>
+            </Drawer>
         </HStack>
     )
 }
diff --git a/apps/website/src/components/NavbarLinks.tsx b/apps/website/src/components/NavbarLinks.tsx
new file mode 100644
index 000000000..bf9473433
--- /dev/null
+++ b/apps/website/src/components/NavbarLinks.tsx
@@ -0,0 +1,61 @@
+"use client"
+
+import { HStack, Heading, Link } from "@chakra-ui/react"
+import NextLink from "next/link"
+import { usePathname } from "next/navigation"
+import IconArrowUpRight from "../icons/IconArrowUpRight"
+
+export default function NavbarLinks() {
+    const pathname = usePathname()
+
+    return (
+        <>
+            <Link
+                as={NextLink}
+                href="/projects"
+                variant="navlink"
+                borderBottomColor={pathname === "/projects" ? "ceruleanBlue" : "transparent"}
+            >
+                <Heading fontSize="18px" fontWeight="normal">
+                    Projects
+                </Heading>
+            </Link>
+            <Link
+                as={NextLink}
+                href="/learn"
+                variant="navlink"
+                borderBottomColor={pathname === "/learn" ? "ceruleanBlue" : "transparent"}
+            >
+                <Heading fontSize="18px" fontWeight="normal">
+                    Learn
+                </Heading>
+            </Link>
+            <Link
+                as={NextLink}
+                href="/build"
+                variant="navlink"
+                borderBottomColor={pathname === "/build" ? "ceruleanBlue" : "transparent"}
+            >
+                <Heading fontSize="18px" fontWeight="normal">
+                    Build
+                </Heading>
+            </Link>
+            <Link href="https://docs.semaphore.pse.dev" variant="navlink" isExternal>
+                <HStack spacing="3">
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Documentation
+                    </Heading>
+                    <IconArrowUpRight width="10px" mb={1} />
+                </HStack>
+            </Link>
+            <Link href="https://github.com/semaphore-protocol" variant="navlink" isExternal>
+                <HStack spacing="3">
+                    <Heading fontSize="18px" fontWeight="normal">
+                        Github
+                    </Heading>
+                    <IconArrowUpRight width="10px" mb={1} />
+                </HStack>
+            </Link>
+        </>
+    )
+}
diff --git a/apps/website/src/icons/IconMenu.tsx b/apps/website/src/icons/IconMenu.tsx
new file mode 100644
index 000000000..f286bf868
--- /dev/null
+++ b/apps/website/src/icons/IconMenu.tsx
@@ -0,0 +1,10 @@
+import { Icon, IconProps } from "@chakra-ui/react"
+import React from "react"
+
+export default function IconMenu(props: IconProps): JSX.Element {
+    return (
+        <Icon viewBox="0 0 24 24" {...props}>
+            <path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z" fill="currentColor" />
+        </Icon>
+    )
+}
diff --git a/apps/website/src/icons/IconThumbsUp.tsx b/apps/website/src/icons/IconThumbsUp.tsx
new file mode 100644
index 000000000..862d47dbb
--- /dev/null
+++ b/apps/website/src/icons/IconThumbsUp.tsx
@@ -0,0 +1,13 @@
+import { Icon, IconProps } from "@chakra-ui/react"
+import React from "react"
+
+export default function IconThumbsUp(props: IconProps): JSX.Element {
+    return (
+        <Icon viewBox="0 0 22 21" {...props}>
+            <path
+                d="M0.999999 8.5L4 8.5L4 20.5L0.999998 20.5C0.734781 20.5 0.480427 20.3946 0.292891 20.2071C0.105354 20.0196 -1.84311e-06 19.7652 -1.81993e-06 19.5L-9.45698e-07 9.5C-9.22512e-07 9.23478 0.105355 8.98043 0.292892 8.79289C0.480428 8.60536 0.734782 8.5 0.999999 8.5ZM6.293 7.207L12.693 0.806998C12.7781 0.721692 12.8911 0.669965 13.0112 0.66133C13.1314 0.652696 13.2506 0.687734 13.347 0.759999L14.2 1.4C14.4369 1.57784 14.6158 1.82185 14.7143 2.10125C14.8127 2.38066 14.8262 2.68294 14.753 2.97L13.6 7.5L20 7.5C20.5304 7.5 21.0391 7.71071 21.4142 8.08579C21.7893 8.46086 22 8.96957 22 9.5L22 11.604C22.0003 11.8654 21.9493 12.1242 21.85 12.366L18.754 19.88C18.6787 20.0632 18.5507 20.22 18.3862 20.3304C18.2217 20.4408 18.0281 20.4998 17.83 20.5L7 20.5C6.73478 20.5 6.48043 20.3946 6.29289 20.2071C6.10536 20.0196 6 19.7652 6 19.5L6 7.914C6.00006 7.6488 6.10545 7.39449 6.293 7.207Z"
+                fill="currentColor"
+            />
+        </Icon>
+    )
+}