diff --git a/docs/src/components/stack-auth/stack-user-button-demo.tsx b/docs/src/components/stack-auth/stack-user-button-demo.tsx
index 0893f8923..51a00cf3a 100644
--- a/docs/src/components/stack-auth/stack-user-button-demo.tsx
+++ b/docs/src/components/stack-auth/stack-user-button-demo.tsx
@@ -1,9 +1,8 @@
 'use client';
 
-import { UserButton } from '@stackframe/stack';
+import { UserButton, useUser } from '@stackframe/stack';
 import { Wrench } from "lucide-react";
 import { useState } from "react";
-import { StackContainer } from "../mdx";
 import { DynamicCodeblock } from "../mdx/dynamic-code-block";
 
 type UserButtonDemoProps = {
@@ -19,7 +18,10 @@ export function UserButtonDemo() {
     extraItems: false,
   });
 
-  // Mock user data
+  // Get the actual logged-in user
+  const user = useUser();
+
+  // Mock user data (used when no user is logged in)
   const mockUser = {
     displayName: "John Doe",
     primaryEmail: "john.doe@example.com",
@@ -60,9 +62,9 @@ export function MyComponent() {
   return (
     <div className="w-full max-w-7xl mx-auto p-6 space-y-6">
       {/* Main demo area */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 items-start">
         {/* Controls Panel */}
-        <div className="space-y-6">
+        <div className="space-y-4">
           <h3 className="text-lg font-semibold">Component Options</h3>
 
           {/* Show User Info Toggle */}
@@ -111,18 +113,34 @@ export function MyComponent() {
         {/* Component Preview */}
         <div className="space-y-4">
           <h3 className="text-lg font-semibold">Live Preview</h3>
-          <StackContainer color="blue" size="medium">
-            <UserButton
-              showUserInfo={props.showUserInfo}
-              mockUser={mockUser}
-              colorModeToggle={props.colorModeToggle ? () => console.log("color mode toggle clicked") : undefined}
-              extraItems={props.extraItems ? [{
-                text: 'Custom Action',
-                icon: <Wrench />,
-                onClick: () => console.log('Custom action clicked')
-              }] : undefined}
-            />
-          </StackContainer>
+          <div className="space-y-3">
+            <div className="text-xs text-fd-muted-foreground">
+              {user ? (
+                <span className="text-green-600">✓ Using your actual account</span>
+              ) : (
+                <span className="text-blue-600">→ Using mock data (sign in to see your account)</span>
+              )}
+            </div>
+                         <div className="relative overflow-hidden rounded-lg border border-dashed border-blue-500/40 dark:border-blue-400/20 bg-gray-200/90 dark:bg-slate-900/30 shadow-sm p-4">
+               {/* Component demo label */}
+               <div className="absolute top-0 right-0 px-2 py-1 text-xs font-medium rounded-bl-md bg-gray-200/90 dark:bg-slate-800/80 border-l border-b border-gray-400/60 dark:border-gray-600/40">
+                 <span className="text-blue-600/80 dark:text-blue-400/70">Component Demo</span>
+               </div>
+               
+               <div className="stack-scope">
+                 <UserButton
+                   showUserInfo={props.showUserInfo}
+                   mockUser={user ? undefined : mockUser}
+                   colorModeToggle={props.colorModeToggle ? () => console.log("color mode toggle clicked") : undefined}
+                   extraItems={props.extraItems ? [{
+                     text: 'Custom Action',
+                     icon: <Wrench />,
+                     onClick: () => console.log('Custom action clicked')
+                   }] : undefined}
+                 />
+               </div>
+             </div>
+          </div>
         </div>
       </div>