diff --git a/frontend/resources/styles/common/refactor/basic-rules.scss b/frontend/resources/styles/common/refactor/basic-rules.scss
index 0a257da60..f057974d0 100644
--- a/frontend/resources/styles/common/refactor/basic-rules.scss
+++ b/frontend/resources/styles/common/refactor/basic-rules.scss
@@ -32,6 +32,12 @@
     background: var(--text-editor-selection-background-color);
     color: var(--text-editor-selection-foreground-color);
   }
+
+  ::placeholder,
+  ::-webkit-input-placeholder {
+    @include bodySmallTypography;
+    color: var(--input-placeholder-color);
+  }
 }
 
 // BUTTONS
@@ -39,7 +45,7 @@
   @include buttonStyle;
   @include flexCenter;
   @include focusPrimary;
-  @include uppercaseTitleTipography;
+  @include headlineSmallTypography;
   background-color: var(--button-primary-background-color-rest);
   border: $s-1 solid var(--button-primary-border-color-rest);
   color: var(--button-primary-foreground-color-rest);
@@ -303,7 +309,7 @@
 }
 
 .input-label {
-  @include uppercaseTitleTipography;
+  @include headlineSmallTypography;
   @include flexCenter;
   width: $s-20;
   padding-left: $s-8;
@@ -401,6 +407,7 @@
     background-color: var(--input-background-color);
   }
   ::placeholder {
+    @include bodySmallTypography;
     color: var(--input-placeholder-color);
   }
   &:hover {
diff --git a/frontend/resources/styles/common/refactor/mixins.scss b/frontend/resources/styles/common/refactor/mixins.scss
index 60f2f1e3d..992380e57 100644
--- a/frontend/resources/styles/common/refactor/mixins.scss
+++ b/frontend/resources/styles/common/refactor/mixins.scss
@@ -116,11 +116,11 @@
 }
 
 @mixin textEllipsis {
+  display: block;
   max-width: 99%;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  display: block;
 }
 
 @mixin twoLineTextEllipsis {
diff --git a/frontend/resources/styles/main/partials/workspace.scss b/frontend/resources/styles/main/partials/workspace.scss
index a387fed48..088add928 100644
--- a/frontend/resources/styles/main/partials/workspace.scss
+++ b/frontend/resources/styles/main/partials/workspace.scss
@@ -68,90 +68,6 @@ $height-palette-max: 80px;
   }
 }
 
