diff --git a/Bootstrap.Admin/Views/Admin/Settings.cshtml b/Bootstrap.Admin/Views/Admin/Settings.cshtml
index 08727a2b..0b3f822b 100644
--- a/Bootstrap.Admin/Views/Admin/Settings.cshtml
+++ b/Bootstrap.Admin/Views/Admin/Settings.cshtml
@@ -16,9 +16,6 @@
     <script src="~/js/longbow.validate.js"></script>
     <script src="~/js/Settings.js"></script>
 }
-@section css {
-    <link href="~/css/tasks.css" rel="stylesheet" />
-}
 <div class="card">
     <div class="card-header">系统名称设置</div>
     <div class="card-body" data-toggle="LgbValidate" data-valid-button="#sysSave">
@@ -62,10 +59,13 @@
     </div>
 </div>
 <div class="card">
-    <div class="card-header">网站缓存<a data-method="clear" href="#" class="clearcache fa fa-times-circle-o" data-admin="@User.IsInRole("Administrators")" title="全部清除" data-toggle="tooltip" data-placement="left"></a><a data-method="refresh" href="#" class="pull-right fa fa-refresh" title="点击刷新" data-toggle="tooltip"></a></div>
-    <div class="card-body">
-        <div class="tasks-widget">
-            <ul id="sortable" class="task-list ui-sortable"></ul>
+    <div class="card-header">
+        <div class="d-flex align-items-center">
+            <span class="flex-fill">网站缓存</span>
+            <a data-method="clear" href="#" class="fa fa-times-circle-o" data-admin="@User.IsInRole("Administrators")" title="全部清除" data-toggle="tooltip" data-placement="left"></a>
+            <a data-method="refresh" href="#" class="fa fa-refresh ml-3" title="点击刷新" data-toggle="tooltip"></a>
         </div>
     </div>
+    <div class="card-body" id="sortable">
+    </div>
 </div>
\ No newline at end of file
diff --git a/Bootstrap.Admin/wwwroot/css/site-responsive.css b/Bootstrap.Admin/wwwroot/css/site-responsive.css
index 82dbcdf8..b726c3f5 100644
--- a/Bootstrap.Admin/wwwroot/css/site-responsive.css
+++ b/Bootstrap.Admin/wwwroot/css/site-responsive.css
@@ -2,6 +2,17 @@
     .notify-row {
         display: inline-block;
     }
