diff --git a/ClientAdvisor/App/frontend/src/api/api.ts b/ClientAdvisor/App/frontend/src/api/api.ts
index b59dceb0..1bd3d3d9 100644
--- a/ClientAdvisor/App/frontend/src/api/api.ts
+++ b/ClientAdvisor/App/frontend/src/api/api.ts
@@ -91,6 +91,7 @@ export const historyList = async (offset = 0): Promise<Conversation[] | null> =>
             title: conv.title,
             date: conv.createdAt,
             messages: convMessages,
+            updatedAt : conv.updatedAt
           }
           return conversation
         })
diff --git a/ClientAdvisor/App/frontend/src/api/models.ts b/ClientAdvisor/App/frontend/src/api/models.ts
index 55c0756f..81fba3c2 100644
--- a/ClientAdvisor/App/frontend/src/api/models.ts
+++ b/ClientAdvisor/App/frontend/src/api/models.ts
@@ -38,6 +38,7 @@ export type Conversation = {
   title: string
   messages: ChatMessage[]
   date: string
+  updatedAt? : string
 }
 
 export enum ChatCompletionType {
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
index 763c6c64..56e0a78c 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryList.tsx
@@ -6,68 +6,105 @@ import { AppStateContext } from '../../state/AppProvider'
 
 import { ChatHistoryListItemGroups } from './ChatHistoryListItem'
 
-interface ChatHistoryListProps {}
+interface ChatHistoryListProps { }
 
 export interface GroupedChatHistory {
-  month: string
+  title: string
   entries: Conversation[]
 }
 
-const groupByMonth = (entries: Conversation[]) => {
-  const groups: GroupedChatHistory[] = [{ month: 'Recent', entries: [] }]
-  const currentDate = new Date()
-
-  entries.forEach(entry => {
-    const date = new Date(entry.date)
-    const daysDifference = (currentDate.getTime() - date.getTime()) / (1000 * 60 * 60 * 24)
-    const monthYear = date.toLocaleString('default', { month: 'long', year: 'numeric' })
-    const existingGroup = groups.find(group => group.month === monthYear)
-
-    if (daysDifference <= 7) {
-      groups[0].entries.push(entry)
-    } else {
-      if (existingGroup) {
-        existingGroup.entries.push(entry)
-      } else {
-        groups.push({ month: monthYear, entries: [entry] })
-      }
+// Helper function to format dates
+const formatDate = (date: Date, includeWeekday = false) => {
+  const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
+  if (includeWeekday) {
+    options.weekday = 'long';
+  }
+  return date.toLocaleDateString(undefined, options);
+};
+
+
+function isLastSevenDaysRange(dateToCheck: any) {
+  // Get the current date
+  const currentDate = new Date();
+  // Calculate the date 2 days ago
+  const twoDaysAgo = new Date();
+  twoDaysAgo.setDate(currentDate.getDate() - 2);
+  // Calculate the date 8 days ago
+  const eightDaysAgo = new Date();
+  eightDaysAgo.setDate(currentDate.getDate() - 8);
+  // Ensure the comparison dates are in the correct order
+  // We need eightDaysAgo to be earlier than twoDaysAgo
+  return dateToCheck >= eightDaysAgo && dateToCheck <= twoDaysAgo;
+}
+
+const segregateItems = (items: Conversation[]) => {
+  const today = new Date();
+  const yesterday = new Date(today);
+  const last7Days = []
+  yesterday.setDate(today.getDate() - 1);
+
+  // Sort items by updatedAt in descending order
+  items.sort(
+    (a, b) => new Date(b.updatedAt ? b.updatedAt : new Date()).getTime() - new Date(a.updatedAt ? a.updatedAt : new Date()).getTime()
+  );
+
+  const groupedItems: {
+    Today: Conversation[],
+    Yesterday: Conversation[],
+    Last7Days: Conversation[],
+    Older: Conversation[],
+    Past: { [key: string]: Conversation[] },
+  } = {
+    Today: [],
+    Yesterday: [],
+    Last7Days: [],
+    Older: [],
+    Past: {},
+  };
+
+  items.forEach(item => {
+    const itemDate = new Date(item.updatedAt ? item.updatedAt : new Date());
+    const itemDateOnly = itemDate.toDateString();
+    if (itemDateOnly === today.toDateString()) {
+      groupedItems.Today.push(item);
+    } else if (itemDateOnly === yesterday.toDateString()) {
+      groupedItems.Yesterday.push(item);
     }
-  })
-
-  groups.sort((a, b) => {
-    // Check if either group has no entries and handle it
-    if (a.entries.length === 0 && b.entries.length === 0) {
-      return 0 // No change in order
-    } else if (a.entries.length === 0) {
-      return 1 // Move 'a' to a higher index (bottom)
-    } else if (b.entries.length === 0) {
-      return -1 // Move 'b' to a higher index (bottom)
+    else if (isLastSevenDaysRange(itemDate)) {
+      groupedItems.Last7Days.push(item);
     }
-    const dateA = new Date(a.entries[0].date)
-    const dateB = new Date(b.entries[0].date)
-    return dateB.getTime() - dateA.getTime()
-  })
-
-  groups.forEach(group => {
-    group.entries.sort((a, b) => {
-      const dateA = new Date(a.date)
-      const dateB = new Date(b.date)
-      return dateB.getTime() - dateA.getTime()
-    })
-  })
-
-  return groups
-}
+    else {
+      groupedItems.Older.push(item);
+    }
+  });
+
+  const finalResult = [
+    { title: `Today`, entries: groupedItems.Today },
+    {
+      title: `Yesterday`,
+      entries: groupedItems.Yesterday,
+    },
+    {
+      title: `Last 7 days`,
+      entries: groupedItems.Last7Days,
+    },
+    {
+      title: `Older`,
+      entries: groupedItems.Older,
+    },
+  ];
+
+  return finalResult;
+};
+
 
 const ChatHistoryList: React.FC<ChatHistoryListProps> = () => {
   const appStateContext = useContext(AppStateContext)
   const chatHistory = appStateContext?.state.chatHistory
-
-  React.useEffect(() => {}, [appStateContext?.state.chatHistory])
-
+  React.useEffect(() => { }, [appStateContext?.state.chatHistory])
   let groupedChatHistory
   if (chatHistory && chatHistory.length > 0) {
-    groupedChatHistory = groupByMonth(chatHistory)
+    groupedChatHistory = segregateItems(chatHistory)
   } else {
     return (
       <Stack horizontal horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
index 6d26baa2..1a11ec8f 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryListItem.tsx
@@ -32,7 +32,7 @@ interface ChatHistoryListItemCellProps {
 }
 
 interface ChatHistoryListItemGroupsProps {
-  groupedChatHistory: GroupedChatHistory[]
+  groupedChatHistory: GroupedChatHistory[],
 }
 
 const formatMonth = (month: string) => {
@@ -95,11 +95,11 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
     }
   }, [appStateContext?.state.currentChat?.id, item?.id])
 
-  useEffect(()=>{
+  useEffect(() => {
     let v = appStateContext?.state.isRequestInitiated;
-    if(v!=undefined)
+    if (v != undefined)
       setIsButtonDisabled(v && isSelected)
-  },[appStateContext?.state.isRequestInitiated])
+  }, [appStateContext?.state.isRequestInitiated])
 
   const onDelete = async () => {
     appStateContext?.dispatch({ type: 'TOGGLE_LOADER' });
@@ -188,24 +188,20 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
       key={item.id}
       tabIndex={0}
       aria-label="chat history item"
-      className={styles.itemCell}
+      className={`${styles.itemCell} ${isSelected ? styles.selectedItemCell : ""}`}
       onClick={() => handleSelectItem()}
       onKeyDown={e => (e.key === 'Enter' || e.key === ' ' ? handleSelectItem() : null)}
       verticalAlign="center"
       // horizontal
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
-      styles={{
-        root: {
-          backgroundColor: isSelected ? '#e6e6e6' : 'transparent'
-        }
-      }}>
+    >
       {edit ? (
         <>
           <Stack.Item style={{ width: '100%' }}>
             <form aria-label="edit title form" onSubmit={e => handleSaveEdit(e)} style={{ padding: '5px 0px' }}>
-              <Stack horizontal verticalAlign={'start'}>
-                <Stack.Item>
+              <Stack horizontal verticalAlign={'start'} style={{ width: '100%', justifyContent: 'space-between' }}>
+                <Stack.Item style={{ flex: 1 }}>
                   <TextField
                     componentRef={textFieldRef}
                     autoFocus={textFieldFocused}
@@ -222,21 +218,23 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
                     <Stack aria-label="action button group" horizontal verticalAlign={'center'}>
                       <IconButton
                         role="button"
+                        className={styles.itemButton}
                         disabled={errorRename !== undefined}
                         onKeyDown={e => (e.key === ' ' || e.key === 'Enter' ? handleSaveEdit(e) : null)}
                         onClick={e => handleSaveEdit(e)}
                         aria-label="confirm new title"
                         iconProps={{ iconName: 'CheckMark' }}
-                        styles={{ root: { color: 'green', marginLeft: '5px' } }}
+                        styles={{ root: { color: 'green' } }}
                       />
                       <IconButton
                         role="button"
+                        className={styles.itemButton}
                         disabled={errorRename !== undefined}
                         onKeyDown={e => (e.key === ' ' || e.key === 'Enter' ? cancelEditTitle() : null)}
                         onClick={() => cancelEditTitle()}
                         aria-label="cancel edit title"
                         iconProps={{ iconName: 'Cancel' }}
-                        styles={{ root: { color: 'red', marginLeft: '5px' } }}
+                        styles={{ root: { color: 'red' } }}
                       />
                     </Stack>
                   </Stack.Item>
@@ -255,28 +253,26 @@ export const ChatHistoryListItemCell: React.FC<ChatHistoryListItemCellProps> = (
         </>
       ) : (
         <>
-          <Stack horizontal verticalAlign={'center'} style={{ width: '100%' }}>
+          <Stack horizontal verticalAlign={'center'} style={{ width: '100%', justifyContent: 'space-between' }}>
             <div className={styles.chatTitle}>{truncatedTitle}</div>
-            {(isSelected || isHovered) && (
-              <Stack horizontal horizontalAlign="end">
-                <IconButton
-                  className={styles.itemButton}
-                  disabled={isButtonDisabled}
-                  iconProps={{ iconName: 'Delete' }}
-                  title="Delete"
-                  onClick={toggleDeleteDialog}
-                  onKeyDown={e => (e.key === ' ' ? toggleDeleteDialog() : null)}
-                />
-                <IconButton
-                  className={styles.itemButton}
-                  disabled={isButtonDisabled}
-                  iconProps={{ iconName: 'Edit' }}
-                  title="Edit"
-                  onClick={onEdit}
-                  onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
-                />
-              </Stack>
-            )}
+            <Stack horizontal horizontalAlign="end">
+              <IconButton
+                className={styles.itemButton}
+                disabled={isButtonDisabled}
+                iconProps={{ iconName: 'Delete' }}
+                title="Delete"
+                onClick={toggleDeleteDialog}
+                onKeyDown={e => (e.key === ' ' ? toggleDeleteDialog() : null)}
+              />
+              <IconButton
+                className={styles.itemButton}
+                disabled={isButtonDisabled}
+                iconProps={{ iconName: 'Edit' }}
+                title="Edit"
+                onClick={onEdit}
+                onKeyDown={e => (e.key === ' ' ? onEdit() : null)}
+              />
+            </Stack>
           </Stack>
         </>
       )}
@@ -369,11 +365,11 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
             <Stack
               horizontalAlign="start"
               verticalAlign="center"
-              key={group.month}
+              key={group.title}
               className={styles.chatGroup}
-              aria-label={`chat history group: ${group.month}`}>
-              <Stack aria-label={group.month} className={styles.chatMonth}>
-                {formatMonth(group.month)}
+              aria-label={`chat history group: ${group.title}`}>
+              <Stack aria-label={group.title} className={styles.chatMonth}>
+                {group.title}
               </Stack>
               <List
                 aria-label={`chat history list`}
@@ -382,20 +378,11 @@ export const ChatHistoryListItemGroups: React.FC<ChatHistoryListItemGroupsProps>
                 className={styles.chatList}
               />
               <div ref={observerTarget} />
-              <Separator
-                styles={{
-                  root: {
-                    width: '100%',
-                    position: 'relative',
-                    '::before': {
-                      backgroundColor: '#d6d6d6'
-                    }
-                  }
-                }}
-              />
             </Stack>
           )
       )}
+
+
       {showSpinner && (
         <div className={styles.spinnerContainer}>
           <Spinner size={SpinnerSize.small} aria-label="loading more chat history" className={styles.spinner} />
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
index 784838fe..67fc46a2 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.module.css
@@ -1,28 +1,33 @@
 .container {
   max-height: calc(100vh - 100px);
-  width: 300px;
 }
 
 .listContainer {
   overflow: hidden auto;
-  max-height: calc(90vh - 105px);
+  max-height: calc(90vh - 70px);
+}
+
+/* Media Query for lower resolutions or zoomed-in views */
+@media screen and (max-width: 1024px) {
+  .listContainer {
+    overflow: hidden auto;
+    max-height: calc(90vh - 100px);
+  }
 }
 
 .itemCell {
-  max-width: 270px;
   min-height: 32px;
   cursor: pointer;
-  padding-left: 15px;
-  padding-right: 5px;
-  padding-top: 5px;
-  padding-bottom: 5px;
+  padding: 10px;
   box-sizing: border-box;
   border-radius: 5px;
   display: flex;
+  background: #F3F3F3;
+  margin-bottom: 10px;
 }
 
-.itemCell:hover {
-  background: #e6e6e6;
+.selectedItemCell {
+  border: 1.5px solid #0481E0
 }
 
 .itemButton {
@@ -31,19 +36,12 @@
   align-items: center;
   width: 28px;
   height: 28px;
-  border: 1px solid #d1d1d1;
   border-radius: 5px;
-  background-color: white;
-  margin: auto 2.5px;
   cursor: pointer;
 }
 
-.itemButton:hover {
-  background-color: #e6e6e6;
-}
-
 .chatGroup {
-  margin: auto 5px;
+  margin-top: 20px;
   width: 100%;
 }
 
@@ -61,19 +59,22 @@
 .chatMonth {
   font-size: 14px;
   font-weight: 600;
-  margin-bottom: 5px;
-  padding-left: 15px;
+  margin-bottom: 10px;
+  color: #616161;
 }
 
 .chatTitle {
-  width: 80%;
+  width: 78%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 600;
+  color: #424242;
 }
 
 @media (max-width: 480px) {
   .container {
     width: 100%;
   }
-}
+}
\ No newline at end of file
diff --git a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
index 7a23f4d5..b635b1f7 100644
--- a/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
+++ b/ClientAdvisor/App/frontend/src/components/ChatHistory/ChatHistoryPanel.tsx
@@ -103,7 +103,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
     }, 2000)
   }
 
-  React.useEffect(() => {}, [appStateContext?.state.chatHistory, clearingError])
+  React.useEffect(() => { }, [appStateContext?.state.chatHistory, clearingError])
 
   return (
     <section className={styles.container} data-is-scrollable aria-label={'chat history panel'}>
@@ -113,11 +113,10 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
             role="heading"
             aria-level={2}
             style={{
-              alignSelf: 'center',
               fontWeight: '600',
-              fontSize: '18px',
+              fontSize: '16px',
               marginRight: 'auto',
-              paddingLeft: '20px'
+              color: '#242424'
             }}>
             Chat history
           </Text>
@@ -152,45 +151,27 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
         </Stack>
       </Stack>
       <Stack
-        aria-label="chat history panel content"
-        styles={{
-          root: {
-            display: 'flex',
-            flexGrow: 1,
-            flexDirection: 'column',
-            paddingTop: '2.5px',
-            maxWidth: '100%'
-          }
-        }}
-        style={{
-          display: 'flex',
-          flexGrow: 1,
-          flexDirection: 'column',
-          flexWrap: 'wrap',
-          padding: '1px'
-        }}>
+        aria-label="chat history panel content">
         <Stack className={styles.chatHistoryListContainer}>
           {appStateContext?.state.chatHistoryLoadingState === ChatHistoryLoadingState.Success &&
             appStateContext?.state.isCosmosDBAvailable.cosmosDB && <ChatHistoryList />}
           {appStateContext?.state.chatHistoryLoadingState === ChatHistoryLoadingState.Fail &&
             appStateContext?.state.isCosmosDBAvailable && (
               <>
-                <Stack>
-                  <Stack horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
-                    <StackItem>
-                      <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 16 }}>
-                        {appStateContext?.state.isCosmosDBAvailable?.status && (
-                          <span>{appStateContext?.state.isCosmosDBAvailable?.status}</span>
-                        )}
-                        {!appStateContext?.state.isCosmosDBAvailable?.status && <span>Error loading chat history</span>}
-                      </Text>
-                    </StackItem>
-                    <StackItem>
-                      <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 14 }}>
-                        <span>Chat history can't be saved at this time</span>
-                      </Text>
-                    </StackItem>
-                  </Stack>
+                <Stack horizontalAlign="center" verticalAlign="center" style={{ width: '100%', marginTop: 10 }}>
+                  <StackItem>
+                    <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 16 }}>
+                      {appStateContext?.state.isCosmosDBAvailable?.status && (
+                        <span>{appStateContext?.state.isCosmosDBAvailable?.status}</span>
+                      )}
+                      {!appStateContext?.state.isCosmosDBAvailable?.status && <span>Error loading chat history</span>}
+                    </Text>
+                  </StackItem>
+                  <StackItem>
+                    <Text style={{ alignSelf: 'center', fontWeight: '400', fontSize: 14 }}>
+                      <span>Chat history can't be saved at this time</span>
+                    </Text>
+                  </StackItem>
                 </Stack>
               </>
             )}
