diff --git a/public/icons/editor-bold.svg b/public/icons/editor-bold.svg
new file mode 100644
index 00000000..aa465b4f
--- /dev/null
+++ b/public/icons/editor-bold.svg
@@ -0,0 +1,3 @@
+<svg width="13" height="16" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.82857 7.76C10.9371 6.99429 11.7143 5.73714 11.7143 4.57143C11.7143 1.98857 9.71428 0 7.14286 0H0V16H8.04571C10.4343 16 12.2857 14.0571 12.2857 11.6686C12.2857 9.93143 11.3029 8.44571 9.82857 7.76ZM3.42799 2.85708H6.85656C7.80513 2.85708 8.57085 3.6228 8.57085 4.57137C8.57085 5.51994 7.80513 6.28565 6.85656 6.28565H3.42799V2.85708ZM3.42799 13.1429H7.42799C8.37656 13.1429 9.14228 12.3772 9.14228 11.4286C9.14228 10.4801 8.37656 9.71434 7.42799 9.71434H3.42799V13.1429Z" fill="currentColor"/>
+</svg>
diff --git a/public/icons/editor-footnote.svg b/public/icons/editor-footnote.svg
new file mode 100644
index 00000000..13efe4d8
--- /dev/null
+++ b/public/icons/editor-footnote.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.66106 15.5L8.02241 10.0122L11.3838 15.5L14.0728 13.5793L10.1737 8.73171L16 7.26829L14.8796 4.06707L9.27731 6.30793L9.68067 0.5H6.36415L6.72269 6.30793L1.16527 4.06707L0 7.26829L5.82633 8.73171L1.92717 13.5793L4.66106 15.5Z" fill="currentColor"/>
+</svg>
diff --git a/public/icons/editor-link.svg b/public/icons/editor-link.svg
index c4943bd3..804689f3 100644
--- a/public/icons/editor-link.svg
+++ b/public/icons/editor-link.svg
@@ -1,3 +1,3 @@
-<svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M1.71 5C1.71 3.461 2.961 2.21 4.5 2.21H8.1V0.5H4.5C2.016 0.5 0 2.516 0 5C0 7.484 2.016 9.5 4.5 9.5H8.1V7.79H4.5C2.961 7.79 1.71 6.539 1.71 5ZM5.39844 5.90156H12.5984V4.10156H5.39844V5.90156ZM9.89941 0.5H13.4994C15.9834 0.5 17.9994 2.516 17.9994 5C17.9994 7.484 15.9834 9.5 13.4994 9.5H9.89941V7.79H13.4994C15.0384 7.79 16.2894 6.539 16.2894 5C16.2894 3.461 15.0384 2.21 13.4994 2.21H9.89941V0.5Z" fill="currentColor"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.27177 14.7277C2.06258 13.5186 2.06258 11.5527 3.27177 10.3435L6.10029 7.51502L4.75675 6.17148L1.92823 9C-0.0234511 10.9517 -0.0234511 14.1196 1.92823 16.0713C3.87991 18.023 7.04785 18.023 8.99952 16.0713L11.828 13.2428L10.4845 11.8992L7.65598 14.7277C6.44679 15.9369 4.48097 15.9369 3.27177 14.7277ZM6.87756 12.536L12.5346 6.87895L11.1203 5.46469L5.4633 11.1217L6.87756 12.536ZM6.17055 4.75768L8.99907 1.92916C10.9507 -0.0225206 14.1187 -0.0225201 16.0704 1.92916C18.022 3.88084 18.022 7.04878 16.0704 9.00046L13.2418 11.829L11.8983 10.4854L14.7268 7.65691C15.936 6.44772 15.936 4.4819 14.7268 3.27271C13.5176 2.06351 11.5518 2.06351 10.3426 3.2727L7.51409 6.10122L6.17055 4.75768Z" fill="currentColor"/>
 </svg>
