diff --git a/frontend/resources/styles/main/partials/sidebar.scss b/frontend/resources/styles/main/partials/sidebar.scss
index 88b199e3e..ce901a6a4 100644
--- a/frontend/resources/styles/main/partials/sidebar.scss
+++ b/frontend/resources/styles/main/partials/sidebar.scss
@@ -159,11 +159,6 @@
         }
       }
     }
-
-    .assets-bar .tool-window {
-      flex: none;
-      height: auto;
-    }
   }
 
   .empty {
diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs
index 937302741..495ceeec2 100644
--- a/frontend/src/app/main/ui/components/tab_container.cljs
+++ b/frontend/src/app/main/ui/components/tab_container.cljs
@@ -19,7 +19,7 @@
 (mf/defc tab-element
   {::mf/wrap-props false}
   [{:keys [children]}]
-  [:div {:class (stl/css :tab-element)} children])
+  children)
 
 (mf/defc tab-container
   {::mf/wrap-props false}
@@ -41,8 +41,8 @@
                        (when (fn? on-change-tab)
                          (on-change-tab id)))))]
 
-    [:div {:class (stl/css :tab-container)}
-     [:div {:class (dm/str header-class " " (stl/css :tab-container-tabs))}
+    [:section {:class (stl/css :tab-container)}
+     [:header {:class (dm/str header-class " " (stl/css :tab-container-tabs))}
       (when ^boolean collapsable
         [:button
          {:on-click handle-collapse
diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss
index 06ac807eb..c1bd82c11 100644
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ b/frontend/src/app/main/ui/components/tab_container.scss
@@ -7,28 +7,15 @@
 
 .tab-container {
   display: grid;
-  grid-template-rows: auto 1fr;
-  grid-template-columns: 100%;
+  grid-template-rows: $s-32 1fr;
   height: 100%;
-
-  .tab-container-content {
-    overflow-y: auto;
-    overflow-x: hidden;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .tab-element {
-    flex: 1;
-    height: 100%;
-  }
 }
+
 .tab-container-tabs {
   display: flex;
   align-items: center;
   flex-direction: row;
   gap: $s-2;
-  height: $s-32;
   border-radius: $br-8;
   background: var(--color-background-secondary);
   padding: $s-2;
@@ -72,6 +59,7 @@
       }
     }
   }
+
   .collapse-sidebar {
     @include flexCenter;
     @include buttonStyle;
@@ -103,3 +91,10 @@
     }
   }
 }
+
+.tab-container-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+}
\ No newline at end of file
diff --git a/frontend/src/app/main/ui/modal.scss b/frontend/src/app/main/ui/modal.scss
index dc2c0e274..6dd5b4eda 100644
--- a/frontend/src/app/main/ui/modal.scss
+++ b/frontend/src/app/main/ui/modal.scss
@@ -2,7 +2,6 @@
 
 :global(:root) {
   --s-4: 0.25rem;
-  --layer-indentation-size: calc(var(--s-4) * 5);
 }
 
 .modal-wrapper {
diff --git a/frontend/src/app/main/ui/workspace.scss b/frontend/src/app/main/ui/workspace.scss
index a9e8a35a7..478c3164a 100644
--- a/frontend/src/app/main/ui/workspace.scss
+++ b/frontend/src/app/main/ui/workspace.scss
@@ -16,14 +16,16 @@
 
 :global(:root) {
   --s-4: 0.25rem;
-  --layer-indentation-size: calc(var(--s-4) * 5);
+  --layer-indentation-size: calc(var(--s-4) * 6);
 }
 
 .workspace {
   @extend .new-scrollbar;
   width: 100vw;
-  height: 100%;
-  user-select: none;
+  height: 100vh;
+  max-height: 100vh;
+  overflow: auto; // TODO: change to hidden
+  user-select: one;
   display: grid;
   grid-template-areas: "left-sidebar viewport right-sidebar";
   grid-template-rows: 1fr;
diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs
index 25c47f99f..e1019c97a 100644
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.workspace.left-header
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.common.data.macros :as dm]
    [app.common.files.helpers :as cfh]
    [app.common.uuid :as uuid]
    [app.config :as cf]
@@ -724,7 +725,7 @@
 
 (mf/defc left-header
   {::mf/wrap-props false}
-  [{:keys [file layout project page-id]}]
+  [{:keys [file layout project page-id class]}]
   (let [file-id     (:id file)
         file-name   (:name file)
         project-id  (:id project)
@@ -780,7 +781,7 @@
     (mf/with-effect [editing?]
       (when ^boolean editing?
         (dom/select-text! (mf/ref-val input-ref))))
-    [:header {:class (stl/css :workspace-header-left)}
+    [:header {:class (dm/str class " " (stl/css :workspace-header-left))}
      [:a {:on-click go-back
           :class (stl/css :main-icon)} i/logo-icon]
      [:div {:alt (tr "workspace.sitemap")
diff --git a/frontend/src/app/main/ui/workspace/left_header.scss b/frontend/src/app/main/ui/workspace/left_header.scss
index d527a04e9..6b0e5016e 100644
--- a/frontend/src/app/main/ui/workspace/left_header.scss
+++ b/frontend/src/app/main/ui/workspace/left_header.scss
@@ -9,7 +9,6 @@
 .workspace-header-left {
   display: flex;
   align-items: center;
-  height: $s-48;
   padding: $s-8 $s-8 $s-4 $s-8;
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs
index 22201e991..db497e7bd 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar.cljs
@@ -41,6 +41,7 @@
 
         section        (cond (or mode-inspect? (contains? layout :layers)) :layers
                              (contains? layout :assets) :assets)
+
         shortcuts?     (contains? layout :shortcuts)
         show-debug?    (contains? layout :debug-panel)
 
@@ -65,44 +66,54 @@
                                   :global/three-row (and (> size 300) (<= size 400))
                                   :global/four-row  (> size 400))
              :style #js {"--width" (dm/str size "px")}}
-     [:& left-header {:file file :layout layout :project project :page-id page-id}]
+
+     [:& left-header {:file file :layout layout :project project :page-id page-id
+                      :class (stl/css :left-header)}]
+
      [:div {:on-pointer-down on-pointer-down
             :on-lost-pointer-capture on-lost-pointer-capture
             :on-pointer-move on-pointer-move
             :class (stl/css :resize-area)}]
-     [:div {:class (stl/css :settings-bar-inside)}
+     [:*
       (cond
         (true? shortcuts?)
-        [:& shortcuts-container]
+        [:& shortcuts-container {:class (stl/css :settings-bar-content)}]
 
         (true? show-debug?)
-        [:& debug-panel]
+        [:& debug-panel {:class (stl/css :settings-bar-content)}]
 
         :else
-        [:div  {:class (stl/css :tabs-wrapper)}
+        [:div {:class (stl/css  :settings-bar-content)}
          [:& tab-container
           {:on-change-tab on-tab-change
            :selected section
            :collapsable true
            :handle-collapse handle-collapse
            :header-class (stl/css :tab-spacing)}
-          [:& tab-element {:id :layers :title (tr "workspace.sidebar.layers")}
-           [:div {:class (stl/css :layers-tab)
-                  :style #js {"--height" (str size-pages "px")}}
+
+          [:& tab-element {:id :layers
+                           :title (tr "workspace.sidebar.layers")}
+           [:article {:class (stl/css :layers-tab)
+                      :style #js {"--height" (str size-pages "px")}}
+
             [:& sitemap {:layout layout
                          :toggle-pages toggle-pages
                          :show-pages? @show-pages?
                          :size size-pages}]
+
             (when @show-pages?
               [:div {:class (stl/css :resize-area-horiz)
                      :on-pointer-down on-pointer-down-pages
                      :on-lost-pointer-capture on-lost-pointer-capture-pages
                      :on-pointer-move on-pointer-move-pages}])
+
             [:& layers-toolbox {:size-parent size
                                 :size size-pages}]]]
 
+
           (when-not ^boolean mode-inspect?
-            [:& tab-element {:id :assets :title (tr "workspace.toolbar.assets")}
+            [:& tab-element {:id :assets
+                             :title (tr "workspace.toolbar.assets")}
              [:& assets-toolbox]])]])]]))
 
 ;; --- Right Sidebar (Component)
diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss
index e4775f0d7..ced0e7d38 100644
--- a/frontend/src/app/main/ui/workspace/sidebar.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar.scss
@@ -10,52 +10,50 @@ $width-settings-bar: $s-276;
 $width-settings-bar-max: $s-500;
 
 .left-settings-bar {
+  display: grid;
+  grid-template-areas:
+    "header header"
+    "content resize";
+  grid-template-rows: $s-48 1fr;
+  grid-template-columns: 1fr 0;
   position: relative;
   grid-area: left-sidebar;
   min-width: $width-settings-bar;
   max-width: $width-settings-bar-max;
   width: var(--width, $width-settings-bar);
-  height: 100%;
   background-color: var(--panel-background-color);
+  height: 100vh;
+  max-height: 100vh;
 
   .resize-area {
-    position: absolute;
-    right: calc(-1 * $s-8);
-    z-index: $z-index-3;
-    width: $s-8;
-    height: calc(100vh - $s-52);
-    cursor: ew-resize;
-  }
-  .resize-area-horiz {
-    position: absolute;
-    top: calc($s-80 + var(--height, 200px));
-    left: 0;
-    width: 100%;
-    height: $s-12;
-    border-top: $s-2 solid var(--resize-area-border-color);
-    background-color: var(--resize-area-background-color);
-    cursor: ns-resize;
-  }
-  .settings-bar-inside {
-    display: grid;
-    grid-template-columns: 100%;
-    grid-template-rows: 100%;
-    height: calc(100vh - $s-52);
-    overflow: hidden;
-    .tabs-wrapper {
-      .layers-tab {
-        display: grid;
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 100%;
-        height: 100%;
-        overflow: hidden;
-      }
-    }
+    grid-area: resize;
   }
 }
+
+.left-header {
+  grid-area: header;
+}
+
+.settings-bar-content {
+  grid-area: content;
+  right: calc(-1 * $s-8);
+}
+
+
+.resize-area {
+  position: absolute;
+  top: 0;
+  left: unset;
+  z-index: $z-index-3;
+  width: $s-8;
+  cursor: ew-resize;
+  height: 100%;
+}
+
 .tab-spacing {
-  margin: $s-4 $s-8 0 $s-8;
+  margin-inline: $s-8;
 }
+
 .right-settings-bar {
   grid-area: right-sidebar;
   width: $width-settings-bar;
@@ -69,14 +67,25 @@ $width-settings-bar-max: $s-500;
   &.expanded {
     width: var(--width, $width-settings-bar);
   }
-  .resize-area {
-    position: absolute;
-    height: 100%;
-    width: $s-8;
-    z-index: $z-index-3;
-    cursor: ew-resize;
-  }
+
   .settings-bar-inside {
+    display: grid;
+    grid-template-columns: 100%;
+    grid-template-rows: 100%;
+
+    height: calc(100vh - $s-52);
+    overflow: hidden;
     height: calc(100vh - $s-52);
   }
 }
+
+.resize-area-horiz {
+  position: absolute;
+  top: calc($s-80 + var(--height, 200px));
+  left: 0;
+  width: 100%;
+  height: $s-12;
+  border-top: $s-2 solid var(--resize-area-border-color);
+  background-color: var(--resize-area-background-color);
+  cursor: ns-resize;
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index 09118cffa..6d1fe8fe1 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -153,7 +153,7 @@
                                    :option-handler on-section-filter-change
                                    :data-test      "typographies"}]))]
 
-    [:div  {:class (stl/css :assets-bar)}
+    [:article  {:class (stl/css :assets-bar)}
      [:div {:class (stl/css :assets-header)}
       (when-not ^boolean read-only?
         [:button {:class (stl/css :libraries-button)
@@ -190,6 +190,6 @@
      [:& (mf/provider cmm/assets-filters) {:value filters}
       [:& (mf/provider cmm/assets-toggle-ordering) {:value toggle-ordering}
        [:& (mf/provider cmm/assets-toggle-list-style) {:value toggle-list-style}
-        [:div {:class (stl/css :libraries-wrapper)}
+        [:*
          [:& assets-local-library {:filters filters}]
          [:& assets-libraries {:filters filters}]]]]]]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.scss b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
index dd8ebf217..8958a3c9f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.scss
@@ -7,9 +7,11 @@
 @import "refactor/common-refactor.scss";
 
 .assets-bar {
-  position: relative;
+  display: grid;
   height: 100%;
-  overflow: hidden;
+  grid-template-rows: auto 1fr;
+  // TODO: ugly hack :( Fix this! we shouldn't be hardcoding this height
+  max-height: calc(100vh - $s-80);
 }
 
 .libraries-button {
@@ -108,16 +110,6 @@
   @include buttonStyle;
 }
 
-.libraries-wrapper {
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  display: flex;
-  flex-direction: column;
-  padding-left: $s-8;
-  height: calc(100vh - $s-180);
-}
-
 .assets-header {
   padding: $s-8 $s-12 $s-12 $s-12;
 }
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 0044dbcd1..911361ead 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
@@ -6,7 +6,12 @@
 
 @import "refactor/common-refactor.scss";
 .tool-window {
-  margin-bottom: $s-24;
+  margin-block-end: $s-24;
+  padding-inline-start: $s-12;
+  overflow-y: auto;
+  display: grid;
+  grid-auto-rows: max-content;
+  scrollbar-gutter: stable;
 }
 
 .file-name {
@@ -38,13 +43,7 @@
 }
 
 .library-content {
-  display: flex;
-  flex-direction: column;
-  height: calc(100% - $s-36);
   width: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  margin-top: $s-4;
 }
 
 .asset-title {
diff --git a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
index 71adc0d99..1168e8dc2 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/debug.cljs
@@ -8,6 +8,7 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.main.data.workspace :as dw]
    [app.main.store :as st]
    [app.main.ui.icons :as i]
@@ -16,7 +17,7 @@
    [rumext.v2 :as mf]))
 
 (mf/defc debug-panel
-  []
+  [{:keys [class] :as props}]
   (let [on-toggle-enabled
         (mf/use-fn
          (fn [event option]
@@ -30,7 +31,7 @@
          (fn []
            (st/emit! (dw/remove-layout-flag :debug-panel))))]
 
-    [:div {:class (stl/css :debug-panel)}
+    [:div {:class (dm/str class " " (stl/css :debug-panel))}
      [:div {:class (stl/css :panel-title)}
       [:span "Debugging tools"]
       [:div {:class (stl/css :close-button) :on-click handle-close}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
index 4f703090b..68779f911 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layer_item.scss
@@ -74,11 +74,12 @@
 }
 
 .element-list-body {
-  display: flex;
   align-items: center;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  column-gap: $s-4;
   height: $s-32;
   width: calc(100% - (var(--depth) * var(--layer-indentation-size)));
-  padding-right: $s-12;
   cursor: pointer;
 
   &.filtered {
@@ -111,7 +112,7 @@
   width: $s-16;
   height: 100%;
   width: $s-24;
-  padding: 0 $s-8 0 $s-4;
+  padding-inline-start: $s-4;
   svg {
     @extend .button-icon-small;
     stroke: var(--icon-foreground);
@@ -169,7 +170,7 @@
   align-items: center;
   height: 100%;
   width: $s-24;
-  padding: 0 $s-4 0 $s-8;
+  padding-inline-start: $s-8;
 
   svg {
     @extend .button-icon-small;
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index b30643495..4ce3d3196 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -458,7 +458,7 @@
         (mf/use-fn
          #(st/emit! (dw/toggle-focus-mode)))]
 
-    [:div#layers {:class (stl/css :layers)}
+    [:div#layers
      (if (d/not-empty? focus)
        [:div {:class (stl/css :tool-window-bar)}
         [:button {:class (stl/css :focus-title)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.scss b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
index 71289de1a..e46c73d23 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.scss
@@ -6,14 +6,6 @@
 
 @import "refactor/common-refactor.scss";
 
-.layers {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  box-sizing: border-box;
-}
-
 .tool-window-bar {
   display: flex;
   align-items: center;
@@ -246,7 +238,8 @@
 }
 
 .tool-window-content {
-  --calculated-height: calc($s-128 + var(--height, $s-200));
+  // TODO: sass variables are not being interpolated here, find why
+  --calculated-height: calc(128px + var(--height, 200px));
   display: flex;
   flex-direction: column;
   height: calc(100vh - var(--calculated-height));
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 6f7aab290..9f7ea20ca 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
@@ -363,15 +363,13 @@
     }
     .fonts-list {
       @include menuShadow;
-      position: absolute;
-      top: $s-36;
-      left: 0;
+      position: relative;
       display: flex;
       flex-direction: column;
       flex: 1 1 auto;
       min-height: 100%;
-      height: $s-216;
       width: 100%;
+      height: 100%;
       padding: $s-2;
       border-radius: $br-8;
       background-color: var(--dropdown-background-color);
diff --git a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
index 04748ef40..241b88445 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/shortcuts.cljs
@@ -341,7 +341,7 @@
                                  :filter-term     filter-term}]]])))
 
 (mf/defc shortcuts-container
-  []
+  [{:keys [class] :as props}]
   (let [workspace-shortcuts          app.main.data.workspace.shortcuts/shortcuts
         path-shortcuts               app.main.data.workspace.path.shortcuts/shortcuts
         all-workspace-shortcuts      (->> (d/deep-merge path-shortcuts workspace-shortcuts)
@@ -468,7 +468,7 @@
     (mf/with-effect []
       (dom/focus! (dom/get-element "shortcut-search")))
 
-    [:div {:class (stl/css :shortcuts)}
+    [:div {:class (dm/str class " " (stl/css :shortcuts))}
      [:div {:class (stl/css :shortcuts-header)}
       [:div {:class (stl/css :shortcuts-title)} (tr "shortcuts.title")]
       [:div {:class (stl/css :shortcuts-close-button)