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 cbd6a2f..155bee5 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
@@ -91,6 +91,83 @@ hr {
   background-color: #faf1e4;
 }
 
+.instrument-img-container:hover .instrument-img {
+  opacity: 0.3;
+}
+
+.instrument-img {
+  opacity: 1;
+  display: block;
+  width: 100%;
+  height: auto;
+  transition: 0.5s ease;
+  backface-visibility: hidden;
+}
+
+.instrument-img-container:hover .middle-button-group {
+  opacity: 1;
+}
+
+.middle-button-group {
+  transition: 0.5s ease;
+  opacity: 0;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-around;
+  width: max-content;
+}
+
+.middle-button-group .btn {
+  background-color: #435334;
+  border: 1px solid #435334;
+  color: white;
+  font-size: 14px;
+  margin-bottom: 6px;
+}
+
+.middle-button-group .btn:hover {
+  background-color: #9eb384;
+  border: 1px solid #9eb384;
+  color: white;
+}
+
+.modal-btn {
+  background-color: #435334;
+  border: 1px solid #435334;
+}
+
+.modal-btn:hover {
+  background-color: #9eb384;
+  border: 1px solid #9eb384;
+}
+
+#instrumentNameInModal {
+  font-weight: bold;
+  color: #435334;
+}
+
+#previewImages {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+#previewImages .col-3 {
+  margin-bottom: 15px;
+}
+
+#previewImages img {
+  width: 100%;
+  height: auto;
+  border-radius: 5px;
+}
+
 .card-title {
   color: #435334;
 }
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/ImageUpload.js b/web-app/django/VIM/apps/instruments/static/instruments/js/ImageUpload.js
new file mode 100644
index 0000000..87b9b52
--- /dev/null
+++ b/web-app/django/VIM/apps/instruments/static/instruments/js/ImageUpload.js
@@ -0,0 +1,69 @@
+function displaySelectedImage(event, elementId) {
+  const selectedImage = document.getElementById(elementId);
+  const fileInput = event.target;
+
+  if (fileInput.files && fileInput.files[0]) {
+    const reader = new FileReader();
+
+    reader.onload = function (e) {
+      selectedImage.src = e.target.result;
+    };
+
+    reader.readAsDataURL(fileInput.files[0]);
+  }
+}
+
+// Get the modal element
+var uploadImagesModal = document.getElementById('uploadImagesModal');
+
+uploadImagesModal.addEventListener('show.bs.modal', function (event) {
+  var button = event.relatedTarget;
+  var instrumentName = button.getAttribute('data-instrument-name');
+  var instrumentWikidataId = button.getAttribute('data-instrument-wikidata-id');
+  var instrumentNameInModal = uploadImagesModal.querySelector(
+    '#instrumentNameInModal'
+  );
+  instrumentNameInModal.textContent = instrumentName;
+
+  var instrumentWikidataIdInModal = uploadImagesModal.querySelector(
+    '#instrumentWikidataId'
+  );
+  instrumentWikidataIdInModal.textContent = instrumentWikidataId;
+});
+
+document
+  .getElementById('imageFiles')
+  .addEventListener('change', function (event) {
+    var previewContainer = document.getElementById('previewImages');
+    previewContainer.innerHTML = ''; // Clear existing previews
+
+    var files = event.target.files;
+
+    for (var i = 0; i < files.length; i++) {
+      var file = files[i];
+
+      // Ensure that the file is an image
+      if (file.type.startsWith('image/')) {
+        var reader = new FileReader();
+
+        reader.onload = (function (file) {
+          return function (e) {
+            var colDiv = document.createElement('div');
+            colDiv.className = 'col-3';
+
+            var img = document.createElement('img');
+            img.src = e.target.result;
+            img.className = 'img-thumbnail';
+            img.alt = file.name;
+            img.style.maxHeight = '150px';
+            img.style.objectFit = 'cover';
+
+            colDiv.appendChild(img);
+            previewContainer.appendChild(colDiv);
+          };
+        })(file);
+
+        reader.readAsDataURL(file);
+      }
+    }
+  });
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js b/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js
deleted file mode 100644
index c868191..0000000
--- a/web-app/django/VIM/apps/instruments/static/instruments/js/InstrumentDetail.js
+++ /dev/null
@@ -1,41 +0,0 @@
-document.addEventListener('DOMContentLoaded', function () {
-  const editButtons = document.querySelectorAll('.btn.edit');
-  const cancelButtons = document.querySelectorAll('.btn.cancel');
-  const publishButtons = document.querySelectorAll('.btn.publish');
-
-  editButtons.forEach((button) => {
-    button.addEventListener('click', function () {
-      const parentTd = this.closest('td');
-      parentTd.querySelector('.view-field').style.display = 'none';
-      parentTd.querySelector('.edit-field').style.display = 'inline-block';
-      parentTd.querySelector('.btn.cancel').style.display = 'inline-block';
-      parentTd.querySelector('.btn.publish').style.display = 'inline-block';
-      this.style.display = 'none';
-    });
-  });
-
-  cancelButtons.forEach((button) => {
-    button.addEventListener('click', function () {
-      const parentTd = this.closest('td');
-      parentTd.querySelector('.view-field').style.display = 'inline';
-      parentTd.querySelector('.edit-field').style.display = 'none';
-      parentTd.querySelector('.btn.edit').style.display = 'inline-block';
-      parentTd.querySelector('.btn.publish').style.display = 'none';
-      this.style.display = 'none';
-    });
-  });
-
-  publishButtons.forEach((button) => {
-    button.addEventListener('click', function () {
-      const parentTd = this.closest('td');
-      const newValue = parentTd.querySelector('.edit-field').value;
-      // TODO: request to update the value on the server
-      parentTd.querySelector('.view-field').textContent = newValue;
-      parentTd.querySelector('.view-field').style.display = 'inline';
-      parentTd.querySelector('.edit-field').style.display = 'none';
-      parentTd.querySelector('.btn.edit').style.display = 'inline-block';
-      this.style.display = 'none';
-      parentTd.querySelector('.btn.cancel').style.display = 'none';
-    });
-  });
-});
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html b/web-app/django/VIM/apps/instruments/templates/instruments/detail.html
deleted file mode 100644
index 2fe1dc7..0000000
--- a/web-app/django/VIM/apps/instruments/templates/instruments/detail.html
+++ /dev/null
@@ -1,157 +0,0 @@
-{% extends "base.html" %}
-
-{% load static %}
-
-{% block title %}
-  Instrument Detail
-{% endblock title %}
-
-{% block css_files %}
-  <link rel="stylesheet" href="{% static "instruments/css/index.css" %}" />
-  <link rel="stylesheet" href="{% static "instruments/css/detail.css" %}" />
-{% endblock css_files %}
-
-{% block content %}
-  <div class="instrument-detail">
-    <div class="detail-header">
-      <h2>
-        {% for instrumentname in instrument_names %}
-          {% if instrumentname.language.en_label == active_language.en_label %}
-            {{ instrumentname.name|title }}
-          {% endif %}
-        {% endfor %}
-      </h2>
-      <hr />
-    </div>
-    <div class="detail-body">
-      <div class="instrument-forms">
-        <table class="table table-sm table-striped table-bordered">
-          <tbody>
-            <tr>
-              <th scope="row">Wikidata ID</th>
-              <td>
-                <div class="name-form-item">
-                  <div class="name-field">
-                    <a class="view-field"
-                       href="https://www.wikidata.org/wiki/{{ instrument.wikidata_id }}"
-                       target="_blank">{{ instrument.wikidata_id }}</a>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">Hornbostel-Sachs Classification</th>
-              <td>
-                <div class="name-form-item">
-                  <div class="name-field">
-                    <span class="view-field">{{ instrument.hornbostel_sachs_class }}</span>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">MIMO Classification</th>
-              <td>
-                <div class="name-form-item">
-                  <div class="name-field">
-                    <a class="view-field"
-                       href="https://vocabulary.mimo-international.com/InstrumentsKeywords/en/page/{{ mimo_class }}"
-                       target="_blank">{{ instrument.mimo_class }}</a>
-                  </div>
-                </div>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">Instrument Names in Different Languages</th>
-              <td>
-                <table class="table table-sm table-striped table-bordered">
-                  <thead>
-                    <tr>
-                      <th scope="col">
-                        <span class="name-form-item">Language</span>
-                      </th>
-                      <th scope="col">
-                        <span class="name-form-item">Name</span>
-                      </th>
-                      <th scope="col">
-                        <span class="name-form-item">Source</span>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {% for instrumentname in instrument_names %}
-                      <tr>
-                        <td>
-                          <div class="name-form-item">
-                            <div class="name-field">
-                              <span class="view-field">{{ instrumentname.language.en_label }}</span>
-                              <input class="edit-field"
-                                     type="text"
-                                     value="{{ instrumentname.language.en_label }}" />
-                            </div>
-                            <div class="button-group">
-                              <button class="btn edit">Edit</button>
-                              <button class="btn cancel">Cancel</button>
-                              <button class="btn publish">Publish</button>
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <div class="name-form-item">
-                            <div class="name-field">
-                              <span class="view-field">{{ instrumentname.name }}</span>
-                              <input class="edit-field" type="text" value="{{ instrumentname.name }}" />
-                            </div>
-                            <div class="button-group">
-                              <button class="btn edit">Edit</button>
-                              <button class="btn cancel">Cancel</button>
-                              <button class="btn publish">Publish</button>
-                            </div>
-                          </div>
-                        </td>
-                        <td>
-                          <div class="name-form-item">
-                            <div class="name-field">
-                              <span class="view-field">{{ instrumentname.source_name }}</span>
-                              <input class="edit-field"
-                                     type="text"
-                                     value="{{ instrumentname.source_name }}" />
-                            </div>
-                            <div class="button-group">
-                              <button class="btn edit">Edit</button>
-                              <button class="btn cancel">Cancel</button>
-                              <button class="btn publish">Publish</button>
-                            </div>
-                          </div>
-                        </td>
-                      </tr>
-                    {% endfor %}
-                  </tbody>
-                </table>
-              </td>
-            </tr>
-            <tr>
-              <th scope="row">Image</th>
-              <td>
-                <div class="name-form-item">
-                  <div class="detail-image">
-                    <img src="{{ instrument.default_image.url }}"
-                         alt="{{ instrument.default_image.url }}"
-                         class="figure-img img-fluid rounded instrument-image" />
-                    <div class="detail-image-caption">
-                      <a href="{{ instrument.default_image.url }}" target="_blank">View image in full size</a>
-                    </div>
-                  </div>
-                </div>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </div>
-  </div>
-{% endblock content %}
-
-{% block scripts %}
-  <script src="{% static "instruments/js/InstrumentDetail.js" %}"></script>
-{% endblock scripts %}
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
index d920518..0149446 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/masonryView.html
@@ -4,11 +4,24 @@
      id="masonry-view">
   {% for instrument in instruments %}
     <div class="col">
