diff --git a/src/app/chat/_components/ChatInterface.tsx b/src/app/chat/_components/ChatInterface.tsx
index 16ac614..66736ef 100644
--- a/src/app/chat/_components/ChatInterface.tsx
+++ b/src/app/chat/_components/ChatInterface.tsx
@@ -1,5 +1,5 @@
 'use client'
-import {  useState, useEffect  } from 'react'
+import { useState, useEffect } from 'react'
 import { useChat } from '@ai-sdk/react'
 import { DefaultChatTransport, type UIMessage } from 'ai'
 import { Button } from '~/components/ui/button'
@@ -11,6 +11,7 @@ import Messages from './Messages'
 import { DeleteIcon } from 'lucide-react';
 import { trpc } from '~/app/_trpc/Client'
 import { Spinner } from '~/components/ui/spinner';
+import { Skeleton } from '~/components/ui/skeleton';
 interface DBMessage {
 	id: string
 	role: 'user' | 'assistant'
@@ -30,8 +31,17 @@ function toUIMessages(dbMessages: DBMessage[]): UIMessage[] {
 	}))
 }
 export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
+	if (!sessionId) {
+		return (
+			<div className="flex flex-col h-full">
+				<Skeleton className="w-full"/>
+				<Skeleton className="w-[20%]"/>
+				<Skeleton className='w-[45%]'/>
+			</div>
+		)
+	}
 	const utils = trpc.useUtils();
-	const { data: dbMessages, refetch: refetchMessages  } = trpc.chat.getMessages.useQuery(sessionId ? sessionId : "")
+	const { data: dbMessages, refetch: refetchMessages } = trpc.chat.getMessages.useQuery(sessionId)
 	const [messages, setMessages] = useState<UIMessage[]>([]);
 	function addMessage(newMessage: UIMessage) {
 		setMessages(prev => [...prev, newMessage]);
@@ -100,7 +110,7 @@ export default function ChatInterface({ sessionId }: ChatInterfaceProps) {
 	}, [messages])
 	return (
 		<div className="flex flex-col h-full">
-			{messages && 
+			{messages &&
 				<Messages messages={messages} />
 			}