diff --git a/Web/React/src/components/Dashboard.tsx b/Web/React/src/components/Dashboard.tsx
index 684013f..f17b712 100644
--- a/Web/React/src/components/Dashboard.tsx
+++ b/Web/React/src/components/Dashboard.tsx
@@ -5,6 +5,7 @@ import { useAuth } from '../hooks/useAuth';
 import '../App.css';
 import ThemeToggle from './ThemeToggle';
 import { useCurrency } from '../contexts/CurrencyContext';
+import categoryService, { Category } from '../services/category-service';
 import Groups from './Groups';
 import Profile from './Profile';
 import Support from './Support';
@@ -16,7 +17,7 @@ import ChatBot from './ChatBot';
 import Data from './Data';
 import Alerts from './Alerts';
 import Notifications from './Notifications';
-import Map from './Map';
+import MapComponent from './Map';
 
 interface Tx {
   id: number;
@@ -62,16 +63,38 @@ const Dashboard: React.FC = () => {
         },
       });
 
-      const items = Array.isArray(res.data) ? res.data : [];
-      const mapped: Tx[] = items.map((x: any) => ({
-        id: x.id,
-        title: x.title,
-        cat: x.category || 'Other',
-        amount: x.amount,
-        thumb: x.title ? x.title[0].toUpperCase() : 'T',
-      }));
-
-      setRecentTx(mapped);
+      // Backend returns APIResponse { success: true, data: [expenses] } or just [expenses]
+      const responseData = res.data;
+      const items = Array.isArray(responseData) ? responseData : (Array.isArray(responseData?.data) ? responseData.data : []);
+      
+      // Fetch categories to map category_id to title
+      try {
+        const categories = await categoryService.getCategories();
+        const categoryArray = Array.isArray(categories) ? categories : [];
+        
+        const categoryMap = new Map(categoryArray.map((c: any) => [c.id, c.title]));
+        
+        const mapped: Tx[] = items.map((x: any) => ({
+          id: x.id,
+          title: x.title,
+          cat: categoryMap.get(x.category_id) || 'Other',
+          amount: x.amount,
+          thumb: x.title ? x.title[0].toUpperCase() : 'T',
+        }));
+        
+        setRecentTx(mapped);
+      } catch (catErr) {
+        console.error('Failed to fetch categories, showing without categories', catErr);
+        // Fallback without categories
+        const mapped: Tx[] = items.map((x: any) => ({
+          id: x.id,
+          title: x.title,
+          cat: 'Other',
+          amount: x.amount,
+          thumb: x.title ? x.title[0].toUpperCase() : 'T',
+        }));
+        setRecentTx(mapped);
+      }
     } catch (err) {
       console.error('Failed to fetch recent transactions', err);
       setRecentTx([]);
@@ -88,7 +111,9 @@ const Dashboard: React.FC = () => {
         },
       });
 
