diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css b/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css
new file mode 100644
index 0000000..2f385c5
--- /dev/null
+++ b/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css
@@ -0,0 +1,40 @@
+input[type="number"] {
+    border: 1px solid #9EB384;
+    border-radius: 4px;
+    padding: 5px;
+    width: 50px;
+    color: #435334;
+    margin: 0 0.3rem;
+}
+
+input[type="number"]:hover {
+    border: 1px solid #435334;
+    color: #435334;
+}
+
+input[type="number"]:focus {
+    border: 1px solid #435334;
+    box-shadow: 0 0 5px #9EB384;
+    outline: none;
+}
+
+.btn-check:checked + .btn {
+    color: #435334;
+    border: none;
+    padding: 0.1rem 0.2rem;
+}
+
+.btn-check:not(:checked) + .btn {
+    color: #9EB384;
+    border: none;
+    padding: 0.1rem 0.2rem;
+}
+
+.text-start, .text-end {
+    color: #435334;
+    margin: 0 0.3rem;
+}
+
+.col-form-label {
+    color: #435334;
+}
\ No newline at end of file
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/PaginationTools.js b/web-app/django/VIM/apps/instruments/static/instruments/js/PaginationTools.js
index 28795e3..d31ed15 100644
--- a/web-app/django/VIM/apps/instruments/static/instruments/js/PaginationTools.js
+++ b/web-app/django/VIM/apps/instruments/static/instruments/js/PaginationTools.js
@@ -1,66 +1,77 @@
-const paginationModal = document.getElementById("paginationModal");
 const instrumentNumElement = document.getElementById('instrumentNum');
 const instrumentNum = instrumentNumElement.getAttribute('data-instrument-num');
-
-const savePaginationBtn = document.getElementById("save-pagination-setting");
-const paginateByInput = document.getElementById("pagination-range");
 const pageNumInput = document.getElementById("page-num");
-const rangeValue = document.getElementById("range-value");
-
 const pageBtns = document.querySelectorAll(".page-link");
+const optionRadios = document.querySelectorAll(".option-radio");
 
 updatePaginationSetting();
 
