diff --git a/_layouts/index.liquid b/_layouts/index.liquid
index 31161b8..41ed8e3 100644
--- a/_layouts/index.liquid
+++ b/_layouts/index.liquid
@@ -14,13 +14,28 @@
{% if paginator.total_pages > 1 %}
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 8cce7fa..b0a7ed7 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -47,6 +47,15 @@ $theme-button-background: hsl($theme-hue, 100%, 30.0%);
$theme-button-background-active: hsl($theme-hue, 100%, 50%);
$theme-button-color: hsl($theme-hue, 0%, 100%);
$theme-button-color-active: hsl($theme-hue, 100%, 100%);
+$theme-pagination-background: hsl($theme-hue, 50%, 10%);
+$theme-pagination-background-active: hsl($theme-hue, 100%, 50%);
+$theme-pagination-background-selected: hsl($theme-hue, 100%, 33%);
+$theme-pagination-shadow: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
+$theme-pagination-shadow-active: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
+$theme-pagination-shadow-selected: 0px 3px 6px 1px hsla(0, 0, 0, 0.75);
+$theme-pagination-color: $theme-content-color;
+$theme-pagination-color-active: hsl($theme-hue, 100%, 100%);
+$theme-pagination-color-selected: hsl($theme-hue, 100%, 50%);
* {
box-sizing: border-box;
diff --git a/_sass/_content.scss b/_sass/_content.scss
index bfc256f..80c97a9 100644
--- a/_sass/_content.scss
+++ b/_sass/_content.scss
@@ -11,3 +11,4 @@ body > .content {
@import "_blocks.scss";
@import "_comments.scss";
@import "_index.scss";
+@import "_pagination.scss";
diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss
new file mode 100644
index 0000000..8bbad9f
--- /dev/null
+++ b/_sass/_pagination.scss
@@ -0,0 +1,44 @@
+.pager {
+ display: block;
+ width: fit-content;
+ margin: 1rem auto;
+ padding: 0;
+ list-style: none inside;
+}
+
+.pager > li {
+ display: inline-block;
+ margin: 0 .25rem;
+ padding: 0;
+ font-weight: bold;
+ font-size: 1.333rem;
+ line-height: 1.333rem;
+ vertical-align: top;
+
+ background: $theme-pagination-background;
+ box-shadow: $theme-pagination-shadow;
+ color: $theme-pagination-color;
+}
+
+.pager > li:hover,
+.pager > li:focus {
+ background: $theme-pagination-background-active;
+ box-shadow: $theme-pagination-shadow-active;
+ color: $theme-pagination-color-active;
+}
+
+.pager > .selected {
+ background: $theme-pagination-background-selected;
+ box-shadow: $theme-pagination-shadow-selected;
+ color: $theme-pagination-color-selected;
+}
+
+.pager > li > a {
+ display: block;
+ margin: 0;
+ padding: 0;
+ text-align: center;
+ line-height: 2.5rem;
+ width: 5rem;
+ height: 2.5rem;
+}