diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.cljs b/frontend/src/app/main/ui/components/context_menu_a11y.cljs
index 21d5bf808..1b8bc1c61 100644
--- a/frontend/src/app/main/ui/components/context_menu_a11y.cljs
+++ b/frontend/src/app/main/ui/components/context_menu_a11y.cljs
@@ -217,9 +217,9 @@
                     :tab-index "0"
                     :on-key-down (fn [event]
                                    (dom/prevent-default event))}
-                   [:div {:class (stl/css :context-menu-action :submenu-back)
-                          :data-no-close true
-                          :on-click exit-submenu}
+                   [:button {:class (stl/css :context-menu-action :submenu-back)
+                             :data-no-close true
+                             :on-click exit-submenu}
                     [:span {:class (stl/css :submenu-icon-back)} i/arrow-refactor]
                     parent-option]]
 
diff --git a/frontend/src/app/main/ui/components/context_menu_a11y.scss b/frontend/src/app/main/ui/components/context_menu_a11y.scss
index f19a4d355..bd4e89fab 100644
--- a/frontend/src/app/main/ui/components/context_menu_a11y.scss
+++ b/frontend/src/app/main/ui/components/context_menu_a11y.scss
@@ -72,6 +72,9 @@
           display: flex;
           align-items: center;
           font-weight: $fw700;