-function setPaginationSetting(paginateBy, pageNum) {
+function updatePaginationSetting() {
+    const url = new URL(window.location.href);
+    const page = url.searchParams.get("page") || 1;
+    const paginateBy = url.searchParams.get("paginate_by") || 20;
+    setPage(page);
+    setPaginateBy(paginateBy);
+    pageNumInput.max = Math.ceil(instrumentNum / paginateBy);
+}
+
+function setPaginateBy(paginateBy) {
     localStorage.setItem("paginate_by", paginateBy);
-    localStorage.setItem("page", pageNum);
 }
 
-function getPaginationSetting() {
-    return {
-        paginate_by: localStorage.getItem("paginate_by"),
-        page: localStorage.getItem("page")
-    };
+function setPage(pageNum) {
+    localStorage.setItem("page", pageNum);
 }
 
-function updatePaginationSetting() {
-    currentPaginateBy = getPaginationSetting().paginate_by || 20;
-    currentPageNum = getPaginationSetting().page || 1;
-    paginateByInput.value = currentPaginateBy;
-    pageNumInput.value = currentPageNum;
+function getPaginateBy() {
+    return localStorage.getItem("paginate_by");
 }
 
-function pageNumInputValidation() {
-    maxPageNum = Math.ceil(instrumentNum / paginateByInput.value);
-    if (pageNumInput.value < 1) {
-        pageNumInput.value = 1;
-    } else if (pageNumInput.value > maxPageNum) {
-        pageNumInput.value = maxPageNum;
-    }
+function getPage() {
+    return localStorage.getItem("page");
 }
 
-paginateByInput.addEventListener("input", function () {
-    rangeValue.textContent = this.value;
-    maxPageNum = Math.ceil(instrumentNum / this.value);
-    if (pageNumInput.value > maxPageNum) {
-        pageNumInput.value = maxPageNum;
+optionRadios.forEach(function(radio) {
+    if (radio.id == getPaginateBy()) {
+        radio.checked = true;   
     }
-    pageNumInput.max = maxPageNum;
 });
 
-savePaginationBtn.addEventListener("click", () => {
-    pageNumInputValidation();
-    const url = new URL(window.location.href);
-    url.searchParams.set("paginate_by", paginateByInput.value);
-    url.searchParams.set("page", pageNumInput.value);
-    window.location.href = url.href;
-    setPaginationSetting(paginateByInput.value, pageNumInput.value);
-    updatePaginationSetting();
+optionRadios.forEach(function(radio) {
+    radio.addEventListener("change", function() {
+        if (radio.checked) {
+            const selectedOptionInt = parseInt(radio.id);
+            setPaginateBy(selectedOptionInt);
+            maxPageNum = Math.ceil(instrumentNum / getPaginateBy());
+            validPageNum = Math.min(Math.max(getPage(), 1), maxPageNum);
+            if (validPageNum !== getPage()) {
+                setPage(validPageNum);
+            }
+            refreshPage();
+        }
+    });
+});
+
+pageNumInput.addEventListener("keydown", function(event) {
+    if (event.key === "Enter") {
+        maxPageNum = Math.ceil(instrumentNum / getPaginateBy());
+        validPageNum = Math.min(Math.max(pageNumInput.value, 1), maxPageNum);
+        pageNumInput.value = validPageNum;
+        pageNumInput.max = maxPageNum;
+        setPage(validPageNum);
+        refreshPage();
+    }
 });
 
 pageBtns.forEach((btn) => {
     btn.addEventListener("click", () => {
-        paginate_by = localStorage.getItem("paginate_by");
-        btn.href = btn.href + "&paginate_by=" + paginate_by;
+        btn.href = btn.href + "&paginate_by=" + getPaginateBy();
     });
-});
\ No newline at end of file
+});
+
+function refreshPage() {
+    const url = new URL(window.location.href);
+    url.searchParams.set("page", getPage());
+    url.searchParams.set("paginate_by", getPaginateBy());
+    window.location.href = url.href;
+}
\ No newline at end of file
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/pageSetting.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/pageSetting.html
deleted file mode 100644
index a280c0a..0000000
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/pageSetting.html
+++ /dev/null
@@ -1,148 +0,0 @@
-<!-- Modal -->
-<div class="modal fade" id="paginationModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h1 class="modal-title fs-5" id="exampleModalLabel">Pagination Setting</h1>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div class="container-fluid">
-                    <form>
-                        <div class="row mb-1">
-                            <p class="col-auto"> Number of instruments: </p>
-                            <p class="col-auto" id="instrumentNum" data-instrument-num="{{ instrument_num }}">{{ instrument_num }}</p>
-                        </div>
-                        <div class="row mb-2">
-                            <label for="paginate-by" class="col-sm-4 col-form-label">Paginate by:</label>
-                            <div class="col-sm-6 d-flex align-items-center">
-                                <input type="range" id="pagination-range" name="paginate_by" min="15" max="50" step="5" value="20">
-                            </div>
-                            <div class="col-sm-2">
-                                <span class="range-value" id="range-value">20</span>
-                            </div>
-                        </div>
-                        <div class="row mb-3">
-                            <label for="page-num" class="col-sm-4 col-form-label">Go to Page:</label>
-                            <div class="col-sm-8">
-                                <input type="number" name="page" id="page-num" min="1" step="1" placeholder="Default: 1">
-                            </div>
-                        </div>
-                        <div class="row">
-                            <div class="col-sm-12 text-end">
-                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
-                                <button type="submit" class="btn btn-primary" id="save-pagination-setting">Apply</button>
-                            </div>
-                        </div>
-                    </form>
-                </div>
-            </div>
-            <div class="modal-footer"></div>
-        </div>
-    </div>
-</div>
-
-<style>
-
-.modal-header {
-    background-color: #9EB384;
-}
-
-.modal-title {
-    color: #435334;
-}
-
-.modal-body {
-    background-color: #FAF1E4;
-}
-
-.range-value {
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: left;
-}
-
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    appearance: none;
-    width: 20px;
-    height: 20px;
-    background: #435334;
-    border-radius: 50%;
-    cursor: pointer;
-}
-
-input[type="range"] {
-    -webkit-appearance: none;
-    width: 100%;
-    height: 5px;
-    border-radius: 5px;
-    background-color: #9EB384;
-    color: #435334;
-    outline: none;
-}
-
-input[type="number"] {
-    border: 1px solid #9EB384;
-    border-radius: 4px;
-    background-color: #FAF1E4;
-    padding: 5px;
-    width: 100%;
-    color: #435334;
-}
-
-input[type="number"]:hover {
-    border: 1px solid #435334;
-    background-color: #FAF1E4;
-    color: #435334;
-}
-
-input[type="number"]:focus {
-    border: 1px solid #435334;
-    box-shadow: 0 0 5px #9EB384;
-    outline: none;
-}
-
-input[type="number"]::placeholder {
-    color: #9EB384;
-}
-
-.modal-content {
-    color: #435334;
-}
-
-.modal-footer {
-    background-color: #FAF1E4;
-    border: none;
-}
-
-.btn-secondary {
-    background-color: #9EB384;
-    border: 1px solid #9EB384;
-}
-
-.btn-secondary:hover {
-    background-color: #435334;
-    border: 1px solid #435334;
-}
-
-.btn-primary {
-    background-color: #435334;
-    border: 1px solid #435334;
-}
-
-.btn-primary:hover {
-    background-color: #9EB384;
-    border: 1px solid #9EB384;
-}
-
-.btn-close {
-    color: #435334;
-}
-
-.btn-close:hover {
-    color: #9EB384;
-}
-
-</style> 
\ No newline at end of file
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/index.html b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
index 389bbdc..c4e1020 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -7,8 +7,9 @@
 
 {% block css_files %}
 <link rel="stylesheet" href="{% static "instruments/css/index.css" %}">
+<link rel="stylesheet" href="{% static "instruments/css/pagination.css" %}">
 {% endblock %}
-
+ 
 {% block content %}
 <div class="container py-5">
   <div class="row">
@@ -93,10 +94,6 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4>
       </div>
 
       <div class="d-flex">
-        <button type="button" class="btn me-1 px-1 py-0 justify-content-center display-btn" id="page-setting-btn" data-bs-toggle="modal" data-bs-target="#paginationModal">
-          <i class="bi bi-gear"></i>
-        </button>
-        {% include "instruments/includes/pageSetting.html" %}
         <button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="masonry-btn">
           <i class="bi bi-columns-gap"></i>
         </button>
@@ -110,48 +107,83 @@ <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4>
     </div>
     <hr class="mb-2 mx-2">
     <div class="container py-3" id="body-content">
+      <div class="mb-2 d-flex flex-md-row flex-column justify-content-between">
+        <span id="instrumentNum" data-instrument-num="{{ page_obj.paginator.count }}" class="text-start">
+          Showing {{ page_obj.start_index }} to {{ page_obj.end_index }} of {{ page_obj.paginator.count }} entries
+        </span>
+        <div class="ms-2 d-flex align-items-center">
+          <span class="text-start">View</span>
+          <input type="radio" class="btn-check option-radio" name="options-group1" id="20" autocomplete="off">
+          <label class="btn" for="20">20</label>
+          <label class="col-form-label mb-1">|</label>
+          <input type="radio" class="btn-check option-radio" name="options-group1" id="50" autocomplete="off">
+          <label class="btn" for="50">50</label>
+          <label class="col-form-label mb-1">|</label>
+          <input type="radio" class="btn-check option-radio" name="options-group1" id="100" autocomplete="off">
+          <label class="btn" for="100">100</label>
+          <span class="text-end">per page</span>
+        </div>
+      </div>
       {% include "instruments/includes/masonryView.html" %}
       {% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %}
       {% include "instruments/includes/stdView.html" %}
     </div>
-
-    <div class="pagination-container">
-      <ul class="pagination justify-content-center">
-        {% if page_obj.has_previous %}
-          <li class="page-item">
-            <a class="page-link" href="?page=1{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="First" title="First">
-              <i class="bi bi-chevron-double-left"></i>
-            </a>
-          </li>
-          <li class="page-item">
-            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Previous" title="Previous">
-              <i class="bi bi-chevron-left"></i>
-            </a>
+    
+    <div class="mb-3 d-flex flex-md-row flex-column align-items-center justify-content-center">
+      <div class="me-2 mb-1 d-flex align-items-center justify-content-end">
+        <span class="text-start">View</span>
+        <input type="radio" class="btn-check option-radio" name="options-group2" id="20" autocomplete="off">
+        <label class="btn" for="20">20</label>
+        <label class="col-form-label mb-1">|</label>
+        <input type="radio" class="btn-check option-radio" name="options-group2" id="50" autocomplete="off">
+        <label class="btn" for="50">50</label>
+        <label class="col-form-label mb-1">|</label>
+        <input type="radio" class="btn-check option-radio" name="options-group2" id="100" autocomplete="off">
+        <label class="btn" for="100">100</label>
+        <span class="text-end">per page</span>
+      </div>
+      <div class="pagination-container ">
+        <ul class="pagination mb-1 justify-content-center">
+          {% if page_obj.has_previous %}
+            <li class="page-item">
+              <a class="page-link" href="?page=1{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="First" title="First">
+                <i class="bi bi-chevron-double-left"></i>
+              </a>
+            </li>
+            <li class="page-item">
+              <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Previous" title="Previous">
+                <i class="bi bi-chevron-left"></i>
+              </a>
+            </li>
+          {% endif %}
+            
+          <li class="page-item align-self-center">
+            <span class="current p-2">
+              Page
+              <span class="page-number">{{ page_obj.number }}</span>
+              of
+              {{ page_obj.paginator.num_pages }}
+            </span>
           </li>
-        {% endif %}
-          
-        <li class="page-item align-self-center">
-          <span class="current p-2">
-            Page
-            <span class="page-number">{{ page_obj.number }}</span>
-            of
-            {{ page_obj.paginator.num_pages }}
-          </span>
-        </li>
 
-        {% if page_obj.has_next %}
-          <li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
-            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Next" title="Next">
-              <i class="bi bi-chevron-right"></i>
-            </a>
-          </li>
-          <li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
-            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Last" title="Last">
-              <i class="bi bi-chevron-double-right"></i>
-            </a>
-          </li>
-        {% endif %}
-      </ul>
+          {% if page_obj.has_next %}
+            <li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
+              <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Next" title="Next">
+                <i class="bi bi-chevron-right"></i>
+              </a>
+            </li>
+            <li class="page-item {% if not page_obj.has_next %}disabled{% endif %}">
+              <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}" aria-label="Last" title="Last">
+                <i class="bi bi-chevron-double-right"></i>
+              </a>
+            </li>
+          {% endif %}
+        </ul>
+      </div>
+      <div class="ms-3 mb-1 d-flex align-items-center justify-content-start">
+        <label for="go-to" class="col-form-label">Go to Page</label>
+        <input type="number" name="page" id="page-num" min="1" step="1">
+      </div>
     </div>
   </div>
 </div>