diff --git a/frontend/resources/images/features/2.0-components.gif b/frontend/resources/images/features/2.0-components.gif
new file mode 100644
index 0000000000..e1df13a6b4
Binary files /dev/null and b/frontend/resources/images/features/2.0-components.gif differ
diff --git a/frontend/resources/images/features/2.0-css-grid.gif b/frontend/resources/images/features/2.0-css-grid.gif
new file mode 100644
index 0000000000..c6dc6468ce
Binary files /dev/null and b/frontend/resources/images/features/2.0-css-grid.gif differ
diff --git a/frontend/resources/images/features/2.0-intro-image.png b/frontend/resources/images/features/2.0-intro-image.png
new file mode 100644
index 0000000000..cff25a8d2e
Binary files /dev/null and b/frontend/resources/images/features/2.0-intro-image.png differ
diff --git a/frontend/resources/images/features/2.0-new-ui.gif b/frontend/resources/images/features/2.0-new-ui.gif
new file mode 100644
index 0000000000..42f2152f61
Binary files /dev/null and b/frontend/resources/images/features/2.0-new-ui.gif differ
diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 6434012ef2..b7d4b68583 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -278,7 +278,7 @@
 // INPUTS
 .input-base {
   @include removeInputStyle;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   // @include focusInput;
   height: $s-28;
@@ -313,7 +313,7 @@
 }
 
 .input-element {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include focusInput;
   display: flex;
   align-items: center;
@@ -383,7 +383,7 @@
 }
 
 .input-element-label {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: flex-start;
   padding: 0;
@@ -488,7 +488,7 @@
   display: flex;
   align-items: center;
   label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     gap: $s-6;
@@ -519,7 +519,7 @@
   display: flex;
   flex-direction: column;
   label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
@@ -529,7 +529,7 @@
 
   input {
     @extend .input-base;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     border-radius: $br-8;
     height: $s-32;
     min-height: $s-32;
@@ -606,7 +606,7 @@
 }
 
 .modal-hint-base {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
   border-top: $s-1 solid var(--modal-hint-border-color);
   border-bottom: $s-1 solid var(--modal-hint-border-color);
@@ -666,7 +666,7 @@
 }
 // UI ELEMENTS
 .asset-element {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   height: $s-32;
@@ -687,7 +687,7 @@
 }
 
 .shortcut-key-base {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexCenter;
   height: $s-20;
   padding: $s-2 $s-6;
@@ -697,7 +697,7 @@
 
 .user-icon {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-24;
   width: $s-24;
   border-radius: $br-circle;
@@ -709,7 +709,7 @@
 }
 
 .mixed-bar {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   flex-grow: 1;
@@ -785,7 +785,7 @@
   gap: $s-4;
   height: $s-32;
   :global(.attr-label) {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include twoLineTextEllipsis;
     width: $s-92;
     margin: auto 0;
@@ -797,12 +797,12 @@
     grid-area: content;
     display: flex;
     color: var(--entry-foreground-color-hover);
-    @include bodyMedTipography;
+    @include bodySmallTypography;
   }
 }
 
 .copy-button-children {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--color-foreground-primary);
   text-align: left;
   margin: 0;
@@ -816,7 +816,7 @@
 }
 
 .comment-bubbles {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexCenter;
   height: $s-32;
   width: $s-32;
@@ -851,7 +851,7 @@
 }
 
 .menu-item-base {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -866,7 +866,7 @@
 }
 
 .dropdown-element-base {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   gap: $s-8;
@@ -913,7 +913,7 @@
 }
 
 .select-wrapper {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   position: relative;
   display: flex;
   align-items: center;
diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 0dc66a551c..d4f854702f 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -309,6 +309,8 @@
   --modal-link-foreground-color: var(--color-accent-primary);
   --modal-border-color: var(--color-background-quaternary);
   --modal-separator-backogrund-color: var(--color-background-quaternary);
+  --modal-navigator-foreground-color-rest: var(--color-background-quaternary);
+  --modal-navigator-foreground-color-active: var(--color-accent-primary);
 
   // ALERTS NOTIFICATION TOAST & STATUS WIDGET
   --alert-background-color-success: var(--color-success-background);
@@ -372,6 +374,9 @@
   --flow-tag-background-color-hover: var(--color-background-quaternary);
   --flow-tag-foreground-color-hover: var(--color-accent-primary);
 
+  --communication-tag-background-color: var(--color-foreground-primary);
+  --communication-tag-foreground-color: var(--color-background-tertiary);
+
   // VIEWER
   --viewer-background-color: var(--color-background-secondary);
   --viewer-paginator-background-color: var(--color-background-tertiary);
diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index 25301cc903..60f2f1e3d0 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -63,26 +63,49 @@
   line-height: 1.2;
 }
 
+@mixin headlineLargeTypography {
+  font-family: "worksans", sans-serif;
+  font-size: $fs-18;
+  line-height: 1.2;
+  text-transform: uppercase;
+  font-weight: $fw400;
+}
+
 @mixin headlineMediumTypography {
   font-family: "worksans", sans-serif;
   font-size: $fs-16;
   line-height: 1.4;
   text-transform: uppercase;
-  font-weight: normal;
+  font-weight: $fw400;
+}
+
+@mixin headlineSmallTypography {
+  font-family: "worksans", sans-serif;
+  font-size: $fs-12;
+  line-height: 1.2;
+  text-transform: uppercase;
+  font-weight: $fw500;
 }
 
 @mixin bodyLargeTypography {
   font-family: "worksans", sans-serif;
   font-size: $fs-16;
   line-height: 1.5;
-  font-weight: normal;
+  font-weight: $fw400;
 }
 
-@mixin bodyMedTipography {
+@mixin bodyMediumTypography {
+  font-family: "worksans", sans-serif;
+  font-size: $fs-14;
+  line-height: 1.4;
+  font-weight: $fw400;
+}
+
+@mixin bodySmallTypography {
   font-family: "worksans", sans-serif;
   font-size: $fs-12;
   font-weight: $fw400;
-  line-height: 1.2;
+  line-height: 1.4;
 }
 
 @mixin codeTypography {
@@ -110,7 +133,7 @@
 }
 
 @mixin inspectValue {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: inline-block;
   width: fit-content;
   padding: 0;
diff --git a/frontend/resources/styles/common/refactor/spacing.scss b/frontend/resources/styles/common/refactor/spacing.scss
index 2a2eed4572..fcc536563c 100644
--- a/frontend/resources/styles/common/refactor/spacing.scss
+++ b/frontend/resources/styles/common/refactor/spacing.scss
@@ -155,6 +155,7 @@ $s-712: #{0.25 * 178}rem;
 $s-736: #{0.25 * 184}rem;
 $s-744: #{0.25 * 186}rem;
 $s-800: #{0.25 * 200}rem;
+$s-888: #{0.25 * 222}rem;
 $s-908: #{0.25 * 227}rem;
 $s-960: #{0.25 * 240}rem;
 $s-968: #{0.25 * 242}rem;
diff --git a/frontend/src/app/main/ui/comments.scss b/frontend/src/app/main/ui/comments.scss
index a8887da8a3..ddad36a6bd 100644
--- a/frontend/src/app/main/ui/comments.scss
+++ b/frontend/src/app/main/ui/comments.scss
@@ -19,7 +19,7 @@
 }
 
 .section-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-32;
   display: flex;
   align-items: center;
@@ -55,7 +55,7 @@
 
 // Comment-thread
 .comment {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   flex-direction: column;
   gap: $s-12;
@@ -98,7 +98,7 @@
 }
 
 .content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--color-foreground-primary);
 }
 
