diff --git a/.djlintrc b/.djlintrc
new file mode 100644
index 0000000..2d4ed1f
--- /dev/null
+++ b/.djlintrc
@@ -0,0 +1,20 @@
+{
+  "exclude": [
+    "migrations/*"
+  ],
+  "extension": [
+    "html"
+  ],
+  "indent": 2,
+  "blank_line_after_tag": "load,extends,include,endblock",
+  "ignore": "H006,H016,H021,H025,H030,H031",
+  "close_void_tags": true,
+  "format_css": true,
+  "css": {
+    "indent_size": 2
+  },
+  "format_js": true,
+  "js": {
+    "indent_size": 2
+  }
+}
diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..187d4cc
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,19 @@
+# editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+# TypeScript and JavaScript files
+[*.{ts,tsx,js,jsx}]
+indent_size = 2
+quote_type = single
+
+[*.css]
+indent_size = 2
+quote_type = single
diff --git a/.github/workflows/frontend_format.yml b/.github/workflows/frontend_format.yml
new file mode 100644
index 0000000..d4bb660
--- /dev/null
+++ b/.github/workflows/frontend_format.yml
@@ -0,0 +1,13 @@
+name: frontend-format
+on: [push, pull_request]
+jobs:
+  format-test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Run Prettier
+        run: npx prettier --check "**/*.css" "**/*.js" --trailing-comma es5
+      - name: Install djlint
+        run: npm install -g djlint
+      - name: Run djlint
+        run: djlint . --check --extension html --exclude "migrations/*"
diff --git a/prettierrc.yml b/prettierrc.yml
new file mode 100644
index 0000000..2206ae1
--- /dev/null
+++ b/prettierrc.yml
@@ -0,0 +1,12 @@
+# .prettierrc or .prettierrc.yaml
+trailingComma: "es5"
+tabWidth: 2
+semi: true
+singleQuote: true
+overrides:
+  - files: "*.css"
+    options:
+      singleQuote: true
+  - files: "*.js"
+    options:
+      trailingComma: "es5"
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 954acba..95c42cd 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
@@ -1,138 +1,137 @@
-
-@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css");
+@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css');
 
 h4 {
-    color: #435334;
-    font-size: 20px;
-    font-weight: 700;
-    margin-bottom: 0;
+  color: #435334;
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 0;
 }
 
 h5 {
-    color: #435334;
+  color: #435334;
 }
 
 hr {
-    color: #435334 !important;
-    margin-top: 0;
+  color: #435334 !important;
+  margin-top: 0;
 }
 
 /* sidebar */
 .sidebar-container {
-    background-color: white;
-    border: 3px solid #9EB384;
-    border-radius: 30px;
-    height: auto !important;
+  background-color: white;
+  border: 3px solid #9eb384;
+  border-radius: 30px;
+  height: auto !important;
 }
 
 .info-block {
-    background-color: #FAF1E4;
-    border: 1.5px solid #CEDEBD;
-    border-radius: 10px;
-    height: auto !important;
+  background-color: #faf1e4;
+  border: 1.5px solid #cedebd;
+  border-radius: 10px;
+  height: auto !important;
 }
 
 .list-group-item {
-    border: none !important;
-    background-color: transparent !important;
-    color: #435334;
+  border: none !important;
+  background-color: transparent !important;
+  color: #435334;
 }
 
 .list-group-item:hover {
-    color: #9EB384;
+  color: #9eb384;
 }
 
 .selected {
-    color: #435334;
-    font-weight: bold;
+  color: #435334;
+  font-weight: bold;
 }
 
-.toggle-more{
-    color: #0b0f07;
+.toggle-more {
+  color: #0b0f07;
 }
 
 .toggle-more:hover {
-    cursor: pointer;
-    color: #9EB384;
+  cursor: pointer;
+  color: #9eb384;
 }
 
 /* body */
 .body-container {
-    background-color: white;
-    border: 3px solid #9EB384;
-    border-radius: 30px;
+  background-color: white;
+  border: 3px solid #9eb384;
+  border-radius: 30px;
 }
 
 .display-btn {
-    font-weight: bold;
-    color: #9EB384;
-    width: 30px;
-    border: none;
+  font-weight: bold;
+  color: #9eb384;
+  width: 30px;
+  border: none;
 }
 
 .masonry-btn {
-    font-size: 20px;
+  font-size: 20px;
 }
 
 .std-btn {
-    font-size: 23px;
+  font-size: 23px;
 }
 
 .highlighted-btn {
-    color: #435334;
+  color: #435334;
 }
 
 .card {
-    background-color: #FAF1E4;
+  background-color: #faf1e4;
 }
 
 .card-title {
-    color: #435334;
+  color: #435334;
 }
 
 .pagination-container {
-    color: #435334;
+  color: #435334;
 }
 
 .page-link {
-    color: #435334;
+  color: #435334;
 }
 
 .page-link:hover {
-    color: #9EB384;
+  color: #9eb384;
 }
 
 /* list view */
 .list-item-container {
-    min-height: 200px; 
-    max-height: 300px;
-    overflow: hidden;
+  min-height: 200px;
+  max-height: 300px;
+  overflow: hidden;
 }
 
 .card-title h5:hover {
-    color: #9EB384;
+  color: #9eb384;
 }
 
 .more-info {
-    color: #435334;
+  color: #435334;
 }
 
 .more-info:hover {
-    border: 1px solid #435334;
+  border: 1px solid #435334;
 }
 
 /* standard view */
 .square-box {
-    position: relative;
-    padding-top: 100%;
-    overflow: hidden;
+  position: relative;
+  padding-top: 100%;
+  overflow: hidden;
 }
 
 .square-box img {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-}
\ No newline at end of file
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
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
index bbe426a..9706d91 100644
--- a/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css
+++ b/web-app/django/VIM/apps/instruments/static/instruments/css/pagination.css
@@ -1,41 +1,41 @@
-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;
-}
-
-.view-per-page
-.text-start, .text-end {
-    color: #435334;
-    margin: 0 0.3rem;
-}
-
-.col-form-label {
-    color: #435334;
-}
\ No newline at end of file
+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;
+}
+
+.view-per-page .text-start,
+.text-end {
+  color: #435334;
+  margin: 0 0.3rem;
+}
+
+.col-form-label {
+  color: #435334;
+}
diff --git a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js
index 36bb26c..0e68e00 100644
--- a/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js
+++ b/web-app/django/VIM/apps/instruments/static/instruments/js/DisplaySettings.js
@@ -1,34 +1,34 @@
-const masonryBtn = document.getElementById("masonry-btn");
-const stdBtn = document.getElementById("std-btn");
+const masonryBtn = document.getElementById('masonry-btn');
+const stdBtn = document.getElementById('std-btn');
 
