diff --git a/app/components/text-editor/editor-menubar.tsx b/app/components/text-editor/editor-menubar.tsx
index 09395f2..34ba522 100644
--- a/app/components/text-editor/editor-menubar.tsx
+++ b/app/components/text-editor/editor-menubar.tsx
@@ -127,7 +127,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive('bold')}
             title="Bold"
           >
-            <BoldIcon />
+            <BoldIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().toggleItalic().run()}
@@ -137,7 +137,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive('italic')}
             title="Italic"
           >
-            <ItalicIcon />
+            <ItalicIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().toggleStrike().run()}
@@ -147,7 +147,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive('strike')}
             title="Strike"
           >
-            <StrikethroughIcon />
+            <StrikethroughIcon className="size-4" />
           </EditorButton>
           <div className="relative">
             <EditorButton
@@ -159,7 +159,7 @@ export const EditorMenuBar = (properties: TProperties) => {
               isActive={true}
               disabled={disabled}
             >
-              <SwatchIcon />
+              <SwatchIcon className="size-4" />
             </EditorButton>
             {isOpenColor && (
               <div
@@ -191,7 +191,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'left' })}
             title="Align Left"
           >
-            <Bars3BottomLeftIcon />
+            <Bars3BottomLeftIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().setTextAlign('center').run()}
@@ -202,7 +202,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'center' })}
             title="Align Center"
           >
-            <Bars3Icon />
+            <Bars3Icon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().setTextAlign('right').run()}
@@ -213,7 +213,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'right' })}
             title="Align Right"
           >
-            <Bars3BottomRightIcon />
+            <Bars3BottomRightIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().setTextAlign('justify').run()}
@@ -224,7 +224,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive({ textAlign: 'justify' })}
             title="Align Justify"
           >
-            <Bars4Icon />
+            <Bars4Icon className="size-4" />
           </EditorButton>
         </div>
         <div className="flex max-w-[150px] flex-wrap items-start gap-1 px-1">
@@ -236,7 +236,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             title="Heading 1"
             disabled={disabled}
           >
-            <H1Icon />
+            <H1Icon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() =>
@@ -246,7 +246,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             title="Heading 2"
             disabled={disabled}
           >
-            <H2Icon />
+            <H2Icon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() =>
@@ -256,7 +256,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             title="Heading 3"
             disabled={disabled}
           >
-            <H3Icon />
+            <H3Icon className="size-4" />
           </EditorButton>
           {/* <EditorButton
               onClick={() => editor.chain().focus().setParagraph().run()}
@@ -272,7 +272,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             title="Bullet List"
             disabled={disabled}
           >
-            <ListBulletIcon />
+            <ListBulletIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().toggleOrderedList().run()}
@@ -280,7 +280,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             title="Ordered List"
             disabled={disabled}
           >
-            <NumberedListIcon />
+            <NumberedListIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().toggleCodeBlock().run()}
@@ -288,7 +288,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             title="Code Block"
             disabled={disabled}
           >
-            <CodeBracketIcon />
+            <CodeBracketIcon className="size-4" />
           </EditorButton>
         </div>
         {/* <div className="flex items-start gap-1 px-1">
@@ -334,7 +334,7 @@ export const EditorMenuBar = (properties: TProperties) => {
               title="Insert Image"
               disabled={disabled}
             >
-              <PhotoIcon />
+              <PhotoIcon className="size-4" />
             </EditorButton>
             {isOpenImage && (
               <div
@@ -380,14 +380,14 @@ export const EditorMenuBar = (properties: TProperties) => {
             isActive={editor.isActive('link')}
             title="Set Link"
           >
-            <LinkIcon />
+            <LinkIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().unsetLink().run()}
             disabled={disabled || !editor.isActive('link')}
             title="Unset Link"
           >
-            <LinkSlashIcon />
+            <LinkSlashIcon className="size-4" />
           </EditorButton>
         </div>
         <div className="flex items-start gap-1 px-1">
@@ -396,14 +396,14 @@ export const EditorMenuBar = (properties: TProperties) => {
             disabled={disabled || !editor.can().chain().focus().undo().run()}
             title="Undo"
           >
-            <ArrowUturnLeftIcon />
+            <ArrowUturnLeftIcon className="size-4" />
           </EditorButton>
           <EditorButton
             onClick={() => editor.chain().focus().redo().run()}
             disabled={disabled || !editor.can().chain().focus().redo().run()}
             title="Redo"
           >
-            <ArrowUturnRightIcon />
+            <ArrowUturnRightIcon className="size-4" />
           </EditorButton>
         </div>
       </div>
@@ -413,7 +413,7 @@ export const EditorMenuBar = (properties: TProperties) => {
             onClick={() => setIsPlainHTML(true)}
             title="Switch to Plain Text"
           >
-            <DocumentTextIcon />
+            <DocumentTextIcon className="size-4" />
           </EditorButton>
         </div>
       </div>