diff --git a/src/routes/(app)/crew/+page.svelte b/src/routes/(app)/crew/+page.svelte
index a3b723c9..abb6cb2f 100644
--- a/src/routes/(app)/crew/+page.svelte
+++ b/src/routes/(app)/crew/+page.svelte
@@ -15,8 +15,9 @@
 	import Input from '$lib/components/ui/Input.svelte'
 	import CrewHeader from '$lib/components/crew/CrewHeader.svelte'
 	import { formatDateJST } from '$lib/utils/date'
-	import { formatScore } from '$lib/utils/gw'
+	import { formatScore, toCrewHistoryChartData } from '$lib/utils/gw'
 	import ElementBadge from '$lib/components/ui/ElementBadge.svelte'
+	import GwCrewHistoryChart from '$lib/components/charts/GwCrewHistoryChart.svelte'
 	import type { PageData } from './$types'
 
 	interface Props {
@@ -152,6 +153,11 @@
 		}
 		return status
 	}
+
+	// Transform events data for history chart
+	const historyChartData = $derived(
+		eventsQuery.data ? toCrewHistoryChartData(eventsQuery.data, formatDateJST) : []
+	)
 </script>
 
 <svelte:head>
@@ -248,6 +254,12 @@
 					<span class="section-title">Unite and Fight</span>
 				</div>
 
+				{#if historyChartData.length > 0}
+					<div class="chart-section">
+						<GwCrewHistoryChart data={historyChartData} />
+					</div>
+				{/if}
+
 				{#if eventsQuery.isLoading}
 					<div class="loading-state">
 						<p>Loading events...</p>
@@ -559,6 +571,12 @@
 		color: var(--text-secondary);
 	}
 
+	// Chart section
+	.chart-section {
+		padding: spacing.$unit-2x;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+	}
+
 	// Event list (similar to member list)
 	.event-list {
 		list-style: none;
diff --git a/src/routes/(app)/crew/events/[eventNumber]/+page.svelte b/src/routes/(app)/crew/events/[eventNumber]/+page.svelte
index 05f3edd4..8489f019 100644
--- a/src/routes/(app)/crew/events/[eventNumber]/+page.svelte
+++ b/src/routes/(app)/crew/events/[eventNumber]/+page.svelte
@@ -18,8 +18,10 @@
 	import SegmentedControl from '$lib/components/ui/segmented-control/SegmentedControl.svelte'
 	import Segment from '$lib/components/ui/segmented-control/Segment.svelte'
 	import { formatDateJST } from '$lib/utils/date'
-	import { formatScore } from '$lib/utils/gw'
+	import { formatScore, toMultiPlayerChartData, toCrewBattleChartData } from '$lib/utils/gw'
 	import { GW_ROUND_LABELS, type GwRound, type GwCrewScore } from '$lib/types/api/gw'
+	import GwMultiPlayerChart from '$lib/components/charts/GwMultiPlayerChart.svelte'
+	import GwCrewBattleChart from '$lib/components/charts/GwCrewBattleChart.svelte'
 	import type { PageData } from './$types'
 
 	interface Props {
@@ -63,6 +65,14 @@
 	// Crew scores from participation (Finals Day 1-4 only: rounds 2-5)
 	const crewScores = $derived(participation?.crewScores ?? [])
 
+	// Chart data transformations
+	const multiPlayerChartData = $derived(
+		participation?.individualScores
+			? toMultiPlayerChartData(participation.individualScores)
+			: new Map()
+	)
+	const crewBattleChartData = $derived(toCrewBattleChartData(crewScores))
+
 	const playerScores = $derived.by(() => {
 		const scoreMap = new Map<string, PlayerScore>()
 
@@ -208,6 +218,12 @@
 
 				<!-- Individual Honors Tab -->
 				{#if activeTab === 'individual'}
+					{#if multiPlayerChartData.size > 0}
+						<div class="chart-section">
+							<GwMultiPlayerChart playerScores={multiPlayerChartData} />
+						</div>
+					{/if}
+
 					<div class="section-header">
 						<span class="section-title">Individual Scores</span>
 					</div>
@@ -230,6 +246,12 @@
 
 				<!-- Crew Honors Tab -->
 				{#if activeTab === 'crew'}
+					{#if crewBattleChartData.length > 0}
+						<div class="chart-section">
+							<GwCrewBattleChart data={crewBattleChartData} />
+						</div>
+					{/if}
+
 					<div class="crew-score-table">
 						<div class="crew-score-header">
 							<span class="col-round">Round</span>
@@ -441,6 +463,11 @@
 		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
 	}
 
+	.chart-section {
+		padding: spacing.$unit-2x;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+	}
+
 	.section-title {
 		font-size: typography.$font-small;
 		font-weight: typography.$medium;