diff --git a/src/main/frontend/components/editor.cljs b/src/main/frontend/components/editor.cljs
index 92f09ca8bd..6cd10e865e 100644
--- a/src/main/frontend/components/editor.cljs
+++ b/src/main/frontend/components/editor.cljs
@@ -229,7 +229,32 @@
                            template)
             :class       "black"}))))))
 
-(rum/defc ^:large-vars/cleanup-todo mobile-bar < rum/reactive
+(rum/defc mobile-bar-indent-outdent [indent? icon]
+  [:div
+   [:button.bottom-action
+    {:on-mouse-down (fn [e]
+                      (util/stop e)
+                      (state/set-state! :editor/pos (cursor/pos (state/get-input)))
+                      (editor-handler/indent-outdent indent?))}
+    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
+
+(rum/defc mobile-bar-command [command-handler icon]
+  [:div
+   [:button.bottom-action
+    {:on-mouse-down (fn [e]
+                      (util/stop e)
+                      (command-handler))}
+    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
+
+(rum/defc mobile-bar-command-with-event [command-handler icon]
+  [:div
+   [:button.bottom-action
+    {:on-mouse-down (fn [e]
+                      (util/stop e)
+                      (command-handler e))}
+    (ui/icon icon {:style {:fontSize ui/icon-size}})]])
+
+(rum/defc mobile-bar < rum/reactive
   [_parent-state parent-id]
   (let [vw-state (state/sub :ui/visual-viewport-state)
         vw-pending? (state/sub :ui/visual-viewport-pending?)
@@ -244,173 +269,31 @@
                            (:offset-top vw-state))
                         0)}
       :class (util/classnames [{:is-vw-pending (boolean vw-pending?)}])}
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (state/set-state! :editor/pos (cursor/pos (state/get-input)))
-                         (editor-handler/indent-outdent true))}
-       (ui/icon "arrow-bar-right"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (state/set-state! :editor/pos (cursor/pos (state/get-input)))
-                         (editor-handler/indent-outdent false))}
-       (ui/icon "arrow-bar-left"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         ((editor-handler/move-up-down true)))}
-       (ui/icon "arrow-bar-to-up"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         ((editor-handler/move-up-down false)))}
-       (ui/icon "arrow-bar-to-down"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (commands/simple-insert! parent-id "\n" {}))}
-       (ui/icon "arrow-back"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (editor-handler/cycle-todo!))}
-       (ui/icon "checkbox"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (viewport-fn)
-                         (editor-handler/toggle-page-reference-embed parent-id))}
-       (ui/icon "brackets"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (viewport-fn)
-                         (editor-handler/toggle-block-reference-embed parent-id))}
-       (ui/icon "parentheses"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (viewport-fn)
-                         (commands/simple-insert! parent-id "/" {}))}
-       (ui/icon "command"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (viewport-fn)
-                         (commands/simple-insert!
-                          parent-id "#"
-                          {:check-fn  (fn []
-                                        (commands/handle-step [:editor/search-page-hashtag]))}))}
-       (ui/icon "tag"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (editor-handler/cycle-priority!))}
-       (ui/icon "a-b"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (editor-handler/toggle-list!))}
-       (ui/icon "list"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (mobile-camera/embed-photo parent-id))}
-       (ui/icon "camera"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (commands/insert-youtube-timestamp))}
-       (ui/icon "brand-youtube"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (editor-handler/html-link-format!))}
-       (ui/icon "link"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (history/undo! e))}
-       (ui/icon "rotate"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (history/redo! e))}
-       (ui/icon "rotate-clockwise"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (viewport-fn)
-                         (commands/simple-insert!
-                          parent-id "<"
-                          {:check-fn (fn [_]
-                                       (commands/block-commands-map))}))}
-       (ui/icon "code"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (editor-handler/bold-format!))}
-       (ui/icon "bold"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (editor-handler/italics-format!))}
-       (ui/icon "italic"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (editor-handler/strike-through-format!))}
-       (ui/icon "strikethrough"
-                {:style {:fontSize ui/icon-size}})]]
-     [:div
-      [:button.bottom-action
-       {:on-mouse-down (fn [e]
-                         (util/stop e)
-                         (editor-handler/highlight-format!))}
-       (ui/icon "paint"
-                {:style {:fontSize ui/icon-size}})]]]))
+     [:div.toolbar-commands
+      (mobile-bar-indent-outdent true "arrow-bar-right")
+      (mobile-bar-indent-outdent false "arrow-bar-left")
+      (mobile-bar-command (editor-handler/move-up-down true) "arrow-bar-to-up")
+      (mobile-bar-command (editor-handler/move-up-down false) "arrow-bar-to-down")
+      (mobile-bar-command #(commands/simple-insert! parent-id "\n" {}) "arrow-back")
+      (mobile-bar-command editor-handler/cycle-todo! "checkbox")
+      (mobile-bar-command #(editor-handler/toggle-page-reference-embed parent-id) "brackets")
+      (mobile-bar-command #(editor-handler/toggle-block-reference-embed parent-id) "parentheses")
+      (mobile-bar-command #(do (viewport-fn) (commands/simple-insert! parent-id "/" {})) "command")
+      (mobile-bar-command #(do (viewport-fn) (commands/simple-insert! parent-id "#" {})) "tag")
+      (mobile-bar-command editor-handler/cycle-priority! "a-b")
+      (mobile-bar-command editor-handler/toggle-list! "list")
+      (mobile-bar-command #(mobile-camera/embed-photo parent-id) "camera")
+      (mobile-bar-command commands/insert-youtube-timestamp "brand-youtube")
+      (mobile-bar-command editor-handler/html-link-format! "link")
+      (mobile-bar-command-with-event history/undo! "rotate")
+      (mobile-bar-command-with-event history/redo! "rotate-clockwise")
+      (mobile-bar-command #(do (viewport-fn) (commands/simple-insert! parent-id "<" {})) "code")
+      (mobile-bar-command editor-handler/bold-format! "bold")
+      (mobile-bar-command editor-handler/italics-format! "italic")
+      (mobile-bar-command editor-handler/strike-through-format! "strikethrough")
+      (mobile-bar-command editor-handler/highlight-format! "paint")]
+     [:div.toolbar-hide-keyboard
+      (mobile-bar-command #(state/clear-edit!) "keyboard-show")]]))
 
 (rum/defcs input < rum/reactive
   (rum/local {} ::input-value)
diff --git a/src/main/frontend/components/editor.css b/src/main/frontend/components/editor.css
index 80b6176375..1d29b5ad87 100644
--- a/src/main/frontend/components/editor.css
+++ b/src/main/frontend/components/editor.css
@@ -3,17 +3,27 @@
   bottom: 0;
   left: 0;
   width: 100%;
-  justify-content: space-between;
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
+  /* height: 2.5rem; */
   z-index: 9999;
-  overflow-x: overlay;
-  overflow-y: hidden;
   transition: none;
+  display: flex;
+  justify-content: space-between;
 
   button {
-    padding: 10px;
+    padding: 7px 10px;
+  }
+  
+  .toolbar-commands {
+    justify-content: space-between;
+    display: flex;
+    align-items: center;
+    overflow-x: overlay;
+    overflow-y: hidden;
+  }
+
+  .toolbar-hide-keyboard {
+    border-left: 1px solid;
+    border-color: var(--ls-quaternary-background-color);
   }
 }
 
diff --git a/src/main/frontend/handler/editor.cljs b/src/main/frontend/handler/editor.cljs
index 2b786299a2..d993dd347b 100644
--- a/src/main/frontend/handler/editor.cljs
+++ b/src/main/frontend/handler/editor.cljs
@@ -437,7 +437,7 @@
        (another-block-with-same-id-exists? uuid block-id)
        (notification/show!
         [:p.content
-         (util/format "Block with the id % already exists!" block-id)]
+         (util/format "Block with the id %s already exists!" block-id)]
         :error)
 
        force?