diff --git a/assets/styles/layout/_news.scss b/assets/styles/layout/_news.scss
index 7fb5dfadc..e6f3cf87c 100644
--- a/assets/styles/layout/_news.scss
+++ b/assets/styles/layout/_news.scss
@@ -52,6 +52,7 @@
     }
 
     .layout-news-close {
+        color:var(--primary-inverse-color);
         line-height: 1.5;
         cursor: pointer;
         display: inline-flex;
diff --git a/assets/styles/layout/landing/_blocks.scss b/assets/styles/layout/landing/_blocks.scss
index 69a76d68f..c08f04105 100644
--- a/assets/styles/layout/landing/_blocks.scss
+++ b/assets/styles/layout/landing/_blocks.scss
@@ -3,8 +3,6 @@
         box-sizing: content-box;
     }
 
-    background: var(--home-blocks-bg);
-
     .prime-blocks {
         transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
         margin: -12rem 0;
@@ -23,10 +21,10 @@
         }
 
         .prime-block {
-            background: var(--home-blocks-block-bg);
+            background: var(--ground-surface);
             box-shadow:var(--home-blocks-block-shadow);
-            border-left: var(--home-blocks-border-left);
-            border-bottom: var(--home-blocks-border-bottom);
+            border-left: 5px solid var(--border-color);
+            border-bottom: 7px solid var(--border-color);
             border-radius: 10px;
             height: 300px;
             width: 600px;
@@ -53,7 +51,7 @@
                 right:0;
                 bottom: 0;
                 border-radius: 6px;
-                border: var(--home-blocks-border)
+                border: 1px solid var(--border-color);
             }
             
             .block-sidebar,
@@ -68,7 +66,7 @@
             
             .block-content {
                 .block-main {
-                    border: var(--home-blocks-main-border);
+                    border: 1px solid var(--border-color);
                     border-radius: 13px;
                     background: var(--home-blocks-main-bg);
                 }
@@ -118,12 +116,12 @@
             }
 
             &.block-item-active {
-                box-shadow: var(--home-blocks-active-shadow);
+                box-shadow: 0px 30px 50px 0px rgba(0, 0, 0, .1);
                 border-radius: 6px;
-                border-top: var(--home-blocks-active-border-top);
-                border-right: var(--home-blocks-active-border-right);
-                border-bottom: var(--home-blocks-active-border-bottom);
-                border-left: var(--home-blocks-active-border-left);
+                border-top: 1px solid var(--border-color);
+                border-right: 1px solid var(--border-color);
+                border-bottom: 4px solid var(--border-color);
+                border-left: 4px solid var(--border-color);
                 position: relative;
                 z-index: 5;
                 animation: block-animation 1500ms ease-in-out alternate infinite;
@@ -159,10 +157,10 @@
             border-radius: 10px;
 
             &.bar-highlight {
-                background: var(--home-highlight-color);
+                background: var(--primary-color);
 
                 &:before {
-                    background: var(--home-highlight-fore-color) !important ;
+                    background: var(--primary-inverse-color) !important ;
                 }
             }
 
@@ -201,7 +199,7 @@
             }
 
             &.circle-highlight {
-                background: var(--home-highlight-color);
+                background: var(--primary-color);
             }
         }
     }
