diff --git a/src/components/dashboard/AddNewExpense.tsx b/src/components/dashboard/AddNewExpense.tsx
deleted file mode 100644
index db51dcb..0000000
--- a/src/components/dashboard/AddNewExpense.tsx
+++ /dev/null
@@ -1,426 +0,0 @@
-import { useState } from "react";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Slider } from "@/components/ui/slider";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  CalendarIcon,
-  DollarSign,
-  Home,
-  Receipt,
-  ShoppingBag,
-  Utensils,
-  Car,
-  Plane,
-  Film,
-  Wifi,
-} from "lucide-react";
-
-const categories = [
-  { id: "food", name: "Food & Drink", icon: Utensils },
-  { id: "groceries", name: "Groceries", icon: ShoppingBag },
-  { id: "housing", name: "Housing", icon: Home },
-  { id: "transportation", name: "Transportation", icon: Car },
-  { id: "travel", name: "Travel", icon: Plane },
-  { id: "entertainment", name: "Entertainment", icon: Film },
-  { id: "utilities", name: "Utilities", icon: Wifi },
-  { id: "other", name: "Other", icon: Receipt },
-];
-
-const groups = [
-  { id: 1, name: "Roommates" },
-  { id: 2, name: "Trip to Paris" },
-  { id: 3, name: "Dinner Club" },
-  { id: 4, name: "Office Lunch" },
-];
-
-const members = [
-  {
-    id: 1,
-    name: "You",
-    email: "you@example.com",
-    avatar: "/placeholder.svg?height=40&width=40&text=You",
-    initials: "You",
-  },
-  {
-    id: 2,
-    name: "Alex Johnson",
-    email: "alex@example.com",
-    avatar: "/placeholder.svg?height=40&width=40&text=AJ",
-    initials: "AJ",
-  },
-  {
-    id: 3,
-    name: "Sarah Miller",
-    email: "sarah@example.com",
-    avatar: "/placeholder.svg?height=40&width=40&text=SM",
-    initials: "SM",
-  },
-  {
-    id: 4,
-    name: "Mike Wilson",
-    email: "mike@example.com",
-    avatar: "/placeholder.svg?height=40&width=40&text=MW",
-    initials: "MW",
-  },
-];
-
-function AddNewExpense() {
-  const [splitMethod, setSplitMethod] = useState("equal");
-  const [selectedCategory, setSelectedCategory] = useState("food");
-  const [isLoading, setIsLoading] = useState(false);
-  const [customSplits, setCustomSplits] = useState<Record<number, number>>({
-    1: 25,
-    2: 25,
-    3: 25,
-    4: 25,
-  });
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    setIsLoading(true);
-    // Simulate API call
-    setTimeout(() => {
-      setIsLoading(false);
-    }, 1500);
-  };
-
-  const handleSliderChange = (memberId: number, value: number[]) => {
-    const newValue = value[0];
-    const currentTotal = Object.values(customSplits).reduce(
-      (sum, val) => sum + val,
-      0
-    );
-    const currentMemberValue = customSplits[memberId] || 0;
-    const difference = newValue - currentMemberValue;
-
-    if (currentTotal + difference > 100) return;
-
-    setCustomSplits((prev) => ({
-      ...prev,
-      [memberId]: newValue,
-    }));
-
-    // Distribute the remaining percentage
-    const remaining = 100 - (currentTotal + difference);
-    const otherMembers = Object.keys(customSplits)
-      .map(Number)
-      .filter((id) => id !== memberId);
-
-    if (remaining > 0 && otherMembers.length > 0) {
-      const perMember = remaining / otherMembers.length;
-      const newSplits = { ...customSplits, [memberId]: newValue };
-
-      otherMembers.forEach((id) => {
-        newSplits[id] = perMember;
-      });
-
-      setCustomSplits(newSplits);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit} className="animate-in">
-      <Card className="hover:shadow-glow transition-all duration-300">
-        <CardHeader>
-          <CardTitle className="font-display">Expense Details</CardTitle>
-        </CardHeader>
-        <CardContent className="space-y-6">
-          <div className="space-y-2 animate-in">
-            <Label htmlFor="description">Description</Label>
-            <Input
-              id="description"
-              placeholder="What was this expense for?"
-              required
-            />
-          </div>
-
-          <div className="space-y-2 animate-in animate-in-delay-1">
-            <Label htmlFor="amount">Amount</Label>
-            <div className="relative">
-              <DollarSign className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                id="amount"
-                type="number"
-                step="0.01"
-                min="0.01"
-                placeholder="0.00"
-                className="pl-10"
-              />
-            </div>
-          </div>
-
-          <div className="space-y-2 animate-in animate-in-delay-2">
-            <Label htmlFor="date">Date</Label>
-            <div className="relative">
-              <CalendarIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-              <Input
-                id="date"
-                type="date"
-                className="pl-10"
-                defaultValue={new Date().toISOString().split("T")[0]}
-                required
-              />
-            </div>
-          </div>
-
-          <div className="space-y-2 animate-in animate-in-delay-3">
-            <Label htmlFor="group">Group</Label>
-            <Select defaultValue="1">
-              <SelectTrigger id="group" className="glass">
-                <SelectValue placeholder="Select a group" />
-              </SelectTrigger>
-              <SelectContent className="glass">
-                {groups.map((group) => (
-                  <SelectItem key={group.id} value={group.id.toString()}>
-                    {group.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </div>
-
-          <div className="space-y-2 animate-in animate-in-delay-3">
-            <Label>Category</Label>
-            <div className="grid grid-cols-4 gap-2">
-              {categories.map((category) => {
-                const Icon = category.icon;
-                return (
-                  <div
-                    key={category.id}
-                    className={`flex cursor-pointer flex-col items-center justify-center rounded-lg glass transition-all duration-300 p-3 ${
-                      selectedCategory === category.id
-                        ? "border-primary bg-primary/10 shadow-glow"
-                        : "hover:bg-accent/20"
-                    }`}
-                    onClick={() => setSelectedCategory(category.id)}
-                  >
-                    <Icon
-                      className={`mb-1 h-6 w-6 transition-all duration-300 ${
-                        selectedCategory === category.id
-                          ? "text-primary animate-bounce-subtle"
-                          : ""
-                      }`}
-                    />
-                    <span className="text-xs">{category.name}</span>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          <div className="space-y-4">
-            <Label>Split Method</Label>
-            <Tabs
-              value={splitMethod}
-              onValueChange={setSplitMethod}
-              className="w-full"
-            >
-              <TabsList className="grid w-full grid-cols-3 glass">
-                <TabsTrigger
-                  value="equal"
-                  className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300"
-                >
-                  Equal
-                </TabsTrigger>
-                <TabsTrigger
-                  value="custom"
-                  className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300"
-                >
-                  Custom
-                </TabsTrigger>
-                <TabsTrigger
-                  value="percentage"
-                  className="data-[state=active]:bg-primary/20 data-[state=active]:text-primary transition-all duration-300"
-                >
-                  Percentage
-                </TabsTrigger>
-              </TabsList>
-              <TabsContent value="equal" className="mt-4 space-y-4 animate-in">
-                <p className="text-sm text-muted-foreground">
-                  Split equally among all members
-                </p>
-                <div className="space-y-2">
-                  {members.map((member) => (
-                    <div
-                      key={member.id}
-                      className="flex items-center justify-between rounded-lg glass p-3 hover:shadow-glow transition-all duration-300"
-                    >
-                      <div className="flex items-center gap-3">
-                        <Avatar
-                          className="animate-float"
-                          style={{ animationDelay: `${member.id * 0.1}s` }}
-                        >
-                          <AvatarImage src={member.avatar} alt={member.name} />
-                          <AvatarFallback>{member.initials}</AvatarFallback>
-                        </Avatar>
-                        <span>{member.name}</span>
-                      </div>
-                      <span className="font-medium text-gradient">25%</span>
-                    </div>
-                  ))}
-                </div>
-              </TabsContent>
-              <TabsContent value="custom" className="mt-4 space-y-4 animate-in">
-                <p className="text-sm text-muted-foreground">
-                  Enter custom amounts for each person
-                </p>
-                <RadioGroup
-                  defaultValue="you-paid"
-                  className="glass p-4 rounded-lg"
-                >
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="you-paid" id="you-paid" />
-                    <Label htmlFor="you-paid">
-                      You paid, split multiple ways
-                    </Label>
-                  </div>
-                  <div className="flex items-center space-x-2">
-                    <RadioGroupItem value="someone-paid" id="someone-paid" />
-                    <Label htmlFor="someone-paid">Someone else paid</Label>
-                  </div>
-                </RadioGroup>
-                <div className="space-y-2">
-                  {members.map((member) => (
-                    <div
-                      key={member.id}
-                      className="space-y-2 rounded-lg glass p-3 hover:shadow-glow transition-all duration-300"
-                    >
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          <Avatar
-                            className="animate-float"
-                            style={{ animationDelay: `${member.id * 0.1}s` }}
-                          >
-                            <AvatarImage
-                              src={member.avatar}
-                              alt={member.name}
-                            />
-                            <AvatarFallback>{member.initials}</AvatarFallback>
-                          </Avatar>
-                          <span>{member.name}</span>
-                        </div>
-                        <div className="relative">
-                          <DollarSign className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-                          <Input placeholder="0.00" className="w-24 pl-10" />
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </TabsContent>
-              <TabsContent
-                value="percentage"
-                className="mt-4 space-y-4 animate-in"
-              >
-                <p className="text-sm text-muted-foreground">
-                  Adjust percentages for each person
-                </p>
-                <div className="space-y-4">
-                  {members.map((member) => (
-                    <div
-                      key={member.id}
-                      className="space-y-2 rounded-lg glass p-3 hover:shadow-glow transition-all duration-300"
-                    >
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center gap-3">
-                          <Avatar
-                            className="animate-float"
-                            style={{ animationDelay: `${member.id * 0.1}s` }}
-                          >
-                            <AvatarImage
-                              src={member.avatar}
-                              alt={member.name}
-                            />
-                            <AvatarFallback>{member.initials}</AvatarFallback>
-                          </Avatar>
-                          <span>{member.name}</span>
-                        </div>
-                        <span className="font-medium text-gradient">
-                          {customSplits[member.id]}%
-                        </span>
-                      </div>
-                      <Slider
-                        defaultValue={[customSplits[member.id]]}
-                        max={100}
-                        step={1}
-                        onValueChange={(value) =>
-                          handleSliderChange(member.id, value)
-                        }
-                        className="[&>.slider-track]:h-2 [&>.slider-track]:bg-secondary [&>.slider-range]:bg-gradient-to-r [&>.slider-range]:from-primary [&>.slider-range]:to-[#ff4ecd] [&>.slider-thumb]:h-5 [&>.slider-thumb]:w-5 [&>.slider-thumb]:bg-background [&>.slider-thumb]:border-2 [&>.slider-thumb]:border-primary [&>.slider-thumb]:shadow-glow"
-                      />
-                    </div>
-                  ))}
-                </div>
-              </TabsContent>
-            </Tabs>
-          </div>
-
-          <div className="space-y-2">
-            <Label htmlFor="notes">Notes (Optional)</Label>
-            <Textarea id="notes" placeholder="Add any additional details..." />
-          </div>
-        </CardContent>
-        <CardFooter className="flex justify-between">
-          <Button type="button" variant="glass">
-            Cancel
-          </Button>
-          <Button
-            type="submit"
-            variant="gradient"
-            disabled={isLoading}
-            className="min-w-[120px]"
-          >
-            {isLoading ? (
-              <div className="flex items-center gap-2">
-                <svg
-                  className="animate-spin h-4 w-4 text-white"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                >
-                  <circle
-                    className="opacity-25"
-                    cx="12"
-                    cy="12"
-                    r="10"
-                    stroke="currentColor"
-                    strokeWidth="4"
-                  ></circle>
-                  <path
-                    className="opacity-75"
-                    fill="currentColor"
-                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                  ></path>
-                </svg>
-                <span>Saving...</span>
-              </div>
-            ) : (
-              "Save Expense"
-            )}
-          </Button>
-        </CardFooter>
-      </Card>
-    </form>
-  );
-}
-
-export default AddNewExpense;
diff --git a/src/components/dashboard/GroupDetails.tsx b/src/components/dashboard/GroupDetails.tsx
index 46f0bea..09e719d 100644
--- a/src/components/dashboard/GroupDetails.tsx
+++ b/src/components/dashboard/GroupDetails.tsx
@@ -24,36 +24,6 @@ import {
 } from "../ui/breadcrumb";
 
 
-// const groups: Record<string, Group> = {
-//   "1": {
-//     id: 1,
-//     name: "Roommates",
-//     description: "Rent, utilities, and household expenses",
-//     members: [
-//       { id: 1, name: "You", initials: "You" },
-//       { id: 2, name: "Alex Johnson", initials: "AJ" },
-//       { id: 3, name: "Sarah Miller", initials: "SM" },
-//       { id: 4, name: "Mike Wilson", initials: "MW" },
-//     ],
-//     expenses: 12,
-//     balance: 195.0,
-//     youOwe: false,
-//   },
-//   "2": {
-//     id: 2,
-//     name: "Trip to Paris",
-//     description: "Travel expenses for our vacation",
-//     members: [
-//       { id: 1, name: "You", initials: "You" },
-//       { id: 2, name: "Alex Johnson", initials: "AJ" },
-//       { id: 3, name: "Sarah Miller", initials: "SM" },
-//     ],
-//     expenses: 8,
-//     balance: 74.61,
-//     youOwe: true,
-//   },
-// };
-
 function GroupDetails() {
   const { id } = useParams<{ id: string }>();
   const location = useLocation();
diff --git a/src/lib/services/expenseService.ts b/src/lib/services/expenseService.ts
index f5aac3f..dc04ac6 100644
--- a/src/lib/services/expenseService.ts
+++ b/src/lib/services/expenseService.ts
@@ -1,6 +1,41 @@
 import { CreateExpenseFormData } from "../schema";
 import supabase from "../supabase";
+import { initializeDatabase } from "./offlineExpenses";
 
+interface ExpenseParticipant {
+  expense_id: string | number;
+  user_id: string;
+  share_amount: number;
+  percentage?: number;
+  is_settled: boolean;
+  settled_at: string | null;
+}
+
+interface ExpenseData {
+  id?: string | number;
+  name: string;
+  description: string;
+  amount: number;
+  group_id: string;
+  payer_id: string;
+  expense_date: string;
+  split_type: string;
+  is_recurring: boolean;
+  recurring_frequency: string | null;
+  recurring_end_date: string | null;
+  recurring_count: number | null;
+  created_at?: string;
+  participants?: ExpenseParticipant[];
+  is_synced?: boolean;
+  synced_at?: string;
+}
+
+// Check network status
+function isOnline(): boolean {
+  return navigator.onLine;
+}
+
+// Create an expense - handles both online and offline scenarios
 export async function createExpense(
   data: CreateExpenseFormData & {
     splits: {
@@ -12,75 +47,239 @@ export async function createExpense(
   }
 ) {
   try {
-    // Start a Supabase transaction
-    const { data: expenseData, error: expenseError } = await supabase
-      .from("expenses")
-      .insert([
-        {
-          name: data.name,
-          description: data.description || "",
-          amount: Number(data.amount),
-          group_id: data.group_id,
-          payer_id: data.payer_id,
-          expense_date: data.expense_date.toISOString(),
-          split_type: data.split_type,
-          is_recurring: data.is_recurring || false,
-          recurring_frequency: data.recurring_frequency || null,
-          recurring_end_date: data.recurring_end_date
-            ? data.recurring_end_date.toISOString()
-            : null,
-          recurring_count: data.recurring_count || null,
-        },
-      ])
-      .select();
-
-    if (expenseError) {
-      throw expenseError;
+    if (isOnline()) {
+      // Online - create in Supabase directly
+      return await createExpenseOnline(data);
+    } else {
+      // Offline - store in IndexedDB
+      // console.log("Creating expense offline in IndexedDB");
+      return await addExpenseToIndexedDB(data);
     }
-
-    if (!expenseData || expenseData.length === 0) {
-      throw new Error("Failed to create expense: No data returned");
+  } catch (error) {
+    console.error("Error creating expense:", error);
+    // If online creation fails, fallback to IndexedDB
+    if (isOnline()) {
+      // console.log("Online creation failed, falling back to IndexedDB");
+      return await addExpenseToIndexedDB(data);
     }
+    throw error;
+  }
+}
+
+// Create expense online directly in Supabase
+async function createExpenseOnline(
+  data: CreateExpenseFormData & {
+    splits: {
+      [userId: string]: {
+        share_amount: number;
+        percentage?: number;
+      };
+    };
+  }
+) {
+  // Start a Supabase transaction
+  const { data: expenseData, error: expenseError } = await supabase
+    .from("expenses")
+    .insert([
+      {
+        name: data.name,
+        description: data.description || "",
+        amount: Number(data.amount),
+        group_id: data.group_id,
+        payer_id: data.payer_id,
+        expense_date: data.expense_date.toISOString(),
+        split_type: data.split_type,
+        is_recurring: data.is_recurring || false,
+        recurring_frequency: data.recurring_frequency || null,
+        recurring_end_date: data.recurring_end_date
+          ? data.recurring_end_date.toISOString()
+          : null,
+        recurring_count: data.recurring_count || null,
+      },
+    ])
+    .select();
+
+  if (expenseError) {
+    throw expenseError;
+  }
+
+  if (!expenseData || expenseData.length === 0) {
+    throw new Error("Failed to create expense: No data returned");
+  }
+
+  const expenseId = expenseData[0].id;
+
+  // Prepare the expense participants data
+  const participantsData = Object.entries(data.splits).map(
+    ([userId, splitData]) => ({
+      expense_id: expenseId,
+      user_id: userId,
+      share_amount: splitData.share_amount,
+      is_settled: userId === data.payer_id,
+      settled_at: userId === data.payer_id ? new Date().toISOString() : null,
+    })
+  );
+
+  // Insert all participants
+  const { data: participants, error: participantsError } = await supabase
+    .from("expense_participants")
+    .insert(participantsData)
+    .select();
+
+  if (participantsError) {
+    // undo expense creation if participant insertion fails
+    await supabase.from("expenses").delete().eq("id", expenseId);
+    throw participantsError;
+  }
+
+  // Return the combined data
+  return {
+    expense: expenseData[0],
+    participants: participants,
+  };
+}
+
+// Add expense to IndexedDB for offline storage
+export async function addExpenseToIndexedDB(
+  data: CreateExpenseFormData & {
+    splits: {
+      [userId: string]: {
+        share_amount: number;
+        percentage?: number;
+      };
+    };
+  }
+) {
+  const db = await initializeDatabase();
 
-    const expenseId = expenseData[0].id;
-
-    // Prepare the expense participants data
-    const participantsData = Object.entries(data.splits).map(
-      ([userId, splitData]) => ({
-        expense_id: expenseId,
-        user_id: userId,
-        share_amount: splitData.share_amount,
-        is_settled: userId === data.payer_id,
-        settled_at: userId === data.payer_id ? new Date().toISOString() : null, 
-      })
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(
+      ["expenses", "expense_participants"],
+      "readwrite"
     );
 
-    // Insert all participants
-    const { data: participants, error: participantsError } = await supabase
-      .from("expense_participants")
-      .insert(participantsData)
-      .select();
-
-    if (participantsError) {
-      // undo expense creation if participant insertion fails
-      // Manual undo needed as Supabase lacks transaction support
-      await supabase.from("expenses").delete().eq("id", expenseId);
-      throw participantsError;
-    }
+    // Add the expense to the "expenses" object store
+    const expenseStore = transaction.objectStore("expenses");
+    const expenseRequest = expenseStore.add({
+      name: data.name,
+      description: data.description || "",
+      amount: Number(data.amount),
+      group_id: data.group_id,
+      payer_id: data.payer_id,
+      expense_date: data.expense_date.toISOString(),
+      split_type: data.split_type,
+      is_recurring: data.is_recurring || false,
+      recurring_frequency: data.recurring_frequency || null,
+      recurring_end_date: data.recurring_end_date
+        ? data.recurring_end_date.toISOString()
+        : null,
+      recurring_count: data.recurring_count || null,
+      created_at: new Date().toISOString(),
+      is_synced: false, // Flag to indicate if the expense has been synced to the server
+    });
+
+    expenseRequest.onsuccess = (event) => {
+      const expenseId = (event.target as IDBRequest).result;
+
+      // Prepare the expense participants data
+      const participantsData = Object.entries(data.splits).map(
+        ([userId, splitData]) => ({
+          expense_id: expenseId,
+          user_id: userId,
+          share_amount: splitData.share_amount,
+          percentage: splitData.percentage || null,
+          is_settled: userId === data.payer_id,
+          settled_at:
+            userId === data.payer_id ? new Date().toISOString() : null,
+        })
+      );
+
+      // Add participants to the "expense_participants" object store
+      const participantsStore = transaction.objectStore("expense_participants");
 
-    // Return the combined data
-    return {
-      expense: expenseData[0],
-      participants: participants,
+      const participantPromises = participantsData.map((participant) => {
+        return new Promise<void>((resolveParticipant) => {
+          const addRequest = participantsStore.add(participant);
+          addRequest.onsuccess = () => resolveParticipant();
+        });
+      });
+
+      Promise.all(participantPromises).then(() => {
+        // console.log("Expense and participants added successfully to IndexedDB");
+
+        // Update the group's expense count
+        const groupStore = db
+          .transaction("groups", "readwrite")
+          .objectStore("groups");
+        const getGroupRequest = groupStore.get(data.group_id);
+
+        getGroupRequest.onsuccess = () => {
+          const group = getGroupRequest.result;
+
+          if (group) {
+            group.expenses = (group.expenses || 0) + 1;
+            groupStore.put(group);
+          }
+        };
+
+        resolve({
+          expense: {
+            id: expenseId,
+            name: data.name,
+            description: data.description || "",
+            amount: Number(data.amount),
+            group_id: data.group_id,
+            payer_id: data.payer_id,
+            expense_date: data.expense_date.toISOString(),
+            split_type: data.split_type,
+            is_recurring: data.is_recurring || false,
+            recurring_frequency: data.recurring_frequency || null,
+            recurring_end_date: data.recurring_end_date
+              ? data.recurring_end_date.toISOString()
+              : null,
+            recurring_count: data.recurring_count || null,
+            created_at: new Date().toISOString(),
+            is_synced: false,
+          },
+          participants: participantsData,
+        });
+      });
     };
+
+    expenseRequest.onerror = (event) => {
+      console.error("Failed to add expense:", event);
+      reject(event);
+    };
+
+    transaction.onerror = (event) => {
+      console.error("Failed to add expense or participants:", event);
+      reject(event);
+    };
+  });
+}
+
+// Get a single expense with its participants
+export async function getExpenseWithParticipants(expenseId: string | number) {
+  try {
+    if (isOnline()) {
+      // Try online first
+      return await getExpenseWithParticipantsOnline(expenseId.toString());
+    } else {
+      // Fallback to offline
+      return await getExpenseWithParticipantsOffline(expenseId);
+    }
   } catch (error) {
-    console.error("Error creating expense:", error);
+    console.error("Error fetching expense:", error);
+    // If online fetch fails, try offline
+    if (isOnline()) {
+      return await getExpenseWithParticipantsOffline(expenseId);
+    }
     throw error;
   }
 }
 
-// If you need to implement the function to get a single expense with its participants
-export async function getExpenseWithParticipants(expenseId: string) {
+// Get expense with participants from Supabase
+async function getExpenseWithParticipantsOnline(expenseId: string) {
   const { data: expense, error: expenseError } = await supabase
     .from("expenses")
     .select("*")
@@ -105,40 +304,539 @@ export async function getExpenseWithParticipants(expenseId: string) {
     participants: participants,
   };
 }
+
+// Get expense with participants from IndexedDB
+async function getExpenseWithParticipantsOffline(expenseId: string | number) {
+  const db = await initializeDatabase();
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(
+      ["expenses", "expense_participants"],
+      "readonly"
+    );
+
+    const expenseStore = transaction.objectStore("expenses");
+    const expenseRequest = expenseStore.get(expenseId);
+
+    expenseRequest.onsuccess = () => {
+      const expense = expenseRequest.result;
+
+      if (!expense) {
+        reject(new Error(`Expense ${expenseId} not found`));
+        return;
+      }
+
+      const participantsStore = transaction.objectStore("expense_participants");
+      const participantsRequest = participantsStore.getAll();
+
+      participantsRequest.onsuccess = () => {
+        const allParticipants = participantsRequest.result;
+
+        const participants = allParticipants.filter(
+          (participant: ExpenseParticipant) =>
+            participant.expense_id === expenseId
+        );
+
+        resolve({
+          ...expense,
+          participants,
+        });
+      };
+
+      participantsRequest.onerror = (event) => {
+        console.error("Failed to retrieve participants:", event);
+        reject(event);
+      };
+    };
+
+    expenseRequest.onerror = (event) => {
+      console.error(`Failed to retrieve expense ${expenseId}:`, event);
+      reject(event);
+    };
+  });
+}
+
+// Get user expenses
 export async function getUserExpenses(userId: string) {
   try {
-    const { data, error } = await supabase
-      .from("expense_participants")
-      .select(`
-        *,
-        expense:expense_id(*)
-      `)
-      .eq("user_id", userId)
-      .order("created_at", { ascending: false });
-
-    if (error) throw error;
-    return data;
+    if (isOnline()) {
+      // Online - fetch from Supabase
+      return await getUserExpensesOnline(userId);
+    } else {
+      // Offline - fetch from IndexedDB
+      return await getUserExpensesOffline(userId);
+    }
   } catch (error) {
     console.error("Error fetching user expenses:", error);
+    // If online fetch fails, try offline
+    if (isOnline()) {
+      return await getUserExpensesOffline(userId);
+    }
     throw error;
   }
 }
 
+// Get user expenses from Supabase
+async function getUserExpensesOnline(userId: string) {
+  const { data, error } = await supabase
+    .from("expense_participants")
+    .select(
+      `
+      *,
+      expense:expense_id(*)
+    `
+    )
+    .eq("user_id", userId)
+    .order("created_at", { ascending: false });
+
+  if (error) throw error;
+  return data;
+}
+
+// Get user expenses from IndexedDB
+async function getUserExpensesOffline(userId: string) {
+  const db = await initializeDatabase();
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(
+      ["expenses", "expense_participants"],
+      "readonly"
+    );
+
+    const participantsStore = transaction.objectStore("expense_participants");
+    const participantsRequest = participantsStore.getAll();
+
+    participantsRequest.onsuccess = () => {
+      const allParticipants = participantsRequest.result;
+      const userParticipants = allParticipants.filter(
+        (participant: ExpenseParticipant) => participant.user_id === userId
+      );
+
+      if (userParticipants.length === 0) {
+        resolve([]);
+        return;
+      }
+
+      const expenseStore = transaction.objectStore("expenses");
+      const expenseIds = userParticipants.map((p) => p.expense_id);
+      const expenses: {
+        expense: ExpenseData;
+        share_amount: number;
+        percentage?: number;
+        is_settled: boolean;
+        settled_at: string | null;
+      }[] = [];
+      let processed = 0;
+
+      expenseIds.forEach((expenseId) => {
+        const expenseRequest = expenseStore.get(expenseId);
+
+        expenseRequest.onsuccess = () => {
+          const expense = expenseRequest.result;
+          if (expense) {
+            const participant = userParticipants.find(
+              (p) => p.expense_id === expenseId
+            );
+
+            expenses.push({
+              ...participant,
+              expense: expense,
+            });
+          }
+
+          processed++;
+          if (processed === expenseIds.length) {
+            // Sort by created_at in descending order
+            expenses.sort((a, b) => {
+              const dateA = new Date(a.expense.created_at || new Date());
+              const dateB = new Date(b.expense.created_at || new Date());
+              return dateB.getTime() - dateA.getTime();
+            });
+            resolve(expenses);
+          }
+        };
+
+        expenseRequest.onerror = (event) => {
+          console.error(`Failed to retrieve expense ${expenseId}:`, event);
+          processed++;
+          if (processed === expenseIds.length) {
+            resolve(expenses);
+          }
+        };
+      });
+    };
+
+    participantsRequest.onerror = (event) => {
+      console.error("Failed to retrieve participants:", event);
+      reject(event);
+    };
+  });
+}
+
+// Get group expenses
 export async function getGroupExpenses(groupId: string) {
   try {
-    const { data, error } = await supabase
-      .from("expenses")
-      .select(`
-        *,
-        participants:expense_participants(*, user:user_id(*))
-      `)
-      .eq("group_id", groupId)
-      .order("expense_date", { ascending: false });
-
-    if (error) throw error;
-    return data;
+    if (isOnline()) {
+      // Online - fetch from Supabase
+      return await getGroupExpensesOnline(groupId);
+    } else {
+      // Offline - fetch from IndexedDB
+      return await getGroupExpensesFromIndexedDB(groupId);
+    }
   } catch (error) {
     console.error("Error fetching group expenses:", error);
+    // If online fetch fails, try offline
+    if (isOnline()) {
+      return await getGroupExpensesFromIndexedDB(groupId);
+    }
     throw error;
   }
-}
\ No newline at end of file
+}
+
+// Get group expenses from Supabase
+async function getGroupExpensesOnline(groupId: string) {
+  const { data, error } = await supabase
+    .from("expenses")
+    .select(
+      `
+      *,
+      participants:expense_participants(*, user:user_id(*))
+    `
+    )
+    .eq("group_id", groupId)
+    .order("expense_date", { ascending: false });
+
+  if (error) throw error;
+  return data;
+}
+
+// Get group expenses from IndexedDB
+export async function getGroupExpensesFromIndexedDB(
+  groupId: string
+): Promise<ExpenseData[]> {
+  const db = await initializeDatabase();
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(
+      ["expenses", "expense_participants"],
+      "readonly"
+    );
+
+    const expenseStore = transaction.objectStore("expenses");
+    const expenseRequest = expenseStore.getAll();
+
+    expenseRequest.onsuccess = () => {
+      const allExpenses = expenseRequest.result;
+      const groupExpenses = allExpenses.filter(
+        (expense: ExpenseData) => expense.group_id === groupId
+      );
+
+      if (groupExpenses.length === 0) {
+        resolve([]);
+        return;
+      }
+
+      const participantsStore = transaction.objectStore("expense_participants");
+      const participantsRequest = participantsStore.getAll();
+
+      participantsRequest.onsuccess = () => {
+        const participants = participantsRequest.result;
+
+        // Map participants to their respective expenses
+        const expensesWithParticipants = groupExpenses.map(
+          (expense: ExpenseData) => ({
+            ...expense,
+            participants: participants.filter(
+              (participant: ExpenseParticipant) =>
+                participant.expense_id === expense.id
+            ),
+          })
+        );
+
+        // Sort by expense_date in descending order
+        expensesWithParticipants.sort((a, b) => {
+          const dateA = new Date(a.expense_date);
+          const dateB = new Date(b.expense_date);
+          return dateB.getTime() - dateA.getTime();
+        });
+
+        // console.log(
+        //   `Retrieved expenses for group ${groupId} from IndexedDB:`,
+        //   expensesWithParticipants
+        // );
+        resolve(expensesWithParticipants);
+      };
+
+      participantsRequest.onerror = (event) => {
+        console.error("Failed to retrieve participants:", event);
+        reject(event);
+      };
+    };
+
+    expenseRequest.onerror = (event) => {
+      console.error("Failed to retrieve expenses:", event);
+      reject(event);
+    };
+  });
+}
+
+// Function to get unsynchronized expenses for syncing to Supabase
+export async function getUnsyncedExpenses(): Promise<ExpenseData[]> {
+  const db = await initializeDatabase();
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(
+      ["expenses", "expense_participants"],
+      "readonly"
+    );
+
+    const expenseStore = transaction.objectStore("expenses");
+    const expenseRequest = expenseStore.getAll();
+
+    expenseRequest.onsuccess = () => {
+      const allExpenses = expenseRequest.result;
+      const unsyncedExpenses = allExpenses.filter(
+        (expense: ExpenseData & { is_synced: boolean }) =>
+          expense.is_synced === false
+      );
+
+      if (unsyncedExpenses.length === 0) {
+        resolve([]);
+        return;
+      }
+
+      const participantsStore = transaction.objectStore("expense_participants");
+      const participantsRequest = participantsStore.getAll();
+
+      participantsRequest.onsuccess = () => {
+        const participants = participantsRequest.result;
+
+        // Map participants to their respective expenses
+        const expensesWithParticipants = unsyncedExpenses.map(
+          (expense: ExpenseData) => ({
+            ...expense,
+            participants: participants.filter(
+              (participant: ExpenseParticipant) =>
+                participant.expense_id === expense.id
+            ),
+          })
+        );
+
+        // console.log(
+        //   "Retrieved unsynced expenses from IndexedDB:",
+        //   expensesWithParticipants
+        // );
+        resolve(expensesWithParticipants);
+      };
+
+      participantsRequest.onerror = (event) => {
+        console.error("Failed to retrieve participants:", event);
+        reject(event);
+      };
+    };
+
+    expenseRequest.onerror = (event) => {
+      console.error("Failed to retrieve unsynced expenses:", event);
+      reject(event);
+    };
+  });
+}
+
+// Function to mark an expense as synced after uploading to Supabase
+export async function markExpenseAsSynced(
+  localExpenseId: number,
+  serverExpenseId?: string
+): Promise<void> {
+  const db = await initializeDatabase();
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(
+      ["expenses", "expense_participants"],
+      "readwrite"
+    );
+
+    const expenseStore = transaction.objectStore("expenses");
+    const getRequest = expenseStore.get(localExpenseId);
+
+    getRequest.onsuccess = () => {
+      const expense = getRequest.result;
+
+      if (expense) {
+        expense.is_synced = true;
+        expense.synced_at = new Date().toISOString();
+
+        // Update with server ID if provided
+        if (serverExpenseId) {
+          expense.server_id = serverExpenseId;
+        }
+
+        const updateRequest = expenseStore.put(expense);
+
+        updateRequest.onsuccess = () => {
+          // If we have a server ID, we also need to update all participants
+          if (serverExpenseId) {
+            const participantsStore = transaction.objectStore(
+              "expense_participants"
+            );
+            const participantsRequest = participantsStore.getAll();
+
+            participantsRequest.onsuccess = () => {
+              const allParticipants = participantsRequest.result;
+              const expenseParticipants = allParticipants.filter(
+                (p: ExpenseParticipant) => p.expense_id === localExpenseId
+              );
+
+              // Update each participant with the server expense ID
+              const updatePromises = expenseParticipants.map((participant) => {
+                return new Promise<void>((resolveUpdate) => {
+                  participant.server_expense_id = serverExpenseId;
+                  const updateRequest = participantsStore.put(participant);
+                  updateRequest.onsuccess = () => resolveUpdate();
+                });
+              });
+
+              Promise.all(updatePromises).then(() => {
+                // console.log(
+                //   `Expense ${localExpenseId} marked as synced with server ID ${serverExpenseId}`
+                // );
+                resolve();
+              });
+            };
+          } else {
+            // console.log(`Expense ${localExpenseId} marked as synced`);
+            resolve();
+          }
+        };
+
+        updateRequest.onerror = (event) => {
+          console.error(
+            `Failed to mark expense ${localExpenseId} as synced:`,
+            event
+          );
+          reject(event);
+        };
+      } else {
+        console.error(`Expense ${localExpenseId} not found`);
+        reject(new Error(`Expense ${localExpenseId} not found`));
+      }
+    };
+
+    getRequest.onerror = (event) => {
+      console.error(`Failed to retrieve expense ${localExpenseId}:`, event);
+      reject(event);
+    };
+  });
+}
+
+// Function to sync all unsynced expenses to Supabase
+export async function syncUnsyncedExpenses() {
+  try {
+    if (!isOnline()) {
+      // console.log("Cannot sync expenses while offline");
+      return { synced: 0, failed: 0 };
+    }
+
+    const unsyncedExpenses = await getUnsyncedExpenses();
+
+    if (unsyncedExpenses.length === 0) {
+      console.log("No unsynced expenses to sync");
+      return { synced: 0, failed: 0 };
+    }
+
+    console.log(`Syncing ${unsyncedExpenses.length} unsynced expenses`);
+
+    let syncedCount = 0;
+    let failedCount = 0;
+
+    for (const expense of unsyncedExpenses) {
+      try {
+        // Format data for Supabase
+        const expenseData = {
+          name: expense.name,
+          description: expense.description || "",
+          amount: Number(expense.amount),
+          group_id: expense.group_id,
+          payer_id: expense.payer_id,
+          expense_date: expense.expense_date,
+          split_type: expense.split_type,
+          is_recurring: expense.is_recurring || false,
+          recurring_frequency: expense.recurring_frequency || null,
+          recurring_end_date: expense.recurring_end_date || null,
+          recurring_count: expense.recurring_count || null,
+          created_at: expense.created_at || new Date().toISOString(),
+        };
+
+        // Insert expense into Supabase
+        const { data: createdExpense, error: expenseError } = await supabase
+          .from("expenses")
+          .insert([expenseData])
+          .select();
+
+        if (expenseError) {
+          console.error("Error syncing expense:", expenseError);
+          failedCount++;
+          continue;
+        }
+
+        if (!createdExpense || createdExpense.length === 0) {
+          console.error("Failed to create expense: No data returned");
+          failedCount++;
+          continue;
+        }
+
+        const serverExpenseId = createdExpense[0].id;
+
+        // Format and insert participants
+        if (expense.participants && expense.participants.length > 0) {
+          const participantsData = expense.participants.map((p) => ({
+            expense_id: serverExpenseId,
+            user_id: p.user_id,
+            share_amount: p.share_amount,
+            is_settled: p.is_settled,
+            settled_at: p.settled_at,
+          }));
+
+          const { error: participantsError } = await supabase
+            .from("expense_participants")
+            .insert(participantsData);
+
+          if (participantsError) {
+            console.error("Error syncing participants:", participantsError);
+            // Clean up the expense if participant sync fails
+            await supabase.from("expenses").delete().eq("id", serverExpenseId);
+            failedCount++;
+            continue;
+          }
+        }
+
+        // Mark expense as synced in IndexedDB
+        await markExpenseAsSynced(expense.id as number, serverExpenseId);
+        syncedCount++;
+      } catch (error) {
+        console.error(`Failed to sync expense ${expense.id}:`, error);
+        failedCount++;
+      }
+    }
+
+    console.log(`Synced ${syncedCount} expenses, ${failedCount} failed`);
+    return { synced: syncedCount, failed: failedCount };
+  } catch (error) {
+    console.error("Error in syncUnsyncedExpenses:", error);
+    throw error;
+  }
+}
+
+// Event listener to trigger sync when back online
+export function setupSyncEventListeners() {
+  window.addEventListener("online", async () => {
+    console.log("Back online, syncing expenses...");
+    try {
+      const result = await syncUnsyncedExpenses();
+      console.log(
+        `Sync complete: ${result.synced} synced, ${result.failed} failed`
+      );
+    } catch (error) {
+      console.error("Error during automatic sync:", error);
+    }
+  });
+}
diff --git a/src/lib/services/groups/groupService.ts b/src/lib/services/groups/groupService.ts
index 43d4f55..6138f32 100644
--- a/src/lib/services/groups/groupService.ts
+++ b/src/lib/services/groups/groupService.ts
@@ -1,80 +1,202 @@
 import { Group } from "@/types";
 import supabase from "../../supabase";
+import {
+  addGroupData,
+  getGroupByIdFromIndexedDB,
+  getGroupMembersFromIndexedDB,
+  GroupMember,
+} from "@/lib/services/offlineExpenses";
+
 export async function getGroupById(groupId: string) {
-  const { data, error: groupError } = await supabase
-    .from("groups")
-    .select(
+  try {
+    // First check if online - use navigator.onLine check
+    const isOnline = navigator.onLine;
+
+    // If offline, try to get from IndexedDB first
+    if (!isOnline) {
+      const offlineGroup = await getGroupByIdFromIndexedDB(groupId);
+      if (offlineGroup) {
+        console.log("Retrieved group from offline storage:", offlineGroup);
+        return offlineGroup;
+      }
+      throw new Error("Group not found in offline storage and you are offline");
+    }
+
+    // If online, fetch from Supabase and store in IndexedDB for offline use
+    const { data, error: groupError } = await supabase
+      .from("groups")
+      .select(
+        `
+        id,
+        name,
+        description,
+        creator_id
       `
-    id,
-    name,
-    description,
-    creator_id,
-    group_members ( user_id )
-  `
-    )
-    .eq("id", groupId)
-    .single();
-  if (groupError) {
-    throw groupError;
-  }
-  const { data: membersData, error: membersError } = await supabase
-    .from("group_members")
-    .select(
+      )
+      .eq("id", groupId)
+      .single();
+
+    if (groupError) throw groupError;
+
+    const { data: membersData, error: membersError } = await supabase
+      .from("group_members")
+      .select(
+        `
+        user_id,
+        profiles ( id, full_name, email, avatar_url )
       `
-      user_id,
-      profiles ( id, full_name )
-    `
-    )
-    .eq("group_id", groupId);
-
-  if (membersError) {
-    throw membersError;
-  }
+      )
+      .eq("group_id", groupId);
+
+    if (membersError) throw membersError;
+
+    console.log("Raw member data from Supabase:", membersData);
+
+    // Process members data ensuring all required fields are present
+    const members = membersData.map((member) => ({
+      id: String(member.profiles.id),
+      name: member.profiles.full_name,
+      email: member.profiles.email || "",
+      avatar_url: member.profiles.avatar_url || "",
+      initials: member.profiles.full_name
+        .split(" ")
+        .map((word) => word[0])
+        .join("")
+        .toUpperCase(),
+    }));
+
+    // Format members data for IndexedDB storage
+    const groupMembers: GroupMember[] = members.map((member) => ({
+      user_id: member.id,
+      name: member.name,
+      email: member.email || "",
+      avatar_url: member.avatar_url || "",
+      initials: member.initials,
+    }));
+
+    // Get expense count for this group
+    const { count: expenseCount, error: expenseError } = await supabase
+      .from("expenses")
+      .select("*", { count: "exact", head: true })
+      .eq("group_id", groupId);
+    if (expenseError) throw expenseError;
+    const group: Group = {
+      id: data.id,
+      name: data.name,
+      description: data.description ?? "",
+      members,
+      expenses: expenseCount || 0,
+      balance: 0,
+      youOwe: false,
+      settled: false,
+    };
+
+    // Store complete group data in IndexedDB
+    console.log("Storing group with members:", group);
+    console.log("Members data for storage:", groupMembers);
+
+    await addGroupData({
+      id: group.id,
+      name: group.name,
+      description: group.description,
+      members: [],
+      group_members: groupMembers,
+      expenses: group.expenses,
+      balance: group.balance,
+      youOwe: group.youOwe,
+      settled: group.settled,
+    });
+
+    return group;
+  } catch (error) {
+    console.error("Error fetching group:", error);
 
-  const members = membersData.map((member) => ({
-    id: String(member.profiles.id),
-    name: member.profiles.full_name,
-    initials: member.profiles.full_name
-      .split(" ")
-      .map((word) => word[0])
-      .join("")
-      .toUpperCase(),
-  }));
-  if (membersError) {
-    throw membersError;
+    // Fallback to IndexedDB if Supabase fails
+    try {
+      const offlineGroup = await getGroupByIdFromIndexedDB(groupId);
+
+      if (!offlineGroup) {
+        throw new Error("Group not found in offline storage");
+      }
+
+      return offlineGroup;
+    } catch (dbError) {
+      console.error("Error retrieving from IndexedDB:", dbError);
+      throw new Error(
+        `Failed to get group: ${error}. IndexedDB error: ${dbError}`
+      );
+    }
   }
-  const group: Group = {
-    ...data,
-    description: data.description ?? "",
-    members,
-    expenses: 0,
-    balance: 0,
-    youOwe: false,
-    settled: false,
-  };
-  return group;
 }
+
 export async function getGroupMembersByGroupId(groupId: string) {
-  const { data, error: countError } = await supabase
-    .from("group_members")
-    .select(
-      `
-        user_id,
-        profiles ( full_name, email, avatar_url ),
-        groups!inner ( creator_id )
-      `
-    )
-    .eq("group_id", groupId);
-  if (countError) {
-    throw countError;
+  try {
+    // First check if online
+    const isOnline = navigator.onLine;
+
+    // If offline, try to get from IndexedDB
+    if (!isOnline) {
+      const members = await getGroupMembersFromIndexedDB(groupId);
+      if (members && members.length > 0) {
+        return members.map((member) => ({
+          id: member.user_id,
+          name: member.name,
+          email: member.email || "",
+          avatar_url: member.avatar_url || "",
+        }));
+      }
+      throw new Error(
+        "Group members not found in offline storage and you are offline"
+      );
+    }
+
+    // If online, fetch from Supabase
+    const { data, error: countError } = await supabase
+      .from("group_members")
+      .select(
+        `
+          user_id,
+          profiles ( full_name, email, avatar_url ),
+          groups!inner ( creator_id )
+        `
+      )
+      .eq("group_id", groupId);
+
+    if (countError) {
+      throw countError;
+    }
+
+    const group_members = data.map((item) => {
+      return {
+        id: item.user_id,
+        name: item.profiles.full_name,
+        email: item.profiles.email,
+        avatar_url: item.profiles.avatar_url,
+      };
+    });
+
+    return group_members;
+  } catch (error) {
+    console.error("Error fetching group members:", error);
+
+    // Fallback to IndexedDB
+    const members = await getGroupMembersFromIndexedDB(groupId);
+
+    if (!members || members.length === 0) {
+      throw new Error("Group members not found in offline storage");
+    }
+
+    return members.map((member) => ({
+      id: member.user_id,
+      name: member.name,
+      email: member.email || "",
+      avatar_url: member.avatar_url || "",
+    }));
   }
-  const group_members = data.map((item) => {
-    return {
-      id: item.user_id,
-      name: item.profiles.full_name,
-      email: item.profiles.email,
-      avatar_url: item.profiles.avatar_url,
-    };
-  });
-  return group_members;
+}
+
+// Function to sync offline expenses to Supabase when online
+export async function syncOfflineExpensesToSupabase() {
+  // This function will be implemented separately
+  // It should use getUnsyncedExpenses and markExpenseAsSynced
 }
diff --git a/src/lib/services/offlineExpenses.ts b/src/lib/services/offlineExpenses.ts
new file mode 100644
index 0000000..a38e627
--- /dev/null
+++ b/src/lib/services/offlineExpenses.ts
@@ -0,0 +1,503 @@
+
+import { Group } from "@/types";
+
+export type GroupMember = {
+  user_id: string;
+  name: string;
+  email: string;
+  initials: string;
+  avatar_url?: string;
+};
+
+export async function initializeDatabase(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = window.indexedDB.open("Splitwise Database", 1);
+
+    request.onerror = (event: Event) => {
+      const target = event.target as IDBOpenDBRequest;
+      console.error("Please allow us to create our DB", target.error);
+      reject(target.error);
+    };
+
+    request.onsuccess = (event: Event) => {
+      const target = event.target as IDBOpenDBRequest;
+      if (target) {
+        const db = target.result;
+        // console.log("Database initialized:", db);
+        resolve(db);
+      }
+    };
+
+    request.onupgradeneeded = (event: IDBVersionChangeEvent) => {
+      const target = event.target as IDBOpenDBRequest;
+      if (target) {
+        const db = target.result;
+        // console.log("Upgrading database...");
+
+        // Create object stores if they don't exist
+        if (!db.objectStoreNames.contains("expenses")) {
+          db.createObjectStore("expenses", {
+            keyPath: "id",
+            autoIncrement: true,
+          });
+        }
+        if (!db.objectStoreNames.contains("groups")) {
+          const groupStore = db.createObjectStore("groups", {
+            keyPath: "id",
+          });
+          // Add indices to improve query performance
+          groupStore.createIndex("id", "id", { unique: true });
+        }
+        if (!db.objectStoreNames.contains("group_members")) {
+          const membersStore = db.createObjectStore("group_members", {
+            keyPath: "id",
+            autoIncrement: true,
+          });
+          // Add indices to improve query performance
+          membersStore.createIndex("group_id", "group_id", { unique: false });
+          membersStore.createIndex("user_id", "user_id", { unique: false });
+          membersStore.createIndex("group_user", ["group_id", "user_id"], {
+            unique: true,
+          });
+        }
+        if (!db.objectStoreNames.contains("expense_participants")) {
+          const participantsStore = db.createObjectStore(
+            "expense_participants",
+            {
+              keyPath: "id",
+              autoIncrement: true,
+            }
+          );
+          // Add indices to improve query performance
+          participantsStore.createIndex("expense_id", "expense_id", {
+            unique: false,
+          });
+        }
+      }
+    };
+  });
+}
+
+// Updated function to fix the storage of group members
+// Updated function to add group members without deleting other groups' members
+export async function addGroupData(
+  group: Group & {
+    group_members: GroupMember[];
+  }
+) {
+  const db = await initializeDatabase();
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(
+      ["groups", "group_members"],
+      "readwrite"
+    );
+
+    const groupStore = transaction.objectStore("groups");
+    const membersStore = transaction.objectStore("group_members");
+    
+    // console.log("Adding group with members:", group);
+    // console.log("Group members to store:", group.group_members);
+    
+    // Add or update the group in the "groups" object store
+    const groupRequest = groupStore.put({
+      id: group.id,
+      name: group.name,
+      description: group.description,
+      expenses: group.expenses,
+      balance: group.balance,
+      youOwe: group.youOwe,
+      settled: group.settled,
+      updated_at: new Date().toISOString(), // Add timestamp for sync purposes
+    });
+
+    groupRequest.onsuccess = () => {
+      // Only delete members associated with THIS group
+      const memberIndex = membersStore.index("group_id");
+      const membersRequest = memberIndex.getAll(group.id);
+      
+      membersRequest.onsuccess = () => {
+        const existingMembers = membersRequest.result;
+        
+        // If there are existing members for this group, delete them
+        if (existingMembers && existingMembers.length > 0) {
+          const deleteRequests = existingMembers.map((member: { id: number; group_id: string; user_id: string }) => {
+            return new Promise<void>((resolveDelete, rejectDelete) => {
+              const deleteRequest = membersStore.delete(member.id);
+              deleteRequest.onsuccess = () => resolveDelete();
+              deleteRequest.onerror = (event) => {
+                console.error("Error deleting member:", event);
+                rejectDelete(event);
+              };
+            });
+          });
+          
+          Promise.all(deleteRequests)
+            .then(() => addNewMembers())
+            .catch((error) => {
+              console.error("Error deleting existing members:", error);
+              reject(error);
+            });
+        } else {
+          // No existing members for this group, just add the new ones
+          addNewMembers();
+        }
+      };
+      
+      membersRequest.onerror = (event) => {
+        console.error("Error getting existing members:", event);
+        reject(event);
+      };
+      
+      // Function to add new members
+      const addNewMembers = () => {
+        if (!group.group_members || group.group_members.length === 0) {
+          // console.log("No members to add for group:", group.id);
+          resolve(group.id);
+          return;
+        }
+        
+        // console.log(`Adding ${group.group_members.length} members for group ${group.id}`);
+        
+        // Array to track completion of all member additions
+        const memberPromises: Promise<void>[] = [];
+        
+        // Add each member with explicit error handling
+        group.group_members.forEach((member) => {
+          const memberPromise = new Promise<void>((resolveMember, rejectMember) => {
+            try {
+              // Create a complete member record
+              const memberRecord = {
+                group_id: group.id,
+                user_id: member.user_id,
+                name: member.name || "",
+                email: member.email || "",
+                initials: member.initials || "",
+                avatar_url: member.avatar_url || "",
+              };
+              
+              // console.log("Adding member record:", memberRecord);
+              
+              const addRequest = membersStore.add(memberRecord);
+              
+              addRequest.onsuccess = () => {
+                // console.log(`Successfully added member ${member.user_id} to group ${group.id}`);
+                resolveMember();
+              };
+              
+              addRequest.onerror = (event) => {
+                console.error(`Error adding member ${member.user_id}:`, event);
+                rejectMember(event);
+              };
+            } catch (error) {
+              console.error("Exception while adding member:", error);
+              rejectMember(error);
+            }
+          });
+          
+          memberPromises.push(memberPromise);
+        });
+        
+        // Wait for all member additions to complete
+        Promise.all(memberPromises)
+          .then(() => {
+            // console.log(`Successfully added all ${group.group_members.length} members to group ${group.id}`);
+            resolve(group.id);
+          })
+          .catch((error) => {
+            console.error("Error adding members:", error);
+            reject(error);
+          });
+      };
+    };
+
+    groupRequest.onerror = (event) => {
+      console.error("Failed to add/update group data:", event);
+      reject(event);
+    };
+    
+    transaction.onerror = (event) => {
+      console.error("Transaction failed:", event);
+      reject(event);
+    };
+  });
+}
+
+// Function to retrieve all group members across all groups
+export async function getAllGroupMembers(): Promise<{[groupId: string]: GroupMember[]}> {
+  const db = await initializeDatabase();
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["group_members"], "readonly");
+    const membersStore = transaction.objectStore("group_members");
+    const membersRequest = membersStore.getAll();
+    
+    membersRequest.onsuccess = () => {
+      const allMembers = membersRequest.result;
+      
+      // Group members by group_id
+      const membersByGroup: {[groupId: string]: GroupMember[]} = {};
+      
+      allMembers.forEach((member: GroupMember & { group_id: string }) => {
+        if (!membersByGroup[member.group_id]) {
+          membersByGroup[member.group_id] = [];
+        }
+        membersByGroup[member.group_id].push({
+          user_id: member.user_id,
+          name: member.name,
+          email: member.email,
+          initials: member.initials,
+          avatar_url: member.avatar_url
+        });
+      });
+      
+      // console.log("Retrieved all group members:", membersByGroup);
+      resolve(membersByGroup);
+    };
+    
+    membersRequest.onerror = (event) => {
+      console.error("Failed to retrieve all group members:", event);
+      reject(event);
+    };
+  });
+}
+
+// Function to get members of all groups the user belongs to
+export async function getAllMyGroupMembers(userId: string): Promise<{[groupId: string]: GroupMember[]}> {
+  const db = await initializeDatabase();
+  
+  return new Promise((resolve, reject) => {
+    // First, get all groups the user belongs to
+    const transaction = db.transaction(["group_members"], "readonly");
+    const membersStore = transaction.objectStore("group_members");
+    const userIndex = membersStore.index("user_id");
+    const userGroupsRequest = userIndex.getAll(userId);
+    
+    userGroupsRequest.onsuccess = () => {
+      const userGroups = userGroupsRequest.result;
+      const groupIds = userGroups.map((group: { group_id: string }) => group.group_id);
+      
+      if (groupIds.length === 0) {
+        resolve({});
+        return;
+      }
+      
+      // Now get all members for these groups
+      const membersByGroup: {[groupId: string]: GroupMember[]} = {};
+      let completedGroups = 0;
+      
+      groupIds.forEach(groupId => {
+        const groupIndex = membersStore.index("group_id");
+        const groupMembersRequest = groupIndex.getAll(groupId);
+        
+        groupMembersRequest.onsuccess = () => {
+          const groupMembers = groupMembersRequest.result;
+          membersByGroup[groupId] = groupMembers.map((member: { user_id: string; name: string; email: string; initials: string; avatar_url?: string }) => ({
+            user_id: member.user_id,
+            name: member.name,
+            email: member.email,
+            initials: member.initials,
+            avatar_url: member.avatar_url
+          }));
+          
+          completedGroups++;
+          if (completedGroups === groupIds.length) {
+            // console.log("Retrieved all members for user's groups:", membersByGroup);
+            resolve(membersByGroup);
+          }
+        };
+        
+        groupMembersRequest.onerror = (event) => {
+          console.error(`Failed to retrieve members for group ${groupId}:`, event);
+          reject(event);
+        };
+      });
+    };
+    
+    userGroupsRequest.onerror = (event) => {
+      console.error(`Failed to retrieve groups for user ${userId}:`, event);
+      reject(event);
+    };
+  });
+}
+
+// Function to get members of a specific group
+export async function getGroupMembersFromIndexedDB(groupId: string): Promise<GroupMember[]> {
+  const db = await initializeDatabase();
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["group_members"], "readonly");
+    const membersStore = transaction.objectStore("group_members");
+    const memberIndex = membersStore.index("group_id");
+    const membersRequest = memberIndex.getAll(groupId);
+    
+    membersRequest.onsuccess = () => {
+      const members = membersRequest.result.map((member: { user_id: string; name: string; email: string; initials: string; avatar_url?: string }) => ({
+        user_id: member.user_id,
+        name: member.name,
+        email: member.email,
+        initials: member.initials,
+        avatar_url: member.avatar_url
+      }));
+      
+      // console.log(`Retrieved ${members.length} members for group ${groupId}:`, members);
+      resolve(members);
+    };
+    
+    membersRequest.onerror = (event) => {
+      console.error(`Failed to retrieve members for group ${groupId}:`, event);
+      reject(event);
+    };
+  });
+}
+
+// Helper function to verify group members exist in IndexedDB
+export async function verifyGroupMembersInDB(groupId: string): Promise<GroupMember[]> {
+  const db = await initializeDatabase();
+  
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["group_members"], "readonly");
+    const membersStore = transaction.objectStore("group_members");
+    const memberIndex = membersStore.index("group_id");
+    const membersRequest = memberIndex.getAll(groupId);
+    
+    membersRequest.onsuccess = () => {
+      const members = membersRequest.result;
+      // console.log(`Found ${members.length} members for group ${groupId} in IndexedDB:`, members);
+      resolve(members);
+    };
+    
+    membersRequest.onerror = (event) => {
+      // console.error(`Failed to verify members for group ${groupId}:`, event);
+      reject(event);
+    };
+  });
+}
+
+// Function to retrieve a specific group with its members
+export async function getGroupByIdFromIndexedDB(
+  groupId: string
+): Promise<Group | null> {
+  const db = await initializeDatabase();
+
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["groups", "group_members"], "readonly");
+    const groupStore = transaction.objectStore("groups");
+    const groupRequest = groupStore.get(groupId);
+
+    groupRequest.onsuccess = () => {
+      const group = groupRequest.result;
+
+      if (!group) {
+        resolve(null);
+        return;
+      }
+
+      const membersStore = transaction.objectStore("group_members");
+      const memberIndex = membersStore.index("group_id");
+      const membersRequest = memberIndex.getAll(groupId);
+
+      membersRequest.onsuccess = () => {
+        const members = membersRequest.result.map(
+          (member: {
+            user_id: string;
+            name: string;
+            initials: string;
+            email: string;
+            avatar_url?: string;
+          }) => ({
+            id: member.user_id,
+            name: member.name,
+            initials: member.initials,
+            email: member.email,
+            avatar_url: member.avatar_url,
+          })
+        );
+
+        resolve({
+          ...group,
+          members,
+        });
+      };
+
+      membersRequest.onerror = (event) => {
+        console.error("Failed to retrieve group members:", event);
+        reject(event);
+      };
+    };
+
+    groupRequest.onerror = (event) => {
+      console.error("Failed to retrieve group:", event);
+      reject(event);
+    };
+  });
+}
+
+// Function to retrieve all group data along with their members
+export async function getAllGroupsWithMembers() {
+  const db = await initializeDatabase();
+  return new Promise((resolve, reject) => {
+    const transaction = db.transaction(["groups", "group_members"], "readonly");
+
+    const groupStore = transaction.objectStore("groups");
+    const groupRequest = groupStore.getAll();
+
+    groupRequest.onsuccess = async () => {
+      const groups = groupRequest.result;
+      if (!groups || groups.length === 0) {
+        resolve([]);
+        return;
+      }
+
+      try {
+        const groupsWithMembers = await Promise.all(
+          groups.map(async (group) => {
+            return new Promise((resolveGroup, rejectGroup) => {
+              const membersStore = transaction.objectStore("group_members");
+              const memberIndex = membersStore.index("group_id");
+              const membersRequest = memberIndex.getAll(group.id);
+
+              membersRequest.onsuccess = () => {
+                const members = membersRequest.result;
+                resolveGroup({
+                  ...group,
+                  group_members: members,
+                  members: members.map(
+                    (member: {
+                      user_id: string;
+                      name: string;
+                      initials: string;
+                    }) => ({
+                      id: member.user_id,
+                      name: member.name,
+                      initials: member.initials,
+                    })
+                  ),
+                });
+              };
+
+              membersRequest.onerror = (event) => {
+                console.error(
+                  `Failed to retrieve members for group ${group.id}:`,
+                  event
+                );
+                rejectGroup(event);
+              };
+            });
+          })
+        );
+
+        // console.log("Retrieved groups with members:", groupsWithMembers);
+        resolve(groupsWithMembers);
+      } catch (error) {
+        // console.error("Error processing groups with members:", error);
+        reject(error);
+      }
+    };
+
+    groupRequest.onerror = (event) => {
+      // console.error("Failed to retrieve groups:", event);
+      reject(event);
+    };
+  });
+}
+
diff --git a/src/lib/services/userService.ts b/src/lib/services/userService.ts
index 22f6186..52d6e10 100644
--- a/src/lib/services/userService.ts
+++ b/src/lib/services/userService.ts
@@ -1,59 +1,156 @@
 import type { GroupData } from "@/types";
 import type { CreateGroupFormData } from "../schema";
 import supabase from "../supabase";
