> ## Documentation Index
> Fetch the complete documentation index at: https://docs.janet.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Custom Columns

> Customize your Kanban board's columns to match your team's workflow

<div className="img-showcase">
  <div className="col-mock">
    <div className="col-mock-header">
      <div className="col-mock-tabs">
        <span className="col-mock-tab col-mock-tab-active">Columns</span>
        <span className="col-mock-tab col-mock-tab-inactive">Suggested</span>
      </div>

      <span className="col-mock-add-btn">
        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
          <path d="M12 5L12 19" />

          <path d="M5 12L19 12" />
        </svg>

        Add
      </span>
    </div>

    <div className="col-mock-body">
      <div className="col-mock-list">
        <div className="col-mock-rows">
          {/* Row 1: Backlog — dashed circle, #71717a */}

          <div className="col-mock-row">
            <span className="col-mock-drag">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                <rect x="2.5" y="1.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="1.5" width="3" height="3" rx="1.5" />

                <rect x="2.5" y="5.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="5.5" width="3" height="3" rx="1.5" />

                <rect x="2.5" y="9.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="9.5" width="3" height="3" rx="1.5" />
              </svg>
            </span>

            <span className="col-mock-icon-btn">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M12.5 7A5.5 5.5 0 1 1 1.5 7A5.5 5.5 0 0 1 12.5 7Z" stroke="#71717a" strokeWidth="1" strokeDasharray="2.2 2.2" strokeLinecap="round" />
              </svg>
            </span>

            <span className="col-mock-input">Backlog</span>

            <span className="col-mock-label">
              <input type="checkbox" disabled style={{accentColor: '#2563eb'}} /> Resolved
            </span>

            <span className="col-mock-label">
              <input type="checkbox" checked disabled style={{accentColor: '#8b5cf6'}} /> Default
            </span>

            <span className="col-mock-delete">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M18 6L6 18" />

                <path d="M6 6L18 18" />
              </svg>
            </span>
          </div>

          {/* Drag indicator line — shown between rows 1 and 2 */}

          <div className="col-mock-drag-line" />

          {/* Row 2: In Progress — half-circle, #2563eb */}

          <div className="col-mock-row">
            <span className="col-mock-drag">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                <rect x="2.5" y="1.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="1.5" width="3" height="3" rx="1.5" />

                <rect x="2.5" y="5.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="5.5" width="3" height="3" rx="1.5" />

                <rect x="2.5" y="9.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="9.5" width="3" height="3" rx="1.5" />
              </svg>
            </span>

            <span className="col-mock-icon-btn">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M12.5 7A5.5 5.5 0 1 1 1.5 7A5.5 5.5 0 0 1 12.5 7Z" stroke="#2563eb" strokeWidth="1" />

                <path d="M7 1.5A5.5 5.5 0 0 1 12.5 7 5.5 5.5 0 0 1 7 12.5V1.5Z" fill="#2563eb" fillOpacity="0.45" />
              </svg>
            </span>

            <span className="col-mock-input">In Progress</span>

            <span className="col-mock-label">
              <input type="checkbox" disabled style={{accentColor: '#2563eb'}} /> Resolved
            </span>

            <span className="col-mock-label">
              <input type="checkbox" disabled style={{accentColor: '#8b5cf6'}} /> Default
            </span>

            <span className="col-mock-delete">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M18 6L6 18" />

                <path d="M6 6L18 18" />
              </svg>
            </span>
          </div>

          {/* Row 3: In Review — three-quarter circle, #d97706 */}

          <div className="col-mock-row">
            <span className="col-mock-drag">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                <rect x="2.5" y="1.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="1.5" width="3" height="3" rx="1.5" />

                <rect x="2.5" y="5.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="5.5" width="3" height="3" rx="1.5" />

                <rect x="2.5" y="9.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="9.5" width="3" height="3" rx="1.5" />
              </svg>
            </span>

            <span className="col-mock-icon-btn">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M12.5 7A5.5 5.5 0 1 1 1.5 7A5.5 5.5 0 0 1 12.5 7Z" stroke="#d97706" strokeWidth="1" />

                <path d="M7 1.5A5.5 5.5 0 0 1 12.5 7 5.5 5.5 0 0 1 7 12.5 5.5 5.5 0 0 1 1.5 7H7V1.5Z" fill="#d97706" fillOpacity="0.45" />
              </svg>
            </span>

            <span className="col-mock-input">In Review</span>

            <span className="col-mock-label">
              <input type="checkbox" disabled style={{accentColor: '#2563eb'}} /> Resolved
            </span>

            <span className="col-mock-label">
              <input type="checkbox" disabled style={{accentColor: '#8b5cf6'}} /> Default
            </span>

            <span className="col-mock-delete">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M18 6L6 18" />

                <path d="M6 6L18 18" />
              </svg>
            </span>
          </div>

          {/* Row 4: Done — check circle, #16a34a, resolved checked */}

          <div className="col-mock-row">
            <span className="col-mock-drag">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="currentColor">
                <rect x="2.5" y="1.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="1.5" width="3" height="3" rx="1.5" />

                <rect x="2.5" y="5.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="5.5" width="3" height="3" rx="1.5" />

                <rect x="2.5" y="9.5" width="3" height="3" rx="1.5" />

                <rect x="8.5" y="9.5" width="3" height="3" rx="1.5" />
              </svg>
            </span>

            <span className="col-mock-icon-btn">
              <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M13 7A6 6 0 1 1 1 7A6 6 0 0 1 13 7Z" fill="#16a34a" />

                <path d="M4.5 7L6.2 8.7L9.5 5.3" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </span>

            <span className="col-mock-input">Done</span>

            <span className="col-mock-label">
              <input type="checkbox" checked disabled style={{accentColor: '#2563eb'}} /> Resolved
            </span>

            <span className="col-mock-label">
              <input type="checkbox" disabled style={{accentColor: '#8b5cf6'}} /> Default
            </span>

            <span className="col-mock-delete">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <path d="M18 6L6 18" />

                <path d="M6 6L18 18" />
              </svg>
            </span>
          </div>
        </div>
      </div>
    </div>

    <div className="col-mock-footer">
      <span className="col-mock-save-btn">Save</span>
      <span className="col-mock-reset-btn">Reset</span>
    </div>
  </div>
