diff --git a/copilot-widget/index.html b/copilot-widget/index.html
index 659fdff46..e7fa01700 100644
--- a/copilot-widget/index.html
+++ b/copilot-widget/index.html
@@ -10,30 +10,7 @@
     />
   </head>
   <body>
-    <div class="opencopilot-w-full">
-      <header
-        class="opencopilot-w-full opencopilot-shadow-lg opencopilot-flex opencopilot-justify-between opencopilot-items-center"
-      >
-        <div
-          class="opencopilot-container opencopilot-mx-auto opencopilot-px-3 opencopilot-py-5"
-        >
-          <div
-            class="opencopilot-font-sans opencopilot-text-black opencopilot-font-semibold opencopilot-text-lg"
-          >
-            Chat bubble
-          </div>
-        </div>
-        <div>
-          <button id="triggerSelector">toggle the chat widget</button>
-        </div>
-      </header>
-      <div
-        class="opencopilot-flex opencopilot-items-start opencopilot-gap-1 opencopilot-h-full opencopilot-min-h-full opencopilot-max-h-[80vh]"
-      >
-        <main class="opencopilot-flex-1 opencopilot-mt-5">page content</main>
-        <div id="chat-widget" class="opencopilot-h-full opencopilot-max-h-full"></div>
-      </div>
-    </div>
+    <button id="triggerSelector">toggle the chat widget</button>
     <script type="module" src="/src/main.tsx"></script>
     <script>
       window.onload = () => {
@@ -41,7 +18,7 @@
           initialMessage: "Hi Sir",
           token: "1RuzS7w5ceGaN6CiK0J7",
           triggerSelector: "#triggerSelector",
-          apiUrl:"https://cloud.openchat.so/api",
+          apiUrl: "https://cloud.openchat.so/api",
           headers: {
             Authorization: "Bearer your_auth_token_goes_here",
           },
diff --git a/copilot-widget/lib/CopilotWidget.tsx b/copilot-widget/lib/CopilotWidget.tsx
index 1151123a8..3a6e9f22e 100644
--- a/copilot-widget/lib/CopilotWidget.tsx
+++ b/copilot-widget/lib/CopilotWidget.tsx
@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { useWidgetStateContext } from "./contexts/WidgetState";
 import cn from "./utils/cn";
 import ChatScreenWithSfxs from "./screens/ChatScreen";
@@ -10,20 +10,22 @@ export function CopilotWidget({
   triggerSelector: string;
 }) {
   const [open, toggle] = useWidgetStateContext();
+
   useEffect(() => {
     if (IS_SERVER) return;
     const trigger = document.querySelector(triggerSelector);
+
     if (trigger) {
       trigger.addEventListener("click", toggle);
+
+      // Return cleanup function to remove event listener
       return () => trigger.removeEventListener("click", toggle);
     } else {
       console.warn(
-        "the trigger element can't be found,make sure it present in the DOM"
+        "The trigger element can't be found, make sure it is present in the DOM"
       );
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [triggerSelector]);
+  }, [triggerSelector, toggle]);
   return (
     <div
       className={cn(
diff --git a/copilot-widget/lib/components/ChatHeader.tsx b/copilot-widget/lib/components/ChatHeader.tsx
index 8add622e2..8a299baef 100644
--- a/copilot-widget/lib/components/ChatHeader.tsx
+++ b/copilot-widget/lib/components/ChatHeader.tsx
@@ -1,15 +1,49 @@
-import { BiX } from "react-icons/bi";
 import { useWidgetStateContext } from "../contexts/WidgetState";
+import { RxCross2 } from "react-icons/rx";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogTrigger,
+} from "./Dialog";
 
 export default function ChatHeader() {
-  const [,toggle] = useWidgetStateContext()
+  const [, , SetState] = useWidgetStateContext();
   return (
     <header className="opencopilot-fade-in-top opencopilot-border-b opencopilot-border-b-black/10 opencopilot-w-full">
       <div className="opencopilot-p-3">
         <div className="opencopilot-w-full opencopilot-flex opencopilot-items-center opencopilot-justify-between">
-          <div><h1 className="opencopilot-font-semibold opencopilot-text-sm">OpenPilot</h1></div>
+          <div>
+            <h1 className="opencopilot-font-semibold opencopilot-text-sm">
+              OpenPilot
+            </h1>
+          </div>
           <div className="opencopilot-flex opencopilot-items-center opencopilot-gap-3">
-            <button onClick={toggle}><BiX size={19}/></button>
+            <Dialog>
+              <DialogTrigger>
+                <RxCross2 size={19} />
+              </DialogTrigger>
+              <DialogContent>
+                <DialogHeader>Are you sure?</DialogHeader>
+                <div className="opencopilot-space-y-1">
+                  <DialogClose
+                    onClick={() => {
+                      // Close the widget after 500ms, IDK why but it solves the focus trap issue
+                      setTimeout(() => {
+                        SetState(false);
+                      }, 100);
+                    }}
+                    className="opencopilot-block opencopilot-w-full opencopilot-px-2 opencopilot-text-white opencopilot-shadow opencopilot-py-1 opencopilot-border opencopilot-border-transparent opencopilot-rounded-md opencopilot-bg-rose-500"
+                  >
+                    <span>Exit</span>
+                  </DialogClose>
+                  <DialogClose className="opencopilot-block opencopilot-w-full opencopilot-px-2 opencopilot-shadow opencopilot-py-1 opencopilot-border opencopilot-border-accent2 opencopilot-rounded-md opencopilot-text-black">
+                    <span>Cancel</span>
+                  </DialogClose>
+                </div>
+              </DialogContent>
+            </Dialog>
           </div>
         </div>
       </div>
diff --git a/copilot-widget/lib/components/Dialog.tsx b/copilot-widget/lib/components/Dialog.tsx
new file mode 100644
index 000000000..0621afb64
--- /dev/null
+++ b/copilot-widget/lib/components/Dialog.tsx
@@ -0,0 +1,102 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import cn from "@lib/utils/cn";
+const Dialog = DialogPrimitive.Root;
+const DialogClose = DialogPrimitive.Close;
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogOverlay = DialogPrimitive.Overlay;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogOverlay className="opencopilot-absolute opencopilot-inset-0 opencopilot-z-50 opencopilot-bg-black/50 opencopilot-backdrop-blur-sm data-[state=open]:opencopilot-animate-in data-[state=closed]:opencopilot-animate-out data-[state=closed]:opencopilot-fade-out-0 data-[state=open]:opencopilot-fade-in-0">
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "opencopilot-rounded-t-lg opencopilot-z-[100] opencopilot-absolute opencopilot-bottom-0 opencopilot-duration-300 opencopilot-w-full opencopilot-grid opencopilot-max-w-lg opencopilot-bg-white opencopilot-gap-4 opencopilot-shadow-lg opencopilot-p-6 opencopilot-animate-in data-[state=closed]:opencopilot-animate-out data-[state=closed]:opencopilot-fade-out-0 data-[state=open]:opencopilot-fade-in-0 data-[state=closed]:slide-out-to-bottom data-[state=open]:opencopilot-slide-in-from-bottom",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </DialogPrimitive.Content>
+  </DialogOverlay>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "opencopilot-flex opencopilot-flex-col opencopilot-space-y-1.5 opencopilot-text-center sm:opencopilot-text-left",
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "opencopilot-flex opencopilot-flex-col-reverse sm:opencopilot-flex-row sm:opencopilot-justify-end sm:opencopilot-space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "opencopilot-text-lg opencopilot-font-semibold opencopilot-leading-none opencopilot-tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn(
+      "opencopilot-text-sm opencopilot-text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+};
diff --git a/copilot-widget/lib/screens/ChatScreen.tsx b/copilot-widget/lib/screens/ChatScreen.tsx
index 8dc1df820..fb456ccfe 100644
--- a/copilot-widget/lib/screens/ChatScreen.tsx
+++ b/copilot-widget/lib/screens/ChatScreen.tsx
@@ -28,7 +28,7 @@ function ChatScreen() {
   }, [messages, setPos]);
 
   return (
-    <div className="opencopilot-w-full opencopilot-flex opencopilot-h-full opencopilot-flex-col opencopilot-items-start">
+    <div className="opencopilot-w-full opencopilot-flex opencopilot-h-full opencopilot-flex-col opencopilot-items-start opencopilot-relative">
       <ChatHeader />
       <main
         ref={scrollElementRef}
diff --git a/copilot-widget/package.json b/copilot-widget/package.json
index d00cfe776..2640ed15e 100644
--- a/copilot-widget/package.json
+++ b/copilot-widget/package.json
@@ -18,6 +18,7 @@
     "react-dom": "^18.x"
   },
   "devDependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-tooltip": "^1.0.6",
     "@tailwindcss/typography": "^0.5.9",
diff --git a/copilot-widget/pnpm-lock.yaml b/copilot-widget/pnpm-lock.yaml
index 78a97043b..441af3787 100644
--- a/copilot-widget/pnpm-lock.yaml
+++ b/copilot-widget/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 devDependencies:
+  '@radix-ui/react-dialog':
+    specifier: ^1.0.5
+    version: 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
   '@radix-ui/react-popover':
     specifier: ^1.0.6
     version: 1.0.6(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
@@ -929,6 +932,40 @@ packages:
       react: 18.2.0
     dev: true
 
+  /@radix-ui/react-dialog@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.11
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-dismissable-layer': 1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-focus-scope': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-portal': 1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-presence': 1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-slot': 1.0.2(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@types/react': 18.2.21
+      '@types/react-dom': 18.2.7
+      aria-hidden: 1.2.3
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      react-remove-scroll: 2.5.5(@types/react@18.2.21)(react@18.2.0)
+    dev: true
+
   /@radix-ui/react-dismissable-layer@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==}
     peerDependencies:
@@ -954,6 +991,31 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
+  /@radix-ui/react-dismissable-layer@1.0.5(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.11
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.21)(react@18.2.0)
+      '@types/react': 18.2.21
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
   /@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==}
     peerDependencies:
@@ -991,6 +1053,29 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
+  /@radix-ui/react-focus-scope@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.11
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.21)(react@18.2.0)
+      '@types/react': 18.2.21
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
   /@radix-ui/react-id@1.0.1(@types/react@18.2.21)(react@18.2.0):
     resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==}
     peerDependencies:
@@ -1092,6 +1177,27 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: true
 
+  /@radix-ui/react-portal@1.0.4(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.11
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0)
+      '@types/react': 18.2.21
+      '@types/react-dom': 18.2.7
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: true
+
   /@radix-ui/react-presence@1.0.1(@types/react-dom@18.2.7)(@types/react@18.2.21)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==}
     peerDependencies:
diff --git a/copilot-widget/src/index.css b/copilot-widget/src/index.css
index 75f2037f6..b39fb4edf 100644
--- a/copilot-widget/src/index.css
+++ b/copilot-widget/src/index.css
@@ -22,7 +22,7 @@
 :root {
   --opencopilot-primary-clr: #703ea8;
   --opencopilot-accent-clr: #f8f7f8;
-  --opencopilot-accnet-2-clr: #817f81;
+  --opencopilot-accent-2-clr: #817f81;
   --opencopilot-primary-light-clr: rgba(0, 87, 255, 0.1);
 }
 
diff --git a/copilot-widget/tailwind.config.ts b/copilot-widget/tailwind.config.ts
index 5a2200c7d..3c5517391 100644
--- a/copilot-widget/tailwind.config.ts
+++ b/copilot-widget/tailwind.config.ts
@@ -13,7 +13,7 @@ const config: Config = {
       primary: "var(--opencopilot-primary-clr)",
       "primary-light": "var(--opencopilot-primary-light-clr)",
       accent: "var(--opencopilot-accent-clr)",
-      accent2: "var(--opencopilot-accnet-2-clr)",
+      accent2: "var(--opencopilot-accent-2-clr)",
       white,
       transparent,
       black,