-const masonryView = document.getElementById("masonry-view");
-const stdView = document.getElementById("std-view");
+const masonryView = document.getElementById('masonry-view');
+const stdView = document.getElementById('std-view');
 
 updateDisplayMode();
 
 function setDisplayMode(displayMode) {
-  localStorage.setItem("displayMode", displayMode);
+  localStorage.setItem('displayMode', displayMode);
 }
 
 function getDisplayMode() {
-  return localStorage.getItem("displayMode");
+  return localStorage.getItem('displayMode');
 }
 
 function updateDisplayMode() {
-  const currentDisplayMode = getDisplayMode() || "masonry";
+  const currentDisplayMode = getDisplayMode() || 'masonry';
   switch (currentDisplayMode) {
-    case "masonry":
+    case 'masonry':
       setMasonryView();
-      masonryView.style.display = "";
-      stdView.style.display = "none";
-      masonryBtn.classList.toggle("highlighted-btn");
-      stdBtn.classList.remove("highlighted-btn");
+      masonryView.style.display = '';
+      stdView.style.display = 'none';
+      masonryBtn.classList.toggle('highlighted-btn');
+      stdBtn.classList.remove('highlighted-btn');
       break;
-    case "standard":
-      masonryView.style.display = "none";
-      stdView.style.display = "";
-      stdBtn.classList.toggle("highlighted-btn");
-      masonryBtn.classList.remove("highlighted-btn");
+    case 'standard':
+      masonryView.style.display = 'none';
+      stdView.style.display = '';
+      stdBtn.classList.toggle('highlighted-btn');
+      masonryBtn.classList.remove('highlighted-btn');
       break;
     default:
       break;
@@ -36,23 +36,23 @@ function updateDisplayMode() {
 }
 
 // Switch to the next mode
-masonryBtn.addEventListener("click", () => {
-  if (getDisplayMode() !== "masonry") {
-    setDisplayMode("masonry");
+masonryBtn.addEventListener('click', () => {
+  if (getDisplayMode() !== 'masonry') {
+    setDisplayMode('masonry');
     updateDisplayMode();
   }
 });
 
-stdBtn.addEventListener("click", () => {
-  if (getDisplayMode() !== "standard") {
-    setDisplayMode("standard");
+stdBtn.addEventListener('click', () => {
+  if (getDisplayMode() !== 'standard') {
+    setDisplayMode('standard');
     updateDisplayMode();
   }
 });
 
 function setMasonryView() {
   // Initialize Masonry
-  var masonryGrid = document.getElementById("masonry-view");
+  var masonryGrid = document.getElementById('masonry-view');
   var masonry = new Masonry(masonryGrid, {
     percentPosition: true,
   });
@@ -61,34 +61,34 @@ function setMasonryView() {
   var imgLoad = imagesLoaded(masonryGrid);
 
   // When all images are loaded, relayout Masonry
-  imgLoad.on("always", function () {
+  imgLoad.on('always', function () {
     masonry.layout();
   });
 }
 
 // HBS facet settings
-const items = document.querySelectorAll(".list-group-item");
+const items = document.querySelectorAll('.list-group-item');
 
 updateHbsFacet();
 
 function updateHbsFacet() {
   const url = new URL(window.location.href);
-  const selectedHbsFacet = url.searchParams.get("hbs_facet") || "";
-  localStorage.setItem("selectedHbsFacet", selectedHbsFacet);
+  const selectedHbsFacet = url.searchParams.get('hbs_facet') || '';
+  localStorage.setItem('selectedHbsFacet', selectedHbsFacet);
   items.forEach((item) => {
-    current_item = item.getAttribute("current-value");
+    current_item = item.getAttribute('current-value');
     if (current_item === selectedHbsFacet) {
-      item.classList.add("selected");
+      item.classList.add('selected');
     } else {
-      item.classList.remove("selected");
+      item.classList.remove('selected');
     }
   });
 }
 
 items.forEach((item) => {
-  item.addEventListener("click", function () {
-    current_item = item.getAttribute("current-value");
-    localStorage.setItem("selectedHbsFacet", current_item);
+  item.addEventListener('click', function () {
+    current_item = item.getAttribute('current-value');
+    localStorage.setItem('selectedHbsFacet', current_item);
     updateHbsFacet();
   });
 });
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 d31ed15..a47d8b3 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,77 +1,77 @@
-const instrumentNumElement = document.getElementById('instrumentNum');
-const instrumentNum = instrumentNumElement.getAttribute('data-instrument-num');
-const pageNumInput = document.getElementById("page-num");
-const pageBtns = document.querySelectorAll(".page-link");
-const optionRadios = document.querySelectorAll(".option-radio");
-
-updatePaginationSetting();
-
-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);
-}
-
-function setPage(pageNum) {
-    localStorage.setItem("page", pageNum);
-}
-
-function getPaginateBy() {
-    return localStorage.getItem("paginate_by");
-}
-
-function getPage() {
-    return localStorage.getItem("page");
-}
-
-optionRadios.forEach(function(radio) {
-    if (radio.id == getPaginateBy()) {
-        radio.checked = true;   
-    }
-});
-
-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", () => {
-        btn.href = btn.href + "&paginate_by=" + getPaginateBy();
-    });
-});
-
-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
+const instrumentNumElement = document.getElementById('instrumentNum');
+const instrumentNum = instrumentNumElement.getAttribute('data-instrument-num');
+const pageNumInput = document.getElementById('page-num');
+const pageBtns = document.querySelectorAll('.page-link');
+const optionRadios = document.querySelectorAll('.option-radio');
+
+updatePaginationSetting();
+
+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);
+}
+
+function setPage(pageNum) {
+  localStorage.setItem('page', pageNum);
+}
+
+function getPaginateBy() {
+  return localStorage.getItem('paginate_by');
+}
+
+function getPage() {
+  return localStorage.getItem('page');
+}
+
+optionRadios.forEach(function (radio) {
+  if (radio.id == getPaginateBy()) {
+    radio.checked = true;
+  }
+});
+
+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', () => {
+    btn.href = btn.href + '&paginate_by=' + getPaginateBy();
+  });
+});
+
+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;
+}
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
index c111634..66d3e7a 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/listView.html
@@ -2,34 +2,30 @@
 
 <div class="row" id="list-view" style="display:none;">
   {% for instrument in instruments %}
-    
-  <div class="card mb-3 px-0 list-item-container">
-    <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"
-            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">
-        <a href="#" class="text-decoration-none">
-          <h5 class="card-title notranslate">
-            {% for instrumentname in instrument.instrumentname_set.all %}
-              {% if instrumentname.language.en_label == active_language.en_label %}
-                {{ instrumentname.name|title }}
-              {% endif %}
-            {% endfor %}
-          </h5>
-        </a>
-        <p class="card-text">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta neque et eleifend congue. Nunc pellentesque, quam nec porttitor commodo, lectus ipsum efficitur neque, et convallis nisi ipsum at orci. Ut mattis ultrices purus et pellentesque. Vivamus suscipit est non tortor blandit, vitae varius lectus tempor. Quisque ullamcorper turpis non erat luctus, ut luctus nibh ultrices. Aenean a nunc libero. In vestibulum eros ex, non tristique elit placerat quis. Etiam ornare neque est. Integer sed orci lorem. Suspendisse potenti. Integer venenatis tempus auctor. Duis in tincidunt nulla. Nulla metus dui, congue nec facilisis rhoncus, porta nec magna.
-        </p>
-        <a class="more-info btn btn-sm btn-warning"  href="#" role="button">
-          <i class="bi bi-info-circle"></i>
-          <span>More information</span>
-        </a>
+    <div class="card mb-3 px-0 list-item-container">
+      <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" 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">
+          <a href="#" class="text-decoration-none">
+            <h5 class="card-title notranslate">
+              {% for instrumentname in instrument.instrumentname_set.all %}
+                {% if instrumentname.language.en_label == active_language.en_label %}{{ instrumentname.name|title }}{% endif %}
+              {% endfor %}
+            </h5>
+          </a>
+          <p class="card-text">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porta neque et eleifend congue. Nunc pellentesque, quam nec porttitor commodo, lectus ipsum efficitur neque, et convallis nisi ipsum at orci. Ut mattis ultrices purus et pellentesque. Vivamus suscipit est non tortor blandit, vitae varius lectus tempor. Quisque ullamcorper turpis non erat luctus, ut luctus nibh ultrices. Aenean a nunc libero. In vestibulum eros ex, non tristique elit placerat quis. Etiam ornare neque est. Integer sed orci lorem. Suspendisse potenti. Integer venenatis tempus auctor. Duis in tincidunt nulla. Nulla metus dui, congue nec facilisis rhoncus, porta nec magna.
+          </p>
+          <a class="more-info btn btn-sm btn-warning"  href="#" role="button">
+            <i class="bi bi-info-circle"></i>
+            <span>More information</span>
+          </a>
+        </div>
       </div>
     </div>
-  </div>
   {% endfor %}
-</div>
\ No newline at end of file
+</div>
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 d5af0a9..f238175 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
@@ -1,23 +1,23 @@
 {% load static %}
 
-<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4" id="masonry-view">
+<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="https://wikidata.org/wiki/{{ instrument.wikidata_id}}" class="text-decoration-none" target="_blank">
-      <div class="card mb-3">
-        <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 notranslate ">
-            {% for instrumentname in instrument.instrumentname_set.all %}
-              {% if instrumentname.language.en_label == active_language.en_label %}
-                {{ instrumentname.name|title }}
-              {% endif %}
-            {% endfor %}
-          </p>
+    <div class="col">
+      <a href="https://wikidata.org/wiki/{{ instrument.wikidata_id }}"
+         class="text-decoration-none"
+         target="_blank">
+        <div class="card mb-3">
+          <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 notranslate ">
+              {% for instrumentname in instrument.instrumentname_set.all %}
+                {% if instrumentname.language.en_label == active_language.en_label %}{{ instrumentname.name|title }}{% endif %}
+              {% endfor %}
+            </p>
+          </div>
         </div>
-      </div>
-    </a>
-  </div>
+      </a>
+    </div>
   {% endfor %}
-</div>
\ No newline at end of file
+</div>
diff --git a/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html b/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html
index f38d908..de01ead 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/includes/paginationOptions.html
@@ -1,32 +1,24 @@
-<div
-  class="me-2 mb-1 d-flex align-items-center justify-content-end view-per-page"
->
+<div class="me-2 mb-1 d-flex align-items-center justify-content-end view-per-page">
   <span class="text-start">View</span>
-  <input
-    type="radio"
-    class="btn-check option-radio"
-    name="options-group2"
-    id="20"
-    autocomplete="off"
-  />
+  <input type="radio"
+         class="btn-check option-radio"
+         name="options-group2"
+         id="20"
+         autocomplete="off" />
   <label class="btn" title="View 20 entries per page" 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"
-  />
+  <input type="radio"
+         class="btn-check option-radio"
+         name="options-group2"
+         id="50"
+         autocomplete="off" />
   <label class="btn" title="View 50 entries per page" 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"
-  />
+  <input type="radio"
+         class="btn-check option-radio"
+         name="options-group2"
+         id="100"
+         autocomplete="off" />
   <label class="btn" title="View 100 entries per page" for="100">100</label>
   <span class="text-end">per page</span>
 </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 974e85d..f0f5484 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
