diff --git a/apps/client/public/locales/en-US/translation.json b/apps/client/public/locales/en-US/translation.json
index 445d8ef4..7011de7c 100644
--- a/apps/client/public/locales/en-US/translation.json
+++ b/apps/client/public/locales/en-US/translation.json
@@ -355,6 +355,8 @@
   "Insert current date": "Insert current date",
   "Draw and sketch excalidraw diagrams": "Draw and sketch excalidraw diagrams",
   "Multiple": "Multiple",
+  "Turn into": "Turn into",
+  "Text align": "Text align",
   "Heading {{level}}": "Heading {{level}}",
   "Toggle title": "Toggle title",
   "Write anything. Enter \"/\" for commands": "Write anything. Enter \"/\" for commands",
diff --git a/apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css b/apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css
index 8bf696dd..facaf7ff 100644
--- a/apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css
+++ b/apps/client/src/features/editor/components/bubble-menu/bubble-menu.module.css
@@ -8,6 +8,10 @@
   border-radius: 6px;
   border: 1px solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-8));
+  background-color: light-dark(
+    var(--mantine-color-white),
+    var(--mantine-color-dark-6)
+  );
 
   > * {
     flex-shrink: 0;
@@ -36,3 +40,14 @@
   border-right: 1px solid
     light-dark(var(--mantine-color-gray-3), var(--mantine-color-dark-4)) !important;
 }
+
+.divider {
+  width: 1px;
+  height: 16px;
+  align-self: center;
+  margin: 0 4px;
+  background-color: light-dark(
+    var(--mantine-color-gray-3),
+    var(--mantine-color-dark-3)
+  );
+}
diff --git a/apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx b/apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
index 50991d21..a5d3f8a5 100644
--- a/apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
+++ b/apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx
@@ -168,17 +168,20 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
     >
       <div className={classes.bubbleMenu}>
         {isGenerativeAiEnabled && (
-          <Button
-            variant="default"
-            className={clsx(classes.buttonRoot)}
-            radius="0"
-            leftSection={<IconSparkles size={16} />}
-            onClick={() => {
-              setShowAiMenu(true);
-            }}
-          >
-            {t("Ask AI")}
-          </Button>
+          <>
+            <Button
+              variant="default"
+              className={clsx(classes.buttonRoot)}
+              radius="0"
+              leftSection={<IconSparkles size={16} />}
+              onClick={() => {
+                setShowAiMenu(true);
+              }}
+            >
+              {t("Ask AI")}
+            </Button>
+            <div className={classes.divider} />
+          </>
         )}
         <NodeSelector
           editor={props.editor}
@@ -243,16 +246,18 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           }}
         />
 
-        <ActionIcon
-          variant="default"
-          size="lg"
-          radius="6px"
-          aria-label={t(commentItem.name)}
-          style={{ border: "none" }}
-          onClick={commentItem.command}
-        >
-          <IconMessage size={16} stroke={2} />
-        </ActionIcon>
+        <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            radius="6px"
+            aria-label={t(commentItem.name)}
+            style={{ border: "none" }}
+            onClick={commentItem.command}
+          >
+            <IconMessage size={16} stroke={2} />
+          </ActionIcon>
+        </Tooltip>
       </div>
     </BubbleMenu>
   );
diff --git a/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx b/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
index 9f0a78fa..5dc1afbe 100644
--- a/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
+++ b/apps/client/src/features/editor/components/bubble-menu/node-selector.tsx
@@ -12,7 +12,7 @@ import {
   IconListNumbers,
   IconTypography,
 } from "@tabler/icons-react";
-import { Popover, Button, ScrollArea } from "@mantine/core";
+import { Popover, Button, ScrollArea, Tooltip } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -133,16 +133,18 @@ export const NodeSelector: FC<NodeSelectorProps> = ({
   return (
     <Popover opened={isOpen} withArrow>
       <Popover.Target>
-        <Button
-          className={classes.buttonRoot}
-          variant="default"
-          style={{ border: "none", height: "34px" }}
-          radius="0"
-          rightSection={<IconChevronDown size={16} />}
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          {t(activeItem?.name)}
-        </Button>
+        <Tooltip label={t("Turn into")} withArrow withinPortal={false} disabled={isOpen}>
+          <Button
+            className={classes.buttonRoot}
+            variant="default"
+            style={{ border: "none", height: "34px" }}
+            radius="0"
+            rightSection={<IconChevronDown size={16} />}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            {t(activeItem?.name)}
+          </Button>
+        </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown>
diff --git a/apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx b/apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx
index b5277651..f8dba1c9 100644
--- a/apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx
+++ b/apps/client/src/features/editor/components/bubble-menu/text-alignment-selector.tsx
@@ -7,7 +7,7 @@ import {
   IconCheck,
   IconChevronDown,
 } from "@tabler/icons-react";
-import { Popover, Button, ScrollArea, rem } from "@mantine/core";
+import { Popover, Button, ScrollArea, Tooltip, rem } from "@mantine/core";
 import type { Editor } from "@tiptap/react";
 import { useEditorState } from "@tiptap/react";
 import { useTranslation } from "react-i18next";
@@ -84,16 +84,18 @@ export const TextAlignmentSelector: FC<TextAlignmentProps> = ({
   return (
     <Popover opened={isOpen} withArrow>
       <Popover.Target>
-        <Button
-          variant="default"
-          style={{ border: "none", height: "34px" }}
-          px="5"
-          radius="0"
-          rightSection={<IconChevronDown size={16} />}
-          onClick={() => setIsOpen(!isOpen)}
-        >
-          <activeItem.icon style={{ width: rem(16) }} stroke={2} />
-        </Button>
+        <Tooltip label={t("Text align")} withArrow withinPortal={false} disabled={isOpen}>
+          <Button
+            variant="default"
+            style={{ border: "none", height: "34px" }}
+            px="5"
+            radius="0"
+            rightSection={<IconChevronDown size={16} />}
+            onClick={() => setIsOpen(!isOpen)}
+          >
+            <activeItem.icon style={{ width: rem(16) }} stroke={2} />
+          </Button>
+        </Tooltip>
       </Popover.Target>
 
       <Popover.Dropdown>