diff --git a/page/components/bentogrid/index.css b/page/components/bentogrid/index.css
new file mode 100644
index 0000000..45dd910
--- /dev/null
+++ b/page/components/bentogrid/index.css
@@ -0,0 +1 @@
+.bento-container,.bento-row [class*="bento-col-"]{box-sizing:border-box}.bento-container{margin-left:auto;margin-right:auto;padding-left:10px;padding-right:10px}.bento-row{margin-right:-10px;margin-left:-10px}.bento-row [class*="bento-col-"]{float:left;min-height:1px;padding-right:10px;padding-left:10px}.bento-row [class*="-push-"],.bento-row [class*="-pull-"]{position:relative}.bento-col-mb-1{width:8.33333%}.bento-col-mb-2{width:16.66667%}.bento-col-mb-3{width:25%}.bento-col-mb-4{width:33.33333%}.bento-col-mb-5{width:41.66667%}.bento-col-mb-6{width:50%}.bento-col-mb-7{width:58.33333%}.bento-col-mb-8{width:66.66667%}.bento-col-mb-9{width:75%}.bento-col-mb-10{width:83.33333%}.bento-col-mb-11{width:91.66667%}.bento-col-mb-12{width:100%}@media (min-width: 768px){.bento-container{max-width:728px}.bento-col-tb-1{width:8.33333%}.bento-col-tb-2{width:16.66667%}.bento-col-tb-3{width:25%}.bento-col-tb-4{width:33.33333%}.bento-col-tb-5{width:41.66667%}.bento-col-tb-6{width:50%}.bento-col-tb-7{width:58.33333%}.bento-col-tb-8{width:66.66667%}.bento-col-tb-9{width:75%}.bento-col-tb-10{width:83.33333%}.bento-col-tb-11{width:91.66667%}.bento-col-tb-12{width:100%}.bento-col-tb-offset-0{margin-left:0}.bento-col-tb-offset-1{margin-left:8.33333%}.bento-col-tb-offset-2{margin-left:16.66667%}.bento-col-tb-offset-3{margin-left:25%}.bento-col-tb-offset-4{margin-left:33.33333%}.bento-col-tb-offset-5{margin-left:41.66667%}.bento-col-tb-offset-6{margin-left:50%}.bento-col-tb-offset-7{margin-left:58.33333%}.bento-col-tb-offset-8{margin-left:66.66667%}.bento-col-tb-offset-9{margin-left:75%}.bento-col-tb-offset-10{margin-left:83.33333%}.bento-col-tb-offset-11{margin-left:91.66667%}.bento-col-tb-offset-12{margin-left:100%}.bento-col-tb-pull-0{right:0}.bento-col-tb-pull-1{right:8.33333%}.bento-col-tb-pull-2{right:16.66667%}.bento-col-tb-pull-3{right:25%}.bento-col-tb-pull-4{right:33.33333%}.bento-col-tb-pull-5{right:41.66667%}.bento-col-tb-pull-6{right:50%}.bento-col-tb-pull-7{right:58.33333%}.bento-col-tb-pull-8{right:66.66667%}.bento-col-tb-pull-9{right:75%}.bento-col-tb-pull-10{right:83.33333%}.bento-col-tb-pull-11{right:91.66667%}.bento-col-tb-pull-12{right:100%}.bento-col-tb-push-0{left:0}.bento-col-tb-push-1{left:8.33333%}.bento-col-tb-push-2{left:16.66667%}.bento-col-tb-push-3{left:25%}.bento-col-tb-push-4{left:33.33333%}.bento-col-tb-push-5{left:41.66667%}.bento-col-tb-push-6{left:50%}.bento-col-tb-push-7{left:58.33333%}.bento-col-tb-push-8{left:66.66667%}.bento-col-tb-push-9{left:75%}.bento-col-tb-push-10{left:83.33333%}.bento-col-tb-push-11{left:91.66667%}.bento-col-tb-push-12{left:100%}}@media (min-width: 992px){.bento-container{max-width:952px}.bento-col-1{width:8.33333%}.bento-col-2{width:16.66667%}.bento-col-3{width:25%}.bento-col-4{width:33.33333%}.bento-col-5{width:41.66667%}.bento-col-6{width:50%}.bento-col-7{width:58.33333%}.bento-col-8{width:66.66667%}.bento-col-9{width:75%}.bento-col-10{width:83.33333%}.bento-col-11{width:91.66667%}.bento-col-12{width:100%}.bento-col-offset-0{margin-left:0}.bento-col-offset-1{margin-left:8.33333%}.bento-col-offset-2{margin-left:16.66667%}.bento-col-offset-3{margin-left:25%}.bento-col-offset-4{margin-left:33.33333%}.bento-col-offset-5{margin-left:41.66667%}.bento-col-offset-6{margin-left:50%}.bento-col-offset-7{margin-left:58.33333%}.bento-col-offset-8{margin-left:66.66667%}.bento-col-offset-9{margin-left:75%}.bento-col-offset-10{margin-left:83.33333%}.bento-col-offset-11{margin-left:91.66667%}.bento-col-offset-12{margin-left:100%}.bento-col-pull-0{right:0}.bento-col-pull-1{right:8.33333%}.bento-col-pull-2{right:16.66667%}.bento-col-pull-3{right:25%}.bento-col-pull-4{right:33.33333%}.bento-col-pull-5{right:41.66667%}.bento-col-pull-6{right:50%}.bento-col-pull-7{right:58.33333%}.bento-col-pull-8{right:66.66667%}.bento-col-pull-9{right:75%}.bento-col-pull-10{right:83.33333%}.bento-col-pull-11{right:91.66667%}.bento-col-pull-12{right:100%}.bento-col-push-0{left:0}.bento-col-push-1{left:8.33333%}.bento-col-push-2{left:16.66667%}.bento-col-push-3{left:25%}.bento-col-push-4{left:33.33333%}.bento-col-push-5{left:41.66667%}.bento-col-push-6{left:50%}.bento-col-push-7{left:58.33333%}.bento-col-push-8{left:66.66667%}.bento-col-push-9{left:75%}.bento-col-push-10{left:83.33333%}.bento-col-push-11{left:91.66667%}.bento-col-push-12{left:100%}}@media (min-width: 1200px){.bento-container{max-width:1160px}.bento-col-wd-1{width:8.33333%}.bento-col-wd-2{width:16.66667%}.bento-col-wd-3{width:25%}.bento-col-wd-4{width:33.33333%}.bento-col-wd-5{width:41.66667%}.bento-col-wd-6{width:50%}.bento-col-wd-7{width:58.33333%}.bento-col-wd-8{width:66.66667%}.bento-col-wd-9{width:75%}.bento-col-wd-10{width:83.33333%}.bento-col-wd-11{width:91.66667%}.bento-col-wd-12{width:100%}.bento-col-wd-offset-0{margin-left:0}.bento-col-wd-offset-1{margin-left:8.33333%}.bento-col-wd-offset-2{margin-left:16.66667%}.bento-col-wd-offset-3{margin-left:25%}.bento-col-wd-offset-4{margin-left:33.33333%}.bento-col-wd-offset-5{margin-left:41.66667%}.bento-col-wd-offset-6{margin-left:50%}.bento-col-wd-offset-7{margin-left:58.33333%}.bento-col-wd-offset-8{margin-left:66.66667%}.bento-col-wd-offset-9{margin-left:75%}.bento-col-wd-offset-10{margin-left:83.33333%}.bento-col-wd-offset-11{margin-left:91.66667%}.bento-col-wd-offset-12{margin-left:100%}.bento-col-wd-pull-0{right:0}.bento-col-wd-pull-1{right:8.33333%}.bento-col-wd-pull-2{right:16.66667%}.bento-col-wd-pull-3{right:25%}.bento-col-wd-pull-4{right:33.33333%}.bento-col-wd-pull-5{right:41.66667%}.bento-col-wd-pull-6{right:50%}.bento-col-wd-pull-7{right:58.33333%}.bento-col-wd-pull-8{right:66.66667%}.bento-col-wd-pull-9{right:75%}.bento-col-wd-pull-10{right:83.33333%}.bento-col-wd-pull-11{right:91.66667%}.bento-col-wd-pull-12{right:100%}.bento-col-wd-push-0{left:0}.bento-col-wd-push-1{left:8.33333%}.bento-col-wd-push-2{left:16.66667%}.bento-col-wd-push-3{left:25%}.bento-col-wd-push-4{left:33.33333%}.bento-col-wd-push-5{left:41.66667%}.bento-col-wd-push-6{left:50%}.bento-col-wd-push-7{left:58.33333%}.bento-col-wd-push-8{left:66.66667%}.bento-col-wd-push-9{left:75%}.bento-col-wd-push-10{left:83.33333%}.bento-col-wd-push-11{left:91.66667%}.bento-col-wd-push-12{left:100%}}@media (max-width: 575px){.bento-kit-hidden-mb{display:none}}@media (max-width: 767px){.bento-kit-hidden-tb{display:none}}@media (max-width: 991px){.bento-kit-hidden{display:none}}.bento-clearfix,.bento-row{zoom:1}.bento-clearfix::before,.bento-row::before,.bento-clearfix::after,.bento-row::after{content:" ";display:table}.bento-clearfix::after,.bento-row::after{clear:both}
diff --git a/page/console.css b/page/console.css
new file mode 100644
index 0000000..cd1666f
--- /dev/null
+++ b/page/console.css
@@ -0,0 +1,6 @@
+.typecho-access-console-title {
+  margin: 25px 0 10px;
+  font-size: 1.28571em;
+  font-weight: bold;
+  line-height: 1.5;
+}
diff --git a/page/console.php b/page/console.php
index 1f7cc7c..7b9ac09 100644
--- a/page/console.php
+++ b/page/console.php
@@ -5,25 +5,27 @@ include 'menu.php';
 require_once __DIR__ . '/../Access_Bootstrap.php';
 $access = new Access_Core();
 ?>
