diff --git a/app/components/HoverPopover/index.tsx b/app/components/HoverPopover/index.tsx
new file mode 100644
index 000000000..9457d2dd6
--- /dev/null
+++ b/app/components/HoverPopover/index.tsx
@@ -0,0 +1,37 @@
+import * as HoverCard from "@radix-ui/react-hover-card";
+import { ComponentProps } from "react";
+
+export interface PopoverProps {
+  content?: JSX.Element | string;
+  children?: JSX.Element;
+  arrowClassName?: string;
+  popoverClassName?: string;
+  noArrow?: boolean;
+  align?: ComponentProps<typeof HoverCard.Content>["align"];
+}
+
+export default function HoverPopover(props: PopoverProps) {
+  const {
+    content,
+    children,
+    arrowClassName,
+    popoverClassName,
+    noArrow = false,
+    align,
+  } = props;
+  return (
+    <HoverCard.Root>
+      <HoverCard.Trigger asChild>{children}</HoverCard.Trigger>
+      <HoverCard.Portal>
+        <HoverCard.Content
+          className={`${popoverClassName}`}
+          sideOffset={5}
+          align={align}
+        >
+          {content}
+          {!noArrow && <HoverCard.Arrow className={`${arrowClassName}`} />}
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
+  );
+}
diff --git a/app/components/Popover/index.tsx b/app/components/Popover/index.tsx
index 23ff02d79..a4eee6ee4 100644
--- a/app/components/Popover/index.tsx
+++ b/app/components/Popover/index.tsx
@@ -54,6 +54,7 @@ export interface PopoverProps {
   placement?: "t" | "lt" | "rt" | "lb" | "rb" | "b" | "l" | "r";
   noArrow?: boolean;
   delayClose?: number;
+  useGlobalRoot?: boolean;
 }
 
 export default function Popover(props: PopoverProps) {
@@ -68,6 +69,7 @@ export default function Popover(props: PopoverProps) {
     placement = "t",
     noArrow = false,
     delayClose = 0,
+    useGlobalRoot,
   } = props;
 
   const [internalShow, setShow] = useState(false);
@@ -244,62 +246,66 @@ export default function Popover(props: PopoverProps) {
     );
   }
 
