diff --git a/apps/web/app/components/request-info.tsx b/apps/web/app/components/request-info.tsx
index 877a59d..9e2e061 100644
--- a/apps/web/app/components/request-info.tsx
+++ b/apps/web/app/components/request-info.tsx
@@ -1,7 +1,8 @@
 import { regions } from "@instant-postgres/neon/regions";
-import * as Tooltip from "@radix-ui/react-tooltip";
 import { useFetcher } from "@remix-run/react";
+import { OverlayArrow, Tooltip, TooltipTrigger } from "react-aria-components";
 import type { clientAction } from "~/routes/actions.deploy";
+import { Button } from "./ui/button";
 
 const RequestInfo = () => {
 	const fetcher = useFetcher<typeof clientAction>({ key: "deploy" });
@@ -18,41 +19,37 @@ const RequestInfo = () => {
 				<p className="animate-in fade-in slide-in-from-bottom font-mono text-xs leading-none tracking-extra-tight text-white tracking-extra-tight opacity-90">
 					Provisioned in {timeToProvision} ms, {region}{" "}
 				</p>
-
-				<Tooltip.Provider delayDuration={300}>
-					<Tooltip.Root>
-						<Tooltip.Trigger className="p-2 text-white rounded-[10px]">
-							<svg
-								className="w-4 h-4"
-								role="img"
-								aria-label="Query info"
-								xmlns="http://www.w3.org/2000/svg"
-								width="24"
-								height="24"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth="2"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-							>
-								<circle cx="12" cy="12" r="10" />
-								<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
-								<path d="M12 17h.01" />
+				<TooltipTrigger delay={300}>
+					<Button variant="ghost" size="icon" className="hover:bg-transparent">
+						<svg
+							className="w-4 h-4 text-white"
+							aria-label="Query info"
+							xmlns="http://www.w3.org/2000/svg"
+							width="24"
+							height="24"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							role="img"
+						>
+							<circle cx="12" cy="12" r="10" />
+							<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
+							<path d="M12 17h.01" />
+						</svg>
+					</Button>
+					<Tooltip className="max-w-xs text-center text-white data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[10px] bg-[#222222] px-[15px] py-[10px] text-xs  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]">
+						<OverlayArrow className="fill-[#222222]">
+							<svg width={8} height={8} viewBox="0 0 8 8">
+								<path d="M0 0 L4 4 L8 0" />
 							</svg>
-						</Tooltip.Trigger>
-						<Tooltip.Portal>
-							<Tooltip.Content
-								className="max-w-xs text-center text-white data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[10px] bg-[#222222] px-[15px] py-[10px] text-xs  shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]"
-								sideOffset={0}
-							>
-								Actual time taken to provision the database. It doesn't
-								represent the total round-trip time.
-								<Tooltip.Arrow className="fill-[#222222]" />
-							</Tooltip.Content>
-						</Tooltip.Portal>
-					</Tooltip.Root>
-				</Tooltip.Provider>
+						</OverlayArrow>
+						Actual time taken to provision the database. It doesn't represent
+						the total round-trip time.
+					</Tooltip>
+				</TooltipTrigger>
 			</div>
 		);
 	}
diff --git a/apps/web/app/components/results.tsx b/apps/web/app/components/results.tsx
index a62bfea..bdba0ca 100644
--- a/apps/web/app/components/results.tsx
+++ b/apps/web/app/components/results.tsx
@@ -1,4 +1,3 @@
-import * as Tabs from "@radix-ui/react-tabs";
 import {
 	Table,
 	TableBody,
@@ -16,6 +15,7 @@ import {
 import { Button } from "~/components/ui/button";
 import { useFetcher } from "@remix-run/react";
 import type { clientAction as queryAction } from "~/routes/actions.query";
+import { Tab, TabList, TabPanel, Tabs } from "react-aria-components";
 
 export const Results = () => {
 	const queryFetcher = useFetcher<typeof queryAction>({ key: "query" });
@@ -52,33 +52,27 @@ export const Results = () => {
 	}
 
 	return (
-		<Tabs.Root
-			defaultChecked
-			className="flex flex-col w-full mt-5"
-			defaultValue={"0"}
-		>
-			<Tabs.List className="flex items-center gap-5 w-full border-b border-b-white/10">
+		<Tabs defaultSelectedKey={"0"} className="flex flex-col w-full mt-5">
+			<TabList className="flex items-center gap-5 w-full border-b border-b-white/10 group">
 				{results.map(({ result }, i) => {
 					return (
-						<Tabs.Trigger
-							className="data-[state=active]:border-b-white border-b border-b-transparent py-3"
-							// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-							key={i}
-							value={`${i}`}
+						<Tab
+							key={i.toString()}
+							id={i.toString()}
+							className="border-b border-b-transparent py-3 data-[focus-visible]:ring-2 data-[focus-visible]:ring-white data-[selected]:border-b-white "
 						>
 							{i}: {result?.command || "Error"}
-						</Tabs.Trigger>
+						</Tab>
 					);
 				})}
-			</Tabs.List>
+			</TabList>
 
 			{results.map(({ success, error, queryTime, result }, i) => {
 				return (
-					<Tabs.Content
-						// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-						key={i}
-						className="w-full mt-8 space-y-5 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
-						value={`${i}`}
+					<TabPanel
+						key={i.toString()}
+						id={i.toString()}
+						className="grow w-full mt-8 space-y-5 outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
 					>
 						<div className="w-full flex items-center space-x-2">
 							{success ? (
@@ -136,10 +130,10 @@ export const Results = () => {
 								)}
 							</div>
 						)}
-					</Tabs.Content>
+					</TabPanel>
 				);
 			})}
-		</Tabs.Root>
+		</Tabs>
 	);
 };
 
diff --git a/apps/web/package.json b/apps/web/package.json
index 86be7c7..54e0a20 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -21,8 +21,6 @@
     "@instant-postgres/turnstile": "*",
     "@lezer/highlight": "^1.2.0",
     "@neondatabase/serverless": "^0.9.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
     "@remix-run/cloudflare": "^2.8.1",
     "@remix-run/cloudflare-pages": "^2.8.1",
     "@remix-run/react": "^2.8.1",
@@ -56,7 +54,7 @@
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "tailwindcss-animate": "^1.0.7",
-    "tailwindcss-react-aria-components": "^1.1.2",
+    "tailwindcss-react-aria-components": "^1.1.3",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
     "vite-tsconfig-paths": "^4.2.1",
diff --git a/bun.lockb b/bun.lockb
index 0ac2fe3..4cf2933 100755
Binary files a/bun.lockb and b/bun.lockb differ