diff --git a/page/routes/logs/index.css b/page/routes/logs/index.css
index f7d76a4..be5696b 100644
--- a/page/routes/logs/index.css
+++ b/page/routes/logs/index.css
@@ -2,16 +2,71 @@ a[data-action="search-anchor"] {
   cursor: pointer;
 }
 
+.typecho-access-logs-btn { border: none; background-color: #E9E9E6; cursor: pointer; border-radius: 2px; display: inline-block; padding: 0 12px; height: 32px; color: #666; vertical-align: middle; zoom: 1; }
+.typecho-access-logs-btn:focus { outline:0; }
+.typecho-access-logs-btn:hover { transition-duration: .4s; background-color: #dbdbd6; }
+.typecho-access-logs-btn:active { background-color: #d6d6d0; }
+.typecho-access-logs-btn:disabled { background-color: #f7f7f6; cursor: default; }
+.typecho-access-logs-btn:disabled { color: #999; }
+.typecho-access-logs-btn--xs { padding: 0 10px; height: 25px; font-size: 13px; }
+.typecho-access-logs-btn--s { height: 28px; font-size: 14px; }
+.typecho-access-logs-btn--l { height: 40px; font-size: 1.14286em; font-weight: bold; }
+.typecho-access-logs-btn--primary { border: none; background-color: #467B96; cursor: pointer; border-radius: 2px; color: #FFF; }
+.typecho-access-logs-btn--primary:hover { transition-duration: .4s; background-color: #3c6a81; }
+.typecho-access-logs-btn--primary:active, .typecho-access-logs-btn--primary.typecho-access-logs-btn--active { background-color: #39647a; }
+.typecho-access-logs-btn--primary:disabled { background-color: #508cab; cursor: default; }
+.typecho-access-logs-btn--warn { border: none; background-color: #B94A48; cursor: pointer; border-radius: 2px; color: #FFF; }
+.typecho-access-logs-btn--warn:hover { transition-duration: .4s; background-color: #a4403f; }
+.typecho-access-logs-btn--warn:active, .typecho-access-logs-btn--warn.typecho-access-logs-btn--active { background-color: #9c3e3c; }
+.typecho-access-logs-btn--warn:disabled { background-color: #c1605e; cursor: default; }
+
+.typecho-access-logs-main {
+  margin: 10px 0;
+  padding: 20px 0;
+  color: #000000;
+  background: #ffffff;
+}
+
 .typecho-access-logs-controls {
   display: flex;
   justify-content: space-between;
-  margin: 10px 0;
+  padding: 5px 28px;
+}
+
+.typecho-access-logs-controls__left {
+  display: flex;
+  align-items: center;
+}
+
+.typecho-access-logs-controls__right {
+  display: flex;
+  align-items: center;
+}
+
+.typecho-access-logs-select-all {
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
 }
 
 .typecho-access-logs-search {
   position: relative;
 }
 
+.typecho-access-logs-search > *:not(:last-child) {
+  margin-right: 5px;
+}
+
+.typecho-access-logs-dropdown {
+  display: inline-block;
+  position: relative;
+}
+
+.typecho-access-logs-dropdown-toggle {
+  padding-right: 8px;
+}
+
 .typecho-access-logs-dropdown-btn {
   display: flex;
   align-items: center;
@@ -19,7 +74,7 @@ a[data-action="search-anchor"] {
 
 .typecho-access-logs-dropdown-btn__icon {
   transition: all ease-in-out .3s;
-  display: flex;
+  display: inline-flex;
   justify-content: center;
   align-items: center;
   flex: 0 0 auto;
@@ -31,33 +86,34 @@ a[data-action="search-anchor"] {
   transform: translateY(20%);
 }
 
-.active > .dropdown-toggle + .typecho-access-logs-dropdown-btn__icon {
+.typecho-access-logs-dropdown--active > .typecho-access-logs-dropdown-toggle > .typecho-access-logs-dropdown-btn__icon {
   transform: rotateZ(180deg);
 }
 
-.typecho-access-logs-dropdown {
+.typecho-access-logs-dropdown-content {
+  position: absolute;
   margin-top: 1px;
   min-width: 73px;
   border: none;
   padding: 0 !important;
   display: block;
   opacity: 0;
+  list-style-type: none;
   pointer-events: none;
   transition: opacity ease-out .3s !important;
 }
 
-.typecho-access-logs-dropdown > li {
+.typecho-access-logs-dropdown-content > li {
   background: #e9e9e6;
   position: relative;
 }
 
-.typecho-access-logs-dropdown > li > button {
-  padding: 5px 10px;
+.typecho-access-logs-dropdown-content > li > button {
   border-radius: 0;
   width: 100%;
 }
 
-.active > .dropdown-toggle + .typecho-access-logs-dropdown {
+.typecho-access-logs-dropdown--active > .typecho-access-logs-dropdown-toggle + .typecho-access-logs-dropdown-content {
   opacity: 1;
   pointer-events: all;
 }
@@ -86,6 +142,7 @@ a[data-action="search-anchor"] {
   display: flex;
 }
 
+.typecho-access-logs-filter-item > :first-child,
 .typecho-access-logs-filter-item__label {
   display: block;
   flex: 0 0 auto;
@@ -94,6 +151,7 @@ a[data-action="search-anchor"] {
   align-items: center;
 }
 
+.typecho-access-logs-filter-item > :last-child,
 .typecho-access-logs-filter-item__content {
   flex: 1 1 auto;
 }
@@ -124,6 +182,48 @@ select.typecho-access-logs-filter-item__content {
   margin-left: 10px;
 }
 
+.typecho-access-logs-table-wrap {
+  padding: 20px 30px;
+  background-color: #ffffff;
+  color: #000000;
+}
+
+.typecho-access-logs-list-table-title {
+  margin: 20px 0;
+  opacity: .7;
+  text-align: center;
+  font-size: 14px;
+  line-height: 1.5;
+  font-weight: 600;
+}
+
+.typecho-access-logs-list-table {
+  width: 100%;
+  border-collapse: collapse;
+  table-layout: fixed;
+  line-height: 1.5;
+}
+
+.typecho-access-logs-list-table th {
+  padding: 10px;
+  border-bottom: 2px solid #f0f0ec;
+  text-align: left;
+  background-color: #ffffff;
+}
+
+.typecho-access-logs-list-table td {
+  padding: 10px;
+  border-top: 1px solid #efefeb;
+  word-break: break-all;
+  background-color: #ffffff;
+}
+
+.typecho-access-logs-list-table-select-all {
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+
 .typecho-access-logs-table-placeholder {
   font-size: 18px;
   color: #cccccc;
@@ -131,6 +231,40 @@ select.typecho-access-logs-filter-item__content {
   letter-spacing: 3px;
 }
 
+.typecho-access-logs-list-checkbox {
+  width: 15px;
+  height: 15px;
+  cursor: pointer;
+}
+
+.typecho-access-logs-pagination {
+  list-style: none;
+  float: right;
+  margin: 0;
+  padding: 0;
+  line-height: 1;
+  text-align: center;
+  zoom: 1;
+}
+
+.typecho-access-logs-pagination li {
+  display: inline-block;
+  margin: 0 3px;
+  height: 28px;
+  line-height: 28px;
+}
+
+.typecho-access-logs-pagination li.current a {
+  background: #E9E9E6;
+  color: #444;
+}
+
+.typecho-access-logs-pagination a {
+  display: block;
+  padding: 0 10px;
+  border-radius: 2px;
+}
+
 .typecho-access-logs-pagination-jump {
   float: right;
   display: flex;
diff --git a/page/routes/logs/index.js b/page/routes/logs/index.js
index e413981..0e2d8ff 100644
--- a/page/routes/logs/index.js
+++ b/page/routes/logs/index.js
@@ -40,7 +40,7 @@ $(document).ready(function () {
   function fetchLogs(silent) {
     var startTime = new Date().valueOf();
     if (!silent) {
-      $('.typecho-list')
+      $('.typecho-access-logs-main')
         .loadingModal({ text: '正在获取数据...', backgroundColor: '#292d33' })
         .loadingModal(
           'animation',
@@ -70,31 +70,32 @@ $(document).ready(function () {
           var minDuring = 300;
           var during = new Date().valueOf() - startTime;
           if (during < minDuring) {
-            setTimeout(function() { $('.typecho-list').loadingModal('hide'); }, minDuring - during);
+            setTimeout(function() { $('.typecho-access-logs-main').loadingModal('hide'); }, minDuring - during);
           } else {
-            $('.typecho-list').loadingModal('hide');
+            $('.typecho-access-logs-main').loadingModal('hide');
           }
         }
         if (res.code === 0) {
           // logs list
           var $tbody, $tr, $td;
-          $tbody = $('.typecho-list-table tbody');
+          $tbody = $('.typecho-access-logs-list-table tbody');
           $tbody.html('');
           $.each(res.data.logs, function(index, item) {
             $tr = $('<tr />', { id: item.id, 'data-id': item.id });
             // id
-            $td = $('<td />');
+            $td = $('<td />', { style: 'text-align: center' });
             $td.append($('<input />', {
               type: 'checkbox',
               value: item.id,
               name: 'id[]',
-              class: 'form-check-input',
+              class: 'typecho-access-logs-list-checkbox form-check-input',
               'data-id': item.id,
             }));
             $tr.append($td);
             // url
             $td = $('<td />');
             $td.append($('<a />', {
+              class: '',
               'data-action': 'search-anchor',
               'data-filter': JSON.stringify({ path: item.path }),
             }).text(item.url.replace(/%23/u, '#')));
@@ -103,6 +104,7 @@ $(document).ready(function () {
             $td = $('<td />');
             $td.append($('<a />', {
               title: item.ua,
+              class: '',
               'data-action': 'search-anchor',
               'data-filter': JSON.stringify({ ua: item.ua }),
             }).text(item.display_name));
@@ -110,6 +112,7 @@ $(document).ready(function () {
             // ip
             $td = $('<td />');
             $td.append($('<a />', {
+              class: '',
               'data-action': 'search-anchor',
               'data-filter': JSON.stringify({ ip: item.ip }),
             }).text(item.ip));
@@ -121,6 +124,7 @@ $(document).ready(function () {
             // referer
             $td = $('<td />');
             $td.append($('<a />', {
+              class: '',
               'data-action': 'search-anchor',
               'data-filter': JSON.stringify({ referer: item.referer }),
             }).text(item.referer));
@@ -133,14 +137,16 @@ $(document).ready(function () {
             $tbody.append($tr);
           });
           if ($tbody.html() === '') {
-            $tbody.html('<tr><td colspan="7"><h6 class="typecho-list-table-title typecho-access-logs-table-placeholder">暂无数据</h6></td></tr>');
+            $tbody.html('<tr><td colspan="7"><h6 class="typecho-access-logs-list-table-title typecho-access-logs-table-placeholder">暂无数据</h6></td></tr>');
           }
+          $('.typecho-access-logs-list-checkbox').change(updateSelectAll);
           $('a[data-action="search-anchor"]').click(onSearchAnchorClick);
+          updateSelectAll();
 
           // logs pagination
           setPageNum(res.data.pagination.current);
           var $pagination;
-          $pagination = $('.typecho-pager');
+          $pagination = $('.typecho-access-logs-pagination');
           $pagination.html('');
 
           var startPage, stopPage;
@@ -199,7 +205,7 @@ $(document).ready(function () {
       },
       error: function (xhr, status, error) {
         if (!silent) {
-          $('.typecho-list').loadingModal('hide');
+          $('.typecho-access-logs-main').loadingModal('hide');
         }
         swal({
           icon: "error",
@@ -210,6 +216,17 @@ $(document).ready(function () {
     });
   }
 
+  function updateSelectAll() {
+    var checked = true;
+    $('.typecho-access-logs-list-checkbox').each(function(_, el) {
+      checked = checked && $(el).prop('checked');
+    });
+    if ($('.typecho-access-logs-list-table-select-all').prop('checked') == checked) {
+      return;
+    }
+    $('.typecho-access-logs-list-table-select-all').prop('checked', checked);
+  }
+
   function onSearchAnchorClick(e) {
     setPageNum(1);
     setFilters(JSON.parse(e.target.getAttribute('data-filter')));
@@ -273,6 +290,12 @@ $(document).ready(function () {
     setFilters(filters);
   });
 
+  $('.typecho-access-logs-list-table-select-all').click(function() {
+    $(this).parent().parent().parent().parent().parent()
+      .find('input[name="id[]"]')
+      .prop('checked', $(this).prop('checked'));
+  });
+
   $('input[name="page-jump"]').on('keypress', function(e) {
     if (e.which == 13) {
       setPageNum(e.target.value);
@@ -326,7 +349,7 @@ $(document).ready(function () {
               });
               if (filters.ids) {
                 $.each(JSON.parse(filters.ids), function (index, elem) {
-                  $('.typecho-list-table tbody tr[data-id="' + elem + '"]')
+                  $('.typecho-access-logs-list-table tbody tr[data-id="' + elem + '"]')
                     .fadeOut(500)
                     .remove();
                 });
@@ -356,13 +379,16 @@ $(document).ready(function () {
     action(false);
   }
 
-  $('.typecho-access-logs-dropdown-btn').click(function() {
-    $(this).next().css({ display: '', 'min-width': $(this).parent().width() + 'px' });
+  $('.typecho-access-logs-dropdown-toggle').click(function() {
+    $(this).parent().toggleClass('typecho-access-logs-dropdown--active');
+    $(this).next().css({ 'min-width': $(this).parent().width() + 'px' });
   })
 
   $('[data-action="select-delete"]').click(function () {
+    $('.typecho-access-logs-dropdown')
+      .removeClass('typecho-access-logs-dropdown--active');
     var ids = [];
-    $('.typecho-list-table input[type="checkbox"]').each(function (index, elem) {
+    $('.typecho-access-logs-list-checkbox').each(function (index, elem) {
       if (elem.checked) {
         ids.push($(elem).data("id"));
       }
diff --git a/page/routes/logs/index.php b/page/routes/logs/index.php
index 434214b..935dc9b 100644
--- a/page/routes/logs/index.php
+++ b/page/routes/logs/index.php
@@ -6,24 +6,23 @@
 <link rel="stylesheet" href="<?php $options->pluginUrl('Access/page/routes/logs/index.css')?>">
 <script defer src="<?php $options->pluginUrl('Access/page/routes/logs/index.js')?>"></script>
 
-<div class="col-mb-12 typecho-list">
+<div class="bento-col-mb-12 typecho-access-logs-main">
   <div class="typecho-access-logs-controls">
-    <div class="operate">
-      <label><i class="sr-only"><?php _e('全选'); ?></i><input type="checkbox" class="typecho-table-select-all" /></label>
-      <div class="btn-group btn-drop">
-        <button class="btn dropdown-toggle btn-s typecho-access-logs-dropdown-btn" type="button">
+    <div class="typecho-access-logs-controls__left">
+      <div class="typecho-access-logs-dropdown">
+        <button class="typecho-access-logs-btn typecho-access-logs-btn-s typecho-access-logs-dropdown-toggle" type="button">
           <span><?php _e('选中项'); ?></span>
           <div class="typecho-access-logs-dropdown-btn__icon"><i class="i-caret-down"></i></div>
         </button>
-        <ul class="dropdown-menu typecho-access-logs-dropdown">
-          <li><button class="btn-warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
+        <ul class="typecho-access-logs-dropdown-content">
+          <li><button class="typecho-access-logs-btn typecho-access-logs-btn--s typecho-access-logs-btn--warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
         </ul>
       </div>
     </div>
 
-    <div class="search typecho-access-logs-search" role="search">
-      <button data-action="filter-apply" type="button" class="btn btn-s"><?php _e('刷 新'); ?></button>
-      <button data-action="switch-filter" type="button" class="btn btn-s"><?php _e('筛 选'); ?></button>
+    <div class="typecho-access-logs-controls__right typecho-access-logs-search" role="search">
+      <button data-action="filter-apply" type="button" class="typecho-access-logs-btn typecho-access-logs-btn--s"><?php _e('刷 新'); ?></button>
+      <button data-action="switch-filter" type="button" class="typecho-access-logs-btn typecho-access-logs-btn--s"><?php _e('筛 选'); ?></button>
       <div class="typecho-access-logs-filter">
         <div class="typecho-access-logs-filter-item">
           <label class="typecho-access-logs-filter-item__label">匹配方式</label>
@@ -60,19 +59,19 @@
         </div>
         <div class="typecho-access-logs-filter-apply">
           <div>
-            <button class="btn btn-m btn-warn typecho-access-logs-filter-apply__btn" data-action="filter-delete" type="button"><?php _e('批量删除'); ?></button>
+            <button class="typecho-access-logs-btn typecho-access-logs-btn--m typecho-access-logs-btn--warn typecho-access-logs-filter-apply__btn" data-action="filter-delete" type="button"><?php _e('批量删除'); ?></button>
           </div>
           <div>
-            <button class="btn btn-m typecho-access-logs-filter-apply__btn" data-action="filter-reset" type="button"><?php _e('重 置'); ?></button>
-            <button class="btn btn-m primary typecho-access-logs-filter-apply__btn" data-action="filter-apply" type="button"><?php _e('应 用'); ?></button>
+            <button class="typecho-access-logs-btn typecho-access-logs-btn--m typecho-access-logs-filter-apply__btn" data-action="filter-reset" type="button"><?php _e('重 置'); ?></button>
+            <button class="typecho-access-logs-btn typecho-access-logs-btn--m typecho-access-logs-btn--primary typecho-access-logs-filter-apply__btn" data-action="filter-apply" type="button"><?php _e('应 用'); ?></button>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="typecho-table-wrap">
-    <table class="typecho-list-table">
+  <div class="typecho-access-logs-table-wrap">
+    <table class="typecho-access-logs-list-table">
       <colgroup>
         <col width="5%"/>
         <col width="28%"/>
@@ -84,7 +83,12 @@
       </colgroup>
       <thead>
         <tr>
-          <th> </th>
+          <th style="text-align: center">
+            <label class="typecho-access-logs-select-all">
+              <i class="sr-only"><?php _e('全选'); ?></i>
+              <input type="checkbox" class="typecho-access-logs-list-table-select-all form-check-input" />
+            </label>
+          </th>
           <th><?php _e('受访地址'); ?></th>
           <th><?php _e('UA'); ?></th>
           <th><?php _e('IP地址'); ?></th>
@@ -95,36 +99,32 @@
       </thead>
       <tbody>
         <tr>
-          <td colspan="7"><h6 class="typecho-list-table-title">loading</h6></td>
+          <td colspan="7"><h6 class="typecho-access-logs-list-table-title">loading</h6></td>
         </tr>
       </tbody>
     </table>
   </div>
 
   <div class="typecho-access-logs-controls">
-    <div class="operate">
-      <label>
-        <i class="sr-only"><?php _e('全选'); ?></i>
-        <input type="checkbox" class="typecho-table-select-all" />
-      </label>
-      <div class="btn-group btn-drop">
-        <button class="btn dropdown-toggle btn-s typecho-access-logs-dropdown-btn" type="button">
+    <div class="typecho-access-logs-controls__left">
+      <div class="typecho-access-logs-dropdown">
+        <button class="typecho-access-logs-btn typecho-access-logs-btn-s typecho-access-logs-dropdown-toggle" type="button">
           <span><?php _e('选中项'); ?></span>
           <div class="typecho-access-logs-dropdown-btn__icon"><i class="i-caret-down"></i></div>
         </button>
-        <ul class="dropdown-menu typecho-access-logs-dropdown">
-          <li><button class="btn-warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
+        <ul class="typecho-access-logs-dropdown-content">
+          <li><button class="typecho-access-logs-btn typecho-access-logs-btn--s typecho-access-logs-btn--warn" data-action="select-delete"><?php _e('删 除'); ?></button></li>
         </ul>
       </div>
     </div>
 
-    <div>
+    <div class="typecho-access-logs-controls__right">
+      <ul class="typecho-access-logs-pagination"></ul>
       <div class="typecho-access-logs-pagination-jump">
         <input class="text-s typecho-access-logs-pagination-jump__number" type="text" name="page-jump" autocomplete="off" />
         <span class="typecho-access-logs-pagination-jump__text">/</span>
         <span class="typecho-access-logs-pagination-jump__total">loading</span>
       </div>
-      <ul class="typecho-pager"></ul>
     </div>
   </div>
 </div>