@@ -151,7 +151,7 @@
 .comment-container {
   position: relative;
   .comment {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     .author {
       display: flex;
       gap: $s-8;
@@ -195,7 +195,7 @@
     .content {
       position: relative;
       .text {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
       }
     }
   }
diff --git a/frontend/src/app/main/ui/components/color_bullet_new.scss b/frontend/src/app/main/ui/components/color_bullet_new.scss
index ba0cc18fc9..36afda4b2a 100644
--- a/frontend/src/app/main/ui/components/color_bullet_new.scss
+++ b/frontend/src/app/main/ui/components/color_bullet_new.scss
@@ -71,7 +71,7 @@
 
 .color-text {
   @include twoLineTextEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   width: $s-80;
   text-align: center;
   margin-top: $s-2;
diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss
index f08b5c307a..ed007261c0 100644
--- a/frontend/src/app/main/ui/components/context_menu_a11y.scss
+++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss
@@ -46,7 +46,7 @@
     .context-menu-item {
       display: flex;
       .context-menu-action {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         display: flex;
         align-items: center;
         justify-content: flex-start;
diff --git a/frontend/src/app/main/ui/components/editable_label.scss b/frontend/src/app/main/ui/components/editable_label.scss
index 8dab5e8aed..1f72eaf7ab 100644
--- a/frontend/src/app/main/ui/components/editable_label.scss
+++ b/frontend/src/app/main/ui/components/editable_label.scss
@@ -8,7 +8,7 @@
 
 .editable-label-input {
   @include textEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include removeInputStyle;
   flex-grow: 1;
   height: $s-28;
diff --git a/frontend/src/app/main/ui/components/forms.scss b/frontend/src/app/main/ui/components/forms.scss
index 5325e94e70..c9e09ec192 100644
--- a/frontend/src/app/main/ui/components/forms.scss
+++ b/frontend/src/app/main/ui/components/forms.scss
@@ -41,7 +41,7 @@
 .input-with-label {
   @include flexColumn;
   gap: $s-8;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   justify-content: flex-start;
   align-items: flex-start;
   height: 100%;
@@ -143,7 +143,7 @@
 }
 
 .hint {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-text-foreground-color);
   width: 99%;
 }
@@ -151,7 +151,7 @@
 .checkbox {
   @extend .input-checkbox;
   .checkbox-label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     flex-direction: row-reverse;
@@ -186,7 +186,7 @@
     background-color: var(--input-background-color);
     .main-content {
       @include flexColumn;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       position: relative;
       justify-content: center;
       flex-grow: 1;
@@ -231,7 +231,7 @@
 
   select {
     @extend .menu-dropdown;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     box-sizing: border-box;
     position: absolute;
     top: 0;
@@ -247,7 +247,7 @@
     background-color: transparent;
     cursor: pointer;
     option {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       color: var(--title-foreground-color-hover);
       background-color: var(--menu-background-color);
       appearance: none;
@@ -276,7 +276,7 @@
   overflow-y: hidden;
   .inside-input {
     @include removeInputStyle;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     width: 100%;
     max-width: calc(100% - $s-1);
@@ -315,7 +315,7 @@
         border: $s-1 solid var(--pill-background-color);
         box-sizing: border-box;
         .text {
-          @include bodyMedTipography;
+          @include bodySmallTypography;
           padding-right: $s-8;
           color: var(--pill-foreground-color);
         }
@@ -352,7 +352,7 @@
 }
 
 .radio-label {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexRow;
   align-items: flex-start;
   gap: $s-8;
diff --git a/frontend/src/app/main/ui/components/select.scss b/frontend/src/app/main/ui/components/select.scss
index 31aba1991d..68af4ae365 100644
--- a/frontend/src/app/main/ui/components/select.scss
+++ b/frontend/src/app/main/ui/components/select.scss
@@ -12,7 +12,7 @@
   --icon-color: var(--icon-foreground);
   --text-color: var(--menu-foreground-color);
   @extend .new-scrollbar;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
diff --git a/frontend/src/app/main/ui/dashboard/change_owner.scss b/frontend/src/app/main/ui/dashboard/change_owner.scss
index d8bdd10d5d..0b150c1c5e 100644
--- a/frontend/src/app/main/ui/dashboard/change_owner.scss
+++ b/frontend/src/app/main/ui/dashboard/change_owner.scss
@@ -28,7 +28,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 
diff --git a/frontend/src/app/main/ui/dashboard/import.scss b/frontend/src/app/main/ui/dashboard/import.scss
index 6d0f183feb..0fc0c620f3 100644
--- a/frontend/src/app/main/ui/dashboard/import.scss
+++ b/frontend/src/app/main/ui/dashboard/import.scss
@@ -28,7 +28,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: grid;
   grid-template-columns: 1fr;
   gap: $s-16;
@@ -52,7 +52,7 @@
 .modal-scd-msg,
 .modal-subtitle,
 .modal-msg {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-text-foreground-color);
   line-height: 1.5;
 }
@@ -78,7 +78,7 @@
       flex-grow: 1;
     }
     .file-name-label {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       display: flex;
       align-items: center;
       gap: $s-12;
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index 8245e81828..2f1b8840e4 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -612,7 +612,7 @@
       }
     }
     .message {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       color: var(--alert-foreground-color-error);
     }
   }
@@ -636,7 +636,7 @@
       }
     }
     .message {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       color: var(--alert-foreground-color-warning);
     }
   }
@@ -694,7 +694,7 @@
 .modal-content {
   @include flexColumn;
   gap: $s-24;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 
@@ -703,7 +703,7 @@
 }
 
 .select-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 
diff --git a/frontend/src/app/main/ui/dashboard/team_form.scss b/frontend/src/app/main/ui/dashboard/team_form.scss
index 573c53304c..dfca8099ef 100644
--- a/frontend/src/app/main/ui/dashboard/team_form.scss
+++ b/frontend/src/app/main/ui/dashboard/team_form.scss
@@ -35,7 +35,7 @@
   @extend .input-element-label;
   label {
     @include flexColumn;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     align-items: flex-start;
     width: 100%;
     border: none;
@@ -43,7 +43,7 @@
     height: 100%;
 
     input {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       margin-top: $s-8;
     }
   }
diff --git a/frontend/src/app/main/ui/debug/components_preview.scss b/frontend/src/app/main/ui/debug/components_preview.scss
index 2e254fc79d..eb1d83acd1 100644
--- a/frontend/src/app/main/ui/debug/components_preview.scss
+++ b/frontend/src/app/main/ui/debug/components_preview.scss
@@ -53,7 +53,7 @@
       flex-direction: column;
       border-radius: $s-8;
       h3 {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         font-size: $fs-24;
         width: 100%;
       }
diff --git a/frontend/src/app/main/ui/delete_shared.scss b/frontend/src/app/main/ui/delete_shared.scss
index 0da1500c9a..dfd7741f33 100644
--- a/frontend/src/app/main/ui/delete_shared.scss
+++ b/frontend/src/app/main/ui/delete_shared.scss
@@ -31,7 +31,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 
diff --git a/frontend/src/app/main/ui/export.scss b/frontend/src/app/main/ui/export.scss
index 125f8235fd..479d714a39 100644
--- a/frontend/src/app/main/ui/export.scss
+++ b/frontend/src/app/main/ui/export.scss
@@ -55,7 +55,7 @@
 }
 
 .export-progress-title {
-  @include bodyMedTipography;
+  @include bodyMediumTypography;
   display: grid;
   grid-template-columns: auto 1fr;
   gap: $s-8;
@@ -67,7 +67,7 @@
 }
 
 .progress {
-  @include bodyMedTipography;
+  @include bodyMediumTypography;
   padding-left: $s-8;
   margin: 0;
   align-self: center;
@@ -76,7 +76,7 @@
 
 .retry-btn {
   @include buttonStyle;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: inline;
   text-align: left;
   color: var(--modal-link-foreground-color);
@@ -128,10 +128,10 @@
 
 .modal-content,
 .no-selection {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
   .modal-hint {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     color: var(--modal-text-foreground-color);
   }
   .modal-link {
diff --git a/frontend/src/app/main/ui/notifications/context_notification.scss b/frontend/src/app/main/ui/notifications/context_notification.scss
index 67e047955c..69374ac8c7 100644
--- a/frontend/src/app/main/ui/notifications/context_notification.scss
+++ b/frontend/src/app/main/ui/notifications/context_notification.scss
@@ -66,7 +66,7 @@
 }
 
 .context-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   align-self: center;
   color: var(--context-notification-fg-color);
   margin: auto 0;
@@ -78,7 +78,7 @@
 
 .link,
 .contain-html .context-text a {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   align-self: center;
   display: inline;
   text-align: left;
diff --git a/frontend/src/app/main/ui/notifications/inline_notification.scss b/frontend/src/app/main/ui/notifications/inline_notification.scss
index 9c82672d05..0bbb0d0c01 100644
--- a/frontend/src/app/main/ui/notifications/inline_notification.scss
+++ b/frontend/src/app/main/ui/notifications/inline_notification.scss
@@ -32,7 +32,7 @@
 }
 
 .inline-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   align-self: center;
 }
 
@@ -41,7 +41,7 @@
 }
 
 .link {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin: 0;
   height: 100%;
   color: var(--modal-link-foreground-color);
diff --git a/frontend/src/app/main/ui/notifications/toast_notification.scss b/frontend/src/app/main/ui/notifications/toast_notification.scss
index aa85942bee..dfa67bc1e1 100644
--- a/frontend/src/app/main/ui/notifications/toast_notification.scss
+++ b/frontend/src/app/main/ui/notifications/toast_notification.scss
@@ -69,7 +69,7 @@
 }
 
 .link {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-link-foreground-color);
   margin: 0;
 }
@@ -81,7 +81,7 @@
 }
 
 .text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   align-self: center;
 }
 