+
+    .cache-item :nth-child(2) {
+        flex: 0 0 auto;
+    }
+
+    .cache-item :nth-child(3) {
+        display: block;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
 }
 
 @media (min-width: 736px) {
diff --git a/Bootstrap.Admin/wwwroot/css/site.css b/Bootstrap.Admin/wwwroot/css/site.css
index fbdd49b1..96186881 100644
--- a/Bootstrap.Admin/wwwroot/css/site.css
+++ b/Bootstrap.Admin/wwwroot/css/site.css
@@ -444,3 +444,56 @@ label.dropdown-item:first-child {
 .btn-xs {
     padding: 1px 5px;
 }
+
+.cache-title {
+    font-weight: bold;
+    color: #0077de;
+    background-color: #b5f1b6;
+    padding: 10px 15px;
+    border-radius: 4px 4px 0 0;
+}
+
+.cache-item {
+    display: flex;
+    align-items: center;
+    padding: 4px 4px 10px 4px;
+}
+
+    .cache-item:last-child {
+        margin-bottom: 5px;
+    }
+
+    .cache-item :not(:first-child) {
+        margin-left: 10px;
+        display: flex;
+    }
+
+    .cache-item :nth-child(2) {
+        flex: 1 1 auto;
+    }
+
+        .cache-item :nth-child(2) span:not(.badge) {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            display: inline-block;
+            width: 152px;
+        }
+
+    .cache-item :nth-child(3) {
+        flex: 1 1 auto;
+        display: none;
+    }
+
+    .cache-item .badge {
+        display: inline-block;
+        position: relative;
+        top: -12px;
+        margin-left: 4px;
+        line-height: normal;
+    }
+
+    .cache-item .btn {
+        margin-left: 5px;
+        font-size: 0.75rem;
+    }
diff --git a/Bootstrap.Admin/wwwroot/js/Settings.js b/Bootstrap.Admin/wwwroot/js/Settings.js
index e4241530..420c7a2f 100644
--- a/Bootstrap.Admin/wwwroot/js/Settings.js
+++ b/Bootstrap.Admin/wwwroot/js/Settings.js
@@ -70,49 +70,13 @@
                             swal: false,
                             callback: function (result) {
                                 if ($.isArray(result)) {
-                                    var html = '<li class="{4}"><i class="fa fa-ellipsis-v"></i><div class="task-title"><span class="task-title-sp" data-toggle="tooltip" title="{2}">{2}</span><span class="badge badge-pill badge-success">{0}</span><span class="task-value" title="{3}">{3}</span><div class="pull-right hidden-phone"><span>{7}</span><button class="btn btn-danger btn-xs fa fa-trash-o" title="{1}" data-url="{5}?cacheKey={1}" data-toggle="tooltip" data-self="{6}" data-placement="left"></button></div></div></li>';
+                                    var html = '<div class="cache-item"><i class="fa fa-ellipsis-v"></i><div><span data-toggle="tooltip" title="{2}">{2}</span><span class="badge badge-pill badge-success">{0}</span></div><span title="{3}">{3}</span><div><span>{7}</span><button class="btn btn-danger btn-xs" title="{1}" data-url="{5}?cacheKey={1}" data-toggle="tooltip" data-self="{6}" data-placement="left"><i class="fa fa-trash-o"></i></button></div></div>';
                                     var content = result.sort(function (x, y) {
                                         return x.Key > y.Key ? 1 : -1;
                                     }).map(function (ele) {
-                                        var key = ele.Key.split('-')[0];
-                                        var css = 'list-default';
-                                        switch (key) {
-                                            case "MenuHelper":
-                                                css = 'list-primary';
-                                                break;
-                                            case "UserHelper":
-                                                css = 'list-success';
-                                                break;
-                                            case "RoleHelper":
-                                                css = 'list-danger';
-                                                break;
-                                            case "GroupHelper":
-                                                css = 'list-warning';
-                                                break;
-                                            case "LogHelper":
-                                                css = 'list-info';
-                                                break;
-                                            case "DictHelper":
-                                                css = 'list-inverse';
-                                                break;
-                                            case "ExceptionHelper":
-                                                css = 'list-Exception';
-                                                break;
-                                            case "MessageHelper":
-                                                css = 'list-Message';
-                                                break;
-                                            case "TaskHelper":
-                                                css = 'list-Task';
-                                                break;
-                                            case "NotificationHelper":
-                                                css = 'list-Notification';
-                                                break;
-                                            default:
-                                                break;
-                                        }
-                                        return $.format(html, ele.Interval, ele.Key, ele.Desc, ele.Value, css, $.format(item.Url, ele.Key), item.Self, Math.max(0, ele.Interval - Math.round((new Date() - new Date(ele.CreateTime.replace(/-/g, '/'))) / 1000)));
+                                        return $.format(html, ele.Interval, ele.Key, ele.Desc, ele.Value, '', $.format(item.Url, ele.Key), item.Self, Math.max(0, ele.Interval - Math.round((new Date() - new Date(ele.CreateTime.replace(/-/g, '/'))) / 1000)));
                                     }).join('');
-                                    $sortable.append($.format('<li class="title">{0}</li>', item.Desc));
+                                    $sortable.append($.format('<h6 class="cache-title">{0}</h6>', item.Desc));
                                     $sortable.append(content);
                                     $sortable.find('[data-toggle="tooltip"]').tooltip();
                                 }
@@ -136,7 +100,7 @@
     $('a[data-method]').on('click', function (e) {
         e.preventDefault();
         e.stopPropagation();
-        var $this = $(this);
+        var $this = $(this).tooltip('hide');
         var options = {};
         switch ($this.attr('data-method')) {
             case 'clear':