diff --git a/tests/magnitude/02-theme.mag.ts b/tests/magnitude/02-theme.mag.ts
index 3d9f917..453e5e4 100644
--- a/tests/magnitude/02-theme.mag.ts
+++ b/tests/magnitude/02-theme.mag.ts
@@ -1,38 +1,86 @@
 import { test } from 'magnitude-test';
 
-test('Theme toggle switches between light and dark modes', async (agent) => {
-  // Act: Navigate to the homepage
-  await agent.act('Navigate to the homepage');
+const TEST_HANDLE = process.env.TEST_BLUESKY_HANDLE;
+const TEST_PASSWORD = process.env.TEST_BLUESKY_PASSWORD;
 
-  // Check: Verify the page loads with a theme
-  await agent.check('The page has either a light or dark background');
+if (!TEST_HANDLE || !TEST_PASSWORD) {
+  throw new Error('TEST_BLUESKY_HANDLE and TEST_BLUESKY_PASSWORD must be set in .env');
+}
 
-  // Act: Click the theme toggle button
-  await agent.act('Click the theme toggle button');
+test('Theme selector in profile dropdown has three options', async (agent) => {
+  // Act: Log in first (theme selector is in authenticated area)
+  await agent.act('Navigate to /login');
+  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
+  await agent.act('Click the "Log in with Bluesky" button');
+  await agent.check('The page URL contains "bsky.social"');
+  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
+  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
+  await agent.act('Click the submit/authorize button');
+  await agent.check('The page URL contains "/chat"');
 
-  // Wait for theme transition
-  await agent.act('Wait for 1 second');
+  // Act: Open the profile dropdown menu
+  await agent.act('Click on the profile avatar or "Profile" button');
 
-  // Check: Verify the theme has changed
-  await agent.check('The background color has changed to the opposite theme');
+  // Check: Verify the theme selector is visible with three options
+  await agent.check('A "Theme" label is visible in the dropdown menu');
+  await agent.check('A segmented control with three icon buttons is visible');
+  await agent.check('A sun icon button is visible (for light mode)');
+  await agent.check('A moon icon button is visible (for dark mode)');
+  await agent.check('A desktop/monitor icon button is visible (for system/auto mode)');
+});
 
-  // Act: Click the theme toggle button again
-  await agent.act('Click the theme toggle button');
+test('Theme can be changed between light, dark, and auto modes', async (agent) => {
+  // Act: Log in
+  await agent.act('Navigate to /login');
+  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
+  await agent.act('Click the "Log in with Bluesky" button');
+  await agent.check('The page URL contains "bsky.social"');
+  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
+  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
+  await agent.act('Click the submit/authorize button');
+  await agent.check('The page URL contains "/chat"');
 
-  // Wait for theme transition
-  await agent.act('Wait for 1 second');
+  // Act: Open profile dropdown and select light mode
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the sun icon in the theme selector');
 
-  // Check: Verify the theme has changed back
-  await agent.check('The background color has changed back to the original theme');
+  // Check: Verify light mode is active
+  await agent.check('The page has a light background color');
+  await agent.check('The sun icon button appears selected/highlighted');
+
+  // Act: Switch to dark mode
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the moon icon in the theme selector');
+  await agent.act('Wait for 500 milliseconds');
+
+  // Check: Verify dark mode is active
+  await agent.check('The page has a dark background color');
+  await agent.check('The moon icon button appears selected/highlighted');
+
+  // Act: Switch to auto/system mode
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the desktop icon in the theme selector');
+  await agent.act('Wait for 500 milliseconds');
+
+  // Check: Verify auto mode is selected
+  await agent.check('The desktop icon button appears selected/highlighted');
 });
 
 test('Light mode displays correct colors', async (agent) => {
-  // Act: Navigate to the homepage
-  await agent.act('Navigate to the homepage');
+  // Act: Log in
+  await agent.act('Navigate to /login');
+  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
+  await agent.act('Click the "Log in with Bluesky" button');
+  await agent.check('The page URL contains "bsky.social"');
+  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
+  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
+  await agent.act('Click the submit/authorize button');
+  await agent.check('The page URL contains "/chat"');
 
-  // 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');
+  // Act: Set to light mode via profile dropdown
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the sun icon in the theme selector');
+  await agent.act('Wait for 500 milliseconds');
 
   // Check: Verify light mode colors
   await agent.check('The page has a light background color');
@@ -42,12 +90,20 @@ test('Light mode displays correct colors', async (agent) => {
 });
 
 test('Dark mode displays correct colors', async (agent) => {
-  // Act: Navigate to the homepage
-  await agent.act('Navigate to the homepage');
+  // Act: Log in
+  await agent.act('Navigate to /login');
+  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
+  await agent.act('Click the "Log in with Bluesky" button');
+  await agent.check('The page URL contains "bsky.social"');
+  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
+  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
+  await agent.act('Click the submit/authorize button');
+  await agent.check('The page URL contains "/chat"');
 
-  // 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');
+  // Act: Set to dark mode via profile dropdown
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the moon icon in the theme selector');
+  await agent.act('Wait for 500 milliseconds');
 
   // Check: Verify dark mode colors
   await agent.check('The page has a dark background color');
@@ -57,12 +113,20 @@ test('Dark mode displays correct colors', async (agent) => {
 });
 
 test('Theme persists across page refreshes', async (agent) => {
-  // Act: Navigate to the homepage
-  await agent.act('Navigate to the homepage');
+  // Act: Log in
+  await agent.act('Navigate to /login');
+  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
+  await agent.act('Click the "Log in with Bluesky" button');
+  await agent.check('The page URL contains "bsky.social"');
+  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
+  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
+  await agent.act('Click the submit/authorize button');
+  await agent.check('The page URL contains "/chat"');
 
   // 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');
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the sun icon in the theme selector');
+  await agent.act('Wait for 500 milliseconds');
 
   // Act: Refresh the page
   await agent.act('Refresh the page');
@@ -72,8 +136,9 @@ test('Theme persists across page refreshes', async (agent) => {
   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');
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the moon icon in the theme selector');
+  await agent.act('Wait for 500 milliseconds');
 
   // Act: Refresh the page again
   await agent.act('Refresh the page');
@@ -84,12 +149,20 @@ test('Theme persists across page refreshes', async (agent) => {
 });
 
 test('Theme affects all UI components', async (agent) => {
-  // Act: Navigate to the homepage
-  await agent.act('Navigate to the homepage');
+  // Act: Log in
+  await agent.act('Navigate to /login');
+  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
+  await agent.act('Click the "Log in with Bluesky" button');
+  await agent.check('The page URL contains "bsky.social"');
+  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
+  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
+  await agent.act('Click the submit/authorize button');
+  await agent.check('The page URL contains "/chat"');
 
-  // Act: Ensure light mode
-  await agent.act('If the background is dark, click the theme toggle button');
-  await agent.act('Wait for 1 second');
+  // Act: Set to light mode
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the sun icon in the theme selector');
+  await agent.act('Wait for 500 milliseconds');
 
   // Check: Verify all components use light theme
   await agent.check('The navigation sidebar uses light colors');
@@ -97,8 +170,9 @@ test('Theme affects all UI components', async (agent) => {
   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');
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the moon icon in the theme selector');
+  await agent.act('Wait for 500 milliseconds');
 
   // Check: Verify all components use dark theme
   await agent.check('The navigation sidebar uses dark colors');
@@ -106,21 +180,35 @@ test('Theme affects all UI components', async (agent) => {
   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');
+test('Theme selector correctly indicates selected theme', async (agent) => {
+  // Act: Log in
+  await agent.act('Navigate to /login');
+  await agent.act(`Type "${TEST_HANDLE}" into the "Your Handle" input field`);
+  await agent.act('Click the "Log in with Bluesky" button');
+  await agent.check('The page URL contains "bsky.social"');
+  await agent.act(`Type "${TEST_HANDLE}" into the username/identifier field`);
+  await agent.act(`Type "${TEST_PASSWORD}" into the password field`);
+  await agent.act('Click the submit/authorize button');
+  await agent.check('The page URL contains "/chat"');
 
-  // Act: Ensure light mode
-  await agent.act('If the background is dark, click the theme toggle button');
-  await agent.act('Wait for 1 second');
+  // Act: Set to light mode
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the sun icon in the theme selector');
 
-  // Check: Verify icon shows moon (indicating can switch to dark)
-  await agent.check('The theme toggle button shows a moon icon');
+  // Check: Verify sun icon is highlighted/selected
+  await agent.check('The sun icon button appears selected or highlighted');
 
   // Act: Switch to dark mode
-  await agent.act('Click the theme toggle button');
-  await agent.act('Wait for 1 second');
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the moon icon in the theme selector');
 
-  // Check: Verify icon shows sun (indicating can switch to light)
-  await agent.check('The theme toggle button shows a sun icon');
+  // Check: Verify moon icon is highlighted/selected
+  await agent.check('The moon icon button appears selected or highlighted');
+
+  // Act: Switch to auto mode
+  await agent.act('Click on the profile avatar');
+  await agent.act('Click the desktop icon in the theme selector');
+
+  // Check: Verify desktop icon is highlighted/selected
+  await agent.check('The desktop icon button appears selected or highlighted');
 });