diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index ac41f1a..f9ee8a3 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -11,12 +11,12 @@
             {{ end }}
         
             <!-- Pagination -->
-            <nav aria-label="Page navigation .pagination-lg">
-                <ul class="pagination justify-content-center">
+            <div class="center">
+                <div class="pagination">
                     {{ block "pagination" . }}
                     {{ end }}
-                </ul>
-            </nav>
+                </div>
+            </div>
 
             {{ partial "footer.html" . }}
         </div>
diff --git a/layouts/index.html b/layouts/index.html
index c7fad02..08f7148 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -11,31 +11,28 @@
 {{ define "pagination" }}
     {{ $paginator := .Paginate ((where .Site.RegularPages "Section" "moments").ByParam "top") }}
     {{ if $paginator.HasPrev }}
-    <li class="page-item">
-        <a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">Previous</a>
-    </li>
+    
+    <a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}">
+        <div class="page-item">Previous</div>
+    </a>
     {{ else }}
-    <li class="page-item disabled">
-        <a class="page-link" href="{{$.Site.BaseURL}}/{{sub $paginator.PageNumber 1 }}" tabindex="-1">Previous</a>
-    </li>
+        <div class="page-item disabled">Previous</div>
     {{ end }}
 
     {{ $current_num := $paginator.PageNumber }}
     {{ range (seq 1 $paginator.TotalPages) }}
         {{ if (eq $current_num .)}}
-            <li class="page-item active"><a class="page-link" href="{{$.Site.BaseURL}}/{{.}}">{{.}}</a></li>
+        <div class="page-item active">{{.}}</div>
         {{ else }}
-            <li class="page-item"><a class="page-link" href="{{$.Site.BaseURL}}/{{.}}">{{.}}</a></li>
+        <a class="page-link" href="{{$.Site.BaseURL}}/{{.}}"><div class="page-item">{{.}}</div></a>
         {{ end }}
     {{end}}
 
     {{ if $paginator.HasNext }}
-    <li class="page-item">
-        <a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next</a>
-    </li>
+    <a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">
+        <div class="page-item">Next</div>
+    </a>
     {{ else }}
-    <li class="page-item disabled">
-        <a class="page-link" href="{{$.Site.BaseURL}}/{{ add $paginator.PageNumber 1 }}">Next</a>
-    </li>
+        <div class="page-item disabled">Next</div>
     {{ end }}
 {{ end }}
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 479eb4f..105cfd7 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -35,6 +35,49 @@ p{
 
 /* END - top cover part */
 
+/* START - pagination */
+.center{
+    display: flex;
+    justify-content: center;
+}
+
+.pagination{
+    display: flex;
+    margin-top: 20px;
+    margin-bottom: 30px;
+}
+
+.pagination a{
+    color: #337cf6;
+    text-decoration: none;
+}
+
+.page-item{
+    border: #80808050;
+    border-style: solid;
+    border-width: 0.5px;
+    border-radius: 2%;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+.page-link .page-item:hover{
+    background-color: #eaecef;
+    color: #2157ad;
+}
+
+.page-item.active{
+    background-color: #337cf6;
+    color: #ffffff;
+}
+
+.page-item.disabled{
+    color:rgb(108, 117, 125)
+}
+/* END - pagination */
+
 .page{
     max-width: 1150px;
     margin: auto;