diff --git a/packages/editor/src/extensions/code-block/component.tsx b/packages/editor/src/extensions/code-block/component.tsx
index a9a9a852cb..21e6134920 100644
--- a/packages/editor/src/extensions/code-block/component.tsx
+++ b/packages/editor/src/extensions/code-block/component.tsx
@@ -81,7 +81,6 @@ export function CodeblockComponent(
               }
             },
             fontFamily: "monospace",
-            fontSize: "code",
             whiteSpace: "pre", // TODO !important
             tabSize: 1,
             position: "relative",
diff --git a/packages/editor/src/toolbar/components/counter.tsx b/packages/editor/src/toolbar/components/counter.tsx
index e8e0a36dd2..969c53ecd1 100644
--- a/packages/editor/src/toolbar/components/counter.tsx
+++ b/packages/editor/src/toolbar/components/counter.tsx
@@ -28,9 +28,10 @@ export type CounterProps = {
   onDecrease: () => void;
   onReset: () => void;
   value: string;
+  disabled?: boolean;
 };
 function _Counter(props: CounterProps) {
-  const { title, onDecrease, onIncrease, onReset, value } = props;
+  const { title, onDecrease, onIncrease, onReset, value, disabled } = props;
   const isMobile = useIsMobile();
 
   return (
@@ -39,24 +40,29 @@ function _Counter(props: CounterProps) {
         alignItems: "stretch",
         borderRadius: "default",
         overflow: "hidden",
-        cursor: "pointer",
+        cursor: disabled ? "not-allowed" : "pointer",
         height: "100%",
         ":hover": {
-          bg: isMobile ? "transparent" : "hover-secondary"
+          bg: isMobile || disabled ? "transparent" : "hover-secondary"
         }
       }}
-      onClick={onReset}
-      title={`Click to reset ${title}`}
+      onClick={disabled ? undefined : onReset}
+      title={disabled ? "" : `Click to reset ${title}`}
     >
       <ToolButton
         toggled={false}
         title={`Decrease ${title}`}
         icon="minus"
         variant={"small"}
-        onClick={(e) => {
-          e.stopPropagation();
-          onDecrease();
-        }}
+        disabled={disabled}
+        onClick={
+          disabled
+            ? undefined
+            : (e) => {
+                e.stopPropagation();
+                onDecrease();
+              }
+        }
       />
 
       <Text
@@ -65,7 +71,8 @@ function _Counter(props: CounterProps) {
           fontSize: "subBody",
           alignSelf: "center",
           mx: 1,
-          textAlign: "center"
+          textAlign: "center",
+          opacity: disabled ? 0.5 : 1
         }}
       >
         {value}
@@ -76,15 +83,20 @@ function _Counter(props: CounterProps) {
         title={`Increase ${title}`}
         icon="plus"
         variant={"small"}
-        onClick={(e) => {
-          e.stopPropagation();
-          onIncrease();
-        }}
+        disabled={disabled}
+        onClick={
+          disabled
+            ? undefined
+            : (e) => {
+                e.stopPropagation();
+                onIncrease();
+              }
+        }
       />
     </Flex>
   );
 }
 
 export const Counter = React.memo(_Counter, (prev, next) => {
-  return prev.value === next.value;
+  return prev.value === next.value && prev.disabled === next.disabled;
 });
diff --git a/packages/editor/src/toolbar/components/dropdown.tsx b/packages/editor/src/toolbar/components/dropdown.tsx
index 0f5c477318..345399021d 100644
--- a/packages/editor/src/toolbar/components/dropdown.tsx
+++ b/packages/editor/src/toolbar/components/dropdown.tsx
@@ -33,9 +33,11 @@ type DropdownProps = {
   items: MenuItem[];
   buttonRef?: React.MutableRefObject<HTMLButtonElement | undefined>;
   menuWidth?: number;
+  disabled?: boolean;
 };
 export function Dropdown(props: DropdownProps) {
-  const { id, group, items, selectedItem, buttonRef, menuWidth } = props;
+  const { id, group, items, selectedItem, buttonRef, menuWidth, disabled } =
+    props;
   const internalRef = useRef<HTMLButtonElement>();
   const [isOpen, setIsOpen] = useState(false);
   const toolbarLocation = useToolbarLocation();
@@ -74,6 +76,7 @@ export function Dropdown(props: DropdownProps) {
                 bg: "transparent"
               }
         }}