+<link rel="stylesheet" href="<?php $options->pluginUrl('Access/page/components/bentogrid/index.css')?>">
+<link rel="stylesheet" href="<?php $options->pluginUrl('Access/page/console.css')?>">
 <div class="main">
-    <div class="body container">
-        <div class="typecho-page-title">
-            <h2><?= $access->title;?></h2>
-        </div>
-        <div class="row typecho-page-main" role="main">
-            <div class="col-mb-12">
-                <ul class="typecho-option-tabs fix-tabs clearfix">
-                    <li<?=($access->action == 'overview' ? ' class="current"' : '')?>><a href="<?php $options->adminUrl('extending.php?panel=' . Access_Plugin::$panel . '&action=overview'); ?>"><?php _e('访问概览'); ?></a></li>
-                    <li<?=($access->action == 'logs' ? ' class="current"' : '')?>><a href="<?php $options->adminUrl('extending.php?panel=' . Access_Plugin::$panel . '&action=logs'); ?>"><?php _e('访问日志'); ?></a></li>
-                    <?php if ($access->hasMigration): ?>
-                    <li<?=($access->action == 'migration' ? ' class="current"' : '')?>><a href="<?php $options->adminUrl('extending.php?panel=' . Access_Plugin::$panel . '&action=migration'); ?>"><?php _e('数据迁移'); ?></a></li>
-                    <?php endif ?>
-                    <li><a href="<?php $options->adminUrl('options-plugin.php?config=Access') ?>"><?php _e('插件设置'); ?></a></li>
-                </ul>
-            </div>
-            <?php include("routes/{$access->action}/index.php") ?>
-        </div>
+  <div class="body container">
+    <div>
+      <h2 class="typecho-access-console-title"><?= $access->title;?></h2>
     </div>