diff --git a/frontend/src/app/main/ui/onboarding.scss b/frontend/src/app/main/ui/onboarding.scss
index d0710fc42b..8cd674ba32 100644
--- a/frontend/src/app/main/ui/onboarding.scss
+++ b/frontend/src/app/main/ui/onboarding.scss
@@ -45,7 +45,7 @@
 }
 
 .release {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   position: absolute;
   top: calc(-1 * $s-28);
   right: 0;
diff --git a/frontend/src/app/main/ui/onboarding/team_choice.scss b/frontend/src/app/main/ui/onboarding/team_choice.scss
index 9562122410..25437a67cc 100644
--- a/frontend/src/app/main/ui/onboarding/team_choice.scss
+++ b/frontend/src/app/main/ui/onboarding/team_choice.scss
@@ -26,7 +26,7 @@
 }
 
 .paginator {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   position: absolute;
   top: $s-40;
   right: $s-100;
@@ -140,7 +140,7 @@
   @extend .input-element-label;
   label {
     @include flexColumn;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     align-items: flex-start;
     width: 100%;
     border: none;
@@ -148,7 +148,7 @@
     height: 100%;
 
     input {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       margin-top: $s-8;
     }
   }
@@ -185,7 +185,7 @@
 }
 
 .modal-hint {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-text-foreground-color);
   text-align: right;
 }
