diff --git a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
index 209ae95a0..f5374aa86 100644
--- a/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
+++ b/apps/dashboard/src/app/(main)/(protected)/(outside-dashboard)/playground/page-client.tsx
@@ -536,6 +536,7 @@ export default function PageClient() {
         type: "text",
         icon: <FileText className="h-4 w-4" />,
         name: "Display Name",
+        description: "The customer-facing name for this product.",
         value: "Widget Pro",
         readOnly: false,
         onUpdate: async () => {
@@ -548,6 +549,7 @@ export default function PageClient() {
         type: "boolean",
         icon: <StackSimple className="h-4 w-4" />,
         name: "Active",
+        description: "Controls whether this product can be purchased.",
         value: true,
         readOnly: false,
         trueLabel: "Yes",
@@ -562,6 +564,7 @@ export default function PageClient() {
         type: "dropdown",
         icon: <Sliders className="h-4 w-4" />,
         name: "Category",
+        description: "Used to organize this product in the catalog.",
         value: "hardware",
         options: [
           { value: "hardware", label: "Hardware" },
@@ -579,6 +582,7 @@ export default function PageClient() {
         type: "custom",
         icon: <Tag className="h-4 w-4" />,
         name: "Price",
+        description: "Current base price before discounts.",
         children: <span className="text-sm text-foreground">$29.99</span>,
       },
     ];
@@ -591,6 +595,7 @@ export default function PageClient() {
           type: "custom-dropdown",
           icon: <Sparkle className="h-4 w-4" />,
           name: "Custom Dropdown",
+          description: "A composed control with custom popover content.",
           triggerContent: <span>Open custom panel</span>,
           popoverContent: <div>Custom content</div>,
           disabled: false,
@@ -600,6 +605,7 @@ export default function PageClient() {
           type: "custom-button",
           icon: <Cube className="h-4 w-4" />,
           name: "Custom Button",
+          description: "Runs a custom action with built-in loading behavior.",
           onClick: () => setGridActionLog("Clicked custom button"),
           children: <span>Run action</span>,
           disabled: false,
@@ -1082,28 +1088,28 @@ export default function PageClient() {
     if (selected === "editable-grid") {
       return (
         <div className="w-full max-w-3xl">
-          <div className="rounded-2xl overflow-hidden bg-white/90 dark:bg-[hsl(240,10%,5.5%)] border border-black/[0.12] dark:border-foreground/[0.12] shadow-sm">
+          <div className="overflow-hidden rounded-2xl border border-black/[0.1] bg-white shadow-sm dark:border-white/[0.1] dark:bg-zinc-950">
             <div className="p-4 sm:p-5">
               <DesignEditableGrid
-                items={editableItems}
                 columns={gridCols}
-                size={gridSize}
-                editMode={gridEditMode}
                 deferredSave={gridDeferredSave}
+                editMode={gridEditMode}
+                externalModifiedKeys={gridShowModified ? new Set(["display-name", "category"]) : undefined}
                 hasChanges={gridHasChanges}
-                onSave={gridDeferredSave ? async () => {
-                  await new Promise((r) => setTimeout(r, 400));
-                  setGridActionLog("Saved deferred changes");
-                  setGridHasChanges(false);
-                } : undefined}
+                items={editableItems}
                 onDiscard={gridDeferredSave ? () => {
                   setGridActionLog("Discarded deferred changes");
                   setGridHasChanges(false);
                 } : undefined}
-                externalModifiedKeys={gridShowModified ? new Set(["display-name", "category"]) : undefined}
+                onSave={gridDeferredSave ? async () => {
+                  await new Promise((resolve) => setTimeout(resolve, 400));
+                  setGridActionLog("Saved deferred changes");
+                  setGridHasChanges(false);
+                } : undefined}
+                size={gridSize}
               />
               {gridActionLog && (
-                <Typography variant="secondary" className="text-xs mt-2">
+                <Typography className="mt-3 text-xs" variant="secondary">
                   Last action: {gridActionLog}
                 </Typography>
               )}