-.workspace-context-menu {
-  background-color: $color-white;
-  border-radius: $br3;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
-  left: 740px;
-  position: absolute;
-  top: 40px;
-  width: 240px;
-  z-index: 12;
-
-  li {
-    align-items: center;
-    font-size: $fs14;
-    padding: $size-1 $size-4;
-    cursor: pointer;
-
-    display: flex;
-    justify-content: space-between;
-
-    &.separator {
-      border-top: 1px solid $color-gray-10;
-      padding: 0px;
-      margin: 2px;
-    }
-
-    span {
-      color: $color-gray-60;
-    }
-
-    span.shortcut {
-      color: $color-gray-20;
-      font-size: $fs12;
-    }
-
-    &:hover {
-      background-color: $color-primary-lighter;
-    }
-
-    .submenu-icon {
-      position: absolute;
-      right: 1rem;
-
-      svg {
-        width: 10px;
-        height: 10px;
-      }
-    }
-  }
-
-  .icon-menu-item {
-    display: flex;
-    justify-content: flex-start;
-
-    &:hover {
-      background-color: $color-primary-lighter;
-    }
-
-    span.title {
-      margin-left: 5px;
-    }
-
-    .selected-icon {
-      svg {
-        width: 10px;
-        height: 10px;
-      }
-    }
-
-    .shape-icon {
-      margin-left: 3px;
-      svg {
-        width: 13px;
-        height: 13px;
-      }
-    }
-
-    .icon-wrapper {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      margin: 0;
-    }
-  }
-}
-
 .workspace-content {
   background-color: $color-canvas;
   display: flex;
diff --git a/frontend/src/app/main/ui/components/tab_container.scss b/frontend/src/app/main/ui/components/tab_container.scss
index 86ac4c4f3..7c9b08b52 100644
--- a/frontend/src/app/main/ui/components/tab_container.scss
+++ b/frontend/src/app/main/ui/components/tab_container.scss
@@ -28,7 +28,7 @@
     width: 100%;
     .tab-container-tab-title {
       @include flexCenter;
-      @include uppercaseTitleTipography;
+      @include headlineSmallTypography;
       height: 100%;
       width: 100%;
       padding: 0 $s-8;
diff --git a/frontend/src/app/main/ui/components/title_bar.scss b/frontend/src/app/main/ui/components/title_bar.scss
index 2ff458ded..c6882c4e0 100644
--- a/frontend/src/app/main/ui/components/title_bar.scss
+++ b/frontend/src/app/main/ui/components/title_bar.scss
@@ -19,10 +19,11 @@
 .title,
 .title-only,
 .inspect-title {
-  @include uppercaseTitleTipography;
-  display: flex;
+  @include headlineSmallTypography;
+  display: grid;
   align-items: center;
-  flex-grow: 1;
+  justify-content: flex-start;
+  grid-auto-flow: column;
   height: 100%;
   min-height: $s-32;
   color: var(--title-foreground-color);
@@ -30,7 +31,8 @@
 }
 
 .title-only {
-  margin-left: $s-8;
+  --title-bar-title-margin: #{$s-8};
+  margin-inline-start: var(--title-bar-title-margin);
 }
 
 .inspect-title {
@@ -66,23 +68,6 @@
   }
 }
 
-.title,
-.title-only {
-  @include uppercaseTitleTipography;
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-  height: 100%;
-  min-height: $s-32;
-  color: var(--title-foreground-color);
-  overflow: hidden;
-}
-
-.title-only {
-  --title-bar-title-margin: #{$s-8};
-  margin-inline-start: var(--title-bar-title-margin);
-}
-
 .title-only-icon-gap {
   --title-bar-title-margin: #{$s-12};
 }
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index a8c812c92..72f95e4ec 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -19,6 +19,8 @@ $thumbnail-default-height: $s-168; // Default width
 
 .grid-row {
   display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: calc($s-12 + var(--th-width, #{$thumbnail-default-width}));
   width: 100%;
   gap: $s-24;
 }
diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs
index 8ba1763fe..21f06b71c 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/context_menu.cljs
@@ -652,11 +652,10 @@
 
     [:& dropdown {:show (boolean mdata)
                   :on-close #(st/emit! dw/hide-context-menu)}
-     [:ul
-      {:class (stl/css :workspace-context-menu)
-       :ref dropdown-ref
-       :style {:top top :left left}
-       :on-context-menu prevent-default}
+     [:ul {:class (stl/css :workspace-context-menu)
+           :ref dropdown-ref
+           :style {:top top :left left}
+           :on-context-menu prevent-default}
 
       (case (:kind mdata)
         :shape [:& shape-context-menu {:mdata mdata}]
diff --git a/frontend/src/app/main/ui/workspace/context_menu.scss b/frontend/src/app/main/ui/workspace/context_menu.scss
index 0ce429a5b..94b7060a0 100644
--- a/frontend/src/app/main/ui/workspace/context_menu.scss
+++ b/frontend/src/app/main/ui/workspace/context_menu.scss
@@ -20,6 +20,8 @@
   border: $s-2 solid var(--panel-border-color);
   background-color: var(--menu-background-color);
   z-index: $z-index-4;
+  max-height: 100vh;
+  overflow-y: auto;
 }
 
 .separator {
diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs
index e88013b76..564093850 100644
--- a/frontend/src/app/main/ui/workspace/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/libraries.cljs
@@ -34,6 +34,18 @@
    [okulary.core :as l]
    [rumext.v2 :as mf]))
 
+(def ^:private close-icon
+  (i/icon-xref :close (stl/css :close-icon)))
+
+(def ^:private add-icon
+  (i/icon-xref :add (stl/css :add-icon)))
+
+(def ^:private detach-icon
+  (i/icon-xref :detach (stl/css :detach-icon)))
+
+(def ^:private library-icon
+  (i/icon-xref :library (stl/css :library-icon)))
+
 (def ref:workspace-file
   (l/derived :workspace-file st/state))
 
@@ -185,36 +197,35 @@
                        :on-cancel on-delete-cancel
                        :count-libraries 1}))))]
 
