diff --git a/assets/scss/components/_pagniator.scss b/assets/scss/components/_pagniator.scss
index b448c46da..c126d9baa 100644
--- a/assets/scss/components/_pagniator.scss
+++ b/assets/scss/components/_pagniator.scss
@@ -1,22 +1,78 @@
 .pagination {
   text-align: center;
-  font-size: bold;
+  font-weight: bold;
   display: flex;
   justify-content: space-between;
-  max-width: 10rem;
+  max-width: 50rem;
   margin: auto;
-  padding: 0;
+  padding-inline-start: 20px;
+  padding-inline-end: 20px;
+  animation: all 0.4s ease-in;
 
   li {
     display: inline;
     text-align: center;
+    // background: #bf112b;
+    background: #bf112b38;
+    border-radius: 30px;
+    font-size: 20px;
+    font-family: monospace;
+    color: black;
+    padding: 1rem;
+
+    &:hover {
+      background: #ff7777 !important;
+    }
   }
 
   a {
     text-decoration: auto;
   }
 
+  a:hover {
+    background: #ff7777 !important;
+  }
+
   .pagination__item--current {
-    color: red;
+    color: white;
+    background-color: #bf112b;
+  }
+
+  .pagination__item {
+    animation: all 0.4s ease-in;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .pagination {
+      font-size: 1rem;
+      padding-inline-start: 20px;
+      padding-inline-end: 20px;
+    }
+
+    .pagination__item {
+      font-size: 1rem;
+      padding: 0.7em;
+    }
+  }
+
+  @media only screen and (max-width: 500px) {
+    .pagination__item {
+      font-size: 1rem;
+      padding: 0.5em;
+    }
+  }
+
+  @media only screen and (max-width: 400px) {
+    .pagination__item {
+      font-size: 1rem;
+      padding: 0.5em;
+    }
+
+    .pagination {
+      font-size: 1rem;
+      color: red;
+      padding-inline-start: 20px !important;
+      padding-inline-end: 20px !important;
+    }
   }
 }
diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html
index cb8b19035..229697f32 100644
--- a/layouts/partials/paginator.html
+++ b/layouts/partials/paginator.html
@@ -18,27 +18,23 @@
     <!-- First page. -->
     <!-- If we aren't on page 1 add a button to go to the first page -->
     {{ if ne $paginator.PageNumber 1 }}
-      <li class="pagination__item pagination__item--first">
-        <a
-          class="pagination__link pagination__link--first"
-          href="{{ $paginator.First.URL }}"
-        >
-          ««
-        </a>
-      </li>
+      <a
+        class="pagination__link pagination__link--first"
+        href="{{ $paginator.First.URL }}"
+      >
+        <li class="pagination__item pagination__item--first">««</li>
+      </a>
     {{ end }}
 
     <!-- Previous page. -->
     <!-- If a previous page exists, add a button to go to the previous page -->
     {{ if $paginator.HasPrev }}
-      <li class="pagination__item pagination__item--previous">
-        <a
-          href="{{ $paginator.Prev.URL }}"
-          class="pagination__link pagination__link--previous"
-        >
-          «
-        </a>
-      </li>
+      <a
+        href="{{ $paginator.Prev.URL }}"
+        class="pagination__link pagination__link--previous"
+      >
+        <li class="pagination__item pagination__item--previous">«</li>
+      </a>
     {{ end }}
 
     <!-- Page numbers. -->
@@ -80,38 +76,34 @@
 
       <!-- Output page numbers. -->
       {{ if eq ($.Scratch.Get "page_number_flag") true }}
-        <li
-          class="pagination__item{{ if eq . $paginator }} pagination__item--current{{ end }}"
-        >
-          <a href="{{ .URL }}" class="pagination__link">
+        <a href="{{ .URL }}" class="pagination__link">
+          <li
+            class="pagination__item{{ if eq . $paginator }} pagination__item--current{{ end }}"
+          >
             {{ .PageNumber }}
-          </a>
-        </li>
+          </li>
+        </a>
       {{ end }}
     {{ end }}
 
     <!-- Next page. -->
     {{ if $paginator.HasNext }}
-      <li class="pagination__item pagination__item--next">
-        <a
-          href="{{ $paginator.Next.URL }}"
-          class="pagination__link pagination__link--next"
-        >
-          »
-        </a>
-      </li>
+      <a
+        href="{{ $paginator.Next.URL }}"
+        class="pagination__link pagination__link--next"
+      >
+        <li class="pagination__item pagination__item--next">»</li>
+      </a>
     {{ end }}
 
     <!-- Last page. -->
     {{ if ne $paginator.PageNumber $paginator.TotalPages }}
-      <li class="pagination__item pagination__item--last">
-        <a
-          class="pagination__link pagination__link--last"
-          href="{{ $paginator.Last.URL }}"
-        >
-          »»
-        </a>
-      </li>
+      <a
+        class="pagination__link pagination__link--last"
+        href="{{ $paginator.Last.URL }}"
+      >
+        <li class="pagination__item pagination__item--last">»»</li>
+      </a>
     {{ end }}
   </ul>
   <!-- .pagination -->