diff --git a/apps/rowboat/app/projects/[projectId]/copilot/app.tsx b/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
index 3f876cb8..0b214aca 100644
--- a/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/copilot/app.tsx
@@ -181,22 +181,40 @@ const App = forwardRef<{ handleCopyChat: () => void; handleUserMessage: (message
                             </Button>
                         </div>
                     )}
-                    {effectiveContext && <div className="flex items-start mb-2">
-                        <div className="flex items-center gap-1 bg-gray-100 dark:bg-gray-800 text-sm px-2 py-1 rounded-sm shadow-sm">
-                            <div>
-                                {effectiveContext.type === 'chat' && "Chat"}
-                                {effectiveContext.type === 'agent' && `Agent: ${effectiveContext.name}`}
-                                {effectiveContext.type === 'tool' && `Tool: ${effectiveContext.name}`}
-                                {effectiveContext.type === 'prompt' && `Prompt: ${effectiveContext.name}`}
+                    {effectiveContext && (
+                        <div className="flex items-start mb-2">
+                            <div className="flex items-center gap-2 px-3 py-1 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50/70 dark:bg-zinc-800/40 shadow-sm text-sm font-medium text-zinc-700 dark:text-zinc-200 transition-all">
+                                {/* Context icon (no background) */}
+                                {effectiveContext.type === 'chat' && (
+                                    <svg className="w-4 h-4 text-blue-500 dark:text-blue-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M18 10c0 3.866-3.582 7-8 7a8.96 8.96 0 01-4.39-1.11L2 17l1.11-2.61A8.96 8.96 0 012 10c0-3.866 3.582-7 8-7s8 3.134 8 7z" /></svg>
+                                )}
+                                {effectiveContext.type === 'agent' && (
+                                    <svg className="w-4 h-4 text-green-500 dark:text-green-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 016 6c0 2.21-1.343 4.09-3.25 5.25A4.992 4.992 0 0110 18a4.992 4.992 0 01-2.75-4.75C5.343 12.09 4 10.21 4 8a6 6 0 016-6z" /></svg>
+                                )}
+                                {effectiveContext.type === 'tool' && (
+                                    <svg className="w-4 h-4 text-yellow-500 dark:text-yellow-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M13.293 2.293a1 1 0 011.414 0l3 3a1 1 0 010 1.414l-8.5 8.5a1 1 0 01-.293.207l-4 2a1 1 0 01-1.316-1.316l2-4a1 1 0 01.207-.293l8.5-8.5z" /></svg>
+                                )}
+                                {effectiveContext.type === 'prompt' && (
+                                    <svg className="w-4 h-4 text-purple-500 dark:text-purple-300 mr-1" fill="currentColor" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" /></svg>
+                                )}
+                                {/* Context label */}
+                                <span>
+                                    {effectiveContext.type === 'chat' && "Chat"}
+                                    {effectiveContext.type === 'agent' && `Agent: ${effectiveContext.name}`}
+                                    {effectiveContext.type === 'tool' && `Tool: ${effectiveContext.name}`}
+                                    {effectiveContext.type === 'prompt' && `Prompt: ${effectiveContext.name}`}
+                                </span>
+                                {/* Close button */}
+                                <button
+                                    className="ml-2 text-zinc-400 hover:text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors duration-150 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-blue-200"
+                                    onClick={() => setDiscardContext(true)}
+                                    aria-label="Close context"
+                                >
+                                    <XIcon size={16} />
+                                </button>
                             </div>
-                            <button
-                                className="text-gray-500 hover:text-gray-600 dark:text-gray-400 dark:hover:text-gray-300"
-                                onClick={() => setDiscardContext(true)}
-                            >
-                                <XIcon size={16} />
-                            </button>
                         </div>
-                    </div>}
+                    )}
                     <ComposeBoxCopilot
                         handleUserMessage={handleUserMessage}
                         messages={messages}
@@ -273,8 +291,8 @@ export const Copilot = forwardRef<{ handleUserMessage: (message: string) => void
                 title={
                     <div className="flex items-center gap-3">
                         <div className="flex items-center gap-2">
-                            <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                                SKIPPER
+                            <div className="font-semibold text-zinc-700 dark:text-zinc-300">
+                                Skipper
                             </div>
                             <Tooltip content="A copilot to help you build and modify your workflow">
                                 <InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />
diff --git a/apps/rowboat/app/projects/[projectId]/playground/app.tsx b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
index 7ec7b39d..78e8791a 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/app.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/app.tsx
@@ -101,8 +101,8 @@ export function App({
                 title={
                     <div className="flex items-center gap-3">
                         <div className="flex items-center gap-2">
-                            <div className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                                PLAYGROUND
+                            <div className="font-semibold text-zinc-700 dark:text-zinc-300">
+                                Playground
                             </div>
                             <Tooltip content="Test your workflow and chat with your agents in real-time">
                                 <InfoIcon className="w-4 h-4 text-gray-400 cursor-help" />
diff --git a/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx b/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
index 4102cf68..032fffce 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/components/chat.tsx
@@ -271,7 +271,7 @@ export function Chat({
         projectTools,
     ]);
 
-    return <div className="relative max-w-3xl mx-auto h-full flex flex-col">
+    return <div className="w-11/12 max-w-6xl mx-auto h-full flex flex-col relative">
         <div className="sticky top-0 z-10 bg-white dark:bg-zinc-900 pt-4 pb-4">
             {USE_TESTING_FEATURE && (
                 <ProfileContextBox
diff --git a/apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx b/apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx
index f7357b43..8fe83203 100644
--- a/apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx
+++ b/apps/rowboat/app/projects/[projectId]/playground/components/messages.tsx
@@ -452,7 +452,7 @@ export function Messages({
 
     // Just render the messages, no scroll container or unread bubble
     return (
-        <div className="max-w-4xl mx-auto px-2 sm:px-6 relative">
+        <div className="max-w-7xl mx-auto px-2 sm:px-8 relative">
             {messages.map((message, index) => {
                 const renderedMessage = renderMessage(message, index);
                 if (renderedMessage) {
diff --git a/apps/rowboat/components/common/panel-common.tsx b/apps/rowboat/components/common/panel-common.tsx
index 058ad594..70dfaca5 100644
--- a/apps/rowboat/components/common/panel-common.tsx
+++ b/apps/rowboat/components/common/panel-common.tsx
@@ -58,7 +58,7 @@ export function Panel({
     
     return <div 
         className={clsx(
-            "flex flex-col overflow-hidden rounded-xl border relative",
+            "flex flex-col overflow-hidden rounded-xl border relative w-full",
             variant === 'copilot' ? "border-blue-200 dark:border-blue-800" : "border-zinc-200 dark:border-zinc-800",
             "bg-white dark:bg-zinc-900",
             maxHeight ? "max-h-(--panel-height)" : "h-full",