diff --git a/src/app/groups/page.tsx b/src/app/groups/page.tsx
index 7592365..d3da5cf 100644
--- a/src/app/groups/page.tsx
+++ b/src/app/groups/page.tsx
@@ -1,67 +1,125 @@
 "use client";
 
-import { Navbar } from "@/components/Navbar";
 import { GroupCard } from "@/components/GroupCard";
-import { SavingsGroup, GroupStatus } from "@sorosave/sdk";
-
-// Placeholder data for development — will be replaced with contract queries
-const PLACEHOLDER_GROUPS: SavingsGroup[] = [
-  {
-    id: 1,
-    name: "Lagos Savings Circle",
-    admin: "GABCDEFGHIJKLMNOPQRSTUVWXYZ234567ABCDEFG",
-    token: "CDLZFC3SYJYDZT7K67VZ75HPJVIEUVNIXF47ZG2FB2RMQQVU2HHGCYSC",
-    contributionAmount: 1000000000n,
-    cycleLength: 604800,
-    maxMembers: 5,
-    members: ["GABCD...", "GEFGH...", "GIJKL..."],
-    payoutOrder: [],
-    currentRound: 0,
-    totalRounds: 0,
-    status: GroupStatus.Forming,
-    createdAt: 1700000000,
-  },
-  {
-    id: 2,
-    name: "DeFi Builders Fund",
-    admin: "GABCDEFGHIJKLMNOPQRSTUVWXYZ234567ABCDEFG",
-    token: "CDLZFC3SYJYDZT7K67VZ75HPJVIEUVNIXF47ZG2FB2RMQQVU2HHGCYSC",
-    contributionAmount: 5000000000n,
-    cycleLength: 2592000,
-    maxMembers: 10,
-    members: ["GABCD...", "GEFGH...", "GIJKL...", "GMNOP...", "GQRST..."],
-    payoutOrder: ["GABCD...", "GEFGH...", "GIJKL...", "GMNOP...", "GQRST..."],
-    currentRound: 2,
-    totalRounds: 5,
-    status: GroupStatus.Active,
-    createdAt: 1699000000,
-  },
-];
+import { Navbar } from "@/components/Navbar";
+import { SavingsGroup } from "@sorosave/sdk";
+import { useState } from "react";
+import { GroupCompare } from "@/components/GroupCompare";
 
 export default function GroupsPage() {
-  // TODO: Replace with actual contract queries
-  const groups = PLACEHOLDER_GROUPS;
+  const [selectedGroups, setSelectedGroups] = useState<SavingsGroup[]>([]);
+  const [showCompareModal, setShowCompareModal] = useState(false);
+
+  // Mock data - replace with actual data fetching
+  const groups: SavingsGroup[] = [
+    {
+      id: "1",
+      name: "Community Savings Group",
+      status: "Active",
+      contributionAmount: 100,
+      cycleLength: 30,
+      members: Array(8).fill({}),
+      maxMembers: 10,
+      currentRound: 3,
+      totalRounds: 10,
+    },
+    {
+      id: "2",
+      name: "Tech Professionals Group",
+      status: "Forming",
+      contributionAmount: 200,
+      cycleLength: 15,
+      members: Array(5).fill({}),
+      maxMembers: 12,
+      currentRound: 0,
+      totalRounds: 12,
+    },
+    {
+      id: "3",
+      name: "Students Savings Club",
+      status: "Active",
+      contributionAmount: 50,
+      cycleLength: 45,
+      members: Array(15).fill({}),
+      maxMembers: 20,
+      currentRound: 2,
+      totalRounds: 20,
+    },
+    {
+      id: "4",
+      name: "Investors Network",
+      status: "Completed",
+      contributionAmount: 500,
+      cycleLength: 7,
+      members: Array(10).fill({}),
+      maxMembers: 10,
+      currentRound: 10,
+      totalRounds: 10,
+    },
+  ];
+
+  const handleGroupSelect = (group: SavingsGroup) => {
+    setSelectedGroups((prev) => {
+      const isAlreadySelected = prev.some((g) => g.id === group.id);
+      if (isAlreadySelected) {
+        return prev.filter((g) => g.id !== group.id);
+      }
+      if (prev.length >= 3) {
+        return prev;
+      }
+      return [...prev, group];
+    });
+  };
+
+  const handleCompareClick = () => {
+    if (selectedGroups.length > 0) {
+      setShowCompareModal(true);
+    }
+  };
 
   return (
-    <>
+    <div className="min-h-screen bg-gray-50">
       <Navbar />
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
         <div className="flex justify-between items-center mb-8">
-          <h1 className="text-2xl font-bold text-gray-900">Savings Groups</h1>
+          <h1 className="text-3xl font-bold text-gray-900">Groups</h1>
+          {selectedGroups.length > 0 && (
+            <button
+              onClick={handleCompareClick}
+              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors flex items-center space-x-2"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-5 w-5"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
+                  clipRule="evenodd"
+                />
+              </svg>
+              <span>Compare ({selectedGroups.length})</span>
+            </button>
+          )}
         </div>
 
-        {groups.length === 0 ? (
-          <div className="text-center py-12 text-gray-500">
-            No groups found. Create the first one!
-          </div>
-        ) : (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
-            {groups.map((group) => (
-              <GroupCard key={group.id} group={group} />
-            ))}
-          </div>
-        )}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {groups.map((group) => (
+            <div key={group.id} onClick={() => handleGroupSelect(group)}>
+              <GroupCard group={group} />
+            </div>
+          ))}
+        </div>
       </main>
-    </>
+
+      {showCompareModal && (
+        <GroupCompare
+          groups={selectedGroups}
+          onClose={() => setShowCompareModal(false)}
+        />
+      )}
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/GroupCard.tsx b/src/components/GroupCard.tsx
index 34e0616..b3e3525 100644
--- a/src/components/GroupCard.tsx
+++ b/src/components/GroupCard.tsx
@@ -2,6 +2,7 @@
 
 import Link from "next/link";
 import { SavingsGroup, formatAmount, getStatusLabel } from "@sorosave/sdk";
+import { useState } from "react";
 
 interface GroupCardProps {
   group: SavingsGroup;
@@ -16,41 +17,57 @@ const statusColors: Record<string, string> = {
 };
 
 export function GroupCard({ group }: GroupCardProps) {
+  const [isSelected, setIsSelected] = useState(false);
+
   return (
-    <Link href={`/groups/${group.id}`}>
-      <div className="bg-white rounded-xl shadow-sm border p-6 hover:shadow-md transition-shadow cursor-pointer">
-        <div className="flex justify-between items-start mb-4">
-          <h3 className="text-lg font-semibold text-gray-900">{group.name}</h3>
-          <span
-            className={`px-2 py-1 rounded-full text-xs font-medium ${
-              statusColors[group.status] || "bg-gray-100 text-gray-800"
-            }`}
-          >
-            {getStatusLabel(group.status)}
+    <div
+      className="bg-white rounded-xl shadow-sm border p-6 hover:shadow-md transition-shadow cursor-pointer"
+      onClick={() => setIsSelected(!isSelected)}
+    >
+      <div className="flex justify-between items-start mb-4">
+        <h3 className="text-lg font-semibold text-gray-900">{group.name}</h3>
+        <span
+          className={`px-2 py-1 rounded-full text-xs font-medium ${
+            statusColors[group.status] || "bg-gray-100 text-gray-800"
+          }`}
+        >
+          {getStatusLabel(group.status)}
+        </span>
+      </div>
+
+      <div className="space-y-2 text-sm text-gray-600">
+        <div className="flex justify-between">
+          <span>Contribution</span>
+          <span className="font-medium text-gray-900">
+            {formatAmount(group.contributionAmount)} tokens
           </span>
         </div>
-
-        <div className="space-y-2 text-sm text-gray-600">
-          <div className="flex justify-between">
-            <span>Contribution</span>
-            <span className="font-medium text-gray-900">
-              {formatAmount(group.contributionAmount)} tokens
-            </span>
-          </div>
-          <div className="flex justify-between">
-            <span>Members</span>
-            <span className="font-medium text-gray-900">
-              {group.members.length} / {group.maxMembers}
-            </span>
-          </div>
-          <div className="flex justify-between">
-            <span>Round</span>
-            <span className="font-medium text-gray-900">
-              {group.currentRound} / {group.totalRounds || group.maxMembers}
-            </span>
-          </div>
+        <div className="flex justify-between">
+          <span>Members</span>
+          <span className="font-medium text-gray-900">
+            {group.members.length} / {group.maxMembers}
+          </span>
+        </div>
+        <div className="flex justify-between">
+          <span>Round</span>
+          <span className="font-medium text-gray-900">
+            {group.currentRound} / {group.totalRounds || group.maxMembers}
+          </span>
         </div>
       </div>
-    </Link>
+
+      <div className="mt-4">
+        <label className="flex items-center space-x-2">
+          <input
+            type="checkbox"
+            className="rounded border-gray-300 text-primary-600 focus:ring-primary-500"
+            checked={isSelected}
+            onChange={(e) => setIsSelected(e.target.checked)}
+            onClick={(e) => e.stopPropagation()}
+          />
+          <span className="text-sm text-gray-700">Compare</span>
+        </label>
+      </div>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/components/GroupCompare.tsx b/src/components/GroupCompare.tsx
new file mode 100644
index 0000000..2149639
--- /dev/null
+++ b/src/components/GroupCompare.tsx
@@ -0,0 +1,206 @@
+"use client";
+
+import { SavingsGroup, formatAmount, getStatusLabel } from "@sorosave/sdk";
+import { useState } from "react";
+
+interface GroupCompareProps {
+  groups: SavingsGroup[];
+  onClose: () => void;
+}
+
+const statusColors: Record<string, string> = {
+  Forming: "bg-blue-100 text-blue-800",
+  Active: "bg-green-100 text-green-800",
+  Completed: "bg-gray-100 text-gray-800",
+  Disputed: "bg-red-100 text-red-800",
+  Paused: "bg-yellow-100 text-yellow-800",
+};
+
+const getDifferenceClass = (value1: any, value2: any): string => {
+  if (value1 === value2) return "text-green-600";
+  return "text-red-600 font-semibold";
+};
+
+export function GroupCompare({ groups, onClose }: GroupCompareProps) {
+  const [activeTab, setActiveTab] = useState(0);
+
+  if (groups.length === 0) {
+    return (
+      <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+          <h3 className="text-lg font-semibold mb-4">Compare Groups</h3>
+          <p className="text-gray-600">No groups selected for comparison.</p>
+          <button
+            onClick={onClose}
+            className="mt-4 w-full bg-primary-600 text-white py-2 px-4 rounded-lg hover:bg-primary-700 transition-colors"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-lg max-w-4xl w-full max-h-[90vh] overflow-y-auto">
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-6">
+            <h2 className="text-xl font-semibold text-gray-900">Compare Groups</h2>
+            <button
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 text-2xl"
+            >
+              ×
+            </button>
+          </div>
+
+          <div className="flex border-b mb-6">
+            {groups.map((group, index) => (
+              <button
+                key={group.id}
+                onClick={() => setActiveTab(index)}
+                className={`flex-1 py-2 px-4 text-center font-medium border-b-2 transition-colors ${
+                  activeTab === index
+                    ? "border-primary-600 text-primary-600"
+                    : "border-transparent text-gray-500 hover:text-gray-700"
+                }`}
+              >
+                {group.name}
+              </button>
+            ))}
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {/* Group Details */}
+            {groups.map((group, index) => (
+              <div key={group.id} className={index !== activeTab ? "hidden" : ""}>
+                <div className="mb-6">
+                  <h3 className="text-lg font-semibold mb-4">{group.name}</h3>
+                  <div className="space-y-3">
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Status</span>
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          statusColors[group.status] || "bg-gray-100 text-gray-800"
+                        }`}
+                      >
+                        {getStatusLabel(group.status)}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Contribution Amount</span>
+                      <span className="font-medium">
+                        {formatAmount(group.contributionAmount)} tokens
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Cycle Length</span>
+                      <span className="font-medium">
+                        {group.cycleLength || "N/A"} days
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Members</span>
+                      <span className="font-medium">
+                        {group.members.length} / {group.maxMembers}
+                      </span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Current Round</span>
+                      <span className="font-medium">{group.currentRound}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Total Rounds</span>
+                      <span className="font-medium">
+                        {group.totalRounds || group.maxMembers}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Comparison Table */}
+          <div className="mt-8">
+            <h3 className="text-lg font-semibold mb-4">Comparison</h3>
+            <div className="overflow-x-auto">
+              <table className="min-w-full divide-y divide-gray-200">
+                <thead className="bg-gray-50">
+                  <tr>
+                    <th className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                      Attribute
+                    </th>
+                    {groups.map((group) => (
+                      <th key={group.id} className="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">
+                        {group.name}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody className="bg-white divide-y divide-gray-200">
+                  <tr>
+                    <td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Status
+                    </td>
+                    {groups.map((group) => (
+                      <td key={group.id} className="px-4 py-2 whitespace-nowrap text-sm">
+                        <span
+                          className={`px-2 py-1 rounded-full text-xs font-medium ${
+                            statusColors[group.status] || "bg-gray-100 text-gray-800"
+                          }`}
+                        >
+                          {getStatusLabel(group.status)}
+                        </span>
+                      </td>
+                    ))}
+                  </tr>
+                  <tr>
+                    <td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Contribution Amount
+                    </td>
+                    {groups.map((group) => (
+                      <td key={group.id} className="px-4 py-2 whitespace-nowrap text-sm">
+                        {formatAmount(group.contributionAmount)} tokens
+                      </td>
+                    ))}
+                  </tr>
+                  <tr>
+                    <td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Cycle Length
+                    </td>
+                    {groups.map((group) => (
+                      <td key={group.id} className="px-4 py-2 whitespace-nowrap text-sm">
+                        {group.cycleLength || "N/A"} days
+                      </td>
+                    ))}
+                  </tr>
+                  <tr>
+                    <td className="px-4 py-2 whitespace-nowrap text-sm font-medium text-gray-900">
+                      Members
+                    </td>
+                    {groups.map((group) => (
+                      <td key={group.id} className="px-4 py-2 whitespace-nowrap text-sm">
+                        {group.members.length} / {group.maxMembers}
+                      </td>
+                    ))}
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div className="mt-6 flex justify-end space-x-3">
+            <button
+              onClick={onClose}
+              className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors"
+            >
+              Close
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
\ No newline at end of file