+        disabled={disabled}
         onClick={() => setIsOpen((s) => !s)}
         onMouseDown={(e) => e.preventDefault()}
       >
diff --git a/packages/editor/src/toolbar/components/tool-button.tsx b/packages/editor/src/toolbar/components/tool-button.tsx
index 2a21bd83cb..d84e0e3772 100644
--- a/packages/editor/src/toolbar/components/tool-button.tsx
+++ b/packages/editor/src/toolbar/components/tool-button.tsx
@@ -89,6 +89,7 @@ export const ToolButton = React.memo(
     return (
       prev.toggled === next.toggled &&
       prev.icon === next.icon &&
+      prev.disabled === next.disabled &&
       JSON.stringify(prev.sx) === JSON.stringify(next.sx)
     );
   }
diff --git a/packages/editor/src/toolbar/tools/alignment.tsx b/packages/editor/src/toolbar/tools/alignment.tsx
index 2304cda4d5..8877cd6d4a 100644
--- a/packages/editor/src/toolbar/tools/alignment.tsx
+++ b/packages/editor/src/toolbar/tools/alignment.tsx
@@ -21,6 +21,7 @@ import { ToolProps } from "../types";
 import { ToolButton } from "../components/tool-button";
 import { useRefValue } from "../../hooks/use-ref-value";
 import { IconNames } from "../icons";
+import { CodeBlock } from "../../extensions/code-block";
 
 type Alignment = "left" | "right" | "center" | "justify";
 type AlignmentToolProps = ToolProps & {
@@ -40,6 +41,7 @@ function AlignmentTool(props: AlignmentToolProps) {
           .setTextAlign(alignmentRef.current)
           .run();
       }}
+      disabled={editor.isActive(CodeBlock.name)}
       toggled={false}
     />
   );
diff --git a/packages/editor/src/toolbar/tools/font.tsx b/packages/editor/src/toolbar/tools/font.tsx
index 84dfe84057..2034bf7304 100644
--- a/packages/editor/src/toolbar/tools/font.tsx
+++ b/packages/editor/src/toolbar/tools/font.tsx
@@ -26,6 +26,7 @@ import { Counter } from "../components/counter";
 import { useRefValue } from "../../hooks/use-ref-value";
 import { useToolbarStore } from "../stores/toolbar-store";
 import { getFontById, getFontIds, getFonts } from "../../utils/font";
