diff --git a/.gitattributes b/.gitattributes
new file mode 100644
index 0000000..94f480d
--- /dev/null
+++ b/.gitattributes
@@ -0,0 +1 @@
+* text=auto eol=lf
\ No newline at end of file
diff --git a/frontend/components/profile-page.tsx b/frontend/components/profile-page.tsx
index 38f0c11..38589ca 100644
--- a/frontend/components/profile-page.tsx
+++ b/frontend/components/profile-page.tsx
@@ -11,7 +11,7 @@ const headerProps: ProfileHeaderProps = {
   user: {
     description: "I'm a passionate student leader with a keen interest in campus politics and public speaking.",
     name: 'Jane Doe',
-    email: '',
+    email: 'janedoe@gmail.com',
     building: 'Building A',
     room: 'Room 101',
     twitterHandle: '@janedoe',
diff --git a/frontend/components/profile/group-membership-card.tsx b/frontend/components/profile/group-membership-card.tsx
index bbb14e3..f94ce67 100644
--- a/frontend/components/profile/group-membership-card.tsx
+++ b/frontend/components/profile/group-membership-card.tsx
@@ -15,36 +15,38 @@ export interface MembershipProps {
 
 export function GroupMembershipCard({ membership }: { membership: MembershipProps }) {
   return (
-    <Card
-      className={`h-full transition-shadow hover:shadow-md ${membership.primary ? 'border-blue-500' : ''} bg-gradient-to-br from-blue-50 to-purple-50`}
-    >
-      <CardHeader className='p-4'>
-        <CardTitle className='text-lg flex items-center justify-between text-gray-800'>
-          {membership.name}
-          {membership.primary && (
-            <Badge variant='secondary' className='bg-blue-100 text-blue-800'>
-              Primary
-            </Badge>
-          )}
-        </CardTitle>
-        <CardDescription className='text-xs text-gray-500'>
-          <div className='flex items-center'>
-            <CalendarIcon className='mr-1 h-3 w-3' />
-            Started: {membership.startDate}
-            {membership.endDate && ` | Ended: ${membership.endDate}`}
-          </div>
-        </CardDescription>
-      </CardHeader>
-      <CardContent className='p-4 pt-0'>
-        <p className='text-sm text-gray-600'>
-          <strong>Role:</strong> {membership.currentRole}
-        </p>
-        {membership.pastRoles.length > 0 && (
-          <p className='text-sm text-gray-600 mt-1'>
-            <strong>Past:</strong> {membership.pastRoles.join(', ')}
+    <a href={`/groups/${membership.id}`}>
+      <Card
+        className={`h-full transition-shadow hover:shadow-md ${membership.primary ? 'border-blue-500' : ''} bg-gradient-to-br from-blue-50 to-purple-50`}
+      >
+        <CardHeader className='p-4'>
+          <CardTitle className='text-lg flex items-center justify-between text-gray-800'>
+            {membership.name}
+            {membership.primary && (
+              <Badge variant='secondary' className='bg-blue-100 text-blue-800'>
+                Primary
+              </Badge>
+            )}
+          </CardTitle>
+          <CardDescription className='text-xs text-gray-500'>
+            <div className='flex items-center'>
+              <CalendarIcon className='mr-1 h-3 w-3' />
+              Started: {membership.startDate}
+              {membership.endDate && ` | Ended: ${membership.endDate}`}
+            </div>
+          </CardDescription>
+        </CardHeader>
+        <CardContent className='p-4 pt-0'>
+          <p className='text-sm text-gray-600'>
+            <strong>Role:</strong> {membership.currentRole}
           </p>
-        )}
-      </CardContent>
-    </Card>
+          {membership.pastRoles.length > 0 && (
+            <p className='text-sm text-gray-600 mt-1'>
+              <strong>Past:</strong> {membership.pastRoles.join(', ')}
+            </p>
+          )}
+        </CardContent>
+      </Card>
+    </a>
   );
 }
diff --git a/frontend/components/profile/group-memberships.tsx b/frontend/components/profile/group-memberships.tsx
index d62614c..4558bdc 100644
--- a/frontend/components/profile/group-memberships.tsx
+++ b/frontend/components/profile/group-memberships.tsx
@@ -6,6 +6,7 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 export function GroupMemberships() {
   const memberships = [
     {
+      id: '1',
       name: 'Student Council',
       startDate: '2022-09-01',
       currentRole: 'President',
@@ -13,14 +14,15 @@ export function GroupMemberships() {
       primary: true,
     },
     {
+      id: '2',
       name: 'Debate Club',
       startDate: '2021-09-01',
       currentRole: 'Member',
       pastRoles: ['Vice President'],
       endDate: '2023-05-31',
     },
-    { name: 'Chess Club', startDate: '2022-01-15', currentRole: 'Treasurer', pastRoles: [] },
-    { name: 'Environmental Society', startDate: '2023-03-01', currentRole: 'Member', pastRoles: [] },
+    { id: '3', name: 'Chess Club', startDate: '2022-01-15', currentRole: 'Treasurer', pastRoles: [] },
+    { id: '4', name: 'Environmental Society', startDate: '2023-03-01', currentRole: 'Member', pastRoles: [] },
   ];
 
   return (