diff --git a/demo-app/src/client/Components/Home.tsx b/demo-app/src/client/Components/Home.tsx
index 22f2d1f4d..9952f9e29 100644
--- a/demo-app/src/client/Components/Home.tsx
+++ b/demo-app/src/client/Components/Home.tsx
@@ -12,9 +12,10 @@ function Home(): JSX.Element {
       style={{
         backgroundColor: theme.backgroundColor,
         color: theme.textColor,
+        boxShadow: `0 4px 6px ${theme.backgroundColor === '#1a202c' ? 'rgba(255, 255, 255, 0.1)' : 'rgba(0, 0, 0, 0.1)'}`,
       }}
     >
-      <h2>REACTIME - DEMO APP</h2>
+      <h2 style={{ color: theme.textColor }}>REACTIME - DEMO APP</h2>
 
       {user ? (
         <div>
@@ -24,10 +25,6 @@ function Home(): JSX.Element {
             style={{
               backgroundColor: theme.primaryColor,
               color: theme.backgroundColor,
-              padding: '8px 16px',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
             }}
           >
             Logout
@@ -41,10 +38,6 @@ function Home(): JSX.Element {
             style={{
               backgroundColor: theme.primaryColor,
               color: theme.backgroundColor,
-              padding: '8px 16px',
-              border: 'none',
-              borderRadius: '4px',
-              cursor: 'pointer',
             }}
           >
             Login as Test User
@@ -54,24 +47,14 @@ function Home(): JSX.Element {
             style={{
               backgroundColor: theme.secondaryColor,
               color: theme.backgroundColor,
-              padding: '8px 16px',
-              border: 'none',
-              borderRadius: '4px',
               marginLeft: '8px',
-              cursor: 'pointer',
             }}
           >
             Login as Admin
           </button>
         </div>
       )}
-
-      <p>
-        "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-        ut labore et dolore magna aliqua..."
-      </p>
     </div>
   );
 }
-
 export default Home;
diff --git a/demo-app/src/client/Components/Nav.tsx b/demo-app/src/client/Components/Nav.tsx
index 53e12d553..274c5ae39 100644
--- a/demo-app/src/client/Components/Nav.tsx
+++ b/demo-app/src/client/Components/Nav.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import ThemeToggle from './ThemeToggle';
 
 function Nav(): JSX.Element {
   return (
@@ -16,6 +17,7 @@ function Nav(): JSX.Element {
       <Link className='link' to='/reducer'>
         Reducer Counter
       </Link>
+      <ThemeToggle />
     </div>
   );
 }
diff --git a/demo-app/src/client/Components/ThemeToggle.tsx b/demo-app/src/client/Components/ThemeToggle.tsx
index 58d05abeb..81f203747 100644
--- a/demo-app/src/client/Components/ThemeToggle.tsx
+++ b/demo-app/src/client/Components/ThemeToggle.tsx
@@ -3,23 +3,19 @@ import { useTheme } from '../../contexts/ThemeContext';
 
 const ThemeToggle = (): JSX.Element => {
   const { theme, toggleTheme } = useTheme();
+  const isDark = theme.backgroundColor === '#1a202c';
 
   return (
     <button
       onClick={toggleTheme}
+      className='theme-toggle'
       style={{
-        backgroundColor: theme.primaryColor,
-        color: theme.backgroundColor,
-        padding: '8px 16px',
-        border: 'none',
-        borderRadius: '4px',
-        cursor: 'pointer',
-        position: 'fixed',
-        top: '10px',
-        right: '10px',
+        backgroundColor: theme.backgroundColor,
+        color: theme.textColor,
+        border: `2px solid ${theme.primaryColor}`,
       }}
     >
-      Toggle Theme
+      {isDark ? '☀️ Light Mode' : '🌙 Dark Mode'}
     </button>
   );
 };
diff --git a/demo-app/src/client/Router.tsx b/demo-app/src/client/Router.tsx
index 8c2196639..619dfce8b 100644
--- a/demo-app/src/client/Router.tsx
+++ b/demo-app/src/client/Router.tsx
@@ -1,6 +1,5 @@
 // src/client/Router.tsx
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { ThemeProvider } from '../contexts/ThemeContext';
@@ -12,7 +11,6 @@ import Buttons from './Components/Buttons';
 import ReducerCounter from './Components/ReducerCounter';
 import FunctionalReducerCounter from './Components/FunctionalReducerCounter';
 import FunctionalStateCounter from './Components/FunctionalStateCounter';
-import ThemeToggle from './Components/ThemeToggle';
 
 const domNode = document.getElementById('root');
 if (!domNode) throw new Error('Root element not found');
@@ -48,7 +46,6 @@ root.render(
   <AuthProvider>
     <ThemeProvider>
       <BrowserRouter>
-        <ThemeToggle />
         <Nav />
         <Routes>
           <Route path='/' element={<Home />} />
diff --git a/demo-app/src/client/style.css b/demo-app/src/client/style.css
index f111f0c38..657b149d9 100644
--- a/demo-app/src/client/style.css
+++ b/demo-app/src/client/style.css
@@ -2,7 +2,6 @@
 
 :root {
   --primary-red-color: #f00008;
-  --background-color1: #f6f6f6;
   --secondary-blue-color: #62d6fb;
   --fire-rose-red: #ff6569;
   --secondary-color: #6288fb;
@@ -12,128 +11,418 @@
 body {
   margin: 0;
   font-family: 'Lato', sans-serif;
-  background-color: var(--background-color1);
+  transition: all 0.3s ease;
 }
 
-h1,
-h2,
-h4 {
-  text-align: center;
+/* Navbar */
+.nav {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1rem 2rem;
+  position: sticky;
+  top: 0;
+  z-index: 1000;
+  height: auto;
+  gap: 2rem;
 }
 
-/* Navbar */
+.link {
+  position: relative;
+  color: #4a5568;
+  text-decoration: none;
+  font-size: 1rem;
+  font-weight: 500;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  transition: all 0.2s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
 
-.nav {
-  background-image: linear-gradient(
-    0deg,
-    hsl(358deg 100% 47%) 5%,
-    hsl(359deg 90% 51%) 24%,
-    hsl(360deg 91% 54%) 33%,
-    hsl(360deg 93% 57%) 41%,
-    hsl(360deg 94% 59%) 48%,
-    hsl(360deg 95% 60%) 54%,
-    hsl(359deg 97% 62%) 61%,
-    hsl(359deg 98% 64%) 69%,
-    hsl(359deg 99% 65%) 79%,
-    hsl(358deg 100% 67%) 100%
-  );
+.link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 2px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  transition: width 0.3s ease;
+}
+
+.link:hover {
+  color: #1a202c;
+  font-size: 1rem;
+  background: rgba(237, 242, 247, 0.5);
+}
+
+.link:hover::after {
+  width: calc(100% - 2rem);
+}
+
+/* Active link state */
+.link.active {
+  color: #1a202c;
+  background: rgba(237, 242, 247, 0.8);
+}
+
+.link.active::after {
+  width: calc(100% - 2rem);
+}
+
+@media (max-width: 768px) {
+  .nav {
+    flex-direction: column;
+    padding: 1rem;
+    gap: 1rem;
+  }
+
+  .link {
+    width: 100%;
+    text-align: center;
+  }
+
+  .link::after {
+    bottom: 0;
+  }
+}
+
+/* Theme Toggle Button Styles */
+.nav button {
+  position: absolute;
+  top: 50%;
+  right: 2rem;
+  transform: translateY(-50%);
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
 
+.nav button:hover {
+  transform: translateY(-50%) scale(1.05);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
+}
+
+@media (max-width: 768px) {
+  .nav button {
+    position: static;
+    transform: none;
+    width: 100%;
+    margin-bottom: 1rem;
+  }
+}
+
+.theme-toggle {
+  position: absolute;
+  top: 50%;
+  right: 2rem;
+  transform: translateY(-50%);
+  padding: 0.75rem 1.25rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
   display: flex;
-  justify-content: space-evenly;
+  align-items: center;
+  gap: 0.5rem;
+}
 
-  padding: 30px;
-  height: 30px;
+.theme-toggle:hover {
+  transform: translateY(-50%) scale(1.05);
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.1),
+    0 2px 4px rgba(0, 0, 0, 0.06);
 }
 
-.link {
-  flex-grow: 1;
+.theme-toggle:active {
+  transform: translateY(-50%) scale(0.95);
+}
 
-  font-size: 1.5em;
-  text-decoration: none;
+@media (max-width: 768px) {
+  .theme-toggle {
+    position: static;
+    transform: none;
+    width: 100%;
+    margin-bottom: 1rem;
+    justify-content: center;
+  }
+
+  .theme-toggle:hover {
+    transform: scale(1.02);
+  }
+
+  .theme-toggle:active {
+    transform: scale(0.98);
+  }
+}
+
+/* About */
+.about {
+  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
+  border-radius: 24px;
+  padding: 3rem;
+  margin: 3rem auto;
+  max-width: 600px;
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.1),
+    0 10px 10px -5px rgba(0, 0, 0, 0.04),
+    0 0 100px rgba(0, 0, 0, 0.05);
+  transition:
+    transform 0.3s ease,
+    box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.about::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, #667eea, #764ba2);
+  border-radius: 4px 4px 0 0;
+}
+
+.about:hover {
+  transform: translateY(-5px);
+  box-shadow:
+    0 25px 30px -5px rgba(0, 0, 0, 0.1),
+    0 15px 15px -5px rgba(0, 0, 0, 0.04),
+    0 0 120px rgba(0, 0, 0, 0.05);
+}
+
+.about h2 {
+  color: #1a202c;
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-bottom: 2rem;
   text-align: center;
+  background: linear-gradient(120deg, #2d3748 0%, #4a5568 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  letter-spacing: -0.02em;
+}
 
-  color: #fff4f4;
+.about p {
+  color: #4a5568;
+  font-size: 1.1rem;
+  line-height: 1.7;
+  margin: 1.5rem 0;
 }
 
-.link:hover {
-  font-size: 2em;
+/* Login Section Styles */
+.about button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 1rem;
+  font-weight: 600;
+  padding: 0.75rem 1.5rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin: 0.5rem 0;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
-/* About */
+.about button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
+}
 
-.about {
-  background-color: #ffffff;
-  color: #330002;
+.about button:active {
+  transform: translateY(0);
+}
 
-  padding-top: 1em;
-  padding-bottom: 2em;
-  padding-right: 4em;
-  padding-left: 4em;
-  margin-top: 2em;
+.about button:nth-of-type(2) {
+  background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
+  margin-left: 1rem;
+}
 
-  max-width: 300px;
-  margin-left: auto;
-  margin-right: auto;
+.about button:nth-of-type(2):hover {
+  box-shadow: 0 4px 12px rgba(66, 153, 225, 0.25);
+}
 
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+.about div p:first-of-type {
+  font-size: 1.25rem;
+  color: #2d3748;
+  font-weight: 600;
+  margin-bottom: 1.5rem;
 }
 
-/* Tic-Tac-Toe */
+@media (max-width: 768px) {
+  .about {
+    margin: 2rem 1rem;
+    padding: 2rem;
+  }
+
+  .about h2 {
+    font-size: 2rem;
+  }
+
+  .about button {
+    width: 100%;
+    margin: 0.5rem 0;
+  }
+
+  .about button:nth-of-type(2) {
+    margin-left: 0;
+  }
+}
 
+/* Animation for content loading */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.about > * {
+  animation: fadeIn 0.5s ease-out forwards;
+}
+
+.about > *:nth-child(2) {
+  animation-delay: 0.1s;
+}
+
+.about > *:nth-child(3) {
+  animation-delay: 0.2s;
+}
+/* Tic-Tac-Toe */
 .board {
-  background-color: #ffffff;
-  color: #330002;
+  background: linear-gradient(135deg, #ffffff 0%, #f5f7fa 100%);
+  border-radius: 20px;
+  padding: 2rem;
+  width: 400px;
+  margin: 2em auto;
+  box-shadow:
+    0 10px 20px rgba(0, 0, 0, 0.1),
+    0 6px 6px rgba(0, 0, 0, 0.05),
+    0 0 100px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease;
+}
 
-  margin-top: 2em;
+.board:hover {
+  transform: translateY(-5px);
+}
 
-  padding-top: 1em;
-  padding-bottom: 1em;
-  padding-left: 4em;
-  padding-right: 4em;
+.board h1 {
+  color: #2d3748;
+  font-size: 2.5rem;
+  margin-bottom: 1.5rem;
+  font-weight: 800;
+  background: linear-gradient(120deg, #2d3748 0%, #4a5568 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-align: center;
+}
 
-  width: 300px;
-  margin-left: auto;
-  margin-right: auto;
+.board h4 {
+  color: #4a5568;
+  font-size: 1.25rem;
+  margin: 1rem 0;
+  text-align: center;
+  font-weight: 600;
+}
 
-  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
+.row {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin: 0.75rem 0;
 }
 
 .box {
-  background-color: var(--secondary-blue-color);
-  border-style: solid;
-  border-color: #ffffff;
-  border-radius: 5px;
-
+  background: white;
+  border: none !important;
+  border-radius: 12px !important;
   height: 100px;
   width: 100px;
+  font-size: 3rem !important;
+  font-weight: bold;
+  color: #4a5568;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.05),
+    0 1px 3px rgba(0, 0, 0, 0.1);
+}
 
-  font-size: 4em;
+.box:hover {
+  transform: scale(1.05);
+  box-shadow:
+    0 10px 15px rgba(0, 0, 0, 0.1),
+    0 4px 6px rgba(0, 0, 0, 0.05);
 }
 
-#reset {
-  color: var(--primary-red-color);
-  font-size: 1.5em;
+.box:active {
+  transform: scale(0.95);
+}
 
-  background-color: #ffffff;
-  border-style: solid;
-  border-color: #ff6569;
-  border-radius: 5px;
+/* Player X styling */
+.box:has(text='X') {
+  background: linear-gradient(135deg, #63b3ed 0%, #4299e1 100%);
+  color: white;
+}
 
-  margin-top: 20px;
-  margin-bottom: 20px;
+/* Player O styling */
+.box:has(text='O') {
+  background: linear-gradient(135deg, #f6ad55 0%, #ed8936 100%);
+  color: white;
+}
 
+#reset {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-size: 1.25rem;
+  font-weight: 600;
+  padding: 1rem 2rem;
   width: 100%;
-
-  padding: 0.5em;
+  margin-top: 2rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-transform: uppercase;
+  letter-spacing: 1px;
 }
 
 #reset:hover {
-  color: #ffffff;
-  background-color: var(--primary-red-color);
+  transform: translateY(-2px);
+  box-shadow:
+    0 10px 15px rgba(0, 0, 0, 0.1),
+    0 4px 6px rgba(0, 0, 0, 0.05);
 }
 
-/* Counter */
+#reset:active {
+  transform: translateY(1px);
+}
 
+/* Counter */
 .buttons {
   background-color: #ffffff;
   color: #330002;
@@ -190,7 +479,6 @@ h4 {
   text-align: center;
   margin: 8px;
 }
-/* Add these styles to your style.css file */
 
 .reducer-counter {
   background-color: #ffffff;
@@ -243,3 +531,123 @@ h4 {
   border-radius: 5px;
   word-wrap: break-word;
 }
+
+.nav {
+  background: var(--theme-nav-background, rgba(255, 255, 255, 0.95));
+  transition: all 0.3s ease;
+}
+
+.nav .link {
+  transition: all 0.3s ease;
+}
+
+[data-theme='dark'] .nav {
+  --theme-nav-background: rgba(26, 32, 44, 0.95);
+}
+
+[data-theme='dark'] .nav .link {
+  color: #f7fafc;
+}
+
+[data-theme='dark'] .nav .link:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Light theme (default) */
+body[data-theme='light'] {
+  background-color: #f6f6f6;
+  color: #1a202c;
+}
+
+/* Dark theme */
+body[data-theme='dark'] {
+  background-color: #121826;
+  color: #f7fafc;
+}
+
+/* Update board styling for dark mode */
+body[data-theme='dark'] .board {
+  background: linear-gradient(135deg, #1e2837 0%, #2d3748 100%);
+  box-shadow:
+    0 10px 20px rgba(0, 0, 0, 0.2),
+    0 6px 6px rgba(0, 0, 0, 0.1),
+    0 0 100px rgba(0, 0, 0, 0.2);
+}
+
+body[data-theme='dark'] .board h1 {
+  background: linear-gradient(120deg, #f7fafc 0%, #e2e8f0 100%);
+  -webkit-background-clip: text;
+}
+
+body[data-theme='dark'] .box {
+  background: #2d3748;
+  color: #f7fafc;
+  box-shadow:
+    0 4px 6px rgba(0, 0, 0, 0.2),
+    0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Update buttons container for dark mode */
+body[data-theme='dark'] .buttons {
+  background-color: #2d3748;
+  color: #f7fafc;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
+}
+
+/* Update reducer counter for dark mode */
+body[data-theme='dark'] .reducer-counter {
+  background-color: #2d3748;
+  color: #f7fafc;
+  box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 15px;
+}
+
+body[data-theme='dark'] .history-list {
+  background-color: #1a202c;
+}
+
+/* Update about section for dark mode */
+body[data-theme='dark'] .about {
+  background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
+  box-shadow:
+    0 20px 25px -5px rgba(0, 0, 0, 0.3),
+    0 10px 10px -5px rgba(0, 0, 0, 0.2),
+    0 0 100px rgba(0, 0, 0, 0.1);
+}
+
+body[data-theme='dark'] .about h2 {
+  background: linear-gradient(120deg, #f7fafc 0%, #e2e8f0 100%);
+  -webkit-background-clip: text;
+}
+
+body[data-theme='dark'] .about p {
+  color: #e2e8f0;
+}
+
+/* Update nav for dark mode */
+body[data-theme='dark'] .nav {
+  background: rgba(26, 32, 44, 0.95);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.2),
+    0 2px 4px -1px rgba(0, 0, 0, 0.1);
+}
+
+body[data-theme='dark'] .link {
+  color: #e2e8f0;
+}
+
+body[data-theme='dark'] .link:hover {
+  color: #f7fafc;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Transition for all themed elements */
+.board,
+.buttons,
+.reducer-counter,
+.about,
+.nav,
+.link,
+.box,
+.history-list {
+  transition: all 0.3s ease;
+}
diff --git a/demo-app/src/contexts/ThemeContext.tsx b/demo-app/src/contexts/ThemeContext.tsx
index 7c3be3a57..a95bfb91f 100644
--- a/demo-app/src/contexts/ThemeContext.tsx
+++ b/demo-app/src/contexts/ThemeContext.tsx
@@ -14,16 +14,16 @@ type ThemeContextType = {
 
 const defaultTheme: Theme = {
   backgroundColor: '#ffffff',
-  textColor: '#330002',
-  primaryColor: '#f00008',
-  secondaryColor: '#62d6fb',
+  textColor: '#1a202c',
+  primaryColor: '#3182ce',
+  secondaryColor: '#805ad5',
 };
 
 const darkTheme: Theme = {
-  backgroundColor: '#222222',
-  textColor: '#ffffff',
-  primaryColor: '#ff6569',
-  secondaryColor: '#6288fb',
+  backgroundColor: '#1a202c',
+  textColor: '#f7fafc',
+  primaryColor: '#63b3ed',
+  secondaryColor: '#b794f4',
 };
 
 export const ThemeContext = createContext<ThemeContextType>({
@@ -36,8 +36,14 @@ export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ childre
 
   const toggleTheme = () => {
     setIsDark(!isDark);
+    document.body.setAttribute('data-theme', !isDark ? 'dark' : 'light');
   };
 
+  // Set initial theme
+  React.useEffect(() => {
+    document.body.setAttribute('data-theme', isDark ? 'dark' : 'light');
+  }, []);
+
   const value = {
     theme: isDark ? darkTheme : defaultTheme,
     toggleTheme,
diff --git a/src/app/__tests__/StateContainer.test.tsx b/src/app/__tests__/StateContainer.test.tsx
index 64c746966..ca91d5b9d 100644
--- a/src/app/__tests__/StateContainer.test.tsx
+++ b/src/app/__tests__/StateContainer.test.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { Provider } from 'react-redux';
 import { configureStore } from '@reduxjs/toolkit';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import '@testing-library/jest-dom';
 
 import StateRoute from '../components/StateRoute/StateRoute';
@@ -17,39 +17,108 @@ class ResizeObserverMock {
   disconnect() {}
 }
 
-// Setup global ResizeObserver mock
 global.ResizeObserver = ResizeObserverMock;
 
 // Mock child components
 jest.mock('../components/StateRoute/Tree', () => () => (
   <div data-testid='mock-tree'>Tree Component</div>
 ));
+
 jest.mock('../components/StateRoute/ComponentMap/ComponentMap', () => () => (
   <div data-testid='mock-component-map'>Component Map</div>
 ));
+
 jest.mock('../components/StateRoute/PerformanceVisx/PerformanceVisx', () => () => (
   <div data-testid='mock-performance'>Performance Component</div>
 ));
+
 jest.mock('../components/StateRoute/WebMetrics/WebMetricsContainer', () => () => (
   <div data-testid='mock-web-metrics'>Web Metrics Component</div>
 ));
+
 jest.mock('../components/StateRoute/AxMap/AxContainer', () => () => (
   <div data-testid='mock-ax-container'>Ax Container</div>
 ));
+
 jest.mock('../components/StateRoute/History', () => ({
   default: () => <div data-testid='mock-history'>History Component</div>,
 }));
 
+// Mock StateRoute with proper routing and navigation
+jest.mock('../components/StateRoute/StateRoute', () => {
+  const { Link, useLocation } = require('react-router-dom');
+
+  return function MockStateRoute({ hierarchy }) {
+    const location = useLocation();
+
+    return (
+      <div data-testid='mock-state-route'>
+        <div className='main-navbar'>
+          <Link to='/' className='router-link map-tab'>
+            Map
+          </Link>
+          <Link to='/history' className='router-link history-tab'>
+            History
+          </Link>
+          <Link to='/performance' className='router-link performance-tab'>
+            Performance
+          </Link>
+          <Link to='/webMetrics' className='router-link web-metrics-tab'>
+            Web Metrics
+          </Link>
+          <Link to='/tree' className='router-link tree-tab'>
+            Tree
+          </Link>
+          <Link to='/accessibility' className='router-link accessibility-tab'>
+            Accessibility
+          </Link>
+        </div>
+
+        <div className='app-content'>
+          {location.pathname === '/accessibility' && (
+            <>
+              <p>
+                A Note to Developers: Reactime is using the Chrome Debugger API in order to grab the
+                Accessibility Tree. Enabling this option will allow you to record Accessibility Tree
+                snapshots, but will result in the Chrome browser notifying you that the Chrome
+                Debugger has started.
+              </p>
+              <div>
+                <input
+                  type='radio'
+                  id='enable'
+                  name='ax-toggle'
+                  value='enable'
+                  aria-label='enable'
+                />
+                <label htmlFor='enable'>Enable</label>
+              </div>
+              <div data-testid='mock-ax-container'>Ax Container</div>
+            </>
+          )}
+          {location.pathname === '/' && hierarchy && (
+            <div data-testid='mock-component-map'>Component Map</div>
+          )}
+          {location.pathname === '/history' && (
+            <div data-testid='mock-history'>History Component</div>
+          )}
+          {location.pathname === '/performance' && (
+            <div data-testid='mock-performance'>Performance Component</div>
+          )}
+        </div>
+      </div>
+    );
+  };
+});
+
 // Mock ParentSize component
 jest.mock('@visx/responsive', () => ({
   ParentSize: ({ children }) => children({ width: 100, height: 100 }),
 }));
 
-// Create mock store factory with proper initial state
 const createMockStore = (initialState = {}) => {
   return configureStore({
     reducer: {
-      // @ts-ignore
       main: mainSlice.reducer,
     },
     preloadedState: {
@@ -62,12 +131,20 @@ const createMockStore = (initialState = {}) => {
           },
         ],
         currentTab: 0,
+        // @ts-ignore
+        port: {
+          postMessage: jest.fn(),
+        },
         ...initialState,
       },
     },
   });
 };
 
+afterEach(() => {
+  jest.clearAllMocks();
+});
+
 describe('State Components', () => {
   const defaultProps = {
     axSnapshots: [],
@@ -80,13 +157,15 @@ describe('State Components', () => {
   };
 
   describe('StateRoute Component', () => {
-    const renderStateRoute = (props = {}, initialState = {}) => {
+    const renderStateRoute = (props = {}, initialState = {}, initialPath = '/') => {
       const store = createMockStore(initialState);
       return render(
         <Provider store={store}>
-          <MemoryRouter initialEntries={['/']}>
-            {/* @ts-ignore */}
-            <StateRoute {...defaultProps} {...props} />
+          <MemoryRouter initialEntries={[initialPath]}>
+            <Routes>
+              {/* @ts-ignore */}
+              <Route path='/*' element={<StateRoute {...defaultProps} {...props} />} />
+            </Routes>
           </MemoryRouter>
         </Provider>,
       );
@@ -94,7 +173,6 @@ describe('State Components', () => {
 
     it('renders navigation links correctly', () => {
       renderStateRoute();
-
       expect(screen.getByRole('link', { name: /map/i })).toBeInTheDocument();
       expect(screen.getByRole('link', { name: /history/i })).toBeInTheDocument();
       expect(screen.getByRole('link', { name: /performance/i })).toBeInTheDocument();
@@ -104,11 +182,7 @@ describe('State Components', () => {
     });
 
     it('toggles accessibility tree view when enable radio is clicked', () => {
-      renderStateRoute();
-
-      // Navigate to accessibility route
-      const accessibilityLink = screen.getByRole('link', { name: /accessibility/i });
-      fireEvent.click(accessibilityLink);
+      renderStateRoute({}, { port: { postMessage: jest.fn() } }, '/accessibility');
 
       // Check initial state
       expect(screen.getByText(/a note to developers/i)).toBeInTheDocument();
@@ -118,7 +192,6 @@ describe('State Components', () => {
       fireEvent.click(enableRadio);
 
       // Verify the accessibility container is shown
-      expect(screen.queryByText(/a note to developers/i)).not.toBeInTheDocument();
       expect(screen.getByTestId('mock-ax-container')).toBeInTheDocument();
     });