diff --git a/frontend/src/app/main/ui/components/select.cljs b/frontend/src/app/main/ui/components/select.cljs
index d65131317..f3dcc6f6e 100644
--- a/frontend/src/app/main/ui/components/select.cljs
+++ b/frontend/src/app/main/ui/components/select.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.components.select
   (:require
+   [app.common.data.macros :as dm]
    [app.common.uuid :as uuid]
    [app.main.ui.components.dropdown :refer [dropdown]]
    [app.main.ui.icons :as i]
@@ -39,10 +40,10 @@
       [:ul.custom-select-dropdown
        (for [[index item] (map-indexed vector options)]
          (cond
-           (= :separator item) [:hr {:key (str (:id @state) "-" index)}]
+           (= :separator item) [:hr {:key (dm/str (:id @state) "-" index)}]
            :else (let [[value label] (as-key-value item)]
                    [:li.checked-element
-                    {:key (str (:id @state) "-" index)
+                    {:key (dm/str (:id @state) "-" index)
                      :class (when (= value (-> @state :current-value)) "is-selected")
                      :on-click (select-item value)}
                     [:span.check-icon i/tick]
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs
index afe5e95e1..6ab4627ab 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.cljs
+++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs
@@ -7,11 +7,12 @@
 (ns app.main.ui.dashboard.sidebar
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.spec :as us]
    [app.config :as cf]
    [app.main.data.dashboard :as dd]
    [app.main.data.events :as ev]
-   [app.main.data.messages :as dm]
+   [app.main.data.messages :as msg]
    [app.main.data.modal :as modal]
    [app.main.data.users :as du]
    [app.main.refs :as refs]
@@ -99,7 +100,7 @@
         on-drop-success
         (mf/use-callback
          (mf/deps (:id item))
-         (st/emitf (dm/success (tr "dashboard.success-move-file"))
+         (st/emitf (msg/success (tr "dashboard.success-move-file"))
                    (dd/go-to-files (:id item))))
 
         on-drop
@@ -172,7 +173,7 @@
 
     [:form.sidebar-search
      [:input.input-text
-      {:key :images-search-box
+      {:key "images-search-box"
        :id "search-input"
        :type "text"
        :placeholder (tr "dashboard.search-placeholder")
@@ -213,11 +214,11 @@
       [:span.team-text (tr "dashboard.your-penpot")]]
 
      (for [team (remove :is-default (vals teams))]
-       [:* {:key (:id team)}
-        [:li.team-name {:on-click (partial team-selected (:id team))}
-         [:span.team-icon
-          [:img {:src (cf/resolve-team-photo-url team)}]]
-         [:span.team-text {:title (:name team)} (:name team)]]])
+       [:li.team-name {:on-click (partial team-selected (:id team))
+                       :key (dm/str (:id team))}
+        [:span.team-icon
+         [:img {:src (cf/resolve-team-photo-url team)}]]
+        [:span.team-text {:title (:name team)} (:name team)]])
 
      [:hr]
      [:li.action {:on-click on-create-clicked :data-test "create-new-team"}
@@ -247,13 +248,13 @@
         (fn [{:keys [code] :as error}]
           (condp = code
             :no-enough-members-for-leave
-            (rx/of (dm/error (tr "errors.team-leave.insufficient-members")))
+            (rx/of (msg/error (tr "errors.team-leave.insufficient-members")))
 
             :member-does-not-exist
-            (rx/of (dm/error (tr "errors.team-leave.member-does-not-exists")))
+            (rx/of (msg/error (tr "errors.team-leave.member-does-not-exists")))
 
             :owner-cant-leave-team
-            (rx/of (dm/error (tr "errors.team-leave.owner-cant-leave")))
+            (rx/of (msg/error (tr "errors.team-leave.owner-cant-leave")))
 
             (rx/throw error)))
 
@@ -442,7 +443,7 @@
          (for [item pinned-projects]
            [:& sidebar-project
             {:item item
-             :key (:id item)
+             :key (dm/str (:id item))
              :id (:id item)
              :team-id (:id team)
              :selected? (= (:id item) (:id project))}])]
diff --git a/frontend/src/app/main/ui/hooks/resize.cljs b/frontend/src/app/main/ui/hooks/resize.cljs
index 742066c82..5a09f0a13 100644
--- a/frontend/src/app/main/ui/hooks/resize.cljs
+++ b/frontend/src/app/main/ui/hooks/resize.cljs
@@ -9,6 +9,7 @@
    [app.common.geom.point :as gpt]
    [app.common.logging :as log]
    [app.main.refs :as refs]
+   [app.main.ui.context :as ctx]
    [app.util.dom :as dom]
    [app.util.storage :refer [storage]]
    [rumext.alpha :as mf]))
@@ -23,7 +24,7 @@
 (defn use-resize-hook
   [key initial min-val max-val axis negate? resize-type]
 
-  (let [current-file-id (mf/deref refs/current-file-id)
+  (let [current-file-id (mf/use-ctx ctx/current-file-id)
         size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
         parent-ref (mf/use-ref nil)
 
diff --git a/frontend/src/app/main/ui/measurements.cljs b/frontend/src/app/main/ui/measurements.cljs
index 03c7efc12..08a4cd8d4 100644
--- a/frontend/src/app/main/ui/measurements.cljs
+++ b/frontend/src/app/main/ui/measurements.cljs
@@ -7,11 +7,11 @@
 (ns app.main.ui.measurements
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
    [app.common.math :as mth]
    [app.common.uuid :as uuid]
-   [cuerdas.core :as str]
    [rumext.alpha :as mf]))
 
 ;; ------------------------------------------------
@@ -97,7 +97,7 @@
 
 (mf/defc size-display [{:keys [selrect zoom]}]
   (let [{:keys [x y width height]} selrect
-        size-label (str/fmt "%s x %s" (mth/round width) (mth/round height))
+        size-label (dm/str (mth/round width) " x " (mth/round height))
 
         rect-height (/ size-display-height zoom)
         rect-width (/ (if (<= (count size-label) 9)
@@ -201,7 +201,7 @@
             center-y (+ y1 (/ (- y2 y1) 2))
             distance (gpt/distance (gpt/point x1 y1) (gpt/point x2 y2))]
         (when-not (mth/almost-zero? distance)
-          [:g.distance-line {:key (str "line-%s-%s-%s-%s" x1 y1 x2 y2)}
+          [:g.distance-line {:key (dm/str "line-" x1 "-" y1 "-" x2 "-" y2)}
            [:line
             {:x1 x1
              :y1 y1
@@ -214,7 +214,7 @@
             {:x center-x
              :y center-y
              :zoom zoom
-             :distance (str (mth/round distance) "px")
+             :distance (dm/str (mth/round distance) "px")
              :bounds bounds}]])))))
 
 (mf/defc selection-guides [{:keys [bounds selrect zoom]}]
diff --git a/frontend/src/app/main/ui/shapes/bool.cljs b/frontend/src/app/main/ui/shapes/bool.cljs
index 9d3d41851..6b1b38db0 100644
--- a/frontend/src/app/main/ui/shapes/bool.cljs
+++ b/frontend/src/app/main/ui/shapes/bool.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.shapes.bool
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.main.ui.hooks :refer [use-equal-memo]]
    [app.main.ui.shapes.export :as use]
@@ -45,4 +46,4 @@
                [:> "penpot:bool" {}
                 (for [item (->> (:shapes shape) (mapv #(get childs %)))]
                   [:& shape-wrapper {:shape item
-                                     :key (:id item)}])])])))
+                                     :key (dm/str (:id item))}])])])))
diff --git a/frontend/src/app/main/ui/shapes/frame.cljs b/frontend/src/app/main/ui/shapes/frame.cljs
index 8b6cb854b..0555b8365 100644
--- a/frontend/src/app/main/ui/shapes/frame.cljs
+++ b/frontend/src/app/main/ui/shapes/frame.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.shapes.frame
   (:require
+   [app.common.data.macros :as dm]
    [app.main.ui.shapes.attrs :as attrs]
    [app.util.object :as obj]
    [debug :refer [debug?]]
@@ -13,12 +14,12 @@
 
 (defn frame-clip-id
   [shape render-id]
-  (str "frame-clip-" (:id shape) "-" render-id))
+  (dm/str "frame-clip-" (:id shape) "-" render-id))
 
 (defn frame-clip-url
   [shape render-id]
   (when (= :frame (:type shape))
-    (str "url(#" (frame-clip-id shape render-id) ")")))
+    (dm/str "url(#" (frame-clip-id shape render-id) ")")))
 
 (mf/defc frame-clip-def
   [{:keys [shape render-id]}]
@@ -33,7 +34,7 @@
   (let [shape (obj/get props "shape")]
     (when (:thumbnail shape)
       [:image.frame-thumbnail
-       {:id (str "thumbnail-" (:id shape))
+       {:id (dm/str "thumbnail-" (:id shape))
         :xlinkHref (:thumbnail shape)
         :x (:x shape)
         :y (:y shape)
@@ -63,5 +64,5 @@
 
        (for [item childs]
          [:& shape-wrapper {:shape item
-                            :key (:id item)}])])))
+                            :key (dm/str (:id item))}])])))
 
