diff --git a/packages/ketchup-showcase/public/showcase.css b/packages/ketchup-showcase/public/showcase.css
index 03b3b25ed1..923abe3954 100644
--- a/packages/ketchup-showcase/public/showcase.css
+++ b/packages/ketchup-showcase/public/showcase.css
@@ -38,26 +38,24 @@
 }
 
 code.flat {
-  background: none;
-  border-radius: 0;
-  box-shadow: 0 0 2px 0px rgb(128, 128, 128);
-  color: var(--kup-primary-color);
+  background: var(--kup-gray-color-10);
+  border-radius: var(--kup-radius-00);
+  border: 1px solid var(--kup-gray-color-30);
+  color: var(--kup-gray-color-90);
   display: flex;
   font-family: var(--kup-font-family-monospace);
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
   margin: auto;
   max-width: 100%;
-  padding: 20px 10px;
+  padding: var(--kup-space-04) var(--kup-space-03);
   width: max-content;
 }
 
 .code-word {
-  color: var(--kup-primary-color);
-  font-family: var(--kup-font-family-monospace);
-  font-size: 1.2em;
+  color: var(--kup-primary-color-60);
+  /* font-family: var(--kup-font-family-monospace); */
   font-weight: 600;
-  word-break: break-word;
 }
 
 .sample-section .code-word {
diff --git a/packages/ketchup-showcase/src/App.vue b/packages/ketchup-showcase/src/App.vue
index db55e869ed..b8ad81ad1c 100644
--- a/packages/ketchup-showcase/src/App.vue
+++ b/packages/ketchup-showcase/src/App.vue
@@ -130,7 +130,7 @@ export default {
     ) {
       dom.ketchupInit = {
         ...dom.ketchupInit,
-        theme: { name: 'dark' },
+        theme: { name: 'octane' },
       };
     }
     document.addEventListener('kup-theme-change', () => {
@@ -161,9 +161,9 @@ export default {
   methods: {
     changeTheme(e: CustomEvent<KupSwitchEventPayload>): void {
       if (e.detail.value === 'on') {
-        dom.ketchup.theme.set('dark');
+        dom.ketchup.theme.set('darkOctaneGray');
       } else {
-        dom.ketchup.theme.set('ketchup');
+        dom.ketchup.theme.set('octane');
       }
     },
     drawerReady(): void {
@@ -197,7 +197,7 @@ export default {
     },
     removeSpinner(): void {
       setTimeout(() => {
-        if (dom.ketchup.theme.name === 'dark') {
+        if (dom.ketchup.theme.name === 'darkOctaneGray') {
           theme.checked = true;
         }
         spinnerLabel.innerHTML = 'Ready!';
@@ -877,6 +877,16 @@ export default {
             value: 'KupTheme',
             visible: true,
           },
+          {
+            cells: {
+              ROUTE: {
+                value: 'kup-token',
+              },
+            },
+            icon: 'token',
+            value: 'KupToken',
+            visible: true,
+          },
           {
             cells: {
               ROUTE: {
diff --git a/packages/ketchup-showcase/src/plugins/router.ts b/packages/ketchup-showcase/src/plugins/router.ts
index cf18903b04..84f69cf60d 100644
--- a/packages/ketchup-showcase/src/plugins/router.ts
+++ b/packages/ketchup-showcase/src/plugins/router.ts
@@ -336,6 +336,11 @@ const frameworkRoutes = [
     name: 'kup-theme',
     component: () => import(`@/views/framework/kup-theme/KupTheme.vue`),
   },
+  {
+    path: `/kup-token`,
+    name: 'kup-token',
+    component: () => import(`@/views/framework/kup-token/KupToken.vue`),
+  },
   {
     path: `/kup-toolbar`,
     name: 'kup-toolbar',
diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue b/packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue
index ac938755f5..496d5fc922 100644
--- a/packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue
+++ b/packages/ketchup-showcase/src/views/components/basic/chip/Chip.vue
@@ -15,6 +15,21 @@
     <template v-slot:4>
       <chip-input></chip-input>
     </template>
+    <template v-slot:5>
+      <chip-size></chip-size>
+    </template>
+    <template v-slot:6>
+      <chip-variant></chip-variant>
+    </template>
+    <template v-slot:7>
+      <chip-color></chip-color>
+    </template>
+    <template v-slot:8>
+      <chip-structure></chip-structure>
+    </template>
+    <template v-slot:9>
+      <chip-combination></chip-combination>
+    </template>
   </comp>
 </template>
 
@@ -24,6 +39,11 @@ import ChipBasic from '@/views/components/basic/chip/examples/ChipBasic';
 import ChipChoice from '@/views/components/basic/chip/examples/ChipChoice';
 import ChipFilter from '@/views/components/basic/chip/examples/ChipFilter';
 import ChipInput from '@/views/components/basic/chip/examples/ChipInput';
+import ChipSize from '@/views/components/basic/chip/examples/ChipSize';
+import ChipVariant from '@/views/components/basic/chip/examples/ChipVariant';
+import ChipColor from '@/views/components/basic/chip/examples/ChipColor';
+import ChipStructure from '@/views/components/basic/chip/examples/ChipStructure';
+import ChipCombination from '@/views/components/basic/chip/examples/ChipCombination';
 import Comp from '@/views/templates/Comp';
 export default {
   components: {
@@ -32,6 +52,11 @@ export default {
     ChipChoice,
     ChipFilter,
     ChipInput,
+    ChipSize,
+    ChipVariant,
+    ChipColor,
+    ChipStructure,
+    ChipCombination,
     Comp,
   },
   data() {
@@ -45,6 +70,11 @@ export default {
         'Choice chips',
         'Filter chips',
         'Input chips',
+        'Chip Size',
+        'Chip Variant',
+        'Chip Color',
+        'Chip Structure',
+        'Chip Combination',
       ],
     };
   },
diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue
new file mode 100644
index 0000000000..3f62e202cd
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipColor.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        You can use the <span class="code-word">kup-primary</span> class to set
+        the color of the chip. The default is
+        <span class="code-word">neutral</span>.
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data"></kup-chip>
+        </div>
+        <p class="centered">Default color 'neutral'</p>
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data" class="kup-primary"></kup-chip>
+        </div>
+        <p class="centered">Set color to 'primary'</p>
+        <code class="flat">{{ markupBasicSmall }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          id: 'input1',
+          value: 'First filter',
+        },
+        {
+          id: 'input2',
+          value: 'Second filter',
+        },
+        {
+          id: 'input3',
+          value: 'Third filter',
+        },
+      ],
+      markupBasic: '<kup-chip></kup-chip>',
+      markupBasicSmall: '<kup-chip class="kup-primary"></kup-chip>',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipCombination.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipCombination.vue
new file mode 100644
index 0000000000..352699d17b
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipCombination.vue
@@ -0,0 +1,65 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p> You can use all the styling above to get some advanced chip: </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip
+            :data.prop="data"
+            styling="raised"
+            class="kup-primary"
+          ></kup-chip>
+        </div>
+        <p class="centered">Primary Raised Chip with icon</p>
+        <code class="flat">{{ markupBasic }}</code>
+        <code class="flat">{{ markupBasicData }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data2" styling="outlined"></kup-chip>
+        </div>
+        <p class="centered">Neutral outlined Chips'</p>
+        <code class="flat">{{ markupBasic2 }}</code>
+        <code class="flat">{{ markupBasicData2 }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          icon: 'widgets',
+          id: 'input1',
+          value: 'IconChip',
+        },
+      ],
+      data2: [
+        {
+          id: 'input1',
+          value: 'Outlined Chip',
+        },
+        {
+          id: 'input2',
+          value: 'Outlined Chip 2',
+        },
+        {
+          id: 'input2',
+          value: 'Outlined Chip 3',
+        },
+      ],
+      markupBasic: '<kup-chip styling="raised" class="kup-primary"></kup-chip>',
+      markupBasicData: '{ icon: "widgets", id: "input1", value: "IconChip"}',
+      markupBasic2: '<kup-chip styling="outlined"></kup-chip>',
+      markupBasicData2:
+        '{ id: "input1", value: "Outlined Chip"},{ id: "input2", value: "Outlined Chip 2"},{ id: "input3", value: "Outlined Chip 3"}',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipSize.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipSize.vue
new file mode 100644
index 0000000000..61f6471f13
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipSize.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        You can use the <span class="code-word">sizing</span> attribute to
+        decide the size of the chip. The default is
+        <span class="code-word">medium</span>.
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data"></kup-chip>
+        </div>
+        <p class="centered">Default Sizing medium</p>
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data" sizing="small"></kup-chip>
+        </div>
+        <p class="centered">Set sizing to 'small'</p>
+        <code class="flat">{{ markupBasicSmall }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          id: 'input1',
+          value: 'First filter',
+        },
+        {
+          id: 'input2',
+          value: 'Second filter',
+        },
+        {
+          id: 'input3',
+          value: 'Third filter',
+        },
+      ],
+      markupBasic: '<kup-chip></kup-chip>',
+      markupBasicSmall: '<kup-chip sizing="small"></kup-chip>',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipStructure.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipStructure.vue
new file mode 100644
index 0000000000..0f3f6d3c4c
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipStructure.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        The Chip component is build on 3 part: A leading optional icon, a text
+        and a trailing optional clear icon [#input chips].
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data"></kup-chip>
+        </div>
+        <p class="centered"
+          >You can change or remove the icon. In this case is passed the
+          'widgets' icon</p
+        >
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data2"></kup-chip>
+        </div>
+        <p class="centered">Without icon</p>
+        <code class="flat">{{ markupBasicWihoutIcon }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          icon: 'widgets',
+          id: 'input1',
+          value: 'IconChip',
+        },
+      ],
+      data2: [
+        {
+          id: 'input1',
+          value: 'TextChip',
+        },
+      ],
+      markupBasic: '{ icon: "widgets", id: "input1", value: "IconChip"}',
+      markupBasicWihoutIcon: '{ id: "input1", value: "TextChip"}',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipVariant.vue b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipVariant.vue
new file mode 100644
index 0000000000..007850196d
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/chip/examples/ChipVariant.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        You can use the <span class="code-word">styling</span> attribute to
+        decide the variant of the chip. The default is
+        <span class="code-word">raised</span>.
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data"></kup-chip>
+        </div>
+        <p class="centered">Default variant 'raised'</p>
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-chip :data.prop="data" styling="outlined"></kup-chip>
+        </div>
+        <p class="centered">Set variant to 'outlined'</p>
+        <code class="flat">{{ markupBasicSmall }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ChipInput',
+  data() {
+    return {
+      data: [
+        {
+          id: 'input1',
+          value: 'First filter',
+        },
+        {
+          id: 'input2',
+          value: 'Second filter',
+        },
+        {
+          id: 'input3',
+          value: 'Third filter',
+        },
+      ],
+      markupBasic: '<kup-chip></kup-chip>',
+      markupBasicSmall: '<kup-chip styling="outlined"></kup-chip>',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/components/basic/switch/Switch.vue b/packages/ketchup-showcase/src/views/components/basic/switch/Switch.vue
index 7aa2ee013a..94a1dd8655 100644
--- a/packages/ketchup-showcase/src/views/components/basic/switch/Switch.vue
+++ b/packages/ketchup-showcase/src/views/components/basic/switch/Switch.vue
@@ -12,6 +12,9 @@
     <template v-slot:3>
       <switch-disabled></switch-disabled>
     </template>
+    <template v-slot:4>
+      <switch-sizing></switch-sizing>
+    </template>
   </comp>
 </template>
 
@@ -20,6 +23,7 @@ import SwitchDemo from '@/views/components/basic/switch/examples/SwitchDemo';
 import SwitchBasic from '@/views/components/basic/switch/examples/SwitchBasic';
 import SwitchLabels from '@/views/components/basic/switch/examples/SwitchLabels';
 import SwitchDisabled from '@/views/components/basic/switch/examples/SwitchDisabled';
+import SwitchSizing from '@/views/components/basic/switch/examples/SwitchSizing';
 import Comp from '@/views/templates/Comp';
 export default {
   components: {
@@ -27,6 +31,7 @@ export default {
     SwitchBasic,
     SwitchLabels,
     SwitchDisabled,
+    SwitchSizing,
     Comp,
   },
   data() {
@@ -34,7 +39,13 @@ export default {
       giturl:
         'https://github.com/smeup/ketchup/tree/develop/packages/ketchup/src/components/kup-switch',
       headtitle: 'Switch',
-      titles: ['Playground', 'Basic usage', 'Adding labels', 'Disabled'],
+      titles: [
+        'Playground',
+        'Basic usage',
+        'Adding labels',
+        'Disabled',
+        'Sizing',
+      ],
     };
   },
   title: 'Ketchup | Switch',
diff --git a/packages/ketchup-showcase/src/views/components/basic/switch/examples/SwitchSizing.vue b/packages/ketchup-showcase/src/views/components/basic/switch/examples/SwitchSizing.vue
new file mode 100644
index 0000000000..19d8696ea6
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/switch/examples/SwitchSizing.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        The switch component can be used in its smaller version using the
+        <span class="code-word">sizing</span> parameter.
+        <span class="code-word">medium</span> is the default. Passing
+        <span class="code-word">small</span> you'll get the smaller version
+      </p>
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-switch></kup-switch>
+          <kup-switch sizing="small"></kup-switch>
+        </div>
+        <p class="centered">Sizing small</p>
+        <code class="flat">{{ markupDisabled }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SwitchDisabled',
+  data() {
+    return {
+      markupDisabled: '<kup-switch sizing="small"></kup-switch>',
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+kup-switch {
+  margin: auto;
+  padding: 0.5em;
+}
+</style>
diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/Textfield.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/Textfield.vue
index 5c8d3a515c..948263c9f4 100644
--- a/packages/ketchup-showcase/src/views/components/basic/textfield/Textfield.vue
+++ b/packages/ketchup-showcase/src/views/components/basic/textfield/Textfield.vue
@@ -21,6 +21,15 @@
     <template v-slot:6>
       <textfield-number></textfield-number>
     </template>
+    <template v-slot:7>
+      <textfield-sizing></textfield-sizing>
+    </template>
+    <template v-slot:8>
+      <textfield-helper></textfield-helper>
+    </template>
+    <template v-slot:9>
+      <textfield-readonly></textfield-readonly>
+    </template>
   </comp>
 </template>
 
@@ -32,6 +41,9 @@ import TextfieldLabels from '@/views/components/basic/textfield/examples/Textfie
 import TextfieldDisabled from '@/views/components/basic/textfield/examples/TextfieldDisabled';
 import TextfieldTextareaVariant from '@/views/components/basic/textfield/examples/TextfieldTextareaVariant';
 import TextfieldNumber from '@/views/components/basic/textfield/examples/TextfieldNumber';
+import TextfieldSizing from '@/views/components/basic/textfield/examples/TextfieldSizing';
+import TextfieldHelper from '@/views/components/basic/textfield/examples/TextfieldHelper';
+import TextfieldReadonly from '@/views/components/basic/textfield/examples/TextfieldReadonly';
 import Comp from '@/views/templates/Comp';
 export default {
   components: {
@@ -42,6 +54,9 @@ export default {
     TextfieldDisabled,
     TextfieldTextareaVariant,
     TextfieldNumber,
+    TextfieldSizing,
+    TextfieldHelper,
+    TextfieldReadonly,
     Comp,
   },
   data() {
@@ -57,6 +72,9 @@ export default {
         'Text area variant',
         'Disabled',
         'Number',
+        'Sizing',
+        'Helper',
+        'Readonly',
       ],
     };
   },
diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldHelper.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldHelper.vue
new file mode 100644
index 0000000000..a0d991b4fd
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldHelper.vue
@@ -0,0 +1,63 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p
+        >Text fields are supported by error and alert helper. Both 'error' and
+        'alert' are built with a message plus an icon
+      </p>
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-text-field
+            is-clearable
+            label="Alert"
+            initial-value="Alert"
+            alert="Alert message"
+          ></kup-text-field>
+          <kup-text-field
+            label="Alert"
+            initial-value="Alert"
+            alert="Alert message"
+            max-length="10"
+          ></kup-text-field>
+        </div>
+        <p class="centered">Sample markup with alert message</p>
+        <code class="flat">{{ markupBasicAlert }}</code>
+      </div>
+      <br /><br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-text-field
+            label="Error"
+            initial-value="Error initial value"
+            error="Error message for initial value"
+            max-length="10"
+          ></kup-text-field>
+          <kup-text-field
+            is-clearable
+            label="Error"
+            initial-value="Error initial value"
+            error="Error message for initial value"
+            max-length="10"
+          ></kup-text-field>
+        </div>
+        <p class="centered">Sample markup with error message</p>
+        <code class="flat">{{ markupBasicError }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TextfieldBasic',
+  data() {
+    return {
+      markupBasicAlert:
+        '<kup-text-field alert="Alert message"></kup-text-field>',
+      markupBasicError:
+        '<kup-text-field alert="Alert message"></kup-text-field>',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldNumber.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldNumber.vue
index 5581eba3f6..a6892e06ef 100644
--- a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldNumber.vue
+++ b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldNumber.vue
@@ -51,6 +51,22 @@
           separator sample markup</p
         >
         <code class="flat">{{ markupGroupNumber }}</code>
+
+        <p
+          >You can also have the possibility to get the 'Plus' and 'Minus'
+          button at the end of input number field by specifing the
+          'quantity-buttons'.</p
+        >
+        <div class="kup-container">
+          <kup-text-field
+            label="Normal"
+            input-type="number"
+            input-mode="decimal"
+            quantity-buttons
+          ></kup-text-field>
+        </div>
+        <p class="centered">Input number with plus and minus button</p>
+        <code class="flat">{{ plusAndMinus }}</code>
       </div>
     </div>
   </div>
@@ -67,6 +83,8 @@ export default {
         '<kup-text-field input-type="number" allow-negative decimals="2" integers="4"></kup-text-field>',
       markupGroupNumber:
         '<kup-text-field input-type="number" group decimals="2" integers="4"></kup-text-field>',
+      plusAndMinus:
+        '<kup-text-field input-type="number" input-mode="decimal" quantity-buttons label="Normal"></kup-text-field>',
     };
   },
 };
diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldReadonly.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldReadonly.vue
new file mode 100644
index 0000000000..5189bd6486
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldReadonly.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        There are situation in which the content is not disabled but it's also
+        only on reading. If the field is calculated and/or will never be
+        modified and it's passed in the form, than it's a read only field.
+        <span class="code-word">read-only</span> renders an unclickable text but
+        it's value is included in form submissions.
+      </p>
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-text-field
+            label="Read Only"
+            initial-value="Read Only"
+            read-only
+            max-length="10"
+          ></kup-text-field>
+          <kup-text-field
+            label="Read Only"
+            initial-value="Read Only"
+            text-area
+            read-only
+            max-length="10"
+          ></kup-text-field>
+        </div>
+        <p class="centered">Disabled sample markup</p>
+        <code class="flat">{{ markupReadOnly }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TextfieldReadonly',
+  data() {
+    return {
+      markupReadOnly: '<kup-text-field read-only></kup-text-field>',
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss">
+kup-text-field {
+  margin: auto;
+  padding: 0.5em;
+}
+</style>
diff --git a/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldSizing.vue b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldSizing.vue
new file mode 100644
index 0000000000..d60fa29898
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/components/basic/textfield/examples/TextfieldSizing.vue
@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p
+        >Passing the <span class="code-word">sizing</span> param you can specify
+        the dimension of the field. You can pass small, medium, large or
+        extralarge. The default is <span class="code-word">medium</span></p
+      >
+      <br />
+      <div class="demo-container">
+        <div class="kup-container">
+          <kup-text-field
+            label="Size: Small"
+            initial-value="Small"
+            sizing="small"
+          ></kup-text-field>
+          <kup-text-field
+            label="Size: Medium (Default)"
+            initial-value="Medium"
+            sizing="medium"
+          ></kup-text-field>
+          <br />
+          <kup-text-field
+            label="Size: Large"
+            initial-value="Large"
+            sizing="large"
+          ></kup-text-field>
+          <kup-text-field
+            label="Size: Max Large"
+            initial-value="Max Large"
+            sizing="max-large"
+          ></kup-text-field>
+        </div>
+        <p class="centered">Sample markup with 'small' sizing</p>
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TextfieldBasic',
+  data() {
+    return {
+      markupBasic: '<kup-text-field sizing="small"></kup-text-field>',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/framework/kup-token/KupToken.vue b/packages/ketchup-showcase/src/views/framework/kup-token/KupToken.vue
new file mode 100644
index 0000000000..4d09fefe8b
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/framework/kup-token/KupToken.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <comp :giturl="giturl" :headtitle="headtitle" :titles="titles">
+      <template v-slot:0>
+        <kup-token-syntax></kup-token-syntax>
+      </template>
+    </comp>
+  </div>
+</template>
+
+<script>
+import KupTokenSyntax from '@/views/framework/kup-token/examples/KupTokenSyntax';
+import Comp from '@/views/templates/Comp';
+
+export default {
+  components: {
+    KupTokenSyntax,
+    Comp,
+  },
+  data() {
+    return {
+      giturl:
+        'https://github.com/smeup/ketchup/tree/develop/packages/ketchup/src/managers/kup-token',
+      headtitle: 'KupToken',
+      titles: ['Syntax'],
+    };
+  },
+  title: 'Ketchup | KupToken',
+};
+</script>
diff --git a/packages/ketchup-showcase/src/views/framework/kup-token/examples/KupTokenSyntax.vue b/packages/ketchup-showcase/src/views/framework/kup-token/examples/KupTokenSyntax.vue
new file mode 100644
index 0000000000..8705715ad1
--- /dev/null
+++ b/packages/ketchup-showcase/src/views/framework/kup-token/examples/KupTokenSyntax.vue
@@ -0,0 +1,71 @@
+<template>
+  <div>
+    <div class="demo-wrapper">
+      <p>
+        To write a good design system you must have a structured design system
+        token. We decided to go as follow</p
+      >
+      <div class="demo-container">
+        <code class="flat">{{ markupBasic }}</code>
+      </div>
+      <p>I'll put some example to support the theory</p>
+      <div class="demo-container">
+        <p>This token is related to the border width of the kup-button</p>
+        <code class="flat">{{ TokenExample }}</code>
+        <br />
+        <p>This token is related to the border color of the kup-card</p>
+        <code class="flat">{{ TokenExample2 }}</code>
+        <br />
+        <p
+          >This token is related to the border color of the kup-card on hover</p
+        >
+        <code class="flat">{{ TokenExample3 }}</code>
+        <br />
+        <p
+          >This token is related to the background color of the track of the
+          kup-switch</p
+        >
+        <code class="flat">{{ TokenExample4 }}</code>
+        <!-- Token aggiuntivi -->
+        <p>This token is related to the text color of the kup-button</p>
+        <code class="flat">{{ TokenExample5 }}</code>
+        <p>This token is related to the border radius of the kup-input</p>
+        <code class="flat">{{ TokenExample6 }}</code>
+        <p>This token is related to the background color of the kup-dropdown</p>
+        <code class="flat">{{ TokenExample7 }}</code>
+        <p>This token is related to the text color of the kup-tooltip</p>
+        <code class="flat">{{ TokenExample8 }}</code>
+        <p>This token is related to the check color of the kup-checkbox</p>
+        <code class="flat">{{ TokenExample9 }}</code>
+        <p>This token is related to the track color of the kup-slider</p>
+        <code class="flat">{{ TokenExample10 }}</code>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { KupDom } from '@sme.up/ketchup/dist/types/managers/kup-manager/kup-manager-declarations';
+
+const dom: KupDom = document.documentElement as KupDom;
+
+export default {
+  name: 'KupThemeBasic',
+  data() {
+    return {
+      markupBasic: '{prefix}-{component}-{property}-{attribute}-{state}',
+      TokenExample: '{kup}-{button}-{border}-{width}-{}',
+      TokenExample2: '{kup}-{card}-{border}-{color}-{}',
+      TokenExample3: '{kup}-{card}-{border}-{color}-{hover}',
+      TokenExample4: '{kup}-{switch_track}-{background}-{color}-{}',
+      // Token aggiuntivi
+      TokenExample5: '{kup}-{button}-{text}-{color}-{}',
+      TokenExample6: '{kup}-{input}-{border}-{radius}-{}',
+      TokenExample7: '{kup}-{dropdown}-{background}-{color}-{}',
+      TokenExample8: '{kup}-{tooltip}-{text}-{color}-{}',
+      TokenExample9: '{kup}-{checkbox}-{check}-{color}-{}',
+      TokenExample10: '{kup}-{slider}-{track}-{color}-{}',
+    };
+  },
+};
+</script>
diff --git a/packages/ketchup/src/accordion.html b/packages/ketchup/src/accordion.html
index b4116c71a8..4641d7d8b9 100644
--- a/packages/ketchup/src/accordion.html
+++ b/packages/ketchup/src/accordion.html
@@ -36,16 +36,12 @@ <h1>Empty</h1>
 
             <h1>Kitchen sink</h1>
             <kup-accordion id="ks"
-                ><kup-button
-                    style="margin: 2em auto"
-                    slot="FLD4"
-                    label="FLD4"
-                ></kup-button
-                ><kup-button
-                    style="margin: 2em auto"
-                    slot="FLD2"
-                    label="FLD2"
-                ></kup-button
+                ><p slot="FLD1" label="FLD4"
+                    >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+                    sed do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                    ullamco laboris nisi.</p
+                ><kup-button slot="FLD2" label="FLD2"></kup-button
             ></kup-accordion>
         </div>
     </body>
diff --git a/packages/ketchup/src/autocomplete.html b/packages/ketchup/src/autocomplete.html
index 317fe38c9d..7a2e877a5c 100644
--- a/packages/ketchup/src/autocomplete.html
+++ b/packages/ketchup/src/autocomplete.html
@@ -14,6 +14,11 @@
     </head>
 
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <div>
             <kup-autocomplete id="ac"></kup-autocomplete>
             <kup-text-field id="tf"></kup-text-field>
diff --git a/packages/ketchup/src/badge.html b/packages/ketchup/src/badge.html
index 1c9f51a084..241d49f33e 100644
--- a/packages/ketchup/src/badge.html
+++ b/packages/ketchup/src/badge.html
@@ -48,6 +48,11 @@
         </style>
     </head>
     <body>
+      <script>
+        document.documentElement['ketchupInit'] = {
+            debug: { active: true },
+        };
+    </script>
         <h3>Badge</h3>
 
         <h4>Status:</h4>
diff --git a/packages/ketchup/src/button.html b/packages/ketchup/src/button.html
index 5ad148eea7..67515059d6 100644
--- a/packages/ketchup/src/button.html
+++ b/packages/ketchup/src/button.html
@@ -36,6 +36,11 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h3>Material Buttons (widget)</h3>
         <span>empty:</span>
         <kup-button></kup-button>
@@ -56,6 +61,16 @@ <h3>Material Buttons (widget)</h3>
         <span>icon+tooltip:</span>
         <kup-button icon="favorite"></kup-button>
 
+        <div style="display: flex">
+            <kup-button
+                label="Small"
+                sizing="small"
+                class="kup-neutral"
+                icon="favorite"
+                styling="outlined"
+            ></kup-button>
+            <kup-button label="Small" sizing="small"></kup-button>
+        </div>
         <!-- -->
         <h4>Size:</h4>
         <kup-button label="Small" sizing="small"></kup-button>
@@ -96,7 +111,11 @@ <h4>Neutral:</h4>
         <h4>Styling:</h4>
         <kup-button label="Raised"></kup-button>
         <kup-button label="Raised & disabled" disabled></kup-button>
-        <kup-button label="Outlined" styling="outlined"></kup-button>
+        <kup-button
+            label="Outlined"
+            styling="outlined"
+            icon="favorite"
+        ></kup-button>
         <kup-button
             label="Outlined & Disabled"
             styling="outlined"
@@ -210,6 +229,9 @@ <h4>All variants:</h4>
                 active="true"
             ></kup-spinner>
         </kup-button>
+        <hr />
+        <kup-button class="kup-danger" label="danger"></kup-button>
+        <kup-button class="kup-success" label="danger"></kup-button>
         <script>
             document.addEventListener('kup-manager-ready', () => {
                 const kupManager = document.documentElement.ketchup;
diff --git a/packages/ketchup/src/checkbox.html b/packages/ketchup/src/checkbox.html
index ef28316a1b..fa4d3e88e1 100644
--- a/packages/ketchup/src/checkbox.html
+++ b/packages/ketchup/src/checkbox.html
@@ -36,6 +36,11 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h4>The Checkbox</h4>
         <kup-checkbox label="Label" indeterminate></kup-checkbox>
         <kup-checkbox label="Label" checked></kup-checkbox>
diff --git a/packages/ketchup/src/chip.html b/packages/ketchup/src/chip.html
index c9a5530256..377aff8e86 100644
--- a/packages/ketchup/src/chip.html
+++ b/packages/ketchup/src/chip.html
@@ -40,6 +40,11 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h1>Chip</h1>
         <kup-chip type="input" id="chipList">
             <input  slot="_field" type="text" ></input>
diff --git a/packages/ketchup/src/combobox.html b/packages/ketchup/src/combobox.html
index e5c66be41b..609cf87740 100644
--- a/packages/ketchup/src/combobox.html
+++ b/packages/ketchup/src/combobox.html
@@ -20,6 +20,11 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h4>Material Combobox (widget)</h4>
         <kup-combobox
             disabled
diff --git a/packages/ketchup/src/components.d.ts b/packages/ketchup/src/components.d.ts
index 113c74516a..51abc05493 100644
--- a/packages/ketchup/src/components.d.ts
+++ b/packages/ketchup/src/components.d.ts
@@ -50,6 +50,7 @@ import { KupQlikGrid, QlikServer } from "./components/kup-qlik/kup-qlik-declarat
 import { FRadioData } from "./f-components/f-radio/f-radio-declarations";
 import { KupRadioChangeEventPayload } from "./components/kup-radio/kup-radio-declarations";
 import { KupRatingClickEventPayload } from "./components/kup-rating/kup-rating-declarations";
+import { FSwitchSizing } from "./f-components/f-switch/f-switch-declarations";
 import { KupSwitchEventPayload } from "./components/kup-switch/kup-switch-declarations";
 import { KupTabBarEventPayload, KupTabBarNode } from "./components/kup-tab-bar/kup-tab-bar-declarations";
 import { KupTextFieldEventPayload } from "./components/kup-text-field/kup-text-field-declarations";
@@ -99,6 +100,7 @@ export { KupQlikGrid, QlikServer } from "./components/kup-qlik/kup-qlik-declarat
 export { FRadioData } from "./f-components/f-radio/f-radio-declarations";
 export { KupRadioChangeEventPayload } from "./components/kup-radio/kup-radio-declarations";
 export { KupRatingClickEventPayload } from "./components/kup-rating/kup-rating-declarations";
+export { FSwitchSizing } from "./f-components/f-switch/f-switch-declarations";
 export { KupSwitchEventPayload } from "./components/kup-switch/kup-switch-declarations";
 export { KupTabBarEventPayload, KupTabBarNode } from "./components/kup-tab-bar/kup-tab-bar-declarations";
 export { KupTextFieldEventPayload } from "./components/kup-text-field/kup-text-field-declarations";
@@ -144,6 +146,11 @@ export namespace Components {
           * @param props - Object containing props that will be set to the component.
          */
         "setProps": (props: GenericObject) => Promise<void>;
+        /**
+          * Sets the type of the button
+          * @default KupComponentSizing.MEDIUM
+         */
+        "sizing": KupComponentSizing;
         /**
           * This method activates or deactivates an item
           * @param itemName - Name of the item.
@@ -151,6 +158,11 @@ export namespace Components {
         "toggleItem": (itemName: string) => Promise<void>;
     }
     interface KupAutocomplete {
+        /**
+          * Set alert message
+          * @default '''
+         */
+        "alert": string;
         /**
           * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list.
           * @default false
@@ -177,6 +189,11 @@ export namespace Components {
           * @default ItemsDisplayMode.DESCRIPTION
          */
         "displayMode": ItemsDisplayMode;
+        /**
+          * Set error message
+          * @default '''
+         */
+        "error": string;
         /**
           * Used to retrieve component's props values.
           * @param descriptions - When provided and true, the result will be the list of props with their description.
@@ -188,6 +205,11 @@ export namespace Components {
           * @returns Value of the component.
          */
         "getValue": () => Promise<string>;
+        /**
+          * When set, the text-field will show this icon.
+          * @default null
+         */
+        "icon": string;
         /**
           * Sets the initial value of the component.
           * @default ""
@@ -198,11 +220,31 @@ export namespace Components {
           * @default 300
          */
         "inputDelay": number;
+        /**
+          * Enables a clear trailing icon.
+          * @default false
+         */
+        "isClearable": boolean;
+        /**
+          * When set, its content will be shown as a label.
+          * @default null
+         */
+        "label": string;
+        /**
+          * When set to true, the label will be on the left of the component.
+          * @default false
+         */
+        "leadingLabel": boolean;
         /**
           * The minimum number of chars to trigger the autocomplete
           * @default 1
          */
         "minimumChars": number;
+        /**
+          * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.
+          * @default false
+         */
+        "readOnly": boolean;
         /**
           * This method is used to trigger a new render of the component.
          */
@@ -236,6 +278,16 @@ export namespace Components {
           * @default true
          */
         "showDropDownIcon": boolean;
+        /**
+          * Sets the type of the button
+          * @default KupComponentSizing.MEDIUM
+         */
+        "sizing": KupComponentSizing;
+        /**
+          * When set, the icon will be shown after the text.
+          * @default false
+         */
+        "trailingIcon": boolean;
     }
     interface KupBadge {
         /**
@@ -1019,7 +1071,7 @@ export namespace Components {
          */
         "setProps": (props: GenericObject) => Promise<void>;
         /**
-          * Sets the type of the chip
+          * Sets the size of the chip
           * @default FChipSize.MEDIUM
          */
         "sizing": FChipSize;
@@ -1131,21 +1183,6 @@ export namespace Components {
           * @returns Value of the component.
          */
         "getValue": () => Promise<string>;
-        /**
-          * When set, its content will be shown as a help text below the field.
-          * @default null
-         */
-        "helper": string;
-        /**
-          * When true, the helper will be displayed.
-          * @default true
-         */
-        "helperEnabled": boolean;
-        /**
-          * When set, the helper will be shown only when the field is focused.
-          * @default false
-         */
-        "helperWhenFocused": boolean;
         /**
           * When set, the text-field will show this icon.
           * @default null
@@ -2079,7 +2116,7 @@ export namespace Components {
         "hiddenSubmitButton": boolean;
         /**
           * Sets the label placement for 'all' fields in form
-          * @default KupFormLabelPlacement.LEFT
+          * @default KupFormLabelPlacement.TOP
          */
         "labelPlacement": KupFormLabelPlacement;
         /**
@@ -3190,6 +3227,16 @@ export namespace Components {
           * @returns List of props as object, each key will be a prop.
          */
         "getProps": (descriptions?: boolean) => Promise<GenericObject>;
+        /**
+          * Defaults at false. When set to true, the component is horizontal.
+          * @default false
+         */
+        "horizontal": boolean;
+        /**
+          * When set, its content will be shown as a label.
+          * @default null
+         */
+        "label": string;
         /**
           * Defaults at false. When set to true, the label will be on the left of the component.
           * @default false
@@ -3399,6 +3446,11 @@ export namespace Components {
           * @param props - Object containing props that will be set to the component.
          */
         "setProps": (props: GenericObject) => Promise<void>;
+        /**
+          * Sets the size of the switch
+          * @default FSwitchSizing.MEDIUM
+         */
+        "sizing": FSwitchSizing;
     }
     interface KupSwitcher {
         "timeUnitChange": KupPlannerSwitcherProps['onTimeUnitChange'];
@@ -3415,6 +3467,11 @@ export namespace Components {
           * @default null
          */
         "data": KupTabBarNode[];
+        /**
+          * Defaults at false. When set to true, the component is dense.
+          * @default false
+         */
+        "dense": boolean;
         /**
           * Used to retrieve component's props values.
           * @param descriptions - When provided and true, the result will be the list of props with their description.
@@ -5187,8 +5244,18 @@ declare namespace LocalJSX {
           * @default true
          */
         "ripple"?: boolean;
+        /**
+          * Sets the type of the button
+          * @default KupComponentSizing.MEDIUM
+         */
+        "sizing"?: KupComponentSizing;
     }
     interface KupAutocomplete {
+        /**
+          * Set alert message
+          * @default '''
+         */
+        "alert"?: string;
         /**
           * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list.
           * @default false
@@ -5215,6 +5282,16 @@ declare namespace LocalJSX {
           * @default ItemsDisplayMode.DESCRIPTION
          */
         "displayMode"?: ItemsDisplayMode;
+        /**
+          * Set error message
+          * @default '''
+         */
+        "error"?: string;
+        /**
+          * When set, the text-field will show this icon.
+          * @default null
+         */
+        "icon"?: string;
         /**
           * Sets the initial value of the component.
           * @default ""
@@ -5225,6 +5302,21 @@ declare namespace LocalJSX {
           * @default 300
          */
         "inputDelay"?: number;
+        /**
+          * Enables a clear trailing icon.
+          * @default false
+         */
+        "isClearable"?: boolean;
+        /**
+          * When set, its content will be shown as a label.
+          * @default null
+         */
+        "label"?: string;
+        /**
+          * When set to true, the label will be on the left of the component.
+          * @default false
+         */
+        "leadingLabel"?: boolean;
         /**
           * The minimum number of chars to trigger the autocomplete
           * @default 1
@@ -5237,6 +5329,11 @@ declare namespace LocalJSX {
         "onKup-autocomplete-iconclick"?: (event: KupAutocompleteCustomEvent<KupAutocompleteIconClickEventPayload>) => void;
         "onKup-autocomplete-input"?: (event: KupAutocompleteCustomEvent<KupAutocompleteEventPayload>) => void;
         "onKup-autocomplete-itemclick"?: (event: KupAutocompleteCustomEvent<KupAutocompleteEventPayload>) => void;
+        /**
+          * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.
+          * @default false
+         */
+        "readOnly"?: boolean;
         /**
           * Sets how to return the selected item value. Suported values: "code", "description", "both".
           * @default ItemsDisplayMode.CODE
@@ -5252,6 +5349,16 @@ declare namespace LocalJSX {
           * @default true
          */
         "showDropDownIcon"?: boolean;
+        /**
+          * Sets the type of the button
+          * @default KupComponentSizing.MEDIUM
+         */
+        "sizing"?: KupComponentSizing;
+        /**
+          * When set, the icon will be shown after the text.
+          * @default false
+         */
+        "trailingIcon"?: boolean;
     }
     interface KupBadge {
         /**
@@ -5959,7 +6066,7 @@ declare namespace LocalJSX {
          */
         "onKup-chip-iconclick"?: (event: KupChipCustomEvent<KupChipEventPayload>) => void;
         /**
-          * Sets the type of the chip
+          * Sets the size of the chip
           * @default FChipSize.MEDIUM
          */
         "sizing"?: FChipSize;
@@ -6032,21 +6139,6 @@ declare namespace LocalJSX {
           * @default '''
          */
         "error"?: string;
-        /**
-          * When set, its content will be shown as a help text below the field.
-          * @default null
-         */
-        "helper"?: string;
-        /**
-          * When true, the helper will be displayed.
-          * @default true
-         */
-        "helperEnabled"?: boolean;
-        /**
-          * When set, the helper will be shown only when the field is focused.
-          * @default false
-         */
-        "helperWhenFocused"?: boolean;
         /**
           * When set, the text-field will show this icon.
           * @default null
@@ -6802,7 +6894,7 @@ declare namespace LocalJSX {
         "hiddenSubmitButton"?: boolean;
         /**
           * Sets the label placement for 'all' fields in form
-          * @default KupFormLabelPlacement.LEFT
+          * @default KupFormLabelPlacement.TOP
          */
         "labelPlacement"?: KupFormLabelPlacement;
         /**
@@ -7702,6 +7794,16 @@ declare namespace LocalJSX {
           * @default false
          */
         "disabled"?: boolean;
+        /**
+          * Defaults at false. When set to true, the component is horizontal.
+          * @default false
+         */
+        "horizontal"?: boolean;
+        /**
+          * When set, its content will be shown as a label.
+          * @default null
+         */
+        "label"?: string;
         /**
           * Defaults at false. When set to true, the label will be on the left of the component.
           * @default false
@@ -7871,6 +7973,11 @@ declare namespace LocalJSX {
           * Triggered when the input element gets focused.
          */
         "onKup-switch-focus"?: (event: KupSwitchCustomEvent<KupSwitchEventPayload>) => void;
+        /**
+          * Sets the size of the switch
+          * @default FSwitchSizing.MEDIUM
+         */
+        "sizing"?: FSwitchSizing;
     }
     interface KupSwitcher {
         "timeUnitChange"?: KupPlannerSwitcherProps['onTimeUnitChange'];
@@ -7887,6 +7994,11 @@ declare namespace LocalJSX {
           * @default null
          */
         "data"?: KupTabBarNode[];
+        /**
+          * Defaults at false. When set to true, the component is dense.
+          * @default false
+         */
+        "dense"?: boolean;
         /**
           * Triggered when the tab loses focus.
          */
diff --git a/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx b/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx
index 5ea3ea0fc9..b77d2b413e 100644
--- a/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx
+++ b/packages/ketchup/src/components/kup-accordion/kup-accordion.tsx
@@ -13,7 +13,11 @@ import {
     Watch,
 } from '@stencil/core';
 import { MDCRipple } from '@material/ripple';
-import type { GenericObject, KupComponent } from '../../types/GenericTypes';
+import {
+    GenericObject,
+    KupComponent,
+    KupComponentSizing,
+} from '../../types/GenericTypes';
 import {
     KupManager,
     kupManagerInstance,
@@ -72,7 +76,12 @@ export class KupAccordion {
      * When enabled displays Material's ripple effect on item headers.
      * @default true
      */
-    @Prop() ripple: boolean = true;
+    @Prop() ripple: boolean = false;
+    /**
+     * Sets the type of the button
+     * @default KupComponentSizing.MEDIUM
+     */
+    @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM;
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -248,6 +257,7 @@ export class KupAccordion {
                 'accordion-item__header--expanded':
                     isItemExpandible && isItemSelected ? true : false,
                 'mdc-ripple-surface': this.ripple ? true : false,
+                [`accordion-item--${this.sizing}`]: this.sizing ? true : false,
             };
 
             const itemContentClass: GenericObject = {
@@ -260,6 +270,7 @@ export class KupAccordion {
             items.push(
                 <div class="accordion-item">
                     <div
+                        tabindex="1"
                         title={column.title}
                         class={itemHeaderClass}
                         onClick={() => this.toggleItem(itemName)}
diff --git a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss
index daa50b7446..a575d95696 100644
--- a/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss
+++ b/packages/ketchup/src/components/kup-accordion/styles/kup-accordion-main.scss
@@ -16,51 +16,41 @@
 */
 
 :host {
-  --kup_accordion_background_color: var(
-    --kup-accordion-background-color,
-    var(--kup-background-color)
+  --kup_accordion_border_top_color: var(
+    --kup-accordion-border-top-color,
+    var(--kup-gray-color-20)
   );
-  --kup_accordion_border: var(
-    --kup-accordion-border,
-    1px solid var(--kup-border-color)
+  --kup_accordion_item_small_height: var(
+    --kup-accordion-item-small-height,
+    32px
   );
-  --kup_accordion_border_radius: var(--kup-accordion-border-radius, 4px);
-  --kup-accordion_dropdown_icon_color: var(
-    --kup-accordion-dropdown-icon-color,
-    var(--kup-icon-color)
+  --kup_accordion_item_medium_height: var(
+    --kup-accordion-item-medium-height,
+    40px
   );
-  --kup_accordion_font_family: var(
-    --kup-accordion-font-family,
-    var(--kup-font-family)
+  --kup_accordion_item_outline_color_active: var(
+    --kup-accordion-item-outline-color-focus,
+    var(--kup-primary-color-60)
   );
-  --kup_accordion_font_size: var(
-    --kup-accordion-font-size,
-    var(--kup-font-size)
+  --kup_accordion_item_large_height: var(
+    --kup-accordion-item-medium-height,
+    48px
   );
-  --kup_accordion_hover_background_color: var(
-    --kup-accordion-hover-background-color,
-    var(--kup-hover-background-color)
+  --kup_accordion_header_background_color: var(
+    --kup-accordion-header-background-color,
+    var(--kup-gray-color-0)
   );
-  --kup_accordion_hover_color: var(
-    --kup-accordion-hover-color,
-    var(--kup-hover-color)
+  --kup_accordion_header_background_color_hover: var(
+    --kup-accordion-header-background-color-hover,
+    var(--kup-gray-color-20)
   );
-  --kup_accordion_padding: var(--kup-accordion-padding, 1em 1.5em);
-  --kup_accordion_primary_color: var(
-    --kup-accordion-primary-color,
-    var(--kup-primary-color)
+  --kup_accordion_header_padding: var(
+    --kup-accordion-header-padding,
+    var(--kup-space-05)
   );
-  --kup_accordion_primary_color_rgb: var(
-    --kup-accordion-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_accordion_text_color: var(
-    --kup-accordion-text-color,
-    var(--kup-text-color)
-  );
-  --kup_accordion_text_on_primary_color: var(
-    --kup-accordion-text-on-primary-color,
-    var(--kup-text-on-primary-color)
+  --kup_accordion_dropdown_icon_color: var(
+    --kup-accordio-dropdown-icon-color,
+    var(--kup-gray-color-90)
   );
   --kup_accordion_transition: var(--kup-accordion-transition, 80ms);
 
@@ -70,10 +60,7 @@
 }
 
 .accordion {
-  background-color: var(--kup_accordion_background_color);
-  border-bottom: var(--kup_accordion_border);
   border-radius: var(--kup_accordion_border_radius);
-  border-top: var(--kup_accordion_border);
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
@@ -81,8 +68,7 @@
 }
 
 .accordion-item {
-  border-left: var(--kup_accordion_border);
-  border-right: var(--kup_accordion_border);
+  border-top: 1px solid var(--kup_accordion_border_top_color);
   box-sizing: border-box;
   width: 100%;
 
@@ -90,11 +76,12 @@
     display: block;
   }
 
-  &:not(:first-of-type) {
-    border-top: var(--kup_accordion_border);
+  &:is(:last-of-type) {
+    border-bottom: 1px solid var(--kup_accordion_border_top_color);
   }
 
   &__header {
+    height: var(--kup_accordion_item_medium_height);
     align-items: center;
     border: none;
     box-sizing: border-box;
@@ -108,24 +95,36 @@
     transition: background-color var(--kup_accordion_transition),
       color var(--kup_accordion_transition);
     width: 100%;
+    outline: 2px solid transparent;
+    outline-offset: -2px;
+    padding-left: 16px;
+    padding-right: 16px;
+
+    &:focus {
+      outline: 2px solid var(--kup_accordion_item_outline_color_active);
+    }
+
+    &.accordion-item--small {
+      height: var(--kup_accordion_item_small_height);
+    }
+    &.accordion-item--large {
+      height: var(--kup_accordion_item_large_height);
+    }
 
     &:hover:not(.accordion-item__header--selected) {
-      color: var(--kup_accordion_hover_color);
-      background-color: var(--kup_accordion_hover_background_color);
+      background-color: var(--kup_accordion_header_background_color_hover);
+    }
+    &:focus(.accordion-item__header--selected) {
+      outline: 2px solid var(--kup_accordion_item_outline_color_active);
     }
 
     &--expanded {
-      color: var(--kup_accordion_hover_color);
-      background-color: var(--kup_accordion_hover_background_color);
+      background-color: var(--kup_accordion_background_color);
 
       .accordion-item__dropdown {
         transform: rotate(-180deg);
       }
     }
-
-    &--selected {
-      background-color: rgba(var(--kup_accordion_primary_color_rgb), 0.175);
-    }
   }
 
   &__text {
@@ -146,7 +145,7 @@
   }
 
   &__dropdown {
-    background-color: var(--kup-accordion_dropdown_icon_color);
+    background-color: var(--kup_accordion_dropdown_icon_color);
     height: 1.5em;
     margin-left: auto;
     margin-right: 0;
@@ -156,8 +155,13 @@
   }
 
   &__content {
+    padding-left: 16px;
+    padding-top: 8px;
+    padding-bottom: 24px;
+    padding-right: 80px;
     animation: fade-in 0.25s ease-out;
     display: none;
+    @include kup-body-compact-01;
 
     &--selected {
       display: block;
diff --git a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx
index 1a39557500..7b4410e46a 100644
--- a/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx
+++ b/packages/ketchup/src/components/kup-autocomplete/kup-autocomplete.tsx
@@ -17,7 +17,11 @@ import {
 } from '../../managers/kup-manager/kup-manager';
 import { FTextField } from '../../f-components/f-text-field/f-text-field';
 import { FTextFieldMDC } from '../../f-components/f-text-field/f-text-field-mdc';
-import { GenericObject, KupComponent } from '../../types/GenericTypes';
+import {
+    GenericObject,
+    KupComponent,
+    KupComponentSizing,
+} from '../../types/GenericTypes';
 import {
     KupAutocompleteEventPayload,
     KupAutocompleteIconClickEventPayload,
@@ -34,6 +38,7 @@ import { getProps, setProps } from '../../utils/utils';
 import { componentWrapperId } from '../../variables/GenericVariables';
 import { KupManagerClickCb } from '../../managers/kup-manager/kup-manager-declarations';
 import { KupDynamicPositionPlacement } from '../../managers/kup-dynamic-position/kup-dynamic-position-declarations';
+import { FTextFieldProps } from '../../f-components/f-text-field/f-text-field-declarations';
 
 @Component({
     tag: 'kup-autocomplete',
@@ -57,6 +62,11 @@ export class KupAutocomplete {
     /*                    P r o p s                    */
     /*-------------------------------------------------*/
 
+    /**
+     * Set alert message
+     * @default '''
+     */
+    @Prop() alert: string = '';
     /**
      * When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list.
      * @default false
@@ -83,21 +93,52 @@ export class KupAutocomplete {
      * @default ItemsDisplayMode.DESCRIPTION
      */
     @Prop() displayMode: ItemsDisplayMode = ItemsDisplayMode.DESCRIPTION;
+    /**
+     * Set error message
+     * @default '''
+     */
+    @Prop() error: string = '';
+    /**
+     * When set, the text-field will show this icon.
+     * @default null
+     */
+    @Prop() icon: string = null;
     /**
      * Sets the initial value of the component.
      * @default ""
      */
     @Prop() initialValue: string = '';
+    /**
+     * Enables a clear trailing icon.
+     * @default false
+     */
+    @Prop() isClearable: boolean = false;
     /**
      * Input event emission delay in milliseconds.
      * @default 300
      */
     @Prop() inputDelay: number = 300;
+    /**
+     * When set, its content will be shown as a label.
+     * @default null
+     */
+    @Prop() label: string = null;
+    /**
+     * When set to true, the label will be on the left of the component.
+     * @default false
+     */
+    @Prop() leadingLabel: boolean = false;
+
     /**
      * The minimum number of chars to trigger the autocomplete
      * @default 1
      */
     @Prop() minimumChars: number = 1;
+    /**
+     * Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select.
+     * @default false
+     */
+    @Prop() readOnly: boolean = false;
     /**
      * Sets how to return the selected item value. Suported values: "code", "description", "both".
      * @default ItemsDisplayMode.CODE
@@ -113,6 +154,16 @@ export class KupAutocomplete {
      * @default true
      */
     @Prop() showDropDownIcon: boolean = true;
+    /**
+     * Sets the type of the button
+     * @default KupComponentSizing.MEDIUM
+     */
+    @Prop() sizing: KupComponentSizing = KupComponentSizing.MEDIUM;
+    /**
+     * When set, the icon will be shown after the text.
+     * @default false
+     */
+    @Prop() trailingIcon: boolean = false;
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -393,6 +444,9 @@ export class KupAutocomplete {
             this.#closeList();
             return false;
         }
+        const hasError = this.error.trim().length > 0;
+        const hasAlert = this.alert.trim().length > 0;
+        const topOffset = hasError || hasAlert ? -20 : 0;
         this.#textfieldWrapper.classList.add('toggled');
         this.#listEl.menuVisible = true;
         const elStyle = this.#listEl.style;
@@ -407,7 +461,7 @@ export class KupAutocomplete {
             this.#kupManager.dynamicPosition.register(
                 this.#listEl,
                 this.#textfieldWrapper,
-                0,
+                topOffset,
                 KupDynamicPositionPlacement.AUTO,
                 true
             );
@@ -520,6 +574,30 @@ export class KupAutocomplete {
     }
 
     render() {
+        const props: FTextFieldProps = {
+            alert: this.alert,
+            danger: this.rootElement.classList.contains('kup-danger')
+                ? true
+                : false,
+            disabled: this.disabled,
+            error: this.error,
+            icon: this.icon,
+            info: this.rootElement.classList.contains('kup-info')
+                ? true
+                : false,
+            isClearable: this.isClearable,
+            label: this.label,
+            leadingLabel: this.leadingLabel,
+            readOnly: this.readOnly,
+            sizing: this.sizing,
+            success: this.rootElement.classList.contains('kup-success')
+                ? true
+                : false,
+            value: this.value,
+            warning: this.rootElement.classList.contains('kup-warning')
+                ? true
+                : false,
+        };
         const fullHeight =
             this.rootElement.classList.contains('kup-full-height');
         const fullWidth = this.rootElement.classList.contains('kup-full-width');
@@ -538,6 +616,7 @@ export class KupAutocomplete {
                 </style>
                 <div id={componentWrapperId} style={this.#elStyle}>
                     <FTextField
+                        {...props}
                         icon={
                             this.showDropDownIcon
                                 ? KupThemeIconValues.DROPDOWN
diff --git a/packages/ketchup/src/components/kup-autocomplete/readme.md b/packages/ketchup/src/components/kup-autocomplete/readme.md
index 3b4e1501b1..553eb6c4b5 100644
--- a/packages/ketchup/src/components/kup-autocomplete/readme.md
+++ b/packages/ketchup/src/components/kup-autocomplete/readme.md
@@ -5,19 +5,28 @@
 
 ## Properties
 
-| Property                  | Attribute                   | Description                                                                                                           | Type                                                                                             | Default                        |
-| ------------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------ |
-| `allowInconsistentValues` | `allow-inconsistent-values` | When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list. | `boolean`                                                                                        | `false`                        |
-| `customStyle`             | `custom-style`              | Custom style of the component.                                                                                        | `string`                                                                                         | `''`                           |
-| `data`                    | --                          | Props of the sub-components.                                                                                          | `Object`                                                                                         | `undefined`                    |
-| `disabled`                | `disabled`                  | Defaults at false. When set to true, the component is disabled.                                                       | `boolean`                                                                                        | `false`                        |
-| `displayMode`             | `display-mode`              | Sets how to show the selected item value. Suported values: "code", "description", "both".                             | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` |
-| `initialValue`            | `initial-value`             | Sets the initial value of the component.                                                                              | `string`                                                                                         | `''`                           |
-| `inputDelay`              | `input-delay`               | Input event emission delay in milliseconds.                                                                           | `number`                                                                                         | `300`                          |
-| `minimumChars`            | `minimum-chars`             | The minimum number of chars to trigger the autocomplete                                                               | `number`                                                                                         | `1`                            |
-| `selectMode`              | `select-mode`               | Sets how to return the selected item value. Suported values: "code", "description", "both".                           | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE`        |
-| `serverHandledFilter`     | `server-handled-filter`     | When true, the items filter is managed server side, otherwise items filter is done client side.                       | `boolean`                                                                                        | `false`                        |
-| `showDropDownIcon`        | `show-drop-down-icon`       | When true shows the drop-down icon, for open list.                                                                    | `boolean`                                                                                        | `true`                         |
+| Property                  | Attribute                   | Description                                                                                                                              | Type                                                                                                          | Default                        |
+| ------------------------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------ |
+| `alert`                   | `alert`                     | Set alert message                                                                                                                        | `string`                                                                                                      | `''`                           |
+| `allowInconsistentValues` | `allow-inconsistent-values` | When true, the autocomplete fires the change event even when the value typed isn't included in the autocomplete list.                    | `boolean`                                                                                                     | `false`                        |
+| `customStyle`             | `custom-style`              | Custom style of the component.                                                                                                           | `string`                                                                                                      | `''`                           |
+| `data`                    | --                          | Props of the sub-components.                                                                                                             | `Object`                                                                                                      | `undefined`                    |
+| `disabled`                | `disabled`                  | Defaults at false. When set to true, the component is disabled.                                                                          | `boolean`                                                                                                     | `false`                        |
+| `displayMode`             | `display-mode`              | Sets how to show the selected item value. Suported values: "code", "description", "both".                                                | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE`              | `ItemsDisplayMode.DESCRIPTION` |
+| `error`                   | `error`                     | Set error message                                                                                                                        | `string`                                                                                                      | `''`                           |
+| `icon`                    | `icon`                      | When set, the text-field will show this icon.                                                                                            | `string`                                                                                                      | `null`                         |
+| `initialValue`            | `initial-value`             | Sets the initial value of the component.                                                                                                 | `string`                                                                                                      | `''`                           |
+| `inputDelay`              | `input-delay`               | Input event emission delay in milliseconds.                                                                                              | `number`                                                                                                      | `300`                          |
+| `isClearable`             | `is-clearable`              | Enables a clear trailing icon.                                                                                                           | `boolean`                                                                                                     | `false`                        |
+| `label`                   | `label`                     | When set, its content will be shown as a label.                                                                                          | `string`                                                                                                      | `null`                         |
+| `leadingLabel`            | `leading-label`             | When set to true, the label will be on the left of the component.                                                                        | `boolean`                                                                                                     | `false`                        |
+| `minimumChars`            | `minimum-chars`             | The minimum number of chars to trigger the autocomplete                                                                                  | `number`                                                                                                      | `1`                            |
+| `readOnly`                | `read-only`                 | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean`                                                                                                     | `false`                        |
+| `selectMode`              | `select-mode`               | Sets how to return the selected item value. Suported values: "code", "description", "both".                                              | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE`              | `ItemsDisplayMode.CODE`        |
+| `serverHandledFilter`     | `server-handled-filter`     | When true, the items filter is managed server side, otherwise items filter is done client side.                                          | `boolean`                                                                                                     | `false`                        |
+| `showDropDownIcon`        | `show-drop-down-icon`       | When true shows the drop-down icon, for open list.                                                                                       | `boolean`                                                                                                     | `true`                         |
+| `sizing`                  | `sizing`                    | Sets the type of the button                                                                                                              | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM`    |
+| `trailingIcon`            | `trailing-icon`             | When set, the icon will be shown after the text.                                                                                         | `boolean`                                                                                                     | `false`                        |
 
 
 ## Events
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 9a5978720d..a76a5899f4 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
@@ -1,6 +1,23 @@
 .built-in-layout-1 {
-  background-color: var(--kup-background-color);
-  border-radius: 4px;
+  --kup_card_text_color: var(--kup-card-text-color, var(--kup-gray-color-90));
+  --kup_card_background_color: var(
+    --kup-card-background-color,
+    var(--kup-gray-color-10)
+  );
+  --kup_card_selected_color: var(
+    --kup-card-selected-color,
+    var(--kup-primary-color-60)
+  );
+  --kup_card_selected_color_hover: var(
+    --kup-card-selected-color-hover,
+    var(--kup-primary-color-30)
+  );
+  --kup_card_box_shadow: var(
+    --kup-box-shadow,
+    0px 3px 6px 0 rgba(0, 0, 0, 0.3)
+  );
+  background-color: var(--kup_card_background_color);
+  border-radius: var(--kup-radius-00);
   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);
@@ -32,22 +49,27 @@
     width: 100%;
   }
 
-  .prev-page {
-    margin-left: auto;
-  }
-
   .change-view-button {
     margin: auto;
     width: 12em;
     text-align: center;
+    button {
+      color: var(-kup_card_text_color);
+
+      span {
+        @include kup-heading-compact-01;
+        color: var(-kup_card_text_color);
+      }
+    }
   }
 
   #change-view-button button {
     text-transform: capitalize;
   }
 
-  .next-page {
-    margin-right: auto;
+  .next-page .icon-button .f-image .f-image__icon,
+  .prev-page .icon-button .f-image .f-image__icon {
+    background-color: var(--kup_card_text_color) !important;
   }
 
   .calendar {
@@ -55,35 +77,41 @@
     width: 100%;
   }
 
-  thead {
-    border-bottom: 1px solid var(--kup-border-color);
+  tbody:before {
+    content: '@';
+    display: block;
+    line-height: var(--kup-space-05);
+    text-indent: -99999px;
   }
 
   .item-text {
-    color: rgba(var(--kup-text-color-rgb), 0.5);
+    color: var(--kup_card_text_color);
+    @include kup-body-compact-01;
   }
 
   .item {
     text-align: center;
 
     &:not(.selected) .item-number:hover {
-      background-color: var(--kup-hover-background-color);
+      background-color: var(--kup_card_selected_color_hover);
     }
     &.selected .item-number,
     &.selected .item-number:hover {
-      background-color: rgba(var(--kup-primary-color-rgb), 0.175);
+      background-color: var(--kup_card_selected_color);
+      color: var(--kup-gray-color-0);
     }
   }
 
   .item-number {
-    border-radius: 50%;
     cursor: pointer;
     display: flex;
     justify-content: center;
-    line-height: 2.5em;
     margin: auto;
     width: 2.5em;
     transition: background-color 0.25s;
     text-transform: capitalize;
+    @include kup-body-compact-01;
+    line-height: 2.5em;
+    color: var(--kup_card_text_color);
   }
 }
diff --git a/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx b/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx
index 377cfbfca7..64e7bcf6c6 100644
--- a/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx
+++ b/packages/ketchup/src/components/kup-card/built-in/kup-card-calendar.tsx
@@ -84,7 +84,7 @@ export function prepareCalendar(component: KupCard) {
     const nextButtonComp = <FButton {...nextButtonProp} />;
 
     const changeViewButtonProp: FButtonProps = {
-        wrapperClass: 'change-view-button',
+        wrapperClass: 'change-view-button kup-neutral',
         styling: FButtonStyling.FLAT,
         label: changeViewButtonLabel,
         onClick: () => changeView(component),
diff --git a/packages/ketchup/src/components/kup-chip/kup-chip.tsx b/packages/ketchup/src/components/kup-chip/kup-chip.tsx
index efbf4fb710..5af0b13190 100644
--- a/packages/ketchup/src/components/kup-chip/kup-chip.tsx
+++ b/packages/ketchup/src/components/kup-chip/kup-chip.tsx
@@ -83,7 +83,7 @@ export class KupChip {
      */
     @Prop() type: FChipType = FChipType.STANDARD;
     /**
-     * Sets the type of the chip
+     * Sets the size of the chip
      * @default FChipSize.MEDIUM
      */
     @Prop() sizing: FChipSize = FChipSize.MEDIUM;
diff --git a/packages/ketchup/src/components/kup-chip/readme.md b/packages/ketchup/src/components/kup-chip/readme.md
index 67aef88461..33f467d549 100644
--- a/packages/ketchup/src/components/kup-chip/readme.md
+++ b/packages/ketchup/src/components/kup-chip/readme.md
@@ -11,7 +11,7 @@
 | `data`        | --             | List of elements.                                                                                                                      | `KupChipNode[]`                                                                 | `[]`                  |
 | `displayId`   | `display-id`   | When enabled, the chip's text will display both the id and the value.                                                                  | `boolean`                                                                       | `false`               |
 | `enableInput` | `enable-input` | When enabled, it's possible to add items to the chip's dataset through an input slot (kup-autocomplete, kup-combobox, kup-text-field). | `boolean`                                                                       | `false`               |
-| `sizing`      | `sizing`       | Sets the type of the chip                                                                                                              | `FChipSize.MEDIUM \| FChipSize.SMALL`                                           | `FChipSize.MEDIUM`    |
+| `sizing`      | `sizing`       | Sets the size of the chip                                                                                                              | `FChipSize.MEDIUM \| FChipSize.SMALL`                                           | `FChipSize.MEDIUM`    |
 | `styling`     | `styling`      | Sets the style of the chip                                                                                                             | `FChipStyling.OUTLINED \| FChipStyling.RAISED`                                  | `FChipStyling.RAISED` |
 | `type`        | `type`         | The type of chip. Available types: input, filter, choice or empty for default.                                                         | `FChipType.CHOICE \| FChipType.FILTER \| FChipType.INPUT \| FChipType.STANDARD` | `FChipType.STANDARD`  |
 
diff --git a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx
index e8bc295477..acc7851258 100644
--- a/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx
+++ b/packages/ketchup/src/components/kup-combobox/kup-combobox.tsx
@@ -88,21 +88,6 @@ export class KupCombobox {
      * @default '''
      */
     @Prop() error: string = '';
-    /**
-     * When set, its content will be shown as a help text below the field.
-     * @default null
-     */
-    @Prop() helper: string = null;
-    /**
-     * When true, the helper will be displayed.
-     * @default true
-     */
-    @Prop() helperEnabled: boolean = true;
-    /**
-     * When set, the helper will be shown only when the field is focused.
-     * @default false
-     */
-    @Prop() helperWhenFocused: boolean = false;
     /**
      * When set, the text-field will show this icon.
      * @default null
@@ -571,7 +556,6 @@ export class KupCombobox {
                 : false,
             disabled: this.disabled,
             error: this.error,
-            helper: this.helper,
             icon: this.icon,
             info: this.rootElement.classList.contains('kup-info')
                 ? true
diff --git a/packages/ketchup/src/components/kup-combobox/readme.md b/packages/ketchup/src/components/kup-combobox/readme.md
index 51dc70973c..a8186607d6 100644
--- a/packages/ketchup/src/components/kup-combobox/readme.md
+++ b/packages/ketchup/src/components/kup-combobox/readme.md
@@ -5,18 +5,25 @@
 
 ## Properties
 
-| Property           | Attribute             | Description                                                                                 | Type                                                                                             | Default                        |
-| ------------------ | --------------------- | ------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | ------------------------------ |
-| `customStyle`      | `custom-style`        | Custom style of the component.                                                              | `string`                                                                                         | `''`                           |
-| `data`             | --                    | Props of the sub-components (date input text field).                                        | `Object`                                                                                         | `undefined`                    |
-| `disabled`         | `disabled`            | Defaults at false. When set to true, the component is disabled.                             | `boolean`                                                                                        | `false`                        |
-| `displayMode`      | `display-mode`        | Sets how to show the selected item value. Suported values: "code", "description", "both".   | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.DESCRIPTION` |
-| `initialValue`     | `initial-value`       | Sets the initial value of the component                                                     | `string`                                                                                         | `''`                           |
-| `isSelect`         | `is-select`           | Lets the combobox behave as a select element.                                               | `boolean`                                                                                        | `false`                        |
-| `label`            | `label`               | When set, its content will be shown as a label.                                             | `string`                                                                                         | `null`                         |
-| `leadingLabel`     | `leading-label`       | When set to true, the label will be on the left of the component.                           | `boolean`                                                                                        | `false`                        |
-| `selectMode`       | `select-mode`         | Sets how to return the selected item value. Suported values: "code", "description", "both". | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE` | `ItemsDisplayMode.CODE`        |
-| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list.                                          | `boolean`                                                                                        | `true`                         |
+| Property           | Attribute             | Description                                                                                                                              | Type                                                                                                          | Default                        |
+| ------------------ | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------------ |
+| `alert`            | `alert`               | Set alert message                                                                                                                        | `string`                                                                                                      | `''`                           |
+| `customStyle`      | `custom-style`        | Custom style of the component.                                                                                                           | `string`                                                                                                      | `''`                           |
+| `data`             | --                    | Props of the sub-components (date input text field).                                                                                     | `Object`                                                                                                      | `undefined`                    |
+| `disabled`         | `disabled`            | Defaults at false. When set to true, the component is disabled.                                                                          | `boolean`                                                                                                     | `false`                        |
+| `displayMode`      | `display-mode`        | Sets how to show the selected item value. Suported values: "code", "description", "both".                                                | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE`              | `ItemsDisplayMode.DESCRIPTION` |
+| `error`            | `error`               | Set error message                                                                                                                        | `string`                                                                                                      | `''`                           |
+| `icon`             | `icon`                | When set, the text-field will show this icon.                                                                                            | `string`                                                                                                      | `null`                         |
+| `initialValue`     | `initial-value`       | Sets the initial value of the component                                                                                                  | `string`                                                                                                      | `''`                           |
+| `isClearable`      | `is-clearable`        | Enables a clear trailing icon.                                                                                                           | `boolean`                                                                                                     | `false`                        |
+| `isSelect`         | `is-select`           | Lets the combobox behave as a select element.                                                                                            | `boolean`                                                                                                     | `false`                        |
+| `label`            | `label`               | When set, its content will be shown as a label.                                                                                          | `string`                                                                                                      | `null`                         |
+| `leadingLabel`     | `leading-label`       | When set to true, the label will be on the left of the component.                                                                        | `boolean`                                                                                                     | `false`                        |
+| `readOnly`         | `read-only`           | Sets the component to read only state, making it not editable, but interactable. Used in combobox component when it behaves as a select. | `boolean`                                                                                                     | `false`                        |
+| `selectMode`       | `select-mode`         | Sets how to return the selected item value. Suported values: "code", "description", "both".                                              | `ItemsDisplayMode.CODE \| ItemsDisplayMode.DESCRIPTION \| ItemsDisplayMode.DESCRIPTION_AND_CODE`              | `ItemsDisplayMode.CODE`        |
+| `showDropDownIcon` | `show-drop-down-icon` | When true shows the drop-down icon, for open list.                                                                                       | `boolean`                                                                                                     | `true`                         |
+| `sizing`           | `sizing`              | Sets the type of the button                                                                                                              | `KupComponentSizing.LARGE \| KupComponentSizing.MAX \| KupComponentSizing.MEDIUM \| KupComponentSizing.SMALL` | `KupComponentSizing.MEDIUM`    |
+| `trailingIcon`     | `trailing-icon`       | When set, the icon will be shown after the text.                                                                                         | `boolean`                                                                                                     | `false`                        |
 
 
 ## Events
diff --git a/packages/ketchup/src/components/kup-form/kup-form.tsx b/packages/ketchup/src/components/kup-form/kup-form.tsx
index b73b6a9b01..371660cdda 100644
--- a/packages/ketchup/src/components/kup-form/kup-form.tsx
+++ b/packages/ketchup/src/components/kup-form/kup-form.tsx
@@ -78,9 +78,9 @@ export class KupForm {
 
     /**
      * Sets the label placement for 'all' fields in form
-     * @default KupFormLabelPlacement.LEFT
+     * @default KupFormLabelPlacement.TOP
      */
-    @Prop() labelPlacement: KupFormLabelPlacement = KupFormLabelPlacement.LEFT;
+    @Prop() labelPlacement: KupFormLabelPlacement = KupFormLabelPlacement.TOP;
     /**
      * How the form will arrange its content.
      * @default null
diff --git a/packages/ketchup/src/components/kup-form/readme.md b/packages/ketchup/src/components/kup-form/readme.md
index f9ca0afeb3..a372120307 100644
--- a/packages/ketchup/src/components/kup-form/readme.md
+++ b/packages/ketchup/src/components/kup-form/readme.md
@@ -5,14 +5,14 @@
 
 ## Properties
 
-| Property             | Attribute              | Description                                                            | Type                                                                                                                                                                                                                             | Default                      |
-| -------------------- | ---------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------- |
-| `customStyle`        | `custom-style`         | Custom style of the component.                                         | `string`                                                                                                                                                                                                                         | `''`                         |
-| `data`               | --                     | Actual data of the form.                                               | `KupFormData`                                                                                                                                                                                                                    | `null`                       |
-| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean`                                                                                                                                                                                                                        | `false`                      |
-| `labelPlacement`     | `label-placement`      | Sets the label placement for 'all' fields in form                      | `KupFormLabelPlacement.BOTTOM \| KupFormLabelPlacement.HIDDEN \| KupFormLabelPlacement.LEFT \| KupFormLabelPlacement.PLACEHOLDER \| KupFormLabelPlacement.RIGHT \| KupFormLabelPlacement.TOP \| KupFormLabelPlacement.WATERMARK` | `KupFormLabelPlacement.LEFT` |
-| `layout`             | --                     | How the form will arrange its content.                                 | `KupFormLayout`                                                                                                                                                                                                                  | `null`                       |
-| `submitCb`           | --                     | Sets the callback function on submit form                              | `(e: SubmitEvent) => unknown`                                                                                                                                                                                                    | `null`                       |
+| Property             | Attribute              | Description                                                            | Type                                                                                                                                                                                                                             | Default                     |
+| -------------------- | ---------------------- | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------- |
+| `customStyle`        | `custom-style`         | Custom style of the component.                                         | `string`                                                                                                                                                                                                                         | `''`                        |
+| `data`               | --                     | Actual data of the form.                                               | `KupFormData`                                                                                                                                                                                                                    | `null`                      |
+| `hiddenSubmitButton` | `hidden-submit-button` | Creates a hidden submit button in order to submit the form with enter. | `boolean`                                                                                                                                                                                                                        | `false`                     |
+| `labelPlacement`     | `label-placement`      | Sets the label placement for 'all' fields in form                      | `KupFormLabelPlacement.BOTTOM \| KupFormLabelPlacement.HIDDEN \| KupFormLabelPlacement.LEFT \| KupFormLabelPlacement.PLACEHOLDER \| KupFormLabelPlacement.RIGHT \| KupFormLabelPlacement.TOP \| KupFormLabelPlacement.WATERMARK` | `KupFormLabelPlacement.TOP` |
+| `layout`             | --                     | How the form will arrange its content.                                 | `KupFormLayout`                                                                                                                                                                                                                  | `null`                      |
+| `submitCb`           | --                     | Sets the callback function on submit form                              | `(e: SubmitEvent) => unknown`                                                                                                                                                                                                    | `null`                      |
 
 
 ## Events
diff --git a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss
index 8924439e51..3953f982b5 100644
--- a/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss
+++ b/packages/ketchup/src/components/kup-list/styles/kup-list-main.scss
@@ -36,6 +36,10 @@
     --kup-list-item-padding,
     var(--kup-space-05)
   );
+  --kup_list_box_shadow: var(
+    --kup-box-shadow,
+    0px 3px 6px 0 rgba(0, 0, 0, 0.3)
+  );
   --kup_list_item_padding_right: var(--kup-list-item-padding, 0.75em);
   --kup_list_max_height_as_menu: var(--kup-list-max-height-as-menu, 33vh);
   --kup_list_primary_color: var(
@@ -218,7 +222,7 @@
 .kup-menu {
   animation: fade-in 0.25s ease-out;
   background-color: var(--kup_list_background);
-  box-shadow: var(--kup-box-shadow); // box shadow to be fixed
+  box-shadow: var(--kup_list_box_shadow);
   border: 1px solid var(--kup_list_focus_color);
   color: var(--kup-text-color);
   display: none;
diff --git a/packages/ketchup/src/components/kup-radio/kup-radio.scss b/packages/ketchup/src/components/kup-radio/kup-radio.scss
index a6dd9c0e9d..a6e7f211b6 100644
--- a/packages/ketchup/src/components/kup-radio/kup-radio.scss
+++ b/packages/ketchup/src/components/kup-radio/kup-radio.scss
@@ -11,3 +11,8 @@
 :host {
   display: block;
 }
+
+.kup-radio-wrapper {
+  display: grid;
+  gap: var(--kup-space-03);
+}
diff --git a/packages/ketchup/src/components/kup-radio/kup-radio.tsx b/packages/ketchup/src/components/kup-radio/kup-radio.tsx
index 00c61586cf..61dc695f1f 100644
--- a/packages/ketchup/src/components/kup-radio/kup-radio.tsx
+++ b/packages/ketchup/src/components/kup-radio/kup-radio.tsx
@@ -77,6 +77,16 @@ export class KupRadio {
      * @default false
      */
     @Prop() disabled: boolean = false;
+    /**
+     * Defaults at false. When set to true, the component is horizontal.
+     * @default false
+     */
+    @Prop() horizontal: boolean = false;
+    /**
+     * When set, its content will be shown as a label.
+     * @default null
+     */
+    @Prop() label: string = '';
     /**
      * Defaults at false. When set to true, the label will be on the left of the component.
      * @default false
@@ -224,6 +234,9 @@ export class KupRadio {
             info: this.rootElement.classList.contains('kup-info')
                 ? true
                 : false,
+            horizontal: this.rootElement.classList.contains('kup-horizontal')
+                ? true
+                : false,
             leadingLabel: this.leadingLabel,
             secondary: this.rootElement.classList.contains('kup-secondary')
                 ? true
@@ -246,7 +259,7 @@ export class KupRadio {
                         this.rootElement as KupComponent
                     )}
                 </style>
-                <div id={componentWrapperId}>
+                <div id={componentWrapperId} class="kup-radio-wrapper">
                     <FRadio {...props}></FRadio>
                 </div>
             </Host>
diff --git a/packages/ketchup/src/components/kup-radio/readme.md b/packages/ketchup/src/components/kup-radio/readme.md
index ab0a4ad0ab..fb3f30a9b2 100644
--- a/packages/ketchup/src/components/kup-radio/readme.md
+++ b/packages/ketchup/src/components/kup-radio/readme.md
@@ -11,6 +11,8 @@
 | `customStyle`  | `custom-style`  | Custom style of the component.                                                       | `string`       | `''`    |
 | `data`         | --              | List of elements.                                                                    | `FRadioData[]` | `null`  |
 | `disabled`     | `disabled`      | Defaults at false. When set to true, the component is disabled.                      | `boolean`      | `false` |
+| `horizontal`   | `horizontal`    | Defaults at false. When set to true, the component is horizontal.                    | `boolean`      | `false` |
+| `label`        | `label`         | When set, its content will be shown as a label.                                      | `string`       | `''`    |
 | `leadingLabel` | `leading-label` | Defaults at false. When set to true, the label will be on the left of the component. | `boolean`      | `false` |
 
 
diff --git a/packages/ketchup/src/components/kup-switch/kup-switch.tsx b/packages/ketchup/src/components/kup-switch/kup-switch.tsx
index 70fe26e945..911ebc62bb 100644
--- a/packages/ketchup/src/components/kup-switch/kup-switch.tsx
+++ b/packages/ketchup/src/components/kup-switch/kup-switch.tsx
@@ -15,7 +15,10 @@ import {
     kupManagerInstance,
 } from '../../managers/kup-manager/kup-manager';
 import { FSwitch } from '../../f-components/f-switch/f-switch';
-import { FSwitchProps } from '../../f-components/f-switch/f-switch-declarations';
+import {
+    FSwitchProps,
+    FSwitchSizing,
+} from '../../f-components/f-switch/f-switch-declarations';
 import { GenericObject, KupComponent } from '../../types/GenericTypes';
 import {
     KupSwitchEventPayload,
@@ -75,6 +78,11 @@ export class KupSwitch {
      * @default false
      */
     @Prop() leadingLabel: boolean = false;
+    /**
+     * Sets the size of the switch
+     * @default FSwitchSizing.MEDIUM
+     */
+    @Prop() sizing: FSwitchSizing = FSwitchSizing.MEDIUM;
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -221,6 +229,7 @@ export class KupSwitch {
             secondary: this.rootElement.classList.contains('kup-secondary')
                 ? true
                 : false,
+            sizing: this.sizing,
             success: this.rootElement.classList.contains('kup-success')
                 ? true
                 : false,
diff --git a/packages/ketchup/src/components/kup-switch/readme.md b/packages/ketchup/src/components/kup-switch/readme.md
index ac61f33064..8ffdc69e5b 100644
--- a/packages/ketchup/src/components/kup-switch/readme.md
+++ b/packages/ketchup/src/components/kup-switch/readme.md
@@ -5,13 +5,14 @@
 
 ## Properties
 
-| Property       | Attribute       | Description                                                                          | Type      | Default |
-| -------------- | --------------- | ------------------------------------------------------------------------------------ | --------- | ------- |
-| `checked`      | `checked`       | Defaults at false. When set to true, the component will be set to 'checked'.         | `boolean` | `false` |
-| `customStyle`  | `custom-style`  | Custom style of the component.                                                       | `string`  | `''`    |
-| `disabled`     | `disabled`      | Defaults at false. When set to true, the component is disabled.                      | `boolean` | `false` |
-| `label`        | `label`         | Defaults at null. When specified, its content will be shown as a label.              | `string`  | `null`  |
-| `leadingLabel` | `leading-label` | Defaults at false. When set to true, the label will be on the left of the component. | `boolean` | `false` |
+| Property       | Attribute       | Description                                                                          | Type                                          | Default                |
+| -------------- | --------------- | ------------------------------------------------------------------------------------ | --------------------------------------------- | ---------------------- |
+| `checked`      | `checked`       | Defaults at false. When set to true, the component will be set to 'checked'.         | `boolean`                                     | `false`                |
+| `customStyle`  | `custom-style`  | Custom style of the component.                                                       | `string`                                      | `''`                   |
+| `disabled`     | `disabled`      | Defaults at false. When set to true, the component is disabled.                      | `boolean`                                     | `false`                |
+| `label`        | `label`         | Defaults at null. When specified, its content will be shown as a label.              | `string`                                      | `null`                 |
+| `leadingLabel` | `leading-label` | Defaults at false. When set to true, the label will be on the left of the component. | `boolean`                                     | `false`                |
+| `sizing`       | `sizing`        | Sets the size of the switch                                                          | `FSwitchSizing.MEDIUM \| FSwitchSizing.SMALL` | `FSwitchSizing.MEDIUM` |
 
 
 ## Events
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 58cd61120a..5b409bba7b 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
@@ -9,22 +9,34 @@
 */
 
 :host {
-  --kup_tabbar_font_family: var(
-    --kup-tabbar-font-family,
-    var(--kup-font-family)
+  --kup_tabindicator_border_bottom_color: var(
+    --kup-tab-indicator-border-bottom-color,
+    var(--kup-gray-color-20)
   );
+  --kup_tabindicator_border_bottom_color_active: var(
+    --kup-tabindicator-border-bottom-color-active,
+    var(--kup-primary-color-60)
+  );
+  --kup_tabbar_text_color: var(
+    --kup-tabbar-text-color,
+    var(--kup-gray-color-70)
+  );
+  --kup_tabbar_text_color_active: var(
+    --kup-tabbar-text-color-active,
+    var(--kup-gray-color-90)
+  );
+  --kup_tabbar_border_color_dense: var(
+    --kup-tabbar-border-color-dense,
+    var(--kup-gray-color-50)
+  );
+
   --kup_tabbar_font_size: var(--kup-tabbar-font-size, var(--kup-font-size));
   --kup_tabbar_font_weight: var(--kup-tabbar-font-weight, 500);
   --kup_tabbar_height: var(--kup-tabbar-height, 36px);
-  --kup_tabbar_primary_color: var(
-    --kup-tabbar-primary-color,
-    var(--kup-primary-color)
-  );
-  --kup_tabbar_primary_color_rgb: var(
-    --kup-tabbar-primary-color-rgb,
-    var(--kup-primary-color-rgb)
+  --kup_tabbar_tab_padding: var(
+    --kup-tabbar-tab-padding,
+    0 var(--kup-space-05)
   );
-  --kup_tabbar_tab_padding: var(--kup-tabbar-tab-padding, 0 24px);
 
   display: block;
   font-size: var(--kup_tabbar_font_size);
@@ -48,63 +60,105 @@
         flex: 1 0 auto;
         transform: none;
         will-change: transform;
+        gap: 2px;
       }
     }
 
+    // add the disabled status on specific field
     .tab {
       -webkit-font-smoothing: antialiased;
       padding: var(--kup_tabbar_tab_padding);
-      min-width: 90px;
       position: relative;
       display: flex;
-      flex: 1 0 auto;
-      justify-content: center;
       box-sizing: border-box;
+      gap: 8px;
       margin: 0px;
       border: none;
-      outline: none;
+      outline: 2px solid transparent;
+      outline-offset: -2px;
       background: none;
-      text-align: center;
+      text-align: left;
       white-space: nowrap;
       cursor: pointer;
       appearance: none;
       z-index: 1;
       height: var(--kup_tabbar_height);
-      font-family: var(--kup_tabbar_font_family);
-      font-size: 0.875em;
-      font-weight: var(--kup_tabbar_font_weight);
-      letter-spacing: 0.0892857143em;
-      text-transform: uppercase;
+      &:focus {
+        outline: 2px solid var(--kup_tabindicator_border_bottom_color_active);
+      }
 
       .tab__icon + .tab__text-label {
         padding-left: 8px;
         padding-right: 0px;
+        @include kup-body-compact-01;
+      }
+
+      .tab__icon .f-image__icon {
+        background: var(--kup_tabbar_text_color) !important;
       }
 
       &:hover {
         background-color: rgba(var(--kup_tabbar_primary_color_rgb), 0.075);
+        .tab-indicator .tab-indicator__content--underline {
+          --kup_tabindicator_border_bottom_color: var(--kup-gray-color-50);
+        }
+      }
+      &.tab--active {
+        .tab__content {
+          .tab__icon {
+            transition-delay: 100ms;
+          }
+          .tab__text-label {
+            transition-delay: 100ms;
+            @include kup-heading-compact-01;
+          }
+        }
+      }
+      &[disabled] {
+        --kup_tabindicator_border_bottom_color: var(--kup-gray-color-30);
+        --kup_tabbar_text_color: var(--kup-gray-color-30);
+        pointer-events: none;
+      }
+      &.kup-dense {
+        background: var(--kup-gray-color-20);
+        border-right: 1px solid var(--kup_tabbar_border_color_dense);
+        &.tab--active {
+          background: var(--kup-gray-color-10);
+        }
+        &:hover {
+          background: var(--kup-gray-color-30);
+        }
+        .tab-indicator {
+          height: 2px;
+          border-color: transparent;
+        }
+        .tab-indicator--active .tab-indicator__content {
+          border-color: var(--kup_tabindicator_border_bottom_color_active);
+        }
       }
     }
 
     .tab__content {
       position: relative;
+      width: 100%;
       display: flex;
       align-items: center;
-      justify-content: center;
+      justify-content: space-between;
       height: inherit;
       pointer-events: none;
+      gap: var(--kup-space-03);
 
       .tab__icon {
         transition: color 150ms linear 0s;
-        width: 24px;
-        height: 24px;
-        font-size: 24px;
+        width: 16px;
+        height: 16px;
+        font-size: 16px;
         z-index: 2;
+        margin: 0;
 
         &.#{$kup-icon} {
-          background-color: var(--kup_tabbar_primary_color);
-          height: 24px;
-          width: 24px;
+          height: 16px;
+          width: 16px;
         }
       }
 
@@ -113,7 +167,8 @@
         display: inline-block;
         line-height: 1;
         z-index: 2;
-        color: var(--kup_tabbar_primary_color);
+        color: var(--kup_tabbar_text_color);
+        min-width: 150px;
       }
     }
 
@@ -131,13 +186,12 @@
       &.tab-indicator--active {
         .tab-indicator__content {
           opacity: 1;
+          border-color: var(--kup_tabindicator_border_bottom_color_active);
         }
       }
 
       .tab-indicator__content {
-        border-color: var(--kup_tabbar_primary_color);
         transform-origin: left center;
-        opacity: 0;
 
         &.tab-indicator__content--underline {
           align-self: flex-end;
@@ -146,18 +200,10 @@
           border-top-style: solid;
           border-top-width: 2px;
           transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
+          color: var(--kup_tabindicator_border_bottom_color);
         }
       }
     }
-
-    &.tab--active {
-      .tab__icon {
-        transition-delay: 100ms;
-      }
-      .tab__text-label {
-        transition-delay: 100ms;
-      }
-    }
   }
 }
 
diff --git a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.tsx b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.tsx
index ba14deeaf6..e46168217b 100644
--- a/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.tsx
+++ b/packages/ketchup/src/components/kup-tab-bar/kup-tab-bar.tsx
@@ -62,11 +62,16 @@ export class KupTabBar {
      * @default null
      */
     @Prop() data: KupTabBarNode[] = null;
+    /**
+     * Defaults at false. When set to true, the component is dense.
+     * @default false
+     */
+    @Prop() dense: boolean = false;
     /**
      * When enabled displays Material's ripple effect on item headers.
      * @default true
      */
-    @Prop() ripple: boolean = true;
+    @Prop() ripple: boolean = false;
 
     /*-------------------------------------------------*/
     /*       I n t e r n a l   V a r i a b l e s       */
@@ -286,10 +291,11 @@ export class KupTabBar {
                 tab: true,
                 'tab--active': node.active ? true : false,
                 'mdc-ripple-surface': this.ripple ? true : false,
+                'kup-dense': this.dense,
             };
 
             const tabEl: VNode = (
-                <button
+                <f-button
                     class={tabClass}
                     role="tab"
                     aria-selected={this.data[i].active ? true : false}
@@ -300,20 +306,19 @@ export class KupTabBar {
                     onFocus={() => this.onKupFocus(i, node)}
                 >
                     <span class="tab__content">
+                        {node.value ? (
+                            <span class="tab__text-label">
+                                {this.data[i].value}
+                            </span>
+                        ) : null}
                         {node.icon ? (
                             <FImage
-                                color={`var(${KupThemeColorValues.PRIMARY})`}
                                 resource={node.icon}
-                                sizeX="24px"
-                                sizeY="24px"
+                                sizeX="16px"
+                                sizeY="16px"
                                 wrapperClass="tab__icon"
                             />
                         ) : null}
-                        {node.value ? (
-                            <span class="tab__text-label">
-                                {this.data[i].value}
-                            </span>
-                        ) : null}
                     </span>
                     <span
                         class={`tab-indicator ${
@@ -322,7 +327,7 @@ export class KupTabBar {
                     >
                         <span class="tab-indicator__content tab-indicator__content--underline"></span>
                     </span>
-                </button>
+                </f-button>
             );
             tabBar.push(tabEl);
         }
diff --git a/packages/ketchup/src/date-picker.html b/packages/ketchup/src/date-picker.html
index 1ee2227347..5684500bb7 100644
--- a/packages/ketchup/src/date-picker.html
+++ b/packages/ketchup/src/date-picker.html
@@ -15,11 +15,6 @@
             type="text/css"
         />
 
-        <link
-            href="https://fonts.googleapis.com/css?family=Lato"
-            rel="stylesheet"
-        />
-
         <script
             type="text/javascript"
             src="https://www.gstatic.com/charts/loader.js"
@@ -43,10 +38,13 @@
         </script>
         <h1>Date picker</h1>
         <h4>init on Monday</h4>
-        <kup-date-picker
-            id="date-picker1"
-            initial-value="2021-11-01"
-        ></kup-date-picker>
+        <div style="width: 250px">
+            <kup-date-picker
+                id="date-picker1"
+                initial-value="2021-11-01"
+            ></kup-date-picker
+        ></div>
+
         <h4>init on Sunday</h4>
         <kup-date-picker
             id="date-picker2"
diff --git a/packages/ketchup/src/design-system.html b/packages/ketchup/src/design-system.html
index 81ed430e02..032a41090d 100644
--- a/packages/ketchup/src/design-system.html
+++ b/packages/ketchup/src/design-system.html
@@ -15,11 +15,6 @@
             type="text/css"
         />
 
-        <link
-            href="https://fonts.googleapis.com/css?family=Lato"
-            rel="stylesheet"
-        />
-
         <script
             type="text/javascript"
             src="https://www.gstatic.com/charts/loader.js"
diff --git a/packages/ketchup/src/dropdown-button.html b/packages/ketchup/src/dropdown-button.html
index 427a907074..bfa974ccb1 100644
--- a/packages/ketchup/src/dropdown-button.html
+++ b/packages/ketchup/src/dropdown-button.html
@@ -36,6 +36,11 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h1>Dropdown button</h1>
         <kup-dropdown-button
             id="ddb1"
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 ef4a218cb8..adcaf971c0 100644
--- a/packages/ketchup/src/f-components/f-button/f-button.scss
+++ b/packages/ketchup/src/f-components/f-button/f-button.scss
@@ -1,50 +1,60 @@
 .f-button {
   --kup_button_background_color: var(
     --kup-button-background-color,
-    var(--kup-primary-color-20)
+    var(--kup-primary-color-0)
   );
-  --kup_button_background_hover_color: var(
-    --kup-button-background-hover-color,
-    var(--kup-primary-color-10)
+  --kup_button_background_color_rgb: var(
+    --kup-button-background-color,
+    var(--kup-primary-color-0-rgb)
+  );
+  --kup_button_text_color: var(
+    --kup-button-text-color,
+    var(--kup-primary-color-60)
   );
-  --kup_button_background_active_color: var(
-    --kup-button-background-active-color,
-    var(--kup-primary-color-20)
+  --kup_button_text_color_rgb: var(
+    --kup-button-text-color,
+    var(--kup-primary-color-60-rgb)
   );
-  --kup_button_border_focus_color: var(
-    --kup-button-border-focus-color,
+  --kup_button_border_color: var(
+    --kup-button-border-color,
     var(--kup-primary-color-60)
   );
-  --kup_button_border_radius: var(--kup-button-border-radius, --kup-radius-00);
-  --kup_button_disabled_color: var(
-    --kup-button-disabled-color,
-    var(--kup-gray-color-50)
+  --kup_button_background_color_disabled: var(
+    --kup-button-background-color-disabled,
+    var(--kup-gray-color-30)
   );
-  --kup_button_disabled_color_rgb: var(
-    --kup-button-disabled-color-rgb,
-    var(--kup-disabled-color-rgb)
+  --kup_button_text_color_disabled: var(
+    --kup-button-text-color-disabled,
+    var(--kup-gray-color-40)
   );
-  --kup_button_disabled_border_color: var(
-    --kup-button-disabled-border-color,
+  --kup_button_border_color_disabled: var(
+    --kup-button-border-color-disabled,
     var(--kup-gray-color-30)
   );
+  --kup_button_background_color_hover: var(
+    --kup-button-background-color-hover,
+    var(--kup-primary-color-50)
+  );
+  --kup_button_background_color_focus: var(
+    --kup-button-background-color-focus,
+    var(--kup-primary-color-80)
+  );
+  --kup_button_background_color_active: var(
+    --kup-button-background-color-active,
+    var(--kup-primary-color-40)
+  );
+  --kup_button_border_color_focus: var(
+    --kup-button-border-color-focus,
+    var(--kup-primary-color-30)
+  );
+  --kup_button_border_radius: var(
+    --kup-button-border-radius,
+    var(--kup-radius-00)
+  );
   --kup_button_font_family: var(
     --kup-button-font-family,
     var(--kup-font-family)
   );
-  --kup_button_font_size: var(--kup-button-font-size, var(--kup-font-size));
-  --kup_button_font_weight: var(--kup-button-font-weight, 400);
-  --kup_button_height: var(--kup-button-height, 3em);
-  --kup_button_small_height: var(--kup-button-small-height, 32px);
-  --kup_button_medium_height: var(--kup-button-medium-height, 40px);
-  --kup_button_large_height: var(--kup-button-large-height, 48px);
-  --kup_button_max_large_height: var(--kup-button-max-large-height, 64px);
-  --kup_button_padding: var(--kup-button-padding, 0 1.25em);
-  --kup_button_gap: var(--kup-button-gap, --kup-space-03);
-  --kup_button_primary_color: var(
-    --kup-button-primary-color,
-    var(--kup-primary-color-60)
-  );
   --kup_button_primary_color_h: var(
     --kup-button-primary-color-h,
     var(--kup-primary-color-h)
@@ -57,28 +67,17 @@
     --kup-button-primary-color-l,
     var(--kup-primary-color-l)
   );
-  --kup_button_primary_color_rgb: var(
-    --kup-button-primary-color-rgb,
-    var(--kup-primary-color-rgb)
-  );
-  --kup_button_text_on_primary_color: var(
-    --kup-button-text-on-primary-color,
-    var(--kup-primary-color-60)
-  );
-  --kup_button_text_on_primary_color_rgb: var(
-    --kup-button-text-on-primary-color-rgb,
-    var(--kup-text-on-primary-color-rgb)
-  );
-  --kup_button_text_on_primary_color_disabled: var(
-    --kup-button-text-on-primary-color,
-    var(--kup-text-on-primary-color)
-  );
-  --kup_button_text_on_primary_color_active: var(
-    --kup-button-text-on-primary-color-active,
-    var(--kup-primary-color-90)
-  );
+  --kup_button_font_size: var(--kup-button-font-size, var(--kup-font-size));
+  --kup_button_font_weight: var(--kup-button-font-weight, 400);
+  --kup_button_height: var(--kup-button-height, 3em);
+  --kup_button_small_height: var(--kup-button-small-height, 32px);
+  --kup_button_medium_height: var(--kup-button-medium-height, 40px);
+  --kup_button_large_height: var(--kup-button-large-height, 48px);
+  --kup_button_max_large_height: var(--kup-button-max-large-height, 64px);
+  --kup_button_padding: var(--kup-button-padding, 0 1.25em);
+  --kup_button_gap: var(--kup-button-gap, --kup-space-03);
   --kup_button_text_transform: var(--kup-button-text-transform, capitalize);
-  --kup-spinner-color: var(--kup_button_primary_color);
+  --kup-spinner-color: var(--kup_button_text_color);
 
   .button {
     -moz-osx-font-smoothing: grayscale;
@@ -92,7 +91,7 @@
     border-color: transparent;
     border-radius: var(--kup_button_border_radius);
     box-sizing: border-box;
-    color: var(--kup_button_text_on_primary_color);
+    color: var(--kup_button_text_color);
     cursor: pointer;
     display: inline-flex;
     height: var(--kup_button_height);
@@ -112,27 +111,30 @@
     @include kup-body-compact-01;
 
     &:hover {
-      background-color: var(--kup_button_background_hover_color);
+      background-color: var(--kup_button_background_color_hover);
+      color: var(--kup-primary-color-0);
 
       .f-image__icon {
-        background: var(--kup_button_text_on_primary_color) !important;
+        background: var(--kup_button_text_color) !important;
+        color: var(--kup-primary-color-0);
       }
     }
 
     &:focus {
-      border-color: var(--kup_button_border_focus_color);
+      border-color: var(--kup_button_border_color_focus);
 
       .f-image__icon {
-        background: var(--kup_button_text_on_primary_color) !important;
+        background: var(--kup_button_text_color) !important;
+        color: var(--kup-primary-color-0);
       }
     }
 
     &:active {
-      background-color: var(--kup_button_background_active_color);
-      color: var(--kup_button_text_on_primary_color_active);
+      background-color: var(--kup_button_background_color_active);
+      color: var(--kup_button_text_color);
 
       .f-image__icon {
-        background: var(--kup_button_text_on_primary_color_active) !important;
+        background: var(--kup_button_text_color) !important;
       }
     }
 
@@ -162,13 +164,18 @@
       height: var(--kup_button_max_large_height);
     }
 
+    // RAISED AND FLOATING BUTTON
+
     &.button--floating,
     &.button--raised {
-      --kup-spinner-color: var(--kup_button_text_on_primary_color);
-      --kup_button_text_on_primary_color: var(--kup-primary-color-90);
+      --kup-spinner-color: var(--kup_button_text_color);
+      --kup_button_background_color: var(--kup-primary-color-60);
+      --kup_button_text_color: var(--kup-primary-color-0);
       background-color: var(--kup_button_background_color);
+      color: var(--kup_button_text_color);
 
       &:not(.button--disabled) {
+        // to be
         --kup-spinner-border-color: hsl(
           var(--kup_button_primary_color_h),
           calc(var(--kup_button_primary_color_s) * 0.75),
@@ -177,28 +184,24 @@
       }
 
       &:hover {
-        --kup_button_background_hover_color: var(--kup-primary-color-30);
-        background-color: var(--kup_button_background_hover_color);
+        --kup_button_background_color_hover: var(--kup-primary-color-70);
+        background-color: var(--kup_button_background_color_hover);
       }
 
       &:focus {
-        --kup_button_border_focus_color: var(--kup-primary-color-90);
-        background-color: var(--kup_button_background_color);
-        border-color: var(--kup_button_border_focus_color);
+        --kup_button_border_color_focus: var(--kup-primary-color-90);
+        background-color: var(--kup-primary-color-80);
+        border-color: var(--kup_button_border_color_focus);
       }
 
       &:active {
-        --kup_button_background_active_color: var(--kup-primary-color-60);
-        --kup_button_text_on_primary_color_active: var(
-          --kup-accent-white-color
-        );
-        background-color: var(--kup_button_background_active_color);
-        color: var(--kup_button_text_on_primary_color_active);
+        --kup_button_background_color_active: var(--kup-primary-color-80);
+        background-color: var(--kup_button_background_color_active);
       }
 
       &.button--disabled {
-        --kup_button_text_on_primary_color: var(--kup-primary-color-50);
-        color: var(--kup_button_text_on_primary_color);
+        color: var(--kup_button_text_color_disabled);
+        background-color: var(--kup_button_background_color_disabled);
       }
     }
 
@@ -234,34 +237,50 @@
     }
 
     &.button--outlined {
-      --kup_button_text_on_primary_color: var(--kup-primary-color-60);
+      --kup_button_text_color: var(--kup-primary-color-60);
       background-color: transparent;
-      color: var(--kup_button_text_on_primary_color);
-      border-color: var(--kup_button_text_on_primary_color);
+      color: var(--kup_button_text_color);
+      border-color: var(--kup_button_border_color);
 
       &:hover {
-        --kup_button_background_hover_color: var(--kup-primary-color-30);
-        --kup_button_text_on_primary_color: var(--kup-primary-color-90);
-        background-color: var(--kup_button_background_hover_color);
+        --kup_button_background_color_hover: var(--kup-primary-color-60);
+        --kup_button_text_color_hover: var(--kup-primary-color-0);
+        color: var(--kup_button_text_color_hover);
+        background-color: var(--kup_button_background_color_hover);
         border-color: transparent;
       }
 
+      &:hover .f-image .f-image__icon {
+        --kup_button_background_color_hover: var(--kup-primary-color-0);
+        background-color: var(--kup_button_background_color_hover) !important;
+      }
+
       &:focus {
-        --kup_button_text_on_primary_color: var(--kup-primary-color-90);
-        background-color: var(--kup_button_background_color);
+        --kup_button_background_color_focus: var(--kup-primary-color-70);
+        --kup_button_text_color_focus: var(--kup-primary-color-0);
+        color: var(--kup_button_text_color_focus);
+        background-color: var(--kup_button_background_color_focus);
+      }
+
+      &:focus .f-image .f-image__icon {
+        --kup_button_background_color_focus: var(--kup-primary-color-0);
+        background-color: var(--kup_button_background_color_focus) !important;
       }
 
       &:active {
-        --kup_button_background_active_color: var(--kup-primary-color-60);
-        --kup_button_text_on_primary_color_active: var(
-          --kup-accent-white-color
-        );
-        background-color: var(--kup_button_background_active_color);
-        color: var(--kup_button_text_on_primary_color_active);
+        --kup_button_text_color_active: var(--kup-primary-color-0);
+        --kup_button_background_color_active: var(--kup-primary-color-70);
+        color: var(--kup_button_text_color_active);
+        background-color: var(--kup_button_background_color_active);
+      }
+
+      &:active .f-image .f-image__icon {
+        --kup_button_background_color_active: var(--kup-primary-color-0);
+        background-color: var(--kup_button_background_color_active) !important;
       }
 
       &.button--disabled {
-        border-color: var(--kup_button_disabled_border_color);
+        border-color: var(--kup_button_border_color_disabled);
       }
     }
 
@@ -275,7 +294,7 @@
     }
 
     &.button--disabled {
-      color: var(--kup_button_disabled_color);
+      color: var(--kup_button_text_color_disabled);
       cursor: not-allowed;
       pointer-events: none;
     }
@@ -303,7 +322,7 @@
 
     &:hover,
     &:focus {
-      background-color: rgba(var(--kup_button_primary_color_rgb), 0.125);
+      background-color: rgba(var(--kup_button_text_color_rgb), 0.125);
     }
 
     .icon-button__icon {
@@ -337,64 +356,63 @@
 
   &.#{$kup-class-neutral} {
     .button {
-      --kup_button_background_color: var(--kup-gray-color-10);
-      --kup_button_border_focus_color: var(--kup-gray-color-70);
-      --kup_button_text_on_primary_color: var(--kup-gray-color-70);
+      --kup_button_background_color: var(--kup-gray-color-70);
+      --kup_button_border_color_focus: var(--kup-gray-color-90);
+      --kup_button_text_color: var(--kup-gray-color-90);
 
       &:hover {
-        --kup_button_background_hover_color: var(--kup-gray-color-10);
-        --kup_button_text_on_primary_color: var(--kup-gray-color-100);
+        --kup_button_background_color_hover: var(--kup-gray-color-80);
       }
 
       &:focus {
-        --kup_button_border_focus_color: var(--kup-gray-color-70);
+        --kup_button_border_color_focus: var(--kup-gray-color-40);
       }
 
       &:active {
-        --kup_button_background_active_color: var(--kup-gray-color-20);
-        --kup_button_text_on_primary_color_active: var(--kup-gray-color-100);
+        --kup_button_background_color_active: var(--kup-gray-color-50);
       }
 
       &.button--floating,
       &.button--raised {
-        --kup_button_text_on_primary_color: var(--kup-gray-color-100);
+        --kup_button_text_color: var(--kup-gray-color-0);
 
         &:hover {
-          --kup_button_background_hover_color: var(--kup-gray-color-20);
+          --kup_button_background_color_hover: var(--kup-gray-color-80);
         }
 
         &:active {
-          --kup_button_background_active_color: var(--kup-gray-color-50);
-          --kup_button_text_on_primary_color_active: var(
-            --kup-accent-white-color
-          );
+          --kup_button_background_color_active: var(--kup-gray-color-90);
+        }
+
+        &:focus {
+          --kup_button_background_color_focus: var(--kup-gray-color-90);
         }
 
         &.button--disabled {
-          --kup_button_text_on_primary_color: var(--kup-gray-color-30);
+          --kup_button_text_color: var(--kup_button_text_color_disabled);
         }
       }
 
       &.button--outlined {
+        --kup_button_border_color: var(--kup-gray-color-70);
+        --kup_button_text_color: var(--kup-gray-color-70);
         &:hover {
-          --kup_button_background_hover_color: var(--kup-gray-color-20);
-          --kup_button_text_on_primary_color: var(--kup-gray-color-100);
+          --kup_button_background_color_hover: var(--kup-gray-color-80);
+          --kup_button_text_color_hover: var(--kup-gray-color-0);
         }
 
         &:focus {
-          --kup_button_background_color: var(--kup-gray-color-10);
-          --kup_button_text_on_primary_color: var(--kup-gray-color-100);
+          --kup_button_background_color_focus: var(--kup-gray-color-90);
+          --kup_button_text_color: var(--kup-gray-color-0);
         }
 
         &:active {
-          --kup_button_background_active_color: var(--kup-gray-color-50);
-          --kup_button_text_on_primary_color_active: var(
-            --kup-accent-white-color
-          );
+          --kup_button_background_color_active: var(--kup-gray-color-90);
         }
 
         &.button--disabled {
-          --kup_button_disabled_color: var(--kup-gray-color-30);
+          --kup_button_text_color: var(--kup_button_text_color_disabled);
+          --kup_button_border_color: var(--kup-gray-color-40);
         }
       }
     }
@@ -450,13 +468,72 @@
     }
   }
 
+  // kup-danger --> TO BE DONE
+
   &.#{$kup-class-danger} {
-    --kup-button-primary-color: var(--kup-danger-color);
-    --kup-button-primary-color-h: var(--kup-danger-color-h);
-    --kup-button-primary-color-s: var(--kup-danger-color-s);
-    --kup-button-primary-color-l: var(--kup-danger-color-l);
-    --kup-button-primary-color-rgb: var(--kup-danger-color-rgb);
-    --kup-button-text-on-primary-color: white;
+    .button {
+      // ghost
+      --kup_button_background_color: transparent;
+      --kup_button_border_color_focus: var(--kup-gray-color-90);
+      --kup_button_text_color: var(--kup-danger);
+
+      &:hover {
+        --kup_button_background_color_hover: var(--kup-gray-color-80);
+      }
+
+      &:focus {
+        --kup_button_border_color_focus: var(--kup-gray-color-40);
+      }
+
+      &:active {
+        --kup_button_background_color_active: var(--kup-gray-color-50);
+      }
+
+      &.button--floating,
+      &.button--raised {
+        --kup_button_text_color: var(--kup-gray-color-0);
+
+        &:hover {
+          --kup_button_background_color_hover: var(--kup-gray-color-80);
+        }
+
+        &:active {
+          --kup_button_background_color_active: var(--kup-gray-color-90);
+        }
+
+        &:focus {
+          --kup_button_background_color_focus: var(--kup-gray-color-90);
+          background-color: var(--kup_button_background_color_focus);
+        }
+
+        &.button--disabled {
+          --kup_button_text_color: var(--kup_button_text_color_disabled);
+        }
+      }
+
+      &.button--outlined {
+        --kup_button_border_color: var(--kup-gray-color-70);
+        --kup_button_text_color: var(--kup-gray-color-70);
+        &:hover {
+          --kup_button_background_color_hover: var(--kup-gray-color-80);
+          --kup_button_text_color_hover: var(--kup-gray-color-0);
+        }
+
+        &:focus {
+          --kup_button_background_color_focus: var(--kup-gray-color-90);
+          --kup_button_text_color: var(--kup-gray-color-0);
+        }
+
+        &:active {
+          --kup_button_background_color_active: var(--kup-gray-color-90);
+        }
+
+        &.button--disabled {
+          --kup_button_text_color: var(--kup_button_text_color_disabled);
+          --kup_button_border_color: var(--kup-gray-color-40);
+        }
+      }
+    }
   }
 
   &.#{$kup-class-info} {
diff --git a/packages/ketchup/src/f-components/f-button/f-button.tsx b/packages/ketchup/src/f-components/f-button/f-button.tsx
index 2521e57942..cb7542a505 100644
--- a/packages/ketchup/src/f-components/f-button/f-button.tsx
+++ b/packages/ketchup/src/f-components/f-button/f-button.tsx
@@ -38,7 +38,7 @@ export const FButton: FunctionalComponent<FButtonProps> = (
         'kup-warning': props.warning,
         'kup-neutral': props.neutral,
         [props.wrapperClass]: !!props.wrapperClass,
-    }
+    };
     return (
         <div
             class={classObj}
@@ -68,12 +68,12 @@ function renderButton(props: FButtonProps): VNode {
 
     const propsFImage: FImageProps = {
         color: props.neutral
-            ? `var(--kup-gray-color-100)`
+            ? `var(--kup-gray-color-90)`
             : props.disabled
-            ? `var(--kup_button_disabled_color)`
+            ? `var(--kup_button_text_color_disabled)`
             : isOutlined || isFlat
-            ? `var(--kup_button_primary_color)`
-            : `var(--kup_button_text_on_primary_color)`,
+            ? `var(--kup_button_text_color)` // metter colore per sfondo bianco
+            : `var(--kup_button_text_color)`,
         resource: props.icon,
         sizeX: isFloating ? '1.75em' : '1.475em',
         sizeY: isFloating ? '1.75em' : '1.475em',
@@ -138,10 +138,10 @@ function renderButton(props: FButtonProps): VNode {
 function renderIconButton(props: FButtonProps): VNode {
     const propsFImage: FImageProps = {
         color: props.neutral
-            ? `var(--kup-gray-color-100)`
+            ? `var(--kup-gray-color-90)`
             : props.disabled
-            ? `var(--kup_button_disabled_color)`
-            : `var(--kup_button_primary_color)`,
+            ? `var(--kup_button_text_color_disabled)`
+            : `var(--kup_button_text_color)`,
         sizeX: props.large ? 'calc(1.75em * 1.5)' : '1.75em',
         sizeY: props.large ? 'calc(1.75em * 1.5)' : '1.75em',
     };
diff --git a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss
index 22377f59a4..cfaba3f16d 100644
--- a/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss
+++ b/packages/ketchup/src/f-components/f-checkbox/f-checkbox.scss
@@ -6,19 +6,19 @@
   --kup_checkbox_padding: var(--kup-checkbox-padding, 11px);
   --kup_checkbox_primary_color: var(
     --kup-checkbox-primary-color,
-    var(--kup-gray-color-100)
+    var(--kup-gray-color-90)
   );
   --kup_checkbox_primary_color_rgb: var(
     --kup-checkbox-primary-color-rgb,
-    var(--kup-gray-color-100-rgb)
+    var(--kup-gray-color-90-rgb)
   );
   --kup_checkbox_text_color: var(
     --kup-checkbox-text-color,
-    var(--kup-gray-color-100)
+    var(--kup-gray-color-90)
   );
   --kup_checkbox_text_color_rgb: var(
     --kup-checkbox-text-color-rgb,
-    var(--kup-gray-color-100-rgb)
+    var(--kup-gray-color-90-rgb)
   );
   --kup_checkbox_text_on_primary_color: var(
     --kup-checkbox-text-on-primary-color,
diff --git a/packages/ketchup/src/f-components/f-chip/f-chip.tsx b/packages/ketchup/src/f-components/f-chip/f-chip.tsx
index 10db0ad511..50372140d0 100644
--- a/packages/ketchup/src/f-components/f-chip/f-chip.tsx
+++ b/packages/ketchup/src/f-components/f-chip/f-chip.tsx
@@ -165,7 +165,7 @@ function createChipList(
                     color:
                         isChoice && chip.checked
                             ? `var(--kup_chip_primary_color)`
-                            : `var(${KupThemeColorValues.TEXT})`,
+                            : `var(--kup_chip_text_color)`,
                     resource: chip.icon,
                     sizeX: '16px',
                     sizeY: '16px',
diff --git a/packages/ketchup/src/f-components/f-radio/f-radio-declarations.ts b/packages/ketchup/src/f-components/f-radio/f-radio-declarations.ts
index 072d4b57c4..84a0b4ef00 100644
--- a/packages/ketchup/src/f-components/f-radio/f-radio-declarations.ts
+++ b/packages/ketchup/src/f-components/f-radio/f-radio-declarations.ts
@@ -11,6 +11,7 @@ export interface FRadioProps extends FComponent {
     onBlur?: (event: FocusEvent) => void;
     onChange?: (i: number, event: Event) => void;
     onFocus?: (event: FocusEvent) => void;
+    horizontal?: boolean;
 }
 /**
  * The object of a single radio.
diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.scss b/packages/ketchup/src/f-components/f-radio/f-radio.scss
index a88d40689d..3a3dfb6ae5 100644
--- a/packages/ketchup/src/f-components/f-radio/f-radio.scss
+++ b/packages/ketchup/src/f-components/f-radio/f-radio.scss
@@ -4,17 +4,25 @@
   --kup_radio_font_weight: var(--kup-radio-font-weight, 400);
   --kup_radio_outer_circle_color: var(
     --kup-radio-outer-circle-color,
-    rgba(var(--kup-text-color-rgb), 0.5)
+    var(--kup-gray-color-90)
+  );
+  --kup_radio_focus_color: var(
+    --kup-radio-focus-color,
+    var(--kup-primary-color-60)
   );
   --kup_radio_primary_color: var(
     --kup-radio-primary-color,
-    var(--kup-primary-color)
+    var(--kup-gray-color-90)
   );
   --kup_radio_primary_color_rgb: var(
     --kup-radio-primary-color-rgb,
-    var(--kup-primary-color-rgb)
+    var(--kup-gray-color-90-rgb)
+  );
+  --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-gray-color-90));
+  --kup_radio_text_color_disabled: var(
+    --kup-radio-text-color-disabled,
+    var(--kup-gray-color-30)
   );
-  --kup_radio_text_color: var(--kup-radio-text-color, var(--kup-text-color));
 
   font-family: var(--kup_radio_font_family);
   font-size: var(--kup_radio_font_size);
@@ -23,7 +31,6 @@
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
     font-size: 0.875em;
-    line-height: 2em;
     font-weight: var(--kup_radio_font_weight);
     letter-spacing: 0.0178571429em;
     display: inline-flex;
@@ -32,11 +39,9 @@
 
     label {
       color: var(--kup_radio_text_color);
-      margin-left: 0px;
-      margin-right: auto;
-      padding-left: 4px;
-      padding-right: 0px;
+      padding-left: var(--kup-space-03);
       order: 0;
+      @include kup-body-compact-01;
     }
 
     &.form-field--align-end {
@@ -51,6 +56,8 @@
   }
 
   &.radio-wrapper {
+    display: grid;
+    gap: var(--kup-space-03);
     &.radio-wrapper--grid {
       display: grid;
       grid-gap: 1em;
@@ -59,18 +66,18 @@
 
     .radio {
       border-radius: 50%;
-      padding: 10px;
       position: relative;
       flex: 0 0 auto;
       box-sizing: content-box;
-      width: 20px;
-      height: 20px;
+      width: 15px;
+      height: 15px;
       cursor: pointer;
       will-change: opacity, transform, border-color, color;
       will-change: transform, opacity;
+      border: 1px solid transparent;
 
       &:hover {
-        background-color: rgba(var(--kup_radio_primary_color_rgb), 0.125);
+        border: 1px solid var(--kup_radio_focus_color);
       }
 
       .radio__native-control {
@@ -83,16 +90,16 @@
         top: 0px;
         right: 0px;
         left: 0px;
-        width: 40px;
-        height: 40px;
+        width: 15px;
+        height: 15px;
       }
 
       .radio__background {
         display: inline-block;
         position: relative;
         box-sizing: border-box;
-        width: 20px;
-        height: 20px;
+        width: 15px;
+        height: 15px;
         transition: opacity 120ms cubic-bezier(0, 0, 0.2, 1) 0ms,
           transform 120ms cubic-bezier(0, 0, 0.2, 1) 0ms;
 
@@ -104,7 +111,7 @@
           box-sizing: border-box;
           width: 100%;
           height: 100%;
-          border-width: 2px;
+          border-width: 1px;
           border-style: solid;
           border-radius: 50%;
           transition: border-color 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
@@ -118,7 +125,7 @@
           width: 100%;
           height: 100%;
           transform: scale(0, 0);
-          border-width: 10px;
+          border-width: 7.5px;
           border-style: solid;
           border-radius: 50%;
           transition: transform 120ms cubic-bezier(0.4, 0, 0.6, 1) 0ms,
@@ -140,9 +147,12 @@
       }
 
       &.radio--disabled {
+        --kup_radio_outer_circle_color: var(--kup-gray-color-30);
+        --kup_radio_text_color: var(--kup-gray-color-30);
         pointer-events: none;
 
         + label {
+          color: var(--kup_radio_text_color_disabled);
           pointer-events: none;
         }
 
@@ -157,6 +167,11 @@
     }
   }
 
+  &.#{$kup-class-horizontal} {
+    display: flex;
+    gap: var(--kup-space-05);
+  }
+
   &.#{$kup-class-danger} {
     --kup-radio-primary-color: var(--kup-danger-color);
     --kup-radio-primary-color-rgb: var(--kup-danger-color-rgb);
diff --git a/packages/ketchup/src/f-components/f-radio/f-radio.tsx b/packages/ketchup/src/f-components/f-radio/f-radio.tsx
index 6b7e629ef3..7b82190e5c 100644
--- a/packages/ketchup/src/f-components/f-radio/f-radio.tsx
+++ b/packages/ketchup/src/f-components/f-radio/f-radio.tsx
@@ -21,8 +21,9 @@ export const FRadio: FunctionalComponent<FRadioProps> = (
         };
         radioList.push(
             <div
-                class={`form-field ${
-                    props.leadingLabel ? ' form-field--align-end' : ''
+                class={`form-field 
+                  ${props.leadingLabel ? ' form-field--align-end' : ''} ${
+                    props.disabled ? 'radio--disabled' : ''
                 }`}
             >
                 <div class={classObj}>
@@ -68,14 +69,15 @@ export const FRadio: FunctionalComponent<FRadioProps> = (
 
     return (
         <div
-            class={`f-radio radio-wrapper ${
-                hasColumns ? 'radio-wrapper-grid' : ''
-            } ${props.danger ? 'kup-danger' : ''} ${
-                props.info ? 'kup-info' : ''
-            } ${props.secondary ? 'kup-secondary' : ''} ${
-                props.success ? 'kup-success' : ''
-            } ${props.warning ? 'kup-warning' : ''} ${
-                props.wrapperClass ? props.wrapperClass : ''
+            class={`f-radio radio-wrapper 
+             ${hasColumns ? 'radio-wrapper-grid' : ''} ${
+                props.danger ? 'kup-danger' : ''
+            } ${props.info ? 'kup-info' : ''} ${
+                props.secondary ? 'kup-secondary' : ''
+            } ${props.success ? 'kup-success' : ''} ${
+                props.warning ? 'kup-warning' : ''
+            } ${props.wrapperClass ? props.wrapperClass : ''} ${
+                props.horizontal ? 'kup-horizontal' : ''
             }`}
             style={styleObj}
         >
diff --git a/packages/ketchup/src/f-components/f-switch/f-switch-declarations.ts b/packages/ketchup/src/f-components/f-switch/f-switch-declarations.ts
index 5d37e461d0..8912e72322 100644
--- a/packages/ketchup/src/f-components/f-switch/f-switch-declarations.ts
+++ b/packages/ketchup/src/f-components/f-switch/f-switch-declarations.ts
@@ -11,4 +11,17 @@ export interface FSwitchProps extends FComponent {
     onClick?: (event: MouseEvent) => void;
     onChange?: (event: Event) => void;
     onFocus?: (event: FocusEvent) => void;
+    sizing?: FSwitchSizing;
+}
+
+/**
+ * Types of the f-chip component.
+ * @enum {string}
+ * @property {string} SMALL - Small size: height = 24px
+ * @property {string} MEDIUM - Medium size: height = 32px (default)
+ */
+
+export enum FSwitchSizing { // GenericTypes to be studied because small chips goes with small button/textfield but has different sizes
+    SMALL = 'small',
+    MEDIUM = 'medium',
 }
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 94795a4bf1..79100202d5 100644
--- a/packages/ketchup/src/f-components/f-switch/f-switch.scss
+++ b/packages/ketchup/src/f-components/f-switch/f-switch.scss
@@ -3,6 +3,10 @@
     --kup-switch-font-family,
     var(--kup-font-family)
   );
+  --kup_switch_track_background_color: var(
+    --kup-switch-background,
+    var(--kup-gray-color-50)
+  );
   --kup_switch_font_size: var(--kup-switch-font-size, var(--kup-font-size));
   --kup_switch_font_weight: var(--kup-switch-font-weight, 400);
   --kup_switch_label_color: var(
@@ -17,9 +21,15 @@
     --kup-switch-primary-color-rgb,
     var(--kup-primary-color-rgb)
   );
-  --kup_switch_thumb_color: var(
-    --kup-switch-thumb-color,
-    var(--kup-border-color)
+  --kup_switch_thumb_background_color: var(--kup-switch-thumb-color, #ffffff);
+  --kup_switch_small_height: var(
+    --kup-switch-small-height,
+    var(--kup-space-05)
+  );
+  --kup_switch_small_width: var(--kup-switch-small-width, var(--kup-space-05));
+  --kup_switch_medium_height: var(
+    --kup-switch-medium-height,
+    var(--kup-space-06)
   );
 
   font-family: var(--kup_switch_font_family);
@@ -64,11 +74,12 @@
 
       .switch__track {
         box-sizing: border-box;
-        width: 36px;
-        height: 14px;
+        width: 48px;
+        height: 24px;
         border: 1px solid transparent;
-        border-radius: 7px;
-        opacity: 0.38;
+        outline: 1px solid transparent;
+        border-radius: 24px;
+        opacity: 1;
         transition: opacity 90ms cubic-bezier(0.4, 0, 0.2, 1),
           background-color 90ms cubic-bezier(0.4, 0, 0.2, 1),
           border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -84,9 +95,9 @@
         transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1),
           background-color 90ms cubic-bezier(0.4, 0, 0.2, 1),
           border-color 90ms cubic-bezier(0.4, 0, 0.2, 1);
-        left: -14px;
+        left: -12px;
         right: initial;
-        top: -16px;
+        top: -12px;
         width: 48px;
         height: 48px;
 
@@ -95,12 +106,12 @@
         }
 
         .switch__thumb {
-          box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
-            0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+          // box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%),
+          //   0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
           box-sizing: border-box;
-          width: 20px;
-          height: 20px;
-          border: 10px solid;
+          width: 18px;
+          height: 18px;
+          // border: 10px solid;
           border-radius: 50%;
           z-index: 1;
           transition: transform 90ms cubic-bezier(0.4, 0, 0.2, 1),
@@ -124,11 +135,10 @@
 
       &:not(.switch--checked) {
         .switch__track {
-          background-color: var(--kup_switch_label_color);
+          background-color: var(--kup_switch_track_background_color);
         }
         .switch__thumb {
-          background-color: var(--kup_switch_thumb_color);
-          border-color: var(--kup_switch_thumb_color);
+          background-color: var(--kup_switch_thumb_background_color);
         }
       }
 
@@ -140,22 +150,41 @@
 
       &.switch--checked {
         .switch__track {
-          background-color: var(--kup_switch_primary_color);
-          opacity: 0.54;
+          background-color: var(--kup-success-color);
         }
         .switch__thumb-underlay {
-          transform: translateX(16px);
+          transform: translateX(23px);
         }
 
         .switch__thumb {
-          background-color: var(--kup_switch_primary_color);
-          border-color: var(--kup_switch_primary_color);
+          background-color: var(--kup_switch_thumb_background_color);
+          border-color: var(--kup-success-color);
 
           .switch__native-control {
             transform: translateX(-16px);
           }
         }
       }
+      &.switch--small {
+        .switch__track {
+          width: 36px;
+          height: 18px;
+        }
+        .switch__thumb-underlay {
+          left: -15px;
+          top: -15px;
+          .switch__thumb {
+            height: 13px;
+            width: 13px;
+          }
+        }
+      }
+
+      &.switch--small.switch--checked {
+        .switch__thumb-underlay {
+          transform: translate(17px);
+        }
+      }
     }
   }
 
diff --git a/packages/ketchup/src/f-components/f-switch/f-switch.tsx b/packages/ketchup/src/f-components/f-switch/f-switch.tsx
index 73d44e1967..d6862deb54 100644
--- a/packages/ketchup/src/f-components/f-switch/f-switch.tsx
+++ b/packages/ketchup/src/f-components/f-switch/f-switch.tsx
@@ -1,4 +1,4 @@
-import type { FSwitchProps } from './f-switch-declarations';
+import { FSwitchSizing, type FSwitchProps } from './f-switch-declarations';
 import { FunctionalComponent, h } from '@stencil/core';
 
 /*-------------------------------------------------*/
@@ -8,10 +8,15 @@ import { FunctionalComponent, h } from '@stencil/core';
 export const FSwitch: FunctionalComponent<FSwitchProps> = (
     props: FSwitchProps
 ) => {
+    if (!props.sizing) {
+        props.sizing = FSwitchSizing.MEDIUM;
+    }
+    const isSmall: boolean = props.sizing.toLowerCase() === FSwitchSizing.SMALL;
     const classObj: Record<string, boolean> = {
         switch: true,
         'switch--checked': props.checked,
         'switch--disabled': props.disabled,
+        [`switch--${props.sizing}`]: props.sizing ? true : false,
     };
 
     return (
@@ -32,11 +37,7 @@ export const FSwitch: FunctionalComponent<FSwitchProps> = (
                     props.leadingLabel ? 'form-field--align-end' : ''
                 }`}
             >
-                <div
-                    class={`switch ${props.checked ? 'switch--checked' : ''} ${
-                        props.disabled ? 'switch--disabled' : ''
-                    }`}
-                >
+                <div class={classObj}>
                     <div class="switch__track"></div>
                     <div class="switch__thumb-underlay">
                         <div class="switch__thumb">
diff --git a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss
index cab554e39e..19546c11e0 100644
--- a/packages/ketchup/src/f-components/f-text-field/f-text-field.scss
+++ b/packages/ketchup/src/f-components/f-text-field/f-text-field.scss
@@ -14,10 +14,7 @@
       --kup-textfield-border-color,
       var(--kup-gray-color-50)
     );
-    --kup_textfield_color: var(
-      --kup-textfield-color,
-      var(--kup-gray-color-100)
-    );
+    --kup_textfield_color: var(--kup-textfield-color, var(--kup-gray-color-90));
     --kup_textfield_label_color: var(
       --kup-textfield-label-color,
       var(--kup-gray-color-70)
@@ -43,7 +40,7 @@
     );
     --kup_textfield_icon_color: var(
       --kup-textfield-icon-color,
-      var(--kup-icon-color)
+      var(--kup_textfield_color)
     );
     --kup_textfield_primary_color: var(
       --kup-textfield-primary-color,
@@ -147,10 +144,12 @@
     .mdc-text-field {
       width: var(--kup_textfield_width);
       border-radius: unset !important;
-      border: 1px solid transparent;
+      outline: 2px solid transparent;
+      outline-offset: -2px;
       border-bottom: 1px solid var(--kup_textfield_border_color);
       background: rgb(var(--kup_textfield_background_color_rgb));
       align-items: center;
+      padding: 0px var(--kup-space-05);
 
       input {
         @include kup-body-compact-01;
@@ -162,7 +161,7 @@
         cursor: pointer;
         height: 16px;
         width: 16px;
-        padding: 0 7px;
+        padding: 0 8px;
         outline: none;
         pointer-events: all;
 
@@ -180,7 +179,7 @@
 
       &.mdc-text-field--read-only {
         --kup_textfield_border_color: var(--kup-gray-color-30);
-        --kup_textfield_background_color_rgb: var(--kup-accent-white-color-rgb);
+        --kup_textfield_background_color_rgb: var(--kup-gray-color-0);
         pointer-events: none;
         .#{$kup-icon},
         button {
@@ -205,7 +204,8 @@
       }
 
       &.mdc-text-field--focused:not(.mdc-text-field--disabled) {
-        border: 1px solid var(--kup_textfield_primary_color);
+        // border: 1px solid var(--kup_textfield_primary_color);
+        outline: 2px solid var(--kup_textfield_primary_color);
       }
 
       &.mdc-text-field--filled:not(.mdc-text-field--disabled)
@@ -385,7 +385,8 @@
       }
 
       &.mdc-text-field--error {
-        border: 1px solid var(--kup-danger-color);
+        // border: 1px solid var(--kup-danger-color);
+        outline: 2px solid var(--kup-danger-color);
       }
 
       &.mdc-text-field--textarea {
diff --git a/packages/ketchup/src/form.html b/packages/ketchup/src/form.html
index 8e6fa299bb..c6b321c084 100644
--- a/packages/ketchup/src/form.html
+++ b/packages/ketchup/src/form.html
@@ -20,8 +20,14 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h1>Form</h1>
-        <kup-form id="form"></kup-form>
+        <kup-form id="form" class="form__section--top"></kup-form>
+        <kup-button label="Shaped & outlined"></kup-button>
         <h1>Form with layout</h1>
         <kup-form id="form-with-layout"></kup-form>
         <h1>Form with autocomplete</h1>
@@ -31,5 +37,11 @@ <h1>Form with autocomplete</h1>
         ></kup-form>
 
         <script type="text/javascript" src="/assets/form.js"></script>
+        <script>
+            document.addEventListener('kup-manager-ready', () => {
+                const kupManager = document.documentElement.ketchup;
+                kupManager.theme.set('octangeGrey');
+            });
+        </script>
     </body>
 </html>
diff --git a/packages/ketchup/src/managers/kup-theme/themes.json b/packages/ketchup/src/managers/kup-theme/themes.json
index 9a94cb124c..8da83ebc96 100644
--- a/packages/ketchup/src/managers/kup-theme/themes.json
+++ b/packages/ketchup/src/managers/kup-theme/themes.json
@@ -2,7 +2,7 @@
     "octane": {
         "cssVariables": {
             "--kup-primary-color": "#068a9c",
-            "--kup-primary-color-5": "#C6FEFF",
+            "--kup-primary-color-0": "#ffffff",
             "--kup-primary-color-10": "#A5E6F0",
             "--kup-primary-color-20": "#83CBD8",
             "--kup-primary-color-30": "#5CB0C0",
@@ -13,24 +13,215 @@
             "--kup-primary-color-80": "#005160",
             "--kup-primary-color-90": "#02292f",
             "--kup-secondary-color": "#003C49",
-            "--kup-white": "#fff",
-            "--kup-gray-color-10": "#e8e8e8",
-            "--kup-gray-color-20": "#d1d1d1",
-            "--kup-gray-color-30": "#b5b5b5",
-            "--kup-gray-color-40": "#999999",
-            "--kup-gray-color-50": "#7a7a7a",
-            "--kup-gray-color-60": "#5e5e5e",
-            "--kup-gray-color-70": "#636363",
-            "--kup-gray-color-80": "#474747",
-            "--kup-gray-color-90": "#333333",
-            "--kup-gray-color-100": "#292929",
-            "--kup-black": "#000",
+            "--kup-gray-color-0": "#ffffff",
+            "--kup-gray-color-10": "#F4F4F4",
+            "--kup-gray-color-20": "#E0E0E0",
+            "--kup-gray-color-30": "#C6C6C6",
+            "--kup-gray-color-40": "#A8A8A8",
+            "--kup-gray-color-50": "#8d8d8d",
+            "--kup-gray-color-60": "#6f6f6f",
+            "--kup-gray-color-70": "#525252",
+            "--kup-gray-color-80": "#393939",
+            "--kup-gray-color-90": "#262626",
+            "--kup-gray-color-100": "#161616",
+            "--kup-danger-color-10": "da inserire il codice per il kup danger colors",
+            "--kup-background-color": "#ffffff",
+            "--kup-navbar-background-color": "#161616",
+            "--kup-navbar-color": "#ffffff",
+            "--kup-drawer-background-color": "#f4f4f4",
+            "--kup-drawer-color": "#535353",
+            "--kup-navbar-height": "64px",
+            "--kup-drawer-width": "300px",
+            "--kup-font-family": "IBM Plex Sans, sans-serif",
+            "--kup-font-family-monospace": "IBM Plex Mono, monospace",
+            "--kup-font-size": "14px",
+            "--kup-text-color": "#292929",
+            "--kup-text-on-primary-color": "#e8e8e8",
+            "--kup-text-on-secondary-color": "#312c2c",
+            "--kup-disabled-background-color": "#d1d1d1",
+            "--kup-disabled-color": "#636363",
+            "--kup-hover-background-color": "#e8e8e8",
+            "--kup-hover-color": "#303030",
+            "--kup-title-background-color": "#068a9c",
+            "--kup-title-color": "#fff",
+            "--kup-icon-color": "#636363",
+            "--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-warning-color": "#de8906",
+            "--kup-danger-color": "#a6192e",
+            "--kup-spinner-color": "#fddc69",
+            "--kup-chart-color-1": "#60c3fc",
+            "--kup-chart-color-2": "#e268d8",
+            "--kup-chart-color-3": "#860bb5",
+            "--kup-chart-color-4": "#1a83e4",
+            "--kup-obj-cursor": "inherit",
+            "--kup-card-zindex": "900",
+            "--kup-drawer-zindex": "900",
+            "--kup-navbar-zindex": "900",
+            "--kup-space-00": "0px",
+            "--kup-space-01": "2px",
+            "--kup-space-02": "4px",
+            "--kup-space-03": "8px",
+            "--kup-space-04": "12px",
+            "--kup-space-05": "16px",
+            "--kup-space-06": "24px",
+            "--kup-space-07": "32px",
+            "--kup-space-08": "40px",
+            "--kup-space-09": "48px",
+            "--kup-space-10": "64px",
+            "--kup-space-11": "80px",
+            "--kup-space-12": "96px",
+            "--kup-space-13": "160px",
+            "--kup-radius-00": "0px",
+            "--kup-radius-100": "100px"
+        },
+        "icons": {
+            "--kup-ascending-icon": "arrow_drop_up",
+            "--kup-descending-icon": "arrow_drop_down",
+            "--kup-expanded-icon": "arrow_drop_down",
+            "--kup-collapsed-icon": "menu-right",
+            "--kup-dropdown-icon": "arrow_drop_down",
+            "--kup-clear-icon": "cancel",
+            "--kup-filter-remove-icon": "filter-remove",
+            "--kup-key-icon": "key-variant",
+            "--kup-search-icon": "search"
+        },
+        "imports": [
+            "url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')"
+        ],
+        "customStyles": {}
+    },
+    "octaneGrey": {
+        "cssVariables": {
+            "--kup-primary-color": "#068a9c",
+            "--kup-primary-color-0": "#ffffff",
+            "--kup-primary-color-10": "#A5E6F0",
+            "--kup-primary-color-20": "#83CBD8",
+            "--kup-primary-color-30": "#5CB0C0",
+            "--kup-primary-color-40": "#3E9EAF",
+            "--kup-primary-color-50": "#068A9C",
+            "--kup-primary-color-60": "#007A8B",
+            "--kup-primary-color-70": "#006574",
+            "--kup-primary-color-80": "#005160",
+            "--kup-primary-color-90": "#02292f",
+            "--kup-secondary-color": "#003C49",
+            "--kup-gray-color-0": "#F4F4F4",
+            "--kup-gray-color-10": "#ffffff",
+            "--kup-gray-color-20": "#E0E0E0",
+            "--kup-gray-color-30": "#C6C6C6",
+            "--kup-gray-color-40": "#A8A8A8",
+            "--kup-gray-color-50": "#8d8d8d",
+            "--kup-gray-color-60": "#6f6f6f",
+            "--kup-gray-color-70": "#525252",
+            "--kup-gray-color-80": "#393939",
+            "--kup-gray-color-90": "#262626",
+            "--kup-gray-color-100": "#161616",
             "--kup-accent-red-color": "#A6192E",
             "--kup-accent-orange-color": "#DE8906",
             "--kup-accent-yellow-color": "#FDDC69",
             "--kup-accent-green-color": "#A4BA4C",
             "--kup-accent-white-color": "#FFFFFF",
-            "--kup-background-color": "#ffffff",
+            "--kup-background-color": "#F4F4F4",
+            "--kup-navbar-background-color": "#161616",
+            "--kup-navbar-color": "#ffffff",
+            "--kup-drawer-background-color": "#ffffff",
+            "--kup-drawer-color": "#535353",
+            "--kup-navbar-height": "64px",
+            "--kup-drawer-width": "300px",
+            "--kup-font-family": "IBM Plex Sans, sans-serif",
+            "--kup-font-family-monospace": "IBM Plex Mono, monospace",
+            "--kup-font-size": "14px",
+            "--kup-text-color": "#292929",
+            "--kup-text-on-primary-color": "#e8e8e8",
+            "--kup-text-on-secondary-color": "#312c2c",
+            "--kup-disabled-background-color": "#d1d1d1",
+            "--kup-disabled-color": "#636363",
+            "--kup-hover-background-color": "#e8e8e8",
+            "--kup-hover-color": "#303030",
+            "--kup-title-background-color": "#068a9c",
+            "--kup-title-color": "#fff",
+            "--kup-icon-color": "#636363",
+            "--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-warning-color": "#de8906",
+            "--kup-danger-color": "#a6192e",
+            "--kup-spinner-color": "#fddc69",
+            "--kup-chart-color-1": "#60c3fc",
+            "--kup-chart-color-2": "#e268d8",
+            "--kup-chart-color-3": "#860bb5",
+            "--kup-chart-color-4": "#1a83e4",
+            "--kup-obj-cursor": "inherit",
+            "--kup-card-zindex": "900",
+            "--kup-drawer-zindex": "900",
+            "--kup-navbar-zindex": "900",
+            "--kup-space-00": "0px",
+            "--kup-space-01": "2px",
+            "--kup-space-02": "4px",
+            "--kup-space-03": "8px",
+            "--kup-space-04": "12px",
+            "--kup-space-05": "16px",
+            "--kup-space-06": "24px",
+            "--kup-space-07": "32px",
+            "--kup-space-08": "40px",
+            "--kup-space-09": "48px",
+            "--kup-space-10": "64px",
+            "--kup-space-11": "80px",
+            "--kup-space-12": "96px",
+            "--kup-space-13": "160px",
+            "--kup-radius-00": "0px",
+            "--kup-radius-100": "100px"
+        },
+        "icons": {
+            "--kup-ascending-icon": "arrow_drop_up",
+            "--kup-descending-icon": "arrow_drop_down",
+            "--kup-expanded-icon": "arrow_drop_down",
+            "--kup-collapsed-icon": "menu-right",
+            "--kup-dropdown-icon": "arrow_drop_down",
+            "--kup-clear-icon": "cancel",
+            "--kup-filter-remove-icon": "filter-remove",
+            "--kup-key-icon": "key-variant",
+            "--kup-search-icon": "search"
+        },
+        "imports": [
+            "url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')"
+        ],
+        "customStyles": {}
+    },
+    "darkOctane": {
+        "cssVariables": {
+            "--kup-primary-color": "#068a9c",
+            "--kup-primary-color-0": "#ffffff",
+            "--kup-primary-color-10": "#A5E6F0",
+            "--kup-primary-color-20": "#83CBD8",
+            "--kup-primary-color-30": "#5CB0C0",
+            "--kup-primary-color-40": "#3E9EAF",
+            "--kup-primary-color-50": "#068A9C",
+            "--kup-primary-color-60": "#007A8B",
+            "--kup-primary-color-70": "#006574",
+            "--kup-primary-color-80": "#005160",
+            "--kup-primary-color-90": "#02292f",
+            "--kup-secondary-color": "#003C49",
+            "--kup-gray-color-0": "#161616",
+            "--kup-gray-color-10": "#262626",
+            "--kup-gray-color-20": "#393939",
+            "--kup-gray-color-30": "#525252",
+            "--kup-gray-color-40": "#6f6f6f",
+            "--kup-gray-color-50": "#8d8d8d",
+            "--kup-gray-color-60": "#A8A8A8",
+            "--kup-gray-color-70": "#C6C6C6",
+            "--kup-gray-color-80": "#E0E0E0",
+            "--kup-gray-color-90": "#f4f4f4",
+            "--kup-gray-color-100": "#ffffff",
+            "--kup-accent-red-color": "#A6192E",
+            "--kup-accent-orange-color": "#DE8906",
+            "--kup-accent-yellow-color": "#FDDC69",
+            "--kup-accent-green-color": "#A4BA4C",
+            "--kup-accent-white-color": "#FFFFFF",
+            "--kup-background-color": "#161616",
             "--kup-navbar-background-color": "#068a9c",
             "--kup-navbar-color": "#ffffff",
             "--kup-drawer-background-color": "#ffffff",
@@ -40,7 +231,7 @@
             "--kup-font-family": "IBM Plex Sans, sans-serif",
             "--kup-font-family-monospace": "IBM Plex Mono, monospace",
             "--kup-font-size": "14px",
-            "--kup-text-color": "#474747",
+            "--kup-text-color": "#e8e8e8",
             "--kup-text-on-primary-color": "#e8e8e8",
             "--kup-text-on-secondary-color": "#312c2c",
             "--kup-disabled-background-color": "#d1d1d1",
@@ -53,7 +244,7 @@
             "--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": "#a4ba4c",
+            "--kup-success-color": "#42BE65",
             "--kup-warning-color": "#de8906",
             "--kup-danger-color": "#a6192e",
             "--kup-spinner-color": "#fddc69",
@@ -93,7 +284,107 @@
             "--kup-key-icon": "key-variant",
             "--kup-search-icon": "search"
         },
-        "imports": [],
+        "imports": [
+            "url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')"
+        ],
+        "customStyles": {}
+    },
+    "darkOctaneGray": {
+        "cssVariables": {
+            "--kup-primary-color": "#068a9c",
+            "--kup-primary-color-0": "#ffffff",
+            "--kup-primary-color-10": "#A5E6F0",
+            "--kup-primary-color-20": "#83CBD8",
+            "--kup-primary-color-30": "#5CB0C0",
+            "--kup-primary-color-40": "#3E9EAF",
+            "--kup-primary-color-50": "#068A9C",
+            "--kup-primary-color-60": "#007A8B",
+            "--kup-primary-color-70": "#006574",
+            "--kup-primary-color-80": "#005160",
+            "--kup-primary-color-90": "#02292f",
+            "--kup-secondary-color": "#003C49",
+            "--kup-gray-color-0": "#262626",
+            "--kup-gray-color-10": "#393939",
+            "--kup-gray-color-20": "#525252",
+            "--kup-gray-color-30": "#6f6f6f",
+            "--kup-gray-color-40": "#8d8d8d",
+            "--kup-gray-color-50": "#A8A8A8",
+            "--kup-gray-color-60": "#C6C6C6",
+            "--kup-gray-color-70": "#E0E0E0",
+            "--kup-gray-color-80": "#f4f4f4",
+            "--kup-gray-color-90": "#ffffff",
+            "--kup-gray-color-100": "#ffffff",
+            "--kup-accent-red-color": "#da1e28",
+            "--kup-accent-orange-color": "#DE8906",
+            "--kup-accent-yellow-color": "#FDDC69",
+            "--kup-accent-green-color": "#A4BA4C",
+            "--kup-accent-white-color": "#FFFFFF",
+            "--kup-background-color": "#262626",
+            "--kup-navbar-background-color": "#161616",
+            "--kup-navbar-color": "#ffffff",
+            "--kup-drawer-background-color": "#161616",
+            "--kup-drawer-color": "#535353",
+            "--kup-navbar-height": "64px",
+            "--kup-drawer-width": "300px",
+            "--kup-font-family": "IBM Plex Sans, sans-serif",
+            "--kup-font-family-monospace": "IBM Plex Mono, monospace",
+            "--kup-font-size": "14px",
+            "--kup-text-color": "#e8e8e8",
+            "--kup-text-on-primary-color": "#e8e8e8",
+            "--kup-text-on-secondary-color": "#312c2c",
+            "--kup-disabled-background-color": "#d1d1d1",
+            "--kup-disabled-color": "#636363",
+            "--kup-hover-background-color": "#e8e8e8",
+            "--kup-hover-color": "#303030",
+            "--kup-title-background-color": "#068a9c",
+            "--kup-title-color": "#fff",
+            "--kup-icon-color": "#636363",
+            "--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-warning-color": "#de8906",
+            "--kup-danger-color": "#da1e28",
+            "--kup-spinner-color": "#fddc69",
+            "--kup-chart-color-1": "#60c3fc",
+            "--kup-chart-color-2": "#e268d8",
+            "--kup-chart-color-3": "#860bb5",
+            "--kup-chart-color-4": "#1a83e4",
+            "--kup-obj-cursor": "inherit",
+            "--kup-card-zindex": "900",
+            "--kup-drawer-zindex": "900",
+            "--kup-navbar-zindex": "900",
+            "--kup-space-00": "0px",
+            "--kup-space-01": "2px",
+            "--kup-space-02": "4px",
+            "--kup-space-03": "8px",
+            "--kup-space-04": "12px",
+            "--kup-space-05": "16px",
+            "--kup-space-06": "24px",
+            "--kup-space-07": "32px",
+            "--kup-space-08": "40px",
+            "--kup-space-09": "48px",
+            "--kup-space-10": "64px",
+            "--kup-space-11": "80px",
+            "--kup-space-12": "96px",
+            "--kup-space-13": "160px",
+            "--kup-radius-00": "0px",
+            "--kup-radius-100": "100px"
+        },
+        "icons": {
+            "--kup-ascending-icon": "arrow_drop_up",
+            "--kup-descending-icon": "arrow_drop_down",
+            "--kup-expanded-icon": "arrow_drop_down",
+            "--kup-collapsed-icon": "menu-right",
+            "--kup-dropdown-icon": "arrow_drop_down",
+            "--kup-clear-icon": "cancel",
+            "--kup-filter-remove-icon": "filter-remove",
+            "--kup-key-icon": "key-variant",
+            "--kup-search-icon": "search"
+        },
+        "imports": [
+            "url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700')"
+        ],
         "customStyles": {}
     },
     "bubbles": {
diff --git a/packages/ketchup/src/radio.html b/packages/ketchup/src/radio.html
index 8c381c40d6..ab1809a903 100644
--- a/packages/ketchup/src/radio.html
+++ b/packages/ketchup/src/radio.html
@@ -19,8 +19,13 @@
             }
         </style>
     </head>
-    <body
-        ><kup-radio></kup-radio>
+    <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };</script
+        ><kup-radio label="Label kup"></kup-radio>
+        <kup-radio label="Label kup"></kup-radio>
         <script src="/assets/radio.js"></script>
     </body>
 </html>
diff --git a/packages/ketchup/src/style/fonts.scss b/packages/ketchup/src/style/fonts.scss
index 13d28cceb8..197fb1d691 100644
--- a/packages/ketchup/src/style/fonts.scss
+++ b/packages/ketchup/src/style/fonts.scss
@@ -1,4 +1,5 @@
 // New mixins for font sizes.
+
 @mixin kup-body-compact-01 {
   font-family: var(--kup-font-family);
   font-size: 14px;
diff --git a/packages/ketchup/src/switch.html b/packages/ketchup/src/switch.html
index 7e8c106dd0..f4b220e6ac 100644
--- a/packages/ketchup/src/switch.html
+++ b/packages/ketchup/src/switch.html
@@ -36,6 +36,11 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h4>Material Switch (widget)</h4> <kup-switch></kup-switch>
     </body>
 </html>
diff --git a/packages/ketchup/src/tab-bar.html b/packages/ketchup/src/tab-bar.html
index 309ee2e8e5..073a6555cf 100644
--- a/packages/ketchup/src/tab-bar.html
+++ b/packages/ketchup/src/tab-bar.html
@@ -36,8 +36,15 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h4>Events testing</h4>
         <kup-tab-bar id="event-tabbar"></kup-tab-bar>
+        <kup-tab-bar></kup-tab-bar>
+        <kup-tab-bar></kup-tab-bar>
 
         <script>
             let tabBar = document.getElementsByTagName('kup-tab-bar')[0];
@@ -63,7 +70,53 @@ <h4>Events testing</h4>
                 {
                     id: '4',
                     value: 'Iconless',
-                    icon: '',
+                    icon: 'alarm',
+                    active: false,
+                },
+            ];
+            let tabBar2 = document.getElementsByTagName('kup-tab-bar')[1];
+            tabBar2.data = [
+                {
+                    id: '1',
+                    icon: 'favorite',
+                    active: true,
+                },
+                {
+                    id: '2',
+                    icon: 'alarm_on',
+                    active: false,
+                },
+                {
+                    id: '3',
+                    icon: 'build',
+                    active: false,
+                },
+                {
+                    id: '4',
+                    icon: 'alarm',
+                    active: false,
+                },
+            ];
+            let tabBar3 = document.getElementsByTagName('kup-tab-bar')[2];
+            tabBar3.data = [
+                {
+                    id: '1',
+                    value: 'Favorites',
+                    active: true,
+                },
+                {
+                    id: '2',
+                    value: 'Alarm clock',
+                    active: false,
+                },
+                {
+                    id: '3',
+                    value: 'Superlongtext',
+                    active: false,
+                },
+                {
+                    id: '4',
+                    value: 'Settings',
                     active: false,
                 },
             ];
diff --git a/packages/ketchup/src/text-field.html b/packages/ketchup/src/text-field.html
index cfa9898338..3adcc38000 100644
--- a/packages/ketchup/src/text-field.html
+++ b/packages/ketchup/src/text-field.html
@@ -36,6 +36,11 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h1>Simple text field</h1>
         <kup-text-field
             id="int1"
diff --git a/packages/ketchup/src/time-picker.html b/packages/ketchup/src/time-picker.html
index 183c871aef..9c5c51ff09 100644
--- a/packages/ketchup/src/time-picker.html
+++ b/packages/ketchup/src/time-picker.html
@@ -36,6 +36,11 @@
         </style>
     </head>
     <body>
+        <script>
+            document.documentElement['ketchupInit'] = {
+                debug: { active: true },
+            };
+        </script>
         <h4>clock-variant=false</h4>
         <kup-time-picker
             initial-value="02:00"