diff --git a/corpus/accounts/forms.py b/corpus/accounts/forms.py
index 6ae0471e..3a12b014 100644
--- a/corpus/accounts/forms.py
+++ b/corpus/accounts/forms.py
@@ -8,8 +8,9 @@
 
 
 class CorpusCreationForm(UserCreationForm):
-    phone_no = forms.CharField(required=True)
+    phone_no = forms.CharField(required=True, max_length=10)
     gender = forms.ChoiceField(choices=GENDERS, required=True)
+    first_name = forms.CharField(max_length=30, required=True, help_text="Required.")
 
     error_css_class = "text-sm text-error"
 
diff --git a/corpus/templates/accounts/login.html b/corpus/templates/accounts/login.html
index ad981c6b..05e8c49c 100644
--- a/corpus/templates/accounts/login.html
+++ b/corpus/templates/accounts/login.html
@@ -5,32 +5,57 @@
 {% endblock %}
 
 {% block content %}
-<div class="card w-1/2 mx-auto my-10 bg-base-100 glass shadow-xl prose">
+ <div class="card w-3/4 md:w-2/5 mx-auto my-10 bg-neutral shadow-xl">
     <div class="card-body">
-      <h2 class="card-title">Login</h2>
+        <h1 class="card-title text-2xl">Login</h1>
 
-        <form method="post">
+        <form method="post" action="{% url 'accounts_signin' %}" class="py-5">
             {% csrf_token %}
 
             {% if form.non_field_errors %}
-                {{ form.non_field_errors }}
+                {% for error in form.non_field_errors %}
+                    <div role="alert" class="alert alert-error mt-1">
+                        <span>{{ error }}</span>
+                    </div>
+                {% endfor %}
             {% endif %}
 
-            <div class="grid grid-cols-1 gap-6">
-                {% for field in form %}
-                    <label class="block">
-                        <span class="text-base-700">{{ field.label_tag }}</span>
-                        {{ field }}
-                        <p class="text-sm text-error">{{ form.errors.field.errors }}</p>
-                    </label>
-                {% endfor %}
+            <div class="w-full my-2">
+                <label for="{{ form.email.id_for_label }}">Email</label>
+                {{ form.username }}
+                {% if form.username.errors %}
+                    <div class="my-1">
+                        <div role="alert" class="alert alert-error">
+                            {{ form.username.errors }}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+
+            <div class="w-full my-2">
+                <label for="{{ form.password.id_for_label }}">Password</label>
+                {{ form.password }}
+                {% if form.password.errors %}
+                    <div class="my-1">
+                        <div role="alert" class="alert alert-error">
+                            {{ form.password.errors }}
+                        </div>
+                    </div>
+                {% endif %}
             </div>
 
             <div class="card-actions justify-end mt-5">
-                <button class="btn btn-primary">Login</button>
-              </div>
+              <button class="btn btn-primary">Login</button>
+            </div>
         </form>
-        <p class="text-center">If you don't have an account, <a href="{% url 'accounts_signup' %}">register here</a>.</p>
+
+        <div class="flex flex-col w-full">
+            <div class="divider divider-primary">OR</div>
+        </div>
+
+        <div class="flex flex-col w-full">
+            <p>If you don't have an account, <a href="{% url 'accounts_signup' %}" class="underline underline-offset-2">create one here</a>.</p>
+        </div>
     </div>
-  </div>
+ </div>
 {% endblock %}
diff --git a/corpus/templates/accounts/signup.html b/corpus/templates/accounts/signup.html
index ba2cfb68..2550b522 100644
--- a/corpus/templates/accounts/signup.html
+++ b/corpus/templates/accounts/signup.html
@@ -5,28 +5,114 @@
 {% endblock %}
 
 {% block content %}
-<div class="card w-1/2 mx-auto my-10 bg-base-100 glass shadow-xl prose">
+<div class="card w-3/4 md:w-1/2 mx-auto my-10 bg-neutral shadow-xl">
     <div class="card-body">
-      <h2 class="card-title">Sign up</h2>
+        <h1 class="card-title text-2xl">Sign Up</h1>
 
-        <form method="post">
+        <form method="post" action="{% url 'accounts_signup' %}" class="py-5">
             {% csrf_token %}
 
-            <div class="grid grid-cols-1 gap-6">
-                {% for field in form %}
-                    <label class="block">
-                        <span class="text-base-700">{{ field.label_tag }}</span>
-                        {{ field }}
-                        <p class="text-sm text-error">{{ field.errors.as_text }}</p>
-                    </label>
+            {% if form.non_field_errors %}
+                {% for error in form.non_field_errors %}
+                    <div role="alert" class="alert alert-error mt-1">
+                        <span>{{ error }}</span>
+                    </div>
                 {% endfor %}
