diff --git a/src/main/style/atom/atom.pug b/src/main/style/atom/atom.pug
index c9b62f1d299..3c05d1d1bbe 100644
--- a/src/main/style/atom/atom.pug
+++ b/src/main/style/atom/atom.pug
@@ -13,7 +13,7 @@ block content
     .tikui-vertical-spacing--line
       include /documentation/atomic-design/quote/atom
     .tikui-vertical-spacing--line
-      include:componentDoc(height=100) button/button.md
+      include button/button
     .tikui-vertical-spacing--line
       include:componentDoc(height=610) chip/chip.md
     .tikui-vertical-spacing--line
diff --git a/src/main/style/atom/button/_button.scss b/src/main/style/atom/button/_button.scss
index 5fe4a8f4cc1..64b215b7ed8 100644
--- a/src/main/style/atom/button/_button.scss
+++ b/src/main/style/atom/button/_button.scss
@@ -1,55 +1,2 @@
-@use 'sass:math';
-
-$jhlite-button-color-background: $jhlite-color-brand-600;
-$jhlite-button-color-text: $jhlite-global-color-text-light;
-$jhlite-button-hover-color-background: $jhlite-color-brand-700;
-$jhlite-button-focus-color-outline: rgba($jhlite-button-color-background, 50%);
-$jhlite-button-disabled-color-background: rgba($jhlite-button-color-background, 50%);
-$jhlite-button-disabled-color-text: rgba($jhlite-button-color-text, 50%);
-$jhlite-button-padding: math.div(9, 16) * 1rem math.div(17, 16) * 1rem;
-$jhlite-small-button-padding: 0.1rem 0.5rem;
-$jhlite-button-radius: math.div(6, 16) * 1rem;
-$jhlite-button-line-height: 1.5rem !default;
-$jhlite-button-font-size: 1rem !default;
-$jhlite-button-font-weight: $jhlite-font-weight-semi-bold;
-
-.jhlite-button {
-  box-sizing: border-box;
-  border: 0;
-  border-radius: $jhlite-button-radius;
-  background-color: $jhlite-button-color-background;
-  cursor: pointer;
-  padding: $jhlite-button-padding;
-  text-align: center;
-  text-transform: uppercase;
-  line-height: $jhlite-button-line-height;
-  color: $jhlite-button-color-text;
-  font-family: $jhlite-global-font-primary-family;
-  font-size: $jhlite-button-font-size;
-  font-weight: $jhlite-button-font-weight;
-
-  &:hover {
-    background-color: $jhlite-button-hover-color-background;
-  }
-
-  &:disabled {
-    background-color: $jhlite-button-disabled-color-background;
-    cursor: not-allowed;
-    color: $jhlite-button-disabled-color-text;
-  }
-
-  &.-block {
-    display: block;
-    width: 100%;
-  }
-
-  &.-small {
-    padding: $jhlite-small-button-padding;
-  }
-
-  &.-rounded-top {
-    border-radius: 0;
-    border-top-left-radius: $jhlite-button-radius;
-    border-top-right-radius: $jhlite-button-radius;
-  }
-}
+@import 'button-main/button-main';
+@import 'button-switch/button-switch';
diff --git a/src/main/style/atom/button/button-main/_button-main.scss b/src/main/style/atom/button/button-main/_button-main.scss
new file mode 100644
index 00000000000..2ae2b9604c3
--- /dev/null
+++ b/src/main/style/atom/button/button-main/_button-main.scss
@@ -0,0 +1,63 @@
+@use 'sass:math';
+@use '../../../token/color/brand' as brand;
+@use '../../../token/colors' as colors;
+@use '../../../token/fonts' as fonts;
+
+$jhlite-button-color-background: brand.$jhlite-color-brand-600;
+$jhlite-button-color-text: colors.$jhlite-global-color-text-light;
+$jhlite-button-hover-color-background: brand.$jhlite-color-brand-700;
+$jhlite-button-focus-color-outline: rgba($jhlite-button-color-background, 50%);
+$jhlite-button-disabled-color-background: rgba($jhlite-button-color-background, 50%);
+$jhlite-button-disabled-color-text: rgba($jhlite-button-color-text, 50%);
+$jhlite-button-padding: math.div(9, 16) * 1rem math.div(17, 16) * 1rem;
+$jhlite-small-button-padding: 0.1rem 0.5rem;
+$jhlite-button-radius: math.div(6, 16) * 1rem;
+$jhlite-button-line-height: 1.5rem !default;
+$jhlite-button-font-family: fonts.$jhlite-global-font-primary-family;
+$jhlite-button-font-size: 1rem !default;
+$jhlite-button-font-weight: fonts.$jhlite-font-weight-semi-bold;
+
+%jhlite-button-main {
+  box-sizing: border-box;
+  border: 0;
+  border-radius: $jhlite-button-radius;
+  background-color: $jhlite-button-color-background;
+  cursor: pointer;
+  padding: $jhlite-button-padding;
+  text-align: center;
+  text-transform: uppercase;
+  line-height: $jhlite-button-line-height;
+  color: $jhlite-button-color-text;
+  font-family: $jhlite-button-font-family;
+  font-size: $jhlite-button-font-size;
+  font-weight: $jhlite-button-font-weight;
+
+  &:hover {
+    background-color: $jhlite-button-hover-color-background;
+  }
+
+  &:disabled {
+    background-color: $jhlite-button-disabled-color-background;
+    cursor: not-allowed;
+    color: $jhlite-button-disabled-color-text;
+  }
+
+  &.-block {
+    display: block;
+    width: 100%;
+  }
+
+  &.-small {
+    padding: $jhlite-small-button-padding;
+  }
+
+  &.-rounded-top {
+    border-radius: 0;
+    border-top-left-radius: $jhlite-button-radius;
+    border-top-right-radius: $jhlite-button-radius;
+  }
+}
+
+.jhlite-button-main {
+  @extend %jhlite-button-main;
+}
diff --git a/src/main/style/atom/button/button-main/button-main.code.pug b/src/main/style/atom/button/button-main/button-main.code.pug
new file mode 100644
index 00000000000..12cbd210295
--- /dev/null
+++ b/src/main/style/atom/button/button-main/button-main.code.pug
@@ -0,0 +1,6 @@
+include button-main.mixin.pug
+
++jhlite-button-main Button
++jhlite-button-main({disabled: true}) Button
++jhlite-button-main({small: true}) Button
++jhlite-button-main({block: true}) Button
diff --git a/src/main/style/atom/button/button-main/button-main.md b/src/main/style/atom/button/button-main/button-main.md
new file mode 100644
index 00000000000..b1931d261c3
--- /dev/null
+++ b/src/main/style/atom/button/button-main/button-main.md
@@ -0,0 +1 @@
+### Button Main
diff --git a/src/main/style/atom/button/button-main/button-main.mixin.pug b/src/main/style/atom/button/button-main/button-main.mixin.pug
new file mode 100644
index 00000000000..c4b6a51faca
--- /dev/null
+++ b/src/main/style/atom/button/button-main/button-main.mixin.pug
@@ -0,0 +1,6 @@
+mixin jhlite-button-main(opts)
+  - const { block: isBlock, small: isSmall, disabled } = opts || {};
+  - const blockClass = isBlock ? '-block' : null;
+  - const smallClass = isSmall ? '-small' : null;
+  button.jhlite-button-main(class=blockClass || smallClass, disabled=disabled)
+    block
diff --git a/src/main/style/atom/button/button-main/button-main.render.pug b/src/main/style/atom/button/button-main/button-main.render.pug
new file mode 100644
index 00000000000..8493c6a8e4e
--- /dev/null
+++ b/src/main/style/atom/button/button-main/button-main.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include button-main.code.pug
diff --git a/src/main/style/atom/button/button-switch/_button-switch.scss b/src/main/style/atom/button/button-switch/_button-switch.scss
new file mode 100644
index 00000000000..946a2ae06a6
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/_button-switch.scss
@@ -0,0 +1,29 @@
+@use 'sass:math';
+@use '../../../token/colors' as colors;
+@use '../button-main/button-main' as button-main;
+@use '../../../token/size' as size;
+
+$jhlite-button-switch-padding: math.div(5, 16) * 1rem math.div(15, 16) * 1rem;
+$jhlite-button-switch-color-text-light: colors.$jhlite-global-color-text-light;
+$jhlite-button-switch-radius: size.$jhlite-global-size-switch-radius;
+$jhlite-button-switch-font-size: math.div(13, 16) * 1rem;
+
+.jhlite-button-switch {
+  @extend %jhlite-button-main;
+
+  border-radius: $jhlite-button-switch-radius;
+  background-color: transparent;
+  padding: $jhlite-button-switch-padding;
+  text-transform: none;
+  color: var(--jhlite-global-color-text);
+  font-size: $jhlite-button-switch-font-size;
+
+  &:hover {
+    background-color: transparent;
+  }
+
+  &.-selected {
+    background-color: button-main.$jhlite-button-hover-color-background;
+    color: $jhlite-button-switch-color-text-light;
+  }
+}
diff --git a/src/main/style/atom/button/button-switch/button-switch.code.pug b/src/main/style/atom/button/button-switch/button-switch.code.pug
new file mode 100644
index 00000000000..4297411228f
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/button-switch.code.pug
@@ -0,0 +1,4 @@
+include button-switch.mixin.pug
+
++jhlite-button-switch button-switch
++jhlite-button-switch({selected: true}) button-switch-selected
diff --git a/src/main/style/atom/button/button-switch/button-switch.md b/src/main/style/atom/button/button-switch/button-switch.md
new file mode 100644
index 00000000000..45a543b4b85
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/button-switch.md
@@ -0,0 +1 @@
+### Button switch
diff --git a/src/main/style/atom/button/button-switch/button-switch.mixin.pug b/src/main/style/atom/button/button-switch/button-switch.mixin.pug
new file mode 100644
index 00000000000..400531e6478
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/button-switch.mixin.pug
@@ -0,0 +1,5 @@
+mixin jhlite-button-switch(opts)
+  - const { selected: isSelected } = opts || {};
+  - const selectedClass = isSelected ? '-selected' : null;
+  button.jhlite-button-switch(class=selectedClass)
+    block
diff --git a/src/main/style/atom/button/button-switch/button-switch.render.pug b/src/main/style/atom/button/button-switch/button-switch.render.pug
new file mode 100644
index 00000000000..d21eebd7cc0
--- /dev/null
+++ b/src/main/style/atom/button/button-switch/button-switch.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include button-switch.code.pug
diff --git a/src/main/style/atom/button/button.code.pug b/src/main/style/atom/button/button.code.pug
deleted file mode 100644
index fcff98411a5..00000000000
--- a/src/main/style/atom/button/button.code.pug
+++ /dev/null
@@ -1,5 +0,0 @@
-include button.mixin.pug
-
-+jhlite-button Button
-+jhlite-button({disabled: true}) Button
-+jhlite-button({block: true}) Button
diff --git a/src/main/style/atom/button/button.md b/src/main/style/atom/button/button.md
deleted file mode 100644
index 3151c8f2aaf..00000000000
--- a/src/main/style/atom/button/button.md
+++ /dev/null
@@ -1 +0,0 @@
-## Button
diff --git a/src/main/style/atom/button/button.mixin.pug b/src/main/style/atom/button/button.mixin.pug
deleted file mode 100644
index 85fb890e6ff..00000000000
--- a/src/main/style/atom/button/button.mixin.pug
+++ /dev/null
@@ -1,5 +0,0 @@
-mixin jhlite-button(opts)
-  - const { block: isBlock, disabled } = opts || {};
-  - const blockClass = isBlock ? '-block' : null;
-  button.jhlite-button(class=blockClass, disabled=disabled)
-    block
diff --git a/src/main/style/atom/button/button.pug b/src/main/style/atom/button/button.pug
new file mode 100644
index 00000000000..2f88bf582df
--- /dev/null
+++ b/src/main/style/atom/button/button.pug
@@ -0,0 +1,7 @@
+.tikui-vertical-spacing.-s32
+  .tikui-vertical-spacing--line
+    h2#input.tikui-title-section Button
+  .tikui-vertical-spacing--line
+    include:componentDoc(height=150) button-main/button-main.md
+  .tikui-vertical-spacing--line
+    include:componentDoc(height=150) button-switch/button-switch.md
diff --git a/src/main/style/atom/button/button.render.pug b/src/main/style/atom/button/button.render.pug
deleted file mode 100644
index f6444e7792e..00000000000
--- a/src/main/style/atom/button/button.render.pug
+++ /dev/null
@@ -1,4 +0,0 @@
-extends /layout
-
-block body
-  include button.code.pug
diff --git a/src/main/style/molecule/_molecule.scss b/src/main/style/molecule/_molecule.scss
index d6dbe072d66..dcd78c5e166 100644
--- a/src/main/style/molecule/_molecule.scss
+++ b/src/main/style/molecule/_molecule.scss
@@ -1,6 +1,7 @@
 @import 'field/field';
 @import 'icon-text/icon-text';
 @import 'loader-container/loader-container';
