diff --git a/src/lib/holocene/combobox/combobox-option.svelte b/src/lib/holocene/combobox/combobox-option.svelte
index ba54b8daea..b52fd8a5c2 100644
--- a/src/lib/holocene/combobox/combobox-option.svelte
+++ b/src/lib/holocene/combobox/combobox-option.svelte
@@ -13,11 +13,13 @@
   }
 
   interface EnabledProps extends BaseProps {
+    active?: boolean;
     selected?: boolean;
     disabled?: boolean;
   }
 
   interface DisabledProps extends BaseProps {
+    active?: never;
     disabled: true;
     selected?: never;
   }
@@ -25,6 +27,7 @@
   type Props = EnabledProps | DisabledProps;
 
   let {
+    active = false,
     selected = false,
     disabled = false,
     label,
@@ -41,6 +44,7 @@
   aria-selected={selected}
   aria-disabled={disabled}
   {onclick}
+  {active}
   {selected}
   {disabled}
   {leading}
diff --git a/src/lib/holocene/combobox/combobox.stories.svelte b/src/lib/holocene/combobox/combobox.stories.svelte
index 94c11dfeb7..fe827c1b4b 100644
--- a/src/lib/holocene/combobox/combobox.stories.svelte
+++ b/src/lib/holocene/combobox/combobox.stories.svelte
@@ -188,6 +188,34 @@
   <AsyncTest id={context.id}></AsyncTest>
 </Story>
 
+<Story
+  name="Allow Custom Value"
+  args={{
+    options: ['English', 'English (UK)', 'German', 'French', 'Japanese'],
+    allowCustomValue: true,
+  }}
+  play={async ({ canvasElement, id }) => {
+    const canvas = within(canvasElement);
+    const combobox = canvas.getByTestId(id);
+    await userEvent.type(combobox, 'Spanish');
+  }}
+/>
+
+<Story
+  name="Multiselect Allow Custom Value"
+  args={{
+    options: ['English', 'English (UK)', 'German', 'French', 'Japanese'],
+    multiselect: true,
+    value: [],
+    allowCustomValue: true,
+  }}
+  play={async ({ canvasElement, id }) => {
+    const canvas = within(canvasElement);
+    const combobox = canvas.getByTestId(id);
+    await userEvent.type(combobox, 'Spanish');
+  }}
+/>
+
 <Story
   name="Ghost Variant"
   args={{
diff --git a/src/lib/holocene/combobox/combobox.svelte b/src/lib/holocene/combobox/combobox.svelte
index e7c1ffa287..89f5ca1755 100644
--- a/src/lib/holocene/combobox/combobox.svelte
+++ b/src/lib/holocene/combobox/combobox.svelte
@@ -52,6 +52,7 @@
   import Label from '$lib/holocene/label.svelte';
   import MenuContainer from '$lib/holocene/menu/menu-container.svelte';
   import Menu from '$lib/holocene/menu/menu.svelte';
+  import { translate } from '$lib/i18n/translate';
 
   import Badge from '../badge.svelte';
   import Button from '../button.svelte';
@@ -87,6 +88,7 @@
     hrefDisabled?: boolean;
     loading?: boolean;
     loadingText?: string;
+    allowCustomValue?: boolean;
     open?: Writable<boolean>;
     maxMenuHeight?: string;
     variant?: ComboboxStyles['variant'];
@@ -174,6 +176,7 @@
     hrefDisabled = false,
     loading = false,
     loadingText = 'Loading more results',
+    allowCustomValue = false,
     variant = 'default',
     optionClass = '',
     onchange,
@@ -189,9 +192,23 @@
   let filterValue: string = $state('');
   let menuElement: HTMLUListElement | null = $state(null);
   let inputElement: HTMLInputElement | null = $state(null);
+  let inputFocused: boolean = $state(false);
+  let customOptions: string[] = $state([]);
 
-  const selectedOption = $derived(getSelectedOption(options));
-  let list = $derived(filterOptions(filterValue, options));
+  const allOptions = $derived(
+    allowCustomValue ? [...customOptions, ...options] : options,
+  );
+  const selectedOption = $derived(getSelectedOption(allOptions));
+  let list = $derived(filterOptions(filterValue, allOptions));
+  const trimmedFilterValue = $derived(filterValue.trim());
+  const showAddCustom = $derived(
+    allowCustomValue &&
+      trimmedFilterValue &&
+      !list.some(
+        (o) =>
+          getDisplayValue(o).toLowerCase() === trimmedFilterValue.toLowerCase(),
+      ),
+  );
   let displayValue = $derived(
     !multiselect ? getDisplayValue(selectedOption) : undefined,
   );
@@ -240,13 +257,24 @@
 
   const resetValueAndOptions = () => {
     displayValue = getDisplayValue(selectedOption);
-    list = options;
+    list = allOptions;
   };
 
   const isArrayValue = (value: string | string[]): value is string[] => {
     return Array.isArray(value);
   };
 
+  const addCustomValue = () => {
+    if (!trimmedFilterValue) return;
+    if (isArrayValue(value) && value.includes(trimmedFilterValue)) return;
+    if (!customOptions.includes(trimmedFilterValue)) {
+      customOptions = [trimmedFilterValue, ...customOptions];
+    }
+    handleSelectOption(trimmedFilterValue);
+    filterValue = '';
+    displayValue = '';
+  };
+
   const isStringOption = (option: string | T): option is string => {
     return typeof option === 'string';
   };
@@ -382,8 +410,12 @@
         focusFirstOption();
         break;
       case 'Enter':
-        openList();
-        focusFirstOption();
+        if (showAddCustom) {
+          addCustomValue();
+        } else {
+          openList();
+          focusFirstOption();
+        }
         break;
       case 'ArrowUp':
       case 'ArrowRight':
@@ -396,9 +428,14 @@
 
   const handleFocus: FocusEventHandler<HTMLInputElement> = (event) => {
     event.stopPropagation();
+    inputFocused = true;
     openList();
   };
 
+  const handleBlur: FocusEventHandler<HTMLInputElement> = () => {
+    inputFocused = false;
+  };
+
   const handleInput: FormEventHandler<HTMLInputElement> = (event) => {
     event.stopPropagation();
     if (!$open) $open = true;
@@ -477,7 +514,7 @@
       >
         {#if multiselect && isArrayValue(value) && value.length > 0}
           {#if displayChips}
-            {#each value.slice(0, chipLimit) as v}
+            {#each value.slice(0, chipLimit) as v, i (i)}
               <Chip
                 onremove={() => removeOption(v)}
                 removeButtonLabel={removeChipLabel}>{v}</Chip
@@ -518,6 +555,7 @@
           aria-required={required}
           aria-autocomplete="list"
           onfocus={handleFocus}
+          onblur={handleBlur}
           oninput={handleInput}
           onkeydown={handleInputKeydown}
           onclick={handleInputClick}
@@ -590,7 +628,7 @@
   >
     {#if multiselect && isArrayValue(value)}
       <ComboboxOption
-        disabled={value.length === options.length}
+        disabled={value.length === allOptions.length}
         onclick={selectAll}
         label={selectAllLabel}
       />
@@ -602,7 +640,22 @@
       <MenuDivider />
     {/if}
 
-    {#each list as option}
+    {#if showAddCustom}
+      <ComboboxOption
+        active={inputFocused}
+        onclick={addCustomValue}
+        label="{translate('common.add')} {trimmedFilterValue}"
+      >
+        {#snippet leading()}
+          <Icon name="add" />
+        {/snippet}
+      </ComboboxOption>
+      {#if list.length > 0}
+        <MenuDivider />
+      {/if}
+    {/if}
+
+    {#each list as option, i (i)}
       <ComboboxOption
         onclick={() => handleSelectOption(option)}
         selected={isSelected(option, value)}
@@ -610,7 +663,7 @@
         class={optionClass}
       />
     {:else}
-      {#if loading === false}
+      {#if !showAddCustom && loading === false}
         <ComboboxOption disabled label={noResultsText} />
       {/if}
     {/each}
diff --git a/src/lib/holocene/menu/menu-item.svelte b/src/lib/holocene/menu/menu-item.svelte
index eb3e0dcf7f..2cc155651f 100644
--- a/src/lib/holocene/menu/menu-item.svelte
+++ b/src/lib/holocene/menu/menu-item.svelte
@@ -18,6 +18,7 @@
   import { MENU_CONTEXT, type MenuContext } from './menu-container.svelte';
 
   export interface BaseProps {
+    active?: boolean;
     selected?: boolean;
     destructive?: boolean;
     disabled?: boolean;
@@ -47,6 +48,7 @@
 
   const {
     class: className,
+    active = false,
     selected,
     destructive = false,
     disabled = false,
@@ -137,6 +139,7 @@
       centered ? 'justify-center' : 'justify-between',
       className,
     )}
+    class:active
     class:disabled
     class:hoverable
     aria-hidden={disabled ? 'true' : 'false'}
@@ -168,6 +171,7 @@
     class:disabled
     class:selected
     class:hoverable
+    class:active
     aria-hidden={disabled ? 'true' : 'false'}
     aria-disabled={disabled}
     tabindex={disabled ? -1 : 0}
@@ -200,6 +204,10 @@
   .menu-item {
     @apply cursor-pointer border border-transparent text-sm focus-visible:border-inverse focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/70 dark:focus-visible:border-interactive;
 
+    &.active {
+      @apply bg-interactive-secondary-hover;
+    }
+
     &.hoverable {
       @apply hover:surface-interactive-secondary focus-visible:surface-interactive-secondary;
     }
diff --git a/src/lib/i18n/locales/en/nexus.ts b/src/lib/i18n/locales/en/nexus.ts
index 0a3c781d0c..39769bfb02 100644
--- a/src/lib/i18n/locales/en/nexus.ts
+++ b/src/lib/i18n/locales/en/nexus.ts
@@ -24,6 +24,7 @@ export const Strings = {
     'Add a link to your repo or instructions to help other users in this account use this endpoint.',
   'description-placeholder':
     '//Provide a readme for users to use this endpoint',
+  'no-description': 'No description provided.',
   handler: 'Handler',
   'delete-endpoint': 'Delete Endpoint',
   'delete-modal-title': 'Delete Nexus Endpoint?',
@@ -37,9 +38,11 @@ export const Strings = {
   'endpoint-name-hint-with-dash':
     'Endpoint name must start with A-Z or a-z and can only contain A-Z, a-z, 0-9 or -',
   'access-policy': 'Access Policy',
-  'allowed-caller-namespaces': 'Allowed caller Namespaces',
+  'allowed-caller-namespaces': 'Allowed Caller Namespaces',
+  'no-allowed-caller-namespaces': 'No Allowed Caller Namespaces',
   'allowed-caller-namespaces-description':
     'Namespace(s) that are allowed to call this Endpoint.',
+  'allowed-caller-namespaces-error': 'Please select at least one Namespace.',
   'select-namespaces': 'Select Namespace(s)',
   'selected-namespaces_one': '{{count}} Namespace selected',
   'selected-namespaces_other': '{{count}} Namespaces selected',
diff --git a/src/lib/pages/nexus-endpoint.svelte b/src/lib/pages/nexus-endpoint.svelte
index 4418918fad..3c70f0d4d8 100644
--- a/src/lib/pages/nexus-endpoint.svelte
+++ b/src/lib/pages/nexus-endpoint.svelte
@@ -1,10 +1,17 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import { type ClassNameValue, twMerge as merge } from 'tailwind-merge';
 
+  import Badge from '$lib/holocene/badge.svelte';
   import Button from '$lib/holocene/button.svelte';
+  import Card from '$lib/holocene/card.svelte';
   import Copyable from '$lib/holocene/copyable/index.svelte';
+  import EmptyState from '$lib/holocene/empty-state.svelte';
   import Link from '$lib/holocene/link.svelte';
   import Markdown from '$lib/holocene/markdown-editor/preview.svelte';
+  import PaginatedTable from '$lib/holocene/table/paginated-table/paginated.svelte';
+  import TableHeaderRow from '$lib/holocene/table/table-header-row.svelte';
+  import TableRow from '$lib/holocene/table/table-row.svelte';
   import { translate } from '$lib/i18n/translate';
   import type { NexusEndpoint as Endpoint } from '$lib/types/nexus';
   import {
@@ -24,26 +31,18 @@
     taskQueueStatus?: Snippet;
     editHref?: string;
   } = $props();
+
+  const allowedCallerNamespaces = $derived(
+    endpoint.spec?.allowedCallerNamespaces,
+  );
 </script>
 
-<div class="flex flex-col gap-8">
-  <div class="flex flex-col gap-1">
-    <div class="flex items-center justify-between">
-      <h1 data-testid="namespace-selector-title">
-        {endpoint.spec?.name || ''}
-      </h1>
-      <Button
-        href={editHref ?? routeForNexusEndpointEdit(endpoint.id!)}
-        disabled={editDisabled}>{translate('common.edit')}</Button
-      >
-    </div>
-    <p>UUID: {endpoint.id}</p>
-  </div>
-  <div class="surface-primary max-w-fit border border-secondary p-4">
-    <p class="text-lg">Target</p>
-    <div class="flex flex-col gap-4 lg:flex-row">
-      <div class="flex items-center gap-2">
-        <span class="font-medium">Namespace</span>
+{#snippet target()}
+  <Card class="flex grow flex-col gap-4">
+    <h5>{translate('nexus.target')}</h5>
+    <div class="flex flex-col gap-0.5">
+      <dt class="font-medium">{translate('namespaces.namespace')}</dt>
+      <dd class="truncate">
         <Link
           href={routeForNamespace({
             namespace: endpoint.spec?.target?.worker?.namespace || '',
@@ -51,9 +50,12 @@
         >
           <i>{endpoint.spec?.target?.worker?.namespace || ''}</i>
         </Link>
-      </div>
-      <div class="flex items-center gap-2">
-        <span class="font-medium">Task Queue</span>
+      </dd>
+    </div>
+
+    <div class="flex flex-col gap-0.5">
+      <dt class="font-medium">{translate('common.task-queue')}</dt>
+      <dd>
         <Copyable
           copyIconTitle={translate('common.copy-icon-title')}
           copySuccessIconTitle={translate('common.copy-success-icon-title')}
@@ -64,26 +66,115 @@
               namespace: endpoint.spec?.target?.worker?.namespace || '',
               queue: endpoint.spec?.target?.worker?.taskQueue || '',
             })}
+            class="truncate"
           >
             <i>{endpoint.spec?.target?.worker?.taskQueue || ''}</i>
           </Link>
         </Copyable>
-      </div>
-      {@render taskQueueStatus?.()}
+      </dd>
     </div>
-  </div>
-  <div class="w-full xl:w-1/2">
-    <h2>Description</h2>
+
+    {@render taskQueueStatus?.()}
+  </Card>
+{/snippet}
+
+{#snippet description()}
+  <Card
+    class={merge(
+      'flex flex-col gap-4',
+      allowedCallerNamespaces &&
+        'h-auto xl:max-h-[var(--panel-h)] xl:w-1/2 xl:overflow-auto',
+    )}
+  >
+    <h5>{translate('common.description')}</h5>
     <Markdown
-      content={endpoint.spec?.descriptionString || 'No description provided'}
+      content={endpoint.spec?.descriptionString ||
+        translate('nexus.no-description')}
+      overrideTheme="background"
     />
-  </div>
-  {#if endpoint.spec?.allowedCallerNamespaces}
-    <h2>Allowed Caller Namespaces</h2>
+  </Card>
+{/snippet}
+
+{#snippet allowedCallerNamespacesTable()}
+  <Card class="flex flex-col gap-4">
+    <div class="flex items-center gap-2">
+      <h5>{translate('nexus.allowed-caller-namespaces')}</h5>
+      <Badge type="count">{allowedCallerNamespaces.length}</Badge>
+    </div>
     <div class="flex flex-wrap items-center gap-4">
-      {#each endpoint.spec?.allowedCallerNamespaces as namespace (namespace)}
-        <Link href={routeForNamespace({ namespace })}>{namespace}</Link>
-      {/each}
+      <PaginatedTable
+        id="allowed-caller-namespaces"
+        aria-label={translate('nexus.allowed-caller-namespaces')}
+        perPageLabel={translate('common.per-page')}
+        previousPageButtonLabel={translate('common.previous-page')}
+        nextPageButtonLabel={translate('common.next-page')}
+        pageButtonLabel={(page) => translate('common.go-to-page', { page })}
+        variant="primary"
+        items={allowedCallerNamespaces}
+        let:visibleItems
+        maxHeight="24rem"
+      >
+        <caption class="sr-only" slot="caption"
+          >{translate('nexus.allowed-caller-namespaces')}</caption
+        >
+        <TableHeaderRow slot="headers">
+          <th class="w-full">{translate('common.name')}</th>
+        </TableHeaderRow>
+        {#each visibleItems as namespace (namespace)}
+          <TableRow>
+            <td>
+              <Link href={routeForNamespace({ namespace })}>{namespace}</Link>
+            </td>
+          </TableRow>
+        {:else}
+          <EmptyState
+            slot="empty"
+            title={translate('nexus.no-allowed-caller-namespaces')}
+          />
+        {/each}
+      </PaginatedTable>
     </div>
-  {/if}
+  </Card>
+{/snippet}
+
+{#snippet editButton(className: ClassNameValue = undefined)}
+  <Button
+    href={editHref ?? routeForNexusEndpointEdit(endpoint.id!)}
+    disabled={editDisabled}
+    class={merge(className)}
+  >
+    {translate('common.edit')}
+  </Button>
+{/snippet}
+
+<div
+  class={merge(
+    'flex flex-col gap-8',
+    !allowedCallerNamespaces && 'w-full xl:w-3/4 2xl:w-1/2',
+  )}
+>
+  <div class="flex flex-col gap-1">
+    <header class="flex items-center justify-between gap-2 break-all">
+      <h1>
+        {endpoint.spec?.name || ''}
+      </h1>
+      {@render editButton('max-sm:hidden')}
+    </header>
+    <p>UUID: {endpoint.id}</p>
+    {@render editButton('sm:hidden mt-6 w-full')}
+  </div>
+  <div
+    class={merge(
+      'flex flex-col gap-8',
+      allowedCallerNamespaces && 'xl:flex-row',
+    )}
+  >
+    <div class="flex h-fit grow flex-col gap-8">
+      {@render target()}
+      {#if allowedCallerNamespaces}
+        {@render allowedCallerNamespacesTable()}
+      {/if}
+    </div>
+    {@render description()}
+  </div>
 </div>
diff --git a/src/lib/pages/nexus-form.svelte b/src/lib/pages/nexus-form.svelte
index 3427af498b..8dcedbd079 100644
--- a/src/lib/pages/nexus-form.svelte
+++ b/src/lib/pages/nexus-form.svelte
@@ -54,7 +54,7 @@
     $endpointForm = {
       spec: {
         name,
-        descriptionString,
+        descriptionString: descriptionString.trim() || undefined,
         target: {
           worker: {
             namespace: target,
@@ -137,13 +137,14 @@
       id="caller-namespace-filter-menu"
       multiselect
       displayChips={false}
+      allowCustomValue
       bind:value={allowedCallerNamespaces}
       options={callerNamespaces}
       label={translate('nexus.allowed-caller-namespaces')}
       leadingIcon="search"
       noResultsText={translate('common.no-results')}
       valid={!!allowedCallerNamespaces.length}
-      error="Please select at least one Namespace."
+      error={translate('nexus.allowed-caller-namespaces-error')}
       placeholder={translate('nexus.select-namespaces')}
       optionValueKey="value"
       optionLabelKey="label"