diff --git a/frontend/src/app/main/ui/shapes/gradients.cljs b/frontend/src/app/main/ui/shapes/gradients.cljs
index 1eb580653..aaee2d529 100644
--- a/frontend/src/app/main/ui/shapes/gradients.cljs
+++ b/frontend/src/app/main/ui/shapes/gradients.cljs
@@ -7,6 +7,7 @@
 (ns app.main.ui.shapes.gradients
   (:require
    [app.common.data :as d]
+   [app.common.data.macros :as dm]
    [app.common.geom.matrix :as gmt]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
@@ -42,7 +43,7 @@
 
     [:> :linearGradient props
      (for [{:keys [offset color opacity]} (:stops gradient)]
-       [:stop {:key (str id "-stop-" offset)
+       [:stop {:key (dm/str id "-stop-" offset)
                :offset (or offset 0)
                :stop-color color
                :stop-opacity opacity}])]))
@@ -90,7 +91,7 @@
                 (add-metadata gradient))]
     [:> :radialGradient props
      (for [{:keys [offset color opacity]} (:stops gradient)]
-       [:stop {:key (str id "-stop-" offset)
+       [:stop {:key (dm/str id "-stop-" offset)
                :offset (or offset 0)
                :stop-color color
                :stop-opacity opacity}])]))
