diff --git a/templates/Froxlor/login/login.html.twig b/templates/Froxlor/login/login.html.twig
index 09427c18..8f14565d 100644
--- a/templates/Froxlor/login/login.html.twig
+++ b/templates/Froxlor/login/login.html.twig
@@ -5,7 +5,7 @@
 {% block content %}
 	<div class="container">
 		<div class="row justify-content-center">
-			<form class="col-4 d-flex flex-column" method="post" enctype="application/x-www-form-urlencoded">
+			<form class="col-12 col-md-4 d-flex flex-column" method="post" enctype="application/x-www-form-urlencoded">
 				<img class="align-self-center mb-5" src="{{ header_logo_login }}" alt="Froxlor Server Management Panel"/>
 
 				<div class="card shadow">
diff --git a/templates/Froxlor/userarea.html.twig b/templates/Froxlor/userarea.html.twig
index 650e1b28..0cb0f5e0 100644
--- a/templates/Froxlor/userarea.html.twig
+++ b/templates/Froxlor/userarea.html.twig
@@ -28,40 +28,42 @@
 			<div class="collapse navbar-collapse justify-content-end px-3" id="navbarTop">
 				<ul class="navbar-nav align-items-center">
 					<li class="nav-item text-nowrap d-block me-2">
-						<a class="btn btn-secondary btn-sm d-block" href="{{ linker({'section': 'index'}) }}">{{ lng('panel.dashboard') }}</a>
+						<a class="btn btn-secondary btn-sm d-block" href="{{ linker({'section': 'index'}) }}">
+							<i class="fa fa-dashboard"></i> {{ lng('panel.dashboard') }}
+						</a>
 					</li>
 					<li class="nav-item dropdown me-2">
 						<a class="btn btn-secondary btn-sm d-block dropdown-toggle" href="#" id="navbarOpts" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-							{{ lng('panel.options') }}
+							<i class="fa fa-wrench"></i> {{ lng('panel.options') }}
 						</a>
 						<ul class="dropdown-menu" aria-labelledby="navbarOpts">
 							<li>
-								<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'change_password'}) }}">{{ lng('login.password') }}</a>
+								<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'change_password'}) }}"><i class="fa-solid fa-lock"></i> {{ lng('login.password') }}</a>
 							</li>
 							<li>
-								<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'change_language'}) }}">{{ lng('login.language') }}</a>
+								<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'change_language'}) }}"><i class="fa-solid fa-flag"></i> {{ lng('login.language') }}</a>
 							</li>
 							{% if get_setting('2fa.enabled') == 1 %}
 								<li>
-									<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': '2fa'}) }}">{{ lng('2fa.2fa') }}</a>
+									<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': '2fa'}) }}"><i class="fa-solid fa-shield"></i> {{ lng('2fa.2fa') }}</a>
 								</li>
 							{% endif %}
 							{% if get_setting('panel.allow_theme_change_admin') == '1' and userinfo.adminsession == 1 %}
 								<li>
-									<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'change_theme'}) }}">{{ lng('panel.theme') }}</a>
+									<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'change_theme'}) }}"><i class="fa-solid fa-image"></i> {{ lng('panel.theme') }}</a>
 								</li>
 							{% elseif get_setting('panel.allow_theme_change_customer') == '1' and userinfo.adminsession == 0 %}
 								<li>
-									<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'change_theme'}) }}">{{ lng('panel.theme') }}</a>
+									<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'change_theme'}) }}"><i class="fa-solid fa-image"></i> {{ lng('panel.theme') }}</a>
 								</li>
 							{% endif %}
 							{% if get_setting('api.enabled') == 1 %}
 								<li><hr class="dropdown-divider"></li>
 								<li>
-									<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'apikeys'}) }}">{{ lng('menue.main.apikeys') }}</a>
+									<a class="dropdown-item" href="{{ linker({'section': 'index', 'page': 'apikeys'}) }}"><i class="fa-solid fa-key"></i> {{ lng('menue.main.apikeys') }}</a>
 								</li>
 								<li>
-									<a class="dropdown-item" href="https://docs.froxlor.org/apiguide/index.html" rel="external" target="_blank">{{ lng('menue.main.apihelp') }}</a>
+									<a class="dropdown-item" href="https://docs.froxlor.org/apiguide/index.html" rel="external" target="_blank"><i class="fa-solid fa-circle-info"></i> {{ lng('menue.main.apihelp') }}</a>
 								</li>
 							{% endif %}
 						</ul>