diff --git a/docs/eslint.config.mjs b/docs/eslint.config.mjs
index ee978d9..ecf521d 100644
--- a/docs/eslint.config.mjs
+++ b/docs/eslint.config.mjs
@@ -40,7 +40,7 @@ const eslintConfig = [
                             `node:`,
                             `^(${builtinModules.join("|")})(/|$)`
                         ],
-                        ["^@?\\w"],
+                        ["^@?\\w.*\\u0000$", "^[^.].*\\u0000$", "^\\..*\\u0000$"],
                         ["^"],
                         ["^\\."]
                     ]
diff --git a/docs/src/app/[lang]/layout.tsx b/docs/src/app/[lang]/layout.tsx
index 11529a5..9a9a772 100644
--- a/docs/src/app/[lang]/layout.tsx
+++ b/docs/src/app/[lang]/layout.tsx
@@ -5,14 +5,13 @@ import "@/styles/tailwind.css"
 import type { Metadata } from "next"
 import type { ReactNode } from "react"
 
+import ClientThemeProvider from "@/components/ClientThemeProvider"
+import { i18n } from "@/utils/i18n"
 import { AppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter"
 import { Head } from "nextra/components"
 import { getPageMap } from "nextra/page-map"
 import { Footer, LastUpdated, Layout, LocaleSwitch, Navbar, ThemeSwitch } from "nextra-theme-docs"
 
-import ClientThemeProvider from "@/components/ClientThemeProvider"
-import { i18n } from "@/utils/i18n"
-
 export const { viewport } = Head
 
 export const metadata: Metadata = {
diff --git a/docs/src/components/ClientThemeProvider.tsx b/docs/src/components/ClientThemeProvider.tsx
index e3dbbd1..f8f8514 100644
--- a/docs/src/components/ClientThemeProvider.tsx
+++ b/docs/src/components/ClientThemeProvider.tsx
@@ -1,9 +1,8 @@
 "use client"
 import type { ReactNode } from "react"
 
-import { CssBaseline, ThemeProvider } from "@mui/material"
-
 import theme from "@/utils/theme"
+import { CssBaseline, ThemeProvider } from "@mui/material"
 
 export default function ClientThemeProvider({ children }: { children: ReactNode }) {
     return (
diff --git a/docs/src/components/IconBar.tsx b/docs/src/components/IconBar.tsx
index 5afca7d..929b47a 100644
--- a/docs/src/components/IconBar.tsx
+++ b/docs/src/components/IconBar.tsx
@@ -1,8 +1,8 @@
+import type { ButtonProps } from "@mui/material"
 import type { AriaAttributes, CSSProperties, RefObject } from "react"
 
 import { Icon } from "@mdi/react"
-import type { IconButtonProps } from "@mui/material"
-import { IconButton, Tooltip } from "@mui/material"
+import { Button, Tooltip } from "@mui/material"
 
 export interface HTMLProps extends AriaAttributes {
     className?: string
@@ -23,7 +23,8 @@ export interface IconProps extends HTMLProps {
     style?: CSSProperties
     inStack?: boolean
 }
-export interface IconBarProps extends IconButtonProps {
+
+export interface IconBarProps extends ButtonProps {
     path: string
     tooltip?: string
     disabled?: boolean
@@ -34,9 +35,9 @@ export interface IconBarProps extends IconButtonProps {
 export default function IconBar({ tooltip, iconProps, path, ...btnProps }: IconBarProps) {
     return (
         <Tooltip title={tooltip}>
-            <IconButton size="small" {...btnProps}>
+            <Button className="size-7 min-w-7 p-0 rounded-[2px]" variant="text" color="inherit" size="small" {...btnProps}>
                 <Icon size={0.8} path={path} {...iconProps} />
-            </IconButton>
+            </Button>
         </Tooltip>
     )
 }
diff --git a/docs/src/components/PlainTextSelect.tsx b/docs/src/components/PlainTextSelect.tsx
index 02ca276..1a0877d 100644
--- a/docs/src/components/PlainTextSelect.tsx
+++ b/docs/src/components/PlainTextSelect.tsx
@@ -1,13 +1,12 @@
 import type { ReactNode } from "react"
 
+import useMenuTrigger from "@/hooks/useMenuTrigger"
 import { mdiMenuDown } from "@mdi/js"
 import { Icon } from "@mdi/react"
 import { ButtonBase, ClickAwayListener, Menu, MenuItem, MenuList } from "@mui/material"
 import cn from "clsx"
 import React, { useState } from "react"
 
-import useMenuTrigger from "@/hooks/useMenuTrigger"
-
 interface PlainTextSelectProps<T> {
     className?: string
     items: T[]
@@ -27,7 +26,7 @@ export default function PlainTextSelect<T>(
     return (
         <>
             <ButtonBase
-                className={cn("bar-menu-selector px-1", className)}
+                className={cn("bar-menu-selector px-1 rounded-[2px]", className)}
                 onClick={handleClick}
             >
                 {renderLabel(value)}
diff --git a/docs/src/components/editor-toolbars/FontSizeMinus.tsx b/docs/src/components/editor-toolbars/FontSizeMinus.tsx
index d00b47a..cd36b3a 100644
--- a/docs/src/components/editor-toolbars/FontSizeMinus.tsx
+++ b/docs/src/components/editor-toolbars/FontSizeMinus.tsx
@@ -1,6 +1,5 @@
-import { ediFontSizeMinus } from "@tiptiz/editor-icons"
-
 import IconBar from "@/components/IconBar"
+import { ediFontSizeMinus } from "@tiptiz/editor-icons"
 
 export default function FontSizeMinus() {
     return <IconBar tooltip="Font Size Decrease" path={ediFontSizeMinus} />
diff --git a/docs/src/components/editor-toolbars/FontSizePus.tsx b/docs/src/components/editor-toolbars/FontSizePus.tsx
index df45576..95808d1 100644
--- a/docs/src/components/editor-toolbars/FontSizePus.tsx
+++ b/docs/src/components/editor-toolbars/FontSizePus.tsx
@@ -1,6 +1,5 @@
-import { ediFontSizePlus } from "@tiptiz/editor-icons"
-
 import IconBar from "@/components/IconBar"
+import { ediFontSizePlus } from "@tiptiz/editor-icons"
 
 export default function FontSizePus() {
     return <IconBar tooltip="Font Size Increase" path={ediFontSizePlus} />
diff --git a/docs/src/components/editor-toolbars/FormatBrush.tsx b/docs/src/components/editor-toolbars/FormatBrush.tsx
index 8c1baf5..fd8d688 100644
--- a/docs/src/components/editor-toolbars/FormatBrush.tsx
+++ b/docs/src/components/editor-toolbars/FormatBrush.tsx
@@ -1,7 +1,6 @@
-import { ediBrush } from "@tiptiz/editor-icons"
-
 import IconBar from "@/components/IconBar"
+import { ediBrush } from "@tiptiz/editor-icons"
 
 export default function FormatBrush() {
-    return <IconBar tooltip="Format Clear" path={ediBrush} />
+    return <IconBar tooltip="Format Clear" path={ediBrush} iconProps={{ rotate: 180 }} />
 }
diff --git a/docs/src/components/editor-toolbars/FormatClear.tsx b/docs/src/components/editor-toolbars/FormatClear.tsx
index 1aaa991..d33c93f 100644
--- a/docs/src/components/editor-toolbars/FormatClear.tsx
+++ b/docs/src/components/editor-toolbars/FormatClear.tsx
@@ -1,6 +1,5 @@
-import { ediEraser } from "@tiptiz/editor-icons"
-
 import IconBar from "@/components/IconBar"
+import { ediEraser } from "@tiptiz/editor-icons"
 
 export default function FormatClear() {
     return <IconBar tooltip="Format Clear" path={ediEraser} />
diff --git a/docs/src/components/editor-toolbars/HeadingLevel.tsx b/docs/src/components/editor-toolbars/HeadingLevel.tsx
index 5fc2c6f..17eed01 100644
--- a/docs/src/components/editor-toolbars/HeadingLevel.tsx
+++ b/docs/src/components/editor-toolbars/HeadingLevel.tsx
@@ -1,8 +1,7 @@
+import PlainTextSelect from "@/components/PlainTextSelect"
 import { Icon } from "@mdi/react"
 import { ediHeading1, ediHeading2, ediHeading3, ediHeading4, ediHeading5, ediHeading6 } from "@tiptiz/editor-icons"
 
-import PlainTextSelect from "@/components/PlainTextSelect"
-
 const headings = [
     { tag: "h1", Icon: ediHeading1 },
     { tag: "h2", Icon: ediHeading2 },
diff --git a/docs/src/components/editor-toolbars/Redo.tsx b/docs/src/components/editor-toolbars/Redo.tsx
index a0d52b0..081fa3a 100644
--- a/docs/src/components/editor-toolbars/Redo.tsx
+++ b/docs/src/components/editor-toolbars/Redo.tsx
@@ -1,6 +1,5 @@
-import { ediRedo } from "@tiptiz/editor-icons"
-
 import IconBar from "@/components/IconBar"
+import { ediRedo } from "@tiptiz/editor-icons"
 
 export default function Redo() {
     return <IconBar tooltip="Redo" path={ediRedo} />
diff --git a/docs/src/components/editor-toolbars/Undo.tsx b/docs/src/components/editor-toolbars/Undo.tsx
index 9e65660..c97da53 100644
--- a/docs/src/components/editor-toolbars/Undo.tsx
+++ b/docs/src/components/editor-toolbars/Undo.tsx
@@ -1,6 +1,5 @@
-import { ediUndo } from "@tiptiz/editor-icons"
-
 import IconBar from "@/components/IconBar"
+import { ediUndo } from "@tiptiz/editor-icons"
 
 export default function Undo() {
     return <IconBar tooltip="Undo" path={ediUndo} />
diff --git a/docs/src/components/page-index/ToolbarRich.tsx b/docs/src/components/page-index/ToolbarRich.tsx
index b359570..398545f 100644
--- a/docs/src/components/page-index/ToolbarRich.tsx
+++ b/docs/src/components/page-index/ToolbarRich.tsx
@@ -1,9 +1,8 @@
 "use client"
 import "@/styles/toolbars.css"
 
-import cn from "clsx"
-
 import Hr from "@/components/Hr"
+import cn from "clsx"
 
 import FontFamily from "../editor-toolbars/FontFamily"
 import FontSize from "../editor-toolbars/FontSize"
@@ -26,13 +25,13 @@ export default function ToolbarRich() {
                     "bg-neutral-100 dark:bg-neutral-800"
                 )}
             >
-                <div className="w-15">
+                <div className="w-14">
                     <Undo />
                     <Redo />
                     <FormatClear />
                     <FormatBrush />
                 </div>
-                <Hr className="h-[80%] mr-3" />
+                <Hr className="h-[80%] mx-2" />
                 <div>
                     <FontFamily />
                     <FontSize />