diff --git a/index.html b/index.html
index 3bcc844..221fd9f 100644
--- a/index.html
+++ b/index.html
@@ -25,63 +25,62 @@
         }
 
         .translate-x-full {
-        transform: translateX(100%);
-    }
-.dark-mode .movie-tile {
-    background: #444;
-    color: white;
-}
+            transform: translateX(100%);
+        }
+        .dark-mode .movie-tile {
+            background: #444;
+            color: white;
+        }
 
-.dark-mode .search-input {
-    background-color: #333;
-    color: white;
-}
+        .dark-mode .search-input {
+            background-color: #333;
+            color: white;
+        }
 
-.dark-mode .video-modal-content {
-        background-color: rgba(0, 0, 0, 0.8);
-        background: 0;
+        .dark-mode .video-modal-content {
+            background-color: rgba(0, 0, 0, 0.8);
+            background: 0;
+        }
 
-    }
+        .dark-mode .stream-btn .trailer-btn{
+            background-color: #555;
+        }
 
-.dark-mode .stream-btn {
-    background-color: #555;
-}
+        .dark-mode .stream-btn:hover .trailer-btn:hover{
+            background-color: #666;
+        }
 
-.dark-mode .stream-btn:hover {
-    background-color: #666;
-}
+        .night-light body {
+            background: linear-gradient(to right, #f5deb3 50%, #deb887 50%);
+            color: black;
+        }
 
-.night-light body {
-        background: linear-gradient(to right, #f5deb3 50%, #deb887 50%);
-        color: black;
-    }
+        .night-light .video-modal-content {
+            background-color: rgba(0, 0, 0, 0.3);
+            background: #f5deb3;
+        }
 
-    .night-light .video-modal-content {
-        background-color: rgba(0, 0, 0, 0.3);
-        background: #f5deb3;
-    }
+        .night-light .movie-tile {
+            background: #f5deb3;
+            color: black;
+        }
 
-    .night-light .movie-tile {
-        background: #f5deb3;
-        color: black;
-    }
+        .night-light .search-input {
+            background-color: #deb887;
+            color: black;
+        }
 
-    .night-light .search-input {
-        background-color: #deb887;
-        color: black;
-    }
+        .night-light .video-modal-content {
+            background-color: rgba(255, 228, 181, 0.8);
+        }
 
-    .night-light .video-modal-content {
-        background-color: rgba(255, 228, 181, 0.8);
-    }
+        .night-light .stream-btn .trailer-btn{
+            background-color: #daa520;
+        }
 
-    .night-light .stream-btn {
-        background-color: #daa520;
-    }
-
-    .night-light .stream-btn:hover {
-        background-color: #cd853f;
-    }
+        .night-light .stream-btn:hover .trailer-btn:hover{
+            background-color: #cd853f;
+        }
 
         .video-modal {
             display: none; /* Hidden by default */
@@ -301,7 +300,7 @@
             right: 10px;
         }
 
-        .stream-btn, .cloudflare-btn {
+        .stream-btn, .trailer-btn {
             padding: 5px 10px;
             margin: 5px;
             border: none;
@@ -352,15 +351,12 @@
                 transform: translateY(-10px) rotate(360deg);
                 filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.4)); /* Add a shadow to enhance the effect */
             }
-        }   
-
+        }
     </style>
 </head>
 <body class="text-black">
-
     <div class="container mx-auto px-4">
-            <h1 class="text-6xl font-bold my-8 text-left">Watermelon Movies 🍉</h1>
-       
+        <h1 class="text-6xl font-bold my-8 text-left">Watermelon Movies 🍉</h1>
         <h2 class="text-left">🤘.The Jews took hollywood...we're stealing it back</h2>
         <div class="melon"></div>
         <div class="relative text-gray-600">
