diff --git a/board/src/main/resources/templates/articles/index.html b/board/src/main/resources/templates/articles/index.html
index 32396e75..0e1d6a59 100644
--- a/board/src/main/resources/templates/articles/index.html
+++ b/board/src/main/resources/templates/articles/index.html
@@ -88,12 +88,10 @@
             </tbody>
         </table>
 
-        <nav aria-label="Page navigation example">
+        <nav id="pagination" aria-label="Page navigation example">
             <ul class="pagination justify-content-center">
                 <li class="page-item"><a class="page-link" href="#">Previous</a></li>
                 <li class="page-item"><a class="page-link" href="#">1</a></li>
-                <li class="page-item"><a class="page-link" href="#">2</a></li>
-                <li class="page-item"><a class="page-link" href="#">3</a></li>
                 <li class="page-item"><a class="page-link" href="#">Next</a></li>
             </ul>
         </nav>
diff --git a/board/src/main/resources/templates/articles/index.th.xml b/board/src/main/resources/templates/articles/index.th.xml
index 0c1823e2..2816610b 100644
--- a/board/src/main/resources/templates/articles/index.th.xml
+++ b/board/src/main/resources/templates/articles/index.th.xml
@@ -13,4 +13,24 @@
             </attr>
         </attr>
     </attr>
+
+    <attr sel="#pagination">
+        <attr sel="li[0]/a"
+              th:text="'previous'"
+              th:href="@{/articles(page=${articles.number - 1})}"
+              th:class="'page-link' + (${articles.number} <= 0 ? ' disabled' : '')"
+        />
+        <attr sel="li[1]" th:class="page-item" th:each="pageNumber : ${paginationBarNumbers}">
+            <attr sel="a"
+                  th:text="${pageNumber + 1}"
+                  th:href="@{/articles(page=${pageNumber})}"
+                  th:class="'page-link' + (${pageNumber} == ${articles.number} ? ' disabled' : '')"
+            />
+        </attr>
+        <attr sel="li[2]/a"
+              th:text="'next'"
+              th:href="@{/articles(page=${articles.number + 1})}"
+              th:class="'page-link' + (${articles.number} >= ${articles.totalPages - 1} ? ' disabled' : '')"
+        />
+    </attr>
 </thlogic>
\ No newline at end of file