diff --git a/frontend/src/components/ChannelPage.tsx b/frontend/src/components/ChannelPage.tsx
index 1572aa7..fc856f7 100644
--- a/frontend/src/components/ChannelPage.tsx
+++ b/frontend/src/components/ChannelPage.tsx
@@ -138,14 +138,14 @@ export default function ChannelPage({
 
   return (
     <main className="flex-1 min-w-0 overflow-y-auto">
-      {/* Banner + back */}
-      <div className="relative">
+      {/* Banner + back — OPTION C: inset, rounded card (not full-bleed) */}
+      <div className="relative px-4 sm:px-6 pt-3">
         {ch?.banner_url ? (
           // Match YouTube's banner: the stored bannerExternalUrl is the full 16:9 template at a
           // low default size, so request a crisp wide version (=w1707) and object-cover the
-          // desktop "safe area" — the centre 2560×423 (~6:1) band — at full width.
+          // desktop "safe area" — the centre 2560×423 (~6:1) band.
           <div
-            className="w-full overflow-hidden bg-surface"
+            className="w-full overflow-hidden rounded-2xl bg-surface"
             style={{ aspectRatio: "2560 / 423", maxHeight: "150px" }}
           >
             <img
@@ -155,11 +155,11 @@ export default function ChannelPage({
             />
           </div>
         ) : (
-          <div className="h-14 w-full bg-surface" />
+          <div className="h-14 w-full rounded-2xl bg-surface" />
         )}
         <button
           onClick={onBack}
-          className="absolute top-3 left-3 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
+          className="absolute top-5 left-7 sm:left-9 z-10 inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm bg-black/45 text-white hover:bg-black/65 backdrop-blur-sm"
         >
           <ArrowLeft className="w-4 h-4" />
           {t("channel.back")}