diff --git a/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx b/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx
index 7c3f04649f..cc2a1294d5 100644
--- a/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx
+++ b/src/interfaces/coral_web/src/components/Agents/AgentCard.tsx
@@ -23,12 +23,12 @@ type Props = {
 export const AgentCard: React.FC<Props> = ({ name, id, isBaseAgent, isExpanded }) => {
   const isTouchDevice = getIsTouchDevice();
   const { query } = useRouter();
-  const isActive = isBaseAgent ? !query.id : query.id === id;
+  const isActive = isBaseAgent ? !query.assistantId : query.assistantId === id;
 
   return (
     <Tooltip label={name} placement="right" hover={!isExpanded}>
       <Link
-        href={isBaseAgent ? '/agents' : `/agents?id=${id}`}
+        href={isBaseAgent ? '/agents' : `/agents?assistantId=${id}`}
         className={cn(
           'group flex w-full items-center justify-between gap-x-2 rounded-lg p-2 transition-colors hover:bg-marble-300',
           {
@@ -78,7 +78,7 @@ export const AgentCard: React.FC<Props> = ({ name, id, isBaseAgent, isExpanded }
             items={[
               {
                 label: 'New chat',
-                href: `/agents?id=${id}`,
+                href: `/agents?assistantId=${id}`,
                 iconName: 'new-message',
               },
               {
diff --git a/src/interfaces/coral_web/src/components/Agents/AgentsSidePanel.tsx b/src/interfaces/coral_web/src/components/Agents/AgentsSidePanel.tsx
index bc252f5018..7a9c6ceeb3 100644
--- a/src/interfaces/coral_web/src/components/Agents/AgentsSidePanel.tsx
+++ b/src/interfaces/coral_web/src/components/Agents/AgentsSidePanel.tsx
@@ -1,7 +1,7 @@
 import { Transition } from '@headlessui/react';
 import Link from 'next/link';
 
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { Button, Icon, IconProps, Logo, Tooltip } from '@/components/Shared';
 import { env } from '@/env.mjs';
 import { useSettingsStore } from '@/stores';
diff --git a/src/interfaces/coral_web/src/components/Agents/DiscoverAgentCard.tsx b/src/interfaces/coral_web/src/components/Agents/DiscoverAgentCard.tsx
index 77814f50cc..6ffcfa1f71 100644
--- a/src/interfaces/coral_web/src/components/Agents/DiscoverAgentCard.tsx
+++ b/src/interfaces/coral_web/src/components/Agents/DiscoverAgentCard.tsx
@@ -18,7 +18,7 @@ export const DiscoverAgentCard: React.FC<Props> = ({ id, name, description, isBa
   return (
     <article className="flex overflow-x-hidden rounded-lg border border-marble-400 bg-marble-200 p-4  hover:bg-marble-300">
       <Link
-        href={isBaseAgent ? '/agents' : `/agents?id=${id}`}
+        href={isBaseAgent ? '/agents' : `/agents?assistantId=${id}`}
         className="flex-grow overflow-x-hidden"
       >
         <div className="flex h-full flex-col items-start gap-y-2">
diff --git a/src/interfaces/coral_web/src/components/Citations/Citation.tsx b/src/interfaces/coral_web/src/components/Citations/Citation.tsx
index e68bebd27c..6760b19be5 100644
--- a/src/interfaces/coral_web/src/components/Citations/Citation.tsx
+++ b/src/interfaces/coral_web/src/components/Citations/Citation.tsx
@@ -5,7 +5,7 @@ import { useMemo, useState } from 'react';
 
 import { Document } from '@/cohere-client';
 import { CitationDocument } from '@/components/Citations/CitationDocument';
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { Text } from '@/components/Shared/Text';
 import { ReservedClasses } from '@/constants';
 import { CitationStyles, useCalculateCitationTranslateY } from '@/hooks/citations';
diff --git a/src/interfaces/coral_web/src/components/Citations/CitationDocumentHeader.tsx b/src/interfaces/coral_web/src/components/Citations/CitationDocumentHeader.tsx
index 4db5f3cf8f..9f85c4df30 100644
--- a/src/interfaces/coral_web/src/components/Citations/CitationDocumentHeader.tsx
+++ b/src/interfaces/coral_web/src/components/Citations/CitationDocumentHeader.tsx
@@ -1,4 +1,4 @@
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { DocumentIcon, Icon, IconName, Text } from '@/components/Shared';
 import { TOOL_FALLBACK_ICON, TOOL_ID_TO_DISPLAY_INFO, TOOL_INTERNET_SEARCH_ID } from '@/constants';
 import { cn, getSafeUrl, getWebDomain } from '@/utils';
diff --git a/src/interfaces/coral_web/src/components/ConfigurationDrawerButton.tsx b/src/interfaces/coral_web/src/components/ConfigurationDrawerButton.tsx
deleted file mode 100644
index ae932c4c57..0000000000
--- a/src/interfaces/coral_web/src/components/ConfigurationDrawerButton.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { useRouter } from 'next/router';
-import React from 'react';
-
-import { Dot } from '@/components/Dot';
-import { BasicButton, Text } from '@/components/Shared';
-import { WelcomeGuideTooltip } from '@/components/WelcomeGuideTooltip';
-import { WelcomeGuideStep, useWelcomeGuideState } from '@/hooks/ftux';
-import { useIsGroundingOn } from '@/hooks/grounding';
-import { useSettingsStore } from '@/stores';
-import { cn } from '@/utils';
-
-type Props = {
-  className?: string;
-};
-
-/**
- * @description renders the button that opens the configuration drawer.
- */
-export const ConfigurationDrawerButton: React.FC<Props> = ({ className = '' }) => {
-  const router = useRouter();
-  const { welcomeGuideState, progressWelcomeGuideStep, finishWelcomeGuide } =
-    useWelcomeGuideState();
-  const { setSettings } = useSettingsStore();
-  const isGroundingOn = useIsGroundingOn();
-
-  const handleGroundingClick = () => {
-    setSettings({ isConfigDrawerOpen: true });
-
-    if (welcomeGuideState === WelcomeGuideStep.ONE && router.pathname === '/') {
-      progressWelcomeGuideStep();
-    } else if (welcomeGuideState !== WelcomeGuideStep.DONE) {
-      finishWelcomeGuide();
-    }
-  };
-
-  return (
-    <div className={cn('relative', className)}>
-      <BasicButton
-        label={<Text styleAs="overline">Tools</Text>}
-        kind="tertiary"
-        size="sm"
-        dataTestId="button-grounding-drawer"
-        startIcon={<Dot on={isGroundingOn} />}
-        onClick={handleGroundingClick}
-      />
-      <WelcomeGuideTooltip
-        step={1}
-        className={cn('right-0 top-full mt-9', {
-          'delay-1000': !welcomeGuideState || welcomeGuideState === WelcomeGuideStep.ONE,
-        })}
-      />
-    </div>
-  );
-};
diff --git a/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx b/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx
index 1f42deafcf..724e7d4c7c 100644
--- a/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx
+++ b/src/interfaces/coral_web/src/components/Conversation/Composer/ComposerToolbar.tsx
@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 
 import { EnabledDataSources } from '@/components/Conversation/Composer/EnabledDataSources';
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { IconName } from '@/components/Shared';
 import { ACCEPTED_FILE_TYPES } from '@/constants';
 import { cn } from '@/utils';
@@ -42,5 +42,7 @@ const ToolbarActionButton: React.FC<{
   icon: IconName;
   onClick: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({ tooltipLabel, icon, onClick }) => {
-  return <IconButton iconName={icon} tooltipLabel={tooltipLabel} onClick={onClick} size="sm" />;
+  return (
+    <IconButton iconName={icon} tooltip={{ label: tooltipLabel }} onClick={onClick} size="sm" />
+  );
 };
diff --git a/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx b/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx
index 24a3da0b96..56e45c5750 100644
--- a/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx
+++ b/src/interfaces/coral_web/src/components/Conversation/ConfigurationDrawer.tsx
@@ -2,10 +2,8 @@ import { Transition } from '@headlessui/react';
 import React from 'react';
 
 import { Configuration } from '@/components/Configuration';
-import { Dot } from '@/components/Dot';
-import IconButton from '@/components/IconButton';
-import { Text } from '@/components/Shared';
-import { useIsGroundingOn } from '@/hooks/grounding';
+import { IconButton } from '@/components/IconButton';
+import { Icon, Text } from '@/components/Shared';
 import { useCitationsStore, useSettingsStore } from '@/stores';
 import { cn } from '@/utils';
 
@@ -21,7 +19,6 @@ export const ConfigurationDrawer: React.FC = () => {
   const {
     citations: { hasCitations },
   } = useCitationsStore();
-  const isGroundingOn = useIsGroundingOn();
 
   return (
     <Transition
@@ -46,13 +43,13 @@ export const ConfigurationDrawer: React.FC = () => {
       <header className="flex h-header items-center gap-2 border-b border-marble-400 p-5">
         <IconButton
           iconName="close-drawer"
-          tooltipLabel="Close drawer"
+          tooltip={{ label: 'Close drawer', size: 'md' }}
           isDefaultOnHover={false}
           onClick={() => setSettings({ isConfigDrawerOpen: false })}
         />
         <span className="flex items-center gap-2">
-          <Dot on={isGroundingOn} />
-          <Text styleAs="p-lg">Tools</Text>
+          <Icon name="settings" className="text-volcanic-700" kind="outline" />
+          <Text styleAs="p-lg">Settings</Text>
         </span>
       </header>
       <Configuration />
diff --git a/src/interfaces/coral_web/src/components/Conversation/Header.tsx b/src/interfaces/coral_web/src/components/Conversation/Header.tsx
index 639d9f8cb1..b59ab7e55b 100644
--- a/src/interfaces/coral_web/src/components/Conversation/Header.tsx
+++ b/src/interfaces/coral_web/src/components/Conversation/Header.tsx
@@ -1,16 +1,12 @@
 import { Transition } from '@headlessui/react';
 import { useRouter } from 'next/router';
-import { useMemo } from 'react';
 
-import { ConfigurationDrawerButton } from '@/components/ConfigurationDrawerButton';
-import { Dot } from '@/components/Dot';
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { KebabMenu, KebabMenuItem } from '@/components/KebabMenu';
 import { Text } from '@/components/Shared';
+import { WelcomeGuideTooltip } from '@/components/WelcomeGuideTooltip';
 import { useIsDesktop } from '@/hooks/breakpoint';
-import { useConversationActions } from '@/hooks/conversation';
 import { WelcomeGuideStep, useWelcomeGuideState } from '@/hooks/ftux';
-import { useIsGroundingOn } from '@/hooks/grounding';
 import {
   useCitationsStore,
   useConversationStore,
@@ -19,58 +15,50 @@ import {
 } from '@/stores';
 import { cn } from '@/utils';
 
-const useMenuItems = ({ conversationId }: { conversationId?: string }) => {
-  const { deleteConversation } = useConversationActions();
+const useHeaderMenu = ({ conversationId }: { conversationId?: string }) => {
   const { resetConversation } = useConversationStore();
   const { resetCitations } = useCitationsStore();
+
   const { settings, setSettings } = useSettingsStore();
   const { resetFileParams } = useParamsStore();
   const router = useRouter();
   const { welcomeGuideState, progressWelcomeGuideStep, finishWelcomeGuide } =
     useWelcomeGuideState();
-  const isGroundingOn = useIsGroundingOn();
 
-  const menuItems: KebabMenuItem[] = useMemo(() => {
-    if (!conversationId) {
-      return [];
-    }
+  const handleNewChat = () => {
+    const assistantId = router.query.assistantId;
+
+    const url = assistantId ? `/?assistantId=${assistantId}` : '/';
+    router.push(url, undefined, { shallow: true });
+    resetConversation();
+    resetCitations();
+    resetFileParams();
+  };
 
-    return [
-      {
-        label: 'Tools',
-        icon: <Dot on={isGroundingOn} />,
-        onClick: () => {
-          setSettings({ isConfigDrawerOpen: true });
+  const handleOpenSettings = () => {
+    setSettings({ isConfigDrawerOpen: true });
+
+    if (welcomeGuideState === WelcomeGuideStep.ONE && router.pathname === '/') {
+      progressWelcomeGuideStep();
+    } else if (welcomeGuideState !== WelcomeGuideStep.DONE) {
+      finishWelcomeGuide();
+    }
+  };
 
-          if (welcomeGuideState === WelcomeGuideStep.ONE && router.pathname === '/') {
-            progressWelcomeGuideStep();
-          } else if (welcomeGuideState !== WelcomeGuideStep.DONE) {
-            finishWelcomeGuide();
-          }
-        },
-      },
-      {
-        label: 'Delete chat',
-        iconName: 'trash',
-        onClick: () => {
-          deleteConversation({ id: conversationId });
-        },
-        className: 'text-danger-500',
-      },
-      {
-        label: 'New chat',
-        iconName: 'new-message',
-        onClick: () => {
-          router.push('/', undefined, { shallow: true });
-          resetConversation();
-          resetCitations();
-          resetFileParams();
-        },
-      },
-    ];
-  }, [conversationId, settings, isGroundingOn]);
+  const menuItems: KebabMenuItem[] = [
+    {
+      label: 'Settings',
+      iconName: 'settings',
+      onClick: handleOpenSettings,
+    },
+    {
+      label: 'New chat',
+      iconName: 'new-message',
+      onClick: handleNewChat,
+    },
+  ];
 
-  return menuItems;
+  return { menuItems, handleNewChat, handleOpenSettings };
 };
 
 type Props = {
@@ -78,7 +66,7 @@ type Props = {
   conversationId?: string;
 };
 
-export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
+export const Header: React.FC<Props> = ({ isStreaming }) => {
   const {
     conversation: { id, name },
   } = useConversationStore();
@@ -87,17 +75,13 @@ export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
     setSettings,
     setIsConvListPanelOpen,
   } = useSettingsStore();
-  const isDesktop = useIsDesktop();
-  const menuItems = useMenuItems({ conversationId: id });
 
-  const { deleteConversation } = useConversationActions();
+  const { welcomeGuideState } = useWelcomeGuideState();
 
-  const handleDelete = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (!id) return;
-    deleteConversation({ id });
-  };
+  const isDesktop = useIsDesktop();
+  const { menuItems, handleNewChat, handleOpenSettings } = useHeaderMenu({
+    conversationId: id,
+  });
 
   return (
     <div className={cn('flex h-header w-full min-w-0 items-center border-b', 'border-marble-400')}>
@@ -139,20 +123,29 @@ export const Header: React.FC<Props> = ({ conversationId, isStreaming }) => {
           </Text>
         </span>
         <span className="flex items-center gap-x-2 py-4 pl-4 md:pl-0">
-          <KebabMenu
-            className={cn('md:hidden', { hidden: !conversationId })}
-            items={menuItems}
-            anchor="left start"
-          />
+          <KebabMenu className="md:hidden" items={menuItems} anchor="left start" />
           <IconButton
-            iconName="trash"
-            onClick={handleDelete}
+            tooltip={{ label: 'New chat', placement: 'bottom-end', size: 'md' }}
+            className="hidden md:flex"
+            iconName="new-message"
+            onClick={handleNewChat}
             disabled={isStreaming}
-            className={cn('hidden', { 'md:flex': !!conversationId })}
-          />
-          <ConfigurationDrawerButton
-            className={cn({ flex: !conversationId, 'hidden md:flex': !!conversationId })}
           />
+          <div className="relative">
+            <IconButton
+              tooltip={{ label: 'Settings', placement: 'bottom-end', size: 'md' }}
+              className="hidden md:flex"
+              onClick={handleOpenSettings}
+              iconName="settings"
+              disabled={isStreaming}
+            />
+            <WelcomeGuideTooltip
+              step={1}
+              className={cn('right-0 top-full mt-9', {
+                'delay-1000': !welcomeGuideState || welcomeGuideState === WelcomeGuideStep.ONE,
+              })}
+            />
+          </div>
         </span>
       </div>
     </div>
diff --git a/src/interfaces/coral_web/src/components/ConversationList/ConversationListHeader.tsx b/src/interfaces/coral_web/src/components/ConversationList/ConversationListHeader.tsx
index e8f4b23424..19e8570041 100644
--- a/src/interfaces/coral_web/src/components/ConversationList/ConversationListHeader.tsx
+++ b/src/interfaces/coral_web/src/components/ConversationList/ConversationListHeader.tsx
@@ -1,4 +1,4 @@
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { Checkbox, Icon, Text } from '@/components/Shared';
 import {
   useCitationsStore,
diff --git a/src/interfaces/coral_web/src/components/Dot.tsx b/src/interfaces/coral_web/src/components/Dot.tsx
deleted file mode 100644
index bf29997883..0000000000
--- a/src/interfaces/coral_web/src/components/Dot.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { SVGProps } from 'react';
-
-import { cn } from '@/utils';
-
-type Props = {
-  on: boolean;
-} & SVGProps<SVGSVGElement>;
-
-export const Dot: React.FC<Props> = ({ on, className, ...props }) => {
-  return (
-    <span className={cn('relative flex', className)}>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        width="9"
-        height="9"
-        viewBox="0 0 9 9"
-        className={cn('inline-flex', {
-          'fill-primary-300': on,
-          'fill-marble-500': !on,
-        })}
-        {...props}
-      >
-        <circle cx="4.5" cy="4.5" r="4.5" />
-      </svg>
-      {on && (
-        <span className="absolute inline-flex h-full w-full animate-ping-once rounded-full bg-primary-300 opacity-75" />
-      )}
-    </span>
-  );
-};
diff --git a/src/interfaces/coral_web/src/components/IconButton.tsx b/src/interfaces/coral_web/src/components/IconButton.tsx
index 372ca4931c..3d98e1dd5c 100644
--- a/src/interfaces/coral_web/src/components/IconButton.tsx
+++ b/src/interfaces/coral_web/src/components/IconButton.tsx
@@ -1,11 +1,16 @@
+import { Placement } from '@floating-ui/react';
 import React from 'react';
 
-import { BasicButton, Icon, IconName, Target, Text, Tooltip } from '@/components/Shared';
+import { BasicButton, Icon, IconName, Target, Tooltip } from '@/components/Shared';
 import { cn } from '@/utils';
 
 type Props = {
   iconName: IconName;
-  tooltipLabel?: React.ReactNode;
+  tooltip?: {
+    label: string;
+    size?: 'sm' | 'md';
+    placement?: Placement;
+  };
   size?: 'sm' | 'md';
   href?: string;
   target?: Target;
@@ -22,9 +27,9 @@ type Props = {
 /**
  * @description Convenience component for rendering an icon button that follows Chat UI's design patterns.
  */
-const IconButton: React.FC<Props> = ({
+export const IconButton: React.FC<Props> = ({
   iconName,
-  tooltipLabel,
+  tooltip,
   size = 'md',
   iconKind = 'outline',
   iconClassName,
@@ -70,12 +75,17 @@ const IconButton: React.FC<Props> = ({
     />
   );
 
-  return tooltipLabel ? (
-    <Tooltip label={tooltipLabel} size="sm" hover hoverDelay={{ open: 250 }}>
+  return tooltip ? (
+    <Tooltip
+      label={tooltip.label}
+      size={tooltip.size ?? 'sm'}
+      placement={tooltip.placement}
+      hover
+      hoverDelay={{ open: 250 }}
+    >
       {iconButton}
     </Tooltip>
   ) : (
     iconButton
   );
 };
-export default IconButton;
diff --git a/src/interfaces/coral_web/src/components/MessageRow.tsx b/src/interfaces/coral_web/src/components/MessageRow.tsx
index 6ce15ca935..ebf8fc34e7 100644
--- a/src/interfaces/coral_web/src/components/MessageRow.tsx
+++ b/src/interfaces/coral_web/src/components/MessageRow.tsx
@@ -3,7 +3,7 @@ import { forwardRef, useEffect, useState } from 'react';
 import { useLongPress } from 'react-aria';
 
 import { Avatar } from '@/components/Avatar';
-import IconButton from '@/components/IconButton';
+import { IconButton } from '@/components/IconButton';
 import { LongPressMenu } from '@/components/LongPressMenu';
 import { MessageContent } from '@/components/MessageContent';
 import {
diff --git a/src/interfaces/coral_web/src/components/Shared/Tooltip/Tooltip.tsx b/src/interfaces/coral_web/src/components/Shared/Tooltip/Tooltip.tsx
index e6e1fdb489..131d7f3825 100644
--- a/src/interfaces/coral_web/src/components/Shared/Tooltip/Tooltip.tsx
+++ b/src/interfaces/coral_web/src/components/Shared/Tooltip/Tooltip.tsx
@@ -142,11 +142,11 @@ export const Tooltip: React.FC<TooltipProps> = ({
             {...getFloatingProps()}
           >
             {size === 'sm' ? (
-              <Text styleAs="p-sm" className="text-marble-300">
+              <Text as="span" styleAs="p-sm" className="flex text-marble-300">
                 {label}
               </Text>
             ) : (
-              label
+              <Text as="span">{label}</Text>
             )}
           </div>
         )}