diff --git a/app/models.py b/app/models.py
index 717a1cf..681a433 100644
--- a/app/models.py
+++ b/app/models.py
@@ -40,7 +40,6 @@ class Drink(models.Model):
     do_not_count = models.BooleanField(default=False)
 
     def delete(self, *args, **kwargs):
-        # we flag the field as deleted.
         self.deleted = True
         super().save()
 
@@ -108,9 +107,10 @@ class Order(models.Model):
     price_sum = models.DecimalField(max_digits=6, decimal_places=2, default=0, editable=False)
     content_litres = models.DecimalField(max_digits=6, decimal_places=3, default=0, editable=False)
 
+    # TODO: Add more comments on how and why the save & delete functions are implemented
+    # address this in a refactoring issue.
+
     def save(self, *args, **kwargs):
-        # saving this may affect other fields
-        # so we reimplement the save function
         drink = Drink.objects.get(pk=self.drink.pk)
         if self._state.adding and drink.available > 0:
             if not drink.do_not_count:
@@ -126,7 +126,6 @@ class Order(models.Model):
             raise ValidationError("This entry can't be changed.")
     
     def delete(self, *args, **kwargs):
-        # when deleting, we affect other fields as well.
         self.user.balance += self.price_sum
         self.user.save()
         drink = Drink.objects.get(pk=self.drink.pk)
diff --git a/app/templates/baselayout.html b/app/templates/baselayout.html
index 97ac907..5783cf9 100644
--- a/app/templates/baselayout.html
+++ b/app/templates/baselayout.html
@@ -25,7 +25,7 @@
             <div class="flex flex-center">
                 {% translate "An error occured. Please log out and log in again." %}
                 <br>
-                <a class="button" href="/accounts/logout">log out</a>
+                <a href="/accounts/logout">log out</a>
             </div>
             {% endif %}
         </main>
diff --git a/app/templates/deposit.html b/app/templates/deposit.html
index cf3dbc1..bbce3e1 100644
--- a/app/templates/deposit.html
+++ b/app/templates/deposit.html
@@ -8,16 +8,20 @@
 
 {% block headAdditional %}
 <link rel="stylesheet" href="/static/css/simple-keyboard.css">
-<link rel="stylesheet" href="/static/css/simple-keyboard_custom.css">
+<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
 {% endblock %}
 
 {% block content %}
-<h1 class="formheading">{% translate "Deposit" %}</h1>
 <form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/deposit">
     {% csrf_token %}
+    <h1 class="formheading">{% translate "Deposit" %}</h1>
     <div class="flex forminput">
-        <input type="number" name="depositamount" class="keyboard-input depositamount" max="9999.99" min="1.00" step="0.01" placeholder="{% translate 'Amount' %} ({{ currency_suffix }})" autofocus required>
+        <span>{% translate "Amount" %} {{ currency_suffix }}:</span>
+        <span>
+            <input type="number" name="depositamount" class="keyboard-input" max="9999.99" min="1.00" step="0.01" autofocus required>
+        </span>
     </div>
+    <div id="statusinfo"></div>
     <!-- Virtual Keyboard -->
     <div id="keyboard" class="simple-keyboard" data-layout="numeric"></div>
     <script src="/static/js/simple-keyboard.js"></script>
@@ -27,7 +31,6 @@
         <input type="submit" id="submitbtn" class="button" value='{% translate "confirm" %}'>
     </div>
 </form>
-<div id="statusinfo"></div>
 <script src="/static/js/custom_form.js"></script>
 <script src="/static/js/autoreload.js"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/footer.html b/app/templates/footer.html
index 63b51ec..289f81e 100644
--- a/app/templates/footer.html
+++ b/app/templates/footer.html
@@ -2,6 +2,6 @@
 <footer class="footer-container">
     <div class="flex flex-row flex-center flex-wrap footer">
         <div>Version {{ app_version }}</div>
-        <div>Copyright (C) 2021-2025, Julian Müller (ChaoticByte)</div>
+        <div>Copyright (C) 2021-2024, Julian Müller (ChaoticByte)</div>
     </div>
 </footer>
