apps/api/prisma/schema.prisma

@@ -14,6 +14,8 @@ model Player {
   discriminator   String
   avatar          String?
   characterName   String  @default("")
+  bio             String  @default("")
+  profileSettings Json?
   createdAt       Float
   lastSavedAt     Float
   totalGoldEarned Float   @default(0)

apps/api/src/routes/profile.ts

@@ -1,9 +1,32 @@
-import type { GameState } from "@elysium/types";
+import type {
+  GameState,
+  ProfileSettings,
+  UpdateProfileRequest,
+} from "@elysium/types";
 import { Hono } from "hono";
 import { prisma } from "../db/client.js";
+import { DEFAULT_PROFILE_SETTINGS } from "@elysium/types";
+import { authMiddleware } from "../middleware/auth.js";
 
 export const profileRouter = new Hono();
 
+const parseProfileSettings = (raw: unknown): ProfileSettings => {
+  if (
+    raw !== null &&
+    typeof raw === "object" &&
+    !Array.isArray(raw)
+  ) {
+    const obj = raw as Record<string, unknown>;
+    return {
+      showTotalGold: obj.showTotalGold !== false,
+      showTotalClicks: obj.showTotalClicks !== false,
+      showPrestige: obj.showPrestige !== false,
+      showGuildFounded: obj.showGuildFounded !== false,
+    };
+  }
+  return { ...DEFAULT_PROFILE_SETTINGS };
+};
+
 profileRouter.get("/:discordId", async (context) => {
   const { discordId } = context.req.param();
 
@@ -18,14 +41,46 @@ profileRouter.get("/:discordId", async (context) => {
 
   const state = gameStateRecord?.state as unknown as GameState | undefined;
   const prestigeCount = state?.prestige.count ?? 0;
+  const profileSettings = parseProfileSettings(player.profileSettings);
 
   return context.json({
     characterName: player.characterName,
     username: player.username,
     avatar: player.avatar ?? null,
+    bio: player.bio ?? "",
+    profileSettings,
     prestigeCount,
     totalGoldEarned: player.totalGoldEarned,
     totalClicks: player.totalClicks,
     createdAt: player.createdAt,
   });
 });
+
+profileRouter.put("/", authMiddleware, async (context) => {
+  const discordId = context.get("discordId") as string;
+  const body = await context.req.json<UpdateProfileRequest>();
+
+  const characterName = (body.characterName ?? "").trim().slice(0, 32);
+  const bio = (body.bio ?? "").trim().slice(0, 200);
+  const profileSettings: ProfileSettings = {
+    showTotalGold: body.profileSettings?.showTotalGold !== false,
+    showTotalClicks: body.profileSettings?.showTotalClicks !== false,
+    showPrestige: body.profileSettings?.showPrestige !== false,
+    showGuildFounded: body.profileSettings?.showGuildFounded !== false,
+  };
+
+  if (!characterName) {
+    return context.json({ error: "Character name cannot be empty" }, 400);
+  }
+
+  const updated = await prisma.player.update({
+    where: { discordId },
+    data: { characterName, bio, profileSettings },
+  });
+
+  return context.json({
+    characterName: updated.characterName,
+    bio: updated.bio,
+    profileSettings,
+  });
+});

apps/web/src/api/client.ts

@@ -8,6 +8,8 @@ import type {
   PublicProfileResponse,
   SaveRequest,
   SaveResponse,
+  UpdateProfileRequest,
+  UpdateProfileResponse,
 } from "@elysium/types";
 
 const BASE_URL = "/api";
@@ -79,3 +81,11 @@ export const getPublicProfile = async (
   discordId: string,
 ): Promise<PublicProfileResponse> =>
   request<PublicProfileResponse>(`/profile/${discordId}`);
+
+export const updateProfile = async (
+  body: UpdateProfileRequest,
+): Promise<UpdateProfileResponse> =>
+  request<UpdateProfileResponse>("/profile", {
+    method: "PUT",
+    body: JSON.stringify(body),
+  });

apps/web/src/components/game/EditProfileModal.tsx

@@ -0,0 +1,138 @@
+import type { ProfileSettings } from "@elysium/types";
+import { useState } from "react";
+import { updateProfile } from "../../api/client.js";
+import { useGame } from "../../context/GameContext.js";
+
+interface EditProfileModalProps {
+  onClose: () => void;
+}
+
+const STAT_TOGGLES: { key: keyof ProfileSettings; label: string; icon: string }[] = [
+  { key: "showTotalGold", label: "Total Gold Earned", icon: "🪙" },
+  { key: "showTotalClicks", label: "Total Clicks", icon: "👆" },
+  { key: "showPrestige", label: "Prestige Level", icon: "⭐" },
+  { key: "showGuildFounded", label: "Guild Founded Date", icon: "📅" },
+];
+
+export const EditProfileModal = ({ onClose }: EditProfileModalProps): React.JSX.Element => {
+  const { state } = useGame();
+  const player = state?.player;
+
+  const [characterName, setCharacterName] = useState(player?.characterName ?? "");
+  const [bio, setBio] = useState("");
+  const [settings, setSettings] = useState<ProfileSettings>({
+    showTotalGold: true,
+    showTotalClicks: true,
+    showPrestige: true,
+    showGuildFounded: true,
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [saved, setSaved] = useState(false);
+
+  const handleSave = async (): Promise<void> => {
+    setSaving(true);
+    setError(null);
+    try {
+      await updateProfile({ characterName, bio, profileSettings: settings });
+      setSaved(true);
+      setTimeout(onClose, 900);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : "Failed to save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const toggleSetting = (key: keyof ProfileSettings): void => {
+    setSettings((prev) => ({ ...prev, [key]: !prev[key] }));
+  };
+
+  return (
+    <div className="modal-overlay" role="dialog" aria-modal="true">
+      <div className="modal edit-profile-modal">
+        <div className="modal-header">
+          <h2>Edit Profile</h2>
+          <button
+            aria-label="Close"
+            className="modal-close"
+            onClick={onClose}
+            type="button"
+          >
+            ✕
+          </button>
+        </div>
+
+        <div className="edit-profile-form">
+          <label className="edit-profile-label" htmlFor="edit-char-name">
+            Display Name
+          </label>
+          <input
+            className="edit-profile-input"
+            id="edit-char-name"
+            maxLength={32}
+            placeholder="Your character's name"
+            type="text"
+            value={characterName}
+            onChange={(e) => { setCharacterName(e.target.value); }}
+          />
+          <span className="edit-profile-hint">{characterName.length} / 32</span>
+
+          <label className="edit-profile-label" htmlFor="edit-bio">
+            Bio
+          </label>
+          <textarea
+            className="edit-profile-textarea"
+            id="edit-bio"
+            maxLength={200}
+            placeholder="Tell the world about your guild… (optional)"
+            rows={3}
+            value={bio}
+            onChange={(e) => { setBio(e.target.value); }}
+          />
+          <span className="edit-profile-hint">{bio.length} / 200</span>
+
+          <div className="edit-profile-section">
+            <p className="edit-profile-label">Visible Stats</p>
+            <p className="edit-profile-sublabel">Choose which stats appear on your public profile.</p>
+            <div className="stat-toggles">
+              {STAT_TOGGLES.map(({ key, label, icon }) => (
+                <button
+                  key={key}
+                  className={`stat-toggle-btn ${settings[key] ? "stat-toggle-on" : "stat-toggle-off"}`}
+                  onClick={() => { toggleSetting(key); }}
+                  type="button"
+                >
+                  <span>{icon} {label}</span>
+                  <span className="stat-toggle-indicator">
+                    {settings[key] ? "✓ Shown" : "Hidden"}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {error && <p className="edit-profile-error">{error}</p>}
+
+          <div className="edit-profile-actions">
+            <button
+              className="edit-profile-cancel"
+              onClick={onClose}
+              type="button"
+            >
+              Cancel
+            </button>
+            <button
+              className="edit-profile-save"
+              disabled={saving || !characterName.trim()}
+              onClick={() => { void handleSave(); }}
+              type="button"
+            >
+              {saved ? "✓ Saved!" : saving ? "Saving…" : "Save Profile"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/web/src/components/game/GameLayout.tsx

@@ -7,6 +7,7 @@ import { AdventurerPanel } from "./AdventurerPanel.js";
 import { BattleModal } from "./BattleModal.js";
 import { BossPanel } from "./BossPanel.js";
 import { ClickArea } from "./ClickArea.js";
+import { EditProfileModal } from "./EditProfileModal.js";
 import { EquipmentPanel } from "./EquipmentPanel.js";
 import { OfflineModal } from "./OfflineModal.js";
 import { PrestigePanel } from "./PrestigePanel.js";
@@ -28,6 +29,7 @@ const TABS: { id: Tab; label: string }[] = [
 export const GameLayout = (): React.JSX.Element => {
   const { state, isLoading, error, battleResult, dismissBattle } = useGame();
   const [activeTab, setActiveTab] = useState<Tab>("adventurers");
+  const [editingProfile, setEditingProfile] = useState(false);
 
   if (isLoading) {
     return (
@@ -55,12 +57,16 @@ export const GameLayout = (): React.JSX.Element => {
         resources={state.resources}
         prestigeCount={state.prestige.count}
         profileUrl={profileUrl}
+        onEditProfile={() => { setEditingProfile(true); }}
       />
       <OfflineModal />
       <AchievementToast />
       {battleResult && (
         <BattleModal battle={battleResult} onDismiss={dismissBattle} />
       )}
+      {editingProfile && (
+        <EditProfileModal onClose={() => { setEditingProfile(false); }} />
+      )}
 
       <div className="game-main">
         <aside className="game-sidebar">

apps/web/src/components/game/ProfilePage.tsx

@@ -49,6 +49,8 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
     );
   }
 
+  const s = profile.profileSettings;
+
   const avatarUrl = profile.avatar
     ? `https://cdn.discordapp.com/avatars/${discordId}/${profile.avatar}.png?size=128`
     : `https://cdn.discordapp.com/embed/avatars/${parseInt(discordId, 10) % 5}.png`;
@@ -59,6 +61,27 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
     day: "numeric",
   });
 
+  const visibleStats = [
+    s.showTotalGold && {
+      icon: "🪙",
+      value: formatNumber(profile.totalGoldEarned),
+      label: "Total Gold Earned",
+      date: false,
+    },
+    s.showTotalClicks && {
+      icon: "👆",
+      value: formatNumber(profile.totalClicks),
+      label: "Total Clicks",
+      date: false,
+    },
+    s.showGuildFounded && {
+      icon: "📅",
+      value: memberSince,
+      label: "Guild Founded",
+      date: true,
+    },
+  ].filter(Boolean) as Array<{ icon: string; value: string; label: string; date: boolean }>;
+
   return (
     <div className="profile-page">
       <div className="profile-card">
@@ -71,7 +94,7 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
           <div className="profile-identity">
             <h1 className="profile-character-name">{profile.characterName}</h1>
             <p className="profile-username">@{profile.username}</p>
-            {profile.prestigeCount > 0 && (
+            {s.showPrestige && profile.prestigeCount > 0 && (
               <span className="profile-prestige-badge">
                 ⭐ Prestige {profile.prestigeCount}
               </span>
@@ -79,23 +102,23 @@ export const ProfilePage = ({ discordId }: ProfilePageProps): React.JSX.Element
           </div>
         </div>
 
-        <div className="profile-stats">
-          <div className="profile-stat">
-            <span className="profile-stat-icon">🪙</span>
-            <span className="profile-stat-value">{formatNumber(profile.totalGoldEarned)}</span>
-            <span className="profile-stat-label">Total Gold Earned</span>
+        {profile.bio && (
+          <p className="profile-bio">{profile.bio}</p>
+        )}
+
+        {visibleStats.length > 0 && (
+          <div className="profile-stats">
+            {visibleStats.map((stat) => (
+              <div key={stat.label} className="profile-stat">
+                <span className="profile-stat-icon">{stat.icon}</span>
+                <span className={`profile-stat-value ${stat.date ? "profile-stat-date" : ""}`}>
+                  {stat.value}
+                </span>
+                <span className="profile-stat-label">{stat.label}</span>
+              </div>
+            ))}
           </div>
-          <div className="profile-stat">
-            <span className="profile-stat-icon">👆</span>
-            <span className="profile-stat-value">{formatNumber(profile.totalClicks)}</span>
-            <span className="profile-stat-label">Total Clicks</span>
-          </div>
-          <div className="profile-stat">
-            <span className="profile-stat-icon">📅</span>
-            <span className="profile-stat-value profile-stat-date">{memberSince}</span>
-            <span className="profile-stat-label">Guild Founded</span>
-          </div>
-        </div>
+        )}
 
         <div className="profile-actions">
           <button

apps/web/src/components/ui/ResourceBar.tsx

@@ -5,9 +5,15 @@ interface ResourceBarProps {
   resources: Resource;
   prestigeCount: number;
   profileUrl: string;
+  onEditProfile: () => void;
 }
 
-export const ResourceBar = ({ resources, prestigeCount, profileUrl }: ResourceBarProps): React.JSX.Element => (
+export const ResourceBar = ({
+  resources,
+  prestigeCount,
+  profileUrl,
+  onEditProfile,
+}: ResourceBarProps): React.JSX.Element => (
   <header className="resource-bar">
     <div className="resource">
       <span className="resource-icon">🪙</span>
@@ -34,14 +40,24 @@ export const ResourceBar = ({ resources, prestigeCount, profileUrl }: ResourceBa
         ⭐ Prestige {prestigeCount}
       </div>
     )}
-    <a
-      className="profile-link-button"
-      href={profileUrl}
-      rel="noreferrer"
-      target="_blank"
-      title="View your public profile"
-    >
-      👤 Profile
-    </a>
+    <div className="profile-buttons">
+      <a
+        className="profile-link-button"
+        href={profileUrl}
+        rel="noreferrer"
+        target="_blank"
+        title="View your public profile"
+      >
+        👤 Profile
+      </a>
+      <button
+        className="profile-edit-button"
+        onClick={onEditProfile}
+        title="Edit your profile"
+        type="button"
+      >
+        ✏️
+      </button>
+    </div>
   </header>
 );

apps/web/src/styles.css

@@ -1107,7 +1107,14 @@ body {
   font-size: 0.85rem;
 }
 
-/* ── Profile link button in ResourceBar ────────────────────────────────── */
+/* ── Profile buttons in ResourceBar ────────────────────────────────────── */
+
+.profile-buttons {
+  align-items: center;
+  display: flex;
+  gap: 0.35rem;
+  margin-left: auto;
+}
 
 .profile-link-button {
   align-items: center;
@@ -1118,7 +1125,6 @@ body {
   display: flex;
   font-size: 0.8rem;
   gap: 0.3rem;
-  margin-left: auto;
   padding: 0.3rem 0.8rem;
   text-decoration: none;
   transition: all 0.2s;
@@ -1131,6 +1137,27 @@ body {
   color: var(--colour-text);
 }
 
+.profile-edit-button {
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(147, 51, 234, 0.4);
+  border-radius: 50%;
+  color: var(--colour-text-muted);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 0.85rem;
+  height: 2rem;
+  line-height: 1;
+  padding: 0;
+  transition: all 0.2s;
+  width: 2rem;
+}
+
+.profile-edit-button:hover {
+  background: rgba(147, 51, 234, 0.2);
+  border-color: var(--colour-primary);
+  color: var(--colour-text);
+}
+
 /* ── Public Profile Page ────────────────────────────────────────────────── */
 
 .profile-page {
@@ -1270,6 +1297,17 @@ body {
   opacity: 0.85;
 }
 
+.profile-bio {
+  border-bottom: 1px solid rgba(147, 51, 234, 0.2);
+  border-top: 1px solid rgba(147, 51, 234, 0.2);
+  color: var(--colour-text-muted);
+  font-size: 0.9rem;
+  font-style: italic;
+  line-height: 1.5;
+  margin-bottom: 1.25rem;
+  padding: 0.75rem 0;
+}
+
 .profile-loading,
 .profile-error {
   color: var(--colour-text-muted);
@@ -1280,6 +1318,178 @@ body {
   text-align: center;
 }
 
+/* ── Edit Profile Modal ─────────────────────────────────────────────────── */
+
+.edit-profile-modal {
+  max-width: 480px;
+  text-align: left;
+  width: 100%;
+}
+
+.modal-header {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 1rem;
+}
+
+.modal-header h2 {
+  margin: 0;
+}
+
+.modal-close {
+  background: transparent;
+  border: none;
+  color: var(--colour-text-muted);
+  cursor: pointer;
+  font-size: 1rem;
+  line-height: 1;
+  padding: 0.25rem;
+  transition: color 0.15s;
+}
+
+.modal-close:hover {
+  color: var(--colour-text);
+}
+
+.edit-profile-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.edit-profile-label {
+  color: var(--colour-text);
+  font-size: 0.85rem;
+  font-weight: 600;
+  margin-top: 0.5rem;
+}
+
+.edit-profile-sublabel {
+  color: var(--colour-text-muted);
+  font-size: 0.78rem;
+  margin: 0;
+}
+
+.edit-profile-input,
+.edit-profile-textarea {
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(147, 51, 234, 0.4);
+  border-radius: 0.4rem;
+  color: var(--colour-text);
+  font-family: inherit;
+  font-size: 0.9rem;
+  padding: 0.5rem 0.75rem;
+  resize: vertical;
+  width: 100%;
+}
+
+.edit-profile-input:focus,
+.edit-profile-textarea:focus {
+  border-color: var(--colour-primary);
+  outline: none;
+}
+
+.edit-profile-hint {
+  color: var(--colour-text-muted);
+  font-size: 0.72rem;
+  text-align: right;
+}
+
+.edit-profile-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-top: 0.25rem;
+}
+
+.stat-toggles {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.stat-toggle-btn {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(147, 51, 234, 0.25);
+  border-radius: 0.4rem;
+  color: var(--colour-text-muted);
+  cursor: pointer;
+  display: flex;
+  font-family: inherit;
+  font-size: 0.85rem;
+  justify-content: space-between;
+  padding: 0.5rem 0.75rem;
+  transition: all 0.15s;
+}
+
+.stat-toggle-on {
+  background: rgba(147, 51, 234, 0.12);
+  border-color: rgba(147, 51, 234, 0.5);
+  color: var(--colour-text);
+}
+
+.stat-toggle-indicator {
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.stat-toggle-on .stat-toggle-indicator {
+  color: var(--colour-success);
+}
+
+.edit-profile-error {
+  color: var(--colour-error);
+  font-size: 0.82rem;
+}
+
+.edit-profile-actions {
+  display: flex;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+.edit-profile-cancel {
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 0.4rem;
+  color: var(--colour-text-muted);
+  cursor: pointer;
+  flex: 1;
+  font-family: inherit;
+  font-size: 0.9rem;
+  padding: 0.6rem;
+  transition: border-color 0.2s;
+}
+
+.edit-profile-cancel:hover {
+  border-color: rgba(255, 255, 255, 0.35);
+}
+
+.edit-profile-save {
+  background: var(--colour-primary);
+  border: none;
+  border-radius: 0.4rem;
+  color: #fff;
+  cursor: pointer;
+  flex: 2;
+  font-family: inherit;
+  font-size: 0.9rem;
+  font-weight: 600;
+  padding: 0.6rem;
+  transition: opacity 0.2s;
+}
+
+.edit-profile-save:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.edit-profile-save:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 /* ── Panel Header (title + lock toggle row) ────────────────────────────── */
 
 .panel-header {

packages/types/src/index.ts

@@ -16,6 +16,8 @@ export type {
   PublicProfileResponse,
   SaveRequest,
   SaveResponse,
+  UpdateProfileRequest,
+  UpdateProfileResponse,
 } from "./interfaces/Api.js";
 export type { Boss, BossStatus } from "./interfaces/Boss.js";
 export type {
@@ -39,3 +41,5 @@ export type {
   UpgradeTarget,
 } from "./interfaces/Upgrade.js";
 export type { Zone, ZoneStatus } from "./interfaces/Zone.js";
+export type { ProfileSettings } from "./interfaces/ProfileSettings.js";
+export { DEFAULT_PROFILE_SETTINGS } from "./interfaces/ProfileSettings.js";

packages/types/src/interfaces/Api.ts

@@ -1,5 +1,6 @@
 import type { GameState } from "./GameState.js";
 import type { Player } from "./Player.js";
+import type { ProfileSettings } from "./ProfileSettings.js";
 
 export interface AuthResponse {
   token: string;
@@ -69,12 +70,29 @@ export interface PublicProfileResponse {
   characterName: string;
   username: string;
   avatar: string | null;
+  bio: string;
+  profileSettings: ProfileSettings;
   prestigeCount: number;
   totalGoldEarned: number;
   totalClicks: number;
   createdAt: number;
 }
 
+export interface UpdateProfileRequest {
+  characterName: string;
+  bio: string;
+  profileSettings: ProfileSettings;
+}
+
+export interface UpdateProfileResponse {
+  characterName: string;
+  bio: string;
+  profileSettings: ProfileSettings;
+}
+
 export interface ApiError {
   error: string;
 }
+
+// Re-export for convenience
+export type { ProfileSettings };

packages/types/src/interfaces/ProfileSettings.ts

@@ -0,0 +1,13 @@
+export interface ProfileSettings {
+  showTotalGold: boolean;
+  showTotalClicks: boolean;
+  showPrestige: boolean;
+  showGuildFounded: boolean;
+}
+
+export const DEFAULT_PROFILE_SETTINGS: ProfileSettings = {
+  showTotalGold: true,
+  showTotalClicks: true,
+  showPrestige: true,
+  showGuildFounded: true,
+};