diff --git a/packages/console/src/components/CopyToClipboard/index.module.scss b/packages/console/src/components/CopyToClipboard/index.module.scss
index 741a2a628..ff9b6b463 100644
--- a/packages/console/src/components/CopyToClipboard/index.module.scss
+++ b/packages/console/src/components/CopyToClipboard/index.module.scss
@@ -11,7 +11,7 @@
   &.contained,
   &.border {
     padding: _.unit(2) _.unit(3);
-    background: var(--color-inverse-on-surface);
+    background: var(--color-layer-2);
   }
 
   &.border {
@@ -27,11 +27,7 @@
     > svg {
       margin-left: _.unit(3);
       cursor: pointer;
-      fill: var(--color-caption);
-
-      &:hover {
-        fill: var(--color-primary);
-      }
+      fill: var(--color-icon);
     }
   }
 
diff --git a/packages/console/src/components/Dropdown/DropdownItem.module.scss b/packages/console/src/components/Dropdown/DropdownItem.module.scss
index 49f81863c..66f4cae6a 100644
--- a/packages/console/src/components/Dropdown/DropdownItem.module.scss
+++ b/packages/console/src/components/Dropdown/DropdownItem.module.scss
@@ -1,7 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .item {
-  padding: 6px _.unit(2);
+  padding: _.unit(2);
   border-radius: _.unit(2);
   list-style: none;
   font: var(--font-body-medium);
@@ -11,11 +11,11 @@
   overflow: hidden;
 
   &:hover {
-    background: var(--color-neutral-95);
+    background: var(--color-hover);
   }
 
   &.danger {
-    color: var(--color-error-40);
+    color: var(--color-error);
   }
 
   .icon {
diff --git a/packages/console/src/components/Dropdown/index.module.scss b/packages/console/src/components/Dropdown/index.module.scss
index 91c8bae54..b5c55f7df 100644
--- a/packages/console/src/components/Dropdown/index.module.scss
+++ b/packages/console/src/components/Dropdown/index.module.scss
@@ -1,9 +1,7 @@
 @use '@/scss/underscore' as _;
 
 .content {
-  background: var(--color-layer-1);
   box-shadow: var(--shadow-2);
-  border-radius: _.unit(2);
   position: absolute;
 
   &.onTop {
@@ -15,10 +13,18 @@
   }
 }
 
+.dropdownContainer {
+  background: var(--color-float);
+  border: 1px solid var(--color-divider);
+  border-radius: 8px;
+}
+
 .title {
-  padding: _.unit(4) _.unit(3) 0 _.unit(3);
-  font: var(--font-subhead-cap-small);
+  padding: _.unit(3);
+  font: var(--font-subhead-cap);
   color: var(--color-caption);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
 }
 
 .overlay {
diff --git a/packages/console/src/components/Dropdown/index.tsx b/packages/console/src/components/Dropdown/index.tsx
index d4f974e4b..13bee9010 100644
--- a/packages/console/src/components/Dropdown/index.tsx
+++ b/packages/console/src/components/Dropdown/index.tsx
@@ -59,7 +59,7 @@ const Dropdown = ({
       onRequestClose={onClose}
       onAfterOpen={mutate}
     >
-      <div ref={overlayRef}>
+      <div ref={overlayRef} className={styles.dropdownContainer}>
         {title && <div className={classNames(styles.title, titleClassName)}>{title}</div>}
         <ul className={classNames(styles.list, className)} onClick={onClose}>
           {children}
diff --git a/packages/console/src/components/Index/index.module.scss b/packages/console/src/components/Index/index.module.scss
index b51e0cde1..3be3aae8e 100644
--- a/packages/console/src/components/Index/index.module.scss
+++ b/packages/console/src/components/Index/index.module.scss
@@ -7,8 +7,8 @@
   width: 28px;
   height: 28px;
   border-radius: 50%;
-  color: var(--color-primary);
-  background: var(--color-surface-5);
+  color: var(--color-text-link);
+  background: var(--color-focused-variant);
   font: var(--font-title-medium);
 
   &.active {
diff --git a/packages/console/src/components/ModalLayout/index.module.scss b/packages/console/src/components/ModalLayout/index.module.scss
index 9d662b00c..88fe90ca6 100644
--- a/packages/console/src/components/ModalLayout/index.module.scss
+++ b/packages/console/src/components/ModalLayout/index.module.scss
@@ -8,6 +8,8 @@
   min-width: dim.$modal-layout-width-small;
   padding: _.unit(6);
   margin: 0 _.unit(6);
+  border: 1px solid var(--color-divider);
+  box-shadow: var(--shadow-3);
 
   .header {
     display: flex;
diff --git a/packages/console/src/components/RadioGroup/index.module.scss b/packages/console/src/components/RadioGroup/index.module.scss
index 1f3ca5f4f..c29d13eab 100644
--- a/packages/console/src/components/RadioGroup/index.module.scss
+++ b/packages/console/src/components/RadioGroup/index.module.scss
@@ -8,87 +8,91 @@
     width: 0;
     height: 0;
   }
+}
 
-  &.card {
+.card {
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 _.unit(-8) _.unit(-8) 0;
+
+  > .radio {
+    position: relative;
+    flex: 1;
+    min-width: 180px;
+    max-width: 230px;
+    padding: _.unit(5);
     display: flex;
-    flex-wrap: wrap;
-    margin: 0 _.unit(-8) _.unit(-8) 0;
+    flex-direction: column;
+    border-radius: _.unit(4);
+    border: 1px solid transparent;
+    outline: 1px solid var(--color-neutral-90);
+    user-select: none;
+    cursor: pointer;
+    margin: 0 _.unit(8) _.unit(8) 0;
 
-    > .radio {
-      position: relative;
-      flex: 1;
-      min-width: 180px;
-      max-width: 220px;
-      padding: _.unit(5);
-      display: flex;
-      flex-direction: column;
-      border-radius: _.unit(4);
-      border: 1px solid transparent;
-      outline: 1px solid var(--color-neutral-90);
-      user-select: none;
-      cursor: pointer;
-      margin: 0 _.unit(8) _.unit(8) 0;
+    &:focus {
+      outline: 1px solid var(--color-primary);
+      box-shadow: var(--shadow-2);
+    }
 
-      &:focus,
-      &:hover {
-        outline: 1px solid var(--color-primary);
-        box-shadow: var(--shadow-2);
-      }
+    &:hover {
+      background-color: var(--color-layer-2);
+    }
+
+    svg {
+      opacity: 0%;
+      position: absolute;
+      right: _.unit(5);
+      top: _.unit(5);
+    }
+
+    &.checked {
+      border-color: var(--color-primary);
+      outline: 1px solid var(--color-primary);
 
       svg {
-        opacity: 0%;
-        position: absolute;
-        right: _.unit(5);
-        top: _.unit(5);
-      }
-
-      &.checked {
-        border-color: var(--color-primary);
-        outline: 1px solid var(--color-primary);
-
-        svg {
-          opacity: 100%;
-        }
+        opacity: 100%;
       }
     }
   }
+}
 
-  &.plain {
-    font: var(--font-body-medium);
+.plain {
+  font: var(--font-body-medium);
 
-    > .radio {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
+  /* stylelint-disable-next-line no-descending-specificity */
+  > .radio {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
 
-      &:not(:last-child) {
-        margin-bottom: _.unit(2);
-      }
+    &:not(:last-child) {
+      margin-bottom: _.unit(2);
+    }
 
-      .indicator {
+    .indicator {
+      border-radius: 50%;
+      border: 2px solid var(--color-neutral-60);
+      display: inline-block;
+      margin-right: _.unit(2);
+
+      &::before {
+        content: '';
+        background: var(--color-layer-1);
+        width: 10px;
+        height: 10px;
+        display: block;
         border-radius: 50%;
-        border: 2px solid var(--color-neutral-60);
-        display: inline-block;
-        margin-right: _.unit(2);
+        border: 2px solid var(--color-layer-1);
+      }
+    }
+
+    &.checked {
+      .indicator {
+        border-color: var(--color-primary);
 
         &::before {
-          content: '';
-          background: var(--color-layer-1);
-          width: 10px;
-          height: 10px;
-          display: block;
-          border-radius: 50%;
-          border: 2px solid var(--color-layer-1);
-        }
-      }
-
-      &.checked {
-        .indicator {
-          border-color: var(--color-primary);
-
-          &::before {
-            background: var(--color-primary);
-          }
+          background: var(--color-primary);
         }
       }
     }
diff --git a/packages/console/src/components/Select/index.module.scss b/packages/console/src/components/Select/index.module.scss
index 32d4bde3b..5134f2149 100644
--- a/packages/console/src/components/Select/index.module.scss
+++ b/packages/console/src/components/Select/index.module.scss
@@ -32,7 +32,7 @@
     border-color: var(--color-error);
 
     &.open {
-      outline-color: var(--color-error-80);
+      outline-color: var(--color-danger-focused);
     }
   }
 
diff --git a/packages/console/src/components/TextButton/index.module.scss b/packages/console/src/components/TextButton/index.module.scss
index b1d120e35..6542209bb 100644
--- a/packages/console/src/components/TextButton/index.module.scss
+++ b/packages/console/src/components/TextButton/index.module.scss
@@ -13,19 +13,11 @@
     fill: var(--color-primary);
   }
 
-  &:active {
-    background: var(--color-primary-95);
-  }
-
   &:hover {
-    color: var(--color-primary-30);
-
-    svg {
-      fill: var(--color-primary-30);
-    }
+    text-decoration: underline;
   }
 
   &:focus {
-    outline: 2px solid var(--color-primary-80);
+    outline: 2px solid var(--color-focused-variant);
   }
 }
diff --git a/packages/console/src/components/TextInput/index.module.scss b/packages/console/src/components/TextInput/index.module.scss
index 9f611ca33..96fc773bd 100644
--- a/packages/console/src/components/TextInput/index.module.scss
+++ b/packages/console/src/components/TextInput/index.module.scss
@@ -76,7 +76,7 @@
     border-color: var(--color-error);
 
     &:focus-within {
-      outline-color: var(--color-error-80);
+      outline-color: var(--color-danger-focused);
     }
   }
 }
diff --git a/packages/console/src/components/Tooltip/index.module.scss b/packages/console/src/components/Tooltip/index.module.scss
index d7ec1bc97..9c9400b5f 100644
--- a/packages/console/src/components/Tooltip/index.module.scss
+++ b/packages/console/src/components/Tooltip/index.module.scss
@@ -3,8 +3,8 @@
 .tooltip {
   position: absolute;
   border-radius: 8px;
-  background: var(--color-on-background);
-  color: var(--color-background);
+  background: var(--color-tooltip-background);
+  color: var(--color-tooltip-text);
   box-shadow: var(--shadow-1);
   padding: _.unit(2) _.unit(3);
   font: var(--font-body-medium);
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.module.scss b/packages/console/src/pages/Applications/components/CreateForm/index.module.scss
index 2c16304b6..112da9ab7 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.module.scss
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.module.scss
@@ -1,5 +1,9 @@
 @use '@/scss/underscore' as _;
 
+.radioGroup {
+  margin-top: _.unit(2);
+}
+
 .error {
   font: var(--font-body-medium);
   color: var(--color-error);
diff --git a/packages/console/src/pages/Applications/components/CreateForm/index.tsx b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
index 1b6e16dc3..ebb1b5c7a 100644
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@@ -98,7 +98,14 @@ const CreateForm = ({ onClose }: Props) => {
     >
       <form>
         <FormField title="admin_console.applications.select_application_type">
-          <RadioGroup ref={ref} name={name} value={value} type="card" onChange={onChange}>
+          <RadioGroup
+            ref={ref}
+            className={styles.radioGroup}
+            name={name}
+            value={value}
+            type="card"
+            onChange={onChange}
+          >
             {Object.values(ApplicationType).map((value) => (
               <Radio key={value} value={value}>
                 <TypeDescription
diff --git a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.module.scss b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.module.scss
index 207a2393b..bded3ace9 100644
--- a/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.module.scss
+++ b/packages/console/src/pages/GetStarted/components/GetStartedProgress/index.module.scss
@@ -41,11 +41,16 @@
   width: 20px;
   height: 20px;
   font: var(--font-subhead-cap);
+
+  > svg {
+    width: 16px;
+    height: 16px;
+  }
 }
 
 .dropdownItem {
   height: 44px;
   padding: 0 _.unit(5) 0 _.unit(4);
-  border-top: 1px solid var(--color-neutral-95);
+  border-top: 1px solid var(--color-hover);
   border-radius: unset;
 }
diff --git a/packages/console/src/scss/_colors.scss b/packages/console/src/scss/_colors.scss
index d9226e10a..00b753769 100644
--- a/packages/console/src/scss/_colors.scss
+++ b/packages/console/src/scss/_colors.scss
@@ -134,6 +134,7 @@
   --color-base: var(--color-surface-1);
   --color-layer-1: var(--color-all-100);
   --color-layer-2: var(--color-neutral-95);
+  --color-float: var(--color-all-100);
   --color-inverse-surface: var(--color-neutral-20);
   --color-inverse-on-surface: var(--color-neutral-95);
   --color-inverse-primary: var(--color-primary-80);
@@ -146,13 +147,16 @@
   --color-focused-variant: rgba(93, 52, 242, 16%); // 16% Primary-40
 
   // Shadows
-  --shadow-1: 0 4px 8px rgba(66, 41, 159, 8%);
-  --shadow-2: 0 4px 12px rgba(66, 41, 159, 12%);
-  --shadow-2-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
-  --shadow-3: 0 4px 16px rgba(66, 41, 159, 16%);
+  --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
+  --shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
+  --shadow-2-reversed: 0 -4px 12px rgba(0, 0, 0, 12%);
+  --shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
 
   // Client specific variables (not available in design system)
   --color-danger-focused: rgba(186, 27, 27, 16%); // 16% Error-40
+  --color-tooltip-background: #34353f; // dark theme Surface-4
+  --color-tooltip-text: var(--color-neutral-99);
+  --color-overlay: rgba(0, 0, 0, 30%);
   --color-skeleton-shimmer-rgb: 255, 255, 255; // rgb of Layer-1
 }
 
@@ -291,7 +295,8 @@
   --color-disabled: var(--color-neutral-80);
   --color-base: var(--color-surface);
   --color-layer-1: var(--color-surface-2);
-  --color-layer-2: var(--color-surface-3);
+  --color-layer-2: var(--color-surface-4);
+  --color-float: var(--color-surface-4);
   --color-inverse-surface: var(--color-neutral-20);
   --color-inverse-on-surface: var(--color-neutral-95);
   --color-inverse-primary: var(--color-primary-80);
@@ -304,12 +309,15 @@
   --color-focused-variant: rgba(202, 190, 255, 16%); // 16% Primary-40
 
   // Shadows
-  --shadow-1: 0 4px 8px rgba(66, 41, 159, 8%);
-  --shadow-2: 0 4px 12px rgba(66, 41, 159, 12%);
-  --shadow-2-reversed: 0 -4px 12px rgba(66, 41, 159, 12%);
-  --shadow-3: 0 4px 16px rgba(66, 41, 159, 16%);
+  --shadow-1: 0 4px 8px rgba(0, 0, 0, 8%);
+  --shadow-2: 0 2px 12px rgba(0, 0, 0, 12%);
+  --shadow-2-reversed: 0 -4px 12px rgba(0, 0, 0, 12%);
+  --shadow-3: 0 4px 16px rgba(0, 0, 0, 20%);
 
   // Client specific variables (not available in design system)
   --color-danger-focused: rgba(255, 180, 169, 16%); // 16% Error-40
+  --color-tooltip-background: var(--color-surface-4);
+  --color-tooltip-text: var(--color-neutral-10);
+  --color-overlay: rgba(0, 0, 0, 30%);
   --color-skeleton-shimmer-rgb: 42, 44, 50; // rgb of Layer-1
 }
diff --git a/packages/console/src/scss/modal.module.scss b/packages/console/src/scss/modal.module.scss
index a367c3247..e8764e13f 100644
--- a/packages/console/src/scss/modal.module.scss
+++ b/packages/console/src/scss/modal.module.scss
@@ -2,7 +2,7 @@
 
 .overlay {
   position: fixed;
-  background: rgba(0, 0, 0, 40%);
+  background: var(--color-overlay);
   inset: 0;
   overflow-y: auto;
   padding: _.unit(12) 0;