diff --git a/docs/public/chat_mode.png b/docs/public/chat_mode.png
index 4fd0658..8c6ac42 100644
Binary files a/docs/public/chat_mode.png and b/docs/public/chat_mode.png differ
diff --git a/docs/public/email_mode.png b/docs/public/email_mode.png
index 53e4cf1..7f116fd 100644
Binary files a/docs/public/email_mode.png and b/docs/public/email_mode.png differ
diff --git a/examples/chat-demo-app/README.md b/examples/chat-demo-app/README.md
index 6390182..e22f373 100644
--- a/examples/chat-demo-app/README.md
+++ b/examples/chat-demo-app/README.md
@@ -3,7 +3,7 @@
 ### Overview
 The demo showcases the versatility of the Multi-Agent Orchestrator System through an interactive chat interface. Watch how the system seamlessly handles diverse queries using specialized agents:
 
-![Demo Application](./img/demo-app.jpg)
+![Demo Application](./img/chat-demo-app.png)
 
 ### Featured Agents
 Our demo showcases specialized agents, each designed for specific use cases:
diff --git a/examples/chat-demo-app/img/chat-demo-app.png b/examples/chat-demo-app/img/chat-demo-app.png
new file mode 100644
index 0000000..93e32a5
Binary files /dev/null and b/examples/chat-demo-app/img/chat-demo-app.png differ
diff --git a/examples/chat-demo-app/img/demo-app.jpg b/examples/chat-demo-app/img/demo-app.jpg
deleted file mode 100644
index 2aa8d65..0000000
Binary files a/examples/chat-demo-app/img/demo-app.jpg and /dev/null differ
diff --git a/examples/ecommerce-support-simulator/img/chat_mode.png b/examples/ecommerce-support-simulator/img/chat_mode.png
index 4fd0658..8c6ac42 100644
Binary files a/examples/ecommerce-support-simulator/img/chat_mode.png and b/examples/ecommerce-support-simulator/img/chat_mode.png differ
diff --git a/examples/ecommerce-support-simulator/img/email_mode.png b/examples/ecommerce-support-simulator/img/email_mode.png
index 53e4cf1..7f116fd 100644
Binary files a/examples/ecommerce-support-simulator/img/email_mode.png and b/examples/ecommerce-support-simulator/img/email_mode.png differ
diff --git a/examples/ecommerce-support-simulator/resources/ui/src/components/ChatMode.tsx b/examples/ecommerce-support-simulator/resources/ui/src/components/ChatMode.tsx
index f1e95c4..aa31556 100644
--- a/examples/ecommerce-support-simulator/resources/ui/src/components/ChatMode.tsx
+++ b/examples/ecommerce-support-simulator/resources/ui/src/components/ChatMode.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
 import { Send } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import type { Message } from '../types';
