diff --git a/frontend/resources/styles/common/refactor/design-tokens.scss b/frontend/resources/styles/common/refactor/design-tokens.scss
index 0088956e4..72435730b 100644
--- a/frontend/resources/styles/common/refactor/design-tokens.scss
+++ b/frontend/resources/styles/common/refactor/design-tokens.scss
@@ -229,7 +229,7 @@
   --assets-title-background-color: var(--color-background-primary);
   --assets-item-background-color: var(--color-background-tertiary);
   --assets-item-background-color-hover: var(--color-background-quaternary);
-  --assets-item-name-background-color: var(--db-secondary-80); // TODO: penpot file has a non-existing token
+  --assets-item-name-background-color: var(--color-background-primary);
   --assets-item-name-foreground-color-rest: var(--color-foreground-secondary);
   --assets-item-name-foreground-color: var(--color-foreground-primary);
   --assets-item-name-foreground-color-hover: var(--color-foreground-primary);
@@ -241,6 +241,7 @@
   --assets-component-background-color-disabled: var(--df-secondary;);
   --assets-component-border-color: var(--color-background-tertiary);
   --assets-component-border-selected: var(--color-accent-tertiary);
+  --assets-component-second-border-selected: var(--color-background-primary);
 
   --radio-btns-background-color: var(--color-background-tertiary);
   --radio-btn-background-color-selected: var(--color-background-quaternary);
@@ -434,7 +435,6 @@
   --button-icon-background-color-selected: var(--color-background-primary);
   --button-icon-border-color-selected: var(--color-background-secondary);
 
-  --assets-item-name-background-color: var(--color-background-primary);
   --assets-item-name-foreground-color: var(--color-foreground-primary);
 
   --text-editor-selection-background-color: var(--la-tertiary-70);
diff --git a/frontend/src/app/main/ui/auth.cljs b/frontend/src/app/main/ui/auth.cljs
index 636be2cd6..218fc21ce 100644
--- a/frontend/src/app/main/ui/auth.cljs
+++ b/frontend/src/app/main/ui/auth.cljs
@@ -27,13 +27,16 @@
     (when show-all?
       [:div {:class (stl/css :terms-login)}
        (when show-terms?
-         [:a {:href cf/terms-of-service-uri :target "_blank"} (tr "auth.terms-of-service")])
+         [:a {:href cf/terms-of-service-uri :target "_blank" :class (stl/css :auth-link)}
+          (tr "auth.terms-of-service")])
 
        (when show-all?
-         [:span (dm/str "  " (tr "labels.and") "  ")])
+         [:span {:class (stl/css :and-text)}
+          (dm/str "  " (tr "labels.and") "  ")])
 
        (when show-privacy?
-         [:a {:href cf/privacy-policy-uri :target "_blank"} (tr "auth.privacy-policy")])])))
+         [:a {:href cf/privacy-policy-uri :target "_blank" :class (stl/css :auth-link)}
+          (tr "auth.privacy-policy")])])))
 
 (mf/defc auth
   {::mf/props :obj}
diff --git a/frontend/src/app/main/ui/auth.scss b/frontend/src/app/main/ui/auth.scss
index 3c81a7c43..81e418e9c 100644
--- a/frontend/src/app/main/ui/auth.scss
+++ b/frontend/src/app/main/ui/auth.scss
@@ -49,7 +49,7 @@
   gap: $s-24;
   height: fit-content;
   max-width: $s-412;
-  padding-bottom: $s-8;
+  padding-block-end: $s-8;
   position: relative;
   width: 100%;
 }
@@ -60,33 +60,32 @@
   left: $s-20;
   display: flex;
   justify-content: flex-start;
-  margin-bottom: $s-52;
   width: $s-120;
+  margin-block-end: $s-52;
 
   svg {
     width: $s-120;
     height: $s-40;
-    fill: $df-primary;
-    stroke: $df-primary;
+    fill: var(--main-icon-foreground);
   }
 }
 
 .terms-login {
-  font-size: $fs-11;
-  width: 100%;
+  @include bodySmallTypography;
   display: flex;
   gap: $s-4;
   justify-content: center;
+  width: 100%;
+}
 