+import {
+  addGroupData,
+  getAllGroupsWithMembers,
+  GroupMember,
+} from "@/lib/services/offlineExpenses";
+
 export async function getGroupsForUser(userId: string) {
-	const { data, error } = await supabase
-		.from("group_members")
-		.select(
-			`
-    group_id,
-    groups ( id, name, description, creator_id )
-    `,
-		)
-		.eq("user_id", userId);
-	const rawGroups =
-		(data
-			?.map((item) => item.groups)
-			.filter((group) => group !== null) as unknown as GroupData[]) || [];
-	for (const group of rawGroups) {
-		const { count, error: countError } = await supabase
-			.from("group_members")
-			.select("*", { count: "exact", head: true })
-			.eq("group_id", group.id);
-
-		const { count: expenseCount, error: expenseError } = await supabase
-			.from("expenses")
-			.select("*", { count: "exact", head: true })
-			.eq("group_id", group.id);
-		console.log("count", expenseCount);
-		if (countError || expenseError) {
-			console.error(
-				`Error fetching member count for group ${group.id}:`,
-				countError || expenseError,
-			);
-			group.expenseCount = 0;
-			group.memberCount = 0;
-		} else {
-			group.expenseCount = expenseCount || 0;
-			group.memberCount = count || 0;
-		}
-	}
 
-	if (error) {
-		throw error;
-	}
-	return (
-		rawGroups.map((group) => ({
-			id: group.id,
-			name: group.name,
-			description: group.description || "",
-			expenseCount: group.expenseCount || 0,
-			balance: group.balance || { amount: 0, isOwed: false },
-			memberCount: group.memberCount || 0,
-			members: [],
-		})) || []
-	);
+  try {
+    // Fetch groups from Supabase
+    const { data, error } = await supabase
+      .from("group_members")
+      .select(
+        `
+        group_id,
+        groups ( id, name, description, creator_id )
+        `
+      )
+      .eq("user_id", userId);
+
+    if (error) throw error;
+
+    const rawGroups =
+      (data
+        ?.map((item) => item.groups)
+        .filter((group) => group !== null) as unknown as GroupData[]) || [];
+
+    // Fetch additional group details and members
+    for (const group of rawGroups) {
+      const { count, error: countError } = await supabase
+        .from("group_members")
+        .select("*", { count: "exact", head: true })
+        .eq("group_id", group.id);
+
+      const { count: expenseCount, error: expenseError } = await supabase
+        .from("expenses")
+        .select("*", { count: "exact", head: true })
+        .eq("group_id", group.id);
+
+      if (countError || expenseError) {
+        console.error(
+          `Error fetching counts for group ${group.id}:`,
+          countError || expenseError
+        );
+        group.expenseCount = 0;
+        group.memberCount = 0;
+      } else {
+        group.expenseCount = expenseCount || 0;
+        group.memberCount = count || 0;
+      }
+
+      // Fetch members for this group
+      const { data: membersData, error: membersError } = await supabase
+        .from("group_members")
+        .select(
+          `
+          user_id,
+          profiles ( id, full_name, email, avatar_url )
+          `
+        )
+        .eq("group_id", group.id);
+
+      if (membersError) {
+        console.error(
+          `Error fetching members for group ${group.id}:`,
+          membersError
+        );
+        continue;
+      }
+
+      // Process members data
+      const groupMembers: GroupMember[] = membersData.map((member) => ({
+        user_id: member.profiles.id,
+        name: member.profiles.full_name,
+        email: member.profiles.email || "",
+        avatar_url: member.profiles.avatar_url || "",
+        initials: member.profiles.full_name
+          .split(" ")
+          .map((word) => word[0])
+          .join("")
+          .toUpperCase(),
+      }));
+
+      // Store group data in IndexedDB
+      await addGroupData({
+        id: group.id,
+        name: group.name,
+        description: group.description || "",
+        members: [], // Will be populated from group_members
+        group_members: groupMembers,
+        expenses: group.expenseCount || 0,
+        balance: 0,
+        youOwe: false,
+        settled: false,
+      });
+    }
+
+    return (
+      rawGroups.map((group) => ({
+        id: group.id,
+        name: group.name,
+        description: group.description || "",
+        expenseCount: group.expenseCount || 0,
+        balance: group.balance || { amount: 0, isOwed: false },
+        memberCount: group.memberCount || 0,
+        members: [],
+      })) || []
+    );
+  } catch (error) {
+    console.error("Error fetching groups from Supabase:", error);
+
+    // Fallback to IndexedDB if Supabase fails
+    const offlineGroups = (await getAllGroupsWithMembers()) as OfflineGroup[];
+    interface GroupBalance {
+      amount: number;
+      isOwed: boolean;
+    }
+
+    interface GroupSummary {
+      id: string;
+      name: string;
+      description: string;
+      expenseCount: number;
+      balance: GroupBalance;
+      memberCount: number;
+      members: GroupMember[];
+    }
+
+    interface OfflineGroup {
+      id: string;
+      name: string;
+      description: string;
+      expenses: number;
+      balance: number;
+      youOwe: boolean;
+      members: GroupMember[];
+    }
+
+        return offlineGroups.map((group: OfflineGroup): GroupSummary => ({
+          id: group.id,
+          name: group.name,
+          description: group.description,
+          expenseCount: group.expenses,
+          balance: { amount: group.balance, isOwed: group.youOwe },
+          memberCount: group.members.length,
+          members: group.members,
+        }));
+  }
 }
