diff --git a/db/schema.sql b/db/schema.sql
index a57fa50..265241d 100644
--- a/db/schema.sql
+++ b/db/schema.sql
@@ -1,7 +1,7 @@
-\restrict Dg0ksc8IIsh0chvkrHOQy7LtnwsmjF3WyModqIXmKLfbi99THWiNyWMb9U47Fk5
+\restrict EIvSglJHygsNcIKc7gr1LRqCWzak1b2BYTPO17s7oUnsrweJPJORd0ywNzjCr4G
 
 -- Dumped from database version 16.10
--- Dumped by pg_dump version 18.0
+-- Dumped by pg_dump version 18.1
 
 SET statement_timeout = 0;
 SET lock_timeout = 0;
@@ -48,6 +48,59 @@ CREATE TABLE public.auth_tokens (
 );
 
 
+--
+-- Name: campaign_characters; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.campaign_characters (
+    id character varying(26) NOT NULL,
+    campaign_id character varying(26) NOT NULL,
+    character_id character varying(26) NOT NULL,
+    revealed_at timestamp with time zone,
+    added_by character varying(26) NOT NULL,
+    added_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    created_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL
+);
+
+
+--
+-- Name: campaign_members; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.campaign_members (
+    id character varying(26) NOT NULL,
+    campaign_id character varying(26) NOT NULL,
+    user_id character varying(26) NOT NULL,
+    role text NOT NULL,
+    invited_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    invited_by character varying(26) NOT NULL,
+    accepted_at timestamp with time zone,
+    declined_at timestamp with time zone,
+    created_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    invite_token character varying(26),
+    deleted_at timestamp without time zone,
+    CONSTRAINT campaign_members_not_both_accepted_and_declined CHECK ((NOT ((accepted_at IS NOT NULL) AND (declined_at IS NOT NULL)))),
+    CONSTRAINT campaign_members_role_check CHECK ((role = ANY (ARRAY['dm'::text, 'player'::text, 'viewer'::text])))
+);
+
+
+--
+-- Name: campaigns; Type: TABLE; Schema: public; Owner: -
+--
+
+CREATE TABLE public.campaigns (
+    id character varying(26) NOT NULL,
+    name text NOT NULL,
+    description text,
+    created_by character varying(26) NOT NULL,
+    created_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    updated_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    archived_at timestamp with time zone
+);
+
+
 --
 -- Name: char_abilities; Type: TABLE; Schema: public; Owner: -
 --
@@ -443,7 +496,8 @@ CREATE TABLE public.users (
     id character varying(26) NOT NULL,
     email text NOT NULL,
     created_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
-    updated_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL
+    updated_at timestamp with time zone DEFAULT CURRENT_TIMESTAMP NOT NULL,
+    name text
 );
 
 
@@ -455,6 +509,46 @@ ALTER TABLE ONLY public.auth_tokens
     ADD CONSTRAINT auth_tokens_pkey PRIMARY KEY (id);
 
 
+--
+-- Name: campaign_characters campaign_characters_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_characters
+    ADD CONSTRAINT campaign_characters_pkey PRIMARY KEY (id);
+
+
+--
+-- Name: campaign_characters campaign_characters_unique; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_characters
+    ADD CONSTRAINT campaign_characters_unique UNIQUE (campaign_id, character_id);
+
+
+--
+-- Name: campaign_members campaign_members_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_members
+    ADD CONSTRAINT campaign_members_pkey PRIMARY KEY (id);
+
+
+--
+-- Name: campaign_members campaign_members_unique; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_members
+    ADD CONSTRAINT campaign_members_unique UNIQUE (campaign_id, user_id);
+
+
+--
+-- Name: campaigns campaigns_pkey; Type: CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaigns
+    ADD CONSTRAINT campaigns_pkey PRIMARY KEY (id);
+
+
 --
 -- Name: char_abilities char_abilities_pkey; Type: CONSTRAINT; Schema: public; Owner: -
 --
@@ -660,6 +754,55 @@ CREATE INDEX idx_auth_tokens_expires_at ON public.auth_tokens USING btree (expir
 CREATE INDEX idx_auth_tokens_session_token_hash ON public.auth_tokens USING btree (session_token_hash);
 
 
+--
+-- Name: idx_campaign_characters_campaign_id; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX idx_campaign_characters_campaign_id ON public.campaign_characters USING btree (campaign_id);
+
+
+--
+-- Name: idx_campaign_characters_character_id; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX idx_campaign_characters_character_id ON public.campaign_characters USING btree (character_id);
+
+
+--
+-- Name: idx_campaign_members_campaign_id; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX idx_campaign_members_campaign_id ON public.campaign_members USING btree (campaign_id);
+
+
+--
+-- Name: idx_campaign_members_invite_token; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX idx_campaign_members_invite_token ON public.campaign_members USING btree (invite_token);
+
+
+--
+-- Name: idx_campaign_members_user_id; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX idx_campaign_members_user_id ON public.campaign_members USING btree (user_id);
+
+
+--
+-- Name: idx_campaigns_created_by; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX idx_campaigns_created_by ON public.campaigns USING btree (created_by);
+
+
+--
+-- Name: idx_campaigns_created_by_archived_at; Type: INDEX; Schema: public; Owner: -
+--
+
+CREATE INDEX idx_campaigns_created_by_archived_at ON public.campaigns USING btree (created_by, archived_at);
+
+
 --
 -- Name: idx_char_abilities_char_id_ability_created_at; Type: INDEX; Schema: public; Owner: -
 --
@@ -863,6 +1006,27 @@ CREATE INDEX idx_uploads_user_id ON public.uploads USING btree (user_id);
 CREATE UNIQUE INDEX idx_users_email ON public.users USING btree (email);
 
 
+--
+-- Name: campaign_characters campaign_characters_updated_at; Type: TRIGGER; Schema: public; Owner: -
+--
+
+CREATE TRIGGER campaign_characters_updated_at BEFORE UPDATE ON public.campaign_characters FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();
+
+
+--
+-- Name: campaign_members campaign_members_updated_at; Type: TRIGGER; Schema: public; Owner: -
+--
+
+CREATE TRIGGER campaign_members_updated_at BEFORE UPDATE ON public.campaign_members FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();
+
+
+--
+-- Name: campaigns campaigns_updated_at; Type: TRIGGER; Schema: public; Owner: -
+--
+
+CREATE TRIGGER campaigns_updated_at BEFORE UPDATE ON public.campaigns FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();
+
+
 --
 -- Name: char_abilities char_abilities_updated_at; Type: TRIGGER; Schema: public; Owner: -
 --
@@ -975,6 +1139,62 @@ CREATE TRIGGER update_char_notes_updated_at BEFORE UPDATE ON public.char_notes F
 CREATE TRIGGER users_updated_at BEFORE UPDATE ON public.users FOR EACH ROW EXECUTE FUNCTION public.update_updated_at_column();
 
 
+--
+-- Name: campaign_characters campaign_characters_added_by_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_characters
+    ADD CONSTRAINT campaign_characters_added_by_fkey FOREIGN KEY (added_by) REFERENCES public.users(id) ON DELETE CASCADE;
+
+
+--
+-- Name: campaign_characters campaign_characters_campaign_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_characters
+    ADD CONSTRAINT campaign_characters_campaign_id_fkey FOREIGN KEY (campaign_id) REFERENCES public.campaigns(id) ON DELETE CASCADE;
+
+
+--
+-- Name: campaign_characters campaign_characters_character_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_characters
+    ADD CONSTRAINT campaign_characters_character_id_fkey FOREIGN KEY (character_id) REFERENCES public.characters(id) ON DELETE CASCADE;
+
+
+--
+-- Name: campaign_members campaign_members_campaign_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_members
+    ADD CONSTRAINT campaign_members_campaign_id_fkey FOREIGN KEY (campaign_id) REFERENCES public.campaigns(id) ON DELETE CASCADE;
+
+
+--
+-- Name: campaign_members campaign_members_invited_by_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_members
+    ADD CONSTRAINT campaign_members_invited_by_fkey FOREIGN KEY (invited_by) REFERENCES public.users(id) ON DELETE CASCADE;
+
+
+--
+-- Name: campaign_members campaign_members_user_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaign_members
+    ADD CONSTRAINT campaign_members_user_id_fkey FOREIGN KEY (user_id) REFERENCES public.users(id) ON DELETE CASCADE;
+
+
+--
+-- Name: campaigns campaigns_created_by_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
+--
+
+ALTER TABLE ONLY public.campaigns
+    ADD CONSTRAINT campaigns_created_by_fkey FOREIGN KEY (created_by) REFERENCES public.users(id) ON DELETE CASCADE;
+
+
 --
 -- Name: char_abilities char_abilities_character_id_fkey; Type: FK CONSTRAINT; Schema: public; Owner: -
 --
@@ -1163,7 +1383,7 @@ ALTER TABLE ONLY public.items
 -- PostgreSQL database dump complete
 --
 
-\unrestrict Dg0ksc8IIsh0chvkrHOQy7LtnwsmjF3WyModqIXmKLfbi99THWiNyWMb9U47Fk5
+\unrestrict EIvSglJHygsNcIKc7gr1LRqCWzak1b2BYTPO17s7oUnsrweJPJORd0ywNzjCr4G
 
 
 --
@@ -1206,4 +1426,9 @@ INSERT INTO public.schema_migrations (version) VALUES
     ('20251111221748'),
     ('20251112060352'),
     ('20251112060400'),
-    ('20251112060500');
+    ('20251112060500'),
+    ('20251122030300'),
+    ('20251125200357'),
+    ('20251126134731'),
+    ('20251205001836'),
+    ('20251209195618');
diff --git a/migrations/20251122030300_create_campaigns.sql b/migrations/20251122030300_create_campaigns.sql
new file mode 100644
index 0000000..7c75306
--- /dev/null
+++ b/migrations/20251122030300_create_campaigns.sql
@@ -0,0 +1,80 @@
+-- migrate:up
+
+-- Campaigns table
+CREATE TABLE campaigns (
+  id VARCHAR(26) PRIMARY KEY,
+  name TEXT NOT NULL,
+  description TEXT,
+  created_by VARCHAR(26) NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP
+);
+
+CREATE INDEX idx_campaigns_created_by ON campaigns(created_by);
+
+CREATE TRIGGER campaigns_updated_at
+    BEFORE UPDATE ON campaigns
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+-- Campaign members (DMs, players, viewers)
+CREATE TABLE campaign_members (
+  id VARCHAR(26) PRIMARY KEY,
+  campaign_id VARCHAR(26) NOT NULL REFERENCES campaigns(id) ON DELETE CASCADE,
+  user_id VARCHAR(26) NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  role TEXT NOT NULL CHECK (role IN ('dm', 'player', 'viewer')),
+  invited_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  invited_by VARCHAR(26) NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  accepted_at TIMESTAMPTZ,
+  declined_at TIMESTAMPTZ,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT campaign_members_unique UNIQUE(campaign_id, user_id),
+  CONSTRAINT campaign_members_not_both_accepted_and_declined CHECK (NOT (accepted_at IS NOT NULL AND declined_at IS NOT NULL))
+);
+
+CREATE INDEX idx_campaign_members_campaign_id ON campaign_members(campaign_id);
+CREATE INDEX idx_campaign_members_user_id ON campaign_members(user_id);
+
+CREATE TRIGGER campaign_members_updated_at
+    BEFORE UPDATE ON campaign_members
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+-- Campaign characters (characters added to campaigns)
+CREATE TABLE campaign_characters (
+  id VARCHAR(26) PRIMARY KEY,
+  campaign_id VARCHAR(26) NOT NULL REFERENCES campaigns(id) ON DELETE CASCADE,
+  character_id VARCHAR(26) NOT NULL REFERENCES characters(id) ON DELETE CASCADE,
+  revealed_at TIMESTAMPTZ,
+  added_by VARCHAR(26) NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  added_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMPTZ NOT NULL DEFAULT CURRENT_TIMESTAMP,
+  CONSTRAINT campaign_characters_unique UNIQUE(campaign_id, character_id)
+);
+
+CREATE INDEX idx_campaign_characters_campaign_id ON campaign_characters(campaign_id);
+CREATE INDEX idx_campaign_characters_character_id ON campaign_characters(character_id);
+
+CREATE TRIGGER campaign_characters_updated_at
+    BEFORE UPDATE ON campaign_characters
+    FOR EACH ROW
+    EXECUTE FUNCTION update_updated_at_column();
+
+-- migrate:down
+
+DROP TRIGGER IF EXISTS campaign_characters_updated_at ON campaign_characters;
+DROP INDEX IF EXISTS idx_campaign_characters_character_id;
+DROP INDEX IF EXISTS idx_campaign_characters_campaign_id;
+DROP TABLE IF EXISTS campaign_characters;
+
+DROP TRIGGER IF EXISTS campaign_members_updated_at ON campaign_members;
+DROP INDEX IF EXISTS idx_campaign_members_user_id;
+DROP INDEX IF EXISTS idx_campaign_members_campaign_id;
+DROP TABLE IF EXISTS campaign_members;
+
+DROP TRIGGER IF EXISTS campaigns_updated_at ON campaigns;
+DROP INDEX IF EXISTS idx_campaigns_created_by;
+DROP TABLE IF EXISTS campaigns;
+
diff --git a/migrations/20251125200357_add_archived_at_to_campaigns.sql b/migrations/20251125200357_add_archived_at_to_campaigns.sql
new file mode 100644
index 0000000..b275707
--- /dev/null
+++ b/migrations/20251125200357_add_archived_at_to_campaigns.sql
@@ -0,0 +1,8 @@
+-- migrate:up
+-- Add archived_at column for soft-delete archiving of campaigns
+ALTER TABLE campaigns ADD COLUMN archived_at TIMESTAMPTZ DEFAULT NULL;
+CREATE INDEX idx_campaigns_created_by_archived_at ON campaigns(created_by, archived_at);
+
+-- migrate:down
+DROP INDEX IF EXISTS idx_campaigns_created_by_archived_at;
+ALTER TABLE campaigns DROP COLUMN archived_at;
diff --git a/migrations/20251126134731_add_invite_token_to_members.sql b/migrations/20251126134731_add_invite_token_to_members.sql
new file mode 100644
index 0000000..cc7fdc7
--- /dev/null
+++ b/migrations/20251126134731_add_invite_token_to_members.sql
@@ -0,0 +1,7 @@
+-- migrate:up
+ALTER TABLE campaign_members ADD COLUMN invite_token VARCHAR(26);
+CREATE INDEX idx_campaign_members_invite_token ON campaign_members(invite_token);
+
+-- migrate:down
+DROP INDEX IF EXISTS idx_campaign_members_invite_token;
+ALTER TABLE campaign_members DROP COLUMN invite_token;
diff --git a/migrations/20251205001836_add_deleted_at_to_campaign_members.sql b/migrations/20251205001836_add_deleted_at_to_campaign_members.sql
new file mode 100644
index 0000000..3526e63
--- /dev/null
+++ b/migrations/20251205001836_add_deleted_at_to_campaign_members.sql
@@ -0,0 +1,5 @@
+-- migrate:up
+ALTER TABLE campaign_members ADD COLUMN deleted_at timestamp;
+
+-- migrate:down
+ALTER TABLE campaign_members DROP COLUMN deleted_at;
diff --git a/migrations/20251209195618_add_name_to_users.sql b/migrations/20251209195618_add_name_to_users.sql
new file mode 100644
index 0000000..828f5c6
--- /dev/null
+++ b/migrations/20251209195618_add_name_to_users.sql
@@ -0,0 +1,6 @@
+-- migrate:up
+ALTER TABLE users ADD COLUMN name TEXT;
+
+-- migrate:down
+ALTER TABLE users DROP COLUMN name;
+
diff --git a/src/app.ts b/src/app.ts
index d7af1ae..f1e563c 100644
--- a/src/app.ts
+++ b/src/app.ts
@@ -7,10 +7,12 @@ import { applyMiddleware } from "./middleware"
 import { requireAuth } from "./middleware/auth"
 import { cachingServeStatic } from "./middleware/cachingServeStatic"
 import { authRoutes } from "./routes/auth"
+import { campaignsRoutes } from "./routes/campaigns"
 import { characterRoutes } from "./routes/character"
 import { chatRoutes } from "./routes/chat"
 import { healthRoutes } from "./routes/health"
 import { indexRoutes } from "./routes/index"
+import { profileRoutes } from "./routes/profile"
 import { spellsRoutes } from "./routes/spells"
 import { uploadsRoutes } from "./routes/uploads"
 
@@ -49,7 +51,8 @@ export function createApp(db?: SQL) {
       const user = c.get("user")
       const currentPage = c.req.path
       const flash = c.get("flash")
-      return Layout({ ...props, user, currentPage, flash })
+      const notifications = c.get("notifications")
+      return Layout({ ...props, user, currentPage, flash, notifications })
     })
   )
 
@@ -69,7 +72,9 @@ export function createApp(db?: SQL) {
   const protectedRoutes = new Hono()
   protectedRoutes.use("*", requireAuth)
   protectedRoutes.route("/", characterRoutes)
+  protectedRoutes.route("/", campaignsRoutes)
   protectedRoutes.route("/", chatRoutes)
+  protectedRoutes.route("/", profileRoutes)
   protectedRoutes.route("/", uploadsRoutes)
 
   app.route("/", protectedRoutes)
diff --git a/src/components/AbilitiesEditForm.tsx b/src/components/AbilitiesEditForm.tsx
index 86201f1..eb633ca 100644
--- a/src/components/AbilitiesEditForm.tsx
+++ b/src/components/AbilitiesEditForm.tsx
@@ -1,7 +1,7 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { Abilities, type AbilityType } from "@src/lib/dnd"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
 import clsx from "clsx"
-import { ModalContent } from "./ui/ModalContent"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
 
 export interface AbilitiesEditFormProps {
diff --git a/src/components/AddCharacterToCampaign.tsx b/src/components/AddCharacterToCampaign.tsx
new file mode 100644
index 0000000..71048e9
--- /dev/null
+++ b/src/components/AddCharacterToCampaign.tsx
@@ -0,0 +1,84 @@
+import { CampaignCharacterCard } from "@src/components/ui/CampaignCharacterCard"
+import { ModalBody, ModalContent, ModalFooter } from "@src/components/ui/DetailModal"
+import type { ListCharacter } from "@src/services/listCharacters"
+
+export interface AddCharacterToCampaignProps {
+  campaignId: string
+  characters: ListCharacter[]
+  errors?: Record<string, string>
+  mode?: "character" | "npc"
+}
+
+export const AddCharacterToCampaign = ({
+  campaignId,
+  characters,
+  errors,
+  mode = "character",
+}: AddCharacterToCampaignProps) => {
+  const isNpcMode = mode === "npc"
+  const title = isNpcMode ? "Add NPC" : "Add Character"
+  const buttonText = isNpcMode ? "Add as NPC" : "Add to Campaign"
+  const emptyStateTitle = isNpcMode ? "No Characters Available" : "No Characters Available"
+  const emptyStateMessage = isNpcMode
+    ? "Create a character first, then come back here to add them as an NPC."
+    : "Create a character first, then come back here to add them to the campaign."
+  const selectionPrompt = isNpcMode
+    ? "Select a character to add as an NPC:"
+    : "Select a character to add to this campaign:"
+
+  if (characters.length === 0) {
+    return (
+      <ModalContent title={title}>
+        <ModalBody>
+          <div class="text-center py-4">
+            <i class="bi bi-person-plus text-muted fs-1 mb-3 d-block" />
+            <h5>{emptyStateTitle}</h5>
+            <p class="text-muted">{emptyStateMessage}</p>
+            <a href="/characters" class="btn btn-primary">
+              <i class="bi bi-arrow-right" /> Go to Characters
+            </a>
+          </div>
+        </ModalBody>
+      </ModalContent>
+    )
+  }
+
+  return (
+    <ModalContent title={title}>
+      <ModalBody>
+        {errors?.general && <div class="alert alert-danger mb-3">{errors.general}</div>}
+        <p class="text-muted mb-3">{selectionPrompt}</p>
+        <div class="row row-cols-1 row-cols-sm-2 g-3">
+          {characters.map((char) => (
+            <div class="col" key={char.id}>
+              <CampaignCharacterCard
+                character={{
+                  id: char.id,
+                  name: char.name,
+                  avatars: char.avatars,
+                  level: char.totalLevel,
+                  className: char.classes[0]?.class || "Unknown",
+                }}
+              >
+                <button
+                  type="button"
+                  class="btn btn-sm btn-primary"
+                  hx-post={`/campaigns/${campaignId}/characters/${char.id}`}
+                  hx-target="#detailModalContent"
+                  hx-swap="innerHTML"
+                >
+                  {buttonText}
+                </button>
+              </CampaignCharacterCard>
+            </div>
+          ))}
+        </div>
+      </ModalBody>
+      <ModalFooter>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Cancel
+        </button>
+      </ModalFooter>
+    </ModalContent>
+  )
+}
diff --git a/src/components/AvatarCropper.tsx b/src/components/AvatarCropper.tsx
index 2c8bef9..f5e3c6d 100644
--- a/src/components/AvatarCropper.tsx
+++ b/src/components/AvatarCropper.tsx
@@ -1,5 +1,5 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
-import { ModalContent } from "./ui/ModalContent"
 
 export interface AvatarCropperProps {
   character: ComputedCharacter
@@ -78,7 +78,7 @@ export const AvatarCropper = ({ character, avatarIndex }: AvatarCropperProps) =>
           type="button"
           class="btn btn-secondary"
           hx-get={`/characters/${character.id}/avatars`}
-          hx-target="#editModalContent"
+          hx-target="#detailModalContent"
           hx-swap="innerHTML"
         >
           <i class="bi bi-grid-3x3"></i> Back to Gallery
@@ -88,7 +88,7 @@ export const AvatarCropper = ({ character, avatarIndex }: AvatarCropperProps) =>
           class="btn btn-primary"
           hx-post={action}
           hx-include="#cropForm"
-          hx-target="#editModalContent"
+          hx-target="#detailModalContent"
           hx-swap="innerHTML"
         >
           Save Crop
diff --git a/src/components/AvatarDisplay.tsx b/src/components/AvatarDisplay.tsx
index 320852e..16e374f 100644
--- a/src/components/AvatarDisplay.tsx
+++ b/src/components/AvatarDisplay.tsx
@@ -111,10 +111,10 @@ export const AvatarDisplay = ({
         class="avatar-button position-relative ratio ratio-1x1 rounded overflow-hidden border-0 p-0"
         tabindex={0}
         hx-get={`/characters/${character.id}/avatars`}
-        hx-target="#editModalContent"
+        hx-target="#detailModalContent"
         hx-swap="innerHTML"
         data-bs-toggle="modal"
-        data-bs-target="#editModal"
+        data-bs-target="#detailModal"
         style={cropStyle.containerStyle}
       >
         <img
@@ -132,14 +132,29 @@ export const AvatarDisplay = ({
   }
 
   // Clickable-lightbox mode: Opens lightbox at specific index
+  // Only clickable if there's an actual avatar (not placeholder)
   if (mode === "clickable-lightbox") {
+    if (!avatar) {
+      // No avatar - render as display-only (not clickable)
+      return (
+        <div
+          class="ratio ratio-1x1 position-relative overflow-hidden"
+          style={cropStyle.containerStyle}
+        >
+          <img src={imgUrl} alt={imgAlt} class={className} style={cropStyle.imageStyle} />
+        </div>
+      )
+    }
+
     return (
       <button
         type="button"
         class="btn p-0 border-0 w-100"
         hx-get={`/characters/${character.id}/avatars/lightbox?index=${avatarIndex ?? 0}`}
-        hx-target="#editModalContent"
+        hx-target="#detailModalContent"
         hx-swap="innerHTML"
+        data-bs-toggle="modal"
+        data-bs-target="#detailModal"
       >
         <div
           class="ratio ratio-1x1 position-relative overflow-hidden"
diff --git a/src/components/AvatarGallery.tsx b/src/components/AvatarGallery.tsx
index 83a8274..252c2f7 100644
--- a/src/components/AvatarGallery.tsx
+++ b/src/components/AvatarGallery.tsx
@@ -1,6 +1,6 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
 import { AvatarDisplay } from "./AvatarDisplay"
-import { ModalContent } from "./ui/ModalContent"
 
 export interface AvatarGalleryProps {
   character: ComputedCharacter
@@ -44,7 +44,7 @@ export const AvatarGallery = ({ character }: AvatarGalleryProps) => {
                           type="button"
                           class="btn btn-sm btn-outline-primary"
                           hx-post={`/characters/${character.id}/avatars/${avatar.id}/set-primary`}
-                          hx-target="#editModalContent"
+                          hx-target="#detailModalContent"
                           hx-swap="innerHTML"
                         >
                           <i class="bi bi-star"></i> Primary
@@ -56,7 +56,7 @@ export const AvatarGallery = ({ character }: AvatarGalleryProps) => {
                         type="button"
                         class="btn btn-sm btn-outline-secondary"
                         hx-get={`/characters/${character.id}/avatars/${index}/crop-editor`}
-                        hx-target="#editModalContent"
+                        hx-target="#detailModalContent"
                         hx-swap="innerHTML"
                       >
                         <i class="bi bi-crop"></i> Crop
@@ -87,7 +87,7 @@ export const AvatarGallery = ({ character }: AvatarGalleryProps) => {
           type="button"
           class="btn btn-primary"
           hx-get={`/characters/${character.id}/edit/avatar`}
-          hx-target="#editModalContent"
+          hx-target="#detailModalContent"
           hx-swap="innerHTML"
         >
           <i class="bi bi-upload"></i> Upload New Avatar
diff --git a/src/components/AvatarLightbox.tsx b/src/components/AvatarLightbox.tsx
index 679e8a9..55e8172 100644
--- a/src/components/AvatarLightbox.tsx
+++ b/src/components/AvatarLightbox.tsx
@@ -1,12 +1,17 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
-import { ModalContent } from "./ui/ModalContent"
 
 export interface AvatarLightboxProps {
   character: ComputedCharacter
   currentIndex: number
+  isReadOnly?: boolean
 }
 
-export const AvatarLightbox = ({ character, currentIndex }: AvatarLightboxProps) => {
+export const AvatarLightbox = ({
+  character,
+  currentIndex,
+  isReadOnly = false,
+}: AvatarLightboxProps) => {
   const totalAvatars = character.avatars.length
   const prevIndex = currentIndex > 0 ? currentIndex - 1 : totalAvatars - 1
   const nextIndex = currentIndex < totalAvatars - 1 ? currentIndex + 1 : 0
@@ -45,7 +50,7 @@ export const AvatarLightbox = ({ character, currentIndex }: AvatarLightboxProps)
               class="btn btn-lg btn-dark position-absolute top-50 start-0 translate-middle-y ms-2"
               style="opacity: 0.7; z-index: 10;"
               hx-get={`/characters/${character.id}/avatars/lightbox?index=${prevIndex}`}
-              hx-target="#editModalContent"
+              hx-target="#detailModalContent"
               hx-swap="innerHTML"
             >
               <i class="bi bi-chevron-left"></i>
@@ -56,7 +61,7 @@ export const AvatarLightbox = ({ character, currentIndex }: AvatarLightboxProps)
               class="btn btn-lg btn-dark position-absolute top-50 end-0 translate-middle-y me-2"
               style="opacity: 0.7; z-index: 10;"
               hx-get={`/characters/${character.id}/avatars/lightbox?index=${nextIndex}`}
-              hx-target="#editModalContent"
+              hx-target="#detailModalContent"
               hx-swap="innerHTML"
             >
               <i class="bi bi-chevron-right"></i>
@@ -66,15 +71,17 @@ export const AvatarLightbox = ({ character, currentIndex }: AvatarLightboxProps)
       </div>
 
       <div class="modal-footer">
-        <button
-          type="button"
-          class="btn btn-secondary"
-          hx-get={`/characters/${character.id}/avatars`}
-          hx-target="#editModalContent"
-          hx-swap="innerHTML"
-        >
-          <i class="bi bi-grid-3x3"></i> Back to Gallery
-        </button>
+        {!isReadOnly && (
+          <button
+            type="button"
+            class="btn btn-secondary"
+            hx-get={`/characters/${character.id}/avatars`}
+            hx-target="#detailModalContent"
+            hx-swap="innerHTML"
+          >
+            <i class="bi bi-grid-3x3"></i> Back to Gallery
+          </button>
+        )}
         <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
           Close
         </button>
diff --git a/src/components/Campaign.tsx b/src/components/Campaign.tsx
new file mode 100644
index 0000000..c9428d8
--- /dev/null
+++ b/src/components/Campaign.tsx
@@ -0,0 +1,666 @@
+import { CampaignCharacterCard } from "@src/components/ui/CampaignCharacterCard"
+import { CampaignMemberCard } from "@src/components/ui/CampaignMemberCard"
+import { DetailModal } from "@src/components/ui/DetailModal"
+import type { ComputedCampaign, ComputedCampaignCharacter } from "@src/services/campaigns/compute"
+
+export interface CampaignProps {
+  campaign: ComputedCampaign
+}
+
+interface CharacterCardProps {
+  character: ComputedCampaignCharacter
+  campaignId: string
+  memberId?: string // Member ID for change-role button (not available for NPCs)
+  canReveal: boolean
+  canRemove: boolean
+  canChangeRole: boolean // DM viewing another user's character
+  isDM: boolean
+  isCurrentUser: boolean
+}
+
+const CharacterCard = ({
+  character,
+  campaignId,
+  memberId,
+  canReveal,
+  canRemove,
+  canChangeRole,
+  isDM,
+  isCurrentUser,
+}: CharacterCardProps) => {
+  const addedByDisplay = character.added_by_name || character.added_by_email
+  const subtitle = character.isNPC ? `Added by: ${addedByDisplay}` : `Played by: ${addedByDisplay}`
+
+  // Show "Hidden" badge for hidden NPCs (only visible to DMs)
+  const badge =
+    isDM && character.isNPC && !character.revealed_at
+      ? { text: "Hidden", variant: "secondary" as const }
+      : undefined
+
+  return (
+    <CampaignCharacterCard
+      character={{
+        id: character.character_id,
+        name: character.name,
+        avatars: character.avatars,
+        level: character.level,
+        className: character.class_name,
+      }}
+      subtitle={subtitle}
+      badge={badge}
+      isCurrentUser={isCurrentUser}
+    >
+      {/* NPC reveal/hide buttons */}
+      {canReveal && character.isNPC && character.revealed_at && (
+        <button
+          type="button"
+          class="btn btn-sm btn-outline-secondary"
+          hx-post={`/campaigns/${campaignId}/characters/${character.character_id}/hide`}
+          hx-confirm={`Hide ${character.name} from players?`}
+        >
+          <i class="bi bi-eye-slash" /> Hide
+        </button>
+      )}
+      {canReveal && character.isNPC && !character.revealed_at && (
+        <button
+          type="button"
+          class="btn btn-sm btn-outline-primary"
+          hx-post={`/campaigns/${campaignId}/characters/${character.character_id}/reveal`}
+          hx-confirm={`Reveal ${character.name} to players?`}
+        >
+          <i class="bi bi-eye" /> Reveal
+        </button>
+      )}
+
+      {/* View button for owner or DM */}
+      {(isCurrentUser || isDM) && (
+        <a href={`/characters/${character.character_id}`} class="btn btn-sm btn-outline-primary">
+          View
+        </a>
+      )}
+
+      {/* Add another character button for owner (non-NPC only) */}
+      {isCurrentUser && !character.isNPC && (
+        <button
+          type="button"
+          class="btn btn-sm btn-outline-secondary"
+          data-bs-toggle="modal"
+          data-bs-target="#detailModal"
+          hx-get={`/campaigns/${campaignId}/add-character`}
+          hx-target="#detailModalContent"
+          hx-swap="innerHTML"
+        >
+          <i class="bi bi-plus-circle" /> Add Another
+        </button>
+      )}
+
+      {/* Change role button for DM viewing another user's character */}
+      {canChangeRole && memberId && (
+        <button
+          type="button"
+          class="btn btn-sm btn-outline-secondary"
+          data-bs-toggle="modal"
+          data-bs-target="#detailModal"
+          hx-get={`/campaigns/${campaignId}/members/${memberId}/change-role`}
+          hx-target="#detailModalContent"
+          hx-swap="innerHTML"
+        >
+          <i class="bi bi-arrow-repeat" /> Change Role
+        </button>
+      )}
+
+      {/* Remove button */}
+      {canRemove && (
+        <button
+          type="button"
+          class="btn btn-sm btn-outline-danger"
+          hx-delete={`/campaigns/${campaignId}/characters/${character.character_id}`}
+          hx-confirm={`Remove ${character.name} from this campaign?`}
+        >
+          Remove
+        </button>
+      )}
+    </CampaignCharacterCard>
+  )
+}
+
+export const Campaign = ({ campaign }: CampaignProps) => {
+  const isDM = campaign.userRole === "dm"
+
+  // Filter members by role, excluding DMs (they have their own section) and viewers
+  // Also exclude declined members for non-DMs
+  const allPartyMembers = campaign.members.filter((m) => m.role !== "viewer" && m.role !== "dm")
+  const partyMembers = allPartyMembers
+    .filter((m) => isDM || !m.declined_at) // Only DMs see declined members
+    .sort((a, b) => {
+      // Sort declined members to the end
+      if (a.declined_at && !b.declined_at) return 1
+      if (!a.declined_at && b.declined_at) return -1
+      return 0
+    })
+  // Filter DMs - show pending/declined only to DMs
+  const allDMs = campaign.members.filter((m) => m.role === "dm")
+  const dmMembers = allDMs
+    .filter((m) => isDM || m.accepted_at)
+    .sort((a, b) => {
+      // Sort: accepted first, then pending, then declined
+      if (a.accepted_at && !b.accepted_at) return -1
+      if (!a.accepted_at && b.accepted_at) return 1
+      if (a.declined_at && !b.declined_at) return 1
+      if (!a.declined_at && b.declined_at) return -1
+      return 0
+    })
+
+  // Filter Viewers - show pending/declined only to DMs
+  const allViewers = campaign.members.filter((m) => m.role === "viewer")
+  const viewerMembers = allViewers
+    .filter((m) => isDM || m.accepted_at)
+    .sort((a, b) => {
+      // Sort: accepted first, then pending, then declined
+      if (a.accepted_at && !b.accepted_at) return -1
+      if (!a.accepted_at && b.accepted_at) return 1
+      if (a.declined_at && !b.declined_at) return 1
+      if (!a.declined_at && b.declined_at) return -1
+      return 0
+    })
+
+  // Filter NPCs (characters added by DMs)
+  const allNPCs = campaign.characters.filter((c) => c.isNPC)
+  const visibleNPCs = allNPCs.filter((npc) => isDM || npc.revealed_at !== null)
+
+  return (
+    <>
+      <div class="container-fluid container-md mt-3">
+        {/* Campaign Header */}
+        <div class="row mb-4">
+          <div class="col-12">
+            <div class="d-flex align-items-center gap-3">
+              <div style="width: 80px;">
+                <div class="ratio ratio-1x1">
+                  <img
+                    src="/static/placeholder-party.png"
+                    alt={campaign.name}
+                    class="rounded"
+                    style="object-fit: cover;"
+                  />
+                </div>
+              </div>
+              <div>
+                <h1 class="mb-0">{campaign.name}</h1>
+                {campaign.description && <p class="text-muted mb-0 mt-1">{campaign.description}</p>}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Section 1: Characters & Members (Party) */}
+        <div class="row mb-4">
+          <div class="col-12">
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <h3>Characters & Members</h3>
+              {campaign.canInviteMembers && (
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm"
+                  data-bs-toggle="modal"
+                  data-bs-target="#detailModal"
+                  hx-get={`/campaigns/${campaign.id}/invite`}
+                  hx-target="#detailModalContent"
+                  hx-swap="innerHTML"
+                >
+                  <i class="bi bi-person-plus"></i> Invite Member
+                </button>
+              )}
+            </div>
+
+            {partyMembers.length === 0 ? (
+              <div class="text-center text-muted py-4">
+                <p>No members yet.</p>
+              </div>
+            ) : (
+              <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
+                {partyMembers.map((member) => {
+                  // Find character for this member
+                  const memberChar = campaign.characters.find(
+                    (c) => c.user_id === member.user_id && !c.isNPC
+                  )
+
+                  if (memberChar) {
+                    // Has character - render character-first
+                    const isOwner = memberChar.user_id === campaign.currentUserId
+                    return (
+                      <div class="col" key={member.user_id}>
+                        <CharacterCard
+                          character={memberChar}
+                          campaignId={campaign.id}
+                          memberId={member.id}
+                          canReveal={campaign.canRevealCharacters}
+                          canRemove={isOwner || isDM}
+                          canChangeRole={isDM && !isOwner}
+                          isDM={isDM}
+                          isCurrentUser={isOwner}
+                        />
+                      </div>
+                    )
+                  }
+                  const isCurrentUser = member.user_id === campaign.currentUserId
+
+                  if (member.accepted_at) {
+                    // Accepted but no character - current user needs to add one
+                    return (
+                      <div class="col" key={member.user_id}>
+                        <CampaignMemberCard
+                          title={member.name || member.email}
+                          badge={
+                            isCurrentUser
+                              ? { text: "Add Character", variant: "warning", darkText: true }
+                              : { text: "No Character", variant: "secondary" }
+                          }
+                          isCurrentUser={isCurrentUser}
+                          needsAction={isCurrentUser}
+                        >
+                          {isCurrentUser && (
+                            <>
+                              <button
+                                type="button"
+                                class="btn btn-sm btn-primary"
+                                data-bs-toggle="modal"
+                                data-bs-target="#detailModal"
+                                hx-get={`/campaigns/${campaign.id}/add-character`}
+                                hx-target="#detailModalContent"
+                                hx-swap="innerHTML"
+                              >
+                                <i class="bi bi-plus-circle" /> Add Character
+                              </button>
+                              <button
+                                type="button"
+                                class="btn btn-outline-danger btn-sm"
+                                hx-post={`/campaigns/${campaign.id}/leave`}
+                                hx-confirm="Are you sure you want to leave this campaign?"
+                                data-testid="leave-campaign"
+                              >
+                                <i class="bi bi-box-arrow-right" /> Leave
+                              </button>
+                            </>
+                          )}
+                          {isDM && !isCurrentUser && (
+                            <>
+                              <button
+                                type="button"
+                                class="btn btn-sm btn-outline-secondary"
+                                data-bs-toggle="modal"
+                                data-bs-target="#detailModal"
+                                hx-get={`/campaigns/${campaign.id}/members/${member.id}/change-role`}
+                                hx-target="#detailModalContent"
+                                hx-swap="innerHTML"
+                              >
+                                <i class="bi bi-arrow-repeat" /> Change Role
+                              </button>
+                              <button
+                                type="button"
+                                class="btn btn-outline-danger btn-sm"
+                                hx-delete={`/campaigns/${campaign.id}/members/${member.id}`}
+                                hx-confirm={`Are you sure you want to remove ${member.email} from the campaign?`}
+                                data-testid={`delete-member-${member.id}`}
+                              >
+                                <i class="bi bi-trash" /> Remove
+                              </button>
+                            </>
+                          )}
+                        </CampaignMemberCard>
+                      </div>
+                    )
+                  }
+                  if (member.declined_at) {
+                    // Declined invite (only visible to DMs)
+                    return (
+                      <div class="col" key={member.user_id}>
+                        <CampaignMemberCard
+                          title={member.name || member.email}
+                          badge={{ text: "Declined", variant: "danger" }}
+                        >
+                          {isDM && (
+                            <button
+                              type="button"
+                              class="btn btn-outline-danger btn-sm"
+                              hx-delete={`/campaigns/${campaign.id}/members/${member.id}`}
+                              hx-confirm={`Are you sure you want to delete the declined invitation for ${member.email}?`}
+                              data-testid={`delete-invite-${member.id}`}
+                            >
+                              <i class="bi bi-trash" /> Delete
+                            </button>
+                          )}
+                        </CampaignMemberCard>
+                      </div>
+                    )
+                  }
+                  // Pending invite
+                  return (
+                    <div class="col" key={member.user_id}>
+                      <CampaignMemberCard
+                        title={member.name || member.email}
+                        badge={{ text: "Pending Invite", variant: "warning", darkText: true }}
+                      >
+                        {isDM && (
+                          <button
+                            type="button"
+                            class="btn btn-outline-danger btn-sm"
+                            hx-delete={`/campaigns/${campaign.id}/members/${member.id}`}
+                            hx-confirm={`Are you sure you want to delete the invitation for ${member.email}?`}
+                            data-testid={`delete-invite-${member.id}`}
+                          >
+                            <i class="bi bi-trash" /> Delete Invite
+                          </button>
+                        )}
+                      </CampaignMemberCard>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Section 2: NPCs - only show to players if there are visible NPCs */}
+        {(isDM || visibleNPCs.length > 0) && (
+          <div class="row mb-4">
+            <div class="col-12">
+              <div class="d-flex justify-content-between align-items-center mb-3">
+                <h3>NPCs</h3>
+                {isDM && (
+                  <button
+                    type="button"
+                    class="btn btn-primary btn-sm"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                    hx-get={`/campaigns/${campaign.id}/add-character`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                  >
+                    <i class="bi bi-plus-circle"></i> Add NPC
+                  </button>
+                )}
+              </div>
+
+              {visibleNPCs.length === 0 ? (
+                <div class="text-center text-muted py-4">
+                  <p>No NPCs {isDM ? "added" : "revealed"} yet.</p>
+                </div>
+              ) : (
+                <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
+                  {visibleNPCs.map((npc) => {
+                    const isOwner = npc.added_by === campaign.currentUserId
+                    return (
+                      <div class="col" key={npc.id}>
+                        <CharacterCard
+                          character={npc}
+                          campaignId={campaign.id}
+                          canReveal={campaign.canRevealCharacters}
+                          canRemove={isOwner || isDM}
+                          canChangeRole={false}
+                          isDM={isDM}
+                          isCurrentUser={isOwner}
+                        />
+                      </div>
+                    )
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Section 3: DMs */}
+        <div class="row mb-4">
+          <div class="col-12">
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <h3>Dungeon Masters</h3>
+              <div class="d-flex gap-2">
+                {campaign.canChangeDMRole && (
+                  <button
+                    type="button"
+                    class="btn btn-outline-secondary btn-sm"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                    hx-get={`/campaigns/${campaign.id}/change-role`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                  >
+                    <i class="bi bi-arrow-down-circle"></i> Change My Role
+                  </button>
+                )}
+                {isDM && (
+                  <button
+                    type="button"
+                    class="btn btn-primary btn-sm"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                    hx-get={`/campaigns/${campaign.id}/invite?role=dm`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                  >
+                    <i class="bi bi-person-plus"></i> Add DM
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {dmMembers.length === 0 ? (
+              <div class="text-center text-muted py-4">
+                <p>No dungeon masters yet.</p>
+              </div>
+            ) : (
+              <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
+                {dmMembers.map((dm) => {
+                  const isCurrentUser = dm.user_id === campaign.currentUserId
+
+                  if (dm.accepted_at) {
+                    // Accepted DM
+                    return (
+                      <div class="col" key={dm.user_id}>
+                        <CampaignMemberCard
+                          title={dm.email}
+                          badge={{ text: "DM", variant: "primary" }}
+                          isCurrentUser={isCurrentUser}
+                        >
+                          {isCurrentUser && (
+                            <button
+                              type="button"
+                              class="btn btn-outline-danger btn-sm"
+                              hx-post={`/campaigns/${campaign.id}/leave`}
+                              hx-confirm="Are you sure you want to leave this campaign?"
+                              data-testid="leave-campaign"
+                            >
+                              <i class="bi bi-box-arrow-right" /> Leave
+                            </button>
+                          )}
+                        </CampaignMemberCard>
+                      </div>
+                    )
+                  }
+                  if (dm.declined_at) {
+                    // Declined DM invite
+                    return (
+                      <div class="col" key={dm.user_id}>
+                        <CampaignMemberCard
+                          title={dm.email}
+                          badge={{ text: "Declined", variant: "danger" }}
+                        >
+                          {isDM && (
+                            <button
+                              type="button"
+                              class="btn btn-outline-danger btn-sm"
+                              hx-delete={`/campaigns/${campaign.id}/members/${dm.id}`}
+                              hx-confirm={`Are you sure you want to delete the declined DM invitation for ${dm.email}?`}
+                              data-testid={`delete-dm-invite-${dm.id}`}
+                            >
+                              <i class="bi bi-trash" /> Delete
+                            </button>
+                          )}
+                        </CampaignMemberCard>
+                      </div>
+                    )
+                  }
+                  // Pending DM invite
+                  return (
+                    <div class="col" key={dm.user_id}>
+                      <CampaignMemberCard
+                        title={dm.email}
+                        badge={{ text: "Pending DM Invite", variant: "warning", darkText: true }}
+                      >
+                        {isDM && (
+                          <button
+                            type="button"
+                            class="btn btn-outline-danger btn-sm"
+                            hx-delete={`/campaigns/${campaign.id}/members/${dm.id}`}
+                            hx-confirm={`Are you sure you want to delete the DM invitation for ${dm.email}?`}
+                            data-testid={`delete-dm-invite-${dm.id}`}
+                          >
+                            <i class="bi bi-trash" /> Delete Invite
+                          </button>
+                        )}
+                      </CampaignMemberCard>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Section 4: Viewers */}
+        <div class="row mb-4">
+          <div class="col-12">
+            <div class="d-flex justify-content-between align-items-center mb-3">
+              <h3>Viewers</h3>
+              {campaign.canManageViewers && (
+                <button
+                  type="button"
+                  class="btn btn-primary btn-sm"
+                  data-bs-toggle="modal"
+                  data-bs-target="#detailModal"
+                  hx-get={`/campaigns/${campaign.id}/invite?role=viewer`}
+                  hx-target="#detailModalContent"
+                  hx-swap="innerHTML"
+                >
+                  <i class="bi bi-person-plus"></i> Add Viewer
+                </button>
+              )}
+            </div>
+
+            {viewerMembers.length === 0 ? (
+              <div class="text-center text-muted py-4">
+                <p>No viewers yet.</p>
+              </div>
+            ) : (
+              <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3">
+                {viewerMembers.map((viewer) => {
+                  const isCurrentUser = viewer.user_id === campaign.currentUserId
+
+                  if (viewer.accepted_at) {
+                    // Accepted viewer
+                    return (
+                      <div class="col" key={viewer.user_id}>
+                        <CampaignMemberCard
+                          title={viewer.email}
+                          badge={{ text: "Viewer", variant: "info" }}
+                          isCurrentUser={isCurrentUser}
+                        >
+                          {isCurrentUser && (
+                            <button
+                              type="button"
+                              class="btn btn-outline-danger btn-sm"
+                              hx-post={`/campaigns/${campaign.id}/leave`}
+                              hx-confirm="Are you sure you want to leave this campaign?"
+                              data-testid="leave-campaign"
+                            >
+                              <i class="bi bi-box-arrow-right" /> Leave
+                            </button>
+                          )}
+                          {isDM && !isCurrentUser && (
+                            <>
+                              <button
+                                type="button"
+                                class="btn btn-sm btn-outline-secondary"
+                                data-bs-toggle="modal"
+                                data-bs-target="#detailModal"
+                                hx-get={`/campaigns/${campaign.id}/members/${viewer.id}/change-role`}
+                                hx-target="#detailModalContent"
+                                hx-swap="innerHTML"
+                              >
+                                <i class="bi bi-arrow-repeat" /> Change Role
+                              </button>
+                              <button
+                                type="button"
+                                class="btn btn-outline-danger btn-sm"
+                                hx-delete={`/campaigns/${campaign.id}/members/${viewer.id}`}
+                                hx-confirm={`Are you sure you want to remove ${viewer.email} from the campaign?`}
+                                data-testid={`remove-viewer-${viewer.id}`}
+                              >
+                                <i class="bi bi-trash" /> Remove
+                              </button>
+                            </>
+                          )}
+                        </CampaignMemberCard>
+                      </div>
+                    )
+                  }
+                  if (viewer.declined_at) {
+                    // Declined viewer invite
+                    return (
+                      <div class="col" key={viewer.user_id}>
+                        <CampaignMemberCard
+                          title={viewer.email}
+                          badge={{ text: "Declined", variant: "danger" }}
+                        >
+                          {isDM && (
+                            <button
+                              type="button"
+                              class="btn btn-outline-danger btn-sm"
+                              hx-delete={`/campaigns/${campaign.id}/members/${viewer.id}`}
+                              hx-confirm={`Are you sure you want to delete the declined viewer invitation for ${viewer.email}?`}
+                              data-testid={`delete-viewer-invite-${viewer.id}`}
+                            >
+                              <i class="bi bi-trash" /> Delete
+                            </button>
+                          )}
+                        </CampaignMemberCard>
+                      </div>
+                    )
+                  }
+                  // Pending viewer invite
+                  return (
+                    <div class="col" key={viewer.user_id}>
+                      <CampaignMemberCard
+                        title={viewer.email}
+                        badge={{
+                          text: "Pending Viewer Invite",
+                          variant: "warning",
+                          darkText: true,
+                        }}
+                      >
+                        {isDM && (
+                          <button
+                            type="button"
+                            class="btn btn-outline-danger btn-sm"
+                            hx-delete={`/campaigns/${campaign.id}/members/${viewer.id}`}
+                            hx-confirm={`Are you sure you want to delete the viewer invitation for ${viewer.email}?`}
+                            data-testid={`delete-viewer-invite-${viewer.id}`}
+                          >
+                            <i class="bi bi-trash" /> Delete Invite
+                          </button>
+                        )}
+                      </CampaignMemberCard>
+                    </div>
+                  )
+                })}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      <DetailModal />
+    </>
+  )
+}
diff --git a/src/components/CampaignInviteForm.tsx b/src/components/CampaignInviteForm.tsx
new file mode 100644
index 0000000..f9ef4ef
--- /dev/null
+++ b/src/components/CampaignInviteForm.tsx
@@ -0,0 +1,101 @@
+import { ModalBody, ModalContent, ModalFooter } from "@src/components/ui/DetailModal"
+import clsx from "clsx"
+
+export interface CampaignInviteFormProps {
+  campaignId: string
+  values?: Record<string, string>
+  errors?: Record<string, string>
+}
+
+export const CampaignInviteForm = ({
+  campaignId,
+  values = {},
+  errors = {},
+}: CampaignInviteFormProps) => (
+  <ModalContent title="Invite Member">
+    <form
+      hx-post={`/campaigns/${campaignId}/invite`}
+      hx-swap="innerHTML"
+      hx-target="#detailModalContent"
+    >
+      <ModalBody>
+        {/* General error */}
+        {errors.general && (
+          <div class="alert alert-danger" role="alert">
+            <i class="bi bi-exclamation-triangle"></i> {errors.general}
+          </div>
+        )}
+
+        <div class="mb-3">
+          <label for="invite-email" class="form-label">
+            Email Address
+          </label>
+          <input
+            type="email"
+            class={clsx("form-control", { "is-invalid": errors.email })}
+            id="invite-email"
+            name="email"
+            value={values.email || ""}
+            placeholder="player@example.com"
+            required
+          />
+          {errors.email && <div class="invalid-feedback d-block">{errors.email}</div>}
+          {!errors.email && (
+            <div class="form-text">An invitation email will be sent to this address.</div>
+          )}
+        </div>
+
+        {errors._canReinvite && (
+          <div class="mb-3 form-check">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="force-reinvite"
+              name="forceReinvite"
+            />
+            <label class="form-check-label" for="force-reinvite">
+              Send new invitation
+            </label>
+          </div>
+        )}
+
+        <div class="mb-3">
+          <label for="invite-role" class="form-label">
+            Role
+          </label>
+          <select
+            class={clsx("form-select", { "is-invalid": errors.role })}
+            id="invite-role"
+            name="role"
+            required
+          >
+            <option value="player" selected={values.role === "player" || !values.role}>
+              Player
+            </option>
+            <option value="dm" selected={values.role === "dm"}>
+              Dungeon Master
+            </option>
+            <option value="viewer" selected={values.role === "viewer"}>
+              Viewer
+            </option>
+          </select>
+          {errors.role && <div class="invalid-feedback d-block">{errors.role}</div>}
+          {!errors.role && (
+            <div class="form-text">
+              Players can add characters. DMs can manage the campaign. Viewers can only observe.
+            </div>
+          )}
+        </div>
+      </ModalBody>
+
+      <ModalFooter>
+        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+          Cancel
+        </button>
+        <button type="submit" class="btn btn-primary">
+          <i class="bi bi-envelope"></i> Send Invitation
+        </button>
+      </ModalFooter>
+    </form>
+  </ModalContent>
+)
diff --git a/src/components/CampaignNew.tsx b/src/components/CampaignNew.tsx
new file mode 100644
index 0000000..0ae4f54
--- /dev/null
+++ b/src/components/CampaignNew.tsx
@@ -0,0 +1,86 @@
+import clsx from "clsx"
+
+export interface CampaignNewProps {
+  values?: Record<string, string>
+  errors?: Record<string, string>
+}
+
+export const CampaignNew = ({ values = {}, errors = {} }: CampaignNewProps) => {
+  return (
+    <div class="container" id="campaign-new" style="overflow-anchor: none;">
+      <div class="row justify-content-center">
+        <div class="col-md-8">
+          <div class="card shadow-sm">
+            <div class="card-body">
+              <h1 class="card-title mb-4">Create New Campaign</h1>
+              <form
+                hx-post="/campaigns/new"
+                hx-vals='{"is_check": "true"}'
+                hx-trigger="change"
+                hx-target="#campaign-new"
+                hx-swap="morph:outerHTML focus-scroll:false"
+                hx-ext="morph"
+                class="needs-validation"
+                novalidate
+              >
+                <div class="mb-3">
+                  <label for="name" class="form-label">
+                    Campaign Name
+                  </label>
+                  <input
+                    type="text"
+                    class={clsx("form-control", { "is-invalid": errors?.name })}
+                    id="name"
+                    name="name"
+                    value={values?.name || ""}
+                    required
+                    placeholder="Enter campaign name"
+                  />
+                  {errors?.name && <div class="invalid-feedback d-block">{errors.name}</div>}
+                  <div class="form-text">Choose a memorable name for your campaign</div>
+                </div>
+
+                <div class="mb-3">
+                  <label for="description" class="form-label">
+                    Description (Optional)
+                  </label>
+                  <textarea
+                    class={clsx("form-control", { "is-invalid": errors?.description })}
+                    id="description"
+                    name="description"
+                    rows={3}
+                    placeholder="Describe your campaign"
+                    value={values?.description || ""}
+                  />
+                  {errors?.description && (
+                    <div class="invalid-feedback d-block">{errors.description}</div>
+                  )}
+                  <div class="form-text">
+                    Add a brief description of your campaign setting or story
+                  </div>
+                </div>
+
+                <div class="d-flex gap-2">
+                  <button
+                    type="submit"
+                    id="campaign-new-submit"
+                    hx-post="/campaigns/new"
+                    hx-vals='{"is_check": "false"}'
+                    hx-sync="closest form:replace"
+                    hx-ext="morph"
+                    class="btn btn-primary"
+                  >
+                    Create Campaign
+                  </button>
+                  <a href="/campaigns" class="btn btn-secondary">
+                    Cancel
+                  </a>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Campaigns.tsx b/src/components/Campaigns.tsx
new file mode 100644
index 0000000..5f82765
--- /dev/null
+++ b/src/components/Campaigns.tsx
@@ -0,0 +1,203 @@
+import type { ListCampaign } from "@src/services/campaigns/list"
+
+export interface CampaignsProps {
+  campaigns: ListCampaign[]
+  showArchived: boolean
+  archivedCount: number
+}
+
+const CampaignCard = ({ campaign }: { campaign: ListCampaign }) => {
+  const isArchived = campaign.archived_at !== null
+  const isPending = campaign.invite_status === "pending"
+  const needsCharacter = campaign.invite_status === "needs_character"
+  const needsAction = isPending || needsCharacter
+
+  // Card border style for campaigns needing action
+  const cardClass = needsAction ? "card h-100 border-warning border-2" : "card h-100"
+
+  return (
+    <div class={cardClass}>
+      {/* Campaign avatar as card header/image */}
+      {isPending ? (
+        <div class="ratio ratio-1x1">
+          <img
+            src="/static/placeholder-party.png"
+            alt={campaign.name}
+            class="card-img-top"
+            style="object-fit: cover;"
+          />
+        </div>
+      ) : (
+        <a href={`/campaigns/${campaign.id}`} class="text-decoration-none ratio ratio-1x1">
+          <img
+            src="/static/placeholder-party.png"
+            alt={campaign.name}
+            class="card-img-top"
+            style="object-fit: cover;"
+          />
+        </a>
+      )}
+
+      {/* Card Body */}
+      <div class="card-body">
+        <h5 class="card-title mb-2">
+          {isPending ? (
+            <span class="text-body">{campaign.name}</span>
+          ) : (
+            <a href={`/campaigns/${campaign.id}`} class="text-decoration-none text-body">
+              {campaign.name}
+            </a>
+          )}
+          {isArchived && <span class="badge bg-secondary ms-2">Archived</span>}
+        </h5>
+        {campaign.description && (
+          <p class="card-text text-muted mb-2">
+            <small>{campaign.description}</small>
+          </p>
+        )}
+        <p class="card-text text-muted mb-1">
+          <small>
+            <i class="bi bi-people"></i> {campaign.member_count}{" "}
+            {campaign.member_count === 1 ? "member" : "members"}
+          </small>
+        </p>
+        <p class="card-text text-muted mb-0">
+          <small>
+            <i class="bi bi-person-badge"></i> {campaign.character_count}{" "}
+            {campaign.character_count === 1 ? "character" : "characters"}
+          </small>
+        </p>
+
+        {/* Action needed badges */}
+        {isPending && (
+          <div class="mt-2">
+            <span class="badge bg-warning text-dark">
+              <i class="bi bi-envelope-exclamation"></i> Pending Invite
+            </span>
+            {campaign.invited_by_email && (
+              <p class="text-muted mb-0 mt-1">
+                <small>from {campaign.invited_by_email}</small>
+              </p>
+            )}
+          </div>
+        )}
+        {needsCharacter && (
+          <div class="mt-2">
+            <span class="badge bg-warning text-dark">
+              <i class="bi bi-person-plus"></i> Add Character
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Card Footer with Actions */}
+      <div class="card-footer bg-transparent">
+        {isPending ? (
+          <div class="d-flex gap-2">
+            <button
+              type="button"
+              class="btn btn-success btn-sm flex-grow-1"
+              hx-post={`/campaigns/${campaign.id}/accept`}
+              data-testid={`accept-${campaign.id}`}
+            >
+              <i class="bi bi-check-circle"></i> Accept
+            </button>
+            <button
+              type="button"
+              class="btn btn-outline-danger btn-sm"
+              hx-post={`/campaigns/${campaign.id}/decline`}
+              hx-confirm="Are you sure you want to decline this invitation?"
+              data-testid={`decline-${campaign.id}`}
+            >
+              <i class="bi bi-x-circle"></i>
+            </button>
+          </div>
+        ) : (
+          <div class="d-flex justify-content-between align-items-center">
+            <a href={`/campaigns/${campaign.id}`} class="btn btn-primary btn-sm">
+              <i class="bi bi-eye"></i> View
+            </a>
+            {isArchived ? (
+              <button
+                type="button"
+                class="btn btn-outline-secondary btn-sm"
+                hx-post={`/campaigns/${campaign.id}/unarchive`}
+                hx-confirm="Are you sure you want to restore this campaign?"
+                data-testid={`unarchive-${campaign.id}`}
+                title="Restore campaign"
+              >
+                <i class="bi bi-arrow-counterclockwise"></i>
+              </button>
+            ) : (
+              <button
+                type="button"
+                class="btn btn-outline-secondary btn-sm"
+                hx-post={`/campaigns/${campaign.id}/archive`}
+                hx-confirm={`Are you sure you want to archive "${campaign.name}"?`}
+                data-testid={`archive-${campaign.id}`}
+                title="Archive campaign"
+              >
+                <i class="bi bi-archive"></i>
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+const EmptyState = () => (
+  <div class="text-center py-5">
+    <p class="text-muted">You haven't created or joined any campaigns yet.</p>
+    <div class="d-flex gap-2 justify-content-center mt-3" id="empty-state-actions">
+      <a href="/campaigns/new" class="btn btn-primary" id="create-campaign-btn">
+        <i class="bi bi-plus-circle"></i> Create New Campaign
+      </a>
+    </div>
+  </div>
+)
+
+const CampaignGrid = ({ campaigns }: { campaigns: ListCampaign[] }) => (
+  <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+    {campaigns.map((campaign) => (
+      <div class="col" key={campaign.id}>
+        <CampaignCard campaign={campaign} />
+      </div>
+    ))}
+  </div>
+)
+
+export const Campaigns = ({ campaigns, showArchived, archivedCount }: CampaignsProps) => {
+  return (
+    <div class="container-fluid container-md mt-3">
+      <div class="d-flex justify-content-between align-items-center mb-3">
+        <h1>My Campaigns</h1>
+        <div class="d-flex gap-2">
+          <a href="/campaigns/new" class="btn btn-primary">
+            <i class="bi bi-plus-circle"></i> Create New
+          </a>
+        </div>
+      </div>
+
+      {archivedCount > 0 && (
+        <div class="form-check mb-3">
+          <input
+            class="form-check-input"
+            type="checkbox"
+            id="showArchivedCheckbox"
+            checked={showArchived}
+            hx-get={showArchived ? "/campaigns" : "/campaigns?show_archived=true"}
+            hx-target="body"
+            hx-push-url="true"
+          />
+          <label class="form-check-label" for="showArchivedCheckbox">
+            Show archived campaigns ({archivedCount})
+          </label>
+        </div>
+      )}
+
+      {campaigns.length === 0 ? <EmptyState /> : <CampaignGrid campaigns={campaigns} />}
+    </div>
+  )
+}
diff --git a/src/components/CastSpellForm.tsx b/src/components/CastSpellForm.tsx
index 96605c3..dbcf39a 100644
--- a/src/components/CastSpellForm.tsx
+++ b/src/components/CastSpellForm.tsx
@@ -1,7 +1,7 @@
 import { SpellDetail } from "@src/components/SpellDetail"
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { spells } from "@src/lib/dnd/spells"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
-import { ModalContent } from "./ui/ModalContent"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
 import { Select } from "./ui/Select"
 
diff --git a/src/components/ChangeRoleForm.tsx b/src/components/ChangeRoleForm.tsx
new file mode 100644
index 0000000..551f82e
--- /dev/null
+++ b/src/components/ChangeRoleForm.tsx
@@ -0,0 +1,158 @@
+import { ModalBody, ModalContent, ModalFooter } from "@src/components/ui/DetailModal"
+import type { ComputedCampaign, ComputedCampaignMember } from "@src/services/campaigns/compute"
+import clsx from "clsx"
+
+export interface ChangeRoleFormProps {
+  campaign: ComputedCampaign
+  member: ComputedCampaignMember
+  isSelfChange: boolean
+  values?: Record<string, string>
+  errors?: Record<string, string>
+}
+
+export const ChangeRoleForm = ({
+  campaign,
+  member,
+  isSelfChange,
+  values = {},
+  errors = {},
+}: ChangeRoleFormProps) => {
+  const actionUrl = isSelfChange
+    ? `/campaigns/${campaign.id}/change-role`
+    : `/campaigns/${campaign.id}/members/${member.id}/change-role`
+
+  const title = isSelfChange ? "Change My Role" : `Change Role: ${member.email}`
+
+  const currentRole = member.role
+  const selectedRole = values.newRole || ""
+
+  // Determine which role options are available (exclude current role)
+  const canBecomeDM = currentRole !== "dm"
+  const canBecomePlayer = currentRole !== "player"
+  const canBecomeViewer = currentRole !== "viewer"
+
+  // Count accepted DMs and characters for this member
+  const dmCount = campaign.members.filter((m) => m.role === "dm" && m.accepted_at).length
+  const characterCount = campaign.characters.filter((c) => c.added_by === member.user_id).length
+
+  // Check for blocking conditions
+  const isSoleDM = currentRole === "dm" && dmCount <= 1
+  const hasCharacters = characterCount > 0
+
+  // Viewer is blocked if user has characters (as player or DM)
+  const viewerBlocked = hasCharacters
+
+  return (
+    <ModalContent title={title}>
+      <form hx-post={actionUrl} hx-swap="innerHTML" hx-target="#detailModalContent">
+        <ModalBody>
+          {/* General error */}
+          {errors._form && (
+            <div class="alert alert-danger" role="alert">
+              <i class="bi bi-exclamation-triangle"></i> {errors._form}
+            </div>
+          )}
+
+          <div class="mb-3">
+            <span class="form-label d-block">Current Role</span>
+            <span
+              class={clsx("badge", {
+                "bg-primary": currentRole === "dm",
+                "bg-success": currentRole === "player",
+                "bg-info": currentRole === "viewer",
+              })}
+            >
+              {currentRole === "dm"
+                ? "Dungeon Master"
+                : currentRole === "player"
+                  ? "Player"
+                  : "Viewer"}
+            </span>
+          </div>
+
+          <div class="mb-3">
+            <label for="newRole" class="form-label">
+              New Role
+            </label>
+            <select
+              class={clsx("form-select", { "is-invalid": errors.newRole })}
+              id="newRole"
+              name="newRole"
+              required
+              disabled={isSoleDM}
+            >
+              <option value="">Select a role...</option>
+              {canBecomeDM && (
+                <option value="dm" selected={selectedRole === "dm"}>
+                  Dungeon Master
+                </option>
+              )}
+              {canBecomePlayer && (
+                <option value="player" selected={selectedRole === "player"}>
+                  Player
+                </option>
+              )}
+              {canBecomeViewer && (
+                <option
+                  value="viewer"
+                  selected={selectedRole === "viewer"}
+                  disabled={viewerBlocked}
+                >
+                  Viewer {viewerBlocked ? "(remove characters first)" : ""}
+                </option>
+              )}
+            </select>
+            {errors.newRole && <div class="invalid-feedback d-block">{errors.newRole}</div>}
+          </div>
+
+          {/* Warning: Sole DM cannot change */}
+          {isSoleDM && (
+            <div class="alert alert-warning" role="alert">
+              <i class="bi bi-exclamation-triangle"></i> You are the only DM. Invite another DM
+              before changing your role.
+            </div>
+          )}
+
+          {/* Warning: DM leaving loses management */}
+          {isSelfChange && currentRole === "dm" && !isSoleDM && (
+            <div class="alert alert-warning" role="alert">
+              <i class="bi bi-exclamation-triangle"></i> You won't be able to manage the campaign or
+              become a DM again unless another DM promotes you.
+            </div>
+          )}
+
+          {/* Info: DM->Player with NPCs */}
+          {currentRole === "dm" && characterCount > 0 && (
+            <div class="alert alert-info" role="alert">
+              <i class="bi bi-info-circle"></i> You have {characterCount}
+              {characterCount === 1 ? " NPC" : " NPCs"} in this campaign. If you become a Player,
+              {characterCount === 1 ? " this NPC will" : " they will"} be revealed to all players
+              and become
+              {characterCount === 1 ? " your character." : " your characters."}
+            </div>
+          )}
+
+          {/* Info: Player->DM with characters */}
+          {currentRole === "player" && characterCount > 0 && (
+            <div class="alert alert-info" role="alert">
+              <i class="bi bi-info-circle"></i> {isSelfChange ? "You have" : "This member has"}{" "}
+              {characterCount}
+              {characterCount === 1 ? " character" : " characters"} in the campaign. Becoming a DM
+              will convert
+              {characterCount === 1 ? " it to an NPC" : " them to NPCs"} visible to players.
+            </div>
+          )}
+        </ModalBody>
+
+        <ModalFooter>
+          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
+            Cancel
+          </button>
+          <button type="submit" class="btn btn-primary" disabled={isSoleDM}>
+            <i class="bi bi-arrow-repeat"></i> Change Role
+          </button>
+        </ModalFooter>
+      </form>
+    </ModalContent>
+  )
+}
diff --git a/src/components/Character.tsx b/src/components/Character.tsx
index 7872676..00bf177 100644
--- a/src/components/Character.tsx
+++ b/src/components/Character.tsx
@@ -1,5 +1,6 @@
 import type { CharNote } from "@src/db/char_notes"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
+import { clsx } from "clsx"
 import { CharacterInfo } from "./CharacterInfo"
 import { ChatBox } from "./ChatBox"
 import { AbilitiesPanel } from "./panels/AbilitiesPanel"
@@ -8,13 +9,126 @@ import { SkillsPanel } from "./panels/SkillsPanel"
 import { SpellsPanel } from "./panels/SpellsPanel"
 import { TraitsPanel } from "./panels/TraitsPanel"
 import { SessionNotes } from "./SessionNotes"
+import { DetailModal } from "./ui/DetailModal"
 
 type CharacterProps = {
   character: ComputedCharacter
   currentNote: CharNote | null
+  isReadOnly?: boolean
 }
 
-export const Character = ({ character, currentNote }: CharacterProps) => {
+// Shared accordion panels component
+const CharacterPanels = ({
+  character,
+  isReadOnly,
+}: {
+  character: ComputedCharacter
+  isReadOnly: boolean
+}) => (
+  <div id="panels" class="accordion accordion-flush mx-0">
+    {/* Abilities */}
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="hdr-abilities">
+        <button
+          class={clsx("accordion-button", { collapsed: !isReadOnly })}
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#col-abilities"
+          aria-expanded={isReadOnly ? "true" : "false"}
+          aria-controls="col-abilities"
+        >
+          <i class="bi bi-dpad me-2"></i>
+          Abilities & Saves
+        </button>
+      </h2>
+      <div id="col-abilities" class={clsx("accordion-collapse collapse", { show: isReadOnly })}>
+        <AbilitiesPanel character={character} isReadOnly={isReadOnly} />
+      </div>
+    </div>
+
+    {/* Skills & Proficiencies */}
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="hdr-skills">
+        <button
+          class={clsx("accordion-button", { collapsed: !isReadOnly })}
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#col-skills"
+          aria-expanded={isReadOnly ? "true" : "false"}
+          aria-controls="col-skills"
+        >
+          <i class="bi bi-wrench me-2"></i>
+          Skills & Proficiencies
+        </button>
+      </h2>
+      <div id="col-skills" class={clsx("accordion-collapse collapse", { show: isReadOnly })}>
+        <SkillsPanel character={character} isReadOnly={isReadOnly} />
+      </div>
+    </div>
+
+    {/* Traits & Features */}
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="hdr-traits">
+        <button
+          class={clsx("accordion-button", { collapsed: !isReadOnly })}
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#col-traits"
+          aria-expanded={isReadOnly ? "true" : "false"}
+          aria-controls="col-traits"
+        >
+          <i class="bi bi-list-stars me-2"></i>
+          Traits & Features
+        </button>
+      </h2>
+      <div id="col-traits" class={clsx("accordion-collapse collapse", { show: isReadOnly })}>
+        <TraitsPanel character={character} isReadOnly={isReadOnly} />
+      </div>
+    </div>
+
+    {/* Spells */}
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="hdr-spells">
+        <button
+          class={clsx("accordion-button", { collapsed: !isReadOnly })}
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#col-spells"
+          aria-expanded={isReadOnly ? "true" : "false"}
+          aria-controls="col-spells"
+        >
+          <i class="bi bi-magic me-2"></i>
+          Spells
+        </button>
+      </h2>
+      <div id="col-spells" class={clsx("accordion-collapse collapse", { show: isReadOnly })}>
+        <SpellsPanel character={character} isReadOnly={isReadOnly} />
+      </div>
+    </div>
+
+    {/* Inventory */}
+    <div class="accordion-item">
+      <h2 class="accordion-header" id="hdr-inventory">
+        <button
+          class={clsx("accordion-button", { collapsed: !isReadOnly })}
+          type="button"
+          data-bs-toggle="collapse"
+          data-bs-target="#col-inventory"
+          aria-expanded={isReadOnly ? "true" : "false"}
+          aria-controls="col-inventory"
+        >
+          <i class="bi bi-backpack me-2"></i>
+          Inventory
+        </button>
+      </h2>
+      <div id="col-inventory" class={clsx("accordion-collapse collapse", { show: isReadOnly })}>
+        <InventoryPanel character={character} isReadOnly={isReadOnly} />
+      </div>
+    </div>
+  </div>
+)
+
+export const Character = ({ character, currentNote, isReadOnly = false }: CharacterProps) => {
   const emptyChat = {
     chatId: "",
     messages: [],
@@ -26,133 +140,44 @@ export const Character = ({ character, currentNote }: CharacterProps) => {
 
   return (
     <>
-      {/* Content */}
-      <div class="container-fluid">
-        <div class="character-grid">
-          <CharacterInfo character={character} />
-
-          <div class="character-main-view d-lg-flex flex-lg-column" id="character-main-view">
-            {/* AI Chat Box - rendered first if enabled, always starts with new chat */}
-            <ChatBox character={character} computedChat={emptyChat} />
+      {/* DM Viewing Banner */}
+      {isReadOnly && (
+        <div class="alert alert-info mb-0 rounded-0 text-center" role="alert">
+          <i class="bi bi-eye me-2"></i>
+          <strong>Viewing as DM</strong> - This is a read-only view of another player's character
+          sheet.
+        </div>
+      )}
 
-            <SessionNotes characterId={character.id} currentNote={currentNote} />
+      {/* Content */}
+      {isReadOnly ? (
+        // Read-only mode: simple centered single-column layout
+        <div class="container py-3" style={{ maxWidth: "800px" }}>
+          <CharacterInfo character={character} isReadOnly={isReadOnly} />
+          <div class="mt-3">
+            <CharacterPanels character={character} isReadOnly={isReadOnly} />
           </div>
+        </div>
+      ) : (
+        // Normal mode: grid layout with sidebar
+        <div class="container-fluid">
+          <div class="character-grid">
+            <CharacterInfo character={character} isReadOnly={isReadOnly} />
 
-          {/* Panels */}
-          <div class="character-panels">
-            <div id="panels" class="accordion accordion-flush mx-0">
-              {/* Abilities */}
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="hdr-abilities">
-                  <button
-                    class="accordion-button collapsed"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#col-abilities"
-                    aria-expanded="false"
-                    aria-controls="col-abilities"
-                  >
-                    <i class="bi bi-dpad me-2"></i>
-                    Abilities & Saves
-                  </button>
-                </h2>
-                <div id="col-abilities" class="accordion-collapse collapse">
-                  <AbilitiesPanel character={character} />
-                </div>
-              </div>
-
-              {/* Skills & Proficiencies */}
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="hdr-skills">
-                  <button
-                    class="accordion-button collapsed"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#col-skills"
-                    aria-expanded="false"
-                    aria-controls="col-skills"
-                  >
-                    <i class="bi bi-wrench me-2"></i>
-                    Skills & Proficiencies
-                  </button>
-                </h2>
-                <div id="col-skills" class="accordion-collapse collapse">
-                  <SkillsPanel character={character} />
-                </div>
-              </div>
-
-              {/* Traits & Features */}
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="hdr-traits">
-                  <button
-                    class="accordion-button collapsed"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#col-traits"
-                    aria-expanded="false"
-                    aria-controls="col-traits"
-                  >
-                    <i class="bi bi-list-stars me-2"></i>
-                    Traits & Features
-                  </button>
-                </h2>
-                <div id="col-traits" class="accordion-collapse collapse">
-                  <TraitsPanel character={character} />
-                </div>
-              </div>
-
-              {/* Spells */}
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="hdr-spells">
-                  <button
-                    class="accordion-button collapsed"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#col-spells"
-                    aria-expanded="false"
-                    aria-controls="col-spells"
-                  >
-                    <i class="bi bi-magic me-2"></i>
-                    Spells
-                  </button>
-                </h2>
-                <div id="col-spells" class="accordion-collapse collapse">
-                  <SpellsPanel character={character} />
-                </div>
-              </div>
+            <div class="character-main-view d-lg-flex flex-lg-column" id="character-main-view">
+              {/* AI Chat Box - rendered first if enabled, always starts with new chat */}
+              <ChatBox character={character} computedChat={emptyChat} />
+              <SessionNotes characterId={character.id} currentNote={currentNote} />
+            </div>
 
-              {/* Inventory (example extra section) */}
-              <div class="accordion-item">
-                <h2 class="accordion-header" id="hdr-inventory">
-                  <button
-                    class="accordion-button collapsed"
-                    type="button"
-                    data-bs-toggle="collapse"
-                    data-bs-target="#col-inventory"
-                    aria-expanded="false"
-                    aria-controls="col-inventory"
-                  >
-                    <i class="bi bi-backpack me-2"></i>
-                    Inventory
-                  </button>
-                </h2>
-                <div id="col-inventory" class="accordion-collapse collapse">
-                  <InventoryPanel character={character} />
-                </div>
-              </div>
+            <div class="character-panels">
+              <CharacterPanels character={character} isReadOnly={isReadOnly} />
             </div>
           </div>
         </div>
-      </div>
+      )}
 
-      {/* Edit/History Modal */}
-      <div class="modal fade" id="editModal" tabindex={-1} aria-hidden="true">
-        <div class="modal-dialog">
-          <div class="modal-content" id="editModalContent">
-            {/* Content loaded via htmx */}
-          </div>
-        </div>
-      </div>
+      <DetailModal />
 
       {/* Character-specific scripts */}
       <script src="/static/character.js"></script>
diff --git a/src/components/CharacterInfo.tsx b/src/components/CharacterInfo.tsx
index 8b2744a..6c5a818 100644
--- a/src/components/CharacterInfo.tsx
+++ b/src/components/CharacterInfo.tsx
@@ -9,14 +9,16 @@ import { LabeledValue } from "./ui/LabeledValue"
 export interface CharacterInfoProps {
   character: ComputedCharacter
   swapOob?: boolean
+  isReadOnly?: boolean
 }
 
 interface WieldedWeaponRowProps {
   item: EquippedComputedItem
   characterId: string
+  isReadOnly?: boolean
 }
 
-const WieldedWeaponRow = ({ item, characterId }: WieldedWeaponRowProps) => {
+const WieldedWeaponRow = ({ item, characterId, isReadOnly = false }: WieldedWeaponRowProps) => {
   // Use pre-computed human-readable damage
   const damageDisplay =
     item.humanReadableDamage.length > 0 ? item.humanReadableDamage.join(", ") : null
@@ -28,9 +30,9 @@ const WieldedWeaponRow = ({ item, characterId }: WieldedWeaponRowProps) => {
           type="button"
           class="btn btn-link p-0 text-start fw-bold"
           data-bs-toggle="modal"
-          data-bs-target="#editModal"
+          data-bs-target="#detailModal"
           hx-get={`/characters/${characterId}/items/${item.id}`}
-          hx-target="#editModalContent"
+          hx-target="#detailModalContent"
           hx-swap="innerHTML"
         >
           {item.name}
@@ -41,21 +43,28 @@ const WieldedWeaponRow = ({ item, characterId }: WieldedWeaponRowProps) => {
         {damageDisplay && (
           <span class="text-muted small d-none d-md-inline">({damageDisplay})</span>
         )}
-        {item.chargeLabel && (
-          <button
-            type="button"
-            class="btn btn-sm btn-outline-info"
-            hx-get={`/characters/${characterId}/items/${item.id}/charges`}
-            hx-target="#editModalContent"
-            hx-swap="innerHTML"
-            data-bs-toggle="modal"
-            data-bs-target="#editModal"
-          >
-            <i class="bi bi-lightning-charge"></i>{" "}
-            {item.chargeLabel === "ammunition" ? "Ammo" : "Charges"}
-            <span class="badge bg-info ms-1">{item.currentCharges}</span>
-          </button>
-        )}
+        {item.chargeLabel &&
+          (isReadOnly ? (
+            // In read-only mode, show charges as a static badge instead of a button
+            <span class="badge bg-info">
+              <i class="bi bi-lightning-charge me-1"></i>
+              {item.chargeLabel === "ammunition" ? "Ammo" : "Charges"}: {item.currentCharges}
+            </span>
+          ) : (
+            <button
+              type="button"
+              class="btn btn-sm btn-outline-info"
+              hx-get={`/characters/${characterId}/items/${item.id}/charges`}
+              hx-target="#detailModalContent"
+              hx-swap="innerHTML"
+              data-bs-toggle="modal"
+              data-bs-target="#detailModal"
+            >
+              <i class="bi bi-lightning-charge"></i>{" "}
+              {item.chargeLabel === "ammunition" ? "Ammo" : "Charges"}
+              <span class="badge bg-info ms-1">{item.currentCharges}</span>
+            </button>
+          ))}
       </div>
     </div>
   )
@@ -68,7 +77,7 @@ function numToOrdinal(n: number): string {
   return n + suffix
 }
 
-export const CharacterInfo = ({ character, swapOob }: CharacterInfoProps) => {
+export const CharacterInfo = ({ character, swapOob, isReadOnly = false }: CharacterInfoProps) => {
   const classStrings: string[] = []
   for (const c of character.classes) {
     const parts: string[] = []
@@ -90,50 +99,55 @@ export const CharacterInfo = ({ character, swapOob }: CharacterInfoProps) => {
       <div class="card-body">
         <div class="row g-2 d-flex align-items-center">
           <div class="col-3 col-lg-2">
-            <AvatarDisplay character={character} mode="clickable-gallery" />
+            <AvatarDisplay
+              character={character}
+              mode={isReadOnly ? "clickable-lightbox" : "clickable-gallery"}
+            />
           </div>
           <div class="col-9 col-lg-10">
             <h2>{character.name}</h2>
 
             {/* Class - full width under name */}
             <div class="row g-0 mt-2">
-              <div class="col-11">
+              <div class={isReadOnly ? "col-12" : "col-11"}>
                 <LabeledValue
                   label="Class"
                   value={classStrings.join(" / ")}
                   className="text-capitalize"
                 />
               </div>
-              <div class="col-1 d-flex flex-column gap-1 align-items-center">
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-secondary border p-1"
-                  style="width: 24px; height: 24px; line-height: 1;"
-                  aria-label="edit class"
-                  title="edit class"
-                  hx-get={`/characters/${character.id}/edit/class`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-pencil"></i>
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-secondary border p-1"
-                  style="width: 24px; height: 24px; line-height: 1;"
-                  aria-label="class history"
-                  title="class history"
-                  hx-get={`/characters/${character.id}/history/class`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-clock-history"></i>
-                </button>
-              </div>
+              {!isReadOnly && (
+                <div class="col-1 d-flex flex-column gap-1 align-items-center">
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-secondary border p-1"
+                    style="width: 24px; height: 24px; line-height: 1;"
+                    aria-label="edit class"
+                    title="edit class"
+                    hx-get={`/characters/${character.id}/edit/class`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-pencil"></i>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-secondary border p-1"
+                    style="width: 24px; height: 24px; line-height: 1;"
+                    aria-label="class history"
+                    title="class history"
+                    hx-get={`/characters/${character.id}/history/class`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-clock-history"></i>
+                  </button>
+                </div>
+              )}
             </div>
           </div>
         </div>
@@ -231,7 +245,11 @@ export const CharacterInfo = ({ character, swapOob }: CharacterInfoProps) => {
                     <div class="text-muted small mb-1">Weapons in Hand</div>
                     <div class="d-flex flex-column gap-1">
                       {wieldedWeapons.map((weapon) => (
-                        <WieldedWeaponRow item={weapon} characterId={character.id} />
+                        <WieldedWeaponRow
+                          item={weapon}
+                          characterId={character.id}
+                          isReadOnly={isReadOnly}
+                        />
                       ))}
                     </div>
                   </div>
@@ -241,119 +259,125 @@ export const CharacterInfo = ({ character, swapOob }: CharacterInfoProps) => {
 
             {/* Hit Points Progress Bar */}
             <div class="row g-2 h-auto mt-2">
-              <div class="col-10 col-md-2">
+              <div class={isReadOnly ? "col-12 col-md-2" : "col-10 col-md-2"}>
                 <div class="text-muted small text-center">Hit Points</div>
               </div>
-              <div class="col-10 col-md-8">
+              <div class={isReadOnly ? "col-12 col-md-10" : "col-10 col-md-8"}>
                 <HitPointsBar
                   currentHP={character.currentHP}
                   maxHitPoints={character.maxHitPoints}
                 />
               </div>
-              <div class="col-2 d-flex gap-1 align-items-center">
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-secondary border p-1"
-                  style="width: 24px; height: 24px; line-height: 1;"
-                  aria-label="edit hit points"
-                  title="edit hit points"
-                  hx-get={`/characters/${character.id}/edit/hitpoints`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-pencil"></i>
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-secondary border p-1"
-                  style="width: 24px; height: 24px; line-height: 1;"
-                  aria-label="hit points history"
-                  title="hit points history"
-                  hx-get={`/characters/${character.id}/history/hitpoints`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-clock-history"></i>
-                </button>
-              </div>
+              {!isReadOnly && (
+                <div class="col-2 d-flex gap-1 align-items-center">
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-secondary border p-1"
+                    style="width: 24px; height: 24px; line-height: 1;"
+                    aria-label="edit hit points"
+                    title="edit hit points"
+                    hx-get={`/characters/${character.id}/edit/hitpoints`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-pencil"></i>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-secondary border p-1"
+                    style="width: 24px; height: 24px; line-height: 1;"
+                    aria-label="hit points history"
+                    title="hit points history"
+                    hx-get={`/characters/${character.id}/history/hitpoints`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-clock-history"></i>
+                  </button>
+                </div>
+              )}
             </div>
 
             {/* Hit Dice */}
             <div class="row g-2 h-auto mt-2">
-              <div class="col-10 col-md-2">
+              <div class={isReadOnly ? "col-12 col-md-2" : "col-10 col-md-2"}>
                 <div class="text-muted small text-center">Hit Dice</div>
               </div>
-              <div class="col-10 col-md-8">
+              <div class={isReadOnly ? "col-12 col-md-10" : "col-10 col-md-8"}>
                 <HitDiceDisplay
                   allHitDice={character.hitDice}
                   availableHitDice={character.availableHitDice}
                 />
               </div>
-              <div class="col-2 d-flex gap-1 align-items-center">
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-secondary border p-1"
-                  style="width: 24px; height: 24px; line-height: 1;"
-                  aria-label="edit hit dice"
-                  title="edit hit dice"
-                  hx-get={`/characters/${character.id}/edit/hitdice`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-pencil"></i>
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-secondary border p-1"
-                  style="width: 24px; height: 24px; line-height: 1;"
-                  aria-label="hit dice history"
-                  title="hit dice history"
-                  hx-get={`/characters/${character.id}/history/hitdice`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-clock-history"></i>
-                </button>
-              </div>
+              {!isReadOnly && (
+                <div class="col-2 d-flex gap-1 align-items-center">
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-secondary border p-1"
+                    style="width: 24px; height: 24px; line-height: 1;"
+                    aria-label="edit hit dice"
+                    title="edit hit dice"
+                    hx-get={`/characters/${character.id}/edit/hitdice`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-pencil"></i>
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-secondary border p-1"
+                    style="width: 24px; height: 24px; line-height: 1;"
+                    aria-label="hit dice history"
+                    title="hit dice history"
+                    hx-get={`/characters/${character.id}/history/hitdice`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-clock-history"></i>
+                  </button>
+                </div>
+              )}
             </div>
 
             {/* Rest Buttons */}
-            <div class="row g-2 h-auto mt-2">
-              <div class="col-12 d-flex gap-2 justify-content-center">
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-primary"
-                  hx-get={`/characters/${character.id}/rest/short`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-cup-hot me-1"></i>
-                  Short Rest
-                </button>
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-primary"
-                  hx-get={`/characters/${character.id}/rest/long`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-moon-stars me-1"></i>
-                  Long Rest
-                </button>
+            {!isReadOnly && (
+              <div class="row g-2 h-auto mt-2">
+                <div class="col-12 d-flex gap-2 justify-content-center">
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-primary"
+                    hx-get={`/characters/${character.id}/rest/short`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-cup-hot me-1"></i>
+                    Short Rest
+                  </button>
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-primary"
+                    hx-get={`/characters/${character.id}/rest/long`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-moon-stars me-1"></i>
+                    Long Rest
+                  </button>
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </div>
       </div>
diff --git a/src/components/ChatBox.tsx b/src/components/ChatBox.tsx
index 4103fd6..df82559 100644
--- a/src/components/ChatBox.tsx
+++ b/src/components/ChatBox.tsx
@@ -88,9 +88,9 @@ export const ChatBox = ({ character, computedChat, swapOob = false }: ChatBoxPro
             type="button"
             class="btn btn-sm btn-outline-secondary"
             hx-get={`/characters/${character.id}/chats`}
-            hx-target="#editModalContent"
+            hx-target="#detailModalContent"
             data-bs-toggle="modal"
-            data-bs-target="#editModal"
+            data-bs-target="#detailModal"
           >
             <i class="bi bi-clock-history"></i> History
           </button>
diff --git a/src/components/ChatHistory.tsx b/src/components/ChatHistory.tsx
index b90cf27..09a022c 100644
--- a/src/components/ChatHistory.tsx
+++ b/src/components/ChatHistory.tsx
@@ -85,7 +85,7 @@ export const ChatHistory = ({ character, chats }: ChatHistoryProps) => {
                   type="button"
                   class="btn btn-sm btn-outline-danger"
                   hx-delete={`/characters/${character.id}/chat/${chat.chat_id}`}
-                  hx-target="#editModalContent"
+                  hx-target="#detailModalContent"
                   hx-confirm="Are you sure you want to delete this conversation? This cannot be undone."
                   onclick="event.preventDefault(); event.stopPropagation();"
                 >
diff --git a/src/components/CoinsEditForm.tsx b/src/components/CoinsEditForm.tsx
index e4f9e3f..bc0c9b2 100644
--- a/src/components/CoinsEditForm.tsx
+++ b/src/components/CoinsEditForm.tsx
@@ -1,7 +1,7 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { applyDeltasWithChange } from "@src/lib/dnd"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
 import clsx from "clsx"
-import { ModalContent } from "./ui/ModalContent"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
 
 export interface CoinsEditFormProps {
diff --git a/src/components/CreateItemForm.tsx b/src/components/CreateItemForm.tsx
index bc7bbff..72f83e3 100644
--- a/src/components/CreateItemForm.tsx
+++ b/src/components/CreateItemForm.tsx
@@ -1,4 +1,4 @@
-import { ModalContent } from "@src/components/ui/ModalContent"
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { Select } from "@src/components/ui/Select"
 import { ArmorTypes, DamageTypes, ItemCategories, WeaponMasteries } from "@src/lib/dnd"
 import { getGroupedTemplates, getTemplateByName, type RulesetId } from "@src/lib/dnd/itemTemplates"
diff --git a/src/components/EditItemForm.tsx b/src/components/EditItemForm.tsx
index 57d559e..6ad140b 100644
--- a/src/components/EditItemForm.tsx
+++ b/src/components/EditItemForm.tsx
@@ -1,4 +1,4 @@
-import { ModalContent } from "@src/components/ui/ModalContent"
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { Select } from "@src/components/ui/Select"
 import type { ItemDamage } from "@src/db/item_damage"
 import type { Item } from "@src/db/items"
diff --git a/src/components/InviteSwitchAccount.tsx b/src/components/InviteSwitchAccount.tsx
new file mode 100644
index 0000000..5111b2c
--- /dev/null
+++ b/src/components/InviteSwitchAccount.tsx
@@ -0,0 +1,43 @@
+export interface InviteSwitchAccountProps {
+  currentEmail: string
+  inviteEmail: string
+  token: string
+}
+
+export const InviteSwitchAccount = ({
+  currentEmail,
+  inviteEmail,
+  token,
+}: InviteSwitchAccountProps) => {
+  // Build redirect URL with proper encoding
+  const redirectUrl = `/invite/view?token=${encodeURIComponent(token)}`
+  const switchUrl = `/logout?redirect=${encodeURIComponent(redirectUrl)}`
+
+  return (
+    <div class="container">
+      <div class="row justify-content-center">
+        <div class="col-md-6 col-lg-4">
+          <div class="card shadow-sm mt-5">
+            <div class="card-body">
+              <h1 class="card-title text-center mb-4">Switch Account?</h1>
+              <p class="text-center">
+                You're logged in as <strong>{currentEmail}</strong>
+              </p>
+              <p class="text-center">
+                This invite is for <strong>{inviteEmail}</strong>
+              </p>
+              <div class="d-grid gap-2 mt-4">
+                <a href={switchUrl} class="btn btn-primary">
+                  Switch to {inviteEmail}
+                </a>
+                <a href="/campaigns" class="btn btn-secondary">
+                  Stay as {currentEmail}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ItemDetail.tsx b/src/components/ItemDetail.tsx
index fc290a2..8e570a2 100644
--- a/src/components/ItemDetail.tsx
+++ b/src/components/ItemDetail.tsx
@@ -1,4 +1,4 @@
-import { ModalContent } from "@src/components/ui/ModalContent"
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { EquippedComputedItem } from "@src/services/computeCharacterItems"
 
 export interface ItemDetailProps {
diff --git a/src/components/ItemEffectsEditor.tsx b/src/components/ItemEffectsEditor.tsx
index d16979a..63965a8 100644
--- a/src/components/ItemEffectsEditor.tsx
+++ b/src/components/ItemEffectsEditor.tsx
@@ -1,4 +1,4 @@
-import { ModalContent } from "@src/components/ui/ModalContent"
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { Select } from "@src/components/ui/Select"
 import { ItemEffectOps, ItemEffectTargets } from "@src/lib/dnd"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
@@ -82,7 +82,7 @@ export const ItemEffectsEditor = ({
                     type="button"
                     class="btn btn-sm btn-outline-danger"
                     hx-delete={`/characters/${character.id}/items/${item.id}/effects/${effect.id}`}
-                    hx-target="#editModalContent"
+                    hx-target="#detailModalContent"
                     hx-swap="innerHTML"
                     hx-confirm="Are you sure you want to delete this effect?"
                   >
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index d973a81..2edec9f 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -1,6 +1,7 @@
 import { Navbar } from "@src/components/ui/Navbar"
 import type { User } from "@src/db/users"
 import type { Flash } from "@src/middleware/flash"
+import type { Notifications } from "@src/middleware/notifications"
 import { clsx } from "clsx"
 import type { Child } from "hono/jsx"
 
@@ -13,6 +14,7 @@ export interface LayoutProps {
   user?: User
   currentPage?: string
   flash: Flash
+  notifications?: Notifications
 }
 
 export const Layout = ({
@@ -24,6 +26,7 @@ export const Layout = ({
   user,
   currentPage,
   flash,
+  notifications,
 }: LayoutProps) => {
   // Map flash level to Bootstrap alert classes (Bootstrap uses "danger" not "error")
   const flashBootstrapClass = flash?.level === "error" ? "danger" : flash?.level
@@ -87,7 +90,7 @@ export const Layout = ({
         <script src="/static/cropper.min.js"></script>
       </head>
       <body data-bs-theme="dark">
-        <Navbar user={user} currentPage={currentPage} />
+        <Navbar user={user} currentPage={currentPage} notifications={notifications} />
         {flash ? (
           <div class="container-fluid mt-3" id="messages">
             <div class="row">
@@ -129,6 +132,7 @@ export const Layout = ({
           integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
           crossorigin="anonymous"
         />
+        <script src="/static/detail-modal.js"></script>
         <script src="/static/flash.js"></script>
         <script src="/static/htmx-auth.js"></script>
       </body>
diff --git a/src/components/LearnSpellForm.tsx b/src/components/LearnSpellForm.tsx
index 2b22cfa..9dcdb68 100644
--- a/src/components/LearnSpellForm.tsx
+++ b/src/components/LearnSpellForm.tsx
@@ -1,8 +1,8 @@
 import { SpellDetail } from "@src/components/SpellDetail"
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { SpellPicker } from "@src/components/ui/SpellPicker"
 import { spells } from "@src/lib/dnd/spells"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
-import { ModalContent } from "./ui/ModalContent"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
 
 export interface LearnSpellFormProps {
diff --git a/src/components/LongRestForm.tsx b/src/components/LongRestForm.tsx
index 1c53454..ec1a89f 100644
--- a/src/components/LongRestForm.tsx
+++ b/src/components/LongRestForm.tsx
@@ -1,5 +1,5 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
-import { ModalContent } from "./ui/ModalContent"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
 
 export interface LongRestFormProps {
diff --git a/src/components/NotesHistory.tsx b/src/components/NotesHistory.tsx
index 52bc2fd..93d3e97 100644
--- a/src/components/NotesHistory.tsx
+++ b/src/components/NotesHistory.tsx
@@ -1,5 +1,5 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { CharNote } from "@src/db/char_notes"
-import { ModalContent } from "./ui/ModalContent"
 
 export interface NotesHistoryProps {
   characterId: string
diff --git a/src/components/PrepareSpellForm.tsx b/src/components/PrepareSpellForm.tsx
index b91559c..ecff4da 100644
--- a/src/components/PrepareSpellForm.tsx
+++ b/src/components/PrepareSpellForm.tsx
@@ -1,5 +1,5 @@
 import { SpellDetail } from "@src/components/SpellDetail"
-
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { Select } from "@src/components/ui/Select"
 import { SpellPicker } from "@src/components/ui/SpellPicker"
 import type { ClassNameType } from "@src/lib/dnd"
@@ -7,7 +7,6 @@ import { type Spell, spells } from "@src/lib/dnd/spells"
 import { toTitleCase } from "@src/lib/strings"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
 import { clsx } from "clsx"
-import { ModalContent } from "./ui/ModalContent"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
 
 export interface PrepareSpellFormProps {
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
new file mode 100644
index 0000000..d1410b1
--- /dev/null
+++ b/src/components/Profile.tsx
@@ -0,0 +1,104 @@
+import type { User } from "@src/db/users"
+import clsx from "clsx"
+
+export interface ProfileProps {
+  user: User
+  values?: Record<string, string>
+  errors?: Record<string, string>
+  success?: boolean
+}
+
+export const Profile = ({ user, values = {}, errors = {}, success }: ProfileProps) => {
+  const nameValue = values.name ?? user.name ?? ""
+
+  return (
+    <div class="container" id="profile-page">
+      <div class="row justify-content-center">
+        <div class="col-md-8 col-lg-6">
+          <div class="card shadow-sm mt-4">
+            <div class="card-body">
+              <h1 class="card-title text-center mb-4">Profile</h1>
+
+              <form
+                id="profile-form"
+                hx-post="/profile"
+                hx-target="#profile-page"
+                hx-swap="outerHTML"
+              >
+                {success && (
+                  <div class="alert alert-success" role="alert">
+                    <i class="bi bi-check-circle me-2"></i>
+                    Profile updated successfully!
+                  </div>
+                )}
+
+                {errors.general && (
+                  <div class="alert alert-danger" role="alert">
+                    <i class="bi bi-exclamation-triangle me-2"></i>
+                    {errors.general}
+                  </div>
+                )}
+
+                {/* Avatar placeholder */}
+                <div class="text-center mb-4">
+                  <div class="d-inline-block" style="width: 120px;">
+                    <div class="ratio ratio-1x1">
+                      <img
+                        src="/static/placeholder-person.png"
+                        alt="Avatar placeholder"
+                        class="rounded"
+                        style="object-fit: cover;"
+                      />
+                    </div>
+                  </div>
+                </div>
+
+                {/* Name field */}
+                <div class="mb-3">
+                  <label for="name" class="form-label">
+                    Display Name
+                  </label>
+                  <input
+                    type="text"
+                    class={clsx("form-control", { "is-invalid": errors.name })}
+                    id="name"
+                    name="name"
+                    value={nameValue}
+                    placeholder="Enter your display name"
+                  />
+                  {errors.name && <div class="invalid-feedback d-block">{errors.name}</div>}
+                  {!errors.name && (
+                    <div class="form-text">
+                      This name will be shown to other users instead of your email.
+                    </div>
+                  )}
+                </div>
+
+                {/* Email field (readonly) */}
+                <div class="mb-4">
+                  <label for="email" class="form-label">
+                    Email
+                  </label>
+                  <input
+                    type="email"
+                    class="form-control"
+                    id="email"
+                    value={user.email}
+                    readonly
+                    disabled
+                  />
+                  <div class="form-text">Email cannot be changed.</div>
+                </div>
+
+                <button type="submit" class="btn btn-primary w-100">
+                  <i class="bi bi-save me-2"></i>
+                  Save Changes
+                </button>
+              </form>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/SessionNotes.tsx b/src/components/SessionNotes.tsx
index 74e163f..f2a2173 100644
--- a/src/components/SessionNotes.tsx
+++ b/src/components/SessionNotes.tsx
@@ -24,9 +24,9 @@ export const SessionNotes = ({ characterId, currentNote }: SessionNotesProps) =>
             type="button"
             class="btn btn-sm btn-outline-secondary"
             hx-get={`/characters/${characterId}/history/notes`}
-            hx-target="#editModalContent"
+            hx-target="#detailModalContent"
             data-bs-toggle="modal"
-            data-bs-target="#editModal"
+            data-bs-target="#detailModal"
           >
             <i class="bi bi-clock-history" /> History
           </button>
diff --git a/src/components/ShortRestForm.tsx b/src/components/ShortRestForm.tsx
index 05531fa..0ea9490 100644
--- a/src/components/ShortRestForm.tsx
+++ b/src/components/ShortRestForm.tsx
@@ -1,5 +1,5 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
-import { ModalContent } from "./ui/ModalContent"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
 
 export interface ShortRestFormProps {
diff --git a/src/components/SkillsEditForm.tsx b/src/components/SkillsEditForm.tsx
index 34572f9..a0e870b 100644
--- a/src/components/SkillsEditForm.tsx
+++ b/src/components/SkillsEditForm.tsx
@@ -1,8 +1,8 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { ProficiencyLevel, SkillType } from "@src/lib/dnd"
 import { ProficiencyLevels, SkillAbilities, Skills } from "@src/lib/dnd"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
 import clsx from "clsx"
-import { ModalContent } from "./ui/ModalContent"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
 
 export interface SkillsEditFormProps {
diff --git a/src/components/SpellCastResult.tsx b/src/components/SpellCastResult.tsx
index 8e414c8..528156b 100644
--- a/src/components/SpellCastResult.tsx
+++ b/src/components/SpellCastResult.tsx
@@ -1,7 +1,7 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { spells } from "@src/lib/dnd/spells"
 import type { AttackInfo } from "@src/services/castSpell"
 import { SpellDetail } from "./SpellDetail"
-import { ModalContent } from "./ui/ModalContent"
 
 export interface SpellCastResultProps {
   message: string
diff --git a/src/components/Spells.tsx b/src/components/Spells.tsx
index 3acad31..cab642f 100644
--- a/src/components/Spells.tsx
+++ b/src/components/Spells.tsx
@@ -1,5 +1,6 @@
 import { SpellDetail } from "@src/components/SpellDetail"
 import { SpellsTable } from "@src/components/SpellsTable"
+import { DetailModal } from "@src/components/ui/DetailModal"
 import { ClassNames } from "@src/lib/dnd"
 import type { Spell } from "@src/lib/dnd/spells"
 import { SpellSchools } from "@src/lib/dnd/spells"
@@ -143,13 +144,7 @@ export const Spells = ({
       </div>
 
       {/* Spell Detail Modal */}
-      <div class="modal fade" id="spellModal" tabindex={-1} aria-hidden="true">
-        <div class="modal-dialog modal-lg">
-          <div class="modal-content" id="spellModalContent">
-            {openSpell ? <SpellDetail spell={openSpell} /> : null}
-          </div>
-        </div>
-      </div>
+      <DetailModal size="lg">{openSpell ? <SpellDetail spell={openSpell} /> : null}</DetailModal>
 
       {/* Character-specific scripts */}
       <script src="/static/spells.js"></script>
diff --git a/src/components/SpellsTable.tsx b/src/components/SpellsTable.tsx
index 3ebb3a2..af84cbe 100644
--- a/src/components/SpellsTable.tsx
+++ b/src/components/SpellsTable.tsx
@@ -131,9 +131,9 @@ export const SpellsTable = ({
                     type="button"
                     class="btn btn-link p-0 text-start"
                     data-bs-toggle="modal"
-                    data-bs-target="#spellModal"
+                    data-bs-target="#detailModal"
                     hx-get={`/spells/${spell.id}`}
-                    hx-target="#spellModalContent"
+                    hx-target="#detailModalContent"
                     hx-swap="innerHTML"
                     hx-push-url={`/spells?${params.toString()}`}
                   >
diff --git a/src/components/TraitEditForm.tsx b/src/components/TraitEditForm.tsx
index b3e6fd4..413b6dc 100644
--- a/src/components/TraitEditForm.tsx
+++ b/src/components/TraitEditForm.tsx
@@ -1,4 +1,4 @@
-import { ModalContent } from "@src/components/ui/ModalContent"
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { ComputedCharacter } from "@src/services/computeCharacter"
 import { clsx } from "clsx"
 import { ModalForm, ModalFormSubmit } from "./ui/ModalForm"
diff --git a/src/components/UploadAvatarForm.tsx b/src/components/UploadAvatarForm.tsx
index 0cef7ef..f5dc75a 100644
--- a/src/components/UploadAvatarForm.tsx
+++ b/src/components/UploadAvatarForm.tsx
@@ -1,6 +1,6 @@
+import { ModalContent } from "@src/components/ui/DetailModal"
 import type { Character } from "@src/db/characters"
 import { MAX_UPLOAD_SIZE } from "@src/db/uploads"
-import { ModalContent } from "./ui/ModalContent"
 
 export interface UploadAvatarFormProps {
   character: Character
diff --git a/src/components/panels/AbilitiesPanel.tsx b/src/components/panels/AbilitiesPanel.tsx
index 272e3f9..3ff8379 100644
--- a/src/components/panels/AbilitiesPanel.tsx
+++ b/src/components/panels/AbilitiesPanel.tsx
@@ -78,35 +78,38 @@ const AbilityBox = ({
 interface AbilitiesPanelProps {
   character: ComputedCharacter
   swapOob?: boolean
+  isReadOnly?: boolean
 }
 
-export const AbilitiesPanel = ({ character, swapOob }: AbilitiesPanelProps) => {
+export const AbilitiesPanel = ({ character, swapOob, isReadOnly = false }: AbilitiesPanelProps) => {
   return (
     <div class="accordion-body" id="abilities-panel" {...(swapOob && { "hx-swap-oob": "true" })}>
-      <div class="d-flex justify-content-end gap-2 mb-3">
-        <button
-          type="button"
-          class="btn btn-sm btn-outline-secondary"
-          hx-get={`/characters/${character.id}/edit/abilities`}
-          hx-target="#editModalContent"
-          hx-swap="innerHTML"
-          data-bs-toggle="modal"
-          data-bs-target="#editModal"
-        >
-          <i class="bi bi-pencil"></i> Edit Abilities
-        </button>
-        <button
-          type="button"
-          class="btn btn-sm btn-outline-secondary"
-          hx-get={`/characters/${character.id}/history/abilities`}
-          hx-target="#editModalContent"
-          hx-swap="innerHTML"
-          data-bs-toggle="modal"
-          data-bs-target="#editModal"
-        >
-          <i class="bi bi-clock-history"></i> History
-        </button>
-      </div>
+      {!isReadOnly && (
+        <div class="d-flex justify-content-end gap-2 mb-3">
+          <button
+            type="button"
+            class="btn btn-sm btn-outline-secondary"
+            hx-get={`/characters/${character.id}/edit/abilities`}
+            hx-target="#detailModalContent"
+            hx-swap="innerHTML"
+            data-bs-toggle="modal"
+            data-bs-target="#detailModal"
+          >
+            <i class="bi bi-pencil"></i> Edit Abilities
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-outline-secondary"
+            hx-get={`/characters/${character.id}/history/abilities`}
+            hx-target="#detailModalContent"
+            hx-swap="innerHTML"
+            data-bs-toggle="modal"
+            data-bs-target="#detailModal"
+          >
+            <i class="bi bi-clock-history"></i> History
+          </button>
+        </div>
+      )}
       <div class="row row-cols-3 g-2">
         {Abilities.map((ability) => {
           const abilityScore = character.abilityScores[ability]
diff --git a/src/components/panels/InventoryPanel.tsx b/src/components/panels/InventoryPanel.tsx
index e4775d2..3ef9282 100644
--- a/src/components/panels/InventoryPanel.tsx
+++ b/src/components/panels/InventoryPanel.tsx
@@ -5,14 +5,16 @@ import type { EquippedComputedItem } from "@src/services/computeCharacterItems"
 interface InventoryPanelProps {
   character: ComputedCharacter
   swapOob?: boolean
+  isReadOnly?: boolean
 }
 
 interface InventoryItemRowProps {
   item: EquippedComputedItem
   characterId: string
+  isReadOnly?: boolean
 }
 
-const InventoryItemRow = ({ item, characterId }: InventoryItemRowProps) => {
+const InventoryItemRow = ({ item, characterId, isReadOnly = false }: InventoryItemRowProps) => {
   return (
     <div class="row g-2 border-bottom pb-2 mb-2">
       {/* Item name and badges */}
@@ -22,9 +24,9 @@ const InventoryItemRow = ({ item, characterId }: InventoryItemRowProps) => {
             type="button"
             class="btn btn-link p-0 text-start fw-bold"
             data-bs-toggle="modal"
-            data-bs-target="#editModal"
+            data-bs-target="#detailModal"
             hx-get={`/characters/${characterId}/items/${item.id}`}
-            hx-target="#editModalContent"
+            hx-target="#detailModalContent"
             hx-swap="innerHTML"
           >
             {item.name}
@@ -35,121 +37,123 @@ const InventoryItemRow = ({ item, characterId }: InventoryItemRowProps) => {
         </div>
       </div>
 
-      {/* Button groups */}
-      <div class="col-12 col-md-6">
-        <div class="d-flex flex-column gap-1">
-          {/* Row 1: State and charge buttons */}
-          <div class="d-flex gap-2 justify-content-start justify-content-md-end flex-wrap">
-            {item.wearable && !item.worn && (
-              <button
-                type="button"
-                class="btn btn-sm btn-outline-primary"
-                hx-post={`/characters/${characterId}/items/${item.id}/wear`}
-                hx-swap="none"
-              >
-                <i class="bi bi-person-fill-up"></i> Wear
-              </button>
-            )}
-            {item.wearable && item.worn && (
+      {/* Button groups - only shown in edit mode */}
+      {!isReadOnly && (
+        <div class="col-12 col-md-6">
+          <div class="d-flex flex-column gap-1">
+            {/* Row 1: State and charge buttons */}
+            <div class="d-flex gap-2 justify-content-start justify-content-md-end flex-wrap">
+              {item.wearable && !item.worn && (
+                <button
+                  type="button"
+                  class="btn btn-sm btn-outline-primary"
+                  hx-post={`/characters/${characterId}/items/${item.id}/wear`}
+                  hx-swap="none"
+                >
+                  <i class="bi bi-person-fill-up"></i> Wear
+                </button>
+              )}
+              {item.wearable && item.worn && (
+                <button
+                  type="button"
+                  class="btn btn-sm btn-outline-primary"
+                  hx-post={`/characters/${characterId}/items/${item.id}/remove`}
+                  hx-swap="none"
+                >
+                  <i class="bi bi-person-fill-dash"></i> Remove
+                </button>
+              )}
+              {item.wieldable && !item.wielded && (
+                <button
+                  type="button"
+                  class="btn btn-sm btn-outline-primary"
+                  hx-post={`/characters/${characterId}/items/${item.id}/wield`}
+                  hx-swap="none"
+                >
+                  <i class="bi bi-hand-thumbs-up"></i> Wield
+                </button>
+              )}
+              {item.wieldable && item.wielded && (
+                <button
+                  type="button"
+                  class="btn btn-sm btn-outline-primary"
+                  hx-post={`/characters/${characterId}/items/${item.id}/sheathe`}
+                  hx-swap="none"
+                >
+                  <i class="bi bi-hand-thumbs-down"></i> Sheathe
+                </button>
+              )}
+              {item.chargeLabel && (
+                <button
+                  type="button"
+                  class="btn btn-sm btn-outline-info"
+                  hx-get={`/characters/${characterId}/items/${item.id}/charges`}
+                  hx-target="#detailModalContent"
+                  hx-swap="innerHTML"
+                  data-bs-toggle="modal"
+                  data-bs-target="#detailModal"
+                >
+                  <i class="bi bi-lightning-charge"></i>{" "}
+                  {item.chargeLabel === "ammunition" ? "Ammo" : "Charges"}
+                  <span class="badge bg-info ms-1">{item.currentCharges}</span>
+                </button>
+              )}
+            </div>
+
+            {/* Row 2: Management buttons */}
+            <div class="d-flex gap-2 justify-content-start justify-content-md-end flex-wrap">
               <button
                 type="button"
-                class="btn btn-sm btn-outline-primary"
-                hx-post={`/characters/${characterId}/items/${item.id}/remove`}
-                hx-swap="none"
+                class="btn btn-sm btn-outline-secondary"
+                hx-get={`/characters/${characterId}/items/${item.id}/edit`}
+                hx-target="#detailModalContent"
+                hx-swap="innerHTML"
+                data-bs-toggle="modal"
+                data-bs-target="#detailModal"
               >
-                <i class="bi bi-person-fill-dash"></i> Remove
+                <i class="bi bi-pencil"></i> Edit
               </button>
-            )}
-            {item.wieldable && !item.wielded && (
               <button
                 type="button"
-                class="btn btn-sm btn-outline-primary"
-                hx-post={`/characters/${characterId}/items/${item.id}/wield`}
-                hx-swap="none"
+                class="btn btn-sm btn-outline-secondary"
+                hx-get={`/characters/${characterId}/items/${item.id}/effects`}
+                hx-target="#detailModalContent"
+                hx-swap="innerHTML"
+                data-bs-toggle="modal"
+                data-bs-target="#detailModal"
               >
-                <i class="bi bi-hand-thumbs-up"></i> Wield
+                <i class="bi bi-stars"></i> Effects
+                {item.effects.length > 0 &&
+                  (() => {
+                    const activeCount = item.effects.filter((e) => e.isActive).length
+                    if (activeCount > 0) {
+                      return (
+                        <span class="badge bg-success ms-1">
+                          {activeCount}/{item.effects.length}
+                        </span>
+                      )
+                    }
+                    return <span class="badge bg-secondary ms-1">{item.effects.length}</span>
+                  })()}
               </button>
-            )}
-            {item.wieldable && item.wielded && (
               <button
                 type="button"
-                class="btn btn-sm btn-outline-primary"
-                hx-post={`/characters/${characterId}/items/${item.id}/sheathe`}
+                class="btn btn-sm btn-outline-danger"
+                hx-post={`/characters/${characterId}/items/${item.id}/drop`}
                 hx-swap="none"
+                hx-confirm={`Are you sure you want to drop ${item.name}?`}
               >
-                <i class="bi bi-hand-thumbs-down"></i> Sheathe
+                <i class="bi bi-trash"></i> Drop
               </button>
-            )}
-            {item.chargeLabel && (
-              <button
-                type="button"
-                class="btn btn-sm btn-outline-info"
-                hx-get={`/characters/${characterId}/items/${item.id}/charges`}
-                hx-target="#editModalContent"
-                hx-swap="innerHTML"
-                data-bs-toggle="modal"
-                data-bs-target="#editModal"
-              >
-                <i class="bi bi-lightning-charge"></i>{" "}
-                {item.chargeLabel === "ammunition" ? "Ammo" : "Charges"}
-                <span class="badge bg-info ms-1">{item.currentCharges}</span>
-              </button>
-            )}
-          </div>
-
-          {/* Row 2: Management buttons */}
-          <div class="d-flex gap-2 justify-content-start justify-content-md-end flex-wrap">
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-secondary"
-              hx-get={`/characters/${characterId}/items/${item.id}/edit`}
-              hx-target="#editModalContent"
-              hx-swap="innerHTML"
-              data-bs-toggle="modal"
-              data-bs-target="#editModal"
-            >
-              <i class="bi bi-pencil"></i> Edit
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-secondary"
-              hx-get={`/characters/${characterId}/items/${item.id}/effects`}
-              hx-target="#editModalContent"
-              hx-swap="innerHTML"
-              data-bs-toggle="modal"
-              data-bs-target="#editModal"
-            >
-              <i class="bi bi-stars"></i> Effects
-              {item.effects.length > 0 &&
-                (() => {
-                  const activeCount = item.effects.filter((e) => e.isActive).length
-                  if (activeCount > 0) {
-                    return (
-                      <span class="badge bg-success ms-1">
-                        {activeCount}/{item.effects.length}
-                      </span>
-                    )
-                  }
-                  return <span class="badge bg-secondary ms-1">{item.effects.length}</span>
-                })()}
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-danger"
-              hx-post={`/characters/${characterId}/items/${item.id}/drop`}
-              hx-swap="none"
-              hx-confirm={`Are you sure you want to drop ${item.name}?`}
-            >
-              <i class="bi bi-trash"></i> Drop
-            </button>
+            </div>
           </div>
         </div>
-      </div>
+      )}
     </div>
   )
 }
 
-export const InventoryPanel = ({ character, swapOob }: InventoryPanelProps) => {
+export const InventoryPanel = ({ character, swapOob, isReadOnly = false }: InventoryPanelProps) => {
   const coins = character.coins || { pp: 0, gp: 0, ep: 0, sp: 0, cp: 0 }
 
   return (
@@ -158,30 +162,32 @@ export const InventoryPanel = ({ character, swapOob }: InventoryPanelProps) => {
       <div class="mb-4">
         <div class="d-flex justify-content-between align-items-center mb-2">
           <h6 class="mb-0">Coins</h6>
-          <div class="d-flex gap-2">
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-secondary"
-              hx-get={`/characters/${character.id}/edit/coins`}
-              hx-target="#editModalContent"
-              hx-swap="innerHTML"
-              data-bs-toggle="modal"
-              data-bs-target="#editModal"
-            >
-              <i class="bi bi-pencil"></i> Edit Coins
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-secondary"
-              hx-get={`/characters/${character.id}/history/coins`}
-              hx-target="#editModalContent"
-              hx-swap="innerHTML"
-              data-bs-toggle="modal"
-              data-bs-target="#editModal"
-            >
-              <i class="bi bi-clock-history"></i> History
-            </button>
-          </div>
+          {!isReadOnly && (
+            <div class="d-flex gap-2">
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-secondary"
+                hx-get={`/characters/${character.id}/edit/coins`}
+                hx-target="#detailModalContent"
+                hx-swap="innerHTML"
+                data-bs-toggle="modal"
+                data-bs-target="#detailModal"
+              >
+                <i class="bi bi-pencil"></i> Edit Coins
+              </button>
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-secondary"
+                hx-get={`/characters/${character.id}/history/coins`}
+                hx-target="#detailModalContent"
+                hx-swap="innerHTML"
+                data-bs-toggle="modal"
+                data-bs-target="#detailModal"
+              >
+                <i class="bi bi-clock-history"></i> History
+              </button>
+            </div>
+          )}
         </div>
 
         <div class="row row-cols-5 g-2">
@@ -207,30 +213,32 @@ export const InventoryPanel = ({ character, swapOob }: InventoryPanelProps) => {
       <div>
         <div class="d-flex justify-content-between align-items-center mb-2 border-bottom pb-2 mb-2">
           <h5 class="mb-0">Items</h5>
-          <div class="d-flex gap-2">
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-primary"
-              hx-get={`/characters/${character.id}/edit/newitem`}
-              hx-target="#editModalContent"
-              hx-swap="innerHTML"
-              data-bs-toggle="modal"
-              data-bs-target="#editModal"
-            >
-              <i class="bi bi-plus-circle"></i> Add Item
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-secondary"
-              hx-get={`/characters/${character.id}/history/items`}
-              hx-target="#editModalContent"
-              hx-swap="innerHTML"
-              data-bs-toggle="modal"
-              data-bs-target="#editModal"
-            >
-              <i class="bi bi-clock-history"></i> History
-            </button>
-          </div>
+          {!isReadOnly && (
+            <div class="d-flex gap-2">
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-primary"
+                hx-get={`/characters/${character.id}/edit/newitem`}
+                hx-target="#detailModalContent"
+                hx-swap="innerHTML"
+                data-bs-toggle="modal"
+                data-bs-target="#detailModal"
+              >
+                <i class="bi bi-plus-circle"></i> Add Item
+              </button>
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-secondary"
+                hx-get={`/characters/${character.id}/history/items`}
+                hx-target="#detailModalContent"
+                hx-swap="innerHTML"
+                data-bs-toggle="modal"
+                data-bs-target="#detailModal"
+              >
+                <i class="bi bi-clock-history"></i> History
+              </button>
+            </div>
+          )}
         </div>
 
         {character.equippedItems.length === 0 ? (
@@ -238,7 +246,7 @@ export const InventoryPanel = ({ character, swapOob }: InventoryPanelProps) => {
         ) : (
           <div class="d-flex flex-column gap-2">
             {character.equippedItems.map((item) => (
-              <InventoryItemRow item={item} characterId={character.id} />
+              <InventoryItemRow item={item} characterId={character.id} isReadOnly={isReadOnly} />
             ))}
           </div>
         )}
diff --git a/src/components/panels/SkillsPanel.tsx b/src/components/panels/SkillsPanel.tsx
index 87589a1..e67bf0e 100644
--- a/src/components/panels/SkillsPanel.tsx
+++ b/src/components/panels/SkillsPanel.tsx
@@ -56,35 +56,38 @@ const SkillRow = ({ skill, skillScore, hasEffect = false, effectTooltip }: Skill
 interface SkillsPanelProps {
   character: ComputedCharacter
   swapOob?: boolean
+  isReadOnly?: boolean
 }
 
-export const SkillsPanel = ({ character, swapOob }: SkillsPanelProps) => {
+export const SkillsPanel = ({ character, swapOob, isReadOnly = false }: SkillsPanelProps) => {
   return (
     <div class="accordion-body" id="skills-panel" {...(swapOob && { "hx-swap-oob": "true" })}>
-      <div class="d-flex justify-content-end gap-2 mb-3">
-        <button
-          type="button"
-          class="btn btn-sm btn-outline-secondary"
-          hx-get={`/characters/${character.id}/edit/skills`}
-          hx-target="#editModalContent"
-          hx-swap="innerHTML"
-          data-bs-toggle="modal"
-          data-bs-target="#editModal"
-        >
-          <i class="bi bi-pencil"></i> Edit Skills
-        </button>
-        <button
-          type="button"
-          class="btn btn-sm btn-outline-secondary"
-          hx-get={`/characters/${character.id}/history/skills`}
-          hx-target="#editModalContent"
-          hx-swap="innerHTML"
-          data-bs-toggle="modal"
-          data-bs-target="#editModal"
-        >
-          <i class="bi bi-clock-history"></i> History
-        </button>
-      </div>
+      {!isReadOnly && (
+        <div class="d-flex justify-content-end gap-2 mb-3">
+          <button
+            type="button"
+            class="btn btn-sm btn-outline-secondary"
+            hx-get={`/characters/${character.id}/edit/skills`}
+            hx-target="#detailModalContent"
+            hx-swap="innerHTML"
+            data-bs-toggle="modal"
+            data-bs-target="#detailModal"
+          >
+            <i class="bi bi-pencil"></i> Edit Skills
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-outline-secondary"
+            hx-get={`/characters/${character.id}/history/skills`}
+            hx-target="#detailModalContent"
+            hx-swap="innerHTML"
+            data-bs-toggle="modal"
+            data-bs-target="#detailModal"
+          >
+            <i class="bi bi-clock-history"></i> History
+          </button>
+        </div>
+      )}
       <div class="row g-2">
         <div class="col-12 col-md-6">
           <div class="list-group small">
diff --git a/src/components/panels/SpellsPanel.tsx b/src/components/panels/SpellsPanel.tsx
index 4757ac1..afca1db 100644
--- a/src/components/panels/SpellsPanel.tsx
+++ b/src/components/panels/SpellsPanel.tsx
@@ -7,9 +7,10 @@ import { clsx } from "clsx"
 export interface SpellsPanelProps {
   character: ComputedCharacter
   swapOob?: boolean
+  isReadOnly?: boolean
 }
 
-export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
+export const SpellsPanel = ({ character, swapOob, isReadOnly = false }: SpellsPanelProps) => {
   const formatBonus = (value: number) => (value >= 0 ? `+${value}` : `${value}`)
 
   return (
@@ -39,45 +40,47 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
       {/* Spell slots */}
       {character.spellSlots && (
         <div class="row g-2 h-auto mt-2 mb-2">
-          <div class="col-10 col-md-2">
+          <div class={isReadOnly ? "col-12 col-md-2" : "col-10 col-md-2"}>
             <div class="text-muted small text-center">Spell Slots</div>
           </div>
-          <div class="col-10 col-md-8">
+          <div class={isReadOnly ? "col-12 col-md-10" : "col-10 col-md-8"}>
             <SpellSlotsDisplay
               allSlots={character.spellSlots}
               availableSlots={character.availableSpellSlots}
             />
           </div>
-          <div class="col-2 d-flex gap-1 align-items-center">
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-secondary border p-1"
-              style="width: 24px; height: 24px; line-height: 1;"
-              aria-label="Edit spell slots"
-              title="Edit spell slots"
-              hx-get={`/characters/${character.id}/edit/spellslots`}
-              hx-target="#editModalContent"
-              hx-swap="innerHTML"
-              data-bs-toggle="modal"
-              data-bs-target="#editModal"
-            >
-              <i class="bi bi-pencil"></i>
-            </button>
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-secondary border p-1"
-              style="width: 24px; height: 24px; line-height: 1;"
-              aria-label="Spell splot history"
-              title="Spell slot history"
-              hx-get={`/characters/${character.id}/history/spellslots`}
-              hx-target="#editModalContent"
-              hx-swap="innerHTML"
-              data-bs-toggle="modal"
-              data-bs-target="#editModal"
-            >
-              <i class="bi bi-clock-history"></i>
-            </button>
-          </div>
+          {!isReadOnly && (
+            <div class="col-2 d-flex gap-1 align-items-center">
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-secondary border p-1"
+                style="width: 24px; height: 24px; line-height: 1;"
+                aria-label="Edit spell slots"
+                title="Edit spell slots"
+                hx-get={`/characters/${character.id}/edit/spellslots`}
+                hx-target="#detailModalContent"
+                hx-swap="innerHTML"
+                data-bs-toggle="modal"
+                data-bs-target="#detailModal"
+              >
+                <i class="bi bi-pencil"></i>
+              </button>
+              <button
+                type="button"
+                class="btn btn-sm btn-outline-secondary border p-1"
+                style="width: 24px; height: 24px; line-height: 1;"
+                aria-label="Spell splot history"
+                title="Spell slot history"
+                hx-get={`/characters/${character.id}/history/spellslots`}
+                hx-target="#detailModalContent"
+                hx-swap="innerHTML"
+                data-bs-toggle="modal"
+                data-bs-target="#detailModal"
+              >
+                <i class="bi bi-clock-history"></i>
+              </button>
+            </div>
+          )}
         </div>
       )}
 
@@ -132,20 +135,22 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
             <div class="mt-3">
               <div class="d-flex justify-content-between align-items-center mb-2">
                 <h6 class="mb-0">Prepared Spells</h6>
-                <button
-                  type="button"
-                  class="btn btn-sm btn-outline-secondary border p-1"
-                  style="width: 24px; height: 24px; line-height: 1;"
-                  aria-label="Spell preparation history"
-                  title="Spell preparation history"
-                  hx-get={`/characters/${character.id}/history/prepared-spells`}
-                  hx-target="#editModalContent"
-                  hx-swap="innerHTML"
-                  data-bs-toggle="modal"
-                  data-bs-target="#editModal"
-                >
-                  <i class="bi bi-clock-history"></i>
-                </button>
+                {!isReadOnly && (
+                  <button
+                    type="button"
+                    class="btn btn-sm btn-outline-secondary border p-1"
+                    style="width: 24px; height: 24px; line-height: 1;"
+                    aria-label="Spell preparation history"
+                    title="Spell preparation history"
+                    hx-get={`/characters/${character.id}/history/prepared-spells`}
+                    hx-target="#detailModalContent"
+                    hx-swap="innerHTML"
+                    data-bs-toggle="modal"
+                    data-bs-target="#detailModal"
+                  >
+                    <i class="bi bi-clock-history"></i>
+                  </button>
+                )}
               </div>
               {allSlots.length > 0 ? (
                 <div class="table-responsive">
@@ -155,7 +160,7 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
                         <th>Class</th>
                         <th>Type</th>
                         <th>Spell</th>
-                        <th style="width: 80px;">Actions</th>
+                        {!isReadOnly && <th style="width: 80px;">Actions</th>}
                       </tr>
                     </thead>
                     <tbody>
@@ -174,10 +179,10 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
                                   <a
                                     href="/spells/{spell.id}"
                                     hx-get={`/spells/${spell.id}`}
-                                    hx-target="#editModalContent"
+                                    hx-target="#detailModalContent"
                                     hx-swap="innerHTML"
                                     data-bs-toggle="modal"
-                                    data-bs-target="#editModal"
+                                    data-bs-target="#detailModal"
                                     class="text-decoration-none"
                                   >
                                     {spell.name}
@@ -195,41 +200,43 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
                                 <span class="text-muted fst-italic">empty</span>
                               )}
                             </td>
-                            <td>
-                              <div class="d-flex gap-1">
-                                <button
-                                  type="button"
-                                  class="btn btn-sm btn-outline-secondary border p-0"
-                                  style="width: 24px; height: 24px; line-height: 1;"
-                                  aria-label="Edit slot"
-                                  title="Edit slot"
-                                  disabled={row.alwaysPrepared}
-                                  hx-get={`/characters/${character.id}/edit/prepspell?class=${row.className}&spell_type=${row.type.toLowerCase()}${row.spell_id ? `&current_spell_id=${row.spell_id}` : ""}`}
-                                  hx-target="#editModalContent"
-                                  hx-swap="innerHTML"
-                                  data-bs-toggle="modal"
-                                  data-bs-target="#editModal"
-                                >
-                                  <i class="bi bi-pencil"></i>
-                                </button>
-                                {spell && (
+                            {!isReadOnly && (
+                              <td>
+                                <div class="d-flex gap-1">
                                   <button
                                     type="button"
-                                    class="btn btn-sm btn-outline-primary border p-0"
+                                    class="btn btn-sm btn-outline-secondary border p-0"
                                     style="width: 24px; height: 24px; line-height: 1;"
-                                    aria-label="Cast spell"
-                                    title="Cast spell"
-                                    hx-get={`/characters/${character.id}/castspell?spell_id=${spell.id}`}
-                                    hx-target="#editModalContent"
+                                    aria-label="Edit slot"
+                                    title="Edit slot"
+                                    disabled={row.alwaysPrepared}
+                                    hx-get={`/characters/${character.id}/edit/prepspell?class=${row.className}&spell_type=${row.type.toLowerCase()}${row.spell_id ? `&current_spell_id=${row.spell_id}` : ""}`}
+                                    hx-target="#detailModalContent"
                                     hx-swap="innerHTML"
                                     data-bs-toggle="modal"
-                                    data-bs-target="#editModal"
+                                    data-bs-target="#detailModal"
                                   >
-                                    <i class="bi bi-lightning-fill"></i>
+                                    <i class="bi bi-pencil"></i>
                                   </button>
-                                )}
-                              </div>
-                            </td>
+                                  {spell && (
+                                    <button
+                                      type="button"
+                                      class="btn btn-sm btn-outline-primary border p-0"
+                                      style="width: 24px; height: 24px; line-height: 1;"
+                                      aria-label="Cast spell"
+                                      title="Cast spell"
+                                      hx-get={`/characters/${character.id}/castspell?spell_id=${spell.id}`}
+                                      hx-target="#detailModalContent"
+                                      hx-swap="innerHTML"
+                                      data-bs-toggle="modal"
+                                      data-bs-target="#detailModal"
+                                    >
+                                      <i class="bi bi-lightning-fill"></i>
+                                    </button>
+                                  )}
+                                </div>
+                              </td>
+                            )}
                           </tr>
                         )
                       })}
@@ -262,36 +269,38 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
             <div class="mt-3">
               <div class="d-flex justify-content-between align-items-center mb-2">
                 <h6 class="mb-0">Spellbook</h6>
-                <div class="d-flex gap-1">
-                  <button
-                    type="button"
-                    class="btn btn-sm btn-outline-secondary border p-1"
-                    style="width: 24px; height: 24px; line-height: 1;"
-                    aria-label="Add to spellbook"
-                    title="Add to spellbook"
-                    hx-get={`/characters/${character.id}/edit/spellbook`}
-                    hx-target="#editModalContent"
-                    hx-swap="innerHTML"
-                    data-bs-toggle="modal"
-                    data-bs-target="#editModal"
-                  >
-                    <i class="bi bi-plus"></i>
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-sm btn-outline-secondary border p-1"
-                    style="width: 24px; height: 24px; line-height: 1;"
-                    aria-label="Spellbook history"
-                    title="Spellbook history"
-                    hx-get={`/characters/${character.id}/history/spellbook`}
-                    hx-target="#editModalContent"
-                    hx-swap="innerHTML"
-                    data-bs-toggle="modal"
-                    data-bs-target="#editModal"
-                  >
-                    <i class="bi bi-clock-history"></i>
-                  </button>
-                </div>
+                {!isReadOnly && (
+                  <div class="d-flex gap-1">
+                    <button
+                      type="button"
+                      class="btn btn-sm btn-outline-secondary border p-1"
+                      style="width: 24px; height: 24px; line-height: 1;"
+                      aria-label="Add to spellbook"
+                      title="Add to spellbook"
+                      hx-get={`/characters/${character.id}/edit/spellbook`}
+                      hx-target="#detailModalContent"
+                      hx-swap="innerHTML"
+                      data-bs-toggle="modal"
+                      data-bs-target="#detailModal"
+                    >
+                      <i class="bi bi-plus"></i>
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-sm btn-outline-secondary border p-1"
+                      style="width: 24px; height: 24px; line-height: 1;"
+                      aria-label="Spellbook history"
+                      title="Spellbook history"
+                      hx-get={`/characters/${character.id}/history/spellbook`}
+                      hx-target="#detailModalContent"
+                      hx-swap="innerHTML"
+                      data-bs-toggle="modal"
+                      data-bs-target="#detailModal"
+                    >
+                      <i class="bi bi-clock-history"></i>
+                    </button>
+                  </div>
+                )}
               </div>
               <div class="table-responsive">
                 <table class="table table-sm table-hover small">
@@ -300,7 +309,7 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
                       <th>Spell</th>
                       <th>Level</th>
                       <th>Prepared</th>
-                      <th></th>
+                      {!isReadOnly && <th></th>}
                     </tr>
                   </thead>
                   <tbody>
@@ -341,10 +350,10 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
                           aria-label="Add to prepared spells"
                           title="Add to prepared spells"
                           hx-get={`/characters/${character.id}/edit/prepspell?class=${wizardInfo.class}&spell_type=${spell.level === 0 ? "cantrip" : "spell"}&spell_id=${spell.id}`}
-                          hx-target="#editModalContent"
+                          hx-target="#detailModalContent"
                           hx-swap="innerHTML"
                           data-bs-toggle="modal"
-                          data-bs-target="#editModal"
+                          data-bs-target="#detailModal"
                           disabled={isInPreparedSlot || isInCantripSlot}
                         >
                           <i class="bi bi-plus-circle" />
@@ -358,10 +367,10 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
                           aria-label="Cast spell as ritual"
                           title="Cast spell as ritual"
                           hx-get={`/characters/${character.id}/castspell?spell_id=${spell.id}&as_ritual=true`}
-                          hx-target="#editModalContent"
+                          hx-target="#detailModalContent"
                           hx-swap="innerHTML"
                           data-bs-toggle="modal"
-                          data-bs-target="#editModal"
+                          data-bs-target="#detailModal"
                         >
                           <i class="bi bi-lightning-fill"></i>
                         </button>
@@ -373,10 +382,10 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
                             <a
                               href="/spells/{spell.id}"
                               hx-get={`/spells/${spell.id}`}
-                              hx-target="#editModalContent"
+                              hx-target="#detailModalContent"
                               hx-swap="innerHTML"
                               data-bs-toggle="modal"
-                              data-bs-target="#editModal"
+                              data-bs-target="#detailModal"
                               class="text-decoration-none"
                             >
                               {spell.name}
@@ -384,10 +393,12 @@ export const SpellsPanel = ({ character, swapOob }: SpellsPanelProps) => {
                           </td>
                           <td>{spell.level === 0 ? "Cantrip" : spell.level}</td>
                           <td>{preparedIcon}</td>
-                          <td>
-                            {prepIcon}
-                            {ritualCastIcon}
-                          </td>
+                          {!isReadOnly && (
+                            <td>
+                              {prepIcon}
+                              {ritualCastIcon}
+                            </td>
+                          )}
                         </tr>
                       )
                     })}
diff --git a/src/components/panels/TraitsPanel.tsx b/src/components/panels/TraitsPanel.tsx
index 4505744..060eba7 100644
--- a/src/components/panels/TraitsPanel.tsx
+++ b/src/components/panels/TraitsPanel.tsx
@@ -5,6 +5,7 @@ import type { ComputedCharacter } from "@src/services/computeCharacter"
 export interface TraitsPanelProps {
   character: ComputedCharacter
   swapOob?: boolean
+  isReadOnly?: boolean
 }
 
 interface TraitBadgesProps {
@@ -61,7 +62,7 @@ const TraitGroup = ({ source, traits }: TraitGroupProps) => {
   )
 }
 
-export const TraitsPanel = ({ character, swapOob }: TraitsPanelProps) => {
+export const TraitsPanel = ({ character, swapOob, isReadOnly = false }: TraitsPanelProps) => {
   const traits = character.traits
 
   // Group traits by source for organized display
@@ -83,30 +84,32 @@ export const TraitsPanel = ({ character, swapOob }: TraitsPanelProps) => {
 
   return (
     <div class="accordion-body" id="traits-panel" {...(swapOob && { "hx-swap-oob": "true" })}>
-      <div class="d-flex justify-content-end gap-2 mb-3">
-        <button
-          type="button"
-          class="btn btn-sm btn-outline-primary"
-          hx-get={`/characters/${character.id}/edit/trait`}
-          hx-target="#editModalContent"
-          hx-swap="innerHTML"
-          data-bs-toggle="modal"
-          data-bs-target="#editModal"
-        >
-          <i class="bi bi-plus-circle"></i> Add Custom Trait
-        </button>
-        <button
-          type="button"
-          class="btn btn-sm btn-outline-secondary"
-          hx-get={`/characters/${character.id}/history/traits`}
-          hx-target="#editModalContent"
-          hx-swap="innerHTML"
-          data-bs-toggle="modal"
-          data-bs-target="#editModal"
-        >
-          <i class="bi bi-clock-history"></i> History
-        </button>
-      </div>
+      {!isReadOnly && (
+        <div class="d-flex justify-content-end gap-2 mb-3">
+          <button
+            type="button"
+            class="btn btn-sm btn-outline-primary"
+            hx-get={`/characters/${character.id}/edit/trait`}
+            hx-target="#detailModalContent"
+            hx-swap="innerHTML"
+            data-bs-toggle="modal"
+            data-bs-target="#detailModal"
+          >
+            <i class="bi bi-plus-circle"></i> Add Custom Trait
+          </button>
+          <button
+            type="button"
+            class="btn btn-sm btn-outline-secondary"
+            hx-get={`/characters/${character.id}/history/traits`}
+            hx-target="#detailModalContent"
+            hx-swap="innerHTML"
+            data-bs-toggle="modal"
+            data-bs-target="#detailModal"
+          >
+            <i class="bi bi-clock-history"></i> History
+          </button>
+        </div>
+      )}
 
       {traits.length === 0 ? (
         <p class="text-muted">No traits yet.</p>
diff --git a/src/components/ui/CampaignCharacterCard.tsx b/src/components/ui/CampaignCharacterCard.tsx
new file mode 100644
index 0000000..1c04d7d
--- /dev/null
+++ b/src/components/ui/CampaignCharacterCard.tsx
@@ -0,0 +1,57 @@
+import { AvatarDisplay } from "@src/components/AvatarDisplay"
+import type { BadgeVariant } from "@src/components/ui/CampaignMemberCard"
+import type { ListCharacter } from "@src/services/listCharacters"
+import type { Child } from "hono/jsx"
+
+export interface CampaignCharacterCardProps {
+  character: {
+    id: string
+    name: string
+    avatars: ListCharacter["avatars"]
+    level: number
+    className: string
+  }
+  subtitle?: string
+  badge?: {
+    text: string
+    variant: BadgeVariant
+    darkText?: boolean
+  }
+  isCurrentUser?: boolean
+  children?: Child
+}
+
+export const CampaignCharacterCard = ({
+  character,
+  subtitle,
+  badge,
+  isCurrentUser,
+  children,
+}: CampaignCharacterCardProps) => (
+  <div class={`card h-100 ${isCurrentUser ? "border-primary border-2" : ""}`}>
+    <div class="card-body">
+      <div class="row align-items-center mb-2 g-2">
+        <div class="col-3">
+          <AvatarDisplay
+            character={{ id: character.id, name: character.name, avatars: character.avatars }}
+            mode="clickable-lightbox"
+            avatarIndex={0}
+          />
+        </div>
+        <div class="col-9">
+          <h6 class="card-title mb-0">{character.name}</h6>
+          <small class="text-muted d-block">
+            Level {character.level} {character.className}
+          </small>
+          {subtitle && <small class="text-muted d-block">{subtitle}</small>}
+          {badge && (
+            <span class={`badge bg-${badge.variant}${badge.darkText ? " text-dark" : ""}`}>
+              {badge.text}
+            </span>
+          )}
+        </div>
+      </div>
+      {children && <div class="d-flex justify-content-center gap-2">{children}</div>}
+    </div>
+  </div>
+)
diff --git a/src/components/ui/CampaignMemberCard.tsx b/src/components/ui/CampaignMemberCard.tsx
new file mode 100644
index 0000000..97cc245
--- /dev/null
+++ b/src/components/ui/CampaignMemberCard.tsx
@@ -0,0 +1,59 @@
+import type { Child } from "hono/jsx"
+
+export type BadgeVariant = "warning" | "danger" | "secondary" | "primary" | "info"
+
+export interface CampaignMemberCardProps {
+  title: string
+  badge?: {
+    text: string
+    variant: BadgeVariant
+    darkText?: boolean // for warning badges that need dark text
+  }
+  isCurrentUser?: boolean
+  needsAction?: boolean // when true and isCurrentUser, use warning border instead of primary
+  children?: Child
+}
+
+export const CampaignMemberCard = ({
+  title,
+  badge,
+  isCurrentUser,
+  needsAction,
+  children,
+}: CampaignMemberCardProps) => {
+  // Determine border class: warning if action needed, primary if current user, none otherwise
+  const borderClass =
+    isCurrentUser && needsAction
+      ? "border-warning border-2"
+      : isCurrentUser
+        ? "border-primary border-2"
+        : ""
+
+  return (
+    <div class={`card h-100 ${borderClass}`}>
+      <div class="card-body">
+        <div class="row align-items-center mb-2 g-2">
+          <div class="col-3">
+            <div class="ratio ratio-1x1">
+              <img
+                src="/static/placeholder-person.png"
+                alt="No avatar"
+                class="rounded"
+                style="object-fit: cover;"
+              />
+            </div>
+          </div>
+          <div class="col-9">
+            <h6 class="card-title mb-1">{title}</h6>
+            {badge && (
+              <span class={`badge bg-${badge.variant}${badge.darkText ? " text-dark" : ""}`}>
+                {badge.text}
+              </span>
+            )}
+          </div>
+        </div>
+        {children && <div class="d-flex justify-content-center gap-2">{children}</div>}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ui/DetailModal.tsx b/src/components/ui/DetailModal.tsx
new file mode 100644
index 0000000..ca8e80b
--- /dev/null
+++ b/src/components/ui/DetailModal.tsx
@@ -0,0 +1,57 @@
+import type { Child } from "hono/jsx"
+
+// DetailModal wrapper component
+export interface DetailModalProps {
+  size?: "sm" | "lg" | "xl" | "fullscreen"
+  children?: Child
+}
+
+export const DetailModal = ({ size, children }: DetailModalProps) => {
+  const dialogClass = size ? `modal-dialog modal-${size}` : "modal-dialog"
+
+  return (
+    <div class="modal fade" id="detailModal" tabindex={-1} aria-hidden="true">
+      <div class={dialogClass}>
+        <div class="modal-content" id="detailModalContent">
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+// ModalContent component (header + children)
+export interface ModalContentProps {
+  title: string | Child
+  children?: Child
+}
+
+export const ModalContent = ({ title, children }: ModalContentProps) => {
+  return (
+    <>
+      <div class="modal-header">
+        {typeof title === "string" ? <h5 class="modal-title">{title}</h5> : title}
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      {children}
+    </>
+  )
+}
+
+// Helper component for modal body
+export interface ModalBodyProps {
+  children: Child
+}
+
+export const ModalBody = ({ children }: ModalBodyProps) => {
+  return <div class="modal-body">{children}</div>
+}
+
+// Helper component for modal footer
+export interface ModalFooterProps {
+  children: Child
+}
+
+export const ModalFooter = ({ children }: ModalFooterProps) => {
+  return <div class="modal-footer">{children}</div>
+}
diff --git a/src/components/ui/ModalContent.tsx b/src/components/ui/ModalContent.tsx
deleted file mode 100644
index 7fac17d..0000000
--- a/src/components/ui/ModalContent.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { Child } from "hono/jsx"
-
-export interface ModalContentProps {
-  title: string | Child
-  children?: Child
-}
-
-export const ModalContent = ({ title, children }: ModalContentProps) => {
-  return (
-    <>
-      <div class="modal-header">
-        {typeof title === "string" ? <h5 class="modal-title">{title}</h5> : title}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-      </div>
-      {children}
-    </>
-  )
-}
diff --git a/src/components/ui/ModalForm.tsx b/src/components/ui/ModalForm.tsx
index 5a1db31..713d9dd 100644
--- a/src/components/ui/ModalForm.tsx
+++ b/src/components/ui/ModalForm.tsx
@@ -1,5 +1,7 @@
 import type { Child } from "hono/jsx"
 
+const DETAIL_MODAL_CONTENT_ID = "#detailModalContent"
+
 export interface ModalFormProps {
   id: string
   endpoint: string
@@ -21,7 +23,7 @@ export const ModalForm = ({
       hx-post={endpoint}
       hx-vals='{"is_check": "true"}'
       hx-trigger={trigger}
-      hx-target="#editModalContent"
+      hx-target={DETAIL_MODAL_CONTENT_ID}
       hx-swap={swap}
       hx-ext="morph"
       class="needs-validation"
@@ -54,7 +56,7 @@ export const ModalFormSubmit = ({
       class="btn btn-primary"
       hx-post={endpoint}
       hx-vals='{"is_check": "false"}'
-      hx-target="#editModalContent"
+      hx-target={DETAIL_MODAL_CONTENT_ID}
       hx-swap={swap}
       hx-sync="closest form:replace"
       hx-ext="morph"
diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
index 14f972d..02d97b6 100644
--- a/src/components/ui/Navbar.tsx
+++ b/src/components/ui/Navbar.tsx
@@ -1,8 +1,10 @@
 import type { User } from "@src/db/users"
+import type { Notifications } from "@src/middleware/notifications"
 
 export interface NavbarProps {
   currentPage?: string
   user?: User
+  notifications?: Notifications
 }
 
 interface NavLink {
@@ -19,6 +21,12 @@ const NavLinks: NavLink[] = [
     requiresAuth: true,
     isActive: (currentPage) => (currentPage ? currentPage.startsWith("/characters") : false),
   },
+  {
+    href: "/campaigns",
+    label: "Campaigns",
+    requiresAuth: true,
+    isActive: (currentPage) => (currentPage ? currentPage.startsWith("/campaigns") : false),
+  },
   {
     href: "/spells",
     label: "Spells",
@@ -27,11 +35,13 @@ const NavLinks: NavLink[] = [
 ] as const
 
 const LoggedInContent = ({ user }: { user: User }) => {
-  const username = user.email?.split("@")[0]
+  const displayName = user.name || user.email?.split("@")[0]
 
   return (
     <div class="d-flex align-items-center">
-      <span class="navbar-text me-3">{username}</span>
+      <a href="/profile" class="navbar-text me-3 text-decoration-none">
+        {displayName}
+      </a>
       <a href="/logout" class="btn btn-outline-secondary btn-sm">
         Logout
       </a>
@@ -45,10 +55,16 @@ const LoggedOutContent = () => (
   </a>
 )
 
-export const Navbar = ({ currentPage, user }: NavbarProps) => {
+export const Navbar = ({ currentPage, user, notifications }: NavbarProps) => {
   const collapseId = "navbarContent"
   const navLinks = NavLinks.filter((link) => !link.requiresAuth || user)
 
+  // Check for campaign notifications
+  const hasPendingViewerInvites = (notifications?.pendingViewerInvites ?? 0) > 0
+  const hasPendingInvites = (notifications?.pendingInvites ?? 0) > 0
+  const hasNeedsCharacter = (notifications?.needsCharacter ?? 0) > 0
+  const hasCampaignNotification = hasPendingInvites || hasNeedsCharacter
+
   return (
     <nav class="navbar navbar-expand-md bg-body-tertiary">
       <div class="container-fluid">
@@ -85,6 +101,24 @@ export const Navbar = ({ currentPage, user }: NavbarProps) => {
                   href={link.href}
                 >
                   {link.label}
+                  {link.href === "/campaigns" && hasCampaignNotification && (
+                    <i
+                      class={`bi ms-1 ${
+                        hasPendingViewerInvites
+                          ? "bi-eye text-warning"
+                          : hasPendingInvites
+                            ? "bi-envelope-exclamation text-warning"
+                            : "bi-person-plus text-warning"
+                      }`}
+                      title={
+                        hasPendingViewerInvites
+                          ? "You have pending viewer invites"
+                          : hasPendingInvites
+                            ? "You have pending campaign invites"
+                            : "Add a character to a campaign"
+                      }
+                    ></i>
+                  )}
                 </a>
               </li>
             ))}
diff --git a/src/db/campaign_characters.ts b/src/db/campaign_characters.ts
new file mode 100644
index 0000000..bc90974
--- /dev/null
+++ b/src/db/campaign_characters.ts
@@ -0,0 +1,202 @@
+import { ulid } from "@src/lib/ids"
+import type { SQL } from "bun"
+import { z } from "zod"
+
+export const CampaignCharacterSchema = z.object({
+  id: z.string(),
+  campaign_id: z.string(),
+  character_id: z.string(),
+  revealed_at: z.date().nullable().default(null),
+  added_by: z.string(),
+  added_at: z.date(),
+  created_at: z.date(),
+  updated_at: z.date(),
+})
+
+export const CreateCampaignCharacterSchema = CampaignCharacterSchema.omit({
+  id: true,
+  added_at: true,
+  created_at: true,
+  updated_at: true,
+})
+
+export type CampaignCharacter = z.infer<typeof CampaignCharacterSchema>
+export type CreateCampaignCharacter = z.infer<typeof CreateCampaignCharacterSchema>
+
+// biome-ignore lint/suspicious/noExplicitAny: database row, validated by Zod
+function parseCampaignCharacter(row: any): CampaignCharacter {
+  return CampaignCharacterSchema.parse({
+    ...row,
+    revealed_at: row.revealed_at ? new Date(row.revealed_at) : null,
+    added_at: new Date(row.added_at),
+    created_at: new Date(row.created_at),
+    updated_at: new Date(row.updated_at),
+  })
+}
+
+export async function create(
+  db: SQL,
+  campaignCharacter: CreateCampaignCharacter
+): Promise<CampaignCharacter> {
+  const id = ulid()
+
+  const result = await db`
+    INSERT INTO campaign_characters (id, campaign_id, character_id, revealed_at, added_by)
+    VALUES (
+      ${id},
+      ${campaignCharacter.campaign_id},
+      ${campaignCharacter.character_id},
+      ${campaignCharacter.revealed_at},
+      ${campaignCharacter.added_by}
+    )
+    RETURNING *
+  `
+
+  return parseCampaignCharacter(result[0])
+}
+
+export interface CampaignCharacterWithAddedBy extends CampaignCharacter {
+  added_by_email: string
+  added_by_name: string | null
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: database row, validated by Zod
+function parseCampaignCharacterWithAddedBy(row: any): CampaignCharacterWithAddedBy {
+  return {
+    ...parseCampaignCharacter(row),
+    added_by_email: row.added_by_email,
+    added_by_name: row.added_by_name ?? null,
+  }
+}
+
+export async function findByCampaignId(
+  db: SQL,
+  campaignId: string
+): Promise<CampaignCharacterWithAddedBy[]> {
+  const result = await db`
+    SELECT cc.*, u.email as added_by_email, u.name as added_by_name
+    FROM campaign_characters cc
+    JOIN users u ON u.id = cc.added_by
+    WHERE cc.campaign_id = ${campaignId}
+    ORDER BY cc.added_at ASC
+  `
+
+  return result.map(parseCampaignCharacterWithAddedBy)
+}
+
+export async function deleteByCharacterId(
+  db: SQL,
+  campaignId: string,
+  characterId: string
+): Promise<boolean> {
+  const result = await db`
+    DELETE FROM campaign_characters
+    WHERE campaign_id = ${campaignId} AND character_id = ${characterId}
+    RETURNING id
+  `
+
+  return result.length > 0
+}
+
+export async function updateRevealedAt(
+  db: SQL,
+  campaignId: string,
+  characterId: string,
+  revealedAt: Date | null
+): Promise<CampaignCharacter | null> {
+  const result = await db`
+    UPDATE campaign_characters
+    SET revealed_at = ${revealedAt}, updated_at = CURRENT_TIMESTAMP
+    WHERE campaign_id = ${campaignId} AND character_id = ${characterId}
+    RETURNING *
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return parseCampaignCharacter(result[0])
+}
+
+/**
+ * Reveal all hidden characters added by a specific user in a campaign
+ * Used when DM becomes player - their NPCs become player characters
+ * Returns the number of characters revealed
+ */
+export async function revealAllByAddedBy(
+  db: SQL,
+  campaignId: string,
+  addedBy: string
+): Promise<number> {
+  const result = await db`
+    UPDATE campaign_characters
+    SET revealed_at = CURRENT_TIMESTAMP, updated_at = CURRENT_TIMESTAMP
+    WHERE campaign_id = ${campaignId}
+      AND added_by = ${addedBy}
+      AND revealed_at IS NULL
+    RETURNING id
+  `
+
+  return result.length
+}
+
+/**
+ * Count characters added by a specific user in a campaign
+ * Used for validation when changing roles
+ */
+export async function countByAddedBy(
+  db: SQL,
+  campaignId: string,
+  addedBy: string
+): Promise<number> {
+  const result = await db`
+    SELECT COUNT(*) as count
+    FROM campaign_characters
+    WHERE campaign_id = ${campaignId}
+      AND added_by = ${addedBy}
+  `
+
+  return Number(result[0].count)
+}
+
+/**
+ * Role a user has in relation to a character through campaign membership
+ */
+export type CharacterCampaignRole = "dm" | "party"
+
+/**
+ * Get the user's role in relation to a character through campaign membership.
+ * Returns the highest role if user is in multiple campaigns with this character.
+ *
+ * Returns:
+ * - "dm" if user is DM (creator or explicit DM role) of any campaign with this character
+ * - "party" if user is a non-DM member of any campaign with this character
+ * - null if user is not a member of any campaign with this character
+ */
+export async function getUserCharacterCampaignRole(
+  db: SQL,
+  characterId: string,
+  userId: string
+): Promise<CharacterCampaignRole | null> {
+  const result = await db`
+    SELECT
+      CASE
+        WHEN c.created_by = ${userId} THEN 'dm'
+        WHEN cm.role = 'dm' THEN 'dm'
+        ELSE 'party'
+      END as role_type
+    FROM campaign_characters cc
+    JOIN campaigns c ON c.id = cc.campaign_id
+    JOIN campaign_members cm ON cm.campaign_id = cc.campaign_id
+      AND cm.user_id = ${userId}
+      AND cm.accepted_at IS NOT NULL
+      AND cm.deleted_at IS NULL
+    WHERE cc.character_id = ${characterId}
+    ORDER BY
+      CASE WHEN c.created_by = ${userId} OR cm.role = 'dm' THEN 0 ELSE 1 END
+    LIMIT 1
+  `
+
+  if (result.length === 0) return null
+  return result[0].role_type as CharacterCampaignRole
+}
diff --git a/src/db/campaign_members.ts b/src/db/campaign_members.ts
new file mode 100644
index 0000000..0213dd7
--- /dev/null
+++ b/src/db/campaign_members.ts
@@ -0,0 +1,357 @@
+import { ulid } from "@src/lib/ids"
+import type { SQL } from "bun"
+import { z } from "zod"
+
+export const CampaignMemberRoleSchema = z.enum(["dm", "player", "viewer"])
+export type CampaignMemberRole = z.infer<typeof CampaignMemberRoleSchema>
+
+export const CampaignMemberSchema = z.object({
+  id: z.string(),
+  campaign_id: z.string(),
+  user_id: z.string(),
+  role: CampaignMemberRoleSchema,
+  invite_token: z.string().nullable(),
+  invited_at: z.date(),
+  invited_by: z.string(),
+  accepted_at: z.date().nullable().default(null),
+  declined_at: z.date().nullable().default(null),
+  deleted_at: z.date().nullable().default(null),
+  created_at: z.date(),
+  updated_at: z.date(),
+})
+
+export const CreateCampaignMemberSchema = CampaignMemberSchema.omit({
+  id: true,
+  invited_at: true,
+  deleted_at: true,
+  created_at: true,
+  updated_at: true,
+})
+
+export type CampaignMember = z.infer<typeof CampaignMemberSchema>
+export type CreateCampaignMember = z.infer<typeof CreateCampaignMemberSchema>
+
+// biome-ignore lint/suspicious/noExplicitAny: database row, validated by Zod
+function parseCampaignMember(row: any): CampaignMember {
+  return CampaignMemberSchema.parse({
+    ...row,
+    invited_at: new Date(row.invited_at),
+    accepted_at: row.accepted_at ? new Date(row.accepted_at) : null,
+    declined_at: row.declined_at ? new Date(row.declined_at) : null,
+    deleted_at: row.deleted_at ? new Date(row.deleted_at) : null,
+    created_at: new Date(row.created_at),
+    updated_at: new Date(row.updated_at),
+  })
+}
+
+export async function create(db: SQL, member: CreateCampaignMember): Promise<CampaignMember> {
+  const id = ulid()
+
+  const result = await db`
+    INSERT INTO campaign_members (id, campaign_id, user_id, role, invite_token, invited_by, accepted_at, declined_at)
+    VALUES (
+      ${id},
+      ${member.campaign_id},
+      ${member.user_id},
+      ${member.role},
+      ${member.invite_token},
+      ${member.invited_by},
+      ${member.accepted_at},
+      ${member.declined_at}
+    )
+    RETURNING *
+  `
+
+  return parseCampaignMember(result[0])
+}
+
+export interface CampaignMemberWithUser extends CampaignMember {
+  email: string
+  name: string | null
+}
+
+// biome-ignore lint/suspicious/noExplicitAny: database row, validated by Zod
+function parseCampaignMemberWithUser(row: any): CampaignMemberWithUser {
+  return {
+    ...parseCampaignMember(row),
+    email: row.email,
+    name: row.name ?? null,
+  }
+}
+
+export async function findByCampaignId(
+  db: SQL,
+  campaignId: string
+): Promise<CampaignMemberWithUser[]> {
+  const result = await db`
+    SELECT cm.*, u.email, u.name
+    FROM campaign_members cm
+    JOIN users u ON u.id = cm.user_id
+    WHERE cm.campaign_id = ${campaignId}
+      AND cm.deleted_at IS NULL
+    ORDER BY cm.invited_at ASC
+  `
+
+  return result.map(parseCampaignMemberWithUser)
+}
+
+/**
+ * Find a campaign member by campaign and user
+ */
+export async function findByCampaignAndUser(
+  db: SQL,
+  campaignId: string,
+  userId: string
+): Promise<CampaignMember | null> {
+  const result = await db`
+    SELECT *
+    FROM campaign_members
+    WHERE campaign_id = ${campaignId}
+      AND user_id = ${userId}
+      AND deleted_at IS NULL
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return parseCampaignMember(result[0])
+}
+
+/**
+ * Find any campaign member by campaign and user (including deleted)
+ * Returns the most recent record if multiple exist
+ * Used for invite logic to check all membership states
+ */
+export async function findAnyByCampaignAndUser(
+  db: SQL,
+  campaignId: string,
+  userId: string
+): Promise<CampaignMember | null> {
+  const result = await db`
+    SELECT *
+    FROM campaign_members
+    WHERE campaign_id = ${campaignId}
+      AND user_id = ${userId}
+    ORDER BY id DESC
+    LIMIT 1
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return parseCampaignMember(result[0])
+}
+
+/**
+ * Find a campaign member by ID
+ */
+export async function findById(db: SQL, id: string): Promise<CampaignMember | null> {
+  const result = await db`
+    SELECT *
+    FROM campaign_members
+    WHERE id = ${id}
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return parseCampaignMember(result[0])
+}
+
+/**
+ * Accept a pending invite
+ */
+export async function accept(db: SQL, memberId: string): Promise<CampaignMember | null> {
+  const now = new Date()
+
+  const result = await db`
+    UPDATE campaign_members
+    SET accepted_at = ${now.toISOString()}, updated_at = ${now.toISOString()}
+    WHERE id = ${memberId}
+      AND accepted_at IS NULL
+      AND declined_at IS NULL
+    RETURNING *
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return parseCampaignMember(result[0])
+}
+
+/**
+ * Decline a pending invite
+ */
+export async function decline(db: SQL, memberId: string): Promise<CampaignMember | null> {
+  const now = new Date()
+
+  const result = await db`
+    UPDATE campaign_members
+    SET declined_at = ${now.toISOString()}, updated_at = ${now.toISOString()}
+    WHERE id = ${memberId}
+      AND accepted_at IS NULL
+      AND declined_at IS NULL
+    RETURNING *
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return parseCampaignMember(result[0])
+}
+
+export interface NotificationCounts {
+  pendingInvites: number
+  pendingViewerInvites: number
+  needsCharacter: number
+}
+
+/**
+ * Get all notification counts for a user in a single query
+ */
+export async function getNotificationCounts(db: SQL, userId: string): Promise<NotificationCounts> {
+  const result = await db`
+    SELECT
+      COUNT(*) FILTER (
+        WHERE cm.accepted_at IS NULL
+          AND cm.declined_at IS NULL
+          AND cm.deleted_at IS NULL
+      ) as pending_invites,
+      COUNT(*) FILTER (
+        WHERE cm.role = 'viewer'
+          AND cm.accepted_at IS NULL
+          AND cm.declined_at IS NULL
+          AND cm.deleted_at IS NULL
+      ) as pending_viewer_invites,
+      COUNT(*) FILTER (
+        WHERE cm.accepted_at IS NOT NULL
+          AND cm.declined_at IS NULL
+          AND cm.deleted_at IS NULL
+          AND cm.role = 'player'
+          AND NOT EXISTS (
+            SELECT 1 FROM campaign_characters cc
+            WHERE cc.campaign_id = cm.campaign_id
+              AND cc.added_by = cm.user_id
+          )
+      ) as needs_character
+    FROM campaign_members cm
+    JOIN campaigns c ON c.id = cm.campaign_id
+    WHERE cm.user_id = ${userId}
+      AND c.archived_at IS NULL
+  `
+
+  return {
+    pendingInvites: Number(result[0].pending_invites),
+    pendingViewerInvites: Number(result[0].pending_viewer_invites),
+    needsCharacter: Number(result[0].needs_character),
+  }
+}
+
+export interface InviteTokenResult {
+  memberId: string
+  campaignId: string
+  email: string
+  deletedAt: Date | null
+}
+
+/**
+ * Find an invite by its token
+ * Returns null if token not found or invite already accepted/declined
+ * Note: Also returns soft-deleted invites (check deletedAt field)
+ */
+export async function findByInviteToken(db: SQL, token: string): Promise<InviteTokenResult | null> {
+  const result = await db`
+    SELECT cm.id, cm.campaign_id, cm.deleted_at, u.email
+    FROM campaign_members cm
+    JOIN users u ON u.id = cm.user_id
+    WHERE cm.invite_token = ${token}
+      AND cm.accepted_at IS NULL
+      AND cm.declined_at IS NULL
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return {
+    memberId: result[0].id,
+    campaignId: result[0].campaign_id,
+    email: result[0].email,
+    deletedAt: result[0].deleted_at ? new Date(result[0].deleted_at) : null,
+  }
+}
+
+/**
+ * Soft-delete a campaign member by ID (sets deleted_at)
+ */
+export async function softDelete(db: SQL, id: string): Promise<void> {
+  const now = new Date()
+  await db`
+    UPDATE campaign_members
+    SET deleted_at = ${now.toISOString()}, updated_at = ${now.toISOString()}
+    WHERE id = ${id}
+  `
+}
+
+/**
+ * Update a campaign member's role
+ */
+export async function updateRole(
+  db: SQL,
+  memberId: string,
+  newRole: CampaignMemberRole
+): Promise<CampaignMember | null> {
+  const now = new Date()
+
+  const result = await db`
+    UPDATE campaign_members
+    SET role = ${newRole}, updated_at = ${now.toISOString()}
+    WHERE id = ${memberId}
+      AND deleted_at IS NULL
+    RETURNING *
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return parseCampaignMember(result[0])
+}
+
+/**
+ * Reset an invite to pending state with a new token
+ * Used when DM wants to re-invite someone who previously declined, removed, or resend expired invites
+ */
+export async function resetInvite(
+  db: SQL,
+  id: string,
+  newToken: string,
+  invitedBy: string
+): Promise<CampaignMember | null> {
+  const now = new Date()
+
+  const result = await db`
+    UPDATE campaign_members
+    SET
+      accepted_at = NULL,
+      declined_at = NULL,
+      deleted_at = NULL,
+      invite_token = ${newToken},
+      invited_at = ${now.toISOString()},
+      invited_by = ${invitedBy},
+      updated_at = ${now.toISOString()}
+    WHERE id = ${id}
+    RETURNING *
+  `
+
+  if (result.length === 0) {
+    return null
+  }
+
+  return parseCampaignMember(result[0])
+}
diff --git a/src/db/campaigns.ts b/src/db/campaigns.ts
new file mode 100644
index 0000000..88adf56
--- /dev/null
+++ b/src/db/campaigns.ts
@@ -0,0 +1,114 @@
+import { ulid } from "@src/lib/ids"
+import type { SQL } from "bun"
+import { z } from "zod"
+
+export const CampaignSchema = z.object({
+  id: z.string(),
+  name: z.string().min(1),
+  description: z.string().nullable().default(null),
+  created_by: z.string(),
+  archived_at: z.date().nullable().default(null),
+  created_at: z.date(),
+  updated_at: z.date(),
+})
+
+export const CreateCampaignSchema = CampaignSchema.omit({
+  id: true,
+  archived_at: true,
+  created_at: true,
+  updated_at: true,
+})
+
+export type Campaign = z.infer<typeof CampaignSchema>
+export type CreateCampaign = z.infer<typeof CreateCampaignSchema>
+
+// biome-ignore lint/suspicious/noExplicitAny: database row, validated by Zod
+function parseCampaign(row: any): Campaign {
+  return CampaignSchema.parse({
+    ...row,
+    archived_at: row.archived_at ? new Date(row.archived_at) : null,
+    created_at: new Date(row.created_at),
+    updated_at: new Date(row.updated_at),
+  })
+}
+
+export async function create(db: SQL, campaign: CreateCampaign): Promise<Campaign> {
+  const id = ulid()
+
+  const result = await db`
+    INSERT INTO campaigns (id, name, description, created_by)
+    VALUES (
+      ${id},
+      ${campaign.name},
+      ${campaign.description},
+      ${campaign.created_by}
+    )
+    RETURNING *
+  `
+
+  return parseCampaign(result[0])
+}
+
+export async function findById(db: SQL, id: string): Promise<Campaign | null> {
+  const result = await db`
+    SELECT * FROM campaigns
+    WHERE id = ${id}
+    LIMIT 1
+  `
+
+  if (!result[0]) return null
+
+  return parseCampaign(result[0])
+}
+
+export async function nameExistsForUser(db: SQL, userId: string, name: string): Promise<boolean> {
+  const result = await db`
+    SELECT COUNT(*) as count FROM campaigns
+    WHERE created_by = ${userId} AND LOWER(name) = LOWER(${name}) AND archived_at IS NULL
+    LIMIT 1
+  `
+
+  return result[0].count > 0
+}
+
+export async function archive(db: SQL, id: string): Promise<Campaign | null> {
+  const result = await db`
+    UPDATE campaigns
+    SET archived_at = CURRENT_TIMESTAMP, updated_at = CURRENT_TIMESTAMP
+    WHERE id = ${id}
+    RETURNING *
+  `
+
+  if (!result[0]) return null
+  return parseCampaign(result[0])
+}
+
+export async function unarchive(db: SQL, id: string): Promise<Campaign | null> {
+  const result = await db`
+    UPDATE campaigns
+    SET archived_at = NULL, updated_at = CURRENT_TIMESTAMP
+    WHERE id = ${id}
+    RETURNING *
+  `
+
+  if (!result[0]) return null
+  return parseCampaign(result[0])
+}
+
+export async function countArchivedByUserId(db: SQL, userId: string): Promise<number> {
+  const result = await db`
+    SELECT COUNT(*) as count FROM campaigns c
+    WHERE c.archived_at IS NOT NULL
+      AND (
+        c.created_by = ${userId}
+        OR EXISTS (
+          SELECT 1 FROM campaign_members cm
+          WHERE cm.campaign_id = c.id
+            AND cm.user_id = ${userId}
+            AND cm.accepted_at IS NOT NULL
+        )
+      )
+  `
+
+  return Number(result[0].count)
+}
diff --git a/src/db/users.ts b/src/db/users.ts
index ae8925f..c72b563 100644
--- a/src/db/users.ts
+++ b/src/db/users.ts
@@ -4,6 +4,7 @@ import type { SQL } from "bun"
 export interface User {
   id: string
   email: string
+  name: string | null
   created_at: string
   updated_at: string
 }
@@ -39,3 +40,18 @@ export async function findByEmail(db: SQL, email: string): Promise<User | null>
 
   return (result[0] as User) || null
 }
+
+export interface UpdateUserData {
+  name?: string | null
+}
+
+export async function update(db: SQL, id: string, data: UpdateUserData): Promise<User | null> {
+  const result = await db`
+    UPDATE users
+    SET name = ${data.name ?? null}, updated_at = CURRENT_TIMESTAMP
+    WHERE id = ${id}
+    RETURNING *
+  `
+
+  return (result[0] as User) || null
+}
diff --git a/src/lib/email.ts b/src/lib/email.ts
index 713d3bc..2e98308 100644
--- a/src/lib/email.ts
+++ b/src/lib/email.ts
@@ -1,4 +1,5 @@
-import { config } from "@src/config"
+import { config, isSmtpConfigured } from "@src/config"
+import type { CampaignMemberRole } from "@src/db/campaign_members"
 import { logger } from "@src/lib/logger"
 import type { Transporter } from "nodemailer"
 import nodemailer from "nodemailer"
@@ -11,7 +12,7 @@ let transporter: Transporter | null = null
 export function getTransporter(): Transporter {
   if (!transporter) {
     // Use stream transport in test mode to avoid sending real emails
-    if (config.isTest) {
+    if (config.isTest || !isSmtpConfigured()) {
       transporter = nodemailer.createTransport({
         streamTransport: true,
         newline: "unix",
@@ -179,3 +180,143 @@ Security Notice: This code and link can only be used once and will expire in ${c
     throw new Error("Failed to send email")
   }
 }
+
+export interface SendCampaignInviteEmailParams {
+  to: string
+  campaignName: string
+  inviterEmail: string
+  role: CampaignMemberRole
+  magicLink: string
+}
+
+/**
+ * Send campaign invite email with magic link
+ */
+export async function sendCampaignInviteEmail({
+  to,
+  campaignName,
+  inviterEmail,
+  role,
+  magicLink,
+}: SendCampaignInviteEmailParams): Promise<void> {
+  const transport = getTransporter()
+
+  const roleDisplay = role === "dm" ? "Dungeon Master" : role === "player" ? "Player" : "Viewer"
+
+  const htmlContent = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Campaign Invitation</title>
+  <style>
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      line-height: 1.6;
+      color: #333;
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .container {
+      background: #f8f9fa;
+      border-radius: 8px;
+      padding: 40px;
+      text-align: center;
+    }
+    .campaign-name {
+      font-size: 28px;
+      font-weight: bold;
+      color: #0d6efd;
+      margin: 20px 0;
+    }
+    .role-badge {
+      display: inline-block;
+      background: #198754;
+      color: white;
+      padding: 6px 16px;
+      border-radius: 20px;
+      font-size: 14px;
+      font-weight: 500;
+      margin: 10px 0;
+    }
+    .button {
+      display: inline-block;
+      background: #0d6efd;
+      color: white !important;
+      text-decoration: none;
+      padding: 14px 32px;
+      border-radius: 6px;
+      font-weight: 500;
+      margin: 20px 0;
+    }
+    .footer {
+      margin-top: 40px;
+      font-size: 14px;
+      color: #6c757d;
+      text-align: center;
+    }
+    .info {
+      background: #e7f3ff;
+      border-left: 4px solid #0d6efd;
+      padding: 12px;
+      margin: 20px 0;
+      text-align: left;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>You've Been Invited!</h1>
+
+    <p><strong>${inviterEmail}</strong> has invited you to join their DnD campaign:</p>
+
+    <div class="campaign-name">${campaignName}</div>
+
+    <p>You've been invited as a:</p>
+    <span class="role-badge">${roleDisplay}</span>
+
+    <div style="margin-top: 30px;">
+      <a href="${magicLink}" class="button">View Invitation</a>
+    </div>
+  </div>
+
+  <div class="footer">
+    <p>This invitation was sent from CSheet. If you didn't expect this, you can safely ignore it.</p>
+  </div>
+</body>
+</html>
+  `
+
+  const textContent = `
+You've Been Invited to a Campaign!
+
+${inviterEmail} has invited you to join their DnD campaign: ${campaignName}
+
+You've been invited as a: ${roleDisplay}
+
+Click the link below to view the invitation and join the campaign:
+${magicLink}
+
+---
+This invitation was sent from CSheet. If you didn't expect this, you can safely ignore it.
+  `
+
+  try {
+    await transport.sendMail({
+      from: config.smtpFrom,
+      to,
+      subject: `You're invited to join "${campaignName}" on CSheet`,
+      text: textContent.trim(),
+      html: htmlContent.trim(),
+    })
+
+    logger.info("Campaign invite email sent", { to, campaignName })
+  } catch (error) {
+    logger.error("Failed to send campaign invite email", error as Error, { to, campaignName })
+    throw new Error("Failed to send invite email")
+  }
+}
diff --git a/src/lib/url.ts b/src/lib/url.ts
new file mode 100644
index 0000000..bfb2a84
--- /dev/null
+++ b/src/lib/url.ts
@@ -0,0 +1,11 @@
+import type { Context } from "hono"
+
+/**
+ * Get the base URL from request headers (protocol + host)
+ * Respects x-forwarded-proto for reverse proxies
+ */
+export function getBaseUrl(c: Context): string {
+  const protocol = c.req.header("x-forwarded-proto") || new URL(c.req.url).protocol.replace(":", "")
+  const host = c.req.header("host") || new URL(c.req.url).host
+  return `${protocol}://${host}`
+}
diff --git a/src/middleware.ts b/src/middleware.ts
index 59b8930..4215a76 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -4,9 +4,11 @@ import { authMiddleware } from "./middleware/auth"
 import type { FlashVariables } from "./middleware/flash"
 import { flashMiddleware } from "./middleware/flash"
 import { htmxMiddleware } from "./middleware/htmx"
+import type { NotificationsVariables } from "./middleware/notifications"
+import { notificationsMiddleware } from "./middleware/notifications"
 import { requestLoggingMiddleware } from "./middleware/requestLogging"
 
-type AllVars = AuthVariables & FlashVariables
+type AllVars = AuthVariables & FlashVariables & NotificationsVariables
 
 declare module "hono" {
   interface ContextVariableMap extends AllVars {}
@@ -15,6 +17,7 @@ declare module "hono" {
 export function applyMiddleware(app: Hono) {
   app.use("*", requestLoggingMiddleware)
   app.use("*", authMiddleware)
+  app.use("*", notificationsMiddleware)
   app.use("*", flashMiddleware)
   app.use("*", htmxMiddleware)
 }
diff --git a/src/middleware/notifications.ts b/src/middleware/notifications.ts
new file mode 100644
index 0000000..f6a2795
--- /dev/null
+++ b/src/middleware/notifications.ts
@@ -0,0 +1,33 @@
+import { getDb } from "@src/db"
+import { getNotificationCounts, type NotificationCounts } from "@src/db/campaign_members"
+import { createMiddleware } from "hono/factory"
+
+export type Notifications = NotificationCounts
+
+export interface NotificationsVariables {
+  notifications: Notifications
+}
+
+const defaultNotifications: Notifications = {
+  pendingInvites: 0,
+  pendingViewerInvites: 0,
+  needsCharacter: 0,
+}
+
+export const notificationsMiddleware = createMiddleware<{
+  Variables: NotificationsVariables
+}>(async (c, next) => {
+  const user = c.get("user")
+
+  if (!user) {
+    c.set("notifications", defaultNotifications)
+    await next()
+    return
+  }
+
+  const db = getDb(c)
+  const notifications = await getNotificationCounts(db, user.id)
+  c.set("notifications", notifications)
+
+  await next()
+})
diff --git a/src/routes/auth.test.ts b/src/routes/auth.test.ts
index 76f3cc8..318967e 100644
--- a/src/routes/auth.test.ts
+++ b/src/routes/auth.test.ts
@@ -1,7 +1,10 @@
 import { beforeEach, describe, expect, test } from "bun:test"
 import type { CreateAuthTokenResult } from "@src/db/auth_tokens"
+import type { Campaign } from "@src/db/campaigns"
+import type { User } from "@src/db/users"
 import { useTestApp } from "@src/test/app"
 import { authTokenFactory } from "@src/test/factories/auth_token"
+import { campaignFactory, campaignMemberFactory } from "@src/test/factories/campaign"
 import { userFactory } from "@src/test/factories/user"
 import { expectElement, makeRequest, parseHtml } from "@src/test/http"
 
@@ -433,3 +436,99 @@ describe("OTP rate limiting", () => {
     expect(setCookie).toContain("flash")
   })
 })
+
+describe("GET /invite/view", () => {
+  const testCtx = useTestApp()
+
+  describe("with a valid pending invite token", () => {
+    let dmUser: User
+    let invitedUser: User
+    let campaign: Campaign
+    let inviteToken: string
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      invitedUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      const member = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id, pending: true },
+        testCtx.db
+      )
+      inviteToken = member.invite_token!
+    })
+
+    test("logs in user and redirects to campaigns with info flash", async () => {
+      const response = await makeRequest(testCtx.app, `/invite/view?token=${inviteToken}`)
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/campaigns")
+
+      // Check for auth cookie
+      const setCookie = response.headers.get("Set-Cookie")
+      expect(setCookie).toContain("user_id")
+      expect(setCookie).toContain("flash")
+    })
+  })
+
+  describe("with a soft-deleted invite token", () => {
+    let dmUser: User
+    let invitedUser: User
+    let campaign: Campaign
+    let inviteToken: string
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      invitedUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      const member = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id, pending: true },
+        testCtx.db
+      )
+      inviteToken = member.invite_token!
+      // Soft-delete the invite
+      await testCtx.db`
+        UPDATE campaign_members
+        SET deleted_at = CURRENT_TIMESTAMP
+        WHERE id = ${member.id}
+      `
+    })
+
+    test("logs in user and redirects to campaigns with warning flash", async () => {
+      const response = await makeRequest(testCtx.app, `/invite/view?token=${inviteToken}`)
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/campaigns")
+
+      // Check for auth cookie - user is still logged in
+      const setCookie = response.headers.get("Set-Cookie")
+      expect(setCookie).toContain("user_id")
+      expect(setCookie).toContain("flash")
+    })
+  })
+
+  describe("with an invalid token", () => {
+    test("redirects to login with error", async () => {
+      const response = await makeRequest(testCtx.app, "/invite/view?token=invalid-token")
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/login")
+
+      // Check for error flash message
+      const setCookie = response.headers.get("Set-Cookie")
+      expect(setCookie).toContain("flash")
+    })
+  })
+
+  describe("with no token", () => {
+    test("redirects to login with error", async () => {
+      const response = await makeRequest(testCtx.app, "/invite/view")
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/login")
+
+      // Check for error flash message
+      const setCookie = response.headers.get("Set-Cookie")
+      expect(setCookie).toContain("flash")
+    })
+  })
+})
diff --git a/src/routes/auth.tsx b/src/routes/auth.tsx
index 3786d7b..f306b98 100644
--- a/src/routes/auth.tsx
+++ b/src/routes/auth.tsx
@@ -1,11 +1,14 @@
+import { InviteSwitchAccount } from "@src/components/InviteSwitchAccount"
 import { Login } from "@src/components/Login"
 import { LoginOtp } from "@src/components/LoginOtp"
 import { isSmtpConfigured } from "@src/config"
 import { getDb } from "@src/db"
 import * as authTokens from "@src/db/auth_tokens"
+import * as campaignMembers from "@src/db/campaign_members"
 import { create, findByEmail } from "@src/db/users"
 import { sendOtpEmail } from "@src/lib/email"
 import { logger } from "@src/lib/logger"
+import { getBaseUrl } from "@src/lib/url"
 import { clearAuthCookie, setAuthCookie } from "@src/middleware/auth"
 import { setFlashMsg } from "@src/middleware/flash"
 import { Hono } from "hono"
@@ -59,9 +62,7 @@ authRoutes.post("/login", async (c) => {
   const token = await authTokens.create(db, email)
 
   // Build magic link URL
-  const protocol = c.req.header("x-forwarded-proto") || new URL(c.req.url).protocol.replace(":", "")
-  const host = c.req.header("host") || new URL(c.req.url).host
-  const magicLink = new URL(`${protocol}://${host}/login/token`)
+  const magicLink = new URL(`${getBaseUrl(c)}/login/token`)
   magicLink.searchParams.set("token", token.sessionToken)
   if (redirect) {
     magicLink.searchParams.set("redirect", redirect)
@@ -174,5 +175,66 @@ authRoutes.get("/login/token", async (c) => {
 authRoutes.get("/logout", async (c) => {
   clearAuthCookie(c)
   await setFlashMsg(c, "You have been logged out.", "warning")
-  return c.redirect("/")
+
+  // Support redirect param for flows like invite account switching
+  const redirect = c.req.query("redirect")
+  return c.redirect(redirect || "/")
+})
+
+// View campaign invite via magic link
+// Token is NOT consumed here - it's just proof of email access (like OTP)
+// Accept/decline happens via /campaigns/:id/accept and /campaigns/:id/decline
+authRoutes.get("/invite/view", async (c) => {
+  const token = c.req.query("token")
+
+  if (!token) {
+    await setFlashMsg(c, "Invalid invitation link.", "error")
+    return c.redirect("/login")
+  }
+
+  // Find pending invite by token
+  const db = getDb(c)
+  const tokenResult = await campaignMembers.findByInviteToken(db, token)
+
+  if (!tokenResult) {
+    await setFlashMsg(c, "Invalid or expired invitation link.", "error")
+    return c.redirect("/login")
+  }
+
+  const currentUser = c.var.user
+
+  // Flow 2: Logged in as different user - show switch account page
+  if (currentUser && currentUser.email !== tokenResult.email) {
+    return c.render(
+      <InviteSwitchAccount
+        currentEmail={currentUser.email!}
+        inviteEmail={tokenResult.email}
+        token={token}
+      />,
+      { title: "Switch Account?" }
+    )
+  }
+
+  // Flow 1: Not logged in, or logged in as correct user
+  // Log in as the invited email and redirect to campaigns
+  let user = await findByEmail(db, tokenResult.email)
+  if (!user) {
+    user = await create(db, tokenResult.email)
+    logger.info("Created user from invite", { email: tokenResult.email })
+  }
+
+  await setAuthCookie(c, user.id)
+
+  // Check if invite was deleted - show warning instead of normal message
+  if (tokenResult.deletedAt) {
+    await setFlashMsg(
+      c,
+      "This invitation has been deleted. Contact the campaign organizer if you believe this is a mistake.",
+      "warning"
+    )
+  } else {
+    await setFlashMsg(c, "You have a pending campaign invite - accept or decline below", "info")
+  }
+
+  return c.redirect("/campaigns")
 })
diff --git a/src/routes/campaigns.changeRole.test.ts b/src/routes/campaigns.changeRole.test.ts
new file mode 100644
index 0000000..540da92
--- /dev/null
+++ b/src/routes/campaigns.changeRole.test.ts
@@ -0,0 +1,531 @@
+import { beforeEach, describe, expect, test } from "bun:test"
+import type { CampaignMember } from "@src/db/campaign_members"
+import type { Campaign } from "@src/db/campaigns"
+import type { Character } from "@src/db/characters"
+import type { User } from "@src/db/users"
+import { useTestApp } from "@src/test/app"
+import {
+  campaignCharacterFactory,
+  campaignFactory,
+  campaignMemberFactory,
+} from "@src/test/factories/campaign"
+import { characterFactory } from "@src/test/factories/character"
+import { userFactory } from "@src/test/factories/user"
+import { makeRequest, parseHtml } from "@src/test/http"
+
+describe("GET /campaigns/:id/change-role (self)", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a DM with multiple DMs", () => {
+    let dm1: User
+    let dm2: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dm1 = await userFactory.create({}, testCtx.db)
+      dm2 = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm1.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: dm2.id, invited_by: dm1.id, role: "dm" },
+        testCtx.db
+      )
+    })
+
+    test("returns the change role form", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+        user: dm1,
+      })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("Change My Role")
+      expect(body).toContain("Player")
+      expect(body).toContain("Viewer")
+    })
+
+    test("shows warning about losing management access", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+        user: dm1,
+      })
+
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("won't be able to manage")
+    })
+  })
+
+  describe("when user is sole DM", () => {
+    let dm: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+    })
+
+    test("shows warning that role cannot be changed", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+        user: dm,
+      })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("only DM")
+    })
+  })
+
+  describe("when user is a player", () => {
+    let dm: User
+    let player: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      player = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: player.id, invited_by: dm.id, role: "player" },
+        testCtx.db
+      )
+    })
+
+    test("returns 403", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+        user: player,
+      })
+
+      expect(response.status).toBe(403)
+    })
+  })
+})
+
+describe("POST /campaigns/:id/change-role (self)", () => {
+  const testCtx = useTestApp()
+
+  describe("DM changing to player", () => {
+    let dm1: User
+    let dm2: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dm1 = await userFactory.create({}, testCtx.db)
+      dm2 = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm1.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: dm2.id, invited_by: dm1.id, role: "dm" },
+        testCtx.db
+      )
+    })
+
+    test("changes role successfully", async () => {
+      const formData = new FormData()
+      formData.append("newRole", "player")
+
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+        user: dm1,
+        method: "POST",
+        body: formData,
+      })
+
+      expect(response.status).toBe(204)
+      expect(response.headers.get("HX-Refresh")).toBe("true")
+
+      // Verify role changed in database
+      const members = await testCtx.db`
+        SELECT * FROM campaign_members
+        WHERE campaign_id = ${campaign.id} AND user_id = ${dm1.id}
+      `
+      expect(members[0].role).toBe("player")
+    })
+
+    describe("with NPCs", () => {
+      let npcCharacter: Character
+
+      beforeEach(async () => {
+        npcCharacter = await characterFactory.create({ user_id: dm1.id }, testCtx.db)
+        await campaignCharacterFactory.create(
+          {
+            campaign_id: campaign.id,
+            character_id: npcCharacter.id,
+            added_by: dm1.id,
+            revealed_at: null, // Hidden NPC
+          },
+          testCtx.db
+        )
+      })
+
+      test("reveals NPCs when changing role", async () => {
+        const formData = new FormData()
+        formData.append("newRole", "player")
+
+        await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+          user: dm1,
+          method: "POST",
+          body: formData,
+        })
+
+        // Verify NPC is now revealed
+        const chars = await testCtx.db`
+          SELECT * FROM campaign_characters
+          WHERE campaign_id = ${campaign.id} AND character_id = ${npcCharacter.id}
+        `
+        expect(chars[0].revealed_at).not.toBeNull()
+      })
+    })
+  })
+
+  describe("DM changing to viewer", () => {
+    let dm1: User
+    let dm2: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dm1 = await userFactory.create({}, testCtx.db)
+      dm2 = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm1.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: dm2.id, invited_by: dm1.id, role: "dm" },
+        testCtx.db
+      )
+    })
+
+    test("changes role successfully when no NPCs", async () => {
+      const formData = new FormData()
+      formData.append("newRole", "viewer")
+
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+        user: dm1,
+        method: "POST",
+        body: formData,
+      })
+
+      expect(response.status).toBe(204)
+
+      const members = await testCtx.db`
+        SELECT * FROM campaign_members
+        WHERE campaign_id = ${campaign.id} AND user_id = ${dm1.id}
+      `
+      expect(members[0].role).toBe("viewer")
+    })
+
+    describe("with NPCs", () => {
+      beforeEach(async () => {
+        const npcCharacter = await characterFactory.create({ user_id: dm1.id }, testCtx.db)
+        await campaignCharacterFactory.create(
+          {
+            campaign_id: campaign.id,
+            character_id: npcCharacter.id,
+            added_by: dm1.id,
+            revealed_at: null, // Hidden NPC
+          },
+          testCtx.db
+        )
+      })
+
+      test("returns error - must remove NPCs first", async () => {
+        const formData = new FormData()
+        formData.append("newRole", "viewer")
+
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+          user: dm1,
+          method: "POST",
+          body: formData,
+        })
+
+        expect(response.status).toBe(200) // Returns form with error
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("Remove your NPCs")
+      })
+    })
+  })
+
+  describe("sole DM trying to change role", () => {
+    let dm: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+    })
+
+    test("returns error", async () => {
+      const formData = new FormData()
+      formData.append("newRole", "player")
+
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/change-role`, {
+        user: dm,
+        method: "POST",
+        body: formData,
+      })
+
+      expect(response.status).toBe(200) // Returns form with error
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("only DM")
+    })
+  })
+})
+
+describe("GET /campaigns/:id/members/:memberId/change-role (DM changing other)", () => {
+  const testCtx = useTestApp()
+
+  describe("DM changing player role", () => {
+    let dm: User
+    let player: User
+    let campaign: Campaign
+    let playerMember: CampaignMember
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      player = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+      playerMember = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: player.id, invited_by: dm.id, role: "player" },
+        testCtx.db
+      )
+    })
+
+    test("returns the change role form", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/members/${playerMember.id}/change-role`,
+        { user: dm }
+      )
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("Change Role")
+      expect(body).toContain(player.email)
+    })
+  })
+
+  describe("DM trying to change another DM's role", () => {
+    let dm1: User
+    let dm2: User
+    let campaign: Campaign
+    let dm2Member: CampaignMember
+
+    beforeEach(async () => {
+      dm1 = await userFactory.create({}, testCtx.db)
+      dm2 = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm1.id }, testCtx.db)
+      dm2Member = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: dm2.id, invited_by: dm1.id, role: "dm" },
+        testCtx.db
+      )
+    })
+
+    test("returns error", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/members/${dm2Member.id}/change-role`,
+        { user: dm1 }
+      )
+
+      expect(response.status).toBe(400)
+    })
+  })
+
+  describe("player trying to change another's role", () => {
+    let dm: User
+    let player1: User
+    let player2: User
+    let campaign: Campaign
+    let player2Member: CampaignMember
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      player1 = await userFactory.create({}, testCtx.db)
+      player2 = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: player1.id, invited_by: dm.id, role: "player" },
+        testCtx.db
+      )
+      player2Member = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: player2.id, invited_by: dm.id, role: "player" },
+        testCtx.db
+      )
+    })
+
+    test("returns 403", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/members/${player2Member.id}/change-role`,
+        { user: player1 }
+      )
+
+      expect(response.status).toBe(403)
+    })
+  })
+})
+
+describe("POST /campaigns/:id/members/:memberId/change-role (DM changing other)", () => {
+  const testCtx = useTestApp()
+
+  describe("DM promoting player to DM", () => {
+    let dm: User
+    let player: User
+    let campaign: Campaign
+    let playerMember: CampaignMember
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      player = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+      playerMember = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: player.id, invited_by: dm.id, role: "player" },
+        testCtx.db
+      )
+    })
+
+    test("changes role to DM", async () => {
+      const formData = new FormData()
+      formData.append("newRole", "dm")
+
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/members/${playerMember.id}/change-role`,
+        { user: dm, method: "POST", body: formData }
+      )
+
+      expect(response.status).toBe(204)
+
+      const members = await testCtx.db`
+        SELECT * FROM campaign_members WHERE id = ${playerMember.id}
+      `
+      expect(members[0].role).toBe("dm")
+    })
+
+    describe("player has characters", () => {
+      beforeEach(async () => {
+        const character = await characterFactory.create({ user_id: player.id }, testCtx.db)
+        await campaignCharacterFactory.create(
+          { campaign_id: campaign.id, character_id: character.id, added_by: player.id },
+          testCtx.db
+        )
+      })
+
+      test("still allows promotion (characters become NPCs)", async () => {
+        const formData = new FormData()
+        formData.append("newRole", "dm")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${playerMember.id}/change-role`,
+          { user: dm, method: "POST", body: formData }
+        )
+
+        expect(response.status).toBe(204)
+      })
+    })
+  })
+
+  describe("DM demoting player to viewer", () => {
+    let dm: User
+    let player: User
+    let campaign: Campaign
+    let playerMember: CampaignMember
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      player = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+      playerMember = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: player.id, invited_by: dm.id, role: "player" },
+        testCtx.db
+      )
+    })
+
+    test("changes role to viewer when no characters", async () => {
+      const formData = new FormData()
+      formData.append("newRole", "viewer")
+
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/members/${playerMember.id}/change-role`,
+        { user: dm, method: "POST", body: formData }
+      )
+
+      expect(response.status).toBe(204)
+
+      const members = await testCtx.db`
+        SELECT * FROM campaign_members WHERE id = ${playerMember.id}
+      `
+      expect(members[0].role).toBe("viewer")
+    })
+
+    describe("player has characters", () => {
+      beforeEach(async () => {
+        const character = await characterFactory.create({ user_id: player.id }, testCtx.db)
+        await campaignCharacterFactory.create(
+          { campaign_id: campaign.id, character_id: character.id, added_by: player.id },
+          testCtx.db
+        )
+      })
+
+      test("returns error - must remove characters first", async () => {
+        const formData = new FormData()
+        formData.append("newRole", "viewer")
+
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${playerMember.id}/change-role`,
+          { user: dm, method: "POST", body: formData }
+        )
+
+        expect(response.status).toBe(200) // Returns form with error
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("Remove")
+        expect(body).toContain("characters")
+      })
+    })
+  })
+
+  describe("DM promoting viewer to player", () => {
+    let dm: User
+    let viewer: User
+    let campaign: Campaign
+    let viewerMember: CampaignMember
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      viewer = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+      viewerMember = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: viewer.id, invited_by: dm.id, role: "viewer" },
+        testCtx.db
+      )
+    })
+
+    test("changes role to player", async () => {
+      const formData = new FormData()
+      formData.append("newRole", "player")
+
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/members/${viewerMember.id}/change-role`,
+        { user: dm, method: "POST", body: formData }
+      )
+
+      expect(response.status).toBe(204)
+
+      const members = await testCtx.db`
+        SELECT * FROM campaign_members WHERE id = ${viewerMember.id}
+      `
+      expect(members[0].role).toBe("player")
+    })
+  })
+})
diff --git a/src/routes/campaigns.test.ts b/src/routes/campaigns.test.ts
new file mode 100644
index 0000000..c779aaa
--- /dev/null
+++ b/src/routes/campaigns.test.ts
@@ -0,0 +1,2553 @@
+import { beforeEach, describe, expect, test } from "bun:test"
+import { faker } from "@faker-js/faker"
+import type { Campaign } from "@src/db/campaigns"
+import type { Character } from "@src/db/characters"
+import type { User } from "@src/db/users"
+import { useTestApp } from "@src/test/app"
+import {
+  campaignCharacterFactory,
+  campaignFactory,
+  campaignMemberFactory,
+} from "@src/test/factories/campaign"
+import { characterFactory } from "@src/test/factories/character"
+import { userFactory } from "@src/test/factories/user"
+import { elementExists, expectElement, makeRequest, parseHtml } from "@src/test/http"
+
+describe("GET /campaigns", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is not authenticated", () => {
+    test("redirects to login page", async () => {
+      const response = await makeRequest(testCtx.app, "/campaigns")
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toContain("/login")
+    })
+  })
+
+  describe("when user is authenticated", () => {
+    let user: User
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+    })
+
+    describe("with no campaigns", () => {
+      test("returns status 200 and shows empty state", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        expect(response.status).toBe(200)
+
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("You haven't created or joined any campaigns yet")
+      })
+    })
+
+    describe("with a campaign", () => {
+      let campaign: Campaign
+
+      beforeEach(async () => {
+        campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+      })
+
+      test("returns status 200", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        expect(response.status).toBe(200)
+      })
+
+      test("renders the campaigns list page", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        const document = await parseHtml(response)
+
+        const title = expectElement(document, "title")
+        expect(title.textContent).toContain("My Campaigns")
+      })
+
+      test("displays the campaign name", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain(campaign.name)
+      })
+
+      test("displays archive button for active campaign", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        const document = await parseHtml(response)
+        const archiveButton = expectElement(document, `[data-testid="archive-${campaign.id}"]`)
+
+        expect(archiveButton.getAttribute("hx-post")).toBe(`/campaigns/${campaign.id}/archive`)
+      })
+    })
+  })
+})
+
+describe("GET /campaigns?show_archived=true", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is authenticated", () => {
+    let user: User
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+    })
+
+    describe("with archived campaigns", () => {
+      let campaign: Campaign
+
+      beforeEach(async () => {
+        campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+        // Archive the campaign
+        await testCtx.db`UPDATE campaigns SET archived_at = CURRENT_TIMESTAMP WHERE id = ${campaign.id}`
+      })
+
+      test("displays archived campaigns", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns?show_archived=true", { user })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain(campaign.name)
+        expect(body).toContain("Archived")
+      })
+
+      test("shows restore button", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns?show_archived=true", { user })
+
+        const document = await parseHtml(response)
+        const restoreButton = expectElement(document, `[data-testid="unarchive-${campaign.id}"]`)
+
+        expect(restoreButton.getAttribute("hx-post")).toBe(`/campaigns/${campaign.id}/unarchive`)
+        expect(restoreButton.getAttribute("title")).toBe("Restore campaign")
+      })
+
+      test("checkbox is checked", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns?show_archived=true", { user })
+
+        const document = await parseHtml(response)
+        const checkbox = expectElement(document, "#showArchivedCheckbox")
+
+        expect(checkbox.hasAttribute("checked")).toBe(true)
+      })
+    })
+
+    describe("with both active and archived campaigns", () => {
+      let activeCampaign: Campaign
+      let archivedCampaign: Campaign
+
+      beforeEach(async () => {
+        activeCampaign = await campaignFactory.create(
+          { created_by: user.id, name: "Active Campaign" },
+          testCtx.db
+        )
+        archivedCampaign = await campaignFactory.create(
+          { created_by: user.id, name: "Archived Campaign" },
+          testCtx.db
+        )
+        await testCtx.db`UPDATE campaigns SET archived_at = CURRENT_TIMESTAMP WHERE id = ${archivedCampaign.id}`
+      })
+
+      test("displays both campaigns when show_archived=true", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns?show_archived=true", { user })
+
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain(activeCampaign.name)
+        expect(body).toContain(archivedCampaign.name)
+      })
+
+      test("displays only active campaign when show_archived is not set", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain(activeCampaign.name)
+        expect(body).not.toContain(archivedCampaign.name)
+      })
+
+      test("shows checkbox when archived campaigns exist", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        const document = await parseHtml(response)
+        const checkbox = expectElement(document, "#showArchivedCheckbox")
+
+        expect(checkbox.hasAttribute("checked")).toBe(false)
+        expect(checkbox.getAttribute("hx-get")).toBe("/campaigns?show_archived=true")
+      })
+    })
+
+    describe("as a player member of an archived campaign", () => {
+      let dmUser: User
+      let campaign: Campaign
+
+      beforeEach(async () => {
+        dmUser = await userFactory.create({}, testCtx.db)
+        campaign = await campaignFactory.create(
+          { created_by: dmUser.id, name: "DMs Archived Campaign" },
+          testCtx.db
+        )
+        // Add current user as player member
+        await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: user.id, invited_by: dmUser.id },
+          testCtx.db
+        )
+        // Archive the campaign
+        await testCtx.db`UPDATE campaigns SET archived_at = CURRENT_TIMESTAMP WHERE id = ${campaign.id}`
+      })
+
+      test("can see archived campaign in list when show_archived=true", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns?show_archived=true", { user })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain(campaign.name)
+      })
+
+      test("does not see archived campaign without show_archived", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).not.toContain(campaign.name)
+      })
+
+      test("shows archived checkbox because player has archived campaigns", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+        const document = await parseHtml(response)
+        const checkbox = expectElement(document, "#showArchivedCheckbox")
+
+        expect(checkbox).toBeDefined()
+      })
+    })
+  })
+})
+
+describe("GET /campaigns/:id", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is not authenticated", () => {
+    test("redirects to login", async () => {
+      const user = await userFactory.create({}, testCtx.db)
+      const campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`)
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toContain("/login")
+    })
+  })
+
+  describe("when user is authenticated", () => {
+    let user: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+    })
+
+    test("renders the campaign page", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, { user })
+
+      expect(response.status).toBe(200)
+      const body = await response.text()
+      expect(body).toContain(campaign.name)
+    })
+
+    describe("when user is not a member", () => {
+      let otherUser: User
+
+      beforeEach(async () => {
+        otherUser = await userFactory.create({}, testCtx.db)
+      })
+
+      test("returns 403 forbidden", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, {
+          user: otherUser,
+        })
+
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/campaigns")
+      })
+    })
+
+    describe("when campaign does not exist", () => {
+      test("returns 404", async () => {
+        const response = await makeRequest(testCtx.app, "/campaigns/nonexistent", { user })
+
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/campaigns")
+      })
+    })
+
+    describe("when user is a player of an archived campaign", () => {
+      let playerUser: User
+
+      beforeEach(async () => {
+        playerUser = await userFactory.create({}, testCtx.db)
+        // Add player member
+        await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: playerUser.id, invited_by: user.id },
+          testCtx.db
+        )
+        // Archive the campaign
+        await testCtx.db`UPDATE campaigns SET archived_at = CURRENT_TIMESTAMP WHERE id = ${campaign.id}`
+      })
+
+      test("player can still view the archived campaign", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, {
+          user: playerUser,
+        })
+
+        expect(response.status).toBe(200)
+        const body = await response.text()
+        expect(body).toContain(campaign.name)
+      })
+    })
+
+    describe("with soft-deleted invites", () => {
+      let invitedUser: User
+
+      beforeEach(async () => {
+        invitedUser = await userFactory.create({}, testCtx.db)
+        // Create a pending invite and soft-delete it
+        await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: user.id, pending: true },
+          testCtx.db
+        )
+        await testCtx.db`
+          UPDATE campaign_members
+          SET deleted_at = CURRENT_TIMESTAMP
+          WHERE campaign_id = ${campaign.id} AND user_id = ${invitedUser.id}
+        `
+      })
+
+      test("soft-deleted members do not appear in the campaign view", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, { user })
+
+        expect(response.status).toBe(200)
+        const body = await response.text()
+        // The soft-deleted user's email should not appear
+        expect(body).not.toContain(invitedUser.email)
+      })
+    })
+  })
+})
+
+describe("POST /campaigns/:id/archive", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is authenticated", () => {
+    let user: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+    })
+
+    test("archives the campaign", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/archive`, {
+        user,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(204)
+
+      // Verify campaign is archived in database
+      const result = await testCtx.db`
+        SELECT archived_at FROM campaigns WHERE id = ${campaign.id}
+      `
+      expect(result[0].archived_at).not.toBeNull()
+    })
+
+    test("redirects to campaigns page with show_archived=true", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/archive`, {
+        user,
+        method: "POST",
+      })
+
+      expect(response.headers.get("HX-Redirect")).toBe("/campaigns?show_archived=true")
+    })
+
+    test("sets success flash message", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/archive`, {
+        user,
+        method: "POST",
+      })
+
+      const setCookie = response.headers.get("Set-Cookie")
+      expect(setCookie).toContain("flash")
+    })
+
+    describe("when campaign is already archived", () => {
+      beforeEach(async () => {
+        await testCtx.db`UPDATE campaigns SET archived_at = CURRENT_TIMESTAMP WHERE id = ${campaign.id}`
+      })
+
+      test("returns error", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/archive`, {
+          user,
+          method: "POST",
+        })
+
+        expect(response.status).toBe(400)
+        const setCookie = response.headers.get("Set-Cookie")
+        expect(setCookie).toContain("flash")
+      })
+    })
+
+    describe("when user is not a DM", () => {
+      let playerUser: User
+
+      beforeEach(async () => {
+        playerUser = await userFactory.create({}, testCtx.db)
+        // Add as player member
+        await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: playerUser.id, invited_by: user.id },
+          testCtx.db
+        )
+      })
+
+      test("returns 403 forbidden", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/archive`, {
+          user: playerUser,
+          method: "POST",
+        })
+
+        expect(response.status).toBe(403)
+      })
+    })
+
+    describe("when user is not a member", () => {
+      let otherUser: User
+
+      beforeEach(async () => {
+        otherUser = await userFactory.create({}, testCtx.db)
+      })
+
+      test("returns unauthorized", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/archive`, {
+          user: otherUser,
+          method: "POST",
+        })
+
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/campaigns")
+      })
+    })
+  })
+})
+
+describe("POST /campaigns/:id/unarchive", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is authenticated", () => {
+    let user: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+      // Archive the campaign
+      await testCtx.db`UPDATE campaigns SET archived_at = CURRENT_TIMESTAMP WHERE id = ${campaign.id}`
+    })
+
+    test("unarchives the campaign", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/unarchive`, {
+        user,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(204)
+
+      // Verify campaign is unarchived in database
+      const result = await testCtx.db`
+        SELECT archived_at FROM campaigns WHERE id = ${campaign.id}
+      `
+      expect(result[0].archived_at).toBeNull()
+    })
+
+    test("redirects to campaigns page", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/unarchive`, {
+        user,
+        method: "POST",
+      })
+
+      expect(response.headers.get("HX-Redirect")).toBe("/campaigns")
+    })
+
+    test("sets success flash message", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/unarchive`, {
+        user,
+        method: "POST",
+      })
+
+      const setCookie = response.headers.get("Set-Cookie")
+      expect(setCookie).toContain("flash")
+    })
+
+    describe("when campaign is already active", () => {
+      beforeEach(async () => {
+        await testCtx.db`UPDATE campaigns SET archived_at = NULL WHERE id = ${campaign.id}`
+      })
+
+      test("returns error", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/unarchive`, {
+          user,
+          method: "POST",
+        })
+
+        expect(response.status).toBe(400)
+      })
+    })
+
+    describe("when campaign name is already in use", () => {
+      beforeEach(async () => {
+        // Create another active campaign with the same name
+        await campaignFactory.create({ created_by: user.id, name: campaign.name }, testCtx.db)
+      })
+
+      test("returns error", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/unarchive`, {
+          user,
+          method: "POST",
+        })
+
+        expect(response.status).toBe(400)
+        const setCookie = response.headers.get("Set-Cookie")
+        expect(setCookie).toContain("flash")
+      })
+    })
+
+    describe("when user is not a DM", () => {
+      let playerUser: User
+
+      beforeEach(async () => {
+        playerUser = await userFactory.create({}, testCtx.db)
+        // Add as player member
+        await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: playerUser.id, invited_by: user.id },
+          testCtx.db
+        )
+      })
+
+      test("returns 403 forbidden", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/unarchive`, {
+          user: playerUser,
+          method: "POST",
+        })
+
+        expect(response.status).toBe(403)
+      })
+    })
+
+    describe("when user is not a member", () => {
+      let otherUser: User
+
+      beforeEach(async () => {
+        otherUser = await userFactory.create({}, testCtx.db)
+      })
+
+      test("returns unauthorized", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/unarchive`, {
+          user: otherUser,
+          method: "POST",
+        })
+
+        expect(response.status).toBe(302)
+        expect(response.headers.get("Location")).toBe("/campaigns")
+      })
+    })
+  })
+})
+
+describe("Campaign archiving - name reuse", () => {
+  const testCtx = useTestApp()
+
+  describe("when a campaign is archived", () => {
+    let user: User
+    let archivedCampaign: Campaign
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      archivedCampaign = await campaignFactory.create(
+        { created_by: user.id, name: "Test Campaign" },
+        testCtx.db
+      )
+      // Archive the campaign
+      await testCtx.db`UPDATE campaigns SET archived_at = CURRENT_TIMESTAMP WHERE id = ${archivedCampaign.id}`
+    })
+
+    test("allows creating a new campaign with the same name", async () => {
+      const newCampaign = await campaignFactory.create(
+        { created_by: user.id, name: "Test Campaign" },
+        testCtx.db
+      )
+
+      expect(newCampaign.name).toBe("Test Campaign")
+      expect(newCampaign.id).not.toBe(archivedCampaign.id)
+    })
+
+    test("archived campaign is not in active campaign list", async () => {
+      const response = await makeRequest(testCtx.app, "/campaigns", { user })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("You haven't created or joined any campaigns yet")
+      // Should show checkbox since archived campaigns exist
+      expect(body).toContain("Show archived campaigns")
+    })
+  })
+})
+
+describe("GET /campaigns/:id/invite", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a DM", () => {
+    let user: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+    })
+
+    test("returns the invite modal form", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, { user })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("Invite Member")
+      expect(body).toContain("Email Address")
+    })
+  })
+
+  describe("when user is a player", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+    })
+
+    test("redirects with error flash", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+        user: playerUser,
+      })
+
+      expect(response.status).toBe(403)
+      expect(response.headers.get("HX-Redirect")).toBe(`/campaigns/${campaign.id}`)
+    })
+  })
+})
+
+describe("POST /campaigns/:id/invite", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a DM", () => {
+    let user: User
+    let campaign: Campaign
+    let formData: FormData
+    let inviteEmail: string
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+
+      inviteEmail = "newplayer@example.com"
+      formData = new FormData()
+      formData.append("email", inviteEmail)
+      formData.append("role", "player")
+    })
+
+    test("creates an invite and returns success", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+        user,
+        method: "POST",
+        body: formData,
+      })
+
+      // Success returns 204 with HX-Refresh to reload the page
+      expect(response.status).toBe(204)
+      expect(response.headers.get("HX-Refresh")).toBe("true")
+      expect(response.headers.get("HX-Trigger")).toBe("closeModal")
+    })
+
+    test("creates a campaign member with pending status", async () => {
+      await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+        user,
+        method: "POST",
+        body: formData,
+      })
+
+      // Check that a pending member was created
+      const members = await testCtx.db`
+        SELECT cm.*, u.email
+        FROM campaign_members cm
+        JOIN users u ON u.id = cm.user_id
+        WHERE cm.campaign_id = ${campaign.id} AND u.email = ${inviteEmail}
+      `
+
+      expect(members.length).toBe(1)
+      expect(members[0].accepted_at).toBeNull()
+      expect(members[0].role).toBe("player")
+    })
+
+    describe("when email is already a member", () => {
+      let existingMemberEmail: string
+
+      beforeEach(async () => {
+        // Create a member with a unique email for this test case
+        existingMemberEmail = faker.internet.email()
+        const existingUser = await userFactory.create({ email: existingMemberEmail }, testCtx.db)
+        await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: existingUser.id, invited_by: user.id },
+          testCtx.db
+        )
+        // Update formData to use this existing member's email
+        formData = new FormData()
+        formData.append("email", existingMemberEmail)
+        formData.append("role", "player")
+      })
+
+      test("shows error message", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+          user,
+          method: "POST",
+          body: formData,
+        })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("already a member")
+      })
+    })
+
+    describe("when member was previously removed", () => {
+      let removedUser: User
+
+      beforeEach(async () => {
+        removedUser = await userFactory.create({}, testCtx.db)
+        const member = await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: removedUser.id, invited_by: user.id },
+          testCtx.db
+        )
+        // Remove the member (soft delete)
+        await testCtx.db`
+          UPDATE campaign_members
+          SET deleted_at = CURRENT_TIMESTAMP
+          WHERE id = ${member.id}
+        `
+
+        // Update formData to use removed user's email
+        formData = new FormData()
+        formData.append("email", removedUser.email!)
+        formData.append("role", "player")
+      })
+
+      test("shows error and re-invite checkbox", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+          user,
+          method: "POST",
+          body: formData,
+        })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("previously removed")
+        // Should show the re-invite checkbox
+        expect(elementExists(document, 'input[name="forceReinvite"]')).toBe(true)
+      })
+
+      test("re-invites when forceReinvite is checked", async () => {
+        formData.append("forceReinvite", "on")
+
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+          user,
+          method: "POST",
+          body: formData,
+        })
+
+        expect(response.status).toBe(204)
+        expect(response.headers.get("HX-Refresh")).toBe("true")
+
+        // Verify the member was reset (deleted_at cleared)
+        const members = await testCtx.db`
+          SELECT * FROM campaign_members
+          WHERE campaign_id = ${campaign.id} AND user_id = ${removedUser.id}
+        `
+        expect(members.length).toBe(1)
+        expect(members[0].deleted_at).toBeNull()
+        expect(members[0].accepted_at).toBeNull()
+      })
+    })
+
+    describe("when user has previously declined", () => {
+      let declinedUser: User
+
+      beforeEach(async () => {
+        declinedUser = await userFactory.create({}, testCtx.db)
+        await campaignMemberFactory.create(
+          {
+            campaign_id: campaign.id,
+            user_id: declinedUser.id,
+            invited_by: user.id,
+            pending: true,
+          },
+          testCtx.db
+        )
+        // Decline the invite
+        await testCtx.db`
+          UPDATE campaign_members
+          SET declined_at = CURRENT_TIMESTAMP
+          WHERE campaign_id = ${campaign.id} AND user_id = ${declinedUser.id}
+        `
+
+        // Update formData to use declined user's email
+        formData.set("email", declinedUser.email!)
+      })
+
+      test("shows error and re-invite checkbox", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+          user,
+          method: "POST",
+          body: formData,
+        })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("previously declined")
+        // Should show the re-invite checkbox
+        const checkbox = document.querySelector("#force-reinvite")
+        expect(checkbox).not.toBeNull()
+      })
+
+      describe("when forceReinvite is checked", () => {
+        beforeEach(() => {
+          formData.append("forceReinvite", "on")
+        })
+
+        test("re-invites successfully", async () => {
+          const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+            user,
+            method: "POST",
+            body: formData,
+          })
+
+          expect(response.status).toBe(204)
+          expect(response.headers.get("HX-Refresh")).toBe("true")
+          expect(response.headers.get("HX-Trigger")).toBe("closeModal")
+        })
+
+        test("resets declined_at and generates new token", async () => {
+          await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+            user,
+            method: "POST",
+            body: formData,
+          })
+
+          const members = await testCtx.db`
+            SELECT * FROM campaign_members
+            WHERE campaign_id = ${campaign.id} AND user_id = ${declinedUser.id}
+          `
+
+          expect(members.length).toBe(1)
+          expect(members[0].declined_at).toBeNull()
+          expect(members[0].accepted_at).toBeNull()
+          expect(members[0].invite_token).not.toBeNull()
+        })
+
+        test("updates invited_by to current user", async () => {
+          // Create another DM to re-invite
+          const otherDm = await userFactory.create({}, testCtx.db)
+          await campaignMemberFactory.create(
+            { campaign_id: campaign.id, user_id: otherDm.id, invited_by: user.id, role: "dm" },
+            testCtx.db
+          )
+
+          await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+            user: otherDm,
+            method: "POST",
+            body: formData,
+          })
+
+          const members = await testCtx.db`
+            SELECT * FROM campaign_members
+            WHERE campaign_id = ${campaign.id} AND user_id = ${declinedUser.id}
+          `
+
+          expect(members[0].invited_by).toBe(otherDm.id)
+        })
+      })
+    })
+  })
+
+  describe("when user is not a DM", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let formData: FormData
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+
+      formData = new FormData()
+      formData.append("email", "newplayer@example.com")
+      formData.append("role", "player")
+    })
+
+    test("redirects with error flash", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+        user: playerUser,
+        method: "POST",
+        body: formData,
+      })
+
+      expect(response.status).toBe(403)
+      expect(response.headers.get("HX-Redirect")).toBe(`/campaigns/${campaign.id}`)
+    })
+  })
+})
+
+describe("POST /campaigns/:id/accept", () => {
+  const testCtx = useTestApp()
+
+  describe("when user has a pending invite", () => {
+    let dmUser: User
+    let invitedUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      invitedUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      // Create pending invite
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id, pending: true },
+        testCtx.db
+      )
+    })
+
+    test("accepts the invite and redirects to campaign", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/accept`, {
+        user: invitedUser,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(200)
+      expect(response.headers.get("HX-Redirect")).toBe(`/campaigns/${campaign.id}`)
+    })
+
+    test("updates the membership to accepted", async () => {
+      await makeRequest(testCtx.app, `/campaigns/${campaign.id}/accept`, {
+        user: invitedUser,
+        method: "POST",
+      })
+
+      const members = await testCtx.db`
+        SELECT * FROM campaign_members
+        WHERE campaign_id = ${campaign.id} AND user_id = ${invitedUser.id}
+      `
+
+      expect(members[0].accepted_at).not.toBeNull()
+    })
+  })
+
+  describe("when user has no invite", () => {
+    let dmUser: User
+    let otherUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      otherUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+    })
+
+    test("returns 400 with error", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/accept`, {
+        user: otherUser,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(400)
+      expect(response.headers.get("HX-Redirect")).toBe("/campaigns")
+    })
+  })
+})
+
+describe("POST /campaigns/:id/decline", () => {
+  const testCtx = useTestApp()
+
+  describe("when user has a pending invite", () => {
+    let dmUser: User
+    let invitedUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      invitedUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      // Create pending invite
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id, pending: true },
+        testCtx.db
+      )
+    })
+
+    test("declines the invite and redirects to campaigns", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/decline`, {
+        user: invitedUser,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(200)
+      expect(response.headers.get("HX-Redirect")).toBe("/campaigns")
+    })
+
+    test("updates the membership to declined", async () => {
+      await makeRequest(testCtx.app, `/campaigns/${campaign.id}/decline`, {
+        user: invitedUser,
+        method: "POST",
+      })
+
+      const members = await testCtx.db`
+        SELECT * FROM campaign_members
+        WHERE campaign_id = ${campaign.id} AND user_id = ${invitedUser.id}
+      `
+
+      expect(members[0].declined_at).not.toBeNull()
+    })
+  })
+})
+
+describe("GET /campaigns with pending invites", () => {
+  const testCtx = useTestApp()
+
+  describe("when user has a pending invite", () => {
+    let dmUser: User
+    let invitedUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      invitedUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      // Create pending invite
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id, pending: true },
+        testCtx.db
+      )
+    })
+
+    test("shows the campaign with pending invite badge and inviter", async () => {
+      const response = await makeRequest(testCtx.app, "/campaigns", { user: invitedUser })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain(campaign.name)
+      expect(body).toContain("Pending Invite")
+      expect(body).toContain(`from ${dmUser.email}`)
+    })
+
+    test("shows accept button", async () => {
+      const response = await makeRequest(testCtx.app, "/campaigns", { user: invitedUser })
+
+      const document = await parseHtml(response)
+      const acceptButton = expectElement(document, `[data-testid="accept-${campaign.id}"]`)
+
+      expect(acceptButton.getAttribute("hx-post")).toBe(`/campaigns/${campaign.id}/accept`)
+    })
+
+    test("shows decline button", async () => {
+      const response = await makeRequest(testCtx.app, "/campaigns", { user: invitedUser })
+
+      const document = await parseHtml(response)
+      const declineButton = expectElement(document, `[data-testid="decline-${campaign.id}"]`)
+
+      expect(declineButton.getAttribute("hx-post")).toBe(`/campaigns/${campaign.id}/decline`)
+    })
+  })
+})
+
+describe("DELETE /campaigns/:id/members/:memberId", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a DM", () => {
+    let dmUser: User
+    let invitedUser: User
+    let campaign: Campaign
+    let memberId: string
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      invitedUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+    })
+
+    describe("with a pending invite", () => {
+      beforeEach(async () => {
+        const member = await campaignMemberFactory.create(
+          {
+            campaign_id: campaign.id,
+            user_id: invitedUser.id,
+            invited_by: dmUser.id,
+            pending: true,
+          },
+          testCtx.db
+        )
+        memberId = member.id
+      })
+
+      test("soft-deletes the pending invite", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${memberId}`,
+          { user: dmUser, method: "DELETE" }
+        )
+
+        expect(response.status).toBe(204)
+        expect(response.headers.get("HX-Refresh")).toBe("true")
+
+        // Verify member was soft-deleted (deleted_at is set)
+        const members = await testCtx.db`
+          SELECT * FROM campaign_members WHERE id = ${memberId}
+        `
+        expect(members.length).toBe(1)
+        expect(members[0].deleted_at).not.toBeNull()
+      })
+
+      test("sets success flash message", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${memberId}`,
+          { user: dmUser, method: "DELETE" }
+        )
+
+        const setCookie = response.headers.get("Set-Cookie")
+        expect(setCookie).toContain("flash")
+      })
+    })
+
+    describe("with a declined invite", () => {
+      beforeEach(async () => {
+        const member = await campaignMemberFactory.create(
+          {
+            campaign_id: campaign.id,
+            user_id: invitedUser.id,
+            invited_by: dmUser.id,
+            pending: true,
+          },
+          testCtx.db
+        )
+        memberId = member.id
+        // Decline the invite
+        await testCtx.db`
+          UPDATE campaign_members
+          SET declined_at = CURRENT_TIMESTAMP
+          WHERE id = ${memberId}
+        `
+      })
+
+      test("soft-deletes the declined invite", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${memberId}`,
+          { user: dmUser, method: "DELETE" }
+        )
+
+        expect(response.status).toBe(204)
+
+        // Verify member was soft-deleted (deleted_at is set)
+        const members = await testCtx.db`
+          SELECT * FROM campaign_members WHERE id = ${memberId}
+        `
+        expect(members.length).toBe(1)
+        expect(members[0].deleted_at).not.toBeNull()
+      })
+    })
+
+    describe("with an accepted player", () => {
+      beforeEach(async () => {
+        const member = await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id },
+          testCtx.db
+        )
+        memberId = member.id
+      })
+
+      test("removes the player", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${memberId}`,
+          { user: dmUser, method: "DELETE" }
+        )
+
+        expect(response.status).toBe(204)
+
+        // Verify player was soft-deleted
+        const members = await testCtx.db`
+          SELECT * FROM campaign_members WHERE id = ${memberId}
+        `
+        expect(members.length).toBe(1)
+        expect(members[0].deleted_at).not.toBeNull()
+      })
+    })
+
+    describe("with an accepted DM", () => {
+      beforeEach(async () => {
+        const member = await campaignMemberFactory.create(
+          { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id, role: "dm" },
+          testCtx.db
+        )
+        memberId = member.id
+      })
+
+      test("returns error and does not delete", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${memberId}`,
+          { user: dmUser, method: "DELETE" }
+        )
+
+        expect(response.status).toBe(400)
+
+        // Verify DM was not deleted
+        const members = await testCtx.db`
+          SELECT * FROM campaign_members WHERE id = ${memberId}
+        `
+        expect(members.length).toBe(1)
+        expect(members[0].deleted_at).toBeNull()
+      })
+    })
+
+    describe("with an accepted viewer", () => {
+      beforeEach(async () => {
+        const member = await campaignMemberFactory.create(
+          {
+            campaign_id: campaign.id,
+            user_id: invitedUser.id,
+            invited_by: dmUser.id,
+            role: "viewer",
+          },
+          testCtx.db
+        )
+        memberId = member.id
+      })
+
+      test("removes the viewer", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${memberId}`,
+          { user: dmUser, method: "DELETE" }
+        )
+
+        expect(response.status).toBe(204)
+
+        // Verify viewer was soft-deleted
+        const members = await testCtx.db`
+          SELECT * FROM campaign_members WHERE id = ${memberId}
+        `
+        expect(members.length).toBe(1)
+        expect(members[0].deleted_at).not.toBeNull()
+      })
+    })
+
+    describe("with non-existent member", () => {
+      test("returns error", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/nonexistent`,
+          { user: dmUser, method: "DELETE" }
+        )
+
+        expect(response.status).toBe(400)
+      })
+    })
+
+    describe("with member from different campaign", () => {
+      let otherCampaign: Campaign
+      let otherMemberId: string
+
+      beforeEach(async () => {
+        otherCampaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+        const member = await campaignMemberFactory.create(
+          {
+            campaign_id: otherCampaign.id,
+            user_id: invitedUser.id,
+            invited_by: dmUser.id,
+            pending: true,
+          },
+          testCtx.db
+        )
+        otherMemberId = member.id
+      })
+
+      test("returns error", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/members/${otherMemberId}`,
+          { user: dmUser, method: "DELETE" }
+        )
+
+        expect(response.status).toBe(400)
+      })
+    })
+  })
+
+  describe("when user is a player", () => {
+    let dmUser: User
+    let playerUser: User
+    let invitedUser: User
+    let campaign: Campaign
+    let memberId: string
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      invitedUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      // Add player member
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      // Create pending invite
+      const member = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id, pending: true },
+        testCtx.db
+      )
+      memberId = member.id
+    })
+
+    test("returns 403 forbidden", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/members/${memberId}`,
+        { user: playerUser, method: "DELETE" }
+      )
+
+      expect(response.status).toBe(403)
+    })
+  })
+
+  describe("when user is not a member", () => {
+    let dmUser: User
+    let otherUser: User
+    let invitedUser: User
+    let campaign: Campaign
+    let memberId: string
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      otherUser = await userFactory.create({}, testCtx.db)
+      invitedUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      // Create pending invite
+      const member = await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: invitedUser.id, invited_by: dmUser.id, pending: true },
+        testCtx.db
+      )
+      memberId = member.id
+    })
+
+    test("returns unauthorized", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/members/${memberId}`,
+        { user: otherUser, method: "DELETE" }
+      )
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/campaigns")
+    })
+  })
+})
+
+describe("GET /campaigns/:id/add-character", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a campaign member", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+    })
+
+    describe("with available characters", () => {
+      let character: Character
+
+      beforeEach(async () => {
+        character = await characterFactory.create(
+          { user_id: playerUser.id, class: "fighter", level: 3 },
+          testCtx.db
+        )
+      })
+
+      test("returns modal with character selection", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/add-character`, {
+          user: playerUser,
+        })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("Add Character")
+        expect(body).toContain(character.name)
+        expect(body).toContain("Add to Campaign")
+      })
+    })
+
+    describe("with no available characters", () => {
+      test("returns modal with empty state", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/add-character`, {
+          user: playerUser,
+        })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("No Characters Available")
+        expect(body).toContain("Create a character first")
+      })
+    })
+
+    describe("with character already in campaign", () => {
+      let character: Character
+
+      beforeEach(async () => {
+        character = await characterFactory.create(
+          { user_id: playerUser.id, class: "wizard", level: 5 },
+          testCtx.db
+        )
+        // Add character to campaign
+        await campaignCharacterFactory.create(
+          { campaign_id: campaign.id, character_id: character.id, added_by: playerUser.id },
+          testCtx.db
+        )
+      })
+
+      test("does not show character in the list", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/add-character`, {
+          user: playerUser,
+        })
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        // Character should not be in the list since it's already in the campaign
+        expect(body).toContain("No Characters Available")
+      })
+    })
+  })
+
+  describe("when user is not a member", () => {
+    let dmUser: User
+    let otherUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      otherUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+    })
+
+    test("redirects to campaigns list", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/add-character`, {
+        user: otherUser,
+      })
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/campaigns")
+    })
+  })
+})
+
+describe("POST /campaigns/:id/characters/:characterId", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a campaign member", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      character = await characterFactory.create(
+        { user_id: playerUser.id, class: "rogue", level: 2 },
+        testCtx.db
+      )
+    })
+
+    test("adds character to campaign and returns success", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}`,
+        { user: playerUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(204)
+      expect(response.headers.get("HX-Refresh")).toBe("true")
+      expect(response.headers.get("HX-Trigger")).toBe("closeModal")
+    })
+
+    test("creates campaign_character record", async () => {
+      await makeRequest(testCtx.app, `/campaigns/${campaign.id}/characters/${character.id}`, {
+        user: playerUser,
+        method: "POST",
+      })
+
+      const campaignChars = await testCtx.db`
+        SELECT * FROM campaign_characters
+        WHERE campaign_id = ${campaign.id} AND character_id = ${character.id}
+      `
+
+      expect(campaignChars.length).toBe(1)
+      expect(campaignChars[0].added_by).toBe(playerUser.id)
+      expect(campaignChars[0].revealed_at).not.toBeNull()
+    })
+
+    describe("when character is already in campaign", () => {
+      beforeEach(async () => {
+        // Add the character to the campaign
+        await campaignCharacterFactory.create(
+          { campaign_id: campaign.id, character_id: character.id, added_by: playerUser.id },
+          testCtx.db
+        )
+        // Create another character so modal has something to display with the error
+        await characterFactory.create(
+          { user_id: playerUser.id, class: "wizard", level: 5 },
+          testCtx.db
+        )
+      })
+
+      test("returns modal with error", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/characters/${character.id}`,
+          { user: playerUser, method: "POST" }
+        )
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("Character already in this campaign")
+      })
+    })
+
+    describe("when character does not exist", () => {
+      test("returns modal with error", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/characters/nonexistent`,
+          { user: playerUser, method: "POST" }
+        )
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("Character not found")
+      })
+    })
+
+    describe("when character belongs to another user", () => {
+      let otherCharacter: Character
+
+      beforeEach(async () => {
+        otherCharacter = await characterFactory.create(
+          { user_id: dmUser.id, class: "cleric", level: 4 },
+          testCtx.db
+        )
+      })
+
+      test("returns modal with error", async () => {
+        const response = await makeRequest(
+          testCtx.app,
+          `/campaigns/${campaign.id}/characters/${otherCharacter.id}`,
+          { user: playerUser, method: "POST" }
+        )
+
+        expect(response.status).toBe(200)
+        const document = await parseHtml(response)
+        const body = document.body.textContent || ""
+
+        expect(body).toContain("You don't own this character")
+      })
+    })
+  })
+
+  describe("when user is not a member", () => {
+    let dmUser: User
+    let otherUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      otherUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: otherUser.id }, testCtx.db)
+    })
+
+    test("redirects to campaigns list", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}`,
+        { user: otherUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/campaigns")
+    })
+  })
+})
+
+describe("DELETE /campaigns/:id/characters/:characterId", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is not authenticated", () => {
+    test("redirects to login page", async () => {
+      const response = await makeRequest(testCtx.app, "/campaigns/123/characters/456", {
+        method: "DELETE",
+      })
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toContain("/login")
+    })
+  })
+
+  describe("when user is the character owner", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: playerUser.id }, testCtx.db)
+
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      await campaignCharacterFactory.create(
+        { campaign_id: campaign.id, character_id: character.id, added_by: playerUser.id },
+        testCtx.db
+      )
+    })
+
+    test("removes the character from the campaign", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}`,
+        { user: playerUser, method: "DELETE" }
+      )
+
+      expect(response.status).toBe(204)
+      expect(response.headers.get("HX-Refresh")).toBe("true")
+    })
+
+    test("cannot remove another player's character", async () => {
+      const otherPlayer = await userFactory.create({}, testCtx.db)
+      const otherCharacter = await characterFactory.create({ user_id: otherPlayer.id }, testCtx.db)
+
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: otherPlayer.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      await campaignCharacterFactory.create(
+        { campaign_id: campaign.id, character_id: otherCharacter.id, added_by: otherPlayer.id },
+        testCtx.db
+      )
+
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${otherCharacter.id}`,
+        { user: playerUser, method: "DELETE" }
+      )
+
+      expect(response.status).toBe(400)
+    })
+  })
+
+  describe("when user is DM", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: playerUser.id }, testCtx.db)
+
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      await campaignCharacterFactory.create(
+        { campaign_id: campaign.id, character_id: character.id, added_by: playerUser.id },
+        testCtx.db
+      )
+    })
+
+    test("can remove any character from the campaign", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}`,
+        { user: dmUser, method: "DELETE" }
+      )
+
+      expect(response.status).toBe(204)
+      expect(response.headers.get("HX-Refresh")).toBe("true")
+    })
+  })
+
+  describe("when character is not in campaign", () => {
+    let dmUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+    })
+
+    test("returns error", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}`,
+        { user: dmUser, method: "DELETE" }
+      )
+
+      expect(response.status).toBe(400)
+    })
+  })
+
+  describe("when user is not a member", () => {
+    let dmUser: User
+    let otherUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      otherUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+
+      await campaignCharacterFactory.create(
+        { campaign_id: campaign.id, character_id: character.id, added_by: dmUser.id },
+        testCtx.db
+      )
+    })
+
+    test("redirects to campaigns list", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}`,
+        { user: otherUser, method: "DELETE" }
+      )
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toBe("/campaigns")
+    })
+  })
+})
+
+describe("GET /campaigns/:id/add-character - mode based on role", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a DM", () => {
+    let dmUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      // Create a character so the modal has something to display
+      await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+    })
+
+    test("renders 'Add NPC' mode", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/add-character`, {
+        user: dmUser,
+      })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("Add NPC")
+      expect(body).toContain("Add as NPC")
+    })
+  })
+
+  describe("when user is a player", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      // Create a character so the modal has something to display
+      await characterFactory.create({ user_id: playerUser.id }, testCtx.db)
+    })
+
+    test("renders 'Add Character' mode", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/add-character`, {
+        user: playerUser,
+      })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("Add Character")
+      expect(body).toContain("Add to Campaign")
+    })
+  })
+})
+
+describe("POST /campaigns/:id/characters/:characterId - NPC vs character based on role", () => {
+  const testCtx = useTestApp()
+
+  describe("when DM adds a character", () => {
+    let dmUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+    })
+
+    test("adds as NPC with revealed_at = null (hidden)", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}`,
+        { user: dmUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(204)
+
+      const campaignChars = await testCtx.db`
+        SELECT * FROM campaign_characters
+        WHERE campaign_id = ${campaign.id} AND character_id = ${character.id}
+      `
+
+      expect(campaignChars.length).toBe(1)
+      expect(campaignChars[0].revealed_at).toBeNull()
+    })
+  })
+
+  describe("when player adds a character", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      character = await characterFactory.create({ user_id: playerUser.id }, testCtx.db)
+    })
+
+    test("adds as character with revealed_at set (visible)", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}`,
+        { user: playerUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(204)
+
+      const campaignChars = await testCtx.db`
+        SELECT * FROM campaign_characters
+        WHERE campaign_id = ${campaign.id} AND character_id = ${character.id}
+      `
+
+      expect(campaignChars.length).toBe(1)
+      expect(campaignChars[0].revealed_at).not.toBeNull()
+    })
+  })
+})
+
+describe("POST /campaigns/:id/characters/:characterId/reveal", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a DM", () => {
+    let dmUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+      // Add as hidden NPC
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: character.id,
+          added_by: dmUser.id,
+          revealed_at: null,
+        },
+        testCtx.db
+      )
+    })
+
+    test("reveals the NPC to players", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}/reveal`,
+        { user: dmUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(204)
+      expect(response.headers.get("HX-Refresh")).toBe("true")
+
+      const campaignChars = await testCtx.db`
+        SELECT * FROM campaign_characters
+        WHERE campaign_id = ${campaign.id} AND character_id = ${character.id}
+      `
+
+      expect(campaignChars[0].revealed_at).not.toBeNull()
+    })
+  })
+
+  describe("when user is a player", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      character = await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: character.id,
+          added_by: dmUser.id,
+          revealed_at: null,
+        },
+        testCtx.db
+      )
+    })
+
+    test("returns 403 forbidden", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}/reveal`,
+        { user: playerUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(403)
+    })
+  })
+
+  describe("when character is not in campaign", () => {
+    let dmUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+    })
+
+    test("returns error", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}/reveal`,
+        { user: dmUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(400)
+    })
+  })
+})
+
+describe("POST /campaigns/:id/characters/:characterId/hide", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a DM", () => {
+    let dmUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      character = await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+      // Add as visible NPC
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: character.id,
+          added_by: dmUser.id,
+          revealed_at: new Date(),
+        },
+        testCtx.db
+      )
+    })
+
+    test("hides the NPC from players", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}/hide`,
+        { user: dmUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(204)
+      expect(response.headers.get("HX-Refresh")).toBe("true")
+
+      const campaignChars = await testCtx.db`
+        SELECT * FROM campaign_characters
+        WHERE campaign_id = ${campaign.id} AND character_id = ${character.id}
+      `
+
+      expect(campaignChars[0].revealed_at).toBeNull()
+    })
+  })
+
+  describe("when user is a player", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let character: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      character = await characterFactory.create({ user_id: dmUser.id }, testCtx.db)
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: character.id,
+          added_by: dmUser.id,
+          revealed_at: new Date(),
+        },
+        testCtx.db
+      )
+    })
+
+    test("returns 403 forbidden", async () => {
+      const response = await makeRequest(
+        testCtx.app,
+        `/campaigns/${campaign.id}/characters/${character.id}/hide`,
+        { user: playerUser, method: "POST" }
+      )
+
+      expect(response.status).toBe(403)
+    })
+  })
+})
+
+describe("GET /campaigns/:id - NPCs section visibility", () => {
+  const testCtx = useTestApp()
+
+  describe("when there are no NPCs", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+    })
+
+    test("DM sees the NPCs section with Add NPC button", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, { user: dmUser })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("NPCs")
+      expect(body).toContain("Add NPC")
+    })
+
+    test("player does not see the NPCs section", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, {
+        user: playerUser,
+      })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+
+      // Check that the NPCs heading is not present
+      const headings = document.querySelectorAll("h3")
+      const npcHeading = Array.from(headings).find((h) => h.textContent?.includes("NPCs"))
+      expect(npcHeading).toBeUndefined()
+    })
+  })
+
+  describe("when there are hidden NPCs only", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let npcCharacter: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      npcCharacter = await characterFactory.create(
+        { user_id: dmUser.id, name: "Hidden NPC" },
+        testCtx.db
+      )
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: npcCharacter.id,
+          added_by: dmUser.id,
+          revealed_at: null,
+        },
+        testCtx.db
+      )
+    })
+
+    test("DM sees the hidden NPC", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, { user: dmUser })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("NPCs")
+      expect(body).toContain("Hidden NPC")
+      expect(body).toContain("Hidden") // Badge indicating NPC is hidden from players
+    })
+
+    test("player does not see the NPCs section", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, {
+        user: playerUser,
+      })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+
+      const headings = document.querySelectorAll("h3")
+      const npcHeading = Array.from(headings).find((h) => h.textContent?.includes("NPCs"))
+      expect(npcHeading).toBeUndefined()
+    })
+  })
+
+  describe("when there are revealed NPCs", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+    let npcCharacter: Character
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id },
+        testCtx.db
+      )
+      npcCharacter = await characterFactory.create(
+        { user_id: dmUser.id, name: "Revealed NPC" },
+        testCtx.db
+      )
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: npcCharacter.id,
+          added_by: dmUser.id,
+          revealed_at: new Date(),
+        },
+        testCtx.db
+      )
+    })
+
+    test("DM sees the revealed NPC with Hide button", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, { user: dmUser })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("NPCs")
+      expect(body).toContain("Revealed NPC")
+      expect(body).toContain("Hide")
+    })
+
+    test("player sees the NPCs section and the revealed NPC", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, {
+        user: playerUser,
+      })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("NPCs")
+      expect(body).toContain("Revealed NPC")
+      // Player should not see Hide button
+      expect(body).not.toContain("Hide")
+    })
+  })
+})
+
+describe("GET /campaigns/:id/invite with role query param", () => {
+  const testCtx = useTestApp()
+
+  let user: User
+  let campaign: Campaign
+
+  beforeEach(async () => {
+    user = await userFactory.create({}, testCtx.db)
+    campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+  })
+
+  test("pre-selects viewer role when ?role=viewer", async () => {
+    const response = await makeRequest(
+      testCtx.app,
+      `/campaigns/${campaign.id}/invite?role=viewer`,
+      {
+        user,
+      }
+    )
+
+    expect(response.status).toBe(200)
+    const document = await parseHtml(response)
+    const html = document.body.innerHTML
+
+    // Check that viewer option has selected attribute
+    expect(html).toContain('value="viewer" selected')
+  })
+
+  test("pre-selects dm role when ?role=dm", async () => {
+    const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite?role=dm`, {
+      user,
+    })
+
+    expect(response.status).toBe(200)
+    const document = await parseHtml(response)
+    const html = document.body.innerHTML
+
+    // Check that dm option has selected attribute
+    expect(html).toContain('value="dm" selected')
+  })
+
+  test("defaults to player role when no query param", async () => {
+    const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/invite`, {
+      user,
+    })
+
+    expect(response.status).toBe(200)
+    const document = await parseHtml(response)
+    const html = document.body.innerHTML
+
+    // Check that player option has selected attribute
+    expect(html).toContain('value="player" selected')
+  })
+})
+
+describe("POST /campaigns/:id/leave", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is a viewer", () => {
+    let dmUser: User
+    let viewerUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      viewerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: viewerUser.id, invited_by: dmUser.id, role: "viewer" },
+        testCtx.db
+      )
+    })
+
+    test("can leave the campaign", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/leave`, {
+        user: viewerUser,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(200)
+      expect(response.headers.get("HX-Redirect")).toBe("/campaigns")
+    })
+  })
+
+  describe("when user is a player", () => {
+    let dmUser: User
+    let playerUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      playerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: playerUser.id, invited_by: dmUser.id, role: "player" },
+        testCtx.db
+      )
+    })
+
+    test("can leave the campaign", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/leave`, {
+        user: playerUser,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(200)
+      expect(response.headers.get("HX-Redirect")).toBe("/campaigns")
+    })
+
+    describe("with a character in the campaign", () => {
+      beforeEach(async () => {
+        const character = await characterFactory.create({ user_id: playerUser.id }, testCtx.db)
+        await campaignCharacterFactory.create(
+          { campaign_id: campaign.id, character_id: character.id, added_by: playerUser.id },
+          testCtx.db
+        )
+      })
+
+      test("cannot leave until character is removed", async () => {
+        const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/leave`, {
+          user: playerUser,
+          method: "POST",
+        })
+
+        expect(response.status).toBe(400)
+        expect(response.headers.get("HX-Redirect")).toBe(`/campaigns/${campaign.id}`)
+      })
+    })
+  })
+
+  describe("when user is a DM", () => {
+    let dmUser: User
+    let otherDmUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      otherDmUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+    })
+
+    test("can leave if there are multiple DMs", async () => {
+      // Add second DM
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: otherDmUser.id, invited_by: dmUser.id, role: "dm" },
+        testCtx.db
+      )
+
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/leave`, {
+        user: dmUser,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(200)
+      expect(response.headers.get("HX-Redirect")).toBe("/campaigns")
+    })
+
+    test("cannot leave as sole DM", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/leave`, {
+        user: dmUser,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(400)
+      expect(response.headers.get("HX-Redirect")).toBe(`/campaigns/${campaign.id}`)
+    })
+  })
+
+  describe("when user is not a member", () => {
+    let dmUser: User
+    let nonMemberUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      nonMemberUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+    })
+
+    test("returns error", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}/leave`, {
+        user: nonMemberUser,
+        method: "POST",
+      })
+
+      expect(response.status).toBe(400)
+    })
+  })
+})
+
+describe("Campaign page buttons", () => {
+  const testCtx = useTestApp()
+
+  describe("Add DM button", () => {
+    let user: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+    })
+
+    test("is visible to DMs", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, { user })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("Add DM")
+    })
+  })
+
+  describe("Add Viewer button", () => {
+    let user: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+    })
+
+    test("is visible to DMs", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, { user })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const body = document.body.textContent || ""
+
+      expect(body).toContain("Add Viewer")
+    })
+  })
+
+  describe("Leave button for viewers", () => {
+    let dmUser: User
+    let viewerUser: User
+    let campaign: Campaign
+
+    beforeEach(async () => {
+      dmUser = await userFactory.create({}, testCtx.db)
+      viewerUser = await userFactory.create({}, testCtx.db)
+      campaign = await campaignFactory.create({ created_by: dmUser.id }, testCtx.db)
+      await campaignMemberFactory.create(
+        { campaign_id: campaign.id, user_id: viewerUser.id, invited_by: dmUser.id, role: "viewer" },
+        testCtx.db
+      )
+    })
+
+    test("viewer sees Leave button on their own card", async () => {
+      const response = await makeRequest(testCtx.app, `/campaigns/${campaign.id}`, {
+        user: viewerUser,
+      })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const leaveButton = document.querySelector('[data-testid="leave-campaign"]')
+
+      expect(leaveButton).not.toBeNull()
+    })
+  })
+})
diff --git a/src/routes/campaigns.tsx b/src/routes/campaigns.tsx
new file mode 100644
index 0000000..1a68047
--- /dev/null
+++ b/src/routes/campaigns.tsx
@@ -0,0 +1,589 @@
+import { AddCharacterToCampaign } from "@src/components/AddCharacterToCampaign"
+import { Campaign } from "@src/components/Campaign"
+import { CampaignInviteForm } from "@src/components/CampaignInviteForm"
+import { CampaignNew } from "@src/components/CampaignNew"
+import { Campaigns } from "@src/components/Campaigns"
+import { ChangeRoleForm } from "@src/components/ChangeRoleForm"
+import { getDb } from "@src/db"
+import { countArchivedByUserId } from "@src/db/campaigns"
+import { getBaseUrl } from "@src/lib/url"
+import { setFlashMsg } from "@src/middleware/flash"
+import { addCharacterToCampaign } from "@src/services/campaigns/addCharacter"
+import { archiveCampaign } from "@src/services/campaigns/archive"
+import { authorizeCampaign, handleCampaignUnallowed } from "@src/services/campaigns/authorize"
+import { changeRole } from "@src/services/campaigns/changeRole"
+import { createCampaign } from "@src/services/campaigns/create"
+import { deleteInvite } from "@src/services/campaigns/deleteInvite"
+import { createInvite } from "@src/services/campaigns/invite"
+import { leaveCampaign } from "@src/services/campaigns/leaveCampaign"
+import { listCampaigns } from "@src/services/campaigns/list"
+import { removeCharacterFromCampaign } from "@src/services/campaigns/removeCharacter"
+import { respondToInvite } from "@src/services/campaigns/respond"
+import { hideCharacter, revealCharacter } from "@src/services/campaigns/revealCharacter"
+import { unarchiveCampaign } from "@src/services/campaigns/unarchive"
+import { listCharacters } from "@src/services/listCharacters"
+import { Hono } from "hono"
+
+export const campaignsRoutes = new Hono()
+
+campaignsRoutes.get("/campaigns", async (c) => {
+  const user = c.var.user!
+  const showArchived = c.req.query("show_archived") === "true"
+
+  const campaigns = await listCampaigns(getDb(c), {
+    userId: user.id,
+    includeArchived: showArchived,
+  })
+  const archivedCount = await countArchivedByUserId(getDb(c), user.id)
+
+  return c.render(
+    <Campaigns campaigns={campaigns} showArchived={showArchived} archivedCount={archivedCount} />,
+    { title: "My Campaigns" }
+  )
+})
+
+campaignsRoutes.get("/campaigns/new", (c) => {
+  return c.render(<CampaignNew />, { title: "New Campaign" })
+})
+
+campaignsRoutes.post("/campaigns/new", async (c) => {
+  const user = c.var.user!
+  const body = (await c.req.parseBody()) as Record<string, string>
+
+  const result = await createCampaign(getDb(c), user, body)
+
+  if (!result.complete) {
+    return c.html(<CampaignNew values={result.values} errors={result.errors} />)
+  }
+
+  await setFlashMsg(c, "Campaign created successfully!", "success")
+  c.header("HX-Redirect", `/campaigns/${result.campaign.id}`)
+  return c.body(null, 204)
+})
+
+campaignsRoutes.get("/campaigns/:id", async (c) => {
+  const id = c.req.param("id") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  return c.render(<Campaign campaign={authResult.campaign} />, {
+    title: authResult.campaign.name,
+  })
+})
+
+campaignsRoutes.post("/campaigns/:id/archive", async (c) => {
+  const id = c.req.param("id") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can archive campaigns
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can archive campaigns", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  const result = await archiveCampaign(getDb(c), authResult.campaign)
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors._form || "Failed to archive campaign", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, `Campaign "${authResult.campaign.name}" has been archived`, "success")
+  c.header("HX-Redirect", "/campaigns?show_archived=true")
+  return c.body(null, 204)
+})
+
+campaignsRoutes.post("/campaigns/:id/unarchive", async (c) => {
+  const id = c.req.param("id") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can unarchive campaigns
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can unarchive campaigns", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  const result = await unarchiveCampaign(getDb(c), authResult.campaign)
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors._form || "Failed to unarchive campaign", "error")
+    c.header("HX-Redirect", "/campaigns?show_archived=true")
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, `Campaign "${authResult.campaign.name}" has been restored`, "success")
+  c.header("HX-Redirect", "/campaigns")
+  return c.body(null, 204)
+})
+
+// Invite modal content (GET returns form)
+campaignsRoutes.get("/campaigns/:id/invite", async (c) => {
+  const id = c.req.param("id") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can invite
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can invite members", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  // Pre-select role if provided in query param
+  const defaultRole = c.req.query("role") || "player"
+  return c.html(<CampaignInviteForm campaignId={id} values={{ role: defaultRole }} />)
+})
+
+// Send invite (POST)
+campaignsRoutes.post("/campaigns/:id/invite", async (c) => {
+  const id = c.req.param("id") as string
+  const user = c.var.user!
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can invite
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can invite members", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  const body = (await c.req.parseBody()) as Record<string, string>
+
+  const result = await createInvite(getDb(c), authResult.campaign, user, {
+    ...body,
+    baseUrl: getBaseUrl(c),
+  })
+
+  // Validation failed - re-render form with values and errors
+  if (!result.complete) {
+    return c.html(
+      <CampaignInviteForm campaignId={id} values={result.values} errors={result.errors} />
+    )
+  }
+
+  // Success - close the modal and set flash message
+  // The user can see the new pending member when they refresh or navigate to the campaign
+  await setFlashMsg(c, `Invitation sent to ${body.email}`, "success")
+  c.header("HX-Trigger", "closeModal")
+  c.header("HX-Refresh", "true")
+  return c.body(null, 204)
+})
+
+// Accept invite from campaigns list (already logged in)
+// Note: Cannot use authorizeCampaign here because pending invites have accepted_at=null,
+// so getUserRole() returns null and the user would be treated as "not_member".
+// The respondToInvite service handles membership lookup directly.
+campaignsRoutes.post("/campaigns/:id/accept", async (c) => {
+  const id = c.req.param("id") as string
+  const user = c.var.user!
+
+  const result = await respondToInvite(getDb(c), id, user, "accept")
+
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors._form || "Failed to accept invitation", "error")
+    c.header("HX-Redirect", "/campaigns")
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, "Welcome to the campaign!", "success")
+  c.header("HX-Redirect", `/campaigns/${id}`)
+  return c.body(null, 200)
+})
+
+// Decline invite from campaigns list
+// Note: Same as accept - cannot use authorizeCampaign for pending invites.
+campaignsRoutes.post("/campaigns/:id/decline", async (c) => {
+  const id = c.req.param("id") as string
+  const user = c.var.user!
+
+  const result = await respondToInvite(getDb(c), id, user, "decline")
+
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors._form || "Failed to decline invitation", "error")
+    c.header("HX-Redirect", "/campaigns")
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, "Invitation declined", "info")
+  c.header("HX-Redirect", "/campaigns")
+  return c.body(null, 200)
+})
+
+// Leave campaign (self-removal)
+campaignsRoutes.post("/campaigns/:id/leave", async (c) => {
+  const id = c.req.param("id") as string
+  const user = c.var.user!
+
+  const result = await leaveCampaign(getDb(c), id, user.id)
+
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors._form || "Failed to leave campaign", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, "You have left the campaign", "info")
+  c.header("HX-Redirect", "/campaigns")
+  return c.body(null, 200)
+})
+
+// Delete invite (DM only) - for pending or declined invites
+campaignsRoutes.delete("/campaigns/:id/members/:memberId", async (c) => {
+  const id = c.req.param("id") as string
+  const memberId = c.req.param("memberId") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can delete invites
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can delete invitations", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  const result = await deleteInvite(getDb(c), id, memberId)
+
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors._form || "Failed to delete invitation", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, "Invitation deleted", "success")
+  c.header("HX-Refresh", "true")
+  return c.body(null, 204)
+})
+
+// Add character to campaign - show modal with user's characters
+// DMs see "Add NPC" mode, players see "Add Character" mode
+campaignsRoutes.get("/campaigns/:id/add-character", async (c) => {
+  const id = c.req.param("id") as string
+  const user = c.var.user!
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Get user's characters not already in this campaign
+  const userCharacters = await listCharacters(getDb(c), { userId: user.id })
+  const campaignCharIds = new Set(authResult.campaign.characters.map((cc) => cc.character_id))
+  const availableCharacters = userCharacters.filter((ch) => !campaignCharIds.has(ch.id))
+
+  // DMs add NPCs, players add characters
+  const mode = authResult.role === "dm" ? "npc" : "character"
+
+  return c.html(
+    <AddCharacterToCampaign campaignId={id} characters={availableCharacters} mode={mode} />
+  )
+})
+
+// Add character to campaign - POST
+// DMs add NPCs (hidden), players add characters (visible)
+campaignsRoutes.post("/campaigns/:id/characters/:characterId", async (c) => {
+  const id = c.req.param("id") as string
+  const characterId = c.req.param("characterId") as string
+  const user = c.var.user!
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  const result = await addCharacterToCampaign(
+    getDb(c),
+    authResult.campaign,
+    characterId,
+    user.id,
+    authResult.role
+  )
+
+  if (!result.complete) {
+    // Re-render modal with error
+    const userCharacters = await listCharacters(getDb(c), { userId: user.id })
+    const campaignCharIds = new Set(authResult.campaign.characters.map((cc) => cc.character_id))
+    const availableCharacters = userCharacters.filter((ch) => !campaignCharIds.has(ch.id))
+    const mode = authResult.role === "dm" ? "npc" : "character"
+
+    return c.html(
+      <AddCharacterToCampaign
+        campaignId={id}
+        characters={availableCharacters}
+        errors={result.errors}
+        mode={mode}
+      />
+    )
+  }
+
+  const successMsg =
+    authResult.role === "dm" ? "NPC added to campaign!" : "Character added to campaign!"
+  await setFlashMsg(c, successMsg, "success")
+  c.header("HX-Trigger", "closeModal")
+  c.header("HX-Refresh", "true")
+  return c.body(null, 204)
+})
+
+// Remove character from campaign - DELETE
+campaignsRoutes.delete("/campaigns/:id/characters/:characterId", async (c) => {
+  const id = c.req.param("id") as string
+  const characterId = c.req.param("characterId") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  const result = await removeCharacterFromCampaign(getDb(c), authResult.campaign, characterId)
+
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors.general || "Failed to remove character", "error")
+    c.header("HX-Refresh", "true")
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, "Character removed from campaign", "success")
+  c.header("HX-Refresh", "true")
+  return c.body(null, 204)
+})
+
+// Reveal NPC to players - DM only
+campaignsRoutes.post("/campaigns/:id/characters/:characterId/reveal", async (c) => {
+  const id = c.req.param("id") as string
+  const characterId = c.req.param("characterId") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can reveal NPCs
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can reveal NPCs", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  const result = await revealCharacter(getDb(c), id, characterId)
+
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors.general || "Failed to reveal NPC", "error")
+    c.header("HX-Refresh", "true")
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, "NPC revealed to players", "success")
+  c.header("HX-Refresh", "true")
+  return c.body(null, 204)
+})
+
+// Hide NPC from players - DM only
+campaignsRoutes.post("/campaigns/:id/characters/:characterId/hide", async (c) => {
+  const id = c.req.param("id") as string
+  const characterId = c.req.param("characterId") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can hide NPCs
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can hide NPCs", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  const result = await hideCharacter(getDb(c), id, characterId)
+
+  if (!result.complete) {
+    await setFlashMsg(c, result.errors.general || "Failed to hide NPC", "error")
+    c.header("HX-Refresh", "true")
+    return c.body(null, 400)
+  }
+
+  await setFlashMsg(c, "NPC hidden from players", "success")
+  c.header("HX-Refresh", "true")
+  return c.body(null, 204)
+})
+
+// Self role change - show modal form (GET)
+campaignsRoutes.get("/campaigns/:id/change-role", async (c) => {
+  const id = c.req.param("id") as string
+  const user = c.var.user!
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can change their own role (players/viewers cannot self-promote)
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can change their role", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  // Find the current user's member record
+  const currentMember = authResult.campaign.members.find((m) => m.user_id === user.id)
+  if (!currentMember) {
+    await setFlashMsg(c, "Member not found", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 400)
+  }
+
+  return c.html(
+    <ChangeRoleForm campaign={authResult.campaign} member={currentMember} isSelfChange={true} />
+  )
+})
+
+// Self role change - process (POST)
+campaignsRoutes.post("/campaigns/:id/change-role", async (c) => {
+  const id = c.req.param("id") as string
+  const user = c.var.user!
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can change their role", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  const currentMember = authResult.campaign.members.find((m) => m.user_id === user.id)
+  if (!currentMember) {
+    await setFlashMsg(c, "Member not found", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 400)
+  }
+
+  const body = (await c.req.parseBody()) as Record<string, string>
+  const result = await changeRole(getDb(c), authResult.campaign, currentMember, user.id, body)
+
+  if (!result.complete) {
+    return c.html(
+      <ChangeRoleForm
+        campaign={authResult.campaign}
+        member={currentMember}
+        isSelfChange={true}
+        values={result.values}
+        errors={result.errors}
+      />
+    )
+  }
+
+  const msg = result.result.npcsRevealed
+    ? `Role changed! ${result.result.npcsRevealed} NPC(s) were revealed.`
+    : "Role changed successfully!"
+
+  await setFlashMsg(c, msg, "success")
+  c.header("HX-Trigger", "closeModal")
+  c.header("HX-Refresh", "true")
+  return c.body(null, 204)
+})
+
+// DM changing another member's role - show modal form (GET)
+campaignsRoutes.get("/campaigns/:id/members/:memberId/change-role", async (c) => {
+  const id = c.req.param("id") as string
+  const memberId = c.req.param("memberId") as string
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  // Only DMs can change others' roles
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can change member roles", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  // Find the target member
+  const targetMember = authResult.campaign.members.find((m) => m.id === memberId)
+  if (!targetMember) {
+    await setFlashMsg(c, "Member not found", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 404)
+  }
+
+  // Cannot change other DMs' roles (they must do it themselves)
+  if (targetMember.role === "dm") {
+    await setFlashMsg(c, "DMs must change their own role", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 400)
+  }
+
+  return c.html(
+    <ChangeRoleForm campaign={authResult.campaign} member={targetMember} isSelfChange={false} />
+  )
+})
+
+// DM changing another member's role - process (POST)
+campaignsRoutes.post("/campaigns/:id/members/:memberId/change-role", async (c) => {
+  const id = c.req.param("id") as string
+  const memberId = c.req.param("memberId") as string
+  const user = c.var.user!
+
+  const authResult = await authorizeCampaign(c, id)
+  if (!authResult.allowed) {
+    return handleCampaignUnallowed(c, authResult.reason)
+  }
+
+  if (authResult.role !== "dm") {
+    await setFlashMsg(c, "Only DMs can change member roles", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 403)
+  }
+
+  const targetMember = authResult.campaign.members.find((m) => m.id === memberId)
+  if (!targetMember) {
+    await setFlashMsg(c, "Member not found", "error")
+    c.header("HX-Redirect", `/campaigns/${id}`)
+    return c.body(null, 404)
+  }
+
+  const body = (await c.req.parseBody()) as Record<string, string>
+  const result = await changeRole(getDb(c), authResult.campaign, targetMember, user.id, body)
+
+  if (!result.complete) {
+    return c.html(
+      <ChangeRoleForm
+        campaign={authResult.campaign}
+        member={targetMember}
+        isSelfChange={false}
+        values={result.values}
+        errors={result.errors}
+      />
+    )
+  }
+
+  await setFlashMsg(c, `Role changed for ${targetMember.email}`, "success")
+  c.header("HX-Trigger", "closeModal")
+  c.header("HX-Refresh", "true")
+  return c.body(null, 204)
+})
diff --git a/src/routes/character.abilities.test.ts b/src/routes/character.abilities.test.ts
index 74674d3..e2ac93b 100644
--- a/src/routes/character.abilities.test.ts
+++ b/src/routes/character.abilities.test.ts
@@ -282,7 +282,7 @@ describe("POST /characters/:id/edit/abilities", () => {
           }
         )
 
-        expect(response.headers.get("HX-Trigger")).toContain("closeEditModal")
+        expect(response.headers.get("HX-Trigger")).toContain("closeDetailModal")
       })
     })
 
diff --git a/src/routes/character.coins.test.ts b/src/routes/character.coins.test.ts
index 5f130e7..d04b0f9 100644
--- a/src/routes/character.coins.test.ts
+++ b/src/routes/character.coins.test.ts
@@ -185,7 +185,7 @@ describe("POST /characters/:id/edit/coins", () => {
           body: formData,
         })
 
-        expect(response.headers.get("HX-Trigger")).toContain("closeEditModal")
+        expect(response.headers.get("HX-Trigger")).toContain("closeDetailModal")
       })
     })
 
diff --git a/src/routes/character.skills.test.ts b/src/routes/character.skills.test.ts
index 87b36dd..9707a8c 100644
--- a/src/routes/character.skills.test.ts
+++ b/src/routes/character.skills.test.ts
@@ -228,7 +228,7 @@ describe("POST /characters/:id/edit/skills", () => {
           body: formData,
         })
 
-        expect(response.headers.get("HX-Trigger")).toContain("closeEditModal")
+        expect(response.headers.get("HX-Trigger")).toContain("closeDetailModal")
       })
     })
 
diff --git a/src/routes/character.tsx b/src/routes/character.tsx
index 9baac0f..711ad83 100644
--- a/src/routes/character.tsx
+++ b/src/routes/character.tsx
@@ -45,7 +45,7 @@ import { SpellSlotsHistory } from "@src/components/SpellSlotsHistory"
 import { TraitEditForm } from "@src/components/TraitEditForm"
 import { TraitHistory } from "@src/components/TraitHistory"
 import { UploadAvatarForm } from "@src/components/UploadAvatarForm"
-import { ModalContent } from "@src/components/ui/ModalContent"
+import { ModalContent } from "@src/components/ui/DetailModal"
 import { getDb } from "@src/db"
 import { findByCharacterId as findAbilityChanges } from "@src/db/char_abilities"
 import { findByCharacterId as findCoinChanges } from "@src/db/char_coins"
@@ -73,7 +73,12 @@ import { setFlashMsg } from "@src/middleware/flash"
 import { addLevel } from "@src/services/addLevel"
 import { addTrait } from "@src/services/addTrait"
 import { archiveCharacter } from "@src/services/archiveCharacter"
-import { authorizeCharacter, handleUnallowed } from "@src/services/authorize"
+import {
+  authorizeCharacter,
+  authorizeCharacterLightbox,
+  authorizeCharacterView,
+  handleUnallowed,
+} from "@src/services/authorize"
 import { castSpell } from "@src/services/castSpell"
 import { computeCharacter } from "@src/services/computeCharacter"
 import type { EquippedComputedItem } from "@src/services/computeCharacterItems"
@@ -107,7 +112,10 @@ characterRoutes.get("/characters", async (c) => {
   const user = c.var.user!
   const showArchived = c.req.query("show_archived") === "true"
 
-  const characters = await listCharacters(getDb(c), user.id, showArchived)
+  const characters = await listCharacters(getDb(c), {
+    userId: user.id,
+    includeArchived: showArchived,
+  })
   const archivedCount = await countArchivedByUserId(getDb(c), user.id)
 
   return c.render(
@@ -163,17 +171,22 @@ characterRoutes.post("/characters/import", async (c) => {
 characterRoutes.get("/characters/:id", async (c) => {
   const id = c.req.param("id") as string
 
-  const authResult = await authorizeCharacter(c, id)
+  // Use authorizeCharacterView to allow DMs to view characters in their campaigns
+  const authResult = await authorizeCharacterView(c, id)
   if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
   const char = authResult.character
+  const isReadOnly = authResult.accessType === "dm"
 
   const currentNote = await getCurrentNote(getDb(c), id)
 
   // ChatBox always starts with a new chat (chatId=null)
   // Users can load old chats via the history button
-  return c.render(<Character character={char} currentNote={currentNote} />, {
-    title: "Character Sheet",
-  })
+  return c.render(
+    <Character character={char} currentNote={currentNote} isReadOnly={isReadOnly} />,
+    {
+      title: "Character Sheet",
+    }
+  )
 })
 
 characterRoutes.post("/characters/:id/archive", async (c) => {
@@ -231,7 +244,7 @@ characterRoutes.post("/characters/:id/edit/class", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(
     <>
       <CharacterInfo character={updatedChar} swapOob={true} />
@@ -267,7 +280,7 @@ characterRoutes.post("/characters/:id/edit/hitpoints", async (c) => {
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
 
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<CharacterInfo character={updatedChar} swapOob={true} />)
 })
 
@@ -294,7 +307,7 @@ characterRoutes.post("/characters/:id/edit/hitdice", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<CharacterInfo character={updatedChar} swapOob={true} />)
 })
 
@@ -315,7 +328,7 @@ characterRoutes.post("/characters/:id/edit/spellslots", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<SpellsPanel character={updatedChar} swapOob={true} />)
 })
 
@@ -336,7 +349,7 @@ characterRoutes.post("/characters/:id/edit/prepspell", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<SpellsPanel character={updatedChar} swapOob={true} />)
 })
 
@@ -355,7 +368,7 @@ characterRoutes.post("/characters/:id/edit/spellbook", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<SpellsPanel character={updatedChar} swapOob={true} />)
 })
 
@@ -387,7 +400,7 @@ characterRoutes.post("/characters/:id/edit/trait", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<TraitsPanel character={updatedChar} swapOob={true} />)
 })
 
@@ -412,7 +425,7 @@ characterRoutes.post("/characters/:id/edit/newitem", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<InventoryPanel character={updatedChar} swapOob={true} />)
 })
 
@@ -490,7 +503,7 @@ characterRoutes.post("/characters/:id/items/:itemId/edit", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<InventoryPanel character={updatedChar} swapOob={true} />)
 })
 
@@ -567,6 +580,7 @@ characterRoutes.post("/characters/:id/items/:itemId/effects", async (c) => {
       <CharacterInfo character={updatedChar} swapOob={true} />
       <AbilitiesPanel character={updatedChar} swapOob={true} />
       <SkillsPanel character={updatedChar} swapOob={true} />
+      <SpellsPanel character={updatedChar} swapOob={true} />
       <InventoryPanel character={updatedChar} swapOob={true} />
     </>
   )
@@ -618,6 +632,7 @@ characterRoutes.delete("/characters/:id/items/:itemId/effects/:effectId", async
       <CharacterInfo character={updatedChar} swapOob={true} />
       <AbilitiesPanel character={updatedChar} swapOob={true} />
       <SkillsPanel character={updatedChar} swapOob={true} />
+      <SpellsPanel character={updatedChar} swapOob={true} />
       <InventoryPanel character={updatedChar} swapOob={true} />
     </>
   )
@@ -793,7 +808,7 @@ characterRoutes.post("/characters/:id/items/:itemId/charges", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<InventoryPanel character={updatedChar} swapOob={true} />)
 })
 
@@ -905,7 +920,7 @@ characterRoutes.post("/characters/:id/rest/short", async (c) => {
 
   // Return updated components and close modal
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(
     <>
       <CharacterInfo character={updatedChar} swapOob={true} />
@@ -946,7 +961,7 @@ characterRoutes.post("/characters/:id/rest/long", async (c) => {
 
   // Return updated components and close modal
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(
     <>
       <CharacterInfo character={updatedChar} swapOob={true} />
@@ -1059,7 +1074,7 @@ characterRoutes.post("/characters/:id/edit/abilities", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(
     <>
       <AbilitiesPanel character={updatedChar} swapOob={true} />
@@ -1086,7 +1101,7 @@ characterRoutes.post("/characters/:id/edit/skills", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(
     <>
       <SkillsPanel character={updatedChar} swapOob={true} />
@@ -1111,7 +1126,7 @@ characterRoutes.post("/characters/:id/edit/coins", async (c) => {
   }
 
   const updatedChar = (await computeCharacter(getDb(c), characterId))!
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<InventoryPanel character={updatedChar} swapOob={true} />)
 })
 
@@ -1127,20 +1142,24 @@ characterRoutes.get("/characters/:id/avatars", async (c) => {
 })
 
 // GET /characters/:id/avatars/lightbox - Show avatar lightbox at specific index
+// Uses authorizeCharacterLightbox to allow any campaign member to view avatars
 characterRoutes.get("/characters/:id/avatars/lightbox", async (c) => {
   const characterId = c.req.param("id")
   const indexParam = c.req.query("index")
   const currentIndex = indexParam ? Number.parseInt(indexParam, 10) : 0
 
-  const authResult = await authorizeCharacter(c, characterId)
+  const authResult = await authorizeCharacterLightbox(c, characterId)
   if (!authResult.allowed) return handleUnallowed(c, authResult.reason)
 
-  const char = (await computeCharacter(getDb(c), characterId))!
+  const char = authResult.character
+  const isReadOnly = authResult.accessType !== "owner"
 
   // Validate index is in bounds
   const validIndex = currentIndex >= 0 && currentIndex < char.avatars.length ? currentIndex : 0
 
-  return c.html(<AvatarLightbox character={char} currentIndex={validIndex} />)
+  return c.html(
+    <AvatarLightbox character={char} currentIndex={validIndex} isReadOnly={isReadOnly} />
+  )
 })
 
 // POST /characters/:id/avatars - Create new avatar with optional crop
@@ -1443,6 +1462,6 @@ characterRoutes.post("/characters/:id/notes/restore/:noteId", async (c) => {
     restored_from_id: noteId,
   })
 
-  c.header("HX-Trigger", "closeEditModal")
+  c.header("HX-Trigger", "closeDetailModal")
   return c.html(<SessionNotes characterId={characterId} currentNote={restoredNote} />)
 })
diff --git a/src/routes/profile.test.ts b/src/routes/profile.test.ts
new file mode 100644
index 0000000..bcb95c1
--- /dev/null
+++ b/src/routes/profile.test.ts
@@ -0,0 +1,175 @@
+import { beforeEach, describe, expect, test } from "bun:test"
+import type { User } from "@src/db/users"
+import { useTestApp } from "@src/test/app"
+import { userFactory } from "@src/test/factories/user"
+import { expectElement, makeRequest, parseHtml } from "@src/test/http"
+
+describe("GET /profile", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is not authenticated", () => {
+    test("redirects to login page", async () => {
+      const response = await makeRequest(testCtx.app, "/profile")
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toContain("/login")
+    })
+  })
+
+  describe("when user is authenticated", () => {
+    let user: User
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+    })
+
+    test("renders profile page", async () => {
+      const response = await makeRequest(testCtx.app, "/profile", { user })
+
+      expect(response.status).toBe(200)
+      const document = await parseHtml(response)
+      const title = expectElement(document, "h1")
+      expect(title.textContent).toContain("Profile")
+    })
+
+    test("shows user email as readonly", async () => {
+      const response = await makeRequest(testCtx.app, "/profile", { user })
+
+      const document = await parseHtml(response)
+      const emailInput = expectElement(document, "#email") as HTMLInputElement
+      expect(emailInput.getAttribute("value")).toBe(user.email)
+      expect(emailInput.getAttribute("readonly")).toBe("")
+      expect(emailInput.getAttribute("disabled")).toBe("")
+    })
+
+    test("shows empty name field when user has no name", async () => {
+      const response = await makeRequest(testCtx.app, "/profile", { user })
+
+      const document = await parseHtml(response)
+      const nameInput = expectElement(document, "#name") as HTMLInputElement
+      expect(nameInput.getAttribute("value")).toBe("")
+    })
+
+    describe("when user has a name set", () => {
+      beforeEach(async () => {
+        // Update user with a name
+        await testCtx.db`UPDATE users SET name = 'Test Name' WHERE id = ${user.id}`
+        user.name = "Test Name"
+      })
+
+      test("shows existing name in form", async () => {
+        const response = await makeRequest(testCtx.app, "/profile", { user })
+
+        const document = await parseHtml(response)
+        const nameInput = expectElement(document, "#name") as HTMLInputElement
+        expect(nameInput.getAttribute("value")).toBe("Test Name")
+      })
+    })
+  })
+})
+
+describe("POST /profile", () => {
+  const testCtx = useTestApp()
+
+  describe("when user is not authenticated", () => {
+    test("redirects to login page", async () => {
+      const response = await makeRequest(testCtx.app, "/profile", {
+        method: "POST",
+        body: new URLSearchParams({ name: "New Name" }).toString(),
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      })
+
+      expect(response.status).toBe(302)
+      expect(response.headers.get("Location")).toContain("/login")
+    })
+  })
+
+  describe("when user is authenticated", () => {
+    let user: User
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+    })
+
+    test("updates user name", async () => {
+      const response = await makeRequest(testCtx.app, "/profile", {
+        user,
+        method: "POST",
+        body: new URLSearchParams({ name: "New Display Name" }).toString(),
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      })
+
+      expect(response.status).toBe(200)
+
+      // Verify database was updated
+      const result = await testCtx.db`SELECT name FROM users WHERE id = ${user.id}`
+      expect(result[0].name).toBe("New Display Name")
+    })
+
+    test("shows success message after update", async () => {
+      const response = await makeRequest(testCtx.app, "/profile", {
+        user,
+        method: "POST",
+        body: new URLSearchParams({ name: "New Display Name" }).toString(),
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      })
+
+      const document = await parseHtml(response)
+      const alert = expectElement(document, ".alert-success")
+      expect(alert.textContent).toContain("Profile updated successfully")
+    })
+
+    test("allows clearing name to empty", async () => {
+      // First set a name
+      await testCtx.db`UPDATE users SET name = 'Old Name' WHERE id = ${user.id}`
+
+      const response = await makeRequest(testCtx.app, "/profile", {
+        user,
+        method: "POST",
+        body: new URLSearchParams({ name: "" }).toString(),
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      })
+
+      expect(response.status).toBe(200)
+
+      // Verify database was updated to null
+      const result = await testCtx.db`SELECT name FROM users WHERE id = ${user.id}`
+      expect(result[0].name).toBe(null)
+    })
+
+    test("trims whitespace from name", async () => {
+      const response = await makeRequest(testCtx.app, "/profile", {
+        user,
+        method: "POST",
+        body: new URLSearchParams({ name: "  Trimmed Name  " }).toString(),
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      })
+
+      expect(response.status).toBe(200)
+
+      const result = await testCtx.db`SELECT name FROM users WHERE id = ${user.id}`
+      expect(result[0].name).toBe("Trimmed Name")
+    })
+
+    test("rejects name longer than 100 characters", async () => {
+      const longName = "a".repeat(101)
+
+      const response = await makeRequest(testCtx.app, "/profile", {
+        user,
+        method: "POST",
+        body: new URLSearchParams({ name: longName }).toString(),
+        headers: { "Content-Type": "application/x-www-form-urlencoded" },
+      })
+
+      expect(response.status).toBe(200)
+
+      const document = await parseHtml(response)
+      const errorDiv = expectElement(document, ".invalid-feedback")
+      expect(errorDiv.textContent).toContain("100 characters or less")
+
+      // Verify database was not updated
+      const result = await testCtx.db`SELECT name FROM users WHERE id = ${user.id}`
+      expect(result[0].name).toBe(null)
+    })
+  })
+})
diff --git a/src/routes/profile.tsx b/src/routes/profile.tsx
new file mode 100644
index 0000000..b9eb3d6
--- /dev/null
+++ b/src/routes/profile.tsx
@@ -0,0 +1,43 @@
+import { Profile } from "@src/components/Profile"
+import { getDb } from "@src/db"
+import * as users from "@src/db/users"
+import { Hono } from "hono"
+
+export const profileRoutes = new Hono()
+
+profileRoutes.get("/profile", (c) => {
+  const user = c.var.user!
+  return c.render(<Profile user={user} />, { title: "Profile" })
+})
+
+profileRoutes.post("/profile", async (c) => {
+  const user = c.var.user!
+  const formData = await c.req.formData()
+  const name = (formData.get("name") as string)?.trim() || null
+
+  const errors: Record<string, string> = {}
+
+  // Validate name length if provided
+  if (name && name.length > 100) {
+    errors.name = "Name must be 100 characters or less"
+  }
+
+  // If validation errors, re-render form with errors
+  if (Object.keys(errors).length > 0) {
+    const values = { name: name || "" }
+    return c.html(<Profile user={user} values={values} errors={errors} />)
+  }
+
+  // Update user
+  const db = getDb(c)
+  const updatedUser = await users.update(db, user.id, { name })
+
+  if (!updatedUser) {
+    return c.html(
+      <Profile user={user} errors={{ general: "Failed to update profile. Please try again." }} />
+    )
+  }
+
+  // Re-render form with success message
+  return c.html(<Profile user={updatedUser} success />)
+})
diff --git a/src/services/authorize.test.ts b/src/services/authorize.test.ts
index 493b363..d9c3af3 100644
--- a/src/services/authorize.test.ts
+++ b/src/services/authorize.test.ts
@@ -1,10 +1,21 @@
 import { beforeEach, describe, expect, test } from "bun:test"
+import type { Campaign } from "@src/db/campaigns"
 import type { Character } from "@src/db/characters"
 import type { User } from "@src/db/users"
 import { useTestApp } from "@src/test/app"
+import {
+  campaignCharacterFactory,
+  campaignFactory,
+  campaignMemberFactory,
+} from "@src/test/factories/campaign"
 import { characterFactory } from "@src/test/factories/character"
 import { userFactory } from "@src/test/factories/user"
-import { authorizeCharacter, handleUnallowed } from "./authorize"
+import {
+  authorizeCharacter,
+  authorizeCharacterLightbox,
+  authorizeCharacterView,
+  handleUnallowed,
+} from "./authorize"
 
 describe("authorizeCharacter", () => {
   const testCtx = useTestApp()
@@ -86,7 +97,7 @@ describe("authorizeCharacter", () => {
         character = await characterFactory.create({ user_id: user.id }, testCtx.db)
       })
 
-      test("returns allowed with character", async () => {
+      test("returns allowed with character and owner accessType", async () => {
         const mockContext = {
           var: { user },
           get: () => testCtx.db,
@@ -99,6 +110,7 @@ describe("authorizeCharacter", () => {
         if (result.allowed) {
           expect(result.character.id).toBe(character.id)
           expect(result.character.name).toBe(character.name)
+          expect(result.accessType).toBe("owner")
         }
       })
     })
@@ -228,3 +240,348 @@ describe("handleUnallowed", () => {
     })
   })
 })
+
+describe("authorizeCharacterView", () => {
+  const testCtx = useTestApp()
+
+  describe("when user owns the character", () => {
+    let user: User
+    let character: Character
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+    })
+
+    test("returns allowed with owner accessType", async () => {
+      const mockContext = {
+        var: { user },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacterView(mockContext, character.id)
+
+      expect(result.allowed).toBe(true)
+      if (result.allowed) {
+        expect(result.character.id).toBe(character.id)
+        expect(result.accessType).toBe("owner")
+      }
+    })
+  })
+
+  describe("when user is DM of a campaign containing the character", () => {
+    let dm: User
+    let player: User
+    let campaign: Campaign
+    let playerCharacter: Character
+
+    beforeEach(async () => {
+      // Create DM and player
+      dm = await userFactory.create({}, testCtx.db)
+      player = await userFactory.create({}, testCtx.db)
+
+      // Create campaign with DM
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+
+      // Add player to campaign
+      await campaignMemberFactory.create(
+        {
+          campaign_id: campaign.id,
+          user_id: player.id,
+          role: "player",
+          invited_by: dm.id,
+        },
+        testCtx.db
+      )
+
+      // Create player's character
+      playerCharacter = await characterFactory.create({ user_id: player.id }, testCtx.db)
+
+      // Add character to campaign
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: playerCharacter.id,
+          added_by: player.id,
+        },
+        testCtx.db
+      )
+    })
+
+    test("returns allowed with dm accessType", async () => {
+      const mockContext = {
+        var: { user: dm },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacterView(mockContext, playerCharacter.id)
+
+      expect(result.allowed).toBe(true)
+      if (result.allowed) {
+        expect(result.character.id).toBe(playerCharacter.id)
+        expect(result.accessType).toBe("dm")
+      }
+    })
+  })
+
+  describe("when user is not DM and does not own the character", () => {
+    let randomUser: User
+    let owner: User
+    let character: Character
+
+    beforeEach(async () => {
+      owner = await userFactory.create({}, testCtx.db)
+      randomUser = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: owner.id }, testCtx.db)
+    })
+
+    test("returns not_owner reason", async () => {
+      const mockContext = {
+        var: { user: randomUser },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacterView(mockContext, character.id)
+
+      expect(result.allowed).toBe(false)
+      if (!result.allowed) {
+        expect(result.reason).toBe("not_owner")
+      }
+    })
+  })
+
+  describe("when user is a player in the campaign (not DM)", () => {
+    let dm: User
+    let player1: User
+    let player2: User
+    let campaign: Campaign
+    let player1Character: Character
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      player1 = await userFactory.create({}, testCtx.db)
+      player2 = await userFactory.create({}, testCtx.db)
+
+      // Create campaign
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+
+      // Add both players to campaign
+      await campaignMemberFactory.create(
+        {
+          campaign_id: campaign.id,
+          user_id: player1.id,
+          role: "player",
+          invited_by: dm.id,
+        },
+        testCtx.db
+      )
+      await campaignMemberFactory.create(
+        {
+          campaign_id: campaign.id,
+          user_id: player2.id,
+          role: "player",
+          invited_by: dm.id,
+        },
+        testCtx.db
+      )
+
+      // Create player1's character and add to campaign
+      player1Character = await characterFactory.create({ user_id: player1.id }, testCtx.db)
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: player1Character.id,
+          added_by: player1.id,
+        },
+        testCtx.db
+      )
+    })
+
+    test("player2 cannot view player1 character (returns not_owner)", async () => {
+      const mockContext = {
+        var: { user: player2 },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacterView(mockContext, player1Character.id)
+
+      expect(result.allowed).toBe(false)
+      if (!result.allowed) {
+        expect(result.reason).toBe("not_owner")
+      }
+    })
+  })
+})
+
+describe("authorizeCharacterLightbox", () => {
+  const testCtx = useTestApp()
+
+  describe("when user owns the character", () => {
+    let user: User
+    let character: Character
+
+    beforeEach(async () => {
+      user = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: user.id }, testCtx.db)
+    })
+
+    test("returns allowed with owner accessType", async () => {
+      const mockContext = {
+        var: { user },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacterLightbox(mockContext, character.id)
+
+      expect(result.allowed).toBe(true)
+      if (result.allowed) {
+        expect(result.character.id).toBe(character.id)
+        expect(result.accessType).toBe("owner")
+      }
+    })
+  })
+
+  describe("when user is DM of a campaign containing the character", () => {
+    let dm: User
+    let player: User
+    let campaign: Campaign
+    let playerCharacter: Character
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      player = await userFactory.create({}, testCtx.db)
+
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+
+      await campaignMemberFactory.create(
+        {
+          campaign_id: campaign.id,
+          user_id: player.id,
+          role: "player",
+          invited_by: dm.id,
+        },
+        testCtx.db
+      )
+
+      playerCharacter = await characterFactory.create({ user_id: player.id }, testCtx.db)
+
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: playerCharacter.id,
+          added_by: player.id,
+        },
+        testCtx.db
+      )
+    })
+
+    test("returns allowed with dm accessType", async () => {
+      const mockContext = {
+        var: { user: dm },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacterLightbox(mockContext, playerCharacter.id)
+
+      expect(result.allowed).toBe(true)
+      if (result.allowed) {
+        expect(result.character.id).toBe(playerCharacter.id)
+        expect(result.accessType).toBe("dm")
+      }
+    })
+  })
+
+  describe("when user is a player in the campaign (party member)", () => {
+    let dm: User
+    let player1: User
+    let player2: User
+    let campaign: Campaign
+    let player1Character: Character
+
+    beforeEach(async () => {
+      dm = await userFactory.create({}, testCtx.db)
+      player1 = await userFactory.create({}, testCtx.db)
+      player2 = await userFactory.create({}, testCtx.db)
+
+      campaign = await campaignFactory.create({ created_by: dm.id }, testCtx.db)
+
+      await campaignMemberFactory.create(
+        {
+          campaign_id: campaign.id,
+          user_id: player1.id,
+          role: "player",
+          invited_by: dm.id,
+        },
+        testCtx.db
+      )
+      await campaignMemberFactory.create(
+        {
+          campaign_id: campaign.id,
+          user_id: player2.id,
+          role: "player",
+          invited_by: dm.id,
+        },
+        testCtx.db
+      )
+
+      player1Character = await characterFactory.create({ user_id: player1.id }, testCtx.db)
+      await campaignCharacterFactory.create(
+        {
+          campaign_id: campaign.id,
+          character_id: player1Character.id,
+          added_by: player1.id,
+        },
+        testCtx.db
+      )
+    })
+
+    test("player2 can access player1 character lightbox with party accessType", async () => {
+      const mockContext = {
+        var: { user: player2 },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacterLightbox(mockContext, player1Character.id)
+
+      expect(result.allowed).toBe(true)
+      if (result.allowed) {
+        expect(result.character.id).toBe(player1Character.id)
+        expect(result.accessType).toBe("party")
+      }
+    })
+  })
+
+  describe("when user is not a member of any campaign with the character", () => {
+    let randomUser: User
+    let owner: User
+    let character: Character
+
+    beforeEach(async () => {
+      owner = await userFactory.create({}, testCtx.db)
+      randomUser = await userFactory.create({}, testCtx.db)
+      character = await characterFactory.create({ user_id: owner.id }, testCtx.db)
+    })
+
+    test("returns not_owner reason", async () => {
+      const mockContext = {
+        var: { user: randomUser },
+        get: () => testCtx.db,
+        // biome-ignore lint/suspicious/noExplicitAny: test mock
+      } as any
+
+      const result = await authorizeCharacterLightbox(mockContext, character.id)
+
+      expect(result.allowed).toBe(false)
+      if (!result.allowed) {
+        expect(result.reason).toBe("not_owner")
+      }
+    })
+  })
+})
diff --git a/src/services/authorize.ts b/src/services/authorize.ts
index 774cc7b..795298b 100644
--- a/src/services/authorize.ts
+++ b/src/services/authorize.ts
@@ -1,4 +1,5 @@
 import { getDb } from "@src/db"
+import { getUserCharacterCampaignRole } from "@src/db/campaign_characters"
 import { setFlashMsg } from "@src/middleware/flash"
 import type { Context } from "hono"
 import { type ComputedCharacter, computeCharacter } from "./computeCharacter"
@@ -8,15 +9,23 @@ import { type ComputedCharacter, computeCharacter } from "./computeCharacter"
  */
 export type UnallowedReason = "not_authenticated" | "character_not_found" | "not_owner"
 
+/**
+ * Access type for a character - how the user is authorized to access it
+ * - owner: User owns the character (full access)
+ * - dm: User is DM of a campaign containing this character (read-only view)
+ * - party: User is a member of a campaign containing this character (lightbox only)
+ */
+export type AccessType = "owner" | "dm" | "party"
+
 /**
  * Result of authorization check - discriminated union
  */
 export type AllowedResult =
-  | { allowed: true; character: ComputedCharacter }
+  | { allowed: true; character: ComputedCharacter; accessType: AccessType }
   | { allowed: false; reason: UnallowedReason }
 
 /**
- * Authorize access to a character
+ * Authorize access to a character (owner only)
  *
  * Checks:
  * 1. User is authenticated
@@ -46,7 +55,87 @@ export async function authorizeCharacter(c: Context, characterId: string): Promi
   }
 
   // Success!
-  return { allowed: true, character }
+  return { allowed: true, character, accessType: "owner" }
+}
+
+/**
+ * Authorize view access to a character (owner or DM)
+ *
+ * Wraps authorizeCharacter and additionally allows DMs of campaigns
+ * containing this character to view it.
+ *
+ * @param c - Hono context (must have user from auth middleware)
+ * @param characterId - ID of character to authorize
+ * @returns AllowedResult with either the character and access type, or a reason for denial
+ */
+export async function authorizeCharacterView(
+  c: Context,
+  characterId: string
+): Promise<AllowedResult> {
+  // First try owner authorization
+  const ownerResult = await authorizeCharacter(c, characterId)
+  if (ownerResult.allowed) {
+    return ownerResult
+  }
+
+  // If not owner, check campaign membership role
+  if (ownerResult.reason === "not_owner") {
+    const user = c.var.user
+    if (user) {
+      const db = getDb(c)
+      const campaignRole = await getUserCharacterCampaignRole(db, characterId, user.id)
+      if (campaignRole === "dm") {
+        // Re-fetch character for the result (authorizeCharacter already validated it exists)
+        const character = await computeCharacter(db, characterId)
+        if (character) {
+          return { allowed: true, character, accessType: "dm" }
+        }
+      }
+    }
+  }
+
+  // Not authorized
+  return ownerResult
+}
+
+/**
+ * Authorize lightbox access to a character (owner, DM, or party member)
+ *
+ * Extends authorizeCharacterView to also allow any campaign member
+ * (players, viewers) to view the character's avatar lightbox.
+ *
+ * @param c - Hono context (must have user from auth middleware)
+ * @param characterId - ID of character to authorize
+ * @returns AllowedResult with either the character and access type, or a reason for denial
+ */
+export async function authorizeCharacterLightbox(
+  c: Context,
+  characterId: string
+): Promise<AllowedResult> {
+  // First try owner authorization
+  const ownerResult = await authorizeCharacter(c, characterId)
+  if (ownerResult.allowed) {
+    return ownerResult
+  }
+
+  // If not owner, check campaign membership role (dm or party)
+  if (ownerResult.reason === "not_owner") {
+    const user = c.var.user
+    if (user) {
+      const db = getDb(c)
+      const campaignRole = await getUserCharacterCampaignRole(db, characterId, user.id)
+      if (campaignRole) {
+        // Re-fetch character for the result (authorizeCharacter already validated it exists)
+        const character = await computeCharacter(db, characterId)
+        if (character) {
+          return { allowed: true, character, accessType: campaignRole }
+        }
+      }
+    }
+  }
+
+  // Not authorized
+  return ownerResult
 }
 
 /**
diff --git a/src/services/campaigns/addCharacter.ts b/src/services/campaigns/addCharacter.ts
new file mode 100644
index 0000000..d0de5ad
--- /dev/null
+++ b/src/services/campaigns/addCharacter.ts
@@ -0,0 +1,54 @@
+import * as campaignCharacters from "@src/db/campaign_characters"
+import type { CampaignMemberRole } from "@src/db/campaign_members"
+import * as characters from "@src/db/characters"
+import type { ServiceResult } from "@src/lib/serviceResult"
+import type { SQL } from "bun"
+import type { ComputedCampaign } from "./compute"
+
+export type AddCharacterResult = ServiceResult<{ campaignCharacterId: string }>
+
+/**
+ * Add a character to a campaign
+ *
+ * @param role - The user's role in the campaign. DMs add NPCs (hidden), players add characters (visible).
+ */
+export async function addCharacterToCampaign(
+  db: SQL,
+  campaign: ComputedCampaign,
+  characterId: string,
+  userId: string,
+  role: CampaignMemberRole
+): Promise<AddCharacterResult> {
+  // Verify character exists
+  const character = await characters.findById(db, characterId)
+  if (!character) {
+    return { complete: false, values: {}, errors: { general: "Character not found" } }
+  }
+
+  // Verify user owns the character
+  if (character.user_id !== userId) {
+    return { complete: false, values: {}, errors: { general: "You don't own this character" } }
+  }
+
+  // Check if character already in campaign (using computed data)
+  const alreadyInCampaign = campaign.characters.some((cc) => cc.character_id === characterId)
+  if (alreadyInCampaign) {
+    return {
+      complete: false,
+      values: {},
+      errors: { general: "Character already in this campaign" },
+    }
+  }
+
+  // DMs add NPCs (hidden by default), players add characters (immediately visible)
+  const revealedAt = role === "dm" ? null : new Date()
+
+  const campaignCharacter = await campaignCharacters.create(db, {
+    campaign_id: campaign.id,
+    character_id: characterId,
+    added_by: userId,
+    revealed_at: revealedAt,
+  })
+
+  return { complete: true, result: { campaignCharacterId: campaignCharacter.id } }
+}
diff --git a/src/services/campaigns/archive.ts b/src/services/campaigns/archive.ts
new file mode 100644
index 0000000..f059d16
--- /dev/null
+++ b/src/services/campaigns/archive.ts
@@ -0,0 +1,28 @@
+import { archive, type Campaign } from "@src/db/campaigns"
+import type { SQL } from "bun"
+
+export type ArchiveCampaignResult =
+  | { complete: true }
+  | { complete: false; errors: Record<string, string> }
+
+/**
+ * Archive a campaign
+ * Sets archived_at to current timestamp
+ */
+export async function archiveCampaign(db: SQL, campaign: Campaign): Promise<ArchiveCampaignResult> {
+  try {
+    // Check if campaign is already archived
+    if (campaign.archived_at !== null) {
+      return { complete: false, errors: { _form: "Campaign is already archived" } }
+    }
+
+    await archive(db, campaign.id)
+
+    return { complete: true }
+  } catch (error) {
+    if (error instanceof Error) {
+      return { complete: false, errors: { _form: error.message } }
+    }
+    return { complete: false, errors: { _form: "Failed to archive campaign" } }
+  }
+}
diff --git a/src/services/campaigns/authorize.ts b/src/services/campaigns/authorize.ts
new file mode 100644
index 0000000..c493372
--- /dev/null
+++ b/src/services/campaigns/authorize.ts
@@ -0,0 +1,109 @@
+import { getDb } from "@src/db"
+import type { CampaignMemberRole } from "@src/db/campaign_members"
+import { setFlashMsg } from "@src/middleware/flash"
+import type { Context } from "hono"
+import { type ComputedCampaign, computeCampaign } from "./compute"
+
+/**
+ * Reasons why campaign access might not be allowed
+ */
+export type UnallowedReason = "not_authenticated" | "campaign_not_found" | "not_member"
+
+/**
+ * Result of authorization check - discriminated union
+ */
+export type CampaignAllowedResult =
+  | { allowed: true; campaign: ComputedCampaign; role: CampaignMemberRole }
+  | { allowed: false; reason: UnallowedReason }
+
+/**
+ * Authorize access to a campaign
+ *
+ * Checks:
+ * 1. User is authenticated
+ * 2. Campaign exists
+ * 3. User is a member (creator, DM, player, or viewer)
+ *
+ * @param c - Hono context (must have user from auth middleware)
+ * @param campaignId - ID of campaign to authorize
+ * @returns CampaignAllowedResult with either the campaign and role or a reason for denial
+ */
+export async function authorizeCampaign(
+  c: Context,
+  campaignId: string
+): Promise<CampaignAllowedResult> {
+  // Check authentication
+  const user = c.var.user
+  if (!user) {
+    return { allowed: false, reason: "not_authenticated" }
+  }
+
+  // Fetch campaign with computed data
+  const campaign = await computeCampaign(getDb(c), campaignId, user.id)
+  if (!campaign) {
+    return { allowed: false, reason: "campaign_not_found" }
+  }
+
+  // Check membership (userRole is null if not a member)
+  if (!campaign.userRole) {
+    return { allowed: false, reason: "not_member" }
+  }
+
+  // Success!
+  return { allowed: true, campaign, role: campaign.userRole }
+}
+
+/**
+ * Handle unauthorized campaign access by setting flash message and redirecting
+ *
+ * Automatically detects HTMX requests and uses appropriate redirect mechanism.
+ * Uses semantic HTTP status codes:
+ * - 401 for not authenticated
+ * - 404 for campaign not found
+ * - 403 for not member
+ *
+ * @param c - Hono context (must have isHtmx from HTMX middleware)
+ * @param reason - Why access was denied
+ * @returns Response with appropriate status code and redirect
+ */
+export async function handleCampaignUnallowed(
+  c: Context,
+  reason: UnallowedReason
+): Promise<Response> {
+  // Determine status code and flash message
+  let status: 401 | 403 | 404
+  let message: string
+  let redirectTo: string
+
+  switch (reason) {
+    case "not_authenticated":
+      status = 401
+      message = "Please log in to continue"
+      redirectTo = "/login"
+      break
+    case "campaign_not_found":
+      status = 404
+      message = "Campaign not found"
+      redirectTo = "/campaigns"
+      break
+    case "not_member":
+      status = 403
+      message = "You do not have permission to access this campaign"
+      redirectTo = "/campaigns"
+      break
+  }
+
+  // Set flash message
+  await setFlashMsg(c, message, "error")
+
+  // Handle redirect based on request type
+  const isHtmx = c.var.isHtmx
+  if (isHtmx) {
+    // HTMX request - use HX-Redirect header with semantic status
+    c.header("HX-Redirect", redirectTo)
+    return c.body(null, status)
+  }
+
+  // Regular request - use 302 redirect (semantic status codes don't work with redirects)
+  return c.redirect(redirectTo, 302)
+}
diff --git a/src/services/campaigns/changeRole.ts b/src/services/campaigns/changeRole.ts
new file mode 100644
index 0000000..24fc9fc
--- /dev/null
+++ b/src/services/campaigns/changeRole.ts
@@ -0,0 +1,128 @@
+import * as campaignCharacters from "@src/db/campaign_characters"
+import * as campaignMembers from "@src/db/campaign_members"
+import { CampaignMemberRoleSchema } from "@src/db/campaign_members"
+import type { ServiceResult } from "@src/lib/serviceResult"
+import type { ComputedCampaign, ComputedCampaignMember } from "@src/services/campaigns/compute"
+import type { SQL } from "bun"
+import { z } from "zod"
+
+export const ChangeRoleSchema = z.object({
+  newRole: CampaignMemberRoleSchema,
+})
+
+export interface ChangeRoleResult {
+  npcsRevealed: number
+}
+
+export type ChangeRoleServiceResult = ServiceResult<ChangeRoleResult>
+
+/**
+ * Change a campaign member's role
+ *
+ * Validation rules:
+ * - Cannot reduce DM count below 1
+ * - DM->Viewer blocked if DM has any NPCs (viewers can't own characters)
+ * - DM->Player reveals all their NPCs (they become player characters)
+ * - Player->Viewer blocked if player has characters (must remove first)
+ * - Player->DM: Characters automatically become NPCs (via isNPC computed field)
+ * - DMs cannot change other DMs' roles (they must do it themselves)
+ */
+export async function changeRole(
+  db: SQL,
+  campaign: ComputedCampaign,
+  member: ComputedCampaignMember,
+  actingUserId: string,
+  data: Record<string, string>
+): Promise<ChangeRoleServiceResult> {
+  // Validate with Zod schema
+  const parsed = ChangeRoleSchema.safeParse(data)
+  if (!parsed.success) {
+    const errors: Record<string, string> = {}
+    for (const issue of parsed.error.issues) {
+      const field = issue.path[0] as string
+      errors[field] = issue.message
+    }
+    return { complete: false, values: data, errors }
+  }
+
+  const { newRole } = parsed.data
+  const currentRole = member.role
+
+  // No change needed
+  if (currentRole === newRole) {
+    return {
+      complete: false,
+      values: data,
+      errors: { _form: "Member already has this role" },
+    }
+  }
+
+  // Must be an accepted member
+  if (!member.accepted_at) {
+    return {
+      complete: false,
+      values: data,
+      errors: { _form: "Cannot change role of pending invites" },
+    }
+  }
+
+  // Determine if this is self-change or DM changing another member
+  const isSelfChange = member.user_id === actingUserId
+
+  // For DM changing another member (not self), cannot change other DMs
+  if (!isSelfChange && currentRole === "dm") {
+    return {
+      complete: false,
+      values: data,
+      errors: { _form: "Cannot change another DM's role. They must change it themselves." },
+    }
+  }
+
+  // Count accepted DMs
+  const acceptedDMs = campaign.members.filter((m) => m.role === "dm" && m.accepted_at)
+
+  // If DM is changing role, ensure at least one DM remains
+  if (currentRole === "dm" && acceptedDMs.length <= 1) {
+    return {
+      complete: false,
+      values: data,
+      errors: { _form: "Cannot change role: you are the only DM" },
+    }
+  }
+
+  // Count characters added by this member
+  const characterCount = campaign.characters.filter((c) => c.added_by === member.user_id).length
+
+  // Block DM->Viewer if DM has NPCs (viewers can't own characters)
+  if (currentRole === "dm" && newRole === "viewer" && characterCount > 0) {
+    return {
+      complete: false,
+      values: data,
+      errors: { _form: "Remove your NPCs from the campaign before becoming a viewer" },
+    }
+  }
+
+  // Block player->viewer if player has characters
+  if (currentRole === "player" && newRole === "viewer" && characterCount > 0) {
+    return {
+      complete: false,
+      values: data,
+      errors: { _form: "Remove your characters from the campaign before becoming a viewer" },
+    }
+  }
+
+  let npcsRevealed = 0
+
+  // Handle DM->Player transition: reveal all their NPCs
+  if (currentRole === "dm" && newRole === "player") {
+    npcsRevealed = await campaignCharacters.revealAllByAddedBy(db, campaign.id, member.user_id)
+  }
+
+  // Update the role
+  await campaignMembers.updateRole(db, member.id, newRole)
+
+  return {
+    complete: true,
+    result: { npcsRevealed },
+  }
+}
diff --git a/src/services/campaigns/compute.ts b/src/services/campaigns/compute.ts
new file mode 100644
index 0000000..dd9566a
--- /dev/null
+++ b/src/services/campaigns/compute.ts
@@ -0,0 +1,136 @@
+import {
+  type CampaignCharacterWithAddedBy,
+  findByCampaignId as findCharactersByCampaignId,
+} from "@src/db/campaign_characters"
+import {
+  type CampaignMemberRole,
+  type CampaignMemberWithUser,
+  findByCampaignId as findMembersByCampaignId,
+} from "@src/db/campaign_members"
+import { type Campaign, findById } from "@src/db/campaigns"
+import { type ListCharacter, listCharacters } from "@src/services/listCharacters"
+import type { SQL } from "bun"
+
+export interface ComputedCampaignMember extends CampaignMemberWithUser {
+  hasCharacter: boolean
+}
+
+export interface ComputedCampaignCharacter extends CampaignCharacterWithAddedBy {
+  name: string
+  level: number
+  class_name: string
+  user_id: string // owner of character
+  isNPC: boolean
+  avatars: ListCharacter["avatars"]
+}
+
+export interface ComputedCampaign extends Campaign {
+  userRole: CampaignMemberRole | null
+  currentUserId: string
+  members: ComputedCampaignMember[]
+  characters: ComputedCampaignCharacter[]
+  canInviteMembers: boolean
+  canAddCharacters: boolean
+  canRevealCharacters: boolean
+  canManageViewers: boolean
+  canChangeDMRole: boolean
+}
+
+function getUserRole(members: CampaignMemberWithUser[], userId: string): CampaignMemberRole | null {
+  const membership = members.find((m) => m.user_id === userId)
+  if (membership?.accepted_at) {
+    return membership.role
+  }
+  return null
+}
+
+function getDMUserIds(members: CampaignMemberWithUser[]): Set<string> {
+  const dmUserIds = new Set<string>()
+  for (const member of members) {
+    if (member.role === "dm" && member.accepted_at) {
+      dmUserIds.add(member.user_id)
+    }
+  }
+  return dmUserIds
+}
+
+function buildComputedMembers(
+  members: CampaignMemberWithUser[],
+  charactersInCampaign: CampaignCharacterWithAddedBy[]
+): ComputedCampaignMember[] {
+  // Map character owners for hasCharacter check
+  const characterOwners = new Set(
+    charactersInCampaign.map((cc) => cc.added_by) // added_by is who added to campaign
+  )
+
+  return members.map((m) => ({
+    ...m,
+    hasCharacter: characterOwners.has(m.user_id),
+  }))
+}
+
+function buildComputedCharacters(
+  campaignChars: CampaignCharacterWithAddedBy[],
+  characterDetails: ListCharacter[],
+  dmUserIds: Set<string>
+): ComputedCampaignCharacter[] {
+  // Create lookup map for character details
+  const detailsMap = new Map(characterDetails.map((c) => [c.id, c]))
+
+  return campaignChars.map((cc) => {
+    const details = detailsMap.get(cc.character_id)
+
+    return {
+      ...cc,
+      name: details?.name || "Unknown",
+      level: details?.totalLevel || 1,
+      class_name: details?.classes[0]?.class || "Unknown",
+      user_id: details?.user_id || "",
+      isNPC: dmUserIds.has(cc.added_by),
+      avatars: details?.avatars || [],
+    }
+  })
+}
+
+export async function computeCampaign(
+  db: SQL,
+  campaignId: string,
+  userId: string
+): Promise<ComputedCampaign | null> {
+  // Load campaign
+  const campaign = await findById(db, campaignId)
+  if (!campaign) return null
+
+  // Load all members and campaign_characters using typed db functions
+  const [members, campaignChars, characterDetails] = await Promise.all([
+    findMembersByCampaignId(db, campaignId),
+    findCharactersByCampaignId(db, campaignId),
+    listCharacters(db, { campaignId }),
+  ])
+
+  // Compute user role and DM set
+  const userRole = getUserRole(members, userId)
+  const dmUserIds = getDMUserIds(members)
+
+  // Build computed members and characters
+  const computedMembers = buildComputedMembers(members, campaignChars)
+  const computedCharacters = buildComputedCharacters(campaignChars, characterDetails, dmUserIds)
+
+  // Compute permission flags
+  const isDM = userRole === "dm"
+  const isPlayer = userRole === "player"
+  const dmCount = computedMembers.filter((m) => m.role === "dm" && m.accepted_at).length
+
+  return {
+    ...campaign,
+    userRole,
+    currentUserId: userId,
+    members: computedMembers,
+    characters: computedCharacters,
+    canInviteMembers: isDM,
+    canAddCharacters: isDM || isPlayer,
+    canRevealCharacters: isDM,
+    canManageViewers: isDM || isPlayer,
+    canChangeDMRole: isDM && dmCount > 1,
+  }
+}
diff --git a/src/services/campaigns/create.ts b/src/services/campaigns/create.ts
new file mode 100644
index 0000000..f432a02
--- /dev/null
+++ b/src/services/campaigns/create.ts
@@ -0,0 +1,90 @@
+import { beginOrSavepoint } from "@src/db"
+import { create as createCampaignMemberDb } from "@src/db/campaign_members"
+import { type Campaign, create as createCampaignDb, nameExistsForUser } from "@src/db/campaigns"
+import type { User } from "@src/db/users"
+import { Checkbox, OptionalString } from "@src/lib/formSchemas"
+import type { SQL } from "bun"
+import { z } from "zod"
+
+export type CreateCampaignResult =
+  | { complete: true; campaign: Campaign }
+  | { complete: false; values: Record<string, string>; errors: Record<string, string> }
+
+const CreateCampaignApiSchema = z.object({
+  name: z
+    .string()
+    .min(3, "Campaign name must be at least 3 characters")
+    .max(100, "That name is too long!"),
+  description: OptionalString(),
+  is_check: Checkbox().optional().default(false),
+})
+
+export async function createCampaign(
+  db: SQL,
+  user: User,
+  data: Record<string, string>
+): Promise<CreateCampaignResult> {
+  const errors: Record<string, string> = {}
+  const values = data
+  const isCheck = data.is_check === "true"
+
+  // Soft validation for is_check
+  if (!data.name) {
+    if (!isCheck) {
+      errors.name = "Campaign name is required"
+    }
+  } else if (data.name.trim().length === 0) {
+    errors.name = "Campaign name is required"
+  } else if (data.name.length < 3) {
+    errors.name = "Campaign name must be at least 3 characters"
+  } else if (data.name.length > 100) {
+    errors.name = "Campaign name must be less than 100 characters"
+  } else {
+    const exists = await nameExistsForUser(db, user.id, data.name)
+    if (exists) {
+      errors.name = "You already have a campaign with this name"
+    }
+  }
+
+  // Early return for validation errors or check mode
+  if (isCheck || Object.keys(errors).length > 0) {
+    return { complete: false, values, errors }
+  }
+
+  // Full validation with Zod schema
+  const result = CreateCampaignApiSchema.safeParse(data)
+  if (!result.success) {
+    const zodErrors: Record<string, string> = {}
+    for (const issue of result.error.issues) {
+      const field = issue.path[0] as string
+      zodErrors[field] = issue.message
+    }
+    return { complete: false, values, errors: zodErrors }
+  }
+
+  const validated = result.data
+
+  // Create campaign in database
+  const campaign = await beginOrSavepoint(db, async (tx) => {
+    const campaign = await createCampaignDb(tx, {
+      name: validated.name,
+      description: validated.description || null,
+      created_by: user.id,
+    })
+
+    // Add creator as DM member
+    await createCampaignMemberDb(tx, {
+      campaign_id: campaign.id,
+      user_id: user.id,
+      role: "dm",
+      invite_token: null,
+      invited_by: user.id,
+      accepted_at: new Date(),
+      declined_at: null,
+    })
+
+    return campaign
+  })
+
+  return { complete: true, campaign }
+}
diff --git a/src/services/campaigns/deleteInvite.ts b/src/services/campaigns/deleteInvite.ts
new file mode 100644
index 0000000..c706843
--- /dev/null
+++ b/src/services/campaigns/deleteInvite.ts
@@ -0,0 +1,44 @@
+import * as campaignMembers from "@src/db/campaign_members"
+import type { ServiceResult } from "@src/lib/serviceResult"
+import type { SQL } from "bun"
+
+export type DeleteInviteResult = ServiceResult<object>
+
+/**
+ * Delete a campaign member or invite
+ *
+ * DMs can:
+ * - Delete pending or declined invites
+ * - Remove accepted viewers and players from the campaign
+ *
+ * Cannot remove accepted DMs (they must leave themselves).
+ */
+export async function deleteInvite(
+  db: SQL,
+  campaignId: string,
+  memberId: string
+): Promise<DeleteInviteResult> {
+  const member = await campaignMembers.findById(db, memberId)
+
+  if (!member) {
+    return { complete: false, values: {}, errors: { _form: "Member not found" } }
+  }
+
+  if (member.campaign_id !== campaignId) {
+    return { complete: false, values: {}, errors: { _form: "Member not found" } }
+  }
+
+  // Can always delete pending or declined invites
+  // For accepted members, viewers and players can be removed by DMs
+  // DMs must leave themselves
+  if (member.accepted_at && member.role === "dm") {
+    return {
+      complete: false,
+      values: {},
+      errors: { _form: "Cannot remove accepted DMs. They must leave themselves." },
+    }
+  }
+
+  await campaignMembers.softDelete(db, memberId)
+  return { complete: true, result: {} }
+}
diff --git a/src/services/campaigns/invite.ts b/src/services/campaigns/invite.ts
new file mode 100644
index 0000000..1db6e8a
--- /dev/null
+++ b/src/services/campaigns/invite.ts
@@ -0,0 +1,170 @@
+import { isSmtpConfigured } from "@src/config"
+import { beginOrSavepoint } from "@src/db"
+import * as campaignMembers from "@src/db/campaign_members"
+import { CampaignMemberRoleSchema } from "@src/db/campaign_members"
+import type { Campaign } from "@src/db/campaigns"
+import type { User } from "@src/db/users"
+import * as users from "@src/db/users"
+import { sendCampaignInviteEmail } from "@src/lib/email"
+import { Checkbox } from "@src/lib/formSchemas"
+import { ulid } from "@src/lib/ids"
+import { logger } from "@src/lib/logger"
+import type { ServiceResult } from "@src/lib/serviceResult"
+import type { SQL } from "bun"
+import { z } from "zod"
+
+export const CreateInviteSchema = z.object({
+  email: z.email("Invalid email address"),
+  role: CampaignMemberRoleSchema,
+  baseUrl: z.url({ protocol: /^https?$/ }),
+  forceReinvite: Checkbox(),
+})
+
+export type InviteResult = ServiceResult<{ memberId: string }>
+
+class InviteError extends Error {
+  field: string
+  constructor(message: string, field: string) {
+    super(message)
+    this.name = "InviteError"
+    this.field = field
+  }
+}
+
+/**
+ * Create a campaign invite and send the invitation email
+ */
+export async function createInvite(
+  db: SQL,
+  campaign: Campaign,
+  inviter: User,
+  data: Record<string, string>
+): Promise<InviteResult> {
+  // Validate with Zod schema
+  const parsed = CreateInviteSchema.safeParse(data)
+  if (!parsed.success) {
+    const errors: Record<string, string> = {}
+    for (const issue of parsed.error.issues) {
+      const field = issue.path[0] as string
+      errors[field] = issue.message
+    }
+    return { complete: false, values: data, errors }
+  }
+
+  const { email, role, baseUrl, forceReinvite } = parsed.data
+
+  // Build magic link URL
+  const inviteToken = ulid()
+  const magicLink = `${baseUrl}/invite/view?token=${inviteToken}`
+
+  // Use transaction so we rollback if email fails
+  const result = await beginOrSavepoint(db, async (tx) => {
+    // Find or create user
+    let user = await users.findByEmail(tx, email)
+    if (!user) {
+      user = await users.create(tx, email)
+    }
+
+    // Check if user has any membership record (including deleted)
+    const existingMember = await campaignMembers.findAnyByCampaignAndUser(tx, campaign.id, user.id)
+    let member: campaignMembers.CampaignMember
+    if (existingMember) {
+      // Check if member was deleted (removed from campaign)
+      if (existingMember.deleted_at) {
+        if (!forceReinvite) {
+          return {
+            error: new InviteError("This user was previously removed from this campaign", "email"),
+            canReinvite: true,
+          }
+        }
+        // Reset the deleted member's invite
+        const resetMember = await campaignMembers.resetInvite(
+          tx,
+          existingMember.id,
+          inviteToken,
+          inviter.id
+        )
+        if (!resetMember) {
+          return { error: new InviteError("Failed to reset invitation", "_form") }
+        }
+        member = resetMember
+      } else if (existingMember.accepted_at) {
+        return { error: new InviteError("This user is already a member of this campaign", "email") }
+      } else if (existingMember.declined_at) {
+        if (!forceReinvite) {
+          return {
+            error: new InviteError("This user has previously declined this invitation", "email"),
+            canReinvite: true,
+          }
+        }
+        // Reset the declined invite
+        const resetMember = await campaignMembers.resetInvite(
+          tx,
+          existingMember.id,
+          inviteToken,
+          inviter.id
+        )
+        if (!resetMember) {
+          return { error: new InviteError("Failed to reset invitation", "_form") }
+        }
+        member = resetMember
+      } else {
+        // Pending invite exists
+        return {
+          error: new InviteError("An invitation has already been sent to this user", "email"),
+        }
+      }
+    } else {
+      // Create campaign member with pending status and invite token
+      member = await campaignMembers.create(tx, {
+        campaign_id: campaign.id,
+        user_id: user.id,
+        role,
+        invite_token: inviteToken,
+        invited_by: inviter.id,
+        accepted_at: null,
+        declined_at: null,
+      })
+    }
+
+    // Send invite email (inside transaction so we rollback on failure)
+    if (isSmtpConfigured()) {
+      try {
+        await sendCampaignInviteEmail({
+          to: email,
+          campaignName: campaign.name,
+          inviterEmail: inviter.email!,
+          role,
+          magicLink,
+        })
+      } catch (emailError) {
+        logger.error("Failed to send invite email", emailError as Error)
+        // Throw to trigger rollback
+        throw emailError
+      }
+    } else {
+      logger.warn("Cannot send invite email: SMTP is not configured")
+      logger.info(`Invite link for ${email}: ${magicLink}`)
+    }
+
+    return { member }
+  }).catch((error) => {
+    logger.error("Failed to create invite", error as Error)
+    return { error: new InviteError("Failed to send invitation email", "_form") }
+  })
+
+  if ("error" in result && result.error) {
+    const errors: Record<string, string> = { [result.error.field]: result.error.message }
+    if ("canReinvite" in result && result.canReinvite) {
+      errors._canReinvite = "true"
+    }
+    return { complete: false, values: data, errors }
+  }
+
+  if ("member" in result) {
+    return { complete: true, result: { memberId: result.member.id } }
+  }
+
+  // Should never reach here, but satisfy TypeScript
+  return { complete: false, values: data, errors: { _form: "Unknown error" } }
+}
diff --git a/src/services/campaigns/leaveCampaign.ts b/src/services/campaigns/leaveCampaign.ts
new file mode 100644
index 0000000..ddfee3c
--- /dev/null
+++ b/src/services/campaigns/leaveCampaign.ts
@@ -0,0 +1,65 @@
+import * as campaignCharacters from "@src/db/campaign_characters"
+import * as campaignMembers from "@src/db/campaign_members"
+import type { ServiceResult } from "@src/lib/serviceResult"
+import type { SQL } from "bun"
+
+export type LeaveCampaignResult = ServiceResult<object>
+
+/**
+ * Leave a campaign (self-removal)
+ *
+ * Any accepted member can leave a campaign, except:
+ * - The sole DM cannot leave (campaign must have at least one DM)
+ * - Members with characters in the campaign must remove them first
+ */
+export async function leaveCampaign(
+  db: SQL,
+  campaignId: string,
+  userId: string
+): Promise<LeaveCampaignResult> {
+  const member = await campaignMembers.findByCampaignAndUser(db, campaignId, userId)
+
+  if (!member) {
+    return {
+      complete: false,
+      values: {},
+      errors: { _form: "You are not a member of this campaign" },
+    }
+  }
+
+  if (!member.accepted_at) {
+    return {
+      complete: false,
+      values: {},
+      errors: { _form: "You have not accepted this invitation yet" },
+    }
+  }
+
+  // Check if user has characters in the campaign
+  const characters = await campaignCharacters.findByCampaignId(db, campaignId)
+  const userCharacters = characters.filter((c) => c.added_by === userId)
+  if (userCharacters.length > 0) {
+    return {
+      complete: false,
+      values: {},
+      errors: { _form: "Remove your characters from the campaign before leaving." },
+    }
+  }
+
+  // If user is a DM, check if they're the only one
+  if (member.role === "dm") {
+    const allMembers = await campaignMembers.findByCampaignId(db, campaignId)
+    const acceptedDMs = allMembers.filter((m) => m.role === "dm" && m.accepted_at)
+
+    if (acceptedDMs.length <= 1) {
+      return {
+        complete: false,
+        values: {},
+        errors: { _form: "You cannot leave as the sole DM. Promote another member to DM first." },
+      }
+    }
+  }
+
+  await campaignMembers.softDelete(db, member.id)
+  return { complete: true, result: {} }
+}
diff --git a/src/services/campaigns/list.ts b/src/services/campaigns/list.ts
new file mode 100644
index 0000000..5134492
--- /dev/null
+++ b/src/services/campaigns/list.ts
@@ -0,0 +1,116 @@
+import type { Campaign } from "@src/db/campaigns"
+import type { SQL } from "bun"
+
+// User's invite status for a campaign
+export type InviteStatus = "pending" | "accepted" | "needs_character" | null
+
+export interface ListCampaign extends Campaign {
+  member_count: number
+  character_count: number
+  invite_status: InviteStatus
+  invited_by_email: string | null
+}
+
+export interface ListCampaignsFilter {
+  userId: string
+  includeArchived?: boolean
+}
+
+/**
+ * Efficiently fetch campaigns with member and character counts for list views
+ * Uses a single query with JOIN and aggregation to avoid N+1 queries
+ * Also includes the user's invite status for each campaign
+ */
+export async function listCampaigns(db: SQL, filter: ListCampaignsFilter): Promise<ListCampaign[]> {
+  const { userId, includeArchived = false } = filter
+
+  // Build the archive filter based on includeArchived
+  // biome-ignore lint/suspicious/noExplicitAny: Bun SQL query
+  let archiveFilterQ: SQL.Query<any>
+  if (includeArchived) {
+    archiveFilterQ = db`true`
+  } else {
+    archiveFilterQ = db`c.archived_at IS NULL`
+  }
+
+  const results = await db`
+    WITH campaign_member_counts AS (
+      SELECT
+        campaign_id,
+        COUNT(*) as member_count
+      FROM campaign_members
+      WHERE accepted_at IS NOT NULL
+      GROUP BY campaign_id
+    ),
+    campaign_character_counts AS (
+      SELECT
+        campaign_id,
+        COUNT(*) as character_count
+      FROM campaign_characters
+      GROUP BY campaign_id
+    ),
+    user_membership AS (
+      SELECT
+        cm.campaign_id,
+        cm.accepted_at,
+        cm.declined_at,
+        cm.role,
+        cm.invited_by,
+        CASE
+          WHEN cm.accepted_at IS NULL AND cm.declined_at IS NULL THEN 'pending'
+          WHEN cm.accepted_at IS NOT NULL AND cm.role = 'player' AND NOT EXISTS (
+            SELECT 1 FROM campaign_characters cc
+            WHERE cc.campaign_id = cm.campaign_id AND cc.added_by = cm.user_id
+          ) THEN 'needs_character'
+          WHEN cm.accepted_at IS NOT NULL THEN 'accepted'
+          ELSE NULL
+        END as invite_status
+      FROM campaign_members cm
+      WHERE cm.user_id = ${userId}
+        AND cm.deleted_at IS NULL
+    )
+    SELECT
+      c.*,
+      COALESCE(mc.member_count, 0) as member_count,
+      COALESCE(cc.character_count, 0) as character_count,
+      um.invite_status,
+      inviter.email as invited_by_email
+    FROM campaigns c
+    LEFT JOIN campaign_member_counts mc ON mc.campaign_id = c.id
+    LEFT JOIN campaign_character_counts cc ON cc.campaign_id = c.id
+    LEFT JOIN user_membership um ON um.campaign_id = c.id
+    LEFT JOIN users inviter ON inviter.id = um.invited_by
+    WHERE c.id IN (
+         SELECT campaign_id
+         FROM campaign_members
+         WHERE user_id = ${userId}
+           AND declined_at IS NULL
+           AND deleted_at IS NULL
+       )
+      AND ${archiveFilterQ}
+    ORDER BY
+      CASE WHEN um.invite_status = 'pending' THEN 0
+           WHEN um.invite_status = 'needs_character' THEN 1
+           ELSE 2
+      END,
+      c.archived_at IS NULL DESC,
+      c.created_at DESC
+  `
+
+  return results.map(
+    // biome-ignore lint/suspicious/noExplicitAny: database row
+    (row: any): ListCampaign => ({
+      id: row.id,
+      name: row.name,
+      description: row.description,
+      created_by: row.created_by,
+      archived_at: row.archived_at ? new Date(row.archived_at) : null,
+      created_at: new Date(row.created_at),
+      updated_at: new Date(row.updated_at),
+      member_count: Number(row.member_count),
+      character_count: Number(row.character_count),
+      invite_status: row.invite_status as InviteStatus,
+      invited_by_email: row.invited_by_email ?? null,
+    })
+  )
+}
diff --git a/src/services/campaigns/removeCharacter.ts b/src/services/campaigns/removeCharacter.ts
new file mode 100644
index 0000000..0cc1412
--- /dev/null
+++ b/src/services/campaigns/removeCharacter.ts
@@ -0,0 +1,43 @@
+import * as campaignCharacters from "@src/db/campaign_characters"
+import type { ServiceResult } from "@src/lib/serviceResult"
+import type { SQL } from "bun"
+import type { ComputedCampaign } from "./compute"
+
+export type RemoveCharacterResult = ServiceResult<object>
+
+/**
+ * Remove a character from a campaign
+ * - Character owners can remove their own characters
+ * - DMs can remove any character
+ */
+export async function removeCharacterFromCampaign(
+  db: SQL,
+  campaign: ComputedCampaign,
+  characterId: string
+): Promise<RemoveCharacterResult> {
+  // Find the character in the campaign
+  const campaignCharacter = campaign.characters.find((cc) => cc.character_id === characterId)
+  if (!campaignCharacter) {
+    return { complete: false, values: {}, errors: { general: "Character not in this campaign" } }
+  }
+
+  // Check permissions: owner or DM can remove
+  const isOwner = campaignCharacter.user_id === campaign.currentUserId
+  const isDM = campaign.userRole === "dm"
+
+  if (!isOwner && !isDM) {
+    return {
+      complete: false,
+      values: {},
+      errors: { general: "You don't have permission to remove this character" },
+    }
+  }
+
+  // Remove the character
+  const deleted = await campaignCharacters.deleteByCharacterId(db, campaign.id, characterId)
+  if (!deleted) {
+    return { complete: false, values: {}, errors: { general: "Failed to remove character" } }
+  }
+
+  return { complete: true, result: {} }
+}
diff --git a/src/services/campaigns/respond.ts b/src/services/campaigns/respond.ts
new file mode 100644
index 0000000..76f5099
--- /dev/null
+++ b/src/services/campaigns/respond.ts
@@ -0,0 +1,48 @@
+import * as campaignMembers from "@src/db/campaign_members"
+import type { User } from "@src/db/users"
+import type { ServiceResult } from "@src/lib/serviceResult"
+import type { SQL } from "bun"
+
+type RespondAction = "accept" | "decline"
+
+export type RespondResult = ServiceResult<{ action: RespondAction }>
+
+/**
+ * Respond to a campaign invite (accept or decline)
+ *
+ * Note: This service cannot use authorizeCampaign because pending invites
+ * don't have accepted_at set, so getUserRole() returns null and the user
+ * would be treated as "not_member". We must look up membership directly.
+ */
+export async function respondToInvite(
+  db: SQL,
+  campaignId: string,
+  user: User,
+  action: RespondAction
+): Promise<RespondResult> {
+  const member = await campaignMembers.findByCampaignAndUser(db, campaignId, user.id)
+
+  if (!member) {
+    return { complete: false, values: {}, errors: { _form: "Invitation not found" } }
+  }
+
+  if (member.accepted_at) {
+    return {
+      complete: false,
+      values: {},
+      errors: { _form: "You have already accepted this invitation" },
+    }
+  }
+
+  if (member.declined_at) {
+    return { complete: false, values: {}, errors: { _form: "This invitation has been declined" } }
+  }
+
+  if (action === "accept") {
+    await campaignMembers.accept(db, member.id)
+  } else {
+    await campaignMembers.decline(db, member.id)
+  }
+
+  return { complete: true, result: { action } }
+}
diff --git a/src/services/campaigns/revealCharacter.ts b/src/services/campaigns/revealCharacter.ts
new file mode 100644
index 0000000..d7a7d59
--- /dev/null
+++ b/src/services/campaigns/revealCharacter.ts
@@ -0,0 +1,47 @@
+import * as campaignCharacters from "@src/db/campaign_characters"
+import type { ServiceResult } from "@src/lib/serviceResult"
+import type { SQL } from "bun"
+
+export type RevealCharacterResult = ServiceResult<{ characterId: string }>
+
+/**
+ * Reveal an NPC to all players in the campaign
+ */
+export async function revealCharacter(
+  db: SQL,
+  campaignId: string,
+  characterId: string
+): Promise<RevealCharacterResult> {
+  const updated = await campaignCharacters.updateRevealedAt(db, campaignId, characterId, new Date())
+
+  if (!updated) {
+    return {
+      complete: false,
+      values: {},
+      errors: { general: "Character not found in this campaign" },
+    }
+  }
+
+  return { complete: true, result: { characterId } }
+}
+
+/**
+ * Hide an NPC from players in the campaign
+ */
+export async function hideCharacter(
+  db: SQL,
+  campaignId: string,
+  characterId: string
+): Promise<RevealCharacterResult> {
+  const updated = await campaignCharacters.updateRevealedAt(db, campaignId, characterId, null)
+
+  if (!updated) {
+    return {
+      complete: false,
+      values: {},
+      errors: { general: "Character not found in this campaign" },
+    }
+  }
+
+  return { complete: true, result: { characterId } }
+}
diff --git a/src/services/campaigns/unarchive.ts b/src/services/campaigns/unarchive.ts
new file mode 100644
index 0000000..ae22096
--- /dev/null
+++ b/src/services/campaigns/unarchive.ts
@@ -0,0 +1,41 @@
+import { type Campaign, nameExistsForUser, unarchive } from "@src/db/campaigns"
+import type { SQL } from "bun"
+
+export type UnarchiveCampaignResult =
+  | { complete: true }
+  | { complete: false; errors: Record<string, string> }
+
+/**
+ * Unarchive a campaign
+ * Sets archived_at to NULL, making the campaign active again
+ * Checks that the campaign name is not already in use by another active campaign
+ */
+export async function unarchiveCampaign(
+  db: SQL,
+  campaign: Campaign
+): Promise<UnarchiveCampaignResult> {
+  try {
+    // Check if campaign is already active
+    if (campaign.archived_at === null) {
+      return { complete: false, errors: { _form: "Campaign is already active" } }
+    }
+
+    // Check if name is already in use by another active campaign
+    const nameExists = await nameExistsForUser(db, campaign.created_by, campaign.name)
+    if (nameExists) {
+      return {
+        complete: false,
+        errors: { _form: `Campaign name "${campaign.name}" is already in use` },
+      }
+    }
+
+    await unarchive(db, campaign.id)
+
+    return { complete: true }
+  } catch (error) {
+    if (error instanceof Error) {
+      return { complete: false, errors: { _form: error.message } }
+    }
+    return { complete: false, errors: { _form: "Failed to unarchive campaign" } }
+  }
+}
diff --git a/src/services/listCharacters.ts b/src/services/listCharacters.ts
index 56a6694..516e43d 100644
--- a/src/services/listCharacters.ts
+++ b/src/services/listCharacters.ts
@@ -18,160 +18,143 @@ export interface ListCharacter extends Character {
   >[]
 }
 
+export type ListCharactersFilter =
+  | {
+      campaignId: string
+    }
+  | {
+      userId: string
+      includeArchived?: boolean
+    }
+
+// biome-ignore lint/suspicious/noExplicitAny: database row
+function parseListCharacterRow(row: any): ListCharacter {
+  const classes: CharacterClass[] = Array.isArray(row.classes) ? row.classes : []
+  const totalLevel = classes.reduce((sum, c) => sum + c.level, 0)
+
+  const avatars = row.primary_avatar
+    ? [
+        {
+          uploadUrl: row.primary_avatar.uploadUrl,
+          is_primary: true,
+          crop_x_percent: row.primary_avatar.crop_x_percent,
+          crop_y_percent: row.primary_avatar.crop_y_percent,
+          crop_width_percent: row.primary_avatar.crop_width_percent,
+          crop_height_percent: row.primary_avatar.crop_height_percent,
+        },
+      ]
+    : []
+
+  return {
+    id: row.id,
+    user_id: row.user_id,
+    name: row.name,
+    species: row.species,
+    lineage: row.lineage,
+    background: row.background,
+    alignment: row.alignment,
+    ruleset: row.ruleset,
+    archived_at: row.archived_at ? new Date(row.archived_at) : null,
+    created_at: new Date(row.created_at),
+    updated_at: new Date(row.updated_at),
+    classes,
+    totalLevel,
+    avatars,
+  }
+}
+
 /**
  * Efficiently fetch characters with their class/level information for list views
  * Uses a single query with JOIN and aggregation to avoid N+1 queries
  */
 export async function listCharacters(
   db: SQL,
-  userId: string,
-  includeArchived = false
+  filter: ListCharactersFilter
 ): Promise<ListCharacter[]> {
-  // Get current level for each class per character (same logic as getCurrentLevels)
-  const query = includeArchived
-    ? db`
-        WITH current_levels AS (
-          SELECT
-            cl.character_id,
-            cl.class,
-            cl.level,
-            cl.subclass,
-            cl.id,
-            ROW_NUMBER() OVER (PARTITION BY cl.character_id, cl.class ORDER BY cl.id DESC) as rn
-          FROM char_levels cl
-          INNER JOIN characters c ON c.id = cl.character_id
-          WHERE c.user_id = ${userId}
-        ),
-        primary_avatars AS (
-          SELECT DISTINCT ON (ca.character_id)
-            ca.character_id,
-            ca.crop_x_percent,
-            ca.crop_y_percent,
-            ca.crop_width_percent,
-            ca.crop_height_percent,
-            u.id as upload_id
-          FROM character_avatars ca
-          INNER JOIN uploads u ON u.id = ca.upload_id
-          WHERE ca.is_primary = true
-          ORDER BY ca.character_id, ca.created_at DESC
-        )
-        SELECT
-          c.*,
-          COALESCE(
-            json_agg(
-              json_build_object('class', cl.class, 'level', cl.level, 'subclass', cl.subclass)
-              ORDER BY cl.id ASC
-            ) FILTER (WHERE cl.class IS NOT NULL),
-            '[]'
-          ) as classes,
-          CASE
-            WHEN pa.upload_id IS NOT NULL THEN
-              json_build_object(
-                'uploadUrl', '/uploads/' || pa.upload_id,
-                'crop_x_percent', pa.crop_x_percent,
-                'crop_y_percent', pa.crop_y_percent,
-                'crop_width_percent', pa.crop_width_percent,
-                'crop_height_percent', pa.crop_height_percent
-              )
-            ELSE NULL
-          END as primary_avatar
+  // biome-ignore lint/suspicious/noExplicitAny: Bun SQL query
+  let characterIdsQ: SQL.Query<any>, orderByQ: SQL.Query<any>
+  if ("campaignId" in filter) {
+    characterIdsQ = db`
+      SELECT cc.character_id as id
+      FROM campaign_characters cc
+      WHERE cc.campaign_id = ${filter.campaignId}
+    `
+    orderByQ = db`c.id ASC`
+  } else if ("userId" in filter) {
+    if (filter.includeArchived) {
+      characterIdsQ = db`
+        SELECT c.id
         FROM characters c
-        LEFT JOIN current_levels cl ON cl.character_id = c.id AND cl.rn = 1
-        LEFT JOIN primary_avatars pa ON pa.character_id = c.id
-        WHERE c.user_id = ${userId}
-        GROUP BY c.id, pa.upload_id, pa.crop_x_percent, pa.crop_y_percent, pa.crop_width_percent, pa.crop_height_percent
-        ORDER BY c.archived_at IS NULL DESC, c.created_at DESC
+        WHERE c.user_id = ${filter.userId}
       `
-    : db`
-        WITH current_levels AS (
-          SELECT
-            cl.character_id,
-            cl.class,
-            cl.level,
-            cl.subclass,
-            cl.id,
-            ROW_NUMBER() OVER (PARTITION BY cl.character_id, cl.class ORDER BY cl.id DESC) as rn
-          FROM char_levels cl
-          INNER JOIN characters c ON c.id = cl.character_id
-          WHERE c.user_id = ${userId} AND c.archived_at IS NULL
-        ),
-        primary_avatars AS (
-          SELECT DISTINCT ON (ca.character_id)
-            ca.character_id,
-            ca.crop_x_percent,
-            ca.crop_y_percent,
-            ca.crop_width_percent,
-            ca.crop_height_percent,
-            u.id as upload_id
-          FROM character_avatars ca
-          INNER JOIN uploads u ON u.id = ca.upload_id
-          WHERE ca.is_primary = true
-          ORDER BY ca.character_id, ca.created_at DESC
-        )
-        SELECT
-          c.*,
-          COALESCE(
-            json_agg(
-              json_build_object('class', cl.class, 'level', cl.level, 'subclass', cl.subclass)
-              ORDER BY cl.id ASC
-            ) FILTER (WHERE cl.class IS NOT NULL),
-            '[]'
-          ) as classes,
-          CASE
-            WHEN pa.upload_id IS NOT NULL THEN
-              json_build_object(
-                'uploadUrl', '/uploads/' || pa.upload_id,
-                'crop_x_percent', pa.crop_x_percent,
-                'crop_y_percent', pa.crop_y_percent,
-                'crop_width_percent', pa.crop_width_percent,
-                'crop_height_percent', pa.crop_height_percent
-              )
-            ELSE NULL
-          END as primary_avatar
-        FROM characters c
-        LEFT JOIN current_levels cl ON cl.character_id = c.id AND cl.rn = 1
-        LEFT JOIN primary_avatars pa ON pa.character_id = c.id
-        WHERE c.user_id = ${userId} AND c.archived_at IS NULL
-        GROUP BY c.id, pa.upload_id, pa.crop_x_percent, pa.crop_y_percent, pa.crop_width_percent, pa.crop_height_percent
-        ORDER BY c.created_at DESC
+      orderByQ = db`c.archived_at IS NULL DESC, c.id DESC`
+    } else {
+      characterIdsQ = db`
+      SELECT c.id
+      FROM characters c
+      WHERE c.user_id = ${filter.userId} AND c.archived_at IS NULL
       `
+      orderByQ = db`c.id DESC`
+    }
+  } else {
+    return []
+  }
 
-  const results = await query
-
-  // biome-ignore lint/suspicious/noExplicitAny: database row, validated by Zod
-  return results.map((row: any): ListCharacter => {
-    const classes: CharacterClass[] = Array.isArray(row.classes) ? row.classes : []
-    const totalLevel = classes.reduce((sum, c) => sum + c.level, 0)
-
-    // Convert primary_avatar JSON to avatars array format
-    const avatars = row.primary_avatar
-      ? [
-          {
-            uploadUrl: row.primary_avatar.uploadUrl,
-            is_primary: true,
-            crop_x_percent: row.primary_avatar.crop_x_percent,
-            crop_y_percent: row.primary_avatar.crop_y_percent,
-            crop_width_percent: row.primary_avatar.crop_width_percent,
-            crop_height_percent: row.primary_avatar.crop_height_percent,
-          },
-        ]
-      : []
+  // Build the query using Bun's SQL tagged template
+  // The structure is the same, just the filter conditions change
+  const results = await db`
+    WITH character_ids AS (${characterIdsQ}),
+    current_levels AS (
+      SELECT
+        cl.character_id,
+        cl.class,
+        cl.level,
+        cl.subclass,
+        cl.id,
+        ROW_NUMBER() OVER (PARTITION BY cl.character_id, cl.class ORDER BY cl.id DESC) as rn
+      FROM char_levels cl
+      WHERE cl.character_id IN (SELECT id FROM character_ids)
+    ),
+    primary_avatars AS (
+      SELECT DISTINCT ON (ca.character_id)
+        ca.character_id,
+        ca.crop_x_percent,
+        ca.crop_y_percent,
+        ca.crop_width_percent,
+        ca.crop_height_percent,
+        u.id as upload_id
+      FROM character_avatars ca
+      INNER JOIN uploads u ON u.id = ca.upload_id
+      WHERE ca.is_primary = true AND ca.character_id IN (SELECT id FROM character_ids)
+      ORDER BY ca.character_id, ca.created_at DESC
+    )
+    SELECT
+      c.*,
+      COALESCE(
+        json_agg(
+          json_build_object('class', cl.class, 'level', cl.level, 'subclass', cl.subclass)
+          ORDER BY cl.id ASC
+        ) FILTER (WHERE cl.class IS NOT NULL),
+        '[]'
+      ) as classes,
+      CASE
+        WHEN pa.upload_id IS NOT NULL THEN
+          json_build_object(
+            'uploadUrl', '/uploads/' || pa.upload_id,
+            'crop_x_percent', pa.crop_x_percent,
+            'crop_y_percent', pa.crop_y_percent,
+            'crop_width_percent', pa.crop_width_percent,
+            'crop_height_percent', pa.crop_height_percent
+          )
+        ELSE NULL
+      END as primary_avatar
+    FROM characters c
+    INNER JOIN character_ids ci ON ci.id = c.id
+    LEFT JOIN current_levels cl ON cl.character_id = c.id AND cl.rn = 1
+    LEFT JOIN primary_avatars pa ON pa.character_id = c.id
+    GROUP BY c.id, pa.upload_id, pa.crop_x_percent, pa.crop_y_percent, pa.crop_width_percent, pa.crop_height_percent
+    ORDER BY ${orderByQ}
+  `
 
-    return {
-      id: row.id,
-      user_id: row.user_id,
-      name: row.name,
-      species: row.species,
-      lineage: row.lineage,
-      background: row.background,
-      alignment: row.alignment,
-      ruleset: row.ruleset,
-      archived_at: row.archived_at ? new Date(row.archived_at) : null,
-      created_at: new Date(row.created_at),
-      updated_at: new Date(row.updated_at),
-      classes,
-      totalLevel,
-      avatars,
-    }
-  })
+  return results.map(parseListCharacterRow)
 }
diff --git a/src/test/factories/campaign.ts b/src/test/factories/campaign.ts
new file mode 100644
index 0000000..bb44ce8
--- /dev/null
+++ b/src/test/factories/campaign.ts
@@ -0,0 +1,125 @@
+import { faker } from "@faker-js/faker"
+import type { CampaignCharacter } from "@src/db/campaign_characters"
+import { create as createCampaignCharacterDb } from "@src/db/campaign_characters"
+import type { CampaignMember, CampaignMemberRole } from "@src/db/campaign_members"
+import { create as createCampaignMemberDb } from "@src/db/campaign_members"
+import type { Campaign, CreateCampaign } from "@src/db/campaigns"
+import { create as createCampaign } from "@src/db/campaigns"
+import { ulid } from "@src/lib/ids"
+import type { SQL } from "bun"
+import { Factory } from "fishery"
+
+interface CampaignFactoryParams {
+  name?: string
+  description?: string | null
+  created_by: string
+}
+
+/**
+ * Factory for building test campaign data
+ */
+const factory = Factory.define<Campaign, CampaignFactoryParams>(({ params }) => ({
+  id: "", // Will be generated by the database
+  name: params.name ?? `${faker.word.adjective()} ${faker.word.noun()} Campaign`,
+  description: params.description === undefined ? faker.lorem.sentence() : params.description,
+  created_by: params.created_by ?? "",
+  archived_at: null,
+  created_at: new Date(),
+  updated_at: new Date(),
+}))
+
+/**
+ * Create a test campaign in the database
+ * Usage:
+ *   const campaign = await campaignFactory.create({ created_by: user.id }, testCtx.db)
+ *   const campaign = await campaignFactory.create({ created_by: user.id, name: 'My Campaign' }, testCtx.db)
+ */
+export const campaignFactory = {
+  build: factory.build.bind(factory),
+  create: async (params: CampaignFactoryParams, db: SQL): Promise<Campaign> => {
+    const built = factory.build(params)
+
+    if (!built.created_by) {
+      throw new Error("created_by is required to create a campaign")
+    }
+
+    const campaignData: CreateCampaign = {
+      name: built.name,
+      description: built.description,
+      created_by: built.created_by,
+    }
+
+    const campaign = await createCampaign(db, campaignData)
+
+    // Add creator as DM member (same as create service does)
+    await createCampaignMemberDb(db, {
+      campaign_id: campaign.id,
+      user_id: built.created_by,
+      role: "dm",
+      invite_token: null,
+      invited_by: built.created_by,
+      accepted_at: new Date(),
+      declined_at: null,
+    })
+
+    return campaign
+  },
+}
+
+interface CampaignMemberFactoryParams {
+  campaign_id: string
+  user_id: string
+  role?: CampaignMemberRole
+  invited_by: string
+  // If true, generates an invite_token (for pending invites)
+  pending?: boolean
+}
+
+/**
+ * Create a test campaign member in the database
+ * Usage:
+ *   // Accepted member (default)
+ *   await campaignMemberFactory.create({ campaign_id, user_id, invited_by }, db)
+ *
+ *   // Pending invite
+ *   await campaignMemberFactory.create({ campaign_id, user_id, invited_by, pending: true }, db)
+ */
+export const campaignMemberFactory = {
+  create: async (params: CampaignMemberFactoryParams, db: SQL): Promise<CampaignMember> => {
+    const isPending = params.pending ?? false
+
+    return await createCampaignMemberDb(db, {
+      campaign_id: params.campaign_id,
+      user_id: params.user_id,
+      role: params.role ?? "player",
+      invite_token: isPending ? ulid() : null,
+      invited_by: params.invited_by,
+      accepted_at: isPending ? null : new Date(),
+      declined_at: null,
+    })
+  },
+}
+
+interface CampaignCharacterFactoryParams {
+  campaign_id: string
+  character_id: string
+  added_by: string
+  revealed_at?: Date | null
+}
+
+/**
+ * Create a test campaign character in the database
+ * Usage:
+ *   await campaignCharacterFactory.create({ campaign_id, character_id, added_by }, db)
+ */
+export const campaignCharacterFactory = {
+  create: async (params: CampaignCharacterFactoryParams, db: SQL): Promise<CampaignCharacter> => {
+    return await createCampaignCharacterDb(db, {
+      campaign_id: params.campaign_id,
+      character_id: params.character_id,
+      added_by: params.added_by,
+      // Use explicit undefined check to allow null for hidden NPCs
+      revealed_at: params.revealed_at !== undefined ? params.revealed_at : new Date(),
+    })
+  },
+}
diff --git a/src/test/factories/user.ts b/src/test/factories/user.ts
index ab39546..c9631fb 100644
--- a/src/test/factories/user.ts
+++ b/src/test/factories/user.ts
@@ -6,6 +6,7 @@ import { Factory } from "fishery"
 
 interface UserFactoryParams {
   email?: string
+  name?: string | null
 }
 
 /**
@@ -14,6 +15,7 @@ interface UserFactoryParams {
 const factory = Factory.define<User, UserFactoryParams>(({ params }) => ({
   id: "", // Will be generated by the database
   email: params.email ?? faker.internet.email(),
+  name: params.name ?? null,
   created_at: new Date().toISOString(),
   updated_at: new Date().toISOString(),
 }))
diff --git a/src/test/http.ts b/src/test/http.ts
index b7dd96e..41081f7 100644
--- a/src/test/http.ts
+++ b/src/test/http.ts
@@ -59,7 +59,13 @@ export async function parseHtml(response: Response): Promise<Document> {
     throw new Error(`Cannot parse empty HTML response. Status: ${response.status}`)
   }
 
-  const { document } = parseHTML(html)
+  // Wrap HTML fragments (content not starting with <!DOCTYPE or <html)
+  // in body tags so linkedom parses them correctly into document.body
+  const trimmed = html.trim().toLowerCase()
+  const needsWrapper = !trimmed.startsWith("<!doctype") && !trimmed.startsWith("<html")
+  const wrappedHtml = needsWrapper ? `<html><body>${html}</body></html>` : html
+
+  const { document } = parseHTML(wrappedHtml)
   return document
 }
 
diff --git a/static/character.js b/static/character.js
index 4a0d83c..c7ea868 100644
--- a/static/character.js
+++ b/static/character.js
@@ -1,23 +1,3 @@
-// Close edit modal when backend triggers closeEditModal event
-document.body.addEventListener('closeEditModal', function() {
-  const modalElement = document.getElementById('editModal');
-  if (modalElement) {
-    const modal = bootstrap.Modal.getInstance(modalElement);
-    if (modal) {
-      modal.hide();
-    }
-  }
-});
-
-// Open edit modal when backend triggers openEditModal event
-document.body.addEventListener('openEditModal', function() {
-  const modalElement = document.getElementById('editModal');
-  if (modalElement) {
-    const modal = new bootstrap.Modal(modalElement);
-    modal.show();
-  }
-});
-
 // scroll position restore and modal opening
 document.body.addEventListener('htmx:afterSwap', (e) => {
   const container = e.target;
@@ -116,7 +96,7 @@ async function handleAvatarUpload(characterId) {
 
     // Use htmx to assign avatar and update UI (shows gallery)
     htmx.ajax('POST', `/characters/${characterId}/avatars`, {
-      target: '#editModalContent',
+      target: '#detailModalContent',
       swap: 'innerHTML',
       values: { upload_id }
     })
diff --git a/static/detail-modal.js b/static/detail-modal.js
new file mode 100644
index 0000000..d0cb1cc
--- /dev/null
+++ b/static/detail-modal.js
@@ -0,0 +1,19 @@
+// Close detail modal when backend triggers closeDetailModal event
+document.body.addEventListener('closeDetailModal', function() {
+  const modalElement = document.getElementById('detailModal');
+  if (modalElement) {
+    const modal = bootstrap.Modal.getInstance(modalElement);
+    if (modal) {
+      modal.hide();
+    }
+  }
+});
+
+// Open detail modal when backend triggers openDetailModal event
+document.body.addEventListener('openDetailModal', function() {
+  const modalElement = document.getElementById('detailModal');
+  if (modalElement) {
+    const modal = new bootstrap.Modal(modalElement);
+    modal.show();
+  }
+});
diff --git a/static/placeholder-party.png b/static/placeholder-party.png
new file mode 100644
index 0000000..97ac02f
Binary files /dev/null and b/static/placeholder-party.png differ
diff --git a/static/placeholder-person.png b/static/placeholder-person.png
new file mode 100644
index 0000000..e76c154
Binary files /dev/null and b/static/placeholder-person.png differ
diff --git a/static/spells.js b/static/spells.js
index 7328953..1424357 100644
--- a/static/spells.js
+++ b/static/spells.js
@@ -1,11 +1,11 @@
 document.addEventListener('DOMContentLoaded', () => {
   const urlParams = new URLSearchParams(window.location.search);
   if (urlParams.has('openSpell')) {
-    const modal = new bootstrap.Modal(document.getElementById('spellModal'));
+    const modal = new bootstrap.Modal(document.getElementById('detailModal'));
     modal.show();
   }
 
-  document.getElementById('spellModal').addEventListener('hidden.bs.modal', () => {
+  document.getElementById('detailModal').addEventListener('hidden.bs.modal', () => {
     const url = new URL(window.location);
     url.searchParams.delete('openSpell');
     history.pushState(null, '', url);