diff --git a/pr_body.md b/pr_body.md
index 3f1cc4b..a763940 100644
--- a/pr_body.md
+++ b/pr_body.md
@@ -1,7 +1,9 @@
 ## 🚀 Overview
+
 This Pull Request implements the high-fidelity User Dashboard screen for the Kolo MVP exactly as defined in the Figma design system. It establishes the foundational layout and introduces reusable, responsive widgets that form the core of the dashboard experience.
 
 ## ✨ Key Features & Deliverables
+
 - **Dashboard Layout**: Implemented a responsive dashboard structure in `src/app/(dashboard)/dashboard/page.tsx` utilizing CSS Grid. The layout gracefully collapses from a multi-column desktop view into a single-column scrollable mobile view.
 - **Reusable Widgets**:
   - `BalanceCard`: Displays total wallet balance, trend percentage, and actionable Send/Deposit buttons with Lucide icons.
@@ -11,6 +13,7 @@ This Pull Request implements the high-fidelity User Dashboard screen for the Kol
 - **Component Testing**: Added comprehensive unit tests for each dashboard widget and the main dashboard page using Vitest and React Testing Library (with mocked API data) to verify rendering across different states.
 
 ## 🛠 Relevant Files Modified
+
 - `src/app/(dashboard)/dashboard/page.tsx`
 - `src/components/dashboard/BalanceCard/BalanceCard.tsx`
 - `src/components/dashboard/SavingsCircles/SavingsCircles.tsx`
@@ -19,6 +22,7 @@ This Pull Request implements the high-fidelity User Dashboard screen for the Kol
 - `src/__tests__/dashboard/*.test.tsx`
 
 ## ✅ Acceptance Criteria Met
+
 - [x] Dashboard Layout matches Figma design exactly.
 - [x] Reusable widgets built.
 - [x] Wired to hooks for data integration.
diff --git a/src/__tests__/dashboard/BalanceCard.test.tsx b/src/__tests__/dashboard/BalanceCard.test.tsx
index 87f687f..db5614b 100644
--- a/src/__tests__/dashboard/BalanceCard.test.tsx
+++ b/src/__tests__/dashboard/BalanceCard.test.tsx
@@ -1,28 +1,44 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { BalanceCard } from '@/components/dashboard/BalanceCard';
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { BalanceCard } from "@/components/dashboard/BalanceCard";
 
