diff --git a/resources/views/layouts/parts/navbar.twig b/resources/views/layouts/parts/navbar.twig
index 564e76ed..558d917b 100644
--- a/resources/views/layouts/parts/navbar.twig
+++ b/resources/views/layouts/parts/navbar.twig
@@ -25,7 +25,7 @@
                 <ul class="navbar-nav mb-2 mb-lg-0">
                     {% for text,link in config('header_items', {}) %}
                         <li class="nav-item">
-                            <a href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
+                            <a class="nav-link" href="{{ link|replace({'%lang%': session_get('locale')|split('_')[0]})|escape('html_attr') }}">
                                 {{ text }}
                             </a>
                         </li>
diff --git a/resources/views/pages/design.twig b/resources/views/pages/design.twig
index 28d7c4b8..cba43577 100644
--- a/resources/views/pages/design.twig
+++ b/resources/views/pages/design.twig
@@ -291,9 +291,22 @@
                     <code>3.1415926535897932384626433832795</code>
                 </p>
             </div>
+            <div class="col">
+                <h4>Pagination</h4>
+                <ul class="pagination">
+                    <li class="page-item active">
+                        <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>
+                </ul>
+            </div>
         </div>
 
-
         <h2>Macros</h2>
         <h3>base.twig</h3>
         <div class="row mb-4">
diff --git a/resources/views/pages/news/overview.twig b/resources/views/pages/news/overview.twig
index 22db4d8e..d597f322 100644
--- a/resources/views/pages/news/overview.twig
+++ b/resources/views/pages/news/overview.twig
@@ -29,11 +29,11 @@
 
             {% block pagination %}
                 {% if pages|default(0) > 1 %}
-                    <div class="col-md-12 text-center">
-                        <ul class="pagination">
+                    <div class="col-md-12">
+                        <ul class="pagination justify-content-center">
                             {% for p in range(1, pages) %}
-                                <li{% if p == page %} class="active"{% endif %}>
-                                    <a href="{{ url('news', p == 1 ? {} : {'page': p}) }}">{{ p }}</a>
+                                <li class="page-item{% if p == page %} active{% endif %}">
+                                    <a class="page-link" href="{{ url('news', p == 1 ? {} : {'page': p}) }}">{{ p }}</a>
                                 </li>
                             {% endfor %}
                         </ul>