+@import 'mode-switch/mode-switch';
 @import 'nav/nav';
 @import 'tag-filter/tag-filter';
 @import 'toast/toast';
diff --git a/src/main/style/molecule/mode-switch/_mode-switch.scss b/src/main/style/molecule/mode-switch/_mode-switch.scss
new file mode 100644
index 00000000000..5c48aa8ec42
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/_mode-switch.scss
@@ -0,0 +1,11 @@
+$jhlite-mode-switch-line-color: $jhlite-global-line-color;
+$jhlite-mode-switch-radius: $jhlite-global-size-switch-radius;
+
+.jhlite-mode-switch {
+  display: flex;
+
+  &--modes {
+    border: 1px solid $jhlite-mode-switch-line-color;
+    border-radius: $jhlite-mode-switch-radius;
+  }
+}
diff --git a/src/main/style/molecule/mode-switch/mode-switch.code.pug b/src/main/style/molecule/mode-switch/mode-switch.code.pug
new file mode 100644
index 00000000000..3b575a5c26b
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/mode-switch.code.pug
@@ -0,0 +1,3 @@
+include mode-switch.mixin.pug
+
++jhlite-mode-switch('Option one', 'Option two')
diff --git a/src/main/style/molecule/mode-switch/mode-switch.md b/src/main/style/molecule/mode-switch/mode-switch.md
new file mode 100644
index 00000000000..fca5087a22d
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/mode-switch.md
@@ -0,0 +1 @@
+## Mode switch
diff --git a/src/main/style/molecule/mode-switch/mode-switch.mixin.pug b/src/main/style/molecule/mode-switch/mode-switch.mixin.pug
new file mode 100644
index 00000000000..5d5d5980c8e
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/mode-switch.mixin.pug
@@ -0,0 +1,7 @@
+include /atom/button/button-switch/button-switch.mixin.pug
+
+mixin jhlite-mode-switch(selectedOptionLabel, unselectedOptionLabel)
+  .jhlite-mode-switch
+    .jhlite-mode-switch--modes
+      +jhlite-button-switch({selected: true})= selectedOptionLabel
+      +jhlite-button-switch= unselectedOptionLabel
diff --git a/src/main/style/molecule/mode-switch/mode-switch.render.pug b/src/main/style/molecule/mode-switch/mode-switch.render.pug
new file mode 100644
index 00000000000..2fac3570cd2
--- /dev/null
+++ b/src/main/style/molecule/mode-switch/mode-switch.render.pug
@@ -0,0 +1,4 @@
+extends /layout
+
+block body
+  include mode-switch.code.pug
diff --git a/src/main/style/molecule/molecule.pug b/src/main/style/molecule/molecule.pug
index e3888913f41..7087b295027 100644
--- a/src/main/style/molecule/molecule.pug
+++ b/src/main/style/molecule/molecule.pug
@@ -18,6 +18,8 @@ block content
       include:componentDoc(height=50) icon-text/icon-text.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=70) loader-container/loader-container.md
