diff --git a/app/assets/stylesheets/application.bootstrap.scss b/app/assets/stylesheets/application.bootstrap.scss
deleted file mode 100644
index f8a06ff..0000000
--- a/app/assets/stylesheets/application.bootstrap.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'bootstrap/dist/css/bootstrap';
-@import 'bootstrap-icons/font/bootstrap-icons';
-//@import './custom';
\ No newline at end of file
diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
deleted file mode 100644
index c470d2f..0000000
--- a/app/assets/stylesheets/custom.scss
+++ /dev/null
@@ -1,201 +0,0 @@
-
-
-/* color */
-$light-gray: #777;
-$gray-lighter: #D3D3D3;
-
-/* universal */
-body {
-  padding-top: 60px;
-}
-section {
-  overflow: auto;
-}
-textarea {
-  resize: vertical;
-}
-.center {
-  text-align: center;
-  h1 {
-    margin-bottom: 10px;
-  }
-}
-
-/* typography */
-h1, h2, h3, h4, h5, h6 {
-  line-height: 1;
-}
-
-h1 {
-  font-size: 3em;
-  letter-spacing: -2px;
-  margin-bottom: 30px;
-  text-align: center;
-}
-
-h2 {
-  font-size: 1.2em;
-  letter-spacing: -1px;
-  margin-bottom: 30px;
-  text-align: center;
-  font-weight: normal;
-  color: $light-gray;
-}
-
-p {
-  font-size: 1.1em;
-  line-height: 1.7em;
-}
-
-/* header */
-#logo {
-  float: left;
-  margin-right: 10px;
-  font-size: 1.7em;
-  color: #fff;
-  text-transform: uppercase;
-  letter-spacing: -1px;
-  padding-top: 9px;
-  font-weight: bold;
-  &:hover {
-    color: $light-gray;
-    text-decoration: none;
-  }
-}
-
-//img {
-//  display: none;
-//}
-
-/* footer */
-footer {
-  margin-top: 45px;
-  padding-top: 5px;
-  border-top: 1px solid #eaeaea;
-  color: $light-gray;
-  a {
-    color: #555;
-    &hover {
-      color: #222;
-    }
-  }
-  small {
-    float: left;
-  }
-  ul {
-    float: right;
-    list-style: none;
-    li {
-      float: left;
-      margin-left: 15px;
-    }
-  }
-}
-
-/* mixins, variables, etc. */
-$gray-medium-light: #eaeaea;
-
-@mixin box_sizing {
-  -moz-box-sizing:    border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing:         border-box;
-}
-
-/* miscellaneous */
-.debug_dump {
-  clear: both;
-  float: left;
-  width: 100%;
-  margin-top: 45px;
-  @include box-sizing;
-}
-
-/* sidebar */
-aside {
-  section.user_info {
-    margin-top: 20px;
-  }
-  section {
-    padding: 10px 0;
-    margin-top: 20px;
-    &:first-child {
-      border: 0;
-      padding-top: 0;
-    }
-    span{
-      display: block;
-      margin-bottom: 3px;
-      line-height: 1;
-    }
-    h1 {
-      font-size: 1.4em;
-      text-align: left;
-      letter-spacing: -1px;
-      margin-bottom: 3px;
-      margin-top: 0;
-    }
-  }
-}
-
-.gravatar {
-  float: left;
-  margin-right: 10px;
-}
-
-.gravatar_edit {
-  margin-top: 15px;
-}
-
-/* forms */
-input, textarea, select, .uneditable-input {
-  border: 1px solid #bbb;
-  width: 100%;
-  margin-bottom: 15px;
-  @include box_sizing;
-}
-
-input {
-  height: auto !important;
-}
-
-/* forms */
-
-#error_explanation {
-  color: red;
-  ul {
-    color: red;
-    margin: 0 0 30px 0;
-  }
-}
-
-.field_with_errors {
-  //@extend .has-error;
-  .form-control {
-    //color: $state-danger-text;
-  }
-}
-
-.checkbox {
-  margin-top: -10px;
-  margin-bottom: 10px;
-  span {
-    margin-left: 20px;
-    font-weight: normal;
-  }
-}
-
-#session_remember_me {
-  width: auto;
-  margin-left: 0;
-}
-
-/* Users index */
-.users {
-  list-style: none;
-  margin: 0;
-  li {
-    overflow: auto;
-    padding: 10px 0;
-    border-bottom: 1px solid $gray-lighter;
-  }
-}
diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb
index 2c5985b..e87f2ea 100644
--- a/app/views/kaminari/_first_page.html.erb
+++ b/app/views/kaminari/_first_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<button class="join-item btn">
   <%= link_to_unless current_page.first?, raw(t 'views.pagination.first'), url, remote: remote %>
