diff --git a/Foxnouns.Backend/Controllers/MembersController.cs b/Foxnouns.Backend/Controllers/MembersController.cs
index ba9cf28..968b571 100644
--- a/Foxnouns.Backend/Controllers/MembersController.cs
+++ b/Foxnouns.Backend/Controllers/MembersController.cs
@@ -303,8 +303,8 @@ public class MembersController(
                     .SetProperty(u => u.LastActive, clock.GetCurrentInstant())
             );
 
-        // Re-fetch member to fetch the new sid
-        var updatedMember = await db.ResolveMemberAsync(CurrentUser!.Id, memberRef);
-        return Ok(memberRenderer.RenderMember(updatedMember, CurrentToken));
+        // Fetch the new sid then pass that to RenderMember
+        var newSid = await db.Members.Where(m => m.Id == member.Id).Select(m => m.Sid).FirstAsync();
+        return Ok(memberRenderer.RenderMember(member, CurrentToken, newSid));
     }
 }
diff --git a/Foxnouns.Backend/Controllers/UsersController.cs b/Foxnouns.Backend/Controllers/UsersController.cs
index 1d85c77..2693bef 100644
--- a/Foxnouns.Backend/Controllers/UsersController.cs
+++ b/Foxnouns.Backend/Controllers/UsersController.cs
@@ -1,4 +1,5 @@
 using System.Diagnostics.CodeAnalysis;
+using Coravel.Mailer.Mail.Helpers;
 using Coravel.Queuing.Interfaces;
 using EntityFramework.Exceptions.Common;
 using Foxnouns.Backend.Database;
@@ -116,6 +117,42 @@ public class UsersController(
         if (req.HasProperty(nameof(req.Avatar)))
             errors.Add(("avatar", ValidationUtils.ValidateAvatar(req.Avatar)));
 
+        if (req.HasProperty(nameof(req.MemberTitle)))
+        {
+            if (string.IsNullOrEmpty(req.MemberTitle))
+            {
+                user.MemberTitle = null;
+            }
+            else
+            {
+                errors.Add(("member_title", ValidationUtils.ValidateDisplayName(req.MemberTitle)));
+                user.MemberTitle = req.MemberTitle;
+            }
+        }
+
+        if (req.HasProperty(nameof(req.MemberListHidden)))
+            user.ListHidden = req.MemberListHidden == true;
+
+        if (req.HasProperty(nameof(req.Timezone)))
+        {
+            if (string.IsNullOrEmpty(req.Timezone))
+            {
+                user.Timezone = null;
+            }
+            else
+            {
+                if (TimeZoneInfo.TryFindSystemTimeZoneById(req.Timezone, out _))
+                    user.Timezone = req.Timezone;
+                else
+                    errors.Add(
+                        (
+                            "timezone",
+                            ValidationError.GenericValidationError("Invalid timezone", req.Timezone)
+                        )
+                    );
+            }
+        }
+
         ValidationUtils.Validate(errors);
         // This is fired off regardless of whether the transaction is committed
         // (atomic operations are hard when combined with background jobs)
@@ -253,6 +290,9 @@ public class UsersController(
         public Pronoun[]? Pronouns { get; init; }
         public Field[]? Fields { get; init; }
         public Snowflake[]? Flags { get; init; }
+        public string? MemberTitle { get; init; }
+        public bool? MemberListHidden { get; init; }
+        public string? Timezone { get; init; }
     }
 
     [HttpGet("@me/settings")]
@@ -306,13 +346,20 @@ public class UsersController(
                     .SetProperty(u => u.LastActive, clock.GetCurrentInstant())
             );
 
+        // Get the user's new sid
+        var newSid = await db
+            .Users.Where(u => u.Id == CurrentUser.Id)
+            .Select(u => u.Sid)
+            .FirstAsync();
+
         var user = await db.ResolveUserAsync(CurrentUser.Id);
         return Ok(
             await userRenderer.RenderUserAsync(
-                user,
+                CurrentUser,
                 CurrentUser,
                 CurrentToken,
-                renderMembers: false
+                renderMembers: false,
+                overrideSid: newSid
             )
         );
     }
diff --git a/Foxnouns.Backend/Database/Migrations/20241124201309_AddUserTimezone.cs b/Foxnouns.Backend/Database/Migrations/20241124201309_AddUserTimezone.cs
new file mode 100644
index 0000000..e317f65
--- /dev/null
+++ b/Foxnouns.Backend/Database/Migrations/20241124201309_AddUserTimezone.cs
@@ -0,0 +1,30 @@
+using Microsoft.EntityFrameworkCore.Infrastructure;
+using Microsoft.EntityFrameworkCore.Migrations;
+
+#nullable disable
+
+namespace Foxnouns.Backend.Database.Migrations
+{
+    /// <inheritdoc />
+    [DbContext(typeof(DatabaseContext))]
+    [Migration("20241124201309_AddUserTimezone")]
+    public partial class AddUserTimezone : Migration
+    {
+        /// <inheritdoc />
+        protected override void Up(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.AddColumn<string>(
+                name: "timezone",
+                table: "users",
+                type: "text",
+                nullable: true
+            );
+        }
+
+        /// <inheritdoc />
+        protected override void Down(MigrationBuilder migrationBuilder)
+        {
+            migrationBuilder.DropColumn(name: "timezone", table: "users");
+        }
+    }
+}
diff --git a/Foxnouns.Backend/Database/Migrations/DatabaseContextModelSnapshot.cs b/Foxnouns.Backend/Database/Migrations/DatabaseContextModelSnapshot.cs
index e1e05c2..d012fe0 100644
--- a/Foxnouns.Backend/Database/Migrations/DatabaseContextModelSnapshot.cs
+++ b/Foxnouns.Backend/Database/Migrations/DatabaseContextModelSnapshot.cs
@@ -434,6 +434,10 @@ namespace Foxnouns.Backend.Database.Migrations
                         .HasColumnName("sid")
                         .HasDefaultValueSql("find_free_user_sid()");
 
+                    b.Property<string>("Timezone")
+                        .HasColumnType("text")
+                        .HasColumnName("timezone");
+
                     b.Property<string>("Username")
                         .IsRequired()
                         .HasColumnType("text")
diff --git a/Foxnouns.Backend/Database/Models/User.cs b/Foxnouns.Backend/Database/Models/User.cs
index c8c12c5..367e293 100644
--- a/Foxnouns.Backend/Database/Models/User.cs
+++ b/Foxnouns.Backend/Database/Models/User.cs
@@ -15,6 +15,7 @@ public class User : BaseModel
     public string? Avatar { get; set; }
     public string[] Links { get; set; } = [];
     public bool ListHidden { get; set; }
+    public string? Timezone { get; set; }
 
     public List<FieldEntry> Names { get; set; } = [];
     public List<Pronoun> Pronouns { get; set; } = [];
