diff --git a/webapp/src/store/slices/configSlice.ts b/webapp/src/store/slices/configSlice.ts
index a6e144b2..4ed7fb14 100644
--- a/webapp/src/store/slices/configSlice.ts
+++ b/webapp/src/store/slices/configSlice.ts
@@ -3,8 +3,8 @@ import {AppConfig, ThemeName} from '../../types';
 
 // Helper function to validate theme name
 const isValidTheme = (theme: string | null): theme is ThemeName => {
-    return theme === 'main' || theme === 'night' || theme === 'forest' ||
-        theme === 'pony' || theme === 'alien';
+    return theme === 'main' || theme === 'night' || theme === 'forest' || 
+        theme === 'pony' || theme === 'alien' || theme === 'sunset';
 };
 // Load theme from localStorage with type safety
 const loadSavedTheme = (): ThemeName => {
diff --git a/webapp/src/themes/ThemeProvider.tsx b/webapp/src/themes/ThemeProvider.tsx
index b4cb1b54..315f130f 100644
--- a/webapp/src/themes/ThemeProvider.tsx
+++ b/webapp/src/themes/ThemeProvider.tsx
@@ -20,7 +20,10 @@ const prismThemes: Record<ThemeName, string> = {
     night: 'prism-dark',
     forest: 'prism-okaidia',
     pony: 'prism-twilight',
-    alien: 'prism-tomorrow'
+    alien: 'prism-tomorrow',
+    sunset: 'prism-twilight', // Added missing sunset theme mapping
+    ocean: 'prism-okaidia',  // Added comma
+    cyberpunk: 'prism-tomorrow'  // Added cyberpunk theme mapping
 };
 // Function to load Prism theme
 const loadPrismTheme = async (themeName: ThemeName) => {
diff --git a/webapp/src/themes/index.ts b/webapp/src/themes/index.ts
index 7f1415e3..f08d8f5c 100644
--- a/webapp/src/themes/index.ts
+++ b/webapp/src/themes/index.ts
@@ -1,4 +1,6 @@
-import {themes} from './themes';
+import { themes } from './themes';
+export type { ThemeName } from '../types';
+
 // Enhanced theme logging
 const themeCount = Object.keys(themes).length;
 console.group('Theme System Initialization');
@@ -12,5 +14,4 @@ console.table(Object.entries(themes).map(([name, theme]) => ({
 console.groupEnd();
 
 
-export {themes};
-export type {ThemeName} from './themes';
\ No newline at end of file
+export { themes };
\ No newline at end of file
diff --git a/webapp/src/themes/themes.ts b/webapp/src/themes/themes.ts
index c3417203..6fde8d7d 100644
--- a/webapp/src/themes/themes.ts
+++ b/webapp/src/themes/themes.ts
@@ -1,5 +1,7 @@
-// Define theme names
-export type ThemeName = 'main' | 'night' | 'forest' | 'pony' | 'alien';
+// Import and re-export ThemeName type
+import type { ThemeName } from '../types';
+export type { ThemeName };
+
 // Enhanced logger configuration
 const logger = {
     styles: {
@@ -384,6 +386,71 @@ export const themes = {
     forest: forestTheme,
     pony: ponyTheme,
     alien: alienTheme,
+    sunset: {
+        name: 'sunset',
+        colors: {
+            primary: '#FF6B6B',
+            secondary: '#FFA07A',
+            background: '#2C3E50',
+            surface: '#34495E',
+            text: {
+                primary: '#ECF0F1',
+                secondary: '#BDC3C7',
+            },
+            border: '#95A5A6',
+            error: '#E74C3C',
+            success: '#2ECC71',
+            warning: '#F1C40F',
+            info: '#3498DB',
+            primaryDark: '#E74C3C',
+            disabled: '#7F8C8D',
+        },
+        ...baseTheme,
+    },
+    ocean: {
+        name: 'ocean',
+        colors: {
+            primary: '#00B4D8',
+            secondary: '#48CAE4',
+            background: '#03045E',
+            surface: '#023E8A',
+            text: {
+                primary: '#CAF0F8',
+                secondary: '#90E0EF',
+            },
+            border: '#0077B6',
+            error: '#FF6B6B',
+            success: '#2ECC71',
+            warning: '#FFB703',
+            info: '#48CAE4',
+            primaryDark: '#0096C7',
+            disabled: '#415A77',
+            hover: '#0077B6'
+        },
+        ...baseTheme,
+    },
+    cyberpunk: {
+        name: 'cyberpunk',
+        colors: {
+            primary: '#FF00FF',
+            secondary: '#00FFFF',
+            background: '#0D0221',
+            surface: '#1A1A2E',
+            text: {
+                primary: '#FF00FF',
+                secondary: '#00FFFF',
+            },
+            border: '#FF00FF',
+            error: '#FF0000',
+            success: '#00FF00',
+            warning: '#FFD700',
+            info: '#00FFFF',
+            primaryDark: '#CC00CC',
+            disabled: '#4A4A4A',
+            hover: '#FF69B4'
+        },
+        ...baseTheme,
+    },
 };
 // Enhanced logging for available themes
 logger.log('available', 'all', {
@@ -398,4 +465,4 @@ export const logThemeChange = (from: ThemeName, to: ThemeName) => {
         to,
         timestamp: new Date().toISOString()
     });
-};
+};
\ No newline at end of file
diff --git a/webapp/src/types.ts b/webapp/src/types.ts
index 2759b2f0..fc03e8fa 100644
--- a/webapp/src/types.ts
+++ b/webapp/src/types.ts
@@ -1,5 +1,6 @@
 // Define theme names
-export type ThemeName = 'main' | 'night' | 'forest' | 'pony' | 'alien';
+export type ThemeName = 'main' | 'night' | 'forest' | 'pony' | 'alien' | 'sunset' | 'ocean' | 'cyberpunk';
+
 // Define log levels
 export type LogLevel = 'debug' | 'info' | 'warn' | 'error';
 // Define TabObservers type