diff --git a/webview/src/apps/chatroom/create.html b/webview/src/apps/chatroom/create.html
new file mode 100644
index 00000000..3edf8c40
--- /dev/null
+++ b/webview/src/apps/chatroom/create.html
@@ -0,0 +1,73 @@
+<layout-header></layout-header>
+
+<nav class="container-lg mb-3">
+    <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a routerLink="/welcome">首页</a></li>
+        <li class="breadcrumb-item"><a routerLink="/keyword/list">群聊配置</a></li>
+        <li class="breadcrumb-item active">添加</li>
+    </ol>
+</nav>
+
+<div class="container-lg mb-3">
+    <form class="row gy-3" (ngSubmit)="createChatroom()" #myform="ngForm">
+        <div class="col-12">
+            <label class="form-label">群聊 *</label>
+            <select name="roomid" class="form-select" [(ngModel)]="formdata.roomid" required>
+                @for (item of chatrooms; track item.wxid) {
+                <option value="{{item.wxid}}">{{item.name}}</option>
+                }
+            </select>
+            <div class="form-text">
+                选择一个需要关联的群聊
+            </div>
+        </div>
+        <div class="col-12">
+            <label class="form-label">名称 *</label>
+            <input type="text" name="phrase" class="form-control" [(ngModel)]="formdata.name" required />
+            <div class="form-text">
+                用于生成加群指令中的描述
+            </div>
+        </div>
+        <div class="col-12">
+            <label class="form-label">加群指令 *</label>
+            <input type="text" name="phrase" class="form-control" [(ngModel)]="formdata.join_argot" required />
+            <div class="form-text">
+                用于生成加群指令
+            </div>
+        </div>
+        <div class="col-12">
+            <label class="form-label">欢迎信息 *</label>
+            <input type="text" name="phrase" class="form-control" [(ngModel)]="formdata.welcome_msg" required />
+            <div class="form-text">
+                用户入群时的欢迎信息，-” 表示不欢迎
+            </div>
+        </div>
+        <div class="col-12">
+            <label class="form-label">撤回提醒 *</label>
+            <input type="text" name="phrase" class="form-control" [(ngModel)]="formdata.revoke_msg" required />
+            <div class="form-text">
+                检测到撤回消息时的提醒，“-” 表示不提醒
+            </div>
+        </div>
+        <div class="col-12">
+            <label class="form-label">级别 *</label>
+            <select name="roomid" class="form-select" [(ngModel)]="formdata.level" required>
+                <option value="1">拉黑</option>
+                <option value="2">加白</option>
+            </select>
+            <div class="form-text">
+                机器人使用权限
+            </div>
+        </div>
+        <div class="col-12">
+            <label class="form-label">备注 *</label>
+            <input type="text" name="phrase" class="form-control" [(ngModel)]="formdata.remark" required />
+            <div class="form-text">
+                备注信息
+            </div>
+        </div>
+        <div class="col-12">
+            <button type="submit" class="btn btn-primary" [disabled]="myform.invalid">确认</button>
+        </div>
+    </form>
+</div>
\ No newline at end of file
diff --git a/webview/src/apps/chatroom/create.scss b/webview/src/apps/chatroom/create.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/webview/src/apps/chatroom/create.ts b/webview/src/apps/chatroom/create.ts
new file mode 100644
index 00000000..59e0fdda
--- /dev/null
+++ b/webview/src/apps/chatroom/create.ts
@@ -0,0 +1,35 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { RobotApi, ChatroomCreateParam } from '../../openapi/wrobot';
+import { WrestApi, WcfrestContactPayload } from '../../openapi/wcfrest';
+
+
+@Component({
+    selector: 'page-chatroom-create',
+    templateUrl: 'create.html',
+    styleUrls: ['create.scss']
+})
+export class ChatroomCreateComponent {
+
+    public chatrooms: Array<WcfrestContactPayload> = [];
+
+    public formdata = { level: 1 } as ChatroomCreateParam;
+
+    constructor(private router: Router) {
+        this.getChatrooms();
+    }
+
+    public createChatroom() {
+        RobotApi.chatroomCreate(this.formdata).then(() => {
+            this.router.navigate(['chatroom/list']);
+        });
+    }
+
+    public getChatrooms() {
+        WrestApi.chatrooms().then((data) => {
+            this.chatrooms = data || [];
+        });
+    }
+
+}
diff --git a/webview/src/apps/chatroom/list.html b/webview/src/apps/chatroom/list.html
index 131bb9e4..170f5bb4 100644
--- a/webview/src/apps/chatroom/list.html
+++ b/webview/src/apps/chatroom/list.html
@@ -8,6 +8,10 @@
 </nav>
 
 <div class="container-lg mb-3">
+    <div class="text-end mb-3">
+        <button class="btn btn-sm btn-primary" [routerLink]="['/chatroom/create']">添加</button>
+    </div>
+
     <table class="table table-hover align-middle">
         <thead class="table-light">
             <tr>
diff --git a/webview/src/apps/chatroom/list.ts b/webview/src/apps/chatroom/list.ts
index 5c5ad21d..53f7ddfb 100644
--- a/webview/src/apps/chatroom/list.ts
+++ b/webview/src/apps/chatroom/list.ts
@@ -20,14 +20,8 @@ export class ChatroomListComponent {
     public chatrooms: Array<TablesChatroom> = [];
 
     constructor() {
-        this.getContacts();
         this.getChatrooms();
-    }
-
-    public getContacts() {
-        WrestApi.contacts().then((data) => {
-            data.forEach((item) => this.contacts[item.wxid] = item);
-        });
+        this.getContacts();
     }
 
     public getChatrooms() {
@@ -43,6 +37,12 @@ export class ChatroomListComponent {
         });
     }
 
+    public getContacts() {
+        WrestApi.contacts().then((data) => {
+            data.forEach((item) => this.contacts[item.wxid] = item);
+        });
+    }
+
     public getAvatars(ids: string[]) {
         WrestApi.avatars({ wxids: [...new Set(ids)] }).then((data) => {
             data && data.forEach((item) => {