diff --git a/components/project-details/project-layout.tsx b/components/project-details/project-layout.tsx
index 49dfab7ad..4e216038c 100644
--- a/components/project-details/project-layout.tsx
+++ b/components/project-details/project-layout.tsx
@@ -5,6 +5,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ProjectSidebar } from './project-sidebar';
 import { ProjectDetails } from './project-details';
 import { ProjectAbout } from './project-about';
+import { ProjectTeam } from './project-team';
 import { useIsMobile } from '@/hooks/use-mobile';
 import { CrowdfundingProject, CrowdfundData } from '@/lib/api/types';
 import { ChevronLeftCircle, ChevronRightCircle } from 'lucide-react';
@@ -195,42 +196,7 @@ export function ProjectLayout({ project }: ProjectLayoutProps) {
                 <ProjectDetails project={project} />
               </TabsContent>
               <TabsContent value='team' className='mt-0'>
-                <div className='space-y-6 text-white'>
-                  <h2 className='text-2xl font-bold text-white'>Team</h2>
-                  {project.team && project.team.length > 0 ? (
-                    <div className='grid gap-4 md:grid-cols-2'>
-                      {project.team.map((member, index) => (
-                        <div
-                          key={index}
-                          className='rounded-lg border border-gray-800 bg-[#1A1A1A] p-4'
-                        >
-                          <div className='flex items-center gap-3'>
-                            <div className='flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 font-semibold text-white'>
-                              {member.userId?.profile?.firstName[0]}
-                              {member.userId?.profile?.lastName[0]}
-                            </div>
-                            <div>
-                              <h3 className='font-semibold text-white'>
-                                {member.userId?.profile?.firstName}{' '}
-                                {member.userId?.profile?.lastName}
-                              </h3>
-                              <p className='text-sm text-gray-400'>
-                                @{member.userId?.profile?.username}
-                              </p>
-                              <p className='text-sm text-[#DBF936]'>
-                                {member.role}
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                      ))}
-                    </div>
-                  ) : (
-                    <p className='text-gray-400'>
-                      No team information available.
-                    </p>
-                  )}
-                </div>
+                <ProjectTeam project={project} />
               </TabsContent>
               <TabsContent value='milestones' className='mt-0'>
                 <div className='space-y-6 text-white'>
@@ -346,42 +312,7 @@ export function ProjectLayout({ project }: ProjectLayoutProps) {
                   <ProjectDetails project={project} />
                 </TabsContent>
                 <TabsContent value='team' className='mt-0'>
-                  <div className='space-y-6 text-white'>
-                    <h2 className='text-2xl font-bold text-white'>Team</h2>
-                    {project.team && project.team.length > 0 ? (
-                      <div className='grid gap-4 md:grid-cols-2'>
-                        {project.team.map((member, index) => (
-                          <div
-                            key={index}
-                            className='rounded-lg border border-gray-800 bg-[#1A1A1A] p-4'
-                          >
-                            <div className='flex items-center gap-3'>
-                              <div className='flex h-12 w-12 items-center justify-center rounded-full bg-blue-600 font-semibold text-white'>
-                                {member.userId?.profile?.firstName[0]}
-                                {member.userId?.profile?.lastName[0]}
-                              </div>
-                              <div>
-                                <h3 className='font-semibold text-white'>
-                                  {member.userId?.profile?.firstName}{' '}
-                                  {member.userId?.profile?.lastName}
-                                </h3>
-                                <p className='text-sm text-gray-400'>
-                                  @{member.userId?.profile?.username}
-                                </p>
-                                <p className='text-sm text-[#DBF936]'>
-                                  {member.role}
-                                </p>
-                              </div>
-                            </div>
-                          </div>
-                        ))}
-                      </div>
-                    ) : (
-                      <p className='text-gray-400'>
-                        No team information available.
-                      </p>
-                    )}
-                  </div>
+                  <ProjectTeam project={project} />
                 </TabsContent>
                 <TabsContent value='milestones' className='mt-0'>
                   <div className='space-y-6 text-white'>
diff --git a/components/project-details/project-team.tsx b/components/project-details/project-team.tsx
new file mode 100644
index 000000000..1f7e10767
--- /dev/null
+++ b/components/project-details/project-team.tsx
@@ -0,0 +1,132 @@
+'use client';
+
+import { CrowdfundingProject } from '@/lib/api/types';
+import Image from 'next/image';
+
+interface ProjectTeamProps {
+  project: CrowdfundingProject;
+}
+
+interface TeamMember {
+  id: string;
+  name: string;
+  role: 'OWNER' | 'MEMBER';
+  avatar?: string;
+}
+
+// Mock data
+const mockTeamMembers: TeamMember[] = [
+  {
+    id: '1',
+    name: 'Member Name',
+    role: 'OWNER',
+    avatar: '/avatar.png',
+  },
+  {
+    id: '2',
+    name: 'Member Name',
+    role: 'MEMBER',
+    avatar: '/avatar.png',
+  },
+  {
+    id: '3',
+    name: 'Member Name',
+    role: 'MEMBER',
+    avatar: '/avatar.png',
+  },
+  {
+    id: '4',
+    name: 'Member Name',
+    role: 'MEMBER',
+    avatar: '/avatar.png',
+  },
+];
+
+export function ProjectTeam({ project }: ProjectTeamProps) {
+  const teamMembers =
+    project.team && project.team.length > 0
+      ? project.team.map(member => ({
+          id: member.userId?._id || '',
+          name: member.userId?.profile
+            ? `${member.userId.profile.firstName} ${member.userId.profile.lastName}`
+            : 'Unknown Member',
+          role:
+            member.role === 'OWNER' ? ('OWNER' as const) : ('MEMBER' as const),
+          avatar: (member.userId?.profile as { avatar?: string })?.avatar,
+        }))
+      : mockTeamMembers;
+
+  const getRoleColor = (role: 'OWNER' | 'MEMBER') => {
+    return role === 'OWNER' ? 'text-[#DBF936]' : 'text-[#B5B5B5]';
+  };
+
+  const handleMemberClick = () => {
+    // TODO: Implement navigation to member profile
+  };
+
+  return (
+    <div>
+      <div className='space-y-2'>
+        {teamMembers.map(member => (
+          <div
+            key={member.id}
+            className='flex cursor-pointer items-center justify-between rounded px-3 py-2 transition-colors hover:bg-gray-900/30'
+            onClick={() => handleMemberClick()}
+          >
+            <div className='flex items-center space-x-4'>
+              {/* Avatar */}
+              <div className='relative'>
+                <div className='h-12 w-12 overflow-hidden rounded-full border-[0.5px] border-[#2B2B2B]'>
+                  {member.avatar ? (
+                    <Image
+                      width={48}
+                      height={48}
+                      src={member.avatar}
+                      alt={member.name}
+                      className='h-full w-full object-cover'
+                    />
+                  ) : (
+                    <Image
+                      width={48}
+                      height={48}
+                      src='/avatar.png'
+                      alt='Default avatar'
+                      className='h-full w-full object-cover'
+                    />
+                  )}
+                </div>
+              </div>
+
+              {/* Member Info */}
+              <div className='flex flex-col space-y-0.5'>
+                <span className='text-base font-normal text-white'>
+                  {member.name}
+                </span>
+                <span className={`text-sm ${getRoleColor(member.role)}`}>
+                  {member.role}
+                </span>
+              </div>
+            </div>
+
+            {/* Chevron */}
+            <svg
+              width='20'
+              height='20'
+              viewBox='0 0 20 20'
+              fill='none'
+              xmlns='http://www.w3.org/2000/svg'
+            >
+              <path
+                d='M7.5 15L12.5 10L7.5 5'
+                stroke='white'
+                strokeWidth='1.4'
+                strokeLinecap='round'
+                strokeLinejoin='round'
+              />
+            </svg>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 59d32363b..174c7bd87 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4924,6 +4924,7 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/json5": {
@@ -7086,19 +7087,6 @@
         "big-integer": "1.6.36"
       }
     },
-    "node_modules/cbor": {
-      "version": "10.0.11",
-      "resolved": "https://registry.npmjs.org/cbor/-/cbor-10.0.11.tgz",
-      "integrity": "sha512-vIwORDd/WyB8Nc23o2zNN5RrtFGlR6Fca61TtjkUXueI3Jf2DOZDl1zsshvBntZ3wZHBM9ztjnkXSmzQDaq3WA==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "nofilter": "^3.0.2"
-      },
-      "engines": {
-        "node": ">=20"
-      }
-    },
     "node_modules/ccount": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
@@ -9005,13 +8993,6 @@
         "node": ">=12.0.0"
       }
     },
-    "node_modules/exponential-backoff": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/exponential-backoff/-/exponential-backoff-3.1.2.tgz",
-      "integrity": "sha512-8QxYTVXUkuy7fIIoitQkPwGonB8F3Zj8eEO8Sqg9Zv/bkI7RJAzowee4gr81Hak/dUTpA2Z7VfQgoijjPNlUZA==",
-      "license": "Apache-2.0",
-      "peer": true
-    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -9095,13 +9076,6 @@
       "integrity": "sha512-wpYMUmFu5f00Sm0cj2pfivpmawLZ0NKdviQ4w9zJeR8JVtOpOxHmLaJuj0vxvGqMJQWyP/COUkF75/57OKyRag==",
       "license": "MIT"
     },
-    "node_modules/fastestsmallesttextencoderdecoder": {
-      "version": "1.0.22",
-      "resolved": "https://registry.npmjs.org/fastestsmallesttextencoderdecoder/-/fastestsmallesttextencoderdecoder-1.0.22.tgz",
-      "integrity": "sha512-Pb8d48e+oIuY4MaM64Cd7OW1gt4nxCHs7/ddPPZ/Ic3sg8yVGM7O9wDvZ7us6ScaUupzM+pfBolwtYhN1IxBIw==",
-      "license": "CC0-1.0",
-      "peer": true
-    },
     "node_modules/fastq": {
       "version": "1.19.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
@@ -9336,26 +9310,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/generate-function": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.3.1.tgz",
-      "integrity": "sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "is-property": "^1.0.2"
-      }
-    },
-    "node_modules/generate-object-property": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-      "integrity": "sha512-TuOwZWgJ2VAMEGJvAyPWvpqxSANF0LDpmyHauMjFYzaACvn+QTT/AZomvPCzVBV7yDN3OmwHQ5OvHaeLKre3JQ==",
-      "license": "MIT",
-      "peer": true,
-      "dependencies": {
-        "is-property": "^1.0.0"
-      }
-    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -10634,13 +10588,6 @@
       "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "license": "MIT"
     },