\ No newline at end of file
diff --git a/app/templates/order.html b/app/templates/order.html
index 2e5286f..2cae204 100644
--- a/app/templates/order.html
+++ b/app/templates/order.html
@@ -11,31 +11,31 @@
 <div class="flex flex-column flex-center">
 {% if drink and drink.available > 0 and not drink.deleted %}
 {% if user.balance > 0 or user.allow_order_with_negative_balance %}
-    <h1 class="formheading">{% translate "Order" %}</h1>
     <form id="orderform" class="flex flex-column flex-center appform gap-1rem">
         {% csrf_token %}
+        <h1 class="formheading">{% translate "Order" %}</h1>
         <div class="forminfo">
-            <span>{% translate "Drink" %}</span>
+            <span>{% translate "Drink" %}:</span>
             <span>{{ drink.product_name }}</span>
         </div>
         <div class="forminfo">
-            <span>{% translate "Price per Item" %} ({{ currency_suffix }})</span> 
+            <span>{% translate "Price per Item" %} ({{ currency_suffix }}):</span> 
             <span id="priceperdrink" data-drink-price="{% localize off %}{{ drink.price }}{% endlocalize %}">
                 {{ drink.price }}
             </span>
         </div>
         {% if not drink.do_not_count %}
         <div class="forminfo">
-            <span>{% translate "Available" %}</span>
+            <span>{% translate "Available" %}:</span>
             <span>{{ drink.available }}</span>
         </div>
         {% endif %}
         <div class="forminfo">
-            <span>{% translate "Sum" %} ({{ currency_suffix }})</span>
+            <span>{% translate "Sum" %} ({{ currency_suffix }}):</span>
             <span id="ordercalculatedsum">{{ drink.price }}</span>
         </div>
         <div class="flex forminput">
-            <span>{% translate "Count" %}</span>
+            <span>{% translate "Count" %}:</span>
             <span class="flex flex-row customnumberinput">
                 <button type="button" class="customnumberinput-minus" id="numberofdrinks-btn-minus">-</button>
                 {% if drink.do_not_count %}
@@ -48,19 +48,19 @@
                 <button type="button" class="customnumberinput-plus" id="numberofdrinks-btn-plus">+</button>
             </span>
         </div>
+        <div id="statusinfo"></div>
         <input type="hidden" name="drinkid" id="drinkid" value="{{ drink.id }}">
         <div class="buttons">
             <a href="/" class="button">{% translate "cancel" %}</a>
             <input type="submit" id="ordersubmitbtn" class="button" value='{% translate "order" %}'>
         </div>
     </form>
-    <div id="statusinfo"></div>
     <script src="/static/js/order.js"></script>
     <script src="/static/js/custom_number_input.js"></script>
 {% else %}
-    <div class="flex flex-center flex-column">
+    <div class="flex flex-center">
         <p>{% translate "Your balance is too low to order a drink." %}</p>
-        <a href="/" class="button">{% translate "back" %}</a>
+        <a href="/">{% translate "back" %}</a>
     </div>
 {% endif %}            
 {% else %}
diff --git a/app/templates/registration/login.html b/app/templates/registration/login.html
index 657c713..c9ba292 100644
--- a/app/templates/registration/login.html
+++ b/app/templates/registration/login.html
@@ -10,7 +10,7 @@
 
 {% block headAdditional %}
 <link rel="stylesheet" href="/static/css/simple-keyboard.css">
-<link rel="stylesheet" href="/static/css/simple-keyboard_custom.css">
+<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
 {% endblock %}
 
 {% block content %}
@@ -19,7 +19,7 @@
 {% endif %}
 <div class="flex flex-column gap-1rem nodisplay" id="passwordoverlay-container">
     <div class="passwordoverlay">
-        <h1 class="formheading">{% translate "Log in" %}</h1>
+        <h1>{% translate "Log in" %}</h1>
         <form method="post" action="{% url 'login' %}" class="flex flex-center loginform">
             {% csrf_token %}
             <input type="text" name="username" autofocus="" autocapitalize="none" autocomplete="username" maxlength="150" required="" id="id_username">
@@ -36,7 +36,7 @@
     <script src="/static/js/simple-keyboard.js"></script>
     <script src="/static/js/simple-keyboard_configure.js"></script>
 </div>
-<div class="flex flex-column flex-center userlist-container">
+<div class="flex flex-column flex-center">
     <h1>{% translate "Choose your account" %}</h1>
     <ul class="flex flex-center flex-wrap userlist">
         {% for user_ in user_list %}
