diff --git a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css
index e25b5ce..ed5a800 100644
--- a/web-app/django/VIM/apps/instruments/static/instruments/css/index.css
+++ b/web-app/django/VIM/apps/instruments/static/instruments/css/index.css
@@ -57,6 +57,7 @@ hr {
     font-weight: bold;
     color: #435334;
     font-size: 20px;
+    width: 30px;
 }
 
 .display-btn:focus {
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/images/no-image.svg b/web-app/django/VIM/apps/instruments/static/instruments/images/no-image.svg
new file mode 100644
index 0000000..adb893b
--- /dev/null
+++ b/web-app/django/VIM/apps/instruments/static/instruments/images/no-image.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xml:space="preserve">
+  <defs></defs>
+  <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #FFFFFF; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)">
+    <path d="M 89 20.938 c -0.553 0 -1 0.448 -1 1 v 46.125 c 0 2.422 -1.135 4.581 -2.898 5.983 L 62.328 50.71 c -0.37 -0.379 -0.973 -0.404 -1.372 -0.057 L 45.058 64.479 l -2.862 -2.942 c -0.385 -0.396 -1.019 -0.405 -1.414 -0.02 c -0.396 0.385 -0.405 1.019 -0.02 1.414 l 3.521 3.62 c 0.37 0.38 0.972 0.405 1.373 0.058 l 15.899 -13.826 l 21.783 22.32 c -0.918 0.391 -1.928 0.608 -2.987 0.608 H 24.7 c -0.552 0 -1 0.447 -1 1 s 0.448 1 1 1 h 55.651 c 5.32 0 9.648 -4.328 9.648 -9.647 V 21.938 C 90 21.386 89.553 20.938 89 20.938 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #FFFFFF; fill-rule: nonzero; opacity: 1;" transform="matrix(1 0 0 1 0 0)" stroke-linecap="round" />
+    <path d="M 89.744 4.864 c -0.369 -0.411 -1.002 -0.444 -1.412 -0.077 l -8.363 7.502 H 9.648 C 4.328 12.29 0 16.618 0 21.938 v 46.125 c 0 4.528 3.141 8.328 7.356 9.361 l -7.024 6.3 c -0.411 0.368 -0.445 1.001 -0.077 1.412 c 0.198 0.22 0.471 0.332 0.745 0.332 c 0.238 0 0.476 -0.084 0.667 -0.256 l 88 -78.935 C 90.079 5.908 90.113 5.275 89.744 4.864 z M 9.648 14.29 h 68.091 L 34.215 53.33 L 23.428 42.239 c -0.374 -0.385 -0.985 -0.404 -1.385 -0.046 L 2 60.201 V 21.938 C 2 17.721 5.431 14.29 9.648 14.29 z M 2 68.063 v -5.172 l 20.665 -18.568 l 10.061 10.345 L 9.286 75.692 C 5.238 75.501 2 72.157 2 68.063 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #FFFFFF; fill-rule: nonzero; opacity: 1;" transform="matrix(1 0 0 1 0 0)" stroke-linecap="round" />
+    <path d="M 32.607 35.608 c -4.044 0 -7.335 -3.291 -7.335 -7.335 s 3.291 -7.335 7.335 -7.335 s 7.335 3.291 7.335 7.335 S 36.652 35.608 32.607 35.608 z M 32.607 22.938 c -2.942 0 -5.335 2.393 -5.335 5.335 s 2.393 5.335 5.335 5.335 s 5.335 -2.393 5.335 -5.335 S 35.549 22.938 32.607 22.938 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #FFFFFF; fill-rule: nonzero; opacity: 1;" transform="matrix(1 0 0 1 0 0)" stroke-linecap="round" />
+  </g>
+</svg>
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplayMode.js b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplayMode.js
index 6b5566b..f3fe63a 100644
--- a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplayMode.js
+++ b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplayMode.js
@@ -68,20 +68,17 @@ stdBtn.addEventListener("click", () => {
 
 
 function setMasonryView() {
-    // Wait for the DOM to be fully loaded
-    document.addEventListener("DOMContentLoaded", function () {
-        // Initialize Masonry
-        var masonryGrid = document.getElementById("masonry-view");
-        var masonry = new Masonry(masonryGrid, {
-            percentPosition: true, 
-        });
-    
-        // Initialize ImagesLoaded
-        var imgLoad = imagesLoaded(masonryGrid);
-    
-        // When all images are loaded, relayout Masonry
-        imgLoad.on("always", function () {
-            masonry.layout();
-        });
+    // Initialize Masonry
+    var masonryGrid = document.getElementById("masonry-view");
+    var masonry = new Masonry(masonryGrid, {
+        percentPosition: true, 
+    });
+
+    // Initialize ImagesLoaded
+    var imgLoad = imagesLoaded(masonryGrid);
+
+    // When all images are loaded, relayout Masonry
+    imgLoad.on("always", function () {
+        masonry.layout();
     });
 }
\ No newline at end of file
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/listView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
similarity index 91%
rename from web-app/django/VIM/apps/instruments/templates/instruments/listView.html
rename to web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
index 4ecad36..7b91460 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/listView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <div class="row" id="list-view" style="display:none;">
     {% for instrument in instruments %}
     
@@ -5,7 +7,8 @@
         <div class="row g-0 p-2">
             <div class="col-md-2 align-items-center list-img-container">
                 <a href="#" class="text-decoration-none">
-                    <img src="{{ instrument.avresource_set.first.url }}" class="img-fluid rounded" alt="instrument image">
+                    <img src="{{ instrument.avresource_set.first.url }}" class="img-fluid rounded" alt="instrument image"
+                        onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';">
                 </a>
             </div>
             <div class="col-md-10 card-body pb-2 pt-0">
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/masonryView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
similarity index 81%
rename from web-app/django/VIM/apps/instruments/templates/instruments/masonryView.html
rename to web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
index 84353b8..5b10882 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/masonryView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
@@ -1,9 +1,12 @@
+{% load static %}
+
 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4" id="masonry-view">
     {% for instrument in instruments %}
     <div class="col">
         <a href="#" class="text-decoration-none">
             <div class="card mb-3">
-                <img src="{{ instrument.avresource_set.first.url }}" class="card-img-top rounded p-2" alt="instrument image">
+                <img src="{{ instrument.avresource_set.first.url }}" class="card-img-top rounded p-2" alt="instrument image"
+                    onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';">
                 <div class="card-body pb-0 pt-0">
                     <p class="card-title text-center">
                         {% for instrumentname in instrument.instrumentname_set.all %}
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/stdView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
similarity index 86%
rename from web-app/django/VIM/apps/instruments/templates/instruments/stdView.html
rename to web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
index 50ee72a..022ef71 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/stdView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
@@ -1,3 +1,5 @@
+{% load static %}
+
 <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4" id="std-view" style="display:none;">
     {% for instrument in instruments %}
     <div class="col">
@@ -5,7 +7,7 @@
             <div class="card mb-3">
                 <div class="square-box">
                     <img src="{{ instrument.avresource_set.first.url }}" class="card-img-top rounded p-2 img-fluid"
-                        alt="instrument image">
+                        alt="instrument image" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';">
                 </div>
                 <div class="card-body pb-0 pt-0">
                     <p class="card-title text-center">
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 4dc6f7a..0e9db74 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -95,21 +95,26 @@ <h4>#####</h4>
             <div class="col-lg-9 pt-3 body-container">
                 <div class="navigation d-flex justify-content-between align-items-center">
                     <h4 class="ms-3 my-auto"><small>INSTRUMENT LIST</small></h4>
-                    <button type="button" class="btn me-2 px-1 py-0 square-btn justify-content-center display-btn" id="masonry-btn">
-                        <i class="bi bi-columns-gap"></i>
-                    </button>
-                    <button type="button" class="btn me-2 px-1 py-0 square-btn justify-content-center display-btn" id="list-btn" style="display:none;">
-                        <i class="bi bi-view-list"></i>
-                    </button>
-                    <button type="button" class="btn me-2 px-1 py-0 square-btn justify-content-center display-btn" id="std-btn" style="display:none;">
-                        <i class="bi bi-grid"></i>
-                    </button>
+                    <div class="d-flex">
+                        <button type="button" class="btn me-1 px-1 py-0 justify-content-center display-btn" id="page-setting-btn">
+                            <i class="bi bi-gear"></i>
+                        </button>
+                        <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>
+                        <button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="list-btn" style="display:none;">
+                            <i class="bi bi-view-list"></i>
+                        </button>
+                        <button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn" id="std-btn" style="display:none;">
+                            <i class="bi bi-grid"></i>
+                        </button>
+                    </div>
                 </div>
                 <hr>
                 <div class="container py-3" id="body-content">
-                    {% include "instruments/masonryView.html" %}
-                    {% include "instruments/listView.html" %}
-                    {% include "instruments/stdView.html" %}
+                    {% include "instruments/includes/masonryView.html" %}
+                    {% include "instruments/includes/listView.html" %}
+                    {% include "instruments/includes/stdView.html" %}
                 </div>
 
                 <div class="pagination-container">
diff --git a/web-app/django/VIM/apps/main/static/main/index.css b/web-app/django/VIM/apps/main/static/main/css/index.css
similarity index 100%
rename from web-app/django/VIM/apps/main/static/main/index.css
rename to web-app/django/VIM/apps/main/static/main/css/index.css
diff --git a/web-app/django/VIM/templates/base.html b/web-app/django/VIM/templates/base.html
index bdcefe1..8483bc0 100644
--- a/web-app/django/VIM/templates/base.html
+++ b/web-app/django/VIM/templates/base.html
@@ -22,17 +22,17 @@
       <div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
         <ul class="nav nav-underline col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
           <li class="nav-item">
-            <a href="/" class="nav-link nav-home px-2">
+            <a href="{% url "main:home" %}" class="nav-link nav-home px-2">
               <img src="{% static "images/logo.svg" %}" alt="vim icon">
               VIM
             </a>
           </li>
-          <li class="nav-item"><a href="/" class="nav-link px-2 text-decoration-none
+          <li class="nav-item"><a href="{% url "main:home" %}" class="nav-link px-2 text-decoration-none
             {% if active_tab == 'home' %}active{% endif %}">Home</a></li>
-          <li class="nav-item"><a href="/instruments/" class="nav-link px-2 text-decoration-none
+          <li class="nav-item"><a href="{% url "instrument-list" %}" class="nav-link px-2 text-decoration-none
             {% if active_tab == 'instruments' %}active{% endif %}">Instruments</a></li>
           <li class="nav-item"><a href="#" class="nav-link px-2 text-decoration-none">Search</a></li>
-          <li class="nav-item"><a href="/about/" class="nav-link px-2 text-decoration-none
+          <li class="nav-item"><a href="{% url "main:about" %}" class="nav-link px-2 text-decoration-none
             {% if active_tab == 'about' %}active{% endif %}">About</a></li>
         </ul>