diff --git a/public/css/default.css b/public/css/default.css
index 93e7c58e..5f61392e 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -46,6 +46,32 @@ a:hover {
 	border-color: #a40d0d;
 }
 
+@media (max-width: 767px) {
+	.pagination {
+		box-shadow: none;
+		height: 52px;
+		display: block;
+		position: relative;
+	}
+	.pagination .page-number, .pagination .page-padding {
+		display: none;
+	}
+	.pagination .page-link {
+		border-radius: var(--bs-pagination-border-radius) !important;
+	}
+	.pagination > :first-child, .pagination > :last-child {
+		box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+		display: inline-block;
+		position: absolute;
+	}
+	.pagination > :first-child {
+		left: 0;
+	}
+	.pagination > :last-child {
+		right: 0;
+	}
+}
+
 .btn {
 	font-family: 'Coda', sans-serif;
 }
diff --git a/templates/PageIndexWidget.php b/templates/PageIndexWidget.php
index a10070e4..4168db85 100644
--- a/templates/PageIndexWidget.php
+++ b/templates/PageIndexWidget.php
@@ -45,10 +45,10 @@ class PageIndexWidget extends Template
 
 			if (!is_array($page))
 				echo '
-					<li class="page-item disabled"><a class="page-link">...</a></li>';
+					<li class="page-item page-padding disabled"><a class="page-link">...</a></li>';
 			else
 				echo '
-					<li class="page-item', $page['is_selected'] ? ' active" aria-current="page' : '', '">',
+					<li class="page-item page-number', $page['is_selected'] ? ' active" aria-current="page' : '', '">',
 						'<a class="page-link" href="', $page['href'], '">', $page['index'], '</a></li>';
 		}