@@ -1,25 +1,26 @@
 {% 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;">
+<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">
-    <a href="https://wikidata.org/wiki/{{ instrument.wikidata_id}}" class="text-decoration-none" target="_blank">
-      <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" onerror="this.onerror=null;this.src='{% static "instruments/images/no-image.svg" %}';">
+    <div class="col">
+      <a href="https://wikidata.org/wiki/{{ instrument.wikidata_id }}"
+         class="text-decoration-none"
+         target="_blank">
+        <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" 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 notranslate">
+              {% for instrumentname in instrument.instrumentname_set.all %}
+                {% if instrumentname.language.en_label == active_language.en_label %}{{ instrumentname.name|title }}{% endif %}
+              {% endfor %}
+            </p>
+          </div>
         </div>
-        <div class="card-body pb-0 pt-0">
-          <p class="card-title text-center notranslate">
-            {% for instrumentname in instrument.instrumentname_set.all %}
-              {% if instrumentname.language.en_label == active_language.en_label %}
-                {{ instrumentname.name|title }}
-              {% endif %}
-            {% endfor %}
-          </p>
-        </div>
-      </div>
-    </a>
-  </div>
+      </a>
+    </div>
   {% endfor %}
-</div>
\ No newline at end of file
+</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 0cd959a..9cf8114 100644
--- a/web-app/django/VIM/apps/instruments/templates/instruments/index.html
+++ b/web-app/django/VIM/apps/instruments/templates/instruments/index.html
@@ -1,40 +1,43 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-Instrument List
-{% endblock %}
+  Instrument List
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" href="{% static "instruments/css/index.css" %}">
-<link rel="stylesheet" href="{% static "instruments/css/pagination.css" %}">
-{% endblock %}
+  <link rel="stylesheet" href="{% static "instruments/css/index.css" %}" />
+  <link rel="stylesheet" href="{% static "instruments/css/pagination.css" %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container py-5">
-  <div class="row">
-    <div class="col-xl-3">
-      <div class="px-3 pt-3 me-1 mb-3 sidebar-container">
-        <div class="info-block p-2 mb-3 notranslate">
-          {% if active_language.en_label == "french"%}
-            <h4>Système Hornbostel-Sachs</h4>
-          {% else %}
-            <h4>Hornbostel-Sachs Classification</h4>
-          {% endif  %}
-          <hr>
-          <ul class="list-group">
-            {% for hbs_facet_item in hbs_facets %}
-              <a href="?hbs_facet={{ hbs_facet_item.value }}" class="text-decoration-none">
-                <li class="list-group-item d-flex justify-content-between p-0" current-value="{{ hbs_facet_item.value }}">
-                  {% if hbs_facet_item.name == '' %}
-                    <span class="text-start">Unclassified</span>
-                  {% else %}
-                    <span class="text-start">{{ hbs_facet_item.value }} - {{ hbs_facet_item.name }} ({{ hbs_facet_item.count}})</span>
-                  {% endif %}
-                </li>
-              </a>
-            {% endfor %}
-            {% comment %} <div class="collapse" id="sidebar-more-0">
+  <div class="container py-5">
+    <div class="row">
+      <div class="col-xl-3">
+        <div class="px-3 pt-3 me-1 mb-3 sidebar-container">
+          <div class="info-block p-2 mb-3 notranslate">
+            {% if active_language.en_label == "french" %}
+              <h4>Système Hornbostel-Sachs</h4>
+            {% else %}
+              <h4>Hornbostel-Sachs Classification</h4>
+            {% endif %}
+            <hr />
+            <ul class="list-group">
+              {% for hbs_facet_item in hbs_facets %}
+                <a href="?hbs_facet={{ hbs_facet_item.value }}"
+                   class="text-decoration-none">
+                  <li class="list-group-item d-flex justify-content-between p-0"
+                      current-value="{{ hbs_facet_item.value }}">
+                    {% if hbs_facet_item.name == '' %}
+                      <span class="text-start">Unclassified</span>
+                    {% else %}
+                      <span class="text-start">{{ hbs_facet_item.value }} - {{ hbs_facet_item.name }} ({{ hbs_facet_item.count }})</span>
+                    {% endif %}
+                  </li>
+                </a>
+              {% endfor %}
+              {% comment %} <div class="collapse" id="sidebar-more-0">
               <li class="list-group-item d-flex justify-content-between p-0">
                 <span class="text-start">###</span>
                 <span class="text-end">###</span>
@@ -42,13 +45,13 @@ <h4>Hornbostel-Sachs Classification</h4>
             </div>
             <div class="toggle-more d-flex justify-content-center" data-bs-toggle="collapse" data-bs-target="#sidebar-more-0" aria-expanded="false">
               <i class="bi bi-chevron-double-down ps-1"></i>
-            </div> {% endcomment %}
-          </ul>
-        </div>
-        <h6 style="color: grey;" class="mb-3">More facet search coming...</h6>
-        {% comment %} <div class="info-block p-2 mb-3">
+              </div> {% endcomment %}
+            </ul>
+          </div>
+          <h6 style="color: grey;" class="mb-3">More facet search coming...</h6>
+          {% comment %} <div class="info-block p-2 mb-3">
           <h4>######</h4>
-          <hr>
+          <hr />
           <ul class="list-group list-group-flush">
             <li class="list-group-item d-flex justify-content-between p-0">
               <span class="text-start">###</span>
@@ -67,118 +70,131 @@ <h4>######</h4>
               <span class="text-end">###</span>
             </li>
           </ul>
-        </div> {% endcomment %}
-      </div>
-  </div>
-
-  <div class="col-xl-9 pt-3 body-container">
-    <div class="navigation d-flex justify-content-between align-items-center">
-      <div class="d-flex">
-        <h4 class="ms-3 me-2 my-auto"><small>INSTRUMENT LIST</small></h4>
-        <div class="dropdown mx-2 notranslate" id="instrument-language-element">
-          <button class="btn btn-warning dropdown-toggle position-relative py-0"
-                  type="button"
-                  aria-expanded="false"
-                  data-bs-toggle="dropdown"
-                  data-bs-title="Instrument name language">
-            {{ active_language.autonym|title }}
-          </button>
-          <ul class="dropdown-menu">
-            {% for language in languages %}
-              <li><a class="dropdown-item" href="?language={{ language.en_label }}">{{ language.autonym|title }}</a></li>
-            {% endfor %}
-          </ul>
+          </div> {% endcomment %}
         </div>
       </div>
+      <div class="col-xl-9 pt-3 body-container">
+        <div class="navigation d-flex justify-content-between align-items-center">
+          <div class="d-flex">
+            <h4 class="ms-3 me-2 my-auto">
+              <small>INSTRUMENT LIST</small>
+            </h4>
+            <div class="dropdown mx-2 notranslate" id="instrument-language-element">
+              <button class="btn btn-warning dropdown-toggle position-relative py-0"
+                      type="button"
+                      aria-expanded="false"
+                      data-bs-toggle="dropdown"
+                      data-bs-title="Instrument name language">{{ active_language.autonym|title }}</button>
+              <ul class="dropdown-menu">
+                {% for language in languages %}
+                  <li>
+                    <a class="dropdown-item" href="?language={{ language.en_label }}">{{ language.autonym|title }}</a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </div>
+          </div>
+          <div class="d-flex">
+            <button type="button"
+                    class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn"
+                    id="masonry-btn"
+                    title="Masonry View"
+                    aria-label="Masonry View"
+                    aria-pressed="true">
+              <i class="bi bi-columns-gap"></i>
+            </button>
+            <button type="button"
+                    class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn"
+                    id="std-btn"
+                    title="Standard View"
+                    aria-label="Standard View">
+              <i class="bi bi-grid"></i>
+            </button>
+          </div>
+        </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 align-items-center 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
+              {% if hbs_facet_name %}for{% endif %}
+              <strong>{{ hbs_facet_name }}</strong>
+            </span>
+            {% include "instruments/includes/paginationOptions.html" %}
 
-      <div class="d-flex">
-        <button type="button" class="btn me-1 px-1 py-0 justify-content-center display-btn masonry-btn"
-                id="masonry-btn" title="Masonry View"
-                aria-label="Masonry View"
-                aria-pressed="true">
-          <i class="bi bi-columns-gap"></i>
-        </button>
-        <button type="button" class="btn me-2 px-1 py-0 justify-content-center display-btn std-btn"
-                id="std-btn" title="Standard View"
-                aria-label="Standard View">
-          <i class="bi bi-grid"></i>
-        </button>
-      </div>
-    </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 align-items-center 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
-          {% if hbs_facet_name %}
-            for
-          {% endif %}
-          <strong>{{ hbs_facet_name }}</strong>
-        </span>
-        {% include "instruments/includes/paginationOptions.html" %}
-      </div>
-      {% include "instruments/includes/masonryView.html" %}
-      {% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %}
-      {% include "instruments/includes/stdView.html" %}
-    </div>
+          </div>
+          {% include "instruments/includes/masonryView.html" %}
 
-    <div class="mb-3 d-flex flex-md-row flex-column align-items-center justify-content-center">
-      {% include "instruments/includes/paginationOptions.html" %}
-      <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 %}
+          {% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %}
+          {% include "instruments/includes/stdView.html" %}
 
-          <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>
+        </div>
+        <div class="mb-3 d-flex flex-md-row flex-column align-items-center justify-content-center">
+          {% include "instruments/includes/paginationOptions.html" %}
 
