diff --git a/Dockerfile b/Dockerfile
index 5bbe9467f8..7a37802bf6 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -45,16 +45,16 @@ COPY src/backend src/backend
 COPY docker_scripts/ ${PG_APP_HOME}/
 
 # Install frontend dependencies
-WORKDIR /workspace/src/interfaces/coral_web
-COPY src/interfaces/coral_web/src ./src
-COPY src/interfaces/coral_web/public ./public
-COPY src/interfaces/coral_web/next.config.mjs .
-COPY src/interfaces/coral_web/tsconfig.json .
-COPY src/interfaces/coral_web/tailwind.config.js .
-COPY src/interfaces/coral_web/postcss.config.js .
-COPY src/interfaces/coral_web/package.json src/interfaces/coral_web/yarn.lock* src/interfaces/coral_web/package-lock.json* src/interfaces/coral_web/pnpm-lock.yaml* ./
-COPY src/interfaces/coral_web/.env.development .
-COPY src/interfaces/coral_web/.env.production .
+WORKDIR /workspace/src/interfaces/assistants_web
+COPY src/interfaces/assistants_web/src ./src
+COPY src/interfaces/assistants_web/public ./public
+COPY src/interfaces/assistants_web/next.config.mjs .
+COPY src/interfaces/assistants_web/tsconfig.json .
+COPY src/interfaces/assistants_web/tailwind.config.js .
+COPY src/interfaces/assistants_web/postcss.config.js .
+COPY src/interfaces/assistants_web/package.json src/interfaces/assistants_web/yarn.lock* src/interfaces/assistants_web/package-lock.json* src/interfaces/assistants_web/pnpm-lock.yaml* ./
+COPY src/interfaces/assistants_web/.env.development .
+COPY src/interfaces/assistants_web/.env.production .
 
 ENV NEXT_PUBLIC_API_HOSTNAME='/api'
 RUN npm install \
diff --git a/Makefile b/Makefile
index 32d5244075..b52d5d63da 100644
--- a/Makefile
+++ b/Makefile
@@ -44,7 +44,7 @@ exec-db:
 
 .PHONY: migration
 migration:
-	docker compose run --build backend alembic -c src/backend/alembic.ini revision --autogenerate
+	docker compose run --build backend alembic -c src/backend/alembic.ini revision --autogenerate -m "$(message)"
 
 .PHONY: migrate
 migrate:
@@ -100,19 +100,19 @@ win-first-run:
 
 .PHONY: format-web
 format-web:
-	cd src/interfaces/coral_web && npm run format:write
+	cd src/interfaces/assistants_web && npm run format:write
 
 .PHONY: generate-client-web
 generate-client-web:
-	cd src/interfaces/coral_web && npm run generate:client && npm run format:write
+	cd src/interfaces/assistants_web && npm run generate:client && npm run format:write
 
 .PHONY: install-web
 install-web:
-	cd src/interfaces/coral_web && npm install
+	cd src/interfaces/assistants_web && npm install
 
 .PHONY: build-web
 build-web:
-	cd src/interfaces/coral_web && npm run build
+	cd src/interfaces/assistants_web && npm run build
 
 .PHONY: test-db
 test-db:
diff --git a/docker-compose.yml b/docker-compose.yml
index 878d6ffadd..68e22f2435 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -141,7 +141,7 @@ services:
   frontend:
     build:
       target: ${BUILD_TARGET:-prod}
-      context: ./src/interfaces/coral_web
+      context: ./src/interfaces/assistants_web
       dockerfile: Dockerfile
     # Set environment variables directly in the docker-compose file
     environment:
@@ -158,7 +158,7 @@ services:
     develop:
       watch:
         - action: sync
-          path: ./src/interfaces/coral_web
+          path: ./src/interfaces/assistants_web
           target: /app
           ignore:
             - node_modules/