-      const items = Array.isArray(res.data) ? res.data : [];
+      // Backend returns APIResponse { success: true, data: [expenses] } or just [expenses]
+      const responseData = res.data;
+      const items = Array.isArray(responseData) ? responseData : (Array.isArray(responseData?.data) ? responseData.data : []);
       const total = items.reduce((acc: number, it: any) => acc + (Number(it.amount) || 0), 0);
       setTotalSpent(total);
     } catch (err) {
@@ -345,7 +370,7 @@ const Dashboard: React.FC = () => {
 
           {screen === 'notifications' && <Notifications />}
 
-          {screen === 'map' && <Map />}
+          {screen === 'map' && <MapComponent />}
         </div>
 
         {/* BOTTOM NAV — kept for mobile (hidden on desktop by CSS) */}
diff --git a/Web/React/src/components/GroupDetail.tsx b/Web/React/src/components/GroupDetail.tsx
index 426a7cf..dfe08f6 100644
--- a/Web/React/src/components/GroupDetail.tsx
+++ b/Web/React/src/components/GroupDetail.tsx
@@ -1,7 +1,10 @@
 // src/components/GroupDetail.tsx
 import React, { useEffect, useState } from 'react';
+import apiClient from '../services/api-client';
+import { useAuth } from '../hooks/useAuth';
 import '../App.css';
 import { useCurrency } from '../contexts/CurrencyContext';
+import categoryService, { Category } from '../services/category-service';
 
 interface Expense {
     id: number;
@@ -11,6 +14,20 @@ interface Expense {
     userName: string;
     userInitial: string;
     date: string;
+    userId: number;
+}
+
+interface GroupLog {
+    id: number;
+    user_id: number;
+    action: string;
+    created_at: string;
+}
+
+interface TimelineItem {
+    type: 'expense' | 'log';
+    data: Expense | GroupLog;
+    timestamp: Date;
 }
 
 interface Props {
@@ -19,35 +36,255 @@ interface Props {
 }
 
 const GroupDetail: React.FC<Props> = ({ groupId, onBack }) => {
+    const { user } = useAuth();
     const [groupName, setGroupName] = useState<string | null>(null);
+    const [invitationCode, setInvitationCode] = useState<string | null>(null);
+    const [showInvitation, setShowInvitation] = useState(false);
     const [expenses, setExpenses] = useState<Expense[]>([]);
+    const [timeline, setTimeline] = useState<TimelineItem[]>([]);
+    const [memberCount, setMemberCount] = useState<number>(0);
+    const [loading, setLoading] = useState(false);
+    const [categories, setCategories] = useState<Category[]>([]);
+    const [showAddExpense, setShowAddExpense] = useState(false);
+    const [newExpense, setNewExpense] = useState({
+        title: '',
+        amount: '',
+        categoryId: null as number | null,
+    });
+    const [splitModalExpenseId, setSplitModalExpenseId] = useState<number | null>(null);
+    const [groupUsers, setGroupUsers] = useState<Array<{ id: number; first_name: string; paid: boolean }>>([]);
+    const [loadingSplit, setLoadingSplit] = useState(false);
+    const [statistics, setStatistics] = useState<{
+        my_share_of_expenses: number;
+        my_total_paid: number;
+        net_balance_paid_for_others: number;
+        rest_of_group_expenses: number;
+    } | null>(null);
+    const [showStatistics, setShowStatistics] = useState(false);
 
-    useEffect(() => {
+    const fetchGroupInfo = async () => {
         if (!groupId) return;
+        
+        try {
+            const res = await apiClient.get(`/groups/${groupId}`);
+            // Backend returns APIResponse { success: true, data: GroupResponse }
+            const groupData = res.data?.data || res.data;
+            setGroupName(groupData.name || `Group ${groupId}`);
+            setInvitationCode(groupData.invitation_code || null);
+            
+            // Fetch member count
+            const membersRes = await apiClient.get(`/groups/${groupId}/users/nr`);
+            const memberData = membersRes.data?.data || membersRes.data;
+            setMemberCount(memberData || 0);
+            
+            // Fetch statistics
+            const statsRes = await apiClient.get(`/groups/${groupId}/statistics/user-summary`);
+            const statsData = statsRes.data?.data || statsRes.data;
+            setStatistics(statsData);
+        } catch (err) {
+            console.error('Failed to fetch group info', err);
+            setGroupName(`Group ${groupId}`);
+        }
+    };
 
-        // Mock fetch group info and expenses
-        // TODO: replace with API call e.g. GET /groups/{groupId} and GET /groups/{groupId}/expenses
-        const mockGroupNames: Record<number,string> = {
-            1: 'Vacation',
-            2: 'Household',
-            3: 'Friends',
-        };
-
-        setGroupName(mockGroupNames[groupId] || `Group ${groupId}`);
-
-        // Sample/mock expenses (chat-like)
-        const mockExpenses: Expense[] = [
-            { id: 1, title: 'Hotel booking', category: 'Travel', amount: -420, userName: 'Alice', userInitial: 'A', date: '2025-10-01' },
-            { id: 2, title: 'Dinner', category: 'Food', amount: -85, userName: 'Bob', userInitial: 'B', date: '2025-10-02' },
-            { id: 3, title: 'Train tickets', category: 'Travel', amount: -120, userName: 'Charlie', userInitial: 'C', date: '2025-10-03' },
-            { id: 4, title: 'Refund', category: 'Adjustment', amount: +50, userName: 'Alice', userInitial: 'A', date: '2025-10-04' },
-        ];
-
-        // Simulate network delay for realism (optional)
-        const t = setTimeout(() => setExpenses(mockExpenses), 120);
-        return () => clearTimeout(t);
+    const fetchGroupExpenses = async () => {
+        if (!groupId) return;
+        
+        setLoading(true);
+        try {
+            // Fetch expenses
+            const res = await apiClient.get(`/expenses/group/${groupId}`);
+            
+            // Backend returns APIResponse { success: true, data: [expenses] }
+            const responseData = res.data;
+            const items = Array.isArray(responseData) ? responseData : (responseData?.data || []);
+            
+            // Fetch group logs
+            const logsRes = await apiClient.get(`/group_logs/${groupId}`);
+            const logsData = logsRes.data?.data || logsRes.data || [];
+            
+            // Fetch categories
+            const categories = await categoryService.getCategories();
+            const categoryMap = new Map(categories.map(c => [c.id, c.title]));
+            
+            // Get unique user IDs from both expenses and logs
+            const expenseUserIds = items.map((exp: any) => exp.user_id);
+            const logUserIds = logsData.map((log: any) => log.user_id);
+            const uniqueUserIds = [...new Set([...expenseUserIds, ...logUserIds])];
+            
+            // Fetch user details for each unique user ID
+            const userDetailsMap: Record<number, { first_name: string; last_name: string }> = {};
+            await Promise.all(
+                uniqueUserIds.map(async (userId: any) => {
+                    try {
+                        const userRes = await apiClient.get(`/users/${userId}`);
+                        // Backend returns APIResponse { success: true, data: UserResponse }
+                        const userData = userRes.data?.data || userRes.data;
+                        userDetailsMap[userId] = {
+                            first_name: userData.first_name || 'User',
+                            last_name: userData.last_name || '',
+                        };
+                    } catch (err) {
+                        console.error(`Failed to fetch user ${userId}`, err);
+                        userDetailsMap[userId] = { first_name: `User ${userId}`, last_name: '' };
+                    }
+                })
+            );
+            
+            const mapped: Expense[] = items.map((exp: any) => {
+                const userDetails = userDetailsMap[exp.user_id] || { first_name: 'Unknown', last_name: '' };
+                const fullName = `${userDetails.first_name}`.trim();
+                
+                return {
+                    id: exp.id,
+                    title: exp.title || 'Untitled',
+                    category: categoryMap.get(exp.category_id) || 'Uncategorized',
+                    amount: exp.amount || 0,
+                    userName: fullName,
+                    userInitial: (userDetails.first_name[0] || 'U').toUpperCase(),
+                    date: exp.created_at ? new Date(exp.created_at).toISOString().slice(0, 10) : new Date().toISOString().slice(0, 10),
+                    userId: exp.user_id,
+                };
+            });
+            
+            setExpenses(mapped);
+            
+            // Create timeline combining expenses and logs
+            const timelineItems: TimelineItem[] = [
+                ...mapped.map(exp => ({
+                    type: 'expense' as const,
+                    data: exp,
+                    timestamp: new Date(exp.date),
+                })),
+                ...logsData.map((log: any) => ({
+                    type: 'log' as const,
+                    data: {
+                        id: log.id,
+                        user_id: log.user_id,
+                        action: log.action,
+                        created_at: log.created_at,
+                        userName: userDetailsMap[log.user_id]?.first_name || 'User',
+                    },
+                    timestamp: new Date(log.created_at),
+                })),
+            ];
+            
+            // Sort by timestamp
+            timelineItems.sort((a, b) => a.timestamp.getTime() - b.timestamp.getTime());
+            
+            setTimeline(timelineItems);
+        } catch (err) {
+            console.error('Failed to fetch group expenses', err);
+            setExpenses([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (!groupId) return;
+        fetchGroupInfo();
+        fetchGroupExpenses();
+        fetchCategories();
     }, [groupId]);
 
+    const fetchCategories = async () => {
+        try {
+            const cats = await categoryService.getCategories();
+            
+            // If no categories exist, create default ones
+            if (cats.length === 0) {
+                const defaultCategories = ['Food', 'Transport', 'Entertainment', 'Shopping', 'Bills', 'Other'];
+                for (const title of defaultCategories) {
+                    try {
+                        await categoryService.createCategory(title);
+                    } catch (err) {
+                        console.error(`Failed to create category ${title}`, err);
+                    }
+                }
+                // Refetch
+                const newCats = await categoryService.getCategories();
+                setCategories(newCats);
+                if (newCats.length > 0) {
+                    setNewExpense(prev => ({ ...prev, categoryId: newCats[0].id }));
+                }
+            } else {
+                setCategories(cats);
+                if (cats.length > 0) {
+                    setNewExpense(prev => ({ ...prev, categoryId: cats[0].id }));
+                }
+            }
+        } catch (err) {
+            console.error('Failed to fetch categories', err);
+        }
+    };
+
+    const openSplitModal = async (expenseId: number) => {
+        if (!groupId) return;
+        
+        setSplitModalExpenseId(expenseId);
+        setLoadingSplit(true);
+        
+        try {
+            // Fetch all users in the group
+            const usersRes = await apiClient.get(`/groups/${groupId}/users`);
+            const usersData = usersRes.data?.data || usersRes.data || [];
+            
+            // Fetch payment status for this expense
+            const paymentsRes = await apiClient.get(`/expenses_payments/${expenseId}/payments`);
+            const paymentsData = paymentsRes.data?.data || paymentsRes.data || [];
+            const paidUserIds = new Set(paymentsData.map((p: any) => p.user_id));
+            
+            // Combine user list with payment status
+            const usersWithPaymentStatus = usersData.map((u: any) => ({
+                id: u.id,
+                first_name: u.first_name || 'User',
+                paid: paidUserIds.has(u.id),
+            }));
+            
+            setGroupUsers(usersWithPaymentStatus);
+        } catch (err) {
+            console.error('Failed to fetch split data', err);
+            alert('Failed to load split information');
+        } finally {
+            setLoadingSplit(false);
+        }
+    };
+
+    const togglePaymentStatus = async (expenseId: number, userId: number, currentlyPaid: boolean) => {
+        try {
+            if (currentlyPaid) {
+                // Unmark as paid
+                await apiClient.delete(`/expenses_payments/${expenseId}/pay/${userId}`);
+            } else {
+                // Mark as paid
+                await apiClient.post(`/expenses_payments/${expenseId}/pay/${userId}`);
+            }
+            
+            // Refresh the split modal data
+            await openSplitModal(expenseId);
+        } catch (err) {
+            console.error('Failed to toggle payment status', err);
+            alert('Failed to update payment status');
+        }
+    };
+
+    const handleLeaveGroup = async () => {
+        if (!groupId) return;
+        
+        const confirmed = window.confirm('Are you sure you want to leave this group?');
+        if (!confirmed) return;
+        
+        try {
+            await apiClient.delete(`/groups/${groupId}/leave`);
+            alert('You have left the group');
+            onBack();
+        } catch (err) {
+            console.error('Failed to leave group', err);
+            alert('Failed to leave group');
+        }
+    };
+
     const cur = useCurrency();
 
     return (
@@ -67,58 +304,568 @@ const GroupDetail: React.FC<Props> = ({ groupId, onBack }) => {
                 <div className="bp-title">{groupName ?? 'Group'}</div>
             </div>
 
-            <div className="bp-section-title" style={{ marginTop: 12, fontSize: 14 }}>Expenses for this group</div>
+            {/* Member count panel with statistics summary */}
+            <div style={{
+                marginTop: 12,
+                padding: '8px 12px',
+                background: 'var(--card-bg)',
+                borderRadius: 8,
+                border: '1px solid rgba(0,0,0,0.08)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 16,
+                fontSize: 13,
+                color: 'var(--muted-dark)',
+            }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
+                        <circle cx="9" cy="7" r="4"></circle>
+                        <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
+                        <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
+                    </svg>
+                    <span><strong>{memberCount}</strong> {memberCount === 1 ? 'member' : 'members'}</span>
+                </div>
+                
+                {statistics && (
+                    <div style={{ 
+                        display: 'flex', 
+                        alignItems: 'center', 
+                        gap: 12,
+                        fontSize: 13,
+                        fontWeight: 600,
+                    }}>
+                        <span style={{ color: 'green' }}>
+                            {cur.formatAmount(statistics.my_share_of_expenses)} GOT
+                        </span>
+                        <span>|</span>
+                        <span style={{ color: 'red' }}>
+                            {cur.formatAmount(statistics.my_total_paid)} PAID
+                        </span>
+                        <span>|</span>
+                        <span style={{ color: 'var(--purple-1)' }}>
+                            {cur.formatAmount(statistics.rest_of_group_expenses)} EXTRA
+                        </span>
+                    </div>
+                )}
+            </div>
+
+            {/* Statistics Panel */}
+            {statistics && (
+                <div style={{ marginTop: 12 }}>
+                    <button
+                        className="bp-add-btn"
+                        onClick={() => setShowStatistics(!showStatistics)}
+                        style={{ marginBottom: showStatistics ? 12 : 0 }}
+                    >
+                        {showStatistics ? 'Hide Details' : 'Show Details'}
+                    </button>
+                    
+                    {showStatistics && (
+                        <div style={{
+                            padding: 16,
+                            background: 'var(--card-bg)',
+                            borderRadius: 12,
+                            border: '1px solid rgba(0,0,0,0.08)',
+                        }}>
+                            <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 12 }}>
+                                Statistics for this group
+                            </div>
+                            
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
+                                <div style={{ 
+                                    padding: 10, 
+                                    background: '#fff', 
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.05)',
+                                }}>
+                                    <div style={{ fontSize: 12, color: 'var(--muted-dark)', marginBottom: 4 }}>
+                                        1. How much you got from shared expenses
+                                    </div>
+                                    <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--purple-1)' }}>
+                                        {cur.formatAmount(statistics.my_share_of_expenses)}
+                                    </div>
+                                </div>
+
+                                <div style={{ 
+                                    padding: 10, 
+                                    background: '#fff', 
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.05)',
+                                }}>
+                                    <div style={{ fontSize: 12, color: 'var(--muted-dark)', marginBottom: 4 }}>
+                                        2. How much you paid for this group
+                                    </div>
+                                    <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--purple-1)' }}>
+                                        {cur.formatAmount(statistics.my_total_paid)}
+                                    </div>
+                                </div>
 
-            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 12 }}>
-                {expenses.map(e => (
-                    <article key={e.id} className="bp-tx">
-                        <div className="bp-thumb" style={{ width:48, height:48, borderRadius:10, fontSize:16 }}>{e.userInitial}</div>
+                                <div style={{ 
+                                    padding: 10, 
+                                    background: '#fff', 
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.05)',
+                                }}>
+                                    <div style={{ fontSize: 12, color: 'var(--muted-dark)', marginBottom: 4 }}>
+                                        3. How much you paid for other expenses
+                                    </div>
+                                    <div style={{ fontSize: 18, fontWeight: 700, color: statistics.net_balance_paid_for_others >= 0 ? 'green' : 'red' }}>
+                                        {cur.formatAmount(statistics.net_balance_paid_for_others)}
+                                    </div>
+                                </div>
 
-                        <div className="bp-meta">
-                            <div className="bp-tx-title">{e.title}</div>
-                            <div className="bp-tx-cat">{e.category} • {e.userName}</div>
-                            <div style={{ marginTop: 8, fontSize: 12, color: 'var(--muted-dark)' }}>{e.date}</div>
+                                <div style={{ 
+                                    padding: 10, 
+                                    background: '#fff', 
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.05)',
+                                }}>
+                                    <div style={{ fontSize: 12, color: 'var(--muted-dark)', marginBottom: 4 }}>
+                                        4. Rest of group expenses (excluding yours)
+                                    </div>
+                                    <div style={{ fontSize: 18, fontWeight: 700, color: 'var(--purple-1)' }}>
+                                        {cur.formatAmount(statistics.rest_of_group_expenses)}
+                                    </div>
+                                </div>
+                            </div>
                         </div>
+                    )}
+                </div>
+            )}
+
+            <div className="bp-section-title" style={{ marginTop: 12, fontSize: 14 }}>Expenses for this group</div>
 
-                        <div style={{ marginLeft: 12, fontWeight: 800 }} className={`bp-amount ${e.amount < 0 ? 'negative' : 'positive'}`}>
-                            {e.amount < 0 ? '-' : '+'}{cur.formatAmount(Math.abs(e.amount))}
+            {/* Chat-like timeline display with expenses and join/leave logs */}
+            <div style={{ marginTop: 12, display: 'flex', flexDirection: 'column', gap: 8, paddingBottom: 20 }}>
+                {timeline.map((item, index) => {
+                    if (item.type === 'log') {
+                        const logData = item.data as GroupLog & { userName: string };
+                        
+                        return (
+                            <div
+                                key={`log-${logData.id}`}
+                                style={{
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    marginTop: 8,
+                                    marginBottom: 8,
+                                }}
+                            >
+                                <div style={{
+                                    fontSize: 13,
+                                    color: 'var(--muted-dark)',
+                                    fontStyle: 'italic',
+                                    padding: '8px 16px',
+                                    background: 'rgba(0,0,0,0.03)',
+                                    borderRadius: 12,
+                                }}>
+                                    {logData.userName} {logData.action === 'JOIN' ? 'joined' : 'left'} the group
+                                </div>
+                            </div>
+                        );
+                    }
+                    
+                    // Expense item
+                    const e = item.data as Expense;
+                    const isCurrentUser = e.userId === user?.id;
+                    
+                    return (
+                        <div
+                            key={`expense-${e.id}`}
+                            style={{
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: isCurrentUser ? 'flex-end' : 'flex-start',
+                                marginBottom: 4,
+                            }}
+                        >
+                            {/* Username label (only for other users) */}
+                            {!isCurrentUser && (
+                                <div style={{ 
+                                    fontSize: 11, 
+                                    color: 'var(--muted-dark)', 
+                                    marginBottom: 4,
+                                    marginLeft: 8,
+                                }}>
+                                    {e.userName}
+                                </div>
+                            )}
+                            
+                            {/* Message bubble */}
+                            <div
+                                style={{
+                                    maxWidth: '70%',
+                                    padding: '12px 16px',
+                                    borderRadius: isCurrentUser ? '18px 18px 4px 18px' : '18px 18px 18px 4px',
+                                    background: isCurrentUser ? 'var(--purple-1)' : 'var(--card-bg)',
+                                    color: isCurrentUser ? '#fff' : 'inherit',
+                                    border: isCurrentUser ? 'none' : '1px solid rgba(0,0,0,0.08)',
+                                    boxShadow: '0 1px 2px rgba(0,0,0,0.05)',
+                                }}
+                            >
+                                <div style={{ 
+                                    fontWeight: 600, 
+                                    fontSize: 15,
+                                    marginBottom: 4,
+                                }}>
+                                    {e.title}
+                                </div>
+                                
+                                <div style={{ 
+                                    fontSize: 20, 
+                                    fontWeight: 800,
+                                    marginBottom: 6,
+                                }}>
+                                    {e.amount < 0 ? '-' : ''}{cur.formatAmount(Math.abs(e.amount))}
+                                </div>
+                                
+                                <div style={{ 
+                                    fontSize: 11, 
+                                    opacity: 0.8,
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    gap: 12,
+                                }}>
+                                    <span>{e.category}</span>
+                                    <span>{e.date}</span>
+                                </div>
+                                
+                                {/* Split button for current user's expenses */}
+                                {isCurrentUser && (
+                                    <button
+                                        onClick={() => openSplitModal(e.id)}
+                                        style={{
+                                            marginTop: 8,
+                                            padding: '4px 12px',
+                                            fontSize: 11,
+                                            fontWeight: 600,
+                                            background: 'rgba(255,255,255,0.2)',
+                                            color: '#fff',
+                                            border: '1px solid rgba(255,255,255,0.3)',
+                                            borderRadius: 6,
+                                            cursor: 'pointer',
+                                            width: '100%',
+                                        }}
+                                    >
+                                        Split
+                                    </button>
+                                )}
+                            </div>
                         </div>
-                    </article>
-                ))}
+                    );
+                })}
             </div>
 
-            {/* footer action — Add expense (mock) */}
-            <div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
+            {/* footer action — Add expense */}
+            <div style={{ marginTop: 18, display: 'flex', gap: 8, justifyContent: 'space-between', alignItems: 'center' }}>
+                <div style={{ display: 'flex', gap: 8 }}>
+                    <button
+                        className="bp-add-btn"
+                        onClick={() => setShowAddExpense(!showAddExpense)}
+                        disabled={loading}
+                    >
+                        {showAddExpense ? 'Cancel' : 'Add Expense'}
+                    </button>
+
+                    <button
+                        className="bp-add-btn"
+                        onClick={() => setShowInvitation(!showInvitation)}
+                    >
+                        {showInvitation ? 'Hide Invitation Code' : 'Show Invitation Code'}
+                    </button>
+                </div>
+
                 <button
-                    className="bp-add-btn"
-                    onClick={() => {
-                        // TODO: replace with real add-expense flow (open modal / navigate to create form)
-                        const title = prompt('Expense title', 'New Expense');
-                        if (!title) return;
-                        const amountRaw = prompt('Amount (use negative for expense, positive for income)', '-10');
-                        const amount = amountRaw ? parseFloat(amountRaw) || 0 : 0;
-                        const user = prompt('Your name', 'You') || 'You';
-                        const id = (expenses[expenses.length - 1]?.id || 0) + 1;
-                        const newExp: Expense = {
-                            id, title, category: 'Misc', amount, userName: user, userInitial: (user[0]||'U').toUpperCase(), date: new Date().toISOString().slice(0,10)
-                        };
-                        setExpenses(prev => [newExp, ...prev]);
-                        // TODO: POST to /groups/{groupId}/expenses
+                    onClick={handleLeaveGroup}
+                    style={{
+                        padding: '10px 16px',
+                        fontSize: 14,
+                        fontWeight: 600,
+                        background: '#fff',
+                        color: '#e74c3c',
+                        border: '2px solid #e74c3c',
+                        borderRadius: 8,
+                        cursor: 'pointer',
                     }}
                 >
-                    Add Expense
+                    Leave Group
                 </button>
+            </div>
 
-                <button
-                    className="bp-add-btn"
-                    onClick={() => {
-                        // quick mock split summary or similar — placeholder
-                        alert('Show split summary (mock). TODO: implement API-driven split details.');
+            {/* Add Expense Form */}
+            {showAddExpense && (
+                <div style={{ 
+                    marginTop: 20, 
+                    padding: 20, 
+                    background: 'var(--card-bg)', 
+                    borderRadius: 12, 
+                    border: '1px solid rgba(0,0,0,0.08)' 
+                }}>
+                    <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 15 }}>Add Expense</div>
+                    
+                    <form onSubmit={async (e) => {
+                        e.preventDefault();
+                        
+                        if (!user?.id || !groupId) {
+                            alert('User or group not available');
+                            return;
+                        }
+
+                        if (!newExpense.title.trim() || !newExpense.amount || !newExpense.categoryId) {
+                            alert('Please fill in all fields');
+                            return;
+                        }
+
+                        const amount = parseFloat(newExpense.amount);
+                        if (amount <= 0) {
+                            alert('Amount must be positive');
+                            return;
+                        }
+
+                        try {
+                            const body = {
+                                title: newExpense.title.trim(),
+                                amount,
+                                category_id: newExpense.categoryId,
+                                group_id: groupId,
+                            };
+
+                            await apiClient.post('/expenses', body);
+                            
+                            // Refresh the expense list and statistics
+                            await fetchGroupExpenses();
+                            await fetchGroupInfo(); // This will refresh statistics
+                            
+                            // Reset form
+                            setNewExpense({
+                                title: '',
+                                amount: '',
+                                categoryId: categories.length > 0 ? categories[0].id : null,
+                            });
+                            setShowAddExpense(false);
+                            alert('Expense added successfully!');
+                        } catch (err: any) {
+                            console.error('Failed to create expense', err);
+                            alert(`Failed to add expense: ${err.response?.data?.detail || err.message}`);
+                        }
+                    }} style={{ display: 'grid', gap: 12 }}>
+                        
+                        <div>
+                            <label style={{ display: 'block', marginBottom: 6, fontSize: 14, fontWeight: 600 }}>
+                                Title
+                            </label>
+                            <input
+                                type="text"
+                                value={newExpense.title}
+                                onChange={(e) => setNewExpense(prev => ({ ...prev, title: e.target.value }))}
+                                placeholder="e.g. Lunch at restaurant"
+                                style={{
+                                    width: '100%',
+                                    padding: '10px 12px',
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.1)',
+                                    fontSize: 14,
+                                }}
+                                required
+                            />
+                        </div>
+
+                        <div>
+                            <label style={{ display: 'block', marginBottom: 6, fontSize: 14, fontWeight: 600 }}>
+                                Amount
+                            </label>
+                            <input
+                                type="number"
+                                step="0.01"
+                                min="0.01"
+                                value={newExpense.amount}
+                                onChange={(e) => setNewExpense(prev => ({ ...prev, amount: e.target.value }))}
+                                placeholder="0.00"
+                                style={{
+                                    width: '100%',
+                                    padding: '10px 12px',
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.1)',
+                                    fontSize: 14,
+                                }}
+                                required
+                            />
+                        </div>
+
+                        <div>
+                            <label style={{ display: 'block', marginBottom: 6, fontSize: 14, fontWeight: 600 }}>
+                                Category
+                            </label>
+                            <select
+                                value={newExpense.categoryId || ''}
+                                onChange={(e) => setNewExpense(prev => ({ ...prev, categoryId: parseInt(e.target.value) }))}
+                                style={{
+                                    width: '100%',
+                                    padding: '10px 12px',
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.1)',
+                                    fontSize: 14,
+                                    background: '#fff',
+                                }}
+                                required
+                            >
+                                {categories.map(cat => (
+                                    <option key={cat.id} value={cat.id}>
+                                        {cat.title}
+                                    </option>
+                                ))}
+                            </select>
+                        </div>
+
+                        <button
+                            type="submit"
+                            className="bp-add-btn"
+                            style={{ marginTop: 8 }}
+                        >
+                            Submit Expense
+                        </button>
+                    </form>
+                </div>
+            )}
+
+            {/* Invitation Code Display */}
+            {showInvitation && groupId && invitationCode && (
+                <div style={{ 
+                    marginTop: 20, 
+                    padding: 20, 
+                    background: 'var(--card-bg)', 
+                    borderRadius: 12, 
+                    border: '1px solid rgba(0,0,0,0.08)',
+                    textAlign: 'center'
+                }}>
+                    <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 10 }}>Group Invitation</div>
+                    
+                    <div style={{ 
+                        fontSize: 24, 
+                        fontWeight: 800, 
+                        color: 'var(--purple-1)', 
+                        marginBottom: 15,
+                        letterSpacing: 2
+                    }}>
+                        {invitationCode}
+                    </div>
+                    
+                    <div style={{ marginTop: 10, color: 'var(--muted-dark)', fontSize: 13 }}>
+                        Share this code to invite members
+                    </div>
+                </div>
+            )}
+
+            {/* Split Modal */}
+            {splitModalExpenseId !== null && (
+                <div
+                    style={{
+                        position: 'fixed',
+                        top: 0,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        background: 'rgba(0,0,0,0.5)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        zIndex: 1000,
                     }}
+                    onClick={() => setSplitModalExpenseId(null)}
                 >
-                    Split summary
-                </button>
-            </div>
+                    <div
+                        style={{
+                            background: '#fff',
+                            borderRadius: 16,
+                            padding: 24,
+                            maxWidth: 400,
+                            width: '90%',
+                            maxHeight: '80vh',
+                            overflow: 'auto',
+                        }}
+                        onClick={(e) => e.stopPropagation()}
+                    >
+                        <div style={{ 
+                            fontWeight: 700, 
+                            fontSize: 18, 
+                            marginBottom: 16,
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                        }}>
+                            <span>Split Payment</span>
+                            <button
+                                onClick={() => setSplitModalExpenseId(null)}
+                                style={{
+                                    background: 'none',
+                                    border: 'none',
+                                    fontSize: 24,
+                                    cursor: 'pointer',
+                                    color: 'var(--muted-dark)',
+                                }}
+                            >
+                                ×
+                            </button>
+                        </div>
+
+                        {loadingSplit ? (
+                            <div style={{ textAlign: 'center', padding: 20, color: 'var(--muted-dark)' }}>
+                                Loading...
+                            </div>
+                        ) : (
+                            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
+                                {groupUsers.map(user => (
+                                    <label
+                                        key={user.id}
+                                        style={{
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            gap: 12,
+                                            padding: 12,
+                                            background: 'var(--card-bg)',
+                                            borderRadius: 8,
+                                            cursor: 'pointer',
+                                            border: '1px solid rgba(0,0,0,0.08)',
+                                        }}
+                                    >
+                                        <input
+                                            type="checkbox"
+                                            checked={user.paid}
+                                            onChange={() => togglePaymentStatus(splitModalExpenseId, user.id, user.paid)}
+                                            style={{
+                                                width: 18,
+                                                height: 18,
+                                                cursor: 'pointer',
+                                            }}
+                                        />
+                                        <span style={{ 
+                                            fontSize: 15, 
+                                            fontWeight: 500,
+                                            textDecoration: user.paid ? 'line-through' : 'none',
+                                            opacity: user.paid ? 0.6 : 1,
+                                        }}>
+                                            {user.first_name}
+                                        </span>
+                                        {user.paid && (
+                                            <span style={{ 
+                                                marginLeft: 'auto', 
+                                                fontSize: 12, 
+                                                color: 'green',
+                                                fontWeight: 600,
+                                            }}>
+                                                ✓ Paid
+                                            </span>
+                                        )}
+                                    </label>
+                                ))}
+                            </div>
+                        )}
+                    </div>
+                </div>
+            )}
         </div>
     );
 };