+    .tikui-vertical-spacing--line
+      include:componentDoc(height=70) mode-switch/mode-switch.md
     .tikui-vertical-spacing--line
       include:componentDoc(height=50) nav/nav.md
     .tikui-vertical-spacing--line
diff --git a/src/main/style/organism/landscape-minimap/landscape-minimap.mixin.pug b/src/main/style/organism/landscape-minimap/landscape-minimap.mixin.pug
index c261012d7b0..58be4fcccc4 100644
--- a/src/main/style/organism/landscape-minimap/landscape-minimap.mixin.pug
+++ b/src/main/style/organism/landscape-minimap/landscape-minimap.mixin.pug
@@ -1,7 +1,7 @@
 mixin jhlite-landscape-minimap
   .jhlite-landscape-minimap
     .jhlite-minimap--container
-      button.jhlite-button.-rounded-top.-small
+      button.jhlite-button-main.-rounded-top.-small
         em.jhlite-icon.jhlite-icon-eye-off(role='img', aria-label='Icon eye-off')
       .jhlite-minimap--size(style='height: 100px; width: 200px')
         .jhlite-minimap--viewer
diff --git a/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug b/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
index e621d8831f1..eabea8619c6 100644
--- a/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
+++ b/src/main/style/organism/landscape-preset-configuration/landscape-preset-configuration.mixin.pug
@@ -1,6 +1,6 @@
 mixin jhlite-landscape-preset-configuration
   .jhlite-landscape-preset-configuration
