diff --git a/Catalogger.Backend/Api/GuildsController.Ignores.cs b/Catalogger.Backend/Api/GuildsController.Ignores.cs
index ea9e647..f9cc106 100644
--- a/Catalogger.Backend/Api/GuildsController.Ignores.cs
+++ b/Catalogger.Backend/Api/GuildsController.Ignores.cs
@@ -13,6 +13,8 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
+using System.Net;
+using Catalogger.Backend.Api.Middleware;
 using Microsoft.AspNetCore.Mvc;
 using Remora.Discord.API;
 using Remora.Discord.API.Abstractions.Objects;
@@ -104,4 +106,41 @@ public partial class GuildsController
 
         return NoContent();
     }
+
+    [HttpPut("key-roles/{roleId}")]
+    public async Task<IActionResult> AddKeyRoleAsync(string id, ulong roleId)
+    {
+        var (guildId, _) = await ParseGuildAsync(id);
+        var guildConfig = await guildRepository.GetAsync(guildId);
+
+        if (roleCache.GuildRoles(guildId).All(r => r.ID.Value != roleId))
+            throw new ApiError(HttpStatusCode.BadRequest, ErrorCode.BadRequest, "Role not found");
+
+        if (guildConfig.KeyRoles.Contains(roleId))
+            throw new ApiError(
+                HttpStatusCode.BadRequest,
+                ErrorCode.BadRequest,
+                "Role is already a key role"
+            );
+
+        await guildRepository.AddKeyRoleAsync(guildId, DiscordSnowflake.New(roleId));
+        return NoContent();
+    }
+
+    [HttpDelete("key-roles/{roleId}")]
+    public async Task<IActionResult> RemoveKeyRoleAsync(string id, ulong roleId)
+    {
+        var (guildId, _) = await ParseGuildAsync(id);
+        var guildConfig = await guildRepository.GetAsync(guildId);
+
+        if (!guildConfig.KeyRoles.Contains(roleId))
+            throw new ApiError(
+                HttpStatusCode.BadRequest,
+                ErrorCode.BadRequest,
+                "Role is already not a key role"
+            );
+
+        await guildRepository.RemoveKeyRoleAsync(guildId, DiscordSnowflake.New(roleId));
+        return NoContent();
+    }
 }
diff --git a/Catalogger.Backend/Api/GuildsController.cs b/Catalogger.Backend/Api/GuildsController.cs
index 560456f..e1a52b0 100644
--- a/Catalogger.Backend/Api/GuildsController.cs
+++ b/Catalogger.Backend/Api/GuildsController.cs
@@ -19,6 +19,7 @@ using Catalogger.Backend.Cache;
 using Catalogger.Backend.Cache.InMemoryCache;
 using Catalogger.Backend.Database;
 using Catalogger.Backend.Database.Repositories;
+using Catalogger.Backend.Extensions;
 using Catalogger.Backend.Services;
 using Microsoft.AspNetCore.Mvc;
 using Remora.Discord.API;
@@ -91,6 +92,16 @@ public partial class GuildsController(
                     .Select(ToChannel)
             ));
 
+        var roles = roleCache
+            .GuildRoles(guildId)
+            .OrderByDescending(r => r.Position)
+            .Select(r => new GuildRole(
+                r.ID.ToString(),
+                r.Name,
+                r.Position,
+                r.Colour.ToPrettyString()
+            ));
+
         return Ok(
             new GuildResponse(
                 guild.Id,
@@ -98,7 +109,9 @@ public partial class GuildsController(
                 guild.IconUrl,
                 categories,
                 channelsWithoutCategories,
-                guildConfig.Channels
+                roles,
+                guildConfig.Channels,
+                guildConfig.KeyRoles
             )
         );
     }
@@ -122,13 +135,17 @@ public partial class GuildsController(
         string IconUrl,
         IEnumerable<GuildCategory> Categories,
         IEnumerable<GuildChannel> ChannelsWithoutCategory,
-        Database.Models.Guild.ChannelConfig Config
+        IEnumerable<GuildRole> Roles,
+        Database.Models.Guild.ChannelConfig Config,
+        ulong[] KeyRoles
     );
 
     private record GuildCategory(string Id, string Name, IEnumerable<GuildChannel> Channels);
 
     private record GuildChannel(string Id, string Name, bool CanLogTo, bool CanRedirectFrom);
 
+    private record GuildRole(string Id, string Name, int Position, string Colour);
+
     [Authorize]
     [HttpPatch]
     [ProducesResponseType<Database.Models.Guild.ChannelConfig>(statusCode: StatusCodes.Status200OK)]
