diff --git a/internal/rpc/rpc_client.go b/internal/rpc/rpc_client.go
index abf30325..1b3dea69 100644
--- a/internal/rpc/rpc_client.go
+++ b/internal/rpc/rpc_client.go
@@ -94,6 +94,10 @@ func (this *RPCClient) ServerRPC() pb.ServerServiceClient {
 	return pb.NewServerServiceClient(this.pickConn())
 }
 
+func (this *RPCClient) ServerGroupRPC() pb.ServerGroupServiceClient {
+	return pb.NewServerGroupServiceClient(this.pickConn())
+}
+
 func (this *RPCClient) APINodeRPC() pb.APINodeServiceClient {
 	return pb.NewAPINodeServiceClient(this.pickConn())
 }
diff --git a/internal/web/actions/default/servers/components/componentutils/component_helper.go b/internal/web/actions/default/servers/components/componentutils/component_helper.go
index 483d0155..20d7f194 100644
--- a/internal/web/actions/default/servers/components/componentutils/component_helper.go
+++ b/internal/web/actions/default/servers/components/componentutils/component_helper.go
@@ -39,11 +39,11 @@ func (this *ComponentHelper) createLeftMenus(secondMenuItem string) (items []map
 		"url":      "/servers/components",
 		"isActive": secondMenuItem == "global",
 	})
