diff --git a/tests/magnitude/02-theme.mag.ts b/tests/magnitude/02-theme.mag.ts
index e74f3c8..3d9f917 100644
--- a/tests/magnitude/02-theme.mag.ts
+++ b/tests/magnitude/02-theme.mag.ts
@@ -1,21 +1,126 @@
 import { test } from 'magnitude-test';
 
-test('Mantine theme is applied correctly', async (agent) => {
+test('Theme toggle switches between light and dark modes', async (agent) => {
   // Act: Navigate to the homepage
   await agent.act('Navigate to the homepage');
 
-  // Check: Verify the Mantine components are rendered
-  await agent.check('The text "Ponderants" is visible as a title');
-  await agent.check('A "Test Button" is visible on the screen');
+  // Check: Verify the page loads with a theme
+  await agent.check('The page has either a light or dark background');
 
-  // Check: Verify the theme is applied.
-  // We check that the page uses a dark background with grayscale styling
-  await agent.check(
-    'The page has a dark background with light text, consistent with a grayscale dark theme'
-  );
+  // Act: Click the theme toggle button
+  await agent.act('Click the theme toggle button');
 
-  // Check: Verify the Paper component is rendered with its themed styles
-  await agent.check(
-    'The page content is inside a "Paper" component with a border'
-  );
+  // Wait for theme transition
+  await agent.act('Wait for 1 second');
+
+  // Check: Verify the theme has changed
+  await agent.check('The background color has changed to the opposite theme');
+
+  // Act: Click the theme toggle button again
+  await agent.act('Click the theme toggle button');
+
+  // Wait for theme transition
+  await agent.act('Wait for 1 second');
+
+  // Check: Verify the theme has changed back
+  await agent.check('The background color has changed back to the original theme');
+});
+
+test('Light mode displays correct colors', async (agent) => {
+  // Act: Navigate to the homepage
+  await agent.act('Navigate to the homepage');
+
+  // Act: Ensure we're in light mode by toggling if needed
+  await agent.act('If the background is dark, click the theme toggle button');
+  await agent.act('Wait for 1 second');
+
+  // Check: Verify light mode colors
+  await agent.check('The page has a light background color');
+  await agent.check('The sidebar has a light background');
+  await agent.check('The text is dark colored for readability');
+  await agent.check('The borders are subtle and light-colored');
+});
+
+test('Dark mode displays correct colors', async (agent) => {
+  // Act: Navigate to the homepage
+  await agent.act('Navigate to the homepage');
+
+  // Act: Ensure we're in dark mode by toggling if needed
+  await agent.act('If the background is light, click the theme toggle button');
+  await agent.act('Wait for 1 second');
+
+  // Check: Verify dark mode colors
+  await agent.check('The page has a dark background color');
+  await agent.check('The sidebar has a dark background');
+  await agent.check('The text is light colored for readability');
+  await agent.check('The borders are dark-colored');
+});
+
+test('Theme persists across page refreshes', async (agent) => {
+  // Act: Navigate to the homepage
+  await agent.act('Navigate to the homepage');
+
+  // Act: Set to light mode
+  await agent.act('If the background is dark, click the theme toggle button');
+  await agent.act('Wait for 1 second');
+
+  // Act: Refresh the page
+  await agent.act('Refresh the page');
+  await agent.act('Wait for the page to load');
+
+  // Check: Verify light mode persisted
+  await agent.check('The page still has a light background color');
+
+  // Act: Switch to dark mode
+  await agent.act('Click the theme toggle button');
+  await agent.act('Wait for 1 second');
+
+  // Act: Refresh the page again
+  await agent.act('Refresh the page');
+  await agent.act('Wait for the page to load');
+
+  // Check: Verify dark mode persisted
+  await agent.check('The page still has a dark background color');
+});
+
+test('Theme affects all UI components', async (agent) => {
+  // Act: Navigate to the homepage
+  await agent.act('Navigate to the homepage');
+
+  // Act: Ensure light mode
+  await agent.act('If the background is dark, click the theme toggle button');
+  await agent.act('Wait for 1 second');
+
+  // Check: Verify all components use light theme
+  await agent.check('The navigation sidebar uses light colors');
+  await agent.check('The main content area uses light colors');
+  await agent.check('All buttons and inputs use light theme styling');
+
+  // Act: Switch to dark mode
+  await agent.act('Click the theme toggle button');
+  await agent.act('Wait for 1 second');
+
+  // Check: Verify all components use dark theme
+  await agent.check('The navigation sidebar uses dark colors');
+  await agent.check('The main content area uses dark colors');
+  await agent.check('All buttons and inputs use dark theme styling');
+});
+
+test('Theme toggle icon changes based on current theme', async (agent) => {
+  // Act: Navigate to the homepage
+  await agent.act('Navigate to the homepage');
+
+  // Act: Ensure light mode
+  await agent.act('If the background is dark, click the theme toggle button');
+  await agent.act('Wait for 1 second');
+
+  // Check: Verify icon shows moon (indicating can switch to dark)
+  await agent.check('The theme toggle button shows a moon icon');
+
+  // Act: Switch to dark mode
+  await agent.act('Click the theme toggle button');
+  await agent.act('Wait for 1 second');
+
+  // Check: Verify icon shows sun (indicating can switch to light)
+  await agent.check('The theme toggle button shows a sun icon');
 });