diff --git a/app.vue b/app.vue
index 10773055e..740244760 100644
--- a/app.vue
+++ b/app.vue
@@ -34,12 +34,12 @@ export default {
         });
     },
     mounted() {
-        const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
+        /*const preferredColorScheme = localStorage.getItem(this.$appState.colorSchemeKey);
         const prefersDarkColorScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
 
         if ((preferredColorScheme === null && prefersDarkColorScheme) || preferredColorScheme === 'dark') {
             this.applyTheme({ theme: 'lara-dark-green', dark: true });
-        }
+        })*/
 
         EventBus.on('theme-change', this.themeChangeListener);
     },
diff --git a/assets/styles/layout/_content.scss b/assets/styles/layout/_content.scss
index d60687945..563ff8db0 100644
--- a/assets/styles/layout/_content.scss
+++ b/assets/styles/layout/_content.scss
@@ -10,7 +10,7 @@
 }
 
 .card {
-    background: var(--surface-card);
+    background: var(--card-bg);
     border: var(--card-border);
     padding: 2rem;
     border-radius: 10px;
diff --git a/assets/styles/layout/_core.scss b/assets/styles/layout/_core.scss
index ab819c5a2..c6ca698e2 100644
--- a/assets/styles/layout/_core.scss
+++ b/assets/styles/layout/_core.scss
@@ -7,7 +7,7 @@ body {
     min-height: 100%;
     overflow-x: hidden;
     overflow-y: auto;
-    background-color: var(--surface-ground);
+    background-color: var(--body-bg);
     font-weight: normal;
     color: var(--text-color);
     -webkit-font-smoothing: antialiased;
@@ -15,7 +15,7 @@ body {
 }
 
 .layout-wrapper {
-    background-color: var(--surface-ground);
+    background-color: var(--body-bg);
 }
 
 a {
diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss
index 6ee9f4868..c28faa0bb 100644
--- a/assets/styles/layout/variables/main/_dark.scss
+++ b/assets/styles/layout/variables/main/_dark.scss
@@ -2,8 +2,9 @@
     --primary-color-default:var(--primary-400);
     --primary-color-inverse-default:var(--gray-900);
     --topbar-sticky-bg:rgba(0,0,0,.3);
-    --card-border: 0 none;
-    --card-bg: var(--surface-card);
+    --body-bg: var(--p-surface-900);
+    --card-border: 1px solid transparent;
+    --card-bg: var(--p-surface-800);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--primary-color) 0%, #000000 100%);
     --glow-blend: hard-light, color-dodge;
     --topbar-border: var(--surface-border);
diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
index 6b52456bf..9f39e830e 100644
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -2,8 +2,9 @@
     --primary-color-default:var(--primary-600);
     --primary-color-inverse-default:var(--surface-0);
     --topbar-sticky-bg:rgba(255,255,255,.7);
-    --card-border: 1px solid var(--surface-border);
-    --card-bg: var(--surface-card);
+    --body-bg: var(--p-surface-50);
+    --card-border: 1px solid var(--p-surface-200);
+    --card-bg: var(--p-surface-0);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center top, var(--primary-100) 0%, #ffffff 100%);
     --glow-blend: hard-light, multiply;
     --topbar-border: rgba(0,0,0,.05);
diff --git a/components/lib/theme/lara/index.js b/components/lib/theme/lara/index.js
index 50336e6ff..e8c1896eb 100644
--- a/components/lib/theme/lara/index.js
+++ b/components/lib/theme/lara/index.js
@@ -1,30 +1,64 @@
-import { palette } from 'primevue/theme';
 import global from 'primevue/theme/lara/global';
 import panel from 'primevue/theme/lara/panel';
 
 export default {
     primitive: {
-        blue: palette('#3B82F6') /* --p-blue-[50-900] */,
-        gray: {
-            50: '#f9fafb',
-            100: '#f3f4f6',
-            200: '#e5e7eb',
-            300: '#d1d5db',
-            400: '#9ca3af',
-            500: '#6b7280',
-            600: '#4b5563',
-            700: '#374151',
-            800: '#1f2937',
-            900: '#111827'
+        emerald: {
+            50: '#ecfdf5',
+            100: '#d1fae5',
+            200: '#a7f3d0',
+            300: '#6ee7b7',
+            400: '#34d399',
+            500: '#10b981',
+            600: '#059669',
+            700: '#047857',
+            800: '#065f46',
+            900: '#064e3b',
+            950: '#022c22'
+        },
+        slate: {
+            50: '#f8fafc',
+            100: '#f1f5f9',
+            200: '#e2e8f0',
+            300: '#cbd5e1',
+            400: '#94a3b8',
+            500: '#64748b',
+            600: '#475569',
+            700: '#334155',
+            800: '#1e293b',
+            900: '#0f172a',
+            950: '#020617'
         }
     },
     semantic: {
         primary: {
-            500: 'var(--p-blue-500)'
+            50: '{emerald.50}',
+            100: '{emerald.100}',
+            200: '{emerald.200}',
+            300: '{emerald.300}',
+            400: '{emerald.400}',
+            500: '{emerald.500}',
+            600: '{emerald.600}',
+            700: '{emerald.700}',
+            800: '{emerald.800}',
+            900: '{emerald.900}',
+            950: '{emerald.950}'
         },
         surface: {
-            200: 'var(--p-gray-200)'
+            0: '#ffffff',
+            50: '{slate.50}',
+            100: '{slate.100}',
+            200: '{slate.200}',
+            300: '{slate.300}',
+            400: '{slate.400}',
+            500: '{slate.500}',
+            600: '{slate.600}',
+            700: '{slate.700}',
+            800: '{slate.800}',
+            900: '{slate.900}',
+            950: '{slate.950}'
         },
+        fontFamily: 'Inter var',
         borderRadius: '6px',
         transitionDuration: '.2s',
         transition: 'background-color {transitionDuration}, color {transitionDuration}, box-shadow {transitionDuration}'
diff --git a/components/lib/theme/lara/panel/index.js b/components/lib/theme/lara/panel/index.js
index ea27917ca..9033c77d6 100644
--- a/components/lib/theme/lara/panel/index.js
+++ b/components/lib/theme/lara/panel/index.js
@@ -34,56 +34,63 @@ export default {
         },
         light: {
             header: {
-                borderColor: '{shade.300}',
-                background: '{shade.100}',
-                color: '{shade.800}'
+                borderColor: '{surface.200}',
+                background: '{surface.50}',
+                color: '{surface.700}'
             },
             headerIcon: {
-                color: '{shade.600}',
+                color: '{surface.600}',
                 borderColor: 'transparent',
-                background: 'transparent'
-            },
-            headerIconHover: {
-                color: '{shade.800}',
-                borderColor: 'transparent',
-                background: '{shade.200}'
+                background: 'transparent',
+                states: {
+                    hover: {
+                        color: '{surface.800}',
+                        borderColor: 'transparent',
+                        background: '{surface.100}'
+                    },
+                    focus: {
+                        
+                    }
+                }
             },
             content: {
-                borderColor: '{shade.300}',
-                background: '{shade.0}',
-                color: '{shade.700}'
+                borderColor: '{surface.200}',
+                background: '{surface.0}',
+                color: '{surface.700}'
             },
             footer: {
-                borderColor: '{shade.300}',
-                background: '{shade.0}',
-                color: '{shade.700}'
+                borderColor: '{surface.200}',
+                background: '{surface.0}',
+                color: '{surface.700}'
             }
         },
         dark: {
             header: {
-                borderColor: '{shade.600}',
-                background: '{shade.800}',
-                color: '{shade.0}'
+                borderColor: '{surface.200}',
+                background: '{surface.50}',
+                color: '{surface.700}'
             },
             headerIcon: {
-                color: '{shade.100}',
+                color: '{surface.600}',
                 borderColor: 'transparent',
-                background: 'transparent'
-            },
-            headerIconHover: {
-                color: '{shade.0}',
-                borderColor: 'transparent',
-                background: 'rgba(255,255,255,.03)'
+                background: 'transparent',
+                states: {
+                    hover: {
+                        color: '{surface.800}',
+                        borderColor: 'transparent',
+                        background: '{surface.100}'
+                    }
+                }
             },
             content: {
-                borderColor: '{shade.600}',
-                background: '{shade.800}',
-                color: '{shade.0}'
+                borderColor: '{surface.200}',
+                background: '{surface.0}',
+                color: '{surface.700}'
             },
             footer: {
-                borderColor: '{shade.600}',
-                background: '{shade.800}',
-                color: '{shade.0}'
+                borderColor: '{surface.200}',
+                background: '{surface.0}',
+                color: '{surface.700}'
             }
         }
     },