diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss
index 12510697f..86cd80653 100644
--- a/frontend/resources/styles/main/partials/sidebar-element-options.scss
+++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss
@@ -768,6 +768,17 @@
   z-index: 10;
 }
 
+.advanced-options-wrapper {
+  position: absolute;
+  width: 100%;
+  padding-right: 1.5rem;
+  padding-left: 0.25rem;
+}
+
+.element-options .advanced-options-wrapper {
+  padding-right: 1rem;
+}
+
 .advanced-options {
   background-color: #303236;
   border-radius: 4px;
diff --git a/frontend/src/app/main/data/workspace/libraries.cljs b/frontend/src/app/main/data/workspace/libraries.cljs
index 00226a92e..60f01316c 100644
--- a/frontend/src/app/main/data/workspace/libraries.cljs
+++ b/frontend/src/app/main/data/workspace/libraries.cljs
@@ -533,20 +533,21 @@
                  :sync-dialog))))))
 
 (defn add-typography
-  [typography]
-  (let [typography (update typography :id #(or % (uuid/next)))]
-    (us/assert ::cp/typography typography)
-    (ptk/reify ::add-typography
-      ptk/WatchEvent
-      (watch [_ state s]
-        (let [rchg {:type :add-typography
-                    :typography (assoc typography :ts (.now js/Date))}
-              uchg {:type :del-typography
-                    :id (:id typography)}]
-          (rx/of (dwc/commit-changes [rchg] [uchg] {:commit-local? true})
-                 #(assoc-in %
-                            [:workspace-local :rename-typography]
-                            (:id typography))))))))
+  ([typography] (add-typography typography true))
+  ([typography edit?]
+   (let [typography (update typography :id #(or % (uuid/next)))]
+     (us/assert ::cp/typography typography)
+     (ptk/reify ::add-typography
+       ptk/WatchEvent
+       (watch [_ state s]
+         (let [rchg {:type :add-typography
+                     :typography (assoc typography :ts (.now js/Date))}
+               uchg {:type :del-typography
+                     :id (:id typography)}]
+           (rx/of (dwc/commit-changes [rchg] [uchg] {:commit-local? true})
+                  #(cond-> %
+                     edit?
+                     (assoc-in [:workspace-local :rename-typography] (:id typography))))))))))
 
 (defn update-typography
   [typography]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
index c2c638a7f..1abd0432a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets.cljs
@@ -391,7 +391,9 @@
 
         handle-delete-typography
         (fn []
-          (st/emit! (dwl/delete-typography (:id @state))))]
+          (st/emit! (dwl/delete-typography (:id @state))))
+
+        editting-id (or (:rename-typography local) (:edit-typography local))]
 
     (mf/use-effect
      (mf/deps local)
@@ -428,8 +430,7 @@
             :on-context-menu #(on-context-menu (:id typography) %)
             :on-change #(handle-change typography %)
             :on-select #(handle-typography-selection typography)
-            :editting? (or (= (:rename-typography local) (:id typography))
-                           (= (:edit-typography local) (:id typography)))
+            :editting? (= editting-id (:id typography))
             :focus-name? (= (:rename-typography local) (:id typography))}])])]))
 
 (defn file-colors-ref
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
index 9e3c803df..a37caa009 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/common.cljs
@@ -19,6 +19,7 @@
     (when visible?
       [:*
        [:div.focus-overlay {:on-click handle-click}]
-       [:div.advanced-options {}
-        children]])))
+       [:div.advanced-options-wrapper
+        [:div.advanced-options {}
+         children]]])))
 
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
index 5a324a0f6..0c7d17768 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/text.cljs
@@ -215,7 +215,7 @@
                      (get typographies (:typography-ref-id values)))
 
 
-        handle-click
+        on-convert-to-typography
         (mf/use-callback
          (mf/deps values)
          (fn [event]
@@ -227,7 +227,7 @@
                  typography (merge ut/default-typography setted-values)
                  typography (generate-typography-name typography)]
              (let [id (uuid/next)]
-               (st/emit! (dwl/add-typography (assoc typography :id id)))
+               (st/emit! (dwl/add-typography (assoc typography :id id) false))
                (run! #(emit-update! % {:typography-ref-id id}) ids)))))
 
         handle-deattach-typography
@@ -251,7 +251,8 @@
     [:div.element-set
      [:div.element-set-title
       [:span label]
-      [:div.add-page {:on-click handle-click} i/close]]
+      (when (not typography)
+        [:div.add-page {:on-click on-convert-to-typography} i/close])]
 
      (cond
        typography