diff --git a/packages/ui/src/1-css-variables/_colors.scss b/packages/ui/src/1-css-variables/_colors.scss
index 5c0e71b980..2b9700eaba 100644
--- a/packages/ui/src/1-css-variables/_colors.scss
+++ b/packages/ui/src/1-css-variables/_colors.scss
@@ -23,6 +23,7 @@
   --color-neutral-90:  240 7% 12%;   /* #1D1D21 */
   --color-neutral-100: 240 6% 10%;   /* #19191C */
   --color-neutral-105: 240 5% 8%;    /* #141416 */
+  --color-neutral-1000:0 0% 0%;      /* #000000 */
 
   /** Information **/
   --color-information-hue: 189;
diff --git a/packages/ui/src/7-components/_secondary-tabs.scss b/packages/ui/src/7-components/_secondary-tabs.scss
index 35aa2df721..d3bd542714 100644
--- a/packages/ui/src/7-components/_secondary-tabs.scss
+++ b/packages/ui/src/7-components/_secondary-tabs.scss
@@ -35,7 +35,7 @@
     }
   }
   #{$theme-dark} & {
-    --p-drop-tab-text-color: var(--color-neutral-15);
+    --p-drop-tab-text-color: var(--color-neutral-20);
     &-button {
       &:where(#{$disabled}) {
         --p-drop-tab-bg-color: var(--color-neutral-85);
diff --git a/packages/ui/src/7-components/_tabs.scss b/packages/ui/src/7-components/_tabs.scss
index 2e3e4193c2..d843bb53b3 100644
--- a/packages/ui/src/7-components/_tabs.scss
+++ b/packages/ui/src/7-components/_tabs.scss
@@ -1,16 +1,74 @@
 @use '../abstract' as *;
 
 .tabs {
-  --p-tabs-text-color:      var(--color-neutral-60);
-  --p-tabs-color-hover:     var(--color-neutral-10);
-  --p-tabs-color-selected:  var(--color-primary-200);
+  --p-tabs-text-color:            var(--p-tabs-text-color-default);
+  --p-tabs-text-color-default:    var(--color-neutral-50);
+  --p-tabs-text-color-hover:      var(--color-neutral-80);
+  --p-tabs-text-color-active:     var(--color-neutral-80);
+  --p-tabs-text-color-selected:   var(--color-neutral-80);
 
-  --tabs-shadow-color:      var(--color-neutral-0);
+  --p-tabs-bg-color:              var(--p-tabs-bg-defalut);
+  --p-tabs-bg-defalut:            var(--transparent);
+  --p-tabs-bg-color-hover:        var(--color-neutral-10);
+
+  --p-tabs-outline-color:          var(--p-tabs-outline-color-default);
+  --p-tabs-outline-color-default:  var(--transparent);
+  --p-tabs-outline-color-focus:    var(--color-neutral-1000) / 0.16;
+
+  --p-tabs-border-color:          var(--p-tabs-border-color-default);
+  --p-tabs-border-color-default:  var(--transparent);
+  --p-tabs-border-color-selected: var(--color-neutral-80);
+
+  --tabs-shadow-color:       var(--color-neutral-0);
+  --tabs-button-arrow-color: var(--color-neutral-80);
 
   position:relative;
 
+  &-button {
+    position:relative; display:flex; align-items:center;
+    padding-inline:pxToRem(4); padding-block:pxToRem(7);
+    user-select:none; border-radius:pxToRem(10);
+
+    color:hsl(var(--p-tabs-text-color));
+    background-color:hsl(var(--p-tabs-bg-color)); background-clip:padding-box;
+    border:solid pxToRem(4) hsl(var(--p-tabs-outline-color));
+
+
+    .text {
+      display:flex; align-items:center; padding-inline:pxToRem(12); inline-size:100%;
+    }
+    &::before {
+      content:""; display:block; block-size:pxToRem(1); background-color:transparent;
+      position:absolute; inset-inline:0; inset-block-end:pxToRem(-4);
+      border-radius:var(--border-radius-xsmall);
+    }
+    &::after {
+      content:""; display:block; border-radius:var(--border-radius-small);
+    }
+    &:where(:hover, &:focus) {
+      box-shadow: none;
+    }
+    &:where(:hover):not(#{$disabled}) {
+      --p-tabs-text-color:    var(--p-tabs-text-color-hover);
+      --p-tabs-bg-color:      var(--p-tabs-bg-color-hover);
+    }
+    &:where(:focus):not(#{$disabled}) {
+      --p-tabs-outline-color: var(--p-tabs-outline-color-focus);
+    }
+    &:where(:active):not(#{$disabled}) {
+      --p-tabs-text-color:    var(--p-tabs-text-color-active);
+    }
+    &:where(#{$disabled}) {
+      opacity: 0.4;
+    }
+    &:is(.is-selected) {
+      --p-tabs-text-color:    var(--p-tabs-text-color-selected);
+      &::before{ background-color:hsl(var(--p-tabs-border-color-selected)); }
+    }
+  }
+
   &-list {
-    display:flex; gap:pxToRem(16); overflow:auto; block-size:pxToRem(50);
+    display:flex; gap:pxToRem(16); overflow:auto; padding-block-end:pxToRem(6);
     /* remove Scroll */
     -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */
     &::-webkit-scrollbar { display:none; } /* Webkit */
@@ -18,8 +76,8 @@
   &-item { }
   &-button-scroll {
     position:absolute; z-index:3; inset-block:0;
-    display:flex; align-items:center; inline-size:pxToRem(80); block-size:100%; padding-block-end:pxToRem(5); opacity:0.75; transition:var(--transition);
-    color:hsl(var(--p-tabs-bg-color)); font-size:var(--font-size-3);
+    display:flex; align-items:center; inline-size:pxToRem(80); block-size:100%; padding-block-end:pxToRem(5); opacity:0.4; transition:var(--transition);
+    color:hsl(var(--tabs-button-arrow-color)); font-size:var(--font-size-3);
     > * { margin-inline:-3px; transform:scaleX(var(--transform-direction)); }
     &:where(:hover, :focus) { opacity:1; }
     &.is-start  {
@@ -31,34 +89,19 @@
       background:linear-gradient(to left, hsl(var(--tabs-shadow-color)) 0%, hsl(var(--tabs-shadow-color) / 0) 100%);
     }
   }
-  &-button {
-    position:relative; display:flex; align-items:center; block-size:100%;
-    padding-inline:pxToRem(4); padding-block-start:pxToRem(4); padding-block-end:pxToRem(9);
-    color:hsl(var(--p-tabs-text-color)); user-select:none;
-    .text {
-      display:flex; align-items:center; padding-inline:pxToRem(12); inline-size:100%; block-size:pxToRem(38); border-radius:var(--border-radius-small);
-    }
-    &::before{
-      content:""; display:block; block-size:pxToRem(2); background-color:transparent;
-      position:absolute; inset-inline:0; inset-block-end:0;
-      border-radius:var(--border-radius-xsmall);
-    }
-    &::after {
-      content:""; display:block; border-radius:var(--border-radius-small);
-    }
-    &:where(:hover, &:focus){
-      box-shadow: none;
-      .text { background-color: hsl(var(--p-tabs-color-hover)); }
-    }
-    &:where(.is-selected) {
-      color:hsl(var(--p-tabs-color-selected));
-      &::before{ background-color:hsl(var(--p-tabs-color-selected)); }
-    }
-  }
+
   #{$theme-dark} & {
-    --p-tabs-text-color:      var(--color-neutral-20);
-    --p-tabs-color-hover:     var(--color-neutral-85);
-    --p-tabs-color-selected:  var(--color-primary-200);
+    --p-tabs-text-color-hover:      var(--color-neutral-10);
+    --p-tabs-text-color-active:     var(--color-neutral-10);
+    --p-tabs-text-color-selected:   var(--color-neutral-10);
+
+    --p-tabs-bg-color-hover:        var(--color-neutral-0) / 0.04;
+
+    --p-tabs-outline-color-focus:    var(--color-neutral-0) / 0.16;
+
+    --p-tabs-border-color-selected: var(--color-neutral-10);
+
+    --tabs-button-arrow-color: var(--color-neutral-20);
 
     --tabs-shadow-color:      var(--color-neutral-100);
   }