diff --git a/components/header/Header.tsx b/components/header/Header.tsx
index ddd19ed..00a3df7 100644
--- a/components/header/Header.tsx
+++ b/components/header/Header.tsx
@@ -27,7 +27,7 @@ const Header: React.FC<HeaderProps> = ({ setSidebarOpen }) => {
         </span>
       </div>
 
-      <div className="min-w-[100px]">
+      <div className="w-fit">
         <Button
           buttonType="secondary"
           buttonText="Settings"
diff --git a/components/sidebar/ListOfChats.tsx b/components/sidebar/ListOfChats.tsx
index 7a40f7a..dc4c292 100644
--- a/components/sidebar/ListOfChats.tsx
+++ b/components/sidebar/ListOfChats.tsx
@@ -8,7 +8,6 @@ function classNames(...classes: string[]) {
 const ListOfChats = ({
   filteredChatList,
   selectedChatId,
-  setChatId,
   setSelectedChatId,
   chatNames,
   updateChatName,
@@ -16,14 +15,12 @@ const ListOfChats = ({
 }: {
   filteredChatList: string[];
   selectedChatId: string;
-  setChatId: (chatId: string) => void;
   setSelectedChatId: (chatId: string) => void;
   chatNames: { [chatId: string]: string };
   updateChatName: (chatId: string, newChatName: string) => void;
   deleteChat: (chatId: string) => void;
 }) => {
   const handleChatClick = (chatId: string) => {
-    setChatId(chatId);
     setSelectedChatId(chatId);
   };
 
@@ -41,7 +38,7 @@ const ListOfChats = ({
   };
 
   return (
-    <ul role="list" className="-mx-2 mt-2 px-2 pb-6">
+    <ul role="list" className="-mx-2 mt-2 px-2 pb-6 space-y-1">
       {[...filteredChatList].reverse().map((chatId, index) => (
         <li
           key={chatId}
diff --git a/components/sidebar/SidebarList.tsx b/components/sidebar/SidebarList.tsx
index 725df71..e84705d 100644
--- a/components/sidebar/SidebarList.tsx
+++ b/components/sidebar/SidebarList.tsx
@@ -15,7 +15,6 @@ interface SidebarListProps {
   setModelTemperature: React.Dispatch<React.SetStateAction<number>>;
   filteredChatList: string[];
   selectedChatId: string;
-  setChatId: (value: string) => void;
   setSelectedChatId: React.Dispatch<React.SetStateAction<string>>;
   nameSpaceHasChats: boolean;
   chatNames: Record<string, string>;
@@ -33,7 +32,6 @@ const SidebarList: React.FC<SidebarListProps> = ({
   setModelTemperature,
   filteredChatList,
   selectedChatId,
-  setChatId,
   createChat,
   setSelectedChatId,
   nameSpaceHasChats,
@@ -63,7 +61,6 @@ const SidebarList: React.FC<SidebarListProps> = ({
               buttonText="New chat"
               onClick={async () => {
                 const newChatId = createChat();
-                setChatId(newChatId);
                 setSelectedChatId(newChatId);
               }}
               icon={PlusCircleIcon}
@@ -82,7 +79,7 @@ const SidebarList: React.FC<SidebarListProps> = ({
         />
       </div>
 
-      <div className="px-4  text-xs sm:text-sm font-semibold leading-6 text-blue-400">
+      <div className="px-4 text-xs sm:text-sm font-semibold leading-6 text-blue-400">
         Your chats
       </div>
       <div className="px-4 flex-grow overflow-y-auto">
@@ -90,7 +87,6 @@ const SidebarList: React.FC<SidebarListProps> = ({
           <ListOfChats
             filteredChatList={filteredChatList}
             selectedChatId={selectedChatId}
-            setChatId={setChatId}
             setSelectedChatId={setSelectedChatId}
             chatNames={chatNames}
             updateChatName={updateChatName}
diff --git a/hooks/useChats.ts b/hooks/useChats.ts
index d0a2493..a191362 100644
--- a/hooks/useChats.ts
+++ b/hooks/useChats.ts
@@ -68,8 +68,15 @@ export function useChats(namespace: string) {
     setAllChats(updatedAllChats);
 
     if (chatIdToDelete === selectedChatId) {
-      const newSelectedChatId =
-        updatedAllChats.length > 0 ? updatedAllChats[0].chatId : '';
+      const deletedChatIndex = allChats.findIndex(
+        (chat) => chat.chatId === chatIdToDelete,
+      );
+      let newSelectedChatId = '';
+      if (updatedAllChats[deletedChatIndex]) {
+        newSelectedChatId = updatedAllChats[deletedChatIndex].chatId;
+      } else if (deletedChatIndex > 0) {
+        newSelectedChatId = updatedAllChats[deletedChatIndex - 1].chatId;
+      }
       setSelectedChatId(newSelectedChatId);
     }
   }
diff --git a/pages/_document.tsx b/pages/_document.tsx
index ec2b311..909994e 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -4,6 +4,7 @@ export default function Document() {
   return (
     <Html lang="en" className="h-full bg-gray-900">
       <Head />
+
       <body className="h-full m-0 p-0">
         <Main />
         <NextScript />
diff --git a/pages/index.tsx b/pages/index.tsx
index 9ea9c0a..535d4ef 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -82,16 +82,11 @@ export default function Home() {
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
   const fetchChatHistory = useCallback(() => {
+    setLoading(true);
+
     try {
       const conversations = getConversation(selectedChatId);
 
-      console.log(
-        'Chat ID:',
-        selectedChatId,
-        'History:',
-        conversations.history,
-      );
-
       if (!conversations || !conversations.messages) {
         console.error('Failed to fetch chat history: No conversations found.');
         return;
@@ -121,14 +116,22 @@ export default function Home() {
       }));
     } catch (error) {
       console.error('Failed to fetch chat history:', error);
+    } finally {
+      setLoading(false);
     }
   }, [selectedChatId, getConversation]);
 
   useEffect(() => {
-    if (selectedNamespace && chatList.length > 0) {
+    if (selectedNamespace && chatList.length > 0 && !selectedChatId) {
       setSelectedChatId(chatList[0].chatId);
     }
-  }, [selectedNamespace, chatList, setSelectedChatId]);
+  }, [selectedNamespace, chatList, selectedChatId, setSelectedChatId]);
+
+  useEffect(() => {
+    if (chatList.length > 0) {
+      setSelectedChatId(chatList[chatList.length - 1].chatId);
+    }
+  }, [selectedNamespace, setSelectedChatId, chatList]);
 
   useEffect(() => {
     if (selectedChatId) {
@@ -165,12 +168,6 @@ export default function Home() {
     setQuery('');
 
     const conversation = getConversation(selectedChatId);
-    console.log(
-      'Sending to API - Chat ID:',
-      selectedChatId,
-      'History:',
-      conversation.history,
-    );
 
     const response = await fetch('/api/chat', {
       method: 'POST',
@@ -235,7 +232,7 @@ export default function Home() {
 
   return (
     <>
-      {status === 'loading' ? (
+      {loading ? (
         <LoadingState />
       ) : (
         <div className="h-full">
@@ -298,7 +295,6 @@ export default function Home() {
                           (chat) => chat.chatId,
                         )}
                         selectedChatId={selectedChatId}
-                        setChatId={setSelectedChatId}
                         setSelectedChatId={setSelectedChatId}
                         chatNames={chatNames}
                         updateChatName={updateChatName}
@@ -326,7 +322,6 @@ export default function Home() {
                 namespaces={namespaces}
                 filteredChatList={filteredChatList.map((chat) => chat.chatId)}
                 selectedChatId={selectedChatId}
-                setChatId={setSelectedChatId}
                 setSelectedChatId={setSelectedChatId}
                 chatNames={chatNames}
                 updateChatName={updateChatName}