diff --git a/public/icons/editor-plus.svg b/public/icons/editor-plus.svg
new file mode 100644
index 00000000..67faf3cc
--- /dev/null
+++ b/public/icons/editor-plus.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M21 9L0 9L1.50847e-07 13L21 13V9Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 21.5L12.5 0.5L8.5 0.5L8.5 21.5H12.5Z" fill="currentColor"/>
+</svg>
diff --git a/public/icons/editor-text-size.svg b/public/icons/editor-text-size.svg
new file mode 100644
index 00000000..f18431a4
--- /dev/null
+++ b/public/icons/editor-text-size.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="16" viewBox="0 0 21 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.39999 3.19998V0H20.2666V3.19998H14.9333V15.9999H11.7333V3.19998H6.39999ZM3.19998 8.5334H0V5.33342H9.59994V8.5334H6.39996V16H3.19998V8.5334Z" fill="currentColor"/>
+</svg>
diff --git a/public/icons/editor-ul.svg b/public/icons/editor-ul.svg
new file mode 100644
index 00000000..a23aad81
--- /dev/null
+++ b/public/icons/editor-ul.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.000114441 1.6C0.000114441 0.714665 0.71478 0 1.60011 0C2.48544 0 3.20011 0.714665 3.20011 1.6C3.20011 2.48533 2.48544 3.19999 1.60011 3.19999C0.71478 3.19999 0.000114441 2.48533 0.000114441 1.6ZM0 8.00013C0 7.1148 0.714665 6.40014 1.6 6.40014C2.48533 6.40014 3.19999 7.1148 3.19999 8.00013C3.19999 8.88547 2.48533 9.60013 1.6 9.60013C0.714665 9.60013 0 8.88547 0 8.00013ZM1.6 12.8C0.714665 12.8 0 13.5254 0 14.4C0 15.2747 0.725332 16 1.6 16C2.47466 16 3.19999 15.2747 3.19999 14.4C3.19999 13.5254 2.48533 12.8 1.6 12.8ZM19.7333 15.4662H4.79999V13.3329H19.7333V15.4662ZM4.79999 9.06677H19.7333V6.93344H4.79999V9.06677ZM4.79999 2.66664V0.533307H19.7333V2.66664H4.79999Z" fill="currentColor"/>
+</svg>
diff --git a/src/components/Editor/EditorBubbleMenu.module.scss b/src/components/Editor/EditorBubbleMenu.module.scss
index e69de29b..97d246c2 100644
--- a/src/components/Editor/EditorBubbleMenu.module.scss
+++ b/src/components/Editor/EditorBubbleMenu.module.scss
@@ -0,0 +1,22 @@
+.bubbleMenu {
+  background: #fff;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
+}
+
+.bubbleMenuButton {
+  opacity: 0.5;
+  padding: 1rem;
+}
+
+.bubbleMenuButtonActive {
+  opacity: 1;
+}
+
+.delimiter {
+  background: #999;
+  display: inline-block;
+  height: 1.4em;
+  margin: 0 0.2em;
+  vertical-align: text-bottom;
+  width: 1px;
+}
diff --git a/src/components/Editor/EditorBubbleMenu.tsx b/src/components/Editor/EditorBubbleMenu.tsx
index e94cb659..043f8aac 100644
--- a/src/components/Editor/EditorBubbleMenu.tsx
+++ b/src/components/Editor/EditorBubbleMenu.tsx
@@ -1,4 +1,7 @@
 import type { Editor } from '@tiptap/core'
+import styles from './EditorBubbleMenu.module.scss'
+import { Icon } from '../_shared/Icon'
+import { clsx } from 'clsx'
 
 type BubbleMenuProps = {
   editor: Editor
@@ -7,8 +10,27 @@ type BubbleMenuProps = {
 
 export const EditorBubbleMenu = (props: BubbleMenuProps) => {
   return (
-    <div ref={props.ref}>
-      <button>bold</button>
+    <div ref={props.ref} class={styles.bubbleMenu}>
+      <button class={clsx(styles.bubbleMenuButton, styles.bubbleMenuButtonActive)}>
+        <Icon name="editor-text-size" />
+      </button>
+      <button class={styles.bubbleMenuButton}>
+        <Icon name="editor-bold" />
+      </button>
+      <button class={styles.bubbleMenuButton}>
+        <Icon name="editor-italic" />
+      </button>
+      <div class={styles.delimiter}></div>
+      <button class={styles.bubbleMenuButton}>
+        <Icon name="editor-link" />
+      </button>
+      <button class={styles.bubbleMenuButton}>
+        <Icon name="editor-footnote" />
+      </button>
+      <div class={styles.delimiter}></div>
+      <button class={styles.bubbleMenuButton}>
+        <Icon name="editor-ul" />
+      </button>
     </div>
   )
 }
diff --git a/src/components/Editor/EditorFloatingMenu.module.scss b/src/components/Editor/EditorFloatingMenu.module.scss
index e10d9ca3..e6fd6cee 100644
--- a/src/components/Editor/EditorFloatingMenu.module.scss
+++ b/src/components/Editor/EditorFloatingMenu.module.scss
@@ -1,4 +1,10 @@
 .editorFloatingMenu {
+  left: 0;
   position: relative;
-  left: -100%;
+  vertical-align: middle;
+
+  button {
+    opacity: 0.3;
+    vertical-align: text-bottom;
+  }
 }
diff --git a/src/components/Editor/EditorFloatingMenu.tsx b/src/components/Editor/EditorFloatingMenu.tsx
index 1a9ed129..16eda00c 100644
--- a/src/components/Editor/EditorFloatingMenu.tsx
+++ b/src/components/Editor/EditorFloatingMenu.tsx
@@ -1,5 +1,6 @@
 import type { Editor } from '@tiptap/core'
 import styles from './EditorFloatingMenu.module.scss'
+import { Icon } from '../_shared/Icon'
 
 type FloatingMenuProps = {
   editor: Editor
@@ -9,7 +10,9 @@ type FloatingMenuProps = {
 export const EditorFloatingMenu = (props: FloatingMenuProps) => {
   return (
     <div ref={props.ref} class={styles.editorFloatingMenu}>
-      <button>+</button>
+      <button>
+        <Icon name="editor-plus" />
+      </button>
     </div>
   )
 }