+    <div class="bento-row" role="main">
+      <div class="bento-col-mb-12">
+        <ul class="typecho-option-tabs fix-tabs clearfix">
+          <li<?=($access->action == 'overview' ? ' class="current"' : '')?>><a href="<?php $options->adminUrl('extending.php?panel=' . Access_Plugin::$panel . '&action=overview'); ?>"><?php _e('访问概览'); ?></a></li>
+          <li<?=($access->action == 'logs' ? ' class="current"' : '')?>><a href="<?php $options->adminUrl('extending.php?panel=' . Access_Plugin::$panel . '&action=logs'); ?>"><?php _e('访问日志'); ?></a></li>
+          <?php if ($access->hasMigration): ?>
+          <li<?=($access->action == 'migration' ? ' class="current"' : '')?>><a href="<?php $options->adminUrl('extending.php?panel=' . Access_Plugin::$panel . '&action=migration'); ?>"><?php _e('数据迁移'); ?></a></li>
+          <?php endif ?>
+          <li><a href="<?php $options->adminUrl('options-plugin.php?config=Access') ?>"><?php _e('插件设置'); ?></a></li>
+        </ul>
+      </div>
+      <?php include("routes/{$access->action}/index.php") ?>
+    </div>
+  </div>
 </div>
 
 <?php