diff --git a/app/templates/supply.html b/app/templates/supply.html
index bcbc3d0..4f656c2 100644
--- a/app/templates/supply.html
+++ b/app/templates/supply.html
@@ -9,21 +9,27 @@
 
 {% block content %}
 {% if user.is_superuser or user.allowed_to_supply %}
-<h1 class="formheading">{% translate "Supply" %}</h1>
 <form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/supply">
     {% csrf_token %}
+    <h1 class="formheading">{% translate "Supply" %}</h1>
     <div class="flex forminput">
-        <input type="text" name="supplydescription" placeholder="{% translate 'Description' %}" autofocus required>
+        <span>{% translate "Description" %}:</span>
+        <span>
+            <input type="text" name="supplydescription" autofocus required>
+        </span>
     </div>
     <div class="flex forminput">
-        <input type="number" name="supplyprice" max="9999.99" min="1.00" step="0.01" placeholder="{% translate 'Price' %} ({{ currency_suffix }})" required>
+        <span>{% translate "Price" %} ({{ currency_suffix }}):</span>
+        <span>
+            <input type="number" name="supplyprice" max="9999.99" min="1.00" step="0.01" required>
+        </span>
     </div>
+    <div id="statusinfo"></div>
     <div class="buttons">
         <a href="/" class="button">{% translate "cancel" %}</a>
         <input type="submit" id="submitbtn" class="button" value='{% translate "submit" %}'>
     </div>
 </form>
-<div id="statusinfo"></div>
 <script src="/static/js/custom_form.js"></script>
 <script src="/static/js/custom_number_input.js"></script>
 {% else %}
diff --git a/app/templates/transfer.html b/app/templates/transfer.html
index bf0524b..74c13f4 100644
--- a/app/templates/transfer.html
+++ b/app/templates/transfer.html
@@ -8,37 +8,44 @@
 
 {% block headAdditional %}
 <link rel="stylesheet" href="/static/css/simple-keyboard.css">
-<link rel="stylesheet" href="/static/css/simple-keyboard_custom.css">
+<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
 {% endblock %}
 
 {% block content %}
-<h1 class="formheading">{% translate "Transfer Money" %}</h1>
 <form id="customform" class="flex flex-column flex-center appform gap-1rem" action="/api/transfer">
     {% csrf_token %}
+    <h1 class="formheading">{% translate "Transfer Money" %}</h1>
     <div class="flex forminput">
-        <select name="recipientuser" id="transfer-recipient" required>
-            <option value="" selected disabled>Recipient</option>
-            {% for user_ in user_list %}
-            {% if user_.id != user.id %}
-            <option value="{{user_.id}}">
-            {% if user_.first_name %}
-                {% if user_.last_name %}
-                {{ user_.last_name }},
+        <span>{% translate "Recipient" %}:</span>
+        <span>
+            <select name="recipientuser" required>
+                <option></option>
+                {% for user_ in user_list %}
+                {% if user_.id != user.id %}
+                <option value="{{user_.id}}">
+                {% if user_.first_name %}
+                    {% if user_.last_name %}
+                    {{ user_.last_name }},
+                    {% endif %}
+                    {{ user_.first_name }}
+                {% elif user_.last_name %}
+                    {{ user_.last_name }}
+                {% else %}
+                    {{ user_.username }}
                 {% endif %}
-                {{ user_.first_name }}
-            {% elif user_.last_name %}
-                {{ user_.last_name }}
-            {% else %}
-                {{ user_.username }}
-            {% endif %}
-            {% endif %}
-            </option>
-            {% endfor %}
-        </select>
+                {% endif %}
+                </option>
+                {% endfor %}
+            </select>
+        </span>
     </div>
     <div class="flex forminput">
-        <input type="number" name="transferamount" class="keyboard-input" max="{{ user.balance }}" min="0.01" step="0.01" placeholder="{% translate 'Amount' %} ({{ currency_suffix }})" autofocus required>
+        <span>{% translate "Amount" %} {{ currency_suffix }}:</span>
+        <span>
+            <input type="number" name="transferamount" class="keyboard-input" max="{{ user.balance }}" min="0.01" step="0.01" autofocus required>
+        </span>
     </div>
