diff --git a/frontend/index.html b/frontend/index.html
index c3f97ab..c8a905c 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -8,87 +8,162 @@
     <title>LeetCode Leaderboard</title>
 </head>
 <body class="bg-gray-900 text-white p-5">
-    <!-- <canvas id="myChart" style="width:100%;max-width:600px"></canvas> -->
+    <div class="fixed top-5 right-5">
+        <button id="toggleMode" class="bg-blue-500 text-white py-2 px-4 rounded">
+            Switch to Light Mode
+        </button>
+    </div>
+
+    <div id="submissionDisplay" class="mt-5 mb-5">
+        <div class="text-center text-xl">
+            <div id="submissionText" class="inline-block whitespace-nowrap overflow-hidden">
+                Loading recent submissions...
+            </div>
+            <div id="submissionUsernames" class="inline-block ml-4">By: N/A</div>
+        </div>
+    </div>
+
     <div class="container mx-auto my-10">
-        <div class="">
-            <!-- Leaderboard -->
-            <div class="col-span-2 bg-gray-800 rounded-lg shadow-md p-6 overflow-x-auto">
-                <div class="flex justify-between items-center mb-6">
-                    <h1 class="text-4xl font-bold">TBPPP Leaderboard</h1>
-                    <div class="flex gap-4 items-center">
-                        <select id="section-filter" class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
-                            <option value="all">All Sections</option>
-                        </select>
-                        <button id="export-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded flex items-center transition duration-150 ease-in-out">
-                            <i class="fas fa-download mr-2"></i> Export to CSV
-                        </button>
-                    </div>
+        <div class="col-span-2 bg-gray-800 rounded-lg shadow-md p-6 overflow-x-auto">
+            <div class="flex justify-between items-center mb-6">
+                <h1 class="text-4xl font-bold">TBPPP Leaderboard</h1>
+                <div class="flex gap-4 items-center">
+                    <select id="section-filter" class="bg-gray-700 text-white px-4 py-2 rounded hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500">
+                        <option value="all">All Sections</option>
+                    </select>
+                    <button id="export-btn" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded flex items-center transition duration-150 ease-in-out">
+                        <i class="fas fa-download mr-2"></i> Export to CSV
+                    </button>
                 </div>
-                <table class="min-w-full bg-gray-900 rounded-lg overflow-hidden shadow-md">
-                    <thead>
-                        <tr class="bg-gray-700">
-                            <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rank</th>
-                            <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Roll Number</th>
-                            <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Up</th>
-                            <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Name</th>
-                            <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
-                                Section
-                                <button id="sort-section" class="ml-2 hover:text-white">
-                                    <i class="fas fa-sort"></i>
-                                </button>
-                            </th>
-                            <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
-                                Total Solved
-                                <button id="sort-total" class="ml-2 hover:text-white">
-                                    <i class="fas fa-sort"></i>
-                                </button>
-                            </th>
-                            <th class="p-4 text-left text-xs font-medium text-green-400 uppercase tracking-wider">
-                                Easy
-                                <button id="sort-easy" class="ml-2 hover:text-white">
-                                    <i class="fas fa-sort"></i>
-                                </button>
-                            </th>
-                            <th class="p-4 text-left text-xs font-medium text-yellow-400 uppercase tracking-wider">
-                                Medium
-                                <button id="sort-medium" class="ml-2 hover:text-white">
-                                    <i class="fas fa-sort"></i>
-                                </button>
-                            </th>
-                            <th class="p-4 text-left text-xs font-medium text-red-400 uppercase tracking-wider">
-                                Hard
-                                <button id="sort-hard" class="ml-2 hover:text-white">
-                                    <i class="fas fa-sort"></i>
-                                </button>
-                            </th>
-                            <th class="p-4 text-left text-xs font-medium text-red-400 uppercase tracking-wider">
-                                Last question
-                            </th>
-                        </tr>
-                    </thead>
-                    <tbody id="leaderboard-body">
-                        <!-- Data will be dynamically added here -->
-                    </tbody>
-                </table>
-
-                <!-- Loading State -->
-                <div id="loading-state" class="hidden">
-                    <div class="flex justify-center items-center p-8">
-                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
-                    </div>
+            </div>
+            <table class="min-w-full bg-gray-900 rounded-lg overflow-hidden shadow-md">
+                <thead>
+                    <tr class="bg-gray-700">
+                        <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Rank</th>
+                        <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Roll Number</th>
+                        <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Up</th>
+                        <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Name</th>
+                        <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Section</th>
+                        <th class="p-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Total Solved</th>
+                        <th class="p-4 text-left text-xs font-medium text-green-400 uppercase tracking-wider">Easy</th>
+                        <th class="p-4 text-left text-xs font-medium text-yellow-400 uppercase tracking-wider">Medium</th>
+                        <th class="p-4 text-left text-xs font-medium text-red-400 uppercase tracking-wider">Hard</th>
+                        <th class="p-4 text-left text-xs font-medium text-red-400 uppercase tracking-wider">Last question</th>
+                    </tr>
+                </thead>
+                <tbody id="leaderboard-body">
+
+                </tbody>
+            </table>
+
+            <div id="loading-state" class="hidden">
+                <div class="flex justify-center items-center p-8">
+                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white"></div>
                 </div>
