diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/components/ChannelPage.tsx
index 318518b7..8cca3732 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/components/ChannelPage.tsx
@@ -17,6 +17,7 @@ import {
   SlidersHorizontal,
 } from "lucide-react";
 import Avatar from "./Avatar";
+import Tabs from "./Tabs";
 import Feed from "./Feed";
 import ChannelAboutContent from "./ChannelAbout";
 import { PageToolbar, PageToolbarSlot } from "./PageShell";
@@ -265,11 +266,6 @@ export default function ChannelPage({
       : null,
     joined ? t("channel.joined", { date: joined }) : null,
   ].filter(Boolean) as string[];
-  const tabClass = (active: boolean) =>
-    active
-      ? "pb-2 text-sm font-medium border-b-2 border-fg text-fg"
-      : "pb-2 text-sm text-muted hover:text-fg border-b-2 border-transparent";
-
   // The channel page owns no scroller of its own (PageShell provides the one app scroller). Its
   // whole chrome is fixed — wrapped in <PageToolbar> it portals into the shell's fixed band, so the
   // banner/identity/tabs/toolbar stay put and only the video grid scrolls.
@@ -370,14 +366,17 @@ export default function ChannelPage({
           {/* Tabs — the channel actions ride along here rather than off in the header's top-right
             corner: there are only ever two tabs, so there's room, and it keeps the things you click
             within a few pixels of each other instead of across the page. */}
-          <div className="flex items-center gap-4 mt-3 border-b border-border">
-            <button onClick={() => setTab("videos")} className={tabClass(tab === "videos")}>
-              {t("channel.tabVideos")}
-            </button>
-            <button onClick={() => setTab("about")} className={tabClass(tab === "about")}>
-              {t("channel.tabAbout")}
-            </button>
-            <div className="ml-2 flex items-center gap-2 pb-1.5">
+          <div className="flex items-center gap-2 mt-3 border-b border-border pb-2">
+            <Tabs
+              className="flex gap-1"
+              active={tab}
+              onChange={(id) => setTab(id as "videos" | "about")}
+              tabs={[
+                { id: "videos", label: t("channel.tabVideos") },
+                { id: "about", label: t("channel.tabAbout") },
+              ]}
+            />
+            <div className="ml-2 flex items-center gap-2">
               <a
                 href={ytUrl}
                 target="_blank"