diff --git a/core/static/user/login.scss b/core/static/user/login.scss
new file mode 100644
index 00000000..4121579e
--- /dev/null
+++ b/core/static/user/login.scss
@@ -0,0 +1,78 @@
+html,
+body {
+  box-sizing: border-box;
+  height: 100%;
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+}
+
+#page {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#quick_notif,
+#info_boxes,
+#page > nav {
+  display: none !important;
+}
+
+#content {
+  display: flex;
+  flex-direction: column;
+  padding: 10px !important;
+  box-shadow: none !important;
+  background-color: white !important;
+  margin: 0;
+
+  > div,
+  > form {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    width: 100%;
+    max-width: 500px;
+
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      width: 100%;
+
+      > label {
+        width: 100%;
+
+        @media (min-width: 500px) {
+          width: 300px;
+        }
+      }
+    }
+
+    > input,
+    > div > input {
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 500px;
+
+      @media (min-width: 500px) {
+        max-width: 300px;
+      }
+    }
+
+    > .danger,
+    > div > error {
+      color: red;
+      text-align: center;
+    }
+  }
+}
\ No newline at end of file
diff --git a/core/templates/core/login.jinja b/core/templates/core/login.jinja
index 789e38a7..c7d37241 100644
--- a/core/templates/core/login.jinja
+++ b/core/templates/core/login.jinja
@@ -1,35 +1,65 @@
 {% extends "core/base.jinja" %}
 
+{%- block additional_css -%}
+    <link rel="stylesheet" href="{{ scss('core/override.scss') }}">
+    <link rel="stylesheet" href="{{ scss('user/login.scss') }}">
+{%- endblock -%}
+
 {% block title %}
-{% trans %}Login{% endtrans %}
+    {% trans %}Login{% endtrans %}
 {% endblock %}
 
 {% block content %}
 
-{% if form.errors %}
-<p>{% trans %}Your username and password didn't match. Please try again.{% endtrans %}</p>
-{% endif %}
 
-{% if next %}
-    {% if user.is_authenticated %}
-    <p>{% trans %}Your account doesn't have access to this page. To proceed,
-    please login with an account that has access.{% endtrans %}</p>
-    {% else %}
-    <p>{% trans %}Please login or create an account to see this page.{% endtrans %}</p>
+    {% if next %}
+        {% if user.is_authenticated %}
+        <p>{% trans %}Your account doesn't have access to this page. To proceed,
+        please login with an account that has access.{% endtrans %}</p>
+        {% else %}
+        <p>{% trans %}Please login or create an account to see this page.{% endtrans %}</p>
+        {% endif %}
     {% endif %}
-{% endif %}
 
-<form method="post" action="{{ url('core:login') }}">
-{% csrf_token %}
-<p>{{ form.username.errors }}<label for="{{ form.username.name }}">{{ form.username.label }}
-</label><input id="id_username" maxlength="254" name="username" type="text" autofocus="autofocus" /></p>
-<p>{{ form.password.errors }}<label for="{{ form.password.name }}">{{ form.password.label }}</label>{{ form.password }}</p>
-<input type="hidden" name="next" value="{{ next }}">
-<p><input type="submit" value="{% trans %}login{% endtrans %}"></p>
-</form>
+    <form method="post" action="{{ url('core:login') }}">
+        {% if form.errors %}
+            <p class="danger">{% trans %}Your username and password didn't match. Please try again.{% endtrans %}</p>
+            <br>
+        {% endif %}
 
-{# Assumes you setup the password_reset view in your URLconf #}
-<p><a href="{{ url('core:password_reset') }}">{% trans %}Lost password?{% endtrans %}</a></p>
-<p><a href="{{ url('core:register') }}">{% trans %}Create account{% endtrans %}</a></p>
+        {% csrf_token %}
 
+        <div>
+            <label for="{{ form.username.name }}">{{ form.username.label }}</label>
+            <input id="id_username" maxlength="254" name="username" type="text" autofocus="autofocus" />
+            {{ form.username.errors }}
+        </div>
+
+        <div>
+            <label for="{{ form.password.name }}">{{ form.password.label }}</label>
+            {{ form.password }}
+            {{ form.password.errors }}
+        </div>
+
+        <input type="hidden" name="next" value="{{ next }}">
+        <input type="submit" value="{% trans %}Login{% endtrans %}">
+
+
+        {# Assumes you setup the password_reset view in your URLconf #}
+        <p>
+            <a href="{{ url('core:password_reset') }}">{% trans %}Lost password?{% endtrans %}</a>
+            &nbsp;&nbsp;
+            <a href="{{ url('core:register') }}">{% trans %}Create account{% endtrans %}</a>
+        </p>
+    </form>
+{% endblock %}
+
+{% block additional_js %}
+    <script defer>
+    $(() => {
+        $("#info_boxes").remove();
+        $("#page > nav").remove();
+        $("#quick_notif").remove();
+    })
+    </script>
 {% endblock %}