-	/**items = append(items, maps.Map{
-		"name":     "分组设置",
-		"url":      "/servers/components/group",
+	items = append(items, maps.Map{
+		"name":     "服务分组",
+		"url":      "/servers/components/groups",
 		"isActive": secondMenuItem == "group",
-	})**/
+	})
 	items = append(items, maps.Map{
 		"name":     "缓存策略",
 		"url":      "/servers/components/cache",
diff --git a/internal/web/actions/default/servers/components/group/index.go b/internal/web/actions/default/servers/components/group/index.go
deleted file mode 100644
index aa3306b5..00000000
--- a/internal/web/actions/default/servers/components/group/index.go
+++ /dev/null
@@ -1,18 +0,0 @@
-package group
-
-import (
-	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
-)
-
-type IndexAction struct {
-	actionutils.ParentAction
-}
-
-func (this *IndexAction) Init() {
-	this.FirstMenu("index")
-}
-
-func (this *IndexAction) RunGet(params struct{}) {
-
-	this.Show()
-}
diff --git a/internal/web/actions/default/servers/components/groups/createPopup.go b/internal/web/actions/default/servers/components/groups/createPopup.go
new file mode 100644
index 00000000..8d1f40cd
--- /dev/null
+++ b/internal/web/actions/default/servers/components/groups/createPopup.go
@@ -0,0 +1,44 @@
+package groups
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/iwind/TeaGo/actions"
+	"github.com/iwind/TeaGo/maps"
+)
+
+type CreatePopupAction struct {
+	actionutils.ParentAction
+}
+
+func (this *CreatePopupAction) Init() {
+	this.Nav("", "", "")
+}
+
+func (this *CreatePopupAction) RunGet(params struct{}) {
+	this.Show()
+}
+
+func (this *CreatePopupAction) RunPost(params struct{
+	Name string
+
+	Must *actions.Must
+}) {
+	params.Must.
+		Field("name", params.Name).
+		Require("请输入分组名称")
+	createResp, err := this.RPC().ServerGroupRPC().CreateServerGroup(this.AdminContext(), &pb.CreateServerGroupRequest{
+		Name:      params.Name,
+	})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Data["group"] = maps.Map{
+		"id":   createResp.GroupId,
+		"name": params.Name,
+	}
+
+	this.Success()
+}
diff --git a/internal/web/actions/default/servers/components/groups/delete.go b/internal/web/actions/default/servers/components/groups/delete.go
new file mode 100644
index 00000000..156c3e1d
--- /dev/null
+++ b/internal/web/actions/default/servers/components/groups/delete.go
@@ -0,0 +1,33 @@
+package groups
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+)
+
+type DeleteAction struct {
+	actionutils.ParentAction
+}
+
+func (this *DeleteAction) RunPost(params struct {
+	GroupId int64
+}) {
+	// 检查是否正在使用
+	countResp, err := this.RPC().ServerRPC().CountAllEnabledServersWithGroupId(this.AdminContext(), &pb.CountAllEnabledServersWithGroupIdRequest{GroupId: params.GroupId})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	if countResp.Count > 0 {
+		this.Fail("此分组正在被使用不能删除，请修改相关服务后再删除")
+	}
+
+	_, err = this.RPC().ServerGroupRPC().DeleteServerGroup(this.AdminContext(), &pb.DeleteServerGroupRequest{GroupId: params.GroupId})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Success()
+}
diff --git a/internal/web/actions/default/servers/components/group/helper.go b/internal/web/actions/default/servers/components/groups/helper.go
similarity index 95%
rename from internal/web/actions/default/servers/components/group/helper.go
rename to internal/web/actions/default/servers/components/groups/helper.go
index f5453623..ecf853bc 100644
--- a/internal/web/actions/default/servers/components/group/helper.go
+++ b/internal/web/actions/default/servers/components/groups/helper.go
@@ -1,4 +1,4 @@
-package group
+package groups
 
 import (
 	"github.com/iwind/TeaGo/actions"
diff --git a/internal/web/actions/default/servers/components/groups/index.go b/internal/web/actions/default/servers/components/groups/index.go
new file mode 100644
index 00000000..2e58351e
--- /dev/null
+++ b/internal/web/actions/default/servers/components/groups/index.go
@@ -0,0 +1,43 @@
+package groups
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/iwind/TeaGo/maps"
+)
+
+type IndexAction struct {
+	actionutils.ParentAction
+}
+
+func (this *IndexAction) Init() {
+	this.FirstMenu("index")
+}
+
+func (this *IndexAction) RunGet(params struct{}) {
+	groupsResp, err := this.RPC().ServerGroupRPC().FindAllEnabledServerGroups(this.AdminContext(), &pb.FindAllEnabledServerGroupsRequest{
+	})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	groupMaps := []maps.Map{}
+	for _, group := range groupsResp.Groups {
+		countResp, err := this.RPC().ServerRPC().CountAllEnabledServersWithGroupId(this.AdminContext(), &pb.CountAllEnabledServersWithGroupIdRequest{GroupId: group.Id})
+		if err != nil {
+			this.ErrorPage(err)
+			return
+		}
+		countServers := countResp.Count
+
+		groupMaps = append(groupMaps, maps.Map{
+			"id":           group.Id,
+			"name":         group.Name,
+			"countServers": countServers,
+		})
+	}
+	this.Data["groups"] = groupMaps
+
+	this.Show()
+}
diff --git a/internal/web/actions/default/servers/components/group/init.go b/internal/web/actions/default/servers/components/groups/init.go
similarity index 56%
rename from internal/web/actions/default/servers/components/group/init.go
rename to internal/web/actions/default/servers/components/groups/init.go
index 93f9c254..c86b6297 100644
--- a/internal/web/actions/default/servers/components/group/init.go
+++ b/internal/web/actions/default/servers/components/groups/init.go
@@ -1,4 +1,4 @@
-package group
+package groups
 
 import (
 	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/components/componentutils"
@@ -12,8 +12,14 @@ func init() {
 			Helper(helpers.NewUserMustAuth()).
 			Helper(NewHelper()).
 			Helper(componentutils.NewComponentHelper()).
-			Prefix("/servers/components/group").
+			Prefix("/servers/components/groups").
 			Get("", new(IndexAction)).
+			GetPost("/createPopup", new(CreatePopupAction)).
+			GetPost("/updatePopup", new(UpdatePopupAction)).
+			Post("/options", new(OptionsAction)).
+			GetPost("/selectPopup", new(SelectPopupAction)).
+			Post("/delete", new(DeleteAction)).
+			Post("/sort", new(SortAction)).
 			EndAll()
 	})
 }
