diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index ddcb409a..7a526ab8 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -8,6 +8,7 @@ import { ClerkProviderClient } from "@/components/custom/clerk/clerk-provider-cl
 import { JotaiProvider } from "@/lib/providers/jotai-provider"
 import { Toaster } from "@/components/ui/sonner"
 import { ConfirmProvider } from "@/lib/providers/confirm-provider"
+import { DeepLinkProvider } from "@/lib/providers/deep-link-provider"
 
 const fontSans = FontSans({
 	subsets: ["latin"],
@@ -27,16 +28,18 @@ export default function RootLayout({
 	return (
 		<html lang="en" className="h-full w-full" suppressHydrationWarning>
 			<ClerkProviderClient>
-				<body className={cn("h-full w-full font-sans antialiased", fontSans.variable)}>
-					<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-						<JotaiProvider>
-							<ConfirmProvider>
-								{children}
-								<Toaster expand={false} />
-							</ConfirmProvider>
-						</JotaiProvider>
-					</ThemeProvider>
-				</body>
+				<DeepLinkProvider>
+					<body className={cn("h-full w-full font-sans antialiased", fontSans.variable)}>
+						<ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+							<JotaiProvider>
+								<ConfirmProvider>
+									{children}
+									<Toaster expand={false} />
+								</ConfirmProvider>
+							</JotaiProvider>
+						</ThemeProvider>
+					</body>
+				</DeepLinkProvider>
 			</ClerkProviderClient>
 		</html>
 	)
diff --git a/web/lib/providers/deep-link-provider.tsx b/web/lib/providers/deep-link-provider.tsx
new file mode 100644
index 00000000..11236507
--- /dev/null
+++ b/web/lib/providers/deep-link-provider.tsx
@@ -0,0 +1,35 @@
+"use client"
+
+import React, { useEffect, ReactNode } from "react"
+
+interface DeepLinkProviderProps {
+	children: ReactNode
+}
+
+export function DeepLinkProvider({ children }: DeepLinkProviderProps) {
+	useEffect(() => {
+		const eventHandlers: { [key: string]: (event: Event) => void } = {
+			click: (event: Event) => {
+				const e = event as MouseEvent
+				console.log("Click event:", { x: e.clientX, y: e.clientY })
+			},
+			keydown: (event: Event) => {
+				const e = event as KeyboardEvent
+				console.log("Keydown event:", { key: e.key, code: e.code })
+			}
+		}
+
+		// just a react thing
+		Object.entries(eventHandlers).forEach(([eventType, handler]) => {
+			window.addEventListener(eventType, handler)
+		})
+
+		return () => {
+			Object.entries(eventHandlers).forEach(([eventType, handler]) => {
+				window.removeEventListener(eventType, handler)
+			})
+		}
+	}, [])
+
+	return <>{children}</>
+}
