diff --git a/assets/pages/login.vue b/assets/pages/login.vue
index 2fd3ef8f..9403a86e 100644
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -2,34 +2,42 @@
   <div class="card w-96 flex-shrink-0 bg-base-lighter shadow-2xl">
     <div class="card-body">
       <form action="" method="post" @submit.prevent="onLogin" ref="form" class="flex flex-col gap-8">
-        <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
-          <mdi:account class="has-[+:focus]:text-primary" />
-          <input
-            type="text"
-            class="grow"
-            :placeholder="$t('label.username')"
-            name="username"
-            autocomplete="username"
-            autofocus
-            required
-            :disabled="loading"
-          />
+        <label class="form-control w-full">
+          <label
+            class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary"
+            :class="{ 'input-error': error }"
+          >
+            <mdi:account class="has-[+:focus]:text-primary" :class="{ 'text-error': error }" />
+            <input
+              type="text"
+              class="grow"
+              :class="{ 'text-error': error }"
+              :placeholder="$t('label.username')"
+              name="username"
+              autocomplete="username"
+              autofocus
+              required
+              :disabled="loading"
+            />
+          </label>
+          <label class="label text-error" v-if="error">
+            {{ $t("error.invalid-auth") }}
+          </label>
         </label>
-        <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
-          <mdi:key class="has-[+:focus]:text-primary" />
-          <input
-            type="password"
-            class="grow"
-            :placeholder="$t('label.password')"
-            name="password"
-            autocomplete="current-password"
-            autofocus
-            required
-            :disabled="loading"
-          />
-        </label>
-        <label class="label text-red" v-if="error">
-          {{ $t("error.invalid-auth") }}
+        <label class="form-control w-full">
+          <label class="input input-bordered flex items-center gap-2 border-2 has-[:focus]:input-primary">
+            <mdi:key class="has-[+:focus]:text-primary" />
+            <input
+              type="password"
+              class="grow"
+              :placeholder="$t('label.password')"
+              name="password"
+              autocomplete="current-password"
+              autofocus
+              required
+              :disabled="loading"
+            />
+          </label>
         </label>
 
         <button class="btn btn-primary uppercase" type="submit">