diff --git a/components/editor/live-editor.jsx b/components/editor/live-editor.jsx
index dbd37c1..b338cf4 100644
--- a/components/editor/live-editor.jsx
+++ b/components/editor/live-editor.jsx
@@ -1,196 +1,24 @@
-import {Color} from '@tiptap/extension-color'
+import { Color } from '@tiptap/extension-color'
 import ListItem from '@tiptap/extension-list-item'
 import TextStyle from '@tiptap/extension-text-style'
-import { FloatingMenu, Extension, useCurrentEditor, useEditor, EditorProvider} from '@tiptap/react'
+import { EditorProvider, Extension, FloatingMenu, useEditor } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
-import React, {useEffect} from 'react'
-
-const MenuBar = () => {
-  const {editor} = useCurrentEditor()
-
-  if (!editor) {
-    return null
-  }
-
-  return (
-    <>
-      <button
-        onClick={() => editor.chain().focus().toggleBold().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleBold()
-            .run()
-        }
-        className={editor.isActive('bold') ? 'is-active' : ''}
-      >
-        bold
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleItalic().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleItalic()
-            .run()
-        }
-        className={editor.isActive('italic') ? 'is-active' : ''}
-      >
-        italic
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleStrike().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleStrike()
-            .run()
-        }
-        className={editor.isActive('strike') ? 'is-active' : ''}
-      >
-        strike
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCode().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .toggleCode()
-            .run()
-        }
-        className={editor.isActive('code') ? 'is-active' : ''}
-      >
-        code
-      </button>
-      <button onClick={() => editor.chain().focus().unsetAllMarks().run()}>
-        clear marks
-      </button>
-      <button onClick={() => editor.chain().focus().clearNodes().run()}>
-        clear nodes
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setParagraph().run()}
-        className={editor.isActive('paragraph') ? 'is-active' : ''}
-      >
-        paragraph
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({level: 1}).run()}
-        className={editor.isActive('heading', {level: 1}) ? 'is-active' : ''}
-      >
-        h1
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({level: 2}).run()}
-        className={editor.isActive('heading', {level: 2}) ? 'is-active' : ''}
-      >
-        h2
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({level: 3}).run()}
-        className={editor.isActive('heading', {level: 3}) ? 'is-active' : ''}
-      >
-        h3
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({level: 4}).run()}
-        className={editor.isActive('heading', {level: 4}) ? 'is-active' : ''}
-      >
-        h4
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({level: 5}).run()}
-        className={editor.isActive('heading', {level: 5}) ? 'is-active' : ''}
-      >
-        h5
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleHeading({level: 6}).run()}
-        className={editor.isActive('heading', {level: 6}) ? 'is-active' : ''}
-      >
-        h6
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBulletList().run()}
-        className={editor.isActive('bulletList') ? 'is-active' : ''}
-      >
-        bullet list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleOrderedList().run()}
-        className={editor.isActive('orderedList') ? 'is-active' : ''}
-      >
-        ordered list
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
-        className={editor.isActive('codeBlock') ? 'is-active' : ''}
-      >
-        code block
-      </button>
-      <button
-        onClick={() => editor.chain().focus().toggleBlockquote().run()}
-        className={editor.isActive('blockquote') ? 'is-active' : ''}
-      >
-        blockquote
-      </button>
-      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
-        horizontal rule
-      </button>
-      <button onClick={() => editor.chain().focus().setHardBreak().run()}>
-        hard break
-      </button>
-      <button
-        onClick={() => editor.chain().focus().undo().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .undo()
-            .run()
-        }
-      >
-        undo
-      </button>
-      <button
-        onClick={() => editor.chain().focus().redo().run()}
-        disabled={
-          !editor.can()
-            .chain()
-            .focus()
-            .redo()
-            .run()
-        }
-      >
-        redo
-      </button>
-      <button
-        onClick={() => editor.chain().focus().setColor('#958DF1').run()}
-        className={editor.isActive('textStyle', {color: '#958DF1'}) ? 'is-active' : ''}
-      >
-        purple
-      </button>
-    </>
-  )
-}
+import React from 'react'
+import { MenuBar } from './menu-bar'
 
 const AiPlugin = Extension.create({
   // @ts-ignore
-  addKeyboardShortcuts() {
+  addKeyboardShortcuts () {
     return {
       '/': (props) => {
         const editor = props.editor
         //
         if (editor.isActive('paragraph')) {
-          console.log("paragraph")
+          console.log('paragraph')
         }
         // editor.isActive('heading', {level: 3})
         if (editor.isActive('heading')) {
-          console.log("heading")
+          console.log('heading')
         }
       }
     }
@@ -199,9 +27,9 @@ const AiPlugin = Extension.create({
 
 const extensions = [
   AiPlugin,
-  Color.configure({types: [TextStyle.name, ListItem.name]}),
+  Color.configure({ types: [TextStyle.name, ListItem.name] }),
   // @ts-ignore
-  TextStyle.configure({types: [ListItem.name]}),
+  TextStyle.configure({ types: [ListItem.name] }),
   StarterKit.configure({
     bulletList: {
       keepMarks: true,
@@ -251,30 +79,18 @@ const LiveEditor = () => {
     content: content,
   })
 
-  const [isEditable, setIsEditable] = React.useState(true)
-
-  useEffect(() => {
-    if (editor) {
-      editor.setEditable(isEditable)
-    }
-  }, [isEditable, editor])
-
   return (
     <>
-      <div>
-        <input type="checkbox" checked={isEditable} onChange={() => setIsEditable(!isEditable)}/>
-        Editable
-      </div>
-      {editor && <FloatingMenu editor={editor} tippyOptions={{duration: 100}}>
+      {editor && <FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
         <button
-          onClick={() => editor.chain().focus().toggleHeading({level: 1}).run()}
-          className={editor.isActive('heading', {level: 1}) ? 'is-active' : ''}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+          className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
         >
           h1
         </button>
         <button
-          onClick={() => editor.chain().focus().toggleHeading({level: 2}).run()}
-          className={editor.isActive('heading', {level: 2}) ? 'is-active' : ''}
+          onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+          className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
         >
           h2
         </button>
diff --git a/components/editor/menu-bar.jsx b/components/editor/menu-bar.jsx
new file mode 100644
index 0000000..9871d47
--- /dev/null
+++ b/components/editor/menu-bar.jsx
@@ -0,0 +1,135 @@
+import { useCurrentEditor } from '@tiptap/react'
+import {
+  ActivityLogIcon,
+  CodeIcon,
+  DividerHorizontalIcon,
+  FontBoldIcon,
+  FontItalicIcon,
+  ListBulletIcon,
+  QuoteIcon,
+  StrikethroughIcon, TextIcon
+} from '@radix-ui/react-icons'
+import React from 'react'
+
+export const MenuBar = () => {
+  const { editor } = useCurrentEditor()
+
+  if (!editor) {
+    return null
+  }
+
+  return (
+    <>
+      <button
+        onClick={() => editor.chain().focus().toggleBold().run()}
+        disabled={!editor.can().chain().focus().toggleBold().run()}
+        className={editor.isActive('bold') ? 'is-active' : ''}
+      >
+        <FontBoldIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleItalic().run()}
+        disabled={!editor.can().chain().focus().toggleItalic().run()}
+        className={editor.isActive('italic') ? 'is-active' : ''}
+      >
+        <FontItalicIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleStrike().run()}
+        disabled={!editor.can().chain().focus().toggleStrike().run()}
+        className={editor.isActive('strike') ? 'is-active' : ''}
+      >
+        <StrikethroughIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleCode().run()}
+        disabled={!editor.can().chain().focus().toggleCode().run()}
+        className={editor.isActive('code') ? 'is-active' : ''}
+      >
+        <CodeIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().setParagraph().run()}
+        className={editor.isActive('paragraph') ? 'is-active' : ''}
+      >
+        <TextIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 1 }).run()}
+        className={editor.isActive('heading', { level: 1 }) ? 'is-active' : ''}
+      >
+        H1
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
+        className={editor.isActive('heading', { level: 2 }) ? 'is-active' : ''}
+      >
+        H2
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
+        className={editor.isActive('heading', { level: 3 }) ? 'is-active' : ''}
+      >
+        H3
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 4 }).run()}
+        className={editor.isActive('heading', { level: 4 }) ? 'is-active' : ''}
+      >
+        H4
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 5 }).run()}
+        className={editor.isActive('heading', { level: 5 }) ? 'is-active' : ''}
+      >
+        H5
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleHeading({ level: 6 }).run()}
+        className={editor.isActive('heading', { level: 6 }) ? 'is-active' : ''}
+      >
+        H6
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleBulletList().run()}
+        className={editor.isActive('bulletList') ? 'is-active' : ''}
+      >
+        <ListBulletIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleOrderedList().run()}
+        className={editor.isActive('orderedList') ? 'is-active' : ''}
+      >
+        <ActivityLogIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleCodeBlock().run()}
+        className={editor.isActive('codeBlock') ? 'is-active' : ''}
+      >
+        <CodeIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().toggleBlockquote().run()}
+        className={editor.isActive('blockquote') ? 'is-active' : ''}
+      >
+        <QuoteIcon/>
+      </button>
+      <button onClick={() => editor.chain().focus().setHorizontalRule().run()}>
+        <DividerHorizontalIcon/>
+      </button>
+      <button
+        onClick={() => editor.chain().focus().undo().run()}
+        disabled={!editor.can().chain().focus().undo().run()}
+      >
+        undo
+      </button>
+      <button
+        onClick={() => editor.chain().focus().redo().run()}
+        disabled={!editor.can().chain().focus().redo().run()}
+      >
+        redo
+      </button>
+
+    </>
+  )
+}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index ad97aa5..2ef9023 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,6 +5,7 @@
   "packages": {
     "": {
       "dependencies": {
+        "@radix-ui/react-icons": "^1.3.0",
         "@tiptap/core": "2.1.12",
         "@tiptap/extension-blockquote": "^2.1.12",
         "@tiptap/extension-bold": "^2.1.12",
@@ -202,6 +203,14 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@radix-ui/react-icons": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-icons/-/react-icons-1.3.0.tgz",
+      "integrity": "sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==",
+      "peerDependencies": {
+        "react": "^16.x || ^17.x || ^18.x"
+      }
+    },
     "node_modules/@remirror/core-constants": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz",
diff --git a/package.json b/package.json
index f0a2534..be51fa9 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@radix-ui/react-icons": "^1.3.0",
     "@tiptap/core": "2.1.12",
     "@tiptap/extension-blockquote": "^2.1.12",
     "@tiptap/extension-bold": "^2.1.12",
diff --git a/pages/editor.css b/pages/editor.css
index 53e4ca5..ff35adf 100644
--- a/pages/editor.css
+++ b/pages/editor.css
@@ -47,3 +47,6 @@
     margin: 2rem 0;
 }
 
+.is-active {
+    background: #fff;
+}
\ No newline at end of file