diff --git a/frontend/src/app/main/ui/releases.cljs b/frontend/src/app/main/ui/releases.cljs
index fc01fe2943..562c1eab2e 100644
--- a/frontend/src/app/main/ui/releases.cljs
+++ b/frontend/src/app/main/ui/releases.cljs
@@ -26,6 +26,7 @@
    [app.main.ui.releases.v1-7]
    [app.main.ui.releases.v1-8]
    [app.main.ui.releases.v1-9]
+   [app.main.ui.releases.v2-0]
    [app.util.object :as obj]
    [app.util.timers :as tm]
    [rumext.v2 :as mf]))
@@ -90,4 +91,4 @@
 
 (defmethod rc/render-release-notes "0.0"
   [params]
-  (rc/render-release-notes (assoc params :version "1.19")))
+  (rc/render-release-notes (assoc params :version "2.0")))
diff --git a/frontend/src/app/main/ui/releases/common.cljs b/frontend/src/app/main/ui/releases/common.cljs
index a20f2e56d6..4e3ce7cc5e 100644
--- a/frontend/src/app/main/ui/releases/common.cljs
+++ b/frontend/src/app/main/ui/releases/common.cljs
@@ -5,15 +5,16 @@
 ;; Copyright (c) KALEIDOS INC
 
 (ns app.main.ui.releases.common
+  (:require-macros [app.main.style :as stl])
   (:require
-   [app.util.dom :as dom]
    [rumext.v2 :as mf]))
 
 (defmulti render-release-notes :version)
 
 (mf/defc navigation-bullets
   [{:keys [slide navigate total]}]
-  [:ul.step-dots
+  [:ul {:class (stl/css :step-dots)}
    (for [i (range total)]
-     [:li {:class (dom/classnames :current (= slide i))
+     [:li {:class (stl/css-case :dot true
+                                :current (= slide i))
            :on-click #(navigate i)}])])
diff --git a/frontend/src/app/main/ui/releases/common.scss b/frontend/src/app/main/ui/releases/common.scss
new file mode 100644
index 0000000000..d2f7a7f117
--- /dev/null
+++ b/frontend/src/app/main/ui/releases/common.scss
@@ -0,0 +1,32 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.step-dots {
+  display: grid;
+  grid-template-columns: none;
+  grid-auto-flow: column;
+  gap: $s-8;
+  height: fit-content;
+  width: fit-content;
+  margin: 0;
+  padding: 0;
+  align-self: center;
+  justify-self: flex-start;
+}
+
+.dot {
+  height: $s-12;
+  width: $s-12;
+  border-radius: $br-circle;
+  background-color: var(--modal-navigator-foreground-color-rest);
+  cursor: pointer;
+}
+
+.current {
+  background-color: var(--modal-navigator-foreground-color-active);
+}
diff --git a/frontend/src/app/main/ui/releases/v2_0.cljs b/frontend/src/app/main/ui/releases/v2_0.cljs
new file mode 100644
index 0000000000..67ae75e171
--- /dev/null
+++ b/frontend/src/app/main/ui/releases/v2_0.cljs
@@ -0,0 +1,166 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) KALEIDOS INC
+
+(ns app.main.ui.releases.v2-0
+  (:require-macros [app.main.style :as stl])
+  (:require
+   [app.common.data.macros :as dm]
+   [app.main.ui.releases.common :as c]
+   [rumext.v2 :as mf]))
+
+;; TODO: Review all copies and alt text
+(defmethod c/render-release-notes "2.0"
+  [{:keys [slide klass next finish navigate version]}]
+  (mf/html
+   (case slide
+     :start
+     [:div {:class (stl/css :modal-overlay)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        ;; TODO: Review alt
+        [:img {:src "images/features/2.0-intro-image.png"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Community code contributions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "What's new?"]
+
+          [:div {:class (stl/css :verstion-tag)}
+           (dm/str "Version " version)]]
+
+         [:div {:class (stl/css :features-block)}
+          [:div {:class (stl/css :feature)}
+           [:h2 {:class (stl/css :feature-title)}
+            "CSS Grid Layout"]
+           [:p  {:class (stl/css :feature-content)}
+            "Crea una estructura flexible para componer
+             los elementos de tu diseño y obten el código html/css."]]
+
+          [:div {:class (stl/css :feature)}
+           [:h2 {:class (stl/css :feature-title)}
+            "New Components"]
+           [:p  {:class (stl/css :feature-content)}
+            "Ahora tus main components estarán en un espacio
+             físico, para que los puedas ver y gestionar fácilmente."]]
+
+          [:div {:class (stl/css :feature)}
+           [:h2 {:class (stl/css :feature-title)}
+            "New User Interface"]
+           [:p  {:class (stl/css :feature-content)}
+            "Hemos hecho Penpot aún más bonito, y además
+             ahora puedes elegir entre tema oscuro y claro."]]]
+
+         [:div {:class (stl/css :navigation)}
+          [:button {:class (stl/css :next-btn)
+                    :on-click next} "Continue"]]]]]]
+
+     0
+     [:div {:class (stl/css :modal-overlay)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        ;; TODO: Review alt
+        [:img {:src "images/features/2.0-css-grid.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Community code contributions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "css grid layout"]]
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "¿Querías más flexibilidad para componer tus diseños?
+            Selecciona GridLayout para crear una estructura con los
+            márgenes y espacios que necesites. Los elementos de tu diseño
+            se adaptarán como un guante. Además tendrás en el momento el
+            código html y css con estándares web."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Elige entre FlexLayout o GridLayout en tu panel lateral derecho."]]
+
+         [:div {:class (stl/css :navigation)}
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click next
+                    :class (stl/css :next-btn)} "Continue"]]]]]]
+
+     1
+     [:div {:class (stl/css :modal-overlay)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.0-components.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Community code contributions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "New components"]]
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Os hemos escuchado y ahora los main components están
+            disponibles en el archivo para gestionarlos más cómodamente."]
+          [:p {:class (stl/css :feature-content)}
+           "No te preocupes por tus archivos con main componentes v1,
+            al abrirlos con la nueva versión los encontrarás agrupados
+            en una página nueva, sanos y salvos."]]
+
+         [:div {:class (stl/css :navigation)}
+
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click next
+                    :class (stl/css :next-btn)} "Continue"]]]]]]
+
+     2
+     [:div {:class (stl/css :modal-overlay)}
+      [:div.animated {:class klass}
+       [:div {:class (stl/css :modal-container)}
+        [:img {:src "images/features/2.0-new-ui.gif"
+               :class (stl/css :start-image)
+               :border "0"
+               :alt "Community code contributions"}]
+
+        [:div {:class (stl/css :modal-content)}
+         [:div {:class (stl/css :modal-header)}
+          [:h1 {:class (stl/css :modal-title)}
+           "REDISEÑO Y MEJORAS DE RENDIMIENTO"]]
+
+         [:div {:class (stl/css :feature)}
+          [:p {:class (stl/css :feature-content)}
+           "Le hemos dado una vuelta al interface y añadido
+            pequeñas mejoras de usabilidad.
+            Además, ahora puedes elegir entre tema oscuro y tema claro,
+            dignos de Dark Vader y Luke Skywalker."]
+          [:p {:class (stl/css :feature-content)}
+           "Aunque siempre estamos puliendo el rendimiento
+            y la estabilidad, en esta versión hemos
+            conseguido grandes mejoras en ese sentido."]
+
+          [:p {:class (stl/css :feature-content)}
+           "Que lo disfrutes!"]]
+
+         [:div {:class (stl/css :navigation)}
+
+          [:& c/navigation-bullets
+           {:slide slide
+            :navigate navigate
+            :total 3}]
+
+          [:button {:on-click finish
+                    :class (stl/css :next-btn)} "Let's go"]]]]]])))
+
diff --git a/frontend/src/app/main/ui/releases/v2_0.scss b/frontend/src/app/main/ui/releases/v2_0.scss
new file mode 100644
index 0000000000..60848a6f0a
--- /dev/null
+++ b/frontend/src/app/main/ui/releases/v2_0.scss
@@ -0,0 +1,90 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+//
+// Copyright (c) KALEIDOS INC
+
+@import "refactor/common-refactor.scss";
+
+.modal-overlay {
+  @extend .modal-overlay-base;
+}
+
+.modal-container {
+  display: grid;
+  grid-template-columns: $s-324 1fr;
+  height: $s-500;
+  width: $s-888;
+  border-radius: $br-8;
+  background-color: var(--modal-background-color);
+  border: $s-2 solid var(--modal-border-color);
+}
+
+.start-image {
+  width: $s-324;
+  border-radius: $br-8 0 0 $br-8;
+}
+
+.modal-content {
+  padding: $s-40;
+  display: grid;
+  grid-template-rows: auto 1fr $s-32;
+  gap: $s-24;
+}
+
+.modal-header {
+  display: grid;
+  gap: $s-8;
+}
+
+.verstion-tag {
+  @include flexCenter;
+  @include headlineSmallTypography;
+  height: $s-32;
+  width: $s-96;
+  background-color: var(--communication-tag-background-color);
+  color: var(--communication-tag-foreground-color);
+  border-radius: $br-8;
+}
+
+.modal-title {
+  @include headlineLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.features-block {
+  display: flex;
+  flex-direction: column;
+  gap: $s-16;
+  width: $s-440;
+}
+
+.feature {
+  display: flex;
+  flex-direction: column;
+  gap: $s-8;
+}
+
+.feature-title {
+  @include bodyLargeTypography;
+  color: var(--modal-title-foreground-color);
+}
+
+.feature-content {
+  @include bodyMediumTypography;
+  margin: 0;
+  color: var(--modal-text-foreground-color);
+}
+
+.navigation {
+  width: 100%;
+  display: grid;
+  grid-template-areas: "bullets button";
+}
+
+.next-btn {
+  @extend .button-primary;
+  width: $s-100;
+  justify-self: flex-end;
+  grid-area: button;
+}
diff --git a/frontend/src/app/main/ui/settings/access_tokens.scss b/frontend/src/app/main/ui/settings/access_tokens.scss
index 4a9b2e340b..b3273c9c8d 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.scss
+++ b/frontend/src/app/main/ui/settings/access_tokens.scss
@@ -191,7 +191,7 @@
 .modal-content {
   @include flexColumn;
   gap: $s-24;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 
@@ -200,7 +200,7 @@
 }
 
 .select-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 
@@ -223,7 +223,7 @@
 
 .token-value {
   @include textEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
 }
 
diff --git a/frontend/src/app/main/ui/settings/change_email.scss b/frontend/src/app/main/ui/settings/change_email.scss
index 5980e211d3..fef165d493 100644
--- a/frontend/src/app/main/ui/settings/change_email.scss
+++ b/frontend/src/app/main/ui/settings/change_email.scss
@@ -30,7 +30,7 @@
 
 .modal-content {
   @include flexColumn;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   gap: $s-24;
   margin-bottom: $s-24;
 }
@@ -40,7 +40,7 @@
 }
 
 .select-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 
diff --git a/frontend/src/app/main/ui/settings/delete_account.scss b/frontend/src/app/main/ui/settings/delete_account.scss
index b60a2d0120..fd8e01b55e 100644
--- a/frontend/src/app/main/ui/settings/delete_account.scss
+++ b/frontend/src/app/main/ui/settings/delete_account.scss
@@ -30,7 +30,7 @@
 
 .modal-content {
   @include flexColumn;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   gap: $s-24;
   margin-bottom: $s-24;
 }
@@ -40,7 +40,7 @@
 }
 
 .select-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-title-foreground-color);
 }
 
diff --git a/frontend/src/app/main/ui/viewer.scss b/frontend/src/app/main/ui/viewer.scss
index c884e0c715..14dabe4c29 100644
--- a/frontend/src/app/main/ui/viewer.scss
+++ b/frontend/src/app/main/ui/viewer.scss
@@ -24,7 +24,7 @@
 }
 
 .empty-state {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--empty-message-foreground-color);
   display: grid;
   place-items: center;
@@ -134,7 +134,7 @@
 
 .counter {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   border-radius: $br-8;
   width: $s-64;
   height: $s-32;
diff --git a/frontend/src/app/main/ui/viewer/comments.scss b/frontend/src/app/main/ui/viewer/comments.scss
index 46a19e702e..7472dc8d2e 100644
--- a/frontend/src/app/main/ui/viewer/comments.scss
+++ b/frontend/src/app/main/ui/viewer/comments.scss
@@ -8,7 +8,7 @@
 
 // COMMENT DROPDOWN ON HEADER
 .view-options {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   position: relative;
@@ -29,7 +29,7 @@
 }
 
 .dropdown-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
   color: var(--input-foreground-color-active);
 }
diff --git a/frontend/src/app/main/ui/viewer/header.scss b/frontend/src/app/main/ui/viewer/header.scss
index ef5666cf83..c131e07b4d 100644
--- a/frontend/src/app/main/ui/viewer/header.scss
+++ b/frontend/src/app/main/ui/viewer/header.scss
@@ -62,7 +62,7 @@
 }
 
 .breadcrumb {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexRow;
   color: var(--title-foreground-color);
   cursor: pointer;
@@ -114,7 +114,7 @@
 }
 
 .current-frame {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexRow;
   flex-grow: 1;
   color: var(--title-foreground-color-hover);
@@ -198,7 +198,7 @@
 
 .go-log-btn {
   @extend .button-tertiary;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-32;
   padding: 0 $s-8;
   border-radius: $br-8;
@@ -213,7 +213,7 @@
   min-width: $s-64;
   border-radius: $br-8;
   .label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     color: var(--button-tertiary-foreground-color-rest);
   }
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/annotation.scss b/frontend/src/app/main/ui/viewer/inspect/annotation.scss
index f8eb6bcfee..27d27c61c2 100644
--- a/frontend/src/app/main/ui/viewer/inspect/annotation.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/annotation.scss
@@ -15,7 +15,7 @@
 }
 
 .annotation-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--entry-foreground-color);
 }
 
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
index 8187879034..22be662af5 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/common.scss
@@ -78,7 +78,7 @@
   grid-template-rows: 1fr 1fr;
 }
 .color-name-wrapper {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexColumn;
   padding: $s-8 $s-4 $s-8 $s-8;
   height: $s-32;
@@ -89,21 +89,21 @@
     max-width: $s-124;
   }
   .color-name-library {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     text-align: left;
     height: $s-16;
     color: var(--menu-foreground-color-rest);
   }
   .color-value-wrapper {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     height: $s-16;
     color: var(--menu-foreground-color);
   }
 }
 
 .opacity-info {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--menu-foreground-color);
   padding: $s-8 0;
 }
