diff --git a/.gitignore b/.gitignore
index 005984e..280fb6b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,7 @@
 /data/*
 /data/logs/*
 /data/tls/*
-/data/static/*
+/data/django_static/*
 /data/profilepictures/*
 /data/archive/*
 !/data/logs/
diff --git a/README.md b/README.md
index f2a4bf6..74a7248 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Drinks Manager (Season 3)
+# Drinks Manager
 
 Note: This software is tailored to my own needs.
 I probably won't accept feature requests, and don't recommend you
diff --git a/app/db_queries.py b/app/db_queries.py
index 656bbda..dd79bbe 100644
--- a/app/db_queries.py
+++ b/app/db_queries.py
@@ -3,6 +3,7 @@
 from django.conf import settings
 from django.db import connection
 from django.utils.translation import gettext
+from calendar import day_name
 
 
 COMBINE_ALPHABET = "abcdefghijklmnopqrstuvwxyz"
@@ -15,7 +16,6 @@ def _db_select(sql_select:str):
         result = cursor.fetchall()
     return result
 
-
 def _combine_results(results:list) -> dict:
     '''
     e.g.
@@ -80,8 +80,7 @@ def select_history(user, language_code="en") -> list:
     result = [list(row) for row in result]
     return result
 
-
-def orders_per_month(user) -> list:
+def select_orders_per_month(user) -> dict:
     # number of orders per month (last 12 months)
     result_user = _db_select(f"""
     select
@@ -102,32 +101,35 @@ def orders_per_month(user) -> list:
     group by "month"
     order by "month" desc;
     """)
-    return _combine_results([result_user, result_all])
+    return _combine_results([result_all, result_user])
 
-
-def orders_per_weekday(user) -> list:
+def select_orders_per_weekday(user) -> list:
     # number of orders per weekday (all time)
-    result_user = _db_select(f"""
-    select
-        to_char(datetime, 'Day') as "day",
-        sum(amount) as "count"
-    from app_order
-        where user_id = {user.pk}
-    group by "day"
-    order by "count" desc;
+    result = _db_select(f"""
+    with q_all as (
+        select
+            extract(isodow from datetime) as "d",
+            sum(amount) as "c"
+        from app_order
+        group by d
+    ), q_user as (
+        select
+            extract(isodow from datetime) as "d",
+            sum(amount) as "c"
+        from app_order
+            where user_id = {user.pk}
+        group by d
+    )
+    select q_all.d as "day", q_all.c, q_user.c from q_all full join q_user on q_all.d = q_user.d
+    group by day, q_all.c, q_user.c
+    order by day asc;
     """)
-    result_all = _db_select(f"""
-    select
-        to_char(datetime, 'Day') as "day",
-        sum(amount) as "count"
-    from app_order
-    group by "day"
-    order by "count" desc;
-    """)
-    return _combine_results([result_user, result_all])
+    for i in range(len(result)):
+        day_, all_, user_ = result[i]
+        result[i] = (day_name[int(day_)-1], all_, user_)
+    return result
 
-
-def orders_per_drink(user) -> list:
+def select_orders_per_drink(user) -> dict:
     # number of orders per drink (all time)
     result_user = _db_select(f"""
     select
@@ -148,4 +150,31 @@ def orders_per_drink(user) -> list:
     group by d.product_name
     order by "data" desc;
     """)
-    return _combine_results([result_user, result_all])
+    return _combine_results([result_all, result_user])
+
+def select_order_sum_per_user_all_users() -> list:
+    # sum of all orders per user, for all users
+    result = _db_select(f"""
+    select
+        app_user.username as user,
+        sum(app_order.price_sum) as sum
+    from app_user
+        left outer join app_order on (app_user.id = app_order.user_id)
+    group by app_user.id
+    order by app_user asc;
+    """)
+    return result
+
+def select_deposit_sum_per_user_all_users() -> list:
+    # sum of all orders per user, for all users
+    result = _db_select(f"""
+    select
+        app_user.username as user,
+        sum(rt.transaction_sum) as sum
+    from app_user
+        left outer join app_registertransaction rt on (app_user.id = rt.user_id)
+    where rt.is_user_deposit is true or rt.is_user_deposit is null
+    group by app_user.id
+    order by app_user asc;
+    """)
+    return result
diff --git a/app/locales/de/LC_MESSAGES/django.mo b/app/locales/de/LC_MESSAGES/django.mo
index d7435cb..5d60623 100644
Binary files a/app/locales/de/LC_MESSAGES/django.mo and b/app/locales/de/LC_MESSAGES/django.mo differ
diff --git a/app/locales/de/LC_MESSAGES/django.po b/app/locales/de/LC_MESSAGES/django.po
index fe0dc95..278ff86 100644
--- a/app/locales/de/LC_MESSAGES/django.po
+++ b/app/locales/de/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2023-04-14 23:37+0200\n"
+"POT-Creation-Date: 2023-11-01 19:29+0100\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: Julian Müller (ChaoticByte)\n"
 "Language: DE\n"
@@ -55,7 +55,7 @@ msgstr "Bestätigen"
 msgid "Drinks - History"
 msgstr "Getränke - Verlauf"
 
-#: app/templates/history.html:10 app/templates/userpanel.html:25
+#: app/templates/history.html:10 app/templates/userpanel.html:23
 msgid "History"
 msgstr "Verlauf"
 
@@ -165,49 +165,65 @@ msgstr "Wähle deinen Account"
 msgid "Drinks - Statistics"
 msgstr "Getränke - Statistiken"
 
-#: app/templates/statistics.html:10 app/templates/userpanel.html:26
+#: app/templates/statistics.html:10 app/templates/userpanel.html:24
 msgid "Statistics"
 msgstr "Statistiken"
 
 #: app/templates/statistics.html:13
-msgid "Orders per drink"
-msgstr "Bestellungen pro Getränk"
+msgid "orders / drink"
+msgstr "Bestellungen / Getränk"
 
 #: app/templates/statistics.html:16
 msgid "drink"
 msgstr "Getränk"
 
-#: app/templates/statistics.html:17 app/templates/statistics.html:34
-#: app/templates/statistics.html:51
-msgid "you"
-msgstr "Du"
-
-#: app/templates/statistics.html:18 app/templates/statistics.html:35
-#: app/templates/statistics.html:52
+#: app/templates/statistics.html:17 app/templates/statistics.html:36
+#: app/templates/statistics.html:53
 msgid "all"
 msgstr "Alle"
 
-#: app/templates/statistics.html:30
-msgid "Orders per month (last 12 months)"
-msgstr "Bestellungen pro Monat (letzte 12 Monate)"
+#: app/templates/statistics.html:18 app/templates/statistics.html:37
+#: app/templates/statistics.html:54
+msgid "you"
+msgstr "Du"
 
-#: app/templates/statistics.html:33
+#: app/templates/statistics.html:32
+msgid "orders / month"
+msgstr "Bestellungen / Monat"
+
+#: app/templates/statistics.html:35
 msgid "month"
 msgstr "Monat"
 
-#: app/templates/statistics.html:47
-msgid "Orders per weekday"
-msgstr "Bestellungen pro Wochentag"
+#: app/templates/statistics.html:49
+msgid "orders / weekday"
+msgstr "Bestellungen / Wochentag"
 
-#: app/templates/statistics.html:50
+#: app/templates/statistics.html:52
 msgid "day"
 msgstr "Tag"
 
+#: app/templates/statistics.html:69
+msgid "order sum"
+msgstr "Bestellungen"
+
+#: app/templates/statistics.html:72 app/templates/statistics.html:89
+msgid "user"
+msgstr "Benutzer"
+
+#: app/templates/statistics.html:73 app/templates/statistics.html:90
+msgid "sum"
+msgstr "Summe"
+
+#: app/templates/statistics.html:86
+msgid "deposit sum"
+msgstr "Einzahlungen"
+
 #: app/templates/supply.html:7
 msgid "Drinks - Supply"
 msgstr "Getränke - Beschaffung"
 
-#: app/templates/supply.html:14 app/templates/userpanel.html:32
+#: app/templates/supply.html:14 app/templates/userpanel.html:30
 msgid "Supply"
 msgstr "Beschaffung"
 
@@ -228,7 +244,6 @@ msgid "You are not allowed to view this site."
 msgstr "Dir fehlt die Berechtigung, diese Seite anzuzeigen."
 
 #: app/templates/transfer.html:6
-#| msgid "Drinks - Order"
 msgid "Drinks - Transfer"
 msgstr "Getränke - Geld senden"
 
@@ -248,11 +263,11 @@ msgstr "Saldo"
 msgid "Logout"
 msgstr "Abmelden"
 
-#: app/templates/userpanel.html:30
+#: app/templates/userpanel.html:28
 msgid "Transfer"
 msgstr "Geld senden"
 
-#: app/templates/userpanel.html:34
+#: app/templates/userpanel.html:32
 msgid "Change Password"
 msgstr "Passwort ändern"
 
diff --git a/app/models.py b/app/models.py
index 681a433..717a1cf 100644
--- a/app/models.py
+++ b/app/models.py
@@ -40,6 +40,7 @@ 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()
 
@@ -107,10 +108,9 @@ 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,6 +126,7 @@ 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/static/js/main.js b/app/static/js/main.js
deleted file mode 100644
index 711aed8..0000000
--- a/app/static/js/main.js
+++ /dev/null
@@ -1,14 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-    let dropdownmenuElement = document.getElementById("dropdownmenu");
-    let dropdownmenuButtonElement = document.getElementById("dropdownmenu-button");
-    if (dropdownmenuButtonElement != null) {
-        dropdownmenuButtonElement.addEventListener("click", () => {
-            if (dropdownmenuElement.classList.contains("dropdownvisible")) {
-                dropdownmenuElement.classList.remove("dropdownvisible");
-            }
-            else {
-                dropdownmenuElement.classList.add("dropdownvisible");
-            }
-        })
-    }
-});
diff --git a/app/templates/baselayout.html b/app/templates/baselayout.html
index 5783cf9..97ac907 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 href="/accounts/logout">log out</a>
+                <a class="button" href="/accounts/logout">log out</a>
             </div>
             {% endif %}
         </main>
diff --git a/app/templates/deposit.html b/app/templates/deposit.html
index bbce3e1..cf3dbc1 100644
--- a/app/templates/deposit.html
+++ b/app/templates/deposit.html
@@ -8,20 +8,16 @@
 
 {% block headAdditional %}
 <link rel="stylesheet" href="/static/css/simple-keyboard.css">
-<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
+<link rel="stylesheet" href="/static/css/simple-keyboard_custom.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">
-        <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>
+        <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>
     </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>
@@ -31,6 +27,7 @@
         <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 89d58c6..63b51ec 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, Julian Müller (ChaoticByte)</div>
+        <div>Copyright (C) 2021-2025, 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 2cae204..2e5286f 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">
+    <div class="flex flex-center flex-column">
         <p>{% translate "Your balance is too low to order a drink." %}</p>
-        <a href="/">{% translate "back" %}</a>
+        <a href="/" class="button">{% translate "back" %}</a>
     </div>
 {% endif %}            
 {% else %}
diff --git a/app/templates/registration/login.html b/app/templates/registration/login.html
index c9ba292..657c713 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_dark.css">
+<link rel="stylesheet" href="/static/css/simple-keyboard_custom.css">
 {% endblock %}
 
 {% block content %}
@@ -19,7 +19,7 @@
 {% endif %}
 <div class="flex flex-column gap-1rem nodisplay" id="passwordoverlay-container">
     <div class="passwordoverlay">
-        <h1>{% translate "Log in" %}</h1>
+        <h1 class="formheading">{% 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">
+<div class="flex flex-column flex-center userlist-container">
     <h1>{% translate "Choose your account" %}</h1>
     <ul class="flex flex-center flex-wrap userlist">
         {% for user_ in user_list %}
diff --git a/app/templates/statistics.html b/app/templates/statistics.html
index 4f938b9..93f3a9e 100644
--- a/app/templates/statistics.html
+++ b/app/templates/statistics.html
@@ -8,57 +8,96 @@
 
 {% block content %}
 <h1>{% translate "Statistics" %}</h1>
-<div>
-    <div class="flex flex-column flex-center">
-        <h3>{% translate "Orders per drink" %}</h3>
+<div class="statistics-container">
+    <div class="flex flex-column">
+        <h3>{% translate "orders / drink" %}</h3>
         <table>
             <tr>
                 <th>{% translate "drink" %}</th>
-                <th>{% translate "you" %}</th>
                 <th>{% translate "all" %}</th>
+                <th>{% translate "you" %}</th>
             </tr>
             {% for key, values in orders_per_drink.items %}
             <tr>
                 <td>{{ key }}</td>
-                <td>{{ values.a|default:"0" }}</td>
-                <td>{{ values.b|default:"0" }}</td>
+                <td>{{ values.a|default:0 }}</td>
+                <td>{{ values.b|default:0 }}</td>
             </tr>
             {% endfor %}
         </table>
     </div>
-    <div class="flex flex-column flex-center">
-        <h3>{% translate "Orders per month (last 12 months)" %}</h3>
+</div>
+<div class="statistics-container">
+    <div class="flex flex-column">
+        <h3>{% translate "orders / month" %}</h3>
         <table>
             <tr>
                 <th>{% translate "month" %}</th>
-                <th>{% translate "you" %}</th>
                 <th>{% translate "all" %}</th>
+                <th>{% translate "you" %}</th>
             </tr>
             {% for key, values in orders_per_month.items %}
             <tr>
                 <td>{{ key }}</td>
-                <td>{{ values.a|default:"0" }}</td>
-                <td>{{ values.b|default:"0" }}</td>
+                <td>{{ values.a|default:0 }}</td>
+                <td>{{ values.b|default:0 }}</td>
             </tr>
             {% endfor %}
         </table>
     </div>
-    <div class="flex flex-column flex-center">
-        <h3>{% translate "Orders per weekday" %}</h3>
+    <div class="flex flex-column">
+        <h3>{% translate "orders / weekday" %}</h3>
         <table>
             <tr>
                 <th>{% translate "day" %}</th>
-                <th>{% translate "you" %}</th>
                 <th>{% translate "all" %}</th>
+                <th>{% translate "you" %}</th>
             </tr>
-            {% for key, values in orders_per_weekday.items %}
+            {% for values in orders_per_weekday %}
             <tr>
-                <td>{{ key }}</td>
-                <td>{{ values.a|default:"0" }}</td>
-                <td>{{ values.b|default:"0" }}</td>
+                <td>{{ values.0 }}</td>
+                <td>{{ values.1|default:0 }}</td>
+                <td>{{ values.2|default:0 }}</td>
             </tr>
             {% endfor %}
         </table>
     </div>
+</div>
+<div class="statistics-container">
+    {% if user.is_superuser or perms.app.view_order %}
+    <div class="flex flex-column">
+        <h3>{% translate "order sum" %}</h3>
+        <table>
+            <tr>
+                <th>{% translate "user" %}</th>
+                <th>{% translate "sum" %}</th>
+            </tr>
+            {% for values in order_sum_per_user %}
+            <tr>
+                <td>{{ values.0 }}</td>
+                <td>{{ values.1|default:0.0 }}  {{ currency_suffix }}</td>
+            </tr>
+            {% endfor %}
+        </table>
+    </div>
+    {% endif %}
+    {% if user.is_superuser or perms.app.view_registertransaction %}
+    <div class="flex flex-column">
+        <h3>{% translate "deposit sum" %}</h3>
+        <table>
+            <tr>
+                <th>{% translate "user" %}</th>
+                <th>{% translate "sum" %}</th>
+            </tr>
+            {% for values in deposit_sum_per_user %}
+            <tr>
+                <td>{{ values.0 }}</td>
+                <td>{{ values.1|default:0.0 }}  {{ currency_suffix }}</td>
+            </tr>
+            {% endfor %}
+        </table>
+    </div>
+    {% endif %}
+</div>
 <script src="/static/js/autoreload.js"></script>
 {% endblock %}
\ No newline at end of file
diff --git a/app/templates/supply.html b/app/templates/supply.html
index 4f656c2..bcbc3d0 100644
--- a/app/templates/supply.html
+++ b/app/templates/supply.html
@@ -9,27 +9,21 @@
 
 {% 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">
-        <span>{% translate "Description" %}:</span>
-        <span>
-            <input type="text" name="supplydescription" autofocus required>
-        </span>
+        <input type="text" name="supplydescription" placeholder="{% translate 'Description' %}" autofocus required>
     </div>
     <div class="flex forminput">
-        <span>{% translate "Price" %} ({{ currency_suffix }}):</span>
-        <span>
-            <input type="number" name="supplyprice" max="9999.99" min="1.00" step="0.01" required>
-        </span>
+        <input type="number" name="supplyprice" max="9999.99" min="1.00" step="0.01" placeholder="{% translate 'Price' %} ({{ currency_suffix }})" required>
     </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 74c13f4..bf0524b 100644
--- a/app/templates/transfer.html
+++ b/app/templates/transfer.html
@@ -8,44 +8,37 @@
 
 {% block headAdditional %}
 <link rel="stylesheet" href="/static/css/simple-keyboard.css">
-<link rel="stylesheet" href="/static/css/simple-keyboard_dark.css">
+<link rel="stylesheet" href="/static/css/simple-keyboard_custom.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">
-        <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 }}
+        <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 }},
                 {% endif %}
-                {% endif %}
-                </option>
-                {% endfor %}
-            </select>
-        </span>
+                {{ user_.first_name }}
+            {% elif user_.last_name %}
+                {{ user_.last_name }}
+            {% else %}
+                {{ user_.username }}
+            {% endif %}
+            {% endif %}
+            </option>
+            {% endfor %}
+        </select>
     </div>
     <div class="flex forminput">
-        <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>
+        <input type="number" name="transferamount" class="keyboard-input" max="{{ user.balance }}" min="0.01" step="0.01" placeholder="{% translate 'Amount' %} ({{ currency_suffix }})" autofocus required>
     </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>
@@ -55,6 +48,7 @@
         <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 7d2d015..966f86e 100644
--- a/app/templates/userpanel.html
+++ b/app/templates/userpanel.html
@@ -18,19 +18,20 @@
         <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="button dropdownchoice" href="/history">{% translate "History" %}</a>
-                <a class="button dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>
+                <a class="dropdownchoice" href="/history">{% translate "History" %}</a>
+                <a class="dropdownchoice" href="/statistics">{% translate "Statistics" %}</a>
                 {% if user.is_superuser or user.is_staff %}
-                <a class="button dropdownchoice" href="/admin/">Admin Panel</a>
+                <a class="dropdownchoice" href="/admin/">Admin Panel</a>
                 {% endif %}
-                <a class="button dropdownchoice" href="/transfer/">{% translate "Transfer" %}</a>
+                <a class="dropdownchoice" href="/transfer/">{% translate "Transfer" %}</a>
                 {% if user.is_superuser or user.allowed_to_supply %}
-                <a class="button dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
+                <a class="dropdownchoice" href="/supply/">{% translate "Supply" %}</a>
                 {% endif %}
-                <a class="button dropdownchoice" href="/accounts/password_change/">{% translate "Change Password" %}</a>
+                <a class="dropdownchoice" href="/accounts/password_change/">{% translate "Change Password" %}</a>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/app/views.py b/app/views.py
index b7f936b..ba864a4 100644
--- a/app/views.py
+++ b/app/views.py
@@ -80,11 +80,17 @@ def deposit(request):
 
 @login_required
 def statistics(request):
+    user = request.user
     context = {
-        "orders_per_month": db_queries.orders_per_month(request.user),
-        "orders_per_weekday": db_queries.orders_per_weekday(request.user),
-        "orders_per_drink": db_queries.orders_per_drink(request.user),
+        "orders_per_month": db_queries.select_orders_per_month(user),
+        "orders_per_weekday": db_queries.select_orders_per_weekday(user),
+        "orders_per_drink": db_queries.select_orders_per_drink(user),
     }
+    # Advanced statistics
+    if user.has_perm("app.view_order") or user.is_superuser:
+        context["order_sum_per_user"] = db_queries.select_order_sum_per_user_all_users()
+    if user.has_perm("app.view_registertransaction") or user.is_superuser:
+        context["deposit_sum_per_user"] = db_queries.select_deposit_sum_per_user_all_users()
     return render(request, "statistics.html", context)
 
 @login_required
diff --git a/data/Caddyfile b/data/Caddyfile
index c5bbc58..d790c4e 100644
--- a/data/Caddyfile
+++ b/data/Caddyfile
@@ -9,7 +9,8 @@
 
 {$CADDY_HOSTS} {
 	# the tls certificates
-	tls {$DATADIR}/tls/server.pem {$DATADIR}/tls/server-key.pem
+	# tls {$DATADIR}/tls/server.pem {$DATADIR}/tls/server-key.pem
+	tls internal
 	route {
 		# profile pictures
 		file_server /profilepictures/* {
@@ -17,7 +18,11 @@
 		}
 		# static files
 		file_server /static/* {
-			root {$DATADIR}/static/..
+			root {$ROOTDIR}
+		}
+		# django static files
+		file_server /django_static/* {
+			root {$DATADIR}/django_static/..
 		}
 		# favicon
 		redir /favicon.ico /static/favicon.ico
diff --git a/project/settings.py b/project/settings.py
index a5362ca..56ff5fb 100644
--- a/project/settings.py
+++ b/project/settings.py
@@ -149,8 +149,8 @@ LOCALE_PATHS = [
 # Static files (CSS, JavaScript, Images)
 # https://docs.djangoproject.com/en/4.1/howto/static-files/
 
-STATIC_URL = "static/"
-STATIC_ROOT = BASE_DIR / "data" / "static"
+STATIC_URL = "django_static/"
+STATIC_ROOT = BASE_DIR / "data" / "django_static"
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.1/ref/settings/#default-auto-field
diff --git a/requirements.txt b/requirements.txt
index 2be275b..ceb35b8 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,4 +1,4 @@
-Django~=4.1
-psycopg2~=2.9.5
-uvicorn~=0.20.0
+Django~=4.2
+psycopg2~=2.9
+uvicorn[standard]~=0.27
 PyYAML~=6.0
diff --git a/scripts/_bootstrap.py b/scripts/_bootstrap.py
index 71ce28d..c162c03 100755
--- a/scripts/_bootstrap.py
+++ b/scripts/_bootstrap.py
@@ -14,7 +14,7 @@ from time import sleep
 from yaml import safe_load
 
 
-banner = """ ___        _        _
+banner = r""" ___        _        _
 |   \  _ _ (_) _ _  | |__ ___  ___
 | |) || '_|| || ' \ | / /(_-< |___|
 |___/ |_|  |_||_||_||_\_\/__/
@@ -32,6 +32,7 @@ configuration_file = data_directory / "config.yml"
 caddyfile = data_directory / "Caddyfile"
 logfile_caddy = logfile_directory / "caddy.log"
 logfile_app = logfile_directory / "app.log"
+logfile_sessioncleanup = logfile_directory / "session-cleanup.log"
 
 
 class MonitoredSubprocess:
@@ -130,6 +131,7 @@ if __name__ == "__main__":
         ["./venv/bin/python3", "./manage.py", "migrate", "--noinput"], env=os.environ).wait()
     # Caddy configuration via env
     environment_caddy = os.environ
+    environment_caddy["ROOTDIR"] = str(base_directory.absolute())
     environment_caddy["DATADIR"] = str(data_directory.absolute())
     environment_caddy["CADDY_HOSTS"] = ", ".join(config["caddy"]["hosts"])
     environment_caddy["HTTP_PORT"] = str(config["caddy"]["http_port"])
@@ -183,6 +185,6 @@ if __name__ == "__main__":
             MonitoredSubprocess(
                 "Session Autocleaner",
                 ["./scripts/_session-autocleaner.py", str(config["app"]["session_clear_interval"])],
-                logfile_app)
+                logfile_sessioncleanup)
         ]
         start_and_monitor(procs)
diff --git a/start.sh b/start.sh
index 4aa13e3..cd50964 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="16"
+export APP_VERSION="22"
 
 exec ./scripts/_bootstrap.py "$@"
diff --git a/app/static/css/main.css b/static/css/main.css
similarity index 65%
rename from app/static/css/main.css
rename to static/css/main.css
index ab3f24a..ea44432 100644
--- a/app/static/css/main.css
+++ b/static/css/main.css
@@ -1,4 +1,4 @@
-/* Font */
+/* Fonts */
 
 @font-face {
     font-family: "Inter";
@@ -18,26 +18,39 @@
 :root {
     --font-family: "Inter";
     --color: #fafafa;
-    --color-error: #ff682c;
-    --bg-page-color: #222222;
-    --bg-color: #4e4e4e;
-    --bg-hover-color: #636363;
-    --bg-color2: #383838;
-    --bg-hover-color2: #4a4a4a;
-    --border-color: #808080;
+    --color-disabled: #ffffff50;
+    --color-error: #ff817c;
+    --bg-page: linear-gradient(
+        -10deg,
+        #071c29 10%,
+        #4a8897
+    );
+    --bg-color: #ffffff35;
+    --bg-color2: #ffffff25;
+    --bg-hover-color: #ffffff50;
+    --border-color: #ffffff50;
     --bg-globalmessage: #161616;
-    --border-radius: .5rem;
+    --border-radius: .6rem;
+    --element-padding: .6rem .8rem;
 }
 
 /* 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);
-    background: var(--bg-page-color);
+    font-size: 17px;
+    background: var(--bg-page);
     color: var(--color);
     overflow-x: hidden;
 }
@@ -47,7 +60,7 @@ a {
 }
 
 h1 {
-    font-size: 1.8rem;
+    font-size: 28px;
 }
 
 h1, h2, h3, h4 {
@@ -65,29 +78,36 @@ input[type="number"]::-webkit-inner-spin-button {
     display: none;
 }
 
-input[type="text"], input[type="password"], input[type="number"], select {
-    padding: .6rem .8rem;
-    text-align: center;
-    font-size: 1rem;
+input[type="text"],
+input[type="password"],
+input[type="number"],
+select {
+    padding: var(--element-padding);
+    text-align: center !important;
+    font-size: 16px;
     color: var(--color);
     border: none;
     outline: none;
-    border-bottom: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
     background: var(--bg-color);
-    font-family: "Inter";
+}
+
+input[type="text"]::placeholder,
+input[type="password"]::placeholder,
+input[type="number"]::placeholder,
+select > option:disabled {
+    color: var(--color-disabled);
 }
 
 select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
-    height: 2.5rem;
     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 {
@@ -97,20 +117,15 @@ table {
     border-radius: var(--border-radius);
 }
 
-tr {
+tr > th,
+tr > td {
     background: var(--bg-color);
 }
 
-tr:nth-child(2n+2) {
+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);
 }
@@ -164,11 +179,7 @@ th {
     flex-direction: row;
     margin-top: 1rem;
     width: 94%;
-    gap: 1rem;
-}
-
-.userinfo {
-    font-size: 1.05rem;
+    gap: 2rem;
 }
 
 .userinfo > span {
@@ -223,7 +234,7 @@ main {
 }
 
 .footer > div {
-    font-size: .95rem;
+    font-size: 16px;
     margin-top: .15rem;
     margin-bottom: .15rem;
 }
@@ -275,15 +286,6 @@ main {
     gap: 1rem;
 }
 
-.fill {
-    height: 100%;
-    width: 100%;
-}
-
-.fill-vertical {
-    height: 100%;
-}
-
 .buttons {
     display: flex;
     flex-direction: row;
@@ -296,24 +298,26 @@ 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: 1rem;
-    padding: .6rem .8rem;
     outline: none;
-    border: none;
-    border-bottom: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
     border-radius: var(--border-radius);
-    cursor: pointer;
-    user-select: none;
-    box-sizing: content-box;
     width: fit-content;
 }
 
-.button:hover, button:hover, .button:active, button:active {
+.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 {
     background: var(--bg-hover-color);
 }
 
@@ -321,30 +325,55 @@ main {
     opacity: 40%;
 }
 
-.appform > .forminfo {
-    width: 100%;
+.formheading {
+    margin-bottom: 2rem;
+}
+
+.forminfo {
+    width: fit-content;
+    min-width: 16rem;
     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-evenly;
+    justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 1rem;
 }
 
-.appform > .statusinfo {
-    margin-top: .5rem;
+.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;
 }
 
 .dropdownmenu {
@@ -355,6 +384,16 @@ 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;
 }
@@ -365,70 +404,69 @@ main {
 }
 
 .dropdownlist {
+    margin-top: 3rem;
     position: absolute;
     display: flex;
     flex-direction: column;
-    pointer-events: none;
-    border-radius: var(--border-radius) !important;
-    z-index: 200;
-    margin-top: 3.2rem;
+    border-radius: var(--border-radius);
+    box-shadow: 0 0 .5rem #00000025;
+}
+
+.dropdownlist, #dropdownnope {
+    visibility: hidden;
     opacity: 0%;
-    transition: opacity 100ms;
-    box-shadow: 0 .25rem 1rem #00000090;
+    pointer-events: none;
+}
+
+.dropdownvisible .dropdownlist,
+.dropdownvisible #dropdownnope {
+    opacity: 100%;
+    background: #00000020;
+    visibility: visible;
+    pointer-events: visible;
+    z-index: 100;
 }
 
 .dropdownchoice {
-    border-radius: 0 !important;
+    z-index: 200;
     margin: 0;
-    text-align: center;
-    justify-content: center;
-    background: var(--bg-color2) !important;
-    backdrop-filter: none !important;
+    text-decoration: none;
     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);
 }
 
 .dropdownchoice:hover {
-    background: var(--bg-hover-color2) !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;
+    background: var(--bg-hover-color);
 }
 
 .customnumberinput {
-    height: 2.5rem;
+    height: 2.2rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: .25rem;
 }
 
 .customnumberinput button {
-    min-width: 2.5rem !important;
-    width: 2.5rem !important;
+    width: 2.2rem !important;
+    height: 2.2rem !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"] {
@@ -437,13 +475,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);
 }
 
@@ -453,6 +491,11 @@ main {
 
 /* Login */
 
+.userlist-container {
+    flex-grow: 1;
+    padding-bottom: 10vh;
+}
+
 .userlist {
     width: 60%;
     list-style: none;
@@ -462,8 +505,7 @@ main {
 }
 
 .userlist > li {
-    margin-bottom: .5rem;
-    padding: 0 .5rem;
+    padding: .1rem .6rem;
 }
 
 .userlist > li > img {
@@ -476,7 +518,7 @@ main {
 .userlist > li > div {
     flex-grow: 1;
     text-align: center;
-    padding: .8rem 1.1rem;
+    padding: .7rem 1.1rem;
 }
 
 .loginform {
@@ -488,6 +530,18 @@ 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 {
@@ -504,7 +558,37 @@ main {
 .drinks-list > li > .button {
     width: 100%;
     justify-content: space-between;
-    padding: .8rem 1.1rem;
+    padding: .7rem 1.1rem;
+}
+
+/* Statistics */
+
+.statistics-container {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: center;
+    flex-wrap: wrap;
+    max-width: 90vw;
+    gap: 1rem;
+}
+
+.statistics-container > div {
+    height: 100%;
+    width: 16rem;
+}
+
+/* Blur */
+
+@supports (backdrop-filter: blur()) {
+    .dropdownvisible #dropdownnope {
+        backdrop-filter: blur(16px);
+    }
+    #passwordoverlay-container {
+        background: #00000020;
+        backdrop-filter: blur(64px); /* fallback */
+        backdrop-filter: blur(128px);
+    }
 }
 
 /* Responsive */
@@ -527,9 +611,10 @@ main {
     }
 }
 
-@media only screen and (max-width: 700px) {
+@media only screen and (max-width: 860px) {
     .userpanel {
         flex-direction: column;
+        gap: 1rem;
     }
     .userlist {
         gap: 0.25rem;
@@ -548,7 +633,10 @@ main {
     }
     .dropdownlist {
         width: 14rem;
-        right: calc(50vw - 7rem);
+        right: calc(50vw - 7rem); /* regard width */
         left: auto;
     }
+    #keyboard {
+        display: none !important;
+    }
 }
diff --git a/app/static/css/simple-keyboard.css b/static/css/simple-keyboard.css
similarity index 100%
rename from app/static/css/simple-keyboard.css
rename to static/css/simple-keyboard.css
diff --git a/app/static/css/simple-keyboard_dark.css b/static/css/simple-keyboard_custom.css
similarity index 83%
rename from app/static/css/simple-keyboard_dark.css
rename to static/css/simple-keyboard_custom.css
index e380b77..39da287 100644
--- a/app/static/css/simple-keyboard_dark.css
+++ b/static/css/simple-keyboard_custom.css
@@ -6,6 +6,7 @@
     max-width: 100%;
     background: transparent;
     font-family: "Inter";
+    font-size: 16px;
 }
 .simple-keyboard.darkTheme .hg-button {
     height: 50px;
@@ -14,8 +15,8 @@
     align-items: center;
     background: var(--bg-color);
     color: white;
-    border: none;
-    border-bottom: 1px solid var(--border-color);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
 }
 .simple-keyboard.darkTheme .hg-button:active,
 .simple-keyboard.darkTheme .hg-button:hover {
diff --git a/app/static/favicon.ico b/static/favicon.ico
similarity index 100%
rename from app/static/favicon.ico
rename to static/favicon.ico
diff --git a/app/static/favicon.png b/static/favicon.png
similarity index 100%
rename from app/static/favicon.png
rename to static/favicon.png
diff --git a/app/static/fonts/Inter-Bold.ttf b/static/fonts/Inter-Bold.ttf
similarity index 100%
rename from app/static/fonts/Inter-Bold.ttf
rename to static/fonts/Inter-Bold.ttf
diff --git a/app/static/fonts/Inter-Regular.ttf b/static/fonts/Inter-Regular.ttf
similarity index 100%
rename from app/static/fonts/Inter-Regular.ttf
rename to static/fonts/Inter-Regular.ttf
diff --git a/app/static/js/autoreload.js b/static/js/autoreload.js
similarity index 100%
rename from app/static/js/autoreload.js
rename to static/js/autoreload.js
diff --git a/app/static/js/custom_form.js b/static/js/custom_form.js
similarity index 100%
rename from app/static/js/custom_form.js
rename to static/js/custom_form.js
diff --git a/app/static/js/custom_number_input.js b/static/js/custom_number_input.js
similarity index 100%
rename from app/static/js/custom_number_input.js
rename to static/js/custom_number_input.js
diff --git a/app/static/js/logged_out.js b/static/js/logged_out.js
similarity index 100%
rename from app/static/js/logged_out.js
rename to static/js/logged_out.js
diff --git a/app/static/js/login.js b/static/js/login.js
similarity index 85%
rename from app/static/js/login.js
rename to static/js/login.js
index 0c43a72..6f62216 100644
--- a/app/static/js/login.js
+++ b/static/js/login.js
@@ -6,7 +6,6 @@
     let passwordOverlayElement;
     let pwOverlayCancelButton;
     let userlistButtons;
-    let pinpadButtons;
     let userlistContainerElement;
     // Add event listeners after DOM Content loaded
     document.addEventListener("DOMContentLoaded", () => {
@@ -36,9 +35,14 @@
     function show_password_overlay() {
         window.scrollTo(0, 0);
         passwordOverlayElement.classList.remove("nodisplay");
+        passwordInputElement.focus()
     }
     function hide_password_overlay() {
         passwordOverlayElement.classList.add("nodisplay");
         passwordInputElement.value = "";
+        // Dispatch an Input Event to the input element to trigger the on-
+        // screen keyboard to update its buffer. This fixes a security
+        // issue on the login page.
+        passwordInputElement.dispatchEvent(new Event("input", {bubbles: true}));
     }
 })();
diff --git a/static/js/main.js b/static/js/main.js
new file mode 100644
index 0000000..5fab451
--- /dev/null
+++ b/static/js/main.js
@@ -0,0 +1,21 @@
+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");
+        })
+    }
+});
diff --git a/app/static/js/order.js b/static/js/order.js
similarity index 100%
rename from app/static/js/order.js
rename to static/js/order.js
diff --git a/app/static/js/simple-keyboard.js b/static/js/simple-keyboard.js
similarity index 100%
rename from app/static/js/simple-keyboard.js
rename to static/js/simple-keyboard.js
diff --git a/app/static/js/simple-keyboard_configure.js b/static/js/simple-keyboard_configure.js
similarity index 98%
rename from app/static/js/simple-keyboard_configure.js
rename to static/js/simple-keyboard_configure.js
index 326c68e..8aa9aec 100644
--- a/app/static/js/simple-keyboard_configure.js
+++ b/static/js/simple-keyboard_configure.js
@@ -38,7 +38,8 @@
             "1 2 3",
             "4 5 6",
             "7 8 9",
-            "{bksp} . ,"
+            "0 . ,",
+            "{bksp}"
         ]
     }
     // Check if on smartphone
diff --git a/app/static/material-icons/arrow-drop-down.svg b/static/material-icons/arrow-drop-down.svg
similarity index 100%
rename from app/static/material-icons/arrow-drop-down.svg
rename to static/material-icons/arrow-drop-down.svg
diff --git a/app/static/material-icons/menu.svg b/static/material-icons/menu.svg
similarity index 100%
rename from app/static/material-icons/menu.svg
rename to static/material-icons/menu.svg