diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index c31eae094a4..9efe562730e 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -2361,7 +2361,8 @@ export function ChatPage({
                                     id={`message-${message.messageId}`}
                                     key={messageReactComponentKey}
                                   >
-                                    <HumanMessage
+                                    <AIMessage humanText={message.message} />
+                                    {/* <HumanMessage
                                       stopGenerating={stopGenerating}
                                       content={message.message}
                                       files={message.files}
@@ -2406,7 +2407,7 @@ export function ChatPage({
                                         // and so it sticks around on page reload
                                         setMessageAsLatest(messageId);
                                       }}
-                                    />
+                                    /> */}
                                   </div>
                                 );
                               } else if (message.type === "assistant") {
@@ -2446,7 +2447,8 @@ export function ChatPage({
                                         : null
                                     }
                                   >
-                                    <AIMessage
+                                    {/* <AIMessage
+                                      humanText={message.message}
                                       setPresentingDocument={
                                         setPresentingDocument
                                       }
@@ -2614,13 +2616,13 @@ export function ChatPage({
                                             )
                                           : !retrievalEnabled
                                       }
-                                    />
+                                    /> */}
                                   </div>
                                 );
                               } else {
                                 return (
                                   <div key={messageReactComponentKey}>
-                                    <AIMessage
+                                    {/* <AIMessage
                                       currentPersona={liveAssistant}
                                       messageId={message.messageId}
                                       content={
@@ -2640,13 +2642,13 @@ export function ChatPage({
                                           )}
                                         </p>
                                       }
-                                    />
+                                    /> */}
                                   </div>
                                 );
                               }
                             })}
 