diff --git a/Foxnouns.Backend/Properties/launchSettings.json b/Foxnouns.Backend/Properties/launchSettings.json
index b680651..b9e2ace 100644
--- a/Foxnouns.Backend/Properties/launchSettings.json
+++ b/Foxnouns.Backend/Properties/launchSettings.json
@@ -4,6 +4,7 @@
     "Development": {
       "commandName": "Project",
       "dotnetRunMessages": true,
+      "hotReloadEnabled": false,
       "launchBrowser": false,
       "externalUrlConfiguration": true,
       "environmentVariables": {
@@ -13,6 +14,7 @@
     "Production": {
       "commandName": "Project",
       "dotnetRunMessages": true,
+      "hotReloadEnabled": false,
       "launchBrowser": false,
       "externalUrlConfiguration": true,
       "environmentVariables": {
diff --git a/Foxnouns.Backend/Services/MemberRendererService.cs b/Foxnouns.Backend/Services/MemberRendererService.cs
index 7d7cac0..717f06c 100644
--- a/Foxnouns.Backend/Services/MemberRendererService.cs
+++ b/Foxnouns.Backend/Services/MemberRendererService.cs
@@ -24,13 +24,17 @@ public class MemberRendererService(DatabaseContext db, Config config)
         return members.Select(m => RenderPartialMember(m, renderUnlisted));
     }
 
-    public MemberResponse RenderMember(Member member, Token? token = null)
+    public MemberResponse RenderMember(
+        Member member,
+        Token? token = null,
+        string? overrideSid = null
+    )
     {
         var renderUnlisted = token?.UserId == member.UserId && token.HasScope("user.read_hidden");
 
         return new MemberResponse(
             member.Id,
-            member.Sid,
+            overrideSid ?? member.Sid,
             member.Name,
             member.DisplayName ?? member.Name,
             member.Bio,
diff --git a/Foxnouns.Backend/Services/UserRendererService.cs b/Foxnouns.Backend/Services/UserRendererService.cs
index c6f9e5b..2911dd3 100644
--- a/Foxnouns.Backend/Services/UserRendererService.cs
+++ b/Foxnouns.Backend/Services/UserRendererService.cs
@@ -4,6 +4,7 @@ using Foxnouns.Backend.Utils;
 using Microsoft.EntityFrameworkCore;
 using Newtonsoft.Json;
 using NodaTime;
+using Org.BouncyCastle.Ocsp;
 
 namespace Foxnouns.Backend.Services;
 
@@ -19,6 +20,7 @@ public class UserRendererService(
         Token? token = null,
         bool renderMembers = true,
         bool renderAuthMethods = false,
+        string? overrideSid = null,
         CancellationToken ct = default
     )
     {
@@ -49,9 +51,16 @@ public class UserRendererService(
                 .ToListAsync(ct)
             : [];
 
+        int? utcOffset = null;
+        if (
+            user.Timezone != null
+            && TimeZoneInfo.TryFindSystemTimeZoneById(user.Timezone, out var tz)
+        )
+            utcOffset = (int)tz.GetUtcOffset(DateTimeOffset.UtcNow).TotalSeconds;
+
         return new UserResponse(
             user.Id,
-            user.Sid,
+            overrideSid ?? user.Sid,
             user.Username,
             user.DisplayName,
             user.Bio,
@@ -63,6 +72,7 @@ public class UserRendererService(
             user.Fields,
             user.CustomPreferences,
             flags.Select(f => RenderPrideFlag(f.PrideFlag)),
+            utcOffset,
             user.Role,
             renderMembers
                 ? members.Select(m => memberRenderer.RenderPartialMember(m, tokenHidden))
@@ -70,7 +80,8 @@ public class UserRendererService(
             renderAuthMethods ? authMethods.Select(RenderAuthMethod) : null,
             tokenHidden ? user.ListHidden : null,
             tokenHidden ? user.LastActive : null,
-            tokenHidden ? user.LastSidReroll : null
+            tokenHidden ? user.LastSidReroll : null,
+            tokenHidden ? user.Timezone ?? "<none>" : null
         );
     }
 
@@ -115,6 +126,7 @@ public class UserRendererService(
         IEnumerable<Field> Fields,
         Dictionary<Snowflake, User.CustomPreference> CustomPreferences,
         IEnumerable<PrideFlagResponse> Flags,
+        int? UtcOffset,
         [property: JsonConverter(typeof(ScreamingSnakeCaseEnumConverter))] UserRole Role,
         [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
             IEnumerable<MemberRendererService.PartialMember>? Members,
@@ -124,7 +136,8 @@ public class UserRendererService(
             bool? MemberListHidden,
         [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)] Instant? LastActive,
         [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)]
-            Instant? LastSidReroll
+            Instant? LastSidReroll,
+        [property: JsonProperty(NullValueHandling = NullValueHandling.Ignore)] string? Timezone
     );
 
     public record AuthMethodResponse(
diff --git a/Foxnouns.Frontend/.env.example b/Foxnouns.Frontend/.env.example
index d3d5832..d79c672 100644
--- a/Foxnouns.Frontend/.env.example
+++ b/Foxnouns.Frontend/.env.example
@@ -1,5 +1,7 @@
 # Example .env file--DO NOT EDIT
 PUBLIC_LANGUAGE=en
+PUBLIC_BASE_URL=https://pronouns.cc
+PUBLIC_SHORT_URL=https://prns.cc
 PUBLIC_API_BASE=https://pronouns.cc/api
 PRIVATE_API_HOST=http://localhost:5003/api
 PRIVATE_INTERNAL_API_HOST=http://localhost:5000/api
diff --git a/Foxnouns.Frontend/package.json b/Foxnouns.Frontend/package.json
index 69d4a1f..142b442 100644
--- a/Foxnouns.Frontend/package.json
+++ b/Foxnouns.Frontend/package.json
@@ -38,9 +38,11 @@
 	"packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee",
 	"dependencies": {
 		"@fontsource/firago": "^5.1.0",
+		"base64-arraybuffer": "^1.0.2",
 		"bootstrap-icons": "^1.11.3",
 		"luxon": "^3.5.0",
 		"markdown-it": "^14.1.0",
+		"pretty-bytes": "^6.1.1",
 		"sanitize-html": "^2.13.1",
 		"tslog": "^4.9.3"
 	}
diff --git a/Foxnouns.Frontend/pnpm-lock.yaml b/Foxnouns.Frontend/pnpm-lock.yaml
index d9bd974..d35d2ed 100644
--- a/Foxnouns.Frontend/pnpm-lock.yaml
+++ b/Foxnouns.Frontend/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@fontsource/firago':
         specifier: ^5.1.0
         version: 5.1.0
+      base64-arraybuffer:
+        specifier: ^1.0.2
+        version: 1.0.2
       bootstrap-icons:
         specifier: ^1.11.3
         version: 1.11.3
@@ -20,6 +23,9 @@ importers:
       markdown-it:
         specifier: ^14.1.0
         version: 14.1.0
+      pretty-bytes:
+        specifier: ^6.1.1
+        version: 6.1.1
       sanitize-html:
         specifier: ^2.13.1
         version: 2.13.1
@@ -704,6 +710,10 @@ packages:
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
   bootstrap-icons@1.11.3:
     resolution: {integrity: sha512-+3lpHrCw/it2/7lBL15VR0HEumaBss0+f/Lb6ZvHISn1mlK83jjFpooTLsMWbIjJMDjDjOExMsTxnXSIT4k4ww==}
 
@@ -1211,6 +1221,10 @@ packages:
     engines: {node: '>=14'}
     hasBin: true
 
+  pretty-bytes@6.1.1:
+    resolution: {integrity: sha512-mQUvGU6aUFQ+rNvTIAcZuWGRT9a6f6Yrg9bHs4ImKF+HZCEK+plBvnAZYSIQztknZF2qnzNtr6F8s0+IuptdlQ==}
+    engines: {node: ^14.13.1 || >=16.0.0}
+
   punycode.js@2.3.1:
     resolution: {integrity: sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==}
     engines: {node: '>=6'}
@@ -1938,6 +1952,8 @@ snapshots:
 
   balanced-match@1.0.2: {}
 
+  base64-arraybuffer@1.0.2: {}
+
   bootstrap-icons@1.11.3: {}
 
   bootstrap@5.3.3(@popperjs/core@2.11.8):
@@ -2432,6 +2448,8 @@ snapshots:
 
   prettier@3.3.3: {}
 
+  pretty-bytes@6.1.1: {}
+
   punycode.js@2.3.1: {}
 
   punycode@2.3.1: {}
diff --git a/Foxnouns.Frontend/src/lib/api/models/user.ts b/Foxnouns.Frontend/src/lib/api/models/user.ts
index 715cf46..e32873e 100644
--- a/Foxnouns.Frontend/src/lib/api/models/user.ts
+++ b/Foxnouns.Frontend/src/lib/api/models/user.ts
@@ -1,5 +1,6 @@
 export type PartialUser = {
 	id: string;
+	sid: string;
 	username: string;
 	display_name: string | null;
 	avatar_url: string | null;
@@ -14,17 +15,20 @@ export type User = PartialUser & {
 	pronouns: Pronoun[];
 	fields: Field[];
 	flags: PrideFlag[];
+	utc_offset: number | null;
 	role: "USER" | "MODERATOR" | "ADMIN";
 };
 
 export type MeUser = UserWithMembers & {
+	members: PartialMember[];
 	auth_methods: AuthMethod[];
 	member_list_hidden: boolean;
 	last_active: string;
 	last_sid_reroll: string;
+	timezone: string;
 };
 
-export type UserWithMembers = User & { members: PartialMember[] };
+export type UserWithMembers = User & { members: PartialMember[] | null };
 
 export type UserWithHiddenFields = User & {
 	auth_methods?: unknown[];
@@ -38,6 +42,7 @@ export type UserSettings = {
 
 export type PartialMember = {
 	id: string;
+	sid: string;
 	name: string;
 	display_name: string;
 	bio: string | null;
diff --git a/Foxnouns.Frontend/src/lib/components/Avatar.svelte b/Foxnouns.Frontend/src/lib/components/Avatar.svelte
index 99a5608..99dd8f3 100644
--- a/Foxnouns.Frontend/src/lib/components/Avatar.svelte
+++ b/Foxnouns.Frontend/src/lib/components/Avatar.svelte
@@ -1,14 +1,23 @@
 <script lang="ts">
 	import { DEFAULT_AVATAR } from "$lib";
 
-	type Props = { url: string | null; alt: string; lazyLoad?: boolean; width?: number };
-	let { url, alt, lazyLoad, width }: Props = $props();
+	type Props = { url: string | null; alt: string; lazyLoad?: boolean; size?: number };
+	let { url, alt, lazyLoad, size }: Props = $props();
+
+	let width = $derived(size || 200);
 </script>
 
 <img
 	class="rounded-circle img-fluid"
+	style="height: {width}px; width: {width}px"
 	src={url || DEFAULT_AVATAR}
 	{alt}
-	width={width || 200}
+	{width}
 	loading={lazyLoad ? "lazy" : "eager"}
 />
+
+<style>
+	img {
+		object-fit: cover;
+	}
+</style>
diff --git a/Foxnouns.Frontend/src/lib/components/Paginator.svelte b/Foxnouns.Frontend/src/lib/components/Paginator.svelte
new file mode 100644
index 0000000..07cbd8d
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/Paginator.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Pagination, PaginationItem, PaginationLink } from "@sveltestrap/sveltestrap";
+
+	type Props = { currentPage: number; pageCount: number; href: string; center?: boolean };
+	let { currentPage, pageCount, href, center }: Props = $props();
+
+	let prevPage = $derived(currentPage > 0 ? currentPage - 1 : 0);
+	let prevLink = $derived(prevPage !== 0 ? `${href}?page=${prevPage}` : href);
+
+	let nextPage = $derived(currentPage < pageCount - 1 ? currentPage + 1 : pageCount - 1);
+</script>
+
+{#if pageCount > 1}
+	<div>
+		<Pagination listClassName={center ? "justify-content-center" : undefined}>
+			<PaginationItem>
+				<PaginationLink first {href} />
+			</PaginationItem>
+			<PaginationItem>
+				<PaginationLink previous href={prevLink} />
+			</PaginationItem>
+			{#each new Array(pageCount) as _, page}
+				<PaginationItem active={page === currentPage}>
+					<PaginationLink href="{href}?page={page}">{page + 1}</PaginationLink>
+				</PaginationItem>
+			{/each}
+			<PaginationItem>
+				<PaginationLink next href="{href}?page={nextPage}" />
+			</PaginationItem>
+			<PaginationItem>
+				<PaginationLink last href="{href}?page={pageCount - 1}" />
+			</PaginationItem>
+		</Pagination>
+	</div>
+{/if}
diff --git a/Foxnouns.Frontend/src/lib/components/editor/AvatarEditor.svelte b/Foxnouns.Frontend/src/lib/components/editor/AvatarEditor.svelte
new file mode 100644
index 0000000..05a9a62
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/editor/AvatarEditor.svelte
@@ -0,0 +1,80 @@
+<script lang="ts">
+	import Avatar from "$components/Avatar.svelte";
+	import { t } from "$lib/i18n";
+	import { Icon, InputGroup } from "@sveltestrap/sveltestrap";
+	import { encode } from "base64-arraybuffer";
+	import prettyBytes from "pretty-bytes";
+	import ShortNoscriptWarning from "./ShortNoscriptWarning.svelte";
+
+	type Props = {
+		current: string | null;
+		alt: string;
+		update: (avatar: string) => Promise<void>;
+		updated: boolean;
+	};
+	let { current, alt, update: onclick, updated }: Props = $props();
+
+	const MAX_AVATAR_BYTES = 1_000_000;
+
+	let avatarFiles: FileList | null = $state(null);
+	let avatar: string = $state("");
+	let avatarExists = $derived(avatar !== "");
+	let avatarTooLarge = $derived(avatar !== "" && avatar.length > MAX_AVATAR_BYTES);
+
+	$effect(() => {
+		getAvatar(avatarFiles);
+	});
+
+	const getAvatar = async (list: FileList | null) => {
+		if (!list || list.length === 0) {
+			avatar = "";
+			return;
+		}
+
+		const buffer = await list[0].arrayBuffer();
+		const base64 = encode(buffer);
+
+		const uri = `data:${list[0].type};base64,${base64}`;
+		avatar = uri;
+	};
+</script>
+
+<p class="text-center">
+	<Avatar url={avatarExists ? avatar : current} {alt} />
+</p>
+
+<InputGroup class="mb-2">
+	<input
+		class="form-control"
+		id="avatar"
+		type="file"
+		bind:files={avatarFiles}
+		accept="image/png, image/jpeg, image/gif, image/webp"
+	/>
+	<button
+		class="btn btn-secondary"
+		disabled={!avatarExists || avatarTooLarge}
+		onclick={() => onclick(avatar)}
+	>
+		{$t("edit-profile.update-avatar")}
+	</button>
+</InputGroup>
+
+<ShortNoscriptWarning />
+
+{#if updated}
+	<p class="text-success-emphasis">
+		<Icon name="check-circle-fill" />
+		{$t("edit-profile.avatar-updated")}
+	</p>
+{/if}
+
+{#if avatarTooLarge}
+	<p class="text-danger-emphasis">
+		<Icon name="exclamation-circle-fill" />
+		{$t("edit-profile.file-too-large", {
+			max: prettyBytes(MAX_AVATAR_BYTES),
+			current: prettyBytes(avatar.length),
+		})}
+	</p>
+{/if}
diff --git a/Foxnouns.Frontend/src/lib/components/editor/BioEditor.svelte b/Foxnouns.Frontend/src/lib/components/editor/BioEditor.svelte
new file mode 100644
index 0000000..8c7e744
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/editor/BioEditor.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+	import { renderMarkdown } from "$lib/markdown";
+
+	type Props = { value: string; maxLength: number };
+	let { value = $bindable(), maxLength }: Props = $props();
+</script>
+
+<textarea name="bio" class="form-control" style="height: 200px;" bind:value></textarea>
+<button disabled={value.length > maxLength} type="submit" class="btn btn-primary mt-2 my-1">
+	{$t("save-changes")}
+</button>
+
+<p class="text-muted mt-1">
+	{$t("edit-profile.bio-length-hint", {
+		length: value.length,
+		maxLength,
+	})}
+</p>
+
+{#if value !== ""}
+	<div class="card">
+		<div class="card-header">{$t("edit-profile.preview")}</div>
+		<div class="card-body">{@html renderMarkdown(value)}</div>
+	</div>
+{/if}
diff --git a/Foxnouns.Frontend/src/lib/components/editor/FormStatusMarker.svelte b/Foxnouns.Frontend/src/lib/components/editor/FormStatusMarker.svelte
new file mode 100644
index 0000000..43ca9b9
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/editor/FormStatusMarker.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { Icon } from "@sveltestrap/sveltestrap";
+	import { t } from "$lib/i18n";
+	import type { RawApiError } from "$api/error";
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+
+	type Props = { form: { error: RawApiError | null; ok: boolean } | null };
+	let { form }: Props = $props();
+</script>
+
+{#if form?.error}
+	<ErrorAlert error={form.error} />
+{:else if form?.ok}
+	<p class="text-success-emphasis">
+		<Icon name="check-circle-fill" />
+		{$t("edit-profile.saved-changes")}
+	</p>
+{/if}
diff --git a/Foxnouns.Frontend/src/lib/components/editor/NoscriptWarning.svelte b/Foxnouns.Frontend/src/lib/components/editor/NoscriptWarning.svelte
new file mode 100644
index 0000000..4bddf68
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/editor/NoscriptWarning.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+</script>
+
+<noscript>
+	<div class="alert alert-secondary">
+		<h4>{$t("error.noscript-title")}</h4>
+		<p>
+			{$t("error.noscript-info")}
+		</p>
+	</div>
+</noscript>
diff --git a/Foxnouns.Frontend/src/lib/components/editor/ShortNoscriptWarning.svelte b/Foxnouns.Frontend/src/lib/components/editor/ShortNoscriptWarning.svelte
new file mode 100644
index 0000000..fb474db
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/editor/ShortNoscriptWarning.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { t } from "$lib/i18n";
+	import { Icon } from "@sveltestrap/sveltestrap";
+</script>
+
+<noscript>
+	<p class="text-danger-emphasis">
+		<Icon name="exclamation-circle-fill" aria-hidden />
+		{$t("error.noscript-short")}
+	</p>
+</noscript>
diff --git a/Foxnouns.Frontend/src/lib/components/editor/SidEditor.svelte b/Foxnouns.Frontend/src/lib/components/editor/SidEditor.svelte
new file mode 100644
index 0000000..1547ff2
--- /dev/null
+++ b/Foxnouns.Frontend/src/lib/components/editor/SidEditor.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { PUBLIC_SHORT_URL } from "$env/static/public";
+	import { t } from "$lib/i18n";
+	import { ButtonGroup, Button, Icon } from "@sveltestrap/sveltestrap";
+	import ShortNoscriptWarning from "./ShortNoscriptWarning.svelte";
+
+	type Props = { sid: string; rerollSid: () => Promise<void>; canRerollSid: boolean };
+	let { sid, rerollSid, canRerollSid }: Props = $props();
+
+	const copySid = async () => {
+		const url = `${PUBLIC_SHORT_URL}/${sid}`;
+		await navigator.clipboard.writeText(url);
+	};
+</script>
+
+{$t("edit-profile.sid-current")} <code>{sid}</code>
+<ButtonGroup class="mb-1">
+	<Button color="secondary" onclick={() => rerollSid()} disabled={!canRerollSid}>
+		{$t("edit-profile.sid-reroll")}
+	</Button>
+	<Button color="secondary" onclick={() => copySid()}>
+		<Icon name="link-45deg" aria-hidden />
+		<span class="visually-hidden">{$t("edit-profile.sid-copy")}</span>
+	</Button>
+</ButtonGroup>
+<ShortNoscriptWarning />
+<p class="text-muted">
+	<Icon name="info-circle-fill" aria-hidden />
+	{$t("edit-profile.sid-hint")}
+</p>
diff --git a/Foxnouns.Frontend/src/lib/components/profile/user/MemberCard.svelte b/Foxnouns.Frontend/src/lib/components/profile/user/MemberCard.svelte
index 7d1bdc7..d77de02 100644
--- a/Foxnouns.Frontend/src/lib/components/profile/user/MemberCard.svelte
+++ b/Foxnouns.Frontend/src/lib/components/profile/user/MemberCard.svelte
@@ -35,11 +35,15 @@
 
 <div>
 	<a href="/@{username}/{member.name}">
-		<Avatar url={member.avatar_url} lazyLoad alt={$t("avatar-tooltip", { name: member.name })} />
+		<Avatar
+			url={member.avatar_url}
+			lazyLoad
+			alt={$t("avatar-tooltip", { name: member.display_name })}
+		/>
 	</a>
 	<p class="m-2">
 		<a class="text-reset fs-5 text-break" href="/@{username}/{member.name}">
-			{member.name}
+			{member.display_name}
 		</a>
 		{#if pronouns}
 			<br />
diff --git a/Foxnouns.Frontend/src/lib/i18n/locales/en.json b/Foxnouns.Frontend/src/lib/i18n/locales/en.json
index abc4d85..7f1e377 100644
--- a/Foxnouns.Frontend/src/lib/i18n/locales/en.json
+++ b/Foxnouns.Frontend/src/lib/i18n/locales/en.json
@@ -1,91 +1,136 @@
 {
-	"hello": "Hello, {{name}}!",
-	"nav": {
-		"log-in": "Log in or sign up",
-		"settings": "Settings"
-	},
-	"avatar-tooltip": "Avatar for {{name}}",
-	"profile": {
-		"edit-member-profile-notice": "You are currently viewing the public profile of {memberName}.",
-		"edit-user-profile-notice": "You are currently viewing your public profile.",
-		"edit-profile-link": "Edit profile",
-		"names-header": "Names",
-		"pronouns-header": "Pronouns",
-		"default-members-header": "Members",
-		"create-member-button": "Create member"
-	},
-	"title": {
-		"log-in": "Log in",
-		"welcome": "Welcome",
-		"settings": "Settings"
-	},
-	"auth": {
-		"log-in-form-title": "Log in with email",
-		"log-in-form-email-label": "Email address",
-		"log-in-form-password-label": "Password",
-		"register-with-email-button": "Register with email",
-		"log-in-button": "Log in",
-		"log-in-3rd-party-header": "Log in with another service",
-		"log-in-3rd-party-desc": "If you prefer, you can also log in with one of these services:",
-		"log-in-with-discord": "Log in with Discord",
-		"log-in-with-google": "Log in with Google",
-		"log-in-with-tumblr": "Log in with Tumblr",
-		"log-in-with-the-fediverse": "Log in with the Fediverse",
-		"remote-fediverse-account-label": "Your Fediverse account",
-		"register-username-label": "Username",
-		"register-button": "Register account",
-		"register-with-mastodon": "Register with a Fediverse account",
-		"log-in-with-fediverse-error-blurb": "Is your instance returning an error?",
-		"log-in-with-fediverse-force-refresh-button": "Force a refresh on our end"
-	},
-	"error": {
-		"bad-request-header": "Something was wrong with your input",
-		"generic-header": "Something went wrong",
-		"raw-header": "Raw error",
-		"authentication-error": "Something went wrong when logging you in.",
-		"bad-request": "Your input was rejected by the server, please check for any mistakes and try again.",
-		"forbidden": "You are not allowed to perform that action.",
-		"internal-server-error": "Server experienced an internal error, please try again later.",
-		"authentication-required": "You need to log in first.",
-		"missing-scopes": "The current token is missing a required scope. Did you manually edit your cookies?",
-		"generic-error": "An unknown error occurred.",
-		"user-not-found": "User not found, please check your spelling and try again. Remember that usernames are case sensitive.",
-		"member-not-found": "Member not found, please check your spelling and try again.",
-		"account-already-linked": "This account is already linked with a pronouns.cc account.",
-		"last-auth-method": "You cannot remove your last authentication method.",
-		"validation-max-length-error": "Value is too long, maximum length is {{max}}, current length is {{actual}}.",
-		"validation-min-length-error": "Value is too long, minimum length is {{min}}, current length is {{actual}}.",
-		"validation-disallowed-value-1": "The following value is not allowed here",
-		"validation-disallowed-value-2": "Allowed values are",
-		"validation-reason": "Reason",
-		"validation-generic": "The value you entered is not allowed here. Reason",
-		"extra-info-header": "Extra error information"
-	},
-	"settings": {
-		"general-information-tab": "General information",
-		"your-profile-tab": "Your profile",
-		"members-tab": "Members",
-		"authentication-tab": "Authentication",
-		"export-tab": "Export your data",
-		"change-username-button": "Change username",
-		"username-change-hint": "Changing your username will make any existing links to your or your members' profiles invalid.\nYour username must be unique, be at most 40 characters long, and only contain letters from the basic English alphabet, dashes, underscores, and periods. Your username is used as part of your profile link, you can set a separate display name.",
-		"username-update-error": "Could not update your username as the new username is invalid:\n{{message}}",
-		"change-avatar-link": "Change your avatar here",
-		"new-username": "New username",
-		"table-role": "Role",
-		"table-custom-preferences": "Custom preferences",
-		"table-member-list-hidden": "Member list hidden?",
-		"table-member-count": "Member count",
-		"table-created-at": "Account created at",
-		"table-id": "Your ID",
-		"table-title": "Account information",
-		"force-log-out-title": "Log out everywhere",
-		"force-log-out-button": "Force log out",
-		"force-log-out-hint": "If you think one of your tokens might have been compromised, you can log out on all devices by clicking this button.",
-		"log-out-title": "Log out",
-		"log-out-hint": "Use this button to log out on this device only.",
-		"log-out-button": "Log out"
-	},
-	"yes": "Yes",
-	"no": "No"
+  "hello": "Hello, {{name}}!",
+  "nav": {
+    "log-in": "Log in or sign up",
+    "settings": "Settings"
+  },
+  "avatar-tooltip": "Avatar for {{name}}",
+  "profile": {
+    "edit-member-profile-notice": "You are currently viewing the public profile of {{memberName}}.",
+    "edit-user-profile-notice": "You are currently viewing your public profile.",
+    "edit-profile-link": "Edit profile",
+    "names-header": "Names",
+    "pronouns-header": "Pronouns",
+    "default-members-header": "Members",
+    "create-member-button": "Create member",
+    "back-to-user": "Back to {{name}}"
+  },
+  "title": {
+    "log-in": "Log in",
+    "welcome": "Welcome",
+    "settings": "Settings"
+  },
+  "auth": {
+    "log-in-form-title": "Log in with email",
+    "log-in-form-email-label": "Email address",
+    "log-in-form-password-label": "Password",
+    "register-with-email-button": "Register with email",
+    "log-in-button": "Log in",
+    "log-in-3rd-party-header": "Log in with another service",
+    "log-in-3rd-party-desc": "If you prefer, you can also log in with one of these services:",
+    "log-in-with-discord": "Log in with Discord",
+    "log-in-with-google": "Log in with Google",
+    "log-in-with-tumblr": "Log in with Tumblr",
+    "log-in-with-the-fediverse": "Log in with the Fediverse",
+    "remote-fediverse-account-label": "Your Fediverse account",
+    "register-username-label": "Username",
+    "register-button": "Register account",
+    "register-with-mastodon": "Register with a Fediverse account",
+    "log-in-with-fediverse-error-blurb": "Is your instance returning an error?",
+    "log-in-with-fediverse-force-refresh-button": "Force a refresh on our end"
+  },
+  "error": {
+    "bad-request-header": "Something was wrong with your input",
+    "generic-header": "Something went wrong",
+    "raw-header": "Raw error",
+    "authentication-error": "Something went wrong when logging you in.",
+    "bad-request": "Your input was rejected by the server, please check for any mistakes and try again.",
+    "forbidden": "You are not allowed to perform that action.",
+    "internal-server-error": "Server experienced an internal error, please try again later.",
+    "authentication-required": "You need to log in first.",
+    "missing-scopes": "The current token is missing a required scope. Did you manually edit your cookies?",
+    "generic-error": "An unknown error occurred.",
+    "user-not-found": "User not found, please check your spelling and try again. Remember that usernames are case sensitive.",
+    "member-not-found": "Member not found, please check your spelling and try again.",
+    "account-already-linked": "This account is already linked with a pronouns.cc account.",
+    "last-auth-method": "You cannot remove your last authentication method.",
+    "validation-max-length-error": "Value is too long, maximum length is {{max}}, current length is {{actual}}.",
+    "validation-min-length-error": "Value is too long, minimum length is {{min}}, current length is {{actual}}.",
+    "validation-disallowed-value-1": "The following value is not allowed here",
+    "validation-disallowed-value-2": "Allowed values are",
+    "validation-reason": "Reason",
+    "validation-generic": "The value you entered is not allowed here. Reason",
+    "extra-info-header": "Extra error information",
+    "noscript-title": "This page requires JavaScript",
+    "noscript-info": "This page requires JavaScript to function correctly. Some buttons may not work, or the page may not work at all.",
+    "noscript-short": "Requires JavaScript"
+  },
+  "settings": {
+    "general-information-tab": "General information",
+    "your-profile-tab": "Your profile",
+    "members-tab": "Members",
+    "authentication-tab": "Authentication",
+    "export-tab": "Export your data",
+    "change-username-button": "Change username",
+    "username-change-hint": "Changing your username will make any existing links to your or your members' profiles invalid.\nYour username must be unique, be at most 40 characters long, and only contain letters from the basic English alphabet, dashes, underscores, and periods. Your username is used as part of your profile link, you can set a separate display name.",
+    "username-update-error": "Could not update your username as the new username is invalid:\n{{message}}",
+    "change-avatar-link": "Change your avatar here",
+    "new-username": "New username",
+    "table-role": "Role",
+    "table-custom-preferences": "Custom preferences",
+    "table-member-list-hidden": "Member list hidden?",
+    "table-member-count": "Member count",
+    "table-created-at": "Account created at",
+    "table-id": "Your ID",
+    "table-title": "Account information",
+    "force-log-out-title": "Log out everywhere",
+    "force-log-out-button": "Force log out",
+    "force-log-out-hint": "If you think one of your tokens might have been compromised, you can log out on all devices by clicking this button.",
+    "log-out-title": "Log out",
+    "log-out-hint": "Use this button to log out on this device only.",
+    "log-out-button": "Log out",
+    "avatar": "Avatar",
+    "username-update-success": "Successfully changed your username!",
+    "create-member-title": "Create a new member",
+    "create-member-name-label": "Member name"
+  },
+  "yes": "Yes",
+  "no": "No",
+  "edit-profile": {
+    "user-header": "Editing your profile",
+    "general-tab": "General",
+    "names-pronouns-tab": "Names & pronouns",
+    "file-too-large": "This file is too large, please resize it (maximum is {{max}}, the file you're trying to upload is {{current}})",
+    "sid-current": "Current short ID:",
+    "sid": "Short ID",
+    "sid-reroll": "Reroll short ID",
+    "sid-hint": "This ID is used in prns.cc links. You can reroll one short ID every hour (shared between your main profile and all members) by pressing the button above.",
+    "sid-copy": "Copy short link",
+    "update-avatar": "Update avatar",
+    "avatar-updated": "Avatar updated! It might take a moment to be reflected on your profile.",
+    "member-header-label": "\"Members\" header text",
+    "member-header-info": "This is the text used for the \"Members\" heading. If you leave it blank, the default text will be used.",
+    "hide-member-list-label": "Hide member list",
+    "timezone-label": "Timezone",
+    "timezone-preview": "This will show up on your profile like this:",
+    "timezone-info": "This is optional. Your timezone is never shared directly, only the difference between UTC and your current timezone is.",
+    "hide-member-list-info": "This only hides your member list. Individual members will still be visible to anyone with a direct link to their pages.",
+    "profile-options-header": "Profile options",
+    "bio-tab": "Bio",
+    "saved-changes": "Successfully saved changes!",
+    "bio-length-hint": "Using {{length}}/{{maxLength}} characters",
+    "preview": "Preview",
+    "fields-tab": "Fields",
+    "flags-links-tab": "Flags & links",
+    "back-to-settings-tab": "Back to settings",
+    "member-header": "Editing member {{name}}",
+    "username": "Username",
+    "change-username-info": "As changing your username will also change all of your members' links, you can only change it in your account settings.",
+    "change-username-link": "Go to settings",
+    "member-name": "Name",
+    "change-member-name": "Change name",
+    "display-name": "Display name"
+  },
+  "save-changes": "Save changes",
+  "change": "Change"
 }
diff --git a/Foxnouns.Frontend/src/routes/+layout.server.ts b/Foxnouns.Frontend/src/routes/+layout.server.ts
index 00c3ef3..82f3cb2 100644
--- a/Foxnouns.Frontend/src/routes/+layout.server.ts
+++ b/Foxnouns.Frontend/src/routes/+layout.server.ts
@@ -6,10 +6,12 @@ import log from "$lib/log";
 import type { LayoutServerLoad } from "./$types";
 
 export const load = (async ({ fetch, cookies }) => {
+	let token: string | null = null;
 	let meUser: MeUser | null = null;
 	if (cookies.get(TOKEN_COOKIE_NAME)) {
 		try {
 			meUser = await apiRequest<MeUser>("GET", "/users/@me", { fetch, cookies });
+			token = cookies.get(TOKEN_COOKIE_NAME) || null;
 		} catch (e) {
 			if (e instanceof ApiError && e.code === ErrorCode.AuthenticationRequired) clearToken(cookies);
 			else log.error("Could not fetch /users/@me and token has not expired:", e);
@@ -17,5 +19,5 @@ export const load = (async ({ fetch, cookies }) => {
 	}
 
 	const meta = await apiRequest<Meta>("GET", "/meta", { fetch, cookies });
-	return { meta, meUser };
+	return { meta, meUser, token };
 }) satisfies LayoutServerLoad;
diff --git a/Foxnouns.Frontend/src/routes/@[username]/+page.server.ts b/Foxnouns.Frontend/src/routes/@[username]/+page.server.ts
index 330bd21..99e7359 100644
--- a/Foxnouns.Frontend/src/routes/@[username]/+page.server.ts
+++ b/Foxnouns.Frontend/src/routes/@[username]/+page.server.ts
@@ -1,5 +1,7 @@
 import { apiRequest } from "$api";
-import type { UserWithMembers } from "$api/models";
+import type { PartialMember, UserWithMembers } from "$api/models";
+
+const MEMBERS_PER_PAGE = 20;
 
 export const load = async ({ params, fetch, cookies, url }) => {
 	const user = await apiRequest<UserWithMembers>("GET", `/users/${params.username}`, {
@@ -8,12 +10,20 @@ export const load = async ({ params, fetch, cookies, url }) => {
 	});
 
 	// Paginate members on the server side
-	let currentPage = Number(url.searchParams.get("page") || "0");
-	const pageCount = Math.ceil(user.members.length / 20);
-	let members = user.members.slice(currentPage * 20, (currentPage + 1) * 20);
-	if (members.length === 0) {
-		members = user.members.slice(0, 20);
-		currentPage = 0;
+	let currentPage = 0;
+	let pageCount = 0;
+	let members: PartialMember[] = [];
+	if (user.members) {
+		currentPage = Number(url.searchParams.get("page") || "0");
+		pageCount = Math.ceil(user.members.length / MEMBERS_PER_PAGE);
+		members = user.members.slice(
+			currentPage * MEMBERS_PER_PAGE,
+			(currentPage + 1) * MEMBERS_PER_PAGE,
+		);
+		if (members.length === 0) {
+			members = user.members.slice(0, MEMBERS_PER_PAGE);
+			currentPage = 0;
+		}
 	}
 
 	return { user, members, currentPage, pageCount };
diff --git a/Foxnouns.Frontend/src/routes/@[username]/+page.svelte b/Foxnouns.Frontend/src/routes/@[username]/+page.svelte
index 0ed36cc..792df3f 100644
--- a/Foxnouns.Frontend/src/routes/@[username]/+page.svelte
+++ b/Foxnouns.Frontend/src/routes/@[username]/+page.svelte
@@ -6,7 +6,7 @@
 	import ProfileFields from "$components/profile/ProfileFields.svelte";
 	import { t } from "$lib/i18n";
 	import { Icon } from "@sveltestrap/sveltestrap";
-	import Paginator from "./Paginator.svelte";
+	import Paginator from "$components/Paginator.svelte";
 	import MemberCard from "$components/profile/user/MemberCard.svelte";
 
 	type Props = { data: PageData };
@@ -25,7 +25,7 @@
 		<OwnProfileNotice editLink="/settings/profile" />
 	{/if}
 
-	<ProfileHeader name="@{data.user.username}" profile={data.user} lazyLoadAvatar={true} />
+	<ProfileHeader name="@{data.user.username}" profile={data.user}/>
 	<ProfileFields profile={data.user} {allPreferences} />
 
 	{#if data.members.length > 0}
@@ -34,27 +34,27 @@
 			{data.user.member_title || $t("profile.default-members-header")}
 			{#if isMeUser}
 				<a class="btn btn-success" href="/settings/create-member">
-					<Icon name="person-plus-fill" aria-hidden={true} />
+					<Icon name="person-plus-fill" aria-hidden />
 					{$t("profile.create-member-button")}
 				</a>
 			{/if}
-			<Paginator
-				currentPage={data.currentPage}
-				pageCount={data.pageCount}
-				href="/@{data.user.username}"
-			/>
 		</h2>
+		<Paginator
+			center
+			currentPage={data.currentPage}
+			pageCount={data.pageCount}
+			href="/@{data.user.username}"
+		/>
 		<div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 text-center">
 			{#each data.members as member (member.id)}
 				<MemberCard username={data.user.username} {member} {allPreferences} />
 			{/each}
 		</div>
-		<div class="text-center">
-			<Paginator
-				currentPage={data.currentPage}
-				pageCount={data.pageCount}
-				href="/@{data.user.username}"
-			/>
-		</div>
+		<Paginator
+			center
+			currentPage={data.currentPage}
+			pageCount={data.pageCount}
+			href="/@{data.user.username}"
+		/>
 	{/if}
 </div>
diff --git a/Foxnouns.Frontend/src/routes/@[username]/Paginator.svelte b/Foxnouns.Frontend/src/routes/@[username]/Paginator.svelte
deleted file mode 100644
index cf5aa54..0000000
--- a/Foxnouns.Frontend/src/routes/@[username]/Paginator.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-<script lang="ts">
-	import { Pagination, PaginationItem, PaginationLink } from "@sveltestrap/sveltestrap";
-
-	type Props = { currentPage: number; pageCount: number; href: string };
-	let { currentPage, pageCount, href }: Props = $props();
-
-	let prevPage = $derived(currentPage > 0 ? currentPage - 1 : 0);
-	let prevLink = $derived(prevPage !== 0 ? `${href}?page=${prevPage}` : href);
-
-	let nextPage = $derived(currentPage < pageCount - 1 ? currentPage + 1 : pageCount - 1);
-</script>
-
-{#if pageCount > 1}
-	<Pagination>
-		<PaginationItem>
-			<PaginationLink first {href} />
-		</PaginationItem>
-		<PaginationItem>
-			<PaginationLink previous href={prevLink} />
-		</PaginationItem>
-		<PaginationItem active>
-			<PaginationLink href="{href}?page={currentPage}">{currentPage + 1}</PaginationLink>
-		</PaginationItem>
-		<PaginationItem>
-			<PaginationLink next href="{href}?page={nextPage}" />
-		</PaginationItem>
-		<PaginationItem>
-			<PaginationLink last href="{href}?page={pageCount - 1}" />
-		</PaginationItem>
-	</Pagination>
-{/if}
diff --git a/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.server.ts b/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.server.ts
new file mode 100644
index 0000000..f3f8400
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.server.ts
@@ -0,0 +1,15 @@
+import { apiRequest } from "$api";
+import type { Member } from "$api/models/member";
+
+export const load = async ({ params, fetch, cookies }) => {
+	const member = await apiRequest<Member>(
+		"GET",
+		`/users/${params.username}/members/${params.memberName}`,
+		{
+			fetch,
+			cookies,
+		},
+	);
+
+	return { member };
+};
diff --git a/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.svelte b/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.svelte
new file mode 100644
index 0000000..a69544a
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/@[username]/[memberName]/+page.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	import ProfileHeader from "$components/profile/ProfileHeader.svelte";
+	import OwnProfileNotice from "$components/profile/OwnProfileNotice.svelte";
+	import { mergePreferences } from "$api/models";
+	import ProfileFields from "$components/profile/ProfileFields.svelte";
+	import { Icon } from "@sveltestrap/sveltestrap";
+	import { t } from "$lib/i18n";
+
+	type Props = { data: PageData };
+	let { data }: Props = $props();
+
+	let allPreferences = $derived(mergePreferences(data.member.user.custom_preferences));
+	let isMeUser = $derived(data.meUser && data.meUser.id === data.member.user.id);
+</script>
+
+<svelte:head>
+	<title>{data.member.display_name} • @{data.member.user.username} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	{#if isMeUser}
+		<OwnProfileNotice
+			memberName={data.member.display_name}
+			editLink="/settings/members/{data.member.id}"
+		/>
+	{/if}
+
+	<div class="m-3">
+		<a class="btn btn-secondary" href="/@{data.member.user.username}">
+			<Icon name="arrow-left" aria-hidden />
+			{$t("profile.back-to-user", {
+				name: data.member.user.display_name ?? data.member.user.username,
+			})}
+		</a>
+	</div>
+
+	<ProfileHeader name="{data.member.name} (@{data.member.user.username})" profile={data.member} />
+	<ProfileFields profile={data.member} {allPreferences} />
+</div>
diff --git a/Foxnouns.Frontend/src/routes/settings/+layout.server.ts b/Foxnouns.Frontend/src/routes/settings/+layout.server.ts
index a1ac93c..fe2eaa3 100644
--- a/Foxnouns.Frontend/src/routes/settings/+layout.server.ts
+++ b/Foxnouns.Frontend/src/routes/settings/+layout.server.ts
@@ -4,5 +4,5 @@ export const load = async ({ parent }) => {
 	const data = await parent();
 	if (!data.meUser) redirect(303, "/auth/log-in");
 
-	return { user: data.meUser! };
+	return { user: data.meUser!, token: data.token! };
 };
diff --git a/Foxnouns.Frontend/src/routes/settings/+page.svelte b/Foxnouns.Frontend/src/routes/settings/+page.svelte
index 062d9e6..cfd0b88 100644
--- a/Foxnouns.Frontend/src/routes/settings/+page.svelte
+++ b/Foxnouns.Frontend/src/routes/settings/+page.svelte
@@ -29,7 +29,8 @@
 			</FormGroup>
 			{#if form?.ok}
 				<p class="text-success-emphasis">
-					<Icon name="check-circle-fill" /> Successfully changed your username!
+					<Icon name="check-circle-fill" />
+					{$t("settings.username-update-success")}
 				</p>
 			{:else if usernameError}
 				<p class="text-danger-emphasis text-has-newline">
@@ -46,7 +47,7 @@
 		</p>
 	</div>
 	<div class="col-md-3 text-center">
-		<h5>Avatar</h5>
+		<h5>{$t("settings.avatar")}</h5>
 		<Avatar
 			url={data.user.avatar_url}
 			alt={$t("avatar-tooltip", { name: "@" + data.user.username })}
diff --git a/Foxnouns.Frontend/src/routes/settings/members/+page.server.ts b/Foxnouns.Frontend/src/routes/settings/members/+page.server.ts
new file mode 100644
index 0000000..220865b
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/members/+page.server.ts
@@ -0,0 +1,18 @@
+const MEMBERS_PER_PAGE = 15;
+
+export const load = async ({ url, parent }) => {
+	const { user } = await parent();
+
+	let currentPage = Number(url.searchParams.get("page") || "0");
+	let pageCount = Math.ceil(user.members.length / MEMBERS_PER_PAGE);
+	let members = user.members.slice(
+		currentPage * MEMBERS_PER_PAGE,
+		(currentPage + 1) * MEMBERS_PER_PAGE,
+	);
+	if (members.length === 0) {
+		members = user.members.slice(0, MEMBERS_PER_PAGE);
+		currentPage = 0;
+	}
+
+	return { members, currentPage, pageCount };
+};
diff --git a/Foxnouns.Frontend/src/routes/settings/members/+page.svelte b/Foxnouns.Frontend/src/routes/settings/members/+page.svelte
new file mode 100644
index 0000000..563cf90
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/members/+page.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import Paginator from "$components/Paginator.svelte";
+	import { Icon, ListGroup, ListGroupItem } from "@sveltestrap/sveltestrap";
+	import { t } from "$lib/i18n";
+	import type { PageData } from "./$types";
+	import Avatar from "$components/Avatar.svelte";
+
+	type Props = { data: PageData };
+	let { data }: Props = $props();
+
+	let canCreateMember = $derived(data.user.members.length < data.meta.limits.member_count);
+</script>
+
+<h3 class="mb-3">{$t("settings.members-tab")} ({data.user.members.length})</h3>
+
+<Paginator
+	center
+	currentPage={data.currentPage}
+	pageCount={data.pageCount}
+	href="/settings/members"
+/>
+
+<ListGroup class="mb-3">
+	{#if canCreateMember}
+		<ListGroupItem tag="a" href="/settings/members/new">
+			<Icon name="person-fill-add" aria-hidden />
+			<strong>{$t("profile.create-member-button")}</strong>
+		</ListGroupItem>
+	{/if}
+	{#each data.members as member (member.id)}
+		<ListGroupItem tag="a" href="/settings/members/{member.id}" data-sveltekit-preload-data="tap">
+			<Avatar
+				url={member.avatar_url}
+				alt={$t("avatar-tooltip", { name: member.display_name })}
+				size={20}
+			/>
+			{member.display_name}
+			{#if member.display_name !== member.name}({member.name}){/if}
+		</ListGroupItem>
+	{/each}
+</ListGroup>
+
+<Paginator
+	center
+	currentPage={data.currentPage}
+	pageCount={data.pageCount}
+	href="/settings/members"
+/>
diff --git a/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout.server.ts b/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout.server.ts
new file mode 100644
index 0000000..0cdf2e1
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout.server.ts
@@ -0,0 +1,22 @@
+import { apiRequest } from "$api";
+import ApiError from "$api/error";
+import type { Member } from "$api/models";
+import log from "$lib/log";
+import { redirect } from "@sveltejs/kit";
+
+export const load = async ({ parent, params, fetch, cookies }) => {
+	const { meUser, token } = await parent();
+	if (!meUser) redirect(303, "/");
+
+	try {
+		const member = await apiRequest<Member>("GET", `/users/@me/members/${params.id}`, {
+			fetch,
+			cookies,
+		});
+		return { user: meUser, token: token!, member };
+	} catch (e) {
+		if (e instanceof ApiError) throw e.obj;
+		log.error("Error trying to fetch member %s:", params.id, e);
+		throw e;
+	}
+};
diff --git a/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout@.svelte b/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout@.svelte
new file mode 100644
index 0000000..a2539ab
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/members/[id]/+layout@.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { page } from "$app/stores";
+	import { t } from "$lib/i18n";
+	import type { LayoutData } from "./$types";
+
+	type Props = { data: LayoutData; children: Snippet };
+	let { data, children }: Props = $props();
+
+	const isActive = (path: string) => $page.url.pathname === path;
+</script>
+
+<svelte:head>
+	<title>{$t("edit-profile.member-header", { name: data.member.name })} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<h3>{$t("edit-profile.member-header", { name: data.member.name })}</h3>
+	<div class="row">
+		<div class="col-md-3 mt-1 mb-3">
+			<div class="list-group">
+				<a
+					href="/settings/members/{data.member.id}"
+					class="list-group-item list-group-item-action"
+					class:active={isActive(`/settings/members/${data.member.id}`)}
+				>
+					{$t("edit-profile.general-tab")}
+				</a>
+				<a
+					href="/settings/members/{data.member.id}/names-pronouns"
+					class="list-group-item list-group-item-action"
+					class:active={isActive(`/settings/members/${data.member.id}/names-pronouns`)}
+				>
+					{$t("edit-profile.names-pronouns-tab")}
+				</a>
+				<a
+					href="/settings/members/{data.member.id}/fields"
+					class="list-group-item list-group-item-action"
+					class:active={isActive(`/settings/members/${data.member.id}/fields`)}
+				>
+					{$t("edit-profile.fields-tab")}
+				</a>
+				<a
+					href="/settings/members/{data.member.id}/flags-links"
+					class="list-group-item list-group-item-action"
+					class:active={isActive(`/settings/members/${data.member.id}/flags-links`)}
+				>
+					{$t("edit-profile.flags-links-tab")}
+				</a>
+				<a
+					href="/@{data.user.username}/{data.member.name}"
+					class="list-group-item list-group-item-action text-danger"
+				>
+					Back to member
+				</a>
+				<a href="/settings/members" class="list-group-item list-group-item-action text-danger">
+					{$t("edit-profile.back-to-settings-tab")}
+				</a>
+			</div>
+		</div>
+		<div class="col-md-9">
+			{@render children?.()}
+		</div>
+	</div>
+</div>
diff --git a/Foxnouns.Frontend/src/routes/settings/members/[id]/+page.server.ts b/Foxnouns.Frontend/src/routes/settings/members/[id]/+page.server.ts
new file mode 100644
index 0000000..7665014
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/members/[id]/+page.server.ts
@@ -0,0 +1,82 @@
+import { apiRequest, fastRequest } from "$api";
+import ApiError, { ErrorCode, type RawApiError } from "$api/error";
+import type { Member } from "$api/models/member";
+import log from "$lib/log.js";
+
+export const load = async ({ params, fetch, cookies }) => {
+	try {
+		const member = await apiRequest<Member>("GET", `/users/@me/members/${params.id}`, {
+			fetch,
+			cookies,
+		});
+		return { member };
+	} catch (e) {
+		if (e instanceof ApiError) throw e.obj;
+		log.error("Error trying to fetch member %s:", params.id, e);
+		throw e;
+	}
+};
+
+export const actions = {
+	changeName: async ({ params, request, fetch, cookies }) => {
+		const body = await request.formData();
+		const name = body.get("name") as string | null;
+		if (!name)
+			return {
+				error: {
+					message: "You must pass a name.",
+					status: 403,
+					code: ErrorCode.BadRequest,
+				} as RawApiError,
+				ok: false,
+			};
+
+		try {
+			await fastRequest("PATCH", `/users/@me/members/${params.id}`, {
+				body: { name },
+				fetch,
+				cookies,
+			});
+			return { error: null, ok: true };
+		} catch (e) {
+			if (e instanceof ApiError) return { error: e.obj, ok: false };
+			log.error("Error updating name for member %s:", params.id, e);
+			throw e;
+		}
+	},
+	changeDisplayName: async ({ params, request, fetch, cookies }) => {
+		const body = await request.formData();
+		let displayName = body.get("display-name") as string | null;
+		if (!displayName || displayName === "") displayName = null;
+
+		try {
+			await fastRequest("PATCH", `/users/@me/members/${params.id}`, {
+				body: { display_name: displayName },
+				fetch,
+				cookies,
+			});
+			return { error: null, ok: true };
+		} catch (e) {
+			if (e instanceof ApiError) return { error: e.obj, ok: false };
+			log.error("Error updating name for member %s:", params.id, e);
+			throw e;
+		}
+	},
+	bio: async ({ params, request, fetch, cookies }) => {
+		const body = await request.formData();
+		const bio = body.get("bio") as string | null;
+
+		try {
+			await fastRequest("PATCH", `/users/@me/members/${params.id}`, {
+				body: { bio },
+				fetch,
+				cookies,
+			});
+			return { error: null, ok: true };
+		} catch (e) {
+			if (e instanceof ApiError) return { error: e.obj, ok: false };
+			log.error("Error updating bio for member %s:", params.id, e);
+			throw e;
+		}
+	},
+};
diff --git a/Foxnouns.Frontend/src/routes/settings/members/[id]/+page.svelte b/Foxnouns.Frontend/src/routes/settings/members/[id]/+page.svelte
new file mode 100644
index 0000000..174108e
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/members/[id]/+page.svelte
@@ -0,0 +1,115 @@
+<script lang="ts">
+	import { DateTime } from "luxon";
+	import type { ActionData, PageData } from "./$types";
+	import type { Member } from "$api/models";
+	import { apiRequest, fastRequest } from "$api";
+	import ApiError from "$api/error";
+	import log from "$lib/log";
+	import { InputGroup } from "@sveltestrap/sveltestrap";
+	import { t } from "$lib/i18n";
+	import AvatarEditor from "$components/editor/AvatarEditor.svelte";
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+	import NoscriptWarning from "$components/editor/NoscriptWarning.svelte";
+	import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
+	import SidEditor from "$components/editor/SidEditor.svelte";
+	import BioEditor from "$components/editor/BioEditor.svelte";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+
+	// SID reroll code
+	// We compare the current time with the user's last SID reroll time. If it's more than an hour ago, it can be rerolled.
+	let error: ApiError | null = $state(null);
+	let sid = $state(data.member.sid);
+	let lastSidReroll = $state(data.user.last_sid_reroll);
+	let canRerollSid = $derived(
+		DateTime.now().toLocal().diff(DateTime.fromISO(lastSidReroll).toLocal(), "hours").hours >= 1,
+	);
+	const rerollSid = async () => {
+		try {
+			const resp = await apiRequest<Member>(
+				"POST",
+				`/users/@me/members/${data.member.id}/reroll-sid`,
+				{ token: data.token },
+			);
+			sid = resp.sid;
+			lastSidReroll = DateTime.now().toUTC().toISO();
+			error = null;
+		} catch (e) {
+			log.error("Could not reroll sid:", e);
+			if (e instanceof ApiError) error = e;
+		}
+	};
+
+	// Passed to AvatarEditor
+	let avatarUpdated = $state(false);
+	const updateAvatar = async (avatar: string) => {
+		try {
+			await fastRequest("PATCH", `/users/@me/members/${data.member.id}`, {
+				body: { avatar },
+				token: data.token,
+			});
+			avatarUpdated = true;
+			error = null;
+		} catch (e) {
+			log.error("Could not update avatar:", e);
+			if (e instanceof ApiError) error = e;
+		}
+	};
+
+	// Bio is stored in a $state() so we have a markdown preview
+	let bio = $state(data.member.bio || "");
+</script>
+
+{#if error}
+	<ErrorAlert error={error.obj} />
+{/if}
+
+{#if form}
+	<FormStatusMarker {form} />
+{/if}
+
+<div class="row">
+	<div class="col-md">
+		<h4>{$t("settings.avatar")}</h4>
+		<AvatarEditor
+			current={data.member.avatar_url}
+			alt={$t("avatar-tooltip", { name: data.member.name })}
+			update={updateAvatar}
+			updated={avatarUpdated}
+		/>
+	</div>
+	<div class="col-md">
+		<h4>{$t("edit-profile.member-name")}</h4>
+		<form method="POST" action="?/changeName" class="mb-3">
+			<InputGroup>
+				<input name="name" class="form-control" type="text" value={data.member.name} />
+				<button type="submit" class="btn btn-primary">
+					{$t("change")}
+				</button>
+			</InputGroup>
+		</form>
+
+		<h4>{$t("edit-profile.display-name")}</h4>
+		<form class="mb-3" method="POST" action="?/changeDisplayName">
+			<InputGroup>
+				<input
+					class="form-control"
+					name="display-name"
+					placeholder={data.member.name}
+					value={data.member.display_name !== data.member.name ? data.member.display_name : null}
+				/>
+				<button class="btn btn-primary" type="submit">{$t("change")}</button>
+			</InputGroup>
+		</form>
+
+		<h4>{$t("edit-profile.sid")}</h4>
+		<SidEditor {rerollSid} {sid} {canRerollSid} />
+	</div>
+	<div class="row">
+		<h4>{$t("edit-profile.bio-tab")}</h4>
+		<form method="POST" action="?/bio">
+			<BioEditor bind:value={bio} maxLength={data.meta.limits.bio_length} />
+		</form>
+	</div>
+</div>
diff --git a/Foxnouns.Frontend/src/routes/settings/members/new/+page.server.ts b/Foxnouns.Frontend/src/routes/settings/members/new/+page.server.ts
new file mode 100644
index 0000000..3fdf2e0
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/members/new/+page.server.ts
@@ -0,0 +1,34 @@
+import { apiRequest } from "$api";
+import ApiError, { ErrorCode, type RawApiError } from "$api/error";
+import type { Member } from "$api/models/member";
+import log from "$lib/log.js";
+import { isRedirect, redirect } from "@sveltejs/kit";
+
+export const actions = {
+	default: async ({ request, fetch, cookies }) => {
+		const body = await request.formData();
+		const name = body.get("name") as string | null;
+		if (!name)
+			return {
+				error: {
+					message: "No name supplied.",
+					status: 403,
+					code: ErrorCode.BadRequest,
+				} as RawApiError,
+			};
+
+		try {
+			const member = await apiRequest<Member>("POST", "/users/@me/members", {
+				body: { name },
+				fetch,
+				cookies,
+			});
+			redirect(303, `/settings/members/${member.id}`);
+		} catch (e) {
+			if (isRedirect(e)) throw e;
+			if (e instanceof ApiError) return { error: e.obj };
+			log.error("Could not create member:", e);
+			throw e;
+		}
+	},
+};
diff --git a/Foxnouns.Frontend/src/routes/settings/members/new/+page.svelte b/Foxnouns.Frontend/src/routes/settings/members/new/+page.svelte
new file mode 100644
index 0000000..da17621
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/members/new/+page.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+	import { t } from "$lib/i18n";
+	import type { ActionData } from "./$types";
+
+	type Props = { form: ActionData };
+	let { form }: Props = $props();
+</script>
+
+<h3>{$t("settings.create-member-title")}</h3>
+
+{#if form?.error}
+	<ErrorAlert error={form.error} />
+{/if}
+
+<form method="POST">
+	<div class="my-3">
+		<label class="form-label" for="name">{$t("settings.create-member-name-label")}</label>
+		<input class="form-control" type="text" id="name" name="name" required />
+	</div>
+	<button class="btn btn-primary" type="submit">{$t("profile.create-member-button")}</button>
+</form>
diff --git a/Foxnouns.Frontend/src/routes/settings/profile/+layout.server.ts b/Foxnouns.Frontend/src/routes/settings/profile/+layout.server.ts
new file mode 100644
index 0000000..9d7ef68
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/profile/+layout.server.ts
@@ -0,0 +1,7 @@
+import { redirect } from "@sveltejs/kit";
+
+export const load = async ({ parent }) => {
+	const { meUser, token } = await parent();
+	if (!meUser) redirect(303, "/");
+	return { user: meUser!, token: token! };
+};
diff --git a/Foxnouns.Frontend/src/routes/settings/profile/+layout@.svelte b/Foxnouns.Frontend/src/routes/settings/profile/+layout@.svelte
new file mode 100644
index 0000000..12c16d4
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/profile/+layout@.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { page } from "$app/stores";
+	import { t } from "$lib/i18n";
+
+	type Props = { children: Snippet };
+	let { children }: Props = $props();
+
+	const isActive = (path: string) => $page.url.pathname === path;
+</script>
+
+<svelte:head>
+	<title>{$t("edit-profile.user-header")} • pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+	<h3>{$t("edit-profile.user-header")}</h3>
+	<div class="row">
+		<div class="col-md-3 mt-1 mb-3">
+			<div class="list-group">
+				<a
+					href="/settings/profile"
+					class="list-group-item list-group-item-action"
+					class:active={isActive("/settings/profile")}
+				>
+					{$t("edit-profile.general-tab")}
+				</a>
+				<a
+					href="/settings/profile/names-pronouns"
+					class="list-group-item list-group-item-action"
+					class:active={isActive("/settings/profile/names-pronouns")}
+				>
+					{$t("edit-profile.names-pronouns-tab")}
+				</a>
+				<a
+					href="/settings/profile/bio"
+					class="list-group-item list-group-item-action"
+					class:active={isActive("/settings/profile/bio")}
+				>
+					{$t("edit-profile.bio-tab")}
+				</a>
+				<a
+					href="/settings/profile/fields"
+					class="list-group-item list-group-item-action"
+					class:active={isActive("/settings/profile/fields")}
+				>
+					{$t("edit-profile.fields-tab")}
+				</a>
+				<a
+					href="/settings/profile/flags-links"
+					class="list-group-item list-group-item-action"
+					class:active={isActive("/settings/profile/flags-links")}
+				>
+					{$t("edit-profile.flags-links-tab")}
+				</a>
+				<a href="/settings" class="list-group-item list-group-item-action text-danger">
+					{$t("edit-profile.back-to-settings-tab")}
+				</a>
+			</div>
+		</div>
+		<div class="col-md-9">
+			{@render children?.()}
+		</div>
+	</div>
+</div>
diff --git a/Foxnouns.Frontend/src/routes/settings/profile/+page.server.ts b/Foxnouns.Frontend/src/routes/settings/profile/+page.server.ts
new file mode 100644
index 0000000..df356c4
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/profile/+page.server.ts
@@ -0,0 +1,47 @@
+import { fastRequest } from "$api";
+import ApiError from "$api/error";
+import log from "$lib/log.js";
+
+export const actions = {
+	options: async ({ request, fetch, cookies }) => {
+		const body = await request.formData();
+		let memberTitle = body.get("member-title") as string | null;
+		if (!memberTitle || memberTitle === "") memberTitle = null;
+
+		let timezone = body.get("timezone") as string | null;
+		if (!timezone || timezone === "") timezone = null;
+
+		let hideMemberList = !!body.get("hide-member-list");
+
+		try {
+			await fastRequest("PATCH", "/users/@me", {
+				body: { timezone, member_title: memberTitle, member_list_hidden: hideMemberList },
+				fetch,
+				cookies,
+			});
+			return { error: null, ok: true };
+		} catch (e) {
+			if (e instanceof ApiError) return { error: e.obj, ok: false };
+			log.error("Error patching user:", e);
+			throw e;
+		}
+	},
+	changeDisplayName: async ({ request, fetch, cookies }) => {
+		const body = await request.formData();
+		let displayName = body.get("display-name") as string | null;
+		if (!displayName || displayName === "") displayName = null;
+
+		try {
+			await fastRequest("PATCH", "/users/@me", {
+				body: { display_name: displayName },
+				fetch,
+				cookies,
+			});
+			return { error: null, ok: true };
+		} catch (e) {
+			if (e instanceof ApiError) return { error: e.obj, ok: false };
+			log.error("Error patching user:", e);
+			throw e;
+		}
+	},
+};
diff --git a/Foxnouns.Frontend/src/routes/settings/profile/+page.svelte b/Foxnouns.Frontend/src/routes/settings/profile/+page.svelte
new file mode 100644
index 0000000..c603ab6
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/profile/+page.svelte
@@ -0,0 +1,196 @@
+<script lang="ts">
+	import type { ActionData, PageData } from "./$types";
+	import { t } from "$lib/i18n";
+	import { Icon, InputGroup } from "@sveltestrap/sveltestrap";
+	import AvatarEditor from "$components/editor/AvatarEditor.svelte";
+	import { apiRequest, fastRequest } from "$api";
+	import ApiError from "$api/error";
+	import ErrorAlert from "$components/ErrorAlert.svelte";
+	import type { User } from "$api/models/user";
+	import log from "$lib/log";
+	import { DateTime, FixedOffsetZone } from "luxon";
+	import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
+	import SidEditor from "$components/editor/SidEditor.svelte";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+
+	let error: ApiError | null = $state(null);
+
+	// Timezone code
+	let tz = $state(data.user.timezone === "<none>" ? null : data.user.timezone);
+	const validTimezones = Intl.supportedValuesOf("timeZone");
+	const detectTimezone = () => {
+		tz = DateTime.local().zoneName;
+	};
+
+	let currentTime = $state("");
+	let displayTimezone = $state("");
+	$effect(() => {
+		if (!tz || tz === "") {
+			currentTime = "";
+			displayTimezone = "";
+			return;
+		}
+
+		const offset = DateTime.now().setZone(tz).offset;
+		const zone = FixedOffsetZone.instance(offset);
+
+		currentTime = DateTime.now().setZone(zone).toLocaleString(DateTime.TIME_SIMPLE);
+		displayTimezone = zone.formatOffset(DateTime.now().toUnixInteger(), "narrow");
+	});
+
+	// SID reroll code
+	// We compare the current time with the user's last SID reroll time. If it's more than an hour ago, it can be rerolled.
+	let sid = $state(data.user.sid);
+	let lastSidReroll = $state(data.user.last_sid_reroll);
+	let canRerollSid = $derived(
+		DateTime.now().toLocal().diff(DateTime.fromISO(lastSidReroll).toLocal(), "hours").hours >= 1,
+	);
+	const rerollSid = async () => {
+		try {
+			const resp = await apiRequest<User>("POST", "/users/@me/reroll-sid", { token: data.token });
+			sid = resp.sid;
+			lastSidReroll = DateTime.now().toUTC().toISO();
+			error = null;
+		} catch (e) {
+			log.error("Could not reroll sid:", e);
+			if (e instanceof ApiError) error = e;
+		}
+	};
+
+	// Avatar update code
+	// AvatarEditor handles converting the uploaded image to a base64 string
+	let avatarUpdated = $state(false);
+	const updateAvatar = async (avatar: string) => {
+		try {
+			await fastRequest("PATCH", "/users/@me", {
+				body: { avatar },
+				token: data.token,
+			});
+			avatarUpdated = true;
+			error = null;
+		} catch (e) {
+			log.error("Could not update avatar:", e);
+			if (e instanceof ApiError) error = e;
+		}
+	};
+</script>
+
+{#if error}
+	<ErrorAlert error={error.obj} />
+{/if}
+
+{#if form}
+	<div class="row">
+		<FormStatusMarker {form} />
+	</div>
+{/if}
+
+<div class="row">
+	<div class="col-md">
+		<h4>{$t("settings.avatar")}</h4>
+		<AvatarEditor
+			current={data.user.avatar_url}
+			alt={$t("avatar-tooltip", { name: "@" + data.user.username })}
+			update={updateAvatar}
+			updated={avatarUpdated}
+		/>
+	</div>
+	<div class="col-md">
+		<h4>{$t("edit-profile.username")}</h4>
+		<input class="form-control" type="text" value={data.user.username} disabled readonly />
+		<p class="mt-1 mb-3 text-muted">
+			<Icon name="info-circle-fill" aria-hidden />
+			{$t("edit-profile.change-username-info")}
+			<a href="/settings">{$t("edit-profile.change-username-link")}</a>
+		</p>
+
+		<h4>{$t("edit-profile.display-name")}</h4>
+		<form class="mb-3" method="POST" action="?/changeDisplayName">
+			<InputGroup>
+				<input
+					class="form-control"
+					name="display-name"
+					placeholder={data.user.username}
+					value={data.user.display_name}
+				/>
+				<button class="btn btn-primary" type="submit">{$t("change")}</button>
+			</InputGroup>
+		</form>
+
+		<h4>{$t("edit-profile.sid")}</h4>
+		<SidEditor {sid} {rerollSid} {canRerollSid} />
+	</div>
+</div>
+
+<div class="mt-3">
+	<h4>{$t("edit-profile.profile-options-header")}</h4>
+	<form method="POST" action="?/options">
+		<div class="mb-3">
+			<label class="form-label" for="member-title">{$t("edit-profile.member-header-label")}</label>
+			<input
+				type="text"
+				id="member-title"
+				name="member-title"
+				class="form-control"
+				value={data.user.member_title}
+				placeholder={$t("profile.default-members-header")}
+			/>
+			<p class="text-muted mt-1">
+				<Icon name="info-circle-fill" aria-hidden />
+				{$t("edit-profile.member-header-info")}
+			</p>
+		</div>
+		<div class="mb-3">
+			<label class="form-label" for="timezone">{$t("edit-profile.timezone-label")}</label>
+			<InputGroup>
+				<input
+					type="text"
+					id="timezone"
+					name="timezone"
+					class="form-control"
+					list="timezones"
+					bind:value={tz}
+				/>
+				<datalist id="timezones">
+					{#each validTimezones as timezone}<option value={timezone}></option>{/each}
+				</datalist>
+				<button type="button" class="btn btn-secondary" onclick={() => detectTimezone()}>
+					Detect timezone
+				</button>
+			</InputGroup>
+			{#if tz && tz !== "" && validTimezones.includes(tz)}
+				<div class="mt-1">
+					{$t("edit-profile.timezone-preview")}
+					<Icon name="clock" aria-hidden />
+					{currentTime} <span class="text-body-secondary">(UTC{displayTimezone})</span>
+				</div>
+			{/if}
+			<p class="text-muted mt-1">
+				<Icon name="info-circle-fill" aria-hidden />
+				{$t("edit-profile.timezone-info")}
+			</p>
+		</div>
+		<div class="form-check">
+			<input
+				class="form-check-input"
+				type="checkbox"
+				checked={data.user.member_list_hidden}
+				value="true"
+				name="hide-member-list"
+				id="hide-member-list"
+			/>
+			<label class="form-check-label" for="hide-member-list">
+				{$t("edit-profile.hide-member-list-label")}
+			</label>
+		</div>
+		<p class="text-muted mt-1">
+			<Icon name="info-circle-fill" aria-hidden />
+			{$t("edit-profile.hide-member-list-info")}
+		</p>
+		<div class="mt-2">
+			<button type="submit" class="btn btn-primary">{$t("save-changes")}</button>
+		</div>
+	</form>
+</div>
diff --git a/Foxnouns.Frontend/src/routes/settings/profile/bio/+page.server.ts b/Foxnouns.Frontend/src/routes/settings/profile/bio/+page.server.ts
new file mode 100644
index 0000000..bb86f7e
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/profile/bio/+page.server.ts
@@ -0,0 +1,19 @@
+import { fastRequest } from "$api";
+import ApiError from "$api/error";
+import log from "$lib/log.js";
+
+export const actions = {
+	default: async ({ request, fetch, cookies }) => {
+		const body = await request.formData();
+		const bio = body.get("bio") as string | null;
+
+		try {
+			await fastRequest("PATCH", "/users/@me", { body: { bio }, fetch, cookies });
+			return { error: null, ok: true };
+		} catch (e) {
+			if (e instanceof ApiError) return { error: e.obj, ok: false };
+			log.error("Error updating bio:", e);
+			throw e;
+		}
+	},
+};
diff --git a/Foxnouns.Frontend/src/routes/settings/profile/bio/+page.svelte b/Foxnouns.Frontend/src/routes/settings/profile/bio/+page.svelte
new file mode 100644
index 0000000..19e04fb
--- /dev/null
+++ b/Foxnouns.Frontend/src/routes/settings/profile/bio/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import FormStatusMarker from "$components/editor/FormStatusMarker.svelte";
+	import type { ActionData, PageData } from "./$types";
+	import BioEditor from "$components/editor/BioEditor.svelte";
+	import { t } from "$lib/i18n";
+
+	type Props = { data: PageData; form: ActionData };
+	let { data, form }: Props = $props();
+
+	let bio = $state(data.user.bio || "");
+</script>
+
+<h4>{$t("edit-profile.bio-tab")}</h4>
+<FormStatusMarker {form} />
+<form method="POST">
+	<BioEditor bind:value={bio} maxLength={data.meta.limits.bio_length} />
+</form>
diff --git a/package.json b/package.json
index 50681f6..60f2ca5 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,8 @@
     "concurrently": "^9.0.1"
   },
   "scripts": {
-    "dev": "concurrently -n .net,node,rate -c magenta,yellow,blue -i 'cd Foxnouns.Backend && dotnet watch --no-hot-reload' 'cd Foxnouns.Frontend && pnpm dev' 'cd rate && go run -v .'",
+    "watch:be": "dotnet watch --no-hot-reload --project Foxnouns.Backend -- --migrate-and-start",
+    "dev": "concurrently -n .net,node,rate -c magenta,yellow,blue -i 'pnpm watch:be' 'cd Foxnouns.Frontend && pnpm dev' 'cd rate && go run -v .'",
     "format": "dotnet csharpier . && cd Foxnouns.Frontend && pnpm format"
   },
   "packageManager": "pnpm@9.12.3+sha512.cce0f9de9c5a7c95bef944169cc5dfe8741abfb145078c0d508b868056848a87c81e626246cb60967cbd7fd29a6c062ef73ff840d96b3c86c40ac92cf4a813ee"
diff --git a/rate/rate_limiter.go b/rate/rate_limiter.go
index 28368e2..d223197 100644
--- a/rate/rate_limiter.go
+++ b/rate/rate_limiter.go
@@ -134,12 +134,12 @@ func (l *Limiter) bucketLimiter(user, method, bucket string) *httprate.RateLimit
 func requestLimitFor(method string) (int, time.Duration) {
 	switch strings.ToUpper(method) {
 	case "PATCH", "POST":
-		return 1, time.Second
-	case "DELETE":
-		return 1, 5 * time.Second
-	case "GET":
 		return 3, time.Second
+	case "DELETE":
+		return 2, 5 * time.Second
+	case "GET":
+		return 10, time.Second
 	default:
-		return 2, time.Second
+		return 5, time.Second
 	}
 }