+          background: none;
+          border: none;
+          cursor: pointer;
           .submenu-icon-back svg {
             @extend .button-icon-small;
             stroke: var(--menu-foreground-color);
diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss
index 9de57d692..ed615fa73 100644
--- a/frontend/src/app/main/ui/dashboard/comments.scss
+++ b/frontend/src/app/main/ui/dashboard/comments.scss
@@ -85,17 +85,17 @@
 }
 
 .dropdown {
+  @include menuShadow;
   background-color: $db-tertiary;
   border-radius: $br-8;
   border: $s-1 solid transparent;
   bottom: $s-4;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
   height: 40vh;
   max-height: $s-480;
   min-height: $s-200;
   position: absolute;
   width: 100%;
-  z-index: 12;
+  z-index: $z-index-3;
 
   hr {
     margin: 0;
diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs
index cedfdaf56..f81d194f5 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.cljs
+++ b/frontend/src/app/main/ui/dashboard/fonts.cljs
@@ -113,7 +113,13 @@
         (fn [items]
           (run! on-delete items))
 
-        problematic-fonts? (some :height-warning? (vals @fonts))]
+        problematic-fonts? (some :height-warning? (vals @fonts))
+
+        handle-upload-all
+        (mf/use-callback (mf/deps @fonts) #(on-upload-all (vals @fonts)))
+
+        handle-dismiss-all
+        (mf/use-callback (mf/deps @fonts) #(on-dismiss-all (vals @fonts)))]
 
     (if new-css-system
       [:div {:class (stl/css :dashboard-fonts-upload)}
@@ -144,20 +150,18 @@
             [:div {:class (stl/css :icon)} i/msg-warning]
             [:div {:class (stl/css :content)}
              [:& i18n/tr-html {:tag-name "span"
-                               :label "dashboard.fonts.warning-text"}]]])]
-
-        ]
+                               :label "dashboard.fonts.warning-text"}]]])]]
 
        [:*
         (when (some? (vals @fonts))
           [:div {:class (stl/css :font-item :table-row)}
            [:span (tr "dashboard.fonts.fonts-added" (i18n/c (count (vals @fonts))))]
            [:div {:class (stl/css :table-field :options)}
-            [:div {:class (stl/css :btn-primary)
-                   :on-click #(on-upload-all (vals @fonts)) :data-test "upload-all"}
+            [:button {:class (stl/css :btn-primary)
+                      :on-click handle-upload-all :data-test "upload-all"}
              [:span (tr "dashboard.fonts.upload-all")]]
-            [:div {:class (stl/css :btn-secondary)
-                   :on-click #(on-dismiss-all (vals @fonts)) :data-test "dismiss-all"}
+            [:button {:class (stl/css :btn-secondary)
+                      :on-click handle-dismiss-all :data-test "dismiss-all"}
              [:span (tr "dashboard.fonts.dismiss-all")]]]])
 
         (for [item (sort-by :font-family (vals @fonts))]
@@ -340,19 +344,16 @@
              :on-click #(on-delete-variant (:id item))}
             i/plus]])]
 
-       [:div]
-
        (if @edit?
          [:div {:class (stl/css :table-field :options)}
           [:button
-           {
-            :disabled (str/blank? @state)
+           {:disabled (str/blank? @state)
             :on-click on-save
             :class (stl/css-case :btn-primary true
                                  :btn-disabled (str/blank? @state))}
            (tr "labels.save")]
-          [:span {:class (stl/css :icon :close)
-                  :on-click on-cancel} i/close]]
+          [:button {:class (stl/css :icon :close)
+                    :on-click on-cancel} i/close]]
 
          [:div {:class (stl/css :table-field :options)}
           [:span {:class (stl/css :icon)
@@ -427,7 +428,6 @@
        [:div {:class (stl/css :installed-fonts-header)}
         [:div {:class (stl/css :table-field :family)} (tr "labels.font-family")]
         [:div {:class (stl/css :table-field :variants)} (tr "labels.font-variants")]
-        [:div]
         [:div {:class (stl/css :table-field :search-input)}
          [:input {:placeholder (tr "labels.search-font")
                   :default-value ""
diff --git a/frontend/src/app/main/ui/dashboard/fonts.scss b/frontend/src/app/main/ui/dashboard/fonts.scss
index 7265fa51c..8741a6289 100644
--- a/frontend/src/app/main/ui/dashboard/fonts.scss
+++ b/frontend/src/app/main/ui/dashboard/fonts.scss
@@ -14,6 +14,10 @@
   padding-left: $s-120;
   overflow-y: auto;
   padding-bottom: $s-120;
+
+  .btn-primary {
+    font-size: $fs-11;
+  }
 }
 
 .dashboard-installed-fonts {
@@ -193,6 +197,8 @@
       }
 
       &.close {
+        background: none;
+        border: none;
         svg {
           transform: rotate(45deg);
           fill: $df-secondary;
diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs
index 2241a7239..777517789 100644
--- a/frontend/src/app/main/ui/dashboard/grid.cljs
+++ b/frontend/src/app/main/ui/dashboard/grid.cljs
@@ -431,7 +431,19 @@
            (dom/stop-propagation event)
            (swap! local assoc
                   :edition true
-                  :menu-open false)))]
+                  :menu-open false)))
+
+        handle-key-down
+        (mf/use-callback
+         (mf/deps on-navigate on-select)
+         (fn [event]
+           (dom/stop-propagation event)
+           (when (kbd/enter? event)
+             (on-navigate event))
+           (when (kbd/shift? event)
+             (when (or (kbd/down-arrow? event) (kbd/left-arrow? event) (kbd/up-arrow? event) (kbd/right-arrow? event))
+               (on-select event)) ;; TODO Fix this
+             )))]
 
     (mf/with-effect [selected? local]
       (when (and (not selected?) (:menu-open @local))
@@ -441,19 +453,11 @@
       [:li
        {:class (stl/css-case :grid-item true :project-th true :library library-view?)}
        [:button
-        {:tab-index "0"
-         :class (stl/css-case :selected selected? :library library-view?)
+        {:class (stl/css-case :selected selected? :library library-view?)
          :ref node-ref
          :draggable true
          :on-click on-select
-         :on-key-down (fn [event]
-                        (dom/stop-propagation event)
-                        (when (kbd/enter? event)
-                          (on-navigate event))
-                        (when (kbd/shift? event)
-                          (when (or (kbd/down-arrow? event) (kbd/left-arrow? event) (kbd/up-arrow? event) (kbd/right-arrow? event))
-                            (on-select event)) ;; TODO Fix this
-                          ))
+         :on-key-down handle-key-down
          :on-double-click on-navigate
          :on-drag-start on-drag-start
          :on-context-menu on-menu-click}
diff --git a/frontend/src/app/main/ui/dashboard/grid.scss b/frontend/src/app/main/ui/dashboard/grid.scss
index 096ef6903..cd64a5cd7 100644
--- a/frontend/src/app/main/ui/dashboard/grid.scss
+++ b/frontend/src/app/main/ui/dashboard/grid.scss
@@ -170,7 +170,7 @@
   width: $s-32;
   height: $s-32;
   background-color: $da-tertiary;
-  border-radius: 50%;
+  border-radius: $br-circle;
   color: $db-secondary;
   font-size: $fs-16;
   display: flex;
diff --git a/frontend/src/app/main/ui/dashboard/projects.cljs b/frontend/src/app/main/ui/dashboard/projects.cljs
index f84f16006..9213bebb7 100644
--- a/frontend/src/app/main/ui/dashboard/projects.cljs
+++ b/frontend/src/app/main/ui/dashboard/projects.cljs
@@ -257,9 +257,9 @@
         toggle-pin
         (mf/use-fn
          (mf/deps project)
-          (fn [event]
-            (dom/stop-propagation event)
-            (st/emit! (dd/toggle-project-pin project))))
+         (fn [event]
+           (dom/stop-propagation event)
+           (st/emit! (dd/toggle-project-pin project))))
 
         on-menu-click
         (mf/use-fn
@@ -324,7 +324,23 @@
            (st/emit! (dd/fetch-files {:project-id project-id})
                      (dd/fetch-recent-files (:id team))
                      (dd/fetch-projects (:id team))
-                     (dd/clear-selected-files))))]
+                     (dd/clear-selected-files))))
+
+        handle-create-click
+        (mf/use-callback
+         (mf/deps on-create-click)
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-create-click event))))
+
+
+        handle-menu-click
+        (mf/use-callback
+         (mf/deps on-menu-click)
+         (fn [event]
+           (when (kbd/enter? event)
+             (dom/stop-propagation event)
+             (on-menu-click event))))]
 
     (if new-css-system
       [:article {:class (stl/css-case :dashboard-project-row true :first first?)}
@@ -375,10 +391,7 @@
             :alt (tr "dashboard.new-file")
             :aria-label (tr "dashboard.new-file")
             :data-test "project-new-file"
-            :tab-index "0"
-            :on-key-down (fn [event]
-                           (when (kbd/enter? event)
-                             (on-create-click event)))}
+            :on-key-down handle-create-click}
            i/close]
 
           [:button
@@ -387,11 +400,7 @@
             :alt (tr "dashboard.options")
             :aria-label  (tr "dashboard.options")
             :data-test "project-options"
-            :tab-index "0"
-            :on-key-down (fn [event]
-                           (when (kbd/enter? event)
-                             (dom/stop-propagation event)
-                             (on-menu-click event)))}
+            :on-key-down handle-menu-click}
            i/actions]]]]
 
        [:& line-grid
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.cljs b/frontend/src/app/main/ui/dashboard/sidebar.cljs
index 199463098..7a2c3a50e 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.cljs
+++ b/frontend/src/app/main/ui/dashboard/sidebar.cljs
@@ -47,12 +47,13 @@
         selected-project (:selected-project dstate)
         edit-id          (:project-for-edit dstate)
 
-        local            (mf/use-state
+        local*           (mf/use-state
                           {:menu-open false
                            :menu-pos nil
                            :edition? (= (:id item) edit-id)
                            :dragging? false})
 
+        local             @local*
         on-click
         (mf/use-callback
          (mf/deps item)
@@ -78,15 +79,15 @@
          (fn [event]
            (let [position (dom/get-client-position event)]
              (dom/prevent-default event)
-             (swap! local assoc
+             (swap! local* assoc
                     :menu-open true
                     :menu-pos position))))
 
         on-menu-close
-        (mf/use-callback #(swap! local assoc :menu-open false))
+        (mf/use-callback #(swap! local* assoc :menu-open false))
 
         on-edit-open
-        (mf/use-callback #(swap! local assoc :edition? true))
+        (mf/use-callback #(swap! local* assoc :edition? true))
 
         on-edit
         (mf/use-callback
@@ -94,7 +95,7 @@
          (fn [name]
            (st/emit! (-> (dd/rename-project (assoc item :name name))
                          (with-meta {::ev/origin "dashboard:sidebar"})))
-           (swap! local assoc :edition? false)))
+           (swap! local* assoc :edition? false)))
 
         on-drag-enter
         (mf/use-callback
@@ -104,7 +105,7 @@
              (dom/prevent-default e)
              (when-not (dnd/from-child? e)
                (when (not= selected-project (:id item))
-                 (swap! local assoc :dragging? true))))))
+                 (swap! local* assoc :dragging? true))))))
 
         on-drag-over
         (mf/use-callback
@@ -116,7 +117,7 @@
         (mf/use-callback
          (fn [e]
            (when-not (dnd/from-child? e)
-             (swap! local assoc :dragging? false))))
+             (swap! local* assoc :dragging? false))))
 
         on-drop-success
         (mf/use-callback
@@ -128,7 +129,7 @@
         (mf/use-callback
          (mf/deps item selected-files)
          (fn [_]
-           (swap! local assoc :dragging? false)
+           (swap! local* assoc :dragging? false)
            (when (not= selected-project (:id item))
              (let [data  {:ids selected-files
                           :project-id (:id item)}
@@ -139,7 +140,7 @@
       [:*
        [:li {:tab-index "0"
              :class (if selected? (stl/css :current)
-                        (when (:dragging? @local) (stl/css :dragging)))
+                        (when (:dragging? local) (stl/css :dragging)))
              :on-click on-click
              :on-key-down on-key-down
              :on-double-click on-edit-open
@@ -148,14 +149,14 @@
              :on-drag-over on-drag-over
              :on-drag-leave on-drag-leave
              :on-drop on-drop}
-        (if (:edition? @local)
+        (if (:edition? local)
           [:& inline-edition {:content (:name item)
                               :on-end on-edit}]
           [:span {:class (stl/css :element-title)} (:name item)])]
        [:& project-menu {:project item
-                         :show? (:menu-open @local)
-                         :left (:x (:menu-pos @local))
-                         :top (:y (:menu-pos @local))
+                         :show? (:menu-open local)
+                         :left (:x (:menu-pos local))
+                         :top (:y (:menu-pos local))
                          :on-edit on-edit-open
                          :on-menu-close on-menu-close}]]
 
@@ -163,7 +164,7 @@
       [:*
        [:li {:tab-index "0"
              :class (if selected? "current"
-                        (when (:dragging? @local) "dragging"))
+                        (when (:dragging? local) "dragging"))
              :on-click on-click
              :on-key-down on-key-down
              :on-double-click on-edit-open
@@ -172,14 +173,14 @@
              :on-drag-over on-drag-over
              :on-drag-leave on-drag-leave
              :on-drop on-drop}
-        (if (:edition? @local)
+        (if (:edition? local)
           [:& inline-edition {:content (:name item)
                               :on-end on-edit}]
           [:span.element-title (:name item)])]
        [:& project-menu {:project item
-                         :show? (:menu-open @local)
-                         :left (:x (:menu-pos @local))
-                         :top (:y (:menu-pos @local))
+                         :show? (:menu-open local)
+                         :left (:x (:menu-pos local))
+                         :top (:y (:menu-pos local))
                          :on-edit on-edit-open
                          :on-menu-close on-menu-close}]])))
 
@@ -225,7 +226,14 @@
                     (dom/focus! search-title)
                     (dom/set-attribute! search-title "tabindex" "-1")))))
              (dom/prevent-default e)
