diff --git a/app/pages/signup/signup.html b/app/pages/signup/signup.html
index 186943e..f2ad994 100644
--- a/app/pages/signup/signup.html
+++ b/app/pages/signup/signup.html
@@ -6,17 +6,13 @@
 {% endblock %}
 {% block content %}
 <div id="main">
-    <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-row">
-            <div class="signup-card">
-                <p class="signup-subtitle">2016+ with freedom.</p>
-                <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">
+    <div class="signup-container d-flex align-items-center justify-content-center">
+        <div class="signup-panel px-4 py-4">
+            <img src="/static/img/LoginLogo.png" alt="NEXIUM" class="signup-logo" />
+            <p class="signup-subtitle">2016+ with freedom.</p>
             {% with messages = get_flashed_messages() %}
             {% if messages %}
-            <div>
+            <div class="mb-2">
             {% for message in messages %}
                 <div class="alert border border-danger p-2 text-center messagealerts">
                     {{ message }}
@@ -37,16 +33,12 @@
                         <p>I agree to the <a href="/terms">Terms of Service</a> and <a href="/privacy">Privacy Policy</a></p>
                     </label>
                 </div>
-                <div class="cf-turnstile d-table mb-2" style="margin: 0 auto;" data-theme="dark" data-sitekey="{{turnstilekey}}"></div>
+                <div class="cf-turnstile d-table mb-2 mx-auto" data-theme="dark" data-sitekey="{{turnstilekey}}"></div>
                 {% if SignupEnabled: %}<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>{%endif%}
                 <button type="submit" class="btn btn-primary mb-3" {% if not SignupEnabled: %}disabled{% endif %}>Signup</button>
             </form>
             <div class="text-center mt-2">
-                <p>Already have an account? <a href="/login">Login</a>
-            </div>
-        </div>
-                    </div>
-            </div>
+                <p>Already have an account? <a href="/login">Login</a></p>
             </div>
         </div>
     </div>
diff --git a/app/static/css/signup.css b/app/static/css/signup.css
index fc69645..5977b45 100644
--- a/app/static/css/signup.css
+++ b/app/static/css/signup.css
@@ -1,7 +1,7 @@
 body {
-    background: radial-gradient(circle, #333 10%, transparent 11%),radial-gradient(circle at bottom left, #333 5%, transparent 6%),radial-gradient(circle at bottom right, #333 5%, transparent 6%),radial-gradient(circle at top left, #333 5%, transparent 6%),radial-gradient(circle at top right, #333 5%, transparent 6%);
+    background: radial-gradient(circle, var(--auth-dot) 10%, transparent 11%),radial-gradient(circle at bottom left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at bottom right, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top left, var(--auth-dot) 5%, transparent 6%),radial-gradient(circle at top right, var(--auth-dot) 5%, transparent 6%);
     background-size: 3em 3em;
-    background-color: rgb(20,20,20);
+    background-color: var(--auth-bg);
 }
 
 #main {
@@ -12,24 +12,30 @@ body {
 }
 
 .signup-container {
-    min-width: 330px;
-    display: inline-block;
-    background-color: rgba(25,25,25, 1);
-    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
+    width: 100%;
+    padding: 24px 16px;
 }
 
-/* only align h1 tags */
-.signup-container h1 {
-    text-align: center;
-    margin-bottom: 0;
-    font-size: 3.5rem;
-    font-weight: 700;
+.signup-panel {
+    width: min(100%, 420px);
+    background-color: var(--auth-card-bg);
+    box-shadow: 0 0 15px var(--auth-card-shadow);
+    border-radius: 2px;
 }
-.signup-container p {
+
+.signup-logo {
+    display: block;
+    margin: 0 auto 8px;
+    max-width: 320px;
+    width: 100%;
+    height: auto;
+}
+
+.signup-subtitle {
     text-align: center;
-    padding: 0;
-    margin-bottom: 15px; 
     font-size: small;
+    margin-bottom: 12px;
+    color: rgba(230, 238, 248, 0.9);
 }
 
 .signup-container button {
@@ -51,14 +57,35 @@ body {
 }
 
 #password {
-    min-width: 300px;
     margin-top: 10px;
     margin-bottom: 10px;
 }
 
+#username,
+#invite-key {
+    min-width: 0;
+}
+
+#checkboxTerms {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    margin: 8px 0 12px;
+}
+
+#checkboxTerms p {
+    margin: 0;
+    text-align: left;
+    font-size: small;
+}
+
+.form-check-input {
+    margin-top: 0.2rem;
+}
+
 .messagealerts {
-    background: rgba(255, 0, 0, 0.2);
-    color: rgb(226, 226, 226);
+    background: var(--alert-bg);
+    color: var(--alert-text);
     word-wrap: break-word;
 }
 
@@ -67,15 +94,25 @@ body {
     word-wrap: break-word;
 }
 
-a {
+.signup-container a {
     text-decoration: none !important;
     color: rgb(32, 147, 255) !important;
     font-weight: 500 !important;
     transition: 0.2s;
 }
 
-a:hover {
+.signup-container a:hover {
     text-decoration: none !important;
     color: rgb(3, 133, 255) !important;
     transition: 0.2s;
 }
+
+@media (max-width: 480px) {
+    .signup-panel {
+        width: 100%;
+    }
+
+    .signup-logo {
+        max-width: 240px;
+    }
+}