diff --git a/src/docs/components/Dialog.mdx b/src/docs/components/Dialog.mdx
index 5429b78..4354c82 100644
--- a/src/docs/components/Dialog.mdx
+++ b/src/docs/components/Dialog.mdx
@@ -1,181 +1,133 @@
-import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
-import { Story } from "@/components/Story";
-import { LoadedCode, GITHUB_DIR_COMP, GITHUB_COMP_PREVIEW, GITHUB_STORY } from "@/components/LoadedCode";
-import { DialogDemo } from "./DialogBlocks/Preview";
-import Examples from "./DialogBlocks/Examples";
-
-# Dialog
-A modal window that prompts the user to take an action or provides critical information.
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-## Installation
-
-1. Create a new directory named `Dialog` in your component folder.
-2. Create following files in the folder, and paste the code into the file.
- * `index.ts`
-
- * `Context.ts`
-
- * `Component.tsx`
-
-
-## Usage
-
-```tsx
-import {
- DialogRoot,
- DialogTrigger,
- DialogOverlay,
- DialogContent,
- DialogHeader,
- DialogTitle,
- DialogSubtitle,
- DialogFooter,
- DialogClose,
-} from "@components/Dialog";
-```
-
-```html
-
-
-
-
-
-
-
- Dialog Title
- Dialog Subtitle
-
- {/* Main Contents */}
-
-
-
-
-
-
-
-
-```
-
-> Note:
->
-> DialogTrigger and DialogClose will merge its onClick event handler to its children.
-> Also, there is no default element for those.
-> So you always have to provide the clickable children for DialogTrigger and DialogClose.
->
-> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
-
-## Props
-
-### DialogOverlay
-
-#### Variants
-
-| Prop | Type | Default | Description |
-|:----------|:-----------------------|:--------|:---------------------------------------------|
-| `blur` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is blurred |
-| `darken` | `"sm" \| "md" \| "lg"` | `md` | Whether the background of dialog is darkened |
-| `padding` | `"sm" \| "md" \| "lg"` | `md` | Minimum margin of the dialog |
-
-#### Special
-
-| Prop | Type | Default | Description |
-|:---------------|:----------|:--------|:-----------------------------------------------|
-| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |
-
-### DialogContent
-
-#### Variants
-
-| Prop | Type | Default | Description |
-|:----------|:---------------------------------------------------------------------|:--------|:-----------------------------------------------|
-| `size` | `"fit" \| "fullSm" \| "fullMd" \| "fullLg" \| "fullXl" \| "full2xl"` | `fit` | Size of the dialog - width and max width |
-| `rounded` | `"sm" \| "md" \| "lg" \| "xl"` | `md` | Roundness of the dialog |
-| `padding` | `"sm" \| "md" \| "lg"` | `md` | Padding of the dialog |
-| `gap` | `"sm" \| "md" \| "lg"` | `md` | Works like flex's gap - space between children |
-
-### DialogHeader
-
-#### Variants
-
-| Prop | Type | Default | Description |
-|:------|:-----------------------|:--------|:----------------------------------------------|
-| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children - title and subtitle |
-
-### DialogTitle
-
-#### Variants
-
-| Prop | Type | Default | Description |
-|:---------|:-----------------------|:--------|:--------------------|
-| `size` | `"sm" \| "md" \| "lg"` | `md` | Size of the title |
-| `weight` | `"sm" \| "md" \| "lg"` | `lg` | Weight of the title |
-
-### DialogSubtitle
-
-#### Variants
-
-| Prop | Type | Default | Description |
-|:----------|:-----------------------|:--------|:------------------------|
-| `size` | `"sm" \| "md" \| "lg"` | `sm` | Size of the subtitle |
-| `weight` | `"sm" \| "md" \| "lg"` | `md` | Weight of the subtitle |
-| `opacity` | `"sm" \| "md" \| "lg"` | `sm` | Opacity of the subtitle |
-
-### DialogFooter
-
-#### Variants
-
-| Prop | Type | Default | Description |
-|:------|:-----------------------|:--------|:-------------------------|
-| `gap` | `"sm" \| "md" \| "lg"` | `sm` | Gap between the children |
-
-## Examples
-
-### Basic Informational Dialog
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
-### Deleting Item
-
-
-
- Preview
- Code
-
-
-
-
-
-
-
-
-
-
-
+import { TabProvider, TabTrigger, TabContent, TabList } from "@pswui/Tabs";
+import { Story } from "@/components/Story";
+import {
+ LoadedCode,
+ GITHUB_DIR_COMP,
+ GITHUB_COMP_PREVIEW,
+ GITHUB_STORY,
+} from "@/components/LoadedCode";
+import { DialogDemo } from "./DialogBlocks/Preview";
+import Examples from "./DialogBlocks/Examples";
+
+# Dialog
+
+A modal window that prompts the user to take an action or provides critical information.
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+## Installation
+
+1. Create a new directory named `Dialog` in your component folder.
+2. Create following files in the folder, and paste the code into the file.
+
+- `index.ts`
+
+- `Context.ts`
+
+- `Component.tsx`
+
+
+## Usage
+
+```tsx
+import {
+ DialogRoot,
+ DialogTrigger,
+ DialogOverlay,
+ DialogContent,
+ DialogHeader,
+ DialogTitle,
+ DialogSubtitle,
+ DialogFooter,
+ DialogClose,
+} from "@components/Dialog";
+```
+
+```html
+
+
+
+
+
+
+
+ Dialog Title
+ Dialog Subtitle
+
+ {/* Main Contents */}
+
+
+
+
+
+
+
+
+```
+
+> Note:
+>
+> DialogTrigger and DialogClose will merge its onClick event handler to its children.
+> Also, there is no default element for those.
+> So you always have to provide the clickable children for DialogTrigger and DialogClose.
+>
+> It is easier to understand if you think of this component as always having the `asChild` prop applied to it.
+
+## Props
+
+### DialogOverlay
+
+#### Special
+
+| Prop | Type | Default | Description |
+| :------------- | :-------- | :------ | :--------------------------------------------- |
+| `closeOnClick` | `boolean` | `false` | Whether the dialog will be closed when clicked |
+
+## Examples
+
+### Basic Informational Dialog
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+
+
+### Deleting Item
+
+
+
+ Preview
+ Code
+
+
+
+
+
+
+
+
+
+