diff --git a/apps/web/src/lib/components/AppBreadcrumb.svelte b/apps/web/src/lib/components/AppBreadcrumb.svelte
index 069c866..83e96b9 100644
--- a/apps/web/src/lib/components/AppBreadcrumb.svelte
+++ b/apps/web/src/lib/components/AppBreadcrumb.svelte
@@ -31,7 +31,7 @@
 							<span class="text-destructive">Error</span>
 						{/snippet}
 						{#if item.isLink}
-							<Breadcrumb.Link href="/app/view/channel?channelId={item.channelId}">
+							<Breadcrumb.Link href="/app/view/channel/overview?channelId={item.channelId}">
 								{(await remoteGetChannel(item.channelId)).name}
 							</Breadcrumb.Link>
 						{:else}
diff --git a/apps/web/src/lib/components/ChannelSponsorMentions.svelte b/apps/web/src/lib/components/ChannelSponsorMentions.svelte
new file mode 100644
index 0000000..6bba793
--- /dev/null
+++ b/apps/web/src/lib/components/ChannelSponsorMentions.svelte
@@ -0,0 +1,251 @@
+<script lang="ts">
+	import { MessageSquare } from '@lucide/svelte';
+	import { createRawSnippet } from 'svelte';
+	import {
+		renderComponent,
+		renderSnippet,
+		createSvelteTable,
+		FlexRender
+	} from '$lib/components/ui/data-table/index.js';
+	import DataTableColumnHeader from '$lib/components/ui/data-table/data-table-column-header.svelte';
+	import ExpandableComment from '$lib/components/ExpandableComment.svelte';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import {
+		getCoreRowModel,
+		getSortedRowModel,
+		type ColumnDef,
+		type SortingState
+	} from '@tanstack/table-core';
+	import { formatDate } from '$lib/utils';
+	import { remoteGetChannelSponsorMentions } from '$lib/remote/channels.remote';
+
+	type SponsorMention = {
+		ytVideoId: string;
+		ytCommentId: string;
+		text: string;
+		videoTitle: string;
+		author: string;
+		likeCount: number;
+		publishedAt: Date | string;
+		sponsorName: string | null;
+		sponsorId: string | null;
+	};
+
+	const { channelId }: { channelId: string } = $props();
+
+	const mentions = $derived(await remoteGetChannelSponsorMentions(channelId));
+
+	const getYouTubeCommentUrl = (videoId: string, commentId: string) => {
+		return `https://www.youtube.com/watch?v=${videoId}&lc=${commentId}`;
+	};
+
+	const columns: ColumnDef<SponsorMention>[] = [
+		{
+			accessorKey: 'text',
+			header: 'Comment',
+			size: 350,
+			cell: ({ row }) =>
+				renderComponent(ExpandableComment, {
+					text: row.original.text
+				})
+		},
+		{
+			accessorKey: 'videoTitle',
+			header: 'Video',
+			size: 180,
+			cell: ({ row }) => {
+				const snippet = createRawSnippet<[{ mention: SponsorMention; channelId: string }]>(
+					(params) => {
+						const { mention, channelId } = params();
+						return {
+							render: () =>
+								`<a href="/app/view/video?videoId=${mention.ytVideoId}&channelId=${channelId}" class="font-medium text-foreground transition-colors hover:text-primary block truncate" title="${mention.videoTitle}">${mention.videoTitle}</a>`
+						};
+					}
+				);
+				return renderSnippet(snippet, { mention: row.original, channelId });
+			}
+		},
+		{
+			accessorKey: 'sponsorName',
+			header: 'Sponsor',
+			size: 120,
+			cell: ({ row }) => {
+				if (!row.original.sponsorName || !row.original.sponsorId) {
+					const noneSnippet = createRawSnippet(() => ({
+						render: () => `<span class="text-muted-foreground/50">—</span>`
+					}));
+					return renderSnippet(noneSnippet, {});
+				}
+				const snippet = createRawSnippet<
+					[{ sponsorName: string; sponsorId: string; channelId: string }]
+				>((params) => {
+					const { sponsorName, sponsorId, channelId } = params();
+					return {
+						render: () =>
+							`<a href="/app/view/sponsor?sponsorId=${sponsorId}&channelId=${channelId}" class="inline-flex items-center rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary transition-colors hover:bg-primary hover:text-primary-foreground">${sponsorName}</a>`
+					};
+				});
+				return renderSnippet(snippet, {
+					sponsorName: row.original.sponsorName,
+					sponsorId: row.original.sponsorId,
+					channelId
+				});
+			}
+		},
+		{
+			accessorKey: 'author',
+			header: 'Author',
+			size: 120,
+			cell: ({ row }) => {
+				const snippet = createRawSnippet<[{ author: string }]>((params) => {
+					const { author } = params();
+					return {
+						render: () => `<span class="text-muted-foreground truncate block">${author}</span>`
+					};
+				});
+				return renderSnippet(snippet, { author: row.original.author });
+			}
+		},
+		{
+			accessorKey: 'likeCount',
+			header: ({ column }) =>
+				renderComponent(DataTableColumnHeader, {
+					title: 'Likes',
+					isSorted: column.getIsSorted(),
+					onclick: column.getToggleSortingHandler()
+				}),
+			size: 70,
+			cell: ({ row }) => {
+				const snippet = createRawSnippet<[{ likes: number }]>((params) => {
+					const { likes } = params();
+					return {
+						render: () => `<span class="tabular-nums text-muted-foreground">${likes}</span>`
+					};
+				});
+				return renderSnippet(snippet, { likes: row.original.likeCount });
+			}
+		},
+		{
+			accessorKey: 'publishedAt',
+			header: ({ column }) =>
+				renderComponent(DataTableColumnHeader, {
+					title: 'Date',
+					isSorted: column.getIsSorted(),
+					onclick: column.getToggleSortingHandler()
+				}),
+			size: 90,
+			cell: ({ row }) => {
+				const snippet = createRawSnippet<[{ date: Date | string }]>((params) => {
+					const { date } = params();
+					return {
+						render: () => `<span class="text-muted-foreground">${formatDate(date)}</span>`
+					};
+				});
+				return renderSnippet(snippet, { date: row.original.publishedAt });
+			},
+			sortingFn: 'datetime'
+		},
+		{
+			id: 'link',
+			header: '',
+			size: 40,
+			cell: ({ row }) => {
+				const snippet = createRawSnippet<[{ videoId: string; commentId: string }]>((params) => {
+					const { videoId, commentId } = params();
+					const url = getYouTubeCommentUrl(videoId, commentId);
+					return {
+						render: () =>
+							`<a href="${url}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center justify-center text-muted-foreground hover:text-primary transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg></a>`
+					};
+				});
+				return renderSnippet(snippet, {
+					videoId: row.original.ytVideoId,
+					commentId: row.original.ytCommentId
+				});
+			}
+		}
+	];
+
+	let sorting = $state<SortingState>([{ id: 'publishedAt', desc: true }]);
+
+	const table = createSvelteTable({
+		get data() {
+			return mentions;
+		},
+		columns,
+		state: {
+			get sorting() {
+				return sorting;
+			}
+		},
+		onSortingChange: (updater) => {
+			if (typeof updater === 'function') {
+				sorting = updater(sorting);
+			} else {
+				sorting = updater;
+			}
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getSortedRowModel: getSortedRowModel()
+	});
+</script>
+
+<div class="space-y-4">
+	<div class="flex items-center justify-between">
+		<div class="flex items-center gap-3">
+			<h2 class="text-foreground text-lg font-semibold">Recent Sponsor Mentions</h2>
+			<Badge variant="secondary">{mentions.length}</Badge>
+		</div>
+	</div>
+	{#if mentions.length === 0}
+		<div
+			class="border-border bg-muted/30 flex flex-col items-center justify-center rounded-xl border border-dashed p-12"
+		>
+			<div class="bg-muted rounded-full p-3">
+				<MessageSquare class="text-muted-foreground h-6 w-6" />
+			</div>
+			<p class="text-muted-foreground mt-3 text-sm">No sponsor mentions found in comments</p>
+		</div>
+	{:else}
+		<div class="border-border overflow-hidden rounded-xl border">
+			<div class="max-h-[500px] overflow-y-auto">
+				<Table.Root class="w-full table-fixed">
+					<Table.Header class="bg-muted/80 sticky top-0 z-10 backdrop-blur-sm">
+						{#key sorting}
+							{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+								<Table.Row class="hover:bg-transparent">
+									{#each headerGroup.headers as header (header.id)}
+										<Table.Head
+											style="width: {header.getSize()}px"
+											class="text-muted-foreground h-11 text-xs font-medium tracking-wide uppercase"
+										>
+											{#if !header.isPlaceholder}
+												<FlexRender
+													content={header.column.columnDef.header}
+													context={header.getContext()}
+												/>
+											{/if}
+										</Table.Head>
+									{/each}
+								</Table.Row>
+							{/each}
+						{/key}
+					</Table.Header>
+					<Table.Body>
+						{#each table.getRowModel().rows as row (row.id)}
+							<Table.Row class="group">
+								{#each row.getVisibleCells() as cell (cell.id)}
+									<Table.Cell style="width: {cell.column.getSize()}px" class="overflow-hidden py-3">
+										<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+									</Table.Cell>
+								{/each}
+							</Table.Row>
+						{/each}
+					</Table.Body>
+				</Table.Root>
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/apps/web/src/lib/components/ChannelVideos.svelte b/apps/web/src/lib/components/ChannelVideos.svelte
index 3f8b783..0967e62 100644
--- a/apps/web/src/lib/components/ChannelVideos.svelte
+++ b/apps/web/src/lib/components/ChannelVideos.svelte
@@ -9,6 +9,7 @@
 	import DataTableColumnHeader from '$lib/components/ui/data-table/data-table-column-header.svelte';
 	import * as Table from '$lib/components/ui/table/index.js';
 	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
 	import {
 		getCoreRowModel,
 		getSortedRowModel,
@@ -16,7 +17,7 @@
 		type SortingState
 	} from '@tanstack/table-core';
 	import { formatNumber, formatDate } from '$lib/utils';
-	import { Video } from '@lucide/svelte';
+	import { Video, ChevronLeft, ChevronRight } from '@lucide/svelte';
 	import { remoteGetChannelVideos } from '$lib/remote/channels.remote';
 
 	type VideoType = {
@@ -34,7 +35,13 @@
 
 	const { channelId }: { channelId: string } = $props();
 
-	const videos = $derived(await remoteGetChannelVideos(channelId));
+	let currentPage = $state(1);
+	const pageSize = 20;
+
+	const result = $derived(await remoteGetChannelVideos({ channelId, page: currentPage, pageSize }));
+	const videos = $derived(result.videos);
+	const totalCount = $derived(result.totalCount);
+	const totalPages = $derived(Math.ceil(totalCount / pageSize));
 
 	const columns: ColumnDef<VideoType>[] = [
 		{
@@ -168,61 +175,102 @@
 		getCoreRowModel: getCoreRowModel(),
 		getSortedRowModel: getSortedRowModel()
 	});
+
+	const goToPreviousPage = () => {
+		if (currentPage > 1) currentPage--;
+	};
+
+	const goToNextPage = () => {
+		if (currentPage < totalPages) currentPage++;
+	};
 </script>
 
 <div class="space-y-4">
 	<div class="flex items-center justify-between">
 		<div class="flex items-center gap-3">
-			<h2 class="text-lg font-semibold text-foreground">Recent Videos</h2>
-			<Badge variant="secondary">{videos.length}</Badge>
+			<h2 class="text-foreground text-lg font-semibold">Recent Videos</h2>
+			<Badge variant="secondary">{totalCount}</Badge>
 		</div>
 	</div>
 	{#if videos.length === 0}
 		<div
-			class="flex flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/30 p-12"
+			class="border-border bg-muted/30 flex flex-col items-center justify-center rounded-xl border border-dashed p-12"
 		>
-			<div class="rounded-full bg-muted p-3">
-				<Video class="h-6 w-6 text-muted-foreground" />
+			<div class="bg-muted rounded-full p-3">
+				<Video class="text-muted-foreground h-6 w-6" />
 			</div>
-			<p class="mt-3 text-sm text-muted-foreground">No videos found for this channel</p>
+			<p class="text-muted-foreground mt-3 text-sm">No videos found for this channel</p>
 		</div>
 	{:else}
-		<div class="overflow-hidden rounded-xl border border-border">
-			<div class="max-h-[500px] overflow-y-auto">
-				<Table.Root>
-					<Table.Header class="sticky top-0 z-10 bg-muted/80 backdrop-blur-sm">
-						{#key sorting}
-							{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
-								<Table.Row class="hover:bg-transparent">
-									{#each headerGroup.headers as header (header.id)}
-										<Table.Head
-											class="h-11 text-xs font-medium tracking-wide text-muted-foreground uppercase"
-										>
-											{#if !header.isPlaceholder}
-												<FlexRender
-													content={header.column.columnDef.header}
-													context={header.getContext()}
-												/>
-											{/if}
-										</Table.Head>
-									{/each}
-								</Table.Row>
-							{/each}
-						{/key}
-					</Table.Header>
-					<Table.Body>
-						{#each table.getRowModel().rows as row (row.id)}
-							<Table.Row class="group">
-								{#each row.getVisibleCells() as cell (cell.id)}
-									<Table.Cell class="py-2.5">
-										<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
-									</Table.Cell>
+		<div class="border-border overflow-hidden rounded-xl border">
+			<Table.Root>
+				<Table.Header class="bg-muted/80 backdrop-blur-sm">
+					{#key sorting}
+						{#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+							<Table.Row class="hover:bg-transparent">
+								{#each headerGroup.headers as header (header.id)}
+									<Table.Head
+										class="text-muted-foreground h-11 text-xs font-medium tracking-wide uppercase"
+									>
+										{#if !header.isPlaceholder}
+											<FlexRender
+												content={header.column.columnDef.header}
+												context={header.getContext()}
+											/>
+										{/if}
+									</Table.Head>
 								{/each}
 							</Table.Row>
 						{/each}
-					</Table.Body>
-				</Table.Root>
-			</div>
+					{/key}
+				</Table.Header>
+				<Table.Body>
+					{#each table.getRowModel().rows as row (row.id)}
+						<Table.Row class="group">
+							{#each row.getVisibleCells() as cell (cell.id)}
+								<Table.Cell class="py-2.5">
+									<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+								</Table.Cell>
+							{/each}
+						</Table.Row>
+					{/each}
+				</Table.Body>
+			</Table.Root>
 		</div>
+
+		{#if totalPages > 1}
+			<div class="flex items-center justify-between">
+				<p class="text-muted-foreground text-sm">
+					Showing {(currentPage - 1) * pageSize + 1} to {Math.min(
+						currentPage * pageSize,
+						totalCount
+					)}
+					of {totalCount} videos
+				</p>
+				<div class="flex items-center gap-2">
+					<Button
+						variant="outline"
+						size="sm"
+						onclick={goToPreviousPage}
+						disabled={currentPage === 1}
+					>
+						<ChevronLeft class="h-4 w-4" />
+						Previous
+					</Button>
+					<span class="text-muted-foreground text-sm">
+						Page {currentPage} of {totalPages}
+					</span>
+					<Button
+						variant="outline"
+						size="sm"
+						onclick={goToNextPage}
+						disabled={currentPage === totalPages}
+					>
+						Next
+						<ChevronRight class="h-4 w-4" />
+					</Button>
+				</div>
+			</div>
+		{/if}
 	{/if}
 </div>
diff --git a/apps/web/src/lib/components/ChannelsList.svelte b/apps/web/src/lib/components/ChannelsList.svelte
index f833020..3bb80a0 100644
--- a/apps/web/src/lib/components/ChannelsList.svelte
+++ b/apps/web/src/lib/components/ChannelsList.svelte
@@ -33,7 +33,7 @@
 		<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
 			{#each channels as channel}
 				<a
-					href="/app/view/channel?channelId={channel.ytChannelId}"
+					href="/app/view/channel/overview?channelId={channel.ytChannelId}"
 					class="group border-border bg-card hover:border-primary/50 hover:shadow-primary/5 relative overflow-hidden rounded-xl border transition-all hover:shadow-lg"
 				>
 					<div class="p-5">
diff --git a/apps/web/src/lib/components/GlobalAppCommand.svelte b/apps/web/src/lib/components/GlobalAppCommand.svelte
index f4b1931..d616594 100644
--- a/apps/web/src/lib/components/GlobalAppCommand.svelte
+++ b/apps/web/src/lib/components/GlobalAppCommand.svelte
@@ -53,7 +53,7 @@
 			</Command.LinkItem>
 		{:else if item.type === 'channel'}
 			<Command.LinkItem
-				href="/app/view/channel?channelId={item.data.ytChannelId}"
+				href="/app/view/channel/overview?channelId={item.data.ytChannelId}"
 				onSelect={closeDialog}
 			>
 				CHANNEL: {item.data.name}
diff --git a/apps/web/src/lib/remote/channels.remote.ts b/apps/web/src/lib/remote/channels.remote.ts
index 3001406..00ce1da 100644
--- a/apps/web/src/lib/remote/channels.remote.ts
+++ b/apps/web/src/lib/remote/channels.remote.ts
@@ -71,9 +71,16 @@ export const remoteGetSponsorDetails = query(
 );
 
 export const remoteGetChannelVideos = query(
-	Schema.String.pipe(Schema.standardSchemaV1),
-	async (channelId) => {
-		return await authedRemoteRunner(({ db }) => db.getChannelVideos({ ytChannelId: channelId, limit: 20 }));
+	z.object({
+		channelId: z.string(),
+		page: z.number().default(1),
+		pageSize: z.number().default(20)
+	}),
+	async ({ channelId, page, pageSize }) => {
+		const offset = (page - 1) * pageSize;
+		return await authedRemoteRunner(({ db }) =>
+			db.getChannelVideos({ ytChannelId: channelId, limit: pageSize, offset })
+		);
 	}
 );
 
@@ -97,3 +104,10 @@ export const remoteGetChannelSponsors = query(
 		return await authedRemoteRunner(({ db }) => db.getChannelSponsors(channelId));
 	}
 );
+
+export const remoteGetChannelSponsorMentions = query(
+	Schema.String.pipe(Schema.standardSchemaV1),
+	async (channelId) => {
+		return await authedRemoteRunner(({ db }) => db.getChannelSponsorMentions(channelId));
+	}
+);
diff --git a/apps/web/src/lib/services/db.ts b/apps/web/src/lib/services/db.ts
index f1751be..70c4ca3 100644
--- a/apps/web/src/lib/services/db.ts
+++ b/apps/web/src/lib/services/db.ts
@@ -738,9 +738,9 @@ const dbService = Effect.gen(function* () {
 				};
 			}),
 
-		getChannelVideos: (args: { ytChannelId: string; limit: number }) =>
+		getChannelVideos: (args: { ytChannelId: string; limit: number; offset: number }) =>
 			Effect.gen(function* () {
-				const { ytChannelId, limit } = args;
+				const { ytChannelId, limit, offset } = args;
 				const videos = yield* Effect.tryPromise({
 					try: () =>
 						drizzle
@@ -750,6 +750,7 @@ const dbService = Effect.gen(function* () {
 							})
 							.from(DB_SCHEMA.videos)
 							.limit(limit)
+							.offset(offset)
 							.leftJoin(
 								DB_SCHEMA.sponsorToVideos,
 								eq(DB_SCHEMA.sponsorToVideos.ytVideoId, DB_SCHEMA.videos.ytVideoId)
@@ -766,10 +767,25 @@ const dbService = Effect.gen(function* () {
 						})
 				});
 
-				return videos.map((v) => ({
-					...v.video,
-					sponsor: v.sponsor || null
-				}));
+				const totalCount = yield* Effect.tryPromise({
+					try: () =>
+						drizzle
+							.select({ count: count() })
+							.from(DB_SCHEMA.videos)
+							.where(eq(DB_SCHEMA.videos.ytChannelId, ytChannelId)),
+					catch: (err) =>
+						new DbError('Failed to count channel videos', {
+							cause: err
+						})
+				}).pipe(Effect.map((res) => Number(res[0]?.count ?? 0)));
+
+				return {
+					videos: videos.map((v) => ({
+						...v.video,
+						sponsor: v.sponsor || null
+					})),
+					totalCount
+				};
 			}),
 
 		getChannelNotifications: (ytChannelId: string) =>
@@ -1146,6 +1162,52 @@ const dbService = Effect.gen(function* () {
 				});
 			}),
 
+		getChannelSponsorMentions: (ytChannelId: string) =>
+			Effect.gen(function* () {
+				const mentions = yield* Effect.tryPromise({
+					try: () =>
+						drizzle
+							.select({
+								comment: DB_SCHEMA.comments,
+								videoTitle: DB_SCHEMA.videos.title,
+								sponsorName: DB_SCHEMA.sponsors.name,
+								sponsorId: DB_SCHEMA.sponsors.sponsorId
+							})
+							.from(DB_SCHEMA.comments)
+							.innerJoin(
+								DB_SCHEMA.videos,
+								eq(DB_SCHEMA.videos.ytVideoId, DB_SCHEMA.comments.ytVideoId)
+							)
+							.leftJoin(
+								DB_SCHEMA.sponsorToVideos,
+								eq(DB_SCHEMA.sponsorToVideos.ytVideoId, DB_SCHEMA.videos.ytVideoId)
+							)
+							.leftJoin(
+								DB_SCHEMA.sponsors,
+								eq(DB_SCHEMA.sponsors.sponsorId, DB_SCHEMA.sponsorToVideos.sponsorId)
+							)
+							.where(
+								and(
+									eq(DB_SCHEMA.videos.ytChannelId, ytChannelId),
+									eq(DB_SCHEMA.comments.isSponsorMention, true)
+								)
+							)
+							.orderBy(desc(DB_SCHEMA.comments.publishedAt))
+							.limit(40),
+					catch: (err) =>
+						new DbError('Failed to get channel sponsor mentions', {
+							cause: err
+						})
+				});
+
+				return mentions.map((m) => ({
+					...m.comment,
+					videoTitle: m.videoTitle,
+					sponsorName: m.sponsorName,
+					sponsorId: m.sponsorId
+				}));
+			}),
+
 		getVideoDetails: (ytVideoId: string) =>
 			Effect.gen(function* () {
 				const video = yield* Effect.tryPromise({
diff --git a/apps/web/src/routes/app/channel/create/+page.svelte b/apps/web/src/routes/app/channel/create/+page.svelte
index ac1c077..0223954 100644
--- a/apps/web/src/routes/app/channel/create/+page.svelte
+++ b/apps/web/src/routes/app/channel/create/+page.svelte
@@ -28,7 +28,7 @@
 			try {
 				await submit();
 				if (remoteCreateChannel.result?.success) {
-					await goto(`/app/view/channel?channelId=${remoteCreateChannel.result.ytChannelId}`);
+					await goto(`/app/view/channel/overview?channelId=${remoteCreateChannel.result.ytChannelId}`);
 				} else {
 					error = 'Failed to create channel';
 				}
diff --git a/apps/web/src/routes/app/view/channel/+layout.svelte b/apps/web/src/routes/app/view/channel/+layout.svelte
new file mode 100644
index 0000000..45fdff9
--- /dev/null
+++ b/apps/web/src/routes/app/view/channel/+layout.svelte
@@ -0,0 +1,72 @@
+<script lang="ts">
+	import AppBreadcrumb from '$lib/components/AppBreadcrumb.svelte';
+	import { Button } from '$lib/components/ui/button';
+	import z from 'zod';
+	import { useSearchParams } from 'runed/kit';
+	import { page } from '$app/state';
+
+	const paramsSchema = z.object({
+		channelId: z.string().default('')
+	});
+
+	const searchParams = useSearchParams(paramsSchema);
+	const channelId = $derived(searchParams.channelId);
+
+	const currentPath = $derived(page.url.pathname);
+	const basePath = $derived(`/app/view/channel`);
+
+	const tabs = [
+		{ label: 'Overview', path: 'overview' },
+		{ label: 'Last 7 Days', path: 'last7days' },
+		{ label: 'Sponsors', path: 'sponsors' }
+	] as const;
+
+	const isActive = (tabPath: string) => {
+		return currentPath.endsWith(`/${tabPath}`);
+	};
+
+	type LayoutProps = { children: import('svelte').Snippet };
+	const { children }: LayoutProps = $props();
+</script>
+
+<svelte:head>
+	<title>Channel - r8y 3.0</title>
+	<meta
+		name="description"
+		content="View detailed analytics, recent videos, sponsors, and notifications."
+	/>
+</svelte:head>
+
+<div class="flex flex-col gap-6 p-8">
+	{#if !channelId}
+		<p class="text-muted-foreground">Please select a channel</p>
+	{:else}
+		<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+			<AppBreadcrumb items={[{ type: 'channel', channelId }]} />
+
+			<div class="flex items-center gap-4">
+				<div
+					class="bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]"
+				>
+					{#each tabs as tab}
+						<a
+							href="{basePath}/{tab.path}?channelId={channelId}"
+							class="text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 {isActive(
+								tab.path
+							)
+								? 'bg-background dark:border-input dark:bg-input/30 dark:text-foreground shadow-sm'
+								: 'dark:text-muted-foreground'}"
+						>
+							{tab.label}
+						</a>
+					{/each}
+				</div>
+				<Button href={`/app/view/2025?channelId=${channelId}`} variant="outline">
+					2025 Analytics
+				</Button>
+			</div>
+		</div>
+
+		{@render children()}
+	{/if}
+</div>
diff --git a/apps/web/src/routes/app/view/channel/+page.svelte b/apps/web/src/routes/app/view/channel/+page.svelte
index 0d57a2f..4247a41 100644
--- a/apps/web/src/routes/app/view/channel/+page.svelte
+++ b/apps/web/src/routes/app/view/channel/+page.svelte
@@ -1,93 +1,17 @@
 <script lang="ts">
-	import * as Tabs from '$lib/components/ui/tabs/index.js';
-	import AppBreadcrumb from '$lib/components/AppBreadcrumb.svelte';
-	import ChannelLastSevenVids from '$lib/components/ChannelLastSevenVids.svelte';
-	import ChannelVideos from '$lib/components/ChannelVideos.svelte';
-	import ChannelNotifications from '$lib/components/ChannelNotifications.svelte';
-	import ChannelSponsorsTable from '$lib/components/ChannelSponsorsTable.svelte';
-	import { Button } from '$lib/components/ui/button';
-	import z from 'zod';
-	import { useSearchParams } from 'runed/kit';
-
-	const paramsSchema = z.object({
-		channelId: z.string().default('')
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { onMount } from 'svelte';
+
+	onMount(() => {
+		const channelId = page.url.searchParams.get('channelId');
+		const redirectUrl = channelId
+			? `/app/view/channel/overview?channelId=${channelId}`
+			: '/app/view/channel/overview';
+		goto(redirectUrl, { replaceState: true });
 	});
-
-	const searchParams = useSearchParams(paramsSchema);
-
-	const channelId = $derived(searchParams.channelId);
-
-	let tab = $state<'details' | 'recent' | 'sponsors'>('details');
 </script>
 
-<svelte:head>
-	<title>Channel - r8y 3.0</title>
-	<meta
-		name="description"
-		content="View detailed analytics, recent videos, sponsors, and notifications."
-	/>
-</svelte:head>
-
-<div class="flex flex-col gap-6 p-8">
-	{#if !channelId}
-		<p class="text-muted-foreground">Please select a channel</p>
-	{:else}
-		<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
-			<AppBreadcrumb items={[{ type: 'channel', channelId }]} />
-
-			<div class="flex items-center gap-4">
-				<Tabs.Root value={'details'}>
-					<Tabs.List>
-						<Tabs.Trigger value="details" onclick={() => (tab = 'details')}>Overview</Tabs.Trigger>
-						<Tabs.Trigger value="recent" onclick={() => (tab = 'recent')}>Last 7 Days</Tabs.Trigger>
-						<Tabs.Trigger value="sponsors" onclick={() => (tab = 'sponsors')}>Sponsors</Tabs.Trigger>
-					</Tabs.List>
-				</Tabs.Root>
-				<Button href={`/app/view/2025?channelId=${channelId}`} variant="outline">2025 Analytics</Button>
-			</div>
-		</div>
-
-		{#if tab === 'details'}
-			<div class="space-y-6">
-				<svelte:boundary>
-					{#snippet pending()}
-						<div>loading videos...</div>
-					{/snippet}
-					{#snippet failed(e, r)}
-						<div>error loading videos: {(e as Error).message}</div>
-					{/snippet}
-					<ChannelVideos {channelId} />
-				</svelte:boundary>
-				<svelte:boundary>
-					{#snippet pending()}
-						<div>loading notifications...</div>
-					{/snippet}
-					{#snippet failed(e, r)}
-						<div>error loading notifications: {(e as Error).message}</div>
-					{/snippet}
-					<ChannelNotifications {channelId} />
-				</svelte:boundary>
-			</div>
-		{:else if tab === 'recent'}
-			<svelte:boundary>
-				{#snippet pending()}
-					<div>loading videos...</div>
-				{/snippet}
-				{#snippet failed(e, r)}
-					<div>error loading videos: {(e as Error).message}</div>
-				{/snippet}
-				<ChannelLastSevenVids {channelId} />
-			</svelte:boundary>
-		{:else if tab === 'sponsors'}
-			<svelte:boundary>
-				{#snippet pending()}
-					<div>loading sponsors...</div>
-				{/snippet}
-				{#snippet failed(e, r)}
-					<div>error loading sponsors: {(e as Error).message}</div>
-				{/snippet}
-				<ChannelSponsorsTable {channelId} />
-			</svelte:boundary>
-		{/if}
-	{/if}
+<div class="p-8">
+	<p class="text-muted-foreground">Redirecting...</p>
 </div>
diff --git a/apps/web/src/routes/app/view/channel/last7days/+page.svelte b/apps/web/src/routes/app/view/channel/last7days/+page.svelte
new file mode 100644
index 0000000..726fb93
--- /dev/null
+++ b/apps/web/src/routes/app/view/channel/last7days/+page.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import ChannelLastSevenVids from '$lib/components/ChannelLastSevenVids.svelte';
+	import z from 'zod';
+	import { useSearchParams } from 'runed/kit';
+
+	const paramsSchema = z.object({
+		channelId: z.string().default('')
+	});
+
+	const searchParams = useSearchParams(paramsSchema);
+	const channelId = $derived(searchParams.channelId);
+</script>
+
+{#if channelId}
+	<svelte:boundary>
+		{#snippet pending()}
+			<div>loading videos...</div>
+		{/snippet}
+		{#snippet failed(e)}
+			<div>error loading videos: {(e as Error).message}</div>
+		{/snippet}
+		<ChannelLastSevenVids {channelId} />
+	</svelte:boundary>
+{/if}
+
diff --git a/apps/web/src/routes/app/view/channel/overview/+page.svelte b/apps/web/src/routes/app/view/channel/overview/+page.svelte
new file mode 100644
index 0000000..b72fa09
--- /dev/null
+++ b/apps/web/src/routes/app/view/channel/overview/+page.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+	import ChannelVideos from '$lib/components/ChannelVideos.svelte';
+	import ChannelSponsorMentions from '$lib/components/ChannelSponsorMentions.svelte';
+	import ChannelNotifications from '$lib/components/ChannelNotifications.svelte';
+	import z from 'zod';
+	import { useSearchParams } from 'runed/kit';
+
+	const paramsSchema = z.object({
+		channelId: z.string().default('')
+	});
+
+	const searchParams = useSearchParams(paramsSchema);
+	const channelId = $derived(searchParams.channelId);
+</script>
+
+{#if channelId}
+	<div class="space-y-6">
+		<svelte:boundary>
+			{#snippet pending()}
+				<div>loading videos...</div>
+			{/snippet}
+			{#snippet failed(e)}
+				<div>error loading videos: {(e as Error).message}</div>
+			{/snippet}
+			<ChannelVideos {channelId} />
+		</svelte:boundary>
+
+		<svelte:boundary>
+			{#snippet pending()}
+				<div>loading sponsor mentions...</div>
+			{/snippet}
+			{#snippet failed(e)}
+				<div>error loading sponsor mentions: {(e as Error).message}</div>
+			{/snippet}
+			<ChannelSponsorMentions {channelId} />
+		</svelte:boundary>
+
+		<svelte:boundary>
+			{#snippet pending()}
+				<div>loading notifications...</div>
+			{/snippet}
+			{#snippet failed(e)}
+				<div>error loading notifications: {(e as Error).message}</div>
+			{/snippet}
+			<ChannelNotifications {channelId} />
+		</svelte:boundary>
+	</div>
+{/if}
+
diff --git a/apps/web/src/routes/app/view/channel/sponsors/+page.svelte b/apps/web/src/routes/app/view/channel/sponsors/+page.svelte
new file mode 100644
index 0000000..ff518f1
--- /dev/null
+++ b/apps/web/src/routes/app/view/channel/sponsors/+page.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+	import ChannelSponsorsTable from '$lib/components/ChannelSponsorsTable.svelte';
+	import z from 'zod';
+	import { useSearchParams } from 'runed/kit';
+
+	const paramsSchema = z.object({
+		channelId: z.string().default('')
+	});
+
+	const searchParams = useSearchParams(paramsSchema);
+	const channelId = $derived(searchParams.channelId);
+</script>
+
+{#if channelId}
+	<svelte:boundary>
+		{#snippet pending()}
+			<div>loading sponsors...</div>
+		{/snippet}
+		{#snippet failed(e)}
+			<div>error loading sponsors: {(e as Error).message}</div>
+		{/snippet}
+		<ChannelSponsorsTable {channelId} />
+	</svelte:boundary>
+{/if}
+