diff --git a/templates/index.html b/templates/index.html
index 6e74c62..dab7ecd 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -14,9 +14,21 @@
 
         body {
             font-family: 'Inter', system-ui, sans-serif;
-            background-color: #f0f0f0;
+            background-color: #ffffff;
             margin: 0;
             padding: 20px;
+            color: var(--dark);
+        }
+        header {
+            background-color: rgba(237, 237, 237, 0.438);
+            backdrop-filter: blur(15px);
+            padding: 5vmax;
+            border-radius: 15px;
+            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+        }
+        .dark-theme-body {
+            background-color: rgb(41, 41, 41);
+            color: #A7CCED;
         }
 
         .container {
@@ -34,23 +46,23 @@
         }
 
         .title {
+            font-size: 6vmin;
             margin: 0;
             flex: 1;
-            min-width: 300px;
+            min-width: 40vmax;
         }
 
         .search-container {
             flex: 1;
-            min-width: 300px;
+            min-width: 30vmin;
             position: relative;
         }
 
         .search-input {
-            width: 100%;
+            width: 90%;
             padding: 12px;
             border: 2px solid var(--dark);
             border-radius: 6px;
-            font-size: 16px;
             background: white;
             box-shadow: 4px 4px 0px var(--dark);
         }
@@ -88,12 +100,21 @@
             box-shadow: 5px 5px 0px var(--dark);
             transition: transform 0.2s;
         }
+        .select-box-dark {
+            background-color: #b7dedf;
+            box-shadow: 5px 5px 0px #878787;
+        }
 
         .select-box:hover {
             transform: translate(-2px, -2px);
             box-shadow: 7px 7px 0px var(--dark);
         }
 
+        .select-box-dark:hover {
+            transform: translate(-2px, -2px);
+            box-shadow: 7px 7px 0px #878787;
+        }
+
         select {
             width: 100%;
             padding: 10px;
@@ -247,45 +268,69 @@
             padding: 20px;
         }
 
-        .bengaluru-button {
+        .quick-access-container button {
             background: var(--secondary);
             color: var(--dark);
             border: 3px solid var(--dark);
             padding: 15px 30px;
-            font-size: 1.1rem;
+            font-size: 4vmin;
             border-radius: 8px;
             cursor: pointer;
             box-shadow: 5px 5px 0px var(--dark);
             transition: transform 0.2s;
-            min-width: 200px;
+            width: 30vmax;
         }
 
-        .bengaluru-button:hover {
+        .quick-access-container button:hover {
             transform: translate(-2px, -2px);
             box-shadow: 7px 7px 0px var(--dark);
         }
 
         .famous-cities-title {
             text-align: center;
+            font-size: 5vmin;
             margin: 20px 0;
             color: var(--dark);
         }
+        .toggle-theme {
+            all: unset;
+            background-color: var(--primary);
+            padding: 1vmin 3vmin;
+            color: white;
+            border-radius: 5px;
+            transition: all 0.2s;
+            box-shadow: 0.5vmin 0.5vmin 0 var(--dark);
+        }
+        .toggle-theme:hover{
+            transform: translate(-2px, -2px);
+            box-shadow: 1vmin 1vmin 0px var(--dark);
+        }
+        .dark-input {
+            background-color: #BEE7E8;
+            box-shadow: 4px 4px 0px #878787;
+        }
+        .dark-input::placeholder {
+            color: rgb(63, 63, 63);
+        }
     </style>
 </head>
 <body>
     <div class="container">
+    <header>
         <div class="header-container">
             <h1 class="title">Panchayat Member Directory</h1>
             <div class="search-container">
                 <input 
-                    type="text" 
-                    id="globalSearch" 
-                    class="search-input" 
-                    placeholder="Search state, district, taluk, village...">
+                type="text" 
+                id="globalSearch" 
+                class="search-input" 
+                placeholder="Search state, district, taluk, village...">
                 <div id="searchResults" class="search-results-container" style="display: none;">
                 </div>
             </div>
+            <button class="toggle-theme">&#9788;</button>
         </div>
+    </header>
         <h3 class="famous-cities-title">Famous Cities</h3>
         
         <div class="quick-access-container">
@@ -709,6 +754,38 @@ <h3>${member.name}</h3>
                 alert('Error performing search');
             }
         }
+        
+        //theme toggler(dark/light) for main page
+        
+        let isDarkTheme = false; //theme is light by default
+        const themeBtn = document.querySelector('.toggle-theme');
+
+        themeBtn.addEventListener('click',() => {
+            document.body.classList.toggle('dark-theme-body');
+            const body_style = document.body.style;
+            const input = document.querySelector('input');
+            const themeBtn = document.querySelector('.toggle-theme');
+            const h3 = document.querySelector('h3'); //'famous cities' text
+            const select_box = document.querySelectorAll('.select-box');
+
+            if(isDarkTheme) {
+                input.classList.remove('dark-input');
+                themeBtn.innerHTML = "&#9788;";
+                h3.style.color = 'var(--dark)'
+                for(let box of select_box) {
+                    box.classList.remove("select-box-dark");
+                }
+            }else {
+                input.classList.add('dark-input');
+                themeBtn.innerHTML = "&#9790;";
+                h3.style.color = '#a6cbf0';
+                for(let box of select_box) {
+                    box.classList.add("select-box-dark");
+                }
+            }
+
+            isDarkTheme = !isDarkTheme;
+        })
     </script>
 </body>
 </html>