-             (dom/stop-propagation e))))]
+             (dom/stop-propagation e))))
+
+        handle-clear-search
+        (mf/use-callback
+         (mf/deps on-clear-click)
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-clear-click event))))]
 
     (if new-css-system
       [:form {:class (stl/css :sidebar-search)}
@@ -249,9 +257,7 @@
           {:class (stl/css :clear-search)
            :tab-index "0"
            :on-click on-clear-click
-           :on-key-down (fn [event]
-                          (when (kbd/enter? event)
-                            (on-clear-click event)))}
+           :on-key-down handle-clear-search}
           i/close]
 
          [:div
@@ -299,14 +305,22 @@
         team-selected
         (mf/use-callback
          (fn [team-id]
-           (st/emit! (dd/go-to-projects team-id))))]
+           (st/emit! (dd/go-to-projects team-id))))
+
+        handle-select-default
+        (fn [event]
+          (when (kbd/enter? event)
+            (team-selected (:default-team-id profile) event)))
+
+        handle-select-team
+        (fn [id event]
+          (when (kbd/enter? event)
+            (team-selected id event)))]
 
     (if new-css-system
       [:*
        [:> dropdown-menu-item* {:on-click    (partial team-selected (:default-team-id profile))
-                                :on-key-down (fn [event]
-                                               (when (kbd/enter? event)
-                                                 (team-selected (:default-team-id profile) event)))
+                                :on-key-down handle-select-default
                                 :id          "teams-selector-default-team"
                                 :class       (stl/css :team-name)}
         [:span {:class (stl/css :team-icon)} i/logo-icon]
@@ -316,9 +330,7 @@
 
        (for [team-item (remove :is-default (vals teams))]
          [:> dropdown-menu-item* {:on-click    (partial team-selected (:id team-item))
-                                  :on-key-down (fn [event]
-                                                 (when (kbd/enter? event)
-                                                   (team-selected (:id team-item) event)))
+                                  :on-key-down (partial handle-select-team (:id team-item))
                                   :id          (str "teams-selector-" (:id team-item))
                                   :class       (stl/css :team-name)
                                   :key         (str "teams-selector-" (:id team-item))}
@@ -560,7 +572,47 @@
                                  "teams-options-rename")
                                "teams-options-leave-team"
                                (when (get-in team [:permissions :is-owner])
-                                 "teams-options-delete-team")]]
+                                 "teams-options-delete-team")]
+
+        handle-show-team-click
+        (fn [event]
+          (dom/stop-propagation event)
+          (swap! show-teams-ddwn? not)
+          (reset! show-team-opts-ddwn? false))
+
+        handle-show-team-keydown
+        (fn [event]
+          (when (or (kbd/space? event) (kbd/enter? event))
+            (dom/prevent-default event)
+            (reset! show-teams-ddwn? true)
+            (reset! show-team-opts-ddwn? false)
+            (ts/schedule-on-idle
+             (fn []
+               (let [first-element (dom/get-element (first ids))]
+                 (when first-element
+                   (dom/focus! first-element)))))))
+
+        handle-show-opts-click
+        (fn [event]
+          (dom/stop-propagation event)
+          (swap! show-team-opts-ddwn? not)
+          (reset! show-teams-ddwn? false))
+
+        handle-show-opts-keydown
+        (fn [event]
+          (when (or (kbd/space? event) (kbd/enter? event))
+            (dom/prevent-default event)
+            (reset! show-team-opts-ddwn? true)
+            (reset! show-teams-ddwn? false)
+            (ts/schedule-on-idle
+             (fn []
+               (let [first-element (dom/get-element (first options-ids))]
+                 (when first-element
+                   (dom/focus! first-element)))))))
+
+        handle-close-team
+        (fn []
+          (reset! show-teams-ddwn? false))]
 
     (if new-css-system
       [:div {:class (stl/css :sidebar-team-switch)}
@@ -568,21 +620,9 @@
         [:button
          {:class (stl/css :current-team)
           :tab-index "0"
-          :on-click
-          (fn [event]
-            (dom/stop-propagation event)
-            (reset! show-teams-ddwn? true))
+          :on-click handle-show-team-click
+          :on-key-down handle-show-team-keydown}
 
-          :on-key-down
-          (fn [event]
-            (when (or (kbd/space? event) (kbd/enter? event))
-              (dom/prevent-default event)
-              (reset! show-teams-ddwn? true)
-              (ts/schedule-on-idle
-               (fn []
-                 (let [first-element (dom/get-element (first ids))]
-                   (when first-element
-                     (dom/focus! first-element)))))))}
 
          (if (:is-default team)
            [:div {:class (stl/css :team-name)}
@@ -599,24 +639,14 @@
         (when-not (:is-default team)
           [:button
            {:class (stl/css :switch-options)
-            :on-click (fn [event]
-                        (dom/stop-propagation event)
-                        (reset! show-team-opts-ddwn? true))
+            :on-click handle-show-opts-click
             :tab-index "0"
-            :on-key-down (fn [event]
-                           (when (or (kbd/space? event) (kbd/enter? event))
-                             (dom/prevent-default event)
-                             (reset! show-team-opts-ddwn? true)
-                             (ts/schedule-on-idle
-                              (fn []
-                                (let [first-element (dom/get-element (first options-ids))]
-                                  (when first-element
-                                    (dom/focus! first-element)))))))}
+            :on-key-down handle-show-opts-keydown}
            i/actions])]
 
        ;; Teams Dropdown
        [:& dropdown-menu {:show @show-teams-ddwn?
-                          :on-close #(reset! show-teams-ddwn? false)
+                          :on-close handle-close-team
                           :ids ids
                           :list-class (stl/css :dropdown :teams-dropdown)}
         [:& teams-selector-dropdown-items {:ids ids
@@ -922,7 +952,77 @@
         handle-show-comments
         (mf/use-callback
          (fn []
-           (reset! show-comments* true)))]
+           (reset! show-comments* true)))
+
+        handle-click
+        (mf/use-callback
+         (fn [event]
+           (dom/stop-propagation event)
+           (swap! show not)))
+
+        handle-key-down
+        (mf/use-callback
+         (fn [event]
+           (when (kbd/enter? event)
+             (reset! show true))))
+
+        handle-close
+        (fn [event]
+          (dom/stop-propagation event)
+          (reset! show false))
+
+        handle-key-down-profile
+        (mf/use-callback
+         (mf/deps on-click)
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-click :settings-profile event))))
+
+        handle-click-url
+        (mf/use-callback
+         (fn [event]
+           (let [url (-> (dom/get-current-target event)
+                         (dom/get-data "url"))]
+             (dom/open-new-window url))))
+
+        handle-keydown-url
+        (mf/use-callback
+         (fn [event]
+           (let [url (-> (dom/get-current-target event)
+                         (dom/get-data "url"))]
+             (when (kbd/enter? event)
+               (dom/open-new-window url)))))
+
+        handle-show-release-notes
+        (mf/use-callback
+         (mf/deps show-release-notes)
+         (fn [event]
+           (when (kbd/enter? event)
+             (show-release-notes))))
+
+        handle-feedback-click
+        (mf/use-callback
+         (mf/deps on-click)
+         #(on-click :settings-feedback %))
+
+        handle-feedback-keydown
+        (mf/use-callback
+         (mf/deps on-click)
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-click :settings-feedback event))))
+
+        handle-logout-click
+        (mf/use-callback
+         (mf/deps on-click)
+         #(on-click (du/logout) %))
+
+        handle-logout-keydown
+        (mf/use-callback
+         (mf/deps on-click)
+         (fn [event]
+           (when (kbd/enter? event)
+             (on-click (du/logout) event))))]
     (if new-css-system
       [:*
        (when (and team profile)
@@ -936,99 +1036,78 @@
        [:div {:class (stl/css :profile-section)}
         [:div {:class (stl/css :profile)
                :tab-index "0"
-               :on-click (fn [event]
-                           (dom/stop-propagation event)
-                           (reset! show true))
-               :on-key-down (fn [event]
-                              (when (kbd/enter? event)
-                                (reset! show true)))
+               :on-click handle-click
+               :on-key-down handle-key-down
                :data-test "profile-btn"}
          [:img {:src photo
                 :alt (:fullname profile)}]
          [:span (:fullname profile)]]
 
-        [:& dropdown-menu {:on-close (fn [event]
-                                       (dom/stop-propagation event)
-                                       (reset! show false))
-                           :show @show}
+        [:& dropdown-menu {:on-close handle-close :show @show}
          [:ul {:class (stl/css :dropdown)}
-          [:li {:tab-index (if show "0" "-1")
+          [:li {:tab-index (if @show "0" "-1")
                 :on-click (partial on-click :settings-profile)
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (on-click :settings-profile event)))
+                :on-key-down handle-key-down-profile
                 :data-test "profile-profile-opt"}
            [:span {:class (stl/css :text)} (tr "labels.your-account")]]
 
           [:li {:class (stl/css :separator)
-                :tab-index (if show "0" "-1")
-                :on-click #(dom/open-new-window "https://help.penpot.app")
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (dom/open-new-window "https://help.penpot.app")))
+                :tab-index (if @show "0" "-1")
+                :data-url "https://help.penpot.app"
+                :on-click handle-click-url
+                :on-key-down handle-keydown-url
                 :data-test "help-center-profile-opt"}
            [:span {:class (stl/css :text)} (tr "labels.help-center")]]
 
-          [:li {:tab-index (if show "0" "-1")
-                :on-click #(dom/open-new-window "https://community.penpot.app")
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (dom/open-new-window "https://community.penpot.app")))}
+          [:li {:tab-index (if @show "0" "-1")
+                :data-url "https://community.penpot.app"
+                :on-click handle-click-url
+                :on-key-down handle-keydown-url}
            [:span {:class (stl/css :text)} (tr "labels.community")]]
 
-          [:li {:tab-index (if show "0" "-1")
-                :on-click #(dom/open-new-window "https://www.youtube.com/c/Penpot")
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (dom/open-new-window "https://www.youtube.com/c/Penpot")))}
+          [:li {:tab-index (if @show "0" "-1")
+                :data-url "https://www.youtube.com/c/Penpot"
+                :on-click handle-click-url
+                :on-key-down handle-keydown-url}
            [:span {:class (stl/css :text)} (tr "labels.tutorials")]]
 
-          [:li {:tab-index (if show "0" "-1")
+          [:li {:tab-index (if @show "0" "-1")
                 :on-click show-release-notes
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (show-release-notes)))}
+                :on-key-down handle-show-release-notes}
            [:span {:class (stl/css :text)} (tr "labels.release-notes")]]
 
           [:li {:class (stl/css :separator)
-                :tab-index (if show "0" "-1")
-                :on-click #(dom/open-new-window "https://penpot.app/libraries-templates")
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (dom/open-new-window "https://penpot.app/libraries-templates")))
+                :tab-index (if @show "0" "-1")
+                :data-url "https://penpot.app/libraries-templates"
+                :on-click handle-click-url
+                :on-key-down handle-keydown-url
                 :data-test "libraries-templates-profile-opt"}
            [:span {:class (stl/css :text)} (tr "labels.libraries-and-templates")]]
 