-                            {(currentSessionChatState == "loading" ||
+                            {/* {(currentSessionChatState == "loading" ||
                               (loadingError &&
                                 !currentSessionRegenerationState?.regenerating &&
                                 messageHistory[messageHistory.length - 1]
@@ -2656,13 +2658,13 @@ export function ChatPage({
                                 messageId={-1}
                                 content={submittedMessage}
                               />
-                            )}
+                            )} */}
 
                             {currentSessionChatState == "loading" && (
                               <div
                                 key={`${messageHistory.length}-${chatSessionIdRef.current}`}
                               >
-                                <AIMessage
+                                {/* <AIMessage
                                   key={-3}
                                   currentPersona={liveAssistant}
                                   alternativeAssistant={
@@ -2680,13 +2682,13 @@ export function ChatPage({
                                       </span>
                                     </div>
                                   }
-                                />
+                                /> */}
                               </div>
                             )}
 
                             {loadingError && (
                               <div key={-1}>
-                                <AIMessage
+                                {/* <AIMessage
                                   currentPersona={liveAssistant}
                                   messageId={-1}
                                   content={
@@ -2694,7 +2696,7 @@ export function ChatPage({
                                       {loadingError}
                                     </p>
                                   }
-                                />
+                                /> */}
                               </div>
                             )}
                             {messageHistory.length > 0 && (
diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index 75e583cfc59..afa82325157 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -162,523 +162,715 @@ function FileDisplay({
   );
 }
 
-export const AIMessage = ({
-  regenerate,
-  overriddenModel,
-  selectedMessageForDocDisplay,
-  continueGenerating,
-  shared,
-  isActive,
-  toggleDocumentSelection,
-  alternativeAssistant,
-  docs,
-  messageId,
-  documentSelectionToggled,
-  content,
-  files,
-  selectedDocuments,
-  query,
-  citedDocuments,
-  toolCall,
-  isComplete,
-  hasDocs,
-  handleFeedback,
-  handleShowRetrieved,
-  handleSearchQueryEdit,
-  handleForceSearch,
-  retrievalDisabled,
-  currentPersona,
-  otherMessagesCanSwitchTo,
-  onMessageSelection,
-  setPresentingDocument,
-  index,
-}: {
-  index?: number;
-  selectedMessageForDocDisplay?: number | null;
-  shared?: boolean;
-  isActive?: boolean;
-  continueGenerating?: () => void;
-  otherMessagesCanSwitchTo?: number[];
-  onMessageSelection?: (messageId: number) => void;
-  selectedDocuments?: DanswerDocument[] | null;
-  toggleDocumentSelection?: () => void;
-  docs?: DanswerDocument[] | null;
-  alternativeAssistant?: Persona | null;
-  currentPersona: Persona;
-  messageId: number | null;
-  content: string | JSX.Element;
-  documentSelectionToggled?: boolean;
-  files?: FileDescriptor[];
-  query?: string;
-  citedDocuments?: [string, DanswerDocument][] | null;
-  toolCall?: ToolCallMetadata | null;
-  isComplete?: boolean;
-  hasDocs?: boolean;
-  handleFeedback?: (feedbackType: FeedbackType) => void;
-  handleShowRetrieved?: (messageNumber: number | null) => void;
-  handleSearchQueryEdit?: (query: string) => void;
-  handleForceSearch?: () => void;
-  retrievalDisabled?: boolean;
-  overriddenModel?: string;
-  regenerate?: (modelOverRide: LlmOverride) => Promise<void>;
-  setPresentingDocument?: (document: DanswerDocument) => void;
-}) => {
-  const toolCallGenerating = toolCall && !toolCall.tool_result;
-  const processContent = (content: string | JSX.Element) => {
-    if (typeof content !== "string") {
-      return content;
-    }
-
-    const codeBlockRegex = /```(\w*)\n[\s\S]*?```|```[\s\S]*?$/g;
-    const matches = content.match(codeBlockRegex);
-
-    if (matches) {
-      content = matches.reduce((acc, match) => {
-        if (!match.match(/```\w+/)) {
-          return acc.replace(match, match.replace("```", "```plaintext"));
-        }
-        return acc;
-      }, content);
-
-      const lastMatch = matches[matches.length - 1];
-      if (!lastMatch.endsWith("```")) {
-        return content;
-      }
-    }
-
-    return content + (!isComplete && !toolCallGenerating ? " [*]() " : "");
-  };
-  const finalContent = processContent(content as string);
-
-  const [isRegenerateHovered, setIsRegenerateHovered] = useState(false);
-  const [isRegenerateDropdownVisible, setIsRegenerateDropdownVisible] =
-    useState(false);
-  const { isHovering, trackedElementRef, hoverElementRef } = useMouseTracking();
-
-  const settings = useContext(SettingsContext);
-  // this is needed to give Prism a chance to load
-
-  const selectedDocumentIds =
-    selectedDocuments?.map((document) => document.document_id) || [];
-  const citedDocumentIds: string[] = [];
-
-  citedDocuments?.forEach((doc) => {
-    citedDocumentIds.push(doc[1].document_id);
-  });
-
-  if (!isComplete) {
-    const trimIncompleteCodeSection = (
-      content: string | JSX.Element
-    ): string | JSX.Element => {
-      if (typeof content === "string") {
-        const pattern = /```[a-zA-Z]+[^\s]*$/;
-        const match = content.match(pattern);
-        if (match && match.index && match.index > 3) {
-          const newContent = content.slice(0, match.index - 3);
-          return newContent;
-        }
-        return content;
-      }
-      return content;
-    };
-    content = trimIncompleteCodeSection(content);
-  }
-
-  let filteredDocs: FilteredDanswerDocument[] = [];
-
-  if (docs) {
-    filteredDocs = docs
-      .filter(
-        (doc, index, self) =>
-          doc.document_id &&
-          doc.document_id !== "" &&
-          index === self.findIndex((d) => d.document_id === doc.document_id)
-      )
-      .filter((doc) => {
-        return citedDocumentIds.includes(doc.document_id);
-      })
-      .map((doc: DanswerDocument, ind: number) => {
-        return {
-          ...doc,
-          included: selectedDocumentIds.includes(doc.document_id),
-        };
-      });
-  }
-
-  const paragraphCallback = useCallback(
-    (props: any) => <MemoizedParagraph>{props.children}</MemoizedParagraph>,
-    []
-  );
-
-  const anchorCallback = useCallback(
-    (props: any) => (
-      <MemoizedAnchor
-        updatePresentingDocument={setPresentingDocument}
-        docs={docs}
-      >
-        {props.children}
-      </MemoizedAnchor>
-    ),
-    [docs]
-  );
-
-  const currentMessageInd = messageId
-    ? otherMessagesCanSwitchTo?.indexOf(messageId)
-    : undefined;
-
-  const uniqueSources: ValidSources[] = Array.from(
-    new Set((docs || []).map((doc) => doc.source_type))
-  ).slice(0, 3);
-
-  const markdownComponents = useMemo(
-    () => ({
-      a: anchorCallback,
-      p: paragraphCallback,
-      code: ({ node, className, children }: any) => {
-        const codeText = extractCodeText(
-          node,
-          finalContent as string,
-          children
-        );
-
-        return (
-          <CodeBlock className={className} codeText={codeText}>
-            {children}
-          </CodeBlock>
-        );
-      },
-    }),
-    [anchorCallback, paragraphCallback, finalContent]
-  );
+export const AIMessage = ({ humanText }: { humanText: string }) => {
+  // This message layout is directly taken from the Figma snippet provided.
+  // We'll render a static "Agentic Search" example to mimic the design.
+  // In a real scenario, you would dynamically insert content.
 
-  const renderedMarkdown = useMemo(() => {
-    return (
-      <ReactMarkdown
-        className="prose max-w-full text-base"
-        components={markdownComponents}
-        remarkPlugins={[remarkGfm]}
-        rehypePlugins={[[rehypePrism, { ignoreMissing: true }]]}
-      >
-        {finalContent as string}
-      </ReactMarkdown>
-    );
-  }, [finalContent, markdownComponents]);
-
-  const includeMessageSwitcher =
-    currentMessageInd !== undefined &&
-    onMessageSelection &&
-    otherMessagesCanSwitchTo &&
-    otherMessagesCanSwitchTo.length > 1;
   return (
-    <div
-      id="danswer-ai-message"
-      ref={trackedElementRef}
-      className={`py-5 ml-4 px-5 relative flex `}
-    >
-      <div
-        className={`mx-auto ${
-          shared ? "w-full" : "w-[90%]"
-        }  max-w-message-max`}
-      >
-        <div className={`desktop:mr-12 ${!shared && "mobile:ml-0 md:ml-8"}`}>
-          <div className="flex">
-            <AssistantIcon
-              size="small"
-              assistant={alternativeAssistant || currentPersona}
-            />
-
-            <div className="w-full">
-              <div className="max-w-message-max break-words">
-                <div className="w-full ml-4">
-                  <div className="max-w-message-max break-words">
-                    {!toolCall || toolCall.tool_name === SEARCH_TOOL_NAME ? (
-                      <>
-                        {query !== undefined &&
-                          handleShowRetrieved !== undefined &&
-                          !retrievalDisabled && (
-                            <div className="mb-1">
-                              <SearchSummary
-                                index={index || 0}
-                                query={query}
-                                finished={toolCall?.tool_result != undefined}
-                                hasDocs={hasDocs || false}
-                                messageId={messageId}
-                                handleShowRetrieved={handleShowRetrieved}
-                                handleSearchQueryEdit={handleSearchQueryEdit}
-                              />
-                            </div>
-                          )}
-                        {handleForceSearch &&
-                          content &&
-                          query === undefined &&
-                          !hasDocs &&
-                          !retrievalDisabled && (
-                            <div className="mb-1">
-                              <SkippedSearch
-                                handleForceSearch={handleForceSearch}
-                              />
-                            </div>
-                          )}
-                      </>
-                    ) : null}
-
-                    {toolCall &&
-                      !TOOLS_WITH_CUSTOM_HANDLING.includes(
-                        toolCall.tool_name
-                      ) && (
-                        <ToolRunDisplay
-                          toolName={
-                            toolCall.tool_result && content
-                              ? `Used "${toolCall.tool_name}"`
-                              : `Using "${toolCall.tool_name}"`
-                          }
-                          toolLogo={
-                            <FiTool size={15} className="my-auto mr-1" />
-                          }
-                          isRunning={!toolCall.tool_result || !content}
-                        />
-                      )}
+    <div className="py-5 px-4 sm:px-6 md:px-8 lg:px-10 w-full max-w-full">
+      <div className="mx-auto w-full max-w-7xl">
+        <div className="flex flex-col md:flex-row">
+          {/* Assistant icon */}
+          <div className="flex-shrink-0 mb-4 md:mb-0 md:mr-6">
+            <div className="w-10 h-10 p-1 flex justify-center items-center">
+              <img
+                className="w-full h-full object-cover rounded-full"
+                src="https://via.placeholder.com/40x40"
+                alt="assistant"
+              />
+            </div>
+          </div>
 
-                    {toolCall &&
-                      (!files || files.length == 0) &&
-                      toolCall.tool_name === IMAGE_GENERATION_TOOL_NAME &&
-                      !toolCall.tool_result && <GeneratingImageDisplay />}
-
-                    {toolCall &&
-                      toolCall.tool_name === INTERNET_SEARCH_TOOL_NAME && (
-                        <ToolRunDisplay
-                          toolName={
-                            toolCall.tool_result
-                              ? `Searched the internet`
-                              : `Searching the internet`
-                          }
-                          toolLogo={
-                            <FiGlobe size={15} className="my-auto mr-1" />
-                          }
-                          isRunning={!toolCall.tool_result}
-                        />
-                      )}
+          <div className="flex-grow">
+            <div className="space-y-8 text-black font-['KH Teka TRIAL']">
+              {/* The Question */}
+              <h2 className="text-2xl sm:text-3xl md:text-4xl font-light leading-tight">
+                {humanText}
+              </h2>
+
+              {/* Main answer container */}
+              <div className="p-4 rounded border border-[#e6e3dd] bg-white">
+                <div className="flex flex-col space-y-6">
+                  <h3 className="text-xl font-semibold">Agentic Search</h3>
+                  <hr className="border-[#e6e3dd]" />
 
-                    {docs && docs.length > 0 && (
-                      <div className="mt-2 -mx-8 w-full mb-4 flex relative">
-                        <div className="w-full">
-                          <div className="px-8 flex gap-x-2">
-                            {!settings?.isMobile &&
-                              docs.length > 0 &&
-                              docs
-                                .slice(0, 2)
-                                .map((doc, ind) => (
-                                  <SourceCard
-                                    doc={doc}
-                                    key={ind}
-                                    setPresentingDocument={
-                                      setPresentingDocument
-                                    }
-                                  />
-                                ))}
-                            <SeeMoreBlock
-                              documentSelectionToggled={
-                                (documentSelectionToggled &&
-                                  selectedMessageForDocDisplay === messageId) ||
-                                false
-                              }
-                              toggleDocumentSelection={toggleDocumentSelection}
-                              uniqueSources={uniqueSources}
-                            />
+                  {/* Getting context section */}
+                  <div className="space-y-4">
+                    <h4 className="font-medium">
+                      Getting context on typical sales processes
+                    </h4>
+                    <div className="space-y-2">
+                      <div className="flex items-center space-x-2 text-sm">
+                        <span className="text-[#4a4a4a]">Searching</span>
+                        <div className="flex items-center space-x-1">
+                          <div className="w-6 h-6 p-1 rounded-xl border border-black flex justify-center items-center">
+                            <div className="w-4 h-4" />
                           </div>
+                          <span>Web Search</span>
                         </div>
                       </div>
-                    )}
-
-                    {content || files ? (
-                      <>
-                        <FileDisplay files={files || []} />
-
-                        {typeof content === "string" ? (
-                          <div className="overflow-x-visible max-w-content-max">
-                            {renderedMarkdown}
-                          </div>
-                        ) : (
-                          content
-                        )}
-                      </>
-                    ) : isComplete ? null : (
-                      <></>
-                    )}
+                      <div className="flex flex-wrap gap-2">
+                        {[
+                          "Sales training materials",
+                          "Sales playbook",
+                          "Customer Journey",
+                        ].map((item, index) => (
+                          <span
+                            key={index}
+                            className={`px-2 py-1 text-xs rounded-2xl ${
+                              index === 2 ? "bg-[#e6e3dd]" : "bg-[#f1eee8]"
+                            }`}
+                          >
+                            {item}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="space-y-2">
+                      <span className="text-sm text-[#4a4a4a]">Reading</span>
+                      <div className="flex flex-wrap gap-2">
+                        {[
+                          "2024 sales process onboarding guide",
+                          "2024 onyx sales playbook",
+                          "Ramp customer journey record",
+                        ].map((item, index) => (
+                          <span
+                            key={index}
+                            className="px-2 py-1 text-xs bg-[#f1eee8] rounded-2xl"
+                          >
+                            {item}
+                          </span>
+                        ))}
+                      </div>
+                    </div>
                   </div>
 
-                  {handleFeedback &&
-                    (isActive ? (
-                      <div
-                        className={`
-                        flex md:flex-row gap-x-0.5 mt-1
-                        transition-transform duration-300 ease-in-out
-                        transform opacity-100 translate-y-0"
-                  `}
-                      >
-                        <TooltipGroup>
-                          <div className="flex justify-start w-full gap-x-0.5">
-                            {includeMessageSwitcher && (
-                              <div className="-mx-1 mr-auto">
-                                <MessageSwitcher
-                                  currentPage={currentMessageInd + 1}
-                                  totalPages={otherMessagesCanSwitchTo.length}
-                                  handlePrevious={() => {
-                                    onMessageSelection(
-                                      otherMessagesCanSwitchTo[
-                                        currentMessageInd - 1
-                                      ]
-                                    );
-                                  }}
-                                  handleNext={() => {
-                                    onMessageSelection(
-                                      otherMessagesCanSwitchTo[
-                                        currentMessageInd + 1
-                                      ]
-                                    );
-                                  }}
-                                />
-                              </div>
-                            )}
-                          </div>
-                          <CustomTooltip showTick line content="Copy!">
-                            <CopyButton content={content.toString()} />
-                          </CustomTooltip>
-                          <CustomTooltip showTick line content="Good response!">
-                            <HoverableIcon
-                              icon={<LikeFeedback />}
-                              onClick={() => handleFeedback("like")}
-                            />
-                          </CustomTooltip>
-                          <CustomTooltip showTick line content="Bad response!">
-                            <HoverableIcon
-                              icon={<DislikeFeedback size={16} />}
-                              onClick={() => handleFeedback("dislike")}
-                            />
-                          </CustomTooltip>
-                          {regenerate && (
-                            <CustomTooltip
-                              disabled={isRegenerateDropdownVisible}
-                              showTick
-                              line
-                              content="Regenerate!"
-                            >
-                              <RegenerateOption
-                                onDropdownVisibleChange={
-                                  setIsRegenerateDropdownVisible
-                                }
-                                onHoverChange={setIsRegenerateHovered}
-                                selectedAssistant={currentPersona!}
-                                regenerate={regenerate}
-                                overriddenModel={overriddenModel}
-                              />
-                            </CustomTooltip>
-                          )}
-                        </TooltipGroup>
+                  {/* Ramp difference section */}
+                  <div className="space-y-4">
+                    <h4 className="font-medium">
+                      What was done differently at Ramp
+                    </h4>
+                    <div className="space-y-2">
+                      <span className="text-sm text-[#4a4a4a]">Searching</span>
+                      <div className="flex flex-wrap gap-2">
+                        {[
+                          "Ramp sales calls",
+                          "Ramp deal sales email exchanges",
+                          "Ramp win/loss analysis",
+                        ].map((item, index) => (
+                          <span
+                            key={index}
+                            className="px-2 py-1 text-xs bg-[#f1eee8] rounded-2xl"
+                          >
+                            {item}
+                          </span>
+                        ))}
                       </div>
-                    ) : (
-                      <div
-                        ref={hoverElementRef}
-                        className={`
-                        absolute -bottom-5
-                        z-10
-                        invisible ${
-                          (isHovering ||
-                            isRegenerateHovered ||
-                            settings?.isMobile) &&
-                          "!visible"
-                        }
-                        opacity-0 ${
-                          (isHovering ||
-                            isRegenerateHovered ||
-                            settings?.isMobile) &&
-                          "!opacity-100"
-                        }
-                        translate-y-2 ${
-                          (isHovering || settings?.isMobile) && "!translate-y-0"
-                        }
-                        transition-transform duration-300 ease-in-out 
-                        flex md:flex-row gap-x-0.5 bg-background-125/40 -mx-1.5 p-1.5 rounded-lg
-                        `}
-                      >
-                        <TooltipGroup>
-                          <div className="flex justify-start w-full gap-x-0.5">
-                            {includeMessageSwitcher && (
-                              <div className="-mx-1 mr-auto">
-                                <MessageSwitcher
-                                  currentPage={currentMessageInd + 1}
-                                  totalPages={otherMessagesCanSwitchTo.length}
-                                  handlePrevious={() => {
-                                    onMessageSelection(
-                                      otherMessagesCanSwitchTo[
-                                        currentMessageInd - 1
-                                      ]
-                                    );
-                                  }}
-                                  handleNext={() => {
-                                    onMessageSelection(
-                                      otherMessagesCanSwitchTo[
-                                        currentMessageInd + 1
-                                      ]
-                                    );
-                                  }}
-                                />
-                              </div>
-                            )}
-                          </div>
-                          <CustomTooltip showTick line content="Copy!">
-                            <CopyButton content={content.toString()} />
-                          </CustomTooltip>
-
-                          <CustomTooltip showTick line content="Good response!">
-                            <HoverableIcon
-                              icon={<LikeFeedback />}
-                              onClick={() => handleFeedback("like")}
-                            />
-                          </CustomTooltip>
-
-                          <CustomTooltip showTick line content="Bad response!">
-                            <HoverableIcon
-                              icon={<DislikeFeedback size={16} />}
-                              onClick={() => handleFeedback("dislike")}
-                            />
-                          </CustomTooltip>
-                          {regenerate && (
-                            <CustomTooltip
-                              disabled={isRegenerateDropdownVisible}
-                              showTick
-                              line
-                              content="Regenerate!"
-                            >
-                              <RegenerateOption
-                                selectedAssistant={currentPersona!}
-                                onDropdownVisibleChange={
-                                  setIsRegenerateDropdownVisible
-                                }
-                                regenerate={regenerate}
-                                overriddenModel={overriddenModel}
-                                onHoverChange={setIsRegenerateHovered}
-                              />
-                            </CustomTooltip>
-                          )}
-                        </TooltipGroup>
+                    </div>
+                    <div className="space-y-2">
+                      <span className="text-sm text-[#4a4a4a]">Reading</span>
+                      <div className="flex flex-wrap gap-2">
+                        {[
+                          "Sales call with Ramp 2024/5/15",
+                          "Sales call with Ramp 2024/4/16",
+                          "Sales call with Ramp 2024/3/12",
+                          "Ramp:Onyx Regarding the deal terms",
+                          "Ramp:Onyx deal progress tracker",
+                        ].map((item, index) => (
+                          <span
+                            key={index}
+                            className="px-2 py-1 text-xs bg-[#f1eee8] rounded-2xl"
+                          >
+                            {item}
+                          </span>
+                        ))}
                       </div>
-                    ))}
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Sources */}
+              <div className="space-y-4">
+                <h3 className="text-xl font-semibold">Sources</h3>
+                <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
+                  {[
+                    {
+                      text: "a new in-app support experience for Ramp (recently rolled out to 50% of",
+                      source: "Business Overview meeting",
+                    },
+                    {
+                      text: "Danswer Updates!!! Shiny New Things for Ramp! General Improvements APIs for Ramp use",
+                      source: "Ramp (April)",
+                    },
+                    {
+                      text: "Existing solutions are so expensive that this isn't feasible. * Today's solutions don't meet those",
+                      source: "Sales Pitch Deck Thoughts",
+                    },
+                    {
+                      text: "Show All",
+                      source: "",
+                    },
+                  ].map((item, index) => (
+                    <div
+                      key={index}
+                      className="p-3 bg-[#f1eee8] rounded-lg space-y-2"
+                    >
+                      <p className="text-sm">{item.text}</p>
+                      {item.source && (
+                        <div className="flex items-center text-xs text-[#4a4a4a]">
+                          <div className="w-4 h-4 mr-1" />
+                          {item.source}
+                        </div>
+                      )}
+                    </div>
+                  ))}
                 </div>
               </div>
+
+              {/* Conclusion */}
+              <div className="space-y-4">
+                <div className="flex items-center space-x-2">
+                  <div className="w-8 h-8 p-1 flex justify-center items-center">
+                    <img
+                      className="w-full h-full object-cover rounded-full"
+                      src="https://via.placeholder.com/32x32"
+                      alt="Onyx logo"
+                    />
+                  </div>
+                  <h3 className="text-xl font-semibold">Onyx</h3>
+                </div>
+                <p className="text-base">
+                  To win the deal at Ramp, the team made the product really easy
+                  to access. After a successful demo...
+                </p>
+              </div>
             </div>
           </div>
         </div>
-        {(!toolCall || toolCall.tool_name === SEARCH_TOOL_NAME) &&
-          !query &&
-          continueGenerating && (
-            <ContinueGenerating handleContinueGenerating={continueGenerating} />
-          )}
       </div>
     </div>
   );
 };
 
+// export const AIMessage = ({
+//   regenerate,
+//   overriddenModel,
+//   selectedMessageForDocDisplay,
+//   continueGenerating,
+//   shared,
+//   isActive,
+//   toggleDocumentSelection,
+//   alternativeAssistant,
+//   docs,
+//   messageId,
+//   documentSelectionToggled,
+//   content,
+//   files,
+//   selectedDocuments,
+//   query,
+//   citedDocuments,
+//   toolCall,
+//   isComplete,
+//   hasDocs,
+//   handleFeedback,
+//   handleShowRetrieved,
+//   handleSearchQueryEdit,
+//   handleForceSearch,
+//   retrievalDisabled,
+//   currentPersona,
+//   otherMessagesCanSwitchTo,
+//   onMessageSelection,
+//   setPresentingDocument,
+//   index,
+// }: {
+//   index?: number;
+//   selectedMessageForDocDisplay?: number | null;
+//   shared?: boolean;
+//   isActive?: boolean;
+//   continueGenerating?: () => void;
+//   otherMessagesCanSwitchTo?: number[];
+//   onMessageSelection?: (messageId: number) => void;
+//   selectedDocuments?: DanswerDocument[] | null;
+//   toggleDocumentSelection?: () => void;
+//   docs?: DanswerDocument[] | null;
+//   alternativeAssistant?: Persona | null;
+//   currentPersona: Persona;
+//   messageId: number | null;
+//   content: string | JSX.Element;
+//   documentSelectionToggled?: boolean;
+//   files?: FileDescriptor[];
+//   query?: string;
+//   citedDocuments?: [string, DanswerDocument][] | null;
+//   toolCall?: ToolCallMetadata | null;
+//   isComplete?: boolean;
+//   hasDocs?: boolean;
+//   handleFeedback?: (feedbackType: FeedbackType) => void;
+//   handleShowRetrieved?: (messageNumber: number | null) => void;
+//   handleSearchQueryEdit?: (query: string) => void;
+//   handleForceSearch?: () => void;
+//   retrievalDisabled?: boolean;
+//   overriddenModel?: string;
+//   regenerate?: (modelOverRide: LlmOverride) => Promise<void>;
+//   setPresentingDocument?: (document: DanswerDocument) => void;
+// }) => {
+//   const toolCallGenerating = toolCall && !toolCall.tool_result;
+//   const processContent = (content: string | JSX.Element) => {
+//     if (typeof content !== "string") {
+//       return content;
+//     }
+
+//     const codeBlockRegex = /```(\w*)\n[\s\S]*?```|```[\s\S]*?$/g;
+//     const matches = content.match(codeBlockRegex);
+
+//     if (matches) {
+//       content = matches.reduce((acc, match) => {
+//         if (!match.match(/```\w+/)) {
+//           return acc.replace(match, match.replace("```", "```plaintext"));
+//         }
+//         return acc;
+//       }, content);
+
+//       const lastMatch = matches[matches.length - 1];
+//       if (!lastMatch.endsWith("```")) {
+//         return content;
+//       }
+//     }
+
+//     return content + (!isComplete && !toolCallGenerating ? " [*]() " : "");
+//   };
+//   const finalContent = processContent(content as string);
+
+//   const [isRegenerateHovered, setIsRegenerateHovered] = useState(false);
+//   const [isRegenerateDropdownVisible, setIsRegenerateDropdownVisible] =
+//     useState(false);
+//   const { isHovering, trackedElementRef, hoverElementRef } = useMouseTracking();
+
+//   const settings = useContext(SettingsContext);
+//   // this is needed to give Prism a chance to load
+
+//   const selectedDocumentIds =
+//     selectedDocuments?.map((document) => document.document_id) || [];
+//   const citedDocumentIds: string[] = [];
+
+//   citedDocuments?.forEach((doc) => {
+//     citedDocumentIds.push(doc[1].document_id);
+//   });
+
+//   if (!isComplete) {
+//     const trimIncompleteCodeSection = (
+//       content: string | JSX.Element
+//     ): string | JSX.Element => {
+//       if (typeof content === "string") {
+//         const pattern = /```[a-zA-Z]+[^\s]*$/;
+//         const match = content.match(pattern);
+//         if (match && match.index && match.index > 3) {
+//           const newContent = content.slice(0, match.index - 3);
+//           return newContent;
+//         }
+//         return content;
+//       }
+//       return content;
+//     };
+//     content = trimIncompleteCodeSection(content);
+//   }
+
+//   let filteredDocs: FilteredDanswerDocument[] = [];
+
+//   if (docs) {
+//     filteredDocs = docs
+//       .filter(
+//         (doc, index, self) =>
+//           doc.document_id &&
+//           doc.document_id !== "" &&
+//           index === self.findIndex((d) => d.document_id === doc.document_id)
+//       )
+//       .filter((doc) => {
+//         return citedDocumentIds.includes(doc.document_id);
+//       })
+//       .map((doc: DanswerDocument, ind: number) => {
+//         return {
+//           ...doc,
+//           included: selectedDocumentIds.includes(doc.document_id),
+//         };
+//       });
+//   }
+
+//   const paragraphCallback = useCallback(
+//     (props: any) => <MemoizedParagraph>{props.children}</MemoizedParagraph>,
+//     []
+//   );
+
+//   const anchorCallback = useCallback(
+//     (props: any) => (
+//       <MemoizedAnchor
+//         updatePresentingDocument={setPresentingDocument}
+//         docs={docs}
+//       >
+//         {props.children}
+//       </MemoizedAnchor>
+//     ),
+//     [docs]
+//   );
+
+//   const currentMessageInd = messageId
+//     ? otherMessagesCanSwitchTo?.indexOf(messageId)
+//     : undefined;
+
+//   const uniqueSources: ValidSources[] = Array.from(
+//     new Set((docs || []).map((doc) => doc.source_type))
+//   ).slice(0, 3);
+
+//   const markdownComponents = useMemo(
+//     () => ({
+//       a: anchorCallback,
+//       p: paragraphCallback,
+//       code: ({ node, className, children }: any) => {
+//         const codeText = extractCodeText(
+//           node,
+//           finalContent as string,
+//           children
+//         );
+
+//         return (
+//           <CodeBlock className={className} codeText={codeText}>
+//             {children}
+//           </CodeBlock>
+//         );
+//       },
+//     }),
+//     [anchorCallback, paragraphCallback, finalContent]
+//   );
+
+//   const renderedMarkdown = useMemo(() => {
+//     return (
+//       <ReactMarkdown
+//         className="prose max-w-full text-base"
+//         components={markdownComponents}
+//         remarkPlugins={[remarkGfm]}
+//         rehypePlugins={[[rehypePrism, { ignoreMissing: true }]]}
+//       >
+//         {finalContent as string}
+//       </ReactMarkdown>
+//     );
+//   }, [finalContent, markdownComponents]);
+
+//   const includeMessageSwitcher =
+//     currentMessageInd !== undefined &&
+//     onMessageSelection &&
+//     otherMessagesCanSwitchTo &&
+//     otherMessagesCanSwitchTo.length > 1;
+//   return (
+//     <div
+//       id="danswer-ai-message"
+//       ref={trackedElementRef}
+//       className={`py-5 ml-4 px-5 relative flex `}
+//     >
+//       <div
+//         className={`mx-auto ${
+//           shared ? "w-full" : "w-[90%]"
+//         }  max-w-message-max`}
+//       >
+//         <div className={`desktop:mr-12 ${!shared && "mobile:ml-0 md:ml-8"}`}>
+//           <div className="flex">
+//             <AssistantIcon
+//               size="small"
+//               assistant={alternativeAssistant || currentPersona}
+//             />
+
+//             <div className="w-full">
+//               <div className="max-w-message-max break-words">
+//                 <div className="w-full ml-4">
+//                   <div className="max-w-message-max break-words">
+//                     {!toolCall || toolCall.tool_name === SEARCH_TOOL_NAME ? (
+//                       <>
+//                         {query !== undefined &&
+//                           handleShowRetrieved !== undefined &&
+//                           !retrievalDisabled && (
+//                             <div className="mb-1">
+//                               <SearchSummary
+//                                 index={index || 0}
+//                                 query={query}
+//                                 finished={toolCall?.tool_result != undefined}
+//                                 hasDocs={hasDocs || false}
+//                                 messageId={messageId}
+//                                 handleShowRetrieved={handleShowRetrieved}
+//                                 handleSearchQueryEdit={handleSearchQueryEdit}
+//                               />
+//                             </div>
+//                           )}
+//                         {handleForceSearch &&
+//                           content &&
+//                           query === undefined &&
+//                           !hasDocs &&
+//                           !retrievalDisabled && (
+//                             <div className="mb-1">
+//                               <SkippedSearch
+//                                 handleForceSearch={handleForceSearch}
+//                               />
+//                             </div>
+//                           )}
+//                       </>
+//                     ) : null}
+
+//                     {toolCall &&
+//                       !TOOLS_WITH_CUSTOM_HANDLING.includes(
+//                         toolCall.tool_name
+//                       ) && (
+//                         <ToolRunDisplay
+//                           toolName={
+//                             toolCall.tool_result && content
+//                               ? `Used "${toolCall.tool_name}"`
+//                               : `Using "${toolCall.tool_name}"`
+//                           }
+//                           toolLogo={
+//                             <FiTool size={15} className="my-auto mr-1" />
+//                           }
+//                           isRunning={!toolCall.tool_result || !content}
+//                         />
+//                       )}
+
+//                     {toolCall &&
+//                       (!files || files.length == 0) &&
+//                       toolCall.tool_name === IMAGE_GENERATION_TOOL_NAME &&
+//                       !toolCall.tool_result && <GeneratingImageDisplay />}
+
+//                     {toolCall &&
+//                       toolCall.tool_name === INTERNET_SEARCH_TOOL_NAME && (
+//                         <ToolRunDisplay
+//                           toolName={
+//                             toolCall.tool_result
+//                               ? `Searched the internet`
+//                               : `Searching the internet`
+//                           }
+//                           toolLogo={
+//                             <FiGlobe size={15} className="my-auto mr-1" />
+//                           }
+//                           isRunning={!toolCall.tool_result}
+//                         />
+//                       )}
+
+//                     {docs && docs.length > 0 && (
+//                       <div className="mt-2 -mx-8 w-full mb-4 flex relative">
+//                         <div className="w-full">
+//                           <div className="px-8 flex gap-x-2">
+//                             {!settings?.isMobile &&
+//                               docs.length > 0 &&
+//                               docs
+//                                 .slice(0, 2)
+//                                 .map((doc, ind) => (
+//                                   <SourceCard
+//                                     doc={doc}
+//                                     key={ind}
+//                                     setPresentingDocument={
+//                                       setPresentingDocument
+//                                     }
+//                                   />
+//                                 ))}
+//                             <SeeMoreBlock
+//                               documentSelectionToggled={
+//                                 (documentSelectionToggled &&
+//                                   selectedMessageForDocDisplay === messageId) ||
+//                                 false
+//                               }
+//                               toggleDocumentSelection={toggleDocumentSelection}
+//                               uniqueSources={uniqueSources}
+//                             />
+//                           </div>
+//                         </div>
+//                       </div>
+//                     )}
+
+//                     {content || files ? (
+//                       <>
+//                         <FileDisplay files={files || []} />
+
+//                         {typeof content === "string" ? (
+//                           <div className="overflow-x-visible max-w-content-max">
+//                             {renderedMarkdown}
+//                           </div>
+//                         ) : (
+//                           content
+//                         )}
+//                       </>
+//                     ) : isComplete ? null : (
+//                       <></>
+//                     )}
+//                   </div>
+
+//                   {handleFeedback &&
+//                     (isActive ? (
+//                       <div
+//                         className={`
+//                         flex md:flex-row gap-x-0.5 mt-1
+//                         transition-transform duration-300 ease-in-out
+//                         transform opacity-100 translate-y-0"
+//                   `}
+//                       >
+//                         <TooltipGroup>
+//                           <div className="flex justify-start w-full gap-x-0.5">
+//                             {includeMessageSwitcher && (
+//                               <div className="-mx-1 mr-auto">
+//                                 <MessageSwitcher
+//                                   currentPage={currentMessageInd + 1}
+//                                   totalPages={otherMessagesCanSwitchTo.length}
+//                                   handlePrevious={() => {
+//                                     onMessageSelection(
+//                                       otherMessagesCanSwitchTo[
+//                                         currentMessageInd - 1
+//                                       ]
+//                                     );
+//                                   }}
+//                                   handleNext={() => {
+//                                     onMessageSelection(
+//                                       otherMessagesCanSwitchTo[
+//                                         currentMessageInd + 1
+//                                       ]
+//                                     );
+//                                   }}
+//                                 />
+//                               </div>
+//                             )}
+//                           </div>
+//                           <CustomTooltip showTick line content="Copy!">
+//                             <CopyButton content={content.toString()} />
+//                           </CustomTooltip>
+//                           <CustomTooltip showTick line content="Good response!">
+//                             <HoverableIcon
+//                               icon={<LikeFeedback />}
+//                               onClick={() => handleFeedback("like")}
+//                             />
+//                           </CustomTooltip>
+//                           <CustomTooltip showTick line content="Bad response!">
+//                             <HoverableIcon
+//                               icon={<DislikeFeedback size={16} />}
+//                               onClick={() => handleFeedback("dislike")}
+//                             />
+//                           </CustomTooltip>
+//                           {regenerate && (
+//                             <CustomTooltip
+//                               disabled={isRegenerateDropdownVisible}
+//                               showTick
+//                               line
+//                               content="Regenerate!"
+//                             >
+//                               <RegenerateOption
+//                                 onDropdownVisibleChange={
+//                                   setIsRegenerateDropdownVisible
+//                                 }
+//                                 onHoverChange={setIsRegenerateHovered}
+//                                 selectedAssistant={currentPersona!}
+//                                 regenerate={regenerate}
+//                                 overriddenModel={overriddenModel}
+//                               />
+//                             </CustomTooltip>
+//                           )}
+//                         </TooltipGroup>
+//                       </div>
+//                     ) : (
+//                       <div
+//                         ref={hoverElementRef}
+//                         className={`
+//                         absolute -bottom-5
+//                         z-10
+//                         invisible ${
+//                           (isHovering ||
+//                             isRegenerateHovered ||
+//                             settings?.isMobile) &&
+//                           "!visible"
+//                         }
+//                         opacity-0 ${
+//                           (isHovering ||
+//                             isRegenerateHovered ||
+//                             settings?.isMobile) &&
+//                           "!opacity-100"
+//                         }
+//                         translate-y-2 ${
+//                           (isHovering || settings?.isMobile) && "!translate-y-0"
+//                         }
+//                         transition-transform duration-300 ease-in-out
+//                         flex md:flex-row gap-x-0.5 bg-background-125/40 -mx-1.5 p-1.5 rounded-lg
+//                         `}
+//                       >
+//                         <TooltipGroup>
+//                           <div className="flex justify-start w-full gap-x-0.5">
+//                             {includeMessageSwitcher && (
+//                               <div className="-mx-1 mr-auto">
+//                                 <MessageSwitcher
+//                                   currentPage={currentMessageInd + 1}
+//                                   totalPages={otherMessagesCanSwitchTo.length}
+//                                   handlePrevious={() => {
+//                                     onMessageSelection(
+//                                       otherMessagesCanSwitchTo[
+//                                         currentMessageInd - 1
+//                                       ]
+//                                     );
+//                                   }}
+//                                   handleNext={() => {
+//                                     onMessageSelection(
+//                                       otherMessagesCanSwitchTo[
+//                                         currentMessageInd + 1
+//                                       ]
+//                                     );
+//                                   }}
+//                                 />
+//                               </div>
+//                             )}
+//                           </div>
+//                           <CustomTooltip showTick line content="Copy!">
+//                             <CopyButton content={content.toString()} />
+//                           </CustomTooltip>
+
+//                           <CustomTooltip showTick line content="Good response!">
+//                             <HoverableIcon
+//                               icon={<LikeFeedback />}
+//                               onClick={() => handleFeedback("like")}
+//                             />
+//                           </CustomTooltip>
+
+//                           <CustomTooltip showTick line content="Bad response!">
+//                             <HoverableIcon
+//                               icon={<DislikeFeedback size={16} />}
+//                               onClick={() => handleFeedback("dislike")}
+//                             />
+//                           </CustomTooltip>
+//                           {regenerate && (
+//                             <CustomTooltip
+//                               disabled={isRegenerateDropdownVisible}
+//                               showTick
+//                               line
+//                               content="Regenerate!"
+//                             >
+//                               <RegenerateOption
+//                                 selectedAssistant={currentPersona!}
+//                                 onDropdownVisibleChange={
+//                                   setIsRegenerateDropdownVisible
+//                                 }
+//                                 regenerate={regenerate}
+//                                 overriddenModel={overriddenModel}
+//                                 onHoverChange={setIsRegenerateHovered}
+//                               />
+//                             </CustomTooltip>
+//                           )}
+//                         </TooltipGroup>
+//                       </div>
+//                     ))}
+//                 </div>
+//               </div>
+//             </div>
+//           </div>
+//         </div>
+//         {(!toolCall || toolCall.tool_name === SEARCH_TOOL_NAME) &&
+//           !query &&
+//           continueGenerating && (
+//             <ContinueGenerating handleContinueGenerating={continueGenerating} />
+//           )}
+//       </div>
+//     </div>
+//   );
+// };
+
 function MessageSwitcher({
   currentPage,
   totalPages,
diff --git a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
index 96eaa7e2edd..fe007d5bf5a 100644
--- a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
+++ b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
@@ -4,7 +4,6 @@ import { useRouter } from "next/navigation";
 import { ChatSession } from "../interfaces";
 import { useState, useEffect, useContext } from "react";
 import { getChatRetentionInfo, renameChatSession } from "../lib";
-import { BasicSelectable } from "@/components/BasicClickable";
 import Link from "next/link";
 import {
   FiCheck,
@@ -34,8 +33,6 @@ export function ChatSessionDisplay({
   chatSession: ChatSession;
   isSelected: boolean;
   search?: boolean;
-  // needed when the parent is trying to apply some background effect
-  // if not set, the gradient will still be applied and cause weirdness
   skipGradient?: boolean;
   closeSidebar?: () => void;
   showShareModal?: (chatSession: ChatSession) => void;
@@ -73,7 +70,7 @@ export function ChatSessionDisplay({
   };
 
   if (!settings) {
-    return <></>;
+    return null;
   }
 
   const { daysUntilExpiration, showRetentionWarning } = getChatRetentionInfo(
@@ -92,7 +89,11 @@ export function ChatSessionDisplay({
       )}
 
       <Link
-        className="flex my-1 group relative"
+        className={`flex my-1 group relative font-['KH Teka TRIAL'] ${
+          isSelected
+            ? "bg-[#e6e3dd] rounded"
+            : "hover:bg-[#e6e3dd] hover:rounded"
+        } transition-all duration-150`}
         key={chatSession.id}
         onMouseEnter={() => setIsHovering(true)}
         onMouseLeave={() => {
@@ -122,147 +123,135 @@ export function ChatSessionDisplay({
           );
         }}
       >
-        <BasicSelectable padding="extra" fullWidth selected={isSelected}>
-          <>
-            <div className="flex relative">
+        <div className="flex items-center w-full p-1">
+          {isRenamingChat ? (
+            <input
+              value={chatName}
+              onChange={(e) => setChatName(e.target.value)}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  onRename();
+                  event.preventDefault();
+                }
+              }}
+              className="px-1 mr-1 w-full rounded text-base font-normal leading-normal text-black border border-[#dcdad4]"
+            />
+          ) : (
+            <div className="flex-1 text-base font-normal text-black break-all whitespace-nowrap overflow-hidden mr-3">
+              {chatName || `Chat ${chatSession.id}`}
+            </div>
+          )}
+
+          {isHovering && (
+            <div className="flex items-center ml-auto">
               {isRenamingChat ? (
-                <input
-                  value={chatName}
-                  onChange={(e) => setChatName(e.target.value)}
-                  onKeyDown={(event) => {
-                    if (event.key === "Enter") {
-                      onRename();
-                      event.preventDefault();
-                    }
-                  }}
-                  className="-my-px px-1 mr-1 w-full rounded"
-                />
+                <>
+                  <div
+                    onClick={onRename}
+                    className="hover:bg-black/10 p-1 rounded cursor-pointer"
+                  >
+                    <FiCheck size={16} />
+                  </div>
+                  <div
+                    onClick={() => {
+                      setChatName(chatSession.name);
+                      setIsRenamingChat(false);
+                    }}
+                    className="hover:bg-black/10 p-1 rounded ml-2 cursor-pointer"
+                  >
+                    <FiX size={16} />
+                  </div>
+                </>
               ) : (
-                <p className="break-all overflow-hidden whitespace-nowrap w-full mr-3 relative">
-                  {chatName || `Chat ${chatSession.id}`}
-                  <span
-                    className={`absolute right-0 top-0 h-full w-8 bg-gradient-to-r from-transparent 
-                    ${
-                      isSelected
-                        ? "to-background-chat-selected"
-                        : "group-hover:to-background-chat-hover"
-                    } `}
-                  />
-                </p>
-              )}
-
-              {isHovering &&
-                (isRenamingChat ? (
-                  <div className="ml-auto my-auto items-center flex">
-                    <div
-                      onClick={onRename}
-                      className={`hover:bg-black/10  p-1 -m-1 rounded`}
+                <>
+                  {!showShareModal && showRetentionWarning && (
+                    <CustomTooltip
+                      line
+                      content={
+                        <p>
+                          This chat will expire{" "}
+                          {daysUntilExpiration < 1
+                            ? "today"
+                            : `in ${daysUntilExpiration} day${
+                                daysUntilExpiration !== 1 ? "s" : ""
+                              }`}
+                        </p>
+                      }
                     >
-                      <FiCheck size={16} />
-                    </div>
+                      <div className="mr-1 hover:bg-black/10 p-1 rounded cursor-pointer">
+                        <WarningCircle className="text-warning" size={16} />
+                      </div>
+                    </CustomTooltip>
+                  )}
+
+                  {search ? (
+                    showDeleteModal && (
+                      <div
+                        onClick={(e) => {
+                          e.preventDefault();
+                          showDeleteModal(chatSession);
+                        }}
+                        className="p-1 rounded ml-1 cursor-pointer hover:bg-black/10"
+                      >
+                        <FiTrash size={16} />
+                      </div>
+                    )
+                  ) : (
                     <div
-                      onClick={() => {
-                        setChatName(chatSession.name);
-                        setIsRenamingChat(false);
+                      onClick={(e) => {
+                        e.preventDefault();
+                        setIsMoreOptionsDropdownOpen(
+                          !isMoreOptionsDropdownOpen
+                        );
                       }}
-                      className={`hover:bg-black/10 p-1 -m-1 rounded ml-2`}
+                      className="-my-1 cursor-pointer"
                     >
-                      <FiX size={16} />
-                    </div>
-                  </div>
-                ) : (
-                  <div className="ml-auto my-auto justify-end flex z-30">
-                    {!showShareModal && showRetentionWarning && (
-                      <CustomTooltip
-                        line
+                      <Popover
+                        open={isMoreOptionsDropdownOpen}
+                        onOpenChange={(open: boolean) =>
+                          setIsMoreOptionsDropdownOpen(open)
+                        }
                         content={
-                          <p>
-                            This chat will expire{" "}
-                            {daysUntilExpiration < 1
-                              ? "today"
-                              : `in ${daysUntilExpiration} day${
-                                  daysUntilExpiration !== 1 ? "s" : ""
-                                }`}
-                          </p>
+                          <div className="p-1 rounded">
+                            <FiMoreHorizontal size={16} />
+                          </div>
                         }
-                      >
-                        <div className="mr-1 hover:bg-black/10 p-1 -m-1 rounded z-50">
-                          <WarningCircle className="text-warning" />
-                        </div>
-                      </CustomTooltip>
-                    )}
-                    <div>
-                      {search ? (
-                        showDeleteModal && (
-                          <div
-                            onClick={(e) => {
-                              e.preventDefault();
-                              showDeleteModal(chatSession);
-                            }}
-                            className={`p-1 -m-1 rounded ml-1`}
-                          >
-                            <FiTrash size={16} />
+                        popover={
+                          <div className="border border-[#dcdad4] rounded-lg bg-white z-50 w-32 shadow-lg">
+                            {showShareModal && (
+                              <DefaultDropdownElement
+                                name="Share"
+                                icon={FiShare2}
+                                onSelect={() => showShareModal(chatSession)}
+                              />
+                            )}
+                            {!search && (
+                              <DefaultDropdownElement
+                                name="Rename"
+                                icon={FiEdit2}
+                                onSelect={() => setIsRenamingChat(true)}
+                              />
+                            )}
+                            {showDeleteModal && (
+                              <DefaultDropdownElement
+                                name="Delete"
+                                icon={FiTrash}
+                                onSelect={() => showDeleteModal(chatSession)}
+                              />
+                            )}
                           </div>
-                        )
-                      ) : (
-                        <div
-                          onClick={(e) => {
-                            e.preventDefault();
-                            setIsMoreOptionsDropdownOpen(
-                              !isMoreOptionsDropdownOpen
-                            );
-                          }}
-                          className="-my-1"
-                        >
-                          <Popover
-                            open={isMoreOptionsDropdownOpen}
-                            onOpenChange={(open: boolean) =>
-                              setIsMoreOptionsDropdownOpen(open)
-                            }
-                            content={
-                              <div className="p-1 rounded">
-                                <FiMoreHorizontal size={16} />
-                              </div>
-                            }
-                            popover={
-                              <div className="border border-border rounded-lg bg-background z-50 w-32">
-                                {showShareModal && (
-                                  <DefaultDropdownElement
-                                    name="Share"
-                                    icon={FiShare2}
-                                    onSelect={() => showShareModal(chatSession)}
-                                  />
-                                )}
-                                {!search && (
-                                  <DefaultDropdownElement
-                                    name="Rename"
-                                    icon={FiEdit2}
-                                    onSelect={() => setIsRenamingChat(true)}
-                                  />
-                                )}
-                                {showDeleteModal && (
-                                  <DefaultDropdownElement
-                                    name="Delete"
-                                    icon={FiTrash}
-                                    onSelect={() =>
-                                      showDeleteModal(chatSession)
-                                    }
-                                  />
-                                )}
-                              </div>
-                            }
-                            requiresContentPadding
-                            sideOffset={6}
-                            triggerMaxWidth
-                          />
-                        </div>
-                      )}
+                        }
+                        requiresContentPadding
+                        sideOffset={6}
+                        triggerMaxWidth
+                      />
                     </div>
-                  </div>
-                ))}
+                  )}
+                </>
+              )}
             </div>
-          </>
-        </BasicSelectable>
+          )}
+        </div>
       </Link>
     </>
   );
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
index 88002ee005a..87fdbe53291 100644
--- a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -10,7 +10,6 @@ import { Folder } from "../folders/interfaces";
 import { createFolder } from "../folders/FolderManagement";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { SettingsContext } from "@/components/settings/SettingsProvider";
-
 import {
   AssistantsIconSkeleton,
   ClosedBookIcon,
@@ -58,19 +57,10 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
   ) => {
     const router = useRouter();
     const { popup, setPopup } = usePopup();
-
-    // For determining intial focus state
     const [newFolderId, setNewFolderId] = useState<number | null>(null);
-
     const currentChatId = currentChatSession?.id;
-
-    // NOTE: do not do something like the below - assume that the parent
-    // will handle properly refreshing the existingChats
-    // useEffect(() => {
-    //   router.refresh();
-    // }, [currentChatId]);
-
     const combinedSettings = useContext(SettingsContext);
+
     if (!combinedSettings) {
       return null;
     }
@@ -91,17 +81,14 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
         <div
           ref={ref}
           className={`
-            flex
-            flex-none
-            bg-background-sidebar
-            w-full
-            border-r 
-            border-sidebar-border 
-            flex 
-            flex-col relative
-            h-screen
-            transition-transform 
-            pt-2`}
+            flex flex-col h-screen w-full
+            bg-[#f1eee8]
+            border-r border-[#dcdad4]
+            font-['KH Teka TRIAL']
+            relative
+            pt-2
+            shadow-md
+          `}
         >
           <LogoType
             showArrow={true}
@@ -109,29 +96,27 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
             page={page}
             toggleSidebar={toggleSidebar}
             explicitlyUntoggle={explicitlyUntoggle}
+            // Customize LogoType if needed to match final design
           />
-          {page == "chat" && (
-            <div className="mx-3 mt-4 gap-y-1 flex-col text-text-history-sidebar-button flex gap-x-1.5 items-center items-center">
+
+          {page === "chat" && (
+            <div className="mx-3 mt-4 flex flex-col gap-y-2 text-black">
               <Link
-                className=" w-full p-2 bg-white border-border border rounded items-center hover:bg-background-200 cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full p-2 bg-white border border-[#dcdad4] rounded hover:bg-[#fffcf4] cursor-pointer transition-all duration-150 flex items-center gap-x-2"
                 href={
                   `/${page}` +
                   (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA &&
                   currentChatSession?.persona_id
-                    ? `?assistantId=${currentChatSession?.persona_id}`
+                    ? `?assistantId=${currentChatSession.persona_id}`
                     : "")
                 }
                 onClick={(e) => {
-                  if (e.metaKey || e.ctrlKey) {
-                    return;
-                  }
-                  if (handleNewChat) {
-                    handleNewChat();
-                  }
+                  if (e.metaKey || e.ctrlKey) return;
+                  handleNewChat();
                 }}
               >
-                <FiEdit className="flex-none text-text-history-sidebar-button" />
-                <p className="my-auto flex items-center text-sm">New Chat</p>
+                <FiEdit className="text-black" />
+                <p className="text-base font-medium leading-normal">New Chat</p>
               </Link>
               <button
                 onClick={() =>
@@ -148,33 +133,37 @@ export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
                       });
                     })
                 }
-                className="w-full p-2 bg-white border-border border rounded items-center  hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full p-2 bg-white border border-[#dcdad4] rounded hover:bg-[#fffcf4] cursor-pointer transition-all duration-150 flex items-center gap-x-2"
               >
-                <FiFolderPlus className="my-auto text-text-history-sidebar-button" />
-                <p className="my-auto flex items-center text-sm">New Folder</p>
+                <FiFolderPlus className="text-black" />
+                <p className="text-base font-medium leading-normal">
+                  New Folder
+                </p>
               </button>
 
               <Link
                 href="/assistants/mine"
-                className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full p-2 bg-white border border-[#dcdad4] rounded hover:bg-[#fffcf4] cursor-pointer transition-all duration-150 flex items-center gap-x-2"
               >
-                <AssistantsIconSkeleton className="h-4 w-4 my-auto text-text-history-sidebar-button" />
-                <p className="my-auto flex items-center text-sm">
+                <AssistantsIconSkeleton className="h-4 w-4 text-black" />
+                <p className="text-base font-medium leading-normal">
                   Manage Assistants
                 </p>
               </Link>
               <Link
                 href="/prompts"
-                className="w-full p-2 bg-white border-border border rounded items-center hover:bg-background-history-sidebar-button-hover cursor-pointer transition-all duration-150 flex gap-x-2"
+                className="w-full p-2 bg-white border border-[#dcdad4] rounded hover:bg-[#fffcf4] cursor-pointer transition-all duration-150 flex items-center gap-x-2"
               >
-                <ClosedBookIcon className="h-4 w-4 my-auto text-text-history-sidebar-button" />
-                <p className="my-auto flex items-center text-sm ">
+                <ClosedBookIcon className="h-4 w-4 text-black" />
+                <p className="text-base font-medium leading-normal">
                   Manage Prompts
                 </p>
               </Link>
             </div>
           )}
-          <div className="border-b border-divider-history-sidebar-bar pb-4 mx-3" />
+
+          <div className="border-b border-[#dcdad4] pb-4 mx-3 mt-4" />
+
           <PagesTab
             newFolderId={newFolderId}
             showDeleteModal={showDeleteModal}
diff --git a/web/src/app/chat/sessionSidebar/PagesTab.tsx b/web/src/app/chat/sessionSidebar/PagesTab.tsx
index 8879506cb60..afa10c5823d 100644
--- a/web/src/app/chat/sessionSidebar/PagesTab.tsx
+++ b/web/src/app/chat/sessionSidebar/PagesTab.tsx
@@ -34,7 +34,6 @@ export function PagesTab({
   const groupedChatSessions = existingChats
     ? groupSessionsByDateRange(existingChats)
     : [];
-
   const { setPopup } = usePopup();
   const router = useRouter();
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
@@ -43,14 +42,14 @@ export function PagesTab({
     event: React.DragEvent<HTMLDivElement>
   ) => {
     event.preventDefault();
-    setIsDragOver(false); // Reset drag over state on drop
+    setIsDragOver(false);
     const chatSessionId = event.dataTransfer.getData(CHAT_SESSION_ID_KEY);
     const folderId = event.dataTransfer.getData(FOLDER_ID_KEY);
 
     if (folderId) {
       try {
         await removeChatFromFolder(parseInt(folderId, 10), chatSessionId);
-        router.refresh(); // Refresh the page to reflect the changes
+        router.refresh();
       } catch (error) {
         setPopup({
           message: "Failed to remove chat from folder",
@@ -63,10 +62,13 @@ export function PagesTab({
   const isHistoryEmpty = !existingChats || existingChats.length === 0;
 
   return (
-    <div className="mb-1 text-text-sidebar ml-3 relative miniscroll mobile:pb-40 overflow-y-auto h-full">
+    <div
+      className="mb-1 ml-3 relative overflow-y-auto h-full pr-3 font-['KH Teka TRIAL'] text-black"
+      style={{ scrollbarGutter: "stable" }}
+    >
       {folders && folders.length > 0 && (
-        <div className="py-2 border-b border-border">
-          <div className="text-xs text-subtle flex pb-0.5 mb-1.5 mt-2 font-bold">
+        <div className="py-2 border-b border-[#dcdad4]">
+          <div className="text-xs text-[#6c6c6c] font-medium mb-1.5 mt-2">
             Chat Folders
           </div>
           <FolderList
@@ -79,6 +81,7 @@ export function PagesTab({
           />
         </div>
       )}
+
       <div
         onDragOver={(event) => {
           event.preventDefault();
@@ -86,19 +89,17 @@ export function PagesTab({
         }}
         onDragLeave={() => setIsDragOver(false)}
         onDrop={handleDropToRemoveFromFolder}
-        className={`pt-1 transition duration-300 ease-in-out mr-3 ${
-          isDragOver ? "bg-hover" : ""
-        } rounded-md`}
+        className={`pt-3 pb-40 transition duration-300 ease-in-out ${
+          isDragOver ? "bg-[#e6e3dd] rounded-md" : ""
+        }`}
       >
-        {(page == "chat" || page == "search") && (
-          <p className="my-2 text-xs text-sidebar-subtle flex font-bold">
-            {page == "chat" && "Chat "}
-            {page == "search" && "Search "}
-            History
+        {(page === "chat" || page === "search") && (
+          <p className="my-2 text-xs text-[#6c6c6c] font-medium">
+            {page === "chat" ? "Chat History" : "Search History"}
           </p>
         )}
         {isHistoryEmpty ? (
-          <p className="text-sm mt-2 w-[250px]">
+          <p className="text-sm mt-2 w-[250px] text-[#6c6c6c] font-normal">
             {page === "search"
               ? "Try running a search! Your search history will appear here."
               : "Try sending a message! Your chat history will appear here."}
@@ -106,34 +107,31 @@ export function PagesTab({
         ) : (
           Object.entries(groupedChatSessions).map(
             ([dateRange, chatSessions], ind) => {
-              if (chatSessions.length > 0) {
+              const filteredSessions = chatSessions.filter(
+                (chat) => chat.folder_id === null
+              );
+              if (filteredSessions.length > 0) {
                 return (
-                  <div key={dateRange}>
-                    <div
-                      className={`text-xs text-text-sidebar-subtle ${
-                        ind != 0 && "mt-5"
-                      } flex pb-0.5 mb-1.5 font-medium`}
-                    >
+                  <div key={dateRange} className={`${ind !== 0 ? "mt-5" : ""}`}>
+                    <div className="text-xs text-[#6c6c6c] font-medium mb-1.5">
                       {dateRange}
                     </div>
-                    {chatSessions
-                      .filter((chat) => chat.folder_id === null)
-                      .map((chat) => {
-                        const isSelected = currentChatId === chat.id;
-                        return (
-                          <div key={`${chat.id}-${chat.name}`}>
-                            <ChatSessionDisplay
-                              showDeleteModal={showDeleteModal}
-                              showShareModal={showShareModal}
-                              closeSidebar={closeSidebar}
-                              search={page == "search"}
-                              chatSession={chat}
-                              isSelected={isSelected}
-                              skipGradient={isDragOver}
-                            />
-                          </div>
-                        );
-                      })}
+                    {filteredSessions.map((chat) => {
+                      const isSelected = currentChatId === chat.id;
+                      return (
+                        <div key={`${chat.id}-${chat.name}`}>
+                          <ChatSessionDisplay
+                            showDeleteModal={showDeleteModal}
+                            showShareModal={showShareModal}
+                            closeSidebar={closeSidebar}
+                            search={page === "search"}
+                            chatSession={chat}
+                            isSelected={isSelected}
+                            skipGradient={isDragOver}
+                          />
+                        </div>
+                      );
+                    })}
                   </div>
                 );
               }
diff --git a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
index 8a58c639136..f10457733c1 100644
--- a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
+++ b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
@@ -57,7 +57,7 @@ export default function FunctionalWrapper({
   return (
     <>
       {" "}
-      <div className="overscroll-y-contain overflow-y-scroll overscroll-contain left-0 top-0 w-full h-svh">
+      <div className="overscroll-y-contain bg-[#fffcf4] overflow-y-scroll overscroll-contain left-0 top-0 w-full h-svh">
         {content(toggledSidebar, toggle)}
       </div>
     </>