diff --git a/public/chat_flyout.tsx b/public/chat_flyout.tsx
index a6a280a2..37c67191 100644
--- a/public/chat_flyout.tsx
+++ b/public/chat_flyout.tsx
@@ -10,6 +10,7 @@ import { useChatContext } from './contexts/chat_context';
 import { ChatPage } from './tabs/chat/chat_page';
 import { ChatWindowHeader } from './tabs/chat_window_header';
 import { ChatHistoryPage } from './tabs/history/chat_history_page';
+import { LangchainTracesFlyoutBody } from './components/langchain_traces_flyout_body';
 
 let chatHistoryPageLoaded = false;
 
@@ -26,6 +27,7 @@ export const ChatFlyout: React.FC<ChatFlyoutProps> = (props) => {
 
   let chatPageVisible = false;
   let chatHistoryPageVisible = false;
+  let chatTraceVisible = false;
 
   if (!props.overrideComponent) {
     switch (chatContext.selectedTabId) {
@@ -37,6 +39,10 @@ export const ChatFlyout: React.FC<ChatFlyoutProps> = (props) => {
         chatHistoryPageVisible = true;
         break;
 
+      case 'trace':
+        chatTraceVisible = true;
+        break;
+
       default:
         break;
     }
@@ -88,6 +94,13 @@ export const ChatFlyout: React.FC<ChatFlyoutProps> = (props) => {
               />
             )}
           </EuiFlexItem>
+          <EuiFlexItem
+            style={props.flyoutFullScreen && chatTraceVisible ? { width: '30%' } : undefined}
+            grow={!props.flyoutFullScreen}
+            className={cs({ 'llm-chat-hidden': !chatTraceVisible })}
+          >
+            {chatTraceVisible && chatContext.traceId && <LangchainTracesFlyoutBody />}
+          </EuiFlexItem>
         </EuiFlexGroup>
       </>
     </EuiFlyout>
diff --git a/public/chat_header_button.tsx b/public/chat_header_button.tsx
index acd34c36..ce21f666 100644
--- a/public/chat_header_button.tsx
+++ b/public/chat_header_button.tsx
@@ -34,6 +34,8 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
   const [flyoutVisible, setFlyoutVisible] = useState(false);
   const [flyoutComponent, setFlyoutComponent] = useState<React.ReactNode | null>(null);
   const [selectedTabId, setSelectedTabId] = useState<TabId>('chat');
+  const [preSelectedTabId, setPreSelectedTabId] = useState<TabId | undefined>(undefined);
+  const [traceId, setTraceId] = useState<string | undefined>(undefined);
   const [chatSize, setChatSize] = useState<number | 'fullscreen' | 'dock-right'>('dock-right');
   const flyoutFullScreen = chatSize === 'fullscreen';
 
@@ -54,7 +56,11 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
       sessionId,
       setSessionId,
       selectedTabId,
-      setSelectedTabId,
+      preSelectedTabId,
+      setSelectedTabId: (tabId: TabId) => {
+        setPreSelectedTabId(selectedTabId);
+        setSelectedTabId(tabId);
+      },
       flyoutVisible,
       flyoutFullScreen,
       setFlyoutVisible,
@@ -65,6 +71,8 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
       currentAccount: props.currentAccount,
       title,
       setTitle,
+      traceId,
+      setTraceId,
     }),
     [
       appId,
@@ -72,12 +80,15 @@ export const HeaderChatButton: React.FC<HeaderChatButtonProps> = (props) => {
       flyoutVisible,
       flyoutFullScreen,
       selectedTabId,
+      preSelectedTabId,
       props.chatEnabled,
       props.contentRenderers,
       props.actionExecutors,
       props.currentAccount,
       title,
       setTitle,
+      traceId,
+      setTraceId,
     ]
   );
 
diff --git a/public/components/langchain_traces_flyout_body.tsx b/public/components/langchain_traces_flyout_body.tsx
index f76771f6..6509d742 100644
--- a/public/components/langchain_traces_flyout_body.tsx
+++ b/public/components/langchain_traces_flyout_body.tsx
@@ -10,32 +10,58 @@ import {
   EuiPageBody,
   EuiPageContentBody,
   EuiPageHeader,
+  EuiButtonIcon,
+  EuiPageHeaderSection,
 } from '@elastic/eui';
 import React from 'react';