-    [:*
-     [:div {:class (stl/css :section)}
+    [:div {:class (stl/css :libraries-content)}
+     [:div {:class (stl/css :lib-section)}
       [:& title-bar {:collapsable false
                      :title       (tr "workspace.libraries.in-this-file")
                      :class       (stl/css :title-spacing-lib)}]
       [:div {:class (stl/css :section-list)}
 
        [:div {:class (stl/css :section-list-item)}
-        [:div
+        [:div {:class (stl/css :item-content)}
          [:div {:class (stl/css :item-name)} (tr "workspace.libraries.file-library")]
          [:ul {:class (stl/css :item-contents)}
           [:& describe-library-blocks {:components-count (count components)
                                        :graphics-count (count media)
                                        :colors-count (count colors)
                                        :typography-count (count typographies)}]]]
-        [:div
-         (if ^boolean shared?
-           [:input {:class (stl/css :item-unpublish)
-                    :type "button"
-                    :value (tr "common.unpublish")
-                    :on-click unpublish}]
-           [:input {:class (stl/css :item-publish)
-                    :type "button"
-                    :value (tr "common.publish")
-                    :on-click publish}])]]
+        (if ^boolean shared?
+          [:input {:class (stl/css :item-unpublish)
+                   :type "button"
+                   :value (tr "common.unpublish")
+                   :on-click unpublish}]
+          [:input {:class (stl/css :item-publish)
+                   :type "button"
+                   :value (tr "common.publish")
+                   :on-click publish}])]
 
        (for [{:keys [id name] :as library} linked-libraries]
          [:div {:class (stl/css :section-list-item)
                 :key (dm/str id)}
-          [:div
+          [:div {:class (stl/css :item-content)}
            [:div {:class (stl/css :item-name)} name]
            [:ul {:class (stl/css :item-contents)}
             (let [components-count (count (or (ctkl/components-seq (:data library)) []))
@@ -230,24 +241,23 @@
                     :type "button"
                     :data-library-id (dm/str id)
                     :on-click unlink-library}
-           i/detach]])]]
+           detach-icon]])]]
 
-     [:div {:class (stl/css :section)}
+     [:div {:class (stl/css :shared-section)}
       [:& title-bar {:collapsable false
                      :title       (tr "workspace.libraries.shared-libraries")
                      :class       (stl/css :title-spacing-lib)}]
-      [:div {:class (stl/css :libraries-search)}
-       [:& search-bar {:on-change change-search-term
-                       :value search-term
-                       :placeholder (tr "workspace.libraries.search-shared-libraries")
-                       :icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]]
+      [:& search-bar {:on-change change-search-term
+                      :value search-term
+                      :placeholder (tr "workspace.libraries.search-shared-libraries")
+                      :icon (mf/html [:span {:class (stl/css :search-icon)} i/search])}]
 
       (if (seq shared-libraries)
         [:div {:class (stl/css :section-list-shared)}
          (for [{:keys [id name] :as library} shared-libraries]
            [:div {:class (stl/css :section-list-item)
                   :key (dm/str id)}
-            [:div
+            [:div {:class (stl/css :item-content)}
              [:div {:class (stl/css :item-name)} name]
              [:ul {:class (stl/css :item-contents)}
               (let [components-count (dm/get-in library [:library-summary :components :count] 0)
@@ -261,7 +271,7 @@
             [:button {:class (stl/css :item-button-shared)
                       :data-library-id (dm/str id)
                       :on-click link-library}
-             i/add]])]
+             add-icon]])]
 
         (when (empty? shared-libraries)
           [:div {:class (stl/css :section-list-empty)}
@@ -270,7 +280,10 @@
              (tr "workspace.libraries.loading")
 
              (str/empty? search-term)
-             (tr "workspace.libraries.no-shared-libraries-available")
+             [:*
+              [:span {:class (stl/css :empty-state-icon)}
+               library-icon]
+              (tr "workspace.libraries.no-shared-libraries-available")]
 
              :else
              (tr "workspace.libraries.no-matches-for" search-term))]))]]))
@@ -348,107 +361,110 @@
                                (dwl/set-updating-library true)
                                (dwl/sync-file file-id library-id))))))]
 
