diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
index 744050c67262..3847177156dc 100644
--- a/web/src/app/layout.tsx
+++ b/web/src/app/layout.tsx
@@ -23,6 +23,7 @@ import PostHogPageView from "./PostHogPageView";
 import Script from "next/script";
 import { LogoType } from "@/components/logo/Logo";
 import { Hanken_Grotesk } from "next/font/google";
+import { WebVitals } from "./web-vitals";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -206,6 +207,7 @@ export default async function RootLayout({
         <PostHogPageView />
       </Suspense>
       {children}
+      {process.env.NEXT_PUBLIC_POSTHOG_KEY && <WebVitals />}
     </AppProvider>
   );
 }
diff --git a/web/src/app/web-vitals.tsx b/web/src/app/web-vitals.tsx
new file mode 100644
index 000000000000..cec3e26b2293
--- /dev/null
+++ b/web/src/app/web-vitals.tsx
@@ -0,0 +1,12 @@
+"use client";
+import { useReportWebVitals } from "next/web-vitals";
+import { usePostHog } from "posthog-js/react";
+
+export function WebVitals() {
+  const posthog = usePostHog();
+
+  useReportWebVitals((metric) => {
+    posthog.capture(metric.name, metric);
+  });
+  return <></>;
+}
diff --git a/web/src/components/Modal.tsx b/web/src/components/Modal.tsx
index f3037bd415d8..a3fc9d375d06 100644
--- a/web/src/components/Modal.tsx
+++ b/web/src/components/Modal.tsx
@@ -63,7 +63,7 @@ export function Modal({
     <div
       onMouseDown={handleMouseDown}
       className={cn(
-        `fixed inset-0 bg-white bg-opacity-25 backdrop-blur-sm h-full
+        `fixed inset-0 bg-black border boder-border bg-opacity-10 backdrop-blur-sm h-full
         flex items-center justify-center z-[9999] transition-opacity duration-300 ease-in-out`
       )}
     >
@@ -76,7 +76,6 @@ export function Modal({
         }}
         className={`
           bg-background 
-          bg-blue-400
           text-emphasis 
           rounded 
           shadow-2xl