+import { CodeBlock } from "../../extensions/code-block";
 
 export function FontSize(props: ToolProps) {
   const { editor } = props;
@@ -45,7 +46,8 @@ export function FontSize(props: ToolProps) {
 
   return (
     <Counter
-      title="font size"
+      title="Font size"
+      disabled={editor.isActive(CodeBlock.name)}
       onDecrease={() =>
         editor.current
           ?.chain()
@@ -93,6 +95,7 @@ export function FontFamily(props: ToolProps) {
       selectedItem={getFontById(currentFontFamily)?.title || defaultFontFamily}
       items={items}
       menuWidth={130}
+      disabled={editor.isActive(CodeBlock.name)}
     />
   );
 }
diff --git a/packages/editor/src/toolbar/tools/headings.tsx b/packages/editor/src/toolbar/tools/headings.tsx
index 3f7a597a60..a15d632638 100644
--- a/packages/editor/src/toolbar/tools/headings.tsx
+++ b/packages/editor/src/toolbar/tools/headings.tsx
@@ -23,6 +23,7 @@ import { Dropdown } from "../components/dropdown";
 import { MenuItem } from "@notesnook/ui";
 import { ToolbarLocation, useToolbarLocation } from "../stores/toolbar-store";
 import { useMemo } from "react";
+import { CodeBlock } from "../../extensions/code-block";
 
 const defaultLevels = [1, 2, 3, 4, 5, 6] as const;
 
@@ -48,6 +49,7 @@ export function Headings(props: ToolProps) {
       }
       items={items}
       menuWidth={130}
+      disabled={editor.isActive(CodeBlock.name)}
     />
   );
 }
diff --git a/packages/editor/src/toolbar/tools/inline.tsx b/packages/editor/src/toolbar/tools/inline.tsx
index b2999865cd..41d482d5f0 100644
--- a/packages/editor/src/toolbar/tools/inline.tsx
+++ b/packages/editor/src/toolbar/tools/inline.tsx
@@ -20,6 +20,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { ToolProps } from "../types";
 import { ToolButton } from "../components/tool-button";
 import { useToolbarLocation } from "../stores/toolbar-store";
+import { CodeBlock } from "../../extensions/code-block";
 
 export function Italic(props: ToolProps) {
   const { editor } = props;
@@ -61,6 +62,7 @@ export function Code(props: ToolProps) {
     <ToolButton
       {...props}
       toggled={editor.isActive("code")}
+      disabled={editor.isActive(CodeBlock.name)}
       onClick={() => editor.current?.chain().focus().toggleCode().run()}
     />
   );
@@ -84,6 +86,7 @@ export function Subscript(props: ToolProps) {
     <ToolButton
       {...props}
       toggled={editor.isActive("subscript")}
+      disabled={editor.isActive(CodeBlock.name)}
       onClick={() => editor.current?.chain().focus().toggleSubscript().run()}
     />
   );
@@ -95,6 +98,7 @@ export function Superscript(props: ToolProps) {
     <ToolButton
       {...props}
       toggled={editor.isActive("superscript")}
+      disabled={editor.isActive(CodeBlock.name)}
       onClick={() => editor.current?.chain().focus().toggleSuperscript().run()}
     />
   );
@@ -139,6 +143,7 @@ export function Math(props: ToolProps) {
       {...props}
       toggled={false}
       onClick={() => editor.current?.chain().focus().insertMathInline().run()}
+      disabled={editor.isActive(CodeBlock.name)}
     />
   );
 }
diff --git a/packages/editor/src/toolbar/tools/text-direction.tsx b/packages/editor/src/toolbar/tools/text-direction.tsx
index 43412efa38..b8209408cb 100644
--- a/packages/editor/src/toolbar/tools/text-direction.tsx
+++ b/packages/editor/src/toolbar/tools/text-direction.tsx
@@ -25,6 +25,7 @@ import {
   getTextDirection,
   TextDirections
 } from "../../extensions/text-direction";
+import { CodeBlock } from "../../extensions/code-block";
 
 type TextDirectionToolProps = ToolProps & {
   direction: TextDirections;
@@ -43,6 +44,7 @@ function TextDirectionTool(props: TextDirectionToolProps) {
           .setTextDirection(directionRef.current)
           .run()
       }
+      disabled={editor.isActive(CodeBlock.name)}
       toggled={false}
     />
   );
diff --git a/packages/theme/src/theme/variants/button.ts b/packages/theme/src/theme/variants/button.ts
index 61e7551354..ecb8937d8d 100644
--- a/packages/theme/src/theme/variants/button.ts
+++ b/packages/theme/src/theme/variants/button.ts
@@ -50,7 +50,7 @@ export const createButtonVariant = (
     filter: "brightness(90%)",
     ...states?.hover
   },
-  ":active": {
+  ":active:not(:disabled)": {
     bg: background,
     filter: "brightness(85%)",
     transform: "scale(0.98) !important",