-  a {
-    font-weight: $fw700;
-    color: $da-primary;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-  span {
-    border-bottom: $s-1 solid transparent;
-    color: $df-secondary;
+.and-text {
+  border-bottom: $s-1 solid transparent;
+  color: var(--title-foreground-color);
+}
+
+.auth-link {
+  color: var(--link-foreground-color);
+  &:hover {
+    text-decoration: underline;
   }
 }
diff --git a/frontend/src/app/main/ui/hooks.cljs b/frontend/src/app/main/ui/hooks.cljs
index 944d32ac7..bb05d2b1c 100644
--- a/frontend/src/app/main/ui/hooks.cljs
+++ b/frontend/src/app/main/ui/hooks.cljs
@@ -177,8 +177,9 @@
         on-mount
         (fn []
           (let [dom (mf/ref-val ref)]
-            (.setAttribute dom "draggable" true) ;; In firefox it needs to be draggable for problems with event handling.
-                                                 ;; It will stop the drag operation in on-drag-start
+            ;; In firefox it needs to be draggable for problems with event handling.
+            ;; It will stop the drag operation in on-drag-start
+            (.setAttribute dom "draggable" (and draggable? (not disabled)))
 
             ;; Register all events in the (default) bubble mode, so that they
             ;; are captured by the most leaf item. The handler will stop
diff --git a/frontend/src/app/main/ui/workspace/left_header.cljs b/frontend/src/app/main/ui/workspace/left_header.cljs
index 64d8e068d..7fe2d8e3c 100644
--- a/frontend/src/app/main/ui/workspace/left_header.cljs
+++ b/frontend/src/app/main/ui/workspace/left_header.cljs
@@ -72,7 +72,9 @@
          (mf/deps project)
          (fn []
            (close-modals)
-           (st/emit! (dw/go-to-dashboard project))))
+           (st/emit! (dw/set-options-mode :design)
+                     (dw/set-workspace-read-only false)
+                     (dw/go-to-dashboard project))))
 
         nav-to-project
         (mf/use-fn
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
index 4c6fa807c..d99e9dcac 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
@@ -28,7 +28,7 @@
    [app.util.array :as array]
    [app.util.dom :as dom]
    [app.util.dom.dnd :as dnd]
-   [app.util.i18n :as i18n :refer [tr]]
+   [app.util.i18n :as i18n :refer [tr c]]
    [app.util.strings :refer [matches-search]]
    [app.util.timers :as ts]
    [cljs.spec.alpha :as s]
@@ -216,8 +216,8 @@
 (defn create-counter-element
   [asset-count]
   (let [counter-el (dom/create-element "div")]
-    (dom/set-property! counter-el "class" "drag-counter")
-    (dom/set-text! counter-el (str asset-count))
+    (dom/set-property! counter-el "class" (stl/css :drag-counter))
+    (dom/set-text! counter-el (tr "workspace.assets.sidebar.components" (c asset-count)))
     counter-el))
 
 (defn set-drag-image
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
index 1b33dcf6a..bbc0c7d70 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.scss
@@ -45,3 +45,21 @@
 .asset-section.opened {
   margin-bottom: $s-12;
 }
+
+.drag-counter {
+  @include bodySmallTypography;
+  @include textEllipsis;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: calc($s-24 - $s-2);
+  background-color: var(--assets-item-name-background-color);
+  color: var(--assets-item-name-foreground-color);
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: $s-4;
+  padding-inline: $s-4;
+  z-index: 2;
+}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
index 65a109333..72e01e609 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs
@@ -141,14 +141,16 @@
         on-context-menu
         (mf/use-fn
          (mf/deps on-context-menu component-id)
-         (partial on-context-menu component-id))]
+         (partial on-context-menu component-id))
+
+        renaming? (= renaming (:id component))]
 
     [:div {:ref item-ref
            :class (stl/css-case :selected (contains? selected (:id component))
                                 :grid-cell listing-thumbs?
                                 :enum-item (not listing-thumbs?))
            :id (dm/str "component-shape-id-" (:id component))
-           :draggable (not read-only?)
+           :draggable (and (not read-only?) (not renaming?))
            :on-click on-component-click
            :on-double-click on-component-double-click
            :on-context-menu on-context-menu
@@ -160,22 +162,21 @@
      (when (and (some? root-shape)
                 (some? container))
        [:*
-        (let [renaming? (= renaming (:id component))]
-          [:*
-           [:& editable-label
-            {:class (stl/css-case :cell-name listing-thumbs?
-                                  :item-name (not listing-thumbs?)
-                                  :editing renaming?)
-             :value (cfh/merge-path-item (:path component) (:name component))
-             :tooltip (cfh/merge-path-item (:path component) (:name component))
-             :display-value (:name component)
-             :editing renaming?
-             :disable-dbl-click true
-             :on-change do-rename
-             :on-cancel cancel-rename}]
+        [:*
+         [:& editable-label
+          {:class (stl/css-case :cell-name listing-thumbs?
+                                :item-name (not listing-thumbs?)
+                                :editing renaming?)
+           :value (cfh/merge-path-item (:path component) (:name component))
+           :tooltip (cfh/merge-path-item (:path component) (:name component))
+           :display-value (:name component)
+           :editing renaming?
+           :disable-dbl-click true
+           :on-change do-rename
+           :on-cancel cancel-rename}]
 
-           (when ^boolean dragging?
-             [:div {:class (stl/css :dragging)}])])
+         (when ^boolean dragging?
+           [:div {:class (stl/css :dragging)}])]
 
         (when visible?
           [:& cmm/component-item-thumbnail {:file-id file-id
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 f426c5547..1fad7eeb8 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.scss
@@ -35,12 +35,13 @@
     position: absolute;
     left: $s-4;
     bottom: $s-4;
-    height: $s-20;
+    height: calc($s-24 - $s-2);
     width: calc(100% - 2 * $s-4);
-    padding: $s-2;
+    padding: $s-2 $s-6;
     column-gap: $s-4;
-    border-radius: $br-2;
+    border-radius: $br-4;
     background-color: var(--assets-item-name-background-color);
+    border: $s-1 solid transparent;
     color: var(--assets-item-name-foreground-color);
     input {
       @include textEllipsis;
@@ -55,7 +56,7 @@
       height: 100%;
     }
     &.editing {
-      border: $s-1 solid var(--input-border-color-focus);
+      border-color: var(--input-border-color-focus);
       border-radius: $br-4;
       display: flex;
       align-items: center;
@@ -65,12 +66,24 @@
 
   &:hover {
     .cell-name {
-      display: block;
+      display: grid;
+      grid-template-columns: 1fr auto;
     }
   }
 
   &.selected {
-    border: $s-1 solid var(--assets-item-border-color);
+    border: $s-2 solid var(--assets-item-border-color);
+    &::before {
+      content: " ";
+      position: absolute;
+      z-index: $z-index-2;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border: $s-4 solid var(--assets-component-second-border-selected);
+      border-radius: $br-8;
+    }
   }
 }
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
index 9f545aed7..7bcd264a9 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.cljs
@@ -196,6 +196,7 @@
         [:div {:class (stl/css :cap-select)}
          [:& select
           {:default-value (:stroke-cap-start stroke)
+           :dropdown-class (stl/css :stroke-cap-dropdown-start)
            :options stroke-caps-options
            :on-change on-caps-start-change}]]
 
@@ -206,5 +207,6 @@
         [:div {:class (stl/css :cap-select)}
          [:& select
           {:default-value (:stroke-cap-end stroke)
+           :dropdown-class (stl/css :stroke-cap-dropdown)
            :options stroke-caps-options
            :on-change on-caps-end-change}]]])]))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
index b315fc28c..5f49ab167 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/rows/stroke_row.scss
@@ -23,6 +23,19 @@
     .cap-select {
       width: $s-124;
     }
+    .stroke-cap-dropdown,
+    .stroke-cap-dropdown-start {
+      min-width: $s-124;
+      width: fit-content;
+      max-width: $s-252;
+      right: 0;
+      left: unset;
+    }
+
+    .stroke-cap-dropdown-start {
+      left: 0;
+      right: unset;
+    }
     .swap-caps-btn {
       @extend .button-secondary;
       height: $s-32;
diff --git a/frontend/translations/en.po b/frontend/translations/en.po
index 52ee7dd65..498fd2597 100644
--- a/frontend/translations/en.po
+++ b/frontend/translations/en.po
@@ -3711,6 +3711,12 @@ msgstr "Swap component"
 msgid "workspace.options.component.swap.empty"
 msgstr "There are no assets in this library yet"
 
+#: src/app/main/ui/workspace/sidebar/assets/common.cljs
+msgid "workspace.assets.sidebar.components"
+msgid_plural "workspace.assets.sidebar.components"
+msgstr[0] "1 component"
+msgstr[1] "%s components"
+
 #: src/app/main/ui/workspace/sidebar/options/menus/measures.cljs
 msgid "workspace.options.constraints"
 msgstr "Constraints"
diff --git a/frontend/translations/es.po b/frontend/translations/es.po
index 8195efe3b..02f484954 100644
--- a/frontend/translations/es.po
+++ b/frontend/translations/es.po
@@ -3711,6 +3711,12 @@ msgstr "Desvincular todas las tipografías"
 msgid "workspace.libraries.typography"
 msgstr "%s tipografías"
 
+#: src/app/main/ui/workspace/sidebar/assets/common.cljs
+msgid "workspace.assets.sidebar.components"
+msgid_plural "workspace.assets.sidebar.components"
+msgstr[0] "1 componente"
+msgstr[1] "%s componentes"
+
 #: src/app/main/ui/workspace/libraries.cljs
 msgid "workspace.libraries.update"
 msgstr "Actualizar"