diff --git a/page/routes/overview/index.css b/page/routes/overview/index.css
new file mode 100644
index 0000000..7943b45
--- /dev/null
+++ b/page/routes/overview/index.css
@@ -0,0 +1,35 @@
+.typecho-access-overview-table-title {
+  margin: 20px 0;
+  opacity: .7;
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 600;
+}
+
+.typecho-access-overview-table-wrap {
+  padding: 20px 30px;
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.typecho-access-overview-list-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  line-height: 1.5;
+}
+
+.typecho-access-overview-list-table th {
+  padding: 10px;
+  border-bottom: 2px solid #f0f0ec;
+  text-align: left;
+  background-color: #ffffff;
+}
+
+.typecho-access-overview-list-table td {
+  padding: 10px;
+  border-top: 1px solid #efefeb;
+  word-break: break-all;
+  background-color: #ffffff;
+}
diff --git a/page/routes/overview/index.php b/page/routes/overview/index.php
index a9220b2..be036d5 100644
--- a/page/routes/overview/index.php
+++ b/page/routes/overview/index.php
@@ -1,7 +1,13 @@
-<div class="col-mb-12 typecho-list">
-  <h4 class="typecho-list-table-title">访问数表格</h4>
-  <div class="typecho-table-wrap" id="tbl-count">
-    <table class="typecho-list-table">
+
+<script src="<?php $options->pluginUrl('Access/page/highcharts/js/highcharts.js')?>"></script>
+<script src="<?php $options->pluginUrl('Access/page/highcharts/js/modules/exporting.js')?>"></script>
+<script src="<?php $options->pluginUrl('Access/page/highcharts/js/modules/accessibility.js')?>"></script>
+<link rel="stylesheet" href="<?php $options->pluginUrl('Access/page/routes/overview/index.css')?>">
+<script type="text/javascript" defer src="<?php $options->pluginUrl('Access/page/routes/overview/index.js')?>"></script>
+<div class="typecho-access-overview-main bento-col-mb-12">
+  <h4 class="typecho-access-overview-table-title">访问数表格</h4>
+  <div class="typecho-access-overview-table-wrap" id="tbl-count">
+    <table class="typecho-access-overview-list-table">
       <colgroup>
         <col width="10%"/>
         <col width="30%"/>
@@ -39,11 +45,11 @@
     </table>
   </div>
 
-  <div class="col-mb-12 col-4">
-    <h4 class="typecho-list-table-title">来源域名</h4>
+  <div class="bento-col-mb-12 bento-col-4 typecho-access-overview-block">
+    <h4 class="typecho-access-overview-table-title">来源域名</h4>
 