-          {% 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 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>
+              {% 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>
   </div>
-</div>
-
-{% endblock %}
+{% endblock content %}
 
-{% block script %}
-<script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
-<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>
-{% endblock %}
+{% block scripts %}
+  <script src="https://cdn.jsdelivr.net/npm/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
+  <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>
+{% endblock scripts %}
diff --git a/web-app/django/VIM/apps/main/static/main/css/about.css b/web-app/django/VIM/apps/main/static/main/css/about.css
index b05f3a5..2c88c07 100644
--- a/web-app/django/VIM/apps/main/static/main/css/about.css
+++ b/web-app/django/VIM/apps/main/static/main/css/about.css
@@ -1,14 +1,14 @@
 .content-container h4 {
-    color: #435334;
+  color: #435334;
 }
 
 .content-container p {
-    color: #435334;
-    font-size: 1rem;
-    text-align: justify
+  color: #435334;
+  font-size: 1rem;
+  text-align: justify;
 }
 
 .content-container a {
-    text-decoration: none;
-    color: #9EB384;
-}
\ No newline at end of file
+  text-decoration: none;
+  color: #9eb384;
+}
diff --git a/web-app/django/VIM/apps/main/static/main/css/index.css b/web-app/django/VIM/apps/main/static/main/css/index.css
index aad667f..5a36a16 100644
--- a/web-app/django/VIM/apps/main/static/main/css/index.css
+++ b/web-app/django/VIM/apps/main/static/main/css/index.css
@@ -1,40 +1,39 @@
 .content-container {
-    height: 80vh;
+  height: 80vh;
 }
 
 .content-container h1 {
-    margin-bottom: 1rem;
-    font-size: 3rem;
-    color: #435334;
+  margin-bottom: 1rem;
+  font-size: 3rem;
+  color: #435334;
 }
 
 .content-container p {
-    margin-bottom: 2rem;
-    font-size: 1.5rem;
-    line-height: 1.5;
-    color: #435334;
+  margin-bottom: 2rem;
+  font-size: 1.5rem;
+  line-height: 1.5;
+  color: #435334;
 }
 
 .start-btn {
-    font-family: 'Noto Sans', sans-serif;
+  font-family: 'Noto Sans', sans-serif;
 }
 
 .start-btn {
-    padding: 1rem 3rem;
-    font-size: 1rem;
-    border: none;
-    color: #435334;
-    cursor: pointer;
-    border-radius: 50px;
+  padding: 1rem 3rem;
+  font-size: 1rem;
+  border: none;
+  color: #435334;
+  cursor: pointer;
+  border-radius: 50px;
 }
 
 .start-btn:hover {
-    color: #435334;
+  color: #435334;
 }
 
-
 .line {
-    width: 1px;
-    height: 60%;
-    background-color: #9EB384;
-}
\ No newline at end of file
+  width: 1px;
+  height: 60%;
+  background-color: #9eb384;
+}
diff --git a/web-app/django/VIM/apps/main/static/main/css/login.css b/web-app/django/VIM/apps/main/static/main/css/login.css
index ebfa293..efe280a 100644
--- a/web-app/django/VIM/apps/main/static/main/css/login.css
+++ b/web-app/django/VIM/apps/main/static/main/css/login.css
@@ -1,58 +1,58 @@
-.login-form {
-    color: #435334;
-}
-
-input {
-    border: 1px solid #9EB384;
-    border-radius: 4px;
-    background-color: #FAF1E4;
-    padding: 5px;
-    color: #435334;
-    margin: 0 10px;
-}
-
-input:hover {
-    border: 1px solid #435334;
-    background-color: #FAF1E4;
-    color: #435334;
-}
-
-input:focus {
-    border: 1px solid #435334;
-    box-shadow: 0 0 5px #9EB384;
-    outline: none;
-}
-
-input::placeholder {
-    color: #9EB384;
-}
-
-.btn-primary {
-    background-color: #435334;
-    border: 1px solid #435334;
-}
-
-.btn-primary:hover {
-    background-color: #9EB384;
-    border: 1px solid #9EB384;
-}
-
-p {
-    color: #435334;
-}
-
-a {
-    color: #435334;
-    text-decoration: none;
-    font-weight: bold;
-}
-
-a:hover {
-    color: #9EB384;
-    text-decoration: none;
-    font-weight: bold;
-}
-
-.errorlist {
-    color: red;
-}
\ No newline at end of file
+.login-form {
+  color: #435334;
+}
+
+input {
+  border: 1px solid #9eb384;
+  border-radius: 4px;
+  background-color: #faf1e4;
+  padding: 5px;
+  color: #435334;
+  margin: 0 10px;
+}
+
+input:hover {
+  border: 1px solid #435334;
+  background-color: #faf1e4;
+  color: #435334;
+}
+
+input:focus {
+  border: 1px solid #435334;
+  box-shadow: 0 0 5px #9eb384;
+  outline: none;
+}
+
+input::placeholder {
+  color: #9eb384;
+}
+
+.btn-primary {
+  background-color: #435334;
+  border: 1px solid #435334;
+}
+
+.btn-primary:hover {
+  background-color: #9eb384;
+  border: 1px solid #9eb384;
+}
+
+p {
+  color: #435334;
+}
+
+a {
+  color: #435334;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+a:hover {
+  color: #9eb384;
+  text-decoration: none;
+  font-weight: bold;
+}
+
+.errorlist {
+  color: red;
+}
diff --git a/web-app/django/VIM/apps/main/templates/main/about.html b/web-app/django/VIM/apps/main/templates/main/about.html
index 468eeb6..6177df2 100644
--- a/web-app/django/VIM/apps/main/templates/main/about.html
+++ b/web-app/django/VIM/apps/main/templates/main/about.html
@@ -1,79 +1,79 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-About
-{% endblock %}
+  About
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" href="{% static "main/css/about.css" %}">
-{% endblock %}
+  <link rel="stylesheet" href="{% static "main/css/about.css" %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container content-container">
-  <div class="row pt-4 d-flex flex-column align-items-start justify-content-center">
-    <div class="col">
-      <p class="notranslate"><a href="#fr-about"><em>La version française suit.</em></a></p>
-      <div>
-        <h4 class="mb-4">About UMIL</h4>
-        <p class="my-4">
-          As part of the
-          <a href="https://linkedmusic.ca/">LinkedMusic</a> 
-          Project, we will also create an online Universal Musical Instrument Lexicon (UMIL), which will crowd-source names and pictures of instruments through history and in different languages, improving multilingual coverage for linked data.
-        </p>
-        <p class="my-4">
-          Building on projects like
-          <a href="https://mimo-international.com/MIMO/accueil-ermes.aspx">MIMO (Musical Instrument Museums Online)</a>,
-          UMIL will build a special website to crowd-source the names of instruments, where pictures of instruments are displayed, and people can submit the name of the instruments in their own language. While this will be a significant undertaking, this should greatly aid in the mapping of instrument names and in searching for the same instrument across sources from different times and places. The multilingual search will be accomplished via a concept similar to a thesaurus, and each instrument will be represented by a URI. This URI will link all the names of the instrument together, and this system will also be used to display the search results in the user’s preferred language when using SESEMMI (Search Engine System for Enhancing Music Metadata Interoperability).
-        </p>
-        <p class="mt-4 mb-1">
-          Useful links:
-          <ul>
-            <li>
-              <a href="https://linkedmusic.ca/omid/">A list of online databases</a>
-              either about musical instruments or with musical instrument sections.
-            </li>
-            <li>
-              <a href="https://linkedmusic.ca/pdfs/VIM%20Potential%20Templates.pdf">Potential UMIL Website Templates</a>
-              (based on photography, museum and shopping websites).
-            </li>
-          </ul>
-        </p>
-      </div>
-      
-      <hr>
-      
-      <div class="notranslate">
-        <h4 class="mb-4" id="fr-about">À propos de UMIL</h4>
-        <p class="my-4">
-          Dans le cadre du
-          <a href="https://linkedmusic.ca/">LinkedMusic</a> 
-          Project, nous créerons également un Lexique universel des instruments de musique (UMIL) qui sollicitera les noms et les images des instruments à travers l'histoire et dans différentes langues, améliorant ainsi la couverture multilingue des données liées.
-        </p>
-        <p class="my-4">
-          S'appuyant sur des projets tels que
-          <a href="https://mimo-international.com/MIMO/accueil-ermes.aspx">MIMO (Musical Instrument Museums Online)</a>,
-          UMIL construira un site Web spécial pour solliciter les noms des instruments, où les images des instruments sont affichées, et les gens peuvent soumettre le nom des instruments dans leur propre langue. Bien que cela représente un effort significatif, cela devrait grandement contribuer à la cartographie des noms d'instruments et à la recherche du même instrument dans des sources de différentes époques et de différents endroits. La recherche multilingue sera réalisée au moyen d'un concept similaire à un thésaurus, et chaque instrument sera représenté par un URI. Cet URI liera tous les noms de l'instrument ensemble, et ce système sera également utilisé pour afficher les résultats de la recherche dans la langue préférée de l'utilisateur lors de l'utilisation de SESEMMI (Système de recherche pour l'amélioration de l'interopérabilité des métadonnées musicales).
-        </p>
-        <p class="mt-4 mb-1">
-          Liens pratiques:
-          <ul>
-            <li>
-              <a href="https://linkedmusic.ca/omid/">Une liste de bases de données en ligne</a>
-              concernant les instruments de musique ou contenant des sections sur les instruments de musique.
-            </li>
-            <li>
-              <a href="https://linkedmusic.ca/pdfs/VIM%20Potential%20Templates.pdf">Des modèles potentiels de sites Web UMIL</a>
-              (basés sur des sites de photographie, de musées et de vente en ligne).
-            </li>
-          </ul>
+  <div class="container content-container">
+    <div class="row pt-4 d-flex flex-column align-items-start justify-content-center">
+      <div class="col">
+        <p class="notranslate">
+          <a href="#fr-about"><em>La version française suit.</em></a>
         </p>
