diff --git a/apps/webapp/app/components/AskAI.tsx b/apps/webapp/app/components/AskAI.tsx
index bc55469b84..814d4649c8 100644
--- a/apps/webapp/app/components/AskAI.tsx
+++ b/apps/webapp/app/components/AskAI.tsx
@@ -118,30 +118,31 @@ function AskAIProvider({ websiteId, isCollapsed = false }: AskAIProviderProps) {
       <motion.div layout="position" transition={{ duration: 0.2, ease: "easeInOut" }}>
         <TooltipProvider disableHoverableContent>
           <Tooltip>
-            <div className={isCollapsed ? "w-full" : "inline-flex"}>
-              <TooltipTrigger asChild>
+            <TooltipTrigger asChild>
+              <span className={cn("inline-flex h-8", isCollapsed && "w-full")}>
                 <Button
                   variant="small-menu-item"
                   data-action="ask-ai"
-                  shortcut={{ modifiers: ["mod"], key: "/", enabledOnInputElements: true }}
+                  shortcut={{ modifiers: ["mod"], key: "i", enabledOnInputElements: true }}
                   hideShortcutKey
                   data-modal-override-open-class-ask-ai="true"
                   onClick={() => openAskAI()}
-                  className={isCollapsed ? "w-full justify-center" : ""}
+                  fullWidth={isCollapsed}
+                  className={cn("h-full", isCollapsed && "justify-center")}
                 >
                   <AISparkleIcon className="size-5" />
                 </Button>
-              </TooltipTrigger>
-            </div>
+              </span>
+            </TooltipTrigger>
             <TooltipContent
-              side={isCollapsed ? "right" : "top"}
-              sideOffset={isCollapsed ? 8 : 4}
-              className="flex items-center gap-1 py-1.5 pl-2.5 pr-2 text-xs"
+              side="right"
+              sideOffset={8}
+              className="flex items-center gap-2 text-xs"
             >
               Ask AI
               <span className="flex items-center">
                 <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
-                <ShortcutKey shortcut={{ key: "/" }} variant="medium/bright" />
+                <ShortcutKey shortcut={{ key: "i" }} variant="medium/bright" />
               </span>
             </TooltipContent>
           </Tooltip>
diff --git a/apps/webapp/app/components/Shortcuts.tsx b/apps/webapp/app/components/Shortcuts.tsx
index cf1b01a703..9620a69123 100644
--- a/apps/webapp/app/components/Shortcuts.tsx
+++ b/apps/webapp/app/components/Shortcuts.tsx
@@ -76,7 +76,8 @@ function ShortcutContent() {
               <ShortcutKey shortcut={{ key: "enter" }} variant="medium/bright" />
             </Shortcut>
             <Shortcut name="Ask AI">
-              <ShortcutKey shortcut={{ modifiers: ["mod"], key: "/" }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ modifiers: ["mod"] }} variant="medium/bright" />
+              <ShortcutKey shortcut={{ key: "i" }} variant="medium/bright" />
             </Shortcut>
             <Shortcut name="Filter">
               <ShortcutKey shortcut={{ key: "f" }} variant="medium/bright" />
diff --git a/apps/webapp/app/components/navigation/SideMenu.tsx b/apps/webapp/app/components/navigation/SideMenu.tsx
index 1e7d48cd57..95282f15f5 100644
--- a/apps/webapp/app/components/navigation/SideMenu.tsx
+++ b/apps/webapp/app/components/navigation/SideMenu.tsx
@@ -993,7 +993,10 @@ function CollapseToggle({
   return (
     <div className="absolute -right-3 top-1/2 z-10 -translate-y-1/2">
       {/* Vertical line to mask the side menu border */}
-      <div className="pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 bg-background-bright" />
+      <div className={cn(
+        "pointer-events-none absolute left-1/2 top-1/2 h-10 w-px -translate-y-1/2 transition-colors duration-200",
+        isHovering ? "bg-charcoal-750" : "bg-background-bright"
+      )} />
       <TooltipProvider disableHoverableContent>
         <Tooltip>
           <TooltipTrigger asChild>