diff --git a/handlers/account.go b/handlers/account.go
new file mode 100644
index 0000000..36c180f
--- /dev/null
+++ b/handlers/account.go
@@ -0,0 +1,25 @@
+package handlers
+
+import (
+	"net/http"
+	"projectreshoot/view/component/account"
+	"projectreshoot/view/page"
+)
+
+func HandleAccountPage() http.Handler {
+	return http.HandlerFunc(
+		func(w http.ResponseWriter, r *http.Request) {
+			page.Account("General").Render(r.Context(), w)
+		},
+	)
+}
+
+func HandleAccountSubpage() http.Handler {
+	return http.HandlerFunc(
+		func(w http.ResponseWriter, r *http.Request) {
+			r.ParseForm()
+			subpage := r.FormValue("subpage")
+			account.AccountContent(subpage).Render(r.Context(), w)
+		},
+	)
+}
diff --git a/handlers/profile.go b/handlers/profile.go
index 91d21b2..91f381f 100644
--- a/handlers/profile.go
+++ b/handlers/profile.go
@@ -5,7 +5,7 @@ import (
 	"projectreshoot/view/page"
 )
 
-func HandleProfile() http.Handler {
+func HandleProfilePage() http.Handler {
 	return http.HandlerFunc(
 		func(w http.ResponseWriter, r *http.Request) {
 			page.Profile().Render(r.Context(), w)
diff --git a/server/routes.go b/server/routes.go
index 19c87f7..fc54841 100644
--- a/server/routes.go
+++ b/server/routes.go
@@ -63,6 +63,16 @@ func addRoutes(
 	// Profile page
 	mux.Handle("GET /profile",
 		middleware.RequiresLogin(
-			handlers.HandleProfile(),
+			handlers.HandleProfilePage(),
+		))
+
+	// Account page
+	mux.Handle("GET /account",
+		middleware.RequiresLogin(
+			handlers.HandleAccountPage(),
+		))
+	mux.Handle("POST /account-select-page",
+		middleware.RequiresLogin(
+			handlers.HandleAccountSubpage(),
 		))
 }
diff --git a/view/component/account/content.templ b/view/component/account/content.templ
new file mode 100644
index 0000000..2e84536
--- /dev/null
+++ b/view/component/account/content.templ
@@ -0,0 +1,15 @@
+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/selectmenu.templ b/view/component/account/selectmenu.templ
new file mode 100644
index 0000000..c8c1ea9
--- /dev/null
+++ b/view/component/account/selectmenu.templ
@@ -0,0 +1,55 @@
+package account
+
+import "fmt"
+
+type MenuItem struct {
+	name string
+	href string
+}
+
+func getMenuItems() []MenuItem {
+	return []MenuItem{
+		{
+			name: "General",
+			href: "general",
+		},
+		{
+			name: "Security",
+			href: "security",
+		},
+		{
+			name: "Preferences",
+			href: "preferences",
+		},
+	}
+}
+
+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 {
+					{{
+	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
+                            hover:bg-mantle hover:cursor-pointer"
+							:class={ activebind }
+						>
+							{ item.name }
+						</button>
+					</li>
+				}
+			</ul>
+		</div>
+	</div>
+}
diff --git a/view/page/account.templ b/view/page/account.templ
new file mode 100644
index 0000000..896f657
--- /dev/null
+++ b/view/page/account.templ
@@ -0,0 +1,10 @@
+package page
+
+import "projectreshoot/view/layout"
+import "projectreshoot/view/component/account"
+
+templ Account(subpage string) {
+	@layout.Global() {
+		@account.AccountContent(subpage)
+	}
+}