diff --git a/src/shared/assets/code-fill.svg b/src/shared/assets/code-fill.svg
new file mode 100644
index 0000000..c43d4e7
--- /dev/null
+++ b/src/shared/assets/code-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="currentColor" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="currentColor" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
\ No newline at end of file
diff --git a/src/stories/editor/floatingMenu.tsx b/src/stories/editor/floatingMenu.tsx
index 4a7efd0..966003f 100644
--- a/src/stories/editor/floatingMenu.tsx
+++ b/src/stories/editor/floatingMenu.tsx
@@ -3,23 +3,26 @@ import styled from "styled-components";
 import { FloatingMenuArgs } from "./_types";
 
 import { ReactComponent as BoldIcon } from "../../shared/assets/bold-fill.svg";
+import { ReactComponent as CodeIcon } from "../../shared/assets/code-fill.svg";
 import { ReactComponent as H1Icon } from "../../shared/assets/h1-fill.svg";
 import { ReactComponent as H2Icon } from "../../shared/assets/h2-fill.svg";
 import { ReactComponent as H3Icon } from "../../shared/assets/h3-fill.svg"; // IGNORE
 import { ReactComponent as ItalicIcon } from "../../shared/assets/italic-fill.svg";
 import { ReactComponent as QuoteIcon } from "../../shared/assets/quote-fill.svg";
 
+import { Button } from "../button/Button";
 import { Card } from "../card/Card";
 
-const StyledIconButton = styled.button<{
-  isBasic?: boolean;
-  isPrimary?: boolean;
-  isPill?: boolean;
+const StyledIconButton = styled(Button)<{
   size?: "small" | "medium" | "large";
 }>``;
 
 const MenuContainer = styled(Card)`
-  padding: ${({ theme }) => theme.grid.sizes[1]};
+  border: none;
+  .aq-card-body {
+    display: flex;
+    gap: ${({ theme }) => theme.grid.sizes[1]};
+  }
 
   ${StyledIconButton} {
     :first-child {
@@ -54,9 +57,7 @@ export const FloatingMenu = (props: FloatingMenuArgs) => {
             onClick={() =>
               editor.chain().focus().toggleHeading({ level: 1 }).run()
             }
-            isBasic={!editor.isActive("heading", { level: 1 })}
-            isPrimary={editor.isActive("heading", { level: 1 })}
-            isPill={false}
+            flat
           >
             <H1Icon key="ug-h1-button-bubble-menu" />
           </StyledIconButton>
@@ -65,9 +66,7 @@ export const FloatingMenu = (props: FloatingMenuArgs) => {
             onClick={() =>
               editor.chain().focus().toggleHeading({ level: 2 }).run()
             }
-            isBasic={!editor.isActive("heading", { level: 2 })}
-            isPrimary={editor.isActive("heading", { level: 2 })}
-            isPill={false}
+            flat
           >
             <H2Icon key="ug-h2-button-bubble-menu" />
           </StyledIconButton>
@@ -76,9 +75,7 @@ export const FloatingMenu = (props: FloatingMenuArgs) => {
             onClick={() =>
               editor.chain().focus().toggleHeading({ level: 3 }).run()
             }
-            isBasic={!editor.isActive("heading", { level: 3 })}
-            isPrimary={editor.isActive("heading", { level: 3 })}
-            isPill={false}
+            flat
           >
             <H3Icon key="ug-h3-button-bubble-menu" />
           </StyledIconButton>
@@ -86,30 +83,31 @@ export const FloatingMenu = (props: FloatingMenuArgs) => {
           <StyledIconButton
             size={"small"}
             onClick={() => editor.chain().focus().toggleBold().run()}
-            isBasic={!editor.isActive("bold")}
-            isPrimary={editor.isActive("bold")}
-            isPill={false}
+            flat
           >
             <BoldIcon key="ug-bold-button-bubble-menu" />
           </StyledIconButton>
           <StyledIconButton
             size={"small"}
             onClick={() => editor.chain().focus().toggleItalic().run()}
-            isBasic={!editor.isActive("italic")}
-            isPrimary={editor.isActive("italic")}
-            isPill={false}
+            flat
           >
             <ItalicIcon key="ug-italic-button-bubble-menu" />
           </StyledIconButton>
           <StyledIconButton
             size={"small"}
             onClick={() => editor.chain().focus().toggleBlockquote().run()}
-            isBasic={!editor.isActive("blockquote")}
-            isPrimary={editor.isActive("blockquote")}
-            isPill={false}
+            flat
           >
             <QuoteIcon key="ug-quote-button-bubble-menu" />
           </StyledIconButton>
+          <StyledIconButton
+            size={"small"}
+            onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+            flat
+          >
+            <CodeIcon width="16" height="16" key="ug-code-button-bubble-menu" />
+          </StyledIconButton>
         </MenuContainer>
       </BubbleMenu>
     </div>
diff --git a/src/stories/editor/index.stories.tsx b/src/stories/editor/index.stories.tsx
index fdae811..fc61896 100644
--- a/src/stories/editor/index.stories.tsx
+++ b/src/stories/editor/index.stories.tsx
@@ -34,6 +34,7 @@ Markdown.args = {
   contentType: "markdown",
   disableHeader: true,
   className: "markdown-editor",
+  hasInlineMenu: true,
   disableSaveShortcut: true,
 };