diff --git a/assets/typescript/misuzu.ts b/assets/typescript/misuzu.ts
index 5d65e731..dd80df51 100644
--- a/assets/typescript/misuzu.ts
+++ b/assets/typescript/misuzu.ts
@@ -29,16 +29,19 @@ window.addEventListener('load', () => {
         changelogChangeAction.title = "This is supposed to be sideways, but your browser doesn't support that.";
     }
 
-    const loginForm: HTMLFormElement = document.getElementById('msz-login-form') as HTMLFormElement;
+    const loginForms: HTMLCollectionOf<HTMLFormElement> = document.getElementsByClassName('js-login-form') as HTMLCollectionOf<HTMLFormElement>;
 
-    if (loginForm) {
-        const loginAvatar: HTMLElement = document.getElementById('login-avatar'),
-            loginUsername: HTMLInputElement = document.getElementById('login-username') as HTMLInputElement;
+    if (loginForms.length > 0) {
+        for (let i = 0; i < loginForms.length; i++) {
+            const loginForm: HTMLFormElement = loginForms[i],
+                loginAvatar: HTMLElement = loginForm.getElementsByClassName('js-login-avatar')[0] as HTMLElement,
+                loginUsername: HTMLInputElement = loginForm.getElementsByClassName('js-login-username')[0] as HTMLInputElement;
 
-        // Initial bump, in case anything is prefilled.
-        loginFormUpdateAvatar(loginAvatar, loginUsername, true);
+            // Initial bump, in case anything is prefilled.
+            loginFormUpdateAvatar(loginAvatar, loginUsername, true);
 
-        loginUsername.addEventListener('keyup', () => loginFormUpdateAvatar(loginAvatar, loginUsername));
+            loginUsername.addEventListener('keyup', () => loginFormUpdateAvatar(loginAvatar, loginUsername));
+        }
     }
 });
 
diff --git a/templates/auth/macros.twig b/templates/auth/macros.twig
index 0668ed76..179bf456 100644
--- a/templates/auth/macros.twig
+++ b/templates/auth/macros.twig
@@ -1,15 +1,15 @@
-{% macro auth_login(username, message, is_welcome) %} {# please only use this once per page, it has script shit rn #}
+{% macro auth_login(username, message, is_welcome) %}
     {% set is_welcome = is_welcome|default(false) %}
 
     {% from '_layout/input.twig' import input_hidden, input_csrf, input_text %}
 
-    <form class="container auth" method="post" action="/auth.php" id="msz-login-form">
+    <form class="container auth js-login-form" method="post" action="/auth.php">
         {{ input_hidden('auth[mode]', 'login') }}
         {{ input_csrf('login') }}
 
         <div class="auth__header">
             <div class="auth__header__wrapper">
-                <div class="avatar auth__avatar" id="login-avatar"
+                <div class="avatar auth__avatar js-login-avatar"
                     style="background-image:url('/profile.php?u=0&amp;m=avatar');"></div>
             </div>
         </div>
@@ -23,7 +23,7 @@
         {% endif %}
 
         <div class="auth__form">
-            {{ input_text('auth[username]', 'auth__input', username|default(''), 'text', 'Username', true, {'id':'login-username'}) }}
+            {{ input_text('auth[username]', 'auth__input js-login-username', username|default(''), 'text', 'Username', true) }}
             {{ input_text('auth[password]', 'auth__input', '', 'password', 'Password', true) }}
 
             <button class="input__button">Login</button>