diff --git a/package-lock.json b/package-lock.json
index f86f35f..5bb789f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,7 +16,8 @@
         "astro-icon": "^0.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "tailwindcss": "^3.3.3"
+        "tailwindcss": "^3.3.3",
+        "zod": "^3.22.4"
       },
       "devDependencies": {
         "@typescript-eslint/parser": "^6.7.5",
@@ -1731,6 +1732,14 @@
         "svgo": "^2.8.0"
       }
     },
+    "node_modules/astro/node_modules/zod": {
+      "version": "3.21.1",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.1.tgz",
+      "integrity": "sha512-+dTu2m6gmCbO9Ahm4ZBDapx2O6ZY9QSPXst2WXjcznPMwf2YNpn3RevLx4KkZp1OPW/ouFcoBtBzFz/LeY69oA==",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
     "node_modules/astrojs-compiler-sync": {
       "version": "0.3.3",
       "resolved": "https://registry.npmjs.org/astrojs-compiler-sync/-/astrojs-compiler-sync-0.3.3.tgz",
@@ -9650,9 +9659,9 @@
       }
     },
     "node_modules/zod": {
-      "version": "3.21.1",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-3.21.1.tgz",
-      "integrity": "sha512-+dTu2m6gmCbO9Ahm4ZBDapx2O6ZY9QSPXst2WXjcznPMwf2YNpn3RevLx4KkZp1OPW/ouFcoBtBzFz/LeY69oA==",
+      "version": "3.22.4",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-3.22.4.tgz",
+      "integrity": "sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==",
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/package.json b/package.json
index f9d7393..52e72f4 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,8 @@
     "astro-icon": "^0.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "tailwindcss": "^3.3.3"
+    "tailwindcss": "^3.3.3",
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@typescript-eslint/parser": "^6.7.5",
diff --git a/public/images/demeface.png b/public/images/demeface.png
deleted file mode 100644
index 2c04212..0000000
Binary files a/public/images/demeface.png and /dev/null differ
diff --git a/public/images/collaborators.svg b/src/assets/images/collaborators.svg
similarity index 100%
rename from public/images/collaborators.svg
rename to src/assets/images/collaborators.svg
diff --git a/public/images/cops_logo.png b/src/assets/images/cops_logo.png
similarity index 100%
rename from public/images/cops_logo.png
rename to src/assets/images/cops_logo.png
diff --git a/src/assets/images/team/EshaanAgg.jpg b/src/assets/images/team/EshaanAgg.jpg
new file mode 100644
index 0000000..96acb4b
Binary files /dev/null and b/src/assets/images/team/EshaanAgg.jpg differ
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 714c387..2899725 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,6 @@
 ---
 import { Image } from "astro:assets";
+import COPSLogo from "../assets/images/cops_logo.png";
 ---
 
 <footer
@@ -36,8 +37,8 @@ import { Image } from "astro:assets";
         >
           <Image
             class="logo-camera"
-            src="/images/cops_logo.png"
-            alt="COPS logo"
+            src={COPSLogo}
+            alt="COPS Logo"
             width={100}
             height={100}
           />
diff --git a/src/components/team/Collaborators.astro b/src/components/team/Collaborators.astro
index cdbbd34..db18738 100644
--- a/src/components/team/Collaborators.astro
+++ b/src/components/team/Collaborators.astro
@@ -1,9 +1,9 @@
 ---
 import { Image } from "astro:assets";
-import CollabImg from "../../../public/images/collaborators.svg";
+import CollaboratorsImage from "../../assets/images/collaborators.svg";
 ---
 
-<div class="flex flex-col items-center justify-center mt-28">
+<div class="flex flex-col items-center justify-center">
   <h1 class="text-6xl font-bold text-white">Collaborators</h1>
-  <Image src={CollabImg} alt="collaborators" class="mt-20" />
+  <Image src={CollaboratorsImage} alt="collaborators" class="mt-12" />
 </div>
diff --git a/src/components/team/TeamMemberCard.astro b/src/components/team/TeamMemberCard.astro
new file mode 100644
index 0000000..7d301d8
--- /dev/null
+++ b/src/components/team/TeamMemberCard.astro
@@ -0,0 +1,86 @@
+---
+import { Icon } from "astro-icon";
+import type { TeamMemberInterface } from "../../pages/team.astro";
+
+interface Props extends TeamMemberInterface {}
+
+const member = Astro.props;
+const socialKeys = [
+  "github",
+  "gmail",
+  "linkedin",
+  "twitter",
+  "instagram",
+] as const;
+---
+
+<div class="w-96 border-4 border-[#0077CC] rounded-lg bg-white mt-32">
+  <img
+    src=`../src/assets/images/team/${member.image}`
+    class="w-96 h-96"
+    height={96}
+    width={96}
+    alt=`A picture of ${member.name}`
+  />
+  <div class="px-7">
+    <!-- Member Name -->
+    <div>
+      <a href={member.portfolio || "#"}>
+        <h1 class="text-2xl text-[#00101B] my-5 font-bold">{member.name}</h1>
+      </a>
+      <hr />
+    </div>
+
+    <!-- Member Description -->
+    <div>
+      <h1 class="text-[#00101B] opacity-70 text-base mt-4 mb-2 font-bold">
+        About
+      </h1>
+      <p class="font-sm opacity-70">{member.description}</p>
+    </div>
+
+    <div>
+      <!-- Member Skills -->
+      <h1 class="text-[#00101B] opacity-70 text-base mt-4 mb-2 font-bold">
+        Skills
+      </h1>
+      <div class="gap-2 flex flex-row flex-wrap">
+        {
+          member.skills.map((skill) => (
+            <div class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2">
+              {skill}
+            </div>
+          ))
+        }
+      </div>
+
+      <!-- Social Links Component -->
+      <h1 class="text-[#00101B] opacity-60 font-bold text-sm my-4">
+        Let's Connect
+      </h1>
+      <div class="flex flex-row mb-4">
+        {
+          socialKeys.map((key) =>
+            member.socials[key] ? (
+              <a href={member.socials[key]}>
+                <Icon pack="mdi" name={key} class="h-[30px] mr-4" />
+              </a>
+            ) : null,
+          )
+        }
+      </div>
+    </div>
+  </div>
+</div>
+
+<style lang="css">
+  [astro-icon="linkedin"] {
+    color: #00101b;
+  }
+  [astro-icon="mail"] {
+    color: #00101b;
+  }
+  [astro-icon="big-x"] {
+    color: #00101b;
+  }
+</style>
diff --git a/src/components/team/TeamsCard.astro b/src/components/team/TeamsCard.astro
deleted file mode 100644
index d77c8fd..0000000
--- a/src/components/team/TeamsCard.astro
+++ /dev/null
@@ -1,69 +0,0 @@
----
-import { Image } from "astro:assets";
-import { Icon } from "astro-icon";
-import DemoImg from "../../../public/images/demeface.png";
-import Collaborators from "../../../public/images/collaborators.svg";
----
-
-<div class="w-96 border-4 border-[#0077CC] rounded-lg bg-white mt-32">
-  <Image src={DemoImg} class="w-96 h-44" alt="collaborate" />
-  <div class="px-7">
-    <div>
-      <h1 class="text-2xl text-[#00101B] my-5 font-bold">Members name</h1>
-      <hr />
-    </div>
-    <div>
-      <h1 class="text-[#00101B] opacity-70 text-base mt-4 mb-2 font-bold">
-        About
-      </h1>
-      <p class="font-sm opacity-70">LOream Ipsup heiu adoay jdoawd</p>
-    </div>
-    <div>
-      <h1 class="text-[#00101B] opacity-70 text-base mt-4 mb-2 font-bold">
-        Skills
-      </h1>
-      <div class="gap-2 flex flex-row flex-wrap">
-        <div
-          class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2"
-        >
-          Go
-        </div>
-        <div
-          class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2"
-        >
-          Docker
-        </div>
-        <div
-          class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2"
-        >
-          Kubernetes
-        </div>
-        <div
-          class="bg-[#0077CC] rounded-full py-1 px-5 text-white text-bold text-sm font-medium mr-2"
-        >
-          Yaml
-        </div>
-      </div>
-    </div>
-    <h1 class="text-[#00101B] opacity-60 font-bold text-sm my-4">
-      Let's Connect
-    </h1>
-    <div class="flex flex-row mb-4">
-      <Icon pack="mdi" name="linkedin" class="h-[30px] mr-4" />
-      <Icon pack="mdi" name="gmail" class="h-[30px] mr-4" />
-      <Icon pack="mdi" name="twitter" class="h-[30px]" />
-    </div>
-  </div>
-</div>
-
-<style lang="css">
-  [astro-icon="linkedin"] {
-    color: #00101b;
-  }
-  [astro-icon="mail"] {
-    color: #00101b;
-  }
-  [astro-icon="big-x"] {
-    color: #00101b;
-  }
-</style>
diff --git a/src/data/team.json b/src/data/team.json
index b5f4072..af11db1 100644
--- a/src/data/team.json
+++ b/src/data/team.json
@@ -1,14 +1,16 @@
 [
   {
     "name": "Eshaan Aggarwal",
-    "github": "https://github.com/EshaanAgg",
+    "image": "EshaanAgg.jpg",
     "role": "maintainer",
+    "description": "I love making software break.",
+    "skills": ["Go", "Rust", "TypeScript"],
     "socials": {
-      "linkedIn": "",
-      "twitter": "",
-      "instagram": "",
-      "portfolio": ""
+      "github": "https://github.com/EshaanAgg",
+      "linkedin": "https://www.linkedin.com/in/eshaan-aggarwal",
+      "gmail": "mailto:eshaanagg@gmail.com",
+      "twitter": "https://twitter.com/eshaanagg"
     },
-    "description": ""
+    "portfolio": "https://eshaanagg.netlify.app"
   }
 ]
diff --git a/src/pages/team.astro b/src/pages/team.astro
index e020d65..f2e8bbc 100644
--- a/src/pages/team.astro
+++ b/src/pages/team.astro
@@ -1,17 +1,44 @@
 ---
+import { z } from "zod";
+import Layout from "../layouts/Layout.astro";
 import Collaborators from "../components/team/Collaborators.astro";
-import TeamsCard from "../components/team/TeamsCard.astro";
+import TeamMemberCard from "../components/team/TeamMemberCard.astro";
+import MemberDetails from "../data/team.json";
+
+// Enforce the validation of the member data from the JSON
+const memberZod = z.object({
+  name: z.string().min(5).max(30),
+  role: z.enum(["maintainer", "core-team", "collaborator"]),
+  description: z.string().min(10).max(100),
+  skills: z.string().array().min(1).max(5),
+  image: z.string(),
+  socials: z.object({
+    github: z.string().url(),
+    gmail: z.string().url().optional(),
+    linkedin: z.string().url().optional(),
+    twitter: z.string().url().optional(),
+    instagram: z.string().url().optional(),
+  }),
+  portfolio: z.string().url().optional(),
+});
+export type TeamMemberInterface = z.infer<typeof memberZod>;
+
+const membersZod = z.array(memberZod);
+membersZod.parse(MemberDetails);
 ---
 
-<div class="flex flex-col items-center justify-center bg-[#00101B] px-32">
-  <Collaborators />
-  <div class="flex flex-col items-center justify-center pb-20">
-    <h1 class="text-white text-5xl font-bold pt-32">Our Team</h1>
-    <div class="flex flex-row items-center justify-center flex-wrap gap-x-10">
-      <TeamsCard />
-      <TeamsCard />
-      <TeamsCard />
-      <TeamsCard />
+<Layout title="Team">
+  <div class="flex flex-col items-center justify-center bg-[#00101B] px-32">
+    <Collaborators />
+    <div class="flex flex-col items-center justify-center pb-20">
+      <h1 class="text-white text-5xl font-bold pt-32">Our Team</h1>
+      <div class="flex flex-row items-center justify-center flex-wrap gap-x-10">
+        {
+          (MemberDetails as TeamMemberInterface[]).map(
+            (member: TeamMemberInterface) => <TeamMemberCard {...member} />,
+          )
+        }
+      </div>
     </div>
   </div>
-</div>
+</Layout>
diff --git a/src/pages/teams/index.astro b/src/pages/teams/index.astro
deleted file mode 100644
index ab37a0b..0000000
--- a/src/pages/teams/index.astro
+++ /dev/null
@@ -1,15 +0,0 @@
----
-import Collaborators from "../../components/teams/Collaborators.astro";
-import TeamsCard from "../../components/teams/TeamsCard.astro";
----
-
-<div class="flex flex-col items-center justify-center">
-  <Collaborators />
-  <div>
-    <h1 class="text-white text-4xl font-bold">Our Team</h1>
-    <div>
-      <TeamsCard />
-      <div></div>
-    </div>
-  </div>
-</div>