diff --git a/core/templates/base.html b/core/templates/base.html
index 5a629d3..c7a4695 100644
--- a/core/templates/base.html
+++ b/core/templates/base.html
@@ -15,13 +15,13 @@
             --bs-body-font-family: 'Space Grotesk', sans-serif;
         }
 
-        body {
-            background-color: #ffffff;
-            color: #000000;
+        /* Ensure smooth transition for theme change */
+        html, body {
+            transition: background-color 0.3s ease, color 0.3s ease;
         }
 
         .navbar {
-            border-bottom: 2px solid #000;
+            border-bottom: 2px solid var(--bw-border, #000);
         }
 
         .navbar-brand {
@@ -38,45 +38,106 @@
         }
 
         footer {
-            border-top: 2px solid #000;
+            border-top: 2px solid var(--bw-border, #000);
             margin-top: 5rem;
             padding: 3rem 0;
         }
+
+        /* Theme Toggle Button Specifics */
+        .theme-toggle {
+            cursor: pointer;
+            border: 2px solid var(--bw-text, #000);
+            background: var(--bw-bg, #fff);
+            color: var(--bw-text, #000);
+            padding: 5px 15px;
+            font-family: 'JetBrains Mono', monospace;
+            font-weight: 700;
+            margin-left: 15px;
+            transition: all 0.2s ease;
+            text-transform: uppercase;
+            font-size: 0.8rem;
+        }
+
+        .theme-toggle:hover {
+            background: var(--bw-text, #000);
+            color: var(--bw-bg, #fff);
+        }
     </style>
+    <script>
+        // Check for saved theme preference or use system preference
+        const getPreferredTheme = () => {
+            const savedTheme = localStorage.getItem('theme');
+            if (savedTheme) {
+                return savedTheme;
+            }
+            return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        };
+
+        const setTheme = (theme) => {
+            document.documentElement.setAttribute('data-theme', theme);
+            localStorage.setItem('theme', theme);
+            
+            // Update button text
+            const themeToggle = document.getElementById('theme-toggle');
+            if (themeToggle) {
+                themeToggle.innerText = theme === 'dark' ? 'W/B' : 'B/W';
+            }
+        };
+
+        // Initialize theme before page load to prevent flicker
+        document.documentElement.setAttribute('data-theme', getPreferredTheme());
+
+        window.addEventListener('DOMContentLoaded', () => {
+            const themeToggle = document.getElementById('theme-toggle');
+            if (themeToggle) {
+                // Set initial button text
+                themeToggle.innerText = getPreferredTheme() === 'dark' ? 'W/B' : 'B/W';
+                
+                themeToggle.addEventListener('click', () => {
+                    const currentTheme = document.documentElement.getAttribute('data-theme');
+                    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+                    setTheme(newTheme);
+                });
+            }
+        });
+    </script>
 </head>
-<body>
-    <nav class="navbar navbar-expand-lg py-3 sticky-top bg-white">
+<body class="bw-bg bw-text">
+    <nav class="navbar navbar-expand-lg py-3 sticky-top bw-bg">
         <div class="container">
-            <a class="navbar-brand" href="{% url 'index' %}">DevLearn</a>
-            <button class="navbar-toggler border-2 rounded-0" type="button" data-bs-toggle="collapse" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+            <a class="navbar-brand bw-text" href="{% url 'index' %}">DevLearn</a>
+            <button class="navbar-toggler border-2 rounded-0 bw-border" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                 <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarNav">
                 <ul class="navbar-nav ms-auto align-items-center">
                     <li class="nav-item">
-                        <a class="nav-link px-3" href="{% url 'index' %}">Courses</a>
+                        <a class="nav-link px-3 bw-text" href="{% url 'index' %}">Courses</a>
                     </li>
                     {% if user.is_authenticated %}
                         <li class="nav-item">
-                            <a class="nav-link px-3" href="{% url 'dashboard' %}">Dashboard</a>
+                            <a class="nav-link px-3 bw-text" href="{% url 'dashboard' %}">Dashboard</a>
                         </li>
                         <li class="nav-item">
-                            <a class="nav-link px-3" href="{% url 'profile' %}">Profile</a>
+                            <a class="nav-link px-3 bw-text" href="{% url 'profile' %}">Profile</a>
                         </li>
                         <li class="nav-item ms-lg-2">
                             <form method="post" action="{% url 'logout' %}" class="d-inline">
                                 {% csrf_token %}
-                                <button type="submit" class="btn btn-dark rounded-0 px-4 text-uppercase fw-bold small">Logout</button>
+                                <button type="submit" class="btn btn-bw rounded-0 px-4 text-uppercase fw-bold small">Logout</button>
                             </form>
                         </li>
                     {% else %}
                         <li class="nav-item">
-                            <a class="nav-link px-3" href="{% url 'login' %}">Login</a>
+                            <a class="nav-link px-3 bw-text" href="{% url 'login' %}">Login</a>
                         </li>
                         <li class="nav-item ms-lg-2">
-                            <a class="btn btn-dark rounded-0 px-4 text-uppercase fw-bold small" href="{% url 'signup' %}">Join Now</a>
+                            <a class="btn btn-bw rounded-0 px-4 text-uppercase fw-bold small" href="{% url 'signup' %}">Join Now</a>
                         </li>
                     {% endif %}
+                    <li class="nav-item">
+                        <button id="theme-toggle" class="theme-toggle">B/W</button>
+                    </li>
                 </ul>
             </div>
         </div>
@@ -86,7 +147,7 @@
         {% if messages %}
         <div class="container mt-3">
             {% for message in messages %}
-            <div class="alert alert-{{ message.tags }} alert-dismissible fade show rounded-0 border-2" role="alert">
+            <div class="alert alert-bw alert-dismissible fade show rounded-0 border-2" role="alert">
                 {{ message }}
                 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
             </div>
@@ -98,12 +159,12 @@
         {% endblock %}
     </main>
 
-    <footer class="bg-white">
+    <footer class="bw-bg bw-border">
         <div class="container text-center">
-            <p class="fw-bold text-uppercase small mb-0">© 2026 DevLearn. Built for developers by developers.</p>
+            <p class="fw-bold text-uppercase small mb-0 bw-text">© 2026 DevLearn. Built for developers by developers.</p>
         </div>
     </footer>
 
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 </body>
-</html>
+</html>
\ No newline at end of file
