diff --git a/apps/web/playwright/feature-opt-in-banner.e2e.ts b/apps/web/playwright/feature-opt-in-banner.e2e.ts
new file mode 100644
index 0000000000..624b405c29
--- /dev/null
+++ b/apps/web/playwright/feature-opt-in-banner.e2e.ts
@@ -0,0 +1,64 @@
+import { OPT_IN_FEATURES } from "@calcom/features/feature-opt-in/config";
+import { expect } from "@playwright/test";
+import { test } from "./lib/fixtures";
+
+test.afterEach(({ users }) => users.deleteAll());
+
+test.describe("Feature Opt-In Banner", () => {
+  test("shows banner on bookings page and allows user to opt-in to bookings-v3 feature", async ({
+    page,
+    users,
+    prisma,
+  }) => {
+    if (!OPT_IN_FEATURES.some((item) => item.slug === "bookings-v3")) {
+      return;
+    }
+
+    // Enable the bookings-v3 feature flag globally in the database
+    // This is required for the banner to show (globalEnabled must be true)
+    // Use upsert to ensure the feature exists and is enabled
+    await prisma.feature.upsert({
+      where: { slug: "bookings-v3" },
+      update: { enabled: true },
+      create: { slug: "bookings-v3", enabled: true, type: "OPERATIONAL" },
+    });
+
+    // Create a user WITHOUT the bookings-v3 feature flag enabled
+    // By passing an empty array, we override the default user feature flags
+    const user = await users.create({
+      userFeatureFlags: [],
+    });
+
+    await user.apiLogin();
+
+    // Navigate to the bookings page
+    await page.goto("/bookings/upcoming");
+
+    // Wait for the banner to appear
+    const banner = page.getByTestId("feature-opt-in-banner");
+    await expect(banner).toBeVisible({ timeout: 15000 });
+
+    // Click the "Try it" button to open the confirmation dialog
+    const tryItButton = page.getByTestId("feature-opt-in-banner-try-it");
+    await tryItButton.click();
+
+    // Verify the confirmation dialog appears
+    const confirmDialog = page.getByTestId("feature-opt-in-confirm-dialog");
+    await expect(confirmDialog).toBeVisible();
+
+    // Click the "Enable" button to opt-in
+    const enableButton = page.getByTestId("feature-opt-in-confirm-dialog-enable");
+    await enableButton.click();
+
+    // Verify the success dialog appears
+    const successDialogTitle = page.getByTestId("feature-opt-in-success-dialog-title");
+    await expect(successDialogTitle).toBeVisible();
+
+    // Click "View Settings" button to navigate to the settings page
+    const viewSettingsButton = page.getByTestId("feature-opt-in-success-dialog-view-settings");
+    await viewSettingsButton.click();
+
+    // Verify we are redirected to the features settings page
+    await expect(page).toHaveURL(/\/settings\/my-account\/features/);
+  });
+});
diff --git a/packages/features/feature-opt-in/components/FeatureOptInBanner.tsx b/packages/features/feature-opt-in/components/FeatureOptInBanner.tsx
index b24e371d3c..32ebfc5e48 100644
--- a/packages/features/feature-opt-in/components/FeatureOptInBanner.tsx
+++ b/packages/features/feature-opt-in/components/FeatureOptInBanner.tsx
@@ -20,9 +20,13 @@ export function FeatureOptInBanner({
   const { t } = useLocale();
 
   return (
-    <div className="bg-default border-subtle fixed bottom-5 right-5 z-50 max-w-xs rounded-lg border shadow-lg group">
+    <div
+      data-testid="feature-opt-in-banner"
+      className="bg-default border-subtle fixed bottom-5 right-5 z-50 max-w-xs rounded-lg border shadow-lg group">
       <div className="p-4">
-        <h3 className="text-emphasis text-lg font-semibold">{t(featureConfig.i18n.title)}</h3>
+        <h3 data-testid="feature-opt-in-banner-title" className="text-emphasis text-lg font-semibold">
+          {t(featureConfig.i18n.title)}
+        </h3>
         <p className="text-subtle mt-1 text-base">{t(featureConfig.i18n.description)}</p>
 
         <Button
@@ -34,7 +38,12 @@ export function FeatureOptInBanner({
           className="absolute top-1.5 right-1.5 opacity-0 pointer-events-none transition-opacity group-hover:opacity-100 group-hover:pointer-events-auto"
           aria-label={t("close")}></Button>
 
-        <Button className="mt-3" size="sm" color="secondary" onClick={onOpenDialog}>
+        <Button
+          data-testid="feature-opt-in-banner-try-it"
+          className="mt-3"
+          size="sm"
+          color="secondary"
+          onClick={onOpenDialog}>
           {t("try_it")}
         </Button>
       </div>
diff --git a/packages/features/feature-opt-in/components/FeatureOptInConfirmDialog.tsx b/packages/features/feature-opt-in/components/FeatureOptInConfirmDialog.tsx
index 8b080426fc..2aa245e358 100644
--- a/packages/features/feature-opt-in/components/FeatureOptInConfirmDialog.tsx
+++ b/packages/features/feature-opt-in/components/FeatureOptInConfirmDialog.tsx
@@ -214,9 +214,11 @@ export function FeatureOptInConfirmDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={resetAndClose}>
-      <DialogPopup className="sm:max-w-lg">
+      <DialogPopup className="sm:max-w-lg" data-testid="feature-opt-in-confirm-dialog">
         <DialogHeader>
-          <DialogTitle>{t(featureConfig.i18n.name)}</DialogTitle>
+          <DialogTitle data-testid="feature-opt-in-confirm-dialog-title">
+            {t(featureConfig.i18n.name)}
+          </DialogTitle>
           <DialogDescription>{t(featureConfig.i18n.description)}</DialogDescription>
         </DialogHeader>
         <DialogPanel>
@@ -290,7 +292,10 @@ export function FeatureOptInConfirmDialog({
           <DialogClose render={<Button variant="outline" />} onClick={resetAndClose} disabled={isSubmitting}>
             {t("cancel")}
           </DialogClose>
-          <Button onClick={handleConfirm} disabled={isSubmitting || !hasAnySelection}>
+          <Button
+            data-testid="feature-opt-in-confirm-dialog-enable"
+            onClick={handleConfirm}
+            disabled={isSubmitting || !hasAnySelection}>
             {t("enable")}
           </Button>
         </DialogFooter>
diff --git a/packages/features/feature-opt-in/components/FeatureOptInSuccessDialog.tsx b/packages/features/feature-opt-in/components/FeatureOptInSuccessDialog.tsx
index 593ee7d074..db04621b59 100644
--- a/packages/features/feature-opt-in/components/FeatureOptInSuccessDialog.tsx
+++ b/packages/features/feature-opt-in/components/FeatureOptInSuccessDialog.tsx
@@ -30,16 +30,20 @@ export function FeatureOptInSuccessDialog({
 
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogPopup className="sm:max-w-md">
+      <DialogPopup className="sm:max-w-md" data-testid="feature-opt-in-success-dialog">
         <DialogHeader>
-          <DialogTitle>{t("feature_enabled_successfully")}</DialogTitle>
+          <DialogTitle data-testid="feature-opt-in-success-dialog-title">
+            {t("feature_enabled_successfully")}
+          </DialogTitle>
           <DialogDescription>{t("feature_enabled_description")}</DialogDescription>
         </DialogHeader>
         <DialogFooter>
           <DialogClose render={<Button variant="outline" />} onClick={onDismiss}>
             {t("dismiss")}
           </DialogClose>
-          <Button onClick={onViewSettings}>{t("view_settings")}</Button>
+          <Button data-testid="feature-opt-in-success-dialog-view-settings" onClick={onViewSettings}>
+            {t("view_settings")}
+          </Button>
         </DialogFooter>
       </DialogPopup>
     </Dialog>