diff --git a/web-app/django/VIM/templates/base.html b/web-app/django/VIM/templates/base.html
index 40b8220..1c8db3f 100644
--- a/web-app/django/VIM/templates/base.html
+++ b/web-app/django/VIM/templates/base.html
@@ -28,63 +28,88 @@
   <body>
     <header class="p-3 sticky-top align-content-center">
       <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 "assets/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>
-          {% comment %} <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> {% endcomment %}
-          <div class="text-end d-flex">
-            {% if user.is_authenticated %}
-              <div class="dropdown me-2">
-                <button class="btn dropdown-toggle login-btn"
-                        type="button"
-                        data-bs-toggle="dropdown"
-                        aria-expanded="false">{{ user.username }}</button>
-                <ul class="dropdown-menu umil-dropdown-menu"
-                    aria-labelledby="userDropdown">
-                  <li>
-                    <a class="dropdown-item umil-dropdown-item"
-                       href="{% url 'main:change_password' %}">Change Password</a>
-                  </li>
-                  <li>
-                    <a class="dropdown-item umil-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>
+        <nav class="navbar navbar-expand-lg">
+          <!-- Brand/Logo - always visible -->
+          <a class="navbar-brand nav-home notranslate"
+             href="{% url "main:home" %}">
+            <img src="{% static "assets/images/logo.svg" %}" alt="umil icon" />
+            UMIL
+          </a>
+          <!-- Hamburger toggle button - only visible on mobile -->
+          <button class="navbar-toggler"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#navbarMenu"
+                  aria-controls="navbarMenu"
+                  aria-expanded="false"
+                  aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <!-- Collapsible content -->
+          <div class="collapse navbar-collapse" id="navbarMenu">
+            <ul class="navbar-nav me-lg-auto mx-auto mx-lg-0 text-center text-lg-start">
+              <li class="nav-item">
+                <a href="{% url "main:home" %}"
+                   class="nav-link {% if active_tab == 'home' %}active{% endif %}">Home</a>
+              </li>
+              <li class="nav-item">
+                <a href="{% url "instrument-list" %}"
+                   class="nav-link {% if active_tab == 'instruments' %}active{% endif %}">Instruments</a>
+              </li>
+              <li class="nav-item">
+                <a href="{% url "main:about" %}"
+                   class="nav-link {% if active_tab == 'about' %}active{% endif %}">About</a>
+              </li>
+            </ul>
+            <!-- Right side content (user menu + translate) -->
+            <div class="d-flex align-items-center justify-content-center justify-content-lg-end">
+              {% if user.is_authenticated %}
+                <div class="dropdown me-2">
+                  <button class="btn dropdown-toggle login-btn"
+                          type="button"
+                          data-bs-toggle="dropdown"
+                          aria-expanded="false">
+                    <svg xmlns="http://www.w3.org/2000/svg"
+                         viewBox="0 0 448 512"
+                         fill="currentColor"
+                         width="20"
+                         height="20"
+                         aria-label="user icon">
+                      <path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464l349.5 0c-8.9-63.3-63.3-112-129-112l-91.4 0c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3z" />
+                    </svg>
+                  </button>
+                  <ul class="dropdown-menu umil-dropdown-menu"
+                      aria-labelledby="userDropdown">
+                    <li>
+                      <p class="dropdown-item mb-0 umil-dropdown-item disabled">
+                        {{ user.username }}
+                      </p>
+                    </li>
+                    <hr class="dropdown-divider" />
+                    <li>
+                      <a class="dropdown-item umil-dropdown-item"
+                         href="{% url 'main:change_password' %}">Change Password</a>
+                    </li>
+                    <li>
+                      <a class="dropdown-item umil-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 btn"
+                   data-bs-toggle="tooltip"
+                   data-bs-title="Web Page Language"
+                   aria-label="Web Page Language"
+                   aria-pressed="true"></div>
+            </div>
           </div>
-        </div>
+        </nav>
       </div>
     </header>
     <main>
@@ -92,7 +117,7 @@
       {% endblock content %}
 
     </main>
-    <footer class="d-flex justify-content-center align-items-center py-1 border-top">
+    <footer class="d-flex flex-column flex-md-row 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 "assets/images/lab-logo.png" %}" alt="ddmal logo" />
diff --git a/web-app/django/VIM/templates/instruments/index.html b/web-app/django/VIM/templates/instruments/index.html
index 5fbb4b1..966bdf3 100644
--- a/web-app/django/VIM/templates/instruments/index.html
+++ b/web-app/django/VIM/templates/instruments/index.html
@@ -82,129 +82,131 @@ <h4>######</h4>
           </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"