-
 const ChatMode = ({
   messages,
   customerMessage,
@@ -46,20 +45,24 @@ const ChatMode = ({
         <div key={index} className={`flex ${isFromUI ? 'justify-end' : 'justify-start'} mb-2`}>
           <div className={`rounded-lg py-2 px-4 max-w-[80%] break-words ${
             isFromUI
-              ? (isCustomer ? 'bg-yellow-300 text-yellow-900' : 'bg-red-300 text-red-900')
-              : 'bg-gray-300 text-gray-900'
+              ? (isCustomer ? 'bg-blue-50 border border-blue-100 text-gray-900' : 'bg-gray-50 border border-gray-200 text-gray-900')
+              : 'bg-white border border-gray-200 text-gray-900'
           }`}>
-            <p className="text-xs font-semibold mb-1">{senderLabel}</p>
+            <p className={`text-xs font-semibold mb-1 ${
+              isFromUI ? 'text-blue-600' : 'text-gray-600'
+            }`}>
+              {senderLabel}
+            </p>
             <ReactMarkdown 
-              className="prose prose-sm max-w-none"
+              className="prose prose-sm max-w-none text-gray-900"
               components={{
                 p: ({node, ...props}) => <p className="whitespace-pre-wrap" {...props} />,
-                pre: ({node, ...props}) => <pre className="whitespace-pre-wrap overflow-x-auto" {...props} />
+                pre: ({node, ...props}) => <pre className="whitespace-pre-wrap overflow-x-auto bg-gray-50 p-2 rounded" {...props} />
               }}
             >
               {msg.content}
             </ReactMarkdown>
-            <p className="text-xs mt-1 text-gray-600">
+            <p className="text-xs mt-1 text-gray-500">
               {new Date(msg.timestamp).toLocaleTimeString()}
             </p>
           </div>
@@ -71,6 +74,8 @@ const ChatMode = ({
   const submitMessage = (e: React.FormEvent, isCustomer: boolean) => {
     e.preventDefault();
     const message = isCustomer ? customerMessage : supportMessage;
+    if (!message.trim()) return;
+    
     const newMessage = {
       content: message,
       destination: isCustomer ? 'customer' : 'support',
@@ -88,49 +93,64 @@ const ChatMode = ({
 
   return (
     <div className="flex flex-col space-y-4 h-[700px]">
-    <div className="flex-grow flex space-x-4 h-full">
-      {/* Customer Chat */}
-      <div className="flex-1 bg-gradient-to-br from-yellow-400 to-amber-500 rounded-2xl p-4 shadow-lg flex flex-col">
-        <h2 className="text-2xl font-bold text-yellow-900 mb-4">Customer Chat</h2>
-        <div ref={customerChatRef} className="flex-grow bg-yellow-100 rounded-lg p-4 overflow-y-auto mb-4 h-[calc(100%-120px)]">
-          {renderMessages(true)}
+      <div className="flex-grow flex space-x-4 h-full">
+        {/* Customer Chat */}
+        <div className="flex-1 bg-white rounded-xl p-4 shadow-sm border border-gray-200 flex flex-col">
+          <h2 className="text-2xl font-bold text-gray-900 mb-4">Customer Chat</h2>
+          <div 
+            ref={customerChatRef} 
+            className="flex-grow bg-gray-50 rounded-lg p-4 overflow-y-auto mb-4 h-[calc(100%-120px)] border border-gray-100"
+          >
+            {renderMessages(true)}
+          </div>
+          <form onSubmit={(e) => submitMessage(e, true)} className="flex mt-auto">
+            <input
+              ref={customerInputRef}
+              type="text"
+              value={customerMessage}
+              onChange={(e) => setCustomerMessage(e.target.value)}
+              className="flex-grow mr-2 p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 text-gray-900 placeholder-gray-500"
+              placeholder="Type a message..."
+            />
+            <button 
+              type="submit" 
+              className="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition-colors duration-200"
+              disabled={!customerMessage.trim()}
+            >
+              <Send size={20} />
+            </button>
+          </form>
         </div>
-        <form onSubmit={(e) => submitMessage(e, true)} className="flex mt-auto">
-          <input
-            ref={customerInputRef}
-            type="text"
-            value={customerMessage}
-            onChange={(e) => setCustomerMessage(e.target.value)}
-            className="flex-grow mr-2 p-2 rounded-lg"
-            placeholder="Type a message..."
-          />
-          <button type="submit" className="bg-amber-500 text-white p-2 rounded-lg">
-            <Send size={20} />
-          </button>
-        </form>
-      </div>
-      {/* Support Chat */}
-      <div className="flex-1 bg-gradient-to-br from-orange-400 to-red-500 rounded-2xl p-4 shadow-lg flex flex-col">
-        <h2 className="text-2xl font-bold text-red-900 mb-4">Support Chat</h2>
-        <div ref={supportChatRef} className="flex-grow bg-red-100 rounded-lg p-4 overflow-y-auto mb-4 h-[calc(100%-120px)]">
-          {renderMessages(false)}
+
+        {/* Support Chat */}
+        <div className="flex-1 bg-white rounded-xl p-4 shadow-sm border border-gray-200 flex flex-col">
+          <h2 className="text-2xl font-bold text-gray-900 mb-4">Support Chat</h2>
+          <div 
+            ref={supportChatRef} 
+            className="flex-grow bg-gray-50 rounded-lg p-4 overflow-y-auto mb-4 h-[calc(100%-120px)] border border-gray-100"
+          >
+            {renderMessages(false)}
+          </div>
+          <form onSubmit={(e) => submitMessage(e, false)} className="flex mt-auto">
+            <input
+              ref={supportInputRef}
+              type="text"
+              value={supportMessage}
+              onChange={(e) => setSupportMessage(e.target.value)}
+              className="flex-grow mr-2 p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 text-gray-900 placeholder-gray-500"
+              placeholder="Type a response..."
+            />
+            <button 
+              type="submit" 
+              className="bg-blue-600 hover:bg-blue-700 text-white p-2 rounded-lg transition-colors duration-200"
+              disabled={!supportMessage.trim()}
+            >
+              <Send size={20} />
+            </button>
+          </form>
         </div>
-        <form onSubmit={(e) => submitMessage(e, false)} className="flex mt-auto">
-          <input
-            ref={supportInputRef}
-            type="text"
-            value={supportMessage}
-            onChange={(e) => setSupportMessage(e.target.value)}
-            className="flex-grow mr-2 p-2 rounded-lg"
-            placeholder="Type a response..."
-          />
-          <button type="submit" className="bg-red-500 text-white p-2 rounded-lg">
-            <Send size={20} />
-          </button>
-        </form>
       </div>
     </div>
-  </div>
   );
 };
 
diff --git a/examples/ecommerce-support-simulator/resources/ui/src/components/EmailMode.tsx b/examples/ecommerce-support-simulator/resources/ui/src/components/EmailMode.tsx
index e76ae58..ec9eb6f 100644
--- a/examples/ecommerce-support-simulator/resources/ui/src/components/EmailMode.tsx
+++ b/examples/ecommerce-support-simulator/resources/ui/src/components/EmailMode.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Send } from 'lucide-react';
-
 const EmailMode = ({
   fromEmail,
   setFromEmail,
@@ -46,26 +45,26 @@ const EmailMode = ({
   return (
     <div className="grid grid-cols-2 gap-4 h-full">
       {/* Customer Email */}
-      <div className="bg-gradient-to-br from-yellow-400 to-amber-500 rounded-2xl p-6 shadow-lg flex flex-col h-full">
-        <h2 className="text-2xl font-bold text-yellow-900 mb-4">Customer Email</h2>
+      <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 flex flex-col h-full">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Customer Email</h2>
         <div className="flex flex-col flex-grow">
           <form onSubmit={submitCustomerEmail} className="flex flex-col flex-grow">
             <div className="mb-2">
-              <label className="block text-sm font-medium text-yellow-900 mb-1">From:</label>
+              <label className="block text-sm font-medium text-gray-700 mb-1">From:</label>
               <input
                 type="email"
                 value={fromEmail}
                 onChange={(e) => setFromEmail(e.target.value)}
-                className="w-full p-2 rounded-lg"
+                className="w-full p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
                 required
               />
             </div>
             <div className="mb-2">
-              <label className="block text-sm font-medium text-yellow-900 mb-1">Template:</label>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Template:</label>
               <select
                 value={selectedTemplate}
                 onChange={handleTemplateChange}
-                className="w-full p-2 rounded-lg"
+                className="w-full p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 bg-white"
               >
                 {Object.entries(emailTemplates).map(([key, value]) => (
                   <option key={key} value={key}>{String(value)}</option>
@@ -73,21 +72,21 @@ const EmailMode = ({
               </select>
             </div>
             <div className="flex-grow mb-4">
-              <label className="block text-sm font-medium text-yellow-900 mb-1">Message:</label>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Message:</label>
               <textarea
                 value={customerMessage}
                 onChange={(e) => setCustomerMessage(e.target.value)}
-                className="w-full p-2 rounded-lg h-full min-h-[120px] resize-none"
+                className="w-full p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 h-full min-h-[120px] resize-none"
                 required
               />
             </div>
-            <div className="mt-4"> {/* Added margin top here */}
+            <div className="mt-4">
               <button 
                 type="submit" 
-                className={`w-full flex items-center justify-center text-lg py-2 px-4 rounded-lg ${
+                className={`w-full flex items-center justify-center text-lg py-2 px-4 rounded-lg transition-colors duration-200 ${
                   isCustomerMessageEmpty 
-                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed' 
-                    : 'bg-amber-500 text-white hover:bg-amber-600'
+                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200' 
+                    : 'bg-blue-600 text-white hover:bg-blue-700'
                 }`}
                 disabled={isCustomerMessageEmpty}
               >
@@ -97,33 +96,33 @@ const EmailMode = ({
             </div>
           </form>
         </div>
-        <div className="mt-4 bg-yellow-100 p-4 rounded-lg h-32 overflow-auto">
-          <h3 className="font-semibold mb-2">Response:</h3>
-          <p>{customerResponse}</p>
+        <div className="mt-4 bg-gray-50 border border-gray-200 p-4 rounded-lg h-32 overflow-auto">
+          <h3 className="font-semibold mb-2 text-gray-900">Response:</h3>
+          <p className="text-gray-700">{customerResponse}</p>
         </div>
       </div>
 
       {/* Support Email */}
-      <div className="bg-gradient-to-br from-orange-400 to-red-500 rounded-2xl p-6 shadow-lg flex flex-col h-full">
-        <h2 className="text-2xl font-bold text-red-900 mb-4">Support Email</h2>
+      <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-200 flex flex-col h-full">
+        <h2 className="text-2xl font-bold text-gray-900 mb-4">Support Email</h2>
         <div className="flex flex-col flex-grow">
           <form onSubmit={submitSupportEmail} className="flex flex-col flex-grow">
             <div className="flex-grow mb-4">
-              <label className="block text-sm font-medium text-red-900 mb-1">Message:</label>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Message:</label>
               <textarea
                 value={supportMessage}
                 onChange={(e) => setSupportMessage(e.target.value)}
-                className="w-full p-2 rounded-lg h-full min-h-[120px] resize-none"
+                className="w-full p-2 rounded-lg border border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 h-full min-h-[120px] resize-none"
                 required
               />
             </div>
-            <div className="mt-4"> {/* Added margin top here */}
+            <div className="mt-4">
               <button 
                 type="submit" 
-                className={`w-full flex items-center justify-center text-lg py-2 px-4 rounded-lg ${
+                className={`w-full flex items-center justify-center text-lg py-2 px-4 rounded-lg transition-colors duration-200 ${
                   isSupportMessageEmpty 
-                    ? 'bg-gray-300 text-gray-500 cursor-not-allowed' 
-                    : 'bg-red-500 text-white hover:bg-red-600'
+                    ? 'bg-gray-100 text-gray-400 cursor-not-allowed border border-gray-200' 
+                    : 'bg-blue-600 text-white hover:bg-blue-700'
                 }`}
                 disabled={isSupportMessageEmpty}
               >
@@ -133,9 +132,9 @@ const EmailMode = ({
             </div>
           </form>
         </div>
-        <div className="mt-4 bg-red-100 p-4 rounded-lg h-32 overflow-auto">
-          <h3 className="font-semibold mb-2">Response:</h3>
-          <p>{supportResponse}</p>
+        <div className="mt-4 bg-gray-50 border border-gray-200 p-4 rounded-lg h-32 overflow-auto">
+          <h3 className="font-semibold mb-2 text-gray-900">Response:</h3>
+          <p className="text-gray-700">{supportResponse}</p>
         </div>
       </div>
     </div>
diff --git a/examples/ecommerce-support-simulator/resources/ui/src/components/SupportSimulator.tsx b/examples/ecommerce-support-simulator/resources/ui/src/components/SupportSimulator.tsx
index fc5dc06..06910be 100644
--- a/examples/ecommerce-support-simulator/resources/ui/src/components/SupportSimulator.tsx
+++ b/examples/ecommerce-support-simulator/resources/ui/src/components/SupportSimulator.tsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import { Mail, MessageSquare, RefreshCw } from 'lucide-react';
-import { Send, Loader, Github, BookOpen } from 'lucide-react';
+import { Mail, MessageSquare } from 'lucide-react';
+import { Send, Code2, BookOpen, RefreshCw } from 'lucide-react';
+
 import { ChevronDown, ChevronUp } from 'lucide-react';
 import { generateClient, type GraphQLSubscription } from 'aws-amplify/api';
 import { signOut, getCurrentUser } from 'aws-amplify/auth';
@@ -264,109 +265,108 @@ const SupportSimulator = () => {
   }
 
 
-
   return (
     <Authenticator>
-  {({ signOut, user }) => (
-    <div className="min-h-screen w-full bg-gradient-to-br from-amber-500 via-orange-500 to-red-500 p-4 flex flex-col items-center">
-      <div className="w-full max-w-6xl bg-orange-100 bg-opacity-10 backdrop-blur-md rounded-3xl p-8 flex flex-col shadow-2xl">
-        <div className="text-center mb-6">
-          <h1 className="text-4xl font-bold text-yellow-100 mb-4 drop-shadow-lg">
-            AI-Powered E-commerce Support Simulator
-          </h1>
-          <p className="text-xl text-yellow-100 mb-3">
-            Experience the future of customer support with our multi-agent AI system.
-          </p>
-          <p className="text-lg text-yellow-200 italic mb-0">
-            Try asking "Where is my order?" or "I want to return an item" to see how our AI handles customer support inquiries!
-          </p>
-        </div>
-
-        <div className="flex justify-between items-center mb-4">
-          <button
-            onClick={toggleMode}
-            className="bg-yellow-400 hover:bg-yellow-500 text-orange-900 font-bold p-3 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-110 flex items-center"
-          >
-            {isChatMode ? <Mail size={24} /> : <MessageSquare size={24} />}
-            <span className="ml-2">{isChatMode ? 'Email Mode' : 'Chat Mode'}</span>
-          </button>
-          <button
-            onClick={handleReset}
-            className="bg-yellow-400 hover:bg-yellow-500 text-orange-900 font-bold p-3 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-110"
-          >
-            <RefreshCw size={24} />
-          </button>
-        </div>
-
-        <div className="flex justify-between mb-4">
-          <div className="w-1/2 pr-2">
-            <p className="text-yellow-100 text-center font-semibold mb-2">
-              Customer Interface
-            </p>
-            <p className="text-yellow-200 text-sm text-center italic">
-            Customer's view of the interaction
-            </p>
-          </div>
-          <div className="w-1/2 pl-2">
-            <p className="text-yellow-100 text-center font-semibold mb-2">
-              Support Center Interface
-            </p>
-            <p className="text-yellow-200 text-sm text-center italic">
-            Human agent's view and responses
-            </p>
-          </div>
-        </div>
-
-        {isChatMode ? (
-          <ChatMode
-            messages={messages}
-            customerMessage={customerMessage}
-            setCustomerMessage={setCustomerMessage}
-            supportMessage={supportMessage}
-            setSupportMessage={setSupportMessage}
-            handleCustomerSubmit={handleCustomerSubmit}
-            handleSupportSubmit={handleSupportSubmit}
-          />
-        ) : (
-          <EmailMode
-            fromEmail={fromEmail}
-            setFromEmail={setFromEmail}
-            selectedTemplate={selectedTemplate}
-            handleTemplateChange={handleTemplateChange}
-            customerMessage={customerMessage}
-            setCustomerMessage={setCustomerMessage}
-            supportMessage={supportMessage}
-            setSupportMessage={setSupportMessage}
-            customerResponse={customerResponse}
-            supportResponse={supportResponse}
-            handleCustomerSubmit={handleCustomerSubmit}
-            handleSupportSubmit={handleSupportSubmit}
-            emailTemplates={emailTemplates}
-          />
-        )}
-
-        {showLogs && (
-          <div className="mt-4 bg-gray-100 p-4 rounded-lg">
-            <h3 className="text-lg font-semibold mb-2">Logs:</h3>
-            <ul className="list-disc pl-5">
-              {logs.map((log, index) => (
-                <li key={index}>{log}</li>
-              ))}
-            </ul>
-          </div>
-        )}
-
-         {/* Behind the Scenes Section */}
-         <div className="mt-8 bg-amber-800 bg-opacity-90 rounded-xl shadow-lg overflow-hidden">
+      {({ signOut, user }) => (
+        <div className="min-h-screen w-full bg-slate-50 p-4 flex flex-col items-center">
+          <div className="w-full max-w-6xl bg-white rounded-2xl p-8 flex flex-col shadow-lg border border-gray-200">
+            <div className="text-center mb-6">
+              <h1 className="text-3xl font-bold text-blue-600 mb-4">
+                Multi-Agent Orchestrator Demo
+              </h1>
+              <p className="text-lg text-gray-700 mb-3">
+                Experience the power of intelligent routing and context management across multiple AI agents.
+              </p>
+              <p className="text-md text-gray-600 italic mb-0">
+                Type "hello" or "bonjour" to see the available agents, or ask questions like "How do I use agents?"
+              </p>
+            </div>
+  
+            <div className="flex justify-between items-center mb-4">
+              <button
+                onClick={toggleMode}
+                className="bg-blue-50 hover:bg-blue-100 text-blue-600 font-bold p-3 rounded-lg transition-all duration-200 flex items-center border border-blue-200"
+              >
+                {isChatMode ? <Mail size={24} /> : <MessageSquare size={24} />}
+                <span className="ml-2">{isChatMode ? 'Email Mode' : 'Chat Mode'}</span>
+              </button>
+              <button
+                onClick={handleReset}
+                className="bg-blue-50 hover:bg-blue-100 text-blue-600 font-bold p-3 rounded-lg transition-all duration-200 border border-blue-200"
+              >
+                <RefreshCw size={24} />
+              </button>
+            </div>
+  
+            <div className="flex justify-between mb-4">
+              <div className="w-1/2 pr-2">
+                <p className="text-gray-900 text-center font-semibold mb-2">
+                  Customer Interface
+                </p>
+                <p className="text-gray-600 text-sm text-center italic">
+                  Customer's view of the interaction
+                </p>
+              </div>
+              <div className="w-1/2 pl-2">
+                <p className="text-gray-900 text-center font-semibold mb-2">
+                  Support Center Interface
+                </p>
+                <p className="text-gray-600 text-sm text-center italic">
+                  Human agent's view and responses
+                </p>
+              </div>
+            </div>
+  
+            {isChatMode ? (
+              <ChatMode
+                messages={messages}
+                customerMessage={customerMessage}
+                setCustomerMessage={setCustomerMessage}
+                supportMessage={supportMessage}
+                setSupportMessage={setSupportMessage}
+                handleCustomerSubmit={handleCustomerSubmit}
+                handleSupportSubmit={handleSupportSubmit}
+              />
+            ) : (
+              <EmailMode
+                fromEmail={fromEmail}
+                setFromEmail={setFromEmail}
+                selectedTemplate={selectedTemplate}
+                handleTemplateChange={handleTemplateChange}
+                customerMessage={customerMessage}
+                setCustomerMessage={setCustomerMessage}
+                supportMessage={supportMessage}
+                setSupportMessage={setSupportMessage}
+                customerResponse={customerResponse}
+                supportResponse={supportResponse}
+                handleCustomerSubmit={handleCustomerSubmit}
+                handleSupportSubmit={handleSupportSubmit}
+                emailTemplates={emailTemplates}
+              />
+            )}
+  
+            {showLogs && (
+              <div className="mt-4 bg-gray-50 border border-gray-200 p-4 rounded-lg">
+                <h3 className="text-lg font-semibold mb-2 text-gray-900">Logs:</h3>
+                <ul className="list-disc pl-5 text-gray-700">
+                  {logs.map((log, index) => (
+                    <li key={index}>{log}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+  
+            {/* Behind the Scenes Section */}
+            <div className="mt-8 bg-gray-50 border border-gray-200 rounded-xl shadow-sm overflow-hidden">
               <button
                 onClick={() => setIsBehindScenesOpen(!isBehindScenesOpen)}
-                className="w-full flex justify-between items-center p-4 text-amber-100 font-semibold focus:outline-none hover:bg-amber-700 transition-colors duration-300"
+                className="w-full flex justify-between items-center p-4 text-gray-900 font-semibold focus:outline-none hover:bg-gray-100 transition-colors duration-200"
               >
                 <span className="text-xl">Behind the Scenes</span>
                 {isBehindScenesOpen ? <ChevronUp size={24} /> : <ChevronDown size={24} />}
               </button>
               {isBehindScenesOpen && (
-                <div className="p-4 bg-amber-900 text-amber-100 font-mono text-xs overflow-y-auto max-h-60">
+                <div className="p-4 bg-white border-t border-gray-200 font-mono text-xs overflow-y-auto max-h-60 text-gray-700">
                   {logs.map((log, index) => (
                     <div key={index} className="mb-1">
                       {log}
@@ -375,51 +375,75 @@ const SupportSimulator = () => {
                 </div>
               )}
             </div>
-
+  
             <div className="text-center mt-6">
-      <a
-        href="/mock_data.json"
-        target='_blank'
-        className="text-yellow-200 hover:text-yellow-100 text-sm underline transition-colors duration-300"
-      >
-        Access mock data for simulation
-      </a>
-    </div>
-
-
-        <div className="text-center text-yellow-100 mt-8 p-6 bg-orange-600 bg-opacity-30 rounded-xl shadow-lg">
-          <p className="mb-4 text-xl font-semibold">To learn more about the Multi-Agent Orchestrator:</p>
-          <div className="flex justify-center space-x-6">
-            <a
-              href="https://github.com/awslabs/multi-agent-orchestrator"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center bg-yellow-400 hover:bg-yellow-500 text-orange-900 font-bold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105"
-            >
-              <Github size={24} className="mr-2" />
-              GitHub Repo
-            </a>
-            <a
-              href="https://awslabs.github.io/multi-agent-orchestrator/"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center bg-yellow-400 hover:bg-yellow-500 text-orange-900 font-bold py-2 px-4 rounded-lg transition-all duration-300 ease-in-out transform hover:scale-105"
+              <a
+                href="/mock_data.json"
+                target='_blank'
+                className="text-blue-600 hover:text-blue-700 text-sm underline transition-colors duration-200"
+              >
+                Access mock data for simulation
+              </a>
+            </div>
+  
+            <div className="text-center text-slate-900">
+              <p className="mb-2">To learn more about the Multi-Agent Orchestrator:</p>
+              <div className="flex justify-center space-x-4">
+                <a
+                  href="https://github.com/awslabs/multi-agent-orchestrator"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center bg-slate-100 hover:bg-slate-200 text-slate-900 font-bold py-2 px-4 rounded-lg transition-all duration-300"
+                >
+                  <Code2 size={24} className="mr-2 text-blue-700" />
+                  GitHub Repo
+                </a>
+                <a
+                  href="https://awslabs.github.io/multi-agent-orchestrator/"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center bg-slate-100 hover:bg-slate-200 text-slate-900 font-bold py-2 px-4 rounded-lg transition-all duration-300"
+                >
+                  <BookOpen size={24} className="mr-2 text-blue-700" />
+                  Documentation
+                </a>
+                <a
+                  href="https://github.com/awslabs/multi-agent-orchestrator/tree/main/examples/ecommerce-support-simulator"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="flex items-center bg-slate-100 hover:bg-slate-200 text-slate-900 font-bold py-2 px-4 rounded-lg transition-all duration-300"
+                >
+                  <svg 
+                    viewBox="0 0 24 24" 
+                    className="w-6 h-6 mr-2 text-blue-700"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+                    <polyline points="7.5 4.21 12 6.81 16.5 4.21" />
+                    <polyline points="7.5 19.79 7.5 14.6 3 12" />
+                    <polyline points="21 12 16.5 14.6 16.5 19.79" />
+                    <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+                    <line x1="12" y1="22.08" x2="12" y2="12" />
+                  </svg>
+                  Deploy this app!
+                </a>
+              </div>
+            </div>
+            
+            <button
+              onClick={handleSignOut}
+              className="mt-6 bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded-lg transition-colors duration-200 self-center"
             >
-              <BookOpen size={24} className="mr-2" />
-              Documentation
-            </a>
+              Sign Out
+            </button>
           </div>
         </div>
-        <button
-          onClick={handleSignOut}
-          className="mt-6 bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded-lg shadow-md transition-colors duration-300 self-center"
-        >
-          Sign Out
-        </button>
-      </div>
-    </div>
-  )}
-</Authenticator>
+      )}
+    </Authenticator>
   );
 };
 
diff --git a/examples/ecommerce-support-simulator/resources/ui/src/pages/index.astro b/examples/ecommerce-support-simulator/resources/ui/src/pages/index.astro
index 73567d6..bade8ca 100644
--- a/examples/ecommerce-support-simulator/resources/ui/src/pages/index.astro
+++ b/examples/ecommerce-support-simulator/resources/ui/src/pages/index.astro
@@ -1,10 +1,9 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import SupportSimulator from '../components/SupportSimulator';
-
 ---
 <Layout title="AI-Powered E-commerce Support Simulator">
-  <main>
+  <main class="w-full min-h-screen bg-gradient-to-br from-slate-50 via-white to-slate-100">
     <SupportSimulator client:load />
   </main>
 </Layout>