diff --git a/web/assets/css/home.css b/web/assets/css/home.css
index fe3b3fb61..90480057b 100644
--- a/web/assets/css/home.css
+++ b/web/assets/css/home.css
@@ -95,6 +95,10 @@
     @apply bg-gray-800 text-white dark:bg-gray-600
 }
 
+.tum-live-button-muted {
+    @apply bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-700
+}
+
 .tum-live-icon-button {
     @apply flex justify-center items-center rounded-full text-gray-400 hover:text-gray-600 dark:hover:text-white active:bg-gray-100/50 dark:active:bg-gray-700/50 disabled:opacity-20;
 }
@@ -372,6 +376,14 @@ label:has(~ .tum-live-input) {
     @apply text-sm rounded-lg bg-amber-500/25 border-l-4 px-3 py-2 border-amber-500
 }
 
+.tum-live-settings-grid{
+    @apply grid gap-y-5 content-start lg:w-3/6 md:w-4/5 w-full p-6 text-3;
+}
+
+.tum-live-settings-grid > section > h2{
+    @apply text-sm text-5 mb-1;
+}
+
 
 .tum-live-footer {
     @apply bg-gray-100 dark:bg-secondary-light py-4 px-8;
diff --git a/web/template/user-settings.gohtml b/web/template/user-settings.gohtml
index 8725b6214..06e1e40d1 100644
--- a/web/template/user-settings.gohtml
+++ b/web/template/user-settings.gohtml
@@ -1,33 +1,64 @@
 <!DOCTYPE html>
 <html lang="en" class="dark">
-
+{{- /*gotype: github.com/TUM-Dev/gocast/web*/ -}}
 <head>
     <meta charset="UTF-8">
-    <title>{{.IndexData.Branding.Title}}</title>
-    {{template "headImports" .IndexData.VersionTag}}
-</head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="description" content="{{.Branding.Description}}"/>
+    <link rel="manifest" href="/static/assets/manifest.json">
 
-<body class="text-4">
-{{- /*gotype: github.com/TUM-Dev/gocast/web.userSettingsData*/ -}}
-{{template "header" .IndexData.TUMLiveContext}}
-<div class="form-container">
-    <h1 class="form-container-title">Settings</h1>
+    <title>{{.Branding.Title}} | Settings</title>
 
-    <div class="form-container-body"
-         x-data=" { initialName: '{{.IndexData.TUMLiveContext.User.GetPreferredName}}', name: '{{.IndexData.TUMLiveContext.User.GetPreferredName}}', err: '' } ">
-        <label class="text-sm text-5" for="displayName">Preferred Name <span class="italic font-bold">You can change
-                    this once every three months.</span></label>
-        <p x-cloak x-show="err!==''" class="text-red-500" x-text="err"></p>
-        <div class="flex gap-3">
-            <input class="tl-input" type="text" x-model="name" id="displayName" {{ if not
-            .IndexData.TUMLiveContext.User.PreferredNameChangeAllowed }} readonly {{ end }}>
-            <button type="button" :disabled="name === initialName" class="btn w-auto whitespace-nowrap"
-                    @click="global.updatePreference(global.UserSetting.Name, name).then((r) => {err=r; if(r==='') {initialName=name;}})">
-                Update Name
-            </button>
+    {{if and .VersionTag (eq .VersionTag "development")}}
+    <script defer src="/static/node_modules/alpinejs/dist/cdn.js"></script>
+    {{else}}
+    <script defer src="/static/node_modules/alpinejs/dist/cdn.min.js"></script>
+    {{end}}
+    <script src="static/assets/init.js"></script>
+    <script src="/static/assets/ts-dist/global.bundle.js?v={{if .VersionTag}}{{.VersionTag}}{{else}}development{{end}}"></script>
+
+    <link href="/static/assets/css-dist/home.css?v={{if .VersionTag}}{{.VersionTag}}{{else}}development{{end}}"
+          rel="stylesheet">
+    <style>[x-cloak] {
+            display: none !important;
+        }</style>
+</head>
+
+<body class="h-screen flex flex-col items-stretch tum-live-bg">
+<header class="text-3 flex z-50 w-full items-center px-3 py-2 h-16 justify-between shrink-0 grow-0">
+    <div class="flex items-center">
+        <a href="/" class="mx-3" type="button" id="logo" title="Start">
+            <img src="/logo.svg" width="42" alt="TUM-Live Logo">
+        </a>
+    </div>
+</header>
+<main id="content" class="flex justify-center grow h-full overflow-y-scroll">
+    <article class="tum-live-settings-grid" x-data=" { err: '' } ">
+        <header>
+            <h1 class="font-bold text-3">Settings</h1>
+        </header>
+        <div x-cloak x-show="err!==''" class="bg-danger/25 text-sm rounded-lg px-2 py-1 space-x-3 py-2">
+            <i class="fa-solid fa-triangle-exclamation"></i>
+            <span x-text="err">Error</span>
         </div>
-        <h2 class="text-sm text-5">Preferred greeting</h2>
-        <div x-data="{ currentGreeting: {{toJson .IndexData.TUMLiveContext.User.GetPreferredGreeting}}, err:'' }">
+        <section
+                x-data="{initialName: '{{.TUMLiveContext.User.GetPreferredName}}', name: '{{.TUMLiveContext.User.GetPreferredName}}'}">
+            <h2>Preferred Name<span class="italic font-bold pl-2">You can change this once every three months.</span>
+            </h2>
+            <div class="grid gap-y-2">
+                <label for="displayName">
+                    <input class="tum-live-input" type="text" x-model="name" id="displayName" {{ if not
+                    .TUMLiveContext.User.PreferredNameChangeAllowed }} readonly {{ end }}>
+                </label>
+                <button type="button" :disabled="name === initialName"
+                        class="tum-live-input-submit tum-live-button-primary py-2 text-sm"
+                        @click="global.updatePreference(global.UserSetting.Name, name).then((r) => {err=r; if(r==='') {initialName=name;}})">
+                    Update Name
+                </button>
+            </div>
+        </section>
+        <section x-data="{ currentGreeting: {{toJson .TUMLiveContext.User.GetPreferredGreeting}}}">
+            <h2>Preferred greeting</h2>
             <input class="w-auto" type="radio" name="greet" value="Moin" id="greeting1" x-model="currentGreeting"
                    :checked="currentGreeting==='Moin'"
                    @change="global.updatePreference(global.UserSetting.Greeting, currentGreeting).then((r) => {err=r})">
@@ -36,11 +67,9 @@
                    :checked="currentGreeting==='Servus'"
                    @change="global.updatePreference(global.UserSetting.Greeting, currentGreeting).then((r) => {err=r;})">
             <label for="greeting2">Servus</label>
-            <p class="text-danger" x-cloak x-show="err!==''" x-text="err"></p>
-        </div>
-        <h2 class="text-sm text-5">Playback Speeds</h2>
-        <div class="pl-2"
-             x-data="{ playbackspeeds: {{toJson .IndexData.TUMLiveContext.User.GetPlaybackSpeeds}}, err:'' }">
+        </section>
+        <section x-data="{ playbackspeeds: {{toJson .TUMLiveContext.User.GetPlaybackSpeeds}} }">
+            <h2>Playback Speeds</h2>
             <template x-for="ps in playbackspeeds">
                     <span class="mr-2">
                         <label>
@@ -50,22 +79,23 @@
                         </label>
                     </span>
             </template>
-            <p class="text-danger" x-cloak x-show="err!==''" x-text="err"></p>
-        </div>
-
-        <h2 class="text-sm text-5">Privacy & Data Protection</h2>
-        <a href="/api/users/exportData" download="personal_data.json" class="btn block">
-            <i class="fas fa-download"></i> Export my personal data
-        </a>
+        </section>
+        <section>
+            <h2>Privacy & Data Protection</h2>
+            <a href="/api/users/exportData" download="personal_data.json"
+               class="tum-live-input-submit tum-live-button-muted block py-2 text-center text-sm">
+                <i class="fas fa-download"></i> Export my personal data
+            </a>
+        </section>
 
-        <div class="text-center p-3">
-            <i class="text-5">Not a lot going on here <b>yet</b>.
+        <footer class="text-5 text-sm text-center">
+            <i>Not a lot going on here <b>yet</b>.
                 <a class="underline" target="_blank" rel="noopener"
                    href="https://github.com/TUM-Dev/gocast/issues/new/choose">Open an issue</a>
                 if you have any ideas what settings you miss :)
             </i>
