diff --git a/app/javascript/stylesheets/application.scss b/app/javascript/stylesheets/application.scss
index add2ff0..21f86c8 100644
--- a/app/javascript/stylesheets/application.scss
+++ b/app/javascript/stylesheets/application.scss
@@ -16,4 +16,28 @@
   .nav-tab {
     @apply text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium;
   }
+
+  .paginate-page {
+    @apply relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50;
+  }
+  
+  .paginate-prev-page,
+  .paginate-next-page,
+  .paginate-first-page,
+  .paginate-last-page, {
+    @apply px-2
+  }
+  .paginate-page--current {
+    @apply bg-gray-100;
+  }
+  .paginate-first-page {
+    @apply rounded-l-md;
+  }
+  .paginate-last-page {
+    @apply rounded-r-md;
+  }
+  .paginate-page-single {
+    @apply rounded-md text-gray-700 hover:text-gray-500;
+  }
+
 }
diff --git a/app/views/emails/_list.html.erb b/app/views/emails/_list.html.erb
index 6f06d5f..bf97d97 100644
--- a/app/views/emails/_list.html.erb
+++ b/app/views/emails/_list.html.erb
@@ -17,8 +17,8 @@
 
 <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
   <div class="flex-1 flex justify-between sm:hidden">
-    <%= link_to_previous_page @emails, 'Previous page', class: "ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500" %>
-    <%= link_to_next_page @emails, 'Next Page', class: "relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:text-gray-500" %>
+    <%= link_to_previous_page @emails, 'Previous page', class: "ml-3 paginate-page paginate-page-single" %>
+    <%= link_to_next_page @emails, 'Next Page', class: "paginate-page paginate-page-single" %>
   </div>
   <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
     <div>
diff --git a/app/views/kaminari/_first_page.html.erb b/app/views/kaminari/_first_page.html.erb
index 8e321b9..7165f7f 100644
--- a/app/views/kaminari/_first_page.html.erb
+++ b/app/views/kaminari/_first_page.html.erb
@@ -6,7 +6,7 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<%= link_to (current_page.first? ? '#' : url), rel: 'first', remote: remote, class: "relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
+<%= link_to (current_page.first? ? '#' : url), rel: 'first', remote: remote, class: "paginate-page paginate-first-page" do %>
   <span class="sr-only"><%= t('views.pagination.first').html_safe %></span>
   <!-- Heroicon name: solid/chevron-double-left -->
   <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb
index e0a86a8..658dad4 100644
--- a/app/views/kaminari/_gap.html.erb
+++ b/app/views/kaminari/_gap.html.erb
@@ -6,6 +6,6 @@
     remote:        data-remote
 -%>
 
-<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
+<span class="paginate-page">
   <%= t('views.pagination.truncate').html_safe %>
 </span>
diff --git a/app/views/kaminari/_last_page.html.erb b/app/views/kaminari/_last_page.html.erb
index b58a5c0..b1d19c8 100644
--- a/app/views/kaminari/_last_page.html.erb
+++ b/app/views/kaminari/_last_page.html.erb
@@ -6,7 +6,7 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<%= link_to (current_page.last? ? '#' : url), rel: 'last', remote: remote, class: "relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
+<%= link_to (current_page.last? ? '#' : url), rel: 'last', remote: remote, class: "paginate-page paginate-last-page" do %>
   <span class="sr-only"><%= t('views.pagination.last').html_safe %></span>
   <!-- Heroicon name: solid/chevron-double-right -->
   <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
index 857dcc3..8459c69 100644
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@@ -6,7 +6,7 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<%= link_to (current_page.last? ? '#' : url), rel: 'next', remote: remote, class: "relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
+<%= link_to (current_page.last? ? '#' : url), rel: 'next', remote: remote, class: "paginate-page paginate-next-page" do %>
   <span class="sr-only"><%= t('views.pagination.next').html_safe %></span>
   <!-- Heroicon name: solid/chevron-right -->
   <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
index 99a9903..df5abb6 100644
--- a/app/views/kaminari/_page.html.erb
+++ b/app/views/kaminari/_page.html.erb
@@ -7,4 +7,4 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<%= link_to page, url, { remote: false, rel: page.rel, class: "inline-flex relative items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 #{"bg-gray-100" if page.current?}"} %>
+<%= link_to page, url, { remote: false, rel: page.rel, class: "paginate-page #{"paginate-page--current" if page.current?}"} %>
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
index 861c3c8..f7e245d 100644
--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -6,7 +6,7 @@
     per_page:      number of items to fetch per page
     remote:        data-remote
 -%>
-<%= link_to (current_page.first? ? '#' : url), rel: 'prev', remote: remote, class: "relative inline-flex items-center px-2 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50" do %>
+<%= link_to (current_page.first? ? '#' : url), rel: 'prev', remote: remote, class: "paginate-page paginate-prev-page" do %>
   <span class="sr-only"><%= t('views.pagination.previous').html_safe %></span>
   <!-- Heroicon name: solid/chevron-left -->
   <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">