@@ -221,7 +202,7 @@ export function ChatHistoryPanel(_props: ChatHistoryPanelProps) {
       </Stack>
       <Dialog
         hidden={hideClearAllDialog}
-        onDismiss={clearing ? () => {} : onHideClearAllDialog}
+        onDismiss={clearing ? () => { } : onHideClearAllDialog}
         dialogContentProps={clearAllDialogContentProps}
         modalProps={modalProps}>
         <DialogFooter>
diff --git a/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css b/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
index b9dc041e..d0c8a01c 100644
--- a/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
+++ b/ClientAdvisor/App/frontend/src/components/QuestionInput/QuestionInput.module.css
@@ -10,6 +10,7 @@
     0px 8px 16px rgba(0, 0, 0, 0.14),
     0px 0px 2px rgba(0, 0, 0, 0.12);
   border-radius: 8px;
+  margin-left:8px;
 }
 
 .questionInputTextArea {
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css b/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
index 988f96ec..5e496e2a 100644
--- a/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.module.css
@@ -29,13 +29,10 @@ html, body {
   display: flex;
   flex-direction: column;
   align-items: center;
-  background: radial-gradient(108.78% 108.78% at 50.02% 19.78%, #ffffff 57.29%, #eef6fe 100%);
-  box-shadow:
-    0px 2px 4px rgba(0, 0, 0, 0.14),
-    0px 0px 2px rgba(0, 0, 0, 0.12);
+
   border-radius: 8px;
   overflow-y: auto;
-  max-height: calc(100vh - 300px);
+  max-height: calc(100vh - 250px);
   height: 100vh;
   width: 100%;
 }
@@ -155,9 +152,9 @@ html, body {
   padding-bottom: 24px;
   padding-left: 24px;
   padding-right: 24px;
-  width: calc(100% - 100px);
+  width: calc(100% - 60px);
   max-width: 1028px;
-  margin-bottom: 50px;
+  margin-bottom: 35px;
   margin-top: 8px;
 }
 
@@ -345,7 +342,7 @@ a {
   cursor: pointer;
 }
 .promptsContainer{
-  width: calc(100% - 100px);
+  width: calc(100% - 60px);
     max-width: 1028px;
     justify-content: right;
     margin: 4px 0px;
diff --git a/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx b/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
index b39e1560..d4ee67e2 100644
--- a/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/chat/Chat.tsx
@@ -31,7 +31,7 @@ import {
 } from '../../api'
 import { Answer } from '../../components/Answer'
 import { QuestionInput } from '../../components/QuestionInput'
-import { ChatHistoryPanel } from '../../components/ChatHistory/ChatHistoryPanel'
+
 import { AppStateContext } from '../../state/AppProvider'
 import { useBoolean } from '@fluentui/react-hooks'
 import { PromptsSection, PromptType } from '../../components/PromptsSection/PromptsSection'
@@ -167,7 +167,8 @@ const Chat = (props: any) => {
         id: conversationId ?? uuid(),
         title: question,
         messages: [userMessage],
-        date: new Date().toISOString()
+        date: new Date().toISOString(),
+        updatedAt : new Date().toISOString(),
       }
     } else {
       conversation = appStateContext?.state?.currentChat
@@ -415,7 +416,8 @@ const Chat = (props: any) => {
             id: result.history_metadata.conversation_id,
             title: result.history_metadata.title,
             messages: [userMessage],
-            date: result.history_metadata.date
+            date: result.history_metadata.date,
+            updatedAt : result.history_metadata.date,
           }
           isEmpty(toolMessage)
             ? resultConversation.messages.push(assistantMessage)
@@ -479,7 +481,8 @@ const Chat = (props: any) => {
             id: result.history_metadata.conversation_id,
             title: result.history_metadata.title,
             messages: [userMessage],
-            date: result.history_metadata.date
+            date: result.history_metadata.date,
+            updatedAt: result.history_metadata.date,
           }
           resultConversation.messages.push(errorChatMsg)
         }
@@ -668,7 +671,7 @@ const Chat = (props: any) => {
 
   useLayoutEffect(() => {
     const element = document.getElementById("chatMessagesContainer")!;
-    if(element){
+    if (element) {
       element.scroll({ top: element.scrollHeight, behavior: 'smooth' });
     }
   }, [showLoadingMessage, processMessages])
@@ -714,7 +717,7 @@ const Chat = (props: any) => {
         : makeApiRequestWithoutCosmosDB(question, conversationId)
     }
   }
-  
+
   return (
     <div className={styles.container} role="main">
       {showAuthMessage ? (
@@ -938,8 +941,6 @@ const Chat = (props: any) => {
               </div>
             </Stack.Item>
           )}
-          {appStateContext?.state.isChatHistoryOpen &&
-            appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel isLoading={isLoading} />}
         </Stack>
       )}
     </div>
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
index 63f09899..2c2d46f3 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.module.css
@@ -1,12 +1,14 @@
 .layout {
   display: flex;
   height: 100%;
+  gap: 20px;
 }
 
 .header {
-  background-color: #f2f2f2;
+  /* background-color: #f2f2f2;
   position: fixed;
-  width: 82%;
+  width: 82%; */
+  width: 100%;
 }
 
 .headerContainer {
@@ -36,14 +38,14 @@
   height: 32px;
   width: auto;
   /* margin-left: 36px; */
-  padding-left: 20px;
+  /* padding-left: 20px; */
 }
 
 .shareButtonContainer {
   display: flex;
   flex-direction: row;
   justify-content: center;
-  margin-right: 20px;
+  margin-right: 10px;
 }
 
 .shareButton {
@@ -102,7 +104,7 @@
   color: #242424;
 }
 
-.ContentContainer{
+.ContentContainer {
   overflow: hidden;
   flex-grow: 1;
 }
@@ -126,15 +128,16 @@
 .selectedClient {
   margin-top: 15px;
   font-size: 18px;
-  float: right; 
+  float: right;
   padding: 10px;
   font-size: 16px;
+  margin-bottom: 10px;
 }
 
 
 
-.selectedName{
-  border-radius:25px;
+.selectedName {
+  border-radius: 25px;
   background: var(--bap-icons-gradients-blue-06, linear-gradient(123deg, #40C4F5 0%, #0095E6 100%));
   padding: 12px;
   color: white;
@@ -143,14 +146,14 @@
 
 .contentColumn {
   /* width: 75%; */
-  padding: 20px;
+  /* padding: 20px; */
   /* overflow-y: auto; */
   flex-direction: column;
-  background: linear-gradient(180deg, #FFF 59.5%, #EBF3FC 100%);
-  border-radius: 8px;
+  /* background: linear-gradient(180deg, #FFF 59.5%, #EBF3FC 100%);
+  border-radius: 8px; */
   height: 100%;
-  box-shadow: 0px 0.83px 3.33px 0px #00000052;
-  margin: 4rem 1rem 1rem;
+  /* box-shadow: 0px 0.83px 3.33px 0px #00000052; */
+  /* margin: 4rem 1rem 1rem; */
 }
 
 .welcomeMessage {
@@ -170,7 +173,7 @@
   margin: 10px 0;
 }
 
-.illustration{
+.illustration {
   width: 70px;
 }
 
@@ -181,7 +184,7 @@
   flex-direction: column;
 }
 
-.pivotContainer > div {
+.pivotContainer>div {
   width: 100%;
 }
 
@@ -200,7 +203,6 @@
 
 .historyPanel {
   background: #f1f1f1;
-  border-radius: 8px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
   padding: 16px;
   height: 100%;
@@ -209,11 +211,11 @@
 
 
 .welcomeCard {
-   /* display: flex;
+  /* display: flex;
   flex-direction: column;
   align-items: center; */
   /* padding: 16px; */
-  background-image:url(../../assets/Client-tourtip.png);
+  background-image: url(../../assets/Client-tourtip.png);
   background-size: contain;
   background-repeat: no-repeat;
   padding: 20px;
@@ -229,7 +231,7 @@
   margin-bottom: 10px;
 }
 
-.welcomeCardContent{
+.welcomeCardContent {
   padding: 16px;
 
 }
@@ -256,6 +258,69 @@
   font-size: 16px;
 }
 
+
+/*--------- New Right Layout Changes -------------*/
+
+.contentArea {
+  width: 100%;
+  height: 100%;
+}
+
+.contentHeader {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.contentBody {
+  display: grid;
+  grid-template-columns: 1fr;
+  flex-grow: 1;
+  position: relative;
+  transition: all 0.3s ease;
+  gap: 10px;
+  margin-right: 10px;
+  height: calc(100vh - 60px);
+}
+
+.mainContent {
+  padding: 20px;
+  border: 1px solid lightgray;
+  border-radius: 8px;
+  background: white;
+}
+
+.historyPanel {
+  background-color: #f9f9f9;
+  border-left: 1px solid #ddd;
+  padding: 16px;
+}
+
+/* Media Query for splitting the content-body into two parts */
+.withHistory {
+  grid-template-columns: 2fr 22%;
+}
+
+/* Media Query for lower resolutions or zoomed-in views */
+@media screen and (max-width: 1024px) {
+  .historyPanel {
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: 100%;
+    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
+    z-index: 100;
+    overflow-y: auto;
+  }
+
+  .contentBody {
+    grid-template-columns: 1fr;
+    /* Return to single column layout */
+  }
+
+}
+
+/*--------- New Right Layout Changes -------------*/
 /* popup css*/
 .popupContainer {
   display: flex;
diff --git a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
index 1ad28acc..dd7c06b5 100644
--- a/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
+++ b/ClientAdvisor/App/frontend/src/pages/layout/Layout.tsx
@@ -17,7 +17,7 @@ import DismissIcon from '../../assets/Dismiss.svg'
 import welcomeIcon from '../../assets/welcomeIcon.png'
 import styles from './Layout.module.css';
 import SpinnerComponent from '../../components/Spinner/Spinner';
-
+import { ChatHistoryPanel } from '../../components/ChatHistory/ChatHistoryPanel'
 
 
 const Layout = () => {
@@ -97,7 +97,7 @@ const Layout = () => {
     }
   }, [copyClicked])
 
-  useEffect(() => {}, [appStateContext?.state.isCosmosDBAvailable.status])
+  useEffect(() => { }, [appStateContext?.state.isCosmosDBAvailable.status])
 
   useEffect(() => {
     const handleResize = () => {
@@ -162,66 +162,80 @@ const Layout = () => {
 
         <Cards onCardClick={handleCardClick} />
       </div>
-      <div className={styles.ContentContainer}>
-        <header className={styles.header} role={'banner'}>
-          <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
-            <Stack horizontal verticalAlign="center">
-              <img src={ui?.logo ? ui.logo : TeamAvatar} className={styles.headerIcon} aria-hidden="true" alt="" />
-              <Link to="/" className={styles.headerTitleContainer}>
-                <h1 className={styles.headerTitle}>{ui?.title}</h1>
-              </Link>
-            </Stack>
-            <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
-              {appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
-                <HistoryButton
-                  onClick={handleHistoryClick}
-                  text={appStateContext?.state?.isChatHistoryOpen ? hideHistoryLabel : showHistoryLabel}
-                />
-              )}
-              {ui?.show_share_button && <ShareButton onClick={handleShareClick} text={shareLabel} />}
+      <div className={styles.contentArea}>
+        <div className={styles.contentHeader}>
+          <header className={styles.header} role={'banner'}>
+            <Stack horizontal verticalAlign="center" horizontalAlign="space-between">
+              <Stack horizontal verticalAlign="center">
+                <img src={ui?.logo ? ui.logo : TeamAvatar} className={styles.headerIcon} aria-hidden="true" alt="" />
+                <Link to="/" className={styles.headerTitleContainer}>
+                  <h1 className={styles.headerTitle}>{ui?.title}</h1>
+                </Link>
+              </Stack>
+              <Stack horizontal tokens={{ childrenGap: 4 }} className={styles.shareButtonContainer}>
+                {Boolean(selectedUser) && appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && (
+                  <HistoryButton
+                    onClick={handleHistoryClick}
+                    text={appStateContext?.state?.isChatHistoryOpen ? hideHistoryLabel : showHistoryLabel}
+                  />
+                )}
+                {ui?.show_share_button && <ShareButton onClick={handleShareClick} text={shareLabel} />}
+              </Stack>
             </Stack>
-          </Stack>
-        </header>
-        <div className={styles.contentColumn}>
-          {!selectedUser && showWelcomeCard ? (
-            <div>
-              <div className={styles.mainPage}>
-                <div className={styles.welcomeCard}>
-                  <div className={styles.welcomeCardContent}>
-                    <div className={styles.welcomeCardIcon}>
-                      <img src={welcomeIcon} alt="Icon" className={styles.icon} />
+          </header>
+        </div>
+        <div className={`${styles.contentBody} ${appStateContext?.state.isChatHistoryOpen ? styles.withHistory : ''}`}>
+          <div className={styles.mainContent}>
+            <div className={styles.contentColumn}>
+              {!selectedUser && showWelcomeCard ? (
+                <div>
+                  <div className={styles.mainPage}>
+                    <div className={styles.welcomeCard}>
+                      <div className={styles.welcomeCardContent}>
+                        <div className={styles.welcomeCardIcon}>
+                          <img src={welcomeIcon} alt="Icon" className={styles.icon} />
+                        </div>
+                        <h3 className={styles.welcomeTitle}>Select a client</h3>
+                        <p className={styles.welcomeText}>
+                          You can ask questions about their portfolio details and previous conversations or view their
+                          profile.
+                        </p>
+                      </div>
+                    </div>
+                    <div className={styles.welcomeMessage}>
+                      <img src={Illustration} alt="Illustration" className={styles.illustration} />
+                      <h1>Welcome Back, {name}</h1>
                     </div>
-                    <h3 className={styles.welcomeTitle}>Select a client</h3>
-                    <p className={styles.welcomeText}>
-                      You can ask questions about their portfolio details and previous conversations or view their
-                      profile.
-                    </p>
                   </div>
                 </div>
-                <div className={styles.welcomeMessage}>
-                  <img src={Illustration} alt="Illustration" className={styles.illustration} />
-                  <h1>Welcome Back, {name}</h1>
-                </div>
-              </div>
-            </div>
-          ) : (
-            <div className={styles.pivotContainer}>
-              {selectedUser && (
-                <div className={styles.selectedClient}>
-                  Client selected:{' '}
-                  <span className={styles.selectedName}>{selectedUser ? selectedUser.ClientName : 'None'}</span>
+              ) : (
+                <div className={styles.pivotContainer}>
+                  {selectedUser && (
+                    <div className={styles.selectedClient}>
+                      Client selected:{' '}
+                      <span className={styles.selectedName}>{selectedUser ? selectedUser.ClientName : 'None'}</span>
+                    </div>
+                  )}
+                  <Pivot defaultSelectedKey="chat">
+                    <PivotItem headerText="Chat" itemKey="chat">
+                      <Chat setIsVisible={setIsVisible} />
+                    </PivotItem>
+                    <PivotItem headerText="Client 360 Profile" itemKey="profile">
+                      <PowerBIChart chartUrl={calculateChartUrl(selectedUser)} />
+                    </PivotItem>
+                  </Pivot>
                 </div>
               )}
-              <Pivot defaultSelectedKey="chat">
-                <PivotItem headerText="Chat" itemKey="chat">
-                  <Chat setIsVisible={setIsVisible}/>
-                </PivotItem>
-                <PivotItem headerText="Client 360 Profile" itemKey="profile">
-                  <PowerBIChart chartUrl={calculateChartUrl(selectedUser)} />
-                </PivotItem>
-              </Pivot>
             </div>
-          )}
+
+          </div>
+          {appStateContext?.state.isChatHistoryOpen &&
+            <div className={styles.historyPanel}>
+              {appStateContext?.state.isChatHistoryOpen &&
+                appStateContext?.state.isCosmosDBAvailable?.status !== CosmosDBStatus.NotConfigured && <ChatHistoryPanel isLoading={appStateContext?.state.isRequestInitiated} />}
+
+            </div>
+          }
         </div>
       </div>