+        <div>
+          <h4 class="mb-4">About UMIL</h4>
+          <p class="my-4">
+            As part of the
+            <a href="https://linkedmusic.ca/">LinkedMusic</a>
+            Project, we will also create an online Universal Musical Instrument Lexicon (UMIL), which will crowd-source names and pictures of instruments through history and in different languages, improving multilingual coverage for linked data.
+          </p>
+          <p class="my-4">
+            Building on projects like
+            <a href="https://mimo-international.com/MIMO/accueil-ermes.aspx">MIMO (Musical Instrument Museums Online)</a>,
+            UMIL will build a special website to crowd-source the names of instruments, where pictures of instruments are displayed, and people can submit the name of the instruments in their own language. While this will be a significant undertaking, this should greatly aid in the mapping of instrument names and in searching for the same instrument across sources from different times and places. The multilingual search will be accomplished via a concept similar to a thesaurus, and each instrument will be represented by a URI. This URI will link all the names of the instrument together, and this system will also be used to display the search results in the user’s preferred language when using SESEMMI (Search Engine System for Enhancing Music Metadata Interoperability).
+          </p>
+          <p class="mt-4 mb-1">
+            Useful links:
+            <ul>
+              <li>
+                <a href="https://linkedmusic.ca/omid/">A list of online databases</a>
+                either about musical instruments or with musical instrument sections.
+              </li>
+              <li>
+                <a href="https://linkedmusic.ca/pdfs/VIM%20Potential%20Templates.pdf">Potential UMIL Website Templates</a>
+                (based on photography, museum and shopping websites).
+              </li>
+            </ul>
+          </p>
+        </div>
+        <hr />
+        <div class="notranslate">
+          <h4 class="mb-4" id="fr-about">À propos de UMIL</h4>
+          <p class="my-4">
+            Dans le cadre du
+            <a href="https://linkedmusic.ca/">LinkedMusic</a>
+            Project, nous créerons également un Lexique universel des instruments de musique (UMIL) qui sollicitera les noms et les images des instruments à travers l'histoire et dans différentes langues, améliorant ainsi la couverture multilingue des données liées.
+          </p>
+          <p class="my-4">
+            S'appuyant sur des projets tels que
+            <a href="https://mimo-international.com/MIMO/accueil-ermes.aspx">MIMO (Musical Instrument Museums Online)</a>,
+            UMIL construira un site Web spécial pour solliciter les noms des instruments, où les images des instruments sont affichées, et les gens peuvent soumettre le nom des instruments dans leur propre langue. Bien que cela représente un effort significatif, cela devrait grandement contribuer à la cartographie des noms d'instruments et à la recherche du même instrument dans des sources de différentes époques et de différents endroits. La recherche multilingue sera réalisée au moyen d'un concept similaire à un thésaurus, et chaque instrument sera représenté par un URI. Cet URI liera tous les noms de l'instrument ensemble, et ce système sera également utilisé pour afficher les résultats de la recherche dans la langue préférée de l'utilisateur lors de l'utilisation de SESEMMI (Système de recherche pour l'amélioration de l'interopérabilité des métadonnées musicales).
+          </p>
+          <p class="mt-4 mb-1">
+            Liens pratiques:
+            <ul>
+              <li>
+                <a href="https://linkedmusic.ca/omid/">Une liste de bases de données en ligne</a>
+                concernant les instruments de musique ou contenant des sections sur les instruments de musique.
+              </li>
+              <li>
+                <a href="https://linkedmusic.ca/pdfs/VIM%20Potential%20Templates.pdf">Des modèles potentiels de sites Web UMIL</a>
+                (basés sur des sites de photographie, de musées et de vente en ligne).
+              </li>
+            </ul>
+          </p>
+        </div>
       </div>
-      
     </div>
   </div>
-</div>
-{% endblock %}
+{% endblock content %}
 
-{% block script %}
-{% endblock %}
\ No newline at end of file
+{% block scripts %}
+{% endblock scripts %}
diff --git a/web-app/django/VIM/apps/main/templates/main/index.html b/web-app/django/VIM/apps/main/templates/main/index.html
index 71d67ac..490ee09 100644
--- a/web-app/django/VIM/apps/main/templates/main/index.html
+++ b/web-app/django/VIM/apps/main/templates/main/index.html
@@ -1,56 +1,60 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-UMIL
-{% endblock %}
+  UMIL
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" href="{% static "main/css/index.css" %}">
-{% endblock %}
+  <link rel="stylesheet" href="{% static "main/css/index.css" %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container content-container d-flex align-items-center">
-  <div>
-    <div class="row">
-      <div class="col-6">
-        <h1>
-          <span style='color: #9EB384;'>Universal</span> Musical Instrument <br>Lexicon
-      </div>
-      <div class="col-6 notranslate">
-        <h1>
-          Lexique <span style='color: #9EB384;'>Universel </span> des Instruments de Musique
-        </h1>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-6">
-        <p>
-          Where the past and present of music collide. <br>Explore, share, connect musical instruments in every language.
-        </p>
-      </div>
-      <div class="col-6 notranslate">
-        <p>
-          Où le passé et le présent de la musique se rencontrent. Explorez, partagez, connectez des instruments de musique dans toutes les langues.
-        </p>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-6">
-        <a href="{% url "instrument-list" %}">
-          <button class="btn btn-warning start-btn">Get Started</button>
-        </a>
-      </div>
-      <div class="col-6 notranslate">
-        <a href="{% url "instrument-list" %}?language=french">
-          <button class="btn btn-warning start-btn">Commencer</button>
-        </a>
+  <div class="container content-container d-flex align-items-center">
+    <div>
+      <div class="row">
+        <div class="col-6">
+          <h1>
+            <span style="color: #9EB384;">Universal</span> Musical Instrument
+            <br />
+            Lexicon
+          </div>
+          <div class="col-6 notranslate">
+            <h1>
+              Lexique <span style="color: #9EB384;">Universel</span> des Instruments de Musique
+            </h1>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-6">
+            <p>
+              Where the past and present of music collide.
+              <br />
+              Explore, share, connect musical instruments in every language.
+            </p>
+          </div>
+          <div class="col-6 notranslate">
+            <p>
+              Où le passé et le présent de la musique se rencontrent. Explorez, partagez, connectez des instruments de musique dans toutes les langues.
+            </p>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-6">
+            <a href="{% url "instrument-list" %}">
+              <button class="btn btn-warning start-btn">Get Started</button>
+            </a>
+          </div>
+          <div class="col-6 notranslate">
+            <a href="{% url "instrument-list" %}?language=french">
+              <button class="btn btn-warning start-btn">Commencer</button>
+            </a>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
-  
-</div>
-{% endblock %}
+  {% endblock content %}
 
-{% block script %}
-{% endblock %}
\ No newline at end of file
+  {% block scripts %}
+  {% endblock scripts %}
diff --git a/web-app/django/VIM/apps/main/templates/registration/change_password.html b/web-app/django/VIM/apps/main/templates/registration/change_password.html
index bbc22a1..334eda6 100644
--- a/web-app/django/VIM/apps/main/templates/registration/change_password.html
+++ b/web-app/django/VIM/apps/main/templates/registration/change_password.html
@@ -1,48 +1,51 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-Change Password
-{% endblock %}
+  Change Password
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
-{% endblock %}
+  <link rel="stylesheet"
+        type="text/css"
+        href="{% static 'main/css/login.css' %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container">
+  <div class="container">
     <div class="row">
-        <div class="mr-3 p-4 col-md-8">
-            {% if form.errors %}
-            <div class="alert alert-danger alert-dismissible">
-                {% for field, error in form.errors.items %}
-                    {{ error }}
-                {% endfor %}
+      <div class="mr-3 p-4 col-md-8">
+        {% if form.errors %}
+          <div class="alert alert-danger alert-dismissible">
+            {% for field, error in form.errors.items %}{{ error }}{% endfor %}
+          </div>
+        {% endif %}
+        <div class="col-md mt-4 login-form" id="change-password">
+          <h5 class="mb-4">
+            <strong>Change Password</strong>
+          </h5>
+          <form method="post">
+            {% csrf_token %}
+            <div class="mb-4">
+              <label for="exampleInputPassword0" class="form-label">Current Password</label>
+              {{ form.old_password }}
+            </div>
+            <div class="mb-4">
+              <label for="exampleInputPassword1" class="form-label">New Password</label>
+              {{ form.new_password1 }}
             </div>