diff --git a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
index f9f49e032b..cba9ecdbe3 100644
--- a/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/attributes/text.scss
@@ -36,7 +36,7 @@
   border: $s-1 solid var(--menu-border-color-disabled);
   margin-top: $s-4;
   .content {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     width: 100%;
     padding: $s-4 0;
     color: var(--color-foreground-secondary);
diff --git a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
index bb4fffe8b7..694d43e0f6 100644
--- a/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
+++ b/frontend/src/app/main/ui/viewer/inspect/right_sidebar.scss
@@ -50,7 +50,7 @@
 }
 
 .layer-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include text-ellipsis;
   height: $s-32;
   padding: $s-8 0;
@@ -79,7 +79,7 @@
 }
 
 .placeholder-label {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   text-align: center;
   width: $s-200;
   color: var(--empty-message-foreground-color);
diff --git a/frontend/src/app/main/ui/viewer/interactions.scss b/frontend/src/app/main/ui/viewer/interactions.scss
index cdd01b5a93..74e7969b00 100644
--- a/frontend/src/app/main/ui/viewer/interactions.scss
+++ b/frontend/src/app/main/ui/viewer/interactions.scss
@@ -7,7 +7,7 @@
 @use "common/refactor/common-refactor.scss" as *;
 
 .view-options {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   position: relative;
@@ -19,7 +19,7 @@
   cursor: pointer;
 }
 .dropdown-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
   color: var(--input-foreground-color-active);
 }
