diff --git a/package-lock.json b/package-lock.json
index 51d7fd2..dc3ca1e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,10 +9,12 @@
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/popper": "^0.1.0",
         "@radix-ui/react-accordion": "^1.1.2",
+        "@radix-ui/react-dialog": "^1.0.5",
         "@radix-ui/react-dropdown-menu": "^2.0.6",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-popover": "^1.0.7",
         "@radix-ui/react-select": "^2.0.0",
+        "@radix-ui/react-tabs": "^1.0.4",
         "@radix-ui/react-toggle": "^1.0.3",
         "@radix-ui/react-toggle-group": "^1.0.4",
         "@tailwindcss/typography": "^0.5.10",
@@ -530,6 +532,42 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz",
+      "integrity": "sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-compose-refs": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-dismissable-layer": "1.0.5",
+        "@radix-ui/react-focus-guards": "1.0.1",
+        "@radix-ui/react-focus-scope": "1.0.4",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-portal": "1.0.4",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-slot": "1.0.2",
+        "@radix-ui/react-use-controllable-state": "1.0.1",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "2.5.5"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-direction": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz",
@@ -942,6 +980,36 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tabs": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.0.4.tgz",
+      "integrity": "sha512-egZfYY/+wRNCflXNHx+dePvnz9FbmssDTJBtgRfDY7e8SE5oIo3Py2eCB1ckAbh1Q7cQ/6yJZThJ++sgbxibog==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@radix-ui/primitive": "1.0.1",
+        "@radix-ui/react-context": "1.0.1",
+        "@radix-ui/react-direction": "1.0.1",
+        "@radix-ui/react-id": "1.0.1",
+        "@radix-ui/react-presence": "1.0.1",
+        "@radix-ui/react-primitive": "1.0.3",
+        "@radix-ui/react-roving-focus": "1.0.4",
+        "@radix-ui/react-use-controllable-state": "1.0.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0",
+        "react-dom": "^16.8 || ^17.0 || ^18.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-toggle": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz",
diff --git a/package.json b/package.json
index 8176aa4..0dccdc0 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,12 @@
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/popper": "^0.1.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-select": "^2.0.0",
+    "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.0.3",
     "@radix-ui/react-toggle-group": "^1.0.4",
     "@tailwindcss/typography": "^0.5.10",
diff --git a/pages/index.js b/pages/index.js
index f5cb2c4..0e901ca 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,17 +1,7 @@
-import Head from 'next/head';
-import styles from '../styles/Home.module.css';
+import Head from 'next/head'
+import styles from '../styles/Home.module.css'
 import LiveEditor from '../components/editor/live-editor'