-</li>
+</button>
diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb
index 6d3a149..046d83c 100644
--- a/app/views/kaminari/_gap.html.erb
+++ b/app/views/kaminari/_gap.html.erb
@@ -1,3 +1,3 @@
-<li class='disabled'>
+<button class="join-item btn btn-disabled">
   <%= content_tag :a, raw(t 'views.pagination.truncate') %>
-</li>
+</button>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
index aee2524..75c8d9e 100644
--- a/app/views/kaminari/_last_page.html.erb
+++ b/app/views/kaminari/_last_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<button class="join-item btn">
   <%= link_to_unless current_page.last?, raw(t 'views.pagination.last'), url, { remote: remote } %>
-</li>
+</button>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
index 8e9a10e..f0a63b2 100644
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<button class="join-item btn">
   <%= link_to_unless current_page.last?, raw(t 'views.pagination.next'), url, rel: 'next', remote: remote %>
-</li>
+</button>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
index 47ea75d..dcd17fa 100644
--- a/app/views/kaminari/_page.html.erb
+++ b/app/views/kaminari/_page.html.erb
@@ -1,9 +1,9 @@
 <% if page.current? %>
-  <li class='active'>
+  <button class='join-item btn btn-active'>
     <%= content_tag :a, page, data: { remote: remote }, rel: page.rel %>
-  </li>
+  </button>
 <% else %>
-  <li>
+  <button class="join-item btn">
     <%= link_to page, url, remote: remote, rel: page.rel %>
-  </li>
+  </button>
 <% end %>
diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
index 2c8757b..6d38687 100644
--- a/app/views/kaminari/_paginator.html.erb
+++ b/app/views/kaminari/_paginator.html.erb
@@ -1,5 +1,5 @@
 <%= paginator.render do -%>
-  <ul class="pagination">
+  <div class="join">
     <%= first_page_tag unless current_page.first? %>
     <%= prev_page_tag unless current_page.first? %>
     <% each_page do |page| -%>
@@ -11,5 +11,5 @@
     <% end -%>
     <%= next_page_tag unless current_page.last? %>
     <%= last_page_tag unless current_page.last? %>
-  </ul>
+  </div>
 <% end -%>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
index f16f6b4..b279195 100644
--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<button class="join-item btn">
   <%= link_to_unless current_page.first?, raw(t 'views.pagination.previous'), url, rel: 'prev', remote: remote %>
-</li>
+</button>
diff --git a/app/views/users/index.html.erb b/app/views/users/index.html.erb
index 53d7014..96c82d9 100644
--- a/app/views/users/index.html.erb
+++ b/app/views/users/index.html.erb
@@ -3,13 +3,16 @@
 <div class="container mx-auto px-4 py-8">
   <h1 class="text-3xl font-bold text-center mb-8">All Users</h1>
 
-  <!-- 分页 -->
-  <div class="flex justify-center mb-6">
-    <%= paginate @users %>
-  </div>
-
   <!-- 用户列表 -->
   <div class="grid gap-4 max-w-3xl mx-auto">
     <%= render @users %>
   </div>
+
+  <!-- 分页 -->
+  <div class="flex justify-center mb-6 mt-6">
+    <div class="join">
+      <%= paginate @users %>
+    </div>
+  </div>
+
 </div>
\ No newline at end of file