diff --git a/apps/frontend/app/escrow/[id]/page.tsx b/apps/frontend/app/escrow/[id]/page.tsx
index e3c2f9a..1e6a107 100644
--- a/apps/frontend/app/escrow/[id]/page.tsx
+++ b/apps/frontend/app/escrow/[id]/page.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import Link from 'next/link';
 import { useEscrow } from '@/hooks/useEscrow';
@@ -9,41 +9,43 @@ import EscrowHeader from '@/components/escrow/detail/EscrowHeader';
 import PartiesSection from '@/components/escrow/detail/PartiesSection';
 import TermsSection from '@/components/escrow/detail/TermsSection';
 import TimelineSection from '@/components/escrow/detail/TimelineSection';
-import TransactionHistory from '@/components/escrow/detail/TransactionHistory';
 import ActivityFeed from '@/components/common/ActivityFeed';
-import { IEscrowExtended } from '@/types/escrow';
+import ConditionsList from '@/component/escrow/ConditionsList';
+import { IParty } from '@/types/escrow';
 import FileDisputeModal from '@/components/escrow/detail/file-dispute-modal';
-import { Button } from '@/components/ui/button';
 import { EscrowDetailSkeleton } from '@/components/ui/EscrowDetailSkeleton';
 
 const EscrowDetailPage = () => {
   const { id } = useParams();
 
-  const { escrow, error, loading } = useEscrow(id as string);
-  const { connected, publicKey, connect } = useWallet(); // Assuming wallet hook exists
+  const { escrow, error, loading, refetch } = useEscrow(id as string);
+  const { connected, publicKey, connect } = useWallet();
   const [userRole, setUserRole] = useState<'creator' | 'counterparty' | null>(null);
+  const [currentParty, setCurrentParty] = useState<IParty | null>(null);
   const [disputeOpen, setDisputeOpen] = useState(false);
 
   useEffect(() => {
     if (escrow && publicKey) {
       if (escrow.creatorId === publicKey) {
         setUserRole('creator');
-      } else if (escrow.parties?.some((party: any) => party.userId === publicKey)) {
+        setCurrentParty(null);
+      } else if (escrow.parties?.some((party) => party.userId === publicKey)) {
         setUserRole('counterparty');
+        setCurrentParty(
+          escrow.parties.find((party) => party.userId === publicKey) ?? null,
+        );
+      } else {
+        setUserRole(null);
+        setCurrentParty(null);
       }
+    } else {
+      setUserRole(null);
+      setCurrentParty(null);
     }
   }, [escrow, publicKey]);
 
   if (loading) {
-    return (
-      // <div className="min-h-screen flex items-center justify-center bg-gray-50">
-      //   <div className="text-center">
-      //     <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto"></div>
-      //     <p className="mt-4 text-lg text-gray-600">Loading escrow details...</p>
-      //   </div>
-      // </div>
-      <EscrowDetailSkeleton />
-    );
+    return <EscrowDetailSkeleton />;
   }
 
   if (error) {
@@ -83,7 +85,6 @@ const EscrowDetailPage = () => {
   return (
     <div className="min-h-screen bg-gray-50 py-8">
       <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
-        {/* Header Section */}
         <EscrowHeader
           escrow={escrow}
           userRole={userRole}
@@ -94,18 +95,26 @@ const EscrowDetailPage = () => {
 
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mt-8">
           <div className="lg:col-span-2 space-y-8">
-            {/* Parties Section */}
-            <PartiesSection escrow={escrow} userRole={userRole} />
+            <PartiesSection
+              escrow={escrow}
+              currentParty={currentParty}
+              onEscrowUpdated={refetch}
+            />
+
+            <ConditionsList
+              escrowId={escrow.id}
+              escrowStatus={escrow.status}
+              conditions={escrow.conditions}
+              currentParty={currentParty}
+              onConditionsUpdated={refetch}
+            />
 
-            {/* Timeline Section */}
             <TimelineSection escrow={escrow} />
 
-            {/* Activity Feed */}
             <ActivityFeed escrowId={id as string} />
           </div>
 
           <div className="lg:col-span-1">
-            {/* Terms Section */}
             <TermsSection escrow={escrow} userRole={userRole} />
           </div>
         </div>
@@ -120,4 +129,4 @@ const EscrowDetailPage = () => {
   );
 };
 
-export default EscrowDetailPage;
\ No newline at end of file
+export default EscrowDetailPage;
diff --git a/apps/frontend/component/escrow/ConditionItem.tsx b/apps/frontend/component/escrow/ConditionItem.tsx
index b87e5f6..4fd7b64 100644
--- a/apps/frontend/component/escrow/ConditionItem.tsx
+++ b/apps/frontend/component/escrow/ConditionItem.tsx
@@ -1,40 +1,249 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Clock3,
+  FileText,
+  Loader2,
+  ShieldAlert,
+} from 'lucide-react';
+import { confirmCondition } from '@/lib/escrow-api';
+import { ICondition, IParty } from '@/types/escrow';
 import FulfillConditionModal from './FulfillConditionModal';
-
-interface Condition {
-  id: string;
-  description: string;
-  fulfilled: boolean;
-  confirmed: boolean;
-}
+import { Button } from '@/components/ui/button';
 
 interface Props {
-  condition: Condition;
-  role: 'seller' | 'buyer';
+  escrowId: string;
+  condition: ICondition;
+  currentParty: IParty | null;
+  escrowStatus: string;
+  onUpdated: () => Promise<void>;
+  isLastOutstandingCondition: boolean;
 }
 
-const ConditionItem: React.FC<Props> = ({ condition, role }) => {
+const isLikelyUrl = (value?: string | null) =>
+  Boolean(value && /^https?:\/\//i.test(value));
+
+const formatDateTime = (value?: string | null) =>
+  value
+    ? new Date(value).toLocaleString(undefined, {
+        dateStyle: 'medium',
+        timeStyle: 'short',
+      })
+    : null;
+
+const ConditionItem: React.FC<Props> = ({
+  escrowId,
+  condition,
+  currentParty,
+  escrowStatus,
+  onUpdated,
+  isLastOutstandingCondition,
+}) => {
   const [showModal, setShowModal] = useState(false);
+  const [isConfirming, setIsConfirming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [infoMessage, setInfoMessage] = useState<string | null>(null);
+
+  const partyRole = currentParty?.role?.toLowerCase();
+  const partyStatus = currentParty?.status?.toLowerCase();
+  const isEscrowActive = escrowStatus.toLowerCase() === 'active';
+  const isFulfilled = Boolean(condition.isFulfilled);
+  const isConfirmed = Boolean(condition.isMet);
+
+  const canFulfill =
+    partyRole === 'seller' && partyStatus === 'accepted' && !isFulfilled && isEscrowActive;
+  const canConfirm =
+    partyRole === 'buyer' && partyStatus === 'accepted' && isFulfilled && !isConfirmed && isEscrowActive;
+
+  const statusConfig = useMemo(() => {
+    if (isConfirmed) {
+      return {
+        label: 'Confirmed',
+        className: 'bg-emerald-100 text-emerald-800',
+        icon: <CheckCircle2 className="h-4 w-4" />,
+      };
+    }
+
+    if (isFulfilled) {
+      return {
+        label: 'Awaiting buyer confirmation',
+        className: 'bg-amber-100 text-amber-800',
+        icon: <Clock3 className="h-4 w-4" />,
+      };
+    }
+
+    return {
+      label: 'Pending fulfillment',
+      className: 'bg-slate-100 text-slate-700',
+      icon: <Clock3 className="h-4 w-4" />,
+    };
+  }, [isConfirmed, isFulfilled]);
 
-  const handleFulfill = () => setShowModal(true);
   const handleConfirm = async () => {
-    // API call to confirm condition
-    await fetch(`/api/escrow/conditions/${condition.id}/confirm`, { method: 'POST' });
+    setError(null);
+    setInfoMessage(null);
+
+    if (isLastOutstandingCondition) {
+      const shouldContinue = window.confirm(
+        'This is the last outstanding condition. Confirming it may trigger automatic fund release. Continue?',
+      );
+
+      if (!shouldContinue) {
+        return;
+      }
+    }
+
+    setIsConfirming(true);
+
+    try {
+      await confirmCondition(escrowId, condition.id);
+      await onUpdated();
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : 'Failed to confirm this condition. Please try again.',
+      );
+    } finally {
+      setIsConfirming(false);
+    }
+  };
+
+  const handleReject = () => {
+    setInfoMessage(
+      'Rejecting a fulfillment is not yet supported by the backend API. Ask the seller for updated evidence or file a dispute if the condition is not met.',
+    );
   };
 
   return (
-    <div className="condition-item">
-      <p>{condition.description}</p>
-      {role === 'seller' && !condition.fulfilled && (
-        <button onClick={handleFulfill}>Fulfill</button>
-      )}
-      {role === 'buyer' && condition.fulfilled && !condition.confirmed && (
-        <button onClick={handleConfirm}>Confirm</button>
-      )}
+    <div className="rounded-xl border border-gray-200 p-5 shadow-sm">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div className="space-y-3">
+          <div className="flex flex-wrap items-center gap-2">
+            <span
+              className={`inline-flex items-center gap-1 rounded-full px-3 py-1 text-xs font-medium ${statusConfig.className}`}
+            >
+              {statusConfig.icon}
+              {statusConfig.label}
+            </span>
+            {isLastOutstandingCondition && canConfirm && (
+              <span className="inline-flex items-center gap-1 rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-700">
+                <AlertTriangle className="h-3.5 w-3.5" />
+                Final confirmation triggers auto-release
+              </span>
+            )}
+          </div>
+
+          <div>
+            <h3 className="text-base font-semibold text-gray-900">{condition.description}</h3>
+            <p className="mt-1 text-sm text-gray-500">
+              Condition type: <span className="font-medium capitalize">{condition.type}</span>
+            </p>
+          </div>
+
+          {error && (
+            <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800">
+              <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+              <p>{error}</p>
+            </div>
+          )}
+
+          {infoMessage && (
+            <div className="flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-800">
+              <ShieldAlert className="mt-0.5 h-4 w-4 flex-shrink-0" />
+              <p>{infoMessage}</p>
+            </div>
+          )}
+
+          {(condition.fulfilledAt || condition.fulfillmentNotes || condition.fulfillmentEvidence) && (
+            <div className="rounded-lg bg-gray-50 p-4 text-sm text-gray-700">
+              <p className="font-medium text-gray-900">Fulfillment details</p>
+              {condition.fulfilledAt && (
+                <p className="mt-2">
+                  Fulfilled on {formatDateTime(condition.fulfilledAt)}
+                  {condition.fulfilledByUserId
+                    ? ` by ${condition.fulfilledByUserId}`
+                    : ''}
+                </p>
+              )}
+              {condition.fulfillmentNotes && (
+                <p className="mt-2 whitespace-pre-wrap">{condition.fulfillmentNotes}</p>
+              )}
+              {condition.fulfillmentEvidence && (
+                <div className="mt-2 flex items-start gap-2">
+                  <FileText className="mt-0.5 h-4 w-4 flex-shrink-0 text-gray-500" />
+                  {isLikelyUrl(condition.fulfillmentEvidence) ? (
+                    <a
+                      href={condition.fulfillmentEvidence}
+                      target="_blank"
+                      rel="noreferrer"
+                      className="break-all text-blue-600 underline"
+                    >
+                      {condition.fulfillmentEvidence}
+                    </a>
+                  ) : (
+                    <p className="break-all">{condition.fulfillmentEvidence}</p>
+                  )}
+                </div>
+              )}
+            </div>
+          )}
+
+          {condition.metAt && (
+            <div className="rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800">
+              Confirmed on {formatDateTime(condition.metAt)}
+              {condition.metByUserId ? ` by ${condition.metByUserId}` : ''}.
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-col gap-2 lg:w-52">
+          {canFulfill && (
+            <Button type="button" onClick={() => setShowModal(true)}>
+              Fulfill condition
+            </Button>
+          )}
+
+          {canConfirm && (
+            <>
+              <Button type="button" onClick={handleConfirm} disabled={isConfirming}>
+                {isConfirming ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Confirming
+                  </>
+                ) : (
+                  'Confirm'
+                )}
+              </Button>
+              <Button type="button" variant="outline" onClick={handleReject} disabled={isConfirming}>
+                Reject
+              </Button>
+            </>
+          )}
+
+          {!isEscrowActive && (
+            <p className="text-sm text-gray-500">
+              Actions are disabled because this escrow is {escrowStatus.toLowerCase()}.
+            </p>
+          )}
+
+          {partyStatus !== 'accepted' && currentParty && (
+            <p className="text-sm text-gray-500">
+              Accept your invitation before taking condition actions.
+            </p>
+          )}
+        </div>
+      </div>
+
       {showModal && (
         <FulfillConditionModal
-          conditionId={condition.id}
+          escrowId={escrowId}
+          condition={condition}
+          isOpen={showModal}
           onClose={() => setShowModal(false)}
+          onSubmitted={onUpdated}
         />
       )}
     </div>
diff --git a/apps/frontend/component/escrow/ConditionsList.tsx b/apps/frontend/component/escrow/ConditionsList.tsx
index 8f1086c..63643a4 100644
--- a/apps/frontend/component/escrow/ConditionsList.tsx
+++ b/apps/frontend/component/escrow/ConditionsList.tsx
@@ -1,25 +1,81 @@
 import React from 'react';
+import { CheckCircle2, Clock3 } from 'lucide-react';
+import { ICondition, IParty } from '@/types/escrow';
 import ConditionItem from './ConditionItem';
 
-interface Condition {
-  id: string;
-  description: string;
-  fulfilled: boolean;
-  confirmed: boolean;
-}
-
 interface Props {
-  conditions: Condition[];
-  role: 'seller' | 'buyer';
+  escrowId: string;
+  escrowStatus: string;
+  conditions: ICondition[];
+  currentParty: IParty | null;
+  onConditionsUpdated: () => Promise<void>;
 }
 
-const ConditionsList: React.FC<Props> = ({ conditions, role }) => {
+const ConditionsList: React.FC<Props> = ({
+  escrowId,
+  escrowStatus,
+  conditions,
+  currentParty,
+  onConditionsUpdated,
+}) => {
+  const totalConditions = conditions.length;
+  const fulfilledConditions = conditions.filter((condition) => condition.isFulfilled).length;
+  const confirmedConditions = conditions.filter((condition) => condition.isMet).length;
+  const remainingConfirmations = conditions.filter(
+    (condition) => condition.isFulfilled && !condition.isMet,
+  ).length;
+  const allConditionsMet = totalConditions > 0 && confirmedConditions === totalConditions;
+
+  if (totalConditions === 0) {
+    return null;
+  }
+
   return (
-    <div>
-      {conditions.map((condition) => (
-        <ConditionItem key={condition.id} condition={condition} role={role} />
-      ))}
-    </div>
+    <section className="rounded-lg bg-white p-6 shadow">
+      <div className="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
+        <div>
+          <h2 className="text-xl font-semibold text-gray-900">Conditions</h2>
+          <p className="mt-1 text-sm text-gray-500">
+            {confirmedConditions} of {totalConditions} confirmed, {fulfilledConditions} fulfilled.
+          </p>
+        </div>
+        <div className="inline-flex items-center gap-2 rounded-full bg-gray-100 px-3 py-1 text-sm font-medium text-gray-700">
+          <Clock3 className="h-4 w-4" />
+          {remainingConfirmations} awaiting buyer review
+        </div>
+      </div>
+
+      {allConditionsMet && (
+        <div className="mb-5 flex items-start gap-3 rounded-xl border border-emerald-200 bg-emerald-50 p-4">
+          <CheckCircle2 className="mt-0.5 h-5 w-5 flex-shrink-0 text-emerald-600" />
+          <div>
+            <p className="font-medium text-emerald-900">All conditions have been confirmed</p>
+            <p className="mt-1 text-sm text-emerald-800">
+              The escrow is now eligible for automatic fund release. Watch the escrow status and
+              activity feed for the release event.
+            </p>
+          </div>
+        </div>
+      )}
+
+      <div className="space-y-4">
+        {conditions.map((condition) => (
+          <ConditionItem
+            key={condition.id}
+            escrowId={escrowId}
+            escrowStatus={escrowStatus}
+            condition={condition}
+            currentParty={currentParty}
+            onUpdated={onConditionsUpdated}
+            isLastOutstandingCondition={
+              Boolean(condition.isFulfilled) &&
+              !Boolean(condition.isMet) &&
+              remainingConfirmations === 1
+            }
+          />
+        ))}
+      </div>
+    </section>
   );
 };
 
diff --git a/apps/frontend/component/escrow/FulfillConditionModal.tsx b/apps/frontend/component/escrow/FulfillConditionModal.tsx
index 412e3ae..8970798 100644
--- a/apps/frontend/component/escrow/FulfillConditionModal.tsx
+++ b/apps/frontend/component/escrow/FulfillConditionModal.tsx
@@ -1,39 +1,177 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
+import { AlertTriangle, FileText, Loader2, UploadCloud } from 'lucide-react';
+import { fulfillCondition } from '@/lib/escrow-api';
+import { ICondition } from '@/types/escrow';
+import { Button } from '@/components/ui/button';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
 
 interface Props {
-  conditionId: string;
+  escrowId: string;
+  condition: ICondition;
+  isOpen: boolean;
   onClose: () => void;
+  onSubmitted: () => Promise<void>;
 }
 
-const FulfillConditionModal: React.FC<Props> = ({ conditionId, onClose }) => {
+const FulfillConditionModal: React.FC<Props> = ({
+  escrowId,
+  condition,
+  isOpen,
+  onClose,
+  onSubmitted,
+}) => {
   const [notes, setNotes] = useState('');
+  const [evidenceUrl, setEvidenceUrl] = useState('');
   const [file, setFile] = useState<File | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
-  const handleSubmit = async () => {
-    const formData = new FormData();
-    formData.append('notes', notes);
-    if (file) formData.append('evidence', file);
+  const evidenceValue = useMemo(() => {
+    if (evidenceUrl.trim()) {
+      return evidenceUrl.trim();
+    }
+
+    if (file) {
+      return `Uploaded file: ${file.name}`;
+    }
 
-    await fetch(`/api/escrow/conditions/${conditionId}/fulfill`, {
-      method: 'POST',
-      body: formData,
-    });
+    return undefined;
+  }, [evidenceUrl, file]);
 
+  const resetAndClose = () => {
+    setNotes('');
+    setEvidenceUrl('');
+    setFile(null);
+    setError(null);
     onClose();
   };
 
+  const handleSubmit = async () => {
+    setIsSubmitting(true);
+    setError(null);
+
+    try {
+      await fulfillCondition(escrowId, condition.id, {
+        notes: notes.trim() || undefined,
+        evidence: evidenceValue,
+      });
+      await onSubmitted();
+      resetAndClose();
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : 'Failed to fulfill this condition. Please try again.',
+      );
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   return (
-    <div className="modal">
-      <h3>Fulfill Condition</h3>
-      <textarea
-        value={notes}
-        onChange={(e) => setNotes(e.target.value)}
-        placeholder="Add notes or evidence..."
-      />
-      <input type="file" onChange={(e) => setFile(e.target.files?.[0] || null)} />
-      <button onClick={handleSubmit}>Submit</button>
-      <button onClick={onClose}>Cancel</button>
-    </div>
+    <Dialog open={isOpen} onOpenChange={(open) => !open && resetAndClose()}>
+      <DialogContent className="sm:max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Fulfill Condition</DialogTitle>
+          <DialogDescription>
+            Share fulfillment notes and supporting evidence for{' '}
+            <span className="font-medium text-gray-900">{condition.description}</span>.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          {error && (
+            <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800">
+              <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+              <p>{error}</p>
+            </div>
+          )}
+
+          <div className="rounded-xl border border-gray-200 bg-gray-50 p-4">
+            <p className="text-sm font-medium text-gray-900">Condition</p>
+            <p className="mt-1 text-sm text-gray-600">{condition.description}</p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-900" htmlFor="fulfillment-notes">
+              Fulfillment notes
+            </label>
+            <Textarea
+              id="fulfillment-notes"
+              value={notes}
+              onChange={(event) => setNotes(event.target.value)}
+              placeholder="Summarize what you delivered, shipped, or completed."
+              className="min-h-28"
+              maxLength={2000}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-900" htmlFor="evidence-url">
+              Evidence URL or reference
+            </label>
+            <Input
+              id="evidence-url"
+              value={evidenceUrl}
+              onChange={(event) => setEvidenceUrl(event.target.value)}
+              placeholder="https://tracking.example.com/... or delivery reference"
+              maxLength={500}
+            />
+            <p className="text-xs text-gray-500">
+              The current API stores evidence as text, so uploaded files are submitted as a file
+              reference unless you provide a public URL.
+            </p>
+          </div>
+
+          <div className="space-y-2">
+            <label className="text-sm font-medium text-gray-900" htmlFor="evidence-file">
+              Upload supporting file
+            </label>
+            <Input
+              id="evidence-file"
+              type="file"
+              onChange={(event) => setFile(event.target.files?.[0] ?? null)}
+            />
+            {file ? (
+              <div className="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-800">
+                <FileText className="h-4 w-4" />
+                <span className="truncate">{file.name}</span>
+              </div>
+            ) : (
+              <div className="flex items-center gap-2 rounded-lg border border-dashed border-gray-300 px-3 py-2 text-sm text-gray-500">
+                <UploadCloud className="h-4 w-4" />
+                <span>Attach a file if you want its name recorded with the fulfillment.</span>
+              </div>
+            )}
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" variant="outline" onClick={resetAndClose} disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button type="button" onClick={handleSubmit} disabled={isSubmitting}>
+            {isSubmitting ? (
+              <>
+                <Loader2 className="h-4 w-4 animate-spin" />
+                Submitting
+              </>
+            ) : (
+              'Mark as fulfilled'
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 };
 
diff --git a/apps/frontend/components/escrow/detail/PartiesSection.tsx b/apps/frontend/components/escrow/detail/PartiesSection.tsx
index 963d13f..9e50acb 100644
--- a/apps/frontend/components/escrow/detail/PartiesSection.tsx
+++ b/apps/frontend/components/escrow/detail/PartiesSection.tsx
@@ -1,43 +1,27 @@
 'use client';
 
 import React, { useState } from 'react';
-import { IEscrowExtended, IParty } from '@/types/escrow';
+import {
+  AlertTriangle,
+  CheckCircle2,
+  Clock3,
+  RefreshCw,
+  UserCheck,
+  XCircle,
+} from 'lucide-react';
+import {
+  acceptPartyInvitation,
+  rejectPartyInvitation,
+} from '@/lib/escrow-api';
+import { ICondition, IEscrowExtended, IParty } from '@/types/escrow';
 import { PartyAcceptanceModal } from '../modals/PartyAcceptanceModal';
 
 interface PartiesSectionProps {
   escrow: IEscrowExtended;
-  userRole: 'creator' | 'counterparty' | null;
+  currentParty: IParty | null;
+  onEscrowUpdated: () => Promise<void>;
 }
 
-// API functions for party acceptance/rejection
-const acceptPartyInvitation = async (escrowId: string, partyId: string): Promise<void> => {
-  const response = await fetch(`/api/escrows/${escrowId}/parties/${partyId}/accept`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ message: 'Failed to accept invitation' }));
-    throw new Error(error.message || 'Failed to accept invitation');
-  }
-};
-
-const rejectPartyInvitation = async (escrowId: string, partyId: string): Promise<void> => {
-  const response = await fetch(`/api/escrows/${escrowId}/parties/${partyId}/reject`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-
-  if (!response.ok) {
-    const error = await response.json().catch(() => ({ message: 'Failed to reject invitation' }));
-    throw new Error(error.message || 'Failed to reject invitation');
-  }
-};
-
 const getRoleColor = (role: string) => {
   switch (role.toUpperCase()) {
     case 'BUYER':
@@ -64,9 +48,18 @@ const getStatusColor = (status: string) => {
   }
 };
 
-const PartiesSection: React.FC<PartiesSectionProps> = ({ escrow, userRole }: PartiesSectionProps) => {
+const getStatusLabel = (status: string) =>
+  status.charAt(0).toUpperCase() + status.slice(1).toLowerCase();
+
+const PartiesSection: React.FC<PartiesSectionProps> = ({
+  escrow,
+  currentParty,
+  onEscrowUpdated,
+}: PartiesSectionProps) => {
   const [selectedParty, setSelectedParty] = useState<IParty | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [actionMessage, setActionMessage] = useState<string | null>(null);
 
   const handleOpenModal = (party: IParty) => {
     setSelectedParty(party);
@@ -80,51 +73,103 @@ const PartiesSection: React.FC<PartiesSectionProps> = ({ escrow, userRole }: Par
 
   const handleAccept = async (escrowId: string, partyId: string) => {
     await acceptPartyInvitation(escrowId, partyId);
-    // Refresh the page or update local state to reflect the change
-    window.location.reload();
+    setActionMessage('Invitation accepted. Updating party status...');
+    setIsRefreshing(true);
+    try {
+      await onEscrowUpdated();
+    } finally {
+      setIsRefreshing(false);
+    }
   };
 
   const handleReject = async (escrowId: string, partyId: string) => {
     await rejectPartyInvitation(escrowId, partyId);
-    // Refresh the page or update local state to reflect the change
-    window.location.reload();
+    setActionMessage('Invitation rejected. Updating party status...');
+    setIsRefreshing(true);
+    try {
+      await onEscrowUpdated();
+    } finally {
+      setIsRefreshing(false);
+    }
   };
 
+  const pendingInvitation =
+    currentParty?.status.toUpperCase() === 'PENDING' ? currentParty : null;
+
   return (
     <div className="bg-white rounded-lg shadow p-6">
-      <h2 className="text-xl font-semibold text-gray-900 mb-4">Parties</h2>
-      
+      <div className="mb-4 flex items-center justify-between gap-4">
+        <h2 className="text-xl font-semibold text-gray-900">Parties</h2>
+        {isRefreshing && (
+          <span className="inline-flex items-center gap-2 text-sm text-gray-500">
+            <RefreshCw className="h-4 w-4 animate-spin" />
+            Refreshing
+          </span>
+        )}
+      </div>
+
+      {pendingInvitation && (
+        <div className="mb-5 rounded-xl border border-amber-200 bg-amber-50 p-4">
+          <div className="flex items-start gap-3">
+            <Clock3 className="mt-0.5 h-5 w-5 text-amber-600" />
+            <div className="flex-1">
+              <h3 className="font-medium text-amber-900">
+                Invitation pending your response
+              </h3>
+              <p className="mt-1 text-sm text-amber-800">
+                You&apos;ve been invited as the {pendingInvitation.role.toLowerCase()} on this
+                escrow. Review the agreement before you accept or reject it.
+              </p>
+            </div>
+            <button
+              onClick={() => handleOpenModal(pendingInvitation)}
+              disabled={escrow.status.toUpperCase() === 'CANCELLED'}
+              className="rounded-md bg-amber-600 px-3 py-2 text-sm font-medium text-white transition-colors hover:bg-amber-700 disabled:cursor-not-allowed disabled:opacity-60"
+            >
+              Review invitation
+            </button>
+          </div>
+        </div>
+      )}
+
+      {actionMessage && (
+        <div className="mb-5 flex items-start gap-3 rounded-lg border border-emerald-200 bg-emerald-50 p-4 text-sm text-emerald-800">
+          <CheckCircle2 className="mt-0.5 h-4 w-4 flex-shrink-0" />
+          <p>{actionMessage}</p>
+        </div>
+      )}
+
       <div className="space-y-4">
-        {escrow.parties.map((party: any) => (
+        {escrow.parties.map((party: IParty) => (
           <div key={party.id} className="border border-gray-200 rounded-lg p-4">
-            <div className="flex items-center justify-between">
+            <div className="flex items-center justify-between gap-4">
               <div>
                 <div className="flex items-center gap-2">
                   <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getRoleColor(party.role)}`}>
                     {party.role}
                   </span>
                   <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatusColor(party.status)}`}>
-                    {party.status}
+                    {getStatusLabel(party.status)}
                   </span>
+                  {currentParty?.id === party.id && (
+                    <span className="inline-flex items-center rounded-full bg-gray-900 px-2.5 py-0.5 text-xs font-medium text-white">
+                      You
+                    </span>
+                  )}
                 </div>
                 <p className="mt-2 text-sm text-gray-600">
                   <span className="font-medium">User ID:</span> {party.userId}
                 </p>
               </div>
-              
-              {userRole === 'creator' && party.status === 'PENDING' && (
+
+              {currentParty?.id === party.id &&
+                party.status.toUpperCase() === 'PENDING' && (
                 <div className="flex space-x-2">
-                  <button 
+                  <button
                     onClick={() => handleOpenModal(party)}
                     className="px-3 py-1 bg-green-500 text-white text-sm rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 transition-colors"
                   >
-                    Accept
-                  </button>
-                  <button 
-                    onClick={() => handleOpenModal(party)}
-                    className="px-3 py-1 bg-red-500 text-white text-sm rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 transition-colors"
-                  >
-                    Reject
+                    Respond
                   </button>
                 </div>
               )}
@@ -132,12 +177,12 @@ const PartiesSection: React.FC<PartiesSectionProps> = ({ escrow, userRole }: Par
           </div>
         ))}
       </div>
-      
+
       {escrow.conditions && escrow.conditions.length > 0 && (
         <div className="mt-6">
           <h3 className="text-lg font-medium text-gray-900 mb-3">Conditions</h3>
           <ul className="space-y-2">
-            {escrow.conditions.map((condition: any) => (
+            {escrow.conditions.map((condition: ICondition) => (
               <li key={condition.id} className="flex items-start">
                 <div className="flex-shrink-0 h-5 w-5 text-green-500">
                   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
@@ -151,7 +196,6 @@ const PartiesSection: React.FC<PartiesSectionProps> = ({ escrow, userRole }: Par
         </div>
       )}
 
-      {/* Party Acceptance Modal */}
       {selectedParty && (
         <PartyAcceptanceModal
           isOpen={isModalOpen}
@@ -162,8 +206,29 @@ const PartiesSection: React.FC<PartiesSectionProps> = ({ escrow, userRole }: Par
           onReject={handleReject}
         />
       )}
+
+      {currentParty?.status.toUpperCase() === 'REJECTED' && (
+        <div className="mt-5 flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800">
+          <XCircle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+          <p>You have already rejected this invitation.</p>
+        </div>
+      )}
+
+      {currentParty?.status.toUpperCase() === 'ACCEPTED' && (
+        <div className="mt-5 flex items-start gap-3 rounded-lg border border-blue-200 bg-blue-50 p-4 text-sm text-blue-800">
+          <UserCheck className="mt-0.5 h-4 w-4 flex-shrink-0" />
+          <p>Your invitation has already been accepted and your status is up to date.</p>
+        </div>
+      )}
+
+      {pendingInvitation && escrow.status.toUpperCase() === 'CANCELLED' && (
+        <div className="mt-5 flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4 text-sm text-red-800">
+          <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0" />
+          <p>This escrow has been cancelled, so the invitation can no longer be accepted.</p>
+        </div>
+      )}
     </div>
   );
 };
 
-export default PartiesSection;
\ No newline at end of file
+export default PartiesSection;
diff --git a/apps/frontend/hooks/useEscrow.ts b/apps/frontend/hooks/useEscrow.ts
index f8a3c13..24f7d38 100644
--- a/apps/frontend/hooks/useEscrow.ts
+++ b/apps/frontend/hooks/useEscrow.ts
@@ -1,4 +1,5 @@
-import { useState, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { fetchEscrow } from '@/lib/escrow-api';
 import { IEscrowExtended, IUseEscrowReturn } from '@/types/escrow';
 
 export const useEscrow = (id: string): IUseEscrowReturn => {
@@ -6,36 +7,34 @@ export const useEscrow = (id: string): IUseEscrowReturn => {
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
-    const fetchEscrow = async () => {
-      try {
-        setLoading(true);
-        const response = await fetch(`/api/escrows/${id}`);
-        
-        if (!response.ok) {
-          if (response.status === 404) {
-            setError('Escrow not found');
-          } else {
-            setError('Failed to load escrow details');
-          }
-          return;
-        }
-        
-        const data = await response.json();
-        setEscrow(data);
-        setError(null);
-      } catch (err) {
-        setError('An error occurred while fetching escrow details');
-        console.error('Error fetching escrow:', err);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const refetch = useCallback(async () => {
+    if (!id) {
+      setEscrow(null);
+      setLoading(false);
+      return;
+    }
+
+    try {
+      setLoading(true);
+      const data = await fetchEscrow(id);
+      setEscrow(data);
+      setError(null);
+    } catch (err) {
+      const message =
+        err instanceof Error
+          ? err.message
+          : 'An error occurred while fetching escrow details';
 
-    if (id) {
-      fetchEscrow();
+      setError(message.includes('404') ? 'Escrow not found' : message);
+      console.error('Error fetching escrow:', err);
+    } finally {
+      setLoading(false);
     }
   }, [id]);
 
-  return { escrow, loading, error };
-};
\ No newline at end of file
+  useEffect(() => {
+    void refetch();
+  }, [refetch]);
+
+  return { escrow, loading, error, refetch };
+};
diff --git a/apps/frontend/lib/escrow-api.ts b/apps/frontend/lib/escrow-api.ts
new file mode 100644
index 0000000..0883491
--- /dev/null
+++ b/apps/frontend/lib/escrow-api.ts
@@ -0,0 +1,75 @@
+import { ICondition, IEscrowExtended } from '@/types/escrow';
+
+const apiBaseUrl = process.env.NEXT_PUBLIC_API_BASE_URL?.replace(/\/$/, '') ?? '';
+
+const buildApiUrl = (path: string) => {
+  if (apiBaseUrl) {
+    return `${apiBaseUrl}${path}`;
+  }
+
+  return `/api${path}`;
+};
+
+const readErrorMessage = async (response: Response) => {
+  const fallback = `Request failed with status ${response.status}`;
+
+  try {
+    const data = (await response.json()) as { message?: string | string[] };
+
+    if (Array.isArray(data.message)) {
+      return data.message.join(', ');
+    }
+
+    return data.message ?? fallback;
+  } catch {
+    return fallback;
+  }
+};
+
+const request = async <T>(path: string, init?: RequestInit): Promise<T> => {
+  const response = await fetch(buildApiUrl(path), {
+    ...init,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(init?.headers ?? {}),
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(await readErrorMessage(response));
+  }
+
+  if (response.status === 204) {
+    return undefined as T;
+  }
+
+  return (await response.json()) as T;
+};
+
+export const fetchEscrow = (id: string) =>
+  request<IEscrowExtended>(`/escrows/${id}`);
+
+export const acceptPartyInvitation = (escrowId: string, partyId: string) =>
+  request(`/escrows/${escrowId}/parties/${partyId}/accept`, {
+    method: 'POST',
+  });
+
+export const rejectPartyInvitation = (escrowId: string, partyId: string) =>
+  request(`/escrows/${escrowId}/parties/${partyId}/reject`, {
+    method: 'POST',
+  });
+
+export const fulfillCondition = (
+  escrowId: string,
+  conditionId: string,
+  payload: { notes?: string; evidence?: string },
+) =>
+  request<ICondition>(`/escrows/${escrowId}/conditions/${conditionId}/fulfill`, {
+    method: 'POST',
+    body: JSON.stringify(payload),
+  });
+
+export const confirmCondition = (escrowId: string, conditionId: string) =>
+  request<ICondition>(`/escrows/${escrowId}/conditions/${conditionId}/confirm`, {
+    method: 'POST',
+  });
diff --git a/apps/frontend/types/escrow.ts b/apps/frontend/types/escrow.ts
index dbeb01a..4341bfd 100644
--- a/apps/frontend/types/escrow.ts
+++ b/apps/frontend/types/escrow.ts
@@ -6,10 +6,24 @@ export interface IEscrow {
   asset: string;
   creatorAddress: string;
   counterpartyAddress: string;
-  deadline: string; // ISO date string
-  status: 'created' | 'funded' | 'confirmed' | 'released' | 'completed' | 'cancelled' | 'disputed' | 'PENDING' | 'ACTIVE' | 'COMPLETED' | 'CANCELLED' | 'DISPUTED';
-  createdAt: string; // ISO date string
-  updatedAt: string; // ISO date string
+  deadline: string;
+  status:
+    | 'created'
+    | 'funded'
+    | 'confirmed'
+    | 'released'
+    | 'completed'
+    | 'cancelled'
+    | 'disputed'
+    | 'expired'
+    | 'PENDING'
+    | 'ACTIVE'
+    | 'COMPLETED'
+    | 'CANCELLED'
+    | 'DISPUTED'
+    | 'EXPIRED';
+  createdAt: string;
+  updatedAt: string;
   milestones?: Array<{
     id: string;
     title: string;
@@ -21,30 +35,63 @@ export interface IEscrow {
 export interface IParty {
   id: string;
   userId: string;
-  role: 'BUYER' | 'SELLER' | 'ARBITRATOR';
-  status: 'PENDING' | 'ACCEPTED' | 'REJECTED';
+  role:
+    | 'BUYER'
+    | 'SELLER'
+    | 'ARBITRATOR'
+    | 'buyer'
+    | 'seller'
+    | 'arbitrator';
+  status:
+    | 'PENDING'
+    | 'ACCEPTED'
+    | 'REJECTED'
+    | 'pending'
+    | 'accepted'
+    | 'rejected';
   createdAt: string;
 }
 
 export interface ICondition {
   id: string;
+  escrowId?: string;
   description: string;
   type: string;
   metadata?: Record<string, any>;
+  isFulfilled?: boolean;
+  fulfilledAt?: string | null;
+  fulfilledByUserId?: string | null;
+  fulfillmentNotes?: string | null;
+  fulfillmentEvidence?: string | null;
+  isMet?: boolean;
+  metAt?: string | null;
+  metByUserId?: string | null;
+  createdAt?: string;
+  updatedAt?: string;
 }
 
 export interface IEscrowEvent {
   id: string;
-  eventType: 'CREATED' | 'PARTY_ADDED' | 'PARTY_ACCEPTED' | 'PARTY_REJECTED' | 'FUNDED' | 'CONDITION_MET' | 'STATUS_CHANGED' | 'UPDATED' | 'CANCELLED' | 'COMPLETED' | 'DISPUTED';
+  eventType:
+    | 'CREATED'
+    | 'PARTY_ADDED'
+    | 'PARTY_ACCEPTED'
+    | 'PARTY_REJECTED'
+    | 'FUNDED'
+    | 'CONDITION_MET'
+    | 'STATUS_CHANGED'
+    | 'UPDATED'
+    | 'CANCELLED'
+    | 'COMPLETED'
+    | 'DISPUTED';
   actorId?: string;
   data?: Record<string, any>;
   ipAddress?: string;
   createdAt: string;
 }
 
-// Extended IEscrow interface to match backend entities
 export interface IEscrowExtended extends IEscrow {
-  type: 'STANDARD' | 'MILESTONE' | 'TIMED';
+  type: 'STANDARD' | 'MILESTONE' | 'TIMED' | 'standard' | 'milestone' | 'timed';
   creatorId: string;
   expiresAt?: string;
   isActive: boolean;
@@ -61,6 +108,7 @@ export interface IUseEscrowReturn {
   escrow: IEscrowExtended | null;
   loading: boolean;
   error: string | null;
+  refetch: () => Promise<void>;
 }
 
 export interface IWalletHookReturn {
@@ -96,4 +144,4 @@ export interface IEscrowEventFilters {
   eventType?: string;
   page?: number;
   limit?: number;
-}
\ No newline at end of file
+}