@@ -368,66 +364,65 @@
                 <input type="search" name="search" placeholder="Search" class="bg-white h-10 px-5 pr-10 rounded-full text-sm focus:outline-none">
                 <button type="submit" class="absolute right-0 top-0 mt-3 mr-4">
                     <!-- SVG code -->
-              <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
-                <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
-              </svg>
-            </button>
-          </div>
+                    <svg class="h-4 w-4 fill-current" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 56.966 56.966" style="enable-background:new 0 0 56.966 56.966;" xml:space="preserve" width="512px" height="512px">
+                        <path d="M55.146,51.887L41.588,37.786c3.486-4.144,5.396-9.358,5.396-14.786c0-12.682-10.318-23-23-23s-23,10.318-23,23  s10.318,23,23,23c4.761,0,9.298-1.436,13.177-4.162l13.661,14.208c0.571,0.593,1.339,0.92,2.162,0.92  c0.779,0,1.518-0.297,2.079-0.837C56.255,54.982,56.293,53.08,55.146,51.887z M23.984,6c9.374,0,17,7.626,17,17s-7.626,17-17,17  s-17-7.626-17-17S14.61,6,23.984,6z"/>
+                    </svg>
+                </button>
+            </form>
+        </div>
         <br>
-        
-                <div id="searchResults" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
-                <div id="movies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
-            </div>
-        
-            <!-- Video Modal -->
-            <div id="videoModal" class="video-modal">
-                <div class="video-modal-content">
-                    <span class="close">&times;</span>
-                    <div style="border-radius: 10px; width: 100%; overflow: hidden;">
-                        <iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>
-                    </div>
-                    <div class="flex justify-end items-center mt-4 space-x-4">
-                        <label for="night-light-toggle" class="flex items-center cursor-pointer mt-3">
-                            <div class="relative">
-                                <input type="checkbox" id="night-light-toggle" class="sr-only">
-                                <div class="block bg-yellow-100 w-10 h-6 rounded-full"></div>
-                                <div class="dot-night absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
-                            </div>
-                            <div class="ml-2 mr-2 text-gray-700">Night Light</div>
-                        </label>
-                        <label for="dark-mode-toggle" class="flex items-center cursor-pointer ml-4 mt-3">
-                            <div class="relative">
-                                <input type="checkbox" id="dark-mode-toggle" class="sr-only">
-                                <div class="bg-gray-400 w-10 h-6 rounded-full"></div>
-                                <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
-                            </div>
-                            <div class="mr-2 text-gray-700">Dark Mode</div>
-                        </label>
-                        <button class="share-btn" onclick="navigator.clipboard.writeText(window.location.href)">
-                            Pass the<span class="popcorn">🍿</span>
-                        </button>
-                    </div>
-                </div>
-            </div>
+        <div id="searchResults" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
+        <div id="movies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4"></div>
+    </div>
 
-            <div id="randomMovies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 my-4">
-                <!-- Random movies will load here -->
+    <!-- Video Modal -->
+    <div id="videoModal" class="video-modal">
+        <div class="video-modal-content">
+            <span class="close">&times;</span>
+            <div style="border-radius: 10px; width: 100%; overflow: hidden;">
+                <iframe id="videoIframe" width="100%" height="500px" frameborder="0" allowfullscreen></iframe>
             </div>
