diff --git a/index.html b/index.html
index 7128996..0235275 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,134 @@
 
 <body>
 
+    <section class="mainmenu">
+        <button id="menu-btn2">
+            <section id="x-cont">
+                <div class="x-bar"></div>
+                <div class="x-bar"></div>
+            </section>
+            Close
+        </button>
+
+        <nav>
+            <ul id="mm-prio1">
+                <li>
+                    <a href="#">What's on</a>
+                </li>
+
+                <li>
+                    <a href="#">News</a>
+                </li>
+
+                <li>
+                    <a href="#">My tickets</a>
+                </li>
+
+                <li>
+                    <a href="#">Visit</a>
+                </li>
+            </ul>
+
+            <ul id="mm-prio2">
+                <li>
+                    <a href="#">About us</a>
+                </li>
+
+                <li>
+                    <a href="#">Membership</a>
+                </li>
+
+                <li>
+                    <a href="#">Archive</a>
+                </li>
+
+                <li>
+                    <a href="#">Webshop</a>
+                </li>
+
+                <li>
+                    <a href="#">Support us</a>
+                </li>
+
+                <li>
+                    <a href="#">Working at Paradiso</a>
+                </li>
+
+                <li>
+                    <a href="#">Contact & Partners</a>
+                </li>
+            </ul>
+
+            <ul id="mm-prio3">
+                <li>
+                    <a href="#"><img src="./images/bassline.webp" alt="Bassline logo">Bassline</a>
+                </li>
+
+                <li>
+                    <a href="#"><img src="./images/club-paradiso.webp" alt="Club Paradiso logo">Club Paradiso</a>
+                </li>
+
+                <li>
+                    <a href="#"><img src="./images/indiestad.webp" alt="Indiestad logo">Indiestad</a>
+                </li>
+
+                <li>
+                    <a href="#"><img src="./images/kosmos.webp" alt="Kosmos logo">Kosmos</a>
+                </li>
+
+                <li>
+                    <a href="#"><img src="./images/sugar-mountain-logo.webp" alt="Sugar Mountain logo">Sugar Mountain</a>
+                </li>
+
+                <li>
+                    <a href="#"><img src="./images/jazzlogo.webp" alt="Super-Sonic Jazz logo">Super-Sonic Jazz</a>
+                </li>
+
+                <li>
+                    <a href="#"><img src="./images/TTTT-logo.webp" alt="Tickets to the Tropics logo">Ticket to the Tropics</a>
+                </li>
+            </ul>
+        </nav>
+
+        <ul id="socials">
+            <li>
+                <a href="https://www.tiktok.com/@paradisoamsterdam" target="_blank"><img src="./images/tiktok.svg" alt="TikTok logo"></a>
+            </li>
+
+            <li>
+                <a href="https://www.instagram.com/paradisoadam/" target="_blank"><img src="./images/instagram.svg" alt="Instagram logo"></a>
+            </li>
+
+            <li>
+                <a href="https://open.spotify.com/user/paradisoamsterdam" target="_blank"><img src="./images/spotify.svg" alt="Spotify logo"></a>
+            </li>
+
+            <li>
+                <a href="https://www.youtube.com/channel/UC7yz0T2iROobE4-GgS9dhWg" target="_blank"><img src="./images/youtube.svg" alt="YouTube logo"></a>
+            </li>
+        </ul>
+
+        <ul id="partners">
+            <li>
+                <a href="https://www.amsterdam.nl/" target="_blank"><img src="./images/gemeente-amsterdam.svg" alt="Gemeente Amsterdam logo"></a>
+            </li>
+
+            <li id="heineken">
+                <a href="https://www.heineken.com/" target="_blank"><img src="./images/heineken.svg" alt="Heineken logo"></a>
+            </li>
+
+            <li>
+                <a href="https://re-imagine-europe.eu/" target="_blank"><img src="./images/european-union-funded.svg" alt="European Union Funded logo"></a>
+            </li>
+        </ul>
+
+        <a href="#"><img id="refresh" src="./images/refresh.svg" alt="refresh icon">Bekijk in het Nederlands</a>
+
+    </section>
+
     <header>
         <section id="nav">