-          [:li {:tab-index (if show "0" "-1")
-                :on-click #(dom/open-new-window "https://github.com/penpot/penpot")
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (dom/open-new-window "https://github.com/penpot/penpot")))}
+          [:li {:tab-index (if @show "0" "-1")
+                :data-url "https://github.com/penpot/penpot"
+                :on-click handle-click-url
+                :on-key-down handle-keydown-url}
            [:span {:class (stl/css :text)} (tr "labels.github-repo")]]
 
-          [:li {:tab-index (if show "0" "-1")
-                :on-click #(dom/open-new-window "https://penpot.app/terms")
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (dom/open-new-window "https://penpot.app/terms")))}
+          [:li {:tab-index (if @show "0" "-1")
+                :data-url "https://penpot.app/terms"
+                :on-click handle-click-url
+                :on-key-down handle-keydown-url}
            [:span {:class (stl/css :text)} (tr "auth.terms-of-service")]]
 
           (when (contains? cf/flags :user-feedback)
             [:li {:class (stl/css :separator)
-                  :tab-index (if show "0" "-1")
-                  :on-click (partial on-click :settings-feedback)
-                  :on-key-down (fn [event]
-                                 (when (kbd/enter? event)
-                                   (on-click :settings-feedback event)))
+                  :tab-index (if @show "0" "-1")
+                  :on-click handle-feedback-click
+                  :on-key-down handle-feedback-keydown
                   :data-test "feedback-profile-opt"}
              [:span {:class (stl/css :text)} (tr "labels.give-feedback")]])
 
           [:li {:class (stl/css :separator)
-                :tab-index (if show "0" "-1")
-                :on-click #(on-click (du/logout) %)
-                :on-key-down (fn [event]
-                               (when (kbd/enter? event)
-                                 (on-click (du/logout) event)))
+                :tab-index (if @show "0" "-1")
+                :on-click handle-logout-click
+                :on-key-down handle-logout-keydown
                 :data-test "logout-profile-opt"}
            [:span {:class (stl/css :icon)} i/exit]
            [:span {:class (stl/css :text)} (tr "labels.logout")]]]]