diff --git a/Web/React/src/components/Groups.tsx b/Web/React/src/components/Groups.tsx
index b9889a7..982b848 100644
--- a/Web/React/src/components/Groups.tsx
+++ b/Web/React/src/components/Groups.tsx
@@ -1,5 +1,7 @@
 // src/components/Groups.tsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
+import apiClient from '../services/api-client';
+import { useAuth } from '../hooks/useAuth';
 import '../App.css';
 
 interface Group {
@@ -13,52 +15,340 @@ const Groups: React.FC<{
     navigate: (to: 'home'|'groups'|'receipts'|'profile'|'support') => void;
     openGroup: (groupId: number) => void;
 }> = ({ navigate, openGroup }) => {
-    const [groups, setGroups] = useState<Group[]>([
-        { id: 1, name: 'Vacation', members: 2, thumb: 'V' },
-        { id: 2, name: 'Household', members: 4, thumb: 'H' },
-        { id: 3, name: 'Friends', members: 6, thumb: 'F' },
-    ]);
-
-    const handleCreateGroup = () => {
-        const name = prompt('Group name');
-        if (!name) return;
-        const membersRaw = prompt('Number of members', '1');
-        const members = membersRaw ? parseInt(membersRaw, 10) || 1 : 1;
-        const id = (groups[groups.length - 1]?.id || 0) + 1;
-        const thumb = name.trim()[0]?.toUpperCase() || 'G';
-        setGroups(prev => [...prev, { id, name: name.trim(), members, thumb }]);
+    const [groups, setGroups] = useState<Group[]>([]);
+    const [loading, setLoading] = useState(false);
+    const { user } = useAuth();
+    const [userLoaded, setUserLoaded] = useState(false);
+    const [showCreateForm, setShowCreateForm] = useState(false);
+    const [showJoinForm, setShowJoinForm] = useState(false);
+    const [newGroup, setNewGroup] = useState({ name: '', description: '' });
+    const [invitationCode, setInvitationCode] = useState('');
+
+    useEffect(() => {
+        if (user && user.id) {
+            setUserLoaded(true);
+        }
+    }, [user]);
+
+    const fetchGroups = async () => {
+        if (!user || !user.id) {
+            return;
+        }
+        
+        setLoading(true);
+        try {
+            const res = await apiClient.get('/groups', {
+                params: { offset: 0, limit: 1000 }
+            });
+            
+            // Backend returns APIResponse { success: true, data: [groups] }
+            const responseData = res.data;
+            const allGroups = responseData?.data || responseData || [];
+            
+            if (!Array.isArray(allGroups)) {
+                setGroups([]);
+                return;
+            }
+            
+            // Filter to only groups where user is a member
+            const userGroupsPromises = allGroups.map(async (g: any) => {
+                try {
+                    const membersRes = await apiClient.get(`/groups/${g.id}/users`);
+                    // Backend returns APIResponse { success: true, data: [users] }
+                    const responseData = membersRes.data;
+                    const members = responseData?.data || responseData || [];
+                    
+                    if (!Array.isArray(members)) {
+                        return null;
+                    }
+                    
+                    const isMember = members.some((m: any) => m.id === user.id || m.user_id === user.id);
+                    return isMember ? g : null;
+                } catch (err) {
+                    console.error(`Failed to check membership for group ${g.id}`, err);
+                    return null;
+                }
+            });
+            
+            const userGroupsResults = await Promise.all(userGroupsPromises);
+            const items = userGroupsResults.filter(g => g !== null);
+            
+            // Fetch member count for each group
+            const mapped: Group[] = await Promise.all(
+                items.map(async (g: any) => {
+                    let memberCount = 0;
+                    try {
+                        const countRes = await apiClient.get(`/groups/${g.id}/users/nr`);
+                        const responseData = countRes.data;
+                        memberCount = typeof responseData === 'number' ? responseData : (responseData?.data || 0);
+                        
+                        if (typeof memberCount !== 'number') {
+                            memberCount = 0;
+                        }
+                    } catch (err) {
+                        console.error(`Failed to fetch member count for group ${g.id}`, err);
+                    }
+                    
+                    return {
+                        id: g.id,
+                        name: g.name || 'Unnamed Group',
+                        members: memberCount,
+                        thumb: (g.name?.[0] || 'G').toUpperCase(),
+                    };
+                })
+            );
+            
+            setGroups(mapped);
+        } catch (err) {
+            console.error('Failed to fetch groups', err);
+            setGroups([]);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (user && user.id) {
+            fetchGroups();
+        }
+    }, [user, userLoaded]);
+
+    const handleCreateGroup = async (e: React.FormEvent) => {
+        e.preventDefault();
+        
+        if (!user || !user.id) {
+            alert('You must be logged in to create a group. Please wait for authentication to complete.');
+            return;
+        }
+        
+        if (!newGroup.name.trim()) {
+            alert('Please enter a group name');
+            return;
+        }
+
+        try {
+            const body: any = {
+                name: newGroup.name.trim(),
+            };
+            if (newGroup.description && newGroup.description.trim()) {
+                body.description = newGroup.description.trim();
+            }
+
+            const createRes = await apiClient.post('/groups', body);
+            
+            // Backend returns APIResponse { success: true, data: { id: groupId } }
+            const responseData = createRes.data;
+            const groupId = responseData?.data?.id || responseData?.id;
+            
+            if (groupId && user.id) {
+                try {
+                    await apiClient.post(`/groups/${groupId}/users/${user.id}`);
+                } catch (err: any) {
+                    console.error('Failed to add creator to group', err);
+                }
+            }
+            
+            await fetchGroups();
+            setNewGroup({ name: '', description: '' });
+            setShowCreateForm(false);
+            alert('Group created successfully!');
+        } catch (err: any) {
+            console.error('Failed to create group', err);
+            alert(err?.response?.data?.detail || 'Failed to create group');
+        }
+    };
+
+    const handleJoinGroup = async (e: React.FormEvent) => {
+        e.preventDefault();
+        
+        if (!invitationCode || !invitationCode.trim()) {
+            alert('Please enter an invitation code');
+            return;
+        }
+
+        try {
+            await apiClient.post(`/users/join-group/${invitationCode.trim()}`);
+            // Successfully joined
+            await fetchGroups();
+            setInvitationCode('');
+            setShowJoinForm(false);
+            alert('Successfully joined the group!');
+        } catch (err: any) {
+            console.error('Failed to join group', err);
+            
+            // Backend has a bug where it returns 500 after successfully adding user to group
+            // The database operation completes, but the response serialization fails
+            // So we check if it's a 500 error and try to refresh groups anyway
+            if (err?.response?.status === 500 || err?.code === 'ERR_NETWORK') {
+                // Try refreshing groups - user might have been added successfully
+                await fetchGroups();
+                setInvitationCode('');
+                setShowJoinForm(false);
+                alert('You may have joined the group. Please check your groups list.');
+            } else {
+                alert(err?.response?.data?.detail || 'Failed to join group. Check the invitation code.');
+            }
+        }
     };
 
     return (
         <>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 12 }}>
                 <div className="bp-title">Groups</div>
+                <button 
+                    className="bp-add-btn" 
+                    onClick={() => setShowJoinForm(!showJoinForm)}
+                    style={{ fontSize: 14, padding: '8px 16px' }}
+                >
+                    {showJoinForm ? 'Cancel' : 'Join Group'}
+                </button>
             </div>
 
+            {/* Join Group Form */}
+            {showJoinForm && (
+                <div style={{ 
+                    marginTop: 15, 
+                    padding: 20, 
+                    background: 'var(--card-bg)', 
+                    borderRadius: 12, 
+                    border: '1px solid rgba(0,0,0,0.08)' 
+                }}>
+                    <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 15 }}>Join Group</div>
+                    
+                    <form onSubmit={handleJoinGroup} style={{ display: 'grid', gap: 12 }}>
+                        <div>
+                            <label style={{ display: 'block', marginBottom: 6, fontSize: 14, fontWeight: 600 }}>
+                                Invitation Code
+                            </label>
+                            <input
+                                type="text"
+                                value={invitationCode}
+                                onChange={(e) => setInvitationCode(e.target.value)}
+                                placeholder="e.g., A2VC3B"
+                                style={{
+                                    width: '100%',
+                                    padding: '10px 12px',
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.1)',
+                                    fontSize: 14,
+                                    textTransform: 'uppercase',
+                                }}
+                                required
+                            />
+                        </div>
+
+                        <button
+                            type="submit"
+                            className="bp-add-btn"
+                            style={{ marginTop: 8 }}
+                        >
+                            Join Group
+                        </button>
+                    </form>
+                </div>
+            )}
+
             <div className="bp-section-title" style={{ marginTop: 12, fontSize: 15 }}>My Groups</div>
 
             <div style={{ marginTop: 10, display: 'flex', flexDirection: 'column', gap: 10 }}>
