From 87fadb07eabf9983a5e6cf48f61245d04d0fb2d1 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Wed, 17 Jul 2024 19:44:21 -0700
Subject: [PATCH] COMPLETE USER EXPERIENCE OVERHAUL (#1822)

---
 ...f07c00_add_search_doc_relevance_details.py |   32 +
 backend/danswer/chat/models.py                |   10 +-
 backend/danswer/configs/chat_configs.py       |   11 +
 backend/danswer/db/chat.py                    |   85 +-
 backend/danswer/db/models.py                  |    3 +
 backend/danswer/llm/answering/answer.py       |   43 +-
 .../danswer/llm/answering/prune_and_merge.py  |    1 +
 .../one_shot_answer/answer_question.py        |   37 +-
 backend/danswer/one_shot_answer/models.py     |    7 +
 .../danswer/prompts/miscellaneous_prompts.py  |   19 +
 backend/danswer/search/models.py              |    5 +
 backend/danswer/search/pipeline.py            |   48 +-
 .../secondary_llm_flows/agentic_evaluation.py |   71 +
 .../server/query_and_chat/chat_backend.py     |    1 -
 .../danswer/server/query_and_chat/models.py   |    9 +-
 .../server/query_and_chat/query_backend.py    |  114 +-
 backend/danswer/tools/search/search_tool.py   |   31 +-
 .../danswer/utils/threadpool_concurrency.py   |    1 +
 .../regression/answer_quality/__init__.py     |    0
 backend/throttle.ctrl                         |    2 +-
 .../docker_compose/docker-compose.dev.yml     |    2 +
 .../app/admin/assistants/AssistantEditor.tsx  |    4 +-
 .../admin/assistants/CollapsibleSection.tsx   |    4 +-
 web/src/app/admin/assistants/new/page.tsx     |    2 +-
 web/src/app/admin/assistants/page.tsx         |    4 +-
 web/src/app/admin/bot/page.tsx                |    2 +-
 .../app/admin/connectors/gmail/Credential.tsx |    2 +-
 .../connectors/google-drive/Credential.tsx    |    2 +-
 .../models/embedding/CloudEmbeddingPage.tsx   |    8 +-
 web/src/app/admin/models/embedding/page.tsx   |   17 +-
 web/src/app/admin/models/llm/page.tsx         |    3 +-
 web/src/app/admin/settings/page.tsx           |    3 +-
 web/src/app/admin/token-rate-limits/page.tsx  |    7 +-
 .../app/admin/tools/edit/[toolId]/page.tsx    |    3 +-
 web/src/app/admin/tools/new/page.tsx          |    3 +-
 web/src/app/admin/tools/page.tsx              |    3 +-
 web/src/app/assistants/SidebarWrapper.tsx     |  148 ++
 web/src/app/assistants/ToolsDisplay.tsx       |    1 +
 .../gallery/WrappedAssistantsGallery.tsx      |   44 +
 web/src/app/assistants/gallery/page.tsx       |   37 +-
 .../assistants/mine/WrappedAssistantsMine.tsx |   43 +
 web/src/app/assistants/mine/page.tsx          |   38 +-
 web/src/app/auth/login/SignInButton.tsx       |    2 +-
 web/src/app/chat/ChatBanner.tsx               |    2 +-
 web/src/app/chat/ChatIntro.tsx                |    6 +-
 web/src/app/chat/ChatPage.tsx                 |  963 +++++-----
 web/src/app/chat/WrappedChat.tsx              |   26 +
 .../documentSidebar/ChatDocumentDisplay.tsx   |   41 +-
 .../chat/documentSidebar/DocumentSelector.tsx |    3 +-
 .../chat/documentSidebar/DocumentSidebar.tsx  |  157 +-
 web/src/app/chat/files/InputBarPreview.tsx    |  117 +-
 .../chat/files/documents/DocumentPreview.tsx  |   75 +-
 .../app/chat/files/images/InMessageImage.tsx  |    9 +-
 .../files/images/InputBarPreviewImage.tsx     |   18 +-
 web/src/app/chat/folders/FolderList.tsx       |   93 +-
 web/src/app/chat/input/ChatInputAssistant.tsx |   52 +
 web/src/app/chat/input/ChatInputBar.tsx       |  268 +--
 web/src/app/chat/input/ChatInputOption.tsx    |  162 +-
 web/src/app/chat/interfaces.ts                |   20 +-
 web/src/app/chat/lib.tsx                      |   15 +-
 web/src/app/chat/message/Messages.tsx         |  849 +++++----
 web/src/app/chat/message/SearchSummary.tsx    |   36 +-
 web/src/app/chat/message/SkippedSearch.tsx    |    4 +-
 web/src/app/chat/message/hooks.ts             |   38 +
 web/src/app/chat/modal/FeedbackModal.tsx      |   17 +-
 .../modal/configuration/AssistantsTab.tsx     |   12 +-
 .../configuration/ConfigurationModal.tsx      |    2 +
 .../app/chat/modal/configuration/LlmTab.tsx   |  212 +--
 web/src/app/chat/page.tsx                     |   12 +-
 web/src/app/chat/searchParams.ts              |    1 +
 .../app/chat/sessionSidebar/AssistantsTab.tsx |    4 +-
 .../sessionSidebar/ChatSessionDisplay.tsx     |   12 +-
 .../app/chat/sessionSidebar/ChatSidebar.tsx   |  164 --
 .../chat/sessionSidebar/HistorySidebar.tsx    |  185 ++
 .../{ChatTab.tsx => PagesTab.tsx}             |   38 +-
 .../app/chat/shared_chat_search/FixedLogo.tsx |   25 +
 .../shared_chat_search/FunctionalWrapper.tsx  |  143 ++
 web/src/app/ee/admin/groups/page.tsx          |    2 +-
 .../admin/whitelabeling/WhitelabelingForm.tsx |    1 +
 web/src/app/ee/admin/whitelabeling/page.tsx   |    4 +-
 web/src/app/globals.css                       |   88 +-
 web/src/app/layout.tsx                        |    3 +-
 web/src/app/search/WrappedSearch.tsx          |   51 +
 web/src/app/search/page.tsx                   |   55 +-
 web/src/components/BasicClickable.tsx         |   45 +-
 web/src/components/CopyButton.tsx             |    7 +-
 web/src/components/CustomCheckbox.tsx         |   12 +-
 .../components/DanswerInitializingLoader.tsx  |    2 +-
 web/src/components/Dropdown.tsx               |  160 +-
 web/src/components/Hoverable.tsx              |   15 +
 web/src/components/UserDropdown.tsx           |   64 +-
 web/src/components/admin/Layout.tsx           |   86 +-
 web/src/components/admin/Title.tsx            |    2 +-
 .../admin/connectors/AdminSidebar.tsx         |   54 +-
 web/src/components/admin/connectors/Field.tsx |    6 +-
 .../components/assistants/AssistantIcon.tsx   |   30 +-
 web/src/components/chat_search/Header.tsx     |  112 ++
 web/src/components/chat_search/hooks.ts       |   57 +
 web/src/components/header/Header.tsx          |   31 +-
 web/src/components/health/healthcheck.tsx     |    6 +-
 web/src/components/icons/icons.tsx            | 1553 ++++++++++++++++-
 web/src/components/popup/Popup.tsx            |  107 ++
 .../components/resizable/ResizableSection.tsx |   20 +-
 web/src/components/resizable/contants.ts      |    1 +
 web/src/components/search/DocumentDisplay.tsx |  282 ++-
 .../search/DocumentFeedbackBlock.tsx          |   28 +-
 web/src/components/search/SearchBar.tsx       |  226 +++
 .../search/SearchResultsDisplay.tsx           |  310 +++-
 web/src/components/search/SearchSection.tsx   |  461 ++++-
 .../components/search/filtering/Filters.tsx   |   20 +-
 .../components/search/results/Citation.tsx    |   55 +
 .../search/results/QuotesSection.tsx          |    9 -
 web/src/components/tooltip/CustomTooltip.tsx  |  135 ++
 web/src/components/tooltip/Tooltip.tsx        |    7 +-
 web/src/lib/browserUtilities.tsx              |   32 +
 web/src/lib/chat/fetchChatData.ts             |   15 +-
 web/src/lib/constants.ts                      |    4 +
 web/src/lib/documentUtils.ts                  |   12 +-
 web/src/lib/search/interfaces.ts              |   37 +-
 web/src/lib/search/streamingQa.ts             |   41 +-
 web/src/lib/sources.ts                        |    4 +-
 web/tailwind-themes/tailwind.config.js        |   73 +-
 122 files changed, 6814 insertions(+), 2204 deletions(-)
 create mode 100644 backend/alembic/versions/05c07bf07c00_add_search_doc_relevance_details.py
 create mode 100644 backend/danswer/secondary_llm_flows/agentic_evaluation.py
 create mode 100644 backend/tests/regression/answer_quality/__init__.py
 create mode 100644 web/src/app/assistants/SidebarWrapper.tsx
 create mode 100644 web/src/app/assistants/gallery/WrappedAssistantsGallery.tsx
 create mode 100644 web/src/app/assistants/mine/WrappedAssistantsMine.tsx
 create mode 100644 web/src/app/chat/WrappedChat.tsx
 create mode 100644 web/src/app/chat/input/ChatInputAssistant.tsx
 create mode 100644 web/src/app/chat/message/hooks.ts
 delete mode 100644 web/src/app/chat/sessionSidebar/ChatSidebar.tsx
 create mode 100644 web/src/app/chat/sessionSidebar/HistorySidebar.tsx
 rename web/src/app/chat/sessionSidebar/{ChatTab.tsx => PagesTab.tsx} (75%)
 create mode 100644 web/src/app/chat/shared_chat_search/FixedLogo.tsx
 create mode 100644 web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
 create mode 100644 web/src/app/search/WrappedSearch.tsx
 create mode 100644 web/src/components/chat_search/Header.tsx
 create mode 100644 web/src/components/chat_search/hooks.ts
 create mode 100644 web/src/components/popup/Popup.tsx
 create mode 100644 web/src/components/search/results/Citation.tsx
 create mode 100644 web/src/components/tooltip/CustomTooltip.tsx
 create mode 100644 web/src/lib/browserUtilities.tsx

diff --git a/backend/alembic/versions/05c07bf07c00_add_search_doc_relevance_details.py b/backend/alembic/versions/05c07bf07c00_add_search_doc_relevance_details.py
new file mode 100644
index 0000000000..2049bebfcf
--- /dev/null
+++ b/backend/alembic/versions/05c07bf07c00_add_search_doc_relevance_details.py
@@ -0,0 +1,32 @@
+"""add search doc relevance details
+
+Revision ID: 05c07bf07c00
+Revises: 3a7802814195
+Create Date: 2024-07-10 17:48:15.886653
+
+"""
+
+from alembic import op
+import sqlalchemy as sa
+
+# revision identifiers, used by Alembic.
+revision = "05c07bf07c00"
+down_revision = "b896bbd0d5a7"
+branch_labels = None
+depends_on = None
+
+
+def upgrade() -> None:
+    op.add_column(
+        "search_doc",
+        sa.Column("is_relevant", sa.Boolean(), nullable=True),
+    )
+    op.add_column(
+        "search_doc",
+        sa.Column("relevance_explanation", sa.String(), nullable=True),
+    )
+
+
+def downgrade() -> None:
+    op.drop_column("search_doc", "relevance_explanation")
+    op.drop_column("search_doc", "is_relevant")
diff --git a/backend/danswer/chat/models.py b/backend/danswer/chat/models.py
index 7fc526a5cb..1fb8586f02 100644
--- a/backend/danswer/chat/models.py
+++ b/backend/danswer/chat/models.py
@@ -42,11 +42,19 @@ class QADocsResponse(RetrievalDocs):
         return initial_dict
 
 
-# Second chunk of info for streaming QA
 class LLMRelevanceFilterResponse(BaseModel):
     relevant_chunk_indices: list[int]
 
 
+class RelevanceChunk(BaseModel):
+    relevant: bool | None = None
+    content: str | None = None
+
+
+class LLMRelevanceSummaryResponse(BaseModel):
+    relevance_summaries: dict[str, RelevanceChunk]
+
+
 class DanswerAnswerPiece(BaseModel):
     # A small piece of a complete answer. Used for streaming back answers.
     answer_piece: str | None  # if None, specifies the end of an Answer
diff --git a/backend/danswer/configs/chat_configs.py b/backend/danswer/configs/chat_configs.py
index 3595480e22..0d8aadb6fb 100644
--- a/backend/danswer/configs/chat_configs.py
+++ b/backend/danswer/configs/chat_configs.py
@@ -75,6 +75,17 @@ LANGUAGE_CHAT_NAMING_HINT = (
     or "The name of the conversation must be in the same language as the user query."
 )
 
+
+# Agentic search takes significantly more tokens and therefore has much higher cost.
+# This configuration allows users to get a search-only experience with instant results
+# and no involvement from the LLM.
+# Additionally, some LLM providers have strict rate limits which may prohibit
+# sending many API requests at once (as is done in agentic search).
+DISABLE_AGENTIC_SEARCH = (
+    os.environ.get("DISABLE_AGENTIC_SEARCH") or "false"
+).lower() == "true"
+
+
 # Stops streaming answers back to the UI if this pattern is seen:
 STOP_STREAM_PAT = os.environ.get("STOP_STREAM_PAT") or None
 
diff --git a/backend/danswer/db/chat.py b/backend/danswer/db/chat.py
index e2208266c8..d3650eed30 100644
--- a/backend/danswer/db/chat.py
+++ b/backend/danswer/db/chat.py
@@ -3,15 +3,20 @@ from datetime import datetime
 from datetime import timedelta
 from uuid import UUID
 
+from sqlalchemy import and_
 from sqlalchemy import delete
+from sqlalchemy import desc
+from sqlalchemy import func
 from sqlalchemy import nullsfirst
 from sqlalchemy import or_
 from sqlalchemy import select
+from sqlalchemy import update
 from sqlalchemy.exc import MultipleResultsFound
 from sqlalchemy.orm import joinedload
 from sqlalchemy.orm import Session
 
 from danswer.auth.schemas import UserRole
+from danswer.chat.models import LLMRelevanceSummaryResponse
 from danswer.configs.chat_configs import HARD_DELETE_CHATS
 from danswer.configs.constants import MessageType
 from danswer.db.models import ChatMessage
@@ -34,6 +39,7 @@ from danswer.server.query_and_chat.models import ChatMessageDetail
 from danswer.tools.tool_runner import ToolCallFinalResult
 from danswer.utils.logger import setup_logger
 
+
 logger = setup_logger()
 
 
@@ -81,17 +87,46 @@ def get_chat_sessions_by_slack_thread_id(
     return db_session.scalars(stmt).all()
 
 
+def get_first_messages_for_chat_sessions(
+    chat_session_ids: list[int], db_session: Session
+) -> dict[int, str]:
+    subquery = (
+        select(ChatMessage.chat_session_id, func.min(ChatMessage.id).label("min_id"))
+        .where(
+            and_(
+                ChatMessage.chat_session_id.in_(chat_session_ids),
+                ChatMessage.message_type == MessageType.USER,  # Select USER messages
+            )
+        )
+        .group_by(ChatMessage.chat_session_id)
+        .subquery()
+    )
+
+    query = select(ChatMessage.chat_session_id, ChatMessage.message).join(
+        subquery,
+        (ChatMessage.chat_session_id == subquery.c.chat_session_id)
+        & (ChatMessage.id == subquery.c.min_id),
+    )
+
+    first_messages = db_session.execute(query).all()
+    return dict([(row.chat_session_id, row.message) for row in first_messages])
+
+
 def get_chat_sessions_by_user(
     user_id: UUID | None,
     deleted: bool | None,
     db_session: Session,
-    include_one_shot: bool = False,
+    only_one_shot: bool = False,
 ) -> list[ChatSession]:
     stmt = select(ChatSession).where(ChatSession.user_id == user_id)
 
-    if not include_one_shot:
+    if only_one_shot:
+        stmt = stmt.where(ChatSession.one_shot.is_(True))
+    else:
         stmt = stmt.where(ChatSession.one_shot.is_(False))
 
+    stmt = stmt.order_by(desc(ChatSession.time_created))
+
     if deleted is not None:
         stmt = stmt.where(ChatSession.deleted == deleted)
 
@@ -275,6 +310,20 @@ def get_chat_messages_by_sessions(
     return db_session.execute(stmt).scalars().all()
 
 
+def get_search_docs_for_chat_message(
+    chat_message_id: int, db_session: Session
+) -> list[SearchDoc]:
+    stmt = (
+        select(SearchDoc)
+        .join(
+            ChatMessage__SearchDoc, ChatMessage__SearchDoc.search_doc_id == SearchDoc.id
+        )
+        .where(ChatMessage__SearchDoc.chat_message_id == chat_message_id)
+    )
+
+    return list(db_session.scalars(stmt).all())
+
+
 def get_chat_messages_by_session(
     chat_session_id: int,
     user_id: UUID | None,
@@ -295,8 +344,6 @@ def get_chat_messages_by_session(
 
     if prefetch_tool_calls:
         stmt = stmt.options(joinedload(ChatMessage.tool_calls))
-
-    if prefetch_tool_calls:
         result = db_session.scalars(stmt).unique().all()
     else:
         result = db_session.scalars(stmt).all()
@@ -484,6 +531,27 @@ def get_doc_query_identifiers_from_model(
     return doc_query_identifiers
 
 
+def update_search_docs_table_with_relevance(
+    db_session: Session,
+    reference_db_search_docs: list[SearchDoc],
+    relevance_summary: LLMRelevanceSummaryResponse,
+) -> None:
+    for search_doc in reference_db_search_docs:
+        relevance_data = relevance_summary.relevance_summaries.get(
+            f"{search_doc.document_id}-{search_doc.chunk_ind}"
+        )
+        if relevance_data is not None:
+            db_session.execute(
+                update(SearchDoc)
+                .where(SearchDoc.id == search_doc.id)
+                .values(
+                    is_relevant=relevance_data.relevant,
+                    relevance_explanation=relevance_data.content,
+                )
+            )
+    db_session.commit()
+
+
 def create_db_search_doc(
     server_search_doc: ServerSearchDoc,
     db_session: Session,
@@ -498,6 +566,8 @@ def create_db_search_doc(
         boost=server_search_doc.boost,
         hidden=server_search_doc.hidden,
         doc_metadata=server_search_doc.metadata,
+        is_relevant=server_search_doc.is_relevant,
+        relevance_explanation=server_search_doc.relevance_explanation,
         # For docs further down that aren't reranked, we can't use the retrieval score
         score=server_search_doc.score or 0.0,
         match_highlights=server_search_doc.match_highlights,
@@ -509,7 +579,6 @@ def create_db_search_doc(
 
     db_session.add(db_search_doc)
     db_session.commit()
-
     return db_search_doc
 
 
@@ -538,6 +607,8 @@ def translate_db_search_doc_to_server_search_doc(
         match_highlights=(
             db_search_doc.match_highlights if not remove_doc_content else []
         ),
+        relevance_explanation=db_search_doc.relevance_explanation,
+        is_relevant=db_search_doc.is_relevant,
         updated_at=db_search_doc.updated_at if not remove_doc_content else None,
         primary_owners=db_search_doc.primary_owners if not remove_doc_content else [],
         secondary_owners=(
@@ -561,9 +632,11 @@ def get_retrieval_docs_from_chat_message(
 
 
 def translate_db_message_to_chat_message_detail(
-    chat_message: ChatMessage, remove_doc_content: bool = False
+    chat_message: ChatMessage,
+    remove_doc_content: bool = False,
 ) -> ChatMessageDetail:
     chat_msg_detail = ChatMessageDetail(
+        chat_session_id=chat_message.chat_session_id,
         message_id=chat_message.id,
         parent_message=chat_message.parent_message,
         latest_child_message=chat_message.latest_child_message,
diff --git a/backend/danswer/db/models.py b/backend/danswer/db/models.py
index 66a68a4732..2666ed96c2 100644
--- a/backend/danswer/db/models.py
+++ b/backend/danswer/db/models.py
@@ -671,6 +671,9 @@ class SearchDoc(Base):
     )
     is_internet: Mapped[bool] = mapped_column(Boolean, default=False, nullable=True)
 
+    is_relevant: Mapped[bool | None] = mapped_column(Boolean, nullable=True)
+    relevance_explanation: Mapped[str | None] = mapped_column(String, nullable=True)
+
     chat_messages = relationship(
         "ChatMessage",
         secondary="chat_message__search_doc",
diff --git a/backend/danswer/llm/answering/answer.py b/backend/danswer/llm/answering/answer.py
index 3daca91e00..b59dee5a46 100644
--- a/backend/danswer/llm/answering/answer.py
+++ b/backend/danswer/llm/answering/answer.py
@@ -89,6 +89,9 @@ def _get_answer_stream_processor(
 AnswerStream = Iterator[AnswerQuestionPossibleReturn | ToolCallKickoff | ToolResponse]
 
 
+logger = setup_logger()
+
+
 class Answer:
     def __init__(
         self,
@@ -112,6 +115,7 @@ class Answer:
         skip_explicit_tool_calling: bool = False,
         # Returns the full document sections text from the search tool
         return_contexts: bool = False,
+        skip_gen_ai_answer_generation: bool = False,
     ) -> None:
         if single_message_history and message_history:
             raise ValueError(
@@ -140,11 +144,12 @@ class Answer:
         self._final_prompt: list[BaseMessage] | None = None
 
         self._streamed_output: list[str] | None = None
-        self._processed_stream: list[
-            AnswerQuestionPossibleReturn | ToolResponse | ToolCallKickoff
-        ] | None = None
+        self._processed_stream: (
+            list[AnswerQuestionPossibleReturn | ToolResponse | ToolCallKickoff] | None
+        ) = None
 
         self._return_contexts = return_contexts
+        self.skip_gen_ai_answer_generation = skip_gen_ai_answer_generation
 
     def _update_prompt_builder_for_search_tool(
         self, prompt_builder: AnswerPromptBuilder, final_context_documents: list[LlmDoc]
@@ -403,8 +408,9 @@ class Answer:
                     )
                 )
             )
+        final = tool_runner.tool_final_result()
 
-        yield tool_runner.tool_final_result()
+        yield final
 
         prompt = prompt_builder.build()
         yield from message_generator_to_string_generator(self.llm.stream(prompt=prompt))
@@ -467,22 +473,23 @@ class Answer:
                     # assumes all tool responses will come first, then the final answer
                     break
 
-            process_answer_stream_fn = _get_answer_stream_processor(
-                context_docs=final_context_docs or [],
-                # if doc selection is enabled, then search_results will be None,
-                # so we need to use the final_context_docs
-                doc_id_to_rank_map=map_document_id_order(
-                    search_results or final_context_docs or []
-                ),
-                answer_style_configs=self.answer_style_config,
-            )
+            if not self.skip_gen_ai_answer_generation:
+                process_answer_stream_fn = _get_answer_stream_processor(
+                    context_docs=final_context_docs or [],
+                    # if doc selection is enabled, then search_results will be None,
+                    # so we need to use the final_context_docs
+                    doc_id_to_rank_map=map_document_id_order(
+                        search_results or final_context_docs or []
+                    ),
+                    answer_style_configs=self.answer_style_config,
+                )
 
-            def _stream() -> Iterator[str]:
-                if message:
-                    yield cast(str, message)
-                yield from cast(Iterator[str], stream)
+                def _stream() -> Iterator[str]:
+                    if message:
+                        yield cast(str, message)
+                    yield from cast(Iterator[str], stream)
 
-            yield from process_answer_stream_fn(_stream())
+                yield from process_answer_stream_fn(_stream())
 
         processed_stream = []
         for processed_packet in _process_stream(output_generator):
diff --git a/backend/danswer/llm/answering/prune_and_merge.py b/backend/danswer/llm/answering/prune_and_merge.py
index 3fee5266d8..b7206a1ac2 100644
--- a/backend/danswer/llm/answering/prune_and_merge.py
+++ b/backend/danswer/llm/answering/prune_and_merge.py
@@ -265,6 +265,7 @@ def prune_sections(
         max_tokens=document_pruning_config.max_tokens,
         tool_token_count=document_pruning_config.tool_num_tokens,
     )
+
     return _apply_pruning(
         sections=sections,
         section_relevance_list=section_relevance_list,
diff --git a/backend/danswer/one_shot_answer/answer_question.py b/backend/danswer/one_shot_answer/answer_question.py
index 8767bc03ab..1bdbc48c6b 100644
--- a/backend/danswer/one_shot_answer/answer_question.py
+++ b/backend/danswer/one_shot_answer/answer_question.py
@@ -10,6 +10,7 @@ from danswer.chat.models import DanswerAnswerPiece
 from danswer.chat.models import DanswerContexts
 from danswer.chat.models import DanswerQuotes
 from danswer.chat.models import LLMRelevanceFilterResponse
+from danswer.chat.models import LLMRelevanceSummaryResponse
 from danswer.chat.models import QADocsResponse
 from danswer.chat.models import StreamingError
 from danswer.configs.chat_configs import MAX_CHUNKS_FED_TO_CHAT
@@ -21,6 +22,7 @@ from danswer.db.chat import create_new_chat_message
 from danswer.db.chat import get_or_create_root_message
 from danswer.db.chat import translate_db_message_to_chat_message_detail
 from danswer.db.chat import translate_db_search_doc_to_server_search_doc
+from danswer.db.chat import update_search_docs_table_with_relevance
 from danswer.db.engine import get_session_context_manager
 from danswer.db.models import User
 from danswer.db.persona import get_prompt_by_id
@@ -48,6 +50,7 @@ from danswer.server.query_and_chat.models import ChatMessageDetail
 from danswer.server.utils import get_json_line
 from danswer.tools.force import ForceUseTool
 from danswer.tools.search.search_tool import SEARCH_DOC_CONTENT_ID
+from danswer.tools.search.search_tool import SEARCH_EVALUATION_ID
 from danswer.tools.search.search_tool import SEARCH_RESPONSE_SUMMARY_ID
 from danswer.tools.search.search_tool import SearchResponseSummary
 from danswer.tools.search.search_tool import SearchTool
@@ -57,6 +60,7 @@ from danswer.tools.tool_runner import ToolCallKickoff
 from danswer.utils.logger import setup_logger
 from danswer.utils.timing import log_generator_function_time
 
+
 logger = setup_logger()
 
 AnswerObjectIterator = Iterator[
@@ -70,6 +74,7 @@ AnswerObjectIterator = Iterator[
     | ChatMessageDetail
     | CitationInfo
     | ToolCallKickoff
+    | LLMRelevanceSummaryResponse
 ]
 
 
@@ -88,8 +93,9 @@ def stream_answer_objects(
     bypass_acl: bool = False,
     use_citations: bool = False,
     danswerbot_flow: bool = False,
-    retrieval_metrics_callback: Callable[[RetrievalMetricsContainer], None]
-    | None = None,
+    retrieval_metrics_callback: (
+        Callable[[RetrievalMetricsContainer], None] | None
+    ) = None,
     rerank_metrics_callback: Callable[[RerankMetricsContainer], None] | None = None,
 ) -> AnswerObjectIterator:
     """Streams in order:
@@ -127,6 +133,7 @@ def stream_answer_objects(
         user_query=query_msg.message,
         history_str=history_str,
     )
+
     # Given back ahead of the documents for latency reasons
     # In chat flow it's given back along with the documents
     yield QueryRephrase(rephrased_query=rephrased_query)
@@ -182,6 +189,7 @@ def stream_answer_objects(
         chunks_below=query_req.chunks_below,
         full_doc=query_req.full_doc,
         bypass_acl=bypass_acl,
+        evaluate_response=query_req.evaluate_response,
     )
 
     answer_config = AnswerStyleConfig(
@@ -189,6 +197,7 @@ def stream_answer_objects(
         quotes_config=QuotesConfig() if not use_citations else None,
         document_pruning_config=document_pruning_config,
     )
+
     answer = Answer(
         question=query_msg.message,
         answer_style_config=answer_config,
@@ -204,12 +213,16 @@ def stream_answer_objects(
         # tested quotes with tool calling too much yet
         skip_explicit_tool_calling=True,
         return_contexts=query_req.return_contexts,
+        skip_gen_ai_answer_generation=query_req.skip_gen_ai_answer_generation,
     )
+
     # won't be any ImageGenerationDisplay responses since that tool is never passed in
     dropped_inds: list[int] = []
+
     for packet in cast(AnswerObjectIterator, answer.processed_streamed_output):
         # for one-shot flow, don't currently do anything with these
         if isinstance(packet, ToolResponse):
+            # (likely fine that it comes after the initial creation of the search docs)
             if packet.id == SEARCH_RESPONSE_SUMMARY_ID:
                 search_response_summary = cast(SearchResponseSummary, packet.response)
 
@@ -242,6 +255,7 @@ def stream_answer_objects(
                     recency_bias_multiplier=search_response_summary.recency_bias_multiplier,
                 )
                 yield initial_response
+
             elif packet.id == SECTION_RELEVANCE_LIST_ID:
                 chunk_indices = packet.response
 
@@ -253,8 +267,21 @@ def stream_answer_objects(
                     )
 
                 yield LLMRelevanceFilterResponse(relevant_chunk_indices=packet.response)
+
             elif packet.id == SEARCH_DOC_CONTENT_ID:
                 yield packet.response
+
+            elif packet.id == SEARCH_EVALUATION_ID:
+                evaluation_response = LLMRelevanceSummaryResponse(
+                    relevance_summaries=packet.response
+                )
+                if reference_db_search_docs is not None:
+                    update_search_docs_table_with_relevance(
+                        db_session=db_session,
+                        reference_db_search_docs=reference_db_search_docs,
+                        relevance_summary=evaluation_response,
+                    )
+                yield evaluation_response
         else:
             yield packet
 
@@ -275,7 +302,6 @@ def stream_answer_objects(
     msg_detail_response = translate_db_message_to_chat_message_detail(
         gen_ai_response_message
     )
-
     yield msg_detail_response
 
 
@@ -309,8 +335,9 @@ def get_search_answer(
     bypass_acl: bool = False,
     use_citations: bool = False,
     danswerbot_flow: bool = False,
-    retrieval_metrics_callback: Callable[[RetrievalMetricsContainer], None]
-    | None = None,
+    retrieval_metrics_callback: (
+        Callable[[RetrievalMetricsContainer], None] | None
+    ) = None,
     rerank_metrics_callback: Callable[[RerankMetricsContainer], None] | None = None,
 ) -> OneShotQAResponse:
     """Collects the streamed one shot answer responses into a single object"""
diff --git a/backend/danswer/one_shot_answer/models.py b/backend/danswer/one_shot_answer/models.py
index 8681991643..e0b978a0b1 100644
--- a/backend/danswer/one_shot_answer/models.py
+++ b/backend/danswer/one_shot_answer/models.py
@@ -27,12 +27,19 @@ class DirectQARequest(ChunkContext):
     messages: list[ThreadMessage]
     prompt_id: int | None
     persona_id: int
+    agentic: bool | None = None
     retrieval_options: RetrievalDetails = Field(default_factory=RetrievalDetails)
     # This is to forcibly skip (or run) the step, if None it uses the system defaults
     skip_rerank: bool | None = None
     skip_llm_chunk_filter: bool | None = None
     chain_of_thought: bool = False
     return_contexts: bool = False
+    # This is to toggle agentic evaluation:
+    # 1. Evaluates whether each response is relevant or not
+    # 2. Provides a summary of the document's relevance in the resulsts
+    evaluate_response: bool = False
+    # If True, skips generative an AI response to the search query
+    skip_gen_ai_answer_generation: bool = False
 
     @root_validator
     def check_chain_of_thought_and_prompt_id(
diff --git a/backend/danswer/prompts/miscellaneous_prompts.py b/backend/danswer/prompts/miscellaneous_prompts.py
index 81ae516432..c57fe73acc 100644
--- a/backend/danswer/prompts/miscellaneous_prompts.py
+++ b/backend/danswer/prompts/miscellaneous_prompts.py
@@ -24,6 +24,25 @@ Query:
 """.strip()
 
 
+AGENTIC_SEARCH_EVALUATION_PROMPT = """
+1. Chain of Thought Analysis:
+Provide a chain of thought analysis considering:
+- The main purpose and content of the document
+- What the user is searching for
+- How the document's topic relates to the query
+- Potential uses of the document for the given query
+Be thorough, but avoid unnecessary repetition. Think step by step.
+
+2. Useful Analysis:
+[ANALYSIS_START]
+State the most important point from the chain of thought.
+DO NOT refer to "the document" (describe it as "this")- ONLY state the core point in a description.
+[ANALYSIS_END]
+
+3. Relevance Determination:
+RESULT: True (if potentially relevant)
+RESULT: False (if not relevant)
+""".strip()
 # Use the following for easy viewing of prompts
 if __name__ == "__main__":
     print(LANGUAGE_REPHRASE_PROMPT)
diff --git a/backend/danswer/search/models.py b/backend/danswer/search/models.py
index a94b9f63da..8c675ae5c7 100644
--- a/backend/danswer/search/models.py
+++ b/backend/danswer/search/models.py
@@ -130,11 +130,14 @@ class InferenceChunk(BaseChunk):
     recency_bias: float
     score: float | None
     hidden: bool
+    is_relevant: bool | None = None
+    relevance_explanation: str | None = None
     metadata: dict[str, str | list[str]]
     # Matched sections in the chunk. Uses Vespa syntax e.g. <hi>TEXT</hi>
     # to specify that a set of words should be highlighted. For example:
     # ["<hi>the</hi> <hi>answer</hi> is 42", "he couldn't find an <hi>answer</hi>"]
     match_highlights: list[str]
+
     # when the doc was last updated
     updated_at: datetime | None
     primary_owners: list[str] | None = None
@@ -227,6 +230,8 @@ class SearchDoc(BaseModel):
     hidden: bool
     metadata: dict[str, str | list[str]]
     score: float | None
+    is_relevant: bool | None = None
+    relevance_explanation: str | None = None
     # Matched sections in the doc. Uses Vespa syntax e.g. <hi>TEXT</hi>
     # to specify that a set of words should be highlighted. For example:
     # ["<hi>the</hi> <hi>answer</hi> is 42", "the answer is <hi>42</hi>""]
diff --git a/backend/danswer/search/pipeline.py b/backend/danswer/search/pipeline.py
index 2d990c15a3..4f9a2880df 100644
--- a/backend/danswer/search/pipeline.py
+++ b/backend/danswer/search/pipeline.py
@@ -5,10 +5,14 @@ from typing import cast
 
 from sqlalchemy.orm import Session
 
+from danswer.chat.models import RelevanceChunk
+from danswer.configs.chat_configs import DISABLE_AGENTIC_SEARCH
 from danswer.configs.chat_configs import MULTILINGUAL_QUERY_EXPANSION
 from danswer.db.embedding_model import get_current_db_embedding_model
 from danswer.db.models import User
 from danswer.document_index.factory import get_default_document_index
+from danswer.llm.answering.models import DocumentPruningConfig
+from danswer.llm.answering.models import PromptConfig
 from danswer.llm.answering.prune_and_merge import ChunkRange
 from danswer.llm.answering.prune_and_merge import merge_chunk_intervals
 from danswer.llm.interfaces import LLM
@@ -25,7 +29,10 @@ from danswer.search.postprocessing.postprocessing import search_postprocessing
 from danswer.search.preprocessing.preprocessing import retrieval_preprocessing
 from danswer.search.retrieval.search_runner import retrieve_chunks
 from danswer.search.utils import inference_section_from_chunks
+from danswer.secondary_llm_flows.agentic_evaluation import evaluate_inference_section
 from danswer.utils.logger import setup_logger
+from danswer.utils.threadpool_concurrency import FunctionCall
+from danswer.utils.threadpool_concurrency import run_functions_in_parallel
 from danswer.utils.threadpool_concurrency import run_functions_tuples_in_parallel
 
 logger = setup_logger()
@@ -40,9 +47,12 @@ class SearchPipeline:
         fast_llm: LLM,
         db_session: Session,
         bypass_acl: bool = False,  # NOTE: VERY DANGEROUS, USE WITH CAUTION
-        retrieval_metrics_callback: Callable[[RetrievalMetricsContainer], None]
-        | None = None,
+        retrieval_metrics_callback: (
+            Callable[[RetrievalMetricsContainer], None] | None
+        ) = None,
         rerank_metrics_callback: Callable[[RerankMetricsContainer], None] | None = None,
+        prompt_config: PromptConfig | None = None,
+        pruning_config: DocumentPruningConfig | None = None,
     ):
         self.search_request = search_request
         self.user = user
@@ -58,6 +68,8 @@ class SearchPipeline:
             primary_index_name=self.embedding_model.index_name,
             secondary_index_name=None,
         )
+        self.prompt_config: PromptConfig | None = prompt_config
+        self.pruning_config: DocumentPruningConfig | None = pruning_config
 
         # Preprocessing steps generate this
         self._search_query: SearchQuery | None = None
@@ -74,9 +86,9 @@ class SearchPipeline:
         self._relevant_section_indices: list[int] | None = None
 
         # Generates reranked chunks and LLM selections
-        self._postprocessing_generator: Iterator[
-            list[InferenceSection] | list[int]
-        ] | None = None
+        self._postprocessing_generator: (
+            Iterator[list[InferenceSection] | list[int]] | None
+        ) = None
 
     """Pre-processing"""
 
@@ -323,6 +335,32 @@ class SearchPipeline:
         )
         return self._relevant_section_indices
 
+    @property
+    def relevance_summaries(self) -> dict[str, RelevanceChunk]:
+        if DISABLE_AGENTIC_SEARCH:
+            raise ValueError(
+                "Agentic saerch operation called while DISABLE_AGENTIC_SEARCH is toggled"
+            )
+        if len(self.reranked_sections) == 0:
+            logger.warning(
+                "No sections found in agentic search evalution. Returning empty dict."
+            )
+            return {}
+
+        sections = self.reranked_sections
+        functions = [
+            FunctionCall(
+                evaluate_inference_section, (section, self.search_query.query, self.llm)
+            )
+            for section in sections
+        ]
+
+        results = run_functions_in_parallel(function_calls=functions)
+
+        return {
+            next(iter(value)): value[next(iter(value))] for value in results.values()
+        }
+
     @property
     def section_relevance_list(self) -> list[bool]:
         return [
diff --git a/backend/danswer/secondary_llm_flows/agentic_evaluation.py b/backend/danswer/secondary_llm_flows/agentic_evaluation.py
new file mode 100644
index 0000000000..3f884e8f24
--- /dev/null
+++ b/backend/danswer/secondary_llm_flows/agentic_evaluation.py
@@ -0,0 +1,71 @@
+from danswer.chat.models import RelevanceChunk
+from danswer.llm.interfaces import LLM
+from danswer.llm.utils import message_to_string
+from danswer.prompts.miscellaneous_prompts import AGENTIC_SEARCH_EVALUATION_PROMPT
+from danswer.search.models import InferenceSection
+from danswer.utils.logger import setup_logger
+
+logger = setup_logger()
+
+
+def evaluate_inference_section(
+    document: InferenceSection, query: str, llm: LLM
+) -> dict[str, RelevanceChunk]:
+    relevance: RelevanceChunk = RelevanceChunk()
+    results = {}
+
+    # At least for now, is the same doucment ID across chunks
+    document_id = document.center_chunk.document_id
+    chunk_id = document.center_chunk.chunk_id
+
+    prompt = f"""
+    Analyze the relevance of this document to the search query:
+    Title: {document_id.split("/")[-1]}
+    Blurb: {document.combined_content}
+    Query: {query}
+
+    {AGENTIC_SEARCH_EVALUATION_PROMPT}
+    """
+
+    content = message_to_string(llm.invoke(prompt=prompt))
+    analysis = ""
+    relevant = False
+    chain_of_thought = ""
+
+    parts = content.split("[ANALYSIS_START]", 1)
+    if len(parts) == 2:
+        chain_of_thought, rest = parts
+    else:
+        logger.warning(f"Missing [ANALYSIS_START] tag for document {document_id}")
+        rest = content
+
+    parts = rest.split("[ANALYSIS_END]", 1)
+    if len(parts) == 2:
+        analysis, result = parts
+    else:
+        logger.warning(f"Missing [ANALYSIS_END] tag for document {document_id}")
+        result = rest
+
+    chain_of_thought = chain_of_thought.strip()
+    analysis = analysis.strip()
+    result = result.strip().lower()
+
+    # Determine relevance
+    if "result: true" in result:
+        relevant = True
+    elif "result: false" in result:
+        relevant = False
+    else:
+        logger.warning(f"Invalid result format for document {document_id}")
+
+    if not analysis:
+        logger.warning(
+            f"Couldn't extract proper analysis for document {document_id}. Using full content."
+        )
+        analysis = content
+
+    relevance.content = analysis
+    relevance.relevant = relevant
+
+    results[f"{document_id}-{chunk_id}"] = relevance
+    return results
diff --git a/backend/danswer/server/query_and_chat/chat_backend.py b/backend/danswer/server/query_and_chat/chat_backend.py
index e4172b8c6b..5e109b7942 100644
--- a/backend/danswer/server/query_and_chat/chat_backend.py
+++ b/backend/danswer/server/query_and_chat/chat_backend.py
@@ -303,7 +303,6 @@ def handle_new_chat_message(
             request.headers
         ),
     )
-
     return StreamingResponse(packets, media_type="application/json")
 
 
diff --git a/backend/danswer/server/query_and_chat/models.py b/backend/danswer/server/query_and_chat/models.py
index ea1ce1ff68..83f8560de9 100644
--- a/backend/danswer/server/query_and_chat/models.py
+++ b/backend/danswer/server/query_and_chat/models.py
@@ -171,7 +171,6 @@ class SearchFeedbackRequest(BaseModel):
 
         if click is False and feedback is None:
             raise ValueError("Empty feedback received.")
-
         return values
 
 
@@ -186,6 +185,7 @@ class ChatMessageDetail(BaseModel):
     time_sent: datetime
     alternate_assistant_id: str | None
     # Dict mapping citation number to db_doc_id
+    chat_session_id: int | None = None
     citations: dict[int, int] | None
     files: list[FileDescriptor]
     tool_calls: list[ToolCallFinalResult]
@@ -196,6 +196,13 @@ class ChatMessageDetail(BaseModel):
         return initial_dict
 
 
+class SearchSessionDetailResponse(BaseModel):
+    search_session_id: int
+    description: str
+    documents: list[SearchDoc]
+    messages: list[ChatMessageDetail]
+
+
 class ChatSessionDetailResponse(BaseModel):
     chat_session_id: int
     description: str
diff --git a/backend/danswer/server/query_and_chat/query_backend.py b/backend/danswer/server/query_and_chat/query_backend.py
index a7505178b1..e7e1ca493b 100644
--- a/backend/danswer/server/query_and_chat/query_backend.py
+++ b/backend/danswer/server/query_and_chat/query_backend.py
@@ -7,6 +7,14 @@ from sqlalchemy.orm import Session
 from danswer.auth.users import current_admin_user
 from danswer.auth.users import current_user
 from danswer.configs.constants import DocumentSource
+from danswer.configs.constants import MessageType
+from danswer.db.chat import get_chat_messages_by_session
+from danswer.db.chat import get_chat_session_by_id
+from danswer.db.chat import get_chat_sessions_by_user
+from danswer.db.chat import get_first_messages_for_chat_sessions
+from danswer.db.chat import get_search_docs_for_chat_message
+from danswer.db.chat import translate_db_message_to_chat_message_detail
+from danswer.db.chat import translate_db_search_doc_to_server_search_doc
 from danswer.db.embedding_model import get_current_db_embedding_model
 from danswer.db.engine import get_session
 from danswer.db.models import User
@@ -24,8 +32,11 @@ from danswer.secondary_llm_flows.query_validation import get_query_answerability
 from danswer.secondary_llm_flows.query_validation import stream_query_answerability
 from danswer.server.query_and_chat.models import AdminSearchRequest
 from danswer.server.query_and_chat.models import AdminSearchResponse
+from danswer.server.query_and_chat.models import ChatSessionDetails
+from danswer.server.query_and_chat.models import ChatSessionsResponse
 from danswer.server.query_and_chat.models import HelperResponse
 from danswer.server.query_and_chat.models import QueryValidationResponse
+from danswer.server.query_and_chat.models import SearchSessionDetailResponse
 from danswer.server.query_and_chat.models import SimpleQueryRequest
 from danswer.server.query_and_chat.models import SourceTag
 from danswer.server.query_and_chat.models import TagResponse
@@ -46,7 +57,6 @@ def admin_search(
 ) -> AdminSearchResponse:
     query = question.query
     logger.info(f"Received admin search query: {query}")
-
     user_acl_filters = build_access_filters_for_user(user, db_session)
     final_filters = IndexFilters(
         source_type=question.filters.source_type,
@@ -55,19 +65,15 @@ def admin_search(
         tags=question.filters.tags,
         access_control_list=user_acl_filters,
     )
-
     embedding_model = get_current_db_embedding_model(db_session)
-
     document_index = get_default_document_index(
         primary_index_name=embedding_model.index_name, secondary_index_name=None
     )
-
     if not isinstance(document_index, VespaIndex):
         raise HTTPException(
             status_code=400,
             detail="Cannot use admin-search when using a non-Vespa document index",
         )
-
     matching_chunks = document_index.admin_retrieval(query=query, filters=final_filters)
 
     documents = chunks_or_sections_to_search_docs(matching_chunks)
@@ -136,6 +142,103 @@ def query_validation(
     return QueryValidationResponse(reasoning=reasoning, answerable=answerable)
 
 
+@basic_router.get("/user-searches")
+def get_user_search_sessions(
+    user: User | None = Depends(current_user),
+    db_session: Session = Depends(get_session),
+) -> ChatSessionsResponse:
+    user_id = user.id if user is not None else None
+
+    try:
+        search_sessions = get_chat_sessions_by_user(
+            user_id=user_id, deleted=False, db_session=db_session, only_one_shot=True
+        )
+    except ValueError:
+        raise HTTPException(
+            status_code=404, detail="Chat session does not exist or has been deleted"
+        )
+
+    search_session_ids = [chat.id for chat in search_sessions]
+    first_messages = get_first_messages_for_chat_sessions(
+        search_session_ids, db_session
+    )
+    first_messages_dict = dict(first_messages)
+
+    response = ChatSessionsResponse(
+        sessions=[
+            ChatSessionDetails(
+                id=search.id,
+                name=first_messages_dict.get(search.id, search.description),
+                persona_id=search.persona_id,
+                time_created=search.time_created.isoformat(),
+                shared_status=search.shared_status,
+                folder_id=search.folder_id,
+                current_alternate_model=search.current_alternate_model,
+            )
+            for search in search_sessions
+        ]
+    )
+    return response
+
+
+@basic_router.get("/search-session/{session_id}")
+def get_search_session(
+    session_id: int,
+    is_shared: bool = False,
+    user: User | None = Depends(current_user),
+    db_session: Session = Depends(get_session),
+) -> SearchSessionDetailResponse:
+    user_id = user.id if user is not None else None
+
+    try:
+        search_session = get_chat_session_by_id(
+            chat_session_id=session_id,
+            user_id=user_id,
+            db_session=db_session,
+            is_shared=is_shared,
+        )
+    except ValueError:
+        raise ValueError("Search session does not exist or has been deleted")
+
+    session_messages = get_chat_messages_by_session(
+        chat_session_id=session_id,
+        user_id=user_id,
+        db_session=db_session,
+        # we already did a permission check above with the call to
+        # `get_chat_session_by_id`, so we can skip it here
+        skip_permission_check=True,
+        # we need the tool call objs anyways, so just fetch them in a single call
+        prefetch_tool_calls=True,
+    )
+    docs_response: list[SearchDoc] = []
+    for message in session_messages:
+        if (
+            message.message_type == MessageType.ASSISTANT
+            or message.message_type == MessageType.SYSTEM
+        ):
+            docs = get_search_docs_for_chat_message(
+                db_session=db_session, chat_message_id=message.id
+            )
+            for doc in docs:
+                server_doc = translate_db_search_doc_to_server_search_doc(doc)
+                docs_response.append(server_doc)
+
+    response = SearchSessionDetailResponse(
+        search_session_id=session_id,
+        description=search_session.description,
+        documents=docs_response,
+        messages=[
+            translate_db_message_to_chat_message_detail(
+                msg, remove_doc_content=is_shared  # if shared, don't leak doc content
+            )
+            for msg in session_messages
+        ],
+    )
+    return response
+
+
+# NOTE No longer used, after search/chat redesign.
+# No search responses are answered with a conversational generative AI response
 @basic_router.post("/stream-query-validation")
 def stream_query_validation(
     simple_query: SimpleQueryRequest, _: User = Depends(current_user)
@@ -156,6 +259,7 @@ def get_answer_with_quote(
     _: None = Depends(check_token_rate_limits),
 ) -> StreamingResponse:
     query = query_request.messages[0].message
+
     logger.info(f"Received query for one shot answer with quotes: {query}")
     packets = stream_search_answer(
         query_req=query_request,
diff --git a/backend/danswer/tools/search/search_tool.py b/backend/danswer/tools/search/search_tool.py
index 44c5001d6c..1706ba2646 100644
--- a/backend/danswer/tools/search/search_tool.py
+++ b/backend/danswer/tools/search/search_tool.py
@@ -10,6 +10,7 @@ from danswer.chat.chat_utils import llm_doc_from_inference_section
 from danswer.chat.models import DanswerContext
 from danswer.chat.models import DanswerContexts
 from danswer.chat.models import LlmDoc
+from danswer.configs.chat_configs import DISABLE_AGENTIC_SEARCH
 from danswer.db.models import Persona
 from danswer.db.models import User
 from danswer.dynamic_configs.interface import JSON_ro
@@ -30,11 +31,15 @@ from danswer.secondary_llm_flows.query_expansion import history_based_query_reph
 from danswer.tools.search.search_utils import llm_doc_to_dict
 from danswer.tools.tool import Tool
 from danswer.tools.tool import ToolResponse
+from danswer.utils.logger import setup_logger
+
+logger = setup_logger()
 
 SEARCH_RESPONSE_SUMMARY_ID = "search_response_summary"
 SEARCH_DOC_CONTENT_ID = "search_doc_content"
 SECTION_RELEVANCE_LIST_ID = "section_relevance_list"
 FINAL_CONTEXT_DOCUMENTS = "final_context_documents"
+SEARCH_EVALUATION_ID = "evaluate_response"
 
 
 class SearchResponseSummary(BaseModel):
@@ -80,6 +85,7 @@ class SearchTool(Tool):
         chunks_below: int = 0,
         full_doc: bool = False,
         bypass_acl: bool = False,
+        evaluate_response: bool = False,
     ) -> None:
         self.user = user
         self.persona = persona
@@ -96,6 +102,7 @@ class SearchTool(Tool):
         self.full_doc = full_doc
         self.bypass_acl = bypass_acl
         self.db_session = db_session
+        self.evaluate_response = evaluate_response
 
     @property
     def name(self) -> str:
@@ -218,23 +225,28 @@ class SearchTool(Tool):
                     self.retrieval_options.filters if self.retrieval_options else None
                 ),
                 persona=self.persona,
-                offset=self.retrieval_options.offset
-                if self.retrieval_options
-                else None,
+                offset=(
+                    self.retrieval_options.offset if self.retrieval_options else None
+                ),
                 limit=self.retrieval_options.limit if self.retrieval_options else None,
                 chunks_above=self.chunks_above,
                 chunks_below=self.chunks_below,
                 full_doc=self.full_doc,
-                enable_auto_detect_filters=self.retrieval_options.enable_auto_detect_filters
-                if self.retrieval_options
-                else None,
+                enable_auto_detect_filters=(
+                    self.retrieval_options.enable_auto_detect_filters
+                    if self.retrieval_options
+                    else None
+                ),
             ),
             user=self.user,
             llm=self.llm,
             fast_llm=self.fast_llm,
             bypass_acl=self.bypass_acl,
             db_session=self.db_session,
+            prompt_config=self.prompt_config,
+            pruning_config=self.pruning_config,
         )
+
         yield ToolResponse(
             id=SEARCH_RESPONSE_SUMMARY_ID,
             response=SearchResponseSummary(
@@ -246,6 +258,7 @@ class SearchTool(Tool):
                 recency_bias_multiplier=search_pipeline.search_query.recency_bias_multiplier,
             ),
         )
+
         yield ToolResponse(
             id=SEARCH_DOC_CONTENT_ID,
             response=DanswerContexts(
@@ -260,6 +273,7 @@ class SearchTool(Tool):
                 ]
             ),
         )
+
         yield ToolResponse(
             id=SECTION_RELEVANCE_LIST_ID,
             response=search_pipeline.relevant_section_indices,
@@ -281,6 +295,11 @@ class SearchTool(Tool):
 
         yield ToolResponse(id=FINAL_CONTEXT_DOCUMENTS, response=llm_docs)
 
+        if self.evaluate_response and not DISABLE_AGENTIC_SEARCH:
+            yield ToolResponse(
+                id=SEARCH_EVALUATION_ID, response=search_pipeline.relevance_summaries
+            )
+
     def final_result(self, *args: ToolResponse) -> JSON_ro:
         final_docs = cast(
             list[LlmDoc],
diff --git a/backend/danswer/utils/threadpool_concurrency.py b/backend/danswer/utils/threadpool_concurrency.py
index 463d43c1a7..d8fc40a7d9 100644
--- a/backend/danswer/utils/threadpool_concurrency.py
+++ b/backend/danswer/utils/threadpool_concurrency.py
@@ -87,6 +87,7 @@ def run_functions_in_parallel(
     are the result_id of the FunctionCall and the values are the results of the call.
     """
     results = {}
+
     with ThreadPoolExecutor(max_workers=len(function_calls)) as executor:
         future_to_id = {
             executor.submit(func_call.execute): func_call.result_id
diff --git a/backend/tests/regression/answer_quality/__init__.py b/backend/tests/regression/answer_quality/__init__.py
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/backend/throttle.ctrl b/backend/throttle.ctrl
index 03aa917953..f187eb1231 100644
--- a/backend/throttle.ctrl
+++ b/backend/throttle.ctrl
@@ -1 +1 @@
-f1f2 1 1718910083.03085 wikipedia:en
\ No newline at end of file
+f1f2 2 1721064549.902656 wikipedia:en
diff --git a/deployment/docker_compose/docker-compose.dev.yml b/deployment/docker_compose/docker-compose.dev.yml
index 9773527015..97a7df6515 100644
--- a/deployment/docker_compose/docker-compose.dev.yml
+++ b/deployment/docker_compose/docker-compose.dev.yml
@@ -51,6 +51,7 @@ services:
       - DISABLE_LITELLM_STREAMING=${DISABLE_LITELLM_STREAMING:-}
       - LITELLM_EXTRA_HEADERS=${LITELLM_EXTRA_HEADERS:-}
       - BING_API_KEY=${BING_API_KEY:-}
+      - DISABLE_AGENTIC_SEARCH=${DISABLE_AGENTIC_SEARCH:-}
       # if set, allows for the use of the token budget system
       - TOKEN_BUDGET_GLOBALLY_ENABLED=${TOKEN_BUDGET_GLOBALLY_ENABLED:-}
       # Enables the use of bedrock models
@@ -230,6 +231,7 @@ services:
       - INTERNAL_URL=http://api_server:8080
       - WEB_DOMAIN=${WEB_DOMAIN:-}
       - THEME_IS_DARK=${THEME_IS_DARK:-}
+      - DISABLE_AGENTIC_SEARCH=${DISABLE_AGENTIC_SEARCH:-}
 
       # Enterprise Edition only
       - ENABLE_PAID_ENTERPRISE_EDITION_FEATURES=${ENABLE_PAID_ENTERPRISE_EDITION_FEATURES:-false}
diff --git a/web/src/app/admin/assistants/AssistantEditor.tsx b/web/src/app/admin/assistants/AssistantEditor.tsx
index 665af18743..0088abdea5 100644
--- a/web/src/app/admin/assistants/AssistantEditor.tsx
+++ b/web/src/app/admin/assistants/AssistantEditor.tsx
@@ -400,7 +400,7 @@ export function AssistantEditor({
           }
 
           return (
-            <Form>
+            <Form className="w-full">
               <div className="pb-6">
                 <TextFormField
                   name="name"
@@ -550,7 +550,7 @@ export function AssistantEditor({
 
                         {searchToolEnabled() && (
                           <CollapsibleSection prompt="Configure Search">
-                            <div className=" ">
+                            <div>
                               {ccPairs.length > 0 && (
                                 <>
                                   <Label small>Document Sets</Label>
diff --git a/web/src/app/admin/assistants/CollapsibleSection.tsx b/web/src/app/admin/assistants/CollapsibleSection.tsx
index 72b598846e..d442efea83 100644
--- a/web/src/app/admin/assistants/CollapsibleSection.tsx
+++ b/web/src/app/admin/assistants/CollapsibleSection.tsx
@@ -39,8 +39,10 @@ const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
         `}
         onClick={toggleCollapse}
       >
+        {" "}
+        Great and also a
         {isCollapsed ? (
-          <span className="collapse-toggle text-lg absolute left-0 top-0  text-sm flex  items-center gap-x-3 cursor-pointer">
+          <span className="collapse-toggle text-lg absolute left-0 top-0 text-sm flex items-center gap-x-3 cursor-pointer">
             <FiSettings className="pointer-events-none my-auto" size={16} />
             {prompt}{" "}
           </span>
diff --git a/web/src/app/admin/assistants/new/page.tsx b/web/src/app/admin/assistants/new/page.tsx
index 5123dc4f4f..ee6b28328f 100644
--- a/web/src/app/admin/assistants/new/page.tsx
+++ b/web/src/app/admin/assistants/new/page.tsx
@@ -28,7 +28,7 @@ export default async function Page() {
   }
 
   return (
-    <div>
+    <div className="w-full">
       <BackButton />
       <AdminPageTitle
         title="Create a New Assistant"
diff --git a/web/src/app/admin/assistants/page.tsx b/web/src/app/admin/assistants/page.tsx
index 55b89045e2..206d8da5ad 100644
--- a/web/src/app/admin/assistants/page.tsx
+++ b/web/src/app/admin/assistants/page.tsx
@@ -5,7 +5,7 @@ import { Divider, Text, Title } from "@tremor/react";
 import { fetchSS } from "@/lib/utilsSS";
 import { ErrorCallout } from "@/components/ErrorCallout";
 import { Persona } from "./interfaces";
-import { RobotIcon } from "@/components/icons/icons";
+import { AssistantsIcon, RobotIcon } from "@/components/icons/icons";
 import { AdminPageTitle } from "@/components/admin/Title";
 
 export default async function Page() {
@@ -24,7 +24,7 @@ export default async function Page() {
 
   return (
     <div className="mx-auto container">
-      <AdminPageTitle icon={<RobotIcon size={32} />} title="Assistants" />
+      <AdminPageTitle icon={<AssistantsIcon size={32} />} title="Assistants" />
 
       <Text className="mb-2">
         Assistants are a way to build custom search/question-answering
diff --git a/web/src/app/admin/bot/page.tsx b/web/src/app/admin/bot/page.tsx
index 8c1eca6781..14f270ee9b 100644
--- a/web/src/app/admin/bot/page.tsx
+++ b/web/src/app/admin/bot/page.tsx
@@ -301,7 +301,7 @@ const Page = () => {
   return (
     <div className="container mx-auto">
       <AdminPageTitle
-        icon={<FiSlack size={32} />}
+        icon={<SlackIcon size={32} />}
         title="Slack Bot Configuration"
       />
       <InstantSSRAutoRefresh />
diff --git a/web/src/app/admin/connectors/gmail/Credential.tsx b/web/src/app/admin/connectors/gmail/Credential.tsx
index 68f5bba2d2..b92399e069 100644
--- a/web/src/app/admin/connectors/gmail/Credential.tsx
+++ b/web/src/app/admin/connectors/gmail/Credential.tsx
@@ -34,7 +34,7 @@ const DriveJsonUpload = ({
       <input
         className={
           "mr-3 text-sm text-gray-900 border border-gray-300 rounded-lg " +
-          "cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none " +
+          "cursor-pointer bg-background dark:text-gray-400 focus:outline-none " +
           "dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
         }
         type="file"
diff --git a/web/src/app/admin/connectors/google-drive/Credential.tsx b/web/src/app/admin/connectors/google-drive/Credential.tsx
index 849057e71e..ec36f5071a 100644
--- a/web/src/app/admin/connectors/google-drive/Credential.tsx
+++ b/web/src/app/admin/connectors/google-drive/Credential.tsx
@@ -34,7 +34,7 @@ const DriveJsonUpload = ({
       <input
         className={
           "mr-3 text-sm text-gray-900 border border-gray-300 rounded-lg " +
-          "cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none " +
+          "cursor-pointer bg-background dark:text-gray-400 focus:outline-none " +
           "dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400"
         }
         type="file"
diff --git a/web/src/app/admin/models/embedding/CloudEmbeddingPage.tsx b/web/src/app/admin/models/embedding/CloudEmbeddingPage.tsx
index 6b1feee976..c1546ee82b 100644
--- a/web/src/app/admin/models/embedding/CloudEmbeddingPage.tsx
+++ b/web/src/app/admin/models/embedding/CloudEmbeddingPage.tsx
@@ -116,7 +116,13 @@ export default function CloudEmbeddingPage({
                   <div
                     key={index}
                     className={`p-3 my-2 border-2 border-neutral-300 border-opacity-40 rounded-md rounded cursor-pointer  
-                    ${!provider.configured ? "opacity-80 hover:opacity-100" : enabled ? "bg-background-stronger" : "hover:bg-background-strong"}`}
+                    ${
+                      !provider.configured
+                        ? "opacity-80 hover:opacity-100"
+                        : enabled
+                          ? "bg-background-stronger"
+                          : "hover:bg-background-strong"
+                    }`}
                     onClick={() => {
                       if (enabled) {
                         setAlreadySelectedModel(model);
diff --git a/web/src/app/admin/models/embedding/page.tsx b/web/src/app/admin/models/embedding/page.tsx
index 92e7de6df9..828cd902c3 100644
--- a/web/src/app/admin/models/embedding/page.tsx
+++ b/web/src/app/admin/models/embedding/page.tsx
@@ -39,6 +39,7 @@ export interface EmbeddingDetails {
   default_model_id?: number;
   name: string;
 }
+import { EmbeddingIcon, PackageIcon } from "@/components/icons/icons";
 
 function Main() {
   const [openToggle, setOpenToggle] = useState(true);
@@ -364,17 +365,25 @@ function Main() {
             monitor the progress of the re-indexing on this page.
           </Text>
 
-          <div className="mt-8 text-sm  mr-auto  mb-12 divide-x-2  flex   ">
+          <div className="mt-8 text-sm mr-auto mb-12 divide-x-2 flex">
             <button
               onClick={() => setOpenToggle(true)}
-              className={` mx-2 p-2 font-bold  ${openToggle ? "rounded bg-neutral-900 text-neutral-100 underline" : "hover:underline"}`}
+              className={` mx-2 p-2 font-bold  ${
+                openToggle
+                  ? "rounded bg-neutral-900 text-neutral-100 underline"
+                  : "hover:underline"
+              }`}
             >
               Self-hosted
             </button>
             <div className="px-2 ">
               <button
                 onClick={() => setOpenToggle(false)}
-                className={`mx-2 p-2 font-bold  ${!openToggle ? "rounded bg-neutral-900   text-neutral-100 underline" : " hover:underline"}`}
+                className={`mx-2 p-2 font-bold  ${
+                  !openToggle
+                    ? "rounded bg-neutral-900   text-neutral-100 underline"
+                    : " hover:underline"
+                }`}
               >
                 Cloud-based
               </button>
@@ -516,7 +525,7 @@ function Page() {
     <div className="mx-auto container">
       <AdminPageTitle
         title="Embedding"
-        icon={<FiPackage size={32} className="my-auto" />}
+        icon={<EmbeddingIcon size={32} className="my-auto" />}
       />
 
       <Main />
diff --git a/web/src/app/admin/models/llm/page.tsx b/web/src/app/admin/models/llm/page.tsx
index a774b36966..9771a53c3a 100644
--- a/web/src/app/admin/models/llm/page.tsx
+++ b/web/src/app/admin/models/llm/page.tsx
@@ -3,13 +3,14 @@
 import { AdminPageTitle } from "@/components/admin/Title";
 import { FiCpu } from "react-icons/fi";
 import { LLMConfiguration } from "./LLMConfiguration";
+import { CpuIcon } from "@/components/icons/icons";
 
 const Page = () => {
   return (
     <div className="mx-auto container">
       <AdminPageTitle
         title="LLM Setup"
-        icon={<FiCpu size={32} className="my-auto" />}
+        icon={<CpuIcon size={32} className="my-auto" />}
       />
 
       <LLMConfiguration />
diff --git a/web/src/app/admin/settings/page.tsx b/web/src/app/admin/settings/page.tsx
index eff4262f0d..1fe2ca8833 100644
--- a/web/src/app/admin/settings/page.tsx
+++ b/web/src/app/admin/settings/page.tsx
@@ -2,13 +2,14 @@ import { AdminPageTitle } from "@/components/admin/Title";
 import { FiSettings } from "react-icons/fi";
 import { SettingsForm } from "./SettingsForm";
 import { Text } from "@tremor/react";
+import { SettingsIcon } from "@/components/icons/icons";
 
 export default async function Page() {
   return (
     <div className="mx-auto container">
       <AdminPageTitle
         title="Workspace Settings"
-        icon={<FiSettings size={32} className="my-auto" />}
+        icon={<SettingsIcon size={32} className="my-auto" />}
       />
 
       <Text className="mb-8">
diff --git a/web/src/app/admin/token-rate-limits/page.tsx b/web/src/app/admin/token-rate-limits/page.tsx
index 7aeff20c67..fb4b711a2e 100644
--- a/web/src/app/admin/token-rate-limits/page.tsx
+++ b/web/src/app/admin/token-rate-limits/page.tsx
@@ -23,6 +23,7 @@ import { mutate } from "swr";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { CreateRateLimitModal } from "./CreateRateLimitModal";
 import { usePaidEnterpriseFeaturesEnabled } from "@/components/settings/usePaidEnterpriseFeaturesEnabled";
+import { ShieldIcon } from "@/components/icons/icons";
 
 const BASE_URL = "/api/admin/token-rate-limits";
 const GLOBAL_TOKEN_FETCH_URL = `${BASE_URL}/global`;
@@ -219,8 +220,10 @@ function Main() {
 export default function Page() {
   return (
     <div className="mx-auto container">
-      <AdminPageTitle title="Token Rate Limits" icon={<FiShield size={32} />} />
-
+      <AdminPageTitle
+        title="Token Rate Limits"
+        icon={<ShieldIcon size={32} />}
+      />
       <Main />
     </div>
   );
diff --git a/web/src/app/admin/tools/edit/[toolId]/page.tsx b/web/src/app/admin/tools/edit/[toolId]/page.tsx
index 8dd54be46b..8ae1e908a2 100644
--- a/web/src/app/admin/tools/edit/[toolId]/page.tsx
+++ b/web/src/app/admin/tools/edit/[toolId]/page.tsx
@@ -6,6 +6,7 @@ import { DeleteToolButton } from "./DeleteToolButton";
 import { FiTool } from "react-icons/fi";
 import { AdminPageTitle } from "@/components/admin/Title";
 import { BackButton } from "@/components/BackButton";
+import { ToolIcon } from "@/components/icons/icons";
 
 export default async function Page({ params }: { params: { toolId: string } }) {
   const tool = await fetchToolByIdSS(params.toolId);
@@ -46,7 +47,7 @@ export default async function Page({ params }: { params: { toolId: string } }) {
 
       <AdminPageTitle
         title="Edit Tool"
-        icon={<FiTool size={32} className="my-auto" />}
+        icon={<ToolIcon size={32} className="my-auto" />}
       />
 
       {body}
diff --git a/web/src/app/admin/tools/new/page.tsx b/web/src/app/admin/tools/new/page.tsx
index 5d1723f96a..efff155be5 100644
--- a/web/src/app/admin/tools/new/page.tsx
+++ b/web/src/app/admin/tools/new/page.tsx
@@ -3,6 +3,7 @@
 import { ToolEditor } from "@/app/admin/tools/ToolEditor";
 import { BackButton } from "@/components/BackButton";
 import { AdminPageTitle } from "@/components/admin/Title";
+import { ToolIcon } from "@/components/icons/icons";
 import { Card } from "@tremor/react";
 import { FiTool } from "react-icons/fi";
 
@@ -13,7 +14,7 @@ export default function NewToolPage() {
 
       <AdminPageTitle
         title="Create Tool"
-        icon={<FiTool size={32} className="my-auto" />}
+        icon={<ToolIcon size={32} className="my-auto" />}
       />
 
       <Card>
diff --git a/web/src/app/admin/tools/page.tsx b/web/src/app/admin/tools/page.tsx
index 7b9edf7abe..543f89ac36 100644
--- a/web/src/app/admin/tools/page.tsx
+++ b/web/src/app/admin/tools/page.tsx
@@ -6,6 +6,7 @@ import { Divider, Text, Title } from "@tremor/react";
 import { fetchSS } from "@/lib/utilsSS";
 import { ErrorCallout } from "@/components/ErrorCallout";
 import { AdminPageTitle } from "@/components/admin/Title";
+import { ToolIcon } from "@/components/icons/icons";
 
 export default async function Page() {
   const toolResponse = await fetchSS("/tool");
@@ -24,7 +25,7 @@ export default async function Page() {
   return (
     <div className="mx-auto container">
       <AdminPageTitle
-        icon={<FiTool size={32} className="my-auto" />}
+        icon={<ToolIcon size={32} className="my-auto" />}
         title="Tools"
       />
 
diff --git a/web/src/app/assistants/SidebarWrapper.tsx b/web/src/app/assistants/SidebarWrapper.tsx
new file mode 100644
index 0000000000..87081e07f5
--- /dev/null
+++ b/web/src/app/assistants/SidebarWrapper.tsx
@@ -0,0 +1,148 @@
+"use client";
+
+import { HistorySidebar } from "@/app/chat/sessionSidebar/HistorySidebar";
+import { AssistantsGallery } from "./gallery/AssistantsGallery";
+import FixedLogo from "@/app/chat/shared_chat_search/FixedLogo";
+import { UserDropdown } from "@/components/UserDropdown";
+import { ChatSession } from "@/app/chat/interfaces";
+import { Folder } from "@/app/chat/folders/interfaces";
+import { User } from "@/lib/types";
+import { Persona } from "@/app/admin/assistants/interfaces";
+import Cookies from "js-cookie";
+import { SIDEBAR_TOGGLED_COOKIE_NAME } from "@/components/resizable/contants";
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { useSidebarVisibility } from "@/components/chat_search/hooks";
+import FunctionalHeader from "@/components/chat_search/Header";
+import { useRouter } from "next/navigation";
+
+interface SidebarWrapperProps<T extends object> {
+  chatSessions: ChatSession[];
+  folders: Folder[];
+  initiallyToggled: boolean;
+  openedFolders?: { [key: number]: boolean };
+  content: (props: T) => ReactNode;
+  headerProps: {
+    page: string;
+    user: User | null;
+  };
+  contentProps: T;
+}
+
+export default function SidebarWrapper<T extends object>({
+  chatSessions,
+  initiallyToggled,
+  folders,
+  openedFolders,
+  headerProps,
+  contentProps,
+  content,
+}: SidebarWrapperProps<T>) {
+  const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
+
+  const [showDocSidebar, setShowDocSidebar] = useState(false); // State to track if sidebar is open
+
+  const toggleSidebar = () => {
+    Cookies.set(
+      SIDEBAR_TOGGLED_COOKIE_NAME,
+      String(!toggledSidebar).toLocaleLowerCase()
+    ),
+      {
+        path: "/",
+      };
+    setToggledSidebar((toggledSidebar) => !toggledSidebar);
+  };
+
+  const sidebarElementRef = useRef<HTMLDivElement>(null);
+
+  useSidebarVisibility({
+    toggledSidebar,
+    sidebarElementRef,
+    showDocSidebar,
+    setShowDocSidebar,
+  });
+
+  const innerSidebarElementRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        switch (event.key.toLowerCase()) {
+          case "e":
+            event.preventDefault();
+            toggleSidebar();
+            break;
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [router]);
+
+  return (
+    <div className="flex relative overflow-x-hidden overscroll-contain flex-col w-full h-screen">
+      <div
+        ref={sidebarElementRef}
+        className={`
+            flex-none
+            fixed
+            left-0
+            z-20
+            overflow-y-hidden
+            sidebar
+            bg-background-100
+            h-screen
+            transition-all
+            bg-opacity-80
+            duration-300
+            ease-in-out
+            ${
+              showDocSidebar || toggledSidebar
+                ? "opacity-100 w-[300px] translate-x-0"
+                : "opacity-0 w-[200px] pointer-events-none -translate-x-10"
+            }`}
+      >
+        <div className="w-full relative">
+          <HistorySidebar
+            page="chat"
+            ref={innerSidebarElementRef}
+            toggleSidebar={toggleSidebar}
+            toggled={toggledSidebar}
+            existingChats={chatSessions}
+            currentChatSession={null}
+            folders={folders}
+            openedFolders={openedFolders}
+          />
+        </div>
+      </div>
+
+      <div className="absolute left-0 w-full top-0">
+        <FunctionalHeader
+          page="assistants"
+          showSidebar={showDocSidebar}
+          user={headerProps.user}
+        />
+        <div className="w-full flex">
+          <div
+            style={{ transition: "width 0.30s ease-out" }}
+            className={`
+                    flex-none
+                    overflow-y-hidden
+                    bg-background-100
+                    h-full
+                    transition-all
+                    bg-opacity-80
+                    duration-300 
+                    ease-in-out
+                    ${toggledSidebar ? "w-[300px]" : "w-[0px]"}
+                  `}
+          />
+
+          <div className="mt-4 mx-auto">{content(contentProps)}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/app/assistants/ToolsDisplay.tsx b/web/src/app/assistants/ToolsDisplay.tsx
index f0a331a21e..443f1ac57a 100644
--- a/web/src/app/assistants/ToolsDisplay.tsx
+++ b/web/src/app/assistants/ToolsDisplay.tsx
@@ -5,6 +5,7 @@ import { FiImage, FiSearch, FiGlobe } from "react-icons/fi";
 export function ToolsDisplay({ tools }: { tools: ToolSnapshot[] }) {
   return (
     <div className="text-xs text-subtle flex flex-wrap gap-1 mt-2">
+      <p className="text-sm text-default my-auto">Tools:</p>
       {tools.map((tool) => {
         let toolName = tool.name;
         let toolIcon = null;
diff --git a/web/src/app/assistants/gallery/WrappedAssistantsGallery.tsx b/web/src/app/assistants/gallery/WrappedAssistantsGallery.tsx
new file mode 100644
index 0000000000..97a5ba6cb9
--- /dev/null
+++ b/web/src/app/assistants/gallery/WrappedAssistantsGallery.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import SidebarWrapper from "../SidebarWrapper";
+import { ChatSession } from "@/app/chat/interfaces";
+import { Folder } from "@/app/chat/folders/interfaces";
+import { Persona } from "@/app/admin/assistants/interfaces";
+import { User } from "@/lib/types";
+import { AssistantsGallery } from "./AssistantsGallery";
+
+export default function WrappedAssistantsGallery({
+  chatSessions,
+  initiallyToggled,
+  folders,
+  openedFolders,
+  user,
+  assistants,
+}: {
+  chatSessions: ChatSession[];
+  folders: Folder[];
+  initiallyToggled: boolean;
+  openedFolders?: { [key: number]: boolean };
+  user: User | null;
+  assistants: Persona[];
+}) {
+  return (
+    <SidebarWrapper
+      initiallyToggled={initiallyToggled}
+      chatSessions={chatSessions}
+      folders={folders}
+      openedFolders={openedFolders}
+      headerProps={{ user, page: "" }}
+      contentProps={{
+        assistants: assistants,
+        user: user,
+      }}
+      content={(contentProps) => (
+        <AssistantsGallery
+          assistants={contentProps.assistants}
+          user={contentProps.user}
+        />
+      )}
+    />
+  );
+}
diff --git a/web/src/app/assistants/gallery/page.tsx b/web/src/app/assistants/gallery/page.tsx
index 86b9a6a8b5..1c2b5c9c77 100644
--- a/web/src/app/assistants/gallery/page.tsx
+++ b/web/src/app/assistants/gallery/page.tsx
@@ -1,4 +1,4 @@
-import { ChatSidebar } from "@/app/chat/sessionSidebar/ChatSidebar";
+import { HistorySidebar } from "@/app/chat/sessionSidebar/HistorySidebar";
 import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
 import { UserDropdown } from "@/components/UserDropdown";
 import { ChatProvider } from "@/components/context/ChatContext";
@@ -7,6 +7,9 @@ import { fetchChatData } from "@/lib/chat/fetchChatData";
 import { unstable_noStore as noStore } from "next/cache";
 import { redirect } from "next/navigation";
 import { AssistantsGallery } from "./AssistantsGallery";
+import FixedLogo from "@/app/chat/shared_chat_search/FixedLogo";
+import GalleryWrapper from "../SidebarWrapper";
+import WrappedAssistantsGallery from "./WrappedAssistantsGallery";
 
 export default async function GalleryPage({
   searchParams,
@@ -32,6 +35,7 @@ export default async function GalleryPage({
     folders,
     openedFolders,
     shouldShowWelcomeModal,
+    toggleSidebar,
   } = data;
 
   return (
@@ -53,28 +57,17 @@ export default async function GalleryPage({
           openedFolders,
         }}
       >
-        <div className="flex relative bg-background text-default overflow-x-hidden h-screen">
-          <ChatSidebar
-            existingChats={chatSessions}
-            currentChatSession={null}
-            folders={folders}
-            openedFolders={openedFolders}
-          />
+        <WrappedAssistantsGallery
+          initiallyToggled={toggleSidebar}
+          chatSessions={chatSessions}
+          folders={folders}
+          openedFolders={openedFolders}
+          user={user}
+          assistants={assistants}
+        />
 
-          <div
-            className={`w-full h-full flex flex-col overflow-y-auto overflow-x-hidden relative`}
-          >
-            <div className="sticky top-0 left-80 z-10 w-full bg-background flex h-fit">
-              <div className="ml-auto my-auto mt-4 mr-8">
-                <UserDropdown user={user} />
-              </div>
-            </div>
-
-            <div className="mt-4">
-              <AssistantsGallery assistants={assistants} user={user} />
-            </div>
-          </div>
-        </div>
+        {/* Temporary - fixed logo */}
+        <FixedLogo />
       </ChatProvider>
     </>
   );
diff --git a/web/src/app/assistants/mine/WrappedAssistantsMine.tsx b/web/src/app/assistants/mine/WrappedAssistantsMine.tsx
new file mode 100644
index 0000000000..873dc226a5
--- /dev/null
+++ b/web/src/app/assistants/mine/WrappedAssistantsMine.tsx
@@ -0,0 +1,43 @@
+"use client";
+import { AssistantsList } from "./AssistantsList";
+import SidebarWrapper from "../SidebarWrapper";
+import { ChatSession } from "@/app/chat/interfaces";
+import { Folder } from "@/app/chat/folders/interfaces";
+import { Persona } from "@/app/admin/assistants/interfaces";
+import { User } from "@/lib/types";
+
+export default function WrappedAssistantsMine({
+  chatSessions,
+  initiallyToggled,
+  folders,
+  openedFolders,
+  user,
+  assistants,
+}: {
+  chatSessions: ChatSession[];
+  folders: Folder[];
+  initiallyToggled: boolean;
+  openedFolders?: { [key: number]: boolean };
+  user: User | null;
+  assistants: Persona[];
+}) {
+  return (
+    <SidebarWrapper
+      initiallyToggled={initiallyToggled}
+      chatSessions={chatSessions}
+      folders={folders}
+      openedFolders={openedFolders}
+      headerProps={{ user, page: "" }}
+      contentProps={{
+        assistants: assistants,
+        user: user,
+      }}
+      content={(contentProps) => (
+        <AssistantsList
+          assistants={contentProps.assistants}
+          user={contentProps.user}
+        />
+      )}
+    />
+  );
+}
diff --git a/web/src/app/assistants/mine/page.tsx b/web/src/app/assistants/mine/page.tsx
index c1cac2273e..748217b5d6 100644
--- a/web/src/app/assistants/mine/page.tsx
+++ b/web/src/app/assistants/mine/page.tsx
@@ -1,4 +1,4 @@
-import { ChatSidebar } from "@/app/chat/sessionSidebar/ChatSidebar";
+import { HistorySidebar } from "@/app/chat/sessionSidebar/HistorySidebar";
 import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
 import { UserDropdown } from "@/components/UserDropdown";
 import { ChatProvider } from "@/components/context/ChatContext";
@@ -8,6 +8,10 @@ import { fetchChatData } from "@/lib/chat/fetchChatData";
 import { unstable_noStore as noStore } from "next/cache";
 import { redirect } from "next/navigation";
 import { AssistantsList } from "./AssistantsList";
+import { Logo } from "@/components/Logo";
+import FixedLogo from "@/app/chat/shared_chat_search/FixedLogo";
+import SidebarWrapper from "../SidebarWrapper";
+import WrappedAssistantsMine from "./WrappedAssistantsMine";
 
 export default async function GalleryPage({
   searchParams,
@@ -33,6 +37,7 @@ export default async function GalleryPage({
     folders,
     openedFolders,
     shouldShowWelcomeModal,
+    toggleSidebar,
   } = data;
 
   return (
@@ -54,28 +59,17 @@ export default async function GalleryPage({
           openedFolders,
         }}
       >
-        <div className="flex relative bg-background text-default overflow-x-hidden h-screen">
-          <ChatSidebar
-            existingChats={chatSessions}
-            currentChatSession={null}
-            folders={folders}
-            openedFolders={openedFolders}
-          />
+        <WrappedAssistantsMine
+          initiallyToggled={toggleSidebar}
+          chatSessions={chatSessions}
+          folders={folders}
+          openedFolders={openedFolders}
+          user={user}
+          assistants={assistants}
+        />
 
-          <div
-            className={`w-full h-screen flex flex-col overflow-y-auto overflow-x-hidden relative`}
-          >
-            <div className="sticky top-0 left-80 z-10 w-full bg-background flex h-fit">
-              <div className="ml-auto my-auto mt-4 mr-8">
-                <UserDropdown user={user} />
-              </div>
-            </div>
-
-            <div className="mt-4">
-              <AssistantsList user={user} assistants={assistants} />
-            </div>
-          </div>
-        </div>
+        {/* Temporary - fixed logo */}
+        <FixedLogo />
       </ChatProvider>
     </>
   );
diff --git a/web/src/app/auth/login/SignInButton.tsx b/web/src/app/auth/login/SignInButton.tsx
index 3dda2afff7..9d04321e80 100644
--- a/web/src/app/auth/login/SignInButton.tsx
+++ b/web/src/app/auth/login/SignInButton.tsx
@@ -42,7 +42,7 @@ export function SignInButton({
 
   return (
     <a
-      className="mt-6 py-3 w-72 text-gray-100 bg-accent flex rounded cursor-pointer hover:bg-indigo-800"
+      className="mt-6 py-3 w-72 text-text-100 bg-accent flex rounded cursor-pointer hover:bg-indigo-800"
       href={authorizeUrl}
     >
       {button}
diff --git a/web/src/app/chat/ChatBanner.tsx b/web/src/app/chat/ChatBanner.tsx
index 4158549574..39df94e999 100644
--- a/web/src/app/chat/ChatBanner.tsx
+++ b/web/src/app/chat/ChatBanner.tsx
@@ -16,7 +16,7 @@ export function ChatBanner() {
       className={`
       z-[39] 
       h-[30px]
-      bg-background-custom-header
+      bg-background-100
       shadow-sm
       m-2
       rounded
diff --git a/web/src/app/chat/ChatIntro.tsx b/web/src/app/chat/ChatIntro.tsx
index 926656958e..e6a40b1fd2 100644
--- a/web/src/app/chat/ChatIntro.tsx
+++ b/web/src/app/chat/ChatIntro.tsx
@@ -35,17 +35,13 @@ export function ChatIntro({
 }) {
   const availableSourceMetadata = getSourceMetadataForSources(availableSources);
 
-  const [displaySources, setDisplaySources] = useState(false);
-
   return (
     <>
       <div className="flex justify-center items-center h-full">
         <div className="w-message-xs 2xl:w-message-sm 3xl:w-message">
           <div className="flex">
             <div className="mx-auto">
-              <Logo height={80} width={80} className="m-auto" />
-
-              <div className="m-auto text-3xl font-bold text-strong mt-4 w-fit">
+              <div className="m-auto text-3xl font-strong font-bold text-strong w-fit">
                 {selectedPersona?.name || "How can I help you today?"}
               </div>
               {selectedPersona && (
diff --git a/web/src/app/chat/ChatPage.tsx b/web/src/app/chat/ChatPage.tsx
index 6321fa9a3e..a24a7cc05d 100644
--- a/web/src/app/chat/ChatPage.tsx
+++ b/web/src/app/chat/ChatPage.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useRouter, useSearchParams } from "next/navigation";
+import { redirect, useRouter, useSearchParams } from "next/navigation";
 import {
   BackendChatSession,
   BackendMessage,
@@ -14,7 +14,10 @@ import {
   StreamingError,
   ToolCallMetadata,
 } from "./interfaces";
-import { ChatSidebar } from "./sessionSidebar/ChatSidebar";
+
+import Cookies from "js-cookie";
+
+import { HistorySidebar } from "./sessionSidebar/HistorySidebar";
 import { Persona } from "../admin/assistants/interfaces";
 import { HealthCheckBanner } from "@/components/health/healthcheck";
 import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
@@ -49,8 +52,7 @@ import { DocumentSidebar } from "./documentSidebar/DocumentSidebar";
 import { DanswerInitializingLoader } from "@/components/DanswerInitializingLoader";
 import { FeedbackModal } from "./modal/FeedbackModal";
 import { ShareChatSessionModal } from "./modal/ShareChatSessionModal";
-import { ChatPersonaSelector } from "./ChatPersonaSelector";
-import { FiArrowDown, FiShare2 } from "react-icons/fi";
+import { FiArrowDown } from "react-icons/fi";
 import { ChatIntro } from "./ChatIntro";
 import { AIMessage, HumanMessage } from "./message/Messages";
 import { ThreeDots } from "react-loader-spinner";
@@ -63,26 +65,30 @@ import { checkLLMSupportsImageInput, getFinalLLM } from "@/lib/llm/utils";
 import { ChatInputBar } from "./input/ChatInputBar";
 import { ConfigurationModal } from "./modal/configuration/ConfigurationModal";
 import { useChatContext } from "@/components/context/ChatContext";
-import { UserDropdown } from "@/components/UserDropdown";
 import { v4 as uuidv4 } from "uuid";
 import { orderAssistantsForUser } from "@/lib/assistants/orderAssistants";
 import { ChatPopup } from "./ChatPopup";
 import { ChatBanner } from "./ChatBanner";
-import { TbLayoutSidebarRightExpand } from "react-icons/tb";
-import { SIDEBAR_WIDTH_CONST } from "@/lib/constants";
 
-import ResizableSection from "@/components/resizable/ResizableSection";
+import FunctionalHeader from "@/components/chat_search/Header";
+import { useSidebarVisibility } from "@/components/chat_search/hooks";
+import { SIDEBAR_TOGGLED_COOKIE_NAME } from "@/components/resizable/contants";
+import FixedLogo from "./shared_chat_search/FixedLogo";
 
 const TEMP_USER_MESSAGE_ID = -1;
 const TEMP_ASSISTANT_MESSAGE_ID = -2;
 const SYSTEM_MESSAGE_ID = -3;
 
 export function ChatPage({
+  toggle,
   documentSidebarInitialWidth,
   defaultSelectedPersonaId,
+  toggledSidebar,
 }: {
+  toggle: () => void;
   documentSidebarInitialWidth?: number;
   defaultSelectedPersonaId?: number;
+  toggledSidebar: boolean;
 }) {
   const [configModalActiveTab, setConfigModalActiveTab] = useState<
     string | null
@@ -265,19 +271,6 @@ export function ChatPage({
     initialSessionFetch();
   }, [existingChatSessionId]);
 
-  const [usedSidebarWidth, setUsedSidebarWidth] = useState<number>(
-    documentSidebarInitialWidth || parseInt(SIDEBAR_WIDTH_CONST)
-  );
-
-  const updateSidebarWidth = (newWidth: number) => {
-    setUsedSidebarWidth(newWidth);
-    if (sidebarElementRef.current && innerSidebarElementRef.current) {
-      sidebarElementRef.current.style.transition = "";
-      sidebarElementRef.current.style.width = `${newWidth}px`;
-      innerSidebarElementRef.current.style.width = `${newWidth}px`;
-    }
-  };
-
   const [message, setMessage] = useState(
     searchParams.get(SEARCH_PARAM_NAMES.USER_MESSAGE) || ""
   );
@@ -509,7 +502,6 @@ export function ChatPage({
       } else {
         endDivRef.current?.scrollIntoView({ behavior: "smooth" });
       }
-
       setHasPerformedInitialScroll(true);
     }, 50);
   };
@@ -788,6 +780,7 @@ export function ChatPage({
           searchParams.get(SEARCH_PARAM_NAMES.SYSTEM_PROMPT) || undefined,
         useExistingUserMessage: isSeededChat,
       });
+
       const updateFn = (messages: Message[]) => {
         const replacementsMap = finalMessage
           ? new Map([
@@ -1039,20 +1032,29 @@ export function ChatPage({
     router.push("/search");
   }
 
-  const [showDocSidebar, setShowDocSidebar] = useState(true); // State to track if sidebar is open
+  const [showDocSidebar, setShowDocSidebar] = useState(false); // State to track if sidebar is open
 
   const toggleSidebar = () => {
-    if (sidebarElementRef.current) {
-      sidebarElementRef.current.style.transition = "width 0.3s ease-in-out";
+    Cookies.set(
+      SIDEBAR_TOGGLED_COOKIE_NAME,
+      String(!toggledSidebar).toLocaleLowerCase()
+    ),
+      {
+        path: "/",
+      };
 
-      sidebarElementRef.current.style.width = showDocSidebar
-        ? "0px"
-        : `${usedSidebarWidth}px`;
-    }
-
-    setShowDocSidebar((showDocSidebar) => !showDocSidebar); // Toggle the state which will in turn toggle the class
+    toggle();
   };
 
+  const sidebarElementRef = useRef<HTMLDivElement>(null);
+
+  useSidebarVisibility({
+    toggledSidebar,
+    sidebarElementRef,
+    showDocSidebar,
+    setShowDocSidebar,
+  });
+
   useEffect(() => {
     const includes = checkAnyAssistantHasSearch(
       messageHistory,
@@ -1069,21 +1071,35 @@ export function ChatPage({
       livePersona
     );
   });
-  const [editingRetrievalEnabled, setEditingRetrievalEnabled] = useState(false);
-  const sidebarElementRef = useRef<HTMLDivElement>(null);
+
   const innerSidebarElementRef = useRef<HTMLDivElement>(null);
 
   const currentPersona = selectedAssistant || livePersona;
 
-  const updateSelectedAssistant = (newAssistant: Persona | null) => {
-    setSelectedAssistant(newAssistant);
-    if (newAssistant) {
-      setEditingRetrievalEnabled(personaIncludesRetrieval(newAssistant));
-    } else {
-      setEditingRetrievalEnabled(false);
-    }
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        switch (event.key.toLowerCase()) {
+          case "e":
+            event.preventDefault();
+            toggleSidebar();
+            break;
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [router]);
+
+  const [documentSelection, setDocumentSelection] = useState(false);
+  const toggleDocumentSelectionAspects = () => {
+    setDocumentSelection((documentSelection) => !documentSelection);
+    setShowDocSidebar(false);
   };
-  console.log(hasPerformedInitialScroll);
+
   return (
     <>
       <HealthCheckBanner />
@@ -1093,14 +1109,40 @@ export function ChatPage({
       Only used in the EE version of the app. */}
       <ChatPopup />
 
-      <div className="flex relative bg-background text-default overflow-x-hidden">
-        <ChatSidebar
-          existingChats={chatSessions}
-          currentChatSession={selectedChatSession}
-          folders={folders}
-          openedFolders={openedFolders}
-        />
-
+      <div className="flex relative bg-background text-default ">
+        <div
+          ref={sidebarElementRef}
+          className={`
+            flex-none
+            absolute
+            left-0
+            z-20
+            sidebar
+            bg-background-100
+            h-screen
+            transition-all
+            bg-opacity-80
+            duration-300
+            ease-in-out
+            ${
+              showDocSidebar || toggledSidebar
+                ? "opacity-100 w-[300px] translate-x-0"
+                : "opacity-0 w-[200px] pointer-events-none -translate-x-10"
+            }`}
+        >
+          <div className="w-full relative">
+            <HistorySidebar
+              page="chat"
+              ref={innerSidebarElementRef}
+              toggleSidebar={toggleSidebar}
+              toggled={toggledSidebar}
+              existingChats={chatSessions}
+              currentChatSession={selectedChatSession}
+              folders={folders}
+              openedFolders={openedFolders}
+            />
+          </div>
+        </div>
         <div ref={masterFlexboxRef} className="flex w-full overflow-x-hidden">
           {popup}
           {currentFeedback && (
@@ -1147,346 +1189,335 @@ export function ChatPage({
             llmOverrideManager={llmOverrideManager}
           />
 
-          {documentSidebarInitialWidth !== undefined ? (
-            <Dropzone onDrop={handleImageUpload} noClick>
-              {({ getRootProps }) => (
-                <>
-                  <div
-                    className={`w-full sm:relative h-screen ${
-                      !retrievalEnabled ? "pb-[111px]" : "pb-[140px]"
-                    }
-                      flex-auto transition-margin duration-300 
-                      overflow-x-auto
-                      `}
-                    {...getRootProps()}
-                  >
-                    {/* <input {...getInputProps()} /> */}
-
+          <div className="flex h-[calc(100dvh)] flex-col w-full">
+            {livePersona && (
+              <FunctionalHeader
+                page="chat"
+                setSharingModalVisible={
+                  chatSessionIdRef.current !== null
+                    ? setSharingModalVisible
+                    : undefined
+                }
+                showSidebar={showDocSidebar}
+                user={user}
+                currentChatSession={selectedChatSession}
+              />
+            )}
+            {documentSidebarInitialWidth !== undefined ? (
+              <Dropzone onDrop={handleImageUpload} noClick>
+                {({ getRootProps }) => (
+                  <div className="flex h-full w-full">
                     <div
-                      className={`w-full h-full flex flex-col overflow-y-auto overflow-x-hidden relative`}
-                      ref={scrollableDivRef}
+                      style={{ transition: "width 0.30s ease-out" }}
+                      className={`
+                        flex-none 
+                        overflow-y-hidden 
+                        bg-background-100 
+                        transition-all 
+                        bg-opacity-80
+                        duration-300 
+                        ease-in-out
+                        h-full
+                        ${toggledSidebar ? "w-[300px]" : "w-[0px]"}
+                      `}
+                    ></div>
+                    <div
+                      className={`h-full w-full relative flex-auto transition-margin duration-300  overflow-x-auto pb-[140px]`}
+                      {...getRootProps()}
                     >
-                      {/* ChatBanner is a custom banner that displays a admin-specified message at 
-                      the top of the chat page. Only used in the EE version of the app. */}
-                      <ChatBanner />
-
-                      {livePersona && (
-                        <div className="sticky top-0 left-80 z-10 w-full bg-background flex">
-                          <div className="mt-2 flex w-full">
-                            <div className="ml-2 p-1 rounded w-fit">
-                              <ChatPersonaSelector
-                                personas={filteredAssistants}
-                                selectedPersonaId={livePersona.id}
-                                onPersonaChange={onPersonaChange}
-                                userId={user?.id}
-                              />
-                            </div>
-
-                            <div className="ml-auto mr-6 flex">
-                              {chatSessionIdRef.current !== null && (
-                                <div
-                                  onClick={() => setSharingModalVisible(true)}
-                                  className={`
-                                    my-auto
-                                    p-2
-                                    rounded
-                                    cursor-pointer
-                                    hover:bg-hover-light
-                                  `}
-                                >
-                                  <FiShare2 size="18" />
-                                </div>
-                              )}
-
-                              <div className="ml-4 flex my-auto">
-                                <UserDropdown user={user} />
-                                {retrievalEnabled && !showDocSidebar && (
-                                  <button
-                                    className="ml-4 mt-auto"
-                                    onClick={() => toggleSidebar()}
-                                  >
-                                    <TbLayoutSidebarRightExpand size={24} />
-                                  </button>
-                                )}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      )}
-
-                      {messageHistory.length === 0 &&
-                        !isFetchingChatMessages &&
-                        !isStreaming && (
-                          <ChatIntro
-                            availableSources={finalAvailableSources}
-                            selectedPersona={livePersona}
-                          />
-                        )}
-
+                      {/* <input {...getInputProps()} /> */}
                       <div
-                        className={
-                          "mt-4 pt-12 sm:pt-0 mx-8" +
-                          (hasPerformedInitialScroll ? "" : " invisible")
-                        }
+                        className={`w-full h-full flex flex-col overflow-y-auto overflow-x-hidden relative`}
+                        ref={scrollableDivRef}
                       >
-                        {messageHistory.map((message, i) => {
-                          const messageMap = completeMessageDetail.messageMap;
-                          const messageReactComponentKey = `${i}-${completeMessageDetail.sessionId}`;
-                          if (message.type === "user") {
-                            const parentMessage = message.parentMessageId
-                              ? messageMap.get(message.parentMessageId)
-                              : null;
-                            return (
-                              <div key={messageReactComponentKey}>
-                                <HumanMessage
-                                  content={message.message}
-                                  files={message.files}
-                                  messageId={message.messageId}
-                                  otherMessagesCanSwitchTo={
-                                    parentMessage?.childrenMessageIds || []
-                                  }
-                                  onEdit={(editedContent) => {
-                                    const parentMessageId =
-                                      message.parentMessageId!;
-                                    const parentMessage =
-                                      messageMap.get(parentMessageId)!;
-                                    upsertToCompleteMessageMap({
-                                      messages: [
-                                        {
-                                          ...parentMessage,
-                                          latestChildMessageId: null,
-                                        },
-                                      ],
-                                    });
-                                    onSubmit({
-                                      messageIdToResend:
-                                        message.messageId || undefined,
-                                      messageOverride: editedContent,
-                                    });
-                                  }}
-                                  onMessageSelection={(messageId) => {
-                                    const newCompleteMessageMap = new Map(
-                                      messageMap
-                                    );
-                                    newCompleteMessageMap.get(
-                                      message.parentMessageId!
-                                    )!.latestChildMessageId = messageId;
-                                    setCompleteMessageDetail({
-                                      sessionId:
-                                        completeMessageDetail.sessionId,
-                                      messageMap: newCompleteMessageMap,
-                                    });
-                                    setSelectedMessageForDocDisplay(messageId);
-                                    // set message as latest so we can edit this message
-                                    // and so it sticks around on page reload
-                                    setMessageAsLatest(messageId);
-                                  }}
-                                />
-                              </div>
-                            );
-                          } else if (message.type === "assistant") {
-                            const isShowingRetrieved =
-                              (selectedMessageForDocDisplay !== null &&
-                                selectedMessageForDocDisplay ===
-                                  message.messageId) ||
-                              (selectedMessageForDocDisplay ===
-                                TEMP_USER_MESSAGE_ID &&
-                                i === messageHistory.length - 1);
-                            const previousMessage =
-                              i !== 0 ? messageHistory[i - 1] : null;
+                        {/* ChatBanner is a custom banner that displays a admin-specified message at 
+                      the top of the chat page. Only used in the EE version of the app. */}
+                        <ChatBanner />
 
-                            const currentAlternativeAssistant =
-                              message.alternateAssistantID != null
-                                ? availablePersonas.find(
-                                    (persona) =>
-                                      persona.id == message.alternateAssistantID
-                                  )
+                        {messageHistory.length === 0 &&
+                          !isFetchingChatMessages &&
+                          !isStreaming && (
+                            <ChatIntro
+                              availableSources={finalAvailableSources}
+                              selectedPersona={livePersona}
+                            />
+                          )}
+                        <div
+                          className={
+                            "mt-4 -ml-4 w-full mx-auto " +
+                            "absolute top-12 left-0  " +
+                            (hasPerformedInitialScroll ? "" : "invisible")
+                          }
+                        >
+                          {messageHistory.map((message, i) => {
+                            const messageMap = completeMessageDetail.messageMap;
+                            const messageReactComponentKey = `${i}-${completeMessageDetail.sessionId}`;
+                            if (message.type === "user") {
+                              const parentMessage = message.parentMessageId
+                                ? messageMap.get(message.parentMessageId)
                                 : null;
+                              return (
+                                <div key={messageReactComponentKey}>
+                                  <HumanMessage
+                                    content={message.message}
+                                    files={message.files}
+                                    messageId={message.messageId}
+                                    otherMessagesCanSwitchTo={
+                                      parentMessage?.childrenMessageIds || []
+                                    }
+                                    onEdit={(editedContent) => {
+                                      const parentMessageId =
+                                        message.parentMessageId!;
+                                      const parentMessage =
+                                        messageMap.get(parentMessageId)!;
+                                      upsertToCompleteMessageMap({
+                                        messages: [
+                                          {
+                                            ...parentMessage,
+                                            latestChildMessageId: null,
+                                          },
+                                        ],
+                                      });
+                                      onSubmit({
+                                        messageIdToResend:
+                                          message.messageId || undefined,
+                                        messageOverride: editedContent,
+                                      });
+                                    }}
+                                    onMessageSelection={(messageId) => {
+                                      const newCompleteMessageMap = new Map(
+                                        messageMap
+                                      );
+                                      newCompleteMessageMap.get(
+                                        message.parentMessageId!
+                                      )!.latestChildMessageId = messageId;
+                                      setCompleteMessageDetail({
+                                        sessionId:
+                                          completeMessageDetail.sessionId,
+                                        messageMap: newCompleteMessageMap,
+                                      });
+                                      setSelectedMessageForDocDisplay(
+                                        messageId
+                                      );
+                                      // set message as latest so we can edit this message
+                                      // and so it sticks around on page reload
+                                      setMessageAsLatest(messageId);
+                                    }}
+                                  />
+                                </div>
+                              );
+                            } else if (message.type === "assistant") {
+                              const isShowingRetrieved =
+                                (selectedMessageForDocDisplay !== null &&
+                                  selectedMessageForDocDisplay ===
+                                    message.messageId) ||
+                                (selectedMessageForDocDisplay ===
+                                  TEMP_USER_MESSAGE_ID &&
+                                  i === messageHistory.length - 1);
+                              const previousMessage =
+                                i !== 0 ? messageHistory[i - 1] : null;
 
-                            return (
+                              const currentAlternativeAssistant =
+                                message.alternateAssistantID != null
+                                  ? availablePersonas.find(
+                                      (persona) =>
+                                        persona.id ==
+                                        message.alternateAssistantID
+                                    )
+                                  : null;
+
+                              return (
+                                <div
+                                  key={messageReactComponentKey}
+                                  ref={
+                                    i == messageHistory.length - 1
+                                      ? lastMessageRef
+                                      : null
+                                  }
+                                >
+                                  <AIMessage
+                                    isActive={messageHistory.length - 1 == i}
+                                    selectedDocuments={selectedDocuments}
+                                    toggleDocumentSelection={
+                                      toggleDocumentSelectionAspects
+                                    }
+                                    docs={message.documents}
+                                    currentPersona={livePersona}
+                                    alternativeAssistant={
+                                      currentAlternativeAssistant
+                                    }
+                                    messageId={message.messageId}
+                                    content={message.message}
+                                    files={message.files}
+                                    query={
+                                      messageHistory[i]?.query || undefined
+                                    }
+                                    personaName={livePersona.name}
+                                    citedDocuments={getCitedDocumentsFromMessage(
+                                      message
+                                    )}
+                                    toolCall={
+                                      message.toolCalls && message.toolCalls[0]
+                                    }
+                                    isComplete={
+                                      i !== messageHistory.length - 1 ||
+                                      !isStreaming
+                                    }
+                                    hasDocs={
+                                      (message.documents &&
+                                        message.documents.length > 0) === true
+                                    }
+                                    handleFeedback={
+                                      i === messageHistory.length - 1 &&
+                                      isStreaming
+                                        ? undefined
+                                        : (feedbackType) =>
+                                            setCurrentFeedback([
+                                              feedbackType,
+                                              message.messageId as number,
+                                            ])
+                                    }
+                                    handleSearchQueryEdit={
+                                      i === messageHistory.length - 1 &&
+                                      !isStreaming
+                                        ? (newQuery) => {
+                                            if (!previousMessage) {
+                                              setPopup({
+                                                type: "error",
+                                                message:
+                                                  "Cannot edit query of first message - please refresh the page and try again.",
+                                              });
+                                              return;
+                                            }
+
+                                            if (
+                                              previousMessage.messageId === null
+                                            ) {
+                                              setPopup({
+                                                type: "error",
+                                                message:
+                                                  "Cannot edit query of a pending message - please wait a few seconds and try again.",
+                                              });
+                                              return;
+                                            }
+                                            onSubmit({
+                                              messageIdToResend:
+                                                previousMessage.messageId,
+                                              queryOverride: newQuery,
+                                              alternativeAssistant:
+                                                currentAlternativeAssistant,
+                                            });
+                                          }
+                                        : undefined
+                                    }
+                                    isCurrentlyShowingRetrieved={
+                                      isShowingRetrieved
+                                    }
+                                    handleShowRetrieved={(messageNumber) => {
+                                      if (isShowingRetrieved) {
+                                        setSelectedMessageForDocDisplay(null);
+                                      } else {
+                                        if (messageNumber !== null) {
+                                          setSelectedMessageForDocDisplay(
+                                            messageNumber
+                                          );
+                                        } else {
+                                          setSelectedMessageForDocDisplay(-1);
+                                        }
+                                      }
+                                    }}
+                                    handleForceSearch={() => {
+                                      if (
+                                        previousMessage &&
+                                        previousMessage.messageId
+                                      ) {
+                                        onSubmit({
+                                          messageIdToResend:
+                                            previousMessage.messageId,
+                                          forceSearch: true,
+                                          alternativeAssistant:
+                                            currentAlternativeAssistant,
+                                        });
+                                      } else {
+                                        setPopup({
+                                          type: "error",
+                                          message:
+                                            "Failed to force search - please refresh the page and try again.",
+                                        });
+                                      }
+                                    }}
+                                    retrievalDisabled={
+                                      currentAlternativeAssistant
+                                        ? !personaIncludesRetrieval(
+                                            currentAlternativeAssistant!
+                                          )
+                                        : !retrievalEnabled
+                                    }
+                                  />
+                                </div>
+                              );
+                            } else {
+                              return (
+                                <div key={messageReactComponentKey}>
+                                  <AIMessage
+                                    currentPersona={livePersona}
+                                    messageId={message.messageId}
+                                    personaName={livePersona.name}
+                                    content={
+                                      <p className="text-red-700 text-sm my-auto">
+                                        {message.message}
+                                      </p>
+                                    }
+                                  />
+                                </div>
+                              );
+                            }
+                          })}
+                          {isStreaming &&
+                            messageHistory.length > 0 &&
+                            messageHistory[messageHistory.length - 1].type ===
+                              "user" && (
                               <div
-                                key={messageReactComponentKey}
-                                ref={
-                                  i == messageHistory.length - 1
-                                    ? lastMessageRef
-                                    : null
-                                }
+                                key={`${messageHistory.length}-${chatSessionIdRef.current}`}
                               >
                                 <AIMessage
                                   currentPersona={livePersona}
                                   alternativeAssistant={
-                                    currentAlternativeAssistant
+                                    alternativeGeneratingAssistant ??
+                                    selectedAssistant
                                   }
-                                  messageId={message.messageId}
-                                  content={message.message}
-                                  files={message.files}
-                                  query={messageHistory[i]?.query || undefined}
-                                  personaName={livePersona.name}
-                                  citedDocuments={getCitedDocumentsFromMessage(
-                                    message
-                                  )}
-                                  toolCall={
-                                    message.toolCalls && message.toolCalls[0]
-                                  }
-                                  isComplete={
-                                    i !== messageHistory.length - 1 ||
-                                    !isStreaming
-                                  }
-                                  hasDocs={
-                                    (message.documents &&
-                                      message.documents.length > 0) === true
-                                  }
-                                  handleFeedback={
-                                    i === messageHistory.length - 1 &&
-                                    isStreaming
-                                      ? undefined
-                                      : (feedbackType) =>
-                                          setCurrentFeedback([
-                                            feedbackType,
-                                            message.messageId as number,
-                                          ])
-                                  }
-                                  handleSearchQueryEdit={
-                                    i === messageHistory.length - 1 &&
-                                    !isStreaming
-                                      ? (newQuery) => {
-                                          if (!previousMessage) {
-                                            setPopup({
-                                              type: "error",
-                                              message:
-                                                "Cannot edit query of first message - please refresh the page and try again.",
-                                            });
-                                            return;
-                                          }
-
-                                          if (
-                                            previousMessage.messageId === null
-                                          ) {
-                                            setPopup({
-                                              type: "error",
-                                              message:
-                                                "Cannot edit query of a pending message - please wait a few seconds and try again.",
-                                            });
-                                            return;
-                                          }
-                                          onSubmit({
-                                            messageIdToResend:
-                                              previousMessage.messageId,
-                                            queryOverride: newQuery,
-                                            alternativeAssistant:
-                                              currentAlternativeAssistant,
-                                          });
-                                        }
-                                      : undefined
-                                  }
-                                  isCurrentlyShowingRetrieved={
-                                    isShowingRetrieved
-                                  }
-                                  handleShowRetrieved={(messageNumber) => {
-                                    if (isShowingRetrieved) {
-                                      setSelectedMessageForDocDisplay(null);
-                                    } else {
-                                      if (messageNumber !== null) {
-                                        setSelectedMessageForDocDisplay(
-                                          messageNumber
-                                        );
-                                      } else {
-                                        setSelectedMessageForDocDisplay(-1);
-                                      }
-                                    }
-                                  }}
-                                  handleForceSearch={() => {
-                                    if (
-                                      previousMessage &&
-                                      previousMessage.messageId
-                                    ) {
-                                      onSubmit({
-                                        messageIdToResend:
-                                          previousMessage.messageId,
-                                        forceSearch: true,
-                                        alternativeAssistant:
-                                          currentAlternativeAssistant,
-                                      });
-                                    } else {
-                                      setPopup({
-                                        type: "error",
-                                        message:
-                                          "Failed to force search - please refresh the page and try again.",
-                                      });
-                                    }
-                                  }}
-                                  retrievalDisabled={
-                                    currentAlternativeAssistant
-                                      ? !personaIncludesRetrieval(
-                                          currentAlternativeAssistant!
-                                        )
-                                      : !retrievalEnabled
-                                  }
-                                />
-                              </div>
-                            );
-                          } else {
-                            return (
-                              <div key={messageReactComponentKey}>
-                                <AIMessage
-                                  currentPersona={livePersona}
-                                  messageId={message.messageId}
+                                  messageId={null}
                                   personaName={livePersona.name}
                                   content={
-                                    <p className="text-red-700 text-sm my-auto">
-                                      {message.message}
-                                    </p>
+                                    <div className="text-sm my-auto">
+                                      <ThreeDots
+                                        height="30"
+                                        width="50"
+                                        color="#3b82f6"
+                                        ariaLabel="grid-loading"
+                                        radius="12.5"
+                                        wrapperStyle={{}}
+                                        wrapperClass=""
+                                        visible={true}
+                                      />
+                                    </div>
                                   }
                                 />
                               </div>
-                            );
-                          }
-                        })}
-                        {isStreaming &&
-                          messageHistory.length > 0 &&
-                          messageHistory[messageHistory.length - 1].type ===
-                            "user" && (
-                            <div
-                              key={`${messageHistory.length}-${chatSessionIdRef.current}`}
-                            >
-                              <AIMessage
-                                currentPersona={livePersona}
-                                alternativeAssistant={
-                                  alternativeGeneratingAssistant ??
-                                  selectedAssistant
-                                }
-                                messageId={null}
-                                personaName={livePersona.name}
-                                content={
-                                  <div className="text-sm my-auto">
-                                    <ThreeDots
-                                      height="30"
-                                      width="50"
-                                      color="#3b82f6"
-                                      ariaLabel="grid-loading"
-                                      radius="12.5"
-                                      wrapperStyle={{}}
-                                      wrapperClass=""
-                                      visible={true}
-                                    />
-                                  </div>
-                                }
-                              />
-                            </div>
-                          )}
+                            )}
 
-                        {/* Some padding at the bottom so the search bar has space at the bottom to not cover the last message*/}
-                        <div ref={endPaddingRef} className=" h-[95px]" />
-                        <div ref={endDivRef}></div>
+                          {/* Some padding at the bottom so the search bar has space at the bottom to not cover the last message*/}
+                          <div ref={endPaddingRef} className="h-[95px]" />
+                          <div ref={endDivRef}></div>
 
-                        {currentPersona &&
-                          currentPersona.starter_messages &&
-                          currentPersona.starter_messages.length > 0 &&
-                          selectedPersona &&
-                          messageHistory.length === 0 &&
-                          !isFetchingChatMessages && (
-                            <div
-                              className={`
+                          {currentPersona &&
+                            currentPersona.starter_messages &&
+                            currentPersona.starter_messages.length > 0 &&
+                            selectedPersona &&
+                            messageHistory.length === 0 &&
+                            !isFetchingChatMessages && (
+                              <div
+                                className={`
                             mx-auto 
                             px-4 
                             w-searchbar-xs 
@@ -1499,114 +1530,108 @@ export function ChatPage({
                             mt-4 
                             md:grid-cols-2 
                             mb-6`}
-                            >
-                              {currentPersona.starter_messages.map(
-                                (starterMessage, i) => (
-                                  <div key={i} className="w-full">
-                                    <StarterMessage
-                                      starterMessage={starterMessage}
-                                      onClick={() =>
-                                        onSubmit({
-                                          messageOverride:
-                                            starterMessage.message,
-                                        })
-                                      }
-                                    />
-                                  </div>
-                                )
-                              )}
+                              >
+                                {currentPersona.starter_messages.map(
+                                  (starterMessage, i) => (
+                                    <div key={i} className="w-full">
+                                      <StarterMessage
+                                        starterMessage={starterMessage}
+                                        onClick={() =>
+                                          onSubmit({
+                                            messageOverride:
+                                              starterMessage.message,
+                                          })
+                                        }
+                                      />
+                                    </div>
+                                  )
+                                )}
+                              </div>
+                            )}
+                          <div ref={endDivRef} />
+                        </div>
+                      </div>
+                      <div
+                        ref={inputRef}
+                        className="absolute bottom-0 z-10 w-full"
+                      >
+                        <div className="w-full relative pb-4">
+                          {aboveHorizon && (
+                            <div className="pointer-events-none w-full bg-transparent flex sticky justify-center">
+                              <button
+                                onClick={() => clientScrollToBottom()}
+                                className="p-1 pointer-events-auto rounded-2xl bg-background-strong border border-border mb-2 mx-auto "
+                              >
+                                <FiArrowDown size={18} />
+                              </button>
                             </div>
                           )}
-                        <div ref={endDivRef} />
-                      </div>
-                    </div>
 
-                    <div
-                      ref={inputRef}
-                      className="absolute bottom-0 z-10 w-full"
-                    >
-                      <div className="w-full relative pb-4">
-                        {aboveHorizon && (
-                          <div className="pointer-events-none w-full bg-transparent flex sticky justify-center">
-                            <button
-                              onClick={() => clientScrollToBottom(true)}
-                              className="p-1 pointer-events-auto rounded-2xl bg-background-strong border border-border mb-2 mx-auto "
-                            >
-                              <FiArrowDown size={18} />
-                            </button>
-                          </div>
-                        )}
-
-                        <ChatInputBar
-                          onSetSelectedAssistant={(
-                            alternativeAssistant: Persona | null
-                          ) => {
-                            updateSelectedAssistant(alternativeAssistant);
-                          }}
-                          alternativeAssistant={selectedAssistant}
-                          personas={filteredAssistants}
-                          message={message}
-                          setMessage={setMessage}
-                          onSubmit={onSubmit}
-                          isStreaming={isStreaming}
-                          setIsCancelled={setIsCancelled}
-                          retrievalDisabled={
-                            !personaIncludesRetrieval(currentPersona)
-                          }
-                          filterManager={filterManager}
-                          llmOverrideManager={llmOverrideManager}
-                          selectedAssistant={livePersona}
-                          files={currentMessageFiles}
-                          setFiles={setCurrentMessageFiles}
-                          handleFileUpload={handleImageUpload}
-                          setConfigModalActiveTab={setConfigModalActiveTab}
-                          textAreaRef={textAreaRef}
-                        />
+                          <ChatInputBar
+                            showDocs={() => setDocumentSelection(true)}
+                            selectedDocuments={selectedDocuments}
+                            setSelectedAssistant={onPersonaChange}
+                            onSetSelectedAssistant={(
+                              alternativeAssistant: Persona | null
+                            ) => {
+                              setSelectedAssistant(alternativeAssistant);
+                            }}
+                            alternativeAssistant={selectedAssistant}
+                            personas={filteredAssistants}
+                            message={message}
+                            setMessage={setMessage}
+                            onSubmit={onSubmit}
+                            isStreaming={isStreaming}
+                            setIsCancelled={setIsCancelled}
+                            retrievalDisabled={
+                              !personaIncludesRetrieval(currentPersona)
+                            }
+                            filterManager={filterManager}
+                            llmOverrideManager={llmOverrideManager}
+                            selectedAssistant={livePersona}
+                            files={currentMessageFiles}
+                            setFiles={setCurrentMessageFiles}
+                            handleFileUpload={handleImageUpload}
+                            setConfigModalActiveTab={setConfigModalActiveTab}
+                            textAreaRef={textAreaRef}
+                            chatSessionId={chatSessionIdRef.current!}
+                            availableAssistants={availablePersonas}
+                          />
+                        </div>
                       </div>
                     </div>
                   </div>
-
-                  {retrievalEnabled || editingRetrievalEnabled ? (
-                    <div
-                      ref={sidebarElementRef}
-                      className={`relative flex-none  overflow-y-hidden sidebar bg-background-weak h-screen`}
-                      style={{ width: showDocSidebar ? usedSidebarWidth : 0 }}
-                    >
-                      <ResizableSection
-                        updateSidebarWidth={updateSidebarWidth}
-                        intialWidth={usedSidebarWidth}
-                        minWidth={300}
-                        maxWidth={maxDocumentSidebarWidth || undefined}
-                      >
-                        <DocumentSidebar
-                          initialWidth={showDocSidebar ? usedSidebarWidth : 0}
-                          ref={innerSidebarElementRef}
-                          closeSidebar={() => toggleSidebar()}
-                          selectedMessage={aiMessage}
-                          selectedDocuments={selectedDocuments}
-                          toggleDocumentSelection={toggleDocumentSelection}
-                          clearSelectedDocuments={clearSelectedDocuments}
-                          selectedDocumentTokens={selectedDocumentTokens}
-                          maxTokens={maxTokens}
-                          isLoading={isFetchingChatMessages}
-                        />
-                      </ResizableSection>
-                    </div>
-                  ) : // Another option is to use a div with the width set to the initial width, so that the
-                  // chat section appears in the same place as before
-                  // <div style={documentSidebarInitialWidth ? {width: documentSidebarInitialWidth} : {}}></div>
-                  null}
-                </>
-              )}
-            </Dropzone>
-          ) : (
-            <div className="mx-auto h-full flex flex-col">
-              <div className="my-auto">
-                <DanswerInitializingLoader />
+                )}
+              </Dropzone>
+            ) : (
+              <div className="mx-auto h-full flex">
+                <div
+                  style={{ transition: "width 0.30s ease-out" }}
+                  className={`flex-none bg-transparent transition-all bg-opacity-80 duration-300 ease-in-out h-full
+                        ${toggledSidebar ? "w-[300px] " : "w-[0px]"}`}
+                />
+                <div className="my-auto">
+                  <DanswerInitializingLoader />
+                </div>
               </div>
-            </div>
-          )}
+            )}
+          </div>
+
+          <DocumentSidebar
+            initialWidth={390}
+            ref={innerSidebarElementRef}
+            closeSidebar={() => setDocumentSelection(false)}
+            selectedMessage={aiMessage}
+            selectedDocuments={selectedDocuments}
+            toggleDocumentSelection={toggleDocumentSelection}
+            clearSelectedDocuments={clearSelectedDocuments}
+            selectedDocumentTokens={selectedDocumentTokens}
+            maxTokens={maxTokens}
+            isLoading={isFetchingChatMessages}
+            isOpen={documentSelection}
+          />
         </div>
+        <FixedLogo />
       </div>
     </>
   );
diff --git a/web/src/app/chat/WrappedChat.tsx b/web/src/app/chat/WrappedChat.tsx
new file mode 100644
index 0000000000..08c96941ea
--- /dev/null
+++ b/web/src/app/chat/WrappedChat.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import { useState } from "react";
+import { ChatPage } from "./ChatPage";
+import FunctionalWrapper from "./shared_chat_search/FunctionalWrapper";
+
+export default function WrappedChat({
+  defaultPersonaId,
+  initiallyToggled,
+}: {
+  defaultPersonaId?: number;
+  initiallyToggled: boolean;
+}) {
+  return (
+    <FunctionalWrapper
+      initiallyToggled={initiallyToggled}
+      content={(toggledSidebar, toggle) => (
+        <ChatPage
+          toggle={toggle}
+          defaultSelectedPersonaId={defaultPersonaId}
+          toggledSidebar={toggledSidebar}
+        />
+      )}
+    />
+  );
+}
diff --git a/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx b/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
index 00b3b13cc0..de6274c758 100644
--- a/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
+++ b/web/src/app/chat/documentSidebar/ChatDocumentDisplay.tsx
@@ -1,8 +1,6 @@
 import { HoverPopup } from "@/components/HoverPopup";
 import { SourceIcon } from "@/components/SourceIcon";
 import { PopupSpec } from "@/components/admin/connectors/Popup";
-import { DocumentFeedbackBlock } from "@/components/search/DocumentFeedbackBlock";
-import { DocumentUpdatedAtBadge } from "@/components/search/DocumentUpdatedAtBadge";
 import { DanswerDocument } from "@/lib/search/interfaces";
 import { FiInfo, FiRadio } from "react-icons/fi";
 import { DocumentSelector } from "./DocumentSelector";
@@ -32,25 +30,32 @@ export function ChatDocumentDisplay({
   tokenLimitReached,
 }: DocumentDisplayProps) {
   const isInternet = document.is_internet;
+  // Consider reintroducing null scored docs in the future
+
+  if (document.score === null) {
+    return null;
+  }
 
   return (
-    <div key={document.semantic_identifier} className="text-sm px-3">
-      <div className="flex relative w-full overflow-y-visible">
+    <div
+      key={document.semantic_identifier}
+      className={`p-2 w-[350px] justify-start rounded-md ${
+        isSelected ? "bg-background-200" : "bg-background-125"
+      } text-sm mx-3`}
+    >
+      <div className="flex relative justify-start overflow-y-visible">
         <a
           className={
-            "rounded-lg flex font-bold flex-shrink truncate items-center " +
+            "rounded-lg flex font-bold flex-shrink truncate" +
             (document.link ? "" : "pointer-events-none")
           }
-          href={document.link}
-          target="_blank"
-          rel="noopener noreferrer"
         >
           {isInternet ? (
             <InternetSearchIcon url={document.link} />
           ) : (
             <SourceIcon sourceType={document.source_type} iconSize={18} />
           )}
-          <p className="overflow-hidden text-ellipsis mx-2 my-auto text-sm ">
+          <p className="overflow-hidden text-left text-ellipsis mx-2 my-auto text-sm ">
             {document.semantic_identifier || document.document_id}
           </p>
         </a>
@@ -75,6 +80,21 @@ export function ChatDocumentDisplay({
                 />
               </div>
             )}
+            <div
+              className={`
+                text-xs
+                text-emphasis
+                bg-hover
+                rounded
+                p-0.5
+                w-fit
+                my-auto
+                select-none
+                my-auto
+                mr-2`}
+            >
+              {Math.abs(document.score).toFixed(2)}
+            </div>
           </div>
         )}
 
@@ -91,8 +111,9 @@ export function ChatDocumentDisplay({
           <DocumentMetadataBlock document={document} />
         </div>
       </div>
-      <p className="pl-1 pt-2 pb-1 break-words">
+      <p className="line-clamp-3 pl-1 pt-2 mb-1 text-start break-words">
         {buildDocumentSummaryDisplay(document.match_highlights, document.blurb)}
+        test
       </p>
       <div className="mb-2">
         {/* 
diff --git a/web/src/app/chat/documentSidebar/DocumentSelector.tsx b/web/src/app/chat/documentSidebar/DocumentSelector.tsx
index 833c6a7cad..2153ce5bdc 100644
--- a/web/src/app/chat/documentSidebar/DocumentSelector.tsx
+++ b/web/src/app/chat/documentSidebar/DocumentSelector.tsx
@@ -32,9 +32,8 @@ export function DocumentSelector({
         }
         onClick={onClick}
       >
-        <p className="mr-2 my-auto">Select</p>
         <input
-          className="my-auto"
+          className="cursor-pointer my-auto"
           type="checkbox"
           checked={isSelected}
           // dummy function to prevent warning
diff --git a/web/src/app/chat/documentSidebar/DocumentSidebar.tsx b/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
index aa962a1f9e..17a239b30a 100644
--- a/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
+++ b/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
@@ -1,5 +1,5 @@
 import { DanswerDocument } from "@/lib/search/interfaces";
-import { Text } from "@tremor/react";
+import { Divider, Text } from "@tremor/react";
 import { ChatDocumentDisplay } from "./ChatDocumentDisplay";
 import { usePopup } from "@/components/admin/connectors/Popup";
 import { FiAlertTriangle, FiFileText } from "react-icons/fi";
@@ -50,6 +50,7 @@ interface DocumentSidebarProps {
   maxTokens: number;
   isLoading: boolean;
   initialWidth: number;
+  isOpen: boolean;
 }
 
 export const DocumentSidebar = forwardRef<HTMLDivElement, DocumentSidebarProps>(
@@ -64,6 +65,7 @@ export const DocumentSidebar = forwardRef<HTMLDivElement, DocumentSidebarProps>(
       maxTokens,
       isLoading,
       initialWidth,
+      isOpen,
     },
     ref: ForwardedRef<HTMLDivElement>
   ) => {
@@ -86,43 +88,53 @@ export const DocumentSidebar = forwardRef<HTMLDivElement, DocumentSidebarProps>(
 
     return (
       <div
-        style={{ width: initialWidth }}
-        ref={ref}
-        className={`sidebar absolute right-0 h-screen border-l border-l-border`}
+        className={`fixed inset-0 transition-opacity duration-300 z-50 bg-black/80 ${
+          isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
+        onClick={(e) => {
+          if (e.target === e.currentTarget) {
+            closeSidebar();
+          }
+        }}
       >
         <div
-          className="w-full flex-initial 
-          overflow-y-hidden
-          flex
-          flex-col h-screen"
+          className={`ml-auto rounded-l-lg relative border-l bg-text-100 sidebar z-50 absolute right-0 h-screen transition-all duration-300 ${
+            isOpen ? "opacity-100 translate-x-0" : "opacity-0 translate-x-[10%]"
+          }`}
+          ref={ref}
+          style={{
+            width: initialWidth,
+          }}
         >
-          {popup}
-
-          <div className="h-4/6 flex flex-col">
-            <div className="pl-3 pr-6 mb-3 flex border-b border-border">
-              <SectionHeader
-                name={
-                  selectedMessageRetrievalType === RetrievalType.SelectedDocs
-                    ? "Referenced Documents"
-                    : "Retrieved Documents"
-                }
-                icon={FiFileText}
-                closeHeader={closeSidebar}
-              />
+          <div className="pb-6 flex-initial overflow-y-hidden flex flex-col h-screen ">
+            {popup}
+            <div className="pl-3 mx-2 pr-6 mt-3 flex text-text-800 flex-col text-2xl text-emphasis flex font-semibold">
+              {dedupedDocuments.length} Documents
+              <p className="text-sm font-semibold flex flex-wrap gap-x-2 text-text-600 mt-1">
+                Select to add to continuous context
+                <a
+                  href="https://docs.danswer.dev/introduction"
+                  className="underline cursor-pointer hover:text-strong"
+                >
+                  Learn more
+                </a>
+              </p>
             </div>
 
+            <Divider className="mb-0 mt-4 pb-2" />
+
             {currentDocuments ? (
-              <div className="overflow-y-auto dark-scrollbar flex flex-col">
+              <div className="overflow-y-auto flex-grow dark-scrollbar flex relative flex-col">
                 <div>
                   {dedupedDocuments.length > 0 ? (
                     dedupedDocuments.map((document, ind) => (
                       <div
                         key={document.document_id}
-                        className={
+                        className={`${
                           ind === dedupedDocuments.length - 1
                             ? "mb-5"
-                            : "border-b border-border-light mb-3"
-                        }
+                            : "border-b  border-border-light mb-3"
+                        }`}
                       >
                         <ChatDocumentDisplay
                           document={document}
@@ -163,84 +175,25 @@ export const DocumentSidebar = forwardRef<HTMLDivElement, DocumentSidebarProps>(
             )}
           </div>
 
-          <div className="text-sm mb-4 border-t border-border pt-4 overflow-y-hidden flex flex-col">
-            <div className="flex border-b border-border px-3">
-              <div className="flex">
-                <SectionHeader name="Selected Documents" icon={FiFileText} />
-                {tokenLimitReached && (
-                  <div className="ml-2 my-auto">
-                    <div className="mb-2">
-                      <HoverPopup
-                        mainContent={
-                          <FiAlertTriangle
-                            className="text-alert my-auto"
-                            size="16"
-                          />
-                        }
-                        popupContent={
-                          <Text className="w-40">
-                            Over LLM context length by:{" "}
-                            <i>{selectedDocumentTokens - maxTokens} tokens</i>
-                            <br />
-                            <br />
-                            {selectedDocuments &&
-                              selectedDocuments.length > 0 && (
-                                <>
-                                  Truncating: &quot;
-                                  <i>
-                                    {
-                                      selectedDocuments[
-                                        selectedDocuments.length - 1
-                                      ].semantic_identifier
-                                    }
-                                  </i>
-                                  &quot;
-                                </>
-                              )}
-                          </Text>
-                        }
-                        direction="left"
-                      />
-                    </div>
-                  </div>
-                )}
-              </div>
-              {selectedDocuments && selectedDocuments.length > 0 && (
-                <div
-                  className="ml-auto my-auto"
-                  onClick={clearSelectedDocuments}
-                >
-                  <BasicSelectable selected={false}>
-                    De-Select All
-                  </BasicSelectable>
-                </div>
-              )}
-            </div>
+          <div className="absolute left-0 bottom-0 w-full bg-gradient-to-b from-neutral-100/0 via-neutral-100/40 backdrop-blur-xs to-neutral-100 h-[100px]" />
+          <div className="sticky bottom-4 w-full left-0 justify-center flex gap-x-4">
+            <button
+              className="bg-[#84e49e] text-xs p-2 rounded text-text-800"
+              onClick={() => closeSidebar()}
+            >
+              Save Changes
+            </button>
 
-            {selectedDocuments && selectedDocuments.length > 0 ? (
-              <div className="flex flex-col gap-y-2 py-3 px-3 overflow-y-auto dark-scrollbar max-h-full">
-                {selectedDocuments.map((document) => (
-                  <SelectedDocumentDisplay
-                    key={document.document_id}
-                    document={document}
-                    handleDeselect={(documentId) => {
-                      toggleDocumentSelection(
-                        dedupedDocuments.find(
-                          (document) => document.document_id === documentId
-                        )!
-                      );
-                    }}
-                  />
-                ))}
-              </div>
-            ) : (
-              !isLoading && (
-                <Text className="mx-3 py-3">
-                  Select documents from the retrieved documents section to chat
-                  specifically with them!
-                </Text>
-              )
-            )}
+            <button
+              className="bg-error text-xs p-2 rounded text-text-200"
+              onClick={() => {
+                clearSelectedDocuments();
+
+                closeSidebar();
+              }}
+            >
+              Delete Context
+            </button>
           </div>
         </div>
       </div>
diff --git a/web/src/app/chat/files/InputBarPreview.tsx b/web/src/app/chat/files/InputBarPreview.tsx
index 8eee7bbf9c..5d473b9f2d 100644
--- a/web/src/app/chat/files/InputBarPreview.tsx
+++ b/web/src/app/chat/files/InputBarPreview.tsx
@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { ChatFileType, FileDescriptor } from "../interfaces";
-import { DocumentPreview } from "./documents/DocumentPreview";
+
+import { FiX, FiLoader, FiFileText } from "react-icons/fi";
 import { InputBarPreviewImage } from "./images/InputBarPreviewImage";
-import { FiX, FiLoader } from "react-icons/fi";
+import { Tooltip } from "@/components/tooltip/Tooltip";
 
 function DeleteButton({ onDelete }: { onDelete: () => void }) {
   return (
@@ -15,7 +16,7 @@ function DeleteButton({ onDelete }: { onDelete: () => void }) {
         cursor-pointer
         border-none
         bg-hover
-        p-1
+        p-.5
         rounded-full
         z-10
       "
@@ -25,6 +26,45 @@ function DeleteButton({ onDelete }: { onDelete: () => void }) {
   );
 }
 
+export function InputBarPreviewImageProvider({
+  file,
+  onDelete,
+  isUploading,
+}: {
+  file: FileDescriptor;
+  onDelete: () => void;
+  isUploading: boolean;
+}) {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className="h-10 relative"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {isHovered && <DeleteButton onDelete={onDelete} />}
+      {isUploading && (
+        <div
+          className="
+            absolute
+            inset-0
+            flex
+            items-center
+            justify-center
+            bg-opacity-50
+            rounded-lg
+            z-0
+          "
+        >
+          <FiLoader className="animate-spin text-white" />
+        </div>
+      )}
+      <InputBarPreviewImage fileId={file.id} />
+    </div>
+  );
+}
+
 export function InputBarPreview({
   file,
   onDelete,
@@ -36,12 +76,16 @@ export function InputBarPreview({
 }) {
   const [isHovered, setIsHovered] = useState(false);
 
-  const renderContent = () => {
-    if (file.type === ChatFileType.IMAGE) {
-      return <InputBarPreviewImage fileId={file.id} />;
+  const fileNameRef = useRef<HTMLDivElement>(null);
+  const [isOverflowing, setIsOverflowing] = useState(false);
+
+  useEffect(() => {
+    if (fileNameRef.current) {
+      setIsOverflowing(
+        fileNameRef.current.scrollWidth > fileNameRef.current.clientWidth
+      );
     }
-    return <DocumentPreview fileName={file.name || file.id} />;
-  };
+  }, [file.name]);
 
   return (
     <div
@@ -49,7 +93,6 @@ export function InputBarPreview({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      {isHovered && <DeleteButton onDelete={onDelete} />}
       {isUploading && (
         <div
           className="
@@ -58,7 +101,6 @@ export function InputBarPreview({
             flex
             items-center
             justify-center
-            bg-black
             bg-opacity-50
             rounded-lg
             z-0
@@ -67,7 +109,58 @@ export function InputBarPreview({
           <FiLoader className="animate-spin text-white" />
         </div>
       )}
-      {renderContent()}
+      <div
+        className={`
+        flex
+        items-center
+        p-2
+        bg-hover
+        border
+        border-border
+        rounded-md
+        box-border
+        h-10
+      `}
+      >
+        <div className="flex-shrink-0">
+          <div
+            className="
+            w-6
+            h-6
+            bg-document
+            flex
+            items-center
+            justify-center
+            rounded-md
+          "
+          >
+            <FiFileText className="w-4 h-4 text-white" />
+          </div>
+        </div>
+        <div className="ml-2 relative">
+          <Tooltip content={file.name} side="top" align="start">
+            <div
+              ref={fileNameRef}
+              className={`font-medium text-sm line-clamp-1 break-all ellipses max-w-48`}
+            >
+              {file.name}
+            </div>
+          </Tooltip>
+        </div>
+        <button
+          onClick={onDelete}
+          className="
+            cursor-pointer
+            border-none
+            bg-hover
+            p-1
+            rounded-full
+            z-10
+          "
+        >
+          <FiX />
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/web/src/app/chat/files/documents/DocumentPreview.tsx b/web/src/app/chat/files/documents/DocumentPreview.tsx
index 7e584f34d3..07dddd53cf 100644
--- a/web/src/app/chat/files/documents/DocumentPreview.tsx
+++ b/web/src/app/chat/files/documents/DocumentPreview.tsx
@@ -5,9 +5,11 @@ import { Tooltip } from "@/components/tooltip/Tooltip";
 export function DocumentPreview({
   fileName,
   maxWidth,
+  alignBubble,
 }: {
   fileName: string;
   maxWidth?: string;
+  alignBubble?: boolean;
 }) {
   const [isOverflowing, setIsOverflowing] = useState(false);
   const fileNameRef = useRef<HTMLDivElement>(null);
@@ -22,7 +24,8 @@ export function DocumentPreview({
 
   return (
     <div
-      className="
+      className={`
+        ${alignBubble && "w-64"}
         flex
         items-center
         p-2
@@ -32,7 +35,7 @@ export function DocumentPreview({
         rounded-md
         box-border
         h-16
-      "
+      `}
     >
       <div className="flex-shrink-0">
         <div
@@ -53,7 +56,7 @@ export function DocumentPreview({
         <Tooltip content={fileName} side="top" align="start">
           <div
             ref={fileNameRef}
-            className={`font-medium text-sm truncate ${
+            className={`font-medium text-sm line-clamp-1 break-all ellipses ${
               maxWidth ? maxWidth : "max-w-48"
             }`}
           >
@@ -65,3 +68,69 @@ export function DocumentPreview({
     </div>
   );
 }
+
+export function InputDocumentPreview({
+  fileName,
+  maxWidth,
+  alignBubble,
+}: {
+  fileName: string;
+  maxWidth?: string;
+  alignBubble?: boolean;
+}) {
+  const [isOverflowing, setIsOverflowing] = useState(false);
+  const fileNameRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (fileNameRef.current) {
+      setIsOverflowing(
+        fileNameRef.current.scrollWidth > fileNameRef.current.clientWidth
+      );
+    }
+  }, [fileName]);
+
+  return (
+    <div
+      className={`
+        ${alignBubble && "w-64"}
+        flex
+        items-center
+        p-2
+        bg-hover
+        border
+        border-border
+        rounded-md
+        box-border
+        h-10
+      `}
+    >
+      <div className="flex-shrink-0">
+        <div
+          className="
+            w-6
+            h-6
+            bg-document
+            flex
+            items-center
+            justify-center
+            rounded-md
+          "
+        >
+          <FiFileText className="w-4 h-4 text-white" />
+        </div>
+      </div>
+      <div className="ml-2 relative">
+        <Tooltip content={fileName} side="top" align="start">
+          <div
+            ref={fileNameRef}
+            className={`font-medium text-sm line-clamp-1 break-all ellipses ${
+              maxWidth ? maxWidth : "max-w-48"
+            }`}
+          >
+            {fileName}
+          </div>
+        </Tooltip>
+      </div>
+    </div>
+  );
+}
diff --git a/web/src/app/chat/files/images/InMessageImage.tsx b/web/src/app/chat/files/images/InMessageImage.tsx
index 75b58cbed9..97f5c6ea5a 100644
--- a/web/src/app/chat/files/images/InMessageImage.tsx
+++ b/web/src/app/chat/files/images/InMessageImage.tsx
@@ -16,14 +16,7 @@ export function InMessageImage({ fileId }: { fileId: string }) {
       />
 
       <img
-        className={`
-          max-w-lg 
-          rounded-lg 
-          bg-transparent 
-          cursor-pointer 
-          transition-opacity 
-          duration-300 
-          opacity-100`}
+        className="object-cover object-center overflow-hidden rounded-lg w-full h-full max-w-64 max-h-64 transition-opacity duration-300 opacity-100"
         onClick={() => setFullImageShowing(true)}
         src={buildImgUrl(fileId)}
         loading="lazy"
diff --git a/web/src/app/chat/files/images/InputBarPreviewImage.tsx b/web/src/app/chat/files/images/InputBarPreviewImage.tsx
index 372d0be60f..51260af1d2 100644
--- a/web/src/app/chat/files/images/InputBarPreviewImage.tsx
+++ b/web/src/app/chat/files/images/InputBarPreviewImage.tsx
@@ -14,10 +14,24 @@ export function InputBarPreviewImage({ fileId }: { fileId: string }) {
         open={fullImageShowing}
         onOpenChange={(open) => setFullImageShowing(open)}
       />
-      <div>
+      <div
+        className={`
+          bg-transparent
+          border-none
+          flex
+          items-center
+          p-2
+          bg-hover
+          border
+          border-border
+          rounded-md
+          box-border
+          h-10
+      `}
+      >
         <img
           onClick={() => setFullImageShowing(true)}
-          className="h-16 w-16 object-cover rounded-lg bg-background cursor-pointer"
+          className="h-8 w-8 object-cover rounded-lg bg-background cursor-pointer"
           src={buildImgUrl(fileId)}
         />
       </div>
diff --git a/web/src/app/chat/folders/FolderList.tsx b/web/src/app/chat/folders/FolderList.tsx
index 8fa0f05a48..37937ade26 100644
--- a/web/src/app/chat/folders/FolderList.tsx
+++ b/web/src/app/chat/folders/FolderList.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import { Folder } from "./interfaces";
 import { ChatSessionDisplay } from "../sessionSidebar/ChatSessionDisplay"; // Ensure this is correctly imported
 import {
@@ -22,6 +22,9 @@ import { usePopup } from "@/components/admin/connectors/Popup";
 import { useRouter } from "next/navigation";
 import { CHAT_SESSION_ID_KEY } from "@/lib/drag/constants";
 import Cookies from "js-cookie";
+import { CustomTooltip } from "@/components/tooltip/CustomTooltip";
+import { Tooltip } from "@/components/tooltip/Tooltip";
+import { Popover } from "@/components/popover/Popover";
 
 const FolderItem = ({
   folder,
@@ -54,6 +57,8 @@ const FolderItem = ({
       if (newIsExpanded) {
         openedFolders[folder.folder_id] = true;
       } else {
+        setShowDeleteConfirm(false);
+
         delete openedFolders[folder.folder_id];
       }
       Cookies.set("openedFolders", JSON.stringify(openedFolders));
@@ -87,18 +92,47 @@ const FolderItem = ({
     }
   };
 
-  const deleteFolderHandler = async (
-    event: React.MouseEvent<HTMLDivElement>
-  ) => {
-    event.stopPropagation(); // Prevent the event from bubbling up to the toggle expansion
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState<boolean>(false);
+  const deleteConfirmRef = useRef<HTMLDivElement>(null);
+
+  const handleDeleteClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    setShowDeleteConfirm(true);
+  };
+
+  const confirmDelete = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
     try {
       await deleteFolder(folder.folder_id);
-      router.refresh(); // Refresh values to update the sidebar
+      router.refresh();
     } catch (error) {
       setPopup({ message: "Failed to delete folder", type: "error" });
+    } finally {
+      setShowDeleteConfirm(false);
     }
   };
 
+  const cancelDelete = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    setShowDeleteConfirm(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        deleteConfirmRef.current &&
+        !deleteConfirmRef.current.contains(event.target as Node)
+      ) {
+        setShowDeleteConfirm(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
   const handleDrop = async (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     setIsDragOver(false);
@@ -134,13 +168,38 @@ const FolderItem = ({
         isDragOver ? "bg-hover" : ""
       }`}
     >
+      {showDeleteConfirm && (
+        <div
+          ref={deleteConfirmRef}
+          className="absolute max-w-xs border z-[100] border-neutral-300 top-0 right-0 w-[250px] -bo-0 top-2 mt-4 p-2 bg-background-100 rounded shadow-lg z-10"
+        >
+          <p className="text-sm mb-2">
+            Are you sure you want to delete <i>{folder.folder_name}</i>? All the
+            content inside this folder will also be deleted
+          </p>
+          <div className="flex justify-end">
+            <button
+              onClick={confirmDelete}
+              className="bg-red-500 hover:bg-red-600 text-white px-2 py-1 rounded text-xs mr-2"
+            >
+              Yes
+            </button>
+            <button
+              onClick={cancelDelete}
+              className="bg-gray-300 hover:bg-gray-200 px-2 py-1 rounded text-xs"
+            >
+              No
+            </button>
+          </div>
+        </div>
+      )}
       <BasicSelectable fullWidth selected={false}>
         <div
           onMouseEnter={() => setIsHovering(true)}
           onMouseLeave={() => setIsHovering(false)}
         >
           <div onClick={toggleFolderExpansion} className="cursor-pointer">
-            <div className="text-sm text-medium flex items-center justify-start w-full">
+            <div className="text-sm text-text-600 flex items-center justify-start w-full">
               <div className="mr-2">
                 {isExpanded ? (
                   <FiChevronDown size={16} />
@@ -172,14 +231,24 @@ const FolderItem = ({
                   >
                     <FiEdit2 size={16} />
                   </div>
-                  <div
+                  <div className="relative">
+                    <div
+                      onClick={handleDeleteClick}
+                      className="hover:bg-black/10 p-1 -m-1 rounded ml-2"
+                    >
+                      <FiTrash size={16} />
+                    </div>
+                  </div>
+
+                  {/* <div
                     onClick={deleteFolderHandler}
                     className="hover:bg-black/10 p-1 -m-1 rounded ml-2"
                   >
                     <FiTrash size={16} />
-                  </div>
+                  </div> */}
                 </div>
               )}
+
               {isEditing && (
                 <div className="flex ml-auto my-auto">
                   <div
@@ -223,7 +292,7 @@ export const FolderList = ({
 }: {
   folders: Folder[];
   currentChatId?: number;
-  openedFolders: { [key: number]: boolean };
+  openedFolders?: { [key: number]: boolean };
 }) => {
   if (folders.length === 0) {
     return null;
@@ -236,7 +305,9 @@ export const FolderList = ({
           key={folder.folder_id}
           folder={folder}
           currentChatId={currentChatId}
-          isInitiallyExpanded={openedFolders[folder.folder_id] || false}
+          isInitiallyExpanded={
+            openedFolders ? openedFolders[folder.folder_id] || false : false
+          }
         />
       ))}
     </div>
diff --git a/web/src/app/chat/input/ChatInputAssistant.tsx b/web/src/app/chat/input/ChatInputAssistant.tsx
new file mode 100644
index 0000000000..d2d062eb2f
--- /dev/null
+++ b/web/src/app/chat/input/ChatInputAssistant.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import { Persona } from "@/app/admin/assistants/interfaces";
+import { AssistantIcon } from "@/components/assistants/AssistantIcon";
+import { Tooltip } from "@/components/tooltip/Tooltip";
+import { ForwardedRef, forwardRef, useState } from "react";
+import { FiX } from "react-icons/fi";
+
+interface DocumentSidebarProps {
+  alternativeAssistant: Persona;
+  unToggle: () => void;
+}
+
+export const ChatInputAssistant = forwardRef<
+  HTMLDivElement,
+  DocumentSidebarProps
+>(({ alternativeAssistant, unToggle }, ref: ForwardedRef<HTMLDivElement>) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      className="flex-none h-10 duration-300 h-10 items-center rounded-lg bg-background-150"
+    >
+      <Tooltip
+        content={
+          <p className="max-w-xs flex">{alternativeAssistant.description}</p>
+        }
+      >
+        <div
+          ref={ref}
+          className="p-2 gap-x-1 relative rounded-t-lg items-center flex"
+        >
+          <AssistantIcon assistant={alternativeAssistant} border />
+          <p className="ml-1 line-clamp-1 ellipsis break-all my-auto">
+            {alternativeAssistant.name}
+          </p>
+          <div
+            className="rounded-lg rounded h-fit cursor-pointer"
+            onClick={unToggle}
+          >
+            <FiX />
+          </div>
+        </div>
+      </Tooltip>
+    </div>
+  );
+});
+
+ChatInputAssistant.displayName = "TempAssistant";
+export default ChatInputAssistant;
diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx
index 5664fb7658..6934999ae8 100644
--- a/web/src/app/chat/input/ChatInputBar.tsx
+++ b/web/src/app/chat/input/ChatInputBar.tsx
@@ -1,36 +1,37 @@
-import React, {
-  Dispatch,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import {
-  FiSend,
-  FiFilter,
-  FiPlusCircle,
-  FiCpu,
-  FiX,
-  FiPlus,
-  FiInfo,
-} from "react-icons/fi";
-import ChatInputOption from "./ChatInputOption";
-import { FaBrain } from "react-icons/fa";
+import React, { useEffect, useRef, useState } from "react";
+import { FiPlusCircle, FiPlus, FiInfo, FiX } from "react-icons/fi";
+import { ChatInputOption } from "./ChatInputOption";
 import { Persona } from "@/app/admin/assistants/interfaces";
 import { FilterManager, LlmOverrideManager } from "@/lib/hooks";
 import { SelectedFilterDisplay } from "./SelectedFilterDisplay";
 import { useChatContext } from "@/components/context/ChatContext";
 import { getFinalLLM } from "@/lib/llm/utils";
-import { FileDescriptor } from "../interfaces";
-import { InputBarPreview } from "../files/InputBarPreview";
-import { RobotIcon } from "@/components/icons/icons";
-import { Hoverable } from "@/components/Hoverable";
+import { ChatFileType, FileDescriptor } from "../interfaces";
+import {
+  InputBarPreview,
+  InputBarPreviewImageProvider,
+} from "../files/InputBarPreview";
+import {
+  AssistantsIconSkeleton,
+  CpuIconSkeleton,
+  FileIcon,
+  SendIcon,
+} from "@/components/icons/icons";
+import { IconType } from "react-icons";
+import Popup from "../../../components/popup/Popup";
+import { LlmTab } from "../modal/configuration/LlmTab";
+import { AssistantsTab } from "../modal/configuration/AssistantsTab";
+import ChatInputAssistant from "./ChatInputAssistant";
+import { DanswerDocument } from "@/lib/search/interfaces";
 import { AssistantIcon } from "@/components/assistants/AssistantIcon";
 import { Tooltip } from "@/components/tooltip/Tooltip";
+import { Hoverable } from "@/components/Hoverable";
 const MAX_INPUT_HEIGHT = 200;
 
 export function ChatInputBar({
   personas,
+  showDocs,
+  selectedDocuments,
   message,
   setMessage,
   onSubmit,
@@ -42,13 +43,21 @@ export function ChatInputBar({
   onSetSelectedAssistant,
   selectedAssistant,
   files,
+
+  setSelectedAssistant,
   setFiles,
   handleFileUpload,
   setConfigModalActiveTab,
   textAreaRef,
   alternativeAssistant,
+  chatSessionId,
+  availableAssistants,
 }: {
+  showDocs: () => void;
+  selectedDocuments: DanswerDocument[];
+  availableAssistants: Persona[];
   onSetSelectedAssistant: (alternativeAssistant: Persona | null) => void;
+  setSelectedAssistant: (assistant: Persona) => void;
   personas: Persona[];
   message: string;
   setMessage: (message: string) => void;
@@ -65,6 +74,7 @@ export function ChatInputBar({
   handleFileUpload: (files: File[]) => void;
   setConfigModalActiveTab: (tab: string) => void;
   textAreaRef: React.RefObject<HTMLTextAreaElement>;
+  chatSessionId?: number;
 }) {
   // handle re-sizing of the text area
   useEffect(() => {
@@ -102,19 +112,6 @@ export function ChatInputBar({
   const [showSuggestions, setShowSuggestions] = useState(false);
 
   const interactionsRef = useRef<HTMLDivElement | null>(null);
-
-  const hideSuggestions = () => {
-    setShowSuggestions(false);
-    setAssistantIconIndex(0);
-  };
-
-  // Update selected persona
-  const updateCurrentPersona = (persona: Persona) => {
-    onSetSelectedAssistant(persona.id == selectedAssistant.id ? null : persona);
-    hideSuggestions();
-    setMessage("");
-  };
-
   // Click out of assistant suggestions
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
@@ -133,6 +130,18 @@ export function ChatInputBar({
     };
   }, []);
 
+  const hideSuggestions = () => {
+    setShowSuggestions(false);
+    setAssistantIconIndex(0);
+  };
+
+  // Update selected persona
+  const updateCurrentPersona = (persona: Persona) => {
+    onSetSelectedAssistant(persona.id == selectedAssistant.id ? null : persona);
+    hideSuggestions();
+    setMessage("");
+  };
+
   // Complete user input handling
   const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const text = event.target.value;
@@ -143,7 +152,6 @@ export function ChatInputBar({
       return;
     }
 
-    // If looking for an assistant...fup
     const match = text.match(/(?:\s|^)@(\w*)$/);
     if (match) {
       setShowSuggestions(true);
@@ -179,7 +187,12 @@ export function ChatInputBar({
           filteredPersonas[assistantIconIndex >= 0 ? assistantIconIndex : 0];
         updateCurrentPersona(option);
       }
-    } else if (e.key === "ArrowDown") {
+    }
+    if (!showSuggestions) {
+      return;
+    }
+
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       setAssistantIconIndex((assistantIconIndex) =>
         Math.min(assistantIconIndex + 1, filteredPersonas.length)
@@ -197,13 +210,12 @@ export function ChatInputBar({
       <div className="flex justify-center pb-2 max-w-screen-lg mx-auto mb-2">
         <div
           className="
-            w-full
+            w-[90%]
             shrink
+            bg-background
             relative
             px-4
-            w-searchbar-xs
-            2xl:w-searchbar-sm
-            3xl:w-searchbar
+            max-w-searchbar-max
             mx-auto
           "
         >
@@ -212,16 +224,18 @@ export function ChatInputBar({
               ref={suggestionsRef}
               className="text-sm absolute inset-x-0 top-0 w-full transform -translate-y-full"
             >
-              <div className="rounded-lg py-1.5 bg-white border border-border-medium overflow-hidden shadow-lg mx-2 px-1.5 mt-2 rounded z-10">
+              <div className="rounded-lg py-1.5 bg-background border border-border-medium shadow-lg mx-2 px-1.5 mt-2 rounded z-10">
                 {filteredPersonas.map((currentPersona, index) => (
                   <button
                     key={index}
-                    className={`px-2 ${assistantIconIndex == index && "bg-hover"} rounded content-start flex gap-x-1 py-1.5 w-full  hover:bg-hover cursor-pointer`}
+                    className={`px-2 ${
+                      assistantIconIndex == index && "bg-hover-lightish"
+                    } rounded  rounded-lg content-start flex gap-x-1 py-2 w-full  hover:bg-hover-lightish cursor-pointer`}
                     onClick={() => {
                       updateCurrentPersona(currentPersona);
                     }}
                   >
-                    <p className="font-bold ">{currentPersona.name}</p>
+                    <p className="font-bold">{currentPersona.name}</p>
                     <p className="line-clamp-1">
                       {currentPersona.id == selectedAssistant.id &&
                         "(default) "}
@@ -232,7 +246,9 @@ export function ChatInputBar({
                 <a
                   key={filteredPersonas.length}
                   target="_blank"
-                  className={`${assistantIconIndex == filteredPersonas.length && "bg-hover"} px-3 flex gap-x-1 py-2 w-full  items-center  hover:bg-hover-light cursor-pointer"`}
+                  className={`${
+                    assistantIconIndex == filteredPersonas.length && "bg-hover"
+                  } rounded rounded-lg px-3 flex gap-x-1 py-2 w-full  items-center  hover:bg-hover-lightish cursor-pointer"`}
                   href="/assistants/new"
                 >
                   <FiPlus size={17} />
@@ -241,23 +257,21 @@ export function ChatInputBar({
               </div>
             </div>
           )}
-
           <div>
             <SelectedFilterDisplay filterManager={filterManager} />
           </div>
-
           <div
             className="
               opacity-100
               w-full
               h-fit
+              bg-bl
               flex
               flex-col
               border
-              border-border-medium
+              border-[#E5E7EB]
               rounded-lg
-              overflow-hidden
-              bg-background-weak
+              bg-background-100
               [&:has(textarea:focus)]::ring-1
               [&:has(textarea:focus)]::ring-black
             "
@@ -266,13 +280,13 @@ export function ChatInputBar({
               <div className="flex flex-wrap gap-y-1 gap-x-2 px-2 pt-1.5 w-full">
                 <div
                   ref={interactionsRef}
-                  className="bg-background-subtle p-2 rounded-t-lg  items-center flex w-full"
+                  className="bg-background-200 p-2 rounded-t-lg items-center flex w-full"
                 >
                   <AssistantIcon assistant={alternativeAssistant} border />
                   <p className="ml-3 text-strong my-auto">
                     {alternativeAssistant.name}
                   </p>
-                  <div className="flex gap-x-1 ml-auto ">
+                  <div className="flex gap-x-1 ml-auto">
                     <Tooltip
                       content={
                         <p className="max-w-xs flex flex-wrap">
@@ -293,24 +307,50 @@ export function ChatInputBar({
                 </div>
               </div>
             )}
-
-            {files.length > 0 && (
-              <div className="flex flex-wrap gap-y-1 gap-x-2 px-2 pt-2">
-                {files.map((file) => (
-                  <div key={file.id}>
-                    <InputBarPreview
-                      file={file}
-                      onDelete={() => {
-                        setFiles(
-                          files.filter(
-                            (fileInFilter) => fileInFilter.id !== file.id
-                          )
-                        );
-                      }}
-                      isUploading={file.isUploading || false}
-                    />
-                  </div>
-                ))}
+            {(selectedDocuments.length > 0 || files.length > 0) && (
+              <div className="flex gap-x-2 px-2 pt-2">
+                <div className="flex gap-x-1 px-2 overflow-y-auto overflow-x-scroll items-end miniscroll">
+                  {selectedDocuments.length > 0 && (
+                    <button
+                      onClick={showDocs}
+                      className="flex-none flex cursor-pointer hover:bg-background-200 transition-colors duration-300 h-10 p-1 items-center gap-x-1 rounded-lg bg-background-150 max-w-[100px]"
+                    >
+                      <FileIcon size={24} />
+                      <p className="text-xs">
+                        {selectedDocuments.length} selected
+                      </p>
+                    </button>
+                  )}
+                  {files.map((file) => (
+                    <div className="flex-none" key={file.id}>
+                      {file.type === ChatFileType.IMAGE ? (
+                        <InputBarPreviewImageProvider
+                          file={file}
+                          onDelete={() => {
+                            setFiles(
+                              files.filter(
+                                (fileInFilter) => fileInFilter.id !== file.id
+                              )
+                            );
+                          }}
+                          isUploading={file.isUploading || false}
+                        />
+                      ) : (
+                        <InputBarPreview
+                          file={file}
+                          onDelete={() => {
+                            setFiles(
+                              files.filter(
+                                (fileInFilter) => fileInFilter.id !== file.id
+                              )
+                            );
+                          }}
+                          isUploading={file.isUploading || false}
+                        />
+                      )}
+                    </div>
+                  ))}
+                </div>
               </div>
             )}
 
@@ -324,21 +364,20 @@ export function ChatInputBar({
                 w-full
                 shrink
                 resize-none
+                rounded-lg
                 border-0
-                bg-background-weak
+                bg-background-100
                 ${
                   textAreaRef.current &&
                   textAreaRef.current.scrollHeight > MAX_INPUT_HEIGHT
                     ? "overflow-y-auto mt-2"
                     : ""
                 }
-                overflow-hidden
                 whitespace-normal
                 break-word
                 overscroll-contain
                 outline-none
                 placeholder-subtle
-                overflow-hidden
                 resize-none
                 pl-4
                 pr-12
@@ -349,7 +388,7 @@ export function ChatInputBar({
               style={{ scrollbarWidth: "thin" }}
               role="textarea"
               aria-multiline
-              placeholder="Send a message..."
+              placeholder="Send a message or @ to tag an assistant..."
               value={message}
               onKeyDown={(event) => {
                 if (
@@ -364,39 +403,60 @@ export function ChatInputBar({
               }}
               suppressContentEditableWarning={true}
             />
-            <div className="flex items-center space-x-3 mr-12 px-4 pb-2 overflow-hidden">
-              <ChatInputOption
-                flexPriority="shrink"
-                name={selectedAssistant ? selectedAssistant.name : "Assistants"}
-                icon={FaBrain}
-                onClick={() => setConfigModalActiveTab("assistants")}
-              />
 
-              <ChatInputOption
-                flexPriority="second"
-                name={
-                  llmOverrideManager.llmOverride.modelName ||
-                  (selectedAssistant
-                    ? selectedAssistant.llm_model_version_override || llmName
-                    : llmName)
-                }
-                icon={FiCpu}
-                onClick={() => setConfigModalActiveTab("llms")}
-              />
-
-              {!retrievalDisabled && (
+            <div className="flex items-center space-x-3 mr-12 px-4 pb-2 ">
+              <Popup
+                removePadding
+                content={(close) => (
+                  <AssistantsTab
+                    availableAssistants={availableAssistants}
+                    llmProviders={llmProviders}
+                    selectedAssistant={selectedAssistant}
+                    onSelect={(assistant) => {
+                      setSelectedAssistant(assistant);
+                      close();
+                    }}
+                  />
+                )}
+                position="top"
+              >
                 <ChatInputOption
-                  flexPriority="stiff"
-                  name="Filters"
-                  icon={FiFilter}
-                  onClick={() => setConfigModalActiveTab("filters")}
+                  flexPriority="shrink"
+                  name={
+                    selectedAssistant ? selectedAssistant.name : "Assistants"
+                  }
+                  Icon={AssistantsIconSkeleton as IconType}
                 />
-              )}
+              </Popup>
+
+              <Popup
+                content={(close, ref) => (
+                  <LlmTab
+                    close={close}
+                    ref={ref}
+                    llmOverrideManager={llmOverrideManager}
+                    chatSessionId={chatSessionId}
+                    currentAssistant={selectedAssistant}
+                  />
+                )}
+                position="top"
+              >
+                <ChatInputOption
+                  flexPriority="second"
+                  name={
+                    llmOverrideManager.llmOverride.modelName ||
+                    (selectedAssistant
+                      ? selectedAssistant.llm_model_version_override || llmName
+                      : llmName)
+                  }
+                  Icon={CpuIconSkeleton}
+                />
+              </Popup>
 
               <ChatInputOption
                 flexPriority="stiff"
                 name="File"
-                icon={FiPlusCircle}
+                Icon={FiPlusCircle}
                 onClick={() => {
                   const input = document.createElement("input");
                   input.type = "file";
@@ -426,10 +486,10 @@ export function ChatInputBar({
                   }
                 }}
               >
-                <FiSend
-                  size={18}
-                  className={`text-emphasis w-9 h-9 p-2 rounded-lg ${
-                    message ? "bg-blue-200" : ""
+                <SendIcon
+                  size={28}
+                  className={`text-emphasis text-white p-1 rounded-full ${
+                    message ? "bg-background-800" : "bg-[#D7D7D7]"
                   }`}
                 />
               </div>
diff --git a/web/src/app/chat/input/ChatInputOption.tsx b/web/src/app/chat/input/ChatInputOption.tsx
index 0d22111646..69ed373e56 100644
--- a/web/src/app/chat/input/ChatInputOption.tsx
+++ b/web/src/app/chat/input/ChatInputOption.tsx
@@ -1,110 +1,96 @@
-import React, { useState } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { IconType } from "react-icons";
 import { DefaultDropdownElement } from "../../../components/Dropdown";
 import { Popover } from "../../../components/popover/Popover";
+import { IconProps } from "@/components/icons/icons";
 
 interface ChatInputOptionProps {
   name: string;
-  icon: IconType;
-  onClick: () => void;
+  Icon: ({ size, className }: IconProps) => JSX.Element;
+  onClick?: () => void;
   size?: number;
-
+  tooltipContent?: React.ReactNode;
   options?: { name: string; value: number; onClick?: () => void }[];
   flexPriority?: "shrink" | "stiff" | "second";
 }
 
-const ChatInputOption = ({
+export const ChatInputOption: React.FC<ChatInputOptionProps> = ({
   name,
-  icon: Icon,
-  onClick,
+  Icon,
+  // icon: Icon,
   size = 16,
   options,
   flexPriority,
-}: ChatInputOptionProps) => {
+  tooltipContent,
+  onClick,
+}) => {
   const [isDropupVisible, setDropupVisible] = useState(false);
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const componentRef = useRef<HTMLDivElement>(null);
 
-  const handleClick = () => {
-    setDropupVisible(!isDropupVisible);
-    // onClick();
-  };
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        componentRef.current &&
+        !componentRef.current.contains(event.target as Node)
+      ) {
+        setIsTooltipVisible(false);
+        setDropupVisible(false);
+      }
+    };
 
-  const dropdownContent = options ? (
-    <div
-      className={`
-        border 
-        border 
-        rounded-lg 
-        flex 
-        flex-col 
-        bg-background
-        overflow-y-auto 
-        overscroll-contain`}
-    >
-      {options.map((option) => (
-        <DefaultDropdownElement
-          key={option.value}
-          name={option.name}
-          onSelect={() => {
-            if (option.onClick) {
-              option.onClick();
-              setDropupVisible(false);
-            }
-          }}
-          isSelected={false}
-        />
-      ))}
-    </div>
-  ) : null;
-
-  const option = (
-    <div className="relative w-fit">
-      <div
-        className="
-          cursor-pointer 
-          flex 
-          items-center 
-          space-x-2 
-          text-subtle
-          hover:bg-hover
-          hover:text-emphasis
-          p-1.5
-          rounded-md
-        "
-        onClick={handleClick}
-        title={name}
-      >
-        <Icon size={size} className="flex-none" />
-        <span className="text-sm break-all line-clamp-1">{name}</span>
-      </div>
-    </div>
-  );
-
-  if (!dropdownContent) {
-    return (
-      <div
-        onClick={onClick}
-        className={`text-ellipsis
-          ${flexPriority == "shrink" && "flex-shrink-[10000] flex-grow-0 flex-basis-auto min-w-[30px] whitespace-nowrap overflow-hidden"}
-          ${flexPriority == "second" && "flex-shrink flex-basis-0 min-w-[30px] whitespace-nowrap overflow-hidden"}
-          ${flexPriority == "stiff" && "flex-none whitespace-nowrap overflow-hidden"}
-          `}
-      >
-        {option}
-      </div>
-    );
-  }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
 
   return (
-    <Popover
-      open={isDropupVisible}
-      onOpenChange={setDropupVisible}
-      content={option}
-      popover={dropdownContent}
-      side="top"
-      align="start"
-      sideOffset={5}
-    />
+    <div
+      ref={componentRef}
+      className={`
+        relative 
+        cursor-pointer 
+        flex 
+        items-center 
+        space-x-2 
+        text-text-700
+        hover:bg-hover
+        hover:text-emphasis
+        p-1.5
+        rounded-md
+        ${
+          flexPriority === "shrink" &&
+          "flex-shrink-[10000] flex-grow-0 flex-basis-auto min-w-[30px] whitespace-nowrap overflow-hidden"
+        }
+        ${
+          flexPriority === "second" &&
+          "flex-shrink flex-basis-0 min-w-[30px] whitespace-nowrap overflow-hidden"
+        }
+        ${
+          flexPriority === "stiff" &&
+          "flex-none whitespace-nowrap overflow-hidden"
+        }
+      `}
+      title={name}
+      onClick={onClick}
+    >
+      <Icon size={size} className="flex-none" />
+      <span className="text-sm break-all line-clamp-1">{name}</span>
+      {isTooltipVisible && tooltipContent && (
+        <div
+          className="absolute z-10 p-2 text-sm text-white bg-black rounded shadow-lg"
+          style={{
+            top: "100%",
+            left: "50%",
+            transform: "translateX(-50%)",
+            marginTop: "0.5rem",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {tooltipContent}
+        </div>
+      )}
+    </div>
   );
 };
-
-export default ChatInputOption;
diff --git a/web/src/app/chat/interfaces.ts b/web/src/app/chat/interfaces.ts
index 902f5b8655..ee918dc8dc 100644
--- a/web/src/app/chat/interfaces.ts
+++ b/web/src/app/chat/interfaces.ts
@@ -1,4 +1,8 @@
-import { DanswerDocument, Filters } from "@/lib/search/interfaces";
+import {
+  DanswerDocument,
+  Filters,
+  SearchDanswerDocument,
+} from "@/lib/search/interfaces";
 
 export enum RetrievalType {
   None = "none",
@@ -30,10 +34,15 @@ export interface FileDescriptor {
   id: string;
   type: ChatFileType;
   name?: string | null;
+
   // FE only
   isUploading?: boolean;
 }
 
+export interface LLMRelevanceFilterPacket {
+  relevant_chunk_indices: number[];
+}
+
 export interface ToolCallMetadata {
   tool_name: string;
   tool_args: Record<string, any>;
@@ -56,6 +65,13 @@ export interface ChatSession {
   current_alternate_model: string;
 }
 
+export interface SearchSession {
+  search_session_id: number;
+  documents: SearchDanswerDocument[];
+  messages: BackendMessage[];
+  description: string;
+}
+
 export interface Message {
   messageId: number;
   message: string;
@@ -86,6 +102,8 @@ export interface BackendChatSession {
 
 export interface BackendMessage {
   message_id: number;
+  comments: any;
+  chat_session_id: number;
   parent_message: number | null;
   latest_child_message: number | null;
   message: string;
diff --git a/web/src/app/chat/lib.tsx b/web/src/app/chat/lib.tsx
index c666914c26..3477b77937 100644
--- a/web/src/app/chat/lib.tsx
+++ b/web/src/app/chat/lib.tsx
@@ -516,11 +516,9 @@ export function checkAnyAssistantHasSearch(
       ) {
         return false;
       }
-
       const alternateAssistant = availablePersonas.find(
         (persona) => persona.id === message.alternateAssistantID
       );
-
       return alternateAssistant
         ? personaIncludesRetrieval(alternateAssistant)
         : false;
@@ -549,11 +547,16 @@ const PARAMS_TO_SKIP = [
 export function buildChatUrl(
   existingSearchParams: ReadonlyURLSearchParams,
   chatSessionId: number | null,
-  personaId: number | null
+  personaId: number | null,
+  search?: boolean
 ) {
   const finalSearchParams: string[] = [];
   if (chatSessionId) {
-    finalSearchParams.push(`${SEARCH_PARAM_NAMES.CHAT_ID}=${chatSessionId}`);
+    finalSearchParams.push(
+      `${
+        search ? SEARCH_PARAM_NAMES.SEARCH_ID : SEARCH_PARAM_NAMES.CHAT_ID
+      }=${chatSessionId}`
+    );
   }
   if (personaId !== null) {
     finalSearchParams.push(`${SEARCH_PARAM_NAMES.PERSONA_ID}=${personaId}`);
@@ -567,10 +570,10 @@ export function buildChatUrl(
   const finalSearchParamsString = finalSearchParams.join("&");
 
   if (finalSearchParamsString) {
-    return `/chat?${finalSearchParamsString}`;
+    return `/${search ? "search" : "chat"}?${finalSearchParamsString}`;
   }
 
-  return "/chat";
+  return `/${search ? "search" : "chat"}`;
 }
 
 export async function uploadFilesForChat(
diff --git a/web/src/app/chat/message/Messages.tsx b/web/src/app/chat/message/Messages.tsx
index a28488d8cc..a435c97233 100644
--- a/web/src/app/chat/message/Messages.tsx
+++ b/web/src/app/chat/message/Messages.tsx
@@ -15,10 +15,12 @@ import {
 import { FeedbackType } from "../types";
 import { useEffect, useRef, useState } from "react";
 import ReactMarkdown from "react-markdown";
-import { DanswerDocument } from "@/lib/search/interfaces";
-import { SearchSummary, ShowHideDocsButton } from "./SearchSummary";
+import {
+  DanswerDocument,
+  FilteredDanswerDocument,
+} from "@/lib/search/interfaces";
+import { SearchSummary } from "./SearchSummary";
 import { SourceIcon } from "@/components/SourceIcon";
-import { ThreeDots } from "react-loader-spinner";
 import { SkippedSearch } from "./SkippedSearch";
 import remarkGfm from "remark-gfm";
 import { CopyButton } from "@/components/CopyButton";
@@ -29,7 +31,7 @@ import {
   INTERNET_SEARCH_TOOL_NAME,
 } from "../tools/constants";
 import { ToolRunDisplay } from "../tools/ToolRunningAnimation";
-import { Hoverable } from "@/components/Hoverable";
+import { Hoverable, HoverableIcon } from "@/components/Hoverable";
 import { DocumentPreview } from "../files/documents/DocumentPreview";
 import { InMessageImage } from "../files/images/InMessageImage";
 import { CodeBlock } from "./CodeBlock";
@@ -42,7 +44,19 @@ import "prismjs/themes/prism-tomorrow.css";
 import "./custom-code-styles.css";
 import { Persona } from "@/app/admin/assistants/interfaces";
 import { AssistantIcon } from "@/components/assistants/AssistantIcon";
-import { InternetSearchIcon } from "@/components/InternetSearchIcon";
+import { Citation } from "@/components/search/results/Citation";
+import { DocumentMetadataBlock } from "@/components/search/DocumentDisplay";
+import {
+  DislikeFeedbackIcon,
+  LikeFeedbackIcon,
+} from "@/components/icons/icons";
+import {
+  CustomTooltip,
+  TooltipGroup,
+} from "@/components/tooltip/CustomTooltip";
+import { ValidSources } from "@/lib/types";
+import { Tooltip } from "@/components/tooltip/Tooltip";
+import { useMouseTracking } from "./hooks";
 
 const TOOLS_WITH_CUSTOM_HANDLING = [
   SEARCH_TOOL_NAME,
@@ -50,14 +64,20 @@ const TOOLS_WITH_CUSTOM_HANDLING = [
   IMAGE_GENERATION_TOOL_NAME,
 ];
 
-function FileDisplay({ files }: { files: FileDescriptor[] }) {
+function FileDisplay({
+  files,
+  alignBubble,
+}: {
+  files: FileDescriptor[];
+  alignBubble?: boolean;
+}) {
   const imageFiles = files.filter((file) => file.type === ChatFileType.IMAGE);
   const nonImgFiles = files.filter((file) => file.type !== ChatFileType.IMAGE);
 
   return (
     <>
       {nonImgFiles && nonImgFiles.length > 0 && (
-        <div className="mt-2 mb-4">
+        <div className={` ${alignBubble && "ml-auto"} mt-2 auto mb-4`}>
           <div className="flex flex-col gap-2">
             {nonImgFiles.map((file) => {
               return (
@@ -65,6 +85,7 @@ function FileDisplay({ files }: { files: FileDescriptor[] }) {
                   <DocumentPreview
                     fileName={file.name || file.id}
                     maxWidth="max-w-64"
+                    alignBubble={alignBubble}
                   />
                 </div>
               );
@@ -73,8 +94,8 @@ function FileDisplay({ files }: { files: FileDescriptor[] }) {
         </div>
       )}
       {imageFiles && imageFiles.length > 0 && (
-        <div className="mt-2 mb-4">
-          <div className="flex flex-wrap gap-2">
+        <div className={` ${alignBubble && "ml-auto"} mt-2 auto mb-4`}>
+          <div className="flex flex-col gap-2">
             {imageFiles.map((file) => {
               return <InMessageImage key={file.id} fileId={file.id} />;
             })}
@@ -86,10 +107,14 @@ function FileDisplay({ files }: { files: FileDescriptor[] }) {
 }
 
 export const AIMessage = ({
+  isActive,
+  toggleDocumentSelection,
   alternativeAssistant,
+  docs,
   messageId,
   content,
   files,
+  selectedDocuments,
   query,
   personaName,
   citedDocuments,
@@ -104,6 +129,10 @@ export const AIMessage = ({
   retrievalDisabled,
   currentPersona,
 }: {
+  isActive?: boolean;
+  selectedDocuments?: DanswerDocument[] | null;
+  toggleDocumentSelection?: () => void;
+  docs?: DanswerDocument[] | null;
   alternativeAssistant?: Persona | null;
   currentPersona: Persona;
   messageId: number | null;
@@ -122,17 +151,29 @@ export const AIMessage = ({
   handleForceSearch?: () => void;
   retrievalDisabled?: boolean;
 }) => {
+  const finalContent = content + (!isComplete ? "[*](test)" : "");
+
   const [isReady, setIsReady] = useState(false);
   useEffect(() => {
     Prism.highlightAll();
     setIsReady(true);
   }, []);
 
+  const { isHovering, trackedElementRef, hoverElementRef } = useMouseTracking();
+
   // this is needed to give Prism a chance to load
   if (!isReady) {
     return <div />;
   }
 
+  const selectedDocumentIds =
+    selectedDocuments?.map((document) => document.document_id) || [];
+  let citedDocumentIds: string[] = [];
+
+  citedDocuments?.forEach((doc) => {
+    citedDocumentIds.push(doc[1].document_id);
+  });
+
   if (!isComplete) {
     const trimIncompleteCodeSection = (
       content: string | JSX.Element
@@ -155,242 +196,371 @@ export const AIMessage = ({
   const danswerSearchToolEnabledForPersona = currentPersona.tools.some(
     (tool) => tool.in_code_tool_id === SEARCH_TOOL_NAME
   );
-  const shouldShowLoader =
-    !toolCall || (toolCall.tool_name === SEARCH_TOOL_NAME && !content);
-  const defaultLoader = shouldShowLoader ? (
-    <div className="text-sm my-auto">
-      <ThreeDots
-        height="30"
-        width="50"
-        color="#3b82f6"
-        ariaLabel="grid-loading"
-        radius="12.5"
-        wrapperStyle={{}}
-        wrapperClass=""
-        visible={true}
-      />
-    </div>
-  ) : undefined;
+
+  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 uniqueSources: ValidSources[] = Array.from(
+    new Set((docs || []).map((doc) => doc.source_type))
+  ).slice(0, 3);
 
   return (
-    <div className={"py-5 px-5 flex -mr-6 w-full"}>
-      <div className="mx-auto w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar relative">
-        <div className="ml-8">
+    <div ref={trackedElementRef} className={"py-5 px-2 lg:px-5 relative flex "}>
+      <div className="mx-auto w-[90%] max-w-message-max">
+        <div className="xl:ml-8">
           <div className="flex">
             <AssistantIcon
               size="small"
               assistant={alternativeAssistant || currentPersona}
             />
 
-            <div className="font-bold text-emphasis ml-2 my-auto">
-              {alternativeAssistant
-                ? alternativeAssistant.name
-                : personaName || "Danswer"}
-            </div>
+            <div className="w-full">
+              <div className="max-w-message-max break-words">
+                {(!toolCall || toolCall.tool_name === SEARCH_TOOL_NAME) &&
+                  danswerSearchToolEnabledForPersona && (
+                    <>
+                      {query !== undefined &&
+                        handleShowRetrieved !== undefined &&
+                        isCurrentlyShowingRetrieved !== undefined &&
+                        !retrievalDisabled && (
+                          <div className="my-1">
+                            <SearchSummary
+                              query={query}
+                              hasDocs={hasDocs || false}
+                              messageId={messageId}
+                              finished={toolCall?.tool_result != undefined}
+                              isCurrentlyShowingRetrieved={
+                                isCurrentlyShowingRetrieved
+                              }
+                              handleShowRetrieved={handleShowRetrieved}
+                              handleSearchQueryEdit={handleSearchQueryEdit}
+                            />
+                          </div>
+                        )}
+                      {handleForceSearch &&
+                        content &&
+                        query === undefined &&
+                        !hasDocs &&
+                        !retrievalDisabled && (
+                          <div className="my-1">
+                            <SkippedSearch
+                              handleForceSearch={handleForceSearch}
+                            />
+                          </div>
+                        )}
+                    </>
+                  )}
 
-            {query === undefined &&
-              hasDocs &&
-              handleShowRetrieved !== undefined &&
-              isCurrentlyShowingRetrieved !== undefined &&
-              !retrievalDisabled && (
-                <div className="flex w-message-xs 2xl:w-message-sm 3xl:w-message-default absolute ml-8">
-                  <div className="ml-auto">
-                    <ShowHideDocsButton
-                      messageId={messageId}
-                      isCurrentlyShowingRetrieved={isCurrentlyShowingRetrieved}
-                      handleShowRetrieved={handleShowRetrieved}
-                    />
-                  </div>
-                </div>
-              )}
-          </div>
-
-          <div className="w-message-xs 2xl:w-message-sm 3xl:w-message-default break-words mt-1 ml-8">
-            {(!toolCall || toolCall.tool_name === SEARCH_TOOL_NAME) &&
-              danswerSearchToolEnabledForPersona && (
-                <>
-                  {query !== undefined &&
-                    handleShowRetrieved !== undefined &&
-                    isCurrentlyShowingRetrieved !== undefined &&
-                    !retrievalDisabled && (
-                      <div className="my-1">
-                        <SearchSummary
-                          query={query}
-                          hasDocs={hasDocs || false}
-                          messageId={messageId}
-                          isCurrentlyShowingRetrieved={
-                            isCurrentlyShowingRetrieved
-                          }
-                          handleShowRetrieved={handleShowRetrieved}
-                          handleSearchQueryEdit={handleSearchQueryEdit}
-                        />
-                      </div>
-                    )}
-                  {handleForceSearch &&
-                    content &&
-                    query === undefined &&
-                    !hasDocs &&
-                    !retrievalDisabled && (
-                      <div className="my-1">
-                        <SkippedSearch handleForceSearch={handleForceSearch} />
-                      </div>
-                    )}
-                </>
-              )}
-
-            {toolCall &&
-              !TOOLS_WITH_CUSTOM_HANDLING.includes(toolCall.tool_name) && (
-                <div className="my-2">
-                  <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>
-              )}
-
-            {toolCall &&
-              toolCall.tool_name === IMAGE_GENERATION_TOOL_NAME &&
-              !toolCall.tool_result && (
-                <div className="my-2">
-                  <ToolRunDisplay
-                    toolName={`Generating images`}
-                    toolLogo={<FiImage size={15} className="my-auto mr-1" />}
-                    isRunning={!toolCall.tool_result}
-                  />
-                </div>
-              )}
-
-            {toolCall && toolCall.tool_name === INTERNET_SEARCH_TOOL_NAME && (
-              <div className="my-2">
-                <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>
-            )}
-
-            {content ? (
-              <>
-                <FileDisplay files={files || []} />
-
-                {typeof content === "string" ? (
-                  <ReactMarkdown
-                    key={messageId}
-                    className="prose max-w-full"
-                    components={{
-                      a: (props) => {
-                        const { node, ...rest } = props;
-                        // for some reason <a> tags cause the onClick to not apply
-                        // and the links are unclickable
-                        // TODO: fix the fact that you have to double click to follow link
-                        // for the first link
-                        return (
-                          <a
-                            key={node?.position?.start?.offset}
-                            onClick={() =>
-                              rest.href
-                                ? window.open(rest.href, "_blank")
-                                : undefined
-                            }
-                            className="cursor-pointer text-link hover:text-link-hover"
-                            // href={rest.href}
-                            // target="_blank"
-                            // rel="noopener noreferrer"
-                          >
-                            {rest.children}
-                          </a>
-                        );
-                      },
-                      code: (props) => (
-                        <CodeBlock {...props} content={content as string} />
-                      ),
-                      p: ({ node, ...props }) => (
-                        <p {...props} className="text-default" />
-                      ),
-                    }}
-                    remarkPlugins={[remarkGfm]}
-                    rehypePlugins={[[rehypePrism, { ignoreMissing: true }]]}
-                  >
-                    {content}
-                  </ReactMarkdown>
-                ) : (
-                  content
-                )}
-              </>
-            ) : isComplete ? null : (
-              defaultLoader
-            )}
-            {citedDocuments && citedDocuments.length > 0 && (
-              <div className="mt-2">
-                <b className="text-sm text-emphasis">Sources:</b>
-                <div className="flex flex-wrap gap-2">
-                  {citedDocuments
-                    .filter(([_, document]) => document.semantic_identifier)
-                    .map(([citationKey, document], ind) => {
-                      const display = (
-                        <div className="max-w-350 text-ellipsis text-sm border border-border py-1 px-2 rounded flex">
-                          <div className="mr-1 my-auto">
-                            {document.is_internet ? (
-                              <InternetSearchIcon url={document.link} />
-                            ) : (
-                              <SourceIcon
-                                sourceType={document.source_type}
-                                iconSize={16}
+                <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 &&
+                          isCurrentlyShowingRetrieved !== undefined &&
+                          !retrievalDisabled && (
+                            <div className="mb-1">
+                              <SearchSummary
+                                query={query}
+                                finished={toolCall?.tool_result != undefined}
+                                hasDocs={hasDocs || false}
+                                messageId={messageId}
+                                isCurrentlyShowingRetrieved={
+                                  isCurrentlyShowingRetrieved
+                                }
+                                handleShowRetrieved={handleShowRetrieved}
+                                handleSearchQueryEdit={handleSearchQueryEdit}
                               />
-                            )}
-                          </div>
-                          [{citationKey}] {document!.semantic_identifier}
+                            </div>
+                          )}
+                        {handleForceSearch &&
+                          content &&
+                          query === undefined &&
+                          !hasDocs &&
+                          !retrievalDisabled && (
+                            <div className="mb-1">
+                              <SkippedSearch
+                                handleForceSearch={handleForceSearch}
+                              />
+                            </div>
+                          )}
+                      </>
+                    )}
+                    {toolCall &&
+                      !TOOLS_WITH_CUSTOM_HANDLING.includes(
+                        toolCall.tool_name
+                      ) && (
+                        <div className="my-2">
+                          <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>
-                      );
-                      if (document.link) {
-                        return (
-                          <a
-                            key={document.document_id}
-                            href={document.link}
-                            target="_blank"
-                            className="cursor-pointer hover:bg-hover"
+                      )}
+
+                    {toolCall &&
+                      toolCall.tool_name === IMAGE_GENERATION_TOOL_NAME &&
+                      !toolCall.tool_result && (
+                        <div className="my-2">
+                          <ToolRunDisplay
+                            toolName={`Generating images`}
+                            toolLogo={
+                              <FiImage size={15} className="my-auto mr-1" />
+                            }
+                            isRunning={!toolCall.tool_result}
+                          />
+                        </div>
+                      )}
+
+                    {toolCall &&
+                      toolCall.tool_name === INTERNET_SEARCH_TOOL_NAME && (
+                        <div className="my-2">
+                          <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>
+                      )}
+
+                    {content ? (
+                      <>
+                        <FileDisplay files={files || []} />
+
+                        {typeof content === "string" ? (
+                          <ReactMarkdown
+                            key={messageId}
+                            className="prose max-w-full"
+                            components={{
+                              a: (props) => {
+                                const { node, ...rest } = props;
+                                const value = rest.children;
+
+                                if (value?.toString().startsWith("*")) {
+                                  return (
+                                    <div className="flex-none bg-background-800 inline-block rounded-full h-3 w-3 ml-2" />
+                                  );
+                                } else if (value?.toString().startsWith("[")) {
+                                  // for some reason <a> tags cause the onClick to not apply
+                                  // and the links are unclickable
+                                  // TODO: fix the fact that you have to double click to follow link
+                                  // for the first link
+                                  return (
+                                    <Citation
+                                      link={rest?.href}
+                                      key={node?.position?.start?.offset}
+                                    >
+                                      {rest.children}
+                                    </Citation>
+                                  );
+                                } else {
+                                  return (
+                                    <a
+                                      key={node?.position?.start?.offset}
+                                      onClick={() =>
+                                        rest.href
+                                          ? window.open(rest.href, "_blank")
+                                          : undefined
+                                      }
+                                      className="cursor-pointer text-link hover:text-link-hover"
+                                    >
+                                      {rest.children}
+                                    </a>
+                                  );
+                                }
+                              },
+                              code: (props) => (
+                                <CodeBlock
+                                  {...props}
+                                  content={content as string}
+                                />
+                              ),
+                              p: ({ node, ...props }) => (
+                                <p {...props} className="text-default" />
+                              ),
+                            }}
+                            remarkPlugins={[remarkGfm]}
+                            rehypePlugins={[
+                              [rehypePrism, { ignoreMissing: true }],
+                            ]}
                           >
-                            {display}
-                          </a>
-                        );
-                      } else {
-                        return (
-                          <div
-                            key={document.document_id}
-                            className="cursor-default"
-                          >
-                            {display}
+                            {finalContent}
+                          </ReactMarkdown>
+                        ) : (
+                          content
+                        )}
+                      </>
+                    ) : isComplete ? null : (
+                      <></>
+                    )}
+
+                    {isComplete && 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">
+                            {filteredDocs.length > 0 &&
+                              filteredDocs.slice(0, 2).map((doc, ind) => (
+                                <div
+                                  key={doc.document_id}
+                                  className={`w-[200px] rounded-lg flex-none transition-all duration-500 hover:bg-background-125 bg-text-100 px-4 pb-2 pt-1 border-b
+                              `}
+                                >
+                                  <a
+                                    href={doc.link}
+                                    target="_blank"
+                                    className="text-sm flex w-full pt-1 gap-x-1.5 overflow-hidden justify-between font-semibold text-text-700"
+                                  >
+                                    <Citation link={doc.link} index={ind + 1} />
+                                    <p className="shrink truncate ellipsis break-all ">
+                                      {
+                                        doc.document_id.split("/")[
+                                          doc.document_id.split("/").length - 1
+                                        ]
+                                      }
+                                    </p>
+                                    <div className="ml-auto flex-none">
+                                      <SourceIcon
+                                        sourceType={doc.source_type}
+                                        iconSize={18}
+                                      />
+                                    </div>
+                                  </a>
+                                  <div className="flex overscroll-x-scroll mt-.5">
+                                    <DocumentMetadataBlock document={doc} />
+                                  </div>
+                                  <div className="line-clamp-3 text-xs break-words pt-1">
+                                    {doc.blurb}
+                                  </div>
+                                </div>
+                              ))}
+                            <div
+                              onClick={() => {
+                                if (toggleDocumentSelection) {
+                                  toggleDocumentSelection();
+                                }
+                              }}
+                              key={-1}
+                              className="cursor-pointer w-[200px] rounded-lg flex-none transition-all duration-500 hover:bg-background-125 bg-text-100 px-4 py-2 border-b"
+                            >
+                              <div className="text-sm flex justify-between font-semibold text-text-700">
+                                <p className="line-clamp-1">See context</p>
+                                <div className="flex gap-x-1">
+                                  {uniqueSources.map((sourceType, ind) => {
+                                    return (
+                                      <div key={ind} className="flex-none">
+                                        <SourceIcon
+                                          sourceType={sourceType}
+                                          iconSize={18}
+                                        />
+                                      </div>
+                                    );
+                                  })}
+                                </div>
+                              </div>
+                              <div className="line-clamp-3 text-xs break-words pt-1">
+                                See more
+                              </div>
+                            </div>
                           </div>
-                        );
-                      }
-                    })}
+                        </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>
+                          <CustomTooltip showTick line content="Copy!">
+                            <CopyButton content={content.toString()} />
+                          </CustomTooltip>
+                          <CustomTooltip showTick line content="Good response!">
+                            <HoverableIcon
+                              icon={<LikeFeedbackIcon />}
+                              onClick={() => handleFeedback("like")}
+                            />
+                          </CustomTooltip>
+                          <CustomTooltip showTick line content="Bad response!">
+                            <HoverableIcon
+                              icon={<DislikeFeedbackIcon />}
+                              onClick={() => handleFeedback("dislike")}
+                            />
+                          </CustomTooltip>
+                        </TooltipGroup>
+                      </div>
+                    ) : (
+                      <div
+                        ref={hoverElementRef}
+                        className={`
+                        absolute -bottom-2
+                        invisible ${isHovering && "!visible"}
+                        opacity-0 ${isHovering && "!opacity-100"}
+                        translate-y-2 ${isHovering && "!translate-y-0"}
+                        transition-transform duration-300 ease-in-out 
+                        flex md:flex-row gap-x-0.5 bg-background-125/40 p-1.5 rounded-lg
+                        `}
+                      >
+                        <TooltipGroup>
+                          <CustomTooltip showTick line content="Copy!">
+                            <CopyButton content={content.toString()} />
+                          </CustomTooltip>
+
+                          <CustomTooltip showTick line content="Good response!">
+                            <HoverableIcon
+                              icon={<LikeFeedbackIcon />}
+                              onClick={() => handleFeedback("like")}
+                            />
+                          </CustomTooltip>
+
+                          <CustomTooltip showTick line content="Bad response!">
+                            <HoverableIcon
+                              icon={<DislikeFeedbackIcon />}
+                              onClick={() => handleFeedback("dislike")}
+                            />
+                          </CustomTooltip>
+                        </TooltipGroup>
+                      </div>
+                    ))}
                 </div>
               </div>
-            )}
-          </div>
-          {handleFeedback && (
-            <div className="flex flex-col md:flex-row gap-x-0.5 ml-8 mt-1.5">
-              <CopyButton content={content.toString()} />
-              <Hoverable
-                icon={FiThumbsUp}
-                onClick={() => handleFeedback("like")}
-              />
-              <Hoverable
-                icon={FiThumbsDown}
-                onClick={() => handleFeedback("dislike")}
-              />
             </div>
-          )}
+          </div>
         </div>
       </div>
     </div>
@@ -414,9 +584,11 @@ function MessageSwitcher({
         icon={FiChevronLeft}
         onClick={currentPage === 1 ? undefined : handlePrevious}
       />
-      <span className="text-emphasis text-medium select-none">
+
+      <span className="text-emphasis select-none">
         {currentPage} / {totalPages}
       </span>
+
       <Hoverable
         icon={FiChevronRight}
         onClick={currentPage === totalPages ? undefined : handleNext}
@@ -475,29 +647,21 @@ export const HumanMessage = ({
 
   return (
     <div
-      className="pt-5 pb-1 px-5 flex -mr-6 w-full relative"
+      className="pt-5 pb-1 px-2 lg:px-5 flex -mr-6 relative"
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <div className="mx-auto w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar">
-        <div className="ml-8">
-          <div className="flex">
-            <div className="p-1 bg-user rounded-lg h-fit">
-              <div className="text-inverted">
-                <FiUser size={16} className="my-auto mx-auto" />
-              </div>
-            </div>
+      <div className="mx-auto w-[90%] max-w-searchbar-max">
+        <div className="xl:ml-8">
+          <div className="flex flex-col mr-4">
+            <FileDisplay alignBubble files={files || []} />
 
-            <div className="font-bold text-emphasis ml-2 my-auto">You</div>
-          </div>
-          <div className="mx-auto mt-1 ml-8 w-searchbar-xs 2xl:w-searchbar-sm 3xl:w-searchbar-default flex flex-wrap">
-            <div className="w-message-xs 2xl:w-message-sm 3xl:w-message-default break-words">
-              <FileDisplay files={files || []} />
-
-              {isEditing ? (
-                <div>
-                  <div
-                    className={`
+            <div className="flex justify-end">
+              <div className="w-full ml-8 flex w-full max-w-message-max break-words">
+                {isEditing ? (
+                  <div className="w-full">
+                    <div
+                      className={`
                       opacity-100
                       w-full
                       flex
@@ -510,10 +674,10 @@ export const HumanMessage = ({
                       [&:has(textarea:focus)]::ring-1
                       [&:has(textarea:focus)]::ring-black
                     `}
-                  >
-                    <textarea
-                      ref={textareaRef}
-                      className={`
+                    >
+                      <textarea
+                        ref={textareaRef}
+                        className={`
                       m-0 
                       w-full 
                       h-auto
@@ -532,76 +696,143 @@ export const HumanMessage = ({
                       overflow-y-auto
                       pr-12 
                       py-4`}
-                      aria-multiline
-                      role="textarea"
-                      value={editedContent}
-                      style={{ scrollbarWidth: "thin" }}
-                      onChange={(e) => {
-                        setEditedContent(e.target.value);
-                        e.target.style.height = `${e.target.scrollHeight}px`;
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === "Escape") {
-                          e.preventDefault();
-                          setEditedContent(content);
-                          setIsEditing(false);
-                        }
-                        // Submit edit if "Command Enter" is pressed, like in ChatGPT
-                        if (e.key === "Enter" && e.metaKey) {
-                          handleEditSubmit();
-                        }
-                      }}
-                    />
-                    <div className="flex justify-end mt-2 gap-2 pr-4">
-                      <button
-                        className={`
-                          w-fit 
-                          p-1 
+                        aria-multiline
+                        role="textarea"
+                        value={editedContent}
+                        style={{ scrollbarWidth: "thin" }}
+                        onChange={(e) => {
+                          setEditedContent(e.target.value);
+                          e.target.style.height = `${e.target.scrollHeight}px`;
+                        }}
+                        onKeyDown={(e) => {
+                          if (e.key === "Escape") {
+                            e.preventDefault();
+                            setEditedContent(content);
+                            setIsEditing(false);
+                          }
+                          // Submit edit if "Command Enter" is pressed, like in ChatGPT
+                          if (e.key === "Enter" && e.metaKey) {
+                            handleEditSubmit();
+                          }
+                        }}
+                      />
+                      <div className="flex justify-end mt-2 gap-2 pr-4">
+                        <button
+                          className={`
+                          w-fit
                           bg-accent 
                           text-inverted 
                           text-sm
                           rounded-lg 
+                          inline-flex 
+                          items-center 
+                          justify-center 
+                          flex-shrink-0 
+                          font-medium 
+                          min-h-[38px]
+                          py-2
+                          px-3
                           hover:bg-accent-hover
                         `}
-                        onClick={handleEditSubmit}
-                      >
-                        Submit
-                      </button>
-                      <button
-                        className={`
+                          onClick={handleEditSubmit}
+                        >
+                          Submit
+                        </button>
+                        <button
+                          className={`
+                          inline-flex 
+                          items-center 
+                          justify-center 
+                          flex-shrink-0 
+                          font-medium 
+                          min-h-[38px] 
+                          py-2 
+                          px-3 
                           w-fit 
-                          p-1 
                           bg-hover
                           bg-background-strong 
                           text-sm
                           rounded-lg
                           hover:bg-hover-emphasis
                         `}
-                        onClick={() => {
-                          setEditedContent(content);
-                          setIsEditing(false);
-                        }}
-                      >
-                        Cancel
-                      </button>
+                          onClick={() => {
+                            setEditedContent(content);
+                            setIsEditing(false);
+                          }}
+                        >
+                          Cancel
+                        </button>
+                      </div>
                     </div>
                   </div>
-                </div>
-              ) : typeof content === "string" ? (
-                <div className="flex flex-col preserve-lines prose max-w-full">
-                  {content}
-                </div>
-              ) : (
-                content
-              )}
+                ) : typeof content === "string" ? (
+                  <>
+                    {onEdit &&
+                    isHovered &&
+                    !isEditing &&
+                    (!files || files.length === 0) ? (
+                      <div className="ml-auto mr-1 my-auto">
+                        <Tooltip delayDuration={1000} content={"Edit message"}>
+                          <button
+                            className="hover:bg-hover p-1.5 rounded"
+                            onClick={() => {
+                              setIsEditing(true);
+                              setIsHovered(false);
+                            }}
+                          >
+                            <FiEdit2 />
+                          </button>
+                        </Tooltip>
+                      </div>
+                    ) : (
+                      <div className="h-[27px]" />
+                    )}
+
+                    <div
+                      className={`${
+                        !(
+                          onEdit &&
+                          isHovered &&
+                          !isEditing &&
+                          (!files || files.length === 0)
+                        ) && "ml-auto"
+                      } relative max-w-[70%] mb-auto rounded-3xl bg-user px-5 py-2.5`}
+                    >
+                      {content}
+                    </div>
+                    {/* </div> */}
+                  </>
+                ) : (
+                  <>
+                    {onEdit &&
+                    isHovered &&
+                    !isEditing &&
+                    (!files || files.length === 0) ? (
+                      <div className="my-auto">
+                        <Hoverable
+                          icon={FiEdit2}
+                          onClick={() => {
+                            setIsEditing(true);
+                            setIsHovered(false);
+                          }}
+                        />
+                      </div>
+                    ) : (
+                      <div className="h-[27px]" />
+                    )}
+                    <p className="ml-auto rounded-lg p-1">{content}</p>
+                  </>
+                )}
+              </div>
             </div>
           </div>
-          <div className="flex flex-col md:flex-row gap-x-0.5 ml-8 mt-1">
+
+          <div className="flex flex-col md:flex-row gap-x-0.5 mt-1">
             {currentMessageInd !== undefined &&
               onMessageSelection &&
               otherMessagesCanSwitchTo &&
               otherMessagesCanSwitchTo.length > 1 && (
-                <div className="mr-2">
+                <div className="ml-auto mr-3">
                   <MessageSwitcher
                     currentPage={currentMessageInd + 1}
                     totalPages={otherMessagesCanSwitchTo.length}
@@ -618,20 +849,6 @@ export const HumanMessage = ({
                   />
                 </div>
               )}
-            {onEdit &&
-            isHovered &&
-            !isEditing &&
-            (!files || files.length === 0) ? (
-              <Hoverable
-                icon={FiEdit2}
-                onClick={() => {
-                  setIsEditing(true);
-                  setIsHovered(false);
-                }}
-              />
-            ) : (
-              <div className="h-[27px]" />
-            )}
           </div>
         </div>
       </div>
diff --git a/web/src/app/chat/message/SearchSummary.tsx b/web/src/app/chat/message/SearchSummary.tsx
index 087e9a6490..d1f8f4f5d6 100644
--- a/web/src/app/chat/message/SearchSummary.tsx
+++ b/web/src/app/chat/message/SearchSummary.tsx
@@ -4,6 +4,7 @@ import {
 } from "@/components/BasicClickable";
 import { HoverPopup } from "@/components/HoverPopup";
 import { Hoverable } from "@/components/Hoverable";
+import { Tooltip } from "@/components/tooltip/Tooltip";
 import { useEffect, useRef, useState } from "react";
 import { FiCheck, FiEdit2, FiSearch, FiX } from "react-icons/fi";
 
@@ -37,11 +38,13 @@ export function ShowHideDocsButton({
 export function SearchSummary({
   query,
   hasDocs,
+  finished,
   messageId,
   isCurrentlyShowingRetrieved,
   handleShowRetrieved,
   handleSearchQueryEdit,
 }: {
+  finished: boolean;
   query: string;
   hasDocs: boolean;
   messageId: number | null;
@@ -86,9 +89,14 @@ export function SearchSummary({
 
   const searchingForDisplay = (
     <div className={`flex p-1 rounded ${isOverflowed && "cursor-default"}`}>
-      <FiSearch className="mr-2 my-auto" size={14} />
-      <div className="line-clamp-1 break-all px-0.5" ref={searchingForRef}>
-        Searching for: <i>{finalQuery}</i>
+      <FiSearch className="flex-none mr-2 my-auto" size={14} />
+      <div
+        className={`${
+          !finished && "loading-text"
+        } line-clamp-1 break-all px-0.5`}
+        ref={searchingForRef}
+      >
+        {finished ? "Searched" : "Searching"} for: <i>{finalQuery}</i>
       </div>
     </div>
   );
@@ -147,7 +155,7 @@ export function SearchSummary({
         editInput
       ) : (
         <>
-          <div className="text-sm my-2">
+          <div className="text-sm">
             {isOverflowed ? (
               <HoverPopup
                 mainContent={searchingForDisplay}
@@ -164,19 +172,19 @@ export function SearchSummary({
             )}
           </div>
           {handleSearchQueryEdit && (
-            <div className="my-auto">
-              <Hoverable icon={FiEdit2} onClick={() => setIsEditing(true)} />
-            </div>
+            <Tooltip delayDuration={1000} content={"Edit Search"}>
+              <button
+                className="my-auto hover:bg-hover p-1.5 rounded"
+                onClick={() => {
+                  setIsEditing(true);
+                }}
+              >
+                <FiEdit2 />
+              </button>
+            </Tooltip>
           )}
         </>
       )}
-      {hasDocs && (
-        <ShowHideDocsButton
-          messageId={messageId}
-          isCurrentlyShowingRetrieved={isCurrentlyShowingRetrieved}
-          handleShowRetrieved={handleShowRetrieved}
-        />
-      )}
     </div>
   );
 }
diff --git a/web/src/app/chat/message/SkippedSearch.tsx b/web/src/app/chat/message/SkippedSearch.tsx
index 9deed79e2a..d630dd3d1e 100644
--- a/web/src/app/chat/message/SkippedSearch.tsx
+++ b/web/src/app/chat/message/SkippedSearch.tsx
@@ -27,9 +27,9 @@ export function SkippedSearch({
   handleForceSearch: () => void;
 }) {
   return (
-    <div className="flex text-sm p-1">
+    <div className="flex text-sm !pt-0 p-1">
       <FiBook className="my-auto mr-2" size={14} />
-      <div className="my-2 cursor-default">
+      <div className="my-auto cursor-default">
         The AI decided this query didn&apos;t need a search
       </div>
 
diff --git a/web/src/app/chat/message/hooks.ts b/web/src/app/chat/message/hooks.ts
new file mode 100644
index 0000000000..777b986e3a
--- /dev/null
+++ b/web/src/app/chat/message/hooks.ts
@@ -0,0 +1,38 @@
+import { useEffect, useRef, useState } from "react";
+
+export function useMouseTracking() {
+  const [isHovering, setIsHovering] = useState<boolean>(false);
+  const trackedElementRef = useRef<HTMLDivElement>(null);
+  const hoverElementRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      if (trackedElementRef.current && hoverElementRef.current) {
+        const trackedRect = trackedElementRef.current.getBoundingClientRect();
+        const hoverRect = hoverElementRef.current.getBoundingClientRect();
+
+        const isOverTracked =
+          event.clientX >= trackedRect.left &&
+          event.clientX <= trackedRect.right &&
+          event.clientY >= trackedRect.top &&
+          event.clientY <= trackedRect.bottom;
+
+        const isOverHover =
+          event.clientX >= hoverRect.left &&
+          event.clientX <= hoverRect.right &&
+          event.clientY >= hoverRect.top &&
+          event.clientY <= hoverRect.bottom;
+
+        setIsHovering(isOverTracked || isOverHover);
+      }
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  return { isHovering, trackedElementRef, hoverElementRef };
+}
diff --git a/web/src/app/chat/modal/FeedbackModal.tsx b/web/src/app/chat/modal/FeedbackModal.tsx
index 6effda053b..fb3b21c156 100644
--- a/web/src/app/chat/modal/FeedbackModal.tsx
+++ b/web/src/app/chat/modal/FeedbackModal.tsx
@@ -4,6 +4,10 @@ import { useState } from "react";
 import { FeedbackType } from "../types";
 import { FiThumbsDown, FiThumbsUp } from "react-icons/fi";
 import { ModalWrapper } from "./ModalWrapper";
+import {
+  DislikeFeedbackIcon,
+  LikeFeedbackIcon,
+} from "@/components/icons/icons";
 
 const predefinedPositiveFeedbackOptions =
   process.env.NEXT_PUBLIC_POSITIVE_PREDEFINED_FEEDBACK_OPTIONS?.split(",") ||
@@ -54,13 +58,20 @@ export const FeedbackModal = ({
         <h2 className="text-2xl text-emphasis font-bold mb-4 flex">
           <div className="mr-1 my-auto">
             {feedbackType === "like" ? (
-              <FiThumbsUp className="text-green-500 my-auto mr-2" />
+              <LikeFeedbackIcon
+                size={20}
+                className="text-green-500 my-auto mr-2"
+              />
             ) : (
-              <FiThumbsDown className="text-red-600 my-auto mr-2" />
+              <DislikeFeedbackIcon
+                size={20}
+                className="text-red-600 my-auto mr-2"
+              />
             )}
           </div>
           Provide additional feedback
         </h2>
+
         <div className="mb-4 flex flex-wrap justify-start">
           {predefinedFeedbackOptions.map((feedback, index) => (
             <button
@@ -73,6 +84,7 @@ export const FeedbackModal = ({
             </button>
           ))}
         </div>
+
         <textarea
           autoFocus
           className={`
@@ -94,6 +106,7 @@ export const FeedbackModal = ({
           value={message}
           onChange={(e) => setMessage(e.target.value)}
         />
+
         <div className="flex mt-2">
           <button
             className="bg-accent text-white py-2 px-4 rounded hover:bg-blue-600 focus:outline-none mx-auto"
diff --git a/web/src/app/chat/modal/configuration/AssistantsTab.tsx b/web/src/app/chat/modal/configuration/AssistantsTab.tsx
index 220adc2504..0c931fe7b3 100644
--- a/web/src/app/chat/modal/configuration/AssistantsTab.tsx
+++ b/web/src/app/chat/modal/configuration/AssistantsTab.tsx
@@ -22,9 +22,9 @@ export function AssistantsTab({
   const [_, llmName] = getFinalLLM(llmProviders, null, null);
 
   return (
-    <>
-      <h3 className="text-lg font-semibold">Choose Assistant</h3>
-      <div className="my-3 grid grid-cols-1 gap-4">
+    <div className="py-4">
+      <h3 className="px-4 text-lg font-semibold">Change Assistant</h3>
+      <div className="px-2 mx-2 max-h-[500px] overflow-y-scroll my-3 grid grid-cols-2 gap-4">
         {availableAssistants.map((assistant) => (
           <div
             key={assistant.id}
@@ -45,7 +45,7 @@ export function AssistantsTab({
           >
             <div className="flex items-center mb-2">
               <AssistantIcon assistant={assistant} />
-              <div className="ml-2 font-bold text-lg text-emphasis">
+              <div className="ml-2 line-clamp-2 ellipsis font-bold text-sm text-emphasis">
                 {assistant.name}
               </div>
             </div>
@@ -74,7 +74,7 @@ export function AssistantsTab({
                 })}
               </div>
             )}
-            <div className="text-sm text-subtle mb-2 mt-2">
+            <div className="text-xs text-subtle mb-2 mt-2">
               {assistant.description}
             </div>
             <div className="mt-2 flex flex-col gap-y-2">
@@ -99,6 +99,6 @@ export function AssistantsTab({
           </div>
         ))}
       </div>
-    </>
+    </div>
   );
 }
diff --git a/web/src/app/chat/modal/configuration/ConfigurationModal.tsx b/web/src/app/chat/modal/configuration/ConfigurationModal.tsx
index cd54ac2561..7ce2ec65b9 100644
--- a/web/src/app/chat/modal/configuration/ConfigurationModal.tsx
+++ b/web/src/app/chat/modal/configuration/ConfigurationModal.tsx
@@ -11,6 +11,7 @@ import { AssistantsTab } from "./AssistantsTab";
 import { Persona } from "@/app/admin/assistants/interfaces";
 import { LlmTab } from "./LlmTab";
 import { LLMProviderDescriptor } from "@/app/admin/models/llm/interfaces";
+import { AssistantsIcon, IconProps } from "@/components/icons/icons";
 
 const TabButton = ({
   label,
@@ -41,6 +42,7 @@ const TabButton = ({
     `}
   >
     <Icon className="inline-block mr-2 my-auto" size="16" />
+
     <p className="my-auto">{label}</p>
   </button>
 );
diff --git a/web/src/app/chat/modal/configuration/LlmTab.tsx b/web/src/app/chat/modal/configuration/LlmTab.tsx
index 79dd5d82f7..2ad3b420dc 100644
--- a/web/src/app/chat/modal/configuration/LlmTab.tsx
+++ b/web/src/app/chat/modal/configuration/LlmTab.tsx
@@ -1,126 +1,140 @@
 import { useChatContext } from "@/components/context/ChatContext";
 import { LlmOverride, LlmOverrideManager } from "@/lib/hooks";
-import React, { useCallback, useRef, useState } from "react";
+import React, { forwardRef, useCallback, useRef, useState } from "react";
 import { debounce } from "lodash";
 import { DefaultDropdown } from "@/components/Dropdown";
 import { Text } from "@tremor/react";
 import { Persona } from "@/app/admin/assistants/interfaces";
 import { destructureValue, getFinalLLM, structureValue } from "@/lib/llm/utils";
 import { updateModelOverrideForChatSession } from "../../lib";
-import { PopupSpec } from "@/components/admin/connectors/Popup";
 
-export function LlmTab({
-  llmOverrideManager,
-  currentAssistant,
-  chatSessionId,
-}: {
+interface LlmTabProps {
   llmOverrideManager: LlmOverrideManager;
   currentAssistant: Persona;
   chatSessionId?: number;
-}) {
-  const { llmProviders } = useChatContext();
-  const { llmOverride, setLlmOverride, temperature, setTemperature } =
-    llmOverrideManager;
+  close?: () => void;
+}
 
-  const [localTemperature, setLocalTemperature] = useState<number>(
-    temperature || 0
-  );
+export const LlmTab = forwardRef<HTMLDivElement, LlmTabProps>(
+  ({ llmOverrideManager, currentAssistant, chatSessionId, close }, ref) => {
+    const { llmProviders } = useChatContext();
+    const { llmOverride, setLlmOverride, temperature, setTemperature } =
+      llmOverrideManager;
 
-  const debouncedSetTemperature = useCallback(
-    debounce((value) => {
-      setTemperature(value);
-    }, 300),
-    []
-  );
+    const [localTemperature, setLocalTemperature] = useState<number>(
+      temperature || 0
+    );
 
-  const handleTemperatureChange = (value: number) => {
-    setLocalTemperature(value);
-    debouncedSetTemperature(value);
-  };
+    const debouncedSetTemperature = useCallback(
+      debounce((value) => {
+        setTemperature(value);
+      }, 300),
+      []
+    );
 
-  const [_, defaultLlmName] = getFinalLLM(llmProviders, currentAssistant, null);
+    const handleTemperatureChange = (value: number) => {
+      setLocalTemperature(value);
+      debouncedSetTemperature(value);
+    };
 
-  const llmOptions: { name: string; value: string }[] = [];
-  llmProviders.forEach((llmProvider) => {
-    llmProvider.model_names.forEach((modelName) => {
-      llmOptions.push({
-        name: modelName,
-        value: structureValue(
-          llmProvider.name,
-          llmProvider.provider,
-          modelName
-        ),
+    const [_, defaultLlmName] = getFinalLLM(
+      llmProviders,
+      currentAssistant,
+      null
+    );
+
+    const llmOptions: { name: string; value: string }[] = [];
+    llmProviders.forEach((llmProvider) => {
+      llmProvider.model_names.forEach((modelName) => {
+        llmOptions.push({
+          name: modelName,
+          value: structureValue(
+            llmProvider.name,
+            llmProvider.provider,
+            modelName
+          ),
+        });
       });
     });
-  });
 
-  return (
-    <div className="mb-4">
-      <label className="block text-sm font-medium mb-2">Choose Model</label>
-      <Text className="mb-1">
-        Override the default model for the{" "}
-        <i className="font-medium">{currentAssistant.name}</i> assistant. The
-        override will apply only for this chat session.
-      </Text>
-      <Text className="mb-3">
-        Default Model: <i className="font-medium">{defaultLlmName}</i>.
-      </Text>
+    return (
+      <div className="mb-4">
+        <label className="block text-sm font-medium mb-2">Choose Model</label>
+        <Text className="mb-1">
+          Override the default model for the{" "}
+          <i className="font-medium">{currentAssistant.name}</i> assistant. The
+          override will only apply for the current chat session.
+        </Text>
+        <Text className="mb-3">
+          Default Model: <i className="font-medium">{defaultLlmName}</i>.
+        </Text>
 
-      <div className="w-96">
-        <DefaultDropdown
-          options={llmOptions}
-          selected={structureValue(
-            llmOverride.name,
-            llmOverride.provider,
-            llmOverride.modelName
-          )}
-          onSelect={(value) => {
-            setLlmOverride(destructureValue(value as string));
-            if (chatSessionId) {
-              updateModelOverrideForChatSession(chatSessionId, value as string);
+        <div ref={ref} className="w-96">
+          <DefaultDropdown
+            ref={ref}
+            options={llmOptions}
+            selected={structureValue(
+              llmOverride.name,
+              llmOverride.provider,
+              llmOverride.modelName
+            )}
+            onSelect={(value) => {
+              setLlmOverride(destructureValue(value as string));
+              if (chatSessionId) {
+                updateModelOverrideForChatSession(
+                  chatSessionId,
+                  value as string
+                );
+              }
+            }}
+          />
+        </div>
+
+        <label className="block text-sm font-medium mb-2 mt-4">
+          Temperature
+        </label>
+
+        <Text className="mb-8">
+          Adjust the temperature of the LLM. Higher temperatures will make the
+          LLM generate more creative and diverse responses, while lower
+          temperature will make the LLM generate more conservative and focused
+          responses.
+        </Text>
+
+        <div className="relative w-full">
+          <input
+            type="range"
+            onChange={(e) =>
+              handleTemperatureChange(parseFloat(e.target.value))
             }
-          }}
-        />
-      </div>
-
-      <label className="block text-sm font-medium mb-2 mt-4">Temperature</label>
-
-      <Text className="mb-8">
-        Adjust the temperature of the LLM. Higher temperature will make the LLM
-        generate more creative and diverse responses, while lower temperature
-        will make the LLM generate more conservative and focused responses.
-      </Text>
-
-      <div className="relative w-full">
-        <input
-          type="range"
-          onChange={(e) => handleTemperatureChange(parseFloat(e.target.value))}
-          className="
-            w-full 
-            p-2 
-            border 
+            className="
+            w-full
+            p-2
+            border
             border-border
             rounded-md
           "
-          min="0"
-          max="2"
-          step="0.01"
-          value={localTemperature}
-        />
-        <div
-          className="absolute text-sm"
-          style={{
-            left: `${(localTemperature || 0) * 50}%`,
-            transform: `translateX(-${Math.min(
-              Math.max((localTemperature || 0) * 50, 10),
-              90
-            )}%)`,
-            top: "-1.5rem",
-          }}
-        >
-          {localTemperature}
+            min="0"
+            max="2"
+            step="0.01"
+            value={localTemperature}
+          />
+          <div
+            className="absolute text-sm"
+            style={{
+              left: `${(localTemperature || 0) * 50}%`,
+              transform: `translateX(-${Math.min(
+                Math.max((localTemperature || 0) * 50, 10),
+                90
+              )}%)`,
+              top: "-1.5rem",
+            }}
+          >
+            {localTemperature}
+          </div>
         </div>
       </div>
-    </div>
-  );
-}
+    );
+  }
+);
+LlmTab.displayName = "LlmTab";
diff --git a/web/src/app/chat/page.tsx b/web/src/app/chat/page.tsx
index 325da0d0cf..291ad954ca 100644
--- a/web/src/app/chat/page.tsx
+++ b/web/src/app/chat/page.tsx
@@ -3,10 +3,12 @@ import { unstable_noStore as noStore } from "next/cache";
 import { InstantSSRAutoRefresh } from "@/components/SSRAutoRefresh";
 import { WelcomeModal } from "@/components/initialSetup/welcome/WelcomeModalWrapper";
 import { ApiKeyModal } from "@/components/llm/ApiKeyModal";
-import { ChatPage } from "./ChatPage";
 import { NoCompleteSourcesModal } from "@/components/initialSetup/search/NoCompleteSourceModal";
 import { ChatProvider } from "@/components/context/ChatContext";
 import { fetchChatData } from "@/lib/chat/fetchChatData";
+import FunctionalWrapper from "./shared_chat_search/FunctionalWrapper";
+import { ChatPage } from "./ChatPage";
+import WrappedChat from "./WrappedChat";
 
 export default async function Page({
   searchParams,
@@ -31,6 +33,7 @@ export default async function Page({
     tags,
     llmProviders,
     folders,
+    toggleSidebar,
     openedFolders,
     defaultPersonaId,
     finalDocumentSidebarInitialWidth,
@@ -48,6 +51,7 @@ export default async function Page({
       {shouldDisplaySourcesIncompleteModal && (
         <NoCompleteSourcesModal ccPairs={ccPairs} />
       )}
+
       <ChatProvider
         value={{
           user,
@@ -61,9 +65,9 @@ export default async function Page({
           openedFolders,
         }}
       >
-        <ChatPage
-          defaultSelectedPersonaId={defaultPersonaId}
-          documentSidebarInitialWidth={finalDocumentSidebarInitialWidth}
+        <WrappedChat
+          defaultPersonaId={defaultPersonaId}
+          initiallyToggled={toggleSidebar}
         />
       </ChatProvider>
     </>
diff --git a/web/src/app/chat/searchParams.ts b/web/src/app/chat/searchParams.ts
index ba67d26d62..749f0a2f59 100644
--- a/web/src/app/chat/searchParams.ts
+++ b/web/src/app/chat/searchParams.ts
@@ -3,6 +3,7 @@ import { ReadonlyURLSearchParams } from "next/navigation";
 // search params
 export const SEARCH_PARAM_NAMES = {
   CHAT_ID: "chatId",
+  SEARCH_ID: "searchId",
   PERSONA_ID: "assistantId",
   // overrides
   TEMPERATURE: "temperature",
diff --git a/web/src/app/chat/sessionSidebar/AssistantsTab.tsx b/web/src/app/chat/sessionSidebar/AssistantsTab.tsx
index 62b5d6d58b..98b1e5de84 100644
--- a/web/src/app/chat/sessionSidebar/AssistantsTab.tsx
+++ b/web/src/app/chat/sessionSidebar/AssistantsTab.tsx
@@ -1,5 +1,6 @@
 import { Persona } from "@/app/admin/assistants/interfaces";
 import { BasicSelectable } from "@/components/BasicClickable";
+import { AssistantsIcon } from "@/components/icons/icons";
 import { User } from "@/lib/types";
 import { Text } from "@tremor/react";
 import Link from "next/link";
@@ -26,7 +27,8 @@ function AssistantDisplay({
         <BasicSelectable selected={false} fullWidth>
           <div className="flex">
             <div className="truncate w-48 3xl:w-56 flex">
-              <FaRobot className="mr-2 my-auto" size={16} /> {persona.name}
+              <AssistantsIcon className="mr-2 my-auto" size={16} />{" "}
+              {persona.name}
             </div>
           </div>
         </BasicSelectable>
diff --git a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
index 87657d7619..030ac4aaf6 100644
--- a/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
+++ b/web/src/app/chat/sessionSidebar/ChatSessionDisplay.tsx
@@ -22,11 +22,13 @@ import { CHAT_SESSION_ID_KEY, FOLDER_ID_KEY } from "@/lib/drag/constants";
 
 export function ChatSessionDisplay({
   chatSession,
+  search,
   isSelected,
   skipGradient,
 }: {
   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;
@@ -90,7 +92,11 @@ export function ChatSessionDisplay({
       <Link
         className="flex my-1 relative"
         key={chatSession.id}
-        href={`/chat?chatId=${chatSession.id}`}
+        href={
+          search
+            ? `/search?searchId=${chatSession.id}`
+            : `/chat?chatId=${chatSession.id}`
+        }
         scroll={false}
         draggable="true"
         onDragStart={(event) => {
@@ -104,7 +110,7 @@ export function ChatSessionDisplay({
           );
         }}
       >
-        <BasicSelectable fullWidth selected={isSelected}>
+        <BasicSelectable padding="extra" fullWidth selected={isSelected}>
           <>
             <div className="flex relative">
               {isRenamingChat ? (
@@ -197,7 +203,7 @@ export function ChatSessionDisplay({
               <div className="absolute bottom-0 right-0 top-0 bg-gradient-to-l to-transparent from-hover w-20 from-60% rounded" />
             )}
             {!isSelected && !delayedSkipGradient && (
-              <div className="absolute bottom-0 right-0 top-0 bg-gradient-to-l to-transparent from-background-weak w-8 from-0% rounded" />
+              <div className="absolute bottom-0 right-0 top-0 bg-gradient-to-l to-transparent from-background-100 w-8 from-0% rounded" />
             )}
           </>
         </BasicSelectable>
diff --git a/web/src/app/chat/sessionSidebar/ChatSidebar.tsx b/web/src/app/chat/sessionSidebar/ChatSidebar.tsx
deleted file mode 100644
index 9b0d94020f..0000000000
--- a/web/src/app/chat/sessionSidebar/ChatSidebar.tsx
+++ /dev/null
@@ -1,164 +0,0 @@
-"use client";
-
-import { FiBook, FiEdit, FiFolderPlus, FiPlusSquare } from "react-icons/fi";
-import { useContext, useEffect, useRef, useState } from "react";
-import Link from "next/link";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import { BasicClickable, BasicSelectable } from "@/components/BasicClickable";
-import { ChatSession } from "../interfaces";
-
-import {
-  NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED,
-  NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA,
-} from "@/lib/constants";
-
-import { ChatTab } from "./ChatTab";
-import { Folder } from "../folders/interfaces";
-import { createFolder } from "../folders/FolderManagement";
-import { usePopup } from "@/components/admin/connectors/Popup";
-import { SettingsContext } from "@/components/settings/SettingsProvider";
-
-import React from "react";
-import { FaBrain } from "react-icons/fa";
-import { Logo } from "@/components/Logo";
-import { HeaderTitle } from "@/components/header/Header";
-
-export const ChatSidebar = ({
-  existingChats,
-  currentChatSession,
-  folders,
-  openedFolders,
-}: {
-  existingChats: ChatSession[];
-  currentChatSession: ChatSession | null | undefined;
-  folders: Folder[];
-  openedFolders: { [key: number]: boolean };
-}) => {
-  const router = useRouter();
-  const { popup, setPopup } = usePopup();
-
-  const currentChatId = currentChatSession?.id;
-
-  // prevent the NextJS Router cache from causing the chat sidebar to not
-  // update / show an outdated list of chats
-  useEffect(() => {
-    router.refresh();
-  }, [currentChatId]);
-
-  const combinedSettings = useContext(SettingsContext);
-  if (!combinedSettings) {
-    return null;
-  }
-  const settings = combinedSettings.settings;
-  const enterpriseSettings = combinedSettings.enterpriseSettings;
-
-  return (
-    <>
-      {popup}
-      <div
-        className={`
-        w-64
-        flex
-        flex-none
-        bg-background-weak
-        3xl:w-72
-        border-r 
-        border-border 
-        flex 
-        flex-col 
-        h-screen
-        transition-transform`}
-        id="chat-sidebar"
-      >
-        <div className="pt-6 flex">
-          <Link
-            className="ml-4 w-full"
-            href={
-              settings && settings.default_page === "chat" ? "/chat" : "/search"
-            }
-          >
-            <div className="flex w-full">
-              <Logo height={32} width={30} className="mr-1 my-auto" />
-
-              {enterpriseSettings && enterpriseSettings.application_name ? (
-                <div>
-                  <HeaderTitle>
-                    {enterpriseSettings.application_name}
-                  </HeaderTitle>
-
-                  {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
-                    <p className="text-xs text-subtle -mt-1.5">
-                      Powered by Danswer
-                    </p>
-                  )}
-                </div>
-              ) : (
-                <HeaderTitle>Danswer</HeaderTitle>
-              )}
-            </div>
-          </Link>
-        </div>
-
-        <div className="flex mt-5 items-center">
-          <Link
-            href={
-              "/chat" +
-              (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA &&
-              currentChatSession
-                ? `?assistantId=${currentChatSession.persona_id}`
-                : "")
-            }
-            className="ml-3 w-full"
-          >
-            <BasicClickable fullWidth>
-              <div className="flex items-center text-sm">
-                <FiEdit className="ml-1 mr-2" /> New Chat
-              </div>
-            </BasicClickable>
-          </Link>
-
-          <div className="ml-1.5 mr-3 h-full">
-            <BasicClickable
-              onClick={() =>
-                createFolder("New Folder")
-                  .then((folderId) => {
-                    console.log(`Folder created with ID: ${folderId}`);
-                    router.refresh();
-                  })
-                  .catch((error) => {
-                    console.error("Failed to create folder:", error);
-                    setPopup({
-                      message: `Failed to create folder: ${error.message}`,
-                      type: "error",
-                    });
-                  })
-              }
-            >
-              <div className="flex items-center text-sm h-full">
-                <FiFolderPlus className="mx-1 my-auto" />
-              </div>
-            </BasicClickable>
-          </div>
-        </div>
-
-        <Link href="/assistants/mine" className="mt-3 mb-1 mx-3">
-          <BasicClickable fullWidth>
-            <div className="flex items-center text-default font-medium">
-              <FaBrain className="ml-1 mr-2" /> Manage Assistants
-            </div>
-          </BasicClickable>
-        </Link>
-
-        <div className="border-b border-border pb-4 mx-3" />
-
-        <ChatTab
-          existingChats={existingChats}
-          currentChatId={currentChatId}
-          folders={folders}
-          openedFolders={openedFolders}
-        />
-      </div>
-    </>
-  );
-};
diff --git a/web/src/app/chat/sessionSidebar/HistorySidebar.tsx b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
new file mode 100644
index 0000000000..e29e18d51e
--- /dev/null
+++ b/web/src/app/chat/sessionSidebar/HistorySidebar.tsx
@@ -0,0 +1,185 @@
+"use client";
+
+import { FiEdit, FiFolderPlus } from "react-icons/fi";
+import {
+  Dispatch,
+  ForwardedRef,
+  forwardRef,
+  SetStateAction,
+  useContext,
+  useEffect,
+} from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { BasicClickable } from "@/components/BasicClickable";
+import { ChatSession } from "../interfaces";
+
+import {
+  NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED,
+  NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA,
+} from "@/lib/constants";
+
+import { Folder } from "../folders/interfaces";
+import { createFolder } from "../folders/FolderManagement";
+import { usePopup } from "@/components/admin/connectors/Popup";
+import { SettingsContext } from "@/components/settings/SettingsProvider";
+
+import React from "react";
+import { Logo } from "@/components/Logo";
+import { HeaderTitle } from "@/components/header/Header";
+import { TbLayoutSidebarRightExpand } from "react-icons/tb";
+import {
+  AssistantsIcon,
+  AssistantsIconSkeleton,
+  BackIcon,
+  LefToLineIcon,
+  RightToLineIcon,
+} from "@/components/icons/icons";
+import { PagesTab } from "./PagesTab";
+import { Tooltip } from "@/components/tooltip/Tooltip";
+import KeyboardSymbol from "@/lib/browserUtilities";
+
+interface HistorySidebarProps {
+  page: "search" | "chat" | "assistants";
+  existingChats?: ChatSession[];
+  currentChatSession?: ChatSession | null | undefined;
+  folders?: Folder[];
+  openedFolders?: { [key: number]: boolean };
+  toggleSidebar?: () => void;
+  toggled?: boolean;
+}
+
+export const HistorySidebar = forwardRef<HTMLDivElement, HistorySidebarProps>(
+  (
+    {
+      toggled,
+      page,
+      existingChats,
+      currentChatSession,
+      folders,
+      openedFolders,
+      toggleSidebar,
+    },
+    ref: ForwardedRef<HTMLDivElement>
+  ) => {
+    const commandSymbol = KeyboardSymbol();
+    const router = useRouter();
+    const { popup, setPopup } = usePopup();
+
+    const currentChatId = currentChatSession?.id;
+
+    // prevent the NextJS Router cache from causing the chat sidebar to not
+    // update / show an outdated list of chats
+    useEffect(() => {
+      router.refresh();
+    }, [currentChatId]);
+
+    const combinedSettings = useContext(SettingsContext);
+    if (!combinedSettings) {
+      return null;
+    }
+    const settings = combinedSettings.settings;
+    const enterpriseSettings = combinedSettings.enterpriseSettings;
+
+    return (
+      <>
+        {popup}
+
+        <div
+          ref={ref}
+          className={`
+            flex
+            flex-none
+            bg-background-100
+            w-full
+            border-r 
+            border-border 
+            flex 
+            flex-col relative
+            h-screen
+            transition-transform`}
+        >
+          <div className="ml-4 mr-3 flex flex gap-x-1 items-center mt-2 my-auto text-text-700 text-xl">
+            <div className="mr-1 my-auto h-6 w-6">
+              <Logo height={24} width={24} />
+            </div>
+
+            <div className="invisible">
+              {enterpriseSettings && enterpriseSettings.application_name ? (
+                <HeaderTitle>{enterpriseSettings.application_name}</HeaderTitle>
+              ) : (
+                <HeaderTitle>Danswer</HeaderTitle>
+              )}
+            </div>
+
+            {toggleSidebar && (
+              <Tooltip delayDuration={1000} content={`${commandSymbol}E show`}>
+                <button className="ml-auto" onClick={toggleSidebar}>
+                  {!toggled ? <RightToLineIcon /> : <LefToLineIcon />}
+                </button>
+              </Tooltip>
+            )}
+          </div>
+          {!(page == "search") && (
+            <div className="mx-3 mt-4 gap-y-1 flex-col flex gap-x-1.5 items-center items-center">
+              <Link
+                href={
+                  "/chat" +
+                  (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA &&
+                  currentChatSession
+                    ? `?assistantId=${currentChatSession.persona_id}`
+                    : "")
+                }
+                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"
+              >
+                <FiEdit className="flex-none " />
+                <p className="my-auto flex items-center text-sm">New Chat</p>
+              </Link>
+
+              <button
+                onClick={() =>
+                  createFolder("New Folder")
+                    .then((folderId) => {
+                      console.log(`Folder created with ID: ${folderId}`);
+                      router.refresh();
+                    })
+                    .catch((error) => {
+                      console.error("Failed to create folder:", error);
+                      setPopup({
+                        message: `Failed to create folder: ${error.message}`,
+                        type: "error",
+                      });
+                    })
+                }
+                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"
+              >
+                <FiFolderPlus className="my-auto" />
+                <p className="my-auto flex items-center text-sm">New Folder</p>
+              </button>
+
+              <Link
+                href="/assistants/mine"
+                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"
+              >
+                <AssistantsIconSkeleton className="h-4 w-4 my-auto" />
+                <p className="my-auto flex items-center text-sm">
+                  Manage Assistants
+                </p>
+              </Link>
+            </div>
+          )}
+          <div className="border-b border-border pb-4 mx-3" />
+
+          <PagesTab
+            page={page}
+            existingChats={existingChats}
+            currentChatId={currentChatId}
+            folders={folders}
+            openedFolders={openedFolders}
+          />
+        </div>
+      </>
+    );
+  }
+);
+HistorySidebar.displayName = "HistorySidebar";
diff --git a/web/src/app/chat/sessionSidebar/ChatTab.tsx b/web/src/app/chat/sessionSidebar/PagesTab.tsx
similarity index 75%
rename from web/src/app/chat/sessionSidebar/ChatTab.tsx
rename to web/src/app/chat/sessionSidebar/PagesTab.tsx
index d47881d933..137cb6a60d 100644
--- a/web/src/app/chat/sessionSidebar/ChatTab.tsx
+++ b/web/src/app/chat/sessionSidebar/PagesTab.tsx
@@ -9,18 +9,23 @@ import { usePopup } from "@/components/admin/connectors/Popup";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 
-export function ChatTab({
+export function PagesTab({
+  page,
   existingChats,
   currentChatId,
   folders,
   openedFolders,
 }: {
-  existingChats: ChatSession[];
+  page: "search" | "chat" | "assistants";
+  existingChats?: ChatSession[];
   currentChatId?: number;
-  folders: Folder[];
-  openedFolders: { [key: number]: boolean };
+  folders?: Folder[];
+  openedFolders?: { [key: number]: boolean };
 }) {
-  const groupedChatSessions = groupSessionsByDateRange(existingChats);
+  const groupedChatSessions = existingChats
+    ? groupSessionsByDateRange(existingChats)
+    : [];
+
   const { setPopup } = usePopup();
   const router = useRouter();
   const [isDragOver, setIsDragOver] = useState<boolean>(false);
@@ -50,9 +55,9 @@ export function ChatTab({
   };
 
   return (
-    <div className="mb-1 ml-3 overflow-y-auto h-full">
-      {folders.length > 0 && (
-        <div className="py-2 mr-3 border-b border-border">
+    <div className="mb-1 ml-3 relative miniscroll overflow-y-auto h-full">
+      {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-medium">
             Folders
           </div>
@@ -63,7 +68,6 @@ export function ChatTab({
           />
         </div>
       )}
-
       <div
         onDragOver={(event) => {
           event.preventDefault();
@@ -75,12 +79,23 @@ export function ChatTab({
           isDragOver ? "bg-hover" : ""
         } rounded-md`}
       >
+        {(page == "chat" || page == "search") && (
+          <p className="my-2 text-xs text-subtle flex font-semibold">
+            {page == "chat" && "Chat "}
+            {page == "search" && "Search "}
+            History
+          </p>
+        )}
         {Object.entries(groupedChatSessions).map(
-          ([dateRange, chatSessions]) => {
+          ([dateRange, chatSessions], ind) => {
             if (chatSessions.length > 0) {
               return (
                 <div key={dateRange}>
-                  <div className="text-xs text-subtle flex pb-0.5 mb-1.5 mt-5 font-medium">
+                  <div
+                    className={`text-xs text-subtle  ${
+                      ind != 0 && "mt-5"
+                    } flex pb-0.5 mb-1.5 font-medium`}
+                  >
                     {dateRange}
                   </div>
                   {chatSessions
@@ -90,6 +105,7 @@ export function ChatTab({
                       return (
                         <div key={`${chat.id}-${chat.name}`}>
                           <ChatSessionDisplay
+                            search={page == "search"}
                             chatSession={chat}
                             isSelected={isSelected}
                             skipGradient={isDragOver}
diff --git a/web/src/app/chat/shared_chat_search/FixedLogo.tsx b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
new file mode 100644
index 0000000000..a9ee318889
--- /dev/null
+++ b/web/src/app/chat/shared_chat_search/FixedLogo.tsx
@@ -0,0 +1,25 @@
+import { HeaderTitle } from "@/components/header/Header";
+import { Logo } from "@/components/Logo";
+import { SettingsContext } from "@/components/settings/SettingsProvider";
+import { useContext } from "react";
+
+export default function FixedLogo() {
+  const combinedSettings = useContext(SettingsContext);
+  const settings = combinedSettings?.settings;
+  const enterpriseSettings = combinedSettings?.enterpriseSettings;
+
+  return (
+    <div className="fixed flex z-40 left-4 top-2">
+      {" "}
+      <a href="/chat" className="ml-7 text-text-700 text-xl">
+        <div>
+          {enterpriseSettings && enterpriseSettings.application_name ? (
+            <HeaderTitle>{enterpriseSettings.application_name}</HeaderTitle>
+          ) : (
+            <HeaderTitle>Danswer</HeaderTitle>
+          )}
+        </div>
+      </a>
+    </div>
+  );
+}
diff --git a/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
new file mode 100644
index 0000000000..537347e794
--- /dev/null
+++ b/web/src/app/chat/shared_chat_search/FunctionalWrapper.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import React, { ReactNode, useContext, useEffect, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
+import { ChatIcon, SearchIcon } from "@/components/icons/icons";
+import { SettingsContext } from "@/components/settings/SettingsProvider";
+import KeyboardSymbol from "@/lib/browserUtilities";
+
+const ToggleSwitch = () => {
+  const commandSymbol = KeyboardSymbol();
+  const pathname = usePathname();
+  const router = useRouter();
+  const [activeTab, setActiveTab] = useState(() => {
+    if (typeof window !== "undefined") {
+      return localStorage.getItem("activeTab") || "chat";
+    }
+    return "chat";
+  });
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
+
+  useEffect(() => {
+    const newTab = pathname === "/search" ? "search" : "chat";
+    setActiveTab(newTab);
+    localStorage.setItem("activeTab", newTab);
+    setIsInitialLoad(false);
+  }, [pathname]);
+
+  const handleTabChange = (tab: string) => {
+    setActiveTab(tab);
+    localStorage.setItem("activeTab", tab);
+    router.push(tab === "search" ? "/search" : "/chat");
+  };
+
+  return (
+    <div className="bg-gray-100 flex rounded-full p-1">
+      <div
+        className={`absolute top-1 bottom-1  ${
+          activeTab === "chat" ? "w-[45%]" : "w-[50%]"
+        } bg-white rounded-full shadow ${
+          isInitialLoad ? "" : "transition-transform duration-300 ease-in-out"
+        } ${activeTab === "chat" ? "translate-x-[115%]" : "translate-x-[1%]"}`}
+      />
+      <button
+        className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-300 ease-in-out flex items-center relative z-10 ${
+          activeTab === "search"
+            ? "text-gray-800"
+            : "text-gray-500 hover:text-gray-700"
+        }`}
+        onClick={() => handleTabChange("search")}
+      >
+        <SearchIcon size={16} className="mr-2" />
+        Search
+        <span className="text-xs ml-2">{commandSymbol}S</span>
+      </button>
+      <button
+        className={`px-4 py-2 rounded-full text-sm font-medium transition-colors duration-300 ease-in-out flex  items-center relative z-10 ${
+          activeTab === "chat"
+            ? "text-gray-800"
+            : "text-gray-500 hover:text-gray-700"
+        }`}
+        onClick={() => handleTabChange("chat")}
+      >
+        <ChatIcon size={16} className="mr-2" />
+        <p className="items-baseline flex">
+          Chat
+          <span className="text-xs ml-2">{commandSymbol}D</span>
+        </p>
+      </button>
+    </div>
+  );
+};
+
+export default function FunctionalWrapper({
+  // children,
+  initiallyToggled,
+  content,
+}: {
+  // children: React.ReactNode;
+  content: (toggledSidebar: boolean, toggle: () => void) => ReactNode;
+  initiallyToggled: boolean;
+}) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        const newPage = event.shiftKey;
+        switch (event.key.toLowerCase()) {
+          case "d":
+            event.preventDefault();
+            if (newPage) {
+              window.open("/chat", "_blank");
+            } else {
+              router.push("/chat");
+            }
+            break;
+          case "s":
+            event.preventDefault();
+            if (newPage) {
+              window.open("/search", "_blank");
+            } else {
+              router.push("/search");
+            }
+            break;
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [router]);
+  const settings = useContext(SettingsContext)?.settings;
+
+  const [toggledSidebar, setToggledSidebar] = useState(initiallyToggled);
+
+  const toggle = () => {
+    setToggledSidebar((toggledSidebar) => !toggledSidebar);
+  };
+
+  return (
+    <>
+      {(!settings ||
+        (settings.search_page_enabled && settings.chat_page_enabled)) && (
+        <div className="z-[40] flex fixed top-4 left-1/2 transform -translate-x-1/2">
+          <div
+            style={{ transition: "width 0.30s ease-out" }}
+            className={`flex-none overflow-y-hidden bg-background-100 transition-all bg-opacity-80duration-300 ease-in-out h-full
+                        ${toggledSidebar ? "w-[300px] " : "w-[0px]"}`}
+          />
+          <div className="relative">
+            <ToggleSwitch />
+          </div>
+        </div>
+      )}
+
+      <div className="absolute left-0 top-0 w-full h-full">
+        {content(toggledSidebar, toggle)}
+      </div>
+    </>
+  );
+}
diff --git a/web/src/app/ee/admin/groups/page.tsx b/web/src/app/ee/admin/groups/page.tsx
index 37058a50cc..4e923c7db5 100644
--- a/web/src/app/ee/admin/groups/page.tsx
+++ b/web/src/app/ee/admin/groups/page.tsx
@@ -85,7 +85,7 @@ const Page = () => {
   return (
     <div className="mx-auto container">
       <AdminPageTitle
-        title="Manage Users Groups"
+        title="Manage User Groups"
         icon={<GroupsIcon size={32} />}
       />
 
diff --git a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
index 6b4b7147d1..dbec86e665 100644
--- a/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
+++ b/web/src/app/ee/admin/whitelabeling/WhitelabelingForm.tsx
@@ -77,6 +77,7 @@ export function WhitelabelingForm() {
                 body: formData,
               }
             );
+            console.log(response);
             if (!response.ok) {
               const errorMsg = (await response.json()).detail;
               alert(`Failed to upload logo. ${errorMsg}`);
diff --git a/web/src/app/ee/admin/whitelabeling/page.tsx b/web/src/app/ee/admin/whitelabeling/page.tsx
index 388bc129b4..072fbdb03a 100644
--- a/web/src/app/ee/admin/whitelabeling/page.tsx
+++ b/web/src/app/ee/admin/whitelabeling/page.tsx
@@ -1,13 +1,13 @@
 import { WhitelabelingForm } from "./WhitelabelingForm";
 import { AdminPageTitle } from "@/components/admin/Title";
-import { FiImage } from "react-icons/fi";
+import { PaintingIcon } from "@/components/icons/icons";
 
 export default async function Whitelabeling() {
   return (
     <div className="mx-auto container">
       <AdminPageTitle
         title="Whitelabeling"
-        icon={<FiImage size={32} className="my-auto" />}
+        icon={<PaintingIcon size={32} className="my-auto" />}
       />
 
       <WhitelabelingForm />
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 45f0c1a6f9..b41b955d0f 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -10,43 +10,107 @@
 
   /* Hide scrollbar for IE, Edge and Firefox */
   .no-scrollbar {
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none;
+    /* IE and Edge */
+    scrollbar-width: none;
+    /* Firefox */
   }
 }
 
+.inputscroll::-webkit-scrollbar-track {
+  background: #e5e7eb;
+  scrollbar-width: none;
+}
+
 ::-webkit-scrollbar-track {
-  background: theme("colors.scrollbar.track"); /* Track background color */
+  background: transparent;
+  /* background: theme("colors.scrollbar.track"); */
+  /* Track background color */
 }
 
 /* Style the scrollbar handle */
 ::-webkit-scrollbar-thumb {
-  background: theme("colors.scrollbar.thumb"); /* Handle color */
+  background: transparent;
+  /* background: theme("colors.scrollbar.thumb"); */
+  /* Handle color */
   border-radius: 10px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
-  background: theme("colors.scrollbar.thumb-hover"); /* Handle color on hover */
+  background: transparent;
+  /* background: theme("colors.scrollbar.thumb-hover"); */
+  /* Handle color on hover */
 }
 
 .dark-scrollbar::-webkit-scrollbar-thumb {
-  background: theme("colors.scrollbar.dark.thumb"); /* Handle color */
+  background: transparent;
+  /* background: theme("colors.scrollbar.dark.thumb"); */
+  /* Handle color */
   border-radius: 10px;
 }
 
 .dark-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: theme(
-    "colors.scrollbar.dark.thumb-hover"
-  ); /* Handle color on hover */
+  background: transparent;
+  /* background: theme("colors.scrollbar.dark.thumb-hover"); */
+  /* Handle color on hover */
 }
 
 ::-webkit-scrollbar {
-  width: 8px; /* Vertical scrollbar width */
-  height: 8px; /* Horizontal scrollbar height */
+  width: 0px;
+  /* Vertical scrollbar width */
+  height: 8px;
+  /* Horizontal scrollbar height */
 }
 
 /* Used to create alternatie to React Markdown */
 .preserve-lines {
-  white-space: pre-wrap; /* Preserves whitespace and wraps text */
+  white-space: pre-wrap;
+  /* Preserves whitespace and wraps text */
+}
+
+.loading-text {
+  display: inline-block;
+  color: #e5e5e5;
+
+  background: linear-gradient(
+    -90deg,
+    #a3a3a3 0%,
+    #000000 5%,
+    #a3a3a3 10%,
+    #a3a3a3 100%
+  );
+  background-size: 200% 100%;
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmerTransition 1.5s ease-out infinite;
+}
+
+@keyframes shimmerTransition {
+  0% {
+    background-position: 100% 0;
+  }
+
+  100% {
+    background-position: -100% 0;
+  }
+}
+
+.collapsible {
+  max-height: 300px;
+  transition:
+    max-height 0.5s ease-in-out,
+    opacity 0.5s ease-in-out;
+  opacity: 1;
+}
+
+.collapsible-closed {
+  max-height: 0;
+  opacity: 0;
+  overflow: hidden;
+}
+
+body {
+  overscroll-behavior-y: none;
 }
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index a0c95151e0..6738db1e30 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -1,15 +1,16 @@
 import "./globals.css";
 
-import { Inter } from "next/font/google";
 import { getCombinedSettings } from "@/components/settings/lib";
 import { CUSTOM_ANALYTICS_ENABLED } from "@/lib/constants";
 import { SettingsProvider } from "@/components/settings/SettingsProvider";
 import { Metadata } from "next";
 import { buildClientUrl } from "@/lib/utilsSS";
+import { Inter } from "next/font/google";
 
 const inter = Inter({
   subsets: ["latin"],
   variable: "--font-inter",
+  display: "swap",
 });
 
 export async function generateMetadata(): Promise<Metadata> {
diff --git a/web/src/app/search/WrappedSearch.tsx b/web/src/app/search/WrappedSearch.tsx
new file mode 100644
index 0000000000..a420f5747f
--- /dev/null
+++ b/web/src/app/search/WrappedSearch.tsx
@@ -0,0 +1,51 @@
+"use client";
+import { SearchSection } from "@/components/search/SearchSection";
+import FunctionalWrapper from "../chat/shared_chat_search/FunctionalWrapper";
+import { CCPairBasicInfo, DocumentSet, Tag, User } from "@/lib/types";
+import { Persona } from "../admin/assistants/interfaces";
+import { ChatSession } from "../chat/interfaces";
+
+export default function WrappedSearch({
+  querySessions,
+  ccPairs,
+  documentSets,
+  personas,
+  searchTypeDefault,
+  tags,
+  user,
+  agenticSearchEnabled,
+  initiallyToggled,
+  disabledAgentic,
+}: {
+  disabledAgentic: boolean;
+  querySessions: ChatSession[];
+  ccPairs: CCPairBasicInfo[];
+  documentSets: DocumentSet[];
+  personas: Persona[];
+  searchTypeDefault: string;
+  tags: Tag[];
+  user: User | null;
+  agenticSearchEnabled: boolean;
+  initiallyToggled: boolean;
+}) {
+  return (
+    <FunctionalWrapper
+      initiallyToggled={initiallyToggled}
+      content={(toggledSidebar, toggle) => (
+        <SearchSection
+          disabledAgentic={disabledAgentic}
+          agenticSearchEnabled={agenticSearchEnabled}
+          toggle={toggle}
+          toggledSidebar={toggledSidebar}
+          querySessions={querySessions}
+          user={user}
+          ccPairs={ccPairs}
+          documentSets={documentSets}
+          personas={personas}
+          tags={tags}
+          defaultSearchType={searchTypeDefault}
+        />
+      )}
+    />
+  );
+}
diff --git a/web/src/app/search/page.tsx b/web/src/app/search/page.tsx
index 364e00ed14..8bfc07f559 100644
--- a/web/src/app/search/page.tsx
+++ b/web/src/app/search/page.tsx
@@ -28,6 +28,15 @@ import {
   FetchAssistantsResponse,
   fetchAssistantsSS,
 } from "@/lib/assistants/fetchAssistantsSS";
+import FunctionalWrapper from "../chat/shared_chat_search/FunctionalWrapper";
+import { ChatSession } from "../chat/interfaces";
+import { SIDEBAR_TOGGLED_COOKIE_NAME } from "@/components/resizable/contants";
+import ToggleSearch from "./WrappedSearch";
+import {
+  AGENTIC_SEARCH_TYPE_COOKIE_NAME,
+  DISABLE_AGENTIC_SEARCH,
+} from "@/lib/constants";
+import WrappedSearch from "./WrappedSearch";
 
 export default async function Home() {
   // Disable caching so we always get the up to date connector / document set / persona info
@@ -43,6 +52,7 @@ export default async function Home() {
     fetchAssistantsSS(),
     fetchSS("/query/valid-tags"),
     fetchSS("/secondary-index/get-embedding-models"),
+    fetchSS("/query/user-searches"),
   ];
 
   // catch cases where the backend is completely unreachable here
@@ -69,6 +79,7 @@ export default async function Home() {
     results[4] as FetchAssistantsResponse;
   const tagsResponse = results[5] as Response | null;
   const embeddingModelResponse = results[6] as Response | null;
+  const queryResponse = results[7] as Response | null;
 
   const authDisabled = authTypeMetadata?.authType === "disabled";
   if (!authDisabled && !user) {
@@ -95,6 +106,13 @@ export default async function Home() {
     );
   }
 
+  let querySessions: ChatSession[] = [];
+  if (queryResponse?.ok) {
+    querySessions = (await queryResponse.json()).sessions;
+  } else {
+    console.log(`Failed to fetch chat sessions - ${queryResponse?.text()}`);
+  }
+
   let assistants: Persona[] = initialAssistantsList;
   if (assistantsFetchError) {
     console.log(`Failed to fetch assistants - ${assistantsFetchError}`);
@@ -118,6 +136,7 @@ export default async function Home() {
     embeddingModelResponse && embeddingModelResponse.ok
       ? ((await embeddingModelResponse.json()) as FullEmbeddingModelResponse)
       : null;
+
   const currentEmbeddingModelName =
     embeddingModelVersionInfo?.current_model_name;
   const nextEmbeddingModelName =
@@ -151,9 +170,19 @@ export default async function Home() {
     !shouldDisplayNoSourcesModal &&
     !shouldShowWelcomeModal;
 
+  const sidebarToggled = cookies().get(SIDEBAR_TOGGLED_COOKIE_NAME);
+  const agenticSearchToggle = cookies().get(AGENTIC_SEARCH_TYPE_COOKIE_NAME);
+
+  const toggleSidebar = sidebarToggled
+    ? sidebarToggled.value.toLocaleLowerCase() == "true" || false
+    : false;
+
+  const agenticSearchEnabled = agenticSearchToggle
+    ? agenticSearchToggle.value.toLocaleLowerCase() == "true" || true
+    : false;
+
   return (
     <>
-      <Header user={user} />
       <div className="m-3">
         <HealthCheckBanner />
       </div>
@@ -174,18 +203,18 @@ export default async function Home() {
       <ChatPopup />
 
       <InstantSSRAutoRefresh />
-
-      <div className="px-24 pt-10 flex flex-col items-center min-h-screen">
-        <div className="w-full">
-          <SearchSection
-            ccPairs={ccPairs}
-            documentSets={documentSets}
-            personas={assistants}
-            tags={tags}
-            defaultSearchType={searchTypeDefault}
-          />
-        </div>
-      </div>
+      <WrappedSearch
+        disabledAgentic={DISABLE_AGENTIC_SEARCH}
+        initiallyToggled={toggleSidebar}
+        querySessions={querySessions}
+        user={user}
+        ccPairs={ccPairs}
+        documentSets={documentSets}
+        personas={assistants}
+        tags={tags}
+        searchTypeDefault={searchTypeDefault}
+        agenticSearchEnabled={agenticSearchEnabled}
+      />
     </>
   );
 }
diff --git a/web/src/components/BasicClickable.tsx b/web/src/components/BasicClickable.tsx
index 21546a0d90..d973362aed 100644
--- a/web/src/components/BasicClickable.tsx
+++ b/web/src/components/BasicClickable.tsx
@@ -2,9 +2,11 @@ export function BasicClickable({
   children,
   onClick,
   fullWidth = false,
+  inset,
 }: {
   children: string | JSX.Element;
   onClick?: () => void;
+  inset?: boolean;
   fullWidth?: boolean;
 }) {
   return (
@@ -12,16 +14,17 @@ export function BasicClickable({
       onClick={onClick}
       className={`
         border 
-        border-border 
-        shadow-md
+        border-border
         rounded
         font-medium 
         text-emphasis 
         text-sm
-        p-1
+        relative
+        px-1 py-1.5
         h-full
         bg-background
         select-none
+        overflow-hidden
         hover:bg-hover-light
         ${fullWidth ? "w-full" : ""}`}
     >
@@ -41,20 +44,23 @@ export function EmphasizedClickable({
 }) {
   return (
     <button
-      onClick={onClick}
       className={`
-        border 
-        border-border 
-        shadow-md
-        rounded
-        font-medium 
-        text-emphasis
-        text-sm
-        p-1
-        select-none
-        bg-hover-light
-        hover:bg-hover
-        ${fullWidth ? "w-full" : ""}`}
+    inline-flex 
+    items-center 
+    justify-center 
+    flex-shrink-0 
+    font-medium 
+    min-h-[38px] 
+    py-2 
+    px-3 
+    w-fit 
+    bg-hover
+    border-1 border-neutral-300 border bg-neutral-100 
+    text-sm
+    rounded-lg
+    hover:bg-background-125
+`}
+      onClick={onClick}
     >
       {children}
     </button>
@@ -66,13 +72,13 @@ export function BasicSelectable({
   selected,
   hasBorder,
   fullWidth = false,
-  padding = true,
+  padding = "normal",
 }: {
   children: string | JSX.Element;
   selected: boolean;
   hasBorder?: boolean;
   fullWidth?: boolean;
-  padding?: boolean;
+  padding?: "none" | "normal" | "extra";
 }) {
   return (
     <div
@@ -81,7 +87,8 @@ export function BasicSelectable({
         font-medium 
         text-emphasis 
         text-sm
-        ${padding && "p-1"}
+        ${padding == "normal" && "p-1"}
+        ${padding == "extra" && "p-1.5"}
         select-none
         ${hasBorder ? "border border-border" : ""}
         ${selected ? "bg-hover" : "hover:bg-hover"}
diff --git a/web/src/components/CopyButton.tsx b/web/src/components/CopyButton.tsx
index 0643da16c5..9032e7be9d 100644
--- a/web/src/components/CopyButton.tsx
+++ b/web/src/components/CopyButton.tsx
@@ -1,6 +1,7 @@
 import { useState } from "react";
 import { FiCheck, FiCopy } from "react-icons/fi";
-import { Hoverable } from "./Hoverable";
+import { Hoverable, HoverableIcon } from "./Hoverable";
+import { CheckmarkIcon, CopyMessageIcon } from "./icons/icons";
 
 export function CopyButton({
   content,
@@ -12,8 +13,8 @@ export function CopyButton({
   const [copyClicked, setCopyClicked] = useState(false);
 
   return (
-    <Hoverable
-      icon={copyClicked ? FiCheck : FiCopy}
+    <HoverableIcon
+      icon={copyClicked ? <CheckmarkIcon /> : <CopyMessageIcon />}
       onClick={() => {
         if (content) {
           navigator.clipboard.writeText(content.toString());
diff --git a/web/src/components/CustomCheckbox.tsx b/web/src/components/CustomCheckbox.tsx
index e06e948bef..dac48d33b4 100644
--- a/web/src/components/CustomCheckbox.tsx
+++ b/web/src/components/CustomCheckbox.tsx
@@ -1,3 +1,5 @@
+import { CheckmarkIcon } from "./icons/icons";
+
 export const CustomCheckbox = ({
   checked,
   onChange,
@@ -21,12 +23,10 @@ export const CustomCheckbox = ({
           } transition duration-300`}
         >
           {checked && (
-            <svg
-              className="absolute top-0 left-0 w-3 h-3 fill-current text-inverted"
-              viewBox="0 0 20 20"
-            >
-              <path d="M0 11l2-2 5 5L18 3l2 2L7 18z" />
-            </svg>
+            <CheckmarkIcon
+              size={12}
+              className="absolute top-0 left-0 fill-current text-inverted"
+            />
           )}
         </span>
       </span>
diff --git a/web/src/components/DanswerInitializingLoader.tsx b/web/src/components/DanswerInitializingLoader.tsx
index a910113a34..8e4f3c487f 100644
--- a/web/src/components/DanswerInitializingLoader.tsx
+++ b/web/src/components/DanswerInitializingLoader.tsx
@@ -7,7 +7,7 @@ export function DanswerInitializingLoader() {
   const settings = useContext(SettingsContext);
 
   return (
-    <div className="mx-auto animate-pulse">
+    <div className="mx-auto my-auto animate-pulse">
       <Logo height={96} width={96} className="mx-auto mb-3" />
       <Bold>
         Initializing{" "}
diff --git a/web/src/components/Dropdown.tsx b/web/src/components/Dropdown.tsx
index 47434479f2..2d4d7325b1 100644
--- a/web/src/components/Dropdown.tsx
+++ b/web/src/components/Dropdown.tsx
@@ -1,4 +1,11 @@
-import { ChangeEvent, FC, useEffect, useRef, useState } from "react";
+import {
+  ChangeEvent,
+  FC,
+  forwardRef,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
 import { ChevronDownIcon } from "./icons/icons";
 import { FiCheck, FiChevronDown } from "react-icons/fi";
 import { Popover } from "./popover/Popover";
@@ -25,7 +32,9 @@ function StandardDropdownOption<T>({
   return (
     <button
       onClick={() => handleSelect(option)}
-      className={`w-full text-left block px-4 py-2.5 text-sm hover:bg-gray-800 ${index !== 0 ? " border-t-2 border-gray-600" : ""}`}
+      className={`w-full text-left block px-4 py-2.5 text-sm hover:bg-gray-800 ${
+        index !== 0 ? " border-t-2 border-gray-600" : ""
+      }`}
       role="menuitem"
     >
       <p className="font-medium">{option.name}</p>
@@ -215,7 +224,9 @@ export const CustomDropdown = ({
       {isOpen && (
         <div
           onClick={() => setIsOpen(!isOpen)}
-          className={`absolute ${direction === "up" ? "bottom-full pb-2" : "pt-2"} w-full z-30 box-shadow`}
+          className={`absolute ${
+            direction === "up" ? "bottom-full pb-2" : "pt-2"
+          } w-full z-30 box-shadow`}
         >
           {dropdown}
         </div>
@@ -280,15 +291,7 @@ export function DefaultDropdownElement({
   );
 }
 
-export function DefaultDropdown({
-  options,
-  selected,
-  onSelect,
-  includeDefault = false,
-  side,
-  maxHeight,
-  defaultValue,
-}: {
+type DefaultDropdownProps = {
   options: StringOrNumberOption[];
   selected: string | null;
   onSelect: (value: string | number | null) => void;
@@ -296,13 +299,27 @@ export function DefaultDropdown({
   defaultValue?: string;
   side?: "top" | "right" | "bottom" | "left";
   maxHeight?: string;
-}) {
-  const selectedOption = options.find((option) => option.value === selected);
-  const [isOpen, setIsOpen] = useState(false);
+};
 
-  const Content = (
-    <div
-      className={`
+export const DefaultDropdown = forwardRef<HTMLDivElement, DefaultDropdownProps>(
+  (
+    {
+      options,
+      selected,
+      onSelect,
+      includeDefault,
+      defaultValue,
+      side,
+      maxHeight,
+    },
+    ref
+  ) => {
+    const selectedOption = options.find((option) => option.value === selected);
+    const [isOpen, setIsOpen] = useState(false);
+
+    const Content = (
+      <div
+        className={`
       flex 
       text-sm 
       bg-background 
@@ -312,18 +329,21 @@ export function DefaultDropdown({
       border 
       border-border 
       cursor-pointer`}
-    >
-      <p className="line-clamp-1">
-        {selectedOption?.name ||
-          (includeDefault ? defaultValue ?? "Default" : "Select an option...")}
-      </p>
-      <FiChevronDown className="my-auto ml-auto" />
-    </div>
-  );
+      >
+        <p className="line-clamp-1">
+          {selectedOption?.name ||
+            (includeDefault
+              ? defaultValue || "Default"
+              : "Select an option...")}
+        </p>
+        <FiChevronDown className="my-auto ml-auto" />
+      </div>
+    );
 
-  const Dropdown = (
-    <div
-      className={`
+    const Dropdown = (
+      <div
+        ref={ref}
+        className={`
         border 
         border 
         rounded-lg 
@@ -333,49 +353,50 @@ export function DefaultDropdown({
         ${maxHeight || "max-h-96"}
         overflow-y-auto 
         overscroll-contain`}
-    >
-      {includeDefault && (
-        <DefaultDropdownElement
-          key={-1}
-          name="Default"
-          onSelect={() => {
-            onSelect(null);
-          }}
-          isSelected={selected === null}
-        />
-      )}
-      {options.map((option, ind) => {
-        const isSelected = option.value === selected;
-        return (
+      >
+        {includeDefault && (
           <DefaultDropdownElement
-            key={option.value}
-            name={option.name}
-            description={option.description}
-            onSelect={() => onSelect(option.value)}
-            isSelected={isSelected}
-            icon={option.icon}
+            key={-1}
+            name="Default"
+            onSelect={() => {
+              onSelect(null);
+            }}
+            isSelected={selected === null}
           />
-        );
-      })}
-    </div>
-  );
+        )}
+        {options.map((option, ind) => {
+          const isSelected = option.value === selected;
+          return (
+            <DefaultDropdownElement
+              key={option.value}
+              name={option.name}
+              description={option.description}
+              onSelect={() => onSelect(option.value)}
+              isSelected={isSelected}
+              icon={option.icon}
+            />
+          );
+        })}
+      </div>
+    );
 
-  return (
-    <div onClick={() => setIsOpen(!isOpen)}>
-      <Popover
-        open={isOpen}
-        onOpenChange={(open) => setIsOpen(open)}
-        content={Content}
-        popover={Dropdown}
-        align="start"
-        side={side}
-        sideOffset={5}
-        matchWidth
-        triggerMaxWidth
-      />
-    </div>
-  );
-}
+    return (
+      <div onClick={() => setIsOpen(!isOpen)}>
+        <Popover
+          open={isOpen}
+          onOpenChange={(open) => setIsOpen(open)}
+          content={Content}
+          popover={Dropdown}
+          align="start"
+          side={side}
+          sideOffset={5}
+          matchWidth
+          triggerMaxWidth
+        />
+      </div>
+    );
+  }
+);
 
 export function ControlledPopup({
   children,
@@ -430,3 +451,4 @@ export function ControlledPopup({
     </div>
   );
 }
+DefaultDropdown.displayName = "DefaultDropdown";
diff --git a/web/src/components/Hoverable.tsx b/web/src/components/Hoverable.tsx
index 7bd1a12742..04b3d22f70 100644
--- a/web/src/components/Hoverable.tsx
+++ b/web/src/components/Hoverable.tsx
@@ -1,3 +1,4 @@
+import { IconProps } from "@tremor/react";
 import { IconType } from "react-icons";
 
 const ICON_SIZE = 15;
@@ -16,3 +17,17 @@ export const Hoverable: React.FC<{
     </div>
   );
 };
+
+export const HoverableIcon: React.FC<{
+  icon: JSX.Element;
+  onClick?: () => void;
+}> = ({ icon, onClick }) => {
+  return (
+    <div
+      className="hover:bg-hover p-1.5 rounded h-fit cursor-pointer"
+      onClick={onClick}
+    >
+      {icon}
+    </div>
+  );
+};
diff --git a/web/src/components/UserDropdown.tsx b/web/src/components/UserDropdown.tsx
index cabd08f854..2217f2948e 100644
--- a/web/src/components/UserDropdown.tsx
+++ b/web/src/components/UserDropdown.tsx
@@ -8,17 +8,17 @@ import { User } from "@/lib/types";
 import { checkUserIsNoAuthUser, logout } from "@/lib/user";
 import { BasicSelectable } from "@/components/BasicClickable";
 import { Popover } from "./popover/Popover";
-import { FaBrain } from "react-icons/fa";
 import { LOGOUT_DISABLED } from "@/lib/constants";
 import { Settings } from "@/app/admin/settings/interfaces";
 import { SettingsContext } from "./settings/SettingsProvider";
+import { LightSettingsIcon } from "./icons/icons";
 
 export function UserDropdown({
   user,
-  hideChatAndSearch,
+  page,
 }: {
   user: User | null;
-  hideChatAndSearch?: boolean;
+  page?: "search" | "chat" | "assistants";
 }) {
   const [userInfoVisible, setUserInfoVisible] = useState(false);
   const userInfoRef = useRef<HTMLDivElement>(null);
@@ -44,25 +44,25 @@ export function UserDropdown({
     user && !checkUserIsNoAuthUser(user.id) && !LOGOUT_DISABLED;
 
   return (
-    <div className="relative" ref={userInfoRef}>
+    <div className="group relative" ref={userInfoRef}>
       <Popover
         open={userInfoVisible}
         onOpenChange={setUserInfoVisible}
         content={
-          <BasicSelectable padding={false} selected={false}>
-            <div
-              onClick={() => setUserInfoVisible(!userInfoVisible)}
-              className="flex cursor-pointer"
-            >
-              <div className="my-auto bg-user hover:bg-user-hover rounded-lg px-2 text-base font-normal">
-                {user && user.email ? user.email[0].toUpperCase() : "A"}
-              </div>
+          <div
+            onClick={() => setUserInfoVisible(!userInfoVisible)}
+            className="flex cursor-pointer"
+          >
+            <div className="my-auto bg-background-strong ring-2 ring-transparent group-hover:ring-background-300/50 transition-ring duration-150 rounded-lg inline-block flex-none px-2 text-base font-normal">
+              {user && user.email ? user.email[0].toUpperCase() : "A"}
             </div>
-          </BasicSelectable>
+          </div>
         }
         popover={
           <div
             className={`
+              p-2
+              min-w-[200px]
                 text-strong 
                 text-sm
                 border 
@@ -79,54 +79,20 @@ export function UserDropdown({
                 overscroll-contain
               `}
           >
-            {!hideChatAndSearch && (
-              <>
-                {settings.search_page_enabled && (
-                  <Link
-                    href="/search"
-                    className="flex py-3 px-4 rounded cursor-pointer hover:bg-hover-light"
-                  >
-                    <FiSearch className="my-auto mr-2 text-lg" />
-                    Danswer Search
-                  </Link>
-                )}
-                {settings.chat_page_enabled && (
-                  <>
-                    <Link
-                      href="/chat"
-                      className="flex py-3 px-4 rounded cursor-pointer hover:bg-hover-light"
-                    >
-                      <FiMessageSquare className="my-auto mr-2 text-lg" />
-                      Danswer Chat
-                    </Link>
-                    <Link
-                      href="/assistants/mine"
-                      className="flex py-3 px-4 rounded cursor-pointer hover:bg-hover-light"
-                    >
-                      <FaBrain className="my-auto mr-2 text-lg" />
-                      My Assistants
-                    </Link>
-                  </>
-                )}
-              </>
-            )}
             {showAdminPanel && (
               <>
-                {!hideChatAndSearch && (
-                  <div className="border-t border-border my-1" />
-                )}
                 <Link
                   href="/admin/indexing/status"
                   className="flex py-3 px-4 cursor-pointer rounded hover:bg-hover-light"
                 >
-                  <FiTool className="my-auto mr-2 text-lg" />
+                  <LightSettingsIcon className="h-5 w-5 text-text-200est0 my-auto mr-2" />
                   Admin Panel
                 </Link>
               </>
             )}
             {showLogout && (
               <>
-                {(!hideChatAndSearch || showAdminPanel) && (
+                {(!(page == "search" || page == "chat") || showAdminPanel) && (
                   <div className="border-t border-border my-1" />
                 )}
                 <div
diff --git a/web/src/components/admin/Layout.tsx b/web/src/components/admin/Layout.tsx
index 8e8a3019fb..652821a5d6 100644
--- a/web/src/components/admin/Layout.tsx
+++ b/web/src/components/admin/Layout.tsx
@@ -12,6 +12,30 @@ import {
   DatabaseIcon,
   KeyIcon,
   ClipboardIcon,
+  ChatIcon,
+  SearchIcon,
+  NotebookIconSkeleton,
+  ConnectorIconSkeleton,
+  ThumbsUpIconSkeleton,
+  ToolIconSkeleton,
+  CpuIconSkeleton,
+  UsersIconSkeleton,
+  GroupsIconSkeleton,
+  KeyIconSkeleton,
+  ShieldIconSkeleton,
+  DatabaseIconSkeleton,
+  SettingsIconSkeleton,
+  PaintingIconSkeleton,
+  BookmarkIconSkeleton,
+  ZoomInIconSkeleton,
+  StarIconSkeleton,
+  SlackIconSkeleton,
+  DocumentSetIconSkeleton,
+  EmbeddingIcon,
+  EmbeddingIconSkeleton,
+  BackIcon,
+  AssistantsIcon,
+  AssistantsIconSkeleton,
 } from "@/components/icons/icons";
 import { User } from "@/lib/types";
 import {
@@ -32,6 +56,7 @@ import {
   FiSlack,
   FiTool,
 } from "react-icons/fi";
+import { UserDropdown } from "../UserDropdown";
 
 export async function Layout({ children }: { children: React.ReactNode }) {
   const tasks = [getAuthTypeMetadataSS(), getCurrentUserSS()];
@@ -65,11 +90,8 @@ export async function Layout({ children }: { children: React.ReactNode }) {
 
   return (
     <div className="h-screen overflow-y-hidden">
-      <div className="absolute top-0 z-50 w-full">
-        <Header user={user} />
-      </div>
-      <div className="flex h-full pt-16">
-        <div className="w-80  bg-background-weak pt-12 pb-8 h-full border-r border-border overflow-auto">
+      <div className="flex h-full">
+        <div className="w-64 z-20 bg-background-100 pt-4 pb-8 h-full border-r border-border miniscroll overflow-auto">
           <AdminSidebar
             collections={[
               {
@@ -78,7 +100,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <NotebookIcon size={18} />
+                        <NotebookIconSkeleton size={18} />
                         <div className="ml-1">Existing Connectors</div>
                       </div>
                     ),
@@ -87,7 +109,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <ConnectorIcon size={18} />
+                        <ConnectorIconSkeleton size={18} />
                         <div className="ml-1.5">Add Connector</div>
                       </div>
                     ),
@@ -101,7 +123,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <BookmarkIcon size={18} />
+                        <DocumentSetIconSkeleton size={18} />
                         <div className="ml-1">Document Sets</div>
                       </div>
                     ),
@@ -110,7 +132,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <ZoomInIcon size={18} />
+                        <ZoomInIconSkeleton size={18} />
                         <div className="ml-1">Explorer</div>
                       </div>
                     ),
@@ -119,7 +141,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <ThumbsUpIcon size={18} />
+                        <ThumbsUpIconSkeleton size={18} />
                         <div className="ml-1">Feedback</div>
                       </div>
                     ),
@@ -133,7 +155,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <RobotIcon size={18} />
+                        <AssistantsIconSkeleton className="my-auto" size={18} />
                         <div className="ml-1">Assistants</div>
                       </div>
                     ),
@@ -142,7 +164,8 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <FiSlack size={18} />
+                        {/* <FiSlack size={18} /> */}
+                        <SlackIconSkeleton />
                         <div className="ml-1">Slack Bots</div>
                       </div>
                     ),
@@ -151,7 +174,8 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <FiTool size={18} className="my-auto" />
+                        {/* <FiTool size={18} className="my-auto" /> */}
+                        <ToolIconSkeleton size={18} />
                         <div className="ml-1">Tools</div>
                       </div>
                     ),
@@ -174,7 +198,8 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <FiCpu size={18} />
+                        {/* <FiCpu size={18} /> */}
+                        <CpuIconSkeleton size={18} />
                         <div className="ml-1">LLM</div>
                       </div>
                     ),
@@ -183,7 +208,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <FiPackage size={18} />
+                        <EmbeddingIconSkeleton />
                         <div className="ml-1">Embedding</div>
                       </div>
                     ),
@@ -197,7 +222,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <UsersIcon size={18} />
+                        <UsersIconSkeleton size={18} />
                         <div className="ml-1">Users</div>
                       </div>
                     ),
@@ -208,7 +233,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                         {
                           name: (
                             <div className="flex">
-                              <GroupsIcon size={18} />
+                              <GroupsIconSkeleton size={18} />
                               <div className="ml-1">Groups</div>
                             </div>
                           ),
@@ -217,7 +242,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                         {
                           name: (
                             <div className="flex">
-                              <KeyIcon size={18} />
+                              <KeyIconSkeleton size={18} />
                               <div className="ml-1">API Keys</div>
                             </div>
                           ),
@@ -228,7 +253,8 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <FiShield size={18} />
+                        {/* <FiShield size={18} /> */}
+                        <ShieldIconSkeleton size={18} />
                         <div className="ml-1">Token Rate Limits</div>
                       </div>
                     ),
@@ -253,7 +279,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                         {
                           name: (
                             <div className="flex">
-                              <DatabaseIcon size={18} />
+                              <DatabaseIconSkeleton size={18} />
                               <div className="ml-1">Query History</div>
                             </div>
                           ),
@@ -278,7 +304,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                   {
                     name: (
                       <div className="flex">
-                        <FiSettings size={18} />
+                        <SettingsIconSkeleton size={18} />
                         <div className="ml-1">Workspace Settings</div>
                       </div>
                     ),
@@ -289,7 +315,7 @@ export async function Layout({ children }: { children: React.ReactNode }) {
                         {
                           name: (
                             <div className="flex">
-                              <FiImage size={18} />
+                              <PaintingIconSkeleton size={18} />
                               <div className="ml-1">Whitelabeling</div>
                             </div>
                           ),
@@ -302,8 +328,20 @@ export async function Layout({ children }: { children: React.ReactNode }) {
             ]}
           />
         </div>
-        <div className="px-12 pt-8 pb-8 h-full overflow-y-auto w-full">
-          {children}
+        <div className="pb-8 relative h-full overflow-y-auto w-full">
+          <div className="fixed bg-background left-0 border-b gap-x-4 mb-8 px-4 py-2 w-full items-center flex justify-end">
+            <a
+              href="/chat"
+              className="transition-all duration-150 cursor-pointer p-1 text-sm items-center flex gap-x-1 px-2 py-1 rounded-lg hover:shadow-sm hover:ring-1 hover:ring-ingio-900/40 hover:bg-opacity-90 text-neutral-100 bg-accent"
+            >
+              <BackIcon size={20} className="text-neutral" />
+              Back to Danswer
+            </a>
+            <UserDropdown user={user} />
+          </div>
+          <div className="pt-20 flex overflow-y-auto h-full px-4 md:px-12">
+            {children}
+          </div>
         </div>
       </div>
     </div>
diff --git a/web/src/components/admin/Title.tsx b/web/src/components/admin/Title.tsx
index 9168280a8e..495870a993 100644
--- a/web/src/components/admin/Title.tsx
+++ b/web/src/components/admin/Title.tsx
@@ -18,7 +18,7 @@ export function AdminPageTitle({
         <HealthCheckBanner />
       </div>
       <div className="flex">
-        <h1 className="text-3xl text-strong font-bold flex gap-x-2">
+        <h1 className="text-3xl text-text-800 font-bold flex gap-x-2">
           {icon} {title}
         </h1>
         {farRightElement && <div className="ml-auto">{farRightElement}</div>}
diff --git a/web/src/components/admin/connectors/AdminSidebar.tsx b/web/src/components/admin/connectors/AdminSidebar.tsx
index fd82b23b1f..c9289c3c4e 100644
--- a/web/src/components/admin/connectors/AdminSidebar.tsx
+++ b/web/src/components/admin/connectors/AdminSidebar.tsx
@@ -1,6 +1,11 @@
 // Sidebar.tsx
-import React from "react";
+"use client";
+import React, { useContext } from "react";
 import Link from "next/link";
+import { Logo } from "@/components/Logo";
+import { NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED } from "@/lib/constants";
+import { HeaderTitle } from "@/components/header/Header";
+import { SettingsContext } from "@/components/settings/SettingsProvider";
 
 interface Item {
   name: string | JSX.Element;
@@ -13,17 +18,58 @@ interface Collection {
 }
 
 export function AdminSidebar({ collections }: { collections: Collection[] }) {
+  const combinedSettings = useContext(SettingsContext);
+  if (!combinedSettings) {
+    return null;
+  }
+  const settings = combinedSettings.settings;
+  const enterpriseSettings = combinedSettings.enterpriseSettings;
+
   return (
-    <aside className="pl-4">
+    <aside className="pl-0">
       <nav className="space-y-2 pl-4">
+        <div className="pb-12 flex">
+          <div className="fixed left-0 top-0 py-2 pl-4 bg-background-100 w-[200px]">
+            <Link
+              className="flex flex-col"
+              href={
+                settings && settings.default_page === "chat"
+                  ? "/chat"
+                  : "/search"
+              }
+            >
+              <div className="flex gap-x-1 my-auto">
+                <div className="my-auto">
+                  <Logo />
+                </div>
+                <div className="my-auto">
+                  {enterpriseSettings && enterpriseSettings.application_name ? (
+                    <div>
+                      <HeaderTitle>
+                        {enterpriseSettings.application_name}
+                      </HeaderTitle>
+                      {!NEXT_PUBLIC_DO_NOT_USE_TOGGLE_OFF_DANSWER_POWERED && (
+                        <p className="text-xs text-subtle -mt-1.5">
+                          Powered by Danswer
+                        </p>
+                      )}
+                    </div>
+                  ) : (
+                    <HeaderTitle>Danswer</HeaderTitle>
+                  )}
+                </div>
+              </div>
+            </Link>
+          </div>
+        </div>
         {collections.map((collection, collectionInd) => (
           <div key={collectionInd}>
-            <h2 className="text-xs text-strong font-bold pb-2 ">
+            <h2 className="text-xs text-strong font-bold pb-2">
               <div>{collection.name}</div>
             </h2>
             {collection.items.map((item) => (
               <Link key={item.link} href={item.link}>
-                <button className="text-sm block w-48 py-2 px-2 text-left hover:bg-hover rounded">
+                <button className="text-sm block w-48 py-2.5 px-2 text-left hover:bg-hover rounded">
                   <div className="">{item.name}</div>
                 </button>
               </Link>
diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
index aa4b0527c0..26292a9093 100644
--- a/web/src/components/admin/connectors/Field.tsx
+++ b/web/src/components/admin/connectors/Field.tsx
@@ -86,7 +86,7 @@ export function ToolTipDetails({
           <FiInfo size={12} />
         </TooltipTrigger>
         <TooltipContent side="top" align="center">
-          <p className="bg-background-dark max-w-[200px] mb-1 text-sm rounded-lg p-1.5 text-inverted">
+          <p className="bg-background-900 max-w-[200px] mb-1 text-sm rounded-lg p-1.5 text-inverted">
             {children}
           </p>
         </TooltipContent>
@@ -285,7 +285,9 @@ export const BooleanFormField = ({
         <Field
           name={name}
           type="checkbox"
-          className={`${noPadding ? "mr-3" : "mx-3"} px-5 w-3.5 h-3.5 ${alignTop ? "mt-1" : "my-auto"}`}
+          className={`${noPadding ? "mr-3" : "mx-3"} px-5 w-3.5 h-3.5 ${
+            alignTop ? "mt-1" : "my-auto"
+          }`}
           {...(onChange ? { onChange } : {})}
         />
         <div>
diff --git a/web/src/components/assistants/AssistantIcon.tsx b/web/src/components/assistants/AssistantIcon.tsx
index e38a981174..51dc5474ef 100644
--- a/web/src/components/assistants/AssistantIcon.tsx
+++ b/web/src/components/assistants/AssistantIcon.tsx
@@ -1,5 +1,6 @@
 import { Persona } from "@/app/admin/assistants/interfaces";
 import React from "react";
+import { Tooltip } from "../tooltip/Tooltip";
 
 export function generatePastelColorFromId(id: string): string {
   const hash = Array.from(id).reduce(
@@ -12,6 +13,23 @@ export function generatePastelColorFromId(id: string): string {
   return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
 }
 
+export function darkerGenerateColorFromId(id: string): string {
+  if (id == "0") {
+    return "#262626";
+  }
+  const hash = Array.from(id).reduce(
+    (acc, char) => acc + char.charCodeAt(0),
+    0
+  );
+  const hue = (hash * 137.508) % 360; // Use golden angle approximation
+  // const saturation = 40 + (hash % 10); // Saturation between 40-50%
+  // const lightness = 40 + (hash % 10); // Lightness between 40-50%
+  const saturation = 35 + (hash % 10); // Saturation between 40-50%
+  const lightness = 35 + (hash % 10); // Lightness between 40-50%
+
+  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
+}
+
 export function AssistantIcon({
   assistant,
   size,
@@ -21,17 +39,19 @@ export function AssistantIcon({
   size?: "small" | "medium" | "large";
   border?: boolean;
 }) {
-  const color = generatePastelColorFromId(assistant.id.toString());
+  const color = darkerGenerateColorFromId(assistant.id.toString());
 
   return (
-    <div
-      className={`
+    <Tooltip delayDuration={1000} content={assistant.description}>
+      <div
+        className={`flex-none
       ${border && " border border-.5 border-border-strong "}
       ${(!size || size == "large") && "w-6 h-6"}
       ${size == "small" && "w-6 h-6"}
       rounded-lg
       `}
-      style={{ backgroundColor: color }}
-    />
+        style={{ backgroundColor: color }}
+      />
+    </Tooltip>
   );
 }
diff --git a/web/src/components/chat_search/Header.tsx b/web/src/components/chat_search/Header.tsx
new file mode 100644
index 0000000000..353a28ef65
--- /dev/null
+++ b/web/src/components/chat_search/Header.tsx
@@ -0,0 +1,112 @@
+import { User } from "@/lib/types";
+import { TbLayoutSidebarLeftExpand } from "react-icons/tb";
+import { UserDropdown } from "../UserDropdown";
+import { FiShare2, FiSidebar } from "react-icons/fi";
+import { SetStateAction, useContext, useEffect } from "react";
+import { Logo } from "../Logo";
+import { ChatIcon, NewChatIcon, PlusCircleIcon } from "../icons/icons";
+import { NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA } from "@/lib/constants";
+import { ChatSession } from "@/app/chat/interfaces";
+import { HeaderTitle } from "../header/Header";
+import { Tooltip } from "../tooltip/Tooltip";
+import KeyboardSymbol from "@/lib/browserUtilities";
+import Link from "next/link";
+import { SettingsContext } from "../settings/SettingsProvider";
+
+export default function FunctionalHeader({
+  showSidebar,
+  user,
+  page,
+  currentChatSession,
+  setSharingModalVisible,
+}: {
+  page: "search" | "chat" | "assistants";
+  showSidebar: boolean;
+  user: User | null;
+  currentChatSession?: ChatSession | null | undefined;
+  setSharingModalVisible?: (value: SetStateAction<boolean>) => void;
+}) {
+  const combinedSettings = useContext(SettingsContext);
+  const settings = combinedSettings?.settings;
+  const enterpriseSettings = combinedSettings?.enterpriseSettings;
+
+  const commandSymbol = KeyboardSymbol();
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        switch (event.key.toLowerCase()) {
+          case "u":
+            event.preventDefault();
+            window.open(
+              `/${page}` +
+                (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA &&
+                currentChatSession
+                  ? `?assistantId=${currentChatSession.persona_id}`
+                  : ""),
+              "_self"
+            );
+            break;
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+  return (
+    <div className="pb-6 left-0 sticky top-0 z-10 w-full relative flex">
+      <div className="mt-2 mx-4 text-text-700 flex w-full">
+        <div className="absolute z-[100] my-auto flex items-center text-xl font-bold">
+          <FiSidebar size={20} />
+          <div className="ml-2 text-text-700 text-xl">
+            {enterpriseSettings && enterpriseSettings.application_name ? (
+              <HeaderTitle>{enterpriseSettings.application_name}</HeaderTitle>
+            ) : (
+              <HeaderTitle>Danswer</HeaderTitle>
+            )}
+          </div>
+
+          {page == "chat" && (
+            <Tooltip delayDuration={1000} content={`${commandSymbol}U`}>
+              <Link
+                href={
+                  `/${page}` +
+                  (NEXT_PUBLIC_NEW_CHAT_DIRECTS_TO_SAME_PERSONA &&
+                  currentChatSession
+                    ? `?assistantId=${currentChatSession.persona_id}`
+                    : "")
+                }
+              >
+                <NewChatIcon
+                  size={20}
+                  className="ml-2 my-auto cursor-pointer text-text-700 hover:text-text-600 transition-colors duration-300"
+                />
+              </Link>
+            </Tooltip>
+          )}
+        </div>
+
+        <div className="ml-auto my-auto flex gap-x-2">
+          {setSharingModalVisible && (
+            <div
+              onClick={() => setSharingModalVisible(true)}
+              className="my-auto rounded cursor-pointer hover:bg-hover-light"
+            >
+              <FiShare2 size="18" />
+            </div>
+          )}
+
+          <div className="flex my-auto">
+            <UserDropdown user={user} />
+          </div>
+        </div>
+      </div>
+
+      {page != "assistants" && (
+        <div className="h-24 left-0 absolute top-0 z-10 w-full bg-gradient-to-b via-50% z-[-1] from-background via-background to-background/10 flex" />
+      )}
+    </div>
+  );
+}
diff --git a/web/src/components/chat_search/hooks.ts b/web/src/components/chat_search/hooks.ts
new file mode 100644
index 0000000000..40e067eb86
--- /dev/null
+++ b/web/src/components/chat_search/hooks.ts
@@ -0,0 +1,57 @@
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+
+interface UseSidebarVisibilityProps {
+  toggledSidebar: boolean;
+  sidebarElementRef: React.RefObject<HTMLElement>;
+  showDocSidebar: boolean;
+  setShowDocSidebar: Dispatch<SetStateAction<boolean>>;
+}
+
+export const useSidebarVisibility = ({
+  toggledSidebar,
+  sidebarElementRef,
+  setShowDocSidebar,
+  showDocSidebar,
+}: UseSidebarVisibilityProps) => {
+  const xPosition = useRef(0);
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      const currentXPosition = event.clientX;
+      xPosition.current = currentXPosition;
+
+      const sidebarRect = sidebarElementRef.current?.getBoundingClientRect();
+
+      if (sidebarRect && sidebarElementRef.current) {
+        const isWithinSidebar =
+          currentXPosition >= sidebarRect.left &&
+          currentXPosition <= sidebarRect.right &&
+          event.clientY >= sidebarRect.top &&
+          event.clientY <= sidebarRect.bottom;
+        const sidebarStyle = window.getComputedStyle(sidebarElementRef.current);
+        const isVisible = sidebarStyle.opacity !== "0";
+        if (isWithinSidebar && isVisible) {
+          setShowDocSidebar(true);
+        }
+        if (
+          currentXPosition > 100 &&
+          showDocSidebar &&
+          !isWithinSidebar &&
+          !toggledSidebar
+        ) {
+          setShowDocSidebar(false);
+        } else if (currentXPosition < 100 && !showDocSidebar) {
+          setShowDocSidebar(true);
+        }
+      }
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, [showDocSidebar, toggledSidebar, sidebarElementRef]);
+
+  return { showDocSidebar };
+};
diff --git a/web/src/components/header/Header.tsx b/web/src/components/header/Header.tsx
index 81d89b09d9..6abc35ecc7 100644
--- a/web/src/components/header/Header.tsx
+++ b/web/src/components/header/Header.tsx
@@ -16,9 +16,10 @@ export function HeaderTitle({ children }: { children: JSX.Element | string }) {
 
 interface HeaderProps {
   user: User | null;
+  page?: "search" | "chat" | "assistants";
 }
 
-export function Header({ user }: HeaderProps) {
+export function Header({ user, page }: HeaderProps) {
   const combinedSettings = useContext(SettingsContext);
   if (!combinedSettings) {
     return null;
@@ -58,35 +59,9 @@ export function Header({ user }: HeaderProps) {
           </div>
         </Link>
 
-        {(!settings ||
-          (settings.search_page_enabled && settings.chat_page_enabled)) && (
-          <>
-            <Link
-              href="/search"
-              className={"ml-6 h-full flex flex-col hover:bg-hover"}
-            >
-              <div className="w-24 flex my-auto">
-                <div className={"mx-auto flex text-strong px-2"}>
-                  <FiSearch className="my-auto mr-1" />
-                  <h1 className="flex text-sm font-bold my-auto">Search</h1>
-                </div>
-              </div>
-            </Link>
-
-            <Link href="/chat" className="h-full flex flex-col hover:bg-hover">
-              <div className="w-24 flex my-auto">
-                <div className="mx-auto flex text-strong px-2">
-                  <FiMessageSquare className="my-auto mr-1" />
-                  <h1 className="flex text-sm font-bold my-auto">Chat</h1>
-                </div>
-              </div>
-            </Link>
-          </>
-        )}
-
         <div className="ml-auto h-full flex flex-col">
           <div className="my-auto">
-            <UserDropdown user={user} hideChatAndSearch />
+            <UserDropdown user={user} page={page} />
           </div>
         </div>
       </div>
diff --git a/web/src/components/health/healthcheck.tsx b/web/src/components/health/healthcheck.tsx
index b8134d9896..1c1de9db64 100644
--- a/web/src/components/health/healthcheck.tsx
+++ b/web/src/components/health/healthcheck.tsx
@@ -21,13 +21,13 @@ export const HealthCheckBanner = () => {
         title="You have been logged out!"
       >
         <div className="flex flex-col gap-y-4">
-          <p className="text-lg ">
+          <p className="text-lg">
             You can click &quot;Log in&quot; to log back in! Apologies for the
             inconvenience.
           </p>
           <a
             href="/auth/login"
-            className="w-full mt-4 mx-auto rounded-md text-light py-2 bg-background-dark text-center hover:bg-emphasis animtate duration-300 transition-bg  "
+            className="w-full mt-4 mx-auto rounded-md text-text-200 py-2 bg-background-900 text-center hover:bg-emphasis animtate duration-300 transition-bg"
           >
             Log in
           </a>
@@ -36,7 +36,7 @@ export const HealthCheckBanner = () => {
     );
   } else {
     return (
-      <div className="text-xs mx-auto bg-gradient-to-r from-red-900 to-red-700 p-2 rounded-sm border-hidden text-light">
+      <div className="fixed top-0 left-0 z-[101] w-full text-xs mx-auto bg-gradient-to-r from-red-900 to-red-700 p-2 rounded-sm border-hidden text-text-200">
         <p className="font-bold pb-1">The backend is currently unavailable.</p>
 
         <p className="px-1">
diff --git a/web/src/components/icons/icons.tsx b/web/src/components/icons/icons.tsx
index 9e7cd9de0b..5d4afa1ba6 100644
--- a/web/src/components/icons/icons.tsx
+++ b/web/src/components/icons/icons.tsx
@@ -40,6 +40,7 @@ import {
   FiUsers,
   FiBarChart2,
   FiDatabase,
+  FiSlack,
 } from "react-icons/fi";
 import { SiBookstack } from "react-icons/si";
 import Image from "next/image";
@@ -65,6 +66,8 @@ import document360Icon from "../../../public/Document360.png";
 import googleSitesIcon from "../../../public/GoogleSites.png";
 import zendeskIcon from "../../../public/Zendesk.svg";
 import dropboxIcon from "../../../public/Dropbox.png";
+import slackIcon from "../../../public/Slack.png";
+
 import s3Icon from "../../../public/S3.png";
 import r2Icon from "../../../public/r2.webp";
 import salesforceIcon from "../../../public/Salesforce.png";
@@ -79,16 +82,188 @@ import cohereIcon from "../../../public/Cohere.svg";
 import voyageIcon from "../../../public/Voyage.png";
 import googleIcon from "../../../public/Google.webp";
 
-import { FaRobot } from "react-icons/fa";
+import { FaRobot, FaSlack } from "react-icons/fa";
+import { IconType } from "react-icons";
 
 export interface IconProps {
   size?: number;
   className?: string;
 }
 
+export const AssistantsIconSkeleton = ({
+  size,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      >
+        <path d="M8.88 21.25h9.87a2.5 2.5 0 0 0 2.5-2.5v-3.63a2.5 2.5 0 0 0-2.5-2.48h-1.27m-6.1 6.09l6.1-6.11l1.87-1.87a2.49 2.49 0 0 0 0-3.53l-2.57-2.57a2.49 2.49 0 0 0-3.53 0l-1.87 1.87" />
+        <path d="M8.88 2.75H5.25a2.5 2.5 0 0 0-2.5 2.5v13.5a2.5 2.5 0 0 0 2.5 2.5h3.63a2.5 2.5 0 0 0 2.5-2.5V5.25a2.5 2.5 0 0 0-2.5-2.5" />
+        <path d="M7.065 18.594a1.594 1.594 0 1 0 0-3.188a1.594 1.594 0 0 0 0 3.188" />
+      </g>
+    </svg>
+  );
+};
+
+export const LightBulbIcon = ({
+  size,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
+      />
+    </svg>
+  );
+};
+
+export const AssistantsIcon = ({
+  size,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M20.893 12.84a3.23 3.23 0 0 0-1.796-.91l.639-.64c.3-.304.537-.664.698-1.06a3.207 3.207 0 0 0 0-2.48a3.16 3.16 0 0 0-.698-1.06l-2.564-2.56a2.993 2.993 0 0 0-.997-.71a3.244 3.244 0 0 0-2.484 0a3.113 3.113 0 0 0-.998.7l-.638.64a3.242 3.242 0 0 0-1.086-1.973A3.227 3.227 0 0 0 8.863 2H5.242a3.248 3.248 0 0 0-2.29.955A3.264 3.264 0 0 0 2 5.25v13.5c0 .862.342 1.689.95 2.298c.608.61 1.432.952 2.292.952h13.466a3.254 3.254 0 0 0 2.295-1A3.239 3.239 0 0 0 22 18.7v-3.58a3.246 3.246 0 0 0-1.107-2.28M6.928 19.35a2.34 2.34 0 0 1-2.166-1.45a2.356 2.356 0 0 1 .508-2.562A2.341 2.341 0 0 1 9.272 17a2.344 2.344 0 0 1-2.344 2.35m5.057-12.52l1.646-1.65c.162-.163.356-.293.569-.38c.426-.17.9-.17 1.326 0c.21.093.402.221.569.38l2.563 2.57a2 2 0 0 1 .38.57a1.788 1.788 0 0 1 0 1.34c-.09.21-.219.4-.38.56l-6.673 6.7z"
+      />
+      <path
+        fill="currentColor"
+        d="M7.795 17a.852.852 0 0 1-1.007.845a.847.847 0 0 1-.671-.665a.852.852 0 0 1 .83-1.02a.847.847 0 0 1 .848.84"
+      />
+    </svg>
+  );
+};
+
+// export const AssistantsIcon = ({
+//   size,
+//   className = defaultTailwindCSS,
+// }: IconProps) => {
+//   return (
+//     <svg
+//       style={{ width: `${size}px`, height: `${size}px` }}
+//       className={`w-[${size}px] h-[${size}px] ` + className}
+//       xmlns="http://www.w3.org/2000/svg"
+//       width="200"
+//       height="200"
+//       viewBox="0 0 24 24"
+//     >
+//       <g fill="none" stroke="currentColor" strokeWidth="1.5">
+//         <path
+//           strokeLinecap="round"
+//           d="M21.483 19c-.04.936-.165 1.51-.569 1.914c-.586.586-1.528.586-3.414.586c-1.886 0-2.828 0-3.414-.586c-.586-.586-.586-1.528-.586-3.414v-2c0-1.886 0-2.828.586-3.414c.586-.586 1.528-.586 3.414-.586c1.886 0 2.828 0 3.414.586c.532.531.581 1.357.585 2.914"
+//         />
+//         <path d="M2 8.5c0 1.886 0 2.828.586 3.414c.586.586 1.528.586 3.414.586c1.886 0 2.828 0 3.414-.586C10 11.328 10 10.386 10 8.5v-2c0-1.886 0-2.828-.586-3.414C8.828 2.5 7.886 2.5 6 2.5c-1.886 0-2.828 0-3.414.586C2 3.672 2 4.614 2 6.5v2Z" />
+//         <path
+//           strokeLinecap="round"
+//           d="M15.5 2.513c-.327.017-.562.055-.765.14a2 2 0 0 0-1.083 1.082c-.152.367-.152.833-.152 1.765c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083c.152-.367.152-.833.152-1.765c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083c-.204-.084-.438-.122-.765-.139"
+//         />
+//         <path d="M2 18.5c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C10 19.898 10 19.432 10 18.5c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083C8.398 15.5 7.932 15.5 7 15.5H5c-.932 0-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083C2 17.102 2 17.568 2 18.5Z" />
+//       </g>
+//     </svg>
+
+//   );
+// };
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="200"
+  height="200"
+  viewBox="0 0 24 24"
+>
+  <g fill="none" stroke="currentColor" strokeWidth="1.5">
+    <path
+      strokeLinecap="round"
+      d="M21.483 19c-.04.936-.165 1.51-.569 1.914c-.586.586-1.528.586-3.414.586c-1.886 0-2.828 0-3.414-.586c-.586-.586-.586-1.528-.586-3.414v-2c0-1.886 0-2.828.586-3.414c.586-.586 1.528-.586 3.414-.586c1.886 0 2.828 0 3.414.586c.532.531.581 1.357.585 2.914"
+    />
+    <path d="M2 8.5c0 1.886 0 2.828.586 3.414c.586.586 1.528.586 3.414.586c1.886 0 2.828 0 3.414-.586C10 11.328 10 10.386 10 8.5v-2c0-1.886 0-2.828-.586-3.414C8.828 2.5 7.886 2.5 6 2.5c-1.886 0-2.828 0-3.414.586C2 3.672 2 4.614 2 6.5v2Z" />
+    <path
+      strokeLinecap="round"
+      d="M15.5 2.513c-.327.017-.562.055-.765.14a2 2 0 0 0-1.083 1.082c-.152.367-.152.833-.152 1.765c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083c.152-.367.152-.833.152-1.765c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083c-.204-.084-.438-.122-.765-.139"
+    />
+    <path d="M2 18.5c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C10 19.898 10 19.432 10 18.5c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083C8.398 15.5 7.932 15.5 7 15.5H5c-.932 0-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083C2 17.102 2 17.568 2 18.5Z" />
+  </g>
+</svg>;
+
+export const ConfigureIcon = ({
+  size,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <path
+          strokeLinecap="round"
+          d="M21.483 19c-.04.936-.165 1.51-.569 1.914c-.586.586-1.528.586-3.414.586c-1.886 0-2.828 0-3.414-.586c-.586-.586-.586-1.528-.586-3.414v-2c0-1.886 0-2.828.586-3.414c.586-.586 1.528-.586 3.414-.586c1.886 0 2.828 0 3.414.586c.532.531.581 1.357.585 2.914"
+        />
+        <path d="M2 8.5c0 1.886 0 2.828.586 3.414c.586.586 1.528.586 3.414.586c1.886 0 2.828 0 3.414-.586C10 11.328 10 10.386 10 8.5v-2c0-1.886 0-2.828-.586-3.414C8.828 2.5 7.886 2.5 6 2.5c-1.886 0-2.828 0-3.414.586C2 3.672 2 4.614 2 6.5v2Z" />
+        <path
+          strokeLinecap="round"
+          d="M15.5 2.513c-.327.017-.562.055-.765.14a2 2 0 0 0-1.083 1.082c-.152.367-.152.833-.152 1.765c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083c.152-.367.152-.833.152-1.765c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083c-.204-.084-.438-.122-.765-.139"
+        />
+        <path d="M2 18.5c0 .932 0 1.398.152 1.765a2 2 0 0 0 1.083 1.083c.367.152.833.152 1.765.152h2c.932 0 1.398 0 1.765-.152a2 2 0 0 0 1.083-1.083C10 19.898 10 19.432 10 18.5c0-.932 0-1.398-.152-1.765a2 2 0 0 0-1.083-1.083C8.398 15.5 7.932 15.5 7 15.5H5c-.932 0-1.398 0-1.765.152a2 2 0 0 0-1.083 1.083C2 17.102 2 17.568 2 18.5Z" />
+      </g>
+    </svg>
+  );
+};
+
 export const defaultTailwindCSS = "my-auto flex flex-shrink-0 text-default";
 export const defaultTailwindCSSBlue = "my-auto flex flex-shrink-0 text-link";
 
+export const ColorSlackIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <div
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+    >
+      <Image src={slackIcon} alt="Logo" width="96" height="96" />
+    </div>
+  );
+};
+
 export const OpenSourceIcon = ({
   size = 16,
   className = defaultTailwindCSS,
@@ -102,7 +277,6 @@ export const OpenSourceIcon = ({
     </div>
   );
 };
-
 export const AnthropicIcon = ({
   size = 16,
   className = defaultTailwindCSS,
@@ -117,6 +291,79 @@ export const AnthropicIcon = ({
   );
 };
 
+export const LefToLineIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M3 19V5m10 1l-6 6l6 6m-6-6h14"
+      />
+    </svg>
+  );
+};
+
+export const RightToLineIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M17 12H3m8 6l6-6l-6-6m10-1v14"
+      />
+    </svg>
+  );
+};
+
+export const PlusCircleIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75s9.75-4.365 9.75-9.75S17.385 2.25 12 2.25ZM12.75 9a.75.75 0 0 0-1.5 0v2.25H9a.75.75 0 0 0 0 1.5h2.25V15a.75.75 0 0 0 1.5 0v-2.25H15a.75.75 0 0 0 0-1.5h-2.25V9Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+
 export const PlugIcon = ({
   size = 16,
   className = defaultTailwindCSS,
@@ -124,34 +371,26 @@ export const PlugIcon = ({
   return <Plug size={size} className={className} />;
 };
 
-export const NotebookIcon = ({
+export const ExtendIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
-  return <Notebook size={size} className={className} />;
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M16.75 11.989a1.82 1.82 0 0 1-.57 1.36l-6.82 6.1a1.27 1.27 0 0 1-.65.31h-.19a1.3 1.3 0 0 1-.52-.1a1.23 1.23 0 0 1-.54-.47a1.19 1.19 0 0 1-.21-.68v-13a1.2 1.2 0 0 1 .21-.69a1.23 1.23 0 0 1 1.25-.56c.24.039.464.143.65.3l6.76 6.09c.19.162.344.363.45.59c.114.234.175.49.18.75"
+      />
+    </svg>
+  );
 };
-
-export const KeyIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <Key size={size} className={className} />;
-};
-
-export const UsersIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <FiUser size={size} className={className} />;
-};
-
-export const GroupsIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <FiUsers size={size} className={className} />;
-};
-
 export const GearIcon = ({
   size = 16,
   className = defaultTailwindCSS,
@@ -236,20 +475,6 @@ export const EditIcon = ({
   return <FiEdit2 size={size} className={className} />;
 };
 
-export const XIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <X size={size} className={className} />;
-};
-
-export const ThumbsUpIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <FiThumbsUp size={size} className={className} />;
-};
-
 export const ThumbsDownIcon = ({
   size = 16,
   className = defaultTailwindCSS,
@@ -299,11 +524,146 @@ export const ChevronLeftIcon = ({
   return <FiChevronLeft size={size} className={className} />;
 };
 
+export const XIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M18 6L6 18M6 6l12 12"
+      />
+    </svg>
+  );
+};
+
+export const UndoIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px]` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M3.464 3.464C2 4.93 2 7.286 2 12c0 4.714 0 7.071 1.464 8.535C4.93 22 7.286 22 12 22c4.714 0 7.071 0 8.535-1.465C22 19.072 22 16.715 22 12c0-4.714 0-7.071-1.465-8.536C19.072 2 16.714 2 12 2S4.929 2 3.464 3.464Zm5.795 4.51A.75.75 0 1 0 8.24 6.872L5.99 8.949a.75.75 0 0 0 0 1.102l2.25 2.077a.75.75 0 1 0 1.018-1.102l-.84-.776h5.62c.699 0 1.168 0 1.526.036c.347.034.507.095.614.164c.148.096.275.223.37.371c.07.106.13.267.165.614c.035.358.036.827.036 1.526c0 .7 0 1.169-.036 1.527c-.035.346-.095.507-.164.614a1.25 1.25 0 0 1-.371.37c-.107.07-.267.13-.614.165c-.358.035-.827.036-1.526.036H9.5a.75.75 0 1 0 0 1.5h4.576c.652 0 1.196 0 1.637-.044c.462-.046.89-.145 1.28-.397c.327-.211.605-.49.816-.816c.252-.39.351-.818.397-1.28c.044-.441.044-.985.044-1.637v-.075c0-.652 0-1.196-.044-1.637c-.046-.462-.145-.891-.397-1.28a2.748 2.748 0 0 0-.816-.817c-.39-.251-.818-.35-1.28-.396c-.44-.044-.985-.044-1.637-.044H8.418l.84-.776Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const BackIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px]` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      >
+        <path d="M9.32 3.5L4.11 8.71a1.214 1.214 0 0 0 0 1.724l5.21 5.209" />
+        <path d="M20.249 20.5v-7.286a3.643 3.643 0 0 0-3.643-3.643H3.759" />
+      </g>
+    </svg>
+  );
+};
+
+export const BroomIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px]` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M18.221 19.643c.477-.903.942-1.937 1.24-2.98c.411-1.438.56-2.788.602-3.818l-1.552-1.552l-5.804-5.804l-1.552-1.552c-1.03.042-2.38.19-3.817.602c-1.045.298-2.078.763-2.981 1.24C2.1 6.97 1.427 9.71 2.497 11.807l.013.025l.7 1.15a23.338 23.338 0 0 0 7.808 7.809l1.15.699l.025.013c2.096 1.07 4.837.396 6.028-1.86Zm3.554-16.33a.77.77 0 0 0-1.088-1.088L19.012 3.9a4.877 4.877 0 0 0-5.718 0l1.109 1.109l4.588 4.588l1.109 1.109a4.877 4.877 0 0 0 0-5.718l1.675-1.675Z"
+      />
+    </svg>
+  );
+};
+
+export const ChevronIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M15.25 2h-6.5A6.76 6.76 0 0 0 2 8.75v6.5A6.76 6.76 0 0 0 8.75 22h6.5A6.76 6.76 0 0 0 22 15.25v-6.5A6.76 6.76 0 0 0 15.25 2m-.23 10.77a2.109 2.109 0 0 1-.46.67l-3.68 3.68a1 1 0 0 1-1.41 0a1 1 0 0 1 0-1.41l3.68-3.68v-.12L9.5 8.3a1 1 0 1 1 1.4-1.43l3.67 3.59a2.069 2.069 0 0 1 .63 1.49a2.07 2.07 0 0 1-.18.82"
+      />
+    </svg>
+  );
+};
+
 export const CheckmarkIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
-  return <FiCheck size={size} className={className} />;
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M20 6L9 17l-5-5"
+      />
+    </svg>
+  );
 };
 
 export const ClipboardIcon = ({
@@ -327,13 +687,6 @@ export const TriangleAlertIcon = ({
   return <FiAlertTriangle size={size} className={className} />;
 };
 
-export const ZoomInIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <FiZoomIn size={size} className={className} />;
-};
-
 export const CopyIcon = ({
   size = 16,
   className = defaultTailwindCSS,
@@ -341,32 +694,101 @@ export const CopyIcon = ({
   return <FiCopy size={size} className={className} />;
 };
 
-export const BookmarkIcon = ({
-  size = 16,
-  className = defaultTailwindCSS,
-}: IconProps) => {
-  return <FiBookmark size={size} className={className} />;
-};
-
 export const CPUIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return <FiCpu size={size} className={className} />;
 };
-
-export const RobotIcon = ({
+export const ChatIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
-  return <FaRobot size={size} className={className} />;
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
+    </svg>
+  );
 };
 
-export const ConnectorIcon = ({
+export const SendIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
-  return <FiUploadCloud size={size} className={className} />;
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+        d="M12 19V5m-7 7l7-7l7 7"
+      />
+    </svg>
+  );
+};
+export const SearchIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      fill="none"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      viewBox="0 0 24 24"
+      stroke="currentColor"
+    >
+      <path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+    </svg>
+  );
+};
+
+export const LightSettingsIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      >
+        <path d="M12.132 15.404a3.364 3.364 0 1 0 0-6.728a3.364 3.364 0 0 0 0 6.728" />
+        <path d="M20.983 15.094a9.43 9.43 0 0 1-1.802 3.1l-2.124-.482a7.245 7.245 0 0 1-2.801 1.56l-.574 2.079a9.462 9.462 0 0 1-1.63.149a9.117 9.117 0 0 1-2.032-.23l-.609-2.146a7.475 7.475 0 0 1-2.457-1.493l-2.1.54a9.357 9.357 0 0 1-1.837-3.33l1.55-1.722a7.186 7.186 0 0 1 .069-2.652L3.107 8.872a9.356 9.356 0 0 1 2.067-3.353l2.17.54A7.68 7.68 0 0 1 9.319 4.91l.574-2.124a8.886 8.886 0 0 1 2.17-.287c.585 0 1.17.054 1.745.16l.551 2.113c.83.269 1.608.68 2.296 1.217l2.182-.563a9.368 9.368 0 0 1 2.043 3.1l-1.48 1.607a7.405 7.405 0 0 1 .068 3.364z" />
+      </g>
+    </svg>
+  );
 };
 
 //
@@ -387,19 +809,31 @@ export const LoopioIcon = ({
   );
 };
 
-export const SlackIcon = ({
+export const NewIconTest = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
   return (
-    <div
+    <svg
       style={{ width: `${size}px`, height: `${size}px` }}
       className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
     >
-      <Image src="/Slack.png" alt="Logo" width="96" height="96" />
-    </div>
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M2.75 8.917h18.5"
+        />
+        <rect width="18.5" height="18.5" x="2.75" y="2.75" rx="6" />
+      </g>
+    </svg>
   );
 };
+
 export const GitlabIcon = ({
   size = 16,
   className = defaultTailwindCSS,
@@ -910,9 +1344,998 @@ export const BarChartIcon = ({
   return <FiBarChart2 size={size} className={className} />;
 };
 
+//  Admin Icons
+
+export const NotebookIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"
+      />
+    </svg>
+  );
+};
+
+export const NotebookIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M11.25 4.533A9.707 9.707 0 0 0 6 3a9.735 9.735 0 0 0-3.25.555a.75.75 0 0 0-.5.707v14.25a.75.75 0 0 0 1 .707A8.237 8.237 0 0 1 6 18.75c1.995 0 3.823.707 5.25 1.886V4.533Zm1.5 16.103A8.214 8.214 0 0 1 18 18.75c.966 0 1.89.166 2.75.47a.75.75 0 0 0 1-.708V4.262a.75.75 0 0 0-.5-.707A9.735 9.735 0 0 0 18 3a9.707 9.707 0 0 0-5.25 1.533v16.103Z"
+      />
+    </svg>
+  );
+};
+
+export const ConnectorIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 0 1-1.41-8.775a5.25 5.25 0 0 1 10.233-2.33a3 3 0 0 1 3.758 3.848A3.752 3.752 0 0 1 18 19.5H6.75Z"
+      />
+    </svg>
+  );
+};
+
+export const ConnectorIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M4.5 13a3.5 3.5 0 0 1-1.41-6.705a3.5 3.5 0 0 1 6.63-2.171a2.5 2.5 0 0 1 3.197 3.018A3.001 3.001 0 0 1 12 13zm.72-5.03a.75.75 0 0 0 1.06 1.06l.97-.97v2.69a.75.75 0 0 0 1.5 0V8.06l.97.97a.75.75 0 1 0 1.06-1.06L8.53 5.72a.75.75 0 0 0-1.06 0z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const DocumentSetIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M22 9.885v7.7a3.85 3.85 0 0 1-2.373 3.542a3.8 3.8 0 0 1-1.467.288H5.83A3.82 3.82 0 0 1 2 17.585V6.425a3.82 3.82 0 0 1 3.83-3.84h3.08a3.87 3.87 0 0 1 3.2 1.71l.87 1.33a1 1 0 0 0 .36.32a.94.94 0 0 0 .47.12h4.35a3.79 3.79 0 0 1 2.71 1.11A3.85 3.85 0 0 1 22 9.885"
+      />
+    </svg>
+  );
+};
+
+export const DocumentSetIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M21.25 9.883v7.698a3.083 3.083 0 0 1-3.083 3.083H5.833a3.083 3.083 0 0 1-3.083-3.083V6.419a3.083 3.083 0 0 1 3.083-3.083h3.084a3.083 3.083 0 0 1 2.57 1.377l.873 1.326a1.748 1.748 0 0 0 1.449.77h4.358a3.084 3.084 0 0 1 3.083 3.074"
+      />
+    </svg>
+  );
+};
+export const BookmarkIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25L4.5 21V5.507c0-1.108.806-2.057 1.907-2.185a48.507 48.507 0 0 1 11.186 0Z"
+      />
+    </svg>
+  );
+};
+export const BookmarkIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill="currentColor"
+        d="M3.75 2a.75.75 0 0 0-.75.75v10.5a.75.75 0 0 0 1.28.53L8 10.06l3.72 3.72a.75.75 0 0 0 1.28-.53V2.75a.75.75 0 0 0-.75-.75z"
+      />
+    </svg>
+  );
+};
+
+export const BookIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 20 20"
+    >
+      <path
+        fill="currentColor"
+        d="M10.75 16.82A7.462 7.462 0 0 1 15 15.5a7.5 7.5 0 0 1 2.046.282a.75.75 0 0 0 .954-.722v-11a.75.75 0 0 0-.546-.721A9.006 9.006 0 0 0 15 3a8.963 8.963 0 0 0-4.25 1.065V16.82ZM9.25 4.065A8.963 8.963 0 0 0 5 3a9 9 0 0 0-2.454.339A.75.75 0 0 0 2 4.06v11a.75.75 0 0 0 .954.721A7.506 7.506 0 0 1 5 15.5c1.579 0 3.042.487 4.25 1.32V4.065Z"
+      />
+    </svg>
+  );
+};
+
+export const ZoomInIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0a2.625 2.625 0 0 1 5.25 0Z"
+      />
+    </svg>
+  );
+};
+
+export const ZoomInIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 20 20"
+    >
+      <g fill="currentColor">
+        <path d="M8 10a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0Z" />
+        <path
+          fill-rule="evenodd"
+          d="M4.5 2A1.5 1.5 0 0 0 3 3.5v13A1.5 1.5 0 0 0 4.5 18h11a1.5 1.5 0 0 0 1.5-1.5V7.621a1.5 1.5 0 0 0-.44-1.06l-4.12-4.122A1.5 1.5 0 0 0 11.378 2H4.5Zm5 5a3 3 0 1 0 1.524 5.585l1.196 1.195a.75.75 0 1 0 1.06-1.06l-1.195-1.196A3 3 0 0 0 9.5 7Z"
+          clip-rule="evenodd"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const ThumbsUpIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M8.625 9.75a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0a.375.375 0 0 1 .75 0Zm0 0h-.375m-13.5 3.01c0 1.6 1.123 2.994 2.707 3.227c1.087.16 2.185.283 3.293.369V21l4.184-4.183a1.14 1.14 0 0 1 .778-.332a48.294 48.294 0 0 0 5.83-.498c1.585-.233 2.708-1.626 2.708-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
+      />
+    </svg>
+  );
+};
+
+export const LikeFeedbackIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      >
+        <path d="M5.75 9.415H4.568c-.98 0-1.775.794-1.775 1.775v8.284c0 .98.795 1.776 1.775 1.776h1.184c.98 0 1.775-.795 1.775-1.776V11.19c0-.98-.795-1.775-1.775-1.775" />
+        <path d="m21.16 12.243l-1.42 7.101a2.367 2.367 0 0 1-2.367 1.906h-7.48a2.367 2.367 0 0 1-2.367-2.367v-7.101A3.231 3.231 0 0 1 8.71 9.415l.982-5.918a.888.888 0 0 1 1.278-.65l1.1.544a3.55 3.55 0 0 1 1.87 4.047l-.496 1.965h5.396a2.367 2.367 0 0 1 2.32 2.84" />
+      </g>
+    </svg>
+  );
+};
+
+export const CopyMessageIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      >
+        <path d="M18.327 7.286h-8.044a1.932 1.932 0 0 0-1.925 1.938v10.088c0 1.07.862 1.938 1.925 1.938h8.044a1.932 1.932 0 0 0 1.925-1.938V9.224c0-1.07-.862-1.938-1.925-1.938" />
+        <path d="M15.642 7.286V4.688c0-.514-.203-1.007-.564-1.37a1.918 1.918 0 0 0-1.361-.568H5.673c-.51 0-1 .204-1.36.568a1.945 1.945 0 0 0-.565 1.37v10.088c0 .514.203 1.007.564 1.37c.361.364.85.568 1.361.568h2.685" />
+      </g>
+    </svg>
+  );
+};
+
+export const DislikeFeedbackIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      >
+        <path d="M5.75 2.75H4.568c-.98 0-1.775.795-1.775 1.776v8.284c0 .98.795 1.775 1.775 1.775h1.184c.98 0 1.775-.794 1.775-1.775V4.526c0-.98-.795-1.776-1.775-1.776" />
+        <path d="m21.16 11.757l-1.42-7.101a2.368 2.368 0 0 0-2.367-1.906h-7.48a2.367 2.367 0 0 0-2.367 2.367v7.101a3.231 3.231 0 0 0 1.184 2.367l.982 5.918a.887.887 0 0 0 1.278.65l1.1-.543a3.551 3.551 0 0 0 1.87-4.048l-.496-1.965h5.396a2.368 2.368 0 0 0 2.32-2.84" />
+      </g>
+    </svg>
+  );
+};
+
+export const ThumbsUpIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 20 20"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M10 2c-2.236 0-4.43.18-6.57.524C1.993 2.755 1 4.014 1 5.426v5.148c0 1.413.993 2.67 2.43 2.902c1.168.188 2.352.327 3.55.414c.28.02.521.18.642.413l1.713 3.293a.75.75 0 0 0 1.33 0l1.713-3.293a.783.783 0 0 1 .642-.413a41.102 41.102 0 0 0 3.55-.414c1.437-.231 2.43-1.49 2.43-2.902V5.426c0-1.413-.993-2.67-2.43-2.902A41.289 41.289 0 0 0 10 2ZM6.75 6a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Zm0 2.5a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-3.5Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+export const RobotIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return <FaRobot size={size} className={className} />;
+};
+
+slackIcon;
+export const SlackIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 14 14"
+    >
+      <g fill="none" stroke="currentColor">
+        <path d="M5.5 2a.5.5 0 1 0 1 0a.5.5 0 1 0-1 0m6 4a.5.5 0 1 0 1 0a.5.5 0 1 0-1 0m-4 6a.5.5 0 1 0 1 0a.5.5 0 1 0-1 0m-6-4a.5.5 0 1 0 1 0a.5.5 0 1 0-1 0" />
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          d="M8.793 1.219v4.937m-3.59 1.692v4.937M1.215 5.207h4.937m1.692 3.59h4.937"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const SlackIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="M16.923 16.52h-2.39a1.984 1.984 0 0 1-1.973-1.195a2.006 2.006 0 0 1 .47-2.263a1.99 1.99 0 0 1 1.502-.53h4.858a1.978 1.978 0 0 1 1.969 1.63a1.951 1.951 0 0 1-1.147 2.173a2.21 2.21 0 0 1-.876.174c-.8.022-1.601.01-2.413.01m-9.435.501v-2.477a2.003 2.003 0 0 1 .56-1.402a1.987 1.987 0 0 1 1.377-.608a1.942 1.942 0 0 1 1.393.522c.377.352.6.84.62 1.357c.043 1.738.043 3.477 0 5.215A1.94 1.94 0 0 1 10.805 21a1.922 1.922 0 0 1-1.423.495a1.954 1.954 0 0 1-1.359-.614a1.97 1.97 0 0 1-.535-1.395c-.01-.815 0-1.64 0-2.466m8.938-9.963v2.434a1.996 1.996 0 0 1-.524 1.5a1.98 1.98 0 0 1-2.242.469a1.981 1.981 0 0 1-1.078-1.165a1.996 1.996 0 0 1-.106-.804V4.46a1.963 1.963 0 0 1 .605-1.386a1.947 1.947 0 0 1 1.408-.537a1.962 1.962 0 0 1 1.383.602a1.979 1.979 0 0 1 .553 1.408c.011.836 0 1.673 0 2.51M6.97 11.511H4.545a1.962 1.962 0 0 1-1.393-.579a1.978 1.978 0 0 1-.427-2.155a1.978 1.978 0 0 1 1.066-1.07a1.97 1.97 0 0 1 .754-.15h4.923a1.962 1.962 0 0 1 1.392.579a1.98 1.98 0 0 1-1.392 3.375zm4.478-6.171v.902c0 .18-.06.261-.216.261H9.165A1.916 1.916 0 0 1 7.9 5.787a1.929 1.929 0 0 1-.4-1.402c.022-.492.227-.958.574-1.306a1.965 1.965 0 0 1 3.342 1.12c.032.38.032.487.032.832v.214zm-5.009 7.204c.06.813.06 1.63 0 2.444a1.902 1.902 0 0 1-.754 1.18a1.887 1.887 0 0 1-1.356.34a1.988 1.988 0 0 1-1.293-.627a2.003 2.003 0 0 1-.536-1.338a1.96 1.96 0 0 1 .497-1.346c.33-.369.786-.599 1.278-.643c.736-.065 1.471-.01 2.164-.01M17.443 11.5V9.329c.052-.509.299-.977.689-1.305c.39-.329.891-.492 1.399-.455c.522 0 1.023.208 1.392.579a1.981 1.981 0 0 1 0 2.796c-.37.371-.87.58-1.392.58c-.671 0-1.363-.022-2.088-.022m-4.967 6.072c.8-.055 1.603-.055 2.402 0c.488.09.92.367 1.208.773c.286.406.405.908.329 1.4a1.99 1.99 0 0 1-.67 1.264a1.98 1.98 0 0 1-1.343.485a1.922 1.922 0 0 1-1.314-.528a1.937 1.937 0 0 1-.6-1.287c-.044-.695-.012-1.401-.012-2.107"
+      />
+    </svg>
+  );
+};
+
+export const ToolIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      >
+        <path d="M21.75 6.75a4.5 4.5 0 0 1-4.884 4.484c-1.076-.091-2.264.071-2.95.904l-7.152 8.684a2.548 2.548 0 1 1-3.586-3.586l8.684-7.152c.833-.686.995-1.874.904-2.95a4.5 4.5 0 0 1 6.336-4.486l-3.276 3.276a3.004 3.004 0 0 0 2.25 2.25l3.276-3.276c.256.565.398 1.192.398 1.852Z" />
+        <path d="M4.867 19.125h.008v.008h-.008v-.008Z" />
+      </g>
+    </svg>
+  );
+};
+export const ToolIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025a.75.75 0 0 1 .313 1.248l-3.32 3.319a2.248 2.248 0 0 0 1.941 1.939l3.318-3.319a.75.75 0 0 1 1.248.313a5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const CpuIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M8.25 3v1.5M4.5 8.25H3m18 0h-1.5M4.5 12H3m18 0h-1.5m-15 3.75H3m18 0h-1.5M8.25 19.5V21M12 3v1.5m0 15V21m3.75-18v1.5m0 15V21m-9-1.5h10.5a2.25 2.25 0 0 0 2.25-2.25V6.75a2.25 2.25 0 0 0-2.25-2.25H6.75A2.25 2.25 0 0 0 4.5 6.75v10.5a2.25 2.25 0 0 0 2.25 2.25Zm.75-12h9v9h-9v-9Z"
+      />
+    </svg>
+  );
+};
+export const CpuIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g fill="currentColor">
+        <path d="M16.5 7.5h-9v9h9v-9Z" />
+        <path
+          fill-rule="evenodd"
+          d="M8.25 2.25A.75.75 0 0 1 9 3v.75h2.25V3a.75.75 0 0 1 1.5 0v.75H15V3a.75.75 0 0 1 1.5 0v.75h.75a3 3 0 0 1 3 3v.75H21A.75.75 0 0 1 21 9h-.75v2.25H21a.75.75 0 0 1 0 1.5h-.75V15H21a.75.75 0 0 1 0 1.5h-.75v.75a3 3 0 0 1-3 3h-.75V21a.75.75 0 0 1-1.5 0v-.75h-2.25V21a.75.75 0 0 1-1.5 0v-.75H9V21a.75.75 0 0 1-1.5 0v-.75h-.75a3 3 0 0 1-3-3v-.75H3A.75.75 0 0 1 3 15h.75v-2.25H3a.75.75 0 0 1 0-1.5h.75V9H3a.75.75 0 0 1 0-1.5h.75v-.75a3 3 0 0 1 3-3h.75V3a.75.75 0 0 1 .75-.75ZM6 6.75A.75.75 0 0 1 6.75 6h10.5a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75H6.75a.75.75 0 0 1-.75-.75V6.75Z"
+          clip-rule="evenodd"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const EmbeddingIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M9 17.25v1.007a3 3 0 0 1-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0 1 15 18.257V17.25m6-12V15a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 15V5.25m18 0A2.25 2.25 0 0 0 18.75 3H5.25A2.25 2.25 0 0 0 3 5.25m18 0V12a2.25 2.25 0 0 1-2.25 2.25H5.25A2.25 2.25 0 0 1 3 12V5.25"
+      />
+    </svg>
+  );
+};
+
+export const EmbeddingIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M2.25 5.25a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3V15a3 3 0 0 1-3 3h-3v.257c0 .597.237 1.17.659 1.591l.621.622a.75.75 0 0 1-.53 1.28h-9a.75.75 0 0 1-.53-1.28l.621-.622a2.25 2.25 0 0 0 .659-1.59V18h-3a3 3 0 0 1-3-3V5.25Zm1.5 0v7.5a1.5 1.5 0 0 0 1.5 1.5h13.5a1.5 1.5 0 0 0 1.5-1.5v-7.5a1.5 1.5 0 0 0-1.5-1.5H5.25a1.5 1.5 0 0 0-1.5 1.5Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const PackageIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="m20.25 7.5l-.625 10.632a2.25 2.25 0 0 1-2.247 2.118H6.622a2.25 2.25 0 0 1-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125Z"
+      />
+    </svg>
+  );
+};
+export const PackageIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 20 20"
+    >
+      <g fill="currentColor">
+        <path d="M2 3a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H2Z" />
+        <path
+          fill-rule="evenodd"
+          d="M2 7.5h16l-.811 7.71a2 2 0 0 1-1.99 1.79H4.802a2 2 0 0 1-1.99-1.79L2 7.5ZM7 11a1 1 0 0 1 1-1h4a1 1 0 1 1 0 2H8a1 1 0 0 1-1-1Z"
+          clip-rule="evenodd"
+        />
+      </g>
+    </svg>
+  );
+};
+export const UsersIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="12" cy="6" r="4" />
+        <path
+          strokeLinecap="round"
+          d="M19.997 18c.003-.164.003-.331.003-.5c0-2.485-3.582-4.5-8-4.5s-8 2.015-8 4.5S4 22 12 22c2.231 0 3.84-.157 5-.437"
+        />
+      </g>
+    </svg>
+  );
+};
+export const UsersIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill="currentColor"
+        d="M8 8a3 3 0 1 0 0-6a3 3 0 0 0 0 6m4.735 6c.618 0 1.093-.561.872-1.139a6.002 6.002 0 0 0-11.215 0c-.22.578.254 1.139.872 1.139z"
+      />
+    </svg>
+  );
+  // return <FiUser size={size} className={className} />;
+};
+
+export const GroupsIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <circle cx="9" cy="6" r="4" />
+        <path strokeLinecap="round" d="M15 9a3 3 0 1 0 0-6" />
+        <ellipse cx="9" cy="17" rx="7" ry="4" />
+        <path
+          strokeLinecap="round"
+          d="M18 14c1.754.385 3 1.359 3 2.5c0 1.03-1.014 1.923-2.5 2.37"
+        />
+      </g>
+    </svg>
+  );
+};
+export const GroupsIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill="currentColor"
+        d="M8.5 4.5a2.5 2.5 0 1 1-5 0a2.5 2.5 0 0 1 5 0m2.4 7.506c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0M14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29a6.476 6.476 0 0 0-1.167-2.603a3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982M12 8a2 2 0 1 0 0-4a2 2 0 0 0 0 4"
+      />
+    </svg>
+  );
+};
+export const KeyIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M15.75 5.25a3 3 0 0 1 3 3m3 0a6 6 0 0 1-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1 1 21.75 8.25Z"
+      />
+    </svg>
+  );
+};
+export const KeyIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 20 20"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M8 7a5 5 0 1 1 3.61 4.804l-1.903 1.903A1 1 0 0 1 9 14H8v1a1 1 0 0 1-1 1H6v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1v-2a1 1 0 0 1 .293-.707L8.196 8.39A5.002 5.002 0 0 1 8 7Zm5-3a.75.75 0 0 0 0 1.5A1.5 1.5 0 0 1 14.5 7A.75.75 0 0 0 16 7a3 3 0 0 0-3-3Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+export const ShieldIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M9 12.75L11.25 15L15 9.75m-3-7.036A11.959 11.959 0 0 1 3.598 6A11.99 11.99 0 0 0 3 9.749c0 5.592 3.824 10.29 9 11.623c5.176-1.332 9-6.03 9-11.622c0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285Z"
+      />
+    </svg>
+  );
+};
+export const ShieldIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 16 16"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M8.5 1.709a.75.75 0 0 0-1 0a8.963 8.963 0 0 1-4.84 2.217a.75.75 0 0 0-.654.72a10.499 10.499 0 0 0 5.647 9.672a.75.75 0 0 0 .694-.001a10.499 10.499 0 0 0 5.647-9.672a.75.75 0 0 0-.654-.719A8.963 8.963 0 0 1 8.5 1.71m2.34 5.504a.75.75 0 0 0-1.18-.926L7.394 9.17l-1.156-.99a.75.75 0 1 0-.976 1.138l1.75 1.5a.75.75 0 0 0 1.078-.106z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+export const DatabaseIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <path strokeLinecap="round" d="M4 18V6m16 0v12" />
+        <path d="M12 10c4.418 0 8-1.79 8-4s-3.582-4-8-4s-8 1.79-8 4s3.582 4 8 4Zm8 2c0 2.21-3.582 4-8 4s-8-1.79-8-4m16 6c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+      </g>
+    </svg>
+  );
+};
 export const DatabaseIcon = ({
   size = 16,
   className = defaultTailwindCSS,
 }: IconProps) => {
-  return <FiDatabase size={size} className={className} />;
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 14 14"
+    >
+      <path
+        fill="currentColor"
+        fill-rule="evenodd"
+        d="M.552 2.278c0-.155.077-.368.357-.63c.28-.262.722-.527 1.319-.762C3.418.416 5.105.112 7 .112c1.895 0 3.582.304 4.772.774c.597.235 1.038.5 1.32.762c.28.262.356.475.356.63c0 .155-.077.368-.357.63c-.28.261-.722.526-1.319.762c-1.19.47-2.877.774-4.772.774c-1.895 0-3.582-.304-4.772-.774c-.597-.236-1.038-.5-1.32-.763c-.28-.261-.356-.474-.356-.63Zm12.96 1.89a6.317 6.317 0 0 1-1.281.665c-1.37.54-3.22.86-5.231.86c-2.012 0-3.861-.32-5.231-.86a6.315 6.315 0 0 1-1.281-.666v3.178c.056.085.135.178.246.279c.29.263.745.53 1.36.766c1.224.471 2.959.776 4.906.776c1.947 0 3.682-.305 4.907-.776c.614-.237 1.069-.503 1.359-.766c.11-.101.19-.194.246-.28zM.488 11.208V8.993c.341.213.732.4 1.156.564c1.402.539 3.295.859 5.356.859c2.06 0 3.954-.32 5.356-.86a6.821 6.821 0 0 0 1.156-.563v2.216C13.512 12.749 10.597 14 7 14C3.403 14 .488 12.75.488 11.209Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+};
+export const SettingsIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <path strokeLinecap="round" d="M4 18V6m16 0v12" />
+        <path d="M12 10c4.418 0 8-1.79 8-4s-3.582-4-8-4s-8 1.79-8 4s3.582 4 8 4Zm8 2c0 2.21-3.582 4-8 4s-8-1.79-8-4m16 6c0 2.21-3.582 4-8 4s-8-1.79-8-4" />
+      </g>
+    </svg>
+  );
+};
+export const SettingsIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="currentColor"
+        d="m21.51 14.59l-1.25-1.32a7.878 7.878 0 0 0-.06-2.9l1.22-1.32a.76.76 0 0 0 .14-.79a10.257 10.257 0 0 0-2.2-3.35a.74.74 0 0 0-.72-.19l-1.84.47a8.48 8.48 0 0 0-1.83-1l-.45-1.72a.73.73 0 0 0-.59-.55a9.92 9.92 0 0 0-1.89-.17a9.36 9.36 0 0 0-2.35.31a.73.73 0 0 0-.53.53l-.48 1.77a8.23 8.23 0 0 0-1.52.88l-1.82-.45a.73.73 0 0 0-.72.21a10 10 0 0 0-2.23 3.62a.76.76 0 0 0 .16.77l1.26 1.31a8.85 8.85 0 0 0-.1 1.27c0 .3 0 .6.05.9l-1.31 1.46a.75.75 0 0 0-.16.73a10 10 0 0 0 2 3.59a.75.75 0 0 0 .76.24l1.72-.44a7.918 7.918 0 0 0 2 1.23l.5 1.79a.77.77 0 0 0 .56.53c.721.163 1.459.247 2.2.25c.59-.006 1.178-.063 1.76-.17a.75.75 0 0 0 .59-.53l.47-1.69a8.109 8.109 0 0 0 2.38-1.34l1.76.4a.74.74 0 0 0 .73-.24a10.118 10.118 0 0 0 2-3.34a.76.76 0 0 0-.21-.75m-9.39 1.27a3.81 3.81 0 1 1-.021-7.619a3.81 3.81 0 0 1 .02 7.62"
+      />
+    </svg>
+  );
+};
+
+export const PaintingIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 14 14"
+    >
+      <g
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M1.5 12h11a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1h-11a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1" />
+        <path d="M9.502 6.212a1.245 1.245 0 1 0 0-2.49a1.245 1.245 0 0 0 0 2.49M9.083 12a7.098 7.098 0 0 0-7.136-5.786A7.6 7.6 0 0 0 .5 6.349" />
+        <path d="M13.5 8.94a7.716 7.716 0 0 0-5.506.225" />
+      </g>
+    </svg>
+  );
+};
+
+export const NewChatIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <g fill="none" stroke="currentColor" strokeWidth="1.5">
+        <path
+          strokeLinecap="round"
+          d="M22 10.5V12c0 4.714 0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2h1.5"
+        />
+        <path d="m16.652 3.455l.649-.649A2.753 2.753 0 0 1 21.194 6.7l-.65.649m-3.892-3.893s.081 1.379 1.298 2.595c1.216 1.217 2.595 1.298 2.595 1.298m-3.893-3.893L10.687 9.42c-.404.404-.606.606-.78.829c-.205.262-.38.547-.524.848c-.121.255-.211.526-.392 1.068L8.412 13.9m12.133-6.552l-5.965 5.965c-.404.404-.606.606-.829.78a4.59 4.59 0 0 1-.848.524c-.255.121-.526.211-1.068.392l-1.735.579m0 0l-1.123.374a.742.742 0 0 1-.939-.94l.374-1.122m1.688 1.688L8.412 13.9" />
+      </g>
+    </svg>
+  );
+};
+
+export const PaintingIcon = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 36 36"
+    >
+      <path
+        fill="currentColor"
+        d="M32 4H4a2 2 0 0 0-2 2v24a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM8.92 8a3 3 0 1 1-3 3a3 3 0 0 1 3-3ZM6 27v-4.1l6-6.08a1 1 0 0 1 1.41 0L16 19.35L8.32 27Zm24 0H11.15l6.23-6.23l5.4-5.4a1 1 0 0 1 1.41 0L30 21.18Z"
+      />
+      <path fill="none" d="M0 0h36v36H0z" />
+    </svg>
+  );
+};
+
+export const StarIconSkeleton = ({
+  size = 16,
+  className = defaultTailwindCSS,
+}: IconProps) => {
+  return (
+    <svg
+      style={{ width: `${size}px`, height: `${size}px` }}
+      className={`w-[${size}px] h-[${size}px] ` + className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="200"
+      height="200"
+      viewBox="0 0 24 24"
+    >
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="m14.92 8.797l-.624 1.86a4.75 4.75 0 0 1-3.029 3.03l-1.882.626a.316.316 0 0 0 0 .601l1.882.626a4.744 4.744 0 0 1 3.005 3.007l.625 1.883a.317.317 0 0 0 .6 0l.649-1.86a4.749 4.749 0 0 1 3.005-3.007l1.881-.625a.316.316 0 0 0 0-.601l-1.858-.65a4.744 4.744 0 0 1-3.028-3.03l-.625-1.884a.317.317 0 0 0-.6.024M6.859 3.516l-.446 1.329A3.392 3.392 0 0 1 4.25 7.01l-1.345.446a.226.226 0 0 0 0 .43l1.345.447a3.388 3.388 0 0 1 2.146 2.148l.446 1.345a.226.226 0 0 0 .43 0l.462-1.328A3.392 3.392 0 0 1 9.88 8.35l1.345-.447a.226.226 0 0 0 0-.43L9.897 7.01a3.388 3.388 0 0 1-2.163-2.165l-.446-1.346a.226.226 0 0 0-.43.017"
+      />
+    </svg>
+  );
 };
diff --git a/web/src/components/popup/Popup.tsx b/web/src/components/popup/Popup.tsx
new file mode 100644
index 0000000000..76c6faa6fd
--- /dev/null
+++ b/web/src/components/popup/Popup.tsx
@@ -0,0 +1,107 @@
+import React, { useState, useRef, useEffect, ReactNode } from "react";
+
+interface PopupProps {
+  children: JSX.Element;
+  content: (
+    close: () => void,
+    ref?: React.RefObject<HTMLDivElement>
+  ) => ReactNode;
+  position?: "top" | "bottom" | "left" | "right";
+  removePadding?: boolean;
+}
+
+const Popup: React.FC<PopupProps> = ({
+  children,
+  content,
+  removePadding,
+  position = "top",
+}) => {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const popupRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  const togglePopup = (): void => {
+    setIsOpen(!isOpen);
+  };
+
+  const closePopup = (): void => {
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        popupRef.current &&
+        !popupRef.current.contains(event.target as Node) &&
+        triggerRef.current &&
+        !triggerRef.current.contains(event.target as Node) &&
+        (!contentRef.current ||
+          !contentRef.current.contains(event.target as Node))
+      ) {
+        closePopup();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const getPopupStyle = (): React.CSSProperties => {
+    if (!triggerRef.current) return {};
+
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const popupStyle: React.CSSProperties = {
+      position: "absolute",
+      zIndex: 10,
+    };
+
+    switch (position) {
+      case "bottom":
+        popupStyle.top = `${triggerRect.height + 5}px`;
+        popupStyle.left = "50%";
+        popupStyle.transform = "translateX(-50%)";
+        break;
+      case "left":
+        popupStyle.top = "50%";
+        popupStyle.right = `${triggerRect.width + 5}px`;
+        popupStyle.transform = "translateY(-50%)";
+        break;
+      case "right":
+        popupStyle.top = "50%";
+        popupStyle.left = `${triggerRect.width + 5}px`;
+        popupStyle.transform = "translateY(-50%)";
+        break;
+      default: // top
+        popupStyle.bottom = `${triggerRect.height + 5}px`;
+        popupStyle.left = `${triggerRect.width + 100}px`;
+        popupStyle.transform = "translateX(-50%)";
+    }
+
+    return popupStyle;
+  };
+
+  return (
+    <div className="relative inline-block">
+      <div ref={triggerRef} onClick={togglePopup} className="cursor-pointer">
+        {children}
+      </div>
+
+      {isOpen && (
+        <div
+          ref={popupRef}
+          className={`absolute bg-white border border-gray-200 rounded-lg shadow-lg ${
+            !removePadding && "p-4"
+          } min-w-[400px]`}
+          style={getPopupStyle()}
+        >
+          {content(closePopup, contentRef)}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Popup;
diff --git a/web/src/components/resizable/ResizableSection.tsx b/web/src/components/resizable/ResizableSection.tsx
index 64921ab4e0..edfcc9fbe9 100644
--- a/web/src/components/resizable/ResizableSection.tsx
+++ b/web/src/components/resizable/ResizableSection.tsx
@@ -56,7 +56,7 @@ export function ResizableSection({
     const handleMouseMove = (mouseMoveEvent: MouseEvent) => {
       // Calculate the change in position
       const delta = mouseMoveEvent.clientX - startX;
-      let newWidth = applyMinAndMax(width - delta, minWidth, maxWidth);
+      let newWidth = applyMinAndMax(width + delta, minWidth, maxWidth);
       setWidth(newWidth);
       if (updateSidebarWidth) {
         updateSidebarWidth(newWidth);
@@ -83,6 +83,12 @@ export function ResizableSection({
 
   return (
     <div className="flex h-full">
+      <div
+        style={{ width: `${width}px` }}
+        className={`resize-section h-full flex`}
+      >
+        {children}
+      </div>
       <div
         className={`
           -mr-1 
@@ -95,25 +101,19 @@ export function ResizableSection({
           onMouseDown={startResizing}
           className={`
           cursor-col-resize 
-          border-l 
+          border-r 
           border-border 
           h-full
           w-full
-          transition-all duration-300 ease-in hover:border-border-strong hover:border-l-2
+          transition-all duration-300 ease-in hover:border-border-strong hover:border-r-2
           ${
             isResizing
-              ? "transition-all duration-300 ease-in border-border-strong border-l-2"
+              ? "transition-all duration-300 ease-in border-border-strong border-r-2"
               : ""
           }
           `}
         ></div>
       </div>
-      <div
-        style={{ width: `${width}px` }}
-        className={`resize-section h-full flex`}
-      >
-        {children}
-      </div>
     </div>
   );
 }
diff --git a/web/src/components/resizable/contants.ts b/web/src/components/resizable/contants.ts
index b30cb38f29..9439b371d8 100644
--- a/web/src/components/resizable/contants.ts
+++ b/web/src/components/resizable/contants.ts
@@ -1 +1,2 @@
 export const DOCUMENT_SIDEBAR_WIDTH_COOKIE_NAME = "documentSidebarWidth";
+export const SIDEBAR_TOGGLED_COOKIE_NAME = "sidebarIsToggled";
diff --git a/web/src/components/search/DocumentDisplay.tsx b/web/src/components/search/DocumentDisplay.tsx
index 4df96b67bd..141d794834 100644
--- a/web/src/components/search/DocumentDisplay.tsx
+++ b/web/src/components/search/DocumentDisplay.tsx
@@ -1,12 +1,20 @@
-import { DanswerDocument } from "@/lib/search/interfaces";
+import {
+  DanswerDocument,
+  DocumentRelevance,
+  Relevance,
+  SearchDanswerDocument,
+} from "@/lib/search/interfaces";
 import { DocumentFeedbackBlock } from "./DocumentFeedbackBlock";
 import { useState } from "react";
 import { PopupSpec } from "../admin/connectors/Popup";
-import { HoverPopup } from "@/components/HoverPopup";
 import { DocumentUpdatedAtBadge } from "./DocumentUpdatedAtBadge";
-import { FiInfo, FiRadio, FiTag } from "react-icons/fi";
 import { SourceIcon } from "../SourceIcon";
 import { MetadataBadge } from "../MetadataBadge";
+import { BookIcon, CheckmarkIcon, LightBulbIcon, XIcon } from "../icons/icons";
+
+import { FaStar } from "react-icons/fa";
+import { FiTag } from "react-icons/fi";
+import { DISABLE_AGENTIC_SEARCH } from "@/lib/constants";
 
 export const buildDocumentSummaryDisplay = (
   matchHighlights: string[],
@@ -120,6 +128,7 @@ export function DocumentMetadataBlock({
           <DocumentUpdatedAtBadge updatedAt={document.updated_at} />
         </div>
       )}
+
       {Object.entries(document.metadata).length > 0 && (
         <>
           <div className="pl-1 border-l border-border" />
@@ -143,111 +152,210 @@ export function DocumentMetadataBlock({
 }
 
 interface DocumentDisplayProps {
-  document: DanswerDocument;
+  document: SearchDanswerDocument;
   messageId: number | null;
   documentRank: number;
   isSelected: boolean;
   setPopup: (popupSpec: PopupSpec | null) => void;
+  hide?: boolean;
+  index?: number;
+  contentEnriched?: boolean;
+  additional_relevance: DocumentRelevance | null;
 }
 
 export const DocumentDisplay = ({
   document,
-  messageId,
-  documentRank,
   isSelected,
+  additional_relevance,
+  messageId,
+  contentEnriched,
+  documentRank,
+  hide,
+  index,
   setPopup,
 }: DocumentDisplayProps) => {
   const [isHovered, setIsHovered] = useState(false);
-
-  // Consider reintroducing null scored docs in the future
-  if (document.score === null) {
-    return null;
-  }
+  const [alternativeToggled, setAlternativeToggled] = useState(false);
+  const relevance_explanation =
+    document.relevance_explanation ?? additional_relevance?.content;
 
   return (
     <div
       key={document.semantic_identifier}
-      className="text-sm border-b border-border mb-3"
-      onMouseEnter={() => {
-        setIsHovered(true);
-      }}
+      className={`text-sm border-b border-border transition-all duration-500 
+        ${hide ? "transform translate-x-full opacity-0" : ""} 
+        ${!hide ? "pt-3" : "border-transparent"} relative`}
+      onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      style={{
+        transitionDelay: `${index! * 10}ms`, // Add a delay to the transition based on index
+      }}
     >
-      <div className="flex relative">
-        {document.score !== null && (
-          <div
-            className={
-              "absolute top-2/4 -translate-y-2/4 flex " +
-              (isSelected ? "-left-14 w-14" : "-left-10 w-10")
-            }
-          >
-            {isSelected && (
-              <div className="w-4 h-4 my-auto mr-1 flex flex-col">
-                <HoverPopup
-                  mainContent={<FiRadio className="text-gray-500 my-auto" />}
-                  popupContent={
-                    <div className="text-xs text-gray-300 w-36 flex">
-                      <div className="flex mx-auto">
-                        <div className="w-3 h-3 flex flex-col my-auto mr-1">
-                          <FiInfo className="my-auto" />
-                        </div>
-                        <div className="my-auto">The AI liked this doc!</div>
-                      </div>
-                    </div>
-                  }
-                  direction="bottom"
-                  style="dark"
-                />
-              </div>
-            )}
-            <div
-              className={`
-                text-xs
-                text-emphasis
-                bg-hover
-                rounded
-                p-0.5
-                w-fit
-                my-auto
-                select-none
-                ml-auto
-                mr-2`}
-            >
-              {Math.abs(document.score).toFixed(2)}
-            </div>
-          </div>
+      <div
+        className={`absolute top-6 overflow-y-auto -translate-y-2/4 flex ${
+          isSelected ? "-left-14 w-14" : "-left-10 w-10"
+        }`}
+      >
+        {!hide && (document.is_relevant || additional_relevance?.relevant) && (
+          <FaStar
+            size={16}
+            className="h-full text-xs text-accent rounded w-fit my-auto select-none ml-auto mr-2"
+          />
         )}
-        <a
-          className={
-            "rounded-lg flex font-bold text-link max-w-full " +
-            (document.link ? "" : "pointer-events-none")
-          }
-          href={document.link}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <SourceIcon sourceType={document.source_type} iconSize={22} />
-          <p className="truncate text-wrap break-all ml-2 my-auto text-base max-w-full">
-            {document.semantic_identifier || document.document_id}
-          </p>
-        </a>
-        <div className="ml-auto">
-          {isHovered && messageId && (
-            <DocumentFeedbackBlock
-              documentId={document.document_id}
-              messageId={messageId}
-              documentRank={documentRank}
-              setPopup={setPopup}
-            />
-          )}
+      </div>
+      <div
+        className={`collapsible ${
+          hide ? "collapsible-closed overflow-y-auto border-transparent" : ""
+        }`}
+      >
+        <div className="flex relative">
+          <a
+            className={`rounded-lg flex font-bold text-link max-w-full ${
+              document.link ? "" : "pointer-events-none"
+            }`}
+            href={document.link}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <SourceIcon sourceType={document.source_type} iconSize={22} />
+            <p className="truncate text-wrap break-all ml-2 my-auto line-clamp-1 text-base max-w-full">
+              {document.semantic_identifier || document.document_id}
+            </p>
+          </a>
+          <div className="ml-auto flex gap-x-2">
+            {isHovered && messageId && (
+              <DocumentFeedbackBlock
+                documentId={document.document_id}
+                messageId={messageId}
+                documentRank={documentRank}
+                setPopup={setPopup}
+              />
+            )}
+
+            {(contentEnriched || additional_relevance) &&
+              relevance_explanation &&
+              (isHovered || alternativeToggled) && (
+                <button
+                  onClick={() =>
+                    setAlternativeToggled(
+                      (alternativeToggled) => !alternativeToggled
+                    )
+                  }
+                >
+                  <LightBulbIcon className="text-blue-400 h-4 w-4 cursor-pointer" />
+                </button>
+              )}
+          </div>
+        </div>
+        <div className="mt-1">
+          <DocumentMetadataBlock document={document} />
+        </div>
+
+        <p
+          style={{ transition: "height 0.30s ease-in-out" }}
+          className="pl-1 pt-2 pb-3 break-words text-wrap"
+        >
+          {alternativeToggled && (contentEnriched || additional_relevance)
+            ? relevance_explanation
+            : buildDocumentSummaryDisplay(
+                document.match_highlights,
+                document.blurb
+              )}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export const AgenticDocumentDisplay = ({
+  document,
+  contentEnriched,
+  additional_relevance,
+  messageId,
+  documentRank,
+  index,
+  hide,
+  setPopup,
+}: DocumentDisplayProps) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const [alternativeToggled, setAlternativeToggled] = useState(false);
+
+  const relevance_explanation =
+    document.relevance_explanation ?? additional_relevance?.content;
+  return (
+    <div
+      key={document.semantic_identifier}
+      className={`text-sm border-b border-border transition-all duration-500
+      ${!hide ? "transform translate-x-full opacity-0" : ""} 
+      ${hide ? "py-3" : "border-transparent"} relative`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      style={{
+        transitionDelay: `${index! * 10}ms`,
+      }}
+    >
+      <div
+        className={`collapsible ${!hide && "collapsible-closed overflow-y-auto border-transparent"}`}
+      >
+        <div className="flex relative">
+          <a
+            className={`rounded-lg flex font-bold text-link max-w-full ${
+              document.link ? "" : "pointer-events-none"
+            }`}
+            href={document.link}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            <SourceIcon sourceType={document.source_type} iconSize={22} />
+            <p className="truncate text-wrap break-all ml-2 my-auto line-clamp-1 text-base max-w-full">
+              {document.semantic_identifier || document.document_id}
+            </p>
+          </a>
+
+          <div className="ml-auto flex gap-x-2">
+            {isHovered && messageId && (
+              <DocumentFeedbackBlock
+                documentId={document.document_id}
+                messageId={messageId}
+                documentRank={documentRank}
+                setPopup={setPopup}
+              />
+            )}
+
+            {(contentEnriched || additional_relevance) &&
+              relevance_explanation &&
+              (isHovered || alternativeToggled) && (
+                <button
+                  onClick={() =>
+                    setAlternativeToggled(
+                      (alternativeToggled) => !alternativeToggled
+                    )
+                  }
+                >
+                  <BookIcon className="text-blue-400" />
+                </button>
+              )}
+          </div>
+        </div>
+        <div className="mt-1">
+          <DocumentMetadataBlock document={document} />
+        </div>
+
+        <div className="pt-2 break-words flex gap-x-2">
+          <p
+            className="break-words text-wrap"
+            style={{ transition: "height 0.30s ease-in-out" }}
+          >
+            {alternativeToggled && (contentEnriched || additional_relevance)
+              ? buildDocumentSummaryDisplay(
+                  document.match_highlights,
+                  document.blurb
+                )
+              : relevance_explanation}
+          </p>
         </div>
       </div>
-      <div className="mt-1">
-        <DocumentMetadataBlock document={document} />
-      </div>
-      <p className="pl-1 pt-2 pb-3 break-words">
-        {buildDocumentSummaryDisplay(document.match_highlights, document.blurb)}
-      </p>
     </div>
   );
 };
diff --git a/web/src/components/search/DocumentFeedbackBlock.tsx b/web/src/components/search/DocumentFeedbackBlock.tsx
index 6b26869d14..470bd402c2 100644
--- a/web/src/components/search/DocumentFeedbackBlock.tsx
+++ b/web/src/components/search/DocumentFeedbackBlock.tsx
@@ -1,5 +1,12 @@
+import { Lightbulb } from "@phosphor-icons/react/dist/ssr";
 import { PopupSpec } from "../admin/connectors/Popup";
-import { ChevronsDownIcon, ChevronsUpIcon } from "../icons/icons";
+import {
+  BookmarkIcon,
+  ChevronsDownIcon,
+  ChevronsUpIcon,
+  LightBulbIcon,
+  LightSettingsIcon,
+} from "../icons/icons";
 
 type DocumentFeedbackType = "endorse" | "reject" | "hide" | "unhide";
 
@@ -107,7 +114,7 @@ export const DocumentFeedbackBlock = ({
   setPopup,
 }: DocumentFeedbackBlockProps) => {
   return (
-    <div className="flex">
+    <div className="flex items-center gap-x-2">
       <DocumentFeedback
         documentId={documentId}
         messageId={messageId}
@@ -115,15 +122,14 @@ export const DocumentFeedbackBlock = ({
         setPopup={setPopup}
         feedbackType="endorse"
       />
-      <div className="ml-2">
-        <DocumentFeedback
-          documentId={documentId}
-          messageId={messageId}
-          documentRank={documentRank}
-          setPopup={setPopup}
-          feedbackType="reject"
-        />
-      </div>
+
+      <DocumentFeedback
+        documentId={documentId}
+        messageId={messageId}
+        documentRank={documentRank}
+        setPopup={setPopup}
+        feedbackType="reject"
+      />
     </div>
   );
 };
diff --git a/web/src/components/search/SearchBar.tsx b/web/src/components/search/SearchBar.tsx
index 558222bfba..a305b8dd8f 100644
--- a/web/src/components/search/SearchBar.tsx
+++ b/web/src/components/search/SearchBar.tsx
@@ -1,6 +1,232 @@
 import React, { KeyboardEvent, ChangeEvent } from "react";
+import { searchState } from "./SearchSection";
+
 import { MagnifyingGlass } from "@phosphor-icons/react";
 
+interface FullSearchBarProps {
+  query: string;
+  setQuery: (query: string) => void;
+  onSearch: (fast?: boolean) => void;
+  searchState?: searchState;
+  agentic?: boolean;
+  toggleAgentic?: () => void;
+}
+
+import { useState, useEffect, useRef } from "react";
+import { SendIcon } from "../icons/icons";
+import { Divider } from "@tremor/react";
+import { CustomTooltip } from "../tooltip/CustomTooltip";
+import KeyboardSymbol from "@/lib/browserUtilities";
+
+export const AnimatedToggle = ({
+  isOn,
+  handleToggle,
+}: {
+  isOn: boolean;
+  handleToggle: () => void;
+}) => {
+  const commandSymbol = KeyboardSymbol();
+
+  const [width, setWidth] = useState("auto");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (containerRef.current && contentRef.current) {
+        const newWidth = contentRef.current.scrollWidth;
+        setWidth(`${newWidth}px`);
+      }
+    };
+
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+    return () => window.removeEventListener("resize", updateWidth);
+  }, [isOn]);
+
+  return (
+    <CustomTooltip
+      light
+      large
+      content={
+        <div className="bg-white my-auto p-6 rounded-lg w-full">
+          <h2 className="text-xl text-text-800 font-bold mb-2">
+            Agentic Search
+          </h2>
+          <p className="text-text-700 text-sm mb-4">
+            Our most powerful search, have an AI agent guide you to pinpoint
+            exactly what you&apos;re looking for.
+          </p>
+          <Divider />
+          <h2 className="text-xl text-text-800 font-bold mb-2">Fast Search</h2>
+          <p className="text-text-700 text-sm mb-4">
+            Get quality results immediately, best suited for instant access to
+            your documents.
+          </p>
+          <p className="mt-2 text-xs">Shortcut: ({commandSymbol}/)</p>
+        </div>
+      }
+    >
+      <div
+        ref={containerRef}
+        className="my-auto ml-auto flex jusitfy-end items-center cursor-pointer transition-all duration-300 ease-in-out overflow-hidden"
+        style={{ width }}
+        onClick={handleToggle}
+      >
+        <div
+          ref={contentRef}
+          className={`flex group ml-auto items-center transition-all duration-300 ease-in-out ml-auto`}
+        >
+          <div
+            className={`
+            w-10 h-6 flex items-center rounded-full p-1 transition-all duration-300 ease-in-out
+            ${isOn ? "bg-background-400" : "bg-background-200"}
+          `}
+          >
+            <div
+              className={`
+              bg-white w-4 h-4 rounded-full group-hover:scale-[.8] shadow-md transform transition-all duration-300 ease-in-out
+              ${!isOn ? "" : "translate-x-4"}
+            `}
+            ></div>
+          </div>
+          <p className="flex ml-2 w-[40px]">
+            <span
+              className={`no-underline text-sm transition-all duration-300 ease-in-out ${
+                isOn ? "opacity-0  translate-y-10 w-0" : "opacity-100"
+              }`}
+            >
+              Fast
+            </span>
+            <span
+              className={`text-sm transition-all duration-300 ease-in-out ${
+                isOn ? "opacity-100 " : "opacity-0 -translate-y-10 w-0"
+              }`}
+            >
+              Agentic
+            </span>
+          </p>
+        </div>
+      </div>
+    </CustomTooltip>
+  );
+};
+
+export default AnimatedToggle;
+
+export const FullSearchBar = ({
+  searchState,
+  query,
+  setQuery,
+  onSearch,
+  agentic,
+  toggleAgentic,
+}: FullSearchBarProps) => {
+  const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
+    const target = event.target;
+    setQuery(target.value);
+
+    // Resize the textarea to fit the content
+    target.style.height = "24px";
+    const newHeight = target.scrollHeight;
+    target.style.height = `${newHeight}px`;
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      onSearch(agentic);
+      event.preventDefault();
+    }
+  };
+
+  return (
+    <div
+      className="
+        opacity-100
+        w-full
+        h-fit
+        flex
+        flex-col
+        border
+        border-border-medium
+        rounded-lg
+        bg-background-100
+        [&:has(textarea:focus)]::ring-1
+        [&:has(textarea:focus)]::ring-black
+        "
+    >
+      <textarea
+        rows={3}
+        onKeyDownCapture={handleKeyDown}
+        className={`
+                m-0
+                w-full
+                shrink
+                resize-none
+                border-0
+                bg-background-100
+                whitespace-normal
+                rounded-lg
+                break-word
+                overscroll-contain
+                outline-none
+                placeholder-subtle
+                resize-none
+                pl-4
+                pr-12
+                max-h-[6em]
+                py-4
+                h-14
+              `}
+        autoFocus
+        style={{ scrollbarWidth: "thin" }}
+        role="textarea"
+        aria-multiline
+        placeholder="Search for something..."
+        value={query}
+        onChange={handleChange}
+        onKeyDown={(event) => {}}
+        suppressContentEditableWarning={true}
+      />
+
+      <div className="flex justify-end w-full items-center space-x-3 mr-12 px-4 pb-2">
+        {searchState == "searching" && (
+          <div key={"Reading"} className="mr-auto relative inline-block">
+            <span className="loading-text">Reading Documents...</span>
+          </div>
+        )}
+
+        {searchState == "analyzing" && (
+          <div key={"Generating"} className="mr-auto relative inline-block">
+            <span className="loading-text">Generating Analysis...</span>
+          </div>
+        )}
+
+        {toggleAgentic && (
+          <AnimatedToggle isOn={agentic!} handleToggle={toggleAgentic} />
+        )}
+
+        <div className="my-auto pl-2">
+          <button
+            onClick={() => {
+              onSearch(agentic);
+            }}
+            className="flex my-auto cursor-pointer"
+          >
+            <SendIcon
+              size={28}
+              className={`text-emphasis text-white p-1 rounded-full ${
+                query ? "bg-background-800" : "bg-[#D7D7D7]"
+              }`}
+            />
+          </button>
+        </div>
+      </div>
+      <div className="absolute bottom-2.5 right-10"></div>
+    </div>
+  );
+};
+
 interface SearchBarProps {
   query: string;
   setQuery: (query: string) => void;
diff --git a/web/src/components/search/SearchResultsDisplay.tsx b/web/src/components/search/SearchResultsDisplay.tsx
index c16da67832..28305946ff 100644
--- a/web/src/components/search/SearchResultsDisplay.tsx
+++ b/web/src/components/search/SearchResultsDisplay.tsx
@@ -1,25 +1,27 @@
 "use client";
 
-import React from "react";
+import { removeDuplicateDocs } from "@/lib/documentUtils";
 import {
   DanswerDocument,
-  SearchResponse,
-  Quote,
+  DocumentRelevance,
   FlowType,
+  Quote,
+  Relevance,
+  SearchDanswerDocument,
   SearchDefaultOverrides,
+  SearchResponse,
   ValidQuestionResponse,
 } from "@/lib/search/interfaces";
-import { QAFeedbackBlock } from "./QAFeedback";
-import { DocumentDisplay } from "./DocumentDisplay";
-import { QuotesSection } from "./results/QuotesSection";
-import { AnswerSection } from "./results/AnswerSection";
-import { ThreeDots } from "react-loader-spinner";
 import { usePopup } from "../admin/connectors/Popup";
-import { AlertIcon } from "../icons/icons";
-import { removeDuplicateDocs } from "@/lib/documentUtils";
+import { AlertIcon, BroomIcon, UndoIcon } from "../icons/icons";
+import { AgenticDocumentDisplay, DocumentDisplay } from "./DocumentDisplay";
+import { searchState } from "./SearchSection";
+import { useEffect, useState } from "react";
+import { Tooltip } from "../tooltip/Tooltip";
+import KeyboardSymbol from "@/lib/browserUtilities";
 
 const getSelectedDocumentIds = (
-  documents: DanswerDocument[],
+  documents: SearchDanswerDocument[],
   selectedIndices: number[]
 ) => {
   const selectedDocumentIds = new Set<string>();
@@ -30,46 +32,89 @@ const getSelectedDocumentIds = (
 };
 
 export const SearchResultsDisplay = ({
+  agenticResults,
   searchResponse,
-  validQuestionResponse,
+  contentEnriched,
+  disabledAgentic,
   isFetching,
   defaultOverrides,
-  personaName = null,
+  performSweep,
+  sweep,
 }: {
+  disabledAgentic?: boolean;
+  contentEnriched?: boolean;
+  agenticResults?: boolean | null;
+  performSweep: () => void;
+  sweep?: boolean;
   searchResponse: SearchResponse | null;
-  validQuestionResponse: ValidQuestionResponse;
   isFetching: boolean;
   defaultOverrides: SearchDefaultOverrides;
-  personaName?: string | null;
+  comments: any;
 }) => {
+  const commandSymbol = KeyboardSymbol();
   const { popup, setPopup } = usePopup();
+  const [showAll, setShowAll] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        switch (event.key.toLowerCase()) {
+          case "o":
+            event.preventDefault();
+
+            performSweep();
+            if (agenticResults) {
+              setShowAll((showAll) => !showAll);
+            }
+            break;
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
 
   if (!searchResponse) {
     return null;
   }
 
-  const isPersona = personaName !== null;
   const { answer, quotes, documents, error, messageId } = searchResponse;
 
-  if (isFetching && !answer && !documents) {
+  if (isFetching && disabledAgentic) {
     return (
-      <div className="flex">
-        <div className="mx-auto">
-          <ThreeDots
-            height="30"
-            width="40"
-            color="#3b82f6"
-            ariaLabel="grid-loading"
-            radius="12.5"
-            wrapperStyle={{}}
-            wrapperClass=""
-            visible={true}
-          />
+      <div className="mt-4">
+        <div className="font-bold flex justify-between text-emphasis border-b mb-3 pb-1 border-border text-lg">
+          <p>Results</p>
         </div>
       </div>
     );
   }
 
+  if (isFetching && !answer && !documents) {
+    return null;
+  }
+  if (
+    answer === null &&
+    documents != null &&
+    documents.length == 0 &&
+    !isFetching
+  ) {
+    return (
+      <div className="text-base gap-x-1.5 flex flex-col">
+        <div className="flex gap-x-2 items-center text-error">
+          <AlertIcon size={16} className="text-error" />
+          No documents were found!
+        </div>
+        <p>
+          Have you set up a connector? Your data may not have loaded properly.
+        </p>
+      </div>
+    );
+  }
+
   if (
     answer === null &&
     (documents === null || documents.length === 0) &&
@@ -78,15 +123,13 @@ export const SearchResultsDisplay = ({
   ) {
     return (
       <div className="mt-4">
-        {error ? (
+        {error && (
           <div className="text-error text-sm">
             <div className="flex">
               <AlertIcon size={16} className="text-error my-auto mr-1" />
-              <p className="italic">{error}</p>
+              <p className="italic">{error || "No documents were found!"}</p>
             </div>
           </div>
-        ) : (
-          <div className="text-subtle">No matching documents found.</div>
         )}
       </div>
     );
@@ -108,75 +151,160 @@ export const SearchResultsDisplay = ({
     searchResponse.selectedDocIndices || []
   );
 
-  const shouldDisplayQA =
-    searchResponse.suggestedFlowType === FlowType.QUESTION_ANSWER ||
-    defaultOverrides.forceDisplayQA;
+  const relevantDocs = documents
+    ? documents.filter((doc) => {
+        return (
+          showAll ||
+          (searchResponse &&
+            searchResponse.additional_relevance &&
+            searchResponse.additional_relevance[
+              `${doc.document_id}-${doc.chunk_ind}`
+            ].relevant) ||
+          doc.is_relevant
+        );
+      })
+    : [];
+
+  const getUniqueDocuments = (
+    documents: SearchDanswerDocument[]
+  ): SearchDanswerDocument[] => {
+    const seenIds = new Set<string>();
+    return documents.filter((doc) => {
+      if (!seenIds.has(doc.document_id)) {
+        seenIds.add(doc.document_id);
+        return true;
+      }
+      return false;
+    });
+  };
+
+  const uniqueDocuments = getUniqueDocuments(documents || []);
 
   return (
     <>
       {popup}
-      {shouldDisplayQA && (
-        <div className="min-h-[16rem] p-4 border-2 border-border rounded-lg relative">
-          <div>
-            <div className="flex mb-1">
-              <h2 className="text-emphasis font-bold my-auto mb-1 w-full">
-                AI Answer
-              </h2>
-            </div>
-
-            <div className="mb-2 pt-1 border-t border-border w-full">
-              <AnswerSection
-                answer={answer}
-                quotes={quotes}
-                error={error}
-                nonAnswerableReason={
-                  validQuestionResponse.answerable === false && !isPersona
-                    ? validQuestionResponse.reasoning
-                    : ""
-                }
-                isFetching={isFetching}
-              />
-            </div>
-
-            {quotes !== null && answer && !isPersona && (
-              <div className="pt-1 border-t border-border w-full">
-                <QuotesSection
-                  quotes={dedupedQuotes}
-                  isFetching={isFetching}
-                  isAnswerable={validQuestionResponse.answerable}
-                />
-
-                {searchResponse.messageId !== null && (
-                  <div className="absolute right-3 bottom-3">
-                    <QAFeedbackBlock
-                      messageId={searchResponse.messageId}
-                      setPopup={setPopup}
-                    />
-                  </div>
-                )}
-              </div>
-            )}
-          </div>
-        </div>
+      {documents && documents.length == 0 && (
+        <p className="flex text-lg font-bold">
+          No docs found! Ensure that you have enabled at least one connector
+        </p>
       )}
 
       {documents && documents.length > 0 && (
         <div className="mt-4">
-          <div className="font-bold text-emphasis border-b mb-3 pb-1 border-border text-lg">
-            Results
+          <div className="font-bold flex justify-between text-emphasis border-b mb-3 pb-1 border-border text-lg">
+            <p>Results</p>
+            {(contentEnriched || searchResponse.additional_relevance) && (
+              <Tooltip delayDuration={1000} content={`${commandSymbol}O`}>
+                <button
+                  onClick={() => {
+                    performSweep();
+                    if (agenticResults) {
+                      setShowAll((showAll) => !showAll);
+                    }
+                  }}
+                  className={`flex items-center justify-center animate-fade-in-up rounded-lg p-1 text-xs transition-all duration-300 w-16 h-8 ${
+                    !sweep
+                      ? "bg-green-500 text-text-800"
+                      : "bg-rose-700 text-text-100"
+                  }`}
+                  style={{
+                    transform: sweep ? "rotateZ(180deg)" : "rotateZ(0deg)",
+                  }}
+                >
+                  <div
+                    className={`flex items-center ${sweep ? "rotate-180" : ""}`}
+                  >
+                    <span></span>
+                    {!sweep
+                      ? agenticResults
+                        ? "all"
+                        : "hide"
+                      : agenticResults
+                        ? "hide"
+                        : "undo"}
+                    {!sweep ? (
+                      <BroomIcon className="h-4 w-4" />
+                    ) : (
+                      <UndoIcon className="h-4 w-4" />
+                    )}
+                  </div>
+                </button>
+              </Tooltip>
+            )}
           </div>
-          {removeDuplicateDocs(documents).map((document, ind) => (
-            <DocumentDisplay
-              key={document.document_id}
-              document={document}
-              documentRank={ind + 1}
-              messageId={messageId}
-              isSelected={selectedDocumentIds.has(document.document_id)}
-              setPopup={setPopup}
-            />
-          ))}
+
+          {agenticResults &&
+            relevantDocs &&
+            contentEnriched &&
+            relevantDocs.length == 0 &&
+            !showAll && (
+              <p className="flex text-lg font-bold">
+                No high quality results found by agentic search.
+              </p>
+            )}
+
+          {uniqueDocuments.map((document, ind) => {
+            const relevance: DocumentRelevance | null =
+              searchResponse.additional_relevance
+                ? searchResponse.additional_relevance[
+                    `${document.document_id}-${document.chunk_ind}`
+                  ]
+                : null;
+
+            return agenticResults ? (
+              <AgenticDocumentDisplay
+                additional_relevance={relevance}
+                contentEnriched={contentEnriched}
+                index={ind}
+                hide={showAll || relevance?.relevant || document.is_relevant}
+                key={`${document.document_id}-${ind}`}
+                document={document}
+                documentRank={ind + 1}
+                messageId={messageId}
+                isSelected={selectedDocumentIds.has(document.document_id)}
+                setPopup={setPopup}
+              />
+            ) : (
+              <DocumentDisplay
+                additional_relevance={relevance}
+                contentEnriched={contentEnriched}
+                index={ind}
+                hide={sweep && !document.is_relevant && !relevance?.relevant}
+                key={`${document.document_id}-${ind}`}
+                document={document}
+                documentRank={ind + 1}
+                messageId={messageId}
+                isSelected={selectedDocumentIds.has(document.document_id)}
+                setPopup={setPopup}
+              />
+            );
+          })}
         </div>
       )}
+
+      <div className="h-[100px]" />
     </>
   );
 };
+
+export function AgenticDisclaimer({
+  forceNonAgentic,
+}: {
+  forceNonAgentic: () => void;
+}) {
+  return (
+    <div className="ml-auto mx-12 flex transition-all duration-300 animate-fade-in flex-col gap-y-2">
+      <p className="text-sm">
+        Please note that agentic quries can take substantially longer than
+        non-agentic queries. You can click <i>non-agentic</i> to re-submit your
+        query without agentic capabilities.
+      </p>
+      <button
+        onClick={forceNonAgentic}
+        className="p-2 bg-background-900 mr-auto text-text-200 rounded-lg text-xs my-auto"
+      >
+        Non-agentic
+      </button>
+    </div>
+  );
+}
diff --git a/web/src/components/search/SearchSection.tsx b/web/src/components/search/SearchSection.tsx
index 742f896286..1dd4c5b59f 100644
--- a/web/src/components/search/SearchSection.tsx
+++ b/web/src/components/search/SearchSection.tsx
@@ -1,12 +1,11 @@
 "use client";
 
-import { useContext, useRef, useState } from "react";
-import { SearchBar } from "./SearchBar";
+import { useContext, useEffect, useRef, useState } from "react";
+import { FullSearchBar } from "./SearchBar";
 import { SearchResultsDisplay } from "./SearchResultsDisplay";
 import { SourceSelector } from "./filtering/Filters";
-import { CCPairBasicInfo, Connector, DocumentSet, Tag } from "@/lib/types";
+import { CCPairBasicInfo, DocumentSet, Tag, User } from "@/lib/types";
 import {
-  DanswerDocument,
   Quote,
   SearchResponse,
   FlowType,
@@ -14,17 +13,28 @@ import {
   SearchDefaultOverrides,
   SearchRequestOverrides,
   ValidQuestionResponse,
+  Relevance,
+  SearchDanswerDocument,
 } from "@/lib/search/interfaces";
 import { searchRequestStreamed } from "@/lib/search/streamingQa";
-import { SearchHelper } from "./SearchHelper";
+
 import { CancellationToken, cancellable } from "@/lib/search/cancellable";
 import { useFilters, useObjectState } from "@/lib/hooks";
 import { questionValidationStreamed } from "@/lib/search/streamingQuestionValidation";
 import { Persona } from "@/app/admin/assistants/interfaces";
-import { PersonaSelector } from "./PersonaSelector";
 import { computeAvailableFilters } from "@/lib/filters";
-import { useRouter } from "next/navigation";
+import { useRouter, useSearchParams } from "next/navigation";
 import { SettingsContext } from "../settings/SettingsProvider";
+import { HistorySidebar } from "@/app/chat/sessionSidebar/HistorySidebar";
+import { ChatSession, SearchSession } from "@/app/chat/interfaces";
+import FunctionalHeader from "../chat_search/Header";
+import { useSidebarVisibility } from "../chat_search/hooks";
+import { SIDEBAR_TOGGLED_COOKIE_NAME } from "../resizable/contants";
+import { AGENTIC_SEARCH_TYPE_COOKIE_NAME } from "@/lib/constants";
+import Cookies from "js-cookie";
+import FixedLogo from "@/app/chat/shared_chat_search/FixedLogo";
+
+export type searchState = "input" | "searching" | "analyzing" | "summarizing";
 
 const SEARCH_DEFAULT_OVERRIDES_START: SearchDefaultOverrides = {
   forceDisplayQA: false,
@@ -38,27 +48,85 @@ const VALID_QUESTION_RESPONSE_DEFAULT: ValidQuestionResponse = {
 };
 
 interface SearchSectionProps {
+  disabledAgentic: boolean;
   ccPairs: CCPairBasicInfo[];
   documentSets: DocumentSet[];
   personas: Persona[];
   tags: Tag[];
+  toggle: () => void;
+  querySessions: ChatSession[];
   defaultSearchType: SearchType;
+  user: User | null;
+  toggledSidebar: boolean;
+  agenticSearchEnabled: boolean;
 }
 
 export const SearchSection = ({
   ccPairs,
+  toggle,
+  disabledAgentic,
   documentSets,
+  agenticSearchEnabled,
   personas,
+  user,
   tags,
+  querySessions,
+  toggledSidebar,
   defaultSearchType,
 }: SearchSectionProps) => {
   // Search Bar
   const [query, setQuery] = useState<string>("");
+  const [comments, setComments] = useState<any>(null);
+  const [contentEnriched, setContentEnriched] = useState(false);
 
-  // Search
-  const [searchResponse, setSearchResponse] = useState<SearchResponse | null>(
-    null
-  );
+  const [searchResponse, setSearchResponse] = useState<SearchResponse>({
+    suggestedSearchType: null,
+    suggestedFlowType: null,
+    answer: null,
+    quotes: null,
+    documents: null,
+    selectedDocIndices: null,
+    error: null,
+    messageId: null,
+  });
+
+  const [agentic, setAgentic] = useState(agenticSearchEnabled);
+
+  const toggleAgentic = () => {
+    Cookies.set(
+      AGENTIC_SEARCH_TYPE_COOKIE_NAME,
+      String(!agentic).toLocaleLowerCase()
+    );
+    setAgentic((agentic) => !agentic);
+  };
+
+  const toggleSidebar = () => {
+    Cookies.set(
+      SIDEBAR_TOGGLED_COOKIE_NAME,
+      String(!toggledSidebar).toLocaleLowerCase()
+    ),
+      {
+        path: "/",
+      };
+    toggle();
+  };
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        switch (event.key.toLowerCase()) {
+          case "/":
+            toggleAgentic();
+            break;
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
   const [isFetching, setIsFetching] = useState(false);
 
   const [validQuestionResponse, setValidQuestionResponse] =
@@ -84,6 +152,55 @@ export const SearchSection = ({
       availableDocumentSets: documentSets,
     });
 
+  const searchParams = useSearchParams();
+  const existingSearchIdRaw = searchParams.get("searchId");
+  const existingSearchessionId = existingSearchIdRaw
+    ? parseInt(existingSearchIdRaw)
+    : null;
+
+  useEffect(() => {
+    if (existingSearchIdRaw == null) {
+      return;
+    }
+    function extractFirstUserMessage(
+      chatSession: SearchSession
+    ): string | null {
+      const userMessage = chatSession?.messages.find(
+        (msg) => msg.message_type === "user"
+      );
+      return userMessage ? userMessage.message : null;
+    }
+
+    async function initialSessionFetch() {
+      const response = await fetch(
+        `/api/query/search-session/${existingSearchessionId}`
+      );
+      const searchSession = (await response.json()) as SearchSession;
+      const message = extractFirstUserMessage(searchSession);
+
+      if (message) {
+        setQuery(message);
+        const danswerDocs: SearchResponse = {
+          documents: searchSession.documents,
+          suggestedSearchType: null,
+          answer: null,
+          quotes: null,
+          selectedDocIndices: null,
+          error: null,
+          messageId: existingSearchIdRaw ? parseInt(existingSearchIdRaw) : null,
+          suggestedFlowType: null,
+          additional_relevance: undefined,
+        };
+
+        setIsFetching(false);
+        setFirstSearch(false);
+        setSearchResponse(danswerDocs);
+        setContentEnriched(true);
+      }
+    }
+    initialSessionFetch();
+  }, [existingSearchessionId, existingSearchIdRaw]);
+
   // Overrides for default behavior that only last a single query
   const [defaultOverrides, setDefaultOverrides] =
     useState<SearchDefaultOverrides>(SEARCH_DEFAULT_OVERRIDES_START);
@@ -98,7 +215,9 @@ export const SearchSection = ({
     selectedDocIndices: null,
     error: null,
     messageId: null,
+    additional_relevance: undefined,
   };
+  // Streaming updates
   const updateCurrentAnswer = (answer: string) =>
     setSearchResponse((prevState) => ({
       ...(prevState || initialSearchResponse),
@@ -109,11 +228,25 @@ export const SearchSection = ({
       ...(prevState || initialSearchResponse),
       quotes,
     }));
-  const updateDocs = (documents: DanswerDocument[]) =>
+
+  const updateDocs = (documents: SearchDanswerDocument[]) => {
+    setTimeout(() => {
+      if (searchState != "input") {
+        setSearchState("analyzing");
+      }
+    }, 1500);
     setSearchResponse((prevState) => ({
       ...(prevState || initialSearchResponse),
       documents,
     }));
+    if (disabledAgentic) {
+      setIsFetching(false);
+      setSearchState("input");
+    }
+    if (documents.length == 0) {
+      setSearchState("input");
+    }
+  };
   const updateSuggestedSearchType = (suggestedSearchType: SearchType) =>
     setSearchResponse((prevState) => ({
       ...(prevState || initialSearchResponse),
@@ -134,18 +267,65 @@ export const SearchSection = ({
       ...(prevState || initialSearchResponse),
       error,
     }));
-  const updateMessageId = (messageId: number) =>
+  const updateMessageAndThreadId = (
+    messageId: number,
+    chat_session_id: number
+  ) => {
     setSearchResponse((prevState) => ({
       ...(prevState || initialSearchResponse),
       messageId,
     }));
+    router.refresh();
+    setSearchState("input");
+    setIsFetching(false);
+
+    // router.replace(`/search?searchId=${chat_session_id}`);
+  };
+
+  const updateDocumentRelevance = (relevance: Relevance) => {
+    setSearchResponse((prevState) => ({
+      ...(prevState || initialSearchResponse),
+      additional_relevance: relevance,
+    }));
+
+    setContentEnriched(true);
+
+    setIsFetching(false);
+    setSearchState("input");
+  };
+
+  const updateComments = (comments: any) => {
+    setComments(comments);
+  };
+
+  const finishedSearching = () => {
+    setSearchState("input");
+  };
+
+  const resetInput = () => {
+    setSweep(false);
+    setFirstSearch(false);
+    setComments(null);
+    setSearchState("searching");
+  };
+
+  const [agenticResults, setAgenticResults] = useState<boolean | null>(null);
 
   let lastSearchCancellationToken = useRef<CancellationToken | null>(null);
   const onSearch = async ({
     searchType,
+    agentic,
     offset,
+    overrideMessage,
   }: SearchRequestOverrides = {}) => {
-    // cancel the prior search if it hasn't finished
+    if ((overrideMessage || query) == "") {
+      return;
+    }
+    setSearchResponse;
+    setAgenticResults(agentic!);
+    resetInput();
+    setContentEnriched(false);
+
     if (lastSearchCancellationToken.current) {
       lastSearchCancellationToken.current.cancel();
     }
@@ -154,10 +334,10 @@ export const SearchSection = ({
     setIsFetching(true);
     setSearchResponse(initialSearchResponse);
     setValidQuestionResponse(VALID_QUESTION_RESPONSE_DEFAULT);
-
     const searchFnArgs = {
-      query,
+      query: overrideMessage || query,
       sources: filterManager.selectedSources,
+      agentic: agentic,
       documentSets: filterManager.selectedDocumentSets,
       timeRange: filterManager.timeRange,
       tags: filterManager.selectedTags,
@@ -192,9 +372,26 @@ export const SearchSection = ({
         cancellationToken: lastSearchCancellationToken.current,
         fn: updateError,
       }),
-      updateMessageId: cancellable({
+      updateMessageAndThreadId: cancellable({
         cancellationToken: lastSearchCancellationToken.current,
-        fn: updateMessageId,
+        fn: updateMessageAndThreadId,
+      }),
+      updateDocStatus: cancellable({
+        cancellationToken: lastSearchCancellationToken.current,
+        fn: updateMessageAndThreadId,
+      }),
+      updateDocumentRelevance: cancellable({
+        cancellationToken: lastSearchCancellationToken.current,
+        fn: updateDocumentRelevance,
+      }),
+
+      updateComments: cancellable({
+        cancellationToken: lastSearchCancellationToken.current,
+        fn: updateComments,
+      }),
+      finishedSearching: cancellable({
+        cancellationToken: lastSearchCancellationToken.current,
+        fn: finishedSearching,
       }),
       selectedSearchType: searchType ?? selectedSearchType,
       offset: offset ?? defaultOverrides.offset,
@@ -209,8 +406,6 @@ export const SearchSection = ({
       searchRequestStreamed(searchFnArgs),
       questionValidationStreamed(questionValidationArgs),
     ]);
-
-    setIsFetching(false);
   };
 
   // handle redirect if search page is disabled
@@ -222,78 +417,176 @@ export const SearchSection = ({
   if (settings?.settings?.search_page_enabled === false) {
     router.push("/chat");
   }
+  const sidebarElementRef = useRef<HTMLDivElement>(null);
+  const innerSidebarElementRef = useRef<HTMLDivElement>(null);
+  const [showDocSidebar, setShowDocSidebar] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.metaKey || event.ctrlKey) {
+        switch (event.key.toLowerCase()) {
+          case "e":
+            event.preventDefault();
+            toggleSidebar();
+            break;
+        }
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [router]);
+
+  const handleTransitionEnd = (e: React.TransitionEvent<HTMLDivElement>) => {
+    if (e.propertyName === "opacity" && !firstSearch) {
+      const target = e.target as HTMLDivElement;
+      target.style.display = "none";
+    }
+  };
+  const [sweep, setSweep] = useState(false);
+  const performSweep = () => {
+    setSweep((sweep) => !sweep);
+  };
+  const [firstSearch, setFirstSearch] = useState(true);
+  const [searchState, setSearchState] = useState<searchState>("input");
+
+  useSidebarVisibility({
+    toggledSidebar,
+    sidebarElementRef,
+    showDocSidebar,
+    setShowDocSidebar,
+  });
 
   return (
-    <div className="relative max-w-[2000px] xl:max-w-[1430px] mx-auto">
-      <div className="absolute left-0 hidden 2xl:block w-52 3xl:w-64">
-        {(ccPairs.length > 0 || documentSets.length > 0) && (
-          <SourceSelector
-            {...filterManager}
-            availableDocumentSets={finalAvailableDocumentSets}
-            existingSources={finalAvailableSources}
-            availableTags={tags}
-          />
-        )}
-
-        <div className="mt-10 pr-5">
-          <SearchHelper
-            isFetching={isFetching}
-            searchResponse={searchResponse}
-            selectedSearchType={selectedSearchType}
-            setSelectedSearchType={setSelectedSearchType}
-            defaultOverrides={defaultOverrides}
-            restartSearch={onSearch}
-            forceQADisplay={() =>
-              setDefaultOverrides((prevState) => ({
-                ...(prevState || SEARCH_DEFAULT_OVERRIDES_START),
-                forceDisplayQA: true,
-              }))
+    <>
+      <div className="flex relative w-full pr-[8px] h-full text-default overflow-x-hidden">
+        <div
+          ref={sidebarElementRef}
+          className={`
+            flex-none 
+            fixed -8
+            left-0 
+            z-20
+            overflow-y-hidden 
+            sidebar 
+            bg-background-100 
+            h-screen
+            transition-all 
+            bg-opacity-80
+            duration-300 
+            ease-in-out
+            ${
+              showDocSidebar || toggledSidebar
+                ? "opacity-100 w-[300px] translate-x-0"
+                : "opacity-0 w-[200px] pointer-events-none -translate-x-10"
             }
-            setOffset={(offset) => {
-              setDefaultOverrides((prevState) => ({
-                ...(prevState || SEARCH_DEFAULT_OVERRIDES_START),
-                offset,
-              }));
-            }}
-          />
-        </div>
-      </div>
-      <div className="w-[720px] 3xl:w-[800px] mx-auto">
-        {personas.length > 0 ? (
-          <div className="flex mb-2 w-fit">
-            <PersonaSelector
-              personas={personas}
-              selectedPersonaId={selectedPersona}
-              onPersonaChange={(persona) => setSelectedPersona(persona.id)}
+          `}
+        >
+          <div className="w-full relative">
+            <HistorySidebar
+              page="search"
+              ref={innerSidebarElementRef}
+              toggleSidebar={toggleSidebar}
+              toggled={toggledSidebar}
+              existingChats={querySessions}
             />
           </div>
-        ) : (
-          <div className="pt-3" />
-        )}
+        </div>
 
-        <SearchBar
-          query={query}
-          setQuery={setQuery}
-          onSearch={async () => {
-            setDefaultOverrides(SEARCH_DEFAULT_OVERRIDES_START);
-            await onSearch({ offset: 0 });
-          }}
-        />
-
-        <div className="mt-2">
-          <SearchResultsDisplay
-            searchResponse={searchResponse}
-            validQuestionResponse={validQuestionResponse}
-            isFetching={isFetching}
-            defaultOverrides={defaultOverrides}
-            personaName={
-              selectedPersona
-                ? personas.find((p) => p.id === selectedPersona)?.name
-                : null
-            }
+        <div className="absolute left-0 w-full top-0">
+          <FunctionalHeader
+            showSidebar={showDocSidebar}
+            page="search"
+            user={user}
           />
+          <div className="w-full flex">
+            <div
+              style={{ transition: "width 0.30s ease-out" }}
+              className={`
+                    flex-none
+                    overflow-y-hidden
+                    bg-background-100
+                    h-full
+                    transition-all
+                    bg-opacity-80
+                    duration-300 
+                    ease-in-out
+                    ${toggledSidebar ? "w-[300px]" : "w-[0px]"}
+                  `}
+            />
+
+            {
+              <div className="px-24 w-full pt-10 relative max-w-[2000px] xl:max-w-[1430px] mx-auto">
+                <div className="absolute z-10 top-12 left-0 hidden 2xl:block w-52 3xl:w-64">
+                  {(ccPairs.length > 0 || documentSets.length > 0) && (
+                    <SourceSelector
+                      {...filterManager}
+                      showDocSidebar={showDocSidebar || toggledSidebar}
+                      availableDocumentSets={finalAvailableDocumentSets}
+                      existingSources={finalAvailableSources}
+                      availableTags={tags}
+                    />
+                  )}
+                </div>
+                <div className="absolute left-0 hidden 2xl:block w-52 3xl:w-64"></div>
+                <div className="max-w-searchbar-max w-[90%] mx-auto">
+                  <div
+                    className={`transition-all duration-500 ease-in-out overflow-hidden 
+                      ${
+                        firstSearch
+                          ? "opacity-100 max-h-[500px]"
+                          : "opacity-0 max-h-0"
+                      }`}
+                    onTransitionEnd={handleTransitionEnd}
+                  >
+                    <div className="mt-48 mb-8 flex justify-center items-center">
+                      <div className="w-message-xs 2xl:w-message-sm 3xl:w-message">
+                        <div className="flex">
+                          <div className="text-3xl font-bold font-strong text-strong mx-auto">
+                            Unlock Knowledge
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <FullSearchBar
+                    toggleAgentic={disabledAgentic ? undefined : toggleAgentic}
+                    agentic={agentic}
+                    searchState={searchState}
+                    query={query}
+                    setQuery={setQuery}
+                    onSearch={async (agentic?: boolean) => {
+                      setDefaultOverrides(SEARCH_DEFAULT_OVERRIDES_START);
+                      await onSearch({ agentic, offset: 0 });
+                    }}
+                  />
+
+                  <div className="mt-6">
+                    {!(agenticResults && isFetching) || disabledAgentic ? (
+                      <SearchResultsDisplay
+                        disabledAgentic={disabledAgentic}
+                        contentEnriched={contentEnriched}
+                        comments={comments}
+                        sweep={sweep}
+                        agenticResults={agenticResults && !disabledAgentic}
+                        performSweep={performSweep}
+                        searchResponse={searchResponse}
+                        isFetching={isFetching}
+                        defaultOverrides={defaultOverrides}
+                      />
+                    ) : (
+                      <></>
+                    )}
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
         </div>
       </div>
-    </div>
+      <FixedLogo />
+    </>
   );
 };
diff --git a/web/src/components/search/filtering/Filters.tsx b/web/src/components/search/filtering/Filters.tsx
index a17ef7c43e..f5991e2b96 100644
--- a/web/src/components/search/filtering/Filters.tsx
+++ b/web/src/components/search/filtering/Filters.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { DocumentSet, Tag, ValidSources } from "@/lib/types";
 import { SourceMetadata } from "@/lib/search/interfaces";
 import { InfoIcon, defaultTailwindCSS } from "../../icons/icons";
@@ -20,6 +20,7 @@ export interface SourceSelectorProps {
   setTimeRange: React.Dispatch<
     React.SetStateAction<DateRangePickerValue | null>
   >;
+  showDocSidebar?: boolean;
   selectedSources: SourceMetadata[];
   setSelectedSources: React.Dispatch<React.SetStateAction<SourceMetadata[]>>;
   selectedDocumentSets: string[];
@@ -43,6 +44,7 @@ export function SourceSelector({
   availableDocumentSets,
   existingSources,
   availableTags,
+  showDocSidebar,
 }: SourceSelectorProps) {
   const handleSelect = (source: SourceMetadata) => {
     setSelectedSources((prev: SourceMetadata[]) => {
@@ -67,18 +69,20 @@ export function SourceSelector({
   };
 
   return (
-    <div>
+    <div
+      className={`hidden ${
+        showDocSidebar ? "4xl:block" : "!block"
+      } duration-1000 ease-out transition-all transform origin-top-right`}
+    >
       <div className="flex mb-4 pb-2 border-b border-border text-emphasis">
         <h2 className="font-bold my-auto">Filters</h2>
         <FiFilter className="my-auto ml-2" size="16" />
       </div>
 
-      <>
-        <SectionTitle>Time Range</SectionTitle>
-        <div className="mt-2">
-          <DateRangeSelector value={timeRange} onValueChange={setTimeRange} />
-        </div>
-      </>
+      <SectionTitle>Time Range</SectionTitle>
+      <div className="mt-2">
+        <DateRangeSelector value={timeRange} onValueChange={setTimeRange} />
+      </div>
 
       {existingSources.length > 0 && (
         <div className="mt-4">
diff --git a/web/src/components/search/results/Citation.tsx b/web/src/components/search/results/Citation.tsx
new file mode 100644
index 0000000000..4773439ce3
--- /dev/null
+++ b/web/src/components/search/results/Citation.tsx
@@ -0,0 +1,55 @@
+import { CustomTooltip } from "@/components/tooltip/CustomTooltip";
+import { ReactNode } from "react";
+
+// NOTE: This is the preivous version of the citations which works just fine
+export function Citation({
+  children,
+  link,
+  index,
+}: {
+  link?: string;
+  children?: JSX.Element | string | null | ReactNode;
+  index?: number;
+}) {
+  const innerText = children
+    ? children?.toString().split("[")[1].split("]")[0]
+    : index;
+
+  if (link != "") {
+    return (
+      <CustomTooltip
+        citation
+        content={<p className="inline-block p-0 m-0 truncate">{link}</p>}
+      >
+        <a
+          onClick={() => (link ? window.open(link, "_blank") : undefined)}
+          className="cursor-pointer inline ml-1 align-middle"
+        >
+          <span className="group relative -top-1 text-sm text-gray-500 dark:text-gray-400 selection:bg-indigo-300 selection:text-black dark:selection:bg-indigo-900 dark:selection:text-white">
+            <span
+              className="inline-flex bg-background-200 group-hover:bg-background-300 items-center justify-center h-3.5 min-w-3.5 px-1 text-center text-xs rounded-full border-1 border-gray-400 ring-1 ring-gray-400 divide-gray-300 dark:divide-gray-700 dark:ring-gray-700 dark:border-gray-700 transition duration-150"
+              data-number="3"
+            >
+              {innerText}
+            </span>
+          </span>
+        </a>
+      </CustomTooltip>
+    );
+  } else {
+    return (
+      <CustomTooltip content={<div>This doc doesn&apos;t have a link!</div>}>
+        <div className="inline-block cursor-help leading-none inline ml-1 align-middle">
+          <span className="group relative -top-1 text-gray-500 dark:text-gray-400 selection:bg-indigo-300 selection:text-black dark:selection:bg-indigo-900 dark:selection:text-white">
+            <span
+              className="inline-flex bg-background-200 group-hover:bg-background-300 items-center justify-center h-3.5 min-w-3.5 flex-none px-1 text-center text-xs rounded-full border-1 border-gray-400 ring-1 ring-gray-400 divide-gray-300 dark:divide-gray-700 dark:ring-gray-700 dark:border-gray-700 transition duration-150"
+              data-number="3"
+            >
+              {innerText}
+            </span>
+          </span>
+        </div>
+      </CustomTooltip>
+    );
+  }
+}
diff --git a/web/src/components/search/results/QuotesSection.tsx b/web/src/components/search/results/QuotesSection.tsx
index 4462ac4319..e662389879 100644
--- a/web/src/components/search/results/QuotesSection.tsx
+++ b/web/src/components/search/results/QuotesSection.tsx
@@ -58,15 +58,6 @@ const QuoteDisplay = ({ quoteInfo }: { quoteInfo: Quote }) => {
             {quoteInfo.semantic_identifier || quoteInfo.document_id}
           </p>
         </a>
-
-        {/* <div
-          className="cursor-pointer h-full pt-2 pb-2 px-1 border-t border-b border-r border-gray-800 rounded-r-lg hover:bg-gray-800"
-          onClick={() => setDetailIsOpen(!detailIsOpen)}
-        >
-          <div className="pt-0.5 mx-auto h-[20px]">
-            <ZoomInIcon className="text-gray-500" size={14} />
-          </div>
-        </div> */}
       </button>
     </div>
   );
diff --git a/web/src/components/tooltip/CustomTooltip.tsx b/web/src/components/tooltip/CustomTooltip.tsx
new file mode 100644
index 0000000000..c4013a4b66
--- /dev/null
+++ b/web/src/components/tooltip/CustomTooltip.tsx
@@ -0,0 +1,135 @@
+import React, {
+  ReactNode,
+  useState,
+  useEffect,
+  useRef,
+  createContext,
+  useContext,
+} from "react";
+
+// Create a context for the tooltip group
+const TooltipGroupContext = createContext<{
+  setGroupHovered: React.Dispatch<React.SetStateAction<boolean>>;
+  groupHovered: boolean;
+  hoverCountRef: React.MutableRefObject<boolean>;
+}>({
+  setGroupHovered: () => {},
+  groupHovered: false,
+  hoverCountRef: { current: false },
+});
+
+export const TooltipGroup: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const [groupHovered, setGroupHovered] = useState(false);
+  const hoverCountRef = useRef(false);
+
+  return (
+    <TooltipGroupContext.Provider
+      value={{ groupHovered, setGroupHovered, hoverCountRef }}
+    >
+      <div className="inline-flex">{children}</div>
+    </TooltipGroupContext.Provider>
+  );
+};
+
+export const CustomTooltip = ({
+  content,
+  children,
+  large,
+  light,
+  citation,
+  line,
+  showTick = false,
+  delay = 500,
+}: {
+  content: string | ReactNode;
+  children: JSX.Element;
+  large?: boolean;
+  line?: boolean;
+  light?: boolean;
+  showTick?: boolean;
+  delay?: number;
+  citation?: boolean;
+}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const { groupHovered, setGroupHovered, hoverCountRef } =
+    useContext(TooltipGroupContext);
+
+  const showTooltip = () => {
+    hoverCountRef.current = true;
+
+    const showDelay = groupHovered ? 0 : delay;
+    timeoutRef.current = setTimeout(() => {
+      setIsVisible(true);
+      setGroupHovered(true);
+    }, showDelay);
+  };
+
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    hoverCountRef.current = false;
+    setIsVisible(false);
+    setTimeout(() => {
+      if (!hoverCountRef.current) {
+        setGroupHovered(false);
+      }
+    }, 100);
+  };
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <span className="relative inline-block">
+      <span
+        className="underline h-full leading-none"
+        onMouseEnter={showTooltip}
+        onMouseLeave={hideTooltip}
+      >
+        {children}
+      </span>
+      {isVisible && (
+        <div
+          className={`absolute z-10 ${citation ? "max-w-[350px]" : "w-40"} ${large ? "w-96" : line && "max-w-64 w-auto"} 
+              left-1/2 transform -translate-x-1/2 mt-2 text-sm 
+              ${
+                light
+                  ? "text-gray-800 bg-background-200"
+                  : "text-white bg-background-800"
+              } 
+              rounded-lg shadow-lg`}
+        >
+          {showTick && (
+            <div
+              className={`absolute w-3 h-3 -top-1.5 left-1/2 transform -translate-x-1/2 rotate-45 
+                  ${light ? "bg-background-200" : "bg-background-800"}`}
+            />
+          )}
+          <div
+            className={` relative ${line ? "" : "flex"} p-2`}
+            style={
+              line
+                ? {
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                  }
+                : {}
+            }
+          >
+            {content}
+          </div>
+        </div>
+      )}
+    </span>
+  );
+};
diff --git a/web/src/components/tooltip/Tooltip.tsx b/web/src/components/tooltip/Tooltip.tsx
index 225060f40b..18e9ae5049 100644
--- a/web/src/components/tooltip/Tooltip.tsx
+++ b/web/src/components/tooltip/Tooltip.tsx
@@ -28,17 +28,16 @@ export function Tooltip({
         <TooltipPrimitive.Content
           side={side}
           align={align}
-          className="
-
+          className={`
             bg-background-inverted 
             text-inverted 
             text-sm 
             rounded 
             py-1 
             px-2 
+            z-10
             shadow-lg
-            z-100
-          "
+          `}
         >
           {content}
           <TooltipPrimitive.Arrow className="fill-black" />
diff --git a/web/src/lib/browserUtilities.tsx b/web/src/lib/browserUtilities.tsx
new file mode 100644
index 0000000000..445ed64950
--- /dev/null
+++ b/web/src/lib/browserUtilities.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import { useState, useEffect } from "react";
+
+type OperatingSystem = "Windows" | "Mac" | "Other";
+
+const useOperatingSystem = (): OperatingSystem => {
+  const [os, setOS] = useState<OperatingSystem>("Other");
+
+  useEffect(() => {
+    const userAgent = window.navigator.userAgent.toLowerCase();
+    if (userAgent.includes("win")) {
+      setOS("Windows");
+    } else if (userAgent.includes("mac")) {
+      setOS("Mac");
+    }
+  }, []);
+
+  return os;
+};
+
+const KeyboardSymbol = () => {
+  const os = useOperatingSystem();
+
+  if (os === "Windows") {
+    return "⊞";
+  } else {
+    return "⌘";
+  }
+};
+
+export default KeyboardSymbol;
diff --git a/web/src/lib/chat/fetchChatData.ts b/web/src/lib/chat/fetchChatData.ts
index de78dec8e2..0625b2eeb0 100644
--- a/web/src/lib/chat/fetchChatData.ts
+++ b/web/src/lib/chat/fetchChatData.ts
@@ -20,13 +20,17 @@ import { LLMProviderDescriptor } from "@/app/admin/models/llm/interfaces";
 import { Folder } from "@/app/chat/folders/interfaces";
 import { personaComparator } from "@/app/admin/assistants/lib";
 import { cookies } from "next/headers";
-import { DOCUMENT_SIDEBAR_WIDTH_COOKIE_NAME } from "@/components/resizable/contants";
+import {
+  SIDEBAR_TOGGLED_COOKIE_NAME,
+  DOCUMENT_SIDEBAR_WIDTH_COOKIE_NAME,
+} from "@/components/resizable/contants";
 import { hasCompletedWelcomeFlowSS } from "@/components/initialSetup/welcome/WelcomeModalWrapper";
 import { fetchAssistantsSS } from "../assistants/fetchAssistantsSS";
 
 interface FetchChatDataResult {
   user: User | null;
   chatSessions: ChatSession[];
+
   ccPairs: CCPairBasicInfo[];
   availableSources: ValidSources[];
   documentSets: DocumentSet[];
@@ -36,6 +40,7 @@ interface FetchChatDataResult {
   folders: Folder[];
   openedFolders: Record<string, boolean>;
   defaultPersonaId?: number;
+  toggleSidebar: boolean;
   finalDocumentSidebarInitialWidth?: number;
   shouldShowWelcomeModal: boolean;
   shouldDisplaySourcesIncompleteModal: boolean;
@@ -81,6 +86,7 @@ export async function fetchChatData(searchParams: {
     string | null,
   ];
   const chatSessionsResponse = results[5] as Response | null;
+
   const tagsResponse = results[6] as Response | null;
   const llmProviders = (results[7] || []) as LLMProviderDescriptor[];
   const foldersResponse = results[8] as Response | null; // Handle folders result
@@ -152,6 +158,12 @@ export async function fetchChatData(searchParams: {
   const documentSidebarCookieInitialWidth = cookies().get(
     DOCUMENT_SIDEBAR_WIDTH_COOKIE_NAME
   );
+  const sidebarToggled = cookies().get(SIDEBAR_TOGGLED_COOKIE_NAME);
+
+  const toggleSidebar = sidebarToggled
+    ? sidebarToggled.value.toLocaleLowerCase() == "true" || false
+    : false;
+
   const finalDocumentSidebarInitialWidth = documentSidebarCookieInitialWidth
     ? parseInt(documentSidebarCookieInitialWidth.value)
     : undefined;
@@ -199,6 +211,7 @@ export async function fetchChatData(searchParams: {
     openedFolders,
     defaultPersonaId,
     finalDocumentSidebarInitialWidth,
+    toggleSidebar,
     shouldShowWelcomeModal,
     shouldDisplaySourcesIncompleteModal,
   };
diff --git a/web/src/lib/constants.ts b/web/src/lib/constants.ts
index b5a31394b6..2212d4e89c 100644
--- a/web/src/lib/constants.ts
+++ b/web/src/lib/constants.ts
@@ -22,6 +22,7 @@ export const GOOGLE_DRIVE_AUTH_IS_ADMIN_COOKIE_NAME =
   "google_drive_auth_is_admin";
 
 export const SEARCH_TYPE_COOKIE_NAME = "search_type";
+export const AGENTIC_SEARCH_TYPE_COOKIE_NAME = "agentic_type";
 
 export const SIDEBAR_WIDTH_CONST = "350px";
 export const SIDEBAR_WIDTH = `w-[350px]`;
@@ -45,3 +46,6 @@ export const EE_ENABLED =
 export const CUSTOM_ANALYTICS_ENABLED = process.env.CUSTOM_ANALYTICS_SECRET_KEY
   ? true
   : false;
+
+export const DISABLE_AGENTIC_SEARCH =
+  process.env.DISABLE_AGENTIC_SEARCH?.toLowerCase() === "true";
diff --git a/web/src/lib/documentUtils.ts b/web/src/lib/documentUtils.ts
index 0d412218a3..32bd051d21 100644
--- a/web/src/lib/documentUtils.ts
+++ b/web/src/lib/documentUtils.ts
@@ -1,10 +1,18 @@
 import { DanswerDocument } from "./search/interfaces";
 
-export function removeDuplicateDocs(documents: DanswerDocument[]) {
+export function removeDuplicateDocs(
+  documents: DanswerDocument[],
+  agentic?: boolean,
+  relevance?: any
+) {
   const seen = new Set<string>();
   const output: DanswerDocument[] = [];
   documents.forEach((document) => {
-    if (document.document_id && !seen.has(document.document_id)) {
+    if (
+      document.document_id &&
+      !seen.has(document.document_id) &&
+      (!agentic || (agentic && relevance && relevance[document.document_id]))
+    ) {
       output.push(document);
       seen.add(document.document_id);
     }
diff --git a/web/src/lib/search/interfaces.ts b/web/src/lib/search/interfaces.ts
index 5b50ab0638..fbf14f7810 100644
--- a/web/src/lib/search/interfaces.ts
+++ b/web/src/lib/search/interfaces.ts
@@ -45,13 +45,23 @@ export interface DanswerDocument {
   boost: number;
   hidden: boolean;
   score: number;
+  chunk_ind: number;
   match_highlights: string[];
   metadata: { [key: string]: string };
   updated_at: string | null;
   db_doc_id?: number;
   is_internet: boolean;
+  validationState?: null | "good" | "bad";
 }
 
+export interface SearchDanswerDocument extends DanswerDocument {
+  is_relevant: boolean;
+  relevance_explanation: string;
+}
+
+export interface FilteredDanswerDocument extends DanswerDocument {
+  included: boolean;
+}
 export interface DocumentInfoPacket {
   top_documents: DanswerDocument[];
   predicted_flow: FlowType | null;
@@ -60,8 +70,17 @@ export interface DocumentInfoPacket {
   favor_recent: boolean;
 }
 
-export interface LLMRelevanceFilterPacket {
-  relevant_chunk_indices: number[];
+export interface DocumentRelevance {
+  relevant: boolean;
+  content: string;
+}
+
+export interface Relevance {
+  [url: string]: DocumentRelevance;
+}
+
+export interface RelevanceChunk {
+  relevance_summaries: Relevance;
 }
 
 export interface SearchResponse {
@@ -69,10 +88,11 @@ export interface SearchResponse {
   suggestedFlowType: FlowType | null;
   answer: string | null;
   quotes: Quote[] | null;
-  documents: DanswerDocument[] | null;
+  documents: SearchDanswerDocument[] | null;
   selectedDocIndices: number[] | null;
   error: string | null;
   messageId: number | null;
+  additional_relevance?: Relevance;
 }
 
 export enum SourceCategory {
@@ -102,11 +122,13 @@ export interface Filters {
 
 export interface SearchRequestArgs {
   query: string;
+  agentic?: boolean;
   sources: SourceMetadata[];
   documentSets: string[];
   timeRange: DateRangePickerValue | null;
   tags: Tag[];
   persona: Persona;
+  updateDocumentRelevance: (relevance: any) => void;
   updateCurrentAnswer: (val: string) => void;
   updateQuotes: (quotes: Quote[]) => void;
   updateDocs: (documents: DanswerDocument[]) => void;
@@ -114,13 +136,20 @@ export interface SearchRequestArgs {
   updateSuggestedSearchType: (searchType: SearchType) => void;
   updateSuggestedFlowType: (flowType: FlowType) => void;
   updateError: (error: string) => void;
-  updateMessageId: (messageId: number) => void;
+  updateMessageAndThreadId: (
+    messageId: number,
+    chat_session_id: number
+  ) => void;
+  finishedSearching: () => void;
+  updateComments: (comments: any) => void;
   selectedSearchType: SearchType | null;
 }
 
 export interface SearchRequestOverrides {
   searchType?: SearchType;
   offset?: number;
+  overrideMessage?: string;
+  agentic?: boolean;
 }
 
 export interface ValidQuestionResponse {
diff --git a/web/src/lib/search/streamingQa.ts b/web/src/lib/search/streamingQa.ts
index 469b578bfa..5be67d6606 100644
--- a/web/src/lib/search/streamingQa.ts
+++ b/web/src/lib/search/streamingQa.ts
@@ -1,12 +1,15 @@
-import { BackendMessage } from "@/app/chat/interfaces";
+import {
+  BackendMessage,
+  LLMRelevanceFilterPacket,
+} from "@/app/chat/interfaces";
 import {
   AnswerPiecePacket,
   DanswerDocument,
   DocumentInfoPacket,
   ErrorMessagePacket,
-  LLMRelevanceFilterPacket,
   Quote,
   QuotesInfoPacket,
+  RelevanceChunk,
   SearchRequestArgs,
 } from "./interfaces";
 import { processRawChunkString } from "./streamingUtils";
@@ -19,6 +22,7 @@ export const searchRequestStreamed = async ({
   timeRange,
   tags,
   persona,
+  agentic,
   updateCurrentAnswer,
   updateQuotes,
   updateDocs,
@@ -26,11 +30,15 @@ export const searchRequestStreamed = async ({
   updateSuggestedFlowType,
   updateSelectedDocIndices,
   updateError,
-  updateMessageId,
+  updateMessageAndThreadId,
+  finishedSearching,
+  updateDocumentRelevance,
+  updateComments,
 }: SearchRequestArgs) => {
   let answer = "";
   let quotes: Quote[] | null = null;
   let relevantDocuments: DanswerDocument[] | null = null;
+
   try {
     const filters = buildFilters(sources, documentSets, timeRange, tags);
 
@@ -45,6 +53,7 @@ export const searchRequestStreamed = async ({
       body: JSON.stringify({
         messages: [threadMessage],
         persona_id: persona.id,
+        agentic,
         prompt_id: persona.id === 0 ? null : persona.prompts[0]?.id,
         retrieval_options: {
           run_search: "always",
@@ -52,17 +61,21 @@ export const searchRequestStreamed = async ({
           filters: filters,
           enable_auto_detect_filters: false,
         },
+        evaluate_response: true,
+        skip_gen_ai_answer_generation: true,
       }),
       headers: {
         "Content-Type": "application/json",
       },
     });
+
     const reader = response.body?.getReader();
     const decoder = new TextDecoder("utf-8");
 
     let previousPartialChunk: string | null = null;
     while (true) {
       const rawChunk = await reader?.read();
+
       if (!rawChunk) {
         throw new Error("Unable to process chunk");
       }
@@ -79,6 +92,7 @@ export const searchRequestStreamed = async ({
         | DocumentInfoPacket
         | LLMRelevanceFilterPacket
         | BackendMessage
+        | RelevanceChunk
       >(decoder.decode(value, { stream: true }), previousPartialChunk);
       if (!completedChunks.length && !partialChunk) {
         break;
@@ -86,6 +100,13 @@ export const searchRequestStreamed = async ({
       previousPartialChunk = partialChunk as string | null;
       completedChunks.forEach((chunk) => {
         // check for answer peice / end of answer
+
+        if (Object.hasOwn(chunk, "relevance_summaries")) {
+          const relevanceChunk = chunk as RelevanceChunk;
+          const responseTaken = relevanceChunk.relevance_summaries;
+          updateDocumentRelevance(relevanceChunk.relevance_summaries);
+        }
+
         if (Object.hasOwn(chunk, "answer_piece")) {
           const answerPiece = (chunk as AnswerPiecePacket).answer_piece;
           if (answerPiece !== null) {
@@ -150,18 +171,20 @@ export const searchRequestStreamed = async ({
           return;
         }
 
-        // check for message ID section
+        // Check for the final chunk
         if (Object.hasOwn(chunk, "message_id")) {
-          updateMessageId((chunk as BackendMessage).message_id);
-          return;
+          const backendChunk = chunk as BackendMessage;
+          updateComments(backendChunk.comments);
+          updateMessageAndThreadId(
+            backendChunk.message_id,
+            backendChunk.chat_session_id
+          );
         }
-
-        // should never reach this
-        console.log("Unknown chunk:", chunk);
       });
     }
   } catch (err) {
     console.error("Fetch error:", err);
   }
+
   return { answer, quotes, relevantDocuments };
 };
diff --git a/web/src/lib/sources.ts b/web/src/lib/sources.ts
index 3493f951cb..66b99ca516 100644
--- a/web/src/lib/sources.ts
+++ b/web/src/lib/sources.ts
@@ -35,10 +35,12 @@ import {
   S3Icon,
   OCIStorageIcon,
   GoogleStorageIcon,
+  ColorSlackIcon,
 } from "@/components/icons/icons";
 import { ValidSources } from "./types";
 import { SourceCategory, SourceMetadata } from "./search/interfaces";
 import { Persona } from "@/app/admin/assistants/interfaces";
+import { FaAccessibleIcon, FaSlack } from "react-icons/fa";
 
 interface PartialSourceMetadata {
   icon: React.FC<{ size?: number; className?: string }>;
@@ -62,7 +64,7 @@ const SOURCE_METADATA_MAP: SourceMap = {
     category: SourceCategory.ImportedKnowledge,
   },
   slack: {
-    icon: SlackIcon,
+    icon: ColorSlackIcon,
     displayName: "Slack",
     category: SourceCategory.AppConnection,
   },
diff --git a/web/tailwind-themes/tailwind.config.js b/web/tailwind-themes/tailwind.config.js
index e81f46dfd5..6586192b4a 100644
--- a/web/tailwind-themes/tailwind.config.js
+++ b/web/tailwind-themes/tailwind.config.js
@@ -1,4 +1,5 @@
 /** @type {import('tailwindcss').Config} */
+
 module.exports = {
   darkMode: "class",
   content: [
@@ -12,13 +13,34 @@ module.exports = {
     // tremor
     "./node_modules/@tremor/**/*.{js,ts,jsx,tsx}",
   ],
+
   theme: {
     transparent: "transparent",
     current: "currentColor",
     extend: {
+      transitionProperty: {
+        spacing: "margin, padding",
+      },
+
+      keyframes: {
+        pulse: {
+          "0%, 100%": { opacity: 0.9 },
+          "50%": { opacity: 0.4 },
+        },
+      },
+      animation: {
+        "fade-in-up": "fadeInUp 0.5s ease-out",
+
+        pulse: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+      },
+
+      gradientColorStops: {
+        "neutral-10": "#e5e5e5 5%",
+      },
       screens: {
         "2xl": "1420px",
         "3xl": "1700px",
+        "4xl": "2000px",
       },
       fontFamily: {
         sans: ["var(--font-inter)"],
@@ -35,32 +57,53 @@ module.exports = {
       },
       maxWidth: {
         "document-sidebar": "1000px",
+        "message-max": "725px",
+        "searchbar-max": "750px",
       },
       colors: {
         // background
-        background: "#f9fafb", // gray-50
-        "background-subtle": "#e5e7eb", // gray-200
+
+        "background-search": "#ffffff", // white
+
+        background: "#fafafa", // 50
+        "background-100": "#f5f5f5", // neutral-100
+        "background-125": "#F1F2F4", // gray-125
+        "background-150": "#EAEAEA", // gray-150
+        "background-200": "#e5e5e5", // neutral-200
+        "background-300": "#d4d4d4", // neutral-300
+        "background-400": "#a3a3a3", // neutral-400
+        "background-800": "#262626", // neutral-800
+        "background-900": "#111827", // gray-900
+        "background-inverted": "#000000", // black
+
         "background-emphasis": "#f6f7f8",
         "background-strong": "#eaecef",
-        "background-search": "#ffffff",
-        "background-custom-header": "#f3f4f6",
-        "background-inverted": "#000000",
-        "background-weak": "#f3f4f6", // gray-100
-        "background-dark": "#111827", // gray-900
 
         // text or icons
-        light: "#e5e7eb", // gray-200
-        link: "#3b82f6", // blue-500
-        "link-hover": "#1d4ed8", // blue-700
+        "text-50": "#fafafa", // 50, neutral-50
+        "text-100": "#f5f5f5", // lighter, neutral-100
+        "text-200": "#e5e5e5", // light, neutral-200
+        "text-300": "#d4d4d4", // stronger, neutral-300
+        "text-400": "#a3a3a3", // medium, neutral-400
+        "text-500": "#737373", // darkMedium, neutral-500
+        "text-600": "#525252", // dark, neutral-600
+        "text-700": "#404040", // solid, neutral-700
+        "text-800": "#262626", // solidDark, neutral-800
+
         subtle: "#6b7280", // gray-500
         default: "#4b5563", // gray-600
         emphasis: "#374151", // gray-700
         strong: "#111827", // gray-900
+
+        link: "#3b82f6", // blue-500
+        "link-hover": "#1d4ed8", // blue-700
         inverted: "#ffffff", // white
+
+        // one offs
         error: "#ef4444", // red-500
         success: "#059669", // emerald-600
         alert: "#f59e0b", // amber-600
-        accent: "#6671d0",
+        accent: "#6366F1", // indigo-500
 
         // borders
         border: "#e5e7eb", // gray-200
@@ -70,9 +113,11 @@ module.exports = {
 
         // hover
         "hover-light": "#f3f4f6", // gray-100
+        "hover-lightish": "#EAEBEF", // gray-160
+
         hover: "#e5e7eb", // gray-200
         "hover-emphasis": "#d1d5db", // gray-300
-        "accent-hover": "#5964c2",
+        "accent-hover": "#4F46E5",
 
         // keyword highlighting
         highlight: {
@@ -92,11 +137,11 @@ module.exports = {
         },
 
         // bubbles in chat for each "user"
-        user: "#fb7185", // yellow-400
+        user: "#F1F2F4", // near gray-100
         ai: "#60a5fa", // blue-400
 
         // for display documents
-        document: "#ec4899", // pink-500
+        document: "#f43f5e", // pink-500
 
         // light mode
         tremor: {