-  // return (
-  //   <div
-  //     className={`relative ${className}`}
-  //     onPointerEnter={(e) => {
-  //       e.preventDefault();
-  //       clearTimeout(closeTimer.current);
-  //       onShow?.(true);
-  //       setShow(true);
-  //       getRelativePosition(e.currentTarget, "");
-  //       window.document.documentElement.style.overflow = "hidden";
-  //     }}
-  //     onPointerLeave={(e) => {
-  //       e.preventDefault();
-  //       if (delayClose) {
-  //         closeTimer.current = window.setTimeout(() => {
-  //           onShow?.(false);
-  //           setShow(false);
-  //         }, delayClose);
-  //       } else {
-  //         onShow?.(false);
-  //         setShow(false);
-  //       }
-  //       window.document.documentElement.style.overflow = "auto";
-  //     }}
-  //   >
-  //     {children}
-  //     {mergedShow && (
-  //       <>
-  //         <div
-  //           className={`${
-  //             noArrow ? "opacity-0" : ""
-  //           } bg-inherit ${arrowClassName}`}
-  //           style={{ zIndex: baseZIndex + 1 }}
-  //         >
-  //           <ArrowIcon sibling={popoverRef} />
-  //         </div>
-  //         {createPortal(
-  //           <div
-  //             className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
-  //             style={{ zIndex: baseZIndex + 1, ...placementStyle }}
-  //             ref={popoverRef}
-  //           >
-  //             {content}
-  //           </div>,
-  //           popoverRoot,
-  //         )}
-  //       </>
-  //     )}
-  //   </div>
-  // );
+  if (useGlobalRoot) {
+    return (
+      <div
+        className={`relative ${className}`}
+        onPointerEnter={(e) => {
+          e.preventDefault();
+          clearTimeout(closeTimer.current);
+          onShow?.(true);
+          setShow(true);
+          getRelativePosition(e.currentTarget, "");
+          window.document.documentElement.style.overflow = "hidden";
+        }}
+        onPointerLeave={(e) => {
+          e.preventDefault();
+          if (delayClose) {
+            closeTimer.current = window.setTimeout(() => {
+              onShow?.(false);
+              setShow(false);
+            }, delayClose);
+          } else {
+            onShow?.(false);
+            setShow(false);
+          }
+          window.document.documentElement.style.overflow = "auto";
+        }}
+      >
+        {children}
+        {mergedShow && (
+          <>
+            <div
+              className={`${
+                noArrow ? "opacity-0" : ""
+              } bg-inherit ${arrowClassName}`}
+              style={{ zIndex: baseZIndex + 1 }}
+            >
+              <ArrowIcon sibling={popoverRef} />
+            </div>
+            {createPortal(
+              <div
+                className={` whitespace-nowrap ${popoverCommonClass} ${popoverClassName} cursor-pointer`}
+                style={{ zIndex: baseZIndex + 1, ...placementStyle }}
+                ref={popoverRef}
+              >
+                {content}
+              </div>,
+              popoverRoot,
+            )}
+          </>
+        )}
+      </div>
+    );
+  }
 
   return (
     <div
       className={`group relative ${className}`}
       onPointerEnter={(e) => {
         getRelativePosition(e.currentTarget, "");
+        e.preventDefault();
+        e.stopPropagation();
       }}
     >
       {children}
diff --git a/app/containers/Chat/components/ChatActions.tsx b/app/containers/Chat/components/ChatActions.tsx
index 8163a7525..52172c271 100644
--- a/app/containers/Chat/components/ChatActions.tsx
+++ b/app/containers/Chat/components/ChatActions.tsx
@@ -10,9 +10,6 @@ import { showToast } from "@/app/components/ui-lib";
 import Locale from "@/app/locales";
 import { Path } from "@/app/constant";
 
-import LightIcon from "@/app/icons/light.svg";
-import DarkIcon from "@/app/icons/dark.svg";
-import AutoIcon from "@/app/icons/auto.svg";
 import BottomIcon from "@/app/icons/bottom.svg";
 import StopIcon from "@/app/icons/pause.svg";
 import RobotIcon from "@/app/icons/robot.svg";
diff --git a/app/containers/Chat/index.tsx b/app/containers/Chat/index.tsx
index 334be9bee..45a8d3bc2 100644
--- a/app/containers/Chat/index.tsx
+++ b/app/containers/Chat/index.tsx
@@ -23,8 +23,8 @@ import LogIcon from "@/app/icons/logIcon.svg";
 
 import MenuLayout from "@/app/components/MenuLayout";
 import Panel from "./ChatPanel";
-import Popover, { PopoverProps } from "@/app/components/Popover";
 import Confirm from "@/app/components/Confirm";
+import HoverPopover from "@/app/components/HoverPopover";
 
 export function SessionItem(props: {
   onClick?: () => void;
@@ -96,7 +96,7 @@ export function SessionItem(props: {
               {Locale.ChatItem.ChatItemCount(props.count)}
             </div>
           </div>
-          <Popover
+          <HoverPopover
             content={
               <div
                 className={`flex items-center gap-3 p-3 rounded-action-btn leading-6 cursor-pointer`}
@@ -113,20 +113,17 @@ export function SessionItem(props: {
               </div>
             }
             popoverClassName={`
-              px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow
+              px-2 py-1 border-delete-chat-popover bg-delete-chat-popover-panel rounded-md shadow-delete-chat-popover-shadow 
             `}
             noArrow
-            placement={props.isMobileScreen ? "r" : "l"}
-            className="!absolute top-[50%] translate-y-[-50%] right-3"
-            trigger={props.isMobileScreen ? "click" : "hover"}
-            delayClose={100}
+            align={props.isMobileScreen ? "end" : "start"}
           >
             <div
               className={` pointer-events-none opacity-0 group-hover/chat-menu-list:pointer-events-auto group-hover/chat-menu-list:opacity-100`}
             >
               <DeleteIcon />
             </div>
-          </Popover>
+          </HoverPopover>
         </div>
       )}
     </Draggable>
@@ -175,7 +172,6 @@ export default MenuLayout(function SessionList(props) {
     <div
       className={`
       h-[100%] flex flex-col
-      max-md:pb-chat-panel-mobile 
       md:px-0
     `}
     >
@@ -213,7 +209,7 @@ export default MenuLayout(function SessionList(props) {
       </div>
 
       <div
-        className={`flex-1 overflow-y-auto`}
+        className={`flex-1 overflow-y-auto max-md:pb-chat-panel-mobile `}
         // onClick={(e) => {
         //   if (e.target === e.currentTarget) {
         //     navigate(Path.Home);
diff --git a/package.json b/package.json
index 1f6b64914..45590f12d 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@hello-pangea/dnd": "^16.5.0",
     "@next/third-parties": "^14.1.0",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-switch": "^1.0.3",
     "@svgr/webpack": "^6.5.1",
     "@vercel/analytics": "^0.1.11",
diff --git a/yarn.lock b/yarn.lock
index 2e1105a88..fe8498930 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1136,6 +1136,33 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.49.0.tgz#86f79756004a97fa4df866835093f1df3d03c333"
   integrity sha512-1S8uAY/MTJqVx0SC4epBq+N2yhuwtNwLbJYNZyhL2pO1ZVKn5HFXav5T41Ryzy9K9V7ZId2JB2oy/W4aCd9/2w==
 
+"@floating-ui/core@^1.0.0":
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
+  dependencies:
+    "@floating-ui/utils" "^0.2.1"
+
+"@floating-ui/dom@^1.6.1":
+  version "1.6.3"
+  resolved "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@floating-ui/react-dom@^2.0.0":
+  version "2.0.8"
+  resolved "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.0.8.tgz#afc24f9756d1b433e1fe0d047c24bd4d9cefaa5d"
+  integrity sha512-HOdqOt3R3OGeTKidaLvJKcgg75S6tibQ3Tif4eyd91QnIJWr0NLvoXFpJA/j8HqkFSL68GDca9AuyWEHlhyClw==
+  dependencies:
+    "@floating-ui/dom" "^1.6.1"
+
+"@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
+  version "0.2.1"
+  resolved "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
+
 "@fortaine/fetch-event-source@^3.0.6":
   version "3.0.6"
   resolved "https://registry.npmmirror.com/@fortaine/fetch-event-source/-/fetch-event-source-3.0.6.tgz#b8552a2ca2c5202f5699b93a92be0188d422b06e"
@@ -1357,6 +1384,14 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-slot" "1.0.2"
 
+"@radix-ui/react-arrow@1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz#c24f7968996ed934d57fe6cde5d6ec7266e1d25d"
+  integrity sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
 "@radix-ui/react-compose-refs@1.0.1":
   version "1.0.1"
   resolved "https://registry.npmmirror.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz#7ed868b66946aa6030e580b1ffca386dd4d21989"
@@ -1421,6 +1456,22 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-hover-card@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-hover-card/-/react-hover-card-1.0.7.tgz#684bca2504432566357e7157e087051aa3577948"
+  integrity sha512-OcUN2FU0YpmajD/qkph3XzMcK/NmSk9hGWnjV68p6QiZMgILugusgQwnLSDs3oFSJYGKf3Y49zgFedhGh04k9A==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+
 "@radix-ui/react-id@1.0.1":
   version "1.0.1"
   resolved "https://registry.npmmirror.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
@@ -1429,6 +1480,23 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-popper@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
+  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
 "@radix-ui/react-portal@1.0.4":
   version "1.0.4"
   resolved "https://registry.npmmirror.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
@@ -1513,6 +1581,14 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-use-rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz#fde50b3bb9fd08f4a1cd204572e5943c244fcec2"
+  integrity sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/rect" "1.0.1"
+
 "@radix-ui/react-use-size@1.0.1":
   version "1.0.1"
   resolved "https://registry.npmmirror.com/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz#1c5f5fea940a7d7ade77694bb98116fb49f870b2"
@@ -1521,6 +1597,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/rect@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmmirror.com/@radix-ui/rect/-/rect-1.0.1.tgz#bf8e7d947671996da2e30f4904ece343bc4a883f"
+  integrity sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+
 "@remix-run/router@1.8.0":
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/@remix-run/router/-/router-1.8.0.tgz#e848d2f669f601544df15ce2a313955e4bf0bafc"