diff --git a/internal/web/actions/default/servers/components/groups/options.go b/internal/web/actions/default/servers/components/groups/options.go
new file mode 100644
index 00000000..79eb8c47
--- /dev/null
+++ b/internal/web/actions/default/servers/components/groups/options.go
@@ -0,0 +1,11 @@
+package groups
+
+import "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+
+type OptionsAction struct {
+	actionutils.ParentAction
+}
+
+func (this *OptionsAction) RunPost(params struct{}) {
+	this.Success()
+}
diff --git a/internal/web/actions/default/servers/components/groups/selectPopup.go b/internal/web/actions/default/servers/components/groups/selectPopup.go
new file mode 100644
index 00000000..9fbaedb2
--- /dev/null
+++ b/internal/web/actions/default/servers/components/groups/selectPopup.go
@@ -0,0 +1,15 @@
+package groups
+
+import "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+
+type SelectPopupAction struct {
+	actionutils.ParentAction
+}
+
+func (this *SelectPopupAction) Init() {
+	this.Nav("", "", "")
+}
+
+func (this *SelectPopupAction) RunGet(params struct{}) {
+	this.Show()
+}
diff --git a/internal/web/actions/default/servers/components/groups/sort.go b/internal/web/actions/default/servers/components/groups/sort.go
new file mode 100644
index 00000000..8b776273
--- /dev/null
+++ b/internal/web/actions/default/servers/components/groups/sort.go
@@ -0,0 +1,22 @@
+package groups
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+)
+
+type SortAction struct {
+	actionutils.ParentAction
+}
+
+func (this *SortAction) RunPost(params struct {
+	GroupIds []int64
+}) {
+	_, err := this.RPC().ServerGroupRPC().UpdateServerGroupOrders(this.AdminContext(), &pb.UpdateServerGroupOrdersRequest{GroupIds: params.GroupIds})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Success()
+}
diff --git a/internal/web/actions/default/servers/components/groups/updatePopup.go b/internal/web/actions/default/servers/components/groups/updatePopup.go
new file mode 100644
index 00000000..92fa1dc5
--- /dev/null
+++ b/internal/web/actions/default/servers/components/groups/updatePopup.go
@@ -0,0 +1,59 @@
+package groups
+
+import (
+	"github.com/TeaOSLab/EdgeAdmin/internal/web/actions/actionutils"
+	"github.com/TeaOSLab/EdgeCommon/pkg/rpc/pb"
+	"github.com/iwind/TeaGo/actions"
+	"github.com/iwind/TeaGo/maps"
+)
+
+type UpdatePopupAction struct {
+	actionutils.ParentAction
+}
+
+func (this *UpdatePopupAction) Init() {
+	this.Nav("", "", "")
+}
+
+func (this *UpdatePopupAction) RunGet(params struct {
+	GroupId int64
+}) {
+	groupResp, err := this.RPC().ServerGroupRPC().FindEnabledServerGroup(this.AdminContext(), &pb.FindEnabledServerGroupRequest{GroupId: params.GroupId})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+	group := groupResp.Group
+	if group == nil {
+		this.NotFound("serverGroup", params.GroupId)
+		return
+	}
+
+	this.Data["group"] = maps.Map{
+		"id":   group.Id,
+		"name": group.Name,
+	}
+
+	this.Show()
+}
+
+func (this *UpdatePopupAction) RunPost(params struct {
+	GroupId int64
+	Name    string
+
+	Must *actions.Must
+}) {
+	params.Must.
+		Field("name", params.Name).
+		Require("请输入分组名称")
+	_, err := this.RPC().ServerGroupRPC().UpdateServerGroup(this.AdminContext(), &pb.UpdateServerGroupRequest{
+		GroupId: params.GroupId,
+		Name:    params.Name,
+	})
+	if err != nil {
+		this.ErrorPage(err)
+		return
+	}
+
+	this.Success()
+}
diff --git a/internal/web/import.go b/internal/web/import.go
index ab45a61f..bd7ea7ff 100644
--- a/internal/web/import.go
+++ b/internal/web/import.go
@@ -20,7 +20,7 @@ import (
 	_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers"
 	_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/components"
 	_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/components/cache"
-	_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/components/group"
+	_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/components/groups"
 	_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/components/log"
 	_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/components/ssl"
 	_ "github.com/TeaOSLab/EdgeAdmin/internal/web/actions/default/servers/components/waf"
diff --git a/web/views/@default/servers/components/group/index.html b/web/views/@default/servers/components/group/index.html
deleted file mode 100644
index fb2dbfb9..00000000
--- a/web/views/@default/servers/components/group/index.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{$layout}
-{$template "/left_menu"}
-
-<div class="right-box">
-	<p class="ui message">此功能暂未开放敬请期待。</p>
-</div>
\ No newline at end of file
diff --git a/web/views/@default/servers/components/groups/createPopup.html b/web/views/@default/servers/components/groups/createPopup.html
new file mode 100644
index 00000000..2dcee994
--- /dev/null
+++ b/web/views/@default/servers/components/groups/createPopup.html
@@ -0,0 +1,14 @@
+{$layout "layout_popup"}
+
+<h3>创建分组</h3>
+<form class="ui form" data-tea-action="$" data-tea-success="success">
+	<table class="ui table definition selectable">
+		<tr>
+			<td class="title">分组名称 *</td>
+			<td>
+				<input type="text" name="name" maxlength="50" ref="focus"/>
+			</td>
+		</tr>
+	</table>
+	<submit-btn></submit-btn>
+</form>
\ No newline at end of file
diff --git a/web/views/@default/servers/components/groups/createPopup.js b/web/views/@default/servers/components/groups/createPopup.js
new file mode 100644
index 00000000..c8fe9515
--- /dev/null
+++ b/web/views/@default/servers/components/groups/createPopup.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyPopup
+})
\ No newline at end of file
diff --git a/web/views/@default/servers/components/groups/index.html b/web/views/@default/servers/components/groups/index.html
new file mode 100644
index 00000000..d70bc929
--- /dev/null
+++ b/web/views/@default/servers/components/groups/index.html
@@ -0,0 +1,40 @@
+{$layout}
+{$template "/left_menu"}
+
+<div class="right-box">
+	<first-menu>
+		<menu-item href="/servers/components/groups" active="true">列表</menu-item>
+		<span class="item">|</span>
+		<a href="" class="item" @click.prevent="createGroup()">[创建]</a>
+	</first-menu>
+
+	<p class="comment" v-if="groups.length == 0">暂时还没有分组。</p>
+	<div v-show="groups.length > 0">
+		<div class="margin"></div>
+		<table class="ui table selectable" id="sortable-table">
+			<thead>
+				<tr>
+					<th style="width:3em"></th>
+					<th>分组名称</th>
+					<th>服务数量</th>
+					<th class="two op">操作</th>
+				</tr>
+			</thead>
+			<tbody v-for="group in groups" :data-group-id="group.id">
+				<tr>
+					<td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
+					<td>{{group.name}}</td>
+					<td>
+						<span v-if="group.countServers.length > 0">{{group.countServers}}</span>
+						<span v-else class="disabled">0</span>
+					</td>
+					<td>
+						<a href="" @click.prevent="updateGroup(group.id)">修改</a> &nbsp; <a href="" @click.prevent="deleteGroup(group.id)">删除</a>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+
+	<p v-if="groups.length > 0" class="comment">可以拖动左侧的<i class="icon bars"></i>排序。</p>
+</div>
\ No newline at end of file
diff --git a/web/views/@default/servers/components/groups/index.js b/web/views/@default/servers/components/groups/index.js
new file mode 100644
index 00000000..1114aea3
--- /dev/null
+++ b/web/views/@default/servers/components/groups/index.js
@@ -0,0 +1,53 @@
+Tea.context(function () {
+	this.$delay(function () {
+		let that = this
+		sortTable(function () {
+			let groupIds = []
+			document.querySelectorAll("*[data-group-id]").forEach(function (element) {
+				groupIds.push(element.getAttribute("data-group-id"))
+			})
+			that.$post("/servers/components/groups/sort")
+				.params({
+					groupIds: groupIds
+				})
+				.success(function () {
+					teaweb.successToast("保存成功")
+				})
+		})
+	})
+
+	this.createGroup = function () {
+		teaweb.popup("/servers/components/groups/createPopup", {
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+
+	this.updateGroup = function (groupId) {
+		teaweb.popup("/servers/components/groups/updatePopup?groupId=" + groupId, {
+			callback: function () {
+				teaweb.success("保存成功", function () {
+					teaweb.reload()
+				})
+			}
+		})
+	}
+
+	this.deleteGroup = function (groupId) {
+		let that = this
+		teaweb.confirm("确定要删除这个分组吗？", function () {
+			that.$post("/servers/components/groups/delete")
+				.params({
+					groupId: groupId
+				})
+				.success(function () {
+					teaweb.success("删除成功", function () {
+						teaweb.reload()
+					})
+				})
+		})
+	}
+})
\ No newline at end of file
diff --git a/web/views/@default/servers/components/groups/selectPopup.html b/web/views/@default/servers/components/groups/selectPopup.html
new file mode 100644
index 00000000..6c3b5856
--- /dev/null
+++ b/web/views/@default/servers/components/groups/selectPopup.html
@@ -0,0 +1,22 @@
+{$layout "layout_popup"}
+
+<h3>选择分组</h3>
+
+<form class="ui form" data-tea-action="$" data-tea-success="success">
+	<input type="hidden" name="groupId" :value="groupId"/>
+	<table class="ui table definition selectable">
+		<tr>
+			<td class="title">选择分组</td>
+			<td>
+				<div v-if="groups.length > 0">
+					<a href="" class="ui label tiny" v-for="group in groups" :class="{blue:group.id == groupId}" style="margin-bottom:0.5em" @click.prevent="selectGroup(group)">{{group.name}}</a>
+					<p class="comment">点击可已选中要使用的分组。</p>
+				</div>
+				<div v-else>
+					<p class="comment">暂时还没有可以使用的分组。</p>
+				</div>
+			</td>
+		</tr>
+	</table>
+	<submit-btn>确定</submit-btn>
+</form>
\ No newline at end of file
diff --git a/web/views/@default/servers/components/groups/selectPopup.js b/web/views/@default/servers/components/groups/selectPopup.js
new file mode 100644
index 00000000..9da529b0
--- /dev/null
+++ b/web/views/@default/servers/components/groups/selectPopup.js
@@ -0,0 +1,8 @@
+Tea.context(function () {
+	this.success = NotifyPopup
+	this.groupId = 0
+
+	this.selectGroup = function (group) {
+		this.groupId = group.id
+	}
+})
\ No newline at end of file
diff --git a/web/views/@default/servers/components/groups/updatePopup.html b/web/views/@default/servers/components/groups/updatePopup.html
new file mode 100644
index 00000000..2169f3d8
--- /dev/null
+++ b/web/views/@default/servers/components/groups/updatePopup.html
@@ -0,0 +1,15 @@
+{$layout "layout_popup"}
+
+<h3>修改分组</h3>
+<form class="ui form" data-tea-action="$" data-tea-success="success">
+	<input type="hidden" name="groupId" :value="group.id"/>
+	<table class="ui table definition selectable">
+		<tr>
+			<td class="title">分组名称 *</td>
+			<td>
+				<input type="text" name="name" maxlength="50" ref="focus" v-model="group.name"/>
+			</td>
+		</tr>
+	</table>
+	<submit-btn></submit-btn>
+</form>
\ No newline at end of file
diff --git a/web/views/@default/servers/components/groups/updatePopup.js b/web/views/@default/servers/components/groups/updatePopup.js
new file mode 100644
index 00000000..c8fe9515
--- /dev/null
+++ b/web/views/@default/servers/components/groups/updatePopup.js
@@ -0,0 +1,3 @@
+Tea.context(function () {
+	this.success = NotifyPopup
+})
\ No newline at end of file