-    <div class="typecho-table-wrap">
-      <table class="typecho-list-table" id="tbl-referer-domain">
+    <div class="typecho-access-overview-table-wrap">
+      <table class="typecho-access-overview-list-table" id="tbl-referer-domain">
         <colgroup>
           <col width="15%"/>
           <col width="15%"/>
@@ -67,11 +73,11 @@
     </div>
   </div>
 
-  <div class="col-mb-12 col-8">
-    <h4 class="typecho-list-table-title">来源页</h4>
+  <div class="bento-col-mb-12 bento-col-8 typecho-access-overview-block">
+    <h4 class="typecho-access-overview-table-title">来源页</h4>
 
-    <div class="typecho-table-wrap">
-      <table class="typecho-list-table" id="tbl-referer-url">
+    <div class="typecho-access-overview-table-wrap">
+      <table class="typecho-access-overview-list-table" id="tbl-referer-url">
         <colgroup>
           <col width="15%"/>
           <col width="15%"/>
@@ -95,39 +101,34 @@
     </div>
   </div>
 
-  <div class="col-mb-12">
-    <h4 class="typecho-list-table-title">文章浏览分析</h4>
-    <div class="typecho-table-wrap" id="pie-article">loading...</div>
+  <div class="bento-col-mb-12">
+    <h4 class="typecho-access-overview-table-title">文章浏览分析</h4>
+    <div class="typecho-access-overview-table-wrap" id="pie-article">loading...</div>
   </div>
 
-  <div class="col-mb-12">
-    <h4 class="typecho-list-table-title">访客地域分析</h4>
-    <div class="typecho-table-wrap">
+  <div class="bento-col-mb-12">
+    <h4 class="typecho-access-overview-table-title">访客地域分析</h4>
+    <div class="typecho-access-overview-table-wrap">
       <ul class="typecho-option-tabs clearfix">
         <li><button id="btn-china" class="btn btn-s primary">国内</button></li>
         <li><button id="btn-inter" class="btn btn-s">国际</button><li>
       </ul>
-      <div class="typecho-table-wrap" id="bar-location">loading...</div>
+      <div class="typecho-access-overview-table-wrap" id="bar-location">loading...</div>
     </div>
   </div>
 
-  <div class="col-mb-12">
-    <h4 class="typecho-list-table-title">今日图表</h4>
-    <div class="typecho-table-wrap" id="chart-today"></div>
+  <div class="bento-col-mb-12">
+    <h4 class="typecho-access-overview-table-title">今日图表</h4>
+    <div class="typecho-access-overview-table-wrap" id="chart-today"></div>
   </div>
 
-  <div class="col-mb-12">
-    <h4 class="typecho-list-table-title">昨日图表</h4>
-    <div class="typecho-table-wrap" id="chart-yesterday"></div>
+  <div class="bento-col-mb-12">
+    <h4 class="typecho-access-overview-table-title">昨日图表</h4>
+    <div class="typecho-access-overview-table-wrap" id="chart-yesterday"></div>
   </div>
 
-  <div class="col-mb-12">
-    <h4 class="typecho-list-table-title">当月图表</h4>
-    <div class="typecho-table-wrap" id="chart-month"></div>
+  <div class="bento-col-mb-12">
+    <h4 class="typecho-access-overview-table-title">当月图表</h4>
+    <div class="typecho-access-overview-table-wrap" id="chart-month"></div>
   </div>
 </div>
-
-<script src="<?php $options->pluginUrl('Access/page/highcharts/js/highcharts.js')?>"></script>
-<script src="<?php $options->pluginUrl('Access/page/highcharts/js/modules/exporting.js')?>"></script>
-<script src="<?php $options->pluginUrl('Access/page/highcharts/js/modules/accessibility.js')?>"></script>
-<script type="text/javascript" defer src="<?php $options->pluginUrl('Access/page/routes/overview/index.js')?>"></script>