diff --git a/src/routes/(app)/crew/teams/+page.svelte b/src/routes/(app)/crew/teams/+page.svelte
new file mode 100644
index 00000000..9ff429e1
--- /dev/null
+++ b/src/routes/(app)/crew/teams/+page.svelte
@@ -0,0 +1,68 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { crewStore } from '$lib/stores/crew.store.svelte'
+	import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
+	import CrewTabs from '$lib/components/crew/CrewTabs.svelte'
+	import type { PageData } from './$types'
+
+	interface Props {
+		data: PageData
+	}
+
+	let { data }: Props = $props()
+</script>
+
+<svelte:head>
+	<title>Crew Teams / granblue.team</title>
+</svelte:head>
+
+<div class="page">
+	<div class="card">
+		<CrewHeader
+			title={crewStore.crew?.name ?? ''}
+			subtitle={crewStore.crew?.gamertag ?? undefined}
+			description={crewStore.crew?.description ?? undefined}
+		/>
+
+		<CrewTabs userElement={data.currentUser?.element} />
+
+		<div class="empty-state">
+			<p>Coming soon</p>
+		</div>
+	</div>
+</div>
+
+<style lang="scss">
+	@use '$src/themes/effects' as effects;
+	@use '$src/themes/layout' as layout;
+	@use '$src/themes/spacing' as spacing;
+	@use '$src/themes/typography' as typography;
+
+	.page {
+		margin: 0 auto;
+		max-width: var(--main-max-width);
+	}
+
+	.card {
+		background: var(--card-bg);
+		border: 0.5px solid rgba(0, 0, 0, 0.18);
+		border-radius: layout.$page-corner;
+		box-shadow: effects.$page-elevation;
+		overflow: hidden;
+	}
+
+	.empty-state {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: spacing.$unit-4x;
+		color: var(--text-secondary);
+		font-size: typography.$font-small;
+
+		p {
+			margin: 0;
+		}
+	}
+</style>