diff --git a/components.d.ts b/components.d.ts
index 6293a12..7207989 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -12,5 +12,6 @@ declare module '@vue/runtime-core' {
     BubbleMenu: typeof import('./src/components/tiptap/BubbleMenu.vue')['default']
     CommandsList: typeof import('./src/components/tiptap/CommandsList.vue')['default']
     Editor: typeof import('./src/components/tiptap/Editor.vue')['default']
+    PublishWidget: typeof import('./src/components/publish/PublishWidget.vue')['default']
   }
 }
diff --git a/src/components/Tiptap/Editor.vue b/src/components/Tiptap/Editor.vue
index 785f587..9396152 100644
--- a/src/components/Tiptap/Editor.vue
+++ b/src/components/Tiptap/Editor.vue
@@ -93,15 +93,20 @@ const editor = useEditor({
   autofocus: true,
   editorProps: {
     attributes: {
-      class: 'prose prose-slate mx-auto',
+      class: 'prose prose-slate p-5 focus:outline-none bg-white rounded-box max-w-3xl',
     },
   },
 })
 </script>
 
 <template>
-  <BubbleMenu v-if="editor" :editor="editor" />
-  <EditorContent :editor="editor" />
+  <div
+    class="shadow-lg flex flex-col items-center bg-slate-100 max-w-3xl mx-auto p-4 rounded-box"
+  >
+    <BubbleMenu v-if="editor" :editor="editor" />
+    <EditorContent :editor="editor" />
+    <PublishWidget />
+  </div>
 </template>
 
 <style lang="scss">
@@ -115,7 +120,7 @@ const editor = useEditor({
 }
 
 /* Placeholder (on every new line) */
-.ProseMirror :where(p.is-empty,h1.is-empty,h2.is-empty,h3.is-empty)::before {
+.ProseMirror :where(p.is-empty, h1.is-empty, h2.is-empty, h3.is-empty)::before {
   content: attr(data-placeholder);
   float: left;
   color: #adb5bd;
diff --git a/src/components/publish/PublishWidget.vue b/src/components/publish/PublishWidget.vue
new file mode 100644
index 0000000..873f354
--- /dev/null
+++ b/src/components/publish/PublishWidget.vue
@@ -0,0 +1,58 @@
+<script lang="ts" setup>
+interface Action {
+  name: string
+  icon: string
+}
+
+const actions: Action[] = [
+  {
+    name: 'file',
+    icon: 'i-tabler-paperclip',
+  }, {
+    name: 'poll',
+    icon: 'i-tabler-chart-bar',
+  },
+  {
+    name: 'emoji-picker',
+    icon: 'i-tabler-mood-smile-beam',
+  },
+  {
+    name: 'schedule',
+    icon: 'i-tabler-calendar-time',
+  },
+  {
+    name: 'content-warning',
+    icon: 'i-tabler-alert-triangle',
+  },
+]
+</script>
+
+<template>
+  <div class="flex justify-between w-full content-between items-center">
+    <div>
+      <button v-for="{ name, icon } in actions" :key="name" class="btn btn-ghost btn-square">
+        <span :class="icon" class="w-5 h-5" />
+      </button>
+    </div>
+    <div class="flex items-center gap-1">
+      <div class="dropdown dropdown-bottom dropdown-end menu-compact">
+        <label tabindex="0" class="btn btn-sm btn-ghost gap-1">中文<span class="i-tabler-chevron-down" /></label>
+        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
+          <li><a>Item 1</a></li>
+          <li><a>Item 2</a></li>
+        </ul>
+      </div>
+      <div class="dropdown dropdown-bottom dropdown-end menu-compact">
+        <label tabindex="0" class="btn btn-sm btn-ghost gap-1"><span class="i-tabler-world w-5 h-5" /><span class="i-tabler-chevron-down" /></label>
+        <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
+          <li><a>Item 1</a></li>
+          <li><a>Item 2</a></li>
+        </ul>
+      </div>
+      <button class="btn btn-sm gap-2">
+        <span class="i-tabler-send" />
+        Post
+      </button>
+    </div>
+  </div>
+</template>