diff --git a/packages/ketchup-showcase/public/showcase.css b/packages/ketchup-showcase/public/showcase.css
index 923abe3954..2173efd8c6 100644
--- a/packages/ketchup-showcase/public/showcase.css
+++ b/packages/ketchup-showcase/public/showcase.css
@@ -39,7 +39,7 @@
 
 code.flat {
   background: var(--kup-gray-color-10);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   border: 1px solid var(--kup-gray-color-30);
   color: var(--kup-gray-color-90);
   display: flex;
diff --git a/packages/ketchup/src/assets/image-list.js b/packages/ketchup/src/assets/image-list.js
index ec338e0819..5bc8761663 100644
--- a/packages/ketchup/src/assets/image-list.js
+++ b/packages/ketchup/src/assets/image-list.js
@@ -595,6 +595,11 @@ const data = [
         isExpanded: false,
         value: 'Framework',
         visible: true,
+        badgeData: [
+            {
+                text: '2',
+            },
+        ],
     },
     {
         children: [
diff --git a/packages/ketchup/src/calendar.html b/packages/ketchup/src/calendar.html
index 2d55ad9ccf..8aebbf0631 100644
--- a/packages/ketchup/src/calendar.html
+++ b/packages/ketchup/src/calendar.html
@@ -32,9 +32,9 @@
             }
 
             h1 {
-                background-color: var(--kup-primary-color);
+                background-color: var(--kup-gray-color-90);
                 border-radius: 4px;
-                color: var(--kup-text-on-primary-color);
+                color: var(--kup-gray-color-10);
                 line-height: 2em;
                 margin-top: 0;
                 text-align: center;
diff --git a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
index 1649389239..45f14326c6 100644
--- a/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
+++ b/packages/ketchup/src/components/kup-box/styles/kup-box-main.scss
@@ -61,7 +61,7 @@
 
     .box {
       background-color: var(--kup_box_background_color);
-      border-radius: var(--kup-radius-00);
+      border-radius: var(--kup-radius-01);
       flex-grow: 1;
       cursor: pointer;
       position: relative;
diff --git a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss
index 5c0bb113e3..045808ce59 100644
--- a/packages/ketchup/src/components/kup-calendar/kup-calendar.scss
+++ b/packages/ketchup/src/components/kup-calendar/kup-calendar.scss
@@ -18,15 +18,15 @@
 :host {
   --kup_calendar_background_color: var(
     --kup-calendar-background-color,
-    var(--kup-background-color)
+    var(--kup-gray-color-10)
   );
   --kup_calendar_border_color: var(
     --kup-calendar-border-color,
-    var(--kup-border-color)
+    var(--kup-gray-color-20)
   );
   --kup_calendar_event_background_color: var(
     --kup-calendar-event-background-color,
-    var(--kup-primary-color)
+    var(--kup-gray-color-30)
   );
   --kup_calendar_event_border_radius: var(
     --kup-calendar-event-border-radius,
@@ -34,7 +34,7 @@
   );
   --kup_calendar_event_color: var(
     --kup-calendar-event-color,
-    var(--kup-text-on-primary-color)
+    var(--kup-gray-color-70)
   );
   --kup_calendar_font_family: var(
     --kup-calendar-font-family,
@@ -43,15 +43,15 @@
   --kup_calendar_font_size: var(--kup-calendar-font-size, var(--kup-font-size));
   --kup_calendar_header_background_color: var(
     --kup-calendar-header-background-color,
-    var(--kup-title-background-color)
+    var(--kup-gray-color-20)
   );
   --kup_calendar_header_color: var(
     --kup-calendar-header-color,
-    var(--kup-title-color)
+    var(--kup-gray-color-70)
   );
   --kup_calendar_navigator_border: var(
     --kup-calendar-navigator-border,
-    2px solid var(--kup-border-color)
+    1px solid var(--kup-gray-color-20)
   );
   --kup_calendar_no_work_day_background_color: var(
     --kup-calendar-no-work-day-background-color,
@@ -59,11 +59,11 @@
   );
   --kup_calendar_no_work_day_color: var(
     --kup-calendar-no-work-day-color,
-    var(--kup-disabled-color)
+    var(--kup-gray-color-30)
   );
   --kup_calendar_today_background_color: var(
     --kup-calendar-today-background-color,
-    rgba(var(--kup-primary-color-rgb), 0.125)
+    var(--kup-gray-color-30)
   );
 
   background-color: var(--kup_calendar_background_color);
@@ -76,27 +76,23 @@
 
 .navigation {
   align-items: center;
-  border-left: var(--kup_calendar_navigator_border);
-  border-right: var(--kup_calendar_navigator_border);
-  border-top: var(--kup_calendar_navigator_border);
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
   display: flex;
   justify-content: space-between;
+  background-color: var(--kup_calendar_background_color);
 
   &__left {
     --kup-font-size: 0.875em;
     display: flex;
+    margin-left: var(--kup-space-03);
   }
 
   &__right {
     display: flex;
+    margin-right: var(--kup-space-03);
   }
 
   &__title {
-    font-size: 1.25em;
-    font-weight: 400;
-    letter-spacing: 0.1892857em;
+    @include kup-heading-02;
     margin: 0px;
     padding: 0px 0.5em;
 
@@ -178,6 +174,7 @@
   .fc-list-day-cushion {
     background: var(--kup_calendar_header_background_color);
     color: var(--kup_calendar_header_color);
+    @include kup-heading-01;
   }
 
   .fc-list-event:hover td {
@@ -188,7 +185,6 @@
   .fc-daygrid-event,
   .fc-timegrid-event {
     background: var(--kup_calendar_event_background_color);
-    border-radius: var(--kup_calendar_event_border_radius);
     border: none;
     border-color: var(--kup_calendar_event_background_color);
     color: var(--kup_calendar_event_color);
@@ -217,18 +213,18 @@
   .navigation {
     flex-direction: column;
   }
-  .calendar{
+  .calendar {
     height: 100%;
-    .fc-view-harness{
+    .fc-view-harness {
       min-height: 450px;
     }
   }
-  
-  .navigation .navigation__left{
+
+  .navigation .navigation__left {
     font-size: 20px;
     gap: 8px;
   }
-  .navigation .navigation__right .f-chip .chip-set .chip-set__item{
+  .navigation .navigation__right .f-chip .chip-set .chip-set__item {
     font-size: 16px;
   }
 }
diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
index d64ee70d6f..977e82968f 100644
--- a/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
+++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-built-in-1.scss
@@ -17,7 +17,7 @@
     0px 3px 6px 0 rgba(0, 0, 0, 0.3)
   );
   background-color: var(--kup_card_background_color);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   box-sizing: border-box;
   box-shadow: 0 2px 1px -1px rgba(128, 128, 128, 0.1),
     0 1px 1px 0 rgba(128, 128, 128, 0.1), 0 1px 3px 0 rgba(128, 128, 128, 0.6);
diff --git a/packages/ketchup/src/components/kup-dialog/kup-dialog.scss b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss
index 2e18886f60..a9a99774ac 100644
--- a/packages/ketchup/src/components/kup-dialog/kup-dialog.scss
+++ b/packages/ketchup/src/components/kup-dialog/kup-dialog.scss
@@ -7,10 +7,7 @@
     --kup-dialogheader-text-color,
     var(--kup-gray-color-70)
   );
-  --kup_dialog_background_color: var(
-    --kup-header-text-color,
-    var(--kup-gray-color-0)
-  );
+  --kup_dialog_background_color: var(--kup-layer-0, var(--kup-gray-color-0));
   --kup_dialog_header_height: var(--kup-dialog-header-height, 2em);
 
   box-sizing: border-box;
diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
index 6d8161c577..e700015437 100644
--- a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
+++ b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-classes.scss
@@ -5,15 +5,15 @@
 :host(.#{$kup-class-shaped}) {
   .dropdown-button__primary-action {
     .button {
-      border-top-left-radius: var(--kup-radius-00);
-      border-bottom-left-radius: var(--kup-radius-00);
+      border-top-left-radius: var(--kup-radius-01);
+      border-bottom-left-radius: var(--kup-radius-01);
     }
   }
 
   .dropdown-button__dropdown-action {
     .button {
-      border-top-right-radius: var(--kup-radius-00);
-      border-bottom-right-radius: var(--kup-radius-00);
+      border-top-right-radius: var(--kup-radius-01);
+      border-bottom-right-radius: var(--kup-radius-01);
     }
   }
 }
diff --git a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
index 85c816a53f..c5877e1a04 100644
--- a/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
+++ b/packages/ketchup/src/components/kup-dropdown-button/styles/kup-dropdown-button-main.scss
@@ -26,15 +26,15 @@
 
 .f-button.dropdown-button__dropdown-action.dropdown-only {
   .button {
-    border-top-left-radius: var(--kup-radius-00);
-    border-bottom-left-radius: var(--kup-radius-00);
+    border-top-left-radius: var(--kup-radius-01);
+    border-bottom-left-radius: var(--kup-radius-01);
   }
 }
 
 .f-button.dropdown-button__dropdown-action {
   .button {
-    border-top-left-radius: var(--kup-radius-00);
-    border-bottom-left-radius: var(--kup-radius-00);
+    border-top-left-radius: var(--kup-radius-01);
+    border-bottom-left-radius: var(--kup-radius-01);
     box-shadow: var(--kup-primary-color) -2px 0px 2px -2px;
 
     .button__icon {
diff --git a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
index 1c9b2d431d..1a72908527 100644
--- a/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
+++ b/packages/ketchup/src/components/kup-image-list/kup-image-list.tsx
@@ -126,7 +126,7 @@ export class KupImageList {
      * When enabled displays Material's ripple effect on clicked items.
      * @default true
      */
-    @Prop() ripple: boolean = true;
+    @Prop() ripple: boolean = false;
     /**
      * Number of rows to display in the grid layout.
      * @default null
diff --git a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
index cc5d0edadd..64f9ea0983 100644
--- a/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
+++ b/packages/ketchup/src/components/kup-image-list/styles/kup-image-list-main.scss
@@ -27,7 +27,7 @@
   );
   --kup_imagelist_item_border_radius: var(
     --kup-imagelist-item-border-radius,
-    var(--kup-radius-00)
+    var(--kup-radius-01)
   );
   --kup_imagelist_item_height: var(--kup-imagelist-item-height, auto);
   --kup_imagelist_item_padding: var(--kup-imagelist-item-padding, 0);
diff --git a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
index f34ee5eb20..9aad09070a 100644
--- a/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/gantt-table.module.scss
@@ -5,7 +5,7 @@
 .project {
   background: var(--kup-gray-color-10);
   border-bottom: 1px solid var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   box-sizing: border-box;
   color: var(--kup-text-color, #595959);
   cursor: pointer;
@@ -70,7 +70,7 @@
   cursor: pointer;
   display: grid;
   border-bottom: 1px solid var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   grid-template-columns: var(--grid-fasi-columns, 1fr 1fr 1fr);
   place-items: center;
   background-color: var(--kup-gray-color-10);
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
index dade94b983..70b5131405 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-gantt/kup-gantt.scss
@@ -9,7 +9,7 @@
 
 .ganttContainer {
   background: var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   overflow: hidden;
   padding: var(--kup-space-05);
 }
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
index ef1437161b..4ebe304b86 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-switcher/kup-switcher.scss
@@ -11,7 +11,7 @@
   border: none;
   text-align: left;
   box-sizing: border-box;
-  color: var(--kup-gray-color-0);
+  color: var(--kup-layer-0);
   cursor: pointer;
   padding: var(--kup-space-03) var(--kup-space-05);
   &:hover {
diff --git a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
index bba02947fb..cec6699b74 100644
--- a/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
+++ b/packages/ketchup/src/components/kup-planner/utils/kup-task-list/kup-task-list.scss
@@ -1,6 +1,6 @@
 .tasks {
   background: var(--kup-gray-color-20);
-  border-radius: var(--kup-radius-00);
+  border-radius: var(--kup-radius-01);
   padding: var(--kup-space-05);
   margin-right: var(--kup-space-05);
 }
diff --git a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
index 5b409bba7b..5a937f5eaa 100644
--- a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
+++ b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.scss
@@ -74,6 +74,7 @@
       gap: 8px;
       margin: 0px;
       border: none;
+      flex: 1 0;
       outline: 2px solid transparent;
       outline-offset: -2px;
       background: none;
diff --git a/packages/ketchup/src/f-components/f-button/f-button.scss b/packages/ketchup/src/f-components/f-button/f-button.scss
index 9cc7f45e9f..16e8197e63 100644
--- a/packages/ketchup/src/f-components/f-button/f-button.scss
+++ b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -49,7 +49,7 @@
   );
   --kup_button_border_radius: var(
     --kup-button-border-radius,
-    var(--kup-radius-00)
+    var(--kup-radius-01)
   );
   --kup_button_font_family: var(
     --kup-button-font-family,
@@ -323,7 +323,10 @@
 
     &:hover,
     &:focus {
-      background-color: rgba(var(--kup_button_text_color_rgb), 0.125);
+      background-color: var(--kup-primary-color-60);
+      .icon-button__icon .f-image__icon {
+        background: var(--kup-primary-color-0) !important;
+      }
     }
 
     .icon-button__icon {
@@ -419,6 +422,50 @@
     }
   }
 
+  .icon-button {
+    background-color: transparent;
+    display: inline-block;
+    position: relative;
+    box-sizing: border-box;
+    border: none;
+    outline: none;
+    text-decoration: none;
+    cursor: pointer;
+    user-select: none;
+    padding: 0.75em;
+    @include kup-body-compact-01;
+    .icon-button__icon .f-image__icon {
+      background: var(--kup-gray-color-70);
+    }
+
+    &:hover,
+    &:focus {
+      background-color: var(--kup-gray-color-60);
+      .icon-button__icon .f-image__icon {
+        background: var(--kup-gray-color-0) !important;
+      }
+    }
+
+    .icon-button__icon {
+      display: flex;
+      margin: auto;
+
+      &.icon-button__icon--on {
+        display: none;
+      }
+    }
+
+    &.button--disabled {
+      opacity: 0.75;
+      pointer-events: none;
+    }
+
+    .icon-button__spinner-container {
+      width: var(--kup_button_spinner_width);
+      height: var(--kup_button_spinner_height);
+    }
+  }
+
   &.#{$kup-class-full-height} {
     height: 100%;
 
diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.scss b/packages/ketchup/src/f-components/f-chip/f-chip.scss
index 812291d5b4..0cbac42569 100644
--- a/packages/ketchup/src/f-components/f-chip/f-chip.scss
+++ b/packages/ketchup/src/f-components/f-chip/f-chip.scss
@@ -1,7 +1,7 @@
 .f-chip {
   --kup_chip_background_color: var(
     --kup-chip-background-color,
-    var(--kup-gray-color-20)
+    var(--kup-gray-color-30)
   );
   --kup_chip_border_color: var(
     --kup-chip-border-color,
diff --git a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
index 054e8ab14d..fad52bde4c 100644
--- a/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
+++ b/packages/ketchup/src/f-components/f-progress-bar/f-progress-bar.scss
@@ -1,7 +1,7 @@
 .f-progress-bar {
   --kup_progressbar_border_radius: var(
     --kup-progressbar-border-radius,
-    var(--kup-radius-00)
+    var(--kup-radius-01)
   );
   --kup_progressbar_font_family: var(
     --kup-progressbar-font-family,
diff --git a/packages/ketchup/src/f-components/f-switch/f-switch.scss b/packages/ketchup/src/f-components/f-switch/f-switch.scss
index 79100202d5..4683da4c41 100644
--- a/packages/ketchup/src/f-components/f-switch/f-switch.scss
+++ b/packages/ketchup/src/f-components/f-switch/f-switch.scss
@@ -150,7 +150,7 @@
 
       &.switch--checked {
         .switch__track {
-          background-color: var(--kup-success-color);
+          background-color: var(--kup-success-color-60);
         }
         .switch__thumb-underlay {
           transform: translateX(23px);
@@ -158,7 +158,7 @@
 
         .switch__thumb {
           background-color: var(--kup_switch_thumb_background_color);
-          border-color: var(--kup-success-color);
+          border-color: var(--kup-success-color-60);
 
           .switch__native-control {
             transform: translateX(-16px);
@@ -204,8 +204,8 @@
   }
 
   &.#{$kup-class-success} {
-    --kup-switch-primary-color: var(--kup-success-color);
-    --kup-switch-primary-color-rgb: var(--kup-success-color-rgb);
+    --kup-switch-primary-color: var(--kup-success-color-60);
+    --kup-switch-primary-color-rgb: var(--kup-success-color-60-rgb);
   }
 
   &.#{$kup-class-warning} {
diff --git a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
index bbf6197efd..6b15bedae6 100644
--- a/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
+++ b/packages/ketchup/src/managers/kup-theme/kup-theme-application.scss
@@ -1,3 +1,10 @@
+:root {
+  --kup-layer-0: var(--kup-gray-color-0);
+  --kup-layer-1: var(--kup-gray-color-10);
+  --kup-layer-2: var(--kup-gray-color-20);
+  --kup-layer-3: var(--kup-gray-color-30);
+}
+
 /*-------------------------------------------------*/
 /*                   E d i t o r                   */
 /*-------------------------------------------------*/
diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json
index bfa2771dcb..74e4806778 100644
--- a/packages/ketchup/src/managers/kup-theme/themes.json
+++ b/packages/ketchup/src/managers/kup-theme/themes.json
@@ -79,6 +79,7 @@
             "--kup-space-12": "96px",
             "--kup-space-13": "160px",
             "--kup-radius-00": "0px",
+            "--kup-radius-01": "2px",
             "--kup-radius-100": "100px"
         },
         "icons": {
@@ -151,7 +152,8 @@
             "--kup-border-color": "#d8d8d8",
             "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
             "--kup-info-color": "#2592df",
-            "--kup-success-color": "#24A148",
+            "--kup-success-color-40": "#42be65",
+            "--kup-success-color-60": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
             "--kup-danger-color": "#a6192e",
@@ -179,6 +181,7 @@
             "--kup-space-12": "96px",
             "--kup-space-13": "160px",
             "--kup-radius-00": "0px",
+            "--kup-radius-01": "2px",
             "--kup-radius-100": "100px"
         },
         "icons": {
@@ -251,7 +254,8 @@
             "--kup-border-color": "#d8d8d8",
             "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
             "--kup-info-color": "#2592df",
-            "--kup-success-color": "#42BE65",
+            "--kup-success-color-60": "#42be65",
+            "--kup-success-color-40": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
             "--kup-danger-color": "#a6192e",
@@ -279,6 +283,7 @@
             "--kup-space-12": "96px",
             "--kup-space-13": "160px",
             "--kup-radius-00": "0px",
+            "--kup-radius-01": "2px",
             "--kup-radius-100": "100px"
         },
         "icons": {
@@ -351,7 +356,8 @@
             "--kup-border-color": "#d8d8d8",
             "--kup-box-shadow": "0px 0px 7.5px 0px rgba(128, 128, 128, 0.5)",
             "--kup-info-color": "#2592df",
-            "--kup-success-color": "#42BE65",
+            "--kup-success-color-60": "#42be65",
+            "--kup-success-color-40": "#198038",
             "--kup-rating-color": "#ffa000",
             "--kup-warning-color": "#de8906",
             "--kup-danger-color": "#da1e28",
@@ -379,6 +385,7 @@
             "--kup-space-12": "96px",
             "--kup-space-13": "160px",
             "--kup-radius-00": "0px",
+            "--kup-radius-01": "2px",
             "--kup-radius-100": "100px"
         },
         "icons": {