diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index d687062..ecfffd9 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -21,6 +21,11 @@
       },
       "globalShortcut": {
         "all": true
+      }, 
+      "app": {
+        "all": true,
+        "hide": true, 
+        "show": true
       }
     },
     "bundle": {
diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
index effbb4d..1c94e49 100644
--- a/src/components/ui/button.tsx
+++ b/src/components/ui/button.tsx
@@ -13,7 +13,7 @@ const buttonVariants = cva(
         destructive:
           "bg-red-500 text-gray-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-gray-50 dark:hover:bg-red-900/90",
         outline:
-          "border border-gray-200 bg-white hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
+          "border border-gray-200 hover:bg-gray-100 hover:text-gray-900 dark:border-gray-800 dark:bg-gray-950 dark:hover:bg-gray-800 dark:hover:text-gray-50",
         secondary:
           "bg-gray-100 text-gray-900 hover:bg-gray-100/80 dark:bg-gray-800 dark:text-gray-50 dark:hover:bg-gray-800/80",
         ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-50",
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 65119a1..5840357 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border border-gray-200 bg-white text-gray-950 shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+      "rounded-lg border text-gray-950 shadow-sm dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
       className
     )}
     {...props}
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
index 080bbeb..136b84a 100644
--- a/src/components/ui/command.tsx
+++ b/src/components/ui/command.tsx
@@ -13,7 +13,7 @@ const Command = React.forwardRef<
   <CommandPrimitive
     ref={ref}
     className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-white text-gray-950 dark:bg-gray-950 dark:text-gray-50",
+      "flex h-full w-full flex-col overflow-hidden rounded-md text-gray-950 dark:bg-gray-950 dark:text-gray-50",
       className
     )}
     {...props}
diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx
index fc5f26b..2d3f4cd 100644
--- a/src/components/ui/dialog.tsx
+++ b/src/components/ui/dialog.tsx
@@ -36,13 +36,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-gray-800 dark:bg-gray-950",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-gray-200 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg dark:border-gray-800 dark:bg-gray-950",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-white transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:focus:ring-gray-300 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400">
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70  transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-gray-950 focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-100 data-[state=open]:text-gray-500 dark:ring-offset-gray-950 dark:focus:ring-gray-300 dark:data-[state=open]:bg-gray-800 dark:data-[state=open]:text-gray-400">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index aae15c8..e4f864d 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:bg-gray-950 dark:ring-offset-gray-950 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300",
+          "flex h-10 w-full rounded-md border border-gray-200 px-3 py-2 text-sm ring-offset-white file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-gray-800 dark:bg-gray-950 dark:ring-offset-gray-950 dark:placeholder:text-gray-400 dark:focus-visible:ring-gray-300",
           className
         )}
         ref={ref}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 8de1369..c6b93a6 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,6 +1,5 @@
+"use client"
 import "@/styles/globals.css"
-import { GeistMono } from "geist/font/mono"
-import { GeistSans } from "geist/font/sans"
 
 import type { AppProps } from "next/app"
 import { Toaster } from "react-hot-toast"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index c301dbf..5c9d873 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,15 +1,8 @@
-import { UnlistenFn } from "@tauri-apps/api/event"
+"use client"
 import type { NextPage } from "next"
 import _ from "lodash"
 import Image from "next/image"
 import { useEffect } from "react"
-import {
-  listenToMonitorStatusUpdate,
-  onTextUpdate,
-  startListening,
-} from "tauri-plugin-clipboard-api"
-import { exit } from '@tauri-apps/api/process';
-
 import Empty from "@/components/Empty"
 import { SearchIcon } from "@/components/Icons"
 import { ClipboardItem } from "@/components/TextCard"
@@ -17,36 +10,58 @@ import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardFooter, CardHeader } from "@/components/ui/card"
 import { Input } from "@/components/ui/input"
 import { useClipStore } from "@/store/clips.store"