-    button.jhlite-button.-rounded-top.-small
+    button.jhlite-button-main.-rounded-top.-small
       em.jhlite-icon.jhlite-icon-eye-off(role='img', aria-label='Icon eye-off')
     .jhlite-landscape-preset-configuration--content
       .jhlite-field--label
@@ -8,6 +8,6 @@ mixin jhlite-landscape-preset-configuration
       .jhlite-landscape-preset-configuration--field
         select#preset-configuration.jhlite-select(@change='handlePresetChange', :value='selectedPresetName')
           option(value='') Select a preset...
-        option(value='preset.name') Java Library with Maven
-        option(value='preset.name') Webapp: Vue + Spring Boot
-        option(value='preset.name') JHLite Extension with Maven
+          option(value='preset.name') Java Library with Maven
+          option(value='preset.name') Webapp: Vue + Spring Boot
+          option(value='preset.name') JHLite Extension with Maven
diff --git a/src/main/style/organism/landscape/_landscape.scss b/src/main/style/organism/landscape/_landscape.scss
index a537b42c8f4..8a6e1e4faf3 100644
--- a/src/main/style/organism/landscape/_landscape.scss
+++ b/src/main/style/organism/landscape/_landscape.scss
@@ -1,4 +1,6 @@
 $jhlite-landscape-padding: 20px;