diff --git a/frontend/src/app/main/ui/viewer/login.scss b/frontend/src/app/main/ui/viewer/login.scss
index 40afaf4c93..74dc3eb6e2 100644
--- a/frontend/src/app/main/ui/viewer/login.scss
+++ b/frontend/src/app/main/ui/viewer/login.scss
@@ -29,7 +29,7 @@
 
 .modal-content {
   @include flexColumn;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   gap: $s-24;
   max-height: $s-400;
   width: $s-368;
diff --git a/frontend/src/app/main/ui/viewer/share_link.scss b/frontend/src/app/main/ui/viewer/share_link.scss
index afc2dbb172..8c32338bc5 100644
--- a/frontend/src/app/main/ui/viewer/share_link.scss
+++ b/frontend/src/app/main/ui/viewer/share_link.scss
@@ -34,7 +34,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include flexColumn;
   gap: $s-24;
 }
@@ -86,7 +86,7 @@
 }
 
 .description {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--modal-text-foreground-color);
   margin-bottom: $s-24;
 }
@@ -181,7 +181,7 @@
 }
 .count-pages,
 .current-tag {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--input-foreground-color);
 }
 
diff --git a/frontend/src/app/main/ui/viewer/thumbnails.scss b/frontend/src/app/main/ui/viewer/thumbnails.scss
index 85225ba683..c4de6c4153 100644
--- a/frontend/src/app/main/ui/viewer/thumbnails.scss
+++ b/frontend/src/app/main/ui/viewer/thumbnails.scss
@@ -33,7 +33,7 @@
 }
 
 .counter {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--viewer-thumbnails-control-foreground-color);
 }
 
@@ -142,7 +142,7 @@
 }
 
 .thumbnail-info {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   text-align: center;
   color: var(--viewer-thumbnails-control-foreground-color);
diff --git a/frontend/src/app/main/ui/workspace/color_palette.scss b/frontend/src/app/main/ui/workspace/color_palette.scss
index 05323527ba..dfe3e8229b 100644
--- a/frontend/src/app/main/ui/workspace/color_palette.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette.scss
@@ -97,6 +97,6 @@
 }
 
 .color-palette-empty {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--palette-text-color);
 }