diff --git a/docker_scripts/functions b/docker_scripts/functions
index ceb4d2c94d..658edb87c1 100644
--- a/docker_scripts/functions
+++ b/docker_scripts/functions
@@ -270,14 +270,14 @@ run_backend_poetry() {
 }
 
 run_frontend_proxy() {
-  cd /workspace/src/interfaces/coral_web
+  cd /workspace/src/interfaces/assistants_web
   echo "Starting Frontend..."
   pm2 start npm -- run -- start:single-docker-proxy
   echo "Frontend started..."
 }
 
 run_frontend() {
-  cd /workspace/src/interfaces/coral_web
+  cd /workspace/src/interfaces/assistants_web
   echo "Building Frontend"
   npm run next:build
   echo "Starting Frontend..."
diff --git a/src/backend/alembic/versions/2024_08_21_08bcb9a24d9b_remove_file_path.py b/src/backend/alembic/versions/2024_08_21_08bcb9a24d9b_remove_file_path.py
new file mode 100644
index 0000000000..13d7518f68
--- /dev/null
+++ b/src/backend/alembic/versions/2024_08_21_08bcb9a24d9b_remove_file_path.py
@@ -0,0 +1,29 @@
+"""Remove file path
+
+Revision ID: 08bcb9a24d9b
+Revises: c301506b3676
+Create Date: 2024-08-21 15:59:18.678457
+
+"""
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision: str = '08bcb9a24d9b'
+down_revision: Union[str, None] = 'c301506b3676'
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_column('files', 'file_path')
+    # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.add_column('files', sa.Column('file_path', sa.VARCHAR(), autoincrement=False, nullable=False))
+    # ### end Alembic commands ###
diff --git a/src/backend/chat/custom/tool_calls.py b/src/backend/chat/custom/tool_calls.py
index e10fa5b713..d07732d6e3 100644
--- a/src/backend/chat/custom/tool_calls.py
+++ b/src/backend/chat/custom/tool_calls.py
@@ -78,7 +78,16 @@ async def _call_tool_async(
 ) -> List[Dict[str, Any]]:
     tool = AVAILABLE_TOOLS.get(tool_call["name"])
     if not tool:
-        return []
+        logger.info(
+            event=f"[Custom Chat] Tool not included in tools parameter: {tool_call['name']}",
+        )
+        outputs = [
+            {
+                "call": tool_call,
+                "outputs": [{"text": f"Tool {tool_call['name']} not found", "success": False}],
+            }
+        ]
+        return outputs
 
     try:
         outputs = await tool.implementation().call(
diff --git a/src/backend/config/settings.py b/src/backend/config/settings.py
index 5512b054f3..63f92a2453 100644
--- a/src/backend/config/settings.py
+++ b/src/backend/config/settings.py
@@ -146,7 +146,7 @@ class CompassSettings(BaseSettings, BaseModel):
     )
 
 
-class WebSearchSettings(BaseSettings, BaseModel):
+class TavilySearchSettings(BaseSettings, BaseModel):
     model_config = SETTINGS_CONFIG
     api_key: Optional[str] = Field(
         default=None, validation_alias=AliasChoices("TAVILY_API_KEY", "api_key")
@@ -185,7 +185,7 @@ class ToolSettings(BaseSettings, BaseModel):
     python_interpreter: Optional[PythonToolSettings] = Field(
         default=PythonToolSettings()
     )
-    web_search: Optional[WebSearchSettings] = Field(default=WebSearchSettings())
+    tavily: Optional[TavilySearchSettings] = Field(default=TavilySearchSettings())
     wolfram_alpha: Optional[WolframAlphaSettings] = Field(
         default=WolframAlphaSettings()
     )
diff --git a/src/backend/crud/agent_tool_metadata.py b/src/backend/crud/agent_tool_metadata.py
index 43c3518c5b..6db3f58f8c 100644
--- a/src/backend/crud/agent_tool_metadata.py
+++ b/src/backend/crud/agent_tool_metadata.py
@@ -25,7 +25,7 @@ def create_agent_tool_metadata(
 
 def get_agent_tool_metadata_by_id(
     db: Session, agent_tool_metadata_id: str
-) -> AgentToolMetadata:
+) -> AgentToolMetadata | None:
     """
     Get a agent tool metadata by its ID.
 
@@ -61,6 +61,35 @@ def get_all_agent_tool_metadata_by_agent_id(
     )
 
 
+def get_agent_tool_metadata(
+    db: Session,
+    agent_id: str,
+    tool_name: str,
+    user_id: str,
+) -> AgentToolMetadata | None:
+    """
+    Get a agent tool metadata.
+
+    Args:
+        db (Session): Database session.
+        agent_id (str): Agent ID.
+        tool_name (str): Tool name.
+        user_id (str): User ID.
+
+    Returns:
+        AgentToolMetadata: Agent tool metadata.
+    """
+    return (
+        db.query(AgentToolMetadata)
+        .filter(
+            AgentToolMetadata.agent_id == agent_id,
+            AgentToolMetadata.tool_name == tool_name,
+            AgentToolMetadata.user_id == user_id,
+        )
+        .first()
+    )
+
+
 def update_agent_tool_metadata(
     db: Session,
     agent_tool_metadata: AgentToolMetadata,
diff --git a/src/backend/database_models/file.py b/src/backend/database_models/file.py
index 522971e640..6ce4b1f81c 100644
--- a/src/backend/database_models/file.py
+++ b/src/backend/database_models/file.py
@@ -9,7 +9,6 @@ class File(Base):
 
     user_id: Mapped[str] = mapped_column(String, nullable=True)
     file_name: Mapped[str]
-    file_path: Mapped[str]
     file_size: Mapped[int] = mapped_column(default=0)
     file_content: Mapped[str] = mapped_column(default="")
 
diff --git a/src/backend/model_deployments/bedrock.py b/src/backend/model_deployments/bedrock.py
index adb1f5a1fe..dd288556bf 100644
--- a/src/backend/model_deployments/bedrock.py
+++ b/src/backend/model_deployments/bedrock.py
@@ -33,10 +33,6 @@ class BedrockDeployment(BaseDeployment):
 
     def __init__(self, **kwargs: Any):
         self.client = cohere.BedrockClient(
-            # TODO: remove hardcoded models once the SDK is updated
-            chat_model="cohere.command-r-plus-v1:0",
-            embed_model="cohere.embed-multilingual-v3",
-            generate_model="cohere.command-text-v14",
             aws_access_key=get_model_config_var(
                 BEDROCK_ACCESS_KEY_ENV_VAR, BedrockDeployment.access_key, **kwargs
             ),
diff --git a/src/backend/routers/agent.py b/src/backend/routers/agent.py
index 4f01b3e180..8b57be96ff 100644
--- a/src/backend/routers/agent.py
+++ b/src/backend/routers/agent.py
@@ -138,7 +138,7 @@ async def create_agent(
                 }
             )
             if file_ids:
-                await consolidate_agent_files_in_compass(file_ids, created_agent.id)
+                await consolidate_agent_files_in_compass(file_ids, created_agent.id, ctx)
 
         if deployment_db and model_db:
             deployment_config = (
@@ -384,6 +384,43 @@ async def update_agent(
     return agent
 
 
+@router.delete("/{agent_id}", response_model=DeleteAgent)
+async def delete_agent(
+    agent_id: str,
+    session: DBSessionDep,
+    ctx: Context = Depends(get_context),
+) -> DeleteAgent:
+    """
+    Delete an agent by ID.
+
+    Args:
+        agent_id (str): Agent ID.
+        session (DBSessionDep): Database session.
+        ctx (Context): Context object.
+
+    Returns:
+        DeleteAgent: Empty response.
+
+    Raises:
+        HTTPException: If the agent with the given ID is not found.
+    """
+    user_id = ctx.get_user_id()
+    ctx.with_event_type(MetricsMessageType.ASSISTANT_DELETED)
+    agent = validate_agent_exists(session, agent_id, user_id)
+    agent_schema = Agent.model_validate(agent)
+    ctx.with_agent(agent_schema)
+    ctx.with_metrics_agent(agent_to_metrics_agent(agent))
+
+    deleted = agent_crud.delete_agent(session, agent_id, user_id)
+    if not deleted:
+        raise HTTPException(status_code=401, detail="Could not delete Agent.")
+
+    return DeleteAgent()
+
+
+# Agent Tool Metadata endpoints
+
+
 async def handle_tool_metadata_update(
     agent: Agent,
     new_agent: Agent,
@@ -453,43 +490,6 @@ async def update_or_create_tool_metadata(
         create_agent_tool_metadata(session, agent.id, create_metadata_req, ctx)
 
 
-@router.delete("/{agent_id}", response_model=DeleteAgent)
-async def delete_agent(
-    agent_id: str,
-    session: DBSessionDep,
-    ctx: Context = Depends(get_context),
-) -> DeleteAgent:
-    """
-    Delete an agent by ID.
-
-    Args:
-        agent_id (str): Agent ID.
-        session (DBSessionDep): Database session.
-        ctx (Context): Context object.
-
-    Returns:
-        DeleteAgent: Empty response.
-
-    Raises:
-        HTTPException: If the agent with the given ID is not found.
-    """
-    user_id = ctx.get_user_id()
-    ctx.with_event_type(MetricsMessageType.ASSISTANT_DELETED)
-    agent = validate_agent_exists(session, agent_id, user_id)
-    agent_schema = Agent.model_validate(agent)
-    ctx.with_agent(agent_schema)
-    ctx.with_metrics_agent(agent_to_metrics_agent(agent))
-
-    deleted = agent_crud.delete_agent(session, agent_id, user_id)
-    if not deleted:
-        raise HTTPException(status_code=401, detail="Could not delete Agent.")
-
-    return DeleteAgent()
-
-
-# Tool Metadata Endpoints
-
-
 @router.get("/{agent_id}/tool-metadata", response_model=list[AgentToolMetadataPublic])
 async def list_agent_tool_metadata(
     agent_id: str, session: DBSessionDep, ctx: Context = Depends(get_context)
@@ -539,7 +539,7 @@ def create_agent_tool_metadata(
         ctx (Context): Context object.
 
     Returns:
-        AgentToolMetadata: Created agent tool metadata.
+        AgentToolMetadataPublic: Created agent tool metadata.
 
     Raises:
         HTTPException: If the agent tool metadata creation fails.
diff --git a/src/backend/schemas/file.py b/src/backend/schemas/file.py
index ec66475848..6ca9cf114b 100644
--- a/src/backend/schemas/file.py
+++ b/src/backend/schemas/file.py
@@ -1,4 +1,5 @@
 import datetime
+from typing import Optional
 
 from pydantic import BaseModel, Field
 
@@ -9,10 +10,9 @@ class File(BaseModel):
     updated_at: datetime.datetime
 
     user_id: str
-    conversation_id: str
-    file_content: str
+    conversation_id: Optional[str] = ""
+    file_content: Optional[str] = ""
     file_name: str
-    file_path: str
     file_size: int = Field(default=0, ge=0)
 
     class Config:
@@ -26,7 +26,6 @@ class ConversationFilePublic(BaseModel):
 
     conversation_id: str
     file_name: str
-    file_path: str
     file_size: int = Field(default=0, ge=0)
 
 
@@ -37,7 +36,6 @@ class AgentFilePublic(BaseModel):
     updated_at: datetime.datetime
 
     file_name: str
-    file_path: str
     file_size: int = Field(default=0, ge=0)
 
 class ListConversationFile(ConversationFilePublic):
diff --git a/src/backend/services/chat.py b/src/backend/services/chat.py
index 515497aae6..e3aa5830da 100644
--- a/src/backend/services/chat.py
+++ b/src/backend/services/chat.py
@@ -44,7 +44,6 @@
     StreamToolResult,
     ToolInputType,
 )
-from backend.schemas.cohere_chat import CohereChatRequest
 from backend.schemas.context import Context
 from backend.schemas.conversation import UpdateConversationRequest
 from backend.schemas.search_query import SearchQuery
@@ -86,17 +85,12 @@ def process_chat(
                 status_code=404, detail=f"Agent with ID {agent_id} not found."
             )
 
-        if chat_request.tools:
-            for tool in chat_request.tools:
-                if tool.name not in agent.tools:
-                    raise HTTPException(
-                        status_code=404,
-                        detail=f"Tool {tool.name} not found in agent {agent.id}",
-                    )
+        # if tools are not provided in the chat request, use the agent's tools
+        if not chat_request.tools:
+            chat_request.tools = [Tool(name=tool) for tool in agent.tools]
 
         # Set the agent settings in the chat request
         chat_request.preamble = agent.preamble
-        chat_request.tools = [Tool(name=tool) for tool in agent.tools]
 
     should_store = chat_request.chat_history is None and not is_custom_tool_call(
         chat_request
@@ -132,14 +126,13 @@ def process_chat(
         id=str(uuid4()),
     )
 
-    if isinstance(chat_request, CohereChatRequest):
-        if should_store:
-            attach_files_to_messages(
-                session,
-                user_id,
-                user_message.id,
-                chat_request.file_ids,
-            )
+    if should_store:
+        attach_files_to_messages(
+            session,
+            user_id,
+            user_message.id,
+            chat_request.file_ids
+        )
 
     chat_history = create_chat_history(
         conversation, next_message_position, chat_request
diff --git a/src/backend/services/file.py b/src/backend/services/file.py
index 16d19585ce..69518a6e51 100644
--- a/src/backend/services/file.py
+++ b/src/backend/services/file.py
@@ -68,12 +68,18 @@ def get_compass():
 
     if compass is None:
         try:
-            compass = Compass()
+            compass = Compass(
+                compass_api_url=Settings().compass.api_url,
+                compass_parser_url=Settings().compass.parser_url,
+                compass_username=Settings().compass.username,
+                compass_password=Settings().compass.password,
+            )
         except Exception as e:
             logger.error(
                 event=f"[Compass File Service] Error initializing Compass: {e}"
             )
             raise e
+
     return compass
 
 
@@ -157,7 +163,7 @@ async def create_agent_files(
             Since agents are created after the files are upload we index files into dummy indices first
             We later consolidate them in consolidate_agent_files_in_compass() to a singular index when an agent is created.
             """
-            uploaded_files = await insert_files_in_compass(files, ctx, user_id)
+            uploaded_files = await insert_files_in_compass(files, user_id, ctx)
         else:
             uploaded_files = await insert_files_in_db(session, files, user_id)
 
@@ -430,7 +436,6 @@ def get_files_in_compass(
                 id=file_id,
                 file_name=fetched_doc["file_name"],
                 file_size=fetched_doc["file_size"],
-                file_path=fetched_doc["file_path"],
                 file_content=fetched_doc["text"],
                 user_id=user_id,
                 created_at=datetime.fromisoformat(fetched_doc["created_at"]),
@@ -460,12 +465,21 @@ async def consolidate_agent_files_in_compass(
     compass = get_compass()
 
     try:
-        compass.invoke(
+        logger.info(
+            event="[Compass File Service] Creating index for agent files",
+            agent_id=agent_id
+        )
+        response = compass.invoke(
             action=Compass.ValidActions.CREATE_INDEX,
             parameters={
                 "index": agent_id,
             },
         )
+        logger.info(
+            event="[Compass File Service] Finished creating index for agent files",
+            agent_id=agent_id,
+            response=response
+        )
     except Exception as e:
         logger.Error(
             event=f"[Compass File Service] Error creating index for agent files: {agent_id}, error: {e}"
@@ -481,17 +495,16 @@ async def consolidate_agent_files_in_compass(
                 action=Compass.ValidActions.GET_DOCUMENT,
                 parameters={"index": file_id, "file_id": file_id},
             ).result["doc"]["content"]
-            compass().invoke(
+            compass.invoke(
                 action=Compass.ValidActions.CREATE,
                 parameters={
                     "index": agent_id,
                     "file_id": file_id,
                     "file_bytes": fetched_doc["text"],
-                    "filename": fetched_doc["file_name"],
+                    "file_extension": get_file_extension(fetched_doc["file_name"]),
                     "custom_context": {
                         "file_id": file_id,
                         "file_name": fetched_doc["file_name"],
-                        "file_path": fetched_doc["file_path"],
                         "file_size": fetched_doc["file_size"],
                         "user_id": fetched_doc["user_id"],
                         "created_at": fetched_doc["created_at"],
@@ -508,7 +521,7 @@ async def consolidate_agent_files_in_compass(
             )
             # Remove the temporary file index entry
             compass.invoke(
-                action=Compass.ValidActions.DELETE_INDEX, parameters={"index": agent_id}
+                action=Compass.ValidActions.DELETE_INDEX, parameters={"index": file_id}
             )
         except Exception as e:
             logger.error(
@@ -570,11 +583,10 @@ async def insert_files_in_compass(
                     "index": new_file_id if index is None else index,
                     "file_id": new_file_id,
                     "file_bytes": file_bytes,
-                    "filename": filename,
+                    "file_extension": get_file_extension(filename),
                     "custom_context": {
                         "file_id": new_file_id,
                         "file_name": filename,
-                        "file_path": filename,
                         "file_size": file.size,
                         "user_id": user_id,
                         "created_at": datetime.now().isoformat(),
@@ -596,7 +608,6 @@ async def insert_files_in_compass(
                 file_name=filename,
                 id=new_file_id,
                 file_size=file.size,
-                file_path=filename,
                 user_id=user_id,
                 created_at=datetime.now(),
                 updated_at=datetime.now(),
@@ -661,7 +672,6 @@ async def insert_files_in_db(
             FileModel(
                 file_name=filename,
                 file_size=file.size,
-                file_path=filename,
                 file_content=cleaned_content,
                 user_id=user_id,
             )
@@ -682,7 +692,6 @@ def attach_conversation_id_to_files(
                 conversation_id=conversation_id,
                 file_name=file.file_name,
                 file_size=file.file_size,
-                file_path=file.file_path,
                 user_id=file.user_id,
                 created_at=file.created_at,
                 updated_at=file.updated_at,
diff --git a/src/backend/tests/chat/test_tool_calls.py b/src/backend/tests/unit/chat/test_tool_calls.py
similarity index 98%
rename from src/backend/tests/chat/test_tool_calls.py
rename to src/backend/tests/unit/chat/test_tool_calls.py
index a91aa55928..f425336a8f 100644
--- a/src/backend/tests/chat/test_tool_calls.py
+++ b/src/backend/tests/unit/chat/test_tool_calls.py
@@ -9,7 +9,7 @@
 from backend.config.tools import AVAILABLE_TOOLS, ToolName
 from backend.schemas.tool import ManagedTool
 from backend.services.context import Context
-from backend.tests.model_deployments.mock_deployments import MockCohereDeployment
+from backend.tests.unit.model_deployments.mock_deployments import MockCohereDeployment
 from backend.tools.base import BaseTool
 
 
diff --git a/src/backend/tests/unit/crud/test_file.py b/src/backend/tests/unit/crud/test_file.py
index 7e562d026e..00102a750f 100644
--- a/src/backend/tests/unit/crud/test_file.py
+++ b/src/backend/tests/unit/crud/test_file.py
@@ -13,20 +13,17 @@ def conversation(session, user):
 def test_create_file(session, user):
     file_data = File(
         file_name="test.txt",
-        file_path="/tmp/test.txt",
         file_size=100,
         user_id=user.id,
     )
 
     file = file_crud.create_file(session, file_data)
     assert file.file_name == file_data.file_name
-    assert file.file_path == file_data.file_path
     assert file.file_size == file_data.file_size
     assert file.user_id == file_data.user_id
 
     file = file_crud.get_file(session, file.id, user.id)
     assert file.file_name == file_data.file_name
-    assert file.file_path == file_data.file_path
     assert file.file_size == file_data.file_size
     assert file.user_id == file_data.user_id
 
@@ -34,13 +31,11 @@ def test_create_file(session, user):
 def test_batch_create_files(session, user):
     file_data = File(
         file_name="test.txt",
-        file_path="/tmp/test.txt",
         file_size=100,
         user_id=user.id,
     )
     file_data2 = File(
         file_name="test2.txt",
-        file_path="/tmp/test2.txt",
         file_size=100,
         user_id=user.id,
     )
diff --git a/src/backend/tests/unit/factories/file.py b/src/backend/tests/unit/factories/file.py
index 8231b4be64..f7f0b56d13 100644
--- a/src/backend/tests/unit/factories/file.py
+++ b/src/backend/tests/unit/factories/file.py
@@ -11,5 +11,4 @@ class Meta:
 
     user_id = factory.Faker("uuid4")
     file_name = factory.Faker("file_name")
-    file_path = factory.Faker("file_path")
     file_size = factory.Faker("random_int", min=1, max=20000000)
diff --git a/src/backend/tests/unit/routers/test_chat.py b/src/backend/tests/unit/routers/test_chat.py
index f6ab15d855..6b74fefe54 100644
--- a/src/backend/tests/unit/routers/test_chat.py
+++ b/src/backend/tests/unit/routers/test_chat.py
@@ -266,7 +266,7 @@ def test_streaming_chat_with_existing_conversation_from_other_agent(
 def test_streaming_chat_with_tools_not_in_agent_tools(
     session_client_chat: TestClient, session_chat: Session, user: User
 ):
-    agent = get_factory("Agent", session_chat).create(user=user)
+    agent = get_factory("Agent", session_chat).create(user=user, tools=["wikipedia"])
     deployment = get_factory("Deployment", session_chat).create()
     model = get_factory("Model", session_chat).create(deployment=deployment)
     get_factory("AgentDeploymentModel", session_chat).create(
@@ -283,17 +283,45 @@ def test_streaming_chat_with_tools_not_in_agent_tools(
             "Deployment-Name": agent.deployment,
         },
         json={
-            "message": "Hello",
-            "max_tokens": 10,
+            "message": "Who is a tallest nba player",
             "tools": [{"name": "web_search"}],
             "agent_id": agent.id,
         },
     )
 
-    assert response.status_code == 404
-    assert response.json() == {
-        "detail": f"Tool web_search not found in agent {agent.id}"
-    }
+    assert response.status_code == 200
+    validate_chat_streaming_tool_cals_response(response, ["web_search"])
+
+
+@pytest.mark.skipif(not is_cohere_env_set, reason="Cohere API key not set")
+def test_streaming_chat_with_agent_tools_and_empty_request_tools(
+    session_client_chat: TestClient, session_chat: Session, user: User
+):
+    agent = get_factory("Agent", session_chat).create(user=user, tools=["web_search"])
+    deployment = get_factory("Deployment", session_chat).create()
+    model = get_factory("Model", session_chat).create(deployment=deployment)
+    get_factory("AgentDeploymentModel", session_chat).create(
+        agent=agent,
+        deployment=deployment,
+        model=model,
+        is_default_deployment=True,
+        is_default_model=True,
+    )
+    response = session_client_chat.post(
+        "/v1/chat-stream",
+        headers={
+            "User-Id": agent.user.id,
+            "Deployment-Name": agent.deployment,
+        },
+        json={
+            "message": "Who is a tallest NBA player",
+            "tools": [],
+            "agent_id": agent.id,
+        },
+    )
+
+    assert response.status_code == 200
+    validate_chat_streaming_tool_cals_response(response, ["web_search"])
 
 
 @pytest.mark.skipif(not is_cohere_env_set, reason="Cohere API key not set")
@@ -1065,6 +1093,26 @@ def validate_stream_end_event(
     return data["conversation_id"]
 
 
+def validate_chat_streaming_tool_cals_response(response: Any, tools: list) -> None:
+    data = []
+    for line in response.iter_lines():
+        if not line or ":ping" in line or ": ping" in line:
+            continue
+
+        # remove the 'data' prefix to make it a valid JSON
+        line = line.replace("data: ", "")
+        if "event" in line:
+            response_json = json.loads(line)
+            assert response_json["event"] in [e.value for e in StreamEvent]
+            if response_json["event"] == StreamEvent.TOOL_CALLS_GENERATION:
+                data.append(response_json["data"])
+
+    tool_calls_names = [tool['name'] for entry in data for tool in entry['tool_calls']]
+
+    # Check if all required tools are in the tool_names
+    assert all(tool in tool_calls_names for tool in tools)
+
+
 def is_valid_uuid(id: str) -> bool:
     try:
         uuid.UUID(id, version=4)
diff --git a/src/backend/tools/files.py b/src/backend/tools/files.py
index 8b50cb9abf..c153bdbc00 100644
--- a/src/backend/tools/files.py
+++ b/src/backend/tools/files.py
@@ -33,38 +33,36 @@ def compass_file_search(
         for file_id in file_ids
     ]
 
+    compass = get_compass()
+
     # Search conversation ID index
-    hits = (
-        get_compass()
-        .invoke(
+    search_results = compass.invoke(
             action=Compass.ValidActions.SEARCH,
             parameters={
                 "index": conversation_id,
                 "query": query,
                 "top_k": search_limit,
                 "filters": search_filters,
-            },
-        )
-        .result["hits"]
+        },
     )
-    results.extend(hits)
+
+    if search_results.result:
+        results.extend(search_results.result["hits"])
 
     # Search agent ID index
     if agent_id:
-        hits = (
-            get_compass()
-            .invoke(
-                action=Compass.ValidActions.SEARCH,
-                parameters={
-                    "index": agent_id,
-                    "query": query,
-                    "top_k": search_limit,
-                    "filters": search_filters,
-                },
-            )
-            .result["hits"]
+        search_results = compass.invoke(
+            action=Compass.ValidActions.SEARCH,
+            parameters={
+                "index": agent_id,
+                "query": query,
+                "top_k": search_limit,
+                "filters": search_filters,
+            },
         )
-        results.extend(hits)
+
+    if search_results.result:
+        results.extend(search_results.result["hits"])
 
     chunks = sorted(
         [
diff --git a/src/backend/tools/tavily.py b/src/backend/tools/tavily.py
index de2bfac4e4..52a20f6019 100644
--- a/src/backend/tools/tavily.py
+++ b/src/backend/tools/tavily.py
@@ -4,28 +4,65 @@
 from tavily import TavilyClient
 
 from backend.config.settings import Settings
+from backend.crud import agent_tool_metadata as agent_tool_metadata_crud
+from backend.database_models.database import DBSessionDep
 from backend.model_deployments.base import BaseDeployment
+from backend.schemas.context import Context
 from backend.tools.base import BaseTool
 
 
 class TavilyInternetSearch(BaseTool):
     NAME = "web_search"
-    TAVILY_API_KEY = Settings().tools.web_search.api_key
+    TAVILY_API_KEY = Settings().tools.tavily.api_key
+    POST_RERANK_MAX_RESULTS = 6
 
     def __init__(self):
         self.client = TavilyClient(api_key=self.TAVILY_API_KEY)
-        self.num_results = 6
 
     @classmethod
     def is_available(cls) -> bool:
         return cls.TAVILY_API_KEY is not None
 
+    def get_filtered_domains(self, session: DBSessionDep, ctx: Context) -> list[str]:
+        agent_id = ctx.get_agent_id()
+        user_id = ctx.get_user_id()
+
+        if not agent_id or not user_id:
+            # Default for Tavily is None
+            return []
+
+        agent_tool_metadata = agent_tool_metadata_crud.get_agent_tool_metadata(
+            db=session,
+            agent_id=agent_id,
+            tool_name=self.NAME,
+            user_id=user_id,
+        )
+
+        if not agent_tool_metadata:
+            # Default for Tavily is None
+            return []
+
+        return [
+            artifact["domain"]
+            for artifact in agent_tool_metadata.artifacts
+            if "domain" in artifact
+        ]
+
     async def call(
-        self, parameters: dict, ctx: Any, **kwargs: Any
+        self, parameters: dict, ctx: Any, session: DBSessionDep, **kwargs: Any
     ) -> List[Dict[str, Any]]:
+        # Gather search parameters
         query = parameters.get("query", "")
+        # Get domains set on Agent tool metadata artifacts
+        filter_domains = None
+        domains = self.get_filtered_domains(session, ctx)
+
+        if domains:
+            filter_domains = domains
+
+        # Do search
         result = self.client.search(
-            query=query, search_depth="advanced", include_raw_content=True
+            query=query, search_depth="advanced", include_raw_content=True, include_domains=filter_domains
         )
 
         if "results" not in result:
@@ -96,14 +133,14 @@ async def rerank_page_snippets(
                 seen_urls.append(result["url"])
                 reranked.append(result)
 
-        return reranked[: self.num_results]
+        return reranked[:self.POST_RERANK_MAX_RESULTS]
 
     def to_langchain_tool(self) -> TavilySearchResults:
         internet_search = TavilySearchResults()
         internet_search.name = "internet_search"
         internet_search.description = "Returns a list of relevant document snippets for a textual query retrieved from the internet."
 
-        # pydantic v1 base model
+        # Pydantic v1 base model
         from langchain_core.pydantic_v1 import BaseModel, Field
 
         class TavilySearchInput(BaseModel):
diff --git a/src/interfaces/assistants_web/.storybook/preview.tsx b/src/interfaces/assistants_web/.storybook/preview.tsx
index 29e0c9a914..91bcab9569 100644
--- a/src/interfaces/assistants_web/.storybook/preview.tsx
+++ b/src/interfaces/assistants_web/.storybook/preview.tsx
@@ -2,7 +2,7 @@ import type { Preview } from '@storybook/react';
 import { ThemeProvider } from 'next-themes';
 import React from 'react';
 
-import '../src/styles/main.css';
+import '@/styles/main.css';
 
 const preview: Preview = {
   decorators: [
diff --git a/src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/CompleteOauth.tsx b/src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/OauthCallback.tsx
similarity index 88%
rename from src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/CompleteOauth.tsx
rename to src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/OauthCallback.tsx
index facaad3c59..1c4e326c8e 100644
--- a/src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/CompleteOauth.tsx
+++ b/src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/OauthCallback.tsx
@@ -3,15 +3,14 @@
 import { useParams, useRouter, useSearchParams } from 'next/navigation';
 import { useEffect } from 'react';
 
-import { Text } from '@/components/Shared';
-import { useAuthConfig } from '@/hooks/authConfig';
-import { useSession } from '@/hooks/session';
+import { Text } from '@/components/UI';
+import { useAuthConfig, useSession } from '@/hooks';
 import { getQueryString } from '@/utils';
 
 /**
  * @description This page handles callbacks from OAuth providers and forwards the request to the backend.
  */
-const CompleteOauth: React.FC = () => {
+const OauthCallback: React.FC = () => {
   const router = useRouter();
   const params = useParams();
   const search = useSearchParams();
@@ -72,4 +71,4 @@ const CompleteOauth: React.FC = () => {
   );
 };
 
-export default CompleteOauth;
+export default OauthCallback;
diff --git a/src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/page.tsx b/src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/page.tsx
index 17dea70e53..9b8173f8f4 100644
--- a/src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/page.tsx
+++ b/src/interfaces/assistants_web/src/app/(auth)/auth/[strategy]/page.tsx
@@ -1,14 +1,14 @@
 import { NextPage } from 'next';
 import { Suspense } from 'react';
 
-import CompleteOauth from './CompleteOauth';
+import OauthCallback from './OauthCallback';
 
-const CompleteOauthPage: NextPage = () => {
+const OauthCallbackPage: NextPage = () => {
   return (
     <Suspense>
-      <CompleteOauth />
+      <OauthCallback />
     </Suspense>
   );
 };
 
-export default CompleteOauthPage;
+export default OauthCallbackPage;
diff --git a/src/interfaces/assistants_web/src/app/(auth)/layout.tsx b/src/interfaces/assistants_web/src/app/(auth)/layout.tsx
index 4f5756bde9..42bea08ac4 100644
--- a/src/interfaces/assistants_web/src/app/(auth)/layout.tsx
+++ b/src/interfaces/assistants_web/src/app/(auth)/layout.tsx
@@ -1,4 +1,4 @@
-import { WelcomePage } from '@/components/WelcomePage';
+import { WelcomePage } from '@/components/Auth';
 
 const AuthLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
   return <WelcomePage>{children}</WelcomePage>;
diff --git a/src/interfaces/assistants_web/src/app/(auth)/login/Login.tsx b/src/interfaces/assistants_web/src/app/(auth)/login/Login.tsx
index 799e2fc26f..bf5260f9a0 100644
--- a/src/interfaces/assistants_web/src/app/(auth)/login/Login.tsx
+++ b/src/interfaces/assistants_web/src/app/(auth)/login/Login.tsx
@@ -5,13 +5,9 @@ import { useMemo, useState } from 'react';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
 import { CohereUnauthorizedError, ListAuthStrategy } from '@/cohere-client';
-import { AuthLink } from '@/components/AuthLink';
-import { Button, Input, Text } from '@/components/Shared';
-import { OidcSSOButton } from '@/components/Welcome/OidcSSOButton';
-import { useAuthConfig } from '@/hooks/authConfig';
-import { useOidcAuthRoute } from '@/hooks/oidcAuthRoute';
-import { useSession } from '@/hooks/session';
-import { useNotify } from '@/hooks/toast';
+import { AuthLink, OidcSSOButton } from '@/components/Auth';
+import { Button, Input, Text } from '@/components/UI';
+import { useAuthConfig, useNotify, useOidcAuthRoute, useSession } from '@/hooks';
 import type { NoNullProperties } from '@/types/util';
 import { getQueryString, simpleEmailValidation } from '@/utils';
 
diff --git a/src/interfaces/assistants_web/src/app/(auth)/logout/Logout.tsx b/src/interfaces/assistants_web/src/app/(auth)/logout/Logout.tsx
index c42d276f07..59c7269bea 100644
--- a/src/interfaces/assistants_web/src/app/(auth)/logout/Logout.tsx
+++ b/src/interfaces/assistants_web/src/app/(auth)/logout/Logout.tsx
@@ -3,8 +3,8 @@
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 
-import { Text } from '@/components/Shared';
-import { useSession } from '@/hooks/session';
+import { Text } from '@/components/UI';
+import { useSession } from '@/hooks';
 
 /**
  * @description The login page supports logging in with an email and password.
diff --git a/src/interfaces/assistants_web/src/app/(auth)/register/Register.tsx b/src/interfaces/assistants_web/src/app/(auth)/register/Register.tsx
index 27eec2a8d0..b3fe361493 100644
--- a/src/interfaces/assistants_web/src/app/(auth)/register/Register.tsx
+++ b/src/interfaces/assistants_web/src/app/(auth)/register/Register.tsx
@@ -3,9 +3,9 @@
 import { useRouter, useSearchParams } from 'next/navigation';
 import { SubmitHandler, useForm } from 'react-hook-form';
 
-import { AuthLink } from '@/components/AuthLink';
-import { Button, Input, Text } from '@/components/Shared';
-import { useSession } from '@/hooks/session';
+import { AuthLink } from '@/components/Auth';
+import { Button, Input, Text } from '@/components/UI';
+import { useSession } from '@/hooks';
 import { getQueryString, simpleEmailValidation } from '@/utils';
 
 interface Credentials {
diff --git a/src/interfaces/assistants_web/src/app/(main)/(chat)/Chat.tsx b/src/interfaces/assistants_web/src/app/(main)/(chat)/Chat.tsx
index 684a51c8e3..32a350336e 100644
--- a/src/interfaces/assistants_web/src/app/(main)/(chat)/Chat.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/(chat)/Chat.tsx
@@ -3,16 +3,17 @@
 import { useEffect } from 'react';
 
 import { Document, ManagedTool } from '@/cohere-client';
-import Conversation from '@/components/Conversation';
-import { ConversationError } from '@/components/ConversationError';
+import { Conversation, ConversationError } from '@/components/Conversation';
 import { TOOL_PYTHON_INTERPRETER_ID } from '@/constants';
-import { useAgent } from '@/hooks/agents';
-import { useConversation } from '@/hooks/conversation';
-import { useListTools } from '@/hooks/tools';
+import { useAgent, useConversation, useListTools } from '@/hooks';
 import { useCitationsStore, useConversationStore, useParamsStore } from '@/stores';
 import { OutputFiles } from '@/stores/slices/citationsSlice';
-import { createStartEndKey, fixCitationsLeadingMarkdown, mapHistoryToMessages } from '@/utils';
-import { parsePythonInterpreterToolFields } from '@/utils/tools';
+import {
+  createStartEndKey,
+  fixInlineCitationsForMarkdown,
+  mapHistoryToMessages,
+  parsePythonInterpreterToolFields,
+} from '@/utils';
 
 const Chat: React.FC<{ agentId?: string; conversationId?: string }> = ({
   agentId,
@@ -85,7 +86,7 @@ const Chat: React.FC<{ agentId?: string; conversationId?: string }> = ({
           }
         }
       });
-      fixCitationsLeadingMarkdown(message.citations, message.text)?.forEach((citation) => {
+      fixInlineCitationsForMarkdown(message.citations, message.text)?.forEach((citation) => {
         const startEndKey = createStartEndKey(citation.start ?? 0, citation.end ?? 0);
         const documents = citation.document_ids?.map((id) => documentsMap[id]) ?? [];
         addCitation(message.generation_id ?? '', startEndKey, documents);
diff --git a/src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/c/[conversationId]/loading.tsx b/src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/c/[conversationId]/loading.tsx
index ecbdeb6758..642f13c4da 100644
--- a/src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/c/[conversationId]/loading.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/c/[conversationId]/loading.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from '@/components/Shared';
+import { Spinner } from '@/components/UI';
 
 const Loading: React.FC<React.PropsWithChildren> = () => {
   return (
diff --git a/src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/loading.tsx b/src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/loading.tsx
index ecbdeb6758..642f13c4da 100644
--- a/src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/loading.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/(chat)/a/[agentId]/loading.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from '@/components/Shared';
+import { Spinner } from '@/components/UI';
 
 const Loading: React.FC<React.PropsWithChildren> = () => {
   return (
diff --git a/src/interfaces/assistants_web/src/app/(main)/(chat)/c/[conversationId]/loading.tsx b/src/interfaces/assistants_web/src/app/(main)/(chat)/c/[conversationId]/loading.tsx
index ecbdeb6758..642f13c4da 100644
--- a/src/interfaces/assistants_web/src/app/(main)/(chat)/c/[conversationId]/loading.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/(chat)/c/[conversationId]/loading.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from '@/components/Shared';
+import { Spinner } from '@/components/UI';
 
 const Loading: React.FC<React.PropsWithChildren> = () => {
   return (
diff --git a/src/interfaces/assistants_web/src/app/(main)/(chat)/layout.tsx b/src/interfaces/assistants_web/src/app/(main)/(chat)/layout.tsx
index 99b30115fa..b025aaf889 100644
--- a/src/interfaces/assistants_web/src/app/(main)/(chat)/layout.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/(chat)/layout.tsx
@@ -3,9 +3,8 @@
 import { Transition } from '@headlessui/react';
 import { useEffect } from 'react';
 
-import RightPanel from '@/components/Agents/RightPanel';
-import { useIsDesktop } from '@/hooks/breakpoint';
-import { useListAllDeployments } from '@/hooks/deployments';
+import { ConversationPanel } from '@/components/Conversation';
+import { useIsDesktop, useListAllDeployments } from '@/hooks';
 import { useConversationStore, useParamsStore, useSettingsStore } from '@/stores';
 import { cn } from '@/utils';
 
@@ -55,7 +54,7 @@ const ChatLayout: React.FC<React.PropsWithChildren> = ({ children }) => {
         leaveFrom="translate-x-0 opacity-100"
         leaveTo="translate-x-full opacity-0"
       >
-        <RightPanel />
+        <ConversationPanel />
       </Transition>
     </div>
   );
diff --git a/src/interfaces/assistants_web/src/components/Agents/DiscoverAgentCard.tsx b/src/interfaces/assistants_web/src/app/(main)/discover/DiscoverAgentCard.tsx
similarity index 88%
rename from src/interfaces/assistants_web/src/components/Agents/DiscoverAgentCard.tsx
rename to src/interfaces/assistants_web/src/app/(main)/discover/DiscoverAgentCard.tsx
index a14c8b9a60..89ebb38bbd 100644
--- a/src/interfaces/assistants_web/src/components/Agents/DiscoverAgentCard.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/discover/DiscoverAgentCard.tsx
@@ -3,14 +3,11 @@
 import Link from 'next/link';
 
 import { AgentPublic } from '@/cohere-client';
-import { DeleteAgent } from '@/components/Agents/DeleteAgent';
-import { KebabMenu } from '@/components/KebabMenu';
-import { CoralLogo, Text } from '@/components/Shared';
+import { DeleteAgent } from '@/components/Modals/DeleteAgent';
+import { CoralLogo, KebabMenu, Text } from '@/components/UI';
 import { useContextStore } from '@/context';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { useSession } from '@/hooks/session';
-import { cn } from '@/utils';
-import { checkIsBaseAgent } from '@/utils/agents';
+import { useBrandedColors, useSession } from '@/hooks';
+import { checkIsBaseAgent, cn } from '@/utils';
 
 type Props = {
   agent?: AgentPublic;
diff --git a/src/interfaces/assistants_web/src/components/Agents/DiscoverAgents.tsx b/src/interfaces/assistants_web/src/app/(main)/discover/DiscoverAgents.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/Agents/DiscoverAgents.tsx
rename to src/interfaces/assistants_web/src/app/(main)/discover/DiscoverAgents.tsx
index df507cf717..4d864104de 100644
--- a/src/interfaces/assistants_web/src/components/Agents/DiscoverAgents.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/discover/DiscoverAgents.tsx
@@ -3,14 +3,13 @@
 import { useDeferredValue, useMemo, useState } from 'react';
 
 import { AgentPublic, ConversationWithoutMessages } from '@/cohere-client';
-import { DiscoverAgentCard } from '@/components/Agents/DiscoverAgentCard';
-import { MobileHeader } from '@/components/MobileHeader';
-import { Button, Input, Text } from '@/components/Shared';
-import { useListAgents } from '@/hooks/agents';
-import { useConversations } from '@/hooks/conversation';
-import { useSession } from '@/hooks/session';
+import { MobileHeader } from '@/components/Global';
+import { Button, Input, Text } from '@/components/UI';
+import { useConversations, useListAgents, useSession } from '@/hooks';
 import { cn } from '@/utils';
 
+import { DiscoverAgentCard } from './DiscoverAgentCard';
+
 const GROUPED_ASSISTANTS_LIMIT = 15;
 
 export const DiscoverAgents = () => {
diff --git a/src/interfaces/assistants_web/src/app/(main)/discover/page.tsx b/src/interfaces/assistants_web/src/app/(main)/discover/page.tsx
index cfa519c495..dfdf9f2f85 100644
--- a/src/interfaces/assistants_web/src/app/(main)/discover/page.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/discover/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 
-import { DiscoverAgents } from '@/components/Agents/DiscoverAgents';
+import { DiscoverAgents } from './DiscoverAgents';
 
 export const metadata: Metadata = {
   title: 'Discover Assistants',
diff --git a/src/interfaces/assistants_web/src/components/Agents/UpdateAgent.tsx b/src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/UpdateAgent.tsx
similarity index 87%
rename from src/interfaces/assistants_web/src/components/Agents/UpdateAgent.tsx
rename to src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/UpdateAgent.tsx
index 6a8b7e63f2..91a5551e5c 100644
--- a/src/interfaces/assistants_web/src/components/Agents/UpdateAgent.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/UpdateAgent.tsx
@@ -4,17 +4,13 @@ import Link from 'next/link';
 import React, { useState } from 'react';
 
 import { AgentPublic } from '@/cohere-client';
-import {
-  AgentSettingsFields,
-  AgentSettingsForm,
-} from '@/components/Agents/AgentSettings/AgentSettingsForm';
-import { DeleteAgent } from '@/components/Agents/DeleteAgent';
-import { MobileHeader } from '@/components/MobileHeader';
-import { Button, Icon, Spinner, Text } from '@/components/Shared';
+import { AgentSettingsFields, AgentSettingsForm } from '@/components/AgentSettingsForm';
+import { MobileHeader } from '@/components/Global';
+import { DeleteAgent } from '@/components/Modals/DeleteAgent';
+import { Button, Icon, Spinner, Text } from '@/components/UI';
 import { DEFAULT_AGENT_MODEL, DEPLOYMENT_COHERE_PLATFORM } from '@/constants';
 import { useContextStore } from '@/context';
-import { useIsAgentNameUnique, useUpdateAgent } from '@/hooks/agents';
-import { useNotify } from '@/hooks/toast';
+import { useIsAgentNameUnique, useNotify, useUpdateAgent } from '@/hooks';
 
 type Props = {
   agent: AgentPublic;
@@ -65,7 +61,7 @@ export const UpdateAgent: React.FC<Props> = ({ agent }) => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col overflow-y-auto">
+    <div className="flex h-full w-full flex-col overflow-y-auto rounded-lg border border-marble-950 bg-marble-980 pb-6 dark:border-volcanic-100 dark:bg-volcanic-100">
       <header className="flex flex-col gap-y-3 border-b px-4 py-6 dark:border-volcanic-150 lg:px-10 lg:py-10">
         <MobileHeader />
         <div className="flex items-center space-x-2">
diff --git a/src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/page.tsx b/src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/page.tsx
index 8776e588f6..a41be96c39 100644
--- a/src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/page.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/edit/[agentId]/page.tsx
@@ -1,6 +1,6 @@
 import { NextPage } from 'next';
 
-import { UpdateAgent } from '@/components/Agents/UpdateAgent';
+import { UpdateAgent } from './UpdateAgent';
 import { getCohereServerClient } from '@/server/cohereServerClient';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/app/(main)/layout.tsx b/src/interfaces/assistants_web/src/app/(main)/layout.tsx
index 80eaf3ad45..e5112cd503 100644
--- a/src/interfaces/assistants_web/src/app/(main)/layout.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/layout.tsx
@@ -3,9 +3,9 @@ import { NextPage } from 'next';
 import { cookies } from 'next/headers';
 import { redirect } from 'next/navigation';
 
-import { LeftPanel } from '@/components/Agents/LeftPanel';
-import { HotKeys } from '@/components/Shared/HotKeys';
-import { Swipeable } from '@/components/Swipeable';
+import { Swipeable } from '@/components/Global';
+import { HotKeys } from '@/components/HotKeys';
+import { SideNavPanel } from '@/components/SideNavPanel';
 import { COOKIE_KEYS, DEFAULT_AGENT_TOOLS } from '@/constants';
 import { getCohereServerClient } from '@/server/cohereServerClient';
 
@@ -48,7 +48,7 @@ const MainLayout: NextPage<React.PropsWithChildren> = async ({ children }) => {
     <HydrationBoundary state={dehydrate(queryClient)}>
       <div className="flex h-screen w-full flex-1 flex-col gap-3 bg-mushroom-900 p-3 dark:bg-volcanic-60">
         <div className="relative flex h-full flex-grow flex-col flex-nowrap gap-3 overflow-hidden lg:flex-row">
-          <LeftPanel />
+          <SideNavPanel />
           <section className="relative flex h-full min-w-0 flex-grow flex-col overflow-hidden">
             <HotKeys />
             <Swipeable />
@@ -56,7 +56,7 @@ const MainLayout: NextPage<React.PropsWithChildren> = async ({ children }) => {
           </section>
         </div>
       </div>
-      <LeftPanel className="rounded-bl-none rounded-tl-none md:hidden" />
+      <SideNavPanel className="rounded-bl-none rounded-tl-none md:hidden" />
     </HydrationBoundary>
   );
 };
diff --git a/src/interfaces/assistants_web/src/app/(main)/loading.tsx b/src/interfaces/assistants_web/src/app/(main)/loading.tsx
index ecbdeb6758..642f13c4da 100644
--- a/src/interfaces/assistants_web/src/app/(main)/loading.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/loading.tsx
@@ -1,4 +1,4 @@
-import { Spinner } from '@/components/Shared';
+import { Spinner } from '@/components/UI';
 
 const Loading: React.FC<React.PropsWithChildren> = () => {
   return (
diff --git a/src/interfaces/assistants_web/src/components/Agents/CreateAgent.tsx b/src/interfaces/assistants_web/src/app/(main)/new/CreateAgent.tsx
similarity index 88%
rename from src/interfaces/assistants_web/src/components/Agents/CreateAgent.tsx
rename to src/interfaces/assistants_web/src/app/(main)/new/CreateAgent.tsx
index 94d8ece187..67ff7731e3 100644
--- a/src/interfaces/assistants_web/src/components/Agents/CreateAgent.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/new/CreateAgent.tsx
@@ -5,12 +5,9 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 
-import {
-  AgentSettingsFields,
-  AgentSettingsForm,
-} from '@/components/Agents//AgentSettings/AgentSettingsForm';
-import { MobileHeader } from '@/components/MobileHeader';
-import { Button, Icon, Text } from '@/components/Shared';
+import { AgentSettingsFields, AgentSettingsForm } from '@/components/AgentSettingsForm';
+import { MobileHeader } from '@/components/Global';
+import { Button, Icon, Text } from '@/components/UI';
 import {
   DEFAULT_AGENT_MODEL,
   DEFAULT_AGENT_TOOLS,
@@ -18,8 +15,7 @@ import {
   DEPLOYMENT_COHERE_PLATFORM,
 } from '@/constants';
 import { useContextStore } from '@/context';
-import { useCreateAgent } from '@/hooks/agents';
-import { useNotify } from '@/hooks/toast';
+import { useCreateAgent, useNotify } from '@/hooks';
 
 const DEFAULT_FIELD_VALUES = {
   name: '',
@@ -77,7 +73,7 @@ export const CreateAgent: React.FC = () => {
   };
 
   return (
-    <div className="flex h-full w-full flex-col overflow-y-auto">
+    <div className="flex h-full w-full flex-col overflow-y-auto rounded-lg border border-marble-950 bg-marble-980 pb-6 dark:border-volcanic-100 dark:bg-volcanic-100">
       <header className="flex flex-col gap-y-3 border-b px-4 py-6 dark:border-volcanic-150 lg:px-10 lg:py-10">
         <MobileHeader />
         <div className="flex items-center space-x-2">
diff --git a/src/interfaces/assistants_web/src/app/(main)/new/page.tsx b/src/interfaces/assistants_web/src/app/(main)/new/page.tsx
index 28d642b0e4..1a48ab8ea6 100644
--- a/src/interfaces/assistants_web/src/app/(main)/new/page.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/new/page.tsx
@@ -1,6 +1,6 @@
 import { Metadata } from 'next';
 
-import { CreateAgent } from '@/components/Agents/CreateAgent';
+import { CreateAgent } from './CreateAgent';
 
 export const metadata: Metadata = {
   title: 'New Assistant',
diff --git a/src/interfaces/assistants_web/src/components/Agents/Settings.tsx b/src/interfaces/assistants_web/src/app/(main)/settings/Settings.tsx
similarity index 92%
rename from src/interfaces/assistants_web/src/components/Agents/Settings.tsx
rename to src/interfaces/assistants_web/src/app/(main)/settings/Settings.tsx
index 9dfdec3c7e..4b2a9b4ebd 100644
--- a/src/interfaces/assistants_web/src/components/Agents/Settings.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/settings/Settings.tsx
@@ -2,13 +2,10 @@
 
 import { PropsWithChildren, useState } from 'react';
 
-import { DarkModeToggle } from '@/components/DarkModeToggle';
-import { MobileHeader } from '@/components/MobileHeader';
-import { Button, Icon, Tabs, Text } from '@/components/Shared';
-import { useNotify } from '@/hooks/toast';
-import { useDeleteAuthTool, useListTools } from '@/hooks/tools';
-import { cn } from '@/utils';
-import { getToolAuthUrl } from '@/utils/getToolAuthUrl';
+import { MobileHeader } from '@/components/Global';
+import { Button, DarkModeToggle, Icon, Tabs, Text } from '@/components/UI';
+import { useDeleteAuthTool, useListTools, useNotify } from '@/hooks';
+import { cn, getToolAuthUrl } from '@/utils';
 
 const tabs = [
   <div className="flex items-center gap-2" key="company">
@@ -162,7 +159,7 @@ const GoogleDriveConnection = () => {
             label="Authenticate"
             href={getToolAuthUrl(googleDriveTool.auth_url)}
             kind="secondary"
-            theme="evolved-green"
+            theme="default"
             icon="arrow-up-right"
           />
         )}
diff --git a/src/interfaces/assistants_web/src/app/(main)/settings/page.tsx b/src/interfaces/assistants_web/src/app/(main)/settings/page.tsx
index 882b078bd5..aedef0a65c 100644
--- a/src/interfaces/assistants_web/src/app/(main)/settings/page.tsx
+++ b/src/interfaces/assistants_web/src/app/(main)/settings/page.tsx
@@ -1,7 +1,7 @@
 import { Metadata } from 'next';
 import { Suspense } from 'react';
 
-import { Settings } from '@/components/Agents/Settings';
+import { Settings } from './Settings';
 
 export const metadata: Metadata = {
   title: 'Settings',
diff --git a/src/interfaces/assistants_web/src/app/_providers.tsx b/src/interfaces/assistants_web/src/app/_providers.tsx
index 9092a840e7..f82c1ec942 100644
--- a/src/interfaces/assistants_web/src/app/_providers.tsx
+++ b/src/interfaces/assistants_web/src/app/_providers.tsx
@@ -12,12 +12,15 @@ import {
   CohereUnauthorizedError,
   Fetch,
 } from '@/cohere-client';
-import { ToastNotification, WebManifestHead } from '@/components/Shared';
-import { GlobalHead } from '@/components/Shared/GlobalHead';
-import { ViewportFix } from '@/components/ViewportFix';
+import {
+  GlobalHead,
+  ToastNotification,
+  ViewportFix,
+  WebManifestHead,
+} from '@/components/Providers';
 import { ContextStore } from '@/context';
 import { env } from '@/env.mjs';
-import { useLazyRef } from '@/hooks/lazyRef';
+import { useLazyRef } from '@/hooks';
 import { clearAuthToken } from '@/server/actions';
 
 const makeCohereClient = (authToken?: string) => {
diff --git a/src/interfaces/assistants_web/src/app/error.tsx b/src/interfaces/assistants_web/src/app/error.tsx
index 96148686ae..bd76c156d1 100644
--- a/src/interfaces/assistants_web/src/app/error.tsx
+++ b/src/interfaces/assistants_web/src/app/error.tsx
@@ -2,7 +2,7 @@
 
 import { useEffect } from 'react';
 
-import { PageServerError } from '@/components/Shared';
+import { Button, Text } from '@/components/UI';
 
 export default function Error({
   error,
@@ -14,5 +14,17 @@ export default function Error({
     console.error(error);
   }, [error]);
 
-  return <PageServerError />;
+  return (
+    <div className="flex h-screen flex-col items-center justify-center gap-y-8 text-volcanic-100 dark:bg-volcanic-100 dark:text-marble-950 dark:selection:bg-volcanic-300">
+      <div className="flex items-center justify-center">
+        <Text as="h1" styleAs="h3" className="mr-5 border-r pr-5 font-medium">
+          500
+        </Text>
+        <Text>Whoops! Something went wrong.</Text>
+      </div>
+      <Button href="/" icon="arrow-left">
+        Go back
+      </Button>
+    </div>
+  );
 }
diff --git a/src/interfaces/assistants_web/src/app/not-found.tsx b/src/interfaces/assistants_web/src/app/not-found.tsx
index a6887a1a3f..12901237d0 100644
--- a/src/interfaces/assistants_web/src/app/not-found.tsx
+++ b/src/interfaces/assistants_web/src/app/not-found.tsx
@@ -1,7 +1,19 @@
 'use client';
 
-import { PageNotFound } from '@/components/Shared';
+import { Button, Text } from '@/components/UI';
 
 export default function NotFound() {
-  return <PageNotFound />;
+  return (
+    <div className="flex h-screen flex-col items-center justify-center gap-y-8 text-volcanic-100 dark:bg-volcanic-100 dark:text-marble-950 dark:selection:bg-volcanic-300">
+      <div className="flex items-center justify-center">
+        <Text as="h1" styleAs="h3" className="mr-5 border-r pr-5 font-medium">
+          404
+        </Text>
+        <Text>This page could not be found.</Text>
+      </div>
+      <Button href="/" icon="arrow-left">
+        Go back
+      </Button>
+    </div>
+  );
 }
diff --git a/src/interfaces/assistants_web/src/components/ReadOnlyConversation.tsx b/src/interfaces/assistants_web/src/app/share/[id]/ReadOnlyConversation.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/ReadOnlyConversation.tsx
rename to src/interfaces/assistants_web/src/app/share/[id]/ReadOnlyConversation.tsx
index 5117926b6a..61693dcfa7 100644
--- a/src/interfaces/assistants_web/src/components/ReadOnlyConversation.tsx
+++ b/src/interfaces/assistants_web/src/app/share/[id]/ReadOnlyConversation.tsx
@@ -1,7 +1,7 @@
 'use client';
 
-import MessageRow from '@/components/MessageRow';
-import { Button, Text } from '@/components/Shared';
+import { MessageRow } from '@/components/MessageRow';
+import { Button, Text } from '@/components/UI';
 import { ChatMessage } from '@/types/message';
 import { cn } from '@/utils';
 
diff --git a/src/interfaces/assistants_web/src/app/share/[id]/page.tsx b/src/interfaces/assistants_web/src/app/share/[id]/page.tsx
index ef436da287..1eece2c77a 100644
--- a/src/interfaces/assistants_web/src/app/share/[id]/page.tsx
+++ b/src/interfaces/assistants_web/src/app/share/[id]/page.tsx
@@ -6,10 +6,9 @@ import { useParams } from 'next/navigation';
 import { PropsWithChildren, useEffect, useState } from 'react';
 
 import { Document } from '@/cohere-client';
-import { ReadOnlyConversation } from '@/components/ReadOnlyConversation';
-import { Icon, Spinner, Text } from '@/components/Shared';
+import { Icon, Spinner, Text } from '@/components/UI';
 import { DEFAULT_CONVERSATION_NAME, TOOL_PYTHON_INTERPRETER_ID } from '@/constants';
-import { useGetSnapshotByLinkId } from '@/hooks/snapshots';
+import { useGetSnapshotByLinkId } from '@/hooks';
 import { useCitationsStore } from '@/stores';
 import { OutputFiles } from '@/stores/slices/citationsSlice';
 import {
@@ -17,8 +16,10 @@ import {
   createStartEndKey,
   isShareLinkExpiredError,
   mapHistoryToMessages,
+  parsePythonInterpreterToolFields,
 } from '@/utils';
-import { parsePythonInterpreterToolFields } from '@/utils/tools';
+
+import { ReadOnlyConversation } from './ReadOnlyConversation';
 
 const ShareConversationPage: NextPage = () => {
   const params = useParams();
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Add.tsx b/src/interfaces/assistants_web/src/assets/icons/Add.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Add.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Add.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowClockwise.tsx b/src/interfaces/assistants_web/src/assets/icons/ArrowClockwise.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowClockwise.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ArrowClockwise.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowDown.tsx b/src/interfaces/assistants_web/src/assets/icons/ArrowDown.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowDown.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ArrowDown.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowLeft.tsx b/src/interfaces/assistants_web/src/assets/icons/ArrowLeft.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowLeft.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ArrowLeft.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowRight.tsx b/src/interfaces/assistants_web/src/assets/icons/ArrowRight.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowRight.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ArrowRight.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowSubmit.tsx b/src/interfaces/assistants_web/src/assets/icons/ArrowSubmit.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowSubmit.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ArrowSubmit.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowUp.tsx b/src/interfaces/assistants_web/src/assets/icons/ArrowUp.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowUp.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ArrowUp.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowUpRight.tsx b/src/interfaces/assistants_web/src/assets/icons/ArrowUpRight.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ArrowUpRight.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ArrowUpRight.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/BookOpenText.tsx b/src/interfaces/assistants_web/src/assets/icons/BookOpenText.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/BookOpenText.tsx
rename to src/interfaces/assistants_web/src/assets/icons/BookOpenText.tsx
index d8bd9fe56e..dee7af304b 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/BookOpenText.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/BookOpenText.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Calculator.tsx b/src/interfaces/assistants_web/src/assets/icons/Calculator.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Calculator.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Calculator.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChatCircleDots.tsx b/src/interfaces/assistants_web/src/assets/icons/ChatCircleDots.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChatCircleDots.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ChatCircleDots.tsx
index 76ac2170bb..963034799b 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChatCircleDots.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/ChatCircleDots.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Checkmark.tsx b/src/interfaces/assistants_web/src/assets/icons/Checkmark.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Checkmark.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Checkmark.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChevronDown.tsx b/src/interfaces/assistants_web/src/assets/icons/ChevronDown.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChevronDown.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ChevronDown.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChevronLeft.tsx b/src/interfaces/assistants_web/src/assets/icons/ChevronLeft.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChevronLeft.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ChevronLeft.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChevronRight.tsx b/src/interfaces/assistants_web/src/assets/icons/ChevronRight.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChevronRight.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ChevronRight.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChevronUp.tsx b/src/interfaces/assistants_web/src/assets/icons/ChevronUp.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ChevronUp.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ChevronUp.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/CirclesFour.tsx b/src/interfaces/assistants_web/src/assets/icons/CirclesFour.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/CirclesFour.tsx
rename to src/interfaces/assistants_web/src/assets/icons/CirclesFour.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/CirclesThree.tsx b/src/interfaces/assistants_web/src/assets/icons/CirclesThree.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/CirclesThree.tsx
rename to src/interfaces/assistants_web/src/assets/icons/CirclesThree.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Close.tsx b/src/interfaces/assistants_web/src/assets/icons/Close.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Close.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Close.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/CloseDrawer.tsx b/src/interfaces/assistants_web/src/assets/icons/CloseDrawer.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/CloseDrawer.tsx
rename to src/interfaces/assistants_web/src/assets/icons/CloseDrawer.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/CodeSimple.tsx b/src/interfaces/assistants_web/src/assets/icons/CodeSimple.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/CodeSimple.tsx
rename to src/interfaces/assistants_web/src/assets/icons/CodeSimple.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Compass.tsx b/src/interfaces/assistants_web/src/assets/icons/Compass.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Compass.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Compass.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Copy.tsx b/src/interfaces/assistants_web/src/assets/icons/Copy.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Copy.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Copy.tsx
index e25e0cebaa..6dc0508cb4 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Copy.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Copy.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Desktop.tsx b/src/interfaces/assistants_web/src/assets/icons/Desktop.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Desktop.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Desktop.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Download.tsx b/src/interfaces/assistants_web/src/assets/icons/Download.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Download.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Download.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Edit.tsx b/src/interfaces/assistants_web/src/assets/icons/Edit.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Edit.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Edit.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/File.tsx b/src/interfaces/assistants_web/src/assets/icons/File.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/File.tsx
rename to src/interfaces/assistants_web/src/assets/icons/File.tsx
index c8411e9a50..8a040cfd5e 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/File.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/File.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/FileSearch.tsx b/src/interfaces/assistants_web/src/assets/icons/FileSearch.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/FileSearch.tsx
rename to src/interfaces/assistants_web/src/assets/icons/FileSearch.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Folder.tsx b/src/interfaces/assistants_web/src/assets/icons/Folder.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Folder.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Folder.tsx
index 7be336c6ed..625a3da210 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Folder.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Folder.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/GoogleDrive.tsx b/src/interfaces/assistants_web/src/assets/icons/GoogleDrive.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/GoogleDrive.tsx
rename to src/interfaces/assistants_web/src/assets/icons/GoogleDrive.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Hide.tsx b/src/interfaces/assistants_web/src/assets/icons/Hide.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Hide.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Hide.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Information.tsx b/src/interfaces/assistants_web/src/assets/icons/Information.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Information.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Information.tsx
index a57aef4b60..7c4d51c037 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Information.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Information.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Kebab.tsx b/src/interfaces/assistants_web/src/assets/icons/Kebab.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Kebab.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Kebab.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Link.tsx b/src/interfaces/assistants_web/src/assets/icons/Link.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Link.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Link.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/List.tsx b/src/interfaces/assistants_web/src/assets/icons/List.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/List.tsx
rename to src/interfaces/assistants_web/src/assets/icons/List.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Menu.tsx b/src/interfaces/assistants_web/src/assets/icons/Menu.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Menu.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Menu.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Moon.tsx b/src/interfaces/assistants_web/src/assets/icons/Moon.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Moon.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Moon.tsx
index c4d343a52f..32a18563e3 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Moon.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Moon.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/NewMessage.tsx b/src/interfaces/assistants_web/src/assets/icons/NewMessage.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/NewMessage.tsx
rename to src/interfaces/assistants_web/src/assets/icons/NewMessage.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/OneDrive.tsx b/src/interfaces/assistants_web/src/assets/icons/OneDrive.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/OneDrive.tsx
rename to src/interfaces/assistants_web/src/assets/icons/OneDrive.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Paperclip.tsx b/src/interfaces/assistants_web/src/assets/icons/Paperclip.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Paperclip.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Paperclip.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Profile.tsx b/src/interfaces/assistants_web/src/assets/icons/Profile.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Profile.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Profile.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Search.tsx b/src/interfaces/assistants_web/src/assets/icons/Search.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Search.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Search.tsx
index 15e849218f..7e8a35b736 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Search.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Search.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Settings.tsx b/src/interfaces/assistants_web/src/assets/icons/Settings.tsx
similarity index 99%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Settings.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Settings.tsx
index fdc189995e..889ae4b944 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Settings.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Settings.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Share.tsx b/src/interfaces/assistants_web/src/assets/icons/Share.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Share.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Share.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Show.tsx b/src/interfaces/assistants_web/src/assets/icons/Show.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Show.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Show.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/SignOut.tsx b/src/interfaces/assistants_web/src/assets/icons/SignOut.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/SignOut.tsx
rename to src/interfaces/assistants_web/src/assets/icons/SignOut.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Sparkle.tsx b/src/interfaces/assistants_web/src/assets/icons/Sparkle.tsx
similarity index 99%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Sparkle.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Sparkle.tsx
index 8e08ef4acb..bf1750daf2 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Sparkle.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Sparkle.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Subtract.tsx b/src/interfaces/assistants_web/src/assets/icons/Subtract.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Subtract.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Subtract.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Sun.tsx b/src/interfaces/assistants_web/src/assets/icons/Sun.tsx
similarity index 99%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Sun.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Sun.tsx
index 056c59b4fc..a8900001d9 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Sun.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Sun.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ThumbsDown.tsx b/src/interfaces/assistants_web/src/assets/icons/ThumbsDown.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ThumbsDown.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ThumbsDown.tsx
index dd5ee099f2..4ae38915da 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ThumbsDown.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/ThumbsDown.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ThumbsUp.tsx b/src/interfaces/assistants_web/src/assets/icons/ThumbsUp.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ThumbsUp.tsx
rename to src/interfaces/assistants_web/src/assets/icons/ThumbsUp.tsx
index aaa9b43ff9..b319db4cbf 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/ThumbsUp.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/ThumbsUp.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Trash.tsx b/src/interfaces/assistants_web/src/assets/icons/Trash.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Trash.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Trash.tsx
index 93e75de48e..e8e370eec5 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Trash.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Trash.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Upload.tsx b/src/interfaces/assistants_web/src/assets/icons/Upload.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Upload.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Upload.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/UsersThree.tsx b/src/interfaces/assistants_web/src/assets/icons/UsersThree.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/UsersThree.tsx
rename to src/interfaces/assistants_web/src/assets/icons/UsersThree.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Warning.tsx b/src/interfaces/assistants_web/src/assets/icons/Warning.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Warning.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Warning.tsx
index d784e585b7..170f420483 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Warning.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Warning.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Web.tsx b/src/interfaces/assistants_web/src/assets/icons/Web.tsx
similarity index 99%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Web.tsx
rename to src/interfaces/assistants_web/src/assets/icons/Web.tsx
index 26ed82de3a..5e83e0a2c5 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/Web.tsx
+++ b/src/interfaces/assistants_web/src/assets/icons/Web.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SVGProps } from 'react';
 
-import { IconKind } from '@/components/Shared/Icon/Icon';
+import { IconKind } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icons/index.ts b/src/interfaces/assistants_web/src/assets/icons/index.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icons/index.ts
rename to src/interfaces/assistants_web/src/assets/icons/index.ts
diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/DataSourcesStep.tsx b/src/interfaces/assistants_web/src/components/AgentSettingsForm/DataSourcesStep.tsx
similarity index 99%
rename from src/interfaces/assistants_web/src/components/Agents/AgentSettings/DataSourcesStep.tsx
rename to src/interfaces/assistants_web/src/components/AgentSettingsForm/DataSourcesStep.tsx
index 0cbfac6d34..7dc376a0b5 100644
--- a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/DataSourcesStep.tsx
+++ b/src/interfaces/assistants_web/src/components/AgentSettingsForm/DataSourcesStep.tsx
@@ -2,9 +2,9 @@ import { uniqBy } from 'lodash';
 import Link from 'next/link';
 import { Dispatch, ReactNode, RefObject, SetStateAction, useRef } from 'react';
 
-import { Button, Icon, IconName, Spinner, Text } from '@/components/Shared';
+import { Button, Icon, IconName, Spinner, Text } from '@/components/UI';
 import { ACCEPTED_FILE_TYPES, TOOL_GOOGLE_DRIVE_ID } from '@/constants';
-import { useUploadAgentFile } from '@/hooks/files';
+import { useUploadAgentFile } from '@/hooks';
 import { DataSourceArtifact } from '@/types/tools';
 import { pluralize } from '@/utils';
 
diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/DefineStep.tsx b/src/interfaces/assistants_web/src/components/AgentSettingsForm/DefineStep.tsx
similarity index 90%
rename from src/interfaces/assistants_web/src/components/Agents/AgentSettings/DefineStep.tsx
rename to src/interfaces/assistants_web/src/components/AgentSettingsForm/DefineStep.tsx
index c24acb96aa..e86ac5fc97 100644
--- a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/DefineStep.tsx
+++ b/src/interfaces/assistants_web/src/components/AgentSettingsForm/DefineStep.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
-import { AgentSettingsFields } from '@/components/Agents/AgentSettings/AgentSettingsForm';
-import { Input, Text, Textarea } from '@/components/Shared';
+import { AgentSettingsFields } from '@/components/AgentSettingsForm';
+import { Input, Text, Textarea } from '@/components/UI';
 
 type Props = {
   fields: AgentSettingsFields;
diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/ToolsStep.tsx b/src/interfaces/assistants_web/src/components/AgentSettingsForm/ToolsStep.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Agents/AgentSettings/ToolsStep.tsx
rename to src/interfaces/assistants_web/src/components/AgentSettingsForm/ToolsStep.tsx
index e772e1b8dd..7033aa1df3 100644
--- a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/ToolsStep.tsx
+++ b/src/interfaces/assistants_web/src/components/AgentSettingsForm/ToolsStep.tsx
@@ -1,7 +1,7 @@
 import Link from 'next/link';
 
 import { ManagedTool } from '@/cohere-client';
-import { Icon, IconName, Switch, Text } from '@/components/Shared';
+import { Icon, IconName, Switch, Text } from '@/components/UI';
 import { AGENT_SETTINGS_TOOLS, TOOL_FALLBACK_ICON, TOOL_ID_TO_DISPLAY_INFO } from '@/constants';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/VisibilityStep.tsx b/src/interfaces/assistants_web/src/components/AgentSettingsForm/VisibilityStep.tsx
similarity index 95%
rename from src/interfaces/assistants_web/src/components/Agents/AgentSettings/VisibilityStep.tsx
rename to src/interfaces/assistants_web/src/components/AgentSettingsForm/VisibilityStep.tsx
index e61ee5e6b1..97c5a7ce13 100644
--- a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/VisibilityStep.tsx
+++ b/src/interfaces/assistants_web/src/components/AgentSettingsForm/VisibilityStep.tsx
@@ -1,4 +1,4 @@
-import { Icon, RadioGroup, Text } from '@/components/Shared';
+import { Icon, RadioGroup, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/AgentSettingsForm.tsx b/src/interfaces/assistants_web/src/components/AgentSettingsForm/index.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/Agents/AgentSettings/AgentSettingsForm.tsx
rename to src/interfaces/assistants_web/src/components/AgentSettingsForm/index.tsx
index adc9bc9baf..695ac1197f 100644
--- a/src/interfaces/assistants_web/src/components/Agents/AgentSettings/AgentSettingsForm.tsx
+++ b/src/interfaces/assistants_web/src/components/AgentSettingsForm/index.tsx
@@ -5,18 +5,15 @@ import { useSearchParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 
 import { CreateAgentRequest, UpdateAgentRequest } from '@/cohere-client';
-import { DataSourcesStep } from '@/components/Agents/AgentSettings/DataSourcesStep';
-import { DefineAssistantStep } from '@/components/Agents/AgentSettings/DefineStep';
-import { ToolsStep } from '@/components/Agents/AgentSettings/ToolsStep';
-import { VisibilityStep } from '@/components/Agents/AgentSettings/VisibilityStep';
-import { CollapsibleSection } from '@/components/CollapsibleSection';
-import { Button } from '@/components/Shared';
+import { DataSourcesStep } from '@/components/AgentSettingsForm/DataSourcesStep';
+import { DefineAssistantStep } from '@/components/AgentSettingsForm/DefineStep';
+import { ToolsStep } from '@/components/AgentSettingsForm/ToolsStep';
+import { VisibilityStep } from '@/components/AgentSettingsForm/VisibilityStep';
+import { Button, CollapsibleSection } from '@/components/UI';
 import { TOOL_GOOGLE_DRIVE_ID, TOOL_READ_DOCUMENT_ID, TOOL_SEARCH_FILE_ID } from '@/constants';
-import { useIsAgentNameUnique } from '@/hooks/agents';
-import { useListTools, useOpenGoogleDrivePicker } from '@/hooks/tools';
+import { useIsAgentNameUnique, useListTools, useOpenGoogleDrivePicker } from '@/hooks';
 import { DataSourceArtifact } from '@/types/tools';
-import { cn } from '@/utils';
-import { getToolAuthUrl } from '@/utils/getToolAuthUrl';
+import { cn, getToolAuthUrl } from '@/utils';
 
 type RequiredAndNotNull<T> = {
   [P in keyof T]-?: Exclude<T[P], null | undefined>;
diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentLogo.tsx b/src/interfaces/assistants_web/src/components/Agents/AgentLogo.tsx
index ff914f57ec..4207ce0711 100644
--- a/src/interfaces/assistants_web/src/components/Agents/AgentLogo.tsx
+++ b/src/interfaces/assistants_web/src/components/Agents/AgentLogo.tsx
@@ -1,6 +1,6 @@
 import { AgentPublic } from '@/cohere-client';
-import { CoralLogo, Text } from '@/components/Shared';
-import { useBrandedColors } from '@/hooks/brandedColors';
+import { CoralLogo, Text } from '@/components/UI';
+import { useBrandedColors } from '@/hooks';
 import { cn } from '@/utils';
 
 export const AgentLogo = ({ agent }: { agent: AgentPublic }) => {
diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentToolFilePicker.tsx b/src/interfaces/assistants_web/src/components/Agents/AgentToolFilePicker.tsx
deleted file mode 100644
index a86c647ce4..0000000000
--- a/src/interfaces/assistants_web/src/components/Agents/AgentToolFilePicker.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client';
-
-import { IconButton } from '@/components/IconButton';
-import { Button, Icon, Text } from '@/components/Shared';
-import { DataSourceArtifact } from '@/types/tools';
-
-type Props = {
-  googleDriveFiles?: DataSourceArtifact[];
-  disabled?: boolean;
-  handleRemoveGoogleDriveFiles: (id: string) => void;
-  handleOpenFilePicker: VoidFunction;
-};
-
-/**
- * @description Component to display the selected files/folders from Google Drive
- * @param {DataSourceArtifact[]} googleDriveFiles - List of selected files/folders from Google Drive
- * @param {boolean} disabled - Flag to disable the file picker
- * @param {Function} handleRemoveGoogleDriveFiles - Function to remove a file/folder from the selected list
- * @param {Function} handleOpenFilePicker - Function to open the file picker
- */
-export const AgentToolFilePicker: React.FC<Props> = ({
-  googleDriveFiles,
-  disabled,
-  handleRemoveGoogleDriveFiles,
-  handleOpenFilePicker,
-}) => {
-  return (
-    <div className="flex max-w-[300px] flex-col gap-y-2">
-      {!disabled && (
-        <Button
-          kind="secondary"
-          icon="add"
-          label="Select files/folders"
-          onClick={handleOpenFilePicker}
-        />
-      )}
-
-      {googleDriveFiles && googleDriveFiles.length > 0 && (
-        <div className="flex max-h-[262px] flex-col gap-y-1 overflow-y-auto rounded border border-marble-950 px-3 py-1">
-          {googleDriveFiles.map(({ type, id, name }) => (
-            <div key={id} className="flex flex-shrink-0 items-center gap-x-2 truncate">
-              <Icon
-                name={type === 'folder' ? 'folder' : 'file'}
-                className="text-mushroom-500"
-                size="sm"
-              />
-              <Text styleAs="caption" className="truncate">
-                {name}
-              </Text>
-              {!disabled && (
-                <IconButton
-                  onClick={() => handleRemoveGoogleDriveFiles(id)}
-                  iconName="close"
-                  size="sm"
-                  className="ml-auto"
-                />
-              )}
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/AuthLink.tsx b/src/interfaces/assistants_web/src/components/Auth/AuthLink.tsx
similarity index 92%
rename from src/interfaces/assistants_web/src/components/AuthLink.tsx
rename to src/interfaces/assistants_web/src/components/Auth/AuthLink.tsx
index 64c921eb9a..e2ee4baffb 100644
--- a/src/interfaces/assistants_web/src/components/AuthLink.tsx
+++ b/src/interfaces/assistants_web/src/components/Auth/AuthLink.tsx
@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import { Button, ButtonTheme, IconName } from '@/components/Shared';
-import { useAuthConfig } from '@/hooks/authConfig';
+import { Button, ButtonTheme, IconName } from '@/components/UI';
+import { useAuthConfig } from '@/hooks';
 
 type Props = {
   action: 'login' | 'register' | 'logout';
diff --git a/src/interfaces/assistants_web/src/components/Welcome/CellBackground.tsx b/src/interfaces/assistants_web/src/components/Auth/CellBackground.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/Welcome/CellBackground.tsx
rename to src/interfaces/assistants_web/src/components/Auth/CellBackground.tsx
index bda1731160..ff012a8767 100644
--- a/src/interfaces/assistants_web/src/components/Welcome/CellBackground.tsx
+++ b/src/interfaces/assistants_web/src/components/Auth/CellBackground.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from 'react';
 
-import { useIsDesktop } from '@/hooks/breakpoint';
+import { useIsDesktop } from '@/hooks';
 import { cn } from '@/utils';
 
 export const CellBackground: React.FC = () => {
diff --git a/src/interfaces/assistants_web/src/components/Welcome/Navigation.tsx b/src/interfaces/assistants_web/src/components/Auth/Navigation.tsx
similarity index 91%
rename from src/interfaces/assistants_web/src/components/Welcome/Navigation.tsx
rename to src/interfaces/assistants_web/src/components/Auth/Navigation.tsx
index 0b264e965b..a85a4d4ff4 100644
--- a/src/interfaces/assistants_web/src/components/Welcome/Navigation.tsx
+++ b/src/interfaces/assistants_web/src/components/Auth/Navigation.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 
-import { Logo } from '@/components/Shared';
+import { Logo } from '@/components/UI';
 import { cn } from '@/utils';
 
 /**
diff --git a/src/interfaces/assistants_web/src/components/NavigationUserMenu.tsx b/src/interfaces/assistants_web/src/components/Auth/NavigationUserMenu.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/NavigationUserMenu.tsx
rename to src/interfaces/assistants_web/src/components/Auth/NavigationUserMenu.tsx
index 6637efc90d..9d39364eae 100644
--- a/src/interfaces/assistants_web/src/components/NavigationUserMenu.tsx
+++ b/src/interfaces/assistants_web/src/components/Auth/NavigationUserMenu.tsx
@@ -3,8 +3,8 @@
 import { Popover, Transition } from '@headlessui/react';
 import { Fragment } from 'react';
 
-import { AuthLink } from '@/components/AuthLink';
-import { Icon, Text } from '@/components/Shared';
+import { AuthLink } from '@/components/Auth';
+import { Icon, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 /**
diff --git a/src/interfaces/assistants_web/src/components/Welcome/OidcSSOButton.tsx b/src/interfaces/assistants_web/src/components/Auth/OidcSSOButton.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Welcome/OidcSSOButton.tsx
rename to src/interfaces/assistants_web/src/components/Auth/OidcSSOButton.tsx
index 4d15601bb5..0fe70d725e 100644
--- a/src/interfaces/assistants_web/src/components/Welcome/OidcSSOButton.tsx
+++ b/src/interfaces/assistants_web/src/components/Auth/OidcSSOButton.tsx
@@ -1,7 +1,6 @@
 'use client';
 
-import { Button } from '@/components/Shared';
-import { cn } from '@/utils';
+import { Button } from '@/components/UI';
 
 type ButtonProps = {
   onClick: () => void;
diff --git a/src/interfaces/assistants_web/src/components/WelcomePage.tsx b/src/interfaces/assistants_web/src/components/Auth/WelcomePage.tsx
similarity index 83%
rename from src/interfaces/assistants_web/src/components/WelcomePage.tsx
rename to src/interfaces/assistants_web/src/components/Auth/WelcomePage.tsx
index b348c7d3fc..aa0146824a 100644
--- a/src/interfaces/assistants_web/src/components/WelcomePage.tsx
+++ b/src/interfaces/assistants_web/src/components/Auth/WelcomePage.tsx
@@ -3,11 +3,8 @@
 import { usePathname } from 'next/navigation';
 import { PropsWithChildren } from 'react';
 
-import { AuthLink } from '@/components/AuthLink';
-import { NavigationUserMenu } from '@/components/NavigationUserMenu';
-import { Text } from '@/components/Shared';
-import { CellBackground } from '@/components/Welcome/CellBackground';
-import { Navigation } from '@/components/Welcome/Navigation';
+import { AuthLink, CellBackground, Navigation, NavigationUserMenu } from '@/components/Auth';
+import { Text } from '@/components/UI';
 
 type Props = PropsWithChildren<{
   userEmail?: string;
diff --git a/src/interfaces/assistants_web/src/components/Auth/index.ts b/src/interfaces/assistants_web/src/components/Auth/index.ts
new file mode 100644
index 0000000000..ee4d306123
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Auth/index.ts
@@ -0,0 +1,6 @@
+export * from './AuthLink';
+export * from './CellBackground';
+export * from './Navigation';
+export * from './NavigationUserMenu';
+export * from './OidcSSOButton';
+export * from './WelcomePage';
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Composer/index.tsx b/src/interfaces/assistants_web/src/components/Composer/Composer.tsx
similarity index 90%
rename from src/interfaces/assistants_web/src/components/Conversation/Composer/index.tsx
rename to src/interfaces/assistants_web/src/components/Composer/Composer.tsx
index 2a93db9006..418109480d 100644
--- a/src/interfaces/assistants_web/src/components/Conversation/Composer/index.tsx
+++ b/src/interfaces/assistants_web/src/components/Composer/Composer.tsx
@@ -4,14 +4,10 @@ import { useResizeObserver } from '@react-hookz/web';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { AgentPublic, ManagedTool } from '@/cohere-client';
-import { ComposerError } from '@/components/Conversation/Composer/ComposerError';
-import { ComposerFiles } from '@/components/Conversation/Composer/ComposerFiles';
-import { ComposerToolbar } from '@/components/Conversation/Composer/ComposerToolbar';
-import { DragDropFileUploadOverlay } from '@/components/Conversation/Composer/DragDropFileUploadOverlay';
-import { Icon, STYLE_LEVEL_TO_CLASSES } from '@/components/Shared';
+import { ComposerError, ComposerFiles, ComposerToolbar } from '@/components/Composer';
+import { DragDropFileInput, Icon, STYLE_LEVEL_TO_CLASSES } from '@/components/UI';
 import { CHAT_COMPOSER_TEXTAREA_ID } from '@/constants';
-import { useBreakpoint, useIsDesktop } from '@/hooks/breakpoint';
-import { useAvailableTools } from '@/hooks/tools';
+import { useAvailableTools, useBreakpoint, useIsDesktop } from '@/hooks';
 import { ConfigurableParams } from '@/stores/slices/paramsSlice';
 import { ChatMessage } from '@/types/message';
 import { cn } from '@/utils';
@@ -144,7 +140,7 @@ export const Composer: React.FC<Props> = ({
           }, 100);
         }}
       >
-        <DragDropFileUploadOverlay active={isDragDropInputActive} onUploadFile={onUploadFile} />
+        <DragDropFileInput active={isDragDropInputActive} onUploadFile={onUploadFile} />
         <div className="relative flex items-end p-2">
           <textarea
             id={CHAT_COMPOSER_TEXTAREA_ID}
diff --git a/src/interfaces/assistants_web/src/components/FileError.tsx b/src/interfaces/assistants_web/src/components/Composer/ComposerError.tsx
similarity index 50%
rename from src/interfaces/assistants_web/src/components/FileError.tsx
rename to src/interfaces/assistants_web/src/components/Composer/ComposerError.tsx
index 743b094932..6e34ef4455 100644
--- a/src/interfaces/assistants_web/src/components/FileError.tsx
+++ b/src/interfaces/assistants_web/src/components/Composer/ComposerError.tsx
@@ -2,15 +2,32 @@
 
 import React, { useMemo } from 'react';
 
-import { Text } from '@/components/Shared';
+import { Text } from '@/components/UI';
+import { useFilesStore } from '@/stores';
 import { cn } from '@/utils';
 
+type Props = { className?: string };
 /**
- * @description Renders an error message if there is an error with the file upload
+ * @description Renders an error message under the composer. Right now it is only for file upload
+ * errors.
  */
-export const FileError: React.FC<{ error?: string; file?: File; className?: string }> = ({
+export const ComposerError: React.FC<Props> = ({ className = '' }) => {
+  const {
+    files: { uploadingFiles },
+  } = useFilesStore();
+  const latestFile = uploadingFiles[uploadingFiles.length - 1];
+
+  return (
+    <FileError
+      error={latestFile?.error}
+      file={latestFile?.file}
+      className={cn('min-h-[14px]', className)}
+    />
+  );
+};
+
+const FileError: React.FC<{ error?: string; file?: File; className?: string }> = ({
   error,
-  file,
   className = '',
 }) => {
   const errorText = useMemo<React.ReactNode>(() => {
diff --git a/src/interfaces/assistants_web/src/components/MessageFile.tsx b/src/interfaces/assistants_web/src/components/Composer/ComposerFile.tsx
similarity index 91%
rename from src/interfaces/assistants_web/src/components/MessageFile.tsx
rename to src/interfaces/assistants_web/src/components/Composer/ComposerFile.tsx
index d378e8a965..6280120a99 100644
--- a/src/interfaces/assistants_web/src/components/MessageFile.tsx
+++ b/src/interfaces/assistants_web/src/components/Composer/ComposerFile.tsx
@@ -2,9 +2,8 @@
 
 import React from 'react';
 
-import { Icon, Skeleton, Text } from '@/components/Shared';
-import { cn, formatFileSize } from '@/utils';
-import { getFileExtension } from '@/utils';
+import { Icon, Skeleton, Text } from '@/components/UI';
+import { cn, formatFileSize, getFileExtension } from '@/utils';
 
 type Props = {
   name?: string;
@@ -20,7 +19,7 @@ const getFileType = (fileName: string) => {
 };
 
 /**
- * @description Renders a file card in a chat message or composer.
+ * @description Renders a file card in the composer.
  */
 export const MessageFile: React.FC<Props> = ({
   name,
diff --git a/src/interfaces/assistants_web/src/components/Composer/ComposerFiles.tsx b/src/interfaces/assistants_web/src/components/Composer/ComposerFiles.tsx
new file mode 100644
index 0000000000..85eae88506
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Composer/ComposerFiles.tsx
@@ -0,0 +1,119 @@
+'use client';
+
+import React from 'react';
+
+import { Icon, Skeleton, Text } from '@/components/UI';
+import { useFilesStore, useParamsStore } from '@/stores';
+import { cn, formatFileSize, getFileExtension } from '@/utils';
+
+/**
+ * @description Displays files that have been prepared to be uploaded along with the next chat request
+ */
+export const ComposerFiles = () => {
+  const {
+    files: { composerFiles, uploadingFiles },
+    deleteUploadingFile,
+    deleteComposerFile,
+  } = useFilesStore();
+
+  const {
+    params: { fileIds },
+    setParams,
+  } = useParamsStore();
+
+  const handleComposerFileDelete = (fileId: string) => {
+    deleteComposerFile(fileId);
+
+    if (fileIds?.some((d) => d === fileId)) {
+      setParams({ fileIds: fileIds.filter((d) => d !== fileId) });
+    }
+  };
+
+  const noErrorUploadingFiles = uploadingFiles.filter((document) => !document.error);
+
+  if (composerFiles.length === 0 && noErrorUploadingFiles.length === 0) return null;
+
+  return (
+    <div className="flex max-h-36 flex-wrap gap-2 overflow-scroll p-2">
+      {composerFiles.map((file, index) => (
+        <File
+          key={index}
+          name={file.file_name}
+          size={file.file_size ?? 0}
+          onDelete={() => handleComposerFileDelete(file.id ?? '')}
+        />
+      ))}
+      {noErrorUploadingFiles.map((document, index) => (
+        <File
+          key={index}
+          name={document.file.name}
+          progress={document.progress}
+          onDelete={() => deleteUploadingFile(document.id ?? '')}
+        />
+      ))}
+    </div>
+  );
+};
+
+const File: React.FC<{
+  name?: string;
+  size?: number;
+  progress?: number;
+  onDelete: VoidFunction;
+}> = ({ name = '', size, progress, onDelete }) => {
+  const type = getFileExtension(name ?? '')?.replace(/^./, '');
+  const fileSize = size !== undefined ? formatFileSize(size) : undefined;
+
+  return (
+    <div
+      className={cn(
+        'group flex w-48 gap-x-2 rounded bg-mushroom-600/10 p-3 md:w-60',
+        'transition-colors ease-in-out hover:bg-mushroom-600/20'
+      )}
+    >
+      <div
+        className={cn(
+          'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded',
+          'transition-colors ease-in-out',
+          'bg-mushroom-600/20 text-mushroom-300 dark:text-marble-950',
+          { 'text-mushroom-500 dark:text-volcanic-600': progress !== undefined }
+        )}
+      >
+        <Icon name="file" kind="outline" />
+      </div>
+      <div className="flex w-full flex-grow flex-col gap-y-0.5 truncate">
+        <Text styleAs="label" className="w-full truncate font-medium">
+          {name}
+        </Text>
+        <div className="flex items-center gap-x-2 uppercase">
+          {type && (
+            <Text styleAs="caption" className="text-volcanic-500 dark:text-marble-900">
+              {type} •
+            </Text>
+          )}
+
+          {progress ? (
+            <Text styleAs="caption" className="text-volcanic-300 dark:text-marble-900">
+              {progress}%
+            </Text>
+          ) : fileSize ? (
+            <Text styleAs="caption" className="text-volcanic-500 dark:text-marble-900">
+              {fileSize}
+            </Text>
+          ) : (
+            <Skeleton className="h-5 w-10 bg-mushroom-600/20 dark:bg-volcanic-600" />
+          )}
+        </div>
+      </div>
+      {onDelete && (
+        <button
+          type="button"
+          onClick={onDelete}
+          className="flex h-4 w-4 flex-shrink-0 text-mushroom-300 dark:text-marble-850 md:invisible md:group-hover:visible"
+        >
+          <Icon name="close" />
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerToolbar.tsx b/src/interfaces/assistants_web/src/components/Composer/ComposerToolbar.tsx
similarity index 82%
rename from src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerToolbar.tsx
rename to src/interfaces/assistants_web/src/components/Composer/ComposerToolbar.tsx
index 4343eb5a61..75df594412 100644
--- a/src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerToolbar.tsx
+++ b/src/interfaces/assistants_web/src/components/Composer/ComposerToolbar.tsx
@@ -3,8 +3,7 @@
 import React from 'react';
 
 import { AgentPublic, ManagedTool } from '@/cohere-client';
-import { DataSourceMenu } from '@/components/Conversation/Composer/DataSourceMenu';
-import { FilesMenu } from '@/components/Conversation/Composer/FilesMenu';
+import { DataSourceMenu, FilesMenu } from '@/components/Composer';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Composer/DataSourceMenu.tsx b/src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/Conversation/Composer/DataSourceMenu.tsx
rename to src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx
index ff82a4298d..765976a3da 100644
--- a/src/interfaces/assistants_web/src/components/Conversation/Composer/DataSourceMenu.tsx
+++ b/src/interfaces/assistants_web/src/components/Composer/DataSourceMenu.tsx
@@ -4,13 +4,10 @@ import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
 import React from 'react';
 
 import { AgentPublic, ManagedTool } from '@/cohere-client';
-import { Icon, Switch, Text } from '@/components/Shared';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { useAvailableTools } from '@/hooks/tools';
+import { Icon, Switch, Text } from '@/components/UI';
+import { useAvailableTools, useBrandedColors } from '@/hooks';
 import { useParamsStore } from '@/stores';
-import { cn } from '@/utils';
-import { checkIsBaseAgent } from '@/utils/agents';
-import { getToolIcon } from '@/utils/tools';
+import { checkIsBaseAgent, cn, getToolIcon } from '@/utils';
 
 export type Props = {
   agent?: AgentPublic;
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Composer/FilesMenu.tsx b/src/interfaces/assistants_web/src/components/Composer/FilesMenu.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/Conversation/Composer/FilesMenu.tsx
rename to src/interfaces/assistants_web/src/components/Composer/FilesMenu.tsx
index 3c345c3850..9854a5d1fb 100644
--- a/src/interfaces/assistants_web/src/components/Conversation/Composer/FilesMenu.tsx
+++ b/src/interfaces/assistants_web/src/components/Composer/FilesMenu.tsx
@@ -1,10 +1,9 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
 import { useRef } from 'react';
 
-import { Icon, Text, Tooltip } from '@/components/Shared';
+import { Icon, Text, Tooltip } from '@/components/UI';
 import { ACCEPTED_FILE_TYPES } from '@/constants';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { useChatRoutes } from '@/hooks/chatRoutes';
+import { useBrandedColors, useChatRoutes } from '@/hooks';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Composer/index.ts b/src/interfaces/assistants_web/src/components/Composer/index.ts
new file mode 100644
index 0000000000..3cd2736f91
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Composer/index.ts
@@ -0,0 +1,6 @@
+export * from './Composer';
+export * from './ComposerError';
+export * from './ComposerFiles';
+export * from './ComposerToolbar';
+export * from './DataSourceMenu';
+export * from './FilesMenu';
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerError.tsx b/src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerError.tsx
deleted file mode 100644
index 0bb526252d..0000000000
--- a/src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerError.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { FileError } from '@/components/FileError';
-import { useFilesStore } from '@/stores';
-import { cn } from '@/utils';
-
-type Props = { className?: string };
-/**
- * @description Renders an error message under the composer. Right now it is only for file upload
- * errors.
- */
-export const ComposerError: React.FC<Props> = ({ className = '' }) => {
-  const {
-    files: { uploadingFiles },
-  } = useFilesStore();
-  const latestFile = uploadingFiles[uploadingFiles.length - 1];
-
-  return (
-    <FileError
-      error={latestFile?.error}
-      file={latestFile?.file}
-      className={cn('min-h-[14px]', className)}
-    />
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerFiles.tsx b/src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerFiles.tsx
deleted file mode 100644
index 11167f6eb0..0000000000
--- a/src/interfaces/assistants_web/src/components/Conversation/Composer/ComposerFiles.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { MessageFile } from '@/components/MessageFile';
-import { useFilesStore, useParamsStore } from '@/stores';
-
-/**
- * @description Displays files that have been prepared to be uploaded along with the next chat request
- */
-export const ComposerFiles = () => {
-  const {
-    files: { composerFiles, uploadingFiles },
-    deleteUploadingFile,
-    deleteComposerFile,
-  } = useFilesStore();
-
-  const {
-    params: { fileIds },
-    setParams,
-  } = useParamsStore();
-
-  const handleComposerFileDelete = (fileId: string) => {
-    deleteComposerFile(fileId);
-
-    if (fileIds?.some((d) => d === fileId)) {
-      setParams({ fileIds: fileIds.filter((d) => d !== fileId) });
-    }
-  };
-
-  const noErrorUploadingFiles = uploadingFiles.filter((document) => !document.error);
-
-  if (composerFiles.length === 0 && noErrorUploadingFiles.length === 0) return null;
-
-  return (
-    <div className="flex max-h-36 flex-wrap gap-2 overflow-scroll p-2">
-      {composerFiles.map((file, index) => (
-        <MessageFile
-          key={index}
-          hoverAnimation
-          name={file.file_name ?? ''}
-          size={file.file_size ?? 0}
-          className="w-48 md:w-60"
-          onDelete={() => handleComposerFileDelete(file.id ?? '')}
-        />
-      ))}
-      {noErrorUploadingFiles.map((document, index) => (
-        <MessageFile
-          key={index}
-          hoverAnimation
-          name={document.file.name ?? ''}
-          progress={document.progress}
-          className="w-48 md:w-60"
-          onDelete={() => deleteUploadingFile(document.id ?? '')}
-        />
-      ))}
-    </div>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Composer/DragDropFileUploadOverlay.tsx b/src/interfaces/assistants_web/src/components/Conversation/Composer/DragDropFileUploadOverlay.tsx
deleted file mode 100644
index 5394df3073..0000000000
--- a/src/interfaces/assistants_web/src/components/Conversation/Composer/DragDropFileUploadOverlay.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client';
-
-import React from 'react';
-
-import { DragDropFileInput } from '@/components/Shared';
-import { ACCEPTED_FILE_TYPES } from '@/constants';
-import { useFocusFileInput } from '@/hooks/actions';
-import { cn } from '@/utils';
-
-export const DragDropFileUploadOverlay: React.FC<{
-  active: boolean;
-  onUploadFile: (files: File[]) => void;
-}> = ({ active, onUploadFile }) => {
-  const { focusFileInput } = useFocusFileInput();
-
-  const handleUploadFile = async (files: File[]) => {
-    focusFileInput();
-    onUploadFile(files);
-  };
-
-  return (
-    <DragDropFileInput
-      label="Drop to upload"
-      subLabel=""
-      onDrop={handleUploadFile}
-      multiple
-      accept={ACCEPTED_FILE_TYPES}
-      dragActiveDefault={true}
-      className={cn(
-        'absolute inset-0 z-drag-drop-input-overlay hidden h-full w-full rounded border-none bg-mushroom-800',
-        {
-          flex: active,
-        }
-      )}
-    />
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Composer/WebSearchConfigurationModal.tsx b/src/interfaces/assistants_web/src/components/Conversation/Composer/WebSearchConfigurationModal.tsx
deleted file mode 100644
index 7b795336a3..0000000000
--- a/src/interfaces/assistants_web/src/components/Conversation/Composer/WebSearchConfigurationModal.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-
-import { Button, Input } from '@/components/Shared';
-import { useParamsStore } from '@/stores';
-
-/**
- * @description Modal for configuring options on the web search tool.
- * @wujessica: This component is not currently used since we do not have the tool options param yet.
- */
-export const WebSearchModal: React.FC<{
-  onSave: (site: string) => void;
-  onCancel: VoidFunction;
-}> = ({ onSave, onCancel }) => {
-  const {
-    params: { tools },
-  } = useParamsStore();
-  const [site, setSite] = useState('');
-
-  return (
-    <form
-      className="flex flex-col gap-y-8"
-      onSubmit={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        onSave(site);
-      }}
-    >
-      <Input
-        label="Site"
-        placeholder="Ground on 1 domain e.g. wikipedia.org"
-        value={site}
-        onChange={(e) => setSite(e.target.value)}
-      />
-      <div className="flex w-full items-center justify-between">
-        <Button label="Cancel" theme="danger" onClick={onCancel} />
-        <Button buttonType="submit" label="Save" kind="cell" />
-      </div>
-    </form>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Conversation/index.tsx b/src/interfaces/assistants_web/src/components/Conversation/Conversation.tsx
similarity index 83%
rename from src/interfaces/assistants_web/src/components/Conversation/index.tsx
rename to src/interfaces/assistants_web/src/components/Conversation/Conversation.tsx
index 56180eb9b7..6018a68598 100644
--- a/src/interfaces/assistants_web/src/components/Conversation/index.tsx
+++ b/src/interfaces/assistants_web/src/components/Conversation/Conversation.tsx
@@ -3,13 +3,15 @@
 import React, { useRef } from 'react';
 
 import { AgentPublic, ManagedTool } from '@/cohere-client';
-import { Composer } from '@/components/Conversation/Composer';
-import { Header } from '@/components/Conversation/Header';
-import MessagingContainer from '@/components/Conversation/MessagingContainer';
-import { WelcomeGuideTooltip } from '@/components/WelcomeGuideTooltip';
-import { useChat } from '@/hooks/chat';
-import { useConversationFileActions } from '@/hooks/files';
-import { WelcomeGuideStep, useWelcomeGuideState } from '@/hooks/ftux';
+import { Composer } from '@/components/Composer';
+import { Header } from '@/components/Conversation';
+import { MessagingContainer, WelcomeGuideTooltip } from '@/components/MessagingContainer';
+import {
+  WelcomeGuideStep,
+  useChat,
+  useConversationFileActions,
+  useWelcomeGuideState,
+} from '@/hooks';
 import { useConversationStore } from '@/stores';
 import { ConfigurableParams } from '@/stores/slices/paramsSlice';
 import { ChatMessage } from '@/types/message';
@@ -25,7 +27,7 @@ type Props = {
  * @description Renders the entire conversation pane, which includes the header, messages,
  * composer, and the citation panel.
  */
-const Conversation: React.FC<Props> = ({ agent, tools, startOptionsEnabled = false }) => {
+export const Conversation: React.FC<Props> = ({ agent, tools, startOptionsEnabled = false }) => {
   const { uploadFiles } = useConversationFileActions();
   const { welcomeGuideState, finishWelcomeGuide } = useWelcomeGuideState();
   const {
@@ -97,5 +99,3 @@ const Conversation: React.FC<Props> = ({ agent, tools, startOptionsEnabled = fal
     </div>
   );
 };
-
-export default Conversation;
diff --git a/src/interfaces/assistants_web/src/components/ConversationError.tsx b/src/interfaces/assistants_web/src/components/Conversation/ConversationError.tsx
similarity index 82%
rename from src/interfaces/assistants_web/src/components/ConversationError.tsx
rename to src/interfaces/assistants_web/src/components/Conversation/ConversationError.tsx
index 2f9420fe1a..9554742a71 100644
--- a/src/interfaces/assistants_web/src/components/ConversationError.tsx
+++ b/src/interfaces/assistants_web/src/components/Conversation/ConversationError.tsx
@@ -3,12 +3,12 @@
 import Link from 'next/link';
 
 import { isNotFoundError } from '@/cohere-client';
-import { Header } from '@/components/Conversation/Header';
-import { Icon } from '@/components/Shared/Icon';
-import { Text } from '@/components/Shared/Text';
-import { useChatRoutes } from '@/hooks/chatRoutes';
+import { Icon, Text } from '@/components/UI';
+import { useChatRoutes } from '@/hooks';
 import { cn } from '@/utils';
 
+import { Header } from './Header';
+
 type Props = {
   error: Error;
 };
diff --git a/src/interfaces/assistants_web/src/components/Agents/RightPanel.tsx b/src/interfaces/assistants_web/src/components/Conversation/ConversationPanel.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/Agents/RightPanel.tsx
rename to src/interfaces/assistants_web/src/components/Conversation/ConversationPanel.tsx
index 5a24f49752..ac3dd76fdd 100644
--- a/src/interfaces/assistants_web/src/components/Agents/RightPanel.tsx
+++ b/src/interfaces/assistants_web/src/components/Conversation/ConversationPanel.tsx
@@ -4,21 +4,23 @@ import { Transition } from '@headlessui/react';
 import { uniqBy } from 'lodash';
 import { useMemo, useState } from 'react';
 
-import { IconButton } from '@/components/IconButton';
-import { Banner, Button, Icon, Text, Tooltip } from '@/components/Shared';
+import { Banner, Button, Icon, IconButton, Text, Tooltip } from '@/components/UI';
 import { TOOL_GOOGLE_DRIVE_ID, TOOL_READ_DOCUMENT_ID, TOOL_SEARCH_FILE_ID } from '@/constants';
-import { useAgent } from '@/hooks/agents';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { useChatRoutes } from '@/hooks/chatRoutes';
-import { useConversationFileActions, useListConversationFiles } from '@/hooks/files';
-import { useSession } from '@/hooks/session';
+import {
+  useAgent,
+  useBrandedColors,
+  useChatRoutes,
+  useConversationFileActions,
+  useListConversationFiles,
+  useSession,
+} from '@/hooks';
 import { useParamsStore, useSettingsStore } from '@/stores';
 import { DataSourceArtifact } from '@/types/tools';
 import { pluralize } from '@/utils';
 
 type Props = {};
 
-const RightPanel: React.FC<Props> = () => {
+export const ConversationPanel: React.FC<Props> = () => {
   const [isDeletingFile, setIsDeletingFile] = useState(false);
   const { disabledAssistantKnowledge, setRightPanelOpen } = useSettingsStore();
   const { agentId, conversationId } = useChatRoutes();
@@ -218,5 +220,3 @@ const RightPanel: React.FC<Props> = () => {
     </aside>
   );
 };
-
-export default RightPanel;
diff --git a/src/interfaces/assistants_web/src/components/Conversation/Header.tsx b/src/interfaces/assistants_web/src/components/Conversation/Header.tsx
index dadf018388..9a98a3b035 100644
--- a/src/interfaces/assistants_web/src/components/Conversation/Header.tsx
+++ b/src/interfaces/assistants_web/src/components/Conversation/Header.tsx
@@ -1,12 +1,11 @@
 'use client';
 
 import { AgentPublic } from '@/cohere-client';
-import { IconButton } from '@/components/IconButton';
-import { ShareModal } from '@/components/ShareModal';
-import { Button, Icon, Logo, Text } from '@/components/Shared';
+import { ShareConversation } from '@/components/Modals/ShareConversation';
+import { Button, Icon, IconButton, Logo, Text } from '@/components/UI';
 import { useContextStore } from '@/context';
 import { env } from '@/env.mjs';
-import { useBrandedColors } from '@/hooks/brandedColors';
+import { useBrandedColors } from '@/hooks';
 import { useConversationStore, useSettingsStore } from '@/stores';
 import { cn } from '@/utils';
 
@@ -28,7 +27,7 @@ export const Header: React.FC<Props> = ({ agent }) => {
     if (!id) return;
     open({
       title: 'Share link to conversation',
-      content: <ShareModal conversationId={id} />,
+      content: <ShareConversation conversationId={id} />,
     });
   };
 
diff --git a/src/interfaces/assistants_web/src/components/Conversation/index.ts b/src/interfaces/assistants_web/src/components/Conversation/index.ts
new file mode 100644
index 0000000000..14324596ac
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Conversation/index.ts
@@ -0,0 +1,4 @@
+export * from './Conversation';
+export * from './ConversationError';
+export * from './Header';
+export * from './ConversationPanel';
diff --git a/src/interfaces/assistants_web/src/components/EditEnvVariablesButton.tsx b/src/interfaces/assistants_web/src/components/EditEnvVariablesButton.tsx
deleted file mode 100644
index 23ec341b53..0000000000
--- a/src/interfaces/assistants_web/src/components/EditEnvVariablesButton.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-'use client';
-
-import React, { useMemo, useState } from 'react';
-
-import { Button, Dropdown, Input } from '@/components/Shared';
-import { useContextStore } from '@/context';
-import { useListAllDeployments } from '@/hooks/deployments';
-import { useParamsStore } from '@/stores';
-
-/**
- * @description Button to trigger a modal to edit .env variables.
- */
-export const EditEnvVariablesButton: React.FC<{ className?: string }> = () => {
-  const { open, close } = useContextStore();
-
-  const handleClick = () => {
-    open({
-      title: 'Configure Model Deployment',
-      content: <EditEnvVariablesModal onClose={close} defaultDeployment="" />,
-    });
-  };
-
-  return <Button label="Configure" kind="secondary" onClick={handleClick} />;
-};
-
-/**
- * @description Renders a modal to edit a selected deployment's config
- */
-export const EditEnvVariablesModal: React.FC<{
-  defaultDeployment: string;
-  onClose: () => void;
-}> = ({ defaultDeployment, onClose }) => {
-  const { data: deployments } = useListAllDeployments();
-
-  const [deployment, setDeployment] = useState<string | undefined>(defaultDeployment);
-  const [envVariables, setEnvVariables] = useState<Record<string, string>>(() => {
-    const selectedDeployment = deployments?.find(({ name }) => name === defaultDeployment);
-    return (
-      selectedDeployment?.env_vars?.reduce<Record<string, string>>((acc, envVar) => {
-        acc[envVar] = '';
-        return acc;
-      }, {}) ?? {}
-    );
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
-
-  const { setParams } = useParamsStore();
-
-  const deploymentOptions = useMemo(
-    () =>
-      (deployments ?? []).map(({ name }) => ({
-        label: name,
-        value: name,
-      })),
-
-    [deployments]
-  );
-
-  const handleDeploymentChange = (newDeployment: string) => {
-    setDeployment(newDeployment);
-    const selectedDeployment = deployments?.find(({ name }) => name === newDeployment);
-    const emptyEnvVariables =
-      selectedDeployment?.env_vars?.reduce<Record<string, string>>((acc, envVar) => {
-        acc[envVar] = '';
-        return acc;
-      }, {}) ?? {};
-    setEnvVariables(emptyEnvVariables);
-  };
-
-  const handleEnvVariableChange = (envVar: string) => (e: React.ChangeEvent<HTMLInputElement>) => {
-    setEnvVariables({ ...envVariables, [envVar]: e.target.value });
-  };
-
-  const handleSubmit = async () => {
-    if (!deployment) return;
-
-    setIsSubmitting(true);
-    setParams({
-      deploymentConfig: Object.entries(envVariables)
-        .map(([k, v]) => k + '=' + v)
-        .join(';'),
-    });
-    setIsSubmitting(false);
-    onClose();
-  };
-
-  return (
-    <div className="flex flex-col gap-y-4 p-4">
-      <Dropdown value={deployment} options={deploymentOptions} onChange={handleDeploymentChange} />
-
-      {Object.keys(envVariables).map((envVar) => (
-        <Input
-          key={envVar}
-          placeholder="value"
-          label={envVar}
-          type="password"
-          value={envVariables[envVar]}
-          onChange={handleEnvVariableChange(envVar)}
-        />
-      ))}
-
-      <span className="mt-10 flex items-center justify-between">
-        <Button label="Cancel" kind="secondary" onClick={onClose} />
-        <Button
-          label={isSubmitting ? 'Saving...' : 'Save'}
-          onClick={handleSubmit}
-          disabled={isSubmitting}
-        />
-      </span>
-    </div>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/MobileHeader.tsx b/src/interfaces/assistants_web/src/components/Global/MobileHeader.tsx
similarity index 92%
rename from src/interfaces/assistants_web/src/components/MobileHeader.tsx
rename to src/interfaces/assistants_web/src/components/Global/MobileHeader.tsx
index 04ec33af9b..e256d495a1 100644
--- a/src/interfaces/assistants_web/src/components/MobileHeader.tsx
+++ b/src/interfaces/assistants_web/src/components/Global/MobileHeader.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Logo } from '@/components/Shared';
+import { Logo } from '@/components/UI';
 import { env } from '@/env.mjs';
 import { useSettingsStore } from '@/stores';
 
diff --git a/src/interfaces/assistants_web/src/components/Swipeable.tsx b/src/interfaces/assistants_web/src/components/Global/Swipeable.tsx
similarity index 63%
rename from src/interfaces/assistants_web/src/components/Swipeable.tsx
rename to src/interfaces/assistants_web/src/components/Global/Swipeable.tsx
index 8ed8816af1..2ee24167bd 100644
--- a/src/interfaces/assistants_web/src/components/Swipeable.tsx
+++ b/src/interfaces/assistants_web/src/components/Global/Swipeable.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useSwipeable } from '@/hooks/swipeable';
+import { useSwipeable } from '@/hooks';
 
 export const Swipeable = () => {
   useSwipeable();
diff --git a/src/interfaces/assistants_web/src/components/Global/index.ts b/src/interfaces/assistants_web/src/components/Global/index.ts
new file mode 100644
index 0000000000..ec0e7e3903
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Global/index.ts
@@ -0,0 +1,2 @@
+export * from './MobileHeader';
+export * from './Swipeable';
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/CommandAction.tsx b/src/interfaces/assistants_web/src/components/HotKeys/CommandAction.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/Shared/HotKeys/CommandAction.tsx
rename to src/interfaces/assistants_web/src/components/HotKeys/CommandAction.tsx
index cfa1a6a6ea..bddfddfb1f 100644
--- a/src/interfaces/assistants_web/src/components/Shared/HotKeys/CommandAction.tsx
+++ b/src/interfaces/assistants_web/src/components/HotKeys/CommandAction.tsx
@@ -1,10 +1,12 @@
+'use client';
+
 import { ComboboxOption } from '@headlessui/react';
 import { useMemo } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { type QuickAction } from '@/components/Shared/HotKeys/domain';
-import { Text } from '@/components/Shared/Text';
-import { useOS } from '@/hooks/os';
+import { type QuickAction } from '@/components/HotKeys';
+import { Text } from '@/components/UI';
+import { useOS } from '@/hooks';
 import { cn } from '@/utils';
 
 interface Props extends QuickAction {
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/CommandActionGroup.tsx b/src/interfaces/assistants_web/src/components/HotKeys/CommandActionGroup.tsx
similarity index 73%
rename from src/interfaces/assistants_web/src/components/Shared/HotKeys/CommandActionGroup.tsx
rename to src/interfaces/assistants_web/src/components/HotKeys/CommandActionGroup.tsx
index f00c0ce02a..a84f281f2e 100644
--- a/src/interfaces/assistants_web/src/components/Shared/HotKeys/CommandActionGroup.tsx
+++ b/src/interfaces/assistants_web/src/components/HotKeys/CommandActionGroup.tsx
@@ -1,15 +1,14 @@
 'use client';
 
-import { Text } from '@/components/Shared';
-import { CommandAction } from '@/components/Shared/HotKeys/CommandAction';
-import { type HotKeyGroupOption } from '@/components/Shared/HotKeys/domain';
+import { CommandAction, type HotKeyGroupOption } from '@/components/HotKeys';
+import { Text } from '@/components/UI';
 
 type Props = {
   isOpen: boolean;
   options?: HotKeyGroupOption[];
 };
 
-const CommandActionGroup: React.FC<Props> = ({ isOpen, options = [] }) => {
+export const CommandActionGroup: React.FC<Props> = ({ isOpen, options = [] }) => {
   return (
     <div className="flex flex-col gap-y-4">
       {options.map((action, i) => {
@@ -34,5 +33,3 @@ const CommandActionGroup: React.FC<Props> = ({ isOpen, options = [] }) => {
     </div>
   );
 };
-
-export default CommandActionGroup;
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeys.tsx b/src/interfaces/assistants_web/src/components/HotKeys/HotKeys.tsx
similarity index 83%
rename from src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeys.tsx
rename to src/interfaces/assistants_web/src/components/HotKeys/HotKeys.tsx
index 943913be52..31a22ef9fd 100644
--- a/src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeys.tsx
+++ b/src/interfaces/assistants_web/src/components/HotKeys/HotKeys.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import { HotKeysProvider } from '@/components/Shared/HotKeys/HotKeysProvider';
+import { HotKeysProvider } from '@/components/HotKeys';
 import {
   useAssistantHotKeys,
   useConversationHotKeys,
   useSettingsHotKeys,
   useViewHotKeys,
-} from '@/hooks/actions';
+} from '@/hooks';
 
 export const HotKeys: React.FC = () => {
   const conversationHotKeys = useConversationHotKeys();
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysDialog.tsx b/src/interfaces/assistants_web/src/components/HotKeys/HotKeysDialog.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysDialog.tsx
rename to src/interfaces/assistants_web/src/components/HotKeys/HotKeysDialog.tsx
index bc5f438c16..c2d9c6ff5f 100644
--- a/src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysDialog.tsx
+++ b/src/interfaces/assistants_web/src/components/HotKeys/HotKeysDialog.tsx
@@ -10,10 +10,12 @@ import {
 } from '@headlessui/react';
 import { Fragment, useEffect, useMemo, useState } from 'react';
 
-import CommandActionGroup from '@/components/Shared/HotKeys/CommandActionGroup';
-import { HotKeysDialogInput } from '@/components/Shared/HotKeys/HotKeysDialogInput';
-import { type HotKeyGroupOption } from '@/components/Shared/HotKeys/domain';
-import { Text } from '@/components/Shared/Text';
+import {
+  CommandActionGroup,
+  type HotKeyGroupOption,
+  HotKeysDialogInput,
+} from '@/components/HotKeys';
+import { Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysDialogInput.tsx b/src/interfaces/assistants_web/src/components/HotKeys/HotKeysDialogInput.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysDialogInput.tsx
rename to src/interfaces/assistants_web/src/components/HotKeys/HotKeysDialogInput.tsx
index 4cc05fdb70..17618825f6 100644
--- a/src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysDialogInput.tsx
+++ b/src/interfaces/assistants_web/src/components/HotKeys/HotKeysDialogInput.tsx
@@ -1,7 +1,6 @@
 import { ComboboxInput } from '@headlessui/react';
 
-import { Icon } from '@/components/Shared/Icon';
-import { Input } from '@/components/Shared/Input';
+import { Icon, Input } from '@/components/UI';
 
 type Props = {
   value: string;
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysProvider.tsx b/src/interfaces/assistants_web/src/components/HotKeys/HotKeysProvider.tsx
similarity index 89%
rename from src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysProvider.tsx
rename to src/interfaces/assistants_web/src/components/HotKeys/HotKeysProvider.tsx
index 63d31ffc88..3e54879111 100644
--- a/src/interfaces/assistants_web/src/components/Shared/HotKeys/HotKeysProvider.tsx
+++ b/src/interfaces/assistants_web/src/components/HotKeys/HotKeysProvider.tsx
@@ -3,8 +3,7 @@
 import { useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 
-import { HotKeysDialog } from '@/components/Shared/HotKeys/HotKeysDialog';
-import { CustomHotKey, type HotKeyGroupOption } from '@/components/Shared/HotKeys/domain';
+import { CustomHotKey, type HotKeyGroupOption, HotKeysDialog } from '@/components/HotKeys';
 
 type HotKeysProviderProps = {
   hotKeys: HotKeyGroupOption[];
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/custom-views/SwitchAssistants.tsx b/src/interfaces/assistants_web/src/components/HotKeys/custom-views/SwitchAssistants.tsx
similarity index 72%
rename from src/interfaces/assistants_web/src/components/Shared/HotKeys/custom-views/SwitchAssistants.tsx
rename to src/interfaces/assistants_web/src/components/HotKeys/custom-views/SwitchAssistants.tsx
index 24f852cf61..940b2c8e78 100644
--- a/src/interfaces/assistants_web/src/components/Shared/HotKeys/custom-views/SwitchAssistants.tsx
+++ b/src/interfaces/assistants_web/src/components/HotKeys/custom-views/SwitchAssistants.tsx
@@ -1,8 +1,7 @@
 import { ComboboxOptions } from '@headlessui/react';
 
-import CommandActionGroup from '@/components/Shared/HotKeys/CommandActionGroup';
-import { HotKeysDialogInput } from '@/components/Shared/HotKeys/HotKeysDialogInput';
-import { useAssistantHotKeys } from '@/hooks/actions';
+import { CommandActionGroup, HotKeysDialogInput } from '@/components/HotKeys';
+import { useAssistantHotKeys } from '@/hooks';
 
 type Props = {
   close: VoidFunction;
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/domain.ts b/src/interfaces/assistants_web/src/components/HotKeys/domain.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/HotKeys/domain.ts
rename to src/interfaces/assistants_web/src/components/HotKeys/domain.ts
diff --git a/src/interfaces/assistants_web/src/components/HotKeys/index.ts b/src/interfaces/assistants_web/src/components/HotKeys/index.ts
new file mode 100644
index 0000000000..4978357f82
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/HotKeys/index.ts
@@ -0,0 +1,8 @@
+export * from './CommandAction';
+export * from './CommandActionGroup';
+export * from './custom-views/SwitchAssistants';
+export * from './domain';
+export * from './HotKeys';
+export * from './HotKeysDialog';
+export * from './HotKeysDialogInput';
+export * from './HotKeysProvider';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/Markdown.tsx b/src/interfaces/assistants_web/src/components/Markdown/Markdown.tsx
similarity index 89%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/Markdown.tsx
rename to src/interfaces/assistants_web/src/components/Markdown/Markdown.tsx
index 5767120f9b..c51e6273d6 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Markdown/Markdown.tsx
+++ b/src/interfaces/assistants_web/src/components/Markdown/Markdown.tsx
@@ -10,20 +10,22 @@ import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import { PluggableList } from 'unified';
 
-import { removeExtraBlankSpaces } from '@/components/Shared/Markdown/directives/utils';
-import { Iframe } from '@/components/Shared/Markdown/tags/Iframe';
-import { Text } from '@/components/Shared/Text';
+import {
+  Anchor,
+  Iframe,
+  P,
+  Pre,
+  References,
+  remarkReferences,
+  removeExtraBlankSpaces,
+  renderRemarkCites,
+  renderRemarkTags,
+  renderRemarkUnknowns,
+  renderTableTools,
+} from '@/components/Markdown';
+import { Text } from '@/components/UI';
 import { cn } from '@/utils';
 
-import { renderRemarkCites } from './directives/cite';
-import { remarkReferences } from './directives/code';
-import { renderTableTools } from './directives/table-tools';
-import { renderRemarkTags } from './directives/tag';
-import { renderRemarkUnknowns } from './directives/unknown';
-import { P } from './tags/P';
-import { Pre } from './tags/Pre';
-import { References } from './tags/References';
-
 type MarkdownTextProps = {
   text: string;
   className?: string;
@@ -110,6 +112,7 @@ export const Markdown = ({
       references: References,
       // @ts-ignore
       iframe: Iframe,
+      a: Anchor,
       ...customComponents,
     }),
     [customComponents]
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/directives/cite.ts b/src/interfaces/assistants_web/src/components/Markdown/directives/cite.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/directives/cite.ts
rename to src/interfaces/assistants_web/src/components/Markdown/directives/cite.ts
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/directives/code.ts b/src/interfaces/assistants_web/src/components/Markdown/directives/code.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/directives/code.ts
rename to src/interfaces/assistants_web/src/components/Markdown/directives/code.ts
diff --git a/src/interfaces/assistants_web/src/components/Markdown/directives/index.ts b/src/interfaces/assistants_web/src/components/Markdown/directives/index.ts
new file mode 100644
index 0000000000..b784f35284
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Markdown/directives/index.ts
@@ -0,0 +1,6 @@
+export * from './cite';
+export * from './code';
+export * from './table-tools';
+export * from './tag';
+export * from './unknown';
+export * from './utils';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/directives/table-tools.ts b/src/interfaces/assistants_web/src/components/Markdown/directives/table-tools.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/directives/table-tools.ts
rename to src/interfaces/assistants_web/src/components/Markdown/directives/table-tools.ts
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/directives/tag.ts b/src/interfaces/assistants_web/src/components/Markdown/directives/tag.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/directives/tag.ts
rename to src/interfaces/assistants_web/src/components/Markdown/directives/tag.ts
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/directives/unknown.ts b/src/interfaces/assistants_web/src/components/Markdown/directives/unknown.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/directives/unknown.ts
rename to src/interfaces/assistants_web/src/components/Markdown/directives/unknown.ts
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/directives/utils.ts b/src/interfaces/assistants_web/src/components/Markdown/directives/utils.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/directives/utils.ts
rename to src/interfaces/assistants_web/src/components/Markdown/directives/utils.ts
diff --git a/src/interfaces/assistants_web/src/components/Markdown/index.ts b/src/interfaces/assistants_web/src/components/Markdown/index.ts
new file mode 100644
index 0000000000..c9ff7a36b5
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Markdown/index.ts
@@ -0,0 +1,3 @@
+export * from './Markdown';
+export * from './directives';
+export * from './tags';
diff --git a/src/interfaces/assistants_web/src/components/Markdown/tags/Anchor.tsx b/src/interfaces/assistants_web/src/components/Markdown/tags/Anchor.tsx
new file mode 100644
index 0000000000..ed126a8a0e
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Markdown/tags/Anchor.tsx
@@ -0,0 +1,30 @@
+'use client';
+
+import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
+import { ComponentPropsWithoutRef } from 'react';
+
+import { Icon } from '@/components/UI';
+import { useOutputFiles } from '@/stores';
+
+export const Anchor: Component<ComponentPropsWithoutRef<'a'> & ExtraProps> = ({ children }) => {
+  const { outputFiles } = useOutputFiles();
+
+  if (typeof children === 'string') {
+    const snakeCaseUrl = children.replace(/\s/g, '_').toLowerCase();
+    const outputFile = Object.entries(outputFiles).find(([key]) =>
+      key.startsWith(snakeCaseUrl)
+    )?.[1];
+    const downloadUrl = outputFile?.downloadUrl;
+
+    if (downloadUrl) {
+      return (
+        <a href={downloadUrl} download={snakeCaseUrl} className="flex items-center gap-1">
+          {children}
+          <Icon name="download" />
+        </a>
+      );
+    }
+  }
+
+  return <a dir="auto">{children}</a>;
+};
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/tags/Iframe.tsx b/src/interfaces/assistants_web/src/components/Markdown/tags/Iframe.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/tags/Iframe.tsx
rename to src/interfaces/assistants_web/src/components/Markdown/tags/Iframe.tsx
index d16bf83928..2d19c7c30f 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Markdown/tags/Iframe.tsx
+++ b/src/interfaces/assistants_web/src/components/Markdown/tags/Iframe.tsx
@@ -7,10 +7,8 @@ import { useRef } from 'react';
 import { useState } from 'react';
 import { ComponentPropsWithoutRef } from 'react';
 
-import { CodeSnippet } from '@/components/Shared/CodeSnippet';
-import { Text } from '@/components/Shared/Text';
-import { cn } from '@/utils';
-import { cleanupCodeBlock } from '@/utils/preview';
+import { CodeSnippet, Text } from '@/components/UI';
+import { cleanupCodeBlock, cn } from '@/utils';
 
 const MIN_HEIGHT = 600;
 
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/tags/P.tsx b/src/interfaces/assistants_web/src/components/Markdown/tags/P.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/tags/P.tsx
rename to src/interfaces/assistants_web/src/components/Markdown/tags/P.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/tags/Pre.tsx b/src/interfaces/assistants_web/src/components/Markdown/tags/Pre.tsx
similarity index 95%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/tags/Pre.tsx
rename to src/interfaces/assistants_web/src/components/Markdown/tags/Pre.tsx
index 412c05070a..ade57d5a90 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Markdown/tags/Pre.tsx
+++ b/src/interfaces/assistants_web/src/components/Markdown/tags/Pre.tsx
@@ -3,7 +3,7 @@
 import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
 import { ComponentPropsWithoutRef, useRef, useState } from 'react';
 
-import { Button, Icon, Text } from '@/components/Shared';
+import { Button, Icon, Text } from '@/components/UI';
 
 export const Pre: Component<ComponentPropsWithoutRef<'pre'> & ExtraProps> = ({ children }) => {
   const [copied, setCopied] = useState(false);
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/tags/References.tsx b/src/interfaces/assistants_web/src/components/Markdown/tags/References.tsx
similarity index 91%
rename from src/interfaces/assistants_web/src/components/Shared/Markdown/tags/References.tsx
rename to src/interfaces/assistants_web/src/components/Markdown/tags/References.tsx
index 5050f5effa..49c6048650 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Markdown/tags/References.tsx
+++ b/src/interfaces/assistants_web/src/components/Markdown/tags/References.tsx
@@ -3,7 +3,7 @@
 import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
 import { ComponentPropsWithoutRef } from 'react';
 
-import { Text } from '@/components/Shared';
+import { Text } from '@/components/UI';
 
 // Since we're inserting a Text component
 // And that we're not specifyng the "as" prop
diff --git a/src/interfaces/assistants_web/src/components/Markdown/tags/index.ts b/src/interfaces/assistants_web/src/components/Markdown/tags/index.ts
new file mode 100644
index 0000000000..307cf62ab5
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Markdown/tags/index.ts
@@ -0,0 +1,5 @@
+export * from './Anchor';
+export * from './Iframe';
+export * from './P';
+export * from './Pre';
+export * from './References';
diff --git a/src/interfaces/assistants_web/src/components/Avatar.tsx b/src/interfaces/assistants_web/src/components/MessageRow/Avatar.tsx
similarity index 89%
rename from src/interfaces/assistants_web/src/components/Avatar.tsx
rename to src/interfaces/assistants_web/src/components/MessageRow/Avatar.tsx
index b9c8cb80df..99ae92c815 100644
--- a/src/interfaces/assistants_web/src/components/Avatar.tsx
+++ b/src/interfaces/assistants_web/src/components/MessageRow/Avatar.tsx
@@ -3,12 +3,10 @@
 import Lottie from 'react-lottie-player';
 
 import logoTyping from '@/assets/lotties/icon-loop-coral-950.json';
-import { CoralLogo } from '@/components/Shared/CoralLogo';
-import { Icon } from '@/components/Shared/Icon';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { useChatRoutes } from '@/hooks/chatRoutes';
+import { CoralLogo, Icon } from '@/components/UI';
+import { useBrandedColors, useChatRoutes } from '@/hooks';
 import { BotState, ChatMessage, MessageType, isFulfilledMessage } from '@/types/message';
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils';
 
 type Props = {
   message: ChatMessage;
diff --git a/src/interfaces/assistants_web/src/components/Citations/Citation.tsx b/src/interfaces/assistants_web/src/components/MessageRow/Citation.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Citations/Citation.tsx
rename to src/interfaces/assistants_web/src/components/MessageRow/Citation.tsx
index e030d42854..1d866fbaa3 100644
--- a/src/interfaces/assistants_web/src/components/Citations/Citation.tsx
+++ b/src/interfaces/assistants_web/src/components/MessageRow/Citation.tsx
@@ -1,9 +1,10 @@
 import Link from 'next/link';
 import { useState } from 'react';
 
-import { DocumentIcon, Icon, Markdown, Text } from '@/components/Shared';
+import { Markdown } from '@/components/Markdown';
+import { DocumentIcon, Icon, Text } from '@/components/UI';
 import { TOOL_ID_TO_DISPLAY_INFO, TOOL_WEB_SEARCH_ID, TOOL_WIKIPEDIA_ID } from '@/constants';
-import { useBrandedColors } from '@/hooks/brandedColors';
+import { useBrandedColors } from '@/hooks';
 import { useCitationsStore } from '@/stores';
 import { cn, getSafeUrl, getWebDomain } from '@/utils';
 
diff --git a/src/interfaces/assistants_web/src/components/Citations/CitationTextHighlighter.tsx b/src/interfaces/assistants_web/src/components/MessageRow/CitationTextHighlighter.tsx
similarity index 90%
rename from src/interfaces/assistants_web/src/components/Citations/CitationTextHighlighter.tsx
rename to src/interfaces/assistants_web/src/components/MessageRow/CitationTextHighlighter.tsx
index aa98e89a79..4c5dce3c02 100644
--- a/src/interfaces/assistants_web/src/components/Citations/CitationTextHighlighter.tsx
+++ b/src/interfaces/assistants_web/src/components/MessageRow/CitationTextHighlighter.tsx
@@ -3,14 +3,11 @@
 import { Popover, PopoverButton, PopoverPanel } from '@headlessui/react';
 import { PropsWithChildren } from 'react';
 
-import { Citation } from '@/components/Citations/Citation';
+import { Citation } from '@/components/MessageRow';
 import { useContextStore } from '@/context';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { Breakpoint, useBreakpoint } from '@/hooks/breakpoint';
-import { useChatRoutes } from '@/hooks/chatRoutes';
+import { Breakpoint, useBrandedColors, useBreakpoint, useChatRoutes } from '@/hooks';
 import { useCitationsStore } from '@/stores';
-import { cn } from '@/utils';
-import { createStartEndKey } from '@/utils';
+import { cn, createStartEndKey } from '@/utils';
 
 const FALLBACK_CODE_SNIPPET_TEXT = '[source]';
 
diff --git a/src/interfaces/assistants_web/src/components/DataTable.tsx b/src/interfaces/assistants_web/src/components/MessageRow/DataTable.tsx
similarity index 88%
rename from src/interfaces/assistants_web/src/components/DataTable.tsx
rename to src/interfaces/assistants_web/src/components/MessageRow/DataTable.tsx
index 2e2afcf110..ecb08b5d7d 100644
--- a/src/interfaces/assistants_web/src/components/DataTable.tsx
+++ b/src/interfaces/assistants_web/src/components/MessageRow/DataTable.tsx
@@ -3,12 +3,11 @@
 import type { Component, ExtraProps } from 'hast-util-to-jsx-runtime/lib/components';
 import { ComponentPropsWithoutRef, useCallback } from 'react';
 
-import { Icon, Text } from '@/components/Shared';
-import { StructuredTable } from '@/components/Shared/Markdown/directives/table-tools';
-import { useNotify } from '@/hooks/toast';
+import { StructuredTable } from '@/components/Markdown/directives/table-tools';
+import { Icon, Text } from '@/components/UI';
+import { useNotify } from '@/hooks';
 import { useConversationStore } from '@/stores';
-import { cn } from '@/utils';
-import { downloadFile, structuredTableToXSV } from '@/utils/download';
+import { cn, downloadFile, structuredTableToXSV } from '@/utils';
 
 const FALLBACK_FILE_NAME = 'cohere-table';
 
diff --git a/src/interfaces/assistants_web/src/components/MarkdownImage.tsx b/src/interfaces/assistants_web/src/components/MessageRow/MarkdownImage.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/MarkdownImage.tsx
rename to src/interfaces/assistants_web/src/components/MessageRow/MarkdownImage.tsx
index 4fc98b3cbf..4a65b14b85 100644
--- a/src/interfaces/assistants_web/src/components/MarkdownImage.tsx
+++ b/src/interfaces/assistants_web/src/components/MessageRow/MarkdownImage.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Text } from '@/components/Shared';
+import { Text } from '@/components/UI';
 import { useCitationsStore } from '@/stores';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/MessageContent.tsx b/src/interfaces/assistants_web/src/components/MessageRow/MessageContent.tsx
similarity index 75%
rename from src/interfaces/assistants_web/src/components/MessageContent.tsx
rename to src/interfaces/assistants_web/src/components/MessageRow/MessageContent.tsx
index 4c386031ad..a88dc0b91c 100644
--- a/src/interfaces/assistants_web/src/components/MessageContent.tsx
+++ b/src/interfaces/assistants_web/src/components/MessageRow/MessageContent.tsx
@@ -3,12 +3,9 @@
 import { Transition } from '@headlessui/react';
 import { PropsWithChildren } from 'react';
 
-import { CitationTextHighlighter } from '@/components/Citations/CitationTextHighlighter';
-import { DataTable } from '@/components/DataTable';
-import { MarkdownImage } from '@/components/MarkdownImage';
-import { MessageFile } from '@/components/MessageFile';
-import { Icon } from '@/components/Shared';
-import { Markdown, Text } from '@/components/Shared';
+import { Markdown } from '@/components/Markdown';
+import { CitationTextHighlighter, DataTable, MarkdownImage } from '@/components/MessageRow';
+import { Icon, Skeleton, Text } from '@/components/UI';
 import {
   type ChatMessage,
   MessageType,
@@ -17,7 +14,7 @@ import {
   isFulfilledOrTypingMessage,
   isLoadingMessage,
 } from '@/types/message';
-import { cn } from '@/utils';
+import { cn, formatFileSize } from '@/utils';
 
 type Props = {
   isLast: boolean;
@@ -58,7 +55,30 @@ export const MessageContent: React.FC<Props> = ({ isLast, message, onRetry }) =>
         {message.files && message.files.length > 0 && (
           <div className="flex flex-wrap gap-2 py-2">
             {message.files.map((file) => (
-              <MessageFile key={file.id} name={file.file_name} size={file.file_size} />
+              <div key={file.id} className="group flex w-60 gap-x-2 rounded bg-mushroom-600/10 p-3">
+                <div
+                  className={cn(
+                    'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded',
+                    'bg-mushroom-600/20 text-mushroom-300 dark:text-marble-950'
+                  )}
+                >
+                  <Icon name="file" kind="outline" />
+                </div>
+                <div className="flex w-full flex-grow flex-col gap-y-0.5 truncate">
+                  <Text styleAs="label" className="w-full truncate font-medium">
+                    {file.file_name}
+                  </Text>
+                  <div className="flex items-center gap-x-2 uppercase">
+                    {file.file_size ? (
+                      <Text styleAs="caption" className="text-volcanic-500 dark:text-marble-900">
+                        {formatFileSize(file.file_size)}
+                      </Text>
+                    ) : (
+                      <Skeleton className="h-5 w-10 bg-mushroom-600/20 dark:bg-volcanic-600" />
+                    )}
+                  </div>
+                </div>
+              </div>
             ))}
           </div>
         )}
diff --git a/src/interfaces/assistants_web/src/components/MessageRow/MessageFile.tsx b/src/interfaces/assistants_web/src/components/MessageRow/MessageFile.tsx
new file mode 100644
index 0000000000..ebfb4ec012
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/MessageRow/MessageFile.tsx
@@ -0,0 +1,62 @@
+'use client';
+
+import React from 'react';
+
+import { Icon, Skeleton, Text } from '@/components/UI';
+import { cn, formatFileSize, getFileExtension } from '@/utils';
+
+type Props = {
+  name?: string;
+  size?: number;
+};
+
+const getFileType = (fileName: string) => {
+  return getFileExtension(fileName)?.replace(/^./, ''); // replace first character if it is a period
+};
+
+/**
+ * @description Renders a file card in a chat message or composer.
+ */
+export const MessageFile: React.FC<Props> = ({ name, size }) => {
+  const type = getFileType(name ?? '');
+  const fileSize = size !== undefined ? formatFileSize(size) : undefined;
+
+  return (
+    <div
+      className={cn(
+        'group flex w-60 gap-x-2 rounded bg-mushroom-600/10 p-3',
+        'transition-colors ease-in-out'
+      )}
+    >
+      <div
+        className={cn(
+          'flex h-8 w-8 flex-shrink-0 items-center justify-center rounded',
+          'transition-colors ease-in-out',
+          'bg-mushroom-600/20 text-mushroom-300 dark:text-marble-950'
+        )}
+      >
+        <Icon name="file" kind="outline" />
+      </div>
+      <div className="flex w-full flex-grow flex-col gap-y-0.5 truncate">
+        <Text styleAs="label" className="w-full truncate font-medium">
+          {name}
+        </Text>
+        <div className="flex items-center gap-x-2 uppercase">
+          {type && (
+            <Text styleAs="caption" className="text-volcanic-500 dark:text-marble-900">
+              {type} •
+            </Text>
+          )}
+
+          {fileSize ? (
+            <Text styleAs="caption" className="text-volcanic-500 dark:text-marble-900">
+              {fileSize}
+            </Text>
+          ) : (
+            <Skeleton className="h-5 w-10 bg-mushroom-600/20 dark:bg-volcanic-600" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/interfaces/assistants_web/src/components/MessageRow.tsx b/src/interfaces/assistants_web/src/components/MessageRow/MessageRow.tsx
similarity index 89%
rename from src/interfaces/assistants_web/src/components/MessageRow.tsx
rename to src/interfaces/assistants_web/src/components/MessageRow/MessageRow.tsx
index da4d414252..f237d43806 100644
--- a/src/interfaces/assistants_web/src/components/MessageRow.tsx
+++ b/src/interfaces/assistants_web/src/components/MessageRow/MessageRow.tsx
@@ -3,13 +3,15 @@
 import { forwardRef, useEffect, useState } from 'react';
 import { useLongPress } from 'react-aria';
 
-import { Avatar } from '@/components/Avatar';
-import { IconButton } from '@/components/IconButton';
-import { LongPressMenu } from '@/components/LongPressMenu';
-import { MessageContent } from '@/components/MessageContent';
-import { Button, CopyToClipboardButton, CopyToClipboardIconButton } from '@/components/Shared';
-import { ToolEvents } from '@/components/ToolEvents';
-import { Breakpoint, useBreakpoint } from '@/hooks/breakpoint';
+import { Avatar, MessageContent, ToolEvents } from '@/components/MessageRow';
+import {
+  Button,
+  CopyToClipboardButton,
+  CopyToClipboardIconButton,
+  IconButton,
+  LongPressMenu,
+} from '@/components/UI';
+import { Breakpoint, useBreakpoint } from '@/hooks';
 import {
   type ChatMessage,
   isAbortedMessage,
@@ -33,7 +35,7 @@ type Props = {
 /**
  * Renders a single message row from the user or from our models.
  */
-const MessageRow = forwardRef<HTMLDivElement, Props>(function MessageRowInternal(
+export const MessageRow = forwardRef<HTMLDivElement, Props>(function MessageRowInternal(
   { message, delay = false, isLast, isStreamingToolEvents, className = '', onCopy, onRetry },
   ref
 ) {
@@ -151,4 +153,3 @@ const MessageRow = forwardRef<HTMLDivElement, Props>(function MessageRowInternal
     </div>
   );
 });
-export default MessageRow;
diff --git a/src/interfaces/assistants_web/src/components/ToolEvents.tsx b/src/interfaces/assistants_web/src/components/MessageRow/ToolEvents.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/ToolEvents.tsx
rename to src/interfaces/assistants_web/src/components/MessageRow/ToolEvents.tsx
index 8c5e7b3821..2a719184c8 100644
--- a/src/interfaces/assistants_web/src/components/ToolEvents.tsx
+++ b/src/interfaces/assistants_web/src/components/MessageRow/ToolEvents.tsx
@@ -4,15 +4,15 @@ import { Transition } from '@headlessui/react';
 import { Fragment, PropsWithChildren } from 'react';
 
 import { StreamSearchResults, StreamToolCallsGeneration, ToolCall } from '@/cohere-client';
-import { Icon, IconName, Markdown, Text } from '@/components/Shared';
+import { Markdown } from '@/components/Markdown';
+import { Icon, IconName, Text } from '@/components/UI';
 import {
   TOOL_CALCULATOR_ID,
   TOOL_GOOGLE_DRIVE_ID,
   TOOL_PYTHON_INTERPRETER_ID,
   TOOL_WEB_SEARCH_ID,
 } from '@/constants';
-import { cn, getValidURL } from '@/utils';
-import { getToolIcon } from '@/utils/tools';
+import { cn, getToolIcon, getValidURL } from '@/utils';
 
 type Props = {
   show: boolean;
diff --git a/src/interfaces/assistants_web/src/components/MessageRow/index.ts b/src/interfaces/assistants_web/src/components/MessageRow/index.ts
new file mode 100644
index 0000000000..9a0807fc91
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/MessageRow/index.ts
@@ -0,0 +1,8 @@
+export * from './Avatar';
+export * from './Citation';
+export * from './CitationTextHighlighter';
+export * from './DataTable';
+export * from './MarkdownImage';
+export * from './MessageContent';
+export * from './MessageRow';
+export * from './ToolEvents';
diff --git a/src/interfaces/assistants_web/src/components/AssistantTools.tsx b/src/interfaces/assistants_web/src/components/MessagingContainer/AssistantTools.tsx
similarity index 89%
rename from src/interfaces/assistants_web/src/components/AssistantTools.tsx
rename to src/interfaces/assistants_web/src/components/MessagingContainer/AssistantTools.tsx
index bab317214a..84b7c56482 100644
--- a/src/interfaces/assistants_web/src/components/AssistantTools.tsx
+++ b/src/interfaces/assistants_web/src/components/MessagingContainer/AssistantTools.tsx
@@ -3,14 +3,11 @@
 import React from 'react';
 
 import { AgentPublic, ManagedTool } from '@/cohere-client';
-import { Button, Icon, Text } from '@/components/Shared';
-import { ToggleCard } from '@/components/ToggleCard';
-import { WelcomeGuideTooltip } from '@/components/WelcomeGuideTooltip';
-import { useAvailableTools } from '@/hooks/tools';
+import { WelcomeGuideTooltip } from '@/components/MessagingContainer';
+import { Button, Icon, Text, ToggleCard } from '@/components/UI';
+import { useAvailableTools } from '@/hooks';
 import { useParamsStore } from '@/stores';
-import { cn } from '@/utils';
-import { checkIsBaseAgent } from '@/utils/agents';
-import { getToolIcon } from '@/utils/tools';
+import { checkIsBaseAgent, cn, getToolIcon } from '@/utils';
 
 /**
  * @description Tools for the assistant to use in the conversation.
diff --git a/src/interfaces/assistants_web/src/components/Conversation/MessagingContainer.tsx b/src/interfaces/assistants_web/src/components/MessagingContainer/MessagingContainer.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/Conversation/MessagingContainer.tsx
rename to src/interfaces/assistants_web/src/components/MessagingContainer/MessagingContainer.tsx
index 2490ddef9c..5ff8410911 100644
--- a/src/interfaces/assistants_web/src/components/Conversation/MessagingContainer.tsx
+++ b/src/interfaces/assistants_web/src/components/MessagingContainer/MessagingContainer.tsx
@@ -5,10 +5,10 @@ import { usePrevious } from '@react-hookz/web';
 import React, { ReactNode, memo, useEffect, useMemo } from 'react';
 import ScrollToBottom, { useScrollToBottom, useSticky } from 'react-scroll-to-bottom';
 
-import MessageRow from '@/components/MessageRow';
-import { Button } from '@/components/Shared';
-import { Welcome } from '@/components/Welcome';
-import { useFixCopyBug } from '@/hooks/fixCopyBug';
+import { MessageRow } from '@/components/MessageRow';
+import { Welcome } from '@/components/MessagingContainer';
+import { Button } from '@/components/UI';
+import { useFixCopyBug } from '@/hooks';
 import { ChatMessage, MessageType, StreamingMessage, isFulfilledMessage } from '@/types/message';
 import { cn } from '@/utils';
 
@@ -29,7 +29,8 @@ type Props = {
  * This component is in charge of rendering anything in the main scrollable view.
  * This includes all of the message, the RAG citations, and the composer (which is sticky at the bottom).
  */
-const MessagingContainer: React.FC<Props> = (props) => {
+
+const MessagingContainerContents: React.FC<Props> = (props) => {
   const { scrollViewClassName = '', ...rest } = props;
   return (
     <ScrollToBottom
@@ -52,7 +53,7 @@ const MessagingContainer: React.FC<Props> = (props) => {
     </ScrollToBottom>
   );
 };
-export default memo(MessagingContainer);
+export const MessagingContainer = memo(MessagingContainerContents);
 
 /**
  * This component lays out the messages, citations, and composer.
diff --git a/src/interfaces/assistants_web/src/components/Welcome.tsx b/src/interfaces/assistants_web/src/components/MessagingContainer/Welcome.tsx
similarity index 87%
rename from src/interfaces/assistants_web/src/components/Welcome.tsx
rename to src/interfaces/assistants_web/src/components/MessagingContainer/Welcome.tsx
index a663f672fe..10e83f9993 100644
--- a/src/interfaces/assistants_web/src/components/Welcome.tsx
+++ b/src/interfaces/assistants_web/src/components/MessagingContainer/Welcome.tsx
@@ -3,13 +3,11 @@
 import { Transition } from '@headlessui/react';
 import React from 'react';
 
-import { AssistantTools } from '@/components/AssistantTools';
-import { CoralLogo, Icon, Text } from '@/components/Shared';
-import { useAgent } from '@/hooks/agents';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { useListTools } from '@/hooks/tools';
+import { AssistantTools } from '@/components/MessagingContainer';
+import { CoralLogo, Icon, Text } from '@/components/UI';
+import { useAgent, useBrandedColors, useListTools } from '@/hooks';
 import { cn } from '@/utils';
-import { checkIsBaseAgent } from '@/utils/agents';
+import { checkIsBaseAgent } from '@/utils';
 
 type Props = {
   show: boolean;
diff --git a/src/interfaces/assistants_web/src/components/WelcomeGuideTooltip.tsx b/src/interfaces/assistants_web/src/components/MessagingContainer/WelcomeGuideTooltip.tsx
similarity index 90%
rename from src/interfaces/assistants_web/src/components/WelcomeGuideTooltip.tsx
rename to src/interfaces/assistants_web/src/components/MessagingContainer/WelcomeGuideTooltip.tsx
index 9b116ef366..b1a743d5ad 100644
--- a/src/interfaces/assistants_web/src/components/WelcomeGuideTooltip.tsx
+++ b/src/interfaces/assistants_web/src/components/MessagingContainer/WelcomeGuideTooltip.tsx
@@ -1,8 +1,7 @@
 'use client';
 
-import { GuideTooltip } from '@/components/GuideTooltip';
-import { useFocusComposer } from '@/hooks/actions';
-import { useShowWelcomeGuide, useWelcomeGuideState } from '@/hooks/ftux';
+import { GuideTooltip } from '@/components/UI';
+import { useFocusComposer, useShowWelcomeGuide, useWelcomeGuideState } from '@/hooks';
 
 type Props = {
   step: number;
diff --git a/src/interfaces/assistants_web/src/components/MessagingContainer/index.ts b/src/interfaces/assistants_web/src/components/MessagingContainer/index.ts
new file mode 100644
index 0000000000..69f46ba9a4
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/MessagingContainer/index.ts
@@ -0,0 +1,4 @@
+export * from './AssistantTools';
+export * from './MessagingContainer';
+export * from './Welcome';
+export * from './WelcomeGuideTooltip';
diff --git a/src/interfaces/assistants_web/src/components/Agents/DeleteAgent.tsx b/src/interfaces/assistants_web/src/components/Modals/DeleteAgent.tsx
similarity index 88%
rename from src/interfaces/assistants_web/src/components/Agents/DeleteAgent.tsx
rename to src/interfaces/assistants_web/src/components/Modals/DeleteAgent.tsx
index 2afb4574f7..87c85d4d32 100644
--- a/src/interfaces/assistants_web/src/components/Agents/DeleteAgent.tsx
+++ b/src/interfaces/assistants_web/src/components/Modals/DeleteAgent.tsx
@@ -2,9 +2,8 @@
 
 import { useRouter } from 'next/navigation';
 
-import { Button, Text } from '@/components/Shared';
-import { useDeleteAgent } from '@/hooks/agents';
-import { useChatRoutes } from '@/hooks/chatRoutes';
+import { Button, Text } from '@/components/UI';
+import { useChatRoutes, useDeleteAgent } from '@/hooks';
 
 type Props = {
   name: string;
diff --git a/src/interfaces/assistants_web/src/components/Modals/DeleteConversations.tsx b/src/interfaces/assistants_web/src/components/Modals/DeleteConversations.tsx
index 689f10097d..0a39651901 100644
--- a/src/interfaces/assistants_web/src/components/Modals/DeleteConversations.tsx
+++ b/src/interfaces/assistants_web/src/components/Modals/DeleteConversations.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, Text } from '@/components/Shared';
+import { Button, Text } from '@/components/UI';
 import { pluralize } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Modals/EditConversationTitle.tsx b/src/interfaces/assistants_web/src/components/Modals/EditConversationTitle.tsx
index 4ca1e5b70d..76ba5e9544 100644
--- a/src/interfaces/assistants_web/src/components/Modals/EditConversationTitle.tsx
+++ b/src/interfaces/assistants_web/src/components/Modals/EditConversationTitle.tsx
@@ -2,8 +2,8 @@
 
 import { useState } from 'react';
 
-import { Button, Input, Text } from '@/components/Shared';
-import { useEditConversation } from '@/hooks/conversation';
+import { Button, Input, Text } from '@/components/UI';
+import { useEditConversation } from '@/hooks';
 import { useConversationStore } from '@/stores';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/ShareModal.tsx b/src/interfaces/assistants_web/src/components/Modals/ShareConversation.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/ShareModal.tsx
rename to src/interfaces/assistants_web/src/components/Modals/ShareConversation.tsx
index e6c11a1e3a..f49b126959 100644
--- a/src/interfaces/assistants_web/src/components/ShareModal.tsx
+++ b/src/interfaces/assistants_web/src/components/Modals/ShareConversation.tsx
@@ -2,15 +2,15 @@
 
 import React, { useEffect, useState } from 'react';
 
-import { Button, Input, Spinner, Text } from '@/components/Shared';
+import { Button, Input, Spinner, Text } from '@/components/UI';
 import { env } from '@/env.mjs';
-import { useCreateSnapshotLinkId, useSnapshots } from '@/hooks/snapshots';
+import { useCreateSnapshotLinkId, useSnapshots } from '@/hooks';
 
-type ShareModalProps = {
+type Props = {
   conversationId: string;
 };
 
-export const ShareModal: React.FC<ShareModalProps> = ({ conversationId }) => {
+export const ShareConversation: React.FC<Props> = ({ conversationId }) => {
   const [status, setStatus] = useState<
     'modal-loading' | 'modal-error' | 'update-url-loading' | 'update-url-error' | undefined
   >('modal-loading');
diff --git a/src/interfaces/assistants_web/src/components/Shared/GlobalHead/GlobalHead.tsx b/src/interfaces/assistants_web/src/components/Providers/GlobalHead.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/GlobalHead/GlobalHead.tsx
rename to src/interfaces/assistants_web/src/components/Providers/GlobalHead.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/ToastNotification/ToastNotification.tsx b/src/interfaces/assistants_web/src/components/Providers/ToastNotification.tsx
similarity index 95%
rename from src/interfaces/assistants_web/src/components/Shared/ToastNotification/ToastNotification.tsx
rename to src/interfaces/assistants_web/src/components/Providers/ToastNotification.tsx
index 0a626420af..7ef56b28e4 100644
--- a/src/interfaces/assistants_web/src/components/Shared/ToastNotification/ToastNotification.tsx
+++ b/src/interfaces/assistants_web/src/components/Providers/ToastNotification.tsx
@@ -2,10 +2,9 @@
 
 import { Toaster } from 'sonner';
 
+import { Icon, STYLE_LEVEL_TO_CLASSES } from '@/components/UI';
 import { cn } from '@/utils';
 
-import { Icon, STYLE_LEVEL_TO_CLASSES } from '..';
-
 type Props = {
   position?:
     | 'top-left'
diff --git a/src/interfaces/assistants_web/src/components/ViewportFix.tsx b/src/interfaces/assistants_web/src/components/Providers/ViewportFix.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/ViewportFix.tsx
rename to src/interfaces/assistants_web/src/components/Providers/ViewportFix.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/WebManifestHead.tsx b/src/interfaces/assistants_web/src/components/Providers/WebManifestHead.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/WebManifestHead.tsx
rename to src/interfaces/assistants_web/src/components/Providers/WebManifestHead.tsx
diff --git a/src/interfaces/assistants_web/src/components/Providers/index.ts b/src/interfaces/assistants_web/src/components/Providers/index.ts
new file mode 100644
index 0000000000..10cb58b13f
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/Providers/index.ts
@@ -0,0 +1,4 @@
+export * from './GlobalHead';
+export * from './ToastNotification';
+export * from './ViewportFix';
+export * from './WebManifestHead';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Banner/index.ts b/src/interfaces/assistants_web/src/components/Shared/Banner/index.ts
deleted file mode 100644
index bc95f09d62..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Banner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Banner';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Button/index.ts b/src/interfaces/assistants_web/src/components/Shared/Button/index.ts
deleted file mode 100644
index 8b166a86e4..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Button';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Cell/Cell.tsx b/src/interfaces/assistants_web/src/components/Shared/Cell/Cell.tsx
deleted file mode 100644
index edca66d5eb..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Cell/Cell.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-'use client';
-
-import cx from 'classnames';
-import { CSSProperties, ReactNode } from 'react';
-
-import {
-  DefaultLeftCell,
-  DefaultLeftSide,
-  DefaultRightCell,
-  DefaultRightSide,
-  OutlineCellBody,
-  OutlineLeftCell,
-  OutlineLeftSide,
-  OutlineRightCell,
-  OutlineRightSide,
-} from './CellParts';
-import type { CellKind, CellSize, CellTheme } from './cellTheming';
-import { SIZE_CLASSES, THEME_CLASSES } from './cellTheming';
-
-/*
- * The 'Cell' is the trapezoid/polygon shape that can't quite be achieved with CSS alone
- * There are two 'kinds' of cell - default (filled), and outline
- * The implementation of the Cell is still fairly experimental and could be buggy. Message @laura if you run into issues.
- *
- * HOW TO USE
- * - Browse the existing colours and sizes available for use in `cellTheming.ts`
- *    - Preview all colours/sizes using Storybook
- * - Add a new size or colour theme if the one you need doesn't already exist
- *    - Push back if too many cell themes are getting added - can we use an existing one?
- * - Flexibility with props on which sides have the special cell/trapezoid edge
- * - Cell's default behaviour is growing to fit the width of their parent container
- */
-
-type CellProps = {
-  children?: ReactNode;
-  kind?: CellKind;
-  size?: CellSize;
-  /* The colours associated with the cell */
-  theme?: CellTheme;
-  /* Include the trapezoid edge on the right side - option to 'flip' the edge upside down */
-  rightCell?: boolean | 'flip';
-  /* Include the trapezoid edge on the left side - option to 'flip' the edge upside down */
-  leftCell?: boolean | 'flip';
-  /* Additional classes as needed - applied to the outer container */
-  className?: string;
-  style?: CSSProperties;
-  allowOverflow?: boolean;
-};
-
-const DefaultCell = ({
-  className = '',
-  theme = 'volcanic',
-  size = 'md',
-  rightCell,
-  leftCell,
-  children,
-  style,
-  allowOverflow = false,
-}: CellProps) => {
-  const containerClassNames = cx(SIZE_CLASSES[size], 'flex grow');
-
-  const innerClassNames = cx(
-    THEME_CLASSES[theme].default.bg,
-    THEME_CLASSES[theme].default.text,
-    SIZE_CLASSES[size],
-    { truncate: !allowOverflow },
-    'flex grow justify-between items-center'
-  );
-
-  return (
-    <div className={cx(containerClassNames, className)} style={style}>
-      {!leftCell && <DefaultLeftSide theme={theme} size={size} />}
-      {leftCell && <DefaultLeftCell theme={theme} size={size} flip={leftCell === 'flip'} />}
-      <div className={innerClassNames}>{children}</div>
-      {!rightCell && <DefaultRightSide theme={theme} size={size} />}
-      {rightCell && <DefaultRightCell theme={theme} size={size} flip={rightCell === 'flip'} />}
-    </div>
-  );
-};
-
-const OutlineCell = ({
-  className = '',
-  theme = 'volcanic',
-  size = 'md',
-  rightCell,
-  leftCell,
-  children,
-  style,
-  allowOverflow = false,
-}: CellProps) => {
-  const containerClassNames = cx(SIZE_CLASSES[size], 'flex grow');
-  const innerClassNames = cx(
-    THEME_CLASSES[theme].outline.text,
-    THEME_CLASSES[theme].outline.bg,
-    SIZE_CLASSES[size],
-    { truncate: !allowOverflow },
-    'flex grow relative'
-  );
-
-  return (
-    <div className={cx(containerClassNames, className)} style={style}>
-      {!leftCell && <OutlineLeftSide theme={theme} size={size} />}
-      {leftCell && <OutlineLeftCell theme={theme} size={size} flip={leftCell === 'flip'} />}
-      <div className={innerClassNames}>
-        <div className="z-10 flex w-full items-center justify-between">{children}</div>
-        <OutlineCellBody theme={theme} size={size} />
-      </div>
-      {!rightCell && <OutlineRightSide theme={theme} size={size} />}
-      {rightCell && <OutlineRightCell theme={theme} size={size} flip={rightCell === 'flip'} />}
-    </div>
-  );
-};
-
-export const Cell = ({ kind = 'default', ...props }: CellProps) => {
-  return kind === 'default' ? <DefaultCell {...props} /> : <OutlineCell {...props} />;
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/Cell/CellParts.tsx b/src/interfaces/assistants_web/src/components/Shared/Cell/CellParts.tsx
deleted file mode 100644
index d645788561..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Cell/CellParts.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-'use client';
-
-import cx from 'classnames';
-
-import type { CellSize, CellTheme } from './cellTheming';
-import { SIZE_CLASSES, THEME_CLASSES } from './cellTheming';
-
-interface SideCellProps {
-  size: CellSize;
-  theme: CellTheme;
-  flip?: boolean;
-}
-
-/*
- * The trapezoidal edge SVGs for the default cell
- */
-
-export const DefaultRightCell = ({ theme = 'volcanic', size = 'md', flip }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 18 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], {
-        '-scale-y-100': flip,
-        '-ml-[1px]': theme !== 'volcanicLight',
-      })}
-    >
-      <path
-        d="M10.899 0H0V40H2C4.40603 40 6.55968 38.5075 7.4045 36.2547L17.4533 9.45786C19.1694 4.88161 15.7864 0 10.899 0Z"
-        className={THEME_CLASSES[theme].default.fill}
-      />
-    </svg>
-  );
-};
-export const DefaultLeftCell = ({ theme = 'volcanic', size = 'md', flip }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 18 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], {
-        '-scale-y-100': flip,
-        '-mr-[1px]': theme !== 'volcanicLight',
-      })}
-    >
-      <path
-        d="M7.101 40H18V0H16C13.594 0 11.4403 1.49249 10.5955 3.74532L0.546698 30.5421C-1.1694 35.1184 2.21356 40 7.101 40Z"
-        className={THEME_CLASSES[theme].default.fill}
-      />
-    </svg>
-  );
-};
-
-/*
- * The standard rounded edge SVGs for the default cell
- */
-export const DefaultRightSide = ({ theme = 'volcanic', size = 'md' }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 10 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], { '-ml-[1px]': theme !== 'volcanicLight' })}
-    >
-      <path
-        d="M0 40V0H4C7.31371 0 10 2.68629 10 6V34C10 37.3137 7.31371 40 4 40H0Z"
-        className={THEME_CLASSES[theme].default.fill}
-      />
-    </svg>
-  );
-};
-export const DefaultLeftSide = ({ theme = 'volcanic', size = 'md' }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 10 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], { '-mr-[1px]': theme !== 'volcanicLight' })}
-    >
-      <path
-        d="M10 40V0H6C2.68629 0 0 2.68629 0 6V34C0 37.3137 2.68629 40 6 40H10Z"
-        className={THEME_CLASSES[theme].default.fill}
-      />
-    </svg>
-  );
-};
-
-/*
- * The trapezoidal edge SVGs for the outline cell
- */
-export const OutlineRightCell = ({ theme = 'volcanic', size = 'md', flip }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 19 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], {
-        '-scale-y-100': flip,
-        '-ml-[1px]': theme !== 'volcanicLight',
-      })}
-    >
-      <path
-        d="M0 0.5H10.9293C15.8084 0.5 19.1908 5.36619 17.4905 9.93942L7.95337 35.5909C7.07963 37.941 4.83674 39.5 2.32949 39.5H2H0"
-        className={cx(THEME_CLASSES[theme].outline.stroke, THEME_CLASSES[theme].outline.fill)}
-      />
-    </svg>
-  );
-};
-export const OutlineLeftCell = ({ theme = 'volcanic', size = 'md', flip }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 19 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], {
-        '-scale-y-100': flip,
-        '-mr-[1px]': theme !== 'volcanicLight',
-      })}
-    >
-      <path
-        d="M19 39.5H8.07072C3.19164 39.5 -0.190776 34.6338 1.50953 30.0606L11.0466 4.40907C11.9204 2.059 14.1633 0.5 16.6705 0.5H17H19"
-        className={cx(THEME_CLASSES[theme].outline.stroke, THEME_CLASSES[theme].outline.fill)}
-      />
-    </svg>
-  );
-};
-
-/*
- * The standard rounded edge SVGs for the outline cell
- */
-export const OutlineRightSide = ({ theme = 'volcanic', size = 'md' }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 11 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], { '-ml-[1px]': theme !== 'volcanicLight' })}
-    >
-      <path
-        d="M9.05991e-05 39.5H3.99992C7.31363 39.5 9.99992 36.8137 9.99992 33.5L9.99999 6.50002C9.99999 3.1863 7.3137 0.5 3.99999 0.5H9.05991e-05"
-        className={cx(THEME_CLASSES[theme].outline.stroke, THEME_CLASSES[theme].outline.fill)}
-      />
-    </svg>
-  );
-};
-export const OutlineLeftSide = ({ theme = 'volcanic', size = 'md' }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 11 40"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], { '-mr-[1px]': theme !== 'volcanicLight' })}
-    >
-      <path
-        d="M10.9999 39.5H7.00008C3.68637 39.5 1.00008 36.8137 1.00008 33.5L1.00001 6.50002C1.00001 3.1863 3.6863 0.5 7.00001 0.5H10.9999"
-        className={cx(THEME_CLASSES[theme].outline.stroke, THEME_CLASSES[theme].outline.fill)}
-      />
-    </svg>
-  );
-};
-
-/*
- * The middle section of the outline cell
- */
-export const OutlineCellBody = ({ theme = 'volcanic', size = 'md' }: SideCellProps) => {
-  return (
-    <svg
-      viewBox="0 0 29 40"
-      fill="none"
-      preserveAspectRatio="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={cx(SIZE_CLASSES[size], 'absolute w-full')}
-    >
-      <path
-        d="M0 1H29V-1H0V1ZM29 39H0V41H29V39Z"
-        mask="url(#path-1-inside-1_511_249246)"
-        className={THEME_CLASSES[theme].outline.outlineFill}
-      />
-    </svg>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/Cell/cellTheming.ts b/src/interfaces/assistants_web/src/components/Shared/Cell/cellTheming.ts
deleted file mode 100644
index 9893b38825..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Cell/cellTheming.ts
+++ /dev/null
@@ -1,380 +0,0 @@
-export type CellKind = 'default' | 'outline';
-export type CellTheme =
-  | 'volcanic'
-  | 'volcanicAlt'
-  | 'green'
-  | 'greenDark'
-  | 'greenAlt'
-  | 'primary'
-  | 'primaryLight'
-  | 'primaryDark'
-  | 'gray'
-  | 'grayDark'
-  | 'marble'
-  | 'marbleDark'
-  | 'secondary'
-  | 'secondaryDark'
-  | 'danger'
-  | 'dangerDark'
-  | 'transparent'
-  | 'volcanicLight'
-  | 'blue'
-  | 'blueDark'
-  | 'quartz'
-  | 'quartzAlt';
-export type CellSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-
-/*
- * The theming process is unable to be set up more dynamically due to limitations with Tailwind's class detection
- * Details: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
- *
- * If you need a new cell color, please set it up in the THEME_CLASSES mapping, for both 'outline' and 'default' versions of the cell
- */
-
-interface CellThemes {
-  [themeName: string]: {
-    default: {
-      bg: string;
-      fill: string;
-      text: string;
-    };
-    outline: {
-      text: string;
-      stroke: string;
-      outlineFill: string;
-      fill: string;
-      bg: string;
-    };
-  };
-}
-
-export const THEME_CLASSES: CellThemes = {
-  volcanic: {
-    default: {
-      bg: 'bg-volcanic-100',
-      fill: 'fill-volcanic-100',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-volcanic-100',
-      stroke: 'stroke-volcanic-100',
-      outlineFill: 'fill-volcanic-100',
-      fill: 'fill-marble-1000',
-      bg: 'bg-marble-980',
-    },
-  },
-  volcanicAlt: {
-    default: {
-      bg: 'bg-marble-980',
-      fill: 'fill-marble-1000',
-      text: 'text-volcanic-100',
-    },
-    outline: {
-      text: 'bg-volcanic-100',
-      stroke: 'stroke-marble-1000',
-      outlineFill: 'fill-marble-1000',
-      fill: 'fill-volcanic-100',
-      bg: 'text-white',
-    },
-  },
-  primary: {
-    default: {
-      bg: 'bg-coral-700',
-      fill: 'fill-coral-700',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-volcanic-100',
-      stroke: 'stroke-coral-800',
-      outlineFill: 'fill-coral-800',
-      fill: 'fill-coral-900',
-      bg: 'bg-coral-900',
-    },
-  },
-  primarylLight: {
-    default: {
-      bg: 'bg-coral-800',
-      fill: 'fill-coral-800',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-volcanic-100',
-      stroke: 'stroke-coral-800',
-      outlineFill: 'fill-coral-800',
-      fill: 'fill-coral-900',
-      bg: 'bg-coral-900',
-    },
-  },
-  primaryDark: {
-    default: {
-      bg: 'bg-coral-700',
-      fill: 'fill-coral-700',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-coral-700',
-      stroke: 'stroke-coral-700',
-      outlineFill: 'fill-coral-700',
-      fill: 'fill-coral-800',
-      bg: 'bg-coral-800',
-    },
-  },
-  green: {
-    default: {
-      bg: 'bg-green-250',
-      fill: 'fill-green-250',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-green-150',
-      stroke: 'stroke-green-600',
-      outlineFill: 'fill-green-600',
-      fill: 'fill-green-950',
-      bg: 'bg-green-950',
-    },
-  },
-  greenDark: {
-    default: {
-      bg: 'bg-green-150',
-      fill: 'fill-green-150',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-green-150',
-      stroke: 'stroke-green-150',
-      outlineFill: 'fill-green-250',
-      fill: 'fill-green-900',
-      bg: 'bg-green-900',
-    },
-  },
-  greenAlt: {
-    default: {
-      bg: 'bg-green-250',
-      fill: 'fill-green-250',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-green-250',
-      stroke: 'stroke-green-250',
-      outlineFill: 'fill-green-250',
-      fill: 'fill-marble-1000',
-      bg: 'bg-marble-980',
-    },
-  },
-  gray: {
-    default: {
-      bg: 'bg-marble-950',
-      fill: 'fill-marble-950',
-      text: 'text-volcanic-400',
-    },
-    outline: {
-      text: 'text-volcanic-500',
-      stroke: 'stroke-volcanic-500',
-      outlineFill: 'fill-volcanic-500',
-      fill: 'fill-marble-950',
-      bg: 'bg-marble-950',
-    },
-  },
-  grayDark: {
-    default: {
-      bg: 'bg-volcanic-500',
-      fill: 'fill-volcanic-500',
-      text: 'text-volcanic-100',
-    },
-    outline: {
-      text: 'text-volcanic-500',
-      stroke: 'stroke-volcanic-500',
-      outlineFill: 'fill-volcanic-500',
-      fill: 'fill-marble-950',
-      bg: 'bg-marble-950',
-    },
-  },
-  marble: {
-    default: {
-      bg: 'bg-marble-950',
-      fill: 'fill-marble-950',
-      text: 'text-volcanic-100',
-    },
-    outline: {
-      text: 'text-volcanic-100',
-      stroke: 'stroke-marble-950',
-      outlineFill: 'fill-marble-950',
-      fill: 'fill-marble-1000',
-      bg: 'bg-marble-980',
-    },
-  },
-  marbleDark: {
-    default: {
-      bg: 'bg-marble-950',
-      fill: 'fill-marble-950',
-      text: 'text-volcanic-100',
-    },
-    outline: {
-      text: 'text-volcanic-100',
-      stroke: 'stroke-marble-950',
-      outlineFill: 'fill-marble-950',
-      fill: 'fill-marble-980',
-      bg: 'bg-marble-980',
-    },
-  },
-  secondary: {
-    default: {
-      bg: 'bg-mushroom-950',
-      fill: 'fill-mushroom-950',
-      text: 'text-volcanic-300',
-    },
-    outline: {
-      text: 'text-volcanic-100',
-      stroke: 'stroke-mushroom-600',
-      outlineFill: 'fill-mushroom-600',
-      fill: 'fill-mushroom-950',
-      bg: 'bg-mushroom-950',
-    },
-  },
-  secondaryDark: {
-    default: {
-      bg: 'bg-mushroom-900',
-      fill: 'fill-mushroom-900',
-      text: 'text-volcanic-300',
-    },
-    outline: {
-      text: 'text-volcanic-300',
-      stroke: 'stroke-mushroom-800',
-      outlineFill: 'fill-mushroom-800',
-      fill: 'fill-mushroom-900',
-      bg: 'bg-mushroom-900',
-    },
-  },
-  danger: {
-    default: {
-      bg: 'bg-danger-350',
-      fill: 'fill-danger-350',
-      text: 'text-marble-1000',
-    },
-    outline: {
-      text: 'text-danger-350',
-      stroke: 'stroke-danger-350',
-      outlineFill: 'fill-danger-350',
-      fill: 'fill-danger-950',
-      bg: 'bg-danger-950',
-    },
-  },
-  dangerDark: {
-    default: {
-      bg: 'bg-danger-350',
-      fill: 'fill-danger-350',
-      text: 'text-marble-1000',
-    },
-    outline: {
-      text: 'text-danger-350',
-      stroke: 'stroke-danger-350',
-      outlineFill: 'fill-danger-350',
-      fill: 'fill-danger-950',
-      bg: 'bg-danger-950',
-    },
-  },
-  transparent: {
-    default: {
-      bg: 'bg-transparent',
-      fill: 'fill-transparent',
-      text: 'text-inherit',
-    },
-    outline: {
-      text: 'text-inherit',
-      stroke: 'stroke-transparent',
-      outlineFill: 'fill-transparent',
-      fill: 'fill-transparent',
-      bg: 'bg-transparent',
-    },
-  },
-  volcanicLight: {
-    default: {
-      bg: 'bg-volcanic-300/50',
-      fill: 'fill-volcanic-300/50',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-volcanic-300',
-      stroke: 'stroke-volcanic-300',
-      outlineFill: 'fill-volcanic-300',
-      fill: 'fill-marble-1000',
-      bg: 'bg-marble-980',
-    },
-  },
-  blue: {
-    default: {
-      bg: 'bg-blue-600',
-      fill: 'fill-blue-600',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-blue-300',
-      stroke: 'stroke-blue-600',
-      outlineFill: 'fill-blue-600',
-      fill: 'fill-blue-950',
-      bg: 'bg-blue-950',
-    },
-  },
-  blueDark: {
-    default: {
-      bg: 'bg-blue-300',
-      fill: 'fill-blue-300',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-blue-300',
-      stroke: 'stroke-blue-300',
-      outlineFill: 'fill-blue-300',
-      fill: 'fill-blue-950',
-      bg: 'bg-blue-950',
-    },
-  },
-  quartz: {
-    default: {
-      bg: 'bg-quartz-700',
-      fill: 'fill-quartz-700',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-volcanic-100',
-      stroke: 'stroke-quartz-700',
-      outlineFill: 'fill-quartz-700',
-      fill: 'fill-quartz-950',
-      bg: 'bg-quartz-950',
-    },
-  },
-  quartzAlt: {
-    default: {
-      bg: 'bg-quartz-700',
-      fill: 'fill-quartz-700',
-      text: 'text-white',
-    },
-    outline: {
-      text: 'text-quartz-700',
-      stroke: 'stroke-quartz-700',
-      outlineFill: 'fill-quartz-700',
-      fill: 'fill-marble-1000',
-      bg: 'bg-marble-980',
-    },
-  },
-};
-
-/*
- * The sizing process is unable to be set up more dynamically due to limitations with Tailwind's class detection
- * Details: https://tailwindcss.com/docs/content-configuration#class-detection-in-depth
- *
- * If you need a new size, please set it up in the SIZE_CLASSES mapping
- * May be worth including additional `-cell-` class names to theme.js
- */
-
-interface SizeClasses {
-  [sizeName: string]: string;
-}
-
-export const SIZE_CLASSES: SizeClasses = {
-  xs: 'h-full min-h-cell-xs max-h-cell-xs',
-  sm: 'h-full min-h-cell-sm max-h-cell-sm',
-  md: 'h-full min-h-cell-md max-h-cell-md',
-  lg: 'h-full min-h-cell-lg max-h-cell-lg',
-  xl: 'h-full min-h-cell-xl max-h-cell-xl',
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/Cell/index.ts b/src/interfaces/assistants_web/src/components/Shared/Cell/index.ts
deleted file mode 100644
index aa7fee1009..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Cell/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Cell';
-export * from './cellTheming';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Checkbox/index.ts b/src/interfaces/assistants_web/src/components/Shared/Checkbox/index.ts
deleted file mode 100644
index f5c939faf4..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Checkbox/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Checkbox';
diff --git a/src/interfaces/assistants_web/src/components/Shared/CodeSnippet/index.ts b/src/interfaces/assistants_web/src/components/Shared/CodeSnippet/index.ts
deleted file mode 100644
index 58c2674b9a..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/CodeSnippet/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './CodeSnippet';
diff --git a/src/interfaces/assistants_web/src/components/Shared/CopyToClipboardButton/index.ts b/src/interfaces/assistants_web/src/components/Shared/CopyToClipboardButton/index.ts
deleted file mode 100644
index ddaa964d3d..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/CopyToClipboardButton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './CopyToClipboardButton';
diff --git a/src/interfaces/assistants_web/src/components/Shared/CoralLogo/index.ts b/src/interfaces/assistants_web/src/components/Shared/CoralLogo/index.ts
deleted file mode 100644
index b5961396ca..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/CoralLogo/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './CoralLogo';
diff --git a/src/interfaces/assistants_web/src/components/Shared/DocumentIcon/index.ts b/src/interfaces/assistants_web/src/components/Shared/DocumentIcon/index.ts
deleted file mode 100644
index e9ff06d9e5..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/DocumentIcon/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './DocumentIcon';
diff --git a/src/interfaces/assistants_web/src/components/Shared/DragDropFileInput/index.ts b/src/interfaces/assistants_web/src/components/Shared/DragDropFileInput/index.ts
deleted file mode 100644
index 9f8456fe5a..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/DragDropFileInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './DragDropFileInput';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Dropdown/index.ts b/src/interfaces/assistants_web/src/components/Shared/Dropdown/index.ts
deleted file mode 100644
index 2f29bad4e6..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Dropdown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Dropdown';
diff --git a/src/interfaces/assistants_web/src/components/Shared/FileInput.tsx b/src/interfaces/assistants_web/src/components/Shared/FileInput.tsx
deleted file mode 100644
index e311735ffe..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/FileInput.tsx
+++ /dev/null
@@ -1,154 +0,0 @@
-'use client';
-
-import { ChangeEvent, MouseEvent, useRef, useState } from 'react';
-
-import { InputLabel, Spinner, Text } from '@/components/Shared';
-import { Icon } from '@/components/Shared/Icon';
-import { cn } from '@/utils';
-
-export type FileAccept =
-  | '.csv'
-  | '.txt'
-  | '.html'
-  | '.md'
-  | '.tsv'
-  | '.doc'
-  | '.docx'
-  | '.xlsx'
-  | '.pptx'
-  | '.json'
-  | '.jsonl'
-  | '.pdf'
-  | '.epub';
-
-type FileInputProps = {
-  file?: File;
-  label?: string;
-  name?: string;
-  required?: boolean;
-  accept?: FileAccept[];
-  placeholder?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  isLoading?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onBlur?: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  onRemoveFile?: () => void;
-};
-
-export const FileInput: React.FC<FileInputProps> = ({
-  file: initialFile,
-  label,
-  name,
-  required,
-  accept = ['.csv'],
-  placeholder = '',
-  disabled = false,
-  readOnly = false,
-  isLoading = false,
-  className = '',
-  children,
-  onChange,
-  onBlur,
-  onRemoveFile,
-}) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const [file, setFile] = useState<File | undefined>(initialFile);
-  const [focused, setFocused] = useState(false);
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    if (e.target.files && e.target.files[0]) {
-      setFile(e.target.files[0]);
-    }
-
-    if (onChange) onChange(e);
-  };
-
-  const handleRemoveFile = (e: MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setFile(undefined);
-    if (onRemoveFile) onRemoveFile();
-
-    // Manually reset the value of the input element so we don't run into weird issues where you cannot re-upload after
-    // removing a file since the input thinks it has the same value already.
-    if (inputRef.current) {
-      inputRef.current.value = '';
-    }
-  };
-
-  return (
-    <div
-      className={cn(
-        'flex flex-col',
-        'rounded-lg border border-marble-800 bg-white',
-        {
-          'outline outline-1 outline-offset-4 outline-volcanic-400': focused,
-          'text-volcanic-400': (placeholder && !file) || isLoading,
-          'border-volcanic-100 text-volcanic-100': file && !isLoading,
-          'cursor-not-allowed border-marble-800 bg-marble-950 text-volcanic-400': disabled,
-        },
-        className
-      )}
-    >
-      <InputLabel
-        label={label || children || ''}
-        className={cn('px-3 pt-2.5', {
-          'cursor-not-allowed text-volcanic-400': disabled,
-          'cursor-pointer text-volcanic-100': !disabled,
-        })}
-        name="fileInput"
-        onClick={(e) => {
-          if (disabled) e.preventDefault();
-        }}
-      />
-
-      <div className="relative px-3 pb-2.5">
-        <div className="flex w-full items-center justify-between">
-          <Text as="span" styleAs="p" className="truncate">
-            {isLoading ? 'Uploading file...' : file ? file.name : placeholder}
-          </Text>
-          {isLoading ? (
-            <Spinner className="my-0.5" />
-          ) : file ? (
-            <button
-              className="z-10 ml-4 fill-volcanic-100 transition ease-in-out hover:fill-danger-350"
-              type="button"
-              onClick={handleRemoveFile}
-            >
-              <Icon name="trash" kind="outline" />
-            </button>
-          ) : (
-            <span className="ml-4 h-[21px] fill-volcanic-100">
-              <Icon name="upload" />
-            </span>
-          )}
-        </div>
-
-        <input
-          id="fileInput"
-          ref={inputRef}
-          type="file"
-          accept={accept.toString()}
-          name={name}
-          required={required}
-          placeholder={placeholder}
-          disabled={disabled}
-          readOnly={readOnly}
-          className={cn(
-            'absolute left-0 top-0 h-full w-full opacity-0',
-            'cursor-pointer disabled:cursor-not-allowed'
-          )}
-          onFocus={() => setFocused(true)}
-          onBlur={(e) => {
-            setFocused(false);
-            onBlur?.(e);
-          }}
-          onChange={handleChange}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/GlobalHead/index.tsx b/src/interfaces/assistants_web/src/components/Shared/GlobalHead/index.tsx
deleted file mode 100644
index c4af39a3f0..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/GlobalHead/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-'use client';
-export * from './GlobalHead';
diff --git a/src/interfaces/assistants_web/src/components/Shared/HotKeys/index.ts b/src/interfaces/assistants_web/src/components/Shared/HotKeys/index.ts
deleted file mode 100644
index a12b8c98b4..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/HotKeys/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './HotKeys';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/AccessibleIcon.tsx b/src/interfaces/assistants_web/src/components/Shared/Icon/AccessibleIcon.tsx
deleted file mode 100644
index 77ca852027..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/AccessibleIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-type Props = {
-  children?: React.ReactNode;
-  label: string;
-};
-
-export const AccessibleIcon: React.FC<Props> = ({ children, label }) => {
-  const child = React.Children.only(children);
-  return (
-    <>
-      {React.cloneElement(child as React.ReactElement, {
-        'aria-hidden': 'true',
-        focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
-      })}
-      <span className="sr-only">{label}</span>
-    </>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/index.ts b/src/interfaces/assistants_web/src/components/Shared/Icon/index.ts
deleted file mode 100644
index e263cc0e6d..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Icon';
diff --git a/src/interfaces/assistants_web/src/components/Shared/InlineLink/index.ts b/src/interfaces/assistants_web/src/components/Shared/InlineLink/index.ts
deleted file mode 100644
index 1d7f30120b..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/InlineLink/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InlineLink';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Input/index.ts b/src/interfaces/assistants_web/src/components/Shared/Input/index.ts
deleted file mode 100644
index ba9fe7ebc6..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Input/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Input';
diff --git a/src/interfaces/assistants_web/src/components/Shared/InputLabel/index.ts b/src/interfaces/assistants_web/src/components/Shared/InputLabel/index.ts
deleted file mode 100644
index 1a3af1c3b6..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/InputLabel/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InputLabel';
diff --git a/src/interfaces/assistants_web/src/components/Shared/InputSearch/index.ts b/src/interfaces/assistants_web/src/components/Shared/InputSearch/index.ts
deleted file mode 100644
index a66586ac7e..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/InputSearch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './InputSearch';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Markdown/index.ts b/src/interfaces/assistants_web/src/components/Shared/Markdown/index.ts
deleted file mode 100644
index a5b9f6efd4..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Markdown/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Markdown';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Modal/index.ts b/src/interfaces/assistants_web/src/components/Shared/Modal/index.ts
deleted file mode 100644
index cb89ee1788..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Modal/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Modal';
diff --git a/src/interfaces/assistants_web/src/components/Shared/NavigationBar/NavigationBar.tsx b/src/interfaces/assistants_web/src/components/Shared/NavigationBar/NavigationBar.tsx
deleted file mode 100644
index 1f6d4d4e22..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/NavigationBar/NavigationBar.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client';
-
-import cx from 'classnames';
-import Link from 'next/link';
-import React, { PropsWithChildren } from 'react';
-
-import { Logo } from '@/components/Shared';
-import { env } from '@/env.mjs';
-
-/**
- * @description Displays the navigation bar where clicking the logo will return the user to the home page.
- */
-export const NavigationBar: React.FC<PropsWithChildren<{ className?: string }>> = ({
-  className = '',
-  children,
-}) => {
-  return (
-    <nav
-      className={cx(
-        'z-navigation flex w-full items-center justify-between rounded-lg border px-4 py-3',
-        'border-marble-950 bg-marble-1000',
-        className
-      )}
-    >
-      <Link href="/">
-        <div className="mr-3 flex items-baseline">
-          <Logo hasCustomLogo={env.NEXT_PUBLIC_HAS_CUSTOM_LOGO} />
-        </div>
-      </Link>
-      {children}
-    </nav>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/NavigationBar/index.ts b/src/interfaces/assistants_web/src/components/Shared/NavigationBar/index.ts
deleted file mode 100644
index 5e40dfcafa..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/NavigationBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './NavigationBar';
diff --git a/src/interfaces/assistants_web/src/components/Shared/PageNotFound/PageNotFound.tsx b/src/interfaces/assistants_web/src/components/Shared/PageNotFound/PageNotFound.tsx
deleted file mode 100644
index 4551e723e0..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/PageNotFound/PageNotFound.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import { Button, Text } from '@/components/Shared';
-
-export const PageNotFound: React.FC = () => {
-  return (
-    <div className="flex h-screen flex-col items-center justify-center gap-y-8 text-volcanic-100 dark:bg-volcanic-100 dark:text-marble-950 dark:selection:bg-volcanic-300">
-      <div className="flex items-center justify-center">
-        <Text as="h1" styleAs="h3" className="mr-5 border-r pr-5 font-medium">
-          404
-        </Text>
-        <Text>This page could not be found.</Text>
-      </div>
-      <Button href="/" icon="arrow-left">
-        Go back
-      </Button>
-    </div>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/PageNotFound/index.tsx b/src/interfaces/assistants_web/src/components/Shared/PageNotFound/index.tsx
deleted file mode 100644
index d6f9d2db65..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/PageNotFound/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-'use client';
-export * from './PageNotFound';
diff --git a/src/interfaces/assistants_web/src/components/Shared/PageServerError/PageServerError.tsx b/src/interfaces/assistants_web/src/components/Shared/PageServerError/PageServerError.tsx
deleted file mode 100644
index b77c2f8c9e..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/PageServerError/PageServerError.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client';
-
-import { Button, Text } from '@/components/Shared';
-
-export const PageServerError: React.FC = () => {
-  return (
-    <div className="flex h-screen flex-col items-center justify-center gap-y-8 text-volcanic-100 dark:bg-volcanic-100 dark:text-marble-950 dark:selection:bg-volcanic-300">
-      <div className="flex items-center justify-center">
-        <Text as="h1" styleAs="h3" className="mr-5 border-r pr-5 font-medium">
-          500
-        </Text>
-        <Text>Whoops! Something went wrong.</Text>
-      </div>
-      <Button href="/" icon="arrow-left">
-        Go back
-      </Button>
-    </div>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/PageServerError/index.tsx b/src/interfaces/assistants_web/src/components/Shared/PageServerError/index.tsx
deleted file mode 100644
index 5bfbe915e0..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/PageServerError/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-'use client';
-export * from './PageServerError';
diff --git a/src/interfaces/assistants_web/src/components/Shared/RadioGroup/index.ts b/src/interfaces/assistants_web/src/components/Shared/RadioGroup/index.ts
deleted file mode 100644
index ad083eb488..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/RadioGroup/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './RadioGroup';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Skeleton/index.ts b/src/interfaces/assistants_web/src/components/Shared/Skeleton/index.ts
deleted file mode 100644
index 66bc08df6b..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Skeleton/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Skeleton';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.module.css b/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.module.css
deleted file mode 100644
index 9663912bcc..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.module.css
+++ /dev/null
@@ -1,37 +0,0 @@
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .slider {
-    @apply h-10 overflow-hidden rounded border;
-  }
-
-  .slider::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    @apply border-2 border-solid;
-    @apply h-9 w-2 rounded-lg;
-  }
-}
-/* Firefox */
-.slider::-moz-range-progress {
-  @apply h-full;
-}
-.slider::-moz-range-track {
-  @apply h-full;
-}
-.slider::-moz-range-thumb {
-  -webkit-appearance: none;
-  @apply border-2 border-solid;
-  @apply h-9 w-2 rounded-none; /* on Firefox we need to remove the radius because the browser renders the thumb at the end of the progress bar */
-}
-/* IE */
-.slider::-ms-fill-lower {
-  @apply h-full;
-}
-.slider::-ms-fill-upper {
-  @apply h-full;
-}
-.slider::-ms-thumb {
-  -webkit-appearance: none;
-  @apply w-3;
-  @apply h-3;
-  @apply rounded-full;
-  @apply bg-black;
-}
diff --git a/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.themes.module.css b/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.themes.module.css
deleted file mode 100644
index 63627f3e4e..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.themes.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  .secondary {
-    @apply border-marble-800 bg-marble-1000;
-  }
-
-  .secondary::-webkit-slider-thumb {
-    box-shadow: -9999px 0 0 9999px theme('colors.marble.800');
-    @apply border-marble-800;
-    @apply bg-marble-1000;
-  }
-}
-/* Firefox */
-.secondary::-moz-range-progress {
-  @apply bg-marble-800;
-}
-.secondary::-moz-range-track {
-  @apply bg-marble-1000;
-}
-.secondary::-moz-range-thumb {
-  @apply border-marble-800;
-  @apply bg-marble-1000; /* on Firefox we need to remove the radius because the browser renders the thumb at the end of the progress bar */
-}
-/* IE */
-.secondary::-ms-fill-lower {
-  @apply bg-marble-800;
-}
-.secondary::-ms-fill-upper {
-  @apply bg-marble-1000;
-}
diff --git a/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.tsx b/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.tsx
deleted file mode 100644
index 3f10c2ae7d..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Slider/Slider.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-'use client';
-
-import { ChangeEvent, useEffect, useMemo } from 'react';
-
-import { InputLabel, Text } from '@/components/Shared';
-import { cn } from '@/utils';
-
-import styles from './Slider.module.css';
-import themes from './Slider.themes.module.css';
-
-type Props = {
-  label: string;
-  min: number;
-  max: number;
-  step: number;
-  value: number;
-  onChange: (value: number) => void;
-  showTicks?: boolean;
-  sublabel?: string;
-  className?: string;
-  tooltipLabel?: React.ReactNode;
-  formatValue?: (value: number) => string;
-  tickDescriptor?: (tickValue: number) => string;
-  dataTestId?: string;
-};
-
-/**
- *
- * Renders a slider with a label, a minimum, maximum and step value, and optional subLabel and tooltip.
- * Styling for the thumb is located in main.css
- */
-export const Slider: React.FC<Props> = ({
-  label,
-  sublabel,
-  min,
-  max,
-  step,
-  value,
-  onChange,
-  tooltipLabel,
-  formatValue,
-  showTicks = false,
-  tickDescriptor,
-  className = '',
-  dataTestId,
-}) => {
-  // if `max` is changed dynamically don't allow the value to surpass it
-  useEffect(() => {
-    if (value > max) onChange(Math.min(value, max));
-  }, [max, onChange, value]);
-
-  // if `min` is changed dynamically don't allow the value to go below it
-  useEffect(() => {
-    if (value < min) onChange(Math.max(value, min));
-  }, [min, onChange, value]);
-
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const value = Number(e.target.value);
-
-    onChange(value);
-  };
-
-  const ticks = useMemo(() => {
-    return Array.from({ length: (max - min) / step + 1 }, (_, i) => {
-      return i * step + min;
-    });
-  }, [max, min, step]);
-
-  return (
-    <div className={cn('flex flex-col space-y-4', className)}>
-      <div className="flex w-full items-center justify-between">
-        <InputLabel label={label} tooltipLabel={tooltipLabel} sublabel={sublabel} />
-        <Text>{formatValue ? formatValue(value) : value}</Text>
-      </div>
-      <div className="flex items-center">
-        <input
-          type="range"
-          value={value}
-          max={max}
-          min={min}
-          step={step}
-          onChange={handleChange}
-          className={cn(
-            'flex w-full cursor-pointer appearance-none items-center outline-none active:cursor-grabbing',
-            'focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-4 focus-visible:outline-volcanic-100',
-            styles.slider,
-            [themes['secondary']]
-          )}
-          data-testid={dataTestId}
-        />
-
-        {showTicks && (
-          <div className="absolute -z-10 flex w-full cursor-pointer justify-between">
-            {ticks.map((tick) => (
-              <span key={tick} className="h-2 w-2 rounded-full bg-black" />
-            ))}
-          </div>
-        )}
-      </div>
-      {tickDescriptor && (
-        <div className="flex w-full justify-between">
-          {ticks.map((tick) => (
-            <Text styleAs="caption" className="text-volcanic-400" key={tick}>
-              {tickDescriptor(tick)}
-            </Text>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/Slider/index.ts b/src/interfaces/assistants_web/src/components/Shared/Slider/index.ts
deleted file mode 100644
index f48a854158..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Slider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Slider';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Spinner/index.ts b/src/interfaces/assistants_web/src/components/Shared/Spinner/index.ts
deleted file mode 100644
index b259397be4..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Spinner/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Spinner';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Switch/index.ts b/src/interfaces/assistants_web/src/components/Shared/Switch/index.ts
deleted file mode 100644
index 1b19c1d39c..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Switch/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Switch';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Tabs/index.ts b/src/interfaces/assistants_web/src/components/Shared/Tabs/index.ts
deleted file mode 100644
index 856dbbb347..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Tabs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Tabs';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Tag/index.ts b/src/interfaces/assistants_web/src/components/Shared/Tag/index.ts
deleted file mode 100644
index 9790fcbf11..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Tag/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Tag';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Text/index.ts b/src/interfaces/assistants_web/src/components/Shared/Text/index.ts
deleted file mode 100644
index b0c76af0b0..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Text/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Text';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Textarea/index.ts b/src/interfaces/assistants_web/src/components/Shared/Textarea/index.ts
deleted file mode 100644
index 6449a4197e..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Textarea/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Textarea';
diff --git a/src/interfaces/assistants_web/src/components/Shared/ToastNotification/index.ts b/src/interfaces/assistants_web/src/components/Shared/ToastNotification/index.ts
deleted file mode 100644
index 68762a8800..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/ToastNotification/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ToastNotification';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Toggle/Toggle.tsx b/src/interfaces/assistants_web/src/components/Shared/Toggle/Toggle.tsx
deleted file mode 100644
index 0350367c44..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Toggle/Toggle.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-'use client';
-
-import { Cell } from '@/components/Shared/Cell/Cell';
-import { cn } from '@/utils';
-
-type ToggleOption = {
-  icon: React.ReactNode;
-  value: string;
-};
-
-type Props = React.PropsWithChildren<{
-  options: ToggleOption[];
-  selectedValue?: string;
-  className?: string;
-  onSelect?: (value: string) => void;
-}>;
-
-/**
- * A toggle with cell-shaped buttons.
- */
-export const Toggle: React.FC<Props> = ({
-  className = '',
-  options = [],
-  selectedValue,
-  onSelect,
-}) => {
-  const selectedOption = selectedValue ?? options[0].value;
-  return (
-    <div
-      className={cn('flex w-fit rounded-lg border border-green-800 bg-green-950 p-0.5', className)}
-    >
-      {options.map((option, i) => {
-        const isFirst = i === 0;
-        const selected = option.value === selectedOption;
-        const isEvenOption = i % 2 === 0;
-        const isLastOption = i === options.length - 1;
-
-        return (
-          <button
-            key={i}
-            type="button"
-            onClick={() => onSelect?.(option.value)}
-            className={cn('focus:outline-none', { '-ml-1': !isFirst, 'text-green-250': !selected })}
-          >
-            <Cell
-              size="md"
-              theme={selected ? 'green' : 'transparent'}
-              leftCell={isFirst ? false : isEvenOption ? 'flip' : true}
-              rightCell={isLastOption ? false : isEvenOption ? true : 'flip'}
-              className={cn({ 'text-green-250': !selected })}
-            >
-              {option.icon}
-            </Cell>
-          </button>
-        );
-      })}
-    </div>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/Toggle/index.ts b/src/interfaces/assistants_web/src/components/Shared/Toggle/index.ts
deleted file mode 100644
index 7aaab1d76e..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Toggle/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Toggle';
diff --git a/src/interfaces/assistants_web/src/components/Shared/ToggleWithAction/ToggleWithAction.tsx b/src/interfaces/assistants_web/src/components/Shared/ToggleWithAction/ToggleWithAction.tsx
deleted file mode 100644
index 2ea0834690..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/ToggleWithAction/ToggleWithAction.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-
-type Props = {
-  onClick?: VoidFunction;
-  duration?: number;
-  originalComponent: React.ReactNode;
-  alternateComponent: React.ReactNode;
-};
-
-/**
- * A component that toggles between two components when clicked.
- * @param onClick - A function to be called when the component is clicked.
- * @param duration - The duration in milliseconds to show the alternate component.
- * @param originalComponent - The component to show when the component is not clicked.
- * @param alternateComponent - The component to show when the component is clicked.
- */
-export const ToggleWithAction: React.FC<Props> = ({
-  onClick,
-  duration,
-  originalComponent,
-  alternateComponent,
-}) => {
-  const [showAlternateComponent, setShowAlternateComponent] = useState(false);
-
-  useEffect(() => {
-    if (showAlternateComponent) {
-      const timeoutId = setTimeout(() => {
-        setShowAlternateComponent(false);
-      }, duration ?? 2000);
-      return () => clearTimeout(timeoutId);
-    }
-  }, [showAlternateComponent]);
-
-  const handleClick = () => {
-    onClick?.();
-    setShowAlternateComponent(!showAlternateComponent);
-  };
-
-  return (
-    <button onClick={handleClick} type="button" className="flex">
-      {showAlternateComponent ? alternateComponent : originalComponent}
-    </button>
-  );
-};
diff --git a/src/interfaces/assistants_web/src/components/Shared/ToggleWithAction/index.ts b/src/interfaces/assistants_web/src/components/Shared/ToggleWithAction/index.ts
deleted file mode 100644
index 80118ca149..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/ToggleWithAction/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './ToggleWithAction';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Tooltip/index.ts b/src/interfaces/assistants_web/src/components/Shared/Tooltip/index.ts
deleted file mode 100644
index 7594a8f06c..0000000000
--- a/src/interfaces/assistants_web/src/components/Shared/Tooltip/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Tooltip';
diff --git a/src/interfaces/assistants_web/src/components/Agents/AgentCard.tsx b/src/interfaces/assistants_web/src/components/SideNavPanel/AgentIcon.tsx
similarity index 79%
rename from src/interfaces/assistants_web/src/components/Agents/AgentCard.tsx
rename to src/interfaces/assistants_web/src/components/SideNavPanel/AgentIcon.tsx
index 9fe859997c..04166d3f37 100644
--- a/src/interfaces/assistants_web/src/components/Agents/AgentCard.tsx
+++ b/src/interfaces/assistants_web/src/components/SideNavPanel/AgentIcon.tsx
@@ -2,11 +2,8 @@
 
 import { usePathname, useRouter } from 'next/navigation';
 
-import { CoralLogo, Text, Tooltip } from '@/components/Shared';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { useIsDesktop } from '@/hooks/breakpoint';
-import { useChatRoutes } from '@/hooks/chatRoutes';
-import { useConversationFileActions } from '@/hooks/files';
+import { CoralLogo, Text, Tooltip } from '@/components/UI';
+import { useBrandedColors, useChatRoutes, useConversationFileActions, useIsDesktop } from '@/hooks';
 import {
   useCitationsStore,
   useConversationStore,
@@ -22,11 +19,11 @@ type Props = {
 };
 
 /**
- * @description This component renders an agent card.
- * It shows the agent's name and a colored icon with the first letter of the agent's name.
+ * @description This component renders an agent icon.
+ * It shows a tooltip of the agent's name and a colored icon with the first letter of the agent's name.
  * If the agent is a base agent, it shows the Coral logo instead.
  */
-export const AgentCard: React.FC<Props> = ({ name, id, isBaseAgent }) => {
+export const AgentIcon: React.FC<Props> = ({ name, id, isBaseAgent }) => {
   const { conversationId } = useChatRoutes();
   const router = useRouter();
   const isDesktop = useIsDesktop();
@@ -84,8 +81,9 @@ export const AgentCard: React.FC<Props> = ({ name, id, isBaseAgent }) => {
             bg
           )}
         >
-          {isBaseAgent && <CoralLogo className={contrastFill} />}
-          {!isBaseAgent && (
+          {isBaseAgent ? (
+            <CoralLogo className={contrastFill} />
+          ) : (
             <Text className={cn('uppercase', contrastText)} styleAs="p-lg">
               {name[0]}
             </Text>
diff --git a/src/interfaces/assistants_web/src/components/ConversationList/ConversationCard.tsx b/src/interfaces/assistants_web/src/components/SideNavPanel/ConversationCard.tsx
similarity index 92%
rename from src/interfaces/assistants_web/src/components/ConversationList/ConversationCard.tsx
rename to src/interfaces/assistants_web/src/components/SideNavPanel/ConversationCard.tsx
index 6d06dbc83f..b6609fc5a7 100644
--- a/src/interfaces/assistants_web/src/components/ConversationList/ConversationCard.tsx
+++ b/src/interfaces/assistants_web/src/components/SideNavPanel/ConversationCard.tsx
@@ -3,14 +3,16 @@
 import Link from 'next/link';
 
 import { AgentPublic } from '@/cohere-client';
-import { KebabMenu, KebabMenuItem } from '@/components/KebabMenu';
-import { ShareModal } from '@/components/ShareModal';
-import { CoralLogo, Text, Tooltip } from '@/components/Shared';
+import { ShareConversation } from '@/components/Modals/ShareConversation';
+import { CoralLogo, KebabMenu, KebabMenuItem, Text, Tooltip } from '@/components/UI';
 import { useContextStore } from '@/context';
-import { useBrandedColors } from '@/hooks/brandedColors';
-import { getIsTouchDevice, useIsDesktop } from '@/hooks/breakpoint';
-import { useConversationActions } from '@/hooks/conversation';
-import { useConversationFileActions } from '@/hooks/files';
+import {
+  getIsTouchDevice,
+  useBrandedColors,
+  useConversationActions,
+  useConversationFileActions,
+  useIsDesktop,
+} from '@/hooks';
 import { useConversationStore, useSettingsStore } from '@/stores';
 import { cn, formatDateToShortDate } from '@/utils';
 
@@ -41,7 +43,7 @@ const useMenuItems = ({ conversationId }: { conversationId: string }) => {
     if (!conversationId) return;
     open({
       title: 'Share link to conversation',
-      content: <ShareModal conversationId={conversationId} />,
+      content: <ShareConversation conversationId={conversationId} />,
     });
   };
 
diff --git a/src/interfaces/assistants_web/src/components/ConversationList/ConversationList.tsx b/src/interfaces/assistants_web/src/components/SideNavPanel/ConversationList.tsx
similarity index 88%
rename from src/interfaces/assistants_web/src/components/ConversationList/ConversationList.tsx
rename to src/interfaces/assistants_web/src/components/SideNavPanel/ConversationList.tsx
index 907b5c9eff..4eae8d1318 100644
--- a/src/interfaces/assistants_web/src/components/ConversationList/ConversationList.tsx
+++ b/src/interfaces/assistants_web/src/components/SideNavPanel/ConversationList.tsx
@@ -4,14 +4,13 @@ import { useMemo, useState } from 'react';
 import { Flipped, Flipper } from 'react-flip-toolkit';
 
 import { ConversationWithoutMessages as Conversation } from '@/cohere-client';
-import { AgentCard } from '@/components/Agents/AgentCard';
-import { ConversationListLoading } from '@/components/ConversationList/ConversationListLoading';
-import { ConversationListPanelGroup } from '@/components/ConversationList/ConversationListPanelGroup';
-import { Icon, Text, Tooltip } from '@/components/Shared';
-import { InputSearch } from '@/components/Shared/InputSearch';
-import { useRecentAgents } from '@/hooks/agents';
-import { useConversations } from '@/hooks/conversation';
-import { useSearchConversations } from '@/hooks/search';
+import {
+  AgentIcon,
+  ConversationListLoading,
+  ConversationListPanelGroup,
+} from '@/components/SideNavPanel';
+import { Icon, InputSearch, Text, Tooltip } from '@/components/UI';
+import { useConversations, useRecentAgents, useSearchConversations } from '@/hooks';
 import { useSettingsStore } from '@/stores';
 import { cn } from '@/utils';
 
@@ -47,7 +46,7 @@ export const ConversationList: React.FC = () => {
               <Flipped key={agent?.id || agent?.name} flipId={agent?.id || agent?.name}>
                 {(flippedProps) => (
                   <div {...flippedProps} key={agent.id || agent.name}>
-                    <AgentCard name={agent.name} id={agent.id} isBaseAgent={!agent.id} />
+                    <AgentIcon name={agent.name} id={agent.id} isBaseAgent={!agent.id} />
                   </div>
                 )}
               </Flipped>
diff --git a/src/interfaces/assistants_web/src/components/ConversationList/ConversationListLoading.tsx b/src/interfaces/assistants_web/src/components/SideNavPanel/ConversationListLoading.tsx
similarity index 91%
rename from src/interfaces/assistants_web/src/components/ConversationList/ConversationListLoading.tsx
rename to src/interfaces/assistants_web/src/components/SideNavPanel/ConversationListLoading.tsx
index 89956d9bd9..521b353602 100644
--- a/src/interfaces/assistants_web/src/components/ConversationList/ConversationListLoading.tsx
+++ b/src/interfaces/assistants_web/src/components/SideNavPanel/ConversationListLoading.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Skeleton } from '@/components/Shared';
+import { Skeleton } from '@/components/UI';
 
 type Props = { numBars?: number };
 
diff --git a/src/interfaces/assistants_web/src/components/ConversationList/ConversationListPanelGroup.tsx b/src/interfaces/assistants_web/src/components/SideNavPanel/ConversationListPanelGroup.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/ConversationList/ConversationListPanelGroup.tsx
rename to src/interfaces/assistants_web/src/components/SideNavPanel/ConversationListPanelGroup.tsx
index 44c4b9e904..cd10ea21b3 100644
--- a/src/interfaces/assistants_web/src/components/ConversationList/ConversationListPanelGroup.tsx
+++ b/src/interfaces/assistants_web/src/components/SideNavPanel/ConversationListPanelGroup.tsx
@@ -4,14 +4,11 @@ import { useMemo } from 'react';
 import { Flipped, Flipper } from 'react-flip-toolkit';
 
 import { ConversationWithoutMessages as Conversation } from '@/cohere-client';
-import {
-  ConversationCard,
-  ConversationListItem,
-} from '@/components/ConversationList/ConversationCard';
-import { Text } from '@/components/Shared';
-import { useListAgents } from '@/hooks/agents';
+import { ConversationCard, ConversationListItem } from '@/components/SideNavPanel';
+import { Text } from '@/components/UI';
+import { useListAgents } from '@/hooks';
 import { useConversationStore } from '@/stores';
-import { getWeeksAgo } from '@/utils/format';
+import { getWeeksAgo } from '@/utils';
 
 type Props = {
   conversations: Conversation[];
diff --git a/src/interfaces/assistants_web/src/components/Agents/LeftPanel.tsx b/src/interfaces/assistants_web/src/components/SideNavPanel/SideNavPanel.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/Agents/LeftPanel.tsx
rename to src/interfaces/assistants_web/src/components/SideNavPanel/SideNavPanel.tsx
index ce15365294..89df0f20b2 100644
--- a/src/interfaces/assistants_web/src/components/Agents/LeftPanel.tsx
+++ b/src/interfaces/assistants_web/src/components/SideNavPanel/SideNavPanel.tsx
@@ -4,12 +4,19 @@ import { Transition } from '@headlessui/react';
 import Link from 'next/link';
 import React from 'react';
 
-import { ConversationList } from '@/components/ConversationList/ConversationList';
-import { Button, ButtonTheme, Icon, IconName, Logo, Text, Tooltip } from '@/components/Shared';
-import { Shortcut } from '@/components/Shortcut';
+import { ConversationList } from '@/components/SideNavPanel';
+import {
+  Button,
+  ButtonTheme,
+  Icon,
+  IconName,
+  Logo,
+  Shortcut,
+  Text,
+  Tooltip,
+} from '@/components/UI';
 import { env } from '@/env.mjs';
-import { useIsDesktop } from '@/hooks/breakpoint';
-import { useNavigateToNewChat } from '@/hooks/chatRoutes';
+import { useIsDesktop, useNavigateToNewChat } from '@/hooks';
 import { useSettingsStore } from '@/stores';
 import { cn } from '@/utils';
 
@@ -18,7 +25,7 @@ import { cn } from '@/utils';
  * It contains the logo and a button to expand or collapse the panel.
  * It also renders the children components that are passed to it.
  */
-export const LeftPanel: React.FC<{ className?: string }> = ({ className = '' }) => {
+export const SideNavPanel: React.FC<{ className?: string }> = ({ className = '' }) => {
   const asideRef = React.useRef<HTMLDivElement>(null);
   const { isLeftPanelOpen } = useSettingsStore();
   const isDesktop = useIsDesktop();
diff --git a/src/interfaces/assistants_web/src/components/SideNavPanel/index.ts b/src/interfaces/assistants_web/src/components/SideNavPanel/index.ts
new file mode 100644
index 0000000000..ca77fdc78f
--- /dev/null
+++ b/src/interfaces/assistants_web/src/components/SideNavPanel/index.ts
@@ -0,0 +1,6 @@
+export * from './AgentIcon';
+export * from './ConversationCard';
+export * from './ConversationList';
+export * from './ConversationListLoading';
+export * from './ConversationListPanelGroup';
+export * from './SideNavPanel';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Banner/Banner.tsx b/src/interfaces/assistants_web/src/components/UI/Banner.tsx
similarity index 90%
rename from src/interfaces/assistants_web/src/components/Shared/Banner/Banner.tsx
rename to src/interfaces/assistants_web/src/components/UI/Banner.tsx
index 4493422984..3e7b8dd1cd 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Banner/Banner.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Banner.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Text } from '@/components/Shared/Text';
+import { Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Button/Button.tsx b/src/interfaces/assistants_web/src/components/UI/Button.tsx
similarity index 99%
rename from src/interfaces/assistants_web/src/components/Shared/Button/Button.tsx
rename to src/interfaces/assistants_web/src/components/UI/Button.tsx
index 8c62fa6e54..b6e52930ef 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Button/Button.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Button.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import React, { HTMLAttributeAnchorTarget, ReactNode } from 'react';
 
-import { Icon, IconName, Spinner, Text } from '@/components/Shared';
+import { Icon, IconName, Spinner, Text } from '@/components/UI';
 import { COHERE_BRANDED_COLORS } from '@/constants';
 import { cn } from '@/utils';
 
diff --git a/src/interfaces/assistants_web/src/components/Shared/Checkbox/Checkbox.tsx b/src/interfaces/assistants_web/src/components/UI/Checkbox.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Checkbox/Checkbox.tsx
rename to src/interfaces/assistants_web/src/components/UI/Checkbox.tsx
index 684cc6271f..7b35ae868c 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Checkbox/Checkbox.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Checkbox.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 
-import { Icon, InputLabel } from '@/components/Shared';
+import { Icon, InputLabel } from '@/components/UI';
 import { cn } from '@/utils';
 
 type CheckboxProps = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/CodeSnippet/CodeSnippet.tsx b/src/interfaces/assistants_web/src/components/UI/CodeSnippet.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/Shared/CodeSnippet/CodeSnippet.tsx
rename to src/interfaces/assistants_web/src/components/UI/CodeSnippet.tsx
index 21c8f1b145..d9a00e51c8 100644
--- a/src/interfaces/assistants_web/src/components/Shared/CodeSnippet/CodeSnippet.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/CodeSnippet.tsx
@@ -8,8 +8,9 @@ import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascr
 import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
 import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
 
-import { CopyToClipboardButton } from '..';
-import natureTheme from './theme';
+import natureTheme from '@/themes/codeSnippetTheme';
+
+import { CopyToClipboardButton } from '.';
 
 type CopyToClipboardRef = React.ElementRef<typeof CopyToClipboardButton>;
 
diff --git a/src/interfaces/assistants_web/src/components/CollapsibleSection.tsx b/src/interfaces/assistants_web/src/components/UI/CollapsibleSection.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/CollapsibleSection.tsx
rename to src/interfaces/assistants_web/src/components/UI/CollapsibleSection.tsx
index 1b9f07a2e4..dc840b694f 100644
--- a/src/interfaces/assistants_web/src/components/CollapsibleSection.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/CollapsibleSection.tsx
@@ -2,14 +2,14 @@
 
 import { ReactNode } from 'react';
 
-import { Icon, Text } from '@/components/Shared';
+import { Icon, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
   number?: number;
   title?: string | ReactNode;
-  description?: string | ReactNode;
   children: ReactNode;
+  description?: string | ReactNode;
   isExpanded?: boolean;
   setIsExpanded?: (expanded: boolean) => void;
 };
diff --git a/src/interfaces/assistants_web/src/components/Shared/CopyToClipboardButton/CopyToClipboardButton.tsx b/src/interfaces/assistants_web/src/components/UI/CopyToClipboardButton.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/Shared/CopyToClipboardButton/CopyToClipboardButton.tsx
rename to src/interfaces/assistants_web/src/components/UI/CopyToClipboardButton.tsx
index 08b4a55fef..18aee8cb15 100644
--- a/src/interfaces/assistants_web/src/components/Shared/CopyToClipboardButton/CopyToClipboardButton.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/CopyToClipboardButton.tsx
@@ -2,8 +2,7 @@
 
 import { MouseEvent, forwardRef, useImperativeHandle, useState } from 'react';
 
-import { IconButton } from '@/components/IconButton';
-import { Button, ButtonKind, IconName, Tooltip } from '@/components/Shared';
+import { Button, ButtonKind, IconButton, IconName, Tooltip } from '@/components/UI';
 import { cn } from '@/utils';
 
 type CopyToClipboardButtonProps = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/CoralLogo/CoralLogo.tsx b/src/interfaces/assistants_web/src/components/UI/CoralLogo.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/CoralLogo/CoralLogo.tsx
rename to src/interfaces/assistants_web/src/components/UI/CoralLogo.tsx
diff --git a/src/interfaces/assistants_web/src/components/DarkModeToggle/index.tsx b/src/interfaces/assistants_web/src/components/UI/DarkModeToggle.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/DarkModeToggle/index.tsx
rename to src/interfaces/assistants_web/src/components/UI/DarkModeToggle.tsx
index ef8d55e0b6..1367eac4f9 100644
--- a/src/interfaces/assistants_web/src/components/DarkModeToggle/index.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/DarkModeToggle.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from 'next-themes';
 
-import { Icon, Text } from '@/components/Shared';
+import { Icon, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 export const DarkModeToggle = () => {
diff --git a/src/interfaces/assistants_web/src/components/Shared/DocumentIcon/DocumentIcon.tsx b/src/interfaces/assistants_web/src/components/UI/DocumentIcon.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/Shared/DocumentIcon/DocumentIcon.tsx
rename to src/interfaces/assistants_web/src/components/UI/DocumentIcon.tsx
index 131bc2716d..314d2549c4 100644
--- a/src/interfaces/assistants_web/src/components/Shared/DocumentIcon/DocumentIcon.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/DocumentIcon.tsx
@@ -4,7 +4,7 @@ import type { StaticImport } from 'next/dist/shared/lib/get-img-props';
 import Image from 'next/image';
 import { useEffect, useState } from 'react';
 
-import { Icon, IconKind, IconName } from '@/components/Shared';
+import { Icon, IconKind, IconName } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/DragDropFileInput/DragDropFileInput.tsx b/src/interfaces/assistants_web/src/components/UI/DragDropFileInput.tsx
similarity index 74%
rename from src/interfaces/assistants_web/src/components/Shared/DragDropFileInput/DragDropFileInput.tsx
rename to src/interfaces/assistants_web/src/components/UI/DragDropFileInput.tsx
index b994a19e3e..e9d459941c 100644
--- a/src/interfaces/assistants_web/src/components/Shared/DragDropFileInput/DragDropFileInput.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/DragDropFileInput.tsx
@@ -2,12 +2,13 @@
 
 import { ReactNode, useState } from 'react';
 
-import { Text } from '@/components/Shared/Text';
+import { useFocusFileInput } from '@/hooks';
 import { cn } from '@/utils';
 
+import { Text } from './Text';
+
 // Hidden files that should not be uploaded
 const IGNORED_FILES = ['.DS_Store'];
-
 export type FileAccept =
   | 'text/csv'
   | 'text/plain'
@@ -23,47 +24,30 @@ export type FileAccept =
   | 'application/pdf'
   | 'application/epub+zip';
 
-export type DragDropFileInputProps = {
-  id?: string;
-  name?: string;
+type Props = {
+  active: boolean;
+  onUploadFile: (files: File[]) => void;
   label?: ReactNode;
-  subLabel?: string;
-  dragActiveLabel?: string;
-  dragActiveDefault?: boolean;
-  required?: boolean;
   accept?: FileAccept[];
-  placeholder?: string;
-  disabled?: boolean;
-  readOnly?: boolean;
-  className?: string;
-  multiple?: boolean;
-  onDrop?: (files: File[]) => void | Promise<void>;
 };
 
-/**
- * File input that allows for drag and drop
- */
-export const DragDropFileInput: React.FC<DragDropFileInputProps> = ({
-  id,
+export const DragDropFileInput: React.FC<Props> = ({
+  active,
   label = (
     <>
       Drag and drop files here or <u>browse files</u>
     </>
   ),
-  subLabel = '.PDF or .TXT, Max 20MB',
-  dragActiveLabel = 'Drop files to upload',
-  dragActiveDefault = false,
-  name,
-  required,
   accept = ['application/pdf', 'text/plain'],
-  placeholder = '',
-  disabled = false,
-  readOnly = false,
-  multiple = false,
-  className,
-  onDrop,
+  onUploadFile,
 }) => {
-  const [dragActive, setDragActive] = useState(dragActiveDefault);
+  const { focusFileInput } = useFocusFileInput();
+  const [dragActive, setDragActive] = useState(false);
+
+  const handleUploadFile = async (files: File[]) => {
+    focusFileInput();
+    onUploadFile(files);
+  };
 
   const handleDrop = async (e: React.DragEvent<HTMLInputElement>) => {
     const droppedFilesSystem = e.dataTransfer.items[0].webkitGetAsEntry();
@@ -103,7 +87,7 @@ export const DragDropFileInput: React.FC<DragDropFileInputProps> = ({
       }
     };
     await traverseFolder(droppedFilesSystem.filesystem.root);
-    onDrop?.(filesList);
+    handleUploadFile(filesList);
 
     setDragActive(false);
   };
@@ -114,33 +98,28 @@ export const DragDropFileInput: React.FC<DragDropFileInputProps> = ({
         'relative flex h-28 w-full flex-col items-center justify-center rounded-md border border-mushroom-800 px-3 py-6',
         'transition duration-200',
         'border-dashed bg-mushroom-950',
+        'absolute inset-0 z-drag-drop-input-overlay hidden h-full w-full rounded border-none bg-mushroom-800',
         {
+          flex: active,
           'border-solid bg-mushroom-800': dragActive,
-        },
-        className
+        }
       )}
     >
       {dragActive ? (
-        <Text className="max-w-[170px] text-center text-mushroom-300">{dragActiveLabel}</Text>
+        <Text className="max-w-[170px] text-center text-mushroom-300">Drop files to upload</Text>
       ) : (
         <>
           <Text className="max-w-[210px] text-center text-mushroom-300">{label}</Text>
           <Text className="text-center text-mushroom-400" styleAs="caption">
-            {subLabel}
+            .PDF or .TXT, Max 20MB
           </Text>
         </>
       )}
       <input
-        id={id}
         className="absolute left-0 top-0 h-full w-full opacity-0"
         type="file"
-        multiple={multiple}
+        multiple
         accept={accept.toString()}
-        name={name}
-        required={required}
-        placeholder={placeholder}
-        disabled={disabled}
-        readOnly={readOnly}
         onDragEnter={() => setDragActive(true)}
         onDragOver={() => setDragActive(true)}
         onDragLeave={() => setDragActive(false)}
diff --git a/src/interfaces/assistants_web/src/components/Shared/Dropdown/Dropdown.tsx b/src/interfaces/assistants_web/src/components/UI/Dropdown.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/Shared/Dropdown/Dropdown.tsx
rename to src/interfaces/assistants_web/src/components/UI/Dropdown.tsx
index c90685e9c0..649421f779 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Dropdown/Dropdown.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Dropdown.tsx
@@ -9,8 +9,7 @@ import {
   ListboxOptions,
 } from '@headlessui/react';
 
-import { Icon } from '@/components/Shared/Icon';
-import { Text } from '@/components/Shared/Text';
+import { Icon, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 export type DropdownOption = {
diff --git a/src/interfaces/assistants_web/src/components/GuideTooltip.tsx b/src/interfaces/assistants_web/src/components/UI/GuideTooltip.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/GuideTooltip.tsx
rename to src/interfaces/assistants_web/src/components/UI/GuideTooltip.tsx
index b04f5cacb9..621602581d 100644
--- a/src/interfaces/assistants_web/src/components/GuideTooltip.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/GuideTooltip.tsx
@@ -3,7 +3,7 @@
 import { Transition } from '@headlessui/react';
 import React from 'react';
 
-import { Icon, Text } from '@/components/Shared';
+import { Icon, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icon.tsx b/src/interfaces/assistants_web/src/components/UI/Icon.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icon.tsx
rename to src/interfaces/assistants_web/src/components/UI/Icon.tsx
index 4b88cd1f80..a70d11b1d7 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icon.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Icon.tsx
@@ -1,4 +1,5 @@
-import { AccessibleIcon } from '@/components/Shared/Icon/AccessibleIcon';
+import React from 'react';
+
 import {
   Add,
   ArrowClockwise,
@@ -55,7 +56,7 @@ import {
   UsersThree,
   Warning,
   Web,
-} from '@/components/Shared/Icon/Icons';
+} from '@/assets/icons';
 import { cn } from '@/utils';
 
 export const IconList = [
@@ -144,6 +145,19 @@ export const Icon: React.FC<Props> = ({ name, kind = 'default', size = 'md', cla
   );
 };
 
+const AccessibleIcon = ({ children, label }: { children?: React.ReactNode; label: string }) => {
+  const child = React.Children.only(children);
+  return (
+    <>
+      {React.cloneElement(child as React.ReactElement, {
+        'aria-hidden': 'true',
+        focusable: 'false', // See: https://allyjs.io/tutorials/focusing-in-svg.html#making-svg-elements-focusable
+      })}
+      <span className="sr-only">{label}</span>
+    </>
+  );
+};
+
 const getIcon = (name: IconName, kind: IconKind): React.ReactNode => {
   return {
     ['add']: (
diff --git a/src/interfaces/assistants_web/src/components/IconButton.tsx b/src/interfaces/assistants_web/src/components/UI/IconButton.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/IconButton.tsx
rename to src/interfaces/assistants_web/src/components/UI/IconButton.tsx
index 5f0ce3e777..e1bb5c0bd3 100644
--- a/src/interfaces/assistants_web/src/components/IconButton.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/IconButton.tsx
@@ -3,7 +3,7 @@
 import { Placement } from '@floating-ui/react';
 import React, { HTMLAttributeAnchorTarget, ReactElement } from 'react';
 
-import { Button, IconName, Tooltip } from '@/components/Shared';
+import { Button, IconName, Tooltip } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/InlineLink/InlineLink.tsx b/src/interfaces/assistants_web/src/components/UI/InlineLink.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/InlineLink/InlineLink.tsx
rename to src/interfaces/assistants_web/src/components/UI/InlineLink.tsx
index 8b517716ea..89bb700ca6 100644
--- a/src/interfaces/assistants_web/src/components/Shared/InlineLink/InlineLink.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/InlineLink.tsx
@@ -3,7 +3,7 @@
 import Link from 'next/link';
 import { ReactElement } from 'react';
 
-import { Icon, IconName } from '@/components/Shared';
+import { Icon, IconName } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Input/Input.tsx b/src/interfaces/assistants_web/src/components/UI/Input.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/Shared/Input/Input.tsx
rename to src/interfaces/assistants_web/src/components/UI/Input.tsx
index 2e4f69d83e..0dcdfe7578 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Input/Input.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Input.tsx
@@ -3,12 +3,9 @@
 import { Field, Label } from '@headlessui/react';
 import { forwardRef, useState } from 'react';
 
-import { Icon } from '@/components/Shared/Icon';
-import { STYLE_LEVEL_TO_CLASSES, Text } from '@/components/Shared/Text';
+import { CopyToClipboardIconButton, Icon, STYLE_LEVEL_TO_CLASSES, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
-import { CopyToClipboardIconButton } from '../CopyToClipboardButton';
-
 type Props = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value'> & {
   value?: string;
   label?: string;
diff --git a/src/interfaces/assistants_web/src/components/Shared/InputLabel/InputLabel.tsx b/src/interfaces/assistants_web/src/components/UI/InputLabel.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/Shared/InputLabel/InputLabel.tsx
rename to src/interfaces/assistants_web/src/components/UI/InputLabel.tsx
index 10e7c32966..a53d1478b7 100644
--- a/src/interfaces/assistants_web/src/components/Shared/InputLabel/InputLabel.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/InputLabel.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Text, Tooltip } from '@/components/Shared';
+import { Text, Tooltip } from '@/components/UI';
 import { cn } from '@/utils';
 
 export type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/InputSearch/InputSearch.tsx b/src/interfaces/assistants_web/src/components/UI/InputSearch.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/components/Shared/InputSearch/InputSearch.tsx
rename to src/interfaces/assistants_web/src/components/UI/InputSearch.tsx
index a89685746a..6759015035 100644
--- a/src/interfaces/assistants_web/src/components/Shared/InputSearch/InputSearch.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/InputSearch.tsx
@@ -1,8 +1,9 @@
+'use client';
+
 import { Field } from '@headlessui/react';
 import { useRef, useState } from 'react';
 
-import { Icon } from '@/components/Shared/Icon';
-import { STYLE_LEVEL_TO_CLASSES } from '@/components/Shared/Text';
+import { Icon, STYLE_LEVEL_TO_CLASSES } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = Omit<React.HTMLProps<HTMLInputElement>, 'onChange' | 'value'> & {
diff --git a/src/interfaces/assistants_web/src/components/KebabMenu.tsx b/src/interfaces/assistants_web/src/components/UI/KebabMenu.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/KebabMenu.tsx
rename to src/interfaces/assistants_web/src/components/UI/KebabMenu.tsx
index 03c95f2d79..21bfbdaef1 100644
--- a/src/interfaces/assistants_web/src/components/KebabMenu.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/KebabMenu.tsx
@@ -10,7 +10,7 @@ import {
 } from '@headlessui/react';
 import Link from 'next/link';
 
-import { Icon, IconName, Text } from '@/components/Shared';
+import { Icon, IconName, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 export type KebabMenuItem = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Logo.tsx b/src/interfaces/assistants_web/src/components/UI/Logo.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Logo.tsx
rename to src/interfaces/assistants_web/src/components/UI/Logo.tsx
diff --git a/src/interfaces/assistants_web/src/components/LongPressMenu.tsx b/src/interfaces/assistants_web/src/components/UI/LongPressMenu.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/LongPressMenu.tsx
rename to src/interfaces/assistants_web/src/components/UI/LongPressMenu.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Modal/Modal.tsx b/src/interfaces/assistants_web/src/components/UI/Modal.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Modal/Modal.tsx
rename to src/interfaces/assistants_web/src/components/UI/Modal.tsx
index d40ff8ab16..0271f6c345 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Modal/Modal.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Modal.tsx
@@ -3,7 +3,7 @@
 import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
 import React, { Fragment } from 'react';
 
-import { Text } from '@/components/Shared';
+import { Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type ModalProps = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/RadioGroup/RadioGroup.tsx b/src/interfaces/assistants_web/src/components/UI/RadioGroup.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/RadioGroup/RadioGroup.tsx
rename to src/interfaces/assistants_web/src/components/UI/RadioGroup.tsx
index ce6cfa92a5..d015dbb38b 100644
--- a/src/interfaces/assistants_web/src/components/Shared/RadioGroup/RadioGroup.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/RadioGroup.tsx
@@ -2,7 +2,7 @@
 
 import { Label, Radio, RadioGroup as _RadioGroup } from '@headlessui/react';
 
-import { Text } from '@/components/Shared/Text';
+import { Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Option<K> = {
diff --git a/src/interfaces/assistants_web/src/components/Shortcut.tsx b/src/interfaces/assistants_web/src/components/UI/Shortcut.tsx
similarity index 89%
rename from src/interfaces/assistants_web/src/components/Shortcut.tsx
rename to src/interfaces/assistants_web/src/components/UI/Shortcut.tsx
index 8f95e9d778..86379d6602 100644
--- a/src/interfaces/assistants_web/src/components/Shortcut.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Shortcut.tsx
@@ -1,4 +1,4 @@
-import { Text } from '@/components/Shared';
+import { Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type Props = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Skeleton/Skeleton.tsx b/src/interfaces/assistants_web/src/components/UI/Skeleton.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Skeleton/Skeleton.tsx
rename to src/interfaces/assistants_web/src/components/UI/Skeleton.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Spinner/Spinner.tsx b/src/interfaces/assistants_web/src/components/UI/Spinner.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Spinner/Spinner.tsx
rename to src/interfaces/assistants_web/src/components/UI/Spinner.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Banner/Banner.stories.tsx b/src/interfaces/assistants_web/src/components/UI/Stories/Banner.stories.tsx
similarity index 88%
rename from src/interfaces/assistants_web/src/components/Shared/Banner/Banner.stories.tsx
rename to src/interfaces/assistants_web/src/components/UI/Stories/Banner.stories.tsx
index 618ad6ed46..70c6768013 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Banner/Banner.stories.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Stories/Banner.stories.tsx
@@ -1,7 +1,7 @@
 // Replace your-framework with the name of your framework
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { Banner } from '@/components/Shared';
+import { Banner } from '@/components/UI';
 
 const meta: Meta<typeof Banner> = {
   title: 'Components/Banner',
diff --git a/src/interfaces/assistants_web/src/components/Shared/Button/Button.stories.tsx b/src/interfaces/assistants_web/src/components/UI/Stories/Button.stories.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Button/Button.stories.tsx
rename to src/interfaces/assistants_web/src/components/UI/Stories/Button.stories.tsx
index 0edb9dc90d..b41717c50e 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Button/Button.stories.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Stories/Button.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
-import { Button, IconList, Text } from '@/components/Shared';
+import { Button, IconList, Text } from '@/components/UI';
 
 const meta: Meta<typeof Button> = {
   title: 'Components/Button',
diff --git a/src/interfaces/assistants_web/src/components/Shared/Checkbox/Checkbox.stories.tsx b/src/interfaces/assistants_web/src/components/UI/Stories/Checkbox.stories.tsx
similarity index 96%
rename from src/interfaces/assistants_web/src/components/Shared/Checkbox/Checkbox.stories.tsx
rename to src/interfaces/assistants_web/src/components/UI/Stories/Checkbox.stories.tsx
index b1a5d16178..6e29feed8d 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Checkbox/Checkbox.stories.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Stories/Checkbox.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryFn, StoryObj } from '@storybook/react';
 import { useState } from 'react';
 
-import { Checkbox, Text } from '@/components/Shared';
+import { Checkbox, Text } from '@/components/UI';
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Components/Checkbox',
diff --git a/src/interfaces/assistants_web/src/components/Shared/Icon/Icon.stories.tsx b/src/interfaces/assistants_web/src/components/UI/Stories/Icon.stories.tsx
similarity index 95%
rename from src/interfaces/assistants_web/src/components/Shared/Icon/Icon.stories.tsx
rename to src/interfaces/assistants_web/src/components/UI/Stories/Icon.stories.tsx
index f8ba7efdf9..d88b2919a7 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Icon/Icon.stories.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Stories/Icon.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryFn, StoryObj } from '@storybook/react';
 
-import { Icon, IconList, Text } from '@/components/Shared';
+import { Icon, IconList, Text } from '@/components/UI';
 
 const meta: Meta<typeof Icon> = {
   title: 'Components/Icon',
diff --git a/src/interfaces/assistants_web/src/components/Shared/Switch/Switch.tsx b/src/interfaces/assistants_web/src/components/UI/Switch.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Switch/Switch.tsx
rename to src/interfaces/assistants_web/src/components/UI/Switch.tsx
index 324969f8fa..5ccf10d275 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Switch/Switch.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Switch.tsx
@@ -3,7 +3,7 @@
 import { Placement } from '@floating-ui/react';
 import { Field, Switch as HUSwitch, Label } from '@headlessui/react';
 
-import { Text, Tooltip } from '@/components/Shared';
+import { Text, Tooltip } from '@/components/UI';
 import { COHERE_BRANDED_COLORS } from '@/constants';
 import { cn } from '@/utils';
 
diff --git a/src/interfaces/assistants_web/src/components/Shared/Tabs/Tabs.tsx b/src/interfaces/assistants_web/src/components/UI/Tabs.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Tabs/Tabs.tsx
rename to src/interfaces/assistants_web/src/components/UI/Tabs.tsx
index aaaf8fe48b..3c4d10f23d 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Tabs/Tabs.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Tabs.tsx
@@ -3,7 +3,7 @@
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@headlessui/react';
 import { ReactNode, useEffect, useRef } from 'react';
 
-import { Skeleton, Text } from '@/components/Shared';
+import { Skeleton, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
 type TabsProps = {
diff --git a/src/interfaces/assistants_web/src/components/Shared/Tag/Tag.tsx b/src/interfaces/assistants_web/src/components/UI/Tag.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/Shared/Tag/Tag.tsx
rename to src/interfaces/assistants_web/src/components/UI/Tag.tsx
index be8a5ad4dc..eacbb696a7 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Tag/Tag.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Tag.tsx
@@ -3,7 +3,7 @@
 import cx from 'classnames';
 import { ReactElement } from 'react';
 
-import { Icon, IconName, Text } from '@/components/Shared';
+import { Icon, IconName, Text } from '@/components/UI';
 
 export type TagKind = 'primary' | 'secondary';
 export type TagTheme = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'disabled';
diff --git a/src/interfaces/assistants_web/src/components/Shared/Text/Text.tsx b/src/interfaces/assistants_web/src/components/UI/Text.tsx
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/Text/Text.tsx
rename to src/interfaces/assistants_web/src/components/UI/Text.tsx
diff --git a/src/interfaces/assistants_web/src/components/Shared/Textarea/Textarea.tsx b/src/interfaces/assistants_web/src/components/UI/Textarea.tsx
similarity index 93%
rename from src/interfaces/assistants_web/src/components/Shared/Textarea/Textarea.tsx
rename to src/interfaces/assistants_web/src/components/UI/Textarea.tsx
index 19f214d9f1..10425c8e88 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Textarea/Textarea.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Textarea.tsx
@@ -3,11 +3,9 @@
 import { Field, Label } from '@headlessui/react';
 import { forwardRef } from 'react';
 
-import { STYLE_LEVEL_TO_CLASSES, Text } from '@/components/Shared/Text';
+import { InputLabel, STYLE_LEVEL_TO_CLASSES, Text } from '@/components/UI';
 import { cn } from '@/utils';
 
-import { InputLabel } from '../InputLabel';
-
 type Props = Omit<React.HTMLProps<HTMLTextAreaElement>, 'onChange' | 'value'> & {
   value?: string;
   label?: string;
diff --git a/src/interfaces/assistants_web/src/components/ToggleCard.tsx b/src/interfaces/assistants_web/src/components/UI/ToggleCard.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/components/ToggleCard.tsx
rename to src/interfaces/assistants_web/src/components/UI/ToggleCard.tsx
index 4d7882076c..f760a6be5c 100644
--- a/src/interfaces/assistants_web/src/components/ToggleCard.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/ToggleCard.tsx
@@ -2,8 +2,8 @@
 
 import React from 'react';
 
-import { Icon, IconName, Input, Switch, Text } from '@/components/Shared';
-import { useBrandedColors } from '@/hooks/brandedColors';
+import { Icon, IconName, Input, Switch, Text } from '@/components/UI';
+import { useBrandedColors } from '@/hooks';
 
 type Props = {
   checked: boolean;
diff --git a/src/interfaces/assistants_web/src/components/Shared/Tooltip/Tooltip.tsx b/src/interfaces/assistants_web/src/components/UI/Tooltip.tsx
similarity index 98%
rename from src/interfaces/assistants_web/src/components/Shared/Tooltip/Tooltip.tsx
rename to src/interfaces/assistants_web/src/components/UI/Tooltip.tsx
index 0966cf0518..98db1daaac 100644
--- a/src/interfaces/assistants_web/src/components/Shared/Tooltip/Tooltip.tsx
+++ b/src/interfaces/assistants_web/src/components/UI/Tooltip.tsx
@@ -15,7 +15,7 @@ import {
 import cx from 'classnames';
 import { PropsWithChildren, useEffect, useState } from 'react';
 
-import { Icon, Text } from '@/components/Shared';
+import { Icon, Text } from '@/components/UI';
 
 export type TooltipProps = PropsWithChildren<{
   label: React.ReactNode;
diff --git a/src/interfaces/assistants_web/src/components/Shared/index.ts b/src/interfaces/assistants_web/src/components/UI/index.ts
similarity index 70%
rename from src/interfaces/assistants_web/src/components/Shared/index.ts
rename to src/interfaces/assistants_web/src/components/UI/index.ts
index e9fc499e4c..df54a786e7 100644
--- a/src/interfaces/assistants_web/src/components/Shared/index.ts
+++ b/src/interfaces/assistants_web/src/components/UI/index.ts
@@ -2,32 +2,32 @@ export * from './Banner';
 export * from './Button';
 export * from './Checkbox';
 export * from './CodeSnippet';
+export * from './CollapsibleSection';
 export * from './CopyToClipboardButton';
 export * from './CoralLogo';
+export * from './DarkModeToggle';
 export * from './DocumentIcon';
 export * from './DragDropFileInput';
 export * from './Dropdown';
+export * from './GuideTooltip';
 export * from './Icon';
+export * from './IconButton';
 export * from './InlineLink';
 export * from './Input';
 export * from './InputLabel';
+export * from './InputSearch';
+export * from './KebabMenu';
 export * from './Logo';
-export * from './Markdown';
+export * from './LongPressMenu';
 export * from './Modal';
-export * from './NavigationBar';
-export * from './PageNotFound';
-export * from './PageServerError';
 export * from './RadioGroup';
+export * from './Shortcut';
 export * from './Skeleton';
-export * from './Slider';
 export * from './Spinner';
 export * from './Switch';
 export * from './Tabs';
 export * from './Tag';
 export * from './Text';
 export * from './Textarea';
-export * from './ToastNotification';
-export * from './Toggle';
-export * from './ToggleWithAction';
+export * from './ToggleCard';
 export * from './Tooltip';
-export * from './WebManifestHead';
diff --git a/src/interfaces/assistants_web/src/constants.ts b/src/interfaces/assistants_web/src/constants.ts
deleted file mode 100644
index 46b294677a..0000000000
--- a/src/interfaces/assistants_web/src/constants.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { AgentPublic } from '@/cohere-client';
-import { IconName } from '@/components/Shared';
-import { FileAccept } from '@/components/Shared/DragDropFileInput';
-
-export const DEFAULT_CONVERSATION_NAME = 'New Conversation';
-export const DEFAULT_TYPING_VELOCITY = 35;
-
-export const DEPLOYMENT_COHERE_PLATFORM = 'Cohere Platform';
-export const DEPLOYMENT_SINGLE_CONTAINER = 'Single Container';
-export const DEFAULT_AGENT_MODEL = 'command-r-plus';
-export const DEFAULT_PREAMBLE =
-  "## Task And Context\nYou help people answer their questions and other requests interactively. You will be asked a very wide array of requests on all kinds of topics. You will be equipped with a wide range of search engines or similar tools to help you, which you use to research your answer. You should focus on serving the user's needs as best you can, which will be wide-ranging.\n\n## Style Guide\nUnless the user asks for a different style of answer, you should answer in full sentences, using proper grammar and spelling.";
-
-export const ACCEPTED_FILE_TYPES: FileAccept[] = [
-  'text/csv',
-  'text/plain',
-  'text/html',
-  'text/markdown',
-  'text/tab-separated-values',
-  'application/msword',
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
-  'application/json',
-  'application/pdf',
-  'application/epub+zip',
-];
-export const MAX_NUM_FILES_PER_UPLOAD_BATCH = 50;
-
-export const CHAT_COMPOSER_TEXTAREA_ID = 'composer';
-export const CONFIGURATION_FILE_UPLOAD_ID = 'file-upload';
-export const SETTINGS_DRAWER_ID = 'settings';
-
-/**
- * Local Storage
- */
-export const LOCAL_STORAGE_KEYS = {
-  welcomeGuideState: 'onboarding/welcome/onboardState',
-  welcomeGuideInfoBox: 'onboarding/welcome/infoBox',
-};
-
-/**
- * Cookies
- */
-export const COOKIE_KEYS = {
-  authToken: 'authToken',
-};
-
-/**
- * Tools
- */
-export const TOOL_WEB_SEARCH_ID = 'web_search';
-export const TOOL_SEARCH_FILE_ID = 'search_file';
-export const TOOL_READ_DOCUMENT_ID = 'read_document';
-export const TOOL_PYTHON_INTERPRETER_ID = 'toolkit_python_interpreter';
-export const TOOL_WIKIPEDIA_ID = 'wikipedia';
-export const TOOL_CALCULATOR_ID = 'toolkit_calculator';
-export const TOOL_WEB_SCRAPE_ID = 'web_scrape';
-export const TOOL_GOOGLE_DRIVE_ID = 'google_drive';
-export const FILE_UPLOAD_TOOLS = [TOOL_SEARCH_FILE_ID, TOOL_READ_DOCUMENT_ID];
-export const AGENT_SETTINGS_TOOLS = [
-  TOOL_WEB_SEARCH_ID,
-  TOOL_PYTHON_INTERPRETER_ID,
-  TOOL_WEB_SCRAPE_ID,
-];
-
-export const TOOL_FALLBACK_ICON = 'circles-four';
-export const TOOL_ID_TO_DISPLAY_INFO: { [id: string]: { icon: IconName } } = {
-  [TOOL_WEB_SEARCH_ID]: { icon: 'web' },
-  [TOOL_WEB_SCRAPE_ID]: { icon: 'web' },
-  [TOOL_PYTHON_INTERPRETER_ID]: { icon: 'code-simple' },
-  [TOOL_CALCULATOR_ID]: { icon: 'calculator' },
-  [TOOL_WIKIPEDIA_ID]: { icon: 'web' },
-  [TOOL_SEARCH_FILE_ID]: { icon: 'search' },
-  [TOOL_GOOGLE_DRIVE_ID]: { icon: 'google-drive' },
-  [TOOL_READ_DOCUMENT_ID]: { icon: 'desktop' },
-};
-
-export const MAX_TIMEOUT_PREFETCH = 5000;
-export const DEFAULT_AGENT_TOOLS = [TOOL_SEARCH_FILE_ID, TOOL_READ_DOCUMENT_ID, TOOL_WEB_SCRAPE_ID];
-
-export type COHERE_BRANDED_COLORS =
-  | 'blue'
-  | 'evolved-blue'
-  | 'coral'
-  | 'green'
-  | 'evolved-green'
-  | 'quartz'
-  | 'evolved-quartz'
-  | 'mushroom'
-  | 'evolved-mushroom'
-  | 'marble'
-  | 'volcanic'
-  | 'danger';
-
-export const BASE_AGENT: AgentPublic = {
-  id: '',
-  deployments: [],
-  name: 'Command R+',
-  description: 'Ask questions and get answers based on your files.',
-  created_at: new Date().toISOString(),
-  updated_at: new Date().toISOString(),
-  preamble: '',
-  version: 1,
-  temperature: 0.3,
-  tools: [...AGENT_SETTINGS_TOOLS, ...FILE_UPLOAD_TOOLS],
-  model: DEFAULT_AGENT_MODEL,
-  deployment: DEPLOYMENT_COHERE_PLATFORM,
-  user_id: '',
-  is_private: false,
-};
diff --git a/src/interfaces/assistants_web/src/constants/colors.ts b/src/interfaces/assistants_web/src/constants/colors.ts
new file mode 100644
index 0000000000..b1a8d39100
--- /dev/null
+++ b/src/interfaces/assistants_web/src/constants/colors.ts
@@ -0,0 +1,13 @@
+export type COHERE_BRANDED_COLORS =
+  | 'blue'
+  | 'evolved-blue'
+  | 'coral'
+  | 'green'
+  | 'evolved-green'
+  | 'quartz'
+  | 'evolved-quartz'
+  | 'mushroom'
+  | 'evolved-mushroom'
+  | 'marble'
+  | 'volcanic'
+  | 'danger';
diff --git a/src/interfaces/assistants_web/src/constants/conversation.ts b/src/interfaces/assistants_web/src/constants/conversation.ts
index f6bae71842..2bc833a0b5 100644
--- a/src/interfaces/assistants_web/src/constants/conversation.ts
+++ b/src/interfaces/assistants_web/src/constants/conversation.ts
@@ -1,2 +1,53 @@
-export const CONVERSATION_HISTORY_OFFSET = 100;
+import { AgentPublic } from '@/cohere-client';
+import { FileAccept } from '@/components/UI';
+import { DEPLOYMENT_COHERE_PLATFORM } from '@/constants/setup';
+import {
+  AGENT_SETTINGS_TOOLS,
+  FILE_UPLOAD_TOOLS,
+  TOOL_READ_DOCUMENT_ID,
+  TOOL_SEARCH_FILE_ID,
+  TOOL_WEB_SCRAPE_ID,
+} from '@/constants/tools';
+
+export const DEFAULT_CONVERSATION_NAME = 'New Conversation';
+export const DEFAULT_AGENT_MODEL = 'command-r-plus';
 export const DEFAULT_TYPING_VELOCITY = 35;
+export const CONVERSATION_HISTORY_OFFSET = 100;
+
+export const DEFAULT_PREAMBLE =
+  "## Task And Context\nYou help people answer their questions and other requests interactively. You will be asked a very wide array of requests on all kinds of topics. You will be equipped with a wide range of search engines or similar tools to help you, which you use to research your answer. You should focus on serving the user's needs as best you can, which will be wide-ranging.\n\n## Style Guide\nUnless the user asks for a different style of answer, you should answer in full sentences, using proper grammar and spelling.";
+
+export const DEFAULT_AGENT_TOOLS = [TOOL_SEARCH_FILE_ID, TOOL_READ_DOCUMENT_ID, TOOL_WEB_SCRAPE_ID];
+
+export const BASE_AGENT: AgentPublic = {
+  id: '',
+  deployments: [],
+  name: 'Command R+',
+  description: 'Ask questions and get answers based on your files.',
+  created_at: new Date().toISOString(),
+  updated_at: new Date().toISOString(),
+  preamble: '',
+  version: 1,
+  temperature: 0.3,
+  tools: [...AGENT_SETTINGS_TOOLS, ...FILE_UPLOAD_TOOLS],
+  model: DEFAULT_AGENT_MODEL,
+  deployment: DEPLOYMENT_COHERE_PLATFORM,
+  user_id: '',
+  is_private: false,
+};
+
+export const ACCEPTED_FILE_TYPES: FileAccept[] = [
+  'text/csv',
+  'text/plain',
+  'text/html',
+  'text/markdown',
+  'text/tab-separated-values',
+  'application/msword',
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation',
+  'application/json',
+  'application/pdf',
+  'application/epub+zip',
+];
+export const MAX_NUM_FILES_PER_UPLOAD_BATCH = 50;
diff --git a/src/interfaces/assistants_web/src/constants/index.ts b/src/interfaces/assistants_web/src/constants/index.ts
new file mode 100644
index 0000000000..fe270807c0
--- /dev/null
+++ b/src/interfaces/assistants_web/src/constants/index.ts
@@ -0,0 +1,5 @@
+export * from './colors';
+export * from './conversation';
+export * from './setup';
+export * from './tailwindConfigValues';
+export * from './tools';
diff --git a/src/interfaces/assistants_web/src/constants/setup.ts b/src/interfaces/assistants_web/src/constants/setup.ts
new file mode 100644
index 0000000000..350c148721
--- /dev/null
+++ b/src/interfaces/assistants_web/src/constants/setup.ts
@@ -0,0 +1,23 @@
+export const DEPLOYMENT_COHERE_PLATFORM = 'Cohere Platform';
+export const DEPLOYMENT_SINGLE_CONTAINER = 'Single Container';
+
+export const CHAT_COMPOSER_TEXTAREA_ID = 'composer';
+export const CONFIGURATION_FILE_UPLOAD_ID = 'file-upload';
+export const SETTINGS_DRAWER_ID = 'settings';
+
+/**
+ * Local Storage
+ */
+export const LOCAL_STORAGE_KEYS = {
+  welcomeGuideState: 'onboarding/welcome/onboardState',
+  welcomeGuideInfoBox: 'onboarding/welcome/infoBox',
+};
+
+/**
+ * Cookies
+ */
+export const COOKIE_KEYS = {
+  authToken: 'authToken',
+};
+
+export const MAX_TIMEOUT_PREFETCH = 5000;
diff --git a/src/interfaces/assistants_web/src/constants/tools.ts b/src/interfaces/assistants_web/src/constants/tools.ts
new file mode 100644
index 0000000000..18d6d434e8
--- /dev/null
+++ b/src/interfaces/assistants_web/src/constants/tools.ts
@@ -0,0 +1,31 @@
+import { IconName } from '@/components/UI';
+
+/**
+ * Tools
+ */
+export const TOOL_WEB_SEARCH_ID = 'web_search';
+export const TOOL_SEARCH_FILE_ID = 'search_file';
+export const TOOL_READ_DOCUMENT_ID = 'read_document';
+export const TOOL_PYTHON_INTERPRETER_ID = 'toolkit_python_interpreter';
+export const TOOL_WIKIPEDIA_ID = 'wikipedia';
+export const TOOL_CALCULATOR_ID = 'toolkit_calculator';
+export const TOOL_WEB_SCRAPE_ID = 'web_scrape';
+export const TOOL_GOOGLE_DRIVE_ID = 'google_drive';
+export const FILE_UPLOAD_TOOLS = [TOOL_SEARCH_FILE_ID, TOOL_READ_DOCUMENT_ID];
+export const AGENT_SETTINGS_TOOLS = [
+  TOOL_WEB_SEARCH_ID,
+  TOOL_PYTHON_INTERPRETER_ID,
+  TOOL_WEB_SCRAPE_ID,
+];
+
+export const TOOL_FALLBACK_ICON = 'circles-four';
+export const TOOL_ID_TO_DISPLAY_INFO: { [id: string]: { icon: IconName } } = {
+  [TOOL_WEB_SEARCH_ID]: { icon: 'web' },
+  [TOOL_WEB_SCRAPE_ID]: { icon: 'web' },
+  [TOOL_PYTHON_INTERPRETER_ID]: { icon: 'code-simple' },
+  [TOOL_CALCULATOR_ID]: { icon: 'calculator' },
+  [TOOL_WIKIPEDIA_ID]: { icon: 'web' },
+  [TOOL_SEARCH_FILE_ID]: { icon: 'search' },
+  [TOOL_GOOGLE_DRIVE_ID]: { icon: 'google-drive' },
+  [TOOL_READ_DOCUMENT_ID]: { icon: 'desktop' },
+};
diff --git a/src/interfaces/assistants_web/src/context/ModalContext.tsx b/src/interfaces/assistants_web/src/context/ModalContext.tsx
index 1aa846bf9b..646cf19103 100644
--- a/src/interfaces/assistants_web/src/context/ModalContext.tsx
+++ b/src/interfaces/assistants_web/src/context/ModalContext.tsx
@@ -1,6 +1,8 @@
+'use client';
+
 import React, { PropsWithChildren, createContext, useState } from 'react';
 
-import { Modal } from '@/components/Shared';
+import { Modal } from '@/components/UI';
 
 interface OpenParams {
   title?: string;
diff --git a/src/interfaces/assistants_web/src/hooks/authConfig.ts b/src/interfaces/assistants_web/src/hooks/authConfig.ts
deleted file mode 100644
index 41c8f31214..0000000000
--- a/src/interfaces/assistants_web/src/hooks/authConfig.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { ListAuthStrategy } from '@/cohere-client';
-import { env } from '@/env.mjs';
-import { useServerAuthStrategies } from '@/hooks/authStrategies';
-
-export const useAuthConfig = (): {
-  loginUrl: string;
-  registerUrl: string;
-  logoutUrl: string;
-  loginStrategies: ListAuthStrategy[];
-  baseUrl: string;
-} => {
-  const { data: authStrategies = [] } = useServerAuthStrategies();
-
-  return {
-    loginUrl: '/login',
-    registerUrl: '/register',
-    logoutUrl: '/logout',
-    loginStrategies: authStrategies,
-    baseUrl: env.NEXT_PUBLIC_FRONTEND_HOSTNAME,
-  };
-};
diff --git a/src/interfaces/assistants_web/src/hooks/authStrategies.ts b/src/interfaces/assistants_web/src/hooks/authStrategies.ts
deleted file mode 100644
index a46cca66bb..0000000000
--- a/src/interfaces/assistants_web/src/hooks/authStrategies.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { useQuery } from '@tanstack/react-query';
-
-import { useCohereClient } from '@/cohere-client';
-
-/**
- * @description Hook to get authentication methods supported by the server.
- */
-export const useServerAuthStrategies = (options?: { enabled?: boolean }) => {
-  const cohereClient = useCohereClient();
-  return useQuery({
-    queryKey: ['authStrategies'],
-    queryFn: () => cohereClient.getAuthStrategies(),
-    refetchOnWindowFocus: false,
-    ...options,
-  });
-};
diff --git a/src/interfaces/assistants_web/src/hooks/index.ts b/src/interfaces/assistants_web/src/hooks/index.ts
new file mode 100644
index 0000000000..b273df973b
--- /dev/null
+++ b/src/interfaces/assistants_web/src/hooks/index.ts
@@ -0,0 +1,26 @@
+export * from './use-actions';
+export * from './use-agents';
+export * from './use-auth';
+export * from './use-brandedColors';
+export * from './use-breakpoint';
+export * from './use-chat';
+export * from './use-chatRoutes';
+export * from './use-conversation';
+export * from './use-deployments';
+export * from './use-files';
+export * from './use-fixCopyBug';
+export * from './use-ftux';
+export * from './use-generateTitle';
+export * from './use-grounding';
+export * from './use-lazyRef';
+export * from './use-oidcAuthRoute';
+export * from './use-os';
+export * from './use-search';
+export * from './use-session';
+export * from './use-snapshots';
+export * from './use-streamChat';
+export * from './use-swipeable';
+export * from './use-toast';
+export * from './use-tools';
+export * from './use-typed';
+export * from './use-utils';
diff --git a/src/interfaces/assistants_web/src/hooks/settings.ts b/src/interfaces/assistants_web/src/hooks/settings.ts
deleted file mode 100644
index e3294383e5..0000000000
--- a/src/interfaces/assistants_web/src/hooks/settings.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { DEFAULT_CHAT_TEMPERATURE } from '@/cohere-client';
-
-export const useSettingsDefaults = () => {
-  return {
-    preamble: '',
-    temperature: DEFAULT_CHAT_TEMPERATURE,
-    tools: [],
-  };
-};
diff --git a/src/interfaces/assistants_web/src/hooks/actions.tsx b/src/interfaces/assistants_web/src/hooks/use-actions.tsx
similarity index 94%
rename from src/interfaces/assistants_web/src/hooks/actions.tsx
rename to src/interfaces/assistants_web/src/hooks/use-actions.tsx
index 8ae1d4be8e..6e7ae286b6 100644
--- a/src/interfaces/assistants_web/src/hooks/actions.tsx
+++ b/src/interfaces/assistants_web/src/hooks/use-actions.tsx
@@ -1,19 +1,20 @@
+'use client';
+
 import { useTheme } from 'next-themes';
 import { usePathname, useRouter } from 'next/navigation';
 
 import { AgentLogo } from '@/components/Agents/AgentLogo';
-import { ShareModal } from '@/components/ShareModal';
-import { SwitchAssistants } from '@/components/Shared/HotKeys/custom-views/SwitchAssistants';
-import { HotKeyGroupOption } from '@/components/Shared/HotKeys/domain';
+import { HotKeyGroupOption, SwitchAssistants } from '@/components/HotKeys';
+import { ShareConversation } from '@/components/Modals/ShareConversation';
 import {
   CHAT_COMPOSER_TEXTAREA_ID,
   CONFIGURATION_FILE_UPLOAD_ID,
   SETTINGS_DRAWER_ID,
 } from '@/constants';
 import { useContextStore } from '@/context';
-import { useRecentAgents } from '@/hooks/agents';
-import { useChatRoutes, useNavigateToNewChat } from '@/hooks/chatRoutes';
-import { useConversationActions } from '@/hooks/conversation';
+import { useChatRoutes, useNavigateToNewChat } from '@/hooks';
+import { useRecentAgents } from '@/hooks';
+import { useConversationActions } from '@/hooks';
 import { useConversationStore, useFilesStore, useSettingsStore } from '@/stores';
 
 export const useFocusComposer = () => {
@@ -83,7 +84,7 @@ export const useConversationHotKeys = (): HotKeyGroupOption[] => {
     if (!id) return;
     open({
       title: 'Share link to conversation',
-      content: <ShareModal conversationId={id} />,
+      content: <ShareConversation conversationId={id} />,
     });
   };
 
diff --git a/src/interfaces/assistants_web/src/hooks/agents.ts b/src/interfaces/assistants_web/src/hooks/use-agents.ts
similarity index 98%
rename from src/interfaces/assistants_web/src/hooks/agents.ts
rename to src/interfaces/assistants_web/src/hooks/use-agents.ts
index 1412247aa5..ac3d767da7 100644
--- a/src/interfaces/assistants_web/src/hooks/agents.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-agents.ts
@@ -10,7 +10,7 @@ import {
   useCohereClient,
 } from '@/cohere-client';
 import { BASE_AGENT } from '@/constants';
-import { useConversations } from '@/hooks/conversation';
+import { useConversations } from '@/hooks';
 
 export const useListAgents = () => {
   const cohereClient = useCohereClient();
diff --git a/src/interfaces/assistants_web/src/hooks/use-auth.ts b/src/interfaces/assistants_web/src/hooks/use-auth.ts
new file mode 100644
index 0000000000..f272417362
--- /dev/null
+++ b/src/interfaces/assistants_web/src/hooks/use-auth.ts
@@ -0,0 +1,35 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { ListAuthStrategy, useCohereClient } from '@/cohere-client';
+import { env } from '@/env.mjs';
+
+export const useAuthConfig = (): {
+  loginUrl: string;
+  registerUrl: string;
+  logoutUrl: string;
+  loginStrategies: ListAuthStrategy[];
+  baseUrl: string;
+} => {
+  const { data: authStrategies = [] } = useServerAuthStrategies();
+
+  return {
+    loginUrl: '/login',
+    registerUrl: '/register',
+    logoutUrl: '/logout',
+    loginStrategies: authStrategies,
+    baseUrl: env.NEXT_PUBLIC_FRONTEND_HOSTNAME,
+  };
+};
+
+/**
+ * @description Hook to get authentication methods supported by the server.
+ */
+export const useServerAuthStrategies = (options?: { enabled?: boolean }) => {
+  const cohereClient = useCohereClient();
+  return useQuery({
+    queryKey: ['authStrategies'],
+    queryFn: () => cohereClient.getAuthStrategies(),
+    refetchOnWindowFocus: false,
+    ...options,
+  });
+};
diff --git a/src/interfaces/assistants_web/src/hooks/brandedColors.ts b/src/interfaces/assistants_web/src/hooks/use-brandedColors.ts
similarity index 99%
rename from src/interfaces/assistants_web/src/hooks/brandedColors.ts
rename to src/interfaces/assistants_web/src/hooks/use-brandedColors.ts
index d36dab94e7..8294e51717 100644
--- a/src/interfaces/assistants_web/src/hooks/brandedColors.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-brandedColors.ts
@@ -3,7 +3,7 @@
 import { useMemo } from 'react';
 
 import { COHERE_BRANDED_COLORS } from '@/constants';
-import { cn } from '@/utils/cn';
+import { cn } from '@/utils';
 
 const COHERE_THEMES_MAP: { default: COHERE_BRANDED_COLORS; branded: COHERE_BRANDED_COLORS[] } = {
   default: 'evolved-blue',
diff --git a/src/interfaces/assistants_web/src/hooks/breakpoint.ts b/src/interfaces/assistants_web/src/hooks/use-breakpoint.ts
similarity index 99%
rename from src/interfaces/assistants_web/src/hooks/breakpoint.ts
rename to src/interfaces/assistants_web/src/hooks/use-breakpoint.ts
index cbb691c74c..78ac348946 100644
--- a/src/interfaces/assistants_web/src/hooks/breakpoint.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-breakpoint.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { throttle } from 'lodash';
 import { useEffect, useMemo, useState } from 'react';
 import { Config } from 'tailwindcss';
diff --git a/src/interfaces/assistants_web/src/hooks/chat.ts b/src/interfaces/assistants_web/src/hooks/use-chat.ts
similarity index 98%
rename from src/interfaces/assistants_web/src/hooks/chat.ts
rename to src/interfaces/assistants_web/src/hooks/use-chat.ts
index 8a5668730e..19d7a564c4 100644
--- a/src/interfaces/assistants_web/src/hooks/chat.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-chat.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { UseMutateAsyncFunction, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 
@@ -19,9 +21,12 @@ import {
   DEPLOYMENT_COHERE_PLATFORM,
   TOOL_PYTHON_INTERPRETER_ID,
 } from '@/constants';
-import { useChatRoutes } from '@/hooks/chatRoutes';
-import { useUpdateConversationTitle } from '@/hooks/generateTitle';
-import { StreamingChatParams, useStreamChat } from '@/hooks/streamChat';
+import {
+  StreamingChatParams,
+  useChatRoutes,
+  useStreamChat,
+  useUpdateConversationTitle,
+} from '@/hooks';
 import { useCitationsStore, useConversationStore, useFilesStore, useParamsStore } from '@/stores';
 import { OutputFiles } from '@/stores/slices/citationsSlice';
 import { useStreamingStore } from '@/stores/streaming';
@@ -37,14 +42,14 @@ import {
 } from '@/types/message';
 import {
   createStartEndKey,
-  fixCitationsLeadingMarkdown,
+  fixInlineCitationsForMarkdown,
   fixMarkdownImagesInText,
   isGroundingOn,
+  parsePythonInterpreterToolFields,
+  replaceCodeBlockWithIframe,
   replaceTextWithCitations,
   shouldUpdateConversationTitle,
 } from '@/utils';
-import { replaceCodeBlockWithIframe } from '@/utils/preview';
-import { parsePythonInterpreterToolFields } from '@/utils/tools';
 
 const USER_ERROR_MESSAGE = 'Something went wrong. This has been reported. ';
 const ABORT_REASON_USER = 'USER_ABORTED';
@@ -379,7 +384,7 @@ export const useChat = (config?: { onSend?: (msg: string) => void }) => {
             case StreamEvent.CITATION_GENERATION: {
               const data = eventData.data;
               const newCitations = [...(data?.citations ?? [])];
-              const fixedCitations = fixCitationsLeadingMarkdown(newCitations, botResponse);
+              const fixedCitations = fixInlineCitationsForMarkdown(newCitations, botResponse);
               citations.push(...fixedCitations);
               citations.sort((a, b) => (a.start ?? 0) - (b.start ?? 0));
               saveCitations(generationId, fixedCitations, documentsMap);
diff --git a/src/interfaces/assistants_web/src/hooks/chatRoutes.ts b/src/interfaces/assistants_web/src/hooks/use-chatRoutes.ts
similarity index 95%
rename from src/interfaces/assistants_web/src/hooks/chatRoutes.ts
rename to src/interfaces/assistants_web/src/hooks/use-chatRoutes.ts
index 3f63caae9d..77a434bac6 100644
--- a/src/interfaces/assistants_web/src/hooks/chatRoutes.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-chatRoutes.ts
@@ -1,7 +1,9 @@
+'use client';
+
 import { useParams, useRouter } from 'next/navigation';
 import { useMemo } from 'react';
 
-import { useIsDesktop } from '@/hooks/breakpoint';
+import { useIsDesktop } from '@/hooks';
 import {
   useCitationsStore,
   useConversationStore,
diff --git a/src/interfaces/assistants_web/src/hooks/conversation.tsx b/src/interfaces/assistants_web/src/hooks/use-conversation.tsx
similarity index 97%
rename from src/interfaces/assistants_web/src/hooks/conversation.tsx
rename to src/interfaces/assistants_web/src/hooks/use-conversation.tsx
index c9fdf4d837..0809361010 100644
--- a/src/interfaces/assistants_web/src/hooks/conversation.tsx
+++ b/src/interfaces/assistants_web/src/hooks/use-conversation.tsx
@@ -12,8 +12,7 @@ import {
 import { DeleteConversations } from '@/components/Modals/DeleteConversations';
 import { EditConversationTitle } from '@/components/Modals/EditConversationTitle';
 import { useContextStore } from '@/context';
-import { useNavigateToNewChat } from '@/hooks/chatRoutes';
-import { useNotify } from '@/hooks/toast';
+import { useNavigateToNewChat, useNotify } from '@/hooks';
 import { useConversationStore } from '@/stores';
 import { isAbortError } from '@/utils';
 
diff --git a/src/interfaces/assistants_web/src/hooks/deployments.ts b/src/interfaces/assistants_web/src/hooks/use-deployments.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/hooks/deployments.ts
rename to src/interfaces/assistants_web/src/hooks/use-deployments.ts
diff --git a/src/interfaces/assistants_web/src/hooks/files.ts b/src/interfaces/assistants_web/src/hooks/use-files.ts
similarity index 98%
rename from src/interfaces/assistants_web/src/hooks/files.ts
rename to src/interfaces/assistants_web/src/hooks/use-files.ts
index b4c24f1dd4..1f94714c5f 100644
--- a/src/interfaces/assistants_web/src/hooks/files.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-files.ts
@@ -7,8 +7,7 @@ import {
   useCohereClient,
 } from '@/cohere-client';
 import { ACCEPTED_FILE_TYPES, MAX_NUM_FILES_PER_UPLOAD_BATCH } from '@/constants';
-import { useSession } from '@/hooks/session';
-import { useNotify } from '@/hooks/toast';
+import { useNotify, useSession } from '@/hooks';
 import { useConversationStore, useFilesStore, useParamsStore } from '@/stores';
 import { UploadingFile } from '@/stores/slices/filesSlice';
 import { fileSizeToBytes, formatFileSize, getFileExtension } from '@/utils';
diff --git a/src/interfaces/assistants_web/src/hooks/fixCopyBug.ts b/src/interfaces/assistants_web/src/hooks/use-fixCopyBug.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/hooks/fixCopyBug.ts
rename to src/interfaces/assistants_web/src/hooks/use-fixCopyBug.ts
diff --git a/src/interfaces/assistants_web/src/hooks/ftux.ts b/src/interfaces/assistants_web/src/hooks/use-ftux.ts
similarity index 99%
rename from src/interfaces/assistants_web/src/hooks/ftux.ts
rename to src/interfaces/assistants_web/src/hooks/use-ftux.ts
index 4adba087ce..3e5574e224 100644
--- a/src/interfaces/assistants_web/src/hooks/ftux.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-ftux.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { useLocalStorageValue } from '@react-hookz/web';
 import { usePathname } from 'next/navigation';
 
diff --git a/src/interfaces/assistants_web/src/hooks/generateTitle.ts b/src/interfaces/assistants_web/src/hooks/use-generateTitle.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/hooks/generateTitle.ts
rename to src/interfaces/assistants_web/src/hooks/use-generateTitle.ts
diff --git a/src/interfaces/assistants_web/src/hooks/grounding.ts b/src/interfaces/assistants_web/src/hooks/use-grounding.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/hooks/grounding.ts
rename to src/interfaces/assistants_web/src/hooks/use-grounding.ts
diff --git a/src/interfaces/assistants_web/src/hooks/lazyRef.ts b/src/interfaces/assistants_web/src/hooks/use-lazyRef.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/hooks/lazyRef.ts
rename to src/interfaces/assistants_web/src/hooks/use-lazyRef.ts
diff --git a/src/interfaces/assistants_web/src/hooks/oidcAuthRoute.ts b/src/interfaces/assistants_web/src/hooks/use-oidcAuthRoute.ts
similarity index 98%
rename from src/interfaces/assistants_web/src/hooks/oidcAuthRoute.ts
rename to src/interfaces/assistants_web/src/hooks/use-oidcAuthRoute.ts
index eec1260da3..bc9f3505bb 100644
--- a/src/interfaces/assistants_web/src/hooks/oidcAuthRoute.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-oidcAuthRoute.ts
@@ -1,6 +1,6 @@
 import Cookies from 'js-cookie';
 
-import { useAuthConfig } from '@/hooks/authConfig';
+import { useAuthConfig } from '@/hooks';
 
 /**
  * Hook which redirects to the Google login/register page.
diff --git a/src/interfaces/assistants_web/src/hooks/os.ts b/src/interfaces/assistants_web/src/hooks/use-os.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/hooks/os.ts
rename to src/interfaces/assistants_web/src/hooks/use-os.ts
diff --git a/src/interfaces/assistants_web/src/hooks/search.ts b/src/interfaces/assistants_web/src/hooks/use-search.ts
similarity index 98%
rename from src/interfaces/assistants_web/src/hooks/search.ts
rename to src/interfaces/assistants_web/src/hooks/use-search.ts
index bcc88a147a..c18dbd7916 100644
--- a/src/interfaces/assistants_web/src/hooks/search.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-search.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { useDebouncedEffect } from '@react-hookz/web';
 import { matchSorter } from 'match-sorter';
 import { useState } from 'react';
diff --git a/src/interfaces/assistants_web/src/hooks/session.ts b/src/interfaces/assistants_web/src/hooks/use-session.ts
similarity index 98%
rename from src/interfaces/assistants_web/src/hooks/session.ts
rename to src/interfaces/assistants_web/src/hooks/use-session.ts
index 43a15df2c4..935e3366c0 100644
--- a/src/interfaces/assistants_web/src/hooks/session.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-session.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { useMutation } from '@tanstack/react-query';
 import Cookies from 'js-cookie';
 import { jwtDecode } from 'jwt-decode';
@@ -7,7 +9,7 @@ import { useCallback, useMemo } from 'react';
 
 import { ApiError, JWTResponse, useCohereClient } from '@/cohere-client';
 import { COOKIE_KEYS } from '@/constants';
-import { useServerAuthStrategies } from '@/hooks/authStrategies';
+import { useServerAuthStrategies } from '@/hooks';
 import { clearAuthToken, setAuthToken } from '@/server/actions';
 
 interface LoginParams {
diff --git a/src/interfaces/assistants_web/src/hooks/snapshots.ts b/src/interfaces/assistants_web/src/hooks/use-snapshots.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/hooks/snapshots.ts
rename to src/interfaces/assistants_web/src/hooks/use-snapshots.ts
diff --git a/src/interfaces/assistants_web/src/hooks/streamChat.ts b/src/interfaces/assistants_web/src/hooks/use-streamChat.ts
similarity index 99%
rename from src/interfaces/assistants_web/src/hooks/streamChat.ts
rename to src/interfaces/assistants_web/src/hooks/use-streamChat.ts
index 0a6dff2a6e..881e551bc4 100644
--- a/src/interfaces/assistants_web/src/hooks/streamChat.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-streamChat.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { EventSourceMessage } from '@microsoft/fetch-event-source';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useEffect, useRef } from 'react';
diff --git a/src/interfaces/assistants_web/src/hooks/swipeable.ts b/src/interfaces/assistants_web/src/hooks/use-swipeable.ts
similarity index 97%
rename from src/interfaces/assistants_web/src/hooks/swipeable.ts
rename to src/interfaces/assistants_web/src/hooks/use-swipeable.ts
index 1fdb37d21d..c433c2d994 100644
--- a/src/interfaces/assistants_web/src/hooks/swipeable.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-swipeable.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect } from 'react';
 import { useSwipeable as useSwipe } from 'react-swipeable';
 
diff --git a/src/interfaces/assistants_web/src/hooks/toast.ts b/src/interfaces/assistants_web/src/hooks/use-toast.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/hooks/toast.ts
rename to src/interfaces/assistants_web/src/hooks/use-toast.ts
diff --git a/src/interfaces/assistants_web/src/hooks/tools.ts b/src/interfaces/assistants_web/src/hooks/use-tools.ts
similarity index 98%
rename from src/interfaces/assistants_web/src/hooks/tools.ts
rename to src/interfaces/assistants_web/src/hooks/use-tools.ts
index ed8d1e52c7..dd4062e7cd 100644
--- a/src/interfaces/assistants_web/src/hooks/tools.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-tools.ts
@@ -6,7 +6,7 @@ import type { PickerCallback } from 'react-google-drive-picker/dist/typeDefs';
 import { AgentPublic, ApiError, ManagedTool, useCohereClient } from '@/cohere-client';
 import { DEFAULT_AGENT_TOOLS, TOOL_GOOGLE_DRIVE_ID } from '@/constants';
 import { env } from '@/env.mjs';
-import { useNotify } from '@/hooks/toast';
+import { useNotify } from '@/hooks';
 import { useParamsStore } from '@/stores';
 import { ConfigurableParams } from '@/stores/slices/paramsSlice';
 
diff --git a/src/interfaces/assistants_web/src/hooks/typed.ts b/src/interfaces/assistants_web/src/hooks/use-typed.ts
similarity index 99%
rename from src/interfaces/assistants_web/src/hooks/typed.ts
rename to src/interfaces/assistants_web/src/hooks/use-typed.ts
index 4a9bb9c97c..63aa3ad4c6 100644
--- a/src/interfaces/assistants_web/src/hooks/typed.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-typed.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 type TypeOptions = {
diff --git a/src/interfaces/assistants_web/src/hooks/utils.ts b/src/interfaces/assistants_web/src/hooks/use-utils.ts
similarity index 98%
rename from src/interfaces/assistants_web/src/hooks/utils.ts
rename to src/interfaces/assistants_web/src/hooks/use-utils.ts
index 542c14f232..1a4219d2c8 100644
--- a/src/interfaces/assistants_web/src/hooks/utils.ts
+++ b/src/interfaces/assistants_web/src/hooks/use-utils.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 
 /**
diff --git a/src/interfaces/assistants_web/src/stores/index.ts b/src/interfaces/assistants_web/src/stores/index.ts
index 8d30bd613b..2e61e92d54 100644
--- a/src/interfaces/assistants_web/src/stores/index.ts
+++ b/src/interfaces/assistants_web/src/stores/index.ts
@@ -78,4 +78,13 @@ export const useParamsStore = () => {
   );
 };
 
+export const useOutputFiles = () => {
+  return useStore(
+    (state) => ({
+      outputFiles: state.citations.outputFiles,
+    }),
+    shallow
+  );
+};
+
 export { useSettingsStore } from '@/stores/persistedStore';
diff --git a/src/interfaces/assistants_web/src/stores/persistedStore.ts b/src/interfaces/assistants_web/src/stores/persistedStore.ts
index a2c8dd03b9..b494985d6d 100644
--- a/src/interfaces/assistants_web/src/stores/persistedStore.ts
+++ b/src/interfaces/assistants_web/src/stores/persistedStore.ts
@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
diff --git a/src/interfaces/assistants_web/src/stores/slices/citationsSlice.ts b/src/interfaces/assistants_web/src/stores/slices/citationsSlice.ts
index ea2c6f16e5..e1f5ffafc6 100644
--- a/src/interfaces/assistants_web/src/stores/slices/citationsSlice.ts
+++ b/src/interfaces/assistants_web/src/stores/slices/citationsSlice.ts
@@ -1,6 +1,7 @@
 import { StateCreator } from 'zustand';
 
 import { Document } from '@/cohere-client';
+import { mapExtensionToMimeType } from '@/utils';
 
 import { StoreState } from '..';
 
@@ -22,7 +23,9 @@ interface SearchResults {
   [documentId: string]: Record<string, any>;
 }
 
-export type OutputFiles = { [name: string]: { name: string; data: string; documentId?: string } };
+export type OutputFiles = {
+  [name: string]: { name: string; data: string; documentId?: string; downloadUrl?: string };
+};
 
 type State = {
   citationReferences: CitationReferences;
@@ -80,6 +83,18 @@ export const createCitationsSlice: StateCreator<StoreState, [], [], CitationsSto
     }));
   },
   saveOutputFiles(outputFiles) {
+    for (const [name, file] of Object.entries(outputFiles)) {
+      if (file.downloadUrl) {
+        continue;
+      }
+      const data = file.data;
+      const fileExtension = file.name.split('.').pop() || '.txt';
+      const mimeType = mapExtensionToMimeType(fileExtension);
+      const blob = new Blob([data], { type: mimeType });
+      const url = URL.createObjectURL(blob);
+      outputFiles[name] = { ...file, downloadUrl: url };
+    }
+
     set((state) => ({
       citations: {
         ...state.citations,
diff --git a/src/interfaces/assistants_web/src/components/Shared/CodeSnippet/theme.ts b/src/interfaces/assistants_web/src/themes/codeSnippetTheme.ts
similarity index 100%
rename from src/interfaces/assistants_web/src/components/Shared/CodeSnippet/theme.ts
rename to src/interfaces/assistants_web/src/themes/codeSnippetTheme.ts
diff --git a/src/interfaces/assistants_web/src/utils/citations.test.ts b/src/interfaces/assistants_web/src/utils/citations.test.ts
index e4f530da41..9a7ab4eced 100644
--- a/src/interfaces/assistants_web/src/utils/citations.test.ts
+++ b/src/interfaces/assistants_web/src/utils/citations.test.ts
@@ -1,7 +1,11 @@
 import { describe, expect, test } from 'vitest';
 
 import { Citation } from '@/cohere-client';
-import { fixCitationsLeadingMarkdown, replaceTextWithCitations } from '@/utils/citations';
+import {
+  fixInlineCitationsForMarkdown,
+  isReferenceBetweenSpecialTags,
+  replaceTextWithCitations,
+} from '@/utils';
 
 describe('replaceTextWithCitations', () => {
   test('should replace text with citations', () => {
@@ -44,46 +48,6 @@ describe('replaceTextWithCitations', () => {
     );
   });
 
-  test('should avoid to break markdown images', () => {
-    const citations: Citation[] = [
-      {
-        start: 0,
-        end: 26,
-        text: '! [test](https://test.com)',
-        document_ids: ['12345'],
-      },
-    ];
-    const text = '![test](https://test.com)';
-    const generationId = '12345';
-    const result = replaceTextWithCitations(text, citations, generationId);
-    expect(result).toBe(
-      ':cite[![test](https://test.com)]{generationId="12345" start="0" end="26"}'
-    );
-  });
-
-  test('should handle extra space when fixing markdown images', () => {
-    const citations: Citation[] = [
-      {
-        start: 5,
-        end: 31,
-        text: '! [test](https://test.com)',
-        document_ids: ['12345'],
-      },
-      {
-        start: 32,
-        end: 39,
-        text: 'Kadabra',
-        document_ids: ['44444'],
-      },
-    ];
-    const text = 'Abra ![test](https://test.com) Kadabra';
-    const generationId = '12345';
-    const result = replaceTextWithCitations(text, citations, generationId);
-    expect(result).toBe(
-      'Abra :cite[![test](https://test.com)]{generationId="12345" start="5" end="31"} :cite[Kadabra]{generationId="12345" start="32" end="39"}'
-    );
-  });
-
   test('should allow citations as markdown elements', () => {
     const citations: Citation[] = [
       {
@@ -100,7 +64,7 @@ describe('replaceTextWithCitations', () => {
   });
 });
 
-describe('fixCitationsLeadingMarkdown', () => {
+describe('fixInlineCitationsForMarkdown', () => {
   test('should fix leading markdown citations breaking markdown', () => {
     const citations: Citation[] = [
       {
@@ -142,7 +106,7 @@ describe('fixCitationsLeadingMarkdown', () => {
     ];
     const text =
       'The `ENVIRONMENT DIVISION` should be included after the `IDENTIFICATION DIVISION`. The `CONFIGURATION SECTION` and `SPECIAL-NAMES` should be included within the `ENVIRONMENT DIVISION`.';
-    const result = fixCitationsLeadingMarkdown(citations, text);
+    const result = fixInlineCitationsForMarkdown(citations, text);
 
     expect(result).toStrictEqual([
       {
@@ -183,4 +147,122 @@ describe('fixCitationsLeadingMarkdown', () => {
       },
     ]);
   });
+
+  test('should push markdown downloable links to the end', () => {
+    const citations: Citation[] = [
+      {
+        text: '[link](https://www.google.com)',
+        start: 10,
+        end: 39,
+        document_ids: ['111111'],
+      },
+      {
+        text: "[link]('.file_path.csv')",
+        start: 64,
+        end: 87,
+        document_ids: ['111111'],
+      },
+    ];
+    const text =
+      "This is a [link](https://www.google.com) and this is downloable [link]('file_path.csv')";
+    const result = fixInlineCitationsForMarkdown(citations, text);
+    expect(result).toStrictEqual([
+      {
+        text: '[link](https://www.google.com)',
+        end: 39,
+        start: 88,
+        document_ids: ['111111'],
+      },
+      {
+        text: "[link]('.file_path.csv')",
+        end: 87,
+        start: 88,
+        document_ids: ['111111'],
+      },
+    ]);
+  });
+
+  test('should remove extra blank space on markdown images', () => {
+    const citations: Citation[] = [
+      {
+        start: 0,
+        end: 25,
+        text: '! [test](https://test.com)',
+        document_ids: ['12345'],
+      },
+      {
+        start: 26,
+        end: 33,
+        text: 'Kadabra',
+        document_ids: ['44444'],
+      },
+    ];
+    const text = '![test](https://test.com) Kadabra';
+    const result = fixInlineCitationsForMarkdown(citations, text);
+    expect(result).toStrictEqual([
+      {
+        start: 34,
+        end: 25,
+        text: '![test](https://test.com)',
+        document_ids: ['12345'],
+      },
+      {
+        start: 25,
+        end: 32,
+        text: 'Kadabra',
+        document_ids: ['44444'],
+      },
+    ]);
+  });
+});
+
+describe('isReferenceBetweenSpecialTags', () => {
+  test('should return true if the citation is between <iframe> tags', () => {
+    const matchRegex = /<iframe>.*<\/iframe>/;
+    const text = '<iframe> This is a citation </iframe>';
+    const citation: Citation = {
+      start: 19,
+      end: 27,
+      text: 'citation',
+      document_ids: ['12345'],
+    };
+    const result = isReferenceBetweenSpecialTags(matchRegex, text, citation.start);
+    expect(result).toBe(true);
+  });
+  test('should return false if the citation is not between <iframe> tags', () => {
+    const matchRegex = /<iframe>.*<\/iframe>/;
+    const text = 'This is a citation <iframe> another test citaiton </iframe>';
+    const citation: Citation = {
+      start: 10,
+      end: 18,
+      text: 'citation',
+      document_ids: ['12345'],
+    };
+    const result = isReferenceBetweenSpecialTags(matchRegex, text, citation.start);
+    expect(result).toBe(false);
+  });
+  test('should return true if the citation is between ``` tags', () => {
+    const matchRegex = /```[\s\S]*?```/g;
+    const text = '``` This is a citation ```';
+    const citation: Citation = {
+      start: 14,
+      end: 22,
+      text: 'citation',
+      document_ids: ['12345'],
+    };
+    const result = isReferenceBetweenSpecialTags(matchRegex, text, citation.start);
+    expect(result).toBe(true);
+  });
+  test('should return false if the citation is not between ``` tags', () => {
+    const matchRegex = /```[\s\S]*?```/g;
+    const text = '``` This is a citation ``` another test citaiton';
+    const citation: Citation = {
+      start: 40,
+      end: 48,
+      text: 'citation',
+      document_ids: ['12345'],
+    };
+    const result = isReferenceBetweenSpecialTags(matchRegex, text, citation.start);
+    expect(result).toBe(false);
+  });
 });
diff --git a/src/interfaces/assistants_web/src/utils/citations.ts b/src/interfaces/assistants_web/src/utils/citations.ts
index 4875f6a11a..5709b4ec0d 100644
--- a/src/interfaces/assistants_web/src/utils/citations.ts
+++ b/src/interfaces/assistants_web/src/utils/citations.ts
@@ -11,12 +11,27 @@ export const fixMarkdownImagesInText = (text: string) => {
 
 const formatter = new Intl.ListFormat('en', { style: 'long', type: 'conjunction' });
 
-export const fixCitationsLeadingMarkdown = (citations: Citation[], originalText: string) => {
+export const fixInlineCitationsForMarkdown = (citations: Citation[], originalText: string) => {
   const citationsCopy = [...citations];
   const markdownFixList = ['`', '*', '**'];
+  const matchDownloableMarkdownLink = /\[.*\]\(.*/;
+  let carryOver = 0;
 
   for (let citation of citationsCopy) {
+    if (carryOver) {
+      citation.start += carryOver;
+      citation.end += carryOver;
+    }
+
     for (const markdown of markdownFixList) {
+      /**
+       * fix citations breaking markdown.
+       * e.g.:
+       * originalText: `Abra envolves into **Kadabra**`
+       * citation = { start: 44, end: 53, text: '**Kadabra', document_ids: ['12345'] }
+       * Explanation: it will render as `Abra envolves into cite[**Kadabra]{generationId="12345" start="44" end="53"}**`
+       * breaking the markdown layout. This fix will ensure the citation is rendered as `Abra envolves into cite[**Kadabra**]{generationId="12345" start="44" end="53"}`
+       */
       if (citation.text.startsWith(markdown)) {
         const canWeIncludeNextCharacterInTheCitation =
           originalText.charAt(citation.end) === markdown;
@@ -25,6 +40,21 @@ export const fixCitationsLeadingMarkdown = (citations: Citation[], originalText:
           citation.text = citation.text + markdown;
         }
       }
+
+      if (citation.text.startsWith(' [')) {
+        citation.text = citation.text.slice(1);
+        carryOver -= 1;
+      }
+
+      if (citation.text.startsWith('! [')) {
+        citation.text = '![' + citation.text.slice(3);
+        carryOver -= 1;
+      }
+
+      if (citation.text.match(matchDownloableMarkdownLink)) {
+        // push the citation to the end so it shows up as a 'Other references'
+        citation.start = originalText.length + 1;
+      }
     }
   }
 
@@ -45,9 +75,14 @@ export const replaceTextWithCitations = (
   generationId: string
 ) => {
   if (!citations.length || !generationId) return text;
+  const iFrameRegExp = /<iframe.*<\/iframe>/;
+  const codeBlockRegExp = /```[\s\S]*?```/g;
+
+  let notFoundReferences: string[] = [];
+  let iFrameReferences: string[] = [];
+  let codeBlockReferences: string[] = [];
   let replacedText = text;
   let lengthDifference = 0; // Track the cumulative length difference
-  let notFoundReferences: string[] = [];
   let carryOver = 0;
 
   citations
@@ -57,7 +92,7 @@ export const replaceTextWithCitations = (
       let citeEnd = end + lengthDifference + carryOver;
 
       // if citeStart is higher than the length of the text, add it to the bottom of the text as "Reference #n"
-      if (start >= text.length || isReferenceBetweenIframes(replacedText, start)) {
+      if (start >= text.length) {
         const ref = `Reference #${index + 1}`;
         notFoundReferences.push(
           `:cite[${ref}]{generationId="${generationId}" start="${start}" end="${end}"}`
@@ -65,40 +100,58 @@ export const replaceTextWithCitations = (
         return;
       }
 
-      const fixedText = fixMarkdownImagesInText(citationText);
-      const isFixedText = fixedText.length !== citationText.length;
+      if (isReferenceBetweenSpecialTags(iFrameRegExp, replacedText, citeStart)) {
+        const ref = `Reference #${iFrameReferences.length + 1}`;
+        iFrameReferences.push(
+          `:cite[${ref}]{generationId="${generationId}" start="${start}" end="${end}"}`
+        );
+        iFrameReferences.push();
+        return;
+      }
 
-      if (isFixedText) {
-        citeEnd += fixedText.length - citationText.length;
-        carryOver += fixedText.length - citationText.length;
+      if (isReferenceBetweenSpecialTags(codeBlockRegExp, replacedText, citeStart)) {
+        const ref = `Reference #${codeBlockReferences.length + 1}`;
+        codeBlockReferences.push(
+          `:cite[${ref}]{generationId="${generationId}" start="${start}" end="${end}"}`
+        );
+        codeBlockReferences.push();
+        return;
       }
 
       // Encode the citationText in case there are any weird characters or unclosed brackets that will
       // interfere with parsing the markdown. However, let markdown images through so they may be properly
       // rendered.
-      const isMarkdownImage = fixedText.match(/!\[.*\]\(.*\)/);
-      const encodedCitationText = isMarkdownImage ? fixedText : encodeURIComponent(fixedText);
+      const isMarkdownImage = citationText.match(/\[.*\]\(.*\)/);
+      const encodedCitationText = isMarkdownImage ? citationText : encodeURIComponent(citationText);
       const citationId = `:cite[${encodedCitationText}]{generationId="${generationId}" start="${start}" end="${end}"}`;
 
       replacedText = replacedText.slice(0, citeStart) + citationId + replacedText.slice(citeEnd);
       lengthDifference += citationId.length - (citeEnd - citeStart);
     });
 
-  const references = 'From: ' + formatter.format(notFoundReferences);
-  if (notFoundReferences.length > 0) {
-    return references + '\n' + replacedText;
+  if (iFrameReferences.length > 0) {
+    const references = 'From: ' + formatter.format(iFrameReferences);
+    replacedText = references + '\n' + replacedText;
+  }
+
+  if (notFoundReferences.length > 0 || codeBlockReferences.length > 0) {
+    const allReferences = [...codeBlockReferences, ...notFoundReferences];
+    const references = '\nOther references: ' + formatter.format(allReferences);
+    replacedText = replacedText + '\n' + references;
   }
+
   return replacedText;
 };
 
 export const createStartEndKey = (start: number | string, end: number | string) =>
   `${start}-${end}`;
 
-function isReferenceBetweenIframes(replacedText: string, citeStart: number): boolean {
-  const IFRAME_REGEX = /<iframe.*<\/iframe>/g;
-  const match = IFRAME_REGEX.exec(replacedText);
-
-  if (!match) return false;
-
-  return match.index < citeStart && citeStart < match.index + match[0].length;
+export function isReferenceBetweenSpecialTags(
+  regExp: RegExp,
+  replacedText: string,
+  citeStart: number
+): boolean {
+  const regex = new RegExp(regExp, 'g');
+  const match = regex.exec(replacedText);
+  return Boolean(match && match.index < citeStart && citeStart < match.index + match[0].length);
 }
diff --git a/src/interfaces/assistants_web/src/utils/conversation.ts b/src/interfaces/assistants_web/src/utils/conversation.ts
index 9fd24d6a61..5d0b09317a 100644
--- a/src/interfaces/assistants_web/src/utils/conversation.ts
+++ b/src/interfaces/assistants_web/src/utils/conversation.ts
@@ -1,7 +1,10 @@
 import { Message, MessageAgent } from '@/cohere-client';
 import { BotState, ChatMessage, FulfilledMessage, MessageType, UserMessage } from '@/types/message';
-import { fixCitationsLeadingMarkdown, replaceTextWithCitations } from '@/utils/citations';
-import { replaceCodeBlockWithIframe } from '@/utils/preview';
+import {
+  fixInlineCitationsForMarkdown,
+  replaceCodeBlockWithIframe,
+  replaceTextWithCitations,
+} from '@/utils';
 
 /**
  * A utility function that checks if the conversation title should be updated
@@ -47,7 +50,7 @@ export const mapHistoryToMessages = (history?: Message[]): UserOrBotMessage[] =>
           originalText: message.text ?? '',
           text: replaceTextWithCitations(
             replaceCodeBlockWithIframe(message.text) ?? '',
-            fixCitationsLeadingMarkdown(message.citations ?? [], message.text),
+            fixInlineCitationsForMarkdown(message.citations ?? [], message.text),
             message.generation_id ?? ''
           ),
           generationId: message.generation_id ?? '',
diff --git a/src/interfaces/assistants_web/src/utils/file.ts b/src/interfaces/assistants_web/src/utils/file.ts
index 05dd79ef8f..3c9d2bbe78 100644
--- a/src/interfaces/assistants_web/src/utils/file.ts
+++ b/src/interfaces/assistants_web/src/utils/file.ts
@@ -36,3 +36,30 @@ export const getFileUploadTimeEstimateInMs = (fileSizeInBytes: number) => {
   // This equation estimates upload speed based on some existing data points with various file sizes.
   return ((3.51 * fileSizeInBytes) / 1000000 - 0.3) * 1000;
 };
+
+/**
+ * Decode base64 text into utf-8.
+ * @param text
+ * @returns decoded text
+ */
+export const decodeBase64 = (text: string) => {
+  return Buffer.from(text, 'base64').toString('utf-8');
+};
+
+/**
+ * Map file extension to mime type.
+ * @param extension
+ * @returns mime type
+ */
+export const mapExtensionToMimeType = (extension: string) => {
+  return (
+    {
+      ['csv']: 'text/csv',
+      ['json']: 'application/json',
+      ['pdf']: 'application/pdf',
+      ['png']: 'image/png',
+      ['txt']: 'text/plain',
+      ['zip']: 'application/zip',
+    }[extension] || 'text/plain'
+  );
+};
diff --git a/src/interfaces/assistants_web/src/utils/index.ts b/src/interfaces/assistants_web/src/utils/index.ts
index 3fc8e3969a..629cff9e3c 100644
--- a/src/interfaces/assistants_web/src/utils/index.ts
+++ b/src/interfaces/assistants_web/src/utils/index.ts
@@ -1,12 +1,17 @@
+export * from './agents';
 export * from './citations';
 export * from './cn';
 export * from './conversation';
 export * from './delimiters';
+export * from './download';
 export * from './error';
 export * from './file';
 export * from './format';
+export * from './getToolAuthUrl';
 export * from './grounding';
 export * from './pluralize';
+export * from './preview';
 export * from './queryString';
 export * from './simpleEmailValidation';
+export * from './tools';
 export * from './urls';
diff --git a/src/interfaces/assistants_web/src/utils/tools.ts b/src/interfaces/assistants_web/src/utils/tools.ts
index 645c4be9a0..b36081856e 100644
--- a/src/interfaces/assistants_web/src/utils/tools.ts
+++ b/src/interfaces/assistants_web/src/utils/tools.ts
@@ -1,5 +1,5 @@
 import { Document } from '@/cohere-client';
-import { IconName } from '@/components/Shared';
+import { IconName } from '@/components/UI';
 import { TOOL_FALLBACK_ICON, TOOL_ID_TO_DISPLAY_INFO } from '@/constants';
 
 type PythonInterpreterFieldsBase = {
diff --git a/src/interfaces/coral_web/src/components/MessageFile.tsx b/src/interfaces/coral_web/src/components/MessageFile.tsx
index 77241e7b18..7c23806d73 100644
--- a/src/interfaces/coral_web/src/components/MessageFile.tsx
+++ b/src/interfaces/coral_web/src/components/MessageFile.tsx
@@ -16,7 +16,8 @@ type Props = {
 };
 
 const getFileType = (fileName: string) => {
-  return getFileExtension(fileName)?.replace(/^./, ''); // replace first character if it is a period
+  return getFileExtension(fileName)?.replace(/^./, '');
+  // replace first character if it is a period
 };
 
 /**
diff --git a/standalone.Dockerfile b/standalone.Dockerfile
index 7d97d69c2e..2f584e1c62 100644
--- a/standalone.Dockerfile
+++ b/standalone.Dockerfile
@@ -85,16 +85,16 @@ RUN chmod 755 /sbin/entrypoint.sh \
 
 
 # Install frontend dependencies
-WORKDIR /workspace/src/interfaces/coral_web
-COPY src/interfaces/coral_web/src ./src
-COPY src/interfaces/coral_web/public ./public
-COPY src/interfaces/coral_web/next.config.mjs .
-COPY src/interfaces/coral_web/tsconfig.json .
-COPY src/interfaces/coral_web/tailwind.config.js .
-COPY src/interfaces/coral_web/postcss.config.js .
-COPY src/interfaces/coral_web/package.json src/interfaces/coral_web/yarn.lock* src/interfaces/coral_web/package-lock.json* src/interfaces/coral_web/pnpm-lock.yaml* ./
-COPY src/interfaces/coral_web/.env.development .
-COPY src/interfaces/coral_web/.env.production .
+WORKDIR /workspace/src/interfaces/assistants_web
+COPY src/interfaces/assistants_web/src ./src
+COPY src/interfaces/assistants_web/public ./public
+COPY src/interfaces/assistants_web/next.config.mjs .
+COPY src/interfaces/assistants_web/tsconfig.json .
+COPY src/interfaces/assistants_web/tailwind.config.js .
+COPY src/interfaces/assistants_web/postcss.config.js .
+COPY src/interfaces/assistants_web/package.json src/interfaces/assistants_web/yarn.lock* src/interfaces/assistants_web/package-lock.json* src/interfaces/assistants_web/pnpm-lock.yaml* ./
+COPY src/interfaces/assistants_web/.env.development .
+COPY src/interfaces/assistants_web/.env.production .
 
 RUN npm install