diff --git a/shimatta_kenkyusho/templates/paginator.html b/shimatta_kenkyusho/templates/paginator.html
new file mode 100644
index 0000000..34ad0c3
--- /dev/null
+++ b/shimatta_kenkyusho/templates/paginator.html
@@ -0,0 +1,25 @@
+{% if paginator.has_other_pages %}
+<nav aria-label="{{aria_label}}">
+    <ul class="pagination">
+        {% if paginator.has_previous %}
+            <li class="page-item"><a class="page-link" href="?{{get_param}}={{paginator.previous_page_number}}">&laquo;</a></li>
+        {% else %}
+            <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
+        {% endif %}
+        {% for i in paginator.paginator.page_range %}
+            {% if i <= paginator.number|add:5 and i >= paginator.number|add:-5 %}
+                {% if i == paginator.number %}
+                        <li class="page-item active"><a class="page-link" href="?{{get_param}}={{i}}">{{i}}</a></li>
+                {% else %}
+                    <li class="page-item"><a class="page-link" href="?{{get_param}}={{i}}">{{i}}</a></li>
+                {% endif %}
+            {% endif %}
+        {% endfor %}
+        {% if paginator.has_next %}
+            <li class="page-item"><a class="page-link" href="?{{get_param}}={{paginator.next_page_number}}">&raquo;</a></li>
+        {% else %}
+            <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
+        {% endif %}
+    </ul>    
+</nav>
+{% endif %}
\ No newline at end of file
diff --git a/shimatta_kenkyusho/templates/parts/stocks-detail.html b/shimatta_kenkyusho/templates/parts/stocks-detail.html
index 5f55aab..3c32f97 100644
--- a/shimatta_kenkyusho/templates/parts/stocks-detail.html
+++ b/shimatta_kenkyusho/templates/parts/stocks-detail.html
@@ -35,24 +35,7 @@
                 </a>
             {% endfor %}
             </div>
-            <nav aria-label="Storage Navigation">
-                <ul class="pagination">
-                    {% if storages.number > 1 %}
-                    <li class="page-item"><a class="page-link" href="?storage_page={{storages.previous_page_number}}">&laquo;</a></li>
-                    <li class="page-item"><a class="page-link" href="?storage_page={{storages.previous_page_number}}">{{storages.previous_page_number}}</a></li>
-                    {% else %}
-                    <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
-                    {% endif %}
-                    
-                    <li class="page-item active"><span class="page-link">{{storages.number}}</span></li>
-                    {% if storages.paginator.num_pages > storages.number %}
-                    <li class="page-item"><a class="page-link" href="?storage_page={{storages.next_page_number}}">{{storages.next_page_number}}</a></li>
-                    <li class="page-item"><a class="page-link" href="?storage_page={{storages.next_page_number}}">&raquo;</a></li>
-                    {% else %}
-                    <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
-                    {% endif %}
-                </ul>
-            </nav>
+            {% include 'paginator.html' with paginator=storages get_param='storage_page' aria_label='Storage Page Navigation' %}
         </div>
     </div>
 
diff --git a/shimatta_kenkyusho/templates/parts/stocks.html b/shimatta_kenkyusho/templates/parts/stocks.html
index dbb9f3d..1b25e63 100644
--- a/shimatta_kenkyusho/templates/parts/stocks.html
+++ b/shimatta_kenkyusho/templates/parts/stocks.html
@@ -31,58 +31,24 @@
                 </li></a>
             {% endfor %}
             </div>
-            <nav aria-label="Low Stock Navigation">
-                <ul class="pagination">
-                    {% if low_stocks.number > 1 %}
-                    <li class="page-item"><a class="page-link" href="?low_stock_page={{low_stocks.previous_page_number}}">&laquo;</a></li>
-                    <li class="page-item"><a class="page-link" href="?low_stock_page={{low_stocks.previous_page_number}}">{{low_stocks.previous_page_number}}</a></li>
-                    {% else %}
-                    <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
-                    {% endif %}
-                    
-                    <li class="page-item active"><span class="page-link">{{low_stocks.number}}</span></li>
-                    {% if low_stocks.paginator.num_pages > low_stocks.number %}
-                    <li class="page-item"><a class="page-link" href="?low_stock_page={{low_stocks.next_page_number}}">{{low_stocks.next_page_number}}</a></li>
-                    <li class="page-item"><a class="page-link" href="?low_stock_page={{low_stocks.next_page_number}}">&raquo;</a></li>
-                    {% else %}
-                    <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
-                    {% endif %}
-                </ul>
-            </nav>
+            {% include 'paginator.html' with paginator=low_stocks get_param='low_stock_page' aria_label='Low Stock Page Navigation' %}
         </div>
         <div class="col-md">
-           <h1>Storages</h1>
-           <div class="list-group">
-           {% for storage in storages %}
-                <a href="{% url 'parts-stocks-detail' uuid=storage.id %}" class="text-decoration-none">
-                    <li class="list-group-item list-group-item-action justify-content-between align-items-center d-flex">
-                        <div> 
-                        <h5>{{storage.name}}</h5>
-                        Responsible: {{ storage.responsible }}
-                        </div>
-                        <span class="badge bg-primary rounded-pill">{{storage.get_total_stock_amount}}</span>
-                    </li>
-                </a>
-           {% endfor %}
-           </div>
-           <nav aria-label="Storage Navigation">
-                <ul class="pagination">
-                    {% if storages.number > 1 %}
-                    <li class="page-item"><a class="page-link" href="?storage_page={{storages.previous_page_number}}">&laquo;</a></li>
-                    <li class="page-item"><a class="page-link" href="?storage_page={{storages.previous_page_number}}">{{storages.previous_page_number}}</a></li>
-                    {% else %}
-                    <li class="page-item disabled"><span class="page-link">&laquo;</span></li>
-                    {% endif %}
-                    
-                    <li class="page-item active"><span class="page-link">{{storages.number}}</span></li>
-                    {% if storages.paginator.num_pages > storages.number %}
-                    <li class="page-item"><a class="page-link" href="?storage_page={{storages.next_page_number}}">{{storages.next_page_number}}</a></li>
-                    <li class="page-item"><a class="page-link" href="?storage_page={{storages.next_page_number}}">&raquo;</a></li>
-                    {% else %}
-                    <li class="page-item disabled"><span class="page-link">&raquo;</span></li>
-                    {% endif %}
-                </ul>
-            </nav>
+            <h1>Storages</h1>
+            <div class="list-group">
+            {% for storage in storages %}
+                    <a href="{% url 'parts-stocks-detail' uuid=storage.id %}" class="text-decoration-none">
+                        <li class="list-group-item list-group-item-action justify-content-between align-items-center d-flex">
+                            <div> 
+                            <h5>{{storage.name}}</h5>
+                            Responsible: {{ storage.responsible }}
+                            </div>
+                            <span class="badge bg-primary rounded-pill">{{storage.get_total_stock_amount}}</span>
+                        </li>
+                    </a>
+            {% endfor %}
+            </div>
+            {% include 'paginator.html' with paginator=storages get_param='storage_page' aria_label='Storage Page Navigation'%}
         </div>
     </div>
 </div>