diff --git a/frontend/scss/_default.scss b/frontend/scss/_default.scss
index 171d9de90..02acba6cb 100644
--- a/frontend/scss/_default.scss
+++ b/frontend/scss/_default.scss
@@ -18,7 +18,7 @@
 
 .tp__error-text {
   color: var(--attention-color);
-  font-size: 1rem;
+  font-size: var(--font-size-base);
 }
 
 @media (pointer: fine) {
@@ -40,6 +40,11 @@
   }
 }
 
+h1 {
+  font-size: var(--font-size-xl);
+  font-weight: bold;
+}
+
 button {
   cursor: pointer;
 }
@@ -77,7 +82,7 @@ option {
 .svg-icon {
   display: block;
   pointer-events: none;
-  width: 1rem;
+  width: 1.3rem;
 }
 
 ul {
@@ -115,16 +120,10 @@ li {
   -ms-user-select: none; /* IE/Edge */
 }
 
-@media (max-width: size.$mobile-breakpoint) {
-  h1 {
-    font-size: 1.1rem;
-  }
-}
-
 .tp__unauthorized {
   height: 100%;
   width: 100%;
-  font-size: 2rem;
+  font-size: var(--font-size-xl);
   color: var(--text-color);
   display: flex;
   justify-content: center;
diff --git a/frontend/scss/_theme.scss b/frontend/scss/_theme.scss
index 157c9b73d..b3826dd69 100644
--- a/frontend/scss/_theme.scss
+++ b/frontend/scss/_theme.scss
@@ -23,7 +23,7 @@ body {
   --mobile-size: size.$mobile-breakpoint;
   --dashboard-mobile-size: size.$dashboard-mobile-breakpoint;
   --sidebar-width-expanded: 160px;
-  --sidebar-width-collapsed: 42px;
+  --sidebar-width-collapsed: 36px;
   --max-view-width: size.$dashboard-mobile-breakpoint;
   --max-table-cell-width: 240px;
   --max-dialog-card-height: 300px;
@@ -51,6 +51,14 @@ body {
   --margin-small: 0.75rem;
   --margin-default: 1rem;
 
+  --font-size-xs: 0.7rem;
+  --font-size-sm: 0.85rem;
+  --font-size-base: 0.9rem;
+  --font-size-norm: 1rem;
+  --font-size-md: 1.1rem;
+  --font-size-lg: 1.2rem;
+  --font-size-xl: 1.5rem;
+
   --epg-row-height: 4rem;
   --epg-header-height: 2rem;
   --epg-channels-width: 300px;
@@ -59,29 +67,41 @@ body {
   --tag-padding: 0.3rem 0.5rem;
   --tag-border-radius: 0.5rem;
   --icon-button-border-radius: 4px;
-  --theme-palette-contrast-base: #000000;
-  --theme-palette-contrast-inverse: #ffffff;
+
+  --source-editor-sidebar-collapsed-width: 2rem;
+  --source-editor-sidebar-expanded-width: 6rem;
+
+  --dashboard-card-icon-width: 3rem;
 }
 
 @media (max-width: size.$mobile-breakpoint) {
   :root,
   body {
-    --gap-small: 0.2rem;
-    --gap-default: 0.3rem;
-    --gap-large: 0.5rem;
-    --gap-larger: 0.75rem;
+    --gap-mini: 0.1rem;
+    --gap-small: 0.1rem;
+    --gap-default: 0.17rem;
+    --gap-large: 0.33rem;
+    --gap-larger: 0.5rem;
 
-    --padding-micro: 0.2rem;
-    --padding-mini: 0.3rem;
-    --padding-small: 0.5rem;
-    --padding-default: 0.75rem;
-    --padding-large: 1rem;
-    --padding-larger: 1.25rem;
+    --padding-micro: 0.07rem;
+    --padding-mini: 0.17rem;
+    --padding-small: 0.25rem;
+    --padding-default: 0.33rem;
+    --padding-large: 0.5rem;
+    --padding-larger: 0.67rem;
 
-    --margin-micro: 0.2rem;
-    --margin-mini: 0.3rem;
-    --margin-small: 0.5rem;
-    --margin-default: 0.75rem;
+    --margin-micro: 0.07rem;
+    --margin-mini: 0.17rem;
+    --margin-small: 0.25rem;
+    --margin-default: 0.33rem;
+
+    --font-size-xs: 0.75rem;
+    --font-size-sm: 0.8rem;
+    --font-size-base: 0.85rem;
+    --font-size-norm: 0.9rem;
+    --font-size-md: 0.95rem;
+    --font-size-lg: 1.05rem;
+    --font-size-xl: 1.15rem;
 
     --epg-row-height: 3rem;
     --epg-header-height: 1.5rem;
@@ -91,6 +111,9 @@ body {
 
 :root,
 body {
+  --theme-palette-contrast-base: #000000;
+  --theme-palette-contrast-inverse: #ffffff;
+
   --theme-palette-surface: var(--theme-palette-neutral-surface-940);
   --theme-palette-surface-soft: var(--theme-palette-neutral-surface-920);
   --theme-palette-surface-muted: var(--theme-palette-neutral-surface-900);
@@ -480,17 +503,9 @@ body {
   --text-button-primary-hover-background-color: var(--theme-brand-primary-hover-strong);
   --text-button-primary-hover-color: var(--theme-brand-text-inverse);
   --text-button-secondary-background-color: var(--theme-brand-secondary-soft);
-  --text-button-secondary-color: color-mix(
-    in srgb,
-    var(--theme-brand-danger) 72%,
-    var(--theme-brand-text-inverse)
-  );
+  --text-button-secondary-color: color-mix(in srgb, var(--theme-brand-danger) 72%, var(--theme-brand-text-inverse));
   --text-button-secondary-hover-background-color: var(--theme-brand-secondary-hover);
-  --text-button-secondary-hover-color: color-mix(
-    in srgb,
-    var(--theme-brand-danger-strong) 74%,
-    var(--theme-brand-text-inverse)
-  );
+  --text-button-secondary-hover-color: color-mix(in srgb, var(--theme-brand-danger-strong) 74%, var(--theme-brand-text-inverse));
   --text-button-tertiary-background-color: var(--theme-brand-tertiary-surface);
   --text-button-tertiary-color: var(--theme-brand-tertiary-title);
   --text-button-tertiary-hover-background-color: var(--theme-brand-tertiary-hover);
diff --git a/frontend/scss/app/_app.scss b/frontend/scss/app/_app.scss
index c8b3fa397..e23e0d924 100644
--- a/frontend/scss/app/_app.scss
+++ b/frontend/scss/app/_app.scss
@@ -29,9 +29,6 @@
       padding: 0 var(--padding-large);
       align-items: center;
       overflow: hidden;
-      @media (max-width: size.$mobile-breakpoint) {
-        padding: 0 var(--padding-micro);
-      }
     }
 
     &__body > .tp__panel {
diff --git a/frontend/scss/app/components/_field_explanation.scss b/frontend/scss/app/components/_field_explanation.scss
index e7414f936..9cd690c02 100644
--- a/frontend/scss/app/components/_field_explanation.scss
+++ b/frontend/scss/app/components/_field_explanation.scss
@@ -10,7 +10,7 @@
         padding: 1rem;
         border-radius: 8px;
         font-family: 'JetBrains Mono', 'Fira Code', monospace;
-        font-size: 0.9rem;
+        font-size: var(--font-size-base);
         overflow-x: auto;
         margin: 1rem 0;
         border: 1px solid var(--field-explanation-code-border-color);
diff --git a/frontend/scss/app/components/_filter.scss b/frontend/scss/app/components/_filter.scss
index 3b0b6da03..797f96f72 100644
--- a/frontend/scss/app/components/_filter.scss
+++ b/frontend/scss/app/components/_filter.scss
@@ -53,7 +53,7 @@
 
   .bracket {
       font-weight: bold;
-      font-size: 1.1rem;
+      font-size: var(--font-size-md);
   }
 
   .bracket-1 { color: var(--code-bracket-1-color); }
diff --git a/frontend/scss/app/components/_form.scss b/frontend/scss/app/components/_form.scss
index d68be5df7..93b80460b 100644
--- a/frontend/scss/app/components/_form.scss
+++ b/frontend/scss/app/components/_form.scss
@@ -6,7 +6,7 @@
   white-space: nowrap;
   vertical-align: middle;
   color: var(--text-color);
-  font-size: 1.1rem;
+  font-size: var(--font-size-md);
 
   @if $flex {
     flex: $flex;
diff --git a/frontend/scss/app/components/_input.scss b/frontend/scss/app/components/_input.scss
index 20b87038c..bf6349234 100644
--- a/frontend/scss/app/components/_input.scss
+++ b/frontend/scss/app/components/_input.scss
@@ -39,7 +39,7 @@
     padding-left: 2px;
     color: var(--modest-text-color);
     font-weight: bold;
-    font-size: 1rem;
+    font-size: var(--font-size-norm);
   }
 }
 
@@ -49,7 +49,7 @@ input {
   box-sizing: border-box;
   width: 100%;
   font-family: inherit;
-  font-size: 1.1rem;
+  font-size: var(--font-size-md);
   line-height: 1.5rem;
   border: none;
   color: var(--text-color);
diff --git a/frontend/scss/app/components/_keyvalue_editor.scss b/frontend/scss/app/components/_keyvalue_editor.scss
index 1027a854e..1528d5909 100644
--- a/frontend/scss/app/components/_keyvalue_editor.scss
+++ b/frontend/scss/app/components/_keyvalue_editor.scss
@@ -12,7 +12,7 @@
   }
 
   label{
-    font-size: 1.1rem;
+    font-size: var(--font-size-md);
   }
   &__inputs {
     display: flex;
diff --git a/frontend/scss/app/components/_login.scss b/frontend/scss/app/components/_login.scss
index c01231e8a..cbdf2d0c7 100644
--- a/frontend/scss/app/components/_login.scss
+++ b/frontend/scss/app/components/_login.scss
@@ -69,7 +69,7 @@
     &-title {
       color: var(--text-color);
       padding: 8px;
-      font-size: 1.5rem;
+      font-size: var(--font-size-xl);
       font-weight: bolder;
     }
     &-logo {
@@ -99,7 +99,7 @@
     justify-content: center;
     align-items: center;
     color: var(--card-color);
-    font-size: 0.8rem;
+    font-size: var(--font-size-sm);
     position: relative;
     z-index: 1;
   }
diff --git a/frontend/scss/app/components/_mapper_script.scss b/frontend/scss/app/components/_mapper_script.scss
index fa58a5b0d..ae1b43276 100644
--- a/frontend/scss/app/components/_mapper_script.scss
+++ b/frontend/scss/app/components/_mapper_script.scss
@@ -62,7 +62,7 @@
 
   .bracket {
       font-weight: bold;
-      font-size: 1.1rem;
+      font-size: var(--font-size-md);
   }
 
   .bracket-1 { color: var(--code-bracket-1-color); }
diff --git a/frontend/scss/app/components/_preferences.scss b/frontend/scss/app/components/_preferences.scss
index cb593c2eb..bf1680b3a 100644
--- a/frontend/scss/app/components/_preferences.scss
+++ b/frontend/scss/app/components/_preferences.scss
@@ -29,9 +29,6 @@
     @media (max-width: var(--media-size-mobile)) {
       flex-flow: row;
     }
-    //max-width: 48px;
-    //min-width: 48px;
-    //width: 48px;
     @media (max-width: var(--media-size-mobile)) {
       max-width: 32px;
       min-width: 32px;
diff --git a/frontend/scss/app/components/_sidebar.scss b/frontend/scss/app/components/_sidebar.scss
index d419289b3..bda1608d3 100644
--- a/frontend/scss/app/components/_sidebar.scss
+++ b/frontend/scss/app/components/_sidebar.scss
@@ -99,10 +99,6 @@
       min-width: var(--sidebar-width-collapsed);
       max-width: var(--sidebar-width-collapsed);
       width: var(--sidebar-width-collapsed);
-
-      .tp__app-sidebar__content {
-        padding: var(--padding-mini) var(--padding-micro);
-      }
     }
 
     &.collapsed {
@@ -132,7 +128,6 @@
 
     .tp__app-sidebar__header {
       justify-content: center;
-      padding: var(--padding-micro);
       gap: var(--gap-small);
     }
 
diff --git a/frontend/scss/app/components/_table.scss b/frontend/scss/app/components/_table.scss
index 79b7f6c37..527db841a 100644
--- a/frontend/scss/app/components/_table.scss
+++ b/frontend/scss/app/components/_table.scss
@@ -30,7 +30,7 @@
           position: sticky;
           top: 0;
           z-index: 2;
-          font-size: 1.1rem;
+          font-size: var(--font-size-md);
           font-weight: bold;
           //text-align: center;
           padding: var(--padding-mini);
diff --git a/frontend/scss/app/components/_tabset.scss b/frontend/scss/app/components/_tabset.scss
index 3349c7b38..fa02b2b71 100644
--- a/frontend/scss/app/components/_tabset.scss
+++ b/frontend/scss/app/components/_tabset.scss
@@ -92,7 +92,7 @@
   flex: 1;
   padding: 0.6rem 1.2rem;
   font-weight: 500;
-  font-size: 0.95rem;
+  font-size: var(--font-size-base);
   text-align: center;
   cursor: pointer;
   background: none;
diff --git a/frontend/scss/app/components/_tag_list.scss b/frontend/scss/app/components/_tag_list.scss
index 584512c45..3d1df2c2c 100644
--- a/frontend/scss/app/components/_tag_list.scss
+++ b/frontend/scss/app/components/_tag_list.scss
@@ -8,7 +8,7 @@
     box-sizing: border-box;
     width: 100%;
     font-family: inherit;
-    font-size: 1.1rem;
+    font-size: var(--font-size-md);
     line-height: 1.5rem;
     border: none;
     color: var(--text-color);
diff --git a/frontend/scss/app/components/_text_button.scss b/frontend/scss/app/components/_text_button.scss
index fe16c70b5..3cad61cdd 100644
--- a/frontend/scss/app/components/_text_button.scss
+++ b/frontend/scss/app/components/_text_button.scss
@@ -16,7 +16,7 @@
   gap: var(--gap-default);
   padding: 0 var(--padding-default);
   font-weight: bold;
-  font-size: 1rem;
+  font-size: var(--font-size-norm);
   svg {
     width: 1.5rem;
   }
diff --git a/frontend/scss/app/components/_titled_card.scss b/frontend/scss/app/components/_titled_card.scss
index c34800d2e..29d213871 100644
--- a/frontend/scss/app/components/_titled_card.scss
+++ b/frontend/scss/app/components/_titled_card.scss
@@ -9,7 +9,7 @@
     left: 15px;
     padding: 0 4px;
     z-index: 2;
-    font-size: 14px;
+    font-size: var(--font-size-sm);
     line-height: 1.2;
     background: var(--titled-card-title-background);
   }
diff --git a/frontend/scss/app/components/_toastr.scss b/frontend/scss/app/components/_toastr.scss
index dc6422915..bf7574631 100644
--- a/frontend/scss/app/components/_toastr.scss
+++ b/frontend/scss/app/components/_toastr.scss
@@ -15,7 +15,7 @@
   align-items: center;
   padding: var(--padding-default) var(--padding-large);
   border-radius: var(--border-radius);
-  font-size: 1.1rem;
+  font-size: var(--font-size-md);
   box-shadow: var(--toastr-shadow);
   animation: fadeIn 0.3s ease-out;
 
diff --git a/frontend/scss/app/components/api_user/_api_user_view.scss b/frontend/scss/app/components/api_user/_api_user_view.scss
index e31df2035..baae760d0 100644
--- a/frontend/scss/app/components/api_user/_api_user_view.scss
+++ b/frontend/scss/app/components/api_user/_api_user_view.scss
@@ -71,7 +71,7 @@
     overflow: auto;
 
     .tp__collapse-panel__header {
-      font-size: 1.6rem;
+      font-size: var(--font-size-xl);
       padding: 0;
        span {
          pointer-events: auto;
diff --git a/frontend/scss/app/components/config/_api_config.scss b/frontend/scss/app/components/config/_api_config.scss
index 67a5dafa9..11f846b67 100644
--- a/frontend/scss/app/components/config/_api_config.scss
+++ b/frontend/scss/app/components/config/_api_config.scss
@@ -15,7 +15,7 @@
     overflow: auto;
 
     &-title {
-      font-size: 1.5rem;
+      font-size: var(--font-size-xl);
       color: var(--modest-text-color);
     }
   }
diff --git a/frontend/scss/app/components/config/_config_view.scss b/frontend/scss/app/components/config/_config_view.scss
index 8fcb434e7..3f7a36b77 100644
--- a/frontend/scss/app/components/config/_config_view.scss
+++ b/frontend/scss/app/components/config/_config_view.scss
@@ -72,11 +72,6 @@
     gap: var(--gap-large);
     background-color: var(--sub-card-background-color);
     overflow: hidden;
-
-    h1 {
-      font-size: 1.2rem;
-      font-weight: bold;
-    }
   }
 
   &__cols-2,
@@ -116,7 +111,7 @@
   &__title {
     display: none;
     color: var(--modest-text-color);
-    font-size: 1.5rem;
+    font-size: var(--font-size-xl);
     margin-bottom: var(--margin-default);
     @media (max-width: size.$mobile-breakpoint) {
       display: block;
@@ -232,7 +227,7 @@
   .tp__collapse-panel {
     &__header {
       padding: var(--padding-micro) 0;
-      font-size: 1.1rem;
+      font-size: var(--font-size-md);
     }
 
     &__body {
@@ -301,7 +296,7 @@
     gap: var(--gap-default);
 
     &-item {
-      font-size: 1.1rem;
+      font-size: var(--font-size-md);
       color: var(--text-color);
     }
   }
diff --git a/frontend/scss/app/components/config/_local_library_config.scss b/frontend/scss/app/components/config/_local_library_config.scss
index 6eba22d27..b37e6983d 100644
--- a/frontend/scss/app/components/config/_local_library_config.scss
+++ b/frontend/scss/app/components/config/_local_library_config.scss
@@ -11,7 +11,7 @@
     flex-flow: row;
     gap: var(--gap-default);
     &-item {
-      font-size: 1.1rem;
+      font-size: var(--font-size-md);
       color: var(--text-color);
     }
   }
diff --git a/frontend/scss/app/components/config/_messaging_config.scss b/frontend/scss/app/components/config/_messaging_config.scss
index 4307f5e67..0af8fd0d5 100644
--- a/frontend/scss/app/components/config/_messaging_config.scss
+++ b/frontend/scss/app/components/config/_messaging_config.scss
@@ -13,7 +13,7 @@
 
   h3 {
     margin: var(--gap-small) 0;
-    font-size: 1rem;
+    font-size: var(--font-size-norm);
     color: var(--text-color-secondary);
   }
 }
@@ -22,7 +22,7 @@
   margin-top: var(--gap-small);
   h3 {
     margin: var(--gap-small) 0;
-    font-size: 0.9rem;
+    font-size: var(--font-size-base);
     color: var(--text-color-secondary);
   }
 }
\ No newline at end of file
diff --git a/frontend/scss/app/components/config/_panel_api_config.scss b/frontend/scss/app/components/config/_panel_api_config.scss
index 728acb3e9..33f53206c 100644
--- a/frontend/scss/app/components/config/_panel_api_config.scss
+++ b/frontend/scss/app/components/config/_panel_api_config.scss
@@ -30,7 +30,7 @@
 
   &__input-subtitle {
     color: var(--modest-text-color);
-    font-size: 0.9rem;
+    font-size: var(--font-size-base);
   }
 
   &__input-status {
@@ -87,7 +87,7 @@
     gap: var(--gap-default);
 
     h2 {
-      font-size: 1.05rem;
+      font-size: var(--font-size-md);
       margin: 0;
     }
   }
diff --git a/frontend/scss/app/components/dashboard/_action_card.scss b/frontend/scss/app/components/dashboard/_action_card.scss
index 1ce7108b6..c938c7642 100644
--- a/frontend/scss/app/components/dashboard/_action_card.scss
+++ b/frontend/scss/app/components/dashboard/_action_card.scss
@@ -10,19 +10,18 @@
 
   &__icon {
     fill: inherit;
-    width: 3rem;
-    max-width: 3rem;
-    transform: translateY(-0.5rem);
+    width: var(--dashboard-card-icon-width);
+    max-width: var(--dashboard-card-icon-width);
 
     img {
-      width: 3rem;
-      max-width: 3rem;
+      width: var(--dashboard-card-icon-width);
+      max-width: var(--dashboard-card-icon-width);
     }
     .svg-icon {
-      width: 3rem;
-      height: 3rem;
-      max-width: 3rem;
-      max-height: 3rem;
+      width: var(--dashboard-card-icon-width);
+      height: var(--dashboard-card-icon-width);
+      max-width: var(--dashboard-card-icon-width);
+      max-height: var(--dashboard-card-icon-width);
     }
   }
 
@@ -45,7 +44,7 @@
   &__title {
     color: var(--text-color);
     font-weight: bold;
-    font-size: 1.1rem;
+    font-size: var(--font-size-md);
   }
 
   &__content {
diff --git a/frontend/scss/app/components/dashboard/_stats_view.scss b/frontend/scss/app/components/dashboard/_stats_view.scss
index ce6d15d3e..ae06ad16d 100644
--- a/frontend/scss/app/components/dashboard/_stats_view.scss
+++ b/frontend/scss/app/components/dashboard/_stats_view.scss
@@ -24,13 +24,12 @@
       display: flex;
       flex-flow: row wrap;
       gap: var(--gap-default);
-    }
 
-    &-group-provider {
       @media (max-width: size.$dashboard-mobile-breakpoint) {
-        display: flex;
-        flex-flow: row wrap;
-        gap: var(--gap-default);
+        &-provider {
+          display: flex;
+          flex-flow: row wrap;
+        }
       }
     }
   }
diff --git a/frontend/scss/app/components/dashboard/_status_card.scss b/frontend/scss/app/components/dashboard/_status_card.scss
index a3c686070..d101b6ad8 100644
--- a/frontend/scss/app/components/dashboard/_status_card.scss
+++ b/frontend/scss/app/components/dashboard/_status_card.scss
@@ -7,7 +7,7 @@
   }
   &__body {
     color: var(--text-color);
-    font-size: 1.1rem;
+    font-size: var(--font-size-md);
   }
   &__footer {
     color: var(--modest-text-color);
diff --git a/frontend/scss/app/components/dashboard/_streams_view.scss b/frontend/scss/app/components/dashboard/_streams_view.scss
index d803dee36..931fec1bd 100644
--- a/frontend/scss/app/components/dashboard/_streams_view.scss
+++ b/frontend/scss/app/components/dashboard/_streams_view.scss
@@ -57,7 +57,6 @@
         @media (max-width: size.$dashboard-mobile-breakpoint) {
           display: flex;
           flex-flow: row wrap;
-          gap: var(--gap-large);
         }
       }
     }
@@ -77,7 +76,7 @@
 
 
   &__header {
-    font-size: 1.1rem;
+    font-size: var(--font-size-md);
     color: var(--modest-text-color);
     padding: var(--padding-default) var(--padding-default) 0 var(--padding-default);
   }
@@ -256,7 +255,7 @@
 
   &__stat-label {
     color: var(--tertiary-title-text-color);
-    font-size: 0.72rem;
+    font-size: var(--font-size-xs);
     font-weight: 700;
     text-transform: uppercase;
   }
@@ -265,10 +264,10 @@
     font-weight: 600;
     min-width: 0;
 
-    .tp__toggle-switch {
-      height: 1rem;
-      max-height: 1rem;
-    }
+    //.tp__toggle-switch {
+    //  height: 1rem;
+    //  max-height: 1rem;
+    //}
   }
 
   &__stat-value--ip {
diff --git a/frontend/scss/app/components/playlist/_playlist_explorer.scss b/frontend/scss/app/components/playlist/_playlist_explorer.scss
index 9257fa5ee..8876a4645 100644
--- a/frontend/scss/app/components/playlist/_playlist_explorer.scss
+++ b/frontend/scss/app/components/playlist/_playlist_explorer.scss
@@ -269,7 +269,7 @@ $series-backdrop-mobile-height: 150px;
         background-size: 70%;
         background-position: right top;
         border-radius: var(--border-radius);
-        font-size: 1.2rem;
+        font-size: var(--font-size-lg);
         box-sizing: border-box;
         width: 100%;
         overflow: hidden;
@@ -277,7 +277,6 @@ $series-backdrop-mobile-height: 150px;
           min-height: $series-backdrop-mobile-height;
           max-height: $series-backdrop-mobile-height;
           height: $series-backdrop-mobile-height;
-          font-size: 1rem;
         }
 
         &-backdrop {
@@ -306,7 +305,7 @@ $series-backdrop-mobile-height: 150px;
           max-width: 60%;
           background-size: cover;
           background-position: center;
-          font-size: 1.2rem;
+          font-size: var(--font-size-lg);
           color: var(--series-info-title-color);
           z-index: 1;
         }
@@ -316,10 +315,7 @@ $series-backdrop-mobile-height: 150px;
 
     &__title {
       font-weight: bold;
-      font-size: 2.5rem;
-      @media (max-width: size.$mobile-breakpoint) {
-        font-size: 1.1rem;
-      }
+      font-size: var(--font-size-lg);
 
       color: var(--series-info-title-color);
     }
@@ -338,7 +334,7 @@ $series-backdrop-mobile-height: 150px;
 
       &-title {
         font-weight: bold;
-        font-size: 2rem;
+        font-size: var(--font-size-xl);
       }
     }
   }
diff --git a/frontend/scss/app/components/playlist/_playlist_explorer_view.scss b/frontend/scss/app/components/playlist/_playlist_explorer_view.scss
index c948e1921..bd44ac40f 100644
--- a/frontend/scss/app/components/playlist/_playlist_explorer_view.scss
+++ b/frontend/scss/app/components/playlist/_playlist_explorer_view.scss
@@ -40,7 +40,7 @@
         flex-flow: row;
         align-items: center;
         gap: var(--gap-default);
-        font-size: 1.2rem;
+        font-size: var(--font-size-xl);
     }
     &-label {
       color: var(--modest-text-color);
diff --git a/frontend/scss/app/components/playlist/_playlist_settings_view.scss b/frontend/scss/app/components/playlist/_playlist_settings_view.scss
index aaed3e350..ec5ac5fdb 100644
--- a/frontend/scss/app/components/playlist/_playlist_settings_view.scss
+++ b/frontend/scss/app/components/playlist/_playlist_settings_view.scss
@@ -34,7 +34,7 @@
         flex-flow: row;
         align-items: center;
         gap: var(--gap-default);
-        font-size: 1.2rem;
+        font-size: var(--font-size-lg);
     }
     &-label {
       color: var(--modest-text-color);
diff --git a/frontend/scss/app/components/rbac/_user_management.scss b/frontend/scss/app/components/rbac/_user_management.scss
index 15109b530..f954a2524 100644
--- a/frontend/scss/app/components/rbac/_user_management.scss
+++ b/frontend/scss/app/components/rbac/_user_management.scss
@@ -14,7 +14,6 @@
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(size.$form-grid-cell-width, 1fr));
       max-width: calc(size.$form-max-grid-cells * size.$form-grid-cell-width + 2 * 1rem);
-      gap: var(--gap-large);
       box-sizing: border-box;
 
       @media (max-width: size.$mobile-breakpoint) {
diff --git a/frontend/scss/app/components/setup/_setup.scss b/frontend/scss/app/components/setup/_setup.scss
index 042bc659d..2e8462278 100644
--- a/frontend/scss/app/components/setup/_setup.scss
+++ b/frontend/scss/app/components/setup/_setup.scss
@@ -20,7 +20,7 @@
   overflow: auto;
 
   &__title {
-    font-size: 0.95rem;
+    font-size: var(--font-size-base);
     font-weight: 700;
     color: var(--modest-text-color);
     margin-bottom: var(--padding-small);
@@ -75,7 +75,7 @@
     justify-content: center;
     min-width: 1.6rem;
     height: 1.6rem;
-    font-size: 0.75rem;
+    font-size: var(--font-size-xs);
     border-radius: 999px;
     background: var(--table-header-background-color);
     color: var(--modest-text-color);
@@ -83,7 +83,7 @@
   }
 
   &__label {
-    font-size: 0.9rem;
+    font-size: var(--font-size-base);
     line-height: 1.2;
   }
 }
diff --git a/frontend/scss/app/components/source_editor/_source_editor.scss b/frontend/scss/app/components/source_editor/_source_editor.scss
index cd868bf16..bb4709a7e 100644
--- a/frontend/scss/app/components/source_editor/_source_editor.scss
+++ b/frontend/scss/app/components/source_editor/_source_editor.scss
@@ -8,7 +8,7 @@
    width: 100%;
    height: 100%;
    gap: var(--gap-default);
-   font-size: 1rem;
+   font-size: var(--font-size-norm);
 
    &__header {
       position: relative;
@@ -17,7 +17,7 @@
       box-sizing: border-box;
       width: 100%;
       gap: var(--gap-default);
-      font-size: 1rem;
+      font-size: var(--font-size-norm);
    }
 
    &__content {
@@ -28,7 +28,7 @@
       width: 100%;
       height: 100%;
       gap: var(--gap-default);
-      font-size: 1rem;
+      font-size: var(--font-size-norm);
       overflow: hidden;
    }
 
@@ -36,15 +36,22 @@
       display: flex;
       flex-flow: column;
       box-sizing: border-box;
-      height: 100%;
-      min-height: 0;
       gap: var(--gap-small);
       transition: min-width 0.2s ease, max-width 0.2s ease, width 0.2s ease;
+      height: 100%;
+      min-height: 0;
 
+      &.expanded {
+         min-width: var(--source-editor-sidebar-expanded-width);
+         max-width: var(--source-editor-sidebar-expanded-width);
+         width: var(--source-editor-sidebar-expanded-width);
+         flex: 0 0 var(--source-editor-sidebar-expanded-width);
+      }
       &.collapsed {
-         min-width: 3rem;
-         max-width: 3rem;
-         width: 3rem;
+         min-width: var(--source-editor-sidebar-collapsed-width);
+         max-width: var(--source-editor-sidebar-collapsed-width);
+         width: var(--source-editor-sidebar-collapsed-width);
+         flex: 0 0 var(--source-editor-sidebar-collapsed-width);
       }
 
       &-actions {
@@ -115,7 +122,7 @@
       border-radius: var(--border-radius);
       background-color: var(--card-background-color);
       color: var(--text-color);
-      font-size: 0.85rem;
+      font-size: var(--font-size-sm);
       text-align: center;
       pointer-events: none;
    }
@@ -153,22 +160,8 @@
 
 @media (max-width: size.$mobile-breakpoint) {
    .tp__source-editor {
-      &__content {
-         gap: var(--gap-small);
-      }
 
       &__sidebar {
-         min-width: 3rem;
-         max-width: 3rem;
-         width: 3rem;
-         flex: 0 0 3rem;
-
-         &.expanded {
-            min-width: min(6rem, 30vw);
-            max-width: min(6rem, 30vw);
-            width: min(6rem, 30vw);
-            flex: 0 0 min(6rem, 30vw);
-         }
 
          &-actions {
             justify-content: center;
@@ -180,8 +173,6 @@
             touch-action: pan-y;
 
             .tp__source-editor__brick {
-               padding: var(--padding-small) var(--padding-mini);
-               font-size: 0.85rem;
                word-break: break-word;
             }
          }
diff --git a/frontend/scss/app/components/source_editor/_source_editor_block.scss b/frontend/scss/app/components/source_editor/_source_editor_block.scss
index 7877a4c33..f4a80e0e2 100644
--- a/frontend/scss/app/components/source_editor/_source_editor_block.scss
+++ b/frontend/scss/app/components/source_editor/_source_editor_block.scss
@@ -106,7 +106,7 @@ $port-size: 10px;
   }
 
   &-sub-label {
-    font-size: 0.8rem;
+    font-size: var(--font-size-sm);
     color: var(--modest-text-color);
     text-align: right;
     pointer-events: none;
@@ -255,7 +255,7 @@ $port-size: 10px;
       width: 100%;
       &-label {
         color: var(--modest-text-color);
-        font-size: 0.7rem;
+        font-size: var(--font-size-xs);
         font-weight: bold;
         width: 50%;
         height: 100%;
diff --git a/frontend/scss/main.scss b/frontend/scss/main.scss
index 8c721d271..9363460a2 100644
--- a/frontend/scss/main.scss
+++ b/frontend/scss/main.scss
@@ -10,7 +10,7 @@ body {
   padding: 0;
   font-family: "Montserrat", sans-serif;
   font-weight: normal;
-  font-size: 14px;
+  font-size: var(--font-size-sm);
   background-color: var(--background-color);
   height: 100%;
   max-width: 100vw;
diff --git a/frontend/src/app/components/dashboard/stats_view.rs b/frontend/src/app/components/dashboard/stats_view.rs
index 4ae7a3828..0ebf32079 100644
--- a/frontend/src/app/components/dashboard/stats_view.rs
+++ b/frontend/src/app/components/dashboard/stats_view.rs
@@ -71,8 +71,10 @@ pub fn StatsView(props: &StatsViewProps) -> Html {
                  <h1>{ translate.t("LABEL.STREAMS")}</h1>
                 </div>
                 })}>
-                <div class="tp__stats__body-group">
-                    <StreamsView embedded={true} />
+                <div class="tp__stats__body">
+                  <div class="tp__stats__body-group">
+                     <StreamsView embedded={true} />
+                  </div>
                 </div>
             </CollapsePanel>
             </div>