+import { useChatContext } from '../contexts/chat_context';
 import { LangchainTraces } from './langchain_traces';
 
-interface LangchainTracesFlyoutBodyProps {
-  traceId: string;
-  closeFlyout: () => void;
-}
+export const LangchainTracesFlyoutBody: React.FC = () => {
+  const chatContext = useChatContext();
+  const traceId = chatContext.traceId;
+  if (!traceId) {
+    return null;
+  }
+
+  // docked right or fullscreen with history open
+  const showBack = !chatContext.flyoutFullScreen || chatContext.preSelectedTabId === 'history';
 
-export const LangchainTracesFlyoutBody: React.FC<LangchainTracesFlyoutBodyProps> = (props) => {
   return (
     <EuiFlyoutBody className="llm-chat-flyout llm-chat-flyout-body">
       <EuiPage>
         <EuiPageBody>
           <EuiPageHeader>
-            <EuiButtonEmpty
-              style={{ marginLeft: '-8px' }}
-              size="xs"
-              onClick={props.closeFlyout}
-              iconType="arrowLeft"
-            >
-              Back
-            </EuiButtonEmpty>
+            <EuiPageHeaderSection>
+              {showBack && (
+                <EuiButtonEmpty
+                  size="xs"
+                  flush="left"
+                  onClick={() => {
+                    chatContext.setSelectedTabId(chatContext.flyoutFullScreen ? 'history' : 'chat');
+                  }}
+                  iconType="arrowLeft"
+                >
+                  Back
+                </EuiButtonEmpty>
+              )}
+            </EuiPageHeaderSection>
+            <EuiPageHeaderSection>
+              {!showBack && (
+                <EuiButtonIcon
+                  aria-label="close"
+                  size="xs"
+                  color="text"
+                  iconType="cross"
+                  onClick={() => {
+                    chatContext.setSelectedTabId('chat');
+                  }}
+                />
+              )}
+            </EuiPageHeaderSection>
           </EuiPageHeader>
           <EuiPageContentBody>
-            <LangchainTraces traceId={props.traceId} />
+            <LangchainTraces traceId={traceId} />
           </EuiPageContentBody>
         </EuiPageBody>
       </EuiPage>
diff --git a/public/contexts/chat_context.tsx b/public/contexts/chat_context.tsx
index 6f8ceb84..c0807be3 100644
--- a/public/contexts/chat_context.tsx
+++ b/public/contexts/chat_context.tsx
@@ -11,7 +11,8 @@ export interface IChatContext {
   sessionId?: string;
   setSessionId: React.Dispatch<React.SetStateAction<string | undefined>>;
   selectedTabId: TabId;
-  setSelectedTabId: React.Dispatch<React.SetStateAction<TabId>>;
+  preSelectedTabId?: TabId;
+  setSelectedTabId: (tabId: TabId) => void;
   flyoutVisible: boolean;
   flyoutFullScreen: boolean;
   setFlyoutVisible: React.Dispatch<React.SetStateAction<boolean>>;
@@ -22,6 +23,8 @@ export interface IChatContext {
   currentAccount: UserAccount;
   title?: string;
   setTitle: React.Dispatch<React.SetStateAction<string | undefined>>;
+  traceId?: string;
+  setTraceId: React.Dispatch<React.SetStateAction<string | undefined>>;
 }
 export const ChatContext = React.createContext<IChatContext | null>(null);
 
diff --git a/public/hooks/use_chat_actions.tsx b/public/hooks/use_chat_actions.tsx
index 7770a31a..50a1e9fc 100644
--- a/public/hooks/use_chat_actions.tsx
+++ b/public/hooks/use_chat_actions.tsx
@@ -3,8 +3,6 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
-import { LangchainTracesFlyoutBody } from '../components/langchain_traces_flyout_body';
 import { ASSISTANT_API } from '../../common/constants/llm';
 import { IMessage, ISuggestedAction } from '../../common/types/chat_saved_object_attributes';
 import { useChatContext } from '../contexts/chat_context';
@@ -103,12 +101,10 @@ export const useChatActions = (): AssistantActions => {
       }
 
       case 'view_trace':
-        chatContext.setFlyoutComponent(
-          <LangchainTracesFlyoutBody
-            closeFlyout={() => chatContext.setFlyoutComponent(null)}
-            traceId={suggestedAction.metadata.traceId}
-          />
-        );
+        if ('traceId' in message) {
+          chatContext.setSelectedTabId('trace');
+          chatContext.setTraceId(message.traceId);
+        }
         break;
 
       default:
diff --git a/public/tabs/chat_window_header.tsx b/public/tabs/chat_window_header.tsx
index de6e2e43..e9a6934d 100644
--- a/public/tabs/chat_window_header.tsx
+++ b/public/tabs/chat_window_header.tsx
@@ -55,10 +55,10 @@ export const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = React.memo((pro
   );
 
   const dockBottom = () => (
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <g fill="currentColor">
-        <path d="M0 1.99406C0 0.892771 0.894514 0 1.99406 0H14.0059C15.1072 0 16 0.894514 16 1.99406V14.0059C16 15.1072 15.1055 16 14.0059 16H1.99406C0.892771 16 0 15.1055 0 14.0059V1.99406ZM1 1.99406V14.0059C1 14.5539 1.44579 15 1.99406 15H14.0059C14.5539 15 15 14.5542 15 14.0059V1.99406C15 1.44606 14.5542 1 14.0059 1H1.99406C1.44606 1 1 1.44579 1 1.99406Z" />
-        <rect x="0.5" y="15" width="9.5" height="15" transform="rotate(-90 0.5 15)" />
+        <path d="M3 1H13C14.1046 1 15 1.89543 15 3V13C15 14.1046 14.1046 15 13 15H3C1.89543 15 1 14.1046 1 13V3C1 1.89543 1.89543 1 3 1ZM3 2C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H3Z" />
+        <path d="M3 9.5C3 9.22386 3.22386 9 3.5 9H12.5C12.7761 9 13 9.22386 13 9.5V12.5C13 12.7761 12.7761 13 12.5 13H3.5C3.22386 13 3 12.7761 3 12.5V9.5Z" />
       </g>
     </svg>
   );
@@ -66,8 +66,8 @@ export const ChatWindowHeader: React.FC<ChatWindowHeaderProps> = React.memo((pro
   const dockRight = () => (
     <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <g fill="currentColor">
-        <path d="M0 1.99406C0 0.892771 0.894514 0 1.99406 0H14.0059C15.1072 0 16 0.894514 16 1.99406V14.0059C16 15.1072 15.1055 16 14.0059 16H1.99406C0.892771 16 0 15.1055 0 14.0059V1.99406ZM1 1.99406V14.0059C1 14.5539 1.44579 15 1.99406 15H14.0059C14.5539 15 15 14.5542 15 14.0059V1.99406C15 1.44606 14.5542 1 14.0059 1H1.99406C1.44606 1 1 1.44579 1 1.99406Z" />
-        <rect x="9" y="0.5" width="6" height="14.5" />
+        <path d="M3 1H13C14.1046 1 15 1.89543 15 3V13C15 14.1046 14.1046 15 13 15H3C1.89543 15 1 14.1046 1 13V3C1 1.89543 1.89543 1 3 1ZM3 2C2.44772 2 2 2.44772 2 3V13C2 13.5523 2.44772 14 3 14H13C13.5523 14 14 13.5523 14 13V3C14 2.44772 13.5523 2 13 2H3Z" />
+        <path d="M9 3.5C9 3.22386 9.22386 3 9.5 3H12.5C12.7761 3 13 3.22386 13 3.5V12.5C13 12.7761 12.7761 13 12.5 13H9.5C9.22386 13 9 12.7761 9 12.5V3.5Z" />
       </g>
     </svg>
   );
diff --git a/public/types.ts b/public/types.ts
index b02c0626..1797799d 100644
--- a/public/types.ts
+++ b/public/types.ts
@@ -46,4 +46,4 @@ export interface ChatConfig {
   terms_accepted: boolean;
 }
 
-export type TabId = 'chat' | 'compose' | 'insights' | 'history';
+export type TabId = 'chat' | 'compose' | 'insights' | 'history' | 'trace';