diff --git a/index.html b/index.html
index e9f0cc9..334185f 100644
--- a/index.html
+++ b/index.html
@@ -25,6 +25,40 @@
             overflow: hidden;
         }
 
+        /* Default: Show desktop element and hide mobile element */
+        .desktop-element {
+            display: block;
+        }
+
+        .mobile-element {
+            display: none;
+        }
+
+        .video-container {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            z-index: 9999;
+        }
+
+        .video-container video {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .video-container.fade-out {
+            animation: fadeOut 500ms forwards;
+        }
+
+        @keyframes fadeOut {
+            0% { opacity: 1; }
+            100% { opacity: 0; visibility: hidden; }
+        }
+
         .container {
             text-align: center;
             position: relative;
@@ -37,7 +71,6 @@
 
         .logo img {
             min-width: 20rem;
-            /* max-width: 12rem; */
         }
 
         h1 {
@@ -60,7 +93,7 @@
 
         p {
             font-family: 'Montserrat', sans-serif;
-            font-size: 1.0rem;
+            font-size: 1rem;
             color: #c0c0c0;
             max-width: 500px;
             margin: 0 auto;
@@ -70,7 +103,6 @@
         .accent-line {
             width: 100px;
             height: 4px;
-            /* background: linear-gradient(135deg, #b8860b, #ffd700); */
             background: #B57C1A;
             margin: 20px auto;
             border-radius: 2px;
@@ -109,6 +141,14 @@
         }
 
         @media (max-width: 768px) {
+            .desktop-element {
+                display: none; /* Hide desktop element on small screens */
+            }
+
+            .mobile-element {
+                display: block; /* Show mobile element on small screens */
+            }
+            
             .contact {
                 position: relative;
                 flex-direction: column;
@@ -124,7 +164,27 @@
     </style>
 </head>
 <body>
-    <div class="container">
+    <!-- Video Intro -->
+    <div class="desktop-element">
+        <div class="video-container" id="videoContainerDesk">
+            <video id="introVideoDesk" autoplay muted playsinline>
+                <source src="Full HD.mp4" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+    </div>
+
+    <div class="mobile-element">
+        <div class="video-container" id="videoContainerMob">
+            <video id="introVideoMob" autoplay muted playsinline>
+                <source src="Full HD vertical.mp4" type="video/mp4">
+                Your browser does not support the video tag.
+            </video>
+        </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="container" id="mainContent">
         <div class="logo">
             <img src="divine couture-no background.svg" alt="Company Logo">
         </div>
@@ -134,9 +194,31 @@
 
     <div class="contact">
         <div><img src="email-icon.png" alt="Email Icon"><a href="mailto:contact@divine-couture.co.uk">contact@divine-couture.co.uk</a></div>
-        <!-- <div><img src="website-icon.png" alt="Website Icon"><a href="https://www.divine-couture.co.uk">www.divine-couture.co.uk</a></div> -->
         <div><img src="phone-icon.png" alt="Phone Icon"><a href="tel:+447713133027">+44 (0) 77 13 13 30 27</a></div>
         <div><img src="tiktok-icon.png" alt="TikTok Icon"><a href="https://www.tiktok.com/@divinecoutureee">divinecoutureee</a></div>
     </div>
+
+    <script>
+        const videoDesk = document.getElementById('introVideoDesk');
+        const videoContainerDesk = document.getElementById('videoContainerDesk');
+        const mainContent = document.getElementById('mainContent');
+
+        videoDesk.addEventListener('ended', () => {
+            videoContainerDesk.classList.add('fade-out');
+            setTimeout(() => {
+                videoContainerDesk.style.display = 'none';
+            }, 500); // Wait for the fade-out animation to finish
+        });
+
+        const videoMob = document.getElementById('introVideoMob');
+        const videoContainerMob = document.getElementById('videoContainerMob');
+
+        videoMob.addEventListener('ended', () => {
+            videoContainerMob.classList.add('fade-out');
+            setTimeout(() => {
+                videoContainerMob.style.display = 'none';
+            }, 500); // Wait for the fade-out animation to finish
+        });
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