-
-                 <!-- Coming Soon Section -->
-        <div id="comingSoon" class="my-8">
-            <h2 class="text-2xl font-bold mb-4 text-left pl-4">Coming Soon</h2>
-            <div
-                class="slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4">
-                <!-- Slider items will be added here by JavaScript -->
+            <div class="flex justify-end items-center mt-4 space-x-4">
+                <label for="night-light-toggle" class="flex items-center cursor-pointer mt-3">
+                    <div class="relative">
+                        <input type="checkbox" id="night-light-toggle" class="sr-only">
+                        <div class="block bg-yellow-100 w-10 h-6 rounded-full"></div>
+                        <div class="dot-night absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
+                    </div>
+                    <div class="ml-2 mr-2 text-gray-700">Night Light</div>
+                </label>
+                <label for="dark-mode-toggle" class="flex items-center cursor-pointer ml-4 mt-3">
+                    <div class="relative">
+                        <input type="checkbox" id="dark-mode-toggle" class="sr-only">
+                        <div class="bg-gray-400 w-10 h-6 rounded-full"></div>
+                        <div class="dot absolute left-1 top-1 bg-white w-4 h-4 rounded-full transition transform"></div>
+                    </div>
+                    <div class="mr-2 text-gray-700">Dark Mode</div>
+                </label>
+                <button class="share-btn" onclick="navigator.clipboard.writeText(window.location.href)">
+                    Pass the<span class="popcorn">🍿</span>
+                </button>
             </div>
         </div>
-        
-            <script>
-                const apiKey = '8bb85bb00bf81f0ad511a7609d736c7f'; // Replace with your TMDB API key
+    </div>
 
+    <div id="randomMovies" class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-4 my-4">
+        <!-- Random movies will load here -->
+    </div>
 