+    <div id="statusinfo"></div>
     <!-- Virtual Keyboard -->
     <div id="keyboard" class="simple-keyboard" data-layout="numeric"></div>
     <script src="/static/js/simple-keyboard.js"></script>
@@ -48,7 +55,6 @@
         <input type="submit" id="submitbtn" class="button" value='{% translate "confirm" %}'>
     </div>
 </form>
-<div id="statusinfo"></div>
 <script src="/static/js/custom_form.js"></script>
 <script src="/static/js/autoreload.js"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/userpanel.html b/app/templates/userpanel.html
index 966f86e..7d2d015 100644
--- a/app/templates/userpanel.html
+++ b/app/templates/userpanel.html
@@ -18,20 +18,19 @@
         <a class="button" href="/deposit">{% translate "Deposit" %}</a>
         <a class="button" href="/accounts/logout">{% translate "Logout" %}</a>
         <div class="dropdownmenu" id="dropdownmenu">
-            <div id="dropdownnope"></div>
             <button class="dropdownbutton" id="dropdownmenu-button"><img src="/static/material-icons/menu.svg"></button>
             <div class="dropdownlist">
-                <a class="dropdownchoice" href="/history">{% translate "History" %}</a>
-                <a class="dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>
+                <a class="button dropdownchoice" href="/history">{% translate "History" %}</a>
+                <a class="button dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>
                 {% if user.is_superuser or user.is_staff %}
-                <a class="dropdownchoice" href="/admin/">Admin Panel</a>
+                <a class="button dropdownchoice" href="/admin/">Admin Panel</a>
                 {% endif %}
-                <a class="dropdownchoice" href="/transfer/">{% translate "Transfer" %}</a>
+                <a class="button dropdownchoice" href="/transfer/">{% translate "Transfer" %}</a>
                 {% if user.is_superuser or user.allowed_to_supply %}
-                <a class="dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
+                <a class="button dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
                 {% endif %}