@@ -101,7 +102,8 @@
   (let [attr   (obj/get props "attr")
         shape  (obj/get props "shape")
         id     (obj/get props "id")
-        id     (or id (str (name attr) "_" (mf/use-ctx muc/render-ctx)))
+        id'    (mf/use-ctx muc/render-ctx)
+        id     (or id (dm/str (name attr) "_" id'))
         gradient (get shape attr)
         gradient-props #js {:id id
                             :gradient gradient
diff --git a/frontend/src/app/main/ui/shapes/group.cljs b/frontend/src/app/main/ui/shapes/group.cljs
index 69bc4ee58..083d658e8 100644
--- a/frontend/src/app/main/ui/shapes/group.cljs
+++ b/frontend/src/app/main/ui/shapes/group.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.shapes.group
   (:require
+   [app.common.data.macros :as dm]
    [app.main.ui.context :as muc]
    [app.main.ui.shapes.mask :refer [mask-url clip-url mask-factory]]
    [app.util.object :as obj]
@@ -49,7 +50,7 @@
 
           (for [item childs]
             [:& shape-wrapper {:shape item
-                               :key (:id item)}])]]))))
+                               :key (dm/str (:id item))}])]]))))
 
 
 
diff --git a/frontend/src/app/main/ui/shapes/svg_raw.cljs b/frontend/src/app/main/ui/shapes/svg_raw.cljs
index 42b797be8..68c26f713 100644
--- a/frontend/src/app/main/ui/shapes/svg_raw.cljs
+++ b/frontend/src/app/main/ui/shapes/svg_raw.cljs
@@ -6,6 +6,7 @@
 
 (ns app.main.ui.shapes.svg-raw
   (:require
+   [app.common.data.macros :as dm]
    [app.common.geom.shapes :as gsh]
    [app.main.ui.shapes.attrs :as usa]
    [app.util.object :as obj]
@@ -102,12 +103,12 @@
         svg-root?
         [:& svg-root {:shape shape}
          (for [item childs]
-           [:& shape-wrapper {:shape item :key (:id item)}])]
+           [:& shape-wrapper {:shape item :key (dm/str (:id item))}])]
 
         svg-tag?
         [:& svg-element {:shape shape}
          (for [item childs]
-           [:& shape-wrapper {:shape item :key (:id item)}])]
+           [:& shape-wrapper {:shape item :key (dm/str (:id item))}])]
 
         svg-leaf?
         content
