diff --git a/.vscode/settings.json b/.vscode/settings.json
index f246aa88ed7..9c4a3241ce4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,10 @@
 {
   "cSpell.words": ["boxel"],
   "editor.formatOnSave": true,
+  "files.associations": {
+    "*.gts": "glimmer-ts",
+    "*.gjs": "glimmer-js"
+  },
   "[glimmer-js]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true
diff --git a/packages/boxel-ui/addon/src/components.ts b/packages/boxel-ui/addon/src/components.ts
index ae2cc978620..aee2d35cff2 100644
--- a/packages/boxel-ui/addon/src/components.ts
+++ b/packages/boxel-ui/addon/src/components.ts
@@ -46,6 +46,7 @@ import {
   cardsInColumn,
   columnCount as kanbanColumnCount,
   findInsertionFromPointer,
+  KanbanColumnConfigSidebar,
   KanbanDragManager,
   KanbanPlane,
   resolveInsertion,
@@ -138,6 +139,7 @@ export {
   GridContainer,
   Header,
   IconButton,
+  KanbanColumnConfigSidebar,
   kanbanColumnCount,
   KanbanDragManager,
   KanbanPlane,
diff --git a/packages/boxel-ui/addon/src/components/field-container/index.gts b/packages/boxel-ui/addon/src/components/field-container/index.gts
index f939bef0ff1..c614e40205f 100644
--- a/packages/boxel-ui/addon/src/components/field-container/index.gts
+++ b/packages/boxel-ui/addon/src/components/field-container/index.gts
@@ -14,6 +14,7 @@ export interface Signature {
     icon?: Icon;
     iconHeight?: string;
     iconWidth?: string;
+    inline?: boolean;
     label: string;
     labelFontSize?: BoxelLabelFontSize;
     tag?: keyof HTMLElementTagNameMap;
@@ -33,6 +34,7 @@ const FieldContainer: TemplateOnlyComponent<Signature> = <template>
         'boxel-field'
         vertical=(or @vertical @centeredDisplay)
         horizontal=(not (or @vertical @centeredDisplay))
+        inline=@inline
         small-label=(eq @horizontalLabelSize 'small')
         centered-display=@centeredDisplay
         with-icon=(bool @icon)
@@ -111,6 +113,9 @@ const FieldContainer: TemplateOnlyComponent<Signature> = <template>
         ); /* necessary for our various overlays utilizing box-shadow */
         word-break: break-word;
       }
+      .content:not(:has(input)) {
+        text-box-trim: trim-both;
+      }
 
       .horizontal {
         grid-template-columns:
@@ -127,6 +132,30 @@ const FieldContainer: TemplateOnlyComponent<Signature> = <template>
         align-self: center;
       }
 
+      .horizontal.inline {
+        --boxel-field-label-size: auto;
+        --boxel-field-content-size: auto;
+        display: inline-grid;
+        grid-template-columns:
+          var(--boxel-field-label-size)
+          var(--boxel-field-content-size);
+        width: fit-content;
+        min-height: unset;
+        gap: var(--boxel-sp-2xs);
+      }
+
+      .horizontal.inline > .label-container {
+        padding-top: 0;
+        align-self: start;
+        display: flex;
+        align-items: center;
+        height: var(--boxel-form-control-height);
+      }
+
+      .horizontal.inline > .content {
+        overflow: clip;
+      }
+
       .vertical {
         grid-template-rows: auto 1fr;
         gap: var(--boxel-sp-4xs);
diff --git a/packages/boxel-ui/addon/src/components/field-container/usage.gts b/packages/boxel-ui/addon/src/components/field-container/usage.gts
index 577631e9719..b08a622a416 100644
--- a/packages/boxel-ui/addon/src/components/field-container/usage.gts
+++ b/packages/boxel-ui/addon/src/components/field-container/usage.gts
@@ -26,9 +26,14 @@ export default class FieldUsage extends Component {
   @tracked icon = Profile;
   @tracked tag?: keyof HTMLElementTagNameMap;
 
-  @tracked vertical2 = false;
-  @tracked horizontalLabelSize2 = 'default';
-  @tracked icon2: Icon | undefined;
+  @tracked inline = false;
+
+  @tracked inline2 = false;
+
+  @tracked inline3 = false;
+  @tracked vertical3 = false;
+  @tracked horizontalLabelSize3 = 'default';
+  @tracked icon3: Icon | undefined;
   @cssVariable({ cssClassName: 'boxel-field' })
   declare boxelFieldLabelAlign: CSSVariableInfo;
   @cssVariable({ cssClassName: 'boxel-field' })
@@ -42,6 +47,7 @@ export default class FieldUsage extends Component {
           @label={{this.label}}
           @fieldId={{this.id}}
           @vertical={{this.vertical}}
+          @inline={{this.inline}}
           @horizontalLabelSize={{this.horizontalLabelSize}}
           @labelFontSize={{this.labelFontSize}}
           @centeredDisplay={{this.centeredDisplay}}
@@ -89,6 +95,13 @@ export default class FieldUsage extends Component {
           @onInput={{fn (mut this.vertical)}}
           @value={{this.vertical}}
         />
+        <Args.Bool
+          @name='inline'
+          @description='Compact horizontal layout: label column shrinks to content width, min-height removed. Use when embedding the field inside a flex row alongside other controls.'
+          @defaultValue='false'
+          @onInput={{fn (mut this.inline)}}
+          @value={{this.inline}}
+        />
         <Args.String
           @name='horizontalLabelSize'
           @description='Width of the label column (only applies to horizontal layout)'
@@ -135,20 +148,63 @@ export default class FieldUsage extends Component {
 
     <FreestyleUsage @name='Usage with Boxel::Input'>
       <:example>
-        <BoxelFieldContainer @tag='label' @label='Name'>
+        <BoxelFieldContainer
+          @tag='label'
+          @label='Name'
+          @inline={{this.inline2}}
+        >
           <BoxelInput @id='usage-boxel-input' @value='' />
         </BoxelFieldContainer>
       </:example>
+      <:api as |Args|>
+        <Args.Bool
+          @name='inline'
+          @description='Compact horizontal layout: label column shrinks to content width, min-height removed.'
+          @defaultValue='false'
+          @onInput={{fn (mut this.inline2)}}
+          @value={{this.inline2}}
+        />
+      </:api>
+    </FreestyleUsage>
+
+    <FreestyleUsage @name='Inline (compact horizontal)'>
+      <:description>
+        Use
+        <code>@inline</code>
+        when placing a labeled control inside a flex row alongside other
+        elements. The label column shrinks to fit its text and
+        <code>min-height</code>
+        is removed so the field doesn't impose extra height on the row.
+      </:description>
+      <:example>
+        <div class='inline-example-row'>
+          <BoxelFieldContainer @tag='label' @label='Max' @inline={{true}}>
+            <BoxelInput @type='number' @value={{0}} @min={{0}} />
+          </BoxelFieldContainer>
+          <BoxelFieldContainer @tag='label' @label='Min' @inline={{true}}>
+            <BoxelInput @type='number' @value={{0}} @min={{0}} />
+          </BoxelFieldContainer>
+        </div>
+      </:example>
     </FreestyleUsage>
 
+    <style scoped>
+      .inline-example-row {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-sm);
+      }
+    </style>
+
     <FreestyleUsage @name='Usage with Boxel::Input (invalid state)'>
       <:example>
         <BoxelFieldContainer
           @tag='label'
           @label='Name'
-          @vertical={{this.vertical2}}
-          @horizontalLabelSize={{this.horizontalLabelSize2}}
-          @icon={{this.icon2}}
+          @inline={{this.inline3}}
+          @vertical={{this.vertical3}}
+          @horizontalLabelSize={{this.horizontalLabelSize3}}
+          @icon={{this.icon3}}
         >
           <BoxelInput
             @id=''
@@ -163,24 +219,31 @@ export default class FieldUsage extends Component {
         <Args.Component
           @name='icon'
           @description='icon component reference'
-          @value={{this.icon2}}
+          @value={{this.icon3}}
           @options={{ALL_ICON_COMPONENTS}}
-          @onChange={{fn (mut this.icon2)}}
+          @onChange={{fn (mut this.icon3)}}
+        />
+        <Args.Bool
+          @name='inline'
+          @description='Compact horizontal layout: label column shrinks to content width, min-height removed.'
+          @defaultValue='false'
+          @onInput={{fn (mut this.inline3)}}
+          @value={{this.inline3}}
         />
         <Args.Bool
           @name='vertical'
           @description='Whether the field should be displayed vertically'
           @defaultValue='false'
-          @onInput={{fn (mut this.vertical2)}}
-          @value={{this.vertical2}}
+          @onInput={{fn (mut this.vertical3)}}
+          @value={{this.vertical3}}
         />
         <Args.String
           @name='horizontalLabelSize'
           @description='Width of the label column (only applies to horizontal layout)'
           @options={{array 'small' 'default'}}
           @defaultValue='minmax(4rem, 25%)'
-          @onInput={{fn (mut this.horizontalLabelSize2)}}
-          @value={{this.horizontalLabelSize2}}
+          @onInput={{fn (mut this.horizontalLabelSize3)}}
+          @value={{this.horizontalLabelSize3}}
         />
       </:api>
     </FreestyleUsage>
diff --git a/packages/boxel-ui/addon/src/components/input/index.gts b/packages/boxel-ui/addon/src/components/input/index.gts
index 7f991a58e27..9596fd64248 100644
--- a/packages/boxel-ui/addon/src/components/input/index.gts
+++ b/packages/boxel-ui/addon/src/components/input/index.gts
@@ -49,6 +49,11 @@ export const InputValidationStates = {
 
 export type InputValidationState = Values<typeof InputValidationStates>;
 
+export const InputSizes = {
+  Default: 'default',
+  Large: 'large',
+} as const;
+
 export const InputBottomTreatments = {
   Flat: 'flat',
   Rounded: 'rounded',
@@ -74,7 +79,7 @@ export interface Signature {
     placeholder?: string;
     readonly?: boolean;
     required?: boolean;
-    size?: 'large' | 'default';
+    size?: Values<typeof InputSizes>;
     state?: InputValidationState;
     type?: InputType;
     value: string | number | boolean | null | undefined;
@@ -248,14 +253,16 @@ export default class BoxelInput extends Component<Signature> {
         .input-container {
           --icon-size: var(--boxel-icon-sm);
           --icon-space: var(--boxel-sp-xs);
-          --icon-full-length: calc(
-            var(--boxel-icon-sm) + var(--boxel-sp-xs) * 2
+          --_icon-full-length: var(
+            --boxel-input-icon-size,
+            calc(var(--icon-size) + var(--icon-space) * 2)
           );
 
           display: grid;
-          grid-template-columns: var(--icon-full-length) 1fr var(
-              --icon-full-length
-            );
+          grid-template-columns:
+            var(--_icon-full-length)
+            1fr
+            var(--_icon-full-length);
           grid-template-areas:
             'optional optional optional'
             'pre-icon input post-icon'
@@ -269,7 +276,8 @@ export default class BoxelInput extends Component<Signature> {
           grid-row: 2;
 
           box-sizing: border-box;
-          width: 100%;
+          width: var(--boxel-input-width, 100%);
+          min-width: 0;
           max-width: 100%;
           min-height: var(
             --boxel-input-height,
@@ -299,6 +307,35 @@ export default class BoxelInput extends Component<Signature> {
           overflow: auto;
         }
 
+        .input-container:has([type='color']) {
+          --boxel-input-icon-size: 0;
+        }
+
+        .input-container:has([type='color']) .validation-icon-container,
+        .input-container:has([type='color']) .error-message,
+        .input-container:has([type='color']) .helper-text {
+          display: none;
+        }
+
+        .boxel-input[type='color'] {
+          width: 1.5rem;
+          height: 1.5rem;
+          min-height: unset;
+          padding: 0;
+          background: none;
+          border-radius: var(--boxel-border-radius-sm);
+          cursor: pointer;
+        }
+
+        .boxel-input[type='color']::-webkit-color-swatch-wrapper {
+          padding: 0;
+        }
+
+        .boxel-input[type='color']::-webkit-color-swatch {
+          border: none;
+          border-radius: calc(var(--boxel-border-radius-sm) - 1px);
+        }
+
         .boxel-input:not([type='color']):disabled {
           opacity: 0.5;
           resize: none; /* do not display resize toggle since it's disabled */
@@ -392,6 +429,11 @@ export default class BoxelInput extends Component<Signature> {
           user-select: none;
         }
 
+        .is-multiline .validation-icon-container {
+          align-items: flex-start;
+          padding-top: var(--boxel-sp-xs);
+        }
+
         .search ~ .validation-icon-container .validation-icon-loading {
           color: var(--primary, var(--boxel-highlight));
           --icon-color: currentColor;
diff --git a/packages/boxel-ui/addon/src/components/input/usage.gts b/packages/boxel-ui/addon/src/components/input/usage.gts
index 3a46ef64fc3..6db2ac6cc6f 100644
--- a/packages/boxel-ui/addon/src/components/input/usage.gts
+++ b/packages/boxel-ui/addon/src/components/input/usage.gts
@@ -16,6 +16,7 @@ import BoxelInput from './index.gts';
 import {
   type InputValidationState,
   InputBottomTreatments,
+  InputSizes,
   InputTypes,
   InputValidationStates,
 } from './index.gts';
@@ -23,6 +24,7 @@ import {
 const validTypes = Object.values(InputTypes);
 const validBottomTreatments = Object.values(InputBottomTreatments);
 const validStates = Object.values(InputValidationStates);
+const validSizes = Object.values(InputSizes);
 
 export default class InputUsage extends Component {
   @tracked id = 'sample-input';
@@ -37,7 +39,8 @@ export default class InputUsage extends Component {
   @tracked min = '';
   @tracked max = '';
   @tracked state: InputValidationState = 'initial';
-  @tracked size: 'large' | 'default' = 'default';
+  @tracked size: (typeof InputSizes)[keyof typeof InputSizes] =
+    InputSizes.Default;
 
   @tracked isChecked = false;
 
@@ -196,9 +199,9 @@ export default class InputUsage extends Component {
         />
         <Args.String
           @name='size'
-          @description='Optional larger size'
+          @description='Input size: large increases height, auto sets container width to fit-content'
           @onInput={{fn (mut this.size)}}
-          @options={{Array 'default' 'large'}}
+          @options={{validSizes}}
           @value={{this.size}}
           @defaultValue={{this.size}}
         />
diff --git a/packages/boxel-ui/addon/src/components/kanban/column-config-sidebar.gts b/packages/boxel-ui/addon/src/components/kanban/column-config-sidebar.gts
new file mode 100644
index 00000000000..a0f503fc4ec
--- /dev/null
+++ b/packages/boxel-ui/addon/src/components/kanban/column-config-sidebar.gts
@@ -0,0 +1,263 @@
+import ChevronDown from '@cardstack/boxel-icons/chevron-down';
+import ChevronUp from '@cardstack/boxel-icons/chevron-up';
+import Eye from '@cardstack/boxel-icons/eye';
+import EyeOff from '@cardstack/boxel-icons/eye-off';
+import XIcon from '@cardstack/boxel-icons/x';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action, set } from '@ember/object';
+import Component from '@glimmer/component';
+
+import FieldContainer from '../field-container/index.gts';
+import IconButton from '../icon-button/index.gts';
+import BoxelInput from '../input/index.gts';
+import type { KanbanColumnConfig } from './engine.ts';
+
+interface Signature {
+  Args: {
+    columns: KanbanColumnConfig[];
+    onClose?: () => void;
+    onColumnsChange?: (columns: KanbanColumnConfig[]) => void;
+  };
+  Element: HTMLElement;
+}
+
+export class KanbanColumnConfigSidebar extends Component<Signature> {
+  @action moveUp(column: KanbanColumnConfig, index: number): void {
+    let order = column.sortOrder ?? index;
+    if (order === 0) return;
+    let neighbor = this.args.columns.find(
+      (c, i) => c !== column && (c.sortOrder ?? i) === order - 1,
+    );
+    set(column, 'sortOrder', order - 1);
+    if (neighbor) set(neighbor, 'sortOrder', order);
+    let sorted = [...this.args.columns].sort(
+      (a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0),
+    );
+    this.args.onColumnsChange?.(sorted);
+  }
+
+  @action moveDown(column: KanbanColumnConfig, index: number): void {
+    let order = column.sortOrder ?? index;
+    if (order >= this.args.columns.length - 1) return;
+    let neighbor = this.args.columns.find(
+      (c, i) => c !== column && (c.sortOrder ?? i) === order + 1,
+    );
+    set(column, 'sortOrder', order + 1);
+    if (neighbor) set(neighbor, 'sortOrder', order);
+    let sorted = [...this.args.columns].sort(
+      (a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0),
+    );
+    this.args.onColumnsChange?.(sorted);
+  }
+
+  @action onColorChange(column: KanbanColumnConfig, event: Event): void {
+    set(column, 'color', (event.target as HTMLInputElement).value);
+    this.args.onColumnsChange?.(this.args.columns);
+  }
+
+  @action onLabelInput(column: KanbanColumnConfig, val: string): void {
+    set(column, 'label', val);
+    this.args.onColumnsChange?.(this.args.columns);
+  }
+
+  @action onWipInput(column: KanbanColumnConfig, val: string): void {
+    let raw = parseInt(val, 10);
+    let wipLimit = isNaN(raw) || raw < 0 ? 0 : raw;
+    set(column, 'wipLimit', wipLimit);
+    this.args.onColumnsChange?.(this.args.columns);
+  }
+
+  @action toggleVisible(column: KanbanColumnConfig): void {
+    set(column, 'collapsed', !this.isVisible(column));
+    this.args.onColumnsChange?.(this.args.columns);
+  }
+
+  isFirst = (
+    colOrder: KanbanColumnConfig['sortOrder'],
+    index: number,
+  ): boolean => {
+    let order = colOrder ?? index;
+    return order === 0;
+  };
+  isLast = (
+    colOrder: KanbanColumnConfig['sortOrder'],
+    index: number,
+  ): boolean => {
+    let order = colOrder ?? index;
+    return order >= this.args.columns.length - 1;
+  };
+  isVisible = (column: KanbanColumnConfig): boolean => !column?.collapsed;
+
+  <template>
+    <aside class='col-config-sidebar' ...attributes>
+      <header class='sidebar-header'>
+        <h2 class='sidebar-title'>Configure Columns</h2>
+        {{#if @onClose}}
+          <IconButton
+            class='sidebar-close'
+            @icon={{XIcon}}
+            @size='extra-small'
+            aria-label='Close column settings'
+            {{on 'click' @onClose}}
+          />
+        {{/if}}
+      </header>
+
+      <ul class='col-list'>
+        {{#each @columns key='key' as |column i|}}
+          <li class='col-row' data-test-col-config-row={{column.key}}>
+            <div class='col-row-order'>
+              <IconButton
+                @icon={{ChevronUp}}
+                @size='extra-small'
+                @disabled={{this.isFirst column.sortOrder i}}
+                aria-label='Move column up'
+                {{on 'click' (fn this.moveUp column)}}
+              />
+              <IconButton
+                @icon={{ChevronDown}}
+                @size='extra-small'
+                @disabled={{this.isLast column.sortOrder i}}
+                aria-label='Move column down'
+                {{on 'click' (fn this.moveDown column)}}
+              />
+            </div>
+
+            <label class='col-color-wrap'>
+              <span class='boxel-sr-only'>Color for
+                {{if column.label column.label 'column'}}</span>
+              <BoxelInput
+                @type='color'
+                @value={{if column.color column.color '#94a3b8'}}
+                @onChange={{fn this.onColorChange column}}
+                data-test-col-config-color={{column.key}}
+              />
+            </label>
+
+            <BoxelInput
+              class='col-label-input'
+              @value={{if column.label column.label ''}}
+              @placeholder='Label'
+              @onInput={{fn this.onLabelInput column}}
+              aria-label='Column label'
+              data-test-col-config-label={{column.key}}
+            />
+
+            <FieldContainer
+              class='col-wip-field'
+              @tag='label'
+              @label='Max'
+              @inline={{true}}
+            >
+              <BoxelInput
+                @value={{if column.wipLimit column.wipLimit 0}}
+                @type='number'
+                @min={{0}}
+                @onInput={{fn this.onWipInput column}}
+                data-test-col-config-wip={{column.key}}
+              />
+            </FieldContainer>
+
+            <IconButton
+              class='col-visible-btn'
+              @icon={{if (this.isVisible column) Eye EyeOff}}
+              @size='extra-small'
+              aria-label={{if
+                (this.isVisible column)
+                'Hide column'
+                'Show column'
+              }}
+              data-test-col-config-visible={{column.key}}
+              {{on 'click' (fn this.toggleVisible column)}}
+            />
+          </li>
+        {{/each}}
+      </ul>
+    </aside>
+
+    <style scoped>
+      .col-config-sidebar {
+        --boxel-col-config-sidebar-border: var(
+          --border,
+          var(--boxel-border-color)
+        );
+        --boxel-col-config-sidebar-width: 19rem;
+        --boxel-col-config-sidebar-height: 100%;
+        display: flex;
+        flex-direction: column;
+        width: var(--boxel-col-config-sidebar-width);
+        height: var(--boxel-col-config-sidebar-height);
+        flex-shrink: 0;
+        border-left: 1px solid var(--boxel-col-config-sidebar-border);
+        background: var(--sidebar, var(--boxel-light));
+        color: var(--sidebar-foreground, var(--boxel-dark));
+        overflow-y: auto;
+      }
+
+      .sidebar-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.75rem 1rem 0.625rem;
+        border-bottom: 1px solid var(--boxel-col-config-sidebar-border);
+        flex-shrink: 0;
+      }
+
+      .sidebar-title {
+        font-size: 0.875rem;
+      }
+
+      .col-list {
+        list-style: none;
+        margin: 0;
+        padding: 0.25rem 0;
+      }
+
+      .col-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        border-bottom: 1px solid
+          color-mix(
+            in oklch,
+            var(--boxel-col-config-sidebar-border) 50%,
+            transparent
+          );
+      }
+
+      .col-row:last-child {
+        border-bottom: none;
+      }
+
+      .col-row-order {
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+        flex-shrink: 0;
+      }
+
+      .col-color-wrap {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+      }
+
+      .col-label-input {
+        flex: 1;
+        min-width: 0;
+      }
+
+      .col-wip-field {
+        --boxel-field-content-size: 3rem;
+        --boxel-input-icon-size: 0;
+        flex-shrink: 0;
+      }
+
+      .col-visible-btn[aria-label='Show column'] {
+        opacity: 0.4;
+      }
+    </style>
+  </template>
+}
diff --git a/packages/boxel-ui/addon/src/components/kanban/drag.gts b/packages/boxel-ui/addon/src/components/kanban/drag.gts
index fc8282db498..fcbc450a21c 100644
--- a/packages/boxel-ui/addon/src/components/kanban/drag.gts
+++ b/packages/boxel-ui/addon/src/components/kanban/drag.gts
@@ -12,6 +12,7 @@ import {
   cardsInColumn,
   findInsertionFromDragRect,
   findInsertionFromPointer,
+  KanbanColumnConfig,
   resolveInsertion,
 } from './engine.ts';
 
@@ -27,7 +28,9 @@ function placementsEqual(a: KanbanPlacement[], b: KanbanPlacement[]): boolean {
   return a.every((p) => {
     const q = bMap.get(p.index);
     return (
-      q !== undefined && p.column === q.column && p.sortOrder === q.sortOrder
+      q !== undefined &&
+      p.columnId === q.columnId &&
+      p.sortOrder === q.sortOrder
     );
   });
 }
@@ -41,7 +44,8 @@ export type KanbanInteractionMode = 'idle' | 'pending' | 'drag' | 'kb-drag';
 
 export interface KanbanDragManagerArgs {
   columnCount: number;
-  isColumnVisible: (column: number) => boolean;
+  columns: KanbanColumnConfig[] | [];
+  isColumnVisible: (columnId: string) => boolean;
   onChange: (placements: KanbanPlacement[]) => void;
   onOpen?: (index: number) => void;
   onSelect?: (index: number | null) => void;
@@ -503,13 +507,15 @@ export class KanbanDragManager {
       return;
     }
 
-    const { column, position } = ins;
+    const { columnId, position } = ins;
     const colCards = this.args.placements
-      .filter((p) => p.column === column && p.index !== this.activeDragIndex)
+      .filter(
+        (p) => p.columnId === columnId && p.index !== this.activeDragIndex,
+      )
       .sort((a, b) => a.sortOrder - b.sortOrder);
 
     const colEl = container.querySelector(
-      `[data-kanban-column="${column}"]`,
+      `[data-kanban-column="${columnId}"]`,
     ) as HTMLElement | null;
     const bodyEl = colEl?.querySelector(
       '[data-kanban-col-body]',
@@ -575,14 +581,14 @@ export class KanbanDragManager {
     }
     // The settle animation moves the ghost to the exact slot it will resolve
     // into before onChange updates the parent-owned placements.
-    const { column, position } = this.insertion;
+    const { columnId, position } = this.insertion;
     const placements = this.args.placements;
     const colCards = placements
-      .filter((p) => p.column === column && p.index !== this.dragIndex)
+      .filter((p) => p.columnId === columnId && p.index !== this.dragIndex)
       .sort((a, b) => a.sortOrder - b.sortOrder);
 
     const colEl = container.querySelector(
-      `[data-kanban-column="${column}"]`,
+      `[data-kanban-column="${columnId}"]`,
     ) as HTMLElement | null;
     if (!colEl) {
       return;
@@ -649,7 +655,7 @@ export class KanbanDragManager {
       return;
     }
 
-    const colCards = cardsInColumn(placement.column, placements).filter(
+    const colCards = cardsInColumn(placement.columnId, placements).filter(
       (p) => p.index !== index,
     );
     const slot = colCards.filter(
@@ -669,7 +675,7 @@ export class KanbanDragManager {
       this.dragGhostHeight = rect.height;
       this.activeCardHeight = rect.height;
     }
-    this.insertion = this.slotToInsertion(placement.column, slot, colCards);
+    this.insertion = this.slotToInsertion(placement.columnId, slot, colCards);
     this.updateInsertionBox();
     this.args.onSelect?.(index);
     this.announcement =
@@ -699,37 +705,39 @@ export class KanbanDragManager {
       return;
     }
     const placements = this.args.placements;
-    const { column } = this.insertion;
-    const totalColumns = this.args.columnCount;
+    const { columnId } = this.insertion;
+    const columns = this.args.columns ?? [];
+    const columnIdx = columns.findIndex((c) => c.key === columnId);
+    const totalColumns = columns.length;
 
     if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
       const delta = e.key === 'ArrowLeft' ? -1 : 1;
-      let newColumn = column + delta;
-      while (
-        newColumn >= 0 &&
-        newColumn < totalColumns &&
-        !this.isColumnVisible(newColumn)
-      ) {
-        newColumn += delta;
+      let newIdx = columnIdx + delta;
+      while (newIdx >= 0 && newIdx < totalColumns) {
+        if (this.isColumnVisible(columns[newIdx]!.key)) {
+          break;
+        }
+        newIdx += delta;
       }
-      if (newColumn < 0 || newColumn >= totalColumns || newColumn === column) {
+      if (newIdx < 0 || newIdx >= totalColumns || newIdx === columnIdx) {
         return;
       }
-      const currentColCards = cardsInColumn(column, placements).filter(
+      const newColumnId = columns[newIdx]!.key;
+      const currentColCards = cardsInColumn(columnId, placements).filter(
         (p) => p.index !== this.activeDragIndex,
       );
       const currentSlot = this.insertionToSlot(this.insertion, currentColCards);
-      const newColCards = cardsInColumn(newColumn, placements).filter(
+      const newColCards = cardsInColumn(newColumnId, placements).filter(
         (p) => p.index !== this.activeDragIndex,
       );
       const newSlot = Math.min(currentSlot, newColCards.length);
-      this.insertion = this.slotToInsertion(newColumn, newSlot, newColCards);
+      this.insertion = this.slotToInsertion(newColumnId, newSlot, newColCards);
       this.updateInsertionBox();
-      this.announcement = `Column ${newColumn + 1}. Position ${newSlot + 1} of ${newColCards.length + 1}.`;
+      this.announcement = `Column ${newIdx + 1}. Position ${newSlot + 1} of ${newColCards.length + 1}.`;
       return;
     }
 
-    const colCards = cardsInColumn(column, placements).filter(
+    const colCards = cardsInColumn(columnId, placements).filter(
       (p) => p.index !== this.activeDragIndex,
     );
     const currentSlot = this.insertionToSlot(this.insertion, colCards);
@@ -740,7 +748,7 @@ export class KanbanDragManager {
     if (newSlot === currentSlot) {
       return;
     }
-    this.insertion = this.slotToInsertion(column, newSlot, colCards);
+    this.insertion = this.slotToInsertion(columnId, newSlot, colCards);
     this.updateInsertionBox();
     this.announcement = `Position ${newSlot + 1} of ${colCards.length + 1}.`;
   }
@@ -780,7 +788,7 @@ export class KanbanDragManager {
   private navigateFocus(direction: 'up' | 'down' | 'left' | 'right'): void {
     const placements = this.args.placements;
     const visiblePlacements = placements.filter((p) =>
-      this.isColumnVisible(p.column),
+      this.isColumnVisible(p.columnId),
     );
     if (visiblePlacements.length === 0) {
       return;
@@ -792,9 +800,9 @@ export class KanbanDragManager {
         ? visiblePlacements.find((p) => p.index === currentIndex)
         : null;
 
-    const colCards = (col: number) =>
+    const colCards = (colId: string) =>
       visiblePlacements
-        .filter((p) => p.column === col)
+        .filter((p) => p.columnId === colId)
         .sort((a, b) => a.sortOrder - b.sortOrder);
 
     let targetCard: KanbanPlacement | undefined;
@@ -802,31 +810,34 @@ export class KanbanDragManager {
     if (!current) {
       targetCard = visiblePlacements
         .slice()
-        .sort((a, b) => a.column - b.column || a.sortOrder - b.sortOrder)[0];
+        .sort((a, b) => a.sortOrder - b.sortOrder)[0];
     } else if (direction === 'up') {
-      const cards = colCards(current.column);
+      const cards = colCards(current.columnId);
       const idx = cards.findIndex((p) => p.index === current.index);
       targetCard = cards[idx - 1];
     } else if (direction === 'down') {
-      const cards = colCards(current.column);
+      const cards = colCards(current.columnId);
       const idx = cards.findIndex((p) => p.index === current.index);
       targetCard = cards[idx + 1];
     } else {
       const delta = direction === 'left' ? -1 : 1;
-      const totalCols = this.args.columnCount;
-      const currentRowIndex = colCards(current.column).findIndex(
+      const columns = this.args.columns ?? [];
+      const totalCols = columns.length;
+      const currentRowIndex = colCards(current.columnId).findIndex(
         (p) => p.index === current.index,
       );
-      let col = current.column + delta;
+      const currentColIdx = columns.findIndex(
+        (c) => c.key === current.columnId,
+      );
+      let col = currentColIdx + delta;
       while (col >= 0 && col < totalCols) {
-        if (!this.isColumnVisible(col)) {
-          col += delta;
-          continue;
-        }
-        const cards = colCards(col);
-        if (cards.length > 0) {
-          targetCard = cards[Math.min(currentRowIndex, cards.length - 1)];
-          break;
+        const colKey = columns[col]!.key;
+        if (this.isColumnVisible(colKey)) {
+          const cards = colCards(colKey);
+          if (cards.length > 0) {
+            targetCard = cards[Math.min(currentRowIndex, cards.length - 1)];
+            break;
+          }
         }
         col += delta;
       }
@@ -861,20 +872,20 @@ export class KanbanDragManager {
   }
 
   private slotToInsertion(
-    column: number,
+    columnId: string,
     slot: number,
     colCards: KanbanPlacement[],
   ): InsertionPoint {
     if (slot >= colCards.length) {
       return {
-        column,
+        columnId,
         insertBeforeIndex: -1,
         position: (colCards[colCards.length - 1]?.sortOrder ?? 0) + 1,
       };
     }
     const beforeCard = colCards[slot]!;
     return {
-      column,
+      columnId,
       insertBeforeIndex: beforeCard.index,
       position: beforeCard.sortOrder,
     };
@@ -900,8 +911,8 @@ export class KanbanDragManager {
     this.updateInsertionBox();
   }
 
-  private isColumnVisible(column: number): boolean {
-    return this.args.isColumnVisible(column);
+  private isColumnVisible(columnId: string): boolean {
+    return this.args.isColumnVisible(columnId);
   }
 
   private cancelDrag(): void {
diff --git a/packages/boxel-ui/addon/src/components/kanban/engine.ts b/packages/boxel-ui/addon/src/components/kanban/engine.ts
index 98450ac3d32..d882d4ae74e 100644
--- a/packages/boxel-ui/addon/src/components/kanban/engine.ts
+++ b/packages/boxel-ui/addon/src/components/kanban/engine.ts
@@ -3,13 +3,13 @@
 // ── Types ────────────────────────────────────────────────────────────── //
 
 export interface KanbanPlacement {
-  column: number; // which lane (0-based)
+  columnId: string; // column id
   index: number; // card index in linksToMany
   sortOrder: number; // position within column (1, 2, 3...)
 }
 
 export interface InsertionPoint {
-  column: number; // target lane
+  columnId: string; // target column id
   insertBeforeIndex: number; // card index to insert before (-1 = end)
   position: number; // sort position for shift calculations
 }
@@ -24,7 +24,7 @@ export interface DragRect {
 export interface KanbanColumnConfig {
   collapsed: boolean | null;
   color: string | null;
-  key: string | null;
+  key: string;
   label: string | null;
   sortOrder: number | null;
   wipLimit: number | null;
@@ -34,20 +34,20 @@ export interface KanbanColumnConfig {
 
 /** Get cards in a column, sorted by sortOrder. */
 export function cardsInColumn(
-  column: number,
+  columnId: string,
   placements: KanbanPlacement[],
 ): KanbanPlacement[] {
   return placements
-    .filter((p) => p.column === column)
+    .filter((p) => p.columnId === columnId)
     .sort((a, b) => a.sortOrder - b.sortOrder);
 }
 
 /** Count cards in a column. */
 export function columnCount(
-  column: number,
+  columnId: string,
   placements: KanbanPlacement[],
 ): number {
-  return placements.filter((p) => p.column === column).length;
+  return placements.filter((p) => p.columnId === columnId).length;
 }
 
 // ── Insertion Resolution ─────────────────────────────────────────────── //
@@ -68,13 +68,13 @@ export function resolveInsertion(
     return result;
   }
 
-  const sourceColumn = dragCard.column;
-  const targetColumn = insertion.column;
+  const sourceColumn = dragCard.columnId;
+  const targetColumn = insertion.columnId;
 
-  dragCard.column = targetColumn;
+  dragCard.columnId = targetColumn;
 
   const targetCards = result
-    .filter((p) => p.column === targetColumn && p.index !== dragIndex)
+    .filter((p) => p.columnId === targetColumn && p.index !== dragIndex)
     .sort((a, b) => a.sortOrder - b.sortOrder);
 
   let insertAt = targetCards.length;
@@ -99,7 +99,7 @@ export function resolveInsertion(
 
   if (sourceColumn !== targetColumn) {
     const sourceCards = result
-      .filter((p) => p.column === sourceColumn && p.index !== dragIndex)
+      .filter((p) => p.columnId === sourceColumn && p.index !== dragIndex)
       .sort((a, b) => a.sortOrder - b.sortOrder);
     sourceCards.forEach((p, i) => {
       p.sortOrder = i + 1;
@@ -112,18 +112,18 @@ export function resolveInsertion(
 // ── Insertion Point from Pointer ─────────────────────────────────────── //
 
 function resolveInsertionInColumn(
-  targetColumn: number,
+  targetColumnId: string,
   clientY: number,
   container: HTMLElement,
   placements: KanbanPlacement[],
   dragIndex: number,
 ): InsertionPoint | null {
-  const columnCards = cardsInColumn(targetColumn, placements).filter(
+  const columnCards = cardsInColumn(targetColumnId, placements).filter(
     (p) => p.index !== dragIndex,
   );
 
   if (columnCards.length === 0) {
-    return { column: targetColumn, insertBeforeIndex: -1, position: 1 };
+    return { columnId: targetColumnId, insertBeforeIndex: -1, position: 1 };
   }
 
   for (let i = 0; i < columnCards.length; i++) {
@@ -140,7 +140,7 @@ function resolveInsertionInColumn(
 
     if (clientY < midY) {
       return {
-        column: targetColumn,
+        columnId: targetColumnId,
         insertBeforeIndex: entry.index,
         position: entry.sortOrder,
       };
@@ -149,7 +149,7 @@ function resolveInsertionInColumn(
 
   const lastCard = columnCards[columnCards.length - 1];
   return {
-    column: targetColumn,
+    columnId: targetColumnId,
     insertBeforeIndex: -1,
     position: (lastCard?.sortOrder ?? 0) + 1,
   };
@@ -167,23 +167,23 @@ export function findInsertionFromPointer(
   dragIndex: number,
 ): InsertionPoint | null {
   const columnEls = container.querySelectorAll('[data-kanban-column]');
-  let targetColumn: number | null = null;
+  let targetColumnId: string | null = null;
 
   for (let i = 0; i < columnEls.length; i++) {
     const el = columnEls[i] as HTMLElement;
     const rect = el.getBoundingClientRect();
     if (clientX >= rect.left && clientX <= rect.right) {
-      targetColumn = parseInt(el.getAttribute('data-kanban-column')!, 10);
+      targetColumnId = el.getAttribute('data-kanban-column')!;
       break;
     }
   }
 
-  if (targetColumn === null) {
+  if (targetColumnId === null) {
     return null;
   }
 
   return resolveInsertionInColumn(
-    targetColumn,
+    targetColumnId,
     clientY,
     container,
     placements,
@@ -198,7 +198,7 @@ export function findInsertionFromDragRect(
   dragIndex: number,
 ): InsertionPoint | null {
   const columnEls = container.querySelectorAll('[data-kanban-column]');
-  let targetColumn: number | null = null;
+  let targetColumnId: string | null = null;
   let bestOverlap = 0;
 
   for (let i = 0; i < columnEls.length; i++) {
@@ -209,17 +209,17 @@ export function findInsertionFromDragRect(
 
     if (overlap > bestOverlap) {
       bestOverlap = overlap;
-      targetColumn = parseInt(el.getAttribute('data-kanban-column')!, 10);
+      targetColumnId = el.getAttribute('data-kanban-column')!;
     }
   }
 
-  if (targetColumn === null || bestOverlap <= 0) {
+  if (targetColumnId === null || bestOverlap <= 0) {
     return null;
   }
 
   const centerY = (dragRect.top + dragRect.bottom) / 2;
   return resolveInsertionInColumn(
-    targetColumn,
+    targetColumnId,
     centerY,
     container,
     placements,
@@ -232,16 +232,22 @@ export function findInsertionFromDragRect(
 /** Distribute N cards across columns evenly. */
 export function autoPlaceKanban(
   itemCount: number,
-  columnCount: number,
+  columns: KanbanColumnConfig[],
 ): KanbanPlacement[] {
+  let columnCount = columns?.length;
   if (columnCount <= 0) {
     return [];
   }
   const placements: KanbanPlacement[] = [];
   for (let i = 0; i < itemCount; i++) {
-    const col = i % columnCount;
+    const colIndex = i % columnCount;
+    const colId = columns[colIndex]?.key;
+    if (!colId) {
+      console.error(`Kanban column at index ${colIndex} is missing key.`);
+      continue;
+    }
     const row = Math.floor(i / columnCount) + 1;
-    placements.push({ index: i, column: col, sortOrder: row });
+    placements.push({ index: i, columnId: colId, sortOrder: row });
   }
   return placements;
 }
diff --git a/packages/boxel-ui/addon/src/components/kanban/index.gts b/packages/boxel-ui/addon/src/components/kanban/index.gts
index ebf9991ddd2..81748faef82 100644
--- a/packages/boxel-ui/addon/src/components/kanban/index.gts
+++ b/packages/boxel-ui/addon/src/components/kanban/index.gts
@@ -1,4 +1,5 @@
 export { KanbanCard } from './card.gts';
+export { KanbanColumnConfigSidebar } from './column-config-sidebar.gts';
 export { KanbanColumnHeader } from './column-header.gts';
 export { KanbanDragManager } from './drag.gts';
 export {
diff --git a/packages/boxel-ui/addon/src/components/kanban/plane-inner.gts b/packages/boxel-ui/addon/src/components/kanban/plane-inner.gts
index 0dce2db44aa..1dec1639eb5 100644
--- a/packages/boxel-ui/addon/src/components/kanban/plane-inner.gts
+++ b/packages/boxel-ui/addon/src/components/kanban/plane-inner.gts
@@ -36,8 +36,7 @@ export class KanbanPlaneInner extends Component<{
     hideEmpty?: boolean;
     manager: KanbanDragManager;
     onAddCard?: (columnKey: string | null) => void;
-    onShowEmptyColumns?: () => void;
-    onToggleCollapsed?: (columnKey: string | null, collapsed: boolean) => void;
+    onToggleCollapsed?: (columnKey: string) => void;
     placements: KanbanPlacement[];
   };
   Blocks: {
@@ -74,61 +73,14 @@ export class KanbanPlaneInner extends Component<{
     this.manager.registerContainer(el);
   };
 
-  columnCards = (colIndex: number): KanbanPlacement[] =>
-    cardsInColumn(colIndex, this.args.placements);
-  columnCardCount = (colIndex: number): number =>
-    colCount(colIndex, this.args.placements);
+  columnCards = (colId: string): KanbanPlacement[] =>
+    cardsInColumn(colId, this.args.placements);
+  columnCardCount = (colId: string): number =>
+    colCount(colId, this.args.placements);
 
-  isColumnVisible = (column: KanbanColumnConfig, colIndex: number): boolean => {
-    if (column.collapsed) {
-      return false;
-    }
-    if (!this.args.hideEmpty) {
-      return true;
-    }
-    return this.columnCardCount(colIndex) > 0;
-  };
-
-  isOverWip = (column: KanbanColumnConfig, colIndex: number): boolean => {
+  isOverWip = (column: KanbanColumnConfig): boolean => {
     const limit = column.wipLimit ?? 0;
-    return limit > 0 && this.columnCardCount(colIndex) > limit;
-  };
-
-  get hiddenColumns(): Array<{
-    cardCount: number;
-    colIndex: number;
-    config: KanbanColumnConfig;
-    reason: 'collapsed' | 'empty';
-  }> {
-    return this.columns
-      .map((config, colIndex) => ({
-        config,
-        colIndex,
-        cardCount: this.columnCardCount(colIndex),
-        reason: (config.collapsed ? 'collapsed' : 'empty') as
-          | 'collapsed'
-          | 'empty',
-      }))
-      .filter(
-        ({ config, colIndex }) => !this.isColumnVisible(config, colIndex),
-      );
-  }
-
-  restoreColumn = (hc: {
-    cardCount: number;
-    config: KanbanColumnConfig;
-    reason: 'collapsed' | 'empty';
-  }): void => {
-    if (hc.reason === 'collapsed') {
-      this.args.onToggleCollapsed?.(hc.config.key, false);
-      // A collapsed-and-empty column stays hidden after uncollapsing when
-      // hideEmpty is on — clear the empty filter too so the column appears.
-      if (this.args.hideEmpty && hc.cardCount === 0) {
-        this.args.onShowEmptyColumns?.();
-      }
-    } else {
-      this.args.onShowEmptyColumns?.();
-    }
+    return limit > 0 && this.columnCardCount(column.key) > limit;
   };
 
   get isDragging(): boolean {
@@ -151,14 +103,15 @@ export class KanbanPlaneInner extends Component<{
   isSource = (p: KanbanPlacement): boolean =>
     p.index === this.manager.collapseIndex;
 
-  isTargetColumn = (colIndex: number): boolean => {
+  isTargetColumn = (colId: string): boolean => {
     const ins = this.manager.insertion;
-    return ins !== null && ins.column === colIndex && this.isActivelyMoving;
+    return ins !== null && ins.columnId === colId && this.isActivelyMoving;
   };
 
   shouldShiftDown = (p: KanbanPlacement): boolean => {
     const ins = this.manager.insertion;
-    if (!ins || !this.isActivelyMoving || p.column !== ins.column) return false;
+    if (!ins || !this.isActivelyMoving || p.columnId !== ins.columnId)
+      return false;
     if (p.index === this.manager.activeDragIndex) return false;
     return p.sortOrder >= ins.position;
   };
@@ -173,17 +126,16 @@ export class KanbanPlaneInner extends Component<{
     return sanitizeHtmlSafe('');
   };
 
-  showInsertionBox = (colIndex: number): boolean => {
+  showInsertionBox = (colId: string): boolean => {
     return (
       this.manager.insertion !== null &&
-      this.manager.insertion.column === colIndex &&
+      this.manager.insertion.columnId === colId &&
       this.isActivelyMoving
     );
   };
 
-  insertionBoxStyle = (colIndex: number): SafeString => {
-    if (!this.showInsertionBox(colIndex))
-      return sanitizeHtmlSafe('display: none');
+  insertionBoxStyle = (colId: string): SafeString => {
+    if (!this.showInsertionBox(colId)) return sanitizeHtmlSafe('display: none');
     const off = this.manager.insertionBoxOffset;
     if (!off) return sanitizeHtmlSafe('display: none');
     const height = off.height > 0 ? off.height : this.cardFormat.height;
@@ -211,13 +163,32 @@ export class KanbanPlaneInner extends Component<{
   get roverIndex(): number | null {
     const sel = this.manager.selectedIndex;
     if (sel !== null) return sel;
-    for (let colIdx = 0; colIdx < this.columns.length; colIdx++) {
-      const cards = this.columnCards(colIdx);
+    for (const col of this.columns) {
+      const cards = this.columnCards(col.key);
       if (cards.length > 0) return cards[0]!.index;
     }
     return null;
   }
 
+  get hiddenColumns(): Array<{
+    cardCount: number;
+    config: KanbanColumnConfig;
+  }> {
+    return this.columns
+      .filter((config) => config.collapsed)
+      .map((config) => ({
+        config,
+        cardCount: this.columnCardCount(config.key),
+      }));
+  }
+
+  restoreColumn = (hc: {
+    cardCount: number;
+    config: KanbanColumnConfig;
+  }): void => {
+    this.args.onToggleCollapsed?.(hc.config.key);
+  };
+
   <template>
     <div
       class={{cn 'board' is-dragging=this.isDragging}}
@@ -240,41 +211,41 @@ export class KanbanPlaneInner extends Component<{
         aria-atomic='true'
       >{{this.manager.announcement}}</div>
 
-      {{#each this.columns as |column colIdx|}}
-        {{#if (this.isColumnVisible column colIdx)}}
+      {{#each this.columns as |column|}}
+        {{#unless column.collapsed}}
           <div
             class={{cn
               'column'
-              is-target=(this.isTargetColumn colIdx)
-              is-over-wip=(this.isOverWip column colIdx)
+              is-target=(this.isTargetColumn column.key)
+              is-over-wip=(this.isOverWip column)
             }}
             role='group'
             aria-label={{if column.label column.label 'Untitled'}}
             style={{this.columnStyle}}
-            data-kanban-column={{colIdx}}
-            data-test-column-is-over-wip={{this.isOverWip column colIdx}}
+            data-kanban-column={{column.key}}
+            data-test-column-is-over-wip={{this.isOverWip column}}
           >
             <KanbanColumnHeader
               @column={{column}}
-              @cardCount={{this.columnCardCount colIdx}}
-              @isOverWip={{this.isOverWip column colIdx}}
-              @isTarget={{this.isTargetColumn colIdx}}
+              @cardCount={{this.columnCardCount column.key}}
+              @isOverWip={{this.isOverWip column}}
+              @isTarget={{this.isTargetColumn column.key}}
               @onAddCard={{if @onAddCard (fn @onAddCard column.key)}}
               @onCollapse={{if
                 @onToggleCollapsed
-                (fn @onToggleCollapsed column.key true)
+                (fn @onToggleCollapsed column.key)
               }}
             />
 
             <div class='col-body' role='list' data-kanban-col-body>
-              {{#if (this.showInsertionBox colIdx)}}
+              {{#if (this.showInsertionBox column.key)}}
                 <div
                   class='insertion-box'
-                  style={{this.insertionBoxStyle colIdx}}
+                  style={{this.insertionBoxStyle column.key}}
                 ></div>
               {{/if}}
 
-              {{#each (this.columnCards colIdx) as |placement|}}
+              {{#each (this.columnCards column.key) as |placement|}}
                 <KanbanCard
                   @placement={{placement}}
                   @isSelected={{eq placement.index this.manager.selectedIndex}}
@@ -288,16 +259,16 @@ export class KanbanPlaneInner extends Component<{
                 </KanbanCard>
               {{/each}}
 
-              {{#unless (this.columnCardCount colIdx)}}
+              {{#unless (this.columnCardCount column.key)}}
                 <div
                   class='empty-col'
                   aria-hidden='true'
-                  data-test-empty-column={{colIdx}}
+                  data-test-empty-column={{column.key}}
                 >No cards</div>
               {{/unless}}
             </div>
           </div>
-        {{/if}}
+        {{/unless}}
       {{/each}}
 
       {{#if this.hiddenColumns.length}}
diff --git a/packages/boxel-ui/addon/src/components/kanban/plane.gts b/packages/boxel-ui/addon/src/components/kanban/plane.gts
index e93d8f5091d..638983bcf66 100644
--- a/packages/boxel-ui/addon/src/components/kanban/plane.gts
+++ b/packages/boxel-ui/addon/src/components/kanban/plane.gts
@@ -18,8 +18,7 @@ export class KanbanPlane extends Component<{
     onChange?: (placements: KanbanPlacement[]) => void;
     onOpen?: (index: number) => void;
     onSelect?: (index: number | null) => void;
-    onShowEmptyColumns?: () => void;
-    onToggleCollapsed?: (columnKey: string | null, collapsed: boolean) => void;
+    onToggleCollapsed?: (columnKey: string | null) => void;
     placements: KanbanPlacement[];
   };
   Blocks: {
@@ -34,6 +33,9 @@ export class KanbanPlane extends Component<{
 
     let self = this;
     let managerArgs = {
+      get columns() {
+        return self.args.columns;
+      },
       get columnCount() {
         return self.args.columns.length;
       },
@@ -70,17 +72,9 @@ export class KanbanPlane extends Component<{
     this.args.onSelect?.(index);
   };
 
-  isColumnVisible = (colIndex: number): boolean => {
-    let column = this.args.columns[colIndex];
-    if (!column || column.collapsed) {
-      return false;
-    }
-    if (!this.args.hideEmpty) {
-      return true;
-    }
-    return this.args.placements.some(
-      (placement) => placement.column === colIndex,
-    );
+  isColumnVisible = (colId: string): boolean => {
+    let column = this.args.columns.find((c) => c.key === colId);
+    return !column?.collapsed;
   };
 
   <template>
@@ -93,7 +87,6 @@ export class KanbanPlane extends Component<{
       @manager={{this.ownedManager}}
       @onAddCard={{@onAddCard}}
       @onToggleCollapsed={{@onToggleCollapsed}}
-      @onShowEmptyColumns={{@onShowEmptyColumns}}
       @placements={{@placements}}
     >
       <:card as |placement|>
diff --git a/packages/boxel-ui/addon/src/components/kanban/usage.gts b/packages/boxel-ui/addon/src/components/kanban/usage.gts
index 7eafd8d8548..f2e9e4bd359 100644
--- a/packages/boxel-ui/addon/src/components/kanban/usage.gts
+++ b/packages/boxel-ui/addon/src/components/kanban/usage.gts
@@ -1,8 +1,9 @@
 import { fn, get } from '@ember/helper';
-import { action } from '@ember/object';
+import { action, set } from '@ember/object';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+import { TrackedArray, TrackedObject } from 'tracked-built-ins';
 
 import { type FittedFormatId, fittedFormatById } from '../../helpers.ts';
 import {
@@ -14,6 +15,7 @@ import CardContainer from '../card-container/index.gts';
 import Switch from '../switch/index.gts';
 import type { ViewItem } from '../view-selector/index.gts';
 import ViewSelector from '../view-selector/index.gts';
+import { KanbanColumnConfigSidebar } from './column-config-sidebar.gts';
 import {
   type KanbanColumnConfig,
   type KanbanPlacement,
@@ -92,14 +94,27 @@ const KANBAN_VIEW_TO_SIZE: Record<string, FittedFormatId> = {
 export default class KanbanUsage extends Component {
   fittedFormats = KANBAN_CARD_SIZE_OPTIONS;
   sizeViewOptions = KANBAN_VIEW_OPTIONS;
-  @tracked columns = INITIAL_COLUMNS;
+  columns = TrackedArray.from(
+    INITIAL_COLUMNS.map(
+      (c) =>
+        new TrackedObject(
+          c as unknown as Record<PropertyKey, unknown>,
+        ) as unknown as KanbanColumnConfig,
+    ),
+  );
   @tracked cards = INITIAL_CARDS;
-  @tracked placements = autoPlaceKanban(INITIAL_CARDS.length, 4);
-  @tracked hideEmpty = false;
+  @tracked placements = autoPlaceKanban(INITIAL_CARDS.length, this.columns);
+  get hideEmpty(): boolean {
+    let emptyCols = this.columns.filter(
+      (col) => cardsInColumn(col.key, this.placements).length === 0,
+    );
+    return emptyCols.length > 0 && emptyCols.every((col) => col.collapsed);
+  }
   @tracked selectedIndex: number | null = null;
   @tracked openedIndex: number | null = null;
   @tracked cardSizeView = 'tile';
   @tracked cardSize: FittedFormatId = 'regular-tile';
+  @tracked showSidebar = true;
 
   @action handlePlacementsChange(placements: KanbanPlacement[]): void {
     this.placements = placements;
@@ -127,10 +142,6 @@ export default class KanbanUsage extends Component {
     return this.cards[this.openedIndex] ?? null;
   }
 
-  get secondColumn(): KanbanColumnConfig {
-    return this.columns[1] ?? this.columns[0]!;
-  }
-
   formatTitle(size: FittedFormatId) {
     return fittedFormatById.get(size)?.title ?? size;
   }
@@ -141,29 +152,35 @@ export default class KanbanUsage extends Component {
   }
 
   @action toggleHideEmpty(): void {
-    this.hideEmpty = !this.hideEmpty;
+    let next = !this.hideEmpty;
+    this.columns.forEach((col) => {
+      if (cardsInColumn(col.key, this.placements).length === 0) {
+        set(col, 'collapsed', next);
+      }
+    });
   }
 
-  @action handleToggleCollapsed(
-    columnKey: string | null,
-    collapsed: boolean,
-  ): void {
-    this.columns = this.columns.map((col) =>
-      col.key === columnKey ? { ...col, collapsed } : col,
-    );
+  @action toggleCollapsed(columnKey: string | null): void {
+    this.columns.forEach((col) => {
+      if (col.key === columnKey) {
+        set(col, 'collapsed', !col.collapsed);
+      }
+    });
   }
 
-  @action handleShowEmptyColumns(): void {
-    this.hideEmpty = false;
+  @action toggleSidebar(): void {
+    this.showSidebar = !this.showSidebar;
   }
 
   @action addCard(columnKey: string | null): void {
     let nextIndex = this.cards.length;
-    let columnIndex = this.columns.findIndex(
-      (column) => column.key === columnKey,
-    );
-    let resolvedColumnIndex = columnIndex === -1 ? 0 : columnIndex;
-    let existingCards = cardsInColumn(resolvedColumnIndex, this.placements);
+    let column = this.columns.find((column) => column.key === columnKey);
+    let resolvedColumnKey = column?.key ?? this.columns[0]?.key;
+    if (!resolvedColumnKey) {
+      console.error(`Kanban column for key '${columnKey}' could not be found.`);
+      return;
+    }
+    let existingCards = cardsInColumn(resolvedColumnKey, this.placements);
     let nextOrder =
       (existingCards[existingCards.length - 1]?.sortOrder ?? 0) + 1;
 
@@ -178,7 +195,7 @@ export default class KanbanUsage extends Component {
       ...this.placements,
       {
         index: nextIndex,
-        column: resolvedColumnIndex,
+        columnId: resolvedColumnKey,
         sortOrder: nextOrder,
       },
     ];
@@ -248,8 +265,7 @@ export default class KanbanUsage extends Component {
               @cardSize={{this.cardSize}}
               @hideEmpty={{this.hideEmpty}}
               @onAddCard={{this.addCard}}
-              @onToggleCollapsed={{this.handleToggleCollapsed}}
-              @onShowEmptyColumns={{this.handleShowEmptyColumns}}
+              @onToggleCollapsed={{this.toggleCollapsed}}
             >
               <:card as |placement|>
                 {{#let (get this.cards placement.index) as |card|}}
@@ -306,10 +322,6 @@ export default class KanbanUsage extends Component {
           @name='onToggleCollapsed'
           @description='Invoked with the column key when a column is collapsed via its header button or restored from the Hidden Columns tray.'
         />
-        <Args.Action
-          @name='onShowEmptyColumns'
-          @description='Invoked when the user clicks restore on an empty column in the Hidden Columns tray. Should disable the hideEmpty flag so the column becomes visible again.'
-        />
         <Args.Action
           @name='onOpen'
           @description='Invoked with a card index when the internally owned drag manager treats a pointer interaction as open.'
@@ -333,6 +345,77 @@ export default class KanbanUsage extends Component {
       </:api>
     </FreestyleUsage>
 
+    <FreestyleUsage @name='Kanban Column Config Sidebar'>
+      <:description>
+        <p>
+          <code>KanbanColumnConfigSidebar</code>
+          renders a panel where users can rename columns, change their color,
+          set a WIP limit (max cards), reorder them with up/down controls, and
+          toggle individual column visibility.
+        </p>
+        <p>
+          It mutates column objects directly via tracked properties, so the
+          caller only needs to supply a tracked columns array.
+        </p>
+      </:description>
+      <:example>
+        <div class='sidebar-demo'>
+          <div class='sidebar-demo-toolbar'>
+            <label class='kanban-toggle'>
+              <span class='kanban-toggle-label'>Show sidebar</span>
+              <Switch
+                @label='Toggle column config sidebar'
+                @isEnabled={{this.showSidebar}}
+                @onChange={{this.toggleSidebar}}
+              />
+            </label>
+          </div>
+          <div class='sidebar-demo-board'>
+            <KanbanPlane
+              @columns={{this.columns}}
+              @placements={{this.placements}}
+              @onChange={{this.handlePlacementsChange}}
+            >
+              <:card as |placement|>
+                {{#let (get this.cards placement.index) as |card|}}
+                  <CardContainer class='demo-card'>
+                    <div class='demo-card-kind'>{{card.kind}}</div>
+                    <h3>{{card.title}}</h3>
+                  </CardContainer>
+                {{/let}}
+              </:card>
+              <:ghost as |dragIndex|>
+                {{#let (get this.cards dragIndex) as |card|}}
+                  <CardContainer class='demo-card demo-card--ghost'>
+                    <div class='demo-card-kind'>{{card.kind}}</div>
+                    <h3>{{card.title}}</h3>
+                  </CardContainer>
+                {{/let}}
+              </:ghost>
+            </KanbanPlane>
+            {{#if this.showSidebar}}
+              <KanbanColumnConfigSidebar
+                @columns={{this.columns}}
+                @onClose={{this.toggleSidebar}}
+              />
+            {{/if}}
+          </div>
+        </div>
+      </:example>
+      <:api as |Args|>
+        <Args.Object
+          @name='columns'
+          @description='Array of KanbanColumnConfig objects to display and edit.'
+          @required={{true}}
+          @value={{this.columns}}
+        />
+        <Args.Action
+          @name='onClose'
+          @description='Optional callback invoked when the close button is clicked. If omitted the close button is hidden.'
+        />
+      </:api>
+    </FreestyleUsage>
+
     <style scoped>
       .kanban-usage {
         display: grid;
@@ -387,6 +470,26 @@ export default class KanbanUsage extends Component {
         text-transform: uppercase;
         color: var(--muted-foreground, var(--boxel-500));
       }
+      .sidebar-demo {
+        display: grid;
+        gap: var(--boxel-sp);
+      }
+      .sidebar-demo-toolbar {
+        display: flex;
+        align-items: center;
+        gap: var(--boxel-sp-sm);
+      }
+      .sidebar-demo-board {
+        display: flex;
+        height: 28rem;
+        border: 1px solid var(--border, var(--boxel-border-color));
+        border-radius: 0.75rem;
+        overflow: hidden;
+      }
+      .sidebar-demo-board .kanban-plane {
+        flex: 1;
+        min-width: 0;
+      }
     </style>
   </template>
 }
diff --git a/packages/boxel-ui/test-app/tests/integration/components/kanban-column-config-sidebar-test.gts b/packages/boxel-ui/test-app/tests/integration/components/kanban-column-config-sidebar-test.gts
new file mode 100644
index 00000000000..08344456625
--- /dev/null
+++ b/packages/boxel-ui/test-app/tests/integration/components/kanban-column-config-sidebar-test.gts
@@ -0,0 +1,356 @@
+import { module, test } from 'qunit';
+import {
+  click,
+  fillIn,
+  focus,
+  render,
+  triggerEvent,
+  typeIn,
+} from '@ember/test-helpers';
+import { setupRenderingTest } from 'test-app/tests/helpers';
+import { tracked } from '@glimmer/tracking';
+import {
+  KanbanColumnConfigSidebar,
+  type KanbanColumnConfig,
+} from '@cardstack/boxel-ui/components';
+
+// sortOrders are 0-indexed so boundary checks (=== 0, >= length - 1) work correctly.
+function makeColumns(): KanbanColumnConfig[] {
+  return [
+    {
+      key: 'backlog',
+      label: 'Backlog',
+      color: '#64748b',
+      wipLimit: 0,
+      collapsed: false,
+      sortOrder: 0,
+    },
+    {
+      key: 'in-progress',
+      label: 'In Progress',
+      color: '#d97706',
+      wipLimit: 2,
+      collapsed: false,
+      sortOrder: 1,
+    },
+    {
+      key: 'done',
+      label: 'Done',
+      color: '#15803d',
+      wipLimit: null,
+      collapsed: false,
+      sortOrder: 2,
+    },
+  ];
+}
+
+module(
+  'Integration | Component | kanban-column-config-sidebar',
+  function (hooks) {
+    setupRenderingTest(hooks);
+
+    test('renders one row per column with label and wip values', async function (assert) {
+      let columns = makeColumns();
+      await render(
+        <template><KanbanColumnConfigSidebar @columns={{columns}} /></template>,
+      );
+
+      assert.dom('[data-test-col-config-row]').exists({ count: 3 });
+      assert.dom('[data-test-col-config-label="backlog"]').hasValue('Backlog');
+      assert
+        .dom('[data-test-col-config-label="in-progress"]')
+        .hasValue('In Progress');
+      assert.dom('[data-test-col-config-label="done"]').hasValue('Done');
+      assert.dom('[data-test-col-config-wip="backlog"]').hasValue('0');
+      assert.dom('[data-test-col-config-wip="in-progress"]').hasValue('2');
+    });
+
+    test('close button is hidden without onClose; shown and functional with it', async function (assert) {
+      let closed = false;
+      const onClose = () => {
+        closed = true;
+      };
+      let columns = makeColumns();
+
+      await render(
+        <template><KanbanColumnConfigSidebar @columns={{columns}} /></template>,
+      );
+      assert.dom('.sidebar-close').doesNotExist('hidden when no onClose');
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{columns}}
+            @onClose={{onClose}}
+          />
+        </template>,
+      );
+      assert
+        .dom('[aria-label="Close column settings"]')
+        .exists('shown when onClose provided');
+      await click('[aria-label="Close column settings"]');
+      assert.true(closed, 'onClose invoked on click');
+    });
+
+    test('reorder buttons: disabled at boundaries; move-down and move-up swap correctly', async function (assert) {
+      let result: KanbanColumnConfig[] | undefined;
+      const onChange = (cols: KanbanColumnConfig[]) => {
+        result = cols;
+      };
+      let columns = makeColumns();
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{columns}}
+            @onColumnsChange={{onChange}}
+          />
+        </template>,
+      );
+
+      assert
+        .dom(
+          '[data-test-col-config-row="backlog"] [aria-label="Move column up"]',
+        )
+        .isDisabled('first row: up disabled');
+      assert
+        .dom(
+          '[data-test-col-config-row="backlog"] [aria-label="Move column down"]',
+        )
+        .isNotDisabled('first row: down enabled');
+      assert
+        .dom('[data-test-col-config-row="done"] [aria-label="Move column up"]')
+        .isNotDisabled('last row: up enabled');
+      assert
+        .dom(
+          '[data-test-col-config-row="done"] [aria-label="Move column down"]',
+        )
+        .isDisabled('last row: down disabled');
+
+      // Move backlog down — callback receives columns sorted by sortOrder.
+      await click(
+        '[data-test-col-config-row="backlog"] [aria-label="Move column down"]',
+      );
+      assert.strictEqual(
+        result![0]!.key,
+        'in-progress',
+        'move-down: in-progress is now first in sorted result',
+      );
+      assert.strictEqual(result![0]!.sortOrder, 0, 'in-progress sortOrder = 0');
+      assert.strictEqual(result![1]!.key, 'backlog', 'backlog is second');
+      assert.strictEqual(result![1]!.sortOrder, 1, 'backlog sortOrder = 1');
+      assert.strictEqual(result![2]!.key, 'done', 'done unchanged');
+      assert.strictEqual(result![2]!.sortOrder, 2, 'done sortOrder = 2');
+
+      // Move up on in-progress (currently sortOrder 0 after swap) — should be
+      // disabled since it's now first. Verify with a fresh set of columns.
+      let columns2 = makeColumns();
+      let result2: KanbanColumnConfig[] | undefined;
+      const onChange2 = (cols: KanbanColumnConfig[]) => {
+        result2 = cols;
+      };
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{columns2}}
+            @onColumnsChange={{onChange2}}
+          />
+        </template>,
+      );
+
+      await click(
+        '[data-test-col-config-row="in-progress"] [aria-label="Move column up"]',
+      );
+      assert.strictEqual(
+        result2![0]!.key,
+        'backlog',
+        'move-up on in-progress: backlog is now second in sorted result',
+      );
+      assert.strictEqual(result2![0]!.sortOrder, 0, 'backlog sortOrder = 0');
+      assert.strictEqual(result2![1]!.key, 'in-progress');
+      assert.strictEqual(result2![1]!.sortOrder, 1);
+    });
+
+    test('label input fires onColumnsChange with the updated label only', async function (assert) {
+      let result: KanbanColumnConfig[] | undefined;
+      const onChange = (cols: KanbanColumnConfig[]) => {
+        result = cols;
+      };
+      let columns = makeColumns();
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{columns}}
+            @onColumnsChange={{onChange}}
+          />
+        </template>,
+      );
+
+      await fillIn('[data-test-col-config-label="backlog"]', 'Queue');
+
+      assert.strictEqual(result![0]!.label, 'Queue');
+      assert.strictEqual(
+        result![1]!.label,
+        'In Progress',
+        'other cols unchanged',
+      );
+    });
+
+    test('WIP input: updates limit; clamps negative values to 0', async function (assert) {
+      let result: KanbanColumnConfig[] | undefined;
+      const onChange = (cols: KanbanColumnConfig[]) => {
+        result = cols;
+      };
+      let columns = makeColumns();
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{columns}}
+            @onColumnsChange={{onChange}}
+          />
+        </template>,
+      );
+
+      await fillIn('[data-test-col-config-wip="in-progress"]', '5');
+      assert.strictEqual(result![1]!.wipLimit, 5, 'valid value accepted');
+
+      await fillIn('[data-test-col-config-wip="backlog"]', '-3');
+      assert.strictEqual(result![0]!.wipLimit, 0, 'negative clamped to 0');
+    });
+
+    test('visibility toggle flips collapsed in both directions', async function (assert) {
+      let result: KanbanColumnConfig[] | undefined;
+      const onChange = (cols: KanbanColumnConfig[]) => {
+        result = cols;
+      };
+      let columns = makeColumns();
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{columns}}
+            @onColumnsChange={{onChange}}
+          />
+        </template>,
+      );
+
+      await click('[data-test-col-config-visible="backlog"]');
+      assert.true(result![0]!.collapsed, 'visible → hidden');
+      assert.false(result![1]!.collapsed, 'other columns unaffected');
+
+      let collapsedFirst = makeColumns().map((c, i) =>
+        i === 0 ? { ...c, collapsed: true } : c,
+      );
+      let result2: KanbanColumnConfig[] | undefined;
+      const onChange2 = (cols: KanbanColumnConfig[]) => {
+        result2 = cols;
+      };
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{collapsedFirst}}
+            @onColumnsChange={{onChange2}}
+          />
+        </template>,
+      );
+
+      await click('[data-test-col-config-visible="backlog"]');
+      assert.false(result2![0]!.collapsed, 'hidden → visible');
+    });
+
+    test('color change event fires onColumnsChange with the new color', async function (assert) {
+      let result: KanbanColumnConfig[] | undefined;
+      const onChange = (cols: KanbanColumnConfig[]) => {
+        result = cols;
+      };
+      let columns = makeColumns();
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{columns}}
+            @onColumnsChange={{onChange}}
+          />
+        </template>,
+      );
+
+      let input = document.querySelector(
+        '[data-test-col-config-color="backlog"]',
+      ) as HTMLInputElement;
+      input.value = '#ff0000';
+      await triggerEvent(input, 'change');
+
+      assert.strictEqual(result![0]!.color, '#ff0000');
+      assert.strictEqual(result![1]!.color, '#d97706', 'other cols unchanged');
+    });
+
+    test('re-renders when the columns arg is updated externally', async function (assert) {
+      class State {
+        @tracked cols = makeColumns();
+      }
+      const state = new State();
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar @columns={{state.cols}} />
+        </template>,
+      );
+
+      assert.dom('[data-test-col-config-label="backlog"]').hasValue('Backlog');
+
+      state.cols = [
+        { ...state.cols[0]!, label: 'Queue' },
+        ...state.cols.slice(1),
+      ];
+      await new Promise((r) => requestAnimationFrame(r));
+
+      assert.dom('[data-test-col-config-label="backlog"]').hasValue('Queue');
+    });
+
+    test('label input accumulates all typed characters without losing focus between keystrokes', async function (assert) {
+      let result: KanbanColumnConfig[] | undefined;
+      const onChange = (cols: KanbanColumnConfig[]) => {
+        result = cols;
+      };
+      let columns = makeColumns();
+
+      await render(
+        <template>
+          <KanbanColumnConfigSidebar
+            @columns={{columns}}
+            @onColumnsChange={{onChange}}
+          />
+        </template>,
+      );
+
+      let input = document.querySelector(
+        '[data-test-col-config-label="backlog"]',
+      ) as HTMLInputElement;
+
+      await focus(input);
+      assert.strictEqual(
+        document.activeElement,
+        input,
+        'input is focused before typing',
+      );
+
+      input.value = '';
+      await typeIn(input, 'New Label');
+
+      assert.strictEqual(
+        document.activeElement,
+        input,
+        'input retains focus after typing all characters',
+      );
+      assert.strictEqual(
+        result?.[0]?.label,
+        'New Label',
+        'full typed string is accumulated in the onChange result',
+      );
+    });
+  },
+);
diff --git a/packages/boxel-ui/test-app/tests/integration/components/kanban-plane-test.gts b/packages/boxel-ui/test-app/tests/integration/components/kanban-plane-test.gts
index df4b354fbe2..297ff8cd6ca 100644
--- a/packages/boxel-ui/test-app/tests/integration/components/kanban-plane-test.gts
+++ b/packages/boxel-ui/test-app/tests/integration/components/kanban-plane-test.gts
@@ -174,79 +174,4 @@ module('Integration | Component | kanban-plane', function (hooks) {
     assert.dom('[data-kanban-column]').exists({ count: 2 });
     assert.dom('[data-test-hidden-columns]').doesNotExist();
   });
-
-  test('restoring a collapsed empty column also clears the hideEmpty filter', async function (assert) {
-    class State {
-      @tracked hideEmpty = true;
-      @tracked columns: KanbanColumnConfig[] = [
-        {
-          key: 'todo',
-          label: 'Todo',
-          color: null,
-          wipLimit: null,
-          collapsed: true,
-          sortOrder: 0,
-        },
-        {
-          key: 'doing',
-          label: 'Doing',
-          color: null,
-          wipLimit: null,
-          collapsed: null,
-          sortOrder: 1,
-        },
-      ];
-      @tracked placements: KanbanPlacement[] = [
-        { index: 0, column: 1, sortOrder: 1 },
-      ];
-
-      toggleCollapsed = (
-        columnKey: string | null,
-        collapsed: boolean,
-      ): void => {
-        this.columns = this.columns.map((col) =>
-          col.key === columnKey ? { ...col, collapsed } : col,
-        );
-      };
-
-      showEmptyColumns = (): void => {
-        this.hideEmpty = false;
-      };
-    }
-
-    let state = new State();
-
-    await render(
-      <template>
-        <KanbanPlane
-          @columns={{state.columns}}
-          @placements={{state.placements}}
-          @hideEmpty={{state.hideEmpty}}
-          @onToggleCollapsed={{state.toggleCollapsed}}
-          @onShowEmptyColumns={{state.showEmptyColumns}}
-        >
-          <:card as |placement|>
-            <div data-test-card-content>Card {{placement.index}}</div>
-          </:card>
-          <:ghost as |index|>
-            <div data-test-ghost-content>Ghost {{index}}</div>
-          </:ghost>
-        </KanbanPlane>
-      </template>,
-    );
-
-    // Todo is collapsed and has no cards — hidden by both collapsed and hideEmpty
-    assert.dom('[data-kanban-column]').exists({ count: 1 });
-    assert.dom('[data-test-hidden-column-count]').hasText('1');
-    assert.dom('[aria-label="Show Todo"]').exists();
-
-    await click('[aria-label="Show Todo"]');
-
-    // Both collapsed=false and hideEmpty=false must have been applied —
-    // the Todo column should now be visible despite having no cards
-    assert.dom('[data-kanban-column]').exists({ count: 2 });
-    assert.dom('[data-kanban-column="0"]').exists();
-    assert.dom('[data-test-empty-column="0"]').hasText('No cards');
-    assert.dom('[data-test-hidden-columns]').doesNotExist();
-  });
 });
diff --git a/packages/software-factory/realm/issue-tracker.gts b/packages/software-factory/realm/issue-tracker.gts
index d30f678273c..254afda3415 100644
--- a/packages/software-factory/realm/issue-tracker.gts
+++ b/packages/software-factory/realm/issue-tracker.gts
@@ -22,17 +22,20 @@ import NumberField from 'https://cardstack.com/base/number';
 
 import {
   FieldContainer,
+  KanbanColumnConfigSidebar,
   KanbanPlane,
   ContextButton,
   Pill,
   Switch,
+  Tooltip,
   type KanbanColumnConfig,
   type KanbanPlacement,
 } from '@cardstack/boxel-ui/components';
-import { eq } from '@cardstack/boxel-ui/helpers';
+import { cn, eq } from '@cardstack/boxel-ui/helpers';
 
 import LayoutSidebarRightCollapse from '@cardstack/boxel-icons/layout-sidebar-right-collapse';
 import LayoutSidebarRightExpand from '@cardstack/boxel-icons/layout-sidebar-right-expand';
+import Settings from '@cardstack/boxel-icons/settings';
 import SquareKanban from '@cardstack/boxel-icons/square-kanban';
 
 import { realmURL, type ResolvedCodeRef } from '@cardstack/runtime-common';
@@ -1050,21 +1053,23 @@ export class Project extends CardDef {
 // ── IssueTrackerIsolated ──────────────────────────────────────────────
 
 class IssueTrackerIsolated extends Component<typeof IssueTracker> {
+  @tracked isSidebarOpen = false;
+
   get columns(): KanbanColumnConfig[] {
-    let persistedColumns = this.args.model?.columns ?? [];
-    return buildColumnsFromStatusOptions(
-      getProjectIssueStatusOptions(this.args.model?.project),
-    ).map((col) => {
-      let persisted = persistedColumns.find((stored) => stored.key === col.key);
-      return {
-        key: col.key ?? null,
-        label: col.label ?? null,
-        color: col.color ?? null,
-        collapsed: persisted?.collapsed ?? col.collapsed ?? null,
-        sortOrder: col.sortOrder ?? null,
-        wipLimit: col.wipLimit ?? null,
-      };
-    });
+    let stored = this.args.model.columns ?? [];
+    let source = stored.length
+      ? stored
+      : buildColumnsFromStatusOptions(
+          getProjectIssueStatusOptions(this.args.model?.project),
+        );
+    return source.map((col) => ({
+      key: col.key ?? '',
+      label: col.label ?? null,
+      color: col.color ?? null,
+      collapsed: col.collapsed ?? null,
+      sortOrder: col.sortOrder ?? null,
+      wipLimit: col.wipLimit ?? null,
+    }));
   }
 
   get statusColor(): string | undefined {
@@ -1078,48 +1083,86 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
     return this.args.model?.cards?.length ?? 0;
   }
 
+  get columnCardCounts(): number[] {
+    return this.columns.map(
+      (col) => this.placements.filter((p) => p.columnId === col.key).length,
+    );
+  }
+
+  revealEmptyColumns = (): void => {
+    this.args.model.hideEmptyColumns = false;
+    this.args.model.columns = this.columns.map((col, colIdx) =>
+      Object.assign(new KanbanColumnField(), {
+        key: col.key,
+        label: col.label,
+        color: col.color,
+        collapsed:
+          this.columnCardCounts[colIdx] === 0
+            ? false
+            : (col.collapsed ?? false),
+        sortOrder: col.sortOrder,
+        wipLimit: col.wipLimit,
+      }),
+    );
+  };
+
   toggleHideEmptyColumns = (): void => {
-    this.args.model.hideEmptyColumns = !this.args.model?.hideEmptyColumns;
+    if (this.args.model.hideEmptyColumns) {
+      this.revealEmptyColumns();
+      return;
+    }
+    this.args.model.hideEmptyColumns = true;
   };
 
-  handleToggleCollapsed = (
-    columnKey: string | null,
-    collapsed: boolean,
-  ): void => {
+  handleToggleCollapsed = (columnKey: string | null): void => {
     if (!columnKey) {
       return;
     }
 
-    let existingColumns = this.args.model.columns ?? [];
-    let existingIdx = existingColumns.findIndex(
-      (column) => column.key === columnKey,
-    );
+    let current = this.columns.find((col) => col.key === columnKey);
+    let willCollapse = !current?.collapsed;
 
-    if (existingIdx !== -1) {
-      this.args.model.columns = existingColumns.map((c, i) =>
-        i === existingIdx
-          ? Object.assign(new KanbanColumnField(), { ...c, collapsed })
-          : c,
-      );
-      return;
-    }
+    this.args.model.columns = this.columns.map((col) =>
+      Object.assign(new KanbanColumnField(), {
+        key: col.key,
+        label: col.label,
+        color: col.color,
+        collapsed:
+          col.key === columnKey ? willCollapse : (col.collapsed ?? false),
+        sortOrder: col.sortOrder,
+        wipLimit: col.wipLimit,
+      }),
+    );
+  };
 
-    let source = this.columns.find((column) => column.key === columnKey);
-    this.args.model.columns = [
-      ...existingColumns,
+  handleColumnsChange = (newColumns: KanbanColumnConfig[]): void => {
+    this.args.model.columns = newColumns.map((cfg) =>
       Object.assign(new KanbanColumnField(), {
-        key: source?.key ?? columnKey,
-        label: source?.label ?? null,
-        color: source?.color ?? null,
-        collapsed,
-        sortOrder: source?.sortOrder ?? null,
-        wipLimit: source?.wipLimit ?? null,
+        key: cfg.key,
+        label: cfg.label,
+        color: cfg.color,
+        collapsed: cfg.collapsed,
+        sortOrder: cfg.sortOrder,
+        wipLimit: cfg.wipLimit,
       }),
-    ];
+    );
+
+    let project = this.args.model.project;
+    if (project?.issueStatusOptions?.length) {
+      project.issueStatusOptions = project.issueStatusOptions.map((opt) => {
+        let col = newColumns.find((c) => c.key === opt.value);
+        if (!col) return opt;
+        return Object.assign(new IssueOptionField(), {
+          value: opt.value,
+          label: col.label ?? opt.label,
+          color: col.color ?? opt.color,
+        });
+      });
+    }
   };
 
-  handleShowEmptyColumns = (): void => {
-    this.args.model.hideEmptyColumns = false;
+  toggleSidebar = (): void => {
+    this.isSidebarOpen = !this.isSidebarOpen;
   };
 
   openCard = (index: number): void => {
@@ -1170,14 +1213,13 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
   handleChange = (newPlacements: KanbanPlacement[]) => {
     let cards = this.args.model?.cards ?? [];
     this.args.model.placements = newPlacements.map((p) => {
-      let columnKey = this.columns[p.column]?.key ?? '';
       let card = cards[p.index] as any;
-      if (card && card.status !== columnKey) {
-        card.status = columnKey;
+      if (card && card.status !== p.columnId) {
+        card.status = p.columnId;
       }
       return Object.assign(new KanbanBoardPlacement(), {
         itemId: card?.id ?? '',
-        columnKey,
+        columnKey: p.columnId,
         sortOrder: p.sortOrder,
       });
     });
@@ -1194,12 +1236,12 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
           if (cardIdx === -1) return null;
           let card = cards[cardIdx] as any;
           let effectiveKey = card?.status ?? p.columnKey;
-          let colIdx = this.columns.findIndex((c) => c.key === effectiveKey);
-          if (colIdx === -1)
-            colIdx = this.columns.findIndex((c) => c.key === p.columnKey);
-          if (colIdx === -1) return null;
+          let colKey =
+            this.columns.find((c) => c.key === effectiveKey)?.key ??
+            this.columns.find((c) => c.key === p.columnKey)?.key;
+          if (!colKey) return null;
           return {
-            column: colIdx,
+            columnId: colKey,
             index: cardIdx,
             sortOrder: p.sortOrder ?? 0,
           };
@@ -1213,9 +1255,11 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
         .filter(({ card }) => !placedCardIds.has((card as any).id))
         .map(({ card, idx }, i) => {
           let status = (card as any).status ?? 'backlog';
-          let colIdx = this.columns.findIndex((c) => c.key === status);
+          let colKey =
+            this.columns.find((c) => c.key === status)?.key ??
+            this.columns[0]?.key;
           return {
-            column: colIdx === -1 ? 0 : colIdx,
+            columnId: colKey ?? '',
             index: idx,
             sortOrder: maxOrder + 1 + i,
           };
@@ -1224,9 +1268,10 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
     }
     return cards.map((card, idx) => {
       let status = (card as any).status ?? 'backlog';
-      let colIdx = this.columns.findIndex((c) => c.key === status);
+      let colKey =
+        this.columns.find((c) => c.key === status)?.key ?? this.columns[0]?.key;
       return {
-        column: colIdx === -1 ? 0 : colIdx,
+        columnId: colKey ?? '',
         index: idx,
         sortOrder: idx,
       };
@@ -1269,41 +1314,72 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
               @label='Hide empty columns'
             />
           </div>
+          <Tooltip @placement='bottom'>
+            <:trigger>
+              <ContextButton
+                class='configure-btn'
+                @icon={{Settings}}
+                @label={{if
+                  this.isSidebarOpen
+                  'Close config sidebar'
+                  'Open config sidebar'
+                }}
+                @variant='highlight'
+                @isToggle={{true}}
+                @isActive={{this.isSidebarOpen}}
+                data-test-configure-columns-btn
+                {{on 'click' this.toggleSidebar}}
+              />
+            </:trigger>
+            <:content>{{if
+                this.isSidebarOpen
+                'Close config'
+                'Configure columns'
+              }}</:content>
+          </Tooltip>
         </div>
       </header>
-      <div class='kanban-area'>
-        <KanbanPlane
-          @columns={{this.columns}}
-          @placements={{this.placements}}
-          @hideEmpty={{@model.hideEmptyColumns}}
-          @onChange={{this.handleChange}}
-          @onOpen={{this.openCard}}
-          @onAddCard={{this.addCardTask.perform}}
-          @onToggleCollapsed={{this.handleToggleCollapsed}}
-          @onShowEmptyColumns={{this.handleShowEmptyColumns}}
-        >
-          <:card as |placement|>
-            {{#let (get @fields.cards placement.index) as |CardField|}}
-              {{#if CardField}}
-                <div
-                  class='card-wrap'
-                  data-test-issue-tracker-card={{placement.index}}
-                >
-                  <CardField @format='fitted' />
-                </div>
-              {{/if}}
-            {{/let}}
-          </:card>
-          <:ghost as |dragIdx|>
-            {{#let (get @fields.cards dragIdx) as |CardField|}}
-              {{#if CardField}}
-                <div class='card-wrap'>
-                  <CardField @format='fitted' />
-                </div>
-              {{/if}}
-            {{/let}}
-          </:ghost>
-        </KanbanPlane>
+      <div class='kanban-body'>
+        <div class='kanban-area'>
+          <KanbanPlane
+            @columns={{this.columns}}
+            @placements={{this.placements}}
+            @hideEmpty={{@model.hideEmptyColumns}}
+            @onChange={{this.handleChange}}
+            @onOpen={{this.openCard}}
+            @onAddCard={{this.addCardTask.perform}}
+            @onToggleCollapsed={{this.handleToggleCollapsed}}
+          >
+            <:card as |placement|>
+              {{#let (get @fields.cards placement.index) as |CardField|}}
+                {{#if CardField}}
+                  <div
+                    class='card-wrap'
+                    data-test-issue-tracker-card={{placement.index}}
+                  >
+                    <CardField @format='fitted' />
+                  </div>
+                {{/if}}
+              {{/let}}
+            </:card>
+            <:ghost as |dragIdx|>
+              {{#let (get @fields.cards dragIdx) as |CardField|}}
+                {{#if CardField}}
+                  <div class='card-wrap'>
+                    <CardField @format='fitted' />
+                  </div>
+                {{/if}}
+              {{/let}}
+            </:ghost>
+          </KanbanPlane>
+        </div>
+
+        <div class={{cn 'config-sidebar-wrap' is-open=this.isSidebarOpen}}>
+          <KanbanColumnConfigSidebar
+            @columns={{this.columns}}
+            @onColumnsChange={{this.handleColumnsChange}}
+          />
+        </div>
       </div>
     </div>
     <style scoped>
@@ -1323,9 +1399,15 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
         background-color: var(--board-bg);
         color: var(--board-fg);
       }
-      .kanban-area {
+      .kanban-body {
         flex: 1;
         min-height: 0;
+        display: flex;
+        overflow: hidden;
+      }
+      .kanban-area {
+        flex: 1;
+        min-width: 0;
         overflow: hidden;
       }
       .card-wrap {
@@ -1357,6 +1439,7 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
         display: flex;
         align-items: center;
         gap: 0.375rem;
+        color: var(--board-muted-fg);
       }
       .column-visibility-toggle {
         display: flex;
@@ -1396,6 +1479,15 @@ class IssueTrackerIsolated extends Component<typeof IssueTracker> {
         background: var(--board-muted-bg);
         border-radius: 4px;
       }
+      .config-sidebar-wrap {
+        flex-shrink: 0;
+        width: 0;
+        overflow: hidden;
+        transition: width var(--boxel-transition);
+      }
+      .config-sidebar-wrap.is-open {
+        width: 19rem;
+      }
     </style>
   </template>
 }
@@ -1413,8 +1505,6 @@ export class IssueTracker extends KanbanBoard {
     },
   });
 
-  @field columns = containsMany(KanbanColumnField);
-
   @field placements = containsMany(KanbanBoardPlacement);
 
   @field cardTitle = contains(StringField, {
@@ -1432,9 +1522,8 @@ export class IssueTracker extends KanbanBoard {
           <@fields.project />
         </FieldContainer>
         <p class='board-edit-note'>
-          Board columns are derived from the linked project&apos;s issue status
-          options, while board-specific UI state like collapsed columns is
-          stored on this tracker.
+          Board columns default to the linked project&apos;s issue status
+          options. Use the Configure button in the board view to customise them.
         </p>
         <FieldContainer @label='Hide Empty Columns' @vertical={{true}}>
           <@fields.hideEmptyColumns />
diff --git a/packages/software-factory/realm/issue-tracker.test.gts b/packages/software-factory/realm/issue-tracker.test.gts
index ef21473dc21..c177e0b56b1 100644
--- a/packages/software-factory/realm/issue-tracker.test.gts
+++ b/packages/software-factory/realm/issue-tracker.test.gts
@@ -3,6 +3,7 @@ import {
   click,
   fillIn,
   settled,
+  triggerEvent,
   triggerKeyEvent,
   waitFor,
 } from '@ember/test-helpers';
@@ -15,6 +16,7 @@ import {
   setupAcceptanceTestRealm,
   SYSTEM_CARD_FIXTURE_CONTENTS,
   visitOperatorMode,
+  type TestContextWithSave,
 } from '@cardstack/host/tests/helpers';
 import { setupMockMatrix } from '@cardstack/host/tests/helpers/mock-matrix';
 
@@ -157,7 +159,7 @@ export function runTests() {
           .doesNotExist('review column hidden');
       });
 
-      test('collapsing a column updates the persisted collapsed state', async function (assert) {
+      test<TestContextWithSave>('collapsing a column updates the persisted collapsed state', async function (assert) {
         let savedBoardDocPromise = new Promise<any>((resolve) => {
           this.onSave((url, doc) => {
             if (url.href === boardId) {
@@ -196,6 +198,333 @@ export function runTests() {
           'backlog collapsed state is persisted on the board model',
         );
       });
+
+      test<TestContextWithSave>('sidebar visibility toggle persists collapsed state and can reveal the column again', async function (assert) {
+        let savedBoardDocs: any[] = [];
+        this.onSave((url, doc) => {
+          if (url.href === boardId) {
+            savedBoardDocs.push(doc);
+          }
+        });
+
+        await visitOperatorMode({
+          stacks: [[{ id: boardId, format: 'isolated' }]],
+        });
+        await waitFor('[data-test-issue-id]');
+
+        await click('[data-test-configure-columns-btn]');
+        await click('[data-test-col-config-visible="0"]');
+        await waitFor('[aria-label="Show Backlog"]');
+
+        assert
+          .dom(`[data-kanban-column="${COL.backlog}"]`)
+          .doesNotExist(
+            'backlog column is hidden after collapsing from the sidebar',
+          );
+
+        let collapsedSave = savedBoardDocs[savedBoardDocs.length - 1];
+        let collapsedBacklog = collapsedSave.data.attributes.columns.find(
+          (column: { key: string }) => column.key === 'backlog',
+        );
+        assert.true(
+          collapsedBacklog?.collapsed,
+          'sidebar collapse persists backlog as collapsed',
+        );
+
+        await click('[data-test-col-config-visible="0"]');
+        await waitFor(`[data-kanban-column="${COL.backlog}"]`);
+
+        assert
+          .dom(`[data-kanban-column="${COL.backlog}"]`)
+          .exists(
+            'backlog column is shown again after revealing from the sidebar',
+          );
+
+        let revealedSave = savedBoardDocs[savedBoardDocs.length - 1];
+        let revealedBacklog = revealedSave.data.attributes.columns.find(
+          (column: { key: string }) => column.key === 'backlog',
+        );
+        assert.false(
+          revealedBacklog?.collapsed,
+          'sidebar reveal persists backlog as expanded',
+        );
+      });
+
+      test('turning hide empty off reveals empty columns even if they were hidden from the sidebar', async function (assert) {
+        await visitOperatorMode({
+          stacks: [[{ id: boardId, format: 'isolated' }]],
+        });
+        await waitFor('[data-test-issue-id]');
+
+        assert
+          .dom(`[data-kanban-column="${COL.blocked}"]`)
+          .exists('blocked starts visible while hide-empty is off');
+
+        await click('[data-test-configure-columns-btn]');
+        await click('[data-test-col-config-visible="2"]');
+        await waitFor('[aria-label="Show Blocked"]');
+
+        assert
+          .dom(`[data-kanban-column="${COL.blocked}"]`)
+          .doesNotExist('blocked is hidden after sidebar toggle');
+
+        await click('.column-visibility-toggle input[role="switch"]');
+        await click('.column-visibility-toggle input[role="switch"]');
+
+        assert
+          .dom(`[data-kanban-column="${COL.blocked}"]`)
+          .exists(
+            'blocked is visible again after hide-empty is turned back off',
+          );
+      });
+
+      test<TestContextWithSave>('turning hide-empty off saves hideEmptyColumns as false', async function (assert) {
+        let boardSaves: any[] = [];
+        this.onSave((url, doc) => {
+          if (url.href === boardId) {
+            boardSaves.push(doc);
+          }
+        });
+
+        await visitOperatorMode({
+          stacks: [[{ id: boardId, format: 'isolated' }]],
+        });
+        await waitFor('[data-test-issue-id]');
+
+        // Turn on hide-empty — blocked and review (empty) disappear
+        await click('.column-visibility-toggle input[role="switch"]');
+        await waitFor('[data-test-hidden-columns]');
+
+        assert
+          .dom('.column-visibility-toggle [data-test-switch-checked]')
+          .hasAttribute('data-test-switch-checked', 'on');
+
+        // Turn hide-empty back off
+        await click('.column-visibility-toggle input[role="switch"]');
+        await settled();
+
+        assert
+          .dom('.column-visibility-toggle [data-test-switch-checked]')
+          .hasAttribute('data-test-switch-checked', 'off', 'switch is off');
+        assert
+          .dom('[data-kanban-column]')
+          .exists({ count: 5 }, 'all columns visible again');
+        assert
+          .dom('[data-test-hidden-columns]')
+          .doesNotExist('hidden tray gone');
+
+        let lastSave = boardSaves[boardSaves.length - 1];
+        assert.false(
+          lastSave?.data.attributes.hideEmptyColumns,
+          'hideEmptyColumns persisted as false after turning off the filter',
+        );
+      });
+
+      test('collapsing one column from the header leaves all other columns visible', async function (assert) {
+        await visitOperatorMode({
+          stacks: [[{ id: boardId, format: 'isolated' }]],
+        });
+        await waitFor('[data-test-issue-id]');
+
+        assert.dom('[data-kanban-column]').exists({ count: 5 });
+
+        await click(
+          `[data-kanban-column="${COL.backlog}"] [data-test-column-collapse-button]`,
+        );
+        await waitFor('[aria-label="Show Backlog"]');
+
+        assert
+          .dom('[data-kanban-column]')
+          .exists({ count: 4 }, 'only the collapsed column is removed');
+        assert
+          .dom(`[data-kanban-column="${COL.backlog}"]`)
+          .doesNotExist('backlog is hidden');
+        assert
+          .dom(`[data-kanban-column="${COL.in_progress}"]`)
+          .exists('in_progress still visible');
+        assert
+          .dom(`[data-kanban-column="${COL.done}"]`)
+          .exists('done still visible');
+      });
+
+      test('can hide a column from the header and reveal it from the sidebar, and vice versa', async function (assert) {
+        await visitOperatorMode({
+          stacks: [[{ id: boardId, format: 'isolated' }]],
+        });
+        await waitFor('[data-test-issue-id]');
+
+        // Hide backlog from the column header
+        await click(
+          `[data-kanban-column="${COL.backlog}"] [data-test-column-collapse-button]`,
+        );
+        await waitFor('[aria-label="Show Backlog"]');
+        assert
+          .dom(`[data-kanban-column="${COL.backlog}"]`)
+          .doesNotExist('backlog hidden via column header');
+
+        // Reveal backlog from the sidebar toggle
+        await click('[data-test-configure-columns-btn]');
+        await click('[data-test-col-config-visible="0"]');
+        await waitFor(`[data-kanban-column="${COL.backlog}"]`);
+        assert
+          .dom(`[data-kanban-column="${COL.backlog}"]`)
+          .exists('backlog revealed via sidebar toggle');
+
+        // Hide in-progress from the sidebar toggle
+        await click('[data-test-col-config-visible="1"]');
+        await waitFor('[aria-label="Show In Progress"]');
+        assert
+          .dom(`[data-kanban-column="${COL.in_progress}"]`)
+          .doesNotExist('in-progress hidden via sidebar toggle');
+
+        // Reveal in-progress from the hidden-columns tray in the header
+        await click('[aria-label="Show In Progress"]');
+        await waitFor(`[data-kanban-column="${COL.in_progress}"]`);
+        assert
+          .dom(`[data-kanban-column="${COL.in_progress}"]`)
+          .exists('in-progress revealed via hidden-columns tray');
+        assert.dom('[data-test-hidden-columns]').doesNotExist('tray gone');
+      });
+
+      test('after hiding columns from both header and sidebar, hide-empty toggle is on; turning it off reveals only the empty-hidden columns', async function (assert) {
+        await visitOperatorMode({
+          stacks: [[{ id: boardId, format: 'isolated' }]],
+        });
+        await waitFor('[data-test-issue-id]');
+
+        // Turn on hide-empty — blocked (col 2) and review (col 3) are empty
+        await click('.column-visibility-toggle input[role="switch"]');
+        await waitFor('[data-test-hidden-columns]');
+
+        assert
+          .dom('.column-visibility-toggle [data-test-switch-checked]')
+          .hasAttribute('data-test-switch-checked', 'on', 'switch is on');
+        assert
+          .dom('[data-kanban-column]')
+          .exists({ count: 3 }, 'two empty columns hidden');
+
+        // Also collapse backlog from the column header
+        await click(
+          `[data-kanban-column="${COL.backlog}"] [data-test-column-collapse-button]`,
+        );
+        await waitFor('[data-test-hidden-column-count]');
+        assert
+          .dom('[data-test-hidden-column-count]')
+          .hasText('3', '3 columns hidden total');
+
+        // Also collapse in-progress from the sidebar
+        await click('[data-test-configure-columns-btn]');
+        await click('[data-test-col-config-visible="1"]');
+        await waitFor('[aria-label="Show In Progress"]');
+        assert
+          .dom('[data-test-hidden-column-count]')
+          .hasText('4', '4 columns hidden total');
+
+        // Switch must still appear ON
+        assert
+          .dom('.column-visibility-toggle [data-test-switch-checked]')
+          .hasAttribute('data-test-switch-checked', 'on', 'switch still on');
+
+        // Turn off hide-empty — reveals only the empty-hidden columns
+        await click('.column-visibility-toggle input[role="switch"]');
+        await settled();
+
+        assert
+          .dom('.column-visibility-toggle [data-test-switch-checked]')
+          .hasAttribute('data-test-switch-checked', 'off', 'switch now off');
+        assert
+          .dom(`[data-kanban-column="${COL.blocked}"]`)
+          .exists('blocked is visible again (was empty-hidden)');
+        assert
+          .dom(`[data-kanban-column="${COL.review}"]`)
+          .exists('review is visible again (was empty-hidden)');
+        assert
+          .dom(`[data-kanban-column="${COL.backlog}"]`)
+          .doesNotExist(
+            'backlog stays hidden (was manually collapsed, has cards)',
+          );
+        assert
+          .dom(`[data-kanban-column="${COL.in_progress}"]`)
+          .doesNotExist(
+            'in-progress stays hidden (was manually collapsed, has cards)',
+          );
+      });
+    });
+
+    // ── column config sync ────────────────────────────────────────────────────
+    module('column config sync', function (hooks) {
+      hooks.beforeEach(async function () {
+        await setupAcceptanceTestRealm({
+          realmURL: testRealmURL,
+          mockMatrixUtils,
+          contents: {
+            ...SYSTEM_CARD_FIXTURE_CONTENTS,
+            ...makeProject([
+              { value: 'todo', label: 'To Do' },
+              { value: 'doing', label: 'Doing' },
+              { value: 'done', label: 'Done' },
+            ]),
+            ...makeBoard(),
+          },
+        });
+      });
+
+      test<TestContextWithSave>('renaming a column in the sidebar updates the matching project issueStatusOption label, and recoloring updates its color', async function (assert) {
+        let resolveLabelSave: (doc: any) => void;
+        let labelSavePromise = new Promise<any>((r) => {
+          resolveLabelSave = r;
+        });
+        let resolveColorSave: (doc: any) => void;
+        let colorSavePromise = new Promise<any>((r) => {
+          resolveColorSave = r;
+        });
+        let labelSaveSeen = false;
+        this.onSave((url, doc) => {
+          if (url.href !== projectId) return;
+          if (!labelSaveSeen) {
+            labelSaveSeen = true;
+            resolveLabelSave!(doc);
+          } else {
+            resolveColorSave!(doc);
+          }
+        });
+
+        await visitOperatorMode({
+          stacks: [[{ id: boardId, format: 'isolated' }]],
+        });
+        await waitFor('[data-kanban-column]');
+
+        // Open sidebar and rename "To Do" → "Planning"
+        await click('[data-test-configure-columns-btn]');
+        await fillIn('[data-test-col-config-label="0"]', 'Planning');
+
+        let labelSaveDoc = await labelSavePromise;
+        let updatedOptions = labelSaveDoc.data.attributes.issueStatusOptions;
+        assert.strictEqual(
+          updatedOptions[0].label,
+          'Planning',
+          'project issueStatusOption label updated to match sidebar rename',
+        );
+        assert.strictEqual(
+          updatedOptions[1].label,
+          'Doing',
+          'other project options unchanged',
+        );
+
+        // Recolor the first column and verify the project option color syncs
+        let colorInput = document.querySelector(
+          '[data-test-col-config-color="0"]',
+        ) as HTMLInputElement;
+        colorInput.value = '#ff0000';
+        await triggerEvent(colorInput, 'change');
+
+        let colorSaveDoc = await colorSavePromise;
+        assert.strictEqual(
+          colorSaveDoc.data.attributes.issueStatusOptions[0].color,
+          '#ff0000',
+          'project issueStatusOption color updated to match sidebar recolor',
+        );
+      });
     });
 
     // ── unknown status ────────────────────────────────────────────────────────
diff --git a/packages/software-factory/realm/kanban-board.gts b/packages/software-factory/realm/kanban-board.gts
index 5187adfbe4a..853909bc822 100644
--- a/packages/software-factory/realm/kanban-board.gts
+++ b/packages/software-factory/realm/kanban-board.gts
@@ -1,4 +1,6 @@
 import { get } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
 
 import {
   CardDef,
@@ -12,138 +14,186 @@ import {
 } from 'https://cardstack.com/base/card-api';
 import BooleanField from 'https://cardstack.com/base/boolean';
 
-import { KanbanPlane, Switch } from '@cardstack/boxel-ui/components';
+import {
+  KanbanColumnConfigSidebar,
+  KanbanPlane,
+  Switch,
+} from '@cardstack/boxel-ui/components';
 import type {
   KanbanColumnConfig,
   KanbanPlacement,
 } from '@cardstack/boxel-ui/components';
 import { eq } from '@cardstack/boxel-ui/helpers';
 
+import SlidersHorizontal from '@cardstack/boxel-icons/sliders-horizontal';
 import SquareKanban from '@cardstack/boxel-icons/square-kanban';
 
 import { KanbanColumnField } from './kanban-column';
 import { KanbanBoardPlacement } from './kanban-board-placement';
 
-export class KanbanBoard extends CardDef {
-  static displayName = 'Kanban Board';
-  static prefersWideFormat = true;
+class KanbanBoardIsolated extends Component<typeof KanbanBoard> {
+  @tracked isSidebarOpen = false;
 
-  @field boardKey = contains(StringField);
-  @field boardTitle = contains(StringField);
-  @field cards = linksToMany(CardDef);
-  @field hideEmptyColumns = contains(BooleanField);
-  @field columns = containsMany(KanbanColumnField);
-  @field placements = containsMany(KanbanBoardPlacement);
+  get columns(): KanbanColumnConfig[] {
+    return (this.args.model.columns ?? []).map((col) => ({
+      key: col.key ?? '',
+      label: col.label ?? null,
+      color: col.color ?? null,
+      collapsed: col.collapsed ?? null,
+      sortOrder: col.sortOrder ?? null,
+      wipLimit: col.wipLimit ?? null,
+    }));
+  }
 
-  @field cardTitle = contains(StringField, {
-    computeVia: function (this: KanbanBoard) {
-      return this.cardInfo.name?.trim()?.length
-        ? this.cardInfo.name
-        : (this.boardTitle ?? 'Kanban Board');
-    },
-  });
+  get placements(): KanbanPlacement[] {
+    let cards = this.args.model.cards ?? [];
+    let raw = this.args.model.placements ?? [];
 
-  static isolated: BaseDefComponent = class Isolated extends Component<
-    typeof KanbanBoard
-  > {
-    get columns(): KanbanColumnConfig[] {
-      return (this.args.model.columns ?? []).map((col) => ({
-        key: col.key ?? null,
-        label: col.label ?? null,
-        color: col.color ?? null,
-        collapsed: col.collapsed ?? null,
-        sortOrder: col.sortOrder ?? null,
-        wipLimit: col.wipLimit ?? null,
-      }));
-    }
+    return raw
+      .map((p) => {
+        let col = this.columns.find((c) => c.key === p.columnKey);
+        let cardIdx = cards.findIndex((c) => (c as any).id === p.itemId);
+        if (!col || !col.key || cardIdx === -1) return null;
+        return {
+          columnId: col.key,
+          index: cardIdx,
+          sortOrder: p.sortOrder ?? 0,
+        } satisfies KanbanPlacement;
+      })
+      .filter((p): p is KanbanPlacement => p !== null);
+  }
 
-    get placements(): KanbanPlacement[] {
-      let cards = this.args.model.cards ?? [];
-      let raw = this.args.model.placements ?? [];
+  get cardCount(): number {
+    return this.args.model?.cards?.length ?? 0;
+  }
 
-      return raw
-        .map((p) => {
-          let colIdx = this.columns.findIndex((c) => c.key === p.columnKey);
-          let cardIdx = cards.findIndex((c) => (c as any).id === p.itemId);
-          if (colIdx === -1 || cardIdx === -1) return null;
-          return {
-            column: colIdx,
-            index: cardIdx,
-            sortOrder: p.sortOrder ?? 0,
-          } satisfies KanbanPlacement;
-        })
-        .filter((p): p is KanbanPlacement => p !== null);
-    }
+  get columnCardCounts(): number[] {
+    return this.columns.map(
+      (col) => this.placements.filter((p) => p.columnId === col.key).length,
+    );
+  }
+
+  revealEmptyColumns = (): void => {
+    this.args.model.hideEmptyColumns = false;
+    this.args.model.columns = this.columns.map((col, colIdx) =>
+      Object.assign(new KanbanColumnField(), {
+        key: col.key,
+        label: col.label,
+        color: col.color,
+        collapsed:
+          this.columnCardCounts[colIdx] === 0
+            ? false
+            : (col.collapsed ?? false),
+        sortOrder: col.sortOrder,
+        wipLimit: col.wipLimit,
+      }),
+    );
+  };
+
+  handleChange = (newPlacements: KanbanPlacement[]) => {
+    let cards = this.args.model.cards ?? [];
+    this.args.model.placements = newPlacements.map((p) =>
+      Object.assign(new KanbanBoardPlacement(), {
+        itemId: (cards[p.index] as any)?.id ?? '',
+        columnKey: p.columnId,
+        sortOrder: p.sortOrder,
+      }),
+    );
+  };
 
-    get cardCount(): number {
-      return this.args.model?.cards?.length ?? 0;
+  handleColumnsChange = (newColumns: KanbanColumnConfig[]): void => {
+    this.args.model.columns = newColumns.map((cfg) =>
+      Object.assign(new KanbanColumnField(), {
+        key: cfg.key,
+        label: cfg.label,
+        color: cfg.color,
+        collapsed: cfg.collapsed,
+        sortOrder: cfg.sortOrder,
+        wipLimit: cfg.wipLimit,
+      }),
+    );
+  };
+
+  toggleHideEmptyColumns = (): void => {
+    if (this.args.model.hideEmptyColumns) {
+      this.revealEmptyColumns();
+      return;
     }
+    this.args.model.hideEmptyColumns = true;
+  };
 
-    handleChange = (newPlacements: KanbanPlacement[]) => {
-      let cards = this.args.model.cards ?? [];
-      this.args.model.placements = newPlacements.map((p) =>
-        Object.assign(new KanbanBoardPlacement(), {
-          itemId: (cards[p.index] as any)?.id ?? '',
-          columnKey: this.columns[p.column]?.key ?? '',
-          sortOrder: p.sortOrder,
-        }),
-      );
-    };
+  toggleSidebar = (): void => {
+    this.isSidebarOpen = !this.isSidebarOpen;
+  };
 
-    toggleHideEmptyColumns = (): void => {
-      this.args.model.hideEmptyColumns = !this.args.model?.hideEmptyColumns;
-    };
+  handleToggleCollapsed = (columnKey: string | null): void => {
+    if (!columnKey) {
+      return;
+    }
 
-    handleToggleCollapsed = (
-      columnKey: string | null,
-      collapsed: boolean,
-    ): void => {
-      let columns = this.args.model.columns ?? [];
-      let idx = columns.findIndex((c) => c.key === columnKey);
-      if (idx === -1) return;
-      this.args.model.columns = columns.map((c, i) =>
-        i === idx
-          ? Object.assign(new KanbanColumnField(), { ...c, collapsed })
-          : c,
-      );
-    };
+    let current = this.columns.find((col) => col.key === columnKey);
+    let willCollapse = !current?.collapsed;
 
-    handleShowEmptyColumns = (): void => {
-      this.args.model.hideEmptyColumns = false;
-    };
+    this.args.model.columns = this.columns.map((col) =>
+      Object.assign(new KanbanColumnField(), {
+        key: col.key,
+        label: col.label,
+        color: col.color,
+        collapsed:
+          col.key === columnKey ? willCollapse : (col.collapsed ?? false),
+        sortOrder: col.sortOrder,
+        wipLimit: col.wipLimit,
+      }),
+    );
+  };
 
-    <template>
-      <div class='kanban-board-isolated'>
-        <header class='kanban-board-header'>
-          <div class='toolbar-left'>
-            <div class='kanban-heading'>
-              <h1 class='kanban-title'>
-                <SquareKanban />
-                <@fields.cardTitle />
-              </h1>
-            </div>
-            <div>
-              <span class='kanban-card-count'>
-                {{#if (eq this.cardCount 1)}}
-                  1 card
-                {{else}}
-                  {{this.cardCount}}
-                  cards
-                {{/if}}
-              </span>
-            </div>
+  closeSidebar = (): void => {
+    this.isSidebarOpen = false;
+  };
+
+  <template>
+    <div class='kanban-board-isolated'>
+      <header class='kanban-board-header'>
+        <div class='toolbar-left'>
+          <div class='kanban-heading'>
+            <h1 class='kanban-title'>
+              <SquareKanban />
+              <@fields.cardTitle />
+            </h1>
           </div>
-          <div class='toolbar-right'>
-            <div class='kanban-column-visibility-toggle'>
-              <span class='kanban-header-label'>Hide empty</span>
-              <Switch
-                @isEnabled={{@model.hideEmptyColumns}}
-                @onChange={{this.toggleHideEmptyColumns}}
-                @label='Hide empty columns'
-              />
-            </div>
+          <div>
+            <span class='kanban-card-count'>
+              {{#if (eq this.cardCount 1)}}
+                1 card
+              {{else}}
+                {{this.cardCount}}
+                cards
+              {{/if}}
+            </span>
+          </div>
+        </div>
+        <div class='toolbar-right'>
+          <div class='kanban-column-visibility-toggle'>
+            <span class='kanban-header-label'>Hide empty</span>
+            <Switch
+              @isEnabled={{@model.hideEmptyColumns}}
+              @onChange={{this.toggleHideEmptyColumns}}
+              @label='Hide empty columns'
+            />
           </div>
-        </header>
+          <button
+            type='button'
+            class='kanban-configure-btn'
+            aria-pressed={{this.isSidebarOpen}}
+            {{on 'click' this.toggleSidebar}}
+            data-test-configure-columns-btn
+          >
+            <SlidersHorizontal width='14' height='14' />
+            Configure
+          </button>
+        </div>
+      </header>
+      <div class='kanban-body'>
         <div class='kanban-area'>
           {{#if this.columns.length}}
             <KanbanPlane
@@ -152,7 +202,6 @@ export class KanbanBoard extends CardDef {
               @hideEmpty={{@model.hideEmptyColumns}}
               @onChange={{this.handleChange}}
               @onToggleCollapsed={{this.handleToggleCollapsed}}
-              @onShowEmptyColumns={{this.handleShowEmptyColumns}}
             >
               <:card as |placement|>
                 {{#let (get @fields.cards placement.index) as |CardField|}}
@@ -185,134 +234,187 @@ export class KanbanBoard extends CardDef {
             </div>
           {{/if}}
         </div>
+
+        {{#if this.isSidebarOpen}}
+          <KanbanColumnConfigSidebar
+            @columns={{this.columns}}
+            @onColumnsChange={{this.handleColumnsChange}}
+            @onClose={{this.closeSidebar}}
+          />
+        {{/if}}
       </div>
-      <style scoped>
-        .kanban-board-isolated {
-          --board-bg: var(--background, var(--boxel-200));
-          --board-fg: var(--foreground, var(--boxel-700));
-          --board-card-bg: var(--card, var(--boxel-light));
-          --board-card-fg: var(--foreground, var(--boxel-dark));
-          --board-muted-bg: var(--muted, var(--boxel-100));
-          --board-muted-fg: var(--muted-foreground, var(--boxel-500));
-          --board-border: var(--border, var(--boxel-border-color));
+    </div>
+    <style scoped>
+      .kanban-board-isolated {
+        --board-bg: var(--background, var(--boxel-200));
+        --board-fg: var(--foreground, var(--boxel-700));
+        --board-card-bg: var(--card, var(--boxel-light));
+        --board-card-fg: var(--foreground, var(--boxel-dark));
+        --board-muted-bg: var(--muted, var(--boxel-100));
+        --board-muted-fg: var(--muted-foreground, var(--boxel-500));
+        --board-border: var(--border, var(--boxel-border-color));
 
-          height: 100%;
-          overflow-y: auto;
-          display: flex;
-          flex-direction: column;
-          background-color: var(--board-bg);
-          color: var(--board-fg);
-        }
-        .kanban-board-header {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0.625rem 1rem;
-          border-bottom: 1px solid var(--board-border);
-          background: var(--board-card-bg);
-          color: var(--board-card-fg);
-          flex-shrink: 0;
-        }
-        .kanban-toolbar {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          padding: 0.625rem 1rem;
-          border-bottom: 1px solid var(--board-border);
-          background: var(--board-card-bg);
-          color: var(--board-card-fg);
-          flex-shrink: 0;
-        }
-        .toolbar-left {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-        }
-        .toolbar-right {
-          display: flex;
-          align-items: center;
-          gap: 0.375rem;
-        }
-        .kanban-heading {
-          display: flex;
-          flex-direction: column;
-          gap: 0.25rem;
-        }
-        .kanban-title {
-          display: flex;
-          align-items: center;
-          gap: 0.375rem;
-          font-size: var(--boxel-font-size);
-          font-weight: 600;
-          margin: 0;
-          letter-spacing: -0.01em;
-        }
-        .kanban-card-count {
-          font-size: 0.75rem;
-          color: var(--board-muted-fg);
-          padding: 0.125rem 0.5rem;
-          background: var(--board-muted-bg);
-          border-radius: 4px;
-        }
-        .kanban-header-label {
-          font-size: 0.75rem;
-          color: var(--board-muted-fg);
-          white-space: nowrap;
-        }
-        .kanban-column-visibility-toggle {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-        }
-        .kanban-area {
-          flex: 1;
-          min-height: 0;
-          overflow: hidden;
-        }
-        .kanban-card-wrap {
-          width: 100%;
-          height: 100%;
-          overflow: hidden;
-          border-radius: inherit;
-        }
-        .kanban-empty-state {
-          height: 100%;
-          display: grid;
-          place-items: center;
-          padding: 2rem;
-        }
-        .kanban-empty-copy {
-          max-width: 24rem;
-          text-align: center;
-          display: grid;
-          gap: 0.5rem;
-          padding: 1.5rem;
-          border: 1px solid var(--board-border);
-          border-radius: 0.75rem;
-          background: var(--board-card-bg);
-          color: var(--board-card-fg);
-          box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
-        }
-        .kanban-empty-copy h2,
-        .kanban-empty-copy p {
-          margin: 0;
-        }
-        .kanban-empty-copy h2 {
-          font-size: 1rem;
-          font-weight: 600;
-        }
-        .kanban-empty-copy p {
-          font-size: 0.875rem;
-          line-height: 1.5;
-          color: var(--board-muted-fg);
-        }
-        .kanban-empty-state :deep(svg) {
-          width: 1.5rem;
-          height: 1.5rem;
-          margin: 0 auto 0.25rem;
-          color: var(--board-muted-fg);
-        }
-      </style>
-    </template>
-  };
+        height: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        background-color: var(--board-bg);
+        color: var(--board-fg);
+      }
+      .kanban-board-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 0.625rem 1rem;
+        border-bottom: 1px solid var(--board-border);
+        background: var(--board-card-bg);
+        color: var(--board-card-fg);
+        flex-shrink: 0;
+      }
+      .toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .toolbar-right {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .kanban-heading {
+        display: flex;
+        flex-direction: column;
+        gap: 0.25rem;
+      }
+      .kanban-title {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        font-size: var(--boxel-font-size);
+        font-weight: 600;
+        margin: 0;
+        letter-spacing: -0.01em;
+      }
+      .kanban-card-count {
+        font-size: 0.75rem;
+        color: var(--board-muted-fg);
+        padding: 0.125rem 0.5rem;
+        background: var(--board-muted-bg);
+        border-radius: 4px;
+      }
+      .kanban-header-label {
+        font-size: 0.75rem;
+        color: var(--board-muted-fg);
+        white-space: nowrap;
+      }
+      .kanban-column-visibility-toggle {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+      }
+      .kanban-configure-btn {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.3125rem 0.625rem;
+        font-size: 0.75rem;
+        font-weight: 500;
+        font-family: inherit;
+        border: 1px solid var(--board-border);
+        border-radius: var(--radius, var(--boxel-border-radius-sm));
+        background: transparent;
+        color: var(--board-card-fg);
+        cursor: pointer;
+        transition: background-color 100ms ease;
+      }
+      .kanban-configure-btn:hover {
+        background: var(--board-muted-bg);
+      }
+      .kanban-configure-btn[aria-pressed='true'] {
+        background: var(--board-muted-bg);
+        border-color: color-mix(
+          in oklch,
+          var(--primary, var(--boxel-highlight)) 60%,
+          transparent
+        );
+        color: var(--primary, var(--boxel-highlight));
+      }
+      .kanban-body {
+        flex: 1;
+        min-height: 0;
+        display: flex;
+        overflow: hidden;
+      }
+      .kanban-area {
+        flex: 1;
+        min-width: 0;
+        overflow: hidden;
+      }
+      .kanban-card-wrap {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: inherit;
+      }
+      .kanban-empty-state {
+        height: 100%;
+        display: grid;
+        place-items: center;
+        padding: 2rem;
+      }
+      .kanban-empty-copy {
+        max-width: 24rem;
+        text-align: center;
+        display: grid;
+        gap: 0.5rem;
+        padding: 1.5rem;
+        border: 1px solid var(--board-border);
+        border-radius: 0.75rem;
+        background: var(--board-card-bg);
+        color: var(--board-card-fg);
+        box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
+      }
+      .kanban-empty-copy h2,
+      .kanban-empty-copy p {
+        margin: 0;
+      }
+      .kanban-empty-copy h2 {
+        font-size: 1rem;
+        font-weight: 600;
+      }
+      .kanban-empty-copy p {
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: var(--board-muted-fg);
+      }
+      .kanban-empty-state :deep(svg) {
+        width: 1.5rem;
+        height: 1.5rem;
+        margin: 0 auto 0.25rem;
+        color: var(--board-muted-fg);
+      }
+    </style>
+  </template>
+}
+
+export class KanbanBoard extends CardDef {
+  static displayName = 'Kanban Board';
+  static prefersWideFormat = true;
+
+  @field boardKey = contains(StringField);
+  @field boardTitle = contains(StringField);
+  @field cards = linksToMany(CardDef);
+  @field hideEmptyColumns = contains(BooleanField);
+  @field columns = containsMany(KanbanColumnField);
+  @field placements = containsMany(KanbanBoardPlacement);
+
+  @field cardTitle = contains(StringField, {
+    computeVia: function (this: KanbanBoard) {
+      return this.cardInfo.name?.trim()?.length
+        ? this.cardInfo.name
+        : (this.boardTitle ?? 'Kanban Board');
+    },
+  });
+
+  static isolated: BaseDefComponent = KanbanBoardIsolated;
 }