</div>

## How it works

Add, rename, reorder, or delete status columns. Drag columns to match your workflow. Mark any column as **Resolved** to indicate completed work (for Janet project processing), or set a **Default** column where new tickets land.

## Set-up

Click the **Gear** icon in the header of your **Project Board** to access **Project Settings**, select the **Configure** tab.

<div className="img-showcase">
  <div className="psm-mock">
    <div className="psm-mock-inner">
      <div className="psm-mock-sidebar">
        <div className="psm-mock-sidebar-title">PROJECT SETTINGS</div>

        <div className="psm-mock-nav">
          <div className="psm-mock-nav-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />

              <path d="M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />

              <path d="M23 21v-2a4 4 0 0 0-3-3.87" />

              <path d="M16 3.13a4 4 0 0 1 0 7.75" />
            </svg>

            Members
          </div>

          <div className="psm-mock-nav-btn psm-mock-nav-active">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" />

              <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
            </svg>

            Configure

            <svg className="psm-mock-chevron" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
              <path d="M9 6l6 6-6 6" />
            </svg>
          </div>

          <div className="psm-mock-subtabs">
            <div className="psm-mock-subtab psm-mock-subtab-active">Kanban Columns</div>
            <div className="psm-mock-subtab">Resolved Filter</div>
            <div className="psm-mock-subtab">Ticket Style</div>
            <div className="psm-mock-subtab">Auto-Tagging</div>
            <div className="psm-mock-subtab">Ticket Rubric</div>
            <div className="psm-mock-subtab">Recurring Actions</div>
          </div>

          <div className="psm-mock-nav-btn">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />

              <path d="M12 9v4" />

              <path d="M12 17h.01" />
            </svg>

            Danger Zone
          </div>
        </div>
      </div>

      <div className="psm-mock-content">
        <div className="psm-mock-hero">
          <div className="psm-mock-hero-icon">A</div>

          <div className="psm-mock-hero-text">
            <span className="psm-mock-hero-name-row">
              <span className="psm-mock-hero-name">Acme <span className="psm-mock-hero-name-extra">Project</span></span>
              <code className="psm-mock-hero-badge">ACME</code>
            </span>

            <div className="psm-mock-hero-meta">
              <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />

                <path d="M16 2v4M8 2v4M3 10h18" />
              </svg>

              <span><span className="psm-mock-hero-meta-prefix">Created </span>Jan 15, 2025</span>
            </div>
          </div>
        </div>

        <div className="psm-mock-content-body">
          <div className="psm-mock-content-title">Kanban Columns</div>
          <div className="psm-mock-content-desc">Add, rename, reorder, or remove columns to match your team's workflow.</div>

          <div className="psm-col-rows">
            <div className="psm-col-row">
              <span className="psm-col-drag">
                <svg width="10" height="10" viewBox="0 0 14 14" fill="currentColor">
                  <rect x="2.5" y="1.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="1.5" width="3" height="3" rx="1.5" />

                  <rect x="2.5" y="5.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="5.5" width="3" height="3" rx="1.5" />

                  <rect x="2.5" y="9.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="9.5" width="3" height="3" rx="1.5" />
                </svg>
              </span>

              <span className="psm-col-icon">
                <svg width="11" height="11" viewBox="0 0 14 14" fill="none">
                  <path d="M12.5 7A5.5 5.5 0 1 1 1.5 7A5.5 5.5 0 0 1 12.5 7Z" stroke="#71717a" strokeWidth="1" strokeDasharray="2.2 2.2" strokeLinecap="round" />
                </svg>
              </span>

              <span className="psm-col-name">Backlog</span>
              <span className="psm-col-badge psm-col-badge-default">Default</span>
            </div>

            <div className="psm-col-row">
              <span className="psm-col-drag">
                <svg width="10" height="10" viewBox="0 0 14 14" fill="currentColor">
                  <rect x="2.5" y="1.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="1.5" width="3" height="3" rx="1.5" />

                  <rect x="2.5" y="5.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="5.5" width="3" height="3" rx="1.5" />

                  <rect x="2.5" y="9.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="9.5" width="3" height="3" rx="1.5" />
                </svg>
              </span>

              <span className="psm-col-icon">
                <svg width="11" height="11" viewBox="0 0 14 14" fill="none">
                  <path d="M12.5 7A5.5 5.5 0 1 1 1.5 7A5.5 5.5 0 0 1 12.5 7Z" stroke="#2563eb" strokeWidth="1" />

                  <path d="M7 1.5A5.5 5.5 0 0 1 12.5 7 5.5 5.5 0 0 1 7 12.5V1.5Z" fill="#2563eb" fillOpacity="0.45" />
                </svg>
              </span>

              <span className="psm-col-name">In Progress</span>
            </div>

            <div className="psm-col-row">
              <span className="psm-col-drag">
                <svg width="10" height="10" viewBox="0 0 14 14" fill="currentColor">
                  <rect x="2.5" y="1.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="1.5" width="3" height="3" rx="1.5" />

                  <rect x="2.5" y="5.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="5.5" width="3" height="3" rx="1.5" />

                  <rect x="2.5" y="9.5" width="3" height="3" rx="1.5" />

                  <rect x="8.5" y="9.5" width="3" height="3" rx="1.5" />
                </svg>
              </span>

              <span className="psm-col-icon">
                <svg width="11" height="11" viewBox="0 0 14 14" fill="none">
                  <path d="M13 7A6 6 0 1 1 1 7A6 6 0 0 1 13 7Z" fill="#16a34a" />

                  <path d="M4.5 7L6.2 8.7L9.5 5.3" stroke="#fff" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>

              <span className="psm-col-name">Done</span>
              <span className="psm-col-badge psm-col-badge-resolved">Resolved</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>