-                {groups.map(g => (
-                    <div
-                        className="bp-group-card"
-                        key={g.id}
-                        onClick={() => openGroup(g.id)}
-                        style={{ cursor: 'pointer' }}
-                        role="button"
-                        aria-label={`Open group ${g.name}`}
-                    >
-                        <div className="bp-group-thumb">{g.thumb}</div>
-                        <div style={{ display: 'flex', flexDirection: 'column' }}>
-                            <div style={{ fontWeight: 800 }}>{g.name}</div>
-                            <div style={{ color: 'var(--muted-dark)', fontSize: 13, marginTop: 6 }}>{g.members} members</div>
-                        </div>
+                {loading ? (
+                    <div style={{ textAlign: 'center', padding: 20, color: 'var(--muted-dark)' }}>
+                        Loading groups...
                     </div>
-                ))}
+                ) : groups.length === 0 ? (
+                    <div style={{ textAlign: 'center', padding: 20, color: 'var(--muted-dark)' }}>
+                        No groups yet. Create your first group!
+                    </div>
+                ) : (
+                    groups.map(g => (
+                        <div
+                            className="bp-group-card"
+                            key={g.id}
+                            onClick={() => openGroup(g.id)}
+                            style={{ cursor: 'pointer' }}
+                            role="button"
+                            aria-label={`Open group ${g.name}`}
+                        >
+                            <div className="bp-group-thumb">{g.thumb}</div>
+                            <div style={{ display: 'flex', flexDirection: 'column' }}>
+                                <div style={{ fontWeight: 800 }}>{g.name}</div>
+                                <div style={{ color: 'var(--muted-dark)', fontSize: 13, marginTop: 6 }}>{g.members} members</div>
+                            </div>
+                        </div>
+                    ))
+                )}
             </div>
 