-                <a class="dropdownchoice" href="/accounts/password_change/">{% translate "Change Password" %}</a>
+                <a class="button dropdownchoice" href="/accounts/password_change/">{% translate "Change Password" %}</a>
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/data/Caddyfile b/data/Caddyfile
index d790c4e..84f30f3 100644
--- a/data/Caddyfile
+++ b/data/Caddyfile
@@ -9,8 +9,7 @@
 
 {$CADDY_HOSTS} {
 	# the tls certificates
-	# tls {$DATADIR}/tls/server.pem {$DATADIR}/tls/server-key.pem
-	tls internal
+	tls {$DATADIR}/tls/server.pem {$DATADIR}/tls/server-key.pem
 	route {
 		# profile pictures
 		file_server /profilepictures/* {
diff --git a/scripts/_bootstrap.py b/scripts/_bootstrap.py
index c162c03..7cdee55 100755
--- a/scripts/_bootstrap.py
+++ b/scripts/_bootstrap.py
@@ -14,7 +14,7 @@ from time import sleep
 from yaml import safe_load
 
 
-banner = r""" ___        _        _
+banner = """ ___        _        _
 |   \  _ _ (_) _ _  | |__ ___  ___
 | |) || '_|| || ' \ | / /(_-< |___|
 |___/ |_|  |_||_||_||_\_\/__/
diff --git a/start.sh b/start.sh
index cd50964..99a6ccd 100755
--- a/start.sh
+++ b/start.sh
@@ -11,6 +11,6 @@ chmod -c -R g-w,o-rwx .gitignore
 
 export PYTHONPATH="$basedir"
 export DJANGO_SETTINGS_MODULE="project.settings"
-export APP_VERSION="22"
+export APP_VERSION="21"
 
 exec ./scripts/_bootstrap.py "$@"
diff --git a/static/css/main.css b/static/css/main.css
index ea44432..a6bcf52 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -1,4 +1,4 @@
-/* Fonts */
+/* Font */
 
 @font-face {
     font-family: "Inter";
@@ -18,37 +18,26 @@
 :root {
     --font-family: "Inter";
     --color: #fafafa;
-    --color-disabled: #ffffff50;
-    --color-error: #ff817c;
-    --bg-page: linear-gradient(
-        -10deg,
-        #071c29 10%,
-        #4a8897
-    );
-    --bg-color: #ffffff35;
-    --bg-color2: #ffffff25;
+    --color-error: #ff682c;
+    --bg-page: linear-gradient(#18151a, #060a0e);
+    --bg-color: #ffffff2c;
     --bg-hover-color: #ffffff50;
-    --border-color: #ffffff50;
+    --bg-color2: #ffffff44;
+    --bg-dropdown-color: #3a3a3f;
+    --bg-dropdown-hover-color: #59595c;
+    --border-color: #ffffff67;
     --bg-globalmessage: #161616;
-    --border-radius: .6rem;
-    --element-padding: .6rem .8rem;
+    --border-radius: .25rem;
 }
 
 /* General */
 
-body,
-input,
-select,
-button, .button
-{
-    font-family: var(--font-family);
-}
-
 body {
     margin: 0;
     padding: 0;
     width: 100vw;
     min-height: 100vh;
+    font-family: var(--font-family);
     font-size: 17px;
     background: var(--bg-page);
     color: var(--color);
@@ -78,36 +67,29 @@ input[type="number"]::-webkit-inner-spin-button {
     display: none;
 }
 
-input[type="text"],
-input[type="password"],
-input[type="number"],
-select {
-    padding: var(--element-padding);
-    text-align: center !important;
+input[type="text"], input[type="password"], input[type="number"], select {
+    padding: .5rem .8rem;
+    text-align: center;
     font-size: 16px;
     color: var(--color);
     border: none;
     outline: none;
-    border: 1px solid var(--border-color);
+    border-bottom: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     background: var(--bg-color);
-}
-
-input[type="text"]::placeholder,
-input[type="password"]::placeholder,
-input[type="number"]::placeholder,
-select > option:disabled {
-    color: var(--color-disabled);
+    font-family: "Inter";
 }
 
 select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
+    height: 2.2rem;
     background-image: url("/static/material-icons/arrow-drop-down.svg");
     background-repeat: no-repeat;
     background-position: right;
     background-size: 1.5rem;
+    padding-right: 1.8rem;
 }
 
 table {
@@ -126,6 +108,12 @@ tr:nth-child(2n+2) > td {
     background: var(--bg-color2);
 }
 
+/*
+Rounded corners on table cells apparently don't work with
+Firefox, so Firefox users won't have rounded corners
+on tables. Can't fix that by myself.
+*/
+
 table tr:first-child th:first-child {
     border-top-left-radius: var(--border-radius);
 }
@@ -286,6 +274,15 @@ main {
     gap: 1rem;
 }
 
+.fill {
+    height: 100%;
+    width: 100%;
+}
+
+.fill-vertical {
+    height: 100%;
+}
+
 .buttons {
     display: flex;
     flex-direction: row;
@@ -298,26 +295,24 @@ main {
     display: flex;
     align-items: center;
     justify-content: center;
+    font-family: var(--font-family);
+    text-decoration: none;
+    text-align: center !important;
+    background: var(--bg-color);
+    color: var(--color);
+    font-size: 16px;
+    padding: .5rem .8rem;
     outline: none;
-    border: 1px solid var(--border-color);
+    border: none;
+    border-bottom: 1px solid var(--border-color);
     border-radius: var(--border-radius);
+    cursor: pointer;
+    user-select: none;
+    box-sizing: content-box;
     width: fit-content;
 }
 
-.button, button, .dropdownchoice {
-    padding: var(--element-padding);
-    font-size: 16px;
-    text-align: center !important;
-    text-decoration: none;
-    color: var(--color);
-    box-sizing: content-box;
-    cursor: pointer;
-    user-select: none;
-    background: var(--bg-color);
-}
-
-.button:hover, button:hover,
-.button:active, button:active {
+.button:hover, button:hover, .button:active, button:active {
     background: var(--bg-hover-color);
 }
 
@@ -325,55 +320,30 @@ main {
     opacity: 40%;
 }
 
-.formheading {
-    margin-bottom: 2rem;
-}
-
-.forminfo {
-    width: fit-content;
-    min-width: 16rem;
+.appform > .forminfo {
+    width: 100%;
     text-align: left;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     gap: 2rem;
-    padding-bottom: .15rem;
-    border-bottom: 1px solid #ffffff20;
 }
 
 .forminfo > span:last-child {
     float: right;
 }
 
-.appform, .appform > * {
-    max-width: 90vw;
-}
-
 .appform > .forminput {
     width: 100%;
     flex-direction: row;
     justify-content: space-between;
-    align-items: center;
+    align-items: flex-end;
     flex-wrap: wrap;
     gap: 1rem;
 }
 
-.forminput > input, .forminput > select {
-    width: 100% !important;
-}
-
-.forminput > .keyboard-input, #transfer-recipient {
-    /* the keyboard has a 5px padding */
-    margin-left: 5px !important;
-    margin-right: 5px !important;
-}
-
-.appform > .buttons {
-    margin-top: 1rem;
-}
-
-#statusinfo {
-    margin-top: 1rem;
+.appform > .statusinfo {
+    margin-top: .5rem;
 }
 
 .dropdownmenu {
@@ -384,16 +354,6 @@ main {
     border-radius: var(--border-radius);
 }
 
-#dropdownnope {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    margin: 0;
-    padding: 0;
-}
-
 .dropdownbutton {
     z-index: 190;
 }
@@ -408,65 +368,64 @@ main {
     position: absolute;
     display: flex;
     flex-direction: column;
-    border-radius: var(--border-radius);
-    box-shadow: 0 0 .5rem #00000025;
-}
-
-.dropdownlist, #dropdownnope {
-    visibility: hidden;
-    opacity: 0%;
     pointer-events: none;
-}
-
-.dropdownvisible .dropdownlist,
-.dropdownvisible #dropdownnope {
-    opacity: 100%;
-    background: #00000020;
-    visibility: visible;
-    pointer-events: visible;
-    z-index: 100;
+    gap: .5rem;
+    opacity: 0%;
 }
 
 .dropdownchoice {
     z-index: 200;
+    border-radius: var(--border-radius) !important;
     margin: 0;
-    text-decoration: none;
+    text-align: center;
+    justify-content: center;
+    background: var(--bg-dropdown-color) !important;
     width: initial;
-    min-width: max-content;
-    border-bottom: 1px solid var(--border-color);
-    border-left: 1px solid var(--border-color);
-    border-right: 1px solid var(--border-color);
-}
-
-.dropdownchoice:first-child {
-    border-top: 1px solid var(--border-color);
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-}
-
-.dropdownchoice:last-child {
-    border-bottom: 1px solid var(--border-color);
-    border-bottom-left-radius: var(--border-radius);
-    border-bottom-right-radius: var(--border-radius);
+    box-shadow: 0 0 1.5rem #00000090;
 }
 
 .dropdownchoice:hover {
-    background: var(--bg-hover-color);
+    background: var(--bg-dropdown-hover-color) !important;
+}
+
+.dropdownlist :first-child {
+    border-top-left-radius: var(--border-radius) !important;
+    border-top-right-radius: var(--border-radius) !important;
+}
+
+.dropdownlist :last-child {
+    border-bottom-left-radius: var(--border-radius) !important;
+    border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.dropdownvisible .dropdownlist {
+    opacity: 100%;
+    visibility: visible;
+    pointer-events: visible;
 }
 
 .customnumberinput {
     height: 2.2rem;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: .25rem;
 }
 
 .customnumberinput button {
-    width: 2.2rem !important;
-    height: 2.2rem !important;
+    min-width: 2.5rem !important;
+    width: 2.5rem !important;
     padding: 0;
     margin: 0;
+    height: 100%;
+}
+
+.customnumberinput-minus {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    z-index: 10;
+}
+
+.customnumberinput-plus {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    z-index: 10;
 }
 
 .customnumberinput input[type="number"] {
@@ -475,13 +434,13 @@ main {
     padding: 0;
     margin: 0;
     background: var(--bg-color2);
+    border-radius: 0 !important;
     -webkit-appearance: textfield;
     -moz-appearance: textfield;
     appearance: textfield;
 }
 
 .errortext {
-    font-weight: bold;
     color: var(--color-error);
 }
 
@@ -491,11 +450,6 @@ main {
 
 /* Login */
 
-.userlist-container {
-    flex-grow: 1;
-    padding-bottom: 10vh;
-}
-
 .userlist {
     width: 60%;
     list-style: none;
@@ -505,7 +459,8 @@ main {
 }
 
 .userlist > li {
-    padding: .1rem .6rem;
+    margin-bottom: .5rem;
+    padding: 0 .5rem;
 }
 
 .userlist > li > img {
@@ -530,18 +485,6 @@ main {
     margin-top: 0;
 }
 
-#passwordoverlay-container {
-    position: fixed;
-    width: 100vw;
-    height: 100vh;
-    top: 0;
-    right: 0;
-    background: var(--bg-page);
-    align-items: center;
-    padding-top: 10vh;
-    z-index: 200;
-}
-
 /* Drinks List */
 
 .drinks-list {
@@ -581,13 +524,12 @@ main {
 /* Blur */
 
 @supports (backdrop-filter: blur()) {
-    .dropdownvisible #dropdownnope {
-        backdrop-filter: blur(16px);
+    :root {
+        --bg-dropdown-color: var(--bg-color);
+        --bg-dropdown-hover-color: var(--bg-hover-color);
     }
-    #passwordoverlay-container {
-        background: #00000020;
-        backdrop-filter: blur(64px); /* fallback */
-        backdrop-filter: blur(128px);
+    .dropdownchoice {
+        backdrop-filter: blur(32px);
     }
 }
 
@@ -611,10 +553,9 @@ main {
     }
 }
 
-@media only screen and (max-width: 860px) {
+@media only screen and (max-width: 700px) {
     .userpanel {
         flex-direction: column;
-        gap: 1rem;
     }
     .userlist {
         gap: 0.25rem;
@@ -633,10 +574,7 @@ main {
     }
     .dropdownlist {
         width: 14rem;
-        right: calc(50vw - 7rem); /* regard width */
+        right: calc(50vw - 7rem);
         left: auto;
     }
-    #keyboard {
-        display: none !important;
-    }
 }
diff --git a/static/css/simple-keyboard_custom.css b/static/css/simple-keyboard_dark.css
similarity index 86%
rename from static/css/simple-keyboard_custom.css
rename to static/css/simple-keyboard_dark.css
index 39da287..ffee807 100644
--- a/static/css/simple-keyboard_custom.css
+++ b/static/css/simple-keyboard_dark.css
@@ -15,8 +15,8 @@
     align-items: center;
     background: var(--bg-color);
     color: white;
-    border: 1px solid var(--border-color);
-    border-radius: var(--border-radius);
+    border: none;
+    border-bottom: 1px solid var(--border-color);
 }
 .simple-keyboard.darkTheme .hg-button:active,
 .simple-keyboard.darkTheme .hg-button:hover {
diff --git a/static/js/login.js b/static/js/login.js
index 6f62216..cc9274d 100644
--- a/static/js/login.js
+++ b/static/js/login.js
@@ -35,7 +35,6 @@
     function show_password_overlay() {
         window.scrollTo(0, 0);
         passwordOverlayElement.classList.remove("nodisplay");
-        passwordInputElement.focus()
     }
     function hide_password_overlay() {
         passwordOverlayElement.classList.add("nodisplay");
diff --git a/static/js/main.js b/static/js/main.js
index 5fab451..711aed8 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -1,21 +1,14 @@
 document.addEventListener("DOMContentLoaded", () => {
     let dropdownmenuElement = document.getElementById("dropdownmenu");
     let dropdownmenuButtonElement = document.getElementById("dropdownmenu-button");
-    let dropdownmenuNopeElement = document.getElementById("dropdownnope");
-    function toggleDropDown() {
-        if (dropdownmenuElement.classList.contains("dropdownvisible")) {
-            dropdownmenuElement.classList.remove("dropdownvisible");
-            dropdownmenuNopeElement.classList.remove("dropdownvisible");
-        } else {
-            dropdownmenuElement.classList.add("dropdownvisible");
-            dropdownmenuNopeElement.classList.add("dropdownvisible");
-        }
-    }
     if (dropdownmenuButtonElement != null) {
-        dropdownmenuButtonElement.addEventListener("click", toggleDropDown);
-        dropdownmenuNopeElement.addEventListener("click", () => {
-            dropdownmenuElement.classList.remove("dropdownvisible");
-            dropdownmenuNopeElement.classList.remove("dropdownvisible");
+        dropdownmenuButtonElement.addEventListener("click", () => {
+            if (dropdownmenuElement.classList.contains("dropdownvisible")) {
+                dropdownmenuElement.classList.remove("dropdownvisible");
+            }
+            else {
+                dropdownmenuElement.classList.add("dropdownvisible");
+            }
         })
     }
 });