diff --git a/package.json b/package.json
index d2605742e..d92d39eb9 100644
--- a/package.json
+++ b/package.json
@@ -164,4 +164,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5.9.3"
   }
-}
+}
\ No newline at end of file
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 835dc3736..cb91ecc8c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14972,4 +14972,4 @@ packages:
 
   /yocto-queue@0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}
-    engines: {node: '>=10'}
+    engines: {node: '>=10'}
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index a2073210f..a27915d6c 100644
--- a/src/App.css
+++ b/src/App.css
@@ -34,7 +34,10 @@ textarea {
   --color-brand-primary-rgb: 0, 244, 252;
   --color-brand-primary-alt: #61dafb;
   --color-brand-primary-dark: #00aada;
-
+  --bg-color: #121212;
+  --text-color: #f1f1f1;
+  --header-bg: #1e1e1e;
+  --border-color: #444444;
   /* Neutral */
   --color-neutral-10: #ffffff;
   --color-neutral-20: #f6f6f9;
@@ -104,11 +107,16 @@ textarea {
   --color-play-level-3: 229, 57, 53;
 }
 
+[data-theme='light'] {
+  --bg-color: #ffffff;
+  --text-color: #333333;
+  --header-bg: #f8f9fa;
+  --border-color: #dddddd;
+}
+
 html,
 body {
   height: auto;
-  padding: 0;
-  margin: 0;
   font-family: var(--ff-default);
   line-height: 1.6;
   font-size: 16px;
@@ -117,11 +125,40 @@ body {
   scroll-behavior: smooth;
 }
 
+html, body, #root {
+  overflow-x: hidden; 
+  width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
 body * {
   box-sizing: border-box;
   font-family: var(--ff-default);
 }
 
+body {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  transition: background-color 0.3s ease, color 0.3s ease; 
+}
+
+.theme-toggle-btn {
+  background: transparent;
+  border: 1px solid var(--border-color);
+  color: var(--text-color);
+  padding: 0.4rem 0.8rem;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 600;
+  transition: all 0.3s ease;
+}
+
+.theme-toggle-btn:hover {
+  background-color: var(--text-color);
+  color: var(--bg-color);
+}
+
 .app-container {
   height: 100vh;
   display: flex;
diff --git a/src/common/header/Header.jsx b/src/common/header/Header.jsx
index 919f3bcd6..e7da5a8b4 100644
--- a/src/common/header/Header.jsx
+++ b/src/common/header/Header.jsx
@@ -1,14 +1,15 @@
 import HeaderNav from './HeaderNav';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useRef, useState, useContext } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import Countdown from 'react-countdown';
 import './header.css';
 import { SearchBox } from 'common/search/SearchBox';
+import { ThemeContext } from 'common/theme/ThemeContext';
 
 const Header = () => {
   const location = useLocation();
   const pathName = location.pathname;
-
+  const { theme, toggleTheme } = useContext(ThemeContext);
   const [reset, setReset] = useState({ search: false, filter: false });
   const [showNav, setShowNav] = useState(true);
   const lastScrollY = useRef(0);
@@ -163,7 +164,11 @@ const Header = () => {
         <div className="app-header-search pl-0 xl:pl-[130px]">
           {showHideBits.showSearch && <SearchBox reset={reset} />}
         </div>
-
+        <div className="header-actions">
+          <button aria-label="Toggle Theme" className="theme-toggle-btn" onClick={toggleTheme}>
+            {theme === 'light' ? '🌙 Dark' : '☀️ Light'}
+          </button>
+        </div>
         <HeaderNav showBrowse={showHideBits.showBrowse} />
       </header>
     </div>
diff --git a/src/common/home/home.css b/src/common/home/home.css
index 3a12a3df9..3af570b16 100644
--- a/src/common/home/home.css
+++ b/src/common/home/home.css
@@ -10,12 +10,17 @@
   background: -webkit-linear-gradient(180deg, rgba(1, 4, 38, 1) 0%, rgba(76, 91, 94, 1) 100%);
   background: linear-gradient(180deg, rgba(1, 4, 38, 1) 0%, rgba(76, 91, 94, 1) 100%);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#010426", endColorstr="#4c5b5e", GradientType=1);
-  width: 100%;
   overflow-x: hidden;
   min-height: 100vh;
   padding-top: 32px; /* extra offset for activity banner on home page */
 }
 
+.app-home-body, .home-banner {
+  width: 100%; 
+  margin-left: 0; 
+  margin-right: 0;
+}
+
 .app-home-body .app-home-body-content {
   margin-bottom: 4rem;
   z-index: 5;
diff --git a/src/common/theme/ThemeContext.jsx b/src/common/theme/ThemeContext.jsx
new file mode 100644
index 000000000..06268e81e
--- /dev/null
+++ b/src/common/theme/ThemeContext.jsx
@@ -0,0 +1,22 @@
+import React, { createContext, useState, useEffect } from 'react';
+
+export const ThemeContext = createContext();
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState(() => {
+    const savedTheme = localStorage.getItem('theme');
+
+    return savedTheme ? savedTheme : 'dark';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+    document.documentElement.setAttribute('data-theme', theme);
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light'));
+  };
+
+  return <ThemeContext.Provider value={{ theme, toggleTheme }}>{children}</ThemeContext.Provider>;
+};
diff --git a/src/index.jsx b/src/index.jsx
index e7f29a385..4fe62faa2 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -7,6 +7,7 @@ import register from './registerServiceWorker';
 import ErrorBoundry from './ErrorBoundary/ErrorBoundary';
 import Notification from 'common/components/Notification';
 import 'react-toastify/dist/ReactToastify.css';
+import { ThemeProvider } from 'common/theme/ThemeContext';
 
 /** removing console statement in react prod build */
 /* eslint-disable no-console */
@@ -37,14 +38,16 @@ const Index = () => {
   };
 
   return (
-    // <React.StrictMode>
-    <ErrorBoundry>
-      <SearchContextProvider value={value}>
-        <RouteDefs />
-        <Notification />
-      </SearchContextProvider>
-    </ErrorBoundry>
-    // </React.StrictMode>
+    <ThemeProvider>
+      {/* <React.StrictMode> */}
+      <ErrorBoundry>
+        <SearchContextProvider value={value}>
+          <RouteDefs />
+          <Notification />
+        </SearchContextProvider>
+      </ErrorBoundry>
+      {/* </React.StrictMode> */}
+    </ThemeProvider>
   );
 };
 const container = document.getElementById('root');