-    [:div {:class (stl/css :section)}
-     (if (empty? libs-assets)
-       [:div {:class (stl/css :section-list-empty)}
-        (tr "workspace.libraries.no-libraries-need-sync")]
-       [:*
-        [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
+    [:div {:class (stl/css :updates-content)}
+     [:div {:class (stl/css :update-section)}
+      (if (empty? libs-assets)
+        [:div {:class (stl/css :section-list-empty)}
+         [:span {:class (stl/css :empty-state-icon)}
+          library-icon]
+         (tr "workspace.libraries.no-libraries-need-sync")]
+        [:*
+         [:div {:class (stl/css :section-title)} (tr "workspace.libraries.library-updates")]
 
-        [:div {:class (stl/css :section-list)}
-         (for [[{:keys [id name] :as library}
-                exceeded
-                {:keys [components colors typographies]}] libs-assets]
-           [:div {:class (stl/css :section-list-item)
-                  :key (dm/str id)}
-            [:div
-             [:div {:class (stl/css :item-name)} name]
-             [:ul {:class (stl/css :item-contents)} (describe-library
-                                                     (count components)
-                                                     0
-                                                     (count colors)
-                                                     (count typographies))]]
-            [:button {:type "button"
-                      :class (stl/css :item-update)
-                      :disabled updating?
-                      :data-library-id (dm/str id)
-                      :on-click update}
-             (tr "workspace.libraries.update")]
+         [:div {:class (stl/css :section-list)}
+          (for [[{:keys [id name] :as library}
+                 exceeded
+                 {:keys [components colors typographies]}] libs-assets]
+            [:div {:class (stl/css :section-list-item)
+                   :key (dm/str id)}
+             [:div {:class (stl/css :item-content)}
+              [:div {:class (stl/css :item-name)} name]
+              [:ul {:class (stl/css :item-contents)} (describe-library
+                                                      (count components)
+                                                      0
+                                                      (count colors)
+                                                      (count typographies))]]
+             [:button {:type "button"
+                       :class (stl/css :item-update)
+                       :disabled updating?
+                       :data-library-id (dm/str id)
+                       :on-click update}
+              (tr "workspace.libraries.update")]
 
-            [:div {:class (stl/css :libraries-updates)}
-             (when-not (empty? components)
-               [:div {:class (stl/css :libraries-updates-column)}
-                (for [component components]
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (dm/str (:id component))}
-                   (let [component (ctf/load-component-objects (:data library) component)
-                         root-shape (ctf/get-component-root (:data library) component)]
-                     [:*
-                      [:& component-svg {:root-shape root-shape
-                                         :objects (:objects component)}]
-                      [:div {:class (stl/css :name-block)}
-                       [:span {:class (stl/css :item-name)
-                               :title (:name component)}
-                        (:name component)]]])])
-                (when (:components exceeded)
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (uuid/next)}
-                   [:div {:class (stl/css :name-block.ellipsis)}
-                    [:span {:class (stl/css :item-name)} "(...)"]]])])
+             [:div {:class (stl/css :libraries-updates)}
+              (when-not (empty? components)
+                [:div {:class (stl/css :libraries-updates-column)}
+                 (for [component components]
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (dm/str (:id component))}
+                    (let [component (ctf/load-component-objects (:data library) component)
+                          root-shape (ctf/get-component-root (:data library) component)]
+                      [:*
+                       [:& component-svg {:root-shape root-shape
+                                          :class (stl/css :component-svg)
+                                          :objects (:objects component)}]
+                       [:div {:class (stl/css :name-block)}
+                        [:span {:class (stl/css :item-name)
+                                :title (:name component)}
+                         (:name component)]]])])
+                 (when (:components exceeded)
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (uuid/next)}
+                    [:div {:class (stl/css :name-block :ellipsis)}
+                     [:span {:class (stl/css :item-name)} "(...)"]]])])
 
-             (when-not (empty? colors)
-               [:div {:class (stl/css :libraries-updates-column)
-                      :style #js {"--bullet-size" "24px"}}
-                (for [color colors]
-                  (let [default-name (cond
-                                       (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
-                                       (:color color) (:color color)
-                                       :else (:value color))]
-                    [:div {:class (stl/css :libraries-updates-item)
-                           :key (dm/str (:id color))}
-                     [:*
-                      [:& cb/color-bullet {:color {:color (:color color)
-                                                   :id (:id color)
-                                                   :opacity (:opacity color)}}]
-                      [:div {:class (stl/css :name-block)}
-                       [:span {:class (stl/css :item-name)
-                               :title (:name color)}
-                        (:name color)]
-                       (when-not (= (:name color) default-name)
-                         [:span.color-value (:color color)])]]]))
-                (when (:colors exceeded)
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (uuid/next)}
-                   [:div {:class (stl/css :name-block.ellipsis)}
-                    [:span {:class (stl/css :item-name)} "(...)"]]])])
+              (when-not (empty? colors)
+                [:div {:class (stl/css :libraries-updates-column)
+                       :style #js {"--bullet-size" "24px"}}
+                 (for [color colors]
+                   (let [default-name (cond
+                                        (:gradient color) (uc/gradient-type->string (get-in color [:gradient :type]))
+                                        (:color color) (:color color)
+                                        :else (:value color))]
+                     [:div {:class (stl/css :libraries-updates-item)
+                            :key (dm/str (:id color))}
+                      [:*
+                       [:& cb/color-bullet {:color {:color (:color color)
+                                                    :id (:id color)
+                                                    :opacity (:opacity color)}}]
+                       [:div {:class (stl/css :name-block)}
+                        [:span {:class (stl/css :item-name)
+                                :title (:name color)}
+                         (:name color)]
+                        (when-not (= (:name color) default-name)
+                          [:span.color-value (:color color)])]]]))
+                 (when (:colors exceeded)
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (uuid/next)}
+                    [:div {:class (stl/css :name-block.ellipsis)}
+                     [:span {:class (stl/css :item-name)} "(...)"]]])])
 
-             (when-not (empty? typographies)
-               [:div {:class (stl/css :libraries-updates-column)}
-                (for [typography typographies]
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (dm/str (:id typography))}
-                   [:*
-                    [:div {:style {:font-family (:font-family typography)
-                                   :font-weight (:font-weight typography)
-                                   :font-style (:font-style typography)}}
-                     (tr "workspace.assets.typography.sample")]
-                    [:div {:class (stl/css :name-block)}
-                     [:span {:class (stl/css :item-name)
-                             :title (:name typography)}
-                      (:name typography)]]]])
-                (when (:typographies exceeded)
-                  [:div {:class (stl/css :libraries-updates-item)
-                         :key (uuid/next)}
-                   [:div {:class (stl/css :name-block.ellipsis)}
-                    [:span {:class (stl/css :item-name)} "(...)"]]])])]
+              (when-not (empty? typographies)
+                [:div {:class (stl/css :libraries-updates-column)}
+                 (for [typography typographies]
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (dm/str (:id typography))}
+                    [:*
+                     [:div {:style {:font-family (:font-family typography)
+                                    :font-weight (:font-weight typography)
+                                    :font-style (:font-style typography)}}
+                      (tr "workspace.assets.typography.sample")]
+                     [:div {:class (stl/css :name-block)}
+                      [:span {:class (stl/css :item-name)
+                              :title (:name typography)}
+                       (:name typography)]]]])
+                 (when (:typographies exceeded)
+                   [:div {:class (stl/css :libraries-updates-item)
+                          :key (uuid/next)}
+                    [:div {:class (stl/css :name-block.ellipsis)}
+                     [:span {:class (stl/css :item-name)} "(...)"]]])])]
 
-            (when (or (pos? (:components exceeded))
-                      (pos? (:colors exceeded))
-                      (pos? (:typographies exceeded)))
-              [:div {:class (stl/css :libraries-updates-see-all)}
+             (when (or (pos? (:components exceeded))
+                       (pos? (:colors exceeded))
+                       (pos? (:typographies exceeded)))
                [:& lb/link-button {:on-click see-all-assets
-                                   :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}]])])]])]))
-
+                                   :class (stl/css :libraries-updates-see-all)
+                                   :value (str "(" (tr "workspace.libraries.update.see-all-changes") ")")}])])]])]]))
 (mf/defc libraries-dialog
   {::mf/register modal/components
    ::mf/register-as :libraries-dialog}
@@ -491,28 +507,24 @@
 
     [:div {:class (stl/css :modal-overlay) :on-click close-dialog-outside}
      [:div {:class (stl/css :modal-dialog)}
-      [:button {:class (stl/css :close)
+      [:button {:class (stl/css :close-btn)
                 :on-click close-dialog}
-       i/close]
+       close-icon]
       [:div {:class (stl/css :modal-title)}
-       "Libraries"]
-      [:div  {:class (stl/css :modal-content)}
-       [:div {:class (stl/css :libraries-header)}
-        [:& tab-container
-         {:on-change-tab on-tab-change
-          :selected selected-tab
-          :collapsable false}
-         [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
-          [:div {:class (stl/css :libraries-content)}
-           [:& libraries-tab {:file-id file-id
-                              :shared? shared?
-                              :linked-libraries libraries
-                              :shared-libraries shared-libraries}]]]
-         [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
-          [:div {:class (stl/css :updates-content)}
-           [:& updates-tab {:file-id file-id
-                            :file-data file-data
-                            :libraries libraries}]]]]]]]]))
+       (tr "workspace.libraries.libraries")]
+      [:& tab-container
+       {:on-change-tab on-tab-change
+        :selected selected-tab
+        :collapsable false}
+       [:& tab-element {:id :libraries :title (tr "workspace.libraries.libraries")}
+        [:& libraries-tab {:file-id file-id
+                           :shared? shared?
+                           :linked-libraries libraries
+                           :shared-libraries shared-libraries}]]
+       [:& tab-element {:id :updates :title (tr "workspace.libraries.updates")}
+        [:& updates-tab {:file-id file-id
+                         :file-data file-data
+                         :libraries libraries}]]]]]))
 
 (mf/defc v2-info-dialog
   {::mf/register modal/components
@@ -526,7 +538,8 @@
 
     [:div {:class (stl/css :modal-overlay)}
      [:div {:class (stl/css :modal-dialog :modal-v2-info)}
-      [:div {:class (stl/css :modal-title)} "IMPORTANT INFORMATION ABOUT NEW COMPONENTS"]
+      [:div {:class (stl/css :modal-v2-title)}
+       "IMPORTANT INFORMATION ABOUT NEW COMPONENTS"]
       [:div  {:class (stl/css :modal-content)}
        [:div {:class (stl/css :info-content)}
         [:div {:class (stl/css :info-block)}
diff --git a/frontend/src/app/main/ui/workspace/libraries.scss b/frontend/src/app/main/ui/workspace/libraries.scss
index ec759217e..6c430b0d8 100644
--- a/frontend/src/app/main/ui/workspace/libraries.scss
+++ b/frontend/src/app/main/ui/workspace/libraries.scss
@@ -6,248 +6,239 @@
 
 @import "refactor/common-refactor.scss";
 
+// Library modal
 .modal-overlay {
-  @include flexCenter;
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  z-index: $z-index-modal;
-  background-color: var(--overlay-color);
+  @extend .modal-overlay-base;
 }
 
 .modal-dialog {
-  position: relative;
+  @extend .modal-container-base;
+  display: grid;
+  grid-template-rows: auto 1fr;
   height: $s-520;
-  max-height: 100%;
+  max-height: $s-520;
   width: $s-712;
-  padding: $s-32;
-  border-radius: $br-10;
-  background-color: var(--modal-background-color);
-  .close {
-    @extend .button-tertiary;
-    position: absolute;
-    top: $s-8;
-    right: $s-8;
-    width: $s-28;
-    height: $s-32;
-    border-radius: $br-8;
-    svg {
-      @extend .button-icon;
-      stroke: var(--icon-foreground);
-    }
-  }
+  max-width: $s-712;
+}
 
-  .modal-title {
-    @include headlineMediumTypography;
-    margin-bottom: $s-16;
-    color: var(--modal-title-foreground-color);
+.close-btn {
+  @extend .modal-close-btn-base;
+}
+
+.close-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}
+
+.modal-title {
+  @include headlineMediumTypography;
+  margin-block-end: $s-16;
+  color: var(--modal-title-foreground-color);
+}
+
+// Tabs content
+.libraries-content,
+.updates-content {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: $s-32;
+  max-height: $s-400;
+  padding-block-start: $s-16;
+}
+
+.lib-section,
+.update-section,
+.shared-section {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: $s-8;
+}
+
+.shared-section {
+  grid-template-rows: auto auto 1fr;
+}
+
+.title-spacing-lib {
+  margin: 0 0 0 calc(-1 * $s-8);
+}
+
+.section-list,
+.section-list-shared {
+  display: grid;
+  grid-auto-rows: min-content;
+  gap: $s-8;
+  max-height: $s-320;
+  overflow-y: auto;
+}
+
+.section-list-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: $s-8;
+}
+
+.item-content {
+  height: fit-content;
+}
+
+.item-name {
+  @include bodyLargeTypography;
+  color: var(--library-name-foreground-color);
+}
+
+.item-publish,
+.item-unpublish {
+  @extend .button-primary;
+  @include uppercaseTitleTipography;
+  height: $s-32;
+  min-width: $s-92;
+  padding: $s-8 $s-24;
+  margin: 0;
+  border-radius: $br-8;
+}
+
+.item-unpublish {
+  @extend .button-secondary;
+}
+
+.item-button,
+.item-button-shared {
+  @extend .button-secondary;
+  height: $s-32;
+  width: $s-32;
+  margin-inline-start: $s-2;
+  margin-inline-end: $s-8;
+  padding: $s-8;
+}
+
+.detach-icon,
+.add-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+}
+
+.section-list-shared {
+  max-height: $s-272;
+}
+
+.section-title {
+  @include headlineSmallTypography;
+  margin-block-end: $s-12;
+  color: var(--title-foreground-color);
+}
+
+.search-icon {
+  @include flexCenter;
+  width: $s-20;
+  padding: 0 0 0 $s-8;
+  svg {
+    @extend .button-icon-small;
+    stroke: var(--icon-foreground);
   }
 }
 
-.modal-content {
-  height: 100%;
-  .libraries-header {
-    height: 100%;
-  }
-  .libraries-content,
-  .updates-content {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: $s-32;
-    padding-top: $s-24;
-    height: 100%;
-    max-height: $s-400;
-    .section {
-      display: flex;
-      flex-direction: column;
-      height: calc(100% - $s-12);
-      .title-spacing-lib {
-        margin: 0 0 0 calc(-1 * $s-8);
-      }
-      .section-list,
-      .section-list-shared {
-        height: 100%;
-        max-height: $s-320;
-        margin-top: $s-12;
-        overflow: auto;
-        .section-list-item {
-          display: grid;
-          grid-template-columns: 1fr auto;
-          column-gap: $s-12;
-          margin-bottom: $s-24;
-          &:last-child {
-            margin-bottom: $s-8;
-          }
-          .item-name {
-            @include bodyLargeTypography;
-            color: var(--library-name-foreground-color);
-          }
-          .item-publish,
-          .item-unpublish {
-            @extend .button-primary;
-            @include uppercaseTitleTipography;
-            height: $s-32;
-            min-width: $s-92;
-            padding: $s-8 $s-24;
-            border-radius: $br-8;
-          }
+// empty state
+.section-list-empty {
+  @include bodyMediumTypography;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  justify-items: center;
+  gap: $s-8;
+  text-align: center;
+  height: fit-content;
+  margin-block: $s-16;
+  color: var(--modal-title-foreground-color);
+}
 
-          .item-unpublish {
-            @extend .button-secondary;
-          }
-          .item-button,
-          .item-button-shared {
-            @extend .button-secondary;
-            padding: $s-8 $s-24;
-            height: $s-32;
-            border-radius: $br-8;
-            margin-right: $s-2;
-            padding: $s-8;
-            width: $s-32;
-            margin-left: $s-8;
-            svg {
-              @extend .button-icon;
-              stroke: var(--icon-foreground);
-            }
-          }
+.empty-state-icon {
+  @include flexCenter;
+  width: $s-48;
+  height: $s-48;
+  border-radius: $br-circle;
+  background-color: var(--pill-background-color);
+}
 
-          .item-button-icon {
-            width: $s-28;
-            height: $s-28;
-            svg {
-              @extend .button-icon;
-              stroke: var(--icon-foreground);
-            }
-          }
-        }
-      }
-      .section-list-shared {
-        max-height: $s-272;
-      }
+.library-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+  height: $s-32;
+  width: $s-32;
+}
 
-      .section-title {
-        @include bodyLargeTypography;
-        color: var(--modal-title-foreground-color);
-        margin-bottom: $s-12;
-      }
+// Update library tab
+.libraries-updates-see-all {
+  @extend .link;
+  direction: rtl;
+  grid-column: span 3;
+  margin-block-start: $s-8;
+  margin-inline-start: $s-8;
+  margin: 0;
+}
 
-      .libraries-search {
-        margin: $s-12 0;
-        .search-icon {
-          @include flexCenter;
-          padding: 0 0 0 $s-8;
-          width: $s-20;
-          svg {
-            @extend .button-icon-small;
-            stroke: var(--icon-foreground);
-          }
-        }
-      }
-      .section-list-empty {
-        @include bodyLargeTypography;
-        @include flexCenter;
-        color: var(--empty-message-foreground-color);
-
-        svg {
-          @extend .button-icon-small;
-          stroke: var(--icon-foreground);
-          width: $s-16;
-          height: $s-16;
-        }
-      }
-    }
-
-    .libraries-updates-see-all {
-      direction: rtl;
-      grid-column: span 3;
-      margin-top: $s-8;
-      margin-right: $s-8;
-      & input {
-        @extend .link;
-        margin: 0;
-      }
-    }
-  }
-  .updates-content {
-    grid-template-columns: 1fr;
-  }
+.updates-content {
+  grid-template-columns: 1fr;
 }
 
 .libraries-updates {
   display: grid;
   grid-column: span 3;
   grid-template-columns: repeat(auto-fill, minmax($s-160, 1fr));
-  grid-gap: $s-24;
-  font-size: $fs-12;
-  margin-top: $s-16;
-
-  .libraries-updates-item {
-    display: flex;
-    align-items: center;
-    color: var(--library-content-foreground-color);
-
-    &:not(:first-child) {
-      margin-top: $s-8;
-    }
-
-    & svg {
-      background-color: var(--color-canvas);
-      border-radius: $br-4;
-      border: $s-2 solid transparent;
-      height: $s-24;
-      width: $s-24;
-      min-height: $s-24;
-      min-width: $s-24;
-    }
-
-    & .name-block {
-      color: var(--gray-20-color);
-      margin-left: $s-8;
-      width: $s-168;
-
-      &.ellipsis {
-        padding-left: calc($s-24 + #{$s-8});
-      }
-    }
-
-    & .item-name {
-      display: block;
-      margin: 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
+  gap: $s-24;
+  margin-block-start: $s-16;
 }
 
-.modal-v2-info {
-  width: $s-664;
-  height: fit-content;
-  .modal-title {
-    font-size: $fs-18;
-  }
+.libraries-updates-item {
+  @include bodyLargeTypography;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+  gap: $s-8;
+  color: var(--library-content-foreground-color);
+}
+
+.component-svg {
+  background-color: var(--color-canvas);
+  border-radius: $br-4;
+  border: $s-2 solid transparent;
+  height: $s-24;
+  width: $s-24;
+  min-height: $s-24;
+  min-width: $s-24;
+}
+
+.name-block {
+  color: var(--library-content-foreground-color);
+  width: $s-168;
+}
+
+.ellipsis {
+  padding-inline-start: calc($s-24 + #{$s-8});
+}
+
+.item-name {
+  @include textEllipsis;
+  margin: 0;
 }
 
 .item-update {
   @extend .button-primary;
-  @include uppercaseTitleTipography;
+  @include headlineSmallTypography;
   height: $s-32;
   min-width: $s-92;
   padding: $s-8 $s-24;
+  margin-inline-end: $s-2;
   border-radius: $br-8;
-  margin-right: $s-2;
   &:disabled {
     @extend .button-disabled;
   }
 }
 
 .item-contents {
-  @include bodyLargeTypography;
+  @include bodyMediumTypography;
   color: var(--library-content-foreground-color);
   display: flex;
   flex-wrap: wrap;
+  margin: 0;
 }
 
 .element-count {
@@ -259,60 +250,72 @@
   }
 }
 
+// Modal Component v2 update
+.modal-v2-info {
+  width: $s-664;
+  height: fit-content;
+}
+
+.modal-v2-title {
+  @include headlineMediumTypography;
+  color: var(--modal-title-foreground-color);
+}
+
 .info-content {
+  display: grid;
+  grid-template-rows: repeat(4, 1fr);
   margin-top: $s-32;
-  display: flex;
-  flex-direction: column;
   gap: $s-24;
+}
 
-  .info-block {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    column-gap: $s-20;
-    grid-template:
-      "icon title"
-      "icon content";
-  }
+.info-block {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  column-gap: $s-20;
+  grid-template:
+    "icon title"
+    "icon content";
+}
 
-  .info-icon {
-    grid-area: icon;
-    width: $s-52;
-    height: $s-52;
-    margin-top: $s-8;
-    border-radius: $br-circle;
-    background: $db-quaternary;
+.info-icon {
+  grid-area: icon;
+  width: $s-52;
+  height: $s-52;
+  margin-top: $s-8;
+  border-radius: $br-circle;
+  background: $db-quaternary;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  svg {
+    width: $s-32;
+    height: $s-32;
+    fill: var(--icon-foreground-active);
+  }
+}
 
-    svg {
-      width: $s-32;
-      height: $s-32;
-      fill: $da-primary;
-    }
-  }
-  .info-block-title {
-    grid-area: title;
-    font-size: $fs-16;
-    color: $df-primary;
-  }
-  .info-block-content {
-    grid-area: content;
-    font-size: $fs-14;
-    color: $df-secondary;
-    line-height: 1.2;
-  }
+.info-block-title {
+  @include bodyLargeTypography;
+  grid-area: title;
+  color: var(--modal-title-foreground-color);
+}
+
+.info-block-content {
+  @include bodyMediumTypography;
+  grid-area: content;
+  color: var(--library-content-foreground-color);
 }
 
 .info-bottom {
-  margin-top: $s-24;
-  margin-right: $s-8;
   display: flex;
   justify-content: flex-end;
-  .primary-button {
-    @extend .button-primary;
-    @include uppercaseTitleTipography;
-    padding: $s-0 $s-16;
-  }
+  margin-block-start: $s-24;
+  margin-inline-end: $s-8;
+}
+
+.primary-button {
+  @extend .button-primary;
+  @include headlineSmallTypography;
+  padding: $s-0 $s-16;
 }
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 52634fee3..aeafdfeca 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.scss
@@ -18,7 +18,6 @@
 
 .path {
   @include textEllipsis;
-  max-width: 90%;
   margin-left: $s-2;
   text-transform: initial;
   color: var(--title-foreground-color-hover);
diff --git a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
index f3cbb2208..3f1b573df 100644
--- a/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
+++ b/frontend/src/app/main/ui/workspace/text_palette_ctx_menu.cljs
@@ -21,7 +21,7 @@
         shared-libs   (mf/deref refs/workspace-libraries)]
     [:& dropdown {:show show-menu?
                   :on-close close-menu}
-     [:ul {:class (stl/css :workspace-context-menu)}
+     [:ul {:class (stl/css :text-context-menu)}
       (for [[idx cur-library] (map-indexed vector (vals shared-libs))]
         (let [typographies (-> cur-library (get-in [:data :typographies]) vals)]
           [:li
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 e29217eaa..664738562 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
@@ -6,7 +6,7 @@
 
 @import "refactor/common-refactor.scss";
 
-.workspace-context-menu {
+.text-context-menu {
   position: absolute;
   left: auto;
   bottom: var(--height);
diff --git a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
index a7937e670..0c7d6b01b 100644
--- a/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/top_bar.cljs
@@ -31,7 +31,7 @@
      [:div {:class (stl/css :viewport-actions-container)}
       [:div {:class (stl/css :viewport-actions-title)}
        [:& i18n/tr-html {:tag-name "span"
-                         :label "workspace.top-bar.read-only"}]]
+                         :label "workspace.top-bar.view-only"}]]
       [:button {:class (stl/css :done-btn)
                 :on-click handle-close-view-mode} (tr "workspace.top-bar.read-only.done")]]]))
 
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index d4b3e9527..a894c3360 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -5063,8 +5063,8 @@ msgid "workspace.viewport.click-to-close-path"
 msgstr "Click to close the path"
 
 #, markdown
-msgid "workspace.top-bar.read-only"
-msgstr "**Inspect mode** (View Only)"
+msgid "workspace.top-bar.view-only"
+msgstr "**Inspecting mode** (View Only)"
 
 msgid "workspace.top-bar.read-only.done"
 msgstr "Done"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index e2072c81d..8d9831183 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -3633,7 +3633,7 @@ msgstr "%s componentes"
 
 #: src/app/main/ui/workspace/libraries.cljs
 msgid "workspace.libraries.file-library"
-msgstr "Biblioteca de este archivo"
+msgstr "Biblioteca del archivo"
 
 #: src/app/main/ui/workspace/libraries.cljs
 msgid "workspace.libraries.graphics"
@@ -5148,7 +5148,7 @@ msgid "workspace.viewport.click-to-close-path"
 msgstr "Pulsar para cerrar la ruta"
 
 #, markdown
-msgid "workspace.top-bar.read-only"
+msgid "workspace.top-bar.view-only"
 msgstr "**Modo inspección** (View only)"
 
 msgid "workspace.top-bar.read-only.done"