diff --git a/src/components/ArbitratorPicker.tsx b/src/components/ArbitratorPicker.tsx
new file mode 100644
index 0000000..1b47a95
--- /dev/null
+++ b/src/components/ArbitratorPicker.tsx
@@ -0,0 +1,101 @@
+"use client";
+
+import { truncateAddress } from "@stellar-split/sdk";
+
+interface Arbitrator {
+  address: string;
+  name: string;
+  resolvedDisputeCount: number | null;
+}
+
+interface Props {
+  /** List of arbitrators to display */
+  arbitrators: Arbitrator[];
+  /** Currently selected arbitrator address */
+  selectedAddress: string;
+  /** Callback when an arbitrator is selected */
+  onSelect: (address: string) => void;
+  /** Whether the component is disabled (e.g., dispute resolved) */
+  disabled?: boolean;
+  /** Heading text (defaults to "Assigned Arbitrators") */
+  heading?: string;
+  /** Show vote status badges (default: false) */
+  showVoteStatus?: boolean;
+  /** List of arbitrators who have voted (used when showVoteStatus is true) */
+  votedArbitrators?: string[];
+}
+
+/**
+ * ArbitratorPicker — displays a selectable list of arbitrators.
+ * Extracted from DisputePanel for reusability and testability.
+ * Can show vote status badges and is fully typed.
+ */
+export default function ArbitratorPicker({
+  arbitrators,
+  selectedAddress,
+  onSelect,
+  disabled = false,
+  heading = "Assigned Arbitrators",
+  showVoteStatus = false,
+  votedArbitrators = [],
+}: Props) {
+  return (
+    <div>
+      <h3 className="text-sm font-semibold text-white mb-3">{heading}</h3>
+      <div className="space-y-2">
+        {arbitrators.length === 0 ? (
+          <p className="text-sm text-gray-500 bg-gray-900/40 border border-gray-700 rounded-lg p-4 text-center">
+            No arbitrators assigned
+          </p>
+        ) : (
+          arbitrators.map((arb) => {
+            const isSelected = arb.address === selectedAddress;
+            const hasVoted = votedArbitrators.includes(arb.address);
+
+            return (
+              <button
+                key={arb.address}
+                type="button"
+                onClick={() => !disabled && onSelect(arb.address)}
+                disabled={disabled}
+                className={`w-full p-3 rounded-lg border-2 transition-colors text-left disabled:cursor-not-allowed disabled:opacity-60 ${
+                  isSelected
+                    ? "border-indigo-500 bg-indigo-500/10"
+                    : "border-gray-700 bg-gray-800 hover:border-gray-600"
+                }`}
+              >
+                <div className="flex items-start justify-between gap-2">
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-white truncate">
+                      {arb.name}
+                    </p>
+                    <p className="text-xs text-gray-400 font-mono truncate mt-0.5">
+                      {truncateAddress(arb.address)}
+                    </p>
+                    {arb.resolvedDisputeCount !== null && (
+                      <p className="text-xs text-gray-500 mt-1">
+                        {arb.resolvedDisputeCount} resolved
+                      </p>
+                    )}
+                  </div>
+
+                  {showVoteStatus && (
+                    <span
+                      className={`text-xs px-2 py-1 rounded-full font-medium shrink-0 ${
+                        hasVoted
+                          ? "bg-green-500/20 text-green-400"
+                          : "bg-gray-700/50 text-gray-500"
+                      }`}
+                    >
+                      {hasVoted ? "✓ Voted" : "Pending"}
+                    </span>
+                  )}
+                </div>
+              </button>
+            );
+          })
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DisputePanel.tsx b/src/components/DisputePanel.tsx
index 338c032..a0b4626 100644
--- a/src/components/DisputePanel.tsx
+++ b/src/components/DisputePanel.tsx
@@ -5,6 +5,7 @@ import type { Invoice } from "@stellar-split/sdk";
 import { truncateAddress } from "@stellar-split/sdk";
 import { uploadToIpfs } from "@/lib/ipfs";
 import { getSplitClient } from "@/lib/stellar";
+import ArbitratorPicker from "@/components/ArbitratorPicker";
 
 interface DisputeMetadata {
   reason: string;
@@ -281,31 +282,18 @@ export default function DisputePanel({ invoice, publicKey, onRefresh }: Props) {
         </div>
 
         {/* Arbitrators List */}
-        <div>
-          <h3 className="text-sm font-semibold text-white mb-3">Assigned Arbitrators</h3>
-          <div className="space-y-2">
-            {dispute.arbitrators.map((arb, idx) => {
-              const voted = dispute.votedArbitrators.includes(arb);
-              return (
-                <div
-                  key={idx}
-                  className="bg-gray-900/60 border border-gray-700 rounded-lg p-3 flex items-center justify-between"
-                >
-                  <span className="text-sm font-mono text-gray-200">{truncateAddress(arb)}</span>
-                  <span
-                    className={`text-xs px-2 py-1 rounded-full font-medium ${
-                      voted
-                        ? "bg-green-500/20 text-green-400"
-                        : "bg-gray-700/50 text-gray-500"
-                    }`}
-                  >
-                    {voted ? "✓ Voted" : "Pending"}
-                  </span>
-                </div>
-              );
-            })}
-          </div>
-        </div>
+        <ArbitratorPicker
+          arbitrators={dispute.arbitrators.map((address) => ({
+            address,
+            name: truncateAddress(address),
+            resolvedDisputeCount: null,
+          }))}
+          selectedAddress=""
+          onSelect={() => {}}
+          disabled={true}
+          showVoteStatus={true}
+          votedArbitrators={dispute.votedArbitrators}
+        />
       </section>
 
       {/* Evidence Upload Modal */}
diff --git a/src/components/DisputeWizard.tsx b/src/components/DisputeWizard.tsx
index 2e4d449..7057832 100644
--- a/src/components/DisputeWizard.tsx
+++ b/src/components/DisputeWizard.tsx
@@ -11,12 +11,59 @@ const DISPUTE_REASONS = [
   "Other",
 ];
 
+const TOTAL_STEPS = 4;
+
 interface Props {
   invoiceId: string;
   onSubmit: (reason: string, description: string, arbitratorAddress?: string) => Promise<void>;
   onClose: () => void;
 }
 
+/**
+ * StepIndicator — displays dot-based progress through the wizard steps.
+ * Completed steps are filled, the current step is highlighted, upcoming steps are muted.
+ */
+function StepIndicator({ current, total }: { current: number; total: number }) {
+  return (
+    <nav
+      aria-label={`Step ${current} of ${total}`}
+      className="flex items-center justify-center gap-2"
+    >
+      {Array.from({ length: total }, (_, i) => {
+        const stepNumber = i + 1;
+        const isCompleted = stepNumber < current;
+        const isCurrent = stepNumber === current;
+
+        return (
+          <div key={stepNumber} className="flex items-center gap-2">
+            <div
+              aria-current={isCurrent ? "step" : undefined}
+              className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
+                isCompleted
+                  ? "bg-indigo-500"
+                  : isCurrent
+                  ? "bg-indigo-400 ring-2 ring-indigo-400/40 scale-125"
+                  : "bg-gray-600"
+              }`}
+            />
+            {stepNumber < total && (
+              <div
+                className={`h-px w-6 transition-colors duration-300 ${
+                  isCompleted ? "bg-indigo-500" : "bg-gray-700"
+                }`}
+              />
+            )}
+          </div>
+        );
+      })}
+    </nav>
+  );
+}
+
+/**
+ * DisputeWizard — multi-step modal form for filing an on-chain dispute.
+ * Guides the user through: reason → description → arbitrator → confirmation.
+ */
 export default function DisputeWizard({ invoiceId, onSubmit, onClose }: Props) {
   const [step, setStep] = useState(1);
   const [reason, setReason] = useState("");
@@ -78,10 +125,18 @@ export default function DisputeWizard({ invoiceId, onSubmit, onClose }: Props) {
           </button>
         </div>
 
+        {/* Step indicator */}
+        <div className="flex flex-col items-center gap-1.5">
+          <StepIndicator current={step} total={TOTAL_STEPS} />
+          <p className="text-xs text-gray-500 tabular-nums">
+            Step {step} of {TOTAL_STEPS}
+          </p>
+        </div>
+
         {/* Step 1: Reason Selection */}
         {step === 1 && (
           <div className="space-y-3">
-            <p className="text-sm text-gray-400">Step 1 of 4: Select reason</p>
+            <p className="text-sm text-gray-400">Select reason</p>
             {DISPUTE_REASONS.map((r) => (
               <button
                 key={r}
@@ -102,7 +157,7 @@ export default function DisputeWizard({ invoiceId, onSubmit, onClose }: Props) {
         {/* Step 2: Description */}
         {step === 2 && (
           <div className="space-y-3">
-            <p className="text-sm text-gray-400">Step 2 of 4: Describe the issue</p>
+            <p className="text-sm text-gray-400">Describe the issue</p>
             <textarea
               value={description}
               onChange={(e) => setDescription(e.target.value)}
@@ -119,7 +174,7 @@ export default function DisputeWizard({ invoiceId, onSubmit, onClose }: Props) {
         {/* Step 3: Arbitrator Selection */}
         {step === 3 && (
           <div className="space-y-3">
-            <p className="text-sm text-gray-400">Step 3 of 4: Select arbitrator (optional)</p>
+            <p className="text-sm text-gray-400">Select arbitrator (optional)</p>
 
             {registryEmpty ? (
               <div className="space-y-3">
@@ -198,7 +253,7 @@ export default function DisputeWizard({ invoiceId, onSubmit, onClose }: Props) {
         {/* Step 4: Confirmation */}
         {step === 4 && (
           <div className="space-y-4">
-            <p className="text-sm text-gray-400">Step 4 of 4: Confirm dispute</p>
+            <p className="text-sm text-gray-400">Confirm dispute</p>
             <div className="bg-gray-800 rounded-lg p-4 space-y-2">
               <div>
                 <p className="text-xs text-gray-500">Reason</p>
diff --git a/src/components/InvoiceChat.tsx b/src/components/InvoiceChat.tsx
index 9e4e6c1..8f17078 100644
--- a/src/components/InvoiceChat.tsx
+++ b/src/components/InvoiceChat.tsx
@@ -20,6 +20,7 @@ interface Props {
 }
 
 const STORAGE_PREFIX = "invoice-chat-";
+const SCROLL_THRESHOLD = 100;
 
 function getStorageKey(invoiceId: string) {
   return `${STORAGE_PREFIX}${invoiceId}`;
@@ -65,6 +66,11 @@ function formatDate(timestamp: number) {
   }).format(new Date(timestamp));
 }
 
+/**
+ * InvoiceChat — real-time-style chat for invoice participants.
+ * Auto-scrolls to the latest message when the user is near the bottom;
+ * shows a "new message" indicator when the user has scrolled up.
+ */
 export default function InvoiceChat({
   invoiceId,
   creator,
@@ -74,7 +80,23 @@ export default function InvoiceChat({
   const [messages, setMessages] = useState<InvoiceChatMessage[]>([]);
   const [text, setText] = useState("");
   const [isAllowed, setIsAllowed] = useState(false);
+  const [showNewMessageIndicator, setShowNewMessageIndicator] = useState(false);
+
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
+  const listRef = useRef<HTMLUListElement | null>(null);
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+
+  /** Returns true when the scroll container is within SCROLL_THRESHOLD px of the bottom. */
+  const isNearBottom = (): boolean => {
+    const el = listRef.current;
+    if (!el) return true;
+    return el.scrollHeight - el.scrollTop - el.clientHeight <= SCROLL_THRESHOLD;
+  };
+
+  const scrollToBottom = (behavior: ScrollBehavior = "smooth") => {
+    bottomRef.current?.scrollIntoView({ behavior, block: "end" });
+    setShowNewMessageIndicator(false);
+  };
 
   useEffect(() => {
     setMessages(loadMessages(invoiceId));
@@ -93,7 +115,12 @@ export default function InvoiceChat({
   useEffect(() => {
     const handleStorage = (event: StorageEvent) => {
       if (event.key === getStorageKey(invoiceId)) {
-        setMessages(loadMessages(invoiceId));
+        if (isNearBottom()) {
+          setMessages(loadMessages(invoiceId));
+        } else {
+          setMessages(loadMessages(invoiceId));
+          setShowNewMessageIndicator(true);
+        }
       }
     };
 
@@ -101,6 +128,22 @@ export default function InvoiceChat({
     return () => window.removeEventListener("storage", handleStorage);
   }, [invoiceId]);
 
+  // Scroll to bottom (instant) on first load.
+  useEffect(() => {
+    scrollToBottom("instant" as ScrollBehavior);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [invoiceId]);
+
+  // When messages change, auto-scroll only if near bottom.
+  useEffect(() => {
+    if (isNearBottom()) {
+      scrollToBottom("smooth");
+    } else {
+      setShowNewMessageIndicator(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [messages]);
+
   const sortedMessages = useMemo(
     () => [...messages].sort((a, b) => a.timestamp - b.timestamp),
     [messages]
@@ -141,24 +184,47 @@ export default function InvoiceChat({
             No messages yet. Start the conversation with the invoice creator or recipients.
           </div>
         ) : (
-          <ul className="space-y-3">
-            {sortedMessages.map((message, index) => (
-              <li
-                key={`${message.timestamp}-${index}`}
-                className="rounded-lg border border-gray-800 bg-gray-900 p-4 text-sm"
+          <div className="relative">
+            <ul
+              ref={listRef}
+              className="space-y-3 max-h-96 overflow-y-auto pr-1"
+              onScroll={() => {
+                if (isNearBottom()) setShowNewMessageIndicator(false);
+              }}
+            >
+              {sortedMessages.map((message, index) => (
+                <li
+                  key={`${message.timestamp}-${index}`}
+                  className="rounded-lg border border-gray-800 bg-gray-900 p-4 text-sm"
+                >
+                  <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
+                    <span className="font-mono text-xs text-gray-300">
+                      {truncateAddress(message.sender)}
+                    </span>
+                    <span className="text-xs text-gray-500">
+                      {formatDate(message.timestamp)}
+                    </span>
+                  </div>
+                  <p className="whitespace-pre-wrap break-words text-gray-200">{message.text}</p>
+                </li>
+              ))}
+              {/* Sentinel element used as scroll target */}
+              <div ref={bottomRef} aria-hidden="true" />
+            </ul>
+
+            {/* New message indicator */}
+            {showNewMessageIndicator && (
+              <button
+                type="button"
+                onClick={() => scrollToBottom("smooth")}
+                className="absolute bottom-2 left-1/2 -translate-x-1/2 flex items-center gap-1.5 rounded-full bg-indigo-600 px-4 py-1.5 text-xs font-semibold text-white shadow-lg hover:bg-indigo-500 transition-colors"
+                aria-live="polite"
+                aria-label="New message received — click to scroll to bottom"
               >
-                <div className="flex flex-wrap items-center justify-between gap-2 mb-2">
-                  <span className="font-mono text-xs text-gray-300">
-                    {truncateAddress(message.sender)}
-                  </span>
-                  <span className="text-xs text-gray-500">
-                    {formatDate(message.timestamp)}
-                  </span>
-                </div>
-                <p className="whitespace-pre-wrap break-words text-gray-200">{message.text}</p>
-              </li>
-            ))}
-          </ul>
+                ↓ New message
+              </button>
+            )}
+          </div>
         )}
 
         <form onSubmit={handleSubmit} className="space-y-3">
diff --git a/src/components/VotingPanel.tsx b/src/components/VotingPanel.tsx
index e7e5cf9..7a2a4b4 100644
--- a/src/components/VotingPanel.tsx
+++ b/src/components/VotingPanel.tsx
@@ -13,16 +13,21 @@ interface Props {
 
 /**
  * VotingPanel — shown to payers on Pending invoices.
- * Displays current extension vote count, a progress bar toward majority,
- * and a "Vote to Extend" button (disabled after voting, tracked in localStorage).
+ * Displays current extension vote count per option with a vote count badge
+ * and a percentage fill bar, updating immediately after the user casts their vote.
  */
 export default function VotingPanel({ invoice, publicKey }: Props) {
   const isPayer = invoice.payments.some((p) => p.payer === publicKey);
 
   const totalPayers = new Set(invoice.payments.map((p) => p.payer)).size;
   const majority = Math.ceil((totalPayers + 1) / 2);
-  const votes = invoice.extensionVotes ?? 0;
-  const pct = totalPayers > 0 ? Math.min(100, Math.round((votes / majority) * 100)) : 0;
+  const [votesFor, setVotesFor] = useState(invoice.extensionVotes ?? 0);
+
+  // Derived values
+  const votesAgainst = Math.max(0, totalPayers - votesFor);
+  const totalVotes = votesFor + votesAgainst;
+  const forPct = totalVotes > 0 ? Math.round((votesFor / totalVotes) * 100) : 0;
+  const againstPct = totalVotes > 0 ? Math.round((votesAgainst / totalVotes) * 100) : 0;
 
   const [voted, setVoted] = useState(
     () => typeof window !== "undefined" && localStorage.getItem(STORAGE_KEY(invoice.id)) === "1"
@@ -39,6 +44,7 @@ export default function VotingPanel({ invoice, publicKey }: Props) {
       await (splitClient as any).voteExtendDeadline(invoice.id);
       localStorage.setItem(STORAGE_KEY(invoice.id), "1");
       setVoted(true);
+      setVotesFor((prev) => prev + 1);
     } catch (err) {
       setError(String(err));
     } finally {
@@ -55,30 +61,70 @@ export default function VotingPanel({ invoice, publicKey }: Props) {
         Vote to Extend Deadline
       </h2>
 
-      <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-gray-300">
-        <span>
-          <span className="font-semibold text-white">{votes}</span> vote{votes !== 1 ? "s" : ""}
-        </span>
-        <span>
-          <span className="font-semibold text-white">{majority}</span> needed for majority
-        </span>
-      </div>
+      {/* Per-option vote count + percentage fill bars */}
+      <div className="flex flex-col gap-2">
+        {/* Extend (For) */}
+        <div>
+          <div className="flex items-center justify-between text-sm mb-1">
+            <span className="text-indigo-300 font-medium">Extend deadline</span>
+            <div className="flex items-center gap-2">
+              <span className="text-xs bg-indigo-500/20 text-indigo-300 font-semibold px-2 py-0.5 rounded-full">
+                {votesFor} vote{votesFor !== 1 ? "s" : ""}
+              </span>
+              <span className="text-xs text-gray-400 w-10 text-right tabular-nums">
+                {forPct}%
+              </span>
+            </div>
+          </div>
+          <div
+            role="progressbar"
+            aria-valuenow={votesFor}
+            aria-valuemin={0}
+            aria-valuemax={totalPayers}
+            aria-label={`${votesFor} vote${votesFor !== 1 ? "s" : ""} to extend (${forPct}%)`}
+            className="w-full h-2 bg-gray-700 rounded-full overflow-hidden"
+          >
+            <div
+              className="h-full bg-indigo-500 rounded-full transition-all duration-300"
+              style={{ width: `${forPct}%` }}
+            />
+          </div>
+        </div>
 
-      {/* Progress bar */}
-      <div
-        role="progressbar"
-        aria-valuenow={votes}
-        aria-valuemin={0}
-        aria-valuemax={majority}
-        aria-label={`${votes} of ${majority} votes`}
-        className="w-full h-2 bg-gray-700 rounded-full overflow-hidden"
-      >
-        <div
-          className="h-full bg-indigo-500 rounded-full transition-all duration-300"
-          style={{ width: `${pct}%` }}
-        />
+        {/* Keep deadline (Against) */}
+        <div>
+          <div className="flex items-center justify-between text-sm mb-1">
+            <span className="text-gray-400 font-medium">Keep deadline</span>
+            <div className="flex items-center gap-2">
+              <span className="text-xs bg-gray-700/60 text-gray-400 font-semibold px-2 py-0.5 rounded-full">
+                {votesAgainst} vote{votesAgainst !== 1 ? "s" : ""}
+              </span>
+              <span className="text-xs text-gray-400 w-10 text-right tabular-nums">
+                {againstPct}%
+              </span>
+            </div>
+          </div>
+          <div
+            role="progressbar"
+            aria-valuenow={votesAgainst}
+            aria-valuemin={0}
+            aria-valuemax={totalPayers}
+            aria-label={`${votesAgainst} vote${votesAgainst !== 1 ? "s" : ""} to keep deadline (${againstPct}%)`}
+            className="w-full h-2 bg-gray-700 rounded-full overflow-hidden"
+          >
+            <div
+              className="h-full bg-gray-500 rounded-full transition-all duration-300"
+              style={{ width: `${againstPct}%` }}
+            />
+          </div>
+        </div>
       </div>
 
+      <p className="text-xs text-gray-500">
+        <span className="font-semibold text-white">{majority}</span> votes needed for a majority
+        ({totalVotes} of {totalPayers} payer{totalPayers !== 1 ? "s" : ""} voted)
+      </p>
+
       {error && <p role="alert" className="text-red-400 text-sm">{error}</p>}
 
       <button