diff --git a/docs/eslint.config.mjs b/docs/eslint.config.mjs
index 29184b3..ee978d9 100644
--- a/docs/eslint.config.mjs
+++ b/docs/eslint.config.mjs
@@ -2,11 +2,11 @@ import { builtinModules } from "module"
 import { dirname } from "path"
 import { fileURLToPath } from "url"
 
+import { FlatCompat } from "@eslint/eslintrc"
+
 import configBase, { configShared } from "../.configs/eslint.config.base.mjs"
 import configStylistic from "../.configs/eslint.config.stylistic.mjs"
 
-import { FlatCompat } from "@eslint/eslintrc"
-
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = dirname(__filename)
 
@@ -30,20 +30,19 @@ const eslintConfig = [
                 "error",
                 {
                     groups: [
+                        // style less,scss,css
+                        ["^.+\\.(l|s)?css$"],
+                        // Side effect imports.
+                        ["^\\u0000"],
+                        ["\\u0000$"],
                         [
                             "globals",
                             `node:`,
                             `^(${builtinModules.join("|")})(/|$)`
                         ],
-                        // style less,scss,css
-                        ["^.+\\.(l|s)?css$"],
-                        // Side effect imports.
-                        ["^\\u0000"],
-                        ["^@?\\w.*\\u0000$", "^[^.].*\\u0000$", "^\\..*\\u0000$"],
-                        // Parent imports. Put `..` last.
-                        ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
-                        // Other relative imports. Put same-folder imports and `.` last.
-                        ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"]
+                        ["^@?\\w"],
+                        ["^"],
+                        ["^\\."]
                     ]
                 }
             ]
diff --git a/docs/src/app/[lang]/[[...mdxPath]]/page.tsx b/docs/src/app/[lang]/[[...mdxPath]]/page.tsx
index d64e543..3168626 100644
--- a/docs/src/app/[lang]/[[...mdxPath]]/page.tsx
+++ b/docs/src/app/[lang]/[[...mdxPath]]/page.tsx
@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/rules-of-hooks -- false positive, useMDXComponents are not react hooks */
 
-import { useMDXComponents } from "../../../../mdx-components"
-
 import { generateStaticParamsFor, importPage } from "nextra/pages"
 
+import { useMDXComponents } from "../../../../mdx-components"
+
 export const generateStaticParams = generateStaticParamsFor("mdxPath")
 
 type PageProps = Readonly<{
diff --git a/docs/src/app/[lang]/layout.tsx b/docs/src/app/[lang]/layout.tsx
index 9a9a772..11529a5 100644
--- a/docs/src/app/[lang]/layout.tsx
+++ b/docs/src/app/[lang]/layout.tsx
@@ -5,13 +5,14 @@ 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 f8f8514..e3dbbd1 100644
--- a/docs/src/components/ClientThemeProvider.tsx
+++ b/docs/src/components/ClientThemeProvider.tsx
@@ -1,9 +1,10 @@
 "use client"
 import type { ReactNode } from "react"
 
-import theme from "@/utils/theme"
 import { CssBaseline, ThemeProvider } from "@mui/material"
 
+import theme from "@/utils/theme"
+
 export default function ClientThemeProvider({ children }: { children: ReactNode }) {
     return (
         <ThemeProvider theme={theme} modeStorageKey="theme">
diff --git a/docs/src/components/IconBar.tsx b/docs/src/components/IconBar.tsx
index 1d8060d..5afca7d 100644
--- a/docs/src/components/IconBar.tsx
+++ b/docs/src/components/IconBar.tsx
@@ -1,7 +1,7 @@
-import type { IconButtonProps } 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"
 
 export interface HTMLProps extends AriaAttributes {
diff --git a/docs/src/components/editor-toolbars/FormatBrush.tsx b/docs/src/components/editor-toolbars/FormatBrush.tsx
index fd22492..8c1baf5 100644
--- a/docs/src/components/editor-toolbars/FormatBrush.tsx
+++ b/docs/src/components/editor-toolbars/FormatBrush.tsx
@@ -1,6 +1,7 @@
-import IconBar from "@/components/IconBar"
 import { ediBrush } from "@tiptiz/editor-icons"
 
+import IconBar from "@/components/IconBar"
+
 export default function FormatBrush() {
     return <IconBar tooltip="Format Clear" path={ediBrush} />
 }
diff --git a/docs/src/components/editor-toolbars/FormatClear.tsx b/docs/src/components/editor-toolbars/FormatClear.tsx
index d33c93f..1aaa991 100644
--- a/docs/src/components/editor-toolbars/FormatClear.tsx
+++ b/docs/src/components/editor-toolbars/FormatClear.tsx
@@ -1,6 +1,7 @@
-import IconBar from "@/components/IconBar"
 import { ediEraser } from "@tiptiz/editor-icons"
 
+import IconBar from "@/components/IconBar"
+
 export default function FormatClear() {
     return <IconBar tooltip="Format Clear" path={ediEraser} />
 }
diff --git a/docs/src/components/editor-toolbars/Redo.tsx b/docs/src/components/editor-toolbars/Redo.tsx
index 081fa3a..a0d52b0 100644
--- a/docs/src/components/editor-toolbars/Redo.tsx
+++ b/docs/src/components/editor-toolbars/Redo.tsx
@@ -1,6 +1,7 @@
-import IconBar from "@/components/IconBar"
 import { ediRedo } from "@tiptiz/editor-icons"
 
+import IconBar from "@/components/IconBar"
+
 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 c97da53..9e65660 100644
--- a/docs/src/components/editor-toolbars/Undo.tsx
+++ b/docs/src/components/editor-toolbars/Undo.tsx
@@ -1,6 +1,7 @@
-import IconBar from "@/components/IconBar"
 import { ediUndo } from "@tiptiz/editor-icons"
 
+import IconBar from "@/components/IconBar"
+
 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 8e3b081..0e428da 100644
--- a/docs/src/components/page-index/ToolbarRich.tsx
+++ b/docs/src/components/page-index/ToolbarRich.tsx
@@ -1,10 +1,13 @@
 "use client"
-import FormatBrush from "@/components/editor-toolbars/FormatBrush"
-import FormatClear from "@/components/editor-toolbars/FormatClear"
-import Redo from "@/components/editor-toolbars/Redo"
-import Undo from "@/components/editor-toolbars/Undo"
 import cn from "clsx"
 
+import Hr from "@/components/Hr"
+
+import FormatBrush from "../editor-toolbars/FormatBrush"
+import FormatClear from "../editor-toolbars/FormatClear"
+import Redo from "../editor-toolbars/Redo"
+import Undo from "../editor-toolbars/Undo"
+
 // TODO fix tailwindcss dark mode
 export default function ToolbarRich() {
     return (
@@ -12,7 +15,7 @@ export default function ToolbarRich() {
             <h1 className="text-[3rem] font-bold">With Rich Toolbars</h1>
             <div
                 className={cn(
-                    "flex",
+                    "h-[62px] flex items-center justify-center absolute left-0 right-0",
                     "border-t border-b border-neutral-100 dark:border-neutral-500/60",
                     "bg-neutral-100 dark:bg-neutral-800"
                 )}
@@ -23,7 +26,9 @@ export default function ToolbarRich() {
                     <FormatClear />
                     <FormatBrush />
                 </div>
+                <Hr className="h-[80%]" />
             </div>
+            <div className="h-[62px]" />
         </>
     )
 }