diff --git a/.design-sync/NOTES.md b/.design-sync/NOTES.md
new file mode 100644
index 000000000..14d5bd903
--- /dev/null
+++ b/.design-sync/NOTES.md
@@ -0,0 +1,177 @@
+# design-sync notes — projectNext → claude.ai/design
+
+Repo-specific gotchas for future syncs. Read this **and** `config.json` before
+re-running. Target project: `Ohma Design System`
+(`451c0873-159d-403e-af6c-346418a5e5f9`).
+
+## Why this repo needs a staging step
+
+projectNext is a **Next.js app, not a component library**: no library build, no
+`dist/`, and every component styles itself with `*.module.scss`, which esbuild
+cannot load. `.design-sync/stage-pkg.mjs` mechanically transforms the real source
+into a bundlable package under `.design-sync/.cache/pkg/`:
+
+- compiles each `*.module.scss` → `*.module.css` with `sass` (a custom importer
+  resolves the `@/styles` alias); esbuild then handles `*.module.css` natively as
+  CSS modules, so the class-name map survives
+- rewrites only import specifiers; component bodies are copied verbatim
+- swaps `next/link` → `src/_shims/Link`, `next/navigation` → `src/_shims/navigation`
+- emits `index.ts` (the barrel that defines the synced surface), `tsconfig.json`,
+  `package.json`, and `styles/globals.css`
+- copies `public/fonts/**` in and rewrites the app's absolute `url('/fonts/…')`
+  references to relative ones
+
+`.design-sync/scope.json` is the **source of truth for which components sync**
+(`{Name: {group, src, export}}`). Add or remove entries there, not in config.
+
+Rebuild command (also in `config.buildCmd`): `node .design-sync/stage-pkg.mjs`.
+It emits the `.d.ts` tree itself — it wipes its output dir (`types/` included)
+and the converter derives the component list from that tree, so a separate
+forgotten `tsc` silently produced a 12-component bundle instead of the full set.
+
+## Environment
+
+- **Node is not on `PATH`** on this NixOS host. Use
+  `export PATH=/nix/store/hwjfj8m2kcsl7kz2xa5yf84jbfh9jssf-nodejs-24.18.1/bin:$PATH`
+  (or whatever `ls -d /nix/store/*nodejs*/bin` shows). The app itself normally runs
+  in Docker (`pn-dev`), but the sync runs on the host against `./node_modules`.
+- **Playwright chromium is not downloaded.** The system chromium works:
+  `export DS_CHROMIUM_PATH=/run/current-system/sw/bin/chromium`. Only the
+  `playwright` npm package is installed in `.ds-sync/`
+  (`PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1`).
+- Run the converter with `--node-modules ./node_modules --entry
+  ./.design-sync/.cache/pkg/index.ts`.
+
+## Decisions taken (and why)
+
+- **`Date` → exported as `DateDisplay`.** The component's real name is `Date`, but
+  the converter's `.jsx` stub does `Object.assign(window, { <Name>: … })`, which
+  would clobber the global `Date` constructor on any page that loads it. Renamed in
+  the barrel only; the source is untouched.
+- **`Inter` is vendored from Google Fonts** (`.design-sync/vendor-inter.mjs`, SIL
+  OFL). `src/styles/_fonts.scss` sets `$primary: 'Inter', sans-serif` — Inter is the
+  body font for the whole site — but the app never `@font-face`s it and ships no
+  file, so **production has been falling back to system sans**. Worth fixing in the
+  app itself. Cache is gitignored, so a fresh clone must re-run the script (needs
+  network).
+- **`OhmaPreviewSurface`** exists only as the outer half of `cfg.provider`. The
+  card harness hard-codes `body{background:#fff}`, and this DS is dark-only with
+  near-white `--text`, so without it text and icons render invisible. It never
+  wraps a real design (those get the dark surface from `styles.css`).
+- **`OhmaProviders`** nests the app's real `EditModeProvider`,
+  `PageTitleProvider` and `PopUpProvider`. Not a reimplementation — it imports them.
+- **`CheckboxFieldPresent` is excluded from the card list** (`componentSrcMap:
+  null`). It renders a deliberately hidden input — internal form plumbing used by
+  `Checkbox`/`Slider`, never composed directly. Still in the bundle.
+- **`MobileNavBar` is not synced**: it transitively imports `StandardImageServer`,
+  which pulls in the service layer.
+- **`TagHeasderItemPopUp` keeps its typo** — that is the real export name in
+  `HeaderItems/HeaderItemPopUp.tsx`. Renaming would desync the DS from the app.
+
+## Themes
+
+The app ships **four** themes in
+`src/app/users/[username]/(user-admin)/theme/theme.ts` — `Standard`, `Light`,
+`Solarized`, `StjerneInnbygger` — applied at runtime by `applyTheme()`, which
+sets 17 custom properties on `document.documentElement`. `ThemeEnabler` (mounted
+in `app/layout.tsx`) restores the persisted choice on load.
+
+`stage-pkg.mjs` reads `theme.ts` at build time (in a child process with
+`--experimental-transform-types`, because the file uses an `enum` and Node's
+default type-stripping can't handle that) and emits a
+`:root[data-theme="<Name>"]` block per theme into `styles/globals.css`. The
+barrel also re-exports `themes` / `applyTheme` / `subscribeToTheme` /
+`getActiveTheme` / `ThemeName`, so a design can switch themes exactly as the app
+does. `ThemeName` is excluded from the card list (`componentSrcMap: null`) — it's
+an enum, not a component.
+
+**Do not hand-copy palette values anywhere.** `theme.ts` is the single source of
+truth; the CSS is generated from it on every build.
+
+Verified in a real card (both mechanisms): `[data-theme]` and `applyTheme()` both
+re-colour the shipped components.
+
+**Inconsistency worth fixing in the app:** `globals.scss` and `theme.ts`'s
+`Standard` disagree — `globals.scss` has `--text: hsl(0,0%,90%)` and
+`--accent-blue: #037FFC`, while `themes.Standard` has `hsl(0,0%,80%)` and
+`hsl(210,70%,50%)`. So picking "Standard" in the theme switcher yields slightly
+different colours than a fresh page load, which never applied a theme.
+
+## Component defects found while authoring previews
+
+These are faithfully reproduced in the cards and documented in `conventions.md`.
+They are **app bugs, not sync bugs** — fix them in the repo, then re-sync.
+
+- ~~`UI/Select.module.scss` styles almost nothing…~~ **Fixed.** Select now uses
+  `appearance: none` plus the shared field treatment; verified in the built CSS
+  (`.Select_field` carries `surface-raised` / `ink-strong` / border / radius).
+- ~~`UI/FileInput.module.scss` `.black` … dark text on black.~~ **Fixed.**
+  `.FileInput_black > .trigger .value` now resolves to `--ink-strong`.
+- `UI/Slider.module.scss` `secondary` maps the track to `--surface-base`, invisible
+  against the app surface. Same for `TextInput`'s `secondary` text colour.
+- `UI/Checkbox.module.scss`: the `children` branch (`.inputAndChildren`) drops the
+  custom box styling and falls back to the native checkbox.
+- ~~`UI/BorderButton.module.scss` has no `:disabled` rule.~~ Retired — the
+  outline button tier was removed entirely (component, `borderBtn` mixin and all
+  ten stylesheet call sites) in favour of the filled `secondaryBtn` tier. If a
+  future sync sees `BorderButton` reappear in `scope.json`, that is a mistake.
+- `Table/SimpleTable.tsx` wraps each `<tr>` in a `<Link>` when `links` is passed —
+  an `<a>` containing a `<tr>` is invalid HTML and browsers hoist it out, visibly
+  breaking the rows. The `WithLinks` story was dropped for this reason.
+- `SideBarNavItem` / `AdminNav` labels only appear under
+  `.DesktopSideBar[data-expanded='true']`. That shell is `DesktopSideBar.tsx`, a
+  server component that can't ship, so `expanded` has no visible effect in a card.
+
+## Known render warns
+
+None. The final `package-validate.mjs` run exits 0 with **zero** warnings and
+39/39 previews rendering cleanly (40 before `BorderButton` was retired). Any warn
+on a future run is new — investigate before recording it here.
+
+## Preview techniques used
+
+- Overlay/menu open states are produced by **clicking the real trigger on mount**
+  (`useEffect` → `querySelector('button').click()`), never by hand-writing panel
+  markup. `SearchableDropdown` focuses its combobox input instead.
+- Popup components carry `cfg.overrides.<Name> = {cardMode: "single",
+  primaryStory: "Opened", viewport: "900x620"}` because the panel is
+  position-fixed and escapes a grid cell.
+- `SimpleTable` and `RadioLarge` use `cardMode: "column"` (they overflowed a
+  multi-column grid cell).
+- `Dropzone` builds real decodable PNGs with a `<canvas>` at mount, because it
+  renders `URL.createObjectURL(file)` thumbnails. A truncated/padded PNG shows as
+  a broken-image box.
+- `NavBarTitle`'s title state is produced by mounting a hidden real `PageWrapper`,
+  which is the only thing that writes `PageTitleContext`.
+- Content is real Norwegian Omega material (committee names from
+  `NavBar/navDef.ts`, realistic event names) — never `foo`/`bar`. **Person names
+  are placeholders** (`Ola Nordmann` / `olanord`, plus invented Norwegian names);
+  don't put real members into previews — these cards are published.
+- `<Name>.prompt.md` embeds examples lifted from `.design-sync/previews/<Name>.tsx`,
+  so editing a preview changes the uploaded doc too, not just the card.
+
+## Re-sync risks
+
+- **Node/chromium paths above are host-specific** and will rot on a nix-store
+  garbage-collect or an OS upgrade. Re-derive them, don't trust them.
+- **`scope.json` drifts silently.** If a component listed there is renamed, moved
+  or gains a service import, `stage-pkg.mjs` fails loudly (good) — but a *new*
+  presentational component will simply never be synced until someone adds it.
+  Re-check `src/app/_components/` against `scope.json` on each sync.
+- **Inter is fetched from Google Fonts at stage time.** No network → no Inter →
+  every card silently falls back to system sans. `stage-pkg.mjs` prints
+  `! Inter not vendored yet`; don't ignore it.
+- **The scss `@font-face` strip** in `stage-pkg.mjs` removes `@font-face` blocks
+  from every `*.module.css` (sass re-emits them into each file via
+  `@use "ohma"`). If font handling in `src/styles/` changes shape, verify the
+  canonical copy still reaches `fonts/fonts.css`.
+- **Component defects above may get fixed in the app.** When they are, update
+  `conventions.md`'s "Known rough edges" and re-author the affected previews
+  (`Select*` especially — they exist only to document a defect right now).
+- Previews were verified against **Chromium 151**; native control rendering
+  (`<select>`, `<input type="date">`, `type="color"`) is UA-dependent.
+- `_ds_bundle.js` was confirmed **byte-deterministic** across two consecutive
+  builds from an unchanged staged package. If a future no-change run reports a
+  changed `bundleSha12`, something in `stage-pkg.mjs`'s emission order has become
+  input-dependent — chase it rather than shrugging, because it would invalidate
+  the carried-forward grades that make re-syncs cheap.
diff --git a/.design-sync/config.json b/.design-sync/config.json
new file mode 100644
index 000000000..c05850a31
--- /dev/null
+++ b/.design-sync/config.json
@@ -0,0 +1,45 @@
+{
+  "projectId": "451c0873-159d-403e-af6c-346418a5e5f9",
+  "shape": "package",
+  "pkg": "@ohma/ui",
+  "globalName": "OhmaUI",
+  "srcDir": "src",
+  "buildCmd": "node .design-sync/stage-pkg.mjs",
+  "readmeHeader": ".design-sync/conventions.md",
+  "cssEntry": "styles/globals.css",
+  "extraFonts": ["styles/globals.css"],
+  "provider": {
+    "component": "OhmaPreviewSurface",
+    "inner": { "component": "OhmaProviders" }
+  },
+  "overrides": {
+    "PopUp": { "cardMode": "single", "primaryStory": "Opened", "viewport": "900x620" },
+    "AddHeaderItemPopUp": { "cardMode": "single", "primaryStory": "Opened", "viewport": "900x620" },
+    "HelpHeaderItemPopUp": { "cardMode": "single", "primaryStory": "Opened", "viewport": "900x620" },
+    "SettingsHeaderItemPopUp": { "cardMode": "single", "primaryStory": "Opened", "viewport": "900x620" },
+    "UsersHeaderItemPopUp": { "cardMode": "single", "primaryStory": "Opened", "viewport": "900x620" },
+    "TagHeasderItemPopUp": { "cardMode": "single", "primaryStory": "Opened", "viewport": "900x620" },
+    "ArchiveHeaderItemPopUp": { "cardMode": "single", "primaryStory": "Opened", "viewport": "900x620" },
+    "Menu": { "cardMode": "single", "primaryStory": "Opened", "viewport": "900x620" },
+    "SimpleTable": { "cardMode": "column" },
+    "RadioLarge": { "cardMode": "column" }
+  },
+  "componentSrcMap": {
+    "OhmaProviders": null,
+    "OhmaPreviewSurface": null,
+    "CheckboxFieldPresent": null,
+    "ThemeName": null,
+    "SelectString": "src/inputs/Select.tsx",
+    "SelectNumber": "src/inputs/Select.tsx",
+    "DateDisplay": "src/data-display/Date.tsx",
+    "NavBarItem": "src/navigation/Item.tsx",
+    "SubPageNavBar": "src/navigation/SubPageNavBar.tsx",
+    "SubPageNavBarItem": "src/navigation/SubPageNavBar.tsx",
+    "AddHeaderItemPopUp": "src/overlays/HeaderItemPopUp.tsx",
+    "HelpHeaderItemPopUp": "src/overlays/HeaderItemPopUp.tsx",
+    "SettingsHeaderItemPopUp": "src/overlays/HeaderItemPopUp.tsx",
+    "UsersHeaderItemPopUp": "src/overlays/HeaderItemPopUp.tsx",
+    "TagHeasderItemPopUp": "src/overlays/HeaderItemPopUp.tsx",
+    "ArchiveHeaderItemPopUp": "src/overlays/HeaderItemPopUp.tsx"
+  }
+}
diff --git a/.design-sync/conventions.md b/.design-sync/conventions.md
new file mode 100644
index 000000000..681dd60ac
--- /dev/null
+++ b/.design-sync/conventions.md
@@ -0,0 +1,136 @@
+# Ohma — how to build with this design system
+
+Ohma is the component library of **Sanctus Omega Broderskab** (projectNext). It
+is **fully themed** — four palettes, swapped at runtime — and the UI language is
+Norwegian (bokmål). Write labels, placeholders and helper copy in Norwegian.
+
+## Wrap every tree in `OhmaProviders`
+
+Several components read app-level React context. Without the provider they throw
+or render an empty placeholder:
+
+- `PopUp` and every `*HeaderItemPopUp` throw `Pop up context needed for popups`
+- `PageWrapper` writes the page title; `NavBarTitle` reads it — outside the
+  provider `NavBarTitle` renders only a blank reserved-space strip
+- `AdminNav` reads edit-mode state
+
+```jsx
+const { OhmaProviders, PageWrapper, Button } = window.OhmaUI
+
+<OhmaProviders>
+  <PageWrapper title="Arrangementer">
+    <Button color="primary">Lagre</Button>
+  </PageWrapper>
+</OhmaProviders>
+```
+
+## Styling idiom: CSS custom properties, not utility classes
+
+**There is no utility-class vocabulary — do not invent one, and do not write
+`class="bg-surface-1"`-style names; nothing will resolve.** Component internals
+are styled by hashed CSS-module classes you cannot target. Style your own layout
+glue with the design tokens below, via inline `style` or your own CSS.
+
+The tokens are declared on `:root`/`html` by the shipped stylesheet, and **17 of
+the 21 are re-declared by every theme** (see Themes below). These 21 are the
+complete set:
+
+| Group | Tokens |
+|---|---|
+| Surfaces | `--surface-base` (page), `--surface-raised` (cards/panels), `--surface-hover`, `--surface-subtle` |
+| Text | `--text`, `--text-muted`, `--text-inv` (on accent fills) |
+| Ink | `--ink-hover`, `--ink-strong` |
+| Accents | `--accent-blue` (primary), `--accent-red`, `--accent-green`, `--accent-yellow`, `--accent-orange`, `--accent-cyan`, `--accent-magenta`, `--accent-violet` |
+| Shape / spacing | `--rounding` (1rem), `--gap` (0.5rem) |
+| Depth | `--layer`, `--boxShadow` |
+
+Idiomatic panel:
+
+```jsx
+<div style={{
+  background: 'var(--surface-raised)',
+  color: 'var(--text)',
+  padding: 'calc(2 * var(--gap))',
+  borderRadius: 'var(--rounding)',
+}}>…</div>
+```
+
+**Always paint a `--surface-base` (or `--surface-raised`) background behind your
+content**, and always take text colour from `--text` / `--text-muted`. Dropping
+content onto an unpainted background is the single most common way to end up with
+invisible text here, because the default theme's `--text` is near-white.
+
+## Themes
+
+Four themes ship with the design system: **`Standard`** (dark, the default),
+**`Light`**, **`Solarized`** (warm light), and **`StjerneInnbygger`** (deep blue).
+Each re-declares the same 17 colour tokens — every surface, text, ink and accent
+above; `--rounding`, `--gap`, `--text-inv` and `--boxShadow` stay fixed.
+
+Two equivalent ways to select one:
+
+```jsx
+// Declarative — the stylesheet ships a block per theme.
+<html data-theme="Light">
+
+// Runtime, exactly as the app's own theme picker does it:
+const { applyTheme, ThemeName, themes } = window.OhmaUI
+applyTheme(ThemeName.Solarized)   // sets the custom properties on <html>
+```
+
+`themes` is the raw palette map (`themes.Light['surface-base']` etc.) if you need
+to read a value rather than apply one. `subscribeToTheme(fn)` notifies on change;
+`getActiveTheme()` reads the persisted choice.
+
+**This is why the token rule matters.** A component or layout styled with
+`var(--surface-raised)` follows all four themes for free. A hardcoded `#1a1a1e`
+looks correct in `Standard` and broken in `Light` and `Solarized` — so never
+hardcode a colour that a token already names.
+
+## Type
+
+`Inter` (300/400/500/700) is the body face and applies by default. `PlayfairDisplay`
+(serif) is the display face — `PageWrapper` already uses it for its `h1`; reach for
+it only for headings. Both ship with the bundle. Font sizes are fluid `clamp()`
+values baked into the components; don't hardcode px type.
+
+## Component groups
+
+`actions` (Button) · `inputs` (TextInput, Textarea, NumberInput,
+DateInput, ColorInput, FileInput, Checkbox, RadioLarge, Slider, Dropzone,
+SelectString, SelectNumber, SearchableDropdown) · `overlays` (PopUp, Dropdown,
+EditOverlay, AddHeaderItemPopUp, HelpHeaderItemPopUp, SettingsHeaderItemPopUp,
+UsersHeaderItemPopUp, TagHeasderItemPopUp, ArchiveHeaderItemPopUp) · `feedback`
+(ProgressBar, SlideInOnView) · `data-display` (SimpleTable, DateDisplay,
+CountDown) · `layout` (PageWrapper, SocialIcons) · `navigation` (NavBarItem, Menu,
+SideBarNavItem, AdminNav, NavBarTitle, NavTooltip, SubPageNavBar,
+SubPageNavBarItem, ReportButton).
+
+Read each component's `<Name>.d.ts` for its exact props and `<Name>.prompt.md`
+for usage before composing it. The stylesheet of record is `styles.css` and its
+imports (`fonts/fonts.css`, `_ds_bundle.css`).
+
+## Conventions worth copying
+
+- **Form controls take `name`** and render their own `<label>` from `label` — no
+  separate label element.
+- **Every field is the same 56px shell** — `TextInput`, `Textarea`,
+  `NumberInput`, `DateInput`, `SelectString`, `SelectNumber`, `ColorInput`,
+  `FileInput`, `Dropdown`, `SearchableDropdown` — with a label that floats above
+  the value. Pass `background="raised"` on any of them when the field sits on
+  `--surface-raised`, so it stays distinguishable.
+- **There is no outline/ghost button.** Every action is a filled `Button`:
+  `primary` for the main action on a view, `secondary` for everything beside it.
+  Don't invent a bordered variant — the design system deliberately has two
+  action tiers, both filled.
+- `Button`'s `color` is `primary | secondary | green | red`; `green` is confirm,
+  `red` is destructive.
+- Composition beats new markup: `SubPageNavBarItem` only lays out inside
+  `SubPageNavBar`; header-item popups belong in `PageWrapper`'s `headerItem`.
+
+## Known rough edges (don't imitate, don't "fix" in a design)
+
+- `Slider`'s `secondary` variant is invisible on the app surface; use `primary`,
+  `red` or `white`.
+- `SimpleTable`'s `links` prop wraps `<tr>` in an `<a>`, which browsers hoist out
+  of the table — avoid it.
diff --git a/.design-sync/previews/AddHeaderItemPopUp.tsx b/.design-sync/previews/AddHeaderItemPopUp.tsx
new file mode 100644
index 000000000..3a259d452
--- /dev/null
+++ b/.design-sync/previews/AddHeaderItemPopUp.tsx
@@ -0,0 +1,34 @@
+import { AddHeaderItemPopUp, Button, TextInput } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+/** The panel only opens from a real press on the trigger, so drive that on mount. */
+function OpenOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLButtonElement>('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+const panel = (
+    <div style={{ display: 'grid', gap: '1rem', minWidth: '17rem' }}>
+        <h2 style={{ margin: 0 }}>Nytt arrangement</h2>
+        <TextInput name="eventName" label="Navn" background="raised" />
+        <Button color="primary">Opprett</Button>
+    </div>
+)
+
+export const Trigger = () => (
+    <AddHeaderItemPopUp popUpKey="add-trigger">{panel}</AddHeaderItemPopUp>
+)
+
+export const Opened = () => (
+    <OpenOnMount>
+        <AddHeaderItemPopUp popUpKey="add-opened">{panel}</AddHeaderItemPopUp>
+    </OpenOnMount>
+)
+
+export const CustomLabel = () => (
+    <AddHeaderItemPopUp popUpKey="add-label" label="Ny">{panel}</AddHeaderItemPopUp>
+)
diff --git a/.design-sync/previews/AdminNav.tsx b/.design-sync/previews/AdminNav.tsx
new file mode 100644
index 000000000..4bc70b584
--- /dev/null
+++ b/.design-sync/previews/AdminNav.tsx
@@ -0,0 +1,35 @@
+import { AdminNav } from '@ohma/ui'
+import type { ReactNode } from 'react'
+
+const Rail = ({ children }: { children: ReactNode }) => (
+    <div style={{
+        width: '4.5rem',
+        padding: '0.75rem',
+        background: 'var(--surface-raised)',
+        borderRadius: 'var(--rounding)',
+    }}>
+        {children}
+    </div>
+)
+
+/**
+ * AdminNav renders nothing at all — not even its wrapping nav — unless
+ * `isAdmin` is true or EditModeContext reports something editable on the page.
+ *
+ * Like SideBarNavItem, its icon labels stay collapsed unless an ancestor
+ * matches `.DesktopSideBar[data-expanded='true']`; that shell is the app's own
+ * DesktopSideBar server component and is not part of this design system, so
+ * `expanded` has no visible effect here.
+ */
+export const Admin = () => (
+    <Rail><AdminNav isAdmin /></Rail>
+)
+
+export const NonAdminRendersNothing = () => (
+    <div>
+        <p style={{ margin: '0 0 0.75rem', color: 'var(--text-muted)' }}>
+            <code>isAdmin=false</code> with nothing editable — AdminNav returns null:
+        </p>
+        <Rail><AdminNav isAdmin={false} /></Rail>
+    </div>
+)
diff --git a/.design-sync/previews/ArchiveHeaderItemPopUp.tsx b/.design-sync/previews/ArchiveHeaderItemPopUp.tsx
new file mode 100644
index 000000000..7227809fd
--- /dev/null
+++ b/.design-sync/previews/ArchiveHeaderItemPopUp.tsx
@@ -0,0 +1,36 @@
+import { ArchiveHeaderItemPopUp, Button } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+/** The panel only opens from a real press on the trigger, so drive that on mount. */
+function OpenOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLButtonElement>('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+const panel = (
+    <div style={{ display: 'grid', gap: '1rem', minWidth: '17rem' }}>
+        <h2 style={{ margin: 0 }}>Arkiv</h2>
+        <p style={{ margin: 0, color: 'var(--text-muted)' }}>
+            Arkiverte arrangementer vises ikke i oversikten, men beholdes.
+        </p>
+        <Button color="secondary">Vis arkiverte</Button>
+    </div>
+)
+
+export const Trigger = () => (
+    <ArchiveHeaderItemPopUp popUpKey="archive-trigger">{panel}</ArchiveHeaderItemPopUp>
+)
+
+export const Opened = () => (
+    <OpenOnMount>
+        <ArchiveHeaderItemPopUp popUpKey="archive-opened">{panel}</ArchiveHeaderItemPopUp>
+    </OpenOnMount>
+)
+
+export const CustomLabel = () => (
+    <ArchiveHeaderItemPopUp popUpKey="archive-label" label="Arkiv">{panel}</ArchiveHeaderItemPopUp>
+)
diff --git a/.design-sync/previews/Button.tsx b/.design-sync/previews/Button.tsx
new file mode 100644
index 000000000..0ad859619
--- /dev/null
+++ b/.design-sync/previews/Button.tsx
@@ -0,0 +1,23 @@
+import { Button } from '@ohma/ui'
+
+export const Colors = () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
+        <Button color="primary">Lagre</Button>
+        <Button color="secondary">Avbryt</Button>
+        <Button color="green">Meld meg på</Button>
+        <Button color="red">Slett arrangement</Button>
+    </div>
+)
+
+export const Disabled = () => (
+    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center' }}>
+        <Button color="primary" disabled>Lagre</Button>
+        <Button color="green" disabled>Påmelding stengt</Button>
+    </div>
+)
+
+export const Submit = () => (
+    <form onSubmit={event => event.preventDefault()}>
+        <Button type="submit" color="primary">Send inn søknad</Button>
+    </form>
+)
diff --git a/.design-sync/previews/Checkbox.tsx b/.design-sync/previews/Checkbox.tsx
new file mode 100644
index 000000000..de5cda72b
--- /dev/null
+++ b/.design-sync/previews/Checkbox.tsx
@@ -0,0 +1,28 @@
+import { Checkbox } from '@ohma/ui'
+
+export const Default = () => (
+    <Checkbox name="newsletter" label="Send meg nyhetsbrev" />
+)
+
+export const Checked = () => (
+    <Checkbox name="terms" label="Jeg godtar vedtektene" defaultChecked />
+)
+
+/**
+ * `children` become part of the clickable label. Note the box itself loses the
+ * styled appearance in this mode and falls back to the native checkbox — the
+ * `.inputAndChildren` branch doesn't carry the custom styling. See NOTES.md.
+ */
+export const WithChildren = () => (
+    <Checkbox name="allergies">
+        <strong>Jeg har matallergier</strong>
+    </Checkbox>
+)
+
+export const Group = () => (
+    <div style={{ display: 'grid', gap: '0.75rem' }}>
+        <Checkbox name="notifyEmail" label="E-post" defaultChecked />
+        <Checkbox name="notifyPush" label="Push-varsel" />
+        <Checkbox name="notifySms" label="SMS" />
+    </div>
+)
diff --git a/.design-sync/previews/ColorInput.tsx b/.design-sync/previews/ColorInput.tsx
new file mode 100644
index 000000000..4c6bf0b73
--- /dev/null
+++ b/.design-sync/previews/ColorInput.tsx
@@ -0,0 +1,36 @@
+import { ColorInput } from '@ohma/ui'
+
+/**
+ * Dressed as a form field like the other inputs: the swatch takes the place of
+ * the field value, with the selected hex beside it and the label floated above.
+ */
+export const Default = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <ColorInput name="groupColor" label="Komitéfarge" defaultValue="#037FFC" />
+    </div>
+)
+
+export const FromRGB = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <ColorInput name="accent" label="Aksentfarge" defaultValueRGB={{ red: 92, green: 209, blue: 122 }} />
+    </div>
+)
+
+export const Palette = () => (
+    <div style={{ display: 'grid', gap: '0.75rem', maxWidth: '22rem' }}>
+        <ColorInput name="primary" label="Primær" defaultValue="#037FFC" />
+        <ColorInput name="warning" label="Advarsel" defaultValue="#E6E64D" />
+        <ColorInput name="danger" label="Fare" defaultValue="#EB5757" />
+    </div>
+)
+
+export const OnRaisedSurface = () => (
+    <div style={{
+        background: 'var(--surface-raised)',
+        padding: '1.5rem',
+        borderRadius: 'var(--rounding)',
+        maxWidth: '22rem',
+    }}>
+        <ColorInput name="flairColor" label="Flair-farge" background="raised" defaultValue="#A855F7" />
+    </div>
+)
diff --git a/.design-sync/previews/CountDown.tsx b/.design-sync/previews/CountDown.tsx
new file mode 100644
index 000000000..c09331999
--- /dev/null
+++ b/.design-sync/previews/CountDown.tsx
@@ -0,0 +1,34 @@
+import { CountDown } from '@ohma/ui'
+
+// CountDown ticks every 100ms off the real clock, so the reference has to be
+// relative to "now" for the cards to show a meaningful remainder.
+const inDays = (days: number) => new Date(Date.now() + days * 24 * 60 * 60 * 1000)
+const inMinutes = (minutes: number) => new Date(Date.now() + minutes * 60 * 1000)
+
+export const Days = () => (
+    <p style={{ margin: 0, fontSize: '1.5rem' }}>
+        <CountDown referenceDate={inDays(12)} />
+    </p>
+)
+
+export const HoursAndMinutes = () => (
+    <p style={{ margin: 0, fontSize: '1.5rem' }}>
+        <CountDown referenceDate={inMinutes(150)} />
+    </p>
+)
+
+export const InHeroPanel = () => (
+    <div style={{
+        background: 'var(--surface-raised)',
+        padding: '1.5rem',
+        borderRadius: 'var(--cardRounding, var(--rounding))',
+        textAlign: 'center',
+        display: 'grid',
+        gap: '0.5rem',
+    }}>
+        <span style={{ color: 'var(--text-muted)' }}>Immatrikuleringsballet starter om</span>
+        <strong style={{ fontSize: '1.75rem' }}>
+            <CountDown referenceDate={inDays(3)} />
+        </strong>
+    </div>
+)
diff --git a/.design-sync/previews/DateDisplay.tsx b/.design-sync/previews/DateDisplay.tsx
new file mode 100644
index 000000000..eb104dd4d
--- /dev/null
+++ b/.design-sync/previews/DateDisplay.tsx
@@ -0,0 +1,24 @@
+import { DateDisplay } from '@ohma/ui'
+
+// Fixed dates so the cards are reproducible. DateDisplay renders the UTC string
+// on the server pass and switches to the viewer's locale after hydration.
+const BALL = new Date('2026-08-15T18:00:00Z')
+const DEADLINE = new Date('2026-09-01T23:59:00Z')
+
+export const WithTime = () => <DateDisplay date={BALL} />
+
+export const DateOnly = () => <DateDisplay date={BALL} includeTime={false} />
+
+export const InSentence = () => (
+    <p style={{ margin: 0 }}>
+        Påmeldingen stenger <strong><DateDisplay date={DEADLINE} /></strong>.
+    </p>
+)
+
+export const InList = () => (
+    <ul style={{ margin: 0, paddingLeft: '1.2rem', display: 'grid', gap: '0.35rem' }}>
+        <li>Immatrikuleringsball — <DateDisplay date={BALL} /></li>
+        <li>Vinsmaking — <DateDisplay date={new Date('2026-09-03T19:00:00Z')} /></li>
+        <li>Ombul-lansering — <DateDisplay date={new Date('2026-09-21T17:30:00Z')} /></li>
+    </ul>
+)
diff --git a/.design-sync/previews/DateInput.tsx b/.design-sync/previews/DateInput.tsx
new file mode 100644
index 000000000..c7e1b30fa
--- /dev/null
+++ b/.design-sync/previews/DateInput.tsx
@@ -0,0 +1,24 @@
+import { DateInput } from '@ohma/ui'
+
+export const Default = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <DateInput name="eventDate" label="Dato" defaultValue={new Date('2026-08-15T18:00:00Z')} />
+    </div>
+)
+
+export const WithTime = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <DateInput
+            name="eventStart"
+            label="Starttid"
+            includeTime
+            defaultValue={new Date('2026-08-15T18:00:00Z')}
+        />
+    </div>
+)
+
+export const Empty = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <DateInput name="deadline" label="Søknadsfrist" />
+    </div>
+)
diff --git a/.design-sync/previews/Dropdown.tsx b/.design-sync/previews/Dropdown.tsx
new file mode 100644
index 000000000..467e9f36f
--- /dev/null
+++ b/.design-sync/previews/Dropdown.tsx
@@ -0,0 +1,45 @@
+import { Dropdown } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+const committees = [
+    { value: 'vevkom', label: 'Vevkom', key: 'vevkom' },
+    { value: 'arrkom', label: 'Arrkom', key: 'arrkom' },
+    { value: 'kjellerkom', label: 'Kjellerkom', key: 'kjellerkom' },
+    { value: 'redaksjonen', label: 'Redaksjonen', key: 'redaksjonen' },
+]
+
+/** Dropdown owns its `open` state, so the panel is only reachable by clicking the real trigger. */
+function ClickTriggerOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLButtonElement>('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+export const Closed = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <Dropdown name="committee" label="Komité" options={committees} />
+    </div>
+)
+
+export const WithSelection = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <Dropdown name="committeeSelected" label="Komité" defaultValue="arrkom" options={committees} />
+    </div>
+)
+
+export const Opened = () => (
+    <ClickTriggerOnMount>
+        <div style={{ maxWidth: '22rem' }}>
+            <Dropdown name="committeeOpen" label="Komité" defaultValue="kjellerkom" options={committees} />
+        </div>
+    </ClickTriggerOnMount>
+)
+
+export const Disabled = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <Dropdown name="committeeDisabled" label="Komité" options={committees} disabled />
+    </div>
+)
diff --git a/.design-sync/previews/Dropzone.tsx b/.design-sync/previews/Dropzone.tsx
new file mode 100644
index 000000000..2351394cd
--- /dev/null
+++ b/.design-sync/previews/Dropzone.tsx
@@ -0,0 +1,63 @@
+import { Dropzone } from '@ohma/ui'
+import { useEffect, useState } from 'react'
+
+// Mirrors Dropzone's own FileWithStatus (the barrel exports components, not types).
+type FileWithStatus = { file: File, uploadStatus: 'pending' | 'uploading' | 'done' | 'error' }
+
+const SAMPLES: { name: string, fill: string, status: FileWithStatus['uploadStatus'] }[] = [
+    { name: 'immatrikulering-01.png', fill: '#037FFC', status: 'done' },
+    { name: 'immatrikulering-02.png', fill: '#5cd17a', status: 'uploading' },
+    { name: 'immatrikulering-03.png', fill: '#e6e64d', status: 'pending' },
+    { name: 'immatrikulering-04.png', fill: '#eb5757', status: 'error' },
+]
+
+// Dropzone renders each file as an <img src={URL.createObjectURL(file)}>, so the
+// previews need genuinely decodable image bytes — canvas gives us that, at a
+// realistic size, without checking a binary fixture into the repo.
+// Returns the state pair so the caller can hand both straight to Dropzone — copying
+// the generated files into a second useState would only cascade renders.
+function usePngFiles() {
+    const [files, setFiles] = useState<FileWithStatus[]>([])
+    useEffect(() => {
+        let cancelled = false
+        Promise.all(SAMPLES.map(({ name, fill, status }) => new Promise<FileWithStatus>(resolve => {
+            const canvas = document.createElement('canvas')
+            canvas.width = 320
+            canvas.height = 320
+            const context = canvas.getContext('2d')!
+            context.fillStyle = fill
+            context.fillRect(0, 0, 320, 320)
+            context.fillStyle = 'rgba(0,0,0,0.35)'
+            context.fillRect(0, 220, 320, 100)
+            canvas.toBlob(blob => {
+                resolve({ file: new File([blob!], name, { type: 'image/png' }), uploadStatus: status })
+            }, 'image/png')
+        }))).then(result => { if (!cancelled) setFiles(result) })
+        return () => { cancelled = true }
+    }, [])
+    return [files, setFiles] as const
+}
+
+export const Empty = () => {
+    const [files, setFiles] = useState<FileWithStatus[]>([])
+    return (
+        <Dropzone
+            name="images"
+            label="Slipp bilder her, eller klikk for å velge"
+            files={files}
+            setFiles={setFiles}
+        />
+    )
+}
+
+export const WithFiles = () => {
+    const [files, setFiles] = usePngFiles()
+    return (
+        <Dropzone
+            name="images"
+            label="Slipp bilder her, eller klikk for å velge"
+            files={files}
+            setFiles={setFiles}
+        />
+    )
+}
diff --git a/.design-sync/previews/EditOverlay.tsx b/.design-sync/previews/EditOverlay.tsx
new file mode 100644
index 000000000..65e48bd82
--- /dev/null
+++ b/.design-sync/previews/EditOverlay.tsx
@@ -0,0 +1,33 @@
+import { EditOverlay } from '@ohma/ui'
+
+/**
+ * EditOverlay is absolutely positioned and fills its nearest positioned
+ * ancestor, so it is only meaningful on top of the CMS element it edits.
+ */
+export const OverCmsParagraph = () => (
+    <div style={{ position: 'relative', maxWidth: '28rem' }}>
+        <div style={{
+            background: 'var(--surface-raised)',
+            padding: '1.25rem',
+            borderRadius: 'var(--rounding)',
+        }}>
+            <h3 style={{ margin: '0 0 0.5rem' }}>Hvad der hender</h3>
+            <p style={{ margin: 0, color: 'var(--text-muted)' }}>
+                Denne teksten kommer fra CMS-et og kan redigeres i redigeringsmodus.
+            </p>
+        </div>
+        <EditOverlay />
+    </div>
+)
+
+export const OverImage = () => (
+    <div style={{ position: 'relative', width: '14rem', height: '9rem' }}>
+        <div style={{
+            width: '100%',
+            height: '100%',
+            borderRadius: 'var(--rounding)',
+            background: 'linear-gradient(135deg, var(--accent-violet), var(--accent-blue))',
+        }} />
+        <EditOverlay />
+    </div>
+)
diff --git a/.design-sync/previews/FileInput.tsx b/.design-sync/previews/FileInput.tsx
new file mode 100644
index 000000000..c77f56e72
--- /dev/null
+++ b/.design-sync/previews/FileInput.tsx
@@ -0,0 +1,82 @@
+import { FileInput } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+/**
+ * The chosen file name is component state, reachable only through a real
+ * selection — so populate the actual <input type="file"> and fire the same
+ * change event the browser would, rather than faking the filled markup.
+ */
+function SelectFilesOnMount({ names, children }: { names: string[], children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelectorAll<HTMLInputElement>('input[type="file"]').forEach(input => {
+            const transfer = new DataTransfer()
+            for (const name of names) {
+                transfer.items.add(new File(['ohma'], name, { type: 'application/octet-stream' }))
+            }
+            input.files = transfer.files
+            input.dispatchEvent(new Event('change', { bubbles: true }))
+        })
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+/**
+ * Styled like the other form fields: the real input is visually hidden but
+ * focusable, and the surface doubles as the label that opens the picker. The
+ * chosen file name takes the place of the field value, so the floating label
+ * behaves exactly as it does in TextInput.
+ */
+export const Empty = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <FileInput name="avatar" label="Velg profilbilde" accept="image/*" />
+    </div>
+)
+
+export const WithFile = () => (
+    <SelectFilesOnMount names={['immatrikuleringsball.png']}>
+        <div style={{ maxWidth: '22rem' }}>
+            <FileInput name="avatar" label="Velg profilbilde" accept="image/*" />
+        </div>
+    </SelectFilesOnMount>
+)
+
+/** `color` styles the chosen file name, so each variant needs a selection. */
+export const Colors = () => (
+    <SelectFilesOnMount names={['ombul-2026-01.pdf']}>
+        <div style={{ display: 'grid', gap: '1rem', maxWidth: '22rem' }}>
+            <FileInput name="black" label="Black (default)" color="black" />
+            <FileInput name="primary" label="Primary" color="primary" />
+            <FileInput name="white" label="White" color="white" />
+            <FileInput name="red" label="Red" color="red" />
+        </div>
+    </SelectFilesOnMount>
+)
+
+export const MultipleFiles = () => (
+    <SelectFilesOnMount names={['bilde-01.png', 'bilde-02.png', 'bilde-03.png']}>
+        <div style={{ maxWidth: '22rem' }}>
+            <FileInput name="images" label="Bilder" accept="image/*" multiple />
+        </div>
+    </SelectFilesOnMount>
+)
+
+export const OnRaisedSurface = () => (
+    <SelectFilesOnMount names={['ombul-2026-01.pdf']}>
+        <div style={{
+            background: 'var(--surface-raised)',
+            padding: '1.5rem',
+            borderRadius: 'var(--rounding)',
+            maxWidth: '22rem',
+        }}>
+            <FileInput name="ombulFile" label="Ombul-fil" background="raised" accept="application/pdf" />
+        </div>
+    </SelectFilesOnMount>
+)
+
+export const Disabled = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <FileInput name="report" label="Last opp rapport" disabled />
+    </div>
+)
diff --git a/.design-sync/previews/HelpHeaderItemPopUp.tsx b/.design-sync/previews/HelpHeaderItemPopUp.tsx
new file mode 100644
index 000000000..e78a3235a
--- /dev/null
+++ b/.design-sync/previews/HelpHeaderItemPopUp.tsx
@@ -0,0 +1,35 @@
+import { HelpHeaderItemPopUp } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+/** The panel only opens from a real press on the trigger, so drive that on mount. */
+function OpenOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLButtonElement>('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+const panel = (
+    <div style={{ display: 'grid', gap: '1rem', minWidth: '17rem' }}>
+        <h2 style={{ margin: 0 }}>Hjelp</h2>
+        <p style={{ margin: 0, color: 'var(--text-muted)' }}>
+            Trykk på pluss-ikonet for å legge til et nytt arrangement. Endringer lagres først når du trykker Opprett.
+        </p>
+    </div>
+)
+
+export const Trigger = () => (
+    <HelpHeaderItemPopUp popUpKey="help-trigger">{panel}</HelpHeaderItemPopUp>
+)
+
+export const Opened = () => (
+    <OpenOnMount>
+        <HelpHeaderItemPopUp popUpKey="help-opened">{panel}</HelpHeaderItemPopUp>
+    </OpenOnMount>
+)
+
+export const CustomLabel = () => (
+    <HelpHeaderItemPopUp popUpKey="help-label" label="Hjelp">{panel}</HelpHeaderItemPopUp>
+)
diff --git a/.design-sync/previews/Menu.tsx b/.design-sync/previews/Menu.tsx
new file mode 100644
index 000000000..13b33b226
--- /dev/null
+++ b/.design-sync/previews/Menu.tsx
@@ -0,0 +1,39 @@
+import { Menu } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import {
+    faBeer, faBook, faCalendar, faCamera, faComment, faNewspaper, faSuitcase,
+} from '@fortawesome/free-solid-svg-icons'
+import type { ReactNode } from 'react'
+
+const items = [
+    { name: 'Komitéer', href: '/committees', show: 'all' as const, icon: faBeer },
+    { name: 'Hvad der hender', href: '/events', show: 'all' as const, icon: faCalendar },
+    { name: 'Ombul', href: '/ombul', show: 'all' as const, icon: faBook },
+    { name: 'Nyheter', href: '/news', show: 'all' as const, icon: faNewspaper },
+    { name: 'Bilder', href: '/image-collections', show: 'all' as const, icon: faCamera },
+    { name: 'Omegaquotes', href: '/omegaquotes', show: 'loggedIn' as const, icon: faComment },
+    { name: 'Karriere', href: '/career', show: 'loggedIn' as const, icon: faSuitcase },
+]
+
+/** Menu owns `isOpen`; the panel is only reachable by pressing the real trigger. */
+function OpenOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLButtonElement>('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+export const MobileTrigger = () => (
+    <Menu items={items} openBtnVariant="mobile" />
+)
+
+export const DesktopTrigger = () => (
+    <Menu items={items} openBtnVariant="desktop" />
+)
+
+export const Opened = () => (
+    <OpenOnMount>
+        <Menu items={items} openBtnVariant="desktop" />
+    </OpenOnMount>
+)
diff --git a/.design-sync/previews/NavBarItem.tsx b/.design-sync/previews/NavBarItem.tsx
new file mode 100644
index 000000000..859db058a
--- /dev/null
+++ b/.design-sync/previews/NavBarItem.tsx
@@ -0,0 +1,16 @@
+import { NavBarItem } from '@ohma/ui'
+
+export const Default = () => <NavBarItem href="/events" name="Hvad der hender" />
+
+export const Row = () => (
+    <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+        <NavBarItem href="/events" name="Hvad der hender" />
+        <NavBarItem href="/news" name="Nyheter" />
+        <NavBarItem href="/committees" name="Komitéer" />
+        <NavBarItem href="/omegaquotes" name="Omegaquotes" />
+    </div>
+)
+
+export const LongLabel = () => (
+    <NavBarItem href="/articles/om%20omega" name="Om Sanctus Omega Broderskab" />
+)
diff --git a/.design-sync/previews/NavBarTitle.tsx b/.design-sync/previews/NavBarTitle.tsx
new file mode 100644
index 000000000..bbb5b9d20
--- /dev/null
+++ b/.design-sync/previews/NavBarTitle.tsx
@@ -0,0 +1,39 @@
+import { NavBarTitle, PageWrapper } from '@ohma/ui'
+import type { ReactNode } from 'react'
+
+/**
+ * NavBarTitle reads the title out of PageTitleContext, which is written by
+ * PageWrapper (via PageTitleSetter). With no page mounted it deliberately
+ * renders a fixed-height placeholder instead, to avoid hydration layout shift —
+ * so both states have to be shown through a real page.
+ */
+const Bar = ({ children }: { children: ReactNode }) => (
+    <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        height: '64px',
+        padding: '0 1rem',
+        background: 'var(--surface-raised)',
+        borderRadius: 'var(--rounding)',
+    }}>
+        {children}
+    </div>
+)
+
+export const WithPageTitle = () => (
+    <>
+        <Bar><NavBarTitle /></Bar>
+        <div style={{ display: 'none' }}>
+            <PageWrapper title="Hvad der hender" hideTitle><span /></PageWrapper>
+        </div>
+    </>
+)
+
+export const PlaceholderWithNoTitle = () => (
+    <>
+        <p style={{ margin: '0 0 0.5rem', color: 'var(--text-muted)' }}>
+            No page title set — renders a reserved-space placeholder:
+        </p>
+        <Bar><NavBarTitle /></Bar>
+    </>
+)
diff --git a/.design-sync/previews/NavTooltip.tsx b/.design-sync/previews/NavTooltip.tsx
new file mode 100644
index 000000000..6a256e4fd
--- /dev/null
+++ b/.design-sync/previews/NavTooltip.tsx
@@ -0,0 +1,43 @@
+import { NavTooltip } from '@ohma/ui'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCalendar, faCog } from '@fortawesome/free-solid-svg-icons'
+
+const IconButton = ({ icon }: { icon: typeof faCog }) => (
+    <button style={{
+        display: 'grid',
+        placeItems: 'center',
+        width: '2.75rem',
+        height: '2.75rem',
+        borderRadius: 'var(--rounding)',
+        border: 'none',
+        background: 'var(--surface-raised)',
+        color: 'var(--text)',
+        fontSize: '1.1rem',
+        cursor: 'pointer',
+    }}>
+        <FontAwesomeIcon icon={icon} />
+    </button>
+)
+
+/**
+ * NavTooltip renders its children bare until after mount (a deliberate
+ * hydration-safety measure), then wraps them in a Radix tooltip. The tooltip
+ * itself only appears on hover/focus, which a static card cannot trigger — so
+ * these cards show the trigger in its resting state.
+ */
+export const AroundIcon = () => (
+    <NavTooltip content="Admin">
+        <IconButton icon={faCog} />
+    </NavTooltip>
+)
+
+export const SideBarColumn = () => (
+    <div style={{ display: 'grid', gap: '0.5rem', justifyItems: 'start' }}>
+        <NavTooltip content="Hvad der hender">
+            <IconButton icon={faCalendar} />
+        </NavTooltip>
+        <NavTooltip content="Admin">
+            <IconButton icon={faCog} />
+        </NavTooltip>
+    </div>
+)
diff --git a/.design-sync/previews/NumberInput.tsx b/.design-sync/previews/NumberInput.tsx
new file mode 100644
index 000000000..75e333413
--- /dev/null
+++ b/.design-sync/previews/NumberInput.tsx
@@ -0,0 +1,25 @@
+import { NumberInput } from '@ohma/ui'
+
+export const Default = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <NumberInput name="places" label="Antall plasser" defaultValue={120} />
+    </div>
+)
+
+export const WithRange = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <NumberInput name="guests" label="Antall gjester" min={1} max={4} step={1} defaultValue={2} />
+    </div>
+)
+
+export const OnRaisedSurface = () => (
+    <div style={{ background: 'var(--surface-raised)', padding: '1.5rem', borderRadius: 'var(--rounding)' }}>
+        <NumberInput name="price" label="Pris (kr)" background="raised" defaultValue={250} />
+    </div>
+)
+
+export const Disabled = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <NumberInput name="capacity" label="Kapasitet" defaultValue={80} disabled />
+    </div>
+)
diff --git a/.design-sync/previews/PageWrapper.tsx b/.design-sync/previews/PageWrapper.tsx
new file mode 100644
index 000000000..78b6478ee
--- /dev/null
+++ b/.design-sync/previews/PageWrapper.tsx
@@ -0,0 +1,37 @@
+import { PageWrapper, Button, SimpleTable, AddHeaderItemPopUp, TextInput } from '@ohma/ui'
+
+export const Default = () => (
+    <PageWrapper title="Arrangementer">
+        <p style={{ color: 'var(--text-muted)' }}>
+            Alt som skjer i Omega, samlet på ett sted.
+        </p>
+    </PageWrapper>
+)
+
+export const WithHeaderItem = () => (
+    <PageWrapper
+        title="Komitéer"
+        headerItem={
+            <AddHeaderItemPopUp popUpKey="pw-add-committee">
+                <div style={{ display: 'grid', gap: '1rem', minWidth: '16rem' }}>
+                    <h2 style={{ margin: 0 }}>Ny komité</h2>
+                    <TextInput name="committeeName" label="Navn" background="raised" />
+                    <Button color="primary">Opprett</Button>
+                </div>
+            </AddHeaderItemPopUp>
+        }
+    >
+        <SimpleTable
+            header={['Komité', 'Medlemmer']}
+            body={[['Vevkom', '9'], ['Arrkom', '14'], ['Kjellerkom', '11']]}
+        />
+    </PageWrapper>
+)
+
+export const HiddenTitle = () => (
+    <PageWrapper title="Forsiden" hideTitle>
+        <p style={{ margin: 0 }}>
+            Tittelen er skjult i innholdet, men settes fortsatt for navigasjonslinjen.
+        </p>
+    </PageWrapper>
+)
diff --git a/.design-sync/previews/PopUp.tsx b/.design-sync/previews/PopUp.tsx
new file mode 100644
index 000000000..c46b37b21
--- /dev/null
+++ b/.design-sync/previews/PopUp.tsx
@@ -0,0 +1,35 @@
+import { PopUp, Button, TextInput } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+/**
+ * PopUp keeps `isOpen` in its own state and teleports the panel up to
+ * PopUpProvider, so the open state can only be reached by pressing the trigger.
+ * Clicking it on mount drives the real component rather than faking the panel.
+ */
+function OpenOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+export const Trigger = () => (
+    <PopUp popUpKey="trigger-demo" showButtonContent={<Button color="primary">Ny søknad</Button>}>
+        <p>Innholdet i pop-upen.</p>
+    </PopUp>
+)
+
+export const Opened = () => (
+    <OpenOnMount>
+        <PopUp popUpKey="opened-demo" showButtonContent={<Button color="primary">Rediger profil</Button>}>
+            <div style={{ display: 'grid', gap: '1rem', minWidth: '18rem' }}>
+                <h2 style={{ margin: 0 }}>Rediger profil</h2>
+                <TextInput name="firstname" label="Fornavn" defaultValue="Ola" background="raised" />
+                <TextInput name="lastname" label="Etternavn" defaultValue="Nordmann" background="raised" />
+                <Button color="primary">Lagre</Button>
+            </div>
+        </PopUp>
+    </OpenOnMount>
+)
diff --git a/.design-sync/previews/ProgressBar.tsx b/.design-sync/previews/ProgressBar.tsx
new file mode 100644
index 000000000..85cbb0e19
--- /dev/null
+++ b/.design-sync/previews/ProgressBar.tsx
@@ -0,0 +1,38 @@
+import { ProgressBar } from '@ohma/ui'
+
+export const Steps = () => (
+    <div style={{ display: 'grid', gap: '1.25rem' }}>
+        <div>
+            <p style={{ margin: '0 0 0.4rem', color: 'var(--text-muted)' }}>Tom (0)</p>
+            <ProgressBar progress={0} />
+        </div>
+        <div>
+            <p style={{ margin: '0 0 0.4rem', color: 'var(--text-muted)' }}>En fjerdedel (0.25)</p>
+            <ProgressBar progress={0.25} />
+        </div>
+        <div>
+            <p style={{ margin: '0 0 0.4rem', color: 'var(--text-muted)' }}>Halvveis (0.5)</p>
+            <ProgressBar progress={0.5} />
+        </div>
+        <div>
+            <p style={{ margin: '0 0 0.4rem', color: 'var(--text-muted)' }}>Fullført (1)</p>
+            <ProgressBar progress={1} />
+        </div>
+    </div>
+)
+
+export const InUploadPanel = () => (
+    <div style={{
+        background: 'var(--surface-raised)',
+        padding: '1.25rem',
+        borderRadius: 'var(--rounding)',
+        display: 'grid',
+        gap: '0.75rem',
+    }}>
+        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+            <span>Laster opp bilder…</span>
+            <span style={{ color: 'var(--text-muted)' }}>62 %</span>
+        </div>
+        <ProgressBar progress={0.62} />
+    </div>
+)
diff --git a/.design-sync/previews/RadioLarge.tsx b/.design-sync/previews/RadioLarge.tsx
new file mode 100644
index 000000000..315507f64
--- /dev/null
+++ b/.design-sync/previews/RadioLarge.tsx
@@ -0,0 +1,38 @@
+import { RadioLarge } from '@ohma/ui'
+
+export const Default = () => (
+    <RadioLarge
+        name="attendance"
+        defaultValue="yes"
+        options={[
+            { value: 'yes', label: 'Kommer' },
+            { value: 'maybe', label: 'Kanskje' },
+            { value: 'no', label: 'Kommer ikke' },
+        ]}
+    />
+)
+
+export const NumericValues = () => (
+    <RadioLarge
+        name="guests"
+        defaultValue={1}
+        options={[
+            { value: 0, label: 'Ingen følge' },
+            { value: 1, label: 'Én med følge' },
+            { value: 2, label: 'To med følge' },
+        ]}
+    />
+)
+
+export const ManyOptions = () => (
+    <RadioLarge
+        name="committee"
+        defaultValue="vevkom"
+        options={[
+            { value: 'vevkom', label: 'Vevkom' },
+            { value: 'arrkom', label: 'Arrkom' },
+            { value: 'kjellerkom', label: 'Kjellerkom' },
+            { value: 'redaksjonen', label: 'Redaksjonen' },
+        ]}
+    />
+)
diff --git a/.design-sync/previews/ReportButton.tsx b/.design-sync/previews/ReportButton.tsx
new file mode 100644
index 000000000..87829793a
--- /dev/null
+++ b/.design-sync/previews/ReportButton.tsx
@@ -0,0 +1,22 @@
+import { ReportButton } from '@ohma/ui'
+
+/**
+ * ReportButton is a fixed-purpose link to /report — it takes no props. The
+ * shield icon inherits its size from the surrounding font-size.
+ */
+export const Default = () => <ReportButton />
+
+export const InNavBarRow = () => (
+    <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '1rem',
+        padding: '0.75rem 1rem',
+        background: 'var(--surface-raised)',
+        borderRadius: 'var(--rounding)',
+    }}>
+        <strong>Omega</strong>
+        <ReportButton />
+    </div>
+)
diff --git a/.design-sync/previews/SearchableDropdown.tsx b/.design-sync/previews/SearchableDropdown.tsx
new file mode 100644
index 000000000..66eab3aff
--- /dev/null
+++ b/.design-sync/previews/SearchableDropdown.tsx
@@ -0,0 +1,40 @@
+import { SearchableDropdown } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+const members = [
+    { value: 'olanord', label: 'Ola Nordmann', key: 'olanord' },
+    { value: 'ingrids', label: 'Ingrid Solberg', key: 'ingrids' },
+    { value: 'jonash', label: 'Jonas Halvorsen', key: 'jonash' },
+    { value: 'marenl', label: 'Maren Lie', key: 'marenl' },
+    { value: 'sofiek', label: 'Sofie Kristiansen', key: 'sofiek' },
+]
+
+/** The panel opens on input focus, so focusing the real field is what shows it. */
+function FocusOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLInputElement>('input[role="combobox"]')?.focus()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+export const Closed = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <SearchableDropdown name="member" label="Søk etter medlem" options={members} />
+    </div>
+)
+
+export const WithSelection = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <SearchableDropdown name="memberSelected" label="Medlem" defaultValue="ingrids" options={members} />
+    </div>
+)
+
+export const Opened = () => (
+    <FocusOnMount>
+        <div style={{ maxWidth: '22rem' }}>
+            <SearchableDropdown name="memberOpen" label="Søk etter medlem" defaultValue="jonash" options={members} />
+        </div>
+    </FocusOnMount>
+)
diff --git a/.design-sync/previews/SelectNumber.tsx b/.design-sync/previews/SelectNumber.tsx
new file mode 100644
index 000000000..32582a0a0
--- /dev/null
+++ b/.design-sync/previews/SelectNumber.tsx
@@ -0,0 +1,50 @@
+import { SelectNumber } from '@ohma/ui'
+
+export const Default = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <SelectNumber
+            name="admissionYear"
+            label="Opptaksår"
+            defaultValue={2022}
+            options={[
+                { value: 2020, key: '2020' },
+                { value: 2021, key: '2021' },
+                { value: 2022, key: '2022' },
+                { value: 2023, key: '2023' },
+            ]}
+        />
+    </div>
+)
+
+export const WithLabels = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <SelectNumber
+            name="guests"
+            label="Antall følge"
+            defaultValue={1}
+            color="primary"
+            options={[
+                { value: 0, label: 'Ingen', key: 'none' },
+                { value: 1, label: 'Én', key: 'one' },
+                { value: 2, label: 'To', key: 'two' },
+            ]}
+        />
+    </div>
+)
+
+export const OnRaisedSurface = () => (
+    <div style={{
+        background: 'var(--surface-raised)',
+        padding: '1.5rem',
+        borderRadius: 'var(--rounding)',
+        maxWidth: '22rem',
+    }}>
+        <SelectNumber
+            name="issueNumber"
+            label="Utgavenummer"
+            background="raised"
+            defaultValue={3}
+            options={[{ value: 1, key: '1' }, { value: 2, key: '2' }, { value: 3, key: '3' }]}
+        />
+    </div>
+)
diff --git a/.design-sync/previews/SelectString.tsx b/.design-sync/previews/SelectString.tsx
new file mode 100644
index 000000000..67f641fac
--- /dev/null
+++ b/.design-sync/previews/SelectString.tsx
@@ -0,0 +1,65 @@
+import { SelectString } from '@ohma/ui'
+
+const committees = [
+    { value: 'vevkom', label: 'Vevkom', key: 'vevkom' },
+    { value: 'arrkom', label: 'Arrkom', key: 'arrkom' },
+    { value: 'kjellerkom', label: 'Kjellerkom', key: 'kjellerkom' },
+    { value: 'redaksjonen', label: 'Redaksjonen', key: 'redaksjonen' },
+]
+
+/**
+ * A native `<select>` styled as a form field. Because a select always has a
+ * selection, the label sits permanently in the floated position rather than
+ * toggling the way TextInput's does.
+ */
+export const Default = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <SelectString name="committee" label="Komité" defaultValue="arrkom" options={committees} />
+    </div>
+)
+
+export const Colors = () => (
+    <div style={{ display: 'grid', gap: '1rem', maxWidth: '22rem' }}>
+        <SelectString name="black" label="Black (default)" color="black" options={committees} />
+        <SelectString name="primary" label="Primary" color="primary" options={committees} />
+        <SelectString name="white" label="White" color="white" options={committees} />
+        <SelectString name="red" label="Red" color="red" options={committees} />
+    </div>
+)
+
+export const LabelFromValue = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <SelectString
+            name="status"
+            label="Status"
+            options={[
+                { value: 'Aktiv', key: 'aktiv' },
+                { value: 'Permisjon', key: 'permisjon' },
+                { value: 'Utflyttet', key: 'utflyttet' },
+            ]}
+        />
+    </div>
+)
+
+export const OnRaisedSurface = () => (
+    <div style={{
+        background: 'var(--surface-raised)',
+        padding: '1.5rem',
+        borderRadius: 'var(--rounding)',
+        maxWidth: '22rem',
+    }}>
+        <SelectString name="committeeRaised" label="Komité" background="raised" options={committees} />
+    </div>
+)
+
+export const Disabled = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <SelectString
+            name="locked"
+            label="Opptaksår"
+            defaultValue="2021"
+            disabled
+            options={[{ value: '2021', key: '2021' }, { value: '2022', key: '2022' }]}
+        />
+    </div>
+)
diff --git a/.design-sync/previews/SettingsHeaderItemPopUp.tsx b/.design-sync/previews/SettingsHeaderItemPopUp.tsx
new file mode 100644
index 000000000..bc69618b6
--- /dev/null
+++ b/.design-sync/previews/SettingsHeaderItemPopUp.tsx
@@ -0,0 +1,34 @@
+import { SettingsHeaderItemPopUp, Button, TextInput } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+/** The panel only opens from a real press on the trigger, so drive that on mount. */
+function OpenOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLButtonElement>('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+const panel = (
+    <div style={{ display: 'grid', gap: '1rem', minWidth: '17rem' }}>
+        <h2 style={{ margin: 0 }}>Innstillinger for siden</h2>
+        <TextInput name="pageTitle" label="Sidetittel" background="raised" defaultValue="Arrangementer" />
+        <Button color="primary">Lagre</Button>
+    </div>
+)
+
+export const Trigger = () => (
+    <SettingsHeaderItemPopUp popUpKey="settings-trigger">{panel}</SettingsHeaderItemPopUp>
+)
+
+export const Opened = () => (
+    <OpenOnMount>
+        <SettingsHeaderItemPopUp popUpKey="settings-opened">{panel}</SettingsHeaderItemPopUp>
+    </OpenOnMount>
+)
+
+export const CustomLabel = () => (
+    <SettingsHeaderItemPopUp popUpKey="settings-label" label="Innstillinger">{panel}</SettingsHeaderItemPopUp>
+)
diff --git a/.design-sync/previews/SideBarNavItem.tsx b/.design-sync/previews/SideBarNavItem.tsx
new file mode 100644
index 000000000..dc74b22c2
--- /dev/null
+++ b/.design-sync/previews/SideBarNavItem.tsx
@@ -0,0 +1,43 @@
+import { SideBarNavItem } from '@ohma/ui'
+import { faCalendar, faCamera, faComment, faNewspaper } from '@fortawesome/free-solid-svg-icons'
+import type { ReactNode } from 'react'
+
+const items = [
+    { name: 'Hvad der hender', href: '/events', show: 'all' as const, icon: faCalendar },
+    { name: 'Nyheter', href: '/news', show: 'all' as const, icon: faNewspaper },
+    { name: 'Bilder', href: '/image-collections', show: 'all' as const, icon: faCamera },
+    { name: 'Omegaquotes', href: '/omegaquotes', show: 'loggedIn' as const, icon: faComment },
+]
+
+const Rail = ({ children }: { children: ReactNode }) => (
+    <nav style={{
+        width: '4.5rem',
+        display: 'grid',
+        gap: '0.25rem',
+        padding: '0.75rem',
+        background: 'var(--surface-raised)',
+        borderRadius: 'var(--rounding)',
+    }}>
+        {children}
+    </nav>
+)
+
+/**
+ * Each item carries its label, but the label is collapsed to `max-width: 0`
+ * unless an ancestor matches `.DesktopSideBar[data-expanded='true']` — that
+ * shell is the app's own DesktopSideBar server component and is not part of this
+ * design system, so these cards show the icon-only rail. The `expanded` prop
+ * itself controls only whether the item is wrapped in a NavTooltip (expanded =
+ * no tooltip), which a static card cannot show either.
+ */
+export const IconRail = () => (
+    <Rail>
+        {items.map(item => <SideBarNavItem key={item.href} item={item} expanded={false} />)}
+    </Rail>
+)
+
+export const SingleItem = () => (
+    <Rail>
+        <SideBarNavItem item={items[0]} expanded={false} />
+    </Rail>
+)
diff --git a/.design-sync/previews/SimpleTable.tsx b/.design-sync/previews/SimpleTable.tsx
new file mode 100644
index 000000000..8718671c7
--- /dev/null
+++ b/.design-sync/previews/SimpleTable.tsx
@@ -0,0 +1,35 @@
+import { SimpleTable } from '@ohma/ui'
+
+export const Default = () => (
+    <SimpleTable
+        header={['Navn', 'Komité', 'Opptaksår']}
+        body={[
+            ['Ola Nordmann', 'Vevkom', '2021'],
+            ['Ingrid Solberg', 'Arrkom', '2022'],
+            ['Jonas Halvorsen', 'Redaksjonen', '2020'],
+            ['Maren Lie', 'Kjellerkom', '2023'],
+        ]}
+    />
+)
+
+// NOTE: the `links` prop is deliberately not shown. SimpleTable wraps each
+// <tr> in a <Link>, i.e. an <a> containing a <tr>, which is invalid HTML — the
+// browser hoists the anchor out of the table and the rows visibly break apart.
+// That is a bug in the component, not in this preview; see NOTES.md.
+
+const Name = ({ children }: { children: string }) => <strong>{children}</strong>
+
+const Status = ({ children, color }: { children: string, color: string }) => (
+    <span style={{ color: `var(--accent-${color})` }}>{children}</span>
+)
+
+export const RichCells = () => (
+    <SimpleTable
+        header={['Verv', 'Person', 'Status']}
+        body={[
+            ['Leder', <Name key="a">Ingrid Solberg</Name>, <Status key="b" color="green">Aktiv</Status>],
+            ['Nestleder', <Name key="c">Jonas Halvorsen</Name>, <Status key="d" color="green">Aktiv</Status>],
+            ['Økonomiansvarlig', <Name key="e">Maren Lie</Name>, <Status key="f" color="yellow">Permisjon</Status>],
+        ]}
+    />
+)
diff --git a/.design-sync/previews/SlideInOnView.tsx b/.design-sync/previews/SlideInOnView.tsx
new file mode 100644
index 000000000..ced597f5a
--- /dev/null
+++ b/.design-sync/previews/SlideInOnView.tsx
@@ -0,0 +1,45 @@
+import { SlideInOnView } from '@ohma/ui'
+import type { ReactNode } from 'react'
+
+const Panel = ({ children }: { children: ReactNode }) => (
+    <div style={{
+        background: 'var(--surface-raised)',
+        padding: '1.25rem',
+        borderRadius: 'var(--rounding)',
+    }}>
+        {children}
+    </div>
+)
+
+/**
+ * Reveals its children when they scroll into view, via an IntersectionObserver
+ * that adds the `visible` class. `direction` ('bottom' | 'left' | 'right' |
+ * 'top') only changes the offset the content travels *from*, so once settled
+ * every direction looks the same — the cards below therefore show the settled
+ * state rather than one card per direction.
+ */
+export const Default = () => (
+    <SlideInOnView>
+        <Panel>Glir inn når seksjonen kommer i synsfeltet.</Panel>
+    </SlideInOnView>
+)
+
+export const WithRichContent = () => (
+    <SlideInOnView direction="left">
+        <Panel>
+            <h3 style={{ margin: '0 0 0.5rem' }}>Om Omega</h3>
+            <p style={{ margin: 0, color: 'var(--text-muted)' }}>
+                Sanctus Omega Broderskab ble stiftet i Trondheim og samler studenter
+                gjennom komitéer, arrangementer og tradisjoner.
+            </p>
+        </Panel>
+    </SlideInOnView>
+)
+
+export const SeveralSections = () => (
+    <div style={{ display: 'grid', gap: '0.75rem' }}>
+        <SlideInOnView direction="left"><Panel>Første seksjon</Panel></SlideInOnView>
+        <SlideInOnView direction="right"><Panel>Andre seksjon</Panel></SlideInOnView>
+        <SlideInOnView direction="bottom"><Panel>Tredje seksjon</Panel></SlideInOnView>
+    </div>
+)
diff --git a/.design-sync/previews/Slider.tsx b/.design-sync/previews/Slider.tsx
new file mode 100644
index 000000000..1f0a1bbb8
--- /dev/null
+++ b/.design-sync/previews/Slider.tsx
@@ -0,0 +1,30 @@
+import { Slider } from '@ohma/ui'
+
+export const Default = () => (
+    <Slider name="public" label="Vis profilen offentlig" />
+)
+
+export const On = () => (
+    <Slider name="notifications" label="Varsle meg om nye arrangementer" defaultChecked />
+)
+
+/**
+ * `secondary` and `black` are deliberately omitted: they map the track to
+ * --surface-base, which is invisible against the app's own surface.
+ * See NOTES.md.
+ */
+export const Colors = () => (
+    <div style={{ display: 'grid', gap: '1rem' }}>
+        <Slider name="primary" label="Primary" color="primary" defaultChecked />
+        <Slider name="red" label="Red" color="red" defaultChecked />
+        <Slider name="white" label="White" color="white" defaultChecked />
+    </div>
+)
+
+export const SettingsList = () => (
+    <div style={{ display: 'grid', gap: '0.5rem', maxWidth: '24rem' }}>
+        <Slider name="mailAliases" label="Motta e-post til alias" defaultChecked />
+        <Slider name="showBirthday" label="Vis fødselsdag" />
+        <Slider name="omegaquotes" label="Tillat sitater om meg" defaultChecked />
+    </div>
+)
diff --git a/.design-sync/previews/SocialIcons.tsx b/.design-sync/previews/SocialIcons.tsx
new file mode 100644
index 000000000..2d819ec61
--- /dev/null
+++ b/.design-sync/previews/SocialIcons.tsx
@@ -0,0 +1,34 @@
+import { SocialIcons } from '@ohma/ui'
+
+/**
+ * SocialIcons renders three fixed brand links (X, Facebook, Instagram) as a
+ * fragment, so the caller owns the layout — it takes no props.
+ */
+export const Default = () => (
+    <div style={{ display: 'flex', gap: '1.25rem', fontSize: '1.5rem' }}>
+        <SocialIcons />
+    </div>
+)
+
+export const InFooterRow = () => (
+    <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: '2rem',
+        padding: '1.25rem',
+        background: 'var(--surface-raised)',
+        borderRadius: 'var(--rounding)',
+    }}>
+        <span style={{ color: 'var(--text-muted)' }}>Sanctus Omega Broderskab</span>
+        <div style={{ display: 'flex', gap: '1.25rem', fontSize: '1.35rem' }}>
+            <SocialIcons />
+        </div>
+    </div>
+)
+
+export const Stacked = () => (
+    <div style={{ display: 'grid', gap: '1rem', fontSize: '1.25rem', justifyItems: 'start' }}>
+        <SocialIcons />
+    </div>
+)
diff --git a/.design-sync/previews/SubPageNavBar.tsx b/.design-sync/previews/SubPageNavBar.tsx
new file mode 100644
index 000000000..8cd9bd824
--- /dev/null
+++ b/.design-sync/previews/SubPageNavBar.tsx
@@ -0,0 +1,24 @@
+import { SubPageNavBar, SubPageNavBarItem } from '@ohma/ui'
+import { faIdCard, faLock, faPalette, faUser } from '@fortawesome/free-solid-svg-icons'
+
+/**
+ * SubPageNavBar is the container; the items are SubPageNavBarItem. Each item
+ * marks itself selected by comparing the last path segment of its href against
+ * the current pathname.
+ */
+export const UserSettings = () => (
+    <SubPageNavBar>
+        <SubPageNavBarItem href="/users/olanord/profile" icon={faUser}>Profil</SubPageNavBarItem>
+        <SubPageNavBarItem href="/users/olanord/theme" icon={faPalette}>Utseende</SubPageNavBarItem>
+        <SubPageNavBarItem href="/users/olanord/security" icon={faLock}>Sikkerhet</SubPageNavBarItem>
+        <SubPageNavBarItem href="/users/olanord/membership" icon={faIdCard}>Medlemskap</SubPageNavBarItem>
+    </SubPageNavBar>
+)
+
+export const WithoutIcons = () => (
+    <SubPageNavBar>
+        <SubPageNavBarItem href="/admin/groups">Grupper</SubPageNavBarItem>
+        <SubPageNavBarItem href="/admin/permissions">Tilganger</SubPageNavBarItem>
+        <SubPageNavBarItem href="/admin/mail">E-post</SubPageNavBarItem>
+    </SubPageNavBar>
+)
diff --git a/.design-sync/previews/SubPageNavBarItem.tsx b/.design-sync/previews/SubPageNavBarItem.tsx
new file mode 100644
index 000000000..de4575b84
--- /dev/null
+++ b/.design-sync/previews/SubPageNavBarItem.tsx
@@ -0,0 +1,25 @@
+import { SubPageNavBar, SubPageNavBarItem } from '@ohma/ui'
+import { faLock, faPalette, faUser } from '@fortawesome/free-solid-svg-icons'
+
+/**
+ * A SubPageNavBarItem only lays out correctly inside SubPageNavBar, so every
+ * cell composes it through its real parent.
+ */
+export const WithIcon = () => (
+    <SubPageNavBar>
+        <SubPageNavBarItem href="/users/olanord/profile" icon={faUser}>Profil</SubPageNavBarItem>
+    </SubPageNavBar>
+)
+
+export const WithoutIcon = () => (
+    <SubPageNavBar>
+        <SubPageNavBarItem href="/admin/groups">Grupper</SubPageNavBarItem>
+    </SubPageNavBar>
+)
+
+export const SeveralItems = () => (
+    <SubPageNavBar>
+        <SubPageNavBarItem href="/users/olanord/theme" icon={faPalette}>Utseende</SubPageNavBarItem>
+        <SubPageNavBarItem href="/users/olanord/security" icon={faLock}>Sikkerhet</SubPageNavBarItem>
+    </SubPageNavBar>
+)
diff --git a/.design-sync/previews/TagHeasderItemPopUp.tsx b/.design-sync/previews/TagHeasderItemPopUp.tsx
new file mode 100644
index 000000000..7820f3e49
--- /dev/null
+++ b/.design-sync/previews/TagHeasderItemPopUp.tsx
@@ -0,0 +1,34 @@
+import { TagHeasderItemPopUp, Button, TextInput } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+/** The panel only opens from a real press on the trigger, so drive that on mount. */
+function OpenOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLButtonElement>('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+const panel = (
+    <div style={{ display: 'grid', gap: '1rem', minWidth: '17rem' }}>
+        <h2 style={{ margin: 0 }}>Merkelapper</h2>
+        <TextInput name="tagName" label="Ny merkelapp" background="raised" />
+        <Button color="green">Legg til merkelapp</Button>
+    </div>
+)
+
+export const Trigger = () => (
+    <TagHeasderItemPopUp popUpKey="tag-trigger">{panel}</TagHeasderItemPopUp>
+)
+
+export const Opened = () => (
+    <OpenOnMount>
+        <TagHeasderItemPopUp popUpKey="tag-opened">{panel}</TagHeasderItemPopUp>
+    </OpenOnMount>
+)
+
+export const CustomLabel = () => (
+    <TagHeasderItemPopUp popUpKey="tag-label" label="Merkelapper">{panel}</TagHeasderItemPopUp>
+)
diff --git a/.design-sync/previews/TextInput.tsx b/.design-sync/previews/TextInput.tsx
new file mode 100644
index 000000000..7021d7a10
--- /dev/null
+++ b/.design-sync/previews/TextInput.tsx
@@ -0,0 +1,44 @@
+import { TextInput } from '@ohma/ui'
+
+export const Default = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <TextInput name="fullName" label="Fullt navn" defaultValue="Ola Nordmann" />
+    </div>
+)
+
+/**
+ * `color` sets the *typed text* colour, not the field chrome — so each variant
+ * needs a value to show anything. (`secondary` maps to --surface-base, which is
+ * near-invisible on the dark field; see NOTES.md.)
+ */
+export const Colors = () => (
+    <div style={{ display: 'grid', gap: '1.5rem', maxWidth: '22rem' }}>
+        <TextInput name="black" label="Black (default)" color="black" defaultValue="Standard tekst" />
+        <TextInput name="primary" label="Primary" color="primary" defaultValue="Uthevet tekst" />
+        <TextInput name="white" label="White" color="white" defaultValue="Hvit tekst" />
+        <TextInput name="red" label="Red" color="red" defaultValue="Feil i feltet" />
+    </div>
+)
+
+export const Password = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <TextInput name="password" label="Passord" type="password" defaultValue="hemmelig" />
+    </div>
+)
+
+export const OnRaisedSurface = () => (
+    <div style={{
+        background: 'var(--surface-raised)',
+        padding: '1.5rem',
+        borderRadius: 'var(--rounding)',
+        maxWidth: '22rem',
+    }}>
+        <TextInput name="email" label="E-post" background="raised" defaultValue="omega@omega.ntnu.no" />
+    </div>
+)
+
+export const Disabled = () => (
+    <div style={{ maxWidth: '22rem' }}>
+        <TextInput name="username" label="Brukernavn" defaultValue="olanord" disabled />
+    </div>
+)
diff --git a/.design-sync/previews/Textarea.tsx b/.design-sync/previews/Textarea.tsx
new file mode 100644
index 000000000..dc165f6ab
--- /dev/null
+++ b/.design-sync/previews/Textarea.tsx
@@ -0,0 +1,27 @@
+import { Textarea } from '@ohma/ui'
+
+export const Default = () => (
+    <Textarea
+        name="motivation"
+        label="Motivasjon"
+        rows={5}
+        defaultValue={'Jeg ønsker å bli med i Vevkom fordi jeg vil lære mer om webutvikling '
+            + 'og bidra til å videreutvikle Omegas nettsider.'}
+    />
+)
+
+export const Empty = () => (
+    <Textarea name="comment" label="Kommentar" rows={4} placeholder="Skriv en kommentar…" />
+)
+
+export const OnRaisedSurface = () => (
+    <div style={{ background: 'var(--surface-raised)', padding: '1.5rem', borderRadius: 'var(--rounding)' }}>
+        <Textarea
+            name="quote"
+            label="Sitat"
+            background="raised"
+            rows={3}
+            defaultValue="Det var en gang en broder som glemte hvor kjelleren var."
+        />
+    </div>
+)
diff --git a/.design-sync/previews/UsersHeaderItemPopUp.tsx b/.design-sync/previews/UsersHeaderItemPopUp.tsx
new file mode 100644
index 000000000..927956b13
--- /dev/null
+++ b/.design-sync/previews/UsersHeaderItemPopUp.tsx
@@ -0,0 +1,34 @@
+import { UsersHeaderItemPopUp, Button, TextInput } from '@ohma/ui'
+import { useEffect, useRef } from 'react'
+import type { ReactNode } from 'react'
+
+/** The panel only opens from a real press on the trigger, so drive that on mount. */
+function OpenOnMount({ children }: { children: ReactNode }) {
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        ref.current?.querySelector<HTMLButtonElement>('button')?.click()
+    }, [])
+    return <div ref={ref}>{children}</div>
+}
+
+const panel = (
+    <div style={{ display: 'grid', gap: '1rem', minWidth: '17rem' }}>
+        <h2 style={{ margin: 0 }}>Legg til medlemmer</h2>
+        <TextInput name="memberSearch" label="Søk etter medlem" background="raised" />
+        <Button color="primary">Legg til</Button>
+    </div>
+)
+
+export const Trigger = () => (
+    <UsersHeaderItemPopUp popUpKey="users-trigger">{panel}</UsersHeaderItemPopUp>
+)
+
+export const Opened = () => (
+    <OpenOnMount>
+        <UsersHeaderItemPopUp popUpKey="users-opened">{panel}</UsersHeaderItemPopUp>
+    </OpenOnMount>
+)
+
+export const CustomLabel = () => (
+    <UsersHeaderItemPopUp popUpKey="users-label" label="Medlemmer">{panel}</UsersHeaderItemPopUp>
+)
diff --git a/.design-sync/scope.json b/.design-sync/scope.json
new file mode 100644
index 000000000..982bd6a14
--- /dev/null
+++ b/.design-sync/scope.json
@@ -0,0 +1,51 @@
+{
+  "_comment": "Scoped component set for the claude.ai/design import. group = DS pane grouping; src = repo-relative implementation; export = which binding to re-export.",
+  "components": {
+    "Button":                { "group": "actions", "src": "src/app/_components/UI/Button.tsx", "export": "default" },
+
+    "TextInput":             { "group": "inputs", "src": "src/app/_components/UI/TextInput.tsx", "export": "default" },
+    "Textarea":              { "group": "inputs", "src": "src/app/_components/UI/Textarea.tsx", "export": "default" },
+    "NumberInput":           { "group": "inputs", "src": "src/app/_components/UI/NumberInput.tsx", "export": "default" },
+    "DateInput":             { "group": "inputs", "src": "src/app/_components/UI/DateInput.tsx", "export": "default" },
+    "ColorInput":            { "group": "inputs", "src": "src/app/_components/UI/ColorInput.tsx", "export": "default" },
+    "FileInput":             { "group": "inputs", "src": "src/app/_components/UI/FileInput.tsx", "export": "default" },
+    "Checkbox":              { "group": "inputs", "src": "src/app/_components/UI/Checkbox.tsx", "export": "default" },
+    "CheckboxFieldPresent":  { "group": "inputs", "src": "src/app/_components/UI/CheckboxFieldPresent.tsx", "export": "default" },
+    "RadioLarge":            { "group": "inputs", "src": "src/app/_components/UI/RadioLarge.tsx", "export": "default" },
+    "Slider":                { "group": "inputs", "src": "src/app/_components/UI/Slider.tsx", "export": "default" },
+    "Dropzone":              { "group": "inputs", "src": "src/app/_components/UI/Dropzone.tsx", "export": "default" },
+    "SelectString":          { "group": "inputs", "src": "src/app/_components/UI/Select.tsx", "export": "SelectString" },
+    "SelectNumber":          { "group": "inputs", "src": "src/app/_components/UI/Select.tsx", "export": "SelectNumber" },
+    "SearchableDropdown":    { "group": "inputs", "src": "src/app/_components/UI/SearchableDropdown.tsx", "export": "default" },
+
+    "Dropdown":              { "group": "overlays", "src": "src/app/_components/UI/Dropdown.tsx", "export": "default" },
+    "PopUp":                 { "group": "overlays", "src": "src/app/_components/PopUp/PopUp.tsx", "export": "default" },
+    "AddHeaderItemPopUp":      { "group": "overlays", "src": "src/app/_components/HeaderItems/HeaderItemPopUp.tsx", "export": "AddHeaderItemPopUp" },
+    "HelpHeaderItemPopUp":     { "group": "overlays", "src": "src/app/_components/HeaderItems/HeaderItemPopUp.tsx", "export": "HelpHeaderItemPopUp" },
+    "SettingsHeaderItemPopUp": { "group": "overlays", "src": "src/app/_components/HeaderItems/HeaderItemPopUp.tsx", "export": "SettingsHeaderItemPopUp" },
+    "UsersHeaderItemPopUp":    { "group": "overlays", "src": "src/app/_components/HeaderItems/HeaderItemPopUp.tsx", "export": "UsersHeaderItemPopUp" },
+    "TagHeasderItemPopUp":     { "group": "overlays", "src": "src/app/_components/HeaderItems/HeaderItemPopUp.tsx", "export": "TagHeasderItemPopUp" },
+    "ArchiveHeaderItemPopUp":  { "group": "overlays", "src": "src/app/_components/HeaderItems/HeaderItemPopUp.tsx", "export": "ArchiveHeaderItemPopUp" },
+    "EditOverlay":           { "group": "overlays", "src": "src/app/_components/Cms/EditOverlay.tsx", "export": "default" },
+
+    "ProgressBar":           { "group": "feedback", "src": "src/app/_components/ProgressBar/ProgressBar.tsx", "export": "default" },
+    "SlideInOnView":         { "group": "feedback", "src": "src/app/_components/SlideInOnView/SlideInOnView.tsx", "export": "default" },
+
+    "SimpleTable":           { "group": "data-display", "src": "src/app/_components/Table/SimpleTable.tsx", "export": "default" },
+    "DateDisplay":           { "group": "data-display", "src": "src/app/_components/Date/Date.tsx", "export": "default" },
+    "CountDown":             { "group": "data-display", "src": "src/app/_components/countDown/CountDown.tsx", "export": "default" },
+
+    "PageWrapper":           { "group": "layout", "src": "src/app/_components/PageWrapper/PageWrapper.tsx", "export": "default" },
+    "SocialIcons":           { "group": "layout", "src": "src/app/_components/SocialIcons/SocialIcons.tsx", "export": "default" },
+
+    "NavBarItem":            { "group": "navigation", "src": "src/app/_components/NavBar/Item.tsx", "export": "default" },
+    "Menu":                  { "group": "navigation", "src": "src/app/_components/NavBar/Menu.tsx", "export": "default" },
+    "SideBarNavItem":        { "group": "navigation", "src": "src/app/_components/NavBar/SideBarNavItem.tsx", "export": "default" },
+    "AdminNav":              { "group": "navigation", "src": "src/app/_components/NavBar/AdminNav.tsx", "export": "default" },
+    "NavBarTitle":           { "group": "navigation", "src": "src/app/_components/NavBar/NavBarTitle.tsx", "export": "default" },
+    "NavTooltip":            { "group": "navigation", "src": "src/app/_components/NavBar/NavTooltip.tsx", "export": "default" },
+    "SubPageNavBar":         { "group": "navigation", "src": "src/app/_components/NavBar/SubPageNavBar/SubPageNavBar.tsx", "export": "SubPageNavBar" },
+    "SubPageNavBarItem":     { "group": "navigation", "src": "src/app/_components/NavBar/SubPageNavBar/SubPageNavBar.tsx", "export": "SubPageNavBarItem" },
+    "ReportButton":          { "group": "navigation", "src": "src/app/_components/NavBar/ReportButton.tsx", "export": "default" }
+  }
+}
diff --git a/.design-sync/stage-pkg.mjs b/.design-sync/stage-pkg.mjs
new file mode 100644
index 000000000..5108cd038
--- /dev/null
+++ b/.design-sync/stage-pkg.mjs
@@ -0,0 +1,552 @@
+#!/usr/bin/env node
+// Builds a self-contained, bundlable component package out of this Next.js
+// app's presentational components, for the claude.ai/design import.
+//
+// Why this exists: projectNext has no library build, and every component
+// styles itself through SCSS modules (`*.module.scss`), which esbuild cannot
+// load. This script performs a *mechanical* transform of the real source:
+//
+//   1. transitively collects each scoped component's repo-internal imports
+//   2. compiles every `*.module.scss` to `*.module.css` with sass (resolving
+//      the `@/styles` alias), so esbuild's native CSS-modules support keeps
+//      the class-name map intact
+//   3. rewrites import specifiers to the staged layout, swapping `next/link`
+//      and `next/navigation` for tiny DOM shims
+//   4. emits an `index.ts` barrel + `package.json` so the converter sees an
+//      ordinary package
+//
+// Component bodies are copied verbatim apart from import specifiers. Nothing
+// here reimplements a component.
+
+import { execFileSync } from 'node:child_process'
+import { existsSync, mkdirSync, readFileSync, readdirSync, rmSync, writeFileSync } from 'node:fs'
+import { dirname, join, relative, resolve } from 'node:path'
+import { fileURLToPath, pathToFileURL } from 'node:url'
+import * as sass from 'sass'
+
+const REPO = resolve(fileURLToPath(new URL('.', import.meta.url)), '..')
+const OUT = join(REPO, '.design-sync/.cache/pkg')
+const SCOPE = JSON.parse(readFileSync(join(REPO, '.design-sync/scope.json'), 'utf8')).components
+
+const TS_EXT = ['.tsx', '.ts', '.jsx', '.js']
+const STYLE_RX = /\.(module\.)?s?css$/
+
+// The app's four themes live here and are applied at runtime by setting the
+// custom properties on documentElement (see ThemeEnabler).
+const THEME_SRC = 'src/app/users/[username]/(user-admin)/theme/theme.ts'
+
+// tsconfig `paths`, longest prefix first so `@/components/*` beats `@/*`.
+const ALIASES = (() => {
+    const raw = JSON.parse(
+        readFileSync(join(REPO, 'tsconfig.json'), 'utf8').replace(/^\s*\/\/.*$/gm, ''),
+    ).compilerOptions.paths
+    return Object.entries(raw)
+        .map(([pattern, targets]) => ({
+            prefix: pattern.replace(/\*$/, ''),
+            wild: pattern.endsWith('*'),
+            targets: targets.map(t => join(REPO, t.replace(/\*$/, '').replace(/^\.\//, ''))),
+        }))
+        .sort((left, right) => right.prefix.length - left.prefix.length)
+})()
+
+// Bare specifiers we redirect to a local shim. The design agent builds plain
+// React, so Next's router-coupled primitives have no runtime here.
+const SHIMS = {
+    'next/link': '_shims/Link',
+    'next/navigation': '_shims/navigation',
+    'next/image': '_shims/Image',
+}
+
+const problems = []
+
+function resolveSpecifier(spec, importerAbs) {
+    if (SHIMS[spec]) return { kind: 'shim', shim: SHIMS[spec] }
+
+    let base = null
+    if (spec.startsWith('.')) {
+        base = resolve(dirname(importerAbs), spec)
+    } else {
+        for (const alias of ALIASES) {
+            if (alias.wild ? !spec.startsWith(alias.prefix) : spec !== alias.prefix) continue
+            const tail = alias.wild ? spec.slice(alias.prefix.length) : ''
+            for (const target of alias.targets) {
+                const candidate = join(target, tail)
+                const hit = probe(candidate)
+                if (hit) return { kind: 'file', file: hit }
+            }
+            base = join(alias.targets[0], tail)
+            break
+        }
+    }
+    if (base === null) return { kind: 'external' }
+
+    const hit = probe(base)
+    if (hit) return { kind: 'file', file: hit }
+    problems.push(`unresolved: ${spec}  (from ${relative(REPO, importerAbs)})`)
+    return { kind: 'external' }
+}
+
+function probe(base) {
+    if (STYLE_RX.test(base) && existsSync(base)) return base
+    for (const ext of ['', ...TS_EXT]) {
+        if (ext && existsSync(base + ext)) return base + ext
+        if (!ext && existsSync(base) && /\.\w+$/.test(base)) return base
+    }
+    for (const ext of TS_EXT) {
+        const indexed = join(base, `index${ext}`)
+        if (existsSync(indexed)) return indexed
+    }
+    return null
+}
+
+// `import x from 's'`, `export * from 's'`, `import('s')` — one pass, capturing
+// the quoted specifier so we can rewrite it in place.
+const SPEC_RX = /(\bfrom\s*|\bimport\s*\(?\s*|\brequire\s*\(\s*)(['"])([^'"]+)\2/g
+
+function specifiersIn(text) {
+    const found = []
+    for (const match of text.matchAll(SPEC_RX)) found.push(match[3])
+    return found
+}
+
+// ── 1. Transitive closure over repo-internal files ──────────────────────────
+
+const componentFiles = new Map() // abs tsx path -> group
+for (const [name, meta] of Object.entries(SCOPE)) {
+    const abs = join(REPO, meta.src)
+    if (!existsSync(abs)) throw new Error(`scope.json: ${name} -> ${meta.src} does not exist`)
+    const prior = componentFiles.get(abs)
+    if (prior && prior !== meta.group) {
+        throw new Error(`${meta.src} is claimed by two groups (${prior}, ${meta.group})`)
+    }
+    componentFiles.set(abs, meta.group)
+}
+
+const staged = new Map() // abs source path -> staged path relative to OUT
+const queue = [...componentFiles.keys()]
+const seen = new Set(queue)
+
+function stagedPathFor(abs) {
+    const group = componentFiles.get(abs)
+    const base = abs.split('/').pop()
+    if (group) return `src/${group}/${base}`
+    // Everything else mirrors its repo path under _internal/ so two files
+    // with the same basename can never collide.
+    return `src/_internal/${relative(join(REPO, 'src'), abs)}`
+}
+
+while (queue.length) {
+    const abs = queue.shift()
+    staged.set(abs, stagedPathFor(abs))
+    if (STYLE_RX.test(abs)) continue
+    for (const spec of specifiersIn(readFileSync(abs, 'utf8'))) {
+        const resolved = resolveSpecifier(spec, abs)
+        if (resolved.kind !== 'file') continue
+        if (seen.has(resolved.file)) continue
+        seen.add(resolved.file)
+        queue.push(resolved.file)
+    }
+}
+
+// ── 2. Emit ─────────────────────────────────────────────────────────────────
+
+rmSync(OUT, { recursive: true, force: true })
+
+function write(relPath, content) {
+    const dest = join(OUT, relPath)
+    mkdirSync(dirname(dest), { recursive: true })
+    writeFileSync(dest, content)
+}
+
+// The `@/…` alias resolver for sass, mirroring tsconfig paths.
+const scssImporter = {
+    findFileUrl(url) {
+        if (!url.startsWith('@/')) return null
+        for (const alias of ALIASES) {
+            if (alias.wild ? !url.startsWith(alias.prefix) : url !== alias.prefix) continue
+            const tail = alias.wild ? url.slice(alias.prefix.length) : ''
+            return pathToFileURL(join(alias.targets[0], tail))
+        }
+        return null
+    },
+}
+
+function compileScss(abs) {
+    return sass.compile(abs, {
+        importers: [scssImporter],
+        loadPaths: [join(REPO, 'src/styles'), join(REPO, 'src')],
+        silenceDeprecations: ['import', 'global-builtin', 'color-functions'],
+    }).css
+}
+
+let styleCount = 0
+for (const [abs, relPath] of staged) {
+    if (STYLE_RX.test(abs)) {
+        // SCSS modules become plain `.module.css`; esbuild scopes them natively.
+        // Each one `@use`s the shared `ohma` module, so sass re-emits the whole
+        // @font-face block into every single file (with the app's runtime
+        // `/fonts/…` urls, which resolve to nothing in a bundle). The canonical
+        // copy lives in styles/globals.css — drop the duplicates.
+        const css = compileScss(abs).replace(/@font-face\s*\{[^}]*\}\s*/g, '')
+        write(relPath.replace(/\.module\.scss$/, '.module.css').replace(/\.scss$/, '.css'), css)
+        styleCount++
+        continue
+    }
+
+    const text = readFileSync(abs, 'utf8')
+    const here = join(OUT, relPath)
+    const rewritten = text.replace(SPEC_RX, (whole, lead, quote, spec) => {
+        const resolved = resolveSpecifier(spec, abs)
+        let target
+        if (resolved.kind === 'shim') {
+            target = join(OUT, 'src', resolved.shim)
+        } else if (resolved.kind === 'file') {
+            const dest = staged.get(resolved.file)
+            if (!dest) return whole
+            target = join(OUT, dest)
+                .replace(/\.module\.scss$/, '.module.css')
+                .replace(/\.(tsx|ts|jsx|js)$/, '')
+        } else {
+            return whole
+        }
+        let rel = relative(dirname(here), target)
+        if (!rel.startsWith('.')) rel = `./${rel}`
+        return `${lead}${quote}${rel}${quote}`
+    })
+    // 'use client' is a Next directive; harmless but noisy in a plain bundle.
+    write(relPath, rewritten.replace(/^\s*'use client'\r?\n/, ''))
+}
+
+// ── 3. Shims ────────────────────────────────────────────────────────────────
+
+write('src/_shims/Link.tsx', `import React from 'react'
+import type { AnchorHTMLAttributes, ReactNode } from 'react'
+
+type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> & {
+    href: string | { pathname?: string },
+    children?: ReactNode,
+    prefetch?: boolean,
+    replace?: boolean,
+    scroll?: boolean,
+}
+
+/** Stands in for next/link outside a Next app: renders the same anchor. */
+export default function Link({ href, children, prefetch, replace, scroll, ...props }: LinkProps) {
+    const resolved = typeof href === 'string' ? href : (href?.pathname ?? '#')
+    return <a href={resolved} {...props}>{children}</a>
+}
+`)
+
+write('src/_shims/navigation.ts', `// Stands in for next/navigation outside a Next app.
+export function usePathname(): string {
+    return typeof window === 'undefined' ? '/' : window.location.pathname
+}
+export function useSearchParams(): URLSearchParams {
+    return new URLSearchParams(typeof window === 'undefined' ? '' : window.location.search)
+}
+export function useRouter() {
+    return {
+        push: (href: string) => { if (typeof window !== 'undefined') window.location.assign(href) },
+        replace: (href: string) => { if (typeof window !== 'undefined') window.location.replace(href) },
+        back: () => { if (typeof window !== 'undefined') window.history.back() },
+        forward: () => { if (typeof window !== 'undefined') window.history.forward() },
+        refresh: () => {},
+        prefetch: () => {},
+    }
+}
+`)
+
+write('src/_shims/Image.tsx', `import React from 'react'
+import type { ImgHTMLAttributes } from 'react'
+
+type ImageProps = ImgHTMLAttributes<HTMLImageElement> & {
+    src: string,
+    alt: string,
+    width?: number,
+    height?: number,
+    fill?: boolean,
+    priority?: boolean,
+}
+
+/** Stands in for next/image outside a Next app: a plain img. */
+export default function Image({ fill, priority, style, ...props }: ImageProps) {
+    return <img {...props} style={fill ? { ...style, width: '100%', height: '100%', objectFit: 'cover' } : style} />
+}
+`)
+
+// ── 3b. Combined provider ───────────────────────────────────────────────────
+// Several components read app-level React context (PopUp teleporting, page
+// title, edit mode). `cfg.provider` needs ONE bundle export to wrap previews
+// in, so nest the app's real providers here rather than reimplementing them.
+
+const providerImports = [
+    ['PopUpProvider', 'src/contexts/PopUp.tsx', 'default'],
+    ['PageTitleProvider', 'src/contexts/PageTitle.tsx', 'PageTitleProvider'],
+    ['EditModeProvider', 'src/contexts/EditMode.tsx', 'default'],
+]
+const providerBody = providerImports
+    .map(([local, src, binding]) => {
+        const abs = join(REPO, src)
+        if (!staged.has(abs)) {
+            // Not pulled in by any scoped component — stage it just for this.
+            staged.set(abs, stagedPathFor(abs))
+            const text = readFileSync(abs, 'utf8')
+            const here = join(OUT, staged.get(abs))
+            const rewritten = text.replace(SPEC_RX, (whole, lead, quote, spec) => {
+                const resolved = resolveSpecifier(spec, abs)
+                if (resolved.kind !== 'file') return whole
+                const dest = staged.get(resolved.file)
+                if (!dest) return whole
+                let rel = relative(dirname(here), join(OUT, dest).replace(/\.(tsx|ts|jsx|js)$/, ''))
+                if (!rel.startsWith('.')) rel = `./${rel}`
+                return `${lead}${quote}${rel}${quote}`
+            })
+            write(staged.get(abs), rewritten.replace(/^\s*'use client'\r?\n/, ''))
+        }
+        const modPath = relative(join(OUT, 'src/_shims'), join(OUT, staged.get(abs))).replace(/\.(tsx|ts)$/, '')
+        const spec = modPath.startsWith('.') ? modPath : `./${modPath}`
+        return binding === 'default'
+            ? `import ${local} from '${spec}'`
+            : `import { ${local} } from '${spec}'`
+    })
+    .join('\n')
+
+write('src/_shims/Providers.tsx', `import React from 'react'
+${providerBody}
+
+/**
+ * Wraps children in every app-level context the design system's components
+ * read. Any tree using PopUp, PageWrapper, AdminNav or EditModeSwitch must be
+ * inside this.
+ */
+export default function OhmaProviders({ children }: { children: React.ReactNode }) {
+    return (
+        <EditModeProvider defaultValue={false}>
+            <PageTitleProvider>
+                <PopUpProvider>
+                    {children}
+                </PopUpProvider>
+            </PageTitleProvider>
+        </EditModeProvider>
+    )
+}
+`)
+
+// The preview card harness hard-codes `body{background:#fff}`, but this design
+// system is dark-only: `globals.css` paints `html` with --surface-base and
+// --text is near-white. On a white card, text and icons render invisible. This
+// re-establishes the surface the app actually renders components on. Used only
+// as the outer half of `cfg.provider` — it never wraps a real design, which
+// gets the dark surface from styles.css directly.
+write('src/_shims/Surface.tsx', `import React from 'react'
+
+/** Paints the app's own page surface, so previews aren't light-on-light. */
+export default function OhmaPreviewSurface({ children }: { children: React.ReactNode }) {
+    return (
+        <div style={{
+            background: 'var(--surface-base)',
+            color: 'var(--text)',
+            padding: '1.25rem',
+            borderRadius: '0.5rem',
+        }}>
+            {children}
+        </div>
+    )
+}
+`)
+
+// ── 4. Barrel + package.json ────────────────────────────────────────────────
+
+// Stage theme.ts so the runtime theme API ships with the bundle: a design can
+// call applyTheme(ThemeName.Light) exactly as the app's ThemeEnabler does.
+const themeAbs = join(REPO, THEME_SRC)
+if (!staged.has(themeAbs)) {
+    staged.set(themeAbs, stagedPathFor(themeAbs))
+    write(staged.get(themeAbs), readFileSync(themeAbs, 'utf8'))
+}
+const themeModule = './' + staged.get(themeAbs).replace(/\.ts$/, '')
+
+const lines = [
+    "export { default as OhmaProviders } from './src/_shims/Providers'",
+    "export { default as OhmaPreviewSurface } from './src/_shims/Surface'",
+    `export { themes, applyTheme, subscribeToTheme, getActiveTheme, ThemeName } from '${themeModule}'`,
+]
+const bySrc = new Map()
+for (const [name, meta] of Object.entries(SCOPE)) {
+    const abs = join(REPO, meta.src)
+    const modPath = './' + staged.get(abs).replace(/\.(tsx|ts)$/, '')
+    if (!bySrc.has(modPath)) bySrc.set(modPath, [])
+    bySrc.get(modPath).push({ name, binding: meta.export })
+}
+for (const [modPath, exports] of [...bySrc].sort()) {
+    const parts = exports.map(({ name, binding }) =>
+        binding === 'default' ? `default as ${name}` : binding === name ? name : `${binding} as ${name}`)
+    lines.push(`export { ${parts.join(', ')} } from '${modPath}'`)
+}
+write('index.ts', `// Generated by .design-sync/stage-pkg.mjs — do not edit.\n${lines.join('\n')}\n`)
+
+// CSS-module imports have no types of their own; the converter's ts-morph pass
+// and `tsc --emitDeclarationOnly` both need them to resolve to something.
+write('css-modules.d.ts', `declare module '*.module.css' {
+    const classes: { readonly [key: string]: string }
+    export default classes
+}
+`)
+
+write('tsconfig.json', JSON.stringify({
+    compilerOptions: {
+        target: 'es2020',
+        lib: ['dom', 'dom.iterable', 'esnext'],
+        jsx: 'react-jsx',
+        module: 'esnext',
+        moduleResolution: 'bundler',
+        strict: true,
+        skipLibCheck: true,
+        esModuleInterop: true,
+        resolveJsonModule: true,
+        declaration: true,
+        emitDeclarationOnly: true,
+        declarationDir: './types',
+        baseUrl: '.',
+    },
+    include: ['index.ts', 'src/**/*.ts', 'src/**/*.tsx', 'css-modules.d.ts'],
+}, null, 2) + '\n')
+
+write('package.json', JSON.stringify({
+    name: '@ohma/ui',
+    version: '0.1.0',
+    private: true,
+    main: './index.ts',
+    module: './index.ts',
+    types: './types/index.d.ts',
+}, null, 2) + '\n')
+
+// ── 5. Fonts ────────────────────────────────────────────────────────────────
+// The app serves its fonts from /public/fonts at runtime, so the compiled CSS
+// carries absolute `url('/fonts/…')` references that resolve to nothing inside
+// a bundle. Copy the real files in and rewrite the urls to be relative.
+
+let fontFiles = 0
+for (const abs of walkDir(join(REPO, 'public/fonts'))) {
+    if (!/\.(woff2?|ttf|otf)$/.test(abs)) continue
+    const rel = relative(join(REPO, 'public'), abs)
+    mkdirSync(dirname(join(OUT, rel)), { recursive: true })
+    writeFileSync(join(OUT, rel), readFileSync(abs))
+    fontFiles++
+}
+
+// Inter is `$fonts-primary` in _fonts.scss (so: the body font for the whole
+// site) but the app never @font-face's it and ships no file — production has
+// been falling back to system sans. Vendor it so the design system renders
+// what the stylesheet actually asks for.
+const INTER_CACHE = join(REPO, '.design-sync/.cache/fonts/Inter')
+const INTER_WEIGHTS = [300, 400, 500, 700]
+let interFaces = ''
+if (existsSync(INTER_CACHE)) {
+    for (const weight of INTER_WEIGHTS) {
+        const file = join(INTER_CACHE, `Inter-${weight}.woff2`)
+        if (!existsSync(file)) continue
+        mkdirSync(join(OUT, 'fonts/Inter'), { recursive: true })
+        writeFileSync(join(OUT, `fonts/Inter/Inter-${weight}.woff2`), readFileSync(file))
+        fontFiles++
+        interFaces += `@font-face {
+  font-family: 'Inter';
+  src: url('../fonts/Inter/Inter-${weight}.woff2') format('woff2');
+  font-weight: ${weight};
+  font-style: normal;
+  font-display: swap;
+}
+`
+    }
+} else {
+    console.error('  ! Inter not vendored yet — run .design-sync/vendor-inter.mjs')
+}
+
+// ── 5b. Themes ──────────────────────────────────────────────────────────────
+// The app ships four themes and swaps the whole palette at runtime by setting
+// the custom properties on documentElement (see theme.ts / ThemeEnabler).
+// `globals.scss` only carries the Standard values, so emit the other three as
+// `[data-theme]` blocks — that gives designs (and the DS pane) a way to render
+// any theme, and keeps the source of truth in theme.ts rather than duplicating
+// hex values here.
+
+function readThemes() {
+    // theme.ts uses an `enum`, which Node's default type-stripping can't handle,
+    // so read it in a child process with full type transformation. Keeps the
+    // main invocation flag-free.
+    const reader = `import(${JSON.stringify(join(REPO, THEME_SRC))})
+        .then(m => process.stdout.write(JSON.stringify(m.themes)))`
+    const out = execFileSync(process.execPath, ['--experimental-transform-types', '-e', reader], {
+        encoding: 'utf8',
+        stdio: ['ignore', 'pipe', 'ignore'],
+    })
+    return JSON.parse(out)
+}
+
+const themes = readThemes()
+const themeNames = Object.keys(themes)
+const themeCss = themeNames
+    .map(name => {
+        const body = Object.entries(themes[name])
+            .map(([token, value]) => `  --${token}: ${value};`)
+            .join('\n')
+        // Standard is what globals.scss already declares on `html`; emit it as a
+        // named block too so switching back to it is symmetric.
+        return `:root[data-theme="${name}"] {\n${body}\n}`
+    })
+    .join('\n\n')
+
+const globalsCss = compileScss(join(REPO, 'src/styles/globals.scss'))
+    .replace(/url\((['"]?)\/fonts\//g, 'url($1../fonts/')
+write('styles/globals.css', `${interFaces}${globalsCss}\n\n${themeCss}\n`)
+
+function walkDir(root) {
+    if (!existsSync(root)) return []
+    const out = []
+    const stack = [root]
+    while (stack.length) {
+        const dir = stack.pop()
+        for (const entry of readdirSync(dir, { withFileTypes: true })) {
+            const abs = join(dir, entry.name)
+            if (entry.isDirectory()) stack.push(abs)
+            else out.push(abs)
+        }
+    }
+    return out
+}
+
+// ── 6. Declarations ─────────────────────────────────────────────────────────
+// The converter derives its component list from the .d.ts tree, and step 2
+// wipes OUT (types/ included). Emitting them here rather than as a separate
+// command means a forgotten `tsc` can't silently produce a partial bundle.
+
+const tsc = join(REPO, 'node_modules/.bin/tsc')
+if (!existsSync(tsc)) throw new Error(`typescript not installed: ${tsc}`)
+try {
+    execFileSync(tsc, ['-p', join(OUT, 'tsconfig.json')], { stdio: ['ignore', 'pipe', 'pipe'] })
+} catch (error) {
+    const detail = `${error.stdout ?? ''}${error.stderr ?? ''}`.trim()
+    console.error(`  ! tsc reported errors while emitting declarations:\n${detail}`)
+    process.exitCode = 1
+}
+const dtsCount = walkDir(join(OUT, 'types')).filter(path => path.endsWith('.d.ts')).length
+console.error(`  declarations: ${dtsCount} .d.ts emitted`)
+
+// ── 7. Report ───────────────────────────────────────────────────────────────
+
+const componentCount = Object.keys(SCOPE).length
+const internalCount = [...staged.values()].filter(p => p.startsWith('src/_internal/') && !STYLE_RX.test(p)).length
+console.error(`  staged: ${componentCount} components, ${internalCount} internal modules, ${styleCount} stylesheets -> ${relative(REPO, OUT)}`)
+const externals = new Set()
+for (const abs of staged.keys()) {
+    if (STYLE_RX.test(abs)) continue
+    for (const spec of specifiersIn(readFileSync(abs, 'utf8'))) {
+        if (resolveSpecifier(spec, abs).kind === 'external') externals.add(spec)
+    }
+}
+console.error(`  externals: ${[...externals].sort().join(', ')}`)
+if (problems.length) {
+    console.error('\n  PROBLEMS:')
+    for (const problem of [...new Set(problems)].sort()) console.error(`    ${problem}`)
+    process.exitCode = 1
+}
diff --git a/.design-sync/vendor-inter.mjs b/.design-sync/vendor-inter.mjs
new file mode 100644
index 000000000..c95740608
--- /dev/null
+++ b/.design-sync/vendor-inter.mjs
@@ -0,0 +1,50 @@
+#!/usr/bin/env node
+// Downloads Inter woff2 files into .design-sync/.cache/fonts/Inter/.
+//
+// `src/styles/_fonts.scss` sets `$primary: 'Inter', sans-serif` — Inter is the
+// body font for the entire site — but the app never ships an @font-face for it,
+// so production silently falls back to system sans. The design system should
+// render what the stylesheet asks for, so we vendor Inter here.
+//
+// Inter is SIL Open Font License 1.1 (redistribution permitted).
+// Run once; the cache is gitignored, so a fresh clone re-downloads.
+
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import { join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const OUT = join(fileURLToPath(new URL('.', import.meta.url)), '.cache/fonts/Inter')
+const WEIGHTS = [300, 400, 500, 700]
+const CSS_URL = `https://fonts.googleapis.com/css2?family=Inter:wght@${WEIGHTS.join(';')}&display=swap`
+
+// Google serves woff2 only to UAs that advertise support.
+const UA = 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0 Safari/537.36'
+
+mkdirSync(OUT, { recursive: true })
+
+const css = await (await fetch(CSS_URL, { headers: { 'User-Agent': UA } })).text()
+
+// Each @font-face block carries one weight and one src url. Pair them up, and
+// keep only the `latin` subset blocks (the last of each weight in Google's
+// output) so we ship four files rather than forty.
+const blocks = [...css.matchAll(/@font-face\s*\{([^}]*)\}/g)].map(match => match[1])
+const picked = new Map()
+for (const block of blocks) {
+    const weight = block.match(/font-weight:\s*(\d+)/)?.[1]
+    const url = block.match(/url\((https:\/\/[^)]+\.woff2)\)/)?.[1]
+    if (!weight || !url || !WEIGHTS.includes(Number(weight))) continue
+    picked.set(weight, url) // later (latin) block wins
+}
+
+if (picked.size === 0) throw new Error('no woff2 urls found in the Google Fonts CSS response')
+
+for (const [weight, url] of picked) {
+    const bytes = new Uint8Array(await (await fetch(url, { headers: { 'User-Agent': UA } })).arrayBuffer())
+    const dest = join(OUT, `Inter-${weight}.woff2`)
+    writeFileSync(dest, bytes)
+    console.error(`  Inter-${weight}.woff2  ${(bytes.length / 1024).toFixed(1)} KB`)
+}
+
+if (!existsSync(join(OUT, 'Inter-400.woff2'))) {
+    throw new Error('Inter-400 (regular) was not downloaded — check the Google Fonts response')
+}
diff --git a/.gitignore b/.gitignore
index 6449fe867..341eeee0e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -53,4 +53,13 @@ src/prisma/migrations
 
 .rest
 
-.vscode
\ No newline at end of file
+.vscode
+.idea
+
+.claude
+# design-sync (claude.ai/design import) — generated/staged, not committed
+/.ds-sync/
+/ds-bundle/
+/.design-sync/.cache/
+/.design-sync/learnings/
+/.design-sync/node_modules
diff --git a/Dockerfile b/Dockerfile
index 1f33954a8..91ae66bec 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -30,6 +30,8 @@ RUN mkdir -p usr/src/app/store/images
 COPY public public
 COPY next-env.d.t[s] next.config.ts tsconfig.json ./
 
+COPY standard_store standard_store
+
 ############################################################
 FROM base AS prod
 
@@ -52,5 +54,6 @@ CMD ["npm", "run", "test"]
 FROM base AS dev
 
 ENV NODE_ENV=development
+# src is expected to be binded in dev
 
 CMD ["npm", "run", "dev-seed"]
diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
index c345bbd2e..27f080c3f 100644
--- a/docker-compose.dev.yml
+++ b/docker-compose.dev.yml
@@ -12,6 +12,7 @@ services:
             - ${PROJECT_ROOT:-.}/logs:/usr/src/app/logs
             - devstore:/usr/src/app/store
             - dotnext:/usr/src/app/.next
+            - dobbelOmegaManifest:/usr/src/app/dobbelOmegaManifest
 
     db:
         extends:
diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index b049f4671..626b9960d 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -8,6 +8,7 @@ services:
         volumes:
             - store:/usr/src/app/store
             - logs:/usr/src/app/logs
+            - dobbelOmegaManifest:/usr/src/app/dobbelOmegaManifest
         deploy:
             replicas: 2
         restart: always
diff --git a/docker-compose.test.yml b/docker-compose.test.yml
index 9499208c6..d1928137d 100644
--- a/docker-compose.test.yml
+++ b/docker-compose.test.yml
@@ -9,6 +9,7 @@ services:
         environment:
             DOMAIN: omega.ntnu.no
             MAIL_DOMAIN: sanctus.omega.ntnu.no
+            CI: ${CI:-}
         volumes:
             - ${PROJECT_ROOT:-.}/src:/usr/src/app/src
             - ${PROJECT_ROOT:-.}/tests:/usr/src/app/tests
diff --git a/eslint.config.ts b/eslint.config.ts
index 59f117624..c523ce50b 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -541,6 +541,27 @@ const eslintConfig = defineConfig([
             ]
         }
     },
+    {
+        // Visible <input> elements should go through a component in @/components/UI
+        // (TextInput, Checkbox, NumberInput, ...) rather than being written raw, so they get
+        // consistent styling/behavior (e.g. Checkbox's hidden "field present" input keeps
+        // unchecked boxes submitting correctly). type="hidden" inputs are exempt since they're
+        // just plain form data carriers with no component equivalent. The UI folder itself is
+        // exempt since that's where these primitives are implemented.
+        files: ['src/app/**/*.tsx'],
+        ignores: ['src/app/_components/UI/**'],
+        rules: {
+            'no-restricted-syntax': [
+                'warn',
+                {
+                    selector: "JSXOpeningElement[name.name='input']"
+                        + ":not(:has(JSXAttribute[name.name='type'] Literal[value='hidden']))",
+                    message: 'Use an input component from @/components/UI (TextInput, Checkbox, NumberInput, '
+                        + 'etc.) instead of a raw <input>. type="hidden" inputs are exempt.'
+                }
+            ]
+        }
+    },
     globalIgnores([
         '.next/**',
         'out/**',
@@ -549,6 +570,8 @@ const eslintConfig = defineConfig([
         'pncli/**',
         'docs/**',
         'generated/**',
+        '.design-sync/.cache/**',
+        'ds-bundle/**',
     ]),
 ])
 
diff --git a/jest.config.ts b/jest.config.ts
index 057246fcf..88c595817 100644
--- a/jest.config.ts
+++ b/jest.config.ts
@@ -12,6 +12,10 @@ const config: Config = {
     collectCoverage: true,
     collectCoverageFrom: ['src/**/*.{ts,tsx}'],
     coverageReporters: ['text-summary'],
+    // Each suite's beforeAll re-seeds all standard images through sharp/avif, which is CPU-heavy.
+    // Running many suites' seeds concurrently starves CI's limited cores and blows past the 30s
+    // beforeAll timeout in tests/setup.ts, even though a single seed() run only takes a few seconds.
+    maxWorkers: process.env.CI ? 2 : undefined,
     moduleNameMapper: {
         // This is needed becaue jest doesn't handle the this code is inside node_modules
         '^@/prisma-dobbel-omega/(.*)$': '<rootDir>/node_modules/.prisma-dobbel-omega/$1',
diff --git a/package-lock.json b/package-lock.json
index 540ffe305..cad338104 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,13 @@
         "@fortawesome/react-fontawesome": "^3.3.0",
         "@prisma/adapter-pg": "^7.3.0",
         "@prisma/client": "^7.3.0",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@react-email/components": "^1.0.12",
         "@react-email/render": "^2.0.6",
         "bcrypt": "^6.0.0",
         "canvas-confetti": "^1.9.4",
         "eslint-plugin-react-hooks": "^7.0.1",
+        "framer-motion": "^12.43.0",
         "html5-qrcode": "^2.3.8",
         "jsonwebtoken": "^9.0.3",
         "jsqr": "^1.4.0",
@@ -102,7 +104,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -399,9 +400,9 @@
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.29.0",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.0.tgz",
-      "integrity": "sha512-IyDgFV5GeDUVX4YdF/3CPULtVGSXXMLh1xVIgdCgxApktqnQV0r7/8Nqthg+8YLGaAtdyIlo2qIdZrbCv4+7ww==",
+      "version": "7.29.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.29.3.tgz",
+      "integrity": "sha512-b3ctpQwp+PROvU/cttc4OYl4MzfJUWy6FZg+PMXfzmt/+39iHVF0sDfqay8TQM3JA2EUOyKcFZt75jWriQijsA==",
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.29.0"
@@ -806,7 +807,6 @@
       "integrity": "sha512-CYDD3SOtsHtyXeEORYRx2qBtpDJFjRTGXUtmNEMGyzYOKj1TE3tycdlho7kA1Ufx9OYWZzg52QFBGALTirzDSw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@keyv/serialize": "^1.1.1"
       }
@@ -904,7 +904,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       },
@@ -953,7 +952,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.19.0"
       }
@@ -1044,8 +1042,7 @@
       "resolved": "https://registry.npmjs.org/@electric-sql/pglite/-/pglite-0.4.1.tgz",
       "integrity": "sha512-mZ9NzzUSYPOCnxHH1oAHPRzoMFJHY472raDKwXl/+6oPbpdJ7g8LsCN4FSaIIfkiCKHhb3iF/Zqo3NYxaIhU7Q==",
       "devOptional": true,
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/@electric-sql/pglite-socket": {
       "version": "0.1.1",
@@ -1071,21 +1068,21 @@
       }
     },
     "node_modules/@emnapi/core": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.9.2.tgz",
-      "integrity": "sha512-UC+ZhH3XtczQYfOlu3lNEkdW/p4dsJ1r/bP7H8+rhao3TTTMO1ATq/4DdIi23XuGoFY+Cz0JmCbdVl0hz9jZcA==",
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.11.3.tgz",
+      "integrity": "sha512-zLpS5asjEb7lq8jYLq37N6XKaE41DIexlY1rF/z4/tIl3wo13Sqm28fRyfIsKZD+NZ8mM5RoKkpW/rBcuoSZSg==",
       "dev": true,
       "license": "MIT",
       "optional": true,
       "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
+        "@emnapi/wasi-threads": "1.2.3",
         "tslib": "^2.4.0"
       }
     },
     "node_modules/@emnapi/runtime": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
-      "integrity": "sha512-mehfKSMWjjNol8659Z8KxEMrdSJDDot5SXMq00dM8BN4o+CLNXQ0xH2V7EchNHV4RmbZLmmPdEaXZc5H2FXmDg==",
+      "version": "1.11.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.3.tgz",
+      "integrity": "sha512-Xz4Tpyki7XyrpbUK1jR1AhdAdaXyhhY4lZ3neLodmhpuWfy2PAQN5B46sAiU4liOXGLkHypn/qU+jvfWSCYYLA==",
       "license": "MIT",
       "optional": true,
       "dependencies": {
@@ -1093,9 +1090,9 @@
       }
     },
     "node_modules/@emnapi/wasi-threads": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
-      "integrity": "sha512-uTII7OYF+/Mes/MrcIOYp5yOtSMLBWSIoLPpcgwipoiKbli6k322tcoFsxoIIxPDqW01SQGAgko4EzZi2BNv2w==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.3.tgz",
+      "integrity": "sha512-ELEBe8PsLvvJ6QMr0zLt8ffvOHW/dc1m3CEzNMg7aJUv3bMaoDtw2TXyDAwkYBuroxxuHEwhRTLJSe5sya547g==",
       "dev": true,
       "license": "MIT",
       "optional": true,
@@ -1667,6 +1664,44 @@
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.5",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
+      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
+      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.5",
+        "@floating-ui/utils": "^0.2.11"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.8.tgz",
+      "integrity": "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.6"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.11",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
+      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
+      "license": "MIT"
+    },
     "node_modules/@fortawesome/fontawesome-common-types": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-7.2.0.tgz",
@@ -1681,7 +1716,6 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-7.2.0.tgz",
       "integrity": "sha512-6639htZMjEkwskf3J+e6/iar+4cTNM9qhoWuRfj9F3eJD6r7iCzV1SWnQr2Mdv0QT0suuqU8BoJCZUyCtP9R4Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@fortawesome/fontawesome-common-types": "7.2.0"
       },
@@ -2869,9 +2903,9 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
@@ -3954,14 +3988,35 @@
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.3.tgz",
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
-      "devOptional": true,
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
       "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==",
-      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
@@ -3973,11 +4028,150 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-context": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.2.tgz",
+      "integrity": "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.11.tgz",
+      "integrity": "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-escape-keydown": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-id": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.1.1.tgz",
+      "integrity": "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-portal": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-presence": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.5.tgz",
+      "integrity": "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-primitive": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
       "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-slot": "1.2.3"
@@ -4001,7 +4195,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
       "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
@@ -4042,11 +4235,59 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-callback-ref": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
+      "integrity": "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-controllable-state": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
       "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-use-effect-event": "0.0.2",
@@ -4066,7 +4307,6 @@
       "version": "0.0.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
       "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-use-layout-effect": "1.1.1"
@@ -4081,11 +4321,28 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-escape-keydown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.1.1.tgz",
+      "integrity": "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-callback-ref": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
       "integrity": "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ==",
-      "devOptional": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "*",
@@ -4097,12 +4354,76 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@react-email/body": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@react-email/body/-/body-0.3.0.tgz",
       "integrity": "sha512-uGo0BOOzjbMUo3lu+BIDWayvn5o6Xyfmnlla5VGf05n8gHMvO1ll7U4FtzWe3hxMLwt53pmc4iE0M+B5slG+Ug==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4115,7 +4436,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/button/-/button-0.2.1.tgz",
       "integrity": "sha512-qXyj7RZLE7POy9BMKSoqQ00tOXThjOZSUnI2Yu9i29IHngPlmrNayIWBoVKtElES7OWwypUcpiajwi1mUWx6/A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4128,7 +4448,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/code-block/-/code-block-0.2.1.tgz",
       "integrity": "sha512-M3B7JpVH4ytgn83/ujRR1k1DQHvTeABiDM61OvAbjLRPhC/5KLHU5KkzIbbuGIrjWwxAbL1kSQzU8MhLEtSxyw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "prismjs": "^1.30.0"
       },
@@ -4144,7 +4463,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/code-inline/-/code-inline-0.0.6.tgz",
       "integrity": "sha512-jfhebvv3dVsp3OdPgKXnk8+e2pBiDVZejDOBFzBa/IblrAJ9cQDkN6rBD5IyEg8hTOxwbw3iaI/yZFmDmIguIA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4203,7 +4521,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/container/-/container-0.0.16.tgz",
       "integrity": "sha512-QWBB56RkkU0AJ9h+qy33gfT5iuZknPC7Un/IjZv9B0QmMIK+WWacc0cH6y2SV5Cv/b99hU94fjEMOOO4enpkbQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4240,7 +4557,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/heading/-/heading-0.0.16.tgz",
       "integrity": "sha512-jmsKnQm1ykpBzw4hCYHwBkt5pW2jScXffPeEH5ZRF5tZeF5b1pvlFTO9han7C0pCkZYo1kEvWiRtx69yfCIwuw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4253,7 +4569,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/hr/-/hr-0.0.12.tgz",
       "integrity": "sha512-TwmOmBDibavUQpXBxpmZYi2Iks/yeZOzFYh+di9EltMSnEabH8dMZXrl+pxNXzCgZ2XE8HY7VmUL65Lenfu5PA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4278,7 +4593,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/img/-/img-0.0.12.tgz",
       "integrity": "sha512-sRCpEARNVTf3FQhZOC+JTvu5r6ubiYWkT0ucYXg8ctkyi4G8QG+jgYPiNUqVeTLA2STOfmPM/nrk1nb84y6CPQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4291,7 +4605,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/link/-/link-0.0.13.tgz",
       "integrity": "sha512-lkWc/NjOcefRZMkQoSDDbuKBEBDES9aXnFEOuPH845wD3TxPwh+QTf0fStuzjoRLUZWpHnio4z7qGGRYusn/sw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4331,7 +4644,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/preview/-/preview-0.0.14.tgz",
       "integrity": "sha512-aYK8q0IPkBXyMsbpMXgxazwHxYJxTrXrV95GFuu2HbEiIToMwSyUgb8HDFYwPqqfV03/jbwqlsXmFxsOd+VNaw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4443,7 +4755,6 @@
       "resolved": "https://registry.npmjs.org/@react-email/text/-/text-0.1.6.tgz",
       "integrity": "sha512-TYqkioRS45wTR5il3dYk/SbUjjEdhSwh9BtRNB99qNH1pXAwA45H7rAuxehiu8iJQJH0IyIr+6n62gBz9ezmsw==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=20.0.0"
       },
@@ -4829,7 +5140,8 @@
     "node_modules/@types/marked": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz",
-      "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w=="
+      "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==",
+      "peer": true
     },
     "node_modules/@types/mdast": {
       "version": "4.0.3",
@@ -4850,7 +5162,6 @@
       "integrity": "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~7.19.0"
       }
@@ -4871,7 +5182,6 @@
       "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -4880,9 +5190,8 @@
       "version": "19.2.3",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
-      "dev": true,
+      "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -4985,7 +5294,6 @@
       "integrity": "sha512-hM5faZwg7aVNa819m/5r7D0h0c9yC4DUlWAOvHAtISdFTc8xB86VmX5Xqabrama3wIPJ/q9RbGS1worb6JfnMg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.50.1",
         "@typescript-eslint/types": "8.50.1",
@@ -5490,7 +5798,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6042,7 +6349,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -6402,12 +6708,14 @@
     "node_modules/codemirror": {
       "version": "5.65.16",
       "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.65.16.tgz",
-      "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg=="
+      "integrity": "sha512-br21LjYmSlVL0vFCPWPfhzUCT34FM/pAdK7rRIZwa0rrtrIdotvP4Oh4GUHsu2E3IrQMCfRkL/fN3ytMNxVQvg==",
+      "peer": true
     },
     "node_modules/codemirror-spell-checker": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/codemirror-spell-checker/-/codemirror-spell-checker-1.1.2.tgz",
       "integrity": "sha512-2Tl6n0v+GJRsC9K3MLCdLaMOmvWL0uukajNJseorZJsslaxZyZMgENocPU8R0DyoTAiKsyqiemSOZo7kjGV0LQ==",
+      "peer": true,
       "dependencies": {
         "typo-js": "*"
       }
@@ -7390,7 +7698,6 @@
       "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.2.tgz",
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -7573,7 +7880,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -7718,7 +8024,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.2.1.tgz",
       "integrity": "sha512-0wZ1IRqGGhMP76gLqz8EyfBXKk0J2qo2+H3fi4mcUP/KtTocoX08nmIAHl1Z2kJIZbZee8KOpBCSNPRgauucjw==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
@@ -8188,6 +8493,33 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "12.43.0",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.43.0.tgz",
+      "integrity": "sha512-1eaL3RvR/kAlbG7UYcpMptEyzPoENO0c6w7ZnB3/hh2vSAz/6uGAFn6fdoqTBguNstf3MsFhJHsD/0DHiclG+g==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.43.0",
+        "motion-utils": "^12.39.0",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -8991,7 +9323,6 @@
       "integrity": "sha512-am5zfg3yu6sqn5yjKBNqhnTX7Cv+m00ox+7jbaKkrLMRJ4rAdldd1xPd/JzbBWspqaQv6RSTrgFN95EsfhC+7w==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -9819,7 +10150,6 @@
       "integrity": "sha512-AkXIIFcaazymvey2i/+F94XRnM6TsVLZDhBMLsd1Sf/W0wzsvvpjeyUrCZD6HGG4SDYPgDJDBKeiJTBb10WzMg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@jest/core": "30.3.0",
         "@jest/types": "30.3.0",
@@ -10852,7 +11182,6 @@
       "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "lib/jiti-cli.mjs"
       }
@@ -11274,6 +11603,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
       "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -11894,6 +12224,21 @@
         "node": "*"
       }
     },
+    "node_modules/motion-dom": {
+      "version": "12.43.0",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.43.0.tgz",
+      "integrity": "sha512-azKON4d9S65PEoFUiQTMTgPheEmzf2QngdRc50AKfJp9Q9mmcBVw22c8eMq9k8kxOFHdL7+WZY7N/5F/lwiDag==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.39.0"
+      }
+    },
+    "node_modules/motion-utils": {
+      "version": "12.39.0",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.39.0.tgz",
+      "integrity": "sha512-8nadJAJjTtqRkmRF36FoJTrywK9nnFmnPwnSMyxaOCU7GDjN9RTMJIxx9De8ErM+vpPhMccr/6fo5WciyQLnMQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -11985,7 +12330,6 @@
       "resolved": "https://registry.npmjs.org/next/-/next-16.2.4.tgz",
       "integrity": "sha512-kPvz56wF5frc+FxlHI5qnklCzbq53HTwORaWBGdT0vNoKh1Aya9XC8aPauH4NJxqtzbWsS5mAbctm4cr+EkQ2Q==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@next/env": "16.2.4",
         "@swc/helpers": "0.5.15",
@@ -12134,7 +12478,6 @@
       "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-8.0.5.tgz",
       "integrity": "sha512-0PF8Yb1yZuQfQbq+5/pZJrtF6WQcjTd5/S4JOHs9PGFxuTqoB/icwuB44pOdURHJbRKX1PPoJZtY7R4VUoCC8w==",
       "license": "MIT-0",
-      "peer": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -12623,7 +12966,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.16.3.tgz",
       "integrity": "sha512-enxc1h0jA/aq5oSDMvqyW3q89ra6XIIDZgCX9vkMrnz5DFTw/Ny3Li2lFQ+pt3L6MCgm/5o2o8HW9hiJji+xvw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.9.1",
         "pg-pool": "^3.10.1",
@@ -12862,7 +13204,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.6",
         "picocolors": "^1.0.0",
@@ -12946,7 +13287,6 @@
       "integrity": "sha512-orRsuYpJVw8LdAwqqLykBj9ecS5/cRHlI5+nvTo8LcCKmzDmqVORXtOIYEEQuL9D4BxtA1lm5isAqzQZCoQ6Eg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -13019,7 +13359,6 @@
       "version": "10.18.2",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.18.2.tgz",
       "integrity": "sha512-X/K43vocUHDg0XhWVmTTMbec4LT/iBMh+csCEqJk+pJqegaXsvjdqN80ZZ3L+93azWCnWCZ+WGwYb8SplxeNjA==",
-      "peer": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/preact"
@@ -13071,7 +13410,6 @@
       "devOptional": true,
       "hasInstallScript": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@prisma/config": "7.7.0",
         "@prisma/dev": "0.24.3",
@@ -13244,7 +13582,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -13254,7 +13591,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -13694,7 +14030,6 @@
       "resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
       "integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",
@@ -14381,7 +14716,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@csstools/css-calc": "^3.1.1",
         "@csstools/css-parser-algorithms": "^4.0.0",
@@ -14870,14 +15204,14 @@
       }
     },
     "node_modules/tinyglobby": {
-      "version": "0.2.15",
-      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
-      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.16.tgz",
+      "integrity": "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "fdir": "^6.5.0",
-        "picomatch": "^4.0.3"
+        "picomatch": "^4.0.4"
       },
       "engines": {
         "node": ">=12.0.0"
@@ -14910,7 +15244,6 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15058,7 +15391,6 @@
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -15253,7 +15585,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -15289,7 +15620,8 @@
     "node_modules/typo-js": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/typo-js/-/typo-js-1.2.3.tgz",
-      "integrity": "sha512-67Hyl94beZX8gmTap7IDPrG5hy2cHftgsCAcGvE1tzuxGT+kRB+zSBin0wIMwysYw8RUCBCvv9UfQl8TNM75dA=="
+      "integrity": "sha512-67Hyl94beZX8gmTap7IDPrG5hy2cHftgsCAcGvE1tzuxGT+kRB+zSBin0wIMwysYw8RUCBCvv9UfQl8TNM75dA==",
+      "peer": true
     },
     "node_modules/uglify-js": {
       "version": "3.19.3",
@@ -15733,7 +16065,6 @@
       "resolved": "https://registry.npmjs.org/winston/-/winston-3.19.0.tgz",
       "integrity": "sha512-LZNJgPzfKR+/J3cHkxcpHKpKKvGfDZVPS4hfJCc4cCG0CgYzvlD6yE/S3CIL/Yt91ak327YCpiF/0MyeZHEHKA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@colors/colors": "^1.6.0",
         "@dabh/diagnostics": "^2.0.8",
@@ -15993,7 +16324,6 @@
       "version": "3.24.1",
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
       "integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index 97d46d489..9e204a176 100644
--- a/package.json
+++ b/package.json
@@ -30,11 +30,13 @@
     "@fortawesome/react-fontawesome": "^3.3.0",
     "@prisma/adapter-pg": "^7.3.0",
     "@prisma/client": "^7.3.0",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-email/components": "^1.0.12",
     "@react-email/render": "^2.0.6",
     "bcrypt": "^6.0.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
     "canvas-confetti": "^1.9.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "framer-motion": "^12.43.0",
     "html5-qrcode": "^2.3.8",
     "jsonwebtoken": "^9.0.3",
     "jsqr": "^1.4.0",
diff --git a/src/app/(auth)/layout.module.scss b/src/app/(auth)/layout.module.scss
index 6256d1ed1..896828f0b 100644
--- a/src/app/(auth)/layout.module.scss
+++ b/src/app/(auth)/layout.module.scss
@@ -1,41 +1,63 @@
 @use "@/styles/ohma";
 
 .wrapper {
-    height: 100dvh;
-    width: 100dvw;
-
-    vertical-align: middle;
+    min-height: calc(100dvh - #{ohma.$nav-height} - 3 * #{ohma.$gap});
     display: flex;
+    align-items: stretch;
     justify-content: center;
 
+    @include ohma.screenMobile {
+        min-height: calc(100dvh - 2 * #{ohma.$nav-height} - 4 * #{ohma.$gap});
+    }
+
     > .card {
-        padding: 4*ohma.$gap;
-        border-radius: ohma.$cardRounding;
         display: flex;
-        height: min-content;
-
-        @include ohma.neumorphism(var(--secondary-l), var(--secondary-c), var(--secondary-h));
+        align-items: stretch;
+        gap: ohma.$gap;
+        width: 100%;
 
-        > .image {
-            margin-left: 4*ohma.$gap;
-            display: grid;
-            place-items: center;
-            grid-column: 2/3;
-            filter: invert(1);
+        @include ohma.screenMobile {
+            flex-direction: column;
         }
 
-        @include ohma.screenLg {
-            margin-top: 6*ohma.$gap;
-            > .input {
-                grid-column: 1/2;
-                max-width: 250px;
-                margin: auto;
+        > .input {
+            flex: 0 0 min(380px, 100%);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: #{ohma.$gap};
+            padding: calc(4 * #{ohma.$gap}) calc(3 * #{ohma.$gap});
+            border-radius: ohma.$rounding;
+            background: ohma.$colors-surface-base;
+
+            > * {
+                width: 100%;
+            }
+
+            @include ohma.screenMobile {
+                flex: 1;
             }
         }
 
-        @include ohma.screenMobile {
-            flex-direction: column-reverse;
-            margin: 3*ohma.$gap;
+        > .image {
+            flex: 1;
+            min-width: 0;
+            border-radius: ohma.$rounding;
+            background-image: url("../(frontpage)/backgroundimages/frontImg.jpeg");
+            background-size: cover;
+            background-position: center;
+
+            @include ohma.screenMobile {
+                display: none;
+            }
         }
     }
+}
+
+.crest {
+    display: grid;
+    place-items: center;
+    padding: calc(2 * #{ohma.$gap}) 0;
+    filter: invert(1);
 }
\ No newline at end of file
diff --git a/src/app/(auth)/layout.tsx b/src/app/(auth)/layout.tsx
index ef1e482e6..7fe8c4b36 100644
--- a/src/app/(auth)/layout.tsx
+++ b/src/app/(auth)/layout.tsx
@@ -1,37 +1,26 @@
 import styles from './layout.module.scss'
-import { ServerSession } from '@/auth/session/ServerSession'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
-import { frontpageAuth } from '@/services/frontpage/auth'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import React from 'react'
 
 type PropTypes = {
     children: React.ReactNode
 }
 
-export default async function AuthLayout({ children }: PropTypes) {
-    const session = await ServerSession.fromNextAuth()
-    const canEditAuthIcon = frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
-        session
-    ).toJsObject()
-
+export default function AuthLayout({ children }: PropTypes) {
     return (
         <div className={styles.wrapper}>
             <div className={styles.card}>
                 <div className={styles.input}>
+                    <div className={styles.crest}>
+                        <StandardImageServer
+                            standardImage="MAGISK_HATT"
+                            alt="en kappemann sin hatt"
+                            width={120}
+                        />
+                    </div>
                     {children}
                 </div>
-                <div className={styles.image}>
-                    <SpecialCmsImage
-                        canEdit={canEditAuthIcon}
-                        special="AUTH_ICON"
-                        alt="en kappemann sin hatt"
-                        width={200}
-                        //TODO: Probably call through other service see comments in frontpage operations
-                        readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                        updateCmsImageAction={updateSpecialCmsImageFrontpage}
-                    />
-                </div>
+                <div className={styles.image} />
             </div>
         </div>
     )
diff --git a/src/app/(auth)/login/page.module.scss b/src/app/(auth)/login/page.module.scss
index 1ea432f19..a05755146 100644
--- a/src/app/(auth)/login/page.module.scss
+++ b/src/app/(auth)/login/page.module.scss
@@ -2,24 +2,21 @@
 
 .resetPasswordLink {
     > p {
-        margin-top: 2*ohma.$gap;
+        margin: calc(2 * #{ohma.$gap}) 0;
     }
-    color: ohma.$colors-text;
-    transition: color 100ms;
     &:hover {
         color: ohma.$colors-text-muted;
     }
 }
 
 .firstLoginText {
-    margin-top: ohma.$gap;
     color: ohma.$colors-text;
 }
 
 .loginForm {
     .textInput {
         max-width: unset;
-        margin-bottom: 2*ohma.$gap;
+        margin-bottom: calc(2 * #{ohma.$gap});
     }
 }
 
@@ -30,7 +27,7 @@
 .divider {
     display: flex;
     justify-content: center;
-    margin: 2*ohma.$gap 0;
+    margin: calc(2 * #{ohma.$gap}) 0;
     &::before,
     &::after {
         margin: ohma.$gap;
diff --git a/src/app/(auth)/login/page.tsx b/src/app/(auth)/login/page.tsx
index 9d4193f95..61ed95b30 100644
--- a/src/app/(auth)/login/page.tsx
+++ b/src/app/(auth)/login/page.tsx
@@ -1,7 +1,8 @@
 'use client'
 import styles from './page.module.scss'
 import TextInput from '@/UI/TextInput'
-import BorderButton from '@/UI/BorderButton'
+import Button from '@/UI/Button'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 import { signIn } from 'next-auth/react'
 import { useSearchParams } from 'next/navigation'
 import Link from 'next/link'
@@ -26,12 +27,13 @@ export default function LogIn() {
     }
 
     return <>
+        <PageTitleSetter title={'Logg inn'}/>
         <form className={styles.loginForm} onSubmit={handleSignIn}>
             <TextInput className={styles.textInput} label="Brukernavn" name="username" type="text"/>
             <TextInput className={styles.textInput} label="Passord" name="password" type="password"/>
-            <BorderButton style={{ width: '100%', margin: '0' }}>
+            <Button color="primary" style={{ width: '100%', margin: '0' }}>
                 Logg inn
-            </BorderButton>
+            </Button>
             <p style={{ color: 'red' }}>
                 {error === 'CredentialsSignin' ? 'Feil brukernavn eller passord :(' : ''}
             </p>
@@ -41,12 +43,12 @@ export default function LogIn() {
             <span>eller</span>
         </div>
 
-        <BorderButton style={{ width: '100%', margin: '0' }} onClick={() => signIn('feide', {
+        <Button color="secondary" style={{ width: '100%', margin: '0' }} onClick={() => signIn('feide', {
             redirect: true,
             callbackUrl: searchParams.get('callbackUrl') || '/users/me'
         })}>
             Logg inn med Feide
-        </BorderButton>
+        </Button>
 
         <Link href="/send-reset-password-email" className={styles.resetPasswordLink}>
             <p>
diff --git a/src/app/(auth)/register/RegistrationForm.tsx b/src/app/(auth)/register/RegistrationForm.tsx
index cd5bb45f3..ec1e55467 100644
--- a/src/app/(auth)/register/RegistrationForm.tsx
+++ b/src/app/(auth)/register/RegistrationForm.tsx
@@ -6,10 +6,10 @@ import Checkbox from '@/components/UI/Checkbox'
 import { SelectString } from '@/components/UI/Select'
 import TextInput from '@/components/UI/TextInput'
 import { sexConfig } from '@/services/users/constants'
+import { SEX, type User } from '@/prisma-generated-pn-types'
 import { signIn } from 'next-auth/react'
 import { useSearchParams } from 'next/navigation'
 import { useState } from 'react'
-import { SEX, type User } from '@/prisma-generated-pn-types'
 
 export default function RegistrationForm({
     userData,
diff --git a/src/app/(frontpage)/InfoBubbles.module.scss b/src/app/(frontpage)/InfoBubbles.module.scss
index e23ae1b6b..f32291ee6 100644
--- a/src/app/(frontpage)/InfoBubbles.module.scss
+++ b/src/app/(frontpage)/InfoBubbles.module.scss
@@ -7,13 +7,13 @@ $iconSize: 150px;
     @include ohma.layer();
     backdrop-filter: brightness(0.2);
     color: ohma.$colors-text;
-    padding: 20*ohma.$gap  10vw;
+    padding: calc(20 * #{ohma.$gap})  10vw;
     display: flex;
     flex-direction: row;
     justify-content: space-around;
     align-items: flex-start;
     > .bubble {
-        margin: 5*ohma.$gap; 
+        margin: calc(5 * #{ohma.$gap}); 
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -21,23 +21,17 @@ $iconSize: 150px;
         > .icon {
             width: $iconSize;
             height: $iconSize;
-            position: relative;
+            border-radius: 50%;
+            background-color: ohma.$colors-accent-blue;
+            display: flex;
+            align-items: center;
+            justify-content: center;
             > svg {
-                width: calc($iconSize /2);
-                height: calc($iconSize /2);
-                position: absolute;
-                top: 0;
-                left: 50%;
-                transform: translate(-50%, 50%);
+                width: calc($iconSize / 2);
+                height: calc($iconSize / 2);
                 color: ohma.$colors-text;
-                &:first-child {
-                    color: ohma.$colors-secondary;
-                    width: $iconSize;
-                    height: $iconSize;
-                    transform: translate(-50%, 0);
-                }
             }
-            margin-bottom: 2*ohma.$gap;
+            margin-bottom: calc(2 * #{ohma.$gap});
         }
         > .heading {
             font-size: ohma.$fonts-xl;
diff --git a/src/app/(frontpage)/InfoBubbles.tsx b/src/app/(frontpage)/InfoBubbles.tsx
index 5d77e2b08..fd013eadd 100644
--- a/src/app/(frontpage)/InfoBubbles.tsx
+++ b/src/app/(frontpage)/InfoBubbles.tsx
@@ -1,7 +1,6 @@
 import styles from './InfoBubbles.module.scss'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
-    faCircle,
     faHeart,
     faFutbol,
     faSuitcase
@@ -12,7 +11,6 @@ function InfoBubbles() {
         <div className={styles.InfoBubbles}>
             <div className={styles.bubble}>
                 <div className={styles.icon}>
-                    <FontAwesomeIcon icon={faCircle} />
                     <FontAwesomeIcon icon={faHeart} />
                 </div>
                 <div className={styles.heading}>Sosialt</div>
@@ -23,7 +21,6 @@ function InfoBubbles() {
             </div>
             <div className={styles.bubble}>
                 <div className={styles.icon}>
-                    <FontAwesomeIcon icon={faCircle} />
                     <FontAwesomeIcon icon={faFutbol} />
                 </div>
                 <div className={styles.heading}>Komitéer</div>
@@ -35,7 +32,6 @@ function InfoBubbles() {
             </div>
             <div className={styles.bubble}>
                 <div className={styles.icon}>
-                    <FontAwesomeIcon icon={faCircle} />
                     <FontAwesomeIcon icon={faSuitcase} />
                 </div>
                 <div className={styles.heading}>Næringsliv</div>
diff --git a/src/app/(frontpage)/LoggedIn.module.scss b/src/app/(frontpage)/LoggedIn.module.scss
index d5bdcd28f..39f2a869b 100644
--- a/src/app/(frontpage)/LoggedIn.module.scss
+++ b/src/app/(frontpage)/LoggedIn.module.scss
@@ -1,11 +1,19 @@
 @use '@/styles/ohma';
 
+// The surface-base panel moved onto the individual islands (see
+// LoggedInSection), so this part is transparent and the page background shows
+// through the gaps between them.
 .loggedInPart {
-    padding-left: ohma.$minimalPagePadding;
-    padding-right: ohma.$minimalPagePadding;
-
     >div {
         width: 100%;
         @include ohma.pagePadding();
     }
 }
+
+.islands {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: ohma.$gap;
+}
+
diff --git a/src/app/(frontpage)/LoggedIn.tsx b/src/app/(frontpage)/LoggedIn.tsx
index 243fe2bc4..042463970 100644
--- a/src/app/(frontpage)/LoggedIn.tsx
+++ b/src/app/(frontpage)/LoggedIn.tsx
@@ -4,16 +4,15 @@ import LoggedInSection from './LoggedInSection'
 import EventCard from '@/app/_components/Event/EventCard'
 import JobAd from '@/app/career/jobads/JobAd'
 import NewsCard from '@/app/news/NewsCard'
-import SocialIcons from '@/components/SocialIcons/SocialIcons'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import { readNewsCurrentAction } from '@/services/news/actions'
 import { readActiveJobAdsAction } from '@/services/career/jobAds/actions'
 import { readCurrentEventsAction } from '@/services/events/actions'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
 import { frontpageAuth } from '@/services/frontpage/auth'
-import { eventAuth } from '@/services/events/auth'
 import { ServerSession } from '@/auth/session/ServerSession'
+import Footer from '@/components/Footer/Footer'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
@@ -28,29 +27,21 @@ export default async function LoggedInLandingPage() {
         .slice(0, MAX_NUMBER_OF_ELEMENTS)
 
     const session = await ServerSession.fromNextAuth()
-    const canEditFrontpageCmsImage = frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
-        session
-    ).toJsObject()
 
-    const canEditEventCmsImage = eventAuth.updateCmsCoverImage.dynamicFields({}).auth(
+    const canEditSpecialCmsImage = frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
         session
     ).toJsObject()
 
     return (
         <div className={styles.wrapper}>
+            <PageTitleSetter title={'Sct. Omega'} />
             <div className={`${styles.part} ${styles.frontImg}`}>
                 <div className={styles.frontInfo}>
                     <div>
-                        <SpecialCmsImage
-                            canEdit={canEditFrontpageCmsImage}
-                            special="FRONTPAGE_LOGO"
+                        <StandardImageServer
+                            standardImage="LOGO_WHITE"
                             width={300}
-                            readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                            updateCmsImageAction={updateSpecialCmsImageFrontpage}
                         />
-                        <div className={styles.socials}>
-                            <SocialIcons />
-                        </div>
                         <Link className={styles.scrollDown} href="#firstSection">
                             <FontAwesomeIcon icon={faAngleDown} />
                         </Link>
@@ -59,26 +50,45 @@ export default async function LoggedInLandingPage() {
             </div>
             <div id="firstSection" className={`${styles.part} ${loggedInStyles.loggedInPart}`}>
                 <div>
-                    <LoggedInSection title="Nyheter" link="/news">
-                        {news.map((newsArticle, key) => (
-                            <NewsCard key={key} news={newsArticle} />
-                        ))}
-                    </LoggedInSection>
-                    <LoggedInSection title="Hvad der hender" link="/events">
-                        {events.map((event, key) => (
-                            <EventCard key={key} event={event} canEdit={canEditEventCmsImage} />
-                        ))}
-                    </LoggedInSection>
-                    <LoggedInSection title="Jobbannonser" link="/career/jobads">
-                        {jobAds.map((jobAd, key) => (
-                            <JobAd key={key} jobAd={jobAd} />
-                        ))}
-                    </LoggedInSection>
-                    <LoggedInSection title="Bilder" link="/images">
-                        Her kan man kanskje vise noen bilder ellerno
-                    </LoggedInSection>
+                    <div className={loggedInStyles.islands}>
+                        <LoggedInSection title="Nyheter" link="/news" emptyMessage="Det er for tiden ingen nyheter">
+                            {news.map((newsArticle, key) => (
+                                <NewsCard key={key} news={newsArticle} />
+                            ))}
+                        </LoggedInSection>
+                        <LoggedInSection
+                            title="Hvad der hender"
+                            link="/events"
+                            layout="rows"
+                            span="half"
+                            emptyMessage="Det er for tiden ingen kommende hendelser"
+                        >
+                            {events.map((event, key) => (
+                                <EventCard key={key} event={event} />
+                            ))}
+                        </LoggedInSection>
+                        <LoggedInSection
+                            title="Jobbannonser"
+                            link="/career/jobads"
+                            layout="rows"
+                            span="half"
+                            emptyMessage="Det er for tiden ingen jobbannonser"
+                        >
+                            {jobAds.map((jobAd, key) => (
+                                <JobAd key={key} jobAd={jobAd} />
+                            ))}
+                        </LoggedInSection>
+                        {/* Images section doesnt really fit for the logged in landing page.
+                        <LoggedInSection title="Bilder" link="/image-collections">
+                            Her kan man kanskje vise noen bilder ellerno
+                        </LoggedInSection>
+                        */}
+                    </div>
                 </div>
             </div>
+            <div className={styles.footer}>
+                <Footer canEditSpecialCmsImage={canEditSpecialCmsImage} />
+            </div>
         </div>
     )
 }
diff --git a/src/app/(frontpage)/LoggedInSection.module.scss b/src/app/(frontpage)/LoggedInSection.module.scss
index 32dbcc24c..ddf39d2e4 100644
--- a/src/app/(frontpage)/LoggedInSection.module.scss
+++ b/src/app/(frontpage)/LoggedInSection.module.scss
@@ -1,38 +1,99 @@
 @use '@/styles/ohma';
 
+// Each section is its own island: the surface-base panel that used to sit
+// behind the whole page now belongs to the sections themselves, so the page
+// background shows between them.
 .LoggedInSection {
-    width: 100%;
-    margin-top: calc(10 * ohma.$gap);
-    margin-bottom: calc(10 * ohma.$gap);
+    flex: 1 1 100%;
+    min-width: 0;
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+    padding: calc(3 * #{ohma.$gap});
+
+    @include ohma.screenMobile {
+        padding: calc(2 * #{ohma.$gap});
+    }
 
     > .title {
         width: 100%;
         display: flex;
         justify-content: space-between;
+        align-items: center;
+        gap: calc(2 * #{ohma.$gap});
 
         > h4 {
             font-size: ohma.$fonts-xl;
             font-weight: ohma.$fonts-weight-l;
             font-family: ohma.$fonts-secondary;
         }
+    }
 
-        > a {
-            font-size: ohma.$fonts-m;
-            color: ohma.$colors-text;
-            &:hover {
-                color: ohma.$colors-text-muted;
-            }
+    // Matches the header-item pill (the "Ny +" button) so the two read as the
+    // same kind of control.
+    .readMore {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        height: calc(5 * #{ohma.$gap});
+        padding: 0 calc(2 * #{ohma.$gap});
+        border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+        background-color: ohma.$colors-surface-hover;
+        color: ohma.$colors-ink-strong;
+        font-size: ohma.$fonts-m;
+        font-weight: ohma.$fonts-weight-m;
+        white-space: nowrap;
+        text-decoration: none;
+        transition: background-color ohma.$transitionTime, color ohma.$transitionTime;
+
+        // globals underlines every a:hover, which would undo the button look.
+        &:hover {
+            background-color: ohma.$colors-surface-subtle;
+            color: ohma.$colors-ink-strong;
+            text-decoration: none;
         }
     }
 
     > .content {
         font-size: ohma.$fonts-m;
-        /* display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        padding: calc(3 * ohma.$gap);
-        justify-content: space-between; */
 
-        @include ohma.ImageCardListLayout;
+        &:not(.rows) {
+            @include ohma.ImageCardListLayout;
+        }
+
+        &.rows {
+            @include ohma.RowListLayout;
+            margin: calc(2 * #{ohma.$gap}) 0 0;
+            height: calc(38 * #{ohma.$gap});
+        }
+    }
+}
+
+// Placeholder shown instead of the list when a section has nothing to display.
+// Matches the .rows fixed height so an empty island doesn't collapse either.
+.empty {
+    height: calc(38 * #{ohma.$gap});
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: ohma.$gap;
+    color: ohma.$colors-ink-hover;
+    text-align: center;
+
+    > svg {
+        font-size: calc(6 * #{ohma.$gap});
+        opacity: 0.5;
+    }
+}
+
+// Two islands share a row once there is room for both.
+// Two islands share a row once there is room for both; below the mobile
+// breakpoint they wrap underneath each other instead of splitting a narrow
+// screen in half.
+.half {
+    flex: 1 1 calc(50% - #{ohma.$gap});
+
+    @include ohma.screenMobile {
+        flex-basis: 100%;
     }
 }
diff --git a/src/app/(frontpage)/LoggedInSection.tsx b/src/app/(frontpage)/LoggedInSection.tsx
index fbab5ad1e..0800160fa 100644
--- a/src/app/(frontpage)/LoggedInSection.tsx
+++ b/src/app/(frontpage)/LoggedInSection.tsx
@@ -1,24 +1,41 @@
 import styles from './LoggedInSection.module.scss'
 import React from 'react'
 import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faInbox } from '@fortawesome/free-solid-svg-icons'
 
 export default function LoggedInSection({
     title,
     link,
+    layout = 'grid',
+    span = 'full',
+    emptyMessage = 'Ingenting å vise her enda',
     children,
 }: {
     title: string,
     link: string,
+    /** 'rows' stacks full-width children instead of laying them out as a card grid. */
+    layout?: 'grid' | 'rows',
+    /** How much of the island row this section claims once there is room for two. */
+    span?: 'full' | 'half',
+    /** Shown in place of the list when there are no children to display. */
+    emptyMessage?: string,
     children: React.ReactNode,
 }) {
-    return <div className={styles.LoggedInSection}>
+    const isEmpty = React.Children.count(children) === 0
+
+    return <section className={`${styles.LoggedInSection} ${span === 'half' ? styles.half : ''}`}>
         <div className={styles.title}>
             <h4>{title}</h4>
-            <Link href={link}>Les mer</Link>
+            <Link href={link} className={styles.readMore}>Se flere</Link>
         </div>
-        <hr />
-        <div className={styles.content}>
-            {children}
+        <div className={`${styles.content} ${layout === 'rows' ? styles.rows : ''}`}>
+            {isEmpty
+                ? <div className={styles.empty}>
+                    <FontAwesomeIcon icon={faInbox} />
+                    <p>{emptyMessage}</p>
+                </div>
+                : children}
         </div>
-    </div>
+    </section>
 }
diff --git a/src/app/(frontpage)/LoggedOut.tsx b/src/app/(frontpage)/LoggedOut.tsx
index 5c073cf10..a4b22bd31 100644
--- a/src/app/(frontpage)/LoggedOut.tsx
+++ b/src/app/(frontpage)/LoggedOut.tsx
@@ -1,13 +1,15 @@
 import Section from './Section'
 import styles from './page.module.scss'
+import sectionStyles from './Section.module.scss'
 import InfoBubbles from './InfoBubbles'
 import { MazeMapLophtet } from '@/components/MazeMap/MazeMap'
 import SocialIcons from '@/components/SocialIcons/SocialIcons'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import YouTube from '@/components/YouTube/YouTube'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { frontpageAuth } from '@/services/frontpage/auth'
+import Footer from '@/components/Footer/Footer'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 import { faAngleDown } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
@@ -23,24 +25,21 @@ export default async function LoggedOutLandingPage() {
 
     return (
         <div className={styles.wrapper}>
+            <PageTitleSetter title={'Sct. Omega'} />
             <div className={`${styles.part} ${styles.frontImg}`}>
                 <div className={styles.frontInfo}>
                     <div>
-                        <SpecialCmsImage
-                            canEdit={canEditSpecialCmsImage}
-                            special="FRONTPAGE_LOGO"
-                            width={300}
-                            readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                            updateCmsImageAction={updateSpecialCmsImageFrontpage}
-                        />
+                        <div className={styles.crest}>
+                            <StandardImageServer
+                                standardImage="LOGO_WHITE"
+                                width={300}
+                            />
+                        </div>
 
                         <Link href="login">Logg inn</Link>
-                        <Link href="infopages/nystudent">Ny student</Link>
+                        <Link className={styles.primaryCta} href="infopages/nystudent">Ny student</Link>
                         <Link href="/career">For bedrifter</Link>
 
-                        <div className={styles.socials}>
-                            <SocialIcons />
-                        </div>
                         <Link className={styles.scrollDown} href="#firstSection">
                             <FontAwesomeIcon icon={faAngleDown} />
                         </Link>
@@ -55,7 +54,11 @@ export default async function LoggedOutLandingPage() {
                     readMore="/articles"
                     imgWidth={450}
                     id="firstSection"
-                />
+                >
+                    <div className={sectionStyles.socials}>
+                        <SocialIcons />
+                    </div>
+                </Section>
 
                 <InfoBubbles />
                 <Section
@@ -70,9 +73,7 @@ export default async function LoggedOutLandingPage() {
 
             </div>
             <div className={`${styles.part} ${styles.omegamai}`}>
-                <div className={styles.emptyPart} />
                 <YouTube src="https://www.youtube.com/watch?v=I-zNLW4ILu4" />
-                <div className={styles.emptyPart} />
                 <Section
                     canEditSpecialCmsImage={canEditSpecialCmsImage}
                     canEditSpecialCmsParagraph={canEditSpecialCmsParagraph}
@@ -94,9 +95,10 @@ export default async function LoggedOutLandingPage() {
 
             </div>
             <div className={`${styles.part} ${styles.taktlause}`}>
-                <div className={styles.emptyPart} />
                 <MazeMapLophtet height={'80vh'}/>
-                <div className={styles.emptyPart} />
+            </div>
+            <div className={styles.footer}>
+                <Footer canEditSpecialCmsImage={canEditSpecialCmsImage} />
             </div>
         </div>
     )
diff --git a/src/app/(frontpage)/Section.module.scss b/src/app/(frontpage)/Section.module.scss
index afd3b9c0d..d6f42d353 100644
--- a/src/app/(frontpage)/Section.module.scss
+++ b/src/app/(frontpage)/Section.module.scss
@@ -4,7 +4,7 @@
     display: grid;
     overflow: hidden;
     > div:not(.imgContainer) {
-        padding: 15*ohma.$gap;
+        padding: calc(15 * #{ohma.$gap});
         height: 100%;
         display: flex;
         flex-direction: column;
@@ -23,28 +23,64 @@
             width: 120px;
             margin: 0;
         }
+        > .socials {
+            margin-top: calc(2 * #{ohma.$gap});
+            > a {
+                margin-right: ohma.$gap;
+                color: ohma.$colors-text;
+                transition: color ohma.$transitionTime;
+                &:hover {
+                    color: ohma.$colors-accent-blue;
+                }
+            }
+        }
     }
     &.blue {
-        background-color: color-mix(in srgb, ohma.$colors-secondary, black 15%);
+        background-color: color-mix(in srgb, ohma.$colors-surface-base, black 15%);
         > div:not(.imgContainer) > .paragraph {
             h1, h2, h3, h4, h5, h6, p, i {
                 color: ohma.$colors-text;
             }
         }
-        .readMore {
-            @include ohma.borderBtn(ohma.$colors-primary);
-        }
     }
     &:not(.blue) {
-        background-color: ohma.$colors-secondary;
-        color: ohma.$colors-black;
-        .readMore {
-            @include ohma.borderBtn(ohma.$colors-secondary);
-        }
+        background-color: ohma.$colors-surface-base;
+        color: ohma.$colors-text;
+    }
+    // Same on both surfaces now that the outline tier is gone.
+    .readMore {
+        @include ohma.secondaryBtn;
     }
     > .imgContainer {
-        margin: 2*ohma.$gap;
+        margin: calc(2 * #{ohma.$gap});
         border-radius: ohma.$rounding;
+        position: relative;
+        overflow: hidden;
+
+        // CmsImage's own wrapper divs size themselves off the image's intrinsic width
+        // rather than off this container. Force every wrapper div to fill this box
+        // instead, at whatever nesting depth - StandardImage's fallback renders one
+        // level deeper when no image has been chosen yet. This container's own height
+        // comes from the grid row stretching to match the text column, so these need to
+        // stay position: absolute rather than height: 100% - a percentage height would
+        // resolve against that still-being-computed row height, which Firefox (unlike
+        // Chrome) collapses to 0 instead of waiting for the stretch to resolve.
+        div {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+        }
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
     }
 }
 
@@ -52,17 +88,7 @@
     .section {
         grid-template-columns: auto auto;
         > .imgContainer {
-            position: relative;
-            overflow: hidden;
             max-width: 50vw;
-            > div {
-                min-height: 100%;
-                position: absolute;
-                transform: translateX(-50%);
-                top: 0px;
-                left: 50%;
-                margin: auto;
-            }
         }
     }
 }
@@ -73,22 +99,12 @@
         grid-template-rows: auto auto;
         > .imgContainer {
             grid-row: 2/3;
-            overflow: hidden;
             min-width: 100%;
             max-height: 50vh;
             max-width: 100vw;
-            overflow: hidden;
-            > div {
-                min-height: 100%;
-                min-width: 100%;
-                margin: auto;
-                display: block;
-                width: 100%;
-                height: auto;
-            }
         }
         > div:not(.imgContainer) {
-            padding: 10*ohma.$gap;
+            padding: calc(10 * #{ohma.$gap});
             width: 100vw;
         }
     }
diff --git a/src/app/(frontpage)/Section.tsx b/src/app/(frontpage)/Section.tsx
index 9c73d6de1..445dc551c 100644
--- a/src/app/(frontpage)/Section.tsx
+++ b/src/app/(frontpage)/Section.tsx
@@ -7,13 +7,13 @@ import {
     updateSpecialCmsImageFrontpage,
     updateSpecialCmsParagraphFrontpageSection
 } from '@/services/frontpage/actions'
-import React from 'react'
 import Link from 'next/link'
 import type {
     SpecialCmsImage as SpecialCmsImageT,
     SpecialCmsParagraph as SpecialCmsParagraphT
 } from '@/prisma-generated-pn-types'
 import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
+import type { ReactNode } from 'react'
 
 type PropTypes = {
     specialCmsImage: SpecialCmsImageT,
@@ -24,6 +24,7 @@ type PropTypes = {
     position: 'left' | 'right',
     imgWidth: number,
     id?: string,
+    children?: ReactNode,
 }
 
 function Section({
@@ -34,7 +35,8 @@ function Section({
     readMore,
     position,
     imgWidth,
-    id
+    id,
+    children
 }: PropTypes) {
     const imgContainer = (
         <div style={{ width: imgWidth }} className={styles.imgContainer}>
@@ -59,6 +61,7 @@ function Section({
                     updateCmsParagraphAction={updateSpecialCmsParagraphFrontpageSection}
                 />
                 <Link className={styles.readMore} href={readMore}>Les mer</Link>
+                {children}
             </div>
             {position === 'right' && imgContainer}
         </div>
diff --git a/src/app/(frontpage)/page.module.scss b/src/app/(frontpage)/page.module.scss
index ec7f2995d..2598f1c09 100644
--- a/src/app/(frontpage)/page.module.scss
+++ b/src/app/(frontpage)/page.module.scss
@@ -3,24 +3,41 @@ $omegamai: url("backgroundimages/Omegamai.jpeg");
 $frontImg: url("backgroundimages/frontImg.jpeg");
 $taktlause: url("backgroundimages/taktlause.jpeg");
 
+.pageRoot {
+    position: relative;
+}
+
 .link {
     position: absolute;
     top: ohma.$gap;
     right: ohma.$gap;
-    @include ohma.btn();
+    z-index: 2;
+    @include ohma.btn(ohma.$colors-accent-blue);
 }
 
 .wrapper {
     font-size: 40px;
+    // Separates the hero, the content and the footer by one grid step, so each
+    // reads as its own surface against the page background.
+    display: flex;
+    flex-direction: column;
+    gap: ohma.$gap;
+
     > .part {
         &.frontImg {
             background-image: $frontImg;
+            border-radius: ohma.$rounding;
+            // .frontInfo paints its own radial gradient, so the corners have to
+            // be clipped rather than just rounding the background.
+            overflow: hidden;
         }
         &.omegamai {
             background-image: $omegamai;
+            padding: calc(2 * #{ohma.$gap}) 0;
         }
         &.taktlause {
             background-image: $taktlause;
+            padding: calc(2 * #{ohma.$gap}) 0;
         }
         background-size: cover;
         background-repeat: no-repeat;
@@ -30,9 +47,16 @@ $taktlause: url("backgroundimages/taktlause.jpeg");
     }
 }
 
+// Was referenced from LoggedIn/LoggedOut but never defined, so the wrapper
+// rendered with class="undefined".
+.footer {
+    border-radius: ohma.$rounding;
+    overflow: hidden;
+}
+
 .frontInfo {
     width: 100%;
-    height: calc(100dvh - 60px);
+    min-height: calc(100dvh - #{ohma.$nav-height} - 3 * #{ohma.$gap});
     display: grid;
     place-items: center;
     background: radial-gradient(ohma.$colors-black, transparent);
@@ -40,31 +64,48 @@ $taktlause: url("backgroundimages/taktlause.jpeg");
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding-bottom: 20px; //compansate a little for nav size 
-        > img {
-            margin-bottom: 2*ohma.$gap;
-        }
-        > .socials {
-            margin: 3*ohma.$gap;
-            > a {
-                margin: ohma.$gap;
-                color: ohma.$colors-white;
-                transition: color .3s;
-                &:hover {
-                    color: ohma.$colors-gray-300;
-                }
-            }
-        }
+        gap: calc(3 * #{ohma.$gap});
+        padding-bottom: 20px;
+
         > a:not(.scrollDown) {
             width: 100%;
-            @include ohma.borderBtn();
+            margin: 0;
+            padding: calc(2.5 * #{ohma.$gap}) calc(3 * #{ohma.$gap});
+            font-weight: ohma.$fonts-weight-m;
+            @include ohma.secondaryBtn;
+        }
+
+        > a.primaryCta {
+            font-weight: ohma.$fonts-weight-l;
+            @include ohma.btn(ohma.$colors-accent-blue);
+            margin: 0;
+            padding: calc(2.5 * #{ohma.$gap}) calc(3 * #{ohma.$gap});
         }
+
         > .scrollDown {
             color: ohma.$colors-white;
+            animation: scrollBounce 2s ease-in-out infinite;
         }
     }
+
+    @media (max-width: ohma.$mobileBreakpoint) {
+        min-height: calc(100dvh - 2 * #{ohma.$nav-height} - 4 * #{ohma.$gap});
+    }
 }
 
-.emptyPart {
-    height: 30vh;
+.crest {
+    display: grid;
+    place-items: center;
+    padding: calc(4 * #{ohma.$gap});
+    border-radius: 50%;
+    background: radial-gradient(circle, color-mix(in srgb, ohma.$colors-black, transparent 20%) 0%, transparent 70%);
+}
+
+@keyframes scrollBounce {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(8px);
+    }
 }
\ No newline at end of file
diff --git a/src/app/(frontpage)/page.tsx b/src/app/(frontpage)/page.tsx
index e9714092e..dc714a6dc 100644
--- a/src/app/(frontpage)/page.tsx
+++ b/src/app/(frontpage)/page.tsx
@@ -25,7 +25,7 @@ export default async function Home({ searchParams }: PropTypes) {
     switch (frontpageVersion) {
         case 'logged-out':
             return (
-                <>
+                <div className={styles.pageRoot}>
                     <Link
                         className={styles.link}
                         href={`/?${QueryParams.frontpageVersion.encodeUrl('logged-in')}`}
@@ -33,23 +33,24 @@ export default async function Home({ searchParams }: PropTypes) {
                         <span>Gå til innlogget forside</span>
                     </Link>
                     <LoggedOutLandingPage />
-                </>
+                </div>
             )
         case 'logged-in':
         default:
             return (
-                <> {
-                    canEditFrontpage && (
-                        <Link
-                            className={styles.link}
-                            href={`/?${QueryParams.frontpageVersion.encodeUrl('logged-out')}`}
-                        >
-                            <span>Gå til utlogget forside</span>
-                        </Link>
-                    )
-                }
-                <LoggedInLandingPage />
-                </>
+                <div className={styles.pageRoot}>
+                    {
+                        canEditFrontpage && (
+                            <Link
+                                className={styles.link}
+                                href={`/?${QueryParams.frontpageVersion.encodeUrl('logged-out')}`}
+                            >
+                                <span>Gå til utlogget forside</span>
+                            </Link>
+                        )
+                    }
+                    <LoggedInLandingPage />
+                </div>
             )
     }
 }
diff --git a/src/app/_components/Cms/AddParts.tsx b/src/app/_components/Cms/AddParts.tsx
index 192ea112e..be19bfda9 100644
--- a/src/app/_components/Cms/AddParts.tsx
+++ b/src/app/_components/Cms/AddParts.tsx
@@ -1,5 +1,5 @@
 import styles from './AddParts.module.scss'
-import BorderButton from '@/components/UI/BorderButton'
+import Button from '@/components/UI/Button'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPlus } from '@fortawesome/free-solid-svg-icons'
 import type { ArticleSectionPart } from '@/cms/articleSections/types'
@@ -48,14 +48,14 @@ export default function AddParts({
         <div className={styles.AddParts}>
             {
                 parts.map((part, i) => part.shouldShow && (
-                    <BorderButton
+                    <Button
                         key={i}
                         onClick={() => onClick(part.part)}
                         color="secondary"
                     >
                         <FontAwesomeIcon icon={faPlus} />
                         {part.text}
-                    </BorderButton>
+                    </Button>
                 ))
             }
         </div>
diff --git a/src/app/_components/Cms/Article/Article.module.scss b/src/app/_components/Cms/Article/Article.module.scss
index b4f808b99..d47a514ae 100644
--- a/src/app/_components/Cms/Article/Article.module.scss
+++ b/src/app/_components/Cms/Article/Article.module.scss
@@ -4,6 +4,7 @@ $cover-height: min(300px, 40vh);
 $padding: ohma.$minimalPagePadding;
 
 .Article {
+    height: 100%;
     display: grid;
     grid-template-columns: 1fr auto;
     grid-template-rows: auto 1fr auto;
@@ -41,24 +42,27 @@ $padding: ohma.$minimalPagePadding;
                 left: 0;
                 width: 100%;
                 height: 100%;
-                background: linear-gradient(to bottom, rgba(0,0,0, 0), ohma.$colors-secondary);
+                background: linear-gradient(to bottom, rgba(0,0,0, 0), ohma.$colors-surface-base);
                 z-index: 1;
             }
-            > * {
+
+            // CmsImage's own wrapper divs (CmsImage/StandardImage/Image) size themselves off
+            // the image's intrinsic width rather than off this container. Force every wrapper
+            // div to fill this box instead, at whatever nesting depth - Image sits one level
+            // deeper when there's no image chosen yet and StandardImage's fallback renders
+            // instead.
+            div {
+                width: 100%;
+                height: 100%;
+            }
+
+            img {
                 position: absolute;
                 top: 0;
                 left: 0;
-                width: 100% !important;
-                height: 100%;
+                width: 100%;
+                height: $cover-height;
                 object-fit: cover;
-                img {
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100% !important;
-                    height: $cover-height !important;
-                    object-fit: cover;
-                }
             }
         }
         >*:nth-child(2) {
diff --git a/src/app/_components/Cms/Article/Article.tsx b/src/app/_components/Cms/Article/Article.tsx
index 09c1ad305..878b80048 100644
--- a/src/app/_components/Cms/Article/Article.tsx
+++ b/src/app/_components/Cms/Article/Article.tsx
@@ -25,6 +25,8 @@ export type PropTypes = {
     noMargin?: boolean
     sideBarContent?: ReactNode
     sideBarClassName?: string
+    articleClassName?: string
+    addSectionClassName?: string
     actions: {
         updateCoverImageAction: UpdateCmsImageAction,
         updateArticleAction: UpdateArticleAction,
@@ -42,6 +44,8 @@ export default function Article({
     noMargin = false,
     sideBarContent,
     sideBarClassName,
+    articleClassName,
+    addSectionClassName,
     actions,
     canEdit,
 }: PropTypes) {
@@ -69,7 +73,7 @@ export default function Article({
                     </SlideInOnView>
                 </span>
             )}
-            <article className={noMargin ? styles.noMargin : undefined}>
+            <article className={`${noMargin ? styles.noMargin : ''} ${articleClassName ?? ''}`}>
                 {
                     article.articleSections.length ? (
                         article.articleSections.sort((a, b) => (a.order - b.order)).map((section, i) => (
@@ -110,7 +114,7 @@ export default function Article({
                     {sideBarContent}
                 </aside>
             )}
-            <div className={styles.addSection}>
+            <div className={`${styles.addSection} ${addSectionClassName ?? ''}`}>
                 <AddSection
                     canEdit={canEdit}
                     currentNumberSections={article.articleSections.length}
diff --git a/src/app/_components/Cms/Article/SectionMover.module.scss b/src/app/_components/Cms/Article/SectionMover.module.scss
index ccbc8770b..3278f263a 100644
--- a/src/app/_components/Cms/Article/SectionMover.module.scss
+++ b/src/app/_components/Cms/Article/SectionMover.module.scss
@@ -5,7 +5,7 @@
     width: 100%;
     justify-content: center;
     button {
-        @include ohma.btn(ohma.$colors-primary);
+        @include ohma.btn(ohma.$colors-accent-blue);
         border-radius: 50%;
         padding: 1em;
         width: 2em;
diff --git a/src/app/_components/Cms/ArticleSection/AddPartToArticleSection.module.scss b/src/app/_components/Cms/ArticleSection/AddPartToArticleSection.module.scss
index cfd31d2a6..89c26633f 100644
--- a/src/app/_components/Cms/ArticleSection/AddPartToArticleSection.module.scss
+++ b/src/app/_components/Cms/ArticleSection/AddPartToArticleSection.module.scss
@@ -5,11 +5,11 @@
     max-width: 100%;
     > .wrapper {
         position: relative;
-        border: ohma.$colors-secondary 3px solid;
+        border: ohma.$colors-surface-base 3px solid;
         border-radius: ohma.$rounding;
         min-height: 100px;
 
-        padding: 2*ohma.$gap;
+        padding: calc(2 * #{ohma.$gap});
         &.paddingBottom {
             padding-bottom: 60px;
         }
diff --git a/src/app/_components/Cms/ArticleSection/ArticleSection.module.scss b/src/app/_components/Cms/ArticleSection/ArticleSection.module.scss
index a7e9a6673..bf24b5885 100644
--- a/src/app/_components/Cms/ArticleSection/ArticleSection.module.scss
+++ b/src/app/_components/Cms/ArticleSection/ArticleSection.module.scss
@@ -1,12 +1,16 @@
 @use '@/styles/ohma';
 
+// Height for the image when .content is stacked into a column (see the
+// mobile media query) - there's no sibling row height to match there.
+$mobile-image-height: min(300px, 40vh);
+
 .ArticleSection {
     isolation: isolate;
     display: grid;
     .content {
         display: flex;
         flex-flow: row wrap;
-        gap: 2*ohma.$gap;
+        gap: calc(2 * #{ohma.$gap});
         > *:first-child {
             z-index: 2; //Necessary for the remover confirmation to be on top of the thing on right
         }
@@ -30,22 +34,52 @@
         > .image {
             position: relative;
             max-width: 100%;
+            // .image is a flex item of .content (default align-items: stretch), so it's
+            // already as tall as the paragraph column - everything below pins to that box via
+            // absolute positioning (rather than a chain of percentage heights through
+            // cmsImageWithControls/CmsImage's display:table) since a plain height:100% chain
+            // through that table made the whole row balloon to an enormous height instead.
             //CMS-Image
             > .cmsImageWithControls {
-                position: relative;
+                position: absolute;
+                inset: 0;
                 display: flex;
                 overflow: hidden;
                 >*:first-child {
-                    border-radius: ohma.$rounding;
-                    overflow: hidden;
+                    position: absolute;
+                    inset: 0;
+                    // display:table (CmsImage's own display) shrink-wraps to its content's width
+                    // by default instead of stretching to fill inset:0 - it has no in-flow
+                    // content left to shrink-wrap to once its own children are pulled out below,
+                    // so it needs an explicit size instead of relying on inset alone.
                     width: 100%;
                     height: 100%;
+                    border-radius: ohma.$rounding;
+                    overflow: hidden;
                     max-width: 90vw;
                     > * {
                         min-width: 100%;
                         max-width: 83vw;
                     }
-                }                
+                    // CmsImage's own wrapper divs (CmsImage/StandardImage/Image) size themselves
+                    // off the image's intrinsic width rather than off this container - pin every
+                    // wrapper div to fill it instead, at whatever nesting depth (same fix as
+                    // Article.module.scss's coverImage, but via inset since this box's own size
+                    // already comes from inset rather than a percentage).
+                    div {
+                        position: absolute;
+                        inset: 0;
+                        width: 100%;
+                        height: 100%;
+                    }
+                    img {
+                        position: absolute;
+                        inset: 0;
+                        width: 100%;
+                        height: 100%;
+                        object-fit: cover;
+                    }
+                }
                 > .moveControls {
                     position: absolute;
                     top: 0;
@@ -55,7 +89,7 @@
                     transform: translate(0, 100%);
                 }
             }
-            
+
         }
         .image, .link, .paragraph {
             position: relative;
@@ -87,7 +121,9 @@
             > .image {
                 order: 2;
                 border-radius: ohma.$rounding;
-                max-height: 100%;
+                // .cmsImageWithControls is absolutely positioned (see above), so .image no
+                // longer has in-flow content to size itself from here - it needs its own height.
+                height: $mobile-image-height;
                 > .cmsImageWithControls > .moveControls {
                     display: none;
                 }
diff --git a/src/app/_components/Cms/ArticleSection/ArticleSection.tsx b/src/app/_components/Cms/ArticleSection/ArticleSection.tsx
index f3577cac3..4b6757a1d 100644
--- a/src/app/_components/Cms/ArticleSection/ArticleSection.tsx
+++ b/src/app/_components/Cms/ArticleSection/ArticleSection.tsx
@@ -40,7 +40,10 @@ export default function ArticleSection({
     const { cmsParagraph, cmsImage, cmsLink } = articleSection
 
     const cmsImageContent = (
-        <span className={styles.image}>
+        // cmsImageWithControls fills this box via absolute positioning (see the module scss),
+        // so it no longer contributes in-flow content .image could size its own width from -
+        // give it the configured image width explicitly instead.
+        <span className={styles.image} style={{ width: articleSection.imageSize }}>
             {cmsImage && <>
                 <span className={styles.cmsImageWithControls}>
                     <CmsImage
diff --git a/src/app/_components/Cms/ArticleSection/ImageControls.module.scss b/src/app/_components/Cms/ArticleSection/ImageControls.module.scss
index 88e7f7eb7..b7d1ed5ce 100644
--- a/src/app/_components/Cms/ArticleSection/ImageControls.module.scss
+++ b/src/app/_components/Cms/ArticleSection/ImageControls.module.scss
@@ -7,7 +7,7 @@
         width: 30%;
         height: 100%;
         top: -50%;
-        background-color: ohma.$colors-gray-800;
+        background-color: ohma.$colors-surface-raised;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -21,10 +21,10 @@
             translate: 10px 0;
         }
         &:hover {
-            background-color: ohma.$colors-gray-700;
+            background-color: ohma.$colors-surface-hover;
             cursor: pointer;
             svg {
-                color: ohma.$colors-primary;
+                color: ohma.$colors-accent-blue;
             }
         }
     }
@@ -40,7 +40,7 @@
     > .adjustSize {
         position: absolute;
         top: -100%;
-        background-color: ohma.$colors-gray-800;
+        background-color: ohma.$colors-surface-raised;
         padding: .5em;
 
         &.placeLeft {
@@ -62,7 +62,7 @@
             &:hover:not(.disabled) {
                 cursor: pointer;
                 svg {
-                    color: ohma.$colors-primary;
+                    color: ohma.$colors-accent-blue;
                 }
             }
             background-color: transparent;
@@ -70,7 +70,7 @@
             width: 25px;
             height: 25px;
             &:first-child {
-                margin-right: 2*ohma.$gap;
+                margin-right: calc(2 * #{ohma.$gap});
             }
             svg {
                 width: 100%;
diff --git a/src/app/_components/Cms/ArticleSection/RemovePart.module.scss b/src/app/_components/Cms/ArticleSection/RemovePart.module.scss
index 3725ddeb8..14324598e 100644
--- a/src/app/_components/Cms/ArticleSection/RemovePart.module.scss
+++ b/src/app/_components/Cms/ArticleSection/RemovePart.module.scss
@@ -19,13 +19,13 @@
         }
     }
     .confirmation {
-        box-shadow: 0 0 10px 0 ohma.$colors-black;
+        box-shadow: 0 0 10px 0 ohma.$colors-boxShadow;
         position: absolute;
-        top: 100%; 
-        left: 50%; 
-        transform: translateX(-50%); 
-        width: 200px; 
-        background-color: ohma.$colors-white;
+        top: 100%;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 200px;
+        background-color: ohma.$colors-surface-raised;
         padding-bottom: 0;
         display: grid;
         place-items: center;
diff --git a/src/app/_components/Cms/CmsImage/ChangeImage.module.scss b/src/app/_components/Cms/CmsImage/ChangeImage.module.scss
index 6263d4c25..95a80c833 100644
--- a/src/app/_components/Cms/CmsImage/ChangeImage.module.scss
+++ b/src/app/_components/Cms/CmsImage/ChangeImage.module.scss
@@ -24,7 +24,7 @@ $currentImageSize: min(200px, 24vh);
         img {
             width: 100% !important;
             max-height: 100%;
-            object-fit: contain;
+            object-fit: cover;
             @include ohma.round;
             padding: 0;
             overflow: hidden;
diff --git a/src/app/_components/Cms/CmsImage/ChangeImage.tsx b/src/app/_components/Cms/CmsImage/ChangeImage.tsx
index 94a3ebe8b..869585406 100644
--- a/src/app/_components/Cms/CmsImage/ChangeImage.tsx
+++ b/src/app/_components/Cms/CmsImage/ChangeImage.tsx
@@ -2,26 +2,29 @@
 import styles from './ChangeImage.module.scss'
 import ChangeImageForm from './ChangeImageForm'
 import Image from '@/components/Image/Image'
-import { ImageSelectionContext } from '@/contexts/ImageSelection'
 import Form from '@/components/Form/Form'
 import { configureAction } from '@/services/configureAction'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faTurnUp } from '@fortawesome/free-solid-svg-icons'
-import React, { useContext, useEffect, useEffectEvent, useState } from 'react'
+import React, { useEffect, useEffectEvent, useState } from 'react'
 import type { ImageSize, Image as ImageT } from '@/prisma-generated-pn-types'
 import type { UpdateCmsImageAction } from '@/cms/images/types'
 
 type PropTypes = {
-    currentImage: ImageT,
+    currentImage: ImageT | null,
+    selectedImage: ImageT | null,
     cmsImageId: number,
     currentImageSize: ImageSize,
     updateCmsImageAction: UpdateCmsImageAction
 }
 
-export default function ChangeImage({ currentImage, cmsImageId, currentImageSize, updateCmsImageAction }: PropTypes) {
-    const selectedContext = useContext(ImageSelectionContext)
-    if (!selectedContext) throw new Error('ImageSelectionContext required to use ChangeImage')
-
+export default function ChangeImage({
+    currentImage,
+    selectedImage,
+    cmsImageId,
+    currentImageSize,
+    updateCmsImageAction,
+}: PropTypes) {
     //What is the next option in quality. The image always cycles up.
     const [changeToSize, setChangeToSize] = useState<ImageSize>(currentImageSize)
 
@@ -46,47 +49,64 @@ export default function ChangeImage({ currentImage, cmsImageId, currentImageSize
         handleChangeSize()
     }, [currentImageSize])
 
+    // A selection only counts as "new" if it differs from the current image - or there is no
+    // current image yet, in which case this is the user's first choice for this slot.
+    const hasNewSelection = selectedImage !== null && selectedImage.id !== currentImage?.id
+    const displayImage = selectedImage ?? currentImage
+
+    const renderSubmitControls = () => {
+        if (hasNewSelection && selectedImage) {
+            return (
+                <ChangeImageForm
+                    cmsImageId={cmsImageId}
+                    selectedImage={selectedImage}
+                    updateCmsImageAction={updateCmsImageAction}
+                />
+            )
+        }
+        if (!currentImage) {
+            return <p>Velg et bilde for å legge det til</p>
+        }
+        return (
+            <div className={styles.resolution}>
+                <p>Resolution: {currentImageSize.toLowerCase()}</p>
+                <Form
+                    action={
+                        configureAction(
+                            updateCmsImageAction,
+                            { params: { cmsImageId } }
+                        ).bind(null, { data: { imageSize: changeToSize } })
+                    }
+                    submitText={`change to ${changeToSize.toLocaleLowerCase()}`}
+                    refreshOnSuccess
+                    submitColor="primary"
+                />
+            </div>
+        )
+    }
+
     return (
         <div className={styles.ChangeImage}>
             {
-                selectedContext.selectedImage && selectedContext.selectedImage.id !== currentImage.id ? (
+                currentImage && selectedImage && hasNewSelection ? (
                     <div className={styles.currentAndSelected}>
                         <div className={styles.imageClip}>
                             <Image width={200} image={currentImage} />
                         </div>
                         <div className={styles.imageClip}>
-                            <Image width={200} image={selectedContext.selectedImage} />
+                            <Image width={200} image={selectedImage} />
                         </div>
                         <FontAwesomeIcon className={styles.arrow1} icon={faTurnUp} />
                         <FontAwesomeIcon className={styles.arrow2} icon={faTurnUp} />
                     </div>
                 ) : (
                     <div className={`${styles.onlyCurrent} ${styles.imageClip}`}>
-                        <Image width={200} image={currentImage} />
-                    </div>
-                )
-            }
-            <i>image name: {currentImage.name}</i>
-            {
-                selectedContext.selectedImage && selectedContext.selectedImage.id !== currentImage.id ? (
-                    <ChangeImageForm cmsImageId={cmsImageId} updateCmsImageAction={updateCmsImageAction} />
-                ) : (
-                    <div className={styles.resolution}>
-                        <p>Resolution: {currentImageSize.toLowerCase()}</p>
-                        <Form
-                            action={
-                                configureAction(
-                                    updateCmsImageAction,
-                                    { params: { cmsImageId } }
-                                ).bind(null, { data: { imageSize: changeToSize } })
-                            }
-                            submitText={`change to ${changeToSize.toLocaleLowerCase()}`}
-                            refreshOnSuccess
-                            submitColor="primary"
-                        />
+                        {displayImage ? <Image width={200} image={displayImage} /> : <p>Ingen bilde valgt enda</p>}
                     </div>
                 )
             }
+            <i>{displayImage ? `image name: ${displayImage.name}` : 'ingen bilde valgt enda'}</i>
+            {renderSubmitControls()}
         </div>
     )
 }
diff --git a/src/app/_components/Cms/CmsImage/ChangeImageForm.tsx b/src/app/_components/Cms/CmsImage/ChangeImageForm.tsx
index 43b4cde89..4702d4ca8 100644
--- a/src/app/_components/Cms/CmsImage/ChangeImageForm.tsx
+++ b/src/app/_components/Cms/CmsImage/ChangeImageForm.tsx
@@ -1,21 +1,17 @@
 'use client'
 import Form from '@/components/Form/Form'
-import { ImageSelectionContext } from '@/contexts/ImageSelection'
 import { configureAction } from '@/services/configureAction'
-import { useContext } from 'react'
+import type { Image as ImageT } from '@/prisma-generated-pn-types'
 import type { UpdateCmsImageAction } from '@/cms/images/types'
 
 type PropTypes = {
     cmsImageId: number
+    selectedImage: ImageT
     className?: string
     updateCmsImageAction: UpdateCmsImageAction
 }
 
-export default function ChangeImageForm({ cmsImageId, className, updateCmsImageAction }: PropTypes) {
-    const selection = useContext(ImageSelectionContext)
-
-    if (!selection?.selectedImage) throw new Error('ImageSelectionContext required to use ChangeImage')
-
+export default function ChangeImageForm({ cmsImageId, selectedImage, className, updateCmsImageAction }: PropTypes) {
     return (
         <Form
             className={className}
@@ -24,7 +20,7 @@ export default function ChangeImageForm({ cmsImageId, className, updateCmsImageA
                 configureAction(
                     updateCmsImageAction,
                     { params: { cmsImageId } }
-                ).bind(null, { data: { imageId: selection?.selectedImage?.id } })
+                ).bind(null, { data: { imageId: selectedImage.id } })
             }
             submitText="change"
             refreshOnSuccess
diff --git a/src/app/_components/Cms/CmsImage/CmsImage.tsx b/src/app/_components/Cms/CmsImage/CmsImage.tsx
index 884f5c0c9..29a874bfa 100644
--- a/src/app/_components/Cms/CmsImage/CmsImage.tsx
+++ b/src/app/_components/Cms/CmsImage/CmsImage.tsx
@@ -1,11 +1,11 @@
 import CmsImageEditor from './CmsImageEditor'
 import styles from './CmsImage.module.scss'
-import Image, { SrcImage } from '@/components/Image/Image'
-import { readSpecialImageAction } from '@/services/images/actions'
-import React from 'react'
+import Image from '@/components/Image/Image'
+import StandardImageClient from '@/components/Image/StandardImageClient'
 import type { ExpandedCmsImage, UpdateCmsImageAction } from '@/cms/images/types'
 import type { PropTypes as ImagePropTypes } from '@/components/Image/Image'
 import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
+import type React from 'react'
 
 export type PropTypes = Omit<
     ImagePropTypes, 'className' | 'imageSize' | 'smallSize' | 'largeSize' | 'image' | 'children'
@@ -19,18 +19,16 @@ export type PropTypes = Omit<
     disableEditor?: boolean
 }
 
-export const fallbackImage = '/images/fallback.jpg'
-
 /**
- * WARNING: This component only works on the server
- * A function to display a cms image with image relation.
- * If the cms image does not have a image it will use the default image
- * By calling on special image DEFAULT_IMAGE
+ * A function to display a cms image with image relation. If the cms image has no image, the
+ * DEFAULT_IMAGE standard image is displayed in its place instead. The editor is shown regardless -
+ * CmsImageEditor accepts a null image, treating that as the user choosing an image for the first
+ * time.
  * @param cmsImage - the cms image to display with image relation
  * @param children - the children to display besides image
  * @returns
  */
-export default async function CmsImage({
+export default function CmsImage({
     cmsImage,
     updateCmsImageAction,
     canEdit,
@@ -40,22 +38,19 @@ export default async function CmsImage({
     disableEditor = false,
     ...props
 }: PropTypes) {
-    let image = cmsImage.image
-    if (!image) {
-        const defaultRes = await readSpecialImageAction({ params: { special: 'DEFAULT_IMAGE' } })
-        if (!defaultRes.success) return <SrcImage src={fallbackImage} {...props}/>
-        image = defaultRes.data
-    }
-
     return (
         <div className={`${styles.CmsImage} ${className}`}>
             {!disableEditor && <CmsImageEditor
-                cmsImage={{ ...cmsImage, image }}
+                cmsImage={cmsImage}
                 updateCmsImageAction={updateCmsImageAction}
                 canEdit={canEdit}
             />}
-            <Image className={classNameImage} imageSize={cmsImage.imageSize} image={image} {...props}/>
             <div className={styles.children}>{children}</div>
+            {cmsImage.image ? (
+                <Image className={classNameImage} imageSize={cmsImage.imageSize} image={cmsImage.image} {...props}/>
+            ) : (
+                <StandardImageClient standardImage="DEFAULT_IMAGE" className={classNameImage} {...props}/>
+            )}
         </div>
     )
 }
diff --git a/src/app/_components/Cms/CmsImage/CmsImageClient.tsx b/src/app/_components/Cms/CmsImage/CmsImageClient.tsx
deleted file mode 100644
index 8ce788dc0..000000000
--- a/src/app/_components/Cms/CmsImage/CmsImageClient.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-import CmsImageEditor from './CmsImageEditor'
-import styles from './CmsImage.module.scss'
-import { fallbackImage } from './CmsImage'
-import Image, { SrcImage } from '@/components/Image/Image'
-import { readSpecialImageAction } from '@/services/images/actions'
-import { useState, useEffect } from 'react'
-import type { PropTypes } from './CmsImage'
-import type { Image as ImageT } from '@/prisma-generated-pn-types'
-
-/**
- * WARNING: This component is only meant for the client
- * A function to display a cms image with image relation.
- * If the cms image does not have a image it will use the default image
- * By calling on special image DEFAULT_IMAGE
- * @param cmsImage - the cms image to display with image relation
- * @param children - the children to display besides image
- * @returns
- */
-export default function CmsImageClient({
-    cmsImage,
-    updateCmsImageAction,
-    canEdit,
-    children,
-    className = '',
-    classNameImage,
-    disableEditor = false,
-    ...props
-}: PropTypes) {
-    const [image, setCmsImage] = useState<ImageT | null>(cmsImage.image || null)
-    const [fallback, setFallback] = useState(false)
-
-    useEffect(() => {
-        if (image) return
-        readSpecialImageAction({ params: { special: 'DEFAULT_IMAGE' } }).then(res => {
-            if (!res.success) return setFallback(true)
-            return setCmsImage(res.data)
-        })
-    }, [readSpecialImageAction])
-
-    return (
-        <div className={`${styles.CmsImage} ${className}`}>
-            {(image && !disableEditor) && <CmsImageEditor
-                canEdit={canEdit}
-                updateCmsImageAction={updateCmsImageAction}
-                cmsImage={{ ...cmsImage, image }}
-            />}
-            <div className={styles.children}>{children}</div>
-            {image &&
-                <Image
-                    className={classNameImage}
-                    imageSize={cmsImage.imageSize}
-                    image={image}
-                    {...props}
-                />
-            }
-            {fallback && <SrcImage src={fallbackImage} {...props}/>}
-        </div>
-    )
-}
diff --git a/src/app/_components/Cms/CmsImage/CmsImageEditor.module.scss b/src/app/_components/Cms/CmsImage/CmsImageEditor.module.scss
index 6ed79d689..6f1d2b59c 100644
--- a/src/app/_components/Cms/CmsImage/CmsImageEditor.module.scss
+++ b/src/app/_components/Cms/CmsImage/CmsImageEditor.module.scss
@@ -24,7 +24,7 @@ $collectionSize: calc(14vmin + 70px);
     .linkToImages {
         position: absolute;
         width: 10em;
-        @include ohma.btn(ohma.$colors-primary);
+        @include ohma.btn(ohma.$colors-accent-blue);
         @include ohma.screenLg {
             top: -2%;
             right: -2%;
@@ -57,7 +57,7 @@ $collectionSize: calc(14vmin + 70px);
     > .selectImage {
         grid-column: 2 / 3;
         grid-row: 1 / 2;
-        background-color: ohma.$colors-secondary;
+        background-color: ohma.$colors-surface-base;
         overflow: scroll;
         max-width: 100%;
         width: 100%;
@@ -75,25 +75,48 @@ $collectionSize: calc(14vmin + 70px);
         grid-row: 2 / 3;
         @include ohma.layer();
         display: flex;
+        flex-direction: column;
         max-width: 100%;
-        overflow-x: scroll;
-        min-height: calc($collectionSize + 5vmin);
-        align-items: center;
-        padding: 2*ohma.$gap;
+        padding: calc(2 * #{ohma.$gap});
         border-radius: #{ohma.$rounding};
 
+        > .collectionNote {
+            display: flex;
+            align-items: flex-start;
+            gap: ohma.$gap;
+            margin-bottom: ohma.$gap;
+            max-width: 90ch;
+            font-size: ohma.$fonts-s;
+            color: ohma.$colors-text-muted;
+            > svg {
+                margin-top: 0.25em;
+                flex-shrink: 0;
+            }
+        }
+
+        > .collections {
+            display: flex;
+            max-width: 100%;
+            overflow-x: scroll;
+            min-height: calc($collectionSize + 5vmin);
+            align-items: center;
+        }
+
         .collection {
             position: relative;
+            flex-shrink: 0;
             margin: 0 .2em;
+            width: $collectionSize;
+            height: $collectionSize;
             .collectionCard {
-                width: $collectionSize;
-                height: $collectionSize;
+                width: 100%;
+                height: 100%;
                 margin: 0;
                 z-index: 1;
             }
             .selector {
-                width: $collectionSize;
-                height: $collectionSize;
+                width: 100%;
+                height: 100%;
                 z-index: 2;
                 position: absolute;
                 background-color: transparent;
@@ -112,17 +135,17 @@ $collectionSize: calc(14vmin + 70px);
             &.selected {
                 transform: scale(1.1);
                 z-index: 3;
-                border: 5px solid ohma.$colors-primary;
+                border: 5px solid ohma.$colors-accent-blue;
                 border-radius: 1.25em;
                 .collectionCard img {
                     scale: 1.2;
                 }
             }
         }
-        > *:last-child:not(.collection) {
+        > .collections > *:last-child:not(.collection) {
             min-width: $collectionSize;
             height: $collectionSize;
-            border: ohma.$colors-black 1px solid;
+            border: ohma.$colors-surface-subtle 1px solid;
             display: flex;
             position: relative;
             @include ohma.round;
diff --git a/src/app/_components/Cms/CmsImage/CmsImageEditor.tsx b/src/app/_components/Cms/CmsImage/CmsImageEditor.tsx
index 07ef86827..1906e813c 100644
--- a/src/app/_components/Cms/CmsImage/CmsImageEditor.tsx
+++ b/src/app/_components/Cms/CmsImage/CmsImageEditor.tsx
@@ -6,39 +6,108 @@ import EditOverlay from '@/cms/EditOverlay'
 import PopUp from '@/components/PopUp/PopUp'
 import EndlessScroll from '@/components/PagingWrappers/EndlessScroll'
 import CollectionCard from '@/components/Image/Collection/CollectionCard'
-import ImageList from '@/components/Image/ImageList/ImageList'
-import { ImageCollectionPagingProvider, ImageCollectionPagingContext } from '@/contexts/paging/ImageCollectionPaging'
+import ImagePanel from '@/components/Image/ImagePanel/ImagePanel'
+import {
+    DynamicImageCollectionPagingProvider,
+    DynamicImageCollectionPagingContext
+} from '@/contexts/paging/DynamicImageCollectionPaging'
 import useEditMode from '@/hooks/useEditMode'
-import { ImagePagingProvider } from '@/contexts/paging/ImagePaging'
 import PopUpProvider from '@/contexts/PopUp'
-import ImageSelectionProvider from '@/contexts/ImageSelection'
-import { useState } from 'react'
+import { useSpecialCollections } from '@/contexts/ClientData'
+import { specialImagePanels } from '@/services/images/specialPanels/constants'
+import { readImagesPageInDynamicCollectionAction } from '@/services/images/dynamic/actions'
+import { useMemo, useState } from 'react'
 import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faInfo } from '@fortawesome/free-solid-svg-icons'
+import type { ReadPageOfImagesInCollectionAction } from '@/components/Image/ImagePanel/ImagePanel'
+import type { ExpandedImageCollection } from '@/services/images/subservice/types'
 import type { CmsImage, Image as ImageT } from '@/prisma-generated-pn-types'
 import type { UpdateCmsImageAction } from '@/cms/images/types'
 import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
 
+const collectionPagingDetails = { showOnlyCollectionsSessionAdministrates: true } as const
+const imagePageSize = 30
+
 type PropTypes = {
     cmsImage: CmsImage & {
-        image: ImageT
+        image: ImageT | null
     },
     updateCmsImageAction: UpdateCmsImageAction
     canEdit: AuthResultTypeAny
 }
 
 /**
- * A component to edit a cms image
+ * A component to edit a cms image. If cmsImage.image is null the user is choosing an image for
+ * the slot for the first time - no collection is pre-selected until they pick one.
  * @param cmsImage - the cms image to edit
  * @returns
  */
 export default function CmsImageEditor({ cmsImage, updateCmsImageAction, canEdit }: PropTypes) {
     const editable = useEditMode({ authResult: canEdit })
-    const [currentCollectionId, setCurrentCollectionId] = useState<number>(cmsImage.image.collectionId)
+    const [currentCollectionId, setCurrentCollectionId] = useState<number | null>(
+        cmsImage.image?.collectionId ?? null
+    )
+    const [selectedImage, setSelectedImage] = useState<ImageT | null>(cmsImage.image)
+
+    const specialCollectionsResult = useSpecialCollections()
+
+    // The pager for the chosen collection, one stable identity per collection - the panel resets
+    // and refetches when it changes. Special collections cannot be paged through the dynamic
+    // action (it refuses them by ownership), so ids matching a special collection get that
+    // service's own pager instead. Until the special collections have loaded such an id would
+    // briefly resolve to the dynamic pager and error - the recompute on load corrects it.
+    const readPageOfImagesInCollectionAction = useMemo(
+        (): ReadPageOfImagesInCollectionAction<typeof imagePageSize> | null => {
+            if (currentCollectionId === null) return null
+            const specialCollections = specialCollectionsResult.status === 'success'
+                ? specialCollectionsResult.specialCollections
+                : []
+            const special = specialCollections.find(
+                collection => collection.id === currentCollectionId
+            )?.special
+            if (special) {
+                const readPageAction = specialImagePanels[special].readPageOfImagesInCollectionAction
+                return page => readPageAction({ params: { paging: { page } } })
+            }
+            return page => readImagesPageInDynamicCollectionAction({
+                params: {
+                    paging: { page },
+                    collectionId: currentCollectionId,
+                },
+            })
+        },
+        [currentCollectionId, specialCollectionsResult]
+    )
 
     const isCollectionActive = (collection: { id: number }) => (
         collection.id === currentCollectionId ? styles.selected : ''
     )
 
+    const renderCollection = (collection: ExpandedImageCollection) => (
+        <div
+            key={collection.id}
+            className={`${styles.collection} ${isCollectionActive(collection)}`}
+        >
+            <button
+                onClick={() => setCurrentCollectionId(collection.id)}
+                className={styles.selector}
+            />
+            <CollectionCard
+                className={styles.collectionCard}
+                collection={collection}
+            />
+        </div>
+    )
+
+    const renderSpecialCollections = () => {
+        if (specialCollectionsResult.status === 'loading') return <i>Laster inn...</i>
+        if (specialCollectionsResult.status === 'error') return <p>Noe gikk galt</p>
+        return specialCollectionsResult.specialCollections.map(renderCollection)
+    }
+
+    const hasNewSelection = selectedImage !== null && selectedImage.id !== cmsImage.image?.id
+
     if (!editable) return null
     return (
         <PopUp
@@ -46,78 +115,76 @@ export default function CmsImageEditor({ cmsImage, updateCmsImageAction, canEdit
             showButtonContent={<EditOverlay />}
             showButtonClass={styles.showBtn}
         >
-            <ImageSelectionProvider defaultSelectionMode={true} defaultImage={cmsImage.image}>
-                <ImagePagingProvider
-                    startPage={
-                        {
-                            pageSize: 30,
-                            page: 0,
-                        }
-                    }
-                    details={{ collectionId: currentCollectionId }}
-                    serverRenderedData={[]}
-                >
-                    <PopUpProvider>
-                        <div className={styles.CmsImageEditor}>
-                            <div className={styles.currentCmsImage}>
-                                <div className={styles.info}>
-                                    <h2>Edit image link</h2>
-                                    <div className={styles.meta}>
-                                        <p>name: {cmsImage.name}</p>
-                                        <i>id: {cmsImage.id}</i>
-                                    </div>
-                                </div>
-                                <ChangeImage
-                                    currentImageSize={cmsImage.imageSize}
-                                    currentImage={cmsImage.image}
-                                    cmsImageId={cmsImage.id}
-                                    updateCmsImageAction={updateCmsImageAction}
-                                />
+            <PopUpProvider>
+                <div className={styles.CmsImageEditor}>
+                    <div className={styles.currentCmsImage}>
+                        <div className={styles.info}>
+                            <h2>Edit image link</h2>
+                            <div className={styles.meta}>
+                                <p>name: {cmsImage.name}</p>
+                                <i>id: {cmsImage.id}</i>
                             </div>
-                            <ChangeImageForm
-                                className={styles.changeImageMobile}
-                                cmsImageId={cmsImage.id}
-                                updateCmsImageAction={updateCmsImageAction}
+                        </div>
+                        <ChangeImage
+                            currentImageSize={cmsImage.imageSize}
+                            currentImage={cmsImage.image}
+                            selectedImage={selectedImage}
+                            cmsImageId={cmsImage.id}
+                            updateCmsImageAction={updateCmsImageAction}
+                        />
+                    </div>
+                    {hasNewSelection && selectedImage && (
+                        <ChangeImageForm
+                            className={styles.changeImageMobile}
+                            cmsImageId={cmsImage.id}
+                            selectedImage={selectedImage}
+                            updateCmsImageAction={updateCmsImageAction}
+                        />
+                    )}
+                    <div className={styles.selectImage}>
+                        {readPageOfImagesInCollectionAction ? (
+                            <ImagePanel
+                                readPageOfImagesInCollectionAction={readPageOfImagesInCollectionAction}
+                                pageSize={imagePageSize}
+                                selectionActive
+                                onSelectedImageChange={setSelectedImage}
+                                defaultSelectedImage={cmsImage.image ?? undefined}
                             />
-                            <div className={styles.selectImage}>
-                                <ImageList/>
-                            </div>
-                            <div className={styles.selectCollection}>
-                                <ImageCollectionPagingProvider
-                                    startPage={{
-                                        pageSize: 12,
-                                        page: 0,
-                                    }}
-                                    details={undefined}
-                                    serverRenderedData={[]}
-                                >
-                                    <EndlessScroll
-                                        pagingContext={ImageCollectionPagingContext}
-                                        renderer={collection => (
-                                            <div
-                                                key={collection.id}
-                                                className={`${styles.collection} ${isCollectionActive(collection)}`}
-                                            >
-                                                <button
-                                                    onClick={() => setCurrentCollectionId(collection.id)}
-                                                    className={styles.selector}
-                                                />
-                                                <CollectionCard
-                                                    className={styles.collectionCard}
-                                                    collection={collection}
-                                                />
-                                            </div>
-                                        )}
-                                    />
-                                </ImageCollectionPagingProvider>
-                            </div>
-                            <Link className={styles.linkToImages} href="/images/">
-                                Go to images
-                            </Link>
+                        ) : (
+                            <p>Velg en samling for å se bildene i den</p>
+                        )}
+                    </div>
+                    <div className={styles.selectCollection}>
+                        <p className={styles.collectionNote}>
+                            <FontAwesomeIcon icon={faInfo} />
+                            <span>
+                                Du ser bare bildesamlingene du administrerer. Merk at bildet du
+                                velger blir synlig for alle som kan se siden det brukes på - også
+                                for de som ikke har tilgang til samlingen bildet ligger i.
+                            </span>
+                        </p>
+                        <div className={styles.collections}>
+                            {renderSpecialCollections()}
+                            <DynamicImageCollectionPagingProvider
+                                startPage={{
+                                    pageSize: 12,
+                                    page: 0,
+                                }}
+                                details={collectionPagingDetails}
+                                serverRenderedData={[]}
+                            >
+                                <EndlessScroll
+                                    pagingContext={DynamicImageCollectionPagingContext}
+                                    renderer={renderCollection}
+                                />
+                            </DynamicImageCollectionPagingProvider>
                         </div>
-                    </PopUpProvider>
-                </ImagePagingProvider>
-            </ImageSelectionProvider>
+                    </div>
+                    <Link className={styles.linkToImages} href="/image-collections/">
+                        Gå til bilder
+                    </Link>
+                </div>
+            </PopUpProvider>
         </PopUp>
     )
 }
diff --git a/src/app/_components/Cms/CmsImage/SpecialCmsImage.tsx b/src/app/_components/Cms/CmsImage/SpecialCmsImage.tsx
index 62c7911a3..b191827b6 100644
--- a/src/app/_components/Cms/CmsImage/SpecialCmsImage.tsx
+++ b/src/app/_components/Cms/CmsImage/SpecialCmsImage.tsx
@@ -9,7 +9,7 @@ export type PropTypes = Omit<CmsImageProps, 'cmsImage'> & {
     readSpecialCmsImageAction: ReadSpecialCmsImageAction
 }
 /**
- * WARNING: This component is only meant for the server - use SpecialCmsImageClient for the client
+ * WARNING: This component is only meant for the server
  * A component that fetches a special cms image and displays it
  * @param special - the special cms image to display
  * @returns
diff --git a/src/app/_components/Cms/CmsImage/SpecialCmsImageClient.tsx b/src/app/_components/Cms/CmsImage/SpecialCmsImageClient.tsx
deleted file mode 100644
index 17323252f..000000000
--- a/src/app/_components/Cms/CmsImage/SpecialCmsImageClient.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client'
-import CmsImageClient from './CmsImageClient'
-import useActionCall from '@/hooks/useActionCall'
-import { configureAction } from '@/services/configureAction'
-import { useCallback } from 'react'
-import type { PropTypes } from './SpecialCmsImage'
-
-/**
- * WARNING: This component is only meant for the client - use SpecialCmsImageClient for the server
- * A component that fetches a special cms image and displays it
- * @param special - the special cms image to display
- * @returns
- */
-export default function SpecialCmsImageClient({
-    special,
-    updateCmsImageAction,
-    readSpecialCmsImageAction,
-    ...props
-}: PropTypes) {
-    const action = useCallback(() => configureAction(
-        readSpecialCmsImageAction,
-        { params: { special } }
-    )(), [readSpecialCmsImageAction, special])
-    const { data: cmsImage, error } = useActionCall(action)
-    if (error) throw new Error(`No special cms image found for ${special}`)
-
-    return (
-        cmsImage && (
-            <CmsImageClient {...props} cmsImage={cmsImage} updateCmsImageAction={updateCmsImageAction} />
-        )
-    )
-}
diff --git a/src/app/_components/Cms/CmsLink/CmsLink.module.scss b/src/app/_components/Cms/CmsLink/CmsLink.module.scss
index d724571c1..8ac473ecc 100644
--- a/src/app/_components/Cms/CmsLink/CmsLink.module.scss
+++ b/src/app/_components/Cms/CmsLink/CmsLink.module.scss
@@ -6,12 +6,17 @@
     height: 30px;
     > a {
         &.primary {
-            @include ohma.borderBtn(ohma.$colors-primary);
+            @include ohma.btn(ohma.$colors-accent-blue);
             margin: 0;
         }
         &.secondary {
-            @include ohma.borderBtn(ohma.$colors-secondary);
+            @include ohma.secondaryBtn;
             margin: 0;
+
+            &:hover {
+                background: ohma.$colors-surface-hover;
+                color: ohma.$colors-text;
+            }
         }
         display: flex;
         justify-content: center;
diff --git a/src/app/_components/Cms/CmsParagraph/CmsParagraph.module.scss b/src/app/_components/Cms/CmsParagraph/CmsParagraph.module.scss
index aef6233a0..37debacad 100644
--- a/src/app/_components/Cms/CmsParagraph/CmsParagraph.module.scss
+++ b/src/app/_components/Cms/CmsParagraph/CmsParagraph.module.scss
@@ -3,7 +3,7 @@
 .CmsParagraph {
     width: 100%;
     position: relative;
-    margin-bottom: 2*ohma.$gap;
+    margin-bottom: calc(2 * #{ohma.$gap});
     > .HTMLcontent {
         width: 100%;
         * {
@@ -19,7 +19,7 @@
         a {
             color: ohma.$colors-text;
             text-decoration: none;
-            color: ohma.$colors-primary;
+            color: ohma.$colors-accent-blue;
             font-weight: ohma.$fonts-weight-l;
             &:hover {
                 text-decoration: underline;
diff --git a/src/app/_components/Cms/CmsParagraph/CmsParagraphEditor.module.scss b/src/app/_components/Cms/CmsParagraph/CmsParagraphEditor.module.scss
index ca743981d..f76d01d74 100644
--- a/src/app/_components/Cms/CmsParagraph/CmsParagraphEditor.module.scss
+++ b/src/app/_components/Cms/CmsParagraph/CmsParagraphEditor.module.scss
@@ -8,13 +8,13 @@
         width: 100%;
         font-size: ohma.$fonts-s;
         border-radius: 4px;
-        border: 1px solid ohma.$colors-primary;
+        border: 1px solid ohma.$colors-accent-blue;
         margin-top: ohma.$gap;
         &:focus {
             outline: none;
-            box-shadow: 0 0 0 2px ohma.$colors-primary;
+            box-shadow: 0 0 0 2px ohma.$colors-accent-blue;
         }
-        background-color: ohma.$colors-gray-200;
+        background-color: ohma.$colors-surface-raised;
         overflow-y: scroll;
         &.loader {
             display: flex;
diff --git a/src/app/_components/Cms/CmsParagraph/CustomEditorClasses.scss b/src/app/_components/Cms/CmsParagraph/CustomEditorClasses.scss
index ce4678d9a..fbdcdd540 100644
--- a/src/app/_components/Cms/CmsParagraph/CustomEditorClasses.scss
+++ b/src/app/_components/Cms/CmsParagraph/CustomEditorClasses.scss
@@ -15,7 +15,7 @@
         .cm-header {
             font-size: ohma.$fonts-s;
             font-weight: 200;
-            color: ohma.$colors-secondary;
+            color: ohma.$colors-surface-base;
         }
         .cm-formatting-header {
             font-weight: 900;
diff --git a/src/app/_components/Cms/EditOverlay.module.scss b/src/app/_components/Cms/EditOverlay.module.scss
index 0f0dcd133..88b40768b 100644
--- a/src/app/_components/Cms/EditOverlay.module.scss
+++ b/src/app/_components/Cms/EditOverlay.module.scss
@@ -1,7 +1,6 @@
 @use '@/styles/ohma';
 
 .EditOverlay {
-    background-color: transparent;
     border: none;
     z-index: 2;
     position: absolute;
@@ -9,11 +8,11 @@
     height: 100%;
     top: 0;
     left: 0;
-    background-color: rgba(ohma.$colors-gray-700, 0.8);
-    transition: background-color 0.2s ease-in-out;
+    background-color: ohma.$colors-surface-raised;
+    opacity: 0.9;
+    transition: background-color ohma.$transitionTime ease-in-out;
     min-height: 30px;
     .editIcon {
-        background-color: transparant;
         position: absolute;
         top: 50%;
         left: 50%;
@@ -22,15 +21,16 @@
             width: min(30px, 80%);
             height: min(30px, 80%);
             color: ohma.$colors-white;
-            transition: scale 0.2s ease-in-out;
+            transition: scale ohma.$transitionTime ease-in-out;
         }
     }
     &:hover {
-        background-color: rgba(ohma.$colors-gray-700, 0.95);
+        background-color: ohma.$colors-surface-subtle;
+        opacity: 0.9;
         .editIcon > svg {
             scale: 1.2;
             transform-origin: center center;
-            color: ohma.$colors-primary;
+            color: ohma.$colors-accent-blue;
         }
     }
 }
\ No newline at end of file
diff --git a/src/app/_components/Cms/PublicArticle/PublicArticle.tsx b/src/app/_components/Cms/PublicArticle/PublicArticle.tsx
index a9ac75005..a2b3d1f6a 100644
--- a/src/app/_components/Cms/PublicArticle/PublicArticle.tsx
+++ b/src/app/_components/Cms/PublicArticle/PublicArticle.tsx
@@ -12,7 +12,6 @@ import {
     updatePublicArticleSectionsAddPartAction,
     updatePublicArticleSectionsRemovePartAction
 } from '@/services/publicArticles/actions'
-import React from 'react'
 
 function PublicArticle(props: Omit<PropTypes, 'actions'>) {
     return (
diff --git a/src/app/_components/CommitteeCard/CommitteeCard.module.scss b/src/app/_components/CommitteeCard/CommitteeCard.module.scss
index f445b5a5e..693d12b83 100644
--- a/src/app/_components/CommitteeCard/CommitteeCard.module.scss
+++ b/src/app/_components/CommitteeCard/CommitteeCard.module.scss
@@ -1,125 +1,59 @@
 @use "@/styles/ohma";
 
-@use "sass:color";
-
-$padding: 1.5em;
-$imageHeight: 175px;
-$contentHeight: 64px;
-$height: $imageHeight + $contentHeight;
-
-$background: color-mix(in srgb, ohma.$colors-secondary, white 30%); // TODO Perhaps change
-$textBoxTransparency: 60%;
-$textColor: ohma.$colors-text;
-$textUnderlineColor: ohma.$colors-secondary;
-$textBoxBackgroundColor: ohma.$colors-white;
-
 .CommitteeCard {
     width: 100%;
-    aspect-ratio: 1/1;
-    border-radius: ohma.$cardRounding;
-    padding: 0;
-    position: relative;
-    color: inherit;
-    text-decoration: none;
-    display: block;
-    background-color: $background;
-    isolation: isolate;
-    overflow: hidden;
-    box-shadow: ohma.$colors-gray-800 0 0 10px;
-    transition-duration: 0.3s;
-
-    @include ohma.screenMobile {
-        width: 100%;
-    }
+    border-radius: ohma.$rounding;
+    background-color: ohma.$colors-surface-base;
+    @include ohma.boxShadow('');
+    display: flex;
+    flex-direction: column;
+    gap: ohma.$gap;
+    padding: ohma.$gap;
+    transition: background-color 0.3s;
 
     &:hover {
-        scale: 1.1;
-
-        @include ohma.screenMobile {
-            scale: 1;
-        }
-
-        > .image {
-            scale: 1.1;
-            transition: scale 0.3s;
-
-            @include ohma.screenMobile {
-                scale: 1;
-            }
-        }
-
-        > .content {
-            box-shadow: ohma.$colors-secondary 0 0 0;
-
-            @include ohma.screenMobile {
-
-                box-shadow: ohma.$colors-secondary 0 0 40px;
-                padding-top: $padding;
-            }
-
-            > h2 {
-                opacity: 100%;
-
-                @include ohma.screenMobile {
-                    opacity: 100%;
-                }
-            }
-        }
+        @include ohma.boxShadow('hover');
+        background-color: ohma.$colors-surface-raised;
     }
+}
+
+.mainLink {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(#{ohma.$gap} * 2);
+    color: inherit;
+    text-decoration: none;
+    text-align: left;
+}
 
-    > .image {
-        position: absolute;
-        top: 0;
-        left: 0;
+.image {
+    width: 128px;
+    height: 128px;
+    flex-shrink: 0;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    background-color: ohma.$colors-surface-hover;
+    padding: ohma.$gap;
+    display: grid;
+    place-items: center;
+
+    > * {
         width: 100%;
         height: 100%;
-        z-index: 1;
-        transition: scale 0.3s;
+        object-fit: contain;
 
-        > * {
-            width: 100% !important;
-            height: 100%;
-            object-fit: cover;
-
-            img {
-                width: 100% !important;
-                height: 100%;
-                object-fit: cover;
-            }
-        }
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
+        img {
             width: 100%;
             height: 100%;
-            background: radial-gradient(ellipse at center top, transparent 40%, $background 70%, $background 100%);
-            scale: 1.5 1;
-            z-index: 0;
+            object-fit: contain;
         }
     }
+}
 
-    > .content {
-        z-index: 2;
-        position: absolute;
-        border-radius: ohma.$cardRounding;
-        @include ohma.layer();
-        width: 100%;
-        padding: $padding;
-        bottom: 0;
-        height: $contentHeight;
-        box-shadow: ohma.$colors-secondary 0 0 40px;
-        color: $textColor;
-        transition: 0.3s;
-        overflow: hidden;
-
-        > h2 {
-            opacity: 100%;
-            text-align: center;
-            text-decoration-color: $textUnderlineColor;
-            margin-bottom: ohma.$gap;
-        }
+.content {
+    > h2 {
+        font-size: ohma.$fonts-l;
+        font-weight: ohma.$fonts-weight-l;
+        color: ohma.$colors-ink-strong;
     }
 }
diff --git a/src/app/_components/CommitteeCard/CommitteeCard.tsx b/src/app/_components/CommitteeCard/CommitteeCard.tsx
index a11cd0908..c9f3acc01 100644
--- a/src/app/_components/CommitteeCard/CommitteeCard.tsx
+++ b/src/app/_components/CommitteeCard/CommitteeCard.tsx
@@ -13,18 +13,20 @@ type PropTypes = {
 
 export default function CommitteeCard({ image, title, children, href }: PropTypes) {
     return (
-        <Link href={href} className={styles.CommitteeCard}>
-            <div className={styles.image}>
-                {
-                    image && (
-                        <Image width={240} image={image} />
-                    )
-                }
-            </div>
-            <div className={styles.content}>
-                <h2>{title}</h2>
-                {children}
-            </div>
-        </Link>
+        <div className={styles.CommitteeCard}>
+            <Link href={href} className={styles.mainLink}>
+                <div className={styles.image}>
+                    {
+                        image && (
+                            <Image width={128} image={image} hideCopyRight />
+                        )
+                    }
+                </div>
+                <div className={styles.content}>
+                    <h2>{title}</h2>
+                    {children}
+                </div>
+            </Link>
+        </div>
     )
 }
diff --git a/src/app/_components/CommitteeImage/CommitteeImage.module.scss b/src/app/_components/CommitteeImage/CommitteeImage.module.scss
index 255617056..409903d62 100644
--- a/src/app/_components/CommitteeImage/CommitteeImage.module.scss
+++ b/src/app/_components/CommitteeImage/CommitteeImage.module.scss
@@ -2,14 +2,14 @@
 
 @use "sass:color";
 
-$background: color-mix(in srgb, ohma.$colors-secondary, white 15%);
+$background: color-mix(in srgb, ohma.$colors-surface-base, white 15%);
 
 .CommitteeImage {
   position: relative;
   width: 100vw;
   height: 300px;
   overflow: hidden;
-  box-shadow: ohma.$colors-secondary 0 0 75px;
+  box-shadow: ohma.$colors-surface-base 0 0 75px;
   margin-bottom: 3rem;
   @include ohma.screenMobile {
       height: 150px;
diff --git a/src/app/_components/Company/Company.module.scss b/src/app/_components/Company/Company.module.scss
index 31da55767..b6efff4d8 100644
--- a/src/app/_components/Company/Company.module.scss
+++ b/src/app/_components/Company/Company.module.scss
@@ -1,7 +1,6 @@
 @use '@/styles/ohma';
 
 .Company {
-    @include ohma.neumorphism(var(--secondary-l), var(--secondary-c), var(--secondary-h),5px,10px);
     border-radius: ohma.$cardRounding;
     padding: ohma.$gap;
     display: flex;
diff --git a/src/app/_components/Company/Company.tsx b/src/app/_components/Company/Company.tsx
index d4a793f1a..5abc3b5c5 100644
--- a/src/app/_components/Company/Company.tsx
+++ b/src/app/_components/Company/Company.tsx
@@ -3,7 +3,6 @@ import SelectCompany from './SelectCompany'
 import { SettingsHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
 import TextInput from '@/UI/TextInput'
 import CmsImage from '@/cms/CmsImage/CmsImage'
-import CmsImageClient from '@/cms/CmsImage/CmsImageClient'
 import Form from '@/components/Form/Form'
 import { companyAuth } from '@/services/career/companies/auth'
 import {
@@ -17,7 +16,6 @@ import type { SessionMaybeUser } from '@/auth/session/Session'
 
 type PropTypes = {
     company: CompanyExpanded,
-    asClient: boolean,
     session: SessionMaybeUser,
     disableEdit?: boolean,
     logoWidth?: number,
@@ -27,7 +25,6 @@ type PropTypes = {
 /**
  *
  * @param company - The company to display
- * @param asClient - If the component is rendered clinet side (uses CmsImageClient)
  * @param session - The session of the user
  * @param disableEdit - If the edit buttons should be disabled even if the user has the rights
  * @param logoWidth - The width of the logo
@@ -36,7 +33,6 @@ type PropTypes = {
  */
 export default function Company({
     company,
-    asClient,
     session,
     disableEdit = false,
     logoWidth = 300,
@@ -51,25 +47,14 @@ export default function Company({
     )
     return (
         <div className={styles.Company}>
-            {asClient ?
-                <CmsImageClient
-                    canEdit={canEditCmsImageLogo}
-                    disableEditor={disableEdit}
-                    className={squareLogo ? styles.logoSq : styles.logo}
-                    cmsImage={company.logo}
-                    width={logoWidth}
-                    updateCmsImageAction={updateCmsImageAction}
-
-                /> :
-                <CmsImage
-                    canEdit={canEditCmsImageLogo}
-                    disableEditor={disableEdit}
-                    className={squareLogo ? styles.logoSq : styles.logo}
-                    cmsImage={company.logo}
-                    width={logoWidth}
-                    updateCmsImageAction={updateCmsImageAction}
-                />
-            }
+            <CmsImage
+                canEdit={canEditCmsImageLogo}
+                disableEditor={disableEdit}
+                className={squareLogo ? styles.logoSq : styles.logo}
+                cmsImage={company.logo}
+                width={logoWidth}
+                updateCmsImageAction={updateCmsImageAction}
+            />
             <div className={styles.info}>
                 <h2>{company.name}</h2>
                 <p>{company.description}</p>
diff --git a/src/app/_components/Company/CompanyList.tsx b/src/app/_components/Company/CompanyList.tsx
index 1b560aa6d..8499c34df 100644
--- a/src/app/_components/Company/CompanyList.tsx
+++ b/src/app/_components/Company/CompanyList.tsx
@@ -21,7 +21,7 @@ export default function CompanyList({ serverRenderedData, disableEditing }: Prop
             {serverRenderedData}
             <EndlessScroll
                 pagingContext={CompanyPagingContext}
-                renderer={data => companyListRenderer({ asClient: true, session: session.session, disableEditing })(data)}
+                renderer={data => companyListRenderer({ session: session.session, disableEditing })(data)}
             />
         </div>
     )
diff --git a/src/app/_components/Company/CompanyListRenderer.tsx b/src/app/_components/Company/CompanyListRenderer.tsx
index 7096aef7b..f628f452e 100644
--- a/src/app/_components/Company/CompanyListRenderer.tsx
+++ b/src/app/_components/Company/CompanyListRenderer.tsx
@@ -4,18 +4,15 @@ import type { CompanyExpanded } from '@/services/career/companies/types'
 
 /**
  * Used to render schools server side and client side in consistent way
- * @param asClient - If the company is rendered as a client
  * @param session - The session of the user used to determine if the user is an admin of the company
  * @returns A function that takes a company and returns a Company component
  */
 export const companyListRenderer = ({
-    asClient,
     session,
     disableEditing = false
 }: {
-    asClient: boolean,
     session: SessionMaybeUser,
     disableEditing?: boolean
 // eslint-disable-next-line react/display-name
 }) => (company: CompanyExpanded) =>
-    <Company disableEdit={disableEditing} session={session} key={company.id} company={company} asClient={asClient} />
+    <Company disableEdit={disableEditing} session={session} key={company.id} company={company} />
diff --git a/src/app/_components/Company/SelectCompany.module.scss b/src/app/_components/Company/SelectCompany.module.scss
index 37c902f34..224bcd53e 100644
--- a/src/app/_components/Company/SelectCompany.module.scss
+++ b/src/app/_components/Company/SelectCompany.module.scss
@@ -13,15 +13,15 @@
     position: absolute;
     top: 0;
     right: 0;
-    background-color: ohma.$colors-gray-300;
+    background-color: ohma.$colors-surface-raised;
     width: 1.5em;
     height: 1.5em;
-    color: ohma.$colors-black;
+    color: ohma.$colors-text-inv;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
     &.selected {
-        background-color: ohma.$colors-primary;
+        background-color: ohma.$colors-accent-blue;
     }
 }
\ No newline at end of file
diff --git a/src/app/_components/EditModeSwitch/EditModeSwitch.module.scss b/src/app/_components/EditModeSwitch/EditModeSwitch.module.scss
index b14930776..fe8273f61 100644
--- a/src/app/_components/EditModeSwitch/EditModeSwitch.module.scss
+++ b/src/app/_components/EditModeSwitch/EditModeSwitch.module.scss
@@ -1,16 +1,24 @@
 @use '@/styles/ohma';
 
 .EditModeSwitch {
-    margin: ohma.$gap;
+    width: 100%;
+    height: 100%;
 
     label {
         cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 100%;
+        padding: ohma.$gap;
+        box-sizing: border-box;
 
         input {
             display: none;
 
             &:checked + .EditModeSwitchIcon {
-                color: ohma.$colors-primary;
+                color: ohma.$colors-accent-blue;
             }
         }
 
diff --git a/src/app/_components/EditableTextField/EditableTextField.module.scss b/src/app/_components/EditableTextField/EditableTextField.module.scss
index 77615a74f..744b1b0cb 100644
--- a/src/app/_components/EditableTextField/EditableTextField.module.scss
+++ b/src/app/_components/EditableTextField/EditableTextField.module.scss
@@ -11,15 +11,15 @@ $border: 1px;
         position: absolute;
         right: calc($padding / 2);
         top: calc($padding / 2);
-        color: ohma.$colors-primary;
+        color: ohma.$colors-accent-blue;
     }
     .text {
         position: relative;
         padding: $padding;
-        border: $border solid ohma.$colors-primary; // Add this line
+        border: $border solid ohma.$colors-accent-blue; // Add this line
         border-radius: ohma.$rounding;
         &:focus {
-            outline: 2px solid ohma.$colors-primary;
+            outline: 2px solid ohma.$colors-accent-blue;
         }
     }
 }
diff --git a/src/app/_components/EditableTextField/EditableTextField.tsx b/src/app/_components/EditableTextField/EditableTextField.tsx
index 755740bae..9e4430f8f 100644
--- a/src/app/_components/EditableTextField/EditableTextField.tsx
+++ b/src/app/_components/EditableTextField/EditableTextField.tsx
@@ -9,6 +9,11 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faPencil } from '@fortawesome/free-solid-svg-icons'
 import type { PropTypes as FormPropTypes } from '@/components/Form/Form'
 
+// Hoisted so useEditMode's authorizer dependency stays referentially stable across renders -
+// RequireNothing.staticFields({}).dynamicFields({}) takes no dynamic args, so there's nothing
+// to recompute per render/instance.
+const requireNothingAuthorizer = RequireNothing.staticFields({}).dynamicFields({})
+
 type PropTypes<ReturnType> = {
     props?: Omit<React.HTMLAttributes<HTMLElement>, 'children' | 'contentEditable'>
     editable: boolean,
@@ -41,7 +46,7 @@ export default function EditableTextField<ReturnType>({
     const [noChange, setNoChange] = useState(true)
     //TODO: Authorizer must be passed in....
     const canEdit = useEditMode({
-        authorizer: RequireNothing.staticFields({}).dynamicFields({})
+        authorizer: requireNothingAuthorizer
     })
     const ref = useRef<HTMLInputElement>(null)
     const submitRef = useRef<HTMLButtonElement>(null)
diff --git a/src/app/_components/Event/EventCard.module.scss b/src/app/_components/Event/EventCard.module.scss
index 59dccec45..62686e769 100644
--- a/src/app/_components/Event/EventCard.module.scss
+++ b/src/app/_components/Event/EventCard.module.scss
@@ -1,69 +1,17 @@
 @use '@/styles/ohma';
 
-.tags {
-    display: flex;
-    align-items: center;
-    list-style-type: none;
-    margin-left: ohma.$gap;
-}
-
 .EventWrapper {
-    @include ohma.layer();
-    @include ohma.boxShadow('');
-    border-radius: ohma.$cardRounding;
-    overflow: hidden;
-    text-decoration: none;
-    color: unset;
-    margin: ohma.$gap;
-}
-
-.EventWrapper:hover {
-    @include ohma.boxShadow('hover');
+    @include ohma.listRow;
 }
 
-.EventHeader {
+.tags {
     display: flex;
-    height: 50px;
-    @include ohma.layer();
-}
-
-.EventMainTime {
-    @include ohma.layer();
-    border-radius: ohma.$cardRounding 0 0 0;
-    height: 100%;
-    min-width: 180px;
-    font-size: x-large;
-    line-height: 50px - 2*ohma.$gap;
-    padding: ohma.$gap ohma.$gap ohma.$gap ohma.$gap*3;
-}
-
-.EventAttendanceBar {
-    height: 10px;
-    > div {
-        background: color-mix(in srgb, ohma.$colors-primary, black 20%);
-        height: 100%;
-    }
-}
-
-.EventImage {
-    height: 200px;
-    overflow: hidden;
+    align-items: center;
+    gap: ohma.$gap;
+    list-style-type: none;
 }
 
-.EventMain {
-    height: 150px;
-    padding: ohma.$gap;
+.registrations {
+    color: ohma.$colors-text;
+    font-weight: ohma.$fonts-weight-m;
 }
-
-.EventFooter {
-    @include ohma.layer();
-    height: 50px;
-    display: flex;
-    justify-content: space-evenly;
-    text-align: center;
-    font-weight: bold;
-    > div {
-        line-height: 50px;
-        width: 100px;
-    }
-}
\ No newline at end of file
diff --git a/src/app/_components/Event/EventCard.tsx b/src/app/_components/Event/EventCard.tsx
index 0aa952f4a..deedb3598 100644
--- a/src/app/_components/Event/EventCard.tsx
+++ b/src/app/_components/Event/EventCard.tsx
@@ -1,78 +1,59 @@
 import SmallEventTag from './SmallEventTag'
 import styles from './EventCard.module.scss'
-import CmsImage from '@/components/Cms/CmsImage/CmsImage'
-import { updateEventCmsCoverImageAction } from '@/services/events/actions'
-import { configureAction } from '@/services/configureAction'
+import Image from '@/components/Image/Image'
 import { formatVevenUri } from '@/lib/urlEncoding'
 import React from 'react'
 import Link from 'next/link'
 import type { EventExpanded } from '@/services/events/types'
-import type { ExpandedCmsImage } from '@/cms/images/types'
-import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
 
 type PropTypes = {
     event: EventExpanded
-    canEdit: AuthResultTypeAny
 }
 
-export default function EventCard({ event, canEdit }: PropTypes) {
+const months = ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des']
+
+const twoDigitHour = (date: Date) => String(date.getHours()).padStart(2, '0')
+
+export default function EventCard({ event }: PropTypes) {
     const attendanceRatio = event.places > 0 ? event.numOfRegistrations / event.places : 0
     const attendance = `${Math.max(0, Math.min(attendanceRatio, 1)) * 100}%`
-    const months = ['January', 'February', 'March', 'April', 'May', 'June',
-        'July', 'August', 'September', 'October', 'November', 'December']
     const link = `/events/${formatVevenUri(`${event.name}`, event.id)}`
-    return <Link href={ link } className={ styles.EventWrapper }>
-        <div className={ styles.EventHeader }>
-            <div className={ styles.EventMainTime }>
-                <b>{event.eventStart.getDate()}</b> - {months[event.eventStart.getMonth()]}
-            </div>
+    const from = event.takesRegistration ? event.registrationStart : event.eventStart
+    const to = event.takesRegistration ? event.registrationEnd : event.eventEnd
+
+    return <Link href={link} className={styles.EventWrapper}>
+        <div className={styles.thumb}>
+            {event.coverImage.image && (
+                <Image width={200} image={event.coverImage.image} />
+            )}
+        </div>
+
+        <div className={styles.lead}>
+            <b>{event.eventStart.getDate()}</b>
+            <span>{months[event.eventStart.getMonth()]}</span>
+        </div>
+
+        <div className={styles.main}>
+            <h2>{event.name}</h2>
             <div className={styles.tags}>
                 {event.tags.map(tag => (
-
-                    <div key={tag.id}>
-                        <SmallEventTag eventTag={tag} />
-                    </div>
+                    <SmallEventTag key={tag.id} eventTag={tag} />
                 ))}
             </div>
         </div>
 
-        <div className={styles.EventImage}>
-            {
-                <CmsImage
-                    width={500}
-                    cmsImage={event.coverImage as ExpandedCmsImage}
-                    updateCmsImageAction={configureAction(
-                        updateEventCmsCoverImageAction,
-                        { implementationParams: { eventId: event.id } }
-                    )}
-                    canEdit={canEdit}
-                />
-            }
-        </div>
-        <div className={styles.EventMain}>
-            <h2>{event.name}</h2>
-            <h4>{event.eventStart.toLocaleDateString()} - {event.eventEnd.toLocaleDateString()}</h4>
-            {/*<p>{event.description}</p>*/}
+        <div className={styles.meta}>
+            {event.location && <span>{event.location}</span>}
+            <span>{twoDigitHour(from)}–{twoDigitHour(to)}</span>
+            {event.takesRegistration && (
+                <span className={styles.registrations}>{event.numOfRegistrations} / {event.places}</span>
+            )}
         </div>
-        <div className={styles.EventAttendanceBar}>
-            {event.takesRegistration ? <>
+
+        {event.takesRegistration && (
+            <div className={styles.bar}>
                 <div style={{ width: attendance }}></div>
-            </> : <></>}
-        </div>
-        <div className={styles.EventFooter}>
-            {event.takesRegistration ? <>
-                <div>
-                    {event.numOfRegistrations} / {event.places}
-                </div>
-            </> : <></>}
-            <div>
-                {event.location}
             </div>
-            <div>
-                kl. {(event.takesRegistration ? event.registrationStart : event.eventStart).getHours()}
-                -
-                {(event.takesRegistration ? event.registrationEnd : event.eventEnd).getHours()}
-            </div>
-        </div>
+        )}
     </Link>
 }
diff --git a/src/app/_components/Event/EventTag.module.scss b/src/app/_components/Event/EventTag.module.scss
index 51d3c0bae..990ad00b8 100644
--- a/src/app/_components/Event/EventTag.module.scss
+++ b/src/app/_components/Event/EventTag.module.scss
@@ -11,8 +11,8 @@
     .description {
         padding: 1em;
         border-radius: 1em;
-        background-color: ohma.$colors-gray-400;
-        color: ohma.$colors-black;
+        background-color: ohma.$colors-surface-hover;
+        color: ohma.$colors-text;
         position: absolute;
         bottom: 0;
         left: 50%;
@@ -26,7 +26,7 @@
             transform: translate(-50%, -100%);
             border-left: 10px solid transparent;
             border-right: 10px solid transparent;
-            border-bottom: 10px solid ohma.$colors-gray-400;
+            border-bottom: 10px solid ohma.$colors-surface-hover;
             border-top: 0;
         }
     }
diff --git a/src/app/_components/Event/EventTagsAdmin.module.scss b/src/app/_components/Event/EventTagsAdmin.module.scss
index f1d8b14da..72507c0ee 100644
--- a/src/app/_components/Event/EventTagsAdmin.module.scss
+++ b/src/app/_components/Event/EventTagsAdmin.module.scss
@@ -36,7 +36,7 @@
                     &::after {
                         content: '✖';
                         font-size: 4em;
-                        color: ohma.$colors-black;
+                        color: ohma.$colors-text;
                         position: absolute;
                         left: 50%;
                         top: 50%;
@@ -55,6 +55,6 @@
         }
     }
     .update {
-        border-bottom: 3px solid ohma.$colors-gray-800;
+        border-bottom: 3px solid ohma.$colors-surface-subtle;
     }
 }
\ No newline at end of file
diff --git a/src/app/_components/Event/SmallEventTag.module.scss b/src/app/_components/Event/SmallEventTag.module.scss
index 8c05840fc..f51548444 100644
--- a/src/app/_components/Event/SmallEventTag.module.scss
+++ b/src/app/_components/Event/SmallEventTag.module.scss
@@ -8,7 +8,7 @@
     }
     p {
         position: absolute; 
-        left: 3*ohma.$gap;
+        left: calc(3 * #{ohma.$gap});
         top: 0;
         display: none;
     }
diff --git a/src/app/_components/Flair/Flair.module.scss b/src/app/_components/Flair/Flair.module.scss
new file mode 100644
index 000000000..ad087cd36
--- /dev/null
+++ b/src/app/_components/Flair/Flair.module.scss
@@ -0,0 +1,5 @@
+.Flair {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5em;
+}
diff --git a/src/app/_components/Flair/Flair.tsx b/src/app/_components/Flair/Flair.tsx
index 083eca5e6..9dd9e2080 100644
--- a/src/app/_components/Flair/Flair.tsx
+++ b/src/app/_components/Flair/Flair.tsx
@@ -1,56 +1,16 @@
-import CmsImage from '@/cms/CmsImage/CmsImage'
-import { flairAuth } from '@/services/flairs/auth'
-import { updateFlairCmsImageAction } from '@/services/flairs/actions'
-import { configureAction } from '@/services/configureAction'
-import CmsImageClient from '@/cms/CmsImage/CmsImageClient'
-import { Session, type SessionMaybeUser } from '@/auth/session/Session'
+import styles from './Flair.module.scss'
+import Image from '@/components/Image/Image'
 import type { FlairWithImage } from '@/services/flairs/types'
 
 type PropTypes = {
     flair: FlairWithImage,
     width?: number,
-    asClient: boolean,
-} & (
-        {
-            session: SessionMaybeUser,
-            disableEditor?: false
-        } | {
-            session?: SessionMaybeUser,
-            disableEditor: true,
-        }
-    )
+}
 
-/**
- * WARNING: May only be used server-side as it uses <CmsImage /> which is server-only.
- */
-export default function Flair({ flair, width = 50, session, asClient, disableEditor }: PropTypes) {
-    const maybeSession = session ? session : Session.empty()
-    if (asClient) {
-        return <CmsImageClient
-            disableEditor={disableEditor}
-            cmsImage={flair.cmsImage}
-            width={width}
-            canEdit={flairAuth.updateCmsImage.dynamicFields({}).auth(maybeSession).toJsObject()}
-            updateCmsImageAction={
-                configureAction(
-                    updateFlairCmsImageAction,
-                    { implementationParams: { flairId: flair.id } }
-                )
-            }
-        />
-    }
+export default function Flair({ flair, width = 50 }: PropTypes) {
     return (
-        <CmsImage
-            disableEditor={disableEditor}
-            cmsImage={flair.cmsImage}
-            width={width}
-            canEdit={flairAuth.updateCmsImage.dynamicFields({}).auth(maybeSession).toJsObject()}
-            updateCmsImageAction={
-                configureAction(
-                    updateFlairCmsImageAction,
-                    { implementationParams: { flairId: flair.id } }
-                )
-            }
-        />
+        <div className={styles.Flair}>
+            <Image image={flair.image} width={width} />
+        </div>
     )
 }
diff --git a/src/app/_components/Footer/Footer.module.scss b/src/app/_components/Footer/Footer.module.scss
index 13f447f97..205bc6630 100644
--- a/src/app/_components/Footer/Footer.module.scss
+++ b/src/app/_components/Footer/Footer.module.scss
@@ -4,41 +4,20 @@
     font-weight: ohma.$fonts-weight-s;
     @include ohma.layer;
     color: ohma.$colors-text;
-    display: grid;
-    padding: 10*ohma.$gap 20*ohma.$gap;
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: ohma.$rounding;
+    padding: calc(10 * #{ohma.$gap}) clamp(calc(2 * #{ohma.$gap}), 5vw, calc(20 * #{ohma.$gap}));
     > * {
+        flex: 1 1 calc(30 * #{ohma.$gap});
         p {
             margin-bottom: ohma.$gap;
             line-height: ohma.$fonts-line-height-m;
         }
-        padding: 0 5*ohma.$gap 0 2*ohma.$gap;
-        &:nth-child(1) {
+        padding: 0 calc(5 * #{ohma.$gap}) 0 calc(2 * #{ohma.$gap});
+        &:first-child {
+            flex: 2 1 calc(40 * #{ohma.$gap});
             padding-left: 0;
-            grid-area: logos;
-        }
-        &:nth-child(2) {
-            grid-area: info1;
-        }
-        &:nth-child(3) {
-            grid-area: info2;
-        }
-        &:nth-child(4) {
-            grid-area: nordic;
-        }
-    }
-    > .info {
-        > *:first-child {
-            color: ohma.$colors-primary;
-            font-weight: ohma.$fonts-weight-m;
-            font-size: ohma.$fonts-l;
-        }
-        border-left: solid 1px ohma.$colors-text-muted;
-        a {
-            text-decoration: none;
-            color: ohma.$colors-text;
-            &:hover {
-                text-decoration: underline;
-            }
         }
     }
     .pwa {
@@ -60,8 +39,36 @@
     }
 }
 
+.infoGroup {
+    flex: 2 1 calc((2 * 28 + 5) * #{ohma.$gap});
+    display: flex;
+    flex-wrap: wrap;
+    gap: calc(2 * #{ohma.$gap}) calc(5 * #{ohma.$gap});
+    padding: 0;
+}
+
+.info {
+    flex: 1 1 calc(28 * #{ohma.$gap});
+    padding-left: calc(2 * #{ohma.$gap});
+    border-left: solid 1px ohma.$colors-text-muted;
+    > *:first-child {
+        color: ohma.$colors-accent-blue;
+        font-weight: ohma.$fonts-weight-m;
+        font-size: ohma.$fonts-l;
+    }
+    a {
+        text-decoration: none;
+        color: ohma.$colors-text;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
 .sponsors {
+    flex: 1 1 calc(30 * #{ohma.$gap});
     display: flex;
+    flex-direction: column;
     justify-content: center;
     align-items: center;
     width: 100%;
@@ -75,52 +82,21 @@
     }
 }
 
-@media (min-width: 1100px) {
-    .Footer {
-        grid-template-columns: 2fr 1fr 1fr 1fr;
-        grid-template-areas: 
-            "logos info1 info2 nordic";
-    }
-    .sponsors {
-        flex-direction: column;
-    }
-}
-
-@media (min-width: ohma.$mobileBreakpoint) and (max-width: 1100px) {
-    .Footer {
-        grid-template-columns: 2fr 1fr 1fr;
-        grid-template-rows: auto auto;
-        grid-template-areas: 
-            "logos info1 info2"
-            "nordic nordic nordic"
-        ;
-    }
-    .sponsors {
-        margin-top: 2*ohma.$gap;
-    }
-}
-
 @media (max-width: ohma.$mobileBreakpoint) {
     .Footer {
-        padding: ohma.$gap 2*ohma.$gap;
-        padding-bottom: 4*ohma.$gap;
-        grid-template-rows: repeat(auto, 4);
-        grid-template-areas: 
-            "logos"
-            "info1"
-            "info2"
-            "nordic"
-        ;
-        place-items: center;
-        > .info {
-            border-left: none;
-        }
+        padding: ohma.$gap calc(2 * #{ohma.$gap}) calc(4 * #{ohma.$gap});
+        flex-direction: column;
+        align-items: center;
         > * {
+            flex: 0 1 auto;
             padding: 0;
-            margin-top: 5*ohma.$gap;
+            margin-top: calc(5 * #{ohma.$gap});
             display: flex;
             flex-direction: column;
             align-items: center;
+            &:first-child {
+                flex: 0 1 auto;
+            }
             :nth-child(1) {
                 padding-left: 0;
             }
@@ -132,8 +108,17 @@
             text-align: center;
             max-width: 400px;
         }
-        .sponsors {
-            flex-direction: column;
+    }
+    .infoGroup {
+        width: 100%;
+        gap: 0;
+    }
+    .info {
+        flex: 1 1 0;
+        border-left: none;
+        padding-left: 0;
+        &:not(:first-child) {
+            margin-top: calc(5 * #{ohma.$gap});
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/_components/Footer/Footer.tsx b/src/app/_components/Footer/Footer.tsx
index eeed59024..93c82d5c8 100644
--- a/src/app/_components/Footer/Footer.tsx
+++ b/src/app/_components/Footer/Footer.tsx
@@ -1,6 +1,7 @@
 import styles from './Footer.module.scss'
 import SocialIcons from '@/components/SocialIcons/SocialIcons'
 import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
 import Link from 'next/link'
 import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
@@ -13,12 +14,9 @@ async function Footer({ canEditSpecialCmsImage }: PropTypes) {
     return (
         <footer className={styles.Footer}>
             <div>
-                <SpecialCmsImage
-                    canEdit={canEditSpecialCmsImage}
-                    special="FOOTER_LOGO"
+                <StandardImageServer
+                    standardImage="LOGO_WHITE_TEXT"
                     width={350}
-                    readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                    updateCmsImageAction={updateSpecialCmsImageFrontpage}
                 />
                 <p>
                 Linjeforeningen for Elektronisk Systemdesign
@@ -27,7 +25,7 @@ async function Footer({ canEditSpecialCmsImage }: PropTypes) {
                 </p>
                 <p>Org. Nr. 890 384 692</p>
                 <div>
-                    {/* Uncomment when PWA an SVG
+                    {/* TODO: Uncomment when PWA an SVG
                     <SpecialCmsImage
                         canEdit={canEditSpecialCmsImage}
                         special="FOOTER_1"
@@ -42,25 +40,27 @@ async function Footer({ canEditSpecialCmsImage }: PropTypes) {
                     </div>
                 </div>
             </div>
-            <div className={styles.info}>
-                <p>Kontakt:</p>
-                <p>Bedrift: <a href="mailto:post@contactor.no">post@contactor.no</a></p>
-                <p>Teknisk: <a href="mailto:vevcom@omega.ntnu.no">vevcom@omega.ntnu.no</a></p>
-                <p>PR: <a href="mailto:blaest@omega.ntnu.no">blaest@omega.ntnu.no</a></p>
-                <p>Annet: <a href="mailto:hs@omega.ntnu.no">hs@omega.ntnu.no</a></p>
-                <p>Tlf: <a href="tel:73594211">73 59 42 11</a></p>
-            </div>
-            <div className={styles.info}>
-                <p>Adresse:</p>
-                <p>Sct.Omega Broderskab</p>
-                <p>NTNU Gløshaugen</p>
-                <p>Elektro-bygget</p>
-                <p>7491 Trondheim</p>
+            <div className={styles.infoGroup}>
+                <div className={styles.info}>
+                    <p>Kontakt:</p>
+                    <p>Bedrift: <a href="mailto:post@contactor.no">post@contactor.no</a></p>
+                    <p>Teknisk: <a href="mailto:vevcom@omega.ntnu.no">vevcom@omega.ntnu.no</a></p>
+                    <p>PR: <a href="mailto:blaest@omega.ntnu.no">blaest@omega.ntnu.no</a></p>
+                    <p>Annet: <a href="mailto:hs@omega.ntnu.no">hs@omega.ntnu.no</a></p>
+                    <p>Tlf: <a href="tel:73594211">73 59 42 11</a></p>
+                </div>
+                <div className={styles.info}>
+                    <p>Adresse:</p>
+                    <p>Sct.Omega Broderskab</p>
+                    <p>NTNU Gløshaugen</p>
+                    <p>Elektro-bygget</p>
+                    <p>7491 Trondheim</p>
+                </div>
             </div>
             <div className={styles.sponsors}>
                 <SpecialCmsImage
                     canEdit={canEditSpecialCmsImage}
-                    special="FOOTER_2"
+                    special="FOOTER_SPONSOR_1"
                     width={170}
                     readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
                     updateCmsImageAction={updateSpecialCmsImageFrontpage}
@@ -69,7 +69,7 @@ async function Footer({ canEditSpecialCmsImage }: PropTypes) {
                 </SpecialCmsImage>
                 <SpecialCmsImage
                     canEdit={canEditSpecialCmsImage}
-                    special="FOOTER_3"
+                    special="FOOTER_SPONSOR_2"
                     width={100}
                     readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
                     updateCmsImageAction={updateSpecialCmsImageFrontpage}
diff --git a/src/app/_components/Form/Form.module.scss b/src/app/_components/Form/Form.module.scss
index 898a2e00c..4d295b0a5 100644
--- a/src/app/_components/Form/Form.module.scss
+++ b/src/app/_components/Form/Form.module.scss
@@ -7,7 +7,7 @@
         margin-bottom: ohma.$gap;
     }
     .error {
-        color: ohma.$colors-red;
+        color: ohma.$colors-accent-red;
         display: flex;
         flex-direction: column; 
         min-height: 1.15em;
diff --git a/src/app/_components/HeaderItems/ArchiveLink.module.scss b/src/app/_components/HeaderItems/ArchiveLink.module.scss
new file mode 100644
index 000000000..c5640ac09
--- /dev/null
+++ b/src/app/_components/HeaderItems/ArchiveLink.module.scss
@@ -0,0 +1,39 @@
+@use '@/styles/ohma';
+
+.ArchiveLink {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(1.5 * #{ohma.$gap});
+    height: 40px;
+    padding: 0 calc(1.75 * #{ohma.$gap}) 0 calc(2.5 * #{ohma.$gap});
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    background-color: ohma.$colors-surface-hover;
+    color: ohma.$colors-ink-strong;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color ohma.$transitionTime, color ohma.$transitionTime, box-shadow 0.3s;
+
+    &:hover {
+        background-color: ohma.$colors-surface-subtle;
+        color: ohma.$colors-ink-strong;
+        text-decoration: none;
+    }
+
+    span {
+        font-size: ohma.$fonts-m;
+        font-weight: ohma.$fonts-weight-m;
+        white-space: nowrap;
+    }
+
+    svg {
+        width: 16px;
+        height: 16px;
+        color: ohma.$colors-text;
+        transition: color ohma.$transitionTime;
+    }
+
+    &:hover svg {
+        color: ohma.$colors-accent-blue;
+    }
+}
diff --git a/src/app/_components/HeaderItems/ArchiveLink.tsx b/src/app/_components/HeaderItems/ArchiveLink.tsx
new file mode 100644
index 000000000..e3823adc6
--- /dev/null
+++ b/src/app/_components/HeaderItems/ArchiveLink.tsx
@@ -0,0 +1,21 @@
+import styles from './ArchiveLink.module.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArchive } from '@fortawesome/free-solid-svg-icons'
+import Link from 'next/link'
+
+type PropTypes = {
+    href: string
+}
+
+/**
+ * A header item link to a page's archive, styled to match the pill buttons
+ * from HeaderItemPopUp (e.g. AddHeaderItemPopUp's "Ny" button).
+ */
+export default function ArchiveLink({ href }: PropTypes) {
+    return (
+        <Link href={href} className={styles.ArchiveLink}>
+            <span>Arkiv</span>
+            <FontAwesomeIcon icon={faArchive} />
+        </Link>
+    )
+}
diff --git a/src/app/_components/HeaderItems/HeaderItemPopUp.module.scss b/src/app/_components/HeaderItems/HeaderItemPopUp.module.scss
index 1a9766e6e..afde46829 100644
--- a/src/app/_components/HeaderItems/HeaderItemPopUp.module.scss
+++ b/src/app/_components/HeaderItems/HeaderItemPopUp.module.scss
@@ -1,6 +1,42 @@
 @use '@/styles/ohma';
 
-.addBtn {
-    background: transparent;
+.headerItemBtn {
+    display: grid;
+    place-items: center;
     border: none;
-}
\ No newline at end of file
+    border-radius: 50%;
+    background-color: ohma.$colors-surface-hover;
+    color: ohma.$colors-text;
+    cursor: pointer;
+    transition: background-color ohma.$transitionTime, color ohma.$transitionTime, box-shadow 0.3s;
+
+    &:hover {
+        background-color: ohma.$colors-surface-subtle;
+        color: ohma.$colors-ink-strong;
+    }
+}
+
+.pill {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(1.5 * #{ohma.$gap});
+    padding: 0 calc(1.75 * #{ohma.$gap}) 0 calc(2.5 * #{ohma.$gap});
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    color: ohma.$colors-ink-strong;
+
+    svg {
+        color: ohma.$colors-text;
+        transition: color ohma.$transitionTime;
+    }
+
+    &:hover svg {
+        color: ohma.$colors-accent-blue;
+    }
+}
+
+.label {
+    font-size: ohma.$fonts-m;
+    font-weight: ohma.$fonts-weight-m;
+    white-space: nowrap;
+}
diff --git a/src/app/_components/HeaderItems/HeaderItemPopUp.tsx b/src/app/_components/HeaderItems/HeaderItemPopUp.tsx
index 92bedd9e9..99ff12e33 100644
--- a/src/app/_components/HeaderItems/HeaderItemPopUp.tsx
+++ b/src/app/_components/HeaderItems/HeaderItemPopUp.tsx
@@ -6,26 +6,32 @@ import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-f
 import { faArchive, faCog, faPlus, faQuestionCircle, faTag, faUsers } from '@fortawesome/free-solid-svg-icons'
 import type { PropTypes as PopUpProps } from '@/components/PopUp/PopUp'
 
-type PropTypes = Omit<PopUpProps, 'showButtonContent'> & { scale?: number }
+type PropTypes = Omit<PopUpProps, 'showButtonContent'> & { scale?: number, label?: React.ReactNode }
+
+function createHeaderItemPopUp(icon: FontAwesomeIconProps['icon'], scale = 40, defaultLabel?: string) {
+    return function HeadItemPopUp({ showButtonClass, children, scale: overrideScale, label = defaultLabel, ...props }:
+                                  PropTypes) {
+        const buttonScale = overrideScale ?? scale
+        const iconScale = Math.round(buttonScale * (label ? 0.4 : 0.55))
+        const iconStyle = { width: `${iconScale}px`, height: `${iconScale}px` }
 
-function createHeaderItemPopUp(icon: FontAwesomeIconProps['icon'], scale = 40) {
-    return function HeadItemPopUp({ showButtonClass, children, scale: overrideScale, ...props }: PropTypes) {
         return <PopUp
             {...props}
             showButtonContent = {
-                <FontAwesomeIcon
-                    style={{
-                        width: `${overrideScale ?? scale}px`,
-                        height: `${overrideScale ?? scale}px`,
-                    }}
-                    icon={icon}
-                />
+                label ? (
+                    <>
+                        <span className={styles.label}>{label}</span>
+                        <FontAwesomeIcon style={iconStyle} icon={icon} />
+                    </>
+                ) : (
+                    <FontAwesomeIcon style={iconStyle} icon={icon} />
+                )
             }
             showButtonStyle={{
-                width: `${overrideScale ?? scale}px`,
-                height: `${overrideScale ?? scale}px`,
+                height: `${buttonScale}px`,
+                ...(label ? {} : { width: `${buttonScale}px` }),
             }}
-            showButtonClass={`${styles.addBtn} ${showButtonClass}`}
+            showButtonClass={`${styles.headerItemBtn} ${label ? styles.pill : ''} ${showButtonClass ?? ''}`}
         >
             { children }
         </PopUp>
@@ -37,7 +43,7 @@ function createHeaderItemPopUp(icon: FontAwesomeIconProps['icon'], scale = 40) {
  * f.ex add users or create new ombul, image, ...
  * Often a Form will be rendered as children
  */
-export const AddHeaderItemPopUp = createHeaderItemPopUp(faPlus)
+export const AddHeaderItemPopUp = createHeaderItemPopUp(faPlus, 40, 'Ny')
 
 /**
  * Component that can be used to show a help pop up for a page
@@ -59,4 +65,4 @@ export const TagHeasderItemPopUp = createHeaderItemPopUp(faTag)
 /**
  * Component that can be used to show a archive pop up for a page
  */
-export const ArchiveHeaderItemPopUp = createHeaderItemPopUp(faArchive, 35)
+export const ArchiveHeaderItemPopUp = createHeaderItemPopUp(faArchive, 40, 'Arkiv')
diff --git a/src/app/_components/Image/Collection/CollectionCard.module.scss b/src/app/_components/Image/Collection/CollectionCard.module.scss
index 0444f37b9..1516f7ea9 100644
--- a/src/app/_components/Image/Collection/CollectionCard.module.scss
+++ b/src/app/_components/Image/Collection/CollectionCard.module.scss
@@ -1,6 +1,8 @@
 @use '@/styles/ohma';
 
 .CollectionCard {
+    width: 100%;
+    height: 100%;
     margin: ohma.$gap;
     overflow: hidden;
     @include ohma.round;
@@ -12,8 +14,8 @@
         top: 0;
         right: 0;
         padding: 0.3em;
-        color: ohma.$colors-white;
-        background-color: ohma.$colors-black;
+        color: ohma.$colors-text;
+        background-color: ohma.$colors-surface-raised;
         border-radius: 0 0 0 1em;
         min-width: 30px;
         z-index: 1;
@@ -26,7 +28,7 @@
         left: 0;
         width: 100%;
         height: 100%;
-        background: radial-gradient(ellipse at center bottom, transparent 20%, ohma.$colors-secondary 70%, ohma.$colors-secondary 100%);
+        background: radial-gradient(ellipse at center bottom, transparent 20%, ohma.$colors-surface-base 70%, ohma.$colors-surface-base 100%);
         rotate: 180deg;
         scale: 1.5;
         z-index: 0;
@@ -35,7 +37,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        width: 100% !important;
+        width: 100%;
         height: 100%;
         > img {
             position: absolute;
@@ -53,12 +55,11 @@
         left: 0;
         width: 100%;
         padding: 0.3em;
-        color: ohma.$colors-black;
         text-decoration: none;
         transition: min-height 0.5s;
         padding: ohma.$gap;
         z-index: 1;
-        color: ohma.$colors-white;
+        color: ohma.$colors-text;
         i {
             margin-top: ohma.$gap;
             transition: opacity 0.5s;
@@ -69,4 +70,23 @@
     &:hover img {
         scale: 1.2;
     }
+    &.special {
+        > .specialTag {
+            position: absolute;
+            top: 0;
+            left: 0;
+            padding: 0.3em;
+            color: ohma.$colors-white;
+            background-color: ohma.$colors-accent-magenta;
+            border-radius: 0 0 1em 0;
+            z-index: 1;
+            text-align: center;
+            font-size: 0.8em;
+            letter-spacing: 0.05em;
+            text-transform: uppercase;
+        }
+        &::after {
+            background: radial-gradient(ellipse at center bottom, transparent 20%, ohma.$colors-accent-magenta 70%, ohma.$colors-accent-magenta 100%);
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/app/_components/Image/Collection/CollectionCard.tsx b/src/app/_components/Image/Collection/CollectionCard.tsx
index c0b6b6d8d..4bfc233de 100644
--- a/src/app/_components/Image/Collection/CollectionCard.tsx
+++ b/src/app/_components/Image/Collection/CollectionCard.tsx
@@ -1,23 +1,15 @@
 import styles from './CollectionCard.module.scss'
 import Image from '@/components/Image/Image'
-import Link from 'next/link'
-import type { Image as ImageT, ImageCollection } from '@/prisma-generated-pn-types'
+import type { ExpandedImageCollection } from '@/services/images/subservice/types'
 
 type PropTypes = {
-    collection: ImageCollection & {
-        coverImage: ImageT | null,
-        numberOfImages: number,
-    },
+    collection: ExpandedImageCollection,
     className?: string,
 }
 
 export default function CollectionCard({ collection, className }: PropTypes) {
     return (
-        <Link
-            href={`/images/collections/${collection.id}`}
-            className={`${styles.CollectionCard} ${className}`}
-            key={collection.id}
-        >
+        <div className={`${styles.CollectionCard} ${collection.special ? styles.special : ''} ${className ?? ''}`}>
             {
                 collection.coverImage ? (
                     <Image smallSize width={100} image={collection.coverImage} />
@@ -25,12 +17,13 @@ export default function CollectionCard({ collection, className }: PropTypes) {
                     <p>Something went wrong</p>
                 )
             }
+            {collection.special && <p className={styles.specialTag}>Spesiell</p>}
             <div className={styles.info}>
                 <h2>{collection.name}</h2>
                 <i>{collection.description}</i>
                 <p>{collection.createdAt.toUTCString().split(' ').slice(0, 4).join(' ')}</p>
             </div>
             <p className={styles.imageCount}>{collection.numberOfImages}</p>
-        </Link>
+        </div>
     )
 }
diff --git a/src/app/_components/Image/Collection/CollectionCardLink.tsx b/src/app/_components/Image/Collection/CollectionCardLink.tsx
new file mode 100644
index 000000000..bfaba1cf1
--- /dev/null
+++ b/src/app/_components/Image/Collection/CollectionCardLink.tsx
@@ -0,0 +1,27 @@
+import CollectionCard from './CollectionCard'
+import Link from 'next/link'
+import type { ExpandedImageCollection } from '@/services/images/subservice/types'
+
+type PropTypes = {
+    collection: ExpandedImageCollection,
+    className?: string,
+}
+
+function collectionHref(collection: ExpandedImageCollection): string {
+    return collection.special
+        ? `/image-collections/special/${encodeURIComponent(collection.special)}`
+        : `/image-collections/dynamic/${encodeURIComponent(collection.name)}`
+}
+
+/**
+ * A CollectionCard that navigates to the collection on click - for listing pages. CmsImageEditor
+ * does not navigate on click, so it wraps the plain CollectionCard itself instead of using this.
+ * The className, if given, sizes the link (the actual grid item) - CollectionCard fills it.
+ */
+export default function CollectionCardLink({ collection, className }: PropTypes) {
+    return (
+        <Link href={collectionHref(collection)} className={className}>
+            <CollectionCard collection={collection} />
+        </Link>
+    )
+}
diff --git a/src/app/_components/Image/Collection/ImageCollectionList.module.scss b/src/app/_components/Image/Collection/ImageCollectionList.module.scss
deleted file mode 100644
index ba41cd216..000000000
--- a/src/app/_components/Image/Collection/ImageCollectionList.module.scss
+++ /dev/null
@@ -1,107 +0,0 @@
-@use '@/styles/ohma';
-
-$collection-size: 250px;
-
-.ImageCollectionList {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-
-    //selects all collection card but not the button for loading more in Endless scroll
-    > *:not(:last-child) {
-        width: $collection-size;
-        height: $collection-size;
-        margin: ohma.$gap;
-        overflow: hidden;
-        @include ohma.round;
-        position: relative;
-        place-self: center;
-        > .imageCount {
-            position: absolute;
-            top: 0;
-            right: 0;
-            padding: 0.3em;
-            color: ohma.$colors-white;
-            background-color: ohma.$colors-black;
-            border-radius: 0 0 0 1em;
-            min-width: 30px;
-            z-index: 1;
-            text-align: center;
-        }
-        &::after {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: radial-gradient(ellipse at center bottom, transparent 20%, ohma.$colors-secondary 70%, ohma.$colors-secondary 100%);
-            rotate: 180deg;
-            scale: 1.5;
-            z-index: 0;
-        }
-        > *:first-child {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100% !important;
-            height: 100%;
-            > img {
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-                transition: scale 0.5s;
-            }
-        }
-        > .info {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            padding: 0.3em;
-            color: ohma.$colors-black;
-            text-decoration: none;
-            transition: min-height 0.5s;
-            padding: ohma.$gap;
-            z-index: 1;
-            i {
-                margin-top: ohma.$gap;
-                transition: opacity 0.5s;
-            }
-        }
-        &:hover img {
-            scale: 1.2;
-        }
-    }
-
-    //button for loading more in Endless scroll
-    > *:last-child {
-        grid-column: 1/-1;
-    }
-}
-
-@media screen and (max-width: (4 * ($collection-size + 20px))) {
-    .ImageCollectionList {
-        grid-template-columns: repeat(3, 1fr);
-    }
-}
-
-@media screen and (max-width: (3 * ($collection-size + 20px))) {
-    .ImageCollectionList {
-        grid-template-columns: repeat(2, 1fr);
-    }
-}
-
-@media screen and (max-width: (2 * ($collection-size + 20px))) {
-    .ImageCollectionList {
-        grid-template-columns: repeat(1, 1fr);
-        > *:not(:last-child) {
-            place-self: initial;
-            width: min(90vw, 350px);
-            height: min(90vw, 350px);
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/app/_components/Image/Collection/ImageCollectionList.tsx b/src/app/_components/Image/Collection/ImageCollectionList.tsx
deleted file mode 100644
index 0160f34a2..000000000
--- a/src/app/_components/Image/Collection/ImageCollectionList.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client'
-import styles from './ImageCollectionList.module.scss'
-import CollectionCard from './CollectionCard'
-import EndlessScroll from '@/components/PagingWrappers/EndlessScroll'
-import { ImageCollectionPagingContext } from '@/contexts/paging/ImageCollectionPaging'
-import React from 'react'
-
-type PropTypes = {
-    serverRendered: React.ReactNode,
-}
-
-// Note that this component may take iniitial imagecollections as props fetched on server
-/**
- * WARNING: The server rendered data should be CollectioCards to make it consistent with the endless scroll
- * @param serverRendered - Make sure to pass the server rendered collections here in the correct format
- * @returns
- */
-export default function ImageCollectionList({ serverRendered }: PropTypes) {
-    return (
-        <div className={styles.ImageCollectionList}>
-            {serverRendered} {/* Rendered on server homefully in the right way*/}
-            <EndlessScroll
-                pagingContext={ImageCollectionPagingContext}
-                renderer={
-                    (collection, i) => (
-                        <CollectionCard
-                            className={styles.collectionCard}
-                            key={i}
-                            collection={collection}
-                        />
-                    )
-                }
-            />
-        </div>
-    )
-}
diff --git a/src/app/_components/Image/Image.module.scss b/src/app/_components/Image/Image.module.scss
index 836575746..246feb3e2 100644
--- a/src/app/_components/Image/Image.module.scss
+++ b/src/app/_components/Image/Image.module.scss
@@ -6,6 +6,10 @@
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    // Set from the `--image-width` custom property (see Image.tsx) rather than an inline
+    // `width` style, so consumers can override the rendered size with an ordinary CSS rule
+    // instead of needing `!important` to beat an inline style.
+    width: var(--image-width);
 
     > img {
         margin: 0;
@@ -15,7 +19,8 @@
 
     .credit {
         position: absolute;
-        background-color: rgba(ohma.$colors-gray-300, .5);
+        background-color: ohma.$colors-surface-base;
+        opacity: 0.5;
         &.bottom {
             bottom: 0;
             left: 0;
@@ -32,14 +37,14 @@
         right: 0;
         top: 0;
         text-decoration: none;
-        color: ohma.$colors-black;
+        color: ohma.$colors-text;
         z-index: 2;
         display: flex;
         flex-direction: row;
         align-items: center;
         justify-content: space-around;
         svg {
-            color: ohma.$colors-white;
+            color: ohma.$colors-text;
             width: 20px;
             height: 20px;
             margin: .6em;
@@ -50,7 +55,8 @@
             margin-left: .5em;
         }
         &:hover {
-            background-color: rgba(ohma.$colors-gray-300, .9);
+            background-color: ohma.$colors-surface-base;
+            opacity: 0.8;
             a, p {
                 display: inline;
             }
diff --git a/src/app/_components/Image/Image.tsx b/src/app/_components/Image/Image.tsx
index 057896011..daca8d943 100644
--- a/src/app/_components/Image/Image.tsx
+++ b/src/app/_components/Image/Image.tsx
@@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCopyright } from '@fortawesome/free-solid-svg-icons'
 import type { Image, ImageSize, Image as ImageT } from '@/prisma-generated-pn-types'
 import type { ImageProps } from 'next/image'
+import type { CSSProperties } from 'react'
 
 export type ImageSizeOptions = ImageSize | 'ORIGINAL'
 
@@ -75,8 +76,10 @@ export default function Image({
         if (smallSize) url = `/store/images/${image.fsLocationSmallSize}`
         if (largeSize) url = `/store/images/${image.fsLocationLargeSize}`
     }
+    const imageWidthStyle = { '--image-width': `${width}px` } as CSSProperties
+
     return (
-        <div style={{ width: `${width}px` }} className={`${styles.Image} ${imageContainerClassName}`}>
+        <div style={imageWidthStyle} className={`${styles.Image} ${imageContainerClassName}`}>
             <img {...props}
                 width={width}
                 alt={alt || image.alt}
@@ -109,8 +112,10 @@ type SrcImageProps = Omit<PropTypes, 'image' | 'imageSize' | 'smallSize' | 'larg
  * @returns
  */
 export function SrcImage({ src, width, ...props }: SrcImageProps) {
+    const imageWidthStyle = { '--image-width': `${width}px` } as CSSProperties
+
     return (
-        <div style={{ width: `${width}px` }} className={styles.Image}>
+        <div style={imageWidthStyle} className={styles.Image}>
             <img {...props} width={width} src={src} />
         </div>
     )
diff --git a/src/app/_components/Image/ImageList/ImageDisplay.tsx b/src/app/_components/Image/ImageList/ImageDisplay.tsx
deleted file mode 100644
index 33f89694a..000000000
--- a/src/app/_components/Image/ImageList/ImageDisplay.tsx
+++ /dev/null
@@ -1,252 +0,0 @@
-'use client'
-import styles from './ImageDisplay.module.scss'
-import { SelectString } from '@/components/UI/Select'
-import PopUp from '@/components/PopUp/PopUp'
-import Image from '@/components/Image/Image'
-import useKeyPress from '@/hooks/useKeyPress'
-import Form from '@/components/Form/Form'
-import TextInput from '@/components/UI/TextInput'
-import { ImagePagingContext } from '@/contexts/paging/ImagePaging'
-import { ImageDisplayContext } from '@/contexts/ImageDisplayProvider'
-import LicenseChooser from '@/components/LicenseChooser/LicenseChooser'
-import { updateImageCollectionAction } from '@/services/images/collections/actions'
-import { destroyImageAction, updateImageAction } from '@/services/images/actions'
-import { configureAction } from '@/services/configureAction'
-import { useRouter } from 'next/navigation'
-import { faChevronRight, faChevronLeft, faX, faCog } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { useContext } from 'react'
-import Link from 'next/link'
-import type { ImageSizeOptions } from '@/components/Image/Image'
-import type { Image as ImageT } from '@/prisma-generated-pn-types'
-
-const mimeTypes: { [key: string]: string } = {
-    jpg: 'image/jpeg',
-    jpeg: 'image/jpeg',
-    png: 'image/png',
-    gif: 'image/gif',
-    bmp: 'image/bmp',
-    webp: 'image/webp',
-    avif: 'image/avif',
-    tiff: 'image/tiff',
-    svg: 'image/svg+xml',
-}
-const getCurrentType = (image: ImageT, size: ImageSizeOptions) => {
-    let src = image.fsLocationOriginal
-    switch (size) {
-        case 'SMALL':
-            src = image.fsLocationSmallSize
-            break
-        case 'MEDIUM':
-            src = image.fsLocationMediumSize
-            break
-        case 'LARGE':
-            src = image.fsLocationLargeSize
-            break
-        case 'ORIGINAL':
-            src = image.fsLocationOriginal
-            break
-        default:
-            return 'unknown'
-    }
-    const ext = src.split('.').pop()
-    if (!ext) return 'unknown'
-    return mimeTypes[ext]
-}
-
-export default function ImageDisplay() {
-    const pagingContext = useContext(ImagePagingContext)
-    const displayContext = useContext(ImageDisplayContext)
-    const canEdit = true //TODO: Auth
-
-    if (!pagingContext || !displayContext) throw new Error('No context')
-
-    const getCurrentIndex = () => pagingContext.state.data.findIndex(x => x.id === displayContext.currentImage?.id)
-
-    const goLeft = () => {
-        const currentIndex = getCurrentIndex()
-        const nextIndex = currentIndex === 0 ? pagingContext.state.data.length - 1 : currentIndex - 1
-        displayContext.setImage(pagingContext.state.data[nextIndex])
-    }
-
-    const naiveGoRight = () => {
-        const currentIndex = getCurrentIndex()
-        const nextIndex = currentIndex === pagingContext.state.data.length - 1 ? 0 : currentIndex + 1
-        displayContext.setImage(pagingContext.state.data[nextIndex])
-    }
-
-    const goRight = async () => {
-        if (!pagingContext.state.data.length) return
-        if (!displayContext.currentImage) {
-            if (pagingContext.state.data.length) displayContext.setImage(pagingContext.state.data[0])
-            return
-        }
-        if (displayContext.currentImage.id !== pagingContext.state.data[pagingContext.state.data.length - 1].id) {
-            naiveGoRight()
-            return
-        }
-        if (pagingContext.state.allLoaded) {
-            naiveGoRight()
-            return
-        }
-        const newImages = await pagingContext.loadMore()
-        if (!newImages.length) {
-            naiveGoRight()
-            return
-        }
-        displayContext.setImage(newImages[0])
-    }
-
-    useKeyPress('ArrowRight', goRight)
-    useKeyPress('ArrowLeft', goLeft)
-
-    const { refresh } = useRouter()
-
-    const reload = async () => {
-        pagingContext.refetch()
-        refresh()
-    }
-
-    const image = displayContext.currentImage
-
-    const close = () => {
-        displayContext.setImage(null)
-    }
-    useKeyPress('Escape', close)
-
-    const handleSizeChange = (size: string) => {
-        switch (size) {
-            case 'SMALL':
-                displayContext.setImageSize('SMALL')
-                break
-            case 'MEDIUM':
-                displayContext.setImageSize('MEDIUM')
-                break
-            case 'LARGE':
-                displayContext.setImageSize('LARGE')
-                break
-            case 'ORIGINAL':
-                displayContext.setImageSize('ORIGINAL')
-                break
-            default:
-                break
-        }
-    }
-
-    if (!image) return <></>
-
-    return (
-        <div className={styles.ImageDisplay}>
-            <div className={styles.selectImageSize}>
-                <SelectString
-                    defaultValue={displayContext.imageSize}
-                    value={displayContext.imageSize}
-                    onChange={handleSizeChange}
-                    name="imageSize"
-                    label="Oppløsning"
-                    options={[
-                        {
-                            label: 'Liten',
-                            value: 'SMALL'
-                        },
-                        {
-                            label: 'Middels',
-                            value: 'MEDIUM'
-                        },
-                        {
-                            label: 'Stor',
-                            value: 'LARGE'
-                        },
-                        {
-                            label: 'Original',
-                            value: 'ORIGINAL'
-                        }
-                    ]}/>
-            </div>
-            <button onClick={close} className={styles.close}>
-                <FontAwesomeIcon icon={faX}/>
-            </button>
-            <div className={styles.currentImage}>
-                <h1>{image.name}</h1>
-                <i>Alt-tekst: {image.alt}</i>
-                <i>Type: {getCurrentType(image, displayContext.imageSize)}</i>
-                <i>Kreditert: {image.credit ?? 'ingen'}</i>
-                <i>Lisens: {
-                    image.licenseLink ?
-                        <Link
-                            href={image.licenseLink}
-                            target="_blank"
-                            referrerPolicy="no-referrer"
-                        >
-                            {image.licenseName}
-                        </Link>
-                        : 'ingen'
-                }
-                </i>
-                {
-                    pagingContext.loading ? (
-                        <div className={styles.loading}></div>
-                    ) : (
-                        <Image
-                            hideCredit
-                            hideCopyRight
-                            width={200}
-                            imageSize={displayContext.imageSize}
-                            image={image}
-                        />
-                    )
-                }
-            </div>
-
-            <div className={styles.controls}>
-                <button onClick={goLeft}>
-                    <FontAwesomeIcon icon={faChevronLeft}/>
-                </button>
-                <button onClick={goRight}>
-                    <FontAwesomeIcon icon={faChevronRight}/>
-                </button>
-            </div>
-            {
-                canEdit && (
-                    <PopUp popUpKey="EditImage" showButtonClass={styles.openImageAdmin} showButtonContent={
-                        <FontAwesomeIcon icon={faCog}/>
-                    }>
-                        <div className={styles.admin}>
-                            <Form
-                                title="Rediger metadata"
-                                successCallback={reload}
-                                submitText="oppdater"
-                                action={configureAction(updateImageAction, { params: { id: image.id } })}
-                                closePopUpOnSuccess="EditImage"
-                            >
-                                <TextInput name="name" label="navn" defaultValue={image.name} />
-                                <TextInput name="alt" label="alt" defaultValue={image.alt} />
-                                <TextInput name="credit" label="kreditert" defaultValue={image.credit || ''} />
-                                <LicenseChooser defaultLicenseName={image.licenseName} />
-                            </Form>
-                            <Form
-                                className={styles.deleteImage}
-                                successCallback={reload}
-                                action={configureAction(destroyImageAction, { params: { id: image.id } })}
-                                submitText="slett"
-                                submitColor="red"
-                                confirmation={{
-                                    confirm: true,
-                                    text: 'Er du sikker på at du vil slette bildet?'
-                                }}
-                            >
-                            </Form>
-                            <Form
-                                className={styles.makeCover}
-                                refreshOnSuccess
-                                submitText="Gjør til cover"
-                                closePopUpOnSuccess="Edit"
-                                action={updateImageCollectionAction.bind(null, image.collectionId).bind(null, image.id)}
-                            />
-                        </div>
-                    </PopUp>
-                )
-            }
-        </div>
-    )
-}
diff --git a/src/app/_components/Image/ImageList/ImageList.module.scss b/src/app/_components/Image/ImageList/ImageList.module.scss
deleted file mode 100644
index 774293032..000000000
--- a/src/app/_components/Image/ImageList/ImageList.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use '@/styles/ohma';
-
-.ListImagesInCollection {
-    display: flex;
-    flex-flow: row wrap;
-    position: relative;
-    &.paddingTop {
-        padding-top: 4em;
-    }
-    .uploadImage {
-        @include ohma.btn(ohma.$colors-secondary);
-        height: 3em;
-        margin: 0;
-        max-width: 150px;
-        position: absolute;
-        top: 0;
-        left: 0;
-    }
-}
\ No newline at end of file
diff --git a/src/app/_components/Image/ImageList/ImageList.tsx b/src/app/_components/Image/ImageList/ImageList.tsx
deleted file mode 100644
index 4e71b51b9..000000000
--- a/src/app/_components/Image/ImageList/ImageList.tsx
+++ /dev/null
@@ -1,67 +0,0 @@
-'use client'
-import styles from './ImageList.module.scss'
-import ImageListImage from './ImageListImage'
-import { ImagePagingContext } from '@/contexts/paging/ImagePaging'
-import EndlessScroll from '@/components/PagingWrappers/EndlessScroll'
-import ImageUploader from '@/components/Image/ImageUploader'
-import PopUp from '@/components/PopUp/PopUp'
-import React, { useCallback, useContext } from 'react'
-import { useRouter } from 'next/navigation'
-import { v4 as uuid } from 'uuid'
-
-type PropTypes = {
-    serverRendered?: React.ReactNode,
-    withUpload?: boolean,
-}
-
-/**
- * WARNING: This component must be rendered inside a ImagePagingContextProvider
- * This is a component that renders a list of images. It uses the ImagePagingContext to fetch more images
- * The component is designed to use ImageSelectionProvider to select images as well
- * @param serverRendered - server rendered data, should be rendered before the endless scroll i.e a list
- * of ImageListImage components
- * @param disableEditing - if true, the ImageListImage components will not be able to edit the image
- * @param withUpload - if true, the ImageUploader component will be rendered to make it possible to upload images to
- * the current collection (false by default)
- * @returns
- */
-export default function ImageList({
-    serverRendered,
-    withUpload = false
-}: PropTypes) {
-    const context = useContext(ImagePagingContext)
-    const { refresh } = useRouter()
-
-    //This component must be rendered inside a ImagePagingContextProvider
-    if (!context) throw new Error('No context')
-
-    const handleUpload = useCallback(() => {
-        refresh()
-        context.refetch()
-    }, [context, refresh])
-
-    return (
-        <div className={withUpload ?
-            `${styles.ListImagesInCollection} ${styles.paddingTop}` :
-            styles.ListImagesInCollection
-        }>
-            {
-                withUpload && (
-                    <PopUp popUpKey={uuid()} showButtonClass={styles.uploadImage} showButtonContent={
-                        <>Legg til bilde</>
-                    }>
-                        <ImageUploader
-                            collectionId={context.details.collectionId}
-                            successCallback={handleUpload}
-                        />
-                    </PopUp>
-                )
-            }
-            {serverRendered} {/* Rendered on server homefully in the right way*/}
-            <EndlessScroll
-                pagingContext={ImagePagingContext}
-                renderer={image => <ImageListImage key={image.id} image={image}/>}
-            />
-        </div>
-    )
-}
diff --git a/src/app/_components/Image/ImageList/ImageListImage.tsx b/src/app/_components/Image/ImageList/ImageListImage.tsx
deleted file mode 100644
index 5653a70fa..000000000
--- a/src/app/_components/Image/ImageList/ImageListImage.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import styles from './ImageListImage.module.scss'
-import ImageSelectionButton from './ImageSelectionButton'
-import SelectImageDisplay from './SelectImageDisplay'
-import { default as ImageComponent } from '@/components/Image/Image'
-import type { Image } from '@/prisma-generated-pn-types'
-
-type PropTypes = {
-    image: Image
-}
-
-export default function ImageListImage({ image }: PropTypes) {
-    return (
-        <div className={styles.ImageListImage}>
-            <ImageComponent hideCopyRight smallSize width={200} image={image} />
-            <SelectImageDisplay image={image} />
-            <ImageSelectionButton image={image} />
-        </div>
-    )
-}
diff --git a/src/app/_components/Image/ImageList/ImageSelectionButton.module.scss b/src/app/_components/Image/ImageList/ImageSelectionButton.module.scss
deleted file mode 100644
index 24b688b35..000000000
--- a/src/app/_components/Image/ImageList/ImageSelectionButton.module.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@use '@/styles/ohma';
-
-.selectBtn {
-    width: 2em; 
-    height: 2em;
-    background-color: ohma.$colors-gray-300;
-    border-radius: 50%;
-    margin: 0.3em;
-    border: none;
-    position: relative;
-    > svg {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 80%;
-        height: 80%;
-    }
-    &:hover {
-        cursor: pointer;
-        background-color: ohma.$colors-gray-500;
-        > svg {
-            opacity: 0.5;
-        }
-    }
-    &.selected {
-        background-color: ohma.$colors-primary;
-    }
-}
\ No newline at end of file
diff --git a/src/app/_components/Image/ImageList/ImageSelectionButton.tsx b/src/app/_components/Image/ImageList/ImageSelectionButton.tsx
deleted file mode 100644
index 347290120..000000000
--- a/src/app/_components/Image/ImageList/ImageSelectionButton.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-'use client'
-import styles from './ImageSelectionButton.module.scss'
-import { ImageSelectionContext } from '@/contexts/ImageSelection'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
-import { useContext } from 'react'
-import type { Image } from '@/prisma-generated-pn-types'
-
-type PropTypes = {
-    image: Image,
-}
-
-export default function ImageSelectionButton({ image }: PropTypes) {
-    const selection = useContext(ImageSelectionContext)
-    const imageIsSelected = selection?.selectedImage?.id === image.id
-
-    return (
-        selection?.selectionMode && (
-            <div className={styles.ImageSelectionButton}>
-                <button
-                    onClick={() => selection?.setSelectedImage(imageIsSelected ? null : image)}
-                    className={`${styles.selectBtn} ${imageIsSelected ? styles.selected : ''}`}
-                >
-                    <FontAwesomeIcon icon={faCheck} />
-                </button>
-            </div>
-        )
-    )
-}
diff --git a/src/app/_components/Image/ImageList/SelectImageDisplay.tsx b/src/app/_components/Image/ImageList/SelectImageDisplay.tsx
deleted file mode 100644
index 4d076ab6c..000000000
--- a/src/app/_components/Image/ImageList/SelectImageDisplay.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-import { ImageDisplayContext } from '@/contexts/ImageDisplayProvider'
-import { ImageSelectionContext } from '@/contexts/ImageSelection'
-import { useContext } from 'react'
-import type { Image } from '@/prisma-generated-pn-types'
-
-type PropTypes = {
-    image: Image
-}
-
-/**
- * Sets a image to display in the ImageDisplayContext. If this component is not rendered in a ImageDisplayProvider,
- * it will intead use the imageSelectionContext.
- * @param image - the image to display
- * @returns
- */
-export default function SelectImageDisplay({ image }: PropTypes) {
-    const imageDisplayContext = useContext(ImageDisplayContext)
-    const imageSelectionContext = useContext(ImageSelectionContext)
-    if (!imageDisplayContext) {
-        if (!imageSelectionContext) return <></>
-        return (
-            <button onClick={() => {
-                console.log('Setting image to display')
-                imageSelectionContext.setSelectedImage(image)
-            }} />
-        )
-    }
-
-    return (
-        <button onClick={() => {
-            imageDisplayContext.setImage(image)
-        }} />
-    )
-}
diff --git a/src/app/_components/Image/ImageList/ImageDisplay.module.scss b/src/app/_components/Image/ImagePanel/ImageDisplay.module.scss
similarity index 65%
rename from src/app/_components/Image/ImageList/ImageDisplay.module.scss
rename to src/app/_components/Image/ImagePanel/ImageDisplay.module.scss
index aa72d9b2f..138a7a48d 100644
--- a/src/app/_components/Image/ImageList/ImageDisplay.module.scss
+++ b/src/app/_components/Image/ImagePanel/ImageDisplay.module.scss
@@ -9,21 +9,7 @@
     width: 95vw;
     height: 95vh;
     @include ohma.round();
-    background-color: ohma.$colors-gray-300;
-    .openImageAdmin {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        z-index: 2;
-        background-color: transparent;
-        border: none;
-        svg {
-            color: ohma.$colors-black;
-            width: 35px;
-            height: 35px;
-            margin: 1em;
-        }
-    }
+    background-color: ohma.$colors-gray-500;
 
     .selectImageSize {
         position: absolute;
@@ -38,7 +24,7 @@
     }
 
     .close {
-        background-color: ohma.$colors-red;
+        background-color: ohma.$colors-accent-red;
         width: 40px;
         height: 40px;
         border-radius: 50%;
@@ -48,7 +34,7 @@
         right: 0;
         margin: 1em;
         svg {
-            color: ohma.$colors-white;
+            color: ohma.$colors-text-inv;
         }
     }
 
@@ -59,13 +45,6 @@
         display: flex;
         flex-direction: column;
 
-        > .select {
-            position: absolute;
-            top: 0;
-            right: 0;
-            z-index: 2;
-        }
-
         > .loading {
             @include ohma.card;
             overflow: hidden;
@@ -74,17 +53,17 @@
             position: relative;
             @include ohma.loadImage;
         }
-        //loading paceholder and image-container
-        > .loading, > *:last-child { 
+        //loading placeholder and image-container
+        > .loading, > *:last-child {
             margin-top: 1em;
             position: relative;
-            width: 100% !important;
+            width: 100%;
             height: 100%;
         }
         img {
             position: absolute;
-            width: 100% !important;
-            height: 100% !important;
+            width: 100%;
+            height: 100%;
             max-width: 100%;
             max-height: 100%;
             border-radius: ohma.$rounding;
@@ -116,17 +95,3 @@
         }
     }
 }
-
-.makeCover, .deleteImage {
-    border-top: 1px solid ohma.$colors-black;
-    padding-top: 3px;
-}
-
-@keyframes rotate {
-    0% {
-        transform: translate(0) rotate(0deg);
-    }
-    100% {
-        transform: translate(20%) rotate(5deg);
-    }
-}
\ No newline at end of file
diff --git a/src/app/_components/Image/ImagePanel/ImageDisplay.tsx b/src/app/_components/Image/ImagePanel/ImageDisplay.tsx
new file mode 100644
index 000000000..944e43c2b
--- /dev/null
+++ b/src/app/_components/Image/ImagePanel/ImageDisplay.tsx
@@ -0,0 +1,151 @@
+'use client'
+import styles from './ImageDisplay.module.scss'
+import { SelectString } from '@/components/UI/Select'
+import Image from '@/components/Image/Image'
+import useKeyPress from '@/hooks/useKeyPress'
+import { faChevronRight, faChevronLeft, faX } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { useState } from 'react'
+import Link from 'next/link'
+import type { ImageSizeOptions } from '@/components/Image/Image'
+import type { Image as ImageT } from '@/prisma-generated-pn-types'
+
+const mimeTypes: { [key: string]: string } = {
+    jpg: 'image/jpeg',
+    jpeg: 'image/jpeg',
+    png: 'image/png',
+    gif: 'image/gif',
+    bmp: 'image/bmp',
+    webp: 'image/webp',
+    avif: 'image/avif',
+    tiff: 'image/tiff',
+    svg: 'image/svg+xml',
+}
+const getCurrentType = (image: ImageT, size: ImageSizeOptions) => {
+    let src = image.fsLocationOriginal
+    switch (size) {
+        case 'SMALL':
+            src = image.fsLocationSmallSize
+            break
+        case 'MEDIUM':
+            src = image.fsLocationMediumSize
+            break
+        case 'LARGE':
+            src = image.fsLocationLargeSize
+            break
+        case 'ORIGINAL':
+            src = image.fsLocationOriginal
+            break
+        default:
+            return 'unknown'
+    }
+    const ext = src.split('.').pop()
+    if (!ext) return 'unknown'
+    return mimeTypes[ext]
+}
+
+type PropTypes = {
+    image: ImageT,
+    loading: boolean,
+    onClose: () => void,
+    onNavigateLeft: () => void,
+    onNavigateRight: () => void,
+}
+
+/**
+ * The large view of the image an ImagePanel is currently displaying. A pure viewer - navigation,
+ * closing and what image to show are the panel's responsibility, and administration of the image
+ * lives outside the panel system entirely.
+ * @param image - the image to display
+ * @param loading - whether the panel is fetching (navigating right into a not-yet-loaded page)
+ * @param onClose - called when the display is closed (close button or Escape)
+ * @param onNavigateLeft - called on the left arrow (button or key)
+ * @param onNavigateRight - called on the right arrow (button or key)
+ */
+export default function ImageDisplay({ image, loading, onClose, onNavigateLeft, onNavigateRight }: PropTypes) {
+    const [imageSize, setImageSize] = useState<ImageSizeOptions>('LARGE')
+
+    useKeyPress('ArrowRight', onNavigateRight)
+    useKeyPress('ArrowLeft', onNavigateLeft)
+    useKeyPress('Escape', onClose)
+
+    const handleSizeChange = (size: string) => {
+        if (size === 'SMALL' || size === 'MEDIUM' || size === 'LARGE' || size === 'ORIGINAL') {
+            setImageSize(size)
+        }
+    }
+
+    return (
+        <div className={styles.ImageDisplay}>
+            <div className={styles.selectImageSize}>
+                <SelectString
+                    defaultValue={imageSize}
+                    value={imageSize}
+                    onChange={handleSizeChange}
+                    name="imageSize"
+                    label="Oppløsning"
+                    options={[
+                        {
+                            label: 'Liten',
+                            value: 'SMALL'
+                        },
+                        {
+                            label: 'Middels',
+                            value: 'MEDIUM'
+                        },
+                        {
+                            label: 'Stor',
+                            value: 'LARGE'
+                        },
+                        {
+                            label: 'Original',
+                            value: 'ORIGINAL'
+                        }
+                    ]}/>
+            </div>
+            <button onClick={onClose} className={styles.close}>
+                <FontAwesomeIcon icon={faX}/>
+            </button>
+            <div className={styles.currentImage}>
+                <h1>{image.name}</h1>
+                <i>Alt-tekst: {image.alt}</i>
+                <i>Type: {getCurrentType(image, imageSize)}</i>
+                <i>Kreditert: {image.credit ?? 'ingen'}</i>
+                <i>Lisens: {
+                    image.licenseLink ?
+                        <Link
+                            href={image.licenseLink}
+                            target="_blank"
+                            referrerPolicy="no-referrer"
+                        >
+                            {image.licenseName}
+                        </Link>
+                        : 'ingen'
+                }
+                </i>
+                {
+                    loading ? (
+                        <div className={styles.loading}></div>
+                    ) : (
+                        <Image
+                            hideCredit
+                            hideCopyRight
+                            width={200}
+                            imageSize={imageSize}
+                            image={image}
+                        />
+                    )
+                }
+            </div>
+
+            <div className={styles.controls}>
+                <button onClick={onNavigateLeft}>
+                    <FontAwesomeIcon icon={faChevronLeft}/>
+                </button>
+                <button onClick={onNavigateRight}>
+                    <FontAwesomeIcon icon={faChevronRight}/>
+                </button>
+            </div>
+        </div>
+    )
+}
diff --git a/src/app/_components/Image/ImagePanel/ImagePanel.module.scss b/src/app/_components/Image/ImagePanel/ImagePanel.module.scss
new file mode 100644
index 000000000..886627e4a
--- /dev/null
+++ b/src/app/_components/Image/ImagePanel/ImagePanel.module.scss
@@ -0,0 +1,15 @@
+@use '@/styles/ohma';
+
+.ImagePanel {
+    display: flex;
+    flex-flow: row wrap;
+    position: relative;
+
+    > .loadControl {
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: ohma.$gap 0;
+    }
+}
diff --git a/src/app/_components/Image/ImagePanel/ImagePanel.tsx b/src/app/_components/Image/ImagePanel/ImagePanel.tsx
new file mode 100644
index 000000000..4caeacd35
--- /dev/null
+++ b/src/app/_components/Image/ImagePanel/ImagePanel.tsx
@@ -0,0 +1,233 @@
+'use client'
+import styles from './ImagePanel.module.scss'
+import ImagePanelImage from './ImagePanelImage'
+import ImageDisplay from './ImageDisplay'
+import Button from '@/components/UI/Button'
+import { useEffect, useState } from 'react'
+import { useInView } from 'react-intersection-observer'
+import type { Page } from '@/lib/paging/types'
+import type { ActionReturn } from '@/services/actionTypes'
+import type { ErrorCode } from '@/services/error'
+import type { Image } from '@/prisma-generated-pn-types'
+
+export type ImagePanelCursor = {
+    imageId: number,
+}
+
+/**
+ * The pager the panel is built around. Dynamic collections bind their collectionId into it,
+ * special collections need nothing bound - either way the panel itself only ever sees "give me the
+ * page after this cursor".
+ *
+ * WARNING: The panel treats a new function identity as "this is a different collection" and resets
+ * itself, so the injected action must be referentially stable (module-level, or wrapped in
+ * useCallback with the collection as dependency) - an inline arrow recreated every render would
+ * reset the panel every render.
+ */
+export type ReadPageOfImagesInCollectionAction<PageSize extends number> = (
+    page: Page<PageSize, ImagePanelCursor>
+) => Promise<ActionReturn<Image[]>>
+
+type SelectionPropTypes = {
+    selectionActive: true,
+    onSelectedImageChange: (image: Image | null) => void,
+    defaultSelectedImage?: Image,
+} | {
+    selectionActive?: false,
+    onSelectedImageChange?: never,
+    defaultSelectedImage?: never,
+}
+
+type PropTypes<PageSize extends number> = {
+    readPageOfImagesInCollectionAction: ReadPageOfImagesInCollectionAction<PageSize>,
+    pageSize: PageSize,
+    withImageDisplay?: boolean,
+} & SelectionPropTypes
+
+/**
+ * The pages loaded so far, stamped with the action that loaded them. The stamp is what makes an
+ * action change safe: state loaded through another action - whether read directly or written late
+ * by a fetch that resolved after the action changed - is simply not "current" for the new action,
+ * so it is ignored and eventually overwritten instead of needing explicit invalidation.
+ */
+type PagingState<PageSize extends number> = {
+    forAction: ReadPageOfImagesInCollectionAction<PageSize>,
+    images: Image[],
+    nextPageNumber: number,
+    allLoaded: boolean,
+}
+
+/**
+ * An explicitly requested page load (as opposed to the loads the panel starts by itself for the
+ * first page and the endless scroll). advanceDisplay makes the large display move onto the first
+ * image of the new page once it arrives - the "navigate right past the last loaded image" case.
+ */
+type LoadRequest = {
+    advanceDisplay: boolean,
+}
+
+/**
+ * A self-contained panel of the images in one collection: paging (endless scroll), selection and
+ * the large image display in one component, driven entirely by the injected pager action - no
+ * contexts and no server rendered data.
+ *
+ * @param readPageOfImagesInCollectionAction - the pager to read image pages through. When its
+ * identity changes the panel treats it as a different collection: all loaded pages, errors and the
+ * open display are dropped and the first page is refetched. The selection is kept, since the
+ * selected image (e.g. the image a cms image currently links to) does not have to belong to the
+ * collection being browsed.
+ * @param pageSize - the page size the pager is called with
+ * @param withImageDisplay - if true, clicking an image opens the large ImageDisplay
+ * @param selectionActive - if true, images can be selected (checkmark button on each image)
+ * @param onSelectedImageChange - called with the new selection when the user selects/deselects
+ * @param defaultSelectedImage - the image selected before the user has made a choice
+ */
+export default function ImagePanel<const PageSize extends number>({
+    readPageOfImagesInCollectionAction,
+    pageSize,
+    withImageDisplay = false,
+    selectionActive = false,
+    onSelectedImageChange,
+    defaultSelectedImage,
+}: PropTypes<PageSize>) {
+    const [pagingState, setPagingState] = useState<PagingState<PageSize> | null>(null)
+    const [errorCode, setErrorCode] = useState<ErrorCode | null>(null)
+    const [selectedImage, setSelectedImage] = useState<Image | null>(defaultSelectedImage ?? null)
+    const [displayedImage, setDisplayedImage] = useState<Image | null>(null)
+    const [loadRequest, setLoadRequest] = useState<LoadRequest | null>(null)
+
+    // State loaded through a previous action is stale, never rendered and never built upon.
+    const currentPagingState =
+        pagingState !== null && pagingState.forAction === readPageOfImagesInCollectionAction
+            ? pagingState
+            : null
+
+    // A new action identity means a different collection - drop everything from the old one during
+    // render (before children render with stale state). The paging state needs no explicit reset
+    // since it is stamped, and the fetch effect refetches once the current state derives to null.
+    const [previousAction, setPreviousAction] = useState(() => readPageOfImagesInCollectionAction)
+    if (previousAction !== readPageOfImagesInCollectionAction) {
+        setPreviousAction(() => readPageOfImagesInCollectionAction)
+        setErrorCode(null)
+        setDisplayedImage(null)
+        setLoadRequest(null)
+    }
+
+    const [loadControlRef, loadControlInView] = useInView({ threshold: 0 })
+
+    const allLoaded = currentPagingState?.allLoaded ?? false
+
+    // Fetching is declarative: a fetch should be running exactly when there is something to load
+    // and a reason to load it. The effect below starts it and writes the result back, which either
+    // satisfies the reason or (via the scroll sentinel still being in view) chains the next page.
+    const fetchPending = errorCode === null && !allLoaded && (
+        currentPagingState === null
+        || loadControlInView
+        || loadRequest !== null
+    )
+
+    useEffect(() => {
+        if (!fetchPending) return undefined
+        let cancelled = false
+
+        const page: Page<PageSize, ImagePanelCursor> =
+            currentPagingState && currentPagingState.images.length > 0 ? {
+                pageSize,
+                page: currentPagingState.nextPageNumber,
+                cursor: { imageId: currentPagingState.images[currentPagingState.images.length - 1].id },
+            } : {
+                pageSize,
+                page: 0,
+                cursor: null,
+            }
+
+        readPageOfImagesInCollectionAction(page).then(result => {
+            if (cancelled) return
+            if (!result.success) {
+                setErrorCode(result.errorCode)
+                setLoadRequest(null)
+                return
+            }
+            const previousImages = currentPagingState?.images ?? []
+            setPagingState({
+                forAction: readPageOfImagesInCollectionAction,
+                images: [...previousImages, ...result.data],
+                nextPageNumber: (currentPagingState?.nextPageNumber ?? 0) + 1,
+                allLoaded: result.data.length < pageSize,
+            })
+            if (loadRequest?.advanceDisplay) {
+                // Move onto the new page, wrapping to the start if it turned out to be empty - but
+                // only if the display is still open.
+                const nextDisplayed = result.data[0] ?? previousImages[0] ?? null
+                setDisplayedImage(current => (current === null ? null : nextDisplayed))
+            }
+            setLoadRequest(null)
+        })
+
+        return () => {
+            cancelled = true
+        }
+    }, [fetchPending, currentPagingState, loadRequest, pageSize, readPageOfImagesInCollectionAction])
+
+    const toggleSelected = (image: Image) => {
+        const newSelected = selectedImage?.id === image.id ? null : image
+        setSelectedImage(newSelected)
+        onSelectedImageChange?.(newSelected)
+    }
+
+    const navigateLeft = () => {
+        if (!currentPagingState || !displayedImage) return
+        const currentIndex = currentPagingState.images.findIndex(image => image.id === displayedImage.id)
+        const nextIndex = currentIndex <= 0 ? currentPagingState.images.length - 1 : currentIndex - 1
+        setDisplayedImage(currentPagingState.images[nextIndex])
+    }
+
+    const navigateRight = () => {
+        if (!currentPagingState || !displayedImage) return
+        const currentIndex = currentPagingState.images.findIndex(image => image.id === displayedImage.id)
+        if (currentIndex < currentPagingState.images.length - 1) {
+            setDisplayedImage(currentPagingState.images[currentIndex + 1])
+            return
+        }
+        if (!currentPagingState.allLoaded) {
+            setLoadRequest({ advanceDisplay: true })
+            return
+        }
+        setDisplayedImage(currentPagingState.images[0])
+    }
+
+    const images = currentPagingState?.images ?? []
+
+    const renderLoadControlContent = () => {
+        if (errorCode !== null) return <p>Noe gikk galt</p>
+        if (fetchPending) return <i>{images.length > 0 ? 'Laster inn flere...' : 'Laster inn...'}</i>
+        if (allLoaded) return <i>Ingen flere å laste inn</i>
+        return <Button onClick={() => setLoadRequest({ advanceDisplay: false })}>Last inn flere</Button>
+    }
+
+    return (
+        <div className={styles.ImagePanel}>
+            {images.map(image => (
+                <ImagePanelImage
+                    key={image.id}
+                    image={image}
+                    selected={selectedImage?.id === image.id}
+                    onOpenDisplay={withImageDisplay ? () => setDisplayedImage(image) : undefined}
+                    onToggleSelect={selectionActive ? () => toggleSelected(image) : undefined}
+                />
+            ))}
+            <span ref={loadControlRef} className={styles.loadControl}>
+                {renderLoadControlContent()}
+            </span>
+            {withImageDisplay && displayedImage && (
+                <ImageDisplay
+                    image={displayedImage}
+                    loading={fetchPending}
+                    onClose={() => setDisplayedImage(null)}
+                    onNavigateLeft={navigateLeft}
+                    onNavigateRight={navigateRight}
+                />
+            )}
+        </div>
+    )
+}
diff --git a/src/app/_components/Image/ImageList/ImageListImage.module.scss b/src/app/_components/Image/ImagePanel/ImagePanelImage.module.scss
similarity index 51%
rename from src/app/_components/Image/ImageList/ImageListImage.module.scss
rename to src/app/_components/Image/ImagePanel/ImagePanelImage.module.scss
index 834851d12..0a69bc448 100644
--- a/src/app/_components/Image/ImageList/ImageListImage.module.scss
+++ b/src/app/_components/Image/ImagePanel/ImagePanelImage.module.scss
@@ -2,7 +2,7 @@
 
 $image-size: 200px;
 
-.ImageListImage {
+.ImagePanelImage {
     width: $image-size;
     height: $image-size;
     margin: ohma.$gap;
@@ -10,16 +10,16 @@ $image-size: 200px;
     overflow: hidden;
     @include ohma.round;
     position: relative;
-    border: 3px solid ohma.$colors-primary;
+    border: 3px solid ohma.$colors-accent-blue;
     padding: 0;
-    
+
     // img container (component):
     > *:first-child {
         position: absolute;
         top: 0;
         left: 0;
-        width: 100% !important;
-        height: 100%;     
+        width: 100%;
+        height: 100%;
         > img {
             transition: transform 0.5s ease-in-out;
             position: absolute;
@@ -28,18 +28,16 @@ $image-size: 200px;
             object-fit: cover;
             width: 100%;
             height: 100%;
-        }  
+        }
     }
     &:hover {
-        border: solid 10px ohma.$colors-primary;
+        border: solid 10px ohma.$colors-accent-blue;
         > *:first-child > img {
             transform: scale(1.1);
         }
     }
-    > button {
-        &:hover {
-            cursor: pointer;
-        }
+
+    .tileButton {
         z-index: 1;
         position: absolute;
         top: 0;
@@ -47,13 +45,41 @@ $image-size: 200px;
         width: 100%;
         height: 100%;
         opacity: 0;
+        border: none;
+        background-color: transparent;
+        &:hover {
+            cursor: pointer;
+        }
     }
 
-    //selection button
-    > div:last-child {
+    .selectButton {
         z-index: 1;
         position: absolute;
         top: 0;
         right: 0;
+        width: 2em;
+        height: 2em;
+        background-color: ohma.$colors-gray-500;
+        border-radius: 50%;
+        margin: 0.3em;
+        border: none;
+        > svg {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            height: 80%;
+        }
+        &:hover {
+            cursor: pointer;
+            background-color: ohma.$colors-gray-500;
+            > svg {
+                opacity: 0.5;
+            }
+        }
+        &.selected {
+            background-color: ohma.$colors-accent-blue;
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/_components/Image/ImagePanel/ImagePanelImage.tsx b/src/app/_components/Image/ImagePanel/ImagePanelImage.tsx
new file mode 100644
index 000000000..df931ae44
--- /dev/null
+++ b/src/app/_components/Image/ImagePanel/ImagePanelImage.tsx
@@ -0,0 +1,36 @@
+import styles from './ImagePanelImage.module.scss'
+import { default as ImageComponent } from '@/components/Image/Image'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import type { Image } from '@/prisma-generated-pn-types'
+
+type PropTypes = {
+    image: Image,
+    selected: boolean,
+    onOpenDisplay?: () => void,
+    onToggleSelect?: () => void,
+}
+
+/**
+ * One image tile in an ImagePanel. Clicking the tile opens the large display when the panel has
+ * one, otherwise it toggles selection. The checkmark button always toggles selection when
+ * selection is active.
+ */
+export default function ImagePanelImage({ image, selected, onOpenDisplay, onToggleSelect }: PropTypes) {
+    const handleTileClick = onOpenDisplay ?? onToggleSelect
+
+    return (
+        <div className={styles.ImagePanelImage}>
+            <ImageComponent hideCopyRight smallSize width={200} image={image} />
+            {handleTileClick && <button className={styles.tileButton} onClick={handleTileClick} />}
+            {onToggleSelect && (
+                <button
+                    onClick={onToggleSelect}
+                    className={`${styles.selectButton} ${selected ? styles.selected : ''}`}
+                >
+                    <FontAwesomeIcon icon={faCheck} />
+                </button>
+            )}
+        </div>
+    )
+}
diff --git a/src/app/_components/Image/ImageUploader.tsx b/src/app/_components/Image/ImageUploader.tsx
index b8737125b..17bc9e4ab 100644
--- a/src/app/_components/Image/ImageUploader.tsx
+++ b/src/app/_components/Image/ImageUploader.tsx
@@ -2,37 +2,45 @@ import Form from '@/components/Form/Form'
 import TextInput from '@/components/UI/TextInput'
 import FileInput from '@/components/UI/FileInput'
 import LicenseChooser from '@/components/LicenseChooser/LicenseChooser'
-import { createImageAction } from '@/services/images/actions'
-import { configureAction } from '@/services/configureAction'
-import type { PropTypes as FormPropTypes } from '@/components/Form/Form'
+import type { UploadSpecialCollectionImageAction } from '@/services/images/subservice/types'
+import type { PopUpKeyType } from '@/contexts/PopUp'
 
-type ResponseType = Awaited<ReturnType<typeof createImageAction>>;
-type T = Pick<ResponseType & { success: true }, 'data'>['data']
-
-type PropTypes = Omit<FormPropTypes<T>, 'action' | 'submitText' | 'title'> & {
-    collectionId: number,
+type PropTypes = {
+    uploadImageAction: UploadSpecialCollectionImageAction,
+    title: string,
+    className?: string,
+    successCallback?: (data?: unknown) => void,
+    refreshOnSuccess?: boolean,
+    closePopUpOnSuccess?: PopUpKeyType,
 }
 
 /**
- * A component to upload one image to a collection
- * @param collectionId - The id of the collection to upload the image to
- * @param formProps - The props to pass to the form
- * @returns
+ * uplaod form for an image. Uses the provided uploader action, eiteher an upload action
+ * to a special collection or a dynamic one.
  */
-export default function ImageUploader({ collectionId, ...formProps }: PropTypes) {
+export default function ImageUploader({
+    uploadImageAction,
+    title,
+    className,
+    successCallback,
+    refreshOnSuccess,
+    closePopUpOnSuccess,
+}: PropTypes) {
     return (
         <Form
-            title="last opp bilde"
+            className={className}
+            title={title}
             submitText="last opp"
-            action={configureAction(createImageAction, { params: { collectionId } })}
-            closePopUpOnSuccess="UploadImages"
-            {...formProps}
+            action={uploadImageAction}
+            successCallback={successCallback}
+            refreshOnSuccess={refreshOnSuccess}
+            closePopUpOnSuccess={closePopUpOnSuccess}
         >
-            <TextInput color="black" label="navn" name="name" />
-            <TextInput color="black" label="alternativ tekst" name="alt" />
-            <TextInput color="black" label="Kreditert" name="credit" />
-            <LicenseChooser />
-            <FileInput label="fil" name="file" color="primary" />
+            <TextInput color="black" label="navn" name="imageName" />
+            <TextInput color="black" label="alternativ tekst" name="imageAlt" />
+            <TextInput color="black" label="kreditert" name="imageCredit" />
+            <LicenseChooser name="imageLicenseId" />
+            <FileInput label="fil" name="imageFile" color="primary" />
         </Form>
     )
 }
diff --git a/src/app/_components/Image/StandardImage.module.scss b/src/app/_components/Image/StandardImage.module.scss
new file mode 100644
index 000000000..ebc714dcb
--- /dev/null
+++ b/src/app/_components/Image/StandardImage.module.scss
@@ -0,0 +1,13 @@
+.StandardImage {
+    position: relative;
+    isolation: isolate;
+    display: table;
+    .children {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+    }
+}
diff --git a/src/app/_components/Image/StandardImageClient.tsx b/src/app/_components/Image/StandardImageClient.tsx
new file mode 100644
index 000000000..1f7dc1709
--- /dev/null
+++ b/src/app/_components/Image/StandardImageClient.tsx
@@ -0,0 +1,32 @@
+'use client'
+import styles from './StandardImage.module.scss'
+import Image, { SrcImage } from './Image'
+import { useStandardImages } from '@/contexts/ClientData'
+import type { PropTypes } from './StandardImageServer'
+
+const fallbackImage = '/images/fallback.jpg'
+
+/**
+ * WARNING: This component is only meant for the client - use StandardImage for the server
+ * A component that displays a standard image, read from the ClientData cache (seeded by layout,
+ * so no client fetch is needed). Falls back to a static placeholder if the standard image cannot
+ * be resolved at all (should essentially never happen, as it self-heals from static config).
+ * @param standardImage - the standard image to display
+ * @returns
+ */
+export default function StandardImageClient({ standardImage, children, className = '', ...props }: PropTypes) {
+    const result = useStandardImages()
+
+    const renderImage = () => {
+        if (result.status === 'loading') return null
+        if (result.status === 'error') return <SrcImage src={fallbackImage} {...props} />
+        return <Image image={result.standardImages[standardImage]} {...props} />
+    }
+
+    return (
+        <div className={`${styles.StandardImage} ${className}`}>
+            {renderImage()}
+            {children && <div className={styles.children}>{children}</div>}
+        </div>
+    )
+}
diff --git a/src/app/_components/Image/StandardImageServer.tsx b/src/app/_components/Image/StandardImageServer.tsx
new file mode 100644
index 000000000..3c917700e
--- /dev/null
+++ b/src/app/_components/Image/StandardImageServer.tsx
@@ -0,0 +1,37 @@
+import styles from './StandardImage.module.scss'
+import Image, { SrcImage } from './Image'
+import { readStandardImageAction } from '@/services/images/standard/actions'
+import type { PropTypes as ImagePropTypes } from './Image'
+import type { StandardImage as StandardImageT } from '@/prisma-generated-pn-types'
+import type React from 'react'
+
+export type PropTypes = Omit<ImagePropTypes, 'image' | 'imageSize' | 'smallSize' | 'largeSize'> & {
+    standardImage: StandardImageT,
+    children?: React.ReactNode,
+}
+
+const fallbackImage = '/images/fallback.jpg'
+
+/**
+ * WARNING: This component is only meant for the server - use StandardImageClient for the client
+ * A component that fetches a standard image and displays it. Unlike SpecialCmsImage, standard
+ * images are resolved/generated from static config rather than being admin-editable, so this
+ * component is read-only. Falls back to a static placeholder if the standard image cannot be
+ * resolved at all (should essentially never happen, as it self-heals from static config).
+ * @param standardImage - the standard image to display
+ * @returns
+ */
+export default async function StandardImageServer({ standardImage, children, className = '', ...props }: PropTypes) {
+    const imageRes = await readStandardImageAction({ params: { standardImage } })
+
+    return (
+        <div className={`${styles.StandardImage} ${className}`}>
+            {imageRes.success ? (
+                <Image image={imageRes.data} {...props} />
+            ) : (
+                <SrcImage src={fallbackImage} {...props} />
+            )}
+            {children && <div className={styles.children}>{children}</div>}
+        </div>
+    )
+}
diff --git a/src/app/_components/ImageCard/ImageCard.module.scss b/src/app/_components/ImageCard/ImageCard.module.scss
index 95809317c..33fc407a1 100644
--- a/src/app/_components/ImageCard/ImageCard.module.scss
+++ b/src/app/_components/ImageCard/ImageCard.module.scss
@@ -1,15 +1,15 @@
 @use "@/styles/ohma";
 
 $padding: ohma.$gap;
-$imageHeight: 250px;
-$contentHeight: 200px;
+$imageHeight: calc(20 * 8px);
+$contentHeight: calc(15 * 8px);
 $height: $imageHeight + $contentHeight;
 
-$textUnderlineColor: ohma.$colors-secondary;
+$textUnderlineColor: ohma.$colors-surface-base;
 
 .ImageCard {
     min-width: 200px; 
-    max-width: 300px;
+    max-width: 400px;
     border-radius: ohma.$cardRounding;
     position: relative;
     color: inherit;
@@ -18,9 +18,13 @@ $textUnderlineColor: ohma.$colors-secondary;
     height: $height;
     isolation: isolate;
     overflow: hidden;
-    @include ohma.layer;
+    background-color: ohma.$colors-surface-raised;
     margin: ohma.$gap;
 
+    @include ohma.screenMobile {
+        margin: 0;
+    }
+
     > .image {
         position: absolute;
         top: 0;
@@ -29,19 +33,18 @@ $textUnderlineColor: ohma.$colors-secondary;
         height: $imageHeight;
         z-index: 1;
         overflow: hidden;
-        border-radius: ohma.$cardRounding;
 
         > * {
-            width: 100% !important;
+            width: 100%;
             height: 100%;
             object-fit: cover;
 
             img {
-                width: 100% !important;
+                width: 100%;
                 height: 100%;
                 object-fit: cover;
             }
-        } 
+        }
 
         /* &::after {
             content: '';
diff --git a/src/app/_components/LicenseChooser/LicenseChooser.tsx b/src/app/_components/LicenseChooser/LicenseChooser.tsx
index bbeac4e7d..9353021fd 100644
--- a/src/app/_components/LicenseChooser/LicenseChooser.tsx
+++ b/src/app/_components/LicenseChooser/LicenseChooser.tsx
@@ -7,14 +7,15 @@ import { useCallback, useEffect, useState, useEffectEvent } from 'react'
 
 type PropTypes = {
     defaultLicenseName?: string | null
+    name?: string
 }
 
 /**
  * A component to choose a license. It makes a CLIENT SIDE request to the server to get the licenses
- * The selection has the name "licenseId"
+ * @param name - the form field name of the selection (defaults to "licenseId")
  * @returns A component to choose a license
  */
-export default function LicenseChooser({ defaultLicenseName }: PropTypes) {
+export default function LicenseChooser({ defaultLicenseName, name = 'licenseId' }: PropTypes) {
     const action = useCallback(() => readAllLicensesAction(), [])
     const { data } = useActionCall(action)
 
@@ -34,7 +35,7 @@ export default function LicenseChooser({ defaultLicenseName }: PropTypes) {
 
     return (
         <SelectNumberPossibleNULL
-            name="licenseId"
+            name={name}
             label="Lisens"
             className={styles.LicenseChooser}
             options={
diff --git a/src/app/_components/Loader/Loader.module.scss b/src/app/_components/Loader/Loader.module.scss
index 7e7d12bbb..bd1927409 100644
--- a/src/app/_components/Loader/Loader.module.scss
+++ b/src/app/_components/Loader/Loader.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .Loader {
-    filter: invert(1);
+    //filter: invert(1); Commented out for darkmode // TODO: Implement CMS SVG
     animation: rotate 1.3s cubic-bezier(0.99, 0.33, 0.82, 0.97) infinite;
 }
 
diff --git a/src/app/_components/Loader/Loader.tsx b/src/app/_components/Loader/Loader.tsx
index fd2c44992..2d054a74f 100644
--- a/src/app/_components/Loader/Loader.tsx
+++ b/src/app/_components/Loader/Loader.tsx
@@ -1,27 +1,15 @@
 import styles from './Loader.module.scss'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
-import { frontpageAuth } from '@/services/frontpage/auth'
-import type { SessionMaybeUser } from '@/auth/session/Session'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 
-type PropTypes = {
-    session: SessionMaybeUser
-}
-
-function Loader({ session }: PropTypes) {
+/**
+ * WARNING: this component should only be rendered on the server
+*/
+function Loader() {
     return (
         <div className={styles.Loader}>
-            <SpecialCmsImage
-                canEdit={
-                    frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
-                        session
-                    ).toJsObject()
-                }
-                special="LOADER_IMAGE"
+            <StandardImageServer
+                standardImage="LOGO_SIMPLE"
                 width={100}
-                //TODO: Probably call through other service see comments in frontpage operations
-                readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                updateCmsImageAction={updateSpecialCmsImageFrontpage}
             />
         </div>
     )
diff --git a/src/app/_components/NavBar/AdminNav.tsx b/src/app/_components/NavBar/AdminNav.tsx
new file mode 100644
index 000000000..afecfea0f
--- /dev/null
+++ b/src/app/_components/NavBar/AdminNav.tsx
@@ -0,0 +1,42 @@
+'use client'
+import styles from './DesktopSideBar.module.scss'
+import NavTooltip from './NavTooltip'
+import EditModeNavIcon from './EditModeNavIcon'
+import { EditModeContext } from '@/contexts/EditMode'
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCog } from '@fortawesome/free-solid-svg-icons'
+import { useContext } from 'react'
+
+type PropTypes = {
+    isAdmin: boolean
+    expanded?: boolean
+}
+
+/**
+ * Renders nothing at all - not even the wrapping nav/background panel -
+ * when there's neither an admin link nor an edit-mode icon to show.
+ * DesktopSideBar (a server component) only knows isAdmin; whether
+ * there's something to edit is only known client-side via
+ * EditModeContext, so that decision has to live in a client component.
+ */
+export default function AdminNav({ isAdmin, expanded = false }: PropTypes) {
+    const editModeCtx = useContext(EditModeContext)
+    if (!isAdmin && !editModeCtx?.somethingToEdit) return null
+
+    const adminLink = (
+        <Link href="/admin" className={styles.navIcon} aria-label="Admin">
+            <FontAwesomeIcon icon={faCog} className={styles.icon} />
+            <span className={styles.label}>Admin</span>
+        </Link>
+    )
+
+    return (
+        <nav className={styles.adminNav} aria-label="Admin navigation">
+            <EditModeNavIcon className={styles.navIcon} expanded={expanded} />
+            {isAdmin && (
+                expanded ? adminLink : <NavTooltip content="Admin">{adminLink}</NavTooltip>
+            )}
+        </nav>
+    )
+}
diff --git a/src/app/_components/NavBar/DesktopSideBar.module.scss b/src/app/_components/NavBar/DesktopSideBar.module.scss
new file mode 100644
index 000000000..06fba9db5
--- /dev/null
+++ b/src/app/_components/NavBar/DesktopSideBar.module.scss
@@ -0,0 +1,105 @@
+@use "@/styles/ohma";
+
+.DesktopSideBar {
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: ohma.$gap;
+    min-height: 0;
+}
+
+.navIcons {
+    border-radius: ohma.$rounding;
+    padding: ohma.$gap;
+    background: ohma.$colors-surface-base;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(#{ohma.$gap} / 2);
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.navIcon {
+    position: relative;
+    width: 100%;
+    height: calc(#{ohma.$gap} * 6);
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 calc(#{ohma.$gap} * 1.5);
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    color: ohma.$colors-text;
+    background: transparent;
+    text-decoration: none;
+    transition: background ohma.$transitionTime ease, color ohma.$transitionTime ease;
+
+    &:hover {
+        background: ohma.$colors-accent-blue;
+        color: ohma.$colors-text-inv;
+    }
+}
+
+.icon {
+    width: 24px;
+    height: 24px;
+    flex-shrink: 0;
+}
+
+.label {
+    white-space: nowrap;
+    overflow: hidden;
+    opacity: 0;
+    max-width: 0;
+    transition: opacity ohma.$transitionTime ease, max-width ohma.$transitionTime ease;
+}
+
+.adminNav {
+    border-radius: ohma.$rounding;
+    padding: ohma.$gap;
+    background: ohma.$colors-surface-base;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    flex-shrink: 0;
+}
+
+.expandToggle {
+    width: 100%;
+    height: calc(#{ohma.$gap} * 5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    border: none;
+    border-radius: ohma.$rounding;
+    background: ohma.$colors-surface-base;
+    color: ohma.$colors-text;
+    cursor: pointer;
+    transition: background ohma.$transitionTime ease, color ohma.$transitionTime ease;
+
+    &:hover {
+        background: ohma.$colors-accent-blue;
+        color: ohma.$colors-text-inv;
+    }
+}
+
+.DesktopSideBar[data-expanded='true'] {
+    .navIcon {
+        justify-content: flex-start;
+    }
+
+    .label {
+        opacity: 1;
+        max-width: 160px;
+        margin-left: calc(#{ohma.$gap} / 2);
+    }
+}
+
diff --git a/src/app/_components/NavBar/DesktopSideBar.tsx b/src/app/_components/NavBar/DesktopSideBar.tsx
new file mode 100644
index 000000000..a22fc7e96
--- /dev/null
+++ b/src/app/_components/NavBar/DesktopSideBar.tsx
@@ -0,0 +1,43 @@
+'use client'
+
+import styles from './DesktopSideBar.module.scss'
+import getNavItems from './navDef'
+import SideBarNavItem from './SideBarNavItem'
+import AdminNav from './AdminNav'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'
+import { useState } from 'react'
+import type { Profile } from '@/services/users/types'
+
+export type PropTypes = {
+    profile: Profile | null
+}
+
+export default function DesktopSideBar({ profile }: PropTypes) {
+    const [expanded, setExpanded] = useState(false)
+    const user = profile?.user ?? null
+    const isLoggedIn = user !== null
+    const applicationPeriod = false
+    const isAdmin = user?.username === 'harambe'
+
+    const navItems = getNavItems(isLoggedIn, isAdmin, applicationPeriod)
+
+    return (
+        <aside className={styles.DesktopSideBar} data-expanded={expanded}>
+            <nav className={styles.navIcons} aria-label="Desktop navigation">
+                {navItems.map((item) => (
+                    <SideBarNavItem key={item.name} item={item} expanded={expanded} />
+                ))}
+            </nav>
+            <AdminNav isAdmin={isAdmin} expanded={expanded} />
+            <button
+                type="button"
+                className={styles.expandToggle}
+                onClick={() => setExpanded(prev => !prev)}
+                aria-label={expanded ? 'Collapse navigation' : 'Expand navigation'}
+            >
+                <FontAwesomeIcon icon={expanded ? faChevronLeft : faChevronRight} />
+            </button>
+        </aside>
+    )
+}
diff --git a/src/app/_components/NavBar/EditModeNavIcon.tsx b/src/app/_components/NavBar/EditModeNavIcon.tsx
new file mode 100644
index 000000000..d7c042a0a
--- /dev/null
+++ b/src/app/_components/NavBar/EditModeNavIcon.tsx
@@ -0,0 +1,32 @@
+'use client'
+import NavTooltip from './NavTooltip'
+import EditModeSwitch from '@/components/EditModeSwitch/EditModeSwitch'
+import { EditModeContext } from '@/contexts/EditMode'
+import { useContext } from 'react'
+
+type PropTypes = {
+    className?: string
+    expanded?: boolean
+}
+
+/**
+ * Wraps EditModeSwitch together with the nav-icon slot markup (tooltip, hover
+ * background) it's shown in. Unlike EditModeSwitch itself - which renders
+ * null but still leaves that wrapping markup on the page - this renders
+ * nothing at all when there's nothing on the page the user is allowed to
+ * edit, so no empty hoverable icon slot is left behind.
+ */
+export default function EditModeNavIcon({ className, expanded = false }: PropTypes) {
+    const editModeCtx = useContext(EditModeContext)
+    if (!editModeCtx?.somethingToEdit) return null
+
+    const content = (
+        <div className={className}>
+            <EditModeSwitch />
+        </div>
+    )
+
+    if (expanded) return content
+
+    return <NavTooltip content="Edit mode">{content}</NavTooltip>
+}
diff --git a/src/app/_components/NavBar/Item.module.scss b/src/app/_components/NavBar/Item.module.scss
index f580d609a..2279b9ab6 100644
--- a/src/app/_components/NavBar/Item.module.scss
+++ b/src/app/_components/NavBar/Item.module.scss
@@ -15,7 +15,7 @@
         height: 2px;
         bottom: 0;
         left: 0;
-        background-color: ohma.$colors-primary;
+        background-color: ohma.$colors-accent-blue;
         transform-origin: bottom right;
         transition: transform 0.25s ease-out;
     }
diff --git a/src/app/_components/NavBar/Item.tsx b/src/app/_components/NavBar/Item.tsx
index 03fba54fe..43cbe5455 100644
--- a/src/app/_components/NavBar/Item.tsx
+++ b/src/app/_components/NavBar/Item.tsx
@@ -8,11 +8,9 @@ type PropTypes = {
 
 function Item({ href, name }: PropTypes) {
     return (
-        <li>
-            <Link href={href} className={styles.link}>
-                <div>{name}</div>
-            </Link>
-        </li>
+        <Link href={href} className={styles.link}>
+            <div>{name}</div>
+        </Link>
     )
 }
 
diff --git a/src/app/_components/NavBar/Menu.module.scss b/src/app/_components/NavBar/Menu.module.scss
index 33b7e9cdd..59b0058b1 100644
--- a/src/app/_components/NavBar/Menu.module.scss
+++ b/src/app/_components/NavBar/Menu.module.scss
@@ -8,6 +8,46 @@
     }
 }
 
+.menuBtn {
+    position: relative;
+    width: 25px;
+    height: 18px;
+
+    span {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        height: 2px;
+        border-radius: 2px;
+        background-color: ohma.$colors-text;
+        transition: transform ohma.$transitionTime ease, opacity ohma.$transitionTime ease, top ohma.$transitionTime ease;
+
+        &:nth-child(1) {
+            top: 0;
+        }
+        &:nth-child(2) {
+            top: 8px;
+        }
+        &:nth-child(3) {
+            top: 16px;
+        }
+    }
+
+    &.open {
+        span:nth-child(1) {
+            top: 8px;
+            transform: rotate(45deg);
+        }
+        span:nth-child(2) {
+            opacity: 0;
+        }
+        span:nth-child(3) {
+            top: 8px;
+            transform: rotate(-45deg);
+        }
+    }
+}
+
 .Menu {
     position: fixed;
     top: 60px;
@@ -15,12 +55,13 @@
     z-index: 9;
     @include ohma.layer;
     max-width: 50dvw;
-    width: 66 * ohma.$gap;
+    width: calc(66 * #{ohma.$gap});
     height: calc(100dvh - 60px);
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
     overflow-y: auto;
+    overflow-x: hidden;
 
     div {
         margin: ohma.$gap;
@@ -34,10 +75,10 @@
             list-style: none;
             margin: ohma.$gap;
             a {
-                width: 30 * ohma.$gap;
+                width: calc(30 * #{ohma.$gap});
                 text-decoration: none;
-                padding: 2 * ohma.$gap;
-                @include ohma.layer();
+                padding: calc(2 * #{ohma.$gap});
+                background: ohma.$colors-surface-base;
                 border-radius: ohma.$rounding;
                 color: ohma.$colors-text;
                 display: flex;
@@ -45,9 +86,9 @@
                 font-size: ohma.$fonts-l;
                 font-weight: ohma.$fonts-weight-l;
                 &:hover {
-                    color: ohma.$colors-primary;
+                    color: ohma.$colors-accent-blue;
                     svg {
-                        color: ohma.$colors-primary;
+                        color: ohma.$colors-accent-blue;
                     }
                 }
                 svg {
@@ -84,18 +125,22 @@
 
 @media screen and (max-width: ohma.$mobileBreakpoint) {
     .Menu {
-        width: 100dvw;
+        width: auto;
         max-width: unset;
-        height: calc(100dvh - 59px);
-        top: 0;
-        bottom: 0;
-        right: 0;
+        top: calc(#{ohma.$nav-height} + #{ohma.$gap}*2);
+        height: calc(100dvh - #{ohma.$nav-height}*2 - #{ohma.$gap}*4);
+        left: ohma.$gap;
+        right: ohma.$gap;
+        border-radius: ohma.$rounding;
         > div {
             top: 0;
             justify-content: center;
-            > div > a {
-                font-size: x-large;
-                width: calc(100dvw - (#{ohma.$gap} * 4));
+            > div {
+                width: 100%;
+                > a {
+                    font-size: x-large;
+                    width: 100%;
+                }
             }
         }
         &.closeMenu {
diff --git a/src/app/_components/NavBar/Menu.tsx b/src/app/_components/NavBar/Menu.tsx
index 66732328f..796a7f631 100644
--- a/src/app/_components/NavBar/Menu.tsx
+++ b/src/app/_components/NavBar/Menu.tsx
@@ -1,13 +1,11 @@
 'use client'
 import styles from './Menu.module.scss'
 import stylesNav from './NavBar.module.scss'
-import stylesMobileNav from './MobileNavBar.module.scss'
 import useKeyPress from '@/hooks/useKeyPress'
 import useClickOutsideRef from '@/hooks/useClickOutsideRef'
 import useOnNavigation from '@/hooks/useOnNavigation'
 import React, { useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faBars, faX } from '@fortawesome/free-solid-svg-icons'
 import Link from 'next/link'
 import type { NavItem } from './navDef'
 
@@ -47,15 +45,15 @@ export default function Menu({ items, openBtnVariant }: PropTypes) {
                     </>
                 ) : null
             }
-            <button className={styles.openBtn} onClick={() => setIsOpen(true)}>
-                {openBtnVariant === 'mobile' && !isOpen &&
-                    <div className={styles.menuBtn}>
-                        <FontAwesomeIcon className={stylesMobileNav.icon} icon={faBars}/>
-                    </div>
-                }
-                {openBtnVariant === 'mobile' && isOpen &&
-                    <div className={styles.menuBtn}>
-                        <FontAwesomeIcon className={stylesMobileNav.icon} icon={faX}/>
+            <button
+                className={styles.openBtn}
+                onClick={() => (isOpen ? closeMenu(menuRef) : setIsOpen(true))}
+            >
+                {openBtnVariant === 'mobile' &&
+                    <div className={`${styles.menuBtn} ${isOpen ? styles.open : ''}`}>
+                        <span></span>
+                        <span></span>
+                        <span></span>
                     </div>
                 }
                 {openBtnVariant === 'desktop' && !isOpen &&
diff --git a/src/app/_components/NavBar/MobileNavBar.module.scss b/src/app/_components/NavBar/MobileNavBar.module.scss
index cc2cdadec..669838834 100644
--- a/src/app/_components/NavBar/MobileNavBar.module.scss
+++ b/src/app/_components/NavBar/MobileNavBar.module.scss
@@ -1,11 +1,12 @@
 @use "@/styles/ohma";
 
 .MobileNavBar {
-    background-color: ohma.$colors-black;
+    position: relative;
+    background-color: ohma.$colors-surface-base;
     width: 100%;
     height: 100%;
-    color: ohma.$colors-white;
-    padding: 2*ohma.$gap;
+    color: ohma.$colors-text;
+    padding: calc(2 * #{ohma.$gap});
 
     display: none;
     grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
@@ -17,7 +18,7 @@
             border-left: none;
         }
         .icon {
-            color: ohma.$colors-white;
+            color: ohma.$colors-text;
             width: 25px;
             height: 25px;
         }
@@ -43,9 +44,11 @@
     }
     overflow: hidden;
     .editMode {
+        width: 48px;
+        height: 48px;
         background-color: ohma.$colors-black;
         position: absolute;
-        bottom: calc(100% + 3*ohma.$gap);
+        bottom: calc(100% + 3*#{ohma.$gap});
         right: 0;
         border-start-start-radius: 50%;
         transform: translateY(50%);
diff --git a/src/app/_components/NavBar/MobileNavBar.tsx b/src/app/_components/NavBar/MobileNavBar.tsx
index 7c87bd5ce..01cf27f58 100644
--- a/src/app/_components/NavBar/MobileNavBar.tsx
+++ b/src/app/_components/NavBar/MobileNavBar.tsx
@@ -2,14 +2,13 @@ import getNavItems from './navDef'
 import styles from './MobileNavBar.module.scss'
 import Menu from './Menu'
 import UserNavigation from './UserNavigation'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import EditModeSwitch from '@/components/EditModeSwitch/EditModeSwitch'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
 import Link from 'next/link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import type { PropTypes } from './NavBar'
 
-export default async function MobileNavBar({ profile, canEditSpecialCmsImage }: PropTypes) {
+export default async function MobileNavBar({ profile }: PropTypes) {
     const user = profile?.user ?? null
     const isLoggedIn = user !== null
     const applicationPeriod = false //TODO
@@ -30,26 +29,20 @@ export default async function MobileNavBar({ profile, canEditSpecialCmsImage }:
                 ))
             }
             <div>
-                <SpecialCmsImage
-                    canEdit={canEditSpecialCmsImage}
-                    special="MOBILE_NAV_PRIMARY_BUTTON"
+                <StandardImageServer
+                    standardImage="LOGO_SIMPLE"
                     width={30}
-                    readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                    updateCmsImageAction={updateSpecialCmsImageFrontpage}
                 >
                     <Link className={styles.imagelink} href="/"/>
-                </SpecialCmsImage>
+                </StandardImageServer>
             </div>
             <div className={styles.magicHat}>
-                <SpecialCmsImage
-                    canEdit={canEditSpecialCmsImage}
-                    special="MOBILE_NAV_LOGIN_BUTTON"
+                <StandardImageServer
+                    standardImage="MAGISK_HATT"
                     width={25}
                     height={25}
                     alt="log in button"
                     className={styles.image}
-                    readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                    updateCmsImageAction={updateSpecialCmsImageFrontpage}
                 />
                 <UserNavigation profile={profile} />
             </div>
diff --git a/src/app/_components/NavBar/NavBar.module.scss b/src/app/_components/NavBar/NavBar.module.scss
index a9873ed1e..31f4f96d4 100644
--- a/src/app/_components/NavBar/NavBar.module.scss
+++ b/src/app/_components/NavBar/NavBar.module.scss
@@ -1,51 +1,152 @@
-@use "@/styles/ohma";
+@use '@/styles/ohma';
 
 .NavBar {
     color: ohma.$colors-text;
     font-size: ohma.$fonts-m;
-    background-color: ohma.$colors-layer;
-    padding: 0 3*ohma.$gap;
+    width: 100%;
+    height: 64px;
+}
+
+.list {
     width: 100%;
     height: 100%;
-    > ul {
-        width: 100%;
-        height: 100%;
-        display: flex;
-        flex-flow: row;
-        justify-content: flex-start;
-        align-items: center;
-        list-style: none;
-        > li {
-            margin-left: 5*ohma.$gap;
-            &.logo {
-                margin-left: 2*ohma.$gap;
-                a {
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-            &.rightSide {
-                display: flex;
-                width: auto;
-                margin-left: auto;
-                align-items: center;
-            }
-        }
-        .magicHat {
-            position: relative;
-            @include ohma.btn(ohma.$colors-primary);
-            margin: 0;
-        }
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    align-items: center;
+    list-style: none;
+}
+
+.logoContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    position: relative;
+    background: ohma.$colors-surface-base;
+    border-radius: calc(#{ohma.$gap} * 2);
+    padding: ohma.$gap;
+}
+
+.logo {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.logoWrapper {
+    width: 48px;
+    height: 48px;
+    border-radius: #{ohma.$gap};
+    background: ohma.$colors-accent-blue;
+    padding: ohma.$gap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.pageTitleLi {
+    margin-left: ohma.$gap;
+    display: flex;
+    align-items: center;
+}
+
+.pageTitle {
+    font-size: ohma.$fonts-xxl;
+    font-weight: ohma.$fonts-weight-m;
+    color: ohma.$colors-text;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 40ch;
+    margin-left: ohma.$gap;
+}
+
+.pageTitlePlaceholder {
+    margin-left: ohma.$gap;
+    width: 18ch;
+    height: 48px;
+    @include ohma.layer;
+    border-radius: calc(#{ohma.$rounding} / 2);
+    display: inline-block;
+}
+
+.magicHat {
+    position: relative;
+    @include ohma.btn(ohma.$colors-accent-blue);
+    margin: 0;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(#{ohma.$gap} * 2);
+    white-space: nowrap;
+
+    &.loggedOut {
+        width: auto;
+        padding: 0 calc(2 * #{ohma.$gap});
+        font-weight: ohma.$fonts-weight-m;
     }
-    .openMenu {
-        font-weight: ohma.$fonts-weight-m;        
-        color: ohma.$colors-text;
+
+    &.loggedIn {
+        width: 64px;
+        padding: 0;
     }
 }
 
+.grower {
+    flex-grow: 1;
+}
+
+.navItem {
+    background: ohma.$colors-surface-base;
+    border-radius: calc(#{ohma.$gap} * 2);
+    margin: 0 ohma.$gap 0 0;
+    height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 ohma.$gap;
+    display: none;
+}
+
+.mobileMenuOnly {
+    display: none;
+}
+
+.rightSide {
+    display: flex;
+    width: auto;
+    margin-left: auto;
+    align-items: center;
+}
+
+.openMenu {
+    font-weight: ohma.$fonts-weight-m;
+    color: ohma.$colors-text;
+}
+
 @media (max-width: ohma.$mobileBreakpoint) {
     .NavBar {
-        display: none;
+        > ul {
+            > li {
+                &.logoContainer {
+                    display: flex;
+                }
+
+                &.rightSide {
+                    display: none;
+                }
+
+                &.navItem {
+                    display: none;
+                }
+
+                &.menu {
+                    display: none;
+                }
+            }
+        }
     }
 }
 
diff --git a/src/app/_components/NavBar/NavBar.tsx b/src/app/_components/NavBar/NavBar.tsx
index 4b5c3f1b4..f44471fb7 100644
--- a/src/app/_components/NavBar/NavBar.tsx
+++ b/src/app/_components/NavBar/NavBar.tsx
@@ -1,73 +1,69 @@
 import Item from './Item'
 import styles from './NavBar.module.scss'
-import Menu from './Menu'
 import getNavItems from './navDef'
 import UserNavigation from './UserNavigation'
 import ReportButton from './ReportButton'
-import EditModeSwitch from '@/components/EditModeSwitch/EditModeSwitch'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
+import NavBarTitle from './NavBarTitle'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
+import StandardImageServer from '@/components/Image/StandardImageServer'
+import ProfilePicture from '@/components/User/ProfilePicture'
 import Link from 'next/link'
-import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
 import type { Profile } from '@/services/users/types'
 
 export type PropTypes = {
     profile: Profile | null
-    canEditSpecialCmsImage: AuthResultTypeAny
 }
 
-export default async function NavBar({ profile, canEditSpecialCmsImage }: PropTypes) {
+export default async function NavBar({ profile }: PropTypes) {
     const user = profile?.user ?? null
     const isLoggedIn = user !== null
-    // TODO: Actual application period check
     const applicationPeriod = false
-    // TODO: Actual admin/auth check
     const isAdmin = user?.username === 'harambe'
 
     const navSize = 4
     const navItems = getNavItems(isLoggedIn, isAdmin, applicationPeriod)
     const itemsForNav = navItems.slice(0, navSize - 1)
-    const itemsForMenu = navItems.slice(navSize - 1, navItems.length)
 
     return (
         <nav className={styles.NavBar}>
-            <ul>
-                <li className={styles.logo}>
-                    <SpecialCmsImage
-                        canEdit={canEditSpecialCmsImage}
-                        special="NAV_PRIMARY_BUTTON"
-                        width={30}
-                        alt="omega logo"
-                        readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                        updateCmsImageAction={updateSpecialCmsImageFrontpage}
-                    >
-                        <Link href="/" />
-                    </SpecialCmsImage>
+            <ul className={styles.list}>
+                <li className={styles.logoContainer}>
+                    <Link aria-label={'Go to homepage'} href="/" className={styles.logo}>
+                        <div className={styles.logoWrapper}>
+                            <StandardImageServer
+                                standardImage="LOGO_SIMPLE"
+                                width={30}
+                                alt="omega logo"
+                            />
+                        </div>
+                    </Link>
                 </li>
+
+                <PageTitleSetter title="" />
+                <li className={styles.pageTitleLi}>
+                    <NavBarTitle />
+                </li>
+                <li className={styles.grower}></li>
                 {
                     itemsForNav.map((item) => (
-                        <Item key={item.name} {...item} />
+                        <li className={styles.navItem} key={item.name}>
+                            <Item key={item.name} {...item} />
+                        </li>
                     ))
                 }
-                <li>
-                    <Menu
-                        openBtnVariant={'desktop'}
-                        items={itemsForMenu}
-                    />
-                </li>
                 <li className={styles.rightSide}>
-                    <EditModeSwitch />
                     <ReportButton/>
-                    <div className={styles.magicHat}>
-                        <SpecialCmsImage
-                            canEdit={canEditSpecialCmsImage}
-                            special="NAV_LOGIN_BUTTON"
-                            width={25}
-                            height={25}
-                            alt="log in button"
-                            readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                            updateCmsImageAction={updateSpecialCmsImageFrontpage}
-                        />
+                    <div className={`${styles.magicHat} ${isLoggedIn ? styles.loggedIn : styles.loggedOut}`}>
+                        {
+                            user ? (
+                                <ProfilePicture
+                                    profileImage={user.image}
+                                    width={48}
+                                />
+                            ) : (
+                                <span>Logg inn</span>
+                            )
+                        }
                         <UserNavigation profile={profile} />
                     </div>
                 </li>
diff --git a/src/app/_components/NavBar/NavBarTitle.tsx b/src/app/_components/NavBar/NavBarTitle.tsx
new file mode 100644
index 000000000..d0b6441a9
--- /dev/null
+++ b/src/app/_components/NavBar/NavBarTitle.tsx
@@ -0,0 +1,22 @@
+'use client'
+
+import styles from './NavBar.module.scss'
+import { usePageTitle } from '@/contexts/PageTitle'
+import React from 'react'
+
+export default function NavBarTitle() {
+    const { title } = usePageTitle()
+    if (!title) {
+        return (
+            <div className={styles.pageTitlePlaceholder} aria-hidden={true}>
+                {/* server-consistent placeholder to avoid layout shift during hydration */}
+            </div>
+        )
+    }
+
+    return (
+        <div className={styles.pageTitle} aria-hidden={false}>
+            {title}
+        </div>
+    )
+}
diff --git a/src/app/_components/NavBar/NavTooltip.module.scss b/src/app/_components/NavBar/NavTooltip.module.scss
new file mode 100644
index 000000000..0da6d9944
--- /dev/null
+++ b/src/app/_components/NavBar/NavTooltip.module.scss
@@ -0,0 +1,24 @@
+@use "@/styles/ohma";
+
+.content {
+    background: ohma.$colors-surface-hover;
+    color: ohma.$colors-text;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    padding: 0 ohma.$gap;
+    height: calc(#{ohma.$gap} * 6);
+    line-height: calc(#{ohma.$gap} * 6);
+    z-index: 200;
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+    animation: tooltip-fade 0.15s ease-out;
+}
+
+@keyframes tooltip-fade {
+    from {
+        opacity: 0;
+        transform: translateX(-4px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
diff --git a/src/app/_components/NavBar/NavTooltip.tsx b/src/app/_components/NavBar/NavTooltip.tsx
new file mode 100644
index 000000000..5738ca1c6
--- /dev/null
+++ b/src/app/_components/NavBar/NavTooltip.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import styles from './NavTooltip.module.scss'
+import * as Tooltip from '@radix-ui/react-tooltip'
+import { useSyncExternalStore } from 'react'
+import type { ReactNode } from 'react'
+
+type PropTypes = {
+    content: string
+    children: ReactNode
+}
+
+const noopSubscribe = () => () => {}
+
+export default function NavTooltip({ content, children }: PropTypes) {
+    // Tooltip.Trigger's asChild clones Radix-managed props (aria-describedby,
+    // data-state, pointer/focus handlers, ref) onto children during render.
+    // Something in that computation doesn't land identically between the
+    // server render and the client's first render pass, causing a hydration
+    // mismatch. Rendering the bare children until after mount guarantees the
+    // server output and the client's first pass match exactly; the Tooltip
+    // wrapper is then added in a normal post-hydration re-render instead.
+    const mounted = useSyncExternalStore(noopSubscribe, () => true, () => false)
+
+    if (!mounted) return <>{children}</>
+
+    return (
+        <Tooltip.Provider delayDuration={150}>
+            <Tooltip.Root>
+                <Tooltip.Trigger asChild>
+                    {children}
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                    <Tooltip.Content className={styles.content} side="right" sideOffset={8}>
+                        {content}
+                    </Tooltip.Content>
+                </Tooltip.Portal>
+            </Tooltip.Root>
+        </Tooltip.Provider>
+    )
+}
diff --git a/src/app/_components/NavBar/ReportButton.module.scss b/src/app/_components/NavBar/ReportButton.module.scss
index 017781d67..639a4f7c8 100644
--- a/src/app/_components/NavBar/ReportButton.module.scss
+++ b/src/app/_components/NavBar/ReportButton.module.scss
@@ -1,29 +1,18 @@
 @use '@/styles/ohma';
 
 .reportButton {
-    // padding: ;
     cursor: pointer;
-    // margin-top: .5em;
     margin: 0 ohma.$gap;
     
-    
     .reportPicture {
-        //Width and height plus padding must equal 50px
-        width: 40px;
-        height: 40px;
-        padding: 5px;
-        border-radius: 10px;
-        // background-color: ohma.$colors-red;
-        // filter: saturate(0);
-        color: ohma.$colors-white;
-        transition: 0.5s;
+        width: 48px;
+        height: 48px;
+        padding: ohma.$gap;
+        border-radius: calc(#{ohma.$gap} * 2);
+        color: ohma.$colors-text;
+        transition: ohma.$transitionTime;
         &:hover{
-            background-color: ohma.$colors-red;
-            // background-color: rgb(211, 0, 0);
+            background-color: ohma.$colors-accent-red;
         }
     }
-}
-
-// .reportPicture{
-//     background-color: red;
-// }
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/src/app/_components/NavBar/SideBarNavItem.tsx b/src/app/_components/NavBar/SideBarNavItem.tsx
new file mode 100644
index 000000000..29863d958
--- /dev/null
+++ b/src/app/_components/NavBar/SideBarNavItem.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import styles from './DesktopSideBar.module.scss'
+import NavTooltip from './NavTooltip'
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import type { NavItem } from './navDef'
+
+type PropTypes = {
+    item: NavItem
+    expanded: boolean
+}
+
+export default function SideBarNavItem({ item, expanded }: PropTypes) {
+    const link = (
+        <Link href={item.href} className={styles.navIcon} aria-label={item.name}>
+            <FontAwesomeIcon icon={item.icon} className={styles.icon} />
+            <span className={styles.label}>{item.name}</span>
+        </Link>
+    )
+
+    if (expanded) return link
+
+    return <NavTooltip content={item.name}>{link}</NavTooltip>
+}
diff --git a/src/app/_components/NavBar/SubPageNavBar/SubPageNavBar.module.scss b/src/app/_components/NavBar/SubPageNavBar/SubPageNavBar.module.scss
index d4375fa29..83a7caf4c 100644
--- a/src/app/_components/NavBar/SubPageNavBar/SubPageNavBar.module.scss
+++ b/src/app/_components/NavBar/SubPageNavBar/SubPageNavBar.module.scss
@@ -3,20 +3,21 @@
 // sub page nav bar item
 
 .container {
-    border: 1px solid ohma.$colors-text;
-    border-radius: ohma.$rounding;
-    padding: 12px;
-    color: ohma.$colors-text-muted;
-    transition: 0.3s;
-    display: flex;
-    flex-direction: row;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    color: ohma.$colors-text;
+    transition: background 0.2s ease, color 0.2s ease;
+    display: inline-flex;
     align-items: center;
-    @include ohma.boxShadow('');
-    padding: 0px;
-    height: ohma.$nav-height;
-    justify-content: center;
-    padding: 0;
+    height: calc(#{ohma.$nav-height} - #{ohma.$gap} * 2);
+    padding: 0 ohma.$gap;
     border: 0;
+    background: transparent;
+    justify-content: center;
+
+    &:hover {
+        background: ohma.$colors-accent-blue;
+        color: ohma.$colors-text-inv;
+    }
 }
 .container:hover {
     color: ohma.$colors-text;
@@ -25,24 +26,28 @@
     text-decoration: none;
 }
 .linkContainer {
-    margin-bottom: 10px;
-    flex-grow: 1;
+    margin: 0;
+    flex-grow: 0;
 }
 .linkContainer:last-child {
-    margin-bottom: 0px;
+    margin-bottom: 0;
 }
 .selected {
-    color: ohma.$colors-primary;
+    color: ohma.$colors-accent-blue;
 }
 .selected * {
-    color: ohma.$colors-primary;
+    color: ohma.$colors-accent-blue;
+}
+
+.selected:hover * {
+    color: ohma.$colors-text;
 }
 .icon {
-    width: 25px;
-    height: 25px;
+    width: 24px;
+    height: 24px;
 }
 .text {
-    line-height: calc(ohma.$nav-height - (2 * 16px));
+    line-height: calc(#{ohma.$nav-height} - 32px);
     text-align: center;
     padding-left: 16px;
 }
@@ -56,22 +61,23 @@
 // Sub page nav bar
 
 .navBarContainer {
-    display: flex;
-    position: fixed;
-    padding: 0px calc(16px - ohma.$gap);
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: max-content;
+    grid-column: 1 / -1;
     border-radius: ohma.$rounding;
-    background-color: ohma.$colors-black;
-    width: calc(100vw - 2 * ohma.$gap);
-    max-width: 900px;
-    left: max(ohma.$gap, calc((100dvw - 900px) / 2));
-    top: calc(100dvh - 2 * ohma.$nav-height - ohma.$gap);
+    background: ohma.$colors-surface-base;
+    padding: ohma.$gap;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
     flex-direction: row;
+    position: sticky;
+    bottom: 0;
     z-index: 2;
     height: ohma.$nav-height;
+    justify-content: center;
+    gap: calc(#{ohma.$gap} / 2);
+    overflow-x: auto;
 }
 
-@media (min-width: ohma.$mobileBreakpoint) {
-    .navBarContainer {
-        top: calc(100dvh - ohma.$nav-height - ohma.$gap);
-    }
-}
diff --git a/src/app/_components/NavBar/SubPageNavBar/SubPageNavObserver.tsx b/src/app/_components/NavBar/SubPageNavBar/SubPageNavObserver.tsx
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/app/_components/NavBar/UserNavigation.module.scss b/src/app/_components/NavBar/UserNavigation.module.scss
index 9a5d23678..bcf15ba1a 100644
--- a/src/app/_components/NavBar/UserNavigation.module.scss
+++ b/src/app/_components/NavBar/UserNavigation.module.scss
@@ -1,85 +1,3 @@
-@use '@/styles/ohma';
-
-.UserNavigation {
-    background-color: ohma.$colors-gray-200;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    @include ohma.screenLg {
-        position: absolute;
-        bottom: 0;
-        right: 0;
-        transform: translateY(calc(100% + .5em));
-        min-width: 300px;
-        max-height: 90vh;
-        @include ohma.boxShadow('');
-        &:hover {
-            @include ohma.boxShadow('hover');
-        }
-        @include ohma.round();
-    }
-    @include ohma.screenMobile {
-        z-index: -1;
-        padding: 1em;
-        padding-top: 3em;
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100vw;
-        height: calc(100vh - 50px);
-    }
-    @include ohma.layer;
-    h2 {
-        color: ohma.$colors-black;
-        font-size: ohma.$fonts-xl;
-    }
-
-    .logout {
-        margin-top: .5em;
-        width: 100%;
-        > button {
-            width: 100%;
-            margin: 0;
-        }
-    }
-
-    .navs {
-        margin-top: 1em;
-        width: 100%;
-        display: flex;
-        flex-flow: row wrap;
-        gap: 1em;
-        > * {
-            flex: 1 1 calc(50% - 1em);
-            @include ohma.round();
-            background-color: ohma.$colors-secondary;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            text-decoration: none;
-            color: ohma.$colors-white;
-            * {
-                transition: 300ms; // TODO Add transition variable
-            }
-            @include ohma.boxShadow('');
-            svg {
-                width: 20px;
-                height: 20px;
-                color: ohma.$colors-white;
-                margin: .3em;
-            }
-            &:hover {
-                @include ohma.boxShadow('hover');
-                color: ohma.$colors-primary;
-                svg {
-                    color: ohma.$colors-primary;
-                }
-            }
-        }
-    }
-}
-
 .hidden {
     opacity: 0;
     width: 100%;
diff --git a/src/app/_components/NavBar/UserNavigation.tsx b/src/app/_components/NavBar/UserNavigation.tsx
index ebe64ac21..1e3e7ef01 100644
--- a/src/app/_components/NavBar/UserNavigation.tsx
+++ b/src/app/_components/NavBar/UserNavigation.tsx
@@ -1,14 +1,5 @@
-'use client'
 import styles from './UserNavigation.module.scss'
-import ProfilePicture from '@/components/User/ProfilePicture'
-import BorderButton from '@/UI/BorderButton'
-import useClickOutsideRef from '@/hooks/useClickOutsideRef'
-import useOnNavigation from '@/hooks/useOnNavigation'
-import UserDisplayName from '@/components/User/UserDisplayName'
-import { faCog, faMoneyBill, faQrcode, faSignOut, faUser } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Link from 'next/link'
-import { useState } from 'react'
 import type { Profile } from '@/services/users/types'
 
 type PropTypes = {
@@ -16,53 +7,13 @@ type PropTypes = {
 }
 
 /**
- * This component either renders an empty link with a href to /login page if there is no profile
- * Else it renders a usefull component for a logged in user.
- * @param profile - The profile of the user
- * @returns
+ * Renders an invisible link over the avatar button: to the user's own
+ * profile page when logged in, or to /login when logged out. The profile
+ * page already exposes settings, Omega-ID, account and logout, so there's
+ * no need to duplicate those behind a popup here.
  */
 export default function UserNavigation({ profile }: PropTypes) {
-    const [isMenuOpen, setIsMenuOpen] = useState(false)
-    const ref = useClickOutsideRef(() => setIsMenuOpen(false))
-    useOnNavigation(() => setIsMenuOpen(false))
+    const href = profile?.user ? '/users/me' : '/login'
 
-    if (!profile || !profile.user) {
-        return <Link className={styles.hidden} href="/login" />
-    }
-
-    if (!isMenuOpen) {
-        return <button className={styles.hidden} onClick={() => setIsMenuOpen(!isMenuOpen)} />
-    }
-
-    return (
-        <div ref={ref} className={styles.UserNavigation}>
-            <ProfilePicture profileImage={profile.user.image} width={180} />
-            <h2><UserDisplayName user={profile.user} asClient={true} width={26} /></h2>
-
-            <Link href="/logout" className={styles.logout}>
-                <BorderButton color="secondary">
-                    <FontAwesomeIcon icon={faSignOut} /> <p>Logg ut</p>
-                </BorderButton>
-            </Link>
-
-            <div className={styles.navs}>
-                <Link href="/users/me">
-                    <FontAwesomeIcon icon={faUser} />
-                    <p>Profil</p>
-                </Link>
-                <Link href="/users/me/omegaid">
-                    <FontAwesomeIcon icon={faQrcode} />
-                    <p>Omega-ID</p>
-                </Link>
-                <Link href="/users/me/money">
-                    <FontAwesomeIcon icon={faMoneyBill} />
-                    <p>Konto</p>
-                </Link>
-                <Link href="/users/me/settings">
-                    <FontAwesomeIcon icon={faCog} />
-                    <p>Innstillinger</p>
-                </Link>
-            </div>
-        </div>
-    )
+    return <Link className={styles.hidden} href={href} />
 }
diff --git a/src/app/_components/NavBar/navDef.ts b/src/app/_components/NavBar/navDef.ts
index 9fc977755..9953f8e06 100644
--- a/src/app/_components/NavBar/navDef.ts
+++ b/src/app/_components/NavBar/navDef.ts
@@ -107,7 +107,7 @@ export const itemsForMenu: NavItem[] = [
     },
     {
         name: 'Bilder',
-        href: '/images',
+        href: '/image-collections',
         show: 'all',
         icon: faCamera,
     },
diff --git a/src/app/_components/OmegaId/identification/OmegaId.tsx b/src/app/_components/OmegaId/identification/OmegaId.tsx
index 2ae6c8e06..4802eff5a 100644
--- a/src/app/_components/OmegaId/identification/OmegaId.tsx
+++ b/src/app/_components/OmegaId/identification/OmegaId.tsx
@@ -2,10 +2,16 @@
 
 import OmegaIdElement from './OmegaIdElement'
 import { generateOmegaIdAction } from '@/services/omegaid/actions'
+import { ServerSession } from '@/auth/session/ServerSession'
 
 
 export default async function OmegaId() {
-    const results = await generateOmegaIdAction()
+    const user = (await ServerSession.fromNextAuth()).user
+    if (!user) {
+        return <p>Failed to load Omega-ID</p>
+    }
+
+    const results = await generateOmegaIdAction({ params: { userId: user.id } })
 
     if (!results.success) {
         return <p>Failed to load Omega-ID</p>
diff --git a/src/app/_components/OmegaId/identification/OmegaIdElement.tsx b/src/app/_components/OmegaId/identification/OmegaIdElement.tsx
index 5bdce7e2d..9b5d68898 100644
--- a/src/app/_components/OmegaId/identification/OmegaIdElement.tsx
+++ b/src/app/_components/OmegaId/identification/OmegaIdElement.tsx
@@ -25,7 +25,8 @@ export default function OmegaIdElement({ token }: {
     useEffect(() => {
         const interval = setInterval(async () => {
             if (expiryTime < new Date()) {
-                const results = await generateOmegaIdAction()
+                if (session.loading || !session.session.user) return
+                const results = await generateOmegaIdAction({ params: { userId: session.session.user.id } })
                 if (!results.success) {
                     console.error(results)
                     throw new Error('Failed to reload the qr code')
diff --git a/src/app/_components/OmegaId/reader/OmegaIdReader.module.scss b/src/app/_components/OmegaId/reader/OmegaIdReader.module.scss
index de8a90850..3abb1226b 100644
--- a/src/app/_components/OmegaId/reader/OmegaIdReader.module.scss
+++ b/src/app/_components/OmegaId/reader/OmegaIdReader.module.scss
@@ -6,7 +6,7 @@
 
 
     > .feedbackBox {
-        color: ohma.$colors-white;
+        color: ohma.$colors-text-inv;
         width: 100%;
         height: 3rem;
         border-radius: ohma.$cardRounding;
@@ -18,14 +18,14 @@
     }
 
     > .success {
-        background-color: ohma.$colors-green;
+        background-color: ohma.$colors-accent-green;
     }
 
     > .error {
-        background-color: ohma.$colors-red;
+        background-color: ohma.$colors-accent-red;
     }
 
     > .waiting {
-        background-color: ohma.$colors-yellow;
+        background-color: ohma.$colors-accent-yellow;
     }
 }
\ No newline at end of file
diff --git a/src/app/_components/PageWrapper/PageWrapper.module.scss b/src/app/_components/PageWrapper/PageWrapper.module.scss
index 5eb24a9b0..468728c10 100644
--- a/src/app/_components/PageWrapper/PageWrapper.module.scss
+++ b/src/app/_components/PageWrapper/PageWrapper.module.scss
@@ -1,11 +1,13 @@
 @use "@/styles/ohma";
 
 .wrapper {
-    @include ohma.pagePadding();
+    padding: calc(2 * #{ohma.$gap});
+    min-height: 100%;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
     align-self: flex-start;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    padding: 0 2em;
+    background-color: ohma.$colors-surface-base;
     h1 {
         font-family: ohma.$fonts-secondary;
         font-size: ohma.$fonts-xxl;
@@ -23,4 +25,46 @@
             align-items: center;
         }
     }
+}
+
+// For pages laid out as islands (see InterestGroups): each section paints its
+// own surface-base panel, so the wrapper drops its own and lets the page
+// background show through the gaps between them. The wrapper's padding was
+// only ever there to frame that single panel, so it goes too — the page owns
+// its own spacing (see interest-groups/page.module.scss) rather than sitting
+// inside a border the wrapper no longer draws.
+.transparent {
+    background-color: transparent;
+    padding: 0;
+
+    > .inlineHeader {
+        padding: calc(2 * #{ohma.$gap}) calc(2 * #{ohma.$gap}) 0;
+    }
+}
+
+// Opt-in mode for pages that need to size a scrollable body against the
+// remaining height (e.g. a sticky bottom nav bar, or a table that should
+// scroll internally instead of the whole page). The title bar is pinned via
+// flex-shrink: 0 so .body can reliably fill "the rest" instead of the whole
+// wrapper height, which would overflow because the title bar also takes space.
+// Purely structural: background/padding are unchanged, so by default this
+// still paints one continuous panel behind the header and body, same as the
+// base wrapper. Combine with .transparent (see above) for pages whose body
+// owns its own content-card background instead (e.g. a sticky bottom nav bar
+// floating over edge-to-edge content).
+.fillHeight {
+    display: flex;
+    flex-direction: column;
+
+    > .inlineHeader {
+        flex-shrink: 0;
+    }
+}
+
+.body {
+    min-height: 0;
+}
+
+.fillHeight > .body {
+    flex: 1;
 }
\ No newline at end of file
diff --git a/src/app/_components/PageWrapper/PageWrapper.tsx b/src/app/_components/PageWrapper/PageWrapper.tsx
index adc457d21..52c0cfe38 100644
--- a/src/app/_components/PageWrapper/PageWrapper.tsx
+++ b/src/app/_components/PageWrapper/PageWrapper.tsx
@@ -1,4 +1,5 @@
 import styles from './PageWrapper.module.scss'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 import React from 'react'
 
 export default function PageWrapper({
@@ -6,23 +7,43 @@ export default function PageWrapper({
     children,
     headerItem,
     titleClassName,
+    fillHeight = false,
+    hideTitle = false,
+    transparent = false,
 }: {
     children: React.ReactNode,
     title: string,
     headerItem?: React.ReactNode,
     titleClassName?: string,
+    fillHeight?: boolean,
+    hideTitle?: boolean,
+    /** For pages laid out as islands: drops the wrapper's surface-base panel so the page background shows through. */
+    transparent?: boolean,
 }) {
+    const wrapperClass = [
+        styles.wrapper,
+        fillHeight && styles.fillHeight,
+        transparent && styles.transparent,
+    ].filter(Boolean).join(' ')
+
     return (
-        <div className={styles.wrapper}>
-            <div className={styles.inlineHeader}>
-                <h1 className={titleClassName}>{ title }</h1>
+        <div className={wrapperClass}>
+            <PageTitleSetter title={title} />
+            {!hideTitle && (
+                <div className={styles.inlineHeader}>
+                    {/* TODO If anyone wants this we can keep it
+                    <h1 className={titleClassName}>{ title }</h1>
+                    */}
 
-                <div>
-                    { headerItem }
+                    <div>
+                        { headerItem }
+                    </div>
                 </div>
-            </div>
+            )}
 
-            { children }
+            <div className={styles.body}>
+                { children }
+            </div>
         </div>
     )
 }
diff --git a/src/app/_components/PdfDocument/PdfDocument.module.scss b/src/app/_components/PdfDocument/PdfDocument.module.scss
index a19c09a4c..eb82e841b 100644
--- a/src/app/_components/PdfDocument/PdfDocument.module.scss
+++ b/src/app/_components/PdfDocument/PdfDocument.module.scss
@@ -16,17 +16,17 @@
                 }
             }
             > button {
-                background-color: ohma.$colors-gray-500;
+                background-color: ohma.$colors-surface-raised;
                 border: none;
                 padding: 1em;
                 transition: background-color 0.3s;
                 svg {
-                    color: ohma.$colors-white;
+                    color: ohma.$colors-text;
                     width: 25px;
                     height: 25px;
                 }
                 &:hover {
-                    background-color: ohma.$colors-gray-600;
+                    background-color: ohma.$colors-surface-hover;
                     cursor: pointer;
                 }
             }
@@ -43,7 +43,7 @@
 }
 
 .fallbackWarning {
-    color: ohma.$colors-red;
+    color: ohma.$colors-accent-red;
 }
 
 .fallback {
diff --git a/src/app/_components/Permission/Permission.module.scss b/src/app/_components/Permission/Permission.module.scss
index 220caf63e..3971e87e2 100644
--- a/src/app/_components/Permission/Permission.module.scss
+++ b/src/app/_components/Permission/Permission.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .Permission {
-    @include ohma.layer;
+    background-color: ohma.$colors-surface-raised;
     display: flex;
     @include ohma.round();
     align-items: center;
diff --git a/src/app/_components/Permission/PermissionCategory.module.scss b/src/app/_components/Permission/PermissionCategory.module.scss
index 901944d09..c856420ab 100644
--- a/src/app/_components/Permission/PermissionCategory.module.scss
+++ b/src/app/_components/Permission/PermissionCategory.module.scss
@@ -7,6 +7,6 @@
     > .list {
         display: flex;
         flex-direction: column;
-        gap: 2*ohma.$gap;
+        gap: calc(2 * #{ohma.$gap});
     }
 }
\ No newline at end of file
diff --git a/src/app/_components/Permission/PermissionCategory.tsx b/src/app/_components/Permission/PermissionCategory.tsx
index b7937bfb7..4ad4d0d02 100644
--- a/src/app/_components/Permission/PermissionCategory.tsx
+++ b/src/app/_components/Permission/PermissionCategory.tsx
@@ -1,9 +1,9 @@
 import Permission from './Permission'
 import styles from './PermissionCategory.module.scss'
 import { permissionConfig } from '@/services/permissions/constants'
+import { Permission as PermissionEnum } from '@/prisma-generated-pn-types'
 import type { PermissionCategory } from '@/services/permissions/types'
 import type { ReactNode } from 'react'
-import { Permission as PermissionEnum } from '@/prisma-generated-pn-types'
 
 export type PropTypes = {
     category: PermissionCategory
diff --git a/src/app/_components/PopUp/PopUp.module.scss b/src/app/_components/PopUp/PopUp.module.scss
index c3becf4ac..b2952fb83 100644
--- a/src/app/_components/PopUp/PopUp.module.scss
+++ b/src/app/_components/PopUp/PopUp.module.scss
@@ -1,30 +1,50 @@
 @use '@/styles/ohma';
 
 .PopUp {
-    @include ohma.layer();
+    background-color: rgba(0, 0, 0, 0.55);
     z-index: 8;
     position: fixed;
     top: 0;
     left: 0;
     > .main {
-        @include ohma.boxShadow('');
         @include ohma.card;
-        background-color: ohma.$colors-secondary;
-        padding: 3*ohma.$gap;
+        width: min-content;
+        border-radius: ohma.$rounding;
+        background-color: ohma.$colors-surface-base;
+        padding: calc(3 * #{ohma.$gap});
         z-index: 9;
         max-height: 95svh;
         > .overflow {
             overflow-y: auto;
             margin: 0;
             padding: 0;
-            max-height: calc(95svh - ohma.$cardPadding * 2);
+            max-height: calc(95svh - #{ohma.$cardPadding} * 2);
         }
     }
 }
 
 .closeBtn {
-    background-color: ohma.$colors-red;
-    @include ohma.roundBtn(ohma.$colors-red);
+    background-color: ohma.$colors-accent-red;
+    border: none;
+    border-radius: ohma.$gap;
+    width: 48px;
+    height: 48px;
+    padding: ohma.$gap;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: ohma.$colors-text-inv;
+    transition: background-color .5s;
+
+    &:hover {
+        background-color: color-mix(in srgb, ohma.$colors-accent-red, white 20%);
+    }
+
+    > svg {
+        width: 40%;
+        height: 40%;
+    }
 }
 
 .openBtn {
@@ -39,7 +59,7 @@
 
 @include ohma.screenLg {
     .PopUp {
-        backdrop-filter: blur(5px);
+        backdrop-filter: blur(2px);
         width: 100vw;
         height: 100vh;
         > .main {
@@ -50,10 +70,8 @@
         }
         .closeBtn {
             position: absolute;
-            top: -10px;
-            left: -10px;
-            width: 40px;
-            height: 40px;
+            top: calc(-48px - #{ohma.$gap});
+            left: 0;
         }
     }
 }
@@ -66,14 +84,12 @@
         > .main {
             width: 100svw;
             translate: 0 calc(100svh - 100%);
-            border-radius: ohma.$cardRounding ohma.$cardRounding 0 0;
+            border-radius: ohma.$rounding ohma.$rounding 0 0;
         }
         .closeBtn {
             position: absolute;
-            top: 2*ohma.$gap;
-            right: 2*ohma.$gap;
-            width: 3em;
-            height: 3em;
+            top: calc(-7 * #{ohma.$gap});
+            left: calc(2 * #{ohma.$gap});
         }
     }
 }
diff --git a/src/app/_components/ProgressBar/ProgressBar.module.scss b/src/app/_components/ProgressBar/ProgressBar.module.scss
index e4e68ab70..3cd5bf761 100644
--- a/src/app/_components/ProgressBar/ProgressBar.module.scss
+++ b/src/app/_components/ProgressBar/ProgressBar.module.scss
@@ -3,7 +3,7 @@
 .ProgressBar {
     width: 100%;
     height: 20px;
-    background-color: ohma.$colors-gray-400;
+    background-color: ohma.$colors-surface-raised;
     border-radius: 10px;
     overflow: hidden;
     box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
@@ -11,7 +11,7 @@
 
 .bar {
     height: 100%;
-    background-color: ohma.$colors-primary;
+    background-color: ohma.$colors-accent-blue;
     width: calc(var(--progress) * 100%);
     transition: width 0.3s ease-in-out;
 }
diff --git a/src/app/_components/School/School.module.scss b/src/app/_components/School/School.module.scss
index 6320db473..6c20366e9 100644
--- a/src/app/_components/School/School.module.scss
+++ b/src/app/_components/School/School.module.scss
@@ -5,7 +5,7 @@ $imageWidth: 300px;
 .School {
     position: relative;
     display: flex;
-    background-color: ohma.$colors-secondary;
+    background-color: ohma.$colors-surface-base;
     @include ohma.card();
     @include ohma.boxShadow('');
     &:hover {
diff --git a/src/app/_components/School/School.tsx b/src/app/_components/School/School.tsx
index 6aff5d8a8..7a21aca7a 100644
--- a/src/app/_components/School/School.tsx
+++ b/src/app/_components/School/School.tsx
@@ -1,5 +1,4 @@
 import styles from './School.module.scss'
-import CmsImageClient from '@/cms/CmsImage/CmsImageClient'
 import CmsLink from '@/cms/CmsLink/CmsLink'
 import CmsImage from '@/cms/CmsImage/CmsImage'
 import CmsParagraph from '@/cms/CmsParagraph/CmsParagraph'
@@ -15,41 +14,29 @@ import type{ SessionMaybeUser } from '@/auth/session/Session'
 
 type PropTypes = {
     school: ExpandedSchool
-    asClient?: boolean
     session: SessionMaybeUser
 }
 
-export default function School({ school, asClient = false, session }: PropTypes) {
+export default function School({ school, session }: PropTypes) {
     const updateCmsImageAction = configureAction(
         updateSchoolCmsImageAction,
         { implementationParams: { shortName: school.shortName } }
     )
 
     const canEditCmsImage = schoolAuth.updateCmsImage.dynamicFields({}).auth(session).toJsObject()
-    const canEditCmsParagraph = schoolAuth.updateCmsParagraph.dynamicFields({}).auth(session).toJsObject()
+    const canEditCmsParagraph = schoolAuth.updateCmsParagraphContent.dynamicFields({}).auth(session).toJsObject()
     const canEditCmsLink = schoolAuth.updateCmsLink.dynamicFields({}).auth(session).toJsObject()
 
     return (
         <div className={styles.School}>
-            {
-                asClient ? (
-                    <CmsImageClient
-                        canEdit={canEditCmsImage}
-                        className={styles.cmsImage}
-                        classNameImage={styles.image}
-                        cmsImage={school.cmsImage}
-                        width={200}
-                        updateCmsImageAction={updateCmsImageAction}
-                    />
-                ) : <CmsImage
-                    canEdit={canEditCmsImage}
-                    className={styles.cmsImage}
-                    classNameImage={styles.image}
-                    cmsImage={school.cmsImage}
-                    width={200}
-                    updateCmsImageAction={updateCmsImageAction}
-                />
-            }
+            <CmsImage
+                canEdit={canEditCmsImage}
+                className={styles.cmsImage}
+                classNameImage={styles.image}
+                cmsImage={school.cmsImage}
+                width={200}
+                updateCmsImageAction={updateCmsImageAction}
+            />
 
             <div className={styles.text}>
                 <div className={styles.name}>
diff --git a/src/app/_components/School/SchoolList.tsx b/src/app/_components/School/SchoolList.tsx
index ce2b3d7f1..2727544d6 100644
--- a/src/app/_components/School/SchoolList.tsx
+++ b/src/app/_components/School/SchoolList.tsx
@@ -24,10 +24,7 @@ export default function SchoolList({ serverRendered }: PropTypes) {
         <div className={styles.SchoolList}>
             {serverRendered}
             <EndlessScroll renderer={
-                schoolListRenderer(
-                    true,
-                    session.loading ? Session.empty() : session.session
-                )
+                schoolListRenderer(session.loading ? Session.empty() : session.session)
             } pagingContext={SchoolPagingContext} />
         </div>
     )
diff --git a/src/app/_components/School/SchoolListRenderer.tsx b/src/app/_components/School/SchoolListRenderer.tsx
index 0b2dc7a6d..b023610f1 100644
--- a/src/app/_components/School/SchoolListRenderer.tsx
+++ b/src/app/_components/School/SchoolListRenderer.tsx
@@ -8,5 +8,5 @@ import type { SessionMaybeUser } from '@/auth/session/Session'
  * @returns
  */
 // eslint-disable-next-line react/display-name
-export const schoolListRenderer = (asClient: boolean, session: SessionMaybeUser) => (school: ExpandedSchool) =>
-    <School key={school.shortName} asClient={asClient} school={school} session={session} />
+export const schoolListRenderer = (session: SessionMaybeUser) => (school: ExpandedSchool) =>
+    <School key={school.shortName} school={school} session={session} />
diff --git a/src/app/_components/UI/BorderButton.module.scss b/src/app/_components/UI/BorderButton.module.scss
deleted file mode 100644
index 57cb8fae0..000000000
--- a/src/app/_components/UI/BorderButton.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use "@/styles/ohma";
-
-.primary {
-    @include ohma.borderBtn(ohma.$colors-primary);
-}
-
-.secondary {
-    @include ohma.borderBtn(ohma.$colors-secondary);
-}
\ No newline at end of file
diff --git a/src/app/_components/UI/BorderButton.tsx b/src/app/_components/UI/BorderButton.tsx
deleted file mode 100644
index f0c7ab19c..000000000
--- a/src/app/_components/UI/BorderButton.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import styles from './BorderButton.module.scss'
-import React from 'react'
-import type { ButtonHTMLAttributes } from 'react'
-
-
-type PropTypes = ButtonHTMLAttributes<HTMLButtonElement> & {
-    children: React.ReactNode,
-    color?: 'primary' | 'secondary',
-}
-
-export default function BorderButton({ color = 'primary', children, ...props }: PropTypes) {
-    return <button className={styles[color]} {...props}>{ children }</button>
-}
diff --git a/src/app/_components/UI/Button.module.scss b/src/app/_components/UI/Button.module.scss
index 4529b9fc0..9b4c9a0fe 100644
--- a/src/app/_components/UI/Button.module.scss
+++ b/src/app/_components/UI/Button.module.scss
@@ -1,22 +1,22 @@
 @use "@/styles/ohma";
 
 .primary {
-    @include ohma.btn(ohma.$colors-primary);
+    @include ohma.btn(ohma.$colors-accent-blue);
 }
 
 .secondary {
-    @include ohma.btn(ohma.$colors-secondary);
+    @include ohma.secondaryBtn;
 }
 
 .green {
-    @include ohma.btn(ohma.$colors-green);
+    @include ohma.btn(ohma.$colors-accent-green);
 }
 
 .red {
-    @include ohma.btn(ohma.$colors-red);
+    @include ohma.btn(ohma.$colors-accent-red);
 }
 
 .button:disabled {
-    background-color: ohma.$colors-gray-200;
-    color: ohma.$colors-gray-600;
+    background-color: ohma.$colors-surface-hover;
+    color: ohma.$colors-text-muted;
 }
diff --git a/src/app/_components/UI/Checkbox.module.scss b/src/app/_components/UI/Checkbox.module.scss
index 15109aa79..38121042a 100644
--- a/src/app/_components/UI/Checkbox.module.scss
+++ b/src/app/_components/UI/Checkbox.module.scss
@@ -1,20 +1,68 @@
 @use "@/styles/ohma";
 
 .Checkbox {
-    font-size: ohma.$fonts-l;
-    margin: 0.5em 5px 0.5em 5px;
+    font-size: ohma.$fonts-m;
+    color: ohma.$colors-ink-strong;
+    margin: calc(0.5 * #{ohma.$gap}) calc(0.5 * #{ohma.$gap}) calc(0.5 * #{ohma.$gap}) 0;
     box-sizing: border-box;
-    display: inline-block;
-    vertical-align: top;
+    display: inline-flex;
+    align-items: center;
 
     > .input {
-        display: inline-block;
-        vertical-align: top;
-        margin-right: 4px;
+        appearance: none;
+        display: inline-grid;
+        place-content: center;
+        flex-shrink: 0;
+        width: calc(2.5 * #{ohma.$gap});
+        height: calc(2.5 * #{ohma.$gap});
+        margin-right: ohma.$gap;
+        border: 2px solid ohma.$colors-text-muted;
+        border-radius: calc(#{ohma.$gap} * 0.75);
+        background-color: transparent;
+        cursor: pointer;
+        transition: background-color ohma.$transitionTime, border-color ohma.$transitionTime;
+
+        &::after {
+            content: '';
+            width: 5px;
+            height: 9px;
+            border: solid ohma.$colors-text-inv;
+            border-width: 0 2px 2px 0;
+            transform: rotate(45deg) translate(-1px, -1px);
+            opacity: 0;
+            transition: opacity ohma.$transitionTime;
+        }
+
+        &:hover {
+            border-color: ohma.$colors-accent-blue;
+        }
+
+        &:checked {
+            background-color: ohma.$colors-accent-blue;
+            border-color: ohma.$colors-accent-blue;
+
+            &::after {
+                opacity: 1;
+            }
+        }
+
+        &:focus-visible {
+            outline: 2px solid ohma.$colors-accent-blue;
+            outline-offset: 2px;
+        }
+
+        &:disabled {
+            cursor: not-allowed;
+            opacity: 0.5;
+        }
+    }
+
+    > label {
+        cursor: pointer;
     }
 
     .inputAndChildren {
         display: flex;
         align-items: center;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/_components/UI/ColorInput.module.scss b/src/app/_components/UI/ColorInput.module.scss
index 9a8ab59b9..6d1ab7e55 100644
--- a/src/app/_components/UI/ColorInput.module.scss
+++ b/src/app/_components/UI/ColorInput.module.scss
@@ -1,10 +1,95 @@
 @use '@/styles/ohma';
 
 .ColorInput {
+    position: relative;
+    width: 100%;
+    max-width: 320px;
+    margin-top: ohma.$gap;
+}
+
+// The native colour input is what opens the OS picker, so it stays focusable
+// and labelled; the .trigger below is the part that is actually styled.
+.field {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.trigger {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: ohma.$gap;
+    border: 2px solid transparent;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    outline: 0;
+    font-size: ohma.$fonts-m;
+    text-align: left;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(3 * #{ohma.$gap}) calc(2 * #{ohma.$gap}) calc(1 * #{ohma.$gap});
+    transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
+    cursor: pointer;
+
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
+    }
+}
+
+.swatch {
+    flex-shrink: 0;
+    width: calc(#{ohma.$fonts-m} * 1.25);
+    height: calc(#{ohma.$fonts-m} * 1.25);
+    border-radius: calc(#{ohma.$rounding} - 1.5 * #{ohma.$gap});
+    box-shadow: inset 0 0 0 1px ohma.$colors-surface-subtle;
+}
+
+// globals.scss sets `color` on the universal selector, which matches this span
+// directly and would beat an inherited colour from .trigger.
+.value {
+    min-height: calc(#{ohma.$fonts-m} * 1.25);
     display: flex;
-    flex-direction: column;
-    input {
-        width: 3em;
-        height: 3em;
+    align-items: center;
+    font-variant-numeric: tabular-nums;
+    color: ohma.$colors-ink-strong;
+}
+
+.labe {
+    position: absolute;
+    left: calc(2 * #{ohma.$gap});
+    top: calc(1 * #{ohma.$gap});
+    display: block;
+    font-size: calc(#{ohma.$fonts-s} * 0.85);
+    color: ohma.$colors-text-muted;
+    transition: ohma.$transitionTime;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.field:focus ~ .trigger {
+    border-color: ohma.$colors-accent-blue;
+    background-color: ohma.$colors-surface-hover;
+}
+
+.field:focus ~ .labe {
+    color: ohma.$colors-accent-blue;
+}
+
+.field:disabled ~ .trigger {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.onRaised > .trigger {
+    background-color: ohma.$colors-surface-hover;
+
+    &:hover {
+        background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
     }
-}
\ No newline at end of file
+}
+
+.onRaised > .field:focus ~ .trigger {
+    background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+}
diff --git a/src/app/_components/UI/ColorInput.tsx b/src/app/_components/UI/ColorInput.tsx
index 053f8fbbf..5e71eb0c3 100644
--- a/src/app/_components/UI/ColorInput.tsx
+++ b/src/app/_components/UI/ColorInput.tsx
@@ -1,5 +1,7 @@
+'use client'
 import styles from './ColorInput.module.scss'
-import type { InputHTMLAttributes } from 'react'
+import { useId, useState } from 'react'
+import type { InputHTMLAttributes, ChangeEvent } from 'react'
 
 export type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
     defaultValueRGB?: {
@@ -8,6 +10,7 @@ export type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
         blue: number
     }
     label: string,
+    background?: 'base' | 'raised',
 }
 
 const rgbToHex = (red: number, green: number, blue: number): string => {
@@ -20,22 +23,57 @@ const rgbToHex = (red: number, green: number, blue: number): string => {
 }
 
 /**
- * A component for selecting a color. Uses the HTML input type color and native browser color picker.
+ * A component for selecting a color. Uses the HTML input type color and native browser color picker,
+ * dressed as a form field so it sits alongside the other inputs: the swatch takes the place of the
+ * field value, with the selected hex shown next to it.
  * @param label - the label of the input (displayed to user)
  * @param className - the class name of the input
  * @param defaultValueRGB - the default value of the input in RGB format
+ * @param background - 'raised' when the field sits on a raised surface
  * @prop name - the name of the input
  * @returns
  */
-export default function ColorInput({ label, className, defaultValueRGB, ...props }: PropTypes) {
+export default function ColorInput({
+    label,
+    className,
+    defaultValueRGB,
+    background = 'base',
+    onChange,
+    ...props
+}: PropTypes) {
+    const domId = useId()
+    const inputId = props.id ?? domId
+
     if (defaultValueRGB) {
         const { red, green, blue } = defaultValueRGB
         props.defaultValue = rgbToHex(red, green, blue)
     }
+
+    const [color, setColor] = useState(String(props.value ?? props.defaultValue ?? '#000000'))
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setColor(event.target.value)
+        onChange?.(event)
+    }
+
     return (
-        <div className={`${styles.ColorInput} ${className}`}>
-            <label>{label}</label>
-            <input type="color" {...props} />
+        <div
+            className={
+                `${styles.ColorInput} ${background === 'raised' ? styles.onRaised : ''} ${className ?? ''}`
+            }
+        >
+            <input
+                {...props}
+                id={inputId}
+                type="color"
+                className={styles.field}
+                onChange={handleChange}
+            />
+            <label htmlFor={inputId} className={styles.trigger}>
+                <span className={styles.swatch} style={{ backgroundColor: color }} />
+                <span className={styles.value}>{color.toUpperCase()}</span>
+            </label>
+            <label htmlFor={inputId} className={styles.labe}>{label}</label>
         </div>
     )
 }
diff --git a/src/app/_components/UI/DateInput.module.scss b/src/app/_components/UI/DateInput.module.scss
index dd4a10c2e..05f7bbbcd 100644
--- a/src/app/_components/UI/DateInput.module.scss
+++ b/src/app/_components/UI/DateInput.module.scss
@@ -3,31 +3,73 @@
 .DateInput {
     display: flex;
     flex-direction: column;
-    width: 200px;
+    gap: ohma.$gap;
+    margin-top: ohma.$gap;
+    width: 100%;
+    max-width: 320px;
+
     input[type="date"], input[type="datetime-local"] {
-        padding: 10px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-        font-size: 16px;
+        color-scheme: dark;
+        width: 100%;
+        background-color: ohma.$colors-surface-raised;
+        border: 2px solid transparent;
+        border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+        // The native picker indicator inflates the content box, so pin the
+        // height to the grid rather than letting it be derived.
+        height: calc(7 * #{ohma.$gap});
+        padding: calc(2 * #{ohma.$gap}) calc(2 * #{ohma.$gap});
+        line-height: calc(#{ohma.$fonts-m} * 1.25);
+        font-size: ohma.$fonts-m;
+        color: ohma.$colors-ink-strong;
+        transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
+
+        &:hover {
+            background-color: ohma.$colors-surface-hover;
+        }
+
+        &:focus {
+            outline: 0;
+            border-color: ohma.$colors-accent-blue;
+            background-color: ohma.$colors-surface-hover;
+        }
+
+        &::-webkit-calendar-picker-indicator {
+            cursor: pointer;
+            border-radius: calc(#{ohma.$gap} / 2);
+            transition: background-color ohma.$transitionTime;
+
+            &:hover {
+                background-color: ohma.$colors-surface-subtle;
+            }
+        }
+    }
+
+    .label {
+        font-size: ohma.$fonts-s;
+        color: ohma.$colors-text-muted;
     }
+
     &.white {
-        color: ohma.$colors-white;
+        color: ohma.$colors-text-inv;
     }
     &.primary {
-        color: ohma.$colors-primary;
+        color: ohma.$colors-accent-blue;
     }
     &.secondary {
-        color: ohma.$colors-secondary;
+        color: ohma.$colors-surface-base;
     }
     &.red {
-        color: ohma.$colors-red;
+        color: ohma.$colors-accent-red;
     }
     &.black {
-        color: ohma.$colors-black;
+        color: ohma.$colors-text;
     }
-}
-
-
-
 
+    &.onRaised input[type="date"], &.onRaised input[type="datetime-local"] {
+        background-color: ohma.$colors-surface-hover;
 
+        &:hover, &:focus {
+            background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+        }
+    }
+}
diff --git a/src/app/_components/UI/DateInput.tsx b/src/app/_components/UI/DateInput.tsx
index 1f5bdab9f..8fb00aaf9 100644
--- a/src/app/_components/UI/DateInput.tsx
+++ b/src/app/_components/UI/DateInput.tsx
@@ -14,6 +14,7 @@ type PropTypes = Omit<PropTypesInput, 'type' | 'defaultValue'> & {
 export default function DateInput({
     label = 'default',
     color = 'black',
+    background = 'base',
     className,
     defaultValue,
     includeTime = false,
@@ -32,7 +33,11 @@ export default function DateInput({
     }
 
     return (
-        <div className={`${styles.DateInput} ${styles[color]} ${className}`}>
+        <div
+            className={
+                `${styles.DateInput} ${styles[color]} ${background === 'raised' ? styles.onRaised : ''} ${className}`
+            }
+        >
             <label className={styles.label}>{label}</label>
             <input
                 onChange={setUtc}
diff --git a/src/app/_components/UI/Dropdown.module.scss b/src/app/_components/UI/Dropdown.module.scss
new file mode 100644
index 000000000..f7bdc5742
--- /dev/null
+++ b/src/app/_components/UI/Dropdown.module.scss
@@ -0,0 +1,147 @@
+@use '@/styles/ohma';
+
+.Dropdown {
+    position: relative;
+    margin-top: ohma.$gap;
+    width: 100%;
+    max-width: 320px;
+}
+
+.trigger {
+    position: relative;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    border: 2px solid transparent;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    outline: 0;
+    font-size: ohma.$fonts-m;
+    text-align: left;
+    color: ohma.$colors-ink-strong;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(3 * #{ohma.$gap}) calc(5 * #{ohma.$gap}) calc(1 * #{ohma.$gap}) calc(2 * #{ohma.$gap});
+    transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
+    cursor: pointer;
+
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+}
+
+// globals.scss sets `color` on the universal selector, which matches this span
+// directly — and a direct match beats the colour inherited from .trigger, so the
+// value has to be coloured here (and in the variants below) rather than only on
+// the trigger.
+.value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-height: calc(#{ohma.$fonts-m} * 1.25);
+    color: ohma.$colors-ink-strong;
+}
+
+.chevron {
+    position: absolute;
+    right: calc(2 * #{ohma.$gap});
+    top: 50%;
+    transform: translateY(-50%);
+    color: ohma.$colors-text-muted;
+    transition: transform ohma.$transitionTime, color ohma.$transitionTime;
+}
+
+.labe {
+    position: absolute;
+    left: calc(2 * #{ohma.$gap});
+    top: calc(3 * #{ohma.$gap});
+    display: block;
+    font-size: ohma.$fonts-m;
+    color: ohma.$colors-text-muted;
+    transition: ohma.$transitionTime;
+    pointer-events: none;
+    z-index: 1;
+
+    &.floated {
+        top: calc(1 * #{ohma.$gap});
+        font-size: calc(#{ohma.$fonts-s} * 0.85);
+    }
+}
+
+.panel {
+    position: absolute;
+    top: calc(100% + #{ohma.$gap});
+    left: 0;
+    right: 0;
+    z-index: 5;
+    list-style: none;
+    margin: 0;
+    padding: ohma.$gap;
+    max-height: 260px;
+    overflow-y: auto;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    background-color: ohma.$colors-surface-hover;
+    box-shadow: ohma.$colors-boxShadow 0 3px 6px, ohma.$colors-boxShadow 0 3px 6px;
+
+    button {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: ohma.$gap;
+        border: none;
+        background: transparent;
+        text-align: left;
+        font-size: ohma.$fonts-m;
+        color: ohma.$colors-text;
+        padding: calc(#{ohma.$gap}) calc(2 * #{ohma.$gap});
+        border-radius: calc(#{ohma.$rounding} - 1.5 * #{ohma.$gap});
+        cursor: pointer;
+        transition: background-color ohma.$transitionTime;
+
+        &:hover, &.active {
+            background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+        }
+
+        &.selected {
+            color: ohma.$colors-accent-blue;
+        }
+    }
+}
+
+.onRaised > .trigger {
+    background-color: ohma.$colors-surface-hover;
+
+    &:hover {
+        background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+    }
+}
+
+.open > .trigger {
+    border-color: ohma.$colors-accent-blue;
+    background-color: ohma.$colors-surface-hover;
+
+    .chevron {
+        transform: translateY(-50%) rotate(180deg);
+        color: ohma.$colors-accent-blue;
+    }
+}
+
+.primary > .trigger, .primary > .trigger .value {
+    color: ohma.$colors-accent-blue;
+}
+
+.secondary > .trigger, .secondary > .trigger .value {
+    color: ohma.$colors-text;
+}
+
+.red > .trigger, .red > .trigger .value {
+    color: ohma.$colors-accent-red;
+}
+
+.white > .trigger, .white > .trigger .value {
+    color: ohma.$colors-white;
+}
diff --git a/src/app/_components/UI/Dropdown.tsx b/src/app/_components/UI/Dropdown.tsx
new file mode 100644
index 000000000..9e0759112
--- /dev/null
+++ b/src/app/_components/UI/Dropdown.tsx
@@ -0,0 +1,157 @@
+'use client'
+import styles from './Dropdown.module.scss'
+import useClickOutsideRef from '@/hooks/useClickOutsideRef'
+import useKeyPress from '@/hooks/useKeyPress'
+import { useEffect, useId, useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import type { KeyboardEvent, ReactNode } from 'react'
+
+export type DropdownOption<ValueType> = {
+    value: ValueType,
+    label?: ReactNode,
+    key?: string,
+}
+
+export type PropTypes<ValueType> = {
+    name: string,
+    label: string,
+    defaultValue?: ValueType,
+    options: DropdownOption<ValueType>[],
+    onChange?: (value: ValueType) => void,
+    color?: 'primary' | 'secondary' | 'red' | 'black' | 'white',
+    background?: 'base' | 'raised',
+    className?: string,
+    disabled?: boolean,
+}
+
+export default function Dropdown<ValueType extends string | number>({
+    name,
+    label,
+    defaultValue,
+    options,
+    onChange,
+    color = 'black',
+    background = 'base',
+    className,
+    disabled,
+}: PropTypes<ValueType>) {
+    const [value, setValue] = useState<ValueType | undefined>(defaultValue)
+    const [open, setOpen] = useState(false)
+    const [activeIndex, setActiveIndex] = useState(-1)
+    const domId = useId()
+    const panelRef = useRef<HTMLUListElement>(null)
+
+    const close = () => setOpen(false)
+    const ref = useClickOutsideRef(close)
+    useKeyPress('Escape', close)
+
+    const selectedOption = options.find(option => option.value === value)
+
+    useEffect(() => {
+        if (!open) return
+        panelRef.current?.querySelector(`.${styles.active}`)?.scrollIntoView({ block: 'nearest' })
+    }, [activeIndex, open])
+
+    const handleSelect = (option: DropdownOption<ValueType>) => {
+        setValue(option.value)
+        setOpen(false)
+        onChange?.(option.value)
+    }
+
+    const openWithActive = () => {
+        const startIndex = value !== undefined ? options.findIndex(option => option.value === value) : -1
+        setActiveIndex(startIndex >= 0 ? startIndex : 0)
+        setOpen(true)
+    }
+
+    const handleTriggerClick = () => {
+        if (open) {
+            setOpen(false)
+        } else {
+            openWithActive()
+        }
+    }
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLButtonElement>) => {
+        if (options.length === 0) return
+        if (event.key === 'ArrowDown') {
+            event.preventDefault()
+            if (!open) {
+                openWithActive()
+                return
+            }
+            setActiveIndex(previousIndex => (previousIndex + 1) % options.length)
+        } else if (event.key === 'ArrowUp') {
+            event.preventDefault()
+            if (!open) {
+                openWithActive()
+                return
+            }
+            setActiveIndex(previousIndex => (previousIndex - 1 + options.length) % options.length)
+        } else if (event.key === 'Enter') {
+            if (open && options[activeIndex]) {
+                event.preventDefault()
+                handleSelect(options[activeIndex])
+            }
+        }
+    }
+
+    return (
+        <div
+            ref={ref}
+            id={name}
+            className={
+                `${styles.Dropdown} ${styles[color]} ` +
+                `${background === 'raised' ? styles.onRaised : ''} ${open ? styles.open : ''} ${className ?? ''}`
+            }
+        >
+            <button
+                type="button"
+                id={domId}
+                className={styles.trigger}
+                disabled={disabled}
+                aria-haspopup="listbox"
+                aria-expanded={open}
+                onClick={handleTriggerClick}
+                onKeyDown={handleKeyDown}
+            >
+                <span className={styles.value}>{selectedOption?.label ?? selectedOption?.value ?? ''}</span>
+                <FontAwesomeIcon icon={faChevronDown} className={styles.chevron} />
+            </button>
+            <label
+                htmlFor={domId}
+                className={`${styles.labe} ${(open || selectedOption) ? styles.floated : ''}`}
+            >
+                {label}
+            </label>
+            {
+                open && (
+                    <ul className={styles.panel} role="listbox" ref={panelRef}>
+                        {
+                            options.map((option, index) => (
+                                <li key={option.key ?? String(option.value)}>
+                                    <button
+                                        type="button"
+                                        role="option"
+                                        aria-selected={option.value === value}
+                                        className={
+                                            `${option.value === value ? styles.selected : ''} ` +
+                                            `${index === activeIndex ? styles.active : ''}`
+                                        }
+                                        onClick={() => handleSelect(option)}
+                                        onMouseEnter={() => setActiveIndex(index)}
+                                    >
+                                        <span>{option.label ?? option.value}</span>
+                                        {option.value === value && <FontAwesomeIcon icon={faCheck} />}
+                                    </button>
+                                </li>
+                            ))
+                        }
+                    </ul>
+                )
+            }
+            <input type="hidden" name={name} value={value ?? ''} readOnly />
+        </div>
+    )
+}
diff --git a/src/app/_components/UI/Dropzone.module.scss b/src/app/_components/UI/Dropzone.module.scss
index c20a71dc1..5106ce149 100644
--- a/src/app/_components/UI/Dropzone.module.scss
+++ b/src/app/_components/UI/Dropzone.module.scss
@@ -8,8 +8,8 @@
     > .uploader {
         width: 100%;
         position: relative;
-        border: 2px dashed ohma.$colors-primary;
-        padding: 3*ohma.$gap;
+        border: 2px dashed ohma.$colors-accent-blue;
+        padding: calc(3 * #{ohma.$gap});
         display: flex;
         justify-content: center;
         align-items: center;    
@@ -32,18 +32,18 @@
         }
         > svg, p {
             z-index: -1;
-            transition: scale 0.2s;
+            transition: scale ohma.$transitionTime;
         }
         > svg {
             width: 30px;
             height: 30px;
-            margin: 2*ohma.$gap;
+            margin: calc(2 * #{ohma.$gap});
         }
     }
     > span {
-        margin-top: 2*ohma.$gap;
+        margin-top: calc(2 * #{ohma.$gap});
         padding: .5em;
-        background-color: color-mix(in srgb, ohma.$colors-primary, white 15%);
+        background-color: color-mix(in srgb, ohma.$colors-accent-blue, white 15%);
         > .general {
             display: flex;
             justify-content: space-between;
@@ -69,7 +69,7 @@
             > svg {
                 width: 20px;
                 height: 20px;
-                color: ohma.$colors-red;
+                color: ohma.$colors-accent-red;
             }
         }
         ul {
@@ -90,7 +90,7 @@
                     margin: 0 ohma.$gap;
                 }
                 @include ohma.round;
-                background-color: color-mix(in srgb, ohma.$colors-primary, white 40%);
+                background-color: color-mix(in srgb, ohma.$colors-accent-blue, white 40%);
                 padding: .5em;
                 margin: .3em 0;
             }
@@ -100,12 +100,12 @@
 
 @keyframes pulse {
     0% {
-        background-color: rgba(ohma.$colors-primary, 0);
+        background-color: rgba(ohma.$colors-accent-blue, 0);
     }
     50% {
-        background-color: rgba(ohma.$colors-primary, .6);
+        background-color: rgba(ohma.$colors-accent-blue, .6);
     }
     100% {
-        background-color: rgba(ohma.$colors-primary, 0);
+        background-color: rgba(ohma.$colors-accent-blue, 0);
     }
 }
\ No newline at end of file
diff --git a/src/app/_components/UI/FileInput.module.scss b/src/app/_components/UI/FileInput.module.scss
index 7f42c1837..365bfc798 100644
--- a/src/app/_components/UI/FileInput.module.scss
+++ b/src/app/_components/UI/FileInput.module.scss
@@ -1,57 +1,143 @@
 @use '@/styles/ohma';
 
 .FileInput {
+    position: relative;
+    width: 100%;
+    max-width: 320px;
+    margin-top: ohma.$gap;
+}
+
+// The real input stays in the layout so it can hold focus and be labelled,
+// but the .trigger below is what the user actually sees.
+.field {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.trigger {
+    position: relative;
+    width: 100%;
     display: flex;
-    flex-direction: row;
     align-items: center;
+    border: 2px solid transparent;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    outline: 0;
+    font-size: ohma.$fonts-m;
+    text-align: left;
+    color: ohma.$colors-ink-strong;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(3 * #{ohma.$gap}) calc(5 * #{ohma.$gap}) calc(1 * #{ohma.$gap}) calc(2 * #{ohma.$gap});
+    transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
+    cursor: pointer;
 
-    .field {
-        width: 0.1px;
-        height: 0.1px;
-        opacity: 0;
-        overflow: hidden;
-        position: absolute;
-        z-index: -1;
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
     }
+}
 
-    .label {
-        min-width: 30%;
-        text-align: center;
-        cursor: pointer;
-        @include ohma.round;
-        padding: .1em .5em;
-    }
+// globals.scss sets `color` on the universal selector, which matches this span
+// directly — and a direct match beats an inherited one. So the colour variants
+// below have to target .value itself, not just .trigger.
+.value {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-height: calc(#{ohma.$fonts-m} * 1.25);
+    color: ohma.$colors-ink-strong;
+}
 
-    .fileName {
-        margin: ohma.$gap;
-        overflow-y: hidden;
-    }
+// Positioned against the whole trigger rather than the text row: the trigger's
+// padding is deliberately top-heavy to leave room for the floated label, so a
+// flex-centred icon would sit visibly low.
+.icon {
+    position: absolute;
+    right: calc(2 * #{ohma.$gap});
+    top: 50%;
+    transform: translateY(-50%);
+    color: ohma.$colors-text-muted;
+    transition: color ohma.$transitionTime;
+}
+
+.labe {
+    position: absolute;
+    left: calc(2 * #{ohma.$gap});
+    top: calc(3 * #{ohma.$gap});
+    display: block;
+    font-size: ohma.$fonts-m;
+    color: ohma.$colors-text-muted;
+    transition: ohma.$transitionTime;
+    pointer-events: none;
+    z-index: 1;
 
-    &.primary {
-        .label {
-            background-color: ohma.$colors-primary;
-            color: ohma.$colors-black;
-        }
+    &.floated {
+        top: calc(1 * #{ohma.$gap});
+        font-size: calc(#{ohma.$fonts-s} * 0.85);
     }
+}
 
-    &.secondary {
-        .label {
-            background-color: ohma.$colors-secondary;
-            color: ohma.$colors-white;
-        }
+.field:focus ~ .trigger {
+    border-color: ohma.$colors-accent-blue;
+    background-color: ohma.$colors-surface-hover;
+
+    .icon {
+        color: ohma.$colors-accent-blue;
     }
+}
+
+.field:focus ~ .labe {
+    top: calc(1 * #{ohma.$gap});
+    font-size: calc(#{ohma.$fonts-s} * 0.85);
+    color: ohma.$colors-accent-blue;
+}
+
+.field:disabled ~ .trigger {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.black > .trigger .value {
+    color: ohma.$colors-ink-strong;
+}
 
-    &.red {
-        .label {
-            background-color: ohma.$colors-red;
-            color: ohma.$colors-black;
-        }
+.primary > .trigger .value {
+    color: ohma.$colors-accent-blue;
+}
+
+.secondary > .trigger .value {
+    color: ohma.$colors-text;
+}
+
+.red > .trigger .value {
+    color: ohma.$colors-accent-red;
+}
+
+.red > .field:focus ~ .trigger {
+    border-color: ohma.$colors-accent-red;
+
+    .icon {
+        color: ohma.$colors-accent-red;
     }
+}
 
-    &.black {
-        .label {
-            background-color: ohma.$colors-black;
-            color: ohma.$colors-white;
-        }
+.red > .field:focus ~ .labe {
+    color: ohma.$colors-accent-red;
+}
+
+.white > .trigger .value {
+    color: ohma.$colors-white;
+}
+
+.onRaised > .trigger {
+    background-color: ohma.$colors-surface-hover;
+
+    &:hover {
+        background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
     }
-}
\ No newline at end of file
+}
+
+.onRaised > .field:focus ~ .trigger {
+    background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+}
diff --git a/src/app/_components/UI/FileInput.tsx b/src/app/_components/UI/FileInput.tsx
index 7e9e04619..a615c2494 100644
--- a/src/app/_components/UI/FileInput.tsx
+++ b/src/app/_components/UI/FileInput.tsx
@@ -1,31 +1,68 @@
 'use client'
 import styles from './FileInput.module.scss'
-import { useState } from 'react'
-import { v4 as uuid } from 'uuid'
+import { useId, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPaperclip } from '@fortawesome/free-solid-svg-icons'
 import type { InputHTMLAttributes, ChangeEvent } from 'react'
 
-
-type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
+export type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
     label: string,
-    color?: 'primary' | 'secondary' | 'red' | 'black',
+    color?: 'primary' | 'secondary' | 'red' | 'black' | 'white',
+    background?: 'base' | 'raised',
 }
 
-export default function FileInput({ label = 'default', color, ...props }: PropTypes) {
-    props.id ??= `id_input_${uuid()}`
-    color ??= 'black'
-
-    const [fileName, setFileName] = useState('')
+/**
+ * A file picker styled like the other form fields: the real input is visually
+ * hidden but still focusable, and the surface below it doubles as the label that
+ * opens the picker. The chosen file name takes the place of the field value, so
+ * the floating label behaves exactly as it does in TextInput.
+ * @param label - The label shown to the user
+ * @param color - Colours the file name, like the other fields
+ * @param background - 'raised' when the field sits on a raised surface
+ */
+export default function FileInput({
+    label,
+    color = 'black',
+    background = 'base',
+    className,
+    onChange,
+    ...props
+}: PropTypes) {
+    const domId = useId()
+    const inputId = props.id ?? domId
+    const [fileNames, setFileNames] = useState<string[]>([])
 
     const handleFileChange = (event: ChangeEvent<HTMLInputElement>) => {
-        if (event.target.files) setFileName(event.target.files[0].name)
-        props.onChange?.(event)
+        setFileNames(Array.from(event.target.files ?? []).map(file => file.name))
+        onChange?.(event)
     }
 
+    const value = fileNames.length > 1
+        ? `${fileNames.length} filer valgt`
+        : fileNames[0] ?? ''
+
     return (
-        <div id={props.name} className={`${styles.FileInput} ${styles[color]}`}>
-            <input {...props} type="file" name={props.name} className={styles.field} onChange={handleFileChange} />
-            <label htmlFor={props.id} className={styles.label}>{label}</label>
-            <div className={styles.fileName}>{fileName}</div>
+        <div
+            id={props.name}
+            className={
+                `${styles.FileInput} ${styles[color]} ` +
+                `${background === 'raised' ? styles.onRaised : ''} ${className ?? ''}`
+            }
+        >
+            <input
+                {...props}
+                id={inputId}
+                type="file"
+                className={styles.field}
+                onChange={handleFileChange}
+            />
+            <label htmlFor={inputId} className={styles.trigger}>
+                <span className={styles.value} title={value}>{value}</span>
+                <FontAwesomeIcon icon={faPaperclip} className={styles.icon} />
+            </label>
+            <label htmlFor={inputId} className={`${styles.labe} ${value ? styles.floated : ''}`}>
+                {label}
+            </label>
         </div>
     )
 }
diff --git a/src/app/_components/UI/NumberInput.module.scss b/src/app/_components/UI/NumberInput.module.scss
index e3c99ddff..33c2a6112 100644
--- a/src/app/_components/UI/NumberInput.module.scss
+++ b/src/app/_components/UI/NumberInput.module.scss
@@ -1,29 +1,105 @@
 @use '@/styles/ohma';
 
 .NumberInput {
+    position: relative;
+    margin-top: ohma.$gap;
+    width: 100%;
+    max-width: 200px;
     display: flex;
-    flex-direction: column-reverse;
-    width: 200px;
+    flex-direction: column;
 }
 
-.NumberInput .field {
-    height: 40px;
-    border: none;
-    border-radius: 5px;
-    padding: 10px;
+.field {
+    width: 100%;
+    border: 2px solid transparent;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    outline: 0;
     font-size: ohma.$fonts-m;
-    color: ohma.$colors-secondary;
-    background-color: #fff;
-    box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
+    line-height: calc(#{ohma.$fonts-m} * 1.25);
+    color: ohma.$colors-ink-strong;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(3 * #{ohma.$gap}) calc(2 * #{ohma.$gap}) calc(1 * #{ohma.$gap});
+    transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
+    z-index: 1;
+
+    &::placeholder {
+        opacity: 0;
+    }
+
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
+    }
+
+    &:placeholder-shown ~ .labe {
+        font-size: ohma.$fonts-m;
+        cursor: text;
+        top: calc(3 * #{ohma.$gap});
+    }
+
+    &:focus, &:not(:placeholder-shown) {
+        ~ .labe {
+            top: calc(1 * #{ohma.$gap});
+            font-size: calc(#{ohma.$fonts-s} * 0.85);
+        }
+    }
+
+    &:focus {
+        border-color: ohma.$colors-accent-blue;
+        background-color: ohma.$colors-surface-hover;
+    }
 }
 
-.NumberInput .field:focus {
-    outline: none;
-    box-shadow: 0px 0px 10px ohma.$colors-secondary;
+.labe {
+    position: absolute;
+    left: calc(2 * #{ohma.$gap});
+    top: calc(3 * #{ohma.$gap});
+    display: block;
+    color: ohma.$colors-text-muted;
+    transition: ohma.$transitionTime;
+    pointer-events: none;
+    z-index: 2;
 }
 
-.NumberInput .labe {
-    font-size: 14px;
-    margin-bottom: 5px;
-    color: #666;
-}
\ No newline at end of file
+.field:focus ~ .labe {
+    color: ohma.$colors-accent-blue;
+}
+
+.black > .field {
+    color: ohma.$colors-ink-strong;
+}
+
+.primary > .field {
+    color: ohma.$colors-accent-blue;
+    &:focus {
+        border-color: ohma.$colors-accent-blue;
+        ~ .labe {
+            color: ohma.$colors-accent-blue;
+        }
+    }
+}
+
+.secondary > .field {
+    color: ohma.$colors-text;
+}
+
+.red > .field {
+    color: ohma.$colors-accent-red;
+    &:focus {
+        border-color: ohma.$colors-accent-red;
+        ~ .labe {
+            color: ohma.$colors-accent-red;
+        }
+    }
+}
+
+.white > .field {
+    color: ohma.$colors-white;
+}
+
+.onRaised > .field {
+    background-color: ohma.$colors-surface-hover;
+
+    &:hover, &:focus {
+        background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+    }
+}
diff --git a/src/app/_components/UI/NumberInput.tsx b/src/app/_components/UI/NumberInput.tsx
index ade5f5b34..f9f64338a 100644
--- a/src/app/_components/UI/NumberInput.tsx
+++ b/src/app/_components/UI/NumberInput.tsx
@@ -5,16 +5,24 @@ import type { InputHTMLAttributes } from 'react'
 export type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> & {
     label: string,
     color?: 'primary' | 'secondary' | 'red' | 'black' | 'white',
+    background?: 'base' | 'raised',
 }
 
 export default function NumberInput({
     label,
     color = 'black',
+    background = 'base',
     className,
     ...props
 }: PropTypes) {
     return (
-        <div id={props.name} className={`${styles.NumberInput} ${styles[color]} ${className}`}>
+        <div
+            id={props.name}
+            className={
+                `${styles.NumberInput} ${styles[color]} `
+                + `${background === 'raised' ? styles.onRaised : ''} ${className}`
+            }
+        >
             <input {...props} type="number" className={styles.field} placeholder={label}/>
             <label className={styles.labe}>{label}</label>
         </div>
diff --git a/src/app/_components/UI/ProfileButton.module.scss b/src/app/_components/UI/ProfileButton.module.scss
deleted file mode 100644
index 9806472f7..000000000
--- a/src/app/_components/UI/ProfileButton.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@use "@/styles/ohma";
-
-.button {
-    border: none;
-    padding: 0;
-    outline: inherit;
-    margin: ohma.$gap;
-    @include ohma.round();
-    background-color: ohma.$colors-secondary;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-decoration: none;
-    color: ohma.$colors-text;
-    * {
-        transition: 300ms; // TODO Add transition variable
-    }
-    @include ohma.boxShadow('');
-    svg {
-        width: 20px;
-        height: 20px;
-        color: ohma.$colors-text;
-        margin: .3em;
-    }
-    &:hover {
-        @include ohma.boxShadow('hover');
-        color: ohma.$colors-primary;
-        svg {
-            color: ohma.$colors-primary;
-        }
-    }
-}
\ No newline at end of file
diff --git a/src/app/_components/UI/ProfileButton.tsx b/src/app/_components/UI/ProfileButton.tsx
deleted file mode 100644
index 64867d885..000000000
--- a/src/app/_components/UI/ProfileButton.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import styles from './ProfileButton.module.scss'
-import React from 'react'
-import Link, { type LinkProps } from 'next/link'
-
-export type ProfileButtonProps = LinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    children: React.ReactNode,
-}
-
-export default function ProfileButton({ children, ...props }: ProfileButtonProps) {
-    return <Link {...props} className={styles.button}>{ children }</Link>
-}
diff --git a/src/app/_components/UI/RadioLarge.module.scss b/src/app/_components/UI/RadioLarge.module.scss
index 69ff76dff..ad3fe239a 100644
--- a/src/app/_components/UI/RadioLarge.module.scss
+++ b/src/app/_components/UI/RadioLarge.module.scss
@@ -18,7 +18,7 @@
         }
 
         input[type="radio"]:checked + label {
-            border-color: ohma.$colors-primary;
+            border-color: ohma.$colors-accent-blue;
         }
     }
 
diff --git a/src/app/_components/UI/SearchableDropdown.module.scss b/src/app/_components/UI/SearchableDropdown.module.scss
new file mode 100644
index 000000000..81d144406
--- /dev/null
+++ b/src/app/_components/UI/SearchableDropdown.module.scss
@@ -0,0 +1,144 @@
+@use '@/styles/ohma';
+
+.SearchableDropdown {
+    position: relative;
+    margin-top: ohma.$gap;
+    width: 100%;
+    max-width: 320px;
+}
+
+.field {
+    width: 100%;
+    border: 2px solid transparent;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    outline: 0;
+    font-size: ohma.$fonts-m;
+    line-height: calc(#{ohma.$fonts-m} * 1.25);
+    color: ohma.$colors-ink-strong;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(3 * #{ohma.$gap}) calc(5 * #{ohma.$gap}) calc(1 * #{ohma.$gap}) calc(2 * #{ohma.$gap});
+    transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
+
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
+    }
+
+    &:focus {
+        border-color: ohma.$colors-accent-blue;
+        background-color: ohma.$colors-surface-hover;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+}
+
+.chevron {
+    position: absolute;
+    right: calc(2 * #{ohma.$gap});
+    top: 50%;
+    transform: translateY(-50%);
+    color: ohma.$colors-text-muted;
+    transition: transform ohma.$transitionTime, color ohma.$transitionTime;
+    pointer-events: none;
+}
+
+.labe {
+    position: absolute;
+    left: calc(2 * #{ohma.$gap});
+    top: calc(3 * #{ohma.$gap});
+    display: block;
+    font-size: ohma.$fonts-m;
+    color: ohma.$colors-text-muted;
+    transition: ohma.$transitionTime;
+    pointer-events: none;
+    z-index: 1;
+
+    &.floated {
+        top: calc(1 * #{ohma.$gap});
+        font-size: calc(#{ohma.$fonts-s} * 0.85);
+    }
+}
+
+.panel {
+    position: absolute;
+    top: calc(100% + #{ohma.$gap});
+    left: 0;
+    right: 0;
+    z-index: 5;
+    list-style: none;
+    margin: 0;
+    padding: ohma.$gap;
+    max-height: 260px;
+    overflow-y: auto;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    background-color: ohma.$colors-surface-hover;
+    box-shadow: ohma.$colors-boxShadow 0 3px 6px, ohma.$colors-boxShadow 0 3px 6px;
+
+    button {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: ohma.$gap;
+        border: none;
+        background: transparent;
+        text-align: left;
+        font-size: ohma.$fonts-m;
+        color: ohma.$colors-text;
+        padding: calc(#{ohma.$gap}) calc(2 * #{ohma.$gap});
+        border-radius: calc(#{ohma.$rounding} - 1.5 * #{ohma.$gap});
+        cursor: pointer;
+        transition: background-color ohma.$transitionTime;
+
+        &:hover, &.active {
+            background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+        }
+
+        &.selected {
+            color: ohma.$colors-accent-blue;
+        }
+    }
+
+    .empty {
+        padding: calc(#{ohma.$gap}) calc(2 * #{ohma.$gap});
+        color: ohma.$colors-text-muted;
+        font-size: ohma.$fonts-s;
+    }
+}
+
+.onRaised > .field {
+    background-color: ohma.$colors-surface-hover;
+
+    &:hover, &:focus {
+        background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+    }
+}
+
+.open > .chevron {
+    transform: translateY(-50%) rotate(180deg);
+    color: ohma.$colors-accent-blue;
+}
+
+.primary > .field {
+    color: ohma.$colors-accent-blue;
+    &:focus {
+        border-color: ohma.$colors-accent-blue;
+    }
+}
+
+.secondary > .field {
+    color: ohma.$colors-text;
+}
+
+.red > .field {
+    color: ohma.$colors-accent-red;
+    &:focus {
+        border-color: ohma.$colors-accent-red;
+    }
+}
+
+.white > .field {
+    color: ohma.$colors-white;
+}
diff --git a/src/app/_components/UI/SearchableDropdown.tsx b/src/app/_components/UI/SearchableDropdown.tsx
new file mode 100644
index 000000000..04bac01a7
--- /dev/null
+++ b/src/app/_components/UI/SearchableDropdown.tsx
@@ -0,0 +1,169 @@
+'use client'
+import styles from './SearchableDropdown.module.scss'
+import useClickOutsideRef from '@/hooks/useClickOutsideRef'
+import useKeyPress from '@/hooks/useKeyPress'
+import { useEffect, useId, useRef, useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCheck, faChevronDown } from '@fortawesome/free-solid-svg-icons'
+import type { ChangeEvent, KeyboardEvent } from 'react'
+
+export type SearchableDropdownOption<ValueType> = {
+    value: ValueType,
+    label?: string,
+    key?: string,
+}
+
+export type PropTypes<ValueType> = {
+    name: string,
+    label: string,
+    defaultValue?: ValueType,
+    options: SearchableDropdownOption<ValueType>[],
+    onChange?: (value: ValueType) => void,
+    color?: 'primary' | 'secondary' | 'red' | 'black' | 'white',
+    background?: 'base' | 'raised',
+    className?: string,
+    disabled?: boolean,
+}
+
+export default function SearchableDropdown<ValueType extends string | number>({
+    name,
+    label,
+    defaultValue,
+    options,
+    onChange,
+    color = 'black',
+    background = 'base',
+    className,
+    disabled,
+}: PropTypes<ValueType>) {
+    const [value, setValue] = useState<ValueType | undefined>(defaultValue)
+    const [searchTerm, setSearchTerm] = useState('')
+    const [open, setOpen] = useState(false)
+    const [activeIndex, setActiveIndex] = useState(0)
+    const domId = useId()
+    const panelRef = useRef<HTMLUListElement>(null)
+
+    const close = () => {
+        setOpen(false)
+        setSearchTerm('')
+    }
+    const ref = useClickOutsideRef(close)
+    useKeyPress('Escape', close)
+
+    const selectedOption = options.find(option => option.value === value)
+
+    const filteredOptions = options.filter(option =>
+        (option.label ?? String(option.value)).toLowerCase().includes(searchTerm.toLowerCase())
+    )
+
+    useEffect(() => {
+        if (!open) return
+        panelRef.current?.querySelector(`.${styles.active}`)?.scrollIntoView({ block: 'nearest' })
+    }, [activeIndex, open])
+
+    const handleSelect = (option: SearchableDropdownOption<ValueType>) => {
+        setValue(option.value)
+        setSearchTerm('')
+        setOpen(false)
+        onChange?.(option.value)
+    }
+
+    const handleFocus = () => {
+        const startIndex = value !== undefined ? filteredOptions.findIndex(option => option.value === value) : -1
+        setActiveIndex(startIndex >= 0 ? startIndex : 0)
+        setOpen(true)
+    }
+
+    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
+        setSearchTerm(event.target.value)
+        setActiveIndex(0)
+        if (!open) setOpen(true)
+    }
+
+    const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+        if (filteredOptions.length === 0) return
+        if (event.key === 'ArrowDown') {
+            event.preventDefault()
+            if (!open) {
+                setOpen(true)
+                return
+            }
+            setActiveIndex(previousIndex => (previousIndex + 1) % filteredOptions.length)
+        } else if (event.key === 'ArrowUp') {
+            event.preventDefault()
+            if (!open) {
+                setOpen(true)
+                return
+            }
+            setActiveIndex(previousIndex => (previousIndex - 1 + filteredOptions.length) % filteredOptions.length)
+        } else if (event.key === 'Enter') {
+            if (open && filteredOptions[activeIndex]) {
+                event.preventDefault()
+                handleSelect(filteredOptions[activeIndex])
+            }
+        }
+    }
+
+    const displayValue = open
+        ? searchTerm
+        : (selectedOption?.label ?? (selectedOption ? String(selectedOption.value) : ''))
+
+    return (
+        <div
+            ref={ref}
+            id={name}
+            className={
+                `${styles.SearchableDropdown} ${styles[color]} ` +
+                `${background === 'raised' ? styles.onRaised : ''} ${open ? styles.open : ''} ${className ?? ''}`
+            }
+        >
+            <input
+                id={domId}
+                type="text"
+                className={styles.field}
+                autoComplete="off"
+                disabled={disabled}
+                value={displayValue}
+                onFocus={handleFocus}
+                onChange={handleSearchChange}
+                onKeyDown={handleKeyDown}
+                role="combobox"
+                aria-expanded={open}
+                aria-haspopup="listbox"
+            />
+            <label htmlFor={domId} className={`${styles.labe} ${(open || selectedOption) ? styles.floated : ''}`}>
+                {label}
+            </label>
+            <FontAwesomeIcon icon={faChevronDown} className={styles.chevron} />
+            {
+                open && (
+                    <ul className={styles.panel} role="listbox" ref={panelRef}>
+                        {
+                            filteredOptions.length > 0 ? filteredOptions.map((option, index) => (
+                                <li key={option.key ?? String(option.value)}>
+                                    <button
+                                        type="button"
+                                        role="option"
+                                        aria-selected={option.value === value}
+                                        className={
+                                            `${option.value === value ? styles.selected : ''} ` +
+                                            `${index === activeIndex ? styles.active : ''}`
+                                        }
+                                        onClick={() => handleSelect(option)}
+                                        onMouseEnter={() => setActiveIndex(index)}
+                                    >
+                                        <span>{option.label ?? option.value}</span>
+                                        {option.value === value && <FontAwesomeIcon icon={faCheck} />}
+                                    </button>
+                                </li>
+                            )) : (
+                                <li className={styles.empty}>Ingen treff</li>
+                            )
+                        }
+                    </ul>
+                )
+            }
+            <input type="hidden" name={name} value={value ?? ''} readOnly />
+        </div>
+    )
+}
diff --git a/src/app/_components/UI/Select.module.scss b/src/app/_components/UI/Select.module.scss
index 6e38b69e7..d82d816c6 100644
--- a/src/app/_components/UI/Select.module.scss
+++ b/src/app/_components/UI/Select.module.scss
@@ -1,16 +1,118 @@
 @use "@/styles/ohma";
 
 .Select {
+    position: relative;
+    width: 100%;
+    max-width: 320px;
+    margin-top: ohma.$gap;
+}
+
+// A <select> always has a selection, so the label sits permanently in the
+// floated position rather than toggling like TextInput's.
+.field {
+    appearance: none;
+    position: relative;
+    width: 100%;
     display: flex;
-    flex-direction: row;
-    justify-content: space-between;
     align-items: center;
+    border: 2px solid transparent;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    outline: 0;
+    font-size: ohma.$fonts-m;
+    // Matches the min-height Dropdown gives its value span, so a select and a
+    // Dropdown are the same height side by side.
+    line-height: calc(#{ohma.$fonts-m} * 1.25);
+    text-align: left;
+    color: ohma.$colors-ink-strong;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(3 * #{ohma.$gap}) calc(5 * #{ohma.$gap}) calc(1 * #{ohma.$gap}) calc(2 * #{ohma.$gap});
+    transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
+    cursor: pointer;
+
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
+    }
+
+    &:focus {
+        border-color: ohma.$colors-accent-blue;
+        background-color: ohma.$colors-surface-hover;
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+    }
+
+    // The popup list is drawn by the browser; these are the only properties it
+    // reliably honours, and without them it falls back to a white menu.
+    option {
+        background-color: ohma.$colors-surface-raised;
+        color: ohma.$colors-text;
+    }
+}
+
+.chevron {
+    position: absolute;
+    right: calc(2 * #{ohma.$gap});
+    top: 50%;
+    transform: translateY(-50%);
+    color: ohma.$colors-text-muted;
+    transition: color ohma.$transitionTime;
+    pointer-events: none;
+}
 
-    > label {
-        margin-right: 0.8rem;
+.labe {
+    position: absolute;
+    left: calc(2 * #{ohma.$gap});
+    top: calc(1 * #{ohma.$gap});
+    display: block;
+    font-size: calc(#{ohma.$fonts-s} * 0.85);
+    color: ohma.$colors-text-muted;
+    transition: ohma.$transitionTime;
+    pointer-events: none;
+    z-index: 1;
+}
+
+.field:focus ~ .chevron {
+    color: ohma.$colors-accent-blue;
+}
+
+.field:focus ~ .labe {
+    color: ohma.$colors-accent-blue;
+}
+
+.black > .field {
+    color: ohma.$colors-ink-strong;
+}
+
+.primary > .field {
+    color: ohma.$colors-accent-blue;
+}
+
+.secondary > .field {
+    color: ohma.$colors-text;
+}
+
+.red > .field {
+    color: ohma.$colors-accent-red;
+
+    &:focus {
+        border-color: ohma.$colors-accent-red;
+
+        ~ .chevron, ~ .labe {
+            color: ohma.$colors-accent-red;
+        }
     }
+}
+
+.white > .field {
+    color: ohma.$colors-white;
+}
+
+.onRaised > .field {
+    background-color: ohma.$colors-surface-hover;
 
-    > select {
-        padding: 0.3rem;
+    &:hover, &:focus {
+        background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/_components/UI/Select.tsx b/src/app/_components/UI/Select.tsx
index 3178eaad4..ae4c8de58 100644
--- a/src/app/_components/UI/Select.tsx
+++ b/src/app/_components/UI/Select.tsx
@@ -1,11 +1,15 @@
 'use client'
 import styles from './Select.module.scss'
 import { v4 as uuid } from 'uuid'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 import { type SelectHTMLAttributes } from 'react'
 
 export type PropTypes<ValueType> = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> & {
     name: string,
     label?: string,
+    color?: 'primary' | 'secondary' | 'red' | 'black' | 'white',
+    background?: 'base' | 'raised',
     onChange?: (value: ValueType) => void,
     options: {
         value: ValueType,
@@ -26,16 +30,23 @@ export function SelectConstructor<ValueType extends string | number>(valueConver
         value,
         options,
         onChange,
+        color = 'black',
+        background = 'base',
         className,
         ...props
     }: PropTypes<ValueType>) {
         return (
-            <div className={`${styles.Select} ${className}`}>
-                <label htmlFor={name}>{label ?? name}</label>
+            <div
+                className={
+                    `${styles.Select} ${styles[color]} ` +
+                    `${background === 'raised' ? styles.onRaised : ''} ${className ?? ''}`
+                }
+            >
                 <select
                     {...props}
                     id={name}
                     name={name}
+                    className={styles.field}
                     {
                         ...(value ? { value } : { defaultValue })
                     }
@@ -57,6 +68,8 @@ export function SelectConstructor<ValueType extends string | number>(valueConver
                         )
                     }
                 </select>
+                <FontAwesomeIcon icon={faChevronDown} className={styles.chevron} />
+                <label htmlFor={name} className={styles.labe}>{label ?? name}</label>
             </div>
         )
     }
diff --git a/src/app/_components/UI/Slider.module.scss b/src/app/_components/UI/Slider.module.scss
index 712782140..cd99407b4 100644
--- a/src/app/_components/UI/Slider.module.scss
+++ b/src/app/_components/UI/Slider.module.scss
@@ -7,7 +7,7 @@ $slider-width: 60px;
     display: inline-block;
     width: $slider-width;
     height: 34px;
-    margin-top: calc(ohma.$fonts-m + .2em);
+    margin-top: calc(#{ohma.$fonts-m} + .2em);
 
     input {
         opacity: 0;
@@ -23,7 +23,7 @@ $slider-width: 60px;
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: ohma.$colors-gray-400;
+        background-color: ohma.$colors-surface-raised;
         transition: 0.4s;
         border-radius: 34px;
 
@@ -42,16 +42,16 @@ $slider-width: 60px;
 
     
     &.secondary input:checked + .slider {
-        background-color: ohma.$colors-secondary;
+        background-color: ohma.$colors-surface-base;
     }
     &.primary input:checked + .slider {
-        background-color: ohma.$colors-primary;
+        background-color: ohma.$colors-accent-blue;
     }
     &.red input:checked + .slider {
-        background-color: ohma.$colors-red;
+        background-color: ohma.$colors-accent-red;
     }
     &.green input:checked + .slider {
-        background-color: ohma.$colors-green;
+        background-color: ohma.$colors-accent-green;
     }
     &.white input:checked + .slider {
         background-color: ohma.$colors-white;
@@ -68,6 +68,6 @@ $slider-width: 60px;
         white-space: nowrap;
         font-size: ohma.$fonts-m;
         position: absolute;
-        top: calc(-1 * ohma.$fonts-m - .2em);
+        top: calc(-1 * #{ohma.$fonts-m} - .2em);
     }
 }
\ No newline at end of file
diff --git a/src/app/_components/UI/SubmitButton.module.scss b/src/app/_components/UI/SubmitButton.module.scss
index bfabe82d6..4fad10400 100644
--- a/src/app/_components/UI/SubmitButton.module.scss
+++ b/src/app/_components/UI/SubmitButton.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .error {
-    color: ohma.$colors-red;
+    color: ohma.$colors-accent-red;
     display: flex;
     flex-direction: column; 
     min-height: 1.15em;
@@ -12,10 +12,26 @@
 }
 
 .submitButton {
-    width: 150px;
+    width: calc(20 * #{ohma.$gap});
     margin: 0;
-    color: ohma.$colors-black;
-    transition: background-color 0.3s ease-in-out;
+    color: ohma.$colors-text-inv;
+    transition: background-color ohma.$transitionTime ease-in-out;
+}
+
+.hiddenSubmit {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+.confirmActions {
+    display: flex;
+    justify-content: center;
+    gap: ohma.$gap;
+    margin-top: calc(2 * #{ohma.$gap});
 }
 
 .loader {
@@ -23,7 +39,7 @@
     justify-content: space-between;
     padding: 1px 20px;
     > div {
-        background-color: ohma.$colors-black;
+        background-color: ohma.$colors-text-inv;
         width: 1em;
         height: 1em;
         border-radius: 50%;
diff --git a/src/app/_components/UI/SubmitButton.tsx b/src/app/_components/UI/SubmitButton.tsx
index d461360e5..2550bf546 100644
--- a/src/app/_components/UI/SubmitButton.tsx
+++ b/src/app/_components/UI/SubmitButton.tsx
@@ -1,6 +1,8 @@
 import styles from './SubmitButton.module.scss'
+import popUpStyles from '@/components/PopUp/PopUp.module.scss'
 import Button from '@/components/UI/Button'
-import React, { useState } from 'react'
+import { PopUpContext } from '@/contexts/PopUp'
+import React, { useContext, useEffect, useId, useRef, useState } from 'react'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCircleCheck, faX } from '@fortawesome/free-solid-svg-icons'
 import { useFormStatus } from 'react-dom'
@@ -41,8 +43,15 @@ export default function SubmitButton({
     }
 
     const [confirmedOpen, setConfirmedOpen] = useState(false)
+    const popUpKey = useId()
+    const popUpContext = useContext(PopUpContext)
+    // The real submit button must stay inside the <form>'s DOM tree. The popup
+    // itself is teleported out to the app-wide PopUpProvider (a sibling of the
+    // form, not a descendant), so a submit button rendered there has nothing
+    // to submit.
+    const realSubmitRef = useRef<HTMLButtonElement>(null)
 
-    const btnContent = () => {
+    const renderButtonContent = (label: ReactNode) => {
         if (pending) {
             return (
                 <div className={styles.loader}>
@@ -57,7 +66,7 @@ export default function SubmitButton({
                 <FontAwesomeIcon icon={faCircleCheck} />
             )
         }
-        return children
+        return label
     }
     const button = (
         <Button
@@ -68,31 +77,75 @@ export default function SubmitButton({
             onClick={onClick}
             disabled={disabled}
         >
-            {btnContent()}
+            {renderButtonContent(children)}
         </Button>
     )
 
-
-    const mainContent = () => (confirmedOpen ? (
-        <div className={styles.confirm}>
-            <p>{confirmation?.text || 'Er du sikker?'}</p>
-            <button className={styles.close} onClick={() => setConfirmedOpen(false)}>
-                <FontAwesomeIcon icon={faX} />
-            </button>
-            {button}
-        </div>
-    ) : (
-        <Button className={`${styles.submitButton} ${className ?? ''}`} color={color} onClick={() => setConfirmedOpen(true)}>
-            {children}
-        </Button>
-    ))
-
+    useEffect(() => {
+        if (!popUpContext) return
+        if (!confirmedOpen) {
+            popUpContext.remove(popUpKey)
+            return
+        }
+        popUpContext.teleport(
+            <div className={popUpStyles.PopUp}>
+                <div className={popUpStyles.main}>
+                    <div className={popUpStyles.overflow}>
+                        <button className={popUpStyles.closeBtn} onClick={() => setConfirmedOpen(false)}>
+                            <FontAwesomeIcon icon={faX} />
+                        </button>
+                        <div className={popUpStyles.content}>
+                            <p>{confirmation?.text || 'Er du sikker?'}</p>
+                            <div className={styles.confirmActions}>
+                                <Button
+                                    type="button"
+                                    color="secondary"
+                                    onClick={() => setConfirmedOpen(false)}
+                                >
+                                    Nei
+                                </Button>
+                                <Button
+                                    className={`${styles.submitButton} ${className ?? ''}`}
+                                    aria-disabled={pending || success}
+                                    color={success ? 'green' : color}
+                                    type="button"
+                                    disabled={disabled || pending || success}
+                                    onClick={() => realSubmitRef.current?.click()}
+                                >
+                                    {renderButtonContent('Ja')}
+                                </Button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>,
+            popUpKey
+        )
+    }, [confirmedOpen, pending, success, popUpKey])
 
     return (
         <div className={styles.submit}>
             {
                 (confirmation && confirmation.confirm) ? (
-                    mainContent()
+                    <>
+                        <Button
+                            className={`${styles.submitButton} ${className ?? ''}`}
+                            color={color}
+                            type="button"
+                            onClick={() => setConfirmedOpen(true)}
+                        >
+                            {children}
+                        </Button>
+                        <button
+                            ref={realSubmitRef}
+                            type="submit"
+                            onClick={onClick}
+                            disabled={disabled}
+                            aria-hidden="true"
+                            tabIndex={-1}
+                            className={styles.hiddenSubmit}
+                        />
+                    </>
                 ) : (
                     button
                 )
diff --git a/src/app/_components/UI/TextInput.module.scss b/src/app/_components/UI/TextInput.module.scss
index 137c44cb4..df51165af 100644
--- a/src/app/_components/UI/TextInput.module.scss
+++ b/src/app/_components/UI/TextInput.module.scss
@@ -2,79 +2,110 @@
 
 .TextInput {
     position: relative;
-    padding: 2*ohma.$gap 0 0;
     margin-top: ohma.$gap;
     width: 100%;
-    max-width: 200px;
+    max-width: 320px;
     display: flex;
     flex-direction: column;
 }
 
 .field {
     width: 100%;
-    border: 0;
-    border-bottom: 2px solid;
+    border: 2px solid transparent;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
     outline: 0;
-    font-size: ohma.$fonts-s;
-    padding: 7px 0;
-    background: transparent;
-    transition: border-color 0.2s;
+    font-size: ohma.$fonts-m;
+    line-height: calc(#{ohma.$fonts-m} * 1.25);
+    color: ohma.$colors-ink-strong;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(3 * #{ohma.$gap}) calc(2 * #{ohma.$gap}) calc(1 * #{ohma.$gap});
+    transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
     z-index: 1;
 
     &::placeholder {
         opacity: 0;
     }
 
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
+    }
+
     &:placeholder-shown ~ .labe {
-        font-size: ohma.$fonts-s;
+        font-size: ohma.$fonts-m;
         cursor: text;
-        top: 20px;
+        top: calc(3 * #{ohma.$gap});
     }
 
     &:focus, &:not(:placeholder-shown) {
         ~ .labe {
-            position: absolute;
-            top: 0;
-            display: block;
-            transition: 0.2s;
-            font-size: calc(ohma.$fonts-s * 0.8);
+            top: calc(1 * #{ohma.$gap});
+            font-size: calc(#{ohma.$fonts-s} * 0.85);
         }
-        padding-bottom: 6px;  
-        border-width: 3px;
-        border-image-slice: 1;
+    }
+
+    &:focus {
+        border-color: ohma.$colors-accent-blue;
+        background-color: ohma.$colors-surface-hover;
     }
 }
 
 .labe {
     position: absolute;
-    top: 0;
+    left: calc(2 * #{ohma.$gap});
+    top: calc(3 * #{ohma.$gap});
     display: block;
-    transition: 0.2s;
-    font-size: 1rem;
-    z-index: 0;
+    color: ohma.$colors-text-muted;
+    transition: ohma.$transitionTime;
+    pointer-events: none;
+    z-index: 2;
 }
 
-.primary > .field {
-    color: ohma.$colors-primary;
-    border-color: ohma.$colors-primary;
+.field:focus ~ .labe {
+    color: ohma.$colors-accent-blue;
 }
 
-.secondary > .field, .secondary > .labe{
-    color: ohma.$colors-secondary;
-    border-color: ohma.$colors-secondary;
+.black > .field {
+    color: ohma.$colors-ink-strong;
+}
+
+.primary > .field {
+    color: ohma.$colors-accent-blue;
+    &:focus {
+        border-color: ohma.$colors-accent-blue;
+        ~ .labe {
+            color: ohma.$colors-accent-blue;
+        }
+    }
 }
 
-.black > .field, .black > .labe{
-    color: ohma.$colors-text;
-    border-color: ohma.$colors-text;
+.secondary > .field {
+    color: ohma.$colors-surface-base;
+    &:focus {
+        border-color: ohma.$colors-surface-base;
+        ~ .labe {
+            color: ohma.$colors-surface-base;
+        }
+    }
 }
 
-.red > .field, .red > .labe {
-    color: ohma.$colors-red;
-    border-color: ohma.$colors-red;
+.red > .field {
+    color: ohma.$colors-accent-red;
+    &:focus {
+        border-color: ohma.$colors-accent-red;
+        ~ .labe {
+            color: ohma.$colors-accent-red;
+        }
+    }
 }
 
-.white > .field, .white > .labe{
+.white > .field {
     color: ohma.$colors-white;
-    border-color: ohma.$colors-white;
-}
\ No newline at end of file
+}
+
+.onRaised > .field {
+    background-color: ohma.$colors-surface-hover;
+
+    &:hover, &:focus {
+        background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+    }
+}
diff --git a/src/app/_components/UI/TextInput.tsx b/src/app/_components/UI/TextInput.tsx
index 28b6693b3..679057c06 100644
--- a/src/app/_components/UI/TextInput.tsx
+++ b/src/app/_components/UI/TextInput.tsx
@@ -6,6 +6,7 @@ export type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'na
     label: string,
     type?: 'text' | 'password',
     color?: 'primary' | 'secondary' | 'red' | 'black' | 'white',
+    background?: 'base' | 'raised',
 } & ({
     id: string,
     name?: string | undefined,
@@ -14,11 +15,21 @@ export type PropTypes = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'na
     id?: string | undefined,
 })
 
-export default function TextInput({ label = 'default', type = 'text', color = 'black', className, ...props }: PropTypes) {
+export default function TextInput({
+    label = 'default',
+    type = 'text',
+    color = 'black',
+    background = 'base',
+    className,
+    ...props
+}: PropTypes) {
     props.id ??= `id_input_${props.name}`
 
     return (
-        <div id={props.name} className={`${styles.TextInput} ${styles[color]} ${className}`}>
+        <div
+            id={props.name}
+            className={`${styles.TextInput} ${styles[color]} ${background === 'raised' ? styles.onRaised : ''} ${className}`}
+        >
             <input {...props} type={type} className={styles.field} placeholder={label}/>
             <label className={styles.labe}>{label}</label>
         </div>
diff --git a/src/app/_components/UI/Textarea.module.scss b/src/app/_components/UI/Textarea.module.scss
index 8bc433a46..472ae91d4 100644
--- a/src/app/_components/UI/Textarea.module.scss
+++ b/src/app/_components/UI/Textarea.module.scss
@@ -1,16 +1,46 @@
 @use "@/styles/ohma";
 
 .TextArea {
+    display: flex;
+    flex-direction: column;
+    gap: calc(0.5 * #{ohma.$gap});
+    margin-top: ohma.$gap;
+    width: 100%;
+
+    > label {
+        font-size: ohma.$fonts-s;
+        color: ohma.$colors-text-muted;
+    }
+
     > textarea {
-        min-height: 30px;
+        min-height: 60px;
         width: 100%;
-        resize: vertical;
-        margin-top: 0.5em;
         max-height: 300px;
-        font-size: ohma.$fonts-s;
-        @include ohma.layer();
-        color: ohma.$colors-text;
-        border-radius: ohma.$rounding;
-        padding: ohma.$gap;
+        resize: vertical;
+        font-size: ohma.$fonts-m;
+        color: ohma.$colors-ink-strong;
+        background-color: ohma.$colors-surface-raised;
+        border: 2px solid transparent;
+        border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+        padding: calc(1.5 * #{ohma.$gap}) calc(2 * #{ohma.$gap});
+        transition: border-color ohma.$transitionTime, background-color ohma.$transitionTime;
+
+        &:hover {
+            background-color: ohma.$colors-surface-hover;
+        }
+
+        &:focus {
+            outline: 0;
+            border-color: ohma.$colors-accent-blue;
+            background-color: ohma.$colors-surface-hover;
+        }
+    }
+
+    &.onRaised > textarea {
+        background-color: ohma.$colors-surface-hover;
+
+        &:hover, &:focus {
+            background-color: color-mix(in srgb, ohma.$colors-surface-hover, white 10%);
+        }
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/_components/UI/Textarea.tsx b/src/app/_components/UI/Textarea.tsx
index 333d9c578..b1ad130f5 100644
--- a/src/app/_components/UI/Textarea.tsx
+++ b/src/app/_components/UI/Textarea.tsx
@@ -3,14 +3,15 @@ import { v4 as uuid } from 'uuid'
 import type { TextareaHTMLAttributes } from 'react'
 
 type PropTypes = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    label?: string
+    label?: string,
+    background?: 'base' | 'raised',
 }
 
-export default function Textarea({ label, ...props }: PropTypes) {
+export default function Textarea({ label, background = 'base', className, ...props }: PropTypes) {
     const domId = uuid()
 
     return (
-        <div className={styles.TextArea}>
+        <div className={`${styles.TextArea} ${background === 'raised' ? styles.onRaised : ''} ${className ?? ''}`}>
             <label htmlFor={domId}>{ label }</label>
             <textarea id={domId} {...props}></textarea>
         </div>
diff --git a/src/app/_components/UI/ThemeEnabler.tsx b/src/app/_components/UI/ThemeEnabler.tsx
new file mode 100644
index 000000000..9be60e523
--- /dev/null
+++ b/src/app/_components/UI/ThemeEnabler.tsx
@@ -0,0 +1,15 @@
+'use client'
+
+import { applyTheme, themes } from '@/app/users/[username]/(user-admin)/theme/theme'
+import { useEffect } from 'react'
+import type { ThemeName } from '@/app/users/[username]/(user-admin)/theme/theme'
+
+export default function ThemeEnabler() {
+    useEffect(() => {
+        const saved = localStorage.getItem('theme') as ThemeName
+        if (saved && themes[saved]) {
+            applyTheme(saved)
+        }
+    }, [])
+    return null
+}
diff --git a/src/app/_components/User/UserCard.module.scss b/src/app/_components/User/UserCard.module.scss
index 1c3192d37..f0004d9cb 100644
--- a/src/app/_components/User/UserCard.module.scss
+++ b/src/app/_components/User/UserCard.module.scss
@@ -1,17 +1,14 @@
 @use '@/styles/ohma';
 
 .UserCard {
-    @include ohma.round;
-    @include ohma.boxShadow('');
-    &:hover {
-        @include ohma.boxShadow('hover');
-    }
+    padding: ohma.$gap;
+    border-radius: ohma.$rounding;
     text-decoration: none;
-    margin: ohma.$gap;
-    margin-bottom: 0;
+    margin: ohma.$gap ohma.$gap 0;
     box-sizing: border-box;
-    @include ohma.layer;
     color: ohma.$colors-text;
+    background-color: ohma.$colors-surface-raised;
+    border: 4px solid var(--flairColor, ohma.$colors-surface-raised);
 
     display: flex;
     align-items: center;
diff --git a/src/app/_components/User/UserCard.tsx b/src/app/_components/User/UserCard.tsx
index 9c1d8a8e7..fda3edeb7 100644
--- a/src/app/_components/User/UserCard.tsx
+++ b/src/app/_components/User/UserCard.tsx
@@ -2,6 +2,7 @@ import UserDisplayName from './UserDisplayName'
 import styles from './UserCard.module.scss'
 import ProfilePicture from './ProfilePicture'
 import Link from 'next/link'
+import type { CSSProperties } from 'react'
 import type { Image } from '@/prisma-generated-pn-types'
 import type { UserFiltered } from '@/services/users/types'
 
@@ -10,23 +11,26 @@ export default function UserCard({
     user,
     className,
     subText,
-    asClient,
 }: {
     user: UserFiltered & {
         image: Image
     },
     className?: string,
     subText?: string,
-    asClient: boolean
 }) {
+    const [topFlair] = [...user.flairs].sort((flairA, flairB) => flairA.rank - flairB.rank)
+
     return <Link
         className={`${styles.UserCard} ${className ? className : ''}`}
         href={`/users/${user.username}`}
+        style={topFlair ? {
+            '--flairColor': `rgb(${topFlair.colorR}, ${topFlair.colorG}, ${topFlair.colorB})`,
+        } as CSSProperties : undefined}
     >
         <ProfilePicture profileImage={user.image} width={60} />
         <div>
             <h6>
-                <UserDisplayName user={user} width={18} asClient={asClient}/>
+                <UserDisplayName user={user} width={18} />
             </h6>
             {subText && <p>{subText}</p>}
         </div>
diff --git a/src/app/_components/User/UserDisplayName.tsx b/src/app/_components/User/UserDisplayName.tsx
index 1eea76a4e..7c0c449e0 100644
--- a/src/app/_components/User/UserDisplayName.tsx
+++ b/src/app/_components/User/UserDisplayName.tsx
@@ -7,17 +7,15 @@ import type { UserFiltered } from '@/services/users/types'
 export default function UserDisplayName({
     user,
     width,
-    asClient
 }: {
     user: Pick<UserFiltered, 'firstname' | 'lastname' | 'flairs'>,
     width: number,
-    asClient: boolean
 }) {
     return <div className={styles.userDisplayName}>
         <span>{user.firstname} {user.lastname}</span>
 
         {user.flairs.map((flair, index) => (
-            <Flair key={index} flair={flair} disableEditor={true} width={width} asClient={asClient} />
+            <Flair key={index} flair={flair} width={width} />
         ))}
     </div>
 }
diff --git a/src/app/_components/User/UserList/UserList.module.scss b/src/app/_components/User/UserList/UserList.module.scss
index b3809d8f0..93464d217 100644
--- a/src/app/_components/User/UserList/UserList.module.scss
+++ b/src/app/_components/User/UserList/UserList.module.scss
@@ -1,88 +1,78 @@
 @use '@/styles/ohma';
 
-$selectionBtnSize: 25px;
-
 .UserList {
     height: 100%;
+    display: flex;
+    flex-direction: column;
+
     > .filters {
-        padding-right: 3em;
         width: 100%;
-        padding-left: .3em;
         display: flex;
         flex-flow: row wrap;
+        align-items: flex-end;
         margin-bottom: ohma.$gap;
-        gap: ohma.$gap;
-        .name {
-            display: flex;
-            flex-direction: column;
+        gap: calc(2 * #{ohma.$gap});
+
+        .nameFilter {
+            margin-top: 0;
         }
+
         .group {
             display: flex;
             flex-direction: column;
+            gap: ohma.$gap;
             min-width: 150px;
-            > * {
-                display: flex;
-                flex-direction: column;
-                align-items: flex-start;
-                width: 100%;
-                select {
-                    width: 100%;
-                }
-            }
         }
     }
-    > .list {
-        height: 100%;
-        overflow-y: scroll;
-        border-radius: calc(ohma.$rounding + ohma.$gap);
-        @include ohma.layer();
-        @include ohma.boxShadow('');
+
+    > .listWrapper {
+        flex: 1 1 auto;
+        overflow-y: auto;
+    }
+
+    .list {
+        @include ohma.table();
+        margin: 0;
         width: 100%;
-        padding: 0 ohma.$gap;
-        padding-top: ohma.$gap;
-        .row {
-            display: flex;
-            justify-content: space-between;
-            padding: 0 .5em;
-            > .userRow {
-                flex: 1 1 100%;
-            }
-            > button {
-                border: none;
-                width: $selectionBtnSize;
-                height: $selectionBtnSize;
-                display: grid;
-                place-items: center;
-                border-radius: ohma.$rounding;
-                margin-right: 1em;
-                &.selected {
-                    background-color: ohma.$colors-primary;                
-                }
-            }
-        }
-        > .head {
+
+        thead tr {
             position: sticky;
             top: 0;
-            left: 0;
-            padding: 2*ohma.$gap 2*ohma.$gap;
-            border-radius: ohma.$rounding;
-            @include ohma.layer();
-            @include ohma.boxShadow('');
+            z-index: 1;
         }
-        .head, .userRow {
-            display: grid;
-            grid-template-columns: 3fr 2fr 1fr 1fr;
-            > * {
-                text-align: left;
+
+        .sortable {
+            cursor: pointer;
+            user-select: none;
+            white-space: nowrap;
+
+            &:hover {
+                color: ohma.$colors-accent-blue;
             }
-            &.extraInfo {
-                grid-template-columns: 1fr 1.3fr 1fr 1fr 1fr 0.5fr;
+        }
+
+        .sortIcon {
+            margin-left: calc(0.5 * #{ohma.$gap});
+            font-size: 0.85em;
+        }
+
+        tbody tr.clickable {
+            cursor: pointer;
+        }
+
+        button {
+            border: none;
+            background: transparent;
+            width: 25px;
+            height: 25px;
+            display: grid;
+            place-items: center;
+            border-radius: ohma.$rounding;
+            cursor: pointer;
+
+            &.selected {
+                background-color: ohma.$colors-accent-blue;
             }
-        } 
+        }
     }
 }
-
-.adjust {
-    width: calc(100% - $selectionBtnSize - 1em);
-    transform: translateX(calc($selectionBtnSize + 1em));
-}
diff --git a/src/app/_components/User/UserList/UserList.tsx b/src/app/_components/User/UserList/UserList.tsx
index 264e1608a..5b412f118 100644
--- a/src/app/_components/User/UserList/UserList.tsx
+++ b/src/app/_components/User/UserList/UserList.tsx
@@ -1,18 +1,21 @@
 'use client'
 import styles from './UserList.module.scss'
-import { SelectNumberPossibleNULL } from '@/UI/Select'
+import Dropdown from '@/components/UI/Dropdown'
+import SearchableDropdown from '@/components/UI/SearchableDropdown'
+import TextInput from '@/components/UI/TextInput'
 import { UserPagingContext } from '@/contexts/paging/UserPaging'
 import EndlessScroll from '@/components/PagingWrappers/EndlessScroll'
 import UserRow from '@/components/User/UserList/UserRow'
-import useActionCall from '@/hooks/useActionCall'
+import { useGroups } from '@/contexts/ClientData'
+import { orderOptions } from '@/lib/groups/groupOptions'
 import { UsersSelectionContext } from '@/contexts/UsersSelection'
 import { UserSelectionContext } from '@/contexts/UserSelection'
-import { readGroupsForPageFilteringAction } from '@/services/users/actions'
 import { useContext, useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheck } from '@fortawesome/free-solid-svg-icons'
+import { faCheck, faSort, faSortDown, faSortUp } from '@fortawesome/free-solid-svg-icons'
 import type { UserPagingReturn } from '@/services/users/types'
-import type { ChangeEvent, ReactNode } from 'react'
+import type { ChangeEvent, MouseEvent, ReactNode } from 'react'
 import type { GroupType } from '@/prisma-generated-pn-types'
 import type { ExpandedGroup } from '@/services/groups/types'
 
@@ -20,6 +23,8 @@ type GroupSelectionType = Exclude<GroupType, 'INTEREST_GROUP' | 'MANUAL_GROUP'>
 
 type DisableGroupFilters = { [K in GroupSelectionType]?: boolean }
 
+type SortField = 'name' | 'username'
+
 type PropTypes = {
     className?: string
     displayForUser?: (user: UserPagingReturn) => ReactNode
@@ -33,7 +38,10 @@ function getGroupType(groups: ExpandedGroup[] | null, type: GroupType) {
     return groups ? groups.filter(group => group.groupType === type) : []
 }
 
-function getGroupOptions(groups: ExpandedGroup[] | null, type: GroupType) {
+function getGroupOptions(
+    groups: ExpandedGroup[] | null,
+    type: GroupType
+): { value: number | 'NULL', label: string, key: string }[] {
     return [
         ...getGroupType(groups, type).map(group => ({
             value: group.id,
@@ -44,22 +52,18 @@ function getGroupOptions(groups: ExpandedGroup[] | null, type: GroupType) {
             value: 'NULL',
             label: 'Alle',
             key: 'NULL'
-        } as const,
+        },
     ]
 }
 
-function getOrdereOptions(group: ExpandedGroup) {
+function getOrdereOptions(group: ExpandedGroup): { value: number | 'NULL', label: string, key: string }[] {
     return [
-        ...Array.from({ length: group.order - group.firstOrder + 1 }, (_, i) => group.firstOrder + i).map(order => ({
-            value: order,
-            label: order.toString(),
-            key: order.toString()
-        })),
+        ...orderOptions(group),
         {
             value: 'NULL',
             label: 'Alle aktive',
             key: 'NULL'
-        }as const,
+        },
     ]
 }
 
@@ -87,10 +91,12 @@ export default function UserList({
     const userPaging = useContext(UserPagingContext)
     const usersSelection = useContext(UsersSelectionContext)
     const userSelection = useContext(UserSelectionContext)
+    const router = useRouter()
 
     const groupSelected = !!userPaging?.details.selectedGroup
 
-    const { data: groups } = useActionCall(readGroupsForPageFilteringAction)
+    const groupsResult = useGroups()
+    const groups = groupsResult.status === 'success' ? groupsResult.groups : null
     const [groupSelection, setGroupSelection] = useState<{
         [T in GroupSelectionType]: {
             group: ExpandedGroup | null,
@@ -132,11 +138,27 @@ export default function UserList({
 
     if (!userPaging) throw new Error('UserPagingContext not found')
 
+    const currentSort = userPaging.details.sort
 
     const handleChangeName = (e: ChangeEvent<HTMLInputElement>) => {
         userPaging.setDetails({ ...userPaging.details, partOfName: e.target.value })
     }
 
+    const handleSort = (field: SortField) => {
+        const direction = currentSort?.field === field && currentSort.direction === 'asc' ? 'desc' : 'asc'
+        userPaging.setDetails({ ...userPaging.details, sort: { field, direction } })
+    }
+
+    const sortIcon = (field: SortField) => {
+        if (currentSort?.field !== field) return <FontAwesomeIcon icon={faSort} className={styles.sortIcon} />
+        return (
+            <FontAwesomeIcon
+                icon={currentSort.direction === 'asc' ? faSortUp : faSortDown}
+                className={styles.sortIcon}
+            />
+        )
+    }
+
     const handleGroupSelect = (groupId: number | 'NULL', type: GroupSelectionType) => {
         if (!groups) return
         setGroupSelection({
@@ -159,28 +181,36 @@ export default function UserList({
         })
     }
 
+    const stopSelectionClickPropagation = (event: MouseEvent<HTMLButtonElement>) => {
+        event.stopPropagation()
+    }
+
     return (
         <div className={`${styles.UserList} ${className}`}>
-            <div className={usersSelection || userSelection ? `${styles.filters} ${styles.adjust}` : styles.filters}>
+            <div className={styles.filters}>
                 {
                     !disableFilters.name && (
-                        <div className={styles.group}>
-                            <label>Navn</label>
-                            <input onChange={handleChangeName} />
-                        </div>
+                        <TextInput
+                            name="partOfName"
+                            label="Navn"
+                            onChange={handleChangeName}
+                            className={styles.nameFilter}
+                        />
                     )
                 }
                 {
                     !disableFilters.COMMITTEE && (
                         <div className={styles.group}>
-                            <SelectNumberPossibleNULL
+                            <SearchableDropdown
                                 name="komite"
+                                label="Komité"
                                 onChange={groupId => handleGroupSelect(groupId, 'COMMITTEE')}
                                 options={getGroupOptions(groups, 'COMMITTEE')}
                             />
                             {
-                                groupSelection.COMMITTEE.group && <SelectNumberPossibleNULL
+                                groupSelection.COMMITTEE.group && <Dropdown
                                     name="orden"
+                                    label="Orden"
                                     onChange={order => handleGroupOrderSelect(order, 'COMMITTEE')}
                                     options={getOrdereOptions(groupSelection.COMMITTEE.group)}
                                 />
@@ -191,14 +221,16 @@ export default function UserList({
                 {
                     !disableFilters.CLASS && (
                         <div className={styles.group}>
-                            <SelectNumberPossibleNULL
+                            <Dropdown
                                 name="klasse"
+                                label="Klasse"
                                 onChange={groupId => handleGroupSelect(groupId, 'CLASS')}
                                 options={getGroupOptions(groups, 'CLASS')}
                             />
                             {
-                                groupSelection.CLASS.group && <SelectNumberPossibleNULL
+                                groupSelection.CLASS.group && <Dropdown
                                     name="orden"
+                                    label="Orden"
                                     onChange={order => handleGroupOrderSelect(order, 'CLASS')}
                                     options={getOrdereOptions(groupSelection.CLASS.group)}
                                 />
@@ -209,14 +241,16 @@ export default function UserList({
                 {
                     !disableFilters.STUDY_PROGRAMME && (
                         <div className={styles.group}>
-                            <SelectNumberPossibleNULL
+                            <Dropdown
                                 name="studie"
+                                label="Studieprogram"
                                 onChange={groupId => handleGroupSelect(groupId, 'STUDY_PROGRAMME')}
                                 options={getGroupOptions(groups, 'STUDY_PROGRAMME')}
                             />
                             {
-                                groupSelection.STUDY_PROGRAMME.group && <SelectNumberPossibleNULL
+                                groupSelection.STUDY_PROGRAMME.group && <Dropdown
                                     name="orden"
+                                    label="Orden"
                                     onChange={order => handleGroupOrderSelect(order, 'STUDY_PROGRAMME')}
                                     options={getOrdereOptions(groupSelection.STUDY_PROGRAMME.group)}
                                 />
@@ -227,14 +261,16 @@ export default function UserList({
                 {
                     !disableFilters.OMEGA_MEMBERSHIP_GROUP && (
                         <div className={styles.group}>
-                            <SelectNumberPossibleNULL
+                            <Dropdown
                                 name="medlemskap"
+                                label="Medlemskap"
                                 onChange={groupId => handleGroupSelect(groupId, 'OMEGA_MEMBERSHIP_GROUP')}
                                 options={getGroupOptions(groups, 'OMEGA_MEMBERSHIP_GROUP')}
                             />
                             {
-                                groupSelection.OMEGA_MEMBERSHIP_GROUP.group && <SelectNumberPossibleNULL
+                                groupSelection.OMEGA_MEMBERSHIP_GROUP.group && <Dropdown
                                     name="orden"
+                                    label="Orden"
                                     onChange={order => handleGroupOrderSelect(order, 'OMEGA_MEMBERSHIP_GROUP')}
                                     options={getOrdereOptions(groupSelection.OMEGA_MEMBERSHIP_GROUP.group)}
                                 />
@@ -243,57 +279,73 @@ export default function UserList({
                     )
                 }
             </div>
-            <div className={styles.list}>
-                <span className={
-                    `${styles.head} ${
-                        usersSelection || userSelection || displayForUser ? `${styles.adjust} ` : ' '
-                    }${groupSelected ? styles.extraInfo : ''}`
-                }>
-                    <h3>Navn</h3>
-                    <h3>Brukernavn</h3>
-                    <h3>Studie</h3>
-                    <h3>Klasse</h3>
-                    {
-                        groupSelected && (
-                            <>
-                                <h3>Tittel</h3>
-                                <h3>Admin</h3>
-                            </>
-                        )
-                    }
-                </span>
-
-                <EndlessScroll pagingContext={UserPagingContext} renderer={user => (
-                    <span className={styles.row} key={user.id}>
-                        { usersSelection &&
-                            <button
-                                className={usersSelection.includes(user) ? styles.selected : ''}
-                                onClick={() => usersSelection.toggle(user)}>
-                                <FontAwesomeIcon icon={faCheck} />
-                            </button>
-                        }
-                        { userSelection &&
-                            <button
-                                className={userSelection.user?.id === user.id ? styles.selected : ''}
-                                onClick={() => userSelection.setUser(user)}>
-                                <FontAwesomeIcon icon={faCheck} />
-                            </button>
-                        }
-                        {
-                            displayForUser && displayForUser(user)
-                        }
-                        <UserRow
-                            linksToUser={linksToUser}
-                            groupSelected={groupSelected}
-                            className={
-                                `${styles.userRow} ${groupSelected ? styles.extraInfo : ''}`
+            <div className={styles.listWrapper}>
+                <table className={styles.list}>
+                    <thead>
+                        <tr>
+                            {(usersSelection || userSelection) && <th></th>}
+                            {displayForUser && <th></th>}
+                            <th className={styles.sortable} onClick={() => handleSort('name')}>
+                                Navn {sortIcon('name')}
+                            </th>
+                            <th className={styles.sortable} onClick={() => handleSort('username')}>
+                                Brukernavn {sortIcon('username')}
+                            </th>
+                            <th>Studie</th>
+                            <th>Klasse</th>
+                            {
+                                groupSelected && (
+                                    <>
+                                        <th>Tittel</th>
+                                        <th>Admin</th>
+                                    </>
+                                )
                             }
-                            user={user}
-                        />
-                    </span>
-                )} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <EndlessScroll pagingContext={UserPagingContext} renderer={user => (
+                            <tr
+                                key={user.id}
+                                className={linksToUser ? styles.clickable : ''}
+                                onClick={() => {
+                                    if (!linksToUser) return
+                                    router.push(`/users/${user.username}`)
+                                }}
+                            >
+                                { usersSelection &&
+                                    <td>
+                                        <button
+                                            className={usersSelection.includes(user) ? styles.selected : ''}
+                                            onClick={(event) => {
+                                                stopSelectionClickPropagation(event)
+                                                usersSelection.toggle(user)
+                                            }}>
+                                            <FontAwesomeIcon icon={faCheck} />
+                                        </button>
+                                    </td>
+                                }
+                                { userSelection &&
+                                    <td>
+                                        <button
+                                            className={userSelection.user?.id === user.id ? styles.selected : ''}
+                                            onClick={(event) => {
+                                                stopSelectionClickPropagation(event)
+                                                userSelection.setUser(user)
+                                            }}>
+                                            <FontAwesomeIcon icon={faCheck} />
+                                        </button>
+                                    </td>
+                                }
+                                {
+                                    displayForUser && <td>{displayForUser(user)}</td>
+                                }
+                                <UserRow groupSelected={groupSelected} user={user} />
+                            </tr>
+                        )} />
+                    </tbody>
+                </table>
             </div>
-
         </div>
     )
 }
diff --git a/src/app/_components/User/UserList/UserRow.module.scss b/src/app/_components/User/UserList/UserRow.module.scss
deleted file mode 100644
index e3aee480e..000000000
--- a/src/app/_components/User/UserList/UserRow.module.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-@use '@/styles/ohma';
-
-.UserRow {
-    border-bottom: 2px solid ohma.$colors-secondary;
-    margin-top: ohma.$gap;
-    padding: calc(ohma.$gap / 2) ohma.$gap;
-    p {
-        font-weight: ohma.$fonts-weight-s;
-    }
-}
-
-.clickable {
-    cursor: pointer;
-}
diff --git a/src/app/_components/User/UserList/UserRow.tsx b/src/app/_components/User/UserList/UserRow.tsx
index 271b30879..ce43d1d2c 100644
--- a/src/app/_components/User/UserList/UserRow.tsx
+++ b/src/app/_components/User/UserList/UserRow.tsx
@@ -1,41 +1,24 @@
-import styles from './UserRow.module.scss'
 import UserDisplayName from '@/components/User/UserDisplayName'
-import { useRouter } from 'next/navigation'
 import type { UserPagingReturn } from '@/services/users/types'
 
 type PropTypes = {
     user: UserPagingReturn
-    className?: string
     groupSelected?: boolean,
-    linksToUser?: boolean
 }
 
-export default function UserRow({
-    user,
-    className,
-    groupSelected = false,
-    linksToUser
-}: PropTypes) {
-    const router = useRouter()
+export default function UserRow({ user, groupSelected = false }: PropTypes) {
     return (
-        <span
-            className={`${styles.UserRow} ${className} ${linksToUser ? styles.clickable : ''}`}
-            onClick={() => {
-                if (!linksToUser) return
-                router.push(`/users/${user.username}`)
-            }}
-        >
-            <p><UserDisplayName asClient={true} width={16} user={user} /></p>
-            <p>{user.username}</p>
-            <p>{user.studyProgramme}</p>
-            <p>{user.class}</p>
+        <>
+            <td><UserDisplayName width={16} user={user} /></td>
+            <td>{user.username}</td>
+            <td>{user.studyProgramme}</td>
+            <td>{user.class}</td>
             {
                 groupSelected && (<>
-                    <p>{user.selectedGroupInfo?.title}</p>
-                    <p>{user.selectedGroupInfo?.admin ? 'Ja' : 'Nei'}</p>
+                    <td>{user.selectedGroupInfo?.title}</td>
+                    <td>{user.selectedGroupInfo?.admin ? 'Ja' : 'Nei'}</td>
                 </>)
             }
-
-        </span>
+        </>
     )
 }
diff --git a/src/app/_components/Visibility/DoubleLevelVisibilityDescription/DoubleLevelVisibilityDescription.module.scss b/src/app/_components/Visibility/DoubleLevelVisibilityDescription/DoubleLevelVisibilityDescription.module.scss
new file mode 100644
index 000000000..c8f1c6f0a
--- /dev/null
+++ b/src/app/_components/Visibility/DoubleLevelVisibilityDescription/DoubleLevelVisibilityDescription.module.scss
@@ -0,0 +1,10 @@
+@use '@/styles/ohma';
+
+.DoubleLevelVisibilityDescription {
+    display: flex;
+    flex-direction: column;
+    gap: 0.2em;
+    margin-top: 0.5em;
+    font-size: ohma.$fonts-s;
+    opacity: 0.85;
+}
diff --git a/src/app/_components/Visibility/DoubleLevelVisibilityDescription/DoubleLevelVisibilityDescription.tsx b/src/app/_components/Visibility/DoubleLevelVisibilityDescription/DoubleLevelVisibilityDescription.tsx
new file mode 100644
index 000000000..969c751d9
--- /dev/null
+++ b/src/app/_components/Visibility/DoubleLevelVisibilityDescription/DoubleLevelVisibilityDescription.tsx
@@ -0,0 +1,25 @@
+'use client'
+import styles from './DoubleLevelVisibilityDescription.module.scss'
+import { describeMatrix } from '@/auth/visibility/describeVisibility'
+import { useGroups } from '@/contexts/ClientData'
+import type { DoubleLevelVisibilityMatrix } from '@/services/visibility/types'
+
+type PropTypes = {
+    doubleLevelVisibility: DoubleLevelVisibilityMatrix,
+}
+
+/**
+ * A human readable "who can see / who administrates" description of a DoubleLevelVisibilityMatrix -
+ * reusable by any service built on `implementDoubleLevelVisibilityOperations`, not just image collections.
+ */
+export default function DoubleLevelVisibilityDescription({ doubleLevelVisibility }: PropTypes) {
+    const groupsResult = useGroups()
+    const groups = groupsResult.status === 'success' ? groupsResult.groups : null
+
+    return (
+        <p className={styles.DoubleLevelVisibilityDescription}>
+            <span>Kan se: {describeMatrix(doubleLevelVisibility.regularLevel, groups)}</span>
+            <span>Kan administrere: {describeMatrix(doubleLevelVisibility.adminLevel, groups)}</span>
+        </p>
+    )
+}
diff --git a/src/app/_components/Visibility/VisibilityAdmin/VisibilityAdmin.module.scss b/src/app/_components/Visibility/VisibilityAdmin/VisibilityAdmin.module.scss
new file mode 100644
index 000000000..2397359c3
--- /dev/null
+++ b/src/app/_components/Visibility/VisibilityAdmin/VisibilityAdmin.module.scss
@@ -0,0 +1,38 @@
+@use '@/styles/ohma';
+
+.VisibilityAdmin {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    min-width: 350px;
+}
+
+.summary {
+    font-style: italic;
+}
+
+.editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75em;
+}
+
+.requirement {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    padding: 0.5em;
+    border: 1px solid;
+}
+
+.requirementHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.condition {
+    display: flex;
+    gap: 0.5em;
+    align-items: flex-end;
+}
diff --git a/src/app/_components/Visibility/VisibilityAdmin/VisibilityAdmin.tsx b/src/app/_components/Visibility/VisibilityAdmin/VisibilityAdmin.tsx
new file mode 100644
index 000000000..a93227a07
--- /dev/null
+++ b/src/app/_components/Visibility/VisibilityAdmin/VisibilityAdmin.tsx
@@ -0,0 +1,187 @@
+'use client'
+import styles from './VisibilityAdmin.module.scss'
+import Form from '@/components/Form/Form'
+import Button from '@/components/UI/Button'
+import { SelectNumber, SelectString } from '@/components/UI/Select'
+import { useGroups } from '@/contexts/ClientData'
+import { describeMatrix } from '@/auth/visibility/describeVisibility'
+import { findGroup, orderOptions } from '@/lib/groups/groupOptions'
+import { configureAction } from '@/services/configureAction'
+import { useState } from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faPlus, faTrash } from '@fortawesome/free-solid-svg-icons'
+import type {
+    UpdateVisibilityAction,
+    VisibilityCondition,
+    VisibilityMatrix,
+    VisibilityRequirement
+} from '@/services/visibility/types'
+import type { VisibilityRequirementGroupType } from '@/prisma-generated-pn-types'
+
+type PropTypes = {
+    visibility: VisibilityMatrix,
+    visibilityId: number,
+    updateVisibilityAction: UpdateVisibilityAction,
+}
+
+export default function VisibilityAdmin({ visibility, visibilityId, updateVisibilityAction }: PropTypes) {
+    const groupsResult = useGroups()
+    const groups = groupsResult.status === 'success' ? groupsResult.groups : null
+    const [requirements, setRequirements] = useState<VisibilityRequirement[]>(visibility.requirements)
+
+    function addRequirement() {
+        const defaultGroupId = groups?.[0]?.id
+        if (defaultGroupId === undefined) return
+        setRequirements(previous => [...previous, { conditions: [{ type: 'ACTIVE', groupId: defaultGroupId }] }])
+    }
+
+    function removeRequirement(requirementIndex: number) {
+        setRequirements(previous => previous.filter((_, index) => index !== requirementIndex))
+    }
+
+    function addCondition(requirementIndex: number) {
+        const defaultGroupId = groups?.[0]?.id
+        if (defaultGroupId === undefined) return
+        setRequirements(previous => previous.map((requirement, index) => (
+            index === requirementIndex
+                ? { conditions: [...requirement.conditions, { type: 'ACTIVE', groupId: defaultGroupId }] }
+                : requirement
+        )))
+    }
+
+    function removeCondition(requirementIndex: number, conditionIndex: number) {
+        setRequirements(previous => previous.map((requirement, index) => (
+            index === requirementIndex
+                ? { conditions: requirement.conditions.filter((_, index_) => index_ !== conditionIndex) }
+                : requirement
+        )))
+    }
+
+    function updateCondition(requirementIndex: number, conditionIndex: number, updated: VisibilityCondition) {
+        setRequirements(previous => previous.map((requirement, index) => (
+            index === requirementIndex
+                ? {
+                    conditions: requirement.conditions.map((condition, index_) => (
+                        index_ === conditionIndex ? updated : condition
+                    ))
+                }
+                : requirement
+        )))
+    }
+
+    function handleConditionGroupChange(
+        requirementIndex: number,
+        conditionIndex: number,
+        condition: VisibilityCondition,
+        groupId: number
+    ) {
+        const group = findGroup(groups, groupId)
+        updateCondition(requirementIndex, conditionIndex, condition.type === 'ORDER'
+            ? { type: 'ORDER', groupId, order: group?.order ?? condition.order }
+            : { type: 'ACTIVE', groupId })
+    }
+
+    function handleConditionTypeChange(
+        requirementIndex: number,
+        conditionIndex: number,
+        condition: VisibilityCondition,
+        type: VisibilityRequirementGroupType
+    ) {
+        const group = findGroup(groups, condition.groupId)
+        updateCondition(requirementIndex, conditionIndex, type === 'ORDER'
+            ? { type: 'ORDER', groupId: condition.groupId, order: group?.order ?? 0 }
+            : { type: 'ACTIVE', groupId: condition.groupId })
+    }
+
+    const saveVisibility = configureAction(updateVisibilityAction, { params: { visibilityId } })
+
+    async function handleSave() {
+        return saveVisibility({ data: { requirements } })
+    }
+
+    const groupOptions = (groups ?? []).map(group => ({ value: group.id, label: group.name, key: group.id.toString() }))
+
+    return (
+        <div className={styles.VisibilityAdmin}>
+            <p className={styles.summary}>{describeMatrix({ requirements }, groups)}</p>
+            {
+                groups === null ? (
+                    <p>Laster grupper...</p>
+                ) : (
+                    <div className={styles.editor}>
+                        {
+                            requirements.map((requirement, requirementIndex) => (
+                                <div className={styles.requirement} key={requirementIndex}>
+                                    <div className={styles.requirementHeader}>
+                                        <span>Krav {requirementIndex + 1} (ett av følgende):</span>
+                                        <button type="button" onClick={() => removeRequirement(requirementIndex)}>
+                                            <FontAwesomeIcon icon={faTrash} />
+                                        </button>
+                                    </div>
+                                    {
+                                        requirement.conditions.map((condition, conditionIndex) => (
+                                            <div className={styles.condition} key={conditionIndex}>
+                                                <SelectNumber
+                                                    name={`req-${requirementIndex}-cond-${conditionIndex}-group`}
+                                                    label="Gruppe"
+                                                    value={condition.groupId}
+                                                    options={groupOptions}
+                                                    onChange={groupId => handleConditionGroupChange(
+                                                        requirementIndex, conditionIndex, condition, groupId
+                                                    )}
+                                                />
+                                                <SelectString
+                                                    name={`req-${requirementIndex}-cond-${conditionIndex}-type`}
+                                                    label="Type"
+                                                    value={condition.type}
+                                                    options={[
+                                                        { value: 'ACTIVE', label: 'Aktivt medlem' },
+                                                        { value: 'ORDER', label: 'Spesifik orden' },
+                                                    ]}
+                                                    onChange={type => handleConditionTypeChange(
+                                                        requirementIndex,
+                                                        conditionIndex,
+                                                        condition,
+                                                        type as VisibilityRequirementGroupType
+                                                    )}
+                                                />
+                                                {
+                                                    condition.type === 'ORDER' && (
+                                                        <SelectNumber
+                                                            name={`req-${requirementIndex}-cond-${conditionIndex}-order`}
+                                                            label="Orden"
+                                                            value={condition.order}
+                                                            options={orderOptions(findGroup(groups, condition.groupId))}
+                                                            onChange={order => updateCondition(
+                                                                requirementIndex,
+                                                                conditionIndex,
+                                                                { type: 'ORDER', groupId: condition.groupId, order }
+                                                            )}
+                                                        />
+                                                    )
+                                                }
+                                                <button
+                                                    type="button"
+                                                    onClick={() => removeCondition(requirementIndex, conditionIndex)}
+                                                >
+                                                    <FontAwesomeIcon icon={faTrash} />
+                                                </button>
+                                            </div>
+                                        ))
+                                    }
+                                    <Button color="secondary" type="button" onClick={() => addCondition(requirementIndex)}>
+                                        <FontAwesomeIcon icon={faPlus} /> Legg til alternativ
+                                    </Button>
+                                </div>
+                            ))
+                        }
+                        <Button color="secondary" type="button" onClick={addRequirement}>
+                            <FontAwesomeIcon icon={faPlus} /> Legg til krav
+                        </Button>
+                        <Form submitText="Lagre" submitColor="green" refreshOnSuccess action={handleSave} />
+                    </div>
+                )
+            }
+        </div>
+    )
+}
diff --git a/src/app/_components/VisiblityAdmin/VisibilityAdmin.module.scss b/src/app/_components/VisiblityAdmin/VisibilityAdmin.module.scss
deleted file mode 100644
index f5daa86a7..000000000
--- a/src/app/_components/VisiblityAdmin/VisibilityAdmin.module.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@use '@/styles/ohma';
-
-.VisibilityAdmin {
-    
-}
\ No newline at end of file
diff --git a/src/app/_components/VisiblityAdmin/VisibilityAdmin.tsx b/src/app/_components/VisiblityAdmin/VisibilityAdmin.tsx
deleted file mode 100644
index 2ef4479c7..000000000
--- a/src/app/_components/VisiblityAdmin/VisibilityAdmin.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-import styles from './VisibilityAdmin.module.scss'
-import type { VisibilityMatrix } from '@/services/visibility/types'
-
-
-type PropTypes = {
-    visibility: VisibilityMatrix
-}
-
-export default function VisibilityAdmin({ visibility }: PropTypes) {
-    console.log(visibility)
-    return (
-        <div className={styles.VisibilityAdmin}>
-            <h2>Synelighet!</h2>
-        </div>
-    )
-}
diff --git a/src/app/_components/YouTube/YouTube.module.scss b/src/app/_components/YouTube/YouTube.module.scss
index ef096d6fb..e98ca26bb 100644
--- a/src/app/_components/YouTube/YouTube.module.scss
+++ b/src/app/_components/YouTube/YouTube.module.scss
@@ -14,5 +14,4 @@
     border: none;
     border-radius: ohma.$rounding;
     background-color: white;
-    box-shadow: 10px 10px 15px ohma.$colors-gray-700;
 }
diff --git a/src/app/admin/BackButton.module.scss b/src/app/admin/BackButton.module.scss
index 19297c6a0..6ac96d447 100644
--- a/src/app/admin/BackButton.module.scss
+++ b/src/app/admin/BackButton.module.scss
@@ -5,7 +5,7 @@ $iconSize: 30px;
 .BackButton {
     > .icon {
         margin: ohma.$gap;
-        color: ohma.$colors-gray-600;
+        color: ohma.$colors-text-muted;
         width: $iconSize;
         height: $iconSize;
     }
diff --git a/src/app/admin/BackButton.tsx b/src/app/admin/BackButton.tsx
index 167a195df..28bceab5d 100644
--- a/src/app/admin/BackButton.tsx
+++ b/src/app/admin/BackButton.tsx
@@ -17,7 +17,7 @@ export default function BackButton({ className }: PropTypes) {
     const href = `/${pathname?.split('/').slice(1, -1).join('/')}`
 
     return (
-        <Link className={`${styles.BackButton} ${className}`} href={href}>
+        <Link className={`${styles.BackButton} ${className}`} aria-label={'Go back'} href={href}>
             <FontAwesomeIcon icon={faArrowLeft} className={styles.icon}/>
         </Link>
     )
diff --git a/src/app/admin/SlideSidebar.module.scss b/src/app/admin/SlideSidebar.module.scss
index 0b8ebf7f9..7ddbea3d8 100644
--- a/src/app/admin/SlideSidebar.module.scss
+++ b/src/app/admin/SlideSidebar.module.scss
@@ -1,97 +1,124 @@
 @use '@/styles/ohma';
 
+$mobileToggleBarHeight: 56px;
+$mobileToggleButtonSize: 44px;
+
 .SlideSidebar {
-    @include ohma.layer;
-    margin: .5em;
-    padding: 2em;
+    padding: ohma.$gap;
+    min-width: 250px;
     border-radius: ohma.$rounding;
-    max-height: calc(100dvh - 74px);
+    max-height: calc(100dvh - #{ohma.$nav-height} - 26px);
     overflow-y: scroll;
 
-    @include ohma.screenMobile {
-            margin: 8px;
-            z-index: 3;
-            height: 40dvh;
-            width: calc(100% - 16px);
-            position: fixed;
-            top: 0;
+    .toggleButton {
+        display: none;
+    }
+
+    .backdrop {
+        display: none;
     }
 
-    .toggle {
-        position: absolute;
-        right: -.6em;
-        top: min(50%, 50vh);
-        transform: translateY(-50%);
-        width: 3em;
-        height: 3em;
-        border-radius: 50%;
-        background-color: ohma.$colors-gray-500;
-        border: none;
-        svg {
+    @include ohma.screenMobile {
+        padding: 0;
+        margin: 0;
+        min-width: 0;
+        max-height: none;
+        overflow: visible;
+
+        .toggleButton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: fixed;
+            top: calc(2 * #{ohma.$gap});
+            right: calc(3 * #{ohma.$gap});
+            z-index: 6;
+            width: $mobileToggleButtonSize;
+            height: $mobileToggleButtonSize;
+            border: none;
+            border-radius: 50%;
+            background: ohma.$colors-surface-raised;
             color: ohma.$colors-text;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
+            cursor: pointer;
         }
-        @include ohma.screenMobile {
-            right: 8px;
-            top: 28px;
+
+        .backdrop {
+            position: fixed;
+            inset: 0;
+            z-index: 4;
+            background: rgba(0, 0, 0, 0.5);
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity ohma.$transitionTime ease, visibility ohma.$transitionTime ease;
         }
-    }
 
-    &.closed {
         .sidebar {
-            width: ohma.$gap;
-        }
-        @include ohma.screenMobile {
-            height: 7 * ohma.$gap;
+            position: fixed;
+            top: calc(#{ohma.$nav-height} + 2*#{ohma.$gap});
+            left: 0;
+            width: min(85vw, 320px);
+            height: calc(100dvh - 2*#{ohma.$nav-height} - 4*#{ohma.$gap})!important;
+            margin: 0;
+            padding: ohma.$gap;
+            background: ohma.$colors-surface-base;
+            border-radius: 0 ohma.$rounding ohma.$rounding 0;
+            z-index: 5;
+            transform: translateX(-100%);
+            transition: transform ohma.$transitionTime ease;
         }
-        .toggle {
-            > svg {
-                transform: rotate(180deg);
+
+        &.open {
+            .backdrop {
+                opacity: 1;
+                visibility: visible;
+            }
+            .sidebar {
+                transform: translateX(0);
             }
         }
     }
 
-    //Closing
-    &.closed .sidebar {
-        transition: width .3s .1s, opacity .1s;
-        opacity: 0;
-    }
-
-    //Opening
-    &:not(.closed) .sidebar {
-        transition: width .3s, opacity .3s .3s;
-        opacity: 1;
-    }
-
     .sidebar {
-        margin-top: 1em;
         display: flex;
         flex-direction: column;
+        gap: ohma.$gap;
         overflow-y: auto;
         height: 100%;
         color: ohma.$colors-text;
 
-        a {
-            color: ohma.$colors-text-muted;
-            text-decoration: none;
-            padding: .5em;
-            border-radius: .5em;
-            margin: .5em 0;
-            transition: background-color .3s;
-            &:hover, &.active {
-                @include ohma.layer;
-            }
-        }
         h3 {
-            margin-top: 1em;
+            display: flex;
+            align-items: center;
+            gap: ohma.$gap;
+            margin: calc(#{ohma.$gap} * 2) 0 0;
+            padding: calc(#{ohma.$gap} * 2);
+            border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+            background: ohma.$colors-surface-raised;
+            font-size: ohma.$fonts-l;
+            font-weight: ohma.$fonts-weight-l;
+            color: ohma.$colors-ink-strong;
+
+            &:first-child {
+                margin-top: 0;
+            }
+
             svg {
-                margin-right: .2em; 
+                font-size: 0.8em;
             }
         }
-    }
 
-    .backButton {
-        position: absolute;
-        top: .5em;
-        left: .5em;
+        a {
+            color: ohma.$colors-text;
+            text-decoration: none;
+            padding: calc(#{ohma.$gap} * 1.5) calc(#{ohma.$gap} * 2);
+            margin-left: calc(#{ohma.$gap} * 3);
+            border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+            background: ohma.$colors-surface-raised;
+            transition: background-color ohma.$transitionTime;
+            &:hover, &.active {
+                background: ohma.$colors-surface-hover;
+            }
+        }
     }
 }
diff --git a/src/app/admin/SlideSidebar.tsx b/src/app/admin/SlideSidebar.tsx
index 09e6d8404..3251206c7 100644
--- a/src/app/admin/SlideSidebar.tsx
+++ b/src/app/admin/SlideSidebar.tsx
@@ -1,8 +1,9 @@
 'use client'
 import styles from './SlideSidebar.module.scss'
-import BackButton from './BackButton'
 import useOnNavigation from '@/hooks/useOnNavigation'
-import { Fragment, useRef, useState } from 'react'
+import useClickOutsideRef from '@/hooks/useClickOutsideRef'
+import useKeyPress from '@/hooks/useKeyPress'
+import { Fragment, useState } from 'react'
 import Link from 'next/link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
@@ -12,13 +13,14 @@ import {
     faNewspaper,
     faUser,
     faUserGroup,
-    faArrowLeft,
     faPaperPlane,
     faSchool,
     faDotCircle,
     faHouse,
     faShop,
     faListDots,
+    faBars,
+    faXmark,
 } from '@fortawesome/free-solid-svg-icons'
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
 
@@ -227,6 +229,10 @@ const navigations = [
                 title: 'Flairs',
                 href: '/admin/flairs'
             },
+            {
+                title: 'Komponenter',
+                href: '/admin/component-test'
+            },
         ]
     }
 ] satisfies {
@@ -250,56 +256,48 @@ type PropTypes = {
  * @returns
  */
 export default function SlideSidebar({ currentPath }: PropTypes) {
-    const [open, setOpen] = useState(true)
-    const previousPath = useRef<string>(currentPath)
+    const [open, setOpen] = useState(currentPath === 'admin')
 
-    useOnNavigation(() => {
-        if (previousPath.current === 'admin' && currentPath !== 'admin') {
-            setOpen(false)
-        }
-        if (currentPath === 'admin') {
-            setOpen(true)
-        }
-        previousPath.current = currentPath
-    })
+    useOnNavigation(() => setOpen(currentPath === 'admin'))
 
-    const handleToggle = () => {
-        setOpen(!open)
-    }
+    const sidebarRef = useClickOutsideRef(() => setOpen(false))
+    useKeyPress('Escape', () => setOpen(false))
 
     return <div className={open ? `${styles.SlideSidebar} ${styles.open}` : `${styles.SlideSidebar} ${styles.closed}`}>
-        <aside className={styles.sidebar}>
-            {
-                navigations.map(navigation => (
-                    <Fragment key={navigation.header.title}>
-                        <h3 className={styles.header}>
-                            <FontAwesomeIcon icon={navigation.header.icon} />
-                            {navigation.header.title}
-                        </h3>
-                        {
-                            navigation.links.map(link => (
-                                <Link
-                                    key={link.title}
-                                    href={link.href}
-                                    className={link.href === `/admin/${currentPath}` ? styles.active : ''}
-                                >
-                                    {link.title}
-                                </Link>
-                            ))
-                        }
-                    </Fragment>
-                ))
-            }
-        </aside>
-        {
-            !(currentPath === 'admin' && open) && (
-                <button onClick={handleToggle} className={styles.toggle}>
-                    <FontAwesomeIcon icon={faArrowLeft} />
-                </button>
-            )
-        }
-
-        <BackButton className={styles.backButton} />
-
+        <div className={styles.backdrop} />
+        <div ref={sidebarRef} className={styles.panelGroup}>
+            <button
+                type="button"
+                className={styles.toggleButton}
+                aria-label={open ? 'Lukk meny' : 'Åpne meny'}
+                aria-expanded={open}
+                onClick={() => setOpen(previousOpen => !previousOpen)}
+            >
+                <FontAwesomeIcon icon={open ? faXmark : faBars} />
+            </button>
+            <aside className={styles.sidebar}>
+                {
+                    navigations.map(navigation => (
+                        <Fragment key={navigation.header.title}>
+                            <h3 className={styles.header}>
+                                <FontAwesomeIcon icon={navigation.header.icon} />
+                                {navigation.header.title}
+                            </h3>
+                            {
+                                navigation.links.map(link => (
+                                    <Link
+                                        key={link.title}
+                                        href={link.href}
+                                        className={link.href === `/admin/${currentPath}` ? styles.active : ''}
+                                    >
+                                        {link.title}
+                                    </Link>
+                                ))
+                            }
+                        </Fragment>
+                    ))
+                }
+            </aside>
+        </div>
     </div>
 }
diff --git a/src/app/admin/admission/[admission]/page.tsx b/src/app/admin/admission/[admission]/page.tsx
index 04cf2c62c..a4532459e 100644
--- a/src/app/admin/admission/[admission]/page.tsx
+++ b/src/app/admin/admission/[admission]/page.tsx
@@ -1,9 +1,10 @@
 import RegisterAdmissiontrial from './registration'
 import { admissionDisplayNames, allAdmissions } from '@/services/admission/constants'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
-import { readOmegaJWTPublicKey } from '@/services/omegaid/actions'
-import { notFound } from 'next/navigation'
+import { readOmegaJWTPublicKeyAction } from '@/services/omegaid/actions'
+import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import { type Admission as AdmissionType } from '@/prisma-generated-pn-types'
+import { notFound } from 'next/navigation'
 
 type PropTypes = {
     params: Promise<{
@@ -18,7 +19,7 @@ export default async function AdmissionTrials({ params }: PropTypes) {
 
     const admission = (await params).admission
 
-    const publicKey = await readOmegaJWTPublicKey()
+    const publicKey = unwrapActionReturn(await readOmegaJWTPublicKeyAction())
 
     return <PageWrapper
         title={`Registrer opptak for ${admissionDisplayNames[admission]}`}
diff --git a/src/app/admin/admission/[admission]/registration.module.scss b/src/app/admin/admission/[admission]/registration.module.scss
index 421cf48fc..cb9eabf53 100644
--- a/src/app/admin/admission/[admission]/registration.module.scss
+++ b/src/app/admin/admission/[admission]/registration.module.scss
@@ -12,7 +12,7 @@
         }
 
         &.success {
-            color: ohma.$colors-green;
+            color: ohma.$colors-accent-green;
         }
     }
 }
\ No newline at end of file
diff --git a/src/app/admin/api-keys/CreateApiKeyForm.module.scss b/src/app/admin/api-keys/CreateApiKeyForm.module.scss
index dca3ad869..62716f3c4 100644
--- a/src/app/admin/api-keys/CreateApiKeyForm.module.scss
+++ b/src/app/admin/api-keys/CreateApiKeyForm.module.scss
@@ -18,7 +18,7 @@
                 background-color: transparent;
                 border: none;
                 svg {
-                    color: ohma.$colors-gray-500;
+                    color: ohma.$colors-text-muted;
                     width: 1.5em;
                     height: 1.5em;
                 }
@@ -28,10 +28,10 @@
     .copySuccess {
         margin: .5em 0;
         &.red {
-            color: ohma.$colors-red;
+            color: ohma.$colors-accent-red;
         }
         &.green {
-            color: ohma.$colors-green;
+            color: ohma.$colors-accent-green;
         }
     }
 }
\ No newline at end of file
diff --git a/src/app/admin/api-keys/[name]/page.module.scss b/src/app/admin/api-keys/[name]/page.module.scss
index 741455579..3cf28ca9e 100644
--- a/src/app/admin/api-keys/[name]/page.module.scss
+++ b/src/app/admin/api-keys/[name]/page.module.scss
@@ -10,6 +10,6 @@
     > .admin {
         margin-top: 1em;
         padding-top: 1em;
-        border-top: .3em solid ohma.$colors-gray-300;
+        border-top: .3em solid ohma.$colors-surface-subtle;
     }
 }
\ No newline at end of file
diff --git a/src/app/admin/api-keys/page.module.scss b/src/app/admin/api-keys/page.module.scss
index 6612a79b7..be1d1480e 100644
--- a/src/app/admin/api-keys/page.module.scss
+++ b/src/app/admin/api-keys/page.module.scss
@@ -17,11 +17,11 @@
 }
 
 .activated {
-    background-color: color-mix(in srgb, ohma.$colors-green, white 50%);
-    color: ohma.$colors-green;
+    background-color: color-mix(in srgb, ohma.$colors-accent-green, white 50%);
+    color: ohma.$colors-accent-green;
 }
 
 .deactivated {
-    background-color: color-mix(in srgb, ohma.$colors-red, white 50%);
-    color: ohma.$colors-red;
+    background-color: color-mix(in srgb, ohma.$colors-accent-red, white 50%);
+    color: ohma.$colors-accent-red;
 }
\ No newline at end of file
diff --git a/src/app/admin/cabin-periods/page.module.scss b/src/app/admin/cabin-periods/page.module.scss
index 9b2614128..6879938bc 100644
--- a/src/app/admin/cabin-periods/page.module.scss
+++ b/src/app/admin/cabin-periods/page.module.scss
@@ -1,7 +1,7 @@
 @use "@/styles/ohma";
 
 .button {
-    @include ohma.btn(ohma.$colors-primary);
+    @include ohma.btn(ohma.$colors-accent-blue);
 }
 
 .table {
diff --git a/src/app/admin/committees/CreateCommitteeForm.tsx b/src/app/admin/committees/CreateCommitteeForm.tsx
index 339653ecc..7148e420f 100644
--- a/src/app/admin/committees/CreateCommitteeForm.tsx
+++ b/src/app/admin/committees/CreateCommitteeForm.tsx
@@ -1,35 +1,25 @@
-'use client'
 import styles from './CreateCommitteeForm.module.scss'
 import Form from '@/components/Form/Form'
 import TextInput from '@/components/UI/TextInput'
+import FileInput from '@/components/UI/FileInput'
+import LicenseChooser from '@/components/LicenseChooser/LicenseChooser'
 import { createCommitteeAction } from '@/services/groups/committees/actions'
-import { ImageSelectionContext } from '@/contexts/ImageSelection'
-import { useContext } from 'react'
 
 /**
- * WARNING: The component expects to be rendered inside a ImageSelectionProvider, so the form can
- * be submitted with a committee logo.
- * A component to create a committee
- * @param defaultImage - The default image to use as a committee logo if no logo is selected
- * @returns committee form JSX
+ * A form to create a committee. The logo fields are optional - if left empty the committee falls
+ * back to the shared default committee logo, which can be replaced later from the committee's own
+ * admin page.
  */
 export default function CreateCommitteeForm() {
-    const imageSelection = useContext(ImageSelectionContext)
-    if (!imageSelection) throw new Error('No context')
-
-    const createCommittee = (data: FormData) => {
-        if (imageSelection.selectedImage) {
-            data.append('logoImageId', imageSelection.selectedImage.id.toString())
-        }
-
-        return createCommitteeAction(data)
-    }
-
     return (
         <div className={styles.CreateCommitteeForm}>
-            <Form action={createCommittee}>
-                <TextInput name="name" label="Navn"/>
-                <TextInput name="shortName" label="Kortnavn"/>
+            <Form action={createCommitteeAction}>
+                <TextInput name="name" label="Navn" />
+                <TextInput name="shortName" label="Kortnavn" />
+                <FileInput label="Logo" name="imageFile" color="primary" />
+                <TextInput label="Alternativ tekst for logo" name="imageAlt" />
+                <TextInput label="Kreditert" name="imageCredit" />
+                <LicenseChooser name="imageLicenseId" />
             </Form>
         </div>
     )
diff --git a/src/app/admin/committees/page.module.scss b/src/app/admin/committees/page.module.scss
index 9e2971ebc..24d15f282 100644
--- a/src/app/admin/committees/page.module.scss
+++ b/src/app/admin/committees/page.module.scss
@@ -1,18 +1,5 @@
-@use '@/styles/ohma';
-
 .wrapper {
     display: flex;
     flex-flow: row wrap;
     gap: 1em;
-    > .imgSelection {
-        min-width: clamp(50vw, 700px, 90vw);
-        min-height: 50vh;
-        background-color: ohma.$colors-gray-500;
-        border-radius: ohma.$rounding;
-        padding: ohma.$rounding;
-    }
-    > .form {
-        min-width: 250px;
-        
-    }
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/committees/page.tsx b/src/app/admin/committees/page.tsx
index 748d9e3c5..0f30cc85d 100644
--- a/src/app/admin/committees/page.tsx
+++ b/src/app/admin/committees/page.tsx
@@ -1,52 +1,13 @@
 import styles from './page.module.scss'
 import CreateCommitteeForm from './CreateCommitteeForm'
-import ImageSelectionProvider from '@/contexts/ImageSelection'
-import ImageList from '@/components/Image/ImageList/ImageList'
-import { ImagePagingProvider } from '@/contexts/paging/ImagePaging'
-import { readSpecialImageCollectionAction } from '@/services/images/collections/actions'
-import PopUpProvider from '@/contexts/PopUp'
-import { readSpecialImageAction } from '@/services/images/actions'
-import type { PageSizeImage } from '@/contexts/paging/ImagePaging'
-
-export default async function adminCommittee() {
-    const committeeLogoCollectionRes = await readSpecialImageCollectionAction('COMMITTEELOGOS')
-    if (!committeeLogoCollectionRes.success) throw new Error('Kunne ikke finne komitelogoer')
-    const { id: collectionId } = committeeLogoCollectionRes.data
-
-    const defaultCommitteeLogoRes = await readSpecialImageAction.bind(
-        null, { params: { special: 'DAFAULT_COMMITTEE_LOGO' } }
-    )()
-    if (!defaultCommitteeLogoRes.success) throw new Error('Kunne ikke finne standard komitelogo')
-    const defaultCommitteeLogo = defaultCommitteeLogoRes.data
-
-    const pageSize: PageSizeImage = 30
+import PageWrapper from '@/components/PageWrapper/PageWrapper'
 
+export default function AdminCommittee() {
     return (
-        <ImagePagingProvider
-            serverRenderedData={[]}
-            details={{
-                collectionId,
-            }}
-            startPage={{
-                page: 0,
-                pageSize,
-            }}
-        >
-            <PopUpProvider>
-                <ImageSelectionProvider
-                    defaultImage={defaultCommitteeLogo}
-                    defaultSelectionMode={true}
-                >
-                    <div className={styles.wrapper}>
-                        <div className={styles.imgSelection}>
-                            <ImageList withUpload />
-                        </div>
-                        <div className={styles.form}>
-                            <CreateCommitteeForm />
-                        </div>
-                    </div>
-                </ImageSelectionProvider>
-            </PopUpProvider>
-        </ImagePagingProvider>
+        <PageWrapper title="Opprett komité">
+            <div className={styles.wrapper}>
+                <CreateCommitteeForm />
+            </div>
+        </PageWrapper>
     )
 }
diff --git a/src/app/admin/component-test/page.module.scss b/src/app/admin/component-test/page.module.scss
new file mode 100644
index 000000000..3db90f074
--- /dev/null
+++ b/src/app/admin/component-test/page.module.scss
@@ -0,0 +1,38 @@
+@use '@/styles/ohma';
+
+.wrapper {
+    padding: calc(2 * #{ohma.$gap});
+    display: flex;
+    flex-direction: column;
+    gap: calc(2 * #{ohma.$gap});
+
+    > p {
+        color: ohma.$colors-text-muted;
+    }
+}
+
+.section {
+    display: flex;
+    flex-direction: column;
+    gap: ohma.$gap;
+    padding-bottom: calc(2 * #{ohma.$gap});
+    border-bottom: 1px solid ohma.$colors-surface-subtle;
+
+    &:last-child {
+        border-bottom: none;
+    }
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: calc(2 * #{ohma.$gap});
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+    gap: ohma.$gap;
+    max-width: calc(60 * #{ohma.$gap});
+}
diff --git a/src/app/admin/component-test/page.tsx b/src/app/admin/component-test/page.tsx
new file mode 100644
index 000000000..0aa631db2
--- /dev/null
+++ b/src/app/admin/component-test/page.tsx
@@ -0,0 +1,152 @@
+'use client'
+import styles from './page.module.scss'
+import Button from '@/components/UI/Button'
+import SubmitButton from '@/components/UI/SubmitButton'
+import TextInput from '@/components/UI/TextInput'
+import Textarea from '@/components/UI/Textarea'
+import Checkbox from '@/components/UI/Checkbox'
+import DateInput from '@/components/UI/DateInput'
+import Slider from '@/components/UI/Slider'
+import FileInput from '@/components/UI/FileInput'
+import Dropdown from '@/components/UI/Dropdown'
+import SearchableDropdown from '@/components/UI/SearchableDropdown'
+import ColorInput from '@/components/UI/ColorInput'
+import { SelectString, SelectNumber } from '@/components/UI/Select'
+import ProgressBar from '@/components/ProgressBar/ProgressBar'
+
+const textInputColors = ['primary', 'secondary', 'red', 'black', 'white'] as const
+const sliderColors = ['primary', 'secondary', 'red', 'black', 'white'] as const
+const fileInputColors = ['primary', 'secondary', 'red', 'black', 'white'] as const
+const selectColors = ['primary', 'secondary', 'red', 'black', 'white'] as const
+
+const dropdownOptions = [
+    { value: 'ntnu', label: 'NTNU' },
+    { value: 'ntb', label: 'NTB' },
+    { value: 'komite', label: 'Komité' },
+    { value: 'styret', label: 'Styret' },
+]
+
+const selectOptions = dropdownOptions.map(option => ({ ...option, key: option.value }))
+
+const yearOptions = [2020, 2021, 2022, 2023].map(year => ({ value: year, key: String(year) }))
+
+export default function ComponentTest() {
+    return (
+        <div className={styles.wrapper}>
+            <h1>Komponenter</h1>
+            <p>Et lite utvalg av komponenter som finnes på veven.</p>
+
+            <section className={styles.section}>
+                <h2>Buttons</h2>
+                <div className={styles.row}>
+                    <Button color="primary">Primary</Button>
+                    <Button color="secondary">Secondary</Button>
+                    <Button color="green">Green</Button>
+                    <Button color="red">Red</Button>
+                    <Button color="secondary" disabled>Disabled</Button>
+                </div>
+                <form className={styles.row}>
+                    <SubmitButton color="primary" success={false}>Submit</SubmitButton>
+                    <SubmitButton color="green" success={true}>Success</SubmitButton>
+                </form>
+            </section>
+
+            <section className={styles.section}>
+                <h2>Text inputs</h2>
+                <div className={styles.row}>
+                    {textInputColors.map(color => (
+                        <TextInput key={color} name={`text_${color}`} label={color} color={color} />
+                    ))}
+                </div>
+                <div className={styles.row}>
+                    <Textarea name="textarea_demo" label="Textarea" />
+                </div>
+                <div className={styles.row}>
+                    <DateInput name="date_demo" label="Date" />
+                    <DateInput name="datetime_demo" label="Date and time" includeTime />
+                </div>
+            </section>
+
+            <section className={styles.section}>
+                <h2>Checkbox and sliders</h2>
+                <div className={styles.row}>
+                    <Checkbox name="checkbox_demo_1" label="Unchecked" />
+                    <Checkbox name="checkbox_demo_2" label="Checked" defaultChecked />
+                    <Checkbox name="checkbox_demo_3" label="Disabled" disabled />
+                </div>
+                <div className={styles.row}>
+                    {sliderColors.map(color => (
+                        <Slider key={color} name={`slider_${color}`} label={color} color={color} />
+                    ))}
+                </div>
+            </section>
+
+            <section className={styles.section}>
+                <h2>File input</h2>
+                <div className={styles.row}>
+                    {fileInputColors.map(color => (
+                        <FileInput key={color} name={`file_${color}`} label={color} color={color} />
+                    ))}
+                </div>
+            </section>
+
+            <section className={styles.section}>
+                <h2>Color input</h2>
+                <div className={styles.row}>
+                    <ColorInput name="color_demo" label="Farge" defaultValue="#037FFC" />
+                    <ColorInput
+                        name="color_rgb_demo"
+                        label="Fra RGB"
+                        defaultValueRGB={{ red: 92, green: 209, blue: 122 }}
+                    />
+                    <ColorInput name="color_disabled_demo" label="Disabled" defaultValue="#EB5757" disabled />
+                </div>
+            </section>
+
+            <section className={styles.section}>
+                <h2>Dropdowns</h2>
+                <div className={styles.row}>
+                    <Dropdown name="dropdown_demo" label="Dropdown" options={dropdownOptions} />
+                    <SearchableDropdown
+                        name="searchable_dropdown_demo"
+                        label="Searchable dropdown"
+                        options={dropdownOptions}
+                    />
+                </div>
+            </section>
+
+            <section className={styles.section}>
+                <h2>Selects</h2>
+                <div className={styles.row}>
+                    {selectColors.map(color => (
+                        <SelectString
+                            key={color}
+                            name={`select_${color}`}
+                            label={color}
+                            color={color}
+                            options={selectOptions}
+                        />
+                    ))}
+                </div>
+                <div className={styles.row}>
+                    <SelectNumber name="select_number_demo" label="Opptaksår" options={yearOptions} />
+                    <SelectString
+                        name="select_disabled_demo"
+                        label="Disabled"
+                        options={selectOptions}
+                        disabled
+                    />
+                </div>
+            </section>
+
+            <section className={styles.section}>
+                <h2>Progress bar</h2>
+                <div className={styles.column}>
+                    <ProgressBar progress={0.25} />
+                    <ProgressBar progress={0.5} />
+                    <ProgressBar progress={0.9} />
+                </div>
+            </section>
+        </div>
+    )
+}
diff --git a/src/app/admin/dots/CreateDotForm.module.scss b/src/app/admin/dots/CreateDotForm.module.scss
index f059df9fc..03fdb5544 100644
--- a/src/app/admin/dots/CreateDotForm.module.scss
+++ b/src/app/admin/dots/CreateDotForm.module.scss
@@ -2,26 +2,44 @@
 
 .CreateDotForm {
     display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    gap: 2em; 
-    > svg {
-        color: ohma.$colors-text;
-        width: 3em; 
-        height: 3em;
-    }
-    form, .userSelected {
-        gap: 1em;
-        align-items: center;
+    flex-direction: column;
+    gap: calc(2 * #{ohma.$gap});
+
+    .header {
         display: flex;
+        align-items: center;
+        gap: ohma.$gap;
+
+        > svg {
+            color: ohma.$colors-accent-blue;
+            width: 1.5em;
+            height: 1.5em;
+        }
+
+        > h2 {
+            margin: 0;
+        }
     }
-    form {
-        width: auto;
-        button[type="submit"] {
-            transform: translateY(10px);
+
+    .userSelected {
+        display: flex;
+        align-items: center;
+        gap: ohma.$gap;
+
+        > p {
+            color: ohma.$colors-text-muted;
         }
     }
+
+    .form {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: flex-end;
+        gap: calc(2 * #{ohma.$gap});
+    }
+
     .openUserList {
-        @include ohma.btn(ohma.$colors-primary);
+        @include ohma.btn(ohma.$colors-accent-blue);
+        margin: 0;
     }
-}
\ No newline at end of file
+}
diff --git a/src/app/admin/dots/CreateDotForm.tsx b/src/app/admin/dots/CreateDotForm.tsx
index 28c638c4e..322577be6 100644
--- a/src/app/admin/dots/CreateDotForm.tsx
+++ b/src/app/admin/dots/CreateDotForm.tsx
@@ -11,8 +11,6 @@ import { PopUpContext } from '@/contexts/PopUp'
 import { UserSelectionContext } from '@/contexts/UserSelection'
 import { configureAction } from '@/services/configureAction'
 import { useContext } from 'react'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
 
 export default function CreateDotForm() {
     const session = useSession()
@@ -28,16 +26,15 @@ export default function CreateDotForm() {
 
     return (
         <div className={styles.CreateDotForm}>
-            <FontAwesomeIcon icon={faPlus} />
-            <h2>
-                Gi ny prikk
-            </h2>
+            <div className={styles.header}>
+                <h2>Gi ny prikk</h2>
+            </div>
             <div className={styles.userSelected}>
                 <p>
                     {
                         userSelectionContext.user ?
                             `${userSelectionContext.user.firstname} ${userSelectionContext.user.lastname}` :
-                            'ingen bruker valgt'
+                            'Ingen bruker valgt'
                     }
                 </p>
                 <PopUp popUpKey="selectUserDot" showButtonClass={styles.openUserList} showButtonContent={
@@ -47,12 +44,13 @@ export default function CreateDotForm() {
                 </PopUp>
             </div>
             <Form
+                className={styles.form}
                 action={configureAction(createDotAction, { params: { accuserId: session.session.user.id } })}
                 submitText="Lag prikk"
                 refreshOnSuccess
             >
-                <TextInput name="reason" label="Grunn" />
-                <NumberInput name="value" label="Antall prikker" />
+                <TextInput name="reason" label="Grunn" background="raised" />
+                <NumberInput name="value" label="Antall prikker" background="raised" />
                 <input type="hidden" name="userId" value={userSelectionContext.user?.id} />
             </Form>
         </div>
diff --git a/src/app/admin/dots/DotList.module.scss b/src/app/admin/dots/DotList.module.scss
index 5e8180f59..186d8a125 100644
--- a/src/app/admin/dots/DotList.module.scss
+++ b/src/app/admin/dots/DotList.module.scss
@@ -2,28 +2,29 @@
 
 .DotList {
     @include ohma.table();
-    margin-top: 0;
+    margin-top: calc(2 * #{ohma.$gap});
     .inactive {
         text-decoration: line-through;
-        color: ohma.$colors-red;
+        color: ohma.$colors-accent-red;
     }
 }
 
 .selection {
-    @include ohma.layer;
-    margin-top: 1em;
-    border-radius: ohma.$rounding ohma.$rounding 0 0;
-    padding: ohma.$rounding;
+    @include ohma.card;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(3 * #{ohma.$gap});
     display: flex;
     flex-flow: row wrap;
     align-items: center;
+    gap: ohma.$gap;
 
     p {
         flex-grow: 1;
+        margin: 0;
     }
 
     .openUserList {
-        @include ohma.btn(ohma.$colors-primary);
+        @include ohma.btn(ohma.$colors-accent-blue);
         font-weight: ohma.$fonts-weight-s;
         flex-grow: 0;
     }
@@ -34,7 +35,7 @@
             border: none;
             background-color: transparent;
             svg {
-                color: ohma.$colors-gray-800;
+                color: ohma.$colors-text-muted;
                 width: 1.5em;
                 height: 1.5em;
             }
@@ -42,7 +43,7 @@
     }
 
     .selectActive {
-        @include ohma.btn(ohma.$colors-primary);
+        @include ohma.btn(ohma.$colors-accent-blue);
         font-weight: ohma.$fonts-weight-s;
     }
 }
\ No newline at end of file
diff --git a/src/app/admin/dots/DotList.tsx b/src/app/admin/dots/DotList.tsx
index d29675f79..447687a85 100644
--- a/src/app/admin/dots/DotList.tsx
+++ b/src/app/admin/dots/DotList.tsx
@@ -51,11 +51,14 @@ export default function DotList({ onlyActive }: PropTypes) {
                 }>
                     <UserList />
                 </PopUp>
-                <Link className={styles.selectActive} href={
-                    '/admin/dots/' +
-                `?${QueryParams.onlyActive.encodeUrl(!onlyActive)}` +
-                `&${userSelection.user ? QueryParams.userId.encodeUrl(userSelection.user?.id) : ''}`
-                }>
+                <Link
+                    className={styles.selectActive}
+                    aria-label={onlyActive ? 'Show all dots' : 'Show only active dots'}
+                    href={
+                        '/admin/dots/' +
+                    `?${QueryParams.onlyActive.encodeUrl(!onlyActive)}` +
+                    `&${userSelection.user ? QueryParams.userId.encodeUrl(userSelection.user?.id) : ''}`
+                    }>
                     {onlyActive ? 'Vis alle prikker' : 'Vis aktive prikker'}
                 </Link>
             </span>
diff --git a/src/app/admin/dots/page.module.scss b/src/app/admin/dots/page.module.scss
index 727da2d96..4faee0934 100644
--- a/src/app/admin/dots/page.module.scss
+++ b/src/app/admin/dots/page.module.scss
@@ -1,11 +1,14 @@
 @use '@/styles/ohma';
 
 .wrapper {
-    padding: 1em;
+    padding: calc(2 * #{ohma.$gap});
+    display: flex;
+    flex-direction: column;
+    gap: calc(2 * #{ohma.$gap});
+
     .createNew {
-        margin-top: 1em;
-        @include ohma.layer;
-        @include ohma.round();
-        min-height: 100px;
+        @include ohma.card;
+        background-color: ohma.$colors-surface-raised;
+        padding: calc(3 * #{ohma.$gap});
     }
 }
\ No newline at end of file
diff --git a/src/app/admin/flairs/FlairTable.tsx b/src/app/admin/flairs/FlairTable.tsx
new file mode 100644
index 000000000..c2de3c3a7
--- /dev/null
+++ b/src/app/admin/flairs/FlairTable.tsx
@@ -0,0 +1,111 @@
+'use client'
+import styles from './page.module.scss'
+import { increaseFlairRankAction, decreaseFlairRankAction } from '@/services/flairs/actions'
+import { configureAction } from '@/services/configureAction'
+import { useRouter } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import { Reorder, useDragControls } from 'framer-motion'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faArrowUpRightFromSquare, faGripVertical } from '@fortawesome/free-solid-svg-icons'
+import Link from 'next/link'
+import type { PointerEvent, ReactNode } from 'react'
+
+export type FlairRow = {
+    id: number,
+    image: ReactNode,
+    name: string,
+    colorStyle: { backgroundColor: string },
+    editHref: string,
+}
+
+type RowPropTypes = {
+    row: FlairRow,
+    index: number,
+    onDragEnd: (flairId: number) => void,
+}
+
+function FlairTableRow({ row, index, onDragEnd }: RowPropTypes) {
+    const dragControls = useDragControls()
+
+    const startDrag = (event: PointerEvent) => dragControls.start(event)
+
+    return (
+        <Reorder.Item
+            as="div"
+            role="row"
+            value={row}
+            dragListener={false}
+            dragControls={dragControls}
+            onDragEnd={() => onDragEnd(row.id)}
+            whileDrag={{ scale: 1.01, boxShadow: '0 8px 20px rgba(0, 0, 0, 0.35)' }}
+            className={styles.row}
+        >
+            <span className={styles.colHandle} role="cell">
+                <span className={styles.dragHandle} onPointerDown={startDrag}>
+                    <FontAwesomeIcon icon={faGripVertical} />
+                </span>
+            </span>
+            <span className={styles.colImage} role="cell">{row.image}</span>
+            <span className={styles.colName} role="cell">{row.name}</span>
+            <span className={styles.colColor} role="cell" style={row.colorStyle}></span>
+            <span className={styles.colRank} role="cell">{index + 1}</span>
+            <span className={styles.colLink} role="cell">
+                <Link className={styles.imageContainer} href={row.editHref}>
+                    <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
+                    Rediger
+                </Link>
+            </span>
+        </Reorder.Item>
+    )
+}
+
+type PropTypes = {
+    rows: FlairRow[],
+}
+
+export default function FlairTable({ rows }: PropTypes) {
+    const [order, setOrder] = useState(rows)
+    const router = useRouter()
+
+    useEffect(() => {
+        setOrder(rows)
+    }, [rows])
+
+    const commitOrder = async (flairId: number) => {
+        const originalIndex = rows.findIndex(row => row.id === flairId)
+        const newIndex = order.findIndex(row => row.id === flairId)
+        const steps = originalIndex - newIndex
+        if (originalIndex === -1 || steps === 0) return
+
+        const rankAction = steps > 0 ? increaseFlairRankAction : decreaseFlairRankAction
+        for (let step = 0; step < Math.abs(steps); step++) {
+            await configureAction(rankAction, { params: { flairId } })()
+        }
+        router.refresh()
+    }
+
+    return (
+        <div className={styles.flairList} role="table">
+            <div className={styles.headerRow} role="row">
+                <span className={styles.colHandle} role="columnheader"></span>
+                <span className={styles.colImage} role="columnheader">Bilde</span>
+                <span className={styles.colName} role="columnheader">Navn</span>
+                <span className={styles.colColor} role="columnheader">Farge</span>
+                <span className={styles.colRank} role="columnheader">Rank</span>
+                <span className={styles.colLink} role="columnheader">Link</span>
+            </div>
+            <Reorder.Group
+                as="div"
+                axis="y"
+                role="rowgroup"
+                values={order}
+                onReorder={setOrder}
+                className={styles.body}
+            >
+                {order.map((row, index) => (
+                    <FlairTableRow key={row.id} row={row} index={index} onDragEnd={commitOrder} />
+                ))}
+            </Reorder.Group>
+        </div>
+    )
+}
diff --git a/src/app/admin/flairs/[id]/page.tsx b/src/app/admin/flairs/[id]/page.tsx
index 901c78a93..299be51fc 100644
--- a/src/app/admin/flairs/[id]/page.tsx
+++ b/src/app/admin/flairs/[id]/page.tsx
@@ -4,7 +4,6 @@ import { destroyFlairAction, readFlairAction, updateFlairAction } from '@/servic
 import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import { configureAction } from '@/services/configureAction'
 import Flair from '@/components/Flair/Flair'
-import { ServerSession } from '@/auth/session/ServerSession'
 import ColorInput from '@/components/UI/ColorInput'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 
@@ -18,11 +17,10 @@ export default async function FlairUpdatePage({ params }: PropTypes) {
     const flair = unwrapActionReturn(
         await readFlairAction({ params: { flairId: Number((await params).id) } })
     )
-    const session = await ServerSession.fromNextAuth()
 
     return (
         <PageWrapper title={`Rediger flair: ${flair.name}`}>
-            <Flair session={session} flair={flair} width={200} asClient={false} />
+            <Flair flair={flair} width={200} />
             <Form
                 title="Oppdater flair"
                 submitText="Oppdater flair"
diff --git a/src/app/admin/flairs/page.module.scss b/src/app/admin/flairs/page.module.scss
index d03eea3b2..f781a1c8e 100644
--- a/src/app/admin/flairs/page.module.scss
+++ b/src/app/admin/flairs/page.module.scss
@@ -1,10 +1,107 @@
 @use '@/styles/ohma';
 
 .flairList {
-    @include ohma.table;
+    width: 100%;
+    margin: calc(2 * #{ohma.$gap}) 0;
+    border-radius: ohma.$rounding;
+    overflow: hidden;
+    box-shadow: ohma.$colors-boxShadow 0 1px 3px, ohma.$colors-boxShadow 0 1px 2px;
+    font-size: ohma.$fonts-m;
+
     a {
         svg {
             margin-right: 0.5rem;
         }
     }
-}
\ No newline at end of file
+}
+
+.headerRow {
+    display: flex;
+    align-items: center;
+    gap: ohma.$gap;
+    background-color: ohma.$colors-surface-raised;
+    color: ohma.$colors-ink-strong;
+    font-weight: ohma.$fonts-weight-m;
+    padding: calc(1.5 * #{ohma.$gap}) calc(2 * #{ohma.$gap});
+}
+
+.body {
+    display: flex;
+    flex-direction: column;
+}
+
+.row {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: ohma.$gap;
+    background-color: ohma.$colors-surface-raised;
+    padding: calc(1.5 * #{ohma.$gap}) calc(2 * #{ohma.$gap});
+    transition: background-color ohma.$transitionTime;
+
+    &:nth-child(even) {
+        background-color: color-mix(in srgb, ohma.$colors-surface-raised, white 3%);
+    }
+
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
+    }
+}
+
+.colHandle {
+    flex: 0 0 calc(4 * #{ohma.$gap});
+}
+
+.colImage {
+    flex: 0 0 100px;
+}
+
+.colName {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.colColor {
+    flex: 0 0 100px;
+    align-self: stretch;
+}
+
+.colRank {
+    flex: 0 0 calc(6 * #{ohma.$gap});
+}
+
+.colLink {
+    flex: 0 0 140px;
+}
+
+.dragHandle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: calc(3 * #{ohma.$gap});
+    height: calc(3 * #{ohma.$gap});
+    border-radius: ohma.$gap;
+    color: ohma.$colors-text-muted;
+    cursor: grab;
+    touch-action: none;
+    user-select: none;
+    transition: background-color ohma.$transitionTime, color ohma.$transitionTime;
+
+    &:hover {
+        background-color: ohma.$colors-surface-hover;
+        color: ohma.$colors-ink-strong;
+    }
+
+    &:active {
+        cursor: grabbing;
+    }
+}
+
+.changeImageBtn {
+    @include ohma.secondaryBtn;
+    display: block;
+    margin-top: 0.5em;
+    padding: 0.25em 0.5em;
+    font-size: ohma.$fonts-s;
+    white-space: nowrap;
+}
diff --git a/src/app/admin/flairs/page.tsx b/src/app/admin/flairs/page.tsx
index f182f3691..fc4dd0fcb 100644
--- a/src/app/admin/flairs/page.tsx
+++ b/src/app/admin/flairs/page.tsx
@@ -1,27 +1,48 @@
+import FlairTable from './FlairTable'
 import styles from './page.module.scss'
-import {
-    createFlairAction,
-    decreaseFlairRankAction,
-    increaseFlairRankAction,
-    readAllFlairsAction
-} from '@/services/flairs/actions'
+import { createFlairAction, readAllFlairsAction, updateFlairImageAction } from '@/services/flairs/actions'
 import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import { AddHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
 import Form from '@/components/Form/Form'
 import ColorInput from '@/components/UI/ColorInput'
 import TextInput from '@/components/UI/TextInput'
+import FileInput from '@/components/UI/FileInput'
+import LicenseChooser from '@/components/LicenseChooser/LicenseChooser'
 import Flair from '@/components/Flair/Flair'
+import ImageUploader from '@/components/Image/ImageUploader'
+import PopUp from '@/components/PopUp/PopUp'
 import { configureAction } from '@/services/configureAction'
-import { ServerSession } from '@/auth/session/ServerSession'
-import Link from 'next/link'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArrowDown, faArrowUp, faArrowUpRightFromSquare } from '@fortawesome/free-solid-svg-icons'
+import type { FlairRow } from './FlairTable'
 
 
 export default async function FlairUpdatePage() {
     const flairs = unwrapActionReturn(await readAllFlairsAction()).sort((a, b) => a.rank - b.rank)
-    const session = await ServerSession.fromNextAuth()
+
+    const rows: FlairRow[] = flairs.map(flair => ({
+        id: flair.id,
+        image: <>
+            <Flair flair={flair} width={100} />
+            <PopUp
+                popUpKey={`EditFlairImage${flair.id}`}
+                showButtonContent="Endre bilde"
+                showButtonClass={styles.changeImageBtn}
+            >
+                <ImageUploader
+                    title={`Endre bilde for ${flair.name}`}
+                    refreshOnSuccess
+                    closePopUpOnSuccess={`EditFlairImage${flair.id}`}
+                    uploadImageAction={configureAction(
+                        updateFlairImageAction,
+                        { params: { flairId: flair.id } }
+                    )}
+                />
+            </PopUp>
+        </>,
+        name: flair.name,
+        colorStyle: { backgroundColor: `rgb(${flair.colorR}, ${flair.colorG}, ${flair.colorB})` },
+        editHref: `/admin/flairs/${flair.id}`,
+    }))
 
     return (
         <PageWrapper title="Adminitrer Flairs" headerItem={
@@ -35,74 +56,18 @@ export default async function FlairUpdatePage() {
                 >
                     <TextInput label="Navn" name="name" />
                     <ColorInput label="Farge" name="color" />
+                    <FileInput label="Bilde" name="imageFile" color="primary" />
+                    <TextInput label="Alternativ tekst for bilde" name="imageAlt" />
+                    <TextInput label="Kreditert" name="imageCredit" />
+                    <LicenseChooser name="imageLicenseId" />
                 </Form>
             </AddHeaderItemPopUp>
         }>
             <p>
                 Flairen med lavest <strong>rank</strong> er den som vises først på brukerens profil, og
-                den som bestemmer fargen på brukerprofilen.
+                den som bestemmer fargen på brukerprofilen. Dra i håndtaket for å endre rekkefølgen.
             </p>
-            <table className={styles.flairList}>
-                <thead>
-                    <tr>
-                        <th>Bilde</th>
-                        <th>Navn</th>
-                        <th>Farge</th>
-                        <th>Rank</th>
-                        <th>Rank opp</th>
-                        <th>Rank ned</th>
-                        <th>Link</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {flairs.map((flair, i) => (
-                        <tr key={flair.id}>
-                            <td>
-                                <Flair asClient={false} session={session} flair={flair} width={100} />
-                            </td>
-                            <td>{flair.name}</td>
-                            <td style={{
-                                backgroundColor: `rgb(${flair.colorR}, ${flair.colorG}, ${flair.colorB})`
-                            }}></td>
-                            <td>{flair.rank}</td>
-                            <td>
-                                {i > 0 ? (
-                                    <Form
-                                        refreshOnSuccess
-                                        submitText={<>
-                                            Opp <FontAwesomeIcon icon={faArrowUp} />
-                                        </>}
-                                        action={configureAction(
-                                            increaseFlairRankAction,
-                                            { params: { flairId: flair.id } }
-                                        )}
-                                    />
-                                ) : null}
-                            </td>
-                            <td>
-                                {i < flairs.length - 1 ? (
-                                    <Form
-                                        refreshOnSuccess
-                                        submitText={<>
-                                            Ned <FontAwesomeIcon icon={faArrowDown} />
-                                        </>}
-                                        action={configureAction(
-                                            decreaseFlairRankAction,
-                                            { params: { flairId: flair.id } }
-                                        )}
-                                    />
-                                ) : null}
-                            </td>
-                            <td>
-                                <Link className={styles.imageContainer} href={`/admin/flairs/${flair.id}`}>
-                                    <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
-                                    Rediger
-                                </Link>
-                            </td>
-                        </tr>
-                    ))}
-                </tbody>
-            </table>
+            <FlairTable rows={rows} />
         </PageWrapper>
     )
 }
diff --git a/src/app/admin/groups/GroupSelector.module.scss b/src/app/admin/groups/GroupSelector.module.scss
index c5ce51e0d..150e883fc 100644
--- a/src/app/admin/groups/GroupSelector.module.scss
+++ b/src/app/admin/groups/GroupSelector.module.scss
@@ -5,9 +5,9 @@
     width: 28px;
     height: 28px;
     border: none;
-    background-color: ohma.$colors-gray-400;
+    background-color: ohma.$colors-surface-raised;
     border-radius: 50%;
-    color: ohma.$colors-gray-800;
+    color: ohma.$colors-text;
     display: grid;
     place-items: center;
     margin-bottom: .2em;
diff --git a/src/app/admin/groups/[id]/page.module.scss b/src/app/admin/groups/[id]/page.module.scss
index dccb1a480..dd6981ad0 100644
--- a/src/app/admin/groups/[id]/page.module.scss
+++ b/src/app/admin/groups/[id]/page.module.scss
@@ -14,7 +14,7 @@
         position: absolute;
         top: 0;
         left: 0;
-        background-color: ohma.$colors-red;
+        background-color: ohma.$colors-accent-red;
         width: 40px;
         height: 40px;
         transform: translate(-25%, -25%);
@@ -27,7 +27,7 @@
         position: absolute;
         top: 1em;
         right: 1em;
-        @include ohma.btn(ohma.$colors-primary);
+        @include ohma.btn(ohma.$colors-accent-blue);
         width: 200px;
     }
 
@@ -37,7 +37,7 @@
     }
 
     .groupInfo {
-        border-bottom: 3px solid ohma.$colors-gray-600;
+        border-bottom: 3px solid ohma.$colors-surface-subtle;
         margin-bottom: ohma.$gap;
     }
 }
\ No newline at end of file
diff --git a/src/app/admin/groups/[id]/page.tsx b/src/app/admin/groups/[id]/page.tsx
index 73a2aec21..983651829 100644
--- a/src/app/admin/groups/[id]/page.tsx
+++ b/src/app/admin/groups/[id]/page.tsx
@@ -71,11 +71,23 @@ export default async function GroupAdmin({ params }: PropTypes) {
                     ) : (
                         (
                             group.groupType === 'CLASS' &&
-                            <Link href="/admin/classes" className={styles.link}>Gå til Kalsseadministrasjon</Link>
+                            <Link
+                                href="/admin/classes"
+                                aria-label={'Go to class administration'}
+                                className={styles.link}
+                            >
+                                Gå til Klasseadministrasjon
+                            </Link>
                         )
                         || (
                             group.groupType === 'OMEGA_MEMBERSHIP_GROUP' &&
-                            <Link href="/admin/admission" className={styles.link}>Gå til opptakssiden</Link>
+                            <Link
+                                href="/admin/admission"
+                                aria-label={'Go to admission page'}
+                                className={styles.link}
+                            >
+                                Gå til opptakssiden
+                            </Link>
                         )
                     )
                 }
diff --git a/src/app/admin/groups/page.module.scss b/src/app/admin/groups/page.module.scss
index 70b04db22..5cf149627 100644
--- a/src/app/admin/groups/page.module.scss
+++ b/src/app/admin/groups/page.module.scss
@@ -22,7 +22,7 @@
 
             thead {
                 font-weight: ohma.$fonts-weight-l;
-                border-bottom: 2px solid ohma.$colors-gray-800;
+                border-bottom: 2px solid ohma.$colors-surface-subtle;
                 td {
                     height: 30px;
                 }
diff --git a/src/app/admin/layout.module.scss b/src/app/admin/layout.module.scss
index 9f5cfbbc4..e22b39692 100644
--- a/src/app/admin/layout.module.scss
+++ b/src/app/admin/layout.module.scss
@@ -8,20 +8,30 @@
     padding: 0;
 
     .content {
+        background-color: ohma.$colors-surface-base;
         flex-grow: 1;
         min-width: 0;
+        margin-left: ohma.$gap;
+        padding: calc(#{ohma.$gap} * 1);
+        border-radius: ohma.$rounding;
+        overflow-y: auto;
+        height: calc(100dvh - #{ohma.$nav-height} - 26px);
     }
     > .slideBar {
+        background-color: ohma.$colors-surface-base;
+        border-radius: ohma.$rounding;
         align-self: flex-start;
         position: sticky;
-        top: 60px;
     }
     @include ohma.screenMobile() {
         height: calc(100dvh - 60px);
 
         .content {
-            margin-top: 74px;
+            margin: 0;
             height: calc(100dvh - 128px);
         }
+        > .slideBar {
+            position: static;
+        }
     }
 }
diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx
index 8c5e43c55..c1e68b354 100644
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,6 +1,7 @@
 'use client'
 import styles from './layout.module.scss'
 import SlideSidebar from './SlideSidebar'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 import React from 'react'
 import { usePathname } from 'next/navigation'
 
@@ -15,6 +16,7 @@ export default function AdminLayout({ children }: PropTypes) {
     const currentPath = pathname.split('/').length > 2 ? pathname.split('/')[2] : 'admin'
     return (
         <div className={styles.wrapper}>
+            <PageTitleSetter title={'Admin'} />
             <div className={styles.slideBar}>
                 <SlideSidebar currentPath={currentPath} />
             </div>
diff --git a/src/app/admin/lockers/page.tsx b/src/app/admin/lockers/page.tsx
index dc45ce416..03022a4ae 100644
--- a/src/app/admin/lockers/page.tsx
+++ b/src/app/admin/lockers/page.tsx
@@ -5,8 +5,8 @@ export default function Locker() {
     return (
         <div className={styles.wrapper}>
             <h3>Skapreservasjoner</h3>
-            <Link href={'/admin/lockers/location'}>Oppret ny skaplokasjon</Link>
-            <Link href={'/admin/lockers/locker'}>Opprett nytt skap</Link>
+            <Link aria-label={'Create new locker location'} href={'/admin/lockers/location'}>Opprett ny skaplokasjon</Link>
+            <Link aria-label={'Create new locker'} href={'/admin/lockers/locker'}>Opprett nytt skap</Link>
         </div>
     )
 }
diff --git a/src/app/admin/mail/[filter]/[id]/mailList.module.scss b/src/app/admin/mail/[filter]/[id]/mailList.module.scss
index 61a649f8e..23d1e141d 100644
--- a/src/app/admin/mail/[filter]/[id]/mailList.module.scss
+++ b/src/app/admin/mail/[filter]/[id]/mailList.module.scss
@@ -7,7 +7,7 @@
         list-style: none;
 
         > li:nth-child(even) {
-            background-color: ohma.$colors-gray-200;
+            background-color: ohma.$colors-surface-raised;
         }
     }
 }
\ No newline at end of file
diff --git a/src/app/admin/mail/[filter]/[id]/mailListItem.module.scss b/src/app/admin/mail/[filter]/[id]/mailListItem.module.scss
index d373e596b..b6c3414c8 100644
--- a/src/app/admin/mail/[filter]/[id]/mailListItem.module.scss
+++ b/src/app/admin/mail/[filter]/[id]/mailListItem.module.scss
@@ -2,7 +2,7 @@
 
 .mailListItem {
     > span {
-        color: ohma.$colors-gray-600;
+        color: ohma.$colors-text-muted;
     }
 }
 
diff --git a/src/app/admin/mail/[filter]/[id]/page.module.scss b/src/app/admin/mail/[filter]/[id]/page.module.scss
index a5d0a9891..55c75ec36 100644
--- a/src/app/admin/mail/[filter]/[id]/page.module.scss
+++ b/src/app/admin/mail/[filter]/[id]/page.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .editContainer {
-    background-color: ohma.$colors-secondary;
+    background-color: ohma.$colors-surface-base;
     @include ohma.card();
     display: flex;
     flex-flow: row wrap;
diff --git a/src/app/admin/mail/page.module.scss b/src/app/admin/mail/page.module.scss
index 2cfdfd030..86f523300 100644
--- a/src/app/admin/mail/page.module.scss
+++ b/src/app/admin/mail/page.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .adminContainer {
-    background-color: ohma.$colors-secondary;
+    background-color: ohma.$colors-surface-base;
     @include ohma.card();
     display: flex;
     flex-flow: row wrap;
diff --git a/src/app/admin/omegaid/page.tsx b/src/app/admin/omegaid/page.tsx
index 12cd84676..b49a2eb59 100644
--- a/src/app/admin/omegaid/page.tsx
+++ b/src/app/admin/omegaid/page.tsx
@@ -1,11 +1,12 @@
 'use server'
 
 import OmegaIdContainer from './container'
-import { readOmegaJWTPublicKey } from '@/services/omegaid/actions'
+import { readOmegaJWTPublicKeyAction } from '@/services/omegaid/actions'
+import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 
 
 export default async function OmegaId() {
-    const publicKey = await readOmegaJWTPublicKey()
+    const publicKey = unwrapActionReturn(await readOmegaJWTPublicKeyAction())
 
     return <OmegaIdContainer publicKey={publicKey} />
 }
diff --git a/src/app/admin/page.module.scss b/src/app/admin/page.module.scss
index 8fd2c7d03..451dd62c3 100644
--- a/src/app/admin/page.module.scss
+++ b/src/app/admin/page.module.scss
@@ -16,7 +16,7 @@ $iconSize: 10em;
         margin: 1em;
     }
     p {
-        color: ohma.$colors-gray-700;
+        color: ohma.$colors-text-muted;
         font-size: 1.5em;
         text-align: center;
     }
diff --git a/src/app/admin/product/page.tsx b/src/app/admin/product/page.tsx
index 9967fc91b..b72af908b 100644
--- a/src/app/admin/product/page.tsx
+++ b/src/app/admin/product/page.tsx
@@ -33,7 +33,12 @@ export default async function ProductPage() {
             <tbody>
                 {sortObjectsByName(products).map(product => <tr key={uuid()}>
                     <td>
-                        <Link style={{ display: 'contents' }} href={`./product/${product.id}`} passHref>
+                        <Link
+                            style={{ display: 'contents' }}
+                            aria-label={`Go to ${product.name} product page`}
+                            href={`./product/${product.id}`}
+                            passHref
+                        >
                             {product.name}
                         </Link>
                     </td>
diff --git a/src/app/admin/schools/SchoolAdminList.tsx b/src/app/admin/schools/SchoolAdminList.tsx
index 108ac927b..433b6f7b6 100644
--- a/src/app/admin/schools/SchoolAdminList.tsx
+++ b/src/app/admin/schools/SchoolAdminList.tsx
@@ -18,7 +18,9 @@ export async function SchoolAdminList({ schools }: PropTypes) {
             </thead>
             <tbody>
                 {schools.map(school => (
-                    <Link key={school.shortName} href={`/admin/schools/${encodeURIComponent(school.shortName)}`}>
+                    <Link key={school.shortName}
+                        aria-label={`Go to ${school.name} school page`}
+                        href={`/admin/schools/${encodeURIComponent(school.shortName)}`}>
                         <tr key={school.id}>
                             <td>{school.id}</td>
                             <td>{school.name}</td>
diff --git a/src/app/admin/schools/[shortName]/UpdateSchool.tsx b/src/app/admin/schools/[shortName]/UpdateSchool.tsx
index ee1709444..f253ceabc 100644
--- a/src/app/admin/schools/[shortName]/UpdateSchool.tsx
+++ b/src/app/admin/schools/[shortName]/UpdateSchool.tsx
@@ -2,6 +2,7 @@
 import Form from '@/components/Form/Form'
 import { updateSchoolAction } from '@/education/schools/actions'
 import TextInput from '@/components/UI/TextInput'
+import { configureAction } from '@/services/configureAction'
 import type { SchoolFiltered } from '@/services/education/schools/types'
 
 type PropTypes = {
@@ -9,7 +10,10 @@ type PropTypes = {
 }
 
 export default function UpdateSchool({ school }: PropTypes) {
-    const updateAction = updateSchoolAction.bind(null, school.id)
+    const updateAction = configureAction(
+        updateSchoolAction,
+        { params: { id: school.id } }
+    )
 
     return (
         <Form
diff --git a/src/app/admin/schools/[shortName]/page.tsx b/src/app/admin/schools/[shortName]/page.tsx
index b5a949486..361b1cb46 100644
--- a/src/app/admin/schools/[shortName]/page.tsx
+++ b/src/app/admin/schools/[shortName]/page.tsx
@@ -5,6 +5,7 @@ import Form from '@/components/Form/Form'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import School from '@/components/School/School'
 import { ServerSession } from '@/auth/session/ServerSession'
+import { configureAction } from '@/services/configureAction'
 
 type PropTypes = {
     params: Promise<{
@@ -28,7 +29,7 @@ export default async function SchoolAdmin({ params }: PropTypes) {
                 <School school={school} session={session.toJsObject()} />
             </div>
             <Form
-                action={destroySchoolAction.bind(null, school.id)}
+                action={configureAction(destroySchoolAction, { params: { id: school.id } })}
                 navigateOnSuccess="/admin/schools"
                 refreshOnSuccess
                 submitText="Slett"
diff --git a/src/app/admin/schools/page.tsx b/src/app/admin/schools/page.tsx
index 93a5f25fa..f61775ca5 100644
--- a/src/app/admin/schools/page.tsx
+++ b/src/app/admin/schools/page.tsx
@@ -13,7 +13,7 @@ export default async function SchoolsAdmin() {
     }
     const standardSchools = standardSchoolsRes.data
 
-    const schoolsRes = await readSchoolsAction({ onlyNonStandard: true })
+    const schoolsRes = await readSchoolsAction({ params: { onlyNonStandard: true } })
     if (!schoolsRes.success) throw new Error(schoolsRes.error?.length ? schoolsRes.error[0].message : 'Ukjent feil')
     const schools = schoolsRes.data
 
diff --git a/src/app/admin/shop/[shop]/page.module.scss b/src/app/admin/shop/[shop]/page.module.scss
index cfdd16ac7..077b83751 100644
--- a/src/app/admin/shop/[shop]/page.module.scss
+++ b/src/app/admin/shop/[shop]/page.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .button {
-    @include ohma.btn(ohma.$colors-primary);
+    @include ohma.btn(ohma.$colors-accent-blue);
 }
 
 .table {
@@ -9,7 +9,7 @@
 }
 
 .deactivatedProduct {
-    color: ohma.$colors-gray-600;
+    color: ohma.$colors-text-muted;
     font-style: italic;
 }
 
diff --git a/src/app/admin/stateOfOmega/page.module.scss b/src/app/admin/stateOfOmega/page.module.scss
index 7eaf6091c..d89ce112c 100644
--- a/src/app/admin/stateOfOmega/page.module.scss
+++ b/src/app/admin/stateOfOmega/page.module.scss
@@ -1,5 +1,42 @@
 @use '@/styles/ohma';
 
 .wrapper {
-    
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: calc(3 * #{ohma.$gap});
+    padding: calc(4 * #{ohma.$gap});
+    text-align: center;
+}
+
+.plaque {
+    @include ohma.card;
+    background-color: ohma.$colors-surface-raised;
+    border: 3px solid ohma.$colors-accent-blue;
+    padding: calc(6 * #{ohma.$gap}) calc(8 * #{ohma.$gap});
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: ohma.$gap;
+}
+
+.label {
+    margin: 0;
+    font-family: ohma.$fonts-secondary;
+    font-size: ohma.$fonts-l;
+    letter-spacing: 0.3em;
+    text-transform: uppercase;
+    color: ohma.$colors-text-muted;
+}
+
+.order {
+    margin: 0;
+    font-family: ohma.$fonts-secondary;
+    font-size: clamp(6rem, 20vw, 12rem);
+    font-weight: 700;
+    line-height: 1;
+    color: ohma.$colors-accent-blue;
+    text-shadow: 0 0 0.3em color-mix(in srgb, ohma.$colors-accent-blue, transparent 40%);
 }
\ No newline at end of file
diff --git a/src/app/admin/stateOfOmega/page.tsx b/src/app/admin/stateOfOmega/page.tsx
index d5212977f..dc1dd7a43 100644
--- a/src/app/admin/stateOfOmega/page.tsx
+++ b/src/app/admin/stateOfOmega/page.tsx
@@ -14,7 +14,10 @@ export default async function stateOfOmega() {
 
     return (
         <div className={styles.wrapper}>
-            <h1>Omega er i orden: { currentOrder.order }</h1>
+            <div className={styles.plaque}>
+                <p className={styles.label}>Omega er i orden</p>
+                <h1 className={styles.order}>{ currentOrder.order }</h1>
+            </div>
             <CreateOrder />
         </div>
     )
diff --git a/src/app/applications/CreateUpdateApplicationPeriodForm.module.scss b/src/app/applications/CreateUpdateApplicationPeriodForm.module.scss
index 62768b44e..873229e73 100644
--- a/src/app/applications/CreateUpdateApplicationPeriodForm.module.scss
+++ b/src/app/applications/CreateUpdateApplicationPeriodForm.module.scss
@@ -3,6 +3,6 @@
 .CreateUpdateApplicationPeriodForm {
     min-width: 50vw;
     .warning {
-        color: ohma.$colors-red;
+        color: ohma.$colors-accent-red;
     }
 }
\ No newline at end of file
diff --git a/src/app/applications/[periodName]/Reprioritize.module.scss b/src/app/applications/[periodName]/Reprioritize.module.scss
index fa6a7b70b..25ba15502 100644
--- a/src/app/applications/[periodName]/Reprioritize.module.scss
+++ b/src/app/applications/[periodName]/Reprioritize.module.scss
@@ -5,7 +5,7 @@
 }
 
 .error {
-    color: ohma.$colors-red;
+    color: ohma.$colors-accent-red;
     position: absolute;
     bottom: 0;
     left: 0;
diff --git a/src/app/applications/[periodName]/countdown/CommitteeLogoRoll.module.scss b/src/app/applications/[periodName]/countdown/CommitteeLogoRoll.module.scss
index 5a95805d7..d71c3cf2e 100644
--- a/src/app/applications/[periodName]/countdown/CommitteeLogoRoll.module.scss
+++ b/src/app/applications/[periodName]/countdown/CommitteeLogoRoll.module.scss
@@ -14,7 +14,7 @@
         animation: scale-in 10s forwards cubic-bezier(0.90, 0.05, 0.90, 0.05), fade 5s 1s forwards;
     }
     span {
-        color: ohma.$colors-gray-200;
+        color: ohma.$colors-ink-strong;
         font-size: 15rem;
     }
 
@@ -25,7 +25,7 @@
         &:nth-child(2) {
             font-size: 16rem;
         }
-        color: ohma.$colors-gray-200;
+        color: ohma.$colors-ink-strong;
     }
 }
 
diff --git a/src/app/applications/[periodName]/countdown/Countdown.tsx b/src/app/applications/[periodName]/countdown/Countdown.tsx
index 5a3ad07e9..64b6c361d 100644
--- a/src/app/applications/[periodName]/countdown/Countdown.tsx
+++ b/src/app/applications/[periodName]/countdown/Countdown.tsx
@@ -6,15 +6,13 @@ import Speedlines from './Speedlines'
 import FinalCountdown from './FinalCountdown'
 import useInterval from '@/hooks/useInterval'
 import { useState } from 'react'
-import type { Image } from '@/prisma-generated-pn-types'
 import type { ExpandedApplicationPeriod } from '@/services/applications/periods/types'
 
 type PropTypes = {
     period: ExpandedApplicationPeriod
-    defaultCommitteeLogo: Image
 }
 
-export default function Countdown({ period, defaultCommitteeLogo }: PropTypes) {
+export default function Countdown({ period }: PropTypes) {
     const [showCommitteeRoll, setShowComitteeRoll] = useState(true)
     const [finalCountdown, setFinalCountdown] = useState(false)
 
@@ -39,7 +37,7 @@ export default function Countdown({ period, defaultCommitteeLogo }: PropTypes) {
                 {showCommitteeRoll && (
                     <CommitteeLogoRoll periodName={period.name} committees={period.committeesParticipating.map(part => ({
                         shortName: part.committee.shortName,
-                        logo: part.committee.logoImage.image || defaultCommitteeLogo
+                        logo: part.committee.logoImage
                     }))} />
                 )}
                 {finalCountdown && (
diff --git a/src/app/applications/[periodName]/countdown/FinalCountdown.module.scss b/src/app/applications/[periodName]/countdown/FinalCountdown.module.scss
index aef6f59b5..5ac6b7e4c 100644
--- a/src/app/applications/[periodName]/countdown/FinalCountdown.module.scss
+++ b/src/app/applications/[periodName]/countdown/FinalCountdown.module.scss
@@ -12,10 +12,10 @@
     scale: 0;
     h1 {
         font-size: 10rem;
-        color: ohma.$colors-red;
+        color: ohma.$colors-accent-red;
         &.applicants {
             font-size: 8rem;
-            color: ohma.$colors-gray-200;
+            color: ohma.$colors-ink-strong;
             text-align: center;
         }
     }
diff --git a/src/app/applications/[periodName]/countdown/Speedlines.module.scss b/src/app/applications/[periodName]/countdown/Speedlines.module.scss
index 4724b966a..dbdac6494 100644
--- a/src/app/applications/[periodName]/countdown/Speedlines.module.scss
+++ b/src/app/applications/[periodName]/countdown/Speedlines.module.scss
@@ -15,7 +15,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-    stroke: ohma.$colors-secondary;
+    stroke: ohma.$colors-surface-base;
     stroke-width: 0.25;
     stroke-dasharray: 20 80;
     stroke-dashoffset: 0;
diff --git a/src/app/applications/[periodName]/countdown/TimeLeft.module.scss b/src/app/applications/[periodName]/countdown/TimeLeft.module.scss
index 0744ac3b2..6710c7398 100644
--- a/src/app/applications/[periodName]/countdown/TimeLeft.module.scss
+++ b/src/app/applications/[periodName]/countdown/TimeLeft.module.scss
@@ -8,7 +8,7 @@
     font-family: 'Arial', sans-serif;
     font-size: 16rem;
     font-weight: 800;
-    color: ohma.$colors-red;
+    color: ohma.$colors-accent-red;
 }
 
 .Countdown div {
@@ -20,6 +20,6 @@
 
 .Countdown span {
     font-size: 13rem;
-    color: ohma.$colors-gray-200;
+    color: ohma.$colors-ink-strong;
     transform: translateY(-5%);
 }
\ No newline at end of file
diff --git a/src/app/applications/[periodName]/countdown/page.tsx b/src/app/applications/[periodName]/countdown/page.tsx
index 2735584ba..257d8add7 100644
--- a/src/app/applications/[periodName]/countdown/page.tsx
+++ b/src/app/applications/[periodName]/countdown/page.tsx
@@ -2,7 +2,6 @@ import styles from './page.module.scss'
 import Countdown from './Countdown'
 import { readApplicationPeriodAction } from '@/services/applications/periods/actions'
 import { unwrapActionReturn } from '@/app/redirectToErrorPage'
-import { readSpecialImageAction } from '@/services/images/actions'
 import type { PropTypes } from '@/app/applications/[periodName]/page'
 
 export default async function ApplicationPeriodCountdown({ params }: PropTypes) {
@@ -11,13 +10,10 @@ export default async function ApplicationPeriodCountdown({ params }: PropTypes)
             name: decodeURIComponent((await params).periodName)
         }
     }))
-    const defaultCommitteeLogo = unwrapActionReturn(
-        await readSpecialImageAction({ params: { special: 'DAFAULT_COMMITTEE_LOGO' } })
-    )
 
     return (
         <div className={styles.wrapper}>
-            <Countdown period={period} defaultCommitteeLogo={defaultCommitteeLogo} />
+            <Countdown period={period} />
         </div>
     )
 }
diff --git a/src/app/applications/[periodName]/page.module.scss b/src/app/applications/[periodName]/page.module.scss
index 137257df5..4f76491d0 100644
--- a/src/app/applications/[periodName]/page.module.scss
+++ b/src/app/applications/[periodName]/page.module.scss
@@ -2,6 +2,11 @@
 
 .countDown {
     font-size: ohma.$fonts-m;
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
 }
 
 .textarea {
@@ -9,34 +14,82 @@
     height: 20vh;
 }
 
+.periodContent {
+    border-radius: ohma.$rounding;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: ohma.$gap;
+
+    @include ohma.screenMobile {
+        padding: ohma.$gap;
+    }
+}
+
+.periodDates {
+    display: flex;
+    flex-wrap: wrap;
+    gap: ohma.$gap;
+}
+
+.periodDateItem {
+    background-color: ohma.$colors-surface-raised;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    padding: calc(#{ohma.$gap} * 1.5);
+    display: flex;
+    align-items: center;
+    gap: 0.5em;
+    color: ohma.$colors-text;
+
+    > b {
+        color: ohma.$colors-accent-blue;
+        font-weight: ohma.$fonts-weight-m;
+        white-space: nowrap;
+    }
+}
+
+.countDownItem {
+    flex-wrap: wrap;
+}
+
 .committees {
-    list-style: none;
-    > li {
-        background-color: ohma.$colors-gray-200;
-        padding: 0.5em;
-        margin: 1em 0;
+    margin: 0;
+    padding-top: ohma.$gap;
+    display: grid;
+    gap: ohma.$gap;
+
+    > div {
+        background-color: ohma.$colors-surface-raised;
+        padding: ohma.$gap;
         min-height: 250px;
         display: flex;
+        border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
         overflow: hidden;
+
         > * {
-            flex: 1 1 100%;
+            width: 100%;
+            height: 100%;
         }
+
         .committeeLogo {
             padding: 0.5em;
         }
+
         .navigation {
             display: flex;
             gap: 0.5em;
+            align-items: center;
+            flex-wrap: wrap;
+
             .applyButton {
-                @include ohma.btn(ohma.$colors-secondary);
+                @include ohma.btn(ohma.$colors-accent-blue);
                 margin: 0;
             }
             .committeeLink {
-                @include ohma.borderBtn(ohma.$colors-secondary);
+                @include ohma.secondaryBtn;
                 margin: 0;
             }
             .videoButton {
-                @include ohma.borderBtn(ohma.$colors-secondary);
+                @include ohma.secondaryBtn;
                 margin: 0;
                 svg {
                     width: 1em;
@@ -45,11 +98,12 @@
             }
         }
     }
+
     .priorityContainer {
         > p, button {
             border-radius: 50%;
-            background-color: ohma.$colors-primary;
-            color: ohma.$colors-black;
+            background-color: ohma.$colors-accent-blue;
+            color: ohma.$colors-text-inv;
             width: 3em;
             height: 3em;
             display: grid;
@@ -59,7 +113,7 @@
         }
         > button:hover {
             cursor: pointer;
-            background-color: color-mix(in srgb, ohma.$colors-primary, black 10%);
+            background-color: color-mix(in srgb, ohma.$colors-accent-blue, black 10%);
         }
         display: flex;
         flex-flow: row wrap;
diff --git a/src/app/applications/[periodName]/page.tsx b/src/app/applications/[periodName]/page.tsx
index 257b2876d..beb77f6e8 100644
--- a/src/app/applications/[periodName]/page.tsx
+++ b/src/app/applications/[periodName]/page.tsx
@@ -23,7 +23,6 @@ import {
     removeAllApplicationTextsAction,
     readApplicationPeriodAction
 } from '@/services/applications/periods/actions'
-import { readSpecialImageAction } from '@/services/images/actions'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { configureAction } from '@/services/configureAction'
 import { committeeAuth } from '@/services/groups/committees/auth'
@@ -43,9 +42,6 @@ export default async function ApplicationPeriod({ params }: PropTypes) {
     const period = unwrapActionReturn(
         await readApplicationPeriodAction({ params: { name: (await params).periodName } })
     )
-    const defaultCommitteeLogo = unwrapActionReturn(
-        await readSpecialImageAction({ params: { special: 'DAFAULT_COMMITTEE_LOGO' } })
-    )
     const applications = userId ? unwrapActionReturn(
         await readApplicationsForUserAction({ params: { userId, periodId: period.id } })
     ) : []
@@ -88,7 +84,7 @@ export default async function ApplicationPeriod({ params }: PropTypes) {
         }, null as number | null) ?? 0
 
     return (
-        <PageWrapper title={`Søknadsperiode: ${period.name}`} headerItem={
+        <PageWrapper title={'Søknadsperiode'} headerItem={
             <SettingsHeaderItemPopUp popUpKey={`period-${period.name}-settings`} scale={35}>
                 <CreateUpdateApplicationPeriodForm
                     committees={committees}
@@ -137,148 +133,170 @@ export default async function ApplicationPeriod({ params }: PropTypes) {
 
             </SettingsHeaderItemPopUp>
         }>
-            <p>
-                <b>Søknadsstart:</b> <DateComponent date={period.startDate} includeTime />
-                <br />
-                <b>Søknadsfrist:</b> <DateComponent date={period.endDate} includeTime />
-                <br />
-                <b>Frist for prioritering:</b> <DateComponent date={period.endPriorityDate} includeTime />
-            </p>
-            {
-                period.endDate.getTime() > (new Date()).getTime() && (
-                    <div className={styles.countDown}>
-                        <Link href={`/applications/${period.name}/countdown`}>
-                            <CountDown referenceDate={period.endDate} />
-                        </Link>
+            <div className={styles.periodContent}>
+                <div className={styles.top} />
+
+                <div className={styles.periodDates}>
+                    <div className={styles.periodDateItem}>
+                        <b>Søknadsstart:</b>
+                        <DateComponent date={period.startDate} includeTime />
                     </div>
-                )
-            }
-            <ul className={styles.committees}>
-                {
-                    periodWithApplications.committeesParticipating
-                        .map(part => (
-                            <li key={part.committee.id}>
-                                <BackdropImage
-                                    image={part.committee.logoImage?.image ?? defaultCommitteeLogo}
-                                    imageSize={230}
-                                >
-                                    <h1>{part.committee.name}</h1>
-                                    <CmsParagraph
-                                        canEdit={
-                                            committeeAuth.updateParagraphContent.dynamicFields(
-                                                { groupId: part.committee.groupId }
-                                            ).auth(
-                                                session
-                                            ).toJsObject()
-                                        }
-                                        cmsParagraph={part.committee.paragraph}
-                                        updateCmsParagraphAction={
-                                            configureAction(
-                                                updateCommitteeParagraphAction,
-                                                { implementationParams: { shortName: part.committee.shortName } }
-                                            )
-                                        }
-                                    />
-                                    <div className={styles.navigation}>
-                                        {
-                                            userId ? (
-                                                <PopUp
-                                                    popUpKey={`committee-${part.committee.shortName}-apply`}
-                                                    showButtonContent={
-                                                        <span>{part.priority === null ? 'Søk nå!' : 'Endre søknad'}</span>
-                                                    }
-                                                    showButtonClass={styles.applyButton}
-                                                >
-                                                    <h1>Søknad til {part.committee.name}</h1>
-                                                    <Form
-                                                        closePopUpOnSuccess={`committee-${part.committee.shortName}-apply`}
-                                                        refreshOnSuccess
-                                                        action={part.priority === null ?
-                                                            createApplicationAction.bind(
-                                                                null, {
-                                                                    params: { userId, commiteeParticipationId: part.id }
-                                                                }
-                                                            ) : updateApplicationAction.bind(
-                                                                null, {
-                                                                    params: { userId, commiteeParticipationId: part.id }
-                                                                }
-                                                            )
+                    <div className={styles.periodDateItem}>
+                        <b>Søknadsfrist:</b>
+                        <DateComponent date={period.endDate} includeTime />
+                    </div>
+                    <div className={styles.periodDateItem}>
+                        <b>Frist for prioritering:</b>
+                        <DateComponent date={period.endPriorityDate} includeTime />
+                    </div>
+
+                    {
+                        period.endDate.getTime() > (new Date()).getTime() && (
+                            <div className={`${styles.periodDateItem} ${styles.countDownItem}`}>
+                                <b>Nedtelling:</b>
+                                <div className={styles.countDown}>
+                                    <Link href={`/applications/${period.name}/countdown`}>
+                                        <CountDown referenceDate={period.endDate} />
+                                    </Link>
+                                </div>
+                            </div>
+                        )
+                    }
+                </div>
+
+                <div className={styles.committees}>
+                    {
+                        periodWithApplications.committeesParticipating
+                            .map(part => (
+                                <div key={part.committee.id}>
+                                    <BackdropImage
+                                        image={part.committee.logoImage}
+                                        imageSize={230}
+                                    >
+                                        <h1>{part.committee.name}</h1>
+                                        <CmsParagraph
+                                            canEdit={
+                                                committeeAuth.updateParagraphContent.dynamicFields(
+                                                    { groupId: part.committee.groupId }
+                                                ).auth(
+                                                    session
+                                                ).toJsObject()
+                                            }
+                                            cmsParagraph={part.committee.paragraph}
+                                            updateCmsParagraphAction={
+                                                configureAction(
+                                                    updateCommitteeParagraphAction,
+                                                    { implementationParams: { shortName: part.committee.shortName } }
+                                                )
+                                            }
+                                        />
+                                        <div className={styles.navigation}>
+                                            {
+                                                userId ? (
+                                                    <PopUp
+                                                        popUpKey={`committee-${part.committee.shortName}-apply`}
+                                                        showButtonContent={
+                                                            <span>
+                                                                {part.priority === null ? 'Søk nå!' : 'Endre søknad'}
+                                                            </span>
                                                         }
-                                                        submitText={part.priority === null ? 'Send søknad' : 'Endre søknad'}
+                                                        showButtonClass={styles.applyButton}
                                                     >
-                                                        <Textarea
-                                                            name="text"
-                                                            label="Søknadstekst"
-                                                            defaultValue={part.text}
-                                                            className={styles.textarea}
-                                                        />
-                                                    </Form>
-                                                    {
-                                                        part.priority !== null && (
-                                                            <Form
-                                                                refreshOnSuccess
-                                                                closePopUpOnSuccess={
-                                                                    `committee-${part.committee.shortName}-apply`
-                                                                }
-                                                                action={destroyApplicationAction.bind(null, {
-                                                                    params: {
-                                                                        userId,
-                                                                        commiteeParticipationId: part.id
+                                                        <h1>Søknad til {part.committee.name}</h1>
+                                                        <Form
+                                                            closePopUpOnSuccess={
+                                                                `committee-${part.committee.shortName}-apply`
+                                                            }
+                                                            refreshOnSuccess
+                                                            action={part.priority === null ?
+                                                                createApplicationAction.bind(
+                                                                    null, {
+                                                                        params: { userId, commiteeParticipationId: part.id }
                                                                     }
-                                                                })}
-                                                                confirmation={{
-                                                                    confirm: true,
-                                                                    text: 'Er du sikker på at du vil slette søknaden?',
-                                                                }}
-                                                                submitColor="red"
-                                                                submitText="Slett søknad"
+                                                                ) : updateApplicationAction.bind(
+                                                                    null, {
+                                                                        params: { userId, commiteeParticipationId: part.id }
+                                                                    }
+                                                                )
+                                                            }
+                                                            submitText={
+                                                                part.priority === null ? 'Send søknad' : 'Endre søknad'
+                                                            }
+                                                        >
+                                                            <Textarea
+                                                                name="text"
+                                                                label="Søknadstekst"
+                                                                defaultValue={part.text}
+                                                                className={styles.textarea}
                                                             />
-                                                        )
-                                                    }
-                                                </PopUp>
-                                            ) : <Link href="/login" className={styles.applyButton}>
+                                                        </Form>
+                                                        {
+                                                            part.priority !== null && (
+                                                                <Form
+                                                                    refreshOnSuccess
+                                                                    closePopUpOnSuccess={
+                                                                        `committee-${part.committee.shortName}-apply`
+                                                                    }
+                                                                    action={destroyApplicationAction.bind(null, {
+                                                                        params: {
+                                                                            userId,
+                                                                            commiteeParticipationId: part.id
+                                                                        }
+                                                                    })}
+                                                                    confirmation={{
+                                                                        confirm: true,
+                                                                        text: 'Er du sikker på at du vil slette søknaden?',
+                                                                    }}
+                                                                    submitColor="red"
+                                                                    submitText="Slett søknad"
+                                                                />
+                                                            )
+                                                        }
+                                                    </PopUp>
+                                                ) : <Link href="/login" className={styles.applyButton}>
                                                 Logg inn for å søke
+                                                </Link>
+                                            }
+                                            <Link
+                                                href={`/committees/${part.committee.shortName}`}
+                                                className={styles.committeeLink}
+                                            >
+                                            Les mer
                                             </Link>
+                                            <PopUp
+                                                popUpKey={`committee-${part.committee.shortName}-video`}
+                                                showButtonContent={
+                                                    <FontAwesomeIcon icon={faVideo} />
+                                                }
+                                                showButtonClass={styles.videoButton}
+                                            >
+                                                {/* TODO: Video saved on committee */}
+                                                <h1>Komitévideo for {part.committee.name}</h1>
+                                            </PopUp>
+                                        </div>
+                                        {
+                                            part.priority !== null && userId && (
+                                                <>
+                                                    <div className={styles.priorityContainer}>
+                                                        <p className={styles.priority}>
+                                                            {part.priority}
+                                                        </p>
+                                                        <Reprioritize
+                                                            userId={userId}
+                                                            commiteeParticipationId={part.id}
+                                                            showUp={part.priority > minPriority}
+                                                            showDown={part.priority < maxPriority}
+                                                        />
+                                                    </div>
+                                                </>
+                                            )
                                         }
-                                        <Link
-                                            href={`/committees/${part.committee.shortName}`}
-                                            className={styles.committeeLink}
-                                        >
-                                            Les mer
-                                        </Link>
-                                        <PopUp
-                                            popUpKey={`committee-${part.committee.shortName}-video`}
-                                            showButtonContent={
-                                                <FontAwesomeIcon icon={faVideo} />
-                                            }
-                                            showButtonClass={styles.videoButton}
-                                        >
-                                            {/* TODO: Video saved on committee */}
-                                            <h1>Komitévideo for {part.committee.name}</h1>
-                                        </PopUp>
-                                    </div>
-                                    {
-                                        part.priority !== null && userId && (
-                                            <>
-                                                <div className={styles.priorityContainer}>
-                                                    <p className={styles.priority}>
-                                                        {part.priority}
-                                                    </p>
-                                                    <Reprioritize
-                                                        userId={userId}
-                                                        commiteeParticipationId={part.id}
-                                                        showUp={part.priority > minPriority}
-                                                        showDown={part.priority < maxPriority}
-                                                    />
-                                                </div>
-                                            </>
-                                        )
-                                    }
-                                </BackdropImage>
-                            </li>
-                        ))
-                }
-            </ul>
+                                    </BackdropImage>
+                                </div>
+                            ))
+                    }
+                </div>
+            </div>
         </PageWrapper>
     )
 }
diff --git a/src/app/applications/page.module.scss b/src/app/applications/page.module.scss
index 41396fe81..0ca64bfbf 100644
--- a/src/app/applications/page.module.scss
+++ b/src/app/applications/page.module.scss
@@ -1 +1,29 @@
-@use '@/styles/ohma';
\ No newline at end of file
+@use '@/styles/ohma';
+
+.periods {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: ohma.$gap;
+    margin-top: ohma.$gap;
+
+    > div {
+        @include ohma.layer;
+        background-color: ohma.$colors-surface-raised;
+        padding: ohma.$gap;
+        border-radius: 0.8em;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+
+        a {
+            font-weight: ohma.$fonts-weight-l;
+            color: ohma.$colors-accent-blue;
+            text-decoration: none;
+        }
+
+        time {
+            color: ohma.$colors-text;
+            font-size: ohma.$fonts-s;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/app/applications/page.tsx b/src/app/applications/page.tsx
index 1cdaa4b24..11bbf206b 100644
--- a/src/app/applications/page.tsx
+++ b/src/app/applications/page.tsx
@@ -17,15 +17,13 @@ export default async function Applications() {
                 <CreateUpdateApplicationPeriodForm committees={committees} closePopUpOnSuccess="addApplicationPeriod" />
             </AddHeaderItemPopUp>
         }>
-            <div className={styles.wrapper}>
-                <ol className={styles.periods}>
-                    {periods.map((period) => (
-                        <li key={period.name}>
-                            <a href={`/applications/${period.name}`}>{period.name}</a>
-                            <Date date={period.endDate} includeTime />
-                        </li>
-                    ))}
-                </ol>
+            <div className={styles.periods}>
+                {periods.map((period) => (
+                    <div key={period.name}>
+                        <a href={`/applications/${period.name}`}>{period.name}</a>
+                        <Date date={period.endDate} includeTime />
+                    </div>
+                ))}
             </div>
         </PageWrapper>
     )
diff --git a/src/app/articles/[category]/EditCategory.module.scss b/src/app/articles/[category]/EditCategory.module.scss
index 1a517f7de..29d5137be 100644
--- a/src/app/articles/[category]/EditCategory.module.scss
+++ b/src/app/articles/[category]/EditCategory.module.scss
@@ -17,10 +17,10 @@
     }
     background-color: transparent;
     border: none;
-    color: ohma.$colors-white;
-    transition: color .3s ease-in-out;
+    color: ohma.$colors-text;
+    transition: color ohma.$transitionTime ease-in-out;
     &:hover {
         cursor: pointer;
-        color: ohma.$colors-primary;
+        color: ohma.$colors-accent-blue;
     }
 }
\ No newline at end of file
diff --git a/src/app/articles/[category]/SideBar.module.scss b/src/app/articles/[category]/SideBar.module.scss
index a3c9a56a1..9f61edaaf 100644
--- a/src/app/articles/[category]/SideBar.module.scss
+++ b/src/app/articles/[category]/SideBar.module.scss
@@ -7,21 +7,21 @@
 
 @media screen and not (max-width: ohma.$mobileBreakpoint) {
     .SideBar {
+        height: 100%;
+        gap: ohma.$gap;
         > aside {
-            height: 100%;
+            background: ohma.$colors-surface-base;
+            border-radius: ohma.$rounding;
             width: 300px;
-            position: fixed;
             left: 0;
             z-index: 2;
-            max-height: calc(100vh - 40px);
         }
         > main {
+            background: ohma.$colors-surface-base;
+            border-radius: ohma.$rounding;
             z-index: 1;
-            transform: translateX(300px);
-            width: calc(100% - 300px - 2em);
-            margin: 1em;
             overflow: hidden;
-            min-height: 80vh;
+            width: calc(100% - 300px - #{ohma.$gap});
         }
     }
     
@@ -31,16 +31,13 @@
     }
     .SideBarContent {
         opacity: 0; // hide before handleHeight has run once
-    
-        height: calc(100% - 2em);
-        transition: opacity 0.35s, transform 0.05s ease-out;
+
+        height: 100%;
+        transition: opacity ohma.$transitionTime, transform 0.05s ease-out;
         overflow: auto;
-        color: ohma.$colors-white;
+        color: ohma.$colors-text;
         margin: 1em 0em 1em 1em;
-        @include ohma.card();
-        @include ohma.layer();
         padding: ohma.$cardRounding;
-        backdrop-filter: blur(10px);
         h2 {
             font-size: ohma.$fonts-l;
         }
@@ -66,7 +63,7 @@
         width: 100vw;
         z-index: 8;
         @include ohma.layer();
-        transition: padding-bottom 0.35s, height 0.35s;
+        transition: padding-bottom ohma.$transitionTime, height ohma.$transitionTime;
         &.SideBarMobileClosed {
             height: 110px;
         }
@@ -88,17 +85,17 @@
                 width: 40px;
                 height: 40px;
                 margin: 5px;
-                color: ohma.$colors-white;
+                color: ohma.$colors-text;
                 transition: transform 0.35s;
             }
             h1 {
                 margin: 0 ohma.$gap;
-                color: ohma.$colors-white;
+                color: ohma.$colors-text;
             }
 
         }    
         ul > li {
-            margin-left: calc(50px + ohma.$gap);
+            margin-left: calc(50px + #{ohma.$gap});
         }
     }
     .SideBarContent {
@@ -114,7 +111,7 @@
         display: flex;
         justify-content: space-between;
         a {
-            color: ohma.$colors-white;
+            color: ohma.$colors-text;
             text-decoration: none;
             &:hover {
                 text-decoration: underline;
@@ -124,5 +121,5 @@
 }
 
 .destroyArticle {
-    @include ohma.roundBtn(ohma.$colors-red);
+    @include ohma.roundBtn(ohma.$colors-accent-red);
 }
\ No newline at end of file
diff --git a/src/app/articles/[category]/page.module.scss b/src/app/articles/[category]/page.module.scss
index cb23cc1b6..00f4a129d 100644
--- a/src/app/articles/[category]/page.module.scss
+++ b/src/app/articles/[category]/page.module.scss
@@ -7,7 +7,7 @@
     align-items: center;
     justify-content: center;
     > p {
-        border-left: 1px solid ohma.$colors-gray-800;
+        border-left: 1px solid ohma.$colors-surface-subtle;
         margin-left: ohma.$gap;
         padding-left: ohma.$gap;
     }
diff --git a/src/app/cabin/book/CabinCalendar.module.scss b/src/app/cabin/book/CabinCalendar.module.scss
index b9bf61931..8384e7f6c 100644
--- a/src/app/cabin/book/CabinCalendar.module.scss
+++ b/src/app/cabin/book/CabinCalendar.module.scss
@@ -42,7 +42,7 @@
 .calendar {
   width: 100%;
   max-width: 30rem;
-  border: 2px solid black;
+  border: 2px solid ohma.$colors-surface-subtle;
   border-radius: ohma.$rounding;
   margin-top: 1rem;
   max-height: 30rem;
@@ -70,10 +70,10 @@
 
       >.front {
         z-index: 1;
-        @include rangeStyles(ohma.$colors-primary, 100%, 10px);
+        @include rangeStyles(ohma.$colors-accent-blue, 100%, 10px);
 
         &.inRange {
-          background-color: color-mix(in srgb, ohma.$colors-primary, white 30%); // TODO Perhaps change
+          background-color: color-mix(in srgb, ohma.$colors-accent-blue, white 30%); // TODO Perhaps change
         }
 
         >.dateNumber {
@@ -85,7 +85,7 @@
 
       >.behind {
         z-index: 0;
-        background-color: ohma.$colors-green;
+        background-color: ohma.$colors-accent-green;
 
         .left, .right {
           width: 50%;
@@ -102,23 +102,23 @@
 
         &.inRange {
           .left, .right {
-            background-color: ohma.$colors-red;
+            background-color: ohma.$colors-accent-red;
           }
         }
         &.start {
           .right {
-            background-color: ohma.$colors-red;
+            background-color: ohma.$colors-accent-red;
           }
         }
         &.end {
           .left {
-            background-color: ohma.$colors-red;
+            background-color: ohma.$colors-accent-red;
           }
         }
       }
 
       &.exists:hover {
-        background-color: ohma.$colors-gray-300;
+        background-color: ohma.$colors-surface-hover;
       }
     }
 
diff --git a/src/app/career/companies/page.tsx b/src/app/career/companies/page.tsx
index 2370840a5..e8c27f7d4 100644
--- a/src/app/career/companies/page.tsx
+++ b/src/app/career/companies/page.tsx
@@ -15,7 +15,7 @@ import type { PageSizeCompany } from '@/contexts/paging/CompanyPaging'
 
 type PropTypes = SearchParamsServerSide
 
-export default async function page({ searchParams }: PropTypes) {
+export default async function CompaniesPage({ searchParams }: PropTypes) {
     const pageSize = 10 satisfies PageSizeCompany
     const name = QueryParams.companyName.decode(await searchParams) ?? undefined
 
@@ -66,7 +66,6 @@ export default async function page({ searchParams }: PropTypes) {
                 <CompanyList serverRenderedData={serverRenderedData.map(
                     companyListRenderer({
                         session,
-                        asClient: false,
                     })
                 )} />
             </CompanyPagingProvider>
diff --git a/src/app/career/jobads/CompanyChooser.module.scss b/src/app/career/jobads/CompanyChooser.module.scss
index 07a1d7681..e6570ad92 100644
--- a/src/app/career/jobads/CompanyChooser.module.scss
+++ b/src/app/career/jobads/CompanyChooser.module.scss
@@ -3,7 +3,7 @@
 .CompanyChooser {
     position: relative;
     a {
-        @include ohma.borderBtn(ohma.$colors-secondary);
+        @include ohma.secondaryBtn;
     }
     @include ohma.screenLg {
         padding-top: 3em;
diff --git a/src/app/career/jobads/JobAd.module.scss b/src/app/career/jobads/JobAd.module.scss
index 7acd31e80..058288664 100644
--- a/src/app/career/jobads/JobAd.module.scss
+++ b/src/app/career/jobads/JobAd.module.scss
@@ -1,10 +1,22 @@
 @use '@/styles/ohma';
 
+.JobAd {
+    @include ohma.listRow;
+}
+
+// Job ads have no deadline often enough that the lead slot needs a fallback
+// that still reads as a value rather than an empty column.
+.noDeadline {
+    font-size: ohma.$fonts-s;
+    color: ohma.$colors-text-muted;
+    text-transform: none;
+    text-align: center;
+}
+
 .inactive {
-    background-color: ohma.$colors-red;
-    padding: 0.3em;
-    border-radius: .5em;
-    width: 70px;
-    display: grid;
-    place-items: center;
-}
\ No newline at end of file
+    background-color: ohma.$colors-accent-red;
+    color: ohma.$colors-text-inv;
+    padding: 0 ohma.$gap;
+    border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
+    font-weight: ohma.$fonts-weight-m;
+}
diff --git a/src/app/career/jobads/JobAd.tsx b/src/app/career/jobads/JobAd.tsx
index b88a85f37..dbb48207a 100644
--- a/src/app/career/jobads/JobAd.tsx
+++ b/src/app/career/jobads/JobAd.tsx
@@ -1,24 +1,53 @@
 import styles from './JobAd.module.scss'
-import ImageCard from '@/components/ImageCard/ImageCard'
+import Image from '@/components/Image/Image'
 import { formatVevenUri } from '@/lib/urlEncoding'
 import { jobAdType } from '@/services/career/jobAds/constants'
+import Link from 'next/link'
 import type { SimpleJobAd } from '@/services/career/jobAds/types'
 
 type PropTypes = {
     jobAd: SimpleJobAd
 }
 
+const months = ['jan', 'feb', 'mar', 'apr', 'mai', 'jun', 'jul', 'aug', 'sep', 'okt', 'nov', 'des']
+
 export default function JobAd({ jobAd }: PropTypes) {
+    const deadline = jobAd.applicationDeadline
+
     return (
-        <ImageCard
+        <Link
             href={`/career/jobads/${formatVevenUri(jobAd.articleName, jobAd.id)}`}
-            title={jobAd.articleName}
-            image={jobAd.coverImage}
-            key={jobAd.id}
+            className={styles.JobAd}
         >
-            {!jobAd.active ? <p className={styles.inactive}>Inaktiv</p> : <></>}
-            <p>{jobAd.companyName} - {jobAdType[jobAd.type].label}</p>
-            <i>{jobAd.description}</i>
-        </ImageCard>
+            <div className={styles.thumb}>
+                {jobAd.coverImage && (
+                    <Image
+                        disableLinkingToLicense
+                        creditPlacement="top"
+                        width={200}
+                        image={jobAd.coverImage}
+                    />
+                )}
+            </div>
+
+            <div className={styles.lead}>
+                {deadline ? <>
+                    <b>{deadline.getDate()}</b>
+                    <span>{months[deadline.getMonth()]}</span>
+                </> : (
+                    <span className={styles.noDeadline}>Løpende</span>
+                )}
+            </div>
+
+            <div className={styles.main}>
+                <h2>{jobAd.articleName}</h2>
+                <p>{jobAd.companyName} — {jobAdType[jobAd.type].label}</p>
+            </div>
+
+            <div className={styles.meta}>
+                {jobAd.location && <span>{jobAd.location}</span>}
+                {!jobAd.active && <span className={styles.inactive}>Inaktiv</span>}
+            </div>
+        </Link>
     )
 }
diff --git a/src/app/career/jobads/[nameAndId]/EditJobAd.module.scss b/src/app/career/jobads/[nameAndId]/EditJobAd.module.scss
index 98c07c855..aa13a38a3 100644
--- a/src/app/career/jobads/[nameAndId]/EditJobAd.module.scss
+++ b/src/app/career/jobads/[nameAndId]/EditJobAd.module.scss
@@ -2,8 +2,8 @@
 
 .EditJobAd {
     @include ohma.card;
-    background-color: ohma.$colors-gray-200;
-    color: ohma.$colors-secondary;
+    background-color: ohma.$colors-surface-raised;
+    color: ohma.$colors-text;
     display: grid;
     gap: 1em;
     @include ohma.screenLg {
diff --git a/src/app/career/jobads/[nameAndId]/page.module.scss b/src/app/career/jobads/[nameAndId]/page.module.scss
index 7effc1ee6..0dd2d6eb7 100644
--- a/src/app/career/jobads/[nameAndId]/page.module.scss
+++ b/src/app/career/jobads/[nameAndId]/page.module.scss
@@ -1,11 +1,43 @@
 @use '@/styles/ohma';
 
+.wrapper {
+    min-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.main {
+    flex: 1 1 auto;
+    min-height: 0;
+}
+
+.coverImage {
+    border-radius: ohma.$rounding;
+    overflow: hidden;
+    margin-bottom: ohma.$gap;
+}
+
+.articleZone {
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+}
+
+.addSectionZone {
+    margin: ohma.$gap calc(2 * #{ohma.$gap}) 0;
+}
+
 .sideBar {
     @include ohma.round;
-    padding: 1em;
-    border-radius: 1em;
-    margin: 1em 1.5em;
-    @include ohma.layer;
+    padding: ohma.$gap;
+    border-radius: ohma.$rounding;
+    margin-left: ohma.$gap;
+    background-color: ohma.$colors-surface-base;
+
+    @include ohma.screenMobile {
+        margin-left: 0;
+        margin-top: ohma.$gap;
+    }
+
     .metInfo {
         display: flex;
         flex-direction: column;
@@ -19,8 +51,7 @@
                 height: 20px;
                 grid-row: 1 / 3;
                 grid-column: 1 / 2;
-                margin: auto;
-                margin-right: 1em;
+                margin: auto ohma.$gap auto auto;
             }
             p:first-child {
                 font-weight: ohma.$fonts-weight-l;
diff --git a/src/app/career/jobads/[nameAndId]/page.tsx b/src/app/career/jobads/[nameAndId]/page.tsx
index 92935d51e..d1248fecc 100644
--- a/src/app/career/jobads/[nameAndId]/page.tsx
+++ b/src/app/career/jobads/[nameAndId]/page.tsx
@@ -23,6 +23,7 @@ import { decodeVevenUriHandleError } from '@/lib/urlEncoding'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { configureAction } from '@/services/configureAction'
 import { jobAdAuth } from '@/services/career/jobAds/auth'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 import { notFound } from 'next/navigation'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
@@ -58,11 +59,15 @@ export default async function JobAd({ params }: PropTypes) {
 
     return (
         <div className={styles.wrapper}>
-            <main>
+            <PageTitleSetter title={'Jobbannonse'} />
+            <main className={styles.main}>
                 <Article
                     canEdit={canEdit}
                     article={jobAd.article}
+                    coverImageClass={styles.coverImage}
                     sideBarClassName={styles.sideBar}
+                    articleClassName={styles.articleZone}
+                    addSectionClassName={styles.addSectionZone}
                     actions={{
                         updateArticleAction: configureAction(
                             updateJobAdArticleAction,
@@ -149,7 +154,6 @@ export default async function JobAd({ params }: PropTypes) {
                                     disableEdit
                                     squareLogo={false}
                                     company={jobAd.company}
-                                    asClient={false}
                                     session={session}
                                 />
                             </div>
diff --git a/src/app/career/jobads/archive/JobAdInactiveList.module.scss b/src/app/career/jobads/archive/JobAdInactiveList.module.scss
index 0387f8cb2..09f651d18 100644
--- a/src/app/career/jobads/archive/JobAdInactiveList.module.scss
+++ b/src/app/career/jobads/archive/JobAdInactiveList.module.scss
@@ -1,9 +1,11 @@
 @use '@/styles/ohma';
 
 .JobAdInactiveList {
-    margin: 1em 0;
-    @include ohma.ImageCardListLayout;
+    @include ohma.RowListLayout;
+
+    // EndlessScroll's status line, a sibling of the rows in the stacked column.
+    // It spanned every grid column before; stretching is the flex default.
     .loadingInfo {
-        grid-column: 1 / -1;
+        color: ohma.$colors-text-muted;
     }
 }
\ No newline at end of file
diff --git a/src/app/career/jobads/archive/page.module.scss b/src/app/career/jobads/archive/page.module.scss
index 382ade511..0b004affd 100644
--- a/src/app/career/jobads/archive/page.module.scss
+++ b/src/app/career/jobads/archive/page.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .backLink {
-    color: ohma.$colors-black;
+    color: ohma.$colors-text;
     svg {
         width: 30px;
         height: 30px;
diff --git a/src/app/career/jobads/page.module.scss b/src/app/career/jobads/page.module.scss
index 212e7d6b5..cad1707ca 100644
--- a/src/app/career/jobads/page.module.scss
+++ b/src/app/career/jobads/page.module.scss
@@ -1,14 +1,11 @@
 @use '@/styles/ohma';
 
 .wrapper {
-    margin: 1em 0;
-    @include ohma.ImageCardListLayout;
+    @include ohma.RowListLayout;
 }
 
-.archiveLink {
-    color: ohma.$colors-black;
-    svg {
-        width: 30px;
-        height: 30px;
-    }
+.head {
+    display: flex;
+    align-items: center;
+    gap: 1em;
 }
\ No newline at end of file
diff --git a/src/app/career/jobads/page.tsx b/src/app/career/jobads/page.tsx
index 6ab7b9d67..abddfa4d3 100644
--- a/src/app/career/jobads/page.tsx
+++ b/src/app/career/jobads/page.tsx
@@ -2,18 +2,16 @@ import styles from './page.module.scss'
 import CreateJobAdForm from './CreateJobAdForm'
 import CurrentJobAds from './CurrentJobAds'
 import { AddHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
+import ArchiveLink from '@/components/HeaderItems/ArchiveLink'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import { CompanyPagingProvider } from '@/contexts/paging/CompanyPaging'
 import CompanySelectionProvider from '@/contexts/CompanySelection'
-import Link from 'next/link'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faArchive } from '@fortawesome/free-solid-svg-icons'
 
 export default async function JobAds() {
     return (
-        <PageWrapper title="jobbannonser"
+        <PageWrapper title="Jobbannonser"
             headerItem={
-                <>
+                <div className={styles.head}>
                     <AddHeaderItemPopUp popUpKey={'jobAdForm'}>
                         <CompanyPagingProvider
                             serverRenderedData={[]}
@@ -28,10 +26,8 @@ export default async function JobAds() {
                             </CompanySelectionProvider>
                         </CompanyPagingProvider>
                     </AddHeaderItemPopUp>
-                    <Link href="/career/jobads/archive" className={styles.archiveLink} >
-                        <FontAwesomeIcon icon={faArchive} />
-                    </Link>
-                </>
+                    <ArchiveLink href="/career/jobads/archive" />
+                </div>
             }>
             <div className={styles.wrapper}>
                 <CurrentJobAds/>
diff --git a/src/app/career/page.module.scss b/src/app/career/page.module.scss
index 421d29e1e..893ae67d3 100644
--- a/src/app/career/page.module.scss
+++ b/src/app/career/page.module.scss
@@ -15,11 +15,10 @@
     .links {
         display: flex;
         flex-direction: column;
-        gap: 2em;
-        margin-bottom: 2em;
+        gap: ohma.$gap;
         > a {
-            @include ohma.neumorphism(var(--secondary-l), var(--secondary-c), var(--secondary-h),5px,10px);
-            border-radius: ohma.$cardRounding;
+            background: ohma.$colors-surface-raised;
+            border-radius: ohma.$rounding;
             text-decoration: none;
             &:hover {
                 text-decoration: underline;
@@ -42,7 +41,7 @@
             > .linkImage {
                 flex: 1;
                 margin: ohma.$gap;
-                border-radius: calc(#{ohma.$cardRounding} - #{ohma.$gap});
+                border-radius: calc(#{ohma.$rounding} - #{ohma.$gap});
                 overflow: hidden;
             }
         }
diff --git a/src/app/career/page.tsx b/src/app/career/page.tsx
index 9a7844195..f460e3795 100644
--- a/src/app/career/page.tsx
+++ b/src/app/career/page.tsx
@@ -2,10 +2,9 @@ import styles from './page.module.scss'
 import SpecialCmsParagraph from '@/components/Cms/CmsParagraph/SpecialCmsParagraph'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import { ServerSession } from '@/auth/session/ServerSession'
-import Image from '@/components/Image/Image'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 import CmsLink from '@/components/Cms/CmsLink/CmsLink'
 import { QueryParams } from '@/lib/queryParams/queryParams'
-import { readSpecialImageAction } from '@/services/images/actions'
 import { readSpecialEventTagAction } from '@/services/events/tags/actions'
 import {
     readSpecialCmsParagraphCareerInfo,
@@ -18,15 +17,9 @@ import Link from 'next/link'
 
 export default async function CareerLandingPage() {
     const session = await ServerSession.fromNextAuth()
-    const jobAdImageRes = await readSpecialImageAction({ params: { special: 'MACHINE' } })
-    const eventImageRes = await readSpecialImageAction({ params: { special: 'FAIR' } })
-    const comanyImageRes = await readSpecialImageAction({ params: { special: 'REALFAGSBYGGET' } })
     const conactorCmsLinkRes = await readCareerSpecialCmsLinkAction({ params: { special: 'CAREER_LINK_TO_CONTACTOR' } })
     const companyPresentationEventTagRes = await readSpecialEventTagAction({ params: { special: 'COMPANY_PRESENTATION' } })
 
-    const jobAdImage = jobAdImageRes.success ? jobAdImageRes.data : null
-    const eventImage = eventImageRes.success ? eventImageRes.data : null
-    const companyImage = comanyImageRes.success ? comanyImageRes.data : null
     const contactorCmsLink = conactorCmsLinkRes.success ? conactorCmsLinkRes.data : null
     const companyPresentationEventTag = companyPresentationEventTagRes.success ? companyPresentationEventTagRes.data : null
 
@@ -56,26 +49,32 @@ export default async function CareerLandingPage() {
                 />
                 <span className={styles.links}>
                     <Link href="/career/jobads">
-                        { jobAdImage ? <Image
+                        <StandardImageServer
                             disableLinkingToLicense
-                            imageContainerClassName={styles.linkImage}
-                            width={300} image={jobAdImage} /> : <></> }
-                        <h2>Jobbanonser</h2>
+                            className={styles.linkImage}
+                            width={300}
+                            standardImage="MACHINE"
+                        />
+                        <h2>Jobbannonser</h2>
                     </Link>
                     <Link href={`/events?${QueryParams.eventTags.encodeUrl(
                         companyPresentationEventTag ? [companyPresentationEventTag.name] : []
                     )}`}>
-                        { eventImage ? <Image
+                        <StandardImageServer
                             disableLinkingToLicense
-                            imageContainerClassName={styles.linkImage}
-                            width={300} image={eventImage} /> : <></> }
+                            className={styles.linkImage}
+                            width={300}
+                            standardImage="FAIR"
+                        />
                         <h2>Bedriftpresentasjoner</h2>
                     </Link>
                     <Link href="/career/companies">
-                        { companyImage ? <Image
+                        <StandardImageServer
                             disableLinkingToLicense
-                            imageContainerClassName={styles.linkImage}
-                            width={300} image={companyImage} /> : <></> }
+                            className={styles.linkImage}
+                            width={300}
+                            standardImage="REALFAGSBYGGET"
+                        />
                         <h2>Bedrifter</h2>
                     </Link>
                 </span>
diff --git a/src/app/committees/[shortName]/Nav.module.scss b/src/app/committees/[shortName]/Nav.module.scss
index b68330b66..1e9687bb3 100644
--- a/src/app/committees/[shortName]/Nav.module.scss
+++ b/src/app/committees/[shortName]/Nav.module.scss
@@ -10,7 +10,7 @@
     a {
         @include ohma.roundAdminSvgBtn();
         &.selected {
-            background-color: ohma.$colors-secondary;
+            background-color: ohma.$colors-surface-base;
         }
     }
 }
diff --git a/src/app/committees/[shortName]/admin/page.module.scss b/src/app/committees/[shortName]/admin/page.module.scss
index 509a4d826..ce2b6f0e6 100644
--- a/src/app/committees/[shortName]/admin/page.module.scss
+++ b/src/app/committees/[shortName]/admin/page.module.scss
@@ -3,3 +3,10 @@
 .wrapper {
     min-height: 500px;
 }
+
+.logo {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1em;
+}
diff --git a/src/app/committees/[shortName]/admin/page.tsx b/src/app/committees/[shortName]/admin/page.tsx
index e71fad0a2..1020b7813 100644
--- a/src/app/committees/[shortName]/admin/page.tsx
+++ b/src/app/committees/[shortName]/admin/page.tsx
@@ -1,6 +1,7 @@
 import styles from './page.module.scss'
 import getCommittee from '@/app/committees/[shortName]/getCommittee'
-import CmsImage from '@/components/Cms/CmsImage/CmsImage'
+import Image from '@/components/Image/Image'
+import ImageUploader from '@/components/Image/ImageUploader'
 import { configureAction } from '@/services/configureAction'
 import { updateCommitteeLogoAction } from '@/services/groups/committees/actions'
 import { committeeAuth } from '@/services/groups/committees/auth'
@@ -12,22 +13,26 @@ export default async function ComitteeAdmin({ params }: PropTypes) {
 
     const canEditLogo = committeeAuth.updateLogo.dynamicFields({ groupId: committee.groupId }).auth(
         await ServerSession.fromNextAuth()
-    ).toJsObject()
+    )
 
     return (
         <div className={styles.wrapper}>
             <h2>Admin</h2>
-            <CmsImage
-                canEdit={canEditLogo}
-                cmsImage={committee.logoImage}
-                width={300}
-                updateCmsImageAction={
-                    configureAction(
-                        updateCommitteeLogoAction,
-                        { implementationParams: { shortName: committee.shortName } }
+            <div className={styles.logo}>
+                <Image image={committee.logoImage} width={300} />
+                {
+                    canEditLogo.authorized && (
+                        <ImageUploader
+                            title="Endre komitelogo"
+                            refreshOnSuccess
+                            uploadImageAction={configureAction(
+                                updateCommitteeLogoAction,
+                                { params: { shortName: committee.shortName } }
+                            )}
+                        />
                     )
                 }
-            />
+            </div>
         </div>
     )
 }
diff --git a/src/app/committees/[shortName]/layout.tsx b/src/app/committees/[shortName]/layout.tsx
index 80ff69593..c1871d4c7 100644
--- a/src/app/committees/[shortName]/layout.tsx
+++ b/src/app/committees/[shortName]/layout.tsx
@@ -1,7 +1,6 @@
 import getCommitee from './getCommittee'
 import Nav from './Nav'
 import styles from './layout.module.scss'
-import { readSpecialImageAction } from '@/services/images/actions'
 import BackdropImage from '@/components/BackdropImage/BackdropImage'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import CommitteeImage from '@/components/CommitteeImage/CommitteeImage'
@@ -19,14 +18,7 @@ export type PropTypes = {
 export default async function Committee({ params, children }: PropTypes) {
     const committee = await getCommitee(params)
 
-    let committeeLogo = committee.logoImage.image
-    if (!committeeLogo) {
-        const res = await readSpecialImageAction.bind(
-            null, { params: { special: 'DAFAULT_COMMITTEE_LOGO' } }
-        )()
-        if (!res.success) throw new Error('Kunne ikke finne standard komitelogo')
-        committeeLogo = res.data
-    }
+    const committeeLogo = committee.logoImage
 
     const canEditCoverImage = committeeAuth.updateArticle.dynamicFields({ groupId: committee.groupId }).auth(
         await ServerSession.fromNextAuth()
diff --git a/src/app/committees/[shortName]/members/page.module.scss b/src/app/committees/[shortName]/members/page.module.scss
index 9c9c39b1c..3b01ac7f7 100644
--- a/src/app/committees/[shortName]/members/page.module.scss
+++ b/src/app/committees/[shortName]/members/page.module.scss
@@ -9,5 +9,5 @@
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    gap: calc(1 * ohma.$gap);
+    gap: calc(1 * #{ohma.$gap});
 }
diff --git a/src/app/committees/[shortName]/members/page.tsx b/src/app/committees/[shortName]/members/page.tsx
index 6f72f5d13..8615e21a9 100644
--- a/src/app/committees/[shortName]/members/page.tsx
+++ b/src/app/committees/[shortName]/members/page.tsx
@@ -36,7 +36,6 @@ export default async function CommiteeMembers({ params }: PropTypes) {
                             key={i}
                             user={member.user}
                             subText={member.title}
-                            asClient={false}
                         />
                     ))}
                 </div>
diff --git a/src/app/committees/[shortName]/page.module.scss b/src/app/committees/[shortName]/page.module.scss
index e7d51c88d..65c0d8595 100644
--- a/src/app/committees/[shortName]/page.module.scss
+++ b/src/app/committees/[shortName]/page.module.scss
@@ -7,6 +7,6 @@
         width: 100%;
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-        gap: calc(1 * ohma.$gap);
+        gap: calc(1 * #{ohma.$gap});
     }
 }
diff --git a/src/app/committees/[shortName]/page.tsx b/src/app/committees/[shortName]/page.tsx
index 6d867afb2..ba78e717d 100644
--- a/src/app/committees/[shortName]/page.tsx
+++ b/src/app/committees/[shortName]/page.tsx
@@ -52,7 +52,6 @@ export default async function Committee({ params }: PropTypes) {
                     key={i}
                     user={member.user}
                     subText={member.title}
-                    asClient={false}
                 />)}
             </div>
         </div>
diff --git a/src/app/committees/page.module.scss b/src/app/committees/page.module.scss
index bcda02488..c767999c3 100644
--- a/src/app/committees/page.module.scss
+++ b/src/app/committees/page.module.scss
@@ -1,21 +1,11 @@
 @use '@/styles/ohma';
 
-$max-width: 1200px;
-
 .wrapper {
+    width: 100%;
+    height: 100%;
     color: ohma.$colors-text;
-    $width: 100%;
-
-    width: $width;
-    max-width: $max-width;
-    margin-left: max(calc(($width - min($width, $max-width)) / 2), 0px);
-    position: relative;
-    overflow-y: hidden;
 
     align-self: flex-start;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-    padding: 0 2em;
     h1 {
         font-family: ohma.$fonts-secondary;
         font-size: ohma.$fonts-xxl;
@@ -31,14 +21,12 @@ $max-width: 1200px;
 }
 
 .committeeList {
-    margin: 1em 0;
     display: grid;
-    grid-template-columns: repeat(auto-fill, 225px);
-    gap: 2em;
-    justify-content: center;
+    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    gap: ohma.$gap;
     overflow: visible;
 
     @include ohma.screenMobile {
-        grid-template-columns: repeat(auto-fill, 200px);
+        grid-template-columns: 1fr;
     }
 }
diff --git a/src/app/committees/page.tsx b/src/app/committees/page.tsx
index 901b0edb2..5abc65078 100644
--- a/src/app/committees/page.tsx
+++ b/src/app/committees/page.tsx
@@ -1,21 +1,16 @@
 import styles from './page.module.scss'
 import CommitteeCard from '@/components/CommitteeCard/CommitteeCard'
 import { readAllCommitteesAction } from '@/services/groups/committees/actions'
-import { readSpecialImageAction } from '@/services/images/actions'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 
 export default async function Committees() {
     const res = await readAllCommitteesAction()
     if (!res.success) throw new Error(`Kunne ikke hente komiteer - ${res.errorCode}`)
     const committees = res.data
 
-    const strandardCommitteeLogoRes = await readSpecialImageAction.bind(
-        null, { params: { special: 'DAFAULT_COMMITTEE_LOGO' } }
-    )()
-    const standardCommitteeLogo = strandardCommitteeLogoRes.success ? strandardCommitteeLogoRes.data : null
-
     return (
         <div className={styles.wrapper}>
-            <h1>Komitéer</h1>
+            <PageTitleSetter title={'Komiteer'} />
             {
                 committees.length ? (
                     <div className={styles.committeeList}>
@@ -25,7 +20,7 @@ export default async function Committees() {
                                     key={committee.id}
                                     title={committee.name}
                                     href={`/committees/${committee.shortName}`}
-                                    image={committee.logoImage.image || standardCommitteeLogo}
+                                    image={committee.logoImage}
                                 />
                             ))
                         }
diff --git a/src/app/education/courses/page.tsx b/src/app/education/courses/page.tsx
index eba9d3607..074da1b84 100644
--- a/src/app/education/courses/page.tsx
+++ b/src/app/education/courses/page.tsx
@@ -6,7 +6,7 @@ import { createCourseAction } from '@/education/courses/actions'
 
 export default function Courses() {
     return (
-        <PageWrapper title="Courses" headerItem={
+        <PageWrapper title="Emner" headerItem={
             <AddHeaderItemPopUp popUpKey="create-couses">
                 <Form
                     action={createCourseAction}
diff --git a/src/app/education/page.tsx b/src/app/education/page.tsx
index d9c024d46..d9084510b 100644
--- a/src/app/education/page.tsx
+++ b/src/app/education/page.tsx
@@ -1,17 +1,18 @@
 import styles from './page.module.scss'
-import { readSpecialImageAction } from '@/services/images/actions'
+import { readStandardImageAction } from '@/services/images/standard/actions'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import ImageCard from '@/components/ImageCard/ImageCard'
+import { configureAction } from '@/services/configureAction'
 
 export default async function education() {
-    const hovedbyggningenRes = await readSpecialImageAction.bind(null, {
+    const hovedbyggningenRes = await configureAction(readStandardImageAction, {
         params: {
-            special: 'HOVEDBYGGNINGEN'
+            standardImage: 'HOVEDBYGGNINGEN'
         }
     })()
-    const BooksRes = await readSpecialImageAction.bind(null, {
+    const BooksRes = await configureAction(readStandardImageAction, {
         params: {
-            special: 'BOOKS'
+            standardImage: 'BOOKS'
         }
     })()
 
diff --git a/src/app/education/schools/page.module.scss b/src/app/education/schools/page.module.scss
index 56bb4cdda..7f4e2081e 100644
--- a/src/app/education/schools/page.module.scss
+++ b/src/app/education/schools/page.module.scss
@@ -5,5 +5,5 @@
 }
 
 .adminLink {
-    @include ohma.btn(ohma.$colors-primary);
+    @include ohma.btn(ohma.$colors-accent-blue);
 }
\ No newline at end of file
diff --git a/src/app/education/schools/page.tsx b/src/app/education/schools/page.tsx
index c9babaf9d..1fd8db5a0 100644
--- a/src/app/education/schools/page.tsx
+++ b/src/app/education/schools/page.tsx
@@ -1,5 +1,5 @@
 import styles from './page.module.scss'
-import { readSchoolsPageAction } from '@/services/education/schools/actions'
+import { readExpandedSchoolsPageAction } from '@/services/education/schools/actions'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import { SchoolPagingProvider } from '@/contexts/paging/SchoolPaging'
 import SchoolList from '@/components/School/SchoolList'
@@ -14,9 +14,13 @@ export default async function Schools() {
     const isSchoolAdmin = schoolAuth.create.dynamicFields({}).auth(session).authorized
 
     const pageSizeSchool: PageSizeSchool = 8
-    const res = await readSchoolsPageAction({
-        page: { pageSize: pageSizeSchool, page: 0, cursor: null },
-        details: undefined,
+    const res = await readExpandedSchoolsPageAction({
+        params: {
+            paging: {
+                page: { pageSize: pageSizeSchool, page: 0, cursor: null },
+                details: undefined,
+            },
+        },
     })
     if (!res.success) throw new Error(res.error?.length ? res.error[0].message : 'Ukjent feil')
     const serverRenderedData = res.data
@@ -36,7 +40,7 @@ export default async function Schools() {
                 startPage={{ pageSize: pageSizeSchool, page: 1 }}
             >
                 <div className={styles.wrapper}>
-                    <SchoolList serverRendered={serverRenderedData.map(schoolListRenderer(false, session.toJsObject()))} />
+                    <SchoolList serverRendered={serverRenderedData.map(schoolListRenderer(session.toJsObject()))} />
                 </div>
             </SchoolPagingProvider>
         </PageWrapper>
diff --git a/src/app/error.module.scss b/src/app/error.module.scss
index cc339c62d..a4e6edf23 100644
--- a/src/app/error.module.scss
+++ b/src/app/error.module.scss
@@ -1,6 +1,8 @@
 @use '@/styles/ohma';
 
 .wrapper {
+    background: ohma.$colors-surface-base;
+    padding: 0 calc(2 * #{ohma.$gap});
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -15,14 +17,14 @@
             color: ohma.$colors-text;
         }
         .imageContainer {
-            border-right: solid 2px ohma.$colors-secondary;
+            border-right: solid 2px ohma.$colors-surface-base;
             padding-right: 20px;
             margin-right: 20px;
         }
     }
     > button {
         position: absolute;
-        top: 20px;
+        top: calc(#{ohma.$nav-height} + 20px + #{ohma.$gap});
         right: 20px;
         width: auto;
     }
diff --git a/src/app/error.tsx b/src/app/error.tsx
index 1e60fd5e2..03cabf542 100644
--- a/src/app/error.tsx
+++ b/src/app/error.tsx
@@ -1,11 +1,8 @@
 'use client'
 import styles from './error.module.scss'
 import Button from '@/components/UI/Button'
-import SpecialCmsImageClient from '@/components/Cms/CmsImage/SpecialCmsImageClient'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
-import { frontpageAuth } from '@/services/frontpage/auth'
-import { useSession } from '@/auth/session/useSession'
-import { Session } from '@/auth/session/Session'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
+import StandardImageClient from '@/components/Image/StandardImageClient'
 
 /**
  * note that passing custom error type to next error boundary is not supported
@@ -13,24 +10,14 @@ import { Session } from '@/auth/session/Session'
  * Look at redirectToErrorPage to how it is implemented.
 */
 export default function ErrorBoundary({ error, reset }: {error: unknown, reset: () => void}) {
-    const session = useSession()
-
     return (
         <div className={styles.wrapper}>
+            <PageTitleSetter title={'Error'} />
             <div className={styles.info}>
                 <div className={styles.imageContainer}>
-                    <SpecialCmsImageClient
-                        canEdit={
-                            frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
-                                session.loading ? Session.empty() : session.session
-                            ).toJsObject()
-                        }
+                    <StandardImageClient
                         width={70}
-                        special="SERVER_ERROR"
-                        //TODO: Probably call through other service see comments in frontpage operations
-                        //Makes little sense that frontpage ownes this.
-                        readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                        updateCmsImageAction={updateSpecialCmsImageFrontpage}
+                        standardImage="LOGO_SIMPLE"
                     />
                 </div>
                 {
diff --git a/src/app/events/CreateOrUpdateEventForm.module.scss b/src/app/events/CreateOrUpdateEventForm.module.scss
index 89de09445..c3e960eff 100644
--- a/src/app/events/CreateOrUpdateEventForm.module.scss
+++ b/src/app/events/CreateOrUpdateEventForm.module.scss
@@ -2,7 +2,7 @@
 
 .CreateOrUpdateEventForm {
     min-width: 50vw;
-    padding: 2 * ohma.$gap;
+    padding: calc(2 * #{ohma.$gap});
     .canBeViewdBy {
         max-width: 300px;
     }
diff --git a/src/app/events/EventsLandingLayout.module.scss b/src/app/events/EventsLandingLayout.module.scss
deleted file mode 100644
index c5c44c418..000000000
--- a/src/app/events/EventsLandingLayout.module.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-@use '@/styles/ohma';
-
-.EventsLandingLayout {
-    @include ohma.pagePadding();
-    margin-top: 1rem;
-
-    .top {
-        > .titleAndTags {
-            h1 {
-                font-size: ohma.$fonts-xxl;
-                font-family: ohma.$fonts-secondary;
-            }
-            display: flex;
-            align-items: center;
-            gap: 1em;
-            > a {
-                text-decoration: none;
-                position: relative;
-                &:hover {
-                    &::after {
-                        content: '✖';
-                        font-size: 4em;
-                        color: ohma.$colors-black;
-                        position: absolute;
-                        left: 50%;
-                        top: 50%;
-                        transform: translate(-50%, -50%);
-                    }
-                }
-            }
-        }
-        display: flex;
-        justify-content: space-between;
-        .navButtons {
-            display: flex;
-            gap: 1em;
-            align-items: center;
-            a {
-                color: ohma.$colors-text;
-                svg {
-                    width: 2.1em;
-                    height: 2.1em;
-                }
-            }
-            button {
-                color: ohma.$colors-text;
-            }
-        }
-    }
-
-    main {
-        @include ohma.EventCardListLayout;
-    }
-}
diff --git a/src/app/events/EventsLandingLayout.tsx b/src/app/events/EventsLandingLayout.tsx
deleted file mode 100644
index 8e1fc0817..000000000
--- a/src/app/events/EventsLandingLayout.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import styles from './EventsLandingLayout.module.scss'
-import EventTag from '@/components/Event/EventTag'
-import { QueryParams } from '@/lib/queryParams/queryParams'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import Link from 'next/link'
-import type { EventTag as EventTagT } from '@/prisma-generated-pn-types'
-import type { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-import type { ReactNode } from 'react'
-
-type PropTypes = {
-    headerLinks: {
-        href: string,
-        icon: IconDefinition
-    }[],
-    headerItem: ReactNode,
-    title: string,
-    children: ReactNode
-    selectedTags?: EventTagT[]
-    page: 'EVENT' | 'EVENT_ARCHIVE'
-}
-
-export default function EventsLandingLayout({
-    headerItem,
-    headerLinks,
-    title,
-    selectedTags,
-    page,
-    children
-}: PropTypes) {
-    const baseUrl = page === 'EVENT' ? '/events' : '/events/archive'
-    return (
-        <div className={styles.EventsLandingLayout}>
-            <div className={styles.top}>
-                <div className={styles.titleAndTags}>
-                    <h1>{title}</h1>
-                    {
-                        selectedTags?.map(tag =>
-                            <Link key={tag.name} href={selectedTags.length === 1 ? baseUrl :
-                                `${baseUrl}?${QueryParams.eventTags.encodeUrl(
-                                    selectedTags.filter(tagItem => tagItem.name !== tag.name).map(tagItem => tagItem.name)
-                                )}`
-                            }>
-                                <EventTag eventTag={tag} />
-                            </Link>
-                        )
-                    }
-                </div>
-                <div className={styles.navButtons}>
-                    {
-                        headerLinks.map(item =>
-                            <Link href={item.href} key={item.href}>
-                                <FontAwesomeIcon icon={item.icon} />
-                            </Link>
-                        )
-                    }
-                    {headerItem}
-                </div>
-            </div>
-
-            <main>
-                {children}
-            </main>
-        </div>
-    )
-}
diff --git a/src/app/events/[nameAndId]/RegistrationUI.module.scss b/src/app/events/[nameAndId]/RegistrationUI.module.scss
index 32cbd36fa..af3c333cc 100644
--- a/src/app/events/[nameAndId]/RegistrationUI.module.scss
+++ b/src/app/events/[nameAndId]/RegistrationUI.module.scss
@@ -2,4 +2,5 @@
 
 .registrationButton {
     width: 100% !important;
+    margin: 0;
 }
diff --git a/src/app/events/[nameAndId]/RegistrationsList.module.scss b/src/app/events/[nameAndId]/RegistrationsList.module.scss
index 2b1863827..9fa49f267 100644
--- a/src/app/events/[nameAndId]/RegistrationsList.module.scss
+++ b/src/app/events/[nameAndId]/RegistrationsList.module.scss
@@ -4,7 +4,7 @@
     width: 100%;
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
-    gap: calc(1 * ohma.$gap);
+    gap: calc(1 * #{ohma.$gap});
 
     > :last-child {
         grid-column: 1 / -1;
diff --git a/src/app/events/[nameAndId]/RegistrationsList.tsx b/src/app/events/[nameAndId]/RegistrationsList.tsx
index 252b568a1..0c58e6601 100644
--- a/src/app/events/[nameAndId]/RegistrationsList.tsx
+++ b/src/app/events/[nameAndId]/RegistrationsList.tsx
@@ -52,7 +52,7 @@ function DetailedTable({
                         pagingContext={EventRegistrationDetailedPagingContext}
                         renderer={row => {
                             const name = row.user ? <Link href={`/users/${row.user.username}`}>
-                                <UserDisplayName user={row.user} asClient={true} width={20} />
+                                <UserDisplayName user={row.user} width={20} />
                             </Link> : row.contact?.name
                             return <tr key={row.id}>
                                 <td>{name}</td>
@@ -108,7 +108,7 @@ function DefaultList({
                         return <UserCard key={i} user={{
                             ...row.user,
                             image: row.image
-                        }} className={styles.userCard} asClient={true} />
+                        }} className={styles.userCard} />
                     }
                     return <ContactCard key={i} name={row.contact?.name ?? 'Ukjent'} image={row.image} />
                 }}
diff --git a/src/app/events/[nameAndId]/page.module.scss b/src/app/events/[nameAndId]/page.module.scss
index 221e28d01..0cfc33eca 100644
--- a/src/app/events/[nameAndId]/page.module.scss
+++ b/src/app/events/[nameAndId]/page.module.scss
@@ -3,10 +3,10 @@
 $padding: ohma.$minimalPagePadding;
 
 .wrapper {
-    padding: 1em $padding;
     display: grid;
     grid-template-columns: auto 1fr;
     grid-template-rows: auto 1fr;
+    height: 100%;
 
     .coverImage {
         grid-column: 1 / 3;
@@ -15,8 +15,9 @@ $padding: ohma.$minimalPagePadding;
         justify-content: center;
         align-items: center;
         position: relative;
-        border-radius: ohma.$cardRounding;
+        border-radius: ohma.$rounding;
         overflow: hidden;
+        min-height: calc(40 * #{ohma.$gap});
 
         .settings {
             top: 1em;
@@ -30,7 +31,7 @@ $padding: ohma.$minimalPagePadding;
             position: absolute;
 
             >button {
-                margin-left: calc(2 * ohma.$gap);
+                margin-left: calc(2 * #{ohma.$gap});
             }
         }
 
@@ -73,18 +74,17 @@ $padding: ohma.$minimalPagePadding;
     }
 
     >aside {
-        color: ohma.$colors-text;
         grid-column: 1 / 2;
         grid-row: 2 / 3;
         min-width: 350px;
-        @include ohma.layer;
-        margin-top: 1em;
-        border-radius: ohma.$cardRounding;
+        background: ohma.$colors-surface-base;
+        margin-top: ohma.$gap;
+        border-radius: ohma.$rounding;
         padding: ohma.$cardRounding;
-        min-height: 300px;
+        min-height: fit-content;
         display: flex;
         flex-direction: column;
-        gap: 2em;
+        gap: calc(2*#{ohma.$gap});
 
         >p {
             display: flex;
@@ -102,13 +102,20 @@ $padding: ohma.$minimalPagePadding;
     >main {
         grid-column: 2 / 3;
         grid-row: 2 / 3;
-        margin: 1em 3em;
+        margin-left: ohma.$gap;
+        margin-top: ohma.$gap;
+        padding: calc(2 * #{ohma.$gap});
+        background: ohma.$colors-surface-base;
+        border-radius: ohma.$rounding;
     }
 
     >.registrationList {
+        background: ohma.$colors-surface-base;
+        padding: ohma.$gap;
+        border-radius: ohma.$rounding;
         grid-column: 1 / 3;
         grid-row: 4 / 4;
-        margin-top: calc(4 * ohma.$gap);
+        margin-top: ohma.$gap;
 
         >h4 {
             font-size: ohma.$fonts-xl;
@@ -125,12 +132,17 @@ $padding: ohma.$minimalPagePadding;
         >aside {
             grid-column: 1 / 2;
             grid-row: 2 / 3;
+            padding: calc(2 * #{ohma.$gap});
         }
 
         >main {
             grid-column: 1 / 2;
             grid-row: 3 / 4;
-            margin: 1em 0; // remove side margins on small screens
+            margin: ohma.$gap 0;
+        }
+
+        >.registrationList {
+            margin-top: 0;
         }
     }
 }
diff --git a/src/app/events/[nameAndId]/page.tsx b/src/app/events/[nameAndId]/page.tsx
index 639059143..76baa1dc5 100644
--- a/src/app/events/[nameAndId]/page.tsx
+++ b/src/app/events/[nameAndId]/page.tsx
@@ -23,6 +23,7 @@ import { configureAction } from '@/services/configureAction'
 import { decodeVevenUriHandleError } from '@/lib/urlEncoding'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { eventAuth } from '@/services/events/auth'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 import Link from 'next/link'
 import { faCalendar, faExclamation, faLocationDot, faUsers } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -57,6 +58,7 @@ export default async function Event({ params }: PropTypes) {
 
     return (
         <div className={styles.wrapper}>
+            <PageTitleSetter title={'Arrangement'} />
             <span className={styles.coverImage}>
                 <CmsImage
                     canEdit={canEditCmsCoverImage}
diff --git a/src/app/events/archive/EventArchiveList.module.scss b/src/app/events/archive/EventArchiveList.module.scss
new file mode 100644
index 000000000..ae1b06eac
--- /dev/null
+++ b/src/app/events/archive/EventArchiveList.module.scss
@@ -0,0 +1,9 @@
+@use '@/styles/ohma';
+
+.EventArchiveList {
+    @include ohma.RowListLayout;
+
+    .loadingInfo {
+        color: ohma.$colors-text-muted;
+    }
+}
diff --git a/src/app/events/archive/EventArchiveList.tsx b/src/app/events/archive/EventArchiveList.tsx
index 96de32a21..700dafb21 100644
--- a/src/app/events/archive/EventArchiveList.tsx
+++ b/src/app/events/archive/EventArchiveList.tsx
@@ -1,17 +1,18 @@
 'use client'
+import styles from './EventArchiveList.module.scss'
 import EventCard from '@/components/Event/EventCard'
 import EndlessScroll from '@/components/PagingWrappers/EndlessScroll'
 import { EventArchivePagingContext } from '@/contexts/paging/EventArchivePaging'
-import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
 
-type PropTypes = {
-    canEdit: AuthResultTypeAny
-}
-
-export default function EventArchiveList({ canEdit }: PropTypes) {
+export default function EventArchiveList() {
     return (
-        <EndlessScroll pagingContext={EventArchivePagingContext} renderer={event =>
-            <EventCard key={event.id} event={event} canEdit={canEdit} />
-        } />
+        <main className={styles.EventArchiveList}>
+            <EndlessScroll
+                loadingInfoClassName={styles.loadingInfo}
+                pagingContext={EventArchivePagingContext}
+                renderer={event =>
+                    <EventCard key={event.id} event={event} />
+                } />
+        </main>
     )
 }
diff --git a/src/app/events/archive/page.module.scss b/src/app/events/archive/page.module.scss
index 41396fe81..19ab12d82 100644
--- a/src/app/events/archive/page.module.scss
+++ b/src/app/events/archive/page.module.scss
@@ -1 +1,45 @@
-@use '@/styles/ohma';
\ No newline at end of file
+@use '@/styles/ohma';
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 1em;
+}
+
+.tags {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    a {
+        text-decoration: none;
+        position: relative;
+        &:hover {
+            &::after {
+                content: '✖';
+                font-size: 4em;
+                color: ohma.$colors-text;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
+        }
+    }
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+}
+
+.backLink {
+    color: ohma.$colors-text;
+    svg {
+        width: 30px;
+        height: 30px;
+    }
+}
diff --git a/src/app/events/archive/page.tsx b/src/app/events/archive/page.tsx
index 44e092260..69a4f9a51 100644
--- a/src/app/events/archive/page.tsx
+++ b/src/app/events/archive/page.tsx
@@ -1,13 +1,16 @@
+import styles from './page.module.scss'
 import EventArchiveList from './EventArchiveList'
 import TagHeaderItem from '@/app/events/TagHeaderItem'
+import PageWrapper from '@/components/PageWrapper/PageWrapper'
+import EventTag from '@/components/Event/EventTag'
 import { readEventTagsAction } from '@/services/events/tags/actions'
-import EventsLandingLayout from '@/app/events/EventsLandingLayout'
 import { EventArchivePagingProvider } from '@/contexts/paging/EventArchivePaging'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { QueryParams } from '@/lib/queryParams/queryParams'
 import { eventTagAuth } from '@/services/events/tags/auth'
-import { eventAuth } from '@/services/events/auth'
 import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
 import type { SearchParamsServerSide } from '@/lib/queryParams/types'
 
 type PropTypes = SearchParamsServerSide
@@ -15,43 +18,65 @@ type PropTypes = SearchParamsServerSide
 export default async function EventArchive({
     searchParams
 }: PropTypes) {
-    const selectedTagNames = QueryParams.eventTags.decode(await searchParams)
+    const tagNames = QueryParams.eventTags.decode(await searchParams)
+
     const eventTagsResponse = await readEventTagsAction()
     if (!eventTagsResponse.success) {
-        throw new Error('Failed to read current events')
+        throw new Error('Failed to read event tags')
     }
     const { data: eventTags } = eventTagsResponse
-    const selectedTags = selectedTagNames ? eventTags.filter(tag => selectedTagNames.includes(tag.name)) : []
+
+    const currentTags = tagNames ? eventTags.filter(tag => tagNames.includes(tag.name)) : []
 
     const session = await ServerSession.fromNextAuth()
 
     const canUpdate = eventTagAuth.update.dynamicFields({}).auth(session)
     const canCreate = eventTagAuth.create.dynamicFields({}).auth(session)
     const canDestroy = eventTagAuth.destroy.dynamicFields({}).auth(session)
-    const canEditEventCmsImage = eventAuth.updateCmsCoverImage.dynamicFields({}).auth(session).toJsObject()
 
     return (
-        <EventsLandingLayout page="EVENT_ARCHIVE" title="Hvad Der Har Hendt" headerLinks={[
-            {
-                href: selectedTagNames?.length ? `/events?${QueryParams.eventTags.encodeUrl(selectedTagNames)}` : '/events',
-                icon: faArrowLeft
-            }
-        ]} headerItem={
-            <TagHeaderItem
-                canCreate={canCreate.authorized}
-                canUpdate={canUpdate.authorized}
-                canDestroy={canDestroy.authorized}
-                currentTags={selectedTags}
-                eventTags={eventTags}
-                page="EVENT_ARCHIVE"
-            />
-        } selectedTags={selectedTags}>
+        <PageWrapper title="Hvad Der Har Hendt" headerItem={
+            <div className={styles.header}>
+                <div className={styles.tags}>
+                    {currentTags.map(tag => {
+                        const remainingTags = currentTags
+                            .filter(currentTag => currentTag.name !== tag.name)
+                            .map(currentTag => currentTag.name)
+                        const href = currentTags.length === 1 ?
+                            '/events/archive' :
+                            `/events/archive?${QueryParams.eventTags.encodeUrl(remainingTags)}`
+
+                        return (
+                            <Link key={tag.name} href={href}>
+                                <EventTag eventTag={tag} />
+                            </Link>
+                        )
+                    })}
+                </div>
+                <div className={styles.actions}>
+                    <TagHeaderItem
+                        eventTags={eventTags}
+                        currentTags={currentTags}
+                        canUpdate={canUpdate.authorized}
+                        canCreate={canCreate.authorized}
+                        canDestroy={canDestroy.authorized}
+                        page="EVENT_ARCHIVE"
+                    />
+                    <Link
+                        href={tagNames?.length ? `/events?${QueryParams.eventTags.encodeUrl(tagNames)}` : '/events'}
+                        className={styles.backLink}
+                    >
+                        <FontAwesomeIcon icon={faArrowLeft} />
+                    </Link>
+                </div>
+            </div>
+        }>
             <EventArchivePagingProvider serverRenderedData={[]} startPage={{
                 page: 0,
                 pageSize: 12
-            }} details={{ tags: QueryParams.eventTags.decode(await searchParams) }}>
-                <EventArchiveList canEdit={canEditEventCmsImage} />
+            }} details={{ tags: tagNames }}>
+                <EventArchiveList />
             </EventArchivePagingProvider>
-        </EventsLandingLayout>
+        </PageWrapper>
     )
 }
diff --git a/src/app/events/page.module.scss b/src/app/events/page.module.scss
index 1d9f38809..7b48465d9 100644
--- a/src/app/events/page.module.scss
+++ b/src/app/events/page.module.scss
@@ -4,4 +4,44 @@
     min-width: 50vw;
     display: grid;
     place-content: center;
+}
+
+.wrapper {
+    @include ohma.RowListLayout;
+}
+
+.header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    gap: 1em;
+}
+
+.tags {
+    display: flex;
+    align-items: center;
+    gap: 1em;
+
+    a {
+        text-decoration: none;
+        position: relative;
+        &:hover {
+            &::after {
+                content: '✖';
+                font-size: 4em;
+                color: ohma.$colors-text;
+                position: absolute;
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%);
+            }
+        }
+    }
+}
+
+.actions {
+    display: flex;
+    align-items: center;
+    gap: 1em;
 }
\ No newline at end of file
diff --git a/src/app/events/page.tsx b/src/app/events/page.tsx
index 2c4d9f71e..ef90995bb 100644
--- a/src/app/events/page.tsx
+++ b/src/app/events/page.tsx
@@ -1,16 +1,17 @@
 import styles from './page.module.scss'
 import CreateOrUpdateEventForm from './CreateOrUpdateEventForm'
-import EventsLandingLayout from './EventsLandingLayout'
 import TagHeaderItem from './TagHeaderItem'
 import { AddHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
+import ArchiveLink from '@/components/HeaderItems/ArchiveLink'
+import PageWrapper from '@/components/PageWrapper/PageWrapper'
+import EventTag from '@/components/Event/EventTag'
 import { readCurrentEventsAction } from '@/services/events/actions'
 import EventCard from '@/components/Event/EventCard'
 import { readEventTagsAction } from '@/services/events/tags/actions'
 import { eventTagAuth } from '@/services/events/tags/auth'
-import { eventAuth } from '@/services/events/auth'
 import { QueryParams } from '@/lib/queryParams/queryParams'
 import { ServerSession } from '@/auth/session/ServerSession'
-import { faArchive } from '@fortawesome/free-solid-svg-icons'
+import Link from 'next/link'
 import type { SearchParamsServerSide } from '@/lib/queryParams/types'
 
 type PropTypes = SearchParamsServerSide
@@ -39,39 +40,55 @@ export default async function Events({
     const canUpdate = eventTagAuth.update.dynamicFields({}).auth(session)
     const canCreate = eventTagAuth.create.dynamicFields({}).auth(session)
     const canDestroy = eventTagAuth.destroy.dynamicFields({}).auth(session)
-    const canEditEventCmsImage = eventAuth.updateCmsCoverImage.dynamicFields({}).auth(session).toJsObject()
 
     return (
-        <EventsLandingLayout page="EVENT" title="Hvad Der Hender" headerLinks={[
-            {
-                href: tagNames?.length ? `/events/archive?${QueryParams.eventTags.encodeUrl(tagNames)}` : '/events/archive',
-                icon: faArchive
-            },
-        ]}
-        selectedTags={currentTags}
-        headerItem={
-            <>
-                <TagHeaderItem
-                    eventTags={eventTags}
-                    currentTags={currentTags}
-                    canUpdate={canUpdate.authorized}
-                    canCreate={canCreate.authorized}
-                    canDestroy={canDestroy.authorized}
-                    page="EVENT"
-                />
-                <AddHeaderItemPopUp popUpKey="CreateEventPopUp">
-                    <div className={styles.createEvent}>
-                        <CreateOrUpdateEventForm eventTags={eventTags} />
-                    </div>
-                </AddHeaderItemPopUp>
-            </>
-        }
-        >
-            {
-                currentEvents.map(event =>
-                    <EventCard event={event} key={event.id} canEdit={canEditEventCmsImage} />
-                )
-            }
-        </EventsLandingLayout>
+        <PageWrapper title="Hvad Der Hender" headerItem={
+            <div className={styles.header}>
+                <div className={styles.tags}>
+                    {currentTags.map(tag => {
+                        const remainingTags = currentTags
+                            .filter(currentTag => currentTag.name !== tag.name)
+                            .map(currentTag => currentTag.name)
+                        const href = currentTags.length === 1 ?
+                            '/events' :
+                            `/events?${QueryParams.eventTags.encodeUrl(remainingTags)}`
+
+                        return (
+                            <Link key={tag.name} href={href}>
+                                <EventTag eventTag={tag} />
+                            </Link>
+                        )
+                    })}
+                </div>
+                <div className={styles.actions}>
+                    <TagHeaderItem
+                        eventTags={eventTags}
+                        currentTags={currentTags}
+                        canUpdate={canUpdate.authorized}
+                        canCreate={canCreate.authorized}
+                        canDestroy={canDestroy.authorized}
+                        page="EVENT"
+                    />
+                    <AddHeaderItemPopUp popUpKey="CreateEventPopUp">
+                        <div className={styles.createEvent}>
+                            <CreateOrUpdateEventForm eventTags={eventTags} />
+                        </div>
+                    </AddHeaderItemPopUp>
+                    <ArchiveLink href={tagNames?.length ?
+                        `/events/archive?${QueryParams.eventTags.encodeUrl(tagNames)}`
+                        :
+                        '/events/archive'
+                    } />
+                </div>
+            </div>
+        }>
+            <div className={styles.wrapper}>
+                {
+                    currentEvents.map(event =>
+                        <EventCard event={event} key={event.id} />
+                    )
+                }
+            </div>
+        </PageWrapper>
     )
 }
diff --git a/src/app/image-collections/ImageCollectionList.module.scss b/src/app/image-collections/ImageCollectionList.module.scss
new file mode 100644
index 000000000..8b9766f6e
--- /dev/null
+++ b/src/app/image-collections/ImageCollectionList.module.scss
@@ -0,0 +1,57 @@
+@use '@/styles/ohma';
+
+$collection-size: 250px;
+
+.ImageCollectionList {
+    width: 100%;
+}
+
+.modeSwitch {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: ohma.$gap;
+    margin-bottom: ohma.$gap;
+
+    > button {
+        @include ohma.btn(ohma.$colors-surface-hover);
+        margin: 0;
+        color: ohma.$colors-text;
+
+        &.active {
+            @include ohma.btn(ohma.$colors-accent-blue);
+            margin: 0;
+        }
+    }
+}
+
+.toggle {
+    margin-left: auto;
+}
+
+.grid {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    > *:not(.loadingControl) {
+        width: $collection-size;
+        height: $collection-size;
+        margin: ohma.$gap;
+        overflow: hidden;
+        @include ohma.round;
+        position: relative;
+    }
+
+    > .loadingControl {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: (2 * ($collection-size + 20px))) {
+    .grid > *:not(.loadingControl) {
+        width: min(90vw, 350px);
+        height: min(90vw, 350px);
+    }
+}
\ No newline at end of file
diff --git a/src/app/image-collections/ImageCollectionList.tsx b/src/app/image-collections/ImageCollectionList.tsx
new file mode 100644
index 000000000..2c409ee22
--- /dev/null
+++ b/src/app/image-collections/ImageCollectionList.tsx
@@ -0,0 +1,69 @@
+'use client'
+import styles from './ImageCollectionList.module.scss'
+import CollectionCardLink from '@/components/Image/Collection/CollectionCardLink'
+import EndlessScroll from '@/components/PagingWrappers/EndlessScroll'
+import { DynamicImageCollectionPagingContext } from '@/contexts/paging/DynamicImageCollectionPaging'
+import { useSpecialCollections } from '@/contexts/ClientData'
+import { useState, type ReactNode } from 'react'
+
+type PropTypes = {
+    serverRendered: ReactNode,
+    toggle?: ReactNode,
+}
+
+/**
+ * WARNING: The server rendered data should be CollectioCards to make it consistent with the endless scroll
+ * @param serverRendered - Make sure to pass the server rendered collections here in the correct format
+ * @returns
+ */
+export default function ImageCollectionList({ serverRendered, toggle }: PropTypes) {
+    const [mode, setMode] = useState<'special' | 'dynamic'>('dynamic')
+
+    const specialCollectionsResult = useSpecialCollections()
+
+    const renderSpecialCollections = () => {
+        if (specialCollectionsResult.status === 'loading') return <i>Laster inn...</i>
+        if (specialCollectionsResult.status === 'error') return <p>Noe gikk galt</p>
+        return specialCollectionsResult.specialCollections.map(collection => (
+            <CollectionCardLink key={collection.id} collection={collection} />
+        ))
+    }
+
+    return (
+        <div className={styles.ImageCollectionList}>
+            <div className={styles.modeSwitch}>
+                <button
+                    className={mode === 'dynamic' ? styles.active : ''}
+                    onClick={() => setMode('dynamic')}
+                >
+                    Bildealbum
+                </button>
+                <button
+                    className={mode === 'special' ? styles.active : ''}
+                    onClick={() => setMode('special')}
+                >
+                    Spesialsamlinger
+                </button>
+                {toggle && <div className={styles.toggle}>{toggle}</div>}
+            </div>
+            {mode === 'dynamic' ? (
+                <div className={styles.grid}>
+                    {serverRendered} {/* Rendered on server (page.tsx) hopefully in the right way*/}
+                    <EndlessScroll
+                        pagingContext={DynamicImageCollectionPagingContext}
+                        loadingInfoClassName={styles.loadingControl}
+                        renderer={
+                            (collection, i) => (
+                                <CollectionCardLink key={i} collection={collection} />
+                            )
+                        }
+                    />
+                </div>
+            ) : (
+                <div className={styles.grid}>
+                    {renderSpecialCollections()}
+                </div>
+            )}
+        </div>
+    )
+}
diff --git a/src/app/images/MakeNewCollection.module.scss b/src/app/image-collections/MakeNewCollection.module.scss
similarity index 100%
rename from src/app/images/MakeNewCollection.module.scss
rename to src/app/image-collections/MakeNewCollection.module.scss
diff --git a/src/app/image-collections/MakeNewCollection.tsx b/src/app/image-collections/MakeNewCollection.tsx
new file mode 100644
index 000000000..771e82c7e
--- /dev/null
+++ b/src/app/image-collections/MakeNewCollection.tsx
@@ -0,0 +1,31 @@
+'use client'
+import styles from './MakeNewCollection.module.scss'
+import Form from '@/components/Form/Form'
+import TextInput from '@/components/UI/TextInput'
+import { AddHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
+import { createDynamicImageCollectionAction } from '@/services/images/dynamic/actions'
+
+export default function MakeNewCollection() {
+    const popUpKey = 'MakeNewCollection'
+
+    return (
+        <AddHeaderItemPopUp popUpKey={popUpKey}>
+            <div className={styles.MakeNewCollection}>
+                <Form
+                    closePopUpOnSuccess={popUpKey}
+                    refreshOnSuccess
+                    navigateOnSuccess={
+                        collection =>
+                            (collection ? `/image-collections/${collection.id}` : '/image-collections')
+                    }
+                    title="Lag et album"
+                    submitText="Lag album"
+                    action={createDynamicImageCollectionAction}
+                >
+                    <TextInput label="navn" name="collectionName" />
+                    <TextInput label="beskrivelse" name="collectionDescription" />
+                </Form>
+            </div>
+        </AddHeaderItemPopUp>
+    )
+}
diff --git a/src/app/image-collections/ToggleShowAdminCollections.module.scss b/src/app/image-collections/ToggleShowAdminCollections.module.scss
new file mode 100644
index 000000000..6c07253b1
--- /dev/null
+++ b/src/app/image-collections/ToggleShowAdminCollections.module.scss
@@ -0,0 +1,7 @@
+@use '@/styles/ohma';
+
+.ToggleShowAdminCollections {
+    display: flex;
+    align-items: center;
+    font-size: ohma.$fonts-m;
+}
diff --git a/src/app/image-collections/ToggleShowAdminCollections.tsx b/src/app/image-collections/ToggleShowAdminCollections.tsx
new file mode 100644
index 000000000..5c573adf4
--- /dev/null
+++ b/src/app/image-collections/ToggleShowAdminCollections.tsx
@@ -0,0 +1,41 @@
+'use client'
+import styles from './ToggleShowAdminCollections.module.scss'
+import Checkbox from '@/UI/Checkbox'
+import { QueryParams } from '@/lib/queryParams/queryParams'
+import { useRouter } from 'next/navigation'
+import type { ChangeEvent } from 'react'
+
+type PropTypes = {
+    showOnlyCollectionsSessionAdministrates: boolean,
+}
+
+/**
+ * The switch deciding whether the collection listing shows every collection the session may see, or
+ * only the ones it administrates.
+ *
+ * The value is kept in the url rather than only in the paging context, because the first page of
+ * collections is rendered on the server - setting the details client side alone would leave those
+ * server rendered cards unfiltered and page on from a cursor outside the filtered set.
+ * @param showOnlyCollectionsSessionAdministrates - the value currently in effect
+ * @returns
+ */
+export default function ToggleShowAdminCollections({
+    showOnlyCollectionsSessionAdministrates
+}: PropTypes) {
+    const { replace } = useRouter()
+
+    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+        replace(`/image-collections/?${QueryParams.onlyAdministratedCollections.encodeUrl(event.target.checked)}`)
+    }
+
+    return (
+        <span className={styles.ToggleShowAdminCollections}>
+            <Checkbox
+                name="onlyAdministratedCollections"
+                label="Bare samlinger jeg administrerer"
+                checked={showOnlyCollectionsSessionAdministrates}
+                onChange={handleChange}
+            />
+        </span>
+    )
+}
diff --git a/src/app/images/collections/[id]/CollectionAdmin.module.scss b/src/app/image-collections/dynamic/[name]/CollectionAdmin.module.scss
similarity index 100%
rename from src/app/images/collections/[id]/CollectionAdmin.module.scss
rename to src/app/image-collections/dynamic/[name]/CollectionAdmin.module.scss
diff --git a/src/app/image-collections/dynamic/[name]/CollectionAdmin.tsx b/src/app/image-collections/dynamic/[name]/CollectionAdmin.tsx
new file mode 100644
index 000000000..53703af68
--- /dev/null
+++ b/src/app/image-collections/dynamic/[name]/CollectionAdmin.tsx
@@ -0,0 +1,215 @@
+'use client'
+import styles from './CollectionAdmin.module.scss'
+import CollectionAdminUpload from './CollectionAdminUpload'
+import Form from '@/components/Form/Form'
+import TextInput from '@/components/UI/TextInput'
+import ImageUploader from '@/components/Image/ImageUploader'
+import PopUp from '@/components/PopUp/PopUp'
+import VisibilityAdmin from '@/components/Visibility/VisibilityAdmin/VisibilityAdmin'
+import useEditMode from '@/hooks/useEditMode'
+import { dynamicImageAuth } from '@/services/images/dynamic/auth'
+import Button from '@/components/UI/Button'
+import { configureAction } from '@/services/configureAction'
+import { EMPTY_VISIBILITY } from '@/auth/visibility/emptyVisibility'
+import {
+    updateDynamicImageCollectionAction,
+    destroyDynamicImageCollectionAction,
+    uploadImageToDynamicCollectionAction,
+    updateDynamicImageCollectionRegularLevelVisibilityAction,
+    updateDynamicImageCollectionAdminLevelVisibilityAction,
+} from '@/services/images/dynamic/actions'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faCog, faEye, faUpload } from '@fortawesome/free-solid-svg-icons'
+import { useRouter } from 'next/navigation'
+import { useState } from 'react'
+import type { ExpandedImageCollection } from '@/services/images/subservice/types'
+import type { DoubleLevelVisibilityMatrix } from '@/services/visibility/types'
+
+type PropTypes = {
+    collection: ExpandedImageCollection,
+    doubleLevelVisibility: DoubleLevelVisibilityMatrix | null,
+    refreshImages: () => void,
+}
+
+export default function CollectionAdmin({ collection, doubleLevelVisibility, refreshImages }: PropTypes) {
+    const { id: collectionId } = collection
+    const router = useRouter()
+    const doubleLevelMatrix = doubleLevelVisibility ?? EMPTY_VISIBILITY
+
+    const canUploadOne = useEditMode({
+        authorizer: dynamicImageAuth.uploadImage.dynamicFields({ doubleLevelMatrix })
+    })
+    const canUploadMany = useEditMode({
+        authorizer: dynamicImageAuth.uploadManyImages.dynamicFields({ doubleLevelMatrix })
+    })
+    const canUpdateCollection = useEditMode({
+        authorizer: dynamicImageAuth.updateCollection.dynamicFields({ doubleLevelMatrix })
+    })
+    const canDestroyCollection = useEditMode({
+        authorizer: dynamicImageAuth.destroyCollection.dynamicFields({ doubleLevelMatrix })
+    })
+    const canUpdateRegularVisibility = useEditMode({
+        authorizer: dynamicImageAuth.updateRegularLevel.dynamicFields({ doubleLevelMatrix })
+    })
+    const canUpdateAdminVisibility = useEditMode({
+        authorizer: dynamicImageAuth.updateAdminLevel.dynamicFields({ doubleLevelMatrix })
+    })
+
+    const [uploadOption, setUploadOption] = useState<'MANY' | 'ONE'>(canUploadMany ? 'MANY' : 'ONE')
+
+    const canUpload = canUploadOne || canUploadMany
+    const canOpenEditPopUp = canUpdateCollection || canDestroyCollection
+    const canOpenVisibilityPopUp = canUpdateRegularVisibility || canUpdateAdminVisibility
+
+    if (!canUpload && !canOpenEditPopUp && !canOpenVisibilityPopUp) return null
+
+    return (
+        <div className={styles.CollectionAdmin}>
+            {
+                canUpload && (
+                    <PopUp popUpKey="UploadImages" showButtonClass={styles.adminOption} showButtonContent={
+                        <FontAwesomeIcon icon={faUpload} />
+                    }>
+                        <div className={styles.upload}>
+                            {
+                                uploadOption === 'MANY' ? canUploadMany && (
+                                    <>
+                                        <CollectionAdminUpload collectionId={collectionId} refreshImages={refreshImages} />
+                                        {
+                                            canUploadOne && (
+                                                <Button
+                                                    className={styles.toggleUploadStyle}
+                                                    onClick={() => setUploadOption('ONE')}
+                                                    color="secondary"
+                                                >
+                                                Last opp ett bilde
+                                                </Button>
+                                            )
+                                        }
+                                    </>
+                                ) : canUploadOne && (
+                                    <>
+                                        <ImageUploader
+                                            title="Last opp bilde"
+                                            successCallback={refreshImages}
+                                            closePopUpOnSuccess="UploadImages"
+                                            uploadImageAction={configureAction(
+                                                uploadImageToDynamicCollectionAction,
+                                                { params: { collectionId } }
+                                            )}
+                                        />
+                                        {
+                                            canUploadMany && (
+                                                <Button
+                                                    className={styles.toggleUploadStyle}
+                                                    onClick={() => setUploadOption('MANY')}
+                                                    color="secondary"
+                                                >
+                                                Last opp mange
+                                                </Button>
+                                            )
+                                        }
+                                    </>
+                                )
+                            }
+                        </div>
+                    </PopUp>
+                )
+            }
+            {
+                canOpenEditPopUp && (
+                    <PopUp popUpKey="Edit" showButtonClass={styles.adminOption} showButtonContent={
+                        <FontAwesomeIcon icon={faCog} />
+                    }>
+                        {
+                            canUpdateCollection && (
+                                <Form
+                                    refreshOnSuccess
+                                    title="Rediger samling"
+                                    submitText="oppdater"
+                                    closePopUpOnSuccess="Edit"
+                                    action={configureAction(
+                                        updateDynamicImageCollectionAction,
+                                        { params: { collectionId } }
+                                    )}
+                                >
+                                    <TextInput
+                                        defaultValue={collection.name}
+                                        color="black"
+                                        label="navn"
+                                        name="collectionName"
+                                    />
+                                    <TextInput
+                                        defaultValue={collection.description || ''}
+                                        color="black"
+                                        label="beskrivelse"
+                                        name="collectionDescription"
+                                    />
+                                </Form>
+                            )
+                        }
+                        {
+                            canDestroyCollection && (
+                                <Form
+                                    submitText="slett samling"
+                                    successCallback={() => router.push('/image-collections')}
+                                    action={configureAction(
+                                        destroyDynamicImageCollectionAction,
+                                        { params: { collectionId } }
+                                    )}
+                                    submitColor="red"
+                                    confirmation={{
+                                        confirm: true,
+                                        text:
+                                            'Er du sikker på at du vil slette samlingen. ' +
+                                            'Dette vil også slette alle bilder i salingen.'
+                                    }}
+                                />
+                            )
+                        }
+                    </PopUp>
+                )
+            }
+            {
+                doubleLevelVisibility && canOpenVisibilityPopUp && (
+                    <PopUp popUpKey="Visibility" showButtonClass={styles.adminOption} showButtonContent={
+                        <FontAwesomeIcon icon={faEye} />
+                    }>
+                        <div className={styles.visibility}>
+                            {
+                                canUpdateRegularVisibility && (
+                                    <div>
+                                        <h3>Vanlig visning</h3>
+                                        <VisibilityAdmin
+                                            visibility={doubleLevelVisibility.regularLevel}
+                                            visibilityId={collection.visibilityRegularId}
+                                            updateVisibilityAction={configureAction(
+                                                updateDynamicImageCollectionRegularLevelVisibilityAction,
+                                                { implementationParams: { collectionId } }
+                                            )}
+                                        />
+                                    </div>
+                                )
+                            }
+                            {
+                                canUpdateAdminVisibility && (
+                                    <div>
+                                        <h3>Adminvisning</h3>
+                                        <VisibilityAdmin
+                                            visibility={doubleLevelVisibility.adminLevel}
+                                            visibilityId={collection.visibilityAdminId}
+                                            updateVisibilityAction={configureAction(
+                                                updateDynamicImageCollectionAdminLevelVisibilityAction,
+                                                { implementationParams: { collectionId } }
+                                            )}
+                                        />
+                                    </div>
+                                )
+                            }
+                        </div>
+                    </PopUp>
+                )
+            }
+        </div>
+    )
+}
diff --git a/src/app/images/collections/[id]/CollectionAdminUpload.module.scss b/src/app/image-collections/dynamic/[name]/CollectionAdminUpload.module.scss
similarity index 100%
rename from src/app/images/collections/[id]/CollectionAdminUpload.module.scss
rename to src/app/image-collections/dynamic/[name]/CollectionAdminUpload.module.scss
diff --git a/src/app/images/collections/[id]/CollectionAdminUpload.tsx b/src/app/image-collections/dynamic/[name]/CollectionAdminUpload.tsx
similarity index 76%
rename from src/app/images/collections/[id]/CollectionAdminUpload.tsx
rename to src/app/image-collections/dynamic/[name]/CollectionAdminUpload.tsx
index 9469a2a1c..fad762132 100644
--- a/src/app/images/collections/[id]/CollectionAdminUpload.tsx
+++ b/src/app/image-collections/dynamic/[name]/CollectionAdminUpload.tsx
@@ -4,10 +4,10 @@ import Dropzone from '@/components/UI/Dropzone'
 import Form from '@/components/Form/Form'
 import Slider from '@/components/UI/Slider'
 import ProgressBar from '@/components/ProgressBar/ProgressBar'
-import TextInput from '@/app/_components/UI/TextInput'
-import LicenseChooser from '@/app/_components/LicenseChooser/LicenseChooser'
-import { createImagesAction } from '@/services/images/actions'
-import { maxImageCountInOneBatch } from '@/services/images/constants'
+import TextInput from '@/components/UI/TextInput'
+import LicenseChooser from '@/components/LicenseChooser/LicenseChooser'
+import { uploadManyImagesToDynamicCollectionAction } from '@/services/images/dynamic/actions'
+import { maxImageCountInOneBatch } from '@/services/images/subservice/constants'
 import { useCallback, useState } from 'react'
 import type { FileWithStatus } from '@/components/UI/Dropzone'
 import type { ActionReturn } from '@/services/actionTypes'
@@ -33,18 +33,18 @@ export default function CollectionAdminUpload({ collectionId, refreshImages }: P
         const doneFiles: FileWithStatus[] = []
 
         const useFileName = data.get('useFileName') === 'on'
-        const credit = typeof data.get('credit') === 'string' ? data.get('credit') : undefined
-        const licenseId = typeof data.get('licenseId') === 'string' ? data.get('licenseId') : undefined
+        const credit = typeof data.get('imageCredit') === 'string' ? data.get('imageCredit') : undefined
+        const licenseId = typeof data.get('imageLicenseId') === 'string' ? data.get('imageLicenseId') : undefined
 
         let res: ActionReturn<void> = { success: true, data: undefined }
         setProgress(0)
         const progressIncrement = 1 / batches.length
         for (const batch of batches) {
             const formData = new FormData()
-            if (credit) formData.append('credit', credit)
-            if (licenseId) formData.append('licenseId', licenseId)
+            if (credit) formData.append('imageCredit', credit)
+            if (licenseId) formData.append('imageLicenseId', licenseId)
             batch.forEach(file => {
-                formData.append('files', file.file)
+                formData.append('imageFiles', file.file)
             })
             setFiles(prev => prev.map(file => {
                 if (batch.includes(file)) {
@@ -52,7 +52,7 @@ export default function CollectionAdminUpload({ collectionId, refreshImages }: P
                 }
                 return file
             }))
-            res = await createImagesAction({ params: { useFileName, collectionId } }, formData)
+            res = await uploadManyImagesToDynamicCollectionAction({ params: { useFileName, collectionId } }, formData)
             if (res.success) {
                 doneFiles.push(...batch)
                 setFiles(files.map(file => {
@@ -76,7 +76,7 @@ export default function CollectionAdminUpload({ collectionId, refreshImages }: P
         setProgress(null)
         setFiles([])
         return res
-    }, [files, progress, collectionId])
+    }, [files, collectionId])
 
     return (
         <Form
@@ -88,8 +88,8 @@ export default function CollectionAdminUpload({ collectionId, refreshImages }: P
             action={handleBatchedUpload}
         >
             <Dropzone label="last opp" name="files" files={files} setFiles={setFiles}/>
-            <TextInput name="credit" label="Kreditering" />
-            <LicenseChooser />
+            <TextInput name="imageCredit" label="Kreditering" />
+            <LicenseChooser name="imageLicenseId" />
             <Slider label="Bruk filnavn som navn" name="useFileName" />
             {
                 progress ? <ProgressBar progress={progress} /> : <></>
diff --git a/src/app/image-collections/dynamic/[name]/DynamicCollectionPanel.tsx b/src/app/image-collections/dynamic/[name]/DynamicCollectionPanel.tsx
new file mode 100644
index 000000000..bfff011fe
--- /dev/null
+++ b/src/app/image-collections/dynamic/[name]/DynamicCollectionPanel.tsx
@@ -0,0 +1,55 @@
+'use client'
+import CollectionAdmin from './CollectionAdmin'
+import ImagePanel from '@/components/Image/ImagePanel/ImagePanel'
+import { readImagesPageInDynamicCollectionAction } from '@/services/images/dynamic/actions'
+import { useCallback, useState } from 'react'
+import type { ImagePanelCursor } from '@/components/Image/ImagePanel/ImagePanel'
+import type { Page } from '@/lib/paging/types'
+import type { ExpandedImageCollection } from '@/services/images/subservice/types'
+import type { DoubleLevelVisibilityMatrix } from '@/services/visibility/types'
+
+const pageSize = 30
+
+type PropTypes = {
+    collection: ExpandedImageCollection,
+    doubleLevelVisibility: DoubleLevelVisibilityMatrix | null,
+}
+
+/**
+ * The client bridge between the server rendered collection page and the ImagePanel: binds the
+ * collection into the dynamic pager (a lambda the server page cannot create itself) with a stable
+ * identity per collection, and renders the collection admin beside the panel. Uploads remount the
+ * panel through its key, since new images invalidate every loaded page.
+ */
+export default function DynamicCollectionPanel({ collection, doubleLevelVisibility }: PropTypes) {
+    const [panelGeneration, setPanelGeneration] = useState(0)
+
+    const readPageOfImagesInCollectionAction = useCallback(
+        (page: Page<typeof pageSize, ImagePanelCursor>) =>
+            readImagesPageInDynamicCollectionAction({
+                params: {
+                    paging: { page },
+                    collectionId: collection.id,
+                },
+            }),
+        [collection.id]
+    )
+
+    return (
+        <>
+            <main>
+                <ImagePanel
+                    key={panelGeneration}
+                    readPageOfImagesInCollectionAction={readPageOfImagesInCollectionAction}
+                    pageSize={pageSize}
+                    withImageDisplay
+                />
+            </main>
+            <CollectionAdmin
+                collection={collection}
+                doubleLevelVisibility={doubleLevelVisibility}
+                refreshImages={() => setPanelGeneration(generation => generation + 1)}
+            />
+        </>
+    )
+}
diff --git a/src/app/images/collections/[id]/page.module.scss b/src/app/image-collections/dynamic/[name]/page.module.scss
similarity index 100%
rename from src/app/images/collections/[id]/page.module.scss
rename to src/app/image-collections/dynamic/[name]/page.module.scss
diff --git a/src/app/image-collections/dynamic/[name]/page.tsx b/src/app/image-collections/dynamic/[name]/page.tsx
new file mode 100644
index 000000000..f5eb70530
--- /dev/null
+++ b/src/app/image-collections/dynamic/[name]/page.tsx
@@ -0,0 +1,41 @@
+import styles from './page.module.scss'
+import DynamicCollectionPanel from './DynamicCollectionPanel'
+import DoubleLevelVisibilityDescription
+    from '@/components/Visibility/DoubleLevelVisibilityDescription/DoubleLevelVisibilityDescription'
+import {
+    readDynamicImageCollectionAction,
+    readDynamicImageCollectionDoubleLevelVisibilityAction,
+} from '@/services/images/dynamic/actions'
+import { notFound } from 'next/navigation'
+
+type PropTypes = {
+    params: Promise<{
+        name: string
+    }>
+}
+
+export default async function Collection({ params }: PropTypes) {
+    const collectionName = decodeURIComponent((await params).name)
+
+    const readCollection = await readDynamicImageCollectionAction({ params: { collectionName } })
+    if (!readCollection.success) notFound() //TODO: replace with better error page if error is UNAUTHORIZED.
+    const collection = readCollection.data
+
+    const readDoubleLevelVisibility = await readDynamicImageCollectionDoubleLevelVisibilityAction({
+        params: { collectionId: collection.id }
+    })
+    const doubleLevelVisibility = readDoubleLevelVisibility.success ? readDoubleLevelVisibility.data : null
+
+    return (
+        <div className={styles.wrapper}>
+            <h1>{collection.name}</h1>
+            <i>{collection.description}</i>
+            {
+                doubleLevelVisibility && (
+                    <DoubleLevelVisibilityDescription doubleLevelVisibility={doubleLevelVisibility} />
+                )
+            }
+            <DynamicCollectionPanel collection={collection} doubleLevelVisibility={doubleLevelVisibility} />
+        </div>
+    )
+}
diff --git a/src/app/image-collections/page.tsx b/src/app/image-collections/page.tsx
new file mode 100644
index 000000000..8b25a6507
--- /dev/null
+++ b/src/app/image-collections/page.tsx
@@ -0,0 +1,67 @@
+import MakeNewCollection from './MakeNewCollection'
+import ImageCollectionList from './ImageCollectionList'
+import ToggleShowAdminCollections from './ToggleShowAdminCollections'
+import { DynamicImageCollectionPagingProvider } from '@/contexts/paging/DynamicImageCollectionPaging'
+import CollectionCardLink from '@/components/Image/Collection/CollectionCardLink'
+import PageWrapper from '@/components/PageWrapper/PageWrapper'
+import { ServerSession } from '@/auth/session/ServerSession'
+import { dynamicImageAuth } from '@/services/images/dynamic/auth'
+import { readDynamicImageCollectionsPageAction } from '@/services/images/dynamic/actions'
+import { QueryParams } from '@/lib/queryParams/queryParams'
+import type { PageSizeDynamicImageCollection } from '@/contexts/paging/DynamicImageCollectionPaging'
+import type { SearchParamsServerSide } from '@/lib/queryParams/types'
+
+type PropTypes = SearchParamsServerSide
+
+export default async function Images({ searchParams }: PropTypes) {
+    const session = await ServerSession.fromNextAuth()
+    const canCreateCollection = dynamicImageAuth.createCollection.dynamicFields({ }).auth(session)
+    const pageSize: PageSizeDynamicImageCollection = 12
+
+    const showOnlyCollectionsSessionAdministrates =
+        QueryParams.onlyAdministratedCollections.decode(await searchParams) ?? false
+    const details = { showOnlyCollectionsSessionAdministrates }
+
+    const collectionPage = await readDynamicImageCollectionsPageAction({
+        params: {
+            paging: {
+                page: {
+                    pageSize,
+                    page: 0,
+                    cursor: null,
+                },
+                details,
+            },
+        },
+    })
+
+    if (!collectionPage.success) {
+        throw collectionPage.error ? collectionPage.error[0].message : new Error('Unknown error')
+    }
+
+    const collections = collectionPage.data
+
+    return (
+        <PageWrapper title="Fotogalleri" headerItem={canCreateCollection.authorized && <MakeNewCollection />}>
+            <DynamicImageCollectionPagingProvider
+                startPage={{
+                    pageSize,
+                    page: 1,
+                }}
+                details={details}
+                serverRenderedData={collections}
+            >
+                <ImageCollectionList
+                    toggle={
+                        <ToggleShowAdminCollections
+                            showOnlyCollectionsSessionAdministrates={showOnlyCollectionsSessionAdministrates}
+                        />
+                    }
+                    serverRendered={collections.map(collection => (
+                        <CollectionCardLink key={collection.id} collection={collection} />
+                    ))}
+                />
+            </DynamicImageCollectionPagingProvider>
+        </PageWrapper>
+    )
+}
diff --git a/src/app/image-collections/special/[specialName]/SpecialCollectionPanel.tsx b/src/app/image-collections/special/[specialName]/SpecialCollectionPanel.tsx
new file mode 100644
index 000000000..0b2dfa262
--- /dev/null
+++ b/src/app/image-collections/special/[specialName]/SpecialCollectionPanel.tsx
@@ -0,0 +1,34 @@
+'use client'
+import ImagePanel from '@/components/Image/ImagePanel/ImagePanel'
+import { specialImagePanels } from '@/services/images/specialPanels/constants'
+import { useCallback } from 'react'
+import type { ImagePanelCursor } from '@/components/Image/ImagePanel/ImagePanel'
+import type { Page } from '@/lib/paging/types'
+import type { SpecialCollection } from '@/prisma-generated-pn-types'
+
+const pageSize = 30
+
+type PropTypes = {
+    special: SpecialCollection,
+}
+
+/**
+ * The client bridge between the server rendered special collection page and the ImagePanel: binds
+ * the special collection into its own service's pager with a stable identity. Special collections
+ * are browsed only - no selection and no administration here.
+ */
+export default function SpecialCollectionPanel({ special }: PropTypes) {
+    const readPageOfImagesInCollectionAction = useCallback(
+        (page: Page<typeof pageSize, ImagePanelCursor>) =>
+            specialImagePanels[special].readPageOfImagesInCollectionAction({ params: { paging: { page } } }),
+        [special]
+    )
+
+    return (
+        <ImagePanel
+            readPageOfImagesInCollectionAction={readPageOfImagesInCollectionAction}
+            pageSize={pageSize}
+            withImageDisplay
+        />
+    )
+}
diff --git a/src/app/image-collections/special/[specialName]/page.module.scss b/src/app/image-collections/special/[specialName]/page.module.scss
new file mode 100644
index 000000000..02c2545d5
--- /dev/null
+++ b/src/app/image-collections/special/[specialName]/page.module.scss
@@ -0,0 +1,8 @@
+@use '@/styles/ohma';
+
+.wrapper {
+    padding: 2em ohma.$minimalPagePadding;
+    > h1 {
+        font-size: ohma.$fonts-xxl;
+    }
+}
diff --git a/src/app/image-collections/special/[specialName]/page.tsx b/src/app/image-collections/special/[specialName]/page.tsx
new file mode 100644
index 000000000..23c34f5b3
--- /dev/null
+++ b/src/app/image-collections/special/[specialName]/page.tsx
@@ -0,0 +1,31 @@
+import styles from './page.module.scss'
+import SpecialCollectionPanel from './SpecialCollectionPanel'
+import { specialImagePanels } from '@/services/images/specialPanels/constants'
+import { unwrapActionReturn } from '@/app/redirectToErrorPage'
+import { notFound } from 'next/navigation'
+import type { SpecialCollection } from '@/prisma-generated-pn-types'
+
+type PropTypes = {
+    params: Promise<{
+        specialName: string
+    }>
+}
+
+const isSpecialCollection = (value: string): value is SpecialCollection => value in specialImagePanels
+
+export default async function SpecialImageCollection({ params }: PropTypes) {
+    const specialName = decodeURIComponent((await params).specialName)
+    if (!isSpecialCollection(specialName)) notFound()
+
+    const collection = unwrapActionReturn(await specialImagePanels[specialName].readCollectionAction())
+
+    return (
+        <div className={styles.wrapper}>
+            <h1>{collection.name}</h1>
+            <i>{collection.description}</i>
+            <main>
+                <SpecialCollectionPanel special={specialName} />
+            </main>
+        </div>
+    )
+}
diff --git a/src/app/images/MakeNewCollection.tsx b/src/app/images/MakeNewCollection.tsx
deleted file mode 100644
index fa85c962f..000000000
--- a/src/app/images/MakeNewCollection.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-import styles from './MakeNewCollection.module.scss'
-import Form from '@/components/Form/Form'
-import PopUp from '@/components/PopUp/PopUp'
-import TextInput from '@/components/UI/TextInput'
-import { createImageCollectionAction } from '@/services/images/collections/actions'
-import { faPlus } from '@fortawesome/free-solid-svg-icons'
-import { useRouter } from 'next/navigation'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { v4 as uuid } from 'uuid'
-import type { ImageCollection } from '@/prisma-generated-pn-types'
-
-export default function MakeNewCollection() {
-    const router = useRouter()
-    const collectionCreatedCallback = (collection?: ImageCollection) => {
-        if (collection) router.push(`/images/collections/${collection.id}`)
-        router.refresh()
-    }
-    return (
-        <PopUp popUpKey={uuid()} showButtonContent={<FontAwesomeIcon icon={faPlus} />}>
-            <div className={styles.MakeNewCollection}>
-                <Form successCallback={collectionCreatedCallback}
-                    title="Lag et album" submitText="Lag album" action={createImageCollectionAction}>
-                    <TextInput label="navn" name="name" />
-                    <TextInput label="beskrivelse" name="description" />
-                </Form>
-            </div>
-        </PopUp>
-    )
-}
diff --git a/src/app/images/collections/[id]/CollectionAdmin.tsx b/src/app/images/collections/[id]/CollectionAdmin.tsx
deleted file mode 100644
index a4d1617fd..000000000
--- a/src/app/images/collections/[id]/CollectionAdmin.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-import styles from './CollectionAdmin.module.scss'
-import CollectionAdminUpload from './CollectionAdminUpload'
-import { updateImageCollectionAction, destroyImageCollectionAction } from '@/services/images/collections/actions'
-import Form from '@/components/Form/Form'
-import TextInput from '@/components/UI/TextInput'
-import { ImagePagingContext } from '@/contexts/paging/ImagePaging'
-import ImageUploader from '@/components/Image/ImageUploader'
-import PopUp from '@/components/PopUp/PopUp'
-import useEditMode from '@/hooks/useEditMode'
-import { RequireNothing } from '@/auth/authorizer/RequireNothing'
-import Button from '@/components/UI/Button'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCog, faEye, faUpload } from '@fortawesome/free-solid-svg-icons'
-import { useRouter } from 'next/navigation'
-import { useContext, useState } from 'react'
-import type { VisibilityMatrix } from '@/services/visibility/types'
-import type { ExpandedImageCollection } from '@/services/images/collections/types'
-
-type PropTypes = {
-    collection: ExpandedImageCollection
-    visibilityAdmin: VisibilityMatrix
-    visibilityRead: VisibilityMatrix
-}
-
-export default function CollectionAdmin({ collection, visibilityAdmin, visibilityRead }: PropTypes) {
-    console.log(visibilityAdmin, visibilityRead)
-    const { id: collectionId } = collection
-    const router = useRouter()
-    const pagingContext = useContext(ImagePagingContext)
-    //TODO: Use correct authorizer.
-    const canEdit = useEditMode({
-        authorizer: RequireNothing.staticFields({}).dynamicFields({})
-    })
-    const [uploadOption, setUploadOption] = useState<'MANY' | 'ONE'>('MANY')
-    if (!canEdit) return null
-
-    const refreshImages = () => {
-        if (pagingContext && pagingContext?.startPage.pageSize > pagingContext.state.data.length) {
-            pagingContext?.refetch()
-        } else {
-            router.refresh()
-        }
-    }
-
-    return (
-        <>
-            <div className={styles.CollectionAdmin}>
-                <PopUp popUpKey="UploadImages" showButtonClass={styles.adminOption} showButtonContent={
-                    <FontAwesomeIcon icon={faUpload} />
-                }>
-                    <div className={styles.upload}>
-                        {
-                            uploadOption === 'MANY' ? (
-                                <>
-                                    <CollectionAdminUpload collectionId={collectionId} refreshImages={refreshImages} />
-                                    <Button
-                                        className={styles.toggleUploadStyle}
-                                        onClick={() => setUploadOption('ONE')}
-                                        color="secondary"
-                                    >
-                                    Last opp ett bilde
-                                    </Button>
-                                </>
-                            ) : (
-                                <>
-                                    <ImageUploader collectionId={collectionId} successCallback={refreshImages} />
-                                    <Button
-                                        className={styles.toggleUploadStyle}
-                                        onClick={() => setUploadOption('MANY')}
-                                        color="secondary"
-                                    >
-                                    Last opp mange
-                                    </Button>
-                                </>
-                            )
-                        }
-                    </div>
-                </PopUp>
-                <PopUp popUpKey="Edit" showButtonClass={styles.adminOption} showButtonContent={
-                    <FontAwesomeIcon icon={faCog} />
-                }>
-                    <Form
-                        refreshOnSuccess
-                        title="Rediger samling"
-                        submitText="oppdater"
-                        closePopUpOnSuccess="Edit"
-                        action={updateImageCollectionAction.bind(null, collectionId).bind(null, undefined)}
-                    >
-                        <TextInput
-                            defaultValue={collection.name}
-                            color="black"
-                            label="navn"
-                            name="name"
-                        />
-                        <TextInput
-                            defaultValue={collection.description || ''}
-                            color="black"
-                            label="beskrivelse"
-                            name="description"
-                        />
-                    </Form>
-                    <Form
-                        submitText="slett samling"
-                        successCallback={() => router.push('/images')}
-                        action={destroyImageCollectionAction.bind(null, collectionId)}
-                        submitColor="red"
-                        confirmation={{
-                            confirm: true,
-                            text: 'Er du sikker på at du vil slette samlingen. Dette vil også slette alle bilder i salingen.'
-                        }}
-                    />
-                </PopUp>
-                <PopUp popUpKey="Visibility" showButtonClass={styles.adminOption} showButtonContent={
-                    <FontAwesomeIcon icon={faEye} />
-                }>
-                    <div className={styles.visibility}>
-                        {/* VisibilityAdmin... */}
-                    </div>
-                </PopUp>
-            </div>
-        </>
-    )
-}
diff --git a/src/app/images/collections/[id]/page.tsx b/src/app/images/collections/[id]/page.tsx
deleted file mode 100644
index de75a2d0f..000000000
--- a/src/app/images/collections/[id]/page.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import styles from './page.module.scss'
-import CollectionAdmin from './CollectionAdmin'
-import ImageList from '@/components/Image/ImageList/ImageList'
-import { ImagePagingProvider } from '@/contexts/paging/ImagePaging'
-import ImageListImage from '@/components/Image/ImageList/ImageListImage'
-import ImageDisplayProvider from '@/contexts/ImageDisplayProvider'
-import { readImageCollectionAction } from '@/services/images/collections/actions'
-import { readImagesPageAction } from '@/services/images/actions'
-import { notFound } from 'next/navigation'
-import type { PageSizeImage } from '@/contexts/paging/ImagePaging'
-import type { VisibilityMatrix } from '@/services/visibility/types'
-
-type PropTypes = {
-    params: Promise<{
-        id: string
-    }>
-}
-
-export default async function Collection({ params }: PropTypes) {
-    const pageSize: PageSizeImage = 30
-
-    const readCollection = await readImageCollectionAction(Number((await params).id))
-    if (!readCollection.success) notFound() //TODO: replace with better error page if error is UNAUTHORIZED.
-    const collection = readCollection.data
-
-    const readImages = await readImagesPageAction.bind(null, {
-        params: {
-            paging: {
-                page: { pageSize, page: 0, cursor: null },
-                details: { collectionId: collection.id }
-            }
-        }
-    })()
-    if (!readImages.success) notFound()
-    const images = readImages.data
-
-    return (
-        <ImagePagingProvider
-            startPage={{
-                pageSize,
-                page: 1,
-            }}
-            details={{ collectionId: collection.id }}
-            serverRenderedData={images}
-        >
-            <ImageDisplayProvider>
-                <div className={styles.wrapper}>
-                    <h1>{collection.name}</h1>
-                    <i>{collection.description}</i>
-                    <main>
-                        <ImageList serverRendered={
-                            images.map(image => <ImageListImage key={image.id} image={image} />)
-                        } />
-                    </main>
-                    <CollectionAdmin
-                        visibilityAdmin={{} as VisibilityMatrix}
-                        visibilityRead={{} as VisibilityMatrix}
-                        collection={collection}
-                    />
-                </div>
-            </ImageDisplayProvider>
-        </ImagePagingProvider>
-    )
-}
diff --git a/src/app/images/page.module.scss b/src/app/images/page.module.scss
deleted file mode 100644
index ddeb11234..000000000
--- a/src/app/images/page.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-@use '@/styles/ohma';
-
-.wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    > .container {
-        display: flex;
-        flex-direction: column;
-    }
-}
-.header {
-    padding: 3*ohma.$gap;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    > button {
-        margin: ohma.$gap;
-        border: none;
-        background-color: transparent;
-        width: 30px;
-        height: 30px;
-    }
-}
-
-
diff --git a/src/app/images/page.tsx b/src/app/images/page.tsx
deleted file mode 100644
index faa571a78..000000000
--- a/src/app/images/page.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import styles from './page.module.scss'
-import MakeNewCollection from './MakeNewCollection'
-import ImageCollectionList from '@/components/Image/Collection/ImageCollectionList'
-import { ImageCollectionPagingProvider } from '@/contexts/paging/ImageCollectionPaging'
-import CollectionCard from '@/components/Image/Collection/CollectionCard'
-import { ServerSession } from '@/auth/session/ServerSession'
-import { readImageCollectionsPageAction } from '@/services/images/collections/actions'
-import type { PageSizeImageCollection } from '@/contexts/paging/ImageCollectionPaging'
-
-export default async function Images() {
-    const { user } = await ServerSession.fromNextAuth()
-
-    const isAdmin = user?.username === 'harambe' //TODO: temp
-    const pageSize: PageSizeImageCollection = 12
-
-    const collectionPage = await readImageCollectionsPageAction({
-        page: {
-            pageSize,
-            page: 0,
-            cursor: null
-        },
-        details: undefined,
-    })
-
-    if (!collectionPage.success) {
-        throw collectionPage.error ? collectionPage.error[0].message : new Error('Unknown error')
-    }
-
-    const collections = collectionPage.data
-
-    return (
-        <div className={styles.wrapper}>
-            <div className={styles.container}>
-                <ImageCollectionPagingProvider
-                    startPage={{
-                        pageSize,
-                        page: 1,
-                    }}
-                    details={undefined}
-                    serverRenderedData={collections}
-                >
-                    <span className={styles.header}>
-                        <h1>Fotogalleri</h1>
-                        {isAdmin && <MakeNewCollection />}
-                    </span>
-                    <ImageCollectionList
-                        serverRendered={collections.map(collection => (
-                            <CollectionCard key={collection.id} collection={collection} />
-                        ))}
-                    />
-                </ImageCollectionPagingProvider>
-            </div>
-        </div>
-    )
-}
diff --git a/src/app/interest-groups/InterestGroup.module.scss b/src/app/interest-groups/InterestGroup.module.scss
index 22d9f8546..6c8d73127 100644
--- a/src/app/interest-groups/InterestGroup.module.scss
+++ b/src/app/interest-groups/InterestGroup.module.scss
@@ -1,16 +1,20 @@
 @use '@/styles/ohma';
 
+// Its own island: a surface-base panel, matching LoggedInSection on the
+// frontpage, so the page background shows between groups.
 .interestGroup {
-    margin-top: 2rem;
-    border-top: 8px solid ohma.$colors-secondary;
-    padding-top: 1rem;
-    position: relative;
-    h2 {
-        font-size: ohma.$fonts-xl;
-    }
-    .admin {
-        position: absolute;
-        top: 1em;
-        right: 1em;
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+    padding: calc(2 * #{ohma.$gap});
+
+    .title {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: calc(2 * #{ohma.$gap});
+
+        h2 {
+            font-size: ohma.$fonts-xl;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/app/interest-groups/InterestGroup.tsx b/src/app/interest-groups/InterestGroup.tsx
index 448105250..5020fc2c0 100644
--- a/src/app/interest-groups/InterestGroup.tsx
+++ b/src/app/interest-groups/InterestGroup.tsx
@@ -1,11 +1,7 @@
 import styles from './InterestGroup.module.scss'
-import Form from '@/components/Form/Form'
-import TextInput from '@/components/UI/TextInput'
+import InterestGroupSettings from './InterestGroupSettings'
 import ArticleSection from '@/components/Cms/ArticleSection/ArticleSection'
-import { SettingsHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
 import {
-    updateInterestGroupAction,
-    destroyInterestGroupAction,
     updateInterestGroupArticleSectionAction,
     addPartToInterestGroupArticleSectionAction,
     removePartFromInterestGroupArticleSectionAction,
@@ -30,58 +26,18 @@ export default function InterestGroup({ interestGroup, session }: PropTypes) {
         groupId: interestGroup.groupId
     }).auth(session).toJsObject()
 
-    const popUpKey = `Update interest group ${interestGroup.name}`
-
     const cmsArticleActionConfig = { implementationParams: { interestGroupId: interestGroup.id } }
 
     return (
         <div className={styles.interestGroup}>
-            <h2>{interestGroup.name}</h2>
-            <div className={styles.admin}>
-                {
-                    canUpdate.authorized || canDestroy.authorized ? (
-                        <SettingsHeaderItemPopUp popUpKey={popUpKey}>
-                            {
-                                canUpdate.authorized && (
-                                    <>
-                                        <h2>Oppdater interessegruppe</h2>
-                                        <Form
-                                            refreshOnSuccess
-                                            closePopUpOnSuccess={popUpKey}
-                                            action={
-                                                updateInterestGroupAction.bind(null, ({ params: { id: interestGroup.id } }))
-                                            }
-                                            submitText="Endre"
-                                        >
-                                            <TextInput
-                                                defaultValue={interestGroup.name}
-                                                name="name"
-                                                label="Navn"
-                                            />
-                                        </Form>
-                                    </>
-                                )
-                            }
-                            {
-                                canDestroy.authorized && (
-                                    <Form
-                                        refreshOnSuccess
-                                        closePopUpOnSuccess={popUpKey}
-                                        action={
-                                            destroyInterestGroupAction.bind(null, ({ params: { id: interestGroup.id } }))
-                                        }
-                                        submitText="Slett"
-                                        submitColor="red"
-                                        confirmation={{
-                                            confirm: true,
-                                            text: `Er du sikker på at du vil slette ${interestGroup.name}?`
-                                        }}
-                                    />
-                                )
-                            }
-                        </SettingsHeaderItemPopUp>
-                    ) : <></>
-                }
+            <div className={styles.title}>
+                <h2>{interestGroup.name}</h2>
+                <InterestGroupSettings
+                    interestGroupId={interestGroup.id}
+                    interestGroupName={interestGroup.name}
+                    canUpdate={canUpdate.toJsObject()}
+                    canDestroy={canDestroy.toJsObject()}
+                />
             </div>
             <ArticleSection
                 canEdit={canEditArticleSection}
diff --git a/src/app/interest-groups/InterestGroupSettings.tsx b/src/app/interest-groups/InterestGroupSettings.tsx
new file mode 100644
index 000000000..1f034c6a1
--- /dev/null
+++ b/src/app/interest-groups/InterestGroupSettings.tsx
@@ -0,0 +1,71 @@
+'use client'
+import Form from '@/components/Form/Form'
+import TextInput from '@/components/UI/TextInput'
+import { SettingsHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
+import useEditMode from '@/hooks/useEditMode'
+import { updateInterestGroupAction, destroyInterestGroupAction } from '@/services/groups/interestGroups/actions'
+import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
+
+type PropTypes = {
+    interestGroupId: number
+    interestGroupName: string
+    canUpdate: AuthResultTypeAny
+    canDestroy: AuthResultTypeAny
+}
+
+/**
+ * Same gate as the CMS editors: only surfaces once edit mode is on, instead
+ * of an always-visible settings icon.
+ */
+export default function InterestGroupSettings({
+    interestGroupId,
+    interestGroupName,
+    canUpdate,
+    canDestroy,
+}: PropTypes) {
+    const editableUpdate = useEditMode({ authResult: canUpdate })
+    const editableDestroy = useEditMode({ authResult: canDestroy })
+
+    if (!editableUpdate && !editableDestroy) return null
+
+    const popUpKey = `Update interest group ${interestGroupName}`
+
+    return (
+        <SettingsHeaderItemPopUp scale={40} popUpKey={popUpKey}>
+            {
+                editableUpdate && (
+                    <>
+                        <h2>Oppdater interessegruppe</h2>
+                        <Form
+                            refreshOnSuccess
+                            closePopUpOnSuccess={popUpKey}
+                            action={updateInterestGroupAction.bind(null, { params: { id: interestGroupId } })}
+                            submitText="Endre"
+                        >
+                            <TextInput
+                                defaultValue={interestGroupName}
+                                name="name"
+                                label="Navn"
+                            />
+                        </Form>
+                    </>
+                )
+            }
+            {
+                editableDestroy && (
+                    <Form
+                        refreshOnSuccess
+                        closePopUpOnSuccess={popUpKey}
+                        action={destroyInterestGroupAction.bind(null, { params: { id: interestGroupId } })}
+                        submitText="Slett"
+                        submitColor="red"
+                        confirmation={{
+                            confirm: true,
+                            text: `Er du sikker på at du vil slette ${interestGroupName}?`
+                        }}
+                    />
+                )
+            }
+        </SettingsHeaderItemPopUp>
+    )
+}
diff --git a/src/app/interest-groups/page.module.scss b/src/app/interest-groups/page.module.scss
new file mode 100644
index 000000000..1b66afeea
--- /dev/null
+++ b/src/app/interest-groups/page.module.scss
@@ -0,0 +1,18 @@
+@use '@/styles/ohma';
+
+// The intro text is an island too (see InterestGroup), so it doesn't float
+// directly on the page background above the groups.
+.generalInfo {
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+    padding: calc(2 * #{ohma.$gap});
+}
+
+// Each interest group is its own island (see InterestGroup), stacked with a
+// one-gap-step separation so the page background shows between them.
+.islands {
+    display: flex;
+    flex-direction: column;
+    gap: ohma.$gap;
+    margin-top: ohma.$gap;
+}
diff --git a/src/app/interest-groups/page.tsx b/src/app/interest-groups/page.tsx
index 5df738f33..8b09c0c0b 100644
--- a/src/app/interest-groups/page.tsx
+++ b/src/app/interest-groups/page.tsx
@@ -1,3 +1,4 @@
+import styles from './page.module.scss'
 import CreateInterestGroupForm from './CreateInterestGroupForm'
 import InterestGroup from './InterestGroup'
 import SpecialCmsParagraph from '@/cms/CmsParagraph/SpecialCmsParagraph'
@@ -25,26 +26,29 @@ export default async function InterestGroups() {
     ).toJsObject()
 
     return (
-        <PageWrapper title="Interessegrupper" headerItem={
-            canCreate.authorized && (
-                <AddHeaderItemPopUp popUpKey="Create interest group">
-                    <CreateInterestGroupForm />
-                </AddHeaderItemPopUp>
-            )
-        }>
-            <SpecialCmsParagraph
-                canEdit={canEditGeneralInfo}
-                special="INTEREST_GROUP_GENERAL_INFO"
-                readSpecialCmsParagraphAction={readSpecialCmsParagraphGeneralInfoAction}
-                updateCmsParagraphAction={updateSpecialCmsParagraphContentGeneralInfoAction}
-            />
-            <main>
-                {
-                    interestGroups.map(interestGroup => (
-                        <InterestGroup session={session} key={interestGroup.id} interestGroup={interestGroup} />
-                    ))
-                }
-            </main>
+        <PageWrapper transparent title="Interessegrupper">
+            <div className={styles.content}>
+                <div className={styles.generalInfo}>
+                    {canCreate.authorized && (
+                        <AddHeaderItemPopUp popUpKey="Create interest group">
+                            <CreateInterestGroupForm/>
+                        </AddHeaderItemPopUp>
+                    )}
+                    <SpecialCmsParagraph
+                        canEdit={canEditGeneralInfo}
+                        special="INTEREST_GROUP_GENERAL_INFO"
+                        readSpecialCmsParagraphAction={readSpecialCmsParagraphGeneralInfoAction}
+                        updateCmsParagraphAction={updateSpecialCmsParagraphContentGeneralInfoAction}
+                    />
+                </div>
+                <main className={styles.islands}>
+                    {
+                        interestGroups.map(interestGroup => (
+                            <InterestGroup session={session} key={interestGroup.id} interestGroup={interestGroup} />
+                        ))
+                    }
+                </main>
+            </div>
         </PageWrapper>
     )
 }
diff --git a/src/app/layout.module.scss b/src/app/layout.module.scss
index 4231f0efa..6de96a67b 100644
--- a/src/app/layout.module.scss
+++ b/src/app/layout.module.scss
@@ -1,35 +1,55 @@
 @use "@/styles/ohma";
 
 .body {
-    background-color: ohma.$colors-body-background;
+    background:
+        linear-gradient(125deg, color-mix(in srgb, ohma.$colors-accent-blue 30%, transparent) 0%, color-mix(in srgb, ohma.$colors-surface-base 20%, transparent) 70%),
+        ohma.$colors-surface-raised;
     color: ohma.$colors-text;
 }
 
 .wrapper {
-    display: flex;
-    flex-direction: column;
-    min-height: calc(100vh - ohma.$nav-height);
-    margin-top: ohma.$nav-height;
+    display: grid;
+    grid-template-columns: ohma.$nav-height 1fr;
+    grid-template-rows: ohma.$nav-height 1fr ohma.$nav-height;
+    gap: ohma.$gap;
+    padding: ohma.$gap;
+    height: 100dvh;
+    max-width: 2560px;
+    margin: 0 auto;
+    grid-template-areas:
+        "navBar navBar"
+        "sideBar content"
+        "sideBar content";
+    transition: grid-template-columns ohma.$transitionTime ease;
+
+    @media (min-width: calc(#{ohma.$mobileBreakpoint} + 1px)) {
+        &:has(.sideBar [data-expanded='true']) {
+            grid-template-columns: 220px 1fr;
+        }
+    }
 }
 
 .navBar {
+    grid-area: navBar;
+    grid-column: 1 / -1;
     height: ohma.$nav-height;
     z-index: 3;
-    position: fixed;
-    top: 0;
+    border-radius: ohma.$rounding;
+}
+
+.sideBar {
+    grid-area: sideBar;
+    height: 100%;
     width: 100%;
-    background-color: ohma.$colors-secondary;
-} 
+    z-index: 3;
+}
 
 .content {
-    flex: 1 0 auto;
-    max-width: 100vw;
-    position: relative;
-    width: 100%;
+    grid-area: content;
     display: flex;
     flex-direction: column;
-    overflow: visible;
-    min-height: calc(100dvh - ohma.$nav-height);
+    overflow: auto;
+    border-radius: ohma.$rounding;
 }
 
 .footer {
@@ -39,24 +59,32 @@
 }
 
 .mobileNavBar {
-    width: 100%;
-    position: sticky;
-    bottom: 0;
     display: none;
     z-index: 3;
-    height: ohma.$nav-height;
+    border-radius: ohma.$rounding;
+    overflow: hidden;
 }
 
 @media (max-width: ohma.$mobileBreakpoint) {
-    .mobileNavBar {
-        display: block;
-    }
     .wrapper {
-        margin-top: 0;
-        min-height: 100vh;
+        grid-template-columns: 1fr;
+        grid-template-rows: ohma.$nav-height 1fr ohma.$nav-height;
+        grid-template-areas:
+            "navBar"
+            "content"
+            "mobileNavBar";
     }
-    .navBar {
+
+    .sideBar {
         display: none;
     }
+
+    .mobileNavBar {
+        display: block;
+        grid-area: mobileNavBar;
+        height: ohma.$nav-height;
+        width: 100%;
+    }
 }
 
+
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2fb96f7a1..10e467561 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,24 +1,26 @@
 import styles from './layout.module.scss'
+import { unwrapActionReturn } from './redirectToErrorPage'
 import { SessionProvider } from '@/auth/session/useSession'
 import MobileNavBar from '@/components/NavBar/MobileNavBar'
-import NavBar from '@/components/NavBar/NavBar'
-import Footer from '@/components/Footer/Footer'
 import { authOptions } from '@/auth/nextAuth/authOptions'
 import EditModeProvider from '@/contexts/EditMode'
 import PopUpProvider from '@/contexts/PopUp'
-import DefaultPermissionsProvider from '@/contexts/DefaultPermissions'
+import ClientDataProvider from '@/contexts/ClientData'
+import { PageTitleProvider } from '@/contexts/PageTitle'
 import { readDefaultPermissionsAction } from '@/services/permissions/actions'
+import { readAllStandardImagesAction } from '@/services/images/standard/actions'
+import { readUserProfileAction } from '@/services/users/actions'
+import { ServerSession } from '@/auth/session/ServerSession'
+import ThemeEnabler from '@/UI/ThemeEnabler'
+import DesktopSideBar from '@/components/NavBar/DesktopSideBar'
 import { Inter } from 'next/font/google'
 import '@/styles/globals.scss'
 import { config } from '@fortawesome/fontawesome-svg-core'
 import '@fortawesome/fontawesome-svg-core/styles.css'
 import { getServerSession } from 'next-auth'
 import type { ReactNode } from 'react'
-import { readUserProfileAction } from '@/services/users/actions'
-import { unwrapActionReturn } from './redirectToErrorPage'
-import { frontpageAuth } from '@/services/frontpage/auth'
-import { ServerSession } from '@/auth/session/ServerSession'
 import type { Metadata } from 'next'
+import NavBar from '@/components/NavBar/NavBar'
 
 config.autoAddCss = false
 
@@ -38,40 +40,51 @@ type PropTypes = {
 }
 
 export default async function RootLayout({ children }: PropTypes) {
-    const session = await getServerSession(authOptions)
-    const defaultPermissionsRes = await readDefaultPermissionsAction()
-    const defaultPermissions = defaultPermissionsRes.success ? defaultPermissionsRes.data : []
-    const profile = session?.user ?
-        unwrapActionReturn(await readUserProfileAction({ params: { username: session.user.username } })) : null
+    const nextAuthSession = await getServerSession(authOptions)
+    const serverSession = await ServerSession.fromNextAuth()
 
-    const canEditSpecialCmsImage = frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
-        await ServerSession.fromNextAuth()
-    ).toJsObject()
+    const defaultPermissionsRes = await readDefaultPermissionsAction()
+    const defaultPermissions = defaultPermissionsRes.success ? defaultPermissionsRes.data : undefined
+    const standardImagesRes = await readAllStandardImagesAction()
+    const standardImages = standardImagesRes.success ? standardImagesRes.data : undefined
+    const profile = serverSession?.user ?
+        unwrapActionReturn(await readUserProfileAction({ params: { username: serverSession.user.username } })) : null
 
     return (
         <html lang="en">
             <body className={`${inter.className} ${styles.body}`}>
-                <SessionProvider session={session}>
-                    <DefaultPermissionsProvider defaultPermissions={defaultPermissions}>
+                <ThemeEnabler></ThemeEnabler>
+                <SessionProvider session={nextAuthSession}>
+                    <ClientDataProvider
+                        session={serverSession.toJsObject()}
+                        defaultPermissions={defaultPermissions}
+                        standardImages={standardImages}
+                    >
                         <EditModeProvider>
                             <PopUpProvider>
-                                <div className={styles.wrapper}>
-                                    <div className={styles.navBar}>
-                                        <NavBar profile={profile} canEditSpecialCmsImage={canEditSpecialCmsImage} />
-                                    </div>
-                                    <div className={styles.content}>
-                                        {children}
-                                    </div>
-                                    <div className={styles.footer}>
-                                        <Footer canEditSpecialCmsImage={canEditSpecialCmsImage} />
-                                    </div>
-                                    <div className={styles.mobileNavBar}>
-                                        <MobileNavBar profile={profile} canEditSpecialCmsImage={canEditSpecialCmsImage} />
+                                <PageTitleProvider>
+                                    <div className={styles.wrapper}>
+                                        <div className={styles.navBar}>
+                                            <NavBar
+                                                profile={profile}
+                                            />
+                                        </div>
+                                        <aside className={styles.sideBar}>
+                                            <DesktopSideBar profile={profile} />
+                                        </aside>
+                                        <main className={styles.content}>
+                                            {children}
+                                        </main>
+                                        <div className={styles.mobileNavBar}>
+                                            <MobileNavBar
+                                                profile={profile}
+                                            />
+                                        </div>
                                     </div>
-                                </div>
+                                </PageTitleProvider>
                             </PopUpProvider>
                         </EditModeProvider>
-                    </DefaultPermissionsProvider>
+                    </ClientDataProvider>
                 </SessionProvider>
             </body>
         </html>
diff --git a/src/app/loading.module.scss b/src/app/loading.module.scss
index bfc124dc1..85f772301 100644
--- a/src/app/loading.module.scss
+++ b/src/app/loading.module.scss
@@ -1,11 +1,11 @@
 @use '@/styles/ohma';
 
 .wrapper {
+    background: ohma.$colors-surface-base;
     display: grid;
     place-items: center;
     place-content: center;
+    flex: 1;
     min-height: 100%;
-    width: 100vw;
-    position: absolute;
 }
 
diff --git a/src/app/loading.tsx b/src/app/loading.tsx
index 5a1c1e1e8..2abef1b6a 100644
--- a/src/app/loading.tsx
+++ b/src/app/loading.tsx
@@ -1,13 +1,10 @@
 import styles from './loading.module.scss'
-import { ServerSession } from '@/auth/session/ServerSession'
 import Loader from '@/components/Loader/Loader'
 
-export default async function loading() {
-    const session = await ServerSession.fromNextAuth()
-
+export default function loading() {
     return (
         <div className={styles.wrapper}>
-            <Loader session={session} />
+            <Loader />
         </div>
     )
 }
diff --git a/src/app/lockers/LockerList.module.scss b/src/app/lockers/LockerList.module.scss
index 7e1ef99e9..dba985f4d 100644
--- a/src/app/lockers/LockerList.module.scss
+++ b/src/app/lockers/LockerList.module.scss
@@ -2,16 +2,16 @@
 
 
 .lockerList {
-    background-color: ohma.$colors-gray-100;
+    background-color: ohma.$colors-surface-raised;
     filter: drop-shadow(5px 15px 5px rgba(0, 0, 0, 0.3));
-    border: 1px solid ohma.$colors-gray-300;
+    border: 1px solid ohma.$colors-surface-subtle;
     border-radius: 10px;
     padding: 1em;
 }
 
 .lockerListHeader {
     display: grid;
-    border-bottom: 2px solid ohma.$colors-gray-300;
+    border-bottom: 2px solid ohma.$colors-surface-subtle;
     grid-template-columns: repeat(6, 1fr);
     
     @media (max-width: 600px) {
diff --git a/src/app/lockers/[id]/page.module.scss b/src/app/lockers/[id]/page.module.scss
index 757ec8429..6add7831c 100644
--- a/src/app/lockers/[id]/page.module.scss
+++ b/src/app/lockers/[id]/page.module.scss
@@ -4,10 +4,10 @@
     margin:3em 1em;
     padding: 1em 2em;
     justify-content: center;
-    background-color: white;
+    @include ohma.layer();
     align-items: center;
     max-width: 500px;
     filter: drop-shadow(5px 15px 5px rgba(0, 0, 0, 0.3));
-    border: 1px solid ohma.$colors-gray-300;
+    border: 1px solid ohma.$colors-surface-subtle;
     border-radius: 10px;
 }
\ No newline at end of file
diff --git a/src/app/lockers/[id]/page.tsx b/src/app/lockers/[id]/page.tsx
index 26060dabc..51e1e9cd1 100644
--- a/src/app/lockers/[id]/page.tsx
+++ b/src/app/lockers/[id]/page.tsx
@@ -4,7 +4,8 @@ import CreateLockerReservationForm from './CreateLockerReservationForm'
 import UpdateLockerReservationForm from './UpdateLockerReservationForm'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import { readLockerAction } from '@/services/lockers/actions'
-import { checkGroupValidity, groupOperations, inferGroupName } from '@/services/groups/operations'
+import { assertGroupValidity, groupOperations } from '@/services/groups/operations'
+import { inferGroupName } from '@/lib/groups/inferGroupName'
 import { RequireUser } from '@/auth/authorizer/RequireUser'
 import { ServerSession } from '@/auth/session/ServerSession'
 
@@ -24,7 +25,7 @@ export default async function Locker({ params }: PropTypes) {
 
     const isReserved = locker.data.LockerReservation.length > 0
     const reservation = locker.data.LockerReservation[0]
-    const groupName = (isReserved && reservation.group) ? inferGroupName(checkGroupValidity(reservation.group)) : ''
+    const groupName = (isReserved && reservation.group) ? inferGroupName(assertGroupValidity(reservation.group)) : ''
 
     const user = RequireUser.staticFields({}).dynamicFields({}).auth(
         await ServerSession.fromNextAuth()
diff --git a/src/app/news/[nameAndId]/EditNews.module.scss b/src/app/news/[nameAndId]/EditNews.module.scss
index d7cfd193e..463728d97 100644
--- a/src/app/news/[nameAndId]/EditNews.module.scss
+++ b/src/app/news/[nameAndId]/EditNews.module.scss
@@ -3,18 +3,31 @@
 .EditNews {
     margin: .5em 3em;
     @include ohma.card;
-    background-color: ohma.$colors-secondary;
-    color: ohma.$colors-white;
+    background-color: ohma.$colors-surface-base;
+    color: ohma.$colors-text;
     display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
     .update {
-        margin-right: 1em;
         max-width: 200px;
     }
     .visibility {
-        margin-right: 1em;
         flex: 1;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1em;
+        h3 {
+            margin-bottom: .5em;
+        }
         button[type="submit"] {
-            width: 200px; 
+            width: 200px;
+        }
+    }
+    .publish {
+        max-width: 200px;
+        p {
+            margin-bottom: .5em;
+            font-style: italic;
         }
     }
 }
\ No newline at end of file
diff --git a/src/app/news/[nameAndId]/EditNews.tsx b/src/app/news/[nameAndId]/EditNews.tsx
index 0458b5241..ed12b5786 100644
--- a/src/app/news/[nameAndId]/EditNews.tsx
+++ b/src/app/news/[nameAndId]/EditNews.tsx
@@ -5,16 +5,26 @@ import TextInput from '@/components/UI/TextInput'
 import useEditMode from '@/hooks/useEditMode'
 import Textarea from '@/components/UI/Textarea'
 import DateInput from '@/components/UI/DateInput'
-import { destroyNewsAction, updateNewsAction } from '@/services/news/actions'
+import VisibilityAdmin from '@/components/Visibility/VisibilityAdmin/VisibilityAdmin'
+import {
+    destroyNewsAction,
+    setNewsPublishedAction,
+    updateNewsAction,
+    updateNewsAdminLevelVisibilityAction,
+    updateNewsRegularLevelVisibilityAction,
+} from '@/services/news/actions'
 import { formatVevenUri } from '@/lib/urlEncoding'
 import { newsAuth } from '@/services/news/auth'
 import { configureAction } from '@/services/configureAction'
+import { EMPTY_VISIBILITY } from '@/auth/visibility/emptyVisibility'
 import { useRouter } from 'next/navigation'
+import type { DoubleLevelVisibilityMatrix } from '@/services/visibility/types'
 import type { ExpandedNewsArticle } from '@/services/news/types'
 import type { ReactNode } from 'react'
 
 type PropTypes = {
     news: ExpandedNewsArticle
+    doubleLevelVisibility: DoubleLevelVisibilityMatrix | null
     children?: ReactNode
 }
 
@@ -22,70 +32,149 @@ type PropTypes = {
  * This component renders children if editmode is off and news admin tools if editmode is on
  * pass it not: id of article to make sure not to display that article
  */
-export default function EditNews({ news, children }: PropTypes) {
+export default function EditNews({ news, doubleLevelVisibility, children }: PropTypes) {
     const { refresh, push } = useRouter()
-    //TODO: chack visibility
-    const canEdit = useEditMode({
-        authorizer: newsAuth.update.dynamicFields({})
+
+    const doubleLevelMatrix = doubleLevelVisibility ?? EMPTY_VISIBILITY
+    const canUpdate = useEditMode({
+        authorizer: newsAuth.update.dynamicFields({ doubleLevelMatrix })
+    })
+    const canDestroy = useEditMode({
+        authorizer: newsAuth.destroy.dynamicFields({ doubleLevelMatrix })
+    })
+    const canUpdateRegularVisibility = useEditMode({
+        authorizer: newsAuth.updateRegularLevel.dynamicFields({ doubleLevelMatrix })
+    })
+    const canUpdateAdminVisibility = useEditMode({
+        authorizer: newsAuth.updateAdminLevel.dynamicFields({ doubleLevelMatrix })
+    })
+    const canSetPublished = useEditMode({
+        authorizer: newsAuth.setPublished.dynamicFields({ doubleLevelMatrix })
     })
-    if (!canEdit) return children
 
-    // TODO: VISINILITY ADMIN
+    // The editors are bound to doubleLevelVisibility rather than doubleLevelMatrix on purpose:
+    // saving the fallback would overwrite the real requirements with fabricated ones.
+    const canEditVisibility = doubleLevelVisibility !== null &&
+        (canUpdateRegularVisibility || canUpdateAdminVisibility)
+    if (!canUpdate && !canDestroy && !canEditVisibility && !canSetPublished) return children
 
     const updateAction = configureAction(
         updateNewsAction,
         { params: { id: news.id } }
     )
 
+    const setPublishedAction = configureAction(
+        setNewsPublishedAction,
+        { params: { id: news.id } }
+    )
+
     return (
         <div className={styles.EditNews}>
             <div className={styles.update}>
-                <Form
-                    action={updateAction}
-                    navigateOnSuccess={(data) => `/news/${data ? formatVevenUri(data.articleName, data.id) : ''}`}
-                    submitText="oppdater"
-                >
-                    <TextInput
-                        color="white"
-                        defaultValue={news.articleName}
-                        label="navn"
-                        name="name"
-                    />
-                    <DateInput
-                        color="white"
-                        defaultValue={news.endDateTime}
-                        label="sluttdato"
-                        name="endDateTime"
-                    />
-                    <Textarea defaultValue={news.description || ''} label="beskrivelse" name="description" />
-                </Form>
-                <Form
-                    action={
-                        configureAction(
-                            destroyNewsAction,
-                            { params: { id: news.id } }
-                        )
-                    }
-                    successCallback={() => {
-                        push('/news')
-                        refresh()
-                    }}
-                    submitText="slett nyhet"
-                    confirmation={{
-                        confirm: true,
-                        text: 'Er du sikker på at du vil slette denne nyheten? Dette kan ikke angres.'
-                    }}
-                    submitColor="red"
-                >
-                </Form>
-            </div>
-            <div className={styles.visibility}>
-                Her kommer visibility settings
-
+                {
+                    canUpdate && (
+                        <Form
+                            action={updateAction}
+                            navigateOnSuccess={(data) => `/news/${data ? formatVevenUri(data.articleName, data.id) : ''}`}
+                            submitText="oppdater"
+                        >
+                            <TextInput
+                                color="white"
+                                defaultValue={news.articleName}
+                                label="navn"
+                                name="name"
+                            />
+                            <DateInput
+                                color="white"
+                                defaultValue={news.endDateTime}
+                                label="sluttdato"
+                                name="endDateTime"
+                            />
+                            <Textarea defaultValue={news.description || ''} label="beskrivelse" name="description" />
+                        </Form>
+                    )
+                }
+                {
+                    canDestroy && (
+                        <Form
+                            action={
+                                configureAction(
+                                    destroyNewsAction,
+                                    { params: { id: news.id } }
+                                )
+                            }
+                            successCallback={() => {
+                                push('/news')
+                                refresh()
+                            }}
+                            submitText="slett nyhet"
+                            confirmation={{
+                                confirm: true,
+                                text: 'Er du sikker på at du vil slette denne nyheten? Dette kan ikke angres.'
+                            }}
+                            submitColor="red"
+                        >
+                        </Form>
+                    )
+                }
             </div>
+            {
+                doubleLevelVisibility && (
+                    <div className={styles.visibility}>
+                        {
+                            canUpdateRegularVisibility && (
+                                <div>
+                                    <h3>Vanlig visning</h3>
+                                    <VisibilityAdmin
+                                        visibility={doubleLevelVisibility.regularLevel}
+                                        visibilityId={news.visibilityRegularId}
+                                        updateVisibilityAction={configureAction(
+                                            updateNewsRegularLevelVisibilityAction,
+                                            { implementationParams: { id: news.id } }
+                                        )}
+                                    />
+                                </div>
+                            )
+                        }
+                        {
+                            canUpdateAdminVisibility && (
+                                <div>
+                                    <h3>Adminvisning</h3>
+                                    <VisibilityAdmin
+                                        visibility={doubleLevelVisibility.adminLevel}
+                                        visibilityId={news.visibilityAdminId}
+                                        updateVisibilityAction={configureAction(
+                                            updateNewsAdminLevelVisibilityAction,
+                                            { implementationParams: { id: news.id } }
+                                        )}
+                                    />
+                                </div>
+                            )
+                        }
+                    </div>
+                )
+            }
 
             <div className={styles.publish}>
-
+                <p>{news.published ? 'Publisert' : 'Ikke publisert'}</p>
+                {
+                    canSetPublished && (
+                        <Form
+                            action={() => setPublishedAction({ data: { published: !news.published } })}
+                            refreshOnSuccess
+                            submitText={news.published ? 'avpubliser' : 'publiser'}
+                            submitColor={news.published ? 'red' : 'green'}
+                            confirmation={{
+                                confirm: true,
+                                text: news.published
+                                    ? 'Er du sikker på at du vil avpublisere denne nyheten? ' +
+                                        'Den vil da bare være synlig for de som kan administrere den.'
+                                    : 'Er du sikker på at du vil publisere denne nyheten? ' +
+                                        'Det sender ut et varsel til alle som kan se den.'
+                            }}
+                        />
+                    )
+                }
             </div>
         </div>
     )
diff --git a/src/app/news/[nameAndId]/page.tsx b/src/app/news/[nameAndId]/page.tsx
index 2d904f43b..fea13e4f9 100644
--- a/src/app/news/[nameAndId]/page.tsx
+++ b/src/app/news/[nameAndId]/page.tsx
@@ -4,6 +4,7 @@ import CurrentNews from '@/app/news/CurrentNews'
 import Article from '@/cms/Article/Article'
 import {
     readNewsAction,
+    readNewsDoubleLevelVisibilityAction,
     updateNewsArticleAction,
     updateNewsArticleAddSectionAction,
     updateNewsArticleCmsImageAction,
@@ -19,6 +20,7 @@ import SlideInOnView from '@/components/SlideInOnView/SlideInOnView'
 import { decodeVevenUriHandleError } from '@/lib/urlEncoding'
 import { configureAction } from '@/services/configureAction'
 import { newsAuth } from '@/services/news/auth'
+import { EMPTY_VISIBILITY } from '@/auth/visibility/emptyVisibility'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { notFound } from 'next/navigation'
 
@@ -34,7 +36,12 @@ export default async function NewsArticle({ params }: PropTypes) {
     if (!res.success) notFound()
     const news = res.data
 
-    const canEdit = newsAuth.updateArticle.dynamicFields({}).auth(
+    const readDoubleLevelVisibility = await readNewsDoubleLevelVisibilityAction({ params: { id: news.id } })
+    const doubleLevelVisibility = readDoubleLevelVisibility.success ? readDoubleLevelVisibility.data : null
+
+    const canEdit = newsAuth.updateArticle.dynamicFields({
+        doubleLevelMatrix: doubleLevelVisibility ?? EMPTY_VISIBILITY
+    }).auth(
         await ServerSession.fromNextAuth()
     ).toJsObject()
     return (
@@ -88,7 +95,7 @@ export default async function NewsArticle({ params }: PropTypes) {
                 }}
             />
             <SlideInOnView>
-                <EditNews news={news}>
+                <EditNews news={news} doubleLevelVisibility={doubleLevelVisibility}>
                     <div className={styles.moreNews}>
                         <h1>Flere nyheter</h1>
                         <div>
diff --git a/src/app/news/archive/page.module.scss b/src/app/news/archive/page.module.scss
index e69de29bb..7a019c602 100644
--- a/src/app/news/archive/page.module.scss
+++ b/src/app/news/archive/page.module.scss
@@ -0,0 +1,9 @@
+@use '@/styles/ohma';
+
+.backLink {
+    color: ohma.$colors-text;
+    svg {
+        width: 30px;
+        height: 30px;
+    }
+}
diff --git a/src/app/news/archive/page.tsx b/src/app/news/archive/page.tsx
index 3c76917a0..0157346e9 100644
--- a/src/app/news/archive/page.tsx
+++ b/src/app/news/archive/page.tsx
@@ -1,8 +1,12 @@
+import styles from './page.module.scss'
 import OldNewsList from './OldNewsList'
 import NewsCard from '@/app/news/NewsCard'
 import { OldNewsPagingProvider } from '@/contexts/paging/OldNewsPaging'
 import { readOldNewsPageAction } from '@/services/news/actions'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
+import { faArrowLeft } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import Link from 'next/link'
 import type { PageSizeOldNews } from '@/contexts/paging/OldNewsPaging'
 
 export default async function NewsArchive() {
@@ -23,7 +27,11 @@ export default async function NewsArchive() {
     const serverRendered = res.data
 
     return (
-        <PageWrapper title="Nyhetsarkiv">
+        <PageWrapper title="Nyhetsarkiv" headerItem={
+            <Link href="/news" className={styles.backLink}>
+                <FontAwesomeIcon icon={faArrowLeft} />
+            </Link>
+        }>
             <OldNewsPagingProvider
                 startPage={{
                     page: 1,
diff --git a/src/app/news/page.module.scss b/src/app/news/page.module.scss
index bd110c9cc..b5dd0380a 100644
--- a/src/app/news/page.module.scss
+++ b/src/app/news/page.module.scss
@@ -5,13 +5,7 @@
 }
 
 .head {
-    display: grid;
-    grid-template-columns: 1fr auto;
+    display: flex;
+    align-items: center;
     gap: 1em;
-}
-
-.archiveBtn {
-    @include ohma.borderBtn(ohma.$colors-primary);
-    display: block;
-    margin: 0 ohma.$gap;
 }
\ No newline at end of file
diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 080fa4e59..357b75349 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -2,8 +2,8 @@ import styles from './page.module.scss'
 import AddNews from './AddNews'
 import CurrentNews from './CurrentNews'
 import { AddHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
+import ArchiveLink from '@/components/HeaderItems/ArchiveLink'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
-import Link from 'next/link'
 
 export default async function NewsArtilces() {
     //TODO: add can create news permission
@@ -13,7 +13,7 @@ export default async function NewsArtilces() {
         <PageWrapper title="Nyheter"
             headerItem={
                 <div className={styles.head}>
-                    <Link className={styles.archiveBtn} href="news/archive">Arkivet</Link>
+                    <ArchiveLink href="news/archive" />
                     {
                         canCreateNews && (
                             <AddHeaderItemPopUp popUpKey="createNewsPop">
diff --git a/src/app/not-found.module.scss b/src/app/not-found.module.scss
index a224ee052..500675db3 100644
--- a/src/app/not-found.module.scss
+++ b/src/app/not-found.module.scss
@@ -7,6 +7,8 @@
     justify-content: center;
     align-items: center;
     min-height: 50vh;
+    background-color: ohma.$colors-surface-base;
+    padding: 0 calc(2 * #{ohma.$gap});
     .info {
         display: flex;
         justify-content: center;
@@ -15,7 +17,7 @@
             color: ohma.$colors-text;
         }
         .imageContainer {
-            border-right: solid 2px ohma.$colors-secondary;
+            border-right: solid 2px ohma.$colors-surface-base;
             padding-right: 20px;
             margin-right: 20px;
         }
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 9ec5417a2..62a9a467c 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -1,27 +1,16 @@
 import styles from './not-found.module.scss'
-import { readSpecialCmsImageFrontpage, updateSpecialCmsImageFrontpage } from '@/services/frontpage/actions'
-import SpecialCmsImage from '@/components/Cms/CmsImage/SpecialCmsImage'
-import { ServerSession } from '@/auth/session/ServerSession'
-import { frontpageAuth } from '@/services/frontpage/auth'
-
-export default async function Error404() {
-    const session = await ServerSession.fromNextAuth()
+import PageTitleSetter from '@/contexts/PageTitleSetter'
+import StandardImageServer from '@/components/Image/StandardImageServer'
 
+export default function Error404() {
     return (
         <div className={styles.wrapper}>
+            <PageTitleSetter title={'Page not found'} />
             <div className={styles.info}>
                 <div className={styles.imageContainer}>
-                    <SpecialCmsImage
-                        canEdit={
-                            frontpageAuth.updateSpecialCmsImage.dynamicFields({}).auth(
-                                session
-                            ).toJsObject()
-                        }
-                        special="NOT_FOUND"
+                    <StandardImageServer
+                        standardImage="LOGO_SIMPLE"
                         width={60}
-                        //TODO: Probably call through other service see comments in frontpage operations
-                        readSpecialCmsImageAction={readSpecialCmsImageFrontpage}
-                        updateCmsImageAction={updateSpecialCmsImageFrontpage}
                     />
                 </div>
                 <h3>404 - Page not found</h3>
diff --git a/src/app/ombul/CreateOmbul.module.scss b/src/app/ombul/CreateOmbul.module.scss
index 4086f7246..27e496f93 100644
--- a/src/app/ombul/CreateOmbul.module.scss
+++ b/src/app/ombul/CreateOmbul.module.scss
@@ -5,7 +5,7 @@
     display: grid;
     grid-template-columns: 1fr 1fr;
     grid-template-rows: auto auto;
-    gap: 5*ohma.$gap;
+    gap: calc(5 * #{ohma.$gap});
     @include ohma.screenMobile {
         grid-template-columns: 1fr;
     }
@@ -22,7 +22,7 @@
     }
     .imgPreview {
         grid-column: 2 / 3;
-        margin-left: 2*ohma.$gap;
+        margin-left: calc(2 * #{ohma.$gap});
         width: 70%;
         height: 70%;
         min-width: 20vw;
diff --git a/src/app/ombul/CreateOmbul.tsx b/src/app/ombul/CreateOmbul.tsx
index c499fb968..4b200efcf 100644
--- a/src/app/ombul/CreateOmbul.tsx
+++ b/src/app/ombul/CreateOmbul.tsx
@@ -20,9 +20,7 @@ type PropTypes = {
 type PreviewKey = keyof PropTypesPreview
 
 /**
- * This component is for creating ombul issues. Since it needs to be able to choose a image
- * it must be able to consume ImageSelectionContext, so it **must** be rendered inside
- * ImageSelectionProvider.
+ * This component is for creating ombul issues.
  * @param latestOmbul - The latest ombul issue, used to set default values for year and issueNumber of next ombul
  */
 export default function CreateOmbul({ latestOmbul }: PropTypes) {
diff --git a/src/app/ombul/OmbulCover.module.scss b/src/app/ombul/OmbulCover.module.scss
index 1aa8605ff..b7aed04ad 100644
--- a/src/app/ombul/OmbulCover.module.scss
+++ b/src/app/ombul/OmbulCover.module.scss
@@ -13,7 +13,7 @@ a.OmbulCover {
     flex-direction: column;
     align-items: center;
     position: relative;
-    color: ohma.$colors-gray-900;
+    color: ohma.$colors-text;
     text-decoration: none;
     .coverImg {
         width: 100%;
@@ -21,18 +21,18 @@ a.OmbulCover {
         > *, > * > * {
             border-radius: ohma.$rounding;
             overflow: hidden;
-            width: 100% !important;
+            width: 100%;
             height: 100%;
         }
         img {
-            transition: scale 0.3s;
-            width: 100% !important;
+            transition: scale ohma.$transitionTime;
+            width: 100%;
             height: 100%;
             object-fit: cover;
             min-height: 50px;
         }
         .noCoverImage {
-            border: 3px solid ohma.$colors-gray-500;
+            border: 3px solid ohma.$colors-surface-subtle;
             aspect-ratio: 5 / 7; //aspect-ratio of sheet of paper assuemed
             display: grid;
             place-items: center;
@@ -50,7 +50,7 @@ a.OmbulCover {
         display: block;
         width: 100%;
         height: 2px;
-        background-color: ohma.$colors-gray-500;
+        background-color: ohma.$colors-surface-subtle;
         margin-bottom: ohma.$gap;
     }
     @media screen and (max-width: ohma.$mobileBreakpoint) {
diff --git a/src/app/ombul/OmbulCover.tsx b/src/app/ombul/OmbulCover.tsx
index 8a6cf1c32..4e8e56bc5 100644
--- a/src/app/ombul/OmbulCover.tsx
+++ b/src/app/ombul/OmbulCover.tsx
@@ -45,9 +45,7 @@ export default function OmbulCover(props: PropTypes) {
                 coverImage instanceof File ? (
                     placeholderCover
                 ) : (
-                    coverImage.image && (
-                        <Image width={250} image={coverImage.image} className={styles.coverImg} />
-                    )
+                    <Image width={250} image={coverImage} className={styles.coverImg} />
                 )
             }
         </div>
diff --git a/src/app/ombul/[...yearAndName]/OmbulAdmin.module.scss b/src/app/ombul/[...yearAndName]/OmbulAdmin.module.scss
index 1b56698bb..6d854d28a 100644
--- a/src/app/ombul/[...yearAndName]/OmbulAdmin.module.scss
+++ b/src/app/ombul/[...yearAndName]/OmbulAdmin.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .OmbulAdmin {
-    background-color: ohma.$colors-secondary;
+    background-color: ohma.$colors-surface-base;
     @include ohma.card();
     display: flex;
     flex-flow: row wrap;
@@ -10,15 +10,21 @@
     gap: 2em;
     h2 {
         flex: 1 1 100%;
-        color: ohma.$colors-white;
+        color: ohma.$colors-text;
     }
     .coverImage {
-        border-radius: ohma.$rounding;
-        overflow: hidden;
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-start;
+        gap: 1em;
+        > *:first-child {
+            border-radius: ohma.$rounding;
+            overflow: hidden;
+        }
     }
     > .left {
         > *:not(:last-child) {
-            border-bottom: 3px solid ohma.$colors-gray-700;
+            border-bottom: 3px solid ohma.$colors-surface-subtle;
             margin-bottom: 2em;
         }
     }
diff --git a/src/app/ombul/[...yearAndName]/OmbulAdmin.tsx b/src/app/ombul/[...yearAndName]/OmbulAdmin.tsx
index 54cb6b589..804430816 100644
--- a/src/app/ombul/[...yearAndName]/OmbulAdmin.tsx
+++ b/src/app/ombul/[...yearAndName]/OmbulAdmin.tsx
@@ -2,36 +2,43 @@
 
 import styles from './OmbulAdmin.module.scss'
 import Form from '@/components/Form/Form'
-import { updateOmbulAction, updateOmbulFileAction, destroyOmbulAction } from '@/services/ombul/actions'
+import Textarea from '@/components/UI/Textarea'
+import Image from '@/components/Image/Image'
+import ImageUploader from '@/components/Image/ImageUploader'
+import {
+    updateOmbulAction,
+    updateOmbulFileAction,
+    destroyOmbulAction,
+    updateOmbulCoverImageAction
+} from '@/services/ombul/actions'
 import NumberInput from '@/components/UI/NumberInput'
 import FileInput from '@/components/UI/FileInput'
 import useEditMode from '@/hooks/useEditMode'
+import useAuthorizer from '@/hooks/useAuthorizer'
 import { ombulAuth } from '@/services/ombul/auth'
 import { configureAction } from '@/services/configureAction'
 import { useRouter } from 'next/navigation'
-import type { ReactNode } from 'react'
 import type { ExpandedOmbul } from '@/services/ombul/types'
 
 type PropTypes = {
     ombul: ExpandedOmbul
-    children: ReactNode
 }
 
 /**
- * The admin panel for the ombul to change cover image (using cms image) anf update year, number and file.
+ * The admin panel for the ombul to change cover image and update year, number, description and file.
  * The component is only shown if editmode is enabled.
  * @param ombul - The obul (expanded) to be edited
- * @param children - The cmsimage cover. Rendered on server side.
  * @returns
  */
-export default function OmbulAdmin({
-    ombul,
-    children,
-}: PropTypes) {
+export default function OmbulAdmin({ ombul }: PropTypes) {
     const { push, refresh } = useRouter()
     const canUpdate = useEditMode({
         authorizer: ombulAuth.update.dynamicFields({})
     })
+    const canUpdateCoverAuthResult = useAuthorizer({
+        authorizer: ombulAuth.updateCoverImage.dynamicFields({})
+    })
+    const canUpdateCover = useEditMode({ authResult: canUpdateCoverAuthResult })
     const canDestroy = useEditMode({
         authorizer: ombulAuth.destroy.dynamicFields({})
     })
@@ -55,7 +62,7 @@ export default function OmbulAdmin({
         push('/ombul')
         refresh()
     }
-    if (!canUpdate && !canDestroy) return null
+    if (!canUpdate && !canDestroy && !canUpdateCover) return null
 
     return (
         <div className={styles.OmbulAdmin}>
@@ -79,6 +86,11 @@ export default function OmbulAdmin({
                                     label="Nummer"
                                     defaultValue={ombul.issueNumber}
                                 />
+                                <Textarea
+                                    name="description"
+                                    label="Beskrivelse"
+                                    defaultValue={ombul.description ?? ''}
+                                />
                             </Form>
                             <Form
                                 action={updateOmbulFileActionBind}
@@ -110,9 +122,17 @@ export default function OmbulAdmin({
             </div>
             <div className={styles.right}>
                 {
-                    canUpdate && (
+                    canUpdateCover && (
                         <div className={styles.coverImage}>
-                            {children}
+                            <Image image={ombul.coverImage} width={400} />
+                            <ImageUploader
+                                title="Endre forsidebilde"
+                                refreshOnSuccess
+                                uploadImageAction={configureAction(
+                                    updateOmbulCoverImageAction,
+                                    { params: { ombulId: ombul.id } }
+                                )}
+                            />
                         </div>
                     )
                 }
diff --git a/src/app/ombul/[...yearAndName]/page.module.scss b/src/app/ombul/[...yearAndName]/page.module.scss
index a915a5f2c..43925c789 100644
--- a/src/app/ombul/[...yearAndName]/page.module.scss
+++ b/src/app/ombul/[...yearAndName]/page.module.scss
@@ -9,13 +9,10 @@
 
     .header {
         grid-column: 1 / 3;
-        grid-row: 1 / 2; 
+        grid-row: 1 / 2;
         p {
             font-weight: ohma.$fonts-weight-s;
         }
-        .changeDescriptionButton {
-            transform: translateY(-30%);
-        }
     }
 
     .nav {
@@ -26,34 +23,23 @@
         gap: 1em;
         :is(.download, .openInBrowser) a {
             display: block;
-            @include ohma.btn(ohma.$colors-primary);
+            @include ohma.btn(ohma.$colors-accent-blue);
+        }
+        .readPdf button {
+            @include ohma.btn(ohma.$colors-accent-blue);
         }
     }
 
-    main {
+    .coverAndParagraph {
         grid-column: 1 / 4;
         grid-row: 2 / 3;
+        display: grid;
+        grid-template-columns: auto 1fr;
+        gap: ohma.$gap;
         margin: ohma.$gap 0;
-        > .embedPdf {
-            width: 100%;
-            height: 100vh;
-            iframe {
-                width: 100%;
-                height: 100%;
-            }
-            display: none;
-        }
-        .book {
-            display: block;
-            min-height: 90vh;
-        }
+
         @media screen and (max-width: ohma.$mobileBreakpoint) {
-            > .embedPdf {
-                display: block;
-            }
-            .book {
-                display: none;
-            }
+            grid-template-columns: 1fr;
         }
     }
 
@@ -61,4 +47,12 @@
         grid-column: 1 / 2;
         grid-row: 3 / 4;
     }
-}
\ No newline at end of file
+}
+
+// Rendered inside a PopUp, which teleports its children outside .wrapper - kept top-level here
+// rather than nested, since a nested selector wouldn't match once teleported.
+.book {
+    display: block;
+    width: 100%;
+    min-height: 90vh;
+}
diff --git a/src/app/ombul/[...yearAndName]/page.tsx b/src/app/ombul/[...yearAndName]/page.tsx
index 475ceb9db..db76bfe97 100644
--- a/src/app/ombul/[...yearAndName]/page.tsx
+++ b/src/app/ombul/[...yearAndName]/page.tsx
@@ -1,11 +1,11 @@
 import styles from './page.module.scss'
 import ChangeName from './ChangeName'
 import OmbulAdmin from './OmbulAdmin'
-import { readOmbulAction, updateOmbulAction, updateOmbulCmsCoverImageAction } from '@/services/ombul/actions'
+import OmbulCover from '@/app/ombul/OmbulCover'
+import { readOmbulAction, updateOmbulParagraphContentAction } from '@/services/ombul/actions'
 import PdfDocument from '@/components/PdfDocument/PdfDocument'
-import SlideInOnView from '@/components/SlideInOnView/SlideInOnView'
-import EditableTextField from '@/components/EditableTextField/EditableTextField'
-import CmsImage from '@/components/Cms/CmsImage/CmsImage'
+import CmsParagraph from '@/components/Cms/CmsParagraph/CmsParagraph'
+import PopUp from '@/components/PopUp/PopUp'
 import { ServerSession } from '@/auth/session/ServerSession'
 import { configureAction } from '@/services/configureAction'
 import { ombulAuth } from '@/services/ombul/auth'
@@ -35,12 +35,7 @@ export default async function Ombul({ params }: PropTypes) {
 
     const session = await ServerSession.fromNextAuth()
     const canUpdate = ombulAuth.update.dynamicFields({}).auth(session)
-    const canUpdateCmsCover = ombulAuth.updateCmsCoverImage.dynamicFields({}).auth(session).toJsObject()
-
-    const changeDescription = configureAction(
-        updateOmbulAction,
-        { params: { id: ombul.id } }
-    )
+    const canUpdateParagraph = ombulAuth.updateParagraphContent.dynamicFields({}).auth(session).toJsObject()
 
     return (
         <div className={styles.wrapper}>
@@ -49,26 +44,18 @@ export default async function Ombul({ params }: PropTypes) {
                     <h1>{ombul.name}</h1>
                 </ChangeName>
                 <p>{ombul.year} - {ombul.issueNumber}</p>
-                <EditableTextField
-                    editable={canUpdate.authorized}
-                    formProps={{
-                        action: changeDescription
-                    }}
-                    inputName="description"
-                    submitButton={{
-                        text: 'Endre',
-                        className: styles.changeDescriptionButton,
-                    }}
-                >
-                    <p>{ombul.description}</p>
-                </EditableTextField>
             </div>
-            <main>
-                <SlideInOnView>
-                    <PdfDocument src={path} className={styles.book} />
-                </SlideInOnView>
-                <embed className={styles.embedPdf} src={path} type="application/pdf" />
-            </main>
+            <div className={styles.coverAndParagraph}>
+                <OmbulCover ombul={ombul} />
+                <CmsParagraph
+                    canEdit={canUpdateParagraph}
+                    cmsParagraph={ombul.paragraph}
+                    updateCmsParagraphAction={configureAction(
+                        updateOmbulParagraphContentAction,
+                        { implementationParams: { ombulId: ombul.id } }
+                    )}
+                />
+            </div>
             <div className={styles.nav}>
                 <div className={styles.download}>
                     <a href={path} download>Last ned</a>
@@ -76,21 +63,17 @@ export default async function Ombul({ params }: PropTypes) {
                 <div className={styles.openInBrowser}>
                     <Link href={path} target="blank">Åpne i ny fane</Link>
                 </div>
+                <div className={styles.readPdf}>
+                    <PopUp
+                        popUpKey={`OmbulPdfViewer${ombul.id}`}
+                        showButtonContent="Les PDF"
+                    >
+                        <PdfDocument src={path} className={styles.book} />
+                    </PopUp>
+                </div>
             </div>
             <div className={styles.admin}>
-                <OmbulAdmin ombul={ombul}>
-                    <CmsImage
-                        canEdit={canUpdateCmsCover}
-                        cmsImage={ombul.coverImage}
-                        width={400}
-                        updateCmsImageAction={
-                            configureAction(
-                                updateOmbulCmsCoverImageAction,
-                                { implementationParams: { ombulId: ombul.id } }
-                            )
-                        }
-                    />
-                </OmbulAdmin>
+                <OmbulAdmin ombul={ombul} />
             </div>
         </div>
     )
diff --git a/src/app/ombul/page.module.scss b/src/app/ombul/page.module.scss
index 5ebabdd27..0c06451e1 100644
--- a/src/app/ombul/page.module.scss
+++ b/src/app/ombul/page.module.scss
@@ -1,7 +1,7 @@
 @use '@/styles/ohma';
 
 .wrapper {
-    margin-top: 2*ohma.$gap;
+    margin-top: calc(2 * #{ohma.$gap});
     display: flex;
     flex-direction: column;
     .ombulList {
diff --git a/src/app/omegaquotes/CreateOmegaquoteForm.tsx b/src/app/omegaquotes/CreateOmegaquoteForm.tsx
index 8e7e5a3c7..3ff2bff04 100644
--- a/src/app/omegaquotes/CreateOmegaquoteForm.tsx
+++ b/src/app/omegaquotes/CreateOmegaquoteForm.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import styles from './CreateOmegaquoteFrom.module.scss'
-import PopUp from '@/components/PopUp/PopUp'
+import { AddHeaderItemPopUp } from '@/components/HeaderItems/HeaderItemPopUp'
 import Form from '@/components/Form/Form'
 import { createQuoteAction } from '@/services/omegaquotes/actions'
 import TextInput from '@/components/UI/TextInput'
@@ -16,11 +16,7 @@ export default function CreateOmegaquoteForm() {
     if (session.loading || !session.session.user) return null
 
     return (
-        <PopUp
-            popUpKey="new_omega_quote"
-            showButtonContent="Ny Omegaquote"
-            showButtonClass={styles.button}
-        >
+        <AddHeaderItemPopUp popUpKey="new_omega_quote">
             <Form
                 title="Ny Omegaquote"
                 submitText="Legg til"
@@ -39,6 +35,6 @@ export default function CreateOmegaquoteForm() {
                 />
                 <TextInput label="Sagt av" name="author" className={styles.author}/>
             </Form>
-        </PopUp>
+        </AddHeaderItemPopUp>
     )
 }
diff --git a/src/app/omegaquotes/CreateOmegaquoteFrom.module.scss b/src/app/omegaquotes/CreateOmegaquoteFrom.module.scss
index a4997b68d..f9b6130c9 100644
--- a/src/app/omegaquotes/CreateOmegaquoteFrom.module.scss
+++ b/src/app/omegaquotes/CreateOmegaquoteFrom.module.scss
@@ -1,10 +1,3 @@
-@use "@/styles/ohma";
-
-.button {
-    @include ohma.btn(ohma.$colors-primary);
-    width: 10rem;
-}
-
 .popupForm {
     width: 400px;
 
diff --git a/src/app/omegaquotes/OmegaquotesQuote.module.scss b/src/app/omegaquotes/OmegaquotesQuote.module.scss
index 82e98e0e9..4bf95d058 100644
--- a/src/app/omegaquotes/OmegaquotesQuote.module.scss
+++ b/src/app/omegaquotes/OmegaquotesQuote.module.scss
@@ -1,35 +1,40 @@
 @use '@/styles/ohma';
 
 .OmegaquoteQuote {
+    position: relative;
 
     margin-top: 1.5rem;
     margin-bottom: 1.5rem;
-    padding-left: 1rem;
 
     > .QuoteBubble {
+        position: relative;
+
         > p {
+            position: relative;
+            z-index: 2;
             font-family: ohma.$fonts-secondary;
             font-size: ohma.$fonts-xl;
             font-weight: lighter;
-            box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
             display: block;
             text-align: left;
             padding: 2rem 3rem;
-            color: #495057;
+            color: ohma.$colors-text;
             font-style: italic;
             border-radius: 25px;
-            background: #FFF;
+            background-color: ohma.$colors-surface-raised;
         }
-    }
 
-    > .triangle {
-        transform: scaleX(2);
-        color: #fff;
-        text-shadow: 0 1px 1px rgba(255,255,255,.3),0 3px 3px rgba(0,0,0,.4);
-        font-size: 25px;
-        position: absolute;
-        margin-top: -8px;
-        left: 70px;
+        &::after {
+            content: '';
+            position: absolute;
+            left: calc(#{ohma.$gap}*5);
+            bottom: 0;
+            z-index: 1;
+            width: 20px;
+            height: 20px;
+            background-color: ohma.$colors-surface-raised;
+            transform: translateY(50%) rotate(45deg);
+        }
     }
 
     > h3 {
diff --git a/src/app/omegaquotes/OmegaquotesQuote.tsx b/src/app/omegaquotes/OmegaquotesQuote.tsx
index e21cfa0c1..91a3d8955 100644
--- a/src/app/omegaquotes/OmegaquotesQuote.tsx
+++ b/src/app/omegaquotes/OmegaquotesQuote.tsx
@@ -11,7 +11,6 @@ export default function OmegaquoteQuote({ quote }: OmegaquoteQuotePropTypes) {
         <div className={styles.QuoteBubble}>
             <p>&quot;{ quote.quote }&quot;</p>
         </div>
-        <span className={styles.triangle}>▼</span>
         <h3>
             { quote.author }
         </h3>
diff --git a/src/app/omegaquotes/OmegaquotesQuoteList.tsx b/src/app/omegaquotes/OmegaquotesQuoteList.tsx
index 6e39841c2..9edbba095 100644
--- a/src/app/omegaquotes/OmegaquotesQuoteList.tsx
+++ b/src/app/omegaquotes/OmegaquotesQuoteList.tsx
@@ -12,7 +12,7 @@ export type PropTypes = {
 export default function OmegaquoteList({ serverRendered }: PropTypes) {
     const context = useContext(OmegaquotePagingContext)
 
-    //This component must be rendered inside a ImagePagingContextProvider
+    //This component must be rendered inside a OmegaquotePagingProvider
     if (!context) throw new Error('No context')
 
     return <>
diff --git a/src/app/users/[username]/(user-admin)/dots/page.module.scss b/src/app/users/[username]/(user-admin)/dots/page.module.scss
index 076f1106d..840271533 100644
--- a/src/app/users/[username]/(user-admin)/dots/page.module.scss
+++ b/src/app/users/[username]/(user-admin)/dots/page.module.scss
@@ -1,9 +1,15 @@
 @use '@/styles/ohma';
 
+.wrapper {
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+    padding: ohma.$cardPadding;
+}
+
 .dotList {
     @include ohma.table();
     .inactive {
         text-decoration: line-through;
-        color: ohma.$colors-red;
+        color: ohma.$colors-accent-red;
     }
 }
\ No newline at end of file
diff --git a/src/app/users/[username]/(user-admin)/dots/page.tsx b/src/app/users/[username]/(user-admin)/dots/page.tsx
index 5b8aa177b..ccb741a15 100644
--- a/src/app/users/[username]/(user-admin)/dots/page.tsx
+++ b/src/app/users/[username]/(user-admin)/dots/page.tsx
@@ -17,7 +17,7 @@ export default async function UserDotAdmin({ params }: PropTypes) {
     )
 
     return (
-        <div>
+        <div className={styles.wrapper}>
             <h2>Prikker</h2>
             <table className={styles.dotList}>
                 <thead>
diff --git a/src/app/users/[username]/(user-admin)/flairs/page.module.scss b/src/app/users/[username]/(user-admin)/flairs/page.module.scss
index 44ad7fc40..37ea08108 100644
--- a/src/app/users/[username]/(user-admin)/flairs/page.module.scss
+++ b/src/app/users/[username]/(user-admin)/flairs/page.module.scss
@@ -1,5 +1,11 @@
 @use '@/styles/ohma';
 
+.wrapper {
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+    padding: ohma.$cardPadding;
+}
+
 .flairContainer {
     @include ohma.table;
 }
\ No newline at end of file
diff --git a/src/app/users/[username]/(user-admin)/flairs/page.tsx b/src/app/users/[username]/(user-admin)/flairs/page.tsx
index ce158bbe1..35ac73235 100644
--- a/src/app/users/[username]/(user-admin)/flairs/page.tsx
+++ b/src/app/users/[username]/(user-admin)/flairs/page.tsx
@@ -14,7 +14,7 @@ import type { PropTypes } from '@/app/users/[username]/page'
 
 
 export default async function FlairAdmin({ params }: PropTypes) {
-    const { profile, session } = await getProfileForAdmin(await params, 'flairs')
+    const { profile } = await getProfileForAdmin(await params, 'flairs')
     const usersFlairs = unwrapActionReturn(await readUserFlairsAction({ params: { userId: profile.user.id } }))
     const flairs = unwrapActionReturn(await readAllFlairsAction()).map(flair => ({
         ...flair,
@@ -41,7 +41,7 @@ export default async function FlairAdmin({ params }: PropTypes) {
                     <tbody>
                         {flairs.map((flair) => (
                             <tr key={flair.id}>
-                                <td><Flair asClient={false} flair={flair} width={100} session={session} /></td>
+                                <td><Flair flair={flair} width={100} /></td>
                                 <td>{flair.name}</td>
                                 <td>{flair.rank}</td>
                                 <td style={{ backgroundColor: `rgb(${flair.colorR}, ${flair.colorG}, ${flair.colorB})` }}>
diff --git a/src/app/users/[username]/(user-admin)/layout.module.scss b/src/app/users/[username]/(user-admin)/layout.module.scss
index 5448a0132..907559c45 100644
--- a/src/app/users/[username]/(user-admin)/layout.module.scss
+++ b/src/app/users/[username]/(user-admin)/layout.module.scss
@@ -1,15 +1,21 @@
 @use '@/styles/ohma';
 
 .userAdminLayout {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    gap: ohma.$gap;
+    height: 100%;
     position: relative;
-    main {
-        margin-top: 1em;
-    }
 }
 
-.toProfile {
-    position: fixed;
-    top: 100px;
-    left: 50px;
-    @include ohma.borderBtn(ohma.$colors-secondary);
-}
\ No newline at end of file
+.main {
+    position: relative;
+    height: 100%;
+    min-height: 0;
+}
+
+.mainInner {
+    position: absolute;
+    inset: 0;
+    overflow-y: auto;
+}
diff --git a/src/app/users/[username]/(user-admin)/layout.tsx b/src/app/users/[username]/(user-admin)/layout.tsx
index 0df1eadf9..1ff11693d 100644
--- a/src/app/users/[username]/(user-admin)/layout.tsx
+++ b/src/app/users/[username]/(user-admin)/layout.tsx
@@ -1,12 +1,11 @@
 import styles from './layout.module.scss'
+import { flairAuth } from '@/services/flairs/auth'
 import { readUserProfileAction } from '@/services/users/actions'
 import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import { ServerSession } from '@/auth/session/ServerSession'
 import PageWrapper from '@/components/PageWrapper/PageWrapper'
-import { SubPageNavBar, SubPageNavBarItem } from '@/components/NavBar/SubPageNavBar/SubPageNavBar'
-import { flairAuth } from '@/services/flairs/auth'
+import UserAdminNavBar from '@/app/users/[username]/UserAdminNavBar'
 import { notFound } from 'next/navigation'
-import { faCircleDot, faCog, faHatWizard, faKey, faPaperPlane, faUser } from '@fortawesome/free-solid-svg-icons'
 import type { ReactNode } from 'react'
 import type { PropTypes } from '@/app/users/[username]/page'
 import type { Metadata } from 'next'
@@ -23,40 +22,21 @@ export default async function UserAdmin({ children, params }: PropTypes & { chil
         username = session.user.username
     }
 
-    const canAssignFlairs = flairAuth.assignToUser.dynamicFields({}).auth(
-        await ServerSession.fromNextAuth()
-    ).toJsObject()
-
+    const canAssignFlairs = flairAuth.assignToUser.dynamicFields({}).auth(session)
     const { user } = unwrapActionReturn(await readUserProfileAction({ params: { username } }))
+    const isOwnProfile = user.id === session.user?.id
+
     return (
-        <PageWrapper title={`Innstillinger for ${user.firstname} ${user.lastname}`}>
+        <PageWrapper title={'Innstillinger'} fillHeight transparent hideTitle>
             <div className={styles.userAdminLayout}>
-                <i>Bruker Id: {user.id}</i> <br />
-                <i>Brukernavn: {user.username}</i>
-                <main>
-                    {children}
+                <main className={styles.main}>
+                    <div className={styles.mainInner}>
+                        {children}
+                    </div>
                 </main>
-                {/* <Nav username={username} /> */}
-                <SubPageNavBar>
-                    <SubPageNavBarItem icon={faUser} href={`/users/${username}`}>
-                        Profil
-                    </SubPageNavBarItem>
-                    <SubPageNavBarItem icon={faCircleDot} href={`/users/${username}/dots`}>
-                        Prikker
-                    </SubPageNavBarItem>
-                    <SubPageNavBarItem icon={faPaperPlane} href={`/users/${username}/notifications`}>
-                        Notifikasjoner
-                    </SubPageNavBarItem>
-                    <SubPageNavBarItem icon={faKey} href={`/users/${username}/permissions`}>
-                        Tilganger
-                    </SubPageNavBarItem>
-                    {canAssignFlairs.authorized && <SubPageNavBarItem icon={faHatWizard} href={`/users/${username}/flairs`}>
-                        Kapper
-                    </SubPageNavBarItem>}
-                    <SubPageNavBarItem icon={faCog} href={`/users/${username}/settings`}>
-                        Innstillinger
-                    </SubPageNavBarItem>
-                </SubPageNavBar>
+                {isOwnProfile && (
+                    <UserAdminNavBar username={username} canAssignFlairs={canAssignFlairs.authorized} />
+                )}
             </div>
         </PageWrapper>
     )
diff --git a/src/app/users/[username]/(user-admin)/notifications/notificationSettings.module.scss b/src/app/users/[username]/(user-admin)/notifications/notificationSettings.module.scss
index 30a6b7ec9..0e4f1e89c 100644
--- a/src/app/users/[username]/(user-admin)/notifications/notificationSettings.module.scss
+++ b/src/app/users/[username]/(user-admin)/notifications/notificationSettings.module.scss
@@ -30,7 +30,7 @@
 }
 
 .submitButton {
-    transition: opacity 200ms ease;
+    transition: opacity ohma.$transitionTime ease;
 
     max-width: 15rem;
     margin: auto;
diff --git a/src/app/users/[username]/(user-admin)/notifications/page.module.scss b/src/app/users/[username]/(user-admin)/notifications/page.module.scss
new file mode 100644
index 000000000..df71c6a35
--- /dev/null
+++ b/src/app/users/[username]/(user-admin)/notifications/page.module.scss
@@ -0,0 +1,7 @@
+@use '@/styles/ohma';
+
+.wrapper {
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+    padding: ohma.$cardPadding;
+}
diff --git a/src/app/users/[username]/(user-admin)/notifications/page.tsx b/src/app/users/[username]/(user-admin)/notifications/page.tsx
index 5fdc9d0e3..ffb018d4a 100644
--- a/src/app/users/[username]/(user-admin)/notifications/page.tsx
+++ b/src/app/users/[username]/(user-admin)/notifications/page.tsx
@@ -1,4 +1,5 @@
 'use server'
+import styles from './page.module.scss'
 import NotificationSettings from './notificationSettings'
 import { getProfileForAdmin } from '@/app/users/[username]/(user-admin)/getProfileForAdmin'
 import { readNotificationChannelsAction, readNotificationSubscriptionsAction } from '@/services/notifications/actions'
@@ -25,7 +26,7 @@ export default async function Notififcations({ params }: PropTypes) {
     }
 
     return (
-        <div>
+        <div className={styles.wrapper}>
             <h2>Notifikasjoner</h2>
             <NotificationSettings user={profile.user} channels={channels.data} subscriptions={subscriptions.data} />
         </div>
diff --git a/src/app/users/[username]/(user-admin)/notifications/subscriptionItem.module.scss b/src/app/users/[username]/(user-admin)/notifications/subscriptionItem.module.scss
index 31a22cdee..2b091ebfe 100644
--- a/src/app/users/[username]/(user-admin)/notifications/subscriptionItem.module.scss
+++ b/src/app/users/[username]/(user-admin)/notifications/subscriptionItem.module.scss
@@ -3,7 +3,7 @@
 .subscriptionItem {
 
     &:nth-child(odd) {
-        background-color: ohma.$colors-gray-200;
+        background-color: ohma.$colors-surface-raised;
     }
 
     .channelName {
diff --git a/src/app/users/[username]/(user-admin)/permissions/page.module.scss b/src/app/users/[username]/(user-admin)/permissions/page.module.scss
index 45fdc8ad7..d34dc2acf 100644
--- a/src/app/users/[username]/(user-admin)/permissions/page.module.scss
+++ b/src/app/users/[username]/(user-admin)/permissions/page.module.scss
@@ -1,7 +1,9 @@
 @use '@/styles/ohma';
 
 .wrapper {
-    
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+    padding: ohma.$cardPadding;
 }
 
 .permission {
diff --git a/src/app/users/[username]/(user-admin)/settings/ProfileImageUploader.tsx b/src/app/users/[username]/(user-admin)/settings/ProfileImageUploader.tsx
new file mode 100644
index 000000000..4f62d667b
--- /dev/null
+++ b/src/app/users/[username]/(user-admin)/settings/ProfileImageUploader.tsx
@@ -0,0 +1,22 @@
+'use client'
+import ImageUploader from '@/components/Image/ImageUploader'
+import useEditMode from '@/hooks/useEditMode'
+import type { UploadSpecialCollectionImageAction } from '@/services/images/subservice/types'
+import type { AuthResultTypeAny } from '@/auth/authorizer/AuthResult'
+
+type PropTypes = {
+    canEdit: AuthResultTypeAny,
+    uploadImageAction: UploadSpecialCollectionImageAction,
+}
+
+/**
+ * Gates the profile image upload form behind edit mode - kept out of the (server-rendered)
+ * settings page since useEditMode needs a client component. Rendered right next to the current
+ * profile image, no popup needed.
+ */
+export default function ProfileImageUploader({ canEdit, uploadImageAction }: PropTypes) {
+    const editable = useEditMode({ authResult: canEdit })
+
+    if (!editable) return null
+    return <ImageUploader title="Endre profilbilde" uploadImageAction={uploadImageAction} refreshOnSuccess />
+}
diff --git a/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsCard.module.scss b/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsCard.module.scss
index 382b45bf3..11d748876 100644
--- a/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsCard.module.scss
+++ b/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsCard.module.scss
@@ -1,8 +1,8 @@
 @use '@/styles/ohma';
 
 .settingsCard {
-    background: ohma.$colors-layer;
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
     padding: ohma.$cardPadding;
-    border-radius: ohma.$cardRounding;
-    margin: ohma.$gap 0;
+    color: ohma.$colors-text;
 }
\ No newline at end of file
diff --git a/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsForm.module.scss b/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsForm.module.scss
deleted file mode 100644
index c5426a73f..000000000
--- a/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsForm.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use '@/styles/ohma';
-
-.settingForm {
-    padding: ohma.$cardPadding;
-    border-radius: ohma.$cardRounding;
-    @include ohma.boxShadow('');
-    @include ohma.layer;
-}
-
-.selectBox > select {
-    background-color: ohma.$colors-secondary;
-    color: ohma.$colors-text;
-}
\ No newline at end of file
diff --git a/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsForm.tsx b/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsForm.tsx
index ca6d73180..1a7442960 100644
--- a/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsForm.tsx
+++ b/src/app/users/[username]/(user-admin)/settings/UserProfileSettingsForm.tsx
@@ -1,23 +1,14 @@
 'use client'
-import styles from './UserProfileSettingsForm.module.scss'
 import Form from '@/components/Form/Form'
 import Checkbox from '@/components/UI/Checkbox'
 import TextInput from '@/components/UI/TextInput'
-import { SelectConstructor } from '@/components/UI/Select'
+import Dropdown from '@/components/UI/Dropdown'
 import { configureAction } from '@/services/configureAction'
 import { updateUserProfileAction } from '@/services/users/actions'
 import { sexConfig, relationshipStatusConfig } from '@/services/users/constants'
 import Textarea from '@/components/UI/Textarea'
-import type { UserFiltered } from '@/services/users/types'
 import { RelationshipStatus, SEX } from '@/prisma-generated-pn-types'
-
-const SeclectRelationshipStatus = SelectConstructor<RelationshipStatus>(
-    value => Object.values(RelationshipStatus).find(status => status === value) ?? RelationshipStatus.NOT_SPECIFIED
-)
-
-const SelectSex = SelectConstructor<SEX>(
-    value => Object.values(SEX).find(sex => sex === value) ?? SEX.OTHER
-)
+import type { UserFiltered } from '@/services/users/types'
 
 type PropTypes = {
     user: UserFiltered
@@ -42,11 +33,10 @@ export default function UserProfileSettingsForm({ user } : PropTypes) {
         >
             <p>Har du andre brukerinstillinger du ønsker å endre? Kontakt HS på hs@omega.ntnu.no</p>
             <TextInput label="Allergier / diett" name="allergies" defaultValue={user.allergies || ''} />
-            <SelectSex
+            <Dropdown
                 label="Kjønn"
                 name="sex"
                 options={sexOptions}
-                className={styles.selectBox}
                 defaultValue={user.sex ?? SEX.OTHER}
             />
             <Textarea label="bio" name="bio" defaultValue={user.bio} />
@@ -55,11 +45,10 @@ export default function UserProfileSettingsForm({ user } : PropTypes) {
                 name="relationshipStatusText"
                 defaultValue={user.relationshipStatusText || ''}
             />
-            <SeclectRelationshipStatus
+            <Dropdown
                 label="Sivilstatus"
                 name="relationshipStatus"
                 options={relationshipOptions}
-                className={styles.selectBox}
                 defaultValue={user.relationshipStatus}
             />
             <Checkbox
diff --git a/src/app/users/[username]/(user-admin)/settings/page.module.scss b/src/app/users/[username]/(user-admin)/settings/page.module.scss
new file mode 100644
index 000000000..32b2d63af
--- /dev/null
+++ b/src/app/users/[username]/(user-admin)/settings/page.module.scss
@@ -0,0 +1,14 @@
+@use '@/styles/ohma';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: ohma.$gap;
+}
+
+.profileImage {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 1em;
+}
diff --git a/src/app/users/[username]/(user-admin)/settings/page.tsx b/src/app/users/[username]/(user-admin)/settings/page.tsx
index 85400b72b..a27fde346 100644
--- a/src/app/users/[username]/(user-admin)/settings/page.tsx
+++ b/src/app/users/[username]/(user-admin)/settings/page.tsx
@@ -1,26 +1,43 @@
+import styles from './page.module.scss'
 import UserSettingsForm from './UserProfileSettingsForm'
 import UserProfileSettingsCard from './UserProfileSettingsCard'
+import ProfileImageUploader from './ProfileImageUploader'
 import { getProfileForAdmin } from '@/app/users/[username]/(user-admin)/getProfileForAdmin'
 import Image from '@/components/Image/Image'
-import { readUserProfileAction } from '@/services/users/actions'
+import { readUserProfileAction, updateUserProfileImageAction } from '@/services/users/actions'
+import { userAuth } from '@/services/users/auth'
+import { configureAction } from '@/services/configureAction'
 import { notFound } from 'next/navigation'
 import type { PropTypes } from '@/app/users/[username]/page'
 
 export default async function UserSettings({ params }: PropTypes) {
-    const { profile } = await getProfileForAdmin(await params, 'settings')
+    const { profile, session } = await getProfileForAdmin(await params, 'settings')
     const profileRes = await readUserProfileAction({ params: { username: (await params).username } })
     if (!profileRes.success) return notFound()
     const userDataFull = profileRes.data.user
 
+    const canUpdateImage = userAuth.updateProfileImage.dynamicFields({
+        username: profile.user.username
+    }).auth(session).toJsObject()
+
     return (
-        <div>
+        <div className={styles.wrapper}>
             <UserProfileSettingsCard>
                 <UserSettingsForm user={userDataFull} />
             </UserProfileSettingsCard>
             {/* TODO: add Email registration form and admin user settings */}
             <UserProfileSettingsCard>
                 <h2>Generelle Instillinger</h2>
-                <Image width={300} image={profile.user.image} />
+                <div className={styles.profileImage}>
+                    <Image width={300} image={profile.user.image} />
+                    <ProfileImageUploader
+                        canEdit={canUpdateImage}
+                        uploadImageAction={configureAction(
+                            updateUserProfileImageAction,
+                            { params: { username: profile.user.username } }
+                        )}
+                    />
+                </div>
             </UserProfileSettingsCard>
         </div>
     )
diff --git a/src/app/users/[username]/(user-admin)/theme/ThemeForm.tsx b/src/app/users/[username]/(user-admin)/theme/ThemeForm.tsx
index 5f11011d5..20ef32b13 100644
--- a/src/app/users/[username]/(user-admin)/theme/ThemeForm.tsx
+++ b/src/app/users/[username]/(user-admin)/theme/ThemeForm.tsx
@@ -1,81 +1,76 @@
 'use client'
 
 import styles from './page.module.scss'
-
-enum ThemeName {
-    Standard = 'Standard',
-    Light = 'Light',
-    Solarized = 'Solarized',
-    StjerneInnbygger = 'StjerneInnbygger',
-}
-
-type ThemeColors = {
-    primary: string;
-    secondary: string;
-    layer: string;
-    text: string;
-    textMuted: string;
-};
-
-const themes: Record<ThemeName, ThemeColors> = {
-    [ThemeName.Standard]: {
-        primary: 'hsl(210, 70%, 50%)',
-        secondary: 'hsl(210, 5%, 12%)',
-        layer: 'hsl(210, 0%, 0%, 20%)',
-        text: 'hsl(0, 0%, 80%)',
-        textMuted: 'hsl(0, 0%, 70%)',
-    },
-    [ThemeName.Light]: {
-        primary: 'hsl(210, 98%, 50%)',
-        secondary: 'hsl(210, 18%, 95%)',
-        layer: 'hsl(0, 0%, 0%, 5%)',
-        text: 'hsl(0, 0%, 10%)',
-        textMuted: 'hsl(0, 0%, 20%)',
-    },
-    [ThemeName.Solarized]: {
-        primary: 'hsl(210, 98%, 50%)',
-        secondary: 'hsl(44, 87%, 94%)',
-        layer: 'hsl(0, 0%, 50%, 15%)',
-        text: 'hsl(196, 13%, 45%)',
-        textMuted: 'hsl(180, 7%, 60%)',
-    },
-    [ThemeName.StjerneInnbygger]: {
-        primary: 'hsl(207, 91%, 65%)',
-        secondary: 'hsl(202, 64%, 10%)',
-        layer: 'hsla(211, 48.1%, 35.5%, 0.18)',
-        text: 'hsl(0, 0%, 80%)',
-        textMuted: 'hsl(0, 0%, 70%)',
-    },
-}
+import { themes, applyTheme, subscribeToTheme, getActiveTheme, getServerActiveTheme } from './theme'
+import { useSyncExternalStore } from 'react'
+import type { ThemeName } from './theme'
 
 export default function ThemeForm() {
-    function applyTheme(name: ThemeName): void {
-        const colors = themes[name]
-        const root = document.documentElement
-        Object.entries(colors).forEach(([key, value]) => {
-            root.style.setProperty(`--${key}`, value)
-        })
+    const activeTheme = useSyncExternalStore(subscribeToTheme, getActiveTheme, getServerActiveTheme)
+
+    function selectTheme(name: ThemeName) {
+        applyTheme(name)
     }
 
     return (
         <div className={styles.ThemeWrapper}>
-            {Object.entries(themes).map(([name, colors]) => (
-                <a key={name} className={styles.Theme} onClick={() => applyTheme(name as ThemeName)}>
-                    <div className={styles.ThemeHeader}>
-                        {name}
-                    </div>
-                    <div className={styles.ThemeBody}>
-                        {Object.entries(colors).map(([key, value]) => (
+            {Object.entries(themes).map(([name, colors]) => {
+                const bg = (key: keyof typeof colors) => ({ backgroundColor: colors[key] })
+                return (
+                    <a
+                        key={name}
+                        className={`${styles.Theme} ${name === activeTheme ? styles.active : ''}`}
+                        onClick={() => selectTheme(name as ThemeName)}
+                    >
+                        <div className={styles.ThemeHeader}>
+                            {name}
+                        </div>
+                        <div className={styles.ThemeContent}>
+                            <div className={styles.ThemeBody}>
+                                {Object.entries(colors).map(([key, value]) => (
+                                    <div
+                                        key={key}
+                                        className={styles.ColorSwatch}
+                                        style={{ backgroundColor: value }}
+                                        title={`${key}: ${value}`}
+                                    />
+                                ))}
+                            </div>
                             <div
-                                key={key}
-                                className={styles.ColorSwatch}
-                                style={{ backgroundColor: value }}
-                                title={`${key}: ${value}`}
-                            />
-                        ))}
-                    </div>
-                </a>
-            ))}
+                                className={styles.ThemePreview}
+                                style={{
+                                    background: 'linear-gradient(125deg, '
+                                        + `color-mix(in srgb, ${colors['accent-blue']}, transparent 70%) 0%, `
+                                        + `color-mix(in srgb, ${colors['surface-base']}, transparent 80%) 70%), ${
+                                            colors['surface-raised']}`,
+                                }}
+                            >
+                                <div className={styles.PreviewNavBar} style={bg('surface-base')}>
+                                    <span className={styles.PreviewLogo} style={bg('accent-blue')} />
+                                    <span className={styles.PreviewTitle} style={bg('text-muted')} />
+                                    <span className={styles.PreviewNavGrower} />
+                                    <span className={styles.PreviewNavIcon} style={bg('text-muted')} />
+                                    <span className={styles.PreviewNavIcon} style={bg('accent-blue')} />
+                                </div>
+                                <div className={styles.PreviewBody}>
+                                    <div className={styles.PreviewSideBar} style={bg('surface-base')}>
+                                        <span className={styles.PreviewSideIcon} style={bg('accent-blue')} />
+                                        <span className={styles.PreviewSideIcon} style={bg('text-muted')} />
+                                        <span className={styles.PreviewSideIcon} style={bg('text-muted')} />
+                                        <span className={styles.PreviewSideIcon} style={bg('text-muted')} />
+                                    </div>
+                                    <div className={styles.PreviewCard} style={bg('surface-base')}>
+                                        <span className={styles.PreviewHeading} style={bg('ink-strong')} />
+                                        <span className={styles.PreviewText} style={bg('text-muted')} />
+                                        <span className={styles.PreviewText} style={bg('text-muted')} />
+                                        <span className={styles.PreviewButton} style={bg('accent-blue')} />
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </a>
+                )
+            })}
         </div>
     )
 }
diff --git a/src/app/users/[username]/(user-admin)/theme/page.module.scss b/src/app/users/[username]/(user-admin)/theme/page.module.scss
index d3d80b3db..366b11772 100644
--- a/src/app/users/[username]/(user-admin)/theme/page.module.scss
+++ b/src/app/users/[username]/(user-admin)/theme/page.module.scss
@@ -2,50 +2,164 @@
 
 .ThemeWrapper {
     display: flex;
-    flex-wrap: wrap;
+    flex-direction: column;
+    gap: #{ohma.$gap};
 }
 
 .Theme {
-    width: 192px * 2;
-    height: 168px;
-    @include ohma.layer;
-    border-radius: ohma.$cardRounding;
-    padding: ohma.$gap * 2;
-    margin: ohma.$gap;
+    width: 100%;
+    background: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+    border: 2px solid transparent;
+    padding: calc(2 * #{ohma.$gap});
+    cursor: pointer;
+    transition: border-color ohma.$transitionTime, box-shadow ohma.$transitionTime;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: calc(2 * #{ohma.$gap});
+
+    &.active {
+        border-color: ohma.$colors-accent-blue;
+    }
 }
 
 .ThemeHeader {
-    @include ohma.layer;
-    height: 58%;
-    border-radius: ohma.$cardRounding;
-    margin: -2 * ohma.$gap;
-    padding: ohma.$gap * 2;
-    font-size: xx-large;
-    line-height: 50px;
+    background: ohma.$colors-surface-raised;
+    margin: calc(-2 * #{ohma.$gap}) calc(-2 * #{ohma.$gap}) 0;
+    padding: calc(2 * #{ohma.$gap});
+    font-size: ohma.$fonts-xl;
+    color: ohma.$colors-ink-hover;
 }
 
-.ThemeBody {
-    margin-top: ohma.$gap * 3;
+.ThemeContent {
     display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
     justify-content: space-between;
-    > div {
-        border-radius: ohma.$rounding;
-        height: 64px;
-        width: 64px;
-    }
-    > .primary {
-        background-color: ohma.$colors-primary;
-    }
-    > .secondary {
-        background-color: ohma.$colors-secondary;
-    }
-    > .layer {
-        background-color: ohma.$colors-layer;
-    }
-    > .text {
-        background-color: ohma.$colors-text;
-    }
-    > .textMuted {
-        background-color: ohma.$colors-text-muted;
+    gap: calc(2 * #{ohma.$gap});
+}
+
+.ThemeBody {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    gap: calc(0.75 * #{ohma.$gap});
+}
+
+.ColorSwatch {
+    flex-shrink: 0;
+    border-radius: ohma.$rounding;
+    height: calc(4 * #{ohma.$gap});
+    width: calc(4 * #{ohma.$gap});
+}
+
+// A tiny, static mockup of the actual app chrome (nav bar, icon sidebar,
+// content card) rendered in the theme's own colors, so you can see roughly
+// what the theme looks like before applying it, without actually switching
+// the live CSS variables.
+.ThemePreview {
+    flex-shrink: 0;
+    width: calc(56 * #{ohma.$gap});
+    padding: #{ohma.$gap};
+    border-radius: ohma.$rounding;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    gap: #{ohma.$gap};
+    @include ohma.boxShadow('');
+}
+
+.PreviewNavBar {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    gap: #{ohma.$gap};
+    padding: #{ohma.$gap} calc(1.5 * #{ohma.$gap});
+    border-radius: calc(#{ohma.$rounding} / 2);
+}
+
+.PreviewLogo {
+    flex-shrink: 0;
+    width: calc(2 * #{ohma.$gap});
+    height: calc(2 * #{ohma.$gap});
+    border-radius: calc(0.5 * #{ohma.$gap});
+}
+
+.PreviewTitle {
+    height: calc(0.6 * #{ohma.$gap});
+    width: calc(8 * #{ohma.$gap});
+    border-radius: calc(0.3 * #{ohma.$gap});
+    opacity: 0.6;
+}
+
+.PreviewNavGrower {
+    flex: 1;
+}
+
+.PreviewNavIcon {
+    flex-shrink: 0;
+    width: calc(1.5 * #{ohma.$gap});
+    height: calc(1.5 * #{ohma.$gap});
+    border-radius: 50%;
+    opacity: 0.6;
+}
+
+.PreviewBody {
+    flex: 1;
+    display: flex;
+    align-items: stretch;
+    gap: #{ohma.$gap};
+}
+
+.PreviewSideBar {
+    flex-shrink: 0;
+    width: calc(3 * #{ohma.$gap});
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(0.75 * #{ohma.$gap});
+    padding: calc(0.75 * #{ohma.$gap});
+    border-radius: calc(#{ohma.$rounding} / 2);
+}
+
+.PreviewSideIcon {
+    width: calc(1.5 * #{ohma.$gap});
+    height: calc(1.5 * #{ohma.$gap});
+    border-radius: calc(0.3 * #{ohma.$gap});
+    opacity: 0.6;
+}
+
+.PreviewCard {
+    flex: 1;
+    padding: calc(1.5 * #{ohma.$gap});
+    border-radius: calc(#{ohma.$rounding} / 2);
+    display: flex;
+    flex-direction: column;
+    gap: calc(0.6 * #{ohma.$gap});
+}
+
+.PreviewHeading {
+    height: calc(0.9 * #{ohma.$gap});
+    width: 50%;
+    border-radius: calc(0.3 * #{ohma.$gap});
+}
+
+.PreviewText {
+    height: calc(0.6 * #{ohma.$gap});
+    width: 85%;
+    border-radius: calc(0.3 * #{ohma.$gap});
+    opacity: 0.7;
+
+    &:last-of-type {
+        width: 65%;
     }
 }
+
+.PreviewButton {
+    margin-top: calc(0.6 * #{ohma.$gap});
+    height: calc(2 * #{ohma.$gap});
+    width: calc(8 * #{ohma.$gap});
+    border-radius: calc(0.4 * #{ohma.$gap});
+}
diff --git a/src/app/users/[username]/(user-admin)/theme/theme.ts b/src/app/users/[username]/(user-admin)/theme/theme.ts
new file mode 100644
index 000000000..8c21ca40a
--- /dev/null
+++ b/src/app/users/[username]/(user-admin)/theme/theme.ts
@@ -0,0 +1,130 @@
+export enum ThemeName {
+    Standard = 'Standard',
+    Light = 'Light',
+    Solarized = 'Solarized',
+    StjerneInnbygger = 'StjerneInnbygger',
+}
+
+type ThemeColors = {
+    layer: string;
+    text: string;
+    'text-muted': string;
+    'surface-base': string;
+    'surface-raised': string;
+    'surface-hover': string;
+    'surface-subtle': string;
+    'ink-hover': string;
+    'ink-strong': string;
+    'accent-red': string;
+    'accent-orange': string;
+    'accent-yellow': string;
+    'accent-green': string;
+    'accent-cyan': string;
+    'accent-blue': string;
+    'accent-magenta': string;
+    'accent-violet': string;
+};
+
+export const themes: Record<ThemeName, ThemeColors> = {
+    [ThemeName.Standard]: {
+        layer: 'hsla(210, 0%, 0%, 0.2)',
+        text: 'hsl(0, 0%, 80%)',
+        'text-muted': 'hsl(0, 0%, 70%)',
+        'surface-base': 'hsl(240, 8%, 8%)',
+        'surface-raised': 'hsl(240, 6%, 12%)',
+        'surface-hover': 'hsl(210, 8%, 18%)',
+        'surface-subtle': 'hsl(210, 8%, 35%)',
+        'ink-hover': 'hsl(210, 8%, 65%)',
+        'ink-strong': 'hsl(210, 8%, 75%)',
+        'accent-red': 'hsl(0, 80%, 60%)',
+        'accent-orange': 'hsl(40, 80%, 60%)',
+        'accent-yellow': 'hsl(60, 80%, 60%)',
+        'accent-green': 'hsl(120, 80%, 60%)',
+        'accent-cyan': 'hsl(180, 80%, 60%)',
+        'accent-blue': 'hsl(210, 70%, 50%)',
+        'accent-magenta': 'hsl(300, 80%, 60%)',
+        'accent-violet': 'hsl(260, 80%, 60%)',
+    },
+    [ThemeName.Light]: {
+        layer: 'hsla(0, 0%, 0%, 0.05)',
+        text: 'hsl(0, 0%, 10%)',
+        'text-muted': 'hsl(0, 0%, 20%)',
+        'surface-base': 'hsl(210, 18%, 97%)',
+        'surface-raised': 'hsl(0, 0%, 100%)',
+        'surface-hover': 'hsl(210, 30%, 90%)',
+        'surface-subtle': 'hsl(210, 10%, 80%)',
+        'ink-hover': 'hsl(210, 8%, 25%)',
+        'ink-strong': 'hsl(210, 8%, 10%)',
+        'accent-red': 'hsl(0, 70%, 45%)',
+        'accent-orange': 'hsl(40, 70%, 40%)',
+        'accent-yellow': 'hsl(50, 80%, 35%)',
+        'accent-green': 'hsl(120, 60%, 32%)',
+        'accent-cyan': 'hsl(185, 70%, 32%)',
+        'accent-blue': 'hsl(210, 98%, 50%)',
+        'accent-magenta': 'hsl(300, 60%, 40%)',
+        'accent-violet': 'hsl(260, 55%, 45%)',
+    },
+    [ThemeName.Solarized]: {
+        layer: 'hsla(0, 0%, 50%, 0.15)',
+        text: 'hsl(196, 13%, 45%)',
+        'text-muted': 'hsl(180, 7%, 60%)',
+        'surface-base': 'hsl(44, 87%, 94%)',
+        'surface-raised': 'hsl(44, 60%, 98%)',
+        'surface-hover': 'hsl(44, 50%, 88%)',
+        'surface-subtle': 'hsl(45, 20%, 75%)',
+        'ink-hover': 'hsl(196, 13%, 35%)',
+        'ink-strong': 'hsl(196, 20%, 20%)',
+        'accent-red': 'hsl(1, 71%, 52%)',
+        'accent-orange': 'hsl(18, 89%, 44%)',
+        'accent-yellow': 'hsl(45, 100%, 35%)',
+        'accent-green': 'hsl(68, 100%, 30%)',
+        'accent-cyan': 'hsl(175, 59%, 40%)',
+        'accent-blue': 'hsl(210, 98%, 50%)',
+        'accent-magenta': 'hsl(331, 64%, 52%)',
+        'accent-violet': 'hsl(237, 43%, 60%)',
+    },
+    [ThemeName.StjerneInnbygger]: {
+        layer: 'hsla(211, 48.1%, 35.5%, 0.18)',
+        text: 'hsl(0, 0%, 80%)',
+        'text-muted': 'hsl(0, 0%, 70%)',
+        'surface-base': 'hsl(202, 64%, 8%)',
+        'surface-raised': 'hsl(202, 50%, 13%)',
+        'surface-hover': 'hsl(205, 40%, 20%)',
+        'surface-subtle': 'hsl(205, 30%, 35%)',
+        'ink-hover': 'hsl(205, 15%, 65%)',
+        'ink-strong': 'hsl(205, 15%, 78%)',
+        'accent-red': 'hsl(0, 80%, 60%)',
+        'accent-orange': 'hsl(40, 80%, 60%)',
+        'accent-yellow': 'hsl(60, 80%, 60%)',
+        'accent-green': 'hsl(120, 80%, 60%)',
+        'accent-cyan': 'hsl(180, 80%, 60%)',
+        'accent-blue': 'hsl(207, 91%, 65%)',
+        'accent-magenta': 'hsl(300, 80%, 60%)',
+        'accent-violet': 'hsl(260, 80%, 60%)',
+    },
+}
+
+const themeListeners = new Set<() => void>()
+
+export function applyTheme(name: ThemeName): void {
+    localStorage.setItem('theme', name)
+    const colors = themes[name]
+    const root = document.documentElement
+    Object.entries(colors).forEach(([key, value]) => {
+        root.style.setProperty(`--${key}`, value)
+    })
+    themeListeners.forEach(listener => listener())
+}
+
+export function subscribeToTheme(listener: () => void): () => void {
+    themeListeners.add(listener)
+    return () => themeListeners.delete(listener)
+}
+
+export function getActiveTheme(): ThemeName | null {
+    return localStorage.getItem('theme') as ThemeName | null
+}
+
+export function getServerActiveTheme(): ThemeName | null {
+    return null
+}
diff --git a/src/app/users/[username]/UserAdminNavBar.tsx b/src/app/users/[username]/UserAdminNavBar.tsx
new file mode 100644
index 000000000..c22a4f2fb
--- /dev/null
+++ b/src/app/users/[username]/UserAdminNavBar.tsx
@@ -0,0 +1,45 @@
+import { SubPageNavBar, SubPageNavBarItem } from '@/components/NavBar/SubPageNavBar/SubPageNavBar'
+import {
+    faCircleDot,
+    faCog,
+    faHatWizard,
+    faKey,
+    faPaperPlane,
+    faSwatchbook,
+    faUser,
+} from '@fortawesome/free-solid-svg-icons'
+
+type PropTypes = {
+    username: string,
+    canAssignFlairs: boolean,
+}
+
+export default function UserAdminNavBar({ username, canAssignFlairs }: PropTypes) {
+    return (
+        <SubPageNavBar>
+            <SubPageNavBarItem icon={faUser} href={`/users/${username}`}>
+                Profil
+            </SubPageNavBarItem>
+            <SubPageNavBarItem icon={faCircleDot} href={`/users/${username}/dots`}>
+                Prikker
+            </SubPageNavBarItem>
+            <SubPageNavBarItem icon={faPaperPlane} href={`/users/${username}/notifications`}>
+                Notifikasjoner
+            </SubPageNavBarItem>
+            <SubPageNavBarItem icon={faKey} href={`/users/${username}/permissions`}>
+                Tilganger
+            </SubPageNavBarItem>
+            {canAssignFlairs && (
+                <SubPageNavBarItem icon={faHatWizard} href={`/users/${username}/flairs`}>
+                    Kapper
+                </SubPageNavBarItem>
+            )}
+            <SubPageNavBarItem icon={faSwatchbook} href={`/users/${username}/theme`}>
+                Tema
+            </SubPageNavBarItem>
+            <SubPageNavBarItem icon={faCog} href={`/users/${username}/settings`}>
+                Innstillinger
+            </SubPageNavBarItem>
+        </SubPageNavBar>
+    )
+}
diff --git a/src/app/users/[username]/omegaid/page.module.scss b/src/app/users/[username]/omegaid/page.module.scss
index ef47f0c55..875f405f2 100644
--- a/src/app/users/[username]/omegaid/page.module.scss
+++ b/src/app/users/[username]/omegaid/page.module.scss
@@ -1,5 +1,12 @@
+@use '@/styles/ohma';
 
 .wrapper {
+  background: ohma.$colors-surface-base;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin: auto;
   padding: 1rem;
   
diff --git a/src/app/users/[username]/omegaid/page.tsx b/src/app/users/[username]/omegaid/page.tsx
index fbf575824..7468d24dc 100644
--- a/src/app/users/[username]/omegaid/page.tsx
+++ b/src/app/users/[username]/omegaid/page.tsx
@@ -2,6 +2,7 @@
 import styles from './page.module.scss'
 import { ServerSession } from '@/auth/session/ServerSession'
 import OmegaId from '@/components/OmegaId/identification/OmegaId'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 import { forbidden, notFound, redirect } from 'next/navigation'
 import type { PropTypes } from '@/app/users/[username]/page'
 
@@ -21,6 +22,7 @@ export default async function OmegaIdPage({ params }: PropTypes) {
     }
 
     return <div className={styles.wrapper}>
+        <PageTitleSetter title={'OmegaId'} />
         <OmegaId />
     </div>
 }
diff --git a/src/app/users/[username]/page.module.scss b/src/app/users/[username]/page.module.scss
index d8135b8a4..86bc223f0 100644
--- a/src/app/users/[username]/page.module.scss
+++ b/src/app/users/[username]/page.module.scss
@@ -1,21 +1,14 @@
 @use '@/styles/ohma';
 
-.profile {
-    @include ohma.layer();
-    box-shadow: 0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
-    border-radius: 1em;
-    margin: 2em;
-    padding-bottom: 2em;
-}
-
-.standardFlairColor {
-    background-color: ohma.$colors-secondary;
+.wrapper {
+    height: 100%;
 }
 
-.top {
-    width: 100%;
-    height: 5em;
-    border-radius: 1em 1em 0 0;
+.profile {
+    display: grid;
+    grid-template-rows: 1fr auto;
+    gap: ohma.$gap;
+    height: 100%;
 }
 
 .shine::before {
@@ -75,10 +68,32 @@
 }
 
 .profileContent {
-    margin: -2.5em 0 2em 0;
+    position: relative;
+    height: 100%;
+    min-height: 0;
+    background-color: ohma.$colors-surface-base;
+    border-radius: ohma.$rounding;
+
+    &::before {
+        content: '';
+        position: absolute;
+        inset: calc(0.25rem * 1.5);
+        border-radius: calc(#{ohma.$rounding} - calc(0.25rem * 1.5));
+        border: 4px solid var(--flairColor, transparent);
+        pointer-events: none;
+    }
+}
+
+.profileContentInner {
+    position: absolute;
+    inset: calc(0.25rem * 1.5 + 4px);
+    overflow-y: auto;
+    padding: calc(4 * #{ohma.$gap});
 
     display: grid;
-    grid-template-columns: max(300px) 1fr;
+    grid-template-columns: 250px 1fr;
+    grid-template-rows: 250px;
+    align-items: start;
 
     gap: 0.5em;
 
@@ -106,11 +121,11 @@
             border: none;
             height: 1px;
             margin: 0.5em 4em 0.5em 0;
-            background-color: rgba(0, 0, 0, 0.2);
+            background-color: ohma.$colors-surface-subtle;
         }
 
         .studyProgramme {
-            color: ohma.$colors-gray-500;
+            color: ohma.$colors-text;
         }
 
         .committeesWrapper {
@@ -122,7 +137,8 @@
                 p {
                     border-radius: 0.3em;
                     padding: 0.5em;
-                    background-color: ohma.$colors-primary;
+                    background-color: ohma.$colors-accent-blue;
+                    color: ohma.$colors-surface-base;
                     display: inline-block;
                 }
             }
@@ -130,7 +146,7 @@
 
 
         .orderText {
-            color: ohma.$colors-gray-500;
+            color: ohma.$colors-text;
             font-family: ohma.$fonts-secondary;
             font-weight: ohma.$fonts-weight-s;
             font-style: italic;
@@ -146,6 +162,13 @@
             display: flex;
             flex-direction: column;
             align-items: center;
+            gap: ohma.$gap;
+
+            .actionButton {
+                display: flex;
+                align-items: center;
+                gap: 0.5em;
+            }
 
             p {
                 width: 8em;
@@ -156,17 +179,23 @@
     .profileMain {
         .bio {
             margin-bottom: 2em;
+            padding: 1em;
+            border-left: 3px solid ohma.$colors-accent-blue;
+            color: ohma.$colors-ink-hover;
+            background-color: ohma.$colors-surface-raised;
         }
 
         .email, .username, .relationshipStatus {
             width: 10em;
             display: inline-block;
             font-weight: ohma.$fonts-weight-m;
+            color: ohma.$colors-accent-blue;
         }
 
         p {
             font-weight: ohma.$fonts-weight-s;
             margin-bottom: 0.5em;
+            color: ohma.$colors-text;
         }
     }
 
@@ -211,12 +240,14 @@
     @include ohma.layer;
     @include ohma.boxShadow('');
     color: ohma.$colors-text;
+    background-color: ohma.$colors-surface-raised;
+    border-left: 3px solid ohma.$colors-accent-blue;
     padding: ohma.$gap;
-    border-radius: ohma.$rounding;
     margin-top: ohma.$gap;
 
     &:hover {
         @include ohma.boxShadow('hover');
+        background-color: ohma.$colors-surface-hover;
     }
 }
 
diff --git a/src/app/users/[username]/page.tsx b/src/app/users/[username]/page.tsx
index 674edcb4a..89f680388 100644
--- a/src/app/users/[username]/page.tsx
+++ b/src/app/users/[username]/page.tsx
@@ -1,17 +1,25 @@
 import styles from './page.module.scss'
-import ProfileButton from '@/components/UI/ProfileButton'
+import Button from '@/components/UI/Button'
 import { userAuth } from '@/services/users/auth'
 import ProfilePicture from '@/components/User/ProfilePicture'
 import UserDisplayName from '@/components/User/UserDisplayName'
 import { readUserProfileAction } from '@/services/users/actions'
-import { readSpecialImageAction } from '@/services/images/actions'
 import { ServerSession } from '@/auth/session/ServerSession'
+import { flairAuth } from '@/services/flairs/auth'
 import { sexConfig } from '@/services/users/constants'
 import { readUserFlairsAction } from '@/services/flairs/actions'
 import { unwrapActionReturn } from '@/app/redirectToErrorPage'
 import { RelationshipStatus } from '@/prisma-generated-pn-types'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
+import UserAdminNavBar from '@/app/users/[username]/UserAdminNavBar'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import {
+    faCog,
+    faMoneyBill,
+    faQrcode,
+    faSignOut,
+} from '@fortawesome/free-solid-svg-icons'
 import Link from 'next/link'
-import { faCog, faSignOut } from '@fortawesome/free-solid-svg-icons'
 import { notFound, redirect } from 'next/navigation'
 import { v4 as uuid } from 'uuid'
 import React from 'react'
@@ -20,7 +28,6 @@ import type { Metadata } from 'next'
 export const metadata: Metadata = {
     title: 'Profil',
 }
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 
 
 export type PropTypes = {
@@ -57,14 +64,6 @@ export default async function User({ params }: PropTypes) {
         (a, b) => a.rank - b.rank
     )
 
-    const profileImage = profile.user.image ? profile.user.image : await readSpecialImageAction.bind(
-        null, { params: { special: 'DEFAULT_PROFILE_IMAGE' } }
-    )().then(res => {
-        if (!res.success) throw new Error('Kunne ikke finne standard profilbilde')
-        return res.data
-    })
-
-
     const { authorized: canAdministrate } = userAuth.updateProfile.dynamicFields(
         { username: profile.user.username }
     ).auth(session)
@@ -77,6 +76,13 @@ export default async function User({ params }: PropTypes) {
     }
 
     const borderColour = { '--border-colour': relationshipColour[profile.user.relationshipStatus] } as React.CSSProperties
+    const flairColour = {
+        '--flairColor': flairs.length > 0
+            ? `rgb(${flairs[0].colorR}, ${flairs[0].colorG}, ${flairs[0].colorB})`
+            : 'transparent'
+    } as React.CSSProperties
+    const isOwnProfile = profile.user.id === session.user?.id
+    const canAssignFlairs = flairAuth.assignToUser.dynamicFields({}).auth(session)
 
     function memberhipTitle(): string {
         switch (omegaMembership?.group.omegaMembershipGroup?.omegaMembershipLevel) {
@@ -96,120 +102,139 @@ export default async function User({ params }: PropTypes) {
 
     return (
         <div className={styles.wrapper}>
+            <PageTitleSetter title={'Profil'} />
             <div className={styles.profile}>
-                <div
-                    style={ flairs.length > 0 ? {
-                        backgroundColor: `rgb(${flairs[0].colorR}, ${flairs[0].colorG}, ${flairs[0].colorB})`
-                    } : {} }
-                    className={`${styles.top} ${styles.standardFlairColor}`}
-                />
-
-                <div className={styles.profileContent} style={borderColour}>
-                    <ProfilePicture width={240} profileImage={profileImage} className={styles.profilePicture}/>
-                    <div className={styles.header}>
-                        <div className={styles.nameAndId}>
-                            <h1><UserDisplayName
-                                user={profile.user}
-                                width={40}
-                                asClient={false}
-                            /></h1>
-                        </div>
-                        {studyProgrammes.map((studyProgramme, i) =>
-                            <p key={i} className={styles.studyProgramme}>
-                                {studyProgramme.name} {`(${studyProgramme.code})`}
+                <div className={styles.profileContent} style={{ ...borderColour, ...flairColour }}>
+                    <div className={styles.profileContentInner}>
+                        <ProfilePicture width={240} profileImage={profile.user.image} className={styles.profilePicture}/>
+                        <div className={styles.header}>
+                            <div className={styles.nameAndId}>
+                                <h1><UserDisplayName
+                                    user={profile.user}
+                                    width={40}
+                                /></h1>
+                            </div>
+                            {studyProgrammes.map((studyProgramme, i) =>
+                                <p key={i} className={styles.studyProgramme}>
+                                    {studyProgramme.name} {`(${studyProgramme.code})`}
+                                </p>
+                            )}
+                            {classes.map((classGroup, i) =>
+                                <p key={i} className={styles.studyProgramme}>{classGroup.year}. årstrinn</p>
+                            )}
+                            <div className={styles.committeesWrapper}>
+                                {
+                                    committeeMemberships.filter(membership => membership.active).map(membership =>
+                                        <div className={styles.committee} key={uuid()}>
+                                            <Link href={`/committees/${membership.group.committee?.shortName}`}>
+                                                <p>{membership.title}</p>
+                                            </Link>
+                                        </div>
+                                    )
+                                }
+                                {/* TODO change to your own committee title instead of committee name*/}
+                            </div>
+                            <hr />
+                            <p className={styles.orderText}>
+                                { memberhipTitle() }
                             </p>
-                        )}
-                        {classes.map((classGroup, i) =>
-                            <p key={i} className={styles.studyProgramme}>{classGroup.year}. årstrinn</p>
-                        )}
-                        <div className={styles.committeesWrapper}>
-                            {
-                                committeeMemberships.filter(membership => membership.active).map(membership =>
-                                    <div className={styles.committee} key={uuid()}>
-                                        <Link href={`/committees/${membership.group.committee?.shortName}`}>
-                                            <p>{membership.title}</p>
-                                        </Link>
-                                    </div>
-                                )
-                            }
-                            {/* TODO change to your own committee title instead of committee name*/}
-                        </div>
-                        <hr />
-                        <p className={styles.orderText}>
-                            { memberhipTitle() }
-                        </p>
-                    </div>
-                    <div className={styles.leftSection}>
-                        <div className={styles.buttons}>
-                            {canAdministrate &&
-                                <ProfileButton href={`/users/${profile.user.username}/settings`}>
-                                    <FontAwesomeIcon icon={faCog} />
-                                    <p>Innstillinger</p>
-                                </ProfileButton>
-                            }
-                            {profile.user.id === session?.user?.id && (
-                                <ProfileButton href={'/logout'}>
-                                    <FontAwesomeIcon icon={faSignOut} />
-                                    <p>Logg ut</p>
-                                </ProfileButton>
-                            )
-                            }
                         </div>
+                        <div className={styles.leftSection}>
+                            <div className={styles.buttons}>
+                                {canAdministrate &&
+                                    <Link href={`/users/${profile.user.username}/settings`}>
+                                        <Button color="secondary" className={styles.actionButton}>
+                                            <FontAwesomeIcon icon={faCog} />
+                                            <p>Innstillinger</p>
+                                        </Button>
+                                    </Link>
+                                }
+                                {isOwnProfile && (
+                                    <>
+                                        <Link href="/users/me/omegaid">
+                                            <Button color="secondary" className={styles.actionButton}>
+                                                <FontAwesomeIcon icon={faQrcode} />
+                                                <p>Omega-ID</p>
+                                            </Button>
+                                        </Link>
+                                        <Link href="/users/me/money">
+                                            <Button color="secondary" className={styles.actionButton}>
+                                                <FontAwesomeIcon icon={faMoneyBill} />
+                                                <p>Konto</p>
+                                            </Button>
+                                        </Link>
+                                        <Link href="/logout">
+                                            <Button color="secondary" className={styles.actionButton}>
+                                                <FontAwesomeIcon icon={faSignOut} />
+                                                <p>Logg ut</p>
+                                            </Button>
+                                        </Link>
+                                    </>
+                                )}
+                            </div>
 
-                    </div>
-                    <div className={styles.profileMain}>
+                        </div>
+                        <div className={styles.profileMain}>
 
 
-                        {(profile.user.bio !== '') &&
-                            <div className={styles.bio}>
-                                <h2>Bio:</h2>
-                                <p>{profile.user.bio}</p>
-                            </div>
-                        }
+                            {(profile.user.bio !== '') &&
+                                <div className={styles.bio}>
+                                    <h2>Bio:</h2>
+                                    <p>{profile.user.bio}</p>
+                                </div>
+                            }
 
-                        {(profile.user.relationshipStatus !== RelationshipStatus.NOT_SPECIFIED) &&
-                        <p>
-                            <span className={styles.relationshipStatus}>Sivilstatus: </span>
-                            {profile.user.relationshipStatusText ? profile.user.relationshipStatusText :
-                                profile.user.relationshipStatus === RelationshipStatus.SINGLE && 'Singel' ||
-                            profile.user.relationshipStatus === RelationshipStatus.ITS_COMPLICATED && 'Det er komplisert' ||
-                            profile.user.relationshipStatus === RelationshipStatus.TAKEN && 'I et forhold'
+                            {(profile.user.relationshipStatus !== RelationshipStatus.NOT_SPECIFIED) &&
+                            <p>
+                                <span className={styles.relationshipStatus}>Sivilstatus: </span>
+                                {profile.user.relationshipStatusText ? profile.user.relationshipStatusText :
+                                    profile.user.relationshipStatus === RelationshipStatus.SINGLE && 'Singel' ||
+                                    profile.user.relationshipStatus === RelationshipStatus.ITS_COMPLICATED
+                                        && 'Det er komplisert' ||
+                                    profile.user.relationshipStatus === RelationshipStatus.TAKEN && 'I et forhold'
+                                }
 
+                            </p>
                             }
 
-                        </p>
-                        }
-
-
-                        <p>
-                            <span className={styles.email}>E-post:</span>
-                            {profile.user.email}
-                        </p>
-                        <p>
-                            <span className={styles.username}>Brukernavn:</span>
-                            {profile.user.username}
-                        </p>
-                        <p>
-                            <span className={styles.username}>Mobilnummer:</span>
-                            {profile.user.mobile}
-                        </p>
-
-                        {(committeeMemberships.length > 0) && <div>
-                            <h2>Medlemsskap</h2>
-                            {committeeMemberships.map((membership, i) => (
-                                <Link
-                                    className={styles.memberShipInCommitteeLink}
-                                    href={`/committees/${membership.group.committee?.shortName}`}
-                                    key={i}
-                                >
-                                    <p className={styles.memberShipInCommittee}>
-                                        {membership.title} i {membership.group.committee?.name}
-                                    </p>
-                                </Link>
-                            ))}
-                        </div>}
+
+                            <p>
+                                <span className={styles.email}>E-post:</span>
+                                {profile.user.email}
+                            </p>
+                            <p>
+                                <span className={styles.username}>Brukernavn:</span>
+                                {profile.user.username}
+                            </p>
+                            <p>
+                                <span className={styles.username}>Mobilnummer:</span>
+                                {profile.user.mobile}
+                            </p>
+
+                            {(committeeMemberships.length > 0) && <div>
+                                <h2>Medlemsskap</h2>
+                                {committeeMemberships.map((membership, i) => (
+                                    <Link
+                                        className={styles.memberShipInCommitteeLink}
+                                        href={`/committees/${membership.group.committee?.shortName}`}
+                                        key={i}
+                                    >
+                                        <p className={styles.memberShipInCommittee}>
+                                            {membership.title} i {membership.group.committee?.name}
+                                        </p>
+                                    </Link>
+                                ))}
+                            </div>}
+                        </div>
                     </div>
                 </div>
+
+                {isOwnProfile && (
+                    <UserAdminNavBar
+                        username={profile.user.username}
+                        canAssignFlairs={canAssignFlairs.authorized}
+                    />
+                )}
             </div>
         </div>
     )
diff --git a/src/app/users/page.module.scss b/src/app/users/page.module.scss
index 7790eb79e..5adc6a629 100644
--- a/src/app/users/page.module.scss
+++ b/src/app/users/page.module.scss
@@ -1,5 +1,3 @@
-@use '@/styles/ohma';
-
 .makeUser {
     min-width: 30vw;
     display: flex;
@@ -9,5 +7,5 @@
 }
 
 .wrapper {
-    max-height: 100%;
+    height: 100%;
 }
\ No newline at end of file
diff --git a/src/app/users/page.tsx b/src/app/users/page.tsx
index a1a7c7200..e907ca14e 100644
--- a/src/app/users/page.tsx
+++ b/src/app/users/page.tsx
@@ -4,14 +4,16 @@ import PageWrapper from '@/components/PageWrapper/PageWrapper'
 import UserList from '@/components/User/UserList/UserList'
 import CreateUserForm from '@/components/User/CreateUserForm'
 import { UserPagingProvider } from '@/contexts/paging/UserPaging'
+import PageTitleSetter from '@/contexts/PageTitleSetter'
 
 export default async function Users() {
     return (
-        <PageWrapper title="Broedre item Systre" headerItem={
+        <PageWrapper title="Broedre item Systre" fillHeight headerItem={
             <AddHeaderItemPopUp popUpKey="createUser">
                 <CreateUserForm className={styles.makeUser} />
             </AddHeaderItemPopUp>
         }>
+            <PageTitleSetter title={'Brukere'}/>
             <div className={styles.wrapper}>
                 <UserPagingProvider
                     serverRenderedData={[]}
diff --git a/src/auth/authorizer/RequireLevelFromDoubleLevelVisibility.ts b/src/auth/authorizer/RequireLevelFromDoubleLevelVisibility.ts
new file mode 100644
index 000000000..dad5e3694
--- /dev/null
+++ b/src/auth/authorizer/RequireLevelFromDoubleLevelVisibility.ts
@@ -0,0 +1,17 @@
+import { AuthorizerFactory } from './Authorizer'
+import { checkVisibility } from '@/auth/visibility/checkVisibility'
+import type { DoubleLevelVisibilityMatrix, } from '@/services/visibility/types'
+import type { Permission } from '@/prisma-generated-pn-types'
+
+export const RequireLevelFromDoubleLevelVisibility = AuthorizerFactory<
+    { level: 'REGULAR' | 'ADMIN', bypassPermission: Permission | null },
+    { doubleLevelMatrix: DoubleLevelVisibilityMatrix },
+    'USER_NOT_REQUIERED_FOR_AUTHORIZED'
+> (({ session, dynamicFields, staticFields }) => ({
+    success: checkVisibility(
+        session.memberships,
+        staticFields.level === 'REGULAR' ?
+            dynamicFields.doubleLevelMatrix.regularLevel : dynamicFields.doubleLevelMatrix.adminLevel
+    ) || (staticFields.bypassPermission ? session.permissions.includes(staticFields.bypassPermission) : false),
+    session,
+}))
diff --git a/src/auth/authorizer/RequireLevelFromDoubleLevelVisibilityDynamic.ts b/src/auth/authorizer/RequireLevelFromDoubleLevelVisibilityDynamic.ts
new file mode 100644
index 000000000..bb4971d7d
--- /dev/null
+++ b/src/auth/authorizer/RequireLevelFromDoubleLevelVisibilityDynamic.ts
@@ -0,0 +1,23 @@
+import { AuthorizerFactory } from './Authorizer'
+import { checkVisibility } from '@/auth/visibility/checkVisibility'
+import type { DoubleLevelVisibilityMatrix } from '@/services/visibility/types'
+import type { Permission } from '@/prisma-generated-pn-types'
+
+/**
+ * Like RequireLevelFromDoubleLevelVisibility, but the level to check is picked at call time
+ * (dynamicFields) rather than fixed at definition time (staticFields) - for resources where which
+ * level applies depends on the resource's own data, e.g. a news article that requires only the
+ * regular level once published, but the admin level while still a draft.
+ */
+export const RequireLevelFromDoubleLevelVisibilityDynamic = AuthorizerFactory<
+    { bypassPermission: Permission | null },
+    { level: 'REGULAR' | 'ADMIN', doubleLevelMatrix: DoubleLevelVisibilityMatrix },
+    'USER_NOT_REQUIERED_FOR_AUTHORIZED'
+> (({ session, dynamicFields, staticFields }) => ({
+    success: checkVisibility(
+        session.memberships,
+        dynamicFields.level === 'REGULAR' ?
+            dynamicFields.doubleLevelMatrix.regularLevel : dynamicFields.doubleLevelMatrix.adminLevel
+    ) || (staticFields.bypassPermission ? session.permissions.includes(staticFields.bypassPermission) : false),
+    session,
+}))
diff --git a/src/auth/authorizer/RequireVisibility.ts b/src/auth/authorizer/RequireVisibility.ts
index ea8587633..64952d117 100644
--- a/src/auth/authorizer/RequireVisibility.ts
+++ b/src/auth/authorizer/RequireVisibility.ts
@@ -4,11 +4,11 @@ import type { VisibilityMatrix } from '@/services/visibility/types'
 import type { Permission } from '@/prisma-generated-pn-types'
 
 export const RequireVisibility = AuthorizerFactory<
-    { bypassPermission: Permission },
+    { bypassPermission: Permission | null },
     { visibility: VisibilityMatrix },
     'USER_NOT_REQUIERED_FOR_AUTHORIZED'
 > (({ session, dynamicFields, staticFields }) => ({
     success: checkVisibility(session.memberships, dynamicFields.visibility) ||
-        session.permissions.includes(staticFields.bypassPermission),
+        (staticFields.bypassPermission ? session.permissions.includes(staticFields.bypassPermission) : false),
     session,
 }))
diff --git a/src/auth/authorizer/RequireVisibilityFilter.ts b/src/auth/authorizer/RequireVisibilityFilter.ts
index bd1f15798..17528beb8 100644
--- a/src/auth/authorizer/RequireVisibilityFilter.ts
+++ b/src/auth/authorizer/RequireVisibilityFilter.ts
@@ -3,13 +3,14 @@ import { visibilityFilter } from '@/auth/visibility/visibilityFilter'
 import type { Permission } from '@/prisma-generated-pn-types'
 
 export const RequireVisibilityFilter = AuthorizerFactory<
-    { bypassPermission: Permission },
+    { bypassPermission: Permission | null },
     Record<string, never>,
     'USER_NOT_REQUIERED_FOR_AUTHORIZED',
     ReturnType<typeof visibilityFilter> | undefined
 > (({ session, staticFields }) => ({
     success: true,
-    prismaWhereFilter:
-        session.permissions.includes(staticFields.bypassPermission) ? undefined : visibilityFilter(session.memberships),
+    prismaWhereFilter: (
+        staticFields.bypassPermission && session.permissions.includes(staticFields.bypassPermission)
+    ) ? undefined : visibilityFilter(session.memberships),
     session,
 }))
diff --git a/src/auth/session/useSession.ts b/src/auth/session/useSession.ts
index 6d1756d23..f9bfb2a3d 100644
--- a/src/auth/session/useSession.ts
+++ b/src/auth/session/useSession.ts
@@ -1,16 +1,17 @@
 'use client'
 import { Session } from './Session'
-import { DefaultPermissionsContext } from '@/contexts/DefaultPermissions'
+import { useDefaultPermissions } from '@/contexts/ClientData'
 import { useSession as useSessionNextAuth } from 'next-auth/react'
-import { useContext } from 'react'
 
 export { SessionProvider } from 'next-auth/react'
 
 type UseSessionReturn = { loading: true } | { loading: false, session: Session<'NO_USER'> | Session<'HAS_USER'> }
 
 export function useSession(): UseSessionReturn {
-    const defaultPermissionsContext = useContext(DefaultPermissionsContext)
-    const defaultPermissions = defaultPermissionsContext ? defaultPermissionsContext.defaultPermissions : []
+    // Default permissions are seeded into ClientData by layout, so this resolves synchronously.
+    const defaultPermissionsResult = useDefaultPermissions()
+    const defaultPermissions =
+        defaultPermissionsResult.status === 'success' ? defaultPermissionsResult.defaultPermissions : []
 
     const { data: session, status: nextAuthStatus } = useSessionNextAuth()
     switch (nextAuthStatus) {
diff --git a/src/auth/visibility/describeVisibility.ts b/src/auth/visibility/describeVisibility.ts
new file mode 100644
index 000000000..d84f74a8a
--- /dev/null
+++ b/src/auth/visibility/describeVisibility.ts
@@ -0,0 +1,21 @@
+import { findGroup } from '@/lib/groups/groupOptions'
+import type { VisibilityCondition, VisibilityMatrix } from '@/services/visibility/types'
+import type { ExpandedGroup } from '@/services/groups/types'
+
+function describeCondition(condition: VisibilityCondition, groups: ExpandedGroup[] | null): string {
+    const groupName = findGroup(groups, condition.groupId)?.name ?? `gruppe #${condition.groupId}`
+    return condition.type === 'ACTIVE' ? `aktiv i ${groupName}` : `var i ${groupName} i orden ${condition.order}`
+}
+
+/**
+ * A human readable Norwegian description of a VisibilityMatrix, e.g. for showing who can see or
+ * administrate a resource. Group names are resolved from `groups` (falling back to the raw id
+ * when a group can't be found there).
+ */
+export function describeMatrix(visibility: VisibilityMatrix, groups: ExpandedGroup[] | null): string {
+    if (visibility.requirements.length === 0) return 'Synlig for alle.'
+    const requirementDescriptions = visibility.requirements.map(requirement =>
+        requirement.conditions.map(condition => describeCondition(condition, groups)).join(' ELLER ')
+    )
+    return `Krever: ${requirementDescriptions.map(description => `(${description})`).join(' OG ')}`
+}
diff --git a/src/auth/visibility/emptyVisibility.ts b/src/auth/visibility/emptyVisibility.ts
new file mode 100644
index 000000000..7aa92fc65
--- /dev/null
+++ b/src/auth/visibility/emptyVisibility.ts
@@ -0,0 +1,15 @@
+import type { DoubleLevelVisibilityMatrix } from '@/services/visibility/types'
+
+/**
+ * A DoubleLevelVisibilityMatrix with one empty requirement on each level. A requirement with no
+ * conditions can never be satisfied (see checkVisibility), so an authorizer fed this denies
+ * everyone who does not hold the bypass permission - the safe direction to fail in when the real
+ * visibility could not be read, and it still lets the rest of an admin panel render.
+ *
+ * Only ever safe to authorize against: never hand it to an editor, since saving it would overwrite
+ * the real requirements with these empty ones.
+ */
+export const EMPTY_VISIBILITY: DoubleLevelVisibilityMatrix = {
+    regularLevel: { requirements: [{ conditions: [] }] },
+    adminLevel: { requirements: [{ conditions: [] }] },
+}
diff --git a/src/contexts/ClientData.tsx b/src/contexts/ClientData.tsx
new file mode 100644
index 000000000..a296f2f6e
--- /dev/null
+++ b/src/contexts/ClientData.tsx
@@ -0,0 +1,198 @@
+'use client'
+import { readDefaultPermissionsAction } from '@/services/permissions/actions'
+import { readAllStandardImagesAction } from '@/services/images/standard/actions'
+import { readGroupsExpandedAction } from '@/services/groups/actions'
+import { specialImagePanels } from '@/services/images/specialPanels/constants'
+import { createContext, useContext, useState, useCallback, useEffect, useRef } from 'react'
+import type { ErrorCode } from '@/services/error'
+import type { ExpandedGroup } from '@/services/groups/types'
+import type { ExpandedImageCollection } from '@/services/images/subservice/types'
+import type { Image, Permission, StandardImage } from '@/prisma-generated-pn-types'
+import type { ReactNode } from 'react'
+import type { SessionMaybeUser } from '@/auth/session/Session'
+
+type ClientDataResult<Key extends string, Data> =
+    | { status: 'loading' }
+    | { status: 'error', errorCode: ErrorCode }
+    | ({ status: 'success' } & { [P in Key]: Data })
+
+type ClientDataContext = {
+    defaultPermissions: ClientDataResult<'defaultPermissions', Permission[]> | null,
+    standardImages: ClientDataResult<'standardImages', Record<StandardImage, Image>> | null,
+    groups: ClientDataResult<'groups', ExpandedGroup[]> | null,
+    specialCollections: ClientDataResult<'specialCollections', ExpandedImageCollection[]> | null,
+    loadDefaultPermissions: () => void,
+    loadStandardImages: () => void,
+    loadGroups: () => void,
+    loadSpecialCollections: () => void,
+}
+
+const ClientDataContext = createContext<ClientDataContext | null>(null)
+
+type PropTypes = {
+    children: ReactNode,
+    session: SessionMaybeUser,
+    defaultPermissions?: Permission[],
+    standardImages?: Record<StandardImage, Image>,
+    groups?: ExpandedGroup[],
+    specialCollections?: ExpandedImageCollection[],
+}
+
+/**
+ * The single client-side cache for shared server data. Main Layout may seed
+ * the cach from server-side data, but the cache will be updated on the client side as needed.
+ */
+export default function ClientDataProvider({
+    children,
+    session,
+    ...initialData
+}: PropTypes) {
+    const [defaultPermissions, setDefaultPermissions] = useState<
+        ClientDataResult<'defaultPermissions', Permission[]> | null
+    >(
+        initialData.defaultPermissions
+            ? { status: 'success', defaultPermissions: initialData.defaultPermissions }
+            : null
+    )
+    const [standardImages, setStandardImages] = useState<
+        ClientDataResult<'standardImages', Record<StandardImage, Image>> | null
+    >(
+        initialData.standardImages
+            ? { status: 'success', standardImages: initialData.standardImages }
+            : null
+    )
+    const [groups, setGroups] = useState<
+        ClientDataResult<'groups', ExpandedGroup[]> | null
+    >(
+        initialData.groups
+            ? { status: 'success', groups: initialData.groups }
+            : null
+    )
+    const [specialCollections, setSpecialCollections] = useState<
+        ClientDataResult<'specialCollections', ExpandedImageCollection[]> | null
+    >(
+        initialData.specialCollections
+            ? { status: 'success', specialCollections: initialData.specialCollections }
+            : null
+    )
+
+    const defaultPermissionsInFlight = useRef(false)
+    const loadDefaultPermissions = useCallback(async () => {
+        if (defaultPermissionsInFlight.current) return
+        defaultPermissionsInFlight.current = true
+        setDefaultPermissions({ status: 'loading' })
+        const res = await readDefaultPermissionsAction()
+        setDefaultPermissions(
+            res.success
+                ? { status: 'success', defaultPermissions: res.data }
+                : { status: 'error', errorCode: res.errorCode }
+        )
+        defaultPermissionsInFlight.current = false
+    }, [])
+
+    const standardImagesInFlight = useRef(false)
+    const loadStandardImages = useCallback(async () => {
+        if (standardImagesInFlight.current) return
+        standardImagesInFlight.current = true
+        setStandardImages({ status: 'loading' })
+        const res = await readAllStandardImagesAction()
+        setStandardImages(
+            res.success
+                ? { status: 'success', standardImages: res.data }
+                : { status: 'error', errorCode: res.errorCode }
+        )
+        standardImagesInFlight.current = false
+    }, [])
+
+    const groupsInFlight = useRef(false)
+    const loadGroups = useCallback(async () => {
+        if (groupsInFlight.current) return
+        groupsInFlight.current = true
+        setGroups({ status: 'loading' })
+        const res = await readGroupsExpandedAction()
+        setGroups(
+            res.success
+                ? { status: 'success', groups: res.data }
+                : { status: 'error', errorCode: res.errorCode }
+        )
+        groupsInFlight.current = false
+    }, [])
+
+    const specialCollectionsInFlight = useRef(false)
+    const loadSpecialCollections = useCallback(async () => {
+        if (specialCollectionsInFlight.current) return
+        specialCollectionsInFlight.current = true
+        setSpecialCollections({ status: 'loading' })
+        const authorizedPanels = Object.values(specialImagePanels).filter(
+            panel => panel.auth.dynamicFields({}).auth(session).authorized
+        )
+        const results = await Promise.all(authorizedPanels.map(panel => panel.readCollectionAction()))
+        setSpecialCollections({
+            status: 'success',
+            specialCollections: results.flatMap(res => (res.success ? [res.data] : [])),
+        })
+        specialCollectionsInFlight.current = false
+    }, [session])
+
+    // Special collections are gated by the session's authorizers - if the session changes (e.g. a
+    // permission update reaches the client through a router.refresh()) the cache must be dropped so
+    // it gets re-authorized and re-read, rather than keep serving access decisions from the first load.
+    const [previousSession, setPreviousSession] = useState(session)
+    if (previousSession !== session) {
+        setPreviousSession(session)
+        setSpecialCollections(null)
+    }
+
+    return (
+        <ClientDataContext.Provider value={{
+            defaultPermissions,
+            standardImages,
+            groups,
+            specialCollections,
+            loadDefaultPermissions,
+            loadStandardImages,
+            loadGroups,
+            loadSpecialCollections,
+        }}>
+            {children}
+        </ClientDataContext.Provider>
+    )
+}
+
+function useClientData(): ClientDataContext {
+    const context = useContext(ClientDataContext)
+    if (!context) throw new Error('ClientData hooks must be used within a ClientDataProvider')
+    return context
+}
+
+export function useDefaultPermissions(): ClientDataResult<'defaultPermissions', Permission[]> {
+    const { defaultPermissions, loadDefaultPermissions } = useClientData()
+    useEffect(() => {
+        if (defaultPermissions === null) loadDefaultPermissions()
+    }, [defaultPermissions, loadDefaultPermissions])
+    return defaultPermissions ?? { status: 'loading' }
+}
+
+export function useStandardImages(): ClientDataResult<'standardImages', Record<StandardImage, Image>> {
+    const { standardImages, loadStandardImages } = useClientData()
+    useEffect(() => {
+        if (standardImages === null) loadStandardImages()
+    }, [standardImages, loadStandardImages])
+    return standardImages ?? { status: 'loading' }
+}
+
+export function useGroups(): ClientDataResult<'groups', ExpandedGroup[]> {
+    const { groups, loadGroups } = useClientData()
+    useEffect(() => {
+        if (groups === null) loadGroups()
+    }, [groups, loadGroups])
+    return groups ?? { status: 'loading' }
+}
+
+export function useSpecialCollections(): ClientDataResult<'specialCollections', ExpandedImageCollection[]> {
+    const { specialCollections, loadSpecialCollections } = useClientData()
+    useEffect(() => {
+        if (specialCollections === null) loadSpecialCollections()
+    }, [specialCollections, loadSpecialCollections])
+    return specialCollections ?? { status: 'loading' }
+}
diff --git a/src/contexts/DefaultPermissions.tsx b/src/contexts/DefaultPermissions.tsx
deleted file mode 100644
index dd28908b3..000000000
--- a/src/contexts/DefaultPermissions.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client'
-import { createContext } from 'react'
-import type { Permission } from '@/prisma-generated-pn-types'
-import type { ReactNode } from 'react'
-
-type PropTypes = {
-    children: ReactNode,
-    defaultPermissions: Permission[],
-}
-
-/**
- * This is a context thatsaves the default permissions for all users on the client
- * It is manly used for the useSession hook to provide permissions for unauthenticated users
- */
-export const DefaultPermissionsContext = createContext<{
-    defaultPermissions: Permission[],
-} | null>(null)
-
-/**
- * A context that holds server fetched default permissions for use on the client
- * @param children - the children to render with access to the default permissions context
- * @param defaultPermissions - the default permissions to save in the context
- * @returns
- */
-export default function DefaultPermissionsProvider({ children, defaultPermissions }: PropTypes) {
-    return (
-        <DefaultPermissionsContext.Provider value={{ defaultPermissions }}>
-            {children}
-        </DefaultPermissionsContext.Provider>
-    )
-}
-
diff --git a/src/contexts/ImageDisplayProvider.tsx b/src/contexts/ImageDisplayProvider.tsx
deleted file mode 100644
index 7ab05a04e..000000000
--- a/src/contexts/ImageDisplayProvider.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import ImageDisplay from '@/components/Image/ImageList/ImageDisplay'
-import React, { createContext, useState } from 'react'
-import type { Image } from '@/prisma-generated-pn-types'
-import type { ImageSizeOptions } from '@/components/Image/Image'
-
-/**
- * This is a contect that displays a image to the user using the imageSelectionContext.
- */
-export const ImageDisplayContext = createContext<{
-    setImage: (image: Image | null) => void;
-    currentImage: Image | null;
-    imageSize: ImageSizeOptions;
-    setImageSize: (size: ImageSizeOptions) => void;
-        } | null>(null)
-
-type PropTypes = {
-    children: React.ReactNode,
-}
-
-/**
- * @returns - a context provider that provides the imageSelect
- */
-export default function ImageDisplayProvider({ children }: PropTypes) {
-    const [image, setImage] = useState<Image | null>(null)
-    const [imageSize, setImageSize] = useState<ImageSizeOptions>('LARGE')
-
-    return (
-        <ImageDisplayContext.Provider value={{
-            setImage,
-            currentImage: image,
-            imageSize,
-            setImageSize,
-        }}>
-            {children}
-            <ImageDisplay />
-        </ImageDisplayContext.Provider>
-    )
-}
diff --git a/src/contexts/ImageSelection.tsx b/src/contexts/ImageSelection.tsx
deleted file mode 100644
index e7200ab49..000000000
--- a/src/contexts/ImageSelection.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client'
-
-import React, { createContext, useState } from 'react'
-import type { Image } from '@/prisma-generated-pn-types'
-
-/**
- * The context for selecting an image from a list of images
- * @prop selectionMode - Whether the selection mode is active
- * @prop setSelectionMode - A function to set the selection mode
- * @prop selectedImage - The currently selected image
- * @prop setSelectedImage - A function to set the selected image
- */
-export const ImageSelectionContext = createContext<{
-    selectionMode: boolean,
-    setSelectionMode: (selectionMode: boolean) => void,
-    selectedImage: Image | null,
-    setSelectedImage: (image: Image | null) => void,
-        } | null>(null)
-
-type PropTypes = {
-    children: React.ReactNode,
-    defaultSelectionMode?: boolean,
-    defaultImage?: Image,
-}
-
-/**
- * A context to select an image from a list of images, ImageList and other components from comonents/image
- * implement this context to allow for selection of images
- * @param children - The children to wrap the provider around (has access to the context)
- * @param defaultSelectionMode - The starting selection mode
- * @param defaultImage - The starting image that is selected
- * @returns
- */
-export default function ImageSelectionProvider({ children, defaultSelectionMode = false, defaultImage }: PropTypes) {
-    const [image, setImage] = useState<Image | null>(defaultImage || null)
-    const [selectionModeActive, setSelectionModeActive] = useState(defaultSelectionMode)
-
-    return (
-        <ImageSelectionContext.Provider value={{
-            selectionMode: selectionModeActive,
-            setSelectionMode: setSelectionModeActive,
-            selectedImage: image,
-            setSelectedImage: setImage,
-        }}>
-            {children}
-        </ImageSelectionContext.Provider>
-    )
-}
diff --git a/src/contexts/PageTitle.tsx b/src/contexts/PageTitle.tsx
new file mode 100644
index 000000000..9563043b6
--- /dev/null
+++ b/src/contexts/PageTitle.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import React, { createContext, useContext, useState } from 'react'
+
+type PageTitleContextType = {
+    title: string
+    setTitle: (t: string) => void
+}
+
+const PageTitleContext = createContext<PageTitleContextType | undefined>(undefined)
+
+export function PageTitleProvider({ children }: { children: React.ReactNode }) {
+    const [title, setTitle] = useState('')
+    return (
+        <PageTitleContext.Provider value={{ title, setTitle }}>
+            {children}
+        </PageTitleContext.Provider>
+    )
+}
+
+export function usePageTitle() {
+    const ctx = useContext(PageTitleContext)
+    if (!ctx) throw new Error('usePageTitle must be used within PageTitleProvider')
+    return ctx
+}
diff --git a/src/contexts/PageTitleSetter.tsx b/src/contexts/PageTitleSetter.tsx
new file mode 100644
index 000000000..37aa758d0
--- /dev/null
+++ b/src/contexts/PageTitleSetter.tsx
@@ -0,0 +1,13 @@
+'use client'
+
+import { usePageTitle } from './PageTitle'
+import { useEffect } from 'react'
+
+export default function PageTitleSetter({ title }: { title: string }) {
+    const { setTitle } = usePageTitle()
+    useEffect(() => {
+        setTitle(title)
+        return () => setTitle('')
+    }, [title, setTitle])
+    return null
+}
diff --git a/src/contexts/paging/DynamicImageCollectionPaging.tsx b/src/contexts/paging/DynamicImageCollectionPaging.tsx
new file mode 100644
index 000000000..9e2dfe023
--- /dev/null
+++ b/src/contexts/paging/DynamicImageCollectionPaging.tsx
@@ -0,0 +1,18 @@
+'use client'
+import { generatePaging } from './PagingGenerator'
+import { readDynamicImageCollectionsPageAction } from '@/services/images/dynamic/actions'
+import type { ImageCollectionCursor, ImageCollectionPagingDetails } from '@/services/images/dynamic/types'
+import type { ExpandedImageCollection } from '@/services/images/subservice/types'
+
+export type PageSizeDynamicImageCollection = 12
+
+export const [DynamicImageCollectionPagingContext, DynamicImageCollectionPagingProvider] = generatePaging<
+    ExpandedImageCollection,
+    ImageCollectionCursor,
+    PageSizeDynamicImageCollection,
+    ImageCollectionPagingDetails
+>({
+    fetcher: async ({ paging }) => await readDynamicImageCollectionsPageAction({ params: { paging } }),
+    getCursor: ({ lastElement }) => ({ id: lastElement.id }),
+})
+
diff --git a/src/contexts/paging/ImageCollectionPaging.tsx b/src/contexts/paging/ImageCollectionPaging.tsx
deleted file mode 100644
index 6550e01c2..000000000
--- a/src/contexts/paging/ImageCollectionPaging.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-'use client'
-import { generatePaging } from './PagingGenerator'
-import { readImageCollectionsPageAction } from '@/services/images/collections/actions'
-import type { ImageCollectionCursor, ImageCollectionPageReturn } from '@/services/images/collections/types'
-
-export type PageSizeImageCollection = 12
-
-export const [ImageCollectionPagingContext, ImageCollectionPagingProvider] = generatePaging<
-    ImageCollectionPageReturn,
-    ImageCollectionCursor,
-    PageSizeImageCollection
->({
-    fetcher: async ({ paging }) => await readImageCollectionsPageAction(paging),
-    getCursor: ({ lastElement }) => ({ id: lastElement.id }),
-})
-
diff --git a/src/contexts/paging/ImagePaging.tsx b/src/contexts/paging/ImagePaging.tsx
deleted file mode 100644
index d4c23cc87..000000000
--- a/src/contexts/paging/ImagePaging.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-'use client'
-import { generatePaging } from './PagingGenerator'
-import { readImagesPageAction } from '@/services/images/actions'
-import type { Image } from '@/prisma-generated-pn-types'
-import type { ImageCursor, ImageDetails } from '@/services/images/types'
-
-export type PageSizeImage = 30
-
-export const [ImagePagingContext, ImagePagingProvider] = generatePaging<
-    Image,
-    ImageCursor,
-    PageSizeImage,
-    ImageDetails
->({
-    fetcher: async ({ paging }) => await readImagesPageAction({ params: { paging } }),
-    getCursor: ({ lastElement }) => ({ id: lastElement.id }),
-})
diff --git a/src/contexts/paging/SchoolPaging.tsx b/src/contexts/paging/SchoolPaging.tsx
index ec0ebe7c3..1ef036206 100644
--- a/src/contexts/paging/SchoolPaging.tsx
+++ b/src/contexts/paging/SchoolPaging.tsx
@@ -1,6 +1,6 @@
 'use client'
 import { generatePaging } from './PagingGenerator'
-import { readSchoolsPageAction } from '@/education/schools/actions'
+import { readExpandedSchoolsPageAction } from '@/education/schools/actions'
 import type { ExpandedSchool, SchoolCursor } from '@/services/education/schools/types'
 
 export type PageSizeSchool = 8
@@ -10,6 +10,6 @@ export const [SchoolPagingContext, SchoolPagingProvider] = generatePaging<
     SchoolCursor,
     PageSizeSchool
 >({
-    fetcher: async ({ paging }) => await readSchoolsPageAction(paging),
+    fetcher: async ({ paging }) => await readExpandedSchoolsPageAction({ params: { paging } }),
     getCursor: ({ lastElement }) => ({ id: lastElement.id }),
 })
diff --git a/src/hooks/useEditMode.ts b/src/hooks/useEditMode.ts
index 6438c92a2..80d4a9e5e 100644
--- a/src/hooks/useEditMode.ts
+++ b/src/hooks/useEditMode.ts
@@ -38,10 +38,15 @@ export default function useEditMode({
         addEditableContent: () => { },
         removeEditableContent: () => { },
     }
+    // authResult (and, when it's used, authorizer) is a freshly constructed object on every
+    // render of the caller - useAuthorizer calls authorizer.auth(...) unmemoized, and several
+    // callers construct their authorizer inline. Depending on the object itself would re-run
+    // this effect, and re-render every subscriber of EditModeContext, on every render of every
+    // component using this hook - depend on the primitive instead.
     useEffect(() => {
         if (authResult.authorized) addEditableContent(uniqueKey)
         if (!authResult.authorized) removeEditableContent(uniqueKey)
-    }, [authorizer, authResult, uniqueKey, addEditableContent, removeEditableContent])
+    }, [authResult.authorized, uniqueKey, addEditableContent, removeEditableContent])
     useEffect(() => () => {
         removeEditableContent(uniqueKey)
     }, [uniqueKey, removeEditableContent])
diff --git a/src/lib/feide/userRoutines.ts b/src/lib/feide/userRoutines.ts
index ed85a8422..eaeb3882a 100644
--- a/src/lib/feide/userRoutines.ts
+++ b/src/lib/feide/userRoutines.ts
@@ -1,14 +1,14 @@
 import '@pn-server-only'
 import { fetchStudyProgrammesFromFeide } from './api'
 import { upsertStudyProgrammes } from '@/services/groups/studyProgrammes/create'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import { prisma } from '@/prisma-pn-client-instance'
 
 export async function updateUserStudyProgrammes(userId: number, accessToken: string) {
     const feideStudyProgrammes = await fetchStudyProgrammesFromFeide(accessToken)
     const studyProgrammes = await upsertStudyProgrammes(feideStudyProgrammes)
 
-    const { order } = await readCurrentOmegaOrder()
+    const { order } = await omegaOrderOperations.readCurrent({ bypassAuth: true })
 
     // Find current user study programmes
     const memberships = await prisma.membership.findMany({
diff --git a/src/lib/groups/checkGroupValidity.ts b/src/lib/groups/checkGroupValidity.ts
new file mode 100644
index 000000000..6908278f8
--- /dev/null
+++ b/src/lib/groups/checkGroupValidity.ts
@@ -0,0 +1,170 @@
+import logger from '@/lib/logger'
+import type { GroupWithDumbRelations, GroupWithRelations } from '@/services/groups/types'
+import type {
+    Class, Committee, InterestGroup, ManualGroup, OmegaMembershipGroup, StudyProgramme
+} from '@/prisma-generated-pn-types'
+
+export type ValidatedGroup<
+    CommitteeKeys extends keyof Committee,
+    ManualGroupKeys extends keyof ManualGroup,
+    ClassKeys extends keyof Class,
+    InterestGroupKeys extends keyof InterestGroup,
+    OmegaMembershipGroupKeys extends keyof OmegaMembershipGroup,
+    StudyProgrammeKeys extends keyof StudyProgramme,
+    ExtraFields extends object,
+> = GroupWithRelations<
+    CommitteeKeys,
+    ManualGroupKeys,
+    ClassKeys,
+    InterestGroupKeys,
+    OmegaMembershipGroupKeys,
+    StudyProgrammeKeys
+> & Omit<ExtraFields, 'committee' | 'manualGroup' | 'class' | 'interestGroup' | 'omegaMembershipGroup' | 'studyProgramme'>
+
+export type GroupValidityCheck<
+    CommitteeKeys extends keyof Committee,
+    ManualGroupKeys extends keyof ManualGroup,
+    ClassKeys extends keyof Class,
+    InterestGroupKeys extends keyof InterestGroup,
+    OmegaMembershipGroupKeys extends keyof OmegaMembershipGroup,
+    StudyProgrammeKeys extends keyof StudyProgramme,
+    ExtraFields extends object,
+> =
+    | {
+        valid: true,
+        group: ValidatedGroup<
+            CommitteeKeys, ManualGroupKeys, ClassKeys, InterestGroupKeys, OmegaMembershipGroupKeys,
+            StudyProgrammeKeys, ExtraFields
+        >,
+    }
+    | { valid: false }
+
+/**
+ * WARNING: Make sure that you have actually included the relations in the query.
+ * Checks that the group has a relation matching the group type it claims to have. Pure - never
+ * throws - so it stays reusable regardless of how a caller wants to handle an invalid group.
+ * Callers that just want the old throw-or-continue behaviour should use `assertGroupValidity`
+ * from `@/services/groups/operations` instead.
+ * @param group - The group to check the validity of
+ * @returns - Whether the group is valid, and if so, the group with the correct relation (better typing)
+ */
+export function checkGroupValidity<
+    CommitteeKeys extends keyof Committee,
+    ManualGroupKeys extends keyof ManualGroup,
+    ClassKeys extends keyof Class,
+    InterestGroupKeys extends keyof InterestGroup,
+    OmegaMembershipGroupKeys extends keyof OmegaMembershipGroup,
+    StudyProgrammeKeys extends keyof StudyProgramme,
+    ExtraFields extends object,
+>(group: GroupWithDumbRelations<
+    CommitteeKeys,
+    ManualGroupKeys,
+    ClassKeys,
+    InterestGroupKeys,
+    OmegaMembershipGroupKeys,
+    StudyProgrammeKeys
+> & ExtraFields): GroupValidityCheck<
+    CommitteeKeys, ManualGroupKeys, ClassKeys, InterestGroupKeys, OmegaMembershipGroupKeys, StudyProgrammeKeys, ExtraFields
+> {
+    switch (group.groupType) {
+        case 'COMMITTEE':
+            if (!group.committee) {
+                logger.error(
+                    'Group with type committee without committee relation detected',
+                    group
+                )
+                return { valid: false }
+            }
+            return {
+                valid: true,
+                group: {
+                    ...group,
+                    groupType: 'COMMITTEE',
+                    committee: group.committee,
+                }
+            }
+        case 'MANUAL_GROUP':
+            if (!group.manualGroup) {
+                logger.error(
+                    'Group with type manual group without manual group relation detected',
+                    group
+                )
+                return { valid: false }
+            }
+            return {
+                valid: true,
+                group: {
+                    ...group,
+                    groupType: 'MANUAL_GROUP',
+                    manualGroup: group.manualGroup,
+                }
+            }
+        case 'CLASS':
+            if (!group.class) {
+                logger.error(
+                    'Group with type class without class relation detected',
+                    group
+                )
+                return { valid: false }
+            }
+            return {
+                valid: true,
+                group: {
+                    ...group,
+                    groupType: 'CLASS',
+                    class: group.class,
+                }
+            }
+        case 'INTEREST_GROUP':
+            if (!group.interestGroup) {
+                logger.error(
+                    'Group with type interest group without interest group relation detected',
+                    group
+                )
+                return { valid: false }
+            }
+            return {
+                valid: true,
+                group: {
+                    ...group,
+                    groupType: 'INTEREST_GROUP',
+                    interestGroup: group.interestGroup,
+                }
+            }
+        case 'OMEGA_MEMBERSHIP_GROUP':
+            if (!group.omegaMembershipGroup) {
+                logger.error(
+                    'Group with type omega membership group without omega membership group relation detected',
+                    group
+                )
+                return { valid: false }
+            }
+            return {
+                valid: true,
+                group: {
+                    ...group,
+                    groupType: 'OMEGA_MEMBERSHIP_GROUP',
+                    omegaMembershipGroup: group.omegaMembershipGroup,
+                }
+            }
+        case 'STUDY_PROGRAMME':
+            if (!group.studyProgramme) {
+                logger.error(
+                    'Group with type study programme without study programme relation detected',
+                    group
+                )
+                return { valid: false }
+            }
+            return {
+                valid: true,
+                group: {
+                    ...group,
+                    groupType: 'STUDY_PROGRAMME',
+                    studyProgramme: group.studyProgramme,
+                }
+            }
+        default:
+            logger.error('Group with unknown group type detected', group)
+            return { valid: false }
+    }
+}
diff --git a/src/lib/groups/groupOptions.ts b/src/lib/groups/groupOptions.ts
new file mode 100644
index 000000000..788ec3079
--- /dev/null
+++ b/src/lib/groups/groupOptions.ts
@@ -0,0 +1,17 @@
+import type { ExpandedGroup } from '@/services/groups/types'
+
+export function findGroup(groups: ExpandedGroup[] | null, groupId: number): ExpandedGroup | undefined {
+    return groups?.find(group => group.id === groupId)
+}
+
+/**
+ * The orders a group has actually had active members in, as Select options - from
+ * `group.firstOrder` up to and including `group.order`.
+ */
+export function orderOptions(group: ExpandedGroup | undefined) {
+    if (!group) return []
+    return Array.from(
+        { length: group.order - group.firstOrder + 1 },
+        (_, offset) => group.firstOrder + offset
+    ).map(order => ({ value: order, label: order.toString(), key: order.toString() }))
+}
diff --git a/src/lib/groups/inferGroupName.ts b/src/lib/groups/inferGroupName.ts
new file mode 100644
index 000000000..0e7886b14
--- /dev/null
+++ b/src/lib/groups/inferGroupName.ts
@@ -0,0 +1,24 @@
+import { OmegaMembershipLevelConfig } from '@/services/groups/constants'
+import type { GroupWithRelationsNameInferencer } from '@/services/groups/types'
+
+/**
+ * Gives a group a display name based on its group type and the matching type-specific relation.
+ */
+export function inferGroupName(group: GroupWithRelationsNameInferencer): string {
+    switch (group.groupType) {
+        case 'COMMITTEE':
+            return group.committee.name
+        case 'MANUAL_GROUP':
+            return group.manualGroup.name
+        case 'CLASS':
+            return `${group.class.year}. Klasse`
+        case 'INTEREST_GROUP':
+            return group.interestGroup.name
+        case 'OMEGA_MEMBERSHIP_GROUP':
+            return OmegaMembershipLevelConfig[group.omegaMembershipGroup?.omegaMembershipLevel].name
+        case 'STUDY_PROGRAMME':
+            return group.studyProgramme?.name
+        default:
+    }
+    return 'Group with unknown name'
+}
diff --git a/src/lib/paging/schema.ts b/src/lib/paging/schema.ts
index 2fea77dc1..4b68d5eb9 100644
--- a/src/lib/paging/schema.ts
+++ b/src/lib/paging/schema.ts
@@ -38,3 +38,19 @@ export function readPageInputSchemaObject<PageSize extends number, Cursor, Detai
         paging: readPageInputSchema(pageSize, cursor, details),
     })
 }
+
+/**
+ * Infers the Cursor type out of a schema built by readPageInputSchemaObject, so that frontend
+ * paging contexts do not need to hand-declare a Cursor type that has to be kept in sync manually.
+ */
+export type InferPagingCursor<Schema extends z.ZodTypeAny> =
+    z.infer<Schema> extends { paging: { page: infer Page } }
+        ? (Page extends { cursor: infer Cursor } ? Exclude<Cursor, null> : never)
+        : never
+
+/**
+ * Infers the Details type out of a schema built by readPageInputSchemaObject, so that frontend
+ * paging contexts do not need to hand-declare a Details type that has to be kept in sync manually.
+ */
+export type InferPagingDetails<Schema extends z.ZodTypeAny> =
+    z.infer<Schema> extends { paging: { details?: infer Details } } ? Details : never
diff --git a/src/lib/queryParams/queryParams.ts b/src/lib/queryParams/queryParams.ts
index a4d21388c..4df102021 100644
--- a/src/lib/queryParams/queryParams.ts
+++ b/src/lib/queryParams/queryParams.ts
@@ -3,6 +3,7 @@ import type { QueryParam } from './QueryParam'
 export const QueryParams = {
     eventTags: new StringArrayQueryParam('event-tags'),
     onlyActive: new BooleanQueryParam('only-active'),
+    onlyAdministratedCollections: new BooleanQueryParam('only-administrated-collections'),
     userId: new NumberQueryParam('user-id'),
     companyName: new StringQueryParam('company-name'),
     token: new StringQueryParam('token'),
diff --git a/src/lib/standardStore/files.ts b/src/lib/standardStore/files.ts
new file mode 100644
index 000000000..1bec96ad6
--- /dev/null
+++ b/src/lib/standardStore/files.ts
@@ -0,0 +1,326 @@
+import { licenseOperations } from '@/services/licenses/operations'
+import { readFile } from 'fs/promises'
+import { dirname, join } from 'path'
+import { fileURLToPath } from 'url'
+import { File } from 'node:buffer'
+import type { StandardLicenseName } from '@/services/licenses/constants'
+import type { imageSchemas } from '@/services/images/subservice/schemas'
+import type { z } from 'zod'
+
+const standardStoreRoot = join(dirname(fileURLToPath(import.meta.url)), '../../../standard_store/')
+
+export type StandardStoreFile = {
+    file: () => Promise<File>,
+    credit: () => string | null,
+    license: () => StandardLicenseName | null,
+    originOfFile: () => URL | string
+    imageUploadData: (imageData: { name: string, alt: string }) => Promise<z.input<typeof imageSchemas.uploadImage>>
+}
+
+const standardStoreFile = (config: {
+    location: string,
+    credit: string | null,
+    license: StandardLicenseName | null,
+    originOfFile: URL | string
+}): StandardStoreFile => {
+    const file = async () => {
+        const filePath = join(standardStoreRoot, config.location)
+        const fileContents = await readFile(filePath)
+        const extension = config.location.split('.').pop()
+        return new File([fileContents], config.location, { type: `image/${extension}` })
+    }
+
+    return {
+        file,
+        credit: () => config.credit,
+        license: () => config.license,
+        originOfFile: () => config.originOfFile,
+        imageUploadData: async (imageData) => {
+            const license = config.license ? await licenseOperations.readStandardLicense.internalCall({
+                params: { standardLicenseName: config.license }
+            }) : null
+
+            return {
+                imageFile: await file(),
+                imageName: imageData.name,
+                imageAlt: imageData.alt,
+                imageCredit: config.credit ?? undefined,
+                imageLicenseId: license ? license.id : undefined,
+            }
+        }
+    }
+}
+
+type StandardStoreFilesMap = {
+    [key: string]: StandardStoreFile | Record<string, StandardStoreFile>
+    devProfileImage: Record<string, StandardStoreFile>
+}
+
+export const standardStoreFiles = {
+    defaultImage: standardStoreFile({
+        location: 'default_image.png',
+        credit: null,
+        license: null,
+        originOfFile: new URL('https://pixabay.com/vectors/image-media-icon-symbol-visual-2935360/'),
+    }),
+    album: standardStoreFile({
+        location: 'album.jpeg',
+        credit: null,
+        license: null,
+        originOfFile: new URL('https://pixabay.com/photos/photos-nostalgia-retro-photography-7666143/'),
+    }),
+    books: standardStoreFile({
+        location: 'books.jpeg',
+        credit: 'Alexander Grey',
+        license: 'Paxels',
+        originOfFile: new URL('https://www.pexels.com/photo/selective-focus-photo-of-pile-of-assorted-title-books-1148399/'),
+    }),
+    fair: standardStoreFile({
+        location: 'fair.jpeg',
+        credit: null,
+        license: null,
+        originOfFile: 'From contractor',
+    }),
+    harambe: standardStoreFile({
+        location: 'harambe.jpg',
+        credit: null,
+        license: null,
+        originOfFile: new URL('https://pixabay.com/photos/silverback-gorilla-male-gorilla-271002/'),
+    }),
+    hovedbygget: standardStoreFile({
+        location: 'hovedbygget.jpeg',
+        credit: 'Thomas Høstad/NTNU',
+        license: 'CC BY-SA 4.0',
+        originOfFile: new URL('https://ntnu.fotoware.cloud/fotoweb/archives/'),
+    }),
+    kongsberg: standardStoreFile({
+        location: 'kongsberg.png',
+        credit: null,
+        license: null,
+        originOfFile: 'Kongsberg Gruppen',
+    }),
+    logoSimple: standardStoreFile({
+        location: 'logo_simple.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    logoWhite: standardStoreFile({
+        location: 'logo_white.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    machine: standardStoreFile({
+        location: 'machine.jpeg',
+        credit: 'Børge Sandnes/NTNU',
+        license: 'CC BY-SA 4.0',
+        originOfFile: 'https://ntnu.fotoware.cloud/fotoweb/archives/',
+    }),
+    magiskHattWhite: standardStoreFile({
+        location: 'magisk_hatt_white.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow-basic',
+    }),
+    magiskHatt: standardStoreFile({
+        location: 'magisk_hatt.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow-basic',
+    }),
+    omegaLogoWhite: standardStoreFile({
+        location: 'omega_logo_white.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    omegaMai: standardStoreFile({
+        location: 'Omegamai.jpeg',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    ov: standardStoreFile({
+        location: 'ov.jpeg',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    pwa: standardStoreFile({
+        location: 'pwa.png',
+        credit: null,
+        license: null,
+        originOfFile: 'pwa logo',
+    }),
+    realfagsbygget: standardStoreFile({
+        location: 'realfagsbygget.jpeg',
+        credit: 'Per Henning/NTNU',
+        license: 'CC BY-SA 4.0',
+        originOfFile: 'https://ntnu.fotoware.cloud/fotoweb/archives/',
+    }),
+    treaty: standardStoreFile({
+        location: 'treaty.jpg',
+        credit: null,
+        license: null,
+        originOfFile: new URL('https://pixabay.com/photos/paper-document-old-writing-vintage-3212015/'),
+    }),
+    vevcomLogo: standardStoreFile({
+        location: 'vevcom_logo.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    kappemann: standardStoreFile({
+        location: 'kappemann.jpeg',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    kappemannBronse: standardStoreFile({
+        location: 'kappemann_bronse.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    kappemannDiamant: standardStoreFile({
+        location: 'kappemann_diamant.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    kappemannGull: standardStoreFile({
+        location: 'kappemann_gull.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    kappemannPaske: standardStoreFile({
+        location: 'kappemann_paske.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    kappemannSolv: standardStoreFile({
+        location: 'kappemann_solv.png',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    nordic: standardStoreFile({
+        location: 'nordic.png',
+        credit: null,
+        license: null,
+        originOfFile: 'nordic',
+    }),
+    ohma: standardStoreFile({
+        location: 'ohma.jpeg',
+        credit: null,
+        license: null,
+        originOfFile: 'ow - basic',
+    }),
+    devProfileImage: {
+        Bjørn: standardStoreFile({
+            location: 'dev_profile_images/Bjørn.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/bear-head-brown-brown-bear-1283347/'),
+        }),
+        Due: standardStoreFile({
+            location: 'dev_profile_images/Due.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/dove-bird-freedom-flying-pigeon-2680487/'),
+        }),
+        Ekorn: standardStoreFile({
+            location: 'dev_profile_images/Ekorn.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/squirrel-attentive-ears-cute-619968/'),
+        }),
+        Elefant: standardStoreFile({
+            location: 'dev_profile_images/Elefant.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/elephant-nature-wildlife-safari-9772462/'),
+        }),
+        Frosk: standardStoreFile({
+            location: 'dev_profile_images/Frosk.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/tree-frog-frog-amphibian-nature-8600329/'),
+        }),
+        Gås: standardStoreFile({
+            location: 'dev_profile_images/Gås.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/goose-wild-goose-water-bird-bird-3477674/'),
+        }),
+        Hest: standardStoreFile({
+            location: 'dev_profile_images/Hest.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/horse-wild-horse-sligo-ireland-8542469/'),
+        }),
+        Kanin: standardStoreFile({
+            location: 'dev_profile_images/Kanin.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/eastern-cottontail-wild-rabbit-9604011/'),
+        }),
+        Løve: standardStoreFile({
+            location: 'dev_profile_images/Løve.png',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/lion-feline-mane-barbary-lion-8096155/'),
+        }),
+        Papegøye: standardStoreFile({
+            location: 'dev_profile_images/Papegøye.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/bird-parrot-ornithology-species-1823839/'),
+        }),
+        Påfugl: standardStoreFile({
+            location: 'dev_profile_images/Påfugl.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/peacock-bird-multicoloured-poultry-2479685/'),
+        }),
+        Rev: standardStoreFile({
+            location: 'dev_profile_images/Rev.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/fox-animal-wilderness-nature-2597803/'),
+        }),
+        Sjiraff: standardStoreFile({
+            location: 'dev_profile_images/Sjiraff.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/flower-giraffe-giraffe-look-giraffe-6553711/'),
+        }),
+        Skilpadde: standardStoreFile({
+            location: 'dev_profile_images/Skilpadde.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/turtle-tortoise-shell-terrestrial-4277518/'),
+        }),
+        Slange: standardStoreFile({
+            location: 'dev_profile_images/Slange.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/green-tree-python-python-snake-9295182/'),
+        }),
+        Ugle: standardStoreFile({
+            location: 'dev_profile_images/Ugle.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/boobook-owl-little-owl-staring-owl-1655548/'),
+        }),
+        Ørn: standardStoreFile({
+            location: 'dev_profile_images/Ørn.jpg',
+            credit: null,
+            license: null,
+            originOfFile: new URL('https://pixabay.com/photos/adler-eagle-bird-white-tailed-eagle-2386314/'),
+        }),
+    }
+} as const satisfies StandardStoreFilesMap
diff --git a/src/lib/store/implementStore.ts b/src/lib/store/implementStore.ts
new file mode 100644
index 000000000..d0be17d64
--- /dev/null
+++ b/src/lib/store/implementStore.ts
@@ -0,0 +1,85 @@
+import '@pn-server-only'
+import { ServerError } from '@/services/error'
+import { v4 as uuid } from 'uuid'
+import { mkdir, unlink, writeFile } from 'fs/promises'
+import { join } from 'path'
+import type { File } from 'buffer'
+
+/**
+ * This implements the store and lets a service use the store. The staticStorePrefix is where the service will store
+ * its files in the store volume. The allowedExtentions is used to validate the file type before storing it, and is
+ * captured as a literal type so createFile's own allowedExt can be typechecked as a subset of it - createFile can be
+ * stricter than the implementation about which extensions it allows, but never wider.
+ *
+ * The implementation exposes two functions, createFile and destroyFile, that the service can use to create and
+ * destroy files in the store.
+ *
+ * createFile takes a File, validates it, and stores it in the store volume.
+ * It returns the fsLocation and ext of the stored file.
+ * destroyFile takes the fsLocation of a file and deletes it from the store volume.
+ */
+export function implementStore<const AllowedExt extends readonly string[]>(config: {
+    staticStorePrefix: string,
+    allowedExtentions: AllowedExt
+}) {
+    async function createFile(
+        file: File,
+        allowedExt: readonly AllowedExt[number][] = config.allowedExtentions,
+        prosessor: (buffer: Buffer) => Promise<Buffer> = async (buffer) => buffer,
+        dynamicStorePrefix?: string,
+    ): Promise<{
+        fsLocation: string,
+        ext: string
+    }> {
+        const arrBuffer = await file.arrayBuffer()
+        const buffer = Buffer.from(arrBuffer)
+        const ext = file.type.split('/')[1]
+
+        if (!allowedExt.includes(ext)) {
+            throw new ServerError('BAD PARAMETERS', [
+                {
+                    path: ['file'],
+                    message: 'Invalid file type'
+                }
+            ])
+        }
+
+        const processedBuffer = await prosessor(buffer)
+        const fsLocation = `${uuid()}.${ext}`
+        const destination = dynamicStorePrefix
+            ? join('store', config.staticStorePrefix, dynamicStorePrefix)
+            : join('store', config.staticStorePrefix)
+        await mkdir(destination, { recursive: true })
+        await writeFile(join(destination, fsLocation), processedBuffer)
+        return {
+            fsLocation,
+            ext
+        }
+    }
+
+    async function destroyFile(
+        fsLocation: string,
+        dynamicStorePrefix?: string
+    ): Promise<void> {
+        const filePath = dynamicStorePrefix
+            ? join('store', config.staticStorePrefix, dynamicStorePrefix, fsLocation)
+            : join('store', config.staticStorePrefix, fsLocation)
+        try {
+            await unlink(filePath)
+        } catch (error) {
+            if (isErrorWithCode(error) && error.code === 'ENOENT') {
+                throw new ServerError('NOT FOUND', 'Filen du forsøkte å finne ble ikke funnet')
+            }
+            throw error
+        }
+    }
+
+    return {
+        createFile,
+        destroyFile,
+    } as const
+}
+
+function isErrorWithCode(error: unknown): error is { code: string } {
+    return typeof error === 'object' && error !== null && 'code' in error
+}
diff --git a/src/services/store/types.ts b/src/lib/store/types.ts
similarity index 100%
rename from src/services/store/types.ts
rename to src/lib/store/types.ts
diff --git a/src/prisma/client.ts b/src/prisma/client.ts
index 0c04c1e46..76c01adb3 100644
--- a/src/prisma/client.ts
+++ b/src/prisma/client.ts
@@ -1,5 +1,5 @@
-import { PrismaPg } from '@prisma/adapter-pg'
 import { PrismaClient } from '@/prisma-generated-pn-client'
+import { PrismaPg } from '@prisma/adapter-pg'
 
 // To prevent hot reloading from creating new instances of PrismaClient it is stored in the global object.
 // Read more about it in the section "Prevent hot reloading from creating new instances of PrismaClient" here:
diff --git a/src/prisma/schema/articleCategory.prisma b/src/prisma/schema/articleCategory.prisma
new file mode 100644
index 000000000..f443dba0b
--- /dev/null
+++ b/src/prisma/schema/articleCategory.prisma
@@ -0,0 +1,10 @@
+model ArticleCategory {
+  id          Int       @id @default(autoincrement())
+  name        String    @unique
+  description String?
+  articles    Article[]
+  createdAt   DateTime  @default(now()) @map("created_at")
+  updatedAt   DateTime  @updatedAt @map("updated_at")
+
+  @@unique([id, name])
+}
diff --git a/src/prisma/schema/cms.prisma b/src/prisma/schema/cms.prisma
index 0b9ba1519..fd89f6817 100644
--- a/src/prisma/schema/cms.prisma
+++ b/src/prisma/schema/cms.prisma
@@ -1,21 +1,11 @@
 enum SpecialCmsImage {
-  FRONTPAGE_LOGO
   FRONTPAGE_1
   FRONTPAGE_2
   FRONTPAGE_3
   FRONTPAGE_4
-  SERVER_ERROR
-  NOT_FOUND
-  AUTH_ICON
-  FOOTER_LOGO
-  FOOTER_1
-  FOOTER_2
-  FOOTER_3
-  LOADER_IMAGE
-  MOBILE_NAV_LOGIN_BUTTON
-  MOBILE_NAV_PRIMARY_BUTTON
-  NAV_LOGIN_BUTTON
-  NAV_PRIMARY_BUTTON
+  FOOTER_SPONSOR_1
+  FOOTER_SPONSOR_2
+  FOOTER_SPONSOR_3
 }
 
 model CmsImage {
@@ -29,14 +19,11 @@ model CmsImage {
   articleSection       ArticleSection?  @relation(fields: [articleSectionId], references: [id], onDelete: Cascade)
   articleSectionId     Int?             @unique
   coverImageforArticle Article?
-  Ombul                Ombul?
-  committee            Committee?
   special              SpecialCmsImage? @unique
   screenPage           ScreenPage?
   school               School?
   event                Event?
   company              Company?
-  flairs               Flair?
 }
 
 enum SpecialCmsParagraph {
@@ -67,6 +54,7 @@ model CmsParagraph {
   Event               Event?
   Committee           Committee?           @relation(name: "committeeParagraph")
   CommitteApplication Committee?           @relation(name: "applicationParagraph")
+  Ombul               Ombul?
 }
 
 enum SpecialCmsLink {
@@ -136,26 +124,5 @@ model Article {
   special             SpecialCmsArticle? @unique
 
   @@unique([name, id])
-}
-
-model NewsArticle {
-  id          Int      @id @default(autoincrement())
-  description String?
-  endDateTime DateTime //when the article is no longer considered current
-  article     Article  @relation(fields: [articleId, articleName], references: [id, name], onDelete: Restrict)
-  articleId   Int      @unique
-  articleName String
-
-  @@unique([articleId, articleName])
-}
-
-model ArticleCategory {
-  id          Int       @id @default(autoincrement())
-  name        String    @unique
-  description String?
-  articles    Article[]
-  createdAt   DateTime  @default(now()) @map("created_at")
-  updatedAt   DateTime  @updatedAt @map("updated_at")
-
-  @@unique([id, name])
+  @@unique([articleCategoryId, name])
 }
diff --git a/src/prisma/schema/flair.prisma b/src/prisma/schema/flair.prisma
index 26110903d..a0062091c 100644
--- a/src/prisma/schema/flair.prisma
+++ b/src/prisma/schema/flair.prisma
@@ -1,12 +1,12 @@
 model Flair {
-  id       Int      @id @default(autoincrement())
-  name     String
-  cmsImage CmsImage @relation(fields: [imageId], references: [id])
-  imageId  Int      @unique
-  colorR   Int      @default(0)
-  colorG   Int      @default(0)
-  colorB   Int      @default(0)
-  rank     Int      @unique @default(autoincrement())
+  id      Int    @id @default(autoincrement())
+  name    String
+  image   Image  @relation(fields: [imageId], references: [id])
+  imageId Int    @unique
+  colorR  Int    @default(0)
+  colorG  Int    @default(0)
+  colorB  Int    @default(0)
+  rank    Int    @unique @default(autoincrement())
 
   user User[] @relation(name: "userFlairs")
 }
diff --git a/src/prisma/schema/group.prisma b/src/prisma/schema/group.prisma
index 2b86e736e..75d4423f9 100644
--- a/src/prisma/schema/group.prisma
+++ b/src/prisma/schema/group.prisma
@@ -72,8 +72,8 @@ model Committee {
   committeeArticle       Article      @relation(fields: [committeeArticleId], references: [id], onDelete: Restrict, onUpdate: Cascade)
   committeeArticleId     Int          @unique
   videoLink              String?
-  logoImage              CmsImage     @relation(fields: [logoImageId], references: [id], onDelete: Restrict, onUpdate: Cascade)
-  logoImageId            Int          @unique
+  logoImage              Image?       @relation(fields: [logoImageId], references: [id], onDelete: Restrict, onUpdate: Cascade)
+  logoImageId            Int?         @unique
   paragraph              CmsParagraph @relation(fields: [paragraphId], references: [id], name: "committeeParagraph")
   paragraphId            Int          @unique
   applicationParagraph   CmsParagraph @relation(fields: [applicationParagraphId], references: [id], name: "applicationParagraph")
diff --git a/src/prisma/schema/image.prisma b/src/prisma/schema/image.prisma
index cb679f384..037cb5dc0 100644
--- a/src/prisma/schema/image.prisma
+++ b/src/prisma/schema/image.prisma
@@ -1,8 +1,8 @@
-enum SpecialImage {
+enum StandardImage {
   DEFAULT_IMAGE
   DEFAULT_IMAGE_COLLECTION_COVER
   DEFAULT_PROFILE_IMAGE
-  DAFAULT_COMMITTEE_LOGO
+  DEFAULT_COMMITTEE_LOGO
   LOGO_SIMPLE
   LOGO_WHITE
   LOGO_WHITE_TEXT
@@ -12,6 +12,7 @@ enum SpecialImage {
   REALFAGSBYGGET
   MACHINE
   FAIR
+  PWA
 }
 
 model Image {
@@ -33,8 +34,11 @@ model Image {
   licenseName             String?
   licenseLink             String?
   cmsImages               CmsImage[]
-  special                 SpecialImage?    @unique
-  User                    User[]
+  standardImage           StandardImage?   @unique
+  user                    User?
+  flair                   Flair?
+  committee               Committee?
+  ombul                   Ombul?
 }
 
 model License {
@@ -66,10 +70,10 @@ model ImageCollection {
   createdAt    DateTime           @default(now())
   updatedAt    DateTime           @updatedAt
 
-  visibilityAdmin   Visibility @relation(name: "ImageCollectionAdminVisibility", fields: [visibilityAdminId], references: [id], onDelete: Restrict)
-  visibilityAdminId Int        @unique
-  visibilityRead    Visibility @relation(name: "ImageCollectionReadVisibility", fields: [visibilityReadId], references: [id], onDelete: Restrict)
-  visibilityReadId  Int        @unique
+  visibilityAdmin     Visibility @relation(name: "ImageCollectionAdminVisibility", fields: [visibilityAdminId], references: [id], onDelete: Restrict)
+  visibilityAdminId   Int        @unique
+  visibilityRegular   Visibility @relation(name: "ImageCollectionReadVisibility", fields: [visibilityRegularId], references: [id], onDelete: Restrict)
+  visibilityRegularId Int        @unique
 }
 
 enum ImageSize {
diff --git a/src/prisma/schema/news.prisma b/src/prisma/schema/news.prisma
new file mode 100644
index 000000000..710f3f102
--- /dev/null
+++ b/src/prisma/schema/news.prisma
@@ -0,0 +1,16 @@
+model NewsArticle {
+  id          Int      @id @default(autoincrement())
+  description String?
+  endDateTime DateTime //when the article is no longer considered current
+  published   Boolean  @default(false)
+  article     Article  @relation(fields: [articleId, articleName], references: [id, name], onDelete: Restrict)
+  articleId   Int      @unique
+  articleName String
+
+  visibilityAdmin     Visibility @relation(name: "NewsArticleAdminVisibility", fields: [visibilityAdminId], references: [id], onDelete: Restrict)
+  visibilityAdminId   Int        @unique
+  visibilityRegular   Visibility @relation(name: "NewsArticleReadVisibility", fields: [visibilityRegularId], references: [id], onDelete: Restrict)
+  visibilityRegularId Int        @unique
+
+  @@unique([articleId, articleName])
+}
diff --git a/src/prisma/schema/ombul.prisma b/src/prisma/schema/ombul.prisma
index d55b56a7a..8a388fd5c 100644
--- a/src/prisma/schema/ombul.prisma
+++ b/src/prisma/schema/ombul.prisma
@@ -1,14 +1,16 @@
 model Ombul {
-  id           Int      @id @default(autoincrement())
+  id           Int          @id @default(autoincrement())
   name         String
   description  String?
-  createdAt    DateTime @default(now())
-  updatedAt    DateTime @updatedAt
-  fsLocation   String   @unique //location in /store/ombul/[fsLocation]
+  paragraph    CmsParagraph @relation(fields: [paragraphId], references: [id])
+  paragraphId  Int          @unique
+  createdAt    DateTime     @default(now())
+  updatedAt    DateTime     @updatedAt
+  fsLocation   String       @unique //location in /store/ombul/[fsLocation]
   year         Int
   issueNumber  Int
-  coverImage   CmsImage @relation(fields: [coverImageId], references: [id], onDelete: Cascade)
-  coverImageId Int      @unique
+  coverImage   Image        @relation(fields: [coverImageId], references: [id], onDelete: Cascade)
+  coverImageId Int          @unique
 
   @@unique([year, name])
   @@unique([year, issueNumber])
diff --git a/src/prisma/schema/permission.prisma b/src/prisma/schema/permission.prisma
index 548ee0efb..d069bfd48 100644
--- a/src/prisma/schema/permission.prisma
+++ b/src/prisma/schema/permission.prisma
@@ -166,6 +166,10 @@ enum Permission {
 
   //Flair/badge/cape
   FLAIR_ADMIN
+
+  // News
+  NEWS_CREATE
+  NEWS_ADMIN
 }
 
 model GroupPermission {
diff --git a/src/prisma/schema/user.prisma b/src/prisma/schema/user.prisma
index a386411dc..7507672bc 100644
--- a/src/prisma/schema/user.prisma
+++ b/src/prisma/schema/user.prisma
@@ -30,7 +30,7 @@ model User {
   createdAt              DateTime            @default(now())
   updatedAt              DateTime            @updatedAt // is also updated manually
   image                  Image?              @relation(fields: [imageId], references: [id])
-  imageId                Int?
+  imageId                Int?                @unique
   studentCard            String?             @unique
   LockerReservation      LockerReservation[]
   omegaQuote             OmegaQuote[]
diff --git a/src/prisma/schema/visibility.prisma b/src/prisma/schema/visibility.prisma
index af41a3539..597a8bf82 100644
--- a/src/prisma/schema/visibility.prisma
+++ b/src/prisma/schema/visibility.prisma
@@ -6,6 +6,9 @@ model Visibility {
 
   imageCollectionAdmin ImageCollection? @relation(name: "ImageCollectionAdminVisibility")
   imageCollectionRead  ImageCollection? @relation(name: "ImageCollectionReadVisibility")
+
+  newsArticleAdmin NewsArticle? @relation(name: "NewsArticleAdminVisibility")
+  newsArticleRead  NewsArticle? @relation(name: "NewsArticleReadVisibility")
 }
 
 model VisibilityRequirement {
diff --git a/src/prisma/seeder/seed.ts b/src/prisma/seeder/seed.ts
index ed8eb7338..11ce48aed 100644
--- a/src/prisma/seeder/seed.ts
+++ b/src/prisma/seeder/seed.ts
@@ -1,7 +1,9 @@
-import seed from './src/seeder'
+import seed from './src/seed'
 import { prisma } from '@/prisma-pn-client-instance'
 import { exit } from 'process'
 
+process.env.SEED = 'true'
+
 seed(
     process.env.MIGRATE_FROM_OW === 'true',
     process.env.NODE_ENV === 'development'
diff --git a/src/prisma/seeder/src/SeedSpecialImageCollections.ts b/src/prisma/seeder/src/SeedSpecialImageCollections.ts
deleted file mode 100644
index 30b66daaa..000000000
--- a/src/prisma/seeder/src/SeedSpecialImageCollections.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import type { PrismaClient } from '@/prisma-generated-pn-client'
-import { SpecialCollection } from '@/prisma-generated-pn-types'
-
-export default async function SeedSpecialImageCollections(prisma: PrismaClient) {
-    const keys = Object.keys(SpecialCollection) as SpecialCollection[]
-    await Promise.all(keys.map(async (special) => {
-        const visibilityAdmin = await prisma.visibility.create({ data: {} })
-        const visibilityRead = await prisma.visibility.create({ data: {} })
-        return await prisma.imageCollection.upsert({
-            where: {
-                name: special
-            },
-            update: {
-
-            },
-            create: {
-                name: special,
-                special,
-                visibilityRead: { connect: { id: visibilityRead.id } },
-                visibilityAdmin: { connect: { id: visibilityAdmin.id } }
-            }
-        })
-    }))
-}
diff --git a/src/prisma/seeder/src/buildArticleFromConfig.ts b/src/prisma/seeder/src/buildArticleFromConfig.ts
new file mode 100644
index 000000000..7c6bc8367
--- /dev/null
+++ b/src/prisma/seeder/src/buildArticleFromConfig.ts
@@ -0,0 +1,128 @@
+import { getImageForCmsImageRelation } from '@/seeder/src/standardContent/seedImages'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import { fileURLToPath } from 'url'
+import type { ImagesAvailablieForCms } from '@/seeder/src/standardContent/seedImages'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+import type { Data } from '@/services/serviceOperation'
+import type { implementUpdateArticleOperations } from '@/services/cms/articles/implement'
+import type { z } from 'zod'
+
+export const CMS_PARAGRAPHS_DIR = fileURLToPath(new URL('../cms_paragraphs/', import.meta.url))
+
+export type UpdateArticleOperationsReference = ReturnType<typeof implementUpdateArticleOperations<z.ZodTypeAny>>
+
+type SeedCmsImageConfig = { image: ImagesAvailablieForCms } &
+    Required<Pick<Data<UpdateArticleOperationsReference['coverImage']>, 'imageSize'>>
+
+type SeedCmsParagraphConfig = {
+    file: string,
+}
+
+type SeedCmsLinkConfig =
+    Required<Data<UpdateArticleOperationsReference['articleSections']['cmsLink']>>
+
+export type SeedArticleSectionConfig = {
+    cmsParagraph?: SeedCmsParagraphConfig,
+    cmsImage?: SeedCmsImageConfig,
+    cmsLink?: SeedCmsLinkConfig,
+}
+
+export type SeedArticleConfig = Required<Data<UpdateArticleOperationsReference['update']>> & {
+    coverImage: SeedCmsImageConfig,
+    articleSections: SeedArticleSectionConfig[],
+}
+
+/**
+ * Builds out an already-created (but still empty) article's content - name, cover image, and
+ * sections - the same way the admin CMS editor would. Each domain (article categories, news, ...)
+ * owns articles differently (a category groups them; a news article wraps one directly), so
+ * rather than injecting a whole updateArticle operations object generically - which the type
+ * system can't verify calls against once its implementation params schema is still a naked
+ * generic - the caller injects one already-bound function per operation, closing over its own
+ * implementationParams/params.
+ */
+export async function buildArticleFromConfig(
+    {
+        updateName,
+        updateCoverImage,
+        addSection,
+        updateSectionParagraph,
+        updateSectionImage,
+        updateSectionLink,
+        article,
+        prisma,
+    }: {
+        updateName: (
+            data: Data<UpdateArticleOperationsReference['update']>
+        ) => Promise<unknown>,
+        updateCoverImage: (
+            data: Data<UpdateArticleOperationsReference['coverImage']>
+        ) => Promise<unknown>,
+        addSection: (
+            data: Data<UpdateArticleOperationsReference['addSection']>
+        ) => ReturnType<UpdateArticleOperationsReference['addSection']>,
+        updateSectionParagraph: (
+            paragraphId: number,
+            data: Data<UpdateArticleOperationsReference['articleSections']['cmsParagraph']>
+        ) => Promise<unknown>,
+        updateSectionImage: (
+            cmsImageId: number,
+            data: Data<UpdateArticleOperationsReference['articleSections']['cmsImage']>
+        ) => Promise<unknown>,
+        updateSectionLink: (
+            linkId: number,
+            data: Data<UpdateArticleOperationsReference['articleSections']['cmsLink']>
+        ) => Promise<unknown>,
+        article: SeedArticleConfig,
+        prisma: PrismaClient,
+    }
+) {
+    await updateName({ name: article.name })
+
+    const coverImage = await getImageForCmsImageRelation(article.coverImage.image, prisma)
+    await updateCoverImage({ imageId: coverImage.id, imageSize: article.coverImage.imageSize })
+
+    // Sections are added one at a time rather than with Promise.all: addSection reads the
+    // article's current highest section order and writes order + 1, so adding two sections
+    // concurrently would race on that read-then-write and can violate the (articleId, order)
+    // unique constraint.
+    for (const section of article.articleSections) {
+        const updatedArticle = await addSection({
+            includeParts: {
+                cmsParagraph: Boolean(section.cmsParagraph),
+                cmsImage: Boolean(section.cmsImage),
+                cmsLink: Boolean(section.cmsLink),
+            }
+        })
+
+        // addSection always assigns the new section the current highest order + 1, so it's
+        // always the section with the highest order in the returned article.
+        const newSection = updatedArticle.articleSections.reduce(
+            (highestOrderSection, candidateSection) => (
+                candidateSection.order > highestOrderSection.order ? candidateSection : highestOrderSection
+            )
+        )
+
+        if (section.cmsParagraph && newSection.cmsParagraph) {
+            await updateSectionParagraph(newSection.cmsParagraph.id, {
+                markdown: readFileSync(join(CMS_PARAGRAPHS_DIR, section.cmsParagraph.file), 'utf-8')
+            })
+        }
+
+        if (section.cmsImage && newSection.cmsImage) {
+            const sectionImage = await getImageForCmsImageRelation(section.cmsImage.image, prisma)
+            await updateSectionImage(newSection.cmsImage.id, {
+                imageId: sectionImage.id,
+                imageSize: section.cmsImage.imageSize
+            })
+        }
+
+        if (section.cmsLink && newSection.cmsLink) {
+            await updateSectionLink(newSection.cmsLink.id, {
+                url: section.cmsLink.url,
+                text: section.cmsLink.text
+            })
+        }
+    }
+}
diff --git a/src/prisma/seeder/src/defineSeedOperation.ts b/src/prisma/seeder/src/defineSeedOperation.ts
new file mode 100644
index 000000000..3a8498204
--- /dev/null
+++ b/src/prisma/seeder/src/defineSeedOperation.ts
@@ -0,0 +1,11 @@
+import { withServiceContext } from '@/services/serviceOperation'
+import { Session } from '@/auth/session/Session'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+
+export function defineSeedOperation<ReturnType>(operation: (prisma: PrismaClient) => Promise<ReturnType>) {
+    return () => withServiceContext(
+        { bypassAuth: true, session: Session.empty() },
+        true,
+        async ({ prisma }) => operation(prisma)
+    )
+}
diff --git a/src/prisma/seeder/src/development/seedDevGroups.ts b/src/prisma/seeder/src/development/seedDevGroups.ts
index 9e833343f..3a2ac611e 100644
--- a/src/prisma/seeder/src/development/seedDevGroups.ts
+++ b/src/prisma/seeder/src/development/seedDevGroups.ts
@@ -37,11 +37,6 @@ export default async function seedDevGroups(prisma: PrismaClient) {
                     order: order.order,
                 },
             },
-            logoImage: {
-                create: {
-                    name: 'Logoen til Harambe\'s komité'
-                }
-            },
         },
     })
 
@@ -84,11 +79,6 @@ export default async function seedDevGroups(prisma: PrismaClient) {
                     order: order.order,
                 },
             },
-            logoImage: {
-                create: {
-                    name: `Logoen til testkomité ${i}`
-                }
-            },
         }
     })))
 }
diff --git a/src/prisma/seeder/src/development/seedDevImageCollections.ts b/src/prisma/seeder/src/development/seedDevImageCollections.ts
new file mode 100644
index 000000000..b1a706899
--- /dev/null
+++ b/src/prisma/seeder/src/development/seedDevImageCollections.ts
@@ -0,0 +1,24 @@
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+
+export default async function seedDevImageCollections(prisma: PrismaClient) {
+    for (let i = 0; i < 10; i++) {
+        await prisma.imageCollection.upsert({
+            where: {
+                name: `test_collection_${i}`
+            },
+            update: {
+
+            },
+            create: {
+                name: `test_collection_${i}`,
+                description: 'just a test',
+                visibilityAdmin: {
+                    create: {}
+                },
+                visibilityRegular: {
+                    create: {}
+                }
+            }
+        })
+    }
+}
diff --git a/src/prisma/seeder/src/development/seedDevImages.ts b/src/prisma/seeder/src/development/seedDevImages.ts
index 3d4938cbe..7497ef262 100644
--- a/src/prisma/seeder/src/development/seedDevImages.ts
+++ b/src/prisma/seeder/src/development/seedDevImages.ts
@@ -1,24 +1,27 @@
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
 import type { PrismaClient } from '@/prisma-generated-pn-client'
 
-export default async function seedDevImages(prisma: PrismaClient) {
-    for (let i = 0; i < 10; i++) {
-        await prisma.imageCollection.upsert({
-            where: {
-                name: `test_collection_${i}`
-            },
-            update: {
+export const seedDevImages = defineSeedOperation(async (prisma: PrismaClient) => {
+    await Promise.all(
+        Array.from({ length: 10 }).map((_, index) => upsertTestImageCollection(prisma, index))
+    )
+})
 
+async function upsertTestImageCollection(prisma: PrismaClient, index: number) {
+    return prisma.imageCollection.upsert({
+        where: {
+            name: `dev_images_${index}`
+        },
+        update: {},
+        create: {
+            name: `dev_images_${index}`,
+            description: 'just a test',
+            visibilityAdmin: {
+                create: {}
             },
-            create: {
-                name: `test_collection_${i}`,
-                description: 'just a test',
-                visibilityAdmin: {
-                    create: {}
-                },
-                visibilityRead: {
-                    create: {}
-                }
+            visibilityRegular: {
+                create: {}
             }
-        })
-    }
+        }
+    })
 }
diff --git a/src/prisma/seeder/src/development/seedDevJobAds.ts b/src/prisma/seeder/src/development/seedDevJobAds.ts
index ae9fb81a2..f2a98cace 100644
--- a/src/prisma/seeder/src/development/seedDevJobAds.ts
+++ b/src/prisma/seeder/src/development/seedDevJobAds.ts
@@ -8,7 +8,7 @@ export default async function seedDevJobAds(prisma: PrismaClient) {
 
     const image = await prisma.image.findUniqueOrThrow({
         where: {
-            special: 'FAIR',
+            standardImage: 'FAIR',
         }
     })
 
diff --git a/src/prisma/seeder/src/development/seedDevNews.ts b/src/prisma/seeder/src/development/seedDevNews.ts
index 1b5297519..a4ff901a5 100644
--- a/src/prisma/seeder/src/development/seedDevNews.ts
+++ b/src/prisma/seeder/src/development/seedDevNews.ts
@@ -1,75 +1,77 @@
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
 import type { PrismaClient } from '@/prisma-generated-pn-client'
 
-export default async function seedDevNews(prisma: PrismaClient) {
+const OLD_NEWS_COUNT = 60
+const ACTIVE_NEWS_COUNT = 10
+
+export const seedDevNews = defineSeedOperation(async (prisma: PrismaClient) => {
     const order = await prisma.omegaOrder.findFirst()
     if (!order) throw new Error('No omega order found to seed news to')
 
     const image = await prisma.image.findUniqueOrThrow({
-        where: {
-            special: 'REALFAGSBYGGET',
-        }
+        where: { standardImage: 'REALFAGSBYGGET' }
     })
 
-    // seed old news
-    const date = new Date()
-    date.setDate(date.getDate() - 365) // Subtract 365 days from the current date
-    for (let i = 2000; i < 2060; i++) {
-        await prisma.newsArticle.upsert({
-            where: {
-                id: i,
-            },
-            update: {
+    const oldEndDateTime = new Date()
+    oldEndDateTime.setDate(oldEndDateTime.getDate() - 365)
 
-            },
-            create: {
-                description: 'hei gå til helvete',
-                article: {
-                    create: {
-                        name: 'Test artikkel',
-                        coverImage: {
-                            create: {
-                                image: {
-                                    connect: {
-                                        id: image.id
-                                    }
-                                }
+    const activeEndDateTime = new Date()
+    activeEndDateTime.setDate(activeEndDateTime.getDate() + 7)
+
+    // Dev seed data is keyed as dev_<service>_<index> (here: dev_news_old_<index> /
+    // dev_news_active_<index>) so re-seeding can find-or-create it by name instead of relying on
+    // magic ids.
+    await Promise.all([
+        ...Array.from({ length: OLD_NEWS_COUNT }).map((_, index) => upsertTestNews(prisma, {
+            name: `dev_news_old_${index}`,
+            description: 'PN lanserer neste uke',
+            endDateTime: oldEndDateTime,
+            imageId: image.id,
+        })),
+        ...Array.from({ length: ACTIVE_NEWS_COUNT }).map((_, index) => upsertTestNews(prisma, {
+            name: `dev_news_active_${index}`,
+            description: 'PN lanserer neste uke',
+            endDateTime: activeEndDateTime,
+            imageId: image.id,
+        })),
+    ])
+})
+
+async function upsertTestNews(
+    prisma: PrismaClient,
+    news: { name: string, description: string, endDateTime: Date, imageId: number }
+) {
+    const existingNews = await prisma.newsArticle.findFirst({
+        where: { articleName: news.name },
+        select: { id: true }
+    })
+
+    return prisma.newsArticle.upsert({
+        where: { id: existingNews?.id ?? -1 },
+        update: {
+            endDateTime: news.endDateTime,
+        },
+        create: {
+            description: news.description,
+            endDateTime: news.endDateTime,
+            article: {
+                create: {
+                    name: news.name,
+                    coverImage: {
+                        create: {
+                            image: {
+                                connect: { id: news.imageId }
                             }
                         }
                     }
-                },
-                endDateTime: date,
-            }
-        })
-    }
-    // seed current news
-    const activeDate = new Date()
-    activeDate.setDate(activeDate.getDate() + 7)
-    for (let i = 2060; i < 2070; i++) {
-        await prisma.newsArticle.upsert({
-            where: {
-                id: i,
+                }
             },
-            update: {
-
+            visibilityRegular: {
+                create: {}
             },
-            create: {
-                description: 'hei gå til helvete',
-                article: {
-                    create: {
-                        name: 'En aktiv nyhet',
-                        coverImage: {
-                            create: {
-                                image: {
-                                    connect: {
-                                        id: image.id
-                                    }
-                                }
-                            }
-                        }
-                    }
-                },
-                endDateTime: activeDate,
+            visibilityAdmin: {
+                create: {}
             }
-        })
-    }
+        }
+    })
 }
diff --git a/src/prisma/seeder/src/development/seedDevPermissions.ts b/src/prisma/seeder/src/development/seedDevPermissions.ts
index 690c1e78e..9c93ecee6 100644
--- a/src/prisma/seeder/src/development/seedDevPermissions.ts
+++ b/src/prisma/seeder/src/development/seedDevPermissions.ts
@@ -1,6 +1,6 @@
 import { COMMITTEE_PERMISSIONS } from '@/seeder/src/seedPermissions'
-import type { PrismaClient } from '@/prisma-generated-pn-client'
 import { Permission } from '@/prisma-generated-pn-types'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
 
 export default async function seedDevPermissions(prisma: PrismaClient) {
     const allPermissions = Object.values(Permission).map(permission => ({ permission }))
diff --git a/src/prisma/seeder/src/development/seedDevUsers.ts b/src/prisma/seeder/src/development/seedDevUsers.ts
index 65db68456..f4baa1e40 100644
--- a/src/prisma/seeder/src/development/seedDevUsers.ts
+++ b/src/prisma/seeder/src/development/seedDevUsers.ts
@@ -1,56 +1,20 @@
 import { hashAndEncryptPassword } from '@/auth/passwordHash'
-import { type SeederImage, seedImage } from '@/seeder/src/seedImages'
+import { userOperations } from '@/services/users/operations'
+import { standardStoreFiles } from '@/lib/standardStore/files'
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
+import { OmegaMembershipLevel, type Prisma } from '@/prisma-generated-pn-types'
 import { v4 as uuid } from 'uuid'
 import { randomInt } from 'crypto'
-import { readdir } from 'fs/promises'
-import { join, dirname } from 'path'
-import { fileURLToPath } from 'url'
 import type { PrismaClient } from '@/prisma-generated-pn-client'
-import { OmegaMembershipLevel, type Prisma } from '@/prisma-generated-pn-types'
-
-const fileName = fileURLToPath(import.meta.url)
-const directoryName = dirname(fileName)
-const profileImageFSLocation = join(directoryName, '..', '..', 'standard_store', 'images', 'dev_profile_images')
-
-async function seedDevProfileImages(prisma: PrismaClient) {
-    let files = await readdir(profileImageFSLocation)
-
-    files = files.filter(file => {
-        const filenameS = file.split('.')
-        const ext = filenameS[filenameS.length - 1]
-        return ext === 'jpg'
-    })
-
-    return await Promise.all(files.map(async file => {
-        const fileS = file.split('.')
-
-        const name = fileS[0]
-
-        const imageConfig: SeederImage = {
-            special: null,
-            name,
-            alt: `Bilde av ${name}`,
-            credit: null,
-            license: null,
-            collection: 'PROFILEIMAGES',
-            fsLocation: file,
-        }
 
-        return await seedImage(prisma, profileImageFSLocation, files, imageConfig)
-    }))
-}
-
-export default async function seedDevUsers(prisma: PrismaClient) {
+export const seedDevUsers = defineSeedOperation(async (prisma: PrismaClient) => {
     const firstNames = [
         'Anne', 'Johan', 'Pål', 'Lars', 'Lasse', 'Leo', 'Noa',
         'Trude', 'Andreas', 'Nora', 'Knut', 'Anne', 'Sara',
         'Frikk', 'Merete', 'Klara', 'Britt Helen', 'Fiola',
         'Mika', 'Helle', 'Jesper',
     ]
-
-    const profileImages = await seedDevProfileImages(prisma)
-
-    const lastNames = profileImages.map(image => (image ? image.name.replaceAll('-', ' ') : 'Navnløs'))
+    const devProfileImages = Object.entries(standardStoreFiles.devProfileImage)
 
     const passwordHash = await hashAndEncryptPassword('password')
 
@@ -71,11 +35,12 @@ export default async function seedDevUsers(prisma: PrismaClient) {
     const allClasses = await prisma.class.findMany()
     const allFlairs = await prisma.flair.findMany()
 
-    Promise.all(firstNames.map(async (firstName, i) => {
-        await Promise.all(lastNames.map(async (lastName, j) => {
-            // Randomly remove profile images for 5% of users.
-            const image = (Math.random() < 0.95) ? profileImages.find(img => (img?.name === lastName)) : undefined
-
+    // Promise.all not possible here because db connection pool might be
+    // overloaded from profile image uploads.
+    for (let i = 0; i < firstNames.length; i++) {
+        const firstName = firstNames[i]
+        for (let j = 0; j < devProfileImages.length; j++) {
+            const [lastName, devProfileImage] = devProfileImages[j]
             const username = `${firstName}${lastName}${i + 1}${j}`
                 .toLowerCase()
                 .replace(/å/g, 'aa') // special cases for norwegian letters
@@ -84,14 +49,13 @@ export default async function seedDevUsers(prisma: PrismaClient) {
                 .normalize('NFD') // decompose into letter + diacritics, i.e. 'é' -> 'e´'
                 .replace(/[^a-zA-Z0-9]/g, '') // only keep ASCII alphanumeric characters
 
-            const user = await prisma.user.upsert({
-                where: {
-                    username,
-                },
-                update: {
+            const existingUser = await prisma.user.findUnique({
+                where: { username },
+                select: { id: true },
+            })
 
-                },
-                create: {
+            const user = existingUser ?? await prisma.user.create({
+                data: {
                     firstname: firstName,
                     lastname: lastName,
                     email: uuid(),
@@ -103,16 +67,21 @@ export default async function seedDevUsers(prisma: PrismaClient) {
                         },
                     },
                     acceptedTerms: new Date(),
-                    ...(image ? {
-                        image: {
-                            connect: {
-                                id: image.id,
-                            },
-                        },
-                    } : {}),
                 },
             })
 
+            // Only uploaded the first time this dev user is created - re-seeding must not upload
+            // (and immediately destroy) a fresh profile image on every run.
+            if (!existingUser && Math.random() < 0.95) {
+                await userOperations.updateProfileImage({
+                    params: { username },
+                    data: await devProfileImage.imageUploadData({
+                        name: lastName,
+                        alt: `Bilde av ${lastName}`,
+                    }),
+                })
+            }
+
             const memberships: Prisma.MembershipCreateManyInput[] = [
                 {
                     groupId: memberGroup.groupId,
@@ -174,26 +143,16 @@ export default async function seedDevUsers(prisma: PrismaClient) {
                     }
                 })
             }
-        }))
-    }))
-
-    const harambeImage = await prisma.image.findFirst({
-        where: {
-            name: 'harambe'
         }
-    })
-    if (!harambeImage) {
-        throw new Error('Harambe image not found')
     }
 
-    const harambe = await prisma.user.upsert({
-        where: {
-            email: 'harambe@harambesen.io'
-        },
-        update: {
+    const existingHarambe = await prisma.user.findUnique({
+        where: { email: 'harambe@harambesen.io' },
+        select: { id: true },
+    })
 
-        },
-        create: {
+    const harambe = existingHarambe ?? await prisma.user.create({
+        data: {
             firstname: 'Harambe',
             lastname: 'Harambesen',
             email: 'harambe@harambesen.io',
@@ -206,16 +165,18 @@ export default async function seedDevUsers(prisma: PrismaClient) {
                     passwordHash,
                 },
             },
-            image: {
-                connect: {
-                    id: harambeImage.id
-                }
-            },
             emailVerified: new Date(),
             acceptedTerms: new Date(),
         },
     })
 
+    if (!existingHarambe) {
+        await userOperations.updateProfileImage({
+            params: { username: 'harambe' },
+            data: await standardStoreFiles.harambe.imageUploadData({ name: 'Harambe', alt: 'Bilde av Harambe' }),
+        })
+    }
+
     const studyProgrammeMTTK = await prisma.studyProgramme.findUniqueOrThrow({
         where: {
             code: 'MTTK',
@@ -254,14 +215,13 @@ export default async function seedDevUsers(prisma: PrismaClient) {
         ]
     })
 
-    const vever = await prisma.user.upsert({
-        where: {
-            email: 'vever@vevcom.com'
-        },
-        update: {
+    const existingVever = await prisma.user.findUnique({
+        where: { email: 'vever@vevcom.com' },
+        select: { id: true },
+    })
 
-        },
-        create: {
+    const vever = existingVever ?? await prisma.user.create({
+        data: {
             firstname: 'Vever',
             lastname: 'Vevsen',
             email: 'vever@vevcom.com',
@@ -299,5 +259,4 @@ export default async function seedDevUsers(prisma: PrismaClient) {
 
     console.log(harambe)
     console.log(vever)
-}
-
+})
diff --git a/src/prisma/seeder/src/dobbelOmega/dobbelOmega.ts b/src/prisma/seeder/src/dobbelOmega/dobbelOmega.ts
index 74d038237..53ebd24e3 100644
--- a/src/prisma/seeder/src/dobbelOmega/dobbelOmega.ts
+++ b/src/prisma/seeder/src/dobbelOmega/dobbelOmega.ts
@@ -10,9 +10,9 @@ import { UserMigrator } from './migrateUsers'
 import migrateCommittees from './migrateCommittees'
 import seedProdPermissions from './seedProdPermissions'
 import manifest from '@/seeder/src/logger'
+import { PrismaClient as PrismaClientOw } from '@/prisma-generated-ow-basic/client'
 import { PrismaPg } from '@prisma/adapter-pg'
 import type { PrismaClient as PrismaClientPn } from '@/prisma-generated-pn-client'
-import { PrismaClient as PrismaClientOw } from '@/prisma-generated-ow-basic/client'
 
 /**
  * !DobbelOmega!
@@ -41,7 +41,7 @@ export default async function dobbelOmega(pnPrisma: PrismaClientPn) {
     await migrateOmegaquotes(pnPrisma, owPrisma, userMigrator, limits)
     await migrateArticles(pnPrisma, owPrisma, imageIdMap, limits)
     await migrateMailAliases(pnPrisma, owPrisma, limits)
-    await migrateCommittees(pnPrisma, owPrisma, userMigrator)
+    await migrateCommittees(pnPrisma, owPrisma, userMigrator, imageIdMap)
     await migrateEvents(pnPrisma, owPrisma, imageIdMap, userMigrator, limits)
 
     await seedProdPermissions(pnPrisma)
diff --git a/src/prisma/seeder/src/dobbelOmega/migateArticles.ts b/src/prisma/seeder/src/dobbelOmega/migateArticles.ts
index a6d750255..bf42c6169 100644
--- a/src/prisma/seeder/src/dobbelOmega/migateArticles.ts
+++ b/src/prisma/seeder/src/dobbelOmega/migateArticles.ts
@@ -115,6 +115,12 @@ export default async function migrateArticles(
                     }
                 },
                 endDateTime: articlePn.endDateTime,
+                visibilityRegular: {
+                    create: {}
+                },
+                visibilityAdmin: {
+                    create: {}
+                }
             }
         })
     }
diff --git a/src/prisma/seeder/src/dobbelOmega/migrateCommittees.ts b/src/prisma/seeder/src/dobbelOmega/migrateCommittees.ts
index 47ecd9f9d..1746677ad 100644
--- a/src/prisma/seeder/src/dobbelOmega/migrateCommittees.ts
+++ b/src/prisma/seeder/src/dobbelOmega/migrateCommittees.ts
@@ -1,4 +1,5 @@
-import { convertMdToHtml } from '@/seeder/src/seedCms'
+import { owIdToPnId } from './IdMapper'
+import { cmsParagraphOperations } from '@/services/cms/paragraphs/operations'
 import { readFile } from 'fs/promises'
 import { dirname, join } from 'path'
 import { fileURLToPath } from 'url'
@@ -6,42 +7,56 @@ import type { PrismaClient as PrismaClientPn } from '@/prisma-generated-pn-clien
 import type { Prisma } from '@/prisma-generated-pn-types'
 import type { PrismaClient as PrismaClientOw } from '@/prisma-generated-ow-basic/client'
 import type { UserMigrator } from './migrateUsers'
+import type { IdMapper } from './IdMapper'
 
 const fileName = fileURLToPath(import.meta.url)
 const directoryName = dirname(fileName)
 
-async function readCommitteParagraph(filename: string): Promise<Prisma.CmsParagraphCreateInput> {
+async function readCommitteMarkdown(filename: string): Promise<string> {
     const filepath = join(directoryName, '..', '..', 'cms_paragraphs', 'committees', filename)
     try {
-        const content = await readFile(filepath, 'utf-8')
-
-        return {
-            contentMd: content,
-            contentHtml: await convertMdToHtml(content),
-        }
+        return await readFile(filepath, 'utf-8')
     } catch {
-        return {}
+        return ''
     }
 }
 
-async function readCommitteArticle(filename: string): Promise<{ create: Prisma.ArticleSectionCreateInput } | undefined> {
-    const paragraph = await readCommitteParagraph(filename)
-    if (paragraph.contentMd) {
-        return {
-            create: {
-                cmsParagraph: {
-                    create: paragraph,
-                },
+/**
+ * Creates a CmsParagraph with rendered contentHtml by delegating to the same
+ * cmsParagraphOperations.updateContent used by the live app, instead of duplicating
+ * the markdown->html pipeline here.
+ */
+async function createCmsParagraph(pnPrisma: PrismaClientPn, markdown: string) {
+    const paragraph = await pnPrisma.cmsParagraph.create({ data: {} })
+    await cmsParagraphOperations.updateContent.internalCall({
+        prisma: pnPrisma,
+        params: { paragraphId: paragraph.id },
+        data: { markdown },
+    })
+    return paragraph
+}
+
+async function createCommitteArticleSection(
+    pnPrisma: PrismaClientPn,
+    filename: string
+): Promise<{ create: Prisma.ArticleSectionCreateInput } | undefined> {
+    const markdown = await readCommitteMarkdown(filename)
+    if (!markdown) return undefined
+    const cmsParagraph = await createCmsParagraph(pnPrisma, markdown)
+    return {
+        create: {
+            cmsParagraph: {
+                connect: { id: cmsParagraph.id },
             },
-        }
+        },
     }
-    return undefined
 }
 
 export default async function migrateCommittees(
     pnPrisma: PrismaClientPn,
     owPrisma: PrismaClientOw,
     userMigrator: UserMigrator,
+    imageIdMap: IdMapper,
 ) {
     const committees = await owPrisma.committees.findMany({
         include: {
@@ -50,36 +65,29 @@ export default async function migrateCommittees(
         }
     })
 
-    // const latestOrder = (await pnPrisma.omegaOrder.findFirstOrThrow({
-    //     orderBy: {
-    //         order: 'desc',
-    //     },
-    //     select: {
-    //         order: true,
-    //     }
-    // })).order
-
     await Promise.all(committees.map(async committee => {
-        const committeeParagraph = await readCommitteParagraph(`${committee.shortname}_p.md`)
-        const committeArticle = await readCommitteArticle(`${committee.shortname}_a.md`)
+        const committeeParagraph = await createCmsParagraph(
+            pnPrisma, await readCommitteMarkdown(`${committee.shortname}_p.md`)
+        )
+        const applicationParagraph = await createCmsParagraph(pnPrisma, committee.applicationText || '')
+        const committeArticle = await createCommitteArticleSection(pnPrisma, `${committee.shortname}_a.md`)
+        const logoImageId = owIdToPnId(imageIdMap, committee.ImageId)
 
         const newCommittee = await pnPrisma.committee.create({
             data: {
                 name: committee.name,
                 shortName: committee.shortname,
                 videoLink: committee.applicationVideo,
-                logoImage: {
-                    create: {
-                        name: `Logo for ${committee.name}`
+                logoImage: logoImageId ? {
+                    connect: {
+                        id: logoImageId
                     }
-                },
+                } : undefined,
                 paragraph: {
-                    create: committeeParagraph
+                    connect: { id: committeeParagraph.id }
                 },
                 applicationParagraph: {
-                    create: {
-                        contentMd: committee.applicationText || undefined,
-                    }
+                    connect: { id: applicationParagraph.id }
                 },
                 committeeArticle: {
                     create: {
diff --git a/src/prisma/seeder/src/dobbelOmega/migrateImageCollections.ts b/src/prisma/seeder/src/dobbelOmega/migrateImageCollections.ts
index c47e905c2..fb0f61ed5 100644
--- a/src/prisma/seeder/src/dobbelOmega/migrateImageCollections.ts
+++ b/src/prisma/seeder/src/dobbelOmega/migrateImageCollections.ts
@@ -34,7 +34,7 @@ export default async function migrateImageCollections(pnPrisma: PrismaClientPn,
                 createdAt: imageCollection.updatedAt,
                 updatedAt: imageCollection.updatedAt,
                 //TODO: Link to right committee through visibility
-                visibilityRead: {
+                visibilityRegular: {
                     create: {} //Assuming all collections from omegaweb-basic to be public on migration is probably fine
                 },
                 visibilityAdmin: {
diff --git a/src/prisma/seeder/src/dobbelOmega/migrateImages.ts b/src/prisma/seeder/src/dobbelOmega/migrateImages.ts
index 881347c4c..81e9e48d9 100644
--- a/src/prisma/seeder/src/dobbelOmega/migrateImages.ts
+++ b/src/prisma/seeder/src/dobbelOmega/migrateImages.ts
@@ -1,9 +1,11 @@
 import { owIdToPnId, type IdMapper } from './IdMapper'
 import manifest from '@/seeder/src/logger'
-import { imageSizes, imageStoreLocation } from '@/seeder/src/seedImages'
-import { v4 as uuid } from 'uuid'
-import { writeFile, mkdir } from 'fs/promises'
-import { join } from 'path'
+import { imageOperations } from '@/services/images/subservice/operations'
+import { allowedExtensions } from '@/services/images/subservice/constants'
+import { ombulCoversImagePanelOperations } from '@/services/ombul/ombulCoverCollection'
+import { profileImagesImagePanelOperations } from '@/services/users/profileImageCollection'
+import { committeeLogosImagePanelOperations } from '@/services/groups/committees/committeeLogoCollection'
+import { File } from 'node:buffer'
 import type { Limits } from './migrationLimits'
 import type { PrismaClient as PrismaClientPn } from '@/prisma-generated-pn-client'
 import type { PrismaClient as PrismaClientOw } from '@/prisma-generated-ow-basic/client'
@@ -12,7 +14,10 @@ import type { PrismaClient as PrismaClientOw } from '@/prisma-generated-ow-basic
  * This function migrates images from Omegaweb-basic to PN and adds them to the correct image collection
  * If they do not belong to a image collection (group on Omegaweb-basic)
  * they will be added to a garbage collection. The function also places special images
- * like the once related to a ombul or profile picture in the correct special collection.
+ * like the once related to a ombul, profile picture, or committee logo in the correct special collection.
+ *
+ * Only the original file is fetched from Omegaweb-basic - imageOperations.uploadImage takes care of
+ * generating the small/medium/large avif sizes and storing everything, same as a live upload would.
  * @param pnPrisma - PrismaClientPn
  * @param owPrisma - PrismaClientOw
  * @param migrateImageCollectionIdMap - IdMapper - A map of the old and new id's of the image collections also
@@ -34,7 +39,7 @@ export default async function migrateImages(
         create: {
             name: 'Søppel fra Omegaweb-basic',
             description: 'Denne samlingen inneholder bilder som ikke tilhørete noen samling i omegaweb-basic',
-            visibilityRead: {
+            visibilityRegular: {
                 create: {},
             },
             visibilityAdmin: {
@@ -43,19 +48,13 @@ export default async function migrateImages(
         },
     })
 
-    const ombulCollection = await pnPrisma.imageCollection.findUnique({
-        where: {
-            special: 'OMBULCOVERS',
-        },
-    })
-    if (!ombulCollection) throw new Error('No ombul collection found for seeding images')
-
-    const profileCollection = await pnPrisma.imageCollection.findUnique({
-        where: {
-            special: 'PROFILEIMAGES',
-        },
+    // Reads (and, if missing, creates from config) each special collection through its real
+    // implementation, same as the live app uses - rather than assuming it already exists.
+    const ombulCollection = await ombulCoversImagePanelOperations.readCollection({ prisma: pnPrisma, bypassAuth: true })
+    const profileCollection = await profileImagesImagePanelOperations.readCollection({ prisma: pnPrisma, bypassAuth: true })
+    const committeeLogosCollection = await committeeLogosImagePanelOperations.readCollection({
+        prisma: pnPrisma, bypassAuth: true
     })
-    if (!profileCollection) throw new Error('No profile collection found for seeding images')
 
     const images = await owPrisma.images.findMany({
         include: {
@@ -72,11 +71,24 @@ export default async function migrateImages(
         },
     })
 
+    // Committees.ImageId has no back-relation on Images, so committee logos can't be picked up via an
+    // include like Ombul/Articles/Events below - fetched separately so they're exempted from limits too,
+    // same as ombul covers and profile pictures. Otherwise migrateCommittees can silently end up with no
+    // logo for a committee whose image got filtered out here under a limited/dev migration.
+    const committees = await owPrisma.committees.findMany({
+        select: { ImageId: true },
+    })
+    const committeeImageIds = new Set(
+        committees.flatMap(committee => (committee.ImageId ? [committee.ImageId] : []))
+    )
+
     manifest.info(`Before filter: ${images.length} images`)
     const imagesWithCollection = images.map(image => {
         let collectionId = owIdToPnId(migrateImageCollectionIdMap, image.ImageGroupId)
         if (image.Ombul.length) {
             collectionId = ombulCollection.id
+        } else if (committeeImageIds.has(image.id)) {
+            collectionId = committeeLogosCollection.id
         } else if (!collectionId) {
             collectionId = garbageCollection.id
         } else if (image.ImageGroupId === omegawebBasicProfileCollection.id) {
@@ -89,158 +101,89 @@ export default async function migrateImages(
     }).filter(image => {
         //Apply limits
         if (limits.numberOffFullImageCollections === null) return true
-        if (image.Ombul.length) return true
         if (image.Articles.length) return true
         if (image.Events.length) return true
+        //Images belonging to a special collection are always migrated, regardless of limits
         if (image.collectionId === ombulCollection.id) return true
         if (image.collectionId === profileCollection.id) return true
+        if (image.collectionId === committeeLogosCollection.id) return true
         if (image.ImageGroupId && image.ImageGroupId < limits.numberOffFullImageCollections) return true
         return false
     })
     manifest.info(`After filter: ${imagesWithCollection.length} images`)
 
-    const imagesWithCollectionAndFs = await fetchAllImagesAndUploadToStore(imagesWithCollection.slice(0, 10))
-
-    //correct names if there are duplicates
+    //correct names if there are duplicates. Kept separate from the OW `name` field (used to fetch the
+    //file from Omegaweb-basic below) since that field is a store token, not the display name.
     const namesTaken: { name: string, times: number }[] = []
-    const imagesWithCollectionAndFsAndCorrectedName = imagesWithCollectionAndFs.map(image => {
-        if (!image) return null //Only happens if fetchImageAndUploadToStore fails for the image
-        const ext = image.originalName.split('.').pop() || ''
-        const name = image.originalName.split('.').slice(0, -1).join('.')
-        const nameTaken = namesTaken.find(nameTakenItem => nameTakenItem.name === name)
+    const imagesWithCorrectedName = imagesWithCollection.slice(0, 10).map(image => {
+        const baseName = image.originalName.split('.').slice(0, -1).join('.')
+        const nameTaken = namesTaken.find(nameTakenItem => nameTakenItem.name === baseName)
         if (nameTaken) {
             nameTaken.times++
-            return {
-                ...image,
-                name: `${name}(${nameTaken.times})`,
-                ext
-            }
-        }
-        namesTaken.push({ name, times: 0 })
-
-        return {
-            ...image,
-            name,
-            ext
+            return { ...image, pnImageName: `${baseName}(${nameTaken.times})` }
         }
+        namesTaken.push({ name: baseName, times: 0 })
+        return { ...image, pnImageName: baseName }
     })
 
-    //Finally upsurt to db
     const migrateImageIdMap: IdMapper = []
-    await Promise.all(imagesWithCollectionAndFsAndCorrectedName.map(async image => {
-        if (!image) return //Only happens if fetchImageAndUploadToStore fails for the image
-        const { id: pnId } = await pnPrisma.image.upsert({
-            where: {
-                id: image.id
-            },
-            update: {},
-            create: {
-                name: image.name,
-                alt: image.name.split('_').join(' '),
-                fsLocationOriginal: image.fsLocationOriginal,
-                fsLocationLargeSize: image.fsLocationLargeSize,
-                fsLocationSmallSize: image.fsLocationSmallSize,
-                fsLocationMediumSize: image.fsLocationMediumSize,
-                extOriginal: image.ext,
-                collection: {
-                    connect: {
-                        id: image.collectionId
-                    }
-                }
-            }
-        })
-        migrateImageIdMap.push({ owId: image.id, pnId })
-    }))
-    return migrateImageIdMap
-}
-
-type Locations = {
-    fsLocationOriginal: string,
-    fsLocationSmallSize: string,
-    fsLocationMediumSize: string,
-    fsLocationLargeSize: string
-}
-
-async function fetchAllImagesAndUploadToStore<ImageType extends {
-    originalName: string,
-    name: string,
-    id: number
-}>(images: ImageType[]): Promise<((ImageType & Locations) | null)[]> {
-    const ret: ((ImageType & Locations) | null)[] = []
     let imageCounter = 1
-    const batchSize = 1200
-    const imageBatches = images.reduce((acc, image) => {
-        if (acc[acc.length - 1].length >= batchSize) {
-            acc.push([image])
-        } else {
-            acc[acc.length - 1].push(image)
+
+    const migrateOneImage = async (image: (typeof imagesWithCorrectedName)[number]) => {
+        manifest.info(`Migrating image number ${imageCounter++} of ${imagesWithCorrectedName.length}`)
+        const ext = (image.originalName.split('.').pop() || '').toLowerCase()
+        if (!(allowedExtensions as readonly string[]).includes(ext)) {
+            console.error(`Image ${image.originalName} has unsupported extension "${ext}", skipping`)
+            return
         }
-        return acc
-    }, [[]] as ImageType[][])
 
-    const uploadOne = async (image: ImageType) => {
-        manifest.info(`Migrating image number ${imageCounter++} of ${images.length}`)
-        const ext = image.originalName.split('.').pop() || ''
-        const fsLocationDefaultOldVev = `${process.env.OW_STORE_URL}/image/default/${image.name}`
+        const fsLocationOldVev = `${process.env.OW_STORE_URL}/image/default/${image.name}`
             + `?url=/store/images/${image.name}.${ext}`
-        const fsLocationMediumOldVev = `${process.env.OW_STORE_URL}/image/resize/${imageSizes.medium}/`
-            + `${imageSizes.medium}/${image.name}?url=/store/images/${image.name}.${ext}`
-        const fsLocationSmallOldVev = `${process.env.OW_STORE_URL}/image/resize/${imageSizes.small}/`
-            + `${imageSizes.small}/${image.name}?url=/store/images/${image.name}.${ext}`
-        const fsLocationLargeOldVev = `${process.env.OW_STORE_URL}/image/resize/${imageSizes.large}/`
-            + `${imageSizes.large}/${image.name}?url=/store/images/${image.name}.${ext}`
-        const fsLocationOriginal = await fetchImageAndUploadToStore(fsLocationDefaultOldVev)
-        const fsLocationMediumSize = await fetchImageAndUploadToStore(fsLocationMediumOldVev)
-        const fsLocationSmallSize = await fetchImageAndUploadToStore(fsLocationSmallOldVev)
-        const fsLocationLargeSize = await fetchImageAndUploadToStore(fsLocationLargeOldVev)
-        if (!fsLocationOriginal || !fsLocationMediumSize || !fsLocationSmallSize || !fsLocationLargeSize) {
-            console.error(`Failed to fetch image from ${fsLocationDefaultOldVev}`)
-            ret.push(null)
-        } else {
-            ret.push({
-                ...image,
-                fsLocationSmallSize,
-                fsLocationMediumSize,
-                fsLocationOriginal,
-                fsLocationLargeSize
-            })
+
+        const res = await fetch(fsLocationOldVev, {
+            method: 'GET',
+            //This is to make the fetch request look like it comes from a browser. Not sure if it helps
+            headers: {
+                'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
+                    + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+            },
+        }).catch(() => console.error(`Failed to fetch image from ${fsLocationOldVev}`))
+
+        if (!res || !res.ok) {
+            console.error(`Failed to fetch image from ${fsLocationOldVev}`)
+            return
         }
-    }
 
+        const buffer = Buffer.from(await res.arrayBuffer())
+        const imageFile = new File([new Uint8Array(buffer)], `${image.pnImageName}.${ext}`, { type: `image/${ext}` })
 
-    for (const imageBatch of imageBatches) {
-        await Promise.all(imageBatch.map(uploadOne))
-    }
-    return ret
-}
+        const pnImage = await imageOperations.uploadImage.internalCall({
+            prisma: pnPrisma,
+            params: { collectionId: image.collectionId },
+            data: {
+                imageFile,
+                imageName: image.pnImageName.slice(0, 50),
+                imageAlt: image.pnImageName.split('_').join(' ').slice(0, 100),
+            },
+            operationImplementationFields: { uploadAsStandardImage: null },
+        })
 
-/**
- * fetches an image from the Omegaweb-basic store and uploads it to the PN store (does NOT store the image
- * in the database, only the file on the server). Note that omegaweb-basic will often fail when we make a
- * lot of requests to it. TODO: Add a retry mechanism
- * @param fsLocationOmegawebBasic - The location of the image on the Omegaweb-basic store to be fetched
- * @returns - The location of the image on the PN store
- */
-async function fetchImageAndUploadToStore(fsLocationOmegawebBasic: string): Promise<string | null> {
-    const ext = fsLocationOmegawebBasic.split('.').pop()
-    const fsLocationPn = `${uuid()}.${ext}`
+        migrateImageIdMap.push({ owId: image.id, pnId: pnImage.id })
+    }
 
-    if (!ext || !['webp', 'png', 'jpg', 'jpeg', 'svg'].includes(ext)) {
-        console.error(`Image ${fsLocationOmegawebBasic} is not a suported image`)
-        return null
+    //Batched to avoid hammering omegaweb-basic with too many concurrent requests at once
+    const batchSize = 1200
+    const imageBatches: (typeof imagesWithCorrectedName)[] = [[]]
+    for (const image of imagesWithCorrectedName) {
+        if (imageBatches[imageBatches.length - 1].length >= batchSize) {
+            imageBatches.push([image])
+        } else {
+            imageBatches[imageBatches.length - 1].push(image)
+        }
+    }
+    for (const imageBatch of imageBatches) {
+        await Promise.all(imageBatch.map(migrateOneImage))
     }
-    const res = await fetch(fsLocationOmegawebBasic, {
-        method: 'GET',
-        //This is to make the fetch request look like it comes from a browser. Not sure if it helps
-        headers: {
-            'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)'
-                + 'AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
-        },
-    }).catch(() => console.error(`Failed to fetch image from ${fsLocationOmegawebBasic}`))
 
-    if (!res) return null
-    const imageBuffer = Buffer.from(await res.arrayBuffer())
-    await mkdir(imageStoreLocation, { recursive: true })
-    await writeFile(join(imageStoreLocation, fsLocationPn), imageBuffer)
-    return fsLocationPn
+    return migrateImageIdMap
 }
diff --git a/src/prisma/seeder/src/dobbelOmega/migrateOmbul.ts b/src/prisma/seeder/src/dobbelOmega/migrateOmbul.ts
index cc16af907..f19550c9f 100644
--- a/src/prisma/seeder/src/dobbelOmega/migrateOmbul.ts
+++ b/src/prisma/seeder/src/dobbelOmega/migrateOmbul.ts
@@ -1,20 +1,15 @@
-import { owIdToPnId } from './IdMapper'
-import { v4 as uuid } from 'uuid'
-import { fileURLToPath } from 'url'
-import { dirname, join } from 'path'
-import { writeFile, mkdir } from 'fs/promises'
+import { owIdToPnId, type IdMapper } from './IdMapper'
+import { ombulStore } from '@/services/ombul/operations'
+import { File } from 'node:buffer'
 import type { PrismaClient as PrismaClientOw } from '@/prisma-generated-ow-basic/client'
 import type { PrismaClient as PrismaClientPn } from '@/prisma-generated-pn-client'
-import type { IdMapper } from './IdMapper'
 import type { Limits } from './migrationLimits'
 
-const fileName = fileURLToPath(import.meta.url)
-const directoryName = dirname(fileName)
-
 /**
  * This function migrates ombul from OW to PN, by creating a new ombul in PN for
- * each ombul in OW, adding the correct relations to the coverimage and fetching the
- * pdf from the old location and storing it in the new location
+ * each ombul in OW, connecting it to its cover image (already migrated by migrateImages,
+ * which places any OW image with an Ombul relation into the OMBULCOVERS collection), and
+ * fetching the pdf from the old location and storing it via the ombul store.
  * @param pnPrisma - PrismaClientPn
  * @param owPrisma - PrismaClientOw
  * @param imageIdMap - IdMapper - A map of the old and new id's of the images to
@@ -26,55 +21,43 @@ export default async function migrateOmbul(
     imageIdMap: IdMapper,
     limits: Limits,
 ) {
-    const ombuls = await owPrisma.ombul.findMany({
+    const allOmbuls = await owPrisma.ombul.findMany({
         take: limits.ombul ? limits.ombul : undefined,
     })
 
-    //First write files concurrently for speed
-    const fsLocations = await Promise.all(ombuls.map(async (ombul) => {
+    const ombuls = allOmbuls.flatMap(ombul => {
+        const coverImageId = owIdToPnId(imageIdMap, ombul.ImageId)
+        if (!coverImageId) {
+            console.warn(`Ombul "${ombul.title}" (${ombul.year}) has no resolvable cover image, skipping`)
+            return []
+        }
+        return [{ ...ombul, coverImageId }]
+    })
+
+    //First fetch pdfs and write them to the store concurrently for speed
+    const fsLocations = await Promise.all(ombuls.map(async (ombul): Promise<string | null> => {
         const fsLocationOldVev = `${process.env.OW_STORE_URL}/ombul/${ombul.fileName}.pdf/${ombul.originalName}`
 
         // Get pdf served at old location
         const res = await fetch(fsLocationOldVev, {
             method: 'GET',
-        })
-        const pdfBuffer = Buffer.from(await res.arrayBuffer())
-
-        const store = join(directoryName, '..', '..', 'store', 'ombul')
+        }).catch(() => null)
+        if (!res || !res.ok) {
+            console.error(`Failed to fetch ombul pdf from ${fsLocationOldVev}`)
+            return null
+        }
 
-        const fsLocation = `${uuid()}.pdf`
-
-        await mkdir(store, { recursive: true })
-
-        await writeFile(join(store, fsLocation), pdfBuffer)
+        const pdfBuffer = Buffer.from(await res.arrayBuffer())
+        const pdfFile = new File([new Uint8Array(pdfBuffer)], ombul.originalName, { type: 'application/pdf' })
 
+        const { fsLocation } = await ombulStore.createFile(pdfFile)
         return fsLocation
     }))
 
     for (let ombulIdx = 0; ombulIdx < ombuls.length; ombulIdx++) {
         const ombul = ombuls[ombulIdx]
         const fsLocation = fsLocations[ombulIdx]
-
-        const coverName = `${ombul.title.split(' ').join('_')}_cover${uuid()}`
-
-        const coverImageId = owIdToPnId(imageIdMap, ombul.ImageId)
-
-        const coverImage = await pnPrisma.cmsImage.upsert({
-            where: {
-                name: coverName,
-            },
-            update: {
-
-            },
-            create: {
-                name: coverName,
-                image: coverImageId ? {
-                    connect: {
-                        id: coverImageId
-                    }
-                } : undefined
-            }
-        })
+        if (!fsLocation) continue
 
         const ombulsWithSameYearAndName = await pnPrisma.ombul.findMany({
             where: {
@@ -95,9 +78,12 @@ export default async function migrateOmbul(
             create: {
                 coverImage: {
                     connect: {
-                        id: coverImage.id
+                        id: ombul.coverImageId
                     }
                 },
+                paragraph: {
+                    create: {}
+                },
                 name,
                 description: ombul.lead,
                 createdAt: ombul.createdAt,
diff --git a/src/prisma/seeder/src/dobbelOmega/migrateUsers.ts b/src/prisma/seeder/src/dobbelOmega/migrateUsers.ts
index 0428e145d..6c1e14256 100644
--- a/src/prisma/seeder/src/dobbelOmega/migrateUsers.ts
+++ b/src/prisma/seeder/src/dobbelOmega/migrateUsers.ts
@@ -1,6 +1,7 @@
 import upsertOrderBasedOnDate from './upsertOrderBasedOnDate'
 import { type IdMapper, owIdToPnId } from './IdMapper'
 import manifest from '@/seeder/src/logger'
+import { Prisma, type PrismaClient as PrismaClientPn, type SEX } from '@/prisma-generated-pn-client'
 import { v4 as uuid } from 'uuid'
 import type { User } from '@/prisma-generated-pn-client'
 import type {
@@ -10,7 +11,6 @@ import type {
 } from '@/prisma-generated-ow-basic/client'
 import type { Limits } from './migrationLimits'
 import type { Record } from '@prisma/client/runtime/client'
-import { Prisma, type PrismaClient as PrismaClientPn, type SEX } from '@/prisma-generated-pn-client'
 
 /**
  * TODO: Need migrate reservations (mail reservations) ?, and flairs
diff --git a/src/prisma/seeder/src/dobbelOmega/seedProdPermissions.ts b/src/prisma/seeder/src/dobbelOmega/seedProdPermissions.ts
index 17d6300d3..677db5cfb 100644
--- a/src/prisma/seeder/src/dobbelOmega/seedProdPermissions.ts
+++ b/src/prisma/seeder/src/dobbelOmega/seedProdPermissions.ts
@@ -1,6 +1,6 @@
 import { checkForPermissionDuplicates, COMMITTEE_PERMISSIONS } from '@/seeder/src/seedPermissions'
-import type { PrismaClient as PrismaClientPn } from '@/prisma-generated-pn-client'
 import { Permission } from '@/prisma-generated-pn-types'
+import type { PrismaClient as PrismaClientPn } from '@/prisma-generated-pn-client'
 
 export default async function seedProdPermissions(prisma: PrismaClientPn) {
     const allPermissions = Object.values(Permission)
diff --git a/src/prisma/seeder/src/dobbelOmega/upsertOrderBasedOnDate.ts b/src/prisma/seeder/src/dobbelOmega/upsertOrderBasedOnDate.ts
index c82e106a3..12cf6285a 100644
--- a/src/prisma/seeder/src/dobbelOmega/upsertOrderBasedOnDate.ts
+++ b/src/prisma/seeder/src/dobbelOmega/upsertOrderBasedOnDate.ts
@@ -19,9 +19,7 @@ export default async function upsertOrderBasedOnDate(
         where: {
             order: orderPublished,
         },
-        update: {
-            order: orderPublished,
-        },
+        update: { },
         create: {
             order: orderPublished,
         }
diff --git a/src/prisma/seeder/src/seed.ts b/src/prisma/seeder/src/seed.ts
new file mode 100644
index 000000000..10fd93266
--- /dev/null
+++ b/src/prisma/seeder/src/seed.ts
@@ -0,0 +1,93 @@
+import { seedDevUsers } from './development/seedDevUsers'
+import seedDevPermissions from './development/seedDevPermissions'
+import { seedDevImages } from './development/seedDevImages'
+import { seedDevNews } from './development/seedDevNews'
+import seedDevLockers from './development/seedDevLockers'
+import seedDevOmegaquotes from './development/seedDevOmegaquotes'
+import { seedOrders } from './standardContent/seedOrders'
+import dobbelOmega from './dobbelOmega/dobbelOmega'
+import seedNotificationChannels from './seedNotificationsChannels'
+import seedDevGroups from './development/seedDevGroups'
+import seedClasses from './seedClasses'
+import seedMail from './seedMail'
+import seedStudyProgramme from './seedStudyProgramme'
+import seedOmegaMembershipGroups from './seedOmegaMembershipGroups'
+import seedDevSchools from './development/seedDevSchools'
+import seedDevCompanies from './development/seedDevCompanies'
+import seedShop from './seedShop'
+import seedDevShop from './development/seedDevShop'
+import seedDevJobAds from './development/seedDevJobAds'
+import seedDevEvents from './development/seedDevEvents'
+import seedEvents from './seedEvent'
+import seedCabin from './seedCabin'
+import seedPermissions from './seedPermissions'
+import { seedArticleCategories } from './standardContent/seedArticleCategories'
+import { seedImages } from './standardContent/seedImages'
+import { seedSpecialCms } from './standardContent/seedSpecialCms'
+import { seedFlairs } from './standardContent/seedFlairs'
+import { seedNews } from './standardContent/seedNews'
+import seedInterestGroups from './seedInterestGroups'
+import { withServiceContext } from '@/services/serviceOperation'
+import { Session } from '@/auth/session/Session'
+
+export default async function seed(
+    shouldMigrate: boolean,
+    seedDevData: boolean,
+    logging?: boolean,
+) {
+    const enableLogging = logging ?? true
+
+    //TODO: Remove this outer withServiceContext.
+    //TODO: When all seeders are refactored to use defineSeedOperation it will not
+    //TODO: be neccesary as defineSeedOperation will handle the service context.
+    await withServiceContext({
+        bypassAuth: true,
+        session: Session.empty(),
+    }, true, async ({ prisma }) => {
+        if (enableLogging) console.log('upserting standard data....')
+        await seedOrders()
+        await seedImages()
+        await seedSpecialCms()
+        await seedArticleCategories()
+        await seedNews()
+        await seedMail(prisma)
+        await seedNotificationChannels(prisma)
+        await seedStudyProgramme(prisma)
+        await seedOmegaMembershipGroups(prisma)
+        await seedClasses(prisma)
+        await seedCabin(prisma)
+        await seedShop(prisma)
+        await seedEvents(prisma)
+        await seedPermissions(prisma)
+        await seedFlairs()
+        await seedInterestGroups(prisma)
+        if (enableLogging) console.log('upserting of standard done')
+
+        if (!shouldMigrate) return
+        if (enableLogging) console.log(shouldMigrate ? 'migrating from veven' : 'not migrating from veven')
+        await dobbelOmega(prisma)
+    })
+
+    if (!seedDevData || shouldMigrate) return
+
+    //TODO: Remove this outer withServiceContext. (see above)
+    await withServiceContext({
+        bypassAuth: true,
+        session: Session.empty(),
+    }, true, async ({ prisma }) => {
+        if (enableLogging) console.log('seeding dev data....')
+        await seedDevImages()
+        await seedDevGroups(prisma)
+        await seedDevUsers()
+        await seedDevPermissions(prisma)
+        await seedDevOmegaquotes(prisma)
+        await seedDevNews()
+        await seedDevLockers(prisma)
+        await seedDevSchools(prisma)
+        await seedDevCompanies(prisma)
+        await seedDevJobAds(prisma)
+        await seedDevShop(prisma)
+        await seedDevEvents(prisma)
+        if (enableLogging) console.log('seed dev done')
+    })
+}
diff --git a/src/prisma/seeder/src/seedClasses.ts b/src/prisma/seeder/src/seedClasses.ts
index 75e456de5..2561cfc95 100644
--- a/src/prisma/seeder/src/seedClasses.ts
+++ b/src/prisma/seeder/src/seedClasses.ts
@@ -1,7 +1,7 @@
 import type { PrismaClient } from '@/prisma-generated-pn-client'
 
 /**
- * Seeds classes and omega membership groups.
+ * Seeds classes.
  * @param prisma - The prisma client
  */
 export default async function seedClasses(prisma: PrismaClient) {
diff --git a/src/prisma/seeder/src/seedCms.ts b/src/prisma/seeder/src/seedCms.ts
deleted file mode 100644
index b1a261387..000000000
--- a/src/prisma/seeder/src/seedCms.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-import {
-    seedCmsConfig,
-    seedSpecialCmsImageConfig,
-    seedSpecialCmsParagraphConfig,
-    standardArticleCategories,
-    seedSpecialCmsArticleConfig,
-} from './seedCmsConfig'
-import { transformObject } from './seedImages'
-import { unified } from 'unified'
-import rehypeFormat from 'rehype-format'
-import rehypeStringify from 'rehype-stringify'
-import remarkParse from 'remark-parse'
-import remarkRehype from 'remark-rehype'
-import { dirname, join } from 'path'
-import { readFile } from 'fs/promises'
-import { fileURLToPath } from 'url'
-import type { PrismaClient } from '@/prisma-generated-pn-client'
-import type { SpecialCmsImage, SpecialCmsParagraph, SpecialCmsArticle } from '@/prisma-generated-pn-types'
-import type {
-    SeedCmsImage,
-    SeedCmsParagraph,
-    SeedCmsLink,
-    SeedArticleSection,
-    SeedArticle,
-    SeedCategories,
-} from './seedCmsConfig'
-
-const fileName = fileURLToPath(import.meta.url)
-const directoryName = dirname(fileName)
-
-export default async function seedCms(prisma: PrismaClient) {
-    //Bring the special and non special images to a common format
-    const seedCmsImagesTranformed = seedCmsConfig.cmsImages.map((value) => ({
-        ...value,
-        special: null
-    }))
-    const seedSpecialCmsImagesTransformed = transformObject(seedSpecialCmsImageConfig, (value, key) => ({
-        ...value,
-        special: key
-    }))
-    const allCmsImages = [...seedSpecialCmsImagesTransformed, ...seedCmsImagesTranformed]
-    await Promise.all(allCmsImages.map(async (cmsimage) => {
-        await seedCmsImage(cmsimage, prisma)
-    }))
-
-    //Bring the cmsParagraphs, cmsLinks and articleSections to a common format
-    const seedCmsParagraphsTransformed = seedCmsConfig.cmsParagraphs.map((value) => ({
-        ...value,
-        special: null,
-    }))
-    const seedSpecialCmsParagraphsTransformed = transformObject(seedSpecialCmsParagraphConfig, (value, key) => ({
-        ...value,
-        special: key
-    }))
-    const allCmsParagraphs = [...seedSpecialCmsParagraphsTransformed, ...seedCmsParagraphsTransformed]
-    await Promise.all(allCmsParagraphs.map(async (cmsparagraph) => {
-        await seedCmsParagraph(cmsparagraph, prisma)
-    }))
-
-    await Promise.all(seedCmsConfig.cmsLink.map(async (cmslink) => {
-        await seedCmsLink(cmslink, prisma)
-    }))
-
-    await Promise.all(seedCmsConfig.articleSections.map(async (articleSection) => {
-        await seedArticleSection(articleSection, prisma)
-    }))
-
-    await Promise.all(standardArticleCategories.map(async (category) => {
-        await seedArticleCategories(category, prisma)
-    }))
-
-    const seedCmsArticlesTransformed = seedCmsConfig.articles.map((value) => ({
-        ...value,
-        special: null
-    }))
-    const seedSpecialCmsArticlesTransformed = transformObject(seedSpecialCmsArticleConfig, (value, key) => ({
-        ...value,
-        special: key
-    }))
-
-    const allCmsArticles = [...seedCmsArticlesTransformed, ...seedSpecialCmsArticlesTransformed]
-
-
-    await Promise.all(allCmsArticles.map(async (article, i) => {
-        await seedArticle({ ...article, id: i }, prisma)
-    }))
-}
-
-async function seedCmsImage(
-    cmsimage: SeedCmsImage & { special?: SpecialCmsImage | null },
-    prisma: PrismaClient
-) {
-    const image = await prisma.image.findFirst({
-        where: {
-            name: cmsimage.imageName
-        }
-    })
-    if (!image) {
-        throw new Error(`Tried to cennect CmsImage ${cmsimage.name} to 
-        ${cmsimage.imageName}, but not the image was not found`)
-    }
-
-    return prisma.cmsImage.upsert({
-        where: {
-            name: cmsimage.name
-        },
-        update: {
-            name: cmsimage.name,
-        },
-        create: {
-            name: cmsimage.name,
-            imageSize: cmsimage.imageSize || 'MEDIUM',
-            image: {
-                connect: {
-                    id: image.id
-                }
-            },
-            special: cmsimage.special || null
-        }
-    })
-}
-
-export async function convertMdToHtml(contentMd: string) {
-    return (await unified()
-        .use(remarkParse)
-        .use(remarkRehype)
-        .use(rehypeFormat)
-        .use(rehypeStringify)
-        .process(contentMd)).value.toString()
-}
-
-async function seedCmsParagraph(
-    cmssparagraph: SeedCmsParagraph & { special?: SpecialCmsParagraph | null },
-    prisma: PrismaClient
-) {
-    const contentMd = await readFile(join(directoryName, '..', 'cms_paragraphs', cmssparagraph.file), 'utf-8')
-    const contentHtml = await convertMdToHtml(contentMd)
-
-    return prisma.cmsParagraph.upsert({
-        where: {
-            name: cmssparagraph.name
-        },
-        update: {
-            name: cmssparagraph.name,
-        },
-        create: {
-            name: cmssparagraph.name,
-            special: cmssparagraph.special || null,
-            contentMd,
-            contentHtml,
-        }
-    })
-}
-
-async function seedCmsLink(cmsLink: SeedCmsLink, prisma: PrismaClient) {
-    return prisma.cmsLink.upsert({
-        where: {
-            name: cmsLink.name
-        },
-        update: {
-            name: cmsLink.name,
-        },
-        create: {
-            name: cmsLink.name,
-            url: cmsLink.url,
-        }
-    })
-}
-
-async function seedArticleSection(
-    articleSection: SeedArticleSection & { order?: number },
-    prisma: PrismaClient
-) {
-    const cmsImage = articleSection.cmsImage ?
-        await seedCmsImage(articleSection.cmsImage, prisma) : undefined
-
-    const cmsParagraph = articleSection.cmsParagraph ?
-        await seedCmsParagraph(articleSection.cmsParagraph, prisma) : undefined
-
-    const cmsLink = articleSection.cmsLink ?
-        await seedCmsLink(articleSection.cmsLink, prisma) : undefined
-
-    return prisma.articleSection.upsert({
-        where: {
-            name: articleSection.name
-        },
-        update: {
-            name: articleSection.name,
-        },
-        create: {
-            name: articleSection.name,
-            imagePosition: articleSection.imagePosition,
-            imageSize: articleSection.imageSize,
-            order: articleSection.order,
-            cmsImage: cmsImage ? {
-                connect: {
-                    id: cmsImage.id
-                }
-            } : {},
-            cmsLink: cmsLink ? {
-                connect: {
-                    id: cmsLink.id
-                }
-            } : {},
-            cmsParagraph: cmsParagraph ? {
-                connect: {
-                    id: cmsParagraph.id
-                }
-            } : {},
-        }
-    })
-}
-
-async function seedArticle(article: SeedArticle & { id: number, special: SpecialCmsArticle | null }, prisma: PrismaClient) {
-    const coverImage = await seedCmsImage(article.coverImage, prisma)
-    const articleSections = await Promise.all(article.articleSections.map(
-        async (articleSection, i) =>
-            seedArticleSection({ ...articleSection, order: i }, prisma)
-    ))
-
-    const articles = prisma.article.upsert({
-        where: {
-            id: article.id
-        },
-        update: {
-            name: article.name,
-        },
-        create: {
-            special: article.special,
-            name: article.name,
-            coverImage: {
-                connect: {
-                    id: coverImage.id
-                }
-            },
-            articleSections: {
-                connect: articleSections.map(section => ({ id: section.id }))
-            },
-            newsArticle:
-                article.category === 'news' ? {
-                    create: {
-                        description: article.description,
-                        endDateTime: (() => {
-                            const date = new Date()
-                            date.setDate(date.getDate() + 7)
-                            return date
-                        })(),
-                    }
-                } : undefined,
-            articleCategory:
-                ['news', 'special'].includes(article.category) ? undefined : {
-                    connect: {
-                        name: article.category,
-                    }
-                },
-        }
-    })
-    return articles
-}
-
-async function seedArticleCategories(category: SeedCategories, prisma: PrismaClient) {
-    return await prisma.articleCategory.upsert({
-        where: {
-            name: category.name
-        },
-        update: {
-            name: category.name,
-        },
-        create: {
-            ...category
-        }
-    })
-}
diff --git a/src/prisma/seeder/src/seedCmsConfig.ts b/src/prisma/seeder/src/seedCmsConfig.ts
deleted file mode 100644
index 272a73442..000000000
--- a/src/prisma/seeder/src/seedCmsConfig.ts
+++ /dev/null
@@ -1,381 +0,0 @@
-import type {
-    Position,
-    ImageSize,
-    SpecialCmsImage,
-    SpecialCmsParagraph,
-    SpecialCmsArticle,
-} from '@/prisma-generated-pn-types'
-
-
-export type SeedCmsImage = {
-    name: string,
-    imageName: string
-    imageSize?: ImageSize
-}
-
-export type SeedCmsParagraph = {
-    name: string,
-    file: string //location in cms_paragraphs folder
-}
-
-export type SeedCmsLink = {
-    name: string,
-    url: string
-}
-
-export type SeedArticleSection = {
-    name: string,
-    cmsImage?: SeedCmsImage,
-    cmsParagraph?: SeedCmsParagraph,
-    cmsLink?: SeedCmsLink
-    imagePosition?: Position
-    imageSize?: number,
-}
-
-export const standardArticleCategories = [
-    {
-        name: 'om omega',
-        description: 'lær om omega',
-    },
-    {
-        name: 'guider',
-        description: 'få hjelp til ting',
-    }
-] as const
-
-export type SeedCategories = typeof standardArticleCategories[number]
-type Categories = typeof standardArticleCategories[number]['name']
-
-export type SeedArticle = {
-    name: string,
-    coverImage: SeedCmsImage,
-    articleSections: SeedArticleSection[],
-} & ({
-    category: Categories
-} | {
-    category: 'news',
-    description: string,
-    orderPublished: number
-} | { category: 'special' })
-
-
-type CmsImageSeedSpecialConfig = {
-    [T in SpecialCmsImage]: SeedCmsImage;
-}
-
-export const seedSpecialCmsImageConfig: CmsImageSeedSpecialConfig = {
-    FRONTPAGE_LOGO: {
-        name: 'frontpage_logo',
-        imageName: 'logo_white',
-        imageSize: 'LARGE'
-    },
-    FRONTPAGE_1: {
-        name: 'frontpage_1',
-        imageName: 'kappemann',
-    },
-    FRONTPAGE_2: {
-        name: 'frontpage_2',
-        imageName: 'ohma',
-    },
-    FRONTPAGE_3: {
-        name: 'frontpage_3',
-        imageName: 'ov',
-    },
-    FRONTPAGE_4: {
-        name: 'frontpage_4',
-        imageName: 'ohma',
-    },
-    SERVER_ERROR: {
-        name: 'server-error',
-        imageName: 'logo_simple',
-    },
-    NOT_FOUND: {
-        name: 'not-found',
-        imageName: 'logo_simple',
-    },
-    AUTH_ICON: {
-        name: 'auth_icon',
-        imageName: 'magisk_hatt',
-    },
-    FOOTER_LOGO: {
-        name: 'footer_logo',
-        imageName: 'logo_white_text',
-    },
-    FOOTER_1: {
-        name: 'footer_1',
-        imageName: 'pwa',
-    },
-    FOOTER_2: {
-        name: 'footer_2',
-        imageName: 'nordic',
-        imageSize: 'SMALL'
-    },
-    FOOTER_3: {
-        name: 'footer_3',
-        imageName: 'kongsberg',
-    },
-    LOADER_IMAGE: {
-        name: 'loader_image',
-        imageName: 'logo_simple'
-    },
-    MOBILE_NAV_PRIMARY_BUTTON: {
-        name: 'mobile_nav_primary_button',
-        imageName: 'logo_simple',
-        imageSize: 'SMALL'
-    },
-    MOBILE_NAV_LOGIN_BUTTON: {
-        name: 'mobile_nav_login_button',
-        imageName: 'magisk_hatt',
-        imageSize: 'SMALL'
-    },
-    NAV_PRIMARY_BUTTON: {
-        name: 'nav_primary_button',
-        imageName: 'logo_simple',
-        imageSize: 'SMALL'
-    },
-    NAV_LOGIN_BUTTON: {
-        name: 'nav_login_button',
-        imageName: 'magisk_hatt',
-        imageSize: 'SMALL'
-    }
-}
-
-type CmsParagraphSeedSpecialConfig = {
-    [T in SpecialCmsParagraph]: SeedCmsParagraph;
-}
-
-export const seedSpecialCmsParagraphConfig: CmsParagraphSeedSpecialConfig = {
-    FRONTPAGE_1: {
-        name: 'frontpage_1_paragraph',
-        file: 'frontpage/frontpage_1.md'
-    },
-    FRONTPAGE_2: {
-        name: 'frontpage_2_paragraph',
-        file: 'frontpage/frontpage_2.md'
-    },
-    FRONTPAGE_3: {
-        name: 'frontpage_3_paragraph',
-        file: 'frontpage/frontpage_3.md'
-    },
-    FRONTPAGE_4: {
-        name: 'frontpage_4_paragraph',
-        file: 'frontpage/frontpage_4.md'
-    },
-    INTEREST_GROUP_GENERAL_INFO: {
-        name: 'interest_group_general_info',
-        file: 'interest_groups/general_info.md'
-    },
-    CAREER_INFO: {
-        name: 'career_info',
-        file: 'career/career_info.md'
-    },
-    CABIN_CONTRACT: {
-        name: 'cabin_contract',
-        file: 'cabin/cabin_contract.md'
-    },
-}
-
-
-export type CmsConfig = {
-    cmsImages: SeedCmsImage[], //this is a cmsImage without a connection to a cmsArticleSection
-    cmsParagraphs: SeedCmsParagraph[], //this is a cmsParagraph without a connection to a cmsArticleSection
-    cmsLink: SeedCmsLink[], //this is a cmsLink without a connection to a cmsArticleSection
-
-    articleSections: SeedArticleSection[], //this is a cmsArticleSection without a connection to a Article
-
-    articles: SeedArticle[],
-}
-/**
- * This is the configuration for the cms content that are to be seeded
- */
-export const seedCmsConfig: CmsConfig = {
-    cmsImages: [],
-    cmsParagraphs: [],
-    cmsLink: [],
-    articleSections: [],
-    articles: [
-        {
-            name: 'velkommen til nye veven',
-            category: 'news',
-            description: 'ny vev',
-            orderPublished: 105,
-            coverImage: {
-                name: 'velkommen_til_nye_veven_cover',
-                imageName: 'logo_simple',
-                imageSize: 'LARGE'
-            },
-            articleSections: [
-                {
-                    name: 'velkommen_til_nye_veven_1',
-                    cmsParagraph: {
-                        name: 'velkommen_til_nye_veven_1_paragraph',
-                        file: 'news/velkommen_til_nye_veven_1.md'
-                    },
-                    cmsImage: {
-                        name: 'velkommen_til_nye_veven_1_image',
-                        imageName: 'kappemann',
-                        imageSize: 'LARGE'
-                    }
-                }
-            ]
-        },
-        {
-            name: 'om omega',
-            category: 'om omega',
-            coverImage: {
-                name: 'about_cover',
-                imageName: 'ohma',
-                imageSize: 'LARGE'
-            },
-            articleSections: [
-                {
-                    name: 'about_1',
-                    cmsParagraph: {
-                        name: 'about_1_paragraph',
-                        file: 'about/about_1.md'
-                    },
-                    cmsLink: {
-                        name: 'about_1_link',
-                        url: 'https://omega.ntnu.no',
-                    }
-                },
-                {
-                    name: 'about_2',
-                    cmsParagraph: {
-                        name: 'about_2_paragraph',
-                        file: 'about/about_2.md'
-                    },
-                    cmsImage: {
-                        name: 'about_2_image',
-                        imageName: 'kappemann',
-                        imageSize: 'LARGE'
-                    }
-                }
-            ]
-        },
-        {
-            name: 'statutter',
-            category: 'om omega',
-            coverImage: {
-                name: 'statutter_cover',
-                imageName: 'ov',
-                imageSize: 'MEDIUM'
-            },
-            articleSections: [
-                {
-                    name: 'statutter_1',
-                    cmsParagraph: {
-                        name: 'statutter_1_paragraph',
-                        file: 'statutter/statutter_1.md'
-                    },
-                    cmsLink: {
-                        name: 'statutter_1_link',
-                        url: 'https://omega.ntnu.no',
-                    }
-                },
-                {
-                    name: 'statutter_2',
-                    cmsParagraph: {
-                        name: 'statutter_2_paragraph',
-                        file: 'statutter/statutter_2.md'
-                    },
-                    cmsImage: {
-                        name: 'statutter_2_image',
-                        imageName: 'traktat',
-                        imageSize: 'MEDIUM'
-                    }
-                }
-            ]
-        },
-        {
-            name: 'prikkreglement',
-            category: 'guider',
-            coverImage: {
-                name: 'prikkreglement_cover',
-                imageName: 'ov',
-                imageSize: 'MEDIUM'
-            },
-            articleSections: [
-                {
-                    name: 'prikkreglement_1',
-                    cmsParagraph: {
-                        name: 'prikkreglement_1_paragraph',
-                        file: 'prikkreglement/prikkreglement_1.md'
-                    },
-                    cmsImage: {
-                        name: 'prikkreglement_1_image',
-                        imageName: 'traktat',
-                        imageSize: 'MEDIUM'
-                    }
-                }
-            ]
-        },
-        {
-            name: 'søknadsguide',
-            category: 'guider',
-            coverImage: {
-                name: 'søknadsguide_cover',
-                imageName: 'ov',
-                imageSize: 'MEDIUM'
-            },
-            articleSections: [
-                {
-                    name: 'søknadsguide_1',
-                    cmsParagraph: {
-                        name: 'søknadsguide_1_paragraph',
-                        file: 'soknadsguide/soknadsguide_1.md'
-                    },
-                    cmsImage: {
-                        name: 'søknadsguide_1_image',
-                        imageName: 'kappemann',
-                        imageSize: 'MEDIUM'
-                    }
-                }
-            ]
-        },
-    ]
-}
-
-
-type ArticleSeedSpecialConfig = {
-    [T in SpecialCmsArticle]: SeedArticle;
-}
-
-export const seedSpecialCmsArticleConfig: ArticleSeedSpecialConfig = {
-    REPORT_PAGE: {
-        category: 'special',
-        name: 'Varslingside',
-        coverImage: {
-            name: 'varslingside_cover',
-            imageName: 'ov',
-            imageSize: 'MEDIUM'
-        },
-        articleSections: [
-            {
-                name: 'varsling_info_1',
-                cmsParagraph: {
-                    name: 'varsling_info_1_paragraph',
-                    file: 'varsling_info/varsling_info_1.md'
-                }
-            }
-        ]
-    },
-    NEW_STUDENT_PAGE: {
-        category: 'special',
-        name: 'New Student',
-        coverImage: {
-            name: 'newStudentPage_cover',
-            imageName: 'ov',
-            imageSize: 'MEDIUM'
-        },
-        articleSections: [
-            {
-                name: 'new_student_info',
-                cmsParagraph: {
-                    name: 'new_student_1_paragraph',
-                    file: 'new_student/new_student_1.md'
-                }
-            }
-        ]
-    },
-}
diff --git a/src/prisma/seeder/src/seedFlairs.ts b/src/prisma/seeder/src/seedFlairs.ts
deleted file mode 100644
index 2be558261..000000000
--- a/src/prisma/seeder/src/seedFlairs.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { FlairCreateInput } from '@/prisma-generated-pn/models'
-import type { PrismaClient } from '@/prisma-generated-pn-client'
-
-const flairConfig: {
-    imageName: string,
-    data: Omit<FlairCreateInput, 'cmsImage'>
-}[] = [
-    {
-        imageName: 'kappemann_paske',
-        data: {
-            name: 'Påskekappe',
-            rank: 1,
-            colorR: 255,
-            colorG: 255,
-            colorB: 153,
-        }
-    },
-    {
-        imageName: 'kappemann_diamant',
-        data: {
-            name: 'Diamantkappe',
-            rank: 2,
-            colorR: 0,
-            colorG: 204,
-            colorB: 255,
-        }
-    },
-    {
-        imageName: 'kappemann_gull',
-        data: {
-            name: 'Gullkappe',
-            rank: 3,
-            colorR: 255,
-            colorG: 215,
-            colorB: 0,
-        }
-    },
-    {
-        imageName: 'kappemann_solv',
-        data: {
-            name: 'Solvkappe',
-            rank: 4,
-            colorR: 217,
-            colorG: 217,
-            colorB: 217,
-        }
-    },
-    {
-        imageName: 'kappemann_bronse',
-        data: {
-            name: 'Bronsekappe',
-            rank: 5,
-            colorR: 255,
-            colorG: 153,
-            colorB: 0,
-        }
-    },
-]
-
-export default async function seedFlairs(prisma: PrismaClient) {
-    await Promise.all(flairConfig.map(async config => {
-        const image = await prisma.image.findFirstOrThrow({
-            where: {
-                name: config.imageName
-            }
-        })
-
-        await prisma.flair.create({
-            data: {
-                ...config.data,
-                cmsImage: {
-                    create: {
-                        image: {
-                            connect: {
-                                id: image.id
-                            }
-                        }
-                    }
-                }
-            }
-        })
-    }))
-}
diff --git a/src/prisma/seeder/src/seedImages.ts b/src/prisma/seeder/src/seedImages.ts
deleted file mode 100644
index f6be94a6c..000000000
--- a/src/prisma/seeder/src/seedImages.ts
+++ /dev/null
@@ -1,150 +0,0 @@
-import {
-    seedImageConfig, seedSpecialImageConfig, seedLicenseConfig
-} from './seedImagesConfig'
-import { v4 as uuid } from 'uuid'
-import sharp from 'sharp'
-import { readdir, copyFile, mkdir } from 'fs/promises'
-import path, { join, dirname } from 'path'
-import { fileURLToPath } from 'url'
-import type { ImageSeedConfigBase } from './seedImagesConfig'
-import type { PrismaClient } from '@/prisma-generated-pn-client'
-import type { Image } from '@/prisma-generated-pn-types'
-
-const fileName = fileURLToPath(import.meta.url)
-const directoryName = dirname(fileName)
-
-export const imageSizes = {
-    small: 180,
-    medium: 450,
-    large: 700,
-}
-
-const standardLocation = join(directoryName, '..', 'standard_store', 'images')
-export const imageStoreLocation = join(directoryName, '..', '..', '..', '..', 'store', 'images')
-
-export type SeederImage = ImageSeedConfigBase & Pick<Image, 'special'>
-
-export async function seedImage(
-    prisma: PrismaClient,
-    fileLocation: string,
-    files: string[],
-    image: SeederImage
-): Promise<Image | null> {
-    const file = files.find(file_ => file_ === image.fsLocation)
-    if (!file) throw new Error(`File ${image.fsLocation} not found in standard_store/images`)
-
-    const ext = file.split('.')[1]
-    if (!['jpg', 'jpeg', 'png', 'gif', 'webp'].includes(ext)) {
-        console.log(`skipping image ${file}`)
-        return null
-    }
-
-    const bigPath = path.join(fileLocation, file)
-
-    //full size version of the image
-    const fsLocationOriginal = `${uuid()}.${ext}`
-    await copyFile(
-        bigPath,
-        join(imageStoreLocation, fsLocationOriginal)
-    )
-
-    //create small size version of the image
-    const fsLocationSmallSize = `${uuid()}.${ext}`
-    const smallPath = path.join(imageStoreLocation, fsLocationSmallSize)
-    await sharp(bigPath).resize(imageSizes.small, imageSizes.small, {
-        fit: sharp.fit.inside,
-        withoutEnlargement: true
-    }).toFile(smallPath)
-
-    //create medium size version of the image
-    const fsLocationMediumSize = `${uuid()}.${ext}`
-    const mediumPath = path.join(imageStoreLocation, fsLocationMediumSize)
-    await sharp(bigPath).resize(imageSizes.medium, imageSizes.medium, {
-        fit: sharp.fit.inside,
-        withoutEnlargement: true
-    }).toFile(mediumPath)
-
-    // Create Large size version of the image
-    const fsLocationLargeSize = `${uuid()}.${ext}`
-    const largePath = path.join(imageStoreLocation, fsLocationLargeSize)
-    await sharp(bigPath).resize(imageSizes.large, imageSizes.large, {
-        fit: sharp.fit.inside,
-        withoutEnlargement: true
-    }).toFile(largePath)
-
-    //Delete all images with image.name
-    await prisma.image.deleteMany({
-        where: {
-            name: image.name
-        }
-    })
-
-    return await prisma.image.create({
-        data: {
-            name: image.name,
-            alt: image.alt,
-            credit: image.credit,
-            license: image.license ? {
-                connect: {
-                    name: image.license
-                }
-            } : undefined,
-            fsLocationOriginal,
-            fsLocationSmallSize,
-            fsLocationMediumSize,
-            fsLocationLargeSize,
-            extOriginal: ext,
-            special: image.special,
-            collection: {
-                connect: {
-                    name: image.collection
-                }
-            },
-        }
-    })
-}
-
-/**
- * This functions seeds all images in standard_store/images,
- * both the ones that are special and the ones that are not.
- * All are seeded to the special collection 'STANDARDIMAGES'
- * @param pisama - the prisma client
- */
-export default async function seedImages(prisma: PrismaClient) {
-    // Seed all licenses
-    await prisma.license.createMany({
-        data: seedLicenseConfig
-    })
-
-    await mkdir(imageStoreLocation, { recursive: true })
-
-    const files = await readdir(standardLocation)
-
-    //Get the to bjects to a common format
-    const seedSpecialImagesTransformed = transformObject(seedSpecialImageConfig, (value, key) => ({
-        ...value,
-        special: key
-    }))
-    const seedImagesTransformed = seedImageConfig.map((value) => ({
-        ...value,
-        special: null
-    }))
-    const allImages = [...seedSpecialImagesTransformed, ...seedImagesTransformed]
-
-    //Seed all images
-    await Promise.all(allImages.map(async (image) => {
-        await seedImage(prisma, standardLocation, files, image)
-    }))
-}
-
-/**
- * A function to transform an object to an array
- * @param obj - the object to transform
- * @param fn - the function to transform the object with
- * @returns
- */
-export function transformObject<KeyType extends string | number | symbol, ValueType, ReturnType>(
-    obj: Record<KeyType, ValueType>, fn: (value: ValueType, key: KeyType) => ReturnType
-): ReturnType[] {
-    return Object.entries(obj).map(([key, value]) => fn(value as ValueType, key as KeyType))
-}
diff --git a/src/prisma/seeder/src/seedImagesConfig.ts b/src/prisma/seeder/src/seedImagesConfig.ts
deleted file mode 100644
index 5eaff7670..000000000
--- a/src/prisma/seeder/src/seedImagesConfig.ts
+++ /dev/null
@@ -1,273 +0,0 @@
-import type { SpecialImage, SpecialCollection } from '@/prisma-generated-pn-types'
-
-type LicenseSeed = {
-    name: string,
-    link: string,
-}
-
-export const seedLicenseConfig = [
-    {
-        name: 'CC BY-SA 4.0',
-        link: 'https://creativecommons.org/licenses/by-sa/4.0/',
-    },
-    {
-        name: 'Paxels',
-        link: 'https://www.pexels.com/license/',
-    },
-] as const satisfies LicenseSeed[]
-
-type licenseName = typeof seedLicenseConfig[number]['name']
-
-export type ImageSeedConfigBase = {
-    name: string,
-    alt: string,
-    fsLocation: string, //location in standard_store/images
-    collection: string,
-    credit: string | null,
-    license: licenseName | null,
-}
-
-const defaultCollection = 'STANDARDIMAGES' as const satisfies SpecialCollection
-
-type ImageSeedConfig = ImageSeedConfigBase[]
-
-type ImageSeedSpecialConfig = {
-    [T in SpecialImage]: ImageSeedConfigBase & { collection: SpecialCollection };
-}
-
-/**
- * This is the configuration for the images that are to be seeded
- * that are not special
- */
-export const seedImageConfig: ImageSeedConfig = [
-    {
-        name: 'traktat',
-        alt: 'En gammel traktat',
-        fsLocation: 'treaty.jpeg',
-        collection: defaultCollection,
-        credit: 'Skylar Kang',
-        license: 'Paxels',
-    },
-    {
-        name: 'kappemann',
-        alt: 'En kappemann',
-        fsLocation: 'kappemann.jpeg',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'kongsberg',
-        alt: 'Kongsberg',
-        fsLocation: 'kongsberg.png',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'nordic',
-        alt: 'Nordic',
-        fsLocation: 'nordic.png',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'ohma',
-        alt: 'Ohma',
-        fsLocation: 'ohma.jpeg',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'omega_mai',
-        alt: 'Omega mai',
-        fsLocation: 'Omegamai.jpeg',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'ov',
-        alt: 'OV',
-        fsLocation: 'ov.jpeg',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'pwa',
-        alt: 'PWA',
-        fsLocation: 'pwa.png',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'harambe',
-        alt: 'Harambe',
-        fsLocation: 'harambe.jpg',
-        collection: 'PROFILEIMAGES',
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'kappemann_bronse',
-        alt: 'Kappemann bronse',
-        fsLocation: 'kappemann_bronse.png',
-        collection: 'FLAIRIMAGES',
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'kappemann_solv',
-        alt: 'Kappemann solv',
-        fsLocation: 'kappemann_solv.png',
-        collection: 'FLAIRIMAGES',
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'kappemann_gull',
-        alt: 'Kappemann gull',
-        fsLocation: 'kappemann_gull.png',
-        collection: 'FLAIRIMAGES',
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'kappemann_diamant',
-        alt: 'Kappemann diamant',
-        fsLocation: 'kappemann_diamant.png',
-        collection: 'FLAIRIMAGES',
-        credit: null,
-        license: null,
-    },
-    {
-        name: 'kappemann_paske',
-        alt: 'Kappemann paske',
-        fsLocation: 'kappemann_paske.png',
-        collection: 'FLAIRIMAGES',
-        credit: null,
-        license: null,
-    },
-]
-
-/**
- * This is the configuration for the images that are to be seeded
- * that are special
- */
-export const seedSpecialImageConfig: ImageSeedSpecialConfig = {
-    DEFAULT_IMAGE: {
-        name: 'default_image',
-        alt: 'standard bilde (ikke funnet)',
-        fsLocation: 'default_image.jpeg',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    DEFAULT_IMAGE_COLLECTION_COVER: {
-        name: 'lens_camera',
-        alt: 'Et kamera med en linse',
-        fsLocation: 'lens_camera.jpeg',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    DEFAULT_PROFILE_IMAGE: {
-        name: 'default_profile_image',
-        alt: 'standard profilbilde',
-        fsLocation: 'default_profile_image.png',
-        collection: 'PROFILEIMAGES',
-        credit: null,
-        license: null,
-    },
-    DAFAULT_COMMITTEE_LOGO: {
-        name: 'default_committee_logo',
-        alt: 'komité logo',
-        fsLocation: 'logo_simple.png',
-        collection: 'COMMITTEELOGOS',
-        credit: null,
-        license: null,
-    },
-    LOGO_SIMPLE: {
-        name: 'logo_simple',
-        alt: 'Logo',
-        fsLocation: 'logo_simple.png',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    LOGO_WHITE: {
-        name: 'logo_white',
-        alt: 'Logo',
-        fsLocation: 'logo_white.png',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    LOGO_WHITE_TEXT: {
-        name: 'logo_white_text',
-        alt: 'Logo',
-        fsLocation: 'omega_logo_white.png',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    MAGISK_HATT: {
-        name: 'magisk_hatt',
-        alt: 'Magisk hatt',
-        fsLocation: 'magisk_hatt.png',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-    },
-    HOVEDBYGGNINGEN: {
-        name: 'hovedbygningen',
-        alt: 'Hovedbygningen',
-        fsLocation: 'hovedbygget.jpeg',
-        collection: defaultCollection,
-        credit: 'Thomas Høstad/NTNU',
-        license: 'CC BY-SA 4.0',
-        // https://ntnu.fotoware.cloud/fotoweb/archives/
-        // 5005-Blinkskudd/Folder%20112/Hovedbygget-03.jpg.info#c=%2Ffotoweb%2Farchives%2F5005-Blinkskudd%2F
-    },
-    BOOKS: {
-        name: 'Books',
-        alt: 'Bøker',
-        fsLocation: 'books.jpeg',
-        collection: defaultCollection,
-        credit: 'Alexander Grey',
-        license: 'Paxels',
-    },
-    MACHINE: {
-        name: 'machine',
-        alt: 'Maskin',
-        fsLocation: 'machine.jpeg',
-        collection: defaultCollection,
-        credit: 'Børge Sandnes/NTNU',
-        license: 'CC BY-SA 4.0',
-        // https://ntnu.fotoware.cloud/fotoweb/archives/
-        // 5005-Blinkskudd/Folder%20112/Manu-08.jpg.info#c=%2Ffotoweb%2Farchives%2F5005-Blinkskudd%2F
-    },
-    REALFAGSBYGGET: {
-        name: 'Realfagsbygget',
-        alt: 'Realfagsbygget',
-        fsLocation: 'realfagsbygget.jpeg',
-        collection: defaultCollection,
-        credit: 'Per Henning/NTNU',
-        license: 'CC BY-SA 4.0',
-        // https://ntnu.fotoware.cloud/fotoweb/archives/
-        // 5019-Campuser/Folder%20112/Realfagbygget-soloppgang-2015-2.jpg.info#c=%2Ffotoweb%2Farchives%2F5019-Campuser%2F
-    },
-    FAIR: {
-        name: 'fair',
-        alt: 'Fair',
-        fsLocation: 'fair.jpeg',
-        collection: defaultCollection,
-        credit: null,
-        license: null,
-        // From contactor
-    },
-} as const
diff --git a/src/prisma/seeder/src/seedNotificationsChannels.ts b/src/prisma/seeder/src/seedNotificationsChannels.ts
index 1b52db24b..11ee2646a 100644
--- a/src/prisma/seeder/src/seedNotificationsChannels.ts
+++ b/src/prisma/seeder/src/seedNotificationsChannels.ts
@@ -1,7 +1,7 @@
 import { allNotificationMethodsOff, allNotificationMethodsOn } from '@/services/notifications/constants'
+import { SpecialNotificationChannel } from '@/prisma-generated-pn-types'
 import type { PrismaClient } from '@/prisma-generated-pn-client'
 import type { NotificationMethod } from '@/prisma-generated-pn-types'
-import { SpecialNotificationChannel } from '@/prisma-generated-pn-types'
 
 type ChannelInfo = {
     special?: SpecialNotificationChannel
diff --git a/src/prisma/seeder/src/seedOmegaMembershipGroups.ts b/src/prisma/seeder/src/seedOmegaMembershipGroups.ts
index 46ffaee56..7b5e9d59a 100644
--- a/src/prisma/seeder/src/seedOmegaMembershipGroups.ts
+++ b/src/prisma/seeder/src/seedOmegaMembershipGroups.ts
@@ -1,5 +1,5 @@
-import type { PrismaClient } from '@/prisma-generated-pn-client'
 import { OmegaMembershipLevel } from '@/prisma-generated-pn-types'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
 
 export default async function seedOmegaMembershipGroups(prisma: PrismaClient) {
     const levels = Object.values(OmegaMembershipLevel)
diff --git a/src/prisma/seeder/src/seedOrder.ts b/src/prisma/seeder/src/seedOrder.ts
deleted file mode 100644
index 62fe11dd1..000000000
--- a/src/prisma/seeder/src/seedOrder.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import type { PrismaClient } from '@/prisma-generated-pn-client'
-
-export default async function seedOrder(prisma: PrismaClient) {
-    await Promise.all(Array.from({ length: 106 }, (_, i) => i + 1).map(async (order) => {
-        await prisma.omegaOrder.upsert({
-            where: { order },
-            update: {},
-            create: { order },
-        })
-    }))
-}
diff --git a/src/prisma/seeder/src/seeder.ts b/src/prisma/seeder/src/seeder.ts
deleted file mode 100644
index 56942ece7..000000000
--- a/src/prisma/seeder/src/seeder.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import seedImages from './seedImages'
-import seedDevUsers from './development/seedDevUsers'
-import seedDevPermissions from './development/seedDevPermissions'
-import seedDevImages from './development/seedDevImages'
-import seedDevNews from './development/seedDevNews'
-import seedDevLockers from './development/seedDevLockers'
-import seedCms from './seedCms'
-import seedDevOmegaquotes from './development/seedDevOmegaquotes'
-import seedOrder from './seedOrder'
-import SeedSpecialImageCollections from './SeedSpecialImageCollections'
-import dobbelOmega from './dobbelOmega/dobbelOmega'
-import seedNotificationChannels from './seedNotificationsChannels'
-import seedDevGroups from './development/seedDevGroups'
-import seedClasses from './seedClasses'
-import seedMail from './seedMail'
-import seedStudyProgramme from './seedStudyProgramme'
-import seedOmegaMembershipGroups from './seedOmegaMembershipGroups'
-import seedDevSchools from './development/seedDevSchools'
-import seedDevCompanies from './development/seedDevCompanies'
-import seedShop from './seedShop'
-import seedDevShop from './development/seedDevShop'
-import seedDevJobAds from './development/seedDevJobAds'
-import seedDevEvents from './development/seedDevEvents'
-import seedEvents from './seedEvent'
-import seedCabin from './seedCabin'
-import seedPermissions from './seedPermissions'
-import seedFlairs from './seedFlairs'
-import seedInterestGroups from './seedInterestGroups'
-import { prisma } from '@/prisma/client'
-
-
-export default async function seed(
-    shouldMigrate: boolean,
-    seedDevData: boolean,
-    logging?: boolean,
-) {
-    const enableLogging = logging === undefined ? true : logging
-    if (enableLogging) console.log('seeding standard data....')
-    await seedOrder(prisma)
-    await SeedSpecialImageCollections(prisma)
-    await seedImages(prisma)
-    await seedCms(prisma)
-    await seedMail(prisma)
-    await seedNotificationChannels(prisma)
-    await seedStudyProgramme(prisma)
-    await seedOmegaMembershipGroups(prisma)
-    await seedClasses(prisma)
-    await seedCabin(prisma)
-    await seedShop(prisma)
-    await seedEvents(prisma)
-    await seedPermissions(prisma)
-    await seedFlairs(prisma)
-    await seedInterestGroups(prisma)
-    if (enableLogging) console.log('seed standard done')
-
-    if (enableLogging) console.log(shouldMigrate ? 'migrating from veven' : 'not migrating from veven')
-    if (shouldMigrate) await dobbelOmega(prisma)
-
-    if (!seedDevData || shouldMigrate) return
-    if (enableLogging) console.log('seeding dev data....')
-    await seedDevImages(prisma)
-    await seedDevGroups(prisma)
-    await seedDevUsers(prisma)
-    await seedDevPermissions(prisma)
-    await seedDevOmegaquotes(prisma)
-    await seedDevNews(prisma)
-    await seedDevLockers(prisma)
-    await seedDevSchools(prisma)
-    await seedDevCompanies(prisma)
-    await seedDevJobAds(prisma)
-    await seedDevShop(prisma)
-    await seedDevEvents(prisma)
-    console.log('seed dev done')
-}
diff --git a/src/prisma/seeder/src/standardContent/seedArticleCategories.ts b/src/prisma/seeder/src/standardContent/seedArticleCategories.ts
new file mode 100644
index 000000000..b3f906866
--- /dev/null
+++ b/src/prisma/seeder/src/standardContent/seedArticleCategories.ts
@@ -0,0 +1,216 @@
+import { articleCategoryOperations } from '@/services/articleCategories/operations'
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
+import { upsert } from '@/seeder/src/upsert'
+import { buildArticleFromConfig } from '@/seeder/src/buildArticleFromConfig'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+import type { Data } from '@/services/serviceOperation'
+import type { SeedArticleConfig } from '@/seeder/src/buildArticleFromConfig'
+
+type SeedArticleCategoryConfig = Data<typeof articleCategoryOperations.create> & {
+    articles: SeedArticleConfig[],
+}
+
+export const seedArticleCategoriesConfig = [
+    {
+        name: 'om omega',
+        description: 'lær om omega',
+        articles: [
+            {
+                name: 'om omega',
+                coverImage: {
+                    image: { dynamicImageSeededForCmsName: 'ohma' },
+                    imageSize: 'LARGE'
+                },
+                articleSections: [
+                    {
+                        cmsParagraph: {
+                            file: 'about/about_1.md'
+                        },
+                        cmsLink: {
+                            url: 'https://omega.ntnu.no',
+                            text: 'Til forsiden'
+                        }
+                    },
+                    {
+                        cmsParagraph: {
+                            file: 'about/about_2.md'
+                        },
+                        cmsImage: {
+                            image: { dynamicImageSeededForCmsName: 'kappemann' },
+                            imageSize: 'LARGE'
+                        }
+                    }
+                ]
+            },
+            {
+                name: 'statutter',
+                coverImage: {
+                    image: { dynamicImageSeededForCmsName: 'ov' },
+                    imageSize: 'MEDIUM'
+                },
+                articleSections: [
+                    {
+                        cmsParagraph: {
+                            file: 'statutter/statutter_1.md'
+                        },
+                        cmsLink: {
+                            url: 'https://omega.ntnu.no',
+                            text: 'Til forsiden'
+                        }
+                    },
+                    {
+                        cmsParagraph: {
+                            file: 'statutter/statutter_2.md'
+                        },
+                        cmsImage: {
+                            image: { dynamicImageSeededForCmsName: 'traktat' },
+                            imageSize: 'MEDIUM'
+                        }
+                    }
+                ]
+            },
+        ]
+    },
+    {
+        name: 'guider',
+        description: 'få hjelp til ting',
+        articles: [
+            {
+                name: 'prikkreglement',
+                coverImage: {
+                    image: { dynamicImageSeededForCmsName: 'ov' },
+                    imageSize: 'MEDIUM'
+                },
+                articleSections: [
+                    {
+                        cmsParagraph: {
+                            file: 'prikkreglement/prikkreglement_1.md'
+                        },
+                        cmsImage: {
+                            image: { dynamicImageSeededForCmsName: 'traktat' },
+                            imageSize: 'MEDIUM'
+                        }
+                    }
+                ]
+            },
+            {
+                name: 'søknadsguide',
+                coverImage: {
+                    image: { dynamicImageSeededForCmsName: 'ov' },
+                    imageSize: 'MEDIUM'
+                },
+                articleSections: [
+                    {
+                        cmsParagraph: {
+                            file: 'soknadsguide/soknadsguide_1.md'
+                        },
+                        cmsImage: {
+                            image: { dynamicImageSeededForCmsName: 'kappemann' },
+                            imageSize: 'MEDIUM'
+                        }
+                    }
+                ]
+            }
+        ]
+    }
+] as const satisfies SeedArticleCategoryConfig[]
+
+/**
+ * This upserts the existance of all categories.
+ * Then upserts the existance of all articles in each category.
+ * If the article exists - it is not changed at all
+ * If the article does not exist - it is created with all its sections and content
+ * given by the config.
+ */
+export const seedArticleCategories = defineSeedOperation(async (prisma) => {
+    await Promise.all(seedArticleCategoriesConfig.map(async category => {
+        const categoryResult = await upsert({
+            checkExistance: () => articleCategoryOperations.read({ params: { name: category.name } }),
+            create: () => articleCategoryOperations.create({
+                data: { name: category.name, description: category.description }
+            }),
+            update: async () => {
+                const existingCategory = await articleCategoryOperations.read({ params: { name: category.name } })
+                return articleCategoryOperations.update({
+                    params: { id: existingCategory.id },
+                    data: { description: category.description }
+                })
+            },
+        })
+
+        for (const article of category.articles) {
+            await upsertArticleInCategory(
+                prisma,
+                { id: categoryResult.id, name: category.name },
+                article
+            )
+        }
+    }))
+})
+
+async function upsertArticleInCategory(
+    prisma: PrismaClient,
+    articleCategory: { id: number, name: string },
+    article: SeedArticleConfig
+) {
+    return upsert({
+        checkExistance: () => prisma.article.findUnique({
+            where: {
+                articleCategoryId_name: { articleCategoryId: articleCategory.id, name: article.name }
+            },
+            select: { id: true }
+        }),
+        create: () => createArticleInCategory(prisma, articleCategory.id, article),
+        update: () => Promise.resolve(),
+    })
+}
+
+/**
+ * This functions builds the article from config using the article operations.
+ */
+async function createArticleInCategory(
+    prisma: PrismaClient,
+    articleCategoryId: number,
+    article: SeedArticleConfig
+) {
+    const createdArticle = await articleCategoryOperations.addArticleToCategory({
+        params: { id: articleCategoryId }
+    })
+
+    await buildArticleFromConfig({
+        updateName: data => articleCategoryOperations.updateArticle.update({
+            implementationParams: { articleCategoryId },
+            params: { articleId: createdArticle.id },
+            data
+        }),
+        updateCoverImage: data => articleCategoryOperations.updateArticle.coverImage({
+            implementationParams: { articleCategoryId },
+            params: { cmsImageId: createdArticle.coverImage.id },
+            data
+        }),
+        addSection: data => articleCategoryOperations.updateArticle.addSection({
+            implementationParams: { articleCategoryId },
+            params: { articleId: createdArticle.id },
+            data
+        }),
+        updateSectionParagraph: (paragraphId, data) => articleCategoryOperations.updateArticle.articleSections.cmsParagraph({
+            implementationParams: { articleCategoryId },
+            params: { paragraphId },
+            data
+        }),
+        updateSectionImage: (cmsImageId, data) => articleCategoryOperations.updateArticle.articleSections.cmsImage({
+            implementationParams: { articleCategoryId },
+            params: { cmsImageId },
+            data
+        }),
+        updateSectionLink: (linkId, data) => articleCategoryOperations.updateArticle.articleSections.cmsLink({
+            implementationParams: { articleCategoryId },
+            params: { linkId },
+            data
+        }),
+        article,
+        prisma,
+    })
+
+    return createdArticle
+}
diff --git a/src/prisma/seeder/src/standardContent/seedFlairs.ts b/src/prisma/seeder/src/standardContent/seedFlairs.ts
new file mode 100644
index 000000000..d0710a085
--- /dev/null
+++ b/src/prisma/seeder/src/standardContent/seedFlairs.ts
@@ -0,0 +1,70 @@
+import { flairOperations } from '@/services/flairs/operations'
+import { standardStoreFiles } from '@/lib/standardStore/files'
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
+import { upsert } from '@/seeder/src/upsert'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+import type { StandardStoreFile } from '@/lib/standardStore/files'
+import type { Data } from '@/services/serviceOperation'
+
+type SeedFlairConfig = Pick<Data<typeof flairOperations.create>, 'name' | 'color'> & {
+    standardStoreFile: StandardStoreFile,
+}
+
+export const seedFlairsConfig = [
+    {
+        name: 'Påskekappe',
+        color: '#FFFF99',
+        standardStoreFile: standardStoreFiles.kappemannPaske,
+    },
+    {
+        name: 'Diamantkappe',
+        color: '#00CCFF',
+        standardStoreFile: standardStoreFiles.kappemannDiamant,
+    },
+    {
+        name: 'Gullkappe',
+        color: '#FFD700',
+        standardStoreFile: standardStoreFiles.kappemannGull,
+    },
+    {
+        name: 'Solvkappe',
+        color: '#D9D9D9',
+        standardStoreFile: standardStoreFiles.kappemannSolv,
+    },
+    {
+        name: 'Bronsekappe',
+        color: '#FF9900',
+        standardStoreFile: standardStoreFiles.kappemannBronse,
+    },
+] as const satisfies SeedFlairConfig[]
+
+/**
+ * Upserts all flairs in the intended rank order given by the config.
+ */
+export const seedFlairs = defineSeedOperation(async (prisma: PrismaClient) => {
+    for (const flair of seedFlairsConfig) {
+        await upsertFlair(prisma, flair)
+    }
+})
+
+async function upsertFlair(prisma: PrismaClient, flair: SeedFlairConfig) {
+    return upsert({
+        checkExistance: () => prisma.flair.findFirst({
+            where: { name: flair.name },
+            select: { id: true }
+        }),
+        create: () => createFlair(flair),
+        update: () => Promise.resolve(),
+    })
+}
+
+async function createFlair(flair: SeedFlairConfig) {
+    const uploadData = await flair.standardStoreFile.imageUploadData({ name: flair.name, alt: flair.name })
+    return flairOperations.create({
+        data: {
+            name: flair.name,
+            color: flair.color,
+            ...uploadData,
+        }
+    })
+}
diff --git a/src/prisma/seeder/src/standardContent/seedImages.ts b/src/prisma/seeder/src/standardContent/seedImages.ts
new file mode 100644
index 000000000..9360a622e
--- /dev/null
+++ b/src/prisma/seeder/src/standardContent/seedImages.ts
@@ -0,0 +1,173 @@
+import {
+    standardImageCollectionOperations,
+    generateStandardImagesCollectionFromConfig
+} from '@/services/images/standard/operations'
+import { StandardImage } from '@/prisma-generated-pn/enums'
+import { dynamicImageOperations } from '@/services/images/dynamic/operations'
+import { standardStoreFiles } from '@/lib/standardStore/files'
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
+import { upsert } from '@/seeder/src/upsert'
+import { generateOmbulCoversCollectionFromConfig } from '@/services/ombul/ombulCoverCollection'
+import { generateCommitteeLogosCollectionFromConfig } from '@/services/groups/committees/committeeLogoCollection'
+import { generateProfileImagesCollectionFromConfig } from '@/services/users/profileImageCollection'
+import { generateFlairImagesCollectionFromConfig } from '@/services/flairs/flairImageCollection'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+import type { StandardStoreFile } from '@/lib/standardStore/files'
+
+export const seedDynamicImagesForCms = [
+    {
+        standardStoreFile: standardStoreFiles.treaty,
+        name: 'traktat',
+        alt: 'En gammel traktat',
+    },
+    {
+        standardStoreFile: standardStoreFiles.kappemann,
+        name: 'kappemann',
+        alt: 'En kappemann',
+    },
+    {
+        standardStoreFile: standardStoreFiles.kongsberg,
+        name: 'kongsberg',
+        alt: 'Kongsberg',
+    },
+    {
+        standardStoreFile: standardStoreFiles.nordic,
+        name: 'nordic',
+        alt: 'Nordic',
+    },
+    {
+        standardStoreFile: standardStoreFiles.ohma,
+        name: 'ohma',
+        alt: 'Ohma (verdens beste lokomotiv)',
+    },
+    {
+        standardStoreFile: standardStoreFiles.omegaMai,
+        name: 'omega_mai',
+        alt: 'Omega mai',
+    },
+    {
+        standardStoreFile: standardStoreFiles.ov,
+        name: 'ov',
+        alt: 'OV',
+    },
+] as const satisfies {
+    standardStoreFile: StandardStoreFile,
+    name: string,
+    alt: string,
+}[]
+
+const SEEDED_CMS_IMAGES_COLLECTION_NAME = 'seeded cms images'
+
+/**
+ * Seeds
+ *
+ * 1. standard images, using the standardImageCollection api - note that this is actually not strictly necessary,
+ * as the standard images are generated on the fly when requested, if one uses the
+ * standardImageCollection api to request them (as one should always do when wanting standard images). Each one
+ * is only generated if missing - never regenerated - since standard images can be replaced through the admin
+ * image system and this should never overwrite one that already exists.
+ *
+ * 2. A set of dynamic images, which are seeded into a dynamic collection. These are used for dynamic cms content
+ * which is seeded later on. The collection and its images are likewise only created if missing.
+ */
+export const seedImages = defineSeedOperation(async (prisma: PrismaClient) => {
+    await Promise.all([
+        generateStandardImagesCollectionFromConfig.internalCall({}),
+        generateOmbulCoversCollectionFromConfig.internalCall({}),
+        generateCommitteeLogosCollectionFromConfig.internalCall({}),
+        generateProfileImagesCollectionFromConfig.internalCall({}),
+        generateFlairImagesCollectionFromConfig.internalCall({}),
+    ])
+
+    await Promise.all(
+        Object.values(StandardImage).map(standardImage => upsertStandardImage(prisma, standardImage))
+    )
+
+    await upsertSeededCmsImagesCollection(prisma)
+})
+
+async function upsertStandardImage(prisma: PrismaClient, standardImage: StandardImage) {
+    return upsert({
+        checkExistance: () => prisma.image.findUnique({
+            where: { standardImage },
+            select: { id: true }
+        }),
+        create: () => standardImageCollectionOperations.generateStandardImageFromConfig.internalCall({
+            params: { standardImage }
+        }),
+        update: () => Promise.resolve(),
+    })
+}
+
+async function upsertSeededCmsImagesCollection(prisma: PrismaClient) {
+    const collection = await upsert({
+        checkExistance: () => dynamicImageOperations.readCollection({
+            params: { collectionName: SEEDED_CMS_IMAGES_COLLECTION_NAME }
+        }),
+        create: () => dynamicImageOperations.createCollection({
+            data: {
+                collectionName: SEEDED_CMS_IMAGES_COLLECTION_NAME,
+                collectionDescription: 'A collection for images used for seeded cms content',
+            }
+        }),
+        update: () => dynamicImageOperations.readCollection({
+            params: { collectionName: SEEDED_CMS_IMAGES_COLLECTION_NAME }
+        }),
+    })
+
+    await Promise.all(
+        seedDynamicImagesForCms.map(imageConfig => upsertDynamicImageForCms(prisma, collection.id, imageConfig))
+    )
+}
+
+async function upsertDynamicImageForCms(
+    prisma: PrismaClient,
+    collectionId: number,
+    imageConfig: typeof seedDynamicImagesForCms[number]
+) {
+    return upsert({
+        checkExistance: () => prisma.image.findFirst({
+            where: { collectionId, name: imageConfig.name },
+            select: { id: true }
+        }),
+        create: async () => dynamicImageOperations.uploadImage({
+            data: await imageConfig.standardStoreFile.imageUploadData({
+                name: imageConfig.name,
+                alt: imageConfig.alt
+            }),
+            params: { collectionId }
+        }),
+        update: () => Promise.resolve(),
+    })
+}
+
+/**
+ * After seeding of the images is - both standard images and dynamic images we expose a type
+ * declearing which images can be used in the seeding of the cms content later in the seeding pipeline.
+ */
+export type ImagesAvailablieForCms = {
+    dynamicImageSeededForCmsName: typeof seedDynamicImagesForCms[number]['name']
+} | {
+    standardImage: StandardImage
+}
+
+/**
+ * Function used to obtain image based on imageAvailablieForCms relation.
+ */
+export async function getImageForCmsImageRelation(
+    image: ImagesAvailablieForCms,
+    prisma: PrismaClient
+) {
+    if ('standardImage' in image) {
+        return await prisma.image.findUniqueOrThrow({
+            where: {
+                standardImage: image.standardImage
+            }
+        })
+    }
+    return await prisma.image.findFirstOrThrow({
+        where: {
+            name: image.dynamicImageSeededForCmsName
+        }
+    })
+}
diff --git a/src/prisma/seeder/src/standardContent/seedNews.ts b/src/prisma/seeder/src/standardContent/seedNews.ts
new file mode 100644
index 000000000..402f9766d
--- /dev/null
+++ b/src/prisma/seeder/src/standardContent/seedNews.ts
@@ -0,0 +1,102 @@
+import { newsOperations } from '@/services/news/operations'
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
+import { upsert } from '@/seeder/src/upsert'
+import { buildArticleFromConfig } from '@/seeder/src/buildArticleFromConfig'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+import type { Data } from '@/services/serviceOperation'
+import type { SeedArticleConfig } from '@/seeder/src/buildArticleFromConfig'
+
+type SeedNewsConfig = Pick<Data<typeof newsOperations.create>, 'description'> & {
+    article: SeedArticleConfig,
+}
+
+export const seedNewsConfig = [
+    {
+        description: 'ny vev',
+        article: {
+            name: 'Velkommen til nye veven',
+            coverImage: {
+                image: { standardImage: 'LOGO_SIMPLE' },
+                imageSize: 'LARGE'
+            },
+            articleSections: [
+                {
+                    cmsParagraph: {
+                        file: 'news/velkommen_til_nye_veven_1.md'
+                    },
+                    cmsImage: {
+                        image: { dynamicImageSeededForCmsName: 'kappemann' },
+                        imageSize: 'LARGE'
+                    }
+                }
+            ]
+        }
+    },
+] as const satisfies SeedNewsConfig[]
+
+/**
+ * Upserts all news articles given by the config.
+ */
+export const seedNews = defineSeedOperation(async (prisma: PrismaClient) => {
+    await Promise.all(seedNewsConfig.map(news => upsertNews(prisma, news)))
+})
+
+/**
+ * There is no service operation to look up a news article by name (only by id), so existence is
+ * checked with a plain prisma read. On update nothing is touched - an admin may have since edited
+ * the news article's content through the CMS, so existing content is never reconciled with the
+ * seed config.
+ */
+async function upsertNews(prisma: PrismaClient, news: SeedNewsConfig) {
+    return upsert({
+        checkExistance: () => prisma.newsArticle.findFirst({
+            where: { articleName: news.article.name },
+            select: { id: true }
+        }),
+        create: () => createNews(prisma, news),
+        update: () => Promise.resolve(),
+    })
+}
+
+async function createNews(prisma: PrismaClient, news: SeedNewsConfig) {
+    const createdNews = await newsOperations.create({
+        data: { name: news.article.name, description: news.description }
+    })
+
+    await buildArticleFromConfig({
+        updateName: data => newsOperations.updateArticle.update({
+            implementationParams: { newsId: createdNews.id },
+            params: { articleId: createdNews.article.id },
+            data
+        }),
+        updateCoverImage: data => newsOperations.updateArticle.coverImage({
+            implementationParams: { newsId: createdNews.id },
+            params: { cmsImageId: createdNews.article.coverImage.id },
+            data
+        }),
+        addSection: data => newsOperations.updateArticle.addSection({
+            implementationParams: { newsId: createdNews.id },
+            params: { articleId: createdNews.article.id },
+            data
+        }),
+        updateSectionParagraph: (paragraphId, data) => newsOperations.updateArticle.articleSections.cmsParagraph({
+            implementationParams: { newsId: createdNews.id },
+            params: { paragraphId },
+            data
+        }),
+        updateSectionImage: (cmsImageId, data) => newsOperations.updateArticle.articleSections.cmsImage({
+            implementationParams: { newsId: createdNews.id },
+            params: { cmsImageId },
+            data
+        }),
+        updateSectionLink: (linkId, data) => newsOperations.updateArticle.articleSections.cmsLink({
+            implementationParams: { newsId: createdNews.id },
+            params: { linkId },
+            data
+        }),
+        article: news.article,
+        prisma,
+    })
+
+    return createdNews
+}
diff --git a/src/prisma/seeder/src/standardContent/seedOrders.ts b/src/prisma/seeder/src/standardContent/seedOrders.ts
new file mode 100644
index 000000000..99d081eb0
--- /dev/null
+++ b/src/prisma/seeder/src/standardContent/seedOrders.ts
@@ -0,0 +1,19 @@
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+
+const CURRENT_OMEGA_ORDER = 106
+
+/**
+ * Upserts every omega order up until CURRENT_OMEGA_ORDER.
+ */
+export const seedOrders = defineSeedOperation(async (prisma: PrismaClient) => {
+    await Promise.all(
+        Array.from({ length: CURRENT_OMEGA_ORDER }, (_, i) => i + 1).map(orderNumber =>
+            prisma.omegaOrder.upsert({
+                where: { order: orderNumber },
+                create: { order: orderNumber },
+                update: {},
+            })
+        )
+    )
+})
diff --git a/src/prisma/seeder/src/standardContent/seedSpecialCms.ts b/src/prisma/seeder/src/standardContent/seedSpecialCms.ts
new file mode 100644
index 000000000..b8acc9c45
--- /dev/null
+++ b/src/prisma/seeder/src/standardContent/seedSpecialCms.ts
@@ -0,0 +1,257 @@
+import { getImageForCmsImageRelation } from './seedImages'
+import { cmsImageOperations } from '@/cms/images/operations'
+import { cmsParagraphOperations } from '@/cms/paragraphs/operations'
+import { cmsLinkOperations } from '@/cms/links/operations'
+import { articleOperations } from '@/cms/articles/operations'
+import { publicArticleOperations } from '@/services/publicArticles/operations'
+import { buildArticleFromConfig, CMS_PARAGRAPHS_DIR } from '@/seeder/src/buildArticleFromConfig'
+import { defineSeedOperation } from '@/seeder/src/defineSeedOperation'
+import { upsert } from '@/seeder/src/upsert'
+import { SpecialCmsArticle, SpecialCmsImage, SpecialCmsLink, SpecialCmsParagraph } from '@/prisma-generated-pn/enums'
+import { readFileSync } from 'fs'
+import { join } from 'path'
+import type { ImagesAvailablieForCms } from './seedImages'
+import type { SeedArticleConfig, UpdateArticleOperationsReference } from '@/seeder/src/buildArticleFromConfig'
+import type { PrismaClient } from '@/prisma-generated-pn-client'
+
+/**
+ * This object describes the wanted initial configuration of special cms images.
+ * Note of course that this is no guarantee the special cms image will contain this image forever
+ * but it creates an initial state (i.e. image relation) that is nice for development.
+ *
+ * Strictly speaking it is not necessary to seed any special cms image, as the cms image api will
+ * create the special cms image on runtime if it does not exist - but with a null image relation.
+ */
+const seedSpecialCmsImageConfig: Record<SpecialCmsImage, ImagesAvailablieForCms> = {
+    FRONTPAGE_1: { dynamicImageSeededForCmsName: 'kappemann' },
+    FRONTPAGE_2: { dynamicImageSeededForCmsName: 'ohma' },
+    FRONTPAGE_3: { dynamicImageSeededForCmsName: 'ov' },
+    FRONTPAGE_4: { dynamicImageSeededForCmsName: 'ohma' },
+    FOOTER_SPONSOR_1: { dynamicImageSeededForCmsName: 'nordic' },
+    FOOTER_SPONSOR_2: { dynamicImageSeededForCmsName: 'kongsberg' },
+    FOOTER_SPONSOR_3: { dynamicImageSeededForCmsName: 'ov' },
+}
+
+/**
+ * Same idea as seedSpecialCmsImageConfig, but for special cms paragraphs: the file path is
+ * resolved relative to CMS_PARAGRAPHS_DIR and read in as the paragraph's initial markdown content.
+ */
+const seedSpecialCmsParagraphConfig: Record<SpecialCmsParagraph, string> = {
+    FRONTPAGE_1: 'frontpage/frontpage_1.md',
+    FRONTPAGE_2: 'frontpage/frontpage_2.md',
+    FRONTPAGE_3: 'frontpage/frontpage_3.md',
+    FRONTPAGE_4: 'frontpage/frontpage_4.md',
+    INTEREST_GROUP_GENERAL_INFO: 'interest_groups/general_info.md',
+    CAREER_INFO: 'career/career_info.md',
+    CABIN_CONTRACT: 'cabin/cabin_contract.md',
+}
+
+/**
+ * Same idea as seedSpecialCmsImageConfig, but for special cms links.
+ */
+type SeedCmsLinkConfig = Required<Parameters<typeof cmsLinkOperations.update.internalCall>[0]['data']>
+
+const seedSpecialCmsLinkConfig: Record<SpecialCmsLink, SeedCmsLinkConfig> = {
+    CAREER_LINK_TO_CONTACTOR: {
+        url: 'mailto:naeringsliv@omega.ntnu.no',
+        text: 'Kontakt oss'
+    },
+}
+
+/**
+ * Special articles aren't necessarily all owned by the same service - publicArticles happens to
+ * own both today, but a future split (e.g. a dedicated reportPage service) would only need to
+ * change the updateOperations reference for that article, not the seeding logic itself.
+ */
+type SeedSpecialArticleConfig = SeedArticleConfig & {
+    updateOperations: UpdateArticleOperationsReference,
+}
+
+const seedSpecialCmsArticleConfig: Record<SpecialCmsArticle, SeedSpecialArticleConfig> = {
+    REPORT_PAGE: {
+        updateOperations: publicArticleOperations.update,
+        name: 'Varslingside',
+        coverImage: {
+            image: { dynamicImageSeededForCmsName: 'ov' },
+            imageSize: 'MEDIUM'
+        },
+        articleSections: [
+            {
+                cmsParagraph: {
+                    file: 'varsling_info/varsling_info_1.md'
+                }
+            }
+        ]
+    },
+    NEW_STUDENT_PAGE: {
+        updateOperations: publicArticleOperations.update,
+        name: 'New Student',
+        coverImage: {
+            image: { dynamicImageSeededForCmsName: 'ov' },
+            imageSize: 'MEDIUM'
+        },
+        articleSections: [
+            {
+                cmsParagraph: {
+                    file: 'new_student/new_student_1.md'
+                }
+            }
+        ]
+    },
+}
+
+/**
+ * Seeds the special cms images, paragraphs, links and articles - the pieces of content addressed
+ * by a fixed `special` enum value rather than by id (frontpage/footer sponsor images and
+ * paragraphs, the career contact link, and special articles like the report page). None of this
+ * is strictly necessary, as every one of these self-heals with blank/placeholder content on first
+ * read if missing - this just gives a nicer initial state for development.
+ */
+export const seedSpecialCms = defineSeedOperation(async prisma => {
+    await Promise.all([
+        ...Object.values(SpecialCmsImage).map(
+            special => upsertSpecialCmsImage(prisma, special, seedSpecialCmsImageConfig[special])
+        ),
+        ...Object.values(SpecialCmsParagraph).map(
+            special => upsertSpecialCmsParagraph(prisma, special, seedSpecialCmsParagraphConfig[special])
+        ),
+        ...Object.values(SpecialCmsLink).map(
+            special => upsertSpecialCmsLink(prisma, special, seedSpecialCmsLinkConfig[special])
+        ),
+        ...Object.values(SpecialCmsArticle).map(
+            special => upsertSpecialCmsArticle(prisma, special, seedSpecialCmsArticleConfig[special])
+        ),
+    ])
+})
+
+async function upsertSpecialCmsImage(
+    prisma: PrismaClient,
+    special: SpecialCmsImage,
+    imageConfig: ImagesAvailablieForCms
+) {
+    return upsert({
+        checkExistance: () => prisma.cmsImage.findUnique({
+            where: { special },
+            select: { id: true }
+        }),
+        create: async () => {
+            const cmsImage = await cmsImageOperations.generateSpecialCmsImageFromConfig.internalCall({
+                params: { special }
+            })
+            const image = await getImageForCmsImageRelation(imageConfig, prisma)
+            return cmsImageOperations.update.internalCall({
+                params: { cmsImageId: cmsImage.id },
+                data: { imageId: image.id }
+            })
+        },
+        update: () => Promise.resolve(),
+    })
+}
+
+async function upsertSpecialCmsParagraph(
+    prisma: PrismaClient,
+    special: SpecialCmsParagraph,
+    file: string
+) {
+    return upsert({
+        checkExistance: () => prisma.cmsParagraph.findUnique({
+            where: { special },
+            select: { id: true }
+        }),
+        create: async () => {
+            const paragraph = await cmsParagraphOperations.generateSpecialCmsParagraphFromConfig.internalCall({
+                params: { special }
+            })
+            return cmsParagraphOperations.updateContent.internalCall({
+                params: { paragraphId: paragraph.id },
+                data: { markdown: readFileSync(join(CMS_PARAGRAPHS_DIR, file), 'utf-8') }
+            })
+        },
+        update: () => Promise.resolve(),
+    })
+}
+
+async function upsertSpecialCmsLink(
+    prisma: PrismaClient,
+    special: SpecialCmsLink,
+    link: SeedCmsLinkConfig
+) {
+    return upsert({
+        checkExistance: () => prisma.cmsLink.findUnique({
+            where: { special },
+            select: { id: true }
+        }),
+        create: async () => {
+            const cmsLink = await cmsLinkOperations.generateSpecialCmsLinkFromConfig.internalCall({
+                params: { special }
+            })
+            return cmsLinkOperations.update.internalCall({
+                params: { linkId: cmsLink.id },
+                data: link
+            })
+        },
+        update: () => Promise.resolve(),
+    })
+}
+
+async function upsertSpecialCmsArticle(
+    prisma: PrismaClient,
+    special: SpecialCmsArticle,
+    article: SeedSpecialArticleConfig
+) {
+    return upsert({
+        checkExistance: () => prisma.article.findUnique({
+            where: { special },
+            select: { id: true }
+        }),
+        create: () => createSpecialCmsArticle(prisma, special, article),
+        update: () => Promise.resolve(),
+    })
+}
+
+async function createSpecialCmsArticle(
+    prisma: PrismaClient,
+    special: SpecialCmsArticle,
+    { updateOperations, ...article }: SeedSpecialArticleConfig
+) {
+    const createdArticle = await articleOperations.generateSpecialArticleFromConfig.internalCall({
+        params: { special }
+    })
+
+    await buildArticleFromConfig({
+        updateName: data => updateOperations.update({
+            implementationParams: undefined,
+            params: { articleId: createdArticle.id },
+            data
+        }),
+        updateCoverImage: data => updateOperations.coverImage({
+            implementationParams: undefined,
+            params: { cmsImageId: createdArticle.coverImage.id },
+            data
+        }),
+        addSection: data => updateOperations.addSection({
+            implementationParams: undefined,
+            params: { articleId: createdArticle.id },
+            data
+        }),
+        updateSectionParagraph: (paragraphId, data) => updateOperations.articleSections.cmsParagraph({
+            implementationParams: undefined,
+            params: { paragraphId },
+            data
+        }),
+        updateSectionImage: (cmsImageId, data) => updateOperations.articleSections.cmsImage({
+            implementationParams: undefined,
+            params: { cmsImageId },
+            data
+        }),
+        updateSectionLink: (linkId, data) => updateOperations.articleSections.cmsLink({
+            implementationParams: undefined,
+            params: { linkId },
+            data
+        }),
+        article,
+        prisma,
+    })
+
+    return createdArticle
+}
diff --git a/src/prisma/seeder/src/upsert.ts b/src/prisma/seeder/src/upsert.ts
new file mode 100644
index 000000000..7addd8c75
--- /dev/null
+++ b/src/prisma/seeder/src/upsert.ts
@@ -0,0 +1,29 @@
+import { Smorekopp } from '@/services/error'
+
+/**
+ * Upserts through a pair of service operations rather than a native prisma upsert - use this when
+ * going through serviceOperations is the natural choice for a seed file; otherwise prefer a native
+ * prisma.model.upsert() against a real unique constraint.
+ *
+ * checkExistance's resolved value is only ever used for its truthiness, so it can be the read
+ * call itself (e.g. `() => someOperations.read({ params })`) rather than a boolean: a thrown
+ * NOT FOUND Smorekopp error, or any falsy resolved value (null, undefined, etc.), is treated as
+ * "does not exist" and runs create; anything else runs update.
+ */
+export async function upsert<ReturnCreate, ReturnUpdate>(
+    config: {
+        checkExistance: () => Promise<unknown>,
+        create: () => ReturnCreate,
+        update: () => ReturnUpdate,
+    }
+): Promise<ReturnCreate | ReturnUpdate> {
+    const exists = await config.checkExistance().catch(error => {
+        if (error instanceof Smorekopp && error.errorCode === 'NOT FOUND') return false
+        throw error
+    })
+
+    if (exists) {
+        return await config.update()
+    }
+    return await config.create()
+}
diff --git a/src/prisma/seeder/standard_store/images/default_image.jpeg b/src/prisma/seeder/standard_store/images/default_image.jpeg
deleted file mode 100644
index 2adcf11fa..000000000
Binary files a/src/prisma/seeder/standard_store/images/default_image.jpeg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/default_profile_image.png b/src/prisma/seeder/standard_store/images/default_profile_image.png
deleted file mode 100644
index 9f6d12e66..000000000
Binary files a/src/prisma/seeder/standard_store/images/default_profile_image.png and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Due.jpg b/src/prisma/seeder/standard_store/images/dev_profile_images/Due.jpg
deleted file mode 100644
index 59f2e4355..000000000
Binary files a/src/prisma/seeder/standard_store/images/dev_profile_images/Due.jpg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Ekorn.jpg b/src/prisma/seeder/standard_store/images/dev_profile_images/Ekorn.jpg
deleted file mode 100644
index c92749ee8..000000000
Binary files a/src/prisma/seeder/standard_store/images/dev_profile_images/Ekorn.jpg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Hest.jpg b/src/prisma/seeder/standard_store/images/dev_profile_images/Hest.jpg
deleted file mode 100644
index b6fba8fcf..000000000
Binary files a/src/prisma/seeder/standard_store/images/dev_profile_images/Hest.jpg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Kanin.jpg b/src/prisma/seeder/standard_store/images/dev_profile_images/Kanin.jpg
deleted file mode 100644
index 0b46f1b02..000000000
Binary files a/src/prisma/seeder/standard_store/images/dev_profile_images/Kanin.jpg and /dev/null differ
diff --git "a/src/prisma/seeder/standard_store/images/dev_profile_images/L\303\270ve.jpg" "b/src/prisma/seeder/standard_store/images/dev_profile_images/L\303\270ve.jpg"
deleted file mode 100644
index d0d690214..000000000
Binary files "a/src/prisma/seeder/standard_store/images/dev_profile_images/L\303\270ve.jpg" and /dev/null differ
diff --git "a/src/prisma/seeder/standard_store/images/dev_profile_images/Papeg\303\270ye.jpg" "b/src/prisma/seeder/standard_store/images/dev_profile_images/Papeg\303\270ye.jpg"
deleted file mode 100644
index cbd642d8b..000000000
Binary files "a/src/prisma/seeder/standard_store/images/dev_profile_images/Papeg\303\270ye.jpg" and /dev/null differ
diff --git "a/src/prisma/seeder/standard_store/images/dev_profile_images/P\303\245fugl.jpg" "b/src/prisma/seeder/standard_store/images/dev_profile_images/P\303\245fugl.jpg"
deleted file mode 100644
index 87bbef9ba..000000000
Binary files "a/src/prisma/seeder/standard_store/images/dev_profile_images/P\303\245fugl.jpg" and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/README.md b/src/prisma/seeder/standard_store/images/dev_profile_images/README.md
deleted file mode 100644
index 9e77725c1..000000000
--- a/src/prisma/seeder/standard_store/images/dev_profile_images/README.md
+++ /dev/null
@@ -1,2 +0,0 @@
-The images are fetched from https://pixabay.com/
-All are free to use, without credits.
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Sjiraff.jpg b/src/prisma/seeder/standard_store/images/dev_profile_images/Sjiraff.jpg
deleted file mode 100644
index 6b1845c58..000000000
Binary files a/src/prisma/seeder/standard_store/images/dev_profile_images/Sjiraff.jpg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Skilpadde.jpg b/src/prisma/seeder/standard_store/images/dev_profile_images/Skilpadde.jpg
deleted file mode 100644
index 2667d7dd1..000000000
Binary files a/src/prisma/seeder/standard_store/images/dev_profile_images/Skilpadde.jpg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Slange.jpg b/src/prisma/seeder/standard_store/images/dev_profile_images/Slange.jpg
deleted file mode 100644
index 1df759e4d..000000000
Binary files a/src/prisma/seeder/standard_store/images/dev_profile_images/Slange.jpg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Ugle.jpg b/src/prisma/seeder/standard_store/images/dev_profile_images/Ugle.jpg
deleted file mode 100644
index 8fe99275c..000000000
Binary files a/src/prisma/seeder/standard_store/images/dev_profile_images/Ugle.jpg and /dev/null differ
diff --git "a/src/prisma/seeder/standard_store/images/dev_profile_images/\303\230rn.jpg" "b/src/prisma/seeder/standard_store/images/dev_profile_images/\303\230rn.jpg"
deleted file mode 100644
index 57844ea93..000000000
Binary files "a/src/prisma/seeder/standard_store/images/dev_profile_images/\303\230rn.jpg" and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/harambe.jpg b/src/prisma/seeder/standard_store/images/harambe.jpg
deleted file mode 100644
index 855b6c53c..000000000
Binary files a/src/prisma/seeder/standard_store/images/harambe.jpg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/lens_camera.jpeg b/src/prisma/seeder/standard_store/images/lens_camera.jpeg
deleted file mode 100644
index 48a0c2320..000000000
Binary files a/src/prisma/seeder/standard_store/images/lens_camera.jpeg and /dev/null differ
diff --git a/src/prisma/seeder/standard_store/images/treaty.jpeg b/src/prisma/seeder/standard_store/images/treaty.jpeg
deleted file mode 100644
index 81a708d1e..000000000
Binary files a/src/prisma/seeder/standard_store/images/treaty.jpeg and /dev/null differ
diff --git a/src/services/admission/operations.ts b/src/services/admission/operations.ts
index 62d6b4535..c08206204 100644
--- a/src/services/admission/operations.ts
+++ b/src/services/admission/operations.ts
@@ -4,9 +4,9 @@ import { admissionAuth } from './auth'
 import { userFilterSelection } from '@/services/users/constants'
 import { defineOperation } from '@/services/serviceOperation'
 import { updateUserOmegaMembershipGroup } from '@/services/groups/omegaMembershipGroups/update'
+import { Admission } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
 import type { ExpandedAdmissionTrail } from './types'
-import { Admission } from '@/prisma-generated-pn-types'
 
 export const admissionOperations = {
     readTrial: defineOperation({
diff --git a/src/services/apiKeys/schemas.ts b/src/services/apiKeys/schemas.ts
index 361450fb5..d74d3bcba 100644
--- a/src/services/apiKeys/schemas.ts
+++ b/src/services/apiKeys/schemas.ts
@@ -1,6 +1,6 @@
 import { Zpn } from '@/lib/fields/zpn'
-import { z } from 'zod'
 import { Permission } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 const baseSchema = z.object({
     name: z.string().min(10, 'minimum lengde 10').max(100, 'maksimum lengde 100'),
diff --git a/src/services/applications/periods/constants.ts b/src/services/applications/periods/constants.ts
index 1752f83b3..0d4975742 100644
--- a/src/services/applications/periods/constants.ts
+++ b/src/services/applications/periods/constants.ts
@@ -5,11 +5,7 @@ export const committeesParticipatingincluder = {
         include: {
             committee: {
                 include: {
-                    logoImage: {
-                        include: {
-                            image: true
-                        }
-                    },
+                    logoImage: true,
                     paragraph: true
                 }
             }
diff --git a/src/services/applications/periods/operations.ts b/src/services/applications/periods/operations.ts
index c0c6a1b99..4b8de1f42 100644
--- a/src/services/applications/periods/operations.ts
+++ b/src/services/applications/periods/operations.ts
@@ -3,6 +3,7 @@ import { applicationPeriodAuth } from './auth'
 import { applicationPeriodSchemas } from './schemas'
 import { committeesParticipatingincluder } from './constants'
 import { applicationOperations } from '@/services/applications/operations'
+import { standardImageCollectionOperations } from '@/services/images/standard/operations'
 import { ServerError } from '@/services/error'
 import { defineOperation } from '@/services/serviceOperation'
 import { z } from 'zod'
@@ -18,10 +19,29 @@ export const applicationPeriodOperations = {
         paramsSchema: z.object({
             name: z.string()
         }),
-        operation: async ({ prisma, params }) => prisma.applicationPeriod.findUniqueOrThrow({
-            where: { name: params.name },
-            include: committeesParticipatingincluder,
-        })
+        operation: async ({ prisma, params }) => {
+            // committee.logoImage is null unless the committee has its own uploaded logo -
+            // resolve it to the shared default here so callers never see a null logo.
+            const defaultCommitteeLogo = await standardImageCollectionOperations.readStandardImage({
+                params: { standardImage: 'DEFAULT_COMMITTEE_LOGO' },
+            })
+
+            const period = await prisma.applicationPeriod.findUniqueOrThrow({
+                where: { name: params.name },
+                include: committeesParticipatingincluder,
+            })
+
+            return {
+                ...period,
+                committeesParticipating: period.committeesParticipating.map(participation => ({
+                    ...participation,
+                    committee: {
+                        ...participation.committee,
+                        logoImage: participation.committee.logoImage ?? defaultCommitteeLogo
+                    }
+                }))
+            }
+        }
     }),
 
     create: defineOperation({
diff --git a/src/services/applications/periods/types.ts b/src/services/applications/periods/types.ts
index 7cc3e353a..1cebcea58 100644
--- a/src/services/applications/periods/types.ts
+++ b/src/services/applications/periods/types.ts
@@ -9,6 +9,18 @@ export type CountdownInfo = {
     }[]
 }
 
-export type ExpandedApplicationPeriod = Prisma.ApplicationPeriodGetPayload<{
+type RawExpandedApplicationPeriod = Prisma.ApplicationPeriodGetPayload<{
     include: typeof committeesParticipatingincluder
 }>
+
+// committee.logoImage is resolved to a non-null default by applicationPeriodOperations.read,
+// unlike the raw (nullable) shape committeesParticipatingincluder would otherwise imply.
+export type ExpandedApplicationPeriod = Omit<RawExpandedApplicationPeriod, 'committeesParticipating'> & {
+    committeesParticipating: (
+        Omit<RawExpandedApplicationPeriod['committeesParticipating'][number], 'committee'> & {
+            committee: Omit<RawExpandedApplicationPeriod['committeesParticipating'][number]['committee'], 'logoImage'> & {
+                logoImage: Image
+            }
+        }
+    )[]
+}
diff --git a/src/services/articleCategories/operations.ts b/src/services/articleCategories/operations.ts
index 241d61da9..bd8cb4536 100644
--- a/src/services/articleCategories/operations.ts
+++ b/src/services/articleCategories/operations.ts
@@ -76,9 +76,14 @@ export const articleCategoryOperations = {
             id: z.number()
         }),
         opensTransaction: true,
-        operation: ({ prisma, params }) => {
+        operation: ({ prisma, params }) =>
             prisma.$transaction(async (tx) => {
-                const article = await articleOperations.create.internalCall({ data: { }, prisma: tx })
+                const article = await articleOperations.create.internalCall({
+                    data: {},
+                    prisma: tx,
+                    dataSchemaImplementationFields: { maxNameLength: 30 },
+                    operationImplementationFields: { special: null }
+                })
                 await tx.articleCategory.update({
                     where: {
                         id: params.id
@@ -91,8 +96,8 @@ export const articleCategoryOperations = {
                         }
                     }
                 })
+                return article
             })
-        }
     }),
 
     removeArticleFromCategory: defineOperation({
diff --git a/src/services/cabin/booking/operations.ts b/src/services/cabin/booking/operations.ts
index 9735d3a70..d42870ae9 100644
--- a/src/services/cabin/booking/operations.ts
+++ b/src/services/cabin/booking/operations.ts
@@ -11,9 +11,9 @@ import { cabinReleasePeriodOperations } from '@/services/cabin/releasePeriod/ope
 import { sendSystemMail } from '@/lib/email/send'
 import { notificationOperations } from '@/services/notifications/operations'
 import { cmsParagraphOperations } from '@/cms/paragraphs/operations'
+import { BookingType } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
 import type { CabinProductExtended } from '@/services/cabin/product/constants'
-import { BookingType } from '@/prisma-generated-pn-types'
 
 const mailData = {
     title: 'Bekreftelse på hyttebooking',
diff --git a/src/services/cabin/product/schemas.ts b/src/services/cabin/product/schemas.ts
index 96efd73d5..813fbbb95 100644
--- a/src/services/cabin/product/schemas.ts
+++ b/src/services/cabin/product/schemas.ts
@@ -1,7 +1,7 @@
 import { Zpn } from '@/lib/fields/zpn'
 import { convertPrice } from '@/lib/money/convert'
-import { z } from 'zod'
 import { BookingType } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 const baseSchema = z.object({
     type: z.nativeEnum(BookingType),
diff --git a/src/services/career/companies/operations.ts b/src/services/career/companies/operations.ts
index 39cfeea79..a29e96885 100644
--- a/src/services/career/companies/operations.ts
+++ b/src/services/career/companies/operations.ts
@@ -4,7 +4,6 @@ import { logoIncluder } from './constants'
 import { companySchemas } from './schemas'
 import { defineOperation } from '@/services/serviceOperation'
 import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { cmsImageOperations } from '@/cms/images/operations'
 import { z } from 'zod'
 
@@ -14,7 +13,10 @@ export const companyOperations = {
         authorizer: () => companyAuth.create.dynamicFields({}),
         operation: async ({ prisma, data }) => {
             //TODO: tranaction when createCmsImage is service operation.
-            const logo = await cmsImageOperations.create.internalCall({ data: {} })
+            const logo = await cmsImageOperations.create.internalCall({
+                data: {},
+                operationImplementationFields: { special: null }
+            })
             return await prisma.company.create({
                 data: {
                     ...data,
@@ -24,15 +26,7 @@ export const companyOperations = {
         }
     }),
     readPage: defineOperation({
-        paramsSchema: readPageInputSchemaObject(
-            z.number(),
-            z.object({
-                id: z.number(),
-            }),
-            z.object({
-                name: z.string().optional(),
-            }),
-        ),
+        paramsSchema: companySchemas.readPage,
         authorizer: () => companyAuth.readPage.dynamicFields({}),
         operation: async ({ prisma, params }) => await prisma.company.findMany({
             ...cursorPageingSelection(params.paging.page),
diff --git a/src/services/career/companies/schemas.ts b/src/services/career/companies/schemas.ts
index 17391806c..5dac32ae3 100644
--- a/src/services/career/companies/schemas.ts
+++ b/src/services/career/companies/schemas.ts
@@ -1,3 +1,4 @@
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { z } from 'zod'
 
 const baseSchema = z.object({
@@ -20,4 +21,13 @@ export const companySchemas = {
         name: true,
         description: true,
     }),
+    readPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number(),
+        }),
+        z.object({
+            name: z.string().optional(),
+        }),
+    ),
 }
diff --git a/src/services/career/companies/types.ts b/src/services/career/companies/types.ts
index 85bd6d3ea..37bf5155a 100644
--- a/src/services/career/companies/types.ts
+++ b/src/services/career/companies/types.ts
@@ -1,9 +1,11 @@
+import type { companySchemas } from './schemas'
+import type { InferPagingCursor, InferPagingDetails } from '@/lib/paging/schema'
 import type { ExpandedCmsImage } from '@/cms/images/types'
 import type { Company } from '@/prisma-generated-pn-types'
 
-export type CompanyCursor = { id: number }
+export type CompanyCursor = InferPagingCursor<typeof companySchemas.readPage>
 
-export type CompanyDetails = { name?: string }
+export type CompanyDetails = InferPagingDetails<typeof companySchemas.readPage>
 
 export type CompanyExpanded = Company & {
     logo: ExpandedCmsImage
diff --git a/src/services/career/jobAds/constants.ts b/src/services/career/jobAds/constants.ts
index e78d694dc..463a0f23d 100644
--- a/src/services/career/jobAds/constants.ts
+++ b/src/services/career/jobAds/constants.ts
@@ -1,6 +1,6 @@
 import { articleRealtionsIncluder } from '@/cms/articles/constants'
-import type { Prisma } from '@/prisma-generated-pn-types'
 import { JobType } from '@/prisma-generated-pn-types'
+import type { Prisma } from '@/prisma-generated-pn-types'
 
 
 export const jobAdType = {
diff --git a/src/services/career/jobAds/operations.ts b/src/services/career/jobAds/operations.ts
index 2d637154e..fef48894a 100644
--- a/src/services/career/jobAds/operations.ts
+++ b/src/services/career/jobAds/operations.ts
@@ -4,13 +4,11 @@ import { jobAdSchemas } from './schemas'
 import { articleAndCompanyIncluder, simpleArticleAndCompanyIncluder } from './constants'
 import { logoIncluder } from '@/services/career/companies/constants'
 import { defineOperation } from '@/services/serviceOperation'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
 import { articleOperations } from '@/cms/articles/operations'
 import { implementUpdateArticleOperations } from '@/cms/articles/implement'
 import { z } from 'zod'
 import type { ExpandedJobAd, SimpleJobAd } from './types'
-import { JobType } from '@/prisma-generated-pn-types'
 
 const read = defineOperation({
     paramsSchema: z.object({
@@ -35,7 +33,11 @@ export const jobAdOperations = {
         dataSchema: jobAdSchemas.create,
         authorizer: () => jobAdAuth.create.dynamicFields({}),
         operation: async ({ prisma, data: { articleName, companyId, ...data } }) => {
-            const article = await articleOperations.create.internalCall({ data: { name: articleName } })
+            const article = await articleOperations.create.internalCall({
+                data: { name: articleName },
+                dataSchemaImplementationFields: { maxNameLength: 30 },
+                operationImplementationFields: { special: null }
+            })
 
             return await prisma.jobAd.create({
                 data: {
@@ -90,16 +92,7 @@ export const jobAdOperations = {
      * @param paging - the page to read, includes details to filter by name (articleName) and the type.
      */
     readInactivePage: defineOperation({
-        paramsSchema: readPageInputSchemaObject(
-            z.number(),
-            z.object({
-                id: z.number(),
-            }),
-            z.object({
-                name: z.string().nullable(),
-                type: z.nativeEnum(JobType).nullable(),
-            }),
-        ),
+        paramsSchema: jobAdSchemas.readInactivePage,
         authorizer: () => jobAdAuth.readInactivePage.dynamicFields({}),
         operation: async ({ prisma, params }): Promise<SimpleJobAd[]> => {
             const jobAds = await prisma.jobAd.findMany({
diff --git a/src/services/career/jobAds/schemas.ts b/src/services/career/jobAds/schemas.ts
index 86483a7db..fc6954f0a 100644
--- a/src/services/career/jobAds/schemas.ts
+++ b/src/services/career/jobAds/schemas.ts
@@ -1,6 +1,7 @@
 import { Zpn } from '@/lib/fields/zpn'
-import { z } from 'zod'
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { JobType } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 const baseSchema = z.object({
     companyId: z.coerce.number({
@@ -31,4 +32,14 @@ export const jobAdSchemas = {
         active: true,
         location: true,
     }),
+    readInactivePage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number(),
+        }),
+        z.object({
+            name: z.string().nullable(),
+            type: z.nativeEnum(JobType).nullable(),
+        }),
+    ),
 }
diff --git a/src/services/career/jobAds/types.ts b/src/services/career/jobAds/types.ts
index bf9077c70..a297834e6 100644
--- a/src/services/career/jobAds/types.ts
+++ b/src/services/career/jobAds/types.ts
@@ -1,6 +1,8 @@
+import type { jobAdSchemas } from './schemas'
 import type { CompanyExpanded } from '@/services/career/companies/types'
 import type { ExpandedArticle } from '@/cms/articles/types'
-import type { JobAd, Image, JobType } from '@/prisma-generated-pn-types'
+import type { InferPagingCursor, InferPagingDetails } from '@/lib/paging/schema'
+import type { JobAd, Image } from '@/prisma-generated-pn-types'
 export type ExpandedJobAd = JobAd & {
     article: ExpandedArticle,
     company: CompanyExpanded,
@@ -15,11 +17,6 @@ export type SimpleJobAd = JobAd & {
     companyName: string,
 }
 
-export type JobAdInactiveCursor = {
-    id: number
-}
+export type JobAdInactiveCursor = InferPagingCursor<typeof jobAdSchemas.readInactivePage>
 
-export type JobAdInactiveDetails = {
-    name: string | null
-    type: JobType | null
-}
+export type JobAdInactiveDetails = InferPagingDetails<typeof jobAdSchemas.readInactivePage>
diff --git a/src/services/cms/articleSections/operations.ts b/src/services/cms/articleSections/operations.ts
index 61e1ebaa8..96c20b999 100644
--- a/src/services/cms/articleSections/operations.ts
+++ b/src/services/cms/articleSections/operations.ts
@@ -84,7 +84,10 @@ export const articleSectionOperations = {
             switch (data.part) {
                 case 'cmsImage':
                 {
-                    const cmsImage = await cmsImageOperations.create.internalCall({ data: {} })
+                    const cmsImage = await cmsImageOperations.create.internalCall({
+                        data: {},
+                        operationImplementationFields: { special: null }
+                    })
                     return await prisma.articleSection.update({
                         where,
                         data: { cmsImage: { connect: { id: cmsImage.id } } },
@@ -93,7 +96,10 @@ export const articleSectionOperations = {
                 }
                 case 'cmsParagraph':
                 {
-                    const cmsParagraph = await cmsParagraphOperations.create.internalCall({ data: {} })
+                    const cmsParagraph = await cmsParagraphOperations.create.internalCall({
+                        data: {},
+                        operationImplementationFields: { special: null }
+                    })
                     return await prisma.articleSection.update({
                         where,
                         data: { cmsParagraph: { connect: { id: cmsParagraph.id } } },
@@ -102,7 +108,10 @@ export const articleSectionOperations = {
                 }
                 case 'cmsLink':
                 {
-                    const cmsLink = await cmsLinkOperations.create.internalCall({ data: { text: 'lenke', url: './' } })
+                    const cmsLink = await cmsLinkOperations.create.internalCall({
+                        data: { text: 'lenke', url: './' },
+                        operationImplementationFields: { special: null }
+                    })
                     return await prisma.articleSection.update({
                         where,
                         data: { cmsLink: { connect: { id: cmsLink.id } } },
diff --git a/src/services/cms/articleSections/schemas.ts b/src/services/cms/articleSections/schemas.ts
index 32181b80b..1a937a34c 100644
--- a/src/services/cms/articleSections/schemas.ts
+++ b/src/services/cms/articleSections/schemas.ts
@@ -1,6 +1,6 @@
 import { maxImageSize, minImageSize } from './constants'
-import { z } from 'zod'
 import { Position } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 export const baseSchema = z.object({
     name: z.string().min(2).max(100).optional(),
diff --git a/src/services/cms/articles/operations.ts b/src/services/cms/articles/operations.ts
index 01806d077..7e22bbd4c 100644
--- a/src/services/cms/articles/operations.ts
+++ b/src/services/cms/articles/operations.ts
@@ -6,14 +6,14 @@ import { articleSectionOperations } from '@/cms/articleSections/operations'
 import { cmsImageOperations } from '@/cms/images/operations'
 import logger from '@/lib/logger'
 import { ServerError } from '@/services/error'
+import { SpecialCmsArticle } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
 import { v4 } from 'uuid'
 import type { ArticleSectionPart } from '@/cms/articleSections/types'
-import { SpecialCmsArticle } from '@/prisma-generated-pn-types'
 
 const create = defineSubOperation({
-    dataSchema: () => articleSchemas.create,
-    operation: () => async ({ prisma, data }) => {
+    dataSchema: ({ maxNameLength }: { maxNameLength: number }) => articleSchemas.create({ maxNameLength }),
+    operation: ({ special }: { special: SpecialCmsArticle | null }) => async ({ prisma, data }) => {
         let newName = 'Ny artikkel'
         let i = 1
         if (!data.name) {
@@ -32,15 +32,28 @@ const create = defineSubOperation({
                 name: data.name ?? newName,
                 coverImage: {
                     create: {},
-                }
+                },
+                special
             },
             include: articleRealtionsIncluder,
         })
     }
 })
 
+const generateSpecialArticleFromConfig = defineSubOperation({
+    paramsSchema: () => z.object({
+        special: z.nativeEnum(SpecialCmsArticle),
+    }),
+    operation: () => async ({ params }) => create.internalCall({
+        data: { name: `Regenerert spesiell ${params.special}` },
+        dataSchemaImplementationFields: { maxNameLength: 100 },
+        operationImplementationFields: { special: params.special }
+    })
+})
+
 export const articleOperations = {
     create,
+    generateSpecialArticleFromConfig,
     destroy: defineSubOperation({
         paramsSchema: () => articleSchemas.params,
         operation: () => async ({ prisma, params }) => {
@@ -63,16 +76,14 @@ export const articleOperations = {
                 },
                 include: articleRealtionsIncluder
             })
-            if (!article) {
-                logger.error(`Special article ${params.special} not found - creating it`)
-                return create.internalCall({
-                    data: { special: params.special, name: `Regenerert spesiell ${params.special}` },
-                })
-            }
-            return {
-                ...article,
-                coverImage: article.coverImage
+            if (article) {
+                return {
+                    ...article,
+                    coverImage: article.coverImage
+                }
             }
+            logger.error(`Special article ${params.special} not found - creating it!`)
+            return generateSpecialArticleFromConfig.internalCall({ params: { special: params.special } })
         }
     }),
     /**
diff --git a/src/services/cms/articles/schemas.ts b/src/services/cms/articles/schemas.ts
index 40fc31237..536254b2d 100644
--- a/src/services/cms/articles/schemas.ts
+++ b/src/services/cms/articles/schemas.ts
@@ -1,19 +1,19 @@
 import { baseSchema as baseSchemaArticleSections } from '@/cms/articleSections/schemas'
 import { z } from 'zod'
-import { SpecialCmsArticle } from '@/prisma-generated-pn-types'
 
 const baseSchema = z.object({
-    name: z.string().min(2, 'Minimum lengde er 2 tegn.').max(20, 'Maksimum lengde er 20 tegn.'),
-    special: z.nativeEnum(SpecialCmsArticle).optional(),
+    name: z.string().min(2, 'Minimum lengde er 2 tegn.').max(30, 'Maksimum lengde er 30 tegn.'),
     includeParts: z.record(baseSchemaArticleSections.shape.part, z.boolean()),
     direction: z.union([z.literal('UP'), z.literal('DOWN')])
 })
 
 export const articleSchemas = {
-    create: baseSchema.pick({
-        name: true,
-        special: true
-    }).partial(),
+    create: ({ maxNameLength }: { maxNameLength: number }) => z.object({
+        name: z.string()
+            .min(2, 'Minimum lengde er 2 tegn.')
+            .max(maxNameLength, `Maksimum lengde er ${maxNameLength} tegn.`)
+            .optional(),
+    }),
     update: baseSchema.pick({
         name: true,
     }).partial(),
diff --git a/src/services/cms/images/operations.ts b/src/services/cms/images/operations.ts
index e379b424b..0b9e343b3 100644
--- a/src/services/cms/images/operations.ts
+++ b/src/services/cms/images/operations.ts
@@ -1,15 +1,71 @@
 import '@pn-server-only'
 import { cmsImageSchemas } from './schemas'
 import { defineSubOperation } from '@/services/serviceOperation'
-import { ServerError } from '@/services/error'
-import { z } from 'zod'
+import { visibilityIncluder, toMatrix } from '@/services/visibility/implement'
+import { checkVisibility } from '@/auth/visibility/checkVisibility'
+import { specialImagePanels } from '@/services/images/specialPanels/constants'
+import { ServerError, Smorekopp } from '@/services/error'
 import { SpecialCmsImage } from '@/prisma-generated-pn-types'
+import logger from '@/lib/logger'
+import { z } from 'zod'
+import type { PrismaPossibleTransaction } from '@/services/serviceOperation'
+import type { SessionMaybeUser } from '@/auth/session/Session'
+
+/**
+ * Checks whether the session administrates the collection an image belongs to.
+ *
+ * The two kinds of collection answer this question differently:
+ * - a dynamic collection is administrated by the sessions fulfilling its admin visibility level
+ *   (or by anyone holding IMAGE_ADMIN, the same bypass the dynamic image auth uses)
+ * - a special collection has no meaningful visibility levels - it is administrated by the sessions
+ *   passing the panel auth of the service owning it
+ */
+async function sessionAdministratesCollectionOfImage({
+    prisma,
+    session,
+    imageId,
+}: {
+    prisma: PrismaPossibleTransaction<false>,
+    session: SessionMaybeUser,
+    imageId: number,
+}): Promise<boolean> {
+    const image = await prisma.image.findUnique({
+        where: {
+            id: imageId,
+        },
+        select: {
+            collection: {
+                select: {
+                    special: true,
+                    visibilityAdmin: {
+                        include: visibilityIncluder,
+                    },
+                },
+            },
+        },
+    })
+    if (!image) throw new ServerError('NOT FOUND', `Image with id ${imageId} does not exist`)
+
+    const { special, visibilityAdmin } = image.collection
+
+    if (special) {
+        return specialImagePanels[special].auth.dynamicFields({}).auth(session).authorized
+    }
+
+    return checkVisibility(session.memberships, toMatrix(visibilityAdmin))
+        || session.permissions.includes('IMAGE_ADMIN')
+}
 
 const create = defineSubOperation({
     dataSchema: () => cmsImageSchemas.create,
-    operation: () => ({ prisma, data: { imageId, ...data } }) => prisma.cmsImage.create({
+    operation: (
+        { special }: { special: SpecialCmsImage | null }
+    ) => (
+        { prisma, data: { imageId, ...data } }
+    ) => prisma.cmsImage.create({
         data: {
             ...data,
+            special,
             image: imageId !== undefined ? {
                 connect: {
                     id: imageId
@@ -22,8 +78,21 @@ const create = defineSubOperation({
     })
 })
 
+const generateSpecialCmsImageFromConfig = defineSubOperation({
+    paramsSchema: () => z.object({
+        special: z.nativeEnum(SpecialCmsImage)
+    }),
+    operation: () => async ({ params }) => create.internalCall({
+        data: {
+            name: params.special,
+        },
+        operationImplementationFields: { special: params.special }
+    })
+})
+
 export const cmsImageOperations = {
     create,
+    generateSpecialCmsImageFromConfig,
 
     readSpecial: defineSubOperation({
         paramsSchema: () => z.object({
@@ -38,15 +107,9 @@ export const cmsImageOperations = {
                     image: true
                 }
             })
-            if (!image) {
-                return create.internalCall({
-                    data: {
-                        name: params.special,
-                        special: params.special
-                    }
-                })
-            }
-            return image
+            if (image) return image
+            logger.error(`Could not find special cms image with special ${params.special} - creating it!`)
+            return generateSpecialCmsImageFromConfig.internalCall({ params: { special: params.special } })
         }
     }),
 
@@ -55,22 +118,41 @@ export const cmsImageOperations = {
             cmsImageId: z.number()
         }),
         dataSchema: () => cmsImageSchemas.update,
-        operation: () => ({ prisma, params, data: { imageId, ...data } }) => prisma.cmsImage.update({
-            where: {
-                id: params.cmsImageId,
-            },
-            data: {
-                ...data,
-                image: imageId !== undefined ? {
-                    connect: {
-                        id: imageId
-                    }
-                } : undefined
-            },
-            include: {
-                image: true
+        operation: () => async ({ prisma, params, session, bypassAuth, data: { imageId, ...data } }) => {
+            // The implementing service authorizes editing the cms image itself, but not the image
+            // being linked into it - a session may only point a cms image at an image from a
+            // collection it administrates.
+            if (imageId !== undefined && !bypassAuth) {
+                const administrates = await sessionAdministratesCollectionOfImage({
+                    prisma,
+                    session,
+                    imageId,
+                })
+                if (!administrates) {
+                    throw new Smorekopp(
+                        'UNAUTHORIZED',
+                        'Du kan bare bruke bilder fra samlinger du administrerer'
+                    )
+                }
             }
-        })
+
+            return prisma.cmsImage.update({
+                where: {
+                    id: params.cmsImageId,
+                },
+                data: {
+                    ...data,
+                    image: imageId !== undefined ? {
+                        connect: {
+                            id: imageId
+                        }
+                    } : undefined
+                },
+                include: {
+                    image: true
+                }
+            })
+        }
     }),
 
     destroy: defineSubOperation({
diff --git a/src/services/cms/images/schemas.ts b/src/services/cms/images/schemas.ts
index 06918484c..b40006b62 100644
--- a/src/services/cms/images/schemas.ts
+++ b/src/services/cms/images/schemas.ts
@@ -1,9 +1,8 @@
+import { ImageSize } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
-import { ImageSize, SpecialCmsImage } from '@/prisma-generated-pn-types'
 
 const baseSchema = z.object({
     name: z.string().max(200, 'Maks lengde er 200 tegn.').optional(),
-    special: z.nativeEnum(SpecialCmsImage).optional(),
     imageId: z.number().optional(),
     imageSize: z.nativeEnum(ImageSize).optional()
 })
@@ -11,7 +10,6 @@ const baseSchema = z.object({
 export const cmsImageSchemas = {
     create: baseSchema.pick({
         name: true,
-        special: true,
         imageId: true,
     }),
     update: baseSchema.pick({
diff --git a/src/services/cms/links/operations.ts b/src/services/cms/links/operations.ts
index 9f5a7c17b..2b29b0f67 100644
--- a/src/services/cms/links/operations.ts
+++ b/src/services/cms/links/operations.ts
@@ -3,19 +3,33 @@ import { cmsLinkSchemas } from './schemas'
 import { defineSubOperation } from '@/services/serviceOperation'
 import logger from '@/lib/logger'
 import { ServerError } from '@/services/error'
-import { z } from 'zod'
 import { SpecialCmsLink } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 const create = defineSubOperation({
     dataSchema: () => cmsLinkSchemas.create,
-    operation: () => ({ data, prisma }) =>
-        prisma.cmsLink.create({
-            data
-        })
+    operation: (
+        { special }: { special: SpecialCmsLink | null }
+    ) => (
+        { data, prisma }
+    ) => prisma.cmsLink.create({
+        data: { ...data, special }
+    })
+})
+
+const generateSpecialCmsLinkFromConfig = defineSubOperation({
+    paramsSchema: () => z.object({
+        special: z.nativeEnum(SpecialCmsLink),
+    }),
+    operation: () => async ({ params: { special } }) => create.internalCall({
+        data: { url: './', text: 'Default text' },
+        operationImplementationFields: { special }
+    })
 })
 
 export const cmsLinkOperations = {
     create,
+    generateSpecialCmsLinkFromConfig,
 
     destroy: defineSubOperation({
         paramsSchema: () => z.object({
@@ -61,11 +75,9 @@ export const cmsLinkOperations = {
             const cmsLink = await prisma.cmsLink.findUnique({
                 where: { special }
             })
-            if (!cmsLink) {
-                logger.error(`Could not find special cms link with special ${special} - creating it!`)
-                return await create.internalCall({ data: { special, url: './', text: 'Default text' } })
-            }
-            return cmsLink
+            if (cmsLink) return cmsLink
+            logger.error(`Could not find special cms link with special ${special} - creating it!`)
+            return await generateSpecialCmsLinkFromConfig.internalCall({ params: { special } })
         }
     }),
 
diff --git a/src/services/cms/links/schemas.ts b/src/services/cms/links/schemas.ts
index 7dcbd89d4..7536d0356 100644
--- a/src/services/cms/links/schemas.ts
+++ b/src/services/cms/links/schemas.ts
@@ -1,5 +1,4 @@
 import { z } from 'zod'
-import { SpecialCmsLink } from '@/prisma-generated-pn-types'
 
 const cmsLinkRefiner = {
     fcn: (url: string | undefined): boolean => {
@@ -20,7 +19,6 @@ const baseSchema = z.object({
     url: z.string().refine(cmsLinkRefiner.fcn, {
         message: cmsLinkRefiner.message
     }),
-    special: z.nativeEnum(SpecialCmsLink).optional(),
 })
 
 export const cmsLinkSchemas = {
@@ -28,7 +26,6 @@ export const cmsLinkSchemas = {
         name: true,
         text: true,
         url: true,
-        special: true,
     }),
     update: baseSchema.pick({
         text: true,
diff --git a/src/services/cms/paragraphs/operations.ts b/src/services/cms/paragraphs/operations.ts
index 17e6d18cc..c38db26d6 100644
--- a/src/services/cms/paragraphs/operations.ts
+++ b/src/services/cms/paragraphs/operations.ts
@@ -2,21 +2,35 @@ import '@pn-server-only'
 import { cmsParagraphSchemas } from './schemas'
 import { defineSubOperation } from '@/services/serviceOperation'
 import { ServerError } from '@/services/error'
-import { z } from 'zod'
+import { SpecialCmsParagraph } from '@/prisma-generated-pn-types'
+import logger from '@/lib/logger'
 import rehypeFormat from 'rehype-format'
 import rehypeStringify from 'rehype-stringify'
 import remarkParse from 'remark-parse'
 import remarkRehype from 'remark-rehype'
+import { z } from 'zod'
 import { unified } from 'unified'
-import { SpecialCmsParagraph } from '@/prisma-generated-pn-types'
 
 const create = defineSubOperation({
     dataSchema: () => cmsParagraphSchemas.create,
-    operation: () => async ({ data, prisma }) => await prisma.cmsParagraph.create({ data })
+    operation: (
+        { special }: { special: SpecialCmsParagraph | null }
+    ) => async ({ data, prisma }) => await prisma.cmsParagraph.create({ data: { ...data, special } })
+})
+
+const generateSpecialCmsParagraphFromConfig = defineSubOperation({
+    paramsSchema: () => z.object({
+        special: z.nativeEnum(SpecialCmsParagraph)
+    }),
+    operation: () => async ({ params }) => create.internalCall({
+        data: {},
+        operationImplementationFields: { special: params.special }
+    })
 })
 
 export const cmsParagraphOperations = {
     create,
+    generateSpecialCmsParagraphFromConfig,
 
     destroy: defineSubOperation({
         paramsSchema: () => z.object({ paragraphId: z.number() }),
@@ -35,10 +49,9 @@ export const cmsParagraphOperations = {
         }),
         operation: () => async ({ params, prisma }) => {
             const paragraph = await prisma.cmsParagraph.findUnique({ where: { special: params.special } })
-            if (!paragraph) {
-                return await create.internalCall({ data: { special: params.special } })
-            }
-            return paragraph
+            if (paragraph) return paragraph
+            logger.error(`Could not find special cms paragraph with special ${params.special} - creating it!`)
+            return await generateSpecialCmsParagraphFromConfig.internalCall({ params: { special: params.special } })
         }
     }),
 
diff --git a/src/services/cms/paragraphs/schemas.ts b/src/services/cms/paragraphs/schemas.ts
index f08b7d4b9..844ef62e6 100644
--- a/src/services/cms/paragraphs/schemas.ts
+++ b/src/services/cms/paragraphs/schemas.ts
@@ -1,15 +1,12 @@
 import { z } from 'zod'
-import { SpecialCmsParagraph } from '@/prisma-generated-pn-types'
-
 
 const baseSchema = z.object({
     name: z.string().optional(),
-    special: z.nativeEnum(SpecialCmsParagraph).optional(),
     markdown: z.string()
 })
 
 export const cmsParagraphSchemas = {
-    create: baseSchema.pick({ name: true, special: true }),
+    create: baseSchema.pick({ name: true }),
     update: baseSchema.pick({ name: true }).partial(),
     updateContent: baseSchema.pick({ markdown: true })
 } as const
diff --git a/src/services/dots/operations.ts b/src/services/dots/operations.ts
index 32a7a5652..6db3dcc90 100644
--- a/src/services/dots/operations.ts
+++ b/src/services/dots/operations.ts
@@ -4,7 +4,6 @@ import { dotSchemas } from './schemas'
 import { dotBaseDuration, dotsIncluder } from './constants'
 import { defineOperation } from '@/services/serviceOperation'
 import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { z } from 'zod'
 
 /**
@@ -96,16 +95,7 @@ const readWrappersForUser = defineOperation({
 
 const readPage = defineOperation({
     authorizer: () => dotAuth.readPage.dynamicFields({}),
-    paramsSchema: readPageInputSchemaObject(
-        z.number(),
-        z.object({
-            id: z.number(),
-        }),
-        z.object({
-            userId: z.number().nullable(),
-            onlyActive: z.boolean(),
-        }),
-    ),
+    paramsSchema: dotSchemas.readPage,
     operation: async ({ prisma, params }) => (await prisma.dotWrapper.findMany({
         ...cursorPageingSelection(params.paging.page),
         where: {
diff --git a/src/services/dots/schemas.ts b/src/services/dots/schemas.ts
index 81363e1ac..ee8142921 100644
--- a/src/services/dots/schemas.ts
+++ b/src/services/dots/schemas.ts
@@ -1,3 +1,4 @@
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { z } from 'zod'
 
 const dotSchema = z.object({
@@ -20,4 +21,14 @@ export const dotSchemas = {
         value: true,
         reason: true,
     }),
+    readPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number(),
+        }),
+        z.object({
+            userId: z.number().nullable(),
+            onlyActive: z.boolean(),
+        }),
+    ),
 }
diff --git a/src/services/dots/types.ts b/src/services/dots/types.ts
index 500cdb912..58b0b6418 100644
--- a/src/services/dots/types.ts
+++ b/src/services/dots/types.ts
@@ -1,13 +1,10 @@
+import type { dotSchemas } from './schemas'
+import type { InferPagingCursor, InferPagingDetails } from '@/lib/paging/schema'
 import type { Dot, DotWrapper, User } from '@/prisma-generated-pn-types'
 
-export type DotDetails = {
-    userId: number | null,
-    onlyActive: boolean,
-}
+export type DotDetails = InferPagingDetails<typeof dotSchemas.readPage>
 
-export type DotCursor = {
-    id: number
-}
+export type DotCursor = InferPagingCursor<typeof dotSchemas.readPage>
 
 export type DotWithActive = Dot & {
     active: boolean
diff --git a/src/services/education/courses/actions.ts b/src/services/education/courses/actions.ts
index dd53c6904..dd2bc83f2 100644
--- a/src/services/education/courses/actions.ts
+++ b/src/services/education/courses/actions.ts
@@ -1,9 +1,12 @@
 'use server'
 
 import { safeServerCall } from '@/services/actionError'
-import type { CreateCourseTypes } from '@/education/courses/validation'
+import type { z } from 'zod'
+import type { courseSchemas } from './schemas'
 
-export async function createCourseAction(rawdata: FormData | CreateCourseTypes['Type']) {
+// NOTE: still a stub — course creation is not implemented yet. Once it is, translate this into a
+// defineOperation (operations.ts) + makeAction here, the way the other education services are built.
+export async function createCourseAction(rawdata: FormData | z.input<typeof courseSchemas.create>) {
     console.log('createCourseAction', rawdata)
     return safeServerCall(async () => ({ success: false }))
 }
diff --git a/src/services/education/courses/schemas.ts b/src/services/education/courses/schemas.ts
new file mode 100644
index 000000000..c1d2f3db1
--- /dev/null
+++ b/src/services/education/courses/schemas.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod'
+
+const baseCourse = z.object({
+    name: z.string().max(40, 'Maks 40').min(3, 'min 3').trim(),
+    code: z.string().max(12, 'Maks 12').min(3, 'min 3').trim(),
+    ectspoints: z.coerce.number().min(1, 'min 1'),
+})
+
+export const courseSchemas = {
+    create: baseCourse,
+    update: baseCourse.partial(),
+}
diff --git a/src/services/education/courses/validation.ts b/src/services/education/courses/validation.ts
deleted file mode 100644
index 0f6026b31..000000000
--- a/src/services/education/courses/validation.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { ValidationBase } from '@/services/Validation'
-import { z } from 'zod'
-import type { ValidationTypes } from '@/services/Validation'
-
-const baseCourseValidation = new ValidationBase({
-    type: {
-        name: z.string(),
-        code: z.string(),
-        ectspoints: z.coerce.number(),
-    },
-    details: {
-        name: z.string().max(40, 'Maks 40').min(3, 'min 3').trim(),
-        code: z.string().max(12, 'Maks 12').min(3, 'min 3').trim(),
-        ectspoints: z.coerce.number().min(1, 'min 1'),
-    }
-})
-
-export const createCourseValidation = baseCourseValidation.createValidation({
-    keys: ['name', 'code', 'ectspoints'],
-    transformer: data => data
-})
-export type CreateCourseTypes = ValidationTypes<typeof createCourseValidation>
-
-export const updateCourseValidation = baseCourseValidation.createValidationPartial({
-    keys: ['name', 'code', 'ectspoints'],
-    transformer: data => data
-})
-export type UpdateCourseTypes = ValidationTypes<typeof updateCourseValidation>
diff --git a/src/services/education/schools/actions.ts b/src/services/education/schools/actions.ts
index 5af2b10b0..77c55e569 100644
--- a/src/services/education/schools/actions.ts
+++ b/src/services/education/schools/actions.ts
@@ -1,70 +1,15 @@
 'use server'
 import { schoolOperations } from './operations'
-import { createZodActionError, safeServerCall } from '@/services/actionError'
-import { createSchoolValidation, updateSchoolValidation } from '@/education/schools/validation'
-import { createSchool } from '@/services/education/schools/create'
-import { destroySchool } from '@/services/education/schools/destroy'
 import { makeAction } from '@/services/serverAction'
-import { readSchools, readSchoolsPage, readStandardSchools } from '@/services/education/schools/read'
-import { updateSchool } from '@/services/education/schools/update'
-import type { ReadPageInput } from '@/lib/paging/types'
-import type { CreateSchoolTypes, UpdateSchoolTypes } from '@/education/schools/validation'
-import type { ExpandedSchool, SchoolCursor, SchoolFiltered } from '@/services/education/schools/types'
-import type { ActionReturn } from '@/services/actionTypes'
-
-export async function createSchoolAction(
-    rawdata: FormData | CreateSchoolTypes['Type']
-): Promise<ActionReturn<SchoolFiltered>> {
-    const parse = createSchoolValidation.typeValidate(rawdata)
-    if (!parse.success) return createZodActionError(parse)
-    const data = parse.data
-
-    return await safeServerCall(() => createSchool(data))
-}
-
-export async function destroySchoolAction(id: number): Promise<ActionReturn<void>> {
-    return await safeServerCall(() => destroySchool(id))
-}
-
-export async function readSchoolsPageAction<const PageSize extends number>(
-    pageReadInput: ReadPageInput<PageSize, SchoolCursor>
-): Promise<ActionReturn<ExpandedSchool[]>> {
-    return await safeServerCall(() => readSchoolsPage(pageReadInput))
-}
-
-export async function readStandardSchoolsAction(): Promise<ActionReturn<SchoolFiltered[]>> {
-    return await safeServerCall(() => readStandardSchools())
-}
-
-export async function readSchoolsAction({
-    onlyNonStandard
-}: {
-    onlyNonStandard: boolean
-}): Promise<ActionReturn<SchoolFiltered[]>> {
-    return await safeServerCall(() => readSchools({ onlyNonStandard }))
-}
 
+export const createSchoolAction = makeAction(schoolOperations.create)
+export const destroySchoolAction = makeAction(schoolOperations.destroy)
 export const readSchoolAction = makeAction(schoolOperations.read)
-
-export async function updateSchoolAction(
-    id: number,
-    rawdata: FormData | UpdateSchoolTypes['Type']
-): Promise<ActionReturn<SchoolFiltered>> {
-    const parse = updateSchoolValidation.typeValidate(rawdata)
-    if (!parse.success) return createZodActionError(parse)
-    const data = parse.data
-
-    return await safeServerCall(() => updateSchool(id, data))
-}
-
-export const updateSchoolCmsParagraphContentAction = makeAction(
-    schoolOperations.updateCmsParagraphContent
-)
-
-export const updateSchoolCmsImageAction = makeAction(
-    schoolOperations.updateCmsImage
-)
-
-export const updateSchoolCmsLinkAction = makeAction(
-    schoolOperations.updateCmsLink
-)
+export const readExpandedSchoolsPageAction = makeAction(schoolOperations.readExpandedPage)
+export const readStandardSchoolsAction = makeAction(schoolOperations.readStandard)
+export const readSchoolsAction = makeAction(schoolOperations.readMany)
+export const updateSchoolAction = makeAction(schoolOperations.update)
+
+export const updateSchoolCmsParagraphContentAction = makeAction(schoolOperations.updateCmsParagraphContent)
+export const updateSchoolCmsImageAction = makeAction(schoolOperations.updateCmsImage)
+export const updateSchoolCmsLinkAction = makeAction(schoolOperations.updateCmsLink)
diff --git a/src/services/education/schools/auth.ts b/src/services/education/schools/auth.ts
index 7d5f002ca..4be4ab241 100644
--- a/src/services/education/schools/auth.ts
+++ b/src/services/education/schools/auth.ts
@@ -2,13 +2,14 @@ import { RequirePermission } from '@/auth/authorizer/RequirePermission'
 
 export const schoolAuth = {
     create: RequirePermission.staticFields({ permission: 'SCHOOLS_ADMIN' }),
+    createStandard: RequirePermission.staticFields({ permission: 'SCHOOLS_ADMIN' }),
     destroy: RequirePermission.staticFields({ permission: 'SCHOOLS_ADMIN' }),
-    readPage: RequirePermission.staticFields({ permission: 'SCHOOLS_READ' }),
+    read: RequirePermission.staticFields({ permission: 'SCHOOLS_READ' }),
+    readExpandedPage: RequirePermission.staticFields({ permission: 'SCHOOLS_READ' }),
     readStandard: RequirePermission.staticFields({ permission: 'SCHOOLS_READ' }),
     readMany: RequirePermission.staticFields({ permission: 'SCHOOLS_READ' }),
     update: RequirePermission.staticFields({ permission: 'SCHOOLS_ADMIN' }),
-    updateCmsParagraph: RequirePermission.staticFields({ permission: 'SCHOOLS_ADMIN' }),
-    read: RequirePermission.staticFields({ permission: 'SCHOOLS_READ' }),
+    updateCmsParagraphContent: RequirePermission.staticFields({ permission: 'SCHOOLS_ADMIN' }),
     updateCmsImage: RequirePermission.staticFields({ permission: 'SCHOOLS_ADMIN' }),
     updateCmsLink: RequirePermission.staticFields({ permission: 'SCHOOLS_ADMIN' }),
 } as const
diff --git a/src/services/education/schools/ConfigVars.ts b/src/services/education/schools/constants.ts
similarity index 79%
rename from src/services/education/schools/ConfigVars.ts
rename to src/services/education/schools/constants.ts
index 46c57e248..09467e679 100644
--- a/src/services/education/schools/ConfigVars.ts
+++ b/src/services/education/schools/constants.ts
@@ -1,5 +1,6 @@
 import { createSelection } from '@/services/createSelection'
-import type { CreateSchoolTypes } from './validation'
+import type { schoolSchemas } from './schemas'
+import type { z } from 'zod'
 import type { Prisma, School, StandardSchool } from '@/prisma-generated-pn-types'
 
 export const StandardSchoolsConfig = {
@@ -7,7 +8,7 @@ export const StandardSchoolsConfig = {
         name: 'Norges tekniske og naturvitenskapelige universitet',
         shortName: 'NTNU',
     }
-} as const satisfies Record<StandardSchool, CreateSchoolTypes['Detailed']>
+} as const satisfies Record<StandardSchool, Pick<z.infer<typeof schoolSchemas.create>, 'name' | 'shortName'>>
 
 export const SchoolFieldsToExpose = [
     'name',
diff --git a/src/services/education/schools/create.ts b/src/services/education/schools/create.ts
deleted file mode 100644
index e439f76ee..000000000
--- a/src/services/education/schools/create.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import '@pn-server-only'
-import { createSchoolValidation } from './validation'
-import { SchoolFilteredSelection, StandardSchoolsConfig } from './ConfigVars'
-import { prismaCall } from '@/services/prismaCall'
-import { ServerError } from '@/services/error'
-import { prisma } from '@/prisma-pn-client-instance'
-import { cmsParagraphOperations } from '@/cms/paragraphs/operations'
-import { cmsLinkOperations } from '@/cms/links/operations'
-import { cmsImageOperations } from '@/cms/images/operations'
-import type { SchoolFiltered } from './types'
-import type { CreateSchoolTypes } from './validation'
-import { StandardSchool } from '@/prisma-generated-pn-types'
-
-export async function createSchool(rawdata: CreateSchoolTypes['Detailed']): Promise<SchoolFiltered> {
-    const data = createSchoolValidation.detailedValidate(rawdata)
-
-    const cmsImage = await cmsImageOperations.create.internalCall({
-        data: {},
-    })
-    const cmsParagraph = await cmsParagraphOperations.create.internalCall({
-        data: {},
-    })
-    const cmsLink = await cmsLinkOperations.create.internalCall({ data: { text: 'link', url: './' } })
-
-    return await prismaCall(() => prisma.school.create({
-        data: {
-            name: data.name,
-            shortName: data.shortName,
-            standardSchool: data.standardSchool,
-            cmsImage: {
-                connect: {
-                    id: cmsImage.id
-                }
-            },
-            cmsParagraph: {
-                connect: {
-                    id: cmsParagraph.id
-                }
-            },
-            cmsLink: {
-                connect: {
-                    id: cmsLink.id
-                }
-            },
-        },
-        select: SchoolFilteredSelection
-    }))
-}
-
-export async function createStandardSchool(standardSchool: StandardSchool): Promise<SchoolFiltered> {
-    if (!Object.values(StandardSchool).includes(standardSchool)) {
-        throw new ServerError('BAD PARAMETERS', 'Invalid standard school')
-    }
-    return await createSchool({
-        ...StandardSchoolsConfig[standardSchool],
-        standardSchool,
-    })
-}
diff --git a/src/services/education/schools/destroy.ts b/src/services/education/schools/destroy.ts
deleted file mode 100644
index 009bf0415..000000000
--- a/src/services/education/schools/destroy.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import '@pn-server-only'
-import { prismaCall } from '@/services/prismaCall'
-import { ServerError } from '@/services/error'
-import { prisma } from '@/prisma-pn-client-instance'
-
-export async function destroySchool(id: number): Promise<void> {
-    const school = await prismaCall(() => prisma.school.findUniqueOrThrow({
-        where: { id },
-        select: { standardSchool: true }
-    }))
-    if (school.standardSchool) throw new ServerError('BAD PARAMETERS', 'Kan ikke slette standard skole')
-    await prismaCall(() => prisma.school.delete({ where: { id } }))
-}
diff --git a/src/services/education/schools/operations.ts b/src/services/education/schools/operations.ts
index 96016374f..e983ba562 100644
--- a/src/services/education/schools/operations.ts
+++ b/src/services/education/schools/operations.ts
@@ -1,10 +1,15 @@
 import '@pn-server-only'
 import { schoolAuth } from './auth'
-import { SchoolFilteredSelection, SchoolRelationIncluder } from './ConfigVars'
+import { schoolSchemas } from './schemas'
+import { SchoolFilteredSelection, SchoolRelationIncluder, StandardSchoolsConfig } from './constants'
 import { cmsParagraphOperations } from '@/cms/paragraphs/operations'
-import { defineOperation } from '@/services/serviceOperation'
 import { cmsImageOperations } from '@/cms/images/operations'
 import { cmsLinkOperations } from '@/cms/links/operations'
+import { defineOperation } from '@/services/serviceOperation'
+import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
+import { ServerError } from '@/services/error'
+import logger from '@/lib/logger'
+import { StandardSchool } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
 
 const read = defineOperation({
@@ -24,8 +29,68 @@ const read = defineOperation({
         })
 })
 
+const create = defineOperation({
+    authorizer: () => schoolAuth.create.dynamicFields({}),
+    dataSchema: schoolSchemas.create,
+    operation: async ({ prisma, data }) => {
+        const cmsImage = await cmsImageOperations.create.internalCall({
+            data: {},
+            operationImplementationFields: { special: null }
+        })
+        const cmsParagraph = await cmsParagraphOperations.create.internalCall({
+            data: {},
+            operationImplementationFields: { special: null }
+        })
+        const cmsLink = await cmsLinkOperations.create.internalCall({
+            data: { text: 'link', url: './' },
+            operationImplementationFields: { special: null }
+        })
+
+        return prisma.school.create({
+            data: {
+                name: data.name,
+                shortName: data.shortName,
+                standardSchool: data.standardSchool,
+                cmsImage: {
+                    connect: {
+                        id: cmsImage.id
+                    }
+                },
+                cmsParagraph: {
+                    connect: {
+                        id: cmsParagraph.id
+                    }
+                },
+                cmsLink: {
+                    connect: {
+                        id: cmsLink.id
+                    }
+                },
+            },
+            select: SchoolFilteredSelection,
+        })
+    }
+})
+
+const createStandard = defineOperation({
+    authorizer: () => schoolAuth.createStandard.dynamicFields({}),
+    paramsSchema: z.object({
+        standardSchool: z.nativeEnum(StandardSchool)
+    }),
+    operation: ({ params }) =>
+        // Called only internally by readStandard to lazily seed missing standard schools, so it
+        // bypasses the SCHOOLS_ADMIN authorizer while inheriting the ambient prisma/session.
+        create({
+            data: {
+                ...StandardSchoolsConfig[params.standardSchool],
+                standardSchool: params.standardSchool,
+            },
+            bypassAuth: true,
+        })
+})
+
 const updateCmsParagraphContent = cmsParagraphOperations.updateContent.implement({
-    authorizer: () => schoolAuth.updateCmsParagraph.dynamicFields({}),
+    authorizer: () => schoolAuth.updateCmsParagraphContent.dynamicFields({}),
     implementationParamsSchema: z.object({
         shortName: z.string()
     }),
@@ -59,7 +124,79 @@ const updateCmsLink = cmsLinkOperations.update.implement({
 
 export const schoolOperations = {
     read,
+    create,
+    createStandard,
+    destroy: defineOperation({
+        authorizer: () => schoolAuth.destroy.dynamicFields({}),
+        paramsSchema: z.object({
+            id: z.number()
+        }),
+        operation: async ({ prisma, params }) => {
+            const school = await prisma.school.findUniqueOrThrow({
+                where: { id: params.id },
+                select: { standardSchool: true },
+            })
+            if (school.standardSchool) throw new ServerError('BAD PARAMETERS', 'Kan ikke slette standard skole')
+            await prisma.school.delete({ where: { id: params.id } })
+        }
+    }),
+    readExpandedPage: defineOperation({
+        authorizer: () => schoolAuth.readExpandedPage.dynamicFields({}),
+        paramsSchema: schoolSchemas.readPage,
+        operation: ({ prisma, params }) =>
+            prisma.school.findMany({
+                select: {
+                    ...SchoolFilteredSelection,
+                    ...SchoolRelationIncluder,
+                },
+                orderBy: [
+                    { standardSchool: 'asc' },
+                    { shortName: 'asc' },
+                    { id: 'asc' },
+                ],
+                ...cursorPageingSelection(params.paging.page),
+            })
+    }),
+    readStandard: defineOperation({
+        authorizer: () => schoolAuth.readStandard.dynamicFields({}),
+        operation: ({ prisma }) =>
+            Promise.all(Object.values(StandardSchool).map(async standardSchool => {
+                const school = await prisma.school.findUnique({
+                    where: { standardSchool },
+                    select: SchoolFilteredSelection,
+                })
+                if (!school) {
+                    logger.warn(`Standard school ${standardSchool} not found in database - creating....`)
+                    return createStandard({ params: { standardSchool }, bypassAuth: true })
+                }
+                return school
+            }))
+    }),
+    readMany: defineOperation({
+        authorizer: () => schoolAuth.readMany.dynamicFields({}),
+        paramsSchema: schoolSchemas.readMany,
+        operation: ({ prisma, params }) =>
+            prisma.school.findMany({
+                where: params.onlyNonStandard ? {
+                    standardSchool: null,
+                } : undefined,
+                select: SchoolFilteredSelection,
+            })
+    }),
+    update: defineOperation({
+        authorizer: () => schoolAuth.update.dynamicFields({}),
+        paramsSchema: z.object({
+            id: z.number()
+        }),
+        dataSchema: schoolSchemas.update,
+        operation: ({ prisma, params, data }) =>
+            prisma.school.update({
+                where: { id: params.id },
+                data,
+                select: SchoolFilteredSelection,
+            })
+    }),
     updateCmsParagraphContent,
     updateCmsImage,
-    updateCmsLink
+    updateCmsLink,
 } as const
diff --git a/src/services/education/schools/read.ts b/src/services/education/schools/read.ts
deleted file mode 100644
index 396b8b4c4..000000000
--- a/src/services/education/schools/read.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import '@pn-server-only'
-import { createStandardSchool } from './create'
-import { SchoolFilteredSelection, SchoolRelationIncluder } from './ConfigVars'
-import { prismaCall } from '@/services/prismaCall'
-import logger from '@/lib/logger'
-import { prisma } from '@/prisma-pn-client-instance'
-import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
-import type { ExpandedSchool, SchoolCursor, SchoolFiltered } from './types'
-import type { ReadPageInput } from '@/lib/paging/types'
-import { StandardSchool } from '@/prisma-generated-pn-types'
-
-export async function readSchoolsPage<const PageSize extends number>({
-    page,
-}: ReadPageInput<PageSize, SchoolCursor>): Promise<ExpandedSchool[]> {
-    return await prismaCall(() => prisma.school.findMany({
-        select: {
-            ...SchoolFilteredSelection,
-            ...SchoolRelationIncluder,
-        },
-        orderBy: [
-            { standardSchool: 'asc' },
-            { shortName: 'asc' },
-            { id: 'asc' },
-        ],
-        ...cursorPageingSelection(page),
-    }))
-}
-
-export async function readSchools({ onlyNonStandard }: {onlyNonStandard: boolean}): Promise<SchoolFiltered[]> {
-    return await prismaCall(() => prisma.school.findMany({
-        where: onlyNonStandard ? {
-            standardSchool: null,
-        } : undefined,
-        select: SchoolFilteredSelection,
-    }))
-}
-
-export async function readStandardSchools(): Promise<SchoolFiltered[]> {
-    return Promise.all(Object.values(StandardSchool).map(async standardSchool => {
-        const school = await prismaCall(() => prisma.school.findUnique({
-            where: {
-                standardSchool,
-            },
-            select: SchoolFilteredSelection,
-        }))
-        if (!school) {
-            logger.warn(`Standard school ${standardSchool} not found in database - creating....`)
-            return await createStandardSchool(standardSchool)
-        }
-        return school
-    }))
-}
diff --git a/src/services/education/schools/schemas.ts b/src/services/education/schools/schemas.ts
new file mode 100644
index 000000000..4d5a200b8
--- /dev/null
+++ b/src/services/education/schools/schemas.ts
@@ -0,0 +1,27 @@
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
+import { z } from 'zod'
+import { StandardSchool } from '@/prisma-generated-pn-types'
+
+const baseSchool = z.object({
+    name: z.string().max(50).min(1).trim(),
+    shortName: z.string().max(20).min(1).trim(),
+    standardSchool: z.nativeEnum(StandardSchool).optional(),
+})
+
+export const schoolSchemas = {
+    create: baseSchool,
+    update: baseSchool.pick({
+        name: true,
+        shortName: true,
+    }).partial(),
+    readMany: z.object({
+        onlyNonStandard: z.boolean(),
+    }),
+    readPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number(),
+        }),
+        z.undefined(),
+    ),
+}
diff --git a/src/services/education/schools/types.ts b/src/services/education/schools/types.ts
index 66bbdb1bd..eac65ffd8 100644
--- a/src/services/education/schools/types.ts
+++ b/src/services/education/schools/types.ts
@@ -1,5 +1,5 @@
 import type { ExpandedCmsImage } from '@/cms/images/types'
-import type { SchoolFieldsToExpose } from './ConfigVars'
+import type { SchoolFieldsToExpose } from './constants'
 import type { CmsLink, CmsParagraph, School } from '@/prisma-generated-pn-types'
 
 export type SchoolFiltered = Pick<School, typeof SchoolFieldsToExpose[number]>
diff --git a/src/services/education/schools/update.ts b/src/services/education/schools/update.ts
deleted file mode 100644
index 671c0b862..000000000
--- a/src/services/education/schools/update.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import '@pn-server-only'
-import { SchoolFilteredSelection } from './ConfigVars'
-import { updateSchoolValidation } from './validation'
-import { prismaCall } from '@/services/prismaCall'
-import { prisma } from '@/prisma-pn-client-instance'
-import type { SchoolFiltered } from './types'
-import type { UpdateSchoolTypes } from './validation'
-
-export async function updateSchool(id: number, rawdata: UpdateSchoolTypes['Detailed']): Promise<SchoolFiltered> {
-    const data = updateSchoolValidation.detailedValidate(rawdata)
-
-    return await prismaCall(() => prisma.school.update({
-        where: { id },
-        data,
-        select: SchoolFilteredSelection,
-    }))
-}
diff --git a/src/services/education/schools/validation.ts b/src/services/education/schools/validation.ts
deleted file mode 100644
index f642cde3b..000000000
--- a/src/services/education/schools/validation.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { ValidationBase } from '@/services/Validation'
-import { z } from 'zod'
-import type { ValidationTypes } from '@/services/Validation'
-import { StandardSchool } from '@/prisma-generated-pn-types'
-
-const baseSchoolValidation = new ValidationBase({
-    type: {
-        name: z.string(),
-        shortName: z.string(),
-        standardSchool: z.nativeEnum(StandardSchool).optional(),
-    },
-    details: {
-        name: z.string().max(50).min(1).trim(),
-        shortName: z.string().max(20).min(1).trim(),
-        standardSchool: z.nativeEnum(StandardSchool).optional(),
-    }
-})
-
-export const createSchoolValidation = baseSchoolValidation.createValidation({
-    keys: ['name', 'shortName', 'standardSchool'],
-    transformer: data => data
-})
-export type CreateSchoolTypes = ValidationTypes<typeof createSchoolValidation>
-
-export const updateSchoolValidation = baseSchoolValidation.createValidationPartial({
-    keys: ['name', 'shortName'],
-    transformer: data => data
-})
-export type UpdateSchoolTypes = ValidationTypes<typeof updateSchoolValidation>
diff --git a/src/services/events/constants.ts b/src/services/events/constants.ts
index 85e6aeae9..a862467f5 100644
--- a/src/services/events/constants.ts
+++ b/src/services/events/constants.ts
@@ -1,6 +1,6 @@
 import { createSelection } from '@/services/createSelection'
-import type { Event } from '@/prisma-generated-pn-types'
 import { EventCanView } from '@/prisma-generated-pn-types'
+import type { Event } from '@/prisma-generated-pn-types'
 
 export const eventCanBeViewdBy = {
     ALL: { label: 'Alle' },
diff --git a/src/services/events/operations.ts b/src/services/events/operations.ts
index 4d6e1112c..0fd401b4f 100644
--- a/src/services/events/operations.ts
+++ b/src/services/events/operations.ts
@@ -6,7 +6,6 @@ import { notificationOperations } from '@/services/notifications/operations'
 import { getOsloTime } from '@/lib/dates/getOsloTime'
 import { ServerError } from '@/services/error'
 import { defineOperation } from '@/services/serviceOperation'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
 import { displayDate } from '@/lib/dates/displayDate'
 import { cmsImageOperations } from '@/cms/images/operations'
@@ -79,8 +78,14 @@ export const eventOperations = {
         dataSchema: eventSchemas.create,
         authorizer: () => eventAuth.create.dynamicFields({}),
         operation: async ({ prisma, data, session }) => {
-            const cmsParagraph = await cmsParagraphOperations.create.internalCall({ data: {} })
-            const cmsImage = await cmsImageOperations.create.internalCall({ data: {} })
+            const cmsParagraph = await cmsParagraphOperations.create.internalCall({
+                data: {},
+                operationImplementationFields: { special: null }
+            })
+            const cmsImage = await cmsImageOperations.create.internalCall({
+                data: {},
+                operationImplementationFields: { special: null }
+            })
 
             if (data.eventStart > data.eventEnd) {
                 throw new ServerError('BAD PARAMETERS', 'Event må jo strate før den slutter')
@@ -185,16 +190,7 @@ export const eventOperations = {
         }
     }),
     readManyArchivedPage: defineOperation({
-        paramsSchema: readPageInputSchemaObject(
-            z.number(),
-            z.object({
-                id: z.number(),
-            }),
-            z.object({
-                name: z.string().optional(),
-                tags: z.array(z.string()).nullable(),
-            }),
-        ), // Converted from ReadPageInput<number, EventArchiveCursor, EventArchiveDetails>
+        paramsSchema: eventSchemas.readManyArchivedPage,
         authorizer: () => eventAuth.readManyArchivedPage.dynamicFields({}),
         operation: async ({ prisma, params }): Promise<EventExpanded[]> => {
             const events = await prisma.event.findMany({
diff --git a/src/services/events/registration/operations.ts b/src/services/events/registration/operations.ts
index 187344ceb..01d674561 100644
--- a/src/services/events/registration/operations.ts
+++ b/src/services/events/registration/operations.ts
@@ -3,7 +3,7 @@ import { eventRegistrationIncluderDetailed, eventRegistrationSelection, REGISTRA
 import { eventRegistrationAuth } from './auth'
 import { eventRegistrationSchemas } from './schemas'
 import { Smorekopp } from '@/services/error'
-import { imageOperations } from '@/services/images/operations'
+import { standardImageCollectionOperations } from '@/services/images/standard/operations'
 import { notificationOperations } from '@/services/notifications/operations'
 import { sendSystemMail } from '@/lib/email/send'
 import { userFilterSelection } from '@/services/users/constants'
@@ -205,8 +205,8 @@ export const eventRegistrationOperations = {
             type: z.nativeEnum(REGISTRATION_READER_TYPE).optional(),
         }),
         operation: async ({ prisma, params }): Promise<EventRegistrationExpanded[]> => {
-            const defaultImage = await imageOperations.readSpecial({
-                params: { special: 'DEFAULT_PROFILE_IMAGE' },
+            const defaultImage = await standardImageCollectionOperations.readStandardImage({
+                params: { standardImage: 'DEFAULT_PROFILE_IMAGE' },
             })
 
             const skipTake = await calculateTakeSkip(prisma, params)
diff --git a/src/services/events/schemas.ts b/src/services/events/schemas.ts
index c2c65d542..d250b238b 100644
--- a/src/services/events/schemas.ts
+++ b/src/services/events/schemas.ts
@@ -1,6 +1,7 @@
 import { Zpn } from '@/lib/fields/zpn'
-import { z } from 'zod'
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { EventCanView } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 const baseSchema = z.object({
     name: z.string().min(5, 'Navnet må være minst 5 tegn').max(70, 'Navnet må være maks 70 tegn'),
@@ -57,4 +58,15 @@ export const eventSchemas = {
         tagIds: true,
         waitingList: true,
     }).refine(waitingListRefiner, waitingListMessage),
+
+    readManyArchivedPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number(),
+        }),
+        z.object({
+            name: z.string().optional(),
+            tags: z.array(z.string()).nullable(),
+        }),
+    ),
 }
diff --git a/src/services/events/tags/operations.ts b/src/services/events/tags/operations.ts
index 4ac49300e..2edc4f427 100644
--- a/src/services/events/tags/operations.ts
+++ b/src/services/events/tags/operations.ts
@@ -6,8 +6,8 @@ import { eventAuth } from '@/services/events/auth'
 import logger from '@/lib/logger'
 import { defineOperation } from '@/services/serviceOperation'
 import { ServerError } from '@/services/error'
-import { z } from 'zod'
 import { SpecialEventTags } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 export const eventTagOperations = {
     read: defineOperation({
diff --git a/src/services/events/types.ts b/src/services/events/types.ts
index 629837a2b..2299d057a 100644
--- a/src/services/events/types.ts
+++ b/src/services/events/types.ts
@@ -1,5 +1,7 @@
 import type { eventFilterSelection } from './constants'
+import type { eventSchemas } from './schemas'
 import type { ExpandedCmsImage } from '@/cms/images/types'
+import type { InferPagingCursor, InferPagingDetails } from '@/lib/paging/schema'
 import type { EventTag, Prisma } from '@/prisma-generated-pn-types'
 
 
@@ -16,6 +18,6 @@ export type EventExpanded = EventFiltered & {
     onWaitingList?: boolean,
 }
 
-export type EventArchiveCursor = { id: number }
+export type EventArchiveCursor = InferPagingCursor<typeof eventSchemas.readManyArchivedPage>
 
-export type EventArchiveDetails = { name?: string, tags: string[] | null }
+export type EventArchiveDetails = InferPagingDetails<typeof eventSchemas.readManyArchivedPage>
diff --git a/src/services/flairs/actions.ts b/src/services/flairs/actions.ts
index 223b5cfea..4c8d29d94 100644
--- a/src/services/flairs/actions.ts
+++ b/src/services/flairs/actions.ts
@@ -16,4 +16,4 @@ export const unAssignFlairToUserAction = makeAction(flairOperations.unAssignToUs
 export const increaseFlairRankAction = makeAction(flairOperations.increaseRank)
 export const decreaseFlairRankAction = makeAction(flairOperations.decreaseRank)
 
-export const updateFlairCmsImageAction = makeAction(flairOperations.updateCmsImage)
+export const updateFlairImageAction = makeAction(flairOperations.updateImage)
diff --git a/src/services/flairs/auth.ts b/src/services/flairs/auth.ts
index a31c56f45..ed700c0f1 100644
--- a/src/services/flairs/auth.ts
+++ b/src/services/flairs/auth.ts
@@ -2,6 +2,8 @@ import { RequireNothing } from '@/auth/authorizer/RequireNothing'
 import { RequirePermission } from '@/auth/authorizer/RequirePermission'
 import { RequireUserIdOrPermission } from '@/auth/authorizer/RequireUserIdOrPermission'
 
+export const flairImagesImagePanelAuth = RequirePermission.staticFields({ permission: 'FLAIR_ADMIN' })
+
 export const flairAuth = {
     create: RequirePermission.staticFields({ permission: 'FLAIR_ADMIN' }),
     destroy: RequirePermission.staticFields({ permission: 'FLAIR_ADMIN' }),
@@ -13,5 +15,5 @@ export const flairAuth = {
     read: RequireNothing.staticFields({}),
     readAll: RequireNothing.staticFields({}),
     readUserFlairs: RequireUserIdOrPermission.staticFields({ permission: 'USERS_READ' }),
-    updateCmsImage: RequirePermission.staticFields({ permission: 'FLAIR_ADMIN' }),
+    updateImage: RequirePermission.staticFields({ permission: 'FLAIR_ADMIN' }),
 } as const
diff --git a/src/services/flairs/flairImageCollection.ts b/src/services/flairs/flairImageCollection.ts
new file mode 100644
index 000000000..d049db27a
--- /dev/null
+++ b/src/services/flairs/flairImageCollection.ts
@@ -0,0 +1,16 @@
+import '@pn-server-only'
+import { flairImagesImagePanelAuth } from './auth'
+import { implementSpecialCollection } from '@/services/images/subservice/special/implement'
+
+export const {
+    internalOperations: flairImageOperations,
+    specialCollectionPanelOperations: flairImagesImagePanelOperations,
+    generateCollectionFromConfig: generateFlairImagesCollectionFromConfig
+} = implementSpecialCollection({
+    special: 'FLAIRIMAGES',
+    imagePanelAuther: flairImagesImagePanelAuth.dynamicFields({}),
+    config: {
+        name: 'Flairbilder',
+        description: 'Bilder brukt av flairs. Hvert bilde i denne samlingen tilhører nøyaktig én flair.',
+    }
+})
diff --git a/src/services/flairs/operations.ts b/src/services/flairs/operations.ts
index d78b10c87..04927f912 100644
--- a/src/services/flairs/operations.ts
+++ b/src/services/flairs/operations.ts
@@ -1,49 +1,33 @@
 import '@pn-server-only'
 import { flairAuth } from './auth'
 import { flairSchema } from './schemas'
+import { flairImageOperations } from './flairImageCollection'
 import { defineOperation } from '@/services/serviceOperation'
 import { ServerError } from '@/services/error'
-import { cmsImageOperations } from '@/cms/images/operations'
 import { z } from 'zod'
 
-const read = defineOperation({
-    authorizer: () => flairAuth.read.dynamicFields({}),
-    paramsSchema: z.object({
-        flairId: z.number(),
-    }),
-    operation: async ({ prisma, params: { flairId } }) =>
-        await prisma.flair.findUniqueOrThrow({
-            where: {
-                id: flairId,
-            },
-            include: {
-                cmsImage: {
-                    include: {
-                        image: true
-                    }
-                }
-            }
-        })
-})
-
 export const flairOperations = {
     create: defineOperation({
         authorizer: () => flairAuth.create.dynamicFields({}),
         dataSchema: flairSchema.create,
-        operation: async ({ prisma, data }) =>
-            await prisma.flair.create({
-                data: {
-                    cmsImage: {
-                        create: {
-
+        opensTransaction: true,
+        operation: ({ prisma, data }) =>
+            prisma.$transaction(async tx => {
+                const image = await flairImageOperations.uploadImage.internalCall({ prisma: tx, data })
+                return await tx.flair.create({
+                    data: {
+                        name: data.name,
+                        colorR: data.color.red,
+                        colorG: data.color.green,
+                        colorB: data.color.blue,
+                        image: {
+                            connect: {
+                                id: image.id
+                            }
                         }
-                    },
-                    name: data.name,
-                    colorR: data.color.red,
-                    colorG: data.color.green,
-                    colorB: data.color.blue,
-                }
-            })
+                    }
+                })
+            }, { timeout: 20000 })
     }),
     update: defineOperation({
         authorizer: () => flairAuth.update.dynamicFields({}),
@@ -51,7 +35,7 @@ export const flairOperations = {
         paramsSchema: z.object({
             flairId: z.number()
         }),
-        operation: async ({ prisma, params, data }) =>
+        operation: ({ prisma, params, data }) =>
             prisma.flair.update({
                 where: {
                     id: params.flairId,
@@ -64,17 +48,57 @@ export const flairOperations = {
                 }
             })
     }),
-    read,
+    updateImage: defineOperation({
+        authorizer: () => flairAuth.updateImage.dynamicFields({}),
+        paramsSchema: z.object({
+            flairId: z.number()
+        }),
+        dataSchema: flairSchema.updateImage,
+        opensTransaction: true,
+        operation: ({ prisma, params, data }) =>
+            prisma.$transaction(async tx => {
+                const existingFlair = await tx.flair.findUniqueOrThrow({
+                    where: { id: params.flairId }
+                })
+                const newImage = await flairImageOperations.uploadImage.internalCall({ prisma: tx, data })
+                await tx.flair.update({
+                    where: { id: existingFlair.id },
+                    data: {
+                        image: {
+                            connect: {
+                                id: newImage.id
+                            }
+                        }
+                    }
+                })
+                await flairImageOperations.destroyImage.internalCall({
+                    prisma: tx,
+                    params: { imageId: existingFlair.imageId }
+                })
+                return newImage
+            }, { timeout: 20000 })
+    }),
+    read: defineOperation({
+        authorizer: () => flairAuth.read.dynamicFields({}),
+        paramsSchema: z.object({
+            flairId: z.number(),
+        }),
+        operation: async ({ prisma, params: { flairId } }) =>
+            await prisma.flair.findUniqueOrThrow({
+                where: {
+                    id: flairId,
+                },
+                include: {
+                    image: true
+                }
+            })
+    }),
     readAll: defineOperation({
         authorizer: () => flairAuth.readAll.dynamicFields({}),
         operation: async ({ prisma }) => {
             const flairs = (await prisma.flair.findMany({
                 include: {
-                    cmsImage: {
-                        include: {
-                            image: true
-                        }
-                    }
+                    image: true
                 }
             })).sort((a, b) => a.rank - b.rank || a.id - b.id)
             // Assign new ranks: 1, 2, 3, ... so there are no gaps
@@ -89,11 +113,7 @@ export const flairOperations = {
             }
             const normalizedFlairs = await prisma.flair.findMany({
                 include: {
-                    cmsImage: {
-                        include: {
-                            image: true
-                        }
-                    }
+                    image: true
                 },
                 orderBy: { rank: 'asc' }
             })
@@ -113,11 +133,7 @@ export const flairOperations = {
                 select: {
                     flairs: {
                         include: {
-                            cmsImage: {
-                                include: {
-                                    image: true
-                                }
-                            }
+                            image: true
                         }
                     },
                 }
@@ -180,21 +196,20 @@ export const flairOperations = {
             flairId: z.number(),
         }),
         opensTransaction: true,
-        operation: async ({ prisma, params: { flairId } }) => {
+        operation: ({ prisma, params: { flairId } }) =>
             prisma.$transaction(async tx => {
                 const flair = await tx.flair.delete({
                     where: {
                         id: flairId,
                     }
                 })
-                await cmsImageOperations.destroy.internalCall({
+                await flairImageOperations.destroyImage.internalCall({
                     prisma: tx,
                     params: {
-                        cmsImageId: flair.imageId,
+                        imageId: flair.imageId,
                     }
                 })
             })
-        }
     }),
     increaseRank: defineOperation({
         authorizer: () => flairAuth.increaseRank.dynamicFields({}),
@@ -271,14 +286,4 @@ export const flairOperations = {
             })
         }
     }),
-    updateCmsImage: cmsImageOperations.update.implement({
-        authorizer: () => flairAuth.updateCmsImage.dynamicFields({}),
-        implementationParamsSchema: z.object({
-            flairId: z.number(),
-        }),
-        ownershipCheck: async ({ params, implementationParams }) => {
-            const flair = await read({ params: { flairId: implementationParams.flairId } })
-            return flair.cmsImage.id === params.cmsImageId
-        }
-    })
-}
+} as const
diff --git a/src/services/flairs/schemas.ts b/src/services/flairs/schemas.ts
index 7870b2cab..e0ff349cc 100644
--- a/src/services/flairs/schemas.ts
+++ b/src/services/flairs/schemas.ts
@@ -1,4 +1,5 @@
 import { Zpn } from '@/lib/fields/zpn'
+import { imageSchemas } from '@/services/images/subservice/schemas'
 import { z } from 'zod'
 
 const baseSchema = z.object({
@@ -10,10 +11,10 @@ export const flairSchema = {
     create: baseSchema.pick({
         name: true,
         color: true,
-    }),
+    }).merge(imageSchemas.uploadImage),
     update: baseSchema.partial().pick({
         name: true,
         color: true,
     }),
+    updateImage: imageSchemas.uploadImage,
 } as const
-
diff --git a/src/services/flairs/types.ts b/src/services/flairs/types.ts
index add2fad71..d94e619cf 100644
--- a/src/services/flairs/types.ts
+++ b/src/services/flairs/types.ts
@@ -1,7 +1,5 @@
-import type { ExpandedCmsImage } from '@/cms/images/types'
-import type { Flair } from '@/prisma-generated-pn-types'
-
+import type { Flair, Image } from '@/prisma-generated-pn-types'
 
 export type FlairWithImage = Pick<Flair, 'id'> & {
-    cmsImage: ExpandedCmsImage
+    image: Image
 }
diff --git a/src/services/frontpage/operations.ts b/src/services/frontpage/operations.ts
index c19e20949..5e7e935e4 100644
--- a/src/services/frontpage/operations.ts
+++ b/src/services/frontpage/operations.ts
@@ -16,21 +16,9 @@ const ownedCmsImages: Readonly<SpecialCmsImage[]> = [
     'FRONTPAGE_2',
     'FRONTPAGE_3',
     'FRONTPAGE_4',
-    'FOOTER_1',
-    'FOOTER_2',
-    'FOOTER_3',
-    'FOOTER_LOGO',
-    'FRONTPAGE_LOGO',
-    //TODO: these probably should not be read through 'frontpage'-service...
-    //but I anyway feel like making some of the special cms images into just special images
-    'MOBILE_NAV_LOGIN_BUTTON',
-    'MOBILE_NAV_PRIMARY_BUTTON',
-    'LOADER_IMAGE',
-    'AUTH_ICON',
-    'NAV_LOGIN_BUTTON',
-    'NAV_PRIMARY_BUTTON',
-    'NOT_FOUND',
-    'SERVER_ERROR'
+    'FOOTER_SPONSOR_1',
+    'FOOTER_SPONSOR_2',
+    'FOOTER_SPONSOR_3',
 ]
 
 export const frontpageOperations = {
diff --git a/src/services/groups/committees/auth.ts b/src/services/groups/committees/auth.ts
index 090db0290..6dc07165c 100644
--- a/src/services/groups/committees/auth.ts
+++ b/src/services/groups/committees/auth.ts
@@ -1,6 +1,8 @@
 import { RequirePermission } from '@/auth/authorizer/RequirePermission'
 import { RequirePermissionOrGroupAdmin } from '@/auth/authorizer/RequirePermissionOrGroupAdmin'
 
+export const committeeLogosImagePanelAuth = RequirePermission.staticFields({ permission: 'COMMITTEE_UPDATE' })
+
 export const committeeAuth = {
     create: RequirePermission.staticFields({ permission: 'COMMITTEE_CREATE' }),
     update: RequirePermission.staticFields({ permission: 'COMMITTEE_UPDATE' }),
@@ -13,4 +15,4 @@ export const committeeAuth = {
     updateParagraphContent: RequirePermissionOrGroupAdmin.staticFields({ permission: 'COMMITTEE_UPDATE' }),
     updateLogo: RequirePermissionOrGroupAdmin.staticFields({ permission: 'COMMITTEE_UPDATE' }),
     updateArticle: RequirePermissionOrGroupAdmin.staticFields({ permission: 'COMMITTEE_UPDATE' }),
-}
+} as const
diff --git a/src/services/groups/committees/committeeLogoCollection.ts b/src/services/groups/committees/committeeLogoCollection.ts
new file mode 100644
index 000000000..7cb20d689
--- /dev/null
+++ b/src/services/groups/committees/committeeLogoCollection.ts
@@ -0,0 +1,16 @@
+import '@pn-server-only'
+import { committeeLogosImagePanelAuth } from './auth'
+import { implementSpecialCollection } from '@/services/images/subservice/special/implement'
+
+export const {
+    internalOperations: committeeLogoImageOperations,
+    specialCollectionPanelOperations: committeeLogosImagePanelOperations,
+    generateCollectionFromConfig: generateCommitteeLogosCollectionFromConfig
+} = implementSpecialCollection({
+    special: 'COMMITTEELOGOS',
+    imagePanelAuther: committeeLogosImagePanelAuth.dynamicFields({}),
+    config: {
+        name: 'Komitélogoer',
+        description: 'Bilder brukt som komitélogoer. Hvert bilde i denne samlingen tilhører nøyaktig én komité.',
+    }
+})
diff --git a/src/services/groups/committees/constants.ts b/src/services/groups/committees/constants.ts
index ee12fbd39..cf47327df 100644
--- a/src/services/groups/committees/constants.ts
+++ b/src/services/groups/committees/constants.ts
@@ -2,11 +2,7 @@ import { userFilterSelection } from '@/services/users/constants'
 import type { Prisma } from '@/prisma-generated-pn-types'
 
 export const committeeLogoIncluder = {
-    logoImage: {
-        include: {
-            image: true
-        }
-    }
+    logoImage: true
 } satisfies Prisma.CommitteeInclude
 
 export const membershipIncluder = {
diff --git a/src/services/groups/committees/operations.ts b/src/services/groups/committees/operations.ts
index 9656fec67..a3aed60d7 100644
--- a/src/services/groups/committees/operations.ts
+++ b/src/services/groups/committees/operations.ts
@@ -1,23 +1,38 @@
+import '@pn-server-only'
 import { committeeAuth } from './auth'
 import { committeeExpandedIncluder, committeeLogoIncluder, membershipIncluder } from './constants'
-import { committeeSchemas } from './validation'
-import { cmsImageOperations } from '@/cms/images/operations'
+import { committeeSchemas } from './schemas'
+import { committeeLogoImageOperations } from './committeeLogoCollection'
 import { cmsParagraphOperations } from '@/cms/paragraphs/operations'
-import { imageOperations } from '@/services/images/operations'
-import { defineOperation, defineSubOperation } from '@/services/serviceOperation'
+import { defineOperation } from '@/services/serviceOperation'
 import { articleRealtionsIncluder } from '@/cms/articles/constants'
 import { implementUpdateArticleOperations } from '@/cms/articles/implement'
 import { articleOperations } from '@/cms/articles/operations'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
-import { z } from 'zod'
+import { standardImageCollectionOperations } from '@/services/images/standard/operations'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import { GroupType } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
+async function readDefaultCommitteeLogo() {
+    return standardImageCollectionOperations.readStandardImage({
+        params: { standardImage: 'DEFAULT_COMMITTEE_LOGO' },
+    })
+}
 
 const readAll = defineOperation({
     authorizer: () => committeeAuth.readAll.dynamicFields({}),
-    operation: async ({ prisma }) => prisma.committee.findMany({
-        include: committeeLogoIncluder,
-    })
+    operation: async ({ prisma }) => {
+        const defaultCommitteeLogo = await readDefaultCommitteeLogo()
+
+        const committees = await prisma.committee.findMany({
+            include: committeeLogoIncluder,
+        })
+
+        return committees.map(committee => ({
+            ...committee,
+            logoImage: committee.logoImage ?? defaultCommitteeLogo
+        }))
+    }
 })
 
 const read = defineOperation({
@@ -27,10 +42,10 @@ const read = defineOperation({
         z.object({ shortName: z.string() })
     ]),
     operation: async ({ prisma, params }) => {
-        const defaultImage = await imageOperations.readSpecial({
-            params: { special: 'DEFAULT_PROFILE_IMAGE' },
-            bypassAuth: true
+        const defaultProfileImage = await standardImageCollectionOperations.readStandardImage({
+            params: { standardImage: 'DEFAULT_PROFILE_IMAGE' },
         })
+        const defaultCommitteeLogo = await readDefaultCommitteeLogo()
 
         const result = await prisma.committee.findUniqueOrThrow({
             where: params,
@@ -39,6 +54,7 @@ const read = defineOperation({
 
         return {
             ...result,
+            logoImage: result.logoImage ?? defaultCommitteeLogo,
             coverImage: result.committeeArticle.coverImage,
             group: {
                 ...result.group,
@@ -46,7 +62,7 @@ const read = defineOperation({
                     ...membership,
                     user: {
                         ...membership.user,
-                        image: membership.user.image ?? defaultImage
+                        image: membership.user.image ?? defaultProfileImage
                     }
                 }))
             }
@@ -54,20 +70,6 @@ const read = defineOperation({
     }
 })
 
-const readFromGroupIds = defineSubOperation({
-    paramsSchema: () => z.object({
-        ids: z.number().int().array()
-    }),
-    operation: () => async ({ prisma, params }) => await prisma.committee.findMany({
-        where: {
-            groupId: {
-                in: params.ids
-            }
-        },
-        include: committeeLogoIncluder,
-    })
-})
-
 const readMembers = defineOperation({
     authorizer: () => committeeAuth.readMembers.dynamicFields({}),
     paramsSchema: z.object({
@@ -75,8 +77,8 @@ const readMembers = defineOperation({
         active: z.boolean().optional(),
     }),
     operation: async ({ prisma, params }) => {
-        const defaultImage = await imageOperations.readSpecial({
-            params: { special: 'DEFAULT_PROFILE_IMAGE' },
+        const defaultProfileImage = await standardImageCollectionOperations.readStandardImage({
+            params: { standardImage: 'DEFAULT_PROFILE_IMAGE' },
         })
 
         const commitee = await prisma.committee.findUniqueOrThrow({
@@ -101,7 +103,7 @@ const readMembers = defineOperation({
             ...member,
             user: {
                 ...member.user,
-                image: member.user.image ?? defaultImage
+                image: member.user.image ?? defaultProfileImage
             }
         }))
     }
@@ -153,24 +155,47 @@ const updateParagraphContent = cmsParagraphOperations.updateContent.implement({
         })).id === params.paragraphId
 })
 
-const updateLogo = cmsImageOperations.update.implement({
-    implementationParamsSchema: z.object({
-        shortName: z.string(),
-    }),
-    authorizer: async ({ implementationParams }) =>
+const updateLogo = defineOperation({
+    authorizer: async ({ params }) =>
         committeeAuth.updateLogo.dynamicFields({
             groupId: (await read({
-                params: { shortName: implementationParams.shortName },
+                params: { shortName: params.shortName },
                 bypassAuth: true
             })).groupId
         }),
-    ownershipCheck: async ({ implementationParams, params }) => {
-        const committee = await read({
-            params: { shortName: implementationParams.shortName },
-            bypassAuth: true
-        })
-        return committee.logoImage.id === params.cmsImageId
-    }
+    paramsSchema: z.object({
+        shortName: z.string(),
+    }),
+    dataSchema: committeeSchemas.updateLogo,
+    opensTransaction: true,
+    operation: ({ prisma, params, data }) =>
+        prisma.$transaction(async tx => {
+            const existingCommittee = await tx.committee.findUniqueOrThrow({
+                where: { shortName: params.shortName },
+            })
+
+            const newImage = await committeeLogoImageOperations.uploadImage.internalCall({ prisma: tx, data })
+
+            await tx.committee.update({
+                where: { id: existingCommittee.id },
+                data: {
+                    logoImage: {
+                        connect: { id: newImage.id }
+                    }
+                }
+            })
+
+            // A previous logoImageId is always an upload owned 1:1 by this committee (never the
+            // shared default, since that's only ever resolved at read time) - safe to destroy.
+            if (existingCommittee.logoImageId) {
+                await committeeLogoImageOperations.destroyImage.internalCall({
+                    prisma: tx,
+                    params: { imageId: existingCommittee.logoImageId }
+                })
+            }
+
+            return newImage
+        }, { timeout: 20000 })
 })
 
 const destroy = defineOperation({
@@ -183,15 +208,15 @@ const destroy = defineOperation({
             where: {
                 id: params.id,
             },
-            include: {
-                logoImage: {
-                    include: {
-                        image: true
-                    }
-                }
-            }
         })
-        articleOperations.destroy.internalCall({ params: { articleId: committee.committeeArticleId } })
+        await articleOperations.destroy.internalCall({ params: { articleId: committee.committeeArticleId } })
+
+        if (committee.logoImageId) {
+            await committeeLogoImageOperations.destroyImage.internalCall({
+                params: { imageId: committee.logoImageId }
+            })
+        }
+
         return committee
     }
 })
@@ -199,67 +224,78 @@ const destroy = defineOperation({
 const create = defineOperation({
     authorizer: () => committeeAuth.create.dynamicFields({}),
     dataSchema: committeeSchemas.create,
-    operation: async ({ prisma, data }) => {
-        const { name, shortName, logoImageId } = data
-        const defaultLogoImageId = await imageOperations.readSpecial({
-            params: { special: 'DAFAULT_COMMITTEE_LOGO' },
-        }).then(res => res.id)
-        const article = await articleOperations.create.internalCall({ data: {} })
+    opensTransaction: true,
+    operation: ({ prisma, data }) =>
+        prisma.$transaction(async tx => {
+            const logoImage = data.imageFile
+                ? await committeeLogoImageOperations.uploadImage.internalCall({
+                    prisma: tx,
+                    data: {
+                        imageFile: data.imageFile,
+                        imageAlt: data.imageAlt || `Komitélogoen til ${data.name}`,
+                        imageName: data.imageName,
+                        imageLicenseId: data.imageLicenseId,
+                        imageCredit: data.imageCredit,
+                    }
+                })
+                : null
 
-        const paragraph = await cmsParagraphOperations.create.internalCall({
-            data: { name: `Paragraph for ${name}` },
-        })
-        const applicationParagraph = await cmsParagraphOperations.create.internalCall({
-            data: { name: `Søknadstekst for ${name}` },
-        })
+            const article = await articleOperations.create.internalCall({
+                prisma: tx,
+                data: {},
+                dataSchemaImplementationFields: { maxNameLength: 30 },
+                operationImplementationFields: { special: null }
+            })
 
-        const order = (await readCurrentOmegaOrder()).order
+            const paragraph = await cmsParagraphOperations.create.internalCall({
+                prisma: tx,
+                data: { name: `Paragraph for ${data.name}` },
+                operationImplementationFields: { special: null }
+            })
+            const applicationParagraph = await cmsParagraphOperations.create.internalCall({
+                prisma: tx,
+                data: { name: `Søknadstekst for ${data.name}` },
+                operationImplementationFields: { special: null }
+            })
 
-        return await prisma.committee.create({
-            data: {
-                name,
-                shortName,
-                logoImage: {
-                    create: {
-                        name: `Komitélogoen til ${name}`,
-                        image: {
-                            connect: {
-                                id: logoImageId ?? defaultLogoImageId,
-                            },
+            const order = (await omegaOrderOperations.readCurrent({})).order
+
+            return await tx.committee.create({
+                data: {
+                    name: data.name,
+                    shortName: data.shortName,
+                    logoImage: logoImage ? {
+                        connect: {
+                            id: logoImage.id,
                         },
+                    } : undefined,
+                    paragraph: {
+                        connect: {
+                            id: paragraph.id,
+                        }
                     },
-                },
-                paragraph: {
-                    connect: {
-                        id: paragraph.id,
-                    }
-                },
-                group: {
-                    create: {
-                        groupType: GroupType.COMMITTEE,
-                        order,
-                    }
-                },
-                committeeArticle: {
-                    connect: {
-                        id: article.id
+                    group: {
+                        create: {
+                            groupType: GroupType.COMMITTEE,
+                            order,
+                        }
+                    },
+                    committeeArticle: {
+                        connect: {
+                            id: article.id
+                        }
+                    },
+                    applicationParagraph: {
+                        connect: {
+                            id: applicationParagraph.id
+                        }
                     }
                 },
-                applicationParagraph: {
-                    connect: {
-                        id: applicationParagraph.id
-                    }
-                }
-            },
-            include: {
-                logoImage: {
-                    include: {
-                        image: true,
-                    },
+                include: {
+                    logoImage: true,
                 },
-            },
-        })
-    }
+            })
+        }, { timeout: 20000 })
 })
 
 const update = defineOperation({
@@ -269,61 +305,51 @@ const update = defineOperation({
     }),
     dataSchema: committeeSchemas.update,
     operation: async ({ prisma, params, data }) => {
-        const { name, shortName, logoImageId } = data
+        const defaultCommitteeLogo = await readDefaultCommitteeLogo()
 
-        const defaultLogoImageId = await imageOperations.readSpecial({
-            params: { special: 'DAFAULT_COMMITTEE_LOGO' },
-        }).then(res => res.id)
-
-        return await prisma.committee.update({
+        const committee = await prisma.committee.update({
             where: {
                 id: params.id,
             },
-            data: {
-                name,
-                shortName,
-                logoImage: {
-                    update: {
-                        imageId: logoImageId ?? defaultLogoImageId,
-                    },
-                },
-            },
+            data,
             include: {
-                logoImage: {
-                    include: {
-                        image: true,
-                    },
-                },
+                logoImage: true,
             },
         })
+
+        return {
+            ...committee,
+            logoImage: committee.logoImage ?? defaultCommitteeLogo
+        }
+    }
+})
+
+const updateArticle = implementUpdateArticleOperations({
+    authorizer: async ({ implementationParams }) => committeeAuth.updateArticle.dynamicFields({
+        groupId: (await read({
+            params: { shortName: implementationParams.shortName },
+            bypassAuth: true
+        })).groupId
+    }),
+    implementationParamsSchema: z.object({
+        shortName: z.string(),
+    }),
+    ownedArticles: async ({ implementationParams }) => {
+        const article = await readArticle({ params: { shortName: implementationParams.shortName }, bypassAuth: true })
+        return [article]
     }
 })
 
 export const committeeOperations = {
     create,
     update,
+    updateLogo,
     readAll,
     read,
-    readFromGroupIds,
     readMembers,
     readArticle,
     readParagraph,
     updateParagraphContent,
-    updateLogo,
     destroy,
-    updateArticle: implementUpdateArticleOperations({
-        authorizer: async ({ implementationParams }) => committeeAuth.updateArticle.dynamicFields({
-            groupId: (await read({
-                params: { shortName: implementationParams.shortName },
-                bypassAuth: true
-            })).groupId
-        }),
-        implementationParamsSchema: z.object({
-            shortName: z.string(),
-        }),
-        ownedArticles: async ({ implementationParams }) => {
-            const article = await readArticle({ params: { shortName: implementationParams.shortName }, bypassAuth: true })
-            return [article]
-        }
-    })
-}
+    updateArticle,
+} as const
diff --git a/src/services/groups/committees/schemas.ts b/src/services/groups/committees/schemas.ts
new file mode 100644
index 000000000..709cc478f
--- /dev/null
+++ b/src/services/groups/committees/schemas.ts
@@ -0,0 +1,21 @@
+import { imageSchemas } from '@/services/images/subservice/schemas'
+import { z } from 'zod'
+
+const baseSchema = z.object({
+    name: z.string().max(32).min(1).trim(),
+    shortName: z.string().max(32).min(1).trim(),
+})
+
+export const committeeSchemas = {
+    // The logo is optional on create - committeeOperations.create falls back to the
+    // DEFAULT_COMMITTEE_LOGO standard image when it's omitted.
+    create: baseSchema.pick({
+        name: true,
+        shortName: true,
+    }).merge(imageSchemas.uploadImage.partial()),
+    update: baseSchema.pick({
+        name: true,
+        shortName: true,
+    }).partial(),
+    updateLogo: imageSchemas.uploadImage,
+} as const
diff --git a/src/services/groups/committees/types.ts b/src/services/groups/committees/types.ts
index c5e12b764..0c947eb19 100644
--- a/src/services/groups/committees/types.ts
+++ b/src/services/groups/committees/types.ts
@@ -1,9 +1,9 @@
 import type { ExpandedArticle } from '@/cms/articles/types'
 import type { ExpandedCmsImage } from '@/cms/images/types'
-import type { Committee } from '@/prisma-generated-pn-types'
+import type { Committee, Image } from '@/prisma-generated-pn-types'
 
 export type ExpandedCommittee = Committee & {
-    logoImage: ExpandedCmsImage
+    logoImage: Image
 }
 
 export type ExpandedCommitteeWithCover = ExpandedCommittee & {
diff --git a/src/services/groups/committees/validation.ts b/src/services/groups/committees/validation.ts
deleted file mode 100644
index 0f2be217e..000000000
--- a/src/services/groups/committees/validation.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { z } from 'zod'
-
-const baseSchema = z.object({
-    name: z.string().max(32).min(1).trim(),
-    shortName: z.string().max(32).min(1).trim(),
-    logoImageId: z.coerce.number().optional(),
-})
-
-export const committeeSchemas = {
-    create: baseSchema.pick({
-        name: true,
-        shortName: true,
-        logoImageId: true
-    }),
-    update: baseSchema.pick({
-        name: true,
-        shortName: true,
-        logoImageId: true
-    }).partial()
-}
diff --git a/src/services/groups/interestGroups/operations.ts b/src/services/groups/interestGroups/operations.ts
index aeb025164..5edb2f5ef 100644
--- a/src/services/groups/interestGroups/operations.ts
+++ b/src/services/groups/interestGroups/operations.ts
@@ -1,7 +1,7 @@
 import '@pn-server-only'
 import { interestGroupAuth } from './auth'
 import { interestGroupSchemas } from './schemas'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import { articleSectionsRealtionsIncluder } from '@/services/cms/articleSections/constants'
 import { defineOperation } from '@/services/serviceOperation'
 import { cmsParagraphOperations } from '@/cms/paragraphs/operations'
@@ -13,7 +13,7 @@ export const interestGroupOperations = {
         dataSchema: interestGroupSchemas.create,
         authorizer: () => interestGroupAuth.create.dynamicFields({}),
         operation: async ({ prisma, data }) => {
-            const { order } = await readCurrentOmegaOrder()
+            const { order } = await omegaOrderOperations.readCurrent({})
 
             await prisma.interestGroup.create({
                 data: {
diff --git a/src/services/groups/manualGroups/create.ts b/src/services/groups/manualGroups/create.ts
index f6b6b3db0..3a8928dca 100644
--- a/src/services/groups/manualGroups/create.ts
+++ b/src/services/groups/manualGroups/create.ts
@@ -1,6 +1,6 @@
 import { prismaCall } from '@/services/prismaCall'
 import { prisma } from '@/prisma-pn-client-instance'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import type { ExpandedManualGroup } from './types'
 
 type CreateManualGroupArgs = {
@@ -9,7 +9,7 @@ type CreateManualGroupArgs = {
 }
 
 export async function createManualGroup(data: CreateManualGroupArgs): Promise<ExpandedManualGroup> {
-    const order = (await readCurrentOmegaOrder()).order
+    const order = (await omegaOrderOperations.readCurrent({ bypassAuth: true })).order
 
     return await prismaCall(() => prisma.manualGroup.create({
         data: {
diff --git a/src/services/groups/memberships/create.ts b/src/services/groups/memberships/create.ts
index 730fe91dc..0cab4879b 100644
--- a/src/services/groups/memberships/create.ts
+++ b/src/services/groups/memberships/create.ts
@@ -1,6 +1,6 @@
 import '@pn-server-only'
 import { canEasilyManageMembershipOfGroup, canEasilyManageMembershipOfGroups } from './canEasilyManageMembership'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import { prismaCall } from '@/services/prismaCall'
 import { ServerError } from '@/services/error'
 import { prisma } from '@/prisma-pn-client-instance'
@@ -115,7 +115,7 @@ export async function createMembershipsForUser(
         }
     })
 
-    const { order: fallbackOrder } = await readCurrentOmegaOrder()
+    const { order: fallbackOrder } = await omegaOrderOperations.readCurrent({ bypassAuth: true })
 
     await prismaCall(() => prisma.membership.updateMany({
         where: {
diff --git a/src/services/groups/omegaMembershipGroups/update.ts b/src/services/groups/omegaMembershipGroups/update.ts
index a7473c427..c8e23c47e 100644
--- a/src/services/groups/omegaMembershipGroups/update.ts
+++ b/src/services/groups/omegaMembershipGroups/update.ts
@@ -3,7 +3,7 @@ import { readOmegaMembershipGroup, readUserOmegaMembershipLevel } from './read'
 import { OMEGA_MEMBERSHIP_LEVEL_RANKING } from '@/services/groups/constants'
 import { prisma } from '@/prisma-pn-client-instance'
 import { prismaCall } from '@/services/prismaCall'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import { ServerError } from '@/services/error'
 import type { OmegaMembershipLevel } from '@/prisma-generated-pn-types'
 
@@ -33,7 +33,7 @@ export async function updateUserOmegaMembershipGroup(
         }
     }
 
-    const currentOmegaOrder = await readCurrentOmegaOrder()
+    const currentOmegaOrder = await omegaOrderOperations.readCurrent({ bypassAuth: true })
 
     await prismaCall(() => prisma.$transaction([
         prisma.membership.deleteMany({
diff --git a/src/services/groups/operations.ts b/src/services/groups/operations.ts
index ba214339a..f8ea3d896 100644
--- a/src/services/groups/operations.ts
+++ b/src/services/groups/operations.ts
@@ -1,12 +1,14 @@
 import '@pn-server-only'
-import { groupsExpandedIncluder, groupTypesConfig, OmegaMembershipLevelConfig, readGroupsOfUserIncluder } from './constants'
+import { groupsExpandedIncluder, groupTypesConfig, readGroupsOfUserIncluder } from './constants'
 import { groupAuth } from './auth'
 import { userFilterSelection } from '@/services/users/constants'
 import { ServerError } from '@/services/error'
 import { defineOperation, defineSubOperation } from '@/services/serviceOperation'
 import { getMembershipFilter } from '@/auth/getMembershipFilter'
-import logger from '@/lib/logger'
+import { checkGroupValidity } from '@/lib/groups/checkGroupValidity'
+import { inferGroupName } from '@/lib/groups/inferGroupName'
 import { z } from 'zod'
+import type { ValidatedGroup } from '@/lib/groups/checkGroupValidity'
 import type {
     Class,
     Committee,
@@ -20,7 +22,6 @@ import type {
     ExpandedGroup,
     GroupsStructured,
     GroupWithDumbRelations,
-    GroupWithRelations,
     GroupWithRelationsNameInferencer
 } from './types'
 import type { UserFiltered } from '@/services/users/types'
@@ -45,38 +46,14 @@ async function expandGroup(group: GroupWithRelationsNameInferencer & {
 }
 
 /**
- * This function tries to give a name to a group based on the group type and the group data.
- * @param group - The group to infer the name of
- * @returns
- */
-export function inferGroupName(group: GroupWithRelationsNameInferencer): string {
-    switch (group.groupType) {
-        case 'COMMITTEE':
-            return group.committee.name
-        case 'MANUAL_GROUP':
-            return group.manualGroup.name
-        case 'CLASS':
-            return `${group.class.year}. Klasse`
-        case 'INTEREST_GROUP':
-            return group.interestGroup.name
-        case 'OMEGA_MEMBERSHIP_GROUP':
-            return OmegaMembershipLevelConfig[group.omegaMembershipGroup?.omegaMembershipLevel].name
-        case 'STUDY_PROGRAMME':
-            return group.studyProgramme?.name
-        default:
-    }
-    return 'Group with unknown name'
-}
-
-/**
- * WARNING: Make sure that you have actually included the relations in the query
- * This function makes sure the group has a relation to the group type it is supposed to have
- * @param group - The group to check the validity of
- * @throws - If the group is invalid for example groupType committee but no committee relation then
- * it will throw an error
+ * Throwing convenience wrapper around `checkGroupValidity` (from `@/lib/groups/checkGroupValidity`)
+ * for the common case where the caller has no special handling for an invalid group and just wants
+ * the call to fail. `checkGroupValidity` itself never throws - it's a plain lib util - so that
+ * decision lives here, in the service layer.
+ * @throws - If the group is invalid, for example groupType committee but no committee relation
  * @returns - The group with the correct relation (better typing)
  */
-export function checkGroupValidity<
+export function assertGroupValidity<
     CommitteeKeys extends keyof Committee,
     ManualGroupKeys extends keyof ManualGroup,
     ClassKeys extends keyof Class,
@@ -91,99 +68,14 @@ export function checkGroupValidity<
     InterestGroupKeys,
     OmegaMembershipGroupKeys,
     StudyProgrammeKeys
-> & ExtraFields): GroupWithRelations<
-    CommitteeKeys,
-    ManualGroupKeys,
-    ClassKeys,
-    InterestGroupKeys,
-    OmegaMembershipGroupKeys,
-    StudyProgrammeKeys
-> & Omit<ExtraFields, 'committee' | 'manualGroup' | 'class' | 'interestGroup' | 'omegaMembershipGroup' | 'studyProgramme'> {
-    const WRONG_GROUP_TYPE_ERROR_STRING = 'Ånei, serveren er i en invalid tilstand. Kontakt en administrator' as const
-
-    switch (group.groupType) {
-        case 'COMMITTEE':
-            if (!group.committee) {
-                logger.error(
-                    'Group with type committee without committee relation detected',
-                    group
-                )
-                throw new ServerError('SERVER ERROR', WRONG_GROUP_TYPE_ERROR_STRING)
-            }
-            return {
-                ...group,
-                groupType: 'COMMITTEE',
-                committee: group.committee,
-            }
-        case 'MANUAL_GROUP':
-            if (!group.manualGroup) {
-                logger.error(
-                    'Group with type manual group without manual group relation detected',
-                    group
-                )
-                throw new ServerError('SERVER ERROR', WRONG_GROUP_TYPE_ERROR_STRING)
-            }
-            return {
-                ...group,
-                groupType: 'MANUAL_GROUP',
-                manualGroup: group.manualGroup,
-            }
-        case 'CLASS':
-            if (!group.class) {
-                logger.error(
-                    'Group with type class without class relation detected',
-                    group
-                )
-                throw new ServerError('SERVER ERROR', WRONG_GROUP_TYPE_ERROR_STRING)
-            }
-            return {
-                ...group,
-                groupType: 'CLASS',
-                class: group.class,
-            }
-        case 'INTEREST_GROUP':
-            if (!group.interestGroup) {
-                logger.error(
-                    'Group with type interest group without interest group relation detected',
-                    group
-                )
-                throw new ServerError('SERVER ERROR', WRONG_GROUP_TYPE_ERROR_STRING)
-            }
-            return {
-                ...group,
-                groupType: 'INTEREST_GROUP',
-                interestGroup: group.interestGroup,
-            }
-        case 'OMEGA_MEMBERSHIP_GROUP':
-            if (!group.omegaMembershipGroup) {
-                logger.error(
-                    'Group with type omega membership group without omega membership group relation detected',
-                    group
-                )
-                throw new ServerError('SERVER ERROR', WRONG_GROUP_TYPE_ERROR_STRING)
-            }
-            return {
-                ...group,
-                groupType: 'OMEGA_MEMBERSHIP_GROUP',
-                omegaMembershipGroup: group.omegaMembershipGroup,
-            }
-        case 'STUDY_PROGRAMME':
-            if (!group.studyProgramme) {
-                logger.error(
-                    'Group with type study programme without study programme relation detected',
-                    group
-                )
-                throw new ServerError('SERVER ERROR', WRONG_GROUP_TYPE_ERROR_STRING)
-            }
-            return {
-                ...group,
-                groupType: 'STUDY_PROGRAMME',
-                studyProgramme: group.studyProgramme,
-            }
-        default:
-            logger.error('Group with unknown group type detected', group)
-            throw new ServerError('SERVER ERROR', WRONG_GROUP_TYPE_ERROR_STRING)
+> & ExtraFields): ValidatedGroup<
+    CommitteeKeys, ManualGroupKeys, ClassKeys, InterestGroupKeys, OmegaMembershipGroupKeys, StudyProgrammeKeys, ExtraFields
+> {
+    const result = checkGroupValidity(group)
+    if (!result.valid) {
+        throw new ServerError('SERVER ERROR', 'Ånei, serveren er i en invalid tilstand. Kontakt en administrator')
     }
+    return result.group
 }
 
 export const groupOperations = {
@@ -245,7 +137,7 @@ export const groupOperations = {
                     id: params.id,
                 },
                 include: groupsExpandedIncluder,
-            }).then(checkGroupValidity).then(grp => ({ ...grp, membershipsToInferFirstOrder: grp.memberships }))
+            }).then(assertGroupValidity).then(grp => ({ ...grp, membershipsToInferFirstOrder: grp.memberships }))
             return expandGroup(group, prisma)
         }
     }),
@@ -255,7 +147,7 @@ export const groupOperations = {
         operation: async ({ prisma }) => {
             const groups = (await prisma.group.findMany({
                 include: groupsExpandedIncluder,
-            })).map(checkGroupValidity).map(grp => ({ ...grp, membershipsToInferFirstOrder: grp.memberships }))
+            })).map(assertGroupValidity).map(grp => ({ ...grp, membershipsToInferFirstOrder: grp.memberships }))
 
             return await Promise.all(groups.map(group => expandGroup(group, prisma)))
         }
@@ -343,7 +235,7 @@ export const groupOperations = {
                 },
             })
 
-            const groups = memberships.map(item => checkGroupValidity(item.group))
+            const groups = memberships.map(item => assertGroupValidity(item.group))
 
             return groups
         },
diff --git a/src/services/groups/studyProgrammes/create.ts b/src/services/groups/studyProgrammes/create.ts
index 7a15971da..2d3991ab2 100644
--- a/src/services/groups/studyProgrammes/create.ts
+++ b/src/services/groups/studyProgrammes/create.ts
@@ -1,13 +1,13 @@
 import { createStudyProgrammeValidation } from './validation'
 import { prismaCall } from '@/services/prismaCall'
 import { prisma } from '@/prisma-pn-client-instance'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import type { CreateStudyProgrammeTypes } from './validation'
 import type { ExpandedStudyProgramme } from './types'
 
 export async function createStudyProgramme(data: CreateStudyProgrammeTypes['Detailed']): Promise<ExpandedStudyProgramme> {
     const parse = createStudyProgrammeValidation.detailedValidate(data)
-    const order = (await readCurrentOmegaOrder()).order
+    const order = (await omegaOrderOperations.readCurrent({ bypassAuth: true })).order
 
     return await prismaCall(() => prisma.studyProgramme.create({
         data: {
@@ -42,7 +42,7 @@ export async function upsertStudyProgrammes(
         return existingStudyProgrammes
     }
 
-    const order = (await readCurrentOmegaOrder()).order
+    const order = (await omegaOrderOperations.readCurrent({ bypassAuth: true })).order
 
     const createdStudyProgrammes = await prismaCall(() => (
         prisma.$transaction(
diff --git a/src/services/images/actions.ts b/src/services/images/actions.ts
deleted file mode 100644
index 9d91c2142..000000000
--- a/src/services/images/actions.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-'use server'
-
-import { makeAction } from '@/services/serverAction'
-import { imageOperations } from '@/services/images/operations'
-
-export const createImageAction = makeAction(imageOperations.create)
-export const createImagesAction = makeAction(imageOperations.createMany)
-
-export const destroyImageAction = makeAction(imageOperations.destroy)
-
-/**
- * Read one image.
-*/
-export const readImageAction = makeAction(imageOperations.read)
-/**
- * Read one page of images.
- */
-export const readImagesPageAction = makeAction(imageOperations.readPage)
-/**
- * Read one special image.
- */
-export const readSpecialImageAction = makeAction(imageOperations.readSpecial)
-
-export const updateImageAction = makeAction(imageOperations.update)
diff --git a/src/services/images/auth.ts b/src/services/images/auth.ts
deleted file mode 100644
index a8a53a2da..000000000
--- a/src/services/images/auth.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { RequireNothing } from '@/auth/authorizer/RequireNothing'
-
-//TODO: Implement proper authorizers
-export const imageAuth = {
-    create: RequireNothing.staticFields({}),
-    createMany: RequireNothing.staticFields({}),
-    createSourcelessImage: RequireNothing.staticFields({}),
-    read: RequireNothing.staticFields({}),
-    readPage: RequireNothing.staticFields({}),
-    readSpecial: RequireNothing.staticFields({}),
-    update: RequireNothing.staticFields({}),
-    destroy: RequireNothing.staticFields({}),
-}
diff --git a/src/services/images/collections/actions.ts b/src/services/images/collections/actions.ts
index 8197a2c1e..e69de29bb 100644
--- a/src/services/images/collections/actions.ts
+++ b/src/services/images/collections/actions.ts
@@ -1,94 +0,0 @@
-'use server'
-
-import { createActionError, createZodActionError, safeServerCall } from '@/services/actionError'
-import { createImageCollection } from '@/services/images/collections/create'
-import { destroyImageCollection } from '@/services/images/collections/destroy'
-import {
-    readImageCollection,
-    readImageCollectionsPage,
-    readSpecialImageCollection } from '@/services/images/collections/read'
-import { updateImageCollection } from '@/services/images/collections/update'
-import { createImageCollectionValidation, updateImageCollectionValidation } from '@/services/images/collections/validation'
-import type { CreateImageCollectionTypes, UpdateImageCollectionTypes } from '@/services/images/collections/validation'
-import type { ExpandedImageCollection,
-    ImageCollectionCursor,
-    ImageCollectionPageReturn } from '@/services/images/collections/types'
-import type { ReadPageInput } from '@/lib/paging/types'
-import type { ActionReturn } from '@/services/actionTypes'
-import type { ImageCollection } from '@/prisma-generated-pn-types'
-import { SpecialCollection } from '@/prisma-generated-pn-types'
-
-export async function createImageCollectionAction(
-    rawdata: FormData | CreateImageCollectionTypes['Type']
-): Promise<ActionReturn<ImageCollection>> {
-    const parse = createImageCollectionValidation.typeValidate(rawdata)
-    if (!parse.success) return createZodActionError(parse)
-    const data = parse.data
-    return await safeServerCall(() => createImageCollection(data))
-}
-
-export async function destroyImageCollectionAction(collectionId: number): Promise<ActionReturn<ImageCollection>> {
-    //TODO: Visibility check
-
-    return await safeServerCall(() => destroyImageCollection(collectionId))
-}
-
-/**
- * Action that reads an image collection by id or name
- * @param idOrName - the id or name of the image collection
- * @returns the image collection in actionrturn
- */
-export async function readImageCollectionAction(
-    idOrName: number | string
-): Promise<ActionReturn<ExpandedImageCollection>> {
-    const collection = await safeServerCall(() => readImageCollection(idOrName))
-    if (!collection.success) return collection
-    return collection
-}
-
-/**
- * Action that returns a page of image collections, orders by createdAt (and then name)
- * @param page - the page to read of the Page type
- * @returns - A page of image collections
- */
-export async function readImageCollectionsPageAction<const PageSize extends number>(
-    readPageInput: ReadPageInput<PageSize, ImageCollectionCursor>
-): Promise<ActionReturn<ImageCollectionPageReturn[]>> {
-    return await safeServerCall(() => readImageCollectionsPage(readPageInput))
-}
-
-/**
- * Reads a "special" collection read on this in the docs. If it does not exist it will create it.
- * @param special - the special collection to read
- * @returns the special collection
- */
-export async function readSpecialImageCollectionAction(special: SpecialCollection): Promise<ActionReturn<ImageCollection>> {
-    //Check that the collection actually is a special collection, as the paramter is only a compile time type check
-    if (!Object.values(SpecialCollection).includes(special)) {
-        return createActionError('BAD PARAMETERS', `${special} is not special`)
-    }
-
-    //TODO: Auth special image collections on permission (not visibility)
-    //TODO: Check permission associated with the special collection
-    return await safeServerCall(() => readSpecialImageCollection(special))
-}
-
-/**
- * A action that updates an image collection
- * @param collectionId - the id of the collection to update
- * @param coverImageId - the id of the image to set as the cover image (optional)
- * @param rawdata - the data to update the collection with
- * @returns - the updated collection in ActionReturn
- */
-export async function updateImageCollectionAction(
-    collectionId: number,
-    coverImageId: number | undefined,
-    rawdata: FormData | UpdateImageCollectionTypes['Type']
-): Promise<ActionReturn<ImageCollection>> {
-    const parse = updateImageCollectionValidation.typeValidate(rawdata)
-
-    if (!parse.success) return createZodActionError(parse)
-    const data = parse.data
-
-    return await safeServerCall(() => updateImageCollection(collectionId, coverImageId, data))
-}
diff --git a/src/services/images/collections/create.ts b/src/services/images/collections/create.ts
deleted file mode 100644
index 738443e11..000000000
--- a/src/services/images/collections/create.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import '@pn-server-only'
-import { createImageCollectionValidation } from './validation'
-import { prisma } from '@/prisma-pn-client-instance'
-import { prismaCall } from '@/services/prismaCall'
-import { visibilityOperations } from '@/services/visibility/operations'
-import type { CreateImageCollectionTypes } from './validation'
-import type { ImageCollection } from '@/prisma-generated-pn-types'
-
-export async function createImageCollection(
-    rawdata: CreateImageCollectionTypes['Detailed']
-): Promise<ImageCollection> {
-    const data = createImageCollectionValidation.detailedValidate(rawdata)
-    const visibilityRead = await visibilityOperations.create.internalCall({})
-    const visibilityAdmin = await visibilityOperations.create.internalCall({})
-
-    return await prismaCall(() => prisma.imageCollection.create({
-        data: {
-            ...data,
-            visibilityRead: {
-                connect: {
-                    id: visibilityRead.id
-                }
-            },
-            visibilityAdmin: {
-                connect: {
-                    id: visibilityAdmin.id
-                }
-            }
-        }
-    }))
-}
-
diff --git a/src/services/images/collections/destroy.ts b/src/services/images/collections/destroy.ts
deleted file mode 100644
index 88b454ad0..000000000
--- a/src/services/images/collections/destroy.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import '@pn-server-only'
-import { prisma } from '@/prisma-pn-client-instance'
-import { ServerError } from '@/services/error'
-import { prismaCall } from '@/services/prismaCall'
-import { visibilityOperations } from '@/services/visibility/operations'
-import type { ImageCollection } from '@/prisma-generated-pn-types'
-
-export async function destroyImageCollection(collectionId: number): Promise<ImageCollection> {
-    const collection = await prismaCall(() => prisma.imageCollection.findUnique({
-        where: {
-            id: collectionId,
-        },
-    }))
-    if (!collection) throw new ServerError('NOT FOUND', 'Collection ikke funnet')
-    //only delete if the collection is not special
-    if (collection.special) throw new ServerError('BAD PARAMETERS', 'Kan ikke slette spesielle koleksjoner')
-
-    await prismaCall(() => prisma.imageCollection.delete({
-        where: {
-            id: collectionId,
-        },
-    }))
-
-    await visibilityOperations.destroy.internalCall({ params: { visibilityId: collection.visibilityAdminId } })
-    await visibilityOperations.destroy.internalCall({ params: { visibilityId: collection.visibilityReadId } })
-    return collection
-}
diff --git a/src/services/images/collections/read.ts b/src/services/images/collections/read.ts
deleted file mode 100644
index 86e93b669..000000000
--- a/src/services/images/collections/read.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import '@pn-server-only'
-import { prisma } from '@/prisma-pn-client-instance'
-import logger from '@/lib/logger'
-import { prismaCall } from '@/services/prismaCall'
-import { ServerError } from '@/services/error'
-import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
-import { imageOperations } from '@/services/images/operations'
-import { visibilityOperations } from '@/services/visibility/operations'
-import type { SpecialCollection, ImageCollection, Image } from '@/prisma-generated-pn-types'
-import type {
-    ExpandedImageCollection,
-    ImageCollectionCursor,
-    ImageCollectionPageReturn
-} from '@/services/images/collections/types'
-import type { ReadPageInput } from '@/lib/paging/types'
-
-
-/**
- * Reads an image collection by id or name
- * @param idOrName - the id or name of the image collection
- * @returns the image collection in actionrturn
- */
-export async function readImageCollection(
-    idOrName: number | string
-): Promise<ExpandedImageCollection> {
-    const collection = await prismaCall(() => prisma.imageCollection.findUnique({
-        where: typeof idOrName === 'number' ? {
-            id: idOrName,
-        } : {
-            name: idOrName,
-        },
-        include: {
-            coverImage: true,
-        }
-    }))
-    if (!collection) throw new ServerError('NOT FOUND', 'Collection not found')
-    return collection
-}
-
-/**
- * returns a page of image collections, orders by createdAt (and then name)
- * @param page - the page to read of the Page type
- * @returns - A page of image collections
- */
-export async function readImageCollectionsPage<const PageSize extends number>(
-    { page }: ReadPageInput<PageSize, ImageCollectionCursor>,
-): Promise<ImageCollectionPageReturn[]> {
-    const collections = await prismaCall(() => prisma.imageCollection.findMany({
-        include: {
-            coverImage: true,
-            images: {
-                take: 1
-            },
-            _count: {
-                select: {
-                    images: true
-                }
-            }
-        },
-        orderBy: [
-            { createdAt: 'desc' },
-            { name: 'asc' }
-        ],
-        ...cursorPageingSelection(page)
-    }))
-
-    const lensCamera = await imageOperations.readSpecial({
-        params: {
-            special: 'DEFAULT_IMAGE_COLLECTION_COVER'
-        },
-    })
-
-    const chooseCoverImage = (collection: {
-        coverImage: Image | null,
-        images: Image[]
-    }) => {
-        if (collection.coverImage) return collection.coverImage
-        if (collection.images[0]) return collection.images[0]
-        if (lensCamera) return lensCamera
-        return null
-    }
-    const returnData = collections.map(collection => ({
-        ...collection,
-        coverImage: chooseCoverImage(collection),
-        numberOfImages: collection._count.images,
-    }))
-
-    return returnData
-}
-
-export async function readSpecialImageCollection(special: SpecialCollection): Promise<ImageCollection> {
-    const collection = await prismaCall(() => prisma.imageCollection.findUnique({
-        where: {
-            special
-        }
-    }))
-    if (!collection) {
-        logger.warn(`Special collection ${special} did not exist, creating it`)
-
-        //Note: these visibilities do not actually do anything for special collections,
-        //but the schema requires them to exist - believe this implementation to be better than for
-        //regular collections to maybe be in invalid state with no visibility.
-        // TODO: use create method.
-        const visibilityAdmin = await visibilityOperations.create.internalCall({})
-        const visibilityRead = await visibilityOperations.create.internalCall({})
-
-        const newCollection = await prismaCall(() => prisma.imageCollection.create({
-            data: {
-                name: special,
-                special,
-                visibilityRead: {
-                    connect: {
-                        id: visibilityRead.id
-                    }
-                },
-                visibilityAdmin: {
-                    connect: {
-                        id: visibilityAdmin.id
-                    }
-                }
-            }
-        }))
-        return newCollection
-    }
-    return collection
-}
diff --git a/src/services/images/collections/types.ts b/src/services/images/collections/types.ts
deleted file mode 100644
index cce8e9fa7..000000000
--- a/src/services/images/collections/types.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Image, ImageCollection } from '@/prisma-generated-pn-types'
-
-export type ExpandedImageCollection = ImageCollection & {
-    coverImage: Image | null
-}
-
-export type ImageCollectionPageReturn = ImageCollection & {
-    coverImage: Image | null,
-    numberOfImages: number,
-}
-
-export type ImageCollectionCursor = {
-    id: number
-}
diff --git a/src/services/images/collections/update.ts b/src/services/images/collections/update.ts
deleted file mode 100644
index 3cf850763..000000000
--- a/src/services/images/collections/update.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import '@pn-server-only'
-import { updateImageCollectionValidation } from './validation'
-import { prisma } from '@/prisma-pn-client-instance'
-import { prismaCall } from '@/services/prismaCall'
-import type { ImageCollection } from '@/prisma-generated-pn-types'
-import type { UpdateImageCollectionTypes } from './validation'
-
-/**
- * A function that updates an image collection
- * @param collectionId - the id of the collection to update
- * @param data - the data to update the collection with
- * @returns - the updated collection
- */
-export async function updateImageCollection(
-    collectionId: number,
-    coverImageId: number | undefined,
-    rawdata: UpdateImageCollectionTypes['Detailed']
-): Promise<ImageCollection> {
-    const data = updateImageCollectionValidation.detailedValidate(rawdata)
-    return await prismaCall(() => prisma.imageCollection.update({
-        where: {
-            id: collectionId,
-        },
-        data: {
-            ...data,
-            coverImage: {
-                connect: coverImageId ? {
-                    id: coverImageId
-                } : undefined
-            }
-        }
-    }))
-}
diff --git a/src/services/images/collections/validation.ts b/src/services/images/collections/validation.ts
deleted file mode 100644
index bfcf8f7eb..000000000
--- a/src/services/images/collections/validation.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { ValidationBase } from '@/services/Validation'
-import { z } from 'zod'
-import type { ValidationTypes } from '@/services/Validation'
-
-export const baseImageCollectionSchema = new ValidationBase({
-    type: {
-        name: z.string(),
-        description: z.string(),
-    },
-    details: {
-        name: z.string().max(40).min(2).trim(),
-        description: z.string().max(500).min(2).trim(),
-    }
-})
-
-export const createImageCollectionValidation = baseImageCollectionSchema.createValidation({
-    keys: ['name', 'description'],
-    transformer: data => data
-})
-
-export type CreateImageCollectionTypes = ValidationTypes<typeof createImageCollectionValidation>
-
-export const updateImageCollectionValidation = baseImageCollectionSchema.createValidationPartial({
-    keys: ['name', 'description'],
-    transformer: data => data
-})
-export type UpdateImageCollectionTypes = ValidationTypes<typeof updateImageCollectionValidation>
diff --git a/src/services/images/constants.ts b/src/services/images/constants.ts
deleted file mode 100644
index f39a18619..000000000
--- a/src/services/images/constants.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-export const maxImageFileSize = 100 * 1024 * 1024 // 100mb
-
-export const maxImageCountInOneBatch = 10
-
-export const imageSizes = {
-    small: 180,
-    medium: 360,
-    large: 720,
-}
-
-export const avifConvertionOptions = {
-    quality: 50,
-    lossless: false,
-    speed: 8, // default is 5
-    chromaSubsampling: '4:2:0',
-}
-
-export const allowedExtensions = ['png', 'jpg', 'jpeg', 'heic', 'avif', 'webp']
diff --git a/src/services/images/dynamic/actions.ts b/src/services/images/dynamic/actions.ts
new file mode 100644
index 000000000..d8d552774
--- /dev/null
+++ b/src/services/images/dynamic/actions.ts
@@ -0,0 +1,23 @@
+'use server'
+import { makeAction } from '@/services/serverAction'
+import { dynamicImageOperations } from '@/services/images/dynamic/operations'
+
+export const readDynamicImageCollectionDoubleLevelVisibilityAction =
+    makeAction(dynamicImageOperations.visibility.readDoubleLevelMatrix)
+export const updateDynamicImageCollectionRegularLevelVisibilityAction =
+    makeAction(dynamicImageOperations.visibility.updateRegularLevel)
+export const updateDynamicImageCollectionAdminLevelVisibilityAction =
+    makeAction(dynamicImageOperations.visibility.updateAdminLevel)
+
+export const readDynamicImageCollectionAction = makeAction(dynamicImageOperations.readCollection)
+export const readDynamicImageCollectionsPageAction = makeAction(dynamicImageOperations.readCollectionPage)
+export const createDynamicImageCollectionAction = makeAction(dynamicImageOperations.createCollection)
+export const destroyDynamicImageCollectionAction = makeAction(dynamicImageOperations.destroyCollection)
+export const updateDynamicImageCollectionAction = makeAction(dynamicImageOperations.updateCollection)
+
+export const uploadImageToDynamicCollectionAction = makeAction(dynamicImageOperations.uploadImage)
+export const uploadManyImagesToDynamicCollectionAction = makeAction(dynamicImageOperations.uploadManyImages)
+export const readImagesPageInDynamicCollectionAction =
+    makeAction(dynamicImageOperations.readPageOfImagesInCollection)
+export const updateImageMetaInDynamicCollectionAction = makeAction(dynamicImageOperations.updateImageMeta)
+export const destroyImageInDynamicCollectionAction = makeAction(dynamicImageOperations.destroyImage)
diff --git a/src/services/images/dynamic/auth.ts b/src/services/images/dynamic/auth.ts
new file mode 100644
index 000000000..73d504c5a
--- /dev/null
+++ b/src/services/images/dynamic/auth.ts
@@ -0,0 +1,35 @@
+import { RequireLevelFromDoubleLevelVisibility } from '@/auth/authorizer/RequireLevelFromDoubleLevelVisibility'
+import { RequirePermission } from '@/auth/authorizer/RequirePermission'
+import { RequireVisibilityFilter } from '@/auth/authorizer/RequireVisibilityFilter'
+
+export const dynamicImageAuth = {
+    readDoubleLevelMatrix:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'REGULAR', bypassPermission: 'IMAGE_ADMIN' }),
+    updateRegularLevel:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'IMAGE_ADMIN' }),
+    updateAdminLevel:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'IMAGE_ADMIN' }),
+
+    readCollection:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'REGULAR', bypassPermission: 'IMAGE_ADMIN' }),
+    readCollectionPage:
+        RequireVisibilityFilter.staticFields({ bypassPermission: 'IMAGE_ADMIN' }),
+
+    createCollection:
+        RequirePermission.staticFields({ permission: 'IMAGE_COLLECTION_CREATE' }),
+    destroyCollection:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'IMAGE_ADMIN' }),
+    updateCollection:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'IMAGE_ADMIN' }),
+
+    uploadImage:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'IMAGE_ADMIN' }),
+    uploadManyImages:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'IMAGE_ADMIN' }),
+    readPageOfImagesInCollection:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'REGULAR', bypassPermission: 'IMAGE_ADMIN' }),
+    updateImageMeta:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'IMAGE_ADMIN' }),
+    destroyImage:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'IMAGE_ADMIN' }),
+} as const
diff --git a/src/services/images/dynamic/operations.ts b/src/services/images/dynamic/operations.ts
new file mode 100644
index 000000000..e25a9ef93
--- /dev/null
+++ b/src/services/images/dynamic/operations.ts
@@ -0,0 +1,258 @@
+import '@pn-server-only'
+import { dynamicImageAuth } from './auth'
+import { dynamicImageSchemas } from './schemas'
+import { visibilityOperations } from '@/services/visibility/operations'
+import { implementDoubleLevelVisibilityOperations } from '@/services/visibility/implement'
+import { defineOperation, type PrismaPossibleTransaction } from '@/services/serviceOperation'
+import {
+    imageOperations,
+    uniqueCollectionWhere,
+    expandImageCollection
+} from '@/services/images/subservice/operations'
+import { expandedImageCollectionIncluder } from '@/services/images/subservice/constants'
+import { standardImageCollectionOperations } from '@/services/images/standard/operations'
+import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
+import type { Prisma } from '@/prisma-generated-pn-types'
+import type { z } from 'zod'
+
+async function readDefaultCollectionCover() {
+    return standardImageCollectionOperations.readStandardImage({
+        params: { standardImage: 'DEFAULT_IMAGE_COLLECTION_COVER' }
+    })
+}
+
+const visibility = implementDoubleLevelVisibilityOperations({
+    implementationParamsSchema: dynamicImageSchemas.paramsSchemaCollection,
+    authorizers: {
+        readDoubleLevelMatrix: ({ doubleLevelMatrix }) => dynamicImageAuth.readDoubleLevelMatrix.dynamicFields({
+            doubleLevelMatrix,
+        }),
+        updateRegularLevel: ({ doubleLevelMatrix }) => dynamicImageAuth.updateRegularLevel.dynamicFields({
+            doubleLevelMatrix,
+        }),
+        updateAdminLevel: ({ doubleLevelMatrix }) => dynamicImageAuth.updateAdminLevel.dynamicFields({
+            doubleLevelMatrix,
+        })
+    },
+    readDoubleLevel: async ({ prisma, implementationParams, include }) => {
+        const collection = await prisma.imageCollection.findFirstOrThrow({
+            where: whereConditionWithOwnershipCheck(implementationParams),
+            include: {
+                visibilityRegular: {
+                    include
+                },
+                visibilityAdmin: {
+                    include
+                }
+            }
+        })
+        return {
+            regularLevel: collection.visibilityRegular,
+            adminLevel: collection.visibilityAdmin
+        }
+    }
+})
+
+const readCollection = defineOperation({
+    paramsSchema: dynamicImageSchemas.paramsSchemaCollection,
+    authorizer: async ({ params, prisma }) =>
+        dynamicImageAuth.readCollection.dynamicFields({
+            doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                params,
+                prisma
+            })
+        }),
+    operation: async ({ prisma, params }) => {
+        const collection = await prisma.imageCollection.findFirstOrThrow({
+            where: whereConditionWithOwnershipCheck(params),
+            include: expandedImageCollectionIncluder,
+        })
+        return expandImageCollection(collection, await readDefaultCollectionCover())
+    }
+})
+
+const readCollectionPage = defineOperation({
+    paramsSchema: dynamicImageSchemas.readCollectionPage,
+    authorizer: async () => dynamicImageAuth.readCollectionPage.dynamicFields({}),
+    operation: async ({ prisma, params }, prismaWhereFilter) => {
+        const collections = await prisma.imageCollection.findMany({
+            ...cursorPageingSelection(params.paging.page),
+            where: {
+                ...ownershipCheckWhereCondition(),
+                // The filter is undefined only when the session bypasses visibility with IMAGE_ADMIN,
+                // which also means it administrates every collection - hence no admin filter either.
+                ...(prismaWhereFilter ? {
+                    visibilityRegular: prismaWhereFilter,
+                    ...(params.paging.details.showOnlyCollectionsSessionAdministrates ? {
+                        visibilityAdmin: prismaWhereFilter
+                    } : {})
+                } : {})
+            },
+            include: expandedImageCollectionIncluder,
+            orderBy: [
+                { createdAt: 'desc' },
+                { name: 'asc' }
+            ],
+        })
+
+        const defaultCover = await readDefaultCollectionCover()
+
+        return collections.map(collection => expandImageCollection(collection, defaultCover))
+    }
+})
+
+export const dynamicImageOperations = {
+    visibility,
+    readCollection,
+    readCollectionPage,
+
+    createCollection: defineOperation({
+        dataSchema: dynamicImageSchemas.createCollection,
+        authorizer: () => dynamicImageAuth.createCollection.dynamicFields({}),
+        operation: async ({ prisma, data }) => {
+            const visibilityRegular = await visibilityOperations.create.internalCall({})
+            const visibilityAdmin = await visibilityOperations.create.internalCall({})
+
+            return await prisma.imageCollection.create({
+                data: {
+                    name: data.collectionName,
+                    description: data.collectionDescription,
+                    visibilityRegular: {
+                        connect: {
+                            id: visibilityRegular.id
+                        }
+                    },
+                    visibilityAdmin: {
+                        connect: {
+                            id: visibilityAdmin.id
+                        }
+                    }
+                }
+            })
+        }
+    }),
+
+    destroyCollection: imageOperations.destroyCollection.implement({
+        authorizer: async ({ params, prisma }) =>
+            dynamicImageAuth.destroyCollection.dynamicFields({
+                doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                    params,
+                    prisma
+                })
+            }),
+        ownershipCheck,
+    }),
+
+    updateCollection: imageOperations.updateCollection.implement({
+        authorizer: async ({ params, prisma }) =>
+            dynamicImageAuth.updateCollection.dynamicFields({
+                doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                    params,
+                    prisma
+                }),
+            }),
+        ownershipCheck,
+    }),
+
+    uploadImage: imageOperations.uploadImage.implement({
+        authorizer: async ({ params, prisma }) =>
+            dynamicImageAuth.uploadImage.dynamicFields({
+                doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                    params,
+                    prisma
+                }),
+            }),
+        ownershipCheck,
+        operationImplementationFields: { uploadAsStandardImage: null }
+    }),
+
+    uploadManyImages: imageOperations.uploadManyImages.implement({
+        authorizer: async ({ params, prisma }) =>
+            dynamicImageAuth.uploadManyImages.dynamicFields({
+                doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                    params,
+                    prisma
+                }),
+            }),
+        ownershipCheck,
+    }),
+
+    readPageOfImagesInCollection: imageOperations.readPageOfImagesInCollection.implement({
+        authorizer: async ({ params, prisma }) =>
+            dynamicImageAuth.readPageOfImagesInCollection.dynamicFields({
+                doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                    params: {
+                        collectionId: params.collectionId
+                    },
+                    prisma
+                }),
+            }),
+        ownershipCheck: ({ params, prisma }) => ownershipCheck({
+            params: { collectionId: params.collectionId },
+            prisma
+        }),
+    }),
+
+    updateImageMeta: imageOperations.updateImageMeta.implement({
+        authorizer: async ({ params, prisma }) =>
+            dynamicImageAuth.updateImageMeta.dynamicFields({
+                doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                    params: {
+                        collectionId: (await imageOperations.readCollectionOfImage.internalCall({ params })).id,
+                    },
+                    prisma
+                }),
+            }),
+        ownershipCheck: async ({ params, prisma }) => ownershipCheck({
+            params: { collectionId: (await imageOperations.readCollectionOfImage.internalCall({ params })).id },
+            prisma
+        }),
+    }),
+
+    destroyImage: imageOperations.destroyImage.implement({
+        authorizer: async ({ params, prisma }) =>
+            dynamicImageAuth.destroyImage.dynamicFields({
+                doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                    params: {
+                        collectionId: (await imageOperations.readCollectionOfImage.internalCall({ params })).id,
+                    },
+                    prisma
+                }),
+            }),
+        ownershipCheck: async ({ params, prisma }) => ownershipCheck({
+            params: { collectionId: (await imageOperations.readCollectionOfImage.internalCall({ params })).id },
+            prisma
+        }),
+    }),
+} as const
+
+function whereConditionWithOwnershipCheck(params: z.infer<typeof dynamicImageSchemas.paramsSchemaCollection>) {
+    return {
+        ...uniqueCollectionWhere(params),
+        ...ownershipCheckWhereCondition()
+    } satisfies Prisma.ImageCollectionWhereInput
+}
+
+/**
+ * This where clause makes sure that the collections read through the dynamic image system are not special.
+ * The special collections are not 'owned' by the dynamic system and should be read through the 'special' system.
+ *
+ * The 'update type' and 'destroy type' suboperations being implemented by this service make this check through the
+ * standard `ownershipCheck`
+ * atribute.
+ */
+function ownershipCheckWhereCondition() {
+    return {
+        special: null
+    } satisfies Prisma.ImageCollectionWhereInput
+}
+
+async function ownershipCheck({
+    params,
+    prisma
+}: {
+    params: z.infer<typeof dynamicImageSchemas.paramsSchemaCollection>
+    prisma: PrismaPossibleTransaction<false>
+}): Promise<boolean> {
+    return (await readCollection({ params, prisma })).special === null
+}
diff --git a/src/services/images/dynamic/schemas.ts b/src/services/images/dynamic/schemas.ts
new file mode 100644
index 000000000..3d37d86b2
--- /dev/null
+++ b/src/services/images/dynamic/schemas.ts
@@ -0,0 +1,20 @@
+import { imageSchemas, baseSchema } from '@/services/images/subservice/schemas'
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
+import { z } from 'zod'
+
+export const dynamicImageSchemas = {
+    paramsSchemaCollection: imageSchemas.paramsSchemaCollection,
+    createCollection: baseSchema.pick({
+        collectionName: true,
+        collectionDescription: true,
+    }),
+    readCollectionPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number()
+        }),
+        z.object({
+            showOnlyCollectionsSessionAdministrates: z.boolean()
+        })
+    ),
+} as const
diff --git a/src/services/images/dynamic/types.ts b/src/services/images/dynamic/types.ts
new file mode 100644
index 000000000..6d3c97e66
--- /dev/null
+++ b/src/services/images/dynamic/types.ts
@@ -0,0 +1,6 @@
+import type { dynamicImageSchemas } from './schemas'
+import type { InferPagingCursor, InferPagingDetails } from '@/lib/paging/schema'
+
+export type ImageCollectionCursor = InferPagingCursor<typeof dynamicImageSchemas.readCollectionPage>
+
+export type ImageCollectionPagingDetails = InferPagingDetails<typeof dynamicImageSchemas.readCollectionPage>
diff --git a/src/services/images/operations.ts b/src/services/images/operations.ts
deleted file mode 100644
index e6c191354..000000000
--- a/src/services/images/operations.ts
+++ /dev/null
@@ -1,270 +0,0 @@
-import '@pn-server-only'
-import { readSpecialImageCollection } from './collections/read'
-import { imageAuth } from './auth'
-import { imageSchemas } from './schemas'
-import { allowedExtensions, avifConvertionOptions, imageSizes } from './constants'
-import { defineOperation } from '@/services/serviceOperation'
-import { ServerError } from '@/services/error'
-import { createFile } from '@/services/store/createFile'
-import logger from '@/lib/logger'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
-import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
-import sharp from 'sharp'
-import { z } from 'zod'
-import { File } from 'node:buffer'
-import { SpecialImage } from '@/prisma-generated-pn-types'
-
-/**
- * Creates one image from a file.
- * @param file - The file to create the image from
- * @param allowedExt - The allowed extensions for the file
- * @param size - The size to resize the image to
- * @returns
- */
-async function createOneInStore(file: File, allowedExt: string[], size: number) {
-    const ret = await createFile(file, 'images', allowedExt, async (buffer) => await sharp(buffer).resize(size, size, {
-        fit: sharp.fit.inside,
-        withoutEnlargement: true
-    }).toBuffer())
-    return ret
-}
-
-/**
- * WARNING: This function should only be used in extreme cases, Therefore it is not exported.
- * Creates bad image this should really only happen in worst case scenario
- * where the server has lost a image and needs to be replaced with a bad image.
- * A bad image is an image that has no correct fsLocation attributes.
- * @param name - the name of the image
- * @param config - the config for the image (special)
- */
-const createSourceless = defineOperation({
-    authorizer: () => imageAuth.createSourcelessImage.dynamicFields({}),
-    paramsSchema: z.object({
-        name: z.string(),
-        special: z.nativeEnum(SpecialImage),
-    }),
-    operation: async ({ prisma, params: { name, special } }) => {
-        const standardCollection = await readSpecialImageCollection('STANDARDIMAGES')
-        logger.warn(`
-            creating a bad image, Something has caused the server to lose a neccesary image. 
-            It was replaced with an image model with no correct fsLocation atrributes.
-        `)
-        return await prisma.image.create({
-            data: {
-                name,
-                special,
-                fsLocationOriginal: 'not_found',
-                fsLocationMediumSize: 'not_found',
-                fsLocationSmallSize: 'not_found',
-                fsLocationLargeSize: 'not_found',
-                extOriginal: 'jpg',
-                alt: 'not found',
-                collection: {
-                    connect: {
-                        id: standardCollection.id
-                    }
-                }
-            },
-        })
-    }
-})
-
-export const imageOperations = {
-    /**
-     * Creates an image.
-     * The method will resize the image to the correct sizes and save it to the store.
-     * It will also save the original image to the store.
-     * All images are saved as avif (except the original).
-     * @param collectionId - The id of the collection to add the image to
-     */
-    create: defineOperation({
-        authorizer: () => imageAuth.create.dynamicFields({}),
-        paramsSchema: z.object({
-            collectionId: z.number(),
-        }),
-        dataSchema: imageSchemas.create,
-        operation: async ({ prisma, params: { collectionId }, data }) => {
-            const { file, ...meta } = data
-            const buffer = Buffer.from(await file.arrayBuffer())
-            const avifBuffer = await sharp(buffer).toFormat('avif').avif(avifConvertionOptions).toBuffer()
-            const avifFile = new File([new Uint8Array(avifBuffer)], 'image.avif', { type: 'image/avif' })
-
-            const uploadPromises = [
-                createOneInStore(avifFile, ['avif'], imageSizes.small),
-                createOneInStore(avifFile, ['avif'], imageSizes.medium),
-                createOneInStore(avifFile, ['avif'], imageSizes.large),
-                createFile(file, 'images', [...allowedExtensions]),
-            ]
-
-            const [smallSize, mediumSize, largeSize, original] = await Promise.all(uploadPromises)
-            const fsLocationSmallSize = smallSize.fsLocation
-            const fsLocationMediumSize = mediumSize.fsLocation
-            const fsLocationLargeSize = largeSize.fsLocation
-            const fsLocationOriginal = original.fsLocation
-            const extOriginal = original.ext
-            return await prisma.image.create({
-                data: {
-                    name: meta.name,
-                    alt: meta.alt,
-                    license: meta.licenseId ? { connect: { id: meta.licenseId } } : undefined,
-                    credit: meta.credit,
-                    fsLocationOriginal,
-                    fsLocationSmallSize,
-                    fsLocationMediumSize,
-                    fsLocationLargeSize,
-                    extOriginal,
-                    collection: {
-                        connect: {
-                            id: collectionId,
-                        }
-                    }
-                }
-            })
-        }
-    }),
-    /**
-     * Creates many images from files.
-     * The method will resize the images to the correct sizes and save them to the store.
-     */
-    createMany: defineOperation({
-        authorizer: () => imageAuth.createMany.dynamicFields({}),
-        paramsSchema: z.object({
-            useFileName: z.boolean(),
-            collectionId: z.number(),
-        }),
-        dataSchema: imageSchemas.createMany,
-        operation: async ({
-            params: { useFileName, collectionId },
-            data,
-        }) => {
-            console.log('data', data)
-            for (const file of data.files) {
-                console.log('file', file)
-                const name = useFileName ? file.name.split('.')[0] : undefined
-                await imageOperations.create({
-                    params: { collectionId },
-                    data: { file, name, alt: file.name.split('.')[0], licenseId: data.licenseId, credit: data.credit },
-                })
-            }
-        }
-    }),
-
-    /**
-     * Reads an image by id.
-     */
-    read: defineOperation({
-        authorizer: () => imageAuth.read.dynamicFields({}),
-        paramsSchema: z.object({
-            id: z.number(),
-        }),
-        operation: async ({ prisma, params: { id } }) => {
-            const image = await prisma.image.findUnique({
-                where: {
-                    id,
-                },
-            })
-
-            if (!image) throw new ServerError('NOT FOUND', 'Image not found')
-            return image
-        }
-    }),
-
-    /**
-     * Reads a page of images in a collection by collectionId.
-     */
-    readPage: defineOperation({
-        authorizer: () => imageAuth.readPage.dynamicFields({}),
-        paramsSchema: readPageInputSchemaObject(
-            z.number(),
-            z.object({
-                id: z.number(),
-            }),
-            z.object({
-                collectionId: z.number(),
-            }),
-        ),
-        operation: async ({ prisma, params }) => {
-            const { collectionId } = params.paging.details
-            return await prisma.image.findMany({
-                where: {
-                    collectionId,
-                },
-                ...cursorPageingSelection(params.paging.page)
-            })
-        }
-    }),
-
-    /**
-     * Reads a special image by name (special atr.).
-     * In the case that the special image does not exist (bad state) a "bad" image will be created.
-     */
-    readSpecial: defineOperation({
-        authorizer: () => imageAuth.readSpecial.dynamicFields({}),
-        paramsSchema: z.object({
-            special: z.nativeEnum(SpecialImage)
-        }),
-        operation: async ({ prisma, params: { special }, session }) => {
-            const image = await prisma.image.findUnique({
-                where: {
-                    special,
-                },
-            })
-
-            if (!image) {
-                return await createSourceless(
-                    { params: { name: special, special }, session }
-                )
-            }
-            return image
-        }
-    }),
-
-    /**
-     * Update a image by id and data. Also can give the image a new license by data.licenseId.
-     */
-    update: defineOperation({
-        authorizer: () => imageAuth.update.dynamicFields({}),
-        paramsSchema: z.object({
-            id: z.number(),
-        }),
-        dataSchema: imageSchemas.update,
-        operation: async ({ prisma, params: { id }, data: { licenseId, ...data } }) => {
-            console.log('lic', licenseId)
-            return await prisma.image.update({
-                where: {
-                    id,
-                },
-                data: {
-                    license: licenseId !== undefined ? {
-                        ...(licenseId ? { connect: { id: licenseId } } : { disconnect: true })
-                    } : undefined,
-                    ...data,
-                }
-            })
-        }
-    }),
-
-    destroy: defineOperation({
-        authorizer: () => imageAuth.destroy.dynamicFields({}),
-        paramsSchema: z.object({
-            id: z.number(),
-        }),
-        operation: async ({ prisma, params: { id } }) => {
-            const image = await prisma.image.findUnique({
-                where: {
-                    id,
-                },
-            })
-            if (!image) throw new ServerError('NOT FOUND', `Bilde med id ${id} ikke funnet`)
-            if (image.special) throw new ServerError('BAD PARAMETERS', `Bilde med id ${id} er spesielt og kan ikke slettes`)
-
-            //TODO: remove the image from store
-
-            return await prisma.image.delete({
-                where: {
-                    id,
-                },
-            })
-        }
-    }),
-}
diff --git a/src/services/images/schemas.ts b/src/services/images/schemas.ts
deleted file mode 100644
index 12cbd72f1..000000000
--- a/src/services/images/schemas.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { allowedExtensions, maxImageCountInOneBatch, maxImageFileSize } from './constants'
-import { z } from 'zod'
-import { zfd } from 'zod-form-data'
-import { File } from 'node:buffer'
-
-const maxFileSizeMb = Math.round(maxImageFileSize / 1024 / 1024)
-
-export const imageFileSchema = z.instanceof(File).refine(
-    file => file.size < maxImageFileSize, `File size must be less than ${maxFileSizeMb}mb`
-).refine(
-    file => allowedExtensions.includes(file.type.split('/')[1]),
-    `File type must be one of ${allowedExtensions.join(', ')}`
-)
-
-const baseSchema = z.object({
-    file: imageFileSchema,
-    name: z.string().max(50, 'max length in 50').min(2, 'min length is 2').optional(),
-    alt: z.string().max(100, 'max length in 50').min(2, 'min length is 2'),
-    files: zfd.repeatable(z.array(z.instanceof(File)).refine(
-        files => files.every(file => file.size < maxImageFileSize),
-        `All file size must be less than ${maxFileSizeMb}mb`
-    )).refine(
-        files => files.every(file => allowedExtensions.includes(file.type.split('/')[1])),
-        `File type must be one of ${allowedExtensions.join(', ')}`
-    ).refine(
-        files => files.length <= maxImageCountInOneBatch && files.length > 0,
-        `Du kan bare laste opp mellom 1 og ${maxImageCountInOneBatch} bilder av gangen`
-    ),
-    licenseId: z.union([
-        z.string().optional().nullable(),
-        z.coerce.number().optional().or(z.literal('NULL')),
-    ]).transform(
-        value => {
-            if (typeof value === 'string' && value === 'NULL') return null
-            if (typeof value === 'string') return parseInt(value, 10)
-            return value
-        }
-    ),
-    credit: z.string().optional(),
-})
-
-export const imageSchemas = {
-    create: baseSchema.pick({
-        name: true,
-        alt: true,
-        file: true,
-        licenseId: true,
-        credit: true,
-    }),
-
-    createMany: baseSchema.pick({
-        files: true,
-        licenseId: true,
-        credit: true,
-    }),
-
-    update: baseSchema.partial().pick({
-        name: true,
-        alt: true,
-        credit: true,
-        licenseId: true,
-    }),
-}
diff --git a/src/services/images/specialPanels/actions.ts b/src/services/images/specialPanels/actions.ts
new file mode 100644
index 000000000..b73c7cad3
--- /dev/null
+++ b/src/services/images/specialPanels/actions.ts
@@ -0,0 +1,29 @@
+'use server'
+
+import { specialImagePanelOperations } from './operations'
+import { makeAction } from '@/services/serverAction'
+
+export const readFlairImagesCollectionAction =
+    makeAction(specialImagePanelOperations.flairImages.readCollection)
+export const readImagesPageInFlairImagesCollectionAction =
+    makeAction(specialImagePanelOperations.flairImages.readPageOfImagesInCollection)
+
+export const readOmbulCoversCollectionAction =
+    makeAction(specialImagePanelOperations.ombulCovers.readCollection)
+export const readImagesPageInOmbulCoversCollectionAction =
+    makeAction(specialImagePanelOperations.ombulCovers.readPageOfImagesInCollection)
+
+export const readCommitteeLogosCollectionAction =
+    makeAction(specialImagePanelOperations.committeeLogos.readCollection)
+export const readImagesPageInCommitteeLogosCollectionAction =
+    makeAction(specialImagePanelOperations.committeeLogos.readPageOfImagesInCollection)
+
+export const readProfileImagesCollectionAction =
+    makeAction(specialImagePanelOperations.profileImages.readCollection)
+export const readImagesPageInProfileImagesCollectionAction =
+    makeAction(specialImagePanelOperations.profileImages.readPageOfImagesInCollection)
+
+export const readStandardImagesCollectionAction =
+    makeAction(specialImagePanelOperations.standardImages.readCollection)
+export const readImagesPageInStandardImagesCollectionAction =
+    makeAction(specialImagePanelOperations.standardImages.readPageOfImagesInCollection)
diff --git a/src/services/images/specialPanels/auth.ts b/src/services/images/specialPanels/auth.ts
new file mode 100644
index 000000000..d5e3eb26f
--- /dev/null
+++ b/src/services/images/specialPanels/auth.ts
@@ -0,0 +1,13 @@
+import { flairImagesImagePanelAuth } from '@/services/flairs/auth'
+import { ombulCoversImagePanelAuth } from '@/services/ombul/auth'
+import { committeeLogosImagePanelAuth } from '@/services/groups/committees/auth'
+import { profileImagesImagePanelAuth } from '@/services/users/auth'
+import { standardImagesImagePanelAuth } from '@/services/images/standard/auth'
+
+export const specialImagePanelAuth = {
+    flairImages: flairImagesImagePanelAuth,
+    ombulCovers: ombulCoversImagePanelAuth,
+    committeeLogos: committeeLogosImagePanelAuth,
+    profileImages: profileImagesImagePanelAuth,
+    standardImages: standardImagesImagePanelAuth,
+} as const
diff --git a/src/services/images/specialPanels/constants.ts b/src/services/images/specialPanels/constants.ts
new file mode 100644
index 000000000..5d0feacb0
--- /dev/null
+++ b/src/services/images/specialPanels/constants.ts
@@ -0,0 +1,56 @@
+import { specialImagePanelAuth } from './auth'
+import {
+    readFlairImagesCollectionAction,
+    readImagesPageInFlairImagesCollectionAction,
+    readOmbulCoversCollectionAction,
+    readImagesPageInOmbulCoversCollectionAction,
+    readCommitteeLogosCollectionAction,
+    readImagesPageInCommitteeLogosCollectionAction,
+    readProfileImagesCollectionAction,
+    readImagesPageInProfileImagesCollectionAction,
+    readStandardImagesCollectionAction,
+    readImagesPageInStandardImagesCollectionAction,
+} from './actions'
+import type { ActionFromServiceOperation } from '@/services/actionTypes'
+import type { implementSpecialCollection } from '@/services/images/subservice/special/implement'
+import type { SpecialCollection } from '@/prisma-generated-pn-types'
+
+type SpecialCollectionPanelOperations = ReturnType<typeof implementSpecialCollection>['specialCollectionPanelOperations']
+
+/**
+ * Everything a frontend panel needs for a special collection, keyed by the `SpecialCollection` it
+ * shows: the auth deciding whether the session may see the panel, and the actions for reading the
+ * collection itself and paging through the images inside it.
+ */
+export const specialImagePanels = {
+    FLAIRIMAGES: {
+        auth: specialImagePanelAuth.flairImages,
+        readCollectionAction: readFlairImagesCollectionAction,
+        readPageOfImagesInCollectionAction: readImagesPageInFlairImagesCollectionAction,
+    },
+    OMBULCOVERS: {
+        auth: specialImagePanelAuth.ombulCovers,
+        readCollectionAction: readOmbulCoversCollectionAction,
+        readPageOfImagesInCollectionAction: readImagesPageInOmbulCoversCollectionAction,
+    },
+    COMMITTEELOGOS: {
+        auth: specialImagePanelAuth.committeeLogos,
+        readCollectionAction: readCommitteeLogosCollectionAction,
+        readPageOfImagesInCollectionAction: readImagesPageInCommitteeLogosCollectionAction,
+    },
+    PROFILEIMAGES: {
+        auth: specialImagePanelAuth.profileImages,
+        readCollectionAction: readProfileImagesCollectionAction,
+        readPageOfImagesInCollectionAction: readImagesPageInProfileImagesCollectionAction,
+    },
+    STANDARDIMAGES: {
+        auth: specialImagePanelAuth.standardImages,
+        readCollectionAction: readStandardImagesCollectionAction,
+        readPageOfImagesInCollectionAction: readImagesPageInStandardImagesCollectionAction,
+    },
+} as const satisfies Record<SpecialCollection, {
+    auth: typeof specialImagePanelAuth[keyof typeof specialImagePanelAuth],
+    readCollectionAction: ActionFromServiceOperation<SpecialCollectionPanelOperations['readCollection']>,
+    readPageOfImagesInCollectionAction:
+        ActionFromServiceOperation<SpecialCollectionPanelOperations['readPageOfImagesInCollection']>,
+}>
diff --git a/src/services/images/specialPanels/operations.ts b/src/services/images/specialPanels/operations.ts
new file mode 100644
index 000000000..f2111f97e
--- /dev/null
+++ b/src/services/images/specialPanels/operations.ts
@@ -0,0 +1,21 @@
+import '@pn-server-only'
+import { flairImagesImagePanelOperations } from '@/services/flairs/flairImageCollection'
+import { ombulCoversImagePanelOperations } from '@/services/ombul/ombulCoverCollection'
+import { committeeLogosImagePanelOperations } from '@/services/groups/committees/committeeLogoCollection'
+import { profileImagesImagePanelOperations } from '@/services/users/profileImageCollection'
+import { standardImagesImagePanelOperations } from '@/services/images/standard/operations'
+
+/**
+ * This is an assembly of all the `panel operations` - operations needed to display an
+ * image panel in the frontend.
+ *
+ * This allows users (passing panel auth) to look through the images in the special collection.
+ * And it allows them to be shown when editing Cms images.
+ */
+export const specialImagePanelOperations = {
+    flairImages: flairImagesImagePanelOperations,
+    ombulCovers: ombulCoversImagePanelOperations,
+    committeeLogos: committeeLogosImagePanelOperations,
+    profileImages: profileImagesImagePanelOperations,
+    standardImages: standardImagesImagePanelOperations,
+} as const
diff --git a/src/services/images/standard/actions.ts b/src/services/images/standard/actions.ts
new file mode 100644
index 000000000..16f00cb04
--- /dev/null
+++ b/src/services/images/standard/actions.ts
@@ -0,0 +1,7 @@
+'use server'
+
+import { makeAction } from '@/services/serverAction'
+import { standardImageCollectionOperations } from '@/services/images/standard/operations'
+
+export const readStandardImageAction = makeAction(standardImageCollectionOperations.readStandardImage)
+export const readAllStandardImagesAction = makeAction(standardImageCollectionOperations.readAllStandardImages)
diff --git a/src/services/images/standard/auth.ts b/src/services/images/standard/auth.ts
new file mode 100644
index 000000000..812650f64
--- /dev/null
+++ b/src/services/images/standard/auth.ts
@@ -0,0 +1,7 @@
+import { RequireNothing } from '@/auth/authorizer/RequireNothing'
+
+export const standardImagesImagePanelAuth = RequireNothing.staticFields({})
+
+export const standardImageCollectionAuth = {
+    readStandardImage: RequireNothing.staticFields({}),
+} as const
diff --git a/src/services/images/standard/constants.ts b/src/services/images/standard/constants.ts
new file mode 100644
index 000000000..e12b3221c
--- /dev/null
+++ b/src/services/images/standard/constants.ts
@@ -0,0 +1,80 @@
+import { standardStoreFiles } from '@/lib/standardStore/files'
+import type { StandardStoreFile } from '@/lib/standardStore/files'
+import type { StandardImage } from '@/prisma-generated-pn/enums'
+
+export const StandardImageConfig = {
+    DEFAULT_IMAGE: {
+        standardStoreFile: standardStoreFiles.defaultImage,
+        name: 'default_image',
+        alt: 'standard bilde (ikke funnet)',
+    },
+    DEFAULT_IMAGE_COLLECTION_COVER: {
+        standardStoreFile: standardStoreFiles.album,
+        name: 'Album',
+        alt: 'Et kamera med en linse',
+    },
+    DEFAULT_PROFILE_IMAGE: {
+        standardStoreFile: standardStoreFiles.magiskHattWhite,
+        name: 'default_profile_image',
+        alt: 'standard profilbilde (ikke funnet)',
+    },
+    DEFAULT_COMMITTEE_LOGO: {
+        standardStoreFile: standardStoreFiles.logoSimple,
+        name: 'default_committee_logo',
+        alt: 'komité logo',
+    },
+    LOGO_SIMPLE: {
+        standardStoreFile: standardStoreFiles.logoSimple,
+        name: 'logo_simple',
+        alt: 'Logo',
+    },
+    LOGO_WHITE: {
+        standardStoreFile: standardStoreFiles.logoWhite,
+        name: 'logo_white',
+        alt: 'Logo',
+    },
+    LOGO_WHITE_TEXT: {
+        standardStoreFile: standardStoreFiles.omegaLogoWhite,
+        name: 'logo_white_text',
+        alt: 'Logo',
+    },
+    MAGISK_HATT: {
+        standardStoreFile: standardStoreFiles.magiskHatt,
+        name: 'magisk_hatt',
+        alt: 'Magisk hatt',
+    },
+    HOVEDBYGGNINGEN: {
+        standardStoreFile: standardStoreFiles.hovedbygget,
+        name: 'hovedbygningen',
+        alt: 'Hovedbygningen',
+    },
+    BOOKS: {
+        standardStoreFile: standardStoreFiles.books,
+        name: 'Books',
+        alt: 'Bøker',
+    },
+    MACHINE: {
+        standardStoreFile: standardStoreFiles.machine,
+        name: 'machine',
+        alt: 'Maskin',
+    },
+    REALFAGSBYGGET: {
+        standardStoreFile: standardStoreFiles.realfagsbygget,
+        name: 'Realfagsbygget',
+        alt: 'Realfagsbygget',
+    },
+    FAIR: {
+        standardStoreFile: standardStoreFiles.fair,
+        name: 'fair',
+        alt: 'Fair',
+    },
+    PWA: {
+        standardStoreFile: standardStoreFiles.pwa,
+        name: 'pwa',
+        alt: 'PWA',
+    },
+} as const satisfies Record<StandardImage, {
+    standardStoreFile: StandardStoreFile
+    name: string
+    alt: string
+}>
diff --git a/src/services/images/standard/operations.ts b/src/services/images/standard/operations.ts
new file mode 100644
index 000000000..18b650800
--- /dev/null
+++ b/src/services/images/standard/operations.ts
@@ -0,0 +1,126 @@
+import '@pn-server-only'
+import { StandardImageConfig } from './constants'
+import { standardImageCollectionAuth, standardImagesImagePanelAuth } from './auth'
+import { implementSpecialCollection } from '@/services/images/subservice/special/implement'
+import { defineOperation, defineSubOperation } from '@/services/serviceOperation'
+import logger from '@/lib/logger'
+import { StandardImage, type Image } from '@/prisma-generated-pn-types'
+import { imageOperations } from '@/services/images/subservice/operations'
+import { z } from 'zod'
+
+const {
+    specialCollectionPanelOperations: standardImagesImagePanelOperations,
+    generateCollectionFromConfig: generateStandardImagesCollectionFromConfig
+} = implementSpecialCollection({
+    special: 'STANDARDIMAGES',
+    imagePanelAuther: standardImagesImagePanelAuth.dynamicFields({}),
+    config: {
+        name: 'Standardbilder',
+        description: `
+            Bilder som er nødvendige for nettsiden.
+            Denne koleksjonen er helt \'statisk\' og skal og kan ikke modifiseres.
+            Dersom et standardbilde (et bilde i denne kolleksjonen) mangler vil bildet genereres ut fra
+            sin statisk bestemte konfigurasjon.
+        `,
+    }
+})
+
+const generateStandardImageFromConfig = defineSubOperation({
+    paramsSchema: () => z.object({
+        standardImage: z.nativeEnum(StandardImage)
+    }),
+    operation: () => async ({ prisma, params }) => {
+        const config = StandardImageConfig[params.standardImage]
+        const existingImage = await prisma.image.findUnique({
+            where: {
+                standardImage: params.standardImage
+            }
+        })
+        if (existingImage) {
+            await prisma.image.delete({
+                where: {
+                    standardImage: params.standardImage
+                }
+            })
+        }
+
+        return await imageOperations.uploadImage.internalCall({
+            prisma,
+            data: await config.standardStoreFile.imageUploadData({
+                name: config.name,
+                alt: config.alt
+            }),
+            params: {
+                collectionId: (await standardImagesImagePanelOperations.readCollection({})).id,
+            },
+            operationImplementationFields: { uploadAsStandardImage: params.standardImage }
+        })
+    }
+})
+
+const readStandardImage = defineOperation({
+    authorizer: () => standardImageCollectionAuth.readStandardImage.dynamicFields({}),
+    paramsSchema: z.object({
+        standardImage: z.nativeEnum(StandardImage)
+    }),
+    operation: async ({ prisma, params }) => {
+        const image = await prisma.image.findUnique({
+            where: {
+                standardImage: params.standardImage
+            }
+        })
+
+        const standardCollection =
+            await standardImagesImagePanelOperations.readCollection({})
+        const standardImageIsPartOfStandardCollection = standardCollection.id === image?.collectionId
+
+        if (image && standardImageIsPartOfStandardCollection) return image
+
+        if (image) {
+            logger.error(`
+                Standard image ${params.standardImage} found in database, but not part of the standard collection.
+                This should never happen, as the standard collection should be the only collection 
+                that can have standard images.
+                Generating it again from the config to ensure data integrity.
+            `)
+        } else {
+            logger.error(`
+                Standard image ${params.standardImage} not found in database.
+                This should never happen, as it should be seeded on every environment.
+                Creating it on runtime from the config.     
+            `)
+        }
+
+        return await generateStandardImageFromConfig.internalCall({
+            prisma,
+            params: { standardImage: params.standardImage }
+        })
+    }
+})
+
+const readAllStandardImages = defineOperation({
+    authorizer: () => standardImageCollectionAuth.readStandardImage.dynamicFields({}),
+    operation: async (): Promise<Record<StandardImage, Image>> => {
+        const entries = await Promise.all(
+            Object.values(StandardImage).map(async standardImage =>
+                [standardImage, await readStandardImage({ params: { standardImage } })] as const
+            )
+        )
+        return Object.fromEntries(entries) as Record<StandardImage, Image>
+    }
+})
+
+export { standardImagesImagePanelOperations, generateStandardImagesCollectionFromConfig }
+
+/**
+ * The standard images are housed in the standardcollection - a special image collection.
+ * It exposes the method for reading a single standard image, or all of them at once.
+ *
+ * If the image does not exist in the database, it will be generated from its config,
+ * using the generateStandardImageFromConfig operation.
+ */
+export const standardImageCollectionOperations = {
+    readStandardImage,
+    readAllStandardImages,
+    generateStandardImageFromConfig,
+} as const
diff --git a/src/services/images/subservice/constants.ts b/src/services/images/subservice/constants.ts
new file mode 100644
index 000000000..9db5b3d36
--- /dev/null
+++ b/src/services/images/subservice/constants.ts
@@ -0,0 +1,28 @@
+import type { Prisma } from '@/prisma-generated-pn-types'
+
+export const maxImageFileSizeMb = 100
+
+export const maxImageFileSizeBytes = maxImageFileSizeMb * 1024 * 1024
+
+export const maxImageCountInOneBatch = 10
+
+export const imageSizes = {
+    small: 180,
+    medium: 360,
+    large: 720,
+} as const
+
+export const avifConvertionOptions = {
+    quality: 50,
+    lossless: false,
+    speed: 8, // default is 5
+    chromaSubsampling: '4:2:0',
+} as const
+
+export const allowedExtensions = ['png', 'jpg', 'jpeg', 'heic', 'avif', 'webp'] as const
+
+export const expandedImageCollectionIncluder = {
+    coverImage: true,
+    images: { take: 1 },
+    _count: { select: { images: true } },
+} satisfies Prisma.ImageCollectionInclude
diff --git a/src/services/images/subservice/operations.ts b/src/services/images/subservice/operations.ts
new file mode 100644
index 000000000..e01086fd5
--- /dev/null
+++ b/src/services/images/subservice/operations.ts
@@ -0,0 +1,241 @@
+import '@pn-server-only'
+import { imageSchemas } from './schemas'
+import { allowedExtensions, avifConvertionOptions, imageSizes, type expandedImageCollectionIncluder } from './constants'
+import { visibilityOperations } from '@/services/visibility/operations'
+import { defineSubOperation } from '@/services/serviceOperation'
+import { ServerError } from '@/services/error'
+import { implementStore } from '@/lib/store/implementStore'
+import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
+import sharp from 'sharp'
+import { File } from 'node:buffer'
+import type { Image, Prisma, StandardImage } from '@/prisma-generated-pn-types'
+import type { ExpandedImageCollection } from './types'
+import type { z } from 'zod'
+
+const imageStoreAllowedExtensions = [...allowedExtensions, 'avif'] as const
+
+const imageStore = implementStore({
+    staticStorePrefix: 'images',
+    allowedExtentions: imageStoreAllowedExtensions,
+})
+
+export const imageOperations = {
+    destroyCollection: defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaCollection,
+        opensTransaction: true,
+        operation: () => async ({ prisma, params }) => {
+            const collection = await prisma.imageCollection.findUnique({
+                where: uniqueCollectionWhere(params),
+            })
+            if (!collection) throw new ServerError('NOT FOUND', 'Collection ikke funnet')
+
+            await prisma.$transaction(async (tx) => {
+                await tx.imageCollection.delete({
+                    where: uniqueCollectionWhere(params),
+                })
+                await visibilityOperations.destroy.internalCall({
+                    prisma: tx,
+                    params: { visibilityId: collection.visibilityAdminId },
+                })
+                await visibilityOperations.destroy.internalCall({
+                    prisma: tx,
+                    params: { visibilityId: collection.visibilityRegularId },
+                })
+            })
+        }
+    }),
+    updateCollection: defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaCollection,
+        dataSchema: () => imageSchemas.updateCollection,
+        operation: () => async ({ prisma, params, data }) =>
+            prisma.imageCollection.update({
+                where: uniqueCollectionWhere(params),
+                data: {
+                    name: data.collectionName,
+                    description: data.collectionDescription,
+                    coverImage: {
+                        connect: data.coverImageId ? {
+                            id: data.coverImageId
+                        } : undefined
+                    }
+                }
+            })
+    }),
+
+    /**
+     * On uplad time the image is processed to the correct sizes and save it to the store.
+     * It will also save the original image to the store.
+     * All images are saved as avif (except the original).
+     */
+    uploadImage: defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaCollection,
+        dataSchema: () => imageSchemas.uploadImage,
+        operation: (
+            { uploadAsStandardImage }: { uploadAsStandardImage: StandardImage | null }
+        ) => async ({ prisma, params, data }) => {
+            const { imageFile, ...meta } = data
+            const buffer = Buffer.from(await imageFile.arrayBuffer())
+
+            const uploadPromises = [
+                createResizedAvifInStore(buffer, imageSizes.small),
+                createResizedAvifInStore(buffer, imageSizes.medium),
+                createResizedAvifInStore(buffer, imageSizes.large),
+                imageStore.createFile(imageFile, [...allowedExtensions]),
+            ]
+
+            const [smallSize, mediumSize, largeSize, original] = await Promise.all(uploadPromises)
+            const fsLocationSmallSize = smallSize.fsLocation
+            const fsLocationMediumSize = mediumSize.fsLocation
+            const fsLocationLargeSize = largeSize.fsLocation
+            const fsLocationOriginal = original.fsLocation
+            const extOriginal = original.ext
+            return await prisma.image.create({
+                data: {
+                    name: meta.imageName,
+                    alt: meta.imageAlt,
+                    license: meta.imageLicenseId ? { connect: { id: meta.imageLicenseId } } : undefined,
+                    credit: meta.imageCredit,
+                    fsLocationOriginal,
+                    fsLocationSmallSize,
+                    fsLocationMediumSize,
+                    fsLocationLargeSize,
+                    extOriginal,
+                    standardImage: uploadAsStandardImage,
+                    collection: {
+                        connect: uniqueCollectionWhere(params)
+                    }
+                }
+            })
+        }
+    }),
+
+    uploadManyImages: defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaUploadManyImages,
+        dataSchema: () => imageSchemas.uploadManyImages,
+        operation: () => async ({ params, data }) => {
+            for (const imageFile of data.imageFiles) {
+                const imageName = params.useFileName ? imageFile.name.split('.')[0] : undefined
+                await imageOperations.uploadImage.internalCall({
+                    params: {
+                        collectionId: params.collectionId,
+                    },
+                    data: {
+                        imageFile,
+                        imageName,
+                        imageAlt: imageFile.name.split('.')[0],
+                        imageLicenseId: data.imageLicenseId,
+                        imageCredit: data.imageCredit
+                    },
+                    operationImplementationFields: { uploadAsStandardImage: null }
+                })
+            }
+        }
+    }),
+
+    readPageOfImagesInCollection: defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaReadPageOfImagesInCollection,
+        operation: () => async ({ prisma, params }) => {
+            const { cursor, ...rest } = cursorPageingSelection(params.paging.page)
+            return await prisma.image.findMany({
+                where: {
+                    collectionId: params.collectionId,
+                },
+                ...rest,
+                cursor: cursor ? { id: cursor.imageId } : undefined,
+            })
+        },
+    }),
+
+    updateImageMeta: defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaImage,
+        dataSchema: () => imageSchemas.updateImageMeta,
+        operation: () => async ({ prisma, params, data }) =>
+            await prisma.image.update({
+                where: {
+                    id: params.imageId,
+                },
+                data: {
+                    license: data.imageLicenseId !== undefined ? {
+                        ...(data.imageLicenseId ? { connect: { id: data.imageLicenseId } } : { disconnect: true })
+                    } : undefined,
+                    name: data.imageName,
+                    alt: data.imageAlt,
+                    credit: data.imageCredit,
+                }
+            })
+    }),
+
+    destroyImage: defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaImage,
+        operation: () => async ({ prisma, params }) => {
+            const image = await prisma.image.findUniqueOrThrow({
+                where: {
+                    id: params.imageId,
+                },
+            })
+            await prisma.image.delete({
+                where: {
+                    id: params.imageId,
+                },
+            })
+            await imageStore.destroyFile(image.fsLocationOriginal)
+            await imageStore.destroyFile(image.fsLocationSmallSize)
+            await imageStore.destroyFile(image.fsLocationMediumSize)
+            await imageStore.destroyFile(image.fsLocationLargeSize)
+        }
+    }),
+
+    readCollectionOfImage: defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaImage,
+        operation: () => async ({ prisma, params }) =>
+            (await prisma.image.findUniqueOrThrow({
+                where: {
+                    id: params.imageId,
+                },
+                select: {
+                    collection: true,
+                }
+            })).collection
+    })
+} as const
+
+/**
+ * Resizes the original image buffer down to the given size before encoding to avif, so the
+ * (potentially much larger) original resolution is never itself run through avif encoding.
+ */
+async function createResizedAvifInStore(buffer: Buffer, size: number) {
+    const avifBuffer = await sharp(buffer)
+        .resize(size, size, {
+            fit: sharp.fit.inside,
+            withoutEnlargement: true
+        })
+        .toFormat('avif')
+        .avif(avifConvertionOptions)
+        .toBuffer()
+    const avifFile = new File([new Uint8Array(avifBuffer)], 'image.avif', { type: 'image/avif' })
+    return imageStore.createFile(avifFile, ['avif'])
+}
+
+export function uniqueCollectionWhere(params: z.infer<typeof imageSchemas.paramsSchemaCollection>) {
+    return (
+        'collectionId' in params ? { id: params.collectionId } : { name: params.collectionName }
+    ) satisfies Prisma.ImageCollectionWhereUniqueInput
+}
+
+/**
+ * Enriches a collection (read with {@link expandedImageCollectionIncluder}) into the
+ * ExpandedImageCollection shape. The cover image is resolved as the
+ * collection's explicit cover, else its first image, else the provided default (dynamic
+ * collections pass the DEFAULT_IMAGE_COLLECTION_COVER standard image).
+ */
+export function expandImageCollection(
+    collection: Prisma.ImageCollectionGetPayload<{ include: typeof expandedImageCollectionIncluder }>,
+    defaultCoverImage: Image | null,
+): ExpandedImageCollection {
+    const { images, _count, ...rest } = collection
+    return {
+        ...rest,
+        coverImage: rest.coverImage ?? images[0] ?? defaultCoverImage,
+        numberOfImages: _count.images,
+    }
+}
diff --git a/src/services/images/subservice/schemas.ts b/src/services/images/subservice/schemas.ts
new file mode 100644
index 000000000..0b25d2c97
--- /dev/null
+++ b/src/services/images/subservice/schemas.ts
@@ -0,0 +1,105 @@
+import {
+    allowedExtensions,
+    maxImageCountInOneBatch,
+    maxImageFileSizeBytes,
+    maxImageFileSizeMb
+} from './constants'
+import { readPageInputSchema } from '@/lib/paging/schema'
+import { zfd } from 'zod-form-data'
+import { z } from 'zod'
+import { File } from 'node:buffer'
+
+// ts does not like doing .includes(x) if x does not neccessarily have the same type as the
+// array elements, so we need to make sure that the array is of type readonly string[] instead
+// the narrower union type array.
+const extentionsAsStringArray: readonly string[] = allowedExtensions
+
+export const imageFileSchema = z.instanceof(File).refine(
+    file => file.size < maxImageFileSizeBytes, `File size must be less than ${maxImageFileSizeMb}mb`
+).refine(
+    file => extentionsAsStringArray.includes(file.type.split('/')[1]),
+    `File type must be one of ${allowedExtensions.join(', ')}`
+)
+
+export const baseSchema = z.object({
+    collectionName: z.string().max(40).min(2).trim(),
+    collectionDescription: z.string().max(500).min(2).trim(),
+    coverImageId: z.number().optional(),
+
+    imageFile: imageFileSchema,
+    imageName: z.string().max(50, 'max length in 50').min(2, 'min length is 2').optional(),
+    imageAlt: z.string().max(100, 'max length in 50').min(2, 'min length is 2'),
+    imageFiles: zfd.repeatable(z.array(z.instanceof(File)).refine(
+        files => files.every(file => file.size < maxImageFileSizeBytes),
+        `Alle filer må være mindre enn ${maxImageFileSizeMb}mb`
+    )).refine(
+        files => files.every(file => (allowedExtensions as readonly string[]).includes(file.type.split('/')[1])),
+        `Filtypen må være en av ${allowedExtensions.join(', ')}`
+    ).refine(
+        files => files.length <= maxImageCountInOneBatch && files.length > 0,
+        `Du kan bare laste opp mellom 1 og ${maxImageCountInOneBatch} bilder av gangen`
+    ),
+    imageLicenseId: z.union([
+        z.string().optional().nullable(),
+        z.coerce.number().optional().or(z.literal('NULL')),
+    ]).transform(
+        value => {
+            if (typeof value === 'string' && value === 'NULL') return null
+            if (typeof value === 'string') return parseInt(value, 10)
+            return value
+        }
+    ),
+    imageCredit: z.string().optional(),
+})
+
+const pageSchema = readPageInputSchema(
+    z.number(),
+    z.object({
+        imageId: z.number(),
+    }),
+    z.undefined(),
+)
+
+export const imageSchemas = {
+    paramsSchemaCollection: z.union([
+        z.object({ collectionId: z.number() }),
+        z.object({ collectionName: z.string() })
+    ]),
+    paramsSchemaImage: z.object({
+        imageId: z.number(),
+    }),
+    paramsSchemaUploadManyImages: z.object({
+        collectionId: z.number(),
+        useFileName: z.boolean(),
+    }),
+    paramsSchemaReadPageOfImagesInCollection: z.object({
+        paging: pageSchema,
+        collectionId: z.number(),
+    }),
+    paramsSchemaReadPageOfImagesInSpecialCollection: z.object({
+        paging: pageSchema,
+    }),
+    updateCollection: baseSchema.partial().pick({
+        collectionName: true,
+        collectionDescription: true,
+        coverImageId: true,
+    }),
+    uploadImage: baseSchema.pick({
+        imageName: true,
+        imageAlt: true,
+        imageFile: true,
+        imageLicenseId: true,
+        imageCredit: true,
+    }),
+    uploadManyImages: baseSchema.pick({
+        imageFiles: true,
+        imageLicenseId: true,
+        imageCredit: true,
+    }),
+    updateImageMeta: baseSchema.partial().pick({
+        imageName: true,
+        imageAlt: true,
+        imageLicenseId: true,
+        imageCredit: true,
+    }),
+} as const
diff --git a/src/services/images/subservice/special/implement.ts b/src/services/images/subservice/special/implement.ts
new file mode 100644
index 000000000..867d77bf9
--- /dev/null
+++ b/src/services/images/subservice/special/implement.ts
@@ -0,0 +1,142 @@
+import '@pn-server-only'
+import { defineOperation, defineSubOperation } from '@/services/serviceOperation'
+import { imageOperations, expandImageCollection } from '@/services/images/subservice/operations'
+import { expandedImageCollectionIncluder } from '@/services/images/subservice/constants'
+import { imageSchemas } from '@/services/images/subservice/schemas'
+import { ServerError } from '@/services/error'
+import logger from '@/lib/logger'
+import { visibilityOperations } from '@/services/visibility/operations'
+import type { SpecialCollection } from '@/prisma-generated-pn-types'
+import type { AuthorizerDynamicFieldsBound } from '@/auth/authorizer/Authorizer'
+
+export function implementSpecialCollection({
+    special,
+    imagePanelAuther,
+    config
+}: {
+    special: SpecialCollection,
+    imagePanelAuther: AuthorizerDynamicFieldsBound
+    config: {
+        name: string,
+        description: string,
+    }
+}) {
+    const generateCollectionFromConfig = defineSubOperation({
+        operation: () => async ({ prisma }) => {
+            //Note: visibilities are not actually used for special collections, but required by the schema.
+            const visibilityRegular = await visibilityOperations.create.internalCall({})
+            const visibilityAdmin = await visibilityOperations.create.internalCall({})
+
+            const data = {
+                name: config.name,
+                description: config.description,
+                visibilityAdmin: {
+                    connect: {
+                        id: visibilityAdmin.id,
+                    }
+                },
+                visibilityRegular: {
+                    connect: {
+                        id: visibilityRegular.id,
+                    }
+                }
+            }
+
+            const created = await prisma.imageCollection.upsert({
+                where: { special },
+                update: data,
+                create: { ...data, special },
+                include: expandedImageCollectionIncluder,
+            })
+            return expandImageCollection(created, null)
+        }
+    })
+
+    const readCollection = defineOperation({
+        authorizer: () => imagePanelAuther,
+        operation: async ({ prisma }) => {
+            const collection = await prisma.imageCollection.findUnique({
+                where: {
+                    special,
+                },
+                include: expandedImageCollectionIncluder,
+            })
+            // Note: we do not pass the a standard image in here as calling
+            // on the standard images service might cause an infinite loop,
+            // as the standard collection is read to validate that the standard
+            // image is in a correct state.
+            if (collection) return expandImageCollection(collection, null)
+
+            logger.error(`
+                Special collection with special ${special} not found
+                It must therefore be created from the config.
+            `)
+
+            return generateCollectionFromConfig.internalCall({ prisma })
+        }
+    })
+
+    const uploadImage = defineSubOperation({
+        dataSchema: () => imageSchemas.uploadImage,
+        operation: () => async ({ data }) =>
+            imageOperations.uploadImage.internalCall({
+                params: {
+                    collectionId: (await readCollection({})).id,
+                },
+                data,
+                operationImplementationFields: { uploadAsStandardImage: null }
+            })
+    })
+
+    // Here one could just forward imageOperation.destroyImage, as the internalOperations,
+    // are not to be exposed to the client, and we may trust that the implementer service code
+    // does not call this operation with imageIds it does not own interanally.
+    // However, for sanity, and to catch any potential bugs, the subservice will
+    // enforce ownership of imageId.
+    const destroyImage = defineSubOperation({
+        paramsSchema: () => imageSchemas.paramsSchemaImage,
+        operation: () => async ({ prisma, params }) => {
+            const collection = await readCollection({})
+            const image = await prisma.image.findFirst({
+                where: {
+                    id: params.imageId,
+                    collectionId: collection.id,
+                },
+                select: { id: true }
+            })
+            if (!image) {
+                throw new ServerError(
+                    'BAD PARAMETERS',
+                    `Image ${params.imageId} is not part of the special collection ${special}`
+                )
+            }
+            return imageOperations.destroyImage.internalCall({ params })
+        }
+    })
+
+    const readPageOfImagesInCollection = defineOperation({
+        authorizer: () => imagePanelAuther,
+        paramsSchema: imageSchemas.paramsSchemaReadPageOfImagesInSpecialCollection,
+        operation: async ({ params }) => {
+            const collection = await readCollection({})
+            return imageOperations.readPageOfImagesInCollection.internalCall({
+                params: {
+                    paging: params.paging,
+                    collectionId: collection.id,
+                },
+            })
+        }
+    })
+
+    return {
+        internalOperations: {
+            uploadImage,
+            destroyImage,
+        },
+        specialCollectionPanelOperations: {
+            readCollection,
+            readPageOfImagesInCollection,
+        },
+        generateCollectionFromConfig,
+    } as const
+}
diff --git a/src/services/images/subservice/types.ts b/src/services/images/subservice/types.ts
new file mode 100644
index 000000000..c537bbc41
--- /dev/null
+++ b/src/services/images/subservice/types.ts
@@ -0,0 +1,20 @@
+import type { imageSchemas } from '@/services/images/subservice/schemas'
+import type { ActionFromSubServiceOperation } from '@/services/actionTypes'
+import type { SubServiceOperation } from '@/services/serviceOperation'
+import type { Image, ImageCollection } from '@/prisma-generated-pn-types'
+
+/**
+ * The action type for uploading/updating an image.
+ */
+export type UploadSpecialCollectionImageAction = ActionFromSubServiceOperation<
+    SubServiceOperation<unknown, false, undefined, typeof imageSchemas.uploadImage>
+>
+
+/**
+ * An image collection enriched with a resolved cover image and its image count - the shape needed
+ * to render a CollectionCard.
+ */
+export type ExpandedImageCollection = ImageCollection & {
+    coverImage: Image | null,
+    numberOfImages: number,
+}
diff --git a/src/services/images/types.ts b/src/services/images/types.ts
deleted file mode 100644
index 6c4f055c1..000000000
--- a/src/services/images/types.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-export type ImageDetails = {
-    collectionId: number
-}
-export type ImageCursor = {
-    id: number
-}
diff --git a/src/services/licenses/constants.ts b/src/services/licenses/constants.ts
new file mode 100644
index 000000000..2f5ea2b6f
--- /dev/null
+++ b/src/services/licenses/constants.ts
@@ -0,0 +1,28 @@
+
+export const standardLicenseNames = [
+    'CC BY-SA 4.0',
+    'Paxels',
+] as const
+
+export type StandardLicenseName = typeof standardLicenseNames[number]
+
+type StandardLicenseConfig = {
+    name: StandardLicenseName
+    link: string
+}
+
+/**
+ * These are the licenses that need to exist for the project to be seeded.
+ * It is both needed for `standardimages` and for the seeding of dynamic images on startup
+ */
+export const standardLicensesConfig = [
+    {
+        name: standardLicenseNames[0],
+        link: 'https://creativecommons.org/licenses/by-sa/4.0/',
+    },
+    {
+        name: standardLicenseNames[1],
+        link: 'https://www.pexels.com/license/',
+    },
+] as const satisfies StandardLicenseConfig[]
+
diff --git a/src/services/licenses/operations.ts b/src/services/licenses/operations.ts
index 77dbc300c..09d6d4ebd 100644
--- a/src/services/licenses/operations.ts
+++ b/src/services/licenses/operations.ts
@@ -1,10 +1,69 @@
 import '@pn-server-only'
 import { licenseSchemas } from './schemas'
+import { standardLicenseNames, standardLicensesConfig, type StandardLicenseName } from './constants'
 import { licenseAuth } from './auth'
 import { ServerError } from '@/services/error'
-import { defineOperation } from '@/services/serviceOperation'
+import { defineOperation, defineSubOperation } from '@/services/serviceOperation'
 import { z } from 'zod'
 
+const getStandardLicenseConfig = (standardLicenseName: StandardLicenseName) => {
+    const licenseConfig = standardLicensesConfig.find((license) => license.name === standardLicenseName)
+    if (!licenseConfig) {
+        throw new ServerError('SERVER ERROR', `Unknown standard license: ${standardLicenseName}`)
+    }
+
+    return licenseConfig
+}
+
+const generateStandardLicense = defineSubOperation({
+    paramsSchema: () => z.object({
+        standardLicenseName: z.enum(standardLicenseNames),
+    }),
+    operation: () => async ({ prisma, params }) => {
+        const licenseConfig = getStandardLicenseConfig(params.standardLicenseName)
+
+        return await prisma.license.upsert({
+            where: { name: params.standardLicenseName },
+            create: {
+                name: licenseConfig.name,
+                link: licenseConfig.link,
+            },
+            update: {
+                link: licenseConfig.link,
+            },
+        })
+    }
+})
+
+const readStandardLicense = defineSubOperation({
+    paramsSchema: () => z.object({
+        standardLicenseName: z.enum(standardLicenseNames),
+    }),
+    operation: () => async ({ prisma, params }) => {
+        const license = await prisma.license.findUnique({
+            where: { name: params.standardLicenseName },
+        })
+
+        if (license) return license
+
+        try {
+            return await generateStandardLicense.internalCall({
+                prisma,
+                params: { standardLicenseName: params.standardLicenseName }
+            })
+        } catch (error) {
+            // Handle race condition.
+            // Just in case two concurrent callers tried at the same time
+            if (error instanceof ServerError && error.errorCode === 'DUPLICATE') {
+                return await prisma.license.findUniqueOrThrow({
+                    where: { name: params.standardLicenseName },
+                })
+            }
+            throw error
+        }
+    },
+})
+
 export const licenseOperations = {
     create: defineOperation({
         authorizer: () => licenseAuth.create.dynamicFields({}),
@@ -59,4 +118,6 @@ export const licenseOperations = {
             })
         }
     }),
+    generateStandardLicense,
+    readStandardLicense,
 }
diff --git a/src/services/lockers/operations.ts b/src/services/lockers/operations.ts
index 52a61ea06..c48aab4e9 100644
--- a/src/services/lockers/operations.ts
+++ b/src/services/lockers/operations.ts
@@ -4,7 +4,6 @@ import { lockersSchemas } from './schemas'
 import { lockerAuth } from './auth'
 import { defineOperation } from '@/services/serviceOperation'
 import { ServerError } from '@/services/error'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
 import { z } from 'zod'
 import type { Prisma } from '@/prisma-generated-pn-types'
@@ -86,13 +85,7 @@ export const lockerOperations = {
      */
     readPage: defineOperation({
         authorizer: () => lockerAuth.readPage.dynamicFields({}),
-        paramsSchema: readPageInputSchemaObject(
-            z.number(),
-            z.object({
-                id: z.number(),
-            }),
-            z.any(),
-        ),
+        paramsSchema: lockersSchemas.readPage,
         operation: async ({ prisma, params }) => {
             const lockers = await prisma.locker.findMany({
                 ...cursorPageingSelection(params.paging.page),
diff --git a/src/services/lockers/schemas.ts b/src/services/lockers/schemas.ts
index 5de96929d..c304ba352 100644
--- a/src/services/lockers/schemas.ts
+++ b/src/services/lockers/schemas.ts
@@ -1,3 +1,4 @@
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { z } from 'zod'
 
 const baseSchema = z.object({
@@ -17,4 +18,12 @@ export const lockersSchemas = {
         building: true,
         floor: true,
     }),
+
+    readPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number(),
+        }),
+        z.any(),
+    ),
 }
diff --git a/src/services/lockers/types.ts b/src/services/lockers/types.ts
index 2945ae4fd..707fc157f 100644
--- a/src/services/lockers/types.ts
+++ b/src/services/lockers/types.ts
@@ -1,10 +1,10 @@
 import type { lockerReservationIncluder } from './reservations/constants'
+import type { lockersSchemas } from './schemas'
+import type { InferPagingCursor } from '@/lib/paging/schema'
 import type { Prisma } from '@/prisma-generated-pn-types'
 
 export type LockerWithReservation = Prisma.LockerGetPayload<{
     include: typeof lockerReservationIncluder,
 }>
 
-export type LockerCursor = {
-    id: number
-}
+export type LockerCursor = InferPagingCursor<typeof lockersSchemas.readPage>
diff --git a/src/services/news/actions.ts b/src/services/news/actions.ts
index 909bd65e3..390931ae0 100644
--- a/src/services/news/actions.ts
+++ b/src/services/news/actions.ts
@@ -1,10 +1,6 @@
 'use server'
 import { newsOperations } from './operations'
-import { createActionError } from '@/services/actionError'
-import { notificationOperations } from '@/services/notifications/operations'
 import { makeAction } from '@/services/serverAction'
-import type { SimpleNewsArticle } from '@/services/news/types'
-import type { ActionReturn } from '@/services/actionTypes'
 
 export const createNewsAction = makeAction(newsOperations.create)
 export const destroyNewsAction = makeAction(newsOperations.destroy)
@@ -12,6 +8,11 @@ export const readOldNewsPageAction = makeAction(newsOperations.readOldPage)
 export const readNewsCurrentAction = makeAction(newsOperations.readCurrent)
 export const readNewsAction = makeAction(newsOperations.read)
 export const updateNewsAction = makeAction(newsOperations.update)
+export const setNewsPublishedAction = makeAction(newsOperations.setPublished)
+
+export const readNewsDoubleLevelVisibilityAction = makeAction(newsOperations.visibility.readDoubleLevelMatrix)
+export const updateNewsRegularLevelVisibilityAction = makeAction(newsOperations.visibility.updateRegularLevel)
+export const updateNewsAdminLevelVisibilityAction = makeAction(newsOperations.visibility.updateAdminLevel)
 
 export const updateNewsArticleAction = makeAction(
     newsOperations.updateArticle.update
@@ -43,31 +44,3 @@ export const updateNewsArticleCmsParagraphAction = makeAction(
 export const updateNewsArticleCmsLinkAction = makeAction(
     newsOperations.updateArticle.articleSections.cmsLink
 )
-
-export async function publishNewsAction(
-    // disable eslint rule temporarily until todo is resolved
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    id: number,
-    // disable eslint rule temporarily until todo is resolved
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    shouldPublish: boolean
-): Promise<ActionReturn<Omit<SimpleNewsArticle, 'coverImage'>>> {
-    notificationOperations.createSpecial.internalCall({
-        params: {
-            special: 'NEW_NEWS_ARTICLE',
-        },
-        data: {
-            title: 'Ny nyhetsartikkel', // TODO: Add info about the article
-            message: 'En ny nyhetsartikkel er publisert',
-        },
-    })
-
-    return createActionError('UNKNOWN ERROR', 'Not implemented')
-}
-
-// disable eslint rule temporarily until todo is resolved
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export async function updateVisibilityAction(id: number, visible: unknown): Promise<ActionReturn<unknown>> {
-    //TODO: add visible field to news
-    return createActionError('UNKNOWN ERROR', 'Not implemented')
-}
diff --git a/src/services/news/auth.ts b/src/services/news/auth.ts
index 3b532ba82..4819f490e 100644
--- a/src/services/news/auth.ts
+++ b/src/services/news/auth.ts
@@ -1,15 +1,25 @@
-import { RequireNothing } from '@/auth/authorizer/RequireNothing'
-
+import { RequireLevelFromDoubleLevelVisibility } from '@/auth/authorizer/RequireLevelFromDoubleLevelVisibility'
+import { RequireLevelFromDoubleLevelVisibilityDynamic } from '@/auth/authorizer/RequireLevelFromDoubleLevelVisibilityDynamic'
+import { RequirePermission } from '@/auth/authorizer/RequirePermission'
+import { RequireVisibilityFilter } from '@/auth/authorizer/RequireVisibilityFilter'
 
 export const newsAuth = {
-    // Should prob. be a permission:
-    create: RequireNothing.staticFields({}),
-    // visibility 1 (admin)
-    destroy: RequireNothing.staticFields({}),
-    update: RequireNothing.staticFields({}),
-    updateArticle: RequireNothing.staticFields({}),
-    //visibility 2 (read)
-    readCurrent: RequireNothing.staticFields({}), // auth filter!!
-    readOldPage: RequireNothing.staticFields({}), // auth filter!!
-    read: RequireNothing.staticFields({}),
+    create: RequirePermission.staticFields({ permission: 'NEWS_CREATE' }),
+
+    readDoubleLevelMatrix:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'REGULAR', bypassPermission: 'NEWS_ADMIN' }),
+    updateRegularLevel:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'NEWS_ADMIN' }),
+    updateAdminLevel:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'NEWS_ADMIN' }),
+
+    destroy: RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'NEWS_ADMIN' }),
+    update: RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'NEWS_ADMIN' }),
+    updateArticle: RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'NEWS_ADMIN' }),
+    setPublished:
+        RequireLevelFromDoubleLevelVisibility.staticFields({ level: 'ADMIN', bypassPermission: 'NEWS_ADMIN' }),
+
+    read: RequireLevelFromDoubleLevelVisibilityDynamic.staticFields({ bypassPermission: 'NEWS_ADMIN' }),
+    readCurrent: RequireVisibilityFilter.staticFields({ bypassPermission: 'NEWS_ADMIN' }),
+    readOldPage: RequireVisibilityFilter.staticFields({ bypassPermission: 'NEWS_ADMIN' }),
 } as const
diff --git a/src/services/news/operations.ts b/src/services/news/operations.ts
index 0f0aea454..663e6d397 100644
--- a/src/services/news/operations.ts
+++ b/src/services/news/operations.ts
@@ -3,18 +3,61 @@ import { newsSchemas } from './schemas'
 import { defaultNewsArticleOldCutoff, newsArticleRealtionsIncluder, simpleNewsArticleRealtionsIncluder } from './constants'
 import { newsAuth } from './auth'
 import { articleOperations } from '@/cms/articles/operations'
+import { notificationOperations } from '@/services/notifications/operations'
+import { visibilityOperations } from '@/services/visibility/operations'
+import { implementDoubleLevelVisibilityOperations, toMatrix, visibilityIncluder } from '@/services/visibility/implement'
 import { defineOperation } from '@/services/serviceOperation'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
 import { ServerError } from '@/services/error'
 import { implementUpdateArticleOperations } from '@/cms/articles/implement'
 import { z } from 'zod'
 
+const visibility = implementDoubleLevelVisibilityOperations({
+    implementationParamsSchema: newsSchemas.params,
+    authorizers: {
+        readDoubleLevelMatrix: ({ doubleLevelMatrix }) => newsAuth.readDoubleLevelMatrix.dynamicFields({
+            doubleLevelMatrix,
+        }),
+        updateRegularLevel: ({ doubleLevelMatrix }) => newsAuth.updateRegularLevel.dynamicFields({
+            doubleLevelMatrix,
+        }),
+        updateAdminLevel: ({ doubleLevelMatrix }) => newsAuth.updateAdminLevel.dynamicFields({
+            doubleLevelMatrix,
+        })
+    },
+    readDoubleLevel: async ({ prisma, implementationParams, include }) => {
+        const news = await prisma.newsArticle.findUniqueOrThrow({
+            where: { id: implementationParams.id },
+            include: {
+                visibilityRegular: { include },
+                visibilityAdmin: { include }
+            }
+        })
+        return {
+            regularLevel: news.visibilityRegular,
+            adminLevel: news.visibilityAdmin
+        }
+    }
+})
+
 const read = defineOperation({
-    authorizer: () => newsAuth.read.dynamicFields({}),
-    paramsSchema: z.object({
-        id: z.number()
-    }),
+    authorizer: async ({ params, prisma }) => {
+        const news = await prisma.newsArticle.findUniqueOrThrow({
+            where: { id: params.id },
+            include: {
+                visibilityRegular: { include: visibilityIncluder },
+                visibilityAdmin: { include: visibilityIncluder }
+            }
+        })
+        return newsAuth.read.dynamicFields({
+            level: news.published ? 'REGULAR' : 'ADMIN',
+            doubleLevelMatrix: {
+                regularLevel: toMatrix(news.visibilityRegular),
+                adminLevel: toMatrix(news.visibilityAdmin)
+            }
+        })
+    },
+    paramsSchema: newsSchemas.params,
     operation: async ({ prisma, params }) => {
         const news = await prisma.newsArticle.findUnique({
             where: {
@@ -28,6 +71,7 @@ const read = defineOperation({
 })
 
 export const newsOperations = {
+    visibility,
     create: defineOperation({
         authorizer: () => newsAuth.create.dynamicFields({}),
         dataSchema: newsSchemas.create,
@@ -37,7 +81,14 @@ export const newsOperations = {
             const backupEndDateTime = new Date()
             backupEndDateTime.setDate(backupEndDateTime.getDate() + defaultNewsArticleOldCutoff)
 
-            const article = await articleOperations.create.internalCall({ data: { name } })
+            const article = await articleOperations.create.internalCall({
+                data: { name },
+                dataSchemaImplementationFields: { maxNameLength: 30 },
+                operationImplementationFields: { special: null }
+            })
+
+            const visibilityRegular = await visibilityOperations.create.internalCall({})
+            const visibilityAdmin = await visibilityOperations.create.internalCall({})
 
             const news = await prisma.newsArticle.create({
                 data: {
@@ -48,6 +99,16 @@ export const newsOperations = {
                         }
                     },
                     endDateTime: endDateTime || backupEndDateTime,
+                    visibilityRegular: {
+                        connect: {
+                            id: visibilityRegular.id
+                        }
+                    },
+                    visibilityAdmin: {
+                        connect: {
+                            id: visibilityAdmin.id
+                        }
+                    },
                 },
                 include: newsArticleRealtionsIncluder,
             })
@@ -55,25 +116,44 @@ export const newsOperations = {
         }
     }),
     destroy: defineOperation({
-        authorizer: () => newsAuth.destroy.dynamicFields({}),
-        paramsSchema: z.object({
-            id: z.number()
+        authorizer: async ({ params, prisma }) => newsAuth.destroy.dynamicFields({
+            doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({ params, prisma })
         }),
+        paramsSchema: newsSchemas.params,
+        opensTransaction: true,
         operation: async ({ prisma, params }) => {
-            const news = await prisma.newsArticle.delete({
-                where: { id: params.id },
+            const news = await prisma.newsArticle.findUnique({ where: { id: params.id } })
+            if (!news) throw new ServerError('NOT FOUND', `article ${params.id} not found`)
+
+            await prisma.$transaction(async tx => {
+                await tx.newsArticle.delete({ where: { id: params.id } })
+                await visibilityOperations.destroy.internalCall({
+                    prisma: tx,
+                    params: { visibilityId: news.visibilityAdminId },
+                })
+                await visibilityOperations.destroy.internalCall({
+                    prisma: tx,
+                    params: { visibilityId: news.visibilityRegularId },
+                })
             })
+
             await articleOperations.destroy.internalCall({ params: { articleId: news.articleId } })
         }
     }),
     readCurrent: defineOperation({
         authorizer: () => newsAuth.readCurrent.dynamicFields({}),
-        operation: async ({ prisma }) => {
+        operation: async ({ prisma }, prismaWhereFilter) => {
             const news = await prisma.newsArticle.findMany({
                 where: {
                     endDateTime: {
                         gte: new Date(),
-                    }
+                    },
+                    ...(prismaWhereFilter ? {
+                        OR: [
+                            { published: true, visibilityRegular: prismaWhereFilter },
+                            { published: false, visibilityAdmin: prismaWhereFilter },
+                        ]
+                    } : {}),
                 },
                 orderBy: {
                     article: {
@@ -89,20 +169,20 @@ export const newsOperations = {
         }
     }),
     readOldPage: defineOperation({
-        paramsSchema: readPageInputSchemaObject(
-            z.number(),
-            z.object({
-                id: z.number(),
-            }),
-            z.undefined()
-        ), // Converted from ReadPageInput<number, EventArchiveCursor, EventArchiveDetails>
+        paramsSchema: newsSchemas.readOldPage,
         authorizer: () => newsAuth.readOldPage.dynamicFields({}),
-        operation: async ({ prisma, params }) => {
+        operation: async ({ prisma, params }, prismaWhereFilter) => {
             const news = await prisma.newsArticle.findMany({
                 where: {
                     endDateTime: {
                         lt: new Date(),
-                    }
+                    },
+                    ...(prismaWhereFilter ? {
+                        OR: [
+                            { published: true, visibilityRegular: prismaWhereFilter },
+                            { published: false, visibilityAdmin: prismaWhereFilter },
+                        ]
+                    } : {}),
                 },
                 ...cursorPageingSelection(params.paging.page),
                 orderBy: {
@@ -120,10 +200,10 @@ export const newsOperations = {
     }),
     read,
     update: defineOperation({
-        authorizer: () => newsAuth.update.dynamicFields({}),
-        paramsSchema: z.object({
-            id: z.number(),
+        authorizer: async ({ params, prisma }) => newsAuth.update.dynamicFields({
+            doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({ params, prisma })
         }),
+        paramsSchema: newsSchemas.params,
         dataSchema: newsSchemas.update,
         operation: async ({ prisma, params, data }) =>
             prisma.newsArticle.update({
@@ -139,12 +219,56 @@ export const newsOperations = {
                 }
             })
     }),
+    /**
+     * Publishes an article, or takes it back to being a draft. Which of the two levels the read
+     * authorizer demands follows from this flag, so retracting an article makes it visible only to
+     * those who can administrate it again.
+     */
+    setPublished: defineOperation({
+        authorizer: async ({ params, prisma }) => newsAuth.setPublished.dynamicFields({
+            doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({ params, prisma })
+        }),
+        paramsSchema: newsSchemas.params,
+        dataSchema: newsSchemas.setPublished,
+        operation: async ({ prisma, params, data }) => {
+            const previous = await prisma.newsArticle.findUniqueOrThrow({
+                where: { id: params.id },
+                select: { published: true },
+            })
+            const news = await prisma.newsArticle.update({
+                where: { id: params.id },
+                data: { published: data.published },
+                include: simpleNewsArticleRealtionsIncluder,
+            })
+
+            if (data.published && !previous.published) {
+                await notificationOperations.createSpecial.internalCall({
+                    params: {
+                        special: 'NEW_NEWS_ARTICLE',
+                    },
+                    data: {
+                        title: 'Ny nyhetsartikkel', // TODO: Add info about the article
+                        message: 'En ny nyhetsartikkel er publisert',
+                    },
+                })
+            }
+
+            return {
+                ...news,
+                coverImage: news.article.coverImage.image
+            }
+        }
+    }),
     updateArticle: implementUpdateArticleOperations({
         implementationParamsSchema: z.object({
             newsId: z.number(),
         }),
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        authorizer: ({ implementationParams }) => newsAuth.updateArticle.dynamicFields({}),
+        authorizer: async ({ implementationParams, prisma }) => newsAuth.updateArticle.dynamicFields({
+            doubleLevelMatrix: await visibility.readDoubleLevelMatrixInternal({
+                params: { id: implementationParams.newsId },
+                prisma
+            })
+        }),
         ownedArticles: async ({ implementationParams }) => {
             const news = await read({ params: { id: implementationParams.newsId }, bypassAuth: true })
             return [news.article]
diff --git a/src/services/news/schemas.ts b/src/services/news/schemas.ts
index 7e28cad11..51c6a5a53 100644
--- a/src/services/news/schemas.ts
+++ b/src/services/news/schemas.ts
@@ -1,4 +1,5 @@
 import { Zpn } from '@/lib/fields/zpn'
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { z } from 'zod'
 
 const baseSchema = z.object({
@@ -8,6 +9,9 @@ const baseSchema = z.object({
 })
 
 export const newsSchemas = {
+    params: z.object({
+        id: z.number()
+    }),
     create: baseSchema.pick({
         name: true,
         description: true,
@@ -17,5 +21,15 @@ export const newsSchemas = {
         name: true,
         description: true,
         endDateTime: true
-    }).partial()
+    }).partial(),
+    setPublished: z.object({
+        published: Zpn.checkboxOrBoolean({ label: 'Publisert' })
+    }),
+    readOldPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number(),
+        }),
+        z.undefined()
+    ),
 } as const
diff --git a/src/services/news/types.ts b/src/services/news/types.ts
index f97675cfb..f92c0b533 100644
--- a/src/services/news/types.ts
+++ b/src/services/news/types.ts
@@ -1,4 +1,6 @@
 import type { newsArticleRealtionsIncluder } from './constants'
+import type { newsSchemas } from './schemas'
+import type { InferPagingCursor } from '@/lib/paging/schema'
 import type { NewsArticle, Image, Prisma } from '@/prisma-generated-pn-types'
 
 export type ExpandedNewsArticle = Prisma.NewsArticleGetPayload<{
@@ -10,6 +12,4 @@ export type SimpleNewsArticle = NewsArticle & {
     coverImage: Image | null
 }
 
-export type NewsCursor = {
-    id: number
-}
+export type NewsCursor = InferPagingCursor<typeof newsSchemas.readOldPage>
diff --git a/src/services/notifications/channel/schemas.ts b/src/services/notifications/channel/schemas.ts
index 3699d9346..f11d2037e 100644
--- a/src/services/notifications/channel/schemas.ts
+++ b/src/services/notifications/channel/schemas.ts
@@ -1,12 +1,12 @@
 import { INFINITE_LOOP_PREVENTION_MAX_ITERATIONS } from './constants'
 import { notificationMethodsArray } from '@/services/notifications/constants'
+import { SpecialNotificationChannel } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
 import type {
     ExpandedNotificationChannel,
     NotificationMethodGeneral,
     NotificationMethodTypes
 } from '@/services/notifications/types'
-import { SpecialNotificationChannel } from '@/prisma-generated-pn-types'
 
 //TODO: This is unused ??
 export function parseMethods(data: FormData, prefix?: NotificationMethodTypes) {
diff --git a/src/services/notifications/operations.ts b/src/services/notifications/operations.ts
index 5dc5e37ae..e046a1414 100644
--- a/src/services/notifications/operations.ts
+++ b/src/services/notifications/operations.ts
@@ -8,11 +8,11 @@ import { emailSchemas } from './email/schemas'
 import { sendMail } from '@/lib/email/send'
 import { userFilterSelection } from '@/services/users/constants'
 import { defineOperation, defineSubOperation } from '@/services/serviceOperation'
+import { SpecialNotificationChannel } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
 import type { Notification } from '@/prisma-generated-pn-types'
 import type { ExpandedNotificationChannel, NotificationResult } from './types'
 import type { UserFiltered } from '@/services/users/types'
-import { SpecialNotificationChannel } from '@/prisma-generated-pn-types'
 
 const dispathMethod = {
     email: dispatchEmailNotifications,
diff --git a/src/services/ombul/ConfigVars.ts b/src/services/ombul/ConfigVars.ts
deleted file mode 100644
index 4a88524fe..000000000
--- a/src/services/ombul/ConfigVars.ts
+++ /dev/null
@@ -1 +0,0 @@
-export const maxOmbulFileSize = 10 * 1024 * 1024 // 10MB
diff --git a/src/services/ombul/actions.ts b/src/services/ombul/actions.ts
index 9794212a1..855aae707 100644
--- a/src/services/ombul/actions.ts
+++ b/src/services/ombul/actions.ts
@@ -7,6 +7,7 @@ export const destroyOmbulAction = makeAction(ombulOperations.destroy)
 export const readOmbulAction = makeAction(ombulOperations.read)
 export const readLatestOmbulAction = makeAction(ombulOperations.readLatest)
 export const readOmbulsAction = makeAction(ombulOperations.readAll)
-export const updateOmbulCmsCoverImageAction = makeAction(ombulOperations.updateCmsCoverImage)
+export const updateOmbulCoverImageAction = makeAction(ombulOperations.updateCoverImage)
 export const updateOmbulAction = makeAction(ombulOperations.update)
 export const updateOmbulFileAction = makeAction(ombulOperations.updateFile)
+export const updateOmbulParagraphContentAction = makeAction(ombulOperations.updateParagraphContent)
diff --git a/src/services/ombul/auth.ts b/src/services/ombul/auth.ts
index 241736dd0..4e109b58b 100644
--- a/src/services/ombul/auth.ts
+++ b/src/services/ombul/auth.ts
@@ -1,12 +1,15 @@
 import { RequirePermission } from '@/auth/authorizer/RequirePermission'
 
+export const ombulCoversImagePanelAuth = RequirePermission.staticFields({ permission: 'OMBUL_UPDATE' })
+
 export const ombulAuth = {
     read: RequirePermission.staticFields({ permission: 'OMBUL_READ' }),
     readAll: RequirePermission.staticFields({ permission: 'OMBUL_READ' }),
     readLatest: RequirePermission.staticFields({ permission: 'OMBUL_READ' }),
-    updateCmsCoverImage: RequirePermission.staticFields({ permission: 'OMBUL_UPDATE' }),
+    updateCoverImage: RequirePermission.staticFields({ permission: 'OMBUL_UPDATE' }),
     destroy: RequirePermission.staticFields({ permission: 'OMBUL_DESTROY' }),
     create: RequirePermission.staticFields({ permission: 'OMBUL_CREATE' }),
     update: RequirePermission.staticFields({ permission: 'OMBUL_UPDATE' }),
-    updateFile: RequirePermission.staticFields({ permission: 'OMBUL_UPDATE' })
+    updateFile: RequirePermission.staticFields({ permission: 'OMBUL_UPDATE' }),
+    updateParagraphContent: RequirePermission.staticFields({ permission: 'OMBUL_UPDATE' }),
 } as const
diff --git a/src/services/ombul/constants.ts b/src/services/ombul/constants.ts
new file mode 100644
index 000000000..d24980c4e
--- /dev/null
+++ b/src/services/ombul/constants.ts
@@ -0,0 +1,2 @@
+const ombulFileSizeMb = 10
+export const maxOmbulFileSize = ombulFileSizeMb * 1024 * 1024
diff --git a/src/services/ombul/ombulCoverCollection.ts b/src/services/ombul/ombulCoverCollection.ts
new file mode 100644
index 000000000..ffd2d7ad1
--- /dev/null
+++ b/src/services/ombul/ombulCoverCollection.ts
@@ -0,0 +1,16 @@
+import '@pn-server-only'
+import { ombulCoversImagePanelAuth } from './auth'
+import { implementSpecialCollection } from '@/services/images/subservice/special/implement'
+
+export const {
+    internalOperations: ombulCoverImageOperations,
+    specialCollectionPanelOperations: ombulCoversImagePanelOperations,
+    generateCollectionFromConfig: generateOmbulCoversCollectionFromConfig
+} = implementSpecialCollection({
+    special: 'OMBULCOVERS',
+    imagePanelAuther: ombulCoversImagePanelAuth.dynamicFields({}),
+    config: {
+        name: 'Ombulforsider',
+        description: 'Bilder brukt som forsider for ombul. Hvert bilde i denne samlingen tilhører nøyaktig én ombul.',
+    }
+})
diff --git a/src/services/ombul/operations.ts b/src/services/ombul/operations.ts
index fa3c2ed7a..7a603d452 100644
--- a/src/services/ombul/operations.ts
+++ b/src/services/ombul/operations.ts
@@ -1,16 +1,19 @@
 import '@pn-server-only'
 import { ombulAuth } from './auth'
 import { ombulSchemas } from './schemas'
+import { ombulCoverImageOperations } from './ombulCoverCollection'
 import { defineOperation } from '@/services/serviceOperation'
-import { cmsImageOperations } from '@/cms/images/operations'
 import { ServerError } from '@/services/error'
-import { destroyFile } from '@/services/store/destroyFile'
-import { createFile } from '@/services/store/createFile'
-import { readSpecialImageCollection } from '@/services/images/collections/read'
-import { imageOperations } from '@/services/images/operations'
+import { implementStore } from '@/lib/store/implementStore'
+import { cmsParagraphOperations } from '@/cms/paragraphs/operations'
 import { notificationOperations } from '@/services/notifications/operations'
 import { z } from 'zod'
 
+export const ombulStore = implementStore({
+    staticStorePrefix: 'ombul',
+    allowedExtentions: ['pdf'],
+})
+
 const read = defineOperation({
     authorizer: () => ombulAuth.read.dynamicFields({}),
     paramsSchema: z.union([
@@ -36,11 +39,8 @@ const read = defineOperation({
                 }
             },
             include: {
-                coverImage: {
-                    include: {
-                        image: true
-                    }
-                }
+                coverImage: true,
+                paragraph: true,
             }
         })
 })
@@ -54,11 +54,8 @@ const readAll = defineOperation({
                 { issueNumber: 'desc' },
             ],
             include: {
-                coverImage: {
-                    include: {
-                        image: true
-                    }
-                }
+                coverImage: true,
+                paragraph: true,
             }
         })
 })
@@ -77,19 +74,41 @@ const readLatest = defineOperation({
     }
 })
 
-const updateCmsCoverImage = cmsImageOperations.update.implement({
-    implementationParamsSchema: z.object({
+const updateCoverImage = defineOperation({
+    authorizer: () => ombulAuth.updateCoverImage.dynamicFields({}),
+    paramsSchema: z.object({
         ombulId: z.number()
     }),
-    authorizer: () => ombulAuth.updateCmsCoverImage.dynamicFields({}),
-    ownershipCheck: async ({ params, implementationParams }) => {
-        const ombul = await read({ params: { id: implementationParams.ombulId } })
-        return ombul.coverImage.id === params.cmsImageId
-    }
+    dataSchema: ombulSchemas.updateCoverImage,
+    opensTransaction: true,
+    operation: ({ prisma, params, data }) =>
+        prisma.$transaction(async tx => {
+            const existingOmbul = await tx.ombul.findUniqueOrThrow({
+                where: { id: params.ombulId },
+            })
+
+            const newImage = await ombulCoverImageOperations.uploadImage.internalCall({ prisma: tx, data })
+
+            await tx.ombul.update({
+                where: { id: existingOmbul.id },
+                data: {
+                    coverImage: {
+                        connect: { id: newImage.id }
+                    }
+                }
+            })
+
+            await ombulCoverImageOperations.destroyImage.internalCall({
+                prisma: tx,
+                params: { imageId: existingOmbul.coverImageId }
+            })
+
+            return newImage
+        }, { timeout: 20000 })
 })
 
 /**
- * A function to destroy an ombul, also deletes the file from the store, and the cmsImage on cascade
+ * A function to destroy an ombul, also deletes the file from the store, and the cover image
  * @param id - The id of the ombul to destroy
  * @returns
  */
@@ -102,18 +121,11 @@ const destroy = defineOperation({
         const ombul = await prisma.ombul.findUnique({
             where: {
                 id: params.id
-            },
-            include: {
-                coverImage: {
-                    include: {
-                        image: true
-                    }
-                }
             }
         })
         if (!ombul) throw new ServerError('NOT FOUND', 'Ombul ikke funnet.')
 
-        await destroyFile('ombul', ombul.fsLocation)
+        await ombulStore.destroyFile(ombul.fsLocation)
 
         await prisma.ombul.delete({
             where: {
@@ -121,6 +133,13 @@ const destroy = defineOperation({
             }
         })
 
+        await ombulCoverImageOperations.destroyImage.internalCall({
+            params: { imageId: ombul.coverImageId }
+        })
+        await cmsParagraphOperations.destroy.internalCall({
+            params: { paragraphId: ombul.paragraphId }
+        })
+
         return ombul
     }
 })
@@ -128,73 +147,77 @@ const destroy = defineOperation({
 const create = defineOperation({
     authorizer: () => ombulAuth.create.dynamicFields({}),
     dataSchema: ombulSchemas.create,
-    operation: async ({ data, prisma }) => {
-        // Get the latest issue number if not provided
-        const { ombulCoverImage, ombulFile, year, issueNumber: givenIssueNumber, ...restOfConf } = data
+    opensTransaction: true,
+    operation: ({ data, prisma }) =>
+        prisma.$transaction(async tx => {
+            // Get the latest issue number if not provided
+            const { ombulCoverImage, ombulFile, year, issueNumber: givenIssueNumber, ...restOfConf } = data
 
-        let latestIssueNumber = 1
-        if (!givenIssueNumber) {
-            const ombul = await prisma.ombul.findFirst({
-                where: {
-                    year
-                },
-                orderBy: {
-                    issueNumber: 'desc'
+            let latestIssueNumber = 1
+            if (!givenIssueNumber) {
+                const ombul = await tx.ombul.findFirst({
+                    where: {
+                        year
+                    },
+                    orderBy: {
+                        issueNumber: 'desc'
+                    }
+                })
+                if (ombul) {
+                    latestIssueNumber = ombul.issueNumber + 1
                 }
-            })
-            if (ombul) {
-                latestIssueNumber = ombul.issueNumber + 1
             }
-        }
-        const issueNumber = givenIssueNumber || latestIssueNumber
+            const issueNumber = givenIssueNumber || latestIssueNumber
 
-        //upload the file to the store volume
-        const ret = await createFile(ombulFile, 'ombul', ['pdf'])
-        const fsLocation = ret.fsLocation
+            const { fsLocation } = await ombulStore.createFile(ombulFile, ['pdf'])
 
-        // create coverimage
-        const ombulCoverCollection = await readSpecialImageCollection('OMBULCOVERS')
-        const coverImage = await imageOperations.create({
-            params: {
-                collectionId: ombulCoverCollection.id,
-            },
-            data: {
-                name: fsLocation,
-                alt: `cover of ${restOfConf.name}`,
-                file: ombulCoverImage,
-            },
-        })
+            const coverImage = await ombulCoverImageOperations.uploadImage.internalCall({
+                prisma: tx,
+                data: {
+                    imageFile: ombulCoverImage,
+                    imageAlt: `Forsiden til ${restOfConf.name}`,
+                }
+            })
 
-        const cmsCoverImage = await cmsImageOperations.create.internalCall({
-            data: { imageId: coverImage.id },
-        })
+            // The paragraph is always created empty - it is filled in afterwards through
+            // ombulOperations.updateParagraphContent.
+            const paragraph = await cmsParagraphOperations.create.internalCall({
+                prisma: tx,
+                data: {},
+                operationImplementationFields: { special: null }
+            })
 
-        const ombul = await prisma.ombul.create({
-            data: {
-                ...restOfConf,
-                year,
-                issueNumber,
-                coverImage: {
-                    connect: {
-                        id: cmsCoverImage.id
-                    }
-                },
-                fsLocation,
-            }
-        })
+            const ombul = await tx.ombul.create({
+                data: {
+                    ...restOfConf,
+                    year,
+                    issueNumber,
+                    coverImage: {
+                        connect: {
+                            id: coverImage.id
+                        }
+                    },
+                    paragraph: {
+                        connect: {
+                            id: paragraph.id
+                        }
+                    },
+                    fsLocation,
+                }
+            })
 
-        notificationOperations.createSpecial.internalCall({
-            params: {
-                special: 'NEW_OMBUL',
-            },
-            data: {
-                title: 'Ny ombul',
-                message: `Ny ombul er ute! ${ombul.name}`,
-            },
-        })
+            notificationOperations.createSpecial.internalCall({
+                params: {
+                    special: 'NEW_OMBUL',
+                },
+                data: {
+                    title: 'Ny ombul',
+                    message: `Ny ombul er ute! ${ombul.name}`,
+                },
+            })
 
-        return ombul
-    }
+            return ombul
+        }, { timeout: 20000 })
 })
 
 const update = defineOperation({
@@ -210,11 +233,8 @@ const update = defineOperation({
             },
             data,
             include: {
-                coverImage: {
-                    include: {
-                        image: true
-                    }
-                }
+                coverImage: true,
+                paragraph: true,
             }
         })
 })
@@ -226,8 +246,7 @@ const updateFile = defineOperation({
         id: z.number()
     }),
     operation: async ({ data, prisma, params }) => {
-        const ret = await createFile(data.ombulFile, 'ombul', ['pdf'])
-        const fsLocation = ret.fsLocation
+        const { fsLocation } = await ombulStore.createFile(data.ombulFile, ['pdf'])
 
         const ombul = await prisma.ombul.findUnique({
             where: {
@@ -246,26 +265,36 @@ const updateFile = defineOperation({
                 fsLocation
             },
             include: {
-                coverImage: {
-                    include: {
-                        image: true
-                    }
-                }
+                coverImage: true,
+                paragraph: true,
             }
         })
 
         //delete the old file
-        await destroyFile('ombul', oldFsLocation)
+        await ombulStore.destroyFile(oldFsLocation)
 
         return ombulUpdated
     }
 })
 
+const updateParagraphContent = cmsParagraphOperations.updateContent.implement({
+    implementationParamsSchema: z.object({
+        ombulId: z.number()
+    }),
+    authorizer: () => ombulAuth.updateParagraphContent.dynamicFields({}),
+    ownershipCheck: async ({ implementationParams, params }) =>
+        (await read({
+            params: { id: implementationParams.ombulId },
+            bypassAuth: true
+        })).paragraph.id === params.paragraphId
+})
+
 export const ombulOperations = {
     read,
     readAll,
     readLatest,
-    updateCmsCoverImage,
+    updateCoverImage,
+    updateParagraphContent,
     destroy,
     create,
     update,
diff --git a/src/services/ombul/schemas.ts b/src/services/ombul/schemas.ts
index 82f0145bd..25334af3b 100644
--- a/src/services/ombul/schemas.ts
+++ b/src/services/ombul/schemas.ts
@@ -1,5 +1,5 @@
-import { imageFileSchema } from '@/services/images/schemas'
-import { maxOmbulFileSize } from '@/services/ombul/ConfigVars'
+import { imageFileSchema, imageSchemas } from '@/services/images/subservice/schemas'
+import { maxOmbulFileSize } from '@/services/ombul/constants'
 import { z } from 'zod'
 import { File } from 'node:buffer'
 
@@ -34,5 +34,6 @@ export const ombulSchemas = {
     }),
     updateFile: baseSchema.pick({
         ombulFile: true
-    })
-}
+    }),
+    updateCoverImage: imageSchemas.uploadImage,
+} as const
diff --git a/src/services/ombul/types.ts b/src/services/ombul/types.ts
index 83323fb46..b8adeec5c 100644
--- a/src/services/ombul/types.ts
+++ b/src/services/ombul/types.ts
@@ -1,9 +1,8 @@
-import type { CmsImage, Image, Ombul } from '@/prisma-generated-pn-types'
+import type { CmsParagraph, Image, Ombul } from '@/prisma-generated-pn-types'
 
 export type ExpandedOmbul = Ombul & {
-    coverImage: CmsImage & {
-        image: Image | null
-    }
+    coverImage: Image
+    paragraph: CmsParagraph
 }
 
 type OptionalFields = 'year' | 'issueNumber'
diff --git a/src/services/omegaOrder/actions.ts b/src/services/omegaOrder/actions.ts
index b32931bfa..d5376f772 100644
--- a/src/services/omegaOrder/actions.ts
+++ b/src/services/omegaOrder/actions.ts
@@ -1,14 +1,7 @@
 'use server'
-import { safeServerCall } from '@/services/actionError'
-import { createOmegaOrder } from '@/services/omegaOrder/create'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
-import type { ActionReturn } from '@/services/actionTypes'
-import type { OmegaOrder } from '@/prisma-generated-pn-types'
+import { omegaOrderOperations } from './operations'
+import { makeAction } from '@/services/serverAction'
 
-export async function createOmegaOrderAction(): Promise<ActionReturn<void>> {
-    return safeServerCall(createOmegaOrder)
-}
-
-export async function readCurrentOmegaOrderAction(): Promise<ActionReturn<OmegaOrder>> {
-    return await safeServerCall(() => readCurrentOmegaOrder())
-}
+export const createOmegaOrderAction = makeAction(omegaOrderOperations.create)
+export const readCurrentOmegaOrderAction = makeAction(omegaOrderOperations.readCurrent)
+export const readAllOmegaOrdersAction = makeAction(omegaOrderOperations.readAll)
diff --git a/src/services/omegaOrder/auth.ts b/src/services/omegaOrder/auth.ts
index 33dc9688f..009a09b67 100644
--- a/src/services/omegaOrder/auth.ts
+++ b/src/services/omegaOrder/auth.ts
@@ -1,7 +1,6 @@
 import { RequirePermission } from '@/auth/authorizer/RequirePermission'
 
 export const omegaOrderAuth = {
-    //TODO: use authorizers when refactoring to operations.
     create: RequirePermission.staticFields({ permission: 'OMEGA_ORDER_CREATE' }),
     readCurrent: RequirePermission.staticFields({ permission: 'OMEGA_ORDER_READ' }),
     readAll: RequirePermission.staticFields({ permission: 'OMEGA_ORDER_READ' })
diff --git a/src/services/omegaOrder/ConfigVars.ts b/src/services/omegaOrder/constants.ts
similarity index 88%
rename from src/services/omegaOrder/ConfigVars.ts
rename to src/services/omegaOrder/constants.ts
index 8de5e0f32..844dacf2d 100644
--- a/src/services/omegaOrder/ConfigVars.ts
+++ b/src/services/omegaOrder/constants.ts
@@ -11,4 +11,4 @@ export const AutomaticallyIncreaseOrder = {
     MANUAL_GROUP: false,
     OMEGA_MEMBERSHIP_GROUP: true,
     STUDY_PROGRAMME: true,
-} as const satisfies { [K in GroupType]: boolean }
+} as const satisfies Record<GroupType, boolean>
diff --git a/src/services/omegaOrder/create.ts b/src/services/omegaOrder/create.ts
deleted file mode 100644
index 837cb23f9..000000000
--- a/src/services/omegaOrder/create.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import '@pn-server-only'
-import { readCurrentOmegaOrder } from './read'
-import { AutomaticallyIncreaseOrder } from './ConfigVars'
-import { prismaCall } from '@/services/prismaCall'
-import { prisma } from '@/prisma-pn-client-instance'
-import type { PrismaPromise } from '@prisma/client/runtime/client'
-import { GroupType } from '@/prisma-generated-pn-types'
-
-/**
- * This function will increment omega, it creates a new order.
- * It will also automatically increment some grouptypes.
- * It is made sure that all groups are on current order or retired before incrementing.
- */
-export async function createOmegaOrder(): Promise<void> {
-    const { order: oldOrder } = await readCurrentOmegaOrder()
-
-    //TODO: Check that all groups are on current (old) order or retired before incrementing
-    const newOrder = oldOrder + 1
-
-    const updatePromises = Object.values(GroupType).reduce((acc, type) => {
-        if (!AutomaticallyIncreaseOrder[type]) return acc
-        acc.push(
-            prisma.group.updateMany({
-                where: {
-                    order: oldOrder,
-                    groupType: type
-                    //TODO: Not retired
-                },
-                data: {
-                    order: newOrder
-                }
-            })
-        )
-        return acc
-    }, [] as PrismaPromise<unknown>[])
-
-    await prismaCall(() => prisma.$transaction([
-        prisma.omegaOrder.create({
-            data: {
-                order: newOrder
-            }
-        }),
-        ...updatePromises
-    ]))
-}
diff --git a/src/services/omegaOrder/operations.ts b/src/services/omegaOrder/operations.ts
new file mode 100644
index 000000000..07784853d
--- /dev/null
+++ b/src/services/omegaOrder/operations.ts
@@ -0,0 +1,74 @@
+import '@pn-server-only'
+import { omegaOrderAuth } from './auth'
+import { AutomaticallyIncreaseOrder } from './constants'
+import { defineOperation } from '@/services/serviceOperation'
+import { ServerError } from '@/services/error'
+import { GroupType } from '@/prisma-generated-pn/client'
+import type { PrismaPromise } from '@prisma/client/runtime/client'
+
+export const omegaOrderOperations = {
+    /**
+     * This function will increment omega; it creates a new order.
+     * It will also automatically increment the order of some grouptypes.
+     * The group types not automatically incremented,
+     * it is made sure that all (non retired) groups are on current order before incrementing.
+     */
+    create: defineOperation({
+        opensTransaction: true,
+        authorizer: () => omegaOrderAuth.create.dynamicFields({}),
+        operation: async ({ prisma }) => {
+            const { order: oldOrder } = await omegaOrderOperations.readCurrent({})
+
+            //TODO: Check that all groups are on current (old) order or retired before incrementing
+            const newOrder = oldOrder + 1
+            const updatePromises = Object.values(GroupType).reduce((acc, type) => {
+                if (!AutomaticallyIncreaseOrder[type]) return acc
+                acc.push(
+                    prisma.group.updateMany({
+                        where: {
+                            order: {
+                                lt: newOrder
+                            },
+                            groupType: type
+                            //TODO: Not retired
+                        },
+                        data: {
+                            order: newOrder
+                        }
+                    })
+                )
+                return acc
+            }, [] as PrismaPromise<unknown>[])
+
+            await prisma.$transaction([
+                prisma.omegaOrder.create({
+                    data: {
+                        order: newOrder
+                    }
+                }),
+                ...updatePromises
+            ])
+        }
+    }),
+    readCurrent: defineOperation({
+        authorizer: () => omegaOrderAuth.readCurrent.dynamicFields({}),
+        operation: async ({ prisma }) => {
+            const omegaOrder = await prisma.omegaOrder.findFirst({
+                orderBy: {
+                    order: 'desc'
+                }
+            })
+            if (!omegaOrder) throw new ServerError('NOT FOUND', 'Current Omega Order not found')
+            return omegaOrder
+        }
+    }),
+    readAll: defineOperation({
+        authorizer: () => omegaOrderAuth.readAll.dynamicFields({}),
+        operation: async ({ prisma }) =>
+            await prisma.omegaOrder.findMany({
+                orderBy: {
+                    order: 'desc'
+                }
+            })
+    }),
+} as const
diff --git a/src/services/omegaOrder/read.ts b/src/services/omegaOrder/read.ts
deleted file mode 100644
index 8ff92d2be..000000000
--- a/src/services/omegaOrder/read.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-'use server'
-import { ServerError } from '@/services/error'
-import { prismaCall } from '@/services/prismaCall'
-import { prisma } from '@/prisma-pn-client-instance'
-import type { OmegaOrder } from '@/prisma-generated-pn-types'
-
-/**
- * A function to read the current OmegaOrder. That is the last OmegaOrder created, with
- * heighst order.
- * @returns - the current OmegaOrder
- */
-export async function readCurrentOmegaOrder(): Promise<OmegaOrder> {
-    const omegaOrder = await prismaCall(() => prisma.omegaOrder.findFirst({
-        orderBy: {
-            order: 'desc'
-        }
-    }))
-    if (!omegaOrder) throw new ServerError('NOT FOUND', 'Current OmegaOrder not found')
-    return omegaOrder
-}
-
-export async function readOmegaOrders(): Promise<OmegaOrder[]> {
-    return await prismaCall(() => prisma.omegaOrder.findMany())
-}
diff --git a/src/services/omegaid/actions.ts b/src/services/omegaid/actions.ts
index cacd37622..15142c207 100644
--- a/src/services/omegaid/actions.ts
+++ b/src/services/omegaid/actions.ts
@@ -1,31 +1,6 @@
 'use server'
-import { ServerSession } from '@/auth/session/ServerSession'
-import { createActionError } from '@/services/actionError'
-import { ServerError } from '@/services/error'
-import { generateOmegaId } from '@/services/omegaid/generate'
-import type { ActionReturn } from '@/services/actionTypes'
+import { omegaIdOperations } from './operations'
+import { makeAction } from '@/services/serverAction'
 
-export async function generateOmegaIdAction(): Promise<ActionReturn<string>> {
-    //TODO: when changed to makeAction + operation it should take in a params: userId and
-    //then auth on userId using the RequireUserId authorizer.
-    const user = (await ServerSession.fromNextAuth()).user
-    if (!user) return createActionError('NOT FOUND', 'User not found')
-
-    const token = generateOmegaId(user)
-
-    return {
-        success: true,
-        data: token,
-    }
-}
-
-//Suffix with ...Action when refactoring to operations.
-export async function readOmegaJWTPublicKey(): Promise<string> {
-    const key = process.env.JWT_PUBLIC_KEY
-
-    if (!key) {
-        throw new ServerError('INVALID CONFIGURATION', 'The JWT_PUBLIC_KEY must be set')
-    }
-
-    return key
-}
+export const generateOmegaIdAction = makeAction(omegaIdOperations.generate)
+export const readOmegaJWTPublicKeyAction = makeAction(omegaIdOperations.readPublicKey)
diff --git a/src/services/omegaid/auth.ts b/src/services/omegaid/auth.ts
new file mode 100644
index 000000000..174d35d1e
--- /dev/null
+++ b/src/services/omegaid/auth.ts
@@ -0,0 +1,7 @@
+import { RequireUserId } from '@/auth/authorizer/RequireUserId'
+import { RequireNothing } from '@/auth/authorizer/RequireNothing'
+
+export const omegaIdAuth = {
+    generate: RequireUserId.staticFields({}),
+    readPublicKey: RequireNothing.staticFields({}),
+} as const
diff --git a/src/services/omegaid/compress.ts b/src/services/omegaid/compress.ts
index 97e6989e9..c2b4130d4 100644
--- a/src/services/omegaid/compress.ts
+++ b/src/services/omegaid/compress.ts
@@ -2,9 +2,6 @@ import { JWT_ISSUER } from '@/lib/jwt/constants'
 import type { ActionReturn, ActionError } from '@/services/actionTypes'
 import type { OmegaIdJWT } from '@/services/omegaid/types'
 
-/**
- * This file handles compression and decompression of omegaID
- */
 export function compressOmegaId(token: string): string {
     const parts = token.split('.')
     const payloadCompressed = compressPayload(parts[1])
diff --git a/src/services/omegaid/ConfigVars.ts b/src/services/omegaid/constants.ts
similarity index 100%
rename from src/services/omegaid/ConfigVars.ts
rename to src/services/omegaid/constants.ts
diff --git a/src/services/omegaid/generate.ts b/src/services/omegaid/generate.ts
deleted file mode 100644
index 275ea246a..000000000
--- a/src/services/omegaid/generate.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import '@pn-server-only'
-import { OmegaIdExpiryTime } from './ConfigVars'
-import { generateJWT } from '@/jwt/jwt'
-import type { OmegaId } from './types'
-
-
-export function generateOmegaId(user: OmegaId): string {
-    const payload = {
-        sub: user.id,
-    }
-
-    return generateJWT('omegaid', payload, OmegaIdExpiryTime, true)
-}
diff --git a/src/services/omegaid/operations.ts b/src/services/omegaid/operations.ts
new file mode 100644
index 000000000..e1142ecc1
--- /dev/null
+++ b/src/services/omegaid/operations.ts
@@ -0,0 +1,26 @@
+import '@pn-server-only'
+import { omegaIdAuth } from './auth'
+import { omegaIdSchemas } from './schemas'
+import { OmegaIdExpiryTime } from './constants'
+import { defineOperation } from '@/services/serviceOperation'
+import { generateJWT } from '@/jwt/jwt'
+import { ServerError } from '@/services/error'
+
+export const omegaIdOperations = {
+    generate: defineOperation({
+        authorizer: ({ params }) => omegaIdAuth.generate.dynamicFields({ userId: params.userId }),
+        paramsSchema: omegaIdSchemas.generate,
+        operation: ({ params }) =>
+            generateJWT('omegaid', { sub: params.userId }, OmegaIdExpiryTime, true),
+    }),
+    readPublicKey: defineOperation({
+        authorizer: () => omegaIdAuth.readPublicKey.dynamicFields({}),
+        operation: () => {
+            const key = process.env.JWT_PUBLIC_KEY
+            if (!key) {
+                throw new ServerError('INVALID CONFIGURATION', 'The JWT_PUBLIC_KEY must be set')
+            }
+            return key
+        },
+    }),
+} as const
diff --git a/src/services/omegaid/schemas.ts b/src/services/omegaid/schemas.ts
new file mode 100644
index 000000000..78162b7dd
--- /dev/null
+++ b/src/services/omegaid/schemas.ts
@@ -0,0 +1,7 @@
+import { z } from 'zod'
+
+export const omegaIdSchemas = {
+    generate: z.object({
+        userId: z.number(),
+    }),
+}
diff --git a/src/services/omegaid/types.ts b/src/services/omegaid/types.ts
index f9cabef89..280cd60fb 100644
--- a/src/services/omegaid/types.ts
+++ b/src/services/omegaid/types.ts
@@ -1,7 +1,5 @@
 import type { UserFiltered } from '@/services/users/types'
 
-export type OmegaId = Pick<UserFiltered, 'id'>
-
 export type OmegaIdJWT = {
     iat: number,
     exp: number,
diff --git a/src/services/omegaquotes/operations.ts b/src/services/omegaquotes/operations.ts
index 9be782853..25a77cff2 100644
--- a/src/services/omegaquotes/operations.ts
+++ b/src/services/omegaquotes/operations.ts
@@ -1,7 +1,6 @@
 import { omegaQuotesAuth } from './auth'
 import { omegaquoteSchemas } from './schemas'
 import { omegaQuoteFilterSelection } from './constants'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { notificationOperations } from '@/services/notifications/operations'
 import { defineOperation } from '@/services/serviceOperation'
 import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
@@ -39,13 +38,7 @@ export const omegaquoteOperations = {
         }
     }),
     readPage: defineOperation({
-        paramsSchema: readPageInputSchemaObject(
-            z.number(),
-            z.object({
-                id: z.number(),
-            }),
-            z.undefined()
-        ),
+        paramsSchema: omegaquoteSchemas.readPage,
         authorizer: () => omegaQuotesAuth.readPage.dynamicFields({}),
         operation: async ({ prisma, params }) =>
             prisma.omegaQuote.findMany({
diff --git a/src/services/omegaquotes/schemas.ts b/src/services/omegaquotes/schemas.ts
index c4649917b..2d810a91d 100644
--- a/src/services/omegaquotes/schemas.ts
+++ b/src/services/omegaquotes/schemas.ts
@@ -1,3 +1,4 @@
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { z } from 'zod'
 
 export const baseSchemas = z.object({
@@ -9,6 +10,13 @@ export const omegaquoteSchemas = {
     create: baseSchemas.pick({
         quote: true,
         author: true,
-    })
+    }),
+    readPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number(),
+        }),
+        z.undefined()
+    ),
 }
 
diff --git a/src/services/omegaquotes/types.ts b/src/services/omegaquotes/types.ts
index 076fbbed3..1964a1ee6 100644
--- a/src/services/omegaquotes/types.ts
+++ b/src/services/omegaquotes/types.ts
@@ -1,8 +1,8 @@
 import type { omegaQuoteFieldsToExpose } from './constants'
+import type { omegaquoteSchemas } from './schemas'
+import type { InferPagingCursor } from '@/lib/paging/schema'
 import type { OmegaQuote } from '@/prisma-generated-pn-types'
 
 export type OmegaquoteFiltered = Pick<OmegaQuote, typeof omegaQuoteFieldsToExpose[number]>
 
-export type OmegaquoteCursor = {
-    id: number
-}
+export type OmegaquoteCursor = InferPagingCursor<typeof omegaquoteSchemas.readPage>
diff --git a/src/services/permissions/constants.ts b/src/services/permissions/constants.ts
index 82b79e04e..136515d8a 100644
--- a/src/services/permissions/constants.ts
+++ b/src/services/permissions/constants.ts
@@ -208,7 +208,9 @@ export const permissionConfig = {
     },
     IMAGE_ADMIN: {
         name: 'Bildeadministrator',
-        description: 'kan administrere bilder',
+        description: `
+            Kan administrere alle bilder, uavhengig av synelighet - dette er altså en bypass.
+        `,
         category: 'bilder',
     },
     IMAGE_COLLECTION_CREATE: {
@@ -491,8 +493,18 @@ export const permissionConfig = {
     APPLICATION_WRITE: {
         name: 'Søknadsskriver',
         description: `
-            Kan skrive søknader til alle aktive søknadsperioder. 
+            Kan skrive søknader til alle aktive søknadsperioder.
         `,
         category: 'applications',
     },
+    NEWS_CREATE: {
+        name: 'Lage nyhetsartikkel',
+        description: 'kan lage nyhetsartikler',
+        category: 'public',
+    },
+    NEWS_ADMIN: {
+        name: 'Nyhetsadministrator',
+        description: 'kan administrere alle nyhetsartikler uavhengig av synlighet',
+        category: 'public',
+    },
 } satisfies Record<Permission, PermissionInfo>
diff --git a/src/services/permissions/operations.ts b/src/services/permissions/operations.ts
index 8040925a5..8d81cac3d 100644
--- a/src/services/permissions/operations.ts
+++ b/src/services/permissions/operations.ts
@@ -3,9 +3,10 @@ import { permissionsAuth } from './auth'
 import { defineOperation, defineSubOperation } from '@/services/serviceOperation'
 import { invalidateAllUserSessionData, invalidateManyUserSessionData } from '@/services/auth/invalidateSession'
 import { groupsWithRelationsIncluder } from '@/services/groups/constants'
-import { checkGroupValidity, inferGroupName } from '@/services/groups/operations'
-import { z } from 'zod'
+import { assertGroupValidity } from '@/services/groups/operations'
+import { inferGroupName } from '@/lib/groups/inferGroupName'
 import { Permission } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 
 export const permissionOperations = {
@@ -71,7 +72,7 @@ export const permissionOperations = {
 
             return groupsPermission.map(group => ({
                 ...group,
-                name: inferGroupName(checkGroupValidity(group)),
+                name: inferGroupName(assertGroupValidity(group)),
                 permissions: group.permissions.map(permission => permission.permission)
             }))
         }
diff --git a/src/services/prismaCall.ts b/src/services/prismaCall.ts
index 1240a7ecd..ba9b9b350 100644
--- a/src/services/prismaCall.ts
+++ b/src/services/prismaCall.ts
@@ -14,7 +14,7 @@ const errorMessagesMap: { [key: string]: [ServerErrorCode, string] } = {
  * THIS FUNCTION HAS BEEN DEPRECATED IN FAVOR OF prismaErrorWrapper
  *
  * @deprecated
- * @param call - A async prisma function to call.
+ * @param call - An async prisma function to call.
  * @returns
  */
 export async function prismaCall<T>(call: () => T | Promise<T>): Promise<T> {
@@ -25,7 +25,16 @@ export async function prismaCall<T>(call: () => T | Promise<T>): Promise<T> {
             throw error
         }
 
-        if (process.env.NODE_ENV !== 'test') {
+        //TODO: Make logging of errors much better
+        // A P2025 (not found) during seeding is expected self-heal noise - upsert() treats it as
+        // "doesn't exist yet, create it" - so it's silenced here instead of printing a scary raw
+        // Prisma error for something that isn't actually a failure. Other errors still log even
+        // during seeding, since those are real problems.
+        const isSeedExpectedNotFound = process.env.SEED === 'true'
+            && error instanceof PrismaClientKnownRequestError
+            && error.code === 'P2025'
+
+        if (process.env.NODE_ENV !== 'test' && !isSeedExpectedNotFound) {
             console.error(error) // TODO: Add the details from the error to the ServerError
         }
 
diff --git a/src/services/publicArticles/actions.ts b/src/services/publicArticles/actions.ts
index b7a4bea4b..40c8bf657 100644
--- a/src/services/publicArticles/actions.ts
+++ b/src/services/publicArticles/actions.ts
@@ -5,7 +5,6 @@ import { makeAction } from '@/services/serverAction'
 export const readPublicArticle = makeAction(
     publicArticleOperations.read
 )
-
 export const updatePublicArticleAction = makeAction(
     publicArticleOperations.update.update
 )
diff --git a/src/services/screens/pages/create.ts b/src/services/screens/pages/create.ts
index 0ce81a683..dba6f5504 100644
--- a/src/services/screens/pages/create.ts
+++ b/src/services/screens/pages/create.ts
@@ -8,8 +8,14 @@ import type { ScreenPage } from '@/prisma-generated-pn-types'
 
 export async function createPage(rawdata: CreatePageTypes['Detailed']): Promise<ScreenPage> {
     const { name } = createPageValidation.detailedValidate(rawdata)
-    const cmsImage = await cmsImageOperations.create.internalCall({ data: {} })
-    const cmsParagraph = await cmsParagraphOperations.create.internalCall({ data: {} })
+    const cmsImage = await cmsImageOperations.create.internalCall({
+        data: {},
+        operationImplementationFields: { special: null }
+    })
+    const cmsParagraph = await cmsParagraphOperations.create.internalCall({
+        data: {},
+        operationImplementationFields: { special: null }
+    })
 
     return await prismaCall(() => prisma.screenPage.create({
         data: {
diff --git a/src/services/screens/pages/validation.ts b/src/services/screens/pages/validation.ts
index c724e12bb..4f6c5da55 100644
--- a/src/services/screens/pages/validation.ts
+++ b/src/services/screens/pages/validation.ts
@@ -1,7 +1,7 @@
 import { ValidationBase } from '@/services/Validation'
+import { ScreenPageType } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
 import type { ValidationTypes } from '@/services/Validation'
-import { ScreenPageType } from '@/prisma-generated-pn-types'
 
 const basePageValidation = new ValidationBase({
     type: {
diff --git a/src/services/screens/validation.ts b/src/services/screens/validation.ts
index 66d69dae0..603682ef0 100644
--- a/src/services/screens/validation.ts
+++ b/src/services/screens/validation.ts
@@ -1,8 +1,8 @@
 import { ValidationBase } from '@/services/Validation'
+import { ScreenOrientation } from '@/prisma-generated-pn-types'
 import { z } from 'zod'
 import { zfd } from 'zod-form-data'
 import type { ValidationTypes } from '@/services/Validation'
-import { ScreenOrientation } from '@/prisma-generated-pn-types'
 
 const baseScreenValidation = new ValidationBase({
     type: {
diff --git a/src/services/serviceOperation.ts b/src/services/serviceOperation.ts
index facb25d72..2301428b4 100644
--- a/src/services/serviceOperation.ts
+++ b/src/services/serviceOperation.ts
@@ -122,6 +122,24 @@ export type OwnershipCheck<
     args: ArgsAuthGetterAndOwnershipCheck<OpensTransaction, ParamsSchema, DataSchema, ImplementationParamsSchema>
 ) => boolean | Promise<boolean>
 
+/**
+ * A hook an implementation may run right before the operation itself. It gets the same arguments as
+ * the authorizer and the ownership check, so it can read whatever it needs - including from the
+ * database - and throw to abort the call.
+ *
+ * Note that one should use the ownership chack check for any checks conserning if the
+ * implementer service owns the resource from the sub service in question. This hook is for
+ * additional checks that are not covered by the ownership check.
+ */
+export type BeforeRun<
+    OpensTransaction extends boolean,
+    ParamsSchema extends z.ZodTypeAny | undefined,
+    DataSchema extends z.ZodTypeAny | undefined,
+    ImplementationParamsSchema extends z.ZodTypeAny | undefined,
+> = (
+    args: ArgsAuthGetterAndOwnershipCheck<OpensTransaction, ParamsSchema, DataSchema, ImplementationParamsSchema>
+) => void | Promise<void>
+
 export type ServiceOperationImplementationConfigInternalCall<
     ImplementationParamsSchema extends z.ZodTypeAny | undefined,
     ParamsSchemaImplementationFields extends object | undefined,
@@ -165,6 +183,7 @@ export type ServiceOperationImplementationConfig<
         OpensTransaction, ParamsSchema, DataSchema, ImplementationParamsSchema, PrismaWhereFilter | undefined
     >,
     ownershipCheck: OwnershipCheck<OpensTransaction, ParamsSchema, DataSchema, ImplementationParamsSchema>,
+    beforeRun?: BeforeRun<OpensTransaction, ParamsSchema, DataSchema, ImplementationParamsSchema>,
 }
 
 /**
@@ -173,10 +192,18 @@ export type ServiceOperationImplementationConfig<
  * inside a transaction. In that case, the prisma client is a Prisma.TransactionClient.
  * The caveat is that a Prisma.TransactionClient can't be used to open a new transaction
  * so if the service operation opens a transaction, the prisma client can only be a PrismaClient.
+ *
+ * The check is written as [OpensTransaction] extends [true] rather than the bare
+ * OpensTransaction extends true so that it does not distribute over a union. An operation that
+ * does not declare opensTransaction gets `boolean` here, and a distributing conditional turns that
+ * into PrismaClient | Prisma.TransactionClient - a union whose deeply generic method signatures tsc
+ * has to reconcile at every call site, which reaches the instantiation depth limit on some models.
+ * Not distributing resolves `boolean` to Prisma.TransactionClient, which is what an operation that
+ * has not claimed it opens a transaction is entitled to anyway.
  */
 export type PrismaPossibleTransaction<
     OpensTransaction extends boolean
-> = OpensTransaction extends true ? PrismaClient : Prisma.TransactionClient
+> = [OpensTransaction] extends [true] ? PrismaClient : Prisma.TransactionClient
 
 /**
  * In addition to custom data arguments, every service operation receives a context object.
@@ -196,6 +223,7 @@ export type ServiceOperationContext<OpensTransaction extends boolean = boolean>
  */
 const asyncLocalStorage = new AsyncLocalStorage<ServiceOperationContext>()
 
+
 /**
  * Runs a callback with a specific service operation context.
  *
@@ -203,14 +231,29 @@ const asyncLocalStorage = new AsyncLocalStorage<ServiceOperationContext>()
  * @param callback The callback to run with the context.
  * @returns The return value of the callback.
  */
-function withContext<T>(
-    contextOverride: Partial<ServiceOperationContext>,
-    callback: (context: ServiceOperationContext) => T,
+export function withServiceContext<T, OpensTransaction extends boolean>(
+    contextOverride: Partial<ServiceOperationContext<OpensTransaction>>,
+    opensTransaction: OpensTransaction | undefined,
+    callback: (context: ServiceOperationContext<OpensTransaction>) => T,
 ): T {
     const localContext = asyncLocalStorage.getStore()
 
-    const context: ServiceOperationContext = {
-        prisma: contextOverride.prisma ?? localContext?.prisma ?? globalPrisma,
+    const isAppropriateClient = (
+        prisma: PrismaClient | Prisma.TransactionClient
+    ): prisma is PrismaPossibleTransaction<OpensTransaction> =>
+        !opensTransaction || '$transaction' in prisma
+
+    const prisma = contextOverride.prisma ?? localContext?.prisma ?? globalPrisma
+    if (!isAppropriateClient(prisma)) {
+        throw new Smorekopp(
+            'SERVER ERROR',
+            `Service operation is configured to open a transaction,
+            but the prisma client in the context is a transaction client.`
+        )
+    }
+
+    const context: ServiceOperationContext<OpensTransaction> = {
+        prisma,
         session: contextOverride.session ?? localContext?.session ?? Session.empty(),
         bypassAuth: contextOverride.bypassAuth ?? localContext?.bypassAuth ?? false,
     }
@@ -249,6 +292,33 @@ export type ServiceOperation<
     implementationParamsSchema?: ImplementationParamsSchema,
 }
 
+/**
+ * Extracts the caller-facing `{ params: ... }` input type of a service operation (top-level, from
+ * defineOperation, or `.implement()`-produced) - i.e. what a caller passes in to call it. Works off
+ * of `paramsSchema`, which every such operation exposes as a property on itself, so it applies
+ * uniformly regardless of how the operation was built.
+ *
+ * `paramsSchema` is an optional property, so reading it always yields `Schema | undefined` even
+ * when a schema is present - the `extends undefined` check (rather than `extends z.ZodTypeAny`)
+ * accounts for that; checking the other way round would make the union fail to extend
+ * z.ZodTypeAny (since its `undefined` member never does) and collapse this to `never` always.
+ */
+export type Params<T extends { paramsSchema?: z.ZodTypeAny }> =
+    T['paramsSchema'] extends undefined ? never : z.input<NonNullable<T['paramsSchema']>>
+
+/**
+ * Extracts the caller-facing `{ data: ... }` input type of a service operation. See {@link Params}.
+ */
+export type Data<T extends { dataSchema?: z.ZodTypeAny }> =
+    T['dataSchema'] extends undefined ? never : z.input<NonNullable<T['dataSchema']>>
+
+/**
+ * Extracts the caller-facing `{ implementationParams: ... }` input type of a service operation
+ * produced via `.implement()`. See {@link Params}.
+ */
+export type ImplementationParams<T extends { implementationParamsSchema?: z.ZodTypeAny }> =
+    T['implementationParamsSchema'] extends undefined ? never : z.input<NonNullable<T['implementationParamsSchema']>>
+
 export function defineSubOperation<
     Return,
     OpensTransaction extends boolean = false,
@@ -287,17 +357,16 @@ export function defineSubOperation<
         ): args is ServiceOperationExecuteArgs<'SAFE', ParamsSchema, DataSchema, ImplementationParamsSchema> => {
             const paramsMatch = Boolean(args.params) === Boolean(serviceOperationConfig.paramsSchema)
             const dataMatches = Boolean(args.data) === Boolean(serviceOperationConfig.dataSchema)
-            const implementationParamsMatch =
-                Boolean(args.implementationParams) === Boolean(implementationArgs.implementationParamsSchema)
+            // Boolean-truthiness can't be used here like it is for params/data above: an
+            // implementationParamsSchema of z.undefined() is a valid, truthy schema whose only
+            // correct value is the falsy `undefined` - so this checks against the schema's actual
+            // parse outcome instead of comparing truthiness of the schema and the value.
+            const implementationParamsMatch = implementationArgs.implementationParamsSchema
+                ? implementationArgs.implementationParamsSchema.safeParse(args.implementationParams).success
+                : args.implementationParams === undefined
             return paramsMatch && dataMatches && implementationParamsMatch
         }
 
-        // Guard to check if the prisma client can be used for this service operation.
-        const isAppropriateClient = (
-            prisma: PrismaClient | Prisma.TransactionClient
-        ): prisma is PrismaPossibleTransaction<OpensTransaction> =>
-            !serviceOperationConfig.opensTransaction || '$transaction' in prisma
-
         const executeOperation = async ({
             implementationParams, params, data, ...context
         }:
@@ -386,58 +455,62 @@ export function defineSubOperation<
             // Then, get the context (which includes the prisma client, the session and the bypassAuth flag).
             // If a context override is provided, use it. Otherwise, use the context from the async local storage.
             // If there is no context in the async local storage, use global defaults.
-            return withContext(context, async ({ prisma, bypassAuth, session }) => {
-                if (!isAppropriateClient(prisma)) {
-                    throw new Smorekopp(
-                        'SERVER ERROR',
-                        'Service operation that opens a transaction cannot be called from within a transaction.',
-                    )
-                }
-
-                // Then, authorize user.
-                // This has to be done after the validation because the authorizer might use the data to authorize the user.
-                const prismaWhereFilter: PrismaWhereFilter | undefined = await (async () => {
-                    if (!bypassAuth) {
-                        if (!implementationArgs.authorizer) {
-                            throw new Smorekopp(
-                                'UNAUTHENTICATED',
-                                'This service operation is not externally callable.'
+            return withServiceContext(
+                context,
+                serviceOperationConfig.opensTransaction,
+                async ({ prisma, bypassAuth, session }) => {
+                    // Then, authorize user.
+                    // This has to be done after the validation because the
+                    // authorizer might use the data to authorize the user.
+                    const prismaWhereFilter: PrismaWhereFilter | undefined = await (async () => {
+                        if (!bypassAuth) {
+                            if (!implementationArgs.authorizer) {
+                                throw new Smorekopp(
+                                    'UNAUTHENTICATED',
+                                    'This service operation is not externally callable.'
+                                )
+                            }
+
+                            const authorizer = await prismaErrorWrapper(
+                                () => implementationArgs.authorizer({ ...args, prisma })
                             )
-                        }
+                            const authResult = authorizer.auth(session)
 
-                        const authorizer = await prismaErrorWrapper(
-                            () => implementationArgs.authorizer({ ...args, prisma })
-                        )
-                        const authResult = authorizer.auth(session)
+                            if (!authResult.authorized) {
+                                throw new Smorekopp(authResult.status, authResult.getErrorMessage)
+                            }
 
-                        if (!authResult.authorized) {
-                            throw new Smorekopp(authResult.status, authResult.getErrorMessage)
+                            return authResult.prismaWhereFilter
                         }
-
-                        return authResult.prismaWhereFilter
+                        return undefined
+                    })()
+
+                    const ownershipCheckResult = await prismaErrorWrapper(
+                        () => implementationArgs.ownershipCheck({
+                            ...args,
+                            prisma,
+                        })
+                    )
+                    if (!ownershipCheckResult) {
+                        throw new Smorekopp('DISSALLOWED', `
+                            This resource cannot be accessed through this implementation
+                            as the resource implementing this resource does not own it.
+                        `)
                     }
-                    return undefined
-                })()
-
-                const ownershipCheckResult = await prismaErrorWrapper(
-                    () => implementationArgs.ownershipCheck({
-                        ...args,
-                        prisma,
-                    })
-                )
-                if (!ownershipCheckResult) {
-                    throw new Smorekopp('DISSALLOWED', `
-                        This resource cannot be accessed through this implementation
-                        as the resource implementing this resource does not own it.
-                    `)
-                }
 
-                return prismaErrorWrapper(() =>
-                    serviceOperationConfig.operation(
-                        implementationArgs.operationImplementationFields!
-                    )({ ...args, prisma, bypassAuth, session }, prismaWhereFilter)
-                )
-            })
+                    await prismaErrorWrapper(
+                        () => implementationArgs.beforeRun?.({
+                            ...args,
+                            prisma,
+                        })
+                    )
+
+                    return prismaErrorWrapper(() =>
+                        serviceOperationConfig.operation(
+                            implementationArgs.operationImplementationFields!
+                        )({ ...args, prisma, bypassAuth, session }, prismaWhereFilter)
+                    )
+                })
         }
 
         executeOperation.paramsSchema = serviceOperationConfig.paramsSchema
@@ -469,7 +542,7 @@ export function defineSubOperation<
             ...args,
             authorizer: () => RequireNothing.staticFields({}).dynamicFields({}),
             ownershipCheck: () => true,
-        })(args)
+        })(args),
     }
 }
 
@@ -483,7 +556,7 @@ export function defineOperation<
     paramsSchema?: ParamsSchema,
     dataSchema?: DataSchema,
     opensTransaction?: OpensTransaction,
-    authorizer: AuthorizerGetter<OpensTransaction, ParamsSchema, DataSchema, undefined, PrismaWhereFilter>,
+    authorizer: AuthorizerGetter<OpensTransaction, ParamsSchema, DataSchema, undefined, PrismaWhereFilter | undefined>,
     operation: ServiceOperationOperation<OpensTransaction, ParamsSchema, DataSchema, Return, PrismaWhereFilter>
 }): ServiceOperation<OpensTransaction, Return, ParamsSchema, DataSchema, undefined> {
     return defineSubOperation<
diff --git a/src/services/store/createFile.ts b/src/services/store/createFile.ts
deleted file mode 100644
index 8651b1201..000000000
--- a/src/services/store/createFile.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import '@pn-server-only'
-import { ServerError } from '@/services/error'
-import { v4 as uuid } from 'uuid'
-import { join } from 'path'
-import { mkdir, writeFile } from 'fs/promises'
-import type { StoreLocations } from './types'
-import type { File } from 'node:buffer'
-
-/**
- * Create a file in the store volume
- * @param file - file to upload to store
- * @param destination - destination folder in store like /images or /ombul
- * @param allowedExt - allowed file extensions like ['pdf', 'jpg', 'png'],
- *                     if not provided all extensions are allowed
- * @param prosessor - a function to process the file before saving it to the store
- * @returns - either an error or the file location and ext. Its an ActionReturn
- */
-export async function createFile(
-    file: File,
-    destination: StoreLocations,
-    allowedExt: string[] | undefined = undefined,
-    prosessor: (buffer: Buffer) => Promise<Buffer> = async (buffer) => buffer,
-): Promise<{
-    fsLocation: string,
-    ext: string
-}> {
-    const arrBuffer = await file.arrayBuffer()
-    const buffer = Buffer.from(arrBuffer)
-    const ext = file.type.split('/')[1]
-    if (allowedExt && !allowedExt.includes(ext)) {
-        throw new ServerError('BAD PARAMETERS', [
-            {
-                path: ['file'],
-                message: 'Invalid file type'
-            }
-        ])
-    }
-
-    const pBuffer = await prosessor(buffer)
-    const fsLocation = `${uuid()}.${ext}`
-    const destination_ = join('store', destination)
-    await mkdir(destination_, { recursive: true })
-    await writeFile(join(destination_, fsLocation), pBuffer)
-    return {
-        fsLocation,
-        ext
-    }
-}
diff --git a/src/services/store/destroyFile.ts b/src/services/store/destroyFile.ts
deleted file mode 100644
index e258677fd..000000000
--- a/src/services/store/destroyFile.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import '@pn-server-only'
-import { ServerError } from '@/services/error'
-import { unlink } from 'fs/promises'
-import { join } from 'path'
-import type { StoreLocations } from './types'
-
-function isErrorWithCode(error: unknown): error is { code: string } {
-    return typeof error === 'object' && error !== null && 'code' in error
-}
-
-/**
- * Function to delete a file from the store
- * @param destination what part of the store to delete from
- * @param fsLocation the location of the file in the store to delete
- * @returns either an error or success in ActionReturn
- */
-export async function destroyFile(
-    destination: StoreLocations,
-    fsLocation: string
-): Promise<void> {
-    const filePath = join('store', destination, fsLocation)
-    try {
-        await unlink(filePath)
-    } catch (error) {
-        if (isErrorWithCode(error) && error.code === 'ENOENT') {
-            throw new ServerError('NOT FOUND', 'fil ikke funnet')
-        }
-        throw error
-    }
-}
diff --git a/src/services/users/actions.ts b/src/services/users/actions.ts
index f83bbcc76..82ead512c 100644
--- a/src/services/users/actions.ts
+++ b/src/services/users/actions.ts
@@ -1,7 +1,5 @@
 'use server'
-
 import { makeAction } from '@/services/serverAction'
-import { groupOperations } from '@/services/groups/operations'
 import { userOperations } from '@/services/users/operations'
 
 /**
@@ -36,14 +34,13 @@ export const readUserProfileAction = makeAction(userOperations.readProfile)
 
 export const readUserAction = makeAction(userOperations.read)
 
-export const readGroupsForPageFilteringAction = makeAction(groupOperations.readGroupsExpanded)
-
 /**
  * updateUserAction is meant for admin updates while
  * updateUserProfileAction is meant for standard profile updates
  */
 export const updateUserAction = makeAction(userOperations.update)
 export const updateUserProfileAction = makeAction(userOperations.updateProfile)
+export const updateUserProfileImageAction = makeAction(userOperations.updateProfileImage)
 
 export const registerNewEmailAction = makeAction(userOperations.registerNewEmail)
 export const registerUser = makeAction(userOperations.register)
diff --git a/src/services/users/auth.ts b/src/services/users/auth.ts
index c1f8b5858..46e8b2ef9 100644
--- a/src/services/users/auth.ts
+++ b/src/services/users/auth.ts
@@ -5,6 +5,8 @@ import { RequireUserId } from '@/auth/authorizer/RequireUserId'
 import { RequireUserIdOrPermission } from '@/auth/authorizer/RequireUserIdOrPermission'
 import { RequireUsernameOrPermission } from '@/auth/authorizer/RequireUsernameOrPermission'
 
+export const profileImagesImagePanelAuth = RequirePermission.staticFields({ permission: 'USERS_UPDATE' })
+
 export const userAuth = {
     readProfile: RequireUsernameOrPermission.staticFields({ permission: 'USERS_READ' }),
     read: RequireUserFieldOrPermission.staticFields({ permission: 'USERS_READ' }),
@@ -16,7 +18,7 @@ export const userAuth = {
     updatePassword: RequireUserIdOrPermission.staticFields({ permission: 'USERS_UPDATE' }),
     update: RequirePermission.staticFields({ permission: 'USERS_UPDATE' }),
     updateProfile: RequireUsernameOrPermission.staticFields({ permission: 'USERS_UPDATE' }),
-
+    updateProfileImage: RequireUsernameOrPermission.staticFields({ permission: 'USERS_UPDATE' }),
     register: RequireUserId.staticFields({}),
     destroy: RequirePermission.staticFields({ permission: 'USERS_DESTROY' }),
-}
+} as const
diff --git a/src/services/users/constants.ts b/src/services/users/constants.ts
index 3333ce441..ac02d46d8 100644
--- a/src/services/users/constants.ts
+++ b/src/services/users/constants.ts
@@ -28,11 +28,11 @@ export const userFilterSelection = {
     flairs: {
         select: {
             id: true,
-            cmsImage: {
-                include: {
-                    image: true,
-                }
-            },
+            rank: true,
+            colorR: true,
+            colorG: true,
+            colorB: true,
+            image: true,
         },
     },
 } as const satisfies Prisma.UserSelect
diff --git a/src/services/users/operations.ts b/src/services/users/operations.ts
index 71b344c8c..d714ef7aa 100644
--- a/src/services/users/operations.ts
+++ b/src/services/users/operations.ts
@@ -6,7 +6,8 @@ import {
     standardMembershipSelection,
     userFilterSelection
 } from './constants'
-import { imageOperations } from '@/services/images/operations'
+import { userProfileImageOperations } from './profileImageCollection'
+import { standardImageCollectionOperations } from '@/services/images/standard/operations'
 import { notificationSubscriptionOperations } from '@/services/notifications/subscription/operations'
 import { readMembershipsOfUser } from '@/services/groups/memberships/read'
 import { NTNUEmailDomain } from '@/services/mail/constants'
@@ -15,12 +16,11 @@ import { updateUserOmegaMembershipGroup } from '@/services/groups/omegaMembershi
 import { sendUserInvitationEmail } from '@/lib/email/systemMail/userInvitivation'
 import { readOmegaMembershipGroup } from '@/services/groups/omegaMembershipGroups/read'
 import { defineOperation } from '@/services/serviceOperation'
-import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { ServerError } from '@/services/error'
 import { getMembershipFilter } from '@/auth/getMembershipFilter'
 import { cursorPageingSelection } from '@/lib/paging/cursorPageingSelection'
 import { hashAndEncryptPassword } from '@/auth/passwordHash'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import { permissionOperations } from '@/services/permissions/operations'
 import { z } from 'zod'
 import type { UserPagingReturn } from './types'
@@ -35,7 +35,7 @@ export const userOperations = {
         authorizer: () => userAuth.create.dynamicFields({}),
         operation: async ({ prisma, data }) => {
             const omegaMembership = await readOmegaMembershipGroup('EXTERNAL')
-            const omegaOrder = await readCurrentOmegaOrder()
+            const omegaOrder = await omegaOrderOperations.readCurrent({})
 
             const user = await prisma.user.create({
                 data: {
@@ -101,8 +101,8 @@ export const userOperations = {
         }),
         authorizer: ({ params }) => userAuth.readProfile.dynamicFields({ username: params.username }),
         operation: async ({ prisma, params }) => {
-            const defaultProfileImage = await imageOperations.readSpecial({
-                params: { special: 'DEFAULT_PROFILE_IMAGE' },
+            const defaultProfileImage = await standardImageCollectionOperations.readStandardImage({
+                params: { standardImage: 'DEFAULT_PROFILE_IMAGE' },
             })
             const user = await prisma.user.findUniqueOrThrow({
                 where: { username: params.username.toLowerCase() },
@@ -167,27 +167,23 @@ export const userOperations = {
     }),
 
     readPage: defineOperation({
-        paramsSchema: readPageInputSchemaObject(
-            z.number(),
-            z.object({
-                id: z.number()
-            }),
-            z.object({
-                partOfName: z.string(),
-                groups: z.array(z.object({
-                    groupOrder: z.union([z.number(), z.literal('ACTIVE')]),
-                    groupId: z.number()
-                })),
-                selectedGroup: z.object({
-                    groupOrder: z.union([z.number(), z.literal('ACTIVE')]),
-                    groupId: z.number()
-                }).nullable().optional()
-            })
-        ),
+        paramsSchema: userSchemas.readPage,
         authorizer: () => userAuth.readPage.dynamicFields({}),
         operation: async ({ prisma, params }): Promise<UserPagingReturn[]> => {
             const { page, details } = params.paging
             const words = details.partOfName.split(' ')
+            const sortDirection = details.sort?.direction ?? 'asc'
+            // The username is always included as the final tiebreaker so the
+            // ordering stays fully deterministic for cursor-based pagination.
+            const orderBy = details.sort?.field === 'username' ? [
+                { username: sortDirection },
+                { lastname: sortDirection },
+                { firstname: sortDirection },
+            ] : [
+                { lastname: sortDirection },
+                { firstname: sortDirection },
+                { username: sortDirection },
+            ]
 
             if (details.groups.length > maxNumberOfGroupsInFilter) {
                 throw new ServerError('BAD PARAMETERS', 'Too many groups in filter')
@@ -257,14 +253,10 @@ export const userOperations = {
                         }))
                     ],
                 },
-                orderBy: [
-                    { lastname: 'asc' },
-                    { firstname: 'asc' },
-                    // We have to sort with at least one unique field to have a
-                    // consistent order. Sorting rows by fieds that have the same
-                    // value is undefined behaviour in postgresql.
-                    { username: 'asc' },
-                ]
+                // We have to sort with at least one unique field to have a
+                // consistent order. Sorting rows by fieds that have the same
+                // value is undefined behaviour in postgresql.
+                orderBy
             })
             return users.map(user => {
                 const clas = user.memberships.find(
@@ -547,8 +539,8 @@ export const userOperations = {
             })
 
             if (!user.image) {
-                user.image = await imageOperations.readSpecial({
-                    params: { special: 'DEFAULT_PROFILE_IMAGE' },
+                user.image = await standardImageCollectionOperations.readStandardImage({
+                    params: { standardImage: 'DEFAULT_PROFILE_IMAGE' },
                 })
             }
 
@@ -576,4 +568,44 @@ export const userOperations = {
             })
         }
     }),
-}
+
+    updateProfileImage: defineOperation({
+        authorizer: ({ params }) => userAuth.updateProfileImage.dynamicFields({ username: params.username }),
+        paramsSchema: z.object({
+            username: z.string(),
+        }),
+        dataSchema: userSchemas.updateProfileImage,
+        opensTransaction: true,
+        // uploadImage resizes to 3 sizes, converts to avif and writes several files to store
+        // before any db write happens - comfortably slower than the default 5000ms interactive
+        // transaction timeout under load, hence the raised timeout below.
+        operation: ({ prisma, params, data }) =>
+            prisma.$transaction(async tx => {
+                const existingUser = await tx.user.findUniqueOrThrow({
+                    where: { username: params.username },
+                })
+
+                const newImage = await userProfileImageOperations.uploadImage.internalCall({ prisma: tx, data })
+
+                await tx.user.update({
+                    where: { id: existingUser.id },
+                    data: {
+                        image: {
+                            connect: { id: newImage.id }
+                        }
+                    }
+                })
+
+                // A previous imageId is always an upload owned 1:1 by this user (never the shared
+                // default, since that's only ever resolved at read time) - safe to destroy.
+                if (existingUser.imageId) {
+                    await userProfileImageOperations.destroyImage.internalCall({
+                        prisma: tx,
+                        params: { imageId: existingUser.imageId }
+                    })
+                }
+
+                return newImage
+            }, { timeout: 20000 })
+    }),
+} as const
diff --git a/src/services/users/profileImageCollection.ts b/src/services/users/profileImageCollection.ts
new file mode 100644
index 000000000..e2a82b67f
--- /dev/null
+++ b/src/services/users/profileImageCollection.ts
@@ -0,0 +1,16 @@
+import '@pn-server-only'
+import { profileImagesImagePanelAuth } from './auth'
+import { implementSpecialCollection } from '@/services/images/subservice/special/implement'
+
+export const {
+    internalOperations: userProfileImageOperations,
+    specialCollectionPanelOperations: profileImagesImagePanelOperations,
+    generateCollectionFromConfig: generateProfileImagesCollectionFromConfig
+} = implementSpecialCollection({
+    special: 'PROFILEIMAGES',
+    imagePanelAuther: profileImagesImagePanelAuth.dynamicFields({}),
+    config: {
+        name: 'Profilbilder',
+        description: 'Bilder brukt som profilbilder. Hvert bilde i denne samlingen tilhører nøyaktig én bruker.',
+    }
+})
diff --git a/src/services/users/schemas.ts b/src/services/users/schemas.ts
index d70e260f5..46a8a4c2e 100644
--- a/src/services/users/schemas.ts
+++ b/src/services/users/schemas.ts
@@ -1,6 +1,8 @@
 import { Zpn } from '@/lib/fields/zpn'
-import { z } from 'zod'
+import { imageSchemas } from '@/services/images/subservice/schemas'
+import { readPageInputSchemaObject } from '@/lib/paging/schema'
 import { SEX, RelationshipStatus } from '@/prisma-generated-pn-types'
+import { z } from 'zod'
 
 export const studentCardSchema = z.string()
 
@@ -92,4 +94,28 @@ export const userSchemas = {
     verifyEmail: userSchema.pick({
         email: true,
     }),
+
+    updateProfileImage: imageSchemas.uploadImage,
+
+    readPage: readPageInputSchemaObject(
+        z.number(),
+        z.object({
+            id: z.number()
+        }),
+        z.object({
+            partOfName: z.string(),
+            groups: z.array(z.object({
+                groupOrder: z.union([z.number(), z.literal('ACTIVE')]),
+                groupId: z.number()
+            })),
+            selectedGroup: z.object({
+                groupOrder: z.union([z.number(), z.literal('ACTIVE')]),
+                groupId: z.number()
+            }).nullable().optional(),
+            sort: z.object({
+                field: z.enum(['name', 'username']),
+                direction: z.enum(['asc', 'desc']),
+            }).optional()
+        })
+    ),
 }
diff --git a/src/services/users/types.ts b/src/services/users/types.ts
index 50007ab6d..570ed26e8 100644
--- a/src/services/users/types.ts
+++ b/src/services/users/types.ts
@@ -1,5 +1,7 @@
 import type { userFilterSelection } from './constants'
+import type { userSchemas } from './schemas'
 import type { MembershipFiltered } from '@/services/groups/memberships/types'
+import type { InferPagingCursor, InferPagingDetails } from '@/lib/paging/schema'
 import type { OmegaMembershipLevel, Image, Permission } from '@/prisma-generated-pn-types'
 import type { Prisma } from '@/prisma-generated-pn-types'
 
@@ -26,26 +28,14 @@ export type UserPagingReturn = UserFiltered & StandardMembeships & {
  * selectedGroup will also filter on that group, but will also return extra
  * info about that membership.
  */
-export type UserDetails = {
-    groups: {
-        groupId: number
-        groupOrder: number | 'ACTIVE' //ACTIVE means take current order.
-    }[]
-    partOfName: string
-    selectedGroup?: {
-        groupId: number
-        groupOrder: number | 'ACTIVE' //ACTIVE means take current order.
-    }
-}
+export type UserDetails = InferPagingDetails<typeof userSchemas.readPage>
 
 export type RegisterNewEmailType = {
     verified: boolean,
     email: string,
 }
 
-export type UserCursor = {
-    id: number
-}
+export type UserCursor = InferPagingCursor<typeof userSchemas.readPage>
 
 export type Profile = {
     user: UserFiltered & { image: Image, bio: string },
diff --git a/src/services/visibility/implement.ts b/src/services/visibility/implement.ts
index 0ef4a87ff..bd7fca90a 100644
--- a/src/services/visibility/implement.ts
+++ b/src/services/visibility/implement.ts
@@ -1,69 +1,180 @@
+import '@pn-server-only'
 import { visibilityOperations } from './operations'
-import type { ArgsAuthGetterAndOwnershipCheck, PrismaPossibleTransaction } from '@/services/serviceOperation'
+import { isSubVisibility } from '@/auth/visibility/isSubVisibility'
+import { ServerError } from '@/services/error'
+import { defineOperation, type PrismaPossibleTransaction } from '@/services/serviceOperation'
 import type { AuthorizerDynamicFieldsBound } from '@/auth/authorizer/Authorizer'
 import type { Prisma } from '@/prisma-generated-pn-types'
-import type { visibilitySchemas } from './schemas'
 import type { z } from 'zod'
+import type { DoubleLevelVisibilityMatrix, VisibilityMatrix } from './types'
 
-type ParamsSchema = typeof visibilitySchemas.params
-type OwnedVisibility = Prisma.ArticleGetPayload<{
-    include: {
-        coverImage: true,
-        articleSections: {
-            include: {
-                cmsImage: true,
-                cmsParagraph: true,
-                cmsLink: true,
-            }
+/**
+ * The admin level must always be a sub-visibility of the regular level - an administrator who
+ * cannot even see what they administrate is a broken state. Since either level can be updated on
+ * its own, this is asserted on the pair that the update would result in, not on the stored pair.
+ */
+function assertAdminLevelIsSubOfRegularLevel(resultingMatrix: DoubleLevelVisibilityMatrix): void {
+    if (!isSubVisibility(resultingMatrix.adminLevel, resultingMatrix.regularLevel)) {
+        throw new ServerError(
+            'BAD DATA',
+            'Alle som kan administrere må også kunne se - det administrative nivået må ' +
+            'være en delmengde av det vanlige nivået.'
+        )
+    }
+}
+
+type Authorizers<
+    ImplementationParamsSchema extends z.ZodTypeAny,
+> = {
+    readDoubleLevelMatrix: (
+        args: {
+            prisma: PrismaPossibleTransaction<false>,
+            params: z.infer<ImplementationParamsSchema>,
+            doubleLevelMatrix: DoubleLevelVisibilityMatrix,
+        }
+    ) => AuthorizerDynamicFieldsBound | Promise<AuthorizerDynamicFieldsBound>
+    updateRegularLevel: (
+        args: {
+            prisma: PrismaPossibleTransaction<false>,
+            implementationParams: z.infer<ImplementationParamsSchema>,
+            doubleLevelMatrix: DoubleLevelVisibilityMatrix,
+        }
+    ) => AuthorizerDynamicFieldsBound | Promise<AuthorizerDynamicFieldsBound>,
+    updateAdminLevel: (
+        args: {
+            prisma: PrismaPossibleTransaction<false>,
+            implementationParams: z.infer<ImplementationParamsSchema>,
+            doubleLevelMatrix: DoubleLevelVisibilityMatrix,
+        }
+    ) => AuthorizerDynamicFieldsBound | Promise<AuthorizerDynamicFieldsBound>
+}
+
+export const visibilityIncluder = {
+    requirements: {
+        include: {
+            conditions: true
         }
     }
+} as const
+
+type ReadVisibilityDoubleLevel<ImplementationParamsSchema extends z.ZodTypeAny> = (
+    args: {
+        include: typeof visibilityIncluder,
+        prisma: PrismaPossibleTransaction<false>,
+        implementationParams: z.infer<ImplementationParamsSchema>
+    }
+) => Promise<{
+    regularLevel: Prisma.VisibilityGetPayload<{ include: typeof visibilityIncluder }>,
+    adminLevel: Prisma.VisibilityGetPayload<{ include: typeof visibilityIncluder }>
 }>
-/**
- * This utility implements the read and update operations for visibility
- */
-export function implementVisibilityOperations<
+
+export function implementDoubleLevelVisibilityOperations<
     const ImplementationParamsSchema extends z.ZodTypeAny
 >({
     implementationParamsSchema,
     authorizers,
-    ownedVisibility,
+    readDoubleLevel,
 }: {
     implementationParamsSchema: ImplementationParamsSchema,
-    authorizers: {
-        update: (
-            args: {
-                prisma: PrismaPossibleTransaction<false>,
-                implementationParams: z.infer<ImplementationParamsSchema>
-            }
-        ) => AuthorizerDynamicFieldsBound | Promise<AuthorizerDynamicFieldsBound>
-        read: (
-            args: {
-                prisma: PrismaPossibleTransaction<false>,
-                implementationParams: z.infer<ImplementationParamsSchema>
-            }
-        ) => AuthorizerDynamicFieldsBound | Promise<AuthorizerDynamicFieldsBound>
-    },
-    ownedVisibility: (
-        args: {
-            prisma: PrismaPossibleTransaction<false>,
-            implementationParams: z.infer<ImplementationParamsSchema>
-        }
-    ) => Promise<OwnedVisibility>
+    authorizers: Authorizers<ImplementationParamsSchema>,
+    readDoubleLevel: ReadVisibilityDoubleLevel<ImplementationParamsSchema>,
 }) {
-    const ownershipCheckVisibility = async (
-        args: Omit<ArgsAuthGetterAndOwnershipCheck<false, ParamsSchema, undefined, ImplementationParamsSchema>, 'data'>
-    ) => (await ownedVisibility(args)).id === args.params.visibilityId
+    const readDoubleLevelMatrixInternal = async ({
+        prisma,
+        params
+    } : {
+        prisma: PrismaPossibleTransaction<false>,
+        params: z.infer<ImplementationParamsSchema>
+    }): Promise<DoubleLevelVisibilityMatrix> => {
+        const visibilties = await readDoubleLevel({
+            prisma,
+            implementationParams: params,
+            include: visibilityIncluder
+        })
+
+        return {
+            regularLevel: toMatrix(visibilties.regularLevel),
+            adminLevel: toMatrix(visibilties.adminLevel)
+        }
+    }
 
     return {
-        read: visibilityOperations.read.implement({
+        readDoubleLevelMatrixInternal,
+        readDoubleLevelMatrix: defineOperation({
+            paramsSchema: implementationParamsSchema,
+            authorizer: async (args) =>
+                authorizers.readDoubleLevelMatrix({
+                    prisma: args.prisma,
+                    params: args.params,
+                    doubleLevelMatrix: await readDoubleLevelMatrixInternal({
+                        params: args.params, prisma: args.prisma
+                    })
+                }),
+            operation: async args => readDoubleLevelMatrixInternal({
+                params: args.params,
+                prisma: args.prisma
+            })
+        }),
+        updateRegularLevel: visibilityOperations.update.implement<ImplementationParamsSchema>({
             implementationParamsSchema,
-            authorizer: authorizers.read,
-            ownershipCheck: ownershipCheckVisibility
+            authorizer: async (args) =>
+                authorizers.updateRegularLevel({
+                    prisma: args.prisma,
+                    implementationParams: args.implementationParams,
+                    doubleLevelMatrix: await readDoubleLevelMatrixInternal({
+                        params: args.implementationParams, prisma: args.prisma
+                    })
+                }),
+            ownershipCheck: async ({ params, prisma, implementationParams }) => (await readDoubleLevel({
+                include: visibilityIncluder,
+                prisma,
+                implementationParams,
+            })).regularLevel.id === params.visibilityId,
+            beforeRun: async ({ prisma, implementationParams, data }) => assertAdminLevelIsSubOfRegularLevel({
+                regularLevel: { requirements: data.requirements },
+                adminLevel: (await readDoubleLevelMatrixInternal({
+                    params: implementationParams, prisma
+                })).adminLevel
+            })
         }),
-        update: visibilityOperations.update.implement({
+        updateAdminLevel: visibilityOperations.update.implement<ImplementationParamsSchema>({
             implementationParamsSchema,
-            authorizer: authorizers.update,
-            ownershipCheck: ownershipCheckVisibility
+            authorizer: async (args) =>
+                authorizers.updateAdminLevel({
+                    prisma: args.prisma,
+                    implementationParams: args.implementationParams,
+                    doubleLevelMatrix: await readDoubleLevelMatrixInternal({
+                        params: args.implementationParams, prisma: args.prisma
+                    })
+                }),
+            ownershipCheck: async ({ params, prisma, implementationParams }) => (await readDoubleLevel({
+                include: visibilityIncluder,
+                prisma,
+                implementationParams,
+            })).adminLevel.id === params.visibilityId,
+            beforeRun: async ({ prisma, implementationParams, data }) => assertAdminLevelIsSubOfRegularLevel({
+                regularLevel: (await readDoubleLevelMatrixInternal({
+                    params: implementationParams, prisma
+                })).regularLevel,
+                adminLevel: { requirements: data.requirements }
+            })
         })
     } as const
 }
+
+export function toMatrix(visibility: Prisma.VisibilityGetPayload<{ include: typeof visibilityIncluder }>): VisibilityMatrix {
+    return {
+        requirements: visibility.requirements.map(requirement => ({
+            conditions: requirement.conditions.map(condition => (
+                condition.type === 'ORDER' ? {
+                    groupId: condition.groupId,
+                    type: condition.type,
+                    order: condition.order
+                } : {
+                    groupId: condition.groupId,
+                    type: condition.type,
+                }
+            ))
+        }))
+    }
+}
diff --git a/src/services/visibility/operations.ts b/src/services/visibility/operations.ts
index b569da2b4..27c0ff4ed 100644
--- a/src/services/visibility/operations.ts
+++ b/src/services/visibility/operations.ts
@@ -1,9 +1,7 @@
 import '@pn-server-only'
 import { visibilitySchemas } from './schemas'
 import { defineSubOperation } from '@/services/serviceOperation'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
-import { ServerError } from '@/services/error'
-import type { VisibilityMatrix } from './types'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 
 export const visibilityOperations = {
     create: defineSubOperation({
@@ -26,7 +24,7 @@ export const visibilityOperations = {
                 where: { visibilityId: params.visibilityId }
             })
 
-            const currentOrder = await readCurrentOmegaOrder()
+            const currentOrder = await omegaOrderOperations.readCurrent({ bypassAuth: true })
 
             return prisma.visibility.update({
                 where: { id: params.visibilityId },
@@ -45,34 +43,5 @@ export const visibilityOperations = {
                 }
             })
         }
-    }),
-
-    read: defineSubOperation({
-        paramsSchema: () => visibilitySchemas.params,
-        operation: () => async ({ prisma, params }): Promise<VisibilityMatrix> => {
-            const visibility = await prisma.visibility.findUnique({
-                where: { id: params.visibilityId },
-                include: {
-                    requirements: {
-                        include: {
-                            conditions: true
-                        }
-                    }
-                }
-            })
-            if (!visibility) throw new ServerError('NOT FOUND', 'Fant ikke synlighet')
-            return {
-                requirements: visibility.requirements.map(requirement => ({
-                    conditions: requirement.conditions.map(condition => (condition.type === 'ORDER' ? {
-                        groupId: condition.groupId,
-                        type: condition.type,
-                        order: condition.order
-                    } : {
-                        groupId: condition.groupId,
-                        type: condition.type,
-                    }))
-                }))
-            }
-        }
     })
 } as const
diff --git a/src/services/visibility/schemas.ts b/src/services/visibility/schemas.ts
index f75e0c7ae..c5541b31b 100644
--- a/src/services/visibility/schemas.ts
+++ b/src/services/visibility/schemas.ts
@@ -1,6 +1,5 @@
-import { z } from 'zod'
 import { VisibilityRequirementGroupType } from '@/prisma-generated-pn-types'
-
+import { z } from 'zod'
 
 const baseSchema = z.object({
     requirements: z.array(
diff --git a/src/services/visibility/types.ts b/src/services/visibility/types.ts
index 4d440f2d9..984068d1b 100644
--- a/src/services/visibility/types.ts
+++ b/src/services/visibility/types.ts
@@ -1,3 +1,5 @@
+import type { visibilityOperations } from './operations'
+import type { ActionFromSubServiceOperation } from '@/services/actionTypes'
 import type { VisibilityRequirementGroupType } from '@/prisma-generated-pn-types'
 
 export type VisibilityCondition = {
@@ -16,3 +18,15 @@ export type VisibilityRequirement = {
 export type VisibilityMatrix = {
     requirements: VisibilityRequirement[]
 }
+
+export type DoubleLevelVisibilityMatrix = {
+    regularLevel: VisibilityMatrix,
+    adminLevel: VisibilityMatrix
+}
+
+/**
+ * The shape any owning service's `updateRegularLevel`/`updateAdminLevel` action has once its
+ * implementationParams is bound (e.g. a collectionId) - still expecting `params: { visibilityId }`
+ * to be bound.
+ */
+export type UpdateVisibilityAction = ActionFromSubServiceOperation<typeof visibilityOperations.update>
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
index 8a82219d1..45239a1c5 100644
--- a/src/styles/_colors.scss
+++ b/src/styles/_colors.scss
@@ -1,45 +1,32 @@
-$blue:    #007bff;
-$slate:   #556a82;
-$indigo:  #6610f2;
-$purple:  #9C27B0;
-$pink:    #e83e8c;
-$red:     #E53935;
-$orange:  #fd7e14;
-$yellow:  #ffd600;
-$green:   #28a745;
-$teal:    #009688;
-$cyan:    #00BCD4;
-
 $white:  #fff;
-$gray-100: #F7F8FA;
-$gray-150: #F3F4F6;
-$gray-200: #e9ecef;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
 $gray-500: #adb5bd;
-$gray-600: #868e96;
-$gray-650: #67696d;
-$gray-700: #495057;
-$gray-750: #323A3E;
-$gray-800: #212529;
-$gray-850: #1F2326;
-$gray-900: #1c1c1c;
 $black:  #000;
 
-$primary:    var(--primary);
-$secondary:  var(--secondary);
-$tertiary:   var(--secondary);
-$border:     var(--primary);
-$shadowColor:rgba(0, 0, 0, 0.1);
-
 $layer:      var(--layer);
-$layerone:   var(--layer); // TODO Emulate secondary with one layer.
 $boxShadow:  var(--boxShadow);
 
 $text:       var(--text);
 $text-muted: var(--text-muted);
 $text-inv:   var(--text-inv);
-$text-sec:   var(--text-sec);
 
-$error: $red;
-$body-background: $secondary;
\ No newline at end of file
+$surface-base:    var(--surface-base);
+$surface-raised:  var(--surface-raised);
+$surface-hover:   var(--surface-hover);
+$surface-subtle:  var(--surface-subtle);
+
+$body-background: $surface-base;
+
+$ink-hover:  var(--ink-hover);  // Light text
+$ink-strong: var(--ink-strong);  // Brightest text
+
+$accent-red:    var(--accent-red);    // Error
+$accent-orange: var(--accent-orange);
+$accent-yellow: var(--accent-yellow); // Warning
+$accent-green:  var(--accent-green);  // Success
+$accent-cyan:   var(--accent-cyan);
+$accent-blue:   var(--accent-blue);   // Primary color
+
+$accent-magenta: var(--accent-magenta);
+$accent-violet:  var(--accent-violet);
+
+$error: $accent-red;
\ No newline at end of file
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index 416797318..2ffda8daf 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -26,7 +26,7 @@ $fonts: (
   }
 }
 
-$primary: 'Roboto', sans-serif;
+$primary: 'Inter', sans-serif;
 $secondary: 'PlayfairDisplay', serif;
 
 $s: clamp(12px, 2vw, 14px);
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index c39e2525d..4651af2a5 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -21,12 +21,7 @@
 }
 
 @mixin card {
-    border-radius: variables.$cardRounding;
-    transition: box-shadow 0.3s;
-    @include boxShadow('');
-    &:hover {
-        @include boxShadow('hover');
-    }
+    border-radius: variables.$rounding;
 }
 
 @mixin layer {
@@ -39,20 +34,50 @@
     width: 100%;
     border-collapse: collapse;
     border: none;
-    margin: 20px 0;
-    font-size: 18px;
+    margin: calc(2 * #{variables.$gap}) 0;
+    font-size: fonts.$m;
     text-align: left;
+    box-shadow: colors.$boxShadow 0 1px 3px, colors.$boxShadow 0 1px 2px;
+
     th, td {
-        padding: variables.$gap;
+        padding: calc(1.5 * #{variables.$gap}) calc(2 * #{variables.$gap});
     }
+
     th {
-        background-color: color-mix(in srgb, colors.$secondary, white 2%); // TODO Perhaps change
+        background-color: colors.$surface-raised;
+        color: colors.$ink-strong;
+        font-weight: fonts.$weight-m;
+    }
+
+    tbody tr {
+        background-color: colors.$surface-raised;
+        transition: background-color .3s;
+        &:nth-child(even) {
+            background-color: color-mix(in srgb, colors.$surface-raised, white 3%);
+        }
+        &:hover {
+            background-color: colors.$surface-hover;
+        }
     }
-    tr:nth-child(even) {
-        background-color: color-mix(in srgb, colors.$secondary, white 2%); // TODO Perhaps change
+
+    thead tr:first-child th:first-child {
+        border-top-left-radius: variables.$gap;
+    }
+    thead tr:first-child th:last-child {
+        border-top-right-radius: variables.$gap;
+    }
+    tbody tr:last-child td:first-child {
+        border-bottom-left-radius: variables.$gap;
+    }
+    tbody tr:last-child td:last-child {
+        border-bottom-right-radius: variables.$gap;
+    }
+
+    &:has(tbody:empty) thead tr:first-child th:first-child {
+        border-bottom-left-radius: variables.$gap;
     }
-    tr:hover {
-        @include layer;
+    &:has(tbody:empty) thead tr:first-child th:last-child {
+        border-bottom-right-radius: variables.$gap;
     }
 }
 
@@ -61,47 +86,45 @@
     text-decoration: none;
     font-size: fonts.$m;
     background: $color;
-    padding: 2*variables.$gap;
+    padding: calc(2 * #{variables.$gap});
     margin: variables.$gap;
-    color: colors.$black;
+    color: colors.$text-inv;
     border: none;
+    border-radius: calc(#{variables.$rounding} - #{variables.$gap});
     transition: .5s background;
     &:hover {
         background-color: color-mix(in srgb, $color, white 10%); // TODO Perhaps change
         cursor: pointer;
     }
-    @include round;
 }
 
-//NOTE: also made to work for <Link /> (<a> tag)
-@mixin borderBtn($color: colors.$white) {
-    @include btn($color);
-    background: transparent;
-    border: solid $color 2px;
-    color: $color;
+// The secondary action tier: a filled button that recedes next to btn().
+// NOTE: also made to work for <Link /> (<a> tag)
+@mixin secondaryBtn {
+    @include btn(colors.$surface-hover);
+    color: colors.$text;
     &:hover {
-        background: $color;
-        color: color-mix(in srgb, $color, white 40%);
+        background-color: color-mix(in srgb, colors.$surface-hover, white 10%);
     }
 }
 
 @mixin roundAdminSvgBtn() {
     width: 45px;
     height: 45px;
-    background-color: colors.$primary;
+    background-color: colors.$accent-blue;
     border: none;
     border-radius: 50%;
     display: grid;
     place-items: center;
     text-decoration: none;
     svg {
-        color: colors.$black;
+        color: colors.$text-inv;
         transition: color 0.6s;
         width: 31px;
         height: 31px;
     }
     &:hover svg {
-        color: colors.$gray-500;
+        color: colors.$ink-hover;
         cursor: pointer;
     }
 }
@@ -123,12 +146,12 @@
 }
 
 @mixin primaryIconLink {
-    color: colors.$primary;
+    color: colors.$accent-blue;
     padding: variables.$gap;
     width: 30px;
     height: 30px;
     &:hover {
-        color: color-mix(in srgb, colors.$primary, black 10%); // TODO Perhaps change
+        color: color-mix(in srgb, colors.$accent-blue, black 10%); // TODO Perhaps change
         cursor: pointer;
     }
 }
@@ -147,7 +170,7 @@
     }
 }
 
-@mixin pagePadding($max-width: 900px) {
+@mixin pagePadding($max-width: 1200px) {
     $width: 100%;
 
     width: $width;
@@ -158,7 +181,6 @@
 }
 
 @mixin ImageCardListLayout {
-    margin: 1em 0;
     display: grid;
     grid-template-columns: repeat(3, calc((100% - 2em) / 3));
     grid-gap: 1em;
@@ -174,19 +196,202 @@
     }
 }
 
-@mixin EventCardListLayout {
-    margin: 1em 0;
-    display: grid;
-    grid-template-columns: repeat(2, calc((100% - 2em) / 2));
-    grid-gap: 1em;
-    @media screen and (max-width: variables.$mobileBreakpoint) {
-        grid-template-columns: repeat(2, calc((100% - 2em) / 2));
+// Listings that render as full-width rows are a single stacked column at every
+// breakpoint rather than a grid of cards.
+@mixin RowListLayout {
+    margin: calc(2 * #{variables.$gap}) 0;
+    display: flex;
+    flex-direction: column;
+    gap: variables.$gap;
+    // The list is the query container for its rows. It has to sit here rather
+    // than on the row itself: a container query can only style descendants of
+    // the container, so a row cannot restyle itself off its own width.
+    container-type: inline-size;
+}
+
+// A 96px list row on the 8px grid, shared by the event and job-ad listings so
+// the two lists stay consistent: thumbnail | lead | title block | meta, with an
+// optional full-width bar hugging the bottom edge. Consumers supply the child
+// elements using these class names.
+@mixin listRow {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    height: calc(12 * #{variables.$gap});
+    // Rows appear both full-width and inside half-width islands, so the columns
+    // give way based on the space the row actually has rather than on viewport
+    // width — a viewport query would leave the title with ~50px in a narrow
+    // island on a wide screen. The container is RowListLayout, not this row.
+    overflow: hidden;
+    text-decoration: none;
+    color: unset;
+    border-radius: variables.$rounding;
+    background-color: colors.$surface-raised;
+    transition: background-color variables.$transitionTime;
+
+    // The whole row is one anchor, so globals' `a:hover { text-decoration:
+    // underline }` would otherwise underline every text run inside it.
+    &:hover {
+        background-color: colors.$surface-hover;
+        text-decoration: none;
     }
-    @media screen and (max-width: 500px) {
-        grid-template-columns: 1fr;
-        place-items: center;
-        > * {
+
+    > .thumb {
+        position: relative;
+        flex-shrink: 0;
+        width: calc(12 * #{variables.$gap});
+        height: 100%;
+        overflow: hidden;
+
+        // The image components size their own wrapper divs off the image's
+        // intrinsic width rather than off this container, which lets images
+        // overextend past the row. Force every wrapper to fill this box at
+        // whatever nesting depth the fallback ends up rendering at.
+        div {
             width: 100%;
+            height: 100%;
+        }
+
+        img {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    }
+
+    > .lead {
+        flex-shrink: 0;
+        width: calc(8 * #{variables.$gap});
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        line-height: 1.1;
+
+        b {
+            font-size: fonts.$xl;
+            color: colors.$text;
+        }
+
+        span {
+            font-size: fonts.$s;
+            text-transform: uppercase;
+            color: colors.$text-muted;
+        }
+    }
+
+    > .main {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: calc(0.5 * #{variables.$gap});
+        padding: 0 calc(2 * #{variables.$gap});
+
+        h2 {
+            margin: 0;
+            font-size: fonts.$l;
+            font-weight: fonts.$weight-m;
+            color: colors.$text;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        p {
+            margin: 0;
+            font-size: fonts.$s;
+            color: colors.$text-muted;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    > .meta {
+        flex-shrink: 0;
+        width: calc(15 * #{variables.$gap});
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        justify-content: center;
+        gap: calc(0.5 * #{variables.$gap});
+        padding: 0 calc(2 * #{variables.$gap});
+        font-size: fonts.$s;
+        color: colors.$text-muted;
+        text-align: right;
+
+        > * {
+            max-width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    > .bar {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        height: calc(0.5 * #{variables.$gap});
+        background-color: colors.$surface-subtle;
+
+        > div {
+            height: 100%;
+            background: colors.$accent-blue;
+        }
+    }
+
+    // Rows stay rows when space is tight; the meta column is what gives way.
+    @container (max-width: 560px) {
+        > .meta {
+            display: none;
+        }
+
+        > .main {
+            padding-right: calc(2 * #{variables.$gap});
+        }
+    }
+
+    // Narrower still (phone-width rows) there is no room for a date column
+    // beside the title, so the row becomes a grid: the thumbnail keeps the left
+    // edge and the date sits horizontally above the title in the space left.
+    @container (max-width: 480px) {
+        display: grid;
+        grid-template-columns: calc(12 * #{variables.$gap}) 1fr;
+        align-content: center;
+        row-gap: calc(0.5 * #{variables.$gap});
+
+        // Taken out of the grid so it can span the full row height regardless of
+        // how tall the centred text block ends up.
+        > .thumb {
+            position: absolute;
+            inset: 0 auto 0 0;
+            width: calc(12 * #{variables.$gap});
+        }
+
+        > .lead {
+            grid-column: 2;
+            flex-direction: row;
+            align-items: baseline;
+            justify-content: flex-start;
+            gap: calc(0.5 * #{variables.$gap});
+            width: auto;
+            padding: 0 calc(2 * #{variables.$gap});
+
+            b {
+                font-size: fonts.$m;
+            }
+        }
+
+        > .main {
+            grid-column: 2;
+            padding-right: calc(2 * #{variables.$gap});
         }
     }
 }
@@ -211,31 +416,3 @@
         transform: translate(250%) rotate(5deg);
     }
 }
-
-@mixin neumorphism(
-    $l:var(--secondary-l),
-    $c:var(--secondary-c),
-    $h:var(--secondary-h),
-    $size: 20px,
-    $blur: 40px,
-    $intensity: .05,
-    $inset: "",
-    $button: false,
-) {
-    box-shadow:
-        #{$inset} #{$size} #{$size} #{$blur}
-          oklch(calc(#{$l} - #{$intensity}) #{$c} #{$h}),
-        #{$inset} -#{$size} -#{$size} #{$blur}
-          oklch(calc(#{$l} + #{$intensity}) #{$c} #{$h});
-
-
-    @if $button {
-        &:active {
-            box-shadow:
-                inset #{$size} #{$size} #{$blur}
-                    oklch(calc(#{$l} - #{$intensity}) #{$c} #{$h}),
-                  inset -#{$size} -#{$size} #{$blur}
-                    oklch(calc(#{$l} + #{$intensity}) #{$c} #{$h});
-        }
-    }
-}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 546b86d01..8f479de06 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,4 +1,4 @@
-$gap: 8px;
+$gap: var(--gap);
 
 $mobileBreakpoint: 800px;
 
@@ -6,8 +6,8 @@ $rounding: var(--rounding);
 $cardRounding: calc(3 * $rounding);
 $cardPadding: calc(3 * $rounding);
 
-$transitionTime: 0.3s;
+$transitionTime: 300ms;
 
-$nav-height: 60px;
+$nav-height: 64px;
 
 $minimalPagePadding: min(4rem, 4vw);
diff --git a/src/styles/globals.scss b/src/styles/globals.scss
index db200c716..224ad36e5 100644
--- a/src/styles/globals.scss
+++ b/src/styles/globals.scss
@@ -5,31 +5,39 @@
     margin: 0;
     box-sizing: border-box;
     font-family: ohma.$fonts-primary;
+    color: ohma.$colors-text;
 }
 
 html {
     scroll-behavior: smooth;
-    background-color: ohma.$colors-secondary;
+    background-color: ohma.$colors-surface-base;
 
-    --rounding: 12px;
+    --rounding: 1rem;
+    --gap: 0.5rem;
 
-    --primary: oklch(0.727 0.137 245.985);
-    --primary-l: 0.727;
-    --primary-c: 0.137;
-    --primary-h: 245.985;
-
-    --secondary: oklch(0.238 0.004 228.952);
-    --secondary-l: 0.238;
-    --secondary-c: 0.004;
-    --secondary-h: 228.952;
     --layer: hsl(210, 0%, 0%, 20%);
 
-
     --boxShadow:   hsl(207, 0%,    0%,    20%);
     --text:        hsl(0,   0%,    90%);
     --text-muted:  hsl(0,   0%,    75%);
     --text-inv:    hsl(0,   0%,    10%);
-    --text-sec:    hsl(0,   0%,    10%);
+
+    --surface-base:    hsl(240 8% 8%);
+    --surface-raised:  hsl(240 6% 12%);
+    --surface-hover:   hsl(210, 8%, 18%);
+    --surface-subtle:  hsl(210, 8%, 35%);
+
+    --ink-hover:  hsl(210, 8%, 65%);
+    --ink-strong: hsl(210, 8%, 75%);
+
+    --accent-red:     hsl(0, 80%, 60%);
+    --accent-orange:  hsl(40, 80%, 60%);
+    --accent-yellow:  hsl(60, 80%, 60%);
+    --accent-green:   hsl(120, 80%, 60%);
+    --accent-cyan:    hsl(180, 80%, 60%);
+    --accent-blue:    #037FFC;
+    --accent-magenta: hsl(300, 80%, 60%);
+    --accent-violet:  hsl(260, 80%, 60%);
 }
 
 body {
@@ -37,7 +45,41 @@ body {
     font-weight: ohma.$fonts-weight-s;
     overflow-x: hidden;
     overscroll-behavior-y:contain;
-    background-color: ohma.$colors-secondary;
+    background-color: ohma.$colors-surface-base;
+}
+
+* {
+    scrollbar-width: thin;
+    scrollbar-color: ohma.$colors-surface-subtle transparent;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: ohma.$colors-surface-subtle;
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+
+    &:hover {
+        background-color: ohma.$colors-ink-hover;
+    }
+}
+
+a {
+    color: ohma.$colors-accent-blue;
+    text-decoration: none;
+
+    &:hover {
+        text-decoration: underline;
+    }
 }
 
 h1 {
diff --git a/src/prisma/seeder/standard_store/images/Omegamai.jpeg b/standard_store/Omegamai.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/Omegamai.jpeg
rename to standard_store/Omegamai.jpeg
diff --git a/standard_store/album.jpeg b/standard_store/album.jpeg
new file mode 100644
index 000000000..66cb96451
Binary files /dev/null and b/standard_store/album.jpeg differ
diff --git a/src/prisma/seeder/standard_store/images/books.jpeg b/standard_store/books.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/books.jpeg
rename to standard_store/books.jpeg
diff --git a/standard_store/default_image.png b/standard_store/default_image.png
new file mode 100644
index 000000000..85e132aee
Binary files /dev/null and b/standard_store/default_image.png differ
diff --git "a/src/prisma/seeder/standard_store/images/dev_profile_images/Bj\303\270rn.jpg" "b/standard_store/dev_profile_images/Bj\303\270rn.jpg"
similarity index 100%
rename from "src/prisma/seeder/standard_store/images/dev_profile_images/Bj\303\270rn.jpg"
rename to "standard_store/dev_profile_images/Bj\303\270rn.jpg"
diff --git a/standard_store/dev_profile_images/Due.jpg b/standard_store/dev_profile_images/Due.jpg
new file mode 100644
index 000000000..d3b110c3c
Binary files /dev/null and b/standard_store/dev_profile_images/Due.jpg differ
diff --git a/standard_store/dev_profile_images/Ekorn.jpg b/standard_store/dev_profile_images/Ekorn.jpg
new file mode 100644
index 000000000..b4cd80433
Binary files /dev/null and b/standard_store/dev_profile_images/Ekorn.jpg differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Elefant.jpg b/standard_store/dev_profile_images/Elefant.jpg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/dev_profile_images/Elefant.jpg
rename to standard_store/dev_profile_images/Elefant.jpg
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Frosk.jpg b/standard_store/dev_profile_images/Frosk.jpg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/dev_profile_images/Frosk.jpg
rename to standard_store/dev_profile_images/Frosk.jpg
diff --git "a/src/prisma/seeder/standard_store/images/dev_profile_images/G\303\245s.jpg" "b/standard_store/dev_profile_images/G\303\245s.jpg"
similarity index 100%
rename from "src/prisma/seeder/standard_store/images/dev_profile_images/G\303\245s.jpg"
rename to "standard_store/dev_profile_images/G\303\245s.jpg"
diff --git a/standard_store/dev_profile_images/Hest.jpg b/standard_store/dev_profile_images/Hest.jpg
new file mode 100644
index 000000000..90f6c1185
Binary files /dev/null and b/standard_store/dev_profile_images/Hest.jpg differ
diff --git a/standard_store/dev_profile_images/Kanin.jpg b/standard_store/dev_profile_images/Kanin.jpg
new file mode 100644
index 000000000..403e48d17
Binary files /dev/null and b/standard_store/dev_profile_images/Kanin.jpg differ
diff --git "a/standard_store/dev_profile_images/L\303\270ve.png" "b/standard_store/dev_profile_images/L\303\270ve.png"
new file mode 100644
index 000000000..e3c41a059
Binary files /dev/null and "b/standard_store/dev_profile_images/L\303\270ve.png" differ
diff --git "a/standard_store/dev_profile_images/Papeg\303\270ye.jpg" "b/standard_store/dev_profile_images/Papeg\303\270ye.jpg"
new file mode 100644
index 000000000..d41f1565a
Binary files /dev/null and "b/standard_store/dev_profile_images/Papeg\303\270ye.jpg" differ
diff --git "a/standard_store/dev_profile_images/P\303\245fugl.jpg" "b/standard_store/dev_profile_images/P\303\245fugl.jpg"
new file mode 100644
index 000000000..163fb5afd
Binary files /dev/null and "b/standard_store/dev_profile_images/P\303\245fugl.jpg" differ
diff --git a/src/prisma/seeder/standard_store/images/dev_profile_images/Rev.jpg b/standard_store/dev_profile_images/Rev.jpg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/dev_profile_images/Rev.jpg
rename to standard_store/dev_profile_images/Rev.jpg
diff --git a/standard_store/dev_profile_images/Sjiraff.jpg b/standard_store/dev_profile_images/Sjiraff.jpg
new file mode 100644
index 000000000..32127917f
Binary files /dev/null and b/standard_store/dev_profile_images/Sjiraff.jpg differ
diff --git a/standard_store/dev_profile_images/Skilpadde.jpg b/standard_store/dev_profile_images/Skilpadde.jpg
new file mode 100644
index 000000000..6b97c36ab
Binary files /dev/null and b/standard_store/dev_profile_images/Skilpadde.jpg differ
diff --git a/standard_store/dev_profile_images/Slange.jpg b/standard_store/dev_profile_images/Slange.jpg
new file mode 100644
index 000000000..6010d047d
Binary files /dev/null and b/standard_store/dev_profile_images/Slange.jpg differ
diff --git a/standard_store/dev_profile_images/Ugle.jpg b/standard_store/dev_profile_images/Ugle.jpg
new file mode 100644
index 000000000..1a6ebb51b
Binary files /dev/null and b/standard_store/dev_profile_images/Ugle.jpg differ
diff --git "a/standard_store/dev_profile_images/\303\230rn.jpg" "b/standard_store/dev_profile_images/\303\230rn.jpg"
new file mode 100644
index 000000000..94b3912f0
Binary files /dev/null and "b/standard_store/dev_profile_images/\303\230rn.jpg" differ
diff --git a/src/prisma/seeder/standard_store/images/fair.jpeg b/standard_store/fair.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/fair.jpeg
rename to standard_store/fair.jpeg
diff --git a/standard_store/harambe.jpg b/standard_store/harambe.jpg
new file mode 100644
index 000000000..e749232e3
Binary files /dev/null and b/standard_store/harambe.jpg differ
diff --git a/src/prisma/seeder/standard_store/images/hovedbygget.jpeg b/standard_store/hovedbygget.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/hovedbygget.jpeg
rename to standard_store/hovedbygget.jpeg
diff --git a/src/prisma/seeder/standard_store/images/kappemann.jpeg b/standard_store/kappemann.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/kappemann.jpeg
rename to standard_store/kappemann.jpeg
diff --git a/src/prisma/seeder/standard_store/images/kappemann_bronse.png b/standard_store/kappemann_bronse.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/kappemann_bronse.png
rename to standard_store/kappemann_bronse.png
diff --git a/src/prisma/seeder/standard_store/images/kappemann_diamant.png b/standard_store/kappemann_diamant.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/kappemann_diamant.png
rename to standard_store/kappemann_diamant.png
diff --git a/src/prisma/seeder/standard_store/images/kappemann_gull.png b/standard_store/kappemann_gull.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/kappemann_gull.png
rename to standard_store/kappemann_gull.png
diff --git a/src/prisma/seeder/standard_store/images/kappemann_paske.png b/standard_store/kappemann_paske.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/kappemann_paske.png
rename to standard_store/kappemann_paske.png
diff --git a/src/prisma/seeder/standard_store/images/kappemann_solv.png b/standard_store/kappemann_solv.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/kappemann_solv.png
rename to standard_store/kappemann_solv.png
diff --git a/src/prisma/seeder/standard_store/images/kongsberg.png b/standard_store/kongsberg.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/kongsberg.png
rename to standard_store/kongsberg.png
diff --git a/src/prisma/seeder/standard_store/images/logo_simple.png b/standard_store/logo_simple.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/logo_simple.png
rename to standard_store/logo_simple.png
diff --git a/src/prisma/seeder/standard_store/images/logo_white.png b/standard_store/logo_white.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/logo_white.png
rename to standard_store/logo_white.png
diff --git a/src/prisma/seeder/standard_store/images/machine.jpeg b/standard_store/machine.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/machine.jpeg
rename to standard_store/machine.jpeg
diff --git a/src/prisma/seeder/standard_store/images/magisk_hatt.png b/standard_store/magisk_hatt.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/magisk_hatt.png
rename to standard_store/magisk_hatt.png
diff --git a/standard_store/magisk_hatt_white.png b/standard_store/magisk_hatt_white.png
new file mode 100644
index 000000000..c08d1e3ad
Binary files /dev/null and b/standard_store/magisk_hatt_white.png differ
diff --git a/src/prisma/seeder/standard_store/images/nordic.png b/standard_store/nordic.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/nordic.png
rename to standard_store/nordic.png
diff --git a/src/prisma/seeder/standard_store/images/ohma.jpeg b/standard_store/ohma.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/ohma.jpeg
rename to standard_store/ohma.jpeg
diff --git a/src/prisma/seeder/standard_store/images/omega_logo_white.png b/standard_store/omega_logo_white.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/omega_logo_white.png
rename to standard_store/omega_logo_white.png
diff --git a/src/prisma/seeder/standard_store/images/ov.jpeg b/standard_store/ov.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/ov.jpeg
rename to standard_store/ov.jpeg
diff --git a/src/prisma/seeder/standard_store/images/pwa.png b/standard_store/pwa.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/pwa.png
rename to standard_store/pwa.png
diff --git a/standard_store/pwa.svg b/standard_store/pwa.svg
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/prisma/seeder/standard_store/images/realfagsbygget.jpeg b/standard_store/realfagsbygget.jpeg
similarity index 100%
rename from src/prisma/seeder/standard_store/images/realfagsbygget.jpeg
rename to standard_store/realfagsbygget.jpeg
diff --git a/standard_store/treaty.jpg b/standard_store/treaty.jpg
new file mode 100644
index 000000000..9c1aaf2f3
Binary files /dev/null and b/standard_store/treaty.jpg differ
diff --git a/src/prisma/seeder/standard_store/images/vevcom_logo.png b/standard_store/vevcom_logo.png
similarity index 100%
rename from src/prisma/seeder/standard_store/images/vevcom_logo.png
rename to standard_store/vevcom_logo.png
diff --git a/standard_store/vevcom_logo.svg b/standard_store/vevcom_logo.svg
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/PrismaTestEnvironment.ts b/tests/PrismaTestEnvironment.ts
index 49c3fdd32..132993db5 100644
--- a/tests/PrismaTestEnvironment.ts
+++ b/tests/PrismaTestEnvironment.ts
@@ -1,10 +1,10 @@
+import { PrismaClient } from '@/prisma-generated-pn-client'
 import { v4 } from 'uuid'
 import NodeEnvironment from 'jest-environment-node'
 import { PrismaPg } from '@prisma/adapter-pg'
 import { execSync } from 'child_process'
 import { URL } from 'url'
 import type { EnvironmentContext, JestEnvironmentConfig } from '@jest/environment'
-import { PrismaClient } from '@/prisma-generated-pn-client'
 
 /**
  * Generates a modified version of the database URL environment variable
diff --git a/tests/services/dynamicImages.test.ts b/tests/services/dynamicImages.test.ts
new file mode 100644
index 000000000..f42488bf5
--- /dev/null
+++ b/tests/services/dynamicImages.test.ts
@@ -0,0 +1,392 @@
+import { Session } from '@/auth/session/Session'
+import { Smorekopp } from '@/services/error'
+import { prisma } from '@/prisma-pn-client-instance'
+import { dynamicImageOperations } from '@/services/images/dynamic/operations'
+import { beforeAll, beforeEach, describe, expect, test } from '@jest/globals'
+import type { SessionMaybeUser } from '@/auth/session/Session'
+import type { MembershipFiltered } from '@/services/groups/memberships/types'
+import type { VisibilityMatrix } from '@/services/visibility/types'
+
+/**
+ * These tests are about the authorization of the dynamic image service rather than its image
+ * handling: every operation is gated on the collection's own double level visibility (REGULAR to
+ * see, ADMIN to change), with IMAGE_ADMIN as a global bypass, so that is what is pinned down here.
+ */
+
+let currentOrder: number
+let groupOne: number
+let groupTwo: number
+let collectionCounter = 0
+
+/** A session that is an active member of the given groups, holding no permissions at all. */
+function sessionInGroups(...groupIds: number[]) {
+    const memberships: MembershipFiltered[] = groupIds.map(groupId => ({
+        groupId,
+        order: currentOrder,
+        active: true,
+        admin: false,
+    }))
+    return Session.fromJsObject({ user: null, permissions: [], memberships })
+}
+
+function sessionWithPermissions(...permissions: Parameters<typeof Session.fromDefaultPermissions>[0]) {
+    return Session.fromJsObject({ user: null, permissions, memberships: [] })
+}
+
+function activeIn(groupId: number): VisibilityMatrix {
+    return { requirements: [{ conditions: [{ type: 'ACTIVE', groupId }] }] }
+}
+
+/** One requirement satisfied by being active in any one of the given groups. */
+function activeInAnyOf(...groupIds: number[]): VisibilityMatrix {
+    return { requirements: [{ conditions: groupIds.map(groupId => ({ type: 'ACTIVE', groupId })) }] }
+}
+
+async function createManualGroup(shortName: string) {
+    const group = await prisma.group.create({
+        data: {
+            groupType: 'MANUAL_GROUP',
+            order: currentOrder,
+            manualGroup: { create: { name: shortName, shortName } },
+        },
+    })
+    return group.id
+}
+
+/**
+ * Creates a collection through the service and then sets its two levels. A fresh collection has
+ * two empty visibilities, and an empty admin level authorizes everyone, so no privileged session is
+ * needed to arrange one. The admin level is always written first: an empty admin level means
+ * "everyone administrates", which is not a sub-visibility of a narrowed regular level, so the
+ * service would (correctly) reject narrowing the regular level first. When a test only asks for a
+ * regular level the admin level is set to the same matrix, which keeps that invariant satisfied.
+ */
+async function createCollection({
+    regularLevel,
+    adminLevel,
+}: {
+    regularLevel?: VisibilityMatrix,
+    adminLevel?: VisibilityMatrix,
+} = {}) {
+    collectionCounter++
+    const collection = await dynamicImageOperations.createCollection({
+        data: {
+            collectionName: `Test collection ${collectionCounter}`,
+            collectionDescription: 'Laget av testene',
+        },
+        session: sessionWithPermissions('IMAGE_COLLECTION_CREATE'),
+    })
+
+    const implementationParams = { collectionId: collection.id }
+    const admin = adminLevel ?? regularLevel
+
+    if (admin) {
+        await dynamicImageOperations.visibility.updateAdminLevel({
+            implementationParams,
+            params: { visibilityId: collection.visibilityAdminId },
+            data: admin,
+            session: Session.empty(),
+        })
+    }
+    if (regularLevel) {
+        await dynamicImageOperations.visibility.updateRegularLevel({
+            implementationParams,
+            params: { visibilityId: collection.visibilityRegularId },
+            data: regularLevel,
+            session: admin ? sessionInGroups(...groupIdsOf(admin)) : Session.empty(),
+        })
+    }
+
+    return collection
+}
+
+/** The group ids named by every ACTIVE/ORDER condition of a matrix - enough to satisfy it in tests. */
+function groupIdsOf(visibility: VisibilityMatrix): number[] {
+    return visibility.requirements.flatMap(
+        requirement => requirement.conditions.map(condition => condition.groupId)
+    )
+}
+
+beforeAll(async () => {
+    const order = await prisma.omegaOrder.findFirstOrThrow({ orderBy: { order: 'desc' } })
+    currentOrder = order.order
+
+    groupOne = await createManualGroup('dynamic-image-test-group-one')
+    groupTwo = await createManualGroup('dynamic-image-test-group-two')
+})
+
+beforeEach(async () => {
+    // Collections created by a previous test would otherwise show up in the paging tests.
+    await prisma.imageCollection.deleteMany({ where: { special: null } })
+})
+
+describe('creating a dynamic collection', () => {
+    test('requires the IMAGE_COLLECTION_CREATE permission', async () => {
+        await expect(dynamicImageOperations.createCollection({
+            data: { collectionName: 'Ulovlig samling', collectionDescription: 'Skal ikke lages' },
+            session: Session.empty(),
+        })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+        expect(await prisma.imageCollection.count({ where: { name: 'Ulovlig samling' } })).toBe(0)
+    })
+
+    test('starts out with two empty visibilities', async () => {
+        const collection = await createCollection()
+
+        const matrix = await dynamicImageOperations.visibility.readDoubleLevelMatrix({
+            params: { collectionId: collection.id },
+            session: Session.empty(),
+        })
+
+        expect(matrix.regularLevel).toEqual({ requirements: [] })
+        expect(matrix.adminLevel).toEqual({ requirements: [] })
+    })
+})
+
+describe('reading a collection', () => {
+    test('a collection with an empty regular level is readable by anyone', async () => {
+        const collection = await createCollection()
+
+        await expect(dynamicImageOperations.readCollection({
+            params: { collectionId: collection.id },
+            session: Session.empty(),
+        })).resolves.toMatchObject({ id: collection.id })
+    })
+
+    test('the regular level gates reading', async () => {
+        const collection = await createCollection({ regularLevel: activeIn(groupOne) })
+
+        await expect(dynamicImageOperations.readCollection({
+            params: { collectionId: collection.id },
+            session: sessionInGroups(groupOne),
+        })).resolves.toMatchObject({ id: collection.id })
+
+        await expect(dynamicImageOperations.readCollection({
+            params: { collectionId: collection.id },
+            session: sessionInGroups(groupTwo),
+        })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+        await expect(dynamicImageOperations.readCollection({
+            params: { collectionId: collection.id },
+            session: Session.empty(),
+        })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+    })
+
+    test('IMAGE_ADMIN bypasses the regular level', async () => {
+        const collection = await createCollection({ regularLevel: activeIn(groupOne) })
+
+        await expect(dynamicImageOperations.readCollection({
+            params: { collectionId: collection.id },
+            session: sessionWithPermissions('IMAGE_ADMIN'),
+        })).resolves.toMatchObject({ id: collection.id })
+    })
+
+    test('a collection can also be read by name', async () => {
+        const collection = await createCollection()
+
+        await expect(dynamicImageOperations.readCollection({
+            params: { collectionName: collection.name },
+            session: Session.empty(),
+        })).resolves.toMatchObject({ id: collection.id })
+    })
+})
+
+describe('changing a collection', () => {
+    test('updating requires the admin level, not the regular level', async () => {
+        const collection = await createCollection({
+            regularLevel: activeInAnyOf(groupOne, groupTwo),
+            adminLevel: activeIn(groupTwo),
+        })
+
+        // groupOne may see the collection, but may not change it.
+        await expect(dynamicImageOperations.updateCollection({
+            params: { collectionId: collection.id },
+            data: { collectionName: 'Nytt navn' },
+            session: sessionInGroups(groupOne),
+        })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+        await dynamicImageOperations.updateCollection({
+            params: { collectionId: collection.id },
+            data: { collectionName: 'Nytt navn' },
+            session: sessionInGroups(groupTwo),
+        })
+
+        expect(await prisma.imageCollection.findUniqueOrThrow({
+            where: { id: collection.id },
+        })).toMatchObject({ name: 'Nytt navn' })
+    })
+
+    test('IMAGE_ADMIN bypasses the admin level', async () => {
+        const collection = await createCollection({ adminLevel: activeIn(groupOne) })
+
+        await dynamicImageOperations.updateCollection({
+            params: { collectionId: collection.id },
+            data: { collectionName: 'Endret av bildeadmin' },
+            session: sessionWithPermissions('IMAGE_ADMIN'),
+        })
+
+        expect(await prisma.imageCollection.findUniqueOrThrow({
+            where: { id: collection.id },
+        })).toMatchObject({ name: 'Endret av bildeadmin' })
+    })
+
+    test('destroying requires the admin level', async () => {
+        const collection = await createCollection({ adminLevel: activeIn(groupOne) })
+
+        await expect(dynamicImageOperations.destroyCollection({
+            params: { collectionId: collection.id },
+            session: sessionInGroups(groupTwo),
+        })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+        expect(await prisma.imageCollection.count({ where: { id: collection.id } })).toBe(1)
+
+        await dynamicImageOperations.destroyCollection({
+            params: { collectionId: collection.id },
+            session: sessionInGroups(groupOne),
+        })
+
+        expect(await prisma.imageCollection.count({ where: { id: collection.id } })).toBe(0)
+    })
+
+    test('destroying a collection also removes both of its visibilities', async () => {
+        const collection = await createCollection()
+
+        await dynamicImageOperations.destroyCollection({
+            params: { collectionId: collection.id },
+            session: Session.empty(),
+        })
+
+        expect(await prisma.visibility.count({
+            where: { id: { in: [collection.visibilityRegularId, collection.visibilityAdminId] } },
+        })).toBe(0)
+    })
+})
+
+describe('the collections visibility', () => {
+    test('the double level matrix is readable with the regular level', async () => {
+        const collection = await createCollection({ regularLevel: activeIn(groupOne) })
+
+        await expect(dynamicImageOperations.visibility.readDoubleLevelMatrix({
+            params: { collectionId: collection.id },
+            session: sessionInGroups(groupTwo),
+        })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+        await expect(dynamicImageOperations.visibility.readDoubleLevelMatrix({
+            params: { collectionId: collection.id },
+            session: sessionInGroups(groupOne),
+        })).resolves.toMatchObject({ regularLevel: activeIn(groupOne) })
+    })
+
+    test('changing either level requires the admin level', async () => {
+        const collection = await createCollection({ adminLevel: activeIn(groupOne) })
+
+        await expect(dynamicImageOperations.visibility.updateRegularLevel({
+            implementationParams: { collectionId: collection.id },
+            params: { visibilityId: collection.visibilityRegularId },
+            data: activeIn(groupTwo),
+            session: sessionInGroups(groupTwo),
+        })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+        await expect(dynamicImageOperations.visibility.updateAdminLevel({
+            implementationParams: { collectionId: collection.id },
+            params: { visibilityId: collection.visibilityAdminId },
+            data: activeIn(groupTwo),
+            session: sessionInGroups(groupTwo),
+        })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+    })
+
+    test('an administrator may not lock themselves out by narrowing the regular level', async () => {
+        const collection = await createCollection({ adminLevel: activeIn(groupOne) })
+
+        await expect(dynamicImageOperations.visibility.updateRegularLevel({
+            implementationParams: { collectionId: collection.id },
+            params: { visibilityId: collection.visibilityRegularId },
+            data: activeIn(groupTwo),
+            session: sessionInGroups(groupOne),
+        })).rejects.toThrow(new Smorekopp('BAD DATA'))
+    })
+
+    test('the visibility of one collection cannot be changed through another', async () => {
+        const [collection, otherCollection] = [await createCollection(), await createCollection()]
+
+        await expect(dynamicImageOperations.visibility.updateRegularLevel({
+            implementationParams: { collectionId: collection.id },
+            params: { visibilityId: otherCollection.visibilityRegularId },
+            data: activeIn(groupOne),
+            session: Session.empty(),
+        })).rejects.toThrow(new Smorekopp('DISSALLOWED'))
+    })
+})
+
+describe('paging over collections', () => {
+    const readPage = (session: SessionMaybeUser, onlyAdministrated = false) =>
+        dynamicImageOperations.readCollectionPage({
+            params: {
+                paging: {
+                    page: { pageSize: 12, page: 0, cursor: null },
+                    details: { showOnlyCollectionsSessionAdministrates: onlyAdministrated },
+                },
+            },
+            session,
+        })
+
+    test('only collections the session may see are listed', async () => {
+        const visible = await createCollection({ regularLevel: activeIn(groupOne) })
+        const hidden = await createCollection({ regularLevel: activeIn(groupTwo) })
+
+        const ids = (await readPage(sessionInGroups(groupOne))).map(collection => collection.id)
+
+        expect(ids).toContain(visible.id)
+        expect(ids).not.toContain(hidden.id)
+    })
+
+    test('IMAGE_ADMIN sees every collection', async () => {
+        const first = await createCollection({ regularLevel: activeIn(groupOne) })
+        const second = await createCollection({ regularLevel: activeIn(groupTwo) })
+
+        const ids = (await readPage(sessionWithPermissions('IMAGE_ADMIN'))).map(collection => collection.id)
+
+        expect(ids).toEqual(expect.arrayContaining([first.id, second.id]))
+    })
+
+    test('special collections are never listed among the dynamic ones', async () => {
+        const specialCount = await prisma.imageCollection.count({ where: { special: { not: null } } })
+        expect(specialCount).toBeGreaterThan(0)
+
+        const collections = await readPage(sessionWithPermissions('IMAGE_ADMIN'))
+
+        expect(collections.every(collection => collection.special === null)).toBe(true)
+    })
+
+    test('filtering on administrated collections uses the admin level', async () => {
+        const administrated = await createCollection({ adminLevel: activeIn(groupOne) })
+        const onlyVisible = await createCollection({ adminLevel: activeIn(groupTwo) })
+
+        const ids = (await readPage(sessionInGroups(groupOne), true)).map(collection => collection.id)
+
+        expect(ids).toContain(administrated.id)
+        expect(ids).not.toContain(onlyVisible.id)
+    })
+})
+
+describe('special collections are not reachable through the dynamic service', () => {
+    test('reading a special collection by name is refused', async () => {
+        const special = await prisma.imageCollection.findFirstOrThrow({ where: { special: { not: null } } })
+
+        await expect(dynamicImageOperations.readCollection({
+            params: { collectionName: special.name },
+            session: sessionWithPermissions('IMAGE_ADMIN'),
+        })).rejects.toThrow(Smorekopp)
+    })
+
+    test('destroying a special collection is refused', async () => {
+        const special = await prisma.imageCollection.findFirstOrThrow({ where: { special: { not: null } } })
+
+        await expect(dynamicImageOperations.destroyCollection({
+            params: { collectionId: special.id },
+            session: sessionWithPermissions('IMAGE_ADMIN'),
+        })).rejects.toThrow(Smorekopp)
+
+        expect(await prisma.imageCollection.count({ where: { id: special.id } })).toBe(1)
+    })
+})
diff --git a/tests/services/jobAds.test.ts b/tests/services/jobAds.test.ts
index bcefc0c92..f125869db 100644
--- a/tests/services/jobAds.test.ts
+++ b/tests/services/jobAds.test.ts
@@ -48,13 +48,15 @@ afterEach(async () => {
 
 describe('job ads', () => {
     test('create with unauthenticated user', async () => {
-        expect(jobAdOperations.create({
+        const countBefore = await prisma.jobAd.count()
+
+        await expect(jobAdOperations.create({
             data: CREATE_JOB_AD,
             session: Session.empty()
         })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
 
-        const count = await prisma.jobAd.count()
-        expect(count).toBe(0)
+        const countAfter = await prisma.jobAd.count()
+        expect(countAfter).toBe(countBefore)
     })
 
     test('create with authorized user', async () => {
@@ -147,20 +149,24 @@ describe('job ads', () => {
 
     test('destroy with unauthenticated user', async () => {
         // TODO: To avoid fragile tests, this should be refactored to use a seeded job ad.
+        const countBefore = await prisma.jobAd.count()
+
         const createRes = await jobAdOperations.create({
             data: CREATE_JOB_AD,
             bypassAuth: true
         })
 
-        expect(jobAdOperations.destroy({ params: { id: createRes.id }, session: Session.empty() }))
+        await expect(jobAdOperations.destroy({ params: { id: createRes.id }, session: Session.empty() }))
             .rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
 
-        const count = await prisma.jobAd.count()
-        expect(count).toBe(1)
+        const countAfter = await prisma.jobAd.count()
+        expect(countAfter).toBe(countBefore + 1)
     })
 
     test('destroy with authorized user', async () => {
         // TODO: To avoid fragile tests, this should be refactored to use a seeded job ad.
+        const countBefore = await prisma.jobAd.count()
+
         const createRes = await jobAdOperations.create({
             data: CREATE_JOB_AD,
             bypassAuth: true
@@ -174,7 +180,7 @@ describe('job ads', () => {
 
         await jobAdOperations.destroy({ params: { id: createRes.id }, session })
 
-        const count = await prisma.jobAd.count()
-        expect(count).toBe(0)
+        const countAfter = await prisma.jobAd.count()
+        expect(countAfter).toBe(countBefore)
     })
 })
diff --git a/tests/services/mail.test.ts b/tests/services/mail.test.ts
index a034c9c04..57e542ccc 100644
--- a/tests/services/mail.test.ts
+++ b/tests/services/mail.test.ts
@@ -1,6 +1,6 @@
 import { Smorekopp } from '@/services/error'
 import { prisma } from '@/prisma-pn-client-instance'
-import { readCurrentOmegaOrder } from '@/services/omegaOrder/read'
+import { omegaOrderOperations } from '@/services/omegaOrder/operations'
 import { aliasOperations } from '@/services/mail/alias/operations'
 import { mailingListOperations } from '@/services/mail/list/operations'
 import { mailAddressExternalOperations } from '@/services/mail/mailAddressExternal/operations'
@@ -175,7 +175,7 @@ describe('mail flow traversal', () => {
     })
 
     test('traversal from mailing list via group shows connected user', async () => {
-        const { order } = await readCurrentOmegaOrder()
+        const { order } = await omegaOrderOperations.readCurrent({ bypassAuth: true })
         const group = await prisma.group.create({ data: { groupType: 'MANUAL_GROUP', order } })
         testGroupIds.push(group.id)
         const user = await prisma.user.create({ data: { username: 'test-group-user', email: 'test-group@test.test' } })
@@ -256,7 +256,7 @@ describe('mail flow traversal', () => {
 
 describe('destroy mailing list user relation', () => {
     test('throws NOT FOUND when user is connected to list only via a group', async () => {
-        const { order } = await readCurrentOmegaOrder()
+        const { order } = await omegaOrderOperations.readCurrent({ bypassAuth: true })
         const group = await prisma.group.create({ data: { groupType: 'MANUAL_GROUP', order } })
         testGroupIds.push(group.id)
         const user = await prisma.user.create({ data: { username: 'test-destroy-user', email: 'test-destroy@test.test' } })
diff --git a/tests/services/visibility.test.ts b/tests/services/visibility.test.ts
new file mode 100644
index 000000000..bef6d6419
--- /dev/null
+++ b/tests/services/visibility.test.ts
@@ -0,0 +1,563 @@
+import { checkVisibility } from '@/auth/visibility/checkVisibility'
+import { isSubVisibility } from '@/auth/visibility/isSubVisibility'
+import { RequireLevelFromDoubleLevelVisibility } from '@/auth/authorizer/RequireLevelFromDoubleLevelVisibility'
+import { Session } from '@/auth/session/Session'
+import { Smorekopp } from '@/services/error'
+import { prisma } from '@/prisma-pn-client-instance'
+import { visibilityOperations } from '@/services/visibility/operations'
+import { implementDoubleLevelVisibilityOperations } from '@/services/visibility/implement'
+import { beforeAll, beforeEach, describe, expect, test } from '@jest/globals'
+import { z } from 'zod'
+import type { MembershipFiltered } from '@/services/groups/memberships/types'
+import type { VisibilityMatrix } from '@/services/visibility/types'
+
+/**
+ * A standalone implementation of the double level visibility contract. It deliberately owns no
+ * domain model of its own - its implementationParams are just the two visibility ids - so that
+ * everything `implementDoubleLevelVisibilityOperations` provides (the matrix read, both level
+ * updates, the ownership check and the admin-is-a-sub-of-regular invariant) is exercised without
+ * dragging in image collections or any other owning service.
+ */
+const testDoubleLevelVisibility = implementDoubleLevelVisibilityOperations({
+    implementationParamsSchema: z.object({
+        regularId: z.number(),
+        adminId: z.number(),
+    }),
+    authorizers: {
+        readDoubleLevelMatrix: ({ doubleLevelMatrix }) => RequireLevelFromDoubleLevelVisibility
+            .staticFields({ level: 'REGULAR', bypassPermission: null })
+            .dynamicFields({ doubleLevelMatrix }),
+        updateRegularLevel: ({ doubleLevelMatrix }) => RequireLevelFromDoubleLevelVisibility
+            .staticFields({ level: 'ADMIN', bypassPermission: null })
+            .dynamicFields({ doubleLevelMatrix }),
+        updateAdminLevel: ({ doubleLevelMatrix }) => RequireLevelFromDoubleLevelVisibility
+            .staticFields({ level: 'ADMIN', bypassPermission: null })
+            .dynamicFields({ doubleLevelMatrix }),
+    },
+    readDoubleLevel: async ({ prisma: client, implementationParams, include }) => {
+        const [regularLevel, adminLevel] = await Promise.all([
+            client.visibility.findUniqueOrThrow({ where: { id: implementationParams.regularId }, include }),
+            client.visibility.findUniqueOrThrow({ where: { id: implementationParams.adminId }, include }),
+        ])
+        return { regularLevel, adminLevel }
+    },
+})
+
+let currentOrder: number
+let groupOne: number
+let groupTwo: number
+
+/** A session that is an active member of the given groups, holding no permissions at all. */
+function sessionInGroups(...groupIds: number[]) {
+    const memberships: MembershipFiltered[] = groupIds.map(groupId => ({
+        groupId,
+        order: currentOrder,
+        active: true,
+        admin: false,
+    }))
+    return Session.fromJsObject({ user: null, permissions: [], memberships })
+}
+
+function activeIn(groupId: number): VisibilityMatrix {
+    return { requirements: [{ conditions: [{ type: 'ACTIVE', groupId }] }] }
+}
+
+async function createManualGroup(shortName: string) {
+    const group = await prisma.group.create({
+        data: {
+            groupType: 'MANUAL_GROUP',
+            order: currentOrder,
+            manualGroup: { create: { name: shortName, shortName } },
+        },
+    })
+    return group.id
+}
+
+/** Reads a stored visibility back as the plain matrix shape, for asserting on what was written. */
+async function readStoredMatrix(visibilityId: number): Promise<VisibilityMatrix> {
+    const visibility = await prisma.visibility.findUniqueOrThrow({
+        where: { id: visibilityId },
+        include: { requirements: { include: { conditions: true } } },
+    })
+    return {
+        requirements: visibility.requirements.map(requirement => ({
+            conditions: requirement.conditions.map(condition => (
+                condition.type === 'ORDER'
+                    ? { type: 'ORDER', groupId: condition.groupId, order: condition.order }
+                    : { type: 'ACTIVE', groupId: condition.groupId }
+            )),
+        })),
+    }
+}
+
+async function createVisibilityPair() {
+    const [regular, admin] = await Promise.all([
+        visibilityOperations.create.internalCall({}),
+        visibilityOperations.create.internalCall({}),
+    ])
+    return { regularId: regular.id, adminId: admin.id }
+}
+
+/** The group ids named by every condition of a matrix - enough to satisfy it in these tests. */
+function groupIdsOf(visibility: VisibilityMatrix): number[] {
+    return visibility.requirements.flatMap(
+        requirement => requirement.conditions.map(condition => condition.groupId)
+    )
+}
+
+/**
+ * Arranges a pair into the levels a test needs. The admin level is always written first: an empty
+ * admin level means "everyone administrates", which is not a sub-visibility of any narrowed regular
+ * level, so narrowing the regular level first would (correctly) be rejected by the invariant.
+ * When only a regular level is asked for, the admin level is set to the same matrix.
+ */
+async function arrangeLevels(
+    pair: { regularId: number, adminId: number },
+    { regularLevel, adminLevel }: { regularLevel?: VisibilityMatrix, adminLevel?: VisibilityMatrix },
+) {
+    const admin = adminLevel ?? regularLevel
+
+    if (admin) {
+        await testDoubleLevelVisibility.updateAdminLevel({
+            implementationParams: pair,
+            params: { visibilityId: pair.adminId },
+            data: admin,
+            session: Session.empty(),
+        })
+    }
+    if (regularLevel) {
+        await testDoubleLevelVisibility.updateRegularLevel({
+            implementationParams: pair,
+            params: { visibilityId: pair.regularId },
+            data: regularLevel,
+            session: admin ? sessionInGroups(...groupIdsOf(admin)) : Session.empty(),
+        })
+    }
+}
+
+beforeAll(async () => {
+    const order = await prisma.omegaOrder.findFirstOrThrow({ orderBy: { order: 'desc' } })
+    currentOrder = order.order
+
+    groupOne = await createManualGroup('visibility-test-group-one')
+    groupTwo = await createManualGroup('visibility-test-group-two')
+})
+
+describe('checkVisibility', () => {
+    const membershipInGroup = (groupId: number, active: boolean, order: number): MembershipFiltered => ({
+        groupId, active, order, admin: false,
+    })
+
+    test('an empty matrix is visible to everyone', () => {
+        expect(checkVisibility([], { requirements: [] })).toBe(true)
+    })
+
+    test('a requirement with no conditions can never be satisfied', () => {
+        expect(checkVisibility(
+            [membershipInGroup(1, true, 106)],
+            { requirements: [{ conditions: [] }] },
+        )).toBe(false)
+    })
+
+    test('conditions within one requirement are ORed', () => {
+        const visibility: VisibilityMatrix = {
+            requirements: [{
+                conditions: [
+                    { type: 'ACTIVE', groupId: 1 },
+                    { type: 'ACTIVE', groupId: 2 },
+                ],
+            }],
+        }
+
+        expect(checkVisibility([membershipInGroup(2, true, 106)], visibility)).toBe(true)
+        expect(checkVisibility([membershipInGroup(3, true, 106)], visibility)).toBe(false)
+    })
+
+    test('requirements are ANDed', () => {
+        const visibility: VisibilityMatrix = {
+            requirements: [
+                { conditions: [{ type: 'ACTIVE', groupId: 1 }] },
+                { conditions: [{ type: 'ACTIVE', groupId: 2 }] },
+            ],
+        }
+
+        expect(checkVisibility(
+            [membershipInGroup(1, true, 106), membershipInGroup(2, true, 106)],
+            visibility,
+        )).toBe(true)
+        expect(checkVisibility([membershipInGroup(1, true, 106)], visibility)).toBe(false)
+    })
+
+    test('an ACTIVE condition is not satisfied by an inactive membership', () => {
+        expect(checkVisibility(
+            [membershipInGroup(1, false, 106)],
+            activeIn(1),
+        )).toBe(false)
+    })
+
+    test('an ORDER condition matches the exact order, active or not', () => {
+        const visibility: VisibilityMatrix = {
+            requirements: [{ conditions: [{ type: 'ORDER', groupId: 1, order: 105 }] }],
+        }
+
+        expect(checkVisibility([membershipInGroup(1, false, 105)], visibility)).toBe(true)
+        expect(checkVisibility([membershipInGroup(1, true, 106)], visibility)).toBe(false)
+    })
+})
+
+describe('isSubVisibility', () => {
+    test('everything is a sub-visibility of the empty (everyone) matrix', () => {
+        expect(isSubVisibility(activeIn(1), { requirements: [] })).toBe(true)
+    })
+
+    test('identical matrices are sub-visibilities of each other', () => {
+        expect(isSubVisibility(activeIn(1), activeIn(1))).toBe(true)
+    })
+
+    test('a disjoint matrix is not a sub-visibility', () => {
+        expect(isSubVisibility(activeIn(1), activeIn(2))).toBe(false)
+    })
+
+    test('adding a requirement narrows, so it stays a sub-visibility', () => {
+        const stricter: VisibilityMatrix = {
+            requirements: [
+                { conditions: [{ type: 'ACTIVE', groupId: 1 }] },
+                { conditions: [{ type: 'ACTIVE', groupId: 2 }] },
+            ],
+        }
+
+        expect(isSubVisibility(stricter, activeIn(1))).toBe(true)
+        expect(isSubVisibility(activeIn(1), stricter)).toBe(false)
+    })
+
+    test('an ACTIVE condition does not satisfy an ORDER condition on the same group', () => {
+        expect(isSubVisibility(
+            activeIn(1),
+            { requirements: [{ conditions: [{ type: 'ORDER', groupId: 1, order: 106 }] }] },
+        )).toBe(false)
+    })
+})
+
+describe('visibility operations', () => {
+    test('a created visibility starts out with no requirements', async () => {
+        const visibility = await visibilityOperations.create.internalCall({})
+
+        expect(await readStoredMatrix(visibility.id)).toEqual({ requirements: [] })
+    })
+
+    test('update writes the requirements, and ORDER conditions keep their order', async () => {
+        const visibility = await visibilityOperations.create.internalCall({})
+
+        await visibilityOperations.update.internalCall({
+            params: { visibilityId: visibility.id },
+            data: {
+                requirements: [{
+                    conditions: [
+                        { type: 'ACTIVE', groupId: groupOne },
+                        { type: 'ORDER', groupId: groupTwo, order: currentOrder - 1 },
+                    ],
+                }],
+            },
+        })
+
+        const stored = await readStoredMatrix(visibility.id)
+        expect(stored.requirements).toHaveLength(1)
+        expect(stored.requirements[0].conditions).toEqual(expect.arrayContaining([
+            { type: 'ACTIVE', groupId: groupOne },
+            { type: 'ORDER', groupId: groupTwo, order: currentOrder - 1 },
+        ]))
+    })
+
+    test('update replaces the previous requirements instead of adding to them', async () => {
+        const visibility = await visibilityOperations.create.internalCall({})
+
+        await visibilityOperations.update.internalCall({
+            params: { visibilityId: visibility.id },
+            data: { requirements: [{ conditions: [{ type: 'ACTIVE', groupId: groupOne }] }] },
+        })
+        await visibilityOperations.update.internalCall({
+            params: { visibilityId: visibility.id },
+            data: { requirements: [{ conditions: [{ type: 'ACTIVE', groupId: groupTwo }] }] },
+        })
+
+        expect(await readStoredMatrix(visibility.id)).toEqual(activeIn(groupTwo))
+    })
+
+    test('update to an empty matrix removes every requirement', async () => {
+        const visibility = await visibilityOperations.create.internalCall({})
+
+        await visibilityOperations.update.internalCall({
+            params: { visibilityId: visibility.id },
+            data: { requirements: [{ conditions: [{ type: 'ACTIVE', groupId: groupOne }] }] },
+        })
+        await visibilityOperations.update.internalCall({
+            params: { visibilityId: visibility.id },
+            data: { requirements: [] },
+        })
+
+        expect(await readStoredMatrix(visibility.id)).toEqual({ requirements: [] })
+        expect(await prisma.visibilityRequirement.count({ where: { visibilityId: visibility.id } })).toBe(0)
+    })
+
+    test('destroy removes the visibility and cascades to its requirements', async () => {
+        const visibility = await visibilityOperations.create.internalCall({})
+        await visibilityOperations.update.internalCall({
+            params: { visibilityId: visibility.id },
+            data: { requirements: [{ conditions: [{ type: 'ACTIVE', groupId: groupOne }] }] },
+        })
+
+        await visibilityOperations.destroy.internalCall({ params: { visibilityId: visibility.id } })
+
+        expect(await prisma.visibility.findUnique({ where: { id: visibility.id } })).toBeNull()
+        expect(await prisma.visibilityRequirement.count({ where: { visibilityId: visibility.id } })).toBe(0)
+    })
+})
+
+describe('double level visibility implementation', () => {
+    let pair: { regularId: number, adminId: number }
+
+    beforeEach(async () => {
+        pair = await createVisibilityPair()
+    })
+
+    describe('reading the matrix', () => {
+        test('both levels are read back as matrices', async () => {
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })
+
+            const matrix = await testDoubleLevelVisibility.readDoubleLevelMatrix({
+                params: pair,
+                session: sessionInGroups(groupOne),
+            })
+
+            expect(matrix.regularLevel).toEqual({ requirements: [] })
+            expect(matrix.adminLevel).toEqual(activeIn(groupOne))
+        })
+
+        test('reading requires the regular level, not the admin level', async () => {
+            await arrangeLevels(pair, { regularLevel: activeIn(groupOne) })
+
+            await expect(testDoubleLevelVisibility.readDoubleLevelMatrix({
+                params: pair,
+                session: sessionInGroups(groupTwo),
+            })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+            await expect(testDoubleLevelVisibility.readDoubleLevelMatrix({
+                params: pair,
+                session: sessionInGroups(groupOne),
+            })).resolves.toBeDefined()
+        })
+    })
+
+    describe('authorization of updates', () => {
+        test('an empty admin level lets anyone administrate', async () => {
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })
+
+            expect(await readStoredMatrix(pair.adminId)).toEqual(activeIn(groupOne))
+        })
+
+        test('once set, only sessions satisfying the admin level may update either level', async () => {
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })
+
+            await expect(testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.regularId },
+                data: { requirements: [] },
+                session: sessionInGroups(groupTwo),
+            })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+            await expect(testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupTwo),
+                session: sessionInGroups(groupTwo),
+            })).rejects.toThrow(new Smorekopp('UNAUTHENTICATED'))
+
+            // The rejected updates must not have written anything.
+            expect(await readStoredMatrix(pair.adminId)).toEqual(activeIn(groupOne))
+        })
+
+        test('a session satisfying the admin level may update the admin level', async () => {
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })
+
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupTwo),
+                session: sessionInGroups(groupOne),
+            })
+
+            expect(await readStoredMatrix(pair.adminId)).toEqual(activeIn(groupTwo))
+        })
+    })
+
+    describe('ownership check', () => {
+        test('updateRegularLevel refuses a visibility id that is not the regular level', async () => {
+            await expect(testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })).rejects.toThrow(new Smorekopp('DISSALLOWED'))
+        })
+
+        test('updateAdminLevel refuses a visibility id that is not the admin level', async () => {
+            await expect(testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.regularId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })).rejects.toThrow(new Smorekopp('DISSALLOWED'))
+        })
+
+        test('a visibility belonging to another pair is refused', async () => {
+            const otherPair = await createVisibilityPair()
+
+            await expect(testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: otherPair.regularId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })).rejects.toThrow(new Smorekopp('DISSALLOWED'))
+        })
+    })
+
+    describe('admin level must stay a sub-visibility of the regular level', () => {
+        test('the regular level cannot be narrowed while the admin level is still empty', async () => {
+            // An empty admin level means everyone administrates, which is not a sub-visibility of
+            // any narrowed regular level - so the admin level has to be narrowed first.
+            await expect(testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.regularId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })).rejects.toThrow(new Smorekopp('BAD DATA'))
+
+            await arrangeLevels(pair, { regularLevel: activeIn(groupOne) })
+
+            expect(await readStoredMatrix(pair.regularId)).toEqual(activeIn(groupOne))
+        })
+
+        test('narrowing the regular level away from the admin level is rejected', async () => {
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })
+
+            await expect(testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.regularId },
+                data: activeIn(groupTwo),
+                session: sessionInGroups(groupOne),
+            })).rejects.toThrow(new Smorekopp('BAD DATA'))
+
+            // The invariant is checked before anything is written.
+            expect(await readStoredMatrix(pair.regularId)).toEqual({ requirements: [] })
+        })
+
+        test('widening the admin level past the regular level is rejected', async () => {
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })
+            await testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.regularId },
+                data: activeIn(groupOne),
+                session: sessionInGroups(groupOne),
+            })
+
+            await expect(testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupTwo),
+                session: sessionInGroups(groupOne),
+            })).rejects.toThrow(new Smorekopp('BAD DATA'))
+
+            expect(await readStoredMatrix(pair.adminId)).toEqual(activeIn(groupOne))
+        })
+
+        test('setting both levels to the same matrix is allowed', async () => {
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })
+            await testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.regularId },
+                data: activeIn(groupOne),
+                session: sessionInGroups(groupOne),
+            })
+
+            expect(await readStoredMatrix(pair.regularId)).toEqual(activeIn(groupOne))
+            expect(await readStoredMatrix(pair.adminId)).toEqual(activeIn(groupOne))
+        })
+
+        test('an admin level stricter than the regular level is allowed', async () => {
+            await arrangeLevels(pair, { regularLevel: activeIn(groupOne) })
+
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: {
+                    requirements: [
+                        { conditions: [{ type: 'ACTIVE', groupId: groupOne }] },
+                        { conditions: [{ type: 'ACTIVE', groupId: groupTwo }] },
+                    ],
+                },
+                session: sessionInGroups(groupOne),
+            })
+
+            expect((await readStoredMatrix(pair.adminId)).requirements).toHaveLength(2)
+        })
+
+        test('widening the regular level is always allowed', async () => {
+            await testDoubleLevelVisibility.updateAdminLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.adminId },
+                data: activeIn(groupOne),
+                session: Session.empty(),
+            })
+            await testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.regularId },
+                data: activeIn(groupOne),
+                session: sessionInGroups(groupOne),
+            })
+
+            await testDoubleLevelVisibility.updateRegularLevel({
+                implementationParams: pair,
+                params: { visibilityId: pair.regularId },
+                data: { requirements: [] },
+                session: sessionInGroups(groupOne),
+            })
+
+            expect(await readStoredMatrix(pair.regularId)).toEqual({ requirements: [] })
+        })
+    })
+})
diff --git a/tests/setup.ts b/tests/setup.ts
index 2caefe6ce..c60f016fe 100644
--- a/tests/setup.ts
+++ b/tests/setup.ts
@@ -1,7 +1,9 @@
-import seed from '@/prisma/seeder/src/seeder'
+import seed from '@/prisma/seeder/src/seed'
 import { beforeAll } from '@jest/globals'
 
+const timeout = 60 * 1000
+
 beforeAll(
     async () => await seed(false, false, false),
-    30 * 1000 // Timeout 30 seconds
+    timeout,
 )