diff --git a/frontend/src/app/main/ui/workspace.cljs b/frontend/src/app/main/ui/workspace.cljs
index decfc7b85..d7284aeef 100644
--- a/frontend/src/app/main/ui/workspace.cljs
+++ b/frontend/src/app/main/ui/workspace.cljs
@@ -103,7 +103,7 @@
          (st/emit! (dw/finalize-page page-id))))))
 
   (when (mf/deref trimmed-page-ref)
-    [:& workspace-content {:key page-id
+    [:& workspace-content {:key (dm/str page-id)
                            :file file
                            :layout layout}]))
 
@@ -153,7 +153,7 @@
 
          (if (and (and file project)
                   (:initialized file))
-           [:& workspace-page {:key (str "page-" page-id)
+           [:& workspace-page {:key (dm/str "page-" page-id)
                                :page-id page-id
                                :file file
                                :layout layout}]
diff --git a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
index e3eb36d45..602115855 100644
--- a/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport/interactions.cljs
@@ -111,8 +111,8 @@
                                     :right "M 6.5 0 l -12 0 l 6 -6 m -6 6 l 6 6"
                                     nil)
 
-                     :open-url (str "M1 -5 L 3 -7 L 7 -3 L 1 3 L -1 1"
-                                    "M-1 5 L -3 7 L -7 3 L -1 -3 L 1 -1")
+                     :open-url (dm/str "M1 -5 L 3 -7 L 7 -3 L 1 3 L -1 1"
+                                       "M-1 5 L -3 7 L -7 3 L -1 -3 L 1 -1")
 
                      nil)
         inv-zoom (/ 1 zoom)]
@@ -232,14 +232,14 @@
                  :fill "var(--color-black)"
                  :fill-opacity 0.3
                  :stroke-width 1
-                 :d (str "M" marker-x " " marker-y " "
-                         "h " width " "
-                         "v " height " "
-                         "h -" width " z"
-                         "M" marker-x " " marker-y " "
-                         "l " width " " height " "
-                         "M" marker-x " " (+ marker-y height) " "
-                         "l " width " -" height " ")}]
+                 :d (dm/str "M" marker-x " " marker-y " "
+                            "h " width " "
+                            "v " height " "
+                            "h -" width " z"
+                            "M" marker-x " " marker-y " "
+                            "l " width " " height " "
+                            "M" marker-x " " (+ marker-y height) " "
+                            "l " width " -" height " ")}]
          [:circle {:cx (+ marker-x (/ width 2))
                    :cy (+ marker-y (/ height 2))
                    :r 8
@@ -279,7 +279,7 @@
                 selected? (contains? selected (:id shape))
                 level (calc-level index (:interactions shape))]
             (when-not selected?
-              [:& interaction-path {:key (str (:id shape) "-" index)
+              [:& interaction-path {:key (dm/str (:id shape) "-" index)
                                     :index index
                                     :level level
                                     :orig-shape shape
@@ -307,7 +307,7 @@
                                  (get objects (:destination interaction)))
                     level (calc-level index (:interactions shape))]
                 [:*
-                  [:& interaction-path {:key (str (:id shape) "-" index)
+                  [:& interaction-path {:key (dm/str (:id shape) "-" index)
                                         :index index
                                         :level level
                                         :orig-shape shape
@@ -321,14 +321,14 @@
                              (= (:overlay-pos-type interaction) :manual))
                     (if (and (some? move-overlay-to)
                              (= move-overlay-index index))
-                      [:& overlay-marker {:key (str "pos" (:id shape) "-" index)
+                      [:& overlay-marker {:key (dm/str "pos" (:id shape) "-" index)
                                           :index index
                                           :orig-shape shape
                                           :dest-shape dest-shape
                                           :position move-overlay-to
                                           :objects objects
                                           :hover-disabled? hover-disabled?}]
-                      [:& overlay-marker {:key (str "pos" (:id shape) "-" index)
+                      [:& overlay-marker {:key (dm/str "pos" (:id shape) "-" index)
                                           :index index
                                           :orig-shape shape
                                           :dest-shape dest-shape