diff --git a/site/src/lib/contentful/types.ts b/site/src/lib/contentful/types.ts
index b82825ab3f..ff2bdeea72 100644
--- a/site/src/lib/contentful/types.ts
+++ b/site/src/lib/contentful/types.ts
@@ -34,6 +34,16 @@ export interface LearningPageFields {
   nineText: EntryFields.RichText
 }
 
+export interface TeamPageFields {
+  name: EntryFields.Text
+  title: EntryFields.Text
+  twitterHandle: EntryFields.Text
+  profilePicture: EntryFields.AssetLink
+  position: EntryFields.Number
+}
+
+export interface TeamPageSkeleton extends EntrySkeletonType<TeamPageFields, "team"> {}
+
 export interface LandingPageSkeleton extends EntrySkeletonType<LandingPageFields, "landing"> {}
 
 export interface LearningPageFields extends EntrySkeletonType<LearningPageFields, "learn"> {}
diff --git a/site/src/pages/team.astro b/site/src/pages/team.astro
index f71836f5e3..fa168229b7 100644
--- a/site/src/pages/team.astro
+++ b/site/src/pages/team.astro
@@ -1,20 +1,11 @@
 ---
+import type { TeamPageFields, TeamPageSkeleton } from "../lib/contentful/types.ts"
+import { contentfulClient } from "../lib/contentful/client.ts"
+
 import SectionsLayout from "#/layouts/SectionsLayout.astro"
 import Card from "#/components/Card.astro"
 import TopSection from "../components/sections/TopSection.astro"
 
-import headshot_karel from "#/assets/images/headshots/karel.jpg"
-import headshot_cor from "#/assets/images/headshots/cor.jpg"
-import headshot_ben from "#/assets/images/headshots/ben.jpeg"
-import headshot_emir from "#/assets/images/headshots/emir.jpeg"
-import headshot_sarah from "#/assets/images/headshots/sarah.jpg"
-import headshot_abdullah from "#/assets/images/headshots/abdullah.jpeg"
-import headshot_connor from "#/assets/images/headshots/connor.jpg"
-import headshot_omar from "#/assets/images/headshots/omar.jpeg"
-import headshot_hussein from "#/assets/images/headshots/hussein.jpeg"
-import headshot_valentin from "#/assets/images/headshots/valentin.jpeg"
-import headshot_boris from "#/assets/images/headshots/boris.jpeg"
-
 import vc_galileo from "#/assets/images/investors/galileo.svg"
 import vc_nascent from "#/assets/images/investors/nascent.svg"
 import vc_tioga from "#/assets/images/investors/tioga.png"
@@ -28,75 +19,6 @@ import team_groomlake from "#/assets/images/partners/groomlake.png"
 import team_horizons from "#/assets/images/partners/horizons.svg"
 import ContainedSection from "../components/ContainedSection.astro"
 