-      <a href="{% url 'instrument-detail' instrument.pk %}"
-         class="text-decoration-none"
-         target="_blank">
+      <div class="text-decoration-none">
         <div class="card mb-3">
-          <img src="{% static instrument.thumbnail.url %}" class="card-img-top rounded p-2" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+          <div class="instrument-img-container">
+            <img src="{% static instrument.thumbnail.url %}" class="card-img-top rounded p-2 instrument-img" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+            <div class="middle-button-group">
+              <button type="button"
+                      class="btn"
+                      data-bs-toggle="modal"
+                      data-bs-target="#uploadImagesModal"
+                      data-instrument-name="{{ instrument.instrumentname_set.first.name|title }}"
+                      data-instrument-wikidata-id="{{ instrument.wikidata_id }}">
+                Upload new images
+              </button>
+              <a class="btn"
+                 href="https://www.wikidata.org/wiki/{{ instrument.wikidata_id }}"
+                 target="_blank">View on Wikidata</a>
+            </div>
+          </div>
           <div class="card-body pb-0 pt-0">
             <p class="card-title text-center notranslate ">
               {% for instrumentname in instrument.instrumentname_set.all %}
@@ -17,7 +30,7 @@
             </p>
           </div>
         </div>
-      </a>
+      </div>
     </div>
   {% endfor %}
 </div>
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
index a645148..ec08ba5 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/stdView.html
@@ -5,12 +5,25 @@
      style="display:none">
   {% for instrument in instruments %}
     <div class="col">