diff --git a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
index 665d406cd7..7b09a1ab63 100644
--- a/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/color_palette_ctx_menu.scss
@@ -33,7 +33,7 @@
     .option-wrapper {
       width: 100%;
       .library-name {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         color: var(--context-menu-foreground-color);
         display: grid;
         grid-template-columns: 1fr $s-24;
diff --git a/frontend/src/app/main/ui/workspace/comments.scss b/frontend/src/app/main/ui/workspace/comments.scss
index fdfb52292a..c1b7124f56 100644
--- a/frontend/src/app/main/ui/workspace/comments.scss
+++ b/frontend/src/app/main/ui/workspace/comments.scss
@@ -110,7 +110,7 @@
     }
   }
   .label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
   }
   &:hover {
     .icon svg {
@@ -164,7 +164,7 @@
 }
 
 .placeholder-label {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   text-align: center;
   width: $s-184;
   color: var(--empty-message-foreground-color);
diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss
index a1758561b9..f6d10a8ecc 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/context_menu.scss
@@ -37,7 +37,7 @@
   cursor: pointer;
 
   .title {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     color: var(--menu-foreground-color);
   }
   .shortcut {
@@ -45,7 +45,7 @@
     gap: $s-2;
     color: var(--menu-shortcut-foreground-color);
     .shortcut-key {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include flexCenter;
       height: $s-20;
       padding: $s-2 $s-6;
diff --git a/frontend/src/app/main/ui/workspace/right_header.scss b/frontend/src/app/main/ui/workspace/right_header.scss
index 4f026eb9d6..dd459675b9 100644
--- a/frontend/src/app/main/ui/workspace/right_header.scss
+++ b/frontend/src/app/main/ui/workspace/right_header.scss
@@ -36,7 +36,7 @@
   width: $s-48;
   border-radius: $br-8;
   .label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     height: 100%;
     padding: $s-8 0;
     color: var(--button-tertiary-foreground-color-rest);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
index 99d79ed62e..f72363a23c 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
@@ -113,7 +113,7 @@
 }
 
 .section-item {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   justify-content: space-between;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
index 1cf4a6088e..daca6b7787 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/colors.scss
@@ -45,7 +45,7 @@
     border: $s-1 solid var(--input-border-color-focus);
     input.element-name {
       @include textEllipsis;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include removeInputStyle;
       flex-grow: 1;
       height: $s-28;
@@ -67,7 +67,7 @@
 }
 
 .name-block {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: grid;
   grid-template-columns: auto 1fr;
   margin: 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
index 149f4a398f..f426c55477 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
@@ -29,7 +29,7 @@
   cursor: pointer;
 
   .cell-name {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     display: none;
     position: absolute;
@@ -44,7 +44,7 @@
     color: var(--assets-item-name-foreground-color);
     input {
       @include textEllipsis;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include removeInputStyle;
       height: auto;
       padding: 0;
@@ -132,13 +132,13 @@
 }
 
 .item-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   order: 2;
   color: var(--assets-item-name-foreground-color);
   input {
     @include textEllipsis;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include removeInputStyle;
     height: $s-32;
     padding: $s-4;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
index 32673ec812..b05e5796ec 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.scss
@@ -14,7 +14,7 @@
 }
 
 .file-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -71,6 +71,6 @@
 }
 
 .no-found-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--not-found-foreground-color);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
index 834dbb5446..fc20278884 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/graphics.scss
@@ -36,7 +36,7 @@
         height: 10vh;
       }
       .cell-name {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         @include textEllipsis;
         display: none;
         position: absolute;
@@ -110,7 +110,7 @@
       }
 
       .item-name {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         @include textEllipsis;
         padding-left: $s-8;
         color: var(--assets-item-name-foreground-color);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
index 0bbca2d4e2..52634fee3f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
@@ -45,7 +45,7 @@
 }
 
 .modal-content {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-bottom: $s-24;
 }
 .input-wrapper {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/history.scss b/frontend/src/app/main/ui/workspace/sidebar/history.scss
index 221547c73c..9292059016 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/history.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/history.scss
@@ -59,7 +59,7 @@
 }
 
 .history-entry-empty-msg {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--empty-message-foreground-color);
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
index 45dac47713..c9fbf235bc 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_name.scss
@@ -8,7 +8,7 @@
 
 .element-name {
   @include textEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
   color: var(--context-hover-color, var(--layer-row-foreground-color));
   &.selected {
@@ -27,7 +27,7 @@
 }
 .element-name-input {
   @include textEllipsis;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include removeInputStyle;
   flex-grow: 1;
   height: $s-28;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 5e1d175e53..422f72c19e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -108,7 +108,7 @@
 }
 
 .focus-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   height: 100%;
@@ -124,7 +124,7 @@
 
 .focus-mode-tag {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-20;
   padding: $s-4 $s-6;
   border: $s-1 solid var(--tag-background-color);
@@ -160,7 +160,7 @@
 
 .layer-filter-name {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--pill-foreground-color);
 }
 
@@ -174,7 +174,7 @@
   left: $s-20;
   width: $s-192;
   .filter-menu-item {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     justify-content: space-between;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
index 442db729d2..170d43f0c7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.scss
@@ -57,7 +57,7 @@
       }
     }
     .label {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       flex-grow: 1;
       display: flex;
       align-items: center;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index cda5dfe266..c36756069f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -96,7 +96,7 @@
 }
 
 .component-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   direction: rtl;
   text-align: left;
@@ -104,7 +104,7 @@
 }
 
 .component-parent-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   direction: rtl;
   text-align: left;
@@ -143,7 +143,7 @@
 }
 
 .copy-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: 100%;
   display: flex;
   align-items: center;
@@ -244,7 +244,7 @@
 }
 
 .path-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   direction: rtl;
   height: $s-32;
@@ -252,7 +252,7 @@
 }
 
 .path-name-last {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   height: $s-32;
   padding: $s-8 0 $s-8 $s-2;
@@ -260,7 +260,7 @@
 }
 
 .component-list-empty {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin: 0 $s-4 0 $s-8;
   color: $df-secondary;
 }
@@ -346,7 +346,7 @@
     object-fit: contain;
   }
   .component-name {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     display: none;
     position: absolute;
@@ -431,7 +431,7 @@
 }
 
 .library-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   color: var(--title-foreground-color);
   padding: $s-8 0 $s-8 $s-2;
@@ -452,7 +452,7 @@
 }
 
 .component-group {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: grid;
   grid-template-columns: 1fr $s-12;
   height: $s-32;
@@ -495,7 +495,7 @@
 // Component annotation
 
 .component-annotation {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--entry-foreground-color);
   border-radius: $br-8;
 
@@ -613,7 +613,7 @@
   }
 
   .counter {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     text-align: right;
     color: var(--entry-foreground-color);
     margin: 0 $s-8 $s-8 0;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
index 2114b7cd05..88da9410d8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.scss
@@ -134,7 +134,7 @@
   }
 
   label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     gap: $s-2;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