-            <button className="bp-create-group" onClick={handleCreateGroup}>
-                + Create Group
+            <button 
+                className="bp-create-group" 
+                onClick={() => setShowCreateForm(!showCreateForm)}
+            >
+                {showCreateForm ? 'Cancel' : '+ Create Group'}
             </button>
+
+            {/* Create Group Form */}
+            {showCreateForm && (
+                <div style={{ 
+                    marginTop: 15, 
+                    padding: 20, 
+                    background: 'var(--card-bg)', 
+                    borderRadius: 12, 
+                    border: '1px solid rgba(0,0,0,0.08)' 
+                }}>
+                    <div style={{ fontWeight: 700, fontSize: 16, marginBottom: 15 }}>Create New Group</div>
+                    
+                    <form onSubmit={handleCreateGroup} style={{ display: 'grid', gap: 12 }}>
+                        <div>
+                            <label style={{ display: 'block', marginBottom: 6, fontSize: 14, fontWeight: 600 }}>
+                                Group Name
+                            </label>
+                            <input
+                                type="text"
+                                value={newGroup.name}
+                                onChange={(e) => setNewGroup(prev => ({ ...prev, name: e.target.value }))}
+                                placeholder="e.g., Vacation 2025"
+                                style={{
+                                    width: '100%',
+                                    padding: '10px 12px',
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.1)',
+                                    fontSize: 14,
+                                }}
+                                required
+                            />
+                        </div>
+
+                        <div>
+                            <label style={{ display: 'block', marginBottom: 6, fontSize: 14, fontWeight: 600 }}>
+                                Description (Optional)
+                            </label>
+                            <textarea
+                                value={newGroup.description}
+                                onChange={(e) => setNewGroup(prev => ({ ...prev, description: e.target.value }))}
+                                placeholder="What is this group for?"
+                                style={{
+                                    width: '100%',
+                                    padding: '10px 12px',
+                                    borderRadius: 8,
+                                    border: '1px solid rgba(0,0,0,0.1)',
+                                    fontSize: 14,
+                                    minHeight: 80,
+                                    resize: 'vertical',
+                                    fontFamily: 'inherit',
+                                }}
+                            />
+                        </div>
+
+                        <button
+                            type="submit"
+                            className="bp-add-btn"
+                            style={{ marginTop: 8 }}
+                        >
+                            Create Group
+                        </button>
+                    </form>
+                </div>
+            )}
         </>
     );
 };
