diff --git a/surfsense_web/app/dashboard/user/settings/components/ApiKeyContent.tsx b/surfsense_web/app/dashboard/user/settings/components/ApiKeyContent.tsx
new file mode 100644
index 000000000..40e7b1d34
--- /dev/null
+++ b/surfsense_web/app/dashboard/user/settings/components/ApiKeyContent.tsx
@@ -0,0 +1,123 @@
+"use client";
+
+import { Check, Copy, Key, Menu, Shield } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useTranslations } from "next-intl";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { useApiKey } from "@/hooks/use-api-key";
+
+interface ApiKeyContentProps {
+	onMenuClick: () => void;
+}
+
+export function ApiKeyContent({ onMenuClick }: ApiKeyContentProps) {
+	const t = useTranslations("userSettings");
+	const { apiKey, isLoading, copied, copyToClipboard } = useApiKey();
+
+	return (
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			transition={{ delay: 0.2, duration: 0.4 }}
+			className="h-full min-w-0 flex-1 overflow-hidden bg-background"
+		>
+			<div className="h-full overflow-y-auto">
+				<div className="mx-auto max-w-4xl p-4 md:p-6 lg:p-10">
+					<AnimatePresence mode="wait">
+						<motion.div
+							key="api-key-header"
+							initial={{ opacity: 0, y: 10 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -10 }}
+							transition={{ duration: 0.3 }}
+							className="mb-6 md:mb-8"
+						>
+							<div className="flex items-center gap-3 md:gap-4">
+								<Button
+									variant="outline"
+									size="icon"
+									onClick={onMenuClick}
+									className="h-10 w-10 shrink-0 md:hidden"
+								>
+									<Menu className="h-5 w-5" />
+								</Button>
+								<motion.div
+									initial={{ scale: 0.8, opacity: 0 }}
+									animate={{ scale: 1, opacity: 1 }}
+									transition={{ delay: 0.1, duration: 0.3 }}
+									className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-primary/10 bg-gradient-to-br from-primary/20 to-primary/5 shadow-sm md:h-14 md:w-14 md:rounded-2xl"
+								>
+									<Key className="h-5 w-5 text-primary md:h-7 md:w-7" />
+								</motion.div>
+								<div className="min-w-0">
+									<h1 className="truncate text-lg font-bold tracking-tight md:text-2xl">
+										{t("api_key_title")}
+									</h1>
+									<p className="text-sm text-muted-foreground">{t("api_key_description")}</p>
+								</div>
+							</div>
+						</motion.div>
+					</AnimatePresence>
+
+					<AnimatePresence mode="wait">
+						<motion.div
+							key="api-key-content"
+							initial={{ opacity: 0, y: 20 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -20 }}
+							transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
+							className="space-y-6"
+						>
+							<Alert>
+								<Shield className="h-4 w-4" />
+								<AlertTitle>{t("api_key_warning_title")}</AlertTitle>
+								<AlertDescription>{t("api_key_warning_description")}</AlertDescription>
+							</Alert>
+
+							<div className="rounded-lg border bg-card p-6">
+								<h3 className="mb-4 font-medium">{t("your_api_key")}</h3>
+								{isLoading ? (
+									<div className="h-12 w-full animate-pulse rounded-md bg-muted" />
+								) : apiKey ? (
+									<div className="flex items-center gap-2">
+										<div className="flex-1 overflow-x-auto rounded-md bg-muted p-3 font-mono text-sm">
+											{apiKey}
+										</div>
+										<TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<Button
+														variant="outline"
+														size="icon"
+														onClick={copyToClipboard}
+														className="shrink-0"
+													>
+														{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+													</Button>
+												</TooltipTrigger>
+												<TooltipContent>{copied ? t("copied") : t("copy")}</TooltipContent>
+											</Tooltip>
+										</TooltipProvider>
+									</div>
+								) : (
+									<p className="text-center text-muted-foreground">{t("no_api_key")}</p>
+								)}
+							</div>
+
+							<div className="rounded-lg border bg-card p-6">
+								<h3 className="mb-2 font-medium">{t("usage_title")}</h3>
+								<p className="mb-4 text-sm text-muted-foreground">{t("usage_description")}</p>
+								<pre className="overflow-x-auto rounded-md bg-muted p-3 text-sm">
+									<code>Authorization: Bearer {apiKey || "YOUR_API_KEY"}</code>
+								</pre>
+							</div>
+						</motion.div>
+					</AnimatePresence>
+				</div>
+			</div>
+		</motion.div>
+	);
+}
+
diff --git a/surfsense_web/app/dashboard/user/settings/components/ProfileContent.tsx b/surfsense_web/app/dashboard/user/settings/components/ProfileContent.tsx
new file mode 100644
index 000000000..b0c5869f7
--- /dev/null
+++ b/surfsense_web/app/dashboard/user/settings/components/ProfileContent.tsx
@@ -0,0 +1,80 @@
+"use client";
+
+import { Menu, User } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+
+interface ProfileContentProps {
+	onMenuClick: () => void;
+}
+
+export function ProfileContent({ onMenuClick }: ProfileContentProps) {
+	const t = useTranslations("userSettings");
+
+	return (
+		<motion.div
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			transition={{ delay: 0.2, duration: 0.4 }}
+			className="h-full min-w-0 flex-1 overflow-hidden bg-background"
+		>
+			<div className="h-full overflow-y-auto">
+				<div className="mx-auto max-w-4xl p-4 md:p-6 lg:p-10">
+					<AnimatePresence mode="wait">
+						<motion.div
+							key="profile-header"
+							initial={{ opacity: 0, y: 10 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -10 }}
+							transition={{ duration: 0.3 }}
+							className="mb-6 md:mb-8"
+						>
+							<div className="flex items-center gap-3 md:gap-4">
+								<Button
+									variant="outline"
+									size="icon"
+									onClick={onMenuClick}
+									className="h-10 w-10 shrink-0 md:hidden"
+								>
+									<Menu className="h-5 w-5" />
+								</Button>
+								<motion.div
+									initial={{ scale: 0.8, opacity: 0 }}
+									animate={{ scale: 1, opacity: 1 }}
+									transition={{ delay: 0.1, duration: 0.3 }}
+									className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-primary/10 bg-gradient-to-br from-primary/20 to-primary/5 shadow-sm md:h-14 md:w-14 md:rounded-2xl"
+								>
+									<User className="h-5 w-5 text-primary md:h-7 md:w-7" />
+								</motion.div>
+								<div className="min-w-0">
+									<h1 className="truncate text-lg font-bold tracking-tight md:text-2xl">
+										{t("profile_title")}
+									</h1>
+									<p className="text-sm text-muted-foreground">{t("profile_description")}</p>
+								</div>
+							</div>
+						</motion.div>
+					</AnimatePresence>
+
+					<AnimatePresence mode="wait">
+						<motion.div
+							key="profile-content"
+							initial={{ opacity: 0, y: 20 }}
+							animate={{ opacity: 1, y: 0 }}
+							exit={{ opacity: 0, y: -20 }}
+							transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
+							className="space-y-6"
+						>
+							{/* Profile form will be added in Task 5 */}
+							<div className="rounded-lg border bg-card p-6">
+								<p className="text-muted-foreground">Profile settings coming soon...</p>
+							</div>
+						</motion.div>
+					</AnimatePresence>
+				</div>
+			</div>
+		</motion.div>
+	);
+}
+
diff --git a/surfsense_web/app/dashboard/user/settings/components/UserSettingsSidebar.tsx b/surfsense_web/app/dashboard/user/settings/components/UserSettingsSidebar.tsx
new file mode 100644
index 000000000..e25d318f3
--- /dev/null
+++ b/surfsense_web/app/dashboard/user/settings/components/UserSettingsSidebar.tsx
@@ -0,0 +1,155 @@
+"use client";
+
+import { ArrowLeft, ChevronRight, X } from "lucide-react";
+import type { LucideIcon } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useTranslations } from "next-intl";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export interface SettingsNavItem {
+	id: string;
+	label: string;
+	description: string;
+	icon: LucideIcon;
+}
+
+interface UserSettingsSidebarProps {
+	activeSection: string;
+	onSectionChange: (section: string) => void;
+	onBackToApp: () => void;
+	isOpen: boolean;
+	onClose: () => void;
+	navItems: SettingsNavItem[];
+}
+
+export function UserSettingsSidebar({
+	activeSection,
+	onSectionChange,
+	onBackToApp,
+	isOpen,
+	onClose,
+	navItems,
+}: UserSettingsSidebarProps) {
+	const t = useTranslations("userSettings");
+
+	const handleNavClick = (sectionId: string) => {
+		onSectionChange(sectionId);
+		onClose();
+	};
+
+	return (
+		<>
+			<AnimatePresence>
+				{isOpen && (
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.2 }}
+						className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm md:hidden"
+						onClick={onClose}
+					/>
+				)}
+			</AnimatePresence>
+
+			<aside
+				className={cn(
+					"fixed left-0 top-0 z-50 md:relative md:z-auto",
+					"flex h-full w-72 shrink-0 flex-col bg-background md:bg-muted/30",
+					"md:border-r",
+					"transition-transform duration-300 ease-out",
+					"md:translate-x-0",
+					isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
+				)}
+			>
+				{/* Header with title */}
+				<div className="space-y-3 p-4">
+					<div className="flex items-center justify-between">
+						<Button
+							variant="ghost"
+							onClick={onBackToApp}
+							className="group h-11 justify-start gap-3 px-3 hover:bg-muted"
+						>
+							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 transition-colors group-hover:bg-primary/20">
+								<ArrowLeft className="h-4 w-4 text-primary" />
+							</div>
+							<span className="font-medium">{t("back_to_app")}</span>
+						</Button>
+						<Button variant="ghost" size="icon" onClick={onClose} className="h-9 w-9 md:hidden">
+							<X className="h-5 w-5" />
+						</Button>
+					</div>
+					{/* Settings Title */}
+					<div className="px-3">
+						<h2 className="text-lg font-semibold text-foreground">{t("title")}</h2>
+					</div>
+				</div>
+
+				<nav className="flex-1 space-y-1 overflow-y-auto px-3 py-2">
+					{navItems.map((item, index) => {
+						const isActive = activeSection === item.id;
+						const Icon = item.icon;
+
+						return (
+							<motion.button
+								key={item.id}
+								initial={{ opacity: 0, x: -10 }}
+								animate={{ opacity: 1, x: 0 }}
+								transition={{ delay: 0.1 + index * 0.05, duration: 0.3 }}
+								onClick={() => handleNavClick(item.id)}
+								whileHover={{ scale: 1.01 }}
+								whileTap={{ scale: 0.99 }}
+								className={cn(
+									"relative flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition-all duration-200",
+									isActive ? "border border-border bg-muted shadow-sm" : "hover:bg-muted/60"
+								)}
+							>
+								{isActive && (
+									<motion.div
+										layoutId="userSettingsActiveIndicator"
+										className="absolute left-0 top-1/2 h-8 w-1 -translate-y-1/2 rounded-r-full bg-primary"
+										initial={false}
+										transition={{
+											type: "spring",
+											stiffness: 500,
+											damping: 35,
+										}}
+									/>
+								)}
+								<div
+									className={cn(
+										"flex h-9 w-9 items-center justify-center rounded-lg transition-colors",
+										isActive ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
+									)}
+								>
+									<Icon className="h-4 w-4" />
+								</div>
+								<div className="min-w-0 flex-1">
+									<p
+										className={cn(
+											"truncate text-sm font-medium transition-colors",
+											isActive ? "text-foreground" : "text-muted-foreground"
+										)}
+									>
+										{item.label}
+									</p>
+									<p className="truncate text-xs text-muted-foreground/70">{item.description}</p>
+								</div>
+								<ChevronRight
+									className={cn(
+										"h-4 w-4 shrink-0 transition-all",
+										isActive
+											? "translate-x-0 text-primary opacity-100"
+											: "-translate-x-1 text-muted-foreground/40 opacity-0"
+									)}
+								/>
+							</motion.button>
+						);
+					})}
+				</nav>
+			</aside>
+		</>
+	);
+}
+
diff --git a/surfsense_web/app/dashboard/user/settings/page.tsx b/surfsense_web/app/dashboard/user/settings/page.tsx
index bf88e65e5..973b39076 100644
--- a/surfsense_web/app/dashboard/user/settings/page.tsx
+++ b/surfsense_web/app/dashboard/user/settings/page.tsx
@@ -1,286 +1,27 @@
 "use client";
 
