diff --git a/packages/berlin/public/icons/menu-dark.svg b/packages/berlin/public/icons/menu-dark.svg
deleted file mode 100644
index fa989a68..00000000
--- a/packages/berlin/public/icons/menu-dark.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_405_4545)">
-<path d="M6 27H30C30.825 27 31.5 26.325 31.5 25.5C31.5 24.675 30.825 24 30 24H6C5.175 24 4.5 24.675 4.5 25.5C4.5 26.325 5.175 27 6 27ZM6 19.5H30C30.825 19.5 31.5 18.825 31.5 18C31.5 17.175 30.825 16.5 30 16.5H6C5.175 16.5 4.5 17.175 4.5 18C4.5 18.825 5.175 19.5 6 19.5ZM4.5 10.5C4.5 11.325 5.175 12 6 12H30C30.825 12 31.5 11.325 31.5 10.5C31.5 9.675 30.825 9 30 9H6C5.175 9 4.5 9.675 4.5 10.5Z" fill="white"/>
-</g>
-<defs>
-<clipPath id="clip0_405_4545">
-<rect width="36" height="36" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/packages/berlin/public/icons/menu-light.svg b/packages/berlin/public/icons/menu-light.svg
deleted file mode 100644
index 93bf1518..00000000
--- a/packages/berlin/public/icons/menu-light.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_405_4516)">
-<path d="M6 27H30C30.825 27 31.5 26.325 31.5 25.5C31.5 24.675 30.825 24 30 24H6C5.175 24 4.5 24.675 4.5 25.5C4.5 26.325 5.175 27 6 27ZM6 19.5H30C30.825 19.5 31.5 18.825 31.5 18C31.5 17.175 30.825 16.5 30 16.5H6C5.175 16.5 4.5 17.175 4.5 18C4.5 18.825 5.175 19.5 6 19.5ZM4.5 10.5C4.5 11.325 5.175 12 6 12H30C30.825 12 31.5 11.325 31.5 10.5C31.5 9.675 30.825 9 30 9H6C5.175 9 4.5 9.675 4.5 10.5Z" fill="#222222"/>
-</g>
-<defs>
-<clipPath id="clip0_405_4516">
-<rect width="36" height="36" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/packages/berlin/src/components/header/Header.styled.tsx b/packages/berlin/src/components/header/Header.styled.tsx
index d4d5d69f..a3d53a76 100644
--- a/packages/berlin/src/components/header/Header.styled.tsx
+++ b/packages/berlin/src/components/header/Header.styled.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 import Button from '../button/Button';
 
 export const SyledHeader = styled.header`
@@ -78,25 +78,83 @@ export const NavButtons = styled.ul`
   list-style: none;
 `;
 
-export const DesktopButtons = styled.ul`
+export const DesktopButtons = styled.div`
   display: none;
   @media (min-width: 1080px) {
     display: flex;
     gap: 1rem;
-    list-style: none;
+  }
+`;
+
+export const MobileButtons = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  height: 100%;
+  @media (min-width: 1080px) {
+    display: none;
   }
 `;
 
 export const ThemeButton = styled(Button)``;
 
-export const MenuButton = styled.button`
-  display: block;
-  background-color: var(--color-white);
-  border: none;
+export const MenuButton = styled.div`
+  align-items: center;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
   height: 2.25rem;
+  justify-content: center;
   width: 2.25rem;
 
   @media (min-width: 1080px) {
     display: none;
   }
 `;
+
+export const Bar = styled.div<{ isOpen: boolean }>`
+  background-color: var(--color-black);
+  border-radius: 8px;
+  height: 3px;
+  margin: 2px 0;
+  transition: 0.4s;
+  width: 27px;
+
+  &:first-child {
+    transform: ${({ isOpen }) => (isOpen ? 'rotate(-45deg) translateY(10px)' : '')};
+  }
+
+  &:nth-child(2) {
+    opacity: ${({ isOpen }) => (isOpen ? '0' : '1')};
+    transition: 0.2s;
+  }
+
+  &:nth-child(3) {
+    transform: ${({ isOpen }) => (isOpen ? 'rotate(45deg) translateY(-10px)' : '')};
+  }
+`;
+
+const fadeIn = keyframes`
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+
+export const BurgerMenuContainer = styled.nav<{ $isOpen: boolean }>`
+  align-items: center;
+  background-color: var(--color-white);
+  bottom: 0;
+  display: flex;
+  height: calc(100% - 160px);
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  width: 100%;
+  z-index: 999;
+
+  display: ${(props) => (props.$isOpen ? 'flex' : 'none')};
+  animation: ${fadeIn} 0.3s ease-out;
+`;
diff --git a/packages/berlin/src/components/header/Header.tsx b/packages/berlin/src/components/header/Header.tsx
index 58a58e00..d6a3f64c 100644
--- a/packages/berlin/src/components/header/Header.tsx
+++ b/packages/berlin/src/components/header/Header.tsx
@@ -1,4 +1,5 @@
 // React and third-party libraries
+import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 
@@ -18,6 +19,8 @@ import ZupassLoginButton from '../zupassButton/ZupassLoginButton';
 
 // Styled components
 import {
+  Bar,
+  BurgerMenuContainer,
   DesktopButtons,
   HeaderContainer,
   LogoContainer,
@@ -25,6 +28,7 @@ import {
   LogoSubtext,
   LogoText,
   MenuButton,
+  MobileButtons,
   NavButtons,
   NavContainer,
   SyledHeader,
@@ -47,6 +51,8 @@ function Header() {
     },
   });
 
+  const [isBurgerMenuOpen, setIsBurgerMenuOpen] = useState(false);
+
   return (
     <SyledHeader>
       <HeaderContainer>
@@ -68,20 +74,38 @@ function Header() {
                   <NavButton to="/account" $color="secondary">
                     Account
                   </NavButton>
-                  <Button onClick={mutateLogout}>Log out</Button>
+                  <Button onClick={() => mutateLogout()}>Log out</Button>
                 </>
               ) : (
                 <ZupassLoginButton>Login with Zupass</ZupassLoginButton>
               )}
             </DesktopButtons>
-            <MenuButton>
-              <img src={`/icons/menu-${theme}.svg`} />
+            <MenuButton onClick={() => setIsBurgerMenuOpen(!isBurgerMenuOpen)}>
+              <Bar isOpen={isBurgerMenuOpen} />
+              <Bar isOpen={isBurgerMenuOpen} />
+              <Bar isOpen={isBurgerMenuOpen} />
             </MenuButton>
             <ThemeButton onClick={toggleTheme}>
               <img src={`/icons/toggle-${theme}.svg`} height={20} width={20} />
             </ThemeButton>
           </NavButtons>
         </NavContainer>
+        <BurgerMenuContainer $isOpen={isBurgerMenuOpen} onClick={() => setIsBurgerMenuOpen(false)}>
+          <NavButtons>
+            <MobileButtons>
+              {user ? (
+                <>
+                  <NavButton to="/account" $color="secondary">
+                    Account
+                  </NavButton>
+                  <Button onClick={() => mutateLogout()}>Log out</Button>
+                </>
+              ) : (
+                <ZupassLoginButton>Login with Zupass</ZupassLoginButton>
+              )}
+            </MobileButtons>
+          </NavButtons>
+        </BurgerMenuContainer>
       </HeaderContainer>
     </SyledHeader>
   );