add:type assigner

frontend/src/components/admin/AdminTable.tsx

@@ -7,6 +7,14 @@ function formatDate(iso: string): string {
   })
 }
 
+// Parse transaction reference encoded by NewTicketForm into the description
+// Format: "[Transaction: TXN-XXXXX — Label $X.XX on Date]\n\n..."
+function parseTransaction(description: string): { txnLine: string; body: string } | null {
+  const match = description.match(/^\[Transaction: ([^\]]+)\]\n?\n?(.*)$/s)
+  if (!match) return null
+  return { txnLine: match[1].trim(), body: match[2].trim() }
+}
+
 interface AdminTableProps {
   tickets: Ticket[]
 }
@@ -20,12 +28,14 @@ export function AdminTable({ tickets }: AdminTableProps) {
     )
   }
 
+  const hasBilling = tickets.some(t => t.type === 'billing')
+
   return (
     <div className="overflow-hidden rounded-lg border border-border-100">
       <table className="w-full text-sm">
         <thead>
           <tr className="border-b border-border-100 bg-bg-200">
-            {(['Subject', 'Type', 'Status', 'Description', 'Created'] as const).map(col => (
+            {(['Subject', 'Type', 'Status', ...(hasBilling ? ['Transaction'] : []), 'Description', 'Created'] as const).map(col => (
               <th
                 key={col}
                 className="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-fg-300"
@@ -36,27 +46,43 @@ export function AdminTable({ tickets }: AdminTableProps) {
           </tr>
         </thead>
         <tbody className="divide-y divide-border-100 bg-bg-100">
-          {tickets.map(ticket => (
-            <tr key={ticket.id} className="transition-colors hover:bg-bg-200">
-              <td className="px-4 py-3 font-medium text-fg-100">
-                {ticket.subject}
-              </td>
-              <td className="px-4 py-3 text-xs capitalize text-fg-200">
-                {ticket.type.replace('-', ' ')}
-              </td>
-              <td className="px-4 py-3">
-                <Badge status={ticket.status} />
-              </td>
-              <td className="max-w-xs px-4 py-3 text-xs text-fg-300">
-                <span className="line-clamp-2">
-                  {ticket.description || <span className="italic">No description</span>}
-                </span>
-              </td>
-              <td className="whitespace-nowrap px-4 py-3 text-xs text-fg-300">
-                {formatDate(ticket.createdAt)}
-              </td>
-            </tr>
-          ))}
+          {tickets.map(ticket => {
+            const txn = ticket.type === 'billing' ? parseTransaction(ticket.description) : null
+            const displayDescription = txn ? txn.body : ticket.description
+
+            return (
+              <tr key={ticket.id} className="transition-colors hover:bg-bg-200">
+                <td className="px-4 py-3 font-medium text-fg-100">
+                  {ticket.subject}
+                </td>
+                <td className="px-4 py-3 text-xs capitalize text-fg-200">
+                  {ticket.type.replace('-', ' ')}
+                </td>
+                <td className="px-4 py-3">
+                  <Badge status={ticket.status} />
+                </td>
+                {hasBilling && (
+                  <td className="px-4 py-3 text-xs text-fg-200 whitespace-nowrap">
+                    {txn ? (
+                      <span className="inline-flex items-center gap-1.5 rounded-md border border-border-100 bg-bg-300 px-2 py-1 font-mono text-fg-200">
+                        {txn.txnLine.split(' — ')[0]}
+                      </span>
+                    ) : (
+                      <span className="text-fg-300 italic">—</span>
+                    )}
+                  </td>
+                )}
+                <td className="max-w-xs px-4 py-3 text-xs text-fg-300">
+                  <span className="line-clamp-2">
+                    {displayDescription || <span className="italic">No description</span>}
+                  </span>
+                </td>
+                <td className="whitespace-nowrap px-4 py-3 text-xs text-fg-300">
+                  {formatDate(ticket.createdAt)}
+                </td>
+              </tr>
+            )
+          })}
         </tbody>
       </table>
     </div>

frontend/src/components/tickets/NewTicketForm.tsx

@@ -2,20 +2,139 @@ import { useState } from 'react'
 import { Button } from '../ui/Button.tsx'
 import type { Ticket, TicketType } from '../../lib/types.ts'
 
-const TICKET_TYPES: { value: TicketType; label: string }[] = [
-  { value: 'bug',             label: 'Bug' },
-  { value: 'billing',         label: 'Billing' },
-  { value: 'account',         label: 'Account' },
-  { value: 'feature-request', label: 'Feature Request' },
-  { value: 'feedback',     label: 'Feedback' },
-  { value: 'other',           label: 'Other' },
+// ─── Fake transactions ────────────────────────────────────────────────────────
+
+export interface FakeTransaction {
+  id: string
+  label: string
+  amount: string
+  date: string
+}
+
+export const FAKE_TRANSACTIONS: FakeTransaction[] = [
+  { id: 'TXN-48291', label: 'Pro Plan — Monthly',   amount: '$12.00', date: 'Mar 1, 2026'  },
+  { id: 'TXN-47103', label: 'Add-on: Extra Storage', amount: '$4.99',  date: 'Feb 15, 2026' },
+  { id: 'TXN-45882', label: 'Pro Plan — Monthly',   amount: '$12.00', date: 'Feb 1, 2026'  },
 ]
 
-const inputClass = `
-  w-full rounded-md border border-border-100 bg-bg-300 px-3 py-2 text-sm text-fg-100
-  placeholder:text-fg-300 outline-none transition-colors
-  focus:border-border-200 focus:ring-1 focus:ring-ring-100
-`
+// ─── Step definitions ─────────────────────────────────────────────────────────
+
+interface Option {
+  label: string
+  description: string
+  icon: string
+  type: TicketType
+  subOptions?: SubOption[]
+}
+
+interface SubOption {
+  label: string
+  description: string
+  icon: string
+  type: TicketType
+}
+
+const CATEGORIES: Option[] = [
+  {
+    label: 'Something broke',
+    description: 'Unexpected behavior or errors',
+    icon: '⚠️',
+    type: 'bug',
+    subOptions: [
+      { label: 'Page or feature not loading', description: 'Blank screens, crashes, or freezes', icon: '🖥️', type: 'bug' },
+      { label: 'Error message appeared', description: 'Something went wrong unexpectedly', icon: '🔴', type: 'bug' },
+      { label: 'Data looks wrong', description: 'Missing or incorrect information', icon: '📊', type: 'bug' },
+    ],
+  },
+  {
+    label: 'Billing or payment',
+    description: 'Charges, invoices, or subscriptions',
+    icon: '💳',
+    type: 'billing',
+    subOptions: [
+      { label: 'Unexpected charge', description: "A charge I didn't expect or recognise", icon: '❓', type: 'billing' },
+      { label: 'Refund request', description: "I'd like money returned", icon: '↩️', type: 'billing' },
+      { label: 'Subscription issue', description: 'Plan, renewal, or upgrade problem', icon: '🔄', type: 'billing' },
+    ],
+  },
+  {
+    label: 'My account',
+    description: 'Login, settings, or profile',
+    icon: '👤',
+    type: 'account',
+    subOptions: [
+      { label: "Can't sign in", description: 'Login or password issues', icon: '🔐', type: 'account' },
+      { label: 'Profile or settings', description: 'Change name, email, or preferences', icon: '⚙️', type: 'account' },
+      { label: 'Account access or security', description: 'Suspicious activity or locked out', icon: '🛡️', type: 'account' },
+    ],
+  },
+  {
+    label: 'Suggest an idea',
+    description: 'Feature requests or improvements',
+    icon: '💡',
+    type: 'feature-request',
+    subOptions: [
+      { label: 'New feature idea', description: "Something you'd love to see added", icon: '✨', type: 'feature-request' },
+      { label: 'Improve something existing', description: 'Make a current feature better', icon: '🔧', type: 'feature-request' },
+      { label: 'Share general feedback', description: 'Thoughts on your experience', icon: '💬', type: 'feedback' },
+    ],
+  },
+  {
+    label: 'Something else',
+    description: 'Anything not listed above',
+    icon: '📝',
+    type: 'other',
+  },
+]
+
+// ─── Sub-components ────────────────────────────────────────────────────────────
+
+function StepIndicator({ step, total }: { step: number; total: number }) {
+  return (
+    <div className="flex items-center gap-1.5 mb-5">
+      {Array.from({ length: total }).map((_, i) => (
+        <div
+          key={i}
+          style={{ transition: 'background-color 0.4s ease' }}
+          className={`h-0.5 flex-1 rounded-full ${
+            i < step ? 'bg-fg-100' : i === step ? 'bg-fg-300' : 'bg-border-100'
+          }`}
+        />
+      ))}
+    </div>
+  )
+}
+
+interface OptionCardProps {
+  icon: string
+  label: string
+  description: string
+  onClick: () => void
+}
+
+function OptionCard({ icon, label, description, onClick }: OptionCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="group w-full text-left rounded-lg border border-border-100 bg-bg-200 px-4 py-3.5 transition-all duration-150 cursor-pointer hover:border-border-200 hover:bg-bg-300 flex items-start gap-3"
+    >
+      <span className="mt-0.5 text-lg leading-none select-none">{icon}</span>
+      <div className="flex flex-col gap-0.5 min-w-0">
+        <span className="text-sm font-medium text-fg-100">{label}</span>
+        <span className="text-xs text-fg-300 leading-relaxed">{description}</span>
+      </div>
+      <svg
+        className="ml-auto mt-1 shrink-0 text-fg-300 opacity-0 group-hover:opacity-100 transition-opacity duration-150"
+        width="14" height="14" viewBox="0 0 14 14" fill="none"
+      >
+        <path d="M5 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+      </svg>
+    </button>
+  )
+}
+
+// ─── Main form ────────────────────────────────────────────────────────────────
 
 type FormData = Pick<Ticket, 'subject' | 'description' | 'type'>
 
@@ -23,45 +142,213 @@ interface NewTicketFormProps {
   onSubmit: (data: FormData) => void
 }
 
+type Step = 'category' | 'sub' | 'details'
+
+const inputClass = `
+  w-full rounded-md border border-border-100 bg-bg-300 px-3 py-2 text-sm text-fg-100
+  placeholder:text-fg-300 outline-none transition-colors
+  focus:border-border-200 focus:ring-1 focus:ring-ring-100
+`
+
 export function NewTicketForm({ onSubmit }: NewTicketFormProps) {
+  const [step, setStep] = useState<Step>('category')
+  const [selectedCategory, setSelectedCategory] = useState<Option | null>(null)
+  const [selectedTxn, setSelectedTxn] = useState<string>('')
   const [form, setForm] = useState<FormData>({ subject: '', description: '', type: 'other' })
 
-  const set = (field: keyof FormData) =>
-    (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
-      setForm(f => ({ ...f, [field]: e.target.value }))
+  const isBilling = form.type === 'billing'
+  const stepIndex = step === 'category' ? 0 : step === 'sub' ? 1 : selectedCategory?.subOptions ? 2 : 1
+  const totalSteps = selectedCategory?.subOptions ? 3 : 2
+
+  const handleCategorySelect = (cat: Option) => {
+    setSelectedCategory(cat)
+    if (cat.subOptions) {
+      setStep('sub')
+    } else {
+      setForm(f => ({ ...f, type: cat.type }))
+      setStep('details')
+    }
+  }
+
+  const handleSubSelect = (sub: SubOption) => {
+    setForm(f => ({ ...f, type: sub.type }))
+    setStep('details')
+  }
+
+  const handleBack = () => {
+    if (step === 'details' && selectedCategory?.subOptions) {
+      setSelectedTxn('')
+      setStep('sub')
+    } else {
+      setSelectedTxn('')
+      setStep('category')
+      setSelectedCategory(null)
+    }
+  }
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault()
     if (!form.subject.trim()) return
-    onSubmit(form)
+    // Encode transaction reference into description if one was selected
+    const txn = FAKE_TRANSACTIONS.find(t => t.id === selectedTxn)
+    const descriptionWithTxn = txn
+      ? `[Transaction: ${txn.id} — ${txn.label} ${txn.amount} on ${txn.date}]\n\n${form.description}`.trim()
+      : form.description
+    onSubmit({ ...form, description: descriptionWithTxn })
   }
 
   return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-4">
-      <div className="flex flex-col gap-1.5">
-        <label className="text-xs font-medium text-fg-200">Subject</label>
-        <input
-          className={inputClass}
-          placeholder="Brief summary of the issue"
-          value={form.subject}
-          onChange={set('subject')}
-          autoFocus
-          required
-        />
-      </div>
-      <div className="flex flex-col gap-1.5">
-        <label className="text-xs font-medium text-fg-200">Description</label>
-        <textarea
-          className={`${inputClass} min-h-24 resize-y`}
-          placeholder="Describe the issue in detail..."
-          value={form.description}
-          onChange={set('description')}
-          rows={4}
-        />
-      </div>
-      <div className="flex justify-end gap-2 pt-1">
-        <Button type="submit">Create Ticket</Button>
-      </div>
-    </form>
+    <div className="flex flex-col">
+      <StepIndicator step={stepIndex} total={totalSteps} />
+
+      {/* Step 1 — Category */}
+      {step === 'category' && (
+        <div className="flex flex-col gap-2">
+          <div className="mb-3">
+            <p className="text-sm font-semibold text-fg-100">What can we help you with?</p>
+            <p className="text-xs text-fg-300 mt-0.5">Choose the option that best fits your situation.</p>
+          </div>
+          {CATEGORIES.map(cat => (
+            <OptionCard
+              key={cat.type}
+              icon={cat.icon}
+              label={cat.label}
+              description={cat.description}
+              onClick={() => handleCategorySelect(cat)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Step 2 — Sub-options */}
+      {step === 'sub' && selectedCategory?.subOptions && (
+        <div className="flex flex-col gap-2">
+          <div className="mb-3">
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-base">{selectedCategory.icon}</span>
+              <span className="text-xs font-medium text-fg-300">{selectedCategory.label}</span>
+            </div>
+            <p className="text-sm font-semibold text-fg-100">What's the issue specifically?</p>
+            <p className="text-xs text-fg-300 mt-0.5">Pick the closest match — we'll route it to the right team.</p>
+          </div>
+          {selectedCategory.subOptions.map(sub => (
+            <OptionCard
+              key={sub.type + sub.label}
+              icon={sub.icon}
+              label={sub.label}
+              description={sub.description}
+              onClick={() => handleSubSelect(sub)}
+            />
+          ))}
+          <button
+            type="button"
+            onClick={handleBack}
+            className="mt-1 text-xs text-fg-300 hover:text-fg-200 transition-colors text-left cursor-pointer"
+          >
+            ← Back
+          </button>
+        </div>
+      )}
+
+      {/* Step 3 — Details */}
+      {step === 'details' && (
+        <form onSubmit={handleSubmit} className="flex flex-col gap-4">
+          <div className="mb-1">
+            {selectedCategory && (
+              <div className="flex items-center gap-2 mb-2">
+                <span className="text-base">{selectedCategory.icon}</span>
+                <span className="text-xs font-medium text-fg-300">{selectedCategory.label}</span>
+                <span className="text-xs text-fg-300">·</span>
+                <span className="inline-flex items-center rounded-full border border-border-100 bg-bg-300 px-2 py-0.5 text-xs text-fg-300 capitalize">
+                  {form.type.replace('-', ' ')}
+                </span>
+              </div>
+            )}
+            <p className="text-sm font-semibold text-fg-100">Tell us what's going on</p>
+            <p className="text-xs text-fg-300 mt-0.5">The more detail you share, the faster we can help.</p>
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-xs font-medium text-fg-200">
+              Subject <span className="text-fg-300 font-normal">(required)</span>
+            </label>
+            <input
+              className={inputClass}
+              placeholder="Brief summary of the issue"
+              value={form.subject}
+              onChange={e => setForm(f => ({ ...f, subject: e.target.value }))}
+              autoFocus
+              required
+            />
+          </div>
+
+          {isBilling && (
+            <div className="flex flex-col gap-1.5">
+              <label className="text-xs font-medium text-fg-200">
+                Related transaction <span className="text-fg-300 font-normal">(optional)</span>
+              </label>
+              <div className="relative">
+                <select
+                  className={`${inputClass} appearance-none pr-8 cursor-pointer`}
+                  value={selectedTxn}
+                  onChange={e => setSelectedTxn(e.target.value)}
+                >
+                  <option value="">— Not related to a specific charge</option>
+                  {FAKE_TRANSACTIONS.map(txn => (
+                    <option key={txn.id} value={txn.id}>
+                      {txn.id} · {txn.label} · {txn.amount} · {txn.date}
+                    </option>
+                  ))}
+                </select>
+                <svg
+                  className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-fg-300"
+                  width="12" height="12" viewBox="0 0 12 12" fill="none"
+                >
+                  <path d="M2 4l4 4 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+              </div>
+              {selectedTxn && (() => {
+                const txn = FAKE_TRANSACTIONS.find(t => t.id === selectedTxn)!
+                return (
+                  <div className="rounded-md border border-border-100 bg-bg-300 px-3 py-2.5 flex items-center justify-between gap-3">
+                    <div className="flex flex-col gap-0.5">
+                      <span className="text-xs font-medium text-fg-100">{txn.label}</span>
+                      <span className="text-xs text-fg-300">{txn.date}</span>
+                    </div>
+                    <span className="text-sm font-semibold text-fg-100 shrink-0">{txn.amount}</span>
+                  </div>
+                )
+              })()}
+            </div>
+          )}
+
+          <div className="flex flex-col gap-1.5">
+            <label className="text-xs font-medium text-fg-200">
+              Description <span className="text-fg-300 font-normal">(optional)</span>
+            </label>
+            <textarea
+              className={`${inputClass} min-h-24 resize-y`}
+              placeholder="Describe what happened, what you expected, and any steps to reproduce..."
+              value={form.description}
+              onChange={e => setForm(f => ({ ...f, description: e.target.value }))}
+              rows={4}
+            />
+          </div>
+
+          <div className="flex items-center justify-between pt-1">
+            <button
+              type="button"
+              onClick={handleBack}
+              className="text-xs text-fg-300 hover:text-fg-200 transition-colors cursor-pointer"
+            >
+              ← Back
+            </button>
+            <Button type="submit" disabled={!form.subject.trim()}>
+              Submit Ticket
+            </Button>
+          </div>
+        </form>
+      )}
+    </div>
   )
 }

frontend/src/components/ui/Modal.tsx

@@ -44,7 +44,7 @@ export function Modal({ isOpen, onClose, title, children }: ModalProps) {
             </svg>
           </button>
         </div>
-        <div className="px-5 py-4">{children}</div>
+        <div className="px-5 py-4 max-h-[70vh] overflow-y-auto">{children}</div>
       </div>
     </div>,
     document.body

frontend/src/hooks/useStorageMode.ts

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react'
-import type { StorageMode } from '../lib/storage.ts'
 
+export type StorageMode = 'local' | 'api'
 export type StorageResolution = StorageMode | 'pending'
 
 export function useStorageMode(): StorageResolution {

frontend/src/pages/LoginPage.tsx

@@ -70,7 +70,7 @@ export function LoginPage({ onBack, error }: LoginPageProps) {
 
         <div className="border-t border-border-100 px-6 py-4">
           <p className="text-center text-xs text-fg-300">
-            We only request your public profile — no email address is stored.
+            We only request your public profile — <span className="text-fg-100">no email address is stored.</span>
           </p>
         </div>
       </div>

frontend/src/pages/UserPage.tsx

@@ -8,22 +8,92 @@ import { storage } from '../lib/storage.ts'
 import type { Ticket } from '../lib/types.ts'
 import { PlusIcon } from '../components/icons/plus.tsx'
 
+const TICKET_LIMIT = 3
+
 interface UserPageProps {
   isAuthenticated: boolean
 }
 
+function TicketLimitReached({ onClose, fromServer }: { onClose: () => void; fromServer?: boolean }) {
+  return (
+    <div className="flex flex-col items-center gap-4 py-4 text-center">
+      <div className="flex h-12 w-12 items-center justify-center rounded-full border border-border-100 bg-bg-300 text-2xl">
+        🗂️
+      </div>
+      <div className="flex flex-col gap-1.5">
+        <p className="text-sm font-semibold text-fg-100">Ticket limit reached</p>
+        <p className="text-xs leading-relaxed text-fg-300 max-w-xs">
+          {fromServer ? (
+            <>
+              The server rejected your request — you already have{' '}
+              <span className="text-fg-200 font-medium">{TICKET_LIMIT} active support tickets</span>.
+              Your ticket was not created.
+            </>
+          ) : (
+            <>
+              You can have a maximum of{' '}
+              <span className="text-fg-200 font-medium">{TICKET_LIMIT} active support tickets</span>{' '}
+              at a time.
+            </>
+          )}
+        </p>
+      </div>
+      <div className="w-full rounded-lg border border-border-100 bg-bg-300 px-4 py-3 text-left">
+        <p className="text-xs font-medium text-fg-200 mb-2">How to free up a slot</p>
+        <ol className="flex flex-col gap-1.5">
+          {[
+            'Switch to the Admin tab',
+            'Find a resolved or closed ticket',
+            'Delete it to make room',
+          ].map((step, i) => (
+            <li key={i} className="flex items-center gap-2.5 text-xs text-fg-300">
+              <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-bg-400 text-[10px] font-medium text-fg-200">
+                {i + 1}
+              </span>
+              {step}
+            </li>
+          ))}
+        </ol>
+      </div>
+      <Button variant="ghost" onClick={onClose} className="mt-1">
+        Got it
+      </Button>
+    </div>
+  )
+}
+
 export function UserPage({ isAuthenticated }: UserPageProps) {
   const [tickets, setTickets] = useState<Ticket[]>([])
+  const [serverLimitHit, setServerLimitHit] = useState(false)
   const newTicketModal = useModal()
 
+  const atLimit = isAuthenticated && tickets.length >= TICKET_LIMIT
+  const showLimitScreen = atLimit || serverLimitHit
+
   useEffect(() => {
     storage.getTickets().then(setTickets)
   }, [isAuthenticated])
 
-  const handleCreate = async (form: Pick<Ticket, 'subject' | 'description' | 'type'>) => {
-    const ticket = await storage.createTicket(form)
-    setTickets(prev => [ticket, ...prev])
+  // Reset server limit flag whenever the modal closes
+  const handleClose = () => {
     newTicketModal.close()
+    setServerLimitHit(false)
+  }
+
+  const handleCreate = async (form: Pick<Ticket, 'subject' | 'description' | 'type'>) => {
+    if (atLimit) return
+    try {
+      const ticket = await storage.createTicket(form)
+      setTickets(prev => [ticket, ...prev])
+      newTicketModal.close()
+    } catch (err: any) {
+      if (err?.code === 'ticket_limit_reached') {
+        // Backend rejected — switch the open modal to the limit screen immediately
+        // and re-sync the ticket list so atLimit also becomes true
+        setServerLimitHit(true)
+        storage.getTickets().then(setTickets)
+      }
+    }
   }
 
   const handleDelete = async (id: string) => {
@@ -37,7 +107,17 @@ export function UserPage({ isAuthenticated }: UserPageProps) {
         <div>
           <h1 className="text-lg font-semibold text-fg-100">My Tickets</h1>
           <p className="mt-0.5 text-sm text-fg-300">
-            {tickets.length} {tickets.length === 1 ? 'ticket' : 'tickets'}
+            {isAuthenticated ? (
+              <>
+                {tickets.length}{' '}
+                <span className={atLimit ? 'text-amber-400' : 'text-fg-300'}>
+                  / {TICKET_LIMIT}
+                </span>{' '}
+                tickets
+              </>
+            ) : (
+              <>{tickets.length} {tickets.length === 1 ? 'ticket' : 'tickets'}</>
+            )}
           </p>
         </div>
         <Button onClick={newTicketModal.open}>
@@ -48,8 +128,15 @@ export function UserPage({ isAuthenticated }: UserPageProps) {
 
       <TicketTable tickets={tickets} onDelete={handleDelete} />
 
-      <Modal isOpen={newTicketModal.isOpen} onClose={newTicketModal.close} title="New Ticket">
-        <NewTicketForm onSubmit={handleCreate} />
+      <Modal
+        isOpen={newTicketModal.isOpen}
+        onClose={handleClose}
+        title={showLimitScreen ? 'Ticket Limit Reached' : 'New Ticket'}
+      >
+        {showLimitScreen
+          ? <TicketLimitReached onClose={handleClose} fromServer={serverLimitHit && !atLimit} />
+          : <NewTicketForm onSubmit={handleCreate} />
+        }
       </Modal>
     </>
   )