diff --git a/web/static/style.scss b/web/static/style.scss
index c8ea4075..f3be258e 100644
--- a/web/static/style.scss
+++ b/web/static/style.scss
@@ -35,7 +35,7 @@ $primary: $crimson,
 
 @forward "bulma/sass/layout/container";
 @forward "bulma/sass/layout/level";
-@forward "bulma/sass/layout/section";
+@use "bulma/sass/layout/section" with ($section-padding: 1.5rem 1.5rem);
 @forward "bulma/sass/layout/hero";
 
 @forward "bulma/sass/grid";
diff --git a/web/templates/index.html b/web/templates/index.html
index ef3dedcb..6608cd14 100644
--- a/web/templates/index.html
+++ b/web/templates/index.html
@@ -4,7 +4,8 @@
 <div hx-indicator="#progress">
   <section class="section">
     <div class="container">
-      <div class="level">
+      <!-- navigation for not mobile -->
+      <div class="level is-hidden-mobile">
         <div class="level-left">
           <a hx-boost="true" class="button is-link level-item"
              href="/?date={{ date.pred() }}{{ selected_area|show_area_query(false) }}">
@@ -44,6 +45,51 @@
         </div>
       </div>
 
+      <!-- navigation for mobile -->
+      <div class="level is-hidden-tablet is-mobile">
+        <div class="level-left">
+          <a hx-boost="true" class="button is-link level-item"
+             href="/?date={{ date.pred() }}{{ selected_area|show_area_query(false) }}">
+            <svg class="icon">
+              <use href="/static/feather-sprite.svg#arrow-left" />
+            </svg>
+          </a>
+        </div>
+
+        <div class="control level-item is-flex-grow-0">
+          <input class="input" type="date" name="date" value="{{ date }}" hx-target="closest body"
+                 hx-get="/{{ selected_area|show_area_query(true) }}" hx-push-url="true">
+        </div>
+
+        <div class="level-right">
+          <a hx-boost="true" class="button is-link level-item"
+             href="/?date={{ date.succ() }}{{ selected_area|show_area_query(false) }}">
+            <svg class="icon">
+              <use href="/static/feather-sprite.svg#arrow-right" />
+            </svg>
+          </a>
+        </div>
+      </div>
+
+      {% if user.role == Role::Admin %}
+      <div class="level is-hidden-tablet is-mobile">
+        <div class="level-item">
+          <div class="select">
+            <select hx-get="/?date={{ date }}" hx-target="closest body" hx-push-url="true" name="area">
+              {% for area in areas %}
+              {% if (user.area_id == area.id && selected_area.is_none()) || selected_area.is_some() &&
+              selected_area.unwrap() == area.id %}
+              <option selected value="{{ area.id }}">{{ area.name }}</option>
+              {% else %}
+              <option value="{{ area.id }}">{{ area.name }}</option>
+              {% endif %}
+              {% endfor %}
+            </select>
+          </div>
+        </div>
+      </div>
+      {% endif %}
+
       <progress id="progress" class="progress is-small is-link is-light htmx-indicator" max="100" />
     </div>
   </section>
diff --git a/web/templates/user/forgot_password.html b/web/templates/user/forgot_password.html
index 993ba78b..e8bec298 100644
--- a/web/templates/user/forgot_password.html
+++ b/web/templates/user/forgot_password.html
@@ -2,26 +2,42 @@
 
 {% block body %}
 <section class="section">
-	<div class="container">
-		<h1 class="title">Brass - Passwort zurücksetzen</h1>
-		<article class="message is-info">
-		  <div class="message-body">
-        Gib deine E-Mail Adresse ein und erhalte einen Link zum Zurücksetzen deines Passworts, sofern ein Account mit dieser Adresse existiert. Bei Problemen wende dich an <a href="mailto:{{ webmaster_email }}">{{ webmaster_email }}</a>.
-		  </div>
-		</article>
-		<form class="box" hx-post="/reset-password">
-			<div class="field">
-				<label class="label" for="email">E-Mail:</label>
-				<div class="control">
-					<input class="input" placeholder="max.mustermann@example.com" name="email" type="text" required>
-				</div>
-			</div>
+  <div class="container">
+    <h1 class="title">Brass - Passwort zurücksetzen</h1>
+    <article class="message is-info">
+      <div class="message-body">
+        Gib deine E-Mail Adresse ein und erhalte einen Link zum Zurücksetzen deines Passworts, sofern ein Account mit
+        dieser Adresse existiert. Bei Problemen wende dich an <a href="mailto:{{ webmaster_email }}">{{ webmaster_email
+          }}</a>.
+      </div>
+    </article>
+    <form class="box" hx-post="/reset-password">
+      <div class="field">
+        <label class="label" for="email">E-Mail:</label>
+        <div class="control">
+          <input class="input" placeholder="max.mustermann@example.com" name="email" type="text" required>
+        </div>
+      </div>
 
-			<div class="level">
-				<input class="button is-primary level-left" type="submit" value="Passwort zurücksetzen" />
-				<a class="button is-info is-light level-right" hx-boost="true" href="/login" >Zurück zur Anmeldung</a>
-			</div>
-		</form>
-	</div>
+      <div class="level">
+        <div class="level-left">
+          <button class="button is-primary level-item">
+            <svg class="icon">
+              <use href="/static/feather-sprite.svg#send" />
+            </svg>
+            <span>Passwort zurücksetzen</span>
+          </button>
+        </div>
+        <div class="level-right">
+          <a class="button is-info is-light level-item" href="/login">
+            <svg class="icon">
+              <use href="/static/feather-sprite.svg#arrow-left" />
+            </svg>
+            <span>Zurück zur Anmeldung</span>
+          </a>
+        </div>
+      </div>
+    </form>
+  </div>
 </section>
 {% endblock %}