-      <a href="{% url 'instrument-detail' instrument.pk %}"
-         class="text-decoration-none"
-         target="_blank">
+      <div class="text-decoration-none">
         <div class="card mb-3">
           <div class="square-box">
-            <img src="{% static instrument.thumbnail.url %}" class="card-img-top rounded p-2 img-fluid" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+            <div class="instrument-img-container">
+              <img src="{% static instrument.thumbnail.url %}" class="card-img-top rounded p-2 img-fluid instrument-img" alt="instrument thumbnail" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';" />
+              <div class="middle-button-group">
+                <button type="button"
+                        class="btn"
+                        data-bs-toggle="modal"
+                        data-bs-target="#uploadImagesModal"
+                        data-instrument-name="{{ instrument.instrumentname_set.first.name|title }}"
+                        data-instrument-wikidata-id="{{ instrument.wikidata_id }}">
+                  Upload new images
+                </button>
+                <a class="btn"
+                   href="https://www.wikidata.org/wiki/{{ instrument.wikidata_id }}"
+                   target="_blank">View on Wikidata</a>
+              </div>
+            </div>
           </div>
           <div class="card-body pb-0 pt-0">
             <p class="card-title text-center notranslate">
@@ -20,7 +33,7 @@
             </p>
           </div>
         </div>
