diff --git a/src/app.css b/src/app.css
index 028c7f93..255886f1 100644
--- a/src/app.css
+++ b/src/app.css
@@ -131,6 +131,16 @@
   * {
     font-size: 15px;
   }
+  @media (prefers-color-scheme: dark) {
+    .select {
+      &,
+      & select {
+        &::picker(select) {
+          border: var(--border) solid var(--color-base-content);
+        }
+      }
+    }
+  }
 }
 
 .dropdown-content {
diff --git a/src/lib/components/CancelButton.svelte b/src/lib/components/CancelButton.svelte
new file mode 100644
index 00000000..80be3592
--- /dev/null
+++ b/src/lib/components/CancelButton.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import IconContainer from '../icons/IconContainer.svelte';
+  import IconButton, { type IconButtonProps } from './IconButton.svelte';
+  import { Icons } from '$lib/icons';
+
+  interface Props extends IconButtonProps {
+    returnTo?: string;
+    resetForm?: boolean;
+  }
+
+  let {
+    class: classes,
+    icon = Icons.Cancel,
+    label = 'Cancel',
+    returnTo: href,
+    resetForm = false,
+    ...rest
+  }: Props = $props();
+</script>
+
+{#if !rest.children && href}
+  <a class={['btn btn-secondary', classes]} {href}>
+    <IconContainer {icon} width={20} />
+    {label}
+  </a>
+{:else}
+  <IconButton
+    type={resetForm ? 'reset' : 'button'}
+    class={['btn-secondary', classes]}
+    {icon}
+    {label}
+    {...rest}
+  />
+{/if}
diff --git a/src/lib/components/CopyField.svelte b/src/lib/components/CopyField.svelte
new file mode 100644
index 00000000..b845f2a3
--- /dev/null
+++ b/src/lib/components/CopyField.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { onDestroy } from 'svelte';
+  import IconContainer from '../icons/IconContainer.svelte';
+  import { Icons } from '$lib/icons';
+
+  interface Props {
+    value: string;
+  }
+
+  const { value }: Props = $props();
+
+  let copied = $state(false);
+
+  let timeout: ReturnType<typeof setTimeout> | null = $state(null);
+
+  onDestroy(() => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  });
+</script>
+
+<button
+  class="cursor-copy"
+  type="button"
+  onclick={() => {
+    if (value) {
+      navigator.clipboard.writeText(value).then(
+        () => {
+          copied = true;
+          if (timeout) {
+            clearTimeout(timeout);
+          }
+          timeout = setTimeout(() => {
+            copied = false;
+          }, 5000);
+        },
+        (r) => console.log(r)
+      );
+    }
+  }}
+>
+  {#if copied}
+    <IconContainer icon={Icons.Checkmark} width={24} class="text-success" />
+  {:else}
+    <IconContainer icon={Icons.Copy} width={24} />
+  {/if}
+</button>
diff --git a/src/lib/components/IconButton.svelte b/src/lib/components/IconButton.svelte
new file mode 100644
index 00000000..e1f9a39a
--- /dev/null
+++ b/src/lib/components/IconButton.svelte
@@ -0,0 +1,43 @@
+<script lang="ts" module>
+  export interface IconButtonProps {
+    label?: string;
+    class?: ClassValue;
+    form?: string;
+    type?: HTMLButtonElement['type'];
+    icon?: IconType;
+    disabled?: boolean;
+    onclick?: (
+      e: MouseEvent & {
+        currentTarget: EventTarget & HTMLButtonElement;
+      }
+    ) => void;
+    children?: Snippet;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
+  import IconContainer from '../icons/IconContainer.svelte';
+  import { type IconType, Icons } from '$lib/icons';
+
+  let {
+    form,
+    type = 'button',
+    class: classes,
+    icon = Icons.Save,
+    disabled = false,
+    label = 'Save',
+    onclick,
+    children
+  }: IconButtonProps = $props();
+</script>
+
+<button {type} {form} class={['btn', classes]} {disabled} {onclick}>
+  {#if children}
+    {@render children()}
+  {:else}
+    <IconContainer {icon} width={20} />
+    {label}
+  {/if}
+</button>
diff --git a/src/lib/components/InputWithMessage.svelte b/src/lib/components/InputWithMessage.svelte
new file mode 100644
index 00000000..d94e0e3d
--- /dev/null
+++ b/src/lib/components/InputWithMessage.svelte
@@ -0,0 +1,40 @@
+<!--
+    @component
+    An input slot with an inline message (stylized)
+    
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ClassValue } from 'svelte/elements';
+
+  interface Props {
+    title?: { label?: string; class?: ClassValue };
+    message?: { label?: string; class?: ClassValue };
+    class?: ClassValue;
+    children?: Snippet;
+  }
+
+  let { title, message, class: classes, children }: Props = $props();
+</script>
+
+<label class={['flex flex-row items-center gap-2', classes]}>
+  <div class="fieldset-label flex-col items-start grow text-base-content">
+    {#if title}
+      <span class={['title', title.class]}>
+        {title.label}
+      </span>
+    {/if}
+    {#if message}
+      <span class={['text-sm', message.class]}>
+        {message.label}
+      </span>
+    {/if}
+  </div>
+  {@render children?.()}
+</label>
+
+<style>
+  .title {
+    font-weight: bold;
+  }
+</style>
diff --git a/src/lib/components/LabeledFormInput.svelte b/src/lib/components/LabeledFormInput.svelte
index 8c6b3e93..69160af6 100644
--- a/src/lib/components/LabeledFormInput.svelte
+++ b/src/lib/components/LabeledFormInput.svelte
@@ -2,23 +2,66 @@
     @component
     An input slot for a form (stylized)
 -->
-<script lang="ts">
+<script lang="ts" module>
   import type { Snippet } from 'svelte';
-
-  interface Props {
+  import type { ClassValue, HTMLInputAttributes } from 'svelte/elements';
+  import type { IconType } from '$lib/icons';
+  export interface Props {
     label: string;
-    classes?: string;
+    class?: ClassValue;
     children?: Snippet;
+    input?: HTMLInputAttributes & {
+      class?: ClassValue;
+      err?: string;
+      icon?: IconType;
+      iconClass?: ClassValue;
+      after?: Snippet;
+    };
+    validate?: boolean;
+  }
+</script>
+
+<script lang="ts" generics="T">
+  import IconContainer from '$lib/icons/IconContainer.svelte';
+
+  interface InstanceProps extends Props {
+    value?: T;
   }
 
-  let { label, classes, children }: Props = $props();
+  let {
+    label,
+    class: classes,
+    children,
+    input,
+    value = $bindable(),
+    validate = true
+  }: InstanceProps = $props();
 </script>
 
-<label class="flex flex-col w-full {classes}">
+<label class={['flex flex-col w-full', classes]}>
   <div class="label">
     <span class="fieldset-label">
       {label}
     </span>
   </div>
-  {@render children?.()}
+  {#if input}
+    <div class={['input w-full', validate && 'validator']}>
+      {#if input.icon}
+        <IconContainer
+          icon={input.icon}
+          width={20}
+          class={['cursor-pointer opacity-80', input.iconClass]}
+        />
+      {/if}
+      <input type="text" {...input} bind:value />
+      {@render input.after?.()}
+    </div>
+    {#if validate}
+      <span class="validator-hint">
+        {#if input.err}{input.err}{:else}&nbsp;{/if}
+      </span>
+    {/if}
+  {:else}
+    {@render children?.()}
+  {/if}
 </label>
diff --git a/src/lib/components/LinkToScriptoria.svelte b/src/lib/components/LinkToScriptoria.svelte
new file mode 100644
index 00000000..ef01f084
--- /dev/null
+++ b/src/lib/components/LinkToScriptoria.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+  import type { Prisma } from '@prisma/client';
+  import type { ClassValue } from 'svelte/elements';
+  import { env } from '$env/dynamic/public';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
+
+  interface Props {
+    client: Prisma.clientGetPayload<{ select: { development: true } }> | null;
+    bucket: Prisma.projectGetPayload<{ select: { url: true } }>['url'];
+    scope: 'project' | 'job' | 'build' | 'release';
+    id: number;
+    class?: ClassValue;
+  }
+
+  let { client, bucket, scope, id, class: classes }: Props = $props();
+</script>
+
+<a
+  class={['link', classes]}
+  target="_blank"
+  href="{client?.development
+    ? 'http://localhost:6173'
+    : env.PUBLIC_SCRIPTORIA_URL}/link/{scope}/{id}{bucket &&
+    `?bucket=${encodeURIComponent(bucket)}`}"
+>
+  View in Scriptoria <IconContainer icon={Icons.Open} width={16} />
+</a>
diff --git a/src/lib/components/PaginationHeader.svelte b/src/lib/components/PaginationHeader.svelte
new file mode 100644
index 00000000..e33d3cd1
--- /dev/null
+++ b/src/lib/components/PaginationHeader.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  interface Props {
+    page: { page: number; size: number };
+    count: number;
+  }
+
+  const { page, count }: Props = $props();
+</script>
+
+<p>
+  Showing <b>
+    {Math.min(page.page * page.size + 1, count)}-{Math.min((page.page + 1) * page.size, count)}
+  </b>
+  of
+  <b>{count}</b>
+  items
+</p>
diff --git a/src/lib/components/PasswordInput.svelte b/src/lib/components/PasswordInput.svelte
new file mode 100644
index 00000000..3a7d1bf7
--- /dev/null
+++ b/src/lib/components/PasswordInput.svelte
@@ -0,0 +1,31 @@
+<script lang="ts" generics="T">
+  import LabeledFormInput, {
+    type Props as LabelProps
+  } from '$lib/components/LabeledFormInput.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
+
+  interface Props extends LabelProps {
+    value?: T;
+  }
+  let { value = $bindable(), ...rest }: Props = $props();
+
+  let visible = $state(false);
+</script>
+
+{#snippet after()}
+  <button type="button" onclick={() => (visible = !visible)}>
+    <IconContainer icon={visible ? Icons.Visible : Icons.Invisible} width={16} />
+  </button>
+{/snippet}
+
+<LabeledFormInput
+  {...rest}
+  input={{
+    ...rest.input,
+    type: visible ? 'text' : 'password',
+    icon: rest.input?.icon ?? Icons.Key,
+    after
+  }}
+  bind:value
+/>
diff --git a/src/lib/components/SecureDisplay.svelte b/src/lib/components/SecureDisplay.svelte
index 50310574..69c48342 100644
--- a/src/lib/components/SecureDisplay.svelte
+++ b/src/lib/components/SecureDisplay.svelte
@@ -22,7 +22,11 @@
     class="w-full"
   />
   {#if value?.length}
-    <button type="button" class="flex flex-row items-center" onclick={() => (visible = !visible)}>
+    <button
+      type="button"
+      class="flex flex-row items-center cursor-pointer"
+      onclick={() => (visible = !visible)}
+    >
       <IconContainer icon={visible ? Icons.Visible : Icons.Invisible} width={16} />
     </button>
   {/if}
diff --git a/src/lib/components/SortTable.svelte b/src/lib/components/SortTable.svelte
deleted file mode 100644
index f052094e..00000000
--- a/src/lib/components/SortTable.svelte
+++ /dev/null
@@ -1,144 +0,0 @@
-<!--
-  A table that can be sorted by column.
-  @component
--->
-<script lang="ts" generics="RowItem extends Record<string, unknown>">
-  import type { Snippet } from 'svelte';
-  import { Icons } from '$lib/icons';
-  import IconContainer from '$lib/icons/IconContainer.svelte';
-
-  interface Props {
-    data: RowItem[];
-    /** Definition of the columns for the table */
-    columns: {
-      /** Internal id, used for determining which column is being sorted. Also dispatched to `onSort` */
-      id: string;
-      /** User-facing string for column headers */
-      header: string;
-      /** comparison function. Will not sort a field if this is undefined, even if `serverSide` is `true`.
-       *
-       * If `serverSide` is `true`, just use a dummy function like `() => 0`
-       */
-      compare?: (a: RowItem, b: RowItem) => number;
-    }[];
-    className?: string;
-    /** If this is true, will defer sorting to the server instead */
-    serverSide?: boolean;
-    /** Initial sorting direction */
-    startDesc?: boolean;
-    onSort?: (field: string, direction: 'asc' | 'desc') => void;
-    row: Snippet<[RowItem, number]>;
-  }
-
-  let {
-    data = $bindable(),
-    columns,
-    className = '',
-    serverSide = false,
-    startDesc = false,
-    onSort,
-    row
-  }: Props = $props();
-
-  let firstSortable = $derived(columns.find((c) => c.compare !== undefined)!);
-
-  /** Current field being sorted. Defaults to first field that can be sorted */
-  let current = $state(columns.find((c) => c.compare !== undefined)!);
-  let descending = $state(startDesc);
-
-  function sortColByDirection(key: (typeof columns)[0]) {
-    if (current.id !== key.id) {
-      // change current field
-      descending = false;
-      current = key;
-    } else {
-      if (descending) {
-        // reset to sort default field
-        if (current.id !== firstSortable.id) {
-          sortColByDirection(firstSortable);
-          return; //don't sort twice
-        } else {
-          descending = false;
-        }
-      } else {
-        descending = true;
-      }
-    }
-    if (serverSide) {
-      onSort?.(current.id, descending ? 'desc' : 'asc');
-    } else {
-      // sort based on current field
-      // if blank, sort first field
-      const compare = current.compare || firstSortable.compare;
-      data = data.sort((a, b) => {
-        return descending ? (compare?.(b, a) ?? 0) : (compare?.(a, b) ?? 0);
-      });
-    }
-  }
-</script>
-
-<div class="overflow-y {className}">
-  <table class="table">
-    <thead>
-      <tr>
-        {#each columns as c}
-          <th
-            onclick={() => {
-              if (c.compare) {
-                sortColByDirection(c);
-              }
-            }}
-          >
-            <label class="flex flex-row">
-              <span>{c.header}</span>
-              <span class="direction-arrow">
-                {#if current.id === c.id && c.compare}
-                  {#if descending}
-                    <IconContainer icon={Icons.SortDesc} width={24} />
-                  {:else}
-                    <IconContainer icon={Icons.SortAsc} width={24} />
-                  {/if}
-                {:else}
-                  &nbsp;
-                {/if}
-              </span>
-            </label>
-          </th>
-        {/each}
-      </tr>
-    </thead>
-    <tbody>
-      {#each data as d, i}
-        {@render row(d, i)}
-      {/each}
-    </tbody>
-  </table>
-</div>
-
-<style>
-  tr {
-    cursor: pointer;
-    user-select: none;
-  }
-  thead {
-    /* this helps prevent the vertical jankiness */
-    line-height: inherit;
-    position: sticky;
-    top: 0;
-    background-color: var(--color-neutral);
-  }
-  .direction-arrow {
-    display: inline-block;
-    /* reserve space for the arrow, so headers don't expand when arrow is visible */
-    min-width: 24px;
-    min-height: 26px;
-  }
-  label {
-    cursor: pointer;
-    user-select: none;
-  }
-  th {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-</style>
diff --git a/src/lib/components/StatusBadge.svelte b/src/lib/components/StatusBadge.svelte
new file mode 100644
index 00000000..64f477da
--- /dev/null
+++ b/src/lib/components/StatusBadge.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import IconContainer from '../icons/IconContainer.svelte';
+  import { Icons, getStatusIcon } from '$lib/icons';
+  import { Result } from '$lib/valibot';
+
+  interface Props {
+    status: string | null;
+  }
+  const { status }: Props = $props();
+</script>
+
+{#if status}
+  {@const { icon } = getStatusIcon(status)}
+  <b
+    class={[
+      'badge',
+      status === Result.Success
+        ? 'badge-success'
+        : status === Result.Failure
+          ? 'badge-error'
+          : status === Result.Aborted
+            ? 'badge-warning'
+            : 'badge-neutral'
+    ]}
+  >
+    {#if icon !== Icons.Unknown}
+      <IconContainer {icon} width={20} />
+    {/if}
+    {status}
+  </b>
+{/if}
diff --git a/src/lib/components/SubmitButton.svelte b/src/lib/components/SubmitButton.svelte
new file mode 100644
index 00000000..2011c47e
--- /dev/null
+++ b/src/lib/components/SubmitButton.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+  import IconButton, { type IconButtonProps } from './IconButton.svelte';
+  import { Icons } from '$lib/icons';
+
+  let {
+    class: classes,
+    icon = Icons.Save,
+    disabled = false,
+    label = 'Save',
+    ...rest
+  }: IconButtonProps = $props();
+</script>
+
+<IconButton type="submit" class={['btn-primary', classes]} {icon} {label} {disabled} {...rest} />
diff --git a/src/lib/icons/index.ts b/src/lib/icons/index.ts
index e04e0d8a..f6be1a8a 100644
--- a/src/lib/icons/index.ts
+++ b/src/lib/icons/index.ts
@@ -1,4 +1,4 @@
-import type { ApplicationType } from '$lib/valibot';
+import { type ApplicationType, Result, Status } from '$lib/valibot';
 
 const appIcons = import.meta.glob('/src/lib/icons/app-builders/*.svg', {
   eager: true,
@@ -9,43 +9,75 @@ export function getAppIcon(type: ApplicationType) {
   return appIcons[`/src/lib/icons/app-builders/${type}.svg`] ?? '';
 }
 
-export function getStatusIcon(status: string) {
-  switch (status.toLowerCase()) {
-    case 'success':
+export function getBucketIcon(url: string | null) {
+  if (url?.startsWith('s3')) return { title: 'S3 Bucket', icon: Icons.Bucket };
+  else if (url?.startsWith('ssh')) return { title: 'CodeCommit', icon: Icons.CodeCommit };
+  else return { title: 'URL', icon: Icons.URL };
+}
+
+export function getStatusIcon(status: string | null) {
+  switch (status) {
+    case Result.Success:
+    case Status.Completed:
       return { color: 'text-success', icon: 'icon-park-outline:success' };
-    case 'failure':
+    case Result.Failure:
       return { color: 'text-error', icon: 'material-symbols:error-outline-rounded' };
-    case 'aborted':
+    case Result.Aborted:
       return { color: 'text-warning', icon: 'ix:cancelled' };
-    case 'pending':
+    case 'PENDING':
       return { icon: 'material-symbols:pending-outline' };
+    case Status.Initialized:
+      return { icon: 'vaadin:start-cog' };
+    case Status.Accepted:
+      return { icon: Icons.Checkmark };
+    case Status.Active:
+      return { color: 'text-error', icon: 'nrk:radio-active' };
+    case Status.Expired:
+      return { icon: 'pajamas:expire' };
+    case Status.PostProcessing:
+      return { color: 'text-warning', icon: 'uis:process' };
     default:
       return { icon: Icons.Unknown };
   }
 }
 
 export const Icons = {
+  AddUser: 'mdi:user-add',
   Bucket: 'logos:aws-s3',
   Build: 'material-symbols:build',
+  Cancel: 'icon-park-outline:return',
+  Channel: 'mdi:broadcast',
+  Checkmark: 'mdi:check',
   Close: 'mdi:close',
   CodeBuild: 'logos:aws-codebuild',
   CodeCommit: 'logos:aws-codecommit',
+  Copy: 'mdi:content-copy',
   Dashboard: 'clarity:dashboard-line',
   Delete: 'mdi:trash',
   Edit: 'mdi:pencil',
+  Environment: 'mdi:console',
+  File: 'mdi:file',
+  Folder: 'material-symbols:folder-outline',
   Hamburger: 'mdi:hamburger-menu',
+  Info: 'mdi:info',
   Invisible: 'mdi:eye-off-outline',
   Key: 'material-symbols:key',
+  Language: 'mdi:language',
   Logout: 'mdi:logout',
   Open: 'mdi:open-in-new',
   Product: 'system-uicons:box',
   Project: 'material-symbols:credit-card-outline',
   Publish: 'material-symbols:publish',
+  Save: 'material-symbols:save-outline',
   Search: 'mdi:search',
   SortAsc: 'bx:sort-a-z',
   SortDesc: 'bx:sort-z-a',
+  Store: 'ic:twotone-store',
+  Targets: 'streamline-cyber:multi-platform-2',
   Unknown: 'carbon:unknown',
+  URL: 'solar:link-bold',
   User: 'mdi:user',
+  Version: 'mdi:tag',
   View: 'mdi:eye',
   Visible: 'mdi:eye'
 } as const;
@@ -53,4 +85,4 @@ export const Icons = {
 export type IconType =
   | (typeof Icons)[keyof typeof Icons]
   | ReturnType<typeof getAppIcon>
-  | ReturnType<typeof getStatusIcon>['icon'];
+  | ReturnType<typeof getBucketIcon | typeof getStatusIcon>['icon'];
diff --git a/src/lib/prisma/migrations/03_client_fields/migration.sql b/src/lib/prisma/migrations/03_client_fields/migration.sql
new file mode 100644
index 00000000..23ec37d6
--- /dev/null
+++ b/src/lib/prisma/migrations/03_client_fields/migration.sql
@@ -0,0 +1,3 @@
+-- AlterTable
+ALTER TABLE "public"."client" ADD COLUMN     "description" TEXT,
+ADD COLUMN     "development" BOOLEAN NOT NULL DEFAULT false;
diff --git a/src/lib/prisma/schema.prisma b/src/lib/prisma/schema.prisma
index 46eb7309..0e3d6265 100644
--- a/src/lib/prisma/schema.prisma
+++ b/src/lib/prisma/schema.prisma
@@ -34,6 +34,8 @@ model client {
   id           Int       @id @default(autoincrement())
   access_token String    @db.VarChar(255)
   prefix       String    @db.VarChar(4)
+  description  String?
+  development  Boolean   @default(false)
   created      DateTime? @default(now()) @db.Timestamp(6)
   updated      DateTime? @updatedAt @db.Timestamp(6)
   job          job[]
diff --git a/src/lib/server/job-executors/build.ts b/src/lib/server/job-executors/build.ts
index ffbc382c..d6419860 100644
--- a/src/lib/server/job-executors/build.ts
+++ b/src/lib/server/job-executors/build.ts
@@ -6,9 +6,8 @@ import { CodeBuild } from '../aws/codebuild';
 import { S3 } from '../aws/s3';
 import { AWSVars } from '../aws/vars';
 import { BullMQ, getQueues } from '../bullmq';
-import { Build } from '../models/build';
 import { prisma } from '../prisma';
-import { trimStrings } from '$lib/valibot';
+import { Result, Status, trimStrings } from '$lib/valibot';
 
 export async function product(job: Job<BullMQ.Build.Product>): Promise<unknown> {
   try {
@@ -42,7 +41,7 @@ export async function product(job: Job<BullMQ.Build.Product>): Promise<unknown>
             build_guid: lastBuildGuid,
             codebuild_url: CodeBuild.getCodeBuildUrl('build_app', lastBuildGuid),
             console_text_url: CodeBuild.getConsoleTextUrl('build_app', lastBuildGuid),
-            status: Build.Status.Active
+            status: Status.Active
           },
           'build',
           job.log
@@ -74,8 +73,8 @@ export async function product(job: Job<BullMQ.Build.Product>): Promise<unknown>
       where: { id: job.data.buildId },
       data: trimStrings(
         {
-          result: Build.Result.Failure,
-          status: Build.Status.Completed,
+          result: Result.Failure,
+          status: Status.Completed,
           error: String(e)
         },
         'build',
@@ -107,8 +106,8 @@ async function getVersionCode(
   const build = await prisma.build.aggregate({
     where: {
       job_id: job.id,
-      status: Build.Status.Completed,
-      result: Build.Result.Success
+      status: Status.Completed,
+      result: Result.Success
     },
     _max: {
       version_code: true
diff --git a/src/lib/server/job-executors/polling.ts b/src/lib/server/job-executors/polling.ts
index 7530eca8..c9d2f014 100644
--- a/src/lib/server/job-executors/polling.ts
+++ b/src/lib/server/job-executors/polling.ts
@@ -3,11 +3,9 @@ import type { Job } from 'bullmq';
 import { CodeBuild } from '../aws/codebuild';
 import { AWSVars } from '../aws/vars';
 import { BullMQ, getQueues } from '../bullmq';
-import { Build } from '../models/build';
 import { prisma } from '../prisma';
-import { Release } from '$lib/server/models/release';
 import type { Logger } from '$lib/utils';
-import { trimStrings } from '$lib/valibot';
+import { Result, Status, trimStrings } from '$lib/valibot';
 
 export async function build(job: Job<BullMQ.Polling.Build>): Promise<unknown> {
   try {
@@ -35,17 +33,17 @@ export async function build(job: Job<BullMQ.Polling.Build>): Promise<unknown> {
 
       if (codeBuild.isBuildComplete(buildStatus)) {
         await getQueues().Polling.removeJobScheduler(job.name);
-        build.status = Build.Status.PostProcessing;
+        build.status = Status.PostProcessing;
         status = codeBuild.getStatus(buildStatus);
         switch (status) {
           case CodeBuild.Status.Failed:
           case CodeBuild.Status.Fault:
           case CodeBuild.Status.TimedOut:
-            build.result = Build.Result.Failure;
+            build.result = Result.Failure;
             await handleBuildFailure(build);
             break;
           case CodeBuild.Status.Stopped:
-            build.result = Build.Result.Aborted;
+            build.result = Result.Aborted;
             await handleBuildFailure(build);
             break;
           case CodeBuild.Status.Succeeded:
@@ -80,8 +78,8 @@ export async function build(job: Job<BullMQ.Polling.Build>): Promise<unknown> {
       where: { id: job.data.buildId },
       data: trimStrings(
         {
-          result: Build.Result.Failure,
-          status: Build.Status.Completed,
+          result: Result.Failure,
+          status: Status.Completed,
           error: String(e)
         },
         'build',
@@ -129,21 +127,21 @@ export async function release(job: Job<BullMQ.Polling.Release>): Promise<unknown
 
       if (codeBuild.isBuildComplete(buildStatus)) {
         await getQueues().Polling.removeJobScheduler(job.name);
-        release.status = Build.Status.PostProcessing;
+        release.status = Status.PostProcessing;
         status = codeBuild.getStatus(buildStatus);
         switch (status) {
           case CodeBuild.Status.Failed:
           case CodeBuild.Status.Fault:
           case CodeBuild.Status.TimedOut:
-            release.result = Build.Result.Failure;
+            release.result = Result.Failure;
             await handleReleaseFailure(release, job.log);
             break;
           case CodeBuild.Status.Stopped:
-            release.result = Build.Result.Aborted;
+            release.result = Result.Aborted;
             await handleReleaseFailure(release, job.log);
             break;
           case CodeBuild.Status.Succeeded:
-            release.result = Build.Result.Success;
+            release.result = Result.Success;
             await prisma.build.update({
               where: { id: release.build.id },
               data: { channel: release.channel }
@@ -176,7 +174,7 @@ export async function release(job: Job<BullMQ.Polling.Release>): Promise<unknown
     job.log(`${e}`);
     await prisma.release.updateMany({
       where: { id: job.data.releaseId },
-      data: { result: Build.Result.Failure, status: Release.Status.Completed }
+      data: { result: Result.Failure, status: Status.Completed }
     });
     // rethrow so error makes it to HoneyComb
     throw e;
diff --git a/src/lib/server/job-executors/release.ts b/src/lib/server/job-executors/release.ts
index 4c206890..632f95ce 100644
--- a/src/lib/server/job-executors/release.ts
+++ b/src/lib/server/job-executors/release.ts
@@ -5,9 +5,7 @@ import { S3 } from '../aws/s3';
 import { AWSVars } from '../aws/vars';
 import { BullMQ, getQueues } from '../bullmq';
 import { prisma } from '../prisma';
-import { Build } from '$lib/server/models/build';
-import { Release } from '$lib/server/models/release';
-import { trimStrings } from '$lib/valibot';
+import { Result, Status, trimStrings } from '$lib/valibot';
 
 export async function product(job: Job<BullMQ.Release.Product>): Promise<unknown> {
   try {
@@ -40,7 +38,7 @@ export async function product(job: Job<BullMQ.Release.Product>): Promise<unknown
             build_guid: lastBuildGuid,
             codebuild_url: CodeBuild.getCodeBuildUrl('publish_app', lastBuildGuid),
             console_text_url: CodeBuild.getConsoleTextUrl('publish_app', lastBuildGuid),
-            status: Release.Status.Active
+            status: Status.Active
           },
           'release',
           job.log
@@ -63,8 +61,8 @@ export async function product(job: Job<BullMQ.Release.Product>): Promise<unknown
       where: { id: job.data.releaseId },
       data: trimStrings(
         {
-          result: Build.Result.Failure,
-          status: Release.Status.Completed,
+          result: Result.Failure,
+          status: Status.Completed,
           error: String(e)
         },
         'release',
diff --git a/src/lib/server/job-executors/s3.ts b/src/lib/server/job-executors/s3.ts
index c41ea4ad..fc0837a2 100644
--- a/src/lib/server/job-executors/s3.ts
+++ b/src/lib/server/job-executors/s3.ts
@@ -4,10 +4,8 @@ import { join } from 'node:path';
 import { S3 } from '$lib/server/aws/s3';
 import type { BullMQ } from '$lib/server/bullmq';
 import type { BuildForPrefix } from '$lib/server/models/artifacts';
-import { Build } from '$lib/server/models/build';
-import { Release } from '$lib/server/models/release';
 import { prisma } from '$lib/server/prisma';
-import { trimStrings } from '$lib/valibot';
+import { Result, Status, trimStrings } from '$lib/valibot';
 
 export async function save(job: Job<BullMQ.S3.CopyArtifacts>): Promise<unknown> {
   const id = job.data.id;
@@ -23,8 +21,8 @@ export async function save(job: Job<BullMQ.S3.CopyArtifacts>): Promise<unknown>
         where: { id },
         data: {
           ...release,
-          status: Release.Status.Completed,
-          result: Build.Result.Success,
+          status: Status.Completed,
+          result: Result.Success,
           build: undefined
         }
       });
@@ -116,8 +114,8 @@ export async function save(job: Job<BullMQ.S3.CopyArtifacts>): Promise<unknown>
         data: trimStrings(
           {
             ...build,
-            status: Build.Status.Completed,
-            result: Build.Result.Success,
+            status: Status.Completed,
+            result: Result.Success,
             job: undefined
           },
           'build',
@@ -147,8 +145,8 @@ export async function error(job: Job<BullMQ.S3.CopyErrors>): Promise<unknown> {
         data: trimStrings(
           {
             ...release,
-            status: Build.Status.Completed,
-            result: Build.Result.Failure,
+            status: Status.Completed,
+            result: Result.Failure,
             build: undefined
           },
           'release',
@@ -165,8 +163,8 @@ export async function error(job: Job<BullMQ.S3.CopyErrors>): Promise<unknown> {
         data: trimStrings(
           {
             ...build,
-            status: Build.Status.Completed,
-            result: Build.Result.Failure,
+            status: Status.Completed,
+            result: Result.Failure,
             job: undefined
           },
           'build',
diff --git a/src/lib/server/models/build.ts b/src/lib/server/models/build.ts
index 6e0d7313..40209080 100644
--- a/src/lib/server/models/build.ts
+++ b/src/lib/server/models/build.ts
@@ -4,21 +4,6 @@ import { getArtfactFilenameCount, getArtifactUrl, getArtifactUrls } from './arti
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Build {
-  export enum Status {
-    Initialized = 'initialized',
-    Accepted = 'accepted',
-    Active = 'active',
-    Expired = 'expired',
-    PostProcessing = 'postprocessing',
-    Completed = 'completed'
-  }
-
-  export enum Result {
-    Success = 'SUCCESS',
-    Failure = 'FAILURE',
-    Aborted = 'ABORTED'
-  }
-
   export enum Channel {
     Unpublished = 'unpublished',
     Alpha = 'alpha',
diff --git a/src/lib/server/models/release.ts b/src/lib/server/models/release.ts
index 54cd5e05..eb572dce 100644
--- a/src/lib/server/models/release.ts
+++ b/src/lib/server/models/release.ts
@@ -4,15 +4,6 @@ import { getArtifactUrl } from './artifacts';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 export namespace Release {
-  export enum Status {
-    Initialized = 'initialized',
-    Accepted = 'accepted',
-    Active = 'active',
-    Expired = 'expired',
-    Completed = 'completed',
-    PostProcessing = 'postprocessing'
-  }
-
   export enum Artifact {
     CloudWatch = 'cloudWatch',
     ConsoleText = 'consoleText',
diff --git a/src/lib/utils/sorting.ts b/src/lib/utils/sorting.ts
index 2dc69b13..823aa0e6 100644
--- a/src/lib/utils/sorting.ts
+++ b/src/lib/utils/sorting.ts
@@ -1,12 +1,12 @@
 interface NamedEntity {
-  Name: string | null | undefined;
+  name: string | null | undefined;
 }
 
 export function byName(
   a: NamedEntity | null | undefined,
   b: NamedEntity | null | undefined
 ): number {
-  return byString(a?.Name, b?.Name);
+  return byString(a?.name, b?.name);
 }
 
 export function byString(a: string | null | undefined, b: string | null | undefined): number {
diff --git a/src/lib/valibot.ts b/src/lib/valibot.ts
index d978e2bd..46b04544 100644
--- a/src/lib/valibot.ts
+++ b/src/lib/valibot.ts
@@ -1,5 +1,6 @@
 import * as v from 'valibot';
 import { type Logger, defaultLogger } from './utils';
+import { byString } from './utils/sorting';
 
 export const idSchema = v.pipe(v.number(), v.minValue(0), v.integer());
 
@@ -8,18 +9,6 @@ export const paramNumber = v.pipe(
   v.transform((s) => parseInt(s))
 );
 
-export function convertEmptyStrToNull(limit?: number) {
-  return v.nullable(
-    v.union([
-      v.pipe(
-        v.literal(''),
-        v.transform(() => null)
-      ),
-      limit ? v.pipe(v.string(), v.maxBytes(limit)) : v.string()
-    ])
-  );
-}
-
 /** mostly for product IDs */
 export const stringIdSchema = v.pipe(v.string(), v.uuid());
 
@@ -28,12 +17,6 @@ export const paginateSchema = v.object({
   size: idSchema
 });
 
-export function selectFrom<T extends Record<string, unknown>>(entries: T) {
-  return Object.fromEntries(Object.keys(entries).map((k) => [k, true])) as {
-    [Property in keyof T]: true;
-  };
-}
-
 export const tableSchema = v.object({
   search: v.string(),
   page: paginateSchema,
@@ -45,6 +28,15 @@ export const tableSchema = v.object({
   )
 });
 
+export const JSON2Entries = v.nullable(
+  v.pipe(
+    v.string(),
+    v.parseJson(),
+    v.looseObject({}),
+    v.transform((o) => Object.entries(o).sort(([a, _1], [b, _2]) => byString(a, b)))
+  )
+);
+
 export const stringLimits = {
   build: {
     status: 255,
@@ -128,3 +120,20 @@ export const applicationTypes = [
   'keyboardappbuilder'
 ] as const;
 export type ApplicationType = (typeof applicationTypes)[number];
+
+export const Status = {
+  Initialized: 'initialized',
+  Accepted: 'accepted',
+  Active: 'active',
+  Expired: 'expired',
+  PostProcessing: 'postprocessing',
+  Completed: 'completed'
+} as const;
+export type Status = (typeof Status)[keyof typeof Status];
+
+export const Result = {
+  Success: 'SUCCESS',
+  Failure: 'FAILURE',
+  Aborted: 'ABORTED'
+} as const;
+export type Result = (typeof Result)[keyof typeof Result];
diff --git a/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/+server.ts b/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/+server.ts
index eae6d10a..8bba557e 100644
--- a/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/+server.ts
+++ b/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/+server.ts
@@ -5,7 +5,7 @@ import { Build } from '$lib/server/models/build';
 import { Release } from '$lib/server/models/release';
 import { prisma } from '$lib/server/prisma';
 import { ErrorResponse } from '$lib/utils';
-import { stringLimits } from '$lib/valibot';
+import { Status, stringLimits } from '$lib/valibot';
 
 // GET /job/[id]/build/[id]
 export const GET: RequestHandler = async ({ params }) => {
@@ -165,7 +165,7 @@ export const DELETE: RequestHandler = async ({ params }) => {
     prisma.build.deleteMany({ where: { id: build.id } })
   ]);
 
-  if (build.build_guid && build.status !== Build.Status.Completed) {
+  if (build.build_guid && build.status !== Status.Completed) {
     await getQueues().Builds.add(`Cancel Build #${build.id}`, {
       type: BullMQ.JobType.Build_Cancel,
       guid: build.build_guid,
@@ -174,7 +174,7 @@ export const DELETE: RequestHandler = async ({ params }) => {
   }
 
   for (const release of build.release) {
-    if (release.build_guid && release.status !== Release.Status.Completed) {
+    if (release.build_guid && release.status !== Status.Completed) {
       await getQueues().Releases.add(`Cancel Release #${release.id}`, {
         type: BullMQ.JobType.Release_Cancel,
         guid: release.build_guid,
diff --git a/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/release/[releaseId=idNumber]/+server.ts b/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/release/[releaseId=idNumber]/+server.ts
index a12ad4a7..42f007a7 100644
--- a/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/release/[releaseId=idNumber]/+server.ts
+++ b/src/routes/(api)/job/[jobId=idNumber]/build/[buildId=idNumber]/release/[releaseId=idNumber]/+server.ts
@@ -3,6 +3,7 @@ import { BullMQ, getQueues } from '$lib/server/bullmq';
 import { Release } from '$lib/server/models/release';
 import { prisma } from '$lib/server/prisma';
 import { ErrorResponse } from '$lib/utils';
+import { Status } from '$lib/valibot';
 
 // GET /job/[id]/build/[id]/release/[id]
 export const GET: RequestHandler = async ({ params }) => {
@@ -82,7 +83,7 @@ export const DELETE: RequestHandler = async ({ params }) => {
 
   await prisma.release.delete({ where: { id: release.id } });
 
-  if (release.build_guid && release.status !== Release.Status.Completed) {
+  if (release.build_guid && release.status !== Status.Completed) {
     await getQueues().Releases.add(`Cancel Release #${release.id}`, {
       type: BullMQ.JobType.Release_Cancel,
       guid: release.build_guid,
diff --git a/src/routes/(api)/project/+server.ts b/src/routes/(api)/project/+server.ts
index e9582e1f..d65a9d33 100644
--- a/src/routes/(api)/project/+server.ts
+++ b/src/routes/(api)/project/+server.ts
@@ -4,7 +4,7 @@ import type { RequestHandler } from './$types';
 import { AWSVars } from '$lib/server/aws/vars';
 import { prisma } from '$lib/server/prisma';
 import { ErrorResponse } from '$lib/utils';
-import { applicationTypes, stringLimits } from '$lib/valibot';
+import { Result, Status, applicationTypes, stringLimits } from '$lib/valibot';
 
 const projectSchema = v.strictObject({
   app_id: v.pipe(v.string(), v.picklist(applicationTypes)),
@@ -22,8 +22,8 @@ export const POST: RequestHandler = async ({ request, locals }) => {
   const project = await prisma.project.create({
     data: {
       ...withoutStorage,
-      status: 'completed',
-      result: 'SUCCESS',
+      status: Status.Completed,
+      result: Result.Success,
       client_id: locals.clientId
     },
     include: {
diff --git a/src/routes/(ui)/build-admin/+page.server.ts b/src/routes/(ui)/build-admin/+page.server.ts
index 5cef4334..404ac48a 100644
--- a/src/routes/(ui)/build-admin/+page.server.ts
+++ b/src/routes/(ui)/build-admin/+page.server.ts
@@ -5,13 +5,14 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { tableSchema } from '$lib/valibot';
 
-const select: Prisma.buildSelect = {
+const select = {
   id: true,
   job_id: true,
   status: true,
   result: true,
-  codebuild_url: true
-};
+  codebuild_url: true,
+  build_guid: true
+} as const satisfies Prisma.buildSelect;
 
 export const load = (async () => {
   const builds = await prisma.build.findMany({ select, take: 20, orderBy: { id: 'desc' } });
diff --git a/src/routes/(ui)/build-admin/+page.svelte b/src/routes/(ui)/build-admin/+page.svelte
index 36a6f5f2..76b5734e 100644
--- a/src/routes/(ui)/build-admin/+page.svelte
+++ b/src/routes/(ui)/build-admin/+page.svelte
@@ -3,8 +3,10 @@
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
-  import { Icons, getStatusIcon } from '$lib/icons';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import { Icons } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
 
@@ -76,56 +78,30 @@
       </div>
     </div>
   </form>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        count
-      )}
-    </b>
-    of
-    <b>{count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each builds as build}
-      {@const status = build.result || build.status}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow flex flex-row gap-2 items-start">
+          <h3 class="grow flex flex-row gap-2 items-start pl-1">
             <a class="link" href="/build-admin/view?id={build.id}">#{build.id}</a>
-            {#if status}
-              {@const { icon } = getStatusIcon(status)}
-              <b
-                class={[
-                  'badge',
-                  status === 'SUCCESS'
-                    ? 'badge-success'
-                    : status === 'FAILURE'
-                      ? 'badge-error'
-                      : status === 'ABORTED'
-                        ? 'badge-warning'
-                        : 'badge-neutral'
-                ]}
-              >
-                {#if icon !== Icons.Unknown}
-                  <IconContainer {icon} width={20} />
-                {/if}
-                {status}
-              </b>
-            {/if}
+            <StatusBadge status={build.result || build.status} />
           </h3>
         </div>
-        <div class="flex flex-row items-center gap-x-1">
+        <div class="flex flex-row items-center gap-x-1 pl-1">
           <IconContainer icon={Icons.Product} width={16} />
           <a class="link mr-2" href="/job-admin/view?id={build.job_id}">
             #{build.job_id}
           </a>
-          {#if build.codebuild_url}
+          {#if build.codebuild_url || build.build_guid}
             <IconContainer icon={Icons.CodeBuild} width={16} />
-            <a class="link mr-2" href={build.codebuild_url} target="_blank">
-              CodeBuild <IconContainer icon={Icons.Open} width={16} />
-            </a>
+            {#if build.codebuild_url}
+              <a class="link" href={build.codebuild_url} target="_blank">
+                CodeBuild <IconContainer icon={Icons.Open} width={16} />
+              </a>
+            {:else}
+              <span>{build.build_guid}</span>
+            {/if}
           {/if}
         </div>
       </div>
diff --git a/src/routes/(ui)/build-admin/update/+page.server.ts b/src/routes/(ui)/build-admin/update/+page.server.ts
deleted file mode 100644
index 8d83ea62..00000000
--- a/src/routes/(ui)/build-admin/update/+page.server.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { SpanStatusCode, trace } from '@opentelemetry/api';
-import { error, redirect } from '@sveltejs/kit';
-import { fail, superValidate } from 'sveltekit-superforms';
-import { valibot } from 'sveltekit-superforms/adapters';
-import * as v from 'valibot';
-import type { Actions, PageServerLoad } from './$types';
-import { prisma } from '$lib/server/prisma';
-import {
-  convertEmptyStrToNull,
-  idSchema,
-  paramNumber,
-  selectFrom,
-  stringIdSchema,
-  stringLimits
-} from '$lib/valibot';
-
-const buildSchema = v.object({
-  job_id: idSchema,
-  status: v.pipe(convertEmptyStrToNull(stringLimits.build.status)),
-  build_guid: v.pipe(convertEmptyStrToNull(), v.nullable(stringIdSchema)),
-  result: convertEmptyStrToNull(stringLimits.build.result),
-  error: v.pipe(
-    convertEmptyStrToNull(stringLimits.build.error),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  artifact_url_base: v.pipe(
-    convertEmptyStrToNull(stringLimits.build.artifact_url_base),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  artifact_files: convertEmptyStrToNull(stringLimits.build.artifact_files),
-  channel: convertEmptyStrToNull(stringLimits.build.channel),
-  version_code: v.nullable(idSchema),
-  targets: convertEmptyStrToNull(stringLimits.build.targets),
-  environment: convertEmptyStrToNull()
-});
-
-export const load = (async ({ url }) => {
-  const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-  if (!id.success) {
-    error(400, `missing id param`);
-  }
-
-  const build = await prisma.build.findUnique({
-    where: {
-      id: id.output
-    },
-    select: selectFrom(buildSchema.entries)
-  });
-
-  if (!build) error(404);
-
-  return {
-    form: await superValidate(build, valibot(buildSchema))
-  };
-}) satisfies PageServerLoad;
-
-export const actions: Actions = {
-  default: async function ({ request, url }) {
-    const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-    if (!id.success) {
-      error(400, `missing id param`);
-    }
-    const form = await superValidate(request, valibot(buildSchema));
-    if (!form.valid) return fail(400, { form, ok: false });
-
-    let build = { id: 0 };
-
-    try {
-      build = await prisma.build.update({
-        where: {
-          id: id.output
-        },
-        data: form.data
-      });
-    } catch (e) {
-      trace.getActiveSpan()?.recordException(e as Error);
-      trace.getActiveSpan()?.setStatus({
-        code: SpanStatusCode.ERROR,
-        message: (e as Error).message
-      });
-      return error(400, (e as Error).message);
-    }
-
-    redirect(303, `/build-admin/view?id=${build.id}`);
-  }
-};
diff --git a/src/routes/(ui)/build-admin/update/+page.svelte b/src/routes/(ui)/build-admin/update/+page.svelte
deleted file mode 100644
index 312f6981..00000000
--- a/src/routes/(ui)/build-admin/update/+page.svelte
+++ /dev/null
@@ -1,133 +0,0 @@
-<script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import type { PageData } from './$types';
-  import { page } from '$app/state';
-  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
-  import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
-  import { title } from '$lib/stores';
-  import { stringLimits } from '$lib/valibot';
-
-  const id = $derived(page.url.searchParams.get('id')!);
-
-  $effect(() => {
-    $title = 'Update Build: ' + id;
-  });
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  const { form, enhance } = superForm(data.form, {
-    dataType: 'json'
-  });
-</script>
-
-<Breadcrumbs>
-  <li><a href="/" class="link">Home</a></li>
-  <li><a href="/build-admin" class="link">Builds</a></li>
-  <li><a href="/build-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
-</Breadcrumbs>
-<h1>{$title}</h1>
-
-<form method="POST" use:enhance>
-  <LabeledFormInput label="Job ID">
-    <input
-      class="input input-bordered validator"
-      type="number"
-      bind:value={$form.job_id}
-      required
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Status">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.status}
-      maxlength={stringLimits.build.status}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Build GUID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.build_guid}
-      maxlength={stringLimits.build.build_guid}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Result">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.result}
-      maxlength={stringLimits.build.result}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Error">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.error}
-      maxlength={stringLimits.build.error}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Artifact URL Base">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.artifact_url_base}
-      required
-      maxlength={stringLimits.build.artifact_url_base}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Artifact Files">
-    <textarea
-      class="textarea input-bordered validator"
-      bind:value={$form.artifact_files}
-      maxlength={stringLimits.build.artifact_files}
-    ></textarea>
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Channel">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.channel}
-      maxlength={stringLimits.build.channel}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Version Code">
-    <input class="input input-bordered validator" type="number" bind:value={$form.version_code} />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Targets">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.targets}
-      maxlength={stringLimits.build.targets}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Environment">
-    <textarea class="textarea input-bordered validator" bind:value={$form.environment}></textarea>
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
-</form>
-
-<style>
-  .input,
-  .textarea {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/(ui)/build-admin/view/+page.server.ts b/src/routes/(ui)/build-admin/view/+page.server.ts
index ab868aca..2cc147b9 100644
--- a/src/routes/(ui)/build-admin/view/+page.server.ts
+++ b/src/routes/(ui)/build-admin/view/+page.server.ts
@@ -14,6 +14,14 @@ export const load = (async ({ url }) => {
   const build = await prisma.build.findUnique({
     where: {
       id: id.output
+    },
+    include: {
+      job: {
+        select: {
+          client: { select: { development: true } },
+          git_url: true
+        }
+      }
     }
   });
 
diff --git a/src/routes/(ui)/build-admin/view/+page.svelte b/src/routes/(ui)/build-admin/view/+page.svelte
index 8e77dc71..c672a725 100644
--- a/src/routes/(ui)/build-admin/view/+page.svelte
+++ b/src/routes/(ui)/build-admin/view/+page.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
+  import { safeParse } from 'valibot';
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { byString } from '$lib/utils/sorting';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
+  import { JSON2Entries } from '$lib/valibot';
 
   $title = 'View Build: ' + page.url.searchParams.get('id')!;
 
@@ -12,6 +20,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.build.created));
 </script>
 
 <Breadcrumbs>
@@ -20,84 +30,151 @@
   <li>{data.build.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">
+    Build {data.build.id}
+  </h1>
 
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/build-admin/update?id={data.build.id}" class="btn btn-primary">Update</a>
+  <StatusBadge status={data.build.result || data.build.status} />
+</div>
+<div class="flex gap-1">
+  Created <Tooltip tip={getTimeDateString(data.build.created)}>
+    {$dateCreated}
+  </Tooltip>
+  <LinkToScriptoria
+    client={data.build.job.client}
+    bucket={data.build.job.git_url}
+    scope="build"
+    id={data.build.id}
+    class="ml-4"
+  />
 </div>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.build.id}</td>
-    </tr>
-    <tr>
-      <th>Job ID</th>
-      <td>
-        <a class="link" href="/job-admin/view?id={data.build.job_id}">{data.build.job_id}</a>
-      </td>
-    </tr>
-    <tr>
-      <th>Status</th>
-      <td>{data.build.status}</td>
-    </tr>
-    <tr>
-      <th>Build GUID</th>
-      <td><a class="link" href={data.build.codebuild_url}>{data.build.build_guid}</a></td>
-    </tr>
-    <tr>
-      <th>Result</th>
-      <td>{data.build.result}</td>
-    </tr>
-    <tr>
-      <th>Error</th>
-      <td>
-        {#if data.build.error?.match(/^https?:/)}
-          <a class="link" href={data.build.error}>
-            {data.build.error}
-          </a>
+<div class="border p-2 rounded-md bg-base-200 my-2">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div>
+      <span>
+        <IconContainer icon={Icons.Product} width={20} />
+        Job ID:
+      </span>
+      <span>
+        <a class="link" href="/job-admin/view?id={data.build.job_id}">
+          #{data.build.job_id}
+        </a>
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Targets} width={20} />
+        Targets:
+      </span>
+      <span>
+        {data.build.targets || '(none)'}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Channel} width={20} />
+        Channel:
+      </span>
+      <span>
+        {data.build.channel || '(none)'}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Version} width={20} />
+        Version Code:
+      </span>
+      <span>
+        {data.build.version_code ?? '(none)'}
+      </span>
+    </div>
+  </div>
+  {#if data.build.codebuild_url || data.build.build_guid}
+    <div>
+      <span>
+        <IconContainer icon={Icons.CodeBuild} width={20} class="mr-1" />Code Build:
+      </span>
+      <span>
+        {#if data.build.codebuild_url}
+          <a class="link" href={data.build.codebuild_url}>{data.build.build_guid}</a>
         {:else}
-          {data.build.error}
+          <span>{data.build.build_guid}</span>
         {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Artifacts</th>
-      <td>
-        {#if data.build.artifact_files}
-          {#each Object.entries(data.artifacts)
-            .filter(([_, url]) => !!url)
-            .sort(([a, _1], [b, _2]) => a.localeCompare(b, 'en-US')) as [name, url]}
-            <a class="link" href={url}>{name}</a>
-            ,&nbsp;
-          {/each}
-        {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.build.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.build.updated)}</td>
-    </tr>
-    <tr>
-      <th>Channel</th>
-      <td>{data.build.channel}</td>
-    </tr>
-    <tr>
-      <th>Version Code</th>
-      <td>{data.build.version_code}</td>
-    </tr>
-    <tr>
-      <th>Targets</th>
-      <td>{data.build.targets}</td>
-    </tr>
-    <tr>
-      <th>Environment</th>
-      <td>{data.build.environment}</td>
-    </tr>
-  </tbody>
-</table>
+      </span>
+    </div>
+  {/if}
+  {#if data.build.error}
+    {@const isURL = !!data.build.error?.match(/^https?:/)}
+    <div>
+      <span>Error:</span>
+      {#if isURL}
+        <a class="link" href={data.build.error}>
+          {data.build.error}
+        </a>
+      {:else}
+        <br />
+        <textarea class="textarea w-full min-h-36" readonly>{data.build.error}</textarea>
+      {/if}
+    </div>
+  {/if}
+  {#if data.build.artifact_files}
+    {@const artifacts = Object.entries(data.artifacts)
+      .filter(([_, url]) => !!url)
+      .sort(([a, _1], [b, _2]) => byString(a, b))}
+    <div class="mt-1">
+      <span><IconContainer icon={Icons.File} width={20} class="mr-1" />Artifacts:</span>
+      <span class="inline-flex flex-row flex-wrap">
+        {#each artifacts as [name, url], i}
+          <a class="link ml-1" href={url}>{name}</a>
+          {#if i + 1 < artifacts.length}
+            ,
+          {/if}
+        {/each}
+      </span>
+    </div>
+  {/if}
+  {#if data.build.environment}
+    {@const parsed = safeParse(JSON2Entries, data.build.environment)}
+    {#if parsed.success && parsed.output?.length}
+      <div class="mt-1">
+        <span><IconContainer icon={Icons.Environment} width={20} class="mr-1" />Environment:</span>
+        <table class="table table-zebra table-sm">
+          <tbody>
+            {#each parsed.output as [key, value]}
+              <tr class="hidden md:table-row">
+                <th>{key}:</th>
+                <td>{value}</td>
+              </tr>
+              <tr class="md:hidden">
+                <th>{key}:</th>
+              </tr>
+              <tr class="md:hidden">
+                <td>{value}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>
diff --git a/src/routes/(ui)/client-admin/+page.server.ts b/src/routes/(ui)/client-admin/+page.server.ts
index 4ff8af89..b63a0176 100644
--- a/src/routes/(ui)/client-admin/+page.server.ts
+++ b/src/routes/(ui)/client-admin/+page.server.ts
@@ -5,19 +5,21 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { tableSchema } from '$lib/valibot';
 
-const select: Prisma.clientSelect = {
+const select = {
   id: true,
   prefix: true,
   access_token: true,
   created: true,
   updated: true,
+  development: true,
+  description: true,
   _count: {
     select: {
       job: true,
       project: true
     }
   }
-};
+} as const satisfies Prisma.clientSelect;
 
 export const load = (async () => {
   const clients = await prisma.client.findMany({ select, take: 20, orderBy: { id: 'desc' } });
@@ -42,8 +44,30 @@ export const actions: Actions = {
     const form = await superValidate(request, valibot(tableSchema));
     if (!form.valid) return fail(400, { form, ok: false });
 
+    const searchDev = form.data.search && 'development'.includes(form.data.search.toLowerCase());
+
+    const where = {
+      OR:
+        searchDev || form.data.search
+          ? [
+              { development: searchDev || undefined },
+              {
+                prefix: form.data.search
+                  ? { contains: form.data.search, mode: 'insensitive' }
+                  : undefined
+              },
+              {
+                description: form.data.search
+                  ? { contains: form.data.search, mode: 'insensitive' }
+                  : undefined
+              }
+            ]
+          : undefined
+    } as const satisfies Prisma.clientWhereInput;
+
     const clients = await prisma.client.findMany({
       select,
+      where,
       orderBy: form.data.sort ? { [form.data.sort.field]: form.data.sort.direction } : undefined,
       skip: form.data.page.page * form.data.page.size,
       take: form.data.page.size
@@ -53,7 +77,8 @@ export const actions: Actions = {
       form,
       ok: true,
       query: {
-        data: clients
+        data: clients,
+        count: await prisma.client.count({ where })
       }
     };
   }
diff --git a/src/routes/(ui)/client-admin/+page.svelte b/src/routes/(ui)/client-admin/+page.svelte
index 6164417d..9a465934 100644
--- a/src/routes/(ui)/client-admin/+page.svelte
+++ b/src/routes/(ui)/client-admin/+page.svelte
@@ -3,6 +3,8 @@
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
+  import SearchBar from '$lib/components/SearchBar.svelte';
   import SecureDisplay from '$lib/components/SecureDisplay.svelte';
   import Tooltip from '$lib/components/Tooltip.svelte';
   import { Icons } from '$lib/icons';
@@ -19,12 +21,15 @@
   let { data }: Props = $props();
 
   let clients = $state(data.clients);
+  let count = $state(data.count);
 
   const { form, enhance, submit } = superForm(data.form, {
     dataType: 'json',
     resetForm: false,
-    onChange() {
-      submit();
+    onChange({ paths }) {
+      if (!paths.includes('search')) {
+        submit();
+      }
     },
     onUpdate(event) {
       const data = event.result.data as FormResult<{
@@ -32,12 +37,22 @@
       }>;
       if (event.form.valid && data.query) {
         clients = data.query.data;
+        count = data.query.count;
       }
     }
   });
 
+  function submitSearch() {
+    if ($form.page.page) {
+      $form.page.page = 0;
+    } else {
+      submit();
+    }
+  }
+
+  const mobileSizing = 'w-full md:w-auto';
+
   const created = $derived(getRelativeTime(clients.map((c) => c.created)));
-  const updated = $derived(getRelativeTime(clients.map((c) => c.updated)));
 </script>
 
 <div class="w-full">
@@ -45,48 +60,70 @@
     <li><a href="/" class="link">Home</a></li>
     <li>{$title}</li>
   </Breadcrumbs>
-  <h1>{$title}</h1>
-  <a class="btn btn-success mb-2" href="/client-admin/create">Create Client</a>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        data.count
-      )}
-    </b>
-    of
-    <b>{data.count}</b>
-    items
-  </p>
+  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+  <form
+    method="POST"
+    action="?/page"
+    use:enhance
+    onkeydown={(event) => {
+      if (event.key === 'Enter') submitSearch();
+    }}
+  >
+    <div
+      class="flex flex-row flex-wrap md:flex-nowrap place-content-end items-center px-4 gap-1 {mobileSizing}"
+    >
+      <div class="inline-flex items-center grow {mobileSizing}">
+        <h1 class="py-4 pl-2">{$title}</h1>
+        <a class="btn btn-secondary" href="/client-admin/create">
+          <IconContainer icon={Icons.AddUser} width={24} />
+          Create Client
+        </a>
+      </div>
+      <div
+        class="flex flex-row flex-wrap md:flex-nowrap place-content-end items-center gap-1 {mobileSizing}"
+      >
+        <SearchBar bind:value={$form.search} requestSubmit={submitSearch} class={mobileSizing} />
+      </div>
+    </div>
+  </form>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each clients as client, i}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow">
+          <h3 class="grow flex gap-x-3 pl-1">
             <a class="link" href="/client-admin/view?id={client.id}">#{client.id}</a>
-            <i class="pl-2">{client.prefix}</i>
+            <i>{client.prefix}</i>
+            {#if client.development}
+              <span class="badge badge-secondary px-2">
+                <IconContainer icon={Icons.Environment} width={16} />
+                development
+              </span>
+            {/if}
           </h3>
           <div class="flex flex-col">
             <Tooltip class="indent-0" tip={getTimeDateString(client.created)}>
               Created: {$created[i]}
             </Tooltip>
-            <Tooltip class="indent-0" tip={getTimeDateString(client.updated)}>
-              Updated: {$updated[i]}
-            </Tooltip>
           </div>
         </div>
-        <div class="flex flex-row items-center gap-x-1 w-full">
-          <IconContainer icon={Icons.Key} width={16} />
-          <SecureDisplay value={client.access_token} />
-        </div>
-        <div class="flex flex-row flex-wrap gap-1 w-full">
-          <div class="flex flex-row items-center gap-x-1">
-            <IconContainer icon={Icons.Project} width={16} />
-            {client._count.project}
+        <div class="flex flex-col pl-1 gap-1">
+          {#if client.description}
+            <p>{client.description}</p>
+          {/if}
+          <div class="flex flex-row items-center gap-x-1 w-full">
+            <IconContainer icon={Icons.Key} width={16} />
+            <SecureDisplay value={client.access_token} />
           </div>
-          <div class="flex flex-row items-center gap-x-1">
-            <IconContainer icon={Icons.Product} width={16} />
-            {client._count.job}
+          <div class="flex flex-row flex-wrap gap-1 w-full">
+            <div class="flex flex-row items-center gap-x-1">
+              <IconContainer icon={Icons.Project} width={16} />
+              {client._count.project}
+            </div>
+            <div class="flex flex-row items-center gap-x-1">
+              <IconContainer icon={Icons.Product} width={16} />
+              {client._count.job}
+            </div>
           </div>
         </div>
       </div>
@@ -94,7 +131,7 @@
   </div>
   <form method="POST" action="?/page" use:enhance>
     <div class="space-between-4 flex w-full flex-row flex-wrap place-content-start gap-1 p-4">
-      <Pagination bind:size={$form.page.size} total={data.count} bind:page={$form.page.page} />
+      <Pagination bind:size={$form.page.size} total={count} bind:page={$form.page.page} />
     </div>
   </form>
 </div>
diff --git a/src/routes/(ui)/client-admin/create/+page.svelte b/src/routes/(ui)/client-admin/create/+page.svelte
index b9ed24eb..195b0b28 100644
--- a/src/routes/(ui)/client-admin/create/+page.svelte
+++ b/src/routes/(ui)/client-admin/create/+page.svelte
@@ -2,7 +2,12 @@
   import { superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CancelButton from '$lib/components/CancelButton.svelte';
+  import InputWithMessage from '$lib/components/InputWithMessage.svelte';
   import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
+  import PasswordInput from '$lib/components/PasswordInput.svelte';
+  import SubmitButton from '$lib/components/SubmitButton.svelte';
+  import { Icons } from '$lib/icons';
   import { title } from '$lib/stores';
   import { stringLimits } from '$lib/valibot';
 
@@ -27,31 +32,72 @@
 <h1>{$title}</h1>
 
 <form method="POST" use:enhance>
-  <LabeledFormInput label="Access Token">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.access_token}
-      required
-      maxlength={stringLimits.client.access_token}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Prefix">
-    <input
-      class="input input-bordered validator"
-      type="text"
+  <div class="input-fields">
+    <LabeledFormInput
+      label="Prefix"
+      class="md:w-24!"
+      input={{
+        maxlength: stringLimits.client.prefix,
+        icon: Icons.Folder,
+        required: true,
+        size: 4
+      }}
       bind:value={$form.prefix}
-      required
-      maxlength={stringLimits.client.prefix}
     />
-    <span class="validator-hint">&nbsp;</span>
+
+    <div class="complement-width">
+      <PasswordInput
+        label="Access Token"
+        input={{
+          maxlength: stringLimits.client.access_token,
+          icon: Icons.Key,
+          required: true
+        }}
+        bind:value={$form.access_token}
+      />
+    </div>
+  </div>
+  <InputWithMessage
+    title={{ label: 'Development' }}
+    message={{ label: 'This client is used for local development.' }}
+    class="mb-4"
+  >
+    <input type="checkbox" class="checkbox checkbox-warning" bind:checked={$form.development} />
+  </InputWithMessage>
+  <LabeledFormInput label="Description">
+    <textarea class="textarea w-full min-h-36" bind:value={$form.description}></textarea>
   </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Create" />
+  <div class="my-4">
+    <CancelButton returnTo="/client-admin" />
+    <SubmitButton />
+  </div>
 </form>
 
 <style>
-  .input {
+  .input-fields {
+    display: flex;
+    flex-direction: column;
     width: 100%;
   }
+
+  @media (width >= 48rem /* 768px */) {
+    .input-fields {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    .input-fields :global(label):nth-child(odd) {
+      padding-right: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(even) {
+      padding-left: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(odd):last-child {
+      padding-right: 0px;
+      width: 100%;
+    }
+
+    .complement-width {
+      width: calc(100% - var(--spacing) * 24) /* 6rem = 96px */;
+    }
+  }
 </style>
diff --git a/src/routes/(ui)/client-admin/update/+page.server.ts b/src/routes/(ui)/client-admin/update/+page.server.ts
index d17a65ef..012cf918 100644
--- a/src/routes/(ui)/client-admin/update/+page.server.ts
+++ b/src/routes/(ui)/client-admin/update/+page.server.ts
@@ -5,7 +5,7 @@ import * as v from 'valibot';
 import { clientSchema } from '../valibot';
 import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
-import { idSchema, paramNumber, selectFrom } from '$lib/valibot';
+import { idSchema, paramNumber } from '$lib/valibot';
 
 export const load = (async ({ url }) => {
   const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
@@ -17,7 +17,12 @@ export const load = (async ({ url }) => {
     where: {
       id: id.output
     },
-    select: selectFrom(clientSchema.entries)
+    select: {
+      prefix: true,
+      development: true,
+      access_token: true,
+      description: true
+    }
   });
 
   if (!client) error(404);
diff --git a/src/routes/(ui)/client-admin/update/+page.svelte b/src/routes/(ui)/client-admin/update/+page.svelte
index d113ddb4..e6df963d 100644
--- a/src/routes/(ui)/client-admin/update/+page.svelte
+++ b/src/routes/(ui)/client-admin/update/+page.svelte
@@ -3,7 +3,12 @@
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CancelButton from '$lib/components/CancelButton.svelte';
+  import InputWithMessage from '$lib/components/InputWithMessage.svelte';
   import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
+  import PasswordInput from '$lib/components/PasswordInput.svelte';
+  import SubmitButton from '$lib/components/SubmitButton.svelte';
+  import { Icons } from '$lib/icons';
   import { title } from '$lib/stores';
   import { stringLimits } from '$lib/valibot';
 
@@ -27,37 +32,77 @@
 <Breadcrumbs>
   <li><a href="/" class="link">Home</a></li>
   <li><a href="/client-admin" class="link">Clients</a></li>
-  <li><a href="/client-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
+  <li>{$title}</li>
 </Breadcrumbs>
 <h1>{$title}</h1>
 
 <form method="POST" use:enhance>
-  <LabeledFormInput label="Access Token">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.access_token}
-      required
-      maxlength={stringLimits.client.access_token}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Prefix">
-    <input
-      class="input input-bordered validator"
-      type="text"
+  <div class="input-fields">
+    <LabeledFormInput
+      label="Prefix"
+      class="md:w-24!"
+      input={{
+        maxlength: stringLimits.client.prefix,
+        icon: Icons.Folder,
+        required: true,
+        size: 4
+      }}
       bind:value={$form.prefix}
-      required
-      maxlength={stringLimits.client.prefix}
     />
-    <span class="validator-hint">&nbsp;</span>
+
+    <div class="complement-width">
+      <PasswordInput
+        label="Access Token"
+        input={{
+          maxlength: stringLimits.client.access_token,
+          icon: Icons.Key,
+          required: true
+        }}
+        bind:value={$form.access_token}
+      />
+    </div>
+  </div>
+  <InputWithMessage
+    title={{ label: 'Development' }}
+    message={{ label: 'This client is used for local development.' }}
+    class="mb-4"
+  >
+    <input type="checkbox" class="checkbox checkbox-warning" bind:checked={$form.development} />
+  </InputWithMessage>
+  <LabeledFormInput label="Description">
+    <textarea class="textarea w-full min-h-36" bind:value={$form.description}></textarea>
   </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
+  <div class="my-4">
+    <CancelButton returnTo="/client-admin/view?id={id}" />
+    <SubmitButton />
+  </div>
 </form>
 
 <style>
-  .input {
+  .input-fields {
+    display: flex;
+    flex-direction: column;
     width: 100%;
   }
+
+  @media (width >= 48rem /* 768px */) {
+    .input-fields {
+      flex-wrap: wrap;
+      flex-direction: row;
+    }
+    .input-fields :global(label):nth-child(odd) {
+      padding-right: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(even) {
+      padding-left: calc(var(--spacing) * 1);
+    }
+    .input-fields :global(label):nth-child(odd):last-child {
+      padding-right: 0px;
+      width: 100%;
+    }
+
+    .complement-width {
+      width: calc(100% - var(--spacing) * 24) /* 6rem = 96px */;
+    }
+  }
 </style>
diff --git a/src/routes/(ui)/client-admin/valibot.ts b/src/routes/(ui)/client-admin/valibot.ts
index ccb06d5d..b7502e45 100644
--- a/src/routes/(ui)/client-admin/valibot.ts
+++ b/src/routes/(ui)/client-admin/valibot.ts
@@ -2,16 +2,18 @@ import * as v from 'valibot';
 import { stringLimits } from '$lib/valibot';
 
 export const clientSchema = v.strictObject({
-  access_token: v.pipe(
+  prefix: v.pipe(
     v.string(),
     v.transform((s) => s.trim()),
     v.minLength(1),
-    v.maxBytes(stringLimits.client.access_token)
+    v.maxBytes(stringLimits.client.prefix)
   ),
-  prefix: v.pipe(
+  development: v.boolean(),
+  access_token: v.pipe(
     v.string(),
     v.transform((s) => s.trim()),
     v.minLength(1),
-    v.maxBytes(stringLimits.client.prefix)
-  )
+    v.maxBytes(stringLimits.client.access_token)
+  ),
+  description: v.nullable(v.string())
 });
diff --git a/src/routes/(ui)/client-admin/view/+page.server.ts b/src/routes/(ui)/client-admin/view/+page.server.ts
index cd6d1d65..7dc42dfa 100644
--- a/src/routes/(ui)/client-admin/view/+page.server.ts
+++ b/src/routes/(ui)/client-admin/view/+page.server.ts
@@ -15,6 +15,9 @@ export const load = (async ({ url }) => {
   const client = await prisma.client.findUnique({
     where: {
       id: id.output
+    },
+    include: {
+      _count: { select: { job: true, project: true } }
     }
   });
 
@@ -30,7 +33,17 @@ export const actions: Actions = {
     const form = await superValidate(request, valibot(v.object({ id: idSchema })));
     if (!form.valid) return fail(400, { form, ok: false });
 
-    await prisma.client.delete({ where: { id: form.data.id } });
+    const deleted = await prisma.client.deleteMany({
+      where: { id: form.data.id, NOT: [{ job: { some: {} } }, { project: { some: {} } }] }
+    });
+
+    if (!deleted.count) {
+      return fail(409, {
+        form,
+        ok: false,
+        message: 'Client is associated with one or more jobs or projects and could not be deleted'
+      });
+    }
 
     redirect(303, `/client-admin`);
   }
diff --git a/src/routes/(ui)/client-admin/view/+page.svelte b/src/routes/(ui)/client-admin/view/+page.svelte
index c9782d7d..d36d44d8 100644
--- a/src/routes/(ui)/client-admin/view/+page.svelte
+++ b/src/routes/(ui)/client-admin/view/+page.svelte
@@ -3,8 +3,12 @@
   import { enhance } from '$app/forms';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import SecureDisplay from '$lib/components/SecureDisplay.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
 
   $title = 'View Client: ' + page.url.searchParams.get('id')!;
 
@@ -13,6 +17,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.client.created));
 </script>
 
 <Breadcrumbs>
@@ -21,47 +27,106 @@
   <li>{data.client.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">
+    Client {data.client.id}
+  </h1>
+</div>
+Created <Tooltip tip={getTimeDateString(data.client.created)}>
+  {$dateCreated}
+</Tooltip>
 
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/client-admin/update?id={data.client.id}" class="btn btn-primary">Update</a>
+<div class="flex flex-row space-x-2 my-2">
+  <a href="/client-admin/update?id={data.client.id}" class="btn btn-secondary">
+    <IconContainer icon={Icons.Edit} width={20} />Edit Client
+  </a>
   <form action="?/deleteClient" method="POST" use:enhance>
     <input type="hidden" name="id" value={data.client.id} />
     <button
       type="button"
       class="btn btn-error"
+      disabled={!!(data.client._count.job || data.client._count.project)}
       onclick={(e) => {
         if (confirm('Are you sure you want to delete this item?')) {
           (e.currentTarget.parentElement as HTMLFormElement).requestSubmit();
         }
       }}
     >
-      Delete
+      <IconContainer icon={Icons.Delete} width={20} />
+      Delete Client
     </button>
   </form>
 </div>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.client.id}</td>
-    </tr>
-    <tr>
-      <th>Access Token</th>
-      <td>{data.client.access_token}</td>
-    </tr>
-    <tr>
-      <th>Prefix</th>
-      <td>{data.client.prefix}</td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.client.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.client.updated)}</td>
-    </tr>
-  </tbody>
-</table>
+<div class="border p-2 rounded-md bg-base-200 my-2">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div>
+      <span>
+        <IconContainer icon={Icons.Folder} width={20} />
+        Prefix:
+      </span>
+      <span>
+        {data.client.prefix}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Environment} width={20} />
+        Development:
+      </span>
+      <span>
+        {data.client.development}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Project} width={20} />
+        Projects:
+      </span>
+      <span>
+        {data.client._count.project}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Product} width={20} />
+        Jobs:
+      </span>
+      <span>
+        {data.client._count.job}
+      </span>
+    </div>
+  </div>
+  <div class="flex items-center gap-1 mb-1">
+    <span class="inline-flex items-center gap-1">
+      <IconContainer icon={Icons.Key} width={20} />
+      Access Token:
+    </span>
+    <SecureDisplay value={data.client.access_token} />
+  </div>
+  <div>
+    <span class="inline-flex items-center gap-1">
+      <IconContainer icon={Icons.Info} width={20} />
+      Description:
+    </span>
+    <p class="ml-6">{data.client.description}</p>
+  </div>
+</div>
+
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>
diff --git a/src/routes/(ui)/job-admin/+page.server.ts b/src/routes/(ui)/job-admin/+page.server.ts
index 4532af69..ec89757a 100644
--- a/src/routes/(ui)/job-admin/+page.server.ts
+++ b/src/routes/(ui)/job-admin/+page.server.ts
@@ -6,7 +6,7 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { applicationTypes, tableSchema } from '$lib/valibot';
 
-const select: Prisma.jobSelect = {
+const select = {
   id: true,
   request_id: true,
   app_id: true,
@@ -17,7 +17,7 @@ const select: Prisma.jobSelect = {
       prefix: true
     }
   }
-};
+} as const satisfies Prisma.jobSelect;
 
 const searchSchema = v.object({
   appType: v.nullable(v.picklist(applicationTypes)),
diff --git a/src/routes/(ui)/job-admin/+page.svelte b/src/routes/(ui)/job-admin/+page.svelte
index 28bb5acf..6b6b35ad 100644
--- a/src/routes/(ui)/job-admin/+page.svelte
+++ b/src/routes/(ui)/job-admin/+page.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { type FormResult, superForm } from 'sveltekit-superforms';
   import type { PageData } from './$types';
-  import { env } from '$env/dynamic/public';
   import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
-  import { Icons, getAppIcon } from '$lib/icons';
+  import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
   import type { ApplicationType } from '$lib/valibot';
@@ -82,43 +82,30 @@
       </div>
     </div>
   </form>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        count
-      )}
-    </b>
-    of
-    <b>{count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each jobs as job}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow flex flex-row gap-2 items-start">
+          <h3 class="grow flex flex-row gap-2 items-start pl-1">
             <a class="link" href="/job-admin/view?id={job.id}">#{job.id}</a>
             <img src={getAppIcon(job.app_id as ApplicationType)} width={20} alt={job.app_id} />
-            <a
-              class="link"
-              href="{env.PUBLIC_SCRIPTORIA_URL}/products/{job.request_id}"
-              target="_blank"
-            >
-              {job.request_id}<IconContainer icon={Icons.Open} width={16} />
-            </a>
+            <div>
+              {job.request_id}
+            </div>
           </h3>
         </div>
-        <div class="flex flex-row items-center gap-x-1">
+        <div class="flex flex-row items-center gap-x-1 pl-1">
+          <IconContainer icon={Icons.User} width={16} />
           {#if job.client}
-            <IconContainer icon={Icons.User} width={16} />
             <a class="link mr-2" href="/client-admin/view?id={job.client.id}">
               {job.client.prefix}
             </a>
+          {:else}
+            <span class="mr-2">(Default)</span>
           {/if}
           {#if job.git_url}
-            {@const icon = job.git_url.startsWith('s3') ? Icons.Bucket : Icons.CodeCommit}
-            {@const title = job.git_url.startsWith('s3') ? 'S3 Bucket' : 'CodeCommit Repo'}
+            {@const { icon, title } = getBucketIcon(job.git_url)}
             <IconContainer {icon} width={16} />
             <a class="link" href={job.git_url} target="_blank">
               {title}
diff --git a/src/routes/(ui)/job-admin/update/+page.server.ts b/src/routes/(ui)/job-admin/update/+page.server.ts
deleted file mode 100644
index f27fbaa0..00000000
--- a/src/routes/(ui)/job-admin/update/+page.server.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { SpanStatusCode, trace } from '@opentelemetry/api';
-import { error, redirect } from '@sveltejs/kit';
-import { fail, superValidate } from 'sveltekit-superforms';
-import { valibot } from 'sveltekit-superforms/adapters';
-import * as v from 'valibot';
-import type { Actions, PageServerLoad } from './$types';
-import { prisma } from '$lib/server/prisma';
-import {
-  convertEmptyStrToNull,
-  idSchema,
-  paramNumber,
-  selectFrom,
-  stringIdSchema,
-  stringLimits
-} from '$lib/valibot';
-
-const jobSchema = v.strictObject({
-  request_id: stringIdSchema,
-  git_url: v.pipe(v.string(), v.url(), v.maxBytes(stringLimits.job.git_url)),
-  app_id: v.pipe(v.string(), v.maxBytes(stringLimits.job.app_id)),
-  publisher_id: v.pipe(v.string(), v.maxBytes(stringLimits.job.publisher_id)),
-  client_id: v.nullable(idSchema),
-  existing_version_code: v.nullable(idSchema),
-  jenkins_build_url: v.pipe(
-    convertEmptyStrToNull(stringLimits.job.jenkins_build_url),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  jenkins_publish_url: v.pipe(
-    convertEmptyStrToNull(stringLimits.job.jenkins_publish_url),
-    v.nullable(v.pipe(v.string(), v.url()))
-  )
-});
-
-export const load = (async ({ url }) => {
-  const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-  if (!id.success) {
-    error(400, `missing id param`);
-  }
-
-  const job = await prisma.job.findUnique({
-    where: {
-      id: id.output
-    },
-    select: selectFrom(jobSchema.entries)
-  });
-
-  if (!job) error(404);
-
-  return {
-    form: await superValidate(job, valibot(jobSchema))
-  };
-}) satisfies PageServerLoad;
-
-export const actions: Actions = {
-  default: async function ({ request, url }) {
-    const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-    if (!id.success) {
-      error(400, `missing id param`);
-    }
-    const form = await superValidate(request, valibot(jobSchema));
-    if (!form.valid) return fail(400, { form, ok: false });
-
-    let job = { id: 0 };
-
-    try {
-      job = await prisma.job.update({
-        where: {
-          id: id.output
-        },
-        data: form.data
-      });
-    } catch (e) {
-      trace.getActiveSpan()?.recordException(e as Error);
-      trace.getActiveSpan()?.setStatus({
-        code: SpanStatusCode.ERROR,
-        message: (e as Error).message
-      });
-      return error(400, (e as Error).message);
-    }
-
-    redirect(303, `/job-admin/view?id=${job.id}`);
-  }
-};
diff --git a/src/routes/(ui)/job-admin/update/+page.svelte b/src/routes/(ui)/job-admin/update/+page.svelte
deleted file mode 100644
index 227ee026..00000000
--- a/src/routes/(ui)/job-admin/update/+page.svelte
+++ /dev/null
@@ -1,118 +0,0 @@
-<script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import type { PageData } from './$types';
-  import { page } from '$app/state';
-  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
-  import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
-  import { title } from '$lib/stores';
-  import { stringLimits } from '$lib/valibot';
-
-  const id = $derived(page.url.searchParams.get('id')!);
-
-  $effect(() => {
-    $title = 'Update Job: ' + id;
-  });
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  const { form, enhance } = superForm(data.form, {
-    dataType: 'json'
-  });
-</script>
-
-<Breadcrumbs>
-  <li><a href="/" class="link">Home</a></li>
-  <li><a href="/job-admin" class="link">Jobs</a></li>
-  <li><a href="/job-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
-</Breadcrumbs>
-<h1>{$title}</h1>
-
-<form method="POST" use:enhance>
-  <LabeledFormInput label="Request ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.request_id}
-      required
-      maxlength={stringLimits.job.request_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Git Url">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.git_url}
-      required
-      maxlength={stringLimits.job.request_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="App ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.app_id}
-      required
-      maxlength={stringLimits.job.app_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Publisher ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.publisher_id}
-      required
-      maxlength={stringLimits.job.publisher_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Client ID">
-    <input
-      class="input input-bordered validator"
-      type="number"
-      bind:value={$form.client_id}
-      required
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Existing Version Code">
-    <input
-      class="input input-bordered validator"
-      type="number"
-      bind:value={$form.existing_version_code}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Jenkins Build Url">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.jenkins_build_url}
-      maxlength={stringLimits.job.jenkins_build_url}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Jenkins Publish Url">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.jenkins_publish_url}
-      maxlength={stringLimits.job.jenkins_publish_url}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
-</form>
-
-<style>
-  .input {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/(ui)/job-admin/view/+page.server.ts b/src/routes/(ui)/job-admin/view/+page.server.ts
index 5b40cc94..d6158d81 100644
--- a/src/routes/(ui)/job-admin/view/+page.server.ts
+++ b/src/routes/(ui)/job-admin/view/+page.server.ts
@@ -13,6 +13,16 @@ export const load = (async ({ url }) => {
   const job = await prisma.job.findUnique({
     where: {
       id: id.output
+    },
+    select: {
+      id: true,
+      request_id: true,
+      git_url: true,
+      app_id: true,
+      publisher_id: true,
+      client: { select: { id: true, prefix: true, development: true } },
+      existing_version_code: true,
+      created: true
     }
   });
 
diff --git a/src/routes/(ui)/job-admin/view/+page.svelte b/src/routes/(ui)/job-admin/view/+page.svelte
index a2d67fcb..fd89a7b9 100644
--- a/src/routes/(ui)/job-admin/view/+page.svelte
+++ b/src/routes/(ui)/job-admin/view/+page.svelte
@@ -2,8 +2,14 @@
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CopyField from '$lib/components/CopyField.svelte';
+  import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
+  import type { ApplicationType } from '$lib/valibot';
 
   $title = 'View Job: ' + page.url.searchParams.get('id')!;
 
@@ -12,6 +18,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.job.created));
 </script>
 
 <Breadcrumbs>
@@ -20,61 +28,112 @@
   <li>{data.job.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">
+    Job {data.job.id}
+  </h1>
+</div>
+<div class="flex gap-1">
+  Created <Tooltip tip={getTimeDateString(data.job.created)}>
+    {$dateCreated}
+  </Tooltip>
+  <LinkToScriptoria
+    client={data.job.client}
+    bucket={data.job.git_url}
+    scope="job"
+    id={data.job.id}
+    class="ml-4"
+  />
+</div>
 
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/job-admin/update?id={data.job.id}" class="btn btn-primary">Update</a>
+<div class="border p-2 rounded-md bg-base-200 my-2">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div>
+      <span>
+        <IconContainer icon={Icons.Store} width={20} />
+        Publisher ID:
+      </span>
+      <span>
+        {data.job.publisher_id}
+      </span>
+    </div>
+    <div>
+      <span>App ID:</span>
+      <span class="flex flex-row gap-1">
+        <IconContainer icon={getAppIcon(data.job.app_id as ApplicationType)} width={24} />
+        {data.job.app_id}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.User} width={20} />
+        Client:
+      </span>
+      <span>
+        {#if data.job.client}
+          <a class="link" href="/client-admin/view?id={data.job.client.id}">
+            {data.job.client.prefix}
+          </a>
+        {:else}
+          <span>(Default)</span>
+        {/if}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Version} width={20} />
+        Existing Version Code:
+      </span>
+      <span>
+        {data.job.existing_version_code}
+      </span>
+    </div>
+  </div>
+  {#if data.job.git_url}
+    {@const { icon, title } = getBucketIcon(data.job.git_url)}
+    <div>
+      <span>{title}:</span>
+      <br />
+      <div class="flex rounded-md text-nowrap bg-base-200 p-3 pt-2 mt-2">
+        <IconContainer {icon} width={20} class="opacity-80 mr-2" />
+        <p>
+          {data.job.git_url?.substring(0, 5)}
+        </p>
+        <p class="shrink overflow-hidden text-ellipsis">
+          {data.job.git_url.split('/').slice(2, -1).join('/')}
+        </p>
+        <p class="grow pr-2">
+          /{data.job.git_url.split('/').pop()}
+        </p>
+        <CopyField value={data.job.git_url} />
+      </div>
+    </div>
+  {/if}
+  {#if data.job.request_id}
+    <div>
+      <span>Request ID:</span>
+      <div class="flex rounded-md text-nowrap bg-base-200 p-3 pt-2 mt-2">
+        <div class="grow">{data.job.request_id}</div>
+        <CopyField value={data.job.request_id} />
+      </div>
+    </div>
+  {/if}
 </div>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.job.id}</td>
-    </tr>
-    <tr>
-      <th>Request ID</th>
-      <td>{data.job.request_id}</td>
-    </tr>
-    <tr>
-      <th>Git Url</th>
-      <td><a class="link" href={data.job.git_url}>{data.job.git_url}</a></td>
-    </tr>
-    <tr>
-      <th>App ID</th>
-      <td>{data.job.app_id}</td>
-    </tr>
-    <tr>
-      <th>Publisher ID</th>
-      <td>{data.job.publisher_id}</td>
-    </tr>
-    <tr>
-      <th>Client ID</th>
-      <td>
-        <a class="link" href="/client-admin/view?id={data.job.client_id}">{data.job.client_id}</a>
-      </td>
-    </tr>
-    <tr>
-      <th>Existing Version Code</th>
-      <td>{data.job.existing_version_code}</td>
-    </tr>
-    <tr>
-      <th>Jenkins Build Url</th>
-      <td><a class="link" href={data.job.jenkins_build_url}>{data.job.jenkins_build_url}</a></td>
-    </tr>
-    <tr>
-      <th>Jenkins Publish Url</th>
-      <td>
-        <a class="link" href={data.job.jenkins_publish_url}>{data.job.jenkins_publish_url}</a>
-      </td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.job.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.job.updated)}</td>
-    </tr>
-  </tbody>
-</table>
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>
diff --git a/src/routes/(ui)/project-admin/+page.server.ts b/src/routes/(ui)/project-admin/+page.server.ts
index 9005a3a5..e701077a 100644
--- a/src/routes/(ui)/project-admin/+page.server.ts
+++ b/src/routes/(ui)/project-admin/+page.server.ts
@@ -6,8 +6,9 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { applicationTypes, tableSchema } from '$lib/valibot';
 
-const select: Prisma.projectSelect = {
+const select = {
   id: true,
+  language_code: true,
   project_name: true,
   app_id: true,
   client: {
@@ -17,7 +18,7 @@ const select: Prisma.projectSelect = {
     }
   },
   url: true
-};
+} as const satisfies Prisma.projectSelect;
 
 const searchSchema = v.object({
   appType: v.nullable(v.picklist(applicationTypes)),
@@ -55,7 +56,8 @@ export const actions: Actions = {
               OR: [
                 { project_name: { contains: form.data.search, mode: 'insensitive' } },
                 { client: { prefix: { contains: form.data.search, mode: 'insensitive' } } },
-                { url: { contains: form.data.search, mode: 'insensitive' } }
+                { url: { contains: form.data.search, mode: 'insensitive' } },
+                { language_code: { contains: form.data.search, mode: 'insensitive' } }
               ]
             }
           : {}
diff --git a/src/routes/(ui)/project-admin/+page.svelte b/src/routes/(ui)/project-admin/+page.svelte
index cff4f078..9c2b5b3b 100644
--- a/src/routes/(ui)/project-admin/+page.svelte
+++ b/src/routes/(ui)/project-admin/+page.svelte
@@ -4,8 +4,9 @@
   import AppTypeSelector from '$lib/components/AppTypeSelector.svelte';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
-  import { Icons, getAppIcon } from '$lib/icons';
+  import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
   import type { ApplicationType } from '$lib/valibot';
@@ -81,42 +82,35 @@
       </div>
     </div>
   </form>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        count
-      )}
-    </b>
-    of
-    <b>{count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each projects as project}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow flex flex-row gap-2 items-start">
+          <h3 class="grow flex flex-row gap-2 items-center pl-1">
             <a class="link" href="/project-admin/view?id={project.id}">#{project.id}</a>
-            <img
-              src={getAppIcon(project.app_id as ApplicationType)}
-              width={20}
-              alt={project.app_id}
-            />
+            <span class="badge badge-secondary p-2">
+              <IconContainer icon={Icons.Language} width={16} />{project.language_code}
+            </span>
+            <IconContainer icon={getAppIcon(project.app_id as ApplicationType)} width={20} />
             <i>{project.project_name}</i>
           </h3>
         </div>
-        <div class="flex flex-row items-center gap-x-1">
+        <div class="flex flex-row items-center gap-x-1 pl-1">
+          <IconContainer icon={Icons.User} width={16} />
           {#if project.client}
-            <IconContainer icon={Icons.User} width={16} />
             <a class="link mr-2" href="/client-admin/view?id={project.client.id}">
               {project.client.prefix}
             </a>
+          {:else}
+            <span class="mr-2">(Default)</span>
           {/if}
           {#if project.url}
-            <IconContainer icon={Icons.Bucket} width={16} />
+            {@const { icon, title } = getBucketIcon(project.url)}
+            <IconContainer {icon} width={16} />
             <a class="link" href={project.url} target="_blank">
-              S3 Bucket <IconContainer icon={Icons.Open} width={16} />
+              {title}
+              <IconContainer icon={Icons.Open} width={16} />
             </a>
           {/if}
         </div>
diff --git a/src/routes/(ui)/project-admin/update/+page.server.ts b/src/routes/(ui)/project-admin/update/+page.server.ts
deleted file mode 100644
index 8d80c60d..00000000
--- a/src/routes/(ui)/project-admin/update/+page.server.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { SpanStatusCode, trace } from '@opentelemetry/api';
-import { error, redirect } from '@sveltejs/kit';
-import { fail, superValidate } from 'sveltekit-superforms';
-import { valibot } from 'sveltekit-superforms/adapters';
-import * as v from 'valibot';
-import type { Actions, PageServerLoad } from './$types';
-import { prisma } from '$lib/server/prisma';
-import {
-  convertEmptyStrToNull,
-  idSchema,
-  paramNumber,
-  selectFrom,
-  stringLimits
-} from '$lib/valibot';
-
-const projectSchema = v.object({
-  status: convertEmptyStrToNull(stringLimits.project.status),
-  result: convertEmptyStrToNull(stringLimits.project.result),
-  error: convertEmptyStrToNull(stringLimits.project.error),
-  url: v.pipe(
-    convertEmptyStrToNull(stringLimits.project.url),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  user_id: convertEmptyStrToNull(stringLimits.project.user_id),
-  group_id: convertEmptyStrToNull(stringLimits.project.group_id),
-  app_id: convertEmptyStrToNull(stringLimits.project.app_id),
-  client_id: v.nullable(idSchema),
-  project_name: convertEmptyStrToNull(stringLimits.project.project_name),
-  language_code: convertEmptyStrToNull(stringLimits.project.language_code),
-  publishing_key: convertEmptyStrToNull(stringLimits.project.publishing_key)
-});
-
-export const load = (async ({ url }) => {
-  const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-  if (!id.success) {
-    error(400, `missing id param`);
-  }
-
-  const project = await prisma.project.findUnique({
-    where: {
-      id: id.output
-    },
-    select: selectFrom(projectSchema.entries)
-  });
-
-  if (!project) error(404);
-
-  return {
-    form: await superValidate(project, valibot(projectSchema))
-  };
-}) satisfies PageServerLoad;
-
-export const actions: Actions = {
-  default: async function ({ request, url }) {
-    const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-    if (!id.success) {
-      error(400, `missing id param`);
-    }
-    const form = await superValidate(request, valibot(projectSchema));
-    if (!form.valid) return fail(400, { form, ok: false });
-
-    let project = { id: 0 };
-
-    try {
-      project = await prisma.project.update({
-        where: {
-          id: id.output
-        },
-        data: form.data
-      });
-    } catch (e) {
-      trace.getActiveSpan()?.recordException(e as Error);
-      trace.getActiveSpan()?.setStatus({
-        code: SpanStatusCode.ERROR,
-        message: (e as Error).message
-      });
-      return error(400, (e as Error).message);
-    }
-
-    redirect(303, `/project-admin/view?id=${project.id}`);
-  }
-};
diff --git a/src/routes/(ui)/project-admin/update/+page.svelte b/src/routes/(ui)/project-admin/update/+page.svelte
deleted file mode 100644
index 9300bf7d..00000000
--- a/src/routes/(ui)/project-admin/update/+page.svelte
+++ /dev/null
@@ -1,137 +0,0 @@
-<script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import type { PageData } from './$types';
-  import { page } from '$app/state';
-  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
-  import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
-  import { title } from '$lib/stores';
-  import { stringLimits } from '$lib/valibot';
-
-  const id = $derived(page.url.searchParams.get('id')!);
-
-  $effect(() => {
-    $title = 'Update Project: ' + id;
-  });
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  const { form, enhance } = superForm(data.form, {
-    dataType: 'json'
-  });
-</script>
-
-<Breadcrumbs>
-  <li><a href="/" class="link">Home</a></li>
-  <li><a href="/project-admin" class="link">Projects</a></li>
-  <li><a href="/project-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
-</Breadcrumbs>
-<h1>{$title}</h1>
-
-<form method="POST" use:enhance>
-  <LabeledFormInput label="Status">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.status}
-      maxlength={stringLimits.project.status}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Result">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.result}
-      maxlength={stringLimits.project.result}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Error">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.error}
-      maxlength={stringLimits.project.error}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Url">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.url}
-      maxlength={stringLimits.project.url}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="User ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.user_id}
-      maxlength={stringLimits.project.user_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Group ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.group_id}
-      maxlength={stringLimits.project.group_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="App ID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.app_id}
-      maxlength={stringLimits.project.app_id}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Client ID">
-    <input class="input input-bordered validator" type="number" bind:value={$form.client_id} />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Project Name">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.project_name}
-      maxlength={stringLimits.project.project_name}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Language Code">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.language_code}
-      maxlength={stringLimits.project.language_code}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Publishing Key">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.publishing_key}
-      maxlength={stringLimits.project.publishing_key}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
-</form>
-
-<style>
-  .input {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/(ui)/project-admin/view/+page.server.ts b/src/routes/(ui)/project-admin/view/+page.server.ts
index 0e5247ab..889f2257 100644
--- a/src/routes/(ui)/project-admin/view/+page.server.ts
+++ b/src/routes/(ui)/project-admin/view/+page.server.ts
@@ -13,6 +13,18 @@ export const load = (async ({ url }) => {
   const project = await prisma.project.findUnique({
     where: {
       id: id.output
+    },
+    select: {
+      id: true,
+      project_name: true,
+      created: true,
+      status: true,
+      result: true,
+      language_code: true,
+      app_id: true,
+      url: true,
+      client: { select: { id: true, prefix: true, development: true } },
+      error: true
     }
   });
 
diff --git a/src/routes/(ui)/project-admin/view/+page.svelte b/src/routes/(ui)/project-admin/view/+page.svelte
index d4c2c7c5..fc370678 100644
--- a/src/routes/(ui)/project-admin/view/+page.svelte
+++ b/src/routes/(ui)/project-admin/view/+page.svelte
@@ -2,8 +2,15 @@
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import CopyField from '$lib/components/CopyField.svelte';
+  import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons, getAppIcon, getBucketIcon } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
+  import type { ApplicationType } from '$lib/valibot';
 
   $title = 'View Project: ' + page.url.searchParams.get('id')!;
 
@@ -12,6 +19,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.project.created));
 </script>
 
 <Breadcrumbs>
@@ -20,81 +29,108 @@
   <li>{data.project.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
-
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/project-admin/update?id={data.project.id}" class="btn btn-primary">Update</a>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">{data.project.project_name}</h1>
+  <StatusBadge status={data.project.result || data.project.status} />
+</div>
+<div class="flex gap-1">
+  Created <Tooltip tip={getTimeDateString(data.project.created)}>
+    {$dateCreated}
+  </Tooltip>
+  <LinkToScriptoria
+    client={data.project.client}
+    bucket={data.project.url}
+    scope="project"
+    id={data.project.id}
+    class="ml-4"
+  />
 </div>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.project.id}</td>
-    </tr>
-    <tr>
-      <th>Status</th>
-      <td>{data.project.status}</td>
-    </tr>
-    <tr>
-      <th>Result</th>
-      <td>{data.project.result}</td>
-    </tr>
-    <tr>
-      <th>Error</th>
-      <td>
-        {#if data.project.error?.match(/^https?:/)}
-          <a class="link" href={data.project.error}>
-            {data.project.error}
+<div class="border p-2 rounded-md bg-base-200 my-2">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div>
+      <span>
+        <IconContainer icon={Icons.Language} width={20} />
+        Language:
+      </span>
+      <span>
+        {data.project.language_code}
+      </span>
+    </div>
+    <div>
+      <span>App ID:</span>
+      <span class="flex flex-row gap-1">
+        <IconContainer icon={getAppIcon(data.project.app_id as ApplicationType)} width={24} />
+        {data.project.app_id}
+      </span>
+    </div>
+
+    <div>
+      <span>
+        <IconContainer icon={Icons.User} width={20} />
+        Client:
+      </span>
+      <span>
+        {#if data.project.client}
+          <a class="link" href="/client-admin/view?id={data.project.client.id}">
+            {data.project.client.prefix}
           </a>
         {:else}
-          {data.project.error}
+          <span>(Default)</span>
         {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Url</th>
-      <td>{data.project.url}</td>
-    </tr>
-    <tr>
-      <th>User ID</th>
-      <td>{data.project.user_id}</td>
-    </tr>
-    <tr>
-      <th>Group ID</th>
-      <td>{data.project.group_id}</td>
-    </tr>
-    <tr>
-      <th>App ID</th>
-      <td>{data.project.app_id}</td>
-    </tr>
-    <tr>
-      <th>Project Name</th>
-      <td>{data.project.project_name}</td>
-    </tr>
-    <tr>
-      <th>Language Code</th>
-      <td>{data.project.language_code}</td>
-    </tr>
-    <tr>
-      <th>Client ID</th>
-      <td>
-        <a class="link" href="/client-admin/view?id={data.project.client_id}">
-          {data.project.client_id}
+      </span>
+    </div>
+  </div>
+  {#if data.project.url}
+    {@const { icon, title } = getBucketIcon(data.project.url)}
+    <div>
+      <span>{title}:</span>
+      <br />
+      <div class="flex rounded-md text-nowrap bg-base-200 p-3 pt-2 mt-2">
+        <IconContainer {icon} width={20} class="opacity-80 mr-2" />
+        <p>
+          {data.project.url?.substring(0, 5)}
+        </p>
+        <p class="shrink overflow-hidden text-ellipsis">
+          {data.project.url.split('/').slice(2, -1).join('/')}
+        </p>
+        <p class="grow pr-2">
+          /{data.project.url.split('/').pop()}
+        </p>
+        <CopyField value={data.project.url!} />
+      </div>
+    </div>
+  {/if}
+  {#if data.project.error}
+    {@const isURL = !!data.project.error?.match(/^https?:/)}
+    <div>
+      <span>Error:</span>
+      {#if isURL}
+        <a class="link" href={data.project.error}>
+          {data.project.error}
         </a>
-      </td>
-    </tr>
-    <tr>
-      <th>Publishing Key</th>
-      <td>{data.project.publishing_key}</td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.project.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.project.updated)}</td>
-    </tr>
-  </tbody>
-</table>
+      {:else}
+        <br />
+        <textarea class="textarea w-full min-h-36" readonly>{data.project.error}</textarea>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>
diff --git a/src/routes/(ui)/release-admin/+page.server.ts b/src/routes/(ui)/release-admin/+page.server.ts
index 766f07c0..d877dd07 100644
--- a/src/routes/(ui)/release-admin/+page.server.ts
+++ b/src/routes/(ui)/release-admin/+page.server.ts
@@ -5,7 +5,7 @@ import type { Actions, PageServerLoad } from './$types';
 import { prisma } from '$lib/server/prisma';
 import { tableSchema } from '$lib/valibot';
 
-const select: Prisma.releaseSelect = {
+const select = {
   id: true,
   build: {
     select: {
@@ -16,7 +16,7 @@ const select: Prisma.releaseSelect = {
   status: true,
   result: true,
   codebuild_url: true
-};
+} as const satisfies Prisma.releaseSelect;
 
 export const load = (async () => {
   const releases = await prisma.release.findMany({
diff --git a/src/routes/(ui)/release-admin/+page.svelte b/src/routes/(ui)/release-admin/+page.svelte
index ff2d5835..0a8214b3 100644
--- a/src/routes/(ui)/release-admin/+page.svelte
+++ b/src/routes/(ui)/release-admin/+page.svelte
@@ -3,8 +3,10 @@
   import type { PageData } from './$types';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
   import Pagination from '$lib/components/Pagination.svelte';
+  import PaginationHeader from '$lib/components/PaginationHeader.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
-  import { Icons, getStatusIcon } from '$lib/icons';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import { Icons } from '$lib/icons';
   import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
 
@@ -76,47 +78,17 @@
       </div>
     </div>
   </form>
-  <p>
-    Showing <b>
-      {$form.page.page * $form.page.size + 1}-{Math.min(
-        ($form.page.page + 1) * $form.page.size,
-        count
-      )}
-    </b>
-    of
-    <b>{count}</b>
-    items
-  </p>
+  <PaginationHeader page={$form.page} {count} />
   <div class="flex flex-col gap-2">
     {#each releases as release}
-      {@const status = release.result || release.status}
       <div class="border rounded-md p-2 flex flex-col gap-1">
         <div class="flex flex-row">
-          <h3 class="grow flex flex-row gap-2 items-start">
+          <h3 class="grow flex flex-row gap-2 items-start pl-1">
             <a class="link" href="/release-admin/view?id={release.id}">#{release.id}</a>
-            {#if status}
-              {@const { icon } = getStatusIcon(status)}
-              <b
-                class={[
-                  'badge',
-                  status === 'SUCCESS'
-                    ? 'badge-success'
-                    : status === 'FAILURE'
-                      ? 'badge-error'
-                      : status === 'ABORTED'
-                        ? 'badge-warning'
-                        : 'badge-neutral'
-                ]}
-              >
-                {#if icon !== Icons.Unknown}
-                  <IconContainer {icon} width={20} />
-                {/if}
-                {status}
-              </b>
-            {/if}
+            <StatusBadge status={release.result || release.status} />
           </h3>
         </div>
-        <div class="flex flex-row items-center gap-x-1">
+        <div class="flex flex-row items-center gap-x-1 pl-1">
           <IconContainer icon={Icons.Product} width={16} />
           <a class="link mr-2" href="/job-admin/view?id={release.build.job_id}">
             #{release.build.job_id}
diff --git a/src/routes/(ui)/release-admin/update/+page.server.ts b/src/routes/(ui)/release-admin/update/+page.server.ts
deleted file mode 100644
index b1197764..00000000
--- a/src/routes/(ui)/release-admin/update/+page.server.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-import { SpanStatusCode, trace } from '@opentelemetry/api';
-import { error, redirect } from '@sveltejs/kit';
-import { fail, superValidate } from 'sveltekit-superforms';
-import { valibot } from 'sveltekit-superforms/adapters';
-import * as v from 'valibot';
-import type { Actions, PageServerLoad } from './$types';
-import { prisma } from '$lib/server/prisma';
-import {
-  convertEmptyStrToNull,
-  idSchema,
-  paramNumber,
-  selectFrom,
-  stringIdSchema,
-  stringLimits
-} from '$lib/valibot';
-
-const releaseSchema = v.object({
-  build_id: idSchema,
-  status: convertEmptyStrToNull(stringLimits.release.status),
-  result: convertEmptyStrToNull(stringLimits.release.result),
-  error: v.pipe(
-    convertEmptyStrToNull(stringLimits.release.error),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  channel: v.pipe(v.string(), v.maxBytes(stringLimits.release.channel)),
-  title: convertEmptyStrToNull(stringLimits.release.title),
-  defaultLanguage: convertEmptyStrToNull(stringLimits.release.defaultLanguage),
-  build_guid: v.pipe(convertEmptyStrToNull(), v.nullable(stringIdSchema)),
-  promote_from: convertEmptyStrToNull(stringLimits.release.promote_from),
-  targets: convertEmptyStrToNull(stringLimits.release.targets),
-  environment: convertEmptyStrToNull(),
-  artifact_url_base: v.pipe(
-    convertEmptyStrToNull(stringLimits.release.artifact_url_base),
-    v.nullable(v.pipe(v.string(), v.url()))
-  ),
-  artifact_files: convertEmptyStrToNull(stringLimits.release.artifact_files)
-});
-
-export const load = (async ({ url }) => {
-  const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-  if (!id.success) {
-    error(400, `missing id param`);
-  }
-
-  const release = await prisma.release.findUnique({
-    where: {
-      id: id.output
-    },
-    select: selectFrom(releaseSchema.entries)
-  });
-
-  if (!release) error(404);
-
-  return {
-    form: await superValidate(release, valibot(releaseSchema))
-  };
-}) satisfies PageServerLoad;
-
-export const actions: Actions = {
-  default: async function ({ request, url }) {
-    const id = v.safeParse(v.pipe(paramNumber, idSchema), url.searchParams.get('id'));
-    if (!id.success) {
-      error(400, `missing id param`);
-    }
-    const form = await superValidate(request, valibot(releaseSchema));
-    if (!form.valid) return fail(400, { form, ok: false });
-
-    let release = { id: 0 };
-
-    try {
-      release = await prisma.release.update({
-        where: {
-          id: id.output
-        },
-        data: form.data
-      });
-    } catch (e) {
-      trace.getActiveSpan()?.recordException(e as Error);
-      trace.getActiveSpan()?.setStatus({
-        code: SpanStatusCode.ERROR,
-        message: (e as Error).message
-      });
-      return error(400, (e as Error).message);
-    }
-
-    redirect(303, `/release-admin/view?id=${release.id}`);
-  }
-};
diff --git a/src/routes/(ui)/release-admin/update/+page.svelte b/src/routes/(ui)/release-admin/update/+page.svelte
deleted file mode 100644
index 02a014b5..00000000
--- a/src/routes/(ui)/release-admin/update/+page.svelte
+++ /dev/null
@@ -1,157 +0,0 @@
-<script lang="ts">
-  import { superForm } from 'sveltekit-superforms';
-  import type { PageData } from './$types';
-  import { page } from '$app/state';
-  import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
-  import LabeledFormInput from '$lib/components/LabeledFormInput.svelte';
-  import { title } from '$lib/stores';
-  import { stringLimits } from '$lib/valibot';
-
-  const id = $derived(page.url.searchParams.get('id')!);
-
-  $effect(() => {
-    $title = 'Update Release: ' + id;
-  });
-
-  interface Props {
-    data: PageData;
-  }
-
-  let { data }: Props = $props();
-
-  const { form, enhance } = superForm(data.form, {
-    dataType: 'json'
-  });
-</script>
-
-<Breadcrumbs>
-  <li><a href="/" class="link">Home</a></li>
-  <li><a href="/release-admin" class="link">Releases</a></li>
-  <li><a href="/release-admin/view?id={id}" class="link">{id}</a></li>
-  <li>Update</li>
-</Breadcrumbs>
-<h1>{$title}</h1>
-
-<form method="POST" use:enhance>
-  <LabeledFormInput label="Build ID">
-    <input
-      class="input input-bordered validator"
-      type="number"
-      bind:value={$form.build_id}
-      required
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Status">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.status}
-      maxlength={stringLimits.release.status}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Result">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.result}
-      maxlength={stringLimits.release.result}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Error">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.error}
-      maxlength={stringLimits.release.error}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Channel">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.channel}
-      required
-      maxlength={stringLimits.release.channel}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Title">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.title}
-      maxlength={stringLimits.release.title}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Default Language">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.defaultLanguage}
-      maxlength={stringLimits.release.defaultLanguage}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Build GUID">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.build_guid}
-      maxlength={stringLimits.release.build_guid}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Promote From">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.promote_from}
-      maxlength={stringLimits.release.promote_from}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Targets">
-    <input
-      class="input input-bordered validator"
-      type="text"
-      bind:value={$form.targets}
-      maxlength={stringLimits.release.targets}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Environment">
-    <textarea class="textarea input-bordered validator" bind:value={$form.environment}></textarea>
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Artifact URL Base">
-    <input
-      class="input input-bordered validator"
-      type="url"
-      bind:value={$form.artifact_url_base}
-      required
-      maxlength={stringLimits.release.artifact_url_base}
-    />
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <LabeledFormInput label="Artifact Files">
-    <textarea
-      class="textarea input-bordered validator"
-      bind:value={$form.artifact_files}
-      maxlength={stringLimits.release.artifact_files}
-    ></textarea>
-    <span class="validator-hint">&nbsp;</span>
-  </LabeledFormInput>
-  <input type="submit" class="btn btn-success" value="Update" />
-</form>
-
-<style>
-  .input,
-  .textarea {
-    width: 100%;
-  }
-</style>
diff --git a/src/routes/(ui)/release-admin/view/+page.server.ts b/src/routes/(ui)/release-admin/view/+page.server.ts
index 007f265a..86cd24fa 100644
--- a/src/routes/(ui)/release-admin/view/+page.server.ts
+++ b/src/routes/(ui)/release-admin/view/+page.server.ts
@@ -14,6 +14,18 @@ export const load = (async ({ url }) => {
   const release = await prisma.release.findUnique({
     where: {
       id: id.output
+    },
+    include: {
+      build: {
+        select: {
+          job: {
+            select: {
+              client: { select: { development: true } },
+              git_url: true
+            }
+          }
+        }
+      }
     }
   });
 
diff --git a/src/routes/(ui)/release-admin/view/+page.svelte b/src/routes/(ui)/release-admin/view/+page.svelte
index d08efb44..3da3840d 100644
--- a/src/routes/(ui)/release-admin/view/+page.svelte
+++ b/src/routes/(ui)/release-admin/view/+page.svelte
@@ -1,9 +1,17 @@
 <script lang="ts">
+  import { safeParse } from 'valibot';
   import type { PageData } from './$types';
   import { page } from '$app/state';
   import Breadcrumbs from '$lib/components/Breadcrumbs.svelte';
+  import LinkToScriptoria from '$lib/components/LinkToScriptoria.svelte';
+  import StatusBadge from '$lib/components/StatusBadge.svelte';
+  import Tooltip from '$lib/components/Tooltip.svelte';
+  import { Icons } from '$lib/icons';
+  import IconContainer from '$lib/icons/IconContainer.svelte';
   import { title } from '$lib/stores';
-  import { getTimeDateString } from '$lib/utils/time';
+  import { byString } from '$lib/utils/sorting';
+  import { getRelativeTime, getTimeDateString } from '$lib/utils/time';
+  import { JSON2Entries } from '$lib/valibot';
 
   $title = 'View Release: ' + page.url.searchParams.get('id')!;
 
@@ -12,6 +20,8 @@
   }
 
   let { data }: Props = $props();
+
+  const dateCreated = $derived(getRelativeTime(data.release.created));
 </script>
 
 <Breadcrumbs>
@@ -20,94 +30,151 @@
   <li>{data.release.id}</li>
 </Breadcrumbs>
 
-<h1>{$title}</h1>
+<div class="flex flex-row items-center">
+  <h1 class="p-4 pl-0">
+    Release {data.release.id}
+  </h1>
 
-<div class="flex flex-row space-x-2 mb-2">
-  <a href="/release-admin/update?id={data.release.id}" class="btn btn-primary">Update</a>
+  <StatusBadge status={data.release.result || data.release.status} />
+</div>
+<div class="flex gap-1">
+  Created <Tooltip tip={getTimeDateString(data.release.created)}>
+    {$dateCreated}
+  </Tooltip>
+  <LinkToScriptoria
+    client={data.release.build.job.client}
+    bucket={data.release.build.job.git_url}
+    scope="release"
+    id={data.release.id}
+    class="ml-4"
+  />
 </div>
 
-<table class="table table-zebra border">
-  <tbody>
-    <tr>
-      <th>ID</th>
-      <td>{data.release.id}</td>
-    </tr>
-    <tr>
-      <th>Build ID</th>
-      <td>
+<div class="border p-2 rounded-md bg-base-200 my-2">
+  <div class="gridcont grid gap-x-6 gap-y-2 mb-2">
+    <div>
+      <span>
+        <IconContainer icon={Icons.Build} width={20} />
+        Build ID:
+      </span>
+      <span>
         <a class="link" href="/build-admin/view?id={data.release.build_id}">
-          {data.release.build_id}
+          #{data.release.build_id}
         </a>
-      </td>
-    </tr>
-    <tr>
-      <th>Status</th>
-      <td>{data.release.status}</td>
-    </tr>
-    <tr>
-      <th>Created</th>
-      <td>{getTimeDateString(data.release.created)}</td>
-    </tr>
-    <tr>
-      <th>Updated</th>
-      <td>{getTimeDateString(data.release.updated)}</td>
-    </tr>
-    <tr>
-      <th>Result</th>
-      <td>{data.release.result}</td>
-    </tr>
-    <tr>
-      <th>Error</th>
-      <td>
-        {#if data.release.error?.match(/^https?:/)}
-          <a class="link" href={data.release.error}>
-            {data.release.error}
-          </a>
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Targets} width={20} />
+        Targets:
+      </span>
+      <span>
+        {data.release.targets || '(none)'}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Channel} width={20} />
+        Channel:
+      </span>
+      <span>
+        {data.release.channel || '(none)'}
+      </span>
+    </div>
+    <div>
+      <span>
+        <IconContainer icon={Icons.Language} width={20} />
+        Default Language:
+      </span>
+      <span>
+        {data.release.defaultLanguage ?? '(none)'}
+      </span>
+    </div>
+  </div>
+  {#if data.release.codebuild_url || data.release.build_guid}
+    <div>
+      <span>
+        <IconContainer icon={Icons.CodeBuild} width={20} class="mr-1" />Code Build:
+      </span>
+      <span>
+        {#if data.release.codebuild_url}
+          <a class="link" href={data.release.codebuild_url}>{data.release.build_guid}</a>
         {:else}
-          {data.release.error}
+          <span>{data.release.build_guid}</span>
         {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Artifacts</th>
-      <td>
-        {#if data.release.artifact_files}
-          {#each Object.entries(data.artifacts)
-            .filter(([_, url]) => !!url)
-            .sort(([a, _1], [b, _2]) => a.localeCompare(b, 'en-US')) as [name, url]}
-            <a class="link" href={url}>{name}</a>
-            ,&nbsp;
-          {/each}
-        {/if}
-      </td>
-    </tr>
-    <tr>
-      <th>Channel</th>
-      <td>{data.release.channel}</td>
-    </tr>
-    <tr>
-      <th>Title</th>
-      <td>{data.release.title}</td>
-    </tr>
-    <tr>
-      <th>Default Language</th>
-      <td>{data.release.defaultLanguage}</td>
-    </tr>
-    <tr>
-      <th>Build GUID</th>
-      <td><a class="link" href={data.release.codebuild_url}>{data.release.build_guid}</a></td>
-    </tr>
-    <tr>
-      <th>Promote From</th>
-      <td>{data.release.promote_from}</td>
-    </tr>
-    <tr>
-      <th>Targets</th>
-      <td>{data.release.targets}</td>
-    </tr>
-    <tr>
-      <th>Environment</th>
-      <td>{data.release.environment}</td>
-    </tr>
-  </tbody>
-</table>
+      </span>
+    </div>
+  {/if}
+  {#if data.release.error}
+    {@const isURL = !!data.release.error?.match(/^https?:/)}
+    <div>
+      <span>Error:</span>
+      {#if isURL}
+        <a class="link" href={data.release.error}>
+          {data.release.error}
+        </a>
+      {:else}
+        <br />
+        <textarea class="textarea w-full min-h-36" readonly>{data.release.error}</textarea>
+      {/if}
+    </div>
+  {/if}
+  {#if data.release.artifact_files}
+    {@const artifacts = Object.entries(data.artifacts)
+      .filter(([_, url]) => !!url)
+      .sort(([a, _1], [b, _2]) => byString(a, b))}
+    <div class="mt-1">
+      <span><IconContainer icon={Icons.File} width={20} class="mr-1" />Artifacts:</span>
+      <span class="inline-flex flex-row flex-wrap">
+        {#each artifacts as [name, url], i}
+          <a class="link ml-1" href={url}>{name}</a>
+          {#if i + 1 < artifacts.length}
+            ,
+          {/if}
+        {/each}
+      </span>
+    </div>
+  {/if}
+  {#if data.release.environment}
+    {@const parsed = safeParse(JSON2Entries, data.release.environment)}
+    {#if parsed.success && parsed.output?.length}
+      <div class="mt-1">
+        <span><IconContainer icon={Icons.Environment} width={20} class="mr-1" />Environment:</span>
+        <table class="table table-zebra table-sm">
+          <tbody>
+            {#each parsed.output as [key, value]}
+              <tr class="hidden md:table-row">
+                <th>{key}:</th>
+                <td>{value}</td>
+              </tr>
+              <tr class="md:hidden">
+                <th>{key}:</th>
+              </tr>
+              <tr class="md:hidden">
+                <td>{value}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  .gridcont {
+    grid-template-columns: repeat(auto-fill, minmax(48%, 1fr));
+  }
+  .gridcont div {
+    display: flex;
+    place-content: space-between;
+  }
+  .gridcont div span:first-child {
+    font-family: Montserrat, sans-serif;
+    display: flex;
+    gap: calc(var(--spacing) * 1) /* 0.25rem = 4px */;
+  }
+  .gridcont div span:last-child {
+    text-align: right;
+  }
+</style>