-                document.getElementById('searchForm').addEventListener('submit', function(e) {
+    <!-- Coming Soon Section -->
+    <div id="comingSoon" class="my-8">
+        <h2 class="text-2xl font-bold mb-4 text-left pl-4">Coming Soon</h2>
+        <div class="slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4">
+            <!-- Slider items will be added here by JavaScript -->
+        </div>
+    </div>
+
+    <script>
+        const apiKey = '8bb85bb00bf81f0ad511a7609d736c7f'; // TMDB API Key
+        const youtubeApiKey = 'AIzaSyAG7vJ284HAxvZ5caDhPISIZTPKXZsyKi8'; // Replace with your YouTube API Key
+
+        document.getElementById('searchForm').addEventListener('submit', function(e) {
             e.preventDefault();
             const searchQuery = document.querySelector('[name="search"]').value.trim();
             if (searchQuery) {
@@ -444,104 +439,115 @@
                 });
         }
 
-
         function displaySearchResults(results, containerId) {
-    const container = document.getElementById(containerId);
-    container.innerHTML = ''; // Clear previous results
-    results.forEach(result => {
-        if ((result.media_type === 'movie' || result.media_type === 'tv') && result.poster_path) {
-            const title = result.title || result.name;
-            const imdbId = result.id; // Assuming it fetches the correct ID
-            const posterPath = `https://image.tmdb.org/t/p/w500${result.poster_path}`;
-            const overview = result.overview || 'No description available.';
-            const mediaType = result.media_type;
+            const container = document.getElementById(containerId);
+            container.innerHTML = ''; // Clear previous results
+            results.forEach(result => {
+                if ((result.media_type === 'movie' || result.media_type === 'tv') && result.poster_path) {
+                    const title = result.title || result.name;
+                    const imdbId = result.id; // Assuming it fetches the correct ID
+                    const posterPath = `https://image.tmdb.org/t/p/w500${result.poster_path}`;
+                    const overview = result.overview || 'No description available.';
+                    const mediaType = result.media_type;
 
-            const movieTile = document.createElement('div');
-            movieTile.className = 'movie-tile';
-            movieTile.innerHTML = `
-                <img src="${posterPath}" alt="Poster for ${title}" style="width:100%; height:auto;">
-                <h3>${title}</h3>
-                <p>${overview}</p>
-                <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('${mediaType}', '${imdbId}')">Stream</button>
-            `;
-            container.appendChild(movieTile);
-        }
-    });
-}
-
-
-
-
-
-        
-                const modal = document.getElementById("videoModal");
-                const span = document.getElementsByClassName("close")[0];
-                const videoIframe = document.getElementById("videoIframe");
-        
-                span.onclick = function() {
-                    modal.style.display = "none";
-                    videoIframe.src = "";
+                    const movieTile = document.createElement('div');
+                    movieTile.className = 'movie-tile';
+                    movieTile.innerHTML = `
+                        <img src="${posterPath}" alt="Poster for ${title}" style="width:100%; height:auto;">
+                        <h3>${title}</h3>
+                        <p>${overview}</p>
+                        <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('${mediaType}', '${imdbId}')">Stream</button>
+                        <button class="trailer-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${title}')">Trailer</button>
+                    `;
+                    container.appendChild(movieTile);
                 }
-        
-                window.onclick = function(event) {
-                    if (event.target == modal) {
-                        modal.style.display = "none";
-                        videoIframe.src = "";
+            });
+        }
+
+        function fetchTrailer(title) {
+            const youtubeSearchUrl = `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=1&q=${encodeURIComponent(title + ' trailer')}&key=${youtubeApiKey}`;
+            fetch(youtubeSearchUrl)
+                .then(response => response.json())
+                .then(data => {
+                    if (data.items.length > 0) {
+                        const videoId = data.items[0].id.videoId;
+                        openTrailerModal(videoId);
+                    } else {
+                        alert('Trailer not found.');
                     }
-                }
-        
-                function openModal(mediaType, imdbId) {
-    let baseUrl = 'https://vidsrc.to/embed/';
-    if (mediaType === 'movie') {
-        baseUrl += 'movie/';
-    } else if (mediaType === 'tv') {
-        baseUrl += 'tv/';
-    } else {
-        console.error('Unsupported media type');
-        return;
-    }
-    const videoUrl = baseUrl + imdbId;
-    modal.style.display = "block";
-    videoIframe.src = videoUrl;
-
-    // Update the URL in the address bar
-    const newUrl = `${window.location.pathname}?type=${mediaType}&id=${imdbId}`;
-    window.history.pushState({ path: newUrl }, '', newUrl);
-}
-
-
-                document.addEventListener('DOMContentLoaded', function() {
-    fetchMovies(); // Fetches upcoming movies for the Coming Soon section
-    fetchRandomMovies(); // Fetches random movies for display on page load
-                  // Add event listener for keydown on the entire document
-                  document.addEventListener('keydown', function(e) {
-        // Check if the '/' key is pressed and if no input is currently focused
-        if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
-            // Prevent the default action to avoid typing the '/' character
-            e.preventDefault();
-            // Focus on the search input box
-            document.querySelector('[name="search"]').focus();
+                });
         }
-    });
 
-        // Check URL parameters and open modal if applicable
-        const urlParams = new URLSearchParams(window.location.search);
-    const mediaType = urlParams.get('type');
-    const imdbId = urlParams.get('id');
-    if (mediaType && imdbId) {
-        openModal(mediaType, imdbId);
-    }
-});
+        function openTrailerModal(videoId) {
+            const videoUrl = `https://www.youtube.com/embed/${videoId}`;
+            const modal = document.getElementById("videoModal");
+            const videoIframe = document.getElementById("videoIframe");
 
-function fetchRandomMovies() {
-    fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=en-US&page=1`)
-        .then(response => response.json())
-        .then(data => {
-            displayMovies(data.results, 'randomMovies'); // Ensure this uses the same display function
-        })
-        .catch(error => console.error('Error fetching random movies:', error));
-}
+            modal.style.display = "block";
+            videoIframe.src = videoUrl;
+        }
 
+        const modal = document.getElementById("videoModal");
+        const span = document.getElementsByClassName("close")[0];
+        const videoIframe = document.getElementById("videoIframe");
+
+        span.onclick = function() {
+            modal.style.display = "none";
+            videoIframe.src = "";
+        }
+
+        window.onclick = function(event) {
+            if (event.target == modal) {
+                modal.style.display = "none";
+                videoIframe.src = "";
+            }
+        }
+
+        function openModal(mediaType, imdbId) {
+            let baseUrl = 'https://vidsrc.to/embed/';
+            if (mediaType === 'movie') {
+                baseUrl += 'movie/';
+            } else if (mediaType === 'tv') {
+                baseUrl += 'tv/';
+            } else {
+                console.error('Unsupported media type');
+                return;
+            }
+            const videoUrl = baseUrl + imdbId;
+            modal.style.display = "block";
+            videoIframe.src = videoUrl;
+
+            const newUrl = `${window.location.pathname}?type=${mediaType}&id=${imdbId}`;
+            window.history.pushState({ path: newUrl }, '', newUrl);
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            fetchMovies(); // Fetches upcoming movies for the Coming Soon section
+            fetchRandomMovies(); // Fetches random movies for display on page load
+
+            document.addEventListener('keydown', function(e) {
+                if (e.key === '/' && document.activeElement.tagName !== 'INPUT') {
+                    e.preventDefault();
+                    document.querySelector('[name="search"]').focus();
+                }
+            });
+
+            const urlParams = new URLSearchParams(window.location.search);
+            const mediaType = urlParams.get('type');
+            const imdbId = urlParams.get('id');
+            if (mediaType && imdbId) {
+                openModal(mediaType, imdbId);
+            }
+        });
+
+        function fetchRandomMovies() {
+            fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=en-US&page=1`)
+                .then(response => response.json())
+                .then(data => {
+                    displayMovies(data.results, 'randomMovies');
+                })
+                .catch(error => console.error('Error fetching random movies:', error));
+        }
 
         function fetchMovies() {
             fetch(`https://api.themoviedb.org/3/movie/upcoming?api_key=${apiKey}&language=en`)
@@ -551,77 +557,76 @@ function fetchRandomMovies() {
         }
 
         function displayComingSoon(movies) {
-    const container = document.getElementById('comingSoon');
-    container.innerHTML = '';
-    const slider = document.createElement('div');
-    slider.className = 'slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4';
-    movies.forEach(movie => {
-        const movieCard = document.createElement('div');
-        movieCard.className = 'slider-item';
-        movieCard.innerHTML = `
-            <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
-            <h3 class="text-lg font-semibold mt-2">${movie.title}</h3>
-            <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('https://vidsrc.to/embed/movie/${movie.id}')">Stream</button>
-        `;
-        slider.appendChild(movieCard);
-    });
-    container.appendChild(slider);
-
-}
-function displayMovies(movies, containerId) {
-    const container = document.getElementById(containerId);
-    container.innerHTML = ''; // Clear previous results
-    movies.forEach(movie => {
-        if (movie.poster_path) { // Ensure there is a poster to display
-            const movieTile = document.createElement('div');
-            movieTile.className = 'movie-tile';
-            movieTile.innerHTML = `
-                <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
-                <h3>${movie.title}</h3>
-                <p>${movie.overview || 'No description available.'}</p>
-                <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('movie', '${movie.id}')">Stream</button>
-            `;
-            container.appendChild(movieTile);
+            const container = document.getElementById('comingSoon');
+            container.innerHTML = '';
+            const slider = document.createElement('div');
+            slider.className = 'slider-container flex overflow-x-auto pl-4 pr-2 py-2 space-x-4';
+            movies.forEach(movie => {
+                const movieCard = document.createElement('div');
+                movieCard.className = 'slider-item';
+                movieCard.innerHTML = `
+                    <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
+                    <h3 class="text-lg font-semibold mt-2">${movie.title}</h3>
+                    <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('movie', '${movie.id}')">Stream</button>
+                `;
+                slider.appendChild(movieCard);
+            });
+            container.appendChild(slider);
         }
-    });
-}
 
-
- // JavaScript to handle dark mode switch
- const toggleSwitch = document.getElementById('dark-mode-toggle');
-    const nightLightSwitch = document.getElementById('night-light-toggle');
-    const bodyElement = document.body;
-    const dotElement = document.querySelector('.dot');
-    const dotNightElement = document.querySelector('.dot-night');
-    const videoModalContent = document.querySelector('.video-modal-content');
-
-    toggleSwitch.addEventListener('change', () => {
-        if (toggleSwitch.checked) {
-            bodyElement.classList.add('dark-mode');
-            dotElement.classList.add('translate-x-full');
-            dotElement.classList.add('bg-gray-800'); // Optional: change dot color in dark mode
-            videoModalContent.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; // Transparent modal box
-            document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.9)'; // Darken background
-        } else {
-            bodyElement.classList.remove('dark-mode');
-            dotElement.classList.remove('translate-x-full');
-            dotElement.classList.remove('bg-gray-800'); // Optional: revert dot color
-            videoModalContent.style.backgroundColor = 'rgba(255, 255, 255, 1)'; // Revert modal box color
-            document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.4)'; // Revert background color
+        function displayMovies(movies, containerId) {
+            const container = document.getElementById(containerId);
+            container.innerHTML = ''; // Clear previous results
+            movies.forEach(movie => {
+                if (movie.poster_path) {
+                    const movieTile = document.createElement('div');
+                    movieTile.className = 'movie-tile';
+                    movieTile.innerHTML = `
+                        <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}" class="rounded-lg w-full h-auto">
+                        <h3>${movie.title}</h3>
+                        <p>${movie.overview || 'No description available.'}</p>
+                        <button class="stream-btn bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded" onclick="openModal('movie', '${movie.id}')">Stream</button>
+                        <button class="trailer-btn bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" onclick="fetchTrailer('${movie.title}')">Trailer</button>
+                    `;
+                    container.appendChild(movieTile);
+                }
+            });
         }
-    });
 
-    nightLightSwitch.addEventListener('change', () => {
-        if (nightLightSwitch.checked) {
-            bodyElement.classList.add('night-light');
-            dotNightElement.classList.add('translate-x-full');
-            dotNightElement.classList.add('bg-yellow-500'); // Optional: change dot color in night light mode
-        } else {
-            bodyElement.classList.remove('night-light');
-            dotNightElement.classList.remove('translate-x-full');
-            dotNightElement.classList.remove('bg-yellow-500'); // Optional: revert dot color
-        }
-    });
-</script>
-        </body>
-        </html>
+        const toggleSwitch = document.getElementById('dark-mode-toggle');
+        const nightLightSwitch = document.getElementById('night-light-toggle');
+        const bodyElement = document.body;
+        const dotElement = document.querySelector('.dot');
+        const dotNightElement = document.querySelector('.dot-night');
+        const videoModalContent = document.querySelector('.video-modal-content');
+
+        toggleSwitch.addEventListener('change', () => {
+            if (toggleSwitch.checked) {
+                bodyElement.classList.add('dark-mode');
+                dotElement.classList.add('translate-x-full');
+                dotElement.classList.add('bg-gray-800');
+                videoModalContent.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+                document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.9)';
+            } else {
+                bodyElement.classList.remove('dark-mode');
+                dotElement.classList.remove('translate-x-full');
+                dotElement.classList.remove('bg-gray-800');
+                videoModalContent.style.backgroundColor = 'rgba(255, 255, 255, 1)';
+                document.querySelector('.video-modal').style.backgroundColor = 'rgba(0, 0, 0, 0.4)';
+            }
+        });
+
+        nightLightSwitch.addEventListener('change', () => {
+            if (nightLightSwitch.checked) {
+                bodyElement.classList.add('night-light');
+                dotNightElement.classList.add('translate-x-full');
+                dotNightElement.classList.add('bg-yellow-500');
+            } else {
+                bodyElement.classList.remove('night-light');
+                dotNightElement.classList.remove('translate-x-full');
+                dotNightElement.classList.remove('bg-yellow-500');
+            }
+        });
+    </script>
+</body>
+</html>
