diff --git a/public/style.css b/public/style.css
index 1de12d9..6c1f0fb 100644
--- a/public/style.css
+++ b/public/style.css
@@ -7724,16 +7724,24 @@ header #login-popup {
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
+  align-items: center;
   border-style: dashed;
   border-width: 0px;
-  border-bottom-width: 1px; }
+  border-bottom-width: 1px;
+  padding-bottom: 0.5rem; }
   @media screen and (min-width: 30em) {
     .optionbar {
       flex-direction: row;
-      text-align: left; } }
+      text-align: left;
+      padding-bottom: 0; } }
   .optionbar.bottom {
     border-bottom-width: 0px;
-    border-top-width: 1px; }
+    border-top-width: 1px;
+    padding-bottom: 0;
+    padding-top: 0.5rem; }
+    @media screen and (min-width: 30em) {
+      .optionbar.bottom {
+        padding-top: 0; } }
   .optionbar.center {
     text-align: center; }
   .optionbar .options {
@@ -7748,6 +7756,8 @@ header #login-popup {
     .optionbar .options input[type=button],
     .optionbar .options input[type=submit] {
       display: inline-flex;
+      align-items: center;
+      justify-content: center;
       border: none;
       background: none;
       font-weight: normal;
@@ -8432,6 +8442,8 @@ input[type=submit] {
   input[type=button].lite,
   input[type=submit].lite {
     display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border: none;
     background: none;
     font-weight: normal;
diff --git a/src/rawdata/scss/_core.scss b/src/rawdata/scss/_core.scss
index 0d340b3..1f6d552 100644
--- a/src/rawdata/scss/_core.scss
+++ b/src/rawdata/scss/_core.scss
@@ -639,18 +639,27 @@ footer {
   flex-direction: column;
   justify-content: space-between;
   text-align: center;
+  align-items: center;
   border-style: dashed;
   border-width: 0px;
   border-bottom-width: 1px;
+  padding-bottom: $spacing-small;
 
   @media #{$breakpoint-not-small} {
     flex-direction: row;
     text-align: left;
+    padding-bottom: 0;
   }
 
   &.bottom {
     border-bottom-width: 0px;
     border-top-width: 1px;
+    padding-bottom: 0;
+    padding-top: $spacing-small;
+
+    @media #{$breakpoint-not-small} {
+      padding-top: 0;
+    }
   }
 
   &.center {
diff --git a/src/rawdata/scss/_globals.scss b/src/rawdata/scss/_globals.scss
index 75d4923..993b147 100644
--- a/src/rawdata/scss/_globals.scss
+++ b/src/rawdata/scss/_globals.scss
@@ -46,6 +46,8 @@ will throw an error.
 
 @mixin lite-button {
   display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: none;
   background: none;
   font-weight: normal;
diff --git a/src/templates/src/include/pagination.html b/src/templates/src/include/pagination.html
index c203fde..69a7c0e 100644
--- a/src/templates/src/include/pagination.html
+++ b/src/templates/src/include/pagination.html
@@ -1,9 +1,9 @@
 {{- /*gotype: git.handmade.network/hmn/hmn/src/templates.Pagination*/ -}}
-<div class="pagination flex">
-    {{ if gt .Current 1 }}
-        <a class="button" href="{{ .PreviousUrl }}">Prev</a>
-    {{ end }}
-    {{ if gt .Total 1 }}
+{{ if gt .Total 1 }}
+    <div class="pagination flex">
+        {{ if gt .Current 1 }}
+            <a class="button" href="{{ .PreviousUrl }}">Prev</a>
+        {{ end }}
         {{ if gt .Current 1 }}
             {{ if gt .Current 2 }}
                 <a class="page button" href="{{ .FirstUrl }}">1</a>
@@ -23,10 +23,8 @@
                 <a class="page button" href="{{ .LastUrl }}">{{ .Total }}</a>
             {{ end }}
         {{ end }}
-    {{ else }}
-        &nbsp;
-    {{ end }}
-    {{ if lt .Current .Total }}
-        <a class="button" href="{{ .NextUrl }}">Next</a>
-    {{ end }}
-</div>
+        {{ if lt .Current .Total }}
+            <a class="button" href="{{ .NextUrl }}">Next</a>
+        {{ end }}
+    </div>
+{{ end }}