-describe('BalanceCard', () => {
-  it('renders loading state correctly', () => {
+describe("BalanceCard", () => {
+  it("renders loading state correctly", () => {
     const { container } = render(<BalanceCard isLoading={true} />);
-    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
+    expect(container.querySelector(".animate-pulse")).toBeInTheDocument();
   });
 
-  it('renders balance and trend data correctly', () => {
-    render(<BalanceCard balance={12450} currency="USDC" trendPercentage={2.4} isLoading={false} />);
-    
-    expect(screen.getByText('Total Balance')).toBeInTheDocument();
-    expect(screen.getByText('12,450.00')).toBeInTheDocument();
-    expect(screen.getByText('USDC')).toBeInTheDocument();
-    expect(screen.getByText('+2.4%')).toBeInTheDocument();
-    
+  it("renders balance and trend data correctly", () => {
+    render(
+      <BalanceCard
+        balance={12450}
+        currency="USDC"
+        trendPercentage={2.4}
+        isLoading={false}
+      />,
+    );
+
+    expect(screen.getByText("Total Balance")).toBeInTheDocument();
+    expect(screen.getByText("12,450.00")).toBeInTheDocument();
+    expect(screen.getByText("USDC")).toBeInTheDocument();
+    expect(screen.getByText("+2.4%")).toBeInTheDocument();
+
     // Check for action buttons
-    expect(screen.getByRole('button', { name: /send/i })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: /deposit/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /send/i })).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /deposit/i }),
+    ).toBeInTheDocument();
   });
 
-  it('handles negative trends correctly', () => {
-    render(<BalanceCard balance={100} currency="USDC" trendPercentage={-1.5} isLoading={false} />);
-    expect(screen.getByText('-1.5%')).toBeInTheDocument();
+  it("handles negative trends correctly", () => {
+    render(
+      <BalanceCard
+        balance={100}
+        currency="USDC"
+        trendPercentage={-1.5}
+        isLoading={false}
+      />,
+    );
+    expect(screen.getByText("-1.5%")).toBeInTheDocument();
   });
 });
diff --git a/src/__tests__/dashboard/DashboardPage.test.tsx b/src/__tests__/dashboard/DashboardPage.test.tsx
index 5780b1a..2d3dddb 100644
--- a/src/__tests__/dashboard/DashboardPage.test.tsx
+++ b/src/__tests__/dashboard/DashboardPage.test.tsx
@@ -1,71 +1,118 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import Dashboard from '@/app/(dashboard)/dashboard/page';
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import Dashboard from "@/app/(dashboard)/dashboard/page";
 
 // Mock the hooks
-vi.mock('@/hooks/useWallet', () => ({
-  useWallet: vi.fn()
+vi.mock("@/hooks/useWallet", () => ({
+  useWallet: vi.fn(),
 }));
-vi.mock('@/hooks/useGroups', () => ({
-  useGroups: vi.fn()
+vi.mock("@/hooks/useGroups", () => ({
+  useGroups: vi.fn(),
 }));
-vi.mock('@/hooks/usePayments', () => ({
-  usePayments: vi.fn()
+vi.mock("@/hooks/usePayments", () => ({
+  usePayments: vi.fn(),
 }));
 
-import { useWallet } from '@/hooks/useWallet';
-import { useGroups } from '@/hooks/useGroups';
-import { usePayments } from '@/hooks/usePayments';
+import { useWallet } from "@/hooks/useWallet";
+import { useGroups } from "@/hooks/useGroups";
+import { usePayments } from "@/hooks/usePayments";
 
-describe('Dashboard Page', () => {
+describe("Dashboard Page", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it('renders loading states for all widgets', () => {
-    vi.mocked(useWallet).mockReturnValue({ isLoading: true, data: null, error: null });
-    vi.mocked(useGroups).mockReturnValue({ isLoading: true, data: null, error: null });
-    vi.mocked(usePayments).mockReturnValue({ isLoading: true, data: null, error: null });
+  it("renders loading states for all widgets", () => {
+    vi.mocked(useWallet).mockReturnValue({
+      isLoading: true,
+      data: null,
+      error: null,
+    });
+    vi.mocked(useGroups).mockReturnValue({
+      isLoading: true,
+      data: null,
+      error: null,
+    });
+    vi.mocked(usePayments).mockReturnValue({
+      isLoading: true,
+      data: null,
+      error: null,
+    });
 
     const { container } = render(<Dashboard />);
     // Since each widget uses animate-pulse when loading
-    const pulses = container.querySelectorAll('.animate-pulse');
+    const pulses = container.querySelectorAll(".animate-pulse");
     expect(pulses.length).toBeGreaterThan(0);
   });
 
-  it('renders widgets with data correctly', () => {
+  it("renders widgets with data correctly", () => {
     vi.mocked(useWallet).mockReturnValue({
-      data: { balance: 1000, currency: 'USDC', trendPercentage: 1 },
+      data: { balance: 1000, currency: "USDC", trendPercentage: 1 },
       isLoading: false,
-      error: null
+      error: null,
     });
     vi.mocked(useGroups).mockReturnValue({
-      data: [{ id: '1', name: 'Mock Group', tag: 'TAG', saved: 10, target: 100, nextDate: 'Date', avatars: [] }],
+      data: [
+        {
+          id: "1",
+          name: "Mock Group",
+          tag: "TAG",
+          saved: 10,
+          target: 100,
+          nextDate: "Date",
+          avatars: [],
+        },
+      ],
       isLoading: false,
-      error: null
+      error: null,
     });
     vi.mocked(usePayments).mockReturnValue({
-      data: [{ id: '1', type: 'deposit', title: 'Mock Tx', date: 'Date', time: 'Time', amount: 50, currency: 'USDC', status: 'OK' }],
+      data: [
+        {
+          id: "1",
+          type: "deposit",
+          title: "Mock Tx",
+          date: "Date",
+          time: "Time",
+          amount: 50,
+          currency: "USDC",
+          status: "OK",
+        },
+      ],
       isLoading: false,
-      error: null
+      error: null,
     });
 
     render(<Dashboard />);
-    
-    expect(screen.getByText('1,000.00')).toBeInTheDocument();
-    expect(screen.getByText('Mock Group')).toBeInTheDocument();
-    expect(screen.getByText('Mock Tx')).toBeInTheDocument();
+
+    expect(screen.getByText("1,000.00")).toBeInTheDocument();
+    expect(screen.getByText("Mock Group")).toBeInTheDocument();
+    expect(screen.getByText("Mock Tx")).toBeInTheDocument();
   });
 
-  it('renders error boundaries', () => {
-    vi.mocked(useWallet).mockReturnValue({ error: new Error('Error'), isLoading: false, data: null });
-    vi.mocked(useGroups).mockReturnValue({ error: new Error('Error'), isLoading: false, data: null });
-    vi.mocked(usePayments).mockReturnValue({ error: new Error('Error'), isLoading: false, data: null });
+  it("renders error boundaries", () => {
+    vi.mocked(useWallet).mockReturnValue({
+      error: new Error("Error"),
+      isLoading: false,
+      data: null,
+    });
+    vi.mocked(useGroups).mockReturnValue({
+      error: new Error("Error"),
+      isLoading: false,
+      data: null,
+    });
+    vi.mocked(usePayments).mockReturnValue({
+      error: new Error("Error"),
+      isLoading: false,
+      data: null,
+    });
 
     render(<Dashboard />);
-    
-    expect(screen.getByText('Error loading wallet data')).toBeInTheDocument();
-    expect(screen.getByText('Error loading savings groups')).toBeInTheDocument();
-    expect(screen.getByText('Error loading transactions')).toBeInTheDocument();
+
+    expect(screen.getByText("Error loading wallet data")).toBeInTheDocument();
+    expect(
+      screen.getByText("Error loading savings groups"),
+    ).toBeInTheDocument();
+    expect(screen.getByText("Error loading transactions")).toBeInTheDocument();
   });
 });
diff --git a/src/__tests__/dashboard/ProgressRing.test.tsx b/src/__tests__/dashboard/ProgressRing.test.tsx
new file mode 100644
index 0000000..7b9cf7a
--- /dev/null
+++ b/src/__tests__/dashboard/ProgressRing.test.tsx
@@ -0,0 +1,84 @@
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { ProgressRing } from "@/components/dashboard/ProgressRing";
+
+describe("ProgressRing", () => {
+  it("renders an SVG with two circles (track + progress)", () => {
+    const { container } = render(<ProgressRing progress={75} />);
+    const circles = container.querySelectorAll("circle");
+    expect(circles).toHaveLength(2);
+  });
+
+  it("has correct aria-label reflecting the progress value", () => {
+    render(<ProgressRing progress={82} />);
+    expect(
+      screen.getByRole("img", { name: "Savings progress: 82%" }),
+    ).toBeInTheDocument();
+  });
+
+  it("clamps progress above 100 to 100%", () => {
+    render(<ProgressRing progress={150} />);
+    expect(
+      screen.getByRole("img", { name: "Savings progress: 100%" }),
+    ).toBeInTheDocument();
+  });
+
+  it("clamps progress below 0 to 0%", () => {
+    render(<ProgressRing progress={-20} />);
+    expect(
+      screen.getByRole("img", { name: "Savings progress: 0%" }),
+    ).toBeInTheDocument();
+  });
+
+  it("renders children inside the ring", () => {
+    render(
+      <ProgressRing progress={50}>
+        <span>50%</span>
+      </ProgressRing>,
+    );
+    expect(screen.getByText("50%")).toBeInTheDocument();
+  });
+
+  it("uses emerald green (#10B981) for the progress arc", () => {
+    const { container } = render(<ProgressRing progress={60} />);
+    const circles = container.querySelectorAll("circle");
+    // Second circle is the progress arc
+    expect(circles[1].getAttribute("stroke")).toBe("#10B981");
+  });
+
+  it("uses a muted gray (#E5E7EB) for the track", () => {
+    const { container } = render(<ProgressRing progress={60} />);
+    const circles = container.querySelectorAll("circle");
+    // First circle is the track
+    expect(circles[0].getAttribute("stroke")).toBe("#E5E7EB");
+  });
+
+  it("sets stroke-dasharray on the progress arc", () => {
+    const { container } = render(<ProgressRing progress={40} />);
+    const progressCircle = container.querySelectorAll("circle")[1];
+    expect(progressCircle.getAttribute("stroke-dasharray")).toBeTruthy();
+  });
+
+  it("uses non-scaling-stroke vector-effect for responsive scaling", () => {
+    const { container } = render(<ProgressRing progress={50} />);
+    const circles = container.querySelectorAll("circle");
+    circles.forEach((circle) => {
+      expect(circle.getAttribute("vector-effect")).toBe("non-scaling-stroke");
+    });
+  });
+
+  it("applies a custom className to the wrapper", () => {
+    const { container } = render(
+      <ProgressRing progress={50} className="w-32 h-32" />,
+    );
+    expect(container.firstChild).toHaveClass("w-32", "h-32");
+  });
+
+  it("renders loading skeleton with animate-pulse when isLoading", () => {
+    // ProgressRing itself has no loading state — verify SavingsCircles skeleton
+    // still uses animate-pulse (tested in SavingsCircles.test.tsx).
+    // This test is a placeholder confirming ProgressRing renders without error at 0%.
+    const { container } = render(<ProgressRing progress={0} />);
+    expect(container.querySelector("svg")).toBeInTheDocument();
+  });
+});
diff --git a/src/__tests__/dashboard/SavingsCircles.test.tsx b/src/__tests__/dashboard/SavingsCircles.test.tsx
index 0aa45ad..e2d49b6 100644
--- a/src/__tests__/dashboard/SavingsCircles.test.tsx
+++ b/src/__tests__/dashboard/SavingsCircles.test.tsx
@@ -1,36 +1,38 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { SavingsCircles } from '@/components/dashboard/SavingsCircles';
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { SavingsCircles } from "@/components/dashboard/SavingsCircles";
 
-describe('SavingsCircles', () => {
-  it('renders loading state correctly', () => {
-    const { container } = render(<SavingsCircles groups={[]} isLoading={true} />);
-    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
+describe("SavingsCircles", () => {
+  it("renders loading state correctly", () => {
+    const { container } = render(
+      <SavingsCircles groups={[]} isLoading={true} />,
+    );
+    expect(container.querySelector(".animate-pulse")).toBeInTheDocument();
   });
 
-  it('renders groups correctly', () => {
+  it("renders groups correctly", () => {
     const mockGroups = [
       {
-        id: '1',
-        name: 'Home Fund',
-        tag: 'FAMILY HOME',
+        id: "1",
+        name: "Home Fund",
+        tag: "FAMILY HOME",
         saved: 8200,
         target: 10000,
-        nextDate: 'Oct 24',
-        avatars: ['https://example.com/av1.jpg', '+3']
-      }
+        nextDate: "Oct 24",
+        avatars: ["https://example.com/av1.jpg", "+3"],
+      },
     ];
 
     render(<SavingsCircles groups={mockGroups} isLoading={false} />);
-    
-    expect(screen.getByText('My Savings Circles')).toBeInTheDocument();
-    expect(screen.getByText('Home Fund')).toBeInTheDocument();
-    expect(screen.getByText('FAMILY HOME')).toBeInTheDocument();
-    expect(screen.getByText('$8,200 saved')).toBeInTheDocument();
-    expect(screen.getByText('82%')).toBeInTheDocument();
-    expect(screen.getByText('Next: Oct 24')).toBeInTheDocument();
-    
+
+    expect(screen.getByText("My Savings Circles")).toBeInTheDocument();
+    expect(screen.getByText("Home Fund")).toBeInTheDocument();
+    expect(screen.getByText("FAMILY HOME")).toBeInTheDocument();
+    expect(screen.getByText("$8,200 saved")).toBeInTheDocument();
+    expect(screen.getByText("82%")).toBeInTheDocument();
+    expect(screen.getByText("Next: Oct 24")).toBeInTheDocument();
+
     // Check for the new circle button
-    expect(screen.getByText('New Circle')).toBeInTheDocument();
+    expect(screen.getByText("New Circle")).toBeInTheDocument();
   });
 });
diff --git a/src/__tests__/dashboard/TransactionList.test.tsx b/src/__tests__/dashboard/TransactionList.test.tsx
index cc61b12..11c757a 100644
--- a/src/__tests__/dashboard/TransactionList.test.tsx
+++ b/src/__tests__/dashboard/TransactionList.test.tsx
@@ -1,46 +1,50 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import { TransactionList } from '@/components/dashboard/TransactionList';
+import { render, screen } from "@testing-library/react";
+import { describe, it, expect } from "vitest";
+import { TransactionList } from "@/components/dashboard/TransactionList";
 
-describe('TransactionList', () => {
-  it('renders loading state correctly', () => {
-    const { container } = render(<TransactionList transactions={[]} isLoading={true} />);
-    expect(container.querySelector('.animate-pulse')).toBeInTheDocument();
+describe("TransactionList", () => {
+  it("renders loading state correctly", () => {
+    const { container } = render(
+      <TransactionList transactions={[]} isLoading={true} />,
+    );
+    expect(container.querySelector(".animate-pulse")).toBeInTheDocument();
   });
 
-  it('renders transactions correctly', () => {
+  it("renders transactions correctly", () => {
     const mockTransactions = [
       {
-        id: '1',
-        type: 'deposit' as const,
-        title: 'Deposit from WhatsApp Pay',
-        date: 'Oct 21, 2023',
-        time: '2:30 PM',
+        id: "1",
+        type: "deposit" as const,
+        title: "Deposit from WhatsApp Pay",
+        date: "Oct 21, 2023",
+        time: "2:30 PM",
         amount: 250,
-        currency: 'USDC',
-        status: 'Completed',
+        currency: "USDC",
+        status: "Completed",
       },
       {
-        id: '2',
-        type: 'contribution' as const,
-        title: 'Home Fund Contribution',
-        date: 'Oct 19, 2023',
-        time: '9:15 AM',
+        id: "2",
+        type: "contribution" as const,
+        title: "Home Fund Contribution",
+        date: "Oct 19, 2023",
+        time: "9:15 AM",
         amount: -100,
-        currency: 'USDC',
-        status: 'Completed',
-      }
+        currency: "USDC",
+        status: "Completed",
+      },
     ];
 
-    render(<TransactionList transactions={mockTransactions} isLoading={false} />);
-    
-    expect(screen.getByText('Recent Activity')).toBeInTheDocument();
-    expect(screen.getByText('Deposit from WhatsApp Pay')).toBeInTheDocument();
-    expect(screen.getByText('+250.00 USDC')).toBeInTheDocument();
-    
-    expect(screen.getByText('Home Fund Contribution')).toBeInTheDocument();
-    expect(screen.getByText('-100.00 USDC')).toBeInTheDocument();
-    
-    expect(screen.getByText('Download Statement')).toBeInTheDocument();
+    render(
+      <TransactionList transactions={mockTransactions} isLoading={false} />,
+    );
+
+    expect(screen.getByText("Recent Activity")).toBeInTheDocument();
+    expect(screen.getByText("Deposit from WhatsApp Pay")).toBeInTheDocument();
+    expect(screen.getByText("+250.00 USDC")).toBeInTheDocument();
+
+    expect(screen.getByText("Home Fund Contribution")).toBeInTheDocument();
+    expect(screen.getByText("-100.00 USDC")).toBeInTheDocument();
+
+    expect(screen.getByText("Download Statement")).toBeInTheDocument();
   });
 });
diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx
index 0a95689..d78a894 100644
--- a/src/app/(dashboard)/dashboard/page.tsx
+++ b/src/app/(dashboard)/dashboard/page.tsx
@@ -1,17 +1,29 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { BalanceCard } from '@/components/dashboard/BalanceCard';
-import { SavingsCircles } from '@/components/dashboard/SavingsCircles';
-import { TransactionList } from '@/components/dashboard/TransactionList';
-import { useWallet } from '@/hooks/useWallet';
-import { useGroups } from '@/hooks/useGroups';
-import { usePayments } from '@/hooks/usePayments';
+import React from "react";
+import { BalanceCard } from "@/components/dashboard/BalanceCard";
+import { SavingsCircles } from "@/components/dashboard/SavingsCircles";
+import { TransactionList } from "@/components/dashboard/TransactionList";
+import { useWallet } from "@/hooks/useWallet";
+import { useGroups } from "@/hooks/useGroups";
+import { usePayments } from "@/hooks/usePayments";
 
 export default function Dashboard() {
-  const { data: walletData, isLoading: isWalletLoading, error: walletError } = useWallet();
-  const { data: groupsData, isLoading: isGroupsLoading, error: groupsError } = useGroups();
-  const { data: paymentsData, isLoading: isPaymentsLoading, error: paymentsError } = usePayments();
+  const {
+    data: walletData,
+    isLoading: isWalletLoading,
+    error: walletError,
+  } = useWallet();
+  const {
+    data: groupsData,
+    isLoading: isGroupsLoading,
+    error: groupsError,
+  } = useGroups();
+  const {
+    data: paymentsData,
+    isLoading: isPaymentsLoading,
+    error: paymentsError,
+  } = usePayments();
 
   return (
     <div className="w-full max-w-5xl mx-auto p-4 sm:p-6 lg:p-8">
@@ -25,13 +37,15 @@ export default function Dashboard() {
         {/* Balance Card Section */}
         <section>
           {walletError ? (
-            <div className="w-full h-36 bg-red-50 border border-red-100 rounded-2xl flex items-center justify-center text-red-600 font-medium shadow-sm">Error loading wallet data</div>
+            <div className="w-full h-36 bg-red-50 border border-red-100 rounded-2xl flex items-center justify-center text-red-600 font-medium shadow-sm">
+              Error loading wallet data
+            </div>
           ) : (
-            <BalanceCard 
-              balance={walletData?.balance} 
-              currency={walletData?.currency} 
-              trendPercentage={walletData?.trendPercentage} 
-              isLoading={isWalletLoading} 
+            <BalanceCard
+              balance={walletData?.balance}
+              currency={walletData?.currency}
+              trendPercentage={walletData?.trendPercentage}
+              isLoading={isWalletLoading}
             />
           )}
         </section>
@@ -39,11 +53,13 @@ export default function Dashboard() {
         {/* Savings Circles Section */}
         <section>
           {groupsError ? (
-            <div className="w-full h-64 bg-red-50 border border-red-100 rounded-2xl flex items-center justify-center text-red-600 font-medium shadow-sm">Error loading savings groups</div>
+            <div className="w-full h-64 bg-red-50 border border-red-100 rounded-2xl flex items-center justify-center text-red-600 font-medium shadow-sm">
+              Error loading savings groups
+            </div>
           ) : (
-            <SavingsCircles 
-              groups={groupsData || []} 
-              isLoading={isGroupsLoading} 
+            <SavingsCircles
+              groups={groupsData || []}
+              isLoading={isGroupsLoading}
             />
           )}
         </section>
@@ -51,11 +67,13 @@ export default function Dashboard() {
         {/* Recent Activity Section */}
         <section>
           {paymentsError ? (
-            <div className="w-full min-h-96 bg-red-50 border border-red-100 rounded-2xl flex items-center justify-center text-red-600 font-medium shadow-sm">Error loading transactions</div>
+            <div className="w-full min-h-96 bg-red-50 border border-red-100 rounded-2xl flex items-center justify-center text-red-600 font-medium shadow-sm">
+              Error loading transactions
+            </div>
           ) : (
-            <TransactionList 
-              transactions={paymentsData || []} 
-              isLoading={isPaymentsLoading} 
+            <TransactionList
+              transactions={paymentsData || []}
+              isLoading={isPaymentsLoading}
             />
           )}
         </section>
diff --git a/src/components/dashboard/BalanceCard/BalanceCard.tsx b/src/components/dashboard/BalanceCard/BalanceCard.tsx
index 6fa7d98..41a1d90 100644
--- a/src/components/dashboard/BalanceCard/BalanceCard.tsx
+++ b/src/components/dashboard/BalanceCard/BalanceCard.tsx
@@ -1,7 +1,7 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { Send, Plus, TrendingUp, TrendingDown } from 'lucide-react';
+import React from "react";
+import { Send, Plus, TrendingUp, TrendingDown } from "lucide-react";
 
 interface BalanceCardProps {
   balance?: number;
@@ -10,7 +10,12 @@ interface BalanceCardProps {
   isLoading?: boolean;
 }
 
-export function BalanceCard({ balance = 0, currency = 'USDC', trendPercentage = 0, isLoading = false }: BalanceCardProps) {
+export function BalanceCard({
+  balance = 0,
+  currency = "USDC",
+  trendPercentage = 0,
+  isLoading = false,
+}: BalanceCardProps) {
   if (isLoading) {
     return (
       <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between w-full h-36 animate-pulse">
@@ -27,7 +32,7 @@ export function BalanceCard({ balance = 0, currency = 'USDC', trendPercentage =
     );
   }
 
-  const formattedBalance = new Intl.NumberFormat('en-US', {
+  const formattedBalance = new Intl.NumberFormat("en-US", {
     minimumFractionDigits: 2,
     maximumFractionDigits: 2,
   }).format(balance);
@@ -37,10 +42,16 @@ export function BalanceCard({ balance = 0, currency = 'USDC', trendPercentage =
   return (
     <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 flex flex-col sm:flex-row sm:items-center justify-between w-full">
       <div>
-        <p className="text-sm font-medium text-gray-500 mb-1 uppercase tracking-wider">Total Balance</p>
+        <p className="text-sm font-medium text-gray-500 mb-1 uppercase tracking-wider">
+          Total Balance
+        </p>
         <div className="flex items-baseline gap-2 mb-2">
-          <h2 className="text-4xl font-bold text-gray-900">{formattedBalance}</h2>
-          <span className="text-lg font-medium text-emerald-600">{currency}</span>
+          <h2 className="text-4xl font-bold text-gray-900">
+            {formattedBalance}
+          </h2>
+          <span className="text-lg font-medium text-emerald-600">
+            {currency}
+          </span>
         </div>
         <div className="flex items-center gap-1.5 text-sm">
           {isPositiveTrend ? (
@@ -48,8 +59,11 @@ export function BalanceCard({ balance = 0, currency = 'USDC', trendPercentage =
           ) : (
             <TrendingDown className="w-4 h-4 text-red-500" />
           )}
-          <span className={`${isPositiveTrend ? 'text-emerald-600' : 'text-red-500'} font-medium`}>
-            {isPositiveTrend ? '+' : ''}{trendPercentage}%
+          <span
+            className={`${isPositiveTrend ? "text-emerald-600" : "text-red-500"} font-medium`}
+          >
+            {isPositiveTrend ? "+" : ""}
+            {trendPercentage}%
           </span>
           <span className="text-gray-500">from last month</span>
         </div>
diff --git a/src/components/dashboard/ProgressRing/ProgressRing.tsx b/src/components/dashboard/ProgressRing/ProgressRing.tsx
new file mode 100644
index 0000000..396e18d
--- /dev/null
+++ b/src/components/dashboard/ProgressRing/ProgressRing.tsx
@@ -0,0 +1,88 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+
+interface ProgressRingProps {
+  /** Completion percentage from 0 to 100. */
+  progress: number;
+  /** Logical size of the SVG viewBox (pixels). Defaults to 120. */
+  size?: number;
+  /** Stroke width in viewBox units. Defaults to 10. */
+  strokeWidth?: number;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+const TRACK_COLOR = "#E5E7EB";
+const FILL_COLOR = "#10B981";
+
+export function ProgressRing({
+  progress,
+  size = 120,
+  strokeWidth = 10,
+  className = "",
+  children,
+}: ProgressRingProps) {
+  const clamped = Math.min(100, Math.max(0, progress));
+  const center = size / 2;
+  const radius = center - strokeWidth / 2;
+  const circumference = 2 * Math.PI * radius;
+  const targetOffset = circumference * (1 - clamped / 100);
+
+  // Start fully empty so CSS transition animates fill-up on mount.
+  const [offset, setOffset] = useState(circumference);
+
+  useEffect(() => {
+    // Double rAF ensures the initial empty state is painted before the
+    // transition to the real offset begins.
+    let inner: number;
+    const outer = requestAnimationFrame(() => {
+      inner = requestAnimationFrame(() => setOffset(targetOffset));
+    });
+    return () => {
+      cancelAnimationFrame(outer);
+      cancelAnimationFrame(inner);
+    };
+  }, [targetOffset]);
+
+  return (
+    <div
+      className={`relative inline-flex items-center justify-center ${className}`}
+      role="img"
+      aria-label={`Savings progress: ${Math.round(clamped)}%`}
+    >
+      <svg viewBox={`0 0 ${size} ${size}`} width="100%" height="100%">
+        {/* Track */}
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={TRACK_COLOR}
+          strokeWidth={strokeWidth}
+          vectorEffect="non-scaling-stroke"
+        />
+        {/* Progress arc */}
+        <circle
+          cx={center}
+          cy={center}
+          r={radius}
+          fill="none"
+          stroke={FILL_COLOR}
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          strokeDasharray={circumference}
+          strokeDashoffset={offset}
+          vectorEffect="non-scaling-stroke"
+          transform={`rotate(-90 ${center} ${center})`}
+          style={{ transition: "stroke-dashoffset 1s ease-in-out" }}
+        />
+      </svg>
+      {children !== undefined && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          {children}
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/src/components/dashboard/ProgressRing/index.ts b/src/components/dashboard/ProgressRing/index.ts
new file mode 100644
index 0000000..6e6d23f
--- /dev/null
+++ b/src/components/dashboard/ProgressRing/index.ts
@@ -0,0 +1 @@
+export { ProgressRing } from "./ProgressRing";
diff --git a/src/components/dashboard/SavingsCircles/SavingsCircles.tsx b/src/components/dashboard/SavingsCircles/SavingsCircles.tsx
index e15ac47..ac11f03 100644
--- a/src/components/dashboard/SavingsCircles/SavingsCircles.tsx
+++ b/src/components/dashboard/SavingsCircles/SavingsCircles.tsx
@@ -1,15 +1,19 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { Home, Plane, Plus, ChevronRight } from 'lucide-react';
-import type { SavingsGroup } from '@/hooks/useGroups';
+import React from "react";
+import { Home, Plane, Plus, ChevronRight } from "lucide-react";
+import type { SavingsGroup } from "@/hooks/useGroups";
+import { ProgressRing } from "@/components/dashboard/ProgressRing";
 
 interface SavingsCirclesProps {
   groups: SavingsGroup[];
   isLoading?: boolean;
 }
 
-export function SavingsCircles({ groups, isLoading = false }: SavingsCirclesProps) {
+export function SavingsCircles({
+  groups,
+  isLoading = false,
+}: SavingsCirclesProps) {
   if (isLoading) {
     return (
       <div className="w-full">
@@ -18,15 +22,21 @@ export function SavingsCircles({ groups, isLoading = false }: SavingsCirclesProp
         </div>
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {[1, 2, 3].map((i) => (
-            <div key={i} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 h-48 animate-pulse">
-              <div className="flex justify-between items-start mb-4">
-                <div className="w-10 h-10 rounded-full bg-gray-200"></div>
+            <div
+              key={i}
+              className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 flex flex-col items-center gap-4 animate-pulse"
+            >
+              <div className="flex justify-between items-center w-full">
+                <div className="w-9 h-9 rounded-full bg-gray-200"></div>
                 <div className="w-20 h-6 bg-gray-200 rounded-full"></div>
               </div>
-              <div className="h-6 w-32 bg-gray-200 rounded mb-4"></div>
-              <div className="h-2 w-full bg-gray-200 rounded-full mb-6"></div>
-              <div className="flex justify-between items-center">
-                <div className="h-4 w-24 bg-gray-200 rounded"></div>
+              <div className="w-28 h-28 rounded-full bg-gray-200"></div>
+              <div className="w-full text-center space-y-1.5">
+                <div className="h-4 w-28 bg-gray-200 rounded mx-auto"></div>
+                <div className="h-3 w-20 bg-gray-200 rounded mx-auto"></div>
+              </div>
+              <div className="flex justify-between items-center w-full">
+                <div className="h-3 w-24 bg-gray-200 rounded"></div>
                 <div className="flex -space-x-2">
                   <div className="w-6 h-6 rounded-full bg-gray-300 border-2 border-white"></div>
                   <div className="w-6 h-6 rounded-full bg-gray-300 border-2 border-white"></div>
@@ -42,7 +52,9 @@ export function SavingsCircles({ groups, isLoading = false }: SavingsCirclesProp
   return (
     <div className="w-full">
       <div className="flex justify-between items-center mb-4">
-        <h3 className="text-xl font-semibold text-gray-900">My Savings Circles</h3>
+        <h3 className="text-xl font-semibold text-gray-900">
+          My Savings Circles
+        </h3>
         <button className="text-sm font-medium text-emerald-600 hover:text-emerald-700 flex items-center">
           View All <ChevronRight className="w-4 h-4 ml-0.5" />
         </button>
@@ -51,53 +63,70 @@ export function SavingsCircles({ groups, isLoading = false }: SavingsCirclesProp
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {groups.map((group) => {
           const progress = Math.min((group.saved / group.target) * 100, 100);
-          
+
           // Helper to get icon based on tag
           const getIcon = () => {
-            if (group.tag.includes('HOME')) return <Home className="w-5 h-5 text-emerald-700" />;
-            if (group.tag.includes('TRAVEL')) return <Plane className="w-5 h-5 text-emerald-700" />;
+            if (group.tag.includes("HOME"))
+              return <Home className="w-5 h-5 text-emerald-700" />;
+            if (group.tag.includes("TRAVEL"))
+              return <Plane className="w-5 h-5 text-emerald-700" />;
             return <Home className="w-5 h-5 text-emerald-700" />;
           };
 
           return (
-            <div key={group.id} className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 flex flex-col justify-between hover:shadow-md transition-shadow">
-              <div>
-                <div className="flex justify-between items-start mb-4">
-                  <div className="w-10 h-10 rounded-full bg-emerald-50 flex items-center justify-center">
-                    {getIcon()}
-                  </div>
-                  <span className="text-[10px] font-bold tracking-wider text-emerald-700 bg-emerald-100 px-2 py-1 rounded-full uppercase">
-                    {group.tag}
-                  </span>
-                </div>
-                
-                <h4 className="text-lg font-bold text-gray-900 mb-1">{group.name}</h4>
-                <div className="flex justify-between items-end mb-2 text-sm">
-                  <span className="text-gray-500 font-medium">${group.saved.toLocaleString()} saved</span>
-                  <span className="text-gray-500 font-medium">{Math.round(progress)}%</span>
+            <div
+              key={group.id}
+              className="bg-white rounded-2xl p-5 shadow-sm border border-gray-100 flex flex-col items-center gap-4 hover:shadow-md transition-shadow"
+            >
+              <div className="flex justify-between items-center w-full">
+                <div className="w-9 h-9 rounded-full bg-emerald-50 flex items-center justify-center">
+                  {getIcon()}
                 </div>
-                
-                {/* Progress bar */}
-                <div className="w-full h-1.5 bg-gray-100 rounded-full overflow-hidden mb-5">
-                  <div 
-                    className="h-full bg-emerald-400 rounded-full" 
-                    style={{ width: `${progress}%` }}
-                  ></div>
+                <span className="text-[10px] font-bold tracking-wider text-emerald-700 bg-emerald-100 px-2 py-1 rounded-full uppercase">
+                  {group.tag}
+                </span>
+              </div>
+
+              <ProgressRing progress={progress} className="w-28 h-28">
+                <div className="text-center">
+                  <p className="text-xl font-bold text-gray-900">
+                    {Math.round(progress)}%
+                  </p>
+                  <p className="text-[10px] font-medium text-gray-400">
+                    of goal
+                  </p>
                 </div>
+              </ProgressRing>
+
+              <div className="w-full text-center">
+                <h4 className="text-base font-bold text-gray-900 mb-0.5">
+                  {group.name}
+                </h4>
+                <p className="text-sm text-gray-500">
+                  ${group.saved.toLocaleString()} saved
+                </p>
               </div>
 
-              <div className="flex justify-between items-center text-xs font-medium text-gray-500">
+              <div className="flex justify-between items-center w-full text-xs font-medium text-gray-500">
                 <span>Next: {group.nextDate}</span>
                 <div className="flex -space-x-1.5">
-                  {group.avatars.map((avatar, idx) => (
-                    avatar.startsWith('+') ? (
-                      <div key={idx} className="w-6 h-6 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[10px] font-bold text-gray-600 z-10">
+                  {group.avatars.map((avatar, idx) =>
+                    avatar.startsWith("+") ? (
+                      <div
+                        key={idx}
+                        className="w-6 h-6 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[10px] font-bold text-gray-600 z-10"
+                      >
                         {avatar}
                       </div>
                     ) : (
-                      <img key={idx} src={avatar} alt="Member" className="w-6 h-6 rounded-full border-2 border-white object-cover z-20" />
-                    )
-                  ))}
+                      <img
+                        key={idx}
+                        src={avatar}
+                        alt="Member"
+                        className="w-6 h-6 rounded-full border-2 border-white object-cover z-20"
+                      />
+                    ),
+                  )}
                 </div>
               </div>
             </div>
@@ -110,7 +139,9 @@ export function SavingsCircles({ groups, isLoading = false }: SavingsCirclesProp
             <Plus className="w-6 h-6 text-emerald-600" />
           </div>
           <h4 className="text-lg font-bold text-gray-900 mb-1">New Circle</h4>
-          <p className="text-xs text-gray-500 font-medium">Start a community savings plan with friends.</p>
+          <p className="text-xs text-gray-500 font-medium">
+            Start a community savings plan with friends.
+          </p>
         </button>
       </div>
     </div>
diff --git a/src/components/dashboard/SavingsCircles/index.ts b/src/components/dashboard/SavingsCircles/index.ts
index 5a731bb..22e50b9 100644
--- a/src/components/dashboard/SavingsCircles/index.ts
+++ b/src/components/dashboard/SavingsCircles/index.ts
@@ -1 +1 @@
-export * from './SavingsCircles';
+export * from "./SavingsCircles";
diff --git a/src/components/dashboard/TransactionList/TransactionList.tsx b/src/components/dashboard/TransactionList/TransactionList.tsx
index fbe5989..7686e71 100644
--- a/src/components/dashboard/TransactionList/TransactionList.tsx
+++ b/src/components/dashboard/TransactionList/TransactionList.tsx
@@ -1,22 +1,28 @@
-'use client';
+"use client";
 
-import React from 'react';
-import { ArrowDown, ArrowUp, Users } from 'lucide-react';
-import type { Transaction } from '@/hooks/usePayments';
+import React from "react";
+import { ArrowDown, ArrowUp, Users } from "lucide-react";
+import type { Transaction } from "@/hooks/usePayments";
 
 interface TransactionListProps {
   transactions: Transaction[];
   isLoading?: boolean;
 }
 
-export function TransactionList({ transactions, isLoading = false }: TransactionListProps) {
+export function TransactionList({
+  transactions,
+  isLoading = false,
+}: TransactionListProps) {
   if (isLoading) {
     return (
       <div className="w-full">
         <div className="h-6 w-32 bg-gray-200 rounded mb-4 animate-pulse"></div>
         <div className="bg-white rounded-2xl p-2 shadow-sm border border-gray-100 animate-pulse">
           {[1, 2, 3].map((i) => (
-            <div key={i} className="flex justify-between items-center p-4 border-b border-gray-50 last:border-0">
+            <div
+              key={i}
+              className="flex justify-between items-center p-4 border-b border-gray-50 last:border-0"
+            >
               <div className="flex items-center gap-4">
                 <div className="w-10 h-10 rounded-xl bg-gray-200"></div>
                 <div>
@@ -31,7 +37,7 @@ export function TransactionList({ transactions, isLoading = false }: Transaction
             </div>
           ))}
           <div className="p-4 border-t border-gray-50 flex justify-center">
-             <div className="h-4 w-32 bg-gray-200 rounded"></div>
+            <div className="h-4 w-32 bg-gray-200 rounded"></div>
           </div>
         </div>
       </div>
@@ -40,11 +46,11 @@ export function TransactionList({ transactions, isLoading = false }: Transaction
 
   const getIcon = (type: string) => {
     switch (type) {
-      case 'deposit':
+      case "deposit":
         return <ArrowDown className="w-5 h-5 text-emerald-600" />;
-      case 'contribution':
+      case "contribution":
         return <Users className="w-5 h-5 text-emerald-600" />;
-      case 'send':
+      case "send":
         return <ArrowUp className="w-5 h-5 text-emerald-600" />;
       default:
         return <ArrowDown className="w-5 h-5 text-emerald-600" />;
@@ -53,19 +59,23 @@ export function TransactionList({ transactions, isLoading = false }: Transaction
 
   return (
     <div className="w-full">
-      <h3 className="text-xl font-semibold text-gray-900 mb-4">Recent Activity</h3>
-      
+      <h3 className="text-xl font-semibold text-gray-900 mb-4">
+        Recent Activity
+      </h3>
+
       <div className="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
         <div className="flex flex-col">
           {transactions.map((tx, idx) => {
             const isPositive = tx.amount > 0;
-            const formattedAmount = `${isPositive ? '+' : ''}${tx.amount.toFixed(2)} ${tx.currency}`;
-            
+            const formattedAmount = `${isPositive ? "+" : ""}${tx.amount.toFixed(2)} ${tx.currency}`;
+
             return (
-              <div 
-                key={tx.id} 
+              <div
+                key={tx.id}
                 className={`flex justify-between items-center p-5 ${
-                  idx !== transactions.length - 1 ? 'border-b border-gray-50' : ''
+                  idx !== transactions.length - 1
+                    ? "border-b border-gray-50"
+                    : ""
                 } hover:bg-gray-50/50 transition-colors`}
               >
                 <div className="flex items-center gap-4">
@@ -73,14 +83,18 @@ export function TransactionList({ transactions, isLoading = false }: Transaction
                     {getIcon(tx.type)}
                   </div>
                   <div>
-                    <p className="font-medium text-gray-900 text-sm mb-0.5">{tx.title}</p>
+                    <p className="font-medium text-gray-900 text-sm mb-0.5">
+                      {tx.title}
+                    </p>
                     <p className="text-xs font-medium text-gray-500">
                       {tx.date} • {tx.time}
                     </p>
                   </div>
                 </div>
                 <div className="text-right">
-                  <p className={`font-medium text-sm mb-0.5 ${isPositive ? 'text-emerald-600' : 'text-gray-900'}`}>
+                  <p
+                    className={`font-medium text-sm mb-0.5 ${isPositive ? "text-emerald-600" : "text-gray-900"}`}
+                  >
                     {formattedAmount}
                   </p>
                   <p className="text-xs font-medium text-gray-500">
@@ -91,7 +105,7 @@ export function TransactionList({ transactions, isLoading = false }: Transaction
             );
           })}
         </div>
-        
+
         <div className="p-4 border-t border-gray-50 flex justify-center">
           <button className="text-sm font-medium text-emerald-600 hover:text-emerald-700 transition-colors">
             Download Statement
diff --git a/src/hooks/useGroups.ts b/src/hooks/useGroups.ts
index b6bb774..79a32b3 100644
--- a/src/hooks/useGroups.ts
+++ b/src/hooks/useGroups.ts
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { useAuth } from './useAuth';
+import { useState, useEffect } from "react";
+import { useAuth } from "./useAuth";
 
 export interface SavingsGroup {
   id: string;
@@ -30,26 +30,35 @@ export const useGroups = () => {
         await new Promise((resolve) => setTimeout(resolve, 800));
         setData([
           {
-            id: '1',
-            name: 'Home Fund',
-            tag: 'FAMILY HOME',
+            id: "1",
+            name: "Home Fund",
+            tag: "FAMILY HOME",
             saved: 8200,
             target: 10000,
-            nextDate: 'Oct 24',
-            avatars: ['https://i.pravatar.cc/150?u=1', 'https://i.pravatar.cc/150?u=2', '+3'],
+            nextDate: "Oct 24",
+            avatars: [
+              "https://i.pravatar.cc/150?u=1",
+              "https://i.pravatar.cc/150?u=2",
+              "+3",
+            ],
           },
           {
-            id: '2',
-            name: 'Bali Retreat',
-            tag: 'TRAVEL',
+            id: "2",
+            name: "Bali Retreat",
+            tag: "TRAVEL",
             saved: 1450,
             target: 3222, // 1450 / 0.45 = ~3222 to get 45%
-            nextDate: 'Nov 02',
-            avatars: ['https://i.pravatar.cc/150?u=3', 'https://i.pravatar.cc/150?u=4'],
+            nextDate: "Nov 02",
+            avatars: [
+              "https://i.pravatar.cc/150?u=3",
+              "https://i.pravatar.cc/150?u=4",
+            ],
           },
         ]);
       } catch (err) {
-        setError(err instanceof Error ? err : new Error('Failed to fetch groups data'));
+        setError(
+          err instanceof Error ? err : new Error("Failed to fetch groups data"),
+        );
       } finally {
         setIsLoading(false);
       }
diff --git a/src/hooks/usePayments.ts b/src/hooks/usePayments.ts
index 0302b8e..5aca823 100644
--- a/src/hooks/usePayments.ts
+++ b/src/hooks/usePayments.ts
@@ -1,9 +1,9 @@
-import { useState, useEffect } from 'react';
-import { useAuth } from './useAuth';
+import { useState, useEffect } from "react";
+import { useAuth } from "./useAuth";
 
 export interface Transaction {
   id: string;
-  type: 'deposit' | 'contribution' | 'send';
+  type: "deposit" | "contribution" | "send";
   title: string;
   date: string;
   time: string;
@@ -31,38 +31,42 @@ export const usePayments = () => {
         await new Promise((resolve) => setTimeout(resolve, 800));
         setData([
           {
-            id: '1',
-            type: 'deposit',
-            title: 'Deposit from WhatsApp Pay',
-            date: 'Oct 21, 2023',
-            time: '2:30 PM',
-            amount: 250.00,
-            currency: 'USDC',
-            status: 'Completed',
+            id: "1",
+            type: "deposit",
+            title: "Deposit from WhatsApp Pay",
+            date: "Oct 21, 2023",
+            time: "2:30 PM",
+            amount: 250.0,
+            currency: "USDC",
+            status: "Completed",
           },
           {
-            id: '2',
-            type: 'contribution',
-            title: 'Home Fund Contribution',
-            date: 'Oct 19, 2023',
-            time: '9:15 AM',
-            amount: -100.00,
-            currency: 'USDC',
-            status: 'Completed',
+            id: "2",
+            type: "contribution",
+            title: "Home Fund Contribution",
+            date: "Oct 19, 2023",
+            time: "9:15 AM",
+            amount: -100.0,
+            currency: "USDC",
+            status: "Completed",
           },
           {
-            id: '3',
-            type: 'send',
-            title: 'Sent to Sarah K.',
-            date: 'Oct 18, 2023',
-            time: '11:45 PM',
-            amount: -55.20,
-            currency: 'USDC',
-            status: 'Completed',
+            id: "3",
+            type: "send",
+            title: "Sent to Sarah K.",
+            date: "Oct 18, 2023",
+            time: "11:45 PM",
+            amount: -55.2,
+            currency: "USDC",
+            status: "Completed",
           },
         ]);
       } catch (err) {
-        setError(err instanceof Error ? err : new Error('Failed to fetch payments data'));
+        setError(
+          err instanceof Error
+            ? err
+            : new Error("Failed to fetch payments data"),
+        );
       } finally {
         setIsLoading(false);
       }
diff --git a/src/hooks/useWallet.ts b/src/hooks/useWallet.ts
index 4102911..94cd95f 100644
--- a/src/hooks/useWallet.ts
+++ b/src/hooks/useWallet.ts
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { useAuth } from './useAuth';
+import { useState, useEffect } from "react";
+import { useAuth } from "./useAuth";
 
 export interface WalletData {
   balance: number;
@@ -25,15 +25,17 @@ export const useWallet = () => {
         setIsLoading(true);
         // Simulate API call scoped to user
         await new Promise((resolve) => setTimeout(resolve, 800));
-        
+
         // Mocked response for user ${user.id}
         setData({
-          balance: 12450.00,
-          currency: 'USDC',
+          balance: 12450.0,
+          currency: "USDC",
           trendPercentage: 2.4,
         });
       } catch (err) {
-        setError(err instanceof Error ? err : new Error('Failed to fetch wallet data'));
+        setError(
+          err instanceof Error ? err : new Error("Failed to fetch wallet data"),
+        );
       } finally {
         setIsLoading(false);
       }