-      </a>
+      </div>
     </div>
   {% endfor %}
 </div>
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/uploadImgModal.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/uploadImgModal.html
new file mode 100644
index 0000000..caab7aa
--- /dev/null
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/uploadImgModal.html
@@ -0,0 +1,42 @@
+{% load static %}
+
+<!-- Modal Structure -->
+<div class="modal fade"
+     id="uploadImagesModal"
+     tabindex="-1"
+     aria-labelledby="uploadImagesModalLabel"
+     aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="uploadImagesModalLabel">Upload Images</h5>
+        <button type="button"
+                class="btn-close"
+                data-bs-dismiss="modal"
+                aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        <form id="imageUploadForm" enctype="multipart/form-data">
+          {% csrf_token %}
+          <input type="hidden"
+                 id="instrumentWikidataId"
+                 name="wikidata_id"
+                 value="{{ wikidata_id }}" />
+          <div class="mb-3">
+            <label for="imageFiles" class="form-label">
+              Select Images for <span id="instrumentNameInModal"></span>
+            </label>
+            <input class="form-control"
+                   type="file"
+                   id="imageFiles"
+                   name="images"
+                   accept="image/*"
+                   multiple />
+          </div>
+          <div id="previewImages" class="row g-2"></div>
+          <button type="submit" class="btn btn-primary modal-btn">Upload</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</div>
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 42bc80a..b83aefa 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -103,6 +103,8 @@ <h4 class="ms-3 me-2 my-auto">
             </div>
           </div>
           <div class="d-flex">
+            {% include "instruments/includes/uploadImgModal.html" %}
+
             <button type="button"
                     class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn"
                     id="masonry-btn"
@@ -205,4 +207,5 @@ <h4 class="ms-3 me-2 my-auto">
   <script src="https://unpkg.com/imagesloaded@5/imagesloaded.pkgd.min.js"></script>
   <script src="{% static "instruments/js/DisplaySettings.js" %}"></script>
   <script src="{% static "instruments/js/PaginationTools.js" %}"></script>
+  <script src="{% static "instruments/js/ImageUpload.js" %}"></script>
 {% endblock scripts %}
diff --git a/web-app/django/VIM/apps/instruments/views/instrument_detail.py b/web-app/django/VIM/apps/instruments/views/instrument_detail.py
deleted file mode 100644
index 6892e7e..0000000
--- a/web-app/django/VIM/apps/instruments/views/instrument_detail.py
+++ /dev/null
@@ -1,29 +0,0 @@
-from django.views.generic import DetailView
-from VIM.apps.instruments.models import Instrument, Language
-
-
-class InstrumentDetail(DetailView):
-    """
-    Displays details of a specific instrument.
-    """
-
-    model = Instrument
-    template_name = "instruments/detail.html"
-    context_object_name = "instrument"
-
-    def get_context_data(self, **kwargs):
-        context = super().get_context_data(**kwargs)
-
-        # Query the instrument names in all languages
-        context["instrument_names"] = (
-            context["instrument"].instrumentname_set.all().select_related("language")
-        )
-
-        # Get the active language
-        active_language_en = self.request.session.get("active_language_en", None)
-        context["active_language"] = (
-            Language.objects.get(en_label=active_language_en)
-            if active_language_en
-            else Language.objects.get(en_label="english")  # default in English
-        )
-        return context
diff --git a/web-app/django/VIM/apps/instruments/views/instrument_list.py b/web-app/django/VIM/apps/instruments/views/instrument_list.py
index f6b2fa0..8e92089 100644
--- a/web-app/django/VIM/apps/instruments/views/instrument_list.py
+++ b/web-app/django/VIM/apps/instruments/views/instrument_list.py
@@ -1,8 +1,10 @@
 from django.db.models import Prefetch
 from django.db.models.query import QuerySet
+from django.views.decorators.http import require_POST
+from django.shortcuts import get_object_or_404, redirect
 from django.views.generic import ListView
-from VIM.apps.instruments.models import Instrument, Language, InstrumentName
 import requests
+from VIM.apps.instruments.models import Instrument, Language, InstrumentName
 
 
 class InstrumentList(ListView):
diff --git a/web-app/django/VIM/urls.py b/web-app/django/VIM/urls.py
index e225526..08e6910 100644
--- a/web-app/django/VIM/urls.py
+++ b/web-app/django/VIM/urls.py
@@ -19,14 +19,12 @@
 from django.urls import path, include
 from django.conf import settings
 from VIM.apps.instruments.views.instrument_list import InstrumentList
-from VIM.apps.instruments.views.instrument_detail import InstrumentDetail
 from django.conf.urls.i18n import i18n_patterns
 
 urlpatterns = i18n_patterns(
     path("admin/", admin.site.urls),
     path("", include("VIM.apps.main.urls", namespace="main")),
     path("instruments/", InstrumentList.as_view(), name="instrument-list"),
-    path("instrument/<int:pk>/", InstrumentDetail.as_view(), name="instrument-detail"),
     prefix_default_language=False,
 )