@@ -1176,4 +1255,3 @@
        [:& profile-section
         {:profile profile
          :team team}]])))
-
diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss
index 0d745a079..0dec1777b 100644
--- a/frontend/src/app/main/ui/dashboard/sidebar.scss
+++ b/frontend/src/app/main/ui/dashboard/sidebar.scss
@@ -16,7 +16,7 @@
   margin: 0 $s-16 0 0;
   padding: $s-16 0 0 0;
 
-  z-index: 1;
+  z-index: $z-index-1;
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -123,6 +123,7 @@
     cursor: pointer;
     background-color: transparent;
     border: none;
+    height: 100%;
 
     svg {
       fill: $df-secondary;
@@ -140,12 +141,12 @@
 }
 
 .dropdown {
+  @include menuShadow;
   position: absolute;
-  z-index: 12;
+  z-index: $z-index-4;
   background-color: $db-tertiary;
   border: $s-1 solid $db-cuaternary;
   border-radius: $br-8;
-  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
 
   .separator {
     border-color: transparent;
@@ -199,7 +200,7 @@
 
   left: 0;
   top: $s-52;
-  z-index: 12;
+
   max-height: $s-480;
   overflow-x: hidden;
   overflow-y: auto;
diff --git a/frontend/src/app/main/ui/dashboard/team.scss b/frontend/src/app/main/ui/dashboard/team.scss
index b8e3882a8..18ec4eadd 100644
--- a/frontend/src/app/main/ui/dashboard/team.scss
+++ b/frontend/src/app/main/ui/dashboard/team.scss
@@ -102,16 +102,8 @@
     }
   }
   .btn-primary {
-    flex-shrink: 0;
-    width: 100%;
-    font-size: $fs-12;
-    text-transform: uppercase;
-    background-color: $db-tertiary;
-    color: $df-primary;
-    &:hover {
-      color: $da-primary;
-      background-color: $db-cuaternary;
-    }
+    @extends .button-primary;
+    height: $s-32;
   }
 }
 
