diff --git a/dashboard/.vscode/settings.json b/dashboard/.vscode/settings.json
new file mode 100644
index 000000000..00ad71fba
--- /dev/null
+++ b/dashboard/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib"
+}
\ No newline at end of file
diff --git a/dashboard/app/(copilot)/_parts/LogoMenu.tsx b/dashboard/app/(copilot)/_parts/LogoMenu.tsx
index db37c103a..b8aad75ec 100644
--- a/dashboard/app/(copilot)/_parts/LogoMenu.tsx
+++ b/dashboard/app/(copilot)/_parts/LogoMenu.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ChevronRight } from "lucide-react";
 import { Link } from "@/lib/router-events";
-import { useSearchModal } from "@/app/_store/searchModal";
+import { useSearchModal } from "@/app/search-modal-atom";
 
 // i'm bad at naming things
 export default function LogoMenu() {
diff --git a/dashboard/app/(copilot)/_parts/SearchBtn.tsx b/dashboard/app/(copilot)/_parts/SearchBtn.tsx
index be23e7bae..1c1a2be86 100644
--- a/dashboard/app/(copilot)/_parts/SearchBtn.tsx
+++ b/dashboard/app/(copilot)/_parts/SearchBtn.tsx
@@ -1,8 +1,7 @@
 'use client';
-import { useSearchModal } from '@/app/_store/searchModal';
+import { useSearchModal } from '@/app/search-modal-atom';
 import { Button } from '@/components/ui/button';
 import { Search } from 'lucide-react'
-import React from 'react'
 
 
 export function SearchBtn() {
diff --git a/dashboard/app/(copilot)/copilot/[copilot_id]/CopilotWidget.tsx b/dashboard/app/(copilot)/copilot/[copilot_id]/CopilotWidget.tsx
index 9a4a94106..9da9c1e2f 100644
--- a/dashboard/app/(copilot)/copilot/[copilot_id]/CopilotWidget.tsx
+++ b/dashboard/app/(copilot)/copilot/[copilot_id]/CopilotWidget.tsx
@@ -29,6 +29,9 @@ export default function Widget({
                     "X-Copilot": "copilot"
                 },
             }}
+            containerProps={{
+                className: "border rounded-lg overflow-hidden",
+            }}
         >
             <CopilotWidget triggerSelector="#triggerSelector" />
         </Root>
diff --git a/dashboard/app/(copilot)/copilot/[copilot_id]/page.tsx b/dashboard/app/(copilot)/copilot/[copilot_id]/page.tsx
index 5d3297287..ce2479a41 100644
--- a/dashboard/app/(copilot)/copilot/[copilot_id]/page.tsx
+++ b/dashboard/app/(copilot)/copilot/[copilot_id]/page.tsx
@@ -13,7 +13,7 @@ import { Link } from "@/lib/router-events";
 import React from "react";
 import { useCopilot } from "../_context/CopilotProvider";
 import dynamic from "next/dynamic";
-import { useSearchModal } from "@/app/_store/searchModal";
+import { useSearchModal } from "@/app/search-modal-atom";
 
 const Widget = dynamic(() => import("./CopilotWidget"));
 
@@ -38,17 +38,20 @@ function InstallationSection() {
           </div>
         </AccordionTrigger>
         <AccordionContent className="px-8 py-6">
-          <p className="mb-2 font-medium">
+          <p className="mb-1 font-medium">
             Paste this code snippet before the closing <strong> {`</body>`}</strong> tag on all pages you want the widget to
             appear. <a href="https://docs.opencopilot.so/widget/embed">Read more</a>
           </p>
+          <p className="mb-2 font-medium">
+          <b>Note that: </b> the widget is fluid by default and will take the full width of the container. You can change this by passing a containerProps object to the initAiCoPilot function.
+          </p>
           <CodeBlock
             code={`
 <script src="${baseUrl}/pilot.js"></script>
 <script> 
       const options = {
         apiUrl: "${baseUrl}/backend", 
-        initialMessages: ["How are the things"],
+        initialMessage: "How are the things",
         token: "${CopilotToken}", 
         triggerSelector: "#triggerSelector", 
         headers: { 
@@ -58,6 +61,19 @@ function InstallationSection() {
         },
         user:{
           name:"Default User"
+        },
+        containerProps:{
+          style:{
+            // optional: you can pass any style you want to the container
+            width: "400px",
+            height: "500px",
+            position: "fixed",
+            bottom: "0",
+            right: "0",
+            zIndex: "9999",
+          },
+          className:"your class name" // if u are using tailwindcss or any className you can use the class name here
+          }
         }
       }
       window.addEventListener("DOMContentLoaded", ()=>initAiCoPilot(options));
@@ -111,7 +127,7 @@ export default function CopilotPage() {
   const [, setSearch] = useSearchModal()
   return (
     <div className="flex h-full w-full flex-col overflow-hidden">
-      <HeaderShell className="justify-between bg-white">
+      <HeaderShell className="justify-between">
         <h1 className="text-lg font-bold text-accent-foreground">
           {CopilotName}
         </h1>
diff --git a/dashboard/app/(main)/_parts/Search.tsx b/dashboard/app/(main)/_parts/Search.tsx
index 091407994..41641666b 100644
--- a/dashboard/app/(main)/_parts/Search.tsx
+++ b/dashboard/app/(main)/_parts/Search.tsx
@@ -34,8 +34,8 @@ export function Search() {
 
   return (
     <div className="flex items-center justify-between gap-5 py-5">
-      <div className="flex flex-1 max-w-sm gap-5 items-center">
-        <Label htmlFor="search-copilots">
+      <div className="flex-1 max-w-md relative">
+        <Label htmlFor="search-copilots" className="absolute left-2 top-1/2 -translate-y-1/2">
           <SearchIcon className="h-5 w-5 opacity-50" />
         </Label>
         <DebounceInput
@@ -53,7 +53,7 @@ export function Search() {
             });
           }}
           id="search-copilots"
-          className="w-full font-medium rounded-none border-x-0 border-t-0 px-0 border-b shadow-none focus-visible:!ring-transparent"
+          className="font-medium rounded-none border-x-0 ps-8 border-t-0 border-b shadow-none focus-visible:!ring-transparent"
           placeholder="Search Copilots..."
         />
       </div>
diff --git a/dashboard/app/(main)/_parts/SearchModal.tsx b/dashboard/app/(main)/_parts/SearchModal.tsx
index 2f49d2b81..ab400af1d 100644
--- a/dashboard/app/(main)/_parts/SearchModal.tsx
+++ b/dashboard/app/(main)/_parts/SearchModal.tsx
@@ -1,11 +1,9 @@
 "use client";
-import * as React from "react";
 import {
   Bot,
   BotIcon,
   FileStack,
   HelpCircle,
-  User,
 } from "lucide-react";
 import {
   CommandDialog,
@@ -22,7 +20,7 @@ import useSwr from "swr";
 import { listCopilots } from "@/data/copilot";
 import { useRouter } from "next/navigation";
 import { Link } from "@/lib/router-events";
-import { useSearchModal } from "@/app/_store/searchModal";
+import { useSearchModal } from "@/app/search-modal-atom";
 
 export function SearchModal() {
   const [open, setOpen] = useSearchModal();
diff --git a/dashboard/app/_store/confetti.ts b/dashboard/app/_store/confetti.ts
deleted file mode 100644
index 73cf4da75..000000000
--- a/dashboard/app/_store/confetti.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-'use client';
-import { atom, useAtom } from "jotai";
-
-export const confettiAtom = atom(false);
-
-export function useConfetti() {
-    const [confetti, setConfetti] = useAtom(confettiAtom);
-    function pop(seconds: number = 5) {
-        setConfetti(true);
-        setTimeout(() => setConfetti(false), seconds * 1000);
-    }
-    return { confetti, pop, stop: () => setConfetti(false) };
-}
\ No newline at end of file
diff --git a/dashboard/app/globals.css b/dashboard/app/globals.css
index eefd79517..f30ef2e03 100644
--- a/dashboard/app/globals.css
+++ b/dashboard/app/globals.css
@@ -74,7 +74,7 @@
 
 @layer base {
   * {
-    @apply !border-border;
+    @apply border-border;
   }
   body {
     @apply bg-background text-foreground;
@@ -135,10 +135,22 @@
   color: hsl(var(--destructive));
   margin-left: 0.25rem;
 }
-#opencopilot-aicopilot {
-  position: static !important;
-}
-
 .reset-input {
   @apply m-0 h-10 rounded-md border border-border bg-background bg-white px-3 py-2 text-sm shadow-sm ring-offset-accent transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus:outline-none focus-visible:border-primary focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 data-[valid=false]:!border-destructive;
-}
\ No newline at end of file
+}
+
+.glass {
+  position: relative;
+  overflow: hidden;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(5px);
+}
+.glass::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: inherit;
+  color: transparent;
+  backdrop-filter: inherit;
+}
diff --git a/dashboard/app/layout.tsx b/dashboard/app/layout.tsx
index 21fef5206..55823b839 100644
--- a/dashboard/app/layout.tsx
+++ b/dashboard/app/layout.tsx
@@ -10,13 +10,8 @@ import { SWRProvider } from "./swr-provider";
 import { Toaster } from "@/components/ui/toaster";
 import { HandleOnComplete } from "@/lib/router-events";
 import { TopLoader } from "@/lib/Toploader";
-import dynamic from "next/dynamic";
 import { JotaiProvider } from "./jotai-provider";
 
-const Confetti = dynamic(() => import("@/components/domain/confetti-canvas"), {
-  ssr: false,
-});
-
 const opensans = Open_Sans({
   subsets: ["latin"],
   weight: ["400", "500", "600", "700", "800"],
@@ -39,7 +34,7 @@ export default function RootLayout({
           <body
             className={cn(
               opensans.className,
-              "h-screen min-h-[100svh] max-h-[100svh] w-screen overflow-hidden scroll-smooth bg-background text-accent-foreground antialiased",
+              "h-svh min-h-svh max-h-svh w-svw overflow-hidden scroll-smooth bg-background text-accent-foreground antialiased",
               IS_DEV && "debug-screens",
             )}
           >
@@ -64,7 +59,6 @@ export default function RootLayout({
             <TopLoader
               color="hsl(var(--primary))"
             />
-            <Confetti />
             <HandleOnComplete />
           </body>
         </html>
diff --git a/dashboard/app/not-found.tsx b/dashboard/app/not-found.tsx
new file mode 100644
index 000000000..dce6660d3
--- /dev/null
+++ b/dashboard/app/not-found.tsx
@@ -0,0 +1,32 @@
+'use client';
+import { Button } from "@/components/ui/button"
+import Image from "next/image"
+import { useRouter } from "next/navigation"
+
+export const metadata = {
+    title: "404",
+    description: "Page not found",
+    keywords: "404, page not found, not found",
+    robots: "noindex, nofollow",
+}
+
+export default function NotFoundPage() {
+    const router = useRouter()
+    return (
+        <div className="w-full h-full flex-center">
+            <div className="flex flex-col items-center gap-2 justify-center">
+                <div className="aspect-square relative w-56 mx-auto">
+                    <Image
+                        src='/404.gif'
+                        alt="404"
+                        fill
+                    />
+                </div>
+                <h1 className="text-5xl font-bold">404</h1>
+                <Button onClick={router.back}>
+                    Go back
+                </Button>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/dashboard/app/_store/searchModal.ts b/dashboard/app/search-modal-atom.ts
similarity index 100%
rename from dashboard/app/_store/searchModal.ts
rename to dashboard/app/search-modal-atom.ts
diff --git a/dashboard/components/domain/HeaderShell.tsx b/dashboard/components/domain/HeaderShell.tsx
index 8f471dde4..b0edd4b8d 100644
--- a/dashboard/components/domain/HeaderShell.tsx
+++ b/dashboard/components/domain/HeaderShell.tsx
@@ -8,7 +8,7 @@ export function HeaderShell({
   return (
     <header
       className={cn(
-        "flex h-header w-full shrink-0 flex-row items-center border-b border-border px-8 bg-white",
+        "flex h-header w-full shrink-0 flex-row items-center border-b border-border px-8 bg-white glass",
         className,
       )}
       {...props}
diff --git a/dashboard/components/domain/confetti-canvas.tsx b/dashboard/components/domain/confetti-canvas.tsx
deleted file mode 100644
index dcf29a48c..000000000
--- a/dashboard/components/domain/confetti-canvas.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client';
-import React from 'react'
-import { useWindowSize } from 'react-use'
-import { default as ReactConfetti } from 'react-confetti'
-import { useConfetti } from '@/app/_store/confetti';
-
-export default function Confetti() {
-    const { width, height } = useWindowSize()
-    const { confetti } = useConfetti()
-    return (
-        confetti ? <ReactConfetti
-            width={width}
-            height={height}
-            numberOfPieces={500}
-            recycle={false}
-        /> : null
-    )
-}
\ No newline at end of file
diff --git a/dashboard/package.json b/dashboard/package.json
index a4e652813..68621c5db 100644
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -48,7 +48,6 @@
     "nprogress": "^0.2.0",
     "react": "^18.2.0",
     "react-beautiful-dnd": "^13.1.1",
-    "react-confetti": "^6.1.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-error-boundary": "^4.0.11",
diff --git a/dashboard/pnpm-lock.yaml b/dashboard/pnpm-lock.yaml
index 9b04449e4..73f0f492c 100644
--- a/dashboard/pnpm-lock.yaml
+++ b/dashboard/pnpm-lock.yaml
@@ -116,9 +116,6 @@ dependencies:
   react-beautiful-dnd:
     specifier: ^13.1.1
     version: 13.1.1(react-dom@18.2.0)(react@18.2.0)
-  react-confetti:
-    specifier: ^6.1.0
-    version: 6.1.0(react@18.2.0)
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
@@ -4568,16 +4565,6 @@ packages:
       - react-native
     dev: false
 
-  /react-confetti@6.1.0(react@18.2.0):
-    resolution: {integrity: sha512-7Ypx4vz0+g8ECVxr88W9zhcQpbeujJAVqL14ZnXJ3I23mOI9/oBVTQ3dkJhUmB0D6XOtCZEM6N0Gm9PMngkORw==}
-    engines: {node: '>=10.18'}
-    peerDependencies:
-      react: ^16.3.0 || ^17.0.1 || ^18.0.0
-    dependencies:
-      react: 18.2.0
-      tween-functions: 1.2.0
-    dev: false
-
   /react-debounce-input@3.3.0(react@18.2.0):
     resolution: {integrity: sha512-VEqkvs8JvY/IIZvh71Z0TC+mdbxERvYF33RcebnodlsUZ8RSgyKe2VWaHXv4+/8aoOgXLxWrdsYs2hDhcwbUgA==}
     peerDependencies:
@@ -5333,10 +5320,6 @@ packages:
     resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==}
     dev: false
 
-  /tween-functions@1.2.0:
-    resolution: {integrity: sha512-PZBtLYcCLtEcjL14Fzb1gSxPBeL7nWvGhO5ZFPGqziCcr8uvHp0NDmdjBchp6KHL+tExcg0m3NISmKxhU394dA==}
-    dev: false
-
   /type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
diff --git a/dashboard/public/404.gif b/dashboard/public/404.gif
new file mode 100644
index 000000000..2b698fccc
Binary files /dev/null and b/dashboard/public/404.gif differ