-            {% endif %}
-            <div class="col-md mt-4 login-form" id="change-password">
-                <h5 class="mb-4"><strong>Change Password</strong></h5>
-                <form method="post">
-                    {% csrf_token %}
-                    <div class="mb-4">
-                        <label for="exampleInputPassword0" class="form-label">Current Password</label>
-                        {{ form.old_password }}
-                    </div>
-                    <div class="mb-4">
-                        <label for="exampleInputPassword1" class="form-label">New Password</label>
-                        {{ form.new_password1 }}
-                    </div>
-                    <div class="mb-4">
-                        <label for="exampleInputPassword2" class="form-label">Confirm New Password</label>
-                        {{ form.new_password2 }}
-                    </div>
-                    <button type="submit" class="btn btn-primary">Change Password</button>
-                </form>
+            <div class="mb-4">
+              <label for="exampleInputPassword2" class="form-label">Confirm New Password</label>
+              {{ form.new_password2 }}
             </div>
+            <button type="submit" class="btn btn-primary">Change Password</button>
+          </form>
         </div>
+      </div>
     </div>
-</div>
-{% endblock %}
+  </div>
+{% endblock content %}
 
-{% block script %}
-{% endblock %}
\ No newline at end of file
+{% block scripts %}
+{% endblock scripts %}
diff --git a/web-app/django/VIM/apps/main/templates/registration/login.html b/web-app/django/VIM/apps/main/templates/registration/login.html
index 36a552d..3c6ff8a 100644
--- a/web-app/django/VIM/apps/main/templates/registration/login.html
+++ b/web-app/django/VIM/apps/main/templates/registration/login.html
@@ -1,59 +1,61 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-Login
-{% endblock %}
+  Login
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
-{% endblock %}
+  <link rel="stylesheet"
+        type="text/css"
+        href="{% static 'main/css/login.css' %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container">
+  <div class="container">
     <div class="row">
-        <div class="mr-3 p-4 col-md-8">
-            {% if messages %}
-            <div class="alert alert-success alert-dismissible">
-                {% for message in messages %}
-                    {{ message }}
-                {% endfor %}
-            </div>
-            {% endif %}
-            {% if form.errors %}
-            <div class="alert alert-danger alert-dismissible">
-                {% for field, error in form.errors.items %}
-                    {{ error }}
-                {% endfor %}
+      <div class="mr-3 p-4 col-md-8">
+        {% if messages %}
+          <div class="alert alert-success alert-dismissible">
+            {% for message in messages %}{{ message }}{% endfor %}
+          </div>
+        {% endif %}
+        {% if form.errors %}
+          <div class="alert alert-danger alert-dismissible">
+            {% for field, error in form.errors.items %}{{ error }}{% endfor %}
+          </div>
+        {% endif %}
+        <div class="col-md mt-4 login-form" id="login">
+          <h5>
+            <strong>Login for Contributors</strong>
+          </h5>
+          <form method="post">
+            {% csrf_token %}
+            <div class="mt-4 mb-4">
+              <label for="exampleInputEmail" class="form-label">Email Address</label>
+              {{ form.username }}
             </div>
-            {% endif %}
-            <div class="col-md mt-4 login-form" id="login">
-                <h5><strong>Login for Contributors</strong></h5>
-                <form method="post">
-                    {% csrf_token %}
-                    <div class="mt-4 mb-4">
-                        <label for="exampleInputEmail" class="form-label">Email Address</label>
-                        {{ form.username }}
-                    </div>
-                    <div class="mb-4">
-                        <label for="exampleInputPassword" class="form-label">Password</label>
-                        {{ form.password }}
-                    </div>
-                    <button type="submit" class="btn btn-primary">Sign in</button>
-                    <p class="mt-2">
-                        <a href="{% url 'main:reset_password' %}">Forgot your password?</a>
-                    </p>
-                </form>
-            </div>
-            <div class="col-md mt-4 create-account-link">
-                <p>Don't have an account? 
-                    <a href="{% url 'main:register' %}">Create a new account</a>
-                </p>
+            <div class="mb-4">
+              <label for="exampleInputPassword" class="form-label">Password</label>
+              {{ form.password }}
             </div>
+            <button type="submit" class="btn btn-primary">Sign in</button>
+            <p class="mt-2">
+              <a href="{% url 'main:reset_password' %}">Forgot your password?</a>
+            </p>
+          </form>
+        </div>
+        <div class="col-md mt-4 create-account-link">
+          <p>
+            Don't have an account?
+            <a href="{% url 'main:register' %}">Create a new account</a>
+          </p>
         </div>
+      </div>
     </div>
-</div>
-{% endblock %}
+  </div>
+{% endblock content %}
 
-{% block script %}
-{% endblock %}
\ No newline at end of file
+{% block scripts %}
+{% endblock scripts %}
diff --git a/web-app/django/VIM/apps/main/templates/registration/register.html b/web-app/django/VIM/apps/main/templates/registration/register.html
index d430f27..80e3237 100644
--- a/web-app/django/VIM/apps/main/templates/registration/register.html
+++ b/web-app/django/VIM/apps/main/templates/registration/register.html
@@ -1,48 +1,51 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-Register
-{% endblock %}
+  Register
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
-{% endblock %}
+  <link rel="stylesheet"
+        type="text/css"
+        href="{% static 'main/css/login.css' %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container">
+  <div class="container">
     <div class="row">
-        <div class="mr-3 p-4 col-md-8">
-            {% if form.errors %}
-            <div class="alert alert-danger alert-dismissible">
-                {% for field, error in form.errors.items %}
-                    {{ error }}
-                {% endfor %}
+      <div class="mr-3 p-4 col-md-8">
+        {% if form.errors %}
+          <div class="alert alert-danger alert-dismissible">
+            {% for field, error in form.errors.items %}{{ error }}{% endfor %}
+          </div>
+        {% endif %}
+        <div class="col-md mt-4 login-form" id="registration">
+          <h5 class="mb-4">
+            <strong>Create a New Account</strong>
+          </h5>
+          <form method="post">
+            {% csrf_token %}
+            <div class="mt-4 mb-4">
+              <label for="exampleInputEmail" class="form-label">Email Address</label>
+              {{ form.username }}
+            </div>
+            <div class="mb-4">
+              <label for="exampleInputPassword1" class="form-label">Password</label>
+              {{ form.password1 }}
             </div>
-            {% endif %}
-            <div class="col-md mt-4 login-form" id="registration">
-                <h5 class="mb-4"><strong>Create a New Account</strong></h5>
-                <form method="post">
-                    {% csrf_token %}
-                    <div class="mt-4 mb-4">
-                        <label for="exampleInputEmail" class="form-label">Email Address</label>
-                        {{ form.username }}
-                    </div>
-                    <div class="mb-4">
-                        <label for="exampleInputPassword1" class="form-label">Password</label>
-                        {{ form.password1 }}
-                    </div>
-                    <div class="mb-4">
-                        <label for="exampleInputPassword2" class="form-label">Confirm Password</label>
-                        {{ form.password2 }}
-                    </div>
-                    <button type="submit" class="btn btn-primary">Register</button>
-                </form>
+            <div class="mb-4">
+              <label for="exampleInputPassword2" class="form-label">Confirm Password</label>
+              {{ form.password2 }}
             </div>
+            <button type="submit" class="btn btn-primary">Register</button>
+          </form>
         </div>
+      </div>
     </div>
-</div>
-{% endblock %}
+  </div>
+{% endblock content %}
 
-{% block script %}
-{% endblock %}
\ No newline at end of file
+{% block scripts %}
+{% endblock scripts %}
diff --git a/web-app/django/VIM/apps/main/templates/registration/reset_password.html b/web-app/django/VIM/apps/main/templates/registration/reset_password.html
index 3278c1e..8aee962 100644
--- a/web-app/django/VIM/apps/main/templates/registration/reset_password.html
+++ b/web-app/django/VIM/apps/main/templates/registration/reset_password.html
@@ -1,45 +1,48 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-Reset Password
-{% endblock %}
+  Reset Password
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
-{% endblock %}
+  <link rel="stylesheet"
+        type="text/css"
+        href="{% static 'main/css/login.css' %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container">
+  <div class="container">
     <div class="row">
-        <div class="mr-3 p-4 col-md-12">
-            {% if messages %}
-                <div class="alert alert-success alert-dismissible">
-                    {% for message in messages %}
-                        {{ message }}
-                    {% endfor %}
-                </div>
-            {% endif %}
-            {% if form.errors %}
-                <div class="alert alert-danger alert-dismissible">
-                    {% for field, error in form.errors.items %}
-                        {{ error }}
-                    {% endfor %}
-                </div>
-            {% endif %}
-            <div class="col-md mt-4 login-form" id="login">
-                <h5><strong>Reset Password</strong></h5>
-                <p class="mt-4">Forgotten your password? Enter your email address below, and we'll email instructions for setting a new one.</p>
-                <form method="post">
-                    {% csrf_token %}
-                    <div class="mt-4 mb-4">
-                        <label for="exampleInputEmail" class="form-label">Email Address</label>
-                        {{ form.email }}
-                    </div>
-                    <button type="submit" class="btn btn-primary">Send Password Reset Email</button>
-                </form>
+      <div class="mr-3 p-4 col-md-12">
+        {% if messages %}
+          <div class="alert alert-success alert-dismissible">
+            {% for message in messages %}{{ message }}{% endfor %}
+          </div>
+        {% endif %}
+        {% if form.errors %}
+          <div class="alert alert-danger alert-dismissible">
+            {% for field, error in form.errors.items %}{{ error }}{% endfor %}
+          </div>
+        {% endif %}
+        <div class="col-md mt-4 login-form" id="login">
+          <h5>
+            <strong>Reset Password</strong>
+          </h5>
+          <p class="mt-4">
+            Forgotten your password? Enter your email address below, and we'll email instructions for setting a new one.
+          </p>
+          <form method="post">
+            {% csrf_token %}
+            <div class="mt-4 mb-4">
+              <label for="exampleInputEmail" class="form-label">Email Address</label>
+              {{ form.email }}
             </div>
