diff --git a/frontend/components/CommentInput.tsx b/frontend/components/CommentInput.tsx
index 3dc199b0..79787542 100644
--- a/frontend/components/CommentInput.tsx
+++ b/frontend/components/CommentInput.tsx
@@ -13,7 +13,6 @@ interface CommentInputProps {
 }
 
 export function CommentInput({
-  proposalId,
   onSubmit,
   isReply = false,
   onCancel,
@@ -22,7 +21,6 @@ export function CommentInput({
   const { userSession } = useConnect();
   const [content, setContent] = useState('');
   const [error, setError] = useState<string | null>(null);
-  void proposalId;
 
   const handleSubmit = () => {
     if (!userSession) {
diff --git a/frontend/components/Comments.tsx b/frontend/components/Comments.tsx
index e6dc4626..508a37bc 100644
--- a/frontend/components/Comments.tsx
+++ b/frontend/components/Comments.tsx
@@ -17,7 +17,10 @@ interface CommentsProps {
 
 export default function Comments({ proposalId, userAddress }: CommentsProps) {
     const [comments, setComments] = useState<Comment[]>(() => {
-        if (typeof window === 'undefined') return [];
+        if (typeof window === 'undefined') {
+            return [];
+        }
+
         const stored = localStorage.getItem(`comments-${proposalId}`);
         return stored ? JSON.parse(stored) : [];
     });
diff --git a/frontend/components/MilestoneTracker.tsx b/frontend/components/MilestoneTracker.tsx
index df501c3f..6c1d643f 100644
--- a/frontend/components/MilestoneTracker.tsx
+++ b/frontend/components/MilestoneTracker.tsx
@@ -26,53 +26,99 @@ interface MilestoneTrackerProps {
 }
 
 export default function MilestoneTracker({ proposalId, totalFunding }: MilestoneTrackerProps) {
-  const defaultMilestones: Milestone[] = [
-    {
-      id: 1,
-      name: 'Project Kickoff',
-      description: 'Initial setup and planning phase',
-      percentage: 25,
-      fundAmount: totalFunding * 0.25,
-      status: 'completed',
-      verifications: [],
-      deliverables: ['Project plan', 'Technical specification']
-    },
-    {
-      id: 2,
-      name: 'Development Phase 1',
-      description: 'Core functionality implementation',
-      percentage: 50,
-      fundAmount: totalFunding * 0.25,
-      status: 'in-progress',
-      verifications: [],
-      deliverables: ['Working prototype', 'Test coverage']
-    },
-    {
-      id: 3,
-      name: 'Development Phase 2',
-      description: 'Advanced features and integration',
-      percentage: 75,
-      fundAmount: totalFunding * 0.25,
-      status: 'pending',
-      verifications: [],
-      deliverables: ['Feature complete', 'Integration tests']
-    },
-    {
-      id: 4,
-      name: 'Launch & Delivery',
-      description: 'Final testing and deployment',
-      percentage: 100,
-      fundAmount: totalFunding * 0.25,
-      status: 'pending',
-      verifications: [],
-      deliverables: ['Production deployment', 'Documentation']
+  const [milestones, setMilestones] = useState<Milestone[]>(() => {
+    if (typeof window === 'undefined') {
+      return [
+        {
+          id: 1,
+          name: 'Project Kickoff',
+          description: 'Initial setup and planning phase',
+          percentage: 25,
+          fundAmount: totalFunding * 0.25,
+          status: 'completed',
+          verifications: [],
+          deliverables: ['Project plan', 'Technical specification']
+        },
+        {
+          id: 2,
+          name: 'Development Phase 1',
+          description: 'Core functionality implementation',
+          percentage: 50,
+          fundAmount: totalFunding * 0.25,
+          status: 'in-progress',
+          verifications: [],
+          deliverables: ['Working prototype', 'Test coverage']
+        },
+        {
+          id: 3,
+          name: 'Development Phase 2',
+          description: 'Advanced features and integration',
+          percentage: 75,
+          fundAmount: totalFunding * 0.25,
+          status: 'pending',
+          verifications: [],
+          deliverables: ['Feature complete', 'Integration tests']
+        },
+        {
+          id: 4,
+          name: 'Launch & Delivery',
+          description: 'Final testing and deployment',
+          percentage: 100,
+          fundAmount: totalFunding * 0.25,
+          status: 'pending',
+          verifications: [],
+          deliverables: ['Production deployment', 'Documentation']
+        }
+      ];
     }
-  ];
 
-  const [milestones, setMilestones] = useState<Milestone[]>(() => {
-    if (typeof window === 'undefined') return defaultMilestones;
     const stored = localStorage.getItem(`proposal-${proposalId}-milestones`);
-    return stored ? JSON.parse(stored) : defaultMilestones;
+    if (stored) {
+      return JSON.parse(stored);
+    }
+
+    return [
+      {
+        id: 1,
+        name: 'Project Kickoff',
+        description: 'Initial setup and planning phase',
+        percentage: 25,
+        fundAmount: totalFunding * 0.25,
+        status: 'completed',
+        verifications: [],
+        deliverables: ['Project plan', 'Technical specification']
+      },
+      {
+        id: 2,
+        name: 'Development Phase 1',
+        description: 'Core functionality implementation',
+        percentage: 50,
+        fundAmount: totalFunding * 0.25,
+        status: 'in-progress',
+        verifications: [],
+        deliverables: ['Working prototype', 'Test coverage']
+      },
+      {
+        id: 3,
+        name: 'Development Phase 2',
+        description: 'Advanced features and integration',
+        percentage: 75,
+        fundAmount: totalFunding * 0.25,
+        status: 'pending',
+        verifications: [],
+        deliverables: ['Feature complete', 'Integration tests']
+      },
+      {
+        id: 4,
+        name: 'Launch & Delivery',
+        description: 'Final testing and deployment',
+        percentage: 100,
+        fundAmount: totalFunding * 0.25,
+        status: 'pending',
+        verifications: [],
+        deliverables: ['Production deployment', 'Documentation']
+      }
+    ];
   });
 
   const [selectedMilestone, setSelectedMilestone] = useState<Milestone | null>(null);
diff --git a/frontend/components/MultiSigTreasury.tsx b/frontend/components/MultiSigTreasury.tsx
index ae35c4ff..912ffc80 100644
--- a/frontend/components/MultiSigTreasury.tsx
+++ b/frontend/components/MultiSigTreasury.tsx
@@ -34,7 +34,9 @@ interface MultiSigConfig {
 }
 
 export default function MultiSigTreasury() {
-  const now = Date.parse(new Date().toISOString());
+  const [currentTime] = useState(() => Date.now());
+  const baseTime = currentTime;
+
   const [config, setConfig] = useState<MultiSigConfig>({
     totalSigners: 5,
     requiredSignatures: 3,
@@ -43,7 +45,7 @@ export default function MultiSigTreasury() {
     timelock: 48
   });
 
-  const [transactions, setTransactions] = useState<Transaction[]>([
+  const [transactions, setTransactions] = useState<Transaction[]>(() => [
     {
       id: 1,
       type: 'withdrawal',
@@ -54,16 +56,16 @@ export default function MultiSigTreasury() {
       requiredSignatures: 3,
       currentSignatures: 2,
       signers: [
-        { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: true, timestamp: now - 2 * 60 * 60 * 1000 },
-        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: now - 1 * 60 * 60 * 1000 },
+        { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: true, timestamp: baseTime - 2 * 60 * 60 * 1000 },
+        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: baseTime - 1 * 60 * 60 * 1000 },
         { address: 'SP7DEF...789', name: 'Carol (Admin)', signed: false },
         { address: 'SP6GHI...012', name: 'Dave (Auditor)', signed: false },
         { address: 'SP5JKL...345', name: 'Eve (Advisor)', signed: false }
       ],
       status: 'pending',
-      createdAt: now - 3 * 60 * 60 * 1000,
+      createdAt: baseTime - 3 * 60 * 60 * 1000,
       threshold: 75000,
-      deadline: now + 45 * 60 * 60 * 1000
+      deadline: baseTime + 45 * 60 * 60 * 1000
     },
     {
       id: 2,
@@ -75,15 +77,15 @@ export default function MultiSigTreasury() {
       currentSignatures: 1,
       signers: [
         { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: false },
-        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: now - 12 * 60 * 60 * 1000 },
+        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: baseTime - 12 * 60 * 60 * 1000 },
         { address: 'SP7DEF...789', name: 'Carol (Admin)', signed: false },
         { address: 'SP6GHI...012', name: 'Dave (Auditor)', signed: false },
         { address: 'SP5JKL...345', name: 'Eve (Advisor)', signed: false }
       ],
       status: 'pending',
-      createdAt: now - 24 * 60 * 60 * 1000,
+      createdAt: baseTime - 24 * 60 * 60 * 1000,
       threshold: 50000,
-      deadline: now + 24 * 60 * 60 * 1000
+      deadline: baseTime + 24 * 60 * 60 * 1000
     },
     {
       id: 3,
@@ -95,20 +97,21 @@ export default function MultiSigTreasury() {
       requiredSignatures: 3,
       currentSignatures: 3,
       signers: [
-        { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: true, timestamp: now - 48 * 60 * 60 * 1000 },
-        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: now - 46 * 60 * 60 * 1000 },
-        { address: 'SP7DEF...789', name: 'Carol (Admin)', signed: true, timestamp: now - 45 * 60 * 60 * 1000 },
+        { address: 'SP9XYZ...123', name: 'Alice (Treasury Manager)', signed: true, timestamp: baseTime - 48 * 60 * 60 * 1000 },
+        { address: 'SP8ABC...456', name: 'Bob (Finance Lead)', signed: true, timestamp: baseTime - 46 * 60 * 60 * 1000 },
+        { address: 'SP7DEF...789', name: 'Carol (Admin)', signed: true, timestamp: baseTime - 45 * 60 * 60 * 1000 },
         { address: 'SP6GHI...012', name: 'Dave (Auditor)', signed: false },
         { address: 'SP5JKL...345', name: 'Eve (Advisor)', signed: false }
       ],
       status: 'executed',
-      createdAt: now - 72 * 60 * 60 * 1000,
+      createdAt: baseTime - 72 * 60 * 60 * 1000,
       threshold: 50000,
-      deadline: now - 24 * 60 * 60 * 1000
+      deadline: baseTime - 24 * 60 * 60 * 1000
     }
   ]);
 
-  const [showConfigModal, setShowConfigModal] = useState(false);
+  const [, setShowNewTxModal] = useState(false);
+  const [, setShowConfigModal] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
   const [filterStatus, setFilterStatus] = useState<'all' | Transaction['status']>('all');
 
@@ -180,7 +183,7 @@ export default function MultiSigTreasury() {
   };
 
   const formatTimeRemaining = (deadline: number) => {
-    const diff = deadline - now;
+    const diff = deadline - currentTime;
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(hours / 24);
     
@@ -221,6 +224,7 @@ export default function MultiSigTreasury() {
             </button>
           )}
           <button
+            onClick={() => setShowNewTxModal(true)}
             disabled={isPaused}
             className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700 
                      disabled:bg-gray-400 disabled:cursor-not-allowed"
diff --git a/frontend/components/MultisigFlow.tsx b/frontend/components/MultisigFlow.tsx
index 9b149be9..8f62209b 100644
--- a/frontend/components/MultisigFlow.tsx
+++ b/frontend/components/MultisigFlow.tsx
@@ -10,15 +10,12 @@ const signers = [
 ];
 
 export default function MultisigFlow() {
-    const signedCount = signers.filter(s => s.status === 'signed').length;
-    const progressText = `${signedCount}/${signers.length} signatures collected`;
-
     return (
         <div className="p-8 bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-[40px] overflow-hidden">
             <div className="flex justify-between items-start mb-10">
                 <div>
                     <h3 className="text-xl font-black uppercase tracking-tight text-white mb-1">Execution Guard</h3>
-                    <p className="text-[10px] font-bold text-slate-500 uppercase">{progressText}</p>
+                    <p className="text-[10px] font-bold text-slate-500 uppercase">2/3 Multi-signature verification required</p>
                 </div>
                 <Shield className="w-8 h-8 text-orange-600" />
             </div>
diff --git a/frontend/components/NotificationHub.tsx b/frontend/components/NotificationHub.tsx
index 67385145..ccd3aa64 100644
--- a/frontend/components/NotificationHub.tsx
+++ b/frontend/components/NotificationHub.tsx
@@ -14,26 +14,29 @@ interface Notification {
 }
 
 export default function NotificationHub() {
-    const now = Date.parse(new Date().toISOString());
     const [isOpen, setIsOpen] = useState(false);
-    const [notifications, setNotifications] = useState<Notification[]>([
-        {
-            id: '1',
-            title: 'Proposal Funded',
-            message: 'Your proposal "Stacks Wallet Integration" has reached the funding threshold!',
-            type: 'success',
-            timestamp: new Date(now),
-            read: false
-        },
-        {
-            id: '2',
-            title: 'New Governance Vote',
-            message: 'A new platform-wide vote on Treasury Allocation is live.',
-            type: 'governance',
-            timestamp: new Date(now - 3600000),
-            read: false
-        }
-    ]);
+    const [notifications, setNotifications] = useState<Notification[]>(() => {
+        const baseTime = Date.now();
+
+        return [
+            {
+                id: '1',
+                title: 'Proposal Funded',
+                message: 'Your proposal "Stacks Wallet Integration" has reached the funding threshold!',
+                type: 'success',
+                timestamp: new Date(baseTime),
+                read: false
+            },
+            {
+                id: '2',
+                title: 'New Governance Vote',
+                message: 'A new platform-wide vote on Treasury Allocation is live.',
+                type: 'governance',
+                timestamp: new Date(baseTime - 3600000),
+                read: false
+            }
+        ];
+    });
 
     const unreadCount = notifications.filter(n => !n.read).length;
 
diff --git a/frontend/components/ParticipationHeatmap.tsx b/frontend/components/ParticipationHeatmap.tsx
index 4954988d..68cfd0a5 100644
--- a/frontend/components/ParticipationHeatmap.tsx
+++ b/frontend/components/ParticipationHeatmap.tsx
@@ -5,7 +5,7 @@ import { Calendar } from 'lucide-react';
 
 export default function ParticipationHeatmap() {
     // Simulating 7 days x 12 intervals
-    const grid = Array.from({ length: 84 }).map(() => Math.random());
+    const grid = Array.from({ length: 84 }, (_, index) => ((index * 37) % 100) / 100);
 
     return (
         <div className="p-8 bg-slate-900/50 backdrop-blur-xl border border-white/10 rounded-[40px] overflow-hidden">
diff --git a/frontend/components/PayoutScheduler.tsx b/frontend/components/PayoutScheduler.tsx
index 5f81fbea..e7ea3216 100644
--- a/frontend/components/PayoutScheduler.tsx
+++ b/frontend/components/PayoutScheduler.tsx
@@ -30,71 +30,79 @@ interface PaymentBatch {
 }
 
 export default function PayoutScheduler() {
-  const now = Date.parse(new Date().toISOString());
-  const [payments, setPayments] = useState<Payment[]>([
-    {
-      id: 1,
-      grantee: 'SP1ABC...DEF',
-      proposalId: 42,
-      proposalTitle: 'DeFi Lending Protocol',
-      amount: 25000,
-      type: 'milestone',
-      status: 'scheduled',
-      scheduledDate: now + 2 * 24 * 60 * 60 * 1000,
-      milestone: 'Phase 1: Smart Contract Development'
-    },
-    {
-      id: 2,
-      grantee: 'SP2XYZ...GHI',
-      proposalId: 28,
-      proposalTitle: 'NFT Marketplace',
-      amount: 15000,
-      type: 'recurring',
-      status: 'scheduled',
-      scheduledDate: now + 5 * 24 * 60 * 60 * 1000,
-      recurringInterval: 'monthly',
-      nextPayment: now + 35 * 24 * 60 * 60 * 1000
-    },
-    {
-      id: 3,
-      grantee: 'SP1ABC...DEF',
-      proposalId: 42,
-      proposalTitle: 'DeFi Lending Protocol',
-      amount: 25000,
-      type: 'milestone',
-      status: 'completed',
-      scheduledDate: now - 10 * 24 * 60 * 60 * 1000,
-      completedDate: now - 10 * 24 * 60 * 60 * 1000,
-      milestone: 'Phase 0: Planning & Design',
-      receiptsUrl: '/receipts/payment-003.pdf'
-    },
-    {
-      id: 4,
-      grantee: 'SP3MNO...PQR',
-      proposalId: 15,
-      proposalTitle: 'DAO Governance Dashboard',
-      amount: 10000,
-      type: 'one-time',
-      status: 'failed',
-      scheduledDate: now - 2 * 24 * 60 * 60 * 1000,
-      retryCount: 2
-    }
-  ]);
-
-  const [batches] = useState<PaymentBatch[]>([
-    {
-      id: 'BATCH-001',
-      payments: [1, 2],
-      totalAmount: 40000,
-      scheduledDate: now + 2 * 24 * 60 * 60 * 1000,
-      status: 'pending',
-      gasOptimization: 35
-    }
-  ]);
+  const [payments, setPayments] = useState<Payment[]>(() => {
+    const baseTime = Date.now();
+
+    return [
+      {
+        id: 1,
+        grantee: 'SP1ABC...DEF',
+        proposalId: 42,
+        proposalTitle: 'DeFi Lending Protocol',
+        amount: 25000,
+        type: 'milestone',
+        status: 'scheduled',
+        scheduledDate: baseTime + 2 * 24 * 60 * 60 * 1000,
+        milestone: 'Phase 1: Smart Contract Development'
+      },
+      {
+        id: 2,
+        grantee: 'SP2XYZ...GHI',
+        proposalId: 28,
+        proposalTitle: 'NFT Marketplace',
+        amount: 15000,
+        type: 'recurring',
+        status: 'scheduled',
+        scheduledDate: baseTime + 5 * 24 * 60 * 60 * 1000,
+        recurringInterval: 'monthly',
+        nextPayment: baseTime + 35 * 24 * 60 * 60 * 1000
+      },
+      {
+        id: 3,
+        grantee: 'SP1ABC...DEF',
+        proposalId: 42,
+        proposalTitle: 'DeFi Lending Protocol',
+        amount: 25000,
+        type: 'milestone',
+        status: 'completed',
+        scheduledDate: baseTime - 10 * 24 * 60 * 60 * 1000,
+        completedDate: baseTime - 10 * 24 * 60 * 60 * 1000,
+        milestone: 'Phase 0: Planning & Design',
+        receiptsUrl: '/receipts/payment-003.pdf'
+      },
+      {
+        id: 4,
+        grantee: 'SP3MNO...PQR',
+        proposalId: 15,
+        proposalTitle: 'DAO Governance Dashboard',
+        amount: 10000,
+        type: 'one-time',
+        status: 'failed',
+        scheduledDate: baseTime - 2 * 24 * 60 * 60 * 1000,
+        retryCount: 2
+      }
+    ];
+  });
+
+  const [batches] = useState<PaymentBatch[]>(() => {
+    const baseTime = Date.now();
+
+    return [
+      {
+        id: 'BATCH-001',
+        payments: [1, 2],
+        totalAmount: 40000,
+        scheduledDate: baseTime + 2 * 24 * 60 * 60 * 1000,
+        status: 'pending',
+        gasOptimization: 35
+      }
+    ];
+  });
 
   const [filterStatus, setFilterStatus] = useState<'all' | Payment['status']>('all');
   const [filterType, setFilterType] = useState<'all' | Payment['type']>('all');
   const [showScheduleModal, setShowScheduleModal] = useState(false);
+  const [, setShowBatchModal] = useState(false);
 
   const [newPayment, setNewPayment] = useState({
     grantee: '',
@@ -118,7 +126,7 @@ export default function PayoutScheduler() {
     setTimeout(() => {
       setPayments(payments.map(p => 
         p.id === paymentId 
-          ? { ...p, status: 'completed' as const, completedDate: Date.parse(new Date().toISOString()) }
+          ? { ...p, status: 'completed' as const, completedDate: Date.now() }
           : p
       ));
     }, 2000);
@@ -198,6 +206,7 @@ export default function PayoutScheduler() {
         </div>
         <div className="flex gap-2">
           <button
+            onClick={() => setShowBatchModal(true)}
             className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg text-sm font-medium 
                      hover:bg-gray-50 dark:hover:bg-gray-700"
           >
diff --git a/frontend/components/PortfolioShowcase.tsx b/frontend/components/PortfolioShowcase.tsx
index b80079f5..70824c39 100644
--- a/frontend/components/PortfolioShowcase.tsx
+++ b/frontend/components/PortfolioShowcase.tsx
@@ -33,94 +33,97 @@ interface PortfolioShowcaseProps {
 }
 
 export default function PortfolioShowcase({ userAddress }: PortfolioShowcaseProps) {
-  const now = Date.parse(new Date().toISOString());
-  const [portfolioItems] = useState<PortfolioItem[]>([
-    {
-      proposalId: 42,
-      title: 'DeFi Lending Protocol Development',
-      description: 'Built a decentralized lending platform enabling users to lend and borrow assets with competitive rates.',
-      category: 'DeFi',
-      amount: 75000,
-      status: 'executed',
-      impact: {
-        stxDistributed: 75000,
-        communitySupport: 89,
-        completionRate: 100
-      },
-      metrics: {
-        yesVotes: 450,
-        noVotes: 82,
-        participationRate: 76
-      },
-      timeline: {
-        created: now - 120 * 24 * 60 * 60 * 1000,
-        approved: now - 100 * 24 * 60 * 60 * 1000,
-        executed: now - 30 * 24 * 60 * 60 * 1000
-      },
-      outcomes: [
-        '1,200+ active users',
-        '$2.5M in total value locked',
-        '98% uptime since launch',
-        'Featured in 3 major crypto publications'
-      ]
-    },
-    {
-      proposalId: 28,
-      title: 'Community NFT Marketplace',
-      description: 'Created a user-friendly NFT marketplace with low fees and advanced features for creators.',
-      category: 'NFT',
-      amount: 50000,
-      status: 'executed',
-      impact: {
-        stxDistributed: 50000,
-        communitySupport: 92,
-        completionRate: 100
-      },
-      metrics: {
-        yesVotes: 380,
-        noVotes: 45,
-        participationRate: 68
-      },
-      timeline: {
-        created: now - 150 * 24 * 60 * 60 * 1000,
-        approved: now - 130 * 24 * 60 * 60 * 1000,
-        executed: now - 60 * 24 * 60 * 60 * 1000
-      },
-      outcomes: [
-        '500+ NFTs minted',
-        '250+ creators onboarded',
-        '$500K in trading volume',
-        'Integration with 5 major wallets'
-      ]
-    },
-    {
-      proposalId: 15,
-      title: 'DAO Governance Dashboard',
-      description: 'Developed a comprehensive dashboard for tracking proposals, votes, and treasury analytics.',
-      category: 'Infrastructure',
-      amount: 35000,
-      status: 'approved',
-      impact: {
-        stxDistributed: 35000,
-        communitySupport: 85,
-        completionRate: 75
-      },
-      metrics: {
-        yesVotes: 320,
-        noVotes: 58,
-        participationRate: 72
+  const [portfolioItems] = useState<PortfolioItem[]>(() => {
+    const baseTime = Date.now();
+
+    return [
+      {
+        proposalId: 42,
+        title: 'DeFi Lending Protocol Development',
+        description: 'Built a decentralized lending platform enabling users to lend and borrow assets with competitive rates.',
+        category: 'DeFi',
+        amount: 75000,
+        status: 'executed',
+        impact: {
+          stxDistributed: 75000,
+          communitySupport: 89,
+          completionRate: 100
+        },
+        metrics: {
+          yesVotes: 450,
+          noVotes: 82,
+          participationRate: 76
+        },
+        timeline: {
+          created: baseTime - 120 * 24 * 60 * 60 * 1000,
+          approved: baseTime - 100 * 24 * 60 * 60 * 1000,
+          executed: baseTime - 30 * 24 * 60 * 60 * 1000
+        },
+        outcomes: [
+          '1,200+ active users',
+          '$2.5M in total value locked',
+          '98% uptime since launch',
+          'Featured in 3 major crypto publications'
+        ]
       },
-      timeline: {
-        created: now - 90 * 24 * 60 * 60 * 1000,
-        approved: now - 70 * 24 * 60 * 60 * 1000
+      {
+        proposalId: 28,
+        title: 'Community NFT Marketplace',
+        description: 'Created a user-friendly NFT marketplace with low fees and advanced features for creators.',
+        category: 'NFT',
+        amount: 50000,
+        status: 'executed',
+        impact: {
+          stxDistributed: 50000,
+          communitySupport: 92,
+          completionRate: 100
+        },
+        metrics: {
+          yesVotes: 380,
+          noVotes: 45,
+          participationRate: 68
+        },
+        timeline: {
+          created: baseTime - 150 * 24 * 60 * 60 * 1000,
+          approved: baseTime - 130 * 24 * 60 * 60 * 1000,
+          executed: baseTime - 60 * 24 * 60 * 60 * 1000
+        },
+        outcomes: [
+          '500+ NFTs minted',
+          '250+ creators onboarded',
+          '$500K in trading volume',
+          'Integration with 5 major wallets'
+        ]
       },
-      outcomes: [
-        '800+ daily active users',
-        '15 new features launched',
-        'Mobile app in development'
-      ]
-    }
-  ]);
+      {
+        proposalId: 15,
+        title: 'DAO Governance Dashboard',
+        description: 'Developed a comprehensive dashboard for tracking proposals, votes, and treasury analytics.',
+        category: 'Infrastructure',
+        amount: 35000,
+        status: 'approved',
+        impact: {
+          stxDistributed: 35000,
+          communitySupport: 85,
+          completionRate: 75
+        },
+        metrics: {
+          yesVotes: 320,
+          noVotes: 58,
+          participationRate: 72
+        },
+        timeline: {
+          created: baseTime - 90 * 24 * 60 * 60 * 1000,
+          approved: baseTime - 70 * 24 * 60 * 60 * 1000
+        },
+        outcomes: [
+          '800+ daily active users',
+          '15 new features launched',
+          'Mobile app in development'
+        ]
+      }
+    ];
+  });
 
   const [selectedItem, setSelectedItem] = useState<PortfolioItem | null>(null);
 
diff --git a/frontend/components/ProposalAnalytics.tsx b/frontend/components/ProposalAnalytics.tsx
index b7a00d41..f347baa1 100644
--- a/frontend/components/ProposalAnalytics.tsx
+++ b/frontend/components/ProposalAnalytics.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface ProposalStats {
   category: string;
@@ -41,23 +41,6 @@ export default function ProposalAnalytics() {
     return ((stat.approved / stat.total) * 100).toFixed(1);
   };
 
-  const _predictSuccess = (category: string, amount: number, timeline: number) => {
-    const stat = categoryStats.find((s) => s.category === category);
-    if (!stat) return 50;
-
-    let score = parseFloat(calculateSuccessRate(stat));
-
-    // Adjust based on amount
-    if (amount > stat.avgAmount * 1.5) score -= 15;
-    else if (amount < stat.avgAmount * 0.5) score += 10;
-
-    // Adjust based on timeline
-    if (timeline > stat.avgTimeToExecution * 1.5) score -= 10;
-    else if (timeline < stat.avgTimeToExecution * 0.8) score += 5;
-
-    return Math.max(0, Math.min(100, score));
-  };
-
   const totalProposals = categoryStats.reduce((sum, s) => sum + s.total, 0);
   const totalApproved = categoryStats.reduce((sum, s) => sum + s.approved, 0);
   const overallSuccessRate = ((totalApproved / totalProposals) * 100).toFixed(1);
diff --git a/frontend/components/ProposalArchive.tsx b/frontend/components/ProposalArchive.tsx
index ff1c3026..ecdbc53e 100644
--- a/frontend/components/ProposalArchive.tsx
+++ b/frontend/components/ProposalArchive.tsx
@@ -15,37 +15,38 @@ interface Proposal {
   tags: string[];
 }
 
-// Mock data - would come from API/blockchain
-const MOCK_PROPOSALS: Proposal[] = [
-  {
-    id: 1,
-    title: 'DeFi Lending Protocol Development',
-    description: 'Build a decentralized lending platform on Stacks',
-    status: 'executed',
-    category: 'defi',
-    amount: 75000,
-    createdAt: Date.now() - 90 * 24 * 60 * 60 * 1000,
-    votes: { yes: 450, no: 120 },
-    author: 'SP1ABC...XYZ',
-    tags: ['defi', 'lending', 'smart-contracts']
-  },
-  {
-    id: 2,
-    title: 'NFT Marketplace Infrastructure',
-    description: 'Create marketplace for trading NFTs',
-    status: 'approved',
-    category: 'nft',
-    amount: 50000,
-    createdAt: Date.now() - 60 * 24 * 60 * 60 * 1000,
-    votes: { yes: 380, no: 95 },
-    author: 'SP2DEF...ABC',
-    tags: ['nft', 'marketplace']
-  }
-  // Add more mock data as needed
-];
-
 export default function ProposalArchive() {
-  const [proposals] = useState<Proposal[]>(MOCK_PROPOSALS);
+  const [now] = useState(() => Date.now());
+  const [proposals] = useState<Proposal[]>(() => {
+    const baseTime = Date.now();
+
+    return [
+      {
+        id: 1,
+        title: 'DeFi Lending Protocol Development',
+        description: 'Build a decentralized lending platform on Stacks',
+        status: 'executed',
+        category: 'defi',
+        amount: 75000,
+        createdAt: baseTime - 90 * 24 * 60 * 60 * 1000,
+        votes: { yes: 450, no: 120 },
+        author: 'SP1ABC...XYZ',
+        tags: ['defi', 'lending', 'smart-contracts']
+      },
+      {
+        id: 2,
+        title: 'NFT Marketplace Infrastructure',
+        description: 'Create marketplace for trading NFTs',
+        status: 'approved',
+        category: 'nft',
+        amount: 50000,
+        createdAt: baseTime - 60 * 24 * 60 * 60 * 1000,
+        votes: { yes: 380, no: 95 },
+        author: 'SP2DEF...ABC',
+        tags: ['nft', 'marketplace']
+      }
+    ];
+  });
   const [searchQuery, setSearchQuery] = useState('');
   const [filters, setFilters] = useState({
     status: 'all',
@@ -86,7 +87,6 @@ export default function ProposalArchive() {
 
     // Date range
     if (filters.dateRange !== 'all') {
-      const now = Date.now();
       const ranges: Record<string, number> = {
         '7d': 7 * 24 * 60 * 60 * 1000,
         '30d': 30 * 24 * 60 * 60 * 1000,
diff --git a/frontend/components/ProposalCollaboration.tsx b/frontend/components/ProposalCollaboration.tsx
index c4b21d96..f034724a 100644
--- a/frontend/components/ProposalCollaboration.tsx
+++ b/frontend/components/ProposalCollaboration.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Contributor {
   address: string;
@@ -16,15 +16,34 @@ interface ProposalCollaborationProps {
 }
 
 export default function ProposalCollaboration({ proposalId, authorAddress }: ProposalCollaborationProps) {
-  const [contributors, setContributors] = useState<Contributor[]>([
-    {
-      address: authorAddress,
-      role: 'author',
-      contribution: 'Original proposal creator',
-      addedAt: Date.now(),
-      rewardShare: 60
+  const [contributors, setContributors] = useState<Contributor[]>(() => {
+    if (typeof window === 'undefined') {
+      return [
+        {
+          address: authorAddress,
+          role: 'author',
+          contribution: 'Original proposal creator',
+          addedAt: Date.now(),
+          rewardShare: 60
+        }
+      ];
     }
-  ]);
+
+    const stored = localStorage.getItem(`proposal-${proposalId}-contributors`);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+
+    return [
+      {
+        address: authorAddress,
+        role: 'author',
+        contribution: 'Original proposal creator',
+        addedAt: Date.now(),
+        rewardShare: 60
+      }
+    ];
+  });
   const [showAddForm, setShowAddForm] = useState(false);
   const [newContributor, setNewContributor] = useState({
     address: '',
@@ -33,13 +52,6 @@ export default function ProposalCollaboration({ proposalId, authorAddress }: Pro
     rewardShare: 10
   });
 
-  useEffect(() => {
-    const stored = localStorage.getItem(`proposal-${proposalId}-contributors`);
-    if (stored) {
-      setContributors(JSON.parse(stored));
-    }
-  }, [proposalId]);
-
   const saveContributors = (updated: Contributor[]) => {
     localStorage.setItem(`proposal-${proposalId}-contributors`, JSON.stringify(updated));
     setContributors(updated);
diff --git a/frontend/components/ProposalDashboard.tsx b/frontend/components/ProposalDashboard.tsx
index 68b3e603..33c8cfd0 100644
--- a/frontend/components/ProposalDashboard.tsx
+++ b/frontend/components/ProposalDashboard.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import { PaginatedProposalList } from './PaginatedProposalList';
 import { ProposalFilterPanel } from './ProposalFilterPanel';
 import { ProposalSortbar } from './ProposalSortbar';
@@ -13,7 +13,7 @@ type ValidSortBy = 'title' | 'createdAt' | 'votes' | 'requestedAmount';
 export const ProposalDashboard: React.FC<ProposalDashboardProps> = ({
   onProposalSelect,
 }) => {
-  const { filters, sort, updateFilter, updateSort, clearFilters } = useProposalFilters();
+  const { sort, updateFilter, updateSort } = useProposalFilters();
   const [selectedStatus, setSelectedStatus] = React.useState<string | null>(null);
   const [selectedCategory, setSelectedCategory] = React.useState<string | null>(null);
 
diff --git a/frontend/components/ProposalDependencies.tsx b/frontend/components/ProposalDependencies.tsx
index 2ea5d731..237660a7 100644
--- a/frontend/components/ProposalDependencies.tsx
+++ b/frontend/components/ProposalDependencies.tsx
@@ -14,7 +14,7 @@ interface ProposalDependenciesProps {
   currentProposalTitle: string;
 }
 
-export default function ProposalDependencies({ proposalId: _proposalId, currentProposalTitle: _currentProposalTitle }: ProposalDependenciesProps) {
+export default function ProposalDependencies({ proposalId, currentProposalTitle }: ProposalDependenciesProps) {
   const [dependencies, setDependencies] = useState<Dependency[]>([
     {
       proposalId: 12,
@@ -125,7 +125,12 @@ export default function ProposalDependencies({ proposalId: _proposalId, currentP
   return (
     <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700">
       <div className="flex items-center justify-between mb-6">
-        <h3 className="text-xl font-bold">🔗 Proposal Dependencies</h3>
+        <div>
+          <h3 className="text-xl font-bold">🔗 Proposal Dependencies</h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Proposal #{proposalId}: {currentProposalTitle}
+          </p>
+        </div>
         <button
           onClick={() => setShowAddForm(!showAddForm)}
           className="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium hover:bg-blue-700"
@@ -273,7 +278,7 @@ export default function ProposalDependencies({ proposalId: _proposalId, currentP
           <div className="flex items-center gap-2 overflow-x-auto pb-2">
             {dependencies
               .filter((d) => d.type === 'requires')
-              .map((dep, idx) => (
+              .map((dep) => (
                 <div key={dep.proposalId} className="flex items-center gap-2">
                   <div className="px-3 py-2 bg-white dark:bg-gray-800 rounded border border-gray-300 dark:border-gray-600 text-sm whitespace-nowrap">
                     #{dep.proposalId}
diff --git a/frontend/components/ProposalList.tsx b/frontend/components/ProposalList.tsx
index dd851b38..1e4068f3 100644
--- a/frontend/components/ProposalList.tsx
+++ b/frontend/components/ProposalList.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useCallback } from 'react';
 import { boolCV, uintCV, AnchorMode, PostConditionMode } from '@stacks/transactions';
-import { getAllProposals, getStake, callVote } from '@/lib/stacks';
+import { getAllProposals, getStake } from '@/lib/stacks';
 import { formatSTX } from '@/utils/formatSTX';
 import { CONTRACT_ADDRESS, CONTRACT_NAME } from '../config';
 import { getStacksNetwork } from '../src/config/stacks-network';
@@ -45,9 +45,25 @@ export default function ProposalList({ userAddress }: ProposalListProps) {
         activeFilterCount,
     } = useNextProposalFilters();
 
+    const fetchProposals = useCallback(async () => {
+        try {
+            setLoading(true);
+            setError('');
+
+            // Use centralized API with caching
+            const fetchedProposals = await getAllProposals();
+            setProposals(fetchedProposals);
+        } catch (err: unknown) {
+            console.error('Error fetching proposals:', err);
+            setError('Failed to load proposals. Please try again.');
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
     useEffect(() => {
         fetchProposals();
-    }, []);
+    }, [fetchProposals]);
 
     useEffect(() => {
         const fetchStake = async () => {
@@ -71,22 +87,6 @@ export default function ProposalList({ userAddress }: ProposalListProps) {
         fetchStake();
     }, [userAddress]);
 
-    const fetchProposals = useCallback(async () => {
-        try {
-            setLoading(true);
-            setError('');
-
-            // Use centralized API with caching
-            const fetchedProposals = await getAllProposals();
-            setProposals(fetchedProposals);
-            setLoading(false);
-        } catch (err: unknown) {
-            console.error('Error fetching proposals:', err);
-            setError('Failed to load proposals. Please try again.');
-            setLoading(false);
-        }
-    }, []);
-
     useRefreshOnConfirmation(fetchProposals);
 
     // Uses centralized formatSTX from utils/formatSTX
@@ -159,7 +159,7 @@ export default function ProposalList({ userAddress }: ProposalListProps) {
             const { openContractCall } = await import('@stacks/connect');
             await execute(async () => {
                 return new Promise<string>((resolve, reject) => {
-                    const result = openContractCall({
+                    openContractCall({
                         ...options,
                         onFinish: (data: { txId: string }) => {
                             console.log('Vote transaction submitted:', data);
diff --git a/frontend/components/ProposalTemplates.tsx b/frontend/components/ProposalTemplates.tsx
index fcce6b0a..89c1bdb4 100644
--- a/frontend/components/ProposalTemplates.tsx
+++ b/frontend/components/ProposalTemplates.tsx
@@ -183,14 +183,12 @@ interface ProposalTemplatesProps {
 export default function ProposalTemplates({ onTemplateSelect }: ProposalTemplatesProps) {
   const [selectedCategory, setSelectedCategory] = useState<string>('all');
   const [previewTemplate, setPreviewTemplate] = useState<Template | null>(null);
-  const [customTemplates, _setCustomTemplates] = useState<Template[]>([]);
 
   const categories = ['all', 'Funding', 'Governance', 'Technical', 'Community'];
 
-  const filteredTemplates = [
-    ...PREDEFINED_TEMPLATES,
-    ...customTemplates
-  ].filter(t => selectedCategory === 'all' || t.category === selectedCategory);
+  const filteredTemplates = PREDEFINED_TEMPLATES.filter(
+    (t) => selectedCategory === 'all' || t.category === selectedCategory
+  );
 
   const getCategoryColor = (category: string) => {
     switch (category) {
diff --git a/frontend/components/ProposalVersioning.tsx b/frontend/components/ProposalVersioning.tsx
index 5ac262aa..ba93520e 100644
--- a/frontend/components/ProposalVersioning.tsx
+++ b/frontend/components/ProposalVersioning.tsx
@@ -23,16 +23,18 @@ interface ProposalVersioningProps {
   };
 }
 
-export default function ProposalVersioning({ proposalId, currentData }: ProposalVersioningProps) {
+export default function ProposalVersioning({ proposalId }: ProposalVersioningProps) {
   const [versions] = useState<Version[]>(() => {
-    if (typeof window === 'undefined') return [];
+    if (typeof window === 'undefined') {
+      return [];
+    }
+
     const stored = localStorage.getItem(`proposal-${proposalId}-versions`);
     return stored ? JSON.parse(stored) : [];
   });
   const [showHistory, setShowHistory] = useState(false);
   const [selectedVersion, setSelectedVersion] = useState<Version | null>(null);
   const [showDiff, setShowDiff] = useState(false);
-  void currentData;
 
   const revertToVersion = (version: Version) => {
     if (confirm(`Are you sure you want to revert to version ${version.id}?`)) {
@@ -45,6 +47,7 @@ export default function ProposalVersioning({ proposalId, currentData }: Proposal
   const renderDiff = (old: string, newText: string) => {
     const oldLines = old.split('\n');
     const newLines = newText.split('\n');
+
     return (
       <div className="grid grid-cols-2 gap-4 text-sm">
         <div>
diff --git a/frontend/components/ProposalWorkflow.tsx b/frontend/components/ProposalWorkflow.tsx
index ce31e508..f73e412a 100644
--- a/frontend/components/ProposalWorkflow.tsx
+++ b/frontend/components/ProposalWorkflow.tsx
@@ -73,11 +73,16 @@ const STAGES: StageConfig[] = [
 
 export default function ProposalWorkflow({ proposalId, initialStage = 'Draft', onStageChange }: ProposalWorkflowProps) {
   const [currentStage, setCurrentStage] = useState<Stage>(() => {
-    if (typeof window === 'undefined') return initialStage;
+    if (typeof window === 'undefined') {
+      return initialStage;
+    }
+
     const stored = localStorage.getItem(`proposal-${proposalId}-workflow`);
-    if (!stored) return initialStage;
-    const data = JSON.parse(stored) as { currentStage?: Stage };
-    return data.currentStage ?? initialStage;
+    if (!stored) {
+      return initialStage;
+    }
+
+    return JSON.parse(stored).currentStage ?? initialStage;
   });
   const [stageProgress] = useState<Record<Stage, number>>(() => {
     if (typeof window === 'undefined') {
@@ -89,6 +94,7 @@ export default function ProposalWorkflow({ proposalId, initialStage = 'Draft', o
         Executed: 0
       };
     }
+
     const stored = localStorage.getItem(`proposal-${proposalId}-workflow`);
     if (!stored) {
       return {
@@ -99,8 +105,8 @@ export default function ProposalWorkflow({ proposalId, initialStage = 'Draft', o
         Executed: 0
       };
     }
-    const data = JSON.parse(stored) as { stageProgress?: Record<Stage, number> };
-    return data.stageProgress ?? {
+
+    return JSON.parse(stored).stageProgress ?? {
       Draft: 0,
       Review: 0,
       Active: 0,
diff --git a/frontend/components/ReputationSystem.tsx b/frontend/components/ReputationSystem.tsx
index 36b2a48c..d0625790 100644
--- a/frontend/components/ReputationSystem.tsx
+++ b/frontend/components/ReputationSystem.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
 interface Achievement {
   id: string;
@@ -33,31 +33,28 @@ const ACHIEVEMENTS: Achievement[] = [
 ];
 
 export default function ReputationSystem({ userAddress, reputation }: ReputationSystemProps) {
-  const now = Date.parse(new Date().toISOString());
   const [achievements] = useState<Achievement[]>(() => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem(`achievements-${userAddress}`);
-      if (stored) return JSON.parse(stored);
+    if (typeof window === 'undefined') {
+      return ACHIEVEMENTS;
     }
 
-    const seed = userAddress.split('').reduce((sum, ch) => sum + ch.charCodeAt(0), 0);
-    return ACHIEVEMENTS.map((ach, index) => {
-      const max = ach.maxProgress || 1;
-      const score = (seed + index * 37) % 100;
-      if (score > 70) {
-        const daysAgo = (seed + index * 11) % 30;
-        return { ...ach, unlockedAt: now - daysAgo * 24 * 60 * 60 * 1000 };
+    const stored = localStorage.getItem(`achievements-${userAddress}`);
+    if (stored) {
+      return JSON.parse(stored);
+    }
+
+    return ACHIEVEMENTS.map(ach => {
+      const random = Math.random();
+      if (random > 0.7) {
+        return { ...ach, unlockedAt: Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000 };
       }
-      if (score > 40) {
-        return { ...ach, progress: ((seed + index * 17) % max) + 1 };
+      if (random > 0.4) {
+        return { ...ach, progress: Math.floor(Math.random() * (ach.maxProgress || 1)) };
       }
       return ach;
     });
   });
-  const unlockedCount = useMemo(
-    () => achievements.filter(a => a.unlockedAt).length,
-    [achievements]
-  );
+  const unlockedCount = achievements.filter(a => a.unlockedAt).length;
 
   const getTier = (rep: number) => {
     if (rep >= 2000) return { name: 'Diamond', color: 'from-cyan-400 to-blue-500', icon: '💎', min: 2000, max: 999999 };
diff --git a/frontend/components/STXDistributionChart.tsx b/frontend/components/STXDistributionChart.tsx
index 63946f4a..8ef73abd 100644
--- a/frontend/components/STXDistributionChart.tsx
+++ b/frontend/components/STXDistributionChart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';
+import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 import { useGovernanceAnalytics } from '@/hooks/useGovernanceAnalytics';
 
 export default function STXDistributionChart() {
diff --git a/frontend/components/ScheduledVote.tsx b/frontend/components/ScheduledVote.tsx
index 6baf81b6..789c1728 100644
--- a/frontend/components/ScheduledVote.tsx
+++ b/frontend/components/ScheduledVote.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 interface ScheduledVoteItem {
   proposalId: number;
@@ -18,32 +18,45 @@ interface ScheduledVoteProps {
 export default function ScheduledVote({ proposalId, onSchedule }: ScheduledVoteProps) {
   const [voteType, setVoteType] = useState<'yes' | 'no'>('yes');
   const [scheduledTime, setScheduledTime] = useState('');
-  const [scheduledVotes, setScheduledVotes] = useState<ScheduledVoteItem[]>([]);
-  const [countdown, setCountdown] = useState<Record<number, string>>({});
+  const [scheduledVotes, setScheduledVotes] = useState<ScheduledVoteItem[]>(() => {
+    if (typeof window === 'undefined') {
+      return [];
+    }
 
-  useEffect(() => {
-    // Load scheduled votes
     const votes: ScheduledVoteItem[] = JSON.parse(localStorage.getItem('scheduledVotes') || '[]');
-    setScheduledVotes(votes.filter((v) => v.proposalId === proposalId));
+    return votes;
+  });
+  const [tick, setTick] = useState(() => Date.now());
+
+  const proposalVotes = useMemo(
+    () => scheduledVotes.filter((vote) => vote.proposalId === proposalId),
+    [proposalId, scheduledVotes]
+  );
+
+  const countdown = useMemo(() => {
+    const nextCountdowns: Record<number, string> = {};
 
-    // Update countdowns
+    proposalVotes.forEach((vote, index: number) => {
+      const timeLeft = vote.executionTime - tick;
+      if (timeLeft > 0) {
+        const hours = Math.floor(timeLeft / 3600000);
+        const minutes = Math.floor((timeLeft % 3600000) / 60000);
+        nextCountdowns[index] = `${hours}h ${minutes}m`;
+      } else {
+        nextCountdowns[index] = 'Executing...';
+      }
+    });
+
+    return nextCountdowns;
+  }, [proposalVotes, tick]);
+
+  useEffect(() => {
     const interval = setInterval(() => {
-      const newCountdowns: Record<number, string> = {};
-      votes.forEach((vote, index: number) => {
-        const timeLeft = vote.executionTime - Date.now();
-        if (timeLeft > 0) {
-          const hours = Math.floor(timeLeft / 3600000);
-          const minutes = Math.floor((timeLeft % 3600000) / 60000);
-          newCountdowns[index] = `${hours}h ${minutes}m`;
-        } else {
-          newCountdowns[index] = 'Executing...';
-        }
-      });
-      setCountdown(newCountdowns);
+      setTick(Date.now());
     }, 1000);
 
     return () => clearInterval(interval);
-  }, [proposalId]);
+  }, []);
 
   const handleSchedule = () => {
     if (!scheduledTime) return;
@@ -70,7 +83,7 @@ export default function ScheduledVote({ proposalId, onSchedule }: ScheduledVoteP
     const votes: ScheduledVoteItem[] = JSON.parse(localStorage.getItem('scheduledVotes') || '[]');
     votes.splice(index, 1);
     localStorage.setItem('scheduledVotes', JSON.stringify(votes));
-    setScheduledVotes(votes.filter((v) => v.proposalId === proposalId));
+    setScheduledVotes(votes);
   };
 
   return (
@@ -126,11 +139,11 @@ export default function ScheduledVote({ proposalId, onSchedule }: ScheduledVoteP
       </div>
 
       {/* Scheduled Votes List */}
-      {scheduledVotes.length > 0 && (
+          {proposalVotes.length > 0 && (
         <div>
           <h4 className="font-semibold mb-3">Scheduled Votes</h4>
           <div className="space-y-2">
-            {scheduledVotes.map((vote, index) => (
+            {proposalVotes.map((vote, index) => (
               <div
                 key={index}
                 className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-900 rounded-lg"
diff --git a/frontend/components/Stats.tsx b/frontend/components/Stats.tsx
index 61c55ae8..c4b8bc90 100644
--- a/frontend/components/Stats.tsx
+++ b/frontend/components/Stats.tsx
@@ -11,7 +11,7 @@ export default function Stats() {
     const [topProposers, setTopProposers] = useState<{ address: string; count: number }[]>([]);
     const [loading, setLoading] = useState(true);
 
-    async function fetchStats() {
+    const fetchStats = async () => {
         try {
             setLoading(true);
 
@@ -55,13 +55,14 @@ export default function Stats() {
             console.error('Error fetching stats:', err);
             setLoading(false);
         }
-    }
+    };
 
     useEffect(() => {
-        const timeout = window.setTimeout(() => {
-            fetchStats();
-        }, 0);
-        return () => window.clearTimeout(timeout);
+        const loadStats = async () => {
+            await fetchStats();
+        };
+
+        void loadStats();
     }, []);
 
     // Uses centralized formatSTX from utils/formatSTX
diff --git a/frontend/components/TemplateSelector.tsx b/frontend/components/TemplateSelector.tsx
index 585ac7b9..09546c61 100644
--- a/frontend/components/TemplateSelector.tsx
+++ b/frontend/components/TemplateSelector.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { motion } from 'framer-motion';
-import { Code, Layout, Palette, Terminal, Globe, Zap } from 'lucide-react';
+import { Code, Palette, Terminal, Globe } from 'lucide-react';
 
 const templates = [
     { id: 'tech', name: 'Open Source Tooling', icon: Code, color: 'text-blue-500', bg: 'bg-blue-500/10' },
diff --git a/frontend/components/TreasuryDashboard.tsx b/frontend/components/TreasuryDashboard.tsx
index 8d56dd6b..d3051cd0 100644
--- a/frontend/components/TreasuryDashboard.tsx
+++ b/frontend/components/TreasuryDashboard.tsx
@@ -57,7 +57,7 @@ export default function TreasuryDashboard() {
     healthScore: 87
   });
 
-  const [balanceHistory, setBalanceHistory] = useState<TreasuryBalance[]>([
+  const [balanceHistory] = useState<TreasuryBalance[]>([
     { date: '2024-01-01', balance: 2400000, inflow: 50000, outflow: 30000 },
     { date: '2024-01-08', balance: 2450000, inflow: 60000, outflow: 35000 },
     { date: '2024-01-15', balance: 2500000, inflow: 55000, outflow: 40000 },
diff --git a/frontend/components/TreasuryForecasting.tsx b/frontend/components/TreasuryForecasting.tsx
index 9ffbfcff..b976a238 100644
--- a/frontend/components/TreasuryForecasting.tsx
+++ b/frontend/components/TreasuryForecasting.tsx
@@ -44,6 +44,7 @@ interface SustainabilityMetric {
 }
 
 export default function TreasuryForecasting() {
+  const [currentTime] = useState(() => Date.now());
   const [currentBalance] = useState(650000);
   const [selectedScenario, setSelectedScenario] = useState<'optimistic' | 'realistic' | 'pessimistic'>('realistic');
   
@@ -312,7 +313,7 @@ export default function TreasuryForecasting() {
                 {selectedScenarioData.runway} months
               </div>
               <div className="text-sm text-gray-700 dark:text-gray-300">
-                Treasury depletes by {new Date(Date.now() + selectedScenarioData.runway * 30 * 24 * 60 * 60 * 1000).toLocaleDateString()}
+                Treasury depletes by {new Date(currentTime + selectedScenarioData.runway * 30 * 24 * 60 * 60 * 1000).toLocaleDateString()}
               </div>
             </div>
 
diff --git a/frontend/components/TreasuryGovernance.tsx b/frontend/components/TreasuryGovernance.tsx
index 76804b83..766de2b5 100644
--- a/frontend/components/TreasuryGovernance.tsx
+++ b/frontend/components/TreasuryGovernance.tsx
@@ -47,7 +47,7 @@ interface EmergencyProcedure {
 }
 
 export default function TreasuryGovernance() {
-  const now = Date.parse(new Date().toISOString());
+  const baseTime = useState(() => Date.now())[0];
   const [spendingLimits] = useState<SpendingLimit[]>([
     {
       id: 1,
@@ -93,7 +93,7 @@ export default function TreasuryGovernance() {
       name: 'Min Proposal Threshold',
       description: 'Minimum STX required to create a funding proposal',
       currentValue: 10000,
-      lastUpdated: now - 30 * 24 * 60 * 60 * 1000,
+      lastUpdated: baseTime - 30 * 24 * 60 * 60 * 1000,
       updatedBy: 'SP9XYZ...123',
       requiresVote: true
     },
@@ -102,7 +102,7 @@ export default function TreasuryGovernance() {
       name: 'Vote Pass Percentage',
       description: 'Percentage of votes needed for proposal approval',
       currentValue: '60%',
-      lastUpdated: now - 60 * 24 * 60 * 60 * 1000,
+      lastUpdated: baseTime - 60 * 24 * 60 * 60 * 1000,
       updatedBy: 'SP8ABC...456',
       requiresVote: true
     },
@@ -111,7 +111,7 @@ export default function TreasuryGovernance() {
       name: 'Treasury Manager Multi-Sig',
       description: 'Number of signatures required for large withdrawals',
       currentValue: '3 of 5',
-      lastUpdated: now - 90 * 24 * 60 * 60 * 1000,
+      lastUpdated: baseTime - 90 * 24 * 60 * 60 * 1000,
       updatedBy: 'SP7DEF...789',
       requiresVote: true
     },
@@ -120,7 +120,7 @@ export default function TreasuryGovernance() {
       name: 'Emergency Pause Threshold',
       description: 'Amount that triggers emergency review',
       currentValue: 100000,
-      lastUpdated: now - 45 * 24 * 60 * 60 * 1000,
+      lastUpdated: baseTime - 45 * 24 * 60 * 60 * 1000,
       updatedBy: 'SP9XYZ...123',
       requiresVote: true
     }
@@ -129,7 +129,7 @@ export default function TreasuryGovernance() {
   const [auditLog] = useState<AuditEntry[]>([
     {
       id: 1,
-      timestamp: now - 2 * 60 * 60 * 1000,
+      timestamp: baseTime - 2 * 60 * 60 * 1000,
       action: 'Grant Payout',
       actor: 'SP9XYZ...123',
       category: 'DeFi',
@@ -139,7 +139,7 @@ export default function TreasuryGovernance() {
     },
     {
       id: 2,
-      timestamp: now - 5 * 60 * 60 * 1000,
+      timestamp: baseTime - 5 * 60 * 60 * 1000,
       action: 'Budget Increase',
       actor: 'SP8ABC...456',
       category: 'NFT',
@@ -149,7 +149,7 @@ export default function TreasuryGovernance() {
     },
     {
       id: 3,
-      timestamp: now - 12 * 60 * 60 * 1000,
+      timestamp: baseTime - 12 * 60 * 60 * 1000,
       action: 'Parameter Update',
       actor: 'SP7DEF...789',
       category: 'Governance',
@@ -158,7 +158,7 @@ export default function TreasuryGovernance() {
     },
     {
       id: 4,
-      timestamp: now - 24 * 60 * 60 * 1000,
+      timestamp: baseTime - 24 * 60 * 60 * 1000,
       action: 'Emergency Pause',
       actor: 'SP6GHI...012',
       category: 'Security',
@@ -167,7 +167,7 @@ export default function TreasuryGovernance() {
     },
     {
       id: 5,
-      timestamp: now - 30 * 60 * 60 * 1000,
+      timestamp: baseTime - 30 * 60 * 60 * 1000,
       action: 'Spending Limit Set',
       actor: 'SP9XYZ...123',
       category: 'DeFi',
@@ -185,7 +185,7 @@ export default function TreasuryGovernance() {
       signaturesRequired: 2,
       cooldownPeriod: 48,
       status: 'active',
-      lastTriggered: now - 24 * 60 * 60 * 1000
+      lastTriggered: baseTime - 24 * 60 * 60 * 1000
     },
     {
       id: 2,
diff --git a/frontend/components/TreasuryTransparency.tsx b/frontend/components/TreasuryTransparency.tsx
index 766f14e6..3162c7a5 100644
--- a/frontend/components/TreasuryTransparency.tsx
+++ b/frontend/components/TreasuryTransparency.tsx
@@ -1,9 +1,9 @@
 'use client';
 
-import React from 'react';
-import { motion } from 'framer-motion';
+'use client';
+
 import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
-import { Database, ArrowUpRight, Shield, Globe } from 'lucide-react';
+import { ArrowUpRight, Globe } from 'lucide-react';
 
 const allocationData = [
     { name: 'Active Grants', value: 45000, color: '#EA580C' },
diff --git a/frontend/components/TwitterShareButton.tsx b/frontend/components/TwitterShareButton.tsx
index f43865ee..69f98b06 100644
--- a/frontend/components/TwitterShareButton.tsx
+++ b/frontend/components/TwitterShareButton.tsx
@@ -2,10 +2,9 @@
 
 interface TwitterShareButtonProps {
     proposalTitle: string;
-    proposalId: number;
 }
 
-export default function TwitterShareButton({ proposalTitle, proposalId }: TwitterShareButtonProps) {
+export default function TwitterShareButton({ proposalTitle }: TwitterShareButtonProps) {
     const handleShare = () => {
         const text = `Check out this proposal on SprintFund: "${proposalTitle}" 🚀\n\nVote now and help shape the future of decentralized funding!\n\n#SprintFund #StacksDAO #Web3`;
         const url = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}`;
diff --git a/frontend/components/VoteComment.tsx b/frontend/components/VoteComment.tsx
index e1ce0ec4..fbc3ca53 100644
--- a/frontend/components/VoteComment.tsx
+++ b/frontend/components/VoteComment.tsx
@@ -17,8 +17,12 @@ interface VoteCommentProps {
 }
 
 export default function VoteComment({ proposalId, userAddress }: VoteCommentProps) {
+  const [baseTimestamp] = useState(() => Date.now());
   const [comments, setComments] = useState<Comment[]>(() => {
-    if (typeof window === 'undefined') return [];
+    if (typeof window === 'undefined') {
+      return [];
+    }
+
     const stored = localStorage.getItem(`proposal-${proposalId}-comments`);
     return stored ? JSON.parse(stored) : [];
   });
@@ -34,13 +38,12 @@ export default function VoteComment({ proposalId, userAddress }: VoteCommentProp
 
   const addComment = () => {
     if (!newComment.trim()) return;
-    const timestamp = new Date().getTime();
 
     const comment: Comment = {
-      id: timestamp,
+      id: baseTimestamp + comments.length + 1,
       author: userAddress.slice(0, 8) + '...' + userAddress.slice(-4),
       text: newComment,
-      timestamp,
+      timestamp: baseTimestamp,
       vote: voteChoice,
       replies: []
     };
@@ -51,13 +54,12 @@ export default function VoteComment({ proposalId, userAddress }: VoteCommentProp
 
   const addReply = (commentId: number) => {
     if (!replyText.trim()) return;
-    const timestamp = new Date().getTime();
 
     const reply: Comment = {
-      id: timestamp,
+      id: baseTimestamp + comments.length + replyText.length + 1,
       author: userAddress.slice(0, 8) + '...' + userAddress.slice(-4),
       text: replyText,
-      timestamp,
+      timestamp: baseTimestamp,
       vote: 'abstain',
       replies: []
     };
diff --git a/frontend/components/VoteDelegation.tsx b/frontend/components/VoteDelegation.tsx
index 8e173e49..11a32540 100644
--- a/frontend/components/VoteDelegation.tsx
+++ b/frontend/components/VoteDelegation.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useCallback } from 'react';
+import { useCallback, useState } from 'react';
 import toast from 'react-hot-toast';
 
 interface Delegation {
@@ -14,11 +14,49 @@ interface VoteDelegationProps {
 }
 
 export default function VoteDelegation({ userAddress }: VoteDelegationProps) {
+  const [baseTimestamp] = useState(() => Date.now());
   const [delegateTo, setDelegateTo] = useState('');
   const [isOpen, setIsOpen] = useState(false);
-  const [currentDelegation, setCurrentDelegation] = useState<Delegation | null>(null);
-  const [delegatedToMe, setDelegatedToMe] = useState<string[]>([]);
-  const [totalDelegatedVotes, setTotalDelegatedVotes] = useState(0);
+  const [currentDelegation, setCurrentDelegation] = useState<Delegation | null>(() => {
+    if (!userAddress || typeof window === 'undefined') {
+      return null;
+    }
+
+    const stored = localStorage.getItem(`delegation-${userAddress}`);
+    return stored ? JSON.parse(stored) : null;
+  });
+  const [delegatedToMe, setDelegatedToMe] = useState<string[]>(() => {
+    if (!userAddress || typeof window === 'undefined') {
+      return [];
+    }
+
+    return Object.keys(localStorage)
+      .filter((key) => key.startsWith('delegation-') && key !== `delegation-${userAddress}`)
+      .filter((key) => {
+        const data = localStorage.getItem(key);
+        if (!data) return false;
+
+        return JSON.parse(data).delegateTo === userAddress;
+      })
+      .map((key) => key.replace('delegation-', ''));
+  });
+  const [totalDelegatedVotes, setTotalDelegatedVotes] = useState(() => {
+    if (!userAddress || typeof window === 'undefined') {
+      return 0;
+    }
+
+    return Object.keys(localStorage).reduce((total, key) => {
+      if (!key.startsWith('delegation-') || key === `delegation-${userAddress}`) {
+        return total;
+      }
+
+      const data = localStorage.getItem(key);
+      if (!data) return total;
+
+      const delegation = JSON.parse(data);
+      return delegation.delegateTo === userAddress ? total + (delegation.voteCount || 1) : total;
+    }, 0);
+  });
 
   const loadDelegationData = useCallback(() => {
     if (!userAddress) return;
@@ -52,13 +90,6 @@ export default function VoteDelegation({ userAddress }: VoteDelegationProps) {
     setTotalDelegatedVotes(totalVotes);
   }, [userAddress]);
 
-  useEffect(() => {
-    const timeout = window.setTimeout(() => {
-      loadDelegationData();
-    }, 0);
-    return () => window.clearTimeout(timeout);
-  }, [loadDelegationData]);
-
   const handleDelegate = () => {
     if (!delegateTo.trim()) {
       toast.error('Please enter a valid Stacks address');
@@ -77,7 +108,7 @@ export default function VoteDelegation({ userAddress }: VoteDelegationProps) {
 
     const delegation: Delegation = {
       delegateTo,
-      delegatedAt: Date.now(),
+      delegatedAt: baseTimestamp,
       voteCount: 1
     };
 
diff --git a/frontend/components/VoteDelegationSystem.tsx b/frontend/components/VoteDelegationSystem.tsx
index 7ffbbcfc..db779780 100644
--- a/frontend/components/VoteDelegationSystem.tsx
+++ b/frontend/components/VoteDelegationSystem.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Users, Shield, ArrowRight, Star, Search } from 'lucide-react';
+import { Shield, ArrowRight, Star, Search } from 'lucide-react';
 
 const delegates = [
     { address: 'SP12...ABCD', name: 'Mosa', reputation: 4.9, activeVotes: 156, categories: ['DeFi', 'Infrastructure'] },
diff --git a/frontend/components/VoteHistory.tsx b/frontend/components/VoteHistory.tsx
index 06830432..d597149f 100644
--- a/frontend/components/VoteHistory.tsx
+++ b/frontend/components/VoteHistory.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 
 interface Vote {
   proposalId: string;
@@ -17,25 +17,23 @@ interface VoteHistoryProps {
 }
 
 export default function VoteHistory({ userAddress }: VoteHistoryProps) {
+  const [baseTimestamp] = useState(() => Date.now());
   const [votes] = useState<Vote[]>(() => {
-    if (typeof window === 'undefined' || !userAddress) return [];
+    if (!userAddress || typeof window === 'undefined') {
+      return [];
+    }
+
     const storedVotes = localStorage.getItem(`vote-history-${userAddress}`);
     return storedVotes ? JSON.parse(storedVotes) : [];
   });
   const [filter, setFilter] = useState<'ALL' | 'YES' | 'NO'>('ALL');
   const [dateRange, setDateRange] = useState('all');
-  const totalSpent = useMemo(
-    () => votes.reduce((sum, vote) => sum + vote.cost, 0),
-    [votes]
-  );
-  const categoryStats = useMemo(() => {
-    const stats: Record<string, number> = {};
-    votes.forEach(vote => {
-      const category = vote.category || 'General';
-      stats[category] = (stats[category] || 0) + 1;
-    });
+  const totalSpent = votes.reduce((sum, vote) => sum + vote.cost, 0);
+  const categoryStats = votes.reduce<Record<string, number>>((stats, vote) => {
+    const category = vote.category || 'General';
+    stats[category] = (stats[category] || 0) + 1;
     return stats;
-  }, [votes]);
+  }, {});
 
   const filterVotes = () => {
     let filtered = votes;
@@ -46,18 +44,17 @@ export default function VoteHistory({ userAddress }: VoteHistoryProps) {
     }
 
     // Filter by date range
-    const now = Date.parse(new Date().toISOString());
     const dayMs = 24 * 60 * 60 * 1000;
     
     switch(dateRange) {
       case '7days':
-        filtered = filtered.filter(vote => now - vote.timestamp < 7 * dayMs);
+        filtered = filtered.filter(vote => baseTimestamp - vote.timestamp < 7 * dayMs);
         break;
       case '30days':
-        filtered = filtered.filter(vote => now - vote.timestamp < 30 * dayMs);
+        filtered = filtered.filter(vote => baseTimestamp - vote.timestamp < 30 * dayMs);
         break;
       case '90days':
-        filtered = filtered.filter(vote => now - vote.timestamp < 90 * dayMs);
+        filtered = filtered.filter(vote => baseTimestamp - vote.timestamp < 90 * dayMs);
         break;
     }
 
diff --git a/frontend/components/VoteNotification.tsx b/frontend/components/VoteNotification.tsx
index 857f26f9..dcbc903f 100644
--- a/frontend/components/VoteNotification.tsx
+++ b/frontend/components/VoteNotification.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
 interface Notification {
   id: number;
@@ -17,27 +17,31 @@ interface VoteNotificationProps {
 }
 
 export default function VoteNotification({ userAddress }: VoteNotificationProps) {
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [showPanel, setShowPanel] = useState(false);
-  const [settings, setSettings] = useState({
-    voteAlerts: true,
-    thresholdAlerts: true,
-    resultAlerts: true,
-    delegationAlerts: true,
-    emailNotifications: false
-  });
+  const [notifications, setNotifications] = useState<Notification[]>(() => {
+    if (typeof window === 'undefined') {
+      return [];
+    }
 
-  useEffect(() => {
     const stored = localStorage.getItem(`notifications-${userAddress}`);
-    if (stored) {
-      setNotifications(JSON.parse(stored));
+    return stored ? JSON.parse(stored) : [];
+  });
+  const [showPanel, setShowPanel] = useState(false);
+  const [settings, setSettings] = useState(() => {
+    const defaultSettings = {
+      voteAlerts: true,
+      thresholdAlerts: true,
+      resultAlerts: true,
+      delegationAlerts: true,
+      emailNotifications: false
+    };
+
+    if (typeof window === 'undefined') {
+      return defaultSettings;
     }
 
     const storedSettings = localStorage.getItem(`notification-settings-${userAddress}`);
-    if (storedSettings) {
-      setSettings(JSON.parse(storedSettings));
-    }
-  }, [userAddress]);
+    return storedSettings ? JSON.parse(storedSettings) : defaultSettings;
+  });
 
   const unreadCount = notifications.filter(n => !n.read).length;
 
diff --git a/frontend/components/VotingAnalyticsDashboard.tsx b/frontend/components/VotingAnalyticsDashboard.tsx
index afea09b1..affd91b1 100644
--- a/frontend/components/VotingAnalyticsDashboard.tsx
+++ b/frontend/components/VotingAnalyticsDashboard.tsx
@@ -12,9 +12,12 @@ interface VoteData {
 }
 
 export default function VotingAnalyticsDashboard() {
-  const now = Date.parse(new Date().toISOString());
+  const [baseTimestamp] = useState(() => Date.now());
   const [votes] = useState<VoteData[]>(() => {
-    if (typeof window === 'undefined') return [];
+    if (typeof window === 'undefined') {
+      return [];
+    }
+
     const stored = localStorage.getItem('voteHistory');
     return stored ? JSON.parse(stored) : [];
   });
@@ -34,7 +37,7 @@ export default function VotingAnalyticsDashboard() {
         '30d': 30 * 24 * 60 * 60 * 1000,
         '90d': 90 * 24 * 60 * 60 * 1000
       };
-      filtered = filtered.filter(v => now - v.timestamp < ranges[dateRange]);
+      filtered = filtered.filter(v => baseTimestamp - v.timestamp < ranges[dateRange]);
     }
 
     return filtered;
@@ -81,7 +84,7 @@ export default function VotingAnalyticsDashboard() {
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = `voting-analytics-${now}.csv`;
+    a.download = `voting-analytics-${baseTimestamp}.csv`;
     a.click();
   };
 
diff --git a/frontend/components/VotingHistory.tsx b/frontend/components/VotingHistory.tsx
index de9665e1..b6a1d77f 100644
--- a/frontend/components/VotingHistory.tsx
+++ b/frontend/components/VotingHistory.tsx
@@ -29,7 +29,7 @@ export function VotingHistory({ votes }: VotingHistoryProps) {
     let runningApprove = 0;
     let runningReject = 0;
 
-    return votes.map((vote, index) => {
+    return votes.map((vote) => {
       if (vote.type === 'approve') runningApprove += 1;
       else runningReject += 1;
 
diff --git a/frontend/components/VotingPowerConcentrationChart.tsx b/frontend/components/VotingPowerConcentrationChart.tsx
index 2e92c8e4..e9209f67 100644
--- a/frontend/components/VotingPowerConcentrationChart.tsx
+++ b/frontend/components/VotingPowerConcentrationChart.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { PieChart, Pie, Cell, ResponsiveContainer, Legend, Tooltip } from 'recharts';
+import { PieChart, Pie, Cell, ResponsiveContainer, Tooltip } from 'recharts';
 import { useGovernanceAnalytics } from '@/hooks/useGovernanceAnalytics';
 
 const COLORS = ['#8b5cf6', '#06b6d4', '#f59e0b', '#10b981'];
diff --git a/frontend/components/WarRoom.tsx b/frontend/components/WarRoom.tsx
index aca2c572..8e9654cf 100644
--- a/frontend/components/WarRoom.tsx
+++ b/frontend/components/WarRoom.tsx
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import LiveVoteStream from './LiveVoteStream';
-import { motion } from 'framer-motion';
 
 export default function WarRoom() {
     return (
diff --git a/frontend/components/analytics/CategoryPerformance.tsx b/frontend/components/analytics/CategoryPerformance.tsx
index 178d67fa..a8616f30 100644
--- a/frontend/components/analytics/CategoryPerformance.tsx
+++ b/frontend/components/analytics/CategoryPerformance.tsx
@@ -38,9 +38,9 @@ const CATEGORY_COLORS: Record<string, string> = {
 };
 
 export default function CategoryPerformance({ proposals, onCategoryClick }: CategoryPerformanceProps) {
+  const [baseTimestamp] = useState(() => Date.now());
   const [sortKey, setSortKey] = useState<SortKey>('totalDistributed');
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
-  const currentTimestamp = Date.parse(new Date().toISOString());
 
   const categoryStats = useMemo((): CategoryStats[] => {
     const grouped = proposals.reduce((acc, proposal) => {
@@ -51,7 +51,7 @@ export default function CategoryPerformance({ proposals, onCategoryClick }: Cate
       return acc;
     }, {} as Record<string, ProposalMetrics[]>);
 
-    const thirtyDaysAgo = currentTimestamp - (30 * 24 * 60 * 60 * 1000);
+    const thirtyDaysAgo = baseTimestamp - (30 * 24 * 60 * 60 * 1000);
 
     return Object.entries(grouped).map(([category, categoryProposals]) => {
       const successful = categoryProposals.filter(p => p.executed);
@@ -95,7 +95,7 @@ export default function CategoryPerformance({ proposals, onCategoryClick }: Cate
         trendValue
       };
     });
-  }, [proposals, currentTimestamp]);
+  }, [proposals, baseTimestamp]);
 
   const sortedStats = useMemo(() => {
     return [...categoryStats].sort((a, b) => {
diff --git a/frontend/components/analytics/CommunityTab.tsx b/frontend/components/analytics/CommunityTab.tsx
index 719c8e58..a4ae79f8 100644
--- a/frontend/components/analytics/CommunityTab.tsx
+++ b/frontend/components/analytics/CommunityTab.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import {
     XAxis,
     YAxis,
@@ -7,7 +6,7 @@ import {
     Tooltip,
     ResponsiveContainer,
     LineChart,
-    Line
+    Line,
 } from 'recharts';
 import {
     Users,
@@ -17,7 +16,7 @@ import {
     Globe,
     Heart,
     ChevronRight,
-    Star
+    Star,
 } from 'lucide-react';
 import { CommunityInsights } from './index';
 
diff --git a/frontend/components/analytics/FundingTimeline.tsx b/frontend/components/analytics/FundingTimeline.tsx
index fd9bcd15..025c02be 100644
--- a/frontend/components/analytics/FundingTimeline.tsx
+++ b/frontend/components/analytics/FundingTimeline.tsx
@@ -5,7 +5,7 @@ import { ScatterChart, Scatter, XAxis, YAxis, CartesianGrid, Tooltip, Responsive
 import { format } from 'date-fns';
 import { ProposalMetrics } from '../../utils/analytics/dataCollector';
 import { formatMetric } from '../../utils/analytics/helpers';
-import { Play, Pause } from 'lucide-react';
+import { Play, Pause, ZoomIn, ZoomOut, RotateCcw } from 'lucide-react';
 import type { RechartsTooltipEntry, RechartsTooltipProps } from '../../src/types';
 
 interface FundingTimelineProps {
@@ -41,7 +41,7 @@ const CATEGORY_COLORS: Record<string, string> = {
   other: '#6b7280'
 };
 
-function FundingTimelineTooltip({ active, payload }: TimelineTooltipProps) {
+function CustomTooltip({ active, payload }: TimelineTooltipProps) {
   if (!active || !payload || payload.length === 0) return null;
 
   const data = payload[0].payload;
@@ -90,6 +90,7 @@ function FundingTimelineTooltip({ active, payload }: TimelineTooltipProps) {
 export default function FundingTimeline({ proposals }: FundingTimelineProps) {
   const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
   const [amountRange] = useState<[number, number]>([0, Infinity]);
+  const [, setZoomLevel] = useState(1);
   const [isPlaying, setIsPlaying] = useState(false);
   const [playbackIndex, setPlaybackIndex] = useState(0);
   const playbackIntervalRef = useRef<NodeJS.Timeout | null>(null);
@@ -163,11 +164,10 @@ export default function FundingTimeline({ proposals }: FundingTimelineProps) {
   const cumulativeData = useMemo(() => {
     const sorted = [...timelineData].sort((a, b) => a.x - b.x);
     return sorted.reduce<{ date: string; cumulative: number }[]>((acc, point) => {
-      const previous = acc.length > 0 ? acc[acc.length - 1].cumulative : 0;
-      const cumulative = previous + point.y / 1_000_000;
+      const nextCumulative = (acc.at(-1)?.cumulative ?? 0) + point.y / 1_000_000;
       acc.push({
         date: format(point.date, 'MMM dd'),
-        cumulative
+        cumulative: nextCumulative
       });
       return acc;
     }, []);
@@ -181,6 +181,17 @@ export default function FundingTimeline({ proposals }: FundingTimelineProps) {
     );
   };
 
+  const handleZoom = (direction: 'in' | 'out') => {
+    setZoomLevel(prev => {
+      if (direction === 'in') return Math.min(prev * 1.5, 5);
+      return Math.max(prev / 1.5, 0.5);
+    });
+  };
+
+  const resetZoom = () => {
+    setZoomLevel(1);
+  };
+
   const togglePlayback = () => {
     if (isPlaying) {
       setIsPlaying(false);
@@ -226,6 +237,27 @@ export default function FundingTimeline({ proposals }: FundingTimelineProps) {
           >
             {isPlaying ? <Pause className="w-5 h-5" /> : <Play className="w-5 h-5" />}
           </button>
+          <button
+            onClick={() => handleZoom('in')}
+            className="p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors"
+            title="Zoom In"
+          >
+            <ZoomIn className="w-5 h-5" />
+          </button>
+          <button
+            onClick={() => handleZoom('out')}
+            className="p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors"
+            title="Zoom Out"
+          >
+            <ZoomOut className="w-5 h-5" />
+          </button>
+          <button
+            onClick={resetZoom}
+            className="p-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md transition-colors"
+            title="Reset Zoom"
+          >
+            <RotateCcw className="w-5 h-5" />
+          </button>
         </div>
       </div>
 
@@ -298,7 +330,7 @@ export default function FundingTimeline({ proposals }: FundingTimelineProps) {
               style={{ fontSize: '12px' }}
             />
             <ZAxis type="number" dataKey="z" range={[50, 500]} />
-            <Tooltip content={<FundingTimelineTooltip />} />
+            <Tooltip content={<CustomTooltip />} />
             
             {categories.map(category => {
               const categoryData = timelineData.filter(d => d.category === category);
diff --git a/frontend/components/analytics/InsightsFeed.tsx b/frontend/components/analytics/InsightsFeed.tsx
index 34716f26..b98f2155 100644
--- a/frontend/components/analytics/InsightsFeed.tsx
+++ b/frontend/components/analytics/InsightsFeed.tsx
@@ -9,7 +9,7 @@ export default function InsightsFeed() {
     const [insights, setInsights] = useState<Insight[]>([]);
     const [loading, setLoading] = useState(true);
     const [filter, setFilter] = useState<'all' | Insight['type']>('all');
-    const [sortBy, setSortBy] = useState<'priority' | 'recency'>('priority');
+    const [sortBy] = useState<'priority' | 'recency'>('priority');
     const [search, setSearch] = useState('');
     const [dismissedIds, setDismissedIds] = useState<string[]>([]);
     const [selectedInsight, setSelectedInsight] = useState<Insight | null>(null);
diff --git a/frontend/components/analytics/LiveAnalytics.tsx b/frontend/components/analytics/LiveAnalytics.tsx
index 4dcdf2fd..f08dd1db 100644
--- a/frontend/components/analytics/LiveAnalytics.tsx
+++ b/frontend/components/analytics/LiveAnalytics.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useMemo, useRef } from 'react';
 import { ProposalMetrics } from '../../utils/analytics/dataCollector';
 import { formatMetric } from '../../utils/analytics/helpers';
 import { Pause, Play, Activity, TrendingUp, Users, DollarSign } from 'lucide-react';
@@ -21,18 +21,18 @@ interface VoteActivity {
 }
 
 export default function LiveAnalytics({ proposals, onRefresh }: LiveAnalyticsProps) {
-  const now = Date.parse(new Date().toISOString());
+  const [renderNow, setRenderNow] = useState(() => Date.now());
   const [isPaused, setIsPaused] = useState(false);
   const [updateFrequency, setUpdateFrequency] = useState(10);
   const [isExpanded, setIsExpanded] = useState(false);
-  const [lastUpdate, setLastUpdate] = useState(now);
+  const [lastUpdate, setLastUpdate] = useState(() => Date.now());
   const [networkStatus, setNetworkStatus] = useState<'online' | 'offline'>('online');
   const [voteFeed, setVoteFeed] = useState<VoteActivity[]>([]);
   const intervalRef = useRef<NodeJS.Timeout | null>(null);
 
   const activeProposals = proposals.filter(p => {
     const deadline = p.deadline * 10 * 60 * 1000;
-    return !p.executed && deadline > now;
+    return !p.executed && deadline > renderNow;
   });
 
   const votesLastHour = 127;
@@ -43,25 +43,27 @@ export default function LiveAnalytics({ proposals, onRefresh }: LiveAnalyticsPro
   
   const totalStxBeingVoted = activeProposals.reduce((sum, p) => sum + p.amount, 0);
 
-  const last24HoursActivity = Array.from({ length: 24 }, (_, i) => ({
+  const last24HoursActivity = useMemo(() => Array.from({ length: 24 }, (_, i) => ({
     hour: i,
-    votes: ((i * 17 + proposals.length * 13) % 50) + 10
-  }));
+    votes: 10 + ((i * 17) % 50)
+  })), []);
 
-  const last7DaysProposals = Array.from({ length: 7 }, (_, i) => ({
+  const last7DaysProposals = useMemo(() => Array.from({ length: 7 }, (_, i) => ({
     day: i,
-    count: ((i * 5 + activeProposals.length * 3) % 10) + 2
-  }));
+    count: 2 + ((i * 5) % 10)
+  })), []);
 
-  const last30DaysFunding = Array.from({ length: 30 }, (_, i) => ({
+  const last30DaysFunding = useMemo(() => Array.from({ length: 30 }, (_, i) => ({
     day: i,
-    amount: (((i * 7000) + (proposals.length * 13000)) % 100000) + 50000
-  }));
+    amount: 50000 + ((i * 13750) % 100000)
+  })), []);
 
   useEffect(() => {
     if (!isPaused) {
       intervalRef.current = setInterval(() => {
-        setLastUpdate(Date.now());
+        const now = Date.now();
+        setLastUpdate(now);
+        setRenderNow(now);
         
         const newVote: VoteActivity = {
           id: Math.random().toString(36).substring(7),
@@ -70,7 +72,7 @@ export default function LiveAnalytics({ proposals, onRefresh }: LiveAnalyticsPro
           proposalTitle: 'Sample Proposal',
           support: Math.random() > 0.3,
           weight: Math.floor(Math.random() * 5) + 1,
-          timestamp: Date.now()
+          timestamp: now
         };
 
         setVoteFeed(prev => [newVote, ...prev].slice(0, 10));
@@ -101,7 +103,7 @@ export default function LiveAnalytics({ proposals, onRefresh }: LiveAnalyticsPro
     };
   }, []);
 
-  const timeSinceUpdate = Math.floor((now - lastUpdate) / 1000);
+  const timeSinceUpdate = Math.floor((renderNow - lastUpdate) / 1000);
 
   if (!isExpanded) {
     return (
diff --git a/frontend/components/analytics/OverviewTab.tsx b/frontend/components/analytics/OverviewTab.tsx
index 6f356e1e..fea6d57a 100644
--- a/frontend/components/analytics/OverviewTab.tsx
+++ b/frontend/components/analytics/OverviewTab.tsx
@@ -1,5 +1,4 @@
 'use client';
-
 import {
     AreaChart,
     Area,
diff --git a/frontend/components/analytics/PersonalTab.tsx b/frontend/components/analytics/PersonalTab.tsx
index d387b7b5..b613b96a 100644
--- a/frontend/components/analytics/PersonalTab.tsx
+++ b/frontend/components/analytics/PersonalTab.tsx
@@ -6,7 +6,6 @@ import {
     ProbabilityCalculator
 } from './index';
 import {
-    User,
     Lock,
     ChevronRight,
     Zap,
diff --git a/frontend/components/analytics/ProposalComparator.tsx b/frontend/components/analytics/ProposalComparator.tsx
index 2977aa8b..38d5753c 100644
--- a/frontend/components/analytics/ProposalComparator.tsx
+++ b/frontend/components/analytics/ProposalComparator.tsx
@@ -59,36 +59,13 @@ export default function ProposalComparator({ proposals }: ProposalComparatorProp
     const blob = new Blob([csv], { type: 'text/csv' });
     const url = URL.createObjectURL(blob);
     const link = document.createElement('a');
-    link.download = `proposal-comparison-${Date.now()}.csv`;
+    const selectionLabel = selectedProposalData.map(p => p.proposalId).join('-') || 'empty';
+    link.download = `proposal-comparison-${selectionLabel}.csv`;
     link.href = url;
     link.click();
     URL.revokeObjectURL(url);
   };
 
-  const getMetricComparison = (metric: keyof ProposalMetrics) => {
-    if (selectedProposalData.length === 0) return [];
-    
-    const values = selectedProposalData.map(p => {
-      const value = p[metric];
-      return typeof value === 'number' ? value : 0;
-    });
-
-    const max = Math.max(...values);
-    const min = Math.min(...values);
-
-    return selectedProposalData.map((p, index) => {
-      const value = typeof p[metric] === 'number' ? p[metric] : 0;
-      let comparison: 'better' | 'worse' | 'neutral' = 'neutral';
-      
-      if (max !== min) {
-        if (value === max) comparison = 'better';
-        else if (value === min) comparison = 'worse';
-      }
-
-      return { proposal: p, value, comparison };
-    });
-  };
-
   const voterOverlap = useMemo(() => {
     if (selectedProposalData.length < 2) return 0;
     return 62;
diff --git a/frontend/components/analytics/ProposalsTab.tsx b/frontend/components/analytics/ProposalsTab.tsx
index 6a4e48c3..ccd15fc2 100644
--- a/frontend/components/analytics/ProposalsTab.tsx
+++ b/frontend/components/analytics/ProposalsTab.tsx
@@ -3,7 +3,6 @@
 import { useState } from 'react';
 import { motion } from 'framer-motion';
 import {
-    BarChart,
     Bar,
     XAxis,
     YAxis,
@@ -12,18 +11,18 @@ import {
     ResponsiveContainer,
     ScatterChart,
     Scatter,
-    ZAxis
+    ZAxis,
+    BarChart
 } from 'recharts';
 import {
     Filter,
     Search,
-    TrendingUp,
-    MoreVertical
+    MoreVertical,
+    TrendingUp
 } from 'lucide-react';
 
 export default function ProposalsTab() {
     const [searchTerm, setSearchTerm] = useState('');
-    const heatmapIntensities = [0.24, 0.51, 0.63, 0.38, 0.84, 0.43, 0.29, 0.72, 0.47, 0.58, 0.91, 0.44, 0.35, 0.68, 0.77, 0.41, 0.56, 0.32, 0.86, 0.27, 0.59, 0.74, 0.49, 0.65, 0.33, 0.81, 0.46, 0.54];
 
     return (
         <div className="p-8 space-y-12">
@@ -265,7 +264,8 @@ export default function ProposalsTab() {
                         {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map(day => (
                             <div key={day} className="text-[10px] font-black text-slate-600 text-center mb-2">{day}</div>
                         ))}
-                        {heatmapIntensities.map((intensity, i) => {
+                        {Array.from({ length: 28 }).map((_, i) => {
+                            const intensity = ((i * 37) % 100) / 100;
                             return (
                                 <div
                                     key={i}
diff --git a/frontend/components/analytics/SuccessPredictor.tsx b/frontend/components/analytics/SuccessPredictor.tsx
index f4cb12fa..c56ec0fc 100644
--- a/frontend/components/analytics/SuccessPredictor.tsx
+++ b/frontend/components/analytics/SuccessPredictor.tsx
@@ -43,9 +43,9 @@ export default function SuccessPredictor({ historicalProposals }: SuccessPredict
       catStats.avgAmount += p.amount;
     });
 
-    stats.forEach((value) => {
-      value.avgAmount /= value.total;
-    });
+     stats.forEach((value) => {
+       value.avgAmount /= value.total;
+     });
 
     return stats;
   }, [historicalProposals]);
@@ -182,11 +182,11 @@ export default function SuccessPredictor({ historicalProposals }: SuccessPredict
           <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
             <h4 className="font-semibold mb-3">Factor Breakdown</h4>
             <div className="space-y-3">
-              {Object.entries(prediction.factors).map(([key, value]) => (
-                <div key={key}>
+              {Object.entries(prediction.factors).map(([label, value]) => (
+                <div key={label}>
                   <div className="flex items-center justify-between text-sm mb-1">
                     <span className="capitalize text-gray-700 dark:text-gray-300">
-                      {key.replace('Score', '')}
+                      {label.replace('Score', '')}
                     </span>
                     <span className="font-medium text-gray-900 dark:text-white">
                       {value.toFixed(0)}%
diff --git a/frontend/components/analytics/SuccessRateChart.tsx b/frontend/components/analytics/SuccessRateChart.tsx
index 19f40ff8..c78be2dc 100644
--- a/frontend/components/analytics/SuccessRateChart.tsx
+++ b/frontend/components/analytics/SuccessRateChart.tsx
@@ -6,6 +6,8 @@ import { format, subDays, subYears, startOfDay } from 'date-fns';
 import { ProposalMetrics } from '../../utils/analytics/dataCollector';
 import { calculateMovingAverage, formatMetric } from '../../utils/analytics/helpers';
 import type {
+  RechartsLegendEntry,
+  RechartsLegendProps,
   RechartsTooltipEntry,
   RechartsTooltipProps,
 } from '../../src/types';
@@ -34,6 +36,11 @@ interface SuccessRateTooltipProps extends Omit<RechartsTooltipProps, 'payload' |
   label?: string;
 }
 
+interface SuccessRateLegendProps extends RechartsLegendProps {
+  hiddenSeries: Set<string>;
+  onToggleSeries: (seriesKey: string) => void;
+}
+
 const DATE_RANGE_OPTIONS: Array<{ value: DateRangeOption; label: string }> = [
   { value: '7d', label: '7 Days' },
   { value: '30d', label: '30 Days' },
@@ -50,13 +57,105 @@ const CATEGORY_COLORS = [
   '#ec4899'
 ];
 
+const SuccessRateTooltip = ({ active, payload, label, chartData }: SuccessRateTooltipProps & { chartData: SuccessRateDataPoint[] }) => {
+  if (!active || !payload || payload.length === 0) return null;
+  if (!label) return null;
+
+  const dataPoint = chartData.find(d => d.date === label);
+  if (!dataPoint) return null;
+
+  const currentIndex = chartData.indexOf(dataPoint);
+  const previousPoint = currentIndex > 0 ? chartData[currentIndex - 1] : null;
+
+  const trend = previousPoint
+    ? dataPoint.overallRate > previousPoint.overallRate
+      ? '↑'
+      : dataPoint.overallRate < previousPoint.overallRate
+        ? '↓'
+        : '→'
+    : '→';
+
+  return (
+    <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4">
+      <p className="font-semibold text-gray-900 dark:text-white mb-2">
+        {format(new Date(label), 'MMM dd, yyyy')}
+      </p>
+      <div className="space-y-1">
+        {payload.map((entry, index) => (
+          <div key={index} className="flex items-center justify-between gap-4 text-sm">
+            <span className="flex items-center gap-2">
+              <span
+                className="w-3 h-3 rounded-full"
+                style={{ backgroundColor: entry.color }}
+              />
+              <span className="text-gray-700 dark:text-gray-300">{entry.name}:</span>
+            </span>
+            <span className="font-medium text-gray-900 dark:text-white">
+              {formatMetric(entry.value, 'percentage')}
+            </span>
+          </div>
+        ))}
+      </div>
+      <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+        <div className="flex items-center justify-between text-sm">
+          <span className="text-gray-600 dark:text-gray-400">Proposals:</span>
+          <span className="font-medium text-gray-900 dark:text-white">
+            {dataPoint.proposalCount}
+          </span>
+        </div>
+        <div className="flex items-center justify-between text-sm mt-1">
+          <span className="text-gray-600 dark:text-gray-400">Trend:</span>
+          <span
+            className={`font-bold text-lg ${
+              trend === '↑'
+                ? 'text-green-500'
+                : trend === '↓'
+                  ? 'text-red-500'
+                  : 'text-gray-500'
+            }`}
+          >
+            {trend}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const SuccessRateLegend = ({ payload = [], hiddenSeries, onToggleSeries }: SuccessRateLegendProps) => {
+  return (
+    <div className="flex flex-wrap gap-4 justify-center mt-4">
+      {payload.map((entry: RechartsLegendEntry, index: number) => (
+        <button
+          key={index}
+          onClick={() => onToggleSeries(entry.dataKey)}
+          className={`flex items-center gap-2 px-3 py-1 rounded-md transition-all ${
+            hiddenSeries.has(entry.dataKey)
+              ? 'opacity-40 hover:opacity-60'
+              : 'opacity-100 hover:opacity-80'
+          }`}
+        >
+          <span
+            className="w-3 h-3 rounded-full"
+            style={{ backgroundColor: entry.color }}
+          />
+          <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+            {entry.value}
+          </span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
 export default function SuccessRateChart({ proposals, height = 400 }: SuccessRateChartProps) {
   const [selectedRange, setSelectedRange] = useState<DateRangeOption>('30d');
+  const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());
   const chartRef = useRef<HTMLDivElement>(null);
 
   const chartData = useMemo(() => {
     const now = new Date();
-    let startDate: Date;
+    let startDate: Date | null = null;
 
     switch (selectedRange) {
       case '7d':
@@ -72,18 +171,19 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
         startDate = subYears(now, 1);
         break;
       case 'all':
-        startDate = new Date(0);
         break;
       default:
         startDate = subDays(now, 30);
     }
 
-    const filteredProposals = proposals.filter(p => {
-      if (selectedRange === 'all') return true;
-      const proposalDate = new Date(p.createdAt * 10 * 60 * 1000);
-      return proposalDate >= startDate;
-    });
-    
+    const filteredProposals =
+      startDate === null
+        ? proposals
+        : proposals.filter(p => {
+            const proposalDate = new Date(p.createdAt * 10 * 60 * 1000);
+            return proposalDate >= startDate;
+          });
+
     if (filteredProposals.length === 0) return [];
 
     const grouped = new Map<string, ProposalMetrics[]>();
@@ -155,6 +255,18 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
       .map(([category]) => category);
   }, [proposals]);
 
+  const toggleSeries = (seriesKey: string) => {
+    setHiddenSeries(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(seriesKey)) {
+        newSet.delete(seriesKey);
+      } else {
+        newSet.add(seriesKey);
+      }
+      return newSet;
+    });
+  };
+
   const exportToPNG = () => {
     if (!chartRef.current) return;
 
@@ -224,65 +336,6 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
     URL.revokeObjectURL(url);
   };
 
-  const customTooltip = ({ active, payload, label }: SuccessRateTooltipProps) => {
-    if (!active || !payload || payload.length === 0) return null;
-    if (!label) return null;
-
-    const dataPoint = chartData.find(d => d.date === label);
-    if (!dataPoint) return null;
-
-    const currentIndex = chartData.indexOf(dataPoint);
-    const previousPoint = currentIndex > 0 ? chartData[currentIndex - 1] : null;
-    
-    const trend = previousPoint 
-      ? dataPoint.overallRate > previousPoint.overallRate ? '↑' 
-        : dataPoint.overallRate < previousPoint.overallRate ? '↓' 
-        : '→'
-      : '→';
-
-    return (
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-4">
-        <p className="font-semibold text-gray-900 dark:text-white mb-2">
-          {format(new Date(label), 'MMM dd, yyyy')}
-        </p>
-        <div className="space-y-1">
-          {payload.map((entry, index) => (
-            <div key={index} className="flex items-center justify-between gap-4 text-sm">
-              <span className="flex items-center gap-2">
-                <span
-                  className="w-3 h-3 rounded-full"
-                  style={{ backgroundColor: entry.color }}
-                />
-                <span className="text-gray-700 dark:text-gray-300">{entry.name}:</span>
-              </span>
-              <span className="font-medium text-gray-900 dark:text-white">
-                {formatMetric(entry.value, 'percentage')}
-              </span>
-            </div>
-          ))}
-        </div>
-        <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
-          <div className="flex items-center justify-between text-sm">
-            <span className="text-gray-600 dark:text-gray-400">Proposals:</span>
-            <span className="font-medium text-gray-900 dark:text-white">
-              {dataPoint.proposalCount}
-            </span>
-          </div>
-          <div className="flex items-center justify-between text-sm mt-1">
-            <span className="text-gray-600 dark:text-gray-400">Trend:</span>
-            <span className={`font-bold text-lg ${
-              trend === '↑' ? 'text-green-500' : 
-              trend === '↓' ? 'text-red-500' : 
-              'text-gray-500'
-            }`}>
-              {trend}
-            </span>
-          </div>
-        </div>
-      </div>
-    );
-  };
-
   if (chartData.length === 0) {
     return (
       <div className="flex items-center justify-center h-64 bg-gray-50 dark:bg-gray-900 rounded-lg">
@@ -354,21 +407,31 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
               domain={[0, 100]}
             />
             
-            <Tooltip content={customTooltip} />
-            <Legend />
-
-            <Line
-              type="monotone"
-              dataKey="overallRate"
-              stroke="#10b981"
-              strokeWidth={3}
-              name="Overall Success Rate"
-              dot={{ r: 4 }}
-              activeDot={{ r: 6 }}
-              fill="url(#overallGradient)"
+            <Tooltip content={<SuccessRateTooltip chartData={chartData} />} />
+
+            <Legend
+              content={
+                <SuccessRateLegend
+                  hiddenSeries={hiddenSeries}
+                  onToggleSeries={toggleSeries}
+                />
+              }
             />
 
-            {chartData.length >= 7 && (
+            {!hiddenSeries.has('overallRate') && (
+              <Line
+                type="monotone"
+                dataKey="overallRate"
+                stroke="#10b981"
+                strokeWidth={3}
+                name="Overall Success Rate"
+                dot={{ r: 4 }}
+                activeDot={{ r: 6 }}
+                fill="url(#overallGradient)"
+              />
+            )}
+
+            {!hiddenSeries.has('ma7') && chartData.length >= 7 && (
               <Line
                 type="monotone"
                 dataKey="ma7"
@@ -380,7 +443,7 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
               />
             )}
 
-            {chartData.length >= 30 && (
+            {!hiddenSeries.has('ma30') && chartData.length >= 30 && (
               <Line
                 type="monotone"
                 dataKey="ma30"
@@ -394,6 +457,8 @@ export default function SuccessRateChart({ proposals, height = 400 }: SuccessRat
 
             {topCategories.map((category, index) => {
               const seriesKey = `${category}Rate`;
+              if (hiddenSeries.has(seriesKey)) return null;
+
               return (
                 <Line
                   key={category}
diff --git a/frontend/components/analytics/VoterNetworkGraph.tsx b/frontend/components/analytics/VoterNetworkGraph.tsx
index fdadc5ec..d66241c4 100644
--- a/frontend/components/analytics/VoterNetworkGraph.tsx
+++ b/frontend/components/analytics/VoterNetworkGraph.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useRef, useEffect, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { VoterMetrics } from '../../utils/analytics/dataCollector';
 
 interface VoterNetworkGraphProps {
@@ -25,61 +25,73 @@ interface Edge {
   weight: number;
 }
 
+interface NetworkData {
+  nodes: Node[];
+  edges: Edge[];
+}
+
+const buildNetworkData = (voters: VoterMetrics[], minVoteCount: number): NetworkData => {
+  const filteredVoters = voters.filter(v => v.totalVotes >= minVoteCount);
+  const width = 800;
+  const height = 600;
+
+  const nodes: Node[] = filteredVoters.map((voter, index) => {
+    const angle = filteredVoters.length > 0 ? (index / filteredVoters.length) * 2 * Math.PI : 0;
+    const orbitRadius = Math.min(width, height) / 3;
+
+    return {
+      id: voter.address,
+      x: width / 2 + Math.cos(angle) * orbitRadius,
+      y: height / 2 + Math.sin(angle) * orbitRadius,
+      vx: 0,
+      vy: 0,
+      totalVotes: voter.totalVotes,
+      avgWeight: voter.averageWeight,
+      radius: Math.max(5, Math.min(20, Math.sqrt(voter.totalVotes) * 2)),
+    };
+  });
+
+  const edges: Edge[] = [];
+
+  for (let i = 0; i < filteredVoters.length; i++) {
+    for (let j = i + 1; j < filteredVoters.length; j++) {
+      const voter1 = filteredVoters[i];
+      const voter2 = filteredVoters[j];
+      const sharedCategories = voter1.categories.filter(c => voter2.categories.includes(c));
+
+      if (sharedCategories.length > 0) {
+        edges.push({
+          source: voter1.address,
+          target: voter2.address,
+          weight: sharedCategories.length,
+        });
+      }
+    }
+  }
+
+  return { nodes, edges };
+};
+
 export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNetworkGraphProps) {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const [nodes, setNodes] = useState<Node[]>([]);
-  const [edges, setEdges] = useState<Edge[]>([]);
+  const animationRef = useRef<number | null>(null);
+  const nodesRef = useRef<Node[]>([]);
+  const edgesRef = useRef<Edge[]>([]);
   const [hoveredNode, setHoveredNode] = useState<Node | null>(null);
   const [viewMode, setViewMode] = useState<'influence' | 'delegation' | 'specialization'>('influence');
-  const animationRef = useRef<number | null>(null);
 
   const filteredVoters = useMemo(() => {
     return voters.filter(v => v.totalVotes >= minVoteCount);
   }, [voters, minVoteCount]);
 
-  useEffect(() => {
-    const width = 800;
-    const height = 600;
-
-    const newNodes: Node[] = filteredVoters.map((voter, i) => {
-      const angle = (i / filteredVoters.length) * 2 * Math.PI;
-      const radius = Math.min(width, height) / 3;
-      
-      return {
-        id: voter.address,
-        x: width / 2 + Math.cos(angle) * radius,
-        y: height / 2 + Math.sin(angle) * radius,
-        vx: 0,
-        vy: 0,
-        totalVotes: voter.totalVotes,
-        avgWeight: voter.averageWeight,
-        radius: Math.max(5, Math.min(20, Math.sqrt(voter.totalVotes) * 2))
-      };
-    });
-
-    const newEdges: Edge[] = [];
-    for (let i = 0; i < filteredVoters.length; i++) {
-      for (let j = i + 1; j < filteredVoters.length; j++) {
-        const voter1 = filteredVoters[i];
-        const voter2 = filteredVoters[j];
-
-        const sharedCategories = voter1.categories.filter(c => 
-          voter2.categories.includes(c)
-        );
-
-        if (sharedCategories.length > 0) {
-          newEdges.push({
-            source: voter1.address,
-            target: voter2.address,
-            weight: sharedCategories.length
-          });
-        }
-      }
-    }
+  const networkData = useMemo(() => {
+    return buildNetworkData(voters, minVoteCount);
+  }, [voters, minVoteCount]);
 
-    setNodes(newNodes);
-    setEdges(newEdges);
-  }, [filteredVoters]);
+  useEffect(() => {
+    nodesRef.current = networkData.nodes.map(node => ({ ...node }));
+    edgesRef.current = networkData.edges;
+  }, [networkData]);
 
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -91,81 +103,81 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
     const width = canvas.width;
     const height = canvas.height;
 
-    const simulate = () => {
+    const drawFrame = () => {
+      const nodes = nodesRef.current;
+      const edges = edgesRef.current;
+
       ctx.clearRect(0, 0, width, height);
 
-      setNodes(prevNodes => {
-        const newNodes = [...prevNodes];
-
-        newNodes.forEach(node => {
-          let fx = 0;
-          let fy = 0;
-
-          newNodes.forEach(other => {
-            if (node.id === other.id) return;
-
-            const dx = other.x - node.x;
-            const dy = other.y - node.y;
-            const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-
-            const repulsion = -100 / (dist * dist);
-            fx += (dx / dist) * repulsion;
-            fy += (dy / dist) * repulsion;
-          });
-
-          edges.forEach(edge => {
-            if (edge.source === node.id) {
-              const target = newNodes.find(n => n.id === edge.target);
-              if (target) {
-                const dx = target.x - node.x;
-                const dy = target.y - node.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const attraction = (dist - 100) * 0.01 * edge.weight;
-                fx += (dx / dist) * attraction;
-                fy += (dy / dist) * attraction;
-              }
-            }
-            if (edge.target === node.id) {
-              const source = newNodes.find(n => n.id === edge.source);
-              if (source) {
-                const dx = source.x - node.x;
-                const dy = source.y - node.y;
-                const dist = Math.sqrt(dx * dx + dy * dy) || 1;
-                const attraction = (dist - 100) * 0.01 * edge.weight;
-                fx += (dx / dist) * attraction;
-                fy += (dy / dist) * attraction;
-              }
+      const nextNodes = nodes.map(node => ({ ...node }));
+
+      nextNodes.forEach(node => {
+        let fx = 0;
+        let fy = 0;
+
+        nextNodes.forEach(other => {
+          if (node.id === other.id) return;
+
+          const dx = other.x - node.x;
+          const dy = other.y - node.y;
+          const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+          const repulsion = -100 / (dist * dist);
+
+          fx += (dx / dist) * repulsion;
+          fy += (dy / dist) * repulsion;
+        });
+
+        edges.forEach(edge => {
+          if (edge.source === node.id) {
+            const target = nextNodes.find(n => n.id === edge.target);
+            if (target) {
+              const dx = target.x - node.x;
+              const dy = target.y - node.y;
+              const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+              const attraction = (dist - 100) * 0.01 * edge.weight;
+              fx += (dx / dist) * attraction;
+              fy += (dy / dist) * attraction;
             }
-          });
-
-          const centerX = width / 2;
-          const centerY = height / 2;
-          const toCenterX = centerX - node.x;
-          const toCenterY = centerY - node.y;
-          const distToCenter = Math.sqrt(toCenterX * toCenterX + toCenterY * toCenterY);
-          
-          if (distToCenter > width / 3) {
-            fx += toCenterX * 0.001;
-            fy += toCenterY * 0.001;
           }
 
-          node.vx = (node.vx + fx) * 0.9;
-          node.vy = (node.vy + fy) * 0.9;
+          if (edge.target === node.id) {
+            const source = nextNodes.find(n => n.id === edge.source);
+            if (source) {
+              const dx = source.x - node.x;
+              const dy = source.y - node.y;
+              const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+              const attraction = (dist - 100) * 0.01 * edge.weight;
+              fx += (dx / dist) * attraction;
+              fy += (dy / dist) * attraction;
+            }
+          }
+        });
 
-          node.x += node.vx;
-          node.y += node.vy;
+        const centerX = width / 2;
+        const centerY = height / 2;
+        const toCenterX = centerX - node.x;
+        const toCenterY = centerY - node.y;
+        const distToCenter = Math.sqrt(toCenterX * toCenterX + toCenterY * toCenterY);
 
-          node.x = Math.max(node.radius, Math.min(width - node.radius, node.x));
-          node.y = Math.max(node.radius, Math.min(height - node.radius, node.y));
-        });
+        if (distToCenter > width / 3) {
+          fx += toCenterX * 0.001;
+          fy += toCenterY * 0.001;
+        }
 
-        return newNodes;
+        node.vx = (node.vx + fx) * 0.9;
+        node.vy = (node.vy + fy) * 0.9;
+        node.x += node.vx;
+        node.y += node.vy;
+        node.x = Math.max(node.radius, Math.min(width - node.radius, node.x));
+        node.y = Math.max(node.radius, Math.min(height - node.radius, node.y));
       });
 
+      nodesRef.current = nextNodes;
+
       edges.forEach(edge => {
-        const source = nodes.find(n => n.id === edge.source);
-        const target = nodes.find(n => n.id === edge.target);
-        
+        const source = nextNodes.find(n => n.id === edge.source);
+        const target = nextNodes.find(n => n.id === edge.target);
+
         if (source && target) {
           ctx.strokeStyle = '#374151';
           ctx.lineWidth = edge.weight * 0.5;
@@ -178,31 +190,33 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
         }
       });
 
-      nodes.forEach(node => {
-        const normalizedWeight = node.avgWeight / Math.max(...nodes.map(n => n.avgWeight));
+      const maxAvgWeight = Math.max(1, ...nextNodes.map(n => n.avgWeight));
+
+      nextNodes.forEach(node => {
+        const normalizedWeight = node.avgWeight / maxAvgWeight;
         const hue = normalizedWeight * 120;
         ctx.fillStyle = `hsl(${hue}, 70%, 50%)`;
-        
+
         ctx.beginPath();
         ctx.arc(node.x, node.y, node.radius, 0, Math.PI * 2);
         ctx.fill();
-        
+
         ctx.strokeStyle = hoveredNode?.id === node.id ? '#fff' : '#1f2937';
         ctx.lineWidth = hoveredNode?.id === node.id ? 3 : 1;
         ctx.stroke();
       });
 
-      animationRef.current = requestAnimationFrame(simulate);
+      animationRef.current = requestAnimationFrame(drawFrame);
     };
 
-    simulate();
+    drawFrame();
 
     return () => {
       if (animationRef.current !== null) {
         cancelAnimationFrame(animationRef.current);
       }
     };
-  }, [nodes, edges, hoveredNode]);
+  }, [hoveredNode, networkData]);
 
   const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
     const canvas = canvasRef.current;
@@ -212,7 +226,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 
-    const clickedNode = nodes.find(node => {
+    const clickedNode = nodesRef.current.find(node => {
       const dx = x - node.x;
       const dy = y - node.y;
       return Math.sqrt(dx * dx + dy * dy) <= node.radius;
@@ -234,13 +248,13 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 
-    const hoveredNode = nodes.find(node => {
+    const hovered = nodesRef.current.find(node => {
       const dx = x - node.x;
       const dy = y - node.y;
       return Math.sqrt(dx * dx + dy * dy) <= node.radius;
     });
 
-    setHoveredNode(hoveredNode || null);
+    setHoveredNode(hovered || null);
   };
 
   const keyInfluencers = useMemo(() => {
@@ -251,14 +265,14 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
 
   const independentVoters = useMemo(() => {
     const voterConnections = new Map<string, number>();
-    
-    edges.forEach(edge => {
+
+    networkData.edges.forEach(edge => {
       voterConnections.set(edge.source, (voterConnections.get(edge.source) || 0) + 1);
       voterConnections.set(edge.target, (voterConnections.get(edge.target) || 0) + 1);
     });
 
     return filteredVoters.filter(v => (voterConnections.get(v.address) || 0) < 2);
-  }, [filteredVoters, edges]);
+  }, [filteredVoters, networkData.edges]);
 
   return (
     <div className="space-y-6">
@@ -274,7 +288,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
           {[
             { value: 'influence' as const, label: 'Influence Map' },
             { value: 'delegation' as const, label: 'Delegation Chains' },
-            { value: 'specialization' as const, label: 'Category Focus' }
+            { value: 'specialization' as const, label: 'Category Focus' },
           ].map(option => (
             <button
               key={option.value}
@@ -302,7 +316,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
             className="w-full cursor-pointer"
             style={{ maxWidth: '100%', height: 'auto' }}
           />
-          
+
           <div className="mt-4 flex items-center justify-between text-sm">
             <div className="flex items-center gap-2">
               <span className="text-gray-600 dark:text-gray-400">Node size:</span>
@@ -332,9 +346,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
                       {voter.address.slice(0, 8)}...
                     </span>
                   </div>
-                  <span className="text-gray-700 dark:text-gray-300">
-                    {voter.totalVotes} votes
-                  </span>
+                  <span className="text-gray-700 dark:text-gray-300">{voter.totalVotes} votes</span>
                 </div>
               ))}
             </div>
@@ -345,11 +357,11 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
             <div className="space-y-2 text-sm">
               <div className="flex justify-between">
                 <span className="text-gray-600 dark:text-gray-400">Total Nodes:</span>
-                <span className="font-medium text-gray-900 dark:text-white">{nodes.length}</span>
+                <span className="font-medium text-gray-900 dark:text-white">{networkData.nodes.length}</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-gray-600 dark:text-gray-400">Total Edges:</span>
-                <span className="font-medium text-gray-900 dark:text-white">{edges.length}</span>
+                <span className="font-medium text-gray-900 dark:text-white">{networkData.edges.length}</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-gray-600 dark:text-gray-400">Independent Voters:</span>
@@ -360,9 +372,7 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
 
           {hoveredNode && (
             <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700 p-4">
-              <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">
-                Voter Details
-              </h4>
+              <h4 className="font-semibold text-blue-900 dark:text-blue-100 mb-2">Voter Details</h4>
               <div className="space-y-1 text-sm">
                 <div className="flex justify-between">
                   <span className="text-gray-600 dark:text-gray-400">Address:</span>
@@ -372,15 +382,11 @@ export default function VoterNetworkGraph({ voters, minVoteCount = 5 }: VoterNet
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-600 dark:text-gray-400">Total Votes:</span>
-                  <span className="font-medium text-gray-900 dark:text-white">
-                    {hoveredNode.totalVotes}
-                  </span>
+                  <span className="font-medium text-gray-900 dark:text-white">{hoveredNode.totalVotes}</span>
                 </div>
                 <div className="flex justify-between">
                   <span className="text-gray-600 dark:text-gray-400">Avg Weight:</span>
-                  <span className="font-medium text-gray-900 dark:text-white">
-                    {hoveredNode.avgWeight.toFixed(2)}
-                  </span>
+                  <span className="font-medium text-gray-900 dark:text-white">{hoveredNode.avgWeight.toFixed(2)}</span>
                 </div>
               </div>
             </div>
diff --git a/frontend/components/analytics/VotingTab.tsx b/frontend/components/analytics/VotingTab.tsx
index 1fac0291..dff16f9b 100644
--- a/frontend/components/analytics/VotingTab.tsx
+++ b/frontend/components/analytics/VotingTab.tsx
@@ -16,10 +16,10 @@ import {
     Area
 } from 'recharts';
 import {
-    Zap,
     ChevronUp,
     ChevronDown,
-    Shield
+    Shield,
+    Zap
 } from 'lucide-react';
 import BulkVotingQueue from '../BulkVotingQueue';
 import type { StatsCardProps } from '../../src/types';
@@ -57,15 +57,13 @@ const influenceRankings = [
     { rank: 5, user: 'charlie.stx', votes: 54, successRate: '78%', weight: 'Medium' },
 ];
 
-const INITIAL_LIVE_VOTES: LiveVote[] = [
-    { id: 1, user: 'mosas.btc', proposal: 'Stacks Wallet v3', type: 'YES', weight: 450, time: 'Now' },
-    { id: 2, user: 'alice.stx', proposal: 'NFT Grant #42', type: 'YES', weight: 120, time: '2s ago' },
-    { id: 3, user: 'bob.btc', proposal: 'Governance SIP-12', type: 'NO', weight: 800, time: '5s ago' },
-    { id: 4, user: 'charlie.stx', proposal: 'Stacks Wallet v3', type: 'YES', weight: 25, time: '12s ago' },
-];
-
 export default function VotingTab() {
-    const [liveVotes, setLiveVotes] = useState<LiveVote[]>(INITIAL_LIVE_VOTES);
+    const [liveVotes, setLiveVotes] = useState<LiveVote[]>(() => [
+        { id: 1, user: 'mosas.btc', proposal: 'Stacks Wallet v3', type: 'YES', weight: 450, time: 'Now' },
+        { id: 2, user: 'alice.stx', proposal: 'NFT Grant #42', type: 'YES', weight: 120, time: '2s ago' },
+        { id: 3, user: 'bob.btc', proposal: 'Governance SIP-12', type: 'NO', weight: 800, time: '5s ago' },
+        { id: 4, user: 'charlie.stx', proposal: 'Stacks Wallet v3', type: 'YES', weight: 25, time: '12s ago' },
+    ]);
 
     useEffect(() => {
         const interval = setInterval(() => {
diff --git a/frontend/components/charts/BudgetAllocator.tsx b/frontend/components/charts/BudgetAllocator.tsx
index 5bdbd1f1..d2862dba 100644
--- a/frontend/components/charts/BudgetAllocator.tsx
+++ b/frontend/components/charts/BudgetAllocator.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 import { Bar, Doughnut } from 'react-chartjs-2';
 import {
   Chart as ChartJS,
@@ -59,20 +59,20 @@ export default function BudgetAllocator() {
   const [showEditModal, setShowEditModal] = useState(false);
   const [editingCategory, setEditingCategory] = useState<CategoryBudget | null>(null);
   const [newAllocation, setNewAllocation] = useState(0);
-  const [alerts, setAlerts] = useState<string[]>([]);
-
-  useEffect(() => {
-    // Check for budget alerts
-    const newAlerts: string[] = [];
-    budgets.forEach(budget => {
-      if (budget.percentage >= 90) {
-        newAlerts.push(`⚠️ ${budget.category} budget is at ${budget.percentage.toFixed(1)}% - Critical!`);
-      } else if (budget.percentage >= 75) {
-        newAlerts.push(`⚡ ${budget.category} budget is at ${budget.percentage.toFixed(1)}% - Warning`);
-      }
-    });
-    setAlerts(newAlerts);
-  }, [budgets]);
+
+  const alerts = useMemo(
+    () =>
+      budgets.flatMap((budget) => {
+        if (budget.percentage >= 90) {
+          return [`⚠️ ${budget.category} budget is at ${budget.percentage.toFixed(1)}% - Critical!`];
+        }
+        if (budget.percentage >= 75) {
+          return [`⚡ ${budget.category} budget is at ${budget.percentage.toFixed(1)}% - Warning`];
+        }
+        return [];
+      }),
+    [budgets]
+  );
 
   const totalAllocated = budgets.reduce((sum, b) => sum + b.allocated, 0);
   const totalSpent = budgets.reduce((sum, b) => sum + b.spent, 0);
diff --git a/frontend/components/charts/ExpenseTracker.tsx b/frontend/components/charts/ExpenseTracker.tsx
index 34098eb5..06e2edf3 100644
--- a/frontend/components/charts/ExpenseTracker.tsx
+++ b/frontend/components/charts/ExpenseTracker.tsx
@@ -21,11 +21,11 @@ interface Expense {
 }
 
 export default function ExpenseTracker() {
-  const now = Date.parse(new Date().toISOString());
+  const [baseTime] = useState(() => Date.now());
   const [expenses, setExpenses] = useState<Expense[]>([
     {
       id: 1,
-      date: now - 2 * 24 * 60 * 60 * 1000,
+      date: baseTime - 2 * 24 * 60 * 60 * 1000,
       category: 'DeFi',
       description: 'Grant #42 - DeFi Protocol Development',
       amount: 75000,
@@ -40,7 +40,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 2,
-      date: now - 5 * 24 * 60 * 60 * 1000,
+      date: baseTime - 5 * 24 * 60 * 60 * 1000,
       category: 'Infrastructure',
       description: 'AWS Cloud Services',
       amount: 3500,
@@ -56,7 +56,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 3,
-      date: now - 7 * 24 * 60 * 60 * 1000,
+      date: baseTime - 7 * 24 * 60 * 60 * 1000,
       category: 'Marketing',
       description: 'Social Media Campaign - Q1',
       amount: 8000,
@@ -69,7 +69,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 4,
-      date: now - 10 * 24 * 60 * 60 * 1000,
+      date: baseTime - 10 * 24 * 60 * 60 * 1000,
       category: 'Operational',
       description: 'Legal & Compliance Consulting',
       amount: 12000,
@@ -84,7 +84,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 5,
-      date: now - 1 * 24 * 60 * 60 * 1000,
+      date: baseTime - 1 * 24 * 60 * 60 * 1000,
       category: 'Community',
       description: 'Community Event Sponsorship',
       amount: 5000,
@@ -98,7 +98,7 @@ export default function ExpenseTracker() {
     },
     {
       id: 6,
-      date: now - 15 * 24 * 60 * 60 * 1000,
+      date: baseTime - 15 * 24 * 60 * 60 * 1000,
       category: 'NFT',
       description: 'Grant #38 - NFT Marketplace',
       amount: 45000,
@@ -113,7 +113,6 @@ export default function ExpenseTracker() {
     }
   ]);
 
-  const [, setShowExpenseModal] = useState(false);
   const [showReceiptModal, setShowReceiptModal] = useState(false);
   const [selectedExpense, setSelectedExpense] = useState<Expense | null>(null);
   const [filterStatus, setFilterStatus] = useState<'all' | Expense['status']>('all');
diff --git a/frontend/components/charts/SocialGraph.tsx b/frontend/components/charts/SocialGraph.tsx
index 90826266..38897c8d 100644
--- a/frontend/components/charts/SocialGraph.tsx
+++ b/frontend/components/charts/SocialGraph.tsx
@@ -27,11 +27,11 @@ interface SocialGraphProps {
   currentUser: string;
 }
 
-export default function SocialGraph({ currentUser }: SocialGraphProps) {
-  void currentUser;
-  const baselineTimestamp = Date.parse(new Date().toISOString());
+export default function SocialGraph({ currentUser: _currentUser }: SocialGraphProps) {
+  void _currentUser;
+  const [now] = useState(() => Date.now());
   const [activeTab, setActiveTab] = useState<'following' | 'followers' | 'discover'>('following');
-  const [users, setUsers] = useState<User[]>([
+  const [users, setUsers] = useState<User[]>(() => [
     {
       address: 'SP1ABC...DEF',
       username: 'alice_dao',
@@ -42,7 +42,7 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
       bio: 'DeFi enthusiast | Building the future of finance',
       isFollowing: true,
       mutualConnections: 12,
-      lastActive: baselineTimestamp - 2 * 60 * 60 * 1000
+      lastActive: now - 2 * 60 * 60 * 1000
     },
     {
       address: 'SP2XYZ...GHI',
@@ -54,7 +54,7 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
       bio: 'Smart contract developer | Open source contributor',
       isFollowing: true,
       mutualConnections: 8,
-      lastActive: baselineTimestamp - 5 * 60 * 60 * 1000
+      lastActive: now - 5 * 60 * 60 * 1000
     },
     {
       address: 'SP3MNO...PQR',
@@ -66,7 +66,7 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
       bio: 'NFT creator | Community advocate',
       isFollowing: false,
       mutualConnections: 5,
-      lastActive: baselineTimestamp - 24 * 60 * 60 * 1000
+      lastActive: now - 24 * 60 * 60 * 1000
     },
     {
       address: 'SP4STU...VWX',
@@ -78,10 +78,10 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
       bio: 'VC | Crypto investor | Supporting innovation',
       isFollowing: false,
       mutualConnections: 15,
-      lastActive: baselineTimestamp - 1 * 60 * 60 * 1000
+      lastActive: now - 1 * 60 * 60 * 1000
     }
   ]);
-  const [activities] = useState<Activity[]>([
+  const [activities] = useState<Activity[]>(() => [
     {
       id: 1,
       user: {
@@ -90,11 +90,15 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
         avatar: '👩‍💼',
         reputation: 8500,
         followers: 342,
-        following: 89
+        following: 89,
+        bio: 'DeFi enthusiast | Building the future of finance',
+        isFollowing: true,
+        mutualConnections: 12,
+        lastActive: now - 2 * 60 * 60 * 1000
       },
       type: 'proposal',
       content: 'Created proposal: DeFi Lending Protocol v2',
-      timestamp: baselineTimestamp - 3 * 60 * 60 * 1000
+      timestamp: now - 3 * 60 * 60 * 1000
     },
     {
       id: 2,
@@ -104,11 +108,15 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
         avatar: '👨‍💻',
         reputation: 6200,
         followers: 215,
-        following: 156
+        following: 156,
+        bio: 'Smart contract developer | Open source contributor',
+        isFollowing: true,
+        mutualConnections: 8,
+        lastActive: now - 5 * 60 * 60 * 1000
       },
       type: 'vote',
       content: 'Voted YES on "Community NFT Marketplace"',
-      timestamp: baselineTimestamp - 5 * 60 * 60 * 1000
+      timestamp: now - 5 * 60 * 60 * 1000
     },
     {
       id: 3,
@@ -118,11 +126,15 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
         avatar: '👩‍💼',
         reputation: 8500,
         followers: 342,
-        following: 89
+        following: 89,
+        bio: 'DeFi enthusiast | Building the future of finance',
+        isFollowing: true,
+        mutualConnections: 12,
+        lastActive: now - 2 * 60 * 60 * 1000
       },
       type: 'achievement',
       content: 'Earned "Top Contributor" badge 🏆',
-      timestamp: baselineTimestamp - 12 * 60 * 60 * 1000
+      timestamp: now - 12 * 60 * 60 * 1000
     },
     {
       id: 4,
@@ -132,16 +144,19 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
         avatar: '👨‍💻',
         reputation: 6200,
         followers: 215,
-        following: 156
+        following: 156,
+        bio: 'Smart contract developer | Open source contributor',
+        isFollowing: true,
+        mutualConnections: 8,
+        lastActive: now - 5 * 60 * 60 * 1000
       },
       type: 'comment',
       content: 'Commented on proposal #42',
-      timestamp: baselineTimestamp - 18 * 60 * 60 * 1000
+      timestamp: now - 18 * 60 * 60 * 1000
     }
   ]);
   const [searchQuery, setSearchQuery] = useState('');
   const [filterReputation, setFilterReputation] = useState<'all' | 'high' | 'medium'>('all');
-  const currentTimestamp = Date.parse(new Date().toISOString());
 
   const followUser = (address: string) => {
     setUsers(users.map(user => 
@@ -160,7 +175,7 @@ export default function SocialGraph({ currentUser }: SocialGraphProps) {
   };
 
   const formatTimeAgo = (timestamp: number) => {
-    const diff = currentTimestamp - timestamp;
+    const diff = now - timestamp;
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(hours / 24);
     
diff --git a/frontend/components/common/DarkModeToggle.tsx b/frontend/components/common/DarkModeToggle.tsx
index f7a2cafe..97c8a8f0 100644
--- a/frontend/components/common/DarkModeToggle.tsx
+++ b/frontend/components/common/DarkModeToggle.tsx
@@ -1,19 +1,10 @@
 'use client';
 
 import { useTheme } from 'next-themes';
-import { useEffect, useState } from 'react';
 
 export default function DarkModeToggle() {
-    const [mounted, setMounted] = useState(false);
     const { theme, setTheme } = useTheme();
-
-    useEffect(() => {
-        setMounted(true);
-    }, []);
-
-    if (!mounted) {
-        return null;
-    }
+    const isDark = theme === 'dark';
 
     return (
         <button
@@ -21,7 +12,7 @@ export default function DarkModeToggle() {
             className="p-2 rounded-lg bg-white/10 hover:bg-white/20 transition-all duration-200 border border-white/20"
             aria-label="Toggle dark mode"
         >
-            {theme === 'dark' ? (
+            {isDark ? (
                 <svg className="w-5 h-5 text-yellow-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
                 </svg>
diff --git a/frontend/components/common/DataRefreshIndicator.tsx b/frontend/components/common/DataRefreshIndicator.tsx
index fb313089..8ebd0595 100644
--- a/frontend/components/common/DataRefreshIndicator.tsx
+++ b/frontend/components/common/DataRefreshIndicator.tsx
@@ -5,11 +5,11 @@ import { useGovernanceAnalytics } from '@/hooks/useGovernanceAnalytics';
 
 export function DataRefreshIndicator() {
   const { loading } = useGovernanceAnalytics();
-  const [lastUpdated] = useState<Date>(new Date());
+  const [lastUpdated] = useState<Date>(() => new Date());
   const [timeSinceUpdate, setTimeSinceUpdate] = useState('now');
 
   useEffect(() => {
-    const interval = setInterval(() => {
+    const updateTimeSince = () => {
       const now = new Date();
       const diffMs = now.getTime() - lastUpdated.getTime();
       const diffMins = Math.floor(diffMs / 60000);
@@ -23,6 +23,11 @@ export function DataRefreshIndicator() {
         const diffHours = Math.floor(diffMins / 60);
         setTimeSinceUpdate(`${diffHours}h ago`);
       }
+    };
+
+    updateTimeSince();
+    const interval = setInterval(() => {
+      updateTimeSince();
     }, 10000);
 
     return () => clearInterval(interval);
diff --git a/frontend/components/common/NotificationCenter.tsx b/frontend/components/common/NotificationCenter.tsx
index 73184912..c6257d98 100644
--- a/frontend/components/common/NotificationCenter.tsx
+++ b/frontend/components/common/NotificationCenter.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useMemo } from 'react';
+import { useState, useEffect } from 'react';
 
 interface Notification {
   id: number;
@@ -37,110 +37,129 @@ interface NotificationCenterProps {
   userAddress: string;
 }
 
+const createMockNotifications = (baseTime: number): Notification[] => [
+  {
+    id: 1,
+    type: 'proposal',
+    title: 'New Proposal Submitted',
+    message: 'alice_dao created "DeFi Lending Protocol v2" proposal',
+    timestamp: baseTime - 2 * 60 * 60 * 1000,
+    read: false,
+    priority: 'high',
+    actionUrl: '/proposals/42',
+    metadata: { proposalId: 42, userAddress: 'SP1ABC...DEF' }
+  },
+  {
+    id: 2,
+    type: 'vote',
+    title: 'Proposal Voting Ending Soon',
+    message: 'Only 6 hours left to vote on "Community NFT Marketplace"',
+    timestamp: baseTime - 4 * 60 * 60 * 1000,
+    read: false,
+    priority: 'high',
+    actionUrl: '/proposals/28'
+  },
+  {
+    id: 3,
+    type: 'achievement',
+    title: 'New Achievement Unlocked!',
+    message: 'You earned the "Top Contributor" badge 🏆',
+    timestamp: baseTime - 12 * 60 * 60 * 1000,
+    read: true,
+    priority: 'medium'
+  },
+  {
+    id: 4,
+    type: 'comment',
+    title: 'New Comment on Your Proposal',
+    message: 'bob_builder commented on your proposal #15',
+    timestamp: baseTime - 24 * 60 * 60 * 1000,
+    read: false,
+    priority: 'medium',
+    actionUrl: '/proposals/15#comments'
+  },
+  {
+    id: 5,
+    type: 'mention',
+    title: 'You were mentioned',
+    message: 'carol_artist mentioned you in a comment',
+    timestamp: baseTime - 36 * 60 * 60 * 1000,
+    read: true,
+    priority: 'low'
+  },
+  {
+    id: 6,
+    type: 'treasury',
+    title: 'Treasury Transaction',
+    message: '75,000 STX distributed to approved proposal',
+    timestamp: baseTime - 48 * 60 * 60 * 1000,
+    read: true,
+    priority: 'medium',
+    metadata: { amount: 75000 }
+  },
+  {
+    id: 7,
+    type: 'delegation',
+    title: 'Voting Power Delegated',
+    message: 'dave_investor delegated 5,000 voting power to you',
+    timestamp: baseTime - 72 * 60 * 60 * 1000,
+    read: true,
+    priority: 'medium',
+    metadata: { amount: 5000, userAddress: 'SP4STU...VWX' }
+  },
+  {
+    id: 8,
+    type: 'system',
+    title: 'System Update',
+    message: 'New features available: Dashboard customization and insights',
+    timestamp: baseTime - 96 * 60 * 60 * 1000,
+    read: true,
+    priority: 'low'
+  }
+];
+
+const defaultNotificationPreferences = (): NotificationPreferences => ({
+  emailEnabled: true,
+  pushEnabled: false,
+  digestMode: 'instant',
+  categories: {
+    proposals: true,
+    votes: true,
+    comments: true,
+    mentions: true,
+    achievements: true,
+    treasury: true,
+    system: true
+  }
+});
+
+const loadNotificationPreferences = (userAddress: string): NotificationPreferences => {
+  if (typeof window === 'undefined') {
+    return defaultNotificationPreferences();
+  }
+
+  const savedPrefs = window.localStorage.getItem(`notification-prefs-${userAddress}`);
+  if (!savedPrefs) {
+    return defaultNotificationPreferences();
+  }
+
+  return JSON.parse(savedPrefs) as NotificationPreferences;
+};
+
 export default function NotificationCenter({ userAddress }: NotificationCenterProps) {
-  const now = useMemo(() => Date.parse(new Date().toISOString()), []);
-  const [notifications, setNotifications] = useState<Notification[]>(() => [
-    {
-      id: 1,
-      type: 'proposal',
-      title: 'New Proposal Submitted',
-      message: 'alice_dao created "DeFi Lending Protocol v2" proposal',
-      timestamp: Date.now() - 2 * 60 * 60 * 1000,
-      read: false,
-      priority: 'high',
-      actionUrl: '/proposals/42',
-      metadata: { proposalId: 42, userAddress: 'SP1ABC...DEF' }
-    },
-    {
-      id: 2,
-      type: 'vote',
-      title: 'Proposal Voting Ending Soon',
-      message: 'Only 6 hours left to vote on "Community NFT Marketplace"',
-      timestamp: Date.now() - 4 * 60 * 60 * 1000,
-      read: false,
-      priority: 'high',
-      actionUrl: '/proposals/28'
-    },
-    {
-      id: 3,
-      type: 'achievement',
-      title: 'New Achievement Unlocked!',
-      message: 'You earned the "Top Contributor" badge 🏆',
-      timestamp: Date.now() - 12 * 60 * 60 * 1000,
-      read: true,
-      priority: 'medium'
-    },
-    {
-      id: 4,
-      type: 'comment',
-      title: 'New Comment on Your Proposal',
-      message: 'bob_builder commented on your proposal #15',
-      timestamp: Date.now() - 24 * 60 * 60 * 1000,
-      read: false,
-      priority: 'medium',
-      actionUrl: '/proposals/15#comments'
-    },
-    {
-      id: 5,
-      type: 'mention',
-      title: 'You were mentioned',
-      message: 'carol_artist mentioned you in a comment',
-      timestamp: Date.now() - 36 * 60 * 60 * 1000,
-      read: true,
-      priority: 'low'
-    },
-    {
-      id: 6,
-      type: 'treasury',
-      title: 'Treasury Transaction',
-      message: '75,000 STX distributed to approved proposal',
-      timestamp: Date.now() - 48 * 60 * 60 * 1000,
-      read: true,
-      priority: 'medium',
-      metadata: { amount: 75000 }
-    },
-    {
-      id: 7,
-      type: 'delegation',
-      title: 'Voting Power Delegated',
-      message: 'dave_investor delegated 5,000 voting power to you',
-      timestamp: Date.now() - 72 * 60 * 60 * 1000,
-      read: true,
-      priority: 'medium',
-      metadata: { amount: 5000, userAddress: 'SP4STU...VWX' }
-    },
-    {
-      id: 8,
-      type: 'system',
-      title: 'System Update',
-      message: 'New features available: Dashboard customization and insights',
-      timestamp: Date.now() - 96 * 60 * 60 * 1000,
-      read: true,
-      priority: 'low'
-    }
-  ]);
+  const [currentTime, setCurrentTime] = useState(() => Date.now());
+  const [notifications, setNotifications] = useState<Notification[]>(() => createMockNotifications(currentTime));
   const [filter, setFilter] = useState<'all' | 'unread' | 'high'>('all');
   const [showSettings, setShowSettings] = useState(false);
-  const [preferences, setPreferences] = useState<NotificationPreferences>(() => {
-    const defaults: NotificationPreferences = {
-      emailEnabled: true,
-      pushEnabled: false,
-      digestMode: 'instant',
-      categories: {
-        proposals: true,
-        votes: true,
-        comments: true,
-        mentions: true,
-        achievements: true,
-        treasury: true,
-        system: true
-      }
-    };
+  const [preferences, setPreferences] = useState<NotificationPreferences>(() => loadNotificationPreferences(userAddress));
 
-    if (typeof window === 'undefined') return defaults;
-    const savedPrefs = localStorage.getItem(`notification-prefs-${userAddress}`);
-    return savedPrefs ? JSON.parse(savedPrefs) : defaults;
-  });
+  useEffect(() => {
+    const timer = window.setInterval(() => {
+      setCurrentTime(Date.now());
+    }, 60_000);
+
+    return () => window.clearInterval(timer);
+  }, []);
 
   const markAsRead = (id: number) => {
     setNotifications(notifications.map(n => 
@@ -169,7 +188,7 @@ export default function NotificationCenter({ userAddress }: NotificationCenterPr
   };
 
   const formatTimeAgo = (timestamp: number) => {
-    const diff = now - timestamp;
+    const diff = currentTime - timestamp;
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(hours / 24);
     
diff --git a/frontend/components/dashboard/ActivityFeed.tsx b/frontend/components/dashboard/ActivityFeed.tsx
index f825fd57..676db882 100644
--- a/frontend/components/dashboard/ActivityFeed.tsx
+++ b/frontend/components/dashboard/ActivityFeed.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useState, useMemo } from 'react';
 
 interface Activity {
   id: string;
@@ -21,82 +21,84 @@ interface ActivityFeedProps {
 }
 
 export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
-  const now = Date.parse(new Date().toISOString());
-  const [activities] = useState<Activity[]>([
-    {
-      id: '1',
-      type: 'proposal',
-      title: 'Created New Proposal',
-      description: 'DeFi Lending Protocol Development',
-      timestamp: now - 2 * 60 * 60 * 1000,
-      metadata: { proposalId: 42, amount: 50000 }
-    },
-    {
-      id: '2',
-      type: 'vote',
-      title: 'Voted on Proposal',
-      description: 'NFT Marketplace Infrastructure (#38)',
-      timestamp: now - 5 * 60 * 60 * 1000,
-      metadata: { proposalId: 38, voteType: 'yes' }
-    },
-    {
-      id: '3',
-      type: 'comment',
-      title: 'Commented on Proposal',
-      description: 'Added feedback to Community Event Planning (#35)',
-      timestamp: now - 24 * 60 * 60 * 1000,
-      metadata: { proposalId: 35 }
-    },
-    {
-      id: '4',
-      type: 'achievement',
-      title: 'Achievement Unlocked',
-      description: 'Earned "Active Voter" badge',
-      timestamp: now - 2 * 24 * 60 * 60 * 1000,
-      metadata: { achievementIcon: '⭐' }
-    },
-    {
-      id: '5',
-      type: 'execution',
-      title: 'Proposal Executed',
-      description: 'Your proposal "Smart Contract Upgrade" was successfully executed',
-      timestamp: now - 3 * 24 * 60 * 60 * 1000,
-      metadata: { proposalId: 28, amount: 75000 }
-    },
-    {
-      id: '6',
-      type: 'collaboration',
-      title: 'Collaboration Invite',
-      description: 'Added as co-author to "DAO Treasury Diversification"',
-      timestamp: now - 4 * 24 * 60 * 60 * 1000,
-      metadata: { proposalId: 40 }
-    },
-    {
-      id: '7',
-      type: 'vote',
-      title: 'Voted on Proposal',
-      description: 'Marketing Campaign Q1 2026 (#36)',
-      timestamp: now - 5 * 24 * 60 * 60 * 1000,
-      metadata: { proposalId: 36, voteType: 'no' }
-    },
-    {
-      id: '8',
-      type: 'comment',
-      title: 'Commented on Proposal',
-      description: 'Shared thoughts on Developer Tools Enhancement (#33)',
-      timestamp: now - 6 * 24 * 60 * 60 * 1000,
-      metadata: { proposalId: 33 }
-    }
-  ]);
+  const [currentTime] = useState(() => Date.now());
   const [filter, setFilter] = useState<string>('all');
-  const filteredActivities = useMemo(
-    () => (filter === 'all' ? activities : activities.filter(a => a.type === filter)),
-    [activities, filter]
+  const [page, setPage] = useState(1);
+  const mockActivities = useMemo<Activity[]>(() => [
+      {
+        id: '1',
+        type: 'proposal',
+        title: 'Created New Proposal',
+        description: 'DeFi Lending Protocol Development',
+        timestamp: 1700000000000 - 2 * 60 * 60 * 1000,
+        metadata: { proposalId: 42, amount: 50000 }
+      },
+      {
+        id: '2',
+        type: 'vote',
+        title: 'Voted on Proposal',
+        description: 'NFT Marketplace Infrastructure (#38)',
+        timestamp: currentTime - 5 * 60 * 60 * 1000,
+        metadata: { proposalId: 38, voteType: 'yes' }
+      },
+      {
+        id: '3',
+        type: 'comment',
+        title: 'Commented on Proposal',
+        description: 'Added feedback to Community Event Planning (#35)',
+        timestamp: currentTime - 24 * 60 * 60 * 1000,
+        metadata: { proposalId: 35 }
+      },
+      {
+        id: '4',
+        type: 'achievement',
+        title: 'Achievement Unlocked',
+        description: 'Earned "Active Voter" badge',
+        timestamp: currentTime - 2 * 24 * 60 * 60 * 1000,
+        metadata: { achievementIcon: '⭐' }
+      },
+      {
+        id: '5',
+        type: 'execution',
+        title: 'Proposal Executed',
+        description: 'Your proposal "Smart Contract Upgrade" was successfully executed',
+        timestamp: currentTime - 3 * 24 * 60 * 60 * 1000,
+        metadata: { proposalId: 28, amount: 75000 }
+      },
+      {
+        id: '6',
+        type: 'collaboration',
+        title: 'Collaboration Invite',
+        description: 'Added as co-author to "DAO Treasury Diversification"',
+        timestamp: currentTime - 4 * 24 * 60 * 60 * 1000,
+        metadata: { proposalId: 40 }
+      },
+      {
+        id: '7',
+        type: 'vote',
+        title: 'Voted on Proposal',
+        description: 'Marketing Campaign Q1 2026 (#36)',
+        timestamp: currentTime - 5 * 24 * 60 * 60 * 1000,
+        metadata: { proposalId: 36, voteType: 'no' }
+      },
+      {
+        id: '8',
+        type: 'comment',
+        title: 'Commented on Proposal',
+        description: 'Shared thoughts on Developer Tools Enhancement (#33)',
+        timestamp: 1700000000000 - 6 * 24 * 60 * 60 * 1000,
+        metadata: { proposalId: 33 }
+      }
+  ], [currentTime]);
+
+  const activities = useMemo(
+    () => (filter === 'all' ? mockActivities : mockActivities.filter((a) => a.type === filter)),
+    [mockActivities, filter]
   );
-  const hasMore = filteredActivities.length >= 8;
-  void userAddress;
+  const hasMore = activities.length >= 8;
 
   const loadMore = () => {
+    setPage(page + 1);
     // Would load more activities in real implementation
   };
 
@@ -125,7 +127,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
   };
 
   const getTimeAgo = (timestamp: number) => {
-    const seconds = Math.floor((now - timestamp) / 1000);
+    const seconds = Math.floor((currentTime - timestamp) / 1000);
     if (seconds < 60) return 'just now';
     const minutes = Math.floor(seconds / 60);
     if (minutes < 60) return `${minutes}m ago`;
@@ -139,7 +141,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
   const exportActivities = () => {
     const csv = [
       ['Type', 'Title', 'Description', 'Date'].join(','),
-      ...filteredActivities.map(a => [
+      ...activities.map(a => [
         a.type,
         `"${a.title}"`,
         `"${a.description}"`,
@@ -151,12 +153,12 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
     const url = URL.createObjectURL(blob);
     const a = document.createElement('a');
     a.href = url;
-    a.download = `activity-log-${now}.csv`;
+    a.download = `activity-log-${userAddress}.csv`;
     a.click();
   };
 
   const shareHighlights = () => {
-    const highlights = filteredActivities.slice(0, 5);
+    const highlights = activities.slice(0, 5);
     const text = `My recent DAO activity:\n${highlights.map(h => `• ${h.title}`).join('\n')}`;
     navigator.clipboard.writeText(text);
     alert('Activity highlights copied to clipboard!');
@@ -202,14 +204,14 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
 
       {/* Activity Timeline */}
       <div className="space-y-4">
-        {filteredActivities.map((activity, index) => {
+        {activities.map((activity, index) => {
           const color = getActivityColor(activity.type);
           const icon = activity.metadata?.achievementIcon || getActivityIcon(activity.type);
 
           return (
             <div key={activity.id} className="relative">
               {/* Timeline Line */}
-              {index < filteredActivities.length - 1 && (
+              {index < activities.length - 1 && (
                 <div className="absolute left-6 top-12 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700" />
               )}
 
@@ -276,7 +278,7 @@ export default function ActivityFeed({ userAddress }: ActivityFeedProps) {
         </button>
       )}
 
-      {filteredActivities.length === 0 && (
+      {activities.length === 0 && (
         <div className="text-center py-12 text-gray-500">
           <div className="text-4xl mb-2">📭</div>
           <p>No activities yet. Start participating in the DAO!</p>
diff --git a/frontend/components/dashboard/DashboardCustomizer.tsx b/frontend/components/dashboard/DashboardCustomizer.tsx
index a0f95952..1f3248fd 100644
--- a/frontend/components/dashboard/DashboardCustomizer.tsx
+++ b/frontend/components/dashboard/DashboardCustomizer.tsx
@@ -30,7 +30,7 @@ interface DashboardCustomizerProps {
   userAddress: string;
 }
 
-const DEFAULT_WIDGETS: Widget[] = [
+const buildDefaultWidgets = (): Widget[] => [
   { id: '1', title: 'Active Proposals', type: 'proposals', enabled: true, position: 0, size: 'large' },
   { id: '2', title: 'Voting Power', type: 'voting', enabled: true, position: 1, size: 'medium' },
   { id: '3', title: 'Treasury Overview', type: 'treasury', enabled: true, position: 2, size: 'medium' },
@@ -41,14 +41,17 @@ const DEFAULT_WIDGETS: Widget[] = [
   { id: '8', title: 'Trending Topics', type: 'trending', enabled: false, position: 7, size: 'medium' }
 ];
 
+const buildDefaultLayouts = (widgets: Widget[]): Layout[] => [
+  {
+    id: 'default',
+    name: 'Default Layout',
+    widgets,
+    colorScheme: 'ocean'
+  }
+];
+
 export default function DashboardCustomizer({ userAddress }: DashboardCustomizerProps) {
-  const [widgets, setWidgets] = useState<Widget[]>(() => {
-    if (typeof window === 'undefined') return DEFAULT_WIDGETS;
-    const saved = localStorage.getItem(`dashboard-customization-${userAddress}`);
-    if (!saved) return DEFAULT_WIDGETS;
-    const data = JSON.parse(saved) as { widgets?: Widget[] };
-    return data.widgets || DEFAULT_WIDGETS;
-  });
+  const [widgets, setWidgets] = useState<Widget[]>(() => buildDefaultWidgets());
 
   const [colorSchemes] = useState<ColorScheme[]>([
     { id: 'ocean', name: 'Ocean Blue', primary: '#3B82F6', secondary: '#1E40AF', accent: '#60A5FA' },
@@ -59,28 +62,8 @@ export default function DashboardCustomizer({ userAddress }: DashboardCustomizer
   ]);
 
   const [selectedColorScheme, setSelectedColorScheme] = useState('ocean');
-  const [layouts, setLayouts] = useState<Layout[]>(() => {
-    const defaultLayouts: Layout[] = [
-      {
-        id: 'default',
-        name: 'Default Layout',
-        widgets: DEFAULT_WIDGETS,
-        colorScheme: 'ocean'
-      }
-    ];
-    if (typeof window === 'undefined') return defaultLayouts;
-    const saved = localStorage.getItem(`dashboard-customization-${userAddress}`);
-    if (!saved) return defaultLayouts;
-    const data = JSON.parse(saved) as { layouts?: Layout[] };
-    return data.layouts || defaultLayouts;
-  });
-  const [currentLayout, setCurrentLayout] = useState(() => {
-    if (typeof window === 'undefined') return 'default';
-    const saved = localStorage.getItem(`dashboard-customization-${userAddress}`);
-    if (!saved) return 'default';
-    const data = JSON.parse(saved) as { currentLayout?: string };
-    return data.currentLayout || 'default';
-  });
+  const [layouts, setLayouts] = useState<Layout[]>(() => buildDefaultLayouts(buildDefaultWidgets()));
+  const [currentLayout, setCurrentLayout] = useState('default');
   const [showSaveDialog, setShowSaveDialog] = useState(false);
   const [newLayoutName, setNewLayoutName] = useState('');
   const [draggedWidget, setDraggedWidget] = useState<string | null>(null);
diff --git a/frontend/components/dashboard/UserDashboard.tsx b/frontend/components/dashboard/UserDashboard.tsx
index 6d29b7f6..2ff76ffa 100644
--- a/frontend/components/dashboard/UserDashboard.tsx
+++ b/frontend/components/dashboard/UserDashboard.tsx
@@ -42,11 +42,13 @@ export default function UserDashboard({ userAddress }: UserDashboardProps) {
     }, [userAddress]);
 
     useEffect(() => {
-        if (!userAddress) return;
-        const timeout = window.setTimeout(() => {
-            fetchUserData();
-        }, 0);
-        return () => window.clearTimeout(timeout);
+        if (userAddress) {
+            const timeout = window.setTimeout(() => {
+                void fetchUserData();
+            }, 0);
+
+            return () => window.clearTimeout(timeout);
+        }
     }, [userAddress, fetchUserData]);
 
     const shortenAddress = (address: string) => {
diff --git a/frontend/components/dashboard/UserInsights.tsx b/frontend/components/dashboard/UserInsights.tsx
index 77cffbfb..c4156353 100644
--- a/frontend/components/dashboard/UserInsights.tsx
+++ b/frontend/components/dashboard/UserInsights.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 
 interface AIRecommendationMetadata {
   relatedProposalId?: number;
@@ -39,19 +39,11 @@ interface OptimalStrategy {
   recommendedActions: string[];
 }
 
-interface UserInsightsProps {
-  userAddress: string;
-}
-
-export default function UserInsights({ userAddress }: UserInsightsProps) {
-  const [recommendations, setRecommendations] = useState<AIRecommendation[]>([]);
-  const [performanceReport, setPerformanceReport] = useState<PerformanceReport | null>(null);
-  const [strategies, setStrategies] = useState<OptimalStrategy[]>([]);
+export default function UserInsights() {
   const [activeTab, setActiveTab] = useState<'recommendations' | 'performance' | 'strategies'>('recommendations');
   const [filterImpact, setFilterImpact] = useState<'all' | 'high' | 'medium'>('all');
 
-  useEffect(() => {
-    // Load AI-powered insights
+  const { recommendations, performanceReport, strategies } = useMemo(() => {
     const mockRecommendations: AIRecommendation[] = [
       {
         id: 1,
@@ -162,10 +154,12 @@ export default function UserInsights({ userAddress }: UserInsightsProps) {
       }
     ];
 
-    setRecommendations(mockRecommendations);
-    setPerformanceReport(mockPerformance);
-    setStrategies(mockStrategies);
-  }, [userAddress]);
+    return {
+      recommendations: mockRecommendations,
+      performanceReport: mockPerformance,
+      strategies: mockStrategies
+    };
+  }, []);
 
   const filteredRecommendations = recommendations.filter(rec => {
     if (filterImpact === 'all') return true;
diff --git a/frontend/components/dashboard/UserNetwork.tsx b/frontend/components/dashboard/UserNetwork.tsx
index 7951f60a..b1e5ed05 100644
--- a/frontend/components/dashboard/UserNetwork.tsx
+++ b/frontend/components/dashboard/UserNetwork.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useMemo } from 'react';
 
 interface Connection {
   address: string;
@@ -32,18 +32,14 @@ interface UserNetworkProps {
 }
 
 export default function UserNetwork({ currentUser }: UserNetworkProps) {
-  const [connections, setConnections] = useState<Connection[]>([]);
-  const [conversations, setConversations] = useState<Conversation[]>([]);
+  const [now] = useState(() => Date.now());
   const [selectedConversation, setSelectedConversation] = useState<Connection | null>(null);
-  const [messages, setMessages] = useState<Message[]>([]);
   const [newMessage, setNewMessage] = useState('');
   const [searchQuery, setSearchQuery] = useState('');
   const [activeTab, setActiveTab] = useState<'connections' | 'messages'>('connections');
   const [filterRelationship, setFilterRelationship] = useState<'all' | 'mutual' | 'following'>('all');
 
-  useEffect(() => {
-    // Load mock data
-    const mockConnections: Connection[] = [
+  const connections = useMemo<Connection[]>(() => [
       {
         address: 'SP1ABC...DEF',
         username: 'alice_dao',
@@ -80,15 +76,17 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
         sharedInterests: ['Treasury', 'Strategy'],
         collaborations: 0
       }
-    ];
+    ], []);
 
-    const mockMessages: Message[] = [
+  const [messages, setMessages] = useState<Message[]>(() => {
+    const baseTime = now;
+    return [
       {
         id: 1,
         from: 'SP1ABC...DEF',
         to: currentUser,
         content: 'Hey! Would love to collaborate on the DeFi proposal',
-        timestamp: Date.now() - 2 * 60 * 60 * 1000,
+        timestamp: baseTime - 2 * 60 * 60 * 1000,
         read: false
       },
       {
@@ -96,7 +94,7 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
         from: currentUser,
         to: 'SP1ABC...DEF',
         content: 'Absolutely! Let\'s discuss the details',
-        timestamp: Date.now() - 1 * 60 * 60 * 1000,
+        timestamp: baseTime - 1 * 60 * 60 * 1000,
         read: true
       },
       {
@@ -104,28 +102,24 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
         from: 'SP2XYZ...GHI',
         to: currentUser,
         content: 'Great work on your last proposal!',
-        timestamp: Date.now() - 12 * 60 * 60 * 1000,
+        timestamp: baseTime - 12 * 60 * 60 * 1000,
         read: false
       }
     ];
+  });
 
-    const mockConversations: Conversation[] = [
+  const conversations = useMemo<Conversation[]>(() => [
       {
-        user: mockConnections[0],
-        lastMessage: mockMessages[1],
+        user: connections[0],
+        lastMessage: messages[1],
         unreadCount: 1
       },
       {
-        user: mockConnections[1],
-        lastMessage: mockMessages[2],
+        user: connections[1],
+        lastMessage: messages[2],
         unreadCount: 1
       }
-    ];
-
-    setConnections(mockConnections);
-    setMessages(mockMessages);
-    setConversations(mockConversations);
-  }, [currentUser]);
+    ], [connections, messages]);
 
   const sendMessage = () => {
     if (!newMessage.trim() || !selectedConversation) return;
@@ -135,7 +129,7 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
       from: currentUser,
       to: selectedConversation.address,
       content: newMessage,
-      timestamp: Date.now(),
+      timestamp: now,
       read: false
     };
 
@@ -144,7 +138,7 @@ export default function UserNetwork({ currentUser }: UserNetworkProps) {
   };
 
   const formatTimeAgo = (timestamp: number) => {
-    const diff = Date.now() - timestamp;
+    const diff = now - timestamp;
     const hours = Math.floor(diff / (1000 * 60 * 60));
     const days = Math.floor(hours / 24);
     
diff --git a/frontend/components/dashboard/UserProfile.tsx b/frontend/components/dashboard/UserProfile.tsx
index 5c25da93..ab862c8d 100644
--- a/frontend/components/dashboard/UserProfile.tsx
+++ b/frontend/components/dashboard/UserProfile.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useMemo, useState } from 'react';
 import Image from 'next/image';
+import { useState } from 'react';
 
 interface UserProfileData {
   address: string;
@@ -30,44 +30,33 @@ interface UserProfileProps {
   isOwnProfile?: boolean;
 }
 
-export default function UserProfile({ userAddress, isOwnProfile = false }: UserProfileProps) {
-  const now = Date.parse(new Date().toISOString());
-  const [profile, setProfile] = useState<UserProfileData>(() => {
-    const base: UserProfileData = {
-      address: userAddress,
-      bio: '',
-      reputation: 0,
-      totalProposals: 0,
-      votesCast: 0,
-      successRate: 0,
-      memberSince: now,
-      socialLinks: {},
-      customization: {
-        theme: 'default',
-        accentColor: '#3B82F6'
-      }
-    };
+const buildInitialProfile = (userAddress: string): UserProfileData => {
+  const memberSince = 1700000000000;
+  const seed = userAddress.split('').reduce((sum, char) => sum + char.charCodeAt(0), 0);
+
+  return {
+    address: userAddress,
+    bio: '',
+    reputation: 200 + (seed % 1800),
+    totalProposals: seed % 25,
+    votesCast: 20 + (seed % 130),
+    successRate: 40 + (seed % 60),
+    memberSince,
+    socialLinks: {},
+    customization: {
+      theme: 'default',
+      accentColor: '#3B82F6'
+    }
+  };
+};
 
-    if (typeof window === 'undefined') return base;
-    const stored = localStorage.getItem(`user-profile-${userAddress}`);
-    if (stored) return JSON.parse(stored);
-    const seed = userAddress.slice(-6).split('').reduce((sum, ch) => sum + ch.charCodeAt(0), 0);
-    return {
-      ...base,
-      reputation: (seed * 17) % 2000,
-      totalProposals: (seed * 7) % 25,
-      votesCast: (seed * 11) % 150,
-      successRate: ((seed * 13) % 10000) / 100
-    };
-  });
+export default function UserProfile({ userAddress, isOwnProfile = false }: UserProfileProps) {
+  const [currentTime] = useState(() => Date.now());
+  const initialProfile = buildInitialProfile(userAddress);
+  const [profile, setProfile] = useState<UserProfileData>(initialProfile);
   
   const [isEditing, setIsEditing] = useState(false);
-  const [editForm, setEditForm] = useState<UserProfileData>(profile);
-  const profileData = isEditing ? editForm : profile;
-  const daysActive = useMemo(
-    () => Math.floor((now - profileData.memberSince) / (1000 * 60 * 60 * 24)),
-    [now, profileData.memberSince]
-  );
+  const [editForm, setEditForm] = useState(profile);
 
   const saveProfile = () => {
     localStorage.setItem(`user-profile-${userAddress}`, JSON.stringify(editForm));
@@ -89,27 +78,27 @@ export default function UserProfile({ userAddress, isOwnProfile = false }: UserP
     return { name: 'Bronze', color: '#CD7F32', icon: '🥉' };
   };
 
-  const tier = getReputationTier(profileData.reputation);
+  const tier = getReputationTier(profile.reputation);
 
   return (
     <div className="max-w-4xl mx-auto space-y-6">
       {/* Header Card */}
       <div
         className="rounded-lg p-8 text-white relative overflow-hidden"
-        style={{ background: `linear-gradient(135deg, ${profileData.customization.accentColor} 0%, ${profileData.customization.accentColor}99 100%)` }}
+        style={{ background: `linear-gradient(135deg, ${profile.customization.accentColor} 0%, ${profile.customization.accentColor}99 100%)` }}
       >
         <div className="relative z-10 flex items-start gap-6">
           {/* Avatar */}
           <div
             className="w-32 h-32 rounded-full flex items-center justify-center text-4xl font-bold border-4 border-white shadow-xl"
-            style={{ backgroundColor: generateAvatar(profileData.address) }}
+            style={{ backgroundColor: generateAvatar(profile.address) }}
           >
-            {profileData.avatar ? (
-              <Image src={profileData.avatar} alt="Avatar" width={128} height={128} className="w-full h-full rounded-full object-cover" />
-            ) : profileData.bnsName ? (
-              profileData.bnsName.slice(0, 2).toUpperCase()
+            {profile.avatar ? (
+              <Image src={profile.avatar} alt="Avatar" width={128} height={128} className="w-full h-full rounded-full object-cover" />
+            ) : profile.bnsName ? (
+              profile.bnsName.slice(0, 2).toUpperCase()
             ) : (
-              profileData.address.slice(0, 2).toUpperCase()
+              profile.address.slice(0, 2).toUpperCase()
             )}
           </div>
 
@@ -118,9 +107,9 @@ export default function UserProfile({ userAddress, isOwnProfile = false }: UserP
             <div className="flex items-start justify-between mb-2">
               <div>
                 <h1 className="text-3xl font-bold mb-1">
-                  {profileData.bnsName || `${profileData.address.slice(0, 8)}...${profileData.address.slice(-6)}`}
+                  {profile.bnsName || `${profile.address.slice(0, 8)}...${profile.address.slice(-6)}`}
                 </h1>
-                <p className="text-white/80 text-sm font-mono">{profileData.address}</p>
+                <p className="text-white/80 text-sm font-mono">{profile.address}</p>
               </div>
               {isOwnProfile && (
                 <button
@@ -152,7 +141,7 @@ export default function UserProfile({ userAddress, isOwnProfile = false }: UserP
               />
             ) : (
               <p className="text-white/90 mb-4">
-                {profileData.bio || 'No bio yet. Share something about yourself!'}
+                {profile.bio || 'No bio yet. Share something about yourself!'}
               </p>
             )}
 
@@ -184,23 +173,23 @@ export default function UserProfile({ userAddress, isOwnProfile = false }: UserP
                 </div>
               ) : (
                 <>
-                   {profileData.socialLinks.twitter && (
-                     <a href={`https://twitter.com/${profileData.socialLinks.twitter}`} target="_blank" rel="noopener noreferrer"
+                  {profile.socialLinks.twitter && (
+                    <a href={`https://twitter.com/${profile.socialLinks.twitter}`} target="_blank" rel="noopener noreferrer"
                        className="px-3 py-1 bg-white/20 hover:bg-white/30 rounded-lg backdrop-blur-sm transition text-sm">
                       🐦 Twitter
                     </a>
                   )}
-                   {profileData.socialLinks.github && (
-                     <a href={`https://github.com/${profileData.socialLinks.github}`} target="_blank" rel="noopener noreferrer"
+                  {profile.socialLinks.github && (
+                    <a href={`https://github.com/${profile.socialLinks.github}`} target="_blank" rel="noopener noreferrer"
                        className="px-3 py-1 bg-white/20 hover:bg-white/30 rounded-lg backdrop-blur-sm transition text-sm">
                       💻 GitHub
                     </a>
                   )}
-                   {profileData.socialLinks.discord && (
-                     <span className="px-3 py-1 bg-white/20 rounded-lg backdrop-blur-sm text-sm">
-                       💬 {profileData.socialLinks.discord}
-                     </span>
-                   )}
+                  {profile.socialLinks.discord && (
+                    <span className="px-3 py-1 bg-white/20 rounded-lg backdrop-blur-sm text-sm">
+                      💬 {profile.socialLinks.discord}
+                    </span>
+                  )}
                 </>
               )}
             </div>
@@ -221,28 +210,28 @@ export default function UserProfile({ userAddress, isOwnProfile = false }: UserP
       <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
         <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
           <div className="text-3xl font-bold text-blue-600 dark:text-blue-400 mb-1">
-            {profileData.totalProposals}
+            {profile.totalProposals}
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-400">Proposals Created</div>
         </div>
 
         <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
           <div className="text-3xl font-bold text-green-600 dark:text-green-400 mb-1">
-            {profileData.votesCast}
+            {profile.votesCast}
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-400">Votes Cast</div>
         </div>
 
         <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
           <div className="text-3xl font-bold text-purple-600 dark:text-purple-400 mb-1">
-            {profileData.successRate.toFixed(1)}%
+            {profile.successRate.toFixed(1)}%
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-400">Success Rate</div>
         </div>
 
         <div className="bg-white dark:bg-gray-800 rounded-lg p-6 border border-gray-200 dark:border-gray-700 text-center">
           <div className="text-3xl font-bold text-orange-600 dark:text-orange-400 mb-1">
-            {daysActive}
+            {Math.floor((currentTime - profile.memberSince) / (1000 * 60 * 60 * 24))}
           </div>
           <div className="text-sm text-gray-600 dark:text-gray-400">Days Active</div>
         </div>
diff --git a/frontend/src/app/analytics/page.tsx b/frontend/src/app/analytics/page.tsx
index 4de7e42f..4e9af595 100644
--- a/frontend/src/app/analytics/page.tsx
+++ b/frontend/src/app/analytics/page.tsx
@@ -19,9 +19,6 @@ import {
 } from 'lucide-react';
 import { motion, AnimatePresence } from 'framer-motion';
 import GovernanceAnalyticsDashboard from '@/components/GovernanceAnalyticsDashboard';
-import { AnalyticsKPIPanel } from '@/components/dashboard/AnalyticsKPIPanel';
-import { AnalyticsExportPanel } from '@/components/AnalyticsExportPanel';
-import FundingMetricsChart from '@/components/FundingMetricsChart';
 
 const AnalyticsTabLoading = () => (
     <div className="p-8">
diff --git a/frontend/src/app/api-docs/page.tsx b/frontend/src/app/api-docs/page.tsx
index ca09e290..bb4e910a 100644
--- a/frontend/src/app/api-docs/page.tsx
+++ b/frontend/src/app/api-docs/page.tsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import { motion } from 'framer-motion';
 import { Terminal, Zap, Copy } from 'lucide-react';
+const EXAMPLE_TIMESTAMP = 1700000000000;
 
 const endpoints = [
     { method: 'GET', path: '/api/v1/proposals', desc: 'List all active micro-grants' },
@@ -10,7 +11,6 @@ const endpoints = [
     { method: 'GET', path: '/api/v1/users/:address', desc: 'Full reputation and history for a given wallet' },
     { method: 'POST', path: '/api/v1/simulate', desc: 'Dry-run a quadratic voting interaction' },
 ];
-const MOCK_TIMESTAMP = 1700000000000;
 
 export default function ApiDocs() {
     return (
@@ -68,7 +68,7 @@ export default function ApiDocs() {
                                 {`{
   "status": "success",
   "data": [...],
-  "timestamp": ${MOCK_TIMESTAMP}
+  "timestamp": ${EXAMPLE_TIMESTAMP}
 }`}
                             </pre>
                         </div>
diff --git a/frontend/src/app/error.tsx b/frontend/src/app/error.tsx
index 98e55074..590d8a60 100644
--- a/frontend/src/app/error.tsx
+++ b/frontend/src/app/error.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Link from "next/link";
 import { useEffect } from "react";
 import Link from "next/link";
 
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 2c14d0b7..d66f4186 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
-import type { UserSession, UserData } from '@stacks/connect';
+import { useState, useEffect } from 'react';
+import type { UserData } from '@stacks/connect';
 import { CONTRACT_PRINCIPAL } from '@/config';
 import SprintFundHero from '@/components/ui/SprintFundHero';
 import CreateProposalForm from '@/components/CreateProposalForm';
@@ -11,7 +11,7 @@ import Stats from '@/components/Stats';
 import Header from '@/components/Header';
 import Link from 'next/link';
 import ErrorBoundary from '@/components/ErrorBoundary';
-import { LoadingSpinner, LoadingOverlay } from '@/components/LoadingIndicators';
+import { LoadingSpinner } from '@/components/LoadingIndicators';
 import { createLoadingState, updateLoadingState } from '@/lib/loading-state';
 import type { LoadingState } from '@/lib/loading-state';
 
@@ -21,8 +21,6 @@ export default function Home() {
   const [userData, setUserData] = useState<StacksUserData | null>(null);
   const [copied, setCopied] = useState(false);
   const [walletLoading, setWalletLoading] = useState<LoadingState>(createLoadingState('loading'));
-  const [connectLoading, setConnectLoading] = useState<LoadingState>(createLoadingState('idle'));
-  const userSessionRef = useRef<UserSession | null>(null);
 
   useEffect(() => {
     let timeout: number | undefined;
@@ -31,26 +29,25 @@ export default function Home() {
         const { AppConfig, UserSession } = await import('@stacks/connect');
         const appConfig = new AppConfig(['store_write', 'publish_data']);
         const userSession = new UserSession({ appConfig });
-        userSessionRef.current = userSession;
 
         if (userSession.isSignInPending()) {
           userSession.handlePendingSignIn().then((data) => {
             timeout = window.setTimeout(() => {
               setUserData(data);
-              setWalletLoading(updateLoadingState(walletLoading, 'success'));
+              setWalletLoading((current) => updateLoadingState(current, 'success'));
             }, 0);
           });
         } else if (userSession.isUserSignedIn()) {
           timeout = window.setTimeout(() => {
             setUserData(userSession.loadUserData());
-            setWalletLoading(updateLoadingState(walletLoading, 'success'));
+            setWalletLoading((current) => updateLoadingState(current, 'success'));
           }, 0);
         } else {
-          setWalletLoading(updateLoadingState(walletLoading, 'success'));
+          setWalletLoading((current) => updateLoadingState(current, 'success'));
         }
       } catch (error) {
         console.error('Failed to initialize wallet:', error);
-        setWalletLoading(updateLoadingState(walletLoading, 'error'));
+        setWalletLoading((current) => updateLoadingState(current, 'error'));
       }
     })();
     return () => {
@@ -58,43 +55,6 @@ export default function Home() {
     };
   }, []);
 
-  const connectWallet = () => {
-    setConnectLoading(updateLoadingState(connectLoading, 'loading'));
-    (async () => {
-      try {
-        const userSession = userSessionRef.current;
-        if (!userSession) {
-          setConnectLoading(updateLoadingState(connectLoading, 'error'));
-          return;
-        }
-
-        const { showConnect } = await import('@stacks/connect');
-        showConnect({
-          appDetails: {
-            name: 'SprintFund',
-            icon: '/icon.png',
-          },
-          redirectTo: '/',
-          onFinish: () => {
-            const data = userSession.loadUserData();
-            setUserData(data);
-            setConnectLoading(updateLoadingState(connectLoading, 'success'));
-          },
-          userSession,
-        });
-      } catch (error) {
-        console.error('Failed to connect wallet:', error);
-        setConnectLoading(updateLoadingState(connectLoading, 'error'));
-      }
-    })();
-  };
-
-  const disconnectWallet = () => {
-    userSessionRef.current?.signUserOut();
-    setUserData(null);
-    setConnectLoading(updateLoadingState(connectLoading, 'idle'));
-  };
-
   const copyContractAddress = async () => {
     try {
       await navigator.clipboard.writeText(CONTRACT_PRINCIPAL);
@@ -120,7 +80,6 @@ export default function Home() {
     <ErrorBoundary>
       <div className="min-h-screen bg-transparent">
         <Header />
-        <LoadingOverlay isVisible={connectLoading.isLoading} message="Connecting wallet..." />
 
         <SprintFundHero />
 
diff --git a/frontend/src/app/profile/page.tsx b/frontend/src/app/profile/page.tsx
index 4f993311..1f6c3e19 100644
--- a/frontend/src/app/profile/page.tsx
+++ b/frontend/src/app/profile/page.tsx
@@ -6,7 +6,6 @@ import BadgeGallery from '@/components/common/BadgeGallery';
 import InterestProfiler from '@/components/InterestProfiler';
 import DelegationStats from '@/components/DelegationStats';
 import UserDashboard from '@/components/dashboard/UserDashboard';
-import { motion } from 'framer-motion';
 import { Settings, LogOut, Wallet } from 'lucide-react';
 
 export default function ProfilePage() {
diff --git a/frontend/src/components/CommandPalette.tsx b/frontend/src/components/CommandPalette.tsx
index 77f2dc9a..448e6019 100644
--- a/frontend/src/components/CommandPalette.tsx
+++ b/frontend/src/components/CommandPalette.tsx
@@ -15,14 +15,6 @@ export function CommandPalette({ isOpen, onClose, commands }: CommandPaletteProp
 
   const filtered = useMemo(() => filterCommands(commands, query), [commands, query]);
 
-  useEffect(() => {
-    if (isOpen) {
-      setQuery('');
-      setSelectedIndex(0);
-      setTimeout(() => inputRef.current?.focus(), 0);
-    }
-  }, [isOpen]);
-
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       if (!isOpen) return;
@@ -82,6 +74,7 @@ export function CommandPalette({ isOpen, onClose, commands }: CommandPaletteProp
           <div className="p-3 border-b border-border">
             <input
               ref={inputRef}
+              autoFocus
               type="text"
               placeholder="Search commands..."
               value={query}
diff --git a/frontend/src/components/ConfirmDialog.tsx b/frontend/src/components/ConfirmDialog.tsx
index 55e4f214..31f80218 100644
--- a/frontend/src/components/ConfirmDialog.tsx
+++ b/frontend/src/components/ConfirmDialog.tsx
@@ -1,5 +1,5 @@
 import { createPortal } from 'react-dom';
-import { memo, useEffect, useState } from 'react';
+import { memo } from 'react';
 import type { ConfirmDialogProps } from '../types/confirm-dialog';
 import { VARIANT_CONFIG } from '../lib/dialog-variants';
 import { DialogIcon } from './DialogIcon';
@@ -24,24 +24,7 @@ export const ConfirmDialog = memo(function ConfirmDialog({ open, action, onClose
   useScrollLock(open);
   useEscapeKey(open, onClose);
 
-  /** Drive enter animation: set visible to true on next frame after mount */
-  const [visible, setVisible] = useState(false);
-  const prefersReducedMotion =
-    typeof window !== 'undefined' &&
-    window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
-  useEffect(() => {
-    if (open) {
-      if (prefersReducedMotion) {
-        setVisible(true);
-        return;
-      }
-      // Delay by one frame so the initial opacity-0/scale-95 is painted first
-      const id = requestAnimationFrame(() => setVisible(true));
-      return () => cancelAnimationFrame(id);
-    }
-    setVisible(false);
-  }, [open, prefersReducedMotion]);
+  const visible = open;
 
   if (!open || !action) return null;
 
diff --git a/frontend/src/components/OnboardingFAQ.tsx b/frontend/src/components/OnboardingFAQ.tsx
index 35affcf6..b20ed046 100644
--- a/frontend/src/components/OnboardingFAQ.tsx
+++ b/frontend/src/components/OnboardingFAQ.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import Link from 'next/link';
 import { ChevronDown } from 'lucide-react';
 import Link from 'next/link';
 
diff --git a/frontend/src/hooks/useCacheMetrics.ts b/frontend/src/hooks/useCacheMetrics.ts
index a551ff6b..910d6403 100644
--- a/frontend/src/hooks/useCacheMetrics.ts
+++ b/frontend/src/hooks/useCacheMetrics.ts
@@ -44,12 +44,16 @@ export function useCacheMetrics() {
 
   useEffect(() => {
     let cleanup: (() => void) | undefined;
+    let timeout: number | undefined;
 
     if (cacheConfigManager.metricsEnabled()) {
-      cleanup = startMonitoring();
+      timeout = window.setTimeout(() => {
+        cleanup = startMonitoring();
+      }, 0);
     }
 
     return () => {
+      if (timeout) window.clearTimeout(timeout);
       cleanup?.();
     };
   }, [startMonitoring]);
diff --git a/frontend/src/hooks/useMediaQuery.ts b/frontend/src/hooks/useMediaQuery.ts
index be48ed75..1899ae75 100644
--- a/frontend/src/hooks/useMediaQuery.ts
+++ b/frontend/src/hooks/useMediaQuery.ts
@@ -17,7 +17,6 @@ export function useMediaQuery(query: string): boolean {
 
   useEffect(() => {
     const mql = window.matchMedia(query);
-    setMatches(mql.matches);
 
     const handleChange = (e: MediaQueryListEvent) => {
       setMatches(e.matches);
diff --git a/frontend/src/hooks/useMobileMenu.ts b/frontend/src/hooks/useMobileMenu.ts
index 425fda21..9b0b2db4 100644
--- a/frontend/src/hooks/useMobileMenu.ts
+++ b/frontend/src/hooks/useMobileMenu.ts
@@ -19,7 +19,11 @@ export function useMobileMenu() {
 
   /* Close on route change */
   useEffect(() => {
-    setIsOpen(false);
+    const timeout = window.setTimeout(() => {
+      setIsOpen(false);
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
   }, [pathname]);
 
   /* Close when viewport passes mobile breakpoint */
diff --git a/frontend/src/hooks/useProposalDiscussion.ts b/frontend/src/hooks/useProposalDiscussion.ts
index 0937874e..bd61d2ad 100644
--- a/frontend/src/hooks/useProposalDiscussion.ts
+++ b/frontend/src/hooks/useProposalDiscussion.ts
@@ -1,4 +1,4 @@
-import { useCallback, useReducer } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useConnect, UserSession } from '@stacks/connect-react';
 import { proposalDiscussionService } from '@/services/proposal-discussion';
 import { ProposalDiscussionThread } from '@/types/proposal-detail';
@@ -27,12 +27,20 @@ function getUserName(userSession: UserSession | null): string | undefined {
 
 export function useProposalDiscussion(proposalId: string) {
   const { userSession } = useConnect();
-  const [refreshKey, triggerRefresh] = useReducer((value: number) => value + 1, 0);
-  void refreshKey;
-  const thread: ProposalDiscussionThread | null = (() => {
-    if (!proposalId) return null;
-    return proposalDiscussionService.getDiscussionThread(proposalId);
-  })();
+  const [thread, setThread] = useState<ProposalDiscussionThread | null>(() =>
+    proposalId ? proposalDiscussionService.getDiscussionThread(proposalId) : null
+  );
+  const [loading] = useState(false);
+
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      if (proposalId) {
+        setThread(proposalDiscussionService.getDiscussionThread(proposalId));
+      }
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
+  }, [proposalId]);
 
   const addComment = useCallback(
     (content: string) => {
@@ -46,7 +54,8 @@ export function useProposalDiscussion(proposalId: string) {
         getUserName(userSession)
       );
 
-      triggerRefresh();
+      const updated = proposalDiscussionService.getDiscussionThread(proposalId);
+      setThread(updated);
 
       return comment;
     },
@@ -66,7 +75,8 @@ export function useProposalDiscussion(proposalId: string) {
         getUserName(userSession)
       );
 
-      triggerRefresh();
+      const updated = proposalDiscussionService.getDiscussionThread(proposalId);
+      setThread(updated);
 
       return reply;
     },
@@ -78,7 +88,8 @@ export function useProposalDiscussion(proposalId: string) {
       const success = proposalDiscussionService.editComment(proposalId, commentId, newContent);
 
       if (success) {
-        triggerRefresh();
+        const updated = proposalDiscussionService.getDiscussionThread(proposalId);
+        setThread(updated);
       }
 
       return success;
@@ -91,7 +102,8 @@ export function useProposalDiscussion(proposalId: string) {
       const success = proposalDiscussionService.deleteComment(proposalId, commentId);
 
       if (success) {
-        triggerRefresh();
+        const updated = proposalDiscussionService.getDiscussionThread(proposalId);
+        setThread(updated);
       }
 
       return success;
@@ -104,7 +116,8 @@ export function useProposalDiscussion(proposalId: string) {
       const success = proposalDiscussionService.likeComment(proposalId, commentId);
 
       if (success) {
-        triggerRefresh();
+        const updated = proposalDiscussionService.getDiscussionThread(proposalId);
+        setThread(updated);
       }
 
       return success;
@@ -114,6 +127,7 @@ export function useProposalDiscussion(proposalId: string) {
 
   return {
     thread,
+    loading,
     addComment,
     addReply,
     editComment,
diff --git a/frontend/src/spa-pages/ProposalDetail.tsx b/frontend/src/spa-pages/ProposalDetail.tsx
index fe360a5d..93ecd9b4 100644
--- a/frontend/src/spa-pages/ProposalDetail.tsx
+++ b/frontend/src/spa-pages/ProposalDetail.tsx
@@ -69,7 +69,10 @@ export function ProposalDetailPage(): React.JSX.Element {
   }, [proposalId]);
 
   useEffect(() => {
-    const timeout = window.setTimeout(fetchProposal, 0);
+    const timeout = window.setTimeout(() => {
+      fetchProposal();
+    }, 0);
+
     return () => window.clearTimeout(timeout);
   }, [fetchProposal]);
 
diff --git a/frontend/src/spa-pages/Proposals.tsx b/frontend/src/spa-pages/Proposals.tsx
index 14a21324..7c158a38 100644
--- a/frontend/src/spa-pages/Proposals.tsx
+++ b/frontend/src/spa-pages/Proposals.tsx
@@ -29,10 +29,7 @@ export function ProposalsPage(): React.JSX.Element {
   const [retryCount, setRetryCount] = useState<number>(0);
   const [totalPages, setTotalPages] = useState<number>(1);
   const [totalCount, setTotalCount] = useState<number>(0);
-  const [selectionState, setSelectionState] = useState<{ key: string; index: number | null }>({
-    key: 'all:1',
-    index: null,
-  });
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const toast = useToast();
   const online = useNetworkStatus();
   const headingRef = useFocusOnMount<HTMLHeadingElement>();
@@ -52,8 +49,6 @@ export function ProposalsPage(): React.JSX.Element {
     hasActiveFilters,
     activeFilterCount,
   } = useProposalUrlFilters();
-  const currentSelectionKey = useMemo(() => `${params.status}:${params.page}`, [params.status, params.page]);
-  const selectedIndex = selectionState.key === currentSelectionKey ? selectionState.index : null;
 
   const filtered: Proposal[] = useMemo(() => proposals.filter((p) => {
     if (params.status === 'active') return !p.executed;
@@ -62,24 +57,16 @@ export function ProposalsPage(): React.JSX.Element {
   }), [proposals, params.status]);
 
   const handleSelectUp = useCallback(() => {
-    setSelectionState((prev) => {
-      const activeIndex = prev.key === currentSelectionKey ? prev.index : null;
-      return {
-        key: currentSelectionKey,
-        index: activeIndex === null || activeIndex === 0 ? filtered.length - 1 : activeIndex - 1,
-      };
-    });
-  }, [filtered.length, currentSelectionKey]);
+    setSelectedIndex((prev) =>
+      prev === null || prev === 0 ? filtered.length - 1 : prev - 1,
+    );
+  }, [filtered.length]);
 
   const handleSelectDown = useCallback(() => {
-    setSelectionState((prev) => {
-      const activeIndex = prev.key === currentSelectionKey ? prev.index : null;
-      return {
-        key: currentSelectionKey,
-        index: activeIndex === null || activeIndex === filtered.length - 1 ? 0 : activeIndex + 1,
-      };
-    });
-  }, [filtered.length, currentSelectionKey]);
+    setSelectedIndex((prev) =>
+      prev === null || prev === filtered.length - 1 ? 0 : prev + 1,
+    );
+  }, [filtered.length]);
 
   const handleOpenSelected = useCallback(() => {
     if (selectedIndex !== null && filtered[selectedIndex]) {
@@ -132,6 +119,14 @@ export function ProposalsPage(): React.JSX.Element {
     return undefined;
   }, [online]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  useEffect(() => {
+    const timeout = window.setTimeout(() => {
+      setSelectedIndex(null);
+    }, 0);
+
+    return () => window.clearTimeout(timeout);
+  }, [params.status, params.page]);
+
   return (
     <div className="mx-auto max-w-5xl px-4 sm:px-6 py-8">
       {/* Header */}
diff --git a/frontend/store/analyticsStore.ts b/frontend/store/analyticsStore.ts
index 0441f618..8703feb9 100644
--- a/frontend/store/analyticsStore.ts
+++ b/frontend/store/analyticsStore.ts
@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import { ProposalMetrics, VoterMetrics, fetchAllProposals, fetchVoterMetrics, clearAnalyticsCache } from '../utils/analytics/dataCollector';
 
 export interface AnalyticsFilters {
@@ -114,7 +114,7 @@ const useAnalyticsStore = create<AnalyticsState>((set, get) => ({
 export const useFilteredProposals = (): ProposalMetrics[] => {
   const proposals = useAnalyticsStore(state => state.proposals);
   const filters = useAnalyticsStore(state => state.filters);
-  const currentTimestamp = Date.parse(new Date().toISOString());
+  const [now] = useState(() => Date.now());
   
   return useMemo(() => {
     return proposals.filter(proposal => {
@@ -134,7 +134,7 @@ export const useFilteredProposals = (): ProposalMetrics[] => {
         }
         if (filters.statusFilter === 'failed') {
           const deadline = proposal.deadline * 10 * 60 * 1000;
-          if (proposal.executed || deadline > currentTimestamp) {
+          if (proposal.executed || deadline > now) {
             return false;
           }
           if (proposal.votesFor <= proposal.votesAgainst) {
@@ -144,7 +144,7 @@ export const useFilteredProposals = (): ProposalMetrics[] => {
         }
         if (filters.statusFilter === 'active') {
           const deadline = proposal.deadline * 10 * 60 * 1000;
-          if (proposal.executed || deadline < currentTimestamp) {
+          if (proposal.executed || deadline < now) {
             return false;
           }
         }
@@ -156,12 +156,12 @@ export const useFilteredProposals = (): ProposalMetrics[] => {
 
       return true;
     });
-  }, [proposals, filters, currentTimestamp]);
+  }, [proposals, filters, now]);
 };
 
 export const useAggregateStats = (): AggregateStats => {
   const filteredProposals = useFilteredProposals();
-  const currentTimestamp = Date.parse(new Date().toISOString());
+  const [now] = useState(() => Date.now());
   
   return useMemo(() => {
     const totalFunded = filteredProposals
@@ -181,7 +181,7 @@ export const useAggregateStats = (): AggregateStats => {
     const activeProposals = filteredProposals.filter(p => {
       if (p.executed) return false;
       const deadline = p.deadline * 10 * 60 * 1000;
-      return deadline > currentTimestamp;
+      return deadline > now;
     }).length;
 
     return {
@@ -191,7 +191,7 @@ export const useAggregateStats = (): AggregateStats => {
       totalProposals: filteredProposals.length,
       activeProposals
     };
-  }, [filteredProposals, currentTimestamp]);
+  }, [filteredProposals, now]);
 };
 
 let refreshInterval: NodeJS.Timeout | null = null;