diff --git a/app/pages/signup/signup.html b/app/pages/signup/signup.html
index e1b3a4b..9ac6b66 100644
--- a/app/pages/signup/signup.html
+++ b/app/pages/signup/signup.html
@@ -9,9 +9,11 @@
     <div class="signup-wrapper" style="position:relative;">
         <!-- logo moved outside the signup card so it can overlap/escape the container -->
         <img src="/static/img/LoginLogo.png" alt="NEXIUM" class="logo-outside d-none d-lg-block" />
-        <div class="signup-container d-flex align-items-center justify-content-center">
-            <div style="padding: 10px;min-width:300px;" class="ps-md-4 pe-md-4">
-                <p class="signup-subtitle">2018+ with freedom.</p>
+        <div class="signup-row">
+            <div class="signup-card">
+                <div class="signup-container d-flex align-items-center justify-content-center">
+                    <div style="padding: 10px;min-width:300px;" class="ps-md-4 pe-md-4">
+                        <p class="signup-subtitle">2018+ with freedom.</p>
             {% with messages = get_flashed_messages() %}
             {% if messages %}
             <div>
@@ -43,7 +45,13 @@
                 <p>Already have an account? <a href="/login">Login</a>
             </div>
         </div>
-        <img style="aspect-ratio: 7/4;min-height: 400px;max-height: 550px;" class="d-lg-block d-none" src="/static/img/LoginImage2.png" alt="Signup Image">
+                    </div>
+                </div>
+            </div>
+            <div class="signup-visual d-none d-lg-block">
+                <img style="width:100%;height:100%;object-fit:cover;min-height:400px;max-height:550px;" src="/static/img/LoginImage2.png" alt="Signup Image">
+            </div>
+        </div>
     </div>
 </div>
 {% endblock %}