diff --git a/frontend/public/embed.css b/frontend/public/embed.css
index fbcc5914..f4642bdd 100644
--- a/frontend/public/embed.css
+++ b/frontend/public/embed.css
@@ -11,6 +11,11 @@ html,
 body {
   margin: 0;
   padding: 0;
+  /* The embed route is meant to render transparently inside a host page's
+     iframe. It still inherits the root layout's <html>/<body>, whose
+     globals.css sets an opaque gradient background — override it here so
+     the widget doesn't show a solid background box in embeds. */
+  background: transparent !important;
 }
 
 .w-full {
diff --git a/frontend/src/app/embed/[username]/page.tsx b/frontend/src/app/embed/[username]/page.tsx
index c4bd771f..d4c4b233 100644
--- a/frontend/src/app/embed/[username]/page.tsx
+++ b/frontend/src/app/embed/[username]/page.tsx
@@ -62,6 +62,7 @@ export async function generateMetadata({ params }: { params: { username: string
   return {
     title: `Support ${profile.displayName} — NovaSupport`,
     robots: { index: false, follow: false },
+    viewport: "width=device-width, initial-scale=1",
   };
 }
 
@@ -92,34 +93,27 @@ export default async function EmbedPage({ params, searchParams }: PageProps) {
   }));
 
   return (
-    <html lang="en">
-      <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="robots" content="noindex" />
-        <link rel="stylesheet" href="/embed.css" />
-      </head>
-      <body
-        style={{
-          margin: 0,
-          padding: 8,
-          background: "transparent",
-          fontFamily: "system-ui, -apple-system, sans-serif",
-        }}
-      >
-        <EmbedWidget
-          username={profile.username}
-          displayName={profile.displayName}
-          bio={profile.bio}
-          avatarUrl={profile.avatarUrl}
-          acceptedAssets={profile.acceptedAssets}
-          stats={stats}
-          recentSupporters={recentSupporters}
-          theme={theme}
-          size={size}
-          profileUrl={profileUrl}
-        />
-      </body>
-    </html>
+    <div
+      style={{
+        margin: 0,
+        padding: 8,
+        background: "transparent",
+        fontFamily: "system-ui, -apple-system, sans-serif",
+      }}
+    >
+      <link rel="stylesheet" href="/embed.css" />
+      <EmbedWidget
+        username={profile.username}
+        displayName={profile.displayName}
+        bio={profile.bio}
+        avatarUrl={profile.avatarUrl}
+        acceptedAssets={profile.acceptedAssets}
+        stats={stats}
+        recentSupporters={recentSupporters}
+        theme={theme}
+        size={size}
+        profileUrl={profileUrl}
+      />
+    </div>
   );
 }
diff --git a/frontend/src/app/embed/layout.tsx b/frontend/src/app/embed/layout.tsx
new file mode 100644
index 00000000..ec201c04
--- /dev/null
+++ b/frontend/src/app/embed/layout.tsx
@@ -0,0 +1,7 @@
+// The embed route renders a minimal, iframe-friendly widget and must not
+// inherit the app's root <html>/<body> chrome (theme script, gradient
+// background, Providers). This layout opts the /embed/* subtree out of the
+// nesting Next.js would otherwise apply from app/layout.tsx.
+export default function EmbedLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}