-            <button>
+            <button id="menu-btn">
                 <section>
                     <div></div>
                     <div></div>
diff --git a/script.js b/script.js
index 6a1cefc..65d5aed 100644
--- a/script.js
+++ b/script.js
@@ -1 +1,7 @@
-// IK WEET HET NIET OKE
\ No newline at end of file
+document.getElementById('menu-btn').addEventListener('click', function() {
+    document.querySelector('.mainmenu')?.classList.add('open');
+});
+
+document.getElementById('menu-btn2').addEventListener('click', function() {
+    document.querySelector('.mainmenu')?.classList.remove('open');
+});
\ No newline at end of file
diff --git a/style.css b/style.css
index 1057960..208511a 100644
--- a/style.css
+++ b/style.css
@@ -73,6 +73,7 @@ body {
     border: none;
     font-family: inherit;
     font-size: inherit;
+    cursor: pointer;
 }
 
 #nav img {
@@ -531,6 +532,7 @@ iframe:last-of-type {
     height: 100%;
     width: auto;
     object-fit: cover;
+    object-position: center;
     grid-row: 1 / -1;
     grid-column: 1 / -1;
 }
@@ -585,17 +587,59 @@ img#refresh {
 /* menu */
 
 .mainmenu {
-    margin: 20px;
+    position: fixed;
+    width: 100vw;
+    height: auto;
+    background-color: white;
+    padding: 15px;
+    z-index: 1;
+    top: -160%;
+    transition: top .5s ease;
+    max-height: 640px;
+    overflow-y: scroll;
 }
 
 .mainmenu button {
     color: black;
     display: flex;
+    align-items: center;
     background: none;
     border: none;
     font-family: inherit;
-    font-size: inherit;
+    font-size: 17px;
     margin-bottom: 35px;
+    margin-left: -10px;
+    position: relative;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+}
+
+.mainmenu.open {
+    top: 0;
+}
+
+#x-cont {
+    display: flex;
+    position: relative;
+    margin-right: 30px;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.x-bar {
+    width: 1.25em;
+    height: 0.13em;
+    background-color: black;
+    position: absolute;
+}
+
+.x-bar:first-child {
+    transform: rotate(45deg);
+}
+
+.x-bar:last-child {
+    transform: rotate(-45deg);
 }
 
 .mainmenu a {
@@ -610,15 +654,60 @@ img#refresh {
 #mm-prio1 {
     font-family: Paradiso-Extra_Bold;
     letter-spacing: -2px;
-    font-size: 45px;
+    font-size: 43px;
+    line-height: 50px;
+    margin-bottom: 20px;
 }
 
 #mm-prio2 {
     font-family: Paradiso-Bold;
-    font-size: 20px;
+    font-size: 19px;
     line-height: 30px;
+    margin-bottom: 20px;
+}
+
+#mm-prio3 {
+    font-family: Paradiso-Bold;
+    font-size: 19px;
+    margin-bottom: 60px;
+}
+
+#mm-prio3 a {
+    display: flex;
+    align-items: center;
+}
+
+#mm-prio3 img {
+    width: 34px;
+    border-radius: 25px;
+    margin: 5px 15px 3px 0px;
 }
 
 .ticket div h3, h4 {
     margin: 0;
+}
+
+#socials {
+    height: 23px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 30px;
+}
+
+#socials img {
+    height: 20px;
+    margin: 5px 25px 5px 0px;
+}
+
+#partners {
+    margin-bottom: 30px;
+}
+
+#partners img {
+    height: 23px;
+    margin: 5px 15px 5px 0px;
+}
+
+#heineken img {
+    height: 12px
 }
\ No newline at end of file