@@ -217,6 +215,6 @@
 @keyframes block-animation {
     to {
         transform: translateY(-10px) translateX(10px) scale(1.02);
-        box-shadow: var(--home-blocks-animation-shadow);
+        box-shadow: 0px 30px 50px 10px rgba(0, 0, 0, .2);
     }
 }
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_features.scss b/assets/styles/layout/landing/_features.scss
index 219b06476..5a02cf212 100644
--- a/assets/styles/layout/landing/_features.scss
+++ b/assets/styles/layout/landing/_features.scss
@@ -1,6 +1,6 @@
 .landing-features {
     .box {
-        box-shadow: var(--home-features-card-shadow);
+        box-shadow: var(--home-card-shadow);
     }
     .features-container{
         max-width: 1250px !important;
diff --git a/assets/styles/layout/landing/_getstarted.scss b/assets/styles/layout/landing/_getstarted.scss
deleted file mode 100644
index f3d55c346..000000000
--- a/assets/styles/layout/landing/_getstarted.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.landing-getstarted {
-    .download-icon {
-        color: var(--home-highlight-color);
-    }
-
-    .download-box {
-        span {
-            color: var(--home-primary-text-color);
-        }
-    }
-}
\ No newline at end of file
diff --git a/assets/styles/layout/landing/_landing.scss b/assets/styles/layout/landing/_landing.scss
index a02515e11..7f8a69646 100644
--- a/assets/styles/layout/landing/_landing.scss
+++ b/assets/styles/layout/landing/_landing.scss
@@ -6,7 +6,6 @@ $landingBreakpointXL: 1199px;
 @import './_main';
 @import './_hero';
 @import './_users';
-@import './_getstarted';
 @import './_themes';
 @import './_blocks';
 @import './_templates';
diff --git a/assets/styles/layout/landing/_main.scss b/assets/styles/layout/landing/_main.scss
index 2d88aaa38..575932eed 100644
--- a/assets/styles/layout/landing/_main.scss
+++ b/assets/styles/layout/landing/_main.scss
@@ -1,12 +1,12 @@
 .landing {
-    background-color: var(--home-bg);
     scroll-behavior: smooth;
     padding-top: 4rem;
+    background-color: var(--ground-background);
 
     .box {
-        border: 1px solid var(--home-border-color);
+        border: 1px solid var(--border-color);
         border-radius: 10px;
-        background-color: var(--home-box-bg);
+        background-color: var(--card-background);
         position: relative;
         z-index: 0;
         
@@ -59,32 +59,32 @@
         transition: background-color .2s, border-color .2s;
         display: inline-flex;
         align-items: center;
-        color: var(--home-linkbox-text-color);
+        color: var(--text-color);
         padding: 0.5rem 1rem;
-        border: var(--home-linkbox-border);
-        background-color: var(--home-linkbox-bg);
+        border: 1px solid var(--border-color);
+        background-color: var(--card-background);
         border-radius: 10px;
         cursor: pointer;
         
         @include focus-visible();
 
         &:hover {
-            background: var(--home-linkbox-hover-bg);
+            background: var(--hover-background);
         }
 
         &.active {
-            background: var(--home-highlight-color);
-            color: var(--home-highlight-fore-color);
+            background: var(--primary-color);
+            color: var(--primary-inverse-color);
 
             &:hover {
-                background: var(--home-highlight-darker-color);
+                background: var(--primary-hover-color);
             }
         }
     }
 
     .section-header {
         font-size: 2rem;
-        color: var(--home-primary-text-color);
+        color: var(--text-color);
         font-weight: 700;
         text-align: center;
         padding: 0 2rem;
@@ -92,7 +92,7 @@
 
     .section-detail {
         text-align: center;
-        color: var(--home-secondary-text-color);
+        color: var(--text-secondary-color);
         font-weight: 500;
         font-size: 1.25rem;
         margin: 1.5rem 0 0 0;
@@ -100,7 +100,7 @@
     }
 
     .section-divider {
-        border: 1px solid var(--home-border-color);
+        border: 1px solid var(--border-color);
         height: 1px;
         border-bottom: 0 none;
         overflow: hidden;
@@ -112,11 +112,11 @@
 }
 
 .text-secondary {
-    color: var(--home-secondary-text-color);
+    color: var(--text-secondary-color);
 }
 
 .hover\:surface-hover:hover {
-    background-color: var(--surface-hover);
+    background-color: var(--hover-background);
 }
 
 .landing-footer-container {
@@ -127,14 +127,13 @@
 
 .animated-text {
     position: relative;
-    color: var(--home-text-color);
     padding: 0.25rem 0.5rem;
-    border-radius: var(--border-radius);
+    border-radius: var(--rounded-base);
     display: inline-block;
     width: 14.45rem;
 
     &::before {
-        border-radius: var(--border-radius);
+        border-radius: var(--rounded-base);
         animation: color-animation 2s linear infinite;
         background-size: auto auto;
         background-clip: border-box;
@@ -144,7 +143,7 @@
         height: 1.5rem;
         position: absolute;
         z-index: 0;
-        background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%);
+        background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
         filter: blur(24px);
         opacity: 0.6;
     }
@@ -152,13 +151,12 @@
     > span {
         position: relative;
         z-index: 3;
-        background-image: linear-gradient(-225deg, var(--blue-400) 30%, var(--cyan-400) 60%, var(--purple-400) 80%);
+        background-image: linear-gradient(-225deg, var(--p-blue-400) 30%, var(--p-cyan-400) 60%, var(--p-purple-400) 80%);
         animation: color-animation 2s linear infinite;
         background-size: auto auto;
         background-clip: border-box;
         background-size: 200% auto;
         background-clip: text;
-        text-fill-color: transparent;
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
     }
diff --git a/assets/styles/layout/landing/_templates.scss b/assets/styles/layout/landing/_templates.scss
index b83757e2f..44a8b09a7 100644
--- a/assets/styles/layout/landing/_templates.scss
+++ b/assets/styles/layout/landing/_templates.scss
@@ -1,6 +1,5 @@
 .landing-templates {
     overflow: hidden;
-    background: var(--home-templates-bg);
 
     .templates {
         transform: rotateX(55deg) rotateY(0deg) rotateZ(-45deg);
@@ -14,8 +13,8 @@
             border-radius: 6px;
             overflow: hidden;
             box-shadow: var(--home-templates-block-shadow);
-            border-left: var(--home-templates-block-border-left);
-            border-bottom: var(--home-templates-block-border-bottom);
+            border-left: 5px solid var(--border-color);
+            border-bottom: 7px solid var(--border-color);
             position: relative;
             z-index: 1;
             transition: 1.5s;
@@ -80,17 +79,17 @@
                 opacity: 0;
                 visibility: hidden;
                 transform: scale(0.4);
-                background: var(--home-templates-btn-bg);
+                background: var(--card-background);
                 border-radius: 30px;
                 padding: 8px 10px;
-                color: var(--home-templates-btn-text-color);
+                color: var(--text-color);
                 font-size: 14px;
                 text-decoration: none;
-                box-shadow: var(--home-templates-btn-shadow);
-                border-top: var(--home-templates-btn-border-top);
-                border-right: var(--home-templates-btn-border-right);
-                border-left: var(--home-templates-btn-border-left);
-                border-bottom: var(--home-templates-btn-border-bottom);
+                box-shadow: 0px 10px 15px 0px rgba(0, 0, 0, 0.25);
+                border-top: 1px solid var(--border-color);
+                border-right: 1px solid var(--border-color);
+                border-left: 3px solid var(--border-color);
+                border-bottom: 4px solid var(--border-color);
             }
 
             &.border-none {
diff --git a/assets/styles/layout/landing/_users.scss b/assets/styles/layout/landing/_users.scss
index 5ebda5eaf..9917e74cf 100644
--- a/assets/styles/layout/landing/_users.scss
+++ b/assets/styles/layout/landing/_users.scss
@@ -1,10 +1,11 @@
 .landing-users {
     .fade-right {
-        background: linear-gradient(to left, var(--home-bg), transparent);
+        background: linear-gradient(to left, var(--ground-background), transparent);
     }
     .fade-left {
-        background: linear-gradient(to right, var(--home-bg), transparent);
+        background: linear-gradient(to right, var(--ground-background), transparent);
     }
+
     .section-detail {
         max-width: 1250px !important;
         margin-left: auto !important;
diff --git a/assets/styles/layout/variables/landing/_dark.scss b/assets/styles/layout/variables/landing/_dark.scss
index 906049c9a..720d6e5a2 100644
--- a/assets/styles/layout/variables/landing/_dark.scss
+++ b/assets/styles/layout/variables/landing/_dark.scss
@@ -1,53 +1,18 @@
-.landing.layout-dark {
-    --home-highlight-color:#34d399;
-    --home-highlight-darker-color:#6ee7b7;
-    --home-highlight-fore-color:#020617;
-    --home-bg:#09090b;
-    --home-border-color:#27272a;
-    --home-primary-text-color:#ffffff;
-    --home-secondary-text-color:#a1a1aa;
+:root[class="p-dark"] {
+    --home-box-ring-color: color-mix(in srgb, var(--primary-color), transparent 70%);
     --home-card-shadow:0px 50px 100px rgba(0, 0, 0, 0.25);
-    --home-box-bg:#18181b;
-    --home-linkbox-bg:rgba(255, 255, 255, .05);
-    --home-linkbox-border:1px solid rgba(255, 255, 255, .1);
-    --home-linkbox-text-color:#ffffff;
-    --home-linkbox-hover-bg:rgba(255, 255, 255, .1);
-    --home-blocks-bg:transparent;
-    --home-blocks-block-bg:#09090b;
-    --home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
-    --home-blocks-border-left:5px solid #27272a;
-    --home-blocks-border-bottom:7px solid #27272a;
-    --home-blocks-border:1px solid #27272a;
-    --home-blocks-sidebar-bg:#18181b;
-    --home-blocks-list-bg:#27272a;
-    --home-blocks-main-bg:#09090b;
-    --home-blocks-main-border:1px solid #27272a;
-    --home-blocks-item-bg:#18181b;
-    --home-blocks-image-bg:#27272a;
-    --home-blocks-text-color:#52525b;
-    --home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, 0.25);
-    --home-blocks-active-border-top:1px solid #27272a;
-    --home-blocks-active-border-right:1px solid #27272a;
-    --home-blocks-active-border-bottom:6px solid #27272a;
-    --home-blocks-active-border-left:4px solid #27272a;
-    --home-blocks-animation-shadow:0px 30px 50px 20px rgba(0, 0, 0, 0.25);
-    --home-blocks-tablebar-bg:#3f3f46;
-    --home-blocks-bar-bg:#3f3f46;
-    --home-blocks-bar-button-bg:#3f3f46;
-    --home-blocks-circle-bg:#27272a;
-    --home-templates-bg:transparent;
     --home-templates-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25);
-    --home-templates-block-border-left:5px solid #27272a;
-    --home-templates-block-border-bottom:7px solid #27272a;
     --home-templates-line:rgba(255,255,255,.1);
-    --home-templates-block-hover-bg:rgba(255,255,255,.1);
-    --home-templates-btn-bg:#18181b;
-    --home-templates-btn-text-color:#ffffff;
-    --home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.25);
-    --home-templates-btn-border-top:1px solid #27272a;
-    --home-templates-btn-border-right:1px solid #27272a;
-    --home-templates-btn-border-bottom:4px solid #27272a;
-    --home-templates-btn-border-left:3px solid #27272a;
-    --home-features-card-shadow: none;
-    --home-box-ring-color: rgba(52, 211, 153, .3);
+    --home-templates-block-hover-bg:var(--p-mask-background);
+    --home-blocks-block-shadow:0px 5px 10px 0px rgba(0, 0, 0, 0.25) , 0px 4px 25px rgba(0, 0, 0, 0.25);
+    --home-blocks-sidebar-bg:var(--p-surface-900);
+    --home-blocks-list-bg:var(--p-surface-800);
+    --home-blocks-main-bg:var(--p-surface-950);
+    --home-blocks-item-bg:var(--p-surface-900);
+    --home-blocks-image-bg:var(--p-surface-800);
+    --home-blocks-text-color:var(--p-surface-600);
+    --home-blocks-tablebar-bg:var(--p-surface-700);
+    --home-blocks-bar-bg:var(--p-surface-700);
+    --home-blocks-bar-button-bg:var(--p-surface-700);
+    --home-blocks-circle-bg:var(--p-surface-800);
 }
\ No newline at end of file
diff --git a/assets/styles/layout/variables/landing/_light.scss b/assets/styles/layout/variables/landing/_light.scss
index 7a3fdc886..a0e584552 100644
--- a/assets/styles/layout/variables/landing/_light.scss
+++ b/assets/styles/layout/variables/landing/_light.scss
@@ -1,53 +1,18 @@
-.landing.layout-light {
-    --home-highlight-color:#10b981;
-    --home-highlight-darker-color:#059669;
-    --home-highlight-fore-color:#ffffff;
-    --home-bg:#f8fafc;
-    --home-border-color:#e2e8f0;
-    --home-primary-text-color:#334155;
-    --home-secondary-text-color:#64748b;
+:root {
+    --home-box-ring-color: var(--p-primary-200);
     --home-card-shadow:0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
-    --home-box-bg:#ffffff;
-    --home-linkbox-bg:#ffffff;
-    --home-linkbox-border:1px solid #e2e8f0;
-    --home-linkbox-text-color:#334155;
-    --home-linkbox-hover-bg:#f1f5f9;
-    --home-blocks-bg:transparent;
-    --home-blocks-block-bg:#ffffff;
-    --home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
-    --home-blocks-border-left:5px solid #e2e8f0;
-    --home-blocks-border-bottom:7px solid #e2e8f0;
-    --home-blocks-border:1px solid #e2e8f0;
-    --home-blocks-sidebar-bg:#f1f5f9;
-    --home-blocks-list-bg:#f8fafc;
-    --home-blocks-main-bg:#ffffff;
-    --home-blocks-main-border:1px solid #e2e8f0;
-    --home-blocks-item-bg:#f1f5f9;
-    --home-blocks-image-bg:#e2e8f0;
-    --home-blocks-text-color:#cbd5e1;
-    --home-blocks-active-shadow:0px 30px 50px 0px rgba(0, 0, 0, .1);
-    --home-blocks-active-border-top:1px solid rgba(0,0,0,.07);
-    --home-blocks-active-border-right:1px solid rgba(0,0,0,.07);
-    --home-blocks-active-border-bottom:4px solid rgba(0,0,0,.07);
-    --home-blocks-active-border-left:4px solid rgba(0,0,0,.07);
-    --home-blocks-animation-shadow:0px 30px 50px 10px rgba(0, 0, 0, .2);
-    --home-blocks-tablebar-bg:#cbd5e1;
-    --home-blocks-bar-bg:#cbd5e1;
-    --home-blocks-bar-button-bg:#ffffff;
-    --home-blocks-circle-bg:#cbd5e1;
-    --home-templates-bg:transparent;
     --home-templates-block-shadow:0px 5px 10px 0px rgba(0,0,0,.1);
-    --home-templates-block-border-left:5px solid #d1d5db;
-    --home-templates-block-border-bottom:7px solid #d1d5db;
     --home-templates-line:rgba(0,0,0,.1);
-    --home-templates-block-hover-bg:rgba(0, 0, 0, 0.2);
-    --home-templates-btn-bg:rgba(0, 0, 0, 0.5);
-    --home-templates-btn-text-color:#ffffff;
-    --home-templates-btn-shadow:0px 10px 15px 0px rgba(0, 0, 0, 0.5);
-    --home-templates-btn-border-top:1px solid rgba(0,0,0,.1);
-    --home-templates-btn-border-right:1px solid rgba(0,0,0,.1);
-    --home-templates-btn-border-bottom:4px solid rgba(0,0,0,.1);
-    --home-templates-btn-border-left:3px solid rgba(0,0,0,.1);
-    --home-features-card-shadow: 0px 7px 15px 0px rgba(0, 0, 0, 0.02), 0px 28px 28px 0px rgba(0, 0, 0, 0.02), 0px 63px 38px 0px rgba(0, 0, 0, 0.01);
-    --home-box-ring-color: var(--primary-200);
+    --home-templates-block-hover-bg:var(--p-mask-background);
+    --home-blocks-block-shadow:-10px 4px 10px 0px rgba(0, 0, 0, .1), -10px 4px 25px rgba(0, 0, 0, .1);
+    --home-blocks-sidebar-bg:var(--p-surface-100);
+    --home-blocks-list-bg:var(--p-surface-50);
+    --home-blocks-main-bg:var(--p-surface-0);
+    --home-blocks-item-bg:var(--p-surface-100);
+    --home-blocks-image-bg:var(--p-surface-200);
+    --home-blocks-text-color:var(--p-surface-300);
+    --home-blocks-tablebar-bg:var(--p-surface-300);
+    --home-blocks-bar-bg:var(--p-surface-300);
+    --home-blocks-bar-button-bg:var(--p-surface-0);
+    --home-blocks-circle-bg:var(--p-surface-300);
 }
\ No newline at end of file
diff --git a/assets/styles/layout/variables/main/_dark.scss b/assets/styles/layout/variables/main/_dark.scss
index bc10ea0a0..c83dc2e24 100644
--- a/assets/styles/layout/variables/main/_dark.scss
+++ b/assets/styles/layout/variables/main/_dark.scss
@@ -2,6 +2,7 @@
     --primary-text-color:var(--p-primary-400);
     --primary-color: var(--p-primary-color);
     --primary-inverse-color:var(--p-primary-inverse-color);
+    --primary-hover-color: var(--p-primary-hover-color);
     --text-color: var(--p-surface-0);
     --text-secondary-color: var(--p-surface-400);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png), radial-gradient(50% 50% at center -25px, var(--p-primary-color) 0%, #000000 100%);
diff --git a/assets/styles/layout/variables/main/_light.scss b/assets/styles/layout/variables/main/_light.scss
index 252d7e6f9..3f119e89d 100644
--- a/assets/styles/layout/variables/main/_light.scss
+++ b/assets/styles/layout/variables/main/_light.scss
@@ -2,6 +2,7 @@
     --primary-text-color:var(--p-primary-600);
     --primary-color: var(--p-primary-color);
     --primary-inverse-color:var(--p-primary-inverse-color);
+    --primary-hover-color: var(--p-primary-hover-color);
     --text-color: var(--p-surface-700);
     --text-secondary-color: var(--p-surface-500);
     --glow-image: url(https://www.primefaces.org/cdn/primevue/images/layout/pattern.png);
diff --git a/layouts/default.vue b/layouts/default.vue
index 511d10940..d338ae7cb 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="layout-wrapper" :class="containerClass" :data-p-theme="$appState.theme">
+    <div :class="containerClass" :data-p-theme="$appState.theme">
         <AppNews />
         <AppTopBar @menubutton-click="onMenuButtonClick" />
         <div :class="['layout-mask', { 'layout-mask-active': sidebarActive }]" @click="onMaskClick"></div>
@@ -71,11 +71,10 @@ export default {
     computed: {
         containerClass() {
             return [
+                'layout-wrapper',
                 {
                     'layout-news-active': this.$appState.newsActive,
-                    'p-ripple-disabled': this.$appState.ripple === false,
-                    'layout-dark': this.$appState.darkTheme,
-                    'layout-light': !this.$appState.darkTheme
+                    'p-ripple-disabled': this.$appState.ripple === false
                 }
             ];
         }
diff --git a/pages/index.vue b/pages/index.vue
index 13e8093a3..017209bdf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="landingClass">
+    <div :class="containerClass">
         <AppNews />
         <AppTopBar :showMenuButton="false" />
         <HeroSection />
@@ -47,8 +47,8 @@ export default {
         }
     },
     computed: {
-        landingClass() {
-            return ['landing', { 'layout-dark': this.$appState?.darkTheme, 'layout-light': !this.$appState?.darkTheme, 'layout-news-active': this.$appState?.newsActive }];
+        containerClass() {
+            return ['landing', { 'layout-news-active': this.$appState?.newsActive, 'p-ripple-disabled': this.$appState.ripple === false }];
         }
     },
     components: {