+
 export async function getMembersOfMyCreatedGroups(currentUserId: string) {
 	const { data, error } = await supabase
 		.from("group_members")
@@ -200,27 +297,27 @@ export async function createGroup(
 }
 
 export async function fetchBalances(userId: string) {
-	const { data, error } = await supabase.rpc("get_user_balances", {
-		current_user_id: userId,
-	});
+  const { data, error } = await supabase.rpc("get_user_balances", {
+    current_user_id: userId,
+  });
 
-	if (error) {
-		throw error;
-	}
+  if (error) {
+    throw error;
+  }
 
-	return data;
+  return data;
 }
 
 export async function fetchGroupBalances(userId: string) {
-	const { data, error } = await supabase.rpc("get_user_group_balances", {
-		p_current_user_id: userId,
-	});
+  const { data, error } = await supabase.rpc("get_user_group_balances", {
+    p_current_user_id: userId,
+  });
 
-	if (error) {
-		throw error;
-	}
+  if (error) {
+    throw error;
+  }
 
-	return data;
+  return data;
 }
 
 export async function getDashboardCardData(userId: string) {
diff --git a/src/pages/dashboard/DashboardLayout.tsx b/src/pages/dashboard/DashboardLayout.tsx
index 343688d..b2a745e 100644
--- a/src/pages/dashboard/DashboardLayout.tsx
+++ b/src/pages/dashboard/DashboardLayout.tsx
@@ -3,9 +3,52 @@ import { Outlet, useLoaderData } from "react-router";
 import { MobileNav } from "./MobileNav";
 import Navbar from "./Navbar";
 import Sidebar from "./Sidebar";
+import { useEffect, useState } from "react";
+import {
+  setupSyncEventListeners,
+  syncUnsyncedExpenses,
+} from "@/lib/services/expenseService";
+import { toast } from "sonner";
 
 function DashboardLayout() {
-	const data = useLoaderData() as UserData;
+  const data = useLoaderData() as UserData;
+  const [online, setOnline] = useState(isOnline());
+
+  // Check network status
+  function isOnline(): boolean {
+    return navigator.onLine;
+  }
+
+  useEffect(() => {
+    const handleOnlineStatus = () => {
+      setOnline(isOnline());
+    };
+
+    // Add event listeners for network status changes
+    window.addEventListener("online", handleOnlineStatus);
+    window.addEventListener("offline", handleOnlineStatus);
+
+    // Cleanup event listeners on unmount
+    return () => {
+      window.removeEventListener("online", handleOnlineStatus);
+      window.removeEventListener("offline", handleOnlineStatus);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (online) {
+      setupSyncEventListeners();
+      const syncExpenses = async () => {
+        await syncUnsyncedExpenses();
+      };
+
+      toast.promise(syncExpenses(), {
+        loading: "Syncing offline expense...",
+        success: "Expenses synced successfully!",
+        error: (error) => error.message,
+      });
+    }
+  }, [online]);
 
 	return (
 		<div className="bg-background dark:bg-[radial-gradient(circle_at_top_right,#4f32ff26,transparent_90%),radial-gradient(circle_at_bottom_left,#f51d7826,transparent_50%)] text-foreground dark:text-foreground-dark flex overflow-hidden max-h-screen fixed w-full">
diff --git a/src/pages/dashboard/Navbar.tsx b/src/pages/dashboard/Navbar.tsx
index d35cf73..a6187e1 100644
--- a/src/pages/dashboard/Navbar.tsx
+++ b/src/pages/dashboard/Navbar.tsx
@@ -2,12 +2,12 @@ import { type Variants, motion } from "motion/react";
 import "@/App.css";
 import { Button } from "@/components/ui/button";
 import {
-	DropdownMenu,
-	DropdownMenuContent,
-	DropdownMenuItem,
-	DropdownMenuLabel,
-	DropdownMenuSeparator,
-	DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useDarkMode } from "@/hooks/use-darkmode";
 import type { UserData } from "@/types";
@@ -17,22 +17,20 @@ import { Link } from "react-router";
 import { useLogOutHandler } from "@/hooks/use-logout";
 
 function Navbar({ user }: { user: UserData }) {
-	const [isOpenUser, setIsOpenUser] = useState<boolean>(false);
-	const [isOpenTheme, setIsOpenTheme] = useState<boolean>(false);
-	const [, toggleDarkMode] = useDarkMode();
-	const { handleLogOut} = useLogOutHandler()
+  const [isOpenUser, setIsOpenUser] = useState<boolean>(false);
+  const [isOpenTheme, setIsOpenTheme] = useState<boolean>(false);
+  const [, toggleDarkMode] = useDarkMode();
+  const { handleLogOut } = useLogOutHandler();
 
-	const slidevariants: Variants = {
-		hidden: { y: 20, opacity: 0 },
-		visible: { y: 0, opacity: 1 },
-	};
-
-	return (
+  const slidevariants: Variants = {
+    hidden: { y: 20, opacity: 0 },
+    visible: { y: 0, opacity: 1 },
+  };
+  return (
     <div className="flex items-center h-16 md:h-20 px-4 md:px-6 justify-between w-full ">
       <div className="w-full">
         <h2 className="font-bold">
           <Button className="" variant="ghost">
-           
             <span className="text-2xl font-bold hover:text-[#9b48df]/90 transition-all duration-300 ease-in-out">
               SplitWise
             </span>
@@ -81,77 +79,77 @@ function Navbar({ user }: { user: UserData }) {
           </DropdownMenuContent>
         </DropdownMenu>
 
-				<DropdownMenu open={isOpenUser} onOpenChange={setIsOpenUser}>
-					<DropdownMenuTrigger asChild>
-						<Button
-							variant="ghost"
-							className="relative h-8 w-8 rounded-full text-foreground dark:text-foreground-dark hover:bg-accent dark:hover:bg-accent-dark"
-						>
-							<User className="h-5 w-5" />
-						</Button>
-					</DropdownMenuTrigger>
-					<DropdownMenuContent
-						className="w-56 rounded-md border dark:border-border-dark bg-popover dark:bg-popover-dark text-popover-foreground dark:text-popover-foreground-dark shadow-md"
-						align="end"
-						forceMount
-					>
-						<motion.div
-							variants={slidevariants}
-							initial="hidden"
-							animate={isOpenUser ? "visible" : "hidden"}
-							transition={{
-								duration: 0.2,
-								ease: "easeOut",
-							}}
-						>
-							<DropdownMenuLabel className="font-normal">
-								<div className="flex flex-col space-y-1">
-									<p className="text-sm font-medium leading-none">
-										{user.profile.full_name}
-									</p>
-									<p className="text-xs leading-none text-muted-foreground dark:text-muted-foreground-dark">
-										{user.user.email}
-									</p>
-								</div>
-							</DropdownMenuLabel>
-							<DropdownMenuSeparator className="bg-border dark:bg-border-dark" />
-							<DropdownMenuItem
-								asChild
-								className="cursor-pointer hover:bg-accent dark:hover:bg-accent-dark transition-colors duration-200 focus:bg-accent dark:focus:bg-accent-dark"
-							>
-								<Link to="/dashboard/profile" className="flex items-center">
-									<User className="mr-2 h-4 w-4" />
-									<span>Profile</span>
-								</Link>
-							</DropdownMenuItem>
-							<DropdownMenuItem
-								asChild
-								className="cursor-pointer hover:bg-accent dark:hover:bg-accent-dark transition-colors duration-200 focus:bg-accent dark:focus:bg-accent-dark"
-							>
-								<Link to="/dashboard/settings" className="flex items-center">
-									<Settings className="mr-2 h-4 w-4" />
-									<span>Settings</span>
-								</Link>
-							</DropdownMenuItem>
-							<DropdownMenuSeparator className="bg-border dark:bg-border-dark" />
-							<DropdownMenuItem
-								asChild
-								className="cursor-pointer hover:bg-accent dark:hover:bg-accent-dark transition-colors duration-200 focus:bg-accent dark:focus:bg-accent-dark"
-							>
-								<button
-								onClick={()=> handleLogOut()}
-								 className="flex w-full items-center">
-									<LogOut className="mr-2 h-4 w-4" />
-									<span>Log out</span>
-								</button>
-							</DropdownMenuItem>
-						</motion.div>
-					</DropdownMenuContent>
-				</DropdownMenu>
-			</div>
-		</div>
-	);
- 
+        <DropdownMenu open={isOpenUser} onOpenChange={setIsOpenUser}>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              className="relative h-8 w-8 rounded-full text-foreground dark:text-foreground-dark hover:bg-accent dark:hover:bg-accent-dark"
+            >
+              <User className="h-5 w-5" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent
+            className="w-56 rounded-md border dark:border-border-dark bg-popover dark:bg-popover-dark text-popover-foreground dark:text-popover-foreground-dark shadow-md"
+            align="end"
+            forceMount
+          >
+            <motion.div
+              variants={slidevariants}
+              initial="hidden"
+              animate={isOpenUser ? "visible" : "hidden"}
+              transition={{
+                duration: 0.2,
+                ease: "easeOut",
+              }}
+            >
+              <DropdownMenuLabel className="font-normal">
+                <div className="flex flex-col space-y-1">
+                  <p className="text-sm font-medium leading-none">
+                    {user.profile.full_name}
+                  </p>
+                  <p className="text-xs leading-none text-muted-foreground dark:text-muted-foreground-dark">
+                    {user.user.email}
+                  </p>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator className="bg-border dark:bg-border-dark" />
+              <DropdownMenuItem
+                asChild
+                className="cursor-pointer hover:bg-accent dark:hover:bg-accent-dark transition-colors duration-200 focus:bg-accent dark:focus:bg-accent-dark"
+              >
+                <Link to="/dashboard/profile" className="flex items-center">
+                  <User className="mr-2 h-4 w-4" />
+                  <span>Profile</span>
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                asChild
+                className="cursor-pointer hover:bg-accent dark:hover:bg-accent-dark transition-colors duration-200 focus:bg-accent dark:focus:bg-accent-dark"
+              >
+                <Link to="/dashboard/settings" className="flex items-center">
+                  <Settings className="mr-2 h-4 w-4" />
+                  <span>Settings</span>
+                </Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator className="bg-border dark:bg-border-dark" />
+              <DropdownMenuItem
+                asChild
+                className="cursor-pointer hover:bg-accent dark:hover:bg-accent-dark transition-colors duration-200 focus:bg-accent dark:focus:bg-accent-dark"
+              >
+                <button
+                  onClick={() => handleLogOut()}
+                  className="flex w-full items-center"
+                >
+                  <LogOut className="mr-2 h-4 w-4" />
+                  <span>Log out</span>
+                </button>
+              </DropdownMenuItem>
+            </motion.div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </div>
+  );
 }
 
 export default Navbar;
diff --git a/src/pages/dashboard/expenses/AddExpenseForm.tsx b/src/pages/dashboard/expenses/AddExpenseForm.tsx
index adee93d..b37599c 100644
--- a/src/pages/dashboard/expenses/AddExpenseForm.tsx
+++ b/src/pages/dashboard/expenses/AddExpenseForm.tsx
@@ -54,12 +54,12 @@ import { GroupData } from "@/types";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { createExpense } from "@/lib/services/expenseService";
 import { Switch } from "@/components/ui/switch";
-
+import { toast } from "sonner";
 type GroupMember = {
-	id: string;
-	name: string;
-	avatar_url: string | null;
-	email: string;
+  id: string;
+  name: string;
+  avatar_url?: string | null;
+  email?: string;
 };
 
 type SplitData = {
@@ -89,7 +89,6 @@ export function AddExpenseForm() {
       group_id: id || "",
     },
   });
-
 	const groupID = form.watch("group_id");
 	const expenseAmount = form.watch("amount");
 
@@ -264,8 +263,12 @@ export function AddExpenseForm() {
         recurring_count: data.recurring_count,
       }),
     };
-    createNewExpense(formData);
-    console.log("Submitting expense data:", formData);
+    toast.promise(createNewExpense(formData), {
+      loading: "Creating expense...",
+      success: "Expense created successfully!",
+      error: (error) => error.message,
+    });
+    // console.log("Submitting expense data:", formData);
   };
 
   return (
@@ -746,7 +749,7 @@ export function AddExpenseForm() {
                             <span>Loading Group Members</span>
                           </div>
                         ) : groupMembers && groupMembers.length > 0 ? (
-                          groupMembers.map((member: GroupMember) => (
+                          (groupMembers as GroupMember[]).map((member) => (
                             <div
                               key={member.id}
                               className="space-y-2 rounded-lg glass p-3 hover:shadow-glow transition-all duration-300"
diff --git a/src/types/index.ts b/src/types/index.ts
index 60e957c..cb1cb93 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -16,9 +16,10 @@ export type Group = {
   id: string;
   name: string;
   description: string;
-  members: { id: string; name: string; initials: string }[];
+  members: { id: string ; name: string; initials: string }[];
   expenses: number;
   balance: number;
   youOwe: boolean;
   settled?: boolean;
+ 
 };