diff --git a/src/components/team/Avatar.svelte b/src/components/team/Avatar.svelte
deleted file mode 100644
index 69c2a34..0000000
--- a/src/components/team/Avatar.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-	let {
-		name,
-		src,
-		role = ''
-	}: {
-		name: string;
-		src: string;
-		role: string;
-	} = $props();
-
-	let array = $derived(role ? [...Array(3)].map((_) => [...role].concat('*')).flat() : []);
-</script>
-
-<div class="relative size-40 shrink-0 [--text-radius:108px] md:size-48">
-	<img
-		class="border-ecsess-200 size-full rounded-full border-4 object-cover p-2"
-		{src}
-		alt={name}
-	/>
-	{#if role}
-		{#each array as char, index}
-			<p
-				class="char absolute inset-24 z-10 size-3 text-xs"
-				style="transform: translate(-50%, -50%) rotate({(360 / array.length) *
-					index}deg) translateY(calc(-1 * var(--text-radius)));"
-			>
-				{char}
-			</p>
-		{/each}
-	{/if}
-</div>
diff --git a/src/components/team/CommitDot.svelte b/src/components/team/CommitDot.svelte
new file mode 100644
index 0000000..1ce438f
--- /dev/null
+++ b/src/components/team/CommitDot.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	let { active = false } = $props<{
+		active?: boolean;
+	}>();
+</script>
+
+<div class="relative">
+	<div
+		class="relative inline-flex items-center justify-center rounded-full transition-all duration-200 size-2.5 bg-ecsess-500 {active
+			? 'bg-ecsess-200'
+			: 'bg-ecsess-500'}"
+	>
+		{#if active}
+			<div class="relative inline-flex items-center justify-center bg-ecsess-100 size-2.5 animate-ping rounded-full"></div>
+		{/if}
+	</div>
+</div>
diff --git a/src/components/team/ContribTimeline.svelte b/src/components/team/ContribTimeline.svelte
new file mode 100644
index 0000000..e4c57ec
--- /dev/null
+++ b/src/components/team/ContribTimeline.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { DevTeam } from '$lib/schemas';
+	import YearLine from './YearLine.svelte';
+	import DevCard from './DevCard.svelte';
+
+	let {
+		year,
+		members,
+		active = false
+	} = $props<{
+		year: string;
+		members: DevTeam[];
+		active?: boolean;
+	}>();
+</script>
+
+<div class="relative w-full">
+	<!-- Branch Line with Year -->
+	<div class="mb-6">
+		<YearLine {year} {active} />
+	</div>
+
+	<!-- Members Grid -->
+	<div class="ml-8 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+		{#each members as member}
+			<DevCard
+				name={member.name}
+				role={member.role}
+				year={member.yearProgram}
+				src={member.image}
+				funFact={member.funFact}
+				github={member.github}
+				email={member.email}
+				{active}
+			/>
+		{/each}
+	</div>
+</div>
diff --git a/src/components/team/DevCard.svelte b/src/components/team/DevCard.svelte
new file mode 100644
index 0000000..60345ee
--- /dev/null
+++ b/src/components/team/DevCard.svelte
@@ -0,0 +1,126 @@
+<script lang="ts">
+	import { Github, Mail } from '@lucide/svelte';
+
+	let {
+		name,
+		role,
+		year,
+		src,
+		funFact,
+		github,
+		email,
+		active = false
+	} = $props<{
+		name: string;
+		role: string;
+		year: string;
+		src: string;
+		funFact: string;
+		github: string;
+		email: string;
+		active?: boolean;
+	}>();
+
+	// Extract GitHub username from URL and construct avatar URL
+	let githubAvatar = $derived.by(() => {
+		if (!github) return src;
+		try {
+			const url = new URL(github);
+			const username = url.pathname.split('/').filter(Boolean)[0];
+			return username ? `https://github.com/${username}.png?size=200` : src;
+		} catch {
+			return src;
+		}
+	});
+</script>
+
+<div class="fadeup group relative flex flex-col">
+	<!-- Commit Card -->
+	<div
+		class="relative w-full overflow-hidden rounded-xl transition-all ease-linear duration-100 hover:scale-101 hover:shadow-ecsess-black/50 hover:shadow-md {active
+			? 'bg-ecsess-800 shadow-ecsess-black shadow-sm'
+			: 'bg-ecsess-900 shadow-ecsess-black'}"
+	>
+		<!-- Header -->
+		<div class="px-6 pt-5 pb-3">
+			<div class="flex flex-col items-center gap-2.5 text-center">
+				<img src={githubAvatar} alt={name} class="size-20 shrink-0 rounded-full object-cover" />
+				<div class="w-full">
+					<h3 class="text-ecsess-100 text-lg font-semibold">
+						{name}
+					</h3>
+					<p class="text-ecsess-400 text-base">{role}</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Body -->
+		<div class="space-y-3 px-6 pb-5">
+			<!-- Year Badge -->
+			<div class="flex items-center justify-center gap-2">
+				<span
+					class="rounded-full px-4 py-1.5 text-base font-medium {active
+						? 'bg-ecsess-900 text-ecsess-300'
+						: 'bg-ecsess-800 text-ecsess-400'}"
+				>
+					{year}
+				</span>
+			</div>
+
+			<!-- Fun Fact / Commit Message -->
+			<div class="min-h-[60px]">
+				<p class="text-ecsess-300 text-sm leading-relaxed italic">
+					{funFact || ``}
+				</p>
+			</div>
+
+			<!-- Actions -->
+			<div class="flex gap-3 pt-1">
+				{#if github}
+					<a
+						href={github}
+						target="_blank"
+						class="items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-base font-medium transition-colors {active
+							? 'bg-ecsess-900 text-ecsess-300 hover:bg-ecsess-950'
+							: 'bg-ecsess-800 text-ecsess-400 hover:bg-ecsess-700'} {active && email
+							? 'flex flex-1'
+							: 'flex w-full'}"
+					>
+						<Github class="size-4.5" />
+						GitHub
+					</a>
+				{/if}
+				{#if email && active}
+					<a
+						href="mailto:{email}"
+						class="flex flex-1 items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-base font-medium transition-colors {active
+							? 'bg-ecsess-900 text-ecsess-300 hover:bg-ecsess-950'
+							: 'bg-ecsess-800 text-ecsess-400 hover:bg-ecsess-700'}"
+					>
+						<Mail class="size-4.5" />
+						Email
+					</a>
+				{/if}
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.fadeup {
+		animation: fadeUp both;
+		animation-timeline: view();
+		animation-range: entry 20% cover 35%;
+	}
+
+	@keyframes fadeUp {
+		from {
+			opacity: 0;
+			transform: translateY(20px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>
diff --git a/src/components/team/PastCont.svelte b/src/components/team/PastCont.svelte
deleted file mode 100644
index 9a17404..0000000
--- a/src/components/team/PastCont.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script lang="ts">
-	let { name, role, start, end } = $props<{
-		name: string;
-		role: string;
-		start: any;
-		end: any;
-	}>();
-
-	const dateRange = $derived(() => {
-		const startYear = start || 'Unknown';
-		const endYear = end || 'Unknown';
-		if (startYear === 'Unknown' && endYear === 'Unknown') {
-			return '';
-		}
-		return `${startYear} - ${endYear}`;
-	});
-</script>
-
-<div
-	class="fadeup group border-ecsess-700 from-ecsess-800 to-ecsess-900/50 shadow-ecsess-black/50 hover:border-ecsess-500 hover:shadow-ecsess-black/70 relative
-	flex flex-col rounded-xl border border-dotted bg-gradient-to-br
-	p-6 shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl"
->
-	<!-- Role Badge -->
-	{#if role}
-		<span
-			class="bg-ecsess-500 mb-3 w-fit rounded-full px-3 py-1 text-xs font-bold tracking-wider text-gray-300 uppercase"
-		>
-			{role}
-		</span>
-	{/if}
-
-	<!-- Name -->
-	<h3 class="text-ecsess-50 text-lg font-bold md:text-xl">
-		{name}
-	</h3>
-
-	<!-- Date Range -->
-	{#if dateRange()}
-		<p class="text-ecsess-200 mt-1 text-sm">
-			{dateRange()}
-		</p>
-	{/if}
-</div>
-
-<style>
-	.fadeup {
-		animation: fadeUp both;
-		animation-timeline: view();
-		animation-range: entry 25% cover 40%;
-	}
-
-	@keyframes fadeUp {
-		from {
-			opacity: 0;
-			transform: translateY(20px) scale(0.5);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0) scale(1);
-		}
-	}
-</style>
diff --git a/src/components/team/TeamBanner.svelte b/src/components/team/TeamBanner.svelte
deleted file mode 100644
index 761b60e..0000000
--- a/src/components/team/TeamBanner.svelte
+++ /dev/null
@@ -1,130 +0,0 @@
-<script lang="ts">
-	import { Github, Mail, FileCode } from '@lucide/svelte';
-	import Avatar from 'components/team/Avatar.svelte';
-
-	let { src, name, year, role, funFact, github, email } = $props<{
-		src: string;
-		name: string;
-		year: string;
-		role: string;
-		funFact: string;
-		github: string;
-		email: string;
-	}>();
-</script>
-
-<div
-	class="fadeup border-ecsess-500/30 bg-ecsess-950/90 hover:border-ecsess-500/60 relative flex w-full flex-col overflow-hidden rounded-xl border p-0 font-mono text-xs shadow-2xl backdrop-blur-md transition-all duration-300 hover:-translate-y-1"
->
-	<!-- Top Meta Bar -->
-	<div
-		class="bg-ecsess-950/50 border-ecsess-500/10 text-ecsess-400 flex w-full flex-col gap-2 border-b px-6 py-3 lg:gap-1"
-	>
-		<!-- Row 1: Author & Email -->
-		<div class="grid grid-cols-1 sm:grid-cols-2">
-			<div class="flex items-center justify-center gap-2 sm:justify-start">
-				<span>Author:</span>
-				<span class="text-ecsess-100 font-bold">{name}</span>
-			</div>
-			<div class="text-right">
-				<span class="hidden break-words text-zinc-600 sm:inline">&lt;{email}&gt;</span>
-			</div>
-		</div>
-
-		<!-- Row 2: Date & Role -->
-		<div class="grid grid-cols-2">
-			<div class="flex items-center gap-2">
-				<span>Year:</span>
-				<span class="text-zinc-500">{year}</span>
-			</div>
-
-			<div class="text-ecsess-300 ml-auto text-right leading-tight font-bold">
-				{role}
-			</div>
-		</div>
-	</div>
-
-	<!-- Main Body -->
-	<div class="relative flex flex-col p-4 md:flex-row">
-		<!-- Visible centered on mobile -->
-		<div class="flex justify-center md:hidden">
-			<Avatar {src} {name} role="" />
-		</div>
-
-		<div class="min-w-0 flex-1">
-			<!-- Commit Message (Fun Fact) -->
-			<h2 class="text-ecsess-100 mb-2 text-xl font-bold tracking-tight break-words">
-				{funFact || `feat: added ${name} to the team`}
-			</h2>
-
-			<!-- Diff Box -->
-			<div class="bg-ecsess-950/50 border-ecsess-500/20 mb-6 overflow-x-auto rounded-lg border p-4">
-				<div class="flex flex-col gap-1 font-mono text-xs opacity-80">
-					<div class="flex gap-3">
-						<span class="text-zinc-700 select-none">1</span>
-						<div class="flex gap-2 break-all text-green-400/90">
-							<span class="text-green-600 select-none">+</span>
-							<span>name: "{name}";</span>
-						</div>
-					</div>
-					<div class="flex gap-3">
-						<span class="text-zinc-700 select-none">2</span>
-						<div class="flex gap-2 break-all text-green-400/90">
-							<span class="text-green-600 select-none">+</span>
-							<span>role: "{role}";</span>
-						</div>
-					</div>
-					<div class="flex gap-3">
-						<span class="text-zinc-700 select-none">3</span>
-						<div class="flex gap-2 break-all text-green-400/90">
-							<span class="text-green-600 select-none">+</span>
-							<span>contact: "{email}";</span>
-						</div>
-					</div>
-				</div>
-			</div>
-
-			<!-- Action Buttons -->
-			<div class="flex items-center justify-center gap-3">
-				{#if github}
-					<a
-						href={github}
-						target="_blank"
-						class="hover:bg-ecsess-500/10 hover:border-ecsess-500/50 hover:text-ecsess-200 border-ecsess-500/20 flex items-center gap-2 rounded border px-4 py-2 text-xs font-semibold text-zinc-400 transition-colors"
-					>
-						<Github class="size-3" />
-						View Profile
-					</a>
-				{/if}
-				{#if email}
-					<a
-						href="mailto:{email}"
-						class="hover:bg-ecsess-500/10 hover:border-ecsess-500/50 hover:text-ecsess-200 border-ecsess-500/20 flex items-center gap-2 rounded border px-4 py-2 text-xs font-semibold text-zinc-400 transition-colors"
-					>
-						<Mail class="size-3" />
-						Email
-					</a>
-				{/if}
-			</div>
-		</div>
-	</div>
-</div>
-
-<style>
-	.fadeup {
-		animation: fadeUp both;
-		animation-timeline: view();
-		animation-range: entry 25% cover 40%;
-	}
-
-	@keyframes fadeUp {
-		from {
-			opacity: 0;
-			transform: translateY(20px) scale(0.5);
-		}
-		to {
-			opacity: 1;
-			transform: translateY(0) scale(1);
-		}
-	}
-</style>
diff --git a/src/components/team/YearLine.svelte b/src/components/team/YearLine.svelte
new file mode 100644
index 0000000..c6e35ed
--- /dev/null
+++ b/src/components/team/YearLine.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import CommitDot from './CommitDot.svelte';
+
+	let { year, active = false } = $props<{
+		year: string;
+		active?: boolean;
+	}>();
+</script>
+
+<div class="relative flex items-center gap-4 mb-6">
+	<!-- Git Node column (w-3 = 12px, aligns with vertical timeline; circle centered) -->
+	<div class="flex w-3 shrink-0 justify-center">
+		<CommitDot {active} />
+	</div>
+
+	<!-- Year Label -->
+	<div
+		class="flex shrink-0 items-center justify-center font-mono text-xl font-bold tracking-wide uppercase transition-colors md:justify-start {active
+			? 'text-ecsess-300'
+			: 'text-ecsess-400'}"
+	>
+		<span>{year}</span>
+	</div>
+
+	<!-- Branch Line -->
+	<div class="h-px min-w-[100px] flex-1 {active ? 'bg-ecsess-500' : 'bg-ecsess-600'}"></div>
+</div>
diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte
index 7840b32..fd5dde9 100644
--- a/src/routes/team/+page.svelte
+++ b/src/routes/team/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import SeoMetaTags from 'components/layout/SeoMetaTags.svelte';
 	import Section from 'components/layout/Section.svelte';
-	import TeamBanner from 'components/team/TeamBanner.svelte';
-	import Avatar from 'components/team/Avatar.svelte';
+	import ContribTimeline from 'components/team/ContribTimeline.svelte';
+	import Link from 'components/Link.svelte';
 	import type { DevTeam } from '$lib/schemas.js';
 
 	let { data } = $props();
@@ -22,17 +22,17 @@
 	);
 
 	function getGroup(member: DevTeam) {
-		return member.active ? 'Current' : new Date(member.start).getFullYear().toString();
+		return member.active ? 'Active team' : new Date(member.start).getFullYear().toString();
 	}
 
 	let groupedTeam = $derived(
-		sortedTeam.reduce<{ group: string; members: DevTeam[] }[]>((acc, member) => {
+		sortedTeam.reduce<{ group: string; members: DevTeam[]; active: boolean }[]>((acc, member) => {
 			const group = getGroup(member);
 			const last = acc[acc.length - 1];
 			if (last && last.group === group) {
 				last.members.push(member);
 			} else {
-				acc.push({ group, members: [member] });
+				acc.push({ group, members: [member], active: member.active });
 			}
 			return acc;
 		}, [])
@@ -44,82 +44,34 @@
 <Section from="from-ecsess-black" to="to-ecsess-black" via="via-ecsess-800" direction="to-b">
 	<div class="relative flex h-full w-full flex-col items-center">
 		<!-- Hero -->
-		<div class="mb-20 flex flex-col items-center text-center">
-			<div class="relative">
-				<h1
-					class="via-ecsess-200 to-ecsess-400 bg-gradient-to-r from-white bg-clip-text text-5xl font-black tracking-tighter text-transparent drop-shadow-[0_0_30px_rgba(90,139,90,0.3)] md:text-7xl lg:text-8xl"
-				>
-					Developer Team
-				</h1>
-				<div class="bg-ecsess-500/10 absolute -inset-1 animate-pulse rounded-lg blur-xl"></div>
-			</div>
-			<p class="text-ecsess-200/80 mt-6 text-lg">Meet the builder of ECSESS Website</p>
+		<div class="my-8">
+			<span class="page-title"> git log --dev-team </span>
+			<p class="text-ecsess-300 mt-6 font-mono text-lg">
+				Want to build the future of ECSESS? <br />
+				<Link href="https://github.com/mcgill-ecsess/ECSESS" external>
+					<span
+						class="text-ecsess-400 decoration-ecsess-500 hover:text-ecsess-300 hover:decoration-ecsess-400 font-semibold underline decoration-2 underline-offset-4 transition-all"
+					>
+						Contribute on GitHub →
+					</span>
+				</Link>
+			</p>
 		</div>
 
-		<!-- Git Flow Timeline -->
-		<div class="relative w-full max-w-7xl px-4 py-20">
-			<div class="flex w-full flex-col gap-12">
-				{#each groupedTeam as { group, members }}
-					<!-- GROUP SECTION -->
-					<div class="flex flex-col">
-						<!-- MARKER -->
-						<div class="relative z-10 flex w-full justify-center pb-12">
-							<div
-								class="bg-ecsess-950 border-ecsess-500 text-ecsess-200 relative z-20 rounded-full border-2 px-6 py-2 text-xl font-bold shadow-[0_0_20px_rgba(90,139,90,0.4)]"
-							>
-								{group}
-							</div>
-						</div>
-
-						<!-- GROUP ITEMS WITH LINE -->
-						<div class="relative flex flex-col gap-0 md:gap-12">
-							<!-- The Git Line (Segments) -->
-							<div
-								class="from-ecsess-500/0 via-ecsess-500/40 to-ecsess-500/0 absolute top-0 bottom-0 left-1/2 z-0 block w-[2px] -translate-x-1/2 bg-gradient-to-b"
-							></div>
-
-							{#each members as member, idx}
-								<div
-									class="group relative flex w-full items-stretch {idx % 2 === 0
-										? 'md:flex-row'
-										: 'md:flex-row-reverse'}"
-								>
-									<!-- CARD SIDE -->
-									<div class="w-full pb-12 md:w-[45%] md:pb-0">
-										<TeamBanner
-											name={member.name}
-											role={member.role}
-											year={member.yearProgram}
-											src={member.image}
-											funFact={member.funFact}
-											github={member.github}
-											email={member.email}
-										/>
-									</div>
-
-									<!-- CONNECTOR AREA -->
-									<div class="relative hidden w-[10%] justify-center md:flex">
-										<!-- The Node (Circle) -->
-										<div
-											class="bg-ecsess-950 border-ecsess-500 group-hover:bg-ecsess-100 absolute top-1/2 z-20 size-4 -translate-y-1/2 rounded-full border-2 transition-transform duration-300 group-hover:scale-150"
-											style=""
-										></div>
-									</div>
+		<!-- Git Tree History -->
+		<div class="relative w-full max-w-6xl px-4">
+			<div class="relative mx-auto max-w-fit">
+				<!-- Main vertical timeline connector (centered in 12px node column, aligns with GitNode circles) -->
 
-									<!-- EMPTY SIDE -->
-									<div
-										class="hidden w-[45%] flex-col md:flex {idx % 2 == 0
-											? 'items-start'
-											: 'items-end'} justify-center"
-									>
-										<Avatar src={member.image} name={member.name} role={member.role} />
-									</div>
-								</div>
-							{/each}
+				<!-- Cohort Branches -->
+				<div class="space-y-16">
+					{#each groupedTeam as { group, members, active }}
+						<div class="relative">
+							<ContribTimeline year={group} {members} {active} />
 						</div>
-					</div>
-				{/each}
+					{/each}
+				</div>
 			</div>
 		</div>
-	</div>
+  </div>
 </Section>