+import { UnlistenFn } from "@tauri-apps/api/event"
+
 const Home: NextPage = () => {
   const { updateClips, clips } = useClipStore()
 
-  let unlistenTextUpdate: UnlistenFn
-  let unlistenClipboard: () => Promise<void>
-  let monitorRunning = false
-
   useEffect(() => {
-    const debouncedUpdateClips = _.debounce((newText) => {
-      updateClips(newText)
-    }, 300)
-    const unlistenFunctions = async () => {
-      unlistenTextUpdate = await onTextUpdate((newText) => {
-        console.log("new text::")
-        debouncedUpdateClips(newText)
+    // Check if the window object is available
+    if (typeof window === "undefined") return;
+
+    const loadTauriModules = async () => {
+      const { register } = await import("@tauri-apps/api/globalShortcut")
+      const { appWindow } = await import("@tauri-apps/api/window")
+      const app  = await import("@tauri-apps/api/app")
+      const { listenToMonitorStatusUpdate, onTextUpdate, startListening } = await import("tauri-plugin-clipboard-api")
+      const { exit } = await import('@tauri-apps/api/process')
+
+      let unlistenTextUpdate: UnlistenFn
+      let unlistenClipboard: () => Promise<void>
+      let monitorRunning = false
+
+      await register("CommandOrControl+Shift+V", async () => {
+        await app.show()
+        await appWindow.unminimize()
+        await appWindow.setFocus()
       })
-      unlistenClipboard = await startListening()
-    }
 
-    listenToMonitorStatusUpdate((running) => {
-      monitorRunning = running
-    })
-    unlistenFunctions().catch(console.error)
+      const debouncedUpdateClips = _.debounce((newText) => {
+        updateClips(newText)
+      }, 300)
 
-    return () => {
-      if (unlistenTextUpdate) {
-        unlistenTextUpdate()
+      const unlistenFunctions = async () => {
+        unlistenTextUpdate = await onTextUpdate((newText) => {
+          console.log("new text::")
+          debouncedUpdateClips(newText)
+        })
+        unlistenClipboard = await startListening()
+      }
+
+      listenToMonitorStatusUpdate((running) => {
+        monitorRunning = running
+      })
+      unlistenFunctions().catch(console.error)
+
+      return () => {
+        if (unlistenTextUpdate) {
+          unlistenTextUpdate()
+        }
       }
     }
-  }, [])
+
+    loadTauriModules()
+  }, [updateClips])
 
   return (
     <Card className="w-full h-screen max-w-sm mx-auto grid flex-col">
@@ -86,7 +101,8 @@ const Home: NextPage = () => {
         <footer className="flex justify-between p-4">
           <Button size="sm" className="w-full" variant="ghost"
             onClick={async () => {
-              await exit(1);
+              const { exit } = await import('@tauri-apps/api/process')
+              await exit(1)
             }}
           >
             Quit Pasta 🍝
@@ -97,4 +113,5 @@ const Home: NextPage = () => {
   )
 }
 
+export const dynamic = "force-dynamic";
 export default Home
diff --git a/www/src/components/Footer.tsx b/www/src/components/Footer.tsx
index 0fddc11..9173ffa 100644
--- a/www/src/components/Footer.tsx
+++ b/www/src/components/Footer.tsx
@@ -8,8 +8,8 @@ import Link from 'next/link'
 
 const Footer = () => {
   return (
-    <footer className='bg-blue-50'>
-      <div className='p-6 bg-white mx-auto relative z-10 overflow-hidden border border-b-0 border-gray-200'>
+    <footer className=''>
+      <div className='p-6  mx-auto relative z-10 overflow-hidden border border-b-0'>
         <div className='flex flex-col items-center gap-4 text-center'>
           <Link href='/'>
             {/* <LogoType className='h-7 text-gray-800' /> */}
diff --git a/www/src/components/Navbar.tsx b/www/src/components/Navbar.tsx
index 833f109..2059069 100644
--- a/www/src/components/Navbar.tsx
+++ b/www/src/components/Navbar.tsx
@@ -2,7 +2,7 @@ import Link from 'next/link'
 
 const Navbar = () => {
   return (
-    <div className='sticky inset-x-0 top-0 z-30 w-full transition-all border-b border-gray-200 bg-white/75 backdrop-blur-lg'>
+    <div className='sticky inset-x-0 top-0 z-30 w-full transition-all border-b border-gray-200 backdrop-blur-lg'>
       <div className='max-w-7xl mx-auto lg:px-8 px-6'>
         <div className='relative flex h-14 items-center justify-between sm:justify-center'>
           <Link