+            </div>
 
-                <!-- Error State -->
-                <div id="error-state" class="hidden">
-                    <div class="text-center p-8 text-red-500">
-                        <i class="fas fa-exclamation-circle text-2xl mb-2"></i>
-                        <p>Error loading data. Please try again later.</p>
-                    </div>
+            <div id="error-state" class="hidden">
+                <div class="text-center p-8 text-red-500">
+                    <i class="fas fa-exclamation-circle text-2xl mb-2"></i>
+                    <p>Error loading data. Please try again later.</p>
                 </div>
             </div>
         </div>
     </div>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
     <script src="index.js"></script>
+
+    <script>
+        const toggleModeButton = document.getElementById('toggleMode');
+        let isDarkMode = true; 
+
+        const body = document.body;
+        const submissionText = document.getElementById('submissionText');
+        const submissionUsernames = document.getElementById('submissionUsernames');
+        const leaderboardBody = document.getElementById('leaderboard-body');
+
+        toggleModeButton.addEventListener('click', () => {
+            if (isDarkMode) {
+                body.classList.remove('bg-gray-900', 'text-white');
+                body.classList.add('bg-white', 'text-gray-900');
+                submissionText.classList.remove('text-white');
+                submissionText.classList.add('text-gray-900');
+                submissionUsernames.classList.remove('text-white');
+                submissionUsernames.classList.add('text-gray-900');
+                leaderboardBody.classList.remove('bg-gray-900', 'text-white');
+                leaderboardBody.classList.add('bg-gray-100', 'text-gray-900');
+                document.querySelectorAll("table th, table td").forEach(cell => {
+                    cell.classList.remove('text-white');
+                    cell.classList.add('text-gray-900');
+                });
+                toggleModeButton.textContent = 'Switch to Dark Mode';
+            } else {
+                body.classList.remove('bg-white', 'text-gray-900');
+                body.classList.add('bg-gray-900', 'text-white');
+                submissionText.classList.remove('text-gray-900');
+                submissionText.classList.add('text-white');
+                submissionUsernames.classList.remove('text-gray-900');
+                submissionUsernames.classList.add('text-white');
+                leaderboardBody.classList.remove('bg-gray-100', 'text-gray-900');
+                leaderboardBody.classList.add('bg-gray-900', 'text-white');
+                document.querySelectorAll("table th, table td").forEach(cell => {
+                    cell.classList.remove('text-gray-900');
+                    cell.classList.add('text-white');
+                });
+                toggleModeButton.textContent = 'Switch to Light Mode';
+            }
+            isDarkMode = !isDarkMode; 
+        });
+
+        async function fetchRecentSubmissions() {
+    try {
+        
+        const response = await fetch('data.json');
+        const data = await response.json();
+
+        
+        if (data && Array.isArray(data.users)) {
+            const now = new Date();
+            const twentyFourHoursAgo = now.getTime() - (24 * 60 * 60 * 1000);
+
+           
+            const usernamesWithRecentSubmissions = data.users.filter(user => {
+       
+                return user.recentSubmissions.some(submission => {
+                    const submissionTime = new Date(submission.timestamp * 1000).getTime(); 
+                    return submissionTime >= twentyFourHoursAgo; 
+                });
+            }).map(user => user.username);
+
+            
+            if (usernamesWithRecentSubmissions.length > 0) {
+                document.getElementById('submissionText').textContent = "Users with Submissions in the Last 24 Hours:";
+                submissionUsernames.innerHTML = usernamesWithRecentSubmissions.join(', ');
+            } else {
+               
+                document.getElementById('submissionText').textContent = "No submissions within the last 24 hours.";
+                submissionUsernames.textContent = "By: N/A";
+            }
+        } else {
+           
+            document.getElementById('submissionText').textContent = "No data available.";
+            submissionUsernames.textContent = "By: N/A";
+        }
+    } catch (error) {
+       
+        console.error("Error fetching data:", error);
+        document.getElementById('submissionText').textContent = "Error fetching data.";
+        submissionUsernames.textContent = "By: N/A";
+    }
+}
+
+
+fetchRecentSubmissions();
+
+
+setInterval(fetchRecentSubmissions, 6000000);
+
+    </script>
 </body>
-</html>
\ No newline at end of file
+</html>
