diff --git a/package-lock.json b/package-lock.json
index b552c04..a3ba8d0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1072,6 +1072,11 @@
       "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
       "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
       "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "locate-path": "^5.0.0",
+        "path-exists": "^4.0.0"
+      },
       "engines": {
         "node": ">=18.18.0"
       }
@@ -1081,6 +1086,7 @@
       "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
       "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@humanfs/core": "^0.19.1",
         "@humanwhocodes/retry": "^0.4.0"
@@ -7358,7 +7364,7 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/ast-types-flow": {
+    "node_modules/ast-typ": {
       "version": "0.0.8",
       "resolved": "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.8.tgz",
       "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==",
@@ -13398,8 +13404,12 @@
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
       "engines": {
-        "node": ">=8"
+        "node": ">=18"
       }
     },
     "node_modules/path-parse": {
@@ -14246,6 +14256,7 @@
       "engines": {
         "node": ">= 12.13.0"
       }
+      
     },
     "node_modules/redent": {
       "version": "3.0.0",
@@ -15321,6 +15332,13 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/tmpl": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
+      "integrity": "sha512-3f0uOEAQwIqGuWW2MVzYg8fV/QNnc/IpuJNG837rLuczAaLVHslWHZQj4IGiEl5Hs3kkbhwL9Ab7Hrsmuj+Smw==",
+      "dev": true,
+      "license": "BSD-3-Clause"
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
diff --git a/src/app/(dashboard)/claim/page.tsx b/src/app/(dashboard)/claim/page.tsx
new file mode 100644
index 0000000..ea16ba0
--- /dev/null
+++ b/src/app/(dashboard)/claim/page.tsx
@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { AlertTriangle, CheckCircle } from 'lucide-react';
+import { Dispute } from '@/types/dispute';
+import { OpenDisputeModal } from '@/components/modals/OpenDisputeModal';
+import { DisputeVotingCard } from '@/components/claims/DisputeVotingCard';
+
+
+export default function ClaimDetail() {
+  const [isDisputeModalOpen, setDisputeModalOpen] = useState(false);
+  
+  
+  const [dispute, setDispute] = useState<Dispute | null>(null);
+
+  const handleOpenDispute = async (payload: any) => {
+    
+    console.log('Opening dispute:', payload);
+    
+    
+    setDispute({
+      id: 'dsp_1',
+      claimId: 'claim_123',
+      reason: payload.reason,
+      status: 'VOTING',
+      proVotes: 0,
+      conVotes: 0,
+      totalStaked: payload.initialStake,
+      createdAt: new Date().toISOString()
+    });
+  };
+
+  const handleVote = async (id: string, side: string, amount: number) => {
+    // Call POST /disputes/:id/vote API here
+    console.log(`Voting ${side} with ${amount}`);
+  };
+
+  return (
+    <div className="min-h-screen bg-[#0A0A0A] p-8 text-zinc-300">
+      
+      
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        
+        <div className="lg:col-span-2 space-y-6">
+          <div className="rounded-xl border border-zinc-800 bg-[#111111] p-6">
+            
+            
+            <div className="flex justify-between items-start mb-4">
+              <div className="space-y-1">
+                <div className="flex gap-2">
+                  <span className="px-2 py-0.5 rounded text-xs font-medium bg-zinc-800 text-zinc-400">Climate</span>
+                  <span className="text-xs text-zinc-500 font-mono">0x1a2b...3c4d</span>
+                </div>
+                <h1 className="text-xl font-bold text-white">Global average temperatures increased by 1.1°C...</h1>
+              </div>
+              
+              
+              {dispute ? (
+                <span className="flex items-center gap-1 px-3 py-1 rounded-full bg-red-900/20 text-red-500 border border-red-900/50 text-xs font-bold">
+                  <AlertTriangle size={14} /> Dispute Active
+                </span>
+              ) : (
+                <span className="flex items-center gap-1 px-3 py-1 rounded-full bg-green-900/20 text-green-500 border border-green-900/50 text-xs font-bold">
+                  <CheckCircle size={14} /> Verified
+                </span>
+              )}
+            </div>
+
+            
+            {!dispute && (
+              <div className="grid grid-cols-2 gap-4 mt-8">
+                <button className="py-3 rounded-lg bg-green-600 hover:bg-green-700 text-white font-bold transition-colors">
+                  Verify (Stake + Vote)
+                </button>
+                
+                
+                <button 
+                  onClick={() => setDisputeModalOpen(true)}
+                  className="py-3 rounded-lg border border-red-900/50 text-red-500 hover:bg-red-900/10 font-bold flex items-center justify-center gap-2 transition-colors"
+                >
+                  <AlertTriangle size={18} /> Dispute
+                </button>
+              </div>
+            )}
+
+            
+            {dispute && (
+              <DisputeVotingCard 
+                disputeId={dispute.id}
+                currentStaked={dispute.totalStaked}
+                onVote={handleVote}
+              />
+            )}
+          </div>
+          
+          
+        </div>
+
+        
+        <div className="space-y-6">
+           
+        </div>
+      </div>
+
+      <OpenDisputeModal 
+        claimId="claim_123"
+        isOpen={isDisputeModalOpen}
+        onClose={() => setDisputeModalOpen(false)}
+        onSubmit={handleOpenDispute}
+      />
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/claims/DisputeVotingCard.tsx b/src/components/claims/DisputeVotingCard.tsx
new file mode 100644
index 0000000..4def3e1
--- /dev/null
+++ b/src/components/claims/DisputeVotingCard.tsx
@@ -0,0 +1,62 @@
+import { useState } from 'react';
+
+interface DisputeVotingCardProps {
+  disputeId: string;
+  currentStaked: number;
+  onVote: (disputeId: string, side: 'PRO' | 'CON', amount: number) => Promise<void>;
+}
+
+export const DisputeVotingCard = ({ disputeId, currentStaked, onVote }: DisputeVotingCardProps) => {
+  const [amount, setAmount] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+
+  const handleVote = async (side: 'PRO' | 'CON') => {
+    if (!amount) return;
+    setLoading(true);
+    await onVote(disputeId, side, Number(amount));
+    setLoading(false);
+    setAmount('');
+  };
+
+  return (
+    <div className="rounded-xl border border-red-900/50 bg-red-950/10 p-5 mt-6">
+      <div className="flex items-center justify-between mb-4">
+        <h3 className="text-white font-bold flex items-center gap-2">
+          <span className="relative flex h-3 w-3">
+            <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
+            <span className="relative inline-flex rounded-full h-3 w-3 bg-red-500"></span>
+          </span>
+          Active Dispute Voting
+        </h3>
+        <span className="text-sm text-red-400 font-mono">${currentStaked.toLocaleString()} Staked</span>
+      </div>
+
+      <div className="mb-4">
+        <input
+          type="number"
+          value={amount}
+          onChange={(e) => setAmount(e.target.value)}
+          placeholder="Enter stake amount"
+          className="w-full rounded-lg border border-zinc-700 bg-zinc-900 p-3 text-white focus:border-red-500 outline-none"
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-3">
+        <button
+          onClick={() => handleVote('PRO')}
+          disabled={loading || !amount}
+          className="py-2.5 rounded-lg bg-green-900/30 border border-green-800 text-green-400 hover:bg-green-900/50 font-bold transition-all"
+        >
+          Vote Valid
+        </button>
+        <button
+          onClick={() => handleVote('CON')}
+          disabled={loading || !amount}
+          className="py-2.5 rounded-lg bg-red-900/30 border border-red-800 text-red-400 hover:bg-red-900/50 font-bold transition-all"
+        >
+          Vote Invalid
+        </button>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/features/claim-submission/ClaimSubmissionForm.tsx b/src/components/features/claim-submission/ClaimSubmissionForm.tsx
index c40a06a..44cd2f6 100644
--- a/src/components/features/claim-submission/ClaimSubmissionForm.tsx
+++ b/src/components/features/claim-submission/ClaimSubmissionForm.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { useState } from "react";
 
 export interface ClaimFormData {
diff --git a/src/components/modals/OpenDisputeModal.tsx b/src/components/modals/OpenDisputeModal.tsx
new file mode 100644
index 0000000..69ae4f5
--- /dev/null
+++ b/src/components/modals/OpenDisputeModal.tsx
@@ -0,0 +1,91 @@
+import { useState } from 'react';
+import { X, AlertTriangle } from 'lucide-react'; 
+import { CreateDisputePayload } from '../../types/dispute';
+
+interface OpenDisputeModalProps {
+  claimId: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (payload: CreateDisputePayload) => Promise<void>;
+}
+
+export const OpenDisputeModal = ({ claimId, isOpen, onClose, onSubmit }: OpenDisputeModalProps) => {
+  const [reason, setReason] = useState('');
+  const [stake, setStake] = useState<string>('');
+  const [loading, setLoading] = useState(false);
+
+  if (!isOpen) return null;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    try {
+      await onSubmit({ claimId, reason, initialStake: Number(stake) });
+      onClose();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
+      <div className="w-full max-w-md rounded-xl border border-zinc-800 bg-[#111111] p-6 shadow-2xl">
+        <div className="flex items-center justify-between mb-6">
+          <div className="flex items-center gap-2 text-red-500">
+            <AlertTriangle size={20} />
+            <h2 className="text-lg font-bold text-white">Open Dispute</h2>
+          </div>
+          <button onClick={onClose} className="text-zinc-500 hover:text-white">
+            <X size={20} />
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-zinc-400 mb-1">Reason for Dispute</label>
+            <textarea
+              className="w-full rounded-lg border border-zinc-700 bg-zinc-900/50 p-3 text-white placeholder:text-zinc-600 focus:border-red-500 focus:outline-none"
+              rows={4}
+              placeholder="Why is this claim inaccurate?"
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-zinc-400 mb-1">Stake Amount (USDC)</label>
+            <input
+              type="number"
+              className="w-full rounded-lg border border-zinc-700 bg-zinc-900/50 p-3 text-white placeholder:text-zinc-600 focus:border-red-500 focus:outline-none"
+              placeholder="0.00"
+              value={stake}
+              onChange={(e) => setStake(e.target.value)}
+              min="1"
+              required
+            />
+          </div>
+
+          <div className="flex justify-end gap-3 mt-6">
+            <button
+              type="button"
+              onClick={onClose}
+              className="px-4 py-2 rounded-lg text-sm font-medium text-zinc-400 hover:text-white hover:bg-zinc-800 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className="px-4 py-2 rounded-lg bg-red-600 text-sm font-bold text-white hover:bg-red-700 disabled:opacity-50 transition-colors"
+            >
+              {loading ? 'Submitting...' : 'Confirm Dispute'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/types/dispute.ts b/src/types/dispute.ts
new file mode 100644
index 0000000..8e254be
--- /dev/null
+++ b/src/types/dispute.ts
@@ -0,0 +1,16 @@
+export interface Dispute {
+  id: string;
+  claimId: string;
+  reason: string;
+  status: 'OPEN' | 'VOTING' | 'RESOLVED' | 'FAILED';
+  proVotes: number;
+  conVotes: number; 
+  totalStaked: number;
+  createdAt: string;
+}
+
+export interface CreateDisputePayload {
+  claimId: string;
+  reason: string;
+  initialStake: number;
+}
\ No newline at end of file