-import { GearIcon } from '@radix-ui/react-icons'
-
-function Settings () {
-  return <div className={styles.setting}>
-    <button onClick={() => {
-      // show some dialog
-    }}>
-      <GearIcon />
-    </button>
-  </div>
-}
+import { Settings } from './settings'
 
 export default function Home() {
   return (
diff --git a/pages/settings.js b/pages/settings.js
new file mode 100644
index 0000000..3c89bca
--- /dev/null
+++ b/pages/settings.js
@@ -0,0 +1,59 @@
+import styles from '../styles/Home.module.css'
+import { Cross2Icon, GearIcon } from '@radix-ui/react-icons'
+import * as Dialog from '@radix-ui/react-dialog'
+import * as Tabs from '@radix-ui/react-tabs'
+
+export function Settings () {
+  return <Dialog.Root>
+    <Dialog.Trigger asChild>
+      <div className={styles.setting}>
+        <button onClick={() => {
+          // show some dialog
+        }}>
+          <GearIcon/>
+        </button>
+      </div>
+    </Dialog.Trigger>
+    <Dialog.Portal>
+      <Dialog.Overlay className="DialogOverlay"/>
+      <Dialog.Content className="DialogContent">
+        <Dialog.Title className="DialogTitle">Custom Prompt Settings</Dialog.Title>
+
+        <Tabs.Root className="TabsRoot" defaultValue="tab1">
+          <Tabs.List className="TabsList" aria-label="Manage your account">
+            <Tabs.Trigger className="TabsTrigger" value="tab1">
+              Toolbar AI
+            </Tabs.Trigger>
+            <Tabs.Trigger className="TabsTrigger" value="tab2">
+              Bubble Menu
+            </Tabs.Trigger>
+            <Tabs.Trigger className="TabsTrigger" value="tab3">
+              Slash Command
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content className="TabsContent" value="tab1">
+            <SettingField/>
+          </Tabs.Content>
+          <Tabs.Content className="TabsContent" value="tab2">
+            <SettingField/>
+          </Tabs.Content>
+          <Tabs.Content className="TabsContent" value="tab3">
+            <SettingField/>
+          </Tabs.Content>
+        </Tabs.Root>
+
+        <Dialog.Close asChild>
+          <button className="IconButton" aria-label="Close">
+            <Cross2Icon/>
+          </button>
+        </Dialog.Close>
+      </Dialog.Content>
+    </Dialog.Portal>
+  </Dialog.Root>
+}
+
+const SettingField = ({ label, children }) => (
+  <textarea id="message" rows="4"
+            className="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            placeholder="Write your thoughts here..."></textarea>
+)
\ No newline at end of file
diff --git a/styles/global.css b/styles/global.css
index 8fc5030..2058fb8 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -390,9 +390,11 @@ input {
     color: var(--mauve-11);
     background-color: var(--mauve-2);
 }
+
 .AccordionContent[data-state='open'] {
     animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
+
 .AccordionContent[data-state='closed'] {
     animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
@@ -405,6 +407,7 @@ input {
     color: var(--violet-10);
     transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
 }
+
 .AccordionTrigger[data-state='open'] > .AccordionChevron {
     transform: rotate(180deg);
 }
@@ -431,6 +434,295 @@ input {
     background-color: var(--violet-3);
 }
 
+/* reset */
+button,
+fieldset,
+input {
+    all: unset;
+}
+
+.DialogOverlay {
+    background-color: var(--black-a9);
+    position: fixed;
+    inset: 0;
+    animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent {
+    background-color: white;
+    border-radius: 6px;
+    box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 90vw;
+    max-width: 450px;
+    max-height: 85vh;
+    padding: 25px;
+    animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent:focus {
+    outline: none;
+}
+
+.DialogTitle {
+    margin: 0;
+    font-weight: 500;
+    color: var(--mauve-12);
+    font-size: 17px;
+}
+
+.DialogDescription {
+    margin: 10px 0 20px;
+    color: var(--mauve-11);
+    font-size: 15px;
+    line-height: 1.5;
+}
+
+.Button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 0 15px;
+    font-size: 15px;
+    line-height: 1;
+    font-weight: 500;
+    height: 35px;
+}
+
+.Button.violet {
+    background-color: white;
+    color: var(--violet-11);
+    box-shadow: 0 2px 10px var(--black-a7);
+}
+
+.Button.violet:hover {
+    background-color: var(--mauve-3);
+}
+
+.Button.violet:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.Button.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+}
+
+.Button.green:hover {
+    background-color: var(--green-5);
+}
+
+.Button.green:focus {
+    box-shadow: 0 0 0 2px var(--green-7);
+}
+
+.IconButton {
+    font-family: inherit;
+    border-radius: 100%;
+    height: 25px;
+    width: 25px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--violet-11);
+    position: absolute;
+    top: 10px;
+    right: 10px;
+}
+
+.IconButton:hover {
+    background-color: var(--violet-4);
+}
+
+.IconButton:focus {
+    box-shadow: 0 0 0 2px var(--violet-7);
+}
+
+.Fieldset {
+    display: flex;
+    gap: 20px;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+.Label {
+    font-size: 15px;
+    color: var(--violet-11);
+    width: 90px;
+    text-align: right;
+}
+
+.Input {
+    width: 100%;
+    flex: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 0 10px;
+    font-size: 15px;
+    line-height: 1;
+    color: var(--violet-11);
+    box-shadow: 0 0 0 1px var(--violet-7);
+    height: 35px;
+}
+
+.Input:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+@keyframes overlayShow {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes contentShow {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -48%) scale(0.96);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+
+.TabsRoot {
+    display: flex;
+    flex-direction: column;
+    margin-top: 2rem;
+    box-shadow: 0 2px 10px var(--black-a4);
+}
+
+.TabsList {
+    flex-shrink: 0;
+    display: flex;
+    border-bottom: 1px solid var(--mauve-6);
+}
+
+.TabsTrigger {
+    font-family: inherit;
+    background-color: white;
+    padding: 0 20px;
+    height: 45px;
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 15px;
+    line-height: 1;
+    color: var(--mauve-11);
+    user-select: none;
+}
+
+.TabsTrigger:first-child {
+    border-top-left-radius: 6px;
+}
+
+.TabsTrigger:last-child {
+    border-top-right-radius: 6px;
+}
+
+.TabsTrigger:hover {
+    color: var(--violet-11);
+}
+
+.TabsTrigger[data-state='active'] {
+    color: var(--violet-11);
+    box-shadow: inset 0 -1px 0 0 currentColor, 0 1px 0 0 currentColor;
+}
+
+.TabsTrigger:focus {
+    position: relative;
+    box-shadow: 0 0 0 2px black;
+}
+
+.TabsContent {
+    flex-grow: 1;
+    padding: 20px;
+    background-color: white;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    outline: none;
+}
+
+.TabsContent:focus {
+    box-shadow: 0 0 0 2px black;
+}
+
+.Text {
+    margin-top: 0;
+    margin-bottom: 20px;
+    color: var(--mauve-11);
+    font-size: 15px;
+    line-height: 1.5;
+}
+
+.Fieldset {
+    margin-bottom: 15px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+}
+
+.Label {
+    font-size: 13px;
+    line-height: 1;
+    margin-bottom: 10px;
+    color: var(--violet-12);
+    display: block;
+}
+
+.Input {
+    flex: 1 0 auto;
+    border-radius: 4px;
+    padding: 0 10px;
+    font-size: 15px;
+    line-height: 1;
+    color: var(--violet-11);
+    box-shadow: 0 0 0 1px var(--violet-7);
+    height: 35px;
+}
+
+.Input:focus {
+    box-shadow: 0 0 0 2px var(--violet-8);
+}
+
+.Button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    padding: 0 15px;
+    font-size: 15px;
+    line-height: 1;
+    font-weight: 500;
+    height: 35px;
+}
+
+.Button.green {
+    background-color: var(--green-4);
+    color: var(--green-11);
+}
+
+.Button.green:hover {
+    background-color: var(--green-5);
+}
+
+.Button.green:focus {
+    box-shadow: 0 0 0 2px var(--green-7);
+}
+
 .editor-section {
     margin: 1rem auto;
     padding: 1rem;