-        </div>
-    </div>
-</div>
+        </footer>
+    </article>
+</main>
 </body>
 </html>
diff --git a/web/user.go b/web/user.go
index a8ba80334..ce6e4a2ea 100644
--- a/web/user.go
+++ b/web/user.go
@@ -2,11 +2,11 @@ package web
 
 import (
 	"context"
-	"github.com/gin-gonic/gin"
 	"github.com/TUM-Dev/gocast/dao"
 	"github.com/TUM-Dev/gocast/model"
 	"github.com/TUM-Dev/gocast/tools"
 	"github.com/TUM-Dev/gocast/tools/tum"
+	"github.com/gin-gonic/gin"
 	log "github.com/sirupsen/logrus"
 	"net/http"
 	"net/url"
@@ -23,7 +23,7 @@ func (r mainRoutes) settingsPage(c *gin.Context) {
 	d := userSettingsData{IndexData: NewIndexData()}
 	d.IndexData.TUMLiveContext = c.MustGet("TUMLiveContext").(tools.TUMLiveContext)
 
-	err := templateExecutor.ExecuteTemplate(c.Writer, "user-settings.gohtml", d)
+	err := templateExecutor.ExecuteTemplate(c.Writer, "user-settings.gohtml", d.IndexData)
 	if err != nil {
 		log.Error(err)
 		c.AbortWithStatus(http.StatusInternalServerError)