diff --git a/Catalogger.Frontend/src/lib/api.ts b/Catalogger.Frontend/src/lib/api.ts
index 9db5318..a52aa7c 100644
--- a/Catalogger.Frontend/src/lib/api.ts
+++ b/Catalogger.Frontend/src/lib/api.ts
@@ -77,7 +77,9 @@ export type FullGuild = {
 	icon_url: string;
 	categories: GuildCategory[];
 	channels_without_category: GuildChannel[];
+	roles: GuildRole[];
 	config: GuildConfig;
+	key_roles: string[];
 };
 
 export type GuildCategory = {
@@ -93,6 +95,13 @@ export type GuildChannel = {
 	can_redirect_from: boolean;
 };
 
+export type GuildRole = {
+	id: string;
+	name: string;
+	position: string;
+	colour: string;
+};
+
 export type CurrentUser = {
 	user: User;
 	guilds: PartialGuild[];
diff --git a/Catalogger.Frontend/src/routes/dash/[guildId]/key-roles/+page.svelte b/Catalogger.Frontend/src/routes/dash/[guildId]/key-roles/+page.svelte
index 6f940a6..dea7dfa 100644
--- a/Catalogger.Frontend/src/routes/dash/[guildId]/key-roles/+page.svelte
+++ b/Catalogger.Frontend/src/routes/dash/[guildId]/key-roles/+page.svelte
@@ -1,7 +1,108 @@
 <script lang="ts">
-	// TODO
+	import {
+		Button,
+		Label,
+		ListGroup,
+		ListGroupItem,
+	} from "@sveltestrap/sveltestrap";
+	import type { PageData } from "./$types";
+	import Svelecte from "svelecte";
+	import { addToast } from "$lib/toast";
+	import { fastFetch, type ApiError } from "$lib/api";
+
+	export let data: PageData;
+
+	$: keyRoles = data.guild.roles.filter((r) =>
+		data.guild.key_roles.some((id) => r.id === id),
+	);
+
+	$: options = data.guild.roles
+		.filter((r) => !keyRoles.some((kr) => kr.id === r.id))
+		.map((r) => ({ label: r.name, value: r.id }));
+
+	let toAdd: string | null;
+
+	const addRole = async () => {
+		if (!toAdd) return;
+
+		try {
+			await fastFetch("PUT", `/api/guilds/${data.guild.id}/key-roles/${toAdd}`);
+			const role = data.guild.roles.find((r) => r.id === toAdd);
+			data.guild.key_roles.push(toAdd);
+			data.guild = data.guild;
+			addToast({
+				header: "Added key role",
+				body: `Added ${role?.name || `unknown role ${toAdd}`} to the list of key roles.`,
+			});
+			toAdd = null;
+		} catch (e) {
+			addToast({
+				header: "Error adding key role",
+				body:
+					(e as ApiError).message || "Unknown error. Please try again later.",
+			});
+		}
+	};
+
+	const removeRole = async (id: string) => {
+		try {
+			await fastFetch("DELETE", `/api/guilds/${data.guild.id}/key-roles/${id}`);
+			const role = data.guild.roles.find((r) => r.id === id);
+			const idx = data.guild.key_roles.indexOf(id);
+			if (idx > -1) data.guild.key_roles.splice(idx, 1);
+			data.guild = data.guild;
+			addToast({
+				header: "Removed key role",
+				body: `Removed ${role?.name || `unknown role ${toAdd}`} from the list of key roles.`,
+			});
+		} catch (e) {
+			addToast({
+				header: "Error removing key role",
+				body:
+					(e as ApiError).message || "Unknown error. Please try again later.",
+			});
+		}
+	};
+
+	const colour = (c: string) => (c === "#000000" ? "current-color" : c);
 </script>
 
 <h3>Key roles</h3>
 
-<p>This page is still under construction!</p>
+<p>
+	Key roles are logged separately from other roles, and also log <em>who</em> added
+	or removed the role. Useful for moderator roles.
+</p>
+
+<div>
+	<Label><strong>Add a new key role</strong></Label>
+	<Svelecte
+		bind:value={toAdd}
+		{options}
+		labelField="label"
+		valueField="value"
+		searchable={true}
+	/>
+</div>
+
+<div class="my-2 d-grid d-md-block">
+	<Button color="primary" on:click={() => addRole()} disabled={!toAdd}>
+		Add key role
+	</Button>
+</div>
+
+<div>
+	<h4>Current key roles</h4>
+
+	<ListGroup>
+		{#each keyRoles as r (r.id)}
+			<ListGroupItem class="d-flex justify-content-between align-items-center">
+				<span>
+					<span style="color: {colour(r.colour)};">&#x25CF;</span>
+					{r.name}
+				</span>
+				<Button color="link" on:click={() => removeRole(r.id)}>Remove</Button>
+			</ListGroupItem>
+		{/each}
+	</ListGroup>
+</div>