+$jhipster-landscape-preset-selection-top-position: 85px;
+$jhipster-landscape-preset-selection-left-position: $jhlite-landscape-padding;
 $jhlite-landscape-line-color: $jhlite-global-line-color;
 $jhlite-landscape-box-radius: $jhlite-global-box-radius;
 $jhlite-landscape-primary-color: $jhlite-global-primary-color;
@@ -24,31 +26,12 @@ $jhlite-landscape-primary-alternative-color: $jhlite-global-primary-alternative-
     border-radius: $jhlite-landscape-box-radius;
     background: var(--jhlite-chip-bg-color);
     padding: 10px;
-
-    &--modes {
-      border: 1px solid $jhlite-landscape-line-color;
-      border-radius: 1.5em;
-    }
-
-    &--modes-switch {
-      border: 0;
-      border-radius: 1.5em;
-      background-color: transparent;
-      cursor: pointer;
-      padding: 7px 15px;
-      color: var(--jhlite-global-color-text);
-
-      &.-selected {
-        background-color: $jhlite-landscape-primary-color;
-        color: $jhlite-landscape-color-text-light;
-      }
-    }
   }
 
   .jhipster-landscape-preset-selection {
     position: absolute;
-    top: 80px;
-    left: $jhlite-landscape-padding;
+    top: $jhipster-landscape-preset-selection-top-position;
+    left: $jhipster-landscape-preset-selection-left-position;
     z-index: 3;
     background: var(--jhlite-chip-bg-color);
   }
diff --git a/src/main/style/organism/landscape/landscape.mixin.pug b/src/main/style/organism/landscape/landscape.mixin.pug
index e2708f13e2d..3f67f91d9a5 100644
--- a/src/main/style/organism/landscape/landscape.mixin.pug
+++ b/src/main/style/organism/landscape/landscape.mixin.pug
@@ -1,13 +1,12 @@
 include /organism/module-properties/module-properties.mixin.pug
 include /organism/landscape-module/landscape-module.mixin.pug
 include /organism/project-actions/project-actions.mixin.pug
+include /molecule/mode-switch/mode-switch.mixin.pug
 
 mixin jhlite-landscape
   .jhipster-landscape.jhlite-menu-content-template
     .jhipster-landscape-modes-selection