index fe0d2b1b0c..d4ec6f5a14 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.scss
@@ -55,12 +55,12 @@
 }
 
 .after {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   margin-top: $s-1;
 }
 
 .interactions-help {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   text-align: center;
   color: var(--title-foreground-color);
 }
@@ -120,7 +120,7 @@
   }
   .interaction-name {
     @include twoLineTextEllipsis;
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     padding-left: $s-4;
     width: $s-92;
     margin: auto 0;
@@ -287,7 +287,7 @@
 }
 
 .flow-name-wrapper {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include focusInput;
   display: flex;
   align-items: center;
@@ -324,7 +324,7 @@
   }
 
   .flow-input-wrapper {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     height: $s-28;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
index 3584a403ae..71fdbefa7b 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.scss
@@ -44,7 +44,7 @@
 }
 
 .select-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   justify-content: flex-start;
   align-items: center;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
index 4e8a976981..c117ca6a1f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.scss
@@ -26,7 +26,7 @@
 }
 
 .attr-name {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include twoLineTextEllipsis;
   width: $s-88;
   margin: auto $s-4;
@@ -60,7 +60,7 @@
 }
 
 .attr-title {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   font-size: $fs-10;
   text-transform: uppercase;
   margin-inline-start: $s-4;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
index e5daf0a5c1..3d3a4ddef2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.scss
@@ -33,7 +33,7 @@
 }
 
 .multiple-text {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   flex-grow: 1;
   color: var(--input-foreground-color-active);
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
index 9864dc2849..1106ea3c14 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
@@ -72,7 +72,7 @@
 
 .typography-name,
 .typography-font {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   @include textEllipsis;
   display: flex;
   align-items: center;
@@ -90,7 +90,7 @@
 }
 
 .font-name-wrapper {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   align-items: center;
   height: $s-32;
@@ -169,7 +169,7 @@
       color: var(--assets-item-name-foreground-color-hover);
     }
     .typography-name {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include textEllipsis;
       display: flex;
       align-items: center;
@@ -178,7 +178,7 @@
       color: var(--assets-item-name-foreground-color-hover);
     }
     .typography-font {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include textEllipsis;
       margin-left: $s-6;
       display: flex;
@@ -207,14 +207,14 @@
     --calcualted-width: calc(var(--width) - $s-48);
     padding-left: $s-2;
     .info-label {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include textEllipsis;
       width: calc(var(--calcualted-width) / 2);
       padding-top: $s-8;
       color: var(--assets-item-name-foreground-color);
     }
     .info-content {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include textEllipsis;
       padding-top: $s-8;
       width: calc(var(--calcualted-width) / 2);
@@ -254,7 +254,7 @@
     position: relative;
   }
   .font-option {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @extend .asset-element;
     padding: $s-8 0 $s-8 $s-8;
     cursor: pointer;
@@ -277,7 +277,7 @@
     gap: $s-4;
     .font-size-options {
       @extend .asset-element;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       flex-grow: 1;
       width: $s-60;
       margin: 0;
@@ -331,7 +331,7 @@
 
 .font-size-select {
   @include removeInputStyle;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-32;
   height: 100%;
   width: 100%;
@@ -410,7 +410,7 @@
   }
 
   .label {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     flex-grow: 1;
   }
 }
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
index d2b1fa0815..cf3ed21e05 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/color_row.scss
@@ -67,7 +67,7 @@
     }
   }
   .color-name {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     @include textEllipsis;
     padding-inline: $s-6;
     border-radius: $br-8;
@@ -86,7 +86,7 @@
     stroke: var(--detach-icon-foreground-color);
   }
   .color-input-wrapper {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     height: $s-28;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
index 507e5d677a..54ca47a4ae 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.scss
@@ -112,7 +112,7 @@
 }
 
 .not-found {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--empty-message-foreground-color);
   margin: $s-12;
 }
@@ -181,7 +181,7 @@
       background-color: var(--pill-background-color);
 
       .command-name {
-        @include bodyMedTipography;
+        @include bodySmallTypography;
         margin-left: $s-2;
         color: var(--pill-foreground-color);
       }
@@ -191,7 +191,7 @@
         color: var(--pill-foreground-color);
 
         .key {
-          @include bodyMedTipography;
+          @include bodySmallTypography;
           @include flexCenter;
           text-transform: capitalize;
           height: $s-20;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
index 5c34dd6711..a02e38df3e 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.scss
@@ -35,7 +35,7 @@
 
 .view-only-mode {
   @include flexCenter;
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   height: $s-20;
   padding: $s-4 $s-6;
   margin-right: $s-12;
@@ -75,7 +75,7 @@
 }
 
 .page-element {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   min-height: $s-32;
   width: 100%;
   cursor: pointer;
@@ -139,7 +139,7 @@
     }
     input.element-name {
       @include textEllipsis;
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       @include removeInputStyle;
       flex-grow: 1;
       height: $s-28;
diff --git a/frontend/src/app/main/ui/workspace/text_palette.scss b/frontend/src/app/main/ui/workspace/text_palette.scss
index 44f9575736..fcbea076fa 100644
--- a/frontend/src/app/main/ui/workspace/text_palette.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette.scss
@@ -80,7 +80,7 @@
 }
 
 .typography-item {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -135,6 +135,6 @@
 }
 
 .text-palette-empty {
-  @include bodyMedTipography;
+  @include bodySmallTypography;
   color: var(--palette-text-color);
 }
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
index 921371e05e..e1b2bb08d0 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.scss
@@ -32,7 +32,7 @@
       margin-bottom: 0;
     }
     .library-name {
-      @include bodyMedTipography;
+      @include bodySmallTypography;
       color: var(--context-menu-foreground-color);
       display: grid;
       grid-template-columns: 1fr $s-24;
diff --git a/frontend/src/app/main/ui/workspace/viewport/widgets.scss b/frontend/src/app/main/ui/workspace/viewport/widgets.scss
index be0c4d249c..0ac3997444 100644
--- a/frontend/src/app/main/ui/workspace/viewport/widgets.scss
+++ b/frontend/src/app/main/ui/workspace/viewport/widgets.scss
@@ -26,7 +26,7 @@
   cursor: pointer;
   display: flex;
   .content {
-    @include bodyMedTipography;
+    @include bodySmallTypography;
     display: flex;
     align-items: center;
     height: $s-24;