@@ -127,7 +119,7 @@
   position: absolute;
   top: $s-32;
   width: $s-152;
-  z-index: 12;
+  z-index: $z-index-4;
 
   hr {
     margin: 0;
@@ -511,7 +503,7 @@
         align-items: center;
         border-radius: 50%;
         color: $df-primary;
-        z-index: 14;
+        z-index: $z-index-modal;
 
         background-color: $da-primary;
         height: $s-120;
diff --git a/frontend/src/app/main/ui/settings.scss b/frontend/src/app/main/ui/settings.scss
index e295be303..2fc327282 100644
--- a/frontend/src/app/main/ui/settings.scss
+++ b/frontend/src/app/main/ui/settings.scss
@@ -10,8 +10,8 @@
 .dashboard {
   background-color: $db-primary;
   display: grid;
-  grid-template-rows: 50px 1fr;
-  grid-template-columns: 40px 256px 1fr;
+  grid-template-rows: $s-48 1fr;
+  grid-template-columns: $s-40 $s-256 1fr;
   height: 100vh;
 }
 
@@ -20,7 +20,7 @@
   flex-direction: column;
   position: relative;
   grid-row: 1 / span 2;
-  padding: 1rem 1rem 0 0;
+  padding: $s-16 $s-16 0 0;
 }
 
 .dashboard-container {
@@ -54,24 +54,24 @@
 }
 
 .form-container {
-  width: 800px;
-  margin: 50px auto 2rem 120px;
+  width: $s-800;
+  margin: $s-48 auto $s-32 $s-120;
   display: flex;
-  max-width: 368px;
+  max-width: $s-368;
   width: 100%;
 
   &.two-columns {
-    max-width: 536px;
+    max-width: $s-520;
     justify-content: space-between;
     flex-direction: row;
   }
 
   h2 {
-    margin-bottom: 1rem;
+    margin-bottom: $s-16;
   }
 
   form {
-    width: 468px;
+    width: $s-468;
 
     .custom-input,
     .custom-select {
@@ -80,26 +80,26 @@
         position: relative;
         text-transform: uppercase;
         color: $df-primary;
-        font-size: 11px;
-        margin-bottom: 12px;
-        margin-left: -4px;
+        font-size: $fs-11;
+        margin-bottom: $s-12;
+        margin-left: calc(-1 * $s-4);
       }
       input,
       select {
         background-color: $db-tertiary;
-        border-radius: 8px;
+        border-radius: $s-8;
         border-color: transparent;
         color: $df-primary;
-        padding: 0 15px;
+        padding: 0 $s-16;
         &:focus {
-          outline: 1px solid $da-primary;
+          outline: $s-1 solid $da-primary;
         }
         ::placeholder {
           color: $df-secondary;
         }
       }
       .help-icon {
-        bottom: 12px;
+        bottom: $s-12;
         top: auto;
         svg {
           fill: $df-secondary;
@@ -114,30 +114,30 @@
       }
       .input-container {
         background-color: $db-tertiary;
-        border-radius: 8px;
+        border-radius: $s-8;
         border-color: transparent;
-        margin-top: 22px;
+        margin-top: $s-24;
         .main-content {
           label {
             position: absolute;
-            top: -24px;
+            top: calc(-1 * $s-24);
           }
           span {
             color: $df-primary;
           }
         }
         &:focus {
-          border: 1px solid $da-primary;
+          border: $s-1 solid $da-primary;
         }
       }
       textarea {
-        border-radius: 8px;
-        padding: 12px 14px;
+        border-radius: $s-8;
+        padding: $s-12 $s-16;
         background-color: $db-tertiary;
         color: $df-primary;
         border: none;
         &:focus {
-          outline: 1px solid $da-primary;
+          outline: $s-1 solid $da-primary;
         }
       }
     }
@@ -146,7 +146,7 @@
       color: $df-primary;
     }
     .field-title:not(:first-child) {
-      margin-top: 64px;
+      margin-top: $s-64;
     }
 
     .field-text {
@@ -155,7 +155,7 @@
     button,
     .btn-secondary {
       width: 100%;
-      font-size: 11px;
+      font-size: $fs-11;
       text-transform: uppercase;
       background-color: $db-tertiary;
       color: $df-primary;
@@ -169,21 +169,21 @@
     }
   }
   .links {
-    margin-top: 12px;
+    margin-top: $s-12;
   }
 }
 
 .profile-form {
   display: flex;
   flex-direction: column;
-  max-width: 368px;
+  max-width: $s-368;
   width: 100%;
 
   .newsletter-subs {
-    border-bottom: 1px solid $df-secondary;
-    border-top: 1px solid $df-secondary;
-    padding: 30px 0;
-    margin-bottom: 31px;
+    border-bottom: $s-1 solid $df-secondary;
+    border-top: $s-1 solid $df-secondary;
+    padding: $s-32 0;
+    margin-bottom: $s-32;
 
     .newsletter-title {
       font-family: "worksans", sans-serif;
@@ -195,15 +195,15 @@
       font-family: "worksans", sans-serif;
       color: $db-primary;
       font-size: $fs-12;
-      margin-right: -17px;
-      margin-bottom: 13px;
+      margin-right: calc(-1 * $s-16);
+      margin-bottom: $s-12;
     }
 
     .info {
       font-family: "worksans", sans-serif;
       color: $df-secondary;
       font-size: $fs-12;
-      margin-bottom: 8px;
+      margin-bottom: $s-8;
     }
 
     .input-checkbox label {
@@ -215,28 +215,28 @@
 .avatar-form {
   display: flex;
   flex-direction: column;
-  width: 120px;
-  min-width: 120px;
+  width: $s-120;
+  min-width: $s-120;
 
   img {
     border-radius: 50%;
     flex-shrink: 0;
-    height: 120px;
+    height: $s-120;
     margin-right: $s-16;
-    width: 120px;
+    width: $s-120;
   }
 
   .image-change-field {
     position: relative;
-    width: 120px;
-    height: 120px;
+    width: $s-120;
+    height: $s-120;
 
     .update-overlay {
       opacity: 0;
       cursor: pointer;
       position: absolute;
-      width: 121px;
-      height: 121px;
+      width: $s-120;
+      height: $s-120;
       border-radius: 50%;
       font-size: $fs-24;
       color: $df-primary;
@@ -247,8 +247,8 @@
     }
 
     input[type="file"] {
-      width: 120px;
-      height: 120px;
+      width: $s-120;
+      height: $s-120;
       position: absolute;
       opacity: 0;
       cursor: pointer;
@@ -268,6 +268,6 @@
 .password-form {
   h2 {
     font-size: $fs-14;
-    margin-bottom: 20px;
+    margin-bottom: $s-20;
   }
 }
diff --git a/frontend/src/app/main/ui/settings/access_tokens.cljs b/frontend/src/app/main/ui/settings/access_tokens.cljs
index 6d5a0bafd..de1ec0a7c 100644
--- a/frontend/src/app/main/ui/settings/access_tokens.cljs
+++ b/frontend/src/app/main/ui/settings/access_tokens.cljs
@@ -291,7 +291,15 @@
         (mf/use-fn
          (fn [event]
            (dom/prevent-default event)
-           (swap! local assoc :menu-open true)))]
+           (swap! local assoc :menu-open true)))
+
+        on-keydown
+        (mf/use-callback
+         (mf/deps on-menu-click)
+         (fn [event]
+           (when (kbd/enter? event)
+             (dom/stop-propagation event)
+             (on-menu-click event))))]
 
     (if new-css-system
       [:div
@@ -299,10 +307,7 @@
         :tab-index "0"
         :ref menu-ref
         :on-click on-menu-click
-        :on-key-down (fn [event]
-                       (when (kbd/enter? event)
-                         (dom/stop-propagation event)
-                         (on-menu-click event)))}
+        :on-key-down on-keydown}
        i/actions
        [:& context-menu-a11y
         {:on-close on-menu-close
diff --git a/frontend/src/app/main/ui/settings/profile.cljs b/frontend/src/app/main/ui/settings/profile.cljs
index 8dfb6b87b..a6bb4ad30 100644
--- a/frontend/src/app/main/ui/settings/profile.cljs
+++ b/frontend/src/app/main/ui/settings/profile.cljs
@@ -49,7 +49,15 @@
         form    (fm/use-form :spec ::profile-form
                              :initial profile
                              :validators [(fm/validate-length :fullname fm/max-length-allowed (tr "auth.name.too-long"))
-                                          (fm/validate-not-empty :fullname (tr "auth.name.not-all-space"))])]
+                                          (fm/validate-not-empty :fullname (tr "auth.name.not-all-space"))])
+
+        handle-show-change-email
+        (mf/use-callback
+         #(modal/show! :change-email {}))
+
+        handle-show-delete-account
+        (mf/use-callback
+         #(modal/show! :delete-account {}))]
 
     (if new-css-system
       [:& fm/form {:on-submit on-submit
@@ -62,7 +70,7 @@
           :label (tr "dashboard.your-name")}]]
 
        [:div {:class (stl/css :fields-row)
-              :on-click #(modal/show! :change-email {})}
+              :on-click handle-show-change-email}
         [:& fm/input
          {:type "email"
           :name :email
@@ -72,7 +80,7 @@
 
         [:div {:class (stl/css :options)}
          [:div.change-email
-          [:a {:on-click #(modal/show! :change-email {})}
+          [:a {:on-click handle-show-change-email}
            (tr "dashboard.change-email")]]]]
 
        [:> fm/submit-button*
@@ -82,7 +90,7 @@
 
        [:div {:class (stl/css :links)}
         [:div {:class (stl/css :link-item)}
-         [:a {:on-click #(modal/show! :delete-account {})
+         [:a {:on-click handle-show-delete-account
               :data-test "remove-acount-btn"}
           (tr "dashboard.remove-account")]]]]
 
diff --git a/frontend/src/app/main/ui/settings/profile.scss b/frontend/src/app/main/ui/settings/profile.scss
index dc13b0231..c1f1b622b 100644
--- a/frontend/src/app/main/ui/settings/profile.scss
+++ b/frontend/src/app/main/ui/settings/profile.scss
@@ -266,7 +266,7 @@ form.avatar-form {
     line-height: 6;
     text-align: center;
     background: $da-tertiary;
-    z-index: 14;
+    z-index: $z-index-modal;
   }
 
   input[type="file"] {
@@ -276,7 +276,7 @@ form.avatar-form {
     opacity: 0;
     cursor: pointer;
     top: 0;
-    z-index: 15;
+    z-index: $z-index-modal;
   }
 
   &:hover {
diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss
index 263ff24af..e5e05cef4 100644
--- a/frontend/src/app/main/ui/settings/sidebar.scss
+++ b/frontend/src/app/main/ui/settings/sidebar.scss
@@ -16,7 +16,7 @@
   height: 100%;
   margin: 0 $s-16 0 0;
   padding: $s-16 0 0 0;
-  z-index: 1;
+  z-index: $z-index-1;
 }
 
 .sidebar-content {
diff --git a/frontend/src/app/main/ui/static.cljs b/frontend/src/app/main/ui/static.cljs
index a9fa000c1..163b80671 100644
--- a/frontend/src/app/main/ui/static.cljs
+++ b/frontend/src/app/main/ui/static.cljs
@@ -57,65 +57,62 @@
 
 (mf/defc bad-gateway
   []
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+  (let [new-css-system (mf/use-ctx ctx/new-css-system)
+        handle-retry
+        (mf/use-callback
+         (fn [] (st/emit! (rt/assign-exception nil))))]
     (if new-css-system
       [:> static-header {}
        [:div {:class (stl/css :main-message)} (tr "labels.bad-gateway.main-message")]
        [:div {:class (stl/css :desc-message)} (tr "labels.bad-gateway.desc-message")]
        [:div {:class (stl/css :sign-info)}
-        [:button
-         {:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
-         (tr "labels.retry")]]]
+        [:button {:on-click handle-retry} (tr "labels.retry")]]]
 
       [:> static-header {}
        [:div.image i/icon-empty]
        [:div.main-message (tr "labels.bad-gateway.main-message")]
        [:div.desc-message (tr "labels.bad-gateway.desc-message")]
        [:div.sign-info
-        [:a.btn-primary.btn-small
-         {:on-click (fn [] (st/emit! #(dissoc % :exception)))}
-         (tr "labels.retry")]]])))
+        [:a.btn-primary.btn-small {:on-click handle-retry} (tr "labels.retry")]]])))
 
 (mf/defc service-unavailable
   []
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+  (let [new-css-system (mf/use-ctx ctx/new-css-system)
+        handle-retry
+        (mf/use-callback
+         (fn [] (st/emit! (rt/assign-exception nil))))]
     (if new-css-system
       [:> static-header {}
        [:div {:class (stl/css :main-message)} (tr "labels.service-unavailable.main-message")]
        [:div {:class (stl/css :desc-message)} (tr "labels.service-unavailable.desc-message")]
        [:div {:class (stl/css :sign-info)}
-        [:button
-         {:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
-         (tr "labels.retry")]]]
+        [:button {:on-click handle-retry} (tr "labels.retry")]]]
 
       [:> static-header {}
        [:div.main-message (tr "labels.service-unavailable.main-message")]
        [:div.desc-message (tr "labels.service-unavailable.desc-message")]
        [:div.sign-info
-        [:a.btn-primary.btn-small
-         {:on-click (fn [] (st/emit! #(dissoc % :exception)))}
-         (tr "labels.retry")]]])))
+        [:a.btn-primary.btn-small {:on-click handle-retry} (tr "labels.retry")]]])))
 
 (mf/defc internal-error
   []
-  (let [new-css-system (mf/use-ctx ctx/new-css-system)]
+  (let [new-css-system (mf/use-ctx ctx/new-css-system)
+        handle-retry
+        (mf/use-callback
+         (fn [] (st/emit! (rt/assign-exception nil))))]
     (if new-css-system
       [:> static-header {}
        [:div {:class (stl/css :main-message)} (tr "labels.internal-error.main-message")]
        [:div {:class (stl/css :desc-message)} (tr "labels.internal-error.desc-message")]
        [:div {:class (stl/css :sign-info)}
-        [:button
-         {:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
-         (tr "labels.retry")]]]
+        [:button {:on-click handle-retry} (tr "labels.retry")]]]
 
       [:> static-header {}
        [:div.image i/icon-empty]
        [:div.main-message (tr "labels.internal-error.main-message")]
        [:div.desc-message (tr "labels.internal-error.desc-message")]
        [:div.sign-info
-        [:a.btn-primary.btn-small
-         {:on-click (fn [] (st/emit! (rt/assign-exception nil)))}
-         (tr "labels.retry")]]])))
+        [:a.btn-primary.btn-small {:on-click handle-retry} (tr "labels.retry")]]])))
 
 (mf/defc exception-page
   [{:keys [data] :as props}]