-      .jhipster-landscape-modes-selection--modes
-        button.jhipster-landscape-modes-selection--modes-switch.-selected Compacted
-        button.jhipster-landscape-modes-selection--modes-switch Extended
+      +jhlite-mode-switch('Compacted', 'Extended')
     .jhipster-landscape-map.jhlite-menu-content-template--content
       .jhipster-landscape-levels
         ul.jhipster-landscape-levels--level.-compacted
diff --git a/src/main/style/organism/project-actions/project-actions.mixin.pug b/src/main/style/organism/project-actions/project-actions.mixin.pug
index 407241403dc..741693e7a7c 100644
--- a/src/main/style/organism/project-actions/project-actions.mixin.pug
+++ b/src/main/style/organism/project-actions/project-actions.mixin.pug
@@ -4,18 +4,18 @@ mixin jhlite-project-actions
   .jhipster-side-form--actions
     .jhlite-vertical-space.-paragraph
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('play-circled')
           span  Apply new
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('play-circled')
           span  Apply selected
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('code')
           span  Format
       .jhlite-vertical-space--line
-        button.jhlite-button.-block
+        button.jhlite-button-main.-block
           +jhlite-icon('download')
           span  Download
diff --git a/src/main/style/template/menu-content-template/menu-content-template.mixin.pug b/src/main/style/template/menu-content-template/menu-content-template.mixin.pug
index 6ce1929123e..6661942a9bc 100644
--- a/src/main/style/template/menu-content-template/menu-content-template.mixin.pug
+++ b/src/main/style/template/menu-content-template/menu-content-template.mixin.pug
@@ -1,5 +1,5 @@
 include /atom/input/input-text/input-text.mixin.pug
-include /atom/button/button.mixin.pug
+include /atom/button/button-main/button-main.mixin.pug
 include /molecule/field/field.mixin.pug
 include /organism/side-menu/side-menu.mixin.pug
 include /organism/vertical-space/vertical-space.mixin.pug
@@ -20,6 +20,6 @@ mixin jhlite-menu-content-template
         +jhlite-side-menu--slot
           +jhlite-vertical-space('paragraph')
             +jhlite-vertical-space--line
-              +jhlite-button({block: true}) Button
+              +jhlite-button-main({block: true}) Button
             +jhlite-vertical-space--line
-              +jhlite-button({block: true}) Button
+              +jhlite-button-main({block: true}) Button
diff --git a/src/main/style/token/_size.scss b/src/main/style/token/_size.scss
index 47f2fd40ee1..c0b3aaa9242 100644
--- a/src/main/style/token/_size.scss
+++ b/src/main/style/token/_size.scss
@@ -6,3 +6,4 @@ $jhlite-global-size-field-line-height: 1rem !default;
 $jhlite-global-size-field-font-size: 1rem !default;
 $jhlite-global-size-field-padding: 10px !default;
 $jhlite-global-size-field-radius: math.div(6, 16) * 1rem;
+$jhlite-global-size-switch-radius: 1.5rem;
diff --git a/src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html b/src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html
index 730c8398647..c590d0b5bff 100644
--- a/src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html
+++ b/src/main/webapp/app/module/primary/landscape-minimap/LandscapeMiniMap.html
@@ -1,7 +1,9 @@
 <div ref="minimapContainer" class="jhlite-landscape-minimap jhlite-minimap--container">
-  <button v-if="!isMiniMapOpen" class="jhlite-button -block" @click="openMiniMap" data-selector="show-minimap-btn">OPEN MINIMAP</button>
+  <button v-if="!isMiniMapOpen" class="jhlite-button-main -block" @click="openMiniMap" data-selector="show-minimap-btn">
+    OPEN MINIMAP
+  </button>
   <button
-    class="jhlite-button -rounded-top -small"
+    class="jhlite-button-main -rounded-top -small"
     v-if="isMiniMapOpen"
     @click="closeMiniMap"
     title="Hide minimap"
diff --git a/src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html b/src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html
index 1a2f439b5d5..159c485cc1d 100644
--- a/src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html
+++ b/src/main/webapp/app/module/primary/landscape-preset-configuration/LandscapePresetConfiguration.html
@@ -1,7 +1,7 @@
 <div class="jhlite-landscape-preset-configuration">
   <button
     v-if="!isPresetConfigurationOpen"
