diff --git a/frontend/current_screen.png b/frontend/current_screen.png
index 7e013403..7f2dbdc5 100644
Binary files a/frontend/current_screen.png and b/frontend/current_screen.png differ
diff --git a/frontend/src/shared/shell/KsTabs.vue b/frontend/src/shared/shell/KsTabs.vue
index 7a53d896..643e083a 100644
--- a/frontend/src/shared/shell/KsTabs.vue
+++ b/frontend/src/shared/shell/KsTabs.vue
@@ -127,8 +127,8 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
   display: flex;
   align-items: center;
   height: 32px;
-  background-color: #f1f5f9;
-  border-bottom: 1px solid var(--ks-color-neutral-300);
+  background-color: var(--ks-color-canvas);
+  border-bottom: 1px solid var(--ks-color-border-strong);
   position: relative;
   overflow: visible;
   gap: var(--ks-space-1);
@@ -156,8 +156,8 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
   width: 150px;
   min-width: 150px;
   max-width: 150px;
-  background-color: var(--ks-color-surface);
-  border: 1px solid var(--ks-color-neutral-300);
+  background-color: var(--ks-color-neutral-100);
+  border: 1px solid var(--ks-color-border-strong);
   border-bottom: none;
   border-radius: 4px 4px 0 0;
   color: var(--ks-color-neutral-600);
@@ -175,7 +175,7 @@ const isTabActive = (tabId: string) => activeTabId.value === tabId
 }
 
 .ks-tabs__tab--active {
-  background-color: #ffffff;
+  background-color: var(--ks-color-surface);
   color: var(--ks-color-action);
   border-color: var(--ks-color-action);
   border-top: 2px solid var(--ks-color-action);