-const profiles = [
-  {
-    name: "Karel",
-    title: "CEO",
-    x_name: "0xkaiserkarel",
-    profile_pic: headshot_karel
-  },
-  {
-    name: "Cor",
-    title: "CTO",
-    x_name: "corcoder",
-    profile_pic: headshot_cor
-  },
-  {
-    name: "Emir",
-    title: "Head of BD",
-    x_name: "EBeriker",
-    profile_pic: headshot_emir
-  },
-  {
-    name: "Sarah",
-    title: "Head of Operations",
-    x_name: "sarahkc07",
-    profile_pic: headshot_sarah
-  },
-  {
-    name: "Hussein",
-    title: "Principal Engineer",
-    x_name: "0xc0dejug",
-    profile_pic: headshot_hussein
-  },
-  {
-    name: "Abdullah",
-    title: "Founding Engineer",
-    x_name: "aeryz2",
-    profile_pic: headshot_abdullah
-  },
-  {
-    name: "Ben",
-    title: "Founding Engineer",
-    x_name: "0xbonlulu",
-    profile_pic: headshot_ben
-  },
-  {
-    name: "Connor",
-    title: "Founding Engineer",
-    x_name: "PoisonPhang",
-    profile_pic: headshot_connor
-  },
-  {
-    name: "Omar",
-    title: "Full Stack Engineer",
-    x_name: "awkroot",
-    profile_pic: headshot_omar
-  },
-  {
-    name: "Valentin",
-    title: "Advisor",
-    x_name: "valeyo777",
-    profile_pic: headshot_valentin
-  },
-  {
-    name: "Boris",
-    title: "Advisor",
-    x_name: "sprembo",
-    profile_pic: headshot_boris
-  }
-]
-
 const teams = [
   {
     name: "Spearbit",
@@ -156,46 +78,81 @@ const teams = [
     clazz: "h-[38px]"
   }
 ]
----
 
-<SectionsLayout gapless title="Union Team">
+let teamData: Array<TeamPageFields> | null = null
+let error: string | null = null
 
-  <TopSection title="Union team">
-    <div class="flex flex-col text-center gap-8">
-      <p class="md:text-4xl font-mono uppercase">Our team is a <span class="text-accent-500">global</span> network of
-        professionals, working to build
-        the <span class="text-accent-500">interoperability future.</span></p>
-    </div>
-    <div></div>
-  </TopSection>
+try {
+  const teamEntries = await contentfulClient.getEntries<TeamPageSkeleton>({
+    content_type: "team"
+  })
 
-  <ContainedSection>
-    <div class="grid gap-12 sm:gap-12 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 py-16">
-      {
-        profiles.map(person => (
-                <Card class="border-none group">
-                  <a
-                          href={`https://x.com/${person.x_name}`}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          class="gap-4 flex flex-col"
-                  >
-                    <div class="object-cover overflow-hidden">
-                      <img class="w-full h-auto group-hover:scale-110 transition" src={person.profile_pic.src}
-                           alt="union worker"/>
-                    </div>
-                    <div class="leading-tight uppercase font-mono">
-                      <h1 class="text-2xl font-bold font-supermolot uppercase">{person.name}</h1>
-                      <div class="text-gray-400 -mt-1 text-lg">{person.title}</div>
-                      <div class="text-accent text-lg -mt-1 block">@{person.x_name}</div>
-                    </div>
-                  </a>
-                </Card>
-        ))
-      }
-    </div>
-  </ContainedSection>
+  if (teamEntries.items.length > 0) {
+    teamData = teamEntries.items
+      .map(item => item.fields)
+      .sort((a, b) => {
+        const posA = typeof a.position === "number" ? a.position : Number.POSITIVE_INFINITY
+        const posB = typeof b.position === "number" ? b.position : Number.POSITIVE_INFINITY
+        return posA - posB
+      })
+  } else {
+    error = "No team data found."
+  }
+} catch (err) {
+  console.error("Error fetching Contentful data:", err)
+  error = "Failed to load content. Please try again later."
+}
+---
 
+<SectionsLayout gapless title="Union Team">
+  {error ? (
+          <div class="error-message">
+            <h2>Error</h2>
+            <p>{error}</p>
+          </div>
+  ) : teamData ? (
+          <>
+            <TopSection title="Union team">
+              <div class="flex flex-col text-center gap-8">
+                <p class="md:text-4xl font-mono uppercase">Our team is a <span class="text-accent-500">global</span> network of
+                  professionals, working to build
+                  the <span class="text-accent-500">interoperability future.</span></p>
+              </div>
+              <div></div>
+            </TopSection>
 
+            <ContainedSection>
+              <div class="grid gap-12 sm:gap-12 grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 py-16">
+                {teamData.map((person) => (
+                        <Card class="border-none group">
+                          <a
+                                  href={`https://x.com/${person.twitterHandle}`}
+                                  target="_blank"
+                                  rel="noopener noreferrer"
+                                  class="gap-4 flex flex-col"
+                          >
+                            <div class="object-cover overflow-hidden">
+                              <img
+                                      class="w-full h-auto group-hover:scale-110 transition"
+                                      src={person.profilePicture.fields.file.url}
+                                      alt={`${person.name} - Union worker`}
+                              />
+                            </div>
+                            <div class="leading-tight uppercase font-mono">
+                              <h1 class="text-2xl font-bold font-supermolot uppercase">{person.name}</h1>
+                              <div class="text-gray-400 -mt-1 text-lg">{person.title}</div>
+                              <div class="text-accent text-lg -mt-1 block">@{person.twitterHandle}</div>
+                            </div>
+                          </a>
+                        </Card>
+                ))}
+              </div>
+            </ContainedSection>
+          </>
+  ) : (
+          <div class="loading-message">
+            <p>Loading content...</p>
+          </div>
+  )}
 </SectionsLayout>