+            <button type="submit" class="btn btn-primary">Send Password Reset Email</button>
+          </form>
         </div>
+      </div>
     </div>
-</div>
-{% endblock %}
+  </div>
+{% endblock content %}
diff --git a/web-app/django/VIM/apps/main/templates/registration/reset_password_complete.html b/web-app/django/VIM/apps/main/templates/registration/reset_password_complete.html
index 8bf443b..5f95362 100644
--- a/web-app/django/VIM/apps/main/templates/registration/reset_password_complete.html
+++ b/web-app/django/VIM/apps/main/templates/registration/reset_password_complete.html
@@ -1,22 +1,29 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-Reset Password
-{% endblock %}
+  Reset Password
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
-{% endblock %}
+  <link rel="stylesheet"
+        type="text/css"
+        href="{% static 'main/css/login.css' %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container">
+  <div class="container">
     <div class="row">
       <div class="mr-3 p-4 col-md-12">
         <div class="col-md mt-4 login-form" id="login">
-            <h5><strong>Password Reset Complete</strong></h5>
-            <p class="mt-4">Your password has been successfully reset. You can now <a href="{% url 'main:login' %}">log in</a> with your new password.</p>
+          <h5>
+            <strong>Password Reset Complete</strong>
+          </h5>
+          <p class="mt-4">
+            Your password has been successfully reset. You can now <a href="{% url 'main:login' %}">log in</a> with your new password.
+          </p>
         </div>
+      </div>
     </div>
-</div>
-{% endblock %}
+  {% endblock content %}
diff --git a/web-app/django/VIM/apps/main/templates/registration/reset_password_confirm.html b/web-app/django/VIM/apps/main/templates/registration/reset_password_confirm.html
index 4cef9d1..fbff852 100644
--- a/web-app/django/VIM/apps/main/templates/registration/reset_password_confirm.html
+++ b/web-app/django/VIM/apps/main/templates/registration/reset_password_confirm.html
@@ -1,29 +1,35 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-Reset Password
-{% endblock %}
+  Reset Password
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
-{% endblock %}
+  <link rel="stylesheet"
+        type="text/css"
+        href="{% static 'main/css/login.css' %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container">
+  <div class="container">
     <div class="row">
       <div class="mr-3 p-4 col-md-12">
         <div class="col-md mt-4 login-form" id="login">
-            <h5><strong>Set New Password</strong></h5>
-            <form class="mt-4" method="post">
-                {% csrf_token %}
-                {{ form.new_password1.label_tag }}
-                {{ form.new_password1 }}
-                {{ form.new_password2.label_tag }}
-                {{ form.new_password2 }}
-                <button type="submit" class="btn btn-primary">Change Password</button>
-            </form>
+          <h5>
+            <strong>Set New Password</strong>
+          </h5>
+          <form class="mt-4" method="post">
+            {% csrf_token %}
+            {{ form.new_password1.label_tag }}
+            {{ form.new_password1 }}
+            {{ form.new_password2.label_tag }}
+            {{ form.new_password2 }}
+            <button type="submit" class="btn btn-primary">Change Password</button>
+          </form>
         </div>
+      </div>
     </div>
-</div>
-{% endblock %}
+  </div>
+{% endblock content %}
diff --git a/web-app/django/VIM/apps/main/templates/registration/reset_password_email.html b/web-app/django/VIM/apps/main/templates/registration/reset_password_email.html
index c05827e..0b67fb7 100644
--- a/web-app/django/VIM/apps/main/templates/registration/reset_password_email.html
+++ b/web-app/django/VIM/apps/main/templates/registration/reset_password_email.html
@@ -1,7 +1,5 @@
 Please click the following link to reset your password:
-
 {% autoescape off %}
-{{ protocol }}://{{ domain }}{% url 'main:reset_password_confirm' uidb64=uid token=token %}
+  {{ protocol }}://{{ domain }}{% url 'main:reset_password_confirm' uidb64=uid token=token %}
 {% endautoescape %}
-
 If you didn't request a password reset, please ignore this message.
diff --git a/web-app/django/VIM/apps/main/templates/registration/reset_password_sent.html b/web-app/django/VIM/apps/main/templates/registration/reset_password_sent.html
index 082a786..4ffa88a 100644
--- a/web-app/django/VIM/apps/main/templates/registration/reset_password_sent.html
+++ b/web-app/django/VIM/apps/main/templates/registration/reset_password_sent.html
@@ -1,23 +1,28 @@
 {% extends "base.html" %}
+
 {% load static %}
 
 {% block title %}
-Reset Password
-{% endblock %}
+  Reset Password
+{% endblock title %}
 
 {% block css_files %}
-<link rel="stylesheet" type="text/css" href="{% static 'main/css/login.css' %}">
-{% endblock %}
+  <link rel="stylesheet"
+        type="text/css"
+        href="{% static 'main/css/login.css' %}" />
+{% endblock css_files %}
 
 {% block content %}
-<div class="container">
-  <div class="row">
-    <div class="mr-3 p-4 col-md-12">
-      <div class="col-md mt-4 login-form" id="login">
-        <h5><strong>Password Reset Email Sent</strong></h5>
-        <p class="mt-4">We've sent you an email with instructions to reset your password. Please check your inbox.</p>
+  <div class="container">
+    <div class="row">
+      <div class="mr-3 p-4 col-md-12">
+        <div class="col-md mt-4 login-form" id="login">
+          <h5>
+            <strong>Password Reset Email Sent</strong>
+          </h5>
+          <p class="mt-4">We've sent you an email with instructions to reset your password. Please check your inbox.</p>
+        </div>
       </div>
     </div>
   </div>
-</div>
-{% endblock %}
+{% endblock content %}
diff --git a/web-app/django/VIM/static/css/app.css b/web-app/django/VIM/static/css/app.css
index 5df6f58..c46c7b3 100644
--- a/web-app/django/VIM/static/css/app.css
+++ b/web-app/django/VIM/static/css/app.css
@@ -1,111 +1,112 @@
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@300;400;700&display=swap');
 
 body {
-    font-family: 'Noto Sans', sans-serif;
+  font-family: 'Noto Sans', sans-serif;
 }
 
 /* header */
 header {
-    background-color: #9EB384;
-    min-height: 9.5vh;
+  background-color: #9eb384;
+  min-height: 9.5vh;
 }
 
 .nav-link {
-    color: #FAF1E4;
+  color: #faf1e4;
 }
 
 .nav-link:hover,
 .nav-link:focus {
-    color: #435334;
+  color: #435334;
 }
 
 .active {
-    color: #435334 !important;
-    font-weight: 400 !important;
-    border-color: #435334 !important;
+  color: #435334 !important;
+  font-weight: 400 !important;
+  border-color: #435334 !important;
 }
 
 .nav-home,
 .nav-home:hover,
-.nav-home:not(:hover) { /* on mouse leave */
-    text-decoration: none;
-    color:#435334;
-    border-bottom: 0;
+.nav-home:not(:hover) {
+  /* on mouse leave */
+  text-decoration: none;
+  color: #435334;
+  border-bottom: 0;
 }
 
 .search-input {
-    background-color: #FAF1E4;
-    color: #435334;
+  background-color: #faf1e4;
+  color: #435334;
 }
 
-.search-input::placeholder{
-    color: #435334;
+.search-input::placeholder {
+  color: #435334;
 }
 
 .search-input:focus {
-    background-color: #FAF1E4;
-    outline: none; /* Remove the outline */
-    border: 1px solid #FAF1E4;
+  background-color: #faf1e4;
+  outline: none; /* Remove the outline */
+  border: 1px solid #faf1e4;
 }
 
 .login-btn {
-    color: #FAF1E4;
-    border: 1px solid #FAF1E4;
-    font-family: 'Noto Sans', sans-serif;
+  color: #faf1e4;
+  border: 1px solid #faf1e4;
+  font-family: 'Noto Sans', sans-serif;
 }
 
 .login-btn:hover {
-    color: #435334;
-    border: 1px solid #FAF1E4;
-    background-color: #FAF1E4;
+  color: #435334;
+  border: 1px solid #faf1e4;
+  background-color: #faf1e4;
 }
 
 .dropdown-menu {
-    background-color: #FAF1E4;
+  background-color: #faf1e4;
 }
 
 .dropdown-item:hover {
-    background-color: #CEDEBD;
+  background-color: #cedebd;
 }
 
 #google_translate_element {
-    border: 1px solid #FAF1E4;
-    border-radius: 0.375rem;
+  border: 1px solid #faf1e4;
+  border-radius: 0.375rem;
 }
 
 .goog-te-combo,
 .goog-te-combo:valid {
-    color: #FAF1E4;
-    font-size: 16px;
-    font-family: 'Noto Sans', sans-serif;
+  color: #faf1e4;
+  font-size: 16px;
+  font-family: 'Noto Sans', sans-serif;
 }
 
 #google_translate_element:hover {
-    border: 1px solid #FAF1E4;
-    background-color: #FAF1E4;
+  border: 1px solid #faf1e4;
+  background-color: #faf1e4;
 }
 
