diff --git a/frontend/public/Lunch.mp4 b/frontend/public/Lunch.mp4
new file mode 100644
index 0000000..c1a5cc7
Binary files /dev/null and b/frontend/public/Lunch.mp4 differ
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 3f8cd0f..d326849 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -60,6 +60,10 @@ function App() {
   const Wrapper = () => {
     return (
       <div>
+      <video width="100%" autoPlay loop muted className="non-clickable">
+        <source src="/Lunch.mp4" type="video/mp4" />
+        Your browser does not support the video tag.
+      </video>
         <Scheduling
           groupSize={groupSize}
           timeSlot={timeSlot}
diff --git a/frontend/src/SCSS/navigation.css b/frontend/src/SCSS/navigation.css
index 017dcbb..f5d61b1 100644
--- a/frontend/src/SCSS/navigation.css
+++ b/frontend/src/SCSS/navigation.css
@@ -18,6 +18,7 @@
   /* Optional: Added transition for smoother display changes */
   border: 1px solid rgba(80, 102, 113, 0.75);
   border-radius: 10px;
+  z-index: 10;
 }
 .hidden {
   display: none;