diff --git a/components/chat-panel.tsx b/components/chat-panel.tsx
index c5268ead..075636b1 100644
--- a/components/chat-panel.tsx
+++ b/components/chat-panel.tsx
@@ -15,9 +15,15 @@ interface ChatPanelProps {
   messages: UIState
   input: string
   setInput: (value: string) => void
+  onFocus: () => void
 }
 
-export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
+export function ChatPanel({
+  messages,
+  input,
+  setInput,
+  onFocus
+}: ChatPanelProps) {
   const [, setMessages] = useUIState<typeof AI>()
   const { submit, clearChat } = useActions()
   // Removed mcp instance as it's no longer passed to submit
@@ -121,6 +127,7 @@ export function ChatPanel({ messages, input, setInput }: ChatPanelProps) {
             onChange={e => {
               setInput(e.target.value)
             }}
+            onFocus={onFocus}
             onKeyDown={e => {
               if (
                 e.key === 'Enter' &&
diff --git a/components/chat.tsx b/components/chat.tsx
index 59c4d914..9fba42cf 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -6,9 +6,12 @@ import { ChatPanel } from './chat-panel'
 import { ChatMessages } from './chat-messages'
 import { EmptyScreen } from './empty-screen'
 import { Mapbox } from './map/mapbox-map'
-import { useUIState, useAIState } from 'ai/rsc'
+import { useUIState, useAIState, useActions } from 'ai/rsc'
+import { nanoid } from 'nanoid'
+import { UserMessage } from './user-message'
+import { UIState } from '@/app/actions'
 import MobileIconsBar from './mobile-icons-bar'
-import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
+import { useProfileToggle, ProfileToggleEnum } from '@/components/profile-toggle-context'
 import SettingsView from "@/components/settings/settings-view";
 import { MapDataProvider, useMapData } from './map/map-data-context'; // Add this and useMapData
 import { updateDrawingContext } from '@/lib/actions/chat'; // Import the server action
@@ -20,12 +23,14 @@ type ChatProps = {
 export function Chat({ id }: ChatProps) {
   const router = useRouter()
   const path = usePathname()
-  const [messages] = useUIState()
+  const [messages, setMessages] = useUIState()
   const [aiState] = useAIState()
+  const { submit } = useActions()
   const [isMobile, setIsMobile] = useState(false)
-  const { activeView } = useProfileToggle();
+  const { activeView } = useProfileToggle()
   const [input, setInput] = useState('')
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
+  const [isInputFocused, setIsInputFocused] = useState(false)
   
   useEffect(() => {
     setShowEmptyScreen(messages.length === 0)
@@ -83,13 +88,30 @@ export function Chat({ id }: ChatProps) {
             <MobileIconsBar />
           </div>
           <div className="mobile-chat-input-area">
-            <ChatPanel messages={messages} input={input} setInput={setInput} />
+            <ChatPanel
+              messages={messages}
+              input={input}
+              setInput={setInput}
+              onFocus={() => setIsInputFocused(true)}
+            />
           </div>
           <div className="mobile-chat-messages-area">
             {showEmptyScreen ? (
               <EmptyScreen
-                submitMessage={message => {
-                  setInput(message)
+                isInputFocused={isInputFocused}
+                submitMessage={async (message: string) => {
+                  setMessages((currentMessages: UIState) => [
+                    ...currentMessages,
+                    {
+                      id: nanoid(),
+                      component: <UserMessage message={message} />
+                    }
+                  ])
+                  const responseMessage = await submit(message)
+                  setMessages((currentMessages: UIState) => [
+                    ...currentMessages,
+                    responseMessage as any
+                  ])
                 }}
               />
             ) : (
@@ -98,20 +120,40 @@ export function Chat({ id }: ChatProps) {
           </div>
         </div>
       </MapDataProvider>
-    );
+    )
   }
-  
+
   // Desktop layout
   return (
-    <MapDataProvider> {/* Add Provider */}
+    <MapDataProvider>
+      {' '}
+      {/* Add Provider */}
       <div className="flex justify-start items-start">
         {/* This is the new div for scrolling */}
         <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-12 md:pt-14 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
-          <ChatPanel messages={messages} input={input} setInput={setInput} />
+          <ChatPanel
+            messages={messages}
+            input={input}
+            setInput={setInput}
+            onFocus={() => setIsInputFocused(true)}
+          />
           {showEmptyScreen ? (
             <EmptyScreen
-              submitMessage={message => {
-                setInput(message)
+              isInputFocused={isInputFocused}
+              submitMessage={async (message: string) => {
+                setMessages((currentMessages: UIState) => [
+                  ...currentMessages,
+                  {
+                    id: nanoid(),
+                    component: <UserMessage message={message} />
+                  }
+                ])
+
+                const responseMessage = await submit(message)
+                setMessages((currentMessages: UIState) => [
+                  ...currentMessages,
+                  responseMessage as any
+                ])
               }}
             />
           ) : (
@@ -126,5 +168,5 @@ export function Chat({ id }: ChatProps) {
         </div>
       </div>
     </MapDataProvider>
-  );
+  )
 }
diff --git a/components/empty-screen.tsx b/components/empty-screen.tsx
index 2c0f63e4..7c96104f 100644
--- a/components/empty-screen.tsx
+++ b/components/empty-screen.tsx
@@ -27,33 +27,36 @@ const exampleMessages = [
 export function EmptyScreen({
   submitMessage,
   className,
+  isInputFocused
 }: {
-  submitMessage: (message: string) => void;
-  className?: string;
+  submitMessage: (message: string) => void
+  className?: string
+  isInputFocused: boolean
 }) {
   return (
     <div className={`mx-auto w-full transition-all ${className}`}>
       <div className="bg-background p-2">
         <div className="mt-4 flex flex-col items-start space-y-2 mb-4">
-          {exampleMessages.map((item) => {
-            const Icon = item.icon;
-            return (
-              <Button
-                key={item.message} // Use a unique property as the key.
-                variant="link"
-                className="h-auto p-0 text-base flex items-center"
-                name={item.message}
-                onClick={async () => {
-                  submitMessage(item.message);
-                }}
-              >
-                <Icon size={16} className="mr-2 text-muted-foreground" />
-                {item.heading}
-              </Button>
-            );
-          })}
+          {isInputFocused &&
+            exampleMessages.map(item => {
+              const Icon = item.icon
+              return (
+                <Button
+                  key={item.message} // Use a unique property as the key.
+                  variant="link"
+                  className="h-auto p-0 text-base flex items-center"
+                  name={item.message}
+                  onClick={async () => {
+                    submitMessage(item.message)
+                  }}
+                >
+                  <Icon size={16} className="mr-2 text-muted-foreground" />
+                  {item.heading}
+                </Button>
+              )
+            })}
         </div>
       </div>
     </div>
-  );
+  )
 }