-#google_translate_element:hover  .goog-te-combo{
-    color: #435334;
+#google_translate_element:hover .goog-te-combo {
+  color: #435334;
 }
 
 .goog-logo-link,
 .goog-te-gadget span {
-    display: none !important;
+  display: none !important;
 }
 
 .goog-te-gadget {
-    font-size: 0 !important;
+  font-size: 0 !important;
 }
 
 /* main */
 main {
-    background-color: #FAF1E4;
-    min-height: 80vh;
+  background-color: #faf1e4;
+  min-height: 80vh;
 }
 
 /* footer */
 footer {
-    background-color: #FAF1E4;
-    min-height: 10.5vh;
-}
\ No newline at end of file
+  background-color: #faf1e4;
+  min-height: 10.5vh;
+}
diff --git a/web-app/django/VIM/static/js/GoogleTranslate.js b/web-app/django/VIM/static/js/GoogleTranslate.js
index 2a2c913..da5f9b6 100644
--- a/web-app/django/VIM/static/js/GoogleTranslate.js
+++ b/web-app/django/VIM/static/js/GoogleTranslate.js
@@ -1,20 +1,20 @@
-const pageLanguage = document.querySelector("#google_translate_element");
+const pageLanguage = document.querySelector('#google_translate_element');
 
 function googleTranslateElementInit() {
   new google.translate.TranslateElement(
     {
-      pageLanguage: "en",
+      pageLanguage: 'en',
       layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL,
     },
-    "google_translate_element"
+    'google_translate_element'
   );
 
-  const googleSelect = document.getElementsByClassName("goog-te-combo")[0];
-  googleSelect.classList.add("btn", "p-0", "m-0", "h-100");
+  const googleSelect = document.getElementsByClassName('goog-te-combo')[0];
+  googleSelect.classList.add('btn', 'p-0', 'm-0', 'h-100');
 
   const parent = googleSelect.parentElement;
-  parent.classList.add("h-100", "d-flex", "align-items-center");
+  parent.classList.add('h-100', 'd-flex', 'align-items-center');
 
   const grandparent = parent.parentElement;
-  grandparent.classList.add("h-100", "d-flex", "align-items-center");
+  grandparent.classList.add('h-100', 'd-flex', 'align-items-center');
 }
diff --git a/web-app/django/VIM/templates/404.html b/web-app/django/VIM/templates/404.html
index e9e964d..19eed59 100644
--- a/web-app/django/VIM/templates/404.html
+++ b/web-app/django/VIM/templates/404.html
@@ -1,15 +1,14 @@
 {% extends "base.html" %}
+
 {% block content %}
-<div class="container">
+  <div class="container">
     <div class="row">
-        <div class="p-3 col-12">
-            <h3>404</h3>
-            <h5>Page not found</h5>
-            <br>
-            <p>
-                We couldn't find a page at this address.
-            </p>
-        </div>
+      <div class="p-3 col-12">
+        <h3>404</h3>
+        <h5>Page not found</h5>
+        <br />
+        <p>We couldn't find a page at this address.</p>
+      </div>
     </div>
-</div>
-{% endblock %}
+  </div>
+{% endblock content %}
diff --git a/web-app/django/VIM/templates/base.html b/web-app/django/VIM/templates/base.html
index 7dc5c53..33d22b1 100644
--- a/web-app/django/VIM/templates/base.html
+++ b/web-app/django/VIM/templates/base.html
@@ -2,84 +2,109 @@
 
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title class="notranslate">{% block title %}{% endblock %}</title>
-  
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"
-    integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
-  <link rel="stylesheet" href="{% static "css/app.css" %}">
-  {% block css_files %}{% endblock %} 
-</head>
-<body>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title class="notranslate">
+      {% block title %}
+      {% endblock title %}
 
-  <header class="p-3 sticky-top">
-    <div class="container">
-      <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="{% url "main:home" %}" class="nav-link nav-home px-2 notranslate">
-              <img src="{% static "images/logo.svg" %}" alt="vim icon">
-              UMIL
-            </a>
-          </li>
-          <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="{% 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="{% url "main:about" %}" class="nav-link px-2 text-decoration-none
-            {% if active_tab == 'about' %}active{% endif %}">About</a></li>
-        </ul>
+    </title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+          rel="stylesheet"
+          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
+          crossorigin="anonymous" />
+    <link rel="stylesheet" href="{% static "css/app.css" %}" />
+    {% block css_files %}
+    {% endblock css_files %}
 
-        <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
-          <input type="search" class="form-control search-input" placeholder="Search..." aria-label="Search">
-        </form>
-
-        <div class="text-end d-flex">
-          {% if user.is_authenticated %}
-            <div class="dropdown me-3">
-              <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
-                {{ user.username }}
-              </button>
-              <ul class="dropdown-menu" aria-labelledby="userDropdown">
-                <li><a class="dropdown-item" href="{% url 'main:change_password' %}">Change Password</a></li>
-                <li><a class="dropdown-item" href="{% url 'main:logout' %}">Log out</a></li>
-              </ul>
-            </div>
-          {% else %}
-            <a href="{% url 'main:login' %}">
-              <button type="button" class="btn me-2 login-btn">Login</button>
-            </a>
-          {% endif %}
-          <div id="google_translate_element" class="d-flex align-items-center position-relative" data-bs-toggle="tooltip" 
-                data-bs-title="Web Page Language" 
-                aria-label="Web Page Language" 
-                aria-pressed="true">
+  </head>
+  <body>
+    <header class="p-3 sticky-top">
+      <div class="container">
+        <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="{% url "main:home" %}"
+                 class="nav-link nav-home px-2 notranslate">
+                <img src="{% static "images/logo.svg" %}" alt="vim icon" />
+                UMIL
+              </a>
+            </li>
+            <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="{% 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="{% url "main:about" %}"
+                 class="nav-link px-2 text-decoration-none {% if active_tab == 'about' %}active{% endif %}">About</a>
+            </li>
+          </ul>
+          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
+            <input type="search"
+                   class="form-control search-input"
+                   placeholder="Search..."
+                   aria-label="Search" />
+          </form>
+          <div class="text-end d-flex">
+            {% if user.is_authenticated %}
+              <div class="dropdown me-3">
+                <button class="btn dropdown-toggle"
+                        type="button"
+                        data-bs-toggle="dropdown"
+                        aria-expanded="false">{{ user.username }}</button>
+                <ul class="dropdown-menu" aria-labelledby="userDropdown">
+                  <li>
+                    <a class="dropdown-item" href="{% url 'main:change_password' %}">Change Password</a>
+                  </li>
+                  <li>
+                    <a class="dropdown-item" href="{% url 'main:logout' %}">Log out</a>
+                  </li>
+                </ul>
+              </div>
+            {% else %}
+              <a href="{% url 'main:login' %}">
+                <button type="button" class="btn me-2 login-btn">Login</button>
+              </a>
+            {% endif %}
+            <div id="google_translate_element"
+                 class="d-flex align-items-center position-relative"
+                 data-bs-toggle="tooltip"
+                 data-bs-title="Web Page Language"
+                 aria-label="Web Page Language"
+                 aria-pressed="true"></div>
           </div>
         </div>
       </div>
-    </div>
-  </header>
+    </header>
+    <main>
+      {% block content %}
+      {% endblock content %}
 
-  <main>
-    {% block content %} {% endblock %}
-  </main>
+    </main>
+    <footer class="d-flex justify-content-center align-items-center py-1 border-top">
+      <a href="https://ddmal.music.mcgill.ca/"
+         class="my-1 mx-3 link-body-emphasis text-decoration-none">
+        <img src="{% static "images/lab-logo.png" %}" alt="ddmal logo" />
+      </a>
+      <a href="https://linkedmusic.ca/"
+         class="my-1 mx-3 pb-3 link-body-emphasis text-decoration-none">
+        <img src="{% static "images/LM_LogoTransparentBlack1.png" %}" alt="linkedmusic logo" style="height: 30px;" />
+      </a>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
+            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
+            crossorigin="anonymous"></script>
+    <script src="{% static "/js/GoogleTranslate.js" %}"></script>
+    <script type="text/javascript"
+            src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
+    <script src="{% static "/js/LanguageTooltip.js" %}"></script>
+    {% block scripts %}
+    {% endblock scripts %}
 
-  <footer class="d-flex justify-content-center align-items-center py-1 border-top">
-    <a href="https://ddmal.music.mcgill.ca/" class="my-1 mx-3 link-body-emphasis text-decoration-none">
-      <img src="{% static "images/lab-logo.png" %}" alt="ddmal logo">
-    </a>
-    <a href="https://linkedmusic.ca/" class="my-1 mx-3 pb-3 link-body-emphasis text-decoration-none">
-        <img src="{% static "images/LM_LogoTransparentBlack1.png" %}" alt="linkedmusic logo" style="height: 30px;">
-    </a>
-  </footer>
-  
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"
-   integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
-  <script src="{% static "/js/GoogleTranslate.js" %}"></script>
-  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
-  <script src="{% static "/js/LanguageTooltip.js" %}"></script>
-  {% block script %} {% endblock %}
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>