diff --git a/Web/React/src/components/ReceiptsManual.tsx b/Web/React/src/components/ReceiptsManual.tsx
index 01d4f9d..a348116 100644
--- a/Web/React/src/components/ReceiptsManual.tsx
+++ b/Web/React/src/components/ReceiptsManual.tsx
@@ -1,61 +1,114 @@
 // src/components/ReceiptsManual.tsx
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import '../App.css';
 import type { ReceiptItem } from './Receipts';
 import { useAuth } from '../hooks/useAuth';
 import apiClient from '../services/api-client';
+import categoryService, { Category } from '../services/category-service';
 
 const ReceiptsManual: React.FC<{ onCreated: (it: ReceiptItem) => void; groupId?: number | null }> = ({ onCreated, groupId = null }) => {
   const [title, setTitle] = useState('');
   const { user } = useAuth();
   const [subtitle, setSubtitle] = useState('');
   const [amount, setAmount] = useState<string>('');
-
-  const mockGroups = [
-    { id: 1, name: 'Vacation' },
-    { id: 2, name: 'Household' },
-    { id: 3, name: 'Friends' },
-  ];
+  const [categories, setCategories] = useState<Category[]>([]);
+  const [selectedCategoryId, setSelectedCategoryId] = useState<number | null>(null);
+
+  useEffect(() => {
+    const fetchCategories = async () => {
+      try {
+        const cats = await categoryService.getCategories();
+        
+        // If no categories exist, create default ones
+        if (cats.length === 0) {
+          const defaultCategories = ['Food', 'Transport', 'Entertainment', 'Shopping', 'Bills', 'Other'];
+          const createdCats: Category[] = [];
+          
+          for (const title of defaultCategories) {
+            try {
+              const createdData = await categoryService.createCategory(title);
+              // Fetch the created category details
+              const allCats = await categoryService.getCategories();
+              const newCat = allCats.find(c => c.id === createdData.id);
+              if (newCat) createdCats.push(newCat);
+            } catch (err) {
+              console.error(`Failed to create category ${title}`, err);
+            }
+          }
+          
+          setCategories(createdCats);
+          if (createdCats.length > 0) {
+            setSelectedCategoryId(createdCats[0].id);
+          }
+        } else {
+          setCategories(cats);
+          if (cats.length > 0) {
+            setSelectedCategoryId(cats[0].id);
+          }
+        }
+      } catch (err) {
+        console.error('Failed to fetch categories', err);
+      }
+    };
+    fetchCategories();
+  }, []);
 
   const onSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
+    
     if (!title.trim() || amount === '') {
       alert('Please provide title and amount.');
       return;
     }
 
-    // DONE: call API to create the receipt
-
     if (!user) {
       alert('You must be logged in to add a receipt.');
       return;
     }
 
     try {
+      const categoryId = selectedCategoryId || (categories.length > 0 ? categories[0].id : 1);
+      
       const body: any = {
         title: title.trim(),
-        category: subtitle.trim() || 'Manual',
+        category_id: categoryId,
         amount: Number(amount),
       };
 
       if (groupId) {
-      body.group_id = groupId;
-      } else {
-        body.user_id = user.id;
+        body.group_id = groupId;
       }
 
       const res = await apiClient.post('/expenses', body);
 
-      const created = res.data;
+      // Backend returns APIResponse { success: true, data: { id: ... } }
+      const responseData = res.data;
+      const created = responseData?.data || responseData;
+      
+      const categoryTitle = categories.find(c => c.id === categoryId)?.title || 'Other';
+      
+      // Fetch group name if expense belongs to a group
+      let groupName: string | undefined = undefined;
+      if (groupId) {
+        try {
+          const groupRes = await apiClient.get(`/groups/${groupId}`);
+          const groupData = groupRes.data?.data || groupRes.data;
+          groupName = groupData.name || `Group ${groupId}`;
+        } catch (err) {
+          console.error(`Failed to fetch group ${groupId}`, err);
+          groupName = `Group ${groupId}`;
+        }
+      }
+      
       const item: ReceiptItem = {
       id: created.id,
       title: created.title,
-      subtitle: created.category,
+      subtitle: categoryTitle,
       amount: created.amount,
       dateAdded: created.created_at ? created.created_at.slice(0, 10) : new Date().toISOString().slice(0, 10),
       isGroup: !!groupId,
       groupId: groupId || undefined,
-      groupName: groupId ? (mockGroups.find(g=>g.id===groupId)?.name) : undefined,
+      groupName: groupName,
       addedBy: 'You',
       initial: 'Y',
     };
@@ -76,8 +129,22 @@ const ReceiptsManual: React.FC<{ onCreated: (it: ReceiptItem) => void; groupId?:
       <label>Title</label>
       <input type="text" value={title} onChange={e=>setTitle(e.target.value)} placeholder="E.g. Grocery" required />
 
-      <label>Subtitle / Category</label>
-      <input type="text" value={subtitle} onChange={e=>setSubtitle(e.target.value)} placeholder="E.g. Food" />
+      <label>Category</label>
+      <select 
+        value={selectedCategoryId || ''} 
+        onChange={e => setSelectedCategoryId(Number(e.target.value))} 
+        required
+        disabled={categories.length === 0}
+        style={{ padding: '8px', borderRadius: '4px', border: '1px solid var(--border)' }}
+      >
+        {categories.length === 0 ? (
+          <option value="">Loading categories...</option>
+        ) : (
+          categories.map(cat => (
+            <option key={cat.id} value={cat.id}>{cat.title}</option>
+          ))
+        )}
+      </select>
 
       <label>Amount</label>
       <input type="number" value={amount} onChange={e=>setAmount(e.target.value)} placeholder="50" required step="any" />
diff --git a/Web/React/src/components/ReceiptsView.tsx b/Web/React/src/components/ReceiptsView.tsx
index 12e2ab6..c3d3b59 100644
--- a/Web/React/src/components/ReceiptsView.tsx
+++ b/Web/React/src/components/ReceiptsView.tsx
@@ -4,6 +4,7 @@ import type { ReceiptItem } from './Receipts';
 import { useAuth } from '../hooks/useAuth';
 import { useCurrency } from '../contexts/CurrencyContext';
 import apiClient from '../services/api-client';
+import categoryService, { Category } from '../services/category-service';
 
 /*
   ReceiptsView: infinite scroll grid with filters and delete action (mock).
@@ -24,6 +25,20 @@ function randomDate(start: Date, end: Date) {
   return t.toISOString().slice(0, 10);
 }
 
+// Cache for categories
+let categoriesCache: Category[] | null = null;
+
+async function getCategories(): Promise<Category[]> {
+  if (categoriesCache) return categoriesCache;
+  try {
+    categoriesCache = await categoryService.getCategories();
+    return categoriesCache;
+  } catch (err) {
+    console.error('Failed to fetch categories', err);
+    return [];
+  }
+}
+
 
 // DONE: paged fetch
 async function fetchPage(pageIndex: number, pageSize: number, filters: any) {
@@ -35,47 +50,71 @@ async function fetchPage(pageIndex: number, pageSize: number, filters: any) {
       order: filters.sortOrder || 'desc',
     };
 
-    // fixed mappings:
-    // title search
-    if (filters.qTitle) params.title = filters.qTitle;
-    // subtitle/category search
+    // Backend supported filters:
+    // category: string (category title, resolved to IDs on backend)
     if (filters.qSubtitle) params.category = filters.qSubtitle;
 
-    // amount range (keep backend-friendly names used earlier: min_price/max_price)
+    // amount range: min_price, max_price
     if (filters.minAmount != null) params.min_price = filters.minAmount;
     if (filters.maxAmount != null) params.max_price = filters.maxAmount;
 
-    // date added filters (created_at)
+    // date filters: date_from, date_to (ISO date strings)
     if (filters.dateAddedFrom) params.date_from = filters.dateAddedFrom;
     if (filters.dateAddedTo) params.date_to = filters.dateAddedTo;
 
-    // onlyGroup: map to a single param the backend can interpret
-    // (group / independent / any)
-    if (filters.onlyGroup && filters.onlyGroup !== 'any') {
-      params.only_group = filters.onlyGroup === 'group' ? 'group' : 'independent';
+    // group_ids: array of group IDs
+    if (filters.groupIds && filters.groupIds.length > 0) {
+      params.group_ids = filters.groupIds;
     }
-
+    
     const res = await apiClient.get('/expenses', { params });
 
-    const items: any[] = Array.isArray(res.data) ? res.data : [];
+    // Backend returns APIResponse { success: true, data: [expenses] }
+    const responseData = res.data;
+    const items: any[] = Array.isArray(responseData) ? responseData : (responseData?.data || []);
+    
+    const categories = await getCategories();
+    const categoryMap = new Map(categories.map(c => [c.id, c.title]));
+
+    // Fetch group names for expenses that have group_id
+    const uniqueGroupIds = [...new Set(items.filter(x => x.group_id).map(x => x.group_id))];
+    const groupNameMap = new Map<number, string>();
+    
+    await Promise.all(
+      uniqueGroupIds.map(async (groupId: any) => {
+        try {
+          const groupRes = await apiClient.get(`/groups/${groupId}`);
+          const groupData = groupRes.data?.data || groupRes.data;
+          groupNameMap.set(groupId, groupData.name || `Group ${groupId}`);
+        } catch (err) {
+          console.error(`Failed to fetch group ${groupId}`, err);
+          groupNameMap.set(groupId, `Group ${groupId}`);
+        }
+      })
+    );
 
     const pageItems: ReceiptItem[] = items.map((x: any) => ({
       id: x.id,
       title: x.title,
-      subtitle: x.category || 'Uncategorized',
+      subtitle: categoryMap.get(x.category_id) || 'Uncategorized',
       amount: x.amount,
       dateTransaction: x.created_at ? x.created_at.slice(0, 10) : '',
       dateAdded: x.created_at ? x.created_at.slice(0, 10) : '',
       isGroup: !!x.group_id,
       groupId: x.group_id || undefined,
-      groupName: x.group_id ? `Group ${x.group_id}` : undefined, // TODO: fetch group name if needed
+      groupName: x.group_id ? groupNameMap.get(x.group_id) : undefined,
       addedBy: x.user_id ? `User ${x.user_id}` : 'Unknown',
       initial: x.user_id ? String(x.user_id)[0] : 'U',
     }));
 
+    // Frontend title filtering (backend doesn't support it)
+    const filtered = filters.qTitle 
+      ? pageItems.filter(item => item.title.toLowerCase().includes(filters.qTitle.toLowerCase()))
+      : pageItems;
+
     const hasMore = items.length === pageSize;
 
-    return { items: pageItems, hasMore };
+    return { items: filtered, hasMore };
   } catch (err) {
     console.error('Failed to fetch expenses', err);
     return { items: [], hasMore: false };
@@ -124,7 +163,6 @@ const ReceiptsView: React.FC<{ onNeedRefresh?: () => void; refreshKey?: number }
     maxAmount: '',
     dateAddedFrom: '',
     dateAddedTo: '',
-    onlyGroup: 'any',
     selectedCategory: '',
     sortBy: 'created_at',
     sortOrder: 'desc',
@@ -173,19 +211,12 @@ const saveEdit = async () => {
   if (!editingId || !user) return;
   
   try {
+    // Backend ExpenseUpdate only supports: title, amount, description
     const body: any = {
       title: editForm.title.trim(),
-      category: editForm.subtitle.trim() || 'Manual',
       amount: Number(editForm.amount),
     };
 
-    const item = items.find(x => x.id === editingId);
-    if (item?.isGroup && item.groupId) {
-      body.group_id = item.groupId;
-    } else {
-      body.user_id = user.id;
-    }
-
     const updated = await updateExpense(editingId, body);
 
     setItems(prev => prev.map(x => 
@@ -193,23 +224,11 @@ const saveEdit = async () => {
         ? { 
             ...x, 
             title: updated.title || editForm.title, 
-            subtitle: updated.category || editForm.subtitle, 
             amount: updated.amount !== undefined ? updated.amount : Number(editForm.amount)
           }
         : x
     ));
 
-    // Update categories with the new/updated category
-    const newCategory = updated.category || editForm.subtitle;
-    if (newCategory && newCategory.trim()) {
-      setCategories(prev => {
-        if (!prev.includes(newCategory)) {
-          return [...prev, newCategory];
-        }
-        return prev;
-      });
-    }
-
     cancelEdit();
   } catch (err: any) {
     console.error(err);
@@ -244,16 +263,18 @@ const saveEdit = async () => {
 
   const onApply = () => {
     const f: any = {
-      qTitle: local.qTitle?.trim() || undefined,
       qSubtitle: local.selectedCategory || local.qSubtitle?.trim() || undefined,
       minAmount: local.minAmount ? Number(local.minAmount) : null,
       maxAmount: local.maxAmount ? Number(local.maxAmount) : null,
       dateAddedFrom: local.dateAddedFrom || null,
       dateAddedTo: local.dateAddedTo || null,
-      onlyGroup: local.onlyGroup || 'any',
       sortBy: local.sortBy,
       sortOrder: local.sortOrder,
     };
+    
+    // Store title filter for frontend filtering (backend doesn't support title search)
+    f.qTitle = local.qTitle?.trim() || undefined;
+    
     setItems([]); setPageIndex(0); setHasMore(true);
     setFilters(f);
   };
@@ -266,7 +287,6 @@ const saveEdit = async () => {
       maxAmount: '',
       dateAddedFrom: '',
       dateAddedTo: '',
-      onlyGroup: 'any',
       selectedCategory: '',
       sortBy: 'created_at',
       sortOrder: 'desc',
diff --git a/Web/React/src/contexts/AuthContext.tsx b/Web/React/src/contexts/AuthContext.tsx
index 48ebe5a..e2d4066 100644
--- a/Web/React/src/contexts/AuthContext.tsx
+++ b/Web/React/src/contexts/AuthContext.tsx
@@ -47,7 +47,9 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const checkAuthStatus = async () => {
         try {
             const response = await authService.getMe(); // GET /users/auth/me
-            setUser(response.data);
+            // Backend returns APIResponse { success: true, data: UserResponse }
+            const userData = response.data?.data || response.data;
+            setUser(userData);
         } catch {
             setUser(null);
         } finally {
@@ -59,28 +61,29 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         // call login endpoint
         const response = await authService.login({ email, password });
         
+        // Backend returns APIResponse { success: true, data: { access_token, user } }
+        const responseData = response.data?.data || response.data;
+        
         // If backend indicates 2FA is required, it should return e.g.:
         // { two_fa_required: true, two_fa_method: 'email', temp_token: '...' }
-        // For now, we support that shape if backend provides it.
-        if ((response as any).data?.two_fa_required) {
-            const method = (response as any).data?.two_fa_method || 'email';
-            const tempToken = (response as any).data?.temp_token || null;
+        if (responseData?.two_fa_required) {
+            const method = responseData?.two_fa_method || 'email';
+            const tempToken = responseData?.temp_token || null;
             setPendingTwoFactor({ method, tempToken });
             // DO NOT set user yet — wait for verifyTwoFactor
             return;
         }
 
-        // If backend doesn't return that shape, proceed as usual:
-        // NOTE: some backends can return user directly
-        if ((response as any).data?.user) {
-            setUser((response as any).data.user);
+        // Extract user from response
+        if (responseData?.user) {
+            setUser(responseData.user);
         } else {
             // fallback: attempt to fetch /me
             try {
                 const me = await authService.getMe();
-                setUser(me.data);
+                const userData = me.data?.data || me.data;
+                setUser(userData);
             } catch (err) {
-                // keep user null
                 console.error('Login: failed to fetch /me after login', err);
             }
         }
@@ -96,9 +99,9 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
         // MOCK behavior: accept code '123456' as valid
         if (code === '123456') {
             try {
-                // If backend supports getMe, use it. Here we try to fetch user after successful verify.
                 const me = await authService.getMe();
-                setUser(me.data);
+                const userData = me.data?.data || me.data;
+                setUser(userData);
             } catch (err) {
                 // If /me fails, try to set a minimal mock user (DEV fallback)
                 setUser({
@@ -121,17 +124,22 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     }, []);
 
     const register = useCallback(async (accountData: any, verificationMethod?: 'email'|'number') => {
-        // TODO: register endpoint should kick off verification (send code to email/sms)
-        // e.g. const res = await authService.register({ ...accountData, verification_method: verificationMethod });
-        // For now call register and then attempt to fetch /me or instruct UI to verify code.
+        // Register endpoint returns { success: true, data: { access_token, id, user } }
         const response = await authService.register(accountData);
-        // Some backends may not authenticate immediately; we'll try to fetch /me
-        try {
-            const me = await authService.getMe();
-            setUser(me.data);
-        } catch (err) {
-            // registration may require verification — keep user null and leave registration flow to component
-            console.warn('Register: user not automatically authenticated (verification may be required).', err);
+        const responseData = response.data?.data || response.data;
+        
+        // Extract user from register response
+        if (responseData?.user) {
+            setUser(responseData.user);
+        } else {
+            // fallback: attempt to fetch /me
+            try {
+                const me = await authService.getMe();
+                const userData = me.data?.data || me.data;
+                setUser(userData);
+            } catch (err) {
+                console.warn('Register: user not automatically authenticated (verification may be required).', err);
+            }
         }
     }, []);
 
@@ -148,7 +156,8 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     const refreshUser = useCallback(async () => {
         try {
             const response = await authService.getMe();
-            setUser(response.data);
+            const userData = response.data?.data || response.data;
+            setUser(userData);
         } catch (err) {
             console.warn('refreshUser failed', err);
         }
diff --git a/Web/React/src/services/category-service.ts b/Web/React/src/services/category-service.ts
new file mode 100644
index 0000000..2a1243f
--- /dev/null
+++ b/Web/React/src/services/category-service.ts
@@ -0,0 +1,32 @@
+import apiClient from "./api-client";
+
+interface Category {
+    id: number;
+    title: string;
+    user_id: number;
+    keywords?: string[];
+}
+
+interface APIResponse<T> {
+    success: boolean;
+    message?: string;
+    data: T;
+}
+
+class CategoryService {
+    async getCategories() {
+        const response = await apiClient.get<APIResponse<Category[]>>('/categories');
+        return response.data.data; // Extract data from APIResponse wrapper
+    }
+
+    async createCategory(title: string) {
+        const response = await apiClient.post<APIResponse<{ id: number }>>('/categories', { 
+            title,
+            keywords: [] 
+        });
+        return response.data.data; // Extract data from APIResponse wrapper
+    }
+}
+
+export default new CategoryService();
+export type { Category };