-                 data-bs-toggle="tooltip"
-                 data-bs-title="Instrument Name Language"
-                 aria-label="Instrument Name Language"
-                 aria-pressed="true">
-              <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"
-                      id="language-dropdown-btn">
-                {{ active_language.autonym|title }}
+      <div class="col-xl-9">
+        <div class="body-container pt-3">
+          <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 align-content-center notranslate"
+                   id="instrument-language-element"
+                   data-bs-toggle="tooltip"
+                   data-bs-title="Instrument Name Language"
+                   aria-label="Instrument Name Language"
+                   aria-pressed="true">
+                <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"
+                        id="language-dropdown-btn">
+                  {{ active_language.autonym|title }}
+                </button>
+                <ul class="dropdown-menu umil-dropdown-menu" id="language-dropdown-list">
+                  {% for language in languages %}
+                    <li>
+                      <a class="dropdown-item umil-dropdown-item"
+                         href="?language={{ language.en_label }}"
+                         data-language="{{ language.en_label }}">
+                      {{ language.en_label|title }} ({{ 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>
-              <ul class="dropdown-menu umil-dropdown-menu" id="language-dropdown-list">
-                {% for language in languages %}
-                  <li>
-                    <a class="dropdown-item umil-dropdown-item"
-                       href="?language={{ language.en_label }}"
-                       data-language="{{ language.en_label }}">
-                    {{ language.en_label|title }} ({{ 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" %}
+          <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" %}
+            </div>
+            {% include "instruments/includes/masonryView.html" %}
 
-          {% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %}
-          {% include "instruments/includes/stdView.html" %}
+            {% comment %} {% include "instruments/includes/listView.html" %} {% endcomment %}
+            {% include "instruments/includes/stdView.html" %}
 
-        </div>
-        <div class="mb-3 d-flex flex-md-row flex-column align-items-center justify-content-center">
-          {% include "instruments/includes/paginationOptions.html" %}
+          </div>
+          <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 %}
-              <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>
+            <div class="pagination-container ">
+              <ul class="pagination mb-1 justify-content-center">
+                {% if page_obj.has_previous %}
+                  <li class="page-item">
+                    <a class="page-link"
+                       href="?page=1{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
+                       aria-label="First"
+                       title="First">
+                      <i class="bi bi-chevron-double-left"></i>
+                    </a>
+                  </li>
+                  <li class="page-item">
+                    <a class="page-link"
+                       href="?page={{ page_obj.previous_page_number }}{% if request.GET.hbs_facet %}&hbs_facet={{ request.GET.hbs_facet }}{% endif %}"
+                       aria-label="Previous"
+                       title="Previous">
+                      <i class="bi bi-chevron-left"></i>
+                    </a>
+                  </li>
+                {% endif %}
+                <li class="page-item align-self-center">
+                  <span class="current p-2">
+                    Page
+                    <span class="page-number">{{ page_obj.number }}</span>
+                    of
+                    {{ page_obj.paginator.num_pages }}
+                  </span>
                 </li>
-              {% endif %}
-            </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" />
+                {% 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>
diff --git a/web-app/django/VIM/templates/main/index.html b/web-app/django/VIM/templates/main/index.html
index c2e3fad..901e907 100644
--- a/web-app/django/VIM/templates/main/index.html
+++ b/web-app/django/VIM/templates/main/index.html
@@ -13,41 +13,81 @@
 {% block content %}
   <div class="container content-container d-flex align-items-center justify-content-center">
     <div class="z-2">
-      <div class="row">
-        <div class="col-6">
-          <h1>
-            <span style="color: #876445;">Universal</span> Musical Instrument Lexicon
-          </h1>
+      <!-- Desktop Layout -->
+      <div class="d-none d-md-block">
+        <div class="row">
+          <div class="col-6">
+            <h1>
+              <span style="color: #876445;">Universal</span> Musical Instrument Lexicon
+            </h1>
+          </div>
+          <div class="col-6 notranslate">
+            <h1>
+              Lexique <span style="color: #876445;">Universel</span> des Instruments de Musique
+            </h1>
+          </div>
         </div>
-        <div class="col-6 notranslate">
-          <h1>
-            Lexique <span style="color: #876445;">Universel</span> des Instruments de Musique
-          </h1>
+        <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" %}?language=English">
+              <button class="btn btn-warning rounded-pill start-btn">
+                Visit English Site
+              </button>
+            </a>
+          </div>
+          <div class="col-6 notranslate">
+            <a href="{% url "instrument-list" %}?language=French">
+              <button class="btn btn-warning rounded-pill start-btn">
+                Visitez le site en francais
+              </button>
+            </a>
+          </div>
         </div>
       </div>
-      <div class="row">
-        <div class="col-6">
+      <!-- Mobile Layout -->
+      <div class="d-md-none my-5 px-2">
+        <p class="notranslate">
+          <em>La version française suit.</em>
+        </p>
+        <!-- English Content -->
+        <div class="mb-5">
+          <h1>
+            <span style="color: #876445;">Universal</span> Musical Instrument Lexicon
+          </h1>
           <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" %}?language=English">
             <button class="btn btn-warning rounded-pill start-btn">
               Visit English Site
             </button>
           </a>
         </div>
-        <div class="col-6 notranslate">
+        <hr class="my-4" style="border-color: #876445; border-width: 2px;" />
+        <!-- French Content -->
+        <div class="mt-5 notranslate">
+          <h1>
+            Lexique <span style="color: #876445;">Universel</span> des Instruments de Musique
+          </h1>
+          <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>
           <a href="{% url "instrument-list" %}?language=French">
             <button class="btn btn-warning rounded-pill start-btn">
               Visitez le site en francais
@@ -56,6 +96,6 @@ <h1>
         </div>
       </div>
     </div>
-    <img id="bg-decor" src="{% static "assets/images/main/bg-decor.svg" %}" alt="background decoration" class="z-1" />
+    <img id="bg-decor" src="{% static "assets/images/main/bg-decor.svg" %}" alt="background decoration" class="z-1 opacity-50 img-fluid w-100 w-md-auto" />
   </div>
 {% endblock content %}
diff --git a/web-app/django/VIM/templates/main/registration/changePassword.html b/web-app/django/VIM/templates/main/registration/changePassword.html
index 1dfbd16..92faf29 100644
--- a/web-app/django/VIM/templates/main/registration/changePassword.html
+++ b/web-app/django/VIM/templates/main/registration/changePassword.html
@@ -4,43 +4,28 @@
   Change Password
 {% endblock registration_title %}
 
-{% block registration_content %}
-  <div class="container content-container d-flex justify-content-center align-items-center">
-    <div class="col-10 p-4 align-content-center account-container">
-      {% if form.errors %}
-        <div class="alert alert-danger p-2 z-2 d-flex justify-content-end message-container">
-          {% for field, error in form.errors.items %}{{ error }}{% endfor %}
-        </div>
-      {% endif %}
-      <div class="container z-1">
-        <div class="row">
-          <div class="col-6 my-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>
-                <div>{{ form.old_password }}</div>
-              </div>
-              <div class="mb-4">
-                <label for="exampleInputPassword1" class="form-label">New Password</label>
-                <div>{{ form.new_password1 }}</div>
-              </div>
-              <div class="mb-4">
-                <label for="exampleInputPassword2" class="form-label">
-                  Confirm New Password
-                </label>
-                <div>{{ form.new_password2 }}</div>
-              </div>
-              <button type="submit" class="btn btn-primary account-btn">
-                Change Password
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
+{% block left_column %}
+  <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>
+      <div>{{ form.old_password }}</div>
     </div>
-  </div>
-{% endblock registration_content %}
+    <div class="mb-4">
+      <label for="exampleInputPassword1" class="form-label">New Password</label>
+      <div>{{ form.new_password1 }}</div>
+    </div>
+    <div class="mb-4">
+      <label for="exampleInputPassword2" class="form-label">
+        Confirm New Password
+      </label>
+      <div>{{ form.new_password2 }}</div>
+    </div>
+    <button type="submit" class="btn btn-primary account-btn">
+      Change Password
+    </button>
+  </form>
+{% endblock left_column %}
diff --git a/web-app/django/VIM/templates/main/registration/login.html b/web-app/django/VIM/templates/main/registration/login.html
index 303f0a2..8eb6761 100644
--- a/web-app/django/VIM/templates/main/registration/login.html
+++ b/web-app/django/VIM/templates/main/registration/login.html
@@ -1,54 +1,35 @@
 {% extends "main/registration/registration_base.html" %}
 
-{% load static %}
-
 {% block registration_title %}
   Login
 {% endblock registration_title %}
 
-{% block registration_content %}
-  <div class="container content-container d-flex justify-content-center align-items-center">
-    <div class="col-10 p-4 align-content-center account-container">
-      {% if form.errors %}
-        <div class="alert alert-danger p-2 z-2 message-container">
-          {% for field, error in form.errors.items %}{{ error }}{% endfor %}
-        </div>
-      {% endif %}
-      <div class="container z-1">
-        <div class="row">
-          <div class="col-6 my-4 px-4 d-flex justify-content-center align-items-center">
-            <div class="col-12 mx-4 px-2">
-              <h5>
-                <strong>Login</strong>
-              </h5>
-              <form method="post">
-                {% csrf_token %}
-                <div class="my-4">
-                  <label for="exampleInputEmail" class="form-label">Email Address</label>
-                  <div>{{ form.username }}</div>
-                </div>
-                <div class="mb-4">
-                  <label for="exampleInputPassword" class="form-label">Password</label>
-                  <div>{{ form.password }}</div>
-                </div>
-                <button type="submit" class="btn btn-primary account-btn">Sign in</button>
-                {% comment %} <p class="mt-2">
-                  <a href="{% url 'main:reset_password' %}">Forgot your password?</a>
-                </p> {% endcomment %}
-              </form>
-            </div>
-          </div>
-          <div class="col-6 my-4 create-account-link d-flex align-items-center">
-            <div id="signup-option-separator" class="flex-fill">
-              <div class="text-center" id="error">
-                <img src="{% static "assets/images/sign-up.svg" %}" alt="sign up image" id="signup-decor" class="my-4" />
-                <p class="mb-1">Don't have an account?</p>
-                <a href="{% url 'main:register' %}">Create a new account</a>
-              </div>
-            </div>
-          </div>
-        </div>
+{% block left_column %}
+  <div class="col-12 mx-md-4 px-2">
+    <h5>
+      <strong>Login</strong>
+    </h5>
+    <form method="post">
+      {% csrf_token %}
+      <div class="my-4">
+        <label for="exampleInputEmail" class="form-label">Email Address</label>
+        <div>{{ form.username }}</div>
+      </div>
+      <div class="mb-4">
+        <label for="exampleInputPassword" class="form-label">Password</label>
+        <div>{{ form.password }}</div>
       </div>
-    </div>
+      <button type="submit" class="btn btn-primary account-btn">Sign in</button>
+    </form>
   </div>
-{% endblock registration_content %}
+{% endblock left_column %}
+
+{% block right_column %}
+  <p class="mb-1">Don't have an account?</p>
+  <a href="{% url 'main:register' %}">Create a new account</a>
+{% endblock right_column %}
+
+{% block mobile_link %}
+  <p class="mb-1">Don't have an account?</p>
+  <a href="{% url 'main:register' %}">Create a new account</a>
+{% endblock mobile_link %}
diff --git a/web-app/django/VIM/templates/main/registration/register.html b/web-app/django/VIM/templates/main/registration/register.html
index 4bbf7c3..317668b 100644
--- a/web-app/django/VIM/templates/main/registration/register.html
+++ b/web-app/django/VIM/templates/main/registration/register.html
@@ -4,39 +4,34 @@
   Register
 {% endblock registration_title %}
 
-{% block registration_content %}
-  <div class="container content-container d-flex justify-content-center align-items-center">
-    <div class="col-10 p-4 align-content-center account-container">
-      {% if form.errors %}
-        <div class="alert alert-danger p-2 z-2 message-container">
-          {% for field, error in form.errors.items %}{{ error }}{% endfor %}
-        </div>
-      {% endif %}
-      <div class="container z-1">
-        <div class="row">
-          <div class="col-6 my-4" 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>
-                <div>{{ form.username }}</div>
-              </div>
-              <div class="mb-4">
-                <label for="exampleInputPassword1" class="form-label">Password</label>
-                <div>{{ form.password1 }}</div>
-              </div>
-              <div class="mb-4">
-                <label for="exampleInputPassword2" class="form-label">Confirm Password</label>
-                <div>{{ form.password2 }}</div>
-              </div>
-              <button type="submit" class="btn btn-primary account-btn">Register</button>
-            </form>
-          </div>
-        </div>
-      </div>
+{% block left_column %}
+  <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>
+      <div class="col-12">{{ form.username }}</div>
     </div>
-  </div>
-{% endblock registration_content %}
+    <div class="mb-4">
+      <label for="exampleInputPassword1" class="form-label">Password</label>
+      <div class="col-12">{{ form.password1 }}</div>
+    </div>
+    <div class="mb-4">
+      <label for="exampleInputPassword2" class="form-label">Confirm Password</label>
+      <div class="col-12">{{ form.password2 }}</div>
+    </div>
+    <button type="submit" class="btn btn-primary account-btn">Register</button>
+  </form>
+{% endblock left_column %}
+
+{% block right_column %}
+  <p class="mb-1">Already have an account?</p>
+  <a href="{% url 'main:login' %}">Login</a>
+{% endblock right_column %}
+
+{% block mobile_link %}
+  <p class="mb-1">Already have an account?</p>
+  <a href="{% url 'main:login' %}">Login</a>
+{% endblock mobile_link %}
diff --git a/web-app/django/VIM/templates/main/registration/registration_base.html b/web-app/django/VIM/templates/main/registration/registration_base.html
index 0246a8e..c017243 100644
--- a/web-app/django/VIM/templates/main/registration/registration_base.html
+++ b/web-app/django/VIM/templates/main/registration/registration_base.html
@@ -12,12 +12,49 @@
 {% endblock css_files %}
 
 {% block content %}
-  <div class="container py-5">
+  <div class="container py-0 py-md-5">
     <div class="row">
       <div class="col-12">
-        {% block registration_content %}
-        {% endblock registration_content %}
+        <div class="container content-container px-0 px-md-4 py-4 d-flex justify-content-center align-items-center">
+          <div class="col-12 p-4 align-content-center account-container position-relative">
+            {% if form.errors %}
+              <div class="alert alert-danger p-2 z-2 message-container">
+                {% for field, error in form.errors.items %}{{ error }}{% endfor %}
+              </div>
+            {% endif %}
+            <!-- Mobile background image (visible only on small screens) -->
+            <div class="d-md-none position-absolute top-50 start-50 translate-middle z-0 w-100 h-100 d-flex justify-content-center align-items-center">
+              <img src="{% static "assets/images/sign-up.svg" %}" alt="" class="opacity-50 w-100 h-100" style="max-width: 80%; max-height: 80%;" />
+            </div>
+            <div class="container z-1 position-relative">
+              <div class="row flex-column flex-md-row">
+                <!-- Left Column -->
+                <div class="col-12 col-md-6 my-4 px-0 px-md-4">
+                  {% block left_column %}
+                  {% endblock left_column %}
 
+                </div>
+                <!-- Right Column (hidden on mobile) -->
+                <div class="col-12 col-md-6 my-4 create-account-link d-flex align-items-center">
+                  <div id="signup-option-separator" class="flex-fill d-none d-md-block">
+                    <div class="text-center" id="error">
+                      <img src="{% static "assets/images/sign-up.svg" %}" alt="sign up image" id="signup-decor" class="my-4" />
+                      {% block right_column %}
+                      {% endblock right_column %}
+
+                    </div>
+                  </div>
+                </div>
+                <!-- Mobile Sign Up Link (visible only on small screens) -->
+                <div class="col-12 d-md-none text-center">
+                  {% block mobile_link %}
+                  {% endblock mobile_link %}
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
diff --git a/web-app/django/VIM/templates/main/registration/resetPassword.html b/web-app/django/VIM/templates/main/registration/resetPassword.html
index 2d099bc..4810355 100644
--- a/web-app/django/VIM/templates/main/registration/resetPassword.html
+++ b/web-app/django/VIM/templates/main/registration/resetPassword.html
@@ -4,42 +4,23 @@
   Reset Password
 {% endblock registration_title %}
 
-{% block registration_content %}
-  <div class="container content-container d-flex justify-content-center align-items-center">
-    <div class="col-10 p-4 align-content-center account-container">
-      {% if form.errors %}
-        <div class="alert alert-danger p-2 z-2 message-container">
-          {% for field, error in form.errors.items %}{{ error }}{% endfor %}
-        </div>
-      {% endif %}
-      <div class="container pb-4 z-1 d-flex flex-column">
-        <div class="row">
-          <div class="col-12">
-            <h5>
-              <strong>Reset Password</strong>
-            </h5>
-            <p class="mt-4">
-              Forgotten your password?
-              <br />
-              Enter your email address below, and we'll email instructions for setting a new one.
-            </p>
-          </div>
-        </div>
-        <div class="row mb-4">
-          <div class="col-12 mb-4">
-            <form method="post">
-              {% csrf_token %}
-              <div class="mt-2 mb-4">
-                <label for="exampleInputEmail" class="form-label">Email Address</label>
-                <div>{{ form.email }}</div>
-              </div>
-              <button type="submit" class="btn btn-primary mb-4 account-btn">
-                Send Password Reset Email
-              </button>
-            </form>
-          </div>
-        </div>
-      </div>
+{% block left_column %}
+  <h5>
+    <strong>Reset Password</strong>
+  </h5>
+  <p class="mt-4">
+    Forgotten your password?
+    <br />
+    Enter your email address below, and we'll email instructions for setting a new one.
+  </p>
+  <form method="post">
+    {% csrf_token %}
+    <div class="mt-2 mb-4">
+      <label for="exampleInputEmail" class="form-label">Email Address</label>
+      <div>{{ form.email }}</div>
     </div>
-  </div>
-{% endblock registration_content %}
+    <button type="submit" class="btn btn-primary mb-4 account-btn">
+      Send Password Reset Email
+    </button>
+  </form>
+{% endblock left_column %}
diff --git a/web-app/django/VIM/templates/main/registration/resetPasswordComplete.html b/web-app/django/VIM/templates/main/registration/resetPasswordComplete.html
index 0b17e5b..565493d 100644
--- a/web-app/django/VIM/templates/main/registration/resetPasswordComplete.html
+++ b/web-app/django/VIM/templates/main/registration/resetPasswordComplete.html
@@ -4,19 +4,11 @@
   Reset Password
 {% endblock registration_title %}
 
-{% block registration_content %}
-  <div class="container">
-    <div class="row">
-      <div class="mr-3 p-4 col-md-12">
-        <div class="col-md mt-4 login-form">
-          <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 registration_content %}
+{% block left_column %}
+  <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>
+{% endblock left_column %}
diff --git a/web-app/django/VIM/templates/main/registration/resetPasswordDone.html b/web-app/django/VIM/templates/main/registration/resetPasswordDone.html
index 7087a5f..fe5066f 100644
--- a/web-app/django/VIM/templates/main/registration/resetPasswordDone.html
+++ b/web-app/django/VIM/templates/main/registration/resetPasswordDone.html
@@ -4,26 +4,11 @@
   Reset Password
 {% endblock registration_title %}
 
-{% block registration_content %}
-  <div class="container content-container d-flex justify-content-center align-items-center">
-    <div class="col-10 p-4 account-container">
-      {% if form.errors %}
-        <div class="alert alert-danger p-2 z-2 message-container">
-          {% for field, error in form.errors.items %}{{ error }}{% endfor %}
-        </div>
-      {% endif %}
-      <div class="container mt-4 pt-4 z-1 d-flex flex-column">
-        <div class="row">
-          <div class="col-12">
-            <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 registration_content %}
+{% block left_column %}
+  <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>
+{% endblock left_column %}
diff --git a/web-app/frontend/assets/css/main/index.css b/web-app/frontend/assets/css/main/index.css
index c62053f..cad5590 100644
--- a/web-app/frontend/assets/css/main/index.css
+++ b/web-app/frontend/assets/css/main/index.css
@@ -35,7 +35,7 @@
 }
 
 .content-container {
-  height: 80vh;
+  min-height: 80vh;
   position: relative;
 }
 
@@ -75,3 +75,27 @@
   color: #435334;
   animation: pulse 0.5s both;
 }
+
+/* Mobile */
+@media (max-width: 768px) {
+  .content-container h1 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+    line-height: 1.5;
+  }
+
+  .content-container p {
+    font-size: 1rem;
+    margin-bottom: 2rem;
+    line-height: 2;
+  }
+
+  #bg-decor {
+    position: fixed;
+    bottom: 25%;
+    left: 0;
+    width: 100%;
+    max-height: 45vh;
+    object-fit: contain;
+  }
+}
diff --git a/web-app/frontend/assets/css/main/login.css b/web-app/frontend/assets/css/main/login.css
index 4f7e454..d4c858f 100644
--- a/web-app/frontend/assets/css/main/login.css
+++ b/web-app/frontend/assets/css/main/login.css
@@ -1,14 +1,13 @@
 .content-container {
-  height: 80vh;
-  width: 80vw;
+  min-height: 80vh;
+  min-width: 80vw;
 }
 
 .account-container {
   background-color: white;
   border: 3px solid #9eb384;
   border-radius: 30px;
-  height: 60vh;
-  min-height: 400px;
+  min-height: 60vh;
   position: relative;
   color: #435334;
 }
