diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index a2d0ad8..f28cc11 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -13,6 +13,13 @@ and this project adheres to https://semver.org/spec/v2.0.0.html[Semantic Version
 === Changed
 
 * Change the CSS linking with https://gohugo.io/hugo-pipes/introduction/[Hugo Pipes], moving it into the assets folder.
+
+* Improve the pagination partial.
+** It has been modularized and refactored for easier development when extending the theme.
+** The appearance has been revamped to be more intuitive.
+** Replaces with numbers instead of the horrible phrases (which I didn't realize is horrible) so the i18n options for those are also gone.
+** The pagination is also smarter when applying the ellipses, making sure to only skip if the difference between pages is more than one.
+
 * Update the documentation with additional installations with Hugo Module.
 
 
diff --git a/assets/css/main.css b/assets/css/main.css
index dc606ce..3bfac22 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -227,17 +227,40 @@ footer {
 }
 
 .pagination {
-    list-style: none;
     display: flex;
-    justify-content: space-evenly;
-    padding: 0;
-    margin: 1rem;
+    font-size: 1rem;
+    list-style: none;
+    justify-content: center;
+    margin: 1.2rem 0;
+    padding: 0.8rem;
+}
+
+.pagination > * {
+    margin: 0 0.25em;
+    text-decoration: none;
+}
+
+.page-link {
+    background: var(--background-light);
+    color: var(--foreground-light);
+    text-decoration: none;
+    padding: 0.5em;
+}
+
+.page-link:visited {
+    color: var(--foreground-light);
+}
+
+.page-link--active {
+    font-weight: bolder;
+}
+
+.page-link:hover {
+    background: var(--foreground);
+    color: var(--background);
 }
 
 .post {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
     margin-top: 1rem;
 }
 
diff --git a/i18n/en.toml b/i18n/en.toml
index 2bb4c51..eeb4719 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -1,17 +1,3 @@
-# Pagination
-[first_page]
-other = "Newest posts"
-
-[prev_page]
-other = "Newer posts"
-
-[next_page]
-other = "Older posts"
-
-[last_page]
-other = "Oldest posts"
-
-
 # Content
 [published_by]
 other = "Authors"
diff --git a/i18n/tl.toml b/i18n/tl.toml
index 4f35396..1420bb3 100644
--- a/i18n/tl.toml
+++ b/i18n/tl.toml
@@ -1,17 +1,3 @@
-# Pagination
-[first_page]
-other = "Unang pahina"
-
-[prev_page]
-other = "Balik"
-
-[next_page]
-other = "Sunod"
-
-[last_page]
-other = "Huling pahina"
-
-
 # Content
 [published_by]
 other = "Sinulat ni"
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index a96f8fd..4edec64 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -16,21 +16,5 @@ Otherwise, we take the pages of a section. */ -}}
 </article>
 {{ end }}
 
-<div class="pagination">
-    {{- if .Paginator.HasPrev }}
-    {{- if ne .Paginator.First .Paginator.Prev -}}
-        <a rel="first" href="{{ .Paginator.First.URL }}">{{ i18n "first_page" }}</a>
-    {{- end }}
-
-        <a rel="prev" href="{{ .Paginator.Prev.URL }}">{{ i18n "prev_page" }}</a>
-    {{- end }}
-
-    {{- if .Paginator.HasNext -}}
-        <a rel="next" href="{{ .Paginator.Next.URL }}">{{ i18n "next_page" }}</a>
-
-    {{- if ne .Paginator.Last .Paginator.Next -}}
-        <a rel="last" href="{{ .Paginator.Last.URL }}">{{ i18n "last_page" }}</a>
-    {{- end }}
-    {{- end }}
-</div>
+{{ partial "pagination.html" (dict "Paginator" .Paginator "activeNumberOfPages" 2) }}
 {{ end }}
diff --git a/layouts/partials/pagination.html b/layouts/partials/pagination.html
new file mode 100644
index 0000000..6c9a9a7
--- /dev/null
+++ b/layouts/partials/pagination.html
@@ -0,0 +1,65 @@
+{{ $pag := .Paginator }}
+
+{{- /* The minimum pages starting from the first page */ -}}
+{{ $minimumPage := .minimumPage | default 1 }}
+
+{{- /* The number of pages to be shown with the active page. */ -}}
+{{ $activeNumberOfPages := .activeNumberOfPages | default 2 }}
+
+{{- /* Since the active page is also included when adding the in-between pages of the active page, we need to increment it to mitigate against it. */ -}}
+{{ $midpointPages := add $activeNumberOfPages 1 }}
+
+{{ if gt $pag.TotalPages 1 -}}
+<ul class="pagination">
+  {{- $ellipsed := false -}}
+  {{- $shouldEllipse := false -}}
+  {{- range $pag.Pagers -}}
+  {{ $minimumActivePage := sub $pag.PageNumber $activeNumberOfPages }}
+  {{ $maximumActivePage := add $pag.PageNumber $activeNumberOfPages }}
+
+  {{- /* Make all of the given number of pages starting from both ends to be visible */ -}}
+  {{- $showNumber := or (le .PageNumber $minimumPage) (lt (sub .TotalPages .PageNumber) $minimumPage) -}}
+
+  {{- /* Make all of the given number of pages between the active page number visible */ -}}
+  {{- $showNumber := or $showNumber (and (gt .PageNumber (sub $pag.PageNumber $midpointPages)) (lt .PageNumber (add $pag.PageNumber $midpointPages))) -}}
+
+  {{- /*
+    Make all of the page number that is just before/after the minimum page threshold to be visible.
+    This is applied to those situations where there's only one number remaining before the end
+  */ -}}
+  {{ if eq .PageNumber (sub $minimumActivePage 1) }}
+    {{ $showNumber = or $showNumber (eq (sub $minimumActivePage $minimumPage) (add $pag.First.PageNumber 1)) }}
+  {{ else if eq .PageNumber (add $maximumActivePage 1) }}
+    {{ $showNumber = or $showNumber (eq (add $maximumActivePage 1) (sub $pag.Last.PageNumber $minimumPage)) }}
+  {{ end }}
+
+  {{- if $showNumber -}}
+    {{- $ellipsed = false -}}
+    {{- $shouldEllipse = false -}}
+  {{- else -}}
+    {{- $shouldEllipse = not $ellipsed -}}
+    {{- $ellipsed = true -}}
+  {{- end -}}
+  {{- if $showNumber }}
+  <li class="{{ if eq . $pag }} page-link--active{{ end }}">
+      <a class="page-link" href="{{ .URL }}"
+         {{- if eq (sub $pag.PageNumber .PageNumber) 1 }}
+            rel="prev"
+            aria-label="Previous"
+         {{- else if (eq (sub $pag.PageNumber .PageNumber) -1) }}
+            rel="next"
+            aria-label="Next"
+         {{- else if (eq $pag.PageNumber .PageNumber) }}
+            aria-label="Current"
+            aria-current="page"
+         {{- end -}}
+      >{{ .PageNumber }}</a>
+  </li>
+  {{- else if $shouldEllipse }}
+  <li class="page-item disabled">
+    <span aria-hidden="true">&nbsp;&hellip;&nbsp;</span>
+  </li>
+  {{- end -}}
+  {{- end }}
+</ul>
+{{ end }}