diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 0d3d5b8..de5110c 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -2,12 +2,11 @@
 
 import { useState, useEffect, useCallback } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
-import { PlusIcon, SearchIcon, ArrowLeftIcon, SendIcon, PaperclipIcon } from "lucide-react";
+import { PlusIcon, SearchIcon } from "lucide-react";
 import { formatDistanceToNow } from "date-fns";
-import { getTickets, getTicket, getTicketTransactions, getQueues, createTicket, updateTicket, previewTicket } from "@/lib/api";
-import type { Ticket, Queue, Transaction, PreviewResult, UpdateResult } from "@/lib/types";
+import { getTickets, getQueues, createTicket } from "@/lib/api";
+import type { Ticket, Queue } from "@/lib/types";
 import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
 import {
   Dialog,
   DialogContent,
@@ -16,15 +15,6 @@ import {
   DialogDescription,
   DialogFooter,
 } from "@/components/ui/dialog";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import { Textarea } from "@/components/ui/textarea";
 import { cn } from "@/lib/utils";
 
 const STATUS_COLORS: Record<string, string> = {
@@ -35,16 +25,6 @@ const STATUS_COLORS: Record<string, string> = {
   closed: "#6b7280",
 };
 
-const STATUS_LABELS: Record<string, string> = {
-  new: "New",
-  open: "Open",
-  in_progress: "In progress",
-  resolved: "Resolved",
-  closed: "Closed",
-};
-
-const ALL_STATUSES = ["new", "open", "in_progress", "resolved", "closed"];
-
 const FILTERS = [
   { key: null, label: "All" },
   { key: "open", label: "Open" },
@@ -56,21 +36,7 @@ const FILTERS = [
 
 type FilterKey = (typeof FILTERS)[number]["key"];
 
-function getInitial(name: string): string {
-  if (!name) return "?";
-  return name.charAt(0).toUpperCase();
-}
-
-function getInitialColor(name: string): string {
-  const colors = ["#5e6ad2", "#7170ff", "#828fff", "#f59e0b", "#22c55e"];
-  let hash = 0;
-  for (let i = 0; i < name.length; i++) {
-    hash = name.charCodeAt(i) + ((hash << 5) - hash);
-  }
-  return colors[Math.abs(hash) % colors.length];
-}
-
-function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: boolean; onClick: () => void }) {
+function TicketRow({ ticket, onClick }: { ticket: Ticket; onClick: () => void }) {
   const statusColor = STATUS_COLORS[ticket.status] || STATUS_COLORS.new;
   const shortId = ticket.id.slice(0, 8);
   const timeAgo = formatDistanceToNow(new Date(ticket.updated_at), { addSuffix: true });
@@ -78,38 +44,35 @@ function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: bo
   return (
     <button
       onClick={onClick}
-      className={cn(
-        "w-full flex items-center gap-3 py-4 px-4 text-left transition-all duration-150 border-l-2 border-b border-border",
-        selected
-          ? "bg-accent border-l-primary"
-          : "border-l-transparent hover:bg-accent hover:border-l-primary"
-      )}
+      className="w-full flex items-start gap-3.5 py-4 px-5 text-left hover:bg-accent transition-colors duration-100 border-b border-border"
     >
       <span
-        className="w-2 h-2 rounded-full flex-shrink-0"
+        className="w-2.5 h-2.5 rounded-full flex-shrink-0 mt-1.5"
         style={{ backgroundColor: statusColor }}
       />
-      <span className="font-mono text-xs text-muted-foreground w-16 flex-shrink-0">
-        {shortId}
-      </span>
-      <span className="text-sm text-foreground flex-1 truncate font-medium">
-        {ticket.subject}
-      </span>
-      <span className="text-xs text-muted-foreground bg-muted px-1.5 py-0.5 rounded font-medium flex-shrink-0">
-        {ticket.queue_id.slice(0, 8)}
-      </span>
-      {ticket.owner_id ? (
-        <span className="w-5 h-5 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
-          <span className="text-primary-foreground text-[10px] font-semibold leading-none">
-            {ticket.owner_id.charAt(0).toUpperCase()}
+      <div className="flex-1 min-w-0">
+        <p className="text-[15px] text-foreground font-semibold truncate leading-snug">
+          {ticket.subject}
+        </p>
+        <p className="text-xs text-muted-foreground mt-0.5 flex items-center gap-2">
+          <span className="font-mono">{shortId}</span>
+          <span className="text-border">·</span>
+          <span className="bg-muted px-1.5 py-px rounded font-medium">
+            {ticket.queue_id.slice(0, 8)}
           </span>
-        </span>
-      ) : (
-        <span className="w-5 h-5 rounded-full border border-border flex items-center justify-center flex-shrink-0">
-          <span className="text-muted-foreground text-[10px]">?</span>
-        </span>
-      )}
-      <span className="text-xs text-muted-foreground w-24 text-right flex-shrink-0 tabular-nums">
+          {ticket.owner_id && (
+            <>
+              <span className="text-border">·</span>
+              <span className="w-4 h-4 rounded-full bg-primary flex items-center justify-center flex-shrink-0">
+                <span className="text-primary-foreground text-[9px] font-semibold leading-none">
+                  {ticket.owner_id.charAt(0).toUpperCase()}
+                </span>
+              </span>
+            </>
+          )}
+        </p>
+      </div>
+      <span className="text-xs text-muted-foreground tabular-nums whitespace-nowrap mt-0.5">
         {timeAgo}
       </span>
     </button>
@@ -118,581 +81,13 @@ function TicketRow({ ticket, selected, onClick }: { ticket: Ticket; selected: bo
 
 function SkeletonRow() {
   return (
-    <div className="flex items-center gap-3 py-4 px-4 border-b border-border">
-      <div className="w-2 h-2 rounded-full bg-muted animate-pulse" />
-      <div className="w-16 h-3 bg-muted rounded animate-pulse" />
-      <div className="flex-1 h-3 bg-muted rounded animate-pulse" />
-      <div className="w-12 h-4 bg-muted rounded animate-pulse" />
-      <div className="w-5 h-5 rounded-full bg-muted animate-pulse" />
-      <div className="w-20 h-3 bg-muted rounded animate-pulse" />
-    </div>
-  );
-}
-
-function TicketDetailPanel({
-  ticketId,
-  onBack,
-}: {
-  ticketId: string;
-  onBack: () => void;
-}) {
-  const [ticket, setTicket] = useState<Ticket | null>(null);
-  const [transactions, setTransactions] = useState<Transaction[]>([]);
-  const [queue, setQueue] = useState<Queue | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [replyText, setReplyText] = useState("");
-
-  // Status change
-  const [pendingStatus, setPendingStatus] = useState<string | null>(null);
-  const [preview, setPreview] = useState<PreviewResult | null>(null);
-  const [previewLoading, setPreviewLoading] = useState(false);
-  const [previewError, setPreviewError] = useState<string | null>(null);
-  const [applyLoading, setApplyLoading] = useState(false);
-  const [scripResults, setScripResults] = useState<UpdateResult["scrip_results"] | null>(null);
-
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    setError(null);
-    setTicket(null);
-    setTransactions([]);
-    setReplyText("");
-
-    const [ticketRes, txRes, queuesRes] = await Promise.all([
-      getTicket(ticketId),
-      getTicketTransactions(ticketId),
-      getQueues(),
-    ]);
-
-    if (ticketRes.error) {
-      setError(ticketRes.error);
-    } else {
-      setTicket(ticketRes.data);
-    }
-    if (txRes.data) {
-      setTransactions(txRes.data);
-    }
-    if (queuesRes.data && ticketRes.data) {
-      const q = queuesRes.data.find((q) => q.id === ticketRes.data!.queue_id);
-      if (q) setQueue(q);
-    }
-    setLoading(false);
-  }, [ticketId]);
-
-  useEffect(() => {
-    fetchData();
-  }, [fetchData]);
-
-  const handleStatusSelect = (value: string | null) => {
-    if (!value || value === ticket?.status) return;
-    setPendingStatus(value);
-    setPreview(null);
-    setPreviewError(null);
-    setScripResults(null);
-    setPreviewLoading(true);
-
-    previewTicket(ticketId, { status: value }).then(({ data, error }) => {
-      setPreviewLoading(false);
-      if (error) {
-        setPreviewError(error);
-        setPendingStatus(null);
-      } else {
-        setPreview(data);
-      }
-    });
-  };
-
-  const handleApplyStatus = async () => {
-    if (!pendingStatus) return;
-    setApplyLoading(true);
-    setPreviewError(null);
-
-    const { data, error } = await updateTicket(ticketId, { status: pendingStatus });
-
-    setApplyLoading(false);
-
-    if (error) {
-      setPreviewError(error);
-    } else if (data) {
-      setTicket(data.ticket);
-      setScripResults(data.scrip_results);
-      setPreview(null);
-      setPendingStatus(null);
-      const txRes = await getTicketTransactions(ticketId);
-      if (txRes.data) setTransactions(txRes.data);
-    }
-  };
-
-  const handleCancelStatus = () => {
-    setPendingStatus(null);
-    setPreview(null);
-    setPreviewError(null);
-    setScripResults(null);
-  };
-
-  return (
-    <div className="flex flex-col h-full">
-      {/* Header */}
-      <div className="flex items-center gap-3 px-4 py-2.5 border-b border-border shrink-0">
-        <button
-          onClick={onBack}
-          className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-all duration-150 flex-shrink-0"
-        >
-          <ArrowLeftIcon className="w-3.5 h-3.5" />
-          Back
-        </button>
+    <div className="flex items-start gap-3.5 py-4 px-5 border-b border-border">
+      <div className="w-2.5 h-2.5 rounded-full bg-muted animate-pulse mt-1.5" />
+      <div className="flex-1 space-y-1.5">
+        <div className="h-4 bg-muted rounded animate-pulse w-3/5" />
+        <div className="h-3 bg-muted rounded animate-pulse w-2/5" />
       </div>
-
-      {loading && (
-        <div className="flex h-full">
-          <div className="flex-1 p-4 space-y-4 overflow-y-auto">
-            {Array.from({ length: 6 }).map((_, i) => (
-              <div key={i} className="flex gap-3">
-                <div className="w-6 h-6 rounded-full bg-muted animate-pulse" />
-                <div className="flex-1 space-y-2">
-                  <div className="h-3 bg-muted rounded animate-pulse w-3/4" />
-                  <div className="h-3 bg-muted rounded animate-pulse w-1/2" />
-                </div>
-              </div>
-            ))}
-          </div>
-          <div className="w-72 flex-shrink-0 border-l bg-muted/30 p-4 space-y-4">
-            {Array.from({ length: 5 }).map((_, i) => (
-              <div key={i} className="h-6 bg-muted rounded animate-pulse" />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {error && (
-        <div className="flex flex-col items-center justify-center flex-1">
-          <p className="text-sm text-destructive">{error}</p>
-        </div>
-      )}
-
-      {!loading && !error && ticket && (
-        <div className="flex flex-1 min-h-0">
-          {/* Left: conversation */}
-          <div className="flex-1 flex flex-col min-w-0">
-            {/* Title */}
-            <div className="px-4 py-3 border-b border-border shrink-0">
-              <h2 className="text-sm font-semibold truncate">
-                {ticket.subject}
-              </h2>
-              <p className="text-xs text-muted-foreground mt-0.5">
-                <span className="font-mono">{ticket.id.slice(0, 8)}</span>
-              </p>
-            </div>
-
-            {/* Conversation */}
-            <div className="flex-1 overflow-y-auto">
-              {transactions.length === 0 && (
-                <div className="flex flex-col items-center justify-center py-20">
-                  <p className="text-sm text-muted-foreground">
-                    No activity yet
-                  </p>
-                </div>
-              )}
-              {transactions.map((tx) => {
-                const isSystem =
-                  tx.transaction_type === "StatusChange" ||
-                  tx.transaction_type === "SetOwner" ||
-                  tx.transaction_type === "Create";
-                const isAgent =
-                  tx.transaction_type === "Correspond" ||
-                  tx.transaction_type === "Comment";
-
-                if (isSystem) {
-                  const txTimeAgo = formatDistanceToNow(
-                    new Date(tx.created_at),
-                    { addSuffix: true }
-                  );
-                  let message = "";
-                  if (tx.transaction_type === "Create") {
-                    message = "Ticket created";
-                  } else if (tx.transaction_type === "StatusChange") {
-                    const oldLabel = tx.old_value
-                      ? STATUS_LABELS[tx.old_value] || tx.old_value
-                      : "?";
-                    const newLabel = tx.new_value
-                      ? STATUS_LABELS[tx.new_value] || tx.new_value
-                      : "?";
-                    message = `${getInitial(tx.creator_id)} changed status from ${oldLabel} to ${newLabel}`;
-                  } else if (tx.transaction_type === "SetOwner") {
-                    message = tx.new_value
-                      ? `${getInitial(tx.creator_id)} assigned to ${tx.new_value}`
-                      : `${getInitial(tx.creator_id)} unassigned`;
-                  } else {
-                    message = tx.transaction_type;
-                  }
-                  return (
-                    <div
-                      key={tx.id}
-                      className="flex justify-center py-2"
-                    >
-                      <span className="text-xs text-muted-foreground">
-                        {message} · {txTimeAgo}
-                      </span>
-                    </div>
-                  );
-                }
-
-                const isInternal =
-                  tx.transaction_type === "Comment";
-                const txTimeAgo = formatDistanceToNow(
-                  new Date(tx.created_at),
-                  { addSuffix: true }
-                );
-
-                return (
-                  <div
-                    key={tx.id}
-                    className={cn(
-                      "flex gap-3 py-3 px-4",
-                      isAgent ? "flex-row-reverse" : ""
-                    )}
-                  >
-                    <div
-                      className="w-6 h-6 rounded-full flex items-center justify-center flex-shrink-0"
-                      style={{
-                        backgroundColor: isAgent
-                          ? getInitialColor(tx.creator_id)
-                          : "var(--muted)",
-                      }}
-                    >
-                      <span
-                        className="text-[11px] font-semibold"
-                        style={{
-                          color: isAgent
-                            ? "#f7f8f8"
-                            : "var(--muted-foreground)",
-                        }}
-                      >
-                        {getInitial(tx.creator_id)}
-                      </span>
-                    </div>
-                    <div
-                      className={cn(
-                        "max-w-[75%] rounded-lg px-3 py-2",
-                        isAgent
-                          ? "bg-primary/15 text-foreground"
-                          : isInternal
-                            ? "bg-muted border border-border text-foreground"
-                            : "bg-muted text-foreground"
-                      )}
-                    >
-                      {isInternal && (
-                        <div className="text-[10px] font-semibold text-chart-3 mb-0.5 uppercase tracking-wider">
-                          Internal note
-                        </div>
-                      )}
-                      <p className="text-sm whitespace-pre-wrap">
-                        {typeof tx.data === "object" &&
-                        tx.data !== null &&
-                        "body" in (tx.data as Record<string, unknown>)
-                          ? String(
-                              (tx.data as Record<string, unknown>).body
-                            )
-                          : tx.transaction_type}
-                      </p>
-                      <p className="text-[10px] text-muted-foreground mt-1">
-                        {txTimeAgo}
-                      </p>
-                    </div>
-                  </div>
-                );
-              })}
-            </div>
-
-            {/* Reply box */}
-            <div className="border-t border-border bg-sidebar p-3 shrink-0">
-              <div className="flex items-end gap-2">
-                <textarea
-                  value={replyText}
-                  onChange={(e) => setReplyText(e.target.value)}
-                  placeholder="Reply to this ticket..."
-                  rows={2}
-                  className="flex-1 px-3 py-2 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary resize-none transition-all duration-150"
-                />
-                <div className="flex items-center gap-1">
-                  <button
-                    className="w-8 h-8 flex items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-all duration-150"
-                    title="Attach file (coming soon)"
-                  >
-                    <PaperclipIcon className="w-4 h-4" />
-                  </button>
-                  <button
-                    disabled={!replyText.trim()}
-                    className={cn(
-                      "w-8 h-8 flex items-center justify-center rounded-lg transition-all duration-150",
-                      replyText.trim()
-                        ? "bg-primary text-primary-foreground hover:bg-primary/80"
-                        : "bg-muted text-muted-foreground cursor-not-allowed"
-                    )}
-                  >
-                    <SendIcon className="w-4 h-4" />
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Right: properties sidebar */}
-          <div className="w-72 flex-shrink-0 border-l bg-muted/30 overflow-y-auto">
-            <div className="p-4 space-y-5">
-              {/* Status */}
-              <div>
-                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                  Status
-                </h3>
-                <Select
-                  value={ticket.status}
-                  onValueChange={handleStatusSelect}
-                >
-                  <SelectTrigger className="w-full">
-                    <SelectValue>
-                      <span className="flex items-center gap-2">
-                        <span
-                          className="w-3 h-3 rounded-full flex-shrink-0"
-                          style={{
-                            backgroundColor:
-                              STATUS_COLORS[ticket.status] || STATUS_COLORS.new,
-                          }}
-                        />
-                        {STATUS_LABELS[ticket.status] || ticket.status}
-                      </span>
-                    </SelectValue>
-                  </SelectTrigger>
-                  <SelectContent>
-                    {ALL_STATUSES.map((status) => {
-                      const color = STATUS_COLORS[status];
-                      const label = STATUS_LABELS[status];
-                      return (
-                        <SelectItem
-                          key={status}
-                          value={status}
-                          disabled={status === ticket.status}
-                        >
-                          <span className="flex items-center gap-2">
-                            <span
-                              className="w-3 h-3 rounded-full flex-shrink-0"
-                              style={{ backgroundColor: color }}
-                            />
-                            {label}
-                          </span>
-                        </SelectItem>
-                      );
-                    })}
-                  </SelectContent>
-                </Select>
-
-                {/* Status preview */}
-                {previewLoading && (
-                  <div className="mt-3 p-3 rounded-lg bg-background border border-border">
-                    <p className="text-xs text-muted-foreground">
-                      Loading preview...
-                    </p>
-                  </div>
-                )}
-
-                {preview && (
-                  <div className="mt-3 p-3 rounded-lg bg-background border border-border">
-                    <p className="text-xs text-muted-foreground mb-2">
-                      Preview: changing to{" "}
-                      <span className="text-foreground font-medium">
-                        {STATUS_LABELS[pendingStatus || ""]}
-                      </span>
-                    </p>
-                    {preview.prepared_scrips.length > 0 ? (
-                      <div className="space-y-1 mb-3">
-                        {preview.prepared_scrips.map((scrip) => (
-                          <div
-                            key={scrip.scripId}
-                            className="text-xs text-foreground flex items-center gap-1.5"
-                          >
-                            <span className="w-2 h-2 rounded-full bg-chart-3 flex-shrink-0" />
-                            {scrip.scripName}
-                          </div>
-                        ))}
-                      </div>
-                    ) : (
-                      <p className="text-xs text-muted-foreground mb-3">
-                        No scrips will fire
-                      </p>
-                    )}
-                    <div className="flex items-center gap-2">
-                      <button
-                        onClick={handleApplyStatus}
-                        disabled={applyLoading}
-                        className="px-2.5 py-1 rounded-md text-xs font-medium bg-primary hover:bg-primary/80 text-primary-foreground disabled:opacity-50 transition-all duration-150"
-                      >
-                        {applyLoading
-                          ? "Applying..."
-                          : `Apply`}
-                      </button>
-                      <button
-                        onClick={handleCancelStatus}
-                        disabled={applyLoading}
-                        className="px-2.5 py-1 rounded-md text-xs font-medium text-muted-foreground hover:text-foreground transition-all duration-150"
-                      >
-                        Cancel
-                      </button>
-                    </div>
-                  </div>
-                )}
-
-                {previewError && (
-                  <div className="mt-3 p-2 rounded-lg bg-destructive/5 border border-destructive/10">
-                    <p className="text-xs text-destructive">{previewError}</p>
-                  </div>
-                )}
-
-                {scripResults && (
-                  <div className="mt-3 p-3 rounded-lg bg-background border border-border">
-                    <p className="text-xs text-muted-foreground mb-2">
-                      Scrip results:
-                    </p>
-                    <div className="space-y-1">
-                      {scripResults.map((result) => (
-                        <div
-                          key={result.scripId}
-                          className={cn(
-                            "text-xs flex items-center gap-1.5",
-                            result.success
-                              ? "text-[#22c55e]"
-                              : "text-destructive"
-                          )}
-                        >
-                          <span
-                            className={cn(
-                              "w-2 h-2 rounded-full flex-shrink-0",
-                              result.success
-                                ? "bg-[#22c55e]"
-                                : "bg-destructive"
-                            )}
-                          />
-                          {result.message}
-                        </div>
-                      ))}
-                    </div>
-                    <button
-                      onClick={() => setScripResults(null)}
-                      className="mt-2 text-xs text-muted-foreground hover:text-foreground transition-all duration-150"
-                    >
-                      Dismiss
-                    </button>
-                  </div>
-                )}
-              </div>
-
-              <Separator />
-
-              {/* Assignment */}
-              <div>
-                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                  Assignment
-                </h3>
-                <div className="mb-3">
-                  <label className="block text-[11px] font-medium text-muted-foreground mb-1">
-                    Assignee
-                  </label>
-                  {ticket.owner_id ? (
-                    <div className="flex items-center gap-2 px-3 py-2 rounded-lg border border-border bg-background">
-                      <div
-                        className="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
-                        style={{
-                          backgroundColor: getInitialColor(ticket.owner_id),
-                        }}
-                      >
-                        <span className="text-[10px] font-semibold text-primary-foreground">
-                          {getInitial(ticket.owner_id)}
-                        </span>
-                      </div>
-                      <span className="text-sm text-foreground">
-                        {ticket.owner_id}
-                      </span>
-                    </div>
-                  ) : (
-                    <div className="px-3 py-2 rounded-lg border border-border bg-background text-sm text-muted-foreground">
-                      Unassigned
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              <Separator />
-
-              {/* Details */}
-              <div>
-                <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                  Details
-                </h3>
-                <div className="space-y-1.5 text-xs">
-                  <div className="flex justify-between">
-                    <span className="text-muted-foreground">Queue</span>
-                    <span className="text-foreground font-medium">
-                      {queue?.name || ticket.queue_id}
-                    </span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-muted-foreground">Created</span>
-                    <span className="text-foreground tabular-nums">
-                      {formatDistanceToNow(new Date(ticket.created_at), {
-                        addSuffix: true,
-                      })}
-                    </span>
-                  </div>
-                  <div className="flex justify-between">
-                    <span className="text-muted-foreground">Updated</span>
-                    <span className="text-foreground tabular-nums">
-                      {formatDistanceToNow(new Date(ticket.updated_at), {
-                        addSuffix: true,
-                      })}
-                    </span>
-                  </div>
-                  {ticket.resolved_at && (
-                    <div className="flex justify-between">
-                      <span className="text-muted-foreground">Resolved</span>
-                      <span className="text-foreground tabular-nums">
-                        {formatDistanceToNow(new Date(ticket.resolved_at), {
-                          addSuffix: true,
-                        })}
-                      </span>
-                    </div>
-                  )}
-                </div>
-              </div>
-
-              {/* Custom fields */}
-              {ticket.custom_fields && ticket.custom_fields.length > 0 && (
-                <>
-                  <Separator />
-                  <div>
-                    <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">
-                      Custom fields
-                    </h3>
-                    <div className="space-y-1.5">
-                      {ticket.custom_fields.map((cf) => (
-                        <div
-                          key={cf.id}
-                          className="flex justify-between items-center px-3 py-1.5 rounded-lg border border-border bg-background"
-                        >
-                          <span className="text-xs text-muted-foreground">
-                            {cf.custom_field?.name || cf.custom_field_id}
-                          </span>
-                          <span className="text-xs text-foreground font-medium">
-                            {cf.value}
-                          </span>
-                        </div>
-                      ))}
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      )}
+      <div className="w-14 h-3 bg-muted rounded animate-pulse mt-0.5" />
     </div>
   );
 }
@@ -717,9 +112,6 @@ function TicketListPageContent() {
   const [submitting, setSubmitting] = useState(false);
   const [createError, setCreateError] = useState<string | null>(null);
 
-  // Selected ticket
-  const [selectedTicketId, setSelectedTicketId] = useState<string | null>(null);
-
   const initialQueueId = searchParams.get("queue") || "";
 
   const fetchData = useCallback(async () => {
@@ -799,135 +191,101 @@ function TicketListPageContent() {
       setNewSubject("");
       setNewQueueId("");
       setNewDescription("");
-      setSelectedTicketId(data.id);
-      // Refresh the list to show the new ticket
-      fetchData();
+      router.push(`/tickets/${data.id}`);
     }
   };
 
-  const handleSelectTicket = (ticketId: string) => {
-    setSelectedTicketId(ticketId);
-  };
-
-  const handleDeselectTicket = () => {
-    setSelectedTicketId(null);
-  };
-
   return (
-    <div className="flex h-full">
-      {/* Ticket list column */}
-      <div
-        className={cn(
-          "flex flex-col h-full overflow-hidden transition-[width] duration-300 ease-out",
-          selectedTicketId
-            ? "w-full flex-shrink-0 border-r border-border max-lg:hidden lg:w-[40%] lg:min-w-[360px]"
-            : "flex-1 min-w-0"
-        )}
-      >
-        {/* Top bar */}
-        <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
-          <div className="relative flex-1">
-            <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-            <input
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="Search tickets..."
-              className="w-full h-8 pl-9 pr-3 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
-            />
-          </div>
-          <Button
-            onClick={() => setDialogOpen(true)}
-            className="h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
+    <div className="flex flex-col h-full">
+      {/* Top bar */}
+      <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
+        <div className="relative flex-1">
+          <SearchIcon className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          <input
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder="Search tickets..."
+            className="w-full h-8 pl-9 pr-3 rounded-lg bg-background border border-border text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all duration-150"
+          />
+        </div>
+        <Button
+          onClick={() => setDialogOpen(true)}
+          className="h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
+        >
+          <PlusIcon className="w-4 h-4 mr-1.5" />
+          New ticket
+        </Button>
+      </div>
+
+      {/* Filter chips */}
+      <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border shrink-0">
+        {FILTERS.map((filter) => (
+          <button
+            key={filter.key ?? "all"}
+            onClick={() => setActiveFilter(filter.key)}
+            className={cn(
+              "px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
+              activeFilter === filter.key
+                ? "bg-primary text-primary-foreground"
+                : "text-muted-foreground hover:text-foreground hover:bg-accent"
+            )}
           >
-            <PlusIcon className="w-4 h-4 mr-1.5" />
-            New ticket
-          </Button>
-        </div>
+            {filter.label}
+          </button>
+        ))}
+      </div>
 
-        {/* Filter chips */}
-        <div className="flex items-center gap-1.5 px-4 py-2 border-b border-border shrink-0">
-          {FILTERS.map((filter) => (
+      {/* Ticket list */}
+      <div className="flex-1 overflow-y-auto">
+        {error && (
+          <div className="px-4 py-3 text-sm text-destructive bg-destructive/5 border-b border-destructive/10">
+            {error}{" "}
             <button
-              key={filter.key ?? "all"}
-              onClick={() => setActiveFilter(filter.key)}
-              className={cn(
-                "px-2.5 py-1 rounded-md text-xs font-medium transition-all duration-150",
-                activeFilter === filter.key
-                  ? "bg-primary text-primary-foreground"
-                  : "text-muted-foreground hover:text-foreground hover:bg-accent"
-              )}
+              onClick={fetchData}
+              className="underline hover:text-destructive/80"
             >
-              {filter.label}
+              Retry
             </button>
-          ))}
-        </div>
+          </div>
+        )}
 
-        {/* Ticket list */}
-        <div className="flex-1 overflow-y-auto">
-          {error && (
-            <div className="px-4 py-3 text-sm text-destructive bg-destructive/5 border-b border-destructive/10">
-              {error}{" "}
-              <button
-                onClick={fetchData}
-                className="underline hover:text-destructive/80"
+        {loading &&
+          Array.from({ length: 12 }).map((_, i) => <SkeletonRow key={i} />)}
+
+        {!loading &&
+          !error &&
+          tickets.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-20 px-4">
+              <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
+                <SearchIcon className="w-5 h-5 text-muted-foreground" />
+              </div>
+              <p className="text-sm text-foreground font-medium">
+                No tickets match your filters
+              </p>
+              <p className="text-xs text-muted-foreground mt-1">
+                Try adjusting your search or filter criteria
+              </p>
+              <Button
+                onClick={() => setDialogOpen(true)}
+                className="mt-4 h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
               >
-                Retry
-              </button>
+                <PlusIcon className="w-4 h-4 mr-1.5" />
+                Create a ticket
+              </Button>
             </div>
           )}
 
-          {loading &&
-            Array.from({ length: 12 }).map((_, i) => <SkeletonRow key={i} />)}
-
-          {!loading &&
-            !error &&
-            tickets.length === 0 && (
-              <div className="flex flex-col items-center justify-center py-20 px-4">
-                <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-4">
-                  <SearchIcon className="w-5 h-5 text-muted-foreground" />
-                </div>
-                <p className="text-sm text-foreground font-medium">
-                  No tickets match your filters
-                </p>
-                <p className="text-xs text-muted-foreground mt-1">
-                  Try adjusting your search or filter criteria
-                </p>
-                <Button
-                  onClick={() => setDialogOpen(true)}
-                  className="mt-4 h-8 px-3 rounded-lg text-sm font-medium bg-gradient-to-r from-primary to-primary/80 hover:from-primary/90 hover:to-primary/70 text-primary-foreground border-0 transition-all duration-150"
-                >
-                  <PlusIcon className="w-4 h-4 mr-1.5" />
-                  Create a ticket
-                </Button>
-              </div>
-            )}
-
-          {!loading &&
-            !error &&
-            tickets.map((ticket) => (
-              <TicketRow
-                key={ticket.id}
-                ticket={ticket}
-                selected={ticket.id === selectedTicketId}
-                onClick={() => handleSelectTicket(ticket.id)}
-              />
-            ))}
-        </div>
+        {!loading &&
+          !error &&
+          tickets.map((ticket) => (
+            <TicketRow
+              key={ticket.id}
+              ticket={ticket}
+              onClick={() => router.push(`/tickets/${ticket.id}`)}
+            />
+          ))}
       </div>
 
-      {/* Ticket detail column */}
-      {selectedTicketId && (
-        <div
-          className="flex-1 min-w-0 lg:min-w-[480px] overflow-hidden"
-          style={{ animation: "slide-in-right 300ms ease-out" }}
-        >
-          <TicketDetailPanel
-            ticketId={selectedTicketId}
-            onBack={handleDeselectTicket}
-          />
-        </div>
-      )}
-
       {/* Create ticket dialog */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
         <DialogContent