diff --git a/packages/excalidraw/components/Actions.scss b/packages/excalidraw/components/Actions.scss
index c84413e228..9b3631f6ec 100644
--- a/packages/excalidraw/components/Actions.scss
+++ b/packages/excalidraw/components/Actions.scss
@@ -111,8 +111,8 @@
     --default-button-size: 2rem;
 
     .compact-action-button {
-      width: 1.625rem;
-      height: 1.625rem;
+      width: var(--mobile-action-button-size);
+      height: var(--mobile-action-button-size);
       border: none;
       border-radius: var(--border-radius-lg);
       color: var(--color-on-surface);
@@ -166,8 +166,8 @@
 
   .ToolIcon {
     .ToolIcon__icon {
-      width: 1.625rem;
-      height: 1.625rem;
+      width: 2.5rem;
+      height: 2.5rem;
 
       &:hover {
         background-color: transparent;
diff --git a/packages/excalidraw/components/Actions.tsx b/packages/excalidraw/components/Actions.tsx
index 25c76b537c..a6ab1df726 100644
--- a/packages/excalidraw/components/Actions.tsx
+++ b/packages/excalidraw/components/Actions.tsx
@@ -900,11 +900,11 @@ export const MobileShapeActions = ({
 
   const width = mobileActionsRef.current?.getBoundingClientRect()?.width ?? 0;
 
-  const WIDTH = 26;
-  const GAP = 8;
+  const WIDTH = 36;
+  const GAP = 6;
 
-  // max 6 actions + undo
-  const MIN_WIDTH = 7 * WIDTH + 6 * GAP;
+  // max 7 actions + undo
+  const MIN_WIDTH = 8 * WIDTH + 7 * GAP;
 
   const ADDITIONAL_WIDTH = WIDTH + GAP;
 
@@ -921,7 +921,8 @@ export const MobileShapeActions = ({
         padding: 0,
         zIndex: 2,
         backgroundColor: "transparent",
-        height: WIDTH * 1.75,
+        height: WIDTH * 1.25,
+        marginBottom: 2,
         alignItems: "center",
         gap: GAP,
         pointerEvents: "none",
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
index f6acb32b84..85b499137e 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@@ -163,6 +163,11 @@
       width: 1.625rem;
       height: 1.625rem;
     }
+
+    &.compact-sizing {
+      width: var(--mobile-action-button-size);
+      height: var(--mobile-action-button-size);
+    }
   }
 
   .color-picker__button__hotkey-label {
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
index c97ae1a97d..4daf245cf1 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.tsx
@@ -264,6 +264,7 @@ const ColorPickerTrigger = ({
         "is-transparent": !color || color === "transparent",
         "has-outline":
           !color || !isColorDark(color, COLOR_OUTLINE_CONTRAST_THRESHOLD),
+        "compact-sizing": compactMode,
       })}
       aria-label={label}
       style={color ? { "--swatch-color": color } : undefined}
diff --git a/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx b/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
index 5d60a8c3b9..43dcc37628 100644
--- a/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
+++ b/packages/excalidraw/components/FontPicker/FontPickerTrigger.tsx
@@ -26,8 +26,8 @@ export const FontPickerTrigger = ({
         background: "rgba(255, 255, 255, 0.1)",
         backdropFilter: "blur(20px)",
         WebkitBackdropFilter: "blur(20px)",
-        width: "1.625rem",
-        height: "1.625rem",
+        width: "2.25rem",
+        height: "2.25rem",
       }
     : {};
 
diff --git a/packages/excalidraw/components/MobileToolBar.scss b/packages/excalidraw/components/MobileToolBar.scss
index 34eefae7ef..6e0d253114 100644
--- a/packages/excalidraw/components/MobileToolBar.scss
+++ b/packages/excalidraw/components/MobileToolBar.scss
@@ -13,14 +13,7 @@
     scrollbar-width: none;
     -ms-overflow-style: none;
     justify-content: space-between;
-
-    @media screen and (min-width: 340px) {
-      gap: 6px;
-    }
-
-    @media screen and (min-width: 380px) {
-      gap: 8px;
-    }
+    position: relative;
   }
 
   .mobile-toolbar::-webkit-scrollbar {
@@ -37,8 +30,8 @@
     flex-shrink: 0;
 
     .ToolIcon__icon {
-      width: 2rem;
-      height: 2rem;
+      width: var(--mobile-action-button-size);
+      height: var(--mobile-action-button-size);
 
       &:hover {
         background-color: transparent;
diff --git a/packages/excalidraw/components/MobileToolBar.tsx b/packages/excalidraw/components/MobileToolBar.tsx
index 3973575936..d062227367 100644
--- a/packages/excalidraw/components/MobileToolBar.tsx
+++ b/packages/excalidraw/components/MobileToolBar.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import clsx from "clsx";
 
 import { KEYS, capitalizeString } from "@excalidraw/common";
@@ -101,6 +101,8 @@ export const MobileToolBar = ({
     "arrow" | "line"
   >("arrow");
 
+  const toolbarRef = useRef<HTMLDivElement>(null);
+
   // keep lastActiveGenericShape in sync with active tool if user switches via other UI
   useEffect(() => {
     if (
@@ -141,8 +143,19 @@ export const MobileToolBar = ({
     }
   };
 
-  const showTextToolOutside = appState.width >= 400;
-  const showFrameToolOutside = appState.width >= 440;
+  const toolbarWidth =
+    toolbarRef.current?.getBoundingClientRect()?.width ?? 0 - 8;
+  const WIDTH = 36;
+  const GAP = 4;
+
+  // hand, selection, freedraw, eraser, rectangle, arrow, others
+  const MIN_TOOLS = 7;
+  const MIN_WIDTH = MIN_TOOLS * WIDTH + (MIN_TOOLS - 1) * GAP;
+  const ADDITIONAL_WIDTH = WIDTH + GAP;
+
+  const showImageToolOutside = toolbarWidth >= MIN_WIDTH + 1 * ADDITIONAL_WIDTH;
+  const showTextToolOutside = toolbarWidth >= MIN_WIDTH + 2 * ADDITIONAL_WIDTH;
+  const showFrameToolOutside = toolbarWidth >= MIN_WIDTH + 3 * ADDITIONAL_WIDTH;
 
   const extraTools = [
     "text",
@@ -175,7 +188,7 @@ export const MobileToolBar = ({
     : extraToolsIcon;
 
   return (
-    <div className="mobile-toolbar">
+    <div className="mobile-toolbar" ref={toolbarRef}>
       {/* Hand Tool */}
       <HandButton
         checked={isHandToolActive(appState)}
@@ -243,7 +256,6 @@ export const MobileToolBar = ({
         options={SHAPE_TOOLS}
         activeTool={activeTool}
         defaultOption={lastActiveGenericShape}
-        className="Shape"
         namePrefix="shapeType"
         title={capitalizeString(
           t(
@@ -274,7 +286,6 @@ export const MobileToolBar = ({
         options={LINEAR_ELEMENT_TOOLS}
         activeTool={activeTool}
         defaultOption={lastActiveLinearElement}
-        className="LinearElement"
         namePrefix="linearElementType"
         title={capitalizeString(
           t(
@@ -298,19 +309,21 @@ export const MobileToolBar = ({
       />
 
       {/* Image */}
-      <ToolButton
-        className={clsx({
-          active: activeTool.type === "image",
-        })}
-        type="radio"
-        icon={ImageIcon}
-        checked={activeTool.type === "image"}
-        name="editor-current-shape"
-        title={`${capitalizeString(t("toolBar.image"))}`}
-        aria-label={capitalizeString(t("toolBar.image"))}
-        data-testid="toolbar-image"
-        onChange={() => handleToolChange("image")}
-      />
+      {showImageToolOutside && (
+        <ToolButton
+          className={clsx({
+            active: activeTool.type === "image",
+          })}
+          type="radio"
+          icon={ImageIcon}
+          checked={activeTool.type === "image"}
+          name="editor-current-shape"
+          title={`${capitalizeString(t("toolBar.image"))}`}
+          aria-label={capitalizeString(t("toolBar.image"))}
+          data-testid="toolbar-image"
+          onChange={() => handleToolChange("image")}
+        />
+      )}
 
       {/* Text Tool */}
       {showTextToolOutside && (
@@ -347,13 +360,33 @@ export const MobileToolBar = ({
       {/* Other Shapes */}
       <DropdownMenu open={isOtherShapesMenuOpen} placement="top">
         <DropdownMenu.Trigger
-          className={clsx("App-toolbar__extra-tools-trigger", {
-            "App-toolbar__extra-tools-trigger--selected": extraToolSelected,
-          })}
+          className={clsx(
+            "App-toolbar__extra-tools-trigger App-toolbar__extra-tools-trigger--mobile",
+            {
+              "App-toolbar__extra-tools-trigger--selected": extraToolSelected,
+            },
+          )}
           onToggle={() => setIsOtherShapesMenuOpen(!isOtherShapesMenuOpen)}
           title={t("toolBar.extraTools")}
+          style={{
+            width: WIDTH,
+            height: WIDTH,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
         >
-          {extraIcon}
+          <div
+            style={{
+              width: WIDTH,
+              height: WIDTH,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            {extraIcon}
+          </div>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content
           onClickOutside={() => setIsOtherShapesMenuOpen(false)}
diff --git a/packages/excalidraw/css/styles.scss b/packages/excalidraw/css/styles.scss
index 9b41a7372f..b89ee9952b 100644
--- a/packages/excalidraw/css/styles.scss
+++ b/packages/excalidraw/css/styles.scss
@@ -501,7 +501,7 @@ body.excalidraw-cursor-resize * {
       display: none;
     }
     .scroll-back-to-content {
-      bottom: calc(80px + var(--sab, 0));
+      bottom: calc(100px + var(--sab, 0));
       z-index: -1;
     }
   }
diff --git a/packages/excalidraw/css/theme.scss b/packages/excalidraw/css/theme.scss
index ee50900fe9..711804c4a1 100644
--- a/packages/excalidraw/css/theme.scss
+++ b/packages/excalidraw/css/theme.scss
@@ -42,6 +42,7 @@
   --lg-button-size: 2.25rem;
   --lg-icon-size: 1rem;
   --editor-container-padding: 1rem;
+  --mobile-action-button-size: 2.25rem;
 
   @include isMobile {
     --editor-container-padding: 0.75rem;
diff --git a/packages/excalidraw/css/variables.module.scss b/packages/excalidraw/css/variables.module.scss
index c360c0dc6b..fd9a1f4dd7 100644
--- a/packages/excalidraw/css/variables.module.scss
+++ b/packages/excalidraw/css/variables.module.scss
@@ -183,6 +183,8 @@
   border: none;
   box-shadow: 0 0 0 1px var(--color-surface-lowest);
   background-color: var(--color-surface-low);
+  width: var(--moobile-action-button-size, 2.25rem);
+  height: var(--moobile-action-button-size, 2.25rem);
 
   &:active {
     box-shadow: 0 0 0 1px var(--color-brand-active);