@@ -1,10 +1,23 @@
-const toggleBtn = document.querySelector('.btn');
+const toggleSwitch = document.querySelector('#theme-toggle');
 const articlesContainer = document.querySelector('.articles');
 
-toggleBtn.addEventListener('click', () => {
+// Check for saved theme preference or default to light mode
+const currentTheme = localStorage.getItem('theme') || 'light';
+if (currentTheme === 'dark') {
+  document.documentElement.classList.add('dark-theme');
+  toggleSwitch.checked = true;
+}
+
+// Toggle theme and save preference
+toggleSwitch.addEventListener('change', () => {
   document.documentElement.classList.toggle('dark-theme');
+  const theme = document.documentElement.classList.contains('dark-theme')
+    ? 'dark'
+    : 'light';
+  localStorage.setItem('theme', theme);
 });
 
+// Display articles
 const articlesData = articles
   .map((article) => {
     const { title, date, length, snippet } = article;
@@ -22,4 +35,4 @@ const articlesData = articles
   })
   .join('');
 
-articlesContainer.innerHTML = articlesData;
+articlesContainer.innerHTML = articlesData;
@@ -4,21 +4,26 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Dark Mode</title>
+    <meta name="description" content="Dark mode toggle blog with modern UI" />
+    <title>Dark Mode - overreacted</title>
     <link rel="stylesheet" href="./styles.css" />
   </head>
   <body>
     <main>
       <nav>
         <div class="nav-center">
           <span>overreacted</span>
-          <button class="btn">toggle</button>
+          <div class="toggle-container">
+            <label for="theme-toggle" class="toggle-label">Dark Mode</label>
+            <label class="switch">
+              <input type="checkbox" id="theme-toggle" aria-label="Toggle dark mode" />
+              <span class="slider"></span>
+            </label>
+          </div>
         </div>
       </nav>
       <section class="articles">
-        <!-- single post -->
-
-        <!-- end of single post -->
+        <!-- Articles will be dynamically inserted here -->
       </section>
     </main>
     <!-- moment -->
@@ -33,4 +38,4 @@
     <!-- logic -->
     <script src="./app.js"></script>
   </body>
-</html>
+</html>