diff --git a/app/components/text-editor/editor-button.tsx b/app/components/text-editor/editor-button.tsx
index e71113f..7e62f94 100644
--- a/app/components/text-editor/editor-button.tsx
+++ b/app/components/text-editor/editor-button.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@headlessui/react'
 import type { CSSProperties, MouseEventHandler, ReactNode } from 'react'
 import { twMerge } from 'tailwind-merge'
 
@@ -16,12 +17,12 @@ export const EditorButton = (properties: TProperties) => {
     properties
 
   return (
-    <button
+    <Button
       type="button"
       onClick={onClick}
       disabled={disabled}
       className={twMerge(
-        'flex h-6 w-8 cursor-pointer items-center justify-center rounded-md p-2 hover:bg-[#2E2F7C] hover:text-white disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:opacity-50',
+        'flex h-6 w-8 cursor-pointer items-center justify-center rounded-md p-2 text-black hover:bg-[#2E2F7C] hover:text-white active:bg-[#2E2F7C]/50 disabled:cursor-not-allowed disabled:bg-[#2E2F7C]/50 disabled:text-white disabled:opacity-50',
         isActive ? 'bg-[#2E2F7C]/10' : '',
         className,
       )}
@@ -29,6 +30,6 @@ export const EditorButton = (properties: TProperties) => {
       title={title}
     >
       {children}
-    </button>
+    </Button>
   )
 }