-    "node_modules/is-property": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-      "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/is-regex": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
@@ -11585,13 +11532,6 @@
         "loose-envify": "cli.js"
       }
     },
-    "node_modules/lru_map": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/lru_map/-/lru_map-0.4.1.tgz",
-      "integrity": "sha512-I+lBvqMMFfqaV8CJCISjI3wbjmwVu/VyOoU7+qtu9d7ioW5klMgsTTiUOUp+DJvfTTzKXoPbyC6YfgkNcyPSOg==",
-      "license": "MIT",
-      "peer": true
-    },
     "node_modules/lru-cache": {
       "version": "10.4.3",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -15102,13 +15042,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==",
-      "license": "ISC",
-      "peer": true
-    },
     "node_modules/sha.js": {
       "version": "2.4.12",
       "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.12.tgz",
@@ -15472,16 +15405,6 @@
       "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
       "license": "MIT"
     },
-    "node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">= 0.6"
-      }
-    },
     "node_modules/stop-iteration-iterator": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/stop-iteration-iterator/-/stop-iteration-iterator-1.1.0.tgz",
@@ -16042,16 +15965,6 @@
         "node": ">=8.0"
       }
     },
-    "node_modules/toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.6"
-      }
-    },
     "node_modules/toml": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/toml/-/toml-3.0.0.tgz",
@@ -16311,6 +16224,7 @@
       "version": "5.9.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
       "integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
+      "dev": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -17194,16 +17108,6 @@
         "node": ">=18.0.0"
       }
     },
-    "node_modules/xtend": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
-      "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==",
-      "license": "MIT",
-      "peer": true,
-      "engines": {
-        "node": ">=0.4"
-      }
-    },
     "node_modules/y18n": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.3.tgz",