diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index ce6dab5..43e2e1e 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -13,7 +13,8 @@
       "Bash(git add:*)",
       "Bash(npm run lint:*)",
       "Bash(mv:*)",
-      "mcp__ide__getDiagnostics"
+      "mcp__ide__getDiagnostics",
+      "Bash(git checkout:*)"
     ],
     "deny": []
   }
diff --git a/CLAUDE.md b/CLAUDE.md
index de2bb38..026c692 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -109,6 +109,7 @@ src/
 - **Function Style**: Always use function declarations (`function name() {}`) instead of arrow function expressions (`const name = () => {}`) for components and named functions
 - **Dialog Components**: Always include both `DialogTitle` AND `DialogDescription` in `DialogHeader` to prevent accessibility warnings
 - **React Router**: Use future flags `v7_startTransition` and `v7_relativeSplatPath` in BrowserRouter to prepare for v7 upgrade
+- **Component Extraction**: When a section of JSX + logic becomes substantial (>30 lines) or reusable, extract it into a separate component. Place in appropriate directory: page-specific components in `components/PageName/`, reusable ones in `components/`
 
 ### Important Notes
 
diff --git a/src/components/Groups/AddMemberForm.tsx b/src/components/Groups/AddMemberForm.tsx
new file mode 100644
index 0000000..2db4d89
--- /dev/null
+++ b/src/components/Groups/AddMemberForm.tsx
@@ -0,0 +1,96 @@
+import { useForm } from "react-hook-form";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { UserPlus } from "lucide-react";
+import { useInviteToGroupMutation } from "@/hooks/queries/useGroupsQuery";
+
+interface AddMemberFormProps {
+  groupId: string;
+}
+
+interface FormData {
+  usernameOrEmail: string;
+}
+
+export function AddMemberForm({ groupId }: AddMemberFormProps) {
+  const inviteToGroupMutation = useInviteToGroupMutation(groupId);
+
+  // Form for inviting members
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>();
+
+  async function onSubmitInvite(data: FormData) {
+    const input = data.usernameOrEmail.trim();
+    // For email format, make it lowercase for case-insensitive matching
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    const processedInput = emailRegex.test(input) ? input.toLowerCase() : input;
+
+    inviteToGroupMutation.mutate(processedInput, {
+      onSuccess() {
+        reset(); // Clear the form on success
+      },
+    });
+  }
+
+  return (
+    <Card className="bg-white/10 border-purple-400/30">
+      <CardHeader>
+        <CardTitle className="flex items-center space-x-2 text-white">
+          <UserPlus className="h-5 w-5" />
+          <span>Add Member</span>
+        </CardTitle>
+        <CardDescription className="text-purple-200">
+          Invite someone to join this group by username or email
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit(onSubmitInvite)} className="space-y-4">
+          <div>
+            <Label htmlFor="usernameOrEmail" className="text-white">
+              Username or Email
+            </Label>
+            <Input
+              id="usernameOrEmail"
+              placeholder="Enter username or email address"
+              className="bg-white/10 border-purple-400/30 text-white placeholder:text-purple-300"
+              {...register("usernameOrEmail", {
+                required: "Username or email is required",
+                minLength: {
+                  value: 1,
+                  message: "Username or email cannot be empty",
+                },
+              })}
+            />
+            {errors.usernameOrEmail && (
+              <p className="text-red-400 text-sm mt-1">
+                {errors.usernameOrEmail.message}
+              </p>
+            )}
+          </div>
+          <Button
+            type="submit"
+            disabled={isSubmitting || inviteToGroupMutation.isPending}
+            className="w-full bg-purple-600 hover:bg-purple-700"
+          >
+            <UserPlus className="h-4 w-4 mr-2" />
+            {isSubmitting || inviteToGroupMutation.isPending
+              ? "Adding Member..."
+              : "Add Member"}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/src/components/Groups/CreateGroupDialog.tsx b/src/components/Groups/CreateGroupDialog.tsx
new file mode 100644
index 0000000..a4ee7e9
--- /dev/null
+++ b/src/components/Groups/CreateGroupDialog.tsx
@@ -0,0 +1,134 @@
+import { useForm } from "react-hook-form";
+// Removed unused useState import
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { useCreateGroupMutation } from "@/hooks/queries/useGroupsQuery";
+import { useAuth } from "@/contexts/AuthContext";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { Users } from "lucide-react";
+
+interface CreateGroupDialogProps {
+  isOpen: boolean;
+  onOpenChange: (open: boolean) => void;
+  onGroupCreated: (groupId: string) => void;
+}
+
+interface FormData {
+  name: string;
+  description: string;
+}
+export function CreateGroupDialog({
+  isOpen,
+  onOpenChange,
+  onGroupCreated,
+}: CreateGroupDialogProps) {
+  const { user } = useAuth();
+  const createGroupMutation = useCreateGroupMutation();
+  // No local creating state needed; use createGroupMutation.isLoading
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors, isSubmitting },
+  } = useForm<FormData>();
+
+  function onSubmit(data: FormData) {
+    if (!user?.id) return;
+    createGroupMutation.mutate(
+      {
+        name: data.name.trim(),
+        description: data.description.trim() || undefined,
+        userId: user.id,
+      },
+      {
+        onSuccess: (group) => {
+          if (group && group.id) {
+            reset();
+            onOpenChange(false);
+            onGroupCreated(group.id);
+          }
+        },
+      },
+    );
+  }
+
+  function handleOpenChange(open: boolean) {
+    if (!open) {
+      reset(); // Clear form when closing
+    }
+    onOpenChange(open);
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle className="flex items-center space-x-2">
+            <Users className="h-5 w-5" />
+            <span>Create New Group</span>
+          </DialogTitle>
+          <DialogDescription>
+            Create a group to share and compare votes with friends
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+          <div>
+            <Label htmlFor="name">Group Name</Label>
+            <Input
+              id="name"
+              placeholder="e.g., Festival Squad, Close Friends, Work Colleagues"
+              {...register("name", {
+                required: "Group name is required",
+                minLength: {
+                  value: 1,
+                  message: "Group name cannot be empty",
+                },
+              })}
+            />
+            {errors.name && (
+              <p className="text-red-400 text-sm mt-1">{errors.name.message}</p>
+            )}
+          </div>
+
+          <div>
+            <Label htmlFor="description">Description (Optional)</Label>
+            <Textarea
+              id="description"
+              placeholder="What's this group for?"
+              rows={3}
+              {...register("description")}
+            />
+          </div>
+
+          <div className="flex justify-end space-x-2 pt-4">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => handleOpenChange(false)}
+              disabled={isSubmitting || createGroupMutation.isPending}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={isSubmitting || createGroupMutation.isPending}
+            >
+              {isSubmitting || createGroupMutation.isPending
+                ? "Creating..."
+                : "Create Group"}
+            </Button>
+          </div>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/components/Groups/GroupCard.tsx b/src/components/Groups/GroupCard.tsx
new file mode 100644
index 0000000..753d232
--- /dev/null
+++ b/src/components/Groups/GroupCard.tsx
@@ -0,0 +1,97 @@
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Users, Trash2, Crown } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useLeaveGroupMutation } from "@/hooks/queries/useGroupsQuery";
+import { Group } from "@/types/groups";
+import { useAuth } from "@/contexts/AuthContext";
+
+export function GroupCard({
+  group,
+  onDelete,
+}: {
+  group: Group;
+  onDelete: () => void;
+}) {
+  const { user } = useAuth();
+  const leaveGroupMutation = useLeaveGroupMutation();
+
+  return (
+    <Link to={`/groups/${group.id}`} className="block">
+      <Card className="bg-white/10 border-purple-400/30">
+        <CardHeader className="pb-3">
+          <div className="flex items-start justify-between">
+            <div>
+              <CardTitle className="flex items-center space-x-2 text-white">
+                <span>{group.name}</span>
+                {group.is_creator && (
+                  <Badge
+                    variant="secondary"
+                    className="text-xs bg-purple-600/50 text-purple-100"
+                  >
+                    <Crown className="h-3 w-3 mr-1" />
+                    Creator
+                  </Badge>
+                )}
+              </CardTitle>
+              {group.description && (
+                <CardDescription className="mt-1 text-purple-200">
+                  {group.description}
+                </CardDescription>
+              )}
+            </div>
+            <div className="flex space-x-2">
+              {group.is_creator ? (
+                <Button
+                  variant="destructive"
+                  size="sm"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    onDelete();
+                  }}
+                >
+                  <Trash2 className="h-4 w-4" />
+                </Button>
+              ) : (
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleLeaveGroup();
+                  }}
+                  className="bg-white/10 border-purple-400/30 text-white hover:bg-white/20"
+                >
+                  Leave
+                </Button>
+              )}
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center space-x-2 text-sm text-purple-200">
+              <Users className="h-4 w-4" />
+              <span>{group.member_count} members</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+
+  async function handleLeaveGroup() {
+    if (window.confirm("Are you sure you want to leave this group?")) {
+      leaveGroupMutation.mutate({ groupId: group.id, userId: user?.id || "" });
+    }
+  }
+}
diff --git a/src/components/Groups/GroupsHeader.tsx b/src/components/Groups/GroupsHeader.tsx
new file mode 100644
index 0000000..f1e79c8
--- /dev/null
+++ b/src/components/Groups/GroupsHeader.tsx
@@ -0,0 +1,27 @@
+import { AppHeader } from "@/components/AppHeader";
+import { Button } from "@/components/ui/button";
+import { Plus } from "lucide-react";
+
+export function GroupsHeader({ onCreate }: { onCreate: () => void }) {
+  return (
+    <div>
+      <AppHeader
+        showBackButton
+        backTo="/"
+        backLabel="Back to Artists"
+        title="My Groups"
+        subtitle="Create and manage your festival groups"
+      />
+      <div className="flex justify-between items-center mb-6">
+        <div />
+        <Button
+          onClick={onCreate}
+          className="bg-purple-600 hover:bg-purple-700"
+        >
+          <Plus className="h-4 w-4 mr-2" />
+          Create Group
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Groups/InviteLinksTab.tsx b/src/components/Groups/InviteLinksTab.tsx
new file mode 100644
index 0000000..55f4f99
--- /dev/null
+++ b/src/components/Groups/InviteLinksTab.tsx
@@ -0,0 +1,69 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Link } from "lucide-react";
+import { InviteManagement } from "@/components/Groups/InviteManagement";
+
+export function InviteLinksTab({
+  groups,
+  selectedGroupId,
+  setSelectedGroupId,
+}: {
+  groups: any[];
+  selectedGroupId: string;
+  setSelectedGroupId: (id: string) => void;
+}) {
+  if (selectedGroupId) {
+    const group = groups.find((g) => g.id === selectedGroupId);
+    return (
+      <div>
+        <Button
+          variant="outline"
+          className="mb-4 bg-white/10 border-purple-400/30 text-white hover:bg-white/20"
+          onClick={() => setSelectedGroupId("")}
+        >
+          ← Back to Groups
+        </Button>
+        <InviteManagement
+          groupId={selectedGroupId}
+          groupName={group?.name || ""}
+        />
+      </div>
+    );
+  }
+  const creatorGroups = groups.filter((g) => g.is_creator);
+  return (
+    <div>
+      <h3 className="text-lg font-semibold mb-4 text-white">
+        Select a Group to Manage Invites
+      </h3>
+      <div className="space-y-2">
+        {creatorGroups.map((group) => (
+          <Card
+            key={group.id}
+            className="cursor-pointer hover:bg-white/20 bg-white/10 border-purple-400/30"
+            onClick={() => setSelectedGroupId(group.id)}
+          >
+            <CardContent className="flex items-center justify-between p-4">
+              <div>
+                <h4 className="font-medium text-white">{group.name}</h4>
+                <p className="text-sm text-purple-200">
+                  {group.member_count} members
+                </p>
+              </div>
+              <Link className="h-5 w-5 text-purple-300" />
+            </CardContent>
+          </Card>
+        ))}
+        {creatorGroups.length === 0 && (
+          <Card className="bg-white/10 border-purple-400/30">
+            <CardContent className="text-center py-8">
+              <p className="text-purple-200">
+                You need to be a group creator to manage invite links.
+              </p>
+            </CardContent>
+          </Card>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Groups/MyGroupsList.tsx b/src/components/Groups/MyGroupsList.tsx
new file mode 100644
index 0000000..5a5bfe8
--- /dev/null
+++ b/src/components/Groups/MyGroupsList.tsx
@@ -0,0 +1,46 @@
+import { GroupCard } from "./GroupCard";
+import { Card, CardContent } from "@/components/ui/card";
+import { Group } from "@/types/groups";
+import { Users } from "lucide-react";
+
+export function MyGroupsList({
+  groups,
+  loading,
+  onDelete,
+}: {
+  groups: Group[];
+  loading: boolean;
+  onDelete: (id: string, name: string) => void;
+}) {
+  if (loading) {
+    return <div className="text-center text-white">Loading groups...</div>;
+  }
+
+  if (groups.length === 0) {
+    return (
+      <Card className="bg-white/10 border-purple-400/30">
+        <CardContent className="text-center py-12">
+          <Users className="h-12 w-12 mx-auto mb-4 text-purple-300" />
+          <h3 className="text-xl font-semibold text-white mb-2">
+            No groups yet
+          </h3>
+          <p className="text-purple-200 mb-4">
+            Create your first group to start sharing votes with friends
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {groups.map((group) => (
+        <GroupCard
+          key={group.id}
+          group={group}
+          onDelete={() => onDelete(group.id, group.name)}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/Groups/SignInRequired.tsx b/src/components/Groups/SignInRequired.tsx
new file mode 100644
index 0000000..5bc8283
--- /dev/null
+++ b/src/components/Groups/SignInRequired.tsx
@@ -0,0 +1,28 @@
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { useNavigate } from "react-router-dom";
+
+export function SignInRequired() {
+  const navigate = useNavigate();
+  return (
+    <div className="min-h-screen bg-app-gradient flex items-center justify-center">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Sign in required</CardTitle>
+          <CardDescription>Please sign in to manage groups</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button onClick={() => navigate("/")} className="w-full">
+            Go to Home
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/src/hooks/queries/useGroupsQuery.ts b/src/hooks/queries/useGroupsQuery.ts
index 8bccc07..224be8c 100644
--- a/src/hooks/queries/useGroupsQuery.ts
+++ b/src/hooks/queries/useGroupsQuery.ts
@@ -5,44 +5,45 @@ import {
   queryFunctions,
   mutationFunctions,
 } from "@/services/queries";
+import { groupService } from "@/services/groupService";
 
-export const useUserGroupsQuery = (userId: string | undefined) => {
+export function useUserGroupsQuery(userId: string | undefined) {
   return useQuery({
     queryKey: groupQueries.user(userId!),
     queryFn: () => queryFunctions.fetchUserGroups(userId!),
     enabled: !!userId,
   });
-};
+}
 
-export const useGroupDetailQuery = (groupId: string) => {
+export function useGroupDetailQuery(groupId: string) {
   return useQuery({
     queryKey: groupQueries.detail(groupId),
     queryFn: () => queryFunctions.fetchGroupById(groupId),
     enabled: !!groupId,
   });
-};
+}
 
-export const useGroupMembersQuery = (groupId: string) => {
+export function useGroupMembersQuery(groupId: string) {
   return useQuery({
     queryKey: groupQueries.members(groupId),
     queryFn: () => queryFunctions.fetchGroupMembers(groupId),
     enabled: !!groupId,
   });
-};
+}
 
-export const useUserPermissionsQuery = (
+export function useUserPermissionsQuery(
   userId: string | undefined,
   permission: "edit_artists" | "is_admin",
-) => {
+) {
   return useQuery({
     queryKey: ["permissions", { userId, permission }],
     queryFn: () => queryFunctions.checkUserPermissions(userId!, permission),
     enabled: !!userId,
     staleTime: 5 * 60 * 1000, // 5 minutes - permissions don't change often
   });
-};
+}
 
-export const useCreateGroupMutation = () => {
+export function useCreateGroupMutation() {
   const queryClient = useQueryClient();
   const { toast } = useToast();
 
@@ -52,6 +53,9 @@ export const useCreateGroupMutation = () => {
       queryClient.invalidateQueries({
         queryKey: groupQueries.user(variables.userId),
       });
+      queryClient.invalidateQueries({
+        queryKey: groupQueries.all(),
+      });
       toast({
         title: "Success",
         description: "Group created successfully",
@@ -66,18 +70,22 @@ export const useCreateGroupMutation = () => {
       });
     },
   });
-};
+}
 
-export const useDeleteGroupMutation = () => {
+export function useDeleteGroupMutation() {
   const queryClient = useQueryClient();
   const { toast } = useToast();
 
   return useMutation({
     mutationFn: mutationFunctions.deleteGroup,
     onSuccess: (_data, variables) => {
+      // Invalidate all group-related queries
       queryClient.invalidateQueries({
         queryKey: groupQueries.user(variables.userId),
       });
+      queryClient.invalidateQueries({
+        queryKey: groupQueries.all(),
+      });
       toast({
         title: "Success",
         description: "Group deleted successfully",
@@ -91,9 +99,9 @@ export const useDeleteGroupMutation = () => {
       });
     },
   });
-};
+}
 
-export const useJoinGroupMutation = () => {
+export function useJoinGroupMutation() {
   const queryClient = useQueryClient();
   const { toast } = useToast();
 
@@ -116,9 +124,9 @@ export const useJoinGroupMutation = () => {
       });
     },
   });
-};
+}
 
-export const useLeaveGroupMutation = () => {
+export function useLeaveGroupMutation() {
   const queryClient = useQueryClient();
   const { toast } = useToast();
 
@@ -141,4 +149,64 @@ export const useLeaveGroupMutation = () => {
       });
     },
   });
-};
+}
+
+export function useInviteToGroupMutation(groupId: string) {
+  const queryClient = useQueryClient();
+  const { toast } = useToast();
+
+  return useMutation({
+    mutationFn: async (usernameOrEmail: string) => {
+      // Find user by username or email
+      const userResult =
+        await groupService.findUserByUsernameOrEmail(usernameOrEmail);
+
+      if (!userResult.found) {
+        const errorMessage =
+          userResult.foundBy === "email"
+            ? `No user found with email: ${usernameOrEmail}`
+            : "User not found";
+        throw new Error(errorMessage);
+      }
+
+      // Check if user is already in the group
+      const isAlreadyMember = await groupService.checkIfUserInGroup(
+        groupId,
+        userResult.userId!,
+      );
+      if (isAlreadyMember) {
+        throw new Error("User is already in this group");
+      }
+
+      // Add user to group
+      await groupService.addUserToGroup(groupId, userResult.userId!);
+
+      return {
+        usernameOrEmail,
+        foundBy: userResult.foundBy,
+        userId: userResult.userId!,
+      };
+    },
+    onSuccess: (data) => {
+      // Invalidate group members query to refresh the list
+      queryClient.invalidateQueries({
+        queryKey: groupQueries.members(groupId),
+      });
+
+      toast({
+        title: "Member Added",
+        description: `${data.usernameOrEmail} has been added to the group`,
+      });
+    },
+    onError: (error) => {
+      toast({
+        title: "Error",
+        description:
+          error instanceof Error
+            ? error.message
+            : "Failed to invite user to group",
+        variant: "destructive",
+      });
+    },
+  });
+}
diff --git a/src/hooks/useGroups.ts b/src/hooks/useGroups.ts
index 0ed2bee..67b1918 100644
--- a/src/hooks/useGroups.ts
+++ b/src/hooks/useGroups.ts
@@ -1,16 +1,14 @@
 import {
   useUserGroupsQuery,
-  useCreateGroupMutation,
   useDeleteGroupMutation,
   useJoinGroupMutation,
-  useLeaveGroupMutation,
 } from "./queries/useGroupsQuery";
 import { groupService } from "@/services/groupService";
 import { useToast } from "@/components/ui/use-toast";
 import type { GroupMember } from "@/types/groups";
 import { useAuth } from "@/contexts/AuthContext";
 
-export const useGroups = () => {
+export function useGroups() {
   const { user, loading } = useAuth();
   const { toast } = useToast();
 
@@ -20,34 +18,10 @@ export const useGroups = () => {
     refetch: fetchUserGroups,
   } = useUserGroupsQuery(user?.id);
 
-  const createGroupMutation = useCreateGroupMutation();
   const deleteGroupMutation = useDeleteGroupMutation();
   const joinGroupMutation = useJoinGroupMutation();
-  const leaveGroupMutation = useLeaveGroupMutation();
 
-  const createGroup = async (name: string, description?: string) => {
-    if (!user) {
-      toast({
-        title: "Error",
-        description: "You must be logged in to create a group",
-        variant: "destructive",
-      });
-      return null;
-    }
-
-    try {
-      const group = await createGroupMutation.mutateAsync({
-        name,
-        description,
-        userId: user.id,
-      });
-      return group;
-    } catch (error) {
-      return null;
-    }
-  };
-
-  const joinGroup = async (groupId: string) => {
+  async function joinGroup(groupId: string) {
     if (!user) return false;
 
     try {
@@ -59,23 +33,9 @@ export const useGroups = () => {
     } catch (error) {
       return false;
     }
-  };
-
-  const leaveGroup = async (groupId: string) => {
-    if (!user) return false;
-
-    try {
-      await leaveGroupMutation.mutateAsync({
-        groupId,
-        userId: user.id,
-      });
-      return true;
-    } catch (error) {
-      return false;
-    }
-  };
+  }
 
-  const deleteGroup = async (groupId: string) => {
+  async function deleteGroup(groupId: string) {
     if (!user) return false;
 
     try {
@@ -87,10 +47,10 @@ export const useGroups = () => {
     } catch (error) {
       return false;
     }
-  };
+  }
 
   // Keep some legacy functions that use groupService directly
-  const inviteToGroup = async (groupId: string, usernameOrEmail: string) => {
+  async function inviteToGroup(groupId: string, usernameOrEmail: string) {
     if (!user) return false;
 
     try {
@@ -155,13 +115,13 @@ export const useGroups = () => {
       });
       return false;
     }
-  };
+  }
 
-  const getGroupMembers = async (groupId: string): Promise<GroupMember[]> => {
+  async function getGroupMembers(groupId: string): Promise<GroupMember[]> {
     return groupService.getGroupMembers(groupId);
-  };
+  }
 
-  const removeMemberFromGroup = async (groupId: string, userId: string) => {
+  async function removeMemberFromGroup(groupId: string, userId: string) {
     if (!user) return false;
 
     try {
@@ -180,24 +140,19 @@ export const useGroups = () => {
       });
       return false;
     }
-  };
-
-  const getGroupById = async (groupId: string) => {
-    return groupService.getGroupById(groupId);
-  };
+  }
 
   return {
     user,
     groups,
     loading: loading || groupsLoading,
-    createGroup,
     joinGroup,
-    leaveGroup,
+
     inviteToGroup,
     deleteGroup,
     getGroupMembers,
     removeMemberFromGroup,
-    getGroupById,
+
     fetchUserGroups,
   };
-};
+}
diff --git a/src/pages/GroupDetail.tsx b/src/pages/GroupDetail.tsx
index fa6c96f..3168d67 100644
--- a/src/pages/GroupDetail.tsx
+++ b/src/pages/GroupDetail.tsx
@@ -13,6 +13,7 @@ import { Users, UserMinus, Crown } from "lucide-react";
 import { useGroups } from "@/hooks/useGroups";
 import { useToast } from "@/components/ui/use-toast";
 import { InviteManagement } from "@/components/Groups/InviteManagement";
+import { AddMemberForm } from "@/components/Groups/AddMemberForm";
 import { Button } from "@/components/ui/button";
 import {
   useGroupDetailQuery,
@@ -21,7 +22,7 @@ import {
 import { useQueryClient } from "@tanstack/react-query";
 import { groupQueries } from "@/services/queries";
 
-const GroupDetail = () => {
+function GroupDetail() {
   const { groupId } = useParams<{ groupId: string }>();
   const navigate = useNavigate();
   const { user, removeMemberFromGroup, loading: authLoading } = useGroups();
@@ -64,26 +65,6 @@ const GroupDetail = () => {
     }
   }, [groupId, user, authLoading, groupError, navigate, toast]);
 
-  const handleRemoveMember = async (memberId: string, memberUserId: string) => {
-    if (!groupId || !user) return;
-
-    if (
-      window.confirm(
-        "Are you sure you want to remove this member from the group?",
-      )
-    ) {
-      setRemovingMember(memberId);
-      const success = await removeMemberFromGroup(groupId, memberUserId);
-      if (success) {
-        // Refresh the member list using React Query
-        queryClient.invalidateQueries({
-          queryKey: groupQueries.members(groupId),
-        });
-      }
-      setRemovingMember(null);
-    }
-  };
-
   // Show loading while checking authentication
   if (authLoading) {
     return (
@@ -182,6 +163,9 @@ const GroupDetail = () => {
           </TabsList>
 
           <TabsContent value="members" className="space-y-4">
+            {/* Member Invitation Form - Only show for creators */}
+            {isCreator && <AddMemberForm groupId={groupId!} />}
+
             <Card className="bg-white/10 border-purple-400/30">
               <CardHeader>
                 <div className="flex items-center justify-between">
@@ -273,6 +257,26 @@ const GroupDetail = () => {
       </div>
     </div>
   );
-};
+
+  async function handleRemoveMember(memberId: string, memberUserId: string) {
+    if (!groupId || !user) return;
+
+    if (
+      window.confirm(
+        "Are you sure you want to remove this member from the group?",
+      )
+    ) {
+      setRemovingMember(memberId);
+      const success = await removeMemberFromGroup(groupId, memberUserId);
+      if (success) {
+        // Refresh the member list using React Query
+        queryClient.invalidateQueries({
+          queryKey: groupQueries.members(groupId),
+        });
+      }
+      setRemovingMember(null);
+    }
+  }
+}
 
 export default GroupDetail;
diff --git a/src/pages/Groups.tsx b/src/pages/Groups.tsx
index aefbc94..cbafffe 100644
--- a/src/pages/Groups.tsx
+++ b/src/pages/Groups.tsx
@@ -1,45 +1,17 @@
 import { useState } from "react";
 import { useNavigate } from "react-router-dom";
-import { AppHeader } from "@/components/AppHeader";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Label } from "@/components/ui/label";
-import { Users, Trash2, UserPlus, Crown, Link } from "lucide-react";
 import { useGroups } from "@/hooks/useGroups";
-import { useToast } from "@/components/ui/use-toast";
-import { Badge } from "@/components/ui/badge";
-import { InviteManagement } from "@/components/Groups/InviteManagement";
 import { DeleteGroupDialog } from "@/components/DeleteGroupDialog";
+import { CreateGroupDialog } from "@/components/Groups/CreateGroupDialog";
+import { SignInRequired } from "@/components/Groups/SignInRequired";
+import { GroupsHeader } from "@/components/Groups/GroupsHeader";
+import { MyGroupsList } from "@/components/Groups/MyGroupsList";
 
-const Groups = () => {
+function Groups() {
   const navigate = useNavigate();
-  const {
-    user,
-    groups,
-    loading,
-    createGroup,
-    leaveGroup,
-    deleteGroup,
-    inviteToGroup,
-  } = useGroups();
-  const { toast } = useToast();
-  const [newGroupName, setNewGroupName] = useState("");
-  const [newGroupDescription, setNewGroupDescription] = useState("");
-  const [inviteUsername, setInviteUsername] = useState("");
-  const [invitingToGroup, setInvitingToGroup] = useState<string | null>(null);
-  const [selectedGroupForInvites, setSelectedGroupForInvites] =
-    useState<string>("");
-  const [creating, setCreating] = useState(false);
-  const [inviting, setInviting] = useState(false);
+  const { user, groups, loading, deleteGroup } = useGroups();
+  const [createDialogOpen, setCreateDialogOpen] = useState(false);
+
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [groupToDelete, setGroupToDelete] = useState<{
     id: string;
@@ -47,354 +19,43 @@ const Groups = () => {
   } | null>(null);
   const [deleting, setDeleting] = useState(false);
 
-  const handleCreateGroup = async () => {
-    if (!newGroupName.trim()) {
-      toast({
-        title: "Error",
-        description: "Group name is required",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    setCreating(true);
-    const result = await createGroup(
-      newGroupName.trim(),
-      newGroupDescription.trim() || undefined,
-    );
-    if (result) {
-      setNewGroupName("");
-      setNewGroupDescription("");
-    }
-    setCreating(false);
-  };
-
-  const handleInviteUser = async (groupId: string) => {
-    if (!inviteUsername.trim()) {
-      toast({
-        title: "Error",
-        description: "Username or email is required",
-        variant: "destructive",
-      });
-      return;
-    }
-
-    setInviting(true);
-    const success = await inviteToGroup(groupId, inviteUsername.trim());
-    if (success) {
-      setInviteUsername("");
-      setInvitingToGroup(null);
-    }
-    setInviting(false);
-  };
-
-  const handleDeleteGroup = (groupId: string, groupName: string) => {
+  function handleDeleteGroup(groupId: string, groupName: string) {
     setGroupToDelete({ id: groupId, name: groupName });
     setDeleteDialogOpen(true);
-  };
+  }
 
-  const confirmDeleteGroup = async () => {
+  async function confirmDeleteGroup() {
     if (!groupToDelete) return;
-
     setDeleting(true);
     await deleteGroup(groupToDelete.id);
     setDeleting(false);
     setDeleteDialogOpen(false);
     setGroupToDelete(null);
-  };
-
-  const handleLeaveGroup = async (groupId: string) => {
-    if (window.confirm("Are you sure you want to leave this group?")) {
-      await leaveGroup(groupId);
-    }
-  };
+  }
 
   if (!user) {
-    return (
-      <div className="min-h-screen bg-app-gradient flex items-center justify-center">
-        <Card className="w-full max-w-md">
-          <CardHeader>
-            <CardTitle>Sign in required</CardTitle>
-            <CardDescription>Please sign in to manage groups</CardDescription>
-          </CardHeader>
-          <CardContent>
-            <Button onClick={() => navigate("/")} className="w-full">
-              Go to Home
-            </Button>
-          </CardContent>
-        </Card>
-      </div>
-    );
+    return <SignInRequired />;
   }
 
   return (
     <div className="min-h-screen bg-app-gradient">
       <div className="container mx-auto px-4 py-8">
-        <AppHeader
-          showBackButton
-          backTo="/"
-          backLabel="Back to Artists"
-          title="My Groups"
-          subtitle="Create and manage your festival groups"
-        />
-
-        <Tabs defaultValue="my-groups" className="w-full">
-          <TabsList className="grid w-full grid-cols-3 bg-white/10">
-            <TabsTrigger
-              value="my-groups"
-              className="text-white data-[state=active]:bg-purple-600"
-            >
-              My Groups
-            </TabsTrigger>
-            <TabsTrigger
-              value="create-group"
-              className="text-white data-[state=active]:bg-purple-600"
-            >
-              Create Group
-            </TabsTrigger>
-            <TabsTrigger
-              value="invite-links"
-              className="text-white data-[state=active]:bg-purple-600"
-            >
-              Invite Links
-            </TabsTrigger>
-          </TabsList>
-
-          <TabsContent value="my-groups" className="space-y-4">
-            {loading ? (
-              <div className="text-center text-white">Loading groups...</div>
-            ) : groups.length === 0 ? (
-              <Card className="bg-white/10 border-purple-400/30">
-                <CardContent className="text-center py-12">
-                  <Users className="h-12 w-12 mx-auto mb-4 text-purple-300" />
-                  <h3 className="text-xl font-semibold text-white mb-2">
-                    No groups yet
-                  </h3>
-                  <p className="text-purple-200 mb-4">
-                    Create your first group to start sharing votes with friends
-                  </p>
-                </CardContent>
-              </Card>
-            ) : (
-              <div className="space-y-4">
-                {groups.map((group) => (
-                  <Card
-                    key={group.id}
-                    className="bg-white/10 border-purple-400/30"
-                  >
-                    <CardHeader className="pb-3">
-                      <div className="flex items-start justify-between">
-                        <div>
-                          <CardTitle className="flex items-center space-x-2 text-white">
-                            <span>{group.name}</span>
-                            {group.is_creator && (
-                              <Badge
-                                variant="secondary"
-                                className="text-xs bg-purple-600/50 text-purple-100"
-                              >
-                                <Crown className="h-3 w-3 mr-1" />
-                                Creator
-                              </Badge>
-                            )}
-                          </CardTitle>
-                          {group.description && (
-                            <CardDescription className="mt-1 text-purple-200">
-                              {group.description}
-                            </CardDescription>
-                          )}
-                        </div>
-                        <div className="flex space-x-2">
-                          <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => navigate(`/groups/${group.id}`)}
-                            className="bg-white/10 border-purple-400/30 text-white hover:bg-white/20"
-                          >
-                            <Users className="h-4 w-4" />
-                          </Button>
-                          {group.is_creator ? (
-                            <>
-                              <Button
-                                variant="outline"
-                                size="sm"
-                                onClick={() =>
-                                  setSelectedGroupForInvites(group.id)
-                                }
-                                className="bg-white/10 border-purple-400/30 text-white hover:bg-white/20"
-                              >
-                                <Link className="h-4 w-4" />
-                              </Button>
-                              <Button
-                                variant="destructive"
-                                size="sm"
-                                onClick={() =>
-                                  handleDeleteGroup(group.id, group.name)
-                                }
-                              >
-                                <Trash2 className="h-4 w-4" />
-                              </Button>
-                            </>
-                          ) : (
-                            <Button
-                              variant="outline"
-                              size="sm"
-                              onClick={() => handleLeaveGroup(group.id)}
-                              className="bg-white/10 border-purple-400/30 text-white hover:bg-white/20"
-                            >
-                              Leave
-                            </Button>
-                          )}
-                        </div>
-                      </div>
-                    </CardHeader>
-                    <CardContent>
-                      <div className="flex items-center justify-between">
-                        <div className="flex items-center space-x-2 text-sm text-purple-200">
-                          <Users className="h-4 w-4" />
-                          <span>{group.member_count} members</span>
-                        </div>
-                        {group.is_creator && (
-                          <div className="flex items-center space-x-2">
-                            <Input
-                              placeholder="Username or email"
-                              value={
-                                invitingToGroup === group.id
-                                  ? inviteUsername
-                                  : ""
-                              }
-                              onChange={(e) => {
-                                setInvitingToGroup(group.id);
-                                setInviteUsername(e.target.value);
-                              }}
-                              className="w-40 h-8 bg-white/10 border-purple-400/30 text-white"
-                            />
-                            <Button
-                              size="sm"
-                              onClick={() => handleInviteUser(group.id)}
-                              disabled={
-                                !inviteUsername.trim() ||
-                                inviting ||
-                                invitingToGroup !== group.id
-                              }
-                              className="bg-purple-600 hover:bg-purple-700"
-                            >
-                              <UserPlus className="h-4 w-4" />
-                            </Button>
-                          </div>
-                        )}
-                      </div>
-                    </CardContent>
-                  </Card>
-                ))}
-              </div>
-            )}
-          </TabsContent>
+        <GroupsHeader onCreate={() => setCreateDialogOpen(true)} />
 
-          <TabsContent value="create-group" className="space-y-4">
-            <Card className="bg-white/10 border-purple-400/30">
-              <CardHeader>
-                <CardTitle className="text-white">Create New Group</CardTitle>
-                <CardDescription className="text-purple-200">
-                  Create a group to share and compare votes with friends
-                </CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <div>
-                  <Label htmlFor="group-name" className="text-white">
-                    Group Name
-                  </Label>
-                  <Input
-                    id="group-name"
-                    placeholder="e.g., Festival Squad, Close Friends, Work Colleagues"
-                    value={newGroupName}
-                    onChange={(e) => setNewGroupName(e.target.value)}
-                    className="bg-white/10 border-purple-400/30 text-white"
-                  />
-                </div>
-                <div>
-                  <Label htmlFor="group-description" className="text-white">
-                    Description (Optional)
-                  </Label>
-                  <Textarea
-                    id="group-description"
-                    placeholder="What's this group for?"
-                    value={newGroupDescription}
-                    onChange={(e) => setNewGroupDescription(e.target.value)}
-                    rows={3}
-                    className="bg-white/10 border-purple-400/30 text-white"
-                  />
-                </div>
-                <Button
-                  onClick={handleCreateGroup}
-                  disabled={!newGroupName.trim() || creating}
-                  className="w-full bg-purple-600 hover:bg-purple-700"
-                >
-                  {creating ? "Creating..." : "Create Group"}
-                </Button>
-              </CardContent>
-            </Card>
-          </TabsContent>
-
-          <TabsContent value="invite-links" className="space-y-4">
-            {selectedGroupForInvites ? (
-              <div>
-                <Button
-                  variant="outline"
-                  className="mb-4 bg-white/10 border-purple-400/30 text-white hover:bg-white/20"
-                  onClick={() => setSelectedGroupForInvites("")}
-                >
-                  ← Back to Groups
-                </Button>
-                <InviteManagement
-                  groupId={selectedGroupForInvites}
-                  groupName={
-                    groups.find((g) => g.id === selectedGroupForInvites)
-                      ?.name || ""
-                  }
-                />
-              </div>
-            ) : (
-              <div>
-                <h3 className="text-lg font-semibold mb-4 text-white">
-                  Select a Group to Manage Invites
-                </h3>
-                <div className="space-y-2">
-                  {groups
-                    .filter((g) => g.is_creator)
-                    .map((group) => (
-                      <Card
-                        key={group.id}
-                        className="cursor-pointer hover:bg-white/20 bg-white/10 border-purple-400/30"
-                        onClick={() => setSelectedGroupForInvites(group.id)}
-                      >
-                        <CardContent className="flex items-center justify-between p-4">
-                          <div>
-                            <h4 className="font-medium text-white">
-                              {group.name}
-                            </h4>
-                            <p className="text-sm text-purple-200">
-                              {group.member_count} members
-                            </p>
-                          </div>
-                          <Link className="h-5 w-5 text-purple-300" />
-                        </CardContent>
-                      </Card>
-                    ))}
-                  {groups.filter((g) => g.is_creator).length === 0 && (
-                    <Card className="bg-white/10 border-purple-400/30">
-                      <CardContent className="text-center py-8">
-                        <p className="text-purple-200">
-                          You need to be a group creator to manage invite links.
-                        </p>
-                      </CardContent>
-                    </Card>
-                  )}
-                </div>
-              </div>
-            )}
-          </TabsContent>
-        </Tabs>
+        <MyGroupsList
+          groups={groups}
+          loading={loading}
+          onDelete={handleDeleteGroup}
+        />
 
+        <CreateGroupDialog
+          isOpen={createDialogOpen}
+          onOpenChange={setCreateDialogOpen}
+          onGroupCreated={(groupId) => {
+            navigate(`/groups/${groupId}`);
+            setCreateDialogOpen(false);
+          }}
+        />
         <DeleteGroupDialog
           isOpen={deleteDialogOpen}
           onClose={() => {
@@ -408,6 +69,6 @@ const Groups = () => {
       </div>
     </div>
   );
-};
+}
 
 export default Groups;
diff --git a/src/services/groupService.ts b/src/services/groupService.ts
index df8c2de..8116408 100644
--- a/src/services/groupService.ts
+++ b/src/services/groupService.ts
@@ -35,39 +35,6 @@ export const groupService = {
     return groupsWithCounts;
   },
 
-  async createGroup(
-    name: string,
-    description: string | undefined,
-    userId: string,
-  ) {
-    const { data: group, error } = await supabase
-      .from("groups")
-      .insert({
-        name,
-        description,
-        created_by: userId,
-      })
-      .select()
-      .single();
-
-    if (error) {
-      throw new Error(error.message || "Failed to create group");
-    }
-
-    // Add creator as first member
-    const { error: memberError } = await supabase.from("group_members").insert({
-      group_id: group.id,
-      user_id: userId,
-      role: "creator",
-    });
-
-    if (memberError) {
-      throw new Error("Group created but failed to add you as member");
-    }
-
-    return group;
-  },
-
   async joinGroup(groupId: string, userId: string): Promise<void> {
     const { error } = await supabase.from("group_members").insert({
       group_id: groupId,
@@ -79,18 +46,6 @@ export const groupService = {
     }
   },
 
-  async leaveGroup(groupId: string, userId: string): Promise<void> {
-    const { error } = await supabase
-      .from("group_members")
-      .delete()
-      .eq("group_id", groupId)
-      .eq("user_id", userId);
-
-    if (error) {
-      throw new Error("Failed to leave group");
-    }
-  },
-
   async deleteGroup(groupId: string, userId: string): Promise<void> {
     const { error } = await supabase
       .from("groups")
@@ -108,7 +63,7 @@ export const groupService = {
     const { data: profile, error: profileError } = await supabase
       .from("profiles")
       .select("id")
-      .or(`username.eq.${usernameOrEmail},email.eq.${usernameOrEmail}`)
+      .or(`username.ilike.${usernameOrEmail},email.ilike.${usernameOrEmail}`)
       .single();
 
     // If not found in profiles, check auth.users by email
@@ -141,9 +96,9 @@ export const groupService = {
       .select("id")
       .eq("group_id", groupId)
       .eq("user_id", userId)
-      .single();
+      .limit(1);
 
-    return !!existingMember;
+    return !!(existingMember && existingMember.length);
   },
 
   async addUserToGroup(groupId: string, userId: string): Promise<void> {
diff --git a/supabase/migrations/20250811120000_fix_group_deletion_policy.sql b/supabase/migrations/20250811120000_fix_group_deletion_policy.sql
new file mode 100644
index 0000000..0bc3483
--- /dev/null
+++ b/supabase/migrations/20250811120000_fix_group_deletion_policy.sql
@@ -0,0 +1,7 @@
+-- Fix missing DELETE policy for groups table
+-- This policy was dropped in migration 20250623102838_migration.sql but never recreated
+
+CREATE POLICY "Group creators can delete their groups" 
+ON public.groups 
+FOR DELETE 
+USING (created_by = auth.uid());
\ No newline at end of file
diff --git a/supabase/migrations/20250811130000_fix_case_insensitive_email_lookup.sql b/supabase/migrations/20250811130000_fix_case_insensitive_email_lookup.sql
new file mode 100644
index 0000000..f7c3064
--- /dev/null
+++ b/supabase/migrations/20250811130000_fix_case_insensitive_email_lookup.sql
@@ -0,0 +1,22 @@
+-- Update get_user_id_by_email function to be case insensitive
+-- This ensures consistent behavior across the entire user lookup system
+
+CREATE OR REPLACE FUNCTION public.get_user_id_by_email(user_email text)
+RETURNS uuid
+LANGUAGE plpgsql
+SECURITY DEFINER SET search_path = ''
+AS $function$
+DECLARE
+  user_id UUID;
+BEGIN
+  -- Use ILIKE for case insensitive email matching
+  -- Email standards specify that the local part can be case sensitive,
+  -- but most providers treat it as case insensitive, so we follow that convention
+  SELECT id INTO user_id
+  FROM auth.users
+  WHERE email ILIKE user_email
+  LIMIT 1;
+  
+  RETURN user_id;
+END;
+$function$;
\ No newline at end of file