+            {% endif %}
+
+            <div class="flex flex-col md:flex-row">
+                <div class="w-full my-2 md:w-1/2 md:mr-2">
+                    <label for="{{ form.first_name.id_for_label }}">First Name</label>
+                    {{ form.first_name }}
+                    {% if form.first_name.errors %}
+                        <div class="my-1">
+                            <div role="alert" class="alert alert-error">
+                                {{ form.first_name.errors }}
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+
+                <div class="w-full my-2 md:w-1/2 md:ml-2">
+                    <label for="{{ form.last_name.id_for_label }}">Last Name</label>
+                    {{ form.last_name }}
+                    {% if form.last_name.errors %}
+                        <div class="my-1">
+                            <div role="alert" class="alert alert-error">
+                                {{ form.last_name.errors }}
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
+
+            <div class="flex flex-col md:flex-row">
+                <div class="w-full my-2 md:w-1/2 md:mr-2">
+                    <label for="{{ form.phone_no.id_for_label }}">Phone Number</label>
+                    {{ form.phone_no }}
+                    {% if form.phone_no.errors %}
+                        <div class="my-1">
+                            <div role="alert" class="alert alert-error">
+                                {{ form.phone_no.errors }}
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+
+                <div class="w-full my-2 md:w-1/2 md:ml-2">
+                    <label for="{{ form.gender.id_for_label }}">Gender</label>
+                    {{ form.gender }}
+                    {% if form.gender.errors %}
+                        <div class="my-1">
+                            <div role="alert" class="alert alert-error">
+                                {{ form.gender.errors }}
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
             </div>
 
+            <div class="w-full my-2">
+                <label for="{{ form.email.id_for_label }}">Email</label>
+                {{ form.email }}
+                {% if form.email.errors %}
+                    <div class="my-1">
+                        <div role="alert" class="alert alert-error">
+                            {{ form.email.errors }}
+                        </div>
+                    </div>
+                {% endif %}
+            </div>
+
+            <div class="flex flex-col md:flex-row">
+                <div class="w-full my-2 md:w-1/2 md:mr-2">
+                    <label for="{{ form.password1.id_for_label }}">Password</label>
+                    {{ form.password1 }}
+                    {% if form.password1.errors %}
+                        <div class="my-1">
+                            <div role="alert" class="alert alert-error">
+                                {{ form.password1.errors }}
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+
+                <div class="w-full my-2 md:w-1/2 md:ml-2">
+                    <label for="{{ form.password2.id_for_label }}">Password Confirmation</label>
+                    {{ form.password2 }}
+                    {% if form.password2.errors %}
+                        <div class="my-1">
+                            <div role="alert" class="alert alert-error">
+                                {{ form.password2.errors }}
+                            </div>
+                        </div>
+                    {% endif %}
+                </div>
+            </div>
             <div class="card-actions justify-end mt-5">
-                <button class="btn btn-primary">Sign up</button>
-              </div>
+              <button class="btn btn-primary">Sign up</button>
+            </div>
         </form>
-        <p class="text-center">If you already have an account, <a href="{% url 'accounts_signin' %}">login</a> instead.</p>
     </div>
-  </div>
+</div>
 {% endblock %}
diff --git a/corpus/templates/base.html b/corpus/templates/base.html
index 6dd90918..e08eaf0c 100644
--- a/corpus/templates/base.html
+++ b/corpus/templates/base.html
@@ -60,9 +60,12 @@
 
     {% if messages %}
       {% for message in messages %}
-        <div class="alert alert-{{ message.tags }} w-3/4 mx-auto my-5">
-          {{ message }}
-        </div>
+          <div class="toast toast-start message-fade-away">
+              <div class="alert alert-{{ message.tags }}">
+                  <span>{{ message }}</span>
+                  <span>{{ message.id }}</span>
+              </div>
+          </div>
       {% endfor %}
     {% endif %}
 
@@ -85,6 +88,33 @@
 
     {% block script %}
     {% endblock %}
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function () {
+            const fadeDivs = document.querySelectorAll(".message-fade-away");
+            fadeDivs.forEach(function (fadeDiv) {
+             setTimeout(function () {
+                 fadeOut(fadeDiv);
+             }, 5000);
+            });
+        });
+
+        function fadeOut(element) {
+            let opacity = 1;
+            const intervalDuration = 50;
+            const intervalStep = 0.05;
+
+            let fadeInterval = setInterval(function () {
+                if (opacity > 0) {
+                    opacity -= intervalStep;
+                    element.style.opacity = opacity;
+                } else {
+                    clearInterval(fadeInterval);
+                    element.parentNode.removeChild(element);
+                }
+            }, intervalDuration);
+        }
+    </script>
   </body>
 
 </html>