-    class="jhlite-button -small"
+    class="jhlite-button-main -small"
     @click="openPresetConfiguration"
     title="Show presets configurations"
     data-selector="show-preset-configuration-btn"
@@ -9,7 +9,7 @@
     <IconVue name="cog-alt" aria-label="Icon presets configurations" title="Show presets configurations" />
   </button>
   <button
-    class="jhlite-button -rounded-top -small"
+    class="jhlite-button-main -rounded-top -small"
     v-if="isPresetConfigurationOpen"
     @click="closePresetConfiguration"
     title="Hide presets configurations"
diff --git a/src/main/webapp/app/module/primary/landscape/Landscape.html b/src/main/webapp/app/module/primary/landscape/Landscape.html
index df739d3f0b4..70658adaaa1 100644
--- a/src/main/webapp/app/module/primary/landscape/Landscape.html
+++ b/src/main/webapp/app/module/primary/landscape/Landscape.html
@@ -1,23 +1,25 @@
 <LandscapeLoaderVue v-if="levels.isLoading()" />
 <div class="jhipster-landscape jhlite-menu-content-template" v-else data-selector="landscape">
   <div class="jhipster-landscape-modes-selection">
-    <div class="jhipster-landscape-modes-selection--modes">
-      <button
-        class="jhipster-landscape-modes-selection--modes-switch"
-        :class="modeSwitchClass('COMPACTED')"
-        @click="selectMode('COMPACTED')"
-        data-selector="compacted-mode-button"
-      >
-        Compacted
-      </button>
-      <button
-        class="jhipster-landscape-modes-selection--modes-switch"
-        :class="modeSwitchClass('EXTENDED')"
-        @click="selectMode('EXTENDED')"
-        data-selector="extended-mode-button"
-      >
-        Extended
-      </button>
+    <div class="jhlite-mode-switch">
+      <div class="jhlite-mode-switch--modes">
+        <button
+          class="jhlite-button-switch"
+          :class="modeSwitchClass('COMPACTED')"
+          @click="selectMode('COMPACTED')"
+          data-selector="compacted-mode-button"
+        >
+          Compacted
+        </button>
+        <button
+          class="jhlite-button-switch"
+          :class="modeSwitchClass('EXTENDED')"
+          @click="selectMode('EXTENDED')"
+          data-selector="extended-mode-button"
+        >
+          Extended
+        </button>
+      </div>
     </div>
   </div>
   <div class="jhipster-landscape-preset-selection">
@@ -114,7 +116,7 @@ <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.sl
         >
           <div class="jhlite-vertical-space--line">
             <button
-              class="jhlite-button -block"
+              class="jhlite-button-main -block"
               data-selector="modules-apply-new-button"
               :disabled="disabledNewApplication()"
               @click="applyNewModules"
@@ -126,7 +128,7 @@ <h2 class="jhipster-landscape-feature--title" :class="modeClass()">{{ element.sl
 
           <div class="jhlite-vertical-space--line">
             <button
-              class="jhlite-button -block"
+              class="jhlite-button-main -block"
               data-selector="modules-apply-all-button"
               :disabled="disabledAllApplication()"
               @click="applyAllModules"
diff --git a/src/main/webapp/app/module/primary/project-actions/ProjectActions.html b/src/main/webapp/app/module/primary/project-actions/ProjectActions.html
index c7e34431008..2e3dc33cbbc 100644
--- a/src/main/webapp/app/module/primary/project-actions/ProjectActions.html
+++ b/src/main/webapp/app/module/primary/project-actions/ProjectActions.html
@@ -3,13 +3,13 @@
     <slot />
 
     <div class="jhlite-vertical-space--line">
-      <button class="jhlite-button -block" @click="formatProject()" :disabled="disabledPrettier()" data-selector="format-button">
+      <button class="jhlite-button-main -block" @click="formatProject()" :disabled="disabledPrettier()" data-selector="format-button">
         <IconVue name="code" aria-label="Icon code" />
         Format
       </button>
     </div>
     <div class="jhlite-vertical-space--line">
-      <button class="jhlite-button -block" @click="downloadProject()" :disabled="disabledActions()" data-selector="download-button">
+      <button class="jhlite-button-main -block" @click="downloadProject()" :disabled="disabledActions()" data-selector="download-button">
         <IconVue name="download" aria-label="Icon download" />
         Download
       </button>