diff --git a/src/client/components/ProfileSection.tsx b/src/client/components/ProfileSection.tsx
index 98e4191..37b50d8 100644
--- a/src/client/components/ProfileSection.tsx
+++ b/src/client/components/ProfileSection.tsx
@@ -11,7 +11,8 @@ export function ProfileSection() {
 
 	const [displayName, setDisplayName] = useState("");
 	const [bio, setBio] = useState("");
-	const [avatarUrl, setAvatarUrl] = useState<string | null>(null);
+	const [avatarFilename, setAvatarFilename] = useState<string | null>(null);
+	const [avatarDisplayUrl, setAvatarDisplayUrl] = useState<string | null>(null);
 	const [dirty, setDirty] = useState(false);
 	const [message, setMessage] = useState<{
 		type: "success" | "error";
@@ -24,7 +25,8 @@ export function ProfileSection() {
 		if (profile && !dirty) {
 			setDisplayName(profile.displayName ?? "");
 			setBio(profile.bio ?? "");
-			setAvatarUrl(profile.avatarUrl ?? null);
+			setAvatarFilename(profile.avatarUrl ?? null);
+			setAvatarDisplayUrl(profile.avatarImageUrl ?? null);
 		}
 	}, [profile, dirty]);
 
@@ -34,7 +36,7 @@ export function ProfileSection() {
 		try {
 			await updateProfile.mutateAsync({
 				displayName: displayName.trim() || undefined,
-				avatarUrl,
+				avatarUrl: avatarFilename,
 				bio: bio.trim() || undefined,
 			});
 			setDirty(false);
@@ -63,13 +65,16 @@ export function ProfileSection() {
 			return;
 		}
 
+		const localPreview = URL.createObjectURL(file);
+		setAvatarDisplayUrl(localPreview);
 		setUploading(true);
 		setMessage(null);
 		try {
 			const result = await apiUpload<{ filename: string }>("/api/images", file);
-			setAvatarUrl(result.filename);
+			setAvatarFilename(result.filename);
 			setDirty(true);
 		} catch {
+			setAvatarDisplayUrl(null);
 			setMessage({ type: "error", text: "Avatar upload failed." });
 		} finally {
 			setUploading(false);
@@ -92,9 +97,9 @@ export function ProfileSection() {
 					onClick={() => fileInputRef.current?.click()}
 					className="relative w-16 h-16 rounded-full overflow-hidden cursor-pointer group shrink-0"
 				>
-					{avatarUrl ? (
+					{avatarDisplayUrl ? (
 						<img
-							src={`/uploads/${avatarUrl}`}
+							src={avatarDisplayUrl}
 							alt="Avatar"
 							className="w-full h-full object-cover"
 						/>
@@ -145,11 +150,12 @@ export function ProfileSection() {
 					>
 						{uploading ? "Uploading..." : "Change avatar"}
 					</button>
-					{avatarUrl && (
+					{avatarFilename && (
 						<button
 							type="button"
 							onClick={() => {
-								setAvatarUrl(null);
+								setAvatarFilename(null);
+								setAvatarDisplayUrl(null);
 								setDirty(true);
 							}}
 							className="block text-xs text-red-500 hover:text-red-700 mt-0.5"
diff --git a/src/client/hooks/useProfile.ts b/src/client/hooks/useProfile.ts
index 7c74c62..f1af010 100644
--- a/src/client/hooks/useProfile.ts
+++ b/src/client/hooks/useProfile.ts
@@ -5,6 +5,7 @@ interface PublicProfile {
 	id: number;
 	displayName: string | null;
 	avatarUrl: string | null;
+	avatarImageUrl: string | null;
 	bio: string | null;
 	setups: { id: number; name: string; createdAt: string }[];
 }
diff --git a/src/client/routes/users/$userId.tsx b/src/client/routes/users/$userId.tsx
index 5b1940d..af5471f 100644
--- a/src/client/routes/users/$userId.tsx
+++ b/src/client/routes/users/$userId.tsx
@@ -52,9 +52,9 @@ function PublicProfilePage() {
 		<div className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
 			{/* Profile header */}
 			<div className="flex items-center gap-5 mb-8">
-				{profile.avatarUrl ? (
+				{profile.avatarImageUrl ? (
 					<img
-						src={`/uploads/${profile.avatarUrl}`}
+						src={profile.avatarImageUrl}
 						alt={displayName}
 						className="w-20 h-20 rounded-full object-cover"
 					/>
diff --git a/src/server/routes/auth.ts b/src/server/routes/auth.ts
index 1170bd9..c9f2b96 100644
--- a/src/server/routes/auth.ts
+++ b/src/server/routes/auth.ts
@@ -14,6 +14,7 @@ import {
 	listApiKeys,
 } from "../services/auth.service.ts";
 import { updateProfile } from "../services/profile.service.ts";
+import { getImageUrl } from "../services/storage.service.ts";
 
 type Env = { Variables: { db?: any; userId?: number } };
 
@@ -97,7 +98,12 @@ app.put(
 		const data = c.req.valid("json");
 		const updated = await updateProfile(db, userId, data);
 		if (!updated) return c.json({ error: "User not found" }, 404);
-		return c.json(updated);
+		return c.json({
+			...updated,
+			avatarImageUrl: updated.avatarUrl
+				? await getImageUrl(updated.avatarUrl)
+				: null,
+		});
 	},
 );
 
diff --git a/src/server/routes/profiles.ts b/src/server/routes/profiles.ts
index 33a795d..a9be616 100644
--- a/src/server/routes/profiles.ts
+++ b/src/server/routes/profiles.ts
@@ -1,9 +1,21 @@
 import { Hono } from "hono";
 import { parseId } from "../lib/params.ts";
 import { getPublicProfile } from "../services/profile.service.ts";
+import { getImageUrl } from "../services/storage.service.ts";
 
 type Env = { Variables: { db?: any; userId?: number } };
 
+async function enrichAvatarUrl<T extends { avatarUrl: string | null }>(
+	record: T,
+): Promise<T & { avatarImageUrl: string | null }> {
+	return {
+		...record,
+		avatarImageUrl: record.avatarUrl
+			? await getImageUrl(record.avatarUrl)
+			: null,
+	};
+}
+
 const app = new Hono<Env>();
 
 // GET /:id/profile — Public profile (no auth required)
@@ -15,7 +27,7 @@ app.get("/:id/profile", async (c) => {
 	const profile = await getPublicProfile(db, id);
 	if (!profile) return c.json({ error: "User not found" }, 404);
 
-	return c.json(profile);
+	return c.json(await enrichAvatarUrl(profile));
 });
 
 export { app as profileRoutes };