diff --git a/components/Toolbar/index.tsx b/components/Toolbar/index.tsx
index f4b218eb..7b95f71e 100644
--- a/components/Toolbar/index.tsx
+++ b/components/Toolbar/index.tsx
@@ -17,6 +17,7 @@ import { MultiselectToolbar } from "./MultiSelectToolbar";
 import { AreYouSure, deleteBlock } from "components/Blocks/DeleteBlock";
 import { TooltipButton } from "components/Buttons";
 import { TextAlignmentToolbar } from "./TextAlignmentToolbar";
+import { useIsMobile } from "src/hooks/isMobile";
 
 export type ToolbarTypes =
   | "areYouSure"
@@ -78,10 +79,14 @@ export const Toolbar = (props: { pageID: string; blockID: string }) => {
       setToolbarState("default");
     }
   }, [selectedBlocks.length, toolbarState]);
+  let isMobile = useIsMobile();
 
   return (
     <Tooltip.Provider>
-      <div className="toolbar flex gap-2 items-center justify-between w-full h-[calc(21px+var(--safe-padding-bottom))]">
+      <div
+        className={`toolbar flex gap-2 items-center justify-between w-full
+        ${isMobile ? "h-[calc(21px+var(--safe-padding-bottom))]" : "h-[26px]"}`}
+      >
         <div className="toolbarOptions flex gap-1 sm:gap-[6px] items-center grow">
           {toolbarState === "default" ? (
             <TextToolbar