diff --git a/src/admin/Bootstrap.Admin/Components/SelectBase.cs b/src/admin/Bootstrap.Admin/Components/SelectBase.cs
index a8a8ce50..91b23653 100644
--- a/src/admin/Bootstrap.Admin/Components/SelectBase.cs
+++ b/src/admin/Bootstrap.Admin/Components/SelectBase.cs
@@ -8,6 +8,12 @@ namespace Bootstrap.Admin.Components
     /// </summary>
     public class SelectBase : ComponentBase
     {
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public string Id { get; set; } = "";
+
         /// <summary>
         /// 
         /// </summary>
@@ -25,6 +31,18 @@ namespace Bootstrap.Admin.Components
         /// </summary>
         public SelectItemBase? SelectedItem { get; set; }
 
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public int SelectedValue { get; set; }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public EventCallback<int> SelectedValueChanged { get; set; }
+
         /// <summary>
         /// 
         /// </summary>
diff --git a/src/admin/Bootstrap.Admin/Components/TableBase.cs b/src/admin/Bootstrap.Admin/Components/TableBase.cs
index c903b107..588fe2b9 100644
--- a/src/admin/Bootstrap.Admin/Components/TableBase.cs
+++ b/src/admin/Bootstrap.Admin/Components/TableBase.cs
@@ -1,5 +1,7 @@
-using Microsoft.AspNetCore.Components;
+using Bootstrap.Admin.Extensions;
+using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
+using System;
 using System.Collections.Generic;
 
 namespace Bootstrap.Admin.Components
@@ -15,12 +17,6 @@ namespace Bootstrap.Admin.Components
         [Inject]
         protected IJSRuntime? JSRuntime { get; set; }
 
-        /// <summary>
-        ///
-        /// </summary>
-        [Parameter]
-        public string Id { get; set; } = "";
-
         /// <summary>
         /// 
         /// </summary>
@@ -39,6 +35,12 @@ namespace Bootstrap.Admin.Components
         [Parameter]
         public RenderFragment? TableFooter { get; set; }
 
+        /// <summary>
+        /// 
+        /// </summary>
+        [Parameter]
+        public bool ShowToolBar { get; set; } = true;
+
         /// <summary>
         /// 
         /// </summary>
@@ -46,9 +48,20 @@ namespace Bootstrap.Admin.Components
         public IEnumerable<TItem> Items { get; set; } = new TItem[0];
 
         /// <summary>
-        /// 数据
+        /// 
         /// </summary>
-        [Parameter]
-        public int ItemsCount { get; set; } = 0;
+        public Action AddCallback { get; set; } = new Action(() => { });
+        /// <summary>
+        /// 
+        /// </summary>
+        public Action EditCallback { get; set; } = new Action(() => { });
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public void Delete()
+        {
+
+        }
     }
 }
diff --git a/src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs b/src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs
index 2b476ecc..a6c529ea 100644
--- a/src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs
+++ b/src/admin/Bootstrap.Admin/Extensions/JSRuntimeExtensions.cs
@@ -52,5 +52,12 @@ namespace Bootstrap.Admin.Extensions
         /// </summary>
         /// <param name="jSRuntime"></param>
         public static void InitModal(this IJSRuntime? jSRuntime) => jSRuntime.InvokeVoidAsync("$.initModal");
+
+        /// <summary>
+        /// 弹出 Modal 组件
+        /// </summary>
+        /// <param name="jSRuntime"></param>
+        /// <param name="modalId"></param>
+        public static void ToggleModal(this IJSRuntime? jSRuntime, string modalId) => jSRuntime.InvokeVoidAsync("$.toggleModal", modalId);
     }
 }
diff --git a/src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor b/src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
index a6f12c24..8992e481 100644
--- a/src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
+++ b/src/admin/Bootstrap.Admin/Pages/Admin/Dicts.razor
@@ -1,4 +1,6 @@
-<div class="card">
+@inject IJSRuntime JSRuntime
+
+<div class="card">
     <div class="card-header">查询条件</div>
     <div class="card-body">
         <form class="form-inline">
@@ -26,41 +28,28 @@
         </form>
     </div>
 </div>
-<div id="toolbar" class="d-none">
-    <div class="gear btn-group">
-        <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-gear"></i></button>
-        <div class="dropdown-menu">
-            <a id="tb_add" href="#" title="新增" asp-auth="add"><i class="fa fa-plus"></i></a>
-            <a id="tb_delete" href="#" title="删除" asp-auth="del"><i class="fa fa-remove"></i></a>
-            <a id="tb_edit" href="#" title="编辑" asp-auth="edit"><i class="fa fa-pencil"></i></a>
-        </div>
-    </div>
-    <div class="toolbar btn-group">
-        <button id="btn_add" type="button" class="btn btn-success" asp-auth="add"><i class="fa fa-plus" aria-hidden="true"></i><span>新增</span></button>
-        <button id="btn_delete" type="button" class="btn btn-danger" asp-auth="del"><i class="fa fa-remove" aria-hidden="true"></i><span>删除</span></button>
-        <button id="btn_edit" type="button" class="btn btn-primary" asp-auth="edit"><i class="fa fa-pencil" aria-hidden="true"></i><span>编辑</span></button>
-    </div>
-</div>
 <div class="card">
     <div class="card-header">
         查询结果
     </div>
     <div class="card-body">
-        <Table Id="tb_Dict" Items="Items" TItem="Bootstrap.Security.BootstrapDict" ItemsCount="ItemsCount">
-            <TableHeader>
-                <th>字典标签</th>
-                <th>字典名称</th>
-                <th>字典代码</th>
-                <th>字典类型</th>
-            </TableHeader>
-            <RowTemplate>
-                <td>@context.Category</td>
-                <td>@context.Name</td>
-                <td>@context.Code</td>
-                <td>@context.Define</td>
-            </RowTemplate>
-        </Table>
-        <Pagination @ref="Pagination" PageCount="PageCount" PageIndex="PageIndex" ItemsCount="ItemsCount"></Pagination>
+        <div class="bootstrap-table">
+            <Table @ref="Table" Items="Items" TItem="Bootstrap.Security.BootstrapDict">
+                <TableHeader>
+                    <th>字典标签</th>
+                    <th>字典名称</th>
+                    <th>字典代码</th>
+                    <th>字典类型</th>
+                </TableHeader>
+                <RowTemplate>
+                    <td>@context.Category</td>
+                    <td>@context.Name</td>
+                    <td>@context.Code</td>
+                    <td>@context.Define</td>
+                </RowTemplate>
+            </Table>
+            <Pagination @ref="Pagination" PageCount="PageCount" PageIndex="PageIndex" ItemsCount="ItemsCount"></Pagination>
+        </div>
     </div>
 </div>
 <div id="tableButtons" class="d-none">
@@ -70,34 +59,29 @@
     </div>
 </div>
 
-<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
-    Launch demo modal
-</button>
-
-<Modal Id="exampleModal" Title="字典编辑窗口">
+<Modal Id="DialogDict" Title="字典编辑窗口">
     <ModalBody>
         <form class="form-inline">
             <div class="row">
-                <input type="hidden" id="dictID" />
                 <div class="form-group col-sm-6">
                     <label class="control-label" for="dictCate">字典标签</label>
-                    <input type="text" class="form-control" id="dictCate" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
+                    <input type="text" class="form-control" id="dictCate" @bind="Model.Category" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
                 </div>
                 <div class="form-group col-sm-6">
                     <label class="control-label" for="dictDefine">字典类型</label>
-                    <input class="form-control" data-toggle="lgbSelect" />
-                    <select data-toggle="lgbSelect" class="d-none" data-default-val="1" id="dictDefine">
-                        <option value="0">系统使用</option>
-                        <option value="1">自定义</option>
-                    </select>
+                    <Select Id="dictDefine" @bind-SelectedValue="Model.Define">
+                        <SelectItem Text="系统使用" Value="0" Active="true"></SelectItem>
+                        <SelectItem Text="自定义" Value="1"></SelectItem>
+                    </Select>
+
                 </div>
                 <div class="form-group col-sm-6">
                     <label class="control-label" for="dictName">字典名称</label>
-                    <input type="text" class="form-control" id="dictName" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
+                    <input type="text" class="form-control" id="dictName" @bind="Model.Name" placeholder="不可为空，50字以内" maxlength="50" data-valid="true" />
                 </div>
                 <div class="form-group col-sm-6">
                     <label class="control-label" for="dictCode">字典代码</label>
-                    <input type="text" class="form-control" id="dictCode" placeholder="不可为空，2000字以内" maxlength="2000" data-valid="true" />
+                    <input type="text" class="form-control" id="dictCode" @bind="Model.Code" placeholder="不可为空，2000字以内" maxlength="2000" data-valid="true" />
                 </div>
             </div>
         </form>
@@ -107,7 +91,7 @@
             <i class="fa fa-times"></i>
             <span>关闭</span>
         </button>
-        <button type="button" class="btn btn-primary" id="btnSubmit">
+        <button type="button" class="btn btn-primary" @onclick="Save">
             <i class="fa fa-save"></i>
             <span>保存</span>
         </button>
@@ -131,6 +115,10 @@
 
     protected Pagination? Pagination { get; set; }
 
+    protected Table<BootstrapDict>? Table { get; set; }
+
+    protected BootstrapDict Model { get; set; } = new BootstrapDict();
+
     protected override void OnInitialized()
     {
         Query(1);
@@ -138,21 +126,35 @@
 
     protected override void OnAfterRender(bool firstRender)
     {
-        if (firstRender && Pagination != null)
+        if (firstRender)
         {
-            Pagination.ClickPageCallback = pageIndex =>
+            if (Pagination != null)
             {
-                if (pageIndex != PageIndex)
+                Pagination.ClickPageCallback = pageIndex =>
                 {
-                    Query(pageIndex);
+                    if (pageIndex != PageIndex)
+                    {
+                        Query(pageIndex);
+                        StateHasChanged();
+                    }
+                };
+                Pagination.PageItemsChangeCallback = () =>
+                {
+                    Query(1);
                     StateHasChanged();
-                }
-            };
-            Pagination.PageItemsChangeCallback = () =>
+                };
+            }
+            if (Table != null)
             {
-                Query(1);
-                StateHasChanged();
-            };
+                Table.AddCallback = () =>
+                {
+                    JSRuntime.ToggleModal("#DialogDict");
+                };
+                Table.EditCallback = () =>
+                {
+
+                };
+            }
         }
     }
 
@@ -167,4 +169,9 @@
         PageCount = (int)Math.Ceiling(data.Count() * 1.0d / pageItems);
         PageIndex = pageIndex;
     }
+
+    protected void Save()
+    {
+        JSRuntime.ToggleModal("#DialogDict");
+    }
 }
diff --git a/src/admin/Bootstrap.Admin/Shared/Select.razor b/src/admin/Bootstrap.Admin/Shared/Select.razor
index b316cd3e..f0a96464 100644
--- a/src/admin/Bootstrap.Admin/Shared/Select.razor
+++ b/src/admin/Bootstrap.Admin/Shared/Select.razor
@@ -1,7 +1,7 @@
 @inherits SelectBase
 
 <div data-toggle="lgbSelect" class="form-select dropdown">
-    <input type="text" readonly="readonly" class="form-control form-select-input" data-toggle="dropdown" placeholder="@PlaceHolder" value="@SelectedItem?.Text">
+    <input type="text" readonly="readonly" class="form-control form-select-input" id="@Id" data-toggle="dropdown" placeholder="@PlaceHolder" value="@SelectedItem?.Text">
     <span class="form-select-append"><i class="fa fa-angle-up"></i></span>
     <div class="dropdown-menu-arrow"></div>
     <div class="dropdown-menu">
diff --git a/src/admin/Bootstrap.Admin/Shared/Table.razor b/src/admin/Bootstrap.Admin/Shared/Table.razor
index 5f809126..ea6ec07b 100644
--- a/src/admin/Bootstrap.Admin/Shared/Table.razor
+++ b/src/admin/Bootstrap.Admin/Shared/Table.razor
@@ -1,6 +1,22 @@
 @typeparam TItem
 @inherits TableBase<TItem>
 
+    <div class="@(ShowToolBar ? "bs-bars" : "bs-bars d-none")">
+        <div class="toolbar btn-group">
+            <button id="btn_add" type="button" @onclick="(e => AddCallback())" class="btn btn-success" asp-auth="add"><i class="fa fa-plus" aria-hidden="true"></i><span>新增</span></button>
+            <button id="btn_delete" type="button" @onclick="Delete" class="btn btn-danger" asp-auth="del"><i class="fa fa-remove" aria-hidden="true"></i><span>删除</span></button>
+            <button id="btn_edit" type="button" @onclick="(e => EditCallback())" class="btn btn-primary" asp-auth="edit"><i class="fa fa-pencil" aria-hidden="true"></i><span>编辑</span></button>
+        </div>
+        <div class="gear btn-group">
+            <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" type="button"><i class="fa fa-gear"></i></button>
+            <div class="dropdown-menu">
+                <div id="tb_add" title="新增" @onclick="(e => AddCallback())" asp-auth="add"><i class="fa fa-plus"></i></div>
+                <div id="tb_delete" title="删除" @onclick="Delete" asp-auth="del"><i class="fa fa-remove"></i></div>
+                <div id="tb_edit" title="编辑" @onclick="(e => EditCallback())" asp-auth="edit"><i class="fa fa-pencil"></i></div>
+            </div>
+        </div>
+    </div>
+
 <table class="table table-striped table-bordered table-hover">
     <thead>
         <tr>@TableHeader</tr>
diff --git a/src/admin/Bootstrap.Admin/wwwroot/css/blazor.css b/src/admin/Bootstrap.Admin/wwwroot/css/blazor.css
index e6dd09a2..58f277e2 100644
--- a/src/admin/Bootstrap.Admin/wwwroot/css/blazor.css
+++ b/src/admin/Bootstrap.Admin/wwwroot/css/blazor.css
@@ -67,6 +67,18 @@ nav .dropdown .nav-link-close.dropdown-toggle:after {
     padding: 0.5rem;
 }
 
+.card-body .bootstrap-table {
+    margin-top: 0rem;
+}
+
+.bs-bars {
+    margin-bottom: 0.625rem;
+}
+
+.bootstrap-table {
+    margin-bottom: 0;
+}
+
 .pagination-bar {
     flex: 1 1 auto;
     margin-bottom: 1rem;
diff --git a/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js b/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
index 082e9a2c..905fae65 100644
--- a/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
+++ b/src/admin/Bootstrap.Admin/wwwroot/js/ba.blazor.js
@@ -118,6 +118,9 @@
         },
         initModal: function () {
             $('.modal').appendTo($('body'));
+        },
+        toggleModal: function (modalId) {
+            $(modalId).modal('toggle');
         }
     });