diff --git a/packages/components/src/components/date-picker/date-picker.css b/packages/components/src/components/date-picker/date-picker.css
index a61a57b52f..db3a2a23fd 100644
--- a/packages/components/src/components/date-picker/date-picker.css
+++ b/packages/components/src/components/date-picker/date-picker.css
@@ -18,10 +18,7 @@ duet-date-picker {
   --duet-font-bold: var(--telekom-typography-font-weight-medium);
   --duet-color-placeholder: var(--telekom-color-ui-additional-regular);
   --duet-radius: var(--telekom-radius-standard);
-  --duet-color-text-active: var(
-    --telekom-color-text-and-icon-white-standard,
-    #ffffff
-  );
+  --duet-color-text-active: var(--telekom-color-text-and-icon-white-standard);
   --duet-color-button: var(--telekom-color-background-surface);
   --duet-color-surface: var(--telekom-color-background-surface);
   --duet-z-index: 600;
diff --git a/packages/components/src/components/pagination/pagination.css b/packages/components/src/components/pagination/pagination.css
index 763912a69d..043b13bf09 100644
--- a/packages/components/src/components/pagination/pagination.css
+++ b/packages/components/src/components/pagination/pagination.css
@@ -13,7 +13,7 @@
   --color: var(--telekom-color-text-and-icon-standard);
   --radius: var(--telekom-radius-large);
   --font-size: var(--telekom-typography-font-size-small);
-  --border: 1px solid var(--telekom-color-ui-additional-subtle);
+  --border: 1px solid var(--telekom-color-ui-additional-light);
   --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-active: var(--telekom-color-text-and-icon-primary-pressed);
   --color-button: var(--telekom-color-ui-additional-subtle);
diff --git a/packages/components/src/components/tab-header/tab-header.css b/packages/components/src/components/tab-header/tab-header.css
index 278f0715ea..a5e2267368 100644
--- a/packages/components/src/components/tab-header/tab-header.css
+++ b/packages/components/src/components/tab-header/tab-header.css
@@ -17,9 +17,6 @@
   --color: var(--telekom-color-text-and-icon-standard);
   --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-selected: var(--telekom-color-text-and-icon-primary-standard);
-  --background-underline-hover: var(--telekom-color-primary-hovered);
-  --background-underline-active: var(--telekom-color-primary-pressed);
-  --color-active: var(--telekom-color-text-and-icon-primary-standard);
   --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
     var(--telekom-color-functional-focus);
   --spacing-right-slotted: var(--telekom-spacing-unit-x2);
@@ -97,13 +94,13 @@
   color: var(--color-hover);
 }
 .tab-header:hover:after {
-  background-color: var(--background-underline-hover);
+  background-color: var(--color-hover);
 }
 .tab-header:active {
-  color: var(--color-active);
+  color: var(--color-selected);
 }
 .tab-header:active:after {
-  background-color: var(--background-underline-active);
+  background-color: var(--color-selected);
 }
 .tab-header ::slotted(*) {
   margin-right: var(--spacing-right-slotted);
diff --git a/packages/storybook-vue/stories/components/callout/Callout.stories.mdx b/packages/storybook-vue/stories/components/callout/Callout.stories.mdx
index 95903692b4..0608b44c04 100644
--- a/packages/storybook-vue/stories/components/callout/Callout.stories.mdx
+++ b/packages/storybook-vue/stories/components/callout/Callout.stories.mdx
@@ -134,7 +134,7 @@ export const TemplateAsterisk = (args, { argTypes }) => ({
   --height-small: 120px;
   --height-large: 160px;
   --width-large: 160px;
-  --color-blue: var(--telekom-color-additional-blue-600);
+  --color-blue: var(--telekom-color-functional-informational-standard);
   --color-white: var(--telekom-color-background-surface);
   --color-black: var(--telekom-color-text-and-icon-functional-black);
   --color-primary: var(--telekom-color-primary-standard);
diff --git a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
index 3f8be360ff..87c9079449 100644
--- a/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
+++ b/packages/storybook-vue/stories/components/checkbox/Checkbox.stories.mdx
@@ -71,7 +71,7 @@ scale-checkbox {
       var(--telekom-motion-easing-standard)
     );
   --color-text: var(--telekom-color-text-and-icon-standard);
-  --color-error: var(--telekom-color-text-and-icon-functional-danger);
+  --color-error: var(--telekom-color-functional-danger-standard);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --color-standard: var(--telekom-color-background-surface);
   --background-disabled: var(--telekom-color-ui-outlined-fill-disabled);
diff --git a/packages/storybook-vue/stories/components/footer/Footer.stories.mdx b/packages/storybook-vue/stories/components/footer/Footer.stories.mdx
index f8db49c034..366b52da8a 100644
--- a/packages/storybook-vue/stories/components/footer/Footer.stories.mdx
+++ b/packages/storybook-vue/stories/components/footer/Footer.stories.mdx
@@ -133,7 +133,7 @@ export const Template = (args, { argTypes }) => ({
     --telekom-color-text-and-icon-primary-pressed
   );
   --box-shadow-navigation-focus: 0 0 0 var(--telekom-spacing-unit-x05) var(
-      --telekom-color-primary-standard
+      --telekom-color-functional-focus
     );
   --border-color-standard-hover: var(
     --telekom-color-text-and-icon-white-standard
diff --git a/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx b/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
index ffacf65c6e..92350f76a3 100644
--- a/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
+++ b/packages/storybook-vue/stories/components/progress-bar/ProgressBar.stories.mdx
@@ -165,7 +165,7 @@ export const TemplateCustomColor = (args, { argTypes }) => ({
   --color-error: var(--telekom-color-text-and-icon-functional-danger);
   --color-disabled: var(--telekom-color-text-and-icon-disabled);
   --background: var(--telekom-color-primary-standard);
-  --color-inner-status: var(--telekom-color-background-surface);
+  --color-inner-status: var(--telekom-color-primary-standard);
   --font-size-inner-status: var(--telekom-typography-font-size-small);
   --font-size-status: var(--telekom-typography-font-size-small);
   --font-weight-status: var(--telekom-typography-font-weight-extra-bold);
@@ -174,7 +174,7 @@ export const TemplateCustomColor = (args, { argTypes }) => ({
   --font-size-status-description: var(--telekom-typography-font-size-small);
   --font-weight-status-description: var(--telekom-typography-font-weight-bold);
   --spacing-label: var(--telekom-spacing-unit-x2) 0;
-  --border: 1px solid var(--telekom-color-ui-additional-regular);
+  --border: 1px solid var(--telekom-color-ui-outlined-border-standard);
 }
 ```
 
diff --git a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
index bf0d14da58..8aa6e10bfc 100644
--- a/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
+++ b/packages/storybook-vue/stories/components/tab-navigation/TabNav.stories.mdx
@@ -116,9 +116,6 @@ export const Template = (args, { argTypes }) => ({
   --color: var(--telekom-color-text-and-icon-standard);
   --color-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-selected: var(--telekom-color-text-and-icon-primary-standard);
-  --background-underline-hover: var(--telekom-color-primary-hovered);
-  --background-underline-active: var(--telekom-color-primary-pressed);
-  --color-active: var(--telekom-color-text-and-icon-primary-standard);
   --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight) var(
       --telekom-color-functional-focus
     );