-import {
-	ArrowLeft,
-	Check,
-	ChevronRight,
-	Copy,
-	Key,
-	type LucideIcon,
-	Menu,
-	Shield,
-	X,
-} from "lucide-react";
-import { AnimatePresence, motion } from "motion/react";
+import { Key, User } from "lucide-react";
+import { motion } from "motion/react";
 import { useRouter } from "next/navigation";
 import { useTranslations } from "next-intl";
 import { useCallback, useState } from "react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { useApiKey } from "@/hooks/use-api-key";
-import { cn } from "@/lib/utils";
-
-interface SettingsNavItem {
-	id: string;
-	label: string;
-	description: string;
-	icon: LucideIcon;
-}
-
-function UserSettingsSidebar({
-	activeSection,
-	onSectionChange,
-	onBackToApp,
-	isOpen,
-	onClose,
-	navItems,
-}: {
-	activeSection: string;
-	onSectionChange: (section: string) => void;
-	onBackToApp: () => void;
-	isOpen: boolean;
-	onClose: () => void;
-	navItems: SettingsNavItem[];
-}) {
-	const t = useTranslations("userSettings");
-
-	const handleNavClick = (sectionId: string) => {
-		onSectionChange(sectionId);
-		onClose();
-	};
-
-	return (
-		<>
-			<AnimatePresence>
-				{isOpen && (
-					<motion.div
-						initial={{ opacity: 0 }}
-						animate={{ opacity: 1 }}
-						exit={{ opacity: 0 }}
-						transition={{ duration: 0.2 }}
-						className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm md:hidden"
-						onClick={onClose}
-					/>
-				)}
-			</AnimatePresence>
-
-			<aside
-				className={cn(
-					"fixed left-0 top-0 z-50 md:relative md:z-auto",
-					"flex h-full w-72 shrink-0 flex-col bg-background md:bg-muted/30",
-					"md:border-r",
-					"transition-transform duration-300 ease-out",
-					"md:translate-x-0",
-					isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
-				)}
-			>
-				{/* Header with title */}
-				<div className="space-y-3 p-4">
-					<div className="flex items-center justify-between">
-						<Button
-							variant="ghost"
-							onClick={onBackToApp}
-							className="group h-11 justify-start gap-3 px-3 hover:bg-muted"
-						>
-							<div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10 transition-colors group-hover:bg-primary/20">
-								<ArrowLeft className="h-4 w-4 text-primary" />
-							</div>
-							<span className="font-medium">{t("back_to_app")}</span>
-						</Button>
-						<Button variant="ghost" size="icon" onClick={onClose} className="h-9 w-9 md:hidden">
-							<X className="h-5 w-5" />
-						</Button>
-					</div>
-					{/* Settings Title */}
-					<div className="px-3">
-						<h2 className="text-lg font-semibold text-foreground">{t("title")}</h2>
-					</div>
-				</div>
-
-				<nav className="flex-1 space-y-1 overflow-y-auto px-3 py-2">
-					{navItems.map((item, index) => {
-						const isActive = activeSection === item.id;
-						const Icon = item.icon;
-
-						return (
-							<motion.button
-								key={item.id}
-								initial={{ opacity: 0, x: -10 }}
-								animate={{ opacity: 1, x: 0 }}
-								transition={{ delay: 0.1 + index * 0.05, duration: 0.3 }}
-								onClick={() => handleNavClick(item.id)}
-								whileHover={{ scale: 1.01 }}
-								whileTap={{ scale: 0.99 }}
-								className={cn(
-									"relative flex w-full items-center gap-3 rounded-xl px-3 py-3 text-left transition-all duration-200",
-									isActive ? "border border-border bg-muted shadow-sm" : "hover:bg-muted/60"
-								)}
-							>
-								{isActive && (
-									<motion.div
-										layoutId="userSettingsActiveIndicator"
-										className="absolute left-0 top-1/2 h-8 w-1 -translate-y-1/2 rounded-r-full bg-primary"
-										initial={false}
-										transition={{
-											type: "spring",
-											stiffness: 500,
-											damping: 35,
-										}}
-									/>
-								)}
-								<div
-									className={cn(
-										"flex h-9 w-9 items-center justify-center rounded-lg transition-colors",
-										isActive ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground"
-									)}
-								>
-									<Icon className="h-4 w-4" />
-								</div>
-								<div className="min-w-0 flex-1">
-									<p
-										className={cn(
-											"truncate text-sm font-medium transition-colors",
-											isActive ? "text-foreground" : "text-muted-foreground"
-										)}
-									>
-										{item.label}
-									</p>
-									<p className="truncate text-xs text-muted-foreground/70">{item.description}</p>
-								</div>
-								<ChevronRight
-									className={cn(
-										"h-4 w-4 shrink-0 transition-all",
-										isActive
-											? "translate-x-0 text-primary opacity-100"
-											: "-translate-x-1 text-muted-foreground/40 opacity-0"
-									)}
-								/>
-							</motion.button>
-						);
-					})}
-				</nav>
-			</aside>
-		</>
-	);
-}
-
-function ApiKeyContent({ onMenuClick }: { onMenuClick: () => void }) {
-	const t = useTranslations("userSettings");
-	const { apiKey, isLoading, copied, copyToClipboard } = useApiKey();
-
-	return (
-		<motion.div
-			initial={{ opacity: 0 }}
-			animate={{ opacity: 1 }}
-			transition={{ delay: 0.2, duration: 0.4 }}
-			className="h-full min-w-0 flex-1 overflow-hidden bg-background"
-		>
-			<div className="h-full overflow-y-auto">
-				<div className="mx-auto max-w-4xl p-4 md:p-6 lg:p-10">
-					<AnimatePresence mode="wait">
-						<motion.div
-							key="api-key-header"
-							initial={{ opacity: 0, y: 10 }}
-							animate={{ opacity: 1, y: 0 }}
-							exit={{ opacity: 0, y: -10 }}
-							transition={{ duration: 0.3 }}
-							className="mb-6 md:mb-8"
-						>
-							<div className="flex items-center gap-3 md:gap-4">
-								<Button
-									variant="outline"
-									size="icon"
-									onClick={onMenuClick}
-									className="h-10 w-10 shrink-0 md:hidden"
-								>
-									<Menu className="h-5 w-5" />
-								</Button>
-								<motion.div
-									initial={{ scale: 0.8, opacity: 0 }}
-									animate={{ scale: 1, opacity: 1 }}
-									transition={{ delay: 0.1, duration: 0.3 }}
-									className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg border border-primary/10 bg-gradient-to-br from-primary/20 to-primary/5 shadow-sm md:h-14 md:w-14 md:rounded-2xl"
-								>
-									<Key className="h-5 w-5 text-primary md:h-7 md:w-7" />
-								</motion.div>
-								<div className="min-w-0">
-									<h1 className="truncate text-lg font-bold tracking-tight md:text-2xl">
-										{t("api_key_title")}
-									</h1>
-									<p className="text-sm text-muted-foreground">{t("api_key_description")}</p>
-								</div>
-							</div>
-						</motion.div>
-					</AnimatePresence>
-
-					<AnimatePresence mode="wait">
-						<motion.div
-							key="api-key-content"
-							initial={{ opacity: 0, y: 20 }}
-							animate={{ opacity: 1, y: 0 }}
-							exit={{ opacity: 0, y: -20 }}
-							transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
-							className="space-y-6"
-						>
-							<Alert>
-								<Shield className="h-4 w-4" />
-								<AlertTitle>{t("api_key_warning_title")}</AlertTitle>
-								<AlertDescription>{t("api_key_warning_description")}</AlertDescription>
-							</Alert>
-
-							<div className="rounded-lg border bg-card p-6">
-								<h3 className="mb-4 font-medium">{t("your_api_key")}</h3>
-								{isLoading ? (
-									<div className="h-12 w-full animate-pulse rounded-md bg-muted" />
-								) : apiKey ? (
-									<div className="flex items-center gap-2">
-										<div className="flex-1 overflow-x-auto rounded-md bg-muted p-3 font-mono text-sm">
-											{apiKey}
-										</div>
-										<TooltipProvider>
-											<Tooltip>
-												<TooltipTrigger asChild>
-													<Button
-														variant="outline"
-														size="icon"
-														onClick={copyToClipboard}
-														className="shrink-0"
-													>
-														{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-													</Button>
-												</TooltipTrigger>
-												<TooltipContent>{copied ? t("copied") : t("copy")}</TooltipContent>
-											</Tooltip>
-										</TooltipProvider>
-									</div>
-								) : (
-									<p className="text-center text-muted-foreground">{t("no_api_key")}</p>
-								)}
-							</div>
-
-							<div className="rounded-lg border bg-card p-6">
-								<h3 className="mb-2 font-medium">{t("usage_title")}</h3>
-								<p className="mb-4 text-sm text-muted-foreground">{t("usage_description")}</p>
-								<pre className="overflow-x-auto rounded-md bg-muted p-3 text-sm">
-									<code>Authorization: Bearer {apiKey || "YOUR_API_KEY"}</code>
-								</pre>
-							</div>
-						</motion.div>
-					</AnimatePresence>
-				</div>
-			</div>
-		</motion.div>
-	);
-}
+import { ApiKeyContent } from "./components/ApiKeyContent";
+import { ProfileContent } from "./components/ProfileContent";
+import { UserSettingsSidebar, type SettingsNavItem } from "./components/UserSettingsSidebar";
 
 export default function UserSettingsPage() {
 	const t = useTranslations("userSettings");
 	const router = useRouter();
-	const [activeSection, setActiveSection] = useState("api-key");
+	const [activeSection, setActiveSection] = useState("profile");
 	const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
 	const navItems: SettingsNavItem[] = [
+		{
+			id: "profile",
+			label: t("profile_nav_label"),
+			description: t("profile_nav_description"),
+			icon: User,
+		},
 		{
 			id: "api-key",
 			label: t("api_key_nav_label"),
@@ -310,6 +51,9 @@ export default function UserSettingsPage() {
 						onClose={() => setIsSidebarOpen(false)}
 						navItems={navItems}
 					/>
+					{activeSection === "profile" && (
+						<ProfileContent onMenuClick={() => setIsSidebarOpen(true)} />
+					)}
 					{activeSection === "api-key" && (
 						<ApiKeyContent onMenuClick={() => setIsSidebarOpen(true)} />
 					)}
diff --git a/surfsense_web/messages/en.json b/surfsense_web/messages/en.json
index ae7f98843..131cbb360 100644
--- a/surfsense_web/messages/en.json
+++ b/surfsense_web/messages/en.json
@@ -109,6 +109,10 @@
 		"title": "User Settings",
 		"description": "Manage your account settings and API access",
 		"back_to_app": "Back to app",
+		"profile_nav_label": "Profile",
+		"profile_nav_description": "Manage your display name and avatar",
+		"profile_title": "Profile",
+		"profile_description": "Update your personal information",
 		"api_key_nav_label": "API Key",
 		"api_key_nav_description": "Manage your API access token",
 		"api_key_title": "API Key",