diff --git a/app/views/application/_menu.html.erb b/app/views/application/_menu.html.erb
index cabf0514..63ed7c44 100644
--- a/app/views/application/_menu.html.erb
+++ b/app/views/application/_menu.html.erb
@@ -72,6 +72,13 @@
       <!-- Right part -->
       <div class="hidden md:block">
         <div class="flex items-center">
+          <iframe sandbox="allow-scripts allow-popups allow-same-origin"
+            id="zappbutton"
+            src="https://zapp.zeus.gent/zapp-iframe/button.html"
+            style="height: 3.7em; aspect-ratio: 1 / 1; border: none; overflow: hidden; scrollbar-width: 0;"
+          >
+          </iframe>
+
           <!-- Notifications -->
           <%= link_to user_notifications_path(current_user),
                       class: 'flex items-center bg-gray-800 p-2 rounded-md text-gray-400 hover:bg-gray-700 hover:text-white' do %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 7ed819ba..4f04b700 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -14,6 +14,7 @@
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
 
     <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
+    <script src='/scripts/zapp-iframe.js' async></script>
   </head>
 
   <body class="h-full">
@@ -43,6 +44,16 @@
 
     </div>
 
+    <!-- Zapp Dropdown iframe needs to be directly relative to body -->
+    <!-- local testing:  -->
+    <!-- production: https://zapp.zeus.gent/zapp-iframe/dropdown.html -->
+
+    <iframe sandbox="allow-scripts allow-popups allow-same-origin"
+      id="zappdropdown"
+      src="https://zapp.zeus.gent/zapp-iframe/dropdown.html"
+      style="border-style: none; z-index: 200; position: absolute; left: 0; top: 0; height: 0vh; width: 0vw; overflow: hidden; visibility: hidden;"
+    ></iframe>
+
     <footer class="p-4 bg-white shadow md:flex md:items-center md:justify-between md:p-6 dark:bg-gray-800">
       <span class="text-sm text-gray-500 sm:text-center dark:text-gray-400">© <%= Date.current.year %> <a href="https://zeus.gent" class="hover:underline">Zeus WPI</a>. All Rights Reserved.
       </span>
diff --git a/public/scripts/zapp-iframe.js b/public/scripts/zapp-iframe.js
new file mode 100644
index 00000000..b98131d3
--- /dev/null
+++ b/public/scripts/zapp-iframe.js
@@ -0,0 +1,93 @@
+let setsize = false;
+let dropwidth = 0;
+let dropheight = 0;
+let opened = false;
+
+const outsideclickhandler = (ev) => {
+    const path = ev.composedPath();
+    const clickedInside =
+        path.some((n) => n && n.id === 'zappbutton') ||
+        path.some((n) => n && n.id === 'zappdropdown');
+    if (!clickedInside) {
+        opened = false;
+        const dropdown = document.getElementById("zappdropdown");
+        dropdown.style.visibility = opened ? "visible" : "hidden";
+        dropdown.contentWindow.postMessage({type: "outsideclick"}, "*")
+        document.getElementById("zappbutton").contentWindow.postMessage({type: "outsideclick"}, "*")
+        dropdown.contentWindow.postMessage({type: "outsideclick"}, "*")
+    }
+};
+window.addEventListener("click", outsideclickhandler);
+const GAP = 4;
+
+function position(){
+    var dropdownroot = document.getElementById("zappdropdown")
+    const vrect = document.getElementById("zappbutton").getBoundingClientRect();
+
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+
+    let left = vrect.x;
+    let topBelow = vrect.y + vrect.height + GAP;
+    let top = topBelow;
+
+    // Horizontal clamp
+    if(left + dropwidth > vw - GAP) left = Math.max(GAP, vw - dropwidth - GAP);
+    if(left < GAP) left = GAP;
+
+    // Prefer below, fallback above if overflow
+    if(top + dropheight > vh - GAP){
+        const topAbove = vrect.y - dropheight - GAP;
+        if(topAbove >= GAP){
+            top = topAbove;
+        }else{
+        // Clamp inside viewport
+            top = Math.max(GAP, Math.min(top, vh - dropheight - GAP));
+        }
+    }
+
+    // dropdownroot.style.left = left + "px";
+    dropdownroot.style.transform = `translatex(${left}px)`
+    dropdownroot.style.top = top + "px";
+}
+
+function openAnimation(){
+    const root = document.getElementById("zappdropdown")
+    // Avoid duplicating listeners
+    if(!root._repositionBound){
+        const handler = () => position();
+        window.addEventListener("resize", handler);
+        window.addEventListener("scroll", handler, true);
+        root._repositionBound = true;
+    }
+    position();
+}
+
+window.onmessage = function(e){
+    const button = document.getElementById("zappbutton");
+    const dropdown = document.getElementById("zappdropdown");
+    try{
+        let msg = JSON.parse(e.data);
+        if(msg.type === "buttonclick"){
+        opened = !opened;
+            dropdown.style.visibility = opened ? "visible" : "hidden";
+            dropdown.contentWindow.postMessage({type: 'state', state: opened}, "*")
+            if(opened) openAnimation();
+        }else if(msg.type === "dropdown-box" && !setsize){
+            setsize = true;
+            dropwidth = msg.box.width;
+            dropheight = msg.box.height;
+            dropdown.style.width = `${dropwidth}px`;
+            dropdown.style.height = `${dropheight + 7}px`;
+        }else if(msg.type === "state"){
+            opened = msg.state;
+            dropdown.style.visibility = opened ? "visible" : "hidden";
+            button.contentWindow.postMessage(msg, "*")
+        }
+        else{
+            console.error("no supported msg type: " + msg.type)
+        }
+    }catch(err){
+        console.error(err);
+    }
+}
\ No newline at end of file
