diff --git a/handlers/account.go b/handlers/account.go
index 36c180f..08ed745 100644
--- a/handlers/account.go
+++ b/handlers/account.go
@@ -1,9 +1,15 @@
 package handlers
 
 import (
+	"database/sql"
 	"net/http"
+
+	"projectreshoot/contexts"
+	"projectreshoot/db"
 	"projectreshoot/view/component/account"
 	"projectreshoot/view/page"
+
+	"github.com/rs/zerolog"
 )
 
 func HandleAccountPage() http.Handler {
@@ -19,7 +25,38 @@ func HandleAccountSubpage() http.Handler {
 		func(w http.ResponseWriter, r *http.Request) {
 			r.ParseForm()
 			subpage := r.FormValue("subpage")
-			account.AccountContent(subpage).Render(r.Context(), w)
+			account.AccountContainer(subpage).Render(r.Context(), w)
+		},
+	)
+}
+
+func HandleChangeUsername(
+	logger *zerolog.Logger,
+	conn *sql.DB,
+) http.Handler {
+	return http.HandlerFunc(
+		func(w http.ResponseWriter, r *http.Request) {
+			r.ParseForm()
+			newUsername := r.FormValue("username")
+
+			unique, err := db.CheckUsernameUnique(conn, newUsername)
+			if err != nil {
+				logger.Error().Err(err).Msg("Error updating username")
+				w.WriteHeader(http.StatusInternalServerError)
+				return
+			}
+			if !unique {
+				account.ChangeUsername("Usename is taken", newUsername).Render(r.Context(), w)
+				return
+			}
+			user := contexts.GetUser(r.Context())
+			err = user.ChangeUsername(conn, newUsername)
+			if err != nil {
+				logger.Error().Err(err).Msg("Error updating username")
+				w.WriteHeader(http.StatusInternalServerError)
+				return
+			}
+			w.Header().Set("HX-Redirect", "/account")
 		},
 	)
 }
diff --git a/server/routes.go b/server/routes.go
index fc54841..2bada29 100644
--- a/server/routes.go
+++ b/server/routes.go
@@ -75,4 +75,8 @@ func addRoutes(
 		middleware.RequiresLogin(
 			handlers.HandleAccountSubpage(),
 		))
+	mux.Handle("POST /change-username",
+		middleware.RequiresLogin(
+			handlers.HandleChangeUsername(logger, conn),
+		))
 }
diff --git a/view/component/account/changeusername.templ b/view/component/account/changeusername.templ
new file mode 100644
index 0000000..d70a2f3
--- /dev/null
+++ b/view/component/account/changeusername.templ
@@ -0,0 +1,94 @@
+package account
+
+import "projectreshoot/contexts"
+
+templ ChangeUsername(err string, username string) {
+	{{
+	user := contexts.GetUser(ctx)
+	if username == "" {
+		username = user.Username
+	}
+	}}
+	<form
+		hx-post="/change-username"
+		hx-swap="outerHTML"
+		class="w-[90%] mx-auto mt-5"
+		x-data={ "{ err: '" + err + "'}" }
+	>
+		<div
+			class="flex"
+			x-data={ "{username: '" + username + "'}" }
+		>
+			<div
+				class="flex items-center relative"
+			>
+				<label
+					for="username"
+					class="text-lg"
+				>Username</label>
+				<input
+					type="text"
+					id="username"
+					name="username"
+					class="py-1 px-4 rounded-lg text-md
+                bg-surface0 border border-surface2
+                disabled:opacity-50 ml-5 disabled:pointer-events-none"
+					required
+					aria-describedby="username-error"
+					x-model="username"
+				/>
+				<div
+					class="absolute inset-y-0 end-0 
+                        pointer-events-none pe-3 pt-2"
+					x-show="err"
+					x-cloak
+				>
+					<svg
+						class="size-5 text-red"
+						width="16"
+						height="16"
+						fill="currentColor"
+						viewBox="0 0 16 16"
+						aria-hidden="true"
+					>
+						<path
+							d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8 
+                                4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 
+                                0 1.1 0l.35-3.507A.905.905 0 0 0 8 4zm.002 6a1 
+                                1 0 1 0 0 2 1 1 0 0 0 0-2z"
+						></path>
+					</svg>
+				</div>
+			</div>
+			<div>
+				<button
+					class="rounded-lg bg-blue py-1 px-2 text-mantle ml-2
+                hover:cursor-pointer hover:bg-blue/75 transition"
+					x-cloak
+					x-show={ "username !=='" + user.Username + "'" }
+					x-transition.opacity.duration.500ms
+				>
+					Update
+				</button>
+				<button
+					class="rounded-lg bg-overlay0 py-1 px-2 text-mantle
+                hover:cursor-pointer hover:bg-surface2 transition"
+					type="button"
+					href="#"
+					x-cloak
+					x-show={ "username !=='" + user.Username + "'" }
+					x-transition.opacity.duration.500ms
+					@click={ "username='" + user.Username + "';err=''" }
+				>
+					Cancel
+				</button>
+			</div>
+		</div>
+		<p
+			class="block text-red ml-24 mt-1 transition"
+			x-cloak
+			x-show="err"
+			x-text="err"
+		></p>
+	</form>
+}
diff --git a/view/component/account/container.templ b/view/component/account/container.templ
new file mode 100644
index 0000000..37b4a0a
--- /dev/null
+++ b/view/component/account/container.templ
@@ -0,0 +1,24 @@
+package account
+
+templ AccountContainer(subpage string) {
+	<div
+		id="account-container"
+		class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl"
+	>
+		@SelectMenu(subpage)
+		<div class="mt-5 w-full">
+			<div
+				class="pl-5 text-2xl text-subtext1 border-b 
+                    border-overlay0 w-[90%] mx-auto"
+			>
+				{ subpage }
+			</div>
+			switch subpage {
+				case "General":
+					@AccountGeneral()
+				case "Security":
+					@AccountGeneral()
+			}
+		</div>
+	</div>
+}
diff --git a/view/component/account/content.templ b/view/component/account/content.templ
deleted file mode 100644
index 2e84536..0000000
--- a/view/component/account/content.templ
+++ /dev/null
@@ -1,15 +0,0 @@
-package account
-
-templ AccountContent(subpage string) {
-	<form hx-post="/account-select-page">
-		<div class="flex max-w-200 min-h-100 mx-auto bg-mantle mt-10 rounded-xl">
-			@SelectMenu(subpage)
-			<div class="mt-5">
-				<div class="pl-10 text-2xl text-subtext1 underline">
-					{ subpage }
-				</div>
-				// page content
-			</div>
-		</div>
-	</form>
-}
diff --git a/view/component/account/general.templ b/view/component/account/general.templ
new file mode 100644
index 0000000..c79fe56
--- /dev/null
+++ b/view/component/account/general.templ
@@ -0,0 +1,7 @@
+package account
+
+templ AccountGeneral() {
+	<div>
+		@ChangeUsername("", "")
+	</div>
+}
diff --git a/view/component/account/selectmenu.templ b/view/component/account/selectmenu.templ
index c8c1ea9..c202e39 100644
--- a/view/component/account/selectmenu.templ
+++ b/view/component/account/selectmenu.templ
@@ -29,27 +29,35 @@ templ SelectMenu(activePage string) {
 	menuItems := getMenuItems()
 	page := fmt.Sprintf("{page:'%s'}", activePage)
 	}}
-	<div class="flex w-fit flex-col border-e bg-surface0 rounded-l-xl">
-		<div class="px-4 py-6">
-			<ul class="mt-6 space-y-1" x-data={ page }>
-				for _, item := range menuItems {
-					{{
+	<form
+		class="flex bg-surface0 w-fit border-e border-overlay0
+        rounded-l-xl"
+		hx-post="/account-select-page"
+		hx-target="#account-container"
+		hx-swap="outerHTML"
+	>
+		<div>
+			<div class="px-4 py-6">
+				<ul class="mt-6 space-y-1" x-data={ page }>
+					for _, item := range menuItems {
+						{{
 	activebind := fmt.Sprintf("page === '%s' && 'bg-mantle'", item.name)
-					}}
-					<li>
-						<button
-							type="submit"
-							name="subpage"
-							value={ item.name }
-							class="block rounded-lg px-4 py-2 text-md
+						}}
+						<li>
+							<button
+								type="submit"
+								name="subpage"
+								value={ item.name }
+								class="block rounded-lg px-4 py-2 text-md
                             hover:bg-mantle hover:cursor-pointer"
-							:class={ activebind }
-						>
-							{ item.name }
-						</button>
-					</li>
-				}
-			</ul>
+								:class={ activebind }
+							>
+								{ item.name }
+							</button>
+						</li>
+					}
+				</ul>
+			</div>
 		</div>
-	</div>
+	</form>
 }
diff --git a/view/page/account.templ b/view/page/account.templ
index 896f657..c11b900 100644
--- a/view/page/account.templ
+++ b/view/page/account.templ
@@ -5,6 +5,6 @@ import "projectreshoot/view/component/account"
 
 templ Account(subpage string) {
 	@layout.Global() {
-		@account.AccountContent(subpage)
+		@account.AccountContainer(subpage)
 	}
 }