diff --git a/apps/web/app/test/escrow/page.tsx b/apps/web/app/test/escrow/page.tsx
new file mode 100644
index 00000000..c55f6b6d
--- /dev/null
+++ b/apps/web/app/test/escrow/page.tsx
@@ -0,0 +1,22 @@
+import { EscrowTable } from '../../../components/EscrowTable'
+
+const FeatureNotAvailable = () => (
+  <div className="container mx-auto p-4">
+    <div className="bg-white rounded-lg shadow-lg p-6">
+      <h1 className="text-2xl font-bold mb-4">Feature Not Available</h1>
+      <p>This feature is only available in development mode.</p>
+    </div>
+  </div>
+)
+
+export default function TestPage() {
+  if (process.env.NODE_ENV === 'production') {
+    return <FeatureNotAvailable />; // Instead of redirecting, show the message
+  }
+  
+  return (
+    <div>
+      <EscrowTable />
+    </div>
+  )
+}
diff --git a/apps/web/components/EscrowTable/EscrowTable.tsx b/apps/web/components/EscrowTable/EscrowTable.tsx
new file mode 100644
index 00000000..4ef64d72
--- /dev/null
+++ b/apps/web/components/EscrowTable/EscrowTable.tsx
@@ -0,0 +1,244 @@
+"use client";
+
+import { useCallback, useEffect, useState, useMemo } from "react";
+import { createClient } from "../../lib/supabase/client";
+import type { Database } from "../../../../services/supabase/database.types";
+import { appConfig } from "../../lib/config/appConfig";
+
+type Tables = Database["public"]["Tables"];
+type EscrowRecord = Tables["escrow_status"]["Row"];
+type EscrowStatusType =
+  | "NEW"
+  | "FUNDED"
+  | "ACTIVE"
+  | "COMPLETED"
+  | "DISPUTED"
+  | "CANCELLED";
+
+export const FeatureNotAvailable = () => (
+  <div className="container mx-auto p-4">
+    <div className="bg-white rounded-lg shadow-lg p-6">
+      <h1 className="text-2xl font-bold mb-4">Feature Not Available</h1>
+      <p>This feature is only available in development mode.</p>
+    </div>
+  </div>
+);
+
+export function EscrowTable() {
+  const [dbStatus, setDbStatus] = useState<string>("Checking...");
+  const [error, setError] = useState<string | null>(null);
+  const [records, setRecords] = useState<EscrowRecord[]>([]);
+  const supabase = createClient();
+  const isFeatureEnabled = useMemo(
+    () => appConfig.features.enableEscrowFeature,
+    [appConfig.features.enableEscrowFeature]
+  );
+
+  const statusColors: Record<EscrowStatusType, string> = useMemo(
+    () => ({
+      NEW: "bg-gray-100",
+      FUNDED: "bg-blue-100",
+      ACTIVE: "bg-green-100",
+      COMPLETED: "bg-purple-100",
+      DISPUTED: "bg-red-100",
+      CANCELLED: "bg-yellow-100",
+    }),
+    []
+  );
+
+  const fetchRecords = useCallback(async () => {
+    if (!isFeatureEnabled) return;
+
+    try {
+      const { data, error } = await supabase
+        .from("escrow_status")
+        .select("*")
+        .order("last_updated", { ascending: false });
+
+      if (error) {
+        setError(error.message);
+        setDbStatus("Failed");
+      } else {
+        setRecords(data || []);
+        setDbStatus("Connected");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+      setDbStatus("Failed");
+    }
+  }, [supabase, isFeatureEnabled]);
+
+  const updateStatus = async (id: string, newStatus: EscrowStatusType) => {
+    if (!isFeatureEnabled) return;
+
+    try {
+      const { error } = await supabase
+        .from("escrow_status")
+        .update({
+          status: newStatus,
+          last_updated: new Date().toISOString(),
+        })
+        .eq("id", id);
+
+      if (error) throw error;
+
+      await fetchRecords();
+      alert(`Status updated to ${newStatus}`);
+    } catch (err) {
+      console.error("Error:", err);
+      alert(
+        "Error updating status: " +
+          (err instanceof Error ? err.message : "Unknown error")
+      );
+    }
+  };
+
+  const insertTestData = async () => {
+    if (!isFeatureEnabled) return;
+
+    try {
+      const { error } = await supabase.from("escrow_status").insert([
+        {
+          escrow_id: "test-" + Date.now(),
+          status: "NEW" as EscrowStatusType,
+          current_milestone: 1,
+          total_funded: 1000,
+          total_released: 0,
+          metadata: {
+            milestoneStatus: {
+              total: 3,
+              completed: 0,
+            },
+          },
+        },
+      ]);
+
+      if (error) throw error;
+      alert("Test data inserted successfully!");
+      fetchRecords();
+    } catch (err) {
+      console.error("Error:", err);
+      alert(
+        "Error inserting test data: " +
+          (err instanceof Error ? err.message : "Unknown error")
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (isFeatureEnabled) {
+      fetchRecords();
+    }
+  }, [fetchRecords, isFeatureEnabled]);
+
+  if (!isFeatureEnabled) {
+    return <FeatureNotAvailable />;
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow-lg p-6">
+      <h1 className="text-2xl font-bold mb-4">Escrow Status System Test</h1>
+
+      <div className="mb-4">
+        <h2 className="text-xl mb-2">Database Status</h2>
+        <p
+          className={`font-medium ${
+            dbStatus === "Connected"
+              ? "text-green-600"
+              : dbStatus === "Failed"
+                ? "text-red-600"
+                : "text-yellow-600"
+          }`}
+        >
+          Status: {dbStatus}
+        </p>
+        {error && <p className="text-red-500">Error: {error}</p>}
+      </div>
+
+      <div className="mb-4">
+        <h2 className="text-xl mb-2">Test Actions</h2>
+        <div className=" flex flex-col gap-3 lg:flex-row lg:gap-4 md:w-[40%]">
+          <button
+          type="button"
+            onClick={insertTestData}
+            className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+          >
+            Insert Test Data
+          </button>
+
+          <button
+          type="button"
+            onClick={fetchRecords}
+            className="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600"
+          >
+            Refresh Records
+          </button>
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <h2 className="text-xl mb-2">Current Records ({records.length})</h2>
+        <div className="overflow-x-auto">
+          <table className="min-w-full bg-white border">
+            <thead>
+              <tr>
+                <th className="border p-2">ID</th>
+                <th className="border p-2">Escrow ID</th>
+                <th className="border p-2">Status</th>
+                <th className="border p-2">Milestone</th>
+                <th className="border p-2">Funded</th>
+                <th className="border p-2">Released</th>
+                <th className="border p-2">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {records.map((record) => (
+                <tr key={record.id} className={statusColors[record.status]}>
+                  <td className="border p-2 font-mono text-sm">{record.id}</td>
+                  <td className="border p-2">{record.escrow_id}</td>
+                  <td className="border p-2 font-medium">{record.status}</td>
+                  <td className="border p-2">{record.current_milestone}</td>
+                  <td className="border p-2">{record.total_funded}</td>
+                  <td className="border p-2">{record.total_released}</td>
+                  <td className="border p-2">
+                    <select
+                      className="border p-1 rounded"
+                      onChange={(e) =>
+                        updateStatus(
+                          record.id,
+                          e.target.value as EscrowStatusType
+                        )
+                      }
+                      value={record.status}
+                    >
+                      <option value="NEW">NEW</option>
+                      <option value="FUNDED">FUNDED</option>
+                      <option value="ACTIVE">ACTIVE</option>
+                      <option value="COMPLETED">COMPLETED</option>
+                      <option value="DISPUTED">DISPUTED</option>
+                      <option value="CANCELLED">CANCELLED</option>
+                    </select>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div className="mt-4">
+        <h3 className="font-medium mb-2">Status Legend:</h3>
+        <div className="grid grid-cols-3 gap-2">
+          {Object.entries(statusColors).map(([status, color]) => (
+            <div
+              key={status}
+              className={`${color} py-2 rounded text-[10px] text-center md:text-[20px]`}
+            >
+              {status}
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/components/EscrowTable/index.ts b/apps/web/components/EscrowTable/index.ts
new file mode 100644
index 00000000..49e28277
--- /dev/null
+++ b/apps/web/components/EscrowTable/index.ts
@@ -0,0 +1 @@
+export * from './EscrowTable'
\ No newline at end of file
diff --git a/apps/web/hooks/escrow/useEscrow.ts b/apps/web/hooks/escrow/useEscrow.ts
new file mode 100644
index 00000000..5e4b9514
--- /dev/null
+++ b/apps/web/hooks/escrow/useEscrow.ts
@@ -0,0 +1,211 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { createClient } from '../../lib/supabase/client'
+import type { Database } from '../../../../services/supabase/database.types'
+
+type Tables = Database['public']['Tables']
+type EscrowRecord = Tables['escrow_status']['Row']
+type EscrowStatusType = 'NEW' | 'FUNDED' | 'ACTIVE' | 'COMPLETED' | 'DISPUTED' | 'CANCELLED'
+
+interface EscrowStatusState {
+  state: EscrowStatusType
+  milestoneStatus: {
+    current: number
+    total: number
+    completed: number
+  }
+  financials: {
+    totalFunded: number
+    totalReleased: number
+    pendingRelease: number
+  }
+}
+
+interface MilestoneMetadata {
+  milestoneStatus: {
+    total: number
+    completed: number
+  }
+}
+
+export function useEscrow(escrowId: string) {
+  const [status, setStatus] = useState<EscrowStatusState | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+  const [rawRecord, setRawRecord] = useState<EscrowRecord | null>(null)
+  const supabase = createClient()
+
+  const transformRecord = (record: EscrowRecord): EscrowStatusState | null => {
+    if (record.status === 'CANCELLED') return null
+
+    // Safely cast metadata with type checking
+    const metadata = typeof record.metadata === 'object' && record.metadata
+      ? record.metadata as { milestoneStatus?: { total: number; completed: number } }
+      : { milestoneStatus: { total: 0, completed: 0 } }
+
+    return {
+      state: record.status,
+      milestoneStatus: {
+        current: record.current_milestone || 0,
+        total: metadata?.milestoneStatus?.total || 0,
+        completed: metadata?.milestoneStatus?.completed || 0,
+      },
+      financials: {
+        totalFunded: Number(record.total_funded) || 0,
+        totalReleased: Number(record.total_released) || 0,
+        pendingRelease:
+          (Number(record.total_funded) || 0) -
+          (Number(record.total_released) || 0),
+      },
+    }
+  }
+
+  const fetchEscrowStatus = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+
+      const { data, error: fetchError } = await supabase
+        .from('escrow_status')
+        .select('*')
+        .eq('escrow_id', escrowId)
+        .single()
+
+      if (fetchError) throw fetchError
+
+      if (data) {
+        setRawRecord(data as EscrowRecord)
+        const transformed = transformRecord(data as EscrowRecord)
+        if (transformed) setStatus(transformed)
+      }
+    } catch (err) {
+      setError(
+        err instanceof Error ? err : new Error('Failed to fetch escrow status'),
+      )
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    fetchEscrowStatus()
+
+    const channel = supabase
+      .channel(`escrow_status:${escrowId}`)
+      .on(
+        'postgres_changes',
+        {
+          event: '*',
+          schema: 'public',
+          table: 'escrow_status',
+          filter: `escrow_id=eq.${escrowId}`,
+        },
+        (payload) => {
+          if (payload.new) {
+            const newRecord = payload.new as EscrowRecord
+            setRawRecord(newRecord)
+            const transformed = transformRecord(newRecord)
+            if (transformed) setStatus(transformed)
+          }
+        },
+      )
+      .subscribe()
+
+    return () => {
+      channel.unsubscribe()
+    }
+  }, [escrowId, fetchEscrowStatus, supabase, transformRecord])
+
+  const updateStatus = async (newStatus: EscrowStatusType) => {
+    try {
+      if (!rawRecord) throw new Error('No record to update')
+
+      const { error: updateError } = await supabase
+        .from('escrow_status')
+        .update({
+          status: newStatus,
+          last_updated: new Date().toISOString(),
+        })
+        .eq('id', rawRecord.id)
+
+      if (updateError) throw updateError
+      await fetchEscrowStatus()
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to update status')
+      setError(error)
+      throw error
+    }
+  }
+
+  const updateMilestone = async (current: number, completed: number) => {
+    try {
+      if (!rawRecord) throw new Error('No record to update')
+
+      // Safely handle existing metadata
+      const existingMetadata = typeof rawRecord.metadata === 'object' && rawRecord.metadata
+        ? rawRecord.metadata as { milestoneStatus?: { total: number; completed: number } }
+        : { milestoneStatus: { total: 0, completed: 0 } }
+
+      const total = existingMetadata?.milestoneStatus?.total || completed
+
+      const updatedMetadata = {
+        milestoneStatus: {
+          total,
+          completed
+        }
+      }
+
+      const { error: updateError } = await supabase
+        .from('escrow_status')
+        .update({
+          current_milestone: current,
+          metadata: updatedMetadata,
+          last_updated: new Date().toISOString()
+        })
+        .eq('id', rawRecord.id)
+
+      if (updateError) throw updateError
+      await fetchEscrowStatus()
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to update milestone')
+      setError(error)
+      throw error
+    }
+  }
+
+  const updateFinancials = async (funded: number, released: number) => {
+    try {
+      if (!rawRecord) throw new Error('No record to update')
+      if (funded < released) {
+        throw new Error('Total funded cannot be less than total released')
+      }
+
+      const { error: updateError } = await supabase
+        .from('escrow_status')
+        .update({
+          total_funded: funded,
+          total_released: released,
+          last_updated: new Date().toISOString()
+        })
+        .eq('id', rawRecord.id)
+
+      if (updateError) throw updateError
+      await fetchEscrowStatus()
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error('Failed to update financials')
+      setError(error)
+      throw error
+    }
+  }
+
+  return {
+    status,
+    loading,
+    error,
+    updateStatus,
+    updateMilestone,
+    updateFinancials,
+    refetch: fetchEscrowStatus,
+  }
+}
\ No newline at end of file
diff --git a/apps/web/lib/config/appConfig.ts b/apps/web/lib/config/appConfig.ts
new file mode 100644
index 00000000..39afbd53
--- /dev/null
+++ b/apps/web/lib/config/appConfig.ts
@@ -0,0 +1,5 @@
+export const appConfig = {
+    features: {
+      enableEscrowFeature: process.env.NODE_ENV === 'development' || process.env.NEXT_PUBLIC_ENABLE_ESCROW_FEATURE === 'true'
+    }
+  } as const
\ No newline at end of file