diff --git a/apps/api/v2/src/lib/services/organization-membership.service.ts b/apps/api/v2/src/lib/services/organization-membership.service.ts
new file mode 100644
index 00000000000000..59be6027c12e9d
--- /dev/null
+++ b/apps/api/v2/src/lib/services/organization-membership.service.ts
@@ -0,0 +1,12 @@
+import { OrganizationsRepository } from "@/modules/organizations/index/organizations.repository";
+import { Injectable } from "@nestjs/common";
+
+import { OrganizationMembershipService as BaseOrganizationMembershipService } from "@calcom/platform-libraries/organizations";
+
+@Injectable()
+export class OrganizationMembershipService extends BaseOrganizationMembershipService {
+    constructor(organizationsRepository: OrganizationsRepository) {
+        super({ organizationRepository: organizationsRepository });
+    }
+}
+
diff --git a/apps/api/v2/src/modules/auth/guards/organizations/is-admin-api-enabled.guard.ts b/apps/api/v2/src/modules/auth/guards/organizations/is-admin-api-enabled.guard.ts
index 0f7e2ddb83fe98..410ce2902f8192 100644
--- a/apps/api/v2/src/modules/auth/guards/organizations/is-admin-api-enabled.guard.ts
+++ b/apps/api/v2/src/modules/auth/guards/organizations/is-admin-api-enabled.guard.ts
@@ -54,7 +54,7 @@ export class IsAdminAPIEnabledGuard implements CanActivate {
       }
     }
 
-    const org = await this.organizationsRepository.findById(Number(organizationId));
+    const org = await this.organizationsRepository.findById({ id: Number(organizationId) });
 
     if (org?.isOrganization && !org?.isPlatform) {
       const adminAPIAccessIsEnabledInOrg = await this.organizationsRepository.fetchOrgAdminApiStatus(
diff --git a/apps/api/v2/src/modules/auth/guards/organizations/is-org.guard.ts b/apps/api/v2/src/modules/auth/guards/organizations/is-org.guard.ts
index 31d287bfdf7a75..df144a5d881d0b 100644
--- a/apps/api/v2/src/modules/auth/guards/organizations/is-org.guard.ts
+++ b/apps/api/v2/src/modules/auth/guards/organizations/is-org.guard.ts
@@ -55,7 +55,7 @@ export class IsOrgGuard implements CanActivate {
       }
     }
 
-    const org = await this.organizationsRepository.findById(Number(organizationId));
+    const org = await this.organizationsRepository.findById({ id: Number(organizationId) });
 
     if (org?.isOrganization) {
       canAccess = true;
diff --git a/apps/api/v2/src/modules/auth/guards/organizations/is-webhook-in-org.guard.ts b/apps/api/v2/src/modules/auth/guards/organizations/is-webhook-in-org.guard.ts
index 1dc6e1dc958ede..7fe3e03e544d80 100644
--- a/apps/api/v2/src/modules/auth/guards/organizations/is-webhook-in-org.guard.ts
+++ b/apps/api/v2/src/modules/auth/guards/organizations/is-webhook-in-org.guard.ts
@@ -43,7 +43,7 @@ export class IsWebhookInOrg implements CanActivate {
       }
     }
 
-    const org = await this.organizationsRepository.findById(Number(organizationId));
+    const org = await this.organizationsRepository.findById({ id: Number(organizationId) });
 
     if (org?.isOrganization) {
       const isWebhookInOrg = await this.organizationsWebhooksRepository.findWebhook(
diff --git a/apps/api/v2/src/modules/organizations/index/organizations.repository.ts b/apps/api/v2/src/modules/organizations/index/organizations.repository.ts
index 00035ca40f5af3..ba9b0eecde294a 100644
--- a/apps/api/v2/src/modules/organizations/index/organizations.repository.ts
+++ b/apps/api/v2/src/modules/organizations/index/organizations.repository.ts
@@ -4,23 +4,17 @@ import { PrismaWriteService } from "@/modules/prisma/prisma-write.service";
 import { StripeService } from "@/modules/stripe/stripe.service";
 import { Injectable } from "@nestjs/common";
 
+import { OrganizationRepository } from "@calcom/platform-libraries/organizations";
 import { Prisma } from "@calcom/prisma/client";
 
 @Injectable()
-export class OrganizationsRepository {
+export class OrganizationsRepository extends OrganizationRepository {
   constructor(
     private readonly dbRead: PrismaReadService,
     private readonly dbWrite: PrismaWriteService,
     private readonly stripeService: StripeService
-  ) {}
-
-  async findById(organizationId: number) {
-    return this.dbRead.prisma.team.findUnique({
-      where: {
-        id: organizationId,
-        isOrganization: true,
-      },
-    });
+  ) {
+    super({ prismaClient: dbWrite.prisma });
   }
 
   async findByIds(organizationIds: number[]) {
diff --git a/apps/api/v2/src/modules/organizations/index/organizations.service.ts b/apps/api/v2/src/modules/organizations/index/organizations.service.ts
index 07c2205a0d26ef..b6e63c49271cbb 100644
--- a/apps/api/v2/src/modules/organizations/index/organizations.service.ts
+++ b/apps/api/v2/src/modules/organizations/index/organizations.service.ts
@@ -6,7 +6,7 @@ export class OrganizationsService {
   constructor(private readonly organizationsRepository: OrganizationsRepository) {}
 
   async isPlatform(organizationId: number) {
-    const organization = await this.organizationsRepository.findById(organizationId);
+    const organization = await this.organizationsRepository.findById({ id: organizationId });
     return organization?.isPlatform;
   }
 }
diff --git a/apps/api/v2/src/modules/organizations/organizations.module.ts b/apps/api/v2/src/modules/organizations/organizations.module.ts
index 58b5347796ee45..c0464345538d3a 100644
--- a/apps/api/v2/src/modules/organizations/organizations.module.ts
+++ b/apps/api/v2/src/modules/organizations/organizations.module.ts
@@ -13,6 +13,7 @@ import { ZoomVideoService } from "@/modules/conferencing/services/zoom-video.ser
 import { CredentialsRepository } from "@/modules/credentials/credentials.repository";
 import { EmailModule } from "@/modules/email/email.module";
 import { EmailService } from "@/modules/email/email.service";
+import { OrganizationMembershipService } from "@/lib/services/organization-membership.service";
 import { MembershipsModule } from "@/modules/memberships/memberships.module";
 import { OAuthClientRepository } from "@/modules/oauth-clients/oauth-client.repository";
 import { UserOOORepository } from "@/modules/ooo/repositories/ooo.repository";
@@ -108,6 +109,7 @@ import { Module } from "@nestjs/common";
   ],
   providers: [
     OrganizationsRepository,
+    OrganizationMembershipService,
     OrganizationsTeamsRepository,
     OrganizationsService,
     OrganizationsTeamsService,
@@ -200,4 +202,4 @@ import { Module } from "@nestjs/common";
     OrganizationsEventTypesPrivateLinksController,
   ],
 })
-export class OrganizationsModule {}
+export class OrganizationsModule { }
diff --git a/apps/api/v2/src/modules/organizations/organizations/services/managed-organizations.service.ts b/apps/api/v2/src/modules/organizations/organizations/services/managed-organizations.service.ts
index 303563d1ca8e08..f423fb35acb1ba 100644
--- a/apps/api/v2/src/modules/organizations/organizations/services/managed-organizations.service.ts
+++ b/apps/api/v2/src/modules/organizations/organizations/services/managed-organizations.service.ts
@@ -103,12 +103,12 @@ export class ManagedOrganizationsService {
   }
 
   private async isManagerOrganizationPlatform(managerOrganizationId: number) {
-    const organization = await this.organizationsRepository.findById(managerOrganizationId);
+    const organization = await this.organizationsRepository.findById({ id: managerOrganizationId });
     return !!organization?.isPlatform;
   }
 
   async getManagedOrganization(managedOrganizationId: number) {
-    const organization = await this.organizationsRepository.findById(managedOrganizationId);
+    const organization = await this.organizationsRepository.findById({ id: managedOrganizationId });
     if (!organization) {
       throw new NotFoundException(`Managed organization with id=${managedOrganizationId} does not exist.`);
     }
diff --git a/apps/api/v2/src/modules/organizations/teams/memberships/e2e/organizations-teams-memberships.controller.e2e-spec.ts b/apps/api/v2/src/modules/organizations/teams/memberships/e2e/organizations-teams-memberships.controller.e2e-spec.ts
index c2616685bfd635..315e8a5f08d2fa 100644
--- a/apps/api/v2/src/modules/organizations/teams/memberships/e2e/organizations-teams-memberships.controller.e2e-spec.ts
+++ b/apps/api/v2/src/modules/organizations/teams/memberships/e2e/organizations-teams-memberships.controller.e2e-spec.ts
@@ -418,6 +418,209 @@ describe("Organizations Teams Memberships Endpoints", () => {
         .expect(404);
     });
 
+    // Auto-accept tests
+    describe("auto-accept based on email domain", () => {
+      let orgWithAutoAccept: Team;
+      let subteamWithAutoAccept: Team;
+      let userWithMatchingEmail: User;
+      let userWithUppercaseEmail: User;
+      let userWithMatchingEmailForOverride: User;
+      let userWithNonMatchingEmail: User;
+
+      beforeAll(async () => {
+        // Create org with auto-accept settings
+        orgWithAutoAccept = await organizationsRepositoryFixture.create({
+          name: `auto-accept-org-${randomString()}`,
+          isOrganization: true,
+        });
+
+        // Update organizationSettings with orgAutoAcceptEmail
+        await organizationsRepositoryFixture.updateSettings(orgWithAutoAccept.id, {
+          orgAutoAcceptEmail: "acme.com",
+          isOrganizationVerified: true,
+          isOrganizationConfigured: true,
+        });
+
+        // Create subteam
+        subteamWithAutoAccept = await teamsRepositoryFixture.create({
+          name: `auto-accept-subteam-${randomString()}`,
+          isOrganization: false,
+          parent: { connect: { id: orgWithAutoAccept.id } },
+        });
+
+        // Create event type with assignAllTeamMembers
+        await eventTypesRepositoryFixture.createTeamEventType({
+          schedulingType: "COLLECTIVE",
+          team: { connect: { id: subteamWithAutoAccept.id } },
+          title: "Auto Accept Event Type",
+          slug: "auto-accept-event-type",
+          length: 30,
+          assignAllTeamMembers: true,
+          bookingFields: [],
+          locations: [],
+        });
+
+        // Create users
+        userWithMatchingEmail = await userRepositoryFixture.create({
+          email: `alice@acme.com`,
+          username: `alice-${randomString()}`,
+        });
+
+        userWithUppercaseEmail = await userRepositoryFixture.create({
+          email: `bob@ACME.COM`,
+          username: `bob-${randomString()}`,
+        });
+
+        userWithMatchingEmailForOverride = await userRepositoryFixture.create({
+          email: `david@acme.com`,
+          username: `david-${randomString()}`,
+        });
+
+        userWithNonMatchingEmail = await userRepositoryFixture.create({
+          email: `charlie@external.com`,
+          username: `charlie-${randomString()}`,
+        });
+
+        // Add users to org
+        await membershipsRepositoryFixture.create({
+          role: "MEMBER",
+          accepted: true,
+          user: { connect: { id: userWithMatchingEmail.id } },
+          team: { connect: { id: orgWithAutoAccept.id } },
+        });
+
+        await membershipsRepositoryFixture.create({
+          role: "MEMBER",
+          accepted: true,
+          user: { connect: { id: userWithUppercaseEmail.id } },
+          team: { connect: { id: orgWithAutoAccept.id } },
+        });
+
+        await membershipsRepositoryFixture.create({
+          role: "MEMBER",
+          accepted: true,
+          user: { connect: { id: userWithMatchingEmailForOverride.id } },
+          team: { connect: { id: orgWithAutoAccept.id } },
+        });
+
+        await membershipsRepositoryFixture.create({
+          role: "MEMBER",
+          accepted: true,
+          user: { connect: { id: userWithNonMatchingEmail.id } },
+          team: { connect: { id: orgWithAutoAccept.id } },
+        });
+
+        // Create profiles for users
+        await profileRepositoryFixture.create({
+          uid: `usr-${userWithMatchingEmail.id}`,
+          username: userWithMatchingEmail.username || `user-${userWithMatchingEmail.id}`,
+          organization: { connect: { id: orgWithAutoAccept.id } },
+          user: { connect: { id: userWithMatchingEmail.id } },
+        });
+
+        await profileRepositoryFixture.create({
+          uid: `usr-${userWithUppercaseEmail.id}`,
+          username: userWithUppercaseEmail.username || `user-${userWithUppercaseEmail.id}`,
+          organization: { connect: { id: orgWithAutoAccept.id } },
+          user: { connect: { id: userWithUppercaseEmail.id } },
+        });
+
+        await profileRepositoryFixture.create({
+          uid: `usr-${userWithMatchingEmailForOverride.id}`,
+          username: userWithMatchingEmailForOverride.username || `user-${userWithMatchingEmailForOverride.id}`,
+          organization: { connect: { id: orgWithAutoAccept.id } },
+          user: { connect: { id: userWithMatchingEmailForOverride.id } },
+        });
+
+        await profileRepositoryFixture.create({
+          uid: `usr-${userWithNonMatchingEmail.id}`,
+          username: userWithNonMatchingEmail.username || `user-${userWithNonMatchingEmail.id}`,
+          organization: { connect: { id: orgWithAutoAccept.id } },
+          user: { connect: { id: userWithNonMatchingEmail.id } },
+        });
+
+        // Make user an admin of the org for API access
+        await membershipsRepositoryFixture.create({
+          role: "ADMIN",
+          accepted: true,
+          user: { connect: { id: user.id } },
+          team: { connect: { id: orgWithAutoAccept.id } },
+        });
+      });
+
+      it("should auto-accept when email matches orgAutoAcceptEmail", async () => {
+        const response = await request(app.getHttpServer())
+          .post(`/v2/organizations/${orgWithAutoAccept.id}/teams/${subteamWithAutoAccept.id}/memberships`)
+          .send({
+            userId: userWithMatchingEmail.id,
+            role: "MEMBER",
+          } satisfies CreateOrgTeamMembershipDto)
+          .expect(201);
+
+        const responseBody: ApiSuccessResponse<TeamMembershipOutput> = response.body;
+        expect(responseBody.data.accepted).toBe(true);
+
+        // Verify EventTypes assignment
+        const eventTypes = await eventTypesRepositoryFixture.getAllTeamEventTypes(
+          subteamWithAutoAccept.id
+        );
+        const eventTypeWithAssignAll = eventTypes.find((et) => et.assignAllTeamMembers);
+        expect(eventTypeWithAssignAll).toBeTruthy();
+        const userIsHost = eventTypeWithAssignAll?.hosts.some((h) => h.userId === userWithMatchingEmail.id);
+        expect(userIsHost).toBe(true);
+      });
+
+      it("should handle case-insensitive email domain matching", async () => {
+        // User with email="bob@ACME.COM" should match orgAutoAcceptEmail="acme.com"
+        const response = await request(app.getHttpServer())
+          .post(`/v2/organizations/${orgWithAutoAccept.id}/teams/${subteamWithAutoAccept.id}/memberships`)
+          .send({
+            userId: userWithUppercaseEmail.id,
+            role: "MEMBER",
+          } satisfies CreateOrgTeamMembershipDto)
+          .expect(201);
+
+        const responseBody: ApiSuccessResponse<TeamMembershipOutput> = response.body;
+        expect(responseBody.data.accepted).toBe(true);
+      });
+
+      it("should ALWAYS auto-accept when email matches, even if accepted:false", async () => {
+        const response = await request(app.getHttpServer())
+          .post(`/v2/organizations/${orgWithAutoAccept.id}/teams/${subteamWithAutoAccept.id}/memberships`)
+          .send({
+            userId: userWithMatchingEmailForOverride.id,
+            role: "MEMBER",
+            accepted: false,
+          } satisfies CreateOrgTeamMembershipDto)
+          .expect(201);
+
+        const responseBody: ApiSuccessResponse<TeamMembershipOutput> = response.body;
+        // Should override to true because email matches
+        expect(responseBody.data.accepted).toBe(true);
+      });
+
+      it("should NOT auto-accept when email does not match orgAutoAcceptEmail", async () => {
+        const response = await request(app.getHttpServer())
+          .post(`/v2/organizations/${orgWithAutoAccept.id}/teams/${subteamWithAutoAccept.id}/memberships`)
+          .send({
+            userId: userWithNonMatchingEmail.id,
+            role: "MEMBER",
+          } satisfies CreateOrgTeamMembershipDto)
+          .expect(201);
+
+        const responseBody: ApiSuccessResponse<TeamMembershipOutput> = response.body;
+        expect(responseBody.data.accepted).toBe(false);
+      });
+
+      afterAll(async () => {
+        await userRepositoryFixture.deleteByEmail(userWithMatchingEmail.email);
+        await userRepositoryFixture.deleteByEmail(userWithUppercaseEmail.email);
+        await userRepositoryFixture.deleteByEmail(userWithMatchingEmailForOverride.email);
+        await userRepositoryFixture.deleteByEmail(userWithNonMatchingEmail.email);
+        await organizationsRepositoryFixture.delete(orgWithAutoAccept.id);
+      });
+    });
+
     afterAll(async () => {
       await userRepositoryFixture.deleteByEmail(user.email);
       await userRepositoryFixture.deleteByEmail(userToInviteViaApi.email);
diff --git a/apps/api/v2/src/modules/organizations/teams/memberships/organizations-teams-memberships.controller.ts b/apps/api/v2/src/modules/organizations/teams/memberships/organizations-teams-memberships.controller.ts
index 8b9a77366d8e5c..72747f4a90c86e 100644
--- a/apps/api/v2/src/modules/organizations/teams/memberships/organizations-teams-memberships.controller.ts
+++ b/apps/api/v2/src/modules/organizations/teams/memberships/organizations-teams-memberships.controller.ts
@@ -12,6 +12,7 @@ import { IsAdminAPIEnabledGuard } from "@/modules/auth/guards/organizations/is-a
 import { IsOrgGuard } from "@/modules/auth/guards/organizations/is-org.guard";
 import { RolesGuard } from "@/modules/auth/guards/roles/roles.guard";
 import { IsTeamInOrg } from "@/modules/auth/guards/teams/is-team-in-org.guard";
+import { OrganizationMembershipService } from "@/lib/services/organization-membership.service";
 import { OrganizationsRepository } from "@/modules/organizations/index/organizations.repository";
 import { CreateOrgTeamMembershipDto } from "@/modules/organizations/teams/memberships/inputs/create-organization-team-membership.input";
 import { UpdateOrgTeamMembershipDto } from "@/modules/organizations/teams/memberships/inputs/update-organization-team-membership.input";
@@ -58,8 +59,9 @@ export class OrganizationsTeamsMembershipsController {
 
   constructor(
     private organizationsTeamsMembershipsService: OrganizationsTeamsMembershipsService,
-    private readonly organizationsRepository: OrganizationsRepository
-  ) {}
+    private readonly organizationsRepository: OrganizationsRepository,
+    private readonly orgMembershipService: OrganizationMembershipService
+  ) { }
 
   @Get("/")
   @ApiOperation({ summary: "Get all memberships" })
@@ -168,6 +170,9 @@ export class OrganizationsTeamsMembershipsController {
     };
   }
 
+
+  // TODO: Refactor to use inviteMembersWithNoInviterPermissionCheck when it is moved to a Service
+  // See: packages/trpc/server/routers/viewer/teams/inviteMember/inviteMember.handler.ts
   @Roles("TEAM_ADMIN")
   @PlatformPlan("ESSENTIALS")
   @Post("/")
@@ -184,7 +189,21 @@ export class OrganizationsTeamsMembershipsController {
       throw new UnprocessableEntityException("User is not part of the Organization");
     }
 
-    const membership = await this.organizationsTeamsMembershipsService.createOrgTeamMembership(teamId, data);
+    const shouldAutoAccept = await this.orgMembershipService.shouldAutoAccept({
+      organizationId: orgId,
+      userEmail: user.email,
+    });
+
+    // ALWAYS override when email matches - prevents pending memberships
+    // Remember organizations expect added team member to automatically start receiving bookings for the team event
+    const acceptedStatus = shouldAutoAccept ? true : (data.accepted ?? false);
+
+    const membershipData = { ...data, accepted: acceptedStatus };
+    const membership = await this.organizationsTeamsMembershipsService.createOrgTeamMembership(
+      teamId,
+      membershipData
+    );
+
     if (membership.accepted) {
       try {
         await updateNewTeamMemberEventTypes(user.id, teamId);
diff --git a/apps/api/v2/test/fixtures/repository/organization.repository.fixture.ts b/apps/api/v2/test/fixtures/repository/organization.repository.fixture.ts
index 83b674979982c3..1cac91ceb9b137 100644
--- a/apps/api/v2/test/fixtures/repository/organization.repository.fixture.ts
+++ b/apps/api/v2/test/fixtures/repository/organization.repository.fixture.ts
@@ -37,6 +37,20 @@ export class OrganizationRepositoryFixture {
     });
   }
 
+  async updateSettings(
+    teamId: Team["id"],
+    settings: {
+      orgAutoAcceptEmail?: string;
+      isOrganizationVerified?: boolean;
+      isOrganizationConfigured?: boolean;
+    }
+  ) {
+    return this.prismaWriteClient.organizationSettings.update({
+      where: { organizationId: teamId },
+      data: settings,
+    });
+  }
+
   async delete(teamId: Team["id"]) {
     return await this.prismaWriteClient.$transaction(async (prisma) => {
       await prisma.organizationSettings.delete({
diff --git a/apps/api/v2/tsconfig.json b/apps/api/v2/tsconfig.json
index 03473dcc053136..de9060cfa28338 100644
--- a/apps/api/v2/tsconfig.json
+++ b/apps/api/v2/tsconfig.json
@@ -29,7 +29,8 @@
       "@calcom/platform-libraries/conferencing": ["../../../packages/platform/libraries/conferencing.ts"],
       "@calcom/platform-libraries/repositories": ["../../../packages/platform/libraries/repositories.ts"],
       "@calcom/platform-libraries/bookings": ["../../../packages/platform/libraries/bookings.ts"],
-      "@calcom/platform-libraries/private-links": ["../../../packages/platform/libraries/private-links.ts"]
+      "@calcom/platform-libraries/private-links": ["../../../packages/platform/libraries/private-links.ts"],
+      "@calcom/platform-libraries/organizations": ["../../../packages/platform/libraries/organizations.ts"]
     },
     "incremental": true,
     "skipLibCheck": true,
diff --git a/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx b/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx
index e9ae0e7de08f17..21a6665ca53683 100644
--- a/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/(main-nav)/availability/page.tsx
@@ -6,7 +6,7 @@ import { cookies, headers } from "next/headers";
 import { redirect } from "next/navigation";
 
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { PermissionCheckService } from "@calcom/features/pbac/services/permission-check.service";
 import { AvailabilitySliderTable } from "@calcom/features/timezone-buddy/components/AvailabilitySliderTable";
 import { getScheduleListItemData } from "@calcom/lib/schedules/transformers/getScheduleListItemData";
@@ -61,8 +61,9 @@ const Page = async ({ searchParams: _searchParams }: PageProps) => {
   };
 
   const organizationId = session?.user?.profile?.organizationId ?? session?.user.org?.id;
+  const organizationRepository = getOrganizationRepository();
   const isOrgPrivate = organizationId
-    ? await OrganizationRepository.checkIfPrivate({
+    ? await organizationRepository.checkIfPrivate({
         orgId: organizationId,
       })
     : false;
diff --git a/apps/web/app/(use-page-wrapper)/onboarding/getting-started/page.tsx b/apps/web/app/(use-page-wrapper)/onboarding/getting-started/page.tsx
index 29ec2170dc6082..e96495d6a80ef3 100644
--- a/apps/web/app/(use-page-wrapper)/onboarding/getting-started/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/onboarding/getting-started/page.tsx
@@ -26,11 +26,9 @@ const ServerPage = async () => {
     return redirect("/auth/login");
   }
 
-  // Hello {username} || there. Not sure how to do this nicely with i18n just yet
-  const userName = session.user.name || "there";
   const userEmail = session.user.email || "";
 
-  return <OnboardingView userName={userName} userEmail={userEmail} />;
+  return <OnboardingView userEmail={userEmail} />;
 };
 
 export default ServerPage;
diff --git a/apps/web/app/(use-page-wrapper)/onboarding/personal/profile/page.tsx b/apps/web/app/(use-page-wrapper)/onboarding/personal/profile/page.tsx
index dc709084234e9a..da56b018205998 100644
--- a/apps/web/app/(use-page-wrapper)/onboarding/personal/profile/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/onboarding/personal/profile/page.tsx
@@ -7,7 +7,7 @@ import { APP_NAME } from "@calcom/lib/constants";
 
 import { buildLegacyRequest } from "@lib/buildLegacyCtx";
 
-import { PersonalProfileView } from "~/onboarding/personal/profile/personal-profile-view";
+import { PersonalSettingsView } from "~/onboarding/personal/settings/personal-settings-view";
 
 export const generateMetadata = async () => {
   return await _generateMetadata(
@@ -28,7 +28,7 @@ const ServerPage = async () => {
 
   const userEmail = session.user.email || "";
 
-  return <PersonalProfileView userEmail={userEmail} />;
+  return <PersonalSettingsView userEmail={userEmail} />;
 };
 
 export default ServerPage;
diff --git a/apps/web/app/(use-page-wrapper)/onboarding/personal/video/page.tsx b/apps/web/app/(use-page-wrapper)/onboarding/personal/video/page.tsx
deleted file mode 100644
index 1ec119859f5589..00000000000000
--- a/apps/web/app/(use-page-wrapper)/onboarding/personal/video/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { cookies, headers } from "next/headers";
-import { redirect } from "next/navigation";
-
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { APP_NAME } from "@calcom/lib/constants";
-
-import { buildLegacyRequest } from "@lib/buildLegacyCtx";
-
-import { PersonalVideoView } from "~/onboarding/personal/video/personal-video-view";
-
-export const generateMetadata = async () => {
-  return await _generateMetadata(
-    (t) => `${APP_NAME} - ${t("connect_video")}`,
-    () => "",
-    true,
-    undefined,
-    "/onboarding/personal/video"
-  );
-};
-
-const ServerPage = async () => {
-  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
-
-  if (!session?.user?.id) {
-    return redirect("/auth/login");
-  }
-
-  const userEmail = session.user.email || "";
-
-  return <PersonalVideoView userEmail={userEmail} />;
-};
-
-export default ServerPage;
diff --git a/apps/web/app/(use-page-wrapper)/onboarding/teams/brand/page.tsx b/apps/web/app/(use-page-wrapper)/onboarding/teams/brand/page.tsx
deleted file mode 100644
index 72f40aaa215189..00000000000000
--- a/apps/web/app/(use-page-wrapper)/onboarding/teams/brand/page.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { _generateMetadata } from "app/_utils";
-import { cookies, headers } from "next/headers";
-import { redirect } from "next/navigation";
-
-import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
-import { APP_NAME } from "@calcom/lib/constants";
-
-import { buildLegacyRequest } from "@lib/buildLegacyCtx";
-
-import { TeamBrandView } from "~/onboarding/teams/brand/team-brand-view";
-
-export const generateMetadata = async () => {
-  return await _generateMetadata(
-    (t) => `${APP_NAME} - ${t("team_brand")}`,
-    () => "",
-    true,
-    undefined,
-    "/onboarding/teams/brand"
-  );
-};
-
-const ServerPage = async () => {
-  const session = await getServerSession({ req: buildLegacyRequest(await headers(), await cookies()) });
-
-  if (!session?.user?.id) {
-    return redirect("/auth/login");
-  }
-
-  const userEmail = session.user.email || "";
-
-  return <TeamBrandView userEmail={userEmail} />;
-};
-
-export default ServerPage;
diff --git a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/page.tsx
index 5e35f5db785a2b..e4f8941d3564e6 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(admin-layout)/admin/organizations/[id]/edit/page.tsx
@@ -4,12 +4,13 @@ import { z } from "zod";
 
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import { OrgForm } from "@calcom/features/ee/organizations/pages/settings/admin/AdminOrgEditPage";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 const orgIdSchema = z.object({ id: z.coerce.number() });
 
 export const generateMetadata = async ({ params }: { params: Params }) => {
+  const organizationRepository = getOrganizationRepository();
   const input = orgIdSchema.safeParse(await params);
   if (!input.success) {
     return await _generateMetadata(
@@ -21,7 +22,7 @@ export const generateMetadata = async ({ params }: { params: Params }) => {
     );
   }
 
-  const org = await OrganizationRepository.adminFindById({ id: input.data.id });
+  const org = await organizationRepository.adminFindById({ id: input.data.id });
 
   return await _generateMetadata(
     (t) => `${t("editing_org")}: ${org.name}`,
@@ -33,11 +34,12 @@ export const generateMetadata = async ({ params }: { params: Params }) => {
 };
 
 const Page = async ({ params }: { params: Params }) => {
+  const organizationRepository = getOrganizationRepository();
   const input = orgIdSchema.safeParse(await params);
 
   if (!input.success) throw new Error("Invalid access");
 
-  const org = await OrganizationRepository.adminFindById({ id: input.data.id });
+  const org = await organizationRepository.adminFindById({ id: input.data.id });
   const t = await getTranslate();
   return (
     <SettingsHeader title={`${t("editing_org")}: ${org.name}`} description={t("admin_orgs_edit_description")}>
diff --git a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/page.tsx b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/page.tsx
index 028a767e7e20b3..1359594aae9428 100644
--- a/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/page.tsx
+++ b/apps/web/app/(use-page-wrapper)/settings/(settings-layout)/organizations/teams/other/(main-page)/page.tsx
@@ -2,7 +2,7 @@ import { _generateMetadata, getTranslate } from "app/_utils";
 import { redirect } from "next/navigation";
 
 import { OtherTeamsListing } from "@calcom/features/ee/organizations/pages/components/OtherTeamsListing";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import SettingsHeader from "@calcom/features/settings/appDir/SettingsHeader";
 
 import { validateUserHasOrg } from "../../../actions/validateUserHasOrg";
@@ -24,11 +24,12 @@ const Page = async () => {
     redirect("/auth/login");
   }
   const organizationId = session?.user?.org?.id;
+  const organizationRepository = getOrganizationRepository();
   const otherTeams = organizationId
-    ? await OrganizationRepository.findTeamsInOrgIamNotPartOf({
-        userId: session?.user.id,
-        parentId: organizationId,
-      })
+    ? await organizationRepository.findTeamsInOrgIamNotPartOf({
+      userId: session?.user.id,
+      parentId: organizationId,
+    })
     : [];
 
   return (
diff --git a/apps/web/lib/pages/auth/verify-email.test.ts b/apps/web/lib/pages/auth/verify-email.test.ts
index d11e370cdd4f4a..ad568abde0765c 100644
--- a/apps/web/lib/pages/auth/verify-email.test.ts
+++ b/apps/web/lib/pages/auth/verify-email.test.ts
@@ -10,7 +10,6 @@ import { moveUserToMatchingOrg } from "./verify-email";
 
 // TODO: This test passes but coverage is very low.
 vi.mock("@calcom/trpc/server/routers/viewer/teams/inviteMember/inviteMember.handler");
-vi.mock("@calcom/features/ee/organizations/repositories/OrganizationRepository");
 vi.mock("@calcom/prisma", () => {
   return {
     prisma: vi.fn(),
@@ -37,7 +36,7 @@ describe("moveUserToMatchingOrg", () => {
   });
 
   it("should not proceed if no matching organization is found", async () => {
-    organizationScenarios.OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.fakeNoMatch();
+    organizationScenarios.organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.fakeNoMatch();
 
     await moveUserToMatchingOrg({ email });
 
@@ -64,7 +63,7 @@ describe("moveUserToMatchingOrg", () => {
         requestedSlug: "requested-test-org",
       };
 
-      organizationScenarios.OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.fakeReturnOrganization(
+      organizationScenarios.organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.fakeReturnOrganization(
         org,
         { email }
       );
@@ -85,7 +84,7 @@ describe("moveUserToMatchingOrg", () => {
         requestedSlug: "requested-test-org",
       };
 
-      organizationScenarios.OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.fakeReturnOrganization(
+      organizationScenarios.organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.fakeReturnOrganization(
         org,
         { email }
       );
diff --git a/apps/web/lib/pages/auth/verify-email.ts b/apps/web/lib/pages/auth/verify-email.ts
index 720f1b09b99f72..0b11c692f038d1 100644
--- a/apps/web/lib/pages/auth/verify-email.ts
+++ b/apps/web/lib/pages/auth/verify-email.ts
@@ -2,7 +2,7 @@ import type { NextApiRequest, NextApiResponse } from "next";
 import { z } from "zod";
 
 import dayjs from "@calcom/dayjs";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { StripeBillingService } from "@calcom/features/ee/billing/stripe-billing-service";
 import { OnboardingPathService } from "@calcom/features/onboarding/lib/onboarding-path.service";
 import { WEBAPP_URL } from "@calcom/lib/constants";
@@ -21,7 +21,8 @@ const USER_ALREADY_EXISTING_MESSAGE = "A User already exists with this email";
 
 // TODO: To be unit tested
 export async function moveUserToMatchingOrg({ email }: { email: string }) {
-  const org = await OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({ email });
+  const organizationRepository = getOrganizationRepository();
+  const org = await organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({ email });
 
   if (!org) {
     return;
diff --git a/apps/web/lib/video/[uid]/getServerSideProps.ts b/apps/web/lib/video/[uid]/getServerSideProps.ts
index 5d28cc47cd7d70..a278f3f4c479a4 100644
--- a/apps/web/lib/video/[uid]/getServerSideProps.ts
+++ b/apps/web/lib/video/[uid]/getServerSideProps.ts
@@ -8,7 +8,7 @@ import {
 } from "@calcom/app-store/dailyvideo/lib/VideoApiAdapter";
 import { getServerSession } from "@calcom/features/auth/lib/getServerSession";
 import { BookingRepository } from "@calcom/features/bookings/repositories/BookingRepository";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { EventTypeRepository } from "@calcom/features/eventtypes/repositories/eventTypeRepository";
 import { getCalVideoReference } from "@calcom/features/get-cal-video-reference";
 import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
@@ -167,8 +167,10 @@ export async function getServerSideProps(context: GetServerSidePropsContext) {
       ).profile
     : null;
 
+  const organizationRepository = getOrganizationRepository();
+
   const calVideoLogo = profile?.organization
-    ? await OrganizationRepository.findCalVideoLogoByOrgId({ id: profile.organization.id })
+    ? await organizationRepository.findCalVideoLogoByOrgId({ id: profile.organization.id })
     : null;
 
   //daily.co calls have a 14 days exit buffer when a user enters a call when it's not available it will trigger the modals
diff --git a/apps/web/modules/onboarding/components/OnboardingCard.tsx b/apps/web/modules/onboarding/components/OnboardingCard.tsx
new file mode 100644
index 00000000000000..72ca7500db1bb6
--- /dev/null
+++ b/apps/web/modules/onboarding/components/OnboardingCard.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+import { SkeletonText } from "@calcom/ui/components/skeleton";
+
+type OnboardingCardProps = {
+  title: string;
+  subtitle: string;
+  children: ReactNode;
+  footer: ReactNode;
+  isLoading?: boolean;
+};
+
+export const OnboardingCard = ({ title, subtitle, children, footer, isLoading }: OnboardingCardProps) => {
+  return (
+    <div className="relative flex h-full min-h-0 w-full flex-col">
+      {/* Card Header */}
+      <div className="flex w-full gap-1.5 px-5 py-4">
+        <div className="flex w-full flex-col gap-1">
+          <h1 className="font-cal text-xl font-semibold leading-6">{title}</h1>
+          <p className="text-subtle text-sm font-medium leading-tight">{subtitle}</p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="flex min-h-0 w-full flex-1 flex-col gap-4">
+        {isLoading ? (
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            <SkeletonText className="h-40 w-full" />
+            <SkeletonText className="h-40 w-full" />
+          </div>
+        ) : (
+          children
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="flex w-full items-center justify-start px-5 py-4">{footer}</div>
+    </div>
+  );
+};
+
diff --git a/apps/web/modules/onboarding/components/OnboardingLayout.tsx b/apps/web/modules/onboarding/components/OnboardingLayout.tsx
new file mode 100644
index 00000000000000..1a538362f0c1a6
--- /dev/null
+++ b/apps/web/modules/onboarding/components/OnboardingLayout.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import { signOut } from "next-auth/react";
+import { Children, type ReactNode } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
+import { Logo } from "@calcom/ui/components/logo";
+
+type OnboardingLayoutProps = {
+  userEmail: string;
+  currentStep: 1 | 2 | 3;
+  children: ReactNode;
+};
+
+export const OnboardingLayout = ({ userEmail, currentStep, children }: OnboardingLayoutProps) => {
+  const { t } = useLocale();
+
+  const handleSignOut = () => {
+    signOut({ callbackUrl: "/auth/logout" });
+  };
+
+  // Extract children as array
+  const childrenArray = Children.toArray(children);
+  const column1 = childrenArray[0];
+  const column2 = childrenArray[1];
+
+  return (
+    <div className="bg-muted flex min-h-screen w-full flex-col items-center justify-between overflow-clip rounded-[12px] px-6 py-10">
+      {/* Logo and container - centered */}
+      <div className="flex w-full flex-1 flex-col items-center justify-center gap-8">
+        <Logo className="h-5 w-auto shrink-0" />
+        <div className="border-subtle bg-default grid w-full max-w-[1130px] grid-cols-1 gap-6 overflow-hidden rounded-2xl border px-12 py-10 xl:h-[690px] xl:grid-cols-[40%_1fr] xl:pl-10 xl:pr-0">
+          {/* Column 1 - Always visible, 40% on xl+ */}
+          <div className="flex min-h-0 flex-col">{column1}</div>
+          {/* Column 2 - Hidden on mobile, visible on xl+, 60% on xl+ */}
+          {column2 && (
+            <div className="hidden h-full max-h-full min-h-0 flex-col overflow-hidden xl:flex">{column2}</div>
+          )}
+        </div>
+      </div>
+
+      {/* Footer with progress dots and sign out */}
+      <div className="flex w-full flex-col items-center justify-center gap-4 px-10 py-8">
+        <div className="flex items-center gap-2">
+          {[1, 2, 3].map((step) => (
+            <div key={step} className="relative flex h-2 w-2 shrink-0 items-center justify-center">
+              <div
+                className={`absolute inset-0 rounded-full ${
+                  step <= currentStep ? "bg-emphasis" : "bg-muted"
+                }`}
+              />
+              {step <= currentStep && <div className="bg-emphasis absolute h-1 w-1 rounded-full" />}
+            </div>
+          ))}
+        </div>
+        <Button onClick={handleSignOut} color="minimal" className="text-subtle h-7">
+          {t("sign_out")}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
diff --git a/apps/web/modules/onboarding/components/onboarding-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-browser-view.tsx
new file mode 100644
index 00000000000000..37362668712702
--- /dev/null
+++ b/apps/web/modules/onboarding/components/onboarding-browser-view.tsx
@@ -0,0 +1,134 @@
+"use client";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Avatar } from "@calcom/ui/components/avatar";
+import { Button } from "@calcom/ui/components/button";
+import { Icon, type IconName } from "@calcom/ui/components/icon";
+
+type OnboardingBrowserViewProps = {
+  avatar?: string | null;
+  name?: string;
+  bio?: string;
+  username?: string | null;
+  teamSlug?: string;
+};
+
+export const OnboardingBrowserView = ({
+  avatar,
+  name,
+  bio,
+  username,
+  teamSlug,
+}: OnboardingBrowserViewProps) => {
+  const { t } = useLocale();
+  const webappUrl = WEBAPP_URL.replace(/^https?:\/\//, "");
+  const displayUrl =
+    teamSlug !== undefined ? `${webappUrl}/team/${teamSlug || ""}` : `${webappUrl}/${username || ""}`;
+
+  const events: Array<{
+    title: string;
+    description: string;
+    duration: number;
+    icon: IconName;
+  }> = [
+    {
+      title: t("onboarding_browser_view_demo"),
+      description: t("onboarding_browser_view_demo_description"),
+      duration: 15,
+      icon: "bell",
+    },
+    {
+      title: t("onboarding_browser_view_quick_meeting"),
+      description: t("onboarding_browser_view_quick_meeting_description"),
+      duration: 15,
+      icon: "bell",
+    },
+    {
+      title: t("onboarding_browser_view_longer_meeting"),
+      description: t("onboarding_browser_view_longer_meeting_description"),
+      duration: 30,
+      icon: "clock",
+    },
+    {
+      title: t("in_person_meeting"),
+      description: t("onboarding_browser_view_in_person_description"),
+      duration: 120,
+      icon: "map-pin",
+    },
+    {
+      title: t("onboarding_browser_view_ask_question"),
+      description: t("onboarding_browser_view_ask_question_description"),
+      duration: 15,
+      icon: "message-circle",
+    },
+  ];
+  return (
+    <div className="bg-default border-subtle hidden h-full w-full flex-col rounded-l-2xl border xl:flex">
+      {/* Browser header */}
+      <div className="border-subtle flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b bg-white p-3">
+        {/* Navigation buttons */}
+        <div className="flex shrink-0 items-center gap-4 opacity-50">
+          <Icon name="arrow-left" className="text-subtle h-4 w-4" />
+          <Icon name="arrow-right" className="text-subtle h-4 w-4" />
+          <Icon name="rotate-cw" className="text-subtle h-4 w-4" />
+        </div>
+        <div className="bg-muted flex w-full items-center gap-2 rounded-[32px] px-3 py-2">
+          <Icon name="lock" className="text-subtle h-4 w-4" />
+          <p className="text-default text-sm font-medium leading-tight">{displayUrl}</p>
+        </div>
+        <Icon name="ellipsis-vertical" className="text-subtle h-4 w-4" />
+      </div>
+      {/* Content */}
+      <div className="bg-muted h-full pl-11 pt-11">
+        <div className="bg-default border-muted flex h-full w-full flex-col overflow-hidden rounded-xl border">
+          {/* Profile Header */}
+          <div className="border-subtle flex flex-col gap-4 border-b p-4">
+            <div className="flex flex-col items-start gap-4">
+              <Avatar
+                size="lg"
+                imageSrc={avatar || undefined}
+                alt={name || ""}
+                className="border-2 border-white"
+              />
+              <div className="flex flex-col gap-2">
+                <h2 className="text-emphasis text-xl font-semibold leading-tight">
+                  {name || t("your_name")}
+                </h2>
+                <p className="text-default text-sm leading-normal">
+                  {bio || t("onboarding_browser_view_default_bio")}
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Events List */}
+          <div className="flex flex-col overflow-y-auto">
+            {events.map((event, index) => (
+              <div key={event.title} className="opacity-30">
+                {index > 0 && <div className="border-subtle h-px border-t" />}
+                <div className="flex items-center justify-between gap-3 px-5 py-4">
+                  <div className="flex min-w-0 flex-1 flex-col gap-1">
+                    <div className="flex items-center gap-1">
+                      <h3 className="text-default text-sm font-semibold leading-none">{event.title}</h3>
+                      <div className="bg-emphasis flex h-4 items-center justify-center gap-1 rounded-md px-1">
+                        <Icon name={event.icon} className="text-emphasis h-3 w-3" />
+                        <span className="text-emphasis text-xs font-medium leading-none">
+                          {event.duration} {t("minute_timeUnit")}
+                        </span>
+                      </div>
+                    </div>
+                    <p className="text-subtle text-sm font-medium leading-tight">{event.description}</p>
+                  </div>
+                  <Button color="secondary" size="sm" EndIcon="arrow-right">
+                    {t("book_now")}
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx
new file mode 100644
index 00000000000000..f45e562c50f5a5
--- /dev/null
+++ b/apps/web/modules/onboarding/components/onboarding-calendar-browser-view.tsx
@@ -0,0 +1,92 @@
+"use client";
+
+import { WEBAPP_URL } from "@calcom/lib/constants";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Icon, type IconName } from "@calcom/ui/components/icon";
+
+export const OnboardingCalendarBrowserView = () => {
+  const { t } = useLocale();
+  const webappUrl = WEBAPP_URL.replace(/^https?:\/\//, "");
+
+  const calendarIntegrations: Array<{
+    name: string;
+    description: string;
+    icon: IconName;
+  }> = [
+    {
+      name: t("google_calendar"),
+      description: t("onboarding_calendar_browser_view_google_description"),
+      icon: "calendar",
+    },
+    {
+      name: t("outlook_calendar"),
+      description: t("onboarding_calendar_browser_view_outlook_description"),
+      icon: "mail",
+    },
+    {
+      name: t("apple_calendar"),
+      description: t("onboarding_calendar_browser_view_apple_description"),
+      icon: "calendar-days",
+    },
+  ];
+
+  return (
+    <div className="bg-default border-subtle hidden h-full w-full flex-col rounded-l-2xl border xl:flex">
+      {/* Browser header */}
+      <div className="border-subtle flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b bg-white p-3">
+        {/* Navigation buttons */}
+        <div className="flex shrink-0 items-center gap-4 opacity-50">
+          <Icon name="arrow-left" className="text-subtle h-4 w-4" />
+          <Icon name="arrow-right" className="text-subtle h-4 w-4" />
+          <Icon name="rotate-cw" className="text-subtle h-4 w-4" />
+        </div>
+        <div className="bg-muted flex w-full items-center gap-2 rounded-[32px] px-3 py-2">
+          <Icon name="lock" className="text-subtle h-4 w-4" />
+          <p className="text-default text-sm font-medium leading-tight">{webappUrl}/settings/calendars</p>
+        </div>
+        <Icon name="ellipsis-vertical" className="text-subtle h-4 w-4" />
+      </div>
+      {/* Content */}
+      <div className="bg-muted h-full pl-11 pt-11">
+        <div className="bg-default border-muted flex h-full w-full flex-col overflow-hidden rounded-xl border">
+          {/* Header */}
+          <div className="border-subtle flex flex-col gap-4 border-b p-4">
+            <div className="flex flex-col items-start gap-2">
+              <h2 className="text-emphasis text-xl font-semibold leading-tight">
+                {t("connect_your_calendar")}
+              </h2>
+              <p className="text-subtle text-sm leading-normal">
+                {t("onboarding_calendar_browser_view_subtitle")}
+              </p>
+            </div>
+          </div>
+
+          {/* Calendar Integrations List */}
+          <div className="flex flex-col overflow-y-auto">
+            {calendarIntegrations.map((integration, index) => (
+              <div key={integration.name} className="opacity-30">
+                {index > 0 && <div className="border-subtle h-px border-t" />}
+                <div className="flex items-center justify-between gap-3 px-5 py-4">
+                  <div className="flex min-w-0 flex-1 items-center gap-3">
+                    <div className="bg-muted flex h-10 w-10 shrink-0 items-center justify-center rounded-lg">
+                      <Icon name={integration.icon} className="text-emphasis h-5 w-5" />
+                    </div>
+                    <div className="flex min-w-0 flex-1 flex-col gap-1">
+                      <h3 className="text-default text-sm font-semibold leading-none">{integration.name}</h3>
+                      <p className="text-subtle text-sm font-medium leading-tight">
+                        {integration.description}
+                      </p>
+                    </div>
+                  </div>
+                  <div className="bg-emphasis flex h-6 items-center justify-center rounded-md px-2">
+                    <span className="text-emphasis text-xs font-medium leading-none">{t("connected")}</span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx b/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx
new file mode 100644
index 00000000000000..e9ce7747bcf046
--- /dev/null
+++ b/apps/web/modules/onboarding/components/onboarding-invite-browser-view.tsx
@@ -0,0 +1,67 @@
+"use client";
+
+import { trpc } from "@calcom/trpc/react";
+import { Avatar } from "@calcom/ui/components/avatar";
+
+import { useOnboardingStore } from "../store/onboarding-store";
+
+type OnboardingInviteBrowserViewProps = {
+  teamName?: string;
+};
+
+export const OnboardingInviteBrowserView = ({ teamName }: OnboardingInviteBrowserViewProps) => {
+  const { data: user } = trpc.viewer.me.get.useQuery();
+  const { teamBrand } = useOnboardingStore();
+
+  // Use default values if not provided
+  const rawInviterName = user?.name || user?.username || "Alex";
+  const displayInviterName = rawInviterName.charAt(0).toUpperCase() + rawInviterName.slice(1);
+  const displayTeamName = teamName || "Deel";
+  const teamAvatar = teamBrand.logo || null;
+
+  return (
+    <div className="bg-default border-subtle hidden h-full w-full flex-col rounded-l-2xl border xl:flex">
+      {/* Browser header */}
+      <div className="border-subtle flex min-w-0 shrink-0 items-center gap-3 rounded-t-2xl border-b bg-white p-3">
+        {/* Navigation buttons */}
+        <div className="flex shrink-0 items-center gap-4 opacity-50">
+          <div className="h-3 w-3 rounded-full bg-gray-300" />
+          <div className="h-3 w-3 rounded-full bg-gray-300" />
+          <div className="h-3 w-3 rounded-full bg-gray-300" />
+        </div>
+        <div className="bg-muted flex w-full items-center gap-2 rounded-[32px] px-3 py-2">
+          <div className="h-3 w-3 rounded-full bg-gray-400" />
+          <p className="text-subtle text-xs font-medium leading-tight">mail.example.com</p>
+        </div>
+      </div>
+
+      {/* Content */}
+      <div className="bg-muted h-full pl-8 pt-8">
+        <div className="bg-default border-subtle flex h-full w-full flex-col overflow-hidden rounded-tl-2xl border-l border-t">
+          {/* Email Header */}
+          <div className="border-subtle bg-muted flex flex-col gap-4 border-b p-8">
+            <div className="flex flex-col items-start gap-4">
+              <Avatar
+                size="lg"
+                imageSrc={teamAvatar || undefined}
+                alt={displayTeamName}
+                className="border-default h-12 w-12 border-2"
+              />
+              <div className="flex w-full flex-col items-start gap-1">
+                <h2 className="text-emphasis font-cal w-full text-left text-xl font-semibold leading-tight">
+                  {displayInviterName} invited you to join {displayTeamName}
+                </h2>
+                <p className="text-subtle text-left text-sm font-normal leading-tight">
+                  We're emailing you all the details
+                </p>
+              </div>
+            </div>
+          </div>
+
+          {/* Email Body */}
+          <div className="bg-default flex-1 rounded-bl-2xl" />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/apps/web/modules/onboarding/components/plan-icon.tsx b/apps/web/modules/onboarding/components/plan-icon.tsx
index bd047409794dfc..52e9cf8b99c912 100644
--- a/apps/web/modules/onboarding/components/plan-icon.tsx
+++ b/apps/web/modules/onboarding/components/plan-icon.tsx
@@ -1,24 +1,68 @@
-import classNames from "@calcom/ui/classNames";
+import { motion } from "framer-motion";
+
 import { Icon, type IconName } from "@calcom/ui/components/icon";
 
-export function PlanIcon({ icon, variant = "single" }: { icon: IconName; variant?: "single" | "double" }) {
-  const renderIconContainer = (index: number) => {
-    // For double variant: 55px icon width + 24px gap = 79px between centers, so ±39.5px from center
-    const leftPosition = variant === "double" ? `calc(50% + ${index === 0 ? -39.5 : 39.5}px)` : "50%";
+// Ring sizes - just the diameters, all centered on the icon
+const RING_SIZES = [166, 233, 345, 465];
+
+// Positions for small user icons on rings (for team variant)
+// Format: [ringIndex, angleInDegrees]
+// Angles: 0 = top, 90 = right, 180 = bottom, 270 = left
+const TEAM_ICON_POSITIONS = [
+  { ringIndex: 2, angle: 30 }, // Top-right of third ring
+  { ringIndex: 2, angle: 150 }, // Bottom-left of third ring
+  { ringIndex: 2, angle: 210 }, // Bottom-left of third ring
+  { ringIndex: 2, angle: 330 }, // Top-left of third ring
+  { ringIndex: 3, angle: 0 }, // Top of largest ring
+  { ringIndex: 3, angle: 180 }, // Bottom of largest ring
+];
 
+export function PlanIcon({
+  icon,
+  variant = "single",
+  animationDirection = "down",
+}: {
+  icon: IconName;
+  variant?: "single" | "organization" | "team";
+  animationDirection?: "up" | "down";
+}) {
+  const renderIconContainer = (index: number) => {
     return (
-      <div
-        key={index}
-        className="bg-default absolute top-[10px] flex h-[55px] w-[55px] -translate-x-1/2 items-center justify-center overflow-clip rounded-full"
+      <motion.div
+        key={`main-icon-${variant}-${icon}`}
+        initial={{
+          opacity: 0,
+          y: (animationDirection === "down" ? -20 : 20) - 40, // -40 is half of 80px for centering
+        }}
+        animate={{
+          opacity: 1,
+          y: -40, // Centered position (half of 80px)
+        }}
+        exit={{
+          opacity: 0,
+          y: (animationDirection === "down" ? 20 : -20) - 40,
+        }}
+        transition={{
+          duration: 0.5,
+          ease: "easeInOut",
+        }}
+        className="bg-default absolute flex h-[80px] w-[80px] items-center justify-center overflow-clip rounded-full"
         style={{
-          left: leftPosition,
+          x: "-50%",
+          left: "50%",
+          top: "50%",
           background: "linear-gradient(to bottom, var(--cal-bg, #ffffff), var(--cal-bg-muted, #f7f7f7))",
           boxShadow:
             "0px 2.818px 5.635px 0px var(--cal-border-subtle), 0px 0px 0px 0.704px var(--cal-border), 0px 0.704px 3.522px -2.818px rgba(0, 0, 0, 0.3)",
         }}>
         {/* Icon */}
-        <div className="size-8 flex items-center justify-center">
-          <Icon name={icon} size={24} strokeWidth={1.75} className="text-emphasis opacity-80" />
+        <div className="size-12 flex items-center justify-center">
+          <Icon
+            name={variant === "organization" ? "users" : icon}
+            size={32}
+            strokeWidth={1.75}
+            className="text-emphasis opacity-80"
+          />
         </div>
 
         {/* Inner highlight/shine effect */}
@@ -29,79 +73,88 @@ export function PlanIcon({ icon, variant = "single" }: { icon: IconName; variant
             opacity: 0.15,
           }}
         />
-      </div>
+      </motion.div>
     );
   };
 
-  return (
-    <div className="relative h-[76px] w-[160px] shrink-0 overflow-visible">
-      {/* Outer ring - SVG with linear gradient */}
-      <svg
-        className="pointer-events-none absolute left-[calc(50%+0.627px)] top-[-40px] -translate-x-1/2"
-        width="156"
-        height="156"
-        viewBox="0 0 156 156"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        style={{
-          maskImage:
-            "linear-gradient(180deg, transparent 0%, black 2%, black 50%, black 75%, transparent 100%)",
-          WebkitMaskImage:
-            "linear-gradient(180deg, transparent 0%, black 2%, black 50%, black 75%, transparent 100%)",
-        }}>
-        <circle opacity="0.3" cx="78" cy="78" r="77.5" stroke="url(#paint0_linear_outer)" strokeWidth="0.5" />
-        <defs>
-          <linearGradient
-            id="paint0_linear_outer"
-            x1="78"
-            y1="0"
-            x2="78"
-            y2="156"
-            gradientUnits="userSpaceOnUse">
-            <stop stopColor="var(--cal-border-default, #D3D3D3)" />
-            <stop offset="1" stopColor="var(--cal-border-emphasis, #B2B2B2)" />
-          </linearGradient>
-        </defs>
-      </svg>
+  const renderSmallUserIcon = (ringIndex: number, angle: number, index: number) => {
+    const ringSize = RING_SIZES[ringIndex];
+    const radius = ringSize / 2;
+    const angleRad = (angle * Math.PI) / 180;
+
+    // Calculate position on the ring
+    const x = Math.cos(angleRad) * radius;
+    const y = Math.sin(angleRad) * radius;
+    const iconHalfSize = 20.25; // Half of 40.5px
 
-      {/* Middle ring - SVG with linear gradient */}
-      <svg
-        className="pointer-events-none absolute left-[calc(50%+0.628px)] top-[-20.01px] -translate-x-1/2"
-        width="111"
-        height="111"
-        viewBox="0 0 111 111"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
+    return (
+      <motion.div
+        key={`small-icon-${variant}-${ringIndex}-${angle}`}
+        initial={{
+          opacity: 0,
+          y: y - iconHalfSize + (animationDirection === "down" ? -20 : 20),
+        }}
+        animate={{
+          opacity: 1,
+          y: y - iconHalfSize,
+        }}
+        exit={{
+          opacity: 0,
+          y: y - iconHalfSize + (animationDirection === "down" ? 20 : -20),
+        }}
+        transition={{
+          duration: 0.5,
+          ease: "easeInOut",
+          delay: index * 0.05, // Stagger animation for small icons
+        }}
+        className="bg-default absolute flex h-[40.5px] w-[40.5px] items-center justify-center overflow-clip rounded-full shadow-[0px_2.075px_4.15px_0px_rgba(34,42,53,0.05),0px_0px_0px_0.519px_rgba(34,42,53,0.08),0px_0.519px_2.594px_-2.075px_rgba(19,19,22,0.7)]"
         style={{
-          maskImage:
-            "linear-gradient(180deg, transparent 0%, black 2%, black 50%, black 75%, transparent 100%)",
-          WebkitMaskImage:
-            "linear-gradient(180deg, transparent 0%, black 2%, black 50%, black 75%, transparent 100%)",
+          x: x - iconHalfSize,
+          left: "50%",
+          top: "50%",
+          background: "linear-gradient(to bottom, var(--cal-bg, #ffffff), var(--cal-bg-muted, #f7f7f7))",
         }}>
-        <circle
-          opacity="0.4"
-          cx="55.461"
-          cy="55.455"
-          r="55.211"
-          stroke="url(#paint0_linear_middle)"
-          strokeWidth="0.5"
+        <div className="flex items-center justify-center opacity-70">
+          <Icon name="user" size={24} strokeWidth={1.75} className="text-emphasis" />
+        </div>
+        <div
+          className="pointer-events-none absolute inset-0 rounded-full"
+          style={{
+            boxShadow: "0px 0.519px 0.311px 0px inset var(--cal-bg-inverted)",
+            opacity: 0.15,
+          }}
         />
-        <defs>
-          <linearGradient
-            id="paint0_linear_middle"
-            x1="55.461"
-            y1="-0.006"
-            x2="55.461"
-            y2="110.916"
-            gradientUnits="userSpaceOnUse">
-            <stop stopColor="var(--cal-border-default, #D3D3D3)" />
-            <stop offset="1" stopColor="var(--cal-border-emphasis, #B2B2B2)" />
-          </linearGradient>
-        </defs>
-      </svg>
+      </motion.div>
+    );
+  };
+
+  return (
+    <div className="relative mx-auto h-[465px] w-[465px] shrink-0 overflow-visible">
+      {/* Generate concentric rings centered on icon */}
+      {RING_SIZES.map((size, index) => {
+        const opacity = [0.6, 0.5, 0.4, 0.35][index] || 0.3;
+        return (
+          <div
+            key={index}
+            className="pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full"
+            style={{
+              width: `${size}px`,
+              height: `${size}px`,
+              border: "0.5px solid",
+              borderColor: "var(--cal-border-default, #D3D3D3)",
+              opacity: opacity,
+            }}
+          />
+        );
+      })}
+
+      {/* Small user icons on rings (for team variant) */}
+      {(variant === "team" || variant === "organization") &&
+        TEAM_ICON_POSITIONS.map(({ ringIndex, angle }, index) =>
+          renderSmallUserIcon(ringIndex, angle, index)
+        )}
 
-      {/* Main icon container(s) with gradient background */}
-      {variant === "single" ? renderIconContainer(0) : [renderIconContainer(0), renderIconContainer(1)]}
+      {renderIconContainer(0)}
     </div>
   );
 }
diff --git a/apps/web/modules/onboarding/getting-started/onboarding-view.tsx b/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
index 4a908efa8e243d..b41cbf0168ef90 100644
--- a/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
+++ b/apps/web/modules/onboarding/getting-started/onboarding-view.tsx
@@ -1,6 +1,8 @@
 "use client";
 
+import { AnimatePresence, motion } from "framer-motion";
 import { useRouter } from "next/navigation";
+import { useEffect, useRef } from "react";
 
 import { isCompanyEmail } from "@calcom/features/ee/organizations/lib/utils";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
@@ -10,20 +12,43 @@ import { Button } from "@calcom/ui/components/button";
 import { type IconName } from "@calcom/ui/components/icon";
 import { RadioAreaGroup } from "@calcom/ui/components/radio";
 
+import { OnboardingCard } from "../components/OnboardingCard";
+import { OnboardingLayout } from "../components/OnboardingLayout";
 import { OnboardingContinuationPrompt } from "../components/onboarding-continuation-prompt";
 import { PlanIcon } from "../components/plan-icon";
-import { OnboardingLayout } from "../personal/_components/OnboardingLayout";
 import { useOnboardingStore, type PlanType } from "../store/onboarding-store";
 
 type OnboardingViewProps = {
-  userName: string;
   userEmail: string;
 };
 
-export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) => {
+export const OnboardingView = ({ userEmail }: OnboardingViewProps) => {
   const router = useRouter();
   const { t } = useLocale();
   const { selectedPlan, setSelectedPlan } = useOnboardingStore();
+  const previousPlanRef = useRef<PlanType | null>(null);
+
+  // Plan order mapping for determining direction
+  const planOrder: Record<PlanType, number> = {
+    personal: 0,
+    team: 1,
+    organization: 2,
+  };
+
+  // Calculate animation direction synchronously
+  const getDirection = (): "up" | "down" => {
+    if (!selectedPlan || !previousPlanRef.current) return "down";
+    const previousOrder = planOrder[previousPlanRef.current];
+    const currentOrder = planOrder[selectedPlan];
+    return currentOrder > previousOrder ? "down" : "up";
+  };
+
+  const direction = getDirection();
+
+  // Update previous plan ref after render
+  useEffect(() => {
+    previousPlanRef.current = selectedPlan;
+  }, [selectedPlan]);
 
   const handleContinue = () => {
     if (selectedPlan === "organization") {
@@ -37,7 +62,7 @@ export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) =>
 
   const planIconByType: Record<PlanType, IconName> = {
     personal: "user",
-    team: "users",
+    team: "user",
     organization: "users",
   };
 
@@ -56,7 +81,7 @@ export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) =>
       badge: t("onboarding_plan_team_badge"),
       description: t("onboarding_plan_team_description"),
       icon: planIconByType.team,
-      variant: "single" as const,
+      variant: "team" as const,
     },
     {
       id: "organization" as PlanType,
@@ -64,7 +89,7 @@ export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) =>
       badge: t("onboarding_plan_organization_badge"),
       description: t("onboarding_plan_organization_description"),
       icon: planIconByType.organization,
-      variant: "double" as const,
+      variant: "organization" as const,
     },
   ];
 
@@ -76,26 +101,26 @@ export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) =>
     return true;
   });
 
+  const selectedPlanData = plans.find((plan) => plan.id === selectedPlan);
+
   return (
     <>
       <OnboardingContinuationPrompt />
       <OnboardingLayout userEmail={userEmail} currentStep={1}>
-        <div className="flex w-full flex-col gap-6">
+        {/* Left column - Main content */}
+        <OnboardingCard
+          title="Select plan"
+          subtitle={t("onboarding_welcome_question")}
+          footer={
+            <div className="flex w-full justify-end gap-2">
+              <Button color="primary" className="rounded-[10px]" onClick={handleContinue}>
+                {t("continue")}
+              </Button>
+            </div>
+          }>
           {/* Card */}
-          <div className="bg-muted border-muted relative rounded-xl border p-1">
+          <div className="bg-muted border-muted relative flex min-h-0 w-full flex-col overflow-hidden rounded-xl border p-1">
             <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
-              {/* Card Header */}
-              <div className="flex w-full gap-1.5 px-5 py-4">
-                <div className="flex w-full flex-col gap-1">
-                  <h1 className="font-cal text-xl font-semibold leading-6">
-                    {t("onboarding_welcome_message", { userName })}
-                  </h1>
-                  <p className="text-subtle text-sm font-medium leading-tight">
-                    {t("onboarding_welcome_question")}
-                  </p>
-                </div>
-              </div>
-
               {/* Plan options */}
               <RadioAreaGroup.Group
                 value={selectedPlan ?? undefined}
@@ -114,46 +139,45 @@ export const OnboardingView = ({ userName, userEmail }: OnboardingViewProps) =>
                         "pr-12 [&>button]:left-auto [&>button]:right-6 [&>button]:mt-0 [&>button]:transform"
                       )}
                       classNames={{
-                        container: "flex w-full items-center gap-4 p-4 pl-5 pr-12 md:p-5 md:pr-14",
+                        container: "flex w-full items-center gap-3 p-5 pr-12",
                       }}>
-                      <div className="flex w-full items-center gap-4">
-                        <PlanIcon icon={plan.icon} variant={plan.variant} />
-                        <div className="flex flex-1 flex-col gap-2">
-                          <div className="flex flex-wrap items-center gap-2">
-                            <p className="text-emphasis text-base font-semibold leading-5">{plan.title}</p>
-                            <Badge
-                              variant="gray"
-                              size="md"
-                              className="hidden h-4 rounded-md px-1 py-1 md:flex md:items-center">
-                              <span className="text-emphasis text-xs font-medium leading-3">
-                                {plan.badge}
-                              </span>
-                            </Badge>
-                          </div>
+                      <div className="flex w-full flex-col gap-1">
+                        <div className="flex flex-wrap items-center gap-1">
+                          <p className="text-emphasis text-sm font-semibold leading-4">{plan.title}</p>
                           <Badge
                             variant="gray"
                             size="md"
-                            className="h-4 w-fit rounded-md px-1 py-1 md:hidden">
+                            className="hidden h-4 rounded-md px-1 py-1 md:flex md:items-center">
                             <span className="text-emphasis text-xs font-medium leading-3">{plan.badge}</span>
                           </Badge>
-                          <p className="text-subtle max-w-full text-sm font-normal leading-tight">
-                            {plan.description}
-                          </p>
                         </div>
+                        <Badge variant="gray" size="md" className="h-4 w-fit rounded-md px-1 py-1 md:hidden">
+                          <span className="text-emphasis text-xs font-medium leading-3">{plan.badge}</span>
+                        </Badge>
+                        <p className="text-subtle max-w-full text-sm font-medium leading-[1.25]">
+                          {plan.description}
+                        </p>
                       </div>
                     </RadioAreaGroup.Item>
                   );
                 })}
               </RadioAreaGroup.Group>
-
-              {/* Footer */}
-              <div className="flex w-full items-center justify-end gap-1 px-5 py-4">
-                <Button color="primary" className="rounded-[10px]" onClick={handleContinue}>
-                  {t("continue")}
-                </Button>
-              </div>
             </div>
           </div>
+        </OnboardingCard>
+
+        {/* Right column - Icon display */}
+        <div className="bg-muted border-subtle hidden h-full w-full rounded-l-2xl border-b border-l border-t xl:flex xl:items-center xl:justify-center">
+          <AnimatePresence mode="wait">
+            {selectedPlanData && (
+              <PlanIcon
+                key={selectedPlan}
+                icon={selectedPlanData.icon}
+                variant={selectedPlanData.variant}
+                animationDirection={direction}
+              />
+            )}
+          </AnimatePresence>
         </div>
       </OnboardingLayout>
     </>
diff --git a/apps/web/modules/onboarding/hooks/useSubmitPersonalOnboarding.ts b/apps/web/modules/onboarding/hooks/useSubmitPersonalOnboarding.ts
new file mode 100644
index 00000000000000..15c3b10c73eb42
--- /dev/null
+++ b/apps/web/modules/onboarding/hooks/useSubmitPersonalOnboarding.ts
@@ -0,0 +1,80 @@
+import { useRouter } from "next/navigation";
+
+import { setShowWelcomeToCalcomModalFlag } from "@calcom/features/shell/hooks/useWelcomeToCalcomModal";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
+import { telemetryEventTypes } from "@calcom/lib/telemetry";
+import { trpc } from "@calcom/trpc/react";
+import { showToast } from "@calcom/ui/components/toast";
+
+const DEFAULT_EVENT_TYPES = [
+  {
+    title: "15min_meeting",
+    slug: "15min",
+    length: 15,
+  },
+  {
+    title: "30min_meeting",
+    slug: "30min",
+    length: 30,
+  },
+  {
+    title: "secret_meeting",
+    slug: "secret",
+    length: 15,
+    hidden: true,
+  },
+];
+
+export const useSubmitPersonalOnboarding = () => {
+  const router = useRouter();
+  const { t } = useLocale();
+  const telemetry = useTelemetry();
+  const utils = trpc.useUtils();
+
+  const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery();
+  const createEventType = trpc.viewer.eventTypesHeavy.create.useMutation();
+
+  const mutation = trpc.viewer.me.updateProfile.useMutation({
+    onSuccess: async () => {
+      try {
+        // Create default event types if user has none
+        if (eventTypes?.length === 0) {
+          await Promise.all(
+            DEFAULT_EVENT_TYPES.map(async (event) => {
+              return createEventType.mutateAsync({
+                title: t(event.title),
+                slug: event.slug,
+                length: event.length,
+                hidden: event.hidden,
+              });
+            })
+          );
+        }
+      } catch (error) {
+        console.error(error);
+      }
+
+      await utils.viewer.me.get.refetch();
+      // Set flag to show welcome modal after redirect
+      setShowWelcomeToCalcomModalFlag();
+      router.push("/event-types?welcomeToCalcomModal=true");
+    },
+    onError: (error) => {
+      showToast(t("something_went_wrong"), "error");
+      console.error(error);
+    },
+  });
+
+  const submitPersonalOnboarding = () => {
+    telemetry.event(telemetryEventTypes.onboardingFinished);
+    mutation.mutate({
+      completedOnboarding: true,
+    });
+  };
+
+  return {
+    submitPersonalOnboarding,
+    isSubmitting: mutation.isPending,
+  };
+};
diff --git a/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx b/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
index 6868e24e86d293..66df2dbc2ea71e 100644
--- a/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
+++ b/apps/web/modules/onboarding/organization/brand/organization-brand-view.tsx
@@ -8,8 +8,9 @@ import { HexColorPicker } from "react-colorful";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 
-import { OnboardingCard } from "../../personal/_components/OnboardingCard";
-import { OnboardingLayout } from "../../personal/_components/OnboardingLayout";
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
+import { OnboardingBrowserView } from "../../components/onboarding-browser-view";
 import { useOnboardingStore } from "../../store/onboarding-store";
 
 type OrganizationBrandViewProps = {
@@ -118,6 +119,7 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
 
   return (
     <OnboardingLayout userEmail={userEmail} currentStep={2}>
+      {/* Left column - Main content */}
       <OnboardingCard
         title={t("onboarding_org_brand_title")}
         subtitle={t("onboarding_org_brand_subtitle")}
@@ -185,7 +187,9 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
                         />
                       </div>
                     </div>
-                    <p className="text-subtle text-xs font-normal leading-3">{t("onboarding_logo_size_hint")}</p>
+                    <p className="text-subtle text-xs font-normal leading-3">
+                      {t("onboarding_logo_size_hint")}
+                    </p>
                   </div>
 
                   {/* Banner Upload */}
@@ -225,69 +229,14 @@ export const OrganizationBrandView = ({ userEmail }: OrganizationBrandViewProps)
                     </p>
                   </div>
                 </div>
-
-                {/* Right side - Preview */}
-                <div className="bg-muted border-muted flex hidden h-[328px] w-full grow overflow-hidden rounded-[10px] border p-5 md:block">
-                  <div className="flex flex-col gap-2.5">
-                    <p className="text-subtle text-sm font-medium leading-4">{t("preview")}</p>
-                    <div className="border-subtle bg-default relative flex w-[110%] flex-col gap-2.5 rounded-md border px-5 pb-5 pt-[74px]">
-                      {/* Banner preview */}
-                      <div className="bg-muted border-muted absolute left-1 top-1 h-[92px] w-[272px] overflow-hidden rounded-[4px] border">
-                        {bannerPreview && (
-                          <img
-                            src={bannerPreview}
-                            alt={t("onboarding_banner_preview_alt")}
-                            className="h-full w-full object-cover"
-                          />
-                        )}
-                      </div>
-
-                      {/* Content */}
-                      <div className="flex flex-col gap-4">
-                        <div className="flex flex-col gap-3 p-1">
-                          <div className="flex flex-col gap-3">
-                            {/* Logo preview */}
-                            <div className="bg-muted z-20 h-9 w-9 shrink-0 overflow-hidden rounded-md border-2 border-[var(--cal-bg)]">
-                              {logoPreview && (
-                                <img
-                                  src={logoPreview}
-                                  alt={t("onboarding_logo_preview_alt")}
-                                  className="h-full w-full object-cover"
-                                />
-                              )}
-                            </div>
-                            <p className="text-subtle text-sm font-medium capitalize leading-4 ">
-                              {organizationDetails.name || t("onboarding_preview_nameless")}
-                            </p>
-                          </div>
-                          <div className="flex flex-col gap-3">
-                            <div className="flex flex-col gap-3">
-                              <p className="font-cal text-xl leading-5 tracking-[0.2px]">
-                                {t("onboarding_preview_example_title")}
-                              </p>
-                              <p className="text-subtle text-sm font-medium leading-5">
-                                {t("onboarding_preview_example_description")}
-                              </p>
-                            </div>
-                          </div>
-                        </div>
-                        <div className="flex flex-col gap-1">
-                          {[134, 104, 84, 104].map((width, i) => (
-                            <div key={i} className="flex items-center gap-2 p-1">
-                              <div className="bg-subtle h-5 w-5 shrink-0 rounded-full" />
-                              <div className="bg-subtle h-2.5 rounded-full" style={{ width: `${width}px` }} />
-                            </div>
-                          ))}
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
               </div>
             </div>
           </div>
         </div>
       </OnboardingCard>
+
+      {/* Right column - Browser view */}
+      <OnboardingBrowserView />
     </OnboardingLayout>
   );
 };
diff --git a/apps/web/modules/onboarding/organization/details/organization-details-view.tsx b/apps/web/modules/onboarding/organization/details/organization-details-view.tsx
index be492a3a4058f0..10542bfc8dbfe0 100644
--- a/apps/web/modules/onboarding/organization/details/organization-details-view.tsx
+++ b/apps/web/modules/onboarding/organization/details/organization-details-view.tsx
@@ -7,8 +7,9 @@ import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
 import { Label, TextField, TextArea } from "@calcom/ui/components/form";
 
-import { OnboardingCard } from "../../personal/_components/OnboardingCard";
-import { OnboardingLayout } from "../../personal/_components/OnboardingLayout";
+import { OnboardingBrowserView } from "../../components/onboarding-browser-view";
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
 import { useOnboardingStore } from "../../store/onboarding-store";
 import { ValidatedOrganizationSlug } from "./validated-organization-slug";
 
@@ -77,6 +78,7 @@ export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewPr
 
   return (
     <OnboardingLayout userEmail={userEmail} currentStep={2}>
+      {/* Left column - Main content */}
       <OnboardingCard
         title={t("onboarding_org_details_title")}
         subtitle={t("onboarding_org_details_subtitle")}
@@ -134,6 +136,9 @@ export const OrganizationDetailsView = ({ userEmail }: OrganizationDetailsViewPr
           </div>
         </div>
       </OnboardingCard>
+
+      {/* Right column - Browser view */}
+      <OnboardingBrowserView />
     </OnboardingLayout>
   );
 };
diff --git a/apps/web/modules/onboarding/organization/invite/organization-invite-view.tsx b/apps/web/modules/onboarding/organization/invite/organization-invite-view.tsx
index 11f7a590089f12..c0cd7966295a6e 100644
--- a/apps/web/modules/onboarding/organization/invite/organization-invite-view.tsx
+++ b/apps/web/modules/onboarding/organization/invite/organization-invite-view.tsx
@@ -12,6 +12,7 @@ import { Form, Label, TextField, Select, ToggleGroup } from "@calcom/ui/componen
 import { Icon } from "@calcom/ui/components/icon";
 import { Logo } from "@calcom/ui/components/logo";
 
+import { OnboardingBrowserView } from "../../components/onboarding-browser-view";
 import { useSubmitOnboarding } from "../../hooks/useSubmitOnboarding";
 import { useOnboardingStore } from "../../store/onboarding-store";
 
@@ -117,135 +118,55 @@ export const OrganizationInviteView = ({ userEmail }: OrganizationInviteViewProp
 
       {/* Main content */}
       <div className="flex h-full w-full items-start justify-center px-6 py-8">
-        <div className="flex w-full max-w-[600px] flex-col gap-4">
-          {/* Card */}
-          <div className="bg-muted border-muted relative rounded-xl border p-1">
-            <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
-              {/* Card Header */}
-              <div className="flex w-full gap-1.5 px-5 py-4">
-                <div className="flex w-full flex-col gap-1">
-                  <h1 className="font-cal text-xl font-semibold leading-6">
-                    {t("onboarding_org_invite_title")}
-                  </h1>
-                  <p className="text-subtle text-sm font-medium leading-tight">
-                    {isEmailMode
-                      ? t("onboarding_org_invite_subtitle_email")
-                      : t("onboarding_org_invite_subtitle_full")}
-                  </p>
+        <div className="grid w-full max-w-[1200px] grid-cols-1 gap-6 lg:grid-cols-[1fr_auto]">
+          {/* Left column - Main content */}
+          <div className="flex w-full flex-col gap-4">
+            {/* Card */}
+            <div className="bg-muted border-muted relative rounded-xl border p-1">
+              <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
+                {/* Card Header */}
+                <div className="flex w-full gap-1.5 px-5 py-4">
+                  <div className="flex w-full flex-col gap-1">
+                    <h1 className="font-cal text-xl font-semibold leading-6">
+                      {t("onboarding_org_invite_title")}
+                    </h1>
+                    <p className="text-subtle text-sm font-medium leading-tight">
+                      {isEmailMode
+                        ? t("onboarding_org_invite_subtitle_email")
+                        : t("onboarding_org_invite_subtitle_full")}
+                    </p>
+                  </div>
                 </div>
-              </div>
-
-              {/* Content */}
-              <div className="bg-default border-subtle w-full rounded-md border">
-                <div className="flex w-full flex-col gap-8 px-5 py-5">
-                  {!isEmailMode ? (
-                    // Coming soon
-                    // Initial invite options view
-                    <div className="flex w-full flex-col gap-4">
-                      <Button color="secondary" className="w-full justify-center" StartIcon="mail">
-                        {t("onboarding_connect_google_workspace")}
-                      </Button>
 
-                      <div className="flex items-center gap-2">
-                        <div className="bg-subtle h-px flex-1" />
-                        <span className="text-subtle text-xs">{t("onboarding_or_divider")}</span>
-                        <div className="bg-subtle h-px flex-1" />
-                      </div>
-
-                      <div className="flex items-center gap-2">
-                        <Button
-                          color="secondary"
-                          className="flex-1 justify-center"
-                          onClick={handleInviteViaEmail}>
-                          {t("invite_via_email")}
-                        </Button>
-                        <Button color="secondary" className="flex-1 justify-center" StartIcon="upload">
-                          {t("onboarding_upload_csv")}
-                        </Button>
-                        <Button color="secondary" className="flex-1 justify-center" StartIcon="link">
-                          {t("onboarding_copy_invite_link")}
+                {/* Content */}
+                <div className="bg-default border-subtle w-full rounded-md border">
+                  <div className="flex w-full flex-col gap-8 px-5 py-5">
+                    {!isEmailMode ? (
+                      // Coming soon
+                      // Initial invite options view
+                      <div className="flex w-full flex-col gap-4">
+                        <Button color="secondary" className="w-full justify-center" StartIcon="mail">
+                          {t("onboarding_connect_google_workspace")}
                         </Button>
-                      </div>
 
-                      {/* Role selector */}
-                      <div className="flex items-center justify-between">
-                        <div className="hidden items-center gap-2 md:flex">
-                          <span className="text-emphasis text-sm">{t("onboarding_invite_all_as")}</span>
-                          <ToggleGroup
-                            value={inviteRole}
-                            onValueChange={(value) => value && setInviteRole(value as "MEMBER" | "ADMIN")}
-                            options={[
-                              { value: "ADMIN", label: t("onboarding_admins") },
-                              { value: "MEMBER", label: t("members") },
-                            ]}
-                          />
+                        <div className="flex items-center gap-2">
+                          <div className="bg-subtle h-px flex-1" />
+                          <span className="text-subtle text-xs">{t("onboarding_or_divider")}</span>
+                          <div className="bg-subtle h-px flex-1" />
                         </div>
-                        <span className="text-subtle text-sm">{t("onboarding_modify_roles_later")}</span>
-                      </div>
-                    </div>
-                  ) : (
-                    // Email invite form
-                    <Form form={form} handleSubmit={handleContinue} className="w-full">
-                      <div className="flex w-full flex-col gap-4">
-                        {/* Email and Team inputs */}
-                        <div className="flex flex-col gap-2">
-                          <div className="grid grid-cols-2">
-                            <Label
-                              className="text-emphasis mb-0 text-sm font-medium"
-                              htmlFor="invites.0.email">
-                              {t("email")}
-                            </Label>
-                            <Label
-                              className="text-emphasis mb-0 text-sm font-medium"
-                              htmlFor="invites.0.team">
-                              {t("team")}
-                            </Label>
-                          </div>
 
-                          {fields.map((field, index) => (
-                            <div key={field.id} className="flex items-start gap-0.5">
-                              <div className="grid flex-1 items-start gap-2 md:grid-cols-2 ">
-                                <TextField
-                                  labelSrOnly
-                                  {...form.register(`invites.${index}.email`)}
-                                  placeholder={`dave@${usersEmailDomain}`}
-                                  type="email"
-                                  size="sm"
-                                />
-                                <Select
-                                  size="sm"
-                                  options={teams}
-                                  value={teams.find((t) => t.value === form.watch(`invites.${index}.team`))}
-                                  onChange={(option) => {
-                                    if (option) {
-                                      form.setValue(`invites.${index}.team`, option.value);
-                                    }
-                                  }}
-                                  placeholder={t("select_team")}
-                                />
-                              </div>
-                              <Button
-                                type="button"
-                                color="minimal"
-                                variant="icon"
-                                size="sm"
-                                className="h-7 w-7"
-                                disabled={fields.length === 1}
-                                onClick={() => remove(index)}>
-                                <Icon name="x" className="h-4 w-4" />
-                              </Button>
-                            </div>
-                          ))}
-
-                          {/* Add button */}
+                        <div className="flex items-center gap-2">
                           <Button
-                            type="button"
                             color="secondary"
-                            size="sm"
-                            StartIcon="plus"
-                            className="mt-2 w-fit"
-                            onClick={() => append({ email: "", team: "", role: "MEMBER" })}>
-                            {t("add")}
+                            className="flex-1 justify-center"
+                            onClick={handleInviteViaEmail}>
+                            {t("invite_via_email")}
+                          </Button>
+                          <Button color="secondary" className="flex-1 justify-center" StartIcon="upload">
+                            {t("onboarding_upload_csv")}
+                          </Button>
+                          <Button color="secondary" className="flex-1 justify-center" StartIcon="link">
+                            {t("onboarding_copy_invite_link")}
                           </Button>
                         </div>
 
@@ -257,42 +178,128 @@ export const OrganizationInviteView = ({ userEmail }: OrganizationInviteViewProp
                               value={inviteRole}
                               onValueChange={(value) => value && setInviteRole(value as "MEMBER" | "ADMIN")}
                               options={[
-                                { value: "MEMBER", label: t("members") },
                                 { value: "ADMIN", label: t("onboarding_admins") },
+                                { value: "MEMBER", label: t("members") },
                               ]}
                             />
                           </div>
                           <span className="text-subtle text-sm">{t("onboarding_modify_roles_later")}</span>
                         </div>
                       </div>
-                    </Form>
-                  )}
+                    ) : (
+                      // Email invite form
+                      <Form form={form} handleSubmit={handleContinue} className="w-full">
+                        <div className="flex w-full flex-col gap-4">
+                          {/* Email and Team inputs */}
+                          <div className="flex flex-col gap-2">
+                            <div className="grid grid-cols-2">
+                              <Label
+                                className="text-emphasis mb-0 text-sm font-medium"
+                                htmlFor="invites.0.email">
+                                {t("email")}
+                              </Label>
+                              <Label
+                                className="text-emphasis mb-0 text-sm font-medium"
+                                htmlFor="invites.0.team">
+                                {t("team")}
+                              </Label>
+                            </div>
+
+                            {fields.map((field, index) => (
+                              <div key={field.id} className="flex items-start gap-0.5">
+                                <div className="grid flex-1 items-start gap-2 md:grid-cols-2 ">
+                                  <TextField
+                                    labelSrOnly
+                                    {...form.register(`invites.${index}.email`)}
+                                    placeholder={`dave@${usersEmailDomain}`}
+                                    type="email"
+                                    size="sm"
+                                  />
+                                  <Select
+                                    size="sm"
+                                    options={teams}
+                                    value={teams.find((t) => t.value === form.watch(`invites.${index}.team`))}
+                                    onChange={(option) => {
+                                      if (option) {
+                                        form.setValue(`invites.${index}.team`, option.value);
+                                      }
+                                    }}
+                                    placeholder={t("select_team")}
+                                  />
+                                </div>
+                                <Button
+                                  type="button"
+                                  color="minimal"
+                                  variant="icon"
+                                  size="sm"
+                                  className="h-7 w-7"
+                                  disabled={fields.length === 1}
+                                  onClick={() => remove(index)}>
+                                  <Icon name="x" className="h-4 w-4" />
+                                </Button>
+                              </div>
+                            ))}
+
+                            {/* Add button */}
+                            <Button
+                              type="button"
+                              color="secondary"
+                              size="sm"
+                              StartIcon="plus"
+                              className="mt-2 w-fit"
+                              onClick={() => append({ email: "", team: "", role: "MEMBER" })}>
+                              {t("add")}
+                            </Button>
+                          </div>
+
+                          {/* Role selector */}
+                          <div className="flex items-center justify-between">
+                            <div className="hidden items-center gap-2 md:flex">
+                              <span className="text-emphasis text-sm">{t("onboarding_invite_all_as")}</span>
+                              <ToggleGroup
+                                value={inviteRole}
+                                onValueChange={(value) => value && setInviteRole(value as "MEMBER" | "ADMIN")}
+                                options={[
+                                  { value: "MEMBER", label: t("members") },
+                                  { value: "ADMIN", label: t("onboarding_admins") },
+                                ]}
+                              />
+                            </div>
+                            <span className="text-subtle text-sm">{t("onboarding_modify_roles_later")}</span>
+                          </div>
+                        </div>
+                      </Form>
+                    )}
+                  </div>
                 </div>
-              </div>
 
-              {/* Footer */}
-              <div className="flex w-full items-center justify-end gap-1 px-5 py-4">
-                <Button
-                  type={isEmailMode ? "submit" : "button"}
-                  color="primary"
-                  className="rounded-[10px]"
-                  disabled={(isEmailMode && !hasValidInvites) || isSubmitting}
-                  loading={isSubmitting}
-                  onClick={form.handleSubmit(handleContinue)}>
-                  {t("continue")}
-                </Button>
+                {/* Footer */}
+                <div className="flex w-full items-center justify-end gap-1 px-5 py-4">
+                  <Button
+                    type={isEmailMode ? "submit" : "button"}
+                    color="primary"
+                    className="rounded-[10px]"
+                    disabled={(isEmailMode && !hasValidInvites) || isSubmitting}
+                    loading={isSubmitting}
+                    onClick={form.handleSubmit(handleContinue)}>
+                    {t("continue")}
+                  </Button>
+                </div>
               </div>
             </div>
-          </div>
 
-          {/* Skip button */}
-          <div className="flex w-full justify-center">
-            <button
-              onClick={handleSkip}
-              className="text-subtle hover:bg-subtle rounded-[10px] px-2 py-1.5 text-sm font-medium leading-4">
-              {t("ill_do_this_later")}
-            </button>
+            {/* Skip button */}
+            <div className="flex w-full justify-center">
+              <button
+                onClick={handleSkip}
+                className="text-subtle hover:bg-subtle rounded-[10px] px-2 py-1.5 text-sm font-medium leading-4">
+                {t("ill_do_this_later")}
+              </button>
+            </div>
           </div>
+
+          {/* Right column - Browser view */}
+          <OnboardingBrowserView />
         </div>
       </div>
     </div>
diff --git a/apps/web/modules/onboarding/personal/calendar/personal-calendar-view.tsx b/apps/web/modules/onboarding/personal/calendar/personal-calendar-view.tsx
index c7b76a37bd1feb..f30674773e75ed 100644
--- a/apps/web/modules/onboarding/personal/calendar/personal-calendar-view.tsx
+++ b/apps/web/modules/onboarding/personal/calendar/personal-calendar-view.tsx
@@ -1,15 +1,14 @@
 "use client";
 
-import { useRouter } from "next/navigation";
-
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 import { Button } from "@calcom/ui/components/button";
 
+import { OnboardingCalendarBrowserView } from "../../components/onboarding-calendar-browser-view";
+import { useSubmitPersonalOnboarding } from "../../hooks/useSubmitPersonalOnboarding";
 import { InstallableAppCard } from "../_components/InstallableAppCard";
-import { OnboardingCard } from "../_components/OnboardingCard";
-import { OnboardingLayout } from "../_components/OnboardingLayout";
-import { SkipButton } from "../_components/SkipButton";
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
 import { useAppInstallation } from "../_components/useAppInstallation";
 
 type PersonalCalendarViewProps = {
@@ -17,9 +16,9 @@ type PersonalCalendarViewProps = {
 };
 
 export const PersonalCalendarView = ({ userEmail }: PersonalCalendarViewProps) => {
-  const router = useRouter();
   const { t } = useLocale();
   const { installingAppSlug, setInstallingAppSlug, createInstallHandlers } = useAppInstallation();
+  const { submitPersonalOnboarding, isSubmitting } = useSubmitPersonalOnboarding();
 
   const queryIntegrations = trpc.viewer.apps.integrations.useQuery({
     variant: "calendar",
@@ -29,23 +28,38 @@ export const PersonalCalendarView = ({ userEmail }: PersonalCalendarViewProps) =
   });
 
   const handleContinue = () => {
-    router.push("/onboarding/personal/video");
+    submitPersonalOnboarding();
   };
 
   const handleSkip = () => {
-    router.push("/onboarding/personal/video");
+    submitPersonalOnboarding();
   };
 
   return (
-    <OnboardingLayout userEmail={userEmail} currentStep={3}>
+    <OnboardingLayout userEmail={userEmail} currentStep={2}>
+      {/* Left column - Main content */}
       <OnboardingCard
         title={t("connect_your_calendar")}
         subtitle={t("connect_calendar_to_prevent_conflicts")}
         isLoading={queryIntegrations.isPending}
         footer={
-          <Button color="primary" className="rounded-[10px]" onClick={handleContinue}>
-            {t("continue")}
-          </Button>
+          <div className="flex w-full items-center justify-end gap-4">
+            <Button
+              color="minimal"
+              className="rounded-[10px]"
+              onClick={handleSkip}
+              disabled={queryIntegrations.isPending || isSubmitting}>
+              {t("onboarding_skip_for_now")}
+            </Button>
+            <Button
+              color="primary"
+              className="rounded-[10px]"
+              onClick={handleContinue}
+              loading={isSubmitting}
+              disabled={queryIntegrations.isPending || isSubmitting}>
+              {t("continue")}
+            </Button>
+          </div>
         }>
         <div className="scroll-bar grid max-h-[45vh] grid-cols-1 gap-3 overflow-y-scroll sm:grid-cols-2">
           {queryIntegrations.data?.items?.map((app) => (
@@ -60,7 +74,8 @@ export const PersonalCalendarView = ({ userEmail }: PersonalCalendarViewProps) =
         </div>
       </OnboardingCard>
 
-      <SkipButton onClick={handleSkip} />
+      {/* Right column - Browser view */}
+      <OnboardingCalendarBrowserView />
     </OnboardingLayout>
   );
 };
diff --git a/apps/web/modules/onboarding/personal/profile/personal-profile-view.tsx b/apps/web/modules/onboarding/personal/profile/personal-profile-view.tsx
deleted file mode 100644
index 67efa29b4f623a..00000000000000
--- a/apps/web/modules/onboarding/personal/profile/personal-profile-view.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-import { useEffect, useRef, useState } from "react";
-import { useForm } from "react-hook-form";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { md } from "@calcom/lib/markdownIt";
-import turndown from "@calcom/lib/turndownService";
-import { trpc } from "@calcom/trpc/react";
-import { UserAvatar } from "@calcom/ui/components/avatar";
-import { Button } from "@calcom/ui/components/button";
-import { Editor } from "@calcom/ui/components/editor";
-import { Label } from "@calcom/ui/components/form";
-import { ImageUploader } from "@calcom/ui/components/image-uploader";
-import { showToast } from "@calcom/ui/components/toast";
-
-import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
-
-import { OnboardingCard } from "../_components/OnboardingCard";
-import { OnboardingLayout } from "../_components/OnboardingLayout";
-import { useOnboardingStore } from "../../store/onboarding-store";
-
-type PersonalProfileViewProps = {
-  userEmail: string;
-};
-
-type FormData = {
-  bio: string;
-};
-
-export const PersonalProfileView = ({ userEmail }: PersonalProfileViewProps) => {
-  const { data: user } = trpc.viewer.me.get.useQuery();
-  const router = useRouter();
-  const { t } = useLocale();
-  const { personalDetails, setPersonalDetails } = useOnboardingStore();
-
-  const avatarRef = useRef<HTMLInputElement>(null);
-  const [imageSrc, setImageSrc] = useState<string>("");
-  const [firstRender, setFirstRender] = useState(true);
-
-  // Update imageSrc when user loads
-  useEffect(() => {
-    if (user) {
-      setImageSrc(personalDetails.avatar || user.avatar || "");
-    }
-  }, [user, personalDetails.avatar]);
-
-  const { setValue, handleSubmit, getValues } = useForm<FormData>({
-    defaultValues: { bio: personalDetails.bio || user?.bio || "" },
-  });
-
-  const utils = trpc.useUtils();
-
-  // Avatar mutation
-  const avatarMutation = trpc.viewer.me.updateProfile.useMutation({
-    onSuccess: async (data) => {
-      showToast(t("your_user_profile_updated_successfully"), "success");
-      setImageSrc(data.avatarUrl ?? "");
-      setPersonalDetails({ avatar: data.avatarUrl ?? null });
-    },
-    onError: () => {
-      showToast(t("problem_saving_user_profile"), "error");
-    },
-  });
-
-  // Profile mutation
-  const mutation = trpc.viewer.me.updateProfile.useMutation({
-    onSuccess: async () => {
-      await utils.viewer.me.invalidate();
-    },
-  });
-
-  const onSubmit = handleSubmit(async (data: { bio: string }) => {
-    const { bio } = data;
-
-    // Save to store
-    setPersonalDetails({
-      bio,
-    });
-
-    // Save to backend
-    await mutation.mutateAsync({
-      bio,
-    });
-
-    router.push("/onboarding/personal/calendar");
-  });
-
-  async function updateProfileHandler(newAvatar: string) {
-    avatarMutation.mutate({
-      avatarUrl: newAvatar,
-    });
-  }
-
-  if (!user) {
-    return null;
-  }
-
-  return (
-    <OnboardingLayout userEmail={userEmail} currentStep={2}>
-      <OnboardingCard
-        title={t("complete_your_profile")}
-        subtitle={t("personal_profile_subtitle")}
-        footer={
-          <Button
-            color="primary"
-            className="rounded-[10px]"
-            onClick={onSubmit}
-            loading={mutation.isPending}
-            disabled={mutation.isPending}>
-            {t("continue")}
-          </Button>
-        }>
-        {/* Form */}
-        <div className="bg-default border-muted w-full rounded-[10px] border">
-          <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
-            <div className="flex w-full flex-col items-start">
-              <form onSubmit={onSubmit} className="flex w-full gap-6 px-5 py-5">
-                <div className="flex w-full flex-col gap-6 rounded-xl">
-                  {/* Avatar */}
-                  <div className="flex w-full flex-col gap-2">
-                    <Label className="text-emphasis text-sm font-medium leading-4">{t("profile_photo")}</Label>
-                    <div className="flex flex-row items-center justify-start gap-4 rtl:justify-end">
-                      {user && <UserAvatar size="lg" user={user} previewSrc={imageSrc} />}
-                      <input
-                        ref={avatarRef}
-                        type="hidden"
-                        name="avatar"
-                        id="avatar"
-                        defaultValue={imageSrc}
-                      />
-                      <ImageUploader
-                        target="avatar"
-                        id="avatar-upload"
-                        buttonMsg={t("add_profile_photo")}
-                        handleAvatarChange={(newAvatar) => {
-                          if (avatarRef.current) {
-                            avatarRef.current.value = newAvatar;
-                          }
-                          const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
-                            window.HTMLInputElement.prototype,
-                            "value"
-                          )?.set;
-                          nativeInputValueSetter?.call(avatarRef.current, newAvatar);
-                          const ev2 = new Event("input", { bubbles: true });
-                          avatarRef.current?.dispatchEvent(ev2);
-                          updateProfileHandler(newAvatar);
-                        }}
-                        imageSrc={imageSrc}
-                      />
-                    </div>
-                  </div>
-
-                  {/* Username */}
-                  <div className="flex w-full flex-col gap-1.5">
-                    <UsernameAvailabilityField />
-                  </div>
-
-                  {/* Bio */}
-                  <div className="flex w-full flex-col gap-1.5">
-                    <Label className="text-emphasis mb-1 text-sm font-medium leading-4">{t("about")}</Label>
-                    <Editor
-                      getText={() => md.render(getValues("bio") || user?.bio || "")}
-                      setText={(value: string) => setValue("bio", turndown(value))}
-                      excludedToolbarItems={["blockType"]}
-                      firstRender={firstRender}
-                      setFirstRender={setFirstRender}
-                    />
-                    <p className="text-subtle text-xs font-normal leading-3">
-                      {t("few_sentences_about_yourself")}
-                    </p>
-                  </div>
-                </div>
-              </form>
-            </div>
-          </div>
-        </div>
-      </OnboardingCard>
-    </OnboardingLayout>
-  );
-};
diff --git a/apps/web/modules/onboarding/personal/settings/personal-settings-view.tsx b/apps/web/modules/onboarding/personal/settings/personal-settings-view.tsx
index 84b4638351dd86..ba2ae424910145 100644
--- a/apps/web/modules/onboarding/personal/settings/personal-settings-view.tsx
+++ b/apps/web/modules/onboarding/personal/settings/personal-settings-view.tsx
@@ -2,23 +2,26 @@
 
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
+import { useEffect, useRef, useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
-import dayjs from "@calcom/dayjs";
-import { useTimePreferences } from "@calcom/features/bookings/lib";
-import { TimezoneSelect } from "@calcom/features/components/timezone-select";
 import { FULL_NAME_LENGTH_MAX_LIMIT } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
+import { UserAvatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
-import { Label, TextField } from "@calcom/ui/components/form";
+import { Label, TextArea, TextField } from "@calcom/ui/components/form";
+import { ImageUploader } from "@calcom/ui/components/image-uploader";
+import { showToast } from "@calcom/ui/components/toast";
 
+import { UsernameAvailabilityField } from "@components/ui/UsernameAvailability";
+
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
+import { OnboardingBrowserView } from "../../components/onboarding-browser-view";
 import { OnboardingContinuationPrompt } from "../../components/onboarding-continuation-prompt";
 import { useOnboardingStore } from "../../store/onboarding-store";
-import { OnboardingCard } from "../_components/OnboardingCard";
-import { OnboardingLayout } from "../_components/OnboardingLayout";
 
 type PersonalSettingsViewProps = {
   userEmail: string;
@@ -28,17 +31,17 @@ type PersonalSettingsViewProps = {
 export const PersonalSettingsView = ({ userEmail, userName }: PersonalSettingsViewProps) => {
   const router = useRouter();
   const { t } = useLocale();
+  const { data: user } = trpc.viewer.me.get.useQuery();
   const { personalDetails, setPersonalDetails } = useOnboardingStore();
-  const { setTimezone: setSelectedTimeZone, timezone: selectedTimeZone } = useTimePreferences();
 
-  const [name, setName] = useState("");
+  const avatarRef = useRef<HTMLInputElement>(null);
+  const [imageSrc, setImageSrc] = useState<string>("");
 
   useEffect(() => {
-    setName(personalDetails.name || userName || "");
-    if (personalDetails.timezone) {
-      setSelectedTimeZone(personalDetails.timezone);
+    if (user) {
+      setImageSrc(personalDetails.avatar || user.avatar || "");
     }
-  }, [personalDetails, userName, setSelectedTimeZone]);
+  }, [personalDetails.avatar, user]);
 
   const formSchema = z.object({
     name: z
@@ -47,98 +50,169 @@ export const PersonalSettingsView = ({ userEmail, userName }: PersonalSettingsVi
       .max(FULL_NAME_LENGTH_MAX_LIMIT, {
         message: t("max_limit_allowed_hint", { limit: FULL_NAME_LENGTH_MAX_LIMIT }),
       }),
+    bio: z.string().optional(),
   });
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
       name: personalDetails.name || userName || "",
+      bio: personalDetails.bio || "",
     },
   });
 
   const utils = trpc.useUtils();
+
+  // Avatar mutation
+  const avatarMutation = trpc.viewer.me.updateProfile.useMutation({
+    onSuccess: async (data) => {
+      showToast(t("your_user_profile_updated_successfully"), "success");
+      setImageSrc(data.avatarUrl ?? "");
+      setPersonalDetails({ avatar: data.avatarUrl ?? null });
+    },
+    onError: () => {
+      showToast(t("problem_saving_user_profile"), "error");
+    },
+  });
+
+  // Profile mutation
   const mutation = trpc.viewer.me.updateProfile.useMutation({
     onSuccess: async () => {
       await utils.viewer.me.invalidate();
     },
   });
 
+  async function updateProfileHandler(newAvatar: string) {
+    avatarMutation.mutate({
+      avatarUrl: newAvatar,
+    });
+  }
+
   const handleContinue = form.handleSubmit(async (data) => {
     // Save to store
     setPersonalDetails({
       name: data.name,
-      timezone: selectedTimeZone,
+      bio: data.bio || "",
     });
 
     // Save to backend
     await mutation.mutateAsync({
       name: data.name,
-      timeZone: selectedTimeZone,
+      bio: data.bio || "",
     });
 
-    router.push("/onboarding/personal/profile");
+    router.push("/onboarding/personal/calendar");
   });
 
+  if (!user) {
+    return null;
+  }
+
   return (
     <>
       <OnboardingContinuationPrompt />
       <OnboardingLayout userEmail={userEmail} currentStep={1}>
+        {/* Left column - Main content */}
         <OnboardingCard
-          title={t("welcome_to_cal_com")}
-          subtitle={t("personal_settings_subtitle")}
+          title={t("add_your_details")}
+          subtitle={t("personal_details_subtitle")}
           footer={
-            <Button
-              color="primary"
-              className="rounded-[10px]"
-              onClick={handleContinue}
-              loading={mutation.isPending}
-              disabled={mutation.isPending || !form.formState.isValid}>
-              {t("continue")}
-            </Button>
+            <div className="flex w-full items-center justify-end gap-4">
+              <Button
+                color="minimal"
+                className="rounded-[10px]"
+                onClick={() => router.push("/onboarding/getting-started")}>
+                {t("back")}
+              </Button>
+              <Button
+                type="submit"
+                form="personal-settings-form"
+                color="primary"
+                className="rounded-[10px]"
+                loading={mutation.isPending}
+                disabled={mutation.isPending || !form.formState.isValid}>
+                {t("continue")}
+              </Button>
+            </div>
           }>
-          {/* Form */}
-          <div className="bg-default border-muted w-full rounded-[10px] border">
-            <div className="rounded-inherit flex w-full flex-col items-start">
-              <div className="flex w-full flex-col items-start">
-                <div className="flex w-full gap-6 px-5 py-5">
-                  <div className="flex w-full flex-col gap-4 rounded-xl">
-                    {/* Name */}
-                    <div className="flex w-full flex-col gap-1.5">
-                      <TextField
-                        label={t("full_name")}
-                        {...form.register("name")}
-                        value={name}
-                        onChange={(e) => {
-                          setName(e.target.value);
-                          form.setValue("name", e.target.value);
-                        }}
-                        placeholder="John Doe"
-                      />
-                      {form.formState.errors.name && (
-                        <p className="text-error text-sm">{form.formState.errors.name.message}</p>
-                      )}
+          <FormProvider {...form}>
+            <form
+              id="personal-settings-form"
+              onSubmit={handleContinue}
+              className="flex w-full flex-col gap-6 px-5">
+              {/* Profile Picture */}
+              <div className="flex w-full flex-col gap-2">
+                <Label className="text-emphasis text-sm font-medium leading-4">{t("profile_picture")}</Label>
+                <div className="flex flex-row items-center justify-start gap-2 rtl:justify-end">
+                  {user && (
+                    <div className="relative shrink-0">
+                      <UserAvatar size="lg" user={user} previewSrc={imageSrc} />
                     </div>
-
-                    {/* Timezone */}
-                    <div className="flex w-full flex-col gap-1.5">
-                      <Label className="text-emphasis mb-0 text-sm font-medium leading-4">
-                        {t("timezone")}
-                      </Label>
-                      <TimezoneSelect
-                        value={selectedTimeZone}
-                        onChange={({ value }) => setSelectedTimeZone(value)}
-                      />
-                      <p className="text-subtle text-xs font-normal leading-3">
-                        {t("current_time")}{" "}
-                        {dayjs().tz(selectedTimeZone).format("LT").toString().toLowerCase()}
-                      </p>
-                    </div>
-                  </div>
+                  )}
+                  <input ref={avatarRef} type="hidden" name="avatar" id="avatar" defaultValue={imageSrc} />
+                  <ImageUploader
+                    target="avatar"
+                    id="avatar-upload"
+                    buttonMsg={t("upload")}
+                    handleAvatarChange={(newAvatar) => {
+                      if (avatarRef.current) {
+                        avatarRef.current.value = newAvatar;
+                      }
+                      const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+                        window.HTMLInputElement.prototype,
+                        "value"
+                      )?.set;
+                      nativeInputValueSetter?.call(avatarRef.current, newAvatar);
+                      const ev2 = new Event("input", { bubbles: true });
+                      avatarRef.current?.dispatchEvent(ev2);
+                      updateProfileHandler(newAvatar);
+                    }}
+                    imageSrc={imageSrc}
+                  />
                 </div>
+                <p className="text-subtle text-xs font-normal leading-3">{t("onboarding_logo_size_hint")}</p>
               </div>
-            </div>
-          </div>
+
+              {/* Name */}
+              <div className="flex w-full flex-col gap-1.5">
+                <TextField label={t("your_name")} {...form.register("name")} placeholder="John Doe" />
+                {form.formState.errors.name && (
+                  <p className="text-error text-sm">{form.formState.errors.name.message}</p>
+                )}
+              </div>
+
+              {/* Username */}
+              <div className="flex w-full flex-col gap-1.5">
+                <UsernameAvailabilityField
+                  onSuccessMutation={async () => {
+                    // Refetch user to get updated username and save to store
+                    const updatedUser = await utils.viewer.me.get.fetch();
+                    if (updatedUser?.username) {
+                      setPersonalDetails({ username: updatedUser.username });
+                    }
+                  }}
+                />
+              </div>
+
+              {/* Bio */}
+              <div className="flex w-full flex-col gap-1.5">
+                <Label className="text-emphasis mb-0 text-sm font-medium leading-4">{t("bio")}</Label>
+                <TextArea {...form.register("bio")} className="min-h-[108px]" />
+                {form.formState.errors.bio && (
+                  <p className="text-error text-sm">{form.formState.errors.bio.message}</p>
+                )}
+              </div>
+            </form>
+          </FormProvider>
         </OnboardingCard>
+
+        {/* Right column - Browser view */}
+        <OnboardingBrowserView
+          avatar={imageSrc || personalDetails.avatar || user.avatar}
+          name={form.watch("name") || personalDetails.name || user.name || undefined}
+          bio={form.watch("bio") || personalDetails.bio || undefined}
+          username={personalDetails.username || user.username || undefined}
+        />
       </OnboardingLayout>
     </>
   );
diff --git a/apps/web/modules/onboarding/personal/video/personal-video-view.tsx b/apps/web/modules/onboarding/personal/video/personal-video-view.tsx
deleted file mode 100644
index 1fda826eb06cd4..00000000000000
--- a/apps/web/modules/onboarding/personal/video/personal-video-view.tsx
+++ /dev/null
@@ -1,162 +0,0 @@
-"use client";
-
-import { useRouter } from "next/navigation";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useTelemetry } from "@calcom/lib/hooks/useTelemetry";
-import { telemetryEventTypes } from "@calcom/lib/telemetry";
-import { userMetadata } from "@calcom/prisma/zod-utils";
-import { trpc } from "@calcom/trpc/react";
-import { Button } from "@calcom/ui/components/button";
-import { showToast } from "@calcom/ui/components/toast";
-
-import { InstallableAppCard } from "../_components/InstallableAppCard";
-import { OnboardingCard } from "../_components/OnboardingCard";
-import { OnboardingLayout } from "../_components/OnboardingLayout";
-import { SkipButton } from "../_components/SkipButton";
-import { useAppInstallation } from "../_components/useAppInstallation";
-
-type PersonalVideoViewProps = {
-  userEmail: string;
-};
-
-const DEFAULT_EVENT_TYPES = [
-  {
-    title: "15min_meeting",
-    slug: "15min",
-    length: 15,
-  },
-  {
-    title: "30min_meeting",
-    slug: "30min",
-    length: 30,
-  },
-  {
-    title: "secret_meeting",
-    slug: "secret",
-    length: 15,
-    hidden: true,
-  },
-];
-
-export const PersonalVideoView = ({ userEmail }: PersonalVideoViewProps) => {
-  const { data: user } = trpc.viewer.me.get.useQuery();
-  const router = useRouter();
-  const { t } = useLocale();
-  const telemetry = useTelemetry();
-  const utils = trpc.useUtils();
-  const { installingAppSlug, setInstallingAppSlug, createInstallHandlers } = useAppInstallation();
-
-  const { data: queryConnectedVideoApps, isPending } = trpc.viewer.apps.integrations.useQuery({
-    variant: "conferencing",
-    onlyInstalled: false,
-    sortByMostPopular: true,
-    sortByInstalledFirst: true,
-  });
-
-  const setDefaultConferencingApp = trpc.viewer.apps.setDefaultConferencingApp.useMutation({
-    onSuccess: async () => {
-      await utils.viewer.me.invalidate();
-    },
-    onError: (error) => {
-      showToast(t("something_went_wrong"), "error");
-      console.error(error);
-    },
-  });
-
-  const { data: eventTypes } = trpc.viewer.eventTypes.list.useQuery();
-  const createEventType = trpc.viewer.eventTypesHeavy.create.useMutation();
-
-  const mutation = trpc.viewer.me.updateProfile.useMutation({
-    onSuccess: async () => {
-      try {
-        // Create default event types if user has none
-        if (eventTypes?.length === 0) {
-          await Promise.all(
-            DEFAULT_EVENT_TYPES.map(async (event) => {
-              return createEventType.mutateAsync({
-                title: t(event.title),
-                slug: event.slug,
-                length: event.length,
-                hidden: event.hidden,
-              });
-            })
-          );
-        }
-      } catch (error) {
-        console.error(error);
-      }
-
-      await utils.viewer.me.get.refetch();
-      router.push("/event-types");
-    },
-  });
-
-  const handleContinue = async () => {
-    telemetry.event(telemetryEventTypes.onboardingFinished);
-    mutation.mutate({
-      completedOnboarding: true,
-    });
-  };
-
-  const handleSkip = async () => {
-    telemetry.event(telemetryEventTypes.onboardingFinished);
-    mutation.mutate({
-      completedOnboarding: true,
-    });
-  };
-
-  if (!user) {
-    return null;
-  }
-
-  // Check if user has a default conferencing app
-  const result = userMetadata.safeParse(user.metadata);
-  const metadata = result?.success ? result.data : null;
-  const hasDefaultConferencingApp = !!metadata?.defaultConferencingApp?.appSlug;
-
-  return (
-    <OnboardingLayout userEmail={userEmail} currentStep={4}>
-      <OnboardingCard
-        title={t("connect_video_app")}
-        subtitle={t("video_app_connection_subtitle")}
-        isLoading={isPending}
-        footer={
-          <Button
-            color="primary"
-            className="rounded-[10px]"
-            onClick={handleContinue}
-            loading={mutation.isPending}
-            disabled={mutation.isPending}>
-            {t("finish_and_start")}
-          </Button>
-        }>
-        <div className="scroll-bar grid max-h-[45vh] grid-cols-1 gap-3 overflow-y-scroll sm:grid-cols-2">
-          {queryConnectedVideoApps?.items
-            .filter((app) => app.slug !== "daily-video")
-            .map((app) => {
-              const shouldAutoSetDefault =
-                !hasDefaultConferencingApp && app.appData?.location?.linkType === "dynamic";
-
-              return (
-                <InstallableAppCard
-                  key={app.slug}
-                  app={app}
-                  isInstalling={installingAppSlug === app.slug}
-                  onInstallClick={setInstallingAppSlug}
-                  installOptions={createInstallHandlers(app.slug, (appSlug) => {
-                    // Auto-set as default if it's the first connected video app
-                    if (shouldAutoSetDefault) {
-                      setDefaultConferencingApp.mutate({ slug: appSlug });
-                    }
-                  })}
-                />
-              );
-            })}
-        </div>
-      </OnboardingCard>
-
-      <SkipButton onClick={handleSkip} disabled={mutation.isPending} />
-    </OnboardingLayout>
-  );
-};
diff --git a/apps/web/modules/onboarding/store/onboarding-store.ts b/apps/web/modules/onboarding/store/onboarding-store.ts
index 2da6bb02365362..52579e809f5356 100644
--- a/apps/web/modules/onboarding/store/onboarding-store.ts
+++ b/apps/web/modules/onboarding/store/onboarding-store.ts
@@ -31,6 +31,7 @@ export interface Invite {
 export interface TeamDetails {
   name: string;
   slug: string;
+  bio: string;
 }
 
 export interface TeamBrand {
@@ -104,6 +105,7 @@ const initialState = {
   teamDetails: {
     name: "",
     slug: "",
+    bio: "",
   },
   teamBrand: {
     color: "#000000",
diff --git a/apps/web/modules/onboarding/teams/brand/team-brand-view.tsx b/apps/web/modules/onboarding/teams/brand/team-brand-view.tsx
deleted file mode 100644
index 75fb540a5f8822..00000000000000
--- a/apps/web/modules/onboarding/teams/brand/team-brand-view.tsx
+++ /dev/null
@@ -1,258 +0,0 @@
-"use client";
-
-import * as Popover from "@radix-ui/react-popover";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
-import { HexColorPicker } from "react-colorful";
-
-import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { Button } from "@calcom/ui/components/button";
-import { Logo } from "@calcom/ui/components/logo";
-
-import { useOnboardingStore } from "../../store/onboarding-store";
-
-type TeamBrandViewProps = {
-  userEmail: string;
-};
-
-const BrandColorPicker = ({
-  value,
-  onChange,
-  t,
-}: {
-  value: string;
-  onChange: (value: string) => void;
-  t: (key: string) => string;
-}) => {
-  return (
-    <div className="border-default bg-default flex h-7 w-32 items-center gap-2 rounded-lg border px-2 py-1.5">
-      <Popover.Root>
-        <Popover.Trigger asChild>
-          <button
-            className="h-4 w-4 shrink-0 rounded-full border border-gray-200"
-            style={{ backgroundColor: value }}
-            aria-label={t("onboarding_pick_color_aria")}
-          />
-        </Popover.Trigger>
-        <Popover.Portal>
-          <Popover.Content align="start" sideOffset={5}>
-            <HexColorPicker color={value} onChange={onChange} className="!h-32 !w-32" />
-          </Popover.Content>
-        </Popover.Portal>
-      </Popover.Root>
-      <input
-        type="text"
-        value={value.replace("#", "")}
-        onChange={(e) => {
-          const newValue = e.target.value.startsWith("#") ? e.target.value : `#${e.target.value}`;
-          onChange(newValue);
-        }}
-        className="text-emphasis grow border-none bg-transparent text-sm font-medium leading-4 outline-none"
-        maxLength={6}
-      />
-    </div>
-  );
-};
-
-export const TeamBrandView = ({ userEmail }: TeamBrandViewProps) => {
-  const router = useRouter();
-  const { t } = useLocale();
-  const { teamBrand, setTeamBrand, teamDetails } = useOnboardingStore();
-
-  const [brandColor, setBrandColor] = useState("#000000");
-  const [_logoFile, setLogoFile] = useState<File | null>(null);
-  const [logoPreview, setLogoPreview] = useState<string | null>(null);
-
-  useEffect(() => {
-    setBrandColor(teamBrand.color);
-    setLogoPreview(teamBrand.logo);
-  }, [teamBrand]);
-
-  const handleLogoChange = (file: File | null) => {
-    setLogoFile(file);
-    if (file) {
-      const reader = new FileReader();
-      reader.onloadend = () => {
-        const base64 = reader.result as string;
-        setLogoPreview(base64);
-        setTeamBrand({ logo: base64 });
-      };
-      reader.readAsDataURL(file);
-    } else {
-      setLogoPreview(null);
-      setTeamBrand({ logo: null });
-    }
-  };
-
-  const handleContinue = () => {
-    setTeamBrand({ color: brandColor });
-    router.push("/onboarding/teams/invite");
-  };
-
-  const handleSkip = () => {
-    router.push("/onboarding/teams/invite");
-  };
-
-  return (
-    <div className="bg-default flex min-h-screen w-full flex-col items-start overflow-clip rounded-xl">
-      {/* Header */}
-      <div className="flex w-full items-center justify-between px-6 py-4">
-        <Logo className="h-5 w-auto" />
-
-        {/* Progress dots - centered */}
-        <div className="absolute left-1/2 flex -translate-x-1/2 items-center justify-center gap-1">
-          <div className="bg-emphasis h-1 w-1 rounded-full" />
-          <div className="bg-emphasis h-1 w-1 rounded-full" />
-          <div className="bg-emphasis h-1.5 w-1.5 rounded-full" />
-          <div className="bg-subtle h-1 w-1 rounded-full" />
-        </div>
-
-        <div className="bg-muted flex items-center gap-2 rounded-full px-3 py-2">
-          <p className="text-emphasis text-sm font-medium leading-none">{userEmail}</p>
-        </div>
-      </div>
-
-      {/* Main content */}
-      <div className="flex h-full w-full items-start justify-center px-6 py-8">
-        <div className="relative flex w-full max-w-[600px] flex-col gap-6">
-          {/* Card */}
-          <div className="bg-muted border-muted relative rounded-xl border p-1">
-            <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
-              {/* Card Header */}
-              <div className="flex w-full gap-1.5 px-5 py-4">
-                <div className="flex w-full flex-col gap-1">
-                  <h1 className="font-cal text-xl font-semibold leading-6">{t("customize_team_brand")}</h1>
-                  <p className="text-subtle text-sm font-medium leading-tight">{t("team_brand_subtitle")}</p>
-                </div>
-              </div>
-
-              {/* Form */}
-              <div className="bg-default border-muted w-full rounded-[10px] border">
-                <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
-                  <div className="flex w-full flex-col items-start">
-                    <div className="flex w-full gap-6 px-5 py-4">
-                      {/* Left side - Form */}
-                      <div className="flex w-full flex-col gap-6">
-                        {/* Brand Color */}
-                        <div className="flex w-full flex-col gap-6">
-                          <p className="text-emphasis text-sm font-medium leading-4">{t("brand_color")}</p>
-                          <div className="flex w-full items-center gap-2">
-                            <p className="text-subtle w-[98px] overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-4">
-                              {t("onboarding_primary_color_label")}
-                            </p>
-                            <BrandColorPicker
-                              value={brandColor}
-                              onChange={(value) => {
-                                setBrandColor(value);
-                                setTeamBrand({ color: value });
-                              }}
-                              t={t}
-                            />
-                          </div>
-                        </div>
-
-                        {/* Logo Upload */}
-                        <div className="flex w-full flex-col gap-2">
-                          <p className="text-emphasis text-sm font-medium leading-4">{t("logo")}</p>
-                          <div className="flex items-center gap-2">
-                            <div className="bg-muted border-muted relative h-16 w-16 shrink-0 overflow-hidden rounded-md border">
-                              {logoPreview && (
-                                <img
-                                  src={logoPreview}
-                                  alt={t("onboarding_logo_preview_alt")}
-                                  className="h-full w-full object-cover"
-                                />
-                              )}
-                            </div>
-                            <div className="flex flex-col gap-2">
-                              <Button
-                                color="secondary"
-                                size="sm"
-                                onClick={() => document.getElementById("logo-upload")?.click()}>
-                                {t("upload")}
-                              </Button>
-                              <input
-                                id="logo-upload"
-                                type="file"
-                                accept="image/*"
-                                className="hidden"
-                                onChange={(e) => handleLogoChange(e.target.files?.[0] || null)}
-                              />
-                            </div>
-                          </div>
-                          <p className="text-subtle text-xs font-normal leading-3">
-                            {t("onboarding_logo_size_hint")}
-                          </p>
-                        </div>
-                      </div>
-
-                      {/* Right side - Preview */}
-                      <div className="bg-muted border-muted flex hidden h-[260px] w-full grow overflow-hidden rounded-[10px] border p-5 md:block">
-                        <div className="flex flex-col gap-2.5">
-                          <p className="text-subtle text-sm font-medium leading-4">{t("preview")}</p>
-                          <div className="border-subtle bg-default relative flex w-[110%] flex-col gap-2.5 rounded-md border px-5 pb-5 pt-4">
-                            {/* Content */}
-                            <div className="flex flex-col gap-4">
-                              <div className="flex flex-col gap-3 p-1">
-                                <div className="flex flex-col gap-3">
-                                  {/* Logo preview */}
-                                  <div className="bg-muted z-20 h-9 w-9 shrink-0 overflow-hidden rounded-md border-2 border-[var(--cal-bg)]">
-                                    {logoPreview && (
-                                      <img
-                                        src={logoPreview}
-                                        alt={t("onboarding_logo_preview_alt")}
-                                        className="h-full w-full object-cover"
-                                      />
-                                    )}
-                                  </div>
-                                  <p className="text-subtle text-sm font-medium capitalize leading-4 ">
-                                    {teamDetails.name || t("onboarding_preview_nameless")}
-                                  </p>
-                                </div>
-                                <div className="flex flex-col gap-3">
-                                  <div className="flex flex-col gap-3">
-                                    <p className="font-cal text-xl leading-5 tracking-[0.2px]">
-                                      {t("onboarding_preview_example_title")}
-                                    </p>
-                                    <p className="text-subtle text-sm font-medium leading-5">
-                                      {t("onboarding_preview_example_description")}
-                                    </p>
-                                  </div>
-                                </div>
-                              </div>
-                              <div className="flex flex-col gap-1">
-                                {[134, 104, 84, 104].map((width, i) => (
-                                  <div key={i} className="flex items-center gap-2 p-1">
-                                    <div className="bg-subtle h-5 w-5 shrink-0 rounded-full" />
-                                    <div
-                                      className="bg-subtle h-2.5 rounded-full"
-                                      style={{ width: `${width}px` }}
-                                    />
-                                  </div>
-                                ))}
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-
-              {/* Footer */}
-              <div className="flex w-full items-center justify-end gap-1 px-5 py-4">
-                <Button color="minimal" className="rounded-[10px]" onClick={handleSkip}>
-                  {t("ill_do_this_later")}
-                </Button>
-                <Button color="primary" className="rounded-[10px]" onClick={handleContinue}>
-                  {t("continue")}
-                </Button>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/apps/web/modules/onboarding/teams/details/team-details-view.tsx b/apps/web/modules/onboarding/teams/details/team-details-view.tsx
index 410b8ca86d8114..ed320f485f17e0 100644
--- a/apps/web/modules/onboarding/teams/details/team-details-view.tsx
+++ b/apps/web/modules/onboarding/teams/details/team-details-view.tsx
@@ -1,14 +1,18 @@
 "use client";
 
 import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import slugify from "@calcom/lib/slugify";
+import { Avatar } from "@calcom/ui/components/avatar";
 import { Button } from "@calcom/ui/components/button";
-import { Label, TextField } from "@calcom/ui/components/form";
-import { Logo } from "@calcom/ui/components/logo";
+import { Label, TextField, TextArea } from "@calcom/ui/components/form";
+import { ImageUploader } from "@calcom/ui/components/image-uploader";
 
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
+import { OnboardingBrowserView } from "../../components/onboarding-browser-view";
 import { OnboardingContinuationPrompt } from "../../components/onboarding-continuation-prompt";
 import { useOnboardingStore } from "../../store/onboarding-store";
 import { ValidatedTeamSlug } from "./validated-team-slug";
@@ -20,20 +24,25 @@ type TeamDetailsViewProps = {
 export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => {
   const router = useRouter();
   const { t } = useLocale();
-  const { teamDetails, setTeamDetails } = useOnboardingStore();
+  const { teamDetails, teamBrand, setTeamDetails, setTeamBrand } = useOnboardingStore();
 
+  const logoRef = useRef<HTMLInputElement>(null);
   const [teamName, setTeamName] = useState("");
   const [teamSlug, setTeamSlug] = useState("");
+  const [teamBio, setTeamBio] = useState("");
+  const [teamLogo, setTeamLogo] = useState<string>("");
   const [isSlugValid, setIsSlugValid] = useState(false);
   const [isSlugManuallyEdited, setIsSlugManuallyEdited] = useState(false);
 
   useEffect(() => {
     setTeamName(teamDetails.name);
     setTeamSlug(teamDetails.slug);
+    setTeamBio(teamDetails.bio);
+    setTeamLogo(teamBrand.logo || "");
     if (teamDetails.slug) {
       setIsSlugManuallyEdited(true);
     }
-  }, [teamDetails]);
+  }, [teamDetails, teamBrand]);
 
   useEffect(() => {
     if (!isSlugManuallyEdited && teamName) {
@@ -47,6 +56,13 @@ export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => {
     setIsSlugManuallyEdited(true);
   };
 
+  const handleLogoChange = (newLogo: string) => {
+    if (logoRef.current) {
+      logoRef.current.value = newLogo;
+    }
+    setTeamLogo(newLogo);
+  };
+
   const handleContinue = () => {
     if (!isSlugValid) {
       return;
@@ -55,89 +71,101 @@ export const TeamDetailsView = ({ userEmail }: TeamDetailsViewProps) => {
     setTeamDetails({
       name: teamName,
       slug: teamSlug,
+      bio: teamBio,
     });
-    router.push("/onboarding/teams/brand");
+
+    setTeamBrand({
+      logo: teamLogo || null,
+    });
+
+    router.push("/onboarding/teams/invite");
   };
 
   return (
-    <div className="bg-default flex min-h-screen w-full flex-col items-start overflow-clip rounded-xl">
+    <>
       <OnboardingContinuationPrompt />
-      {/* Header */}
-      <div className="flex w-full items-center justify-between px-6 py-4">
-        <Logo className="h-5 w-auto" />
-
-        {/* Progress dots - centered */}
-        <div className="absolute left-1/2 flex -translate-x-1/2 items-center justify-center gap-1">
-          <div className="bg-emphasis h-1 w-1 rounded-full" />
-          <div className="bg-emphasis h-1.5 w-1.5 rounded-full" />
-          <div className="bg-subtle h-1 w-1 rounded-full" />
-          <div className="bg-subtle h-1 w-1 rounded-full" />
-        </div>
-
-        <div className="bg-muted flex items-center gap-2 rounded-full px-3 py-2">
-          <p className="text-emphasis text-sm font-medium leading-none">{userEmail}</p>
-        </div>
-      </div>
-
-      {/* Main content */}
-      <div className="flex h-full w-full items-start justify-center px-6 py-8">
-        <div className="flex w-full max-w-[600px] flex-col gap-6">
-          {/* Card */}
-          <div className="bg-muted border-muted relative rounded-xl border p-1">
-            <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
-              {/* Card Header */}
-              <div className="flex w-full gap-1.5 px-5 py-4">
-                <div className="flex w-full flex-col gap-1">
-                  <h1 className="font-cal text-xl font-semibold leading-6">{t("create_your_team")}</h1>
-                  <p className="text-subtle text-sm font-medium leading-tight">
-                    {t("team_onboarding_details_subtitle")}
-                  </p>
+      <OnboardingLayout userEmail={userEmail} currentStep={2}>
+        {/* Left column - Main content */}
+        <OnboardingCard
+          title={t("create_your_team")}
+          subtitle={t("team_onboarding_details_subtitle")}
+          footer={
+            <div className="flex w-full items-center justify-end gap-4">
+              <Button
+                color="minimal"
+                className="rounded-[10px]"
+                onClick={() => router.push("/onboarding/getting-started")}>
+                {t("back")}
+              </Button>
+              <Button
+                color="primary"
+                className="rounded-[10px]"
+                onClick={handleContinue}
+                disabled={!isSlugValid || !teamName || !teamSlug}>
+                {t("continue")}
+              </Button>
+            </div>
+          }>
+          <div className="flex w-full flex-col gap-4 px-5">
+            {/* Team Profile Picture */}
+            <div className="flex w-full flex-col gap-2">
+              <Label className="text-emphasis text-sm font-medium leading-4">{t("team_logo")}</Label>
+              <div className="flex flex-row items-center justify-start gap-2 rtl:justify-end">
+                <div className="relative shrink-0">
+                  <Avatar
+                    size="lg"
+                    imageSrc={teamLogo || undefined}
+                    alt={teamName || "Team"}
+                    className="border-2 border-white"
+                  />
                 </div>
+                <input ref={logoRef} type="hidden" name="logo" id="logo" defaultValue={teamLogo} />
+                <ImageUploader
+                  target="avatar"
+                  id="team-logo-upload"
+                  buttonMsg={t("upload")}
+                  handleAvatarChange={handleLogoChange}
+                  imageSrc={teamLogo}
+                />
               </div>
+              <p className="text-subtle text-xs font-normal leading-3">{t("onboarding_logo_size_hint")}</p>
+            </div>
 
-              {/* Form */}
-              <div className="bg-default border-muted w-full rounded-[10px] border">
-                <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
-                  <div className="flex w-full flex-col items-start">
-                    <div className="flex w-full gap-6 px-5 py-5">
-                      <div className="flex w-full flex-col gap-4 rounded-xl">
-                        {/* Team Name */}
-                        <div className="flex w-full flex-col gap-1.5">
-                          <Label className="text-emphasis text-sm font-medium leading-4">{t("team_name")}</Label>
-                          <TextField
-                            value={teamName}
-                            onChange={(e) => setTeamName(e.target.value)}
-                            placeholder="Acme Inc."
-                            className="border-default h-7 rounded-[10px] border px-2 py-1.5 text-sm"
-                          />
-                        </div>
-
-                        {/* Team Slug */}
-                        <ValidatedTeamSlug
-                          value={teamSlug}
-                          onChange={handleSlugChange}
-                          onValidationChange={setIsSlugValid}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
+            {/* Team Name */}
+            <div className="flex w-full flex-col gap-1.5">
+              <Label className="text-emphasis text-sm font-medium leading-4">{t("team_name")}</Label>
+              <TextField
+                value={teamName}
+                onChange={(e) => setTeamName(e.target.value)}
+                placeholder="Acme Inc."
+                className="border-default h-7 rounded-[10px] border px-2 py-1.5 text-sm"
+              />
+            </div>
 
-              {/* Footer */}
-              <div className="flex w-full items-center justify-end gap-1 px-5 py-4">
-                <Button
-                  color="primary"
-                  className="rounded-[10px]"
-                  onClick={handleContinue}
-                  disabled={!isSlugValid || !teamName || !teamSlug}>
-                  {t("continue")}
-                </Button>
-              </div>
+            {/* Team Slug */}
+            <ValidatedTeamSlug
+              value={teamSlug}
+              onChange={handleSlugChange}
+              onValidationChange={setIsSlugValid}
+            />
+
+            {/* Team Bio */}
+            <div className="flex w-full flex-col gap-1.5">
+              <Label className="text-emphasis text-sm font-medium leading-4">{t("team_bio")}</Label>
+              <TextArea
+                value={teamBio}
+                onChange={(e) => setTeamBio(e.target.value)}
+                placeholder={t("team_bio_placeholder")}
+                className="border-default min-h-[80px] rounded-[10px] border px-2 py-1.5 text-sm"
+                rows={3}
+              />
             </div>
           </div>
-        </div>
-      </div>
-    </div>
+        </OnboardingCard>
+
+        {/* Right column - Browser view */}
+        <OnboardingBrowserView teamSlug={teamSlug} name={teamName} bio={teamBio} avatar={teamLogo || null} />
+      </OnboardingLayout>
+    </>
   );
 };
diff --git a/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx b/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx
index 5d1e92097e2f77..4490b2bf86763c 100644
--- a/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx
+++ b/apps/web/modules/onboarding/teams/details/validated-team-slug.tsx
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useRef, useState, useTransition } from "react";
 
 import { WEBAPP_URL } from "@calcom/lib/constants";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
+import slugify from "@calcom/lib/slugify";
 import classNames from "@calcom/ui/classNames";
 import { Label, TextField } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
@@ -73,6 +74,15 @@ export function ValidatedTeamSlug({ value, onChange, onValidationChange }: Valid
     };
   }, [value, validateSlug]);
 
+  const handleBlur = () => {
+    if (value) {
+      const slugified = slugify(value);
+      if (slugified !== value) {
+        onChange(slugified);
+      }
+    }
+  };
+
   const urlPrefix = `${WEBAPP_URL}/team/`;
 
   return (
@@ -81,6 +91,7 @@ export function ValidatedTeamSlug({ value, onChange, onValidationChange }: Valid
       <TextField
         value={value}
         onChange={(e) => onChange(e.target.value)}
+        onBlur={handleBlur}
         placeholder="acme"
         addOnLeading={urlPrefix}
         addOnSuffix={
diff --git a/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx b/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx
new file mode 100644
index 00000000000000..661a2dc98c7471
--- /dev/null
+++ b/apps/web/modules/onboarding/teams/invite/csv-upload-modal.tsx
@@ -0,0 +1,245 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import React, { useRef, useState } from "react";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { Button } from "@calcom/ui/components/button";
+import { Dialog, DialogContent } from "@calcom/ui/components/dialog";
+import { Icon } from "@calcom/ui/components/icon";
+import { Logo } from "@calcom/ui/components/logo";
+import { showToast } from "@calcom/ui/components/toast";
+
+import { useOnboardingStore, type Invite } from "../../store/onboarding-store";
+
+type CSVUploadModalProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export const CSVUploadModal = ({ isOpen, onClose }: CSVUploadModalProps) => {
+  const { t } = useLocale();
+  const router = useRouter();
+  const store = useOnboardingStore();
+  const { setTeamInvites, teamDetails } = store;
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+
+  const handleFileSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (file) {
+      // Validate file type
+      if (!file.name.endsWith(".csv")) {
+        showToast(t("please_upload_csv_file"), "error");
+        return;
+      }
+      setSelectedFile(file);
+    }
+  };
+
+  const handleDownloadTemplate = () => {
+    // Create a CSV template with headers
+    const headers = ["email", "role"];
+    const exampleRow = ["example@email.com", "MEMBER"];
+    const csvContent = [headers.join(","), exampleRow.join(",")].join("\n");
+
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "team_invite_template.csv";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    window.URL.revokeObjectURL(url);
+
+    showToast(t("template_downloaded"), "success");
+  };
+
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      showToast(t("please_select_file"), "error");
+      return;
+    }
+
+    setIsUploading(true);
+
+    try {
+      // Read and parse the CSV file
+      const text = await selectedFile.text();
+      const lines = text.split("\n").filter((line) => line.trim());
+
+      if (lines.length < 2) {
+        showToast(t("csv_file_empty"), "error");
+        setIsUploading(false);
+        return;
+      }
+
+      // Parse CSV (simple implementation - may need enhancement for complex CSVs)
+      const headers = lines[0].split(",").map((h) => h.trim().toLowerCase());
+      const emailIndex = headers.indexOf("email");
+      const roleIndex = headers.indexOf("role");
+
+      if (emailIndex === -1) {
+        showToast(t("csv_missing_email_column"), "error");
+        setIsUploading(false);
+        return;
+      }
+
+      // Filter out empty emails and validate
+      const parsedInvites = lines
+        .slice(1)
+        .map((line) => {
+          const values = line.split(",").map((v) => v.trim());
+          return {
+            email: values[emailIndex]?.trim(),
+            role: (roleIndex !== -1 ? values[roleIndex]?.trim().toUpperCase() : "MEMBER") as
+              | "MEMBER"
+              | "ADMIN",
+          };
+        })
+        .filter((invite) => invite.email && invite.email.length > 0);
+
+      if (parsedInvites.length === 0) {
+        showToast(t("csv_file_empty"), "error");
+        setIsUploading(false);
+        return;
+      }
+
+      // Convert to Invite format with team name
+      const invites: Invite[] = parsedInvites.map((invite) => ({
+        email: invite.email,
+        team: teamDetails.name,
+        role: invite.role === "ADMIN" ? "ADMIN" : "MEMBER",
+      }));
+
+      // Save invites to store
+      setTeamInvites(invites);
+
+      showToast(t("csv_uploaded_successfully", { count: invites.length }), "success");
+      onClose();
+
+      // Navigate to email page to display the invites
+      router.push("/onboarding/teams/invite/email");
+    } catch (error) {
+      console.error("Error uploading CSV:", error);
+      showToast(t("error_uploading_csv"), "error");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setSelectedFile(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent size="default" className="!p-0">
+        <div className="flex flex-col gap-4 p-6">
+          <div className="flex flex-col items-center gap-1">
+            <Logo className="h-10 w-auto" />
+          </div>
+
+          {/* File upload illustration */}
+          <div
+            className="relative mx-auto flex items-center justify-center"
+            style={{ width: 320, height: 180 }}>
+            <div
+              className="from-default to-muted border-subtle flex items-center justify-center rounded-2xl border bg-gradient-to-br p-8 shadow-sm"
+              style={{ width: 200, height: 150 }}>
+              {selectedFile ? (
+                <div className="flex flex-col items-center gap-3">
+                  <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-4 shadow-sm">
+                    <Icon name="file-text" className="text-emphasis" style={{ width: 32, height: 32 }} />
+                  </div>
+                  <div className="flex flex-col items-center gap-1">
+                    <p className="text-emphasis text-sm font-medium">{selectedFile.name}</p>
+                    <p className="text-subtle text-xs">{(selectedFile.size / 1024).toFixed(2)} KB</p>
+                  </div>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center gap-3">
+                  <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-4 shadow-sm">
+                    <Icon
+                      name="upload"
+                      className="text-emphasis opacity-70"
+                      style={{ width: 32, height: 32 }}
+                    />
+                  </div>
+                  <p className="text-subtle text-center text-sm">{t("upload_csv_subtitle")}</p>
+                </div>
+              )}
+            </div>
+          </div>
+
+          <div className="mb-2 flex flex-col gap-2 text-center">
+            <h2 className="font-cal text-emphasis text-2xl leading-none">{t("upload_csv_file")}</h2>
+            <p className="text-default text-sm leading-normal">{t("upload_csv_description")}</p>
+          </div>
+
+          <div className="mb-2 flex flex-col gap-3">
+            {/* Download template */}
+            <div className="bg-muted border-subtle flex items-center gap-3 rounded-lg border p-4">
+              <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-2 shadow-sm">
+                <Icon name="download" className="text-emphasis" style={{ width: 16, height: 16 }} />
+              </div>
+              <div className="flex-1">
+                <p className="text-emphasis text-sm font-medium">{t("need_template")}</p>
+                <p className="text-subtle text-xs">{t("download_csv_template_description")}</p>
+              </div>
+              <Button color="secondary" StartIcon="download" size="sm" onClick={handleDownloadTemplate}>
+                {t("download_template")}
+              </Button>
+            </div>
+
+            {/* File upload */}
+            <div className="bg-muted border-subtle flex items-center gap-3 rounded-lg border p-4">
+              <div className="from-default to-muted border-subtle flex items-center justify-center rounded-full border bg-gradient-to-b p-2 shadow-sm">
+                <Icon name="upload" className="text-emphasis" style={{ width: 16, height: 16 }} />
+              </div>
+              <div className="flex-1">
+                <p className="text-emphasis text-sm font-medium">{t("upload_your_file")}</p>
+                <p className="text-subtle text-xs">
+                  {selectedFile ? selectedFile.name : t("upload_csv_description")}
+                </p>
+              </div>
+              <input
+                ref={fileInputRef}
+                type="file"
+                accept=".csv"
+                onChange={handleFileSelect}
+                className="hidden"
+              />
+              <Button
+                color="secondary"
+                StartIcon={selectedFile ? "file-text" : "upload"}
+                size="sm"
+                onClick={() => fileInputRef.current?.click()}>
+                {t("choose_file")}
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-muted border-subtle mt-6 flex items-center justify-between rounded-b-2xl border-t px-8 py-6">
+          <Button color="minimal" onClick={handleClose} disabled={isUploading}>
+            {t("cancel")}
+          </Button>
+          <Button
+            color="primary"
+            onClick={handleUpload}
+            disabled={!selectedFile || isUploading}
+            loading={isUploading}>
+            {t("upload")}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/modules/onboarding/teams/invite/email/team-invite-email-view.tsx b/apps/web/modules/onboarding/teams/invite/email/team-invite-email-view.tsx
new file mode 100644
index 00000000000000..a2f176b33d0bc0
--- /dev/null
+++ b/apps/web/modules/onboarding/teams/invite/email/team-invite-email-view.tsx
@@ -0,0 +1,188 @@
+"use client";
+
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useRouter } from "next/navigation";
+import React from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import { z } from "zod";
+
+import { useLocale } from "@calcom/lib/hooks/useLocale";
+import { InfoBadge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { Form, Label, TextField, ToggleGroup } from "@calcom/ui/components/form";
+import { Icon } from "@calcom/ui/components/icon";
+
+import { OnboardingCard } from "../../../components/OnboardingCard";
+import { OnboardingLayout } from "../../../components/OnboardingLayout";
+import { OnboardingInviteBrowserView } from "../../../components/onboarding-invite-browser-view";
+import { useCreateTeam } from "../../../hooks/useCreateTeam";
+import { useOnboardingStore, type InviteRole } from "../../../store/onboarding-store";
+
+type TeamInviteEmailViewProps = {
+  userEmail: string;
+};
+
+type FormValues = {
+  invites: {
+    email: string;
+    role: InviteRole;
+  }[];
+};
+
+export const TeamInviteEmailView = ({ userEmail }: TeamInviteEmailViewProps) => {
+  const router = useRouter();
+  const { t } = useLocale();
+
+  const store = useOnboardingStore();
+  const { teamInvites, setTeamInvites, teamDetails } = store;
+  const [inviteRole, setInviteRole] = React.useState<InviteRole>("MEMBER");
+  const { createTeam, isSubmitting } = useCreateTeam();
+
+  const formSchema = z.object({
+    invites: z.array(
+      z.object({
+        email: z.string().email(t("invalid_email_address")),
+        role: z.enum(["MEMBER", "ADMIN"]),
+      })
+    ),
+  });
+
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      invites:
+        teamInvites.length > 0
+          ? teamInvites.map((inv) => ({ email: inv.email, role: inv.role }))
+          : [{ email: "", role: inviteRole }],
+    },
+  });
+
+  const { fields, append, remove } = useFieldArray({
+    control: form.control,
+    name: "invites",
+  });
+
+  const handleContinue = async (data: FormValues) => {
+    const invitesWithTeam = data.invites.map((invite) => ({
+      email: invite.email,
+      team: teamDetails.name,
+      role: invite.role,
+    }));
+
+    setTeamInvites(invitesWithTeam);
+
+    // Create the team (will handle checkout redirect if needed)
+    await createTeam(store);
+  };
+
+  const handleBack = () => {
+    router.push("/onboarding/teams/invite");
+  };
+
+  const hasValidInvites = fields.some((_, index) => {
+    const email = form.watch(`invites.${index}.email`);
+    return email && email.trim().length > 0;
+  });
+
+  return (
+    <OnboardingLayout userEmail={userEmail} currentStep={3}>
+      {/* Left column - Main content */}
+      <div className="flex w-full flex-col gap-4">
+        <OnboardingCard
+          title={t("invite_via_email")}
+          subtitle={t("team_invite_subtitle")}
+          footer={
+            <div className="flex w-full items-center justify-end gap-4">
+              <Button color="minimal" className="rounded-[10px]" onClick={handleBack} disabled={isSubmitting}>
+                {t("back")}
+              </Button>
+              <Button
+                type="submit"
+                color="primary"
+                className="rounded-[10px]"
+                disabled={!hasValidInvites || isSubmitting}
+                loading={isSubmitting}
+                onClick={form.handleSubmit(handleContinue)}>
+                {t("continue")}
+              </Button>
+            </div>
+          }>
+          <div className="flex w-full flex-col gap-4 px-5">
+            <Form form={form} handleSubmit={handleContinue} className="w-full">
+              <div className="flex w-full flex-col gap-4">
+                {/* Email inputs */}
+                <div className="flex flex-col gap-2">
+                  <Label className="text-emphasis text-sm font-medium">{t("email")}</Label>
+
+                  <div className="scroll-bar flex max-h-72 flex-col gap-2 overflow-y-auto">
+                    {fields.map((field, index) => (
+                      <div key={field.id} className="flex items-start gap-0.5">
+                        <div className="flex-1">
+                          <TextField
+                            labelSrOnly
+                            {...form.register(`invites.${index}.email`)}
+                            placeholder={`rick@cal.com`}
+                            type="email"
+                            size="sm"
+                          />
+                        </div>
+                        <Button
+                          type="button"
+                          color="minimal"
+                          variant="icon"
+                          size="sm"
+                          className="h-7 w-7"
+                          disabled={fields.length === 1}
+                          onClick={() => remove(index)}>
+                          <Icon name="x" className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+
+                  {/* Add button */}
+                  <Button
+                    type="button"
+                    color="secondary"
+                    size="sm"
+                    StartIcon="plus"
+                    className="w-fit"
+                    onClick={() => append({ email: "", role: inviteRole })}>
+                    {t("add")}
+                  </Button>
+                </div>
+
+                {/* Role selector */}
+                <div className="flex items-center justify-between">
+                  <div className="hidden items-center gap-2 md:flex">
+                    <span className="text-emphasis text-sm">{t("onboarding_invite_all_as")}</span>
+                    <ToggleGroup
+                      value={inviteRole}
+                      onValueChange={(value) => {
+                        if (value) {
+                          setInviteRole(value as InviteRole);
+                          // Update all invites with the new role
+                          fields.forEach((_, index) => {
+                            form.setValue(`invites.${index}.role`, value as InviteRole);
+                          });
+                        }
+                      }}
+                      options={[
+                        { value: "MEMBER", label: t("members") },
+                        { value: "ADMIN", label: t("onboarding_admins") },
+                      ]}
+                    />
+                    <InfoBadge content={t("onboarding_modify_roles_later")} />
+                  </div>
+                </div>
+              </div>
+            </Form>
+          </div>
+        </OnboardingCard>
+      </div>
+
+      {/* Right column - Browser view */}
+      <OnboardingInviteBrowserView teamName={teamDetails.name} />
+    </OnboardingLayout>
+  );
+};
diff --git a/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx b/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx
index 470811cf7d8a49..8b049fc25b28db 100644
--- a/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx
+++ b/apps/web/modules/onboarding/teams/invite/team-invite-view.tsx
@@ -1,221 +1,168 @@
 "use client";
 
-import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import React from "react";
-import { useForm, useFieldArray } from "react-hook-form";
-import { z } from "zod";
 
+import { useFlags } from "@calcom/features/flags/hooks";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { Button } from "@calcom/ui/components/button";
-import { Form, Label, TextField, ToggleGroup } from "@calcom/ui/components/form";
 import { Icon } from "@calcom/ui/components/icon";
-import { Logo } from "@calcom/ui/components/logo";
 
+import { OnboardingCard } from "../../components/OnboardingCard";
+import { OnboardingLayout } from "../../components/OnboardingLayout";
+import { OnboardingInviteBrowserView } from "../../components/onboarding-invite-browser-view";
 import { useCreateTeam } from "../../hooks/useCreateTeam";
-import { useOnboardingStore, type InviteRole } from "../../store/onboarding-store";
+import { useOnboardingStore } from "../../store/onboarding-store";
+import { CSVUploadModal } from "./csv-upload-modal";
 
 type TeamInviteViewProps = {
   userEmail: string;
 };
 
-type FormValues = {
-  invites: {
-    email: string;
-    role: InviteRole;
-  }[];
-};
-
 export const TeamInviteView = ({ userEmail }: TeamInviteViewProps) => {
   const router = useRouter();
   const { t } = useLocale();
+  const flags = useFlags();
 
   const store = useOnboardingStore();
-  const { teamInvites, setTeamInvites, teamDetails } = store;
-  const [inviteRole, setInviteRole] = React.useState<InviteRole>("MEMBER");
+  const { setTeamInvites, teamDetails } = store;
   const { createTeam, isSubmitting } = useCreateTeam();
+  const [isCSVModalOpen, setIsCSVModalOpen] = React.useState(false);
 
-  const formSchema = z.object({
-    invites: z.array(
-      z.object({
-        email: z.string().email(t("invalid_email_address")),
-        role: z.enum(["MEMBER", "ADMIN"]),
-      })
-    ),
-  });
-
-  const form = useForm<FormValues>({
-    resolver: zodResolver(formSchema),
-    defaultValues: {
-      invites:
-        teamInvites.length > 0
-          ? teamInvites.map((inv) => ({ email: inv.email, role: inv.role }))
-          : [{ email: "", role: inviteRole }],
-    },
-  });
-
-  const { fields, append, remove } = useFieldArray({
-    control: form.control,
-    name: "invites",
-  });
-
-  const handleContinue = async (data: FormValues) => {
-    const invitesWithTeam = data.invites.map((invite) => ({
-      email: invite.email,
-      team: teamDetails.name,
-      role: invite.role,
-    }));
-
-    setTeamInvites(invitesWithTeam);
-
-    // Create the team (will handle checkout redirect if needed)
-    await createTeam(store);
+  const googleWorkspaceEnabled = flags["google-workspace-directory"];
+
+  const handleGoogleWorkspaceConnect = () => {
+    // TODO: Implement Google Workspace connection
+    console.log("Connect Google Workspace");
+  };
+
+  const handleInviteViaEmail = () => {
+    router.push("/onboarding/teams/invite/email");
+  };
+
+  const handleUploadCSV = () => {
+    setIsCSVModalOpen(true);
+  };
+
+  const handleCopyInviteLink = () => {
+    // Disabled for now as per requirements
+    console.log("Copy invite link - disabled");
   };
 
   const handleSkip = async () => {
     setTeamInvites([]);
-
     // Create the team without invites (will handle checkout redirect if needed)
     await createTeam(store);
   };
 
-  const hasValidInvites = fields.some((_, index) => {
-    const email = form.watch(`invites.${index}.email`);
-    return email && email.trim().length > 0;
-  });
+  const handleInvite = async () => {
+    // For now, just proceed to create the team
+    // The actual invites will be handled in the email page
+    await createTeam(store);
+  };
 
   return (
-    <div className="bg-default flex min-h-screen w-full flex-col items-start overflow-clip rounded-xl">
-      {/* Header */}
-      <div className="flex w-full items-center justify-between px-6 py-4">
-        <Logo className="h-5 w-auto" />
-
-        {/* Progress dots - centered */}
-        <div className="absolute left-1/2 flex -translate-x-1/2 items-center justify-center gap-1">
-          <div className="bg-emphasis h-1 w-1 rounded-full" />
-          <div className="bg-emphasis h-1 w-1 rounded-full" />
-          <div className="bg-emphasis h-1 w-1 rounded-full" />
-          <div className="bg-emphasis h-1.5 w-1.5 rounded-full" />
-        </div>
-
-        <div className="bg-muted flex items-center gap-2 rounded-full px-3 py-2">
-          <p className="text-emphasis text-sm font-medium leading-none">{userEmail}</p>
-        </div>
-      </div>
-
-      {/* Main content */}
-      <div className="flex h-full w-full items-start justify-center px-6 py-8">
-        <div className="flex w-full max-w-[600px] flex-col gap-4">
-          {/* Card */}
-          <div className="bg-muted border-muted relative rounded-xl border p-1">
-            <div className="rounded-inherit flex w-full flex-col items-start overflow-clip">
-              {/* Card Header */}
-              <div className="flex w-full gap-1.5 px-5 py-4">
-                <div className="flex w-full flex-col gap-1">
-                  <h1 className="font-cal text-xl font-semibold leading-6">{t("invite_team_members")}</h1>
-                  <p className="text-subtle text-sm font-medium leading-tight">{t("team_invite_subtitle")}</p>
+    <>
+      <OnboardingLayout userEmail={userEmail} currentStep={3}>
+        {/* Left column - Main content */}
+        <div className="flex w-full flex-col gap-4">
+          <OnboardingCard
+            title={t("invite")}
+            subtitle={t("onboarding_invite_subtitle")}
+            footer={
+              <div className="flex w-full items-center justify-between gap-4">
+                <Button
+                  color="minimal"
+                  className="rounded-[10px]"
+                  onClick={() => router.push("/onboarding/teams/details")}
+                  disabled={isSubmitting}>
+                  {t("back")}
+                </Button>
+                <div className="flex items-center gap-2">
+                  <Button
+                    color="minimal"
+                    className="rounded-[10px]"
+                    onClick={handleSkip}
+                    disabled={isSubmitting}>
+                    {t("onboarding_skip_for_now")}
+                  </Button>
+                  <Button
+                    color="primary"
+                    className="rounded-[10px]"
+                    onClick={handleInvite}
+                    disabled={isSubmitting}
+                    loading={isSubmitting}>
+                    {t("invite")}
+                  </Button>
                 </div>
               </div>
+            }>
+            <div className="flex w-full flex-col gap-6 px-5">
+              {/* Google Workspace Connect - Only show if feature flag is enabled */}
+              {googleWorkspaceEnabled && (
+                <>
+                  <Button
+                    color="secondary"
+                    className="h-8 w-full rounded-[10px]"
+                    onClick={handleGoogleWorkspaceConnect}
+                    disabled={isSubmitting}>
+                    {t("connect_google_workspace")}
+                  </Button>
+
+                  {/* Divider with "or" */}
+                  <div className="flex w-full items-center gap-2">
+                    <div className="border-subtle h-px flex-1 border-t" />
+                    <span className="text-subtle text-sm font-medium">{t("or")}</span>
+                    <div className="border-subtle h-px flex-1 border-t" />
+                  </div>
+                </>
+              )}
+
+              {/* Invite options */}
+              <div className="flex w-full flex-col gap-4">
+                <Button
+                  color="secondary"
+                  className="h-8 w-full justify-center rounded-[10px]"
+                  onClick={handleInviteViaEmail}
+                  disabled={isSubmitting}>
+                  <div className="flex items-center gap-1">
+                    <Icon name="mail" className="h-4 w-4" />
+                    <span>{t("invite_via_email")}</span>
+                  </div>
+                </Button>
 
-              {/* Content */}
-              <div className="bg-default border-subtle w-full rounded-md border">
-                <div className="flex w-full flex-col gap-8 px-5 py-5">
-                  <Form form={form} handleSubmit={handleContinue} className="w-full">
-                    <div className="flex w-full flex-col gap-4">
-                      {/* Email inputs */}
-                      <div className="flex flex-col gap-2">
-                        <Label className="text-emphasis text-sm font-medium">{t("email")}</Label>
-
-                        {fields.map((field, index) => (
-                          <div key={field.id} className="flex items-start gap-0.5">
-                            <div className="flex-1">
-                              <TextField
-                                labelSrOnly
-                                {...form.register(`invites.${index}.email`)}
-                                placeholder={`rick@cal.com`}
-                                type="email"
-                                size="sm"
-                              />
-                            </div>
-                            <Button
-                              type="button"
-                              color="minimal"
-                              variant="icon"
-                              size="sm"
-                              className="h-7 w-7"
-                              disabled={fields.length === 1}
-                              onClick={() => remove(index)}>
-                              <Icon name="x" className="h-4 w-4" />
-                            </Button>
-                          </div>
-                        ))}
-
-                        {/* Add button */}
-                        <Button
-                          type="button"
-                          color="secondary"
-                          size="sm"
-                          StartIcon="plus"
-                          className="w-fit"
-                          onClick={() => append({ email: "", role: inviteRole })}>
-                          {t("add")}
-                        </Button>
-                      </div>
-
-                      {/* Role selector */}
-                      <div className="flex items-center justify-between">
-                        <div className="hidden items-center gap-2 md:flex">
-                          <span className="text-emphasis text-sm">{t("onboarding_invite_all_as")}</span>
-                          <ToggleGroup
-                            value={inviteRole}
-                            onValueChange={(value) => {
-                              if (value) {
-                                setInviteRole(value as InviteRole);
-                                // Update all invites with the new role
-                                fields.forEach((_, index) => {
-                                  form.setValue(`invites.${index}.role`, value as InviteRole);
-                                });
-                              }
-                            }}
-                            options={[
-                              { value: "MEMBER", label: t("members") },
-                              { value: "ADMIN", label: t("onboarding_admins") },
-                            ]}
-                          />
-                        </div>
-                        <span className="text-subtle text-sm">{t("onboarding_modify_roles_later")}</span>
-                      </div>
-                    </div>
-                  </Form>
-                </div>
-              </div>
+                <Button
+                  color="secondary"
+                  className="h-8 w-full justify-center rounded-[10px]"
+                  onClick={handleUploadCSV}
+                  disabled={isSubmitting}>
+                  <div className="flex items-center gap-1">
+                    <Icon name="upload" className="h-4 w-4" />
+                    <span>{t("upload_csv_file")}</span>
+                  </div>
+                </Button>
 
-              {/* Footer */}
-              <div className="flex w-full items-center justify-end gap-1 px-5 py-4">
                 <Button
-                  type="submit"
-                  color="primary"
-                  className="rounded-[10px]"
-                  disabled={!hasValidInvites || isSubmitting}
-                  loading={isSubmitting}
-                  onClick={form.handleSubmit(handleContinue)}>
-                  {t("continue")}
+                  color="secondary"
+                  className="h-8 w-full justify-center rounded-[10px]"
+                  onClick={handleCopyInviteLink}
+                  disabled>
+                  <div className="flex items-center gap-1">
+                    <Icon name="link" className="h-4 w-4" />
+                    <span>{t("copy_invite_link")}</span>
+                  </div>
                 </Button>
               </div>
             </div>
-          </div>
-
-          {/* Skip button */}
-          <div className="flex w-full justify-center">
-            <button
-              onClick={handleSkip}
-              disabled={isSubmitting}
-              className="text-subtle hover:bg-subtle rounded-[10px] px-2 py-1.5 text-sm font-medium leading-4 disabled:opacity-50">
-              {t("ill_do_this_later")}
-            </button>
-          </div>
+          </OnboardingCard>
         </div>
-      </div>
-    </div>
+
+        {/* Right column - Browser view */}
+        <OnboardingInviteBrowserView teamName={teamDetails.name} />
+      </OnboardingLayout>
+
+      {/* CSV Upload Modal */}
+      <CSVUploadModal isOpen={isCSVModalOpen} onClose={() => setIsCSVModalOpen(false)} />
+    </>
   );
 };
diff --git a/packages/app-store/delegationCredential.test.ts b/packages/app-store/delegationCredential.test.ts
index 37f09eece308e6..8f35b14757e344 100644
--- a/packages/app-store/delegationCredential.test.ts
+++ b/packages/app-store/delegationCredential.test.ts
@@ -6,7 +6,7 @@ import { metadata as googleCalendarMetadata } from "@calcom/app-store/googlecale
 import { metadata as googleMeetMetadata } from "@calcom/app-store/googlevideo/_metadata";
 import type { ServiceAccountKey } from "@calcom/features/delegation-credentials/repositories/DelegationCredentialRepository";
 import { DelegationCredentialRepository } from "@calcom/features/delegation-credentials/repositories/DelegationCredentialRepository";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { organizationRepositoryMock } from "@calcom/features/ee/organizations/__mocks__/organizationMock";
 import { SMSLockState, RRTimestampBasis } from "@calcom/prisma/enums";
 import type { CredentialForCalendarService, CredentialPayload } from "@calcom/types/Credential";
 
@@ -20,11 +20,8 @@ import {
   getAllDelegationCredentialsForUserIncludeServiceAccountKey,
 } from "./delegationCredential";
 
-// Mock OrganizationRepository
-vi.mock("@calcom/features/ee/organizations/repositories/OrganizationRepository", () => ({
-  OrganizationRepository: {
-    findByMemberEmail: vi.fn(),
-  },
+vi.mock("@calcom/prisma", () => ({
+  prisma: {},
 }));
 
 // Mock DelegationCredentialRepository
@@ -187,7 +184,7 @@ describe("getAllDelegationCredentialsForUserIncludeServiceAccountKey", () => {
 
   beforeEach(() => {
     vi.clearAllMocks();
-    vi.mocked(OrganizationRepository.findByMemberEmail).mockResolvedValue(mockOrganization);
+    organizationRepositoryMock.findByMemberEmail.mockResolvedValue(mockOrganization);
   });
 
   it("should return empty array when no DelegationCredential found", async () => {
diff --git a/packages/features/auth/lib/next-auth-options.ts b/packages/features/auth/lib/next-auth-options.ts
index 59d5d88473f34d..bab3b102745350 100644
--- a/packages/features/auth/lib/next-auth-options.ts
+++ b/packages/features/auth/lib/next-auth-options.ts
@@ -16,7 +16,7 @@ import { CredentialRepository } from "@calcom/features/credentials/repositories/
 import createUsersAndConnectToOrg from "@calcom/features/ee/dsync/lib/users/createUsersAndConnectToOrg";
 import ImpersonationProvider from "@calcom/features/ee/impersonation/lib/ImpersonationProvider";
 import { getOrgFullOrigin, subdomainSuffix } from "@calcom/features/ee/organizations/lib/orgDomains";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { clientSecretVerifier, hostedCal, isSAMLLoginEnabled } from "@calcom/features/ee/sso/lib/saml";
 import { ProfileRepository } from "@calcom/features/profile/repositories/ProfileRepository";
 import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
@@ -389,7 +389,8 @@ if (isSAMLLoginEnabled) {
           const hostedCal = Boolean(HOSTED_CAL_FEATURES);
           if (hostedCal && email) {
             const domain = getDomainFromEmail(email);
-            const org = await OrganizationRepository.getVerifiedOrganizationByAutoAcceptEmailDomain(domain);
+            const organizationRepository = getOrganizationRepository();
+            const org = await organizationRepository.getVerifiedOrganizationByAutoAcceptEmailDomain(domain);
             if (org) {
               const createUsersAndConnectToOrgProps = {
                 emailsToCreate: [email],
@@ -407,7 +408,7 @@ if (isSAMLLoginEnabled) {
           }
           if (!user) throw new Error(ErrorCode.UserNotFound);
         }
-        const [userProfile] = user?.allProfiles;
+        const [userProfile] = user?.allProfiles ?? [];
         return {
           id: id as unknown as number,
           firstName,
diff --git a/packages/features/bookings/di/BookingCancelService.container.ts b/packages/features/bookings/di/BookingCancelService.container.ts
index 6b7cabaa43b54e..a238759467650e 100644
--- a/packages/features/bookings/di/BookingCancelService.container.ts
+++ b/packages/features/bookings/di/BookingCancelService.container.ts
@@ -1,9 +1,9 @@
-import { createContainer } from "@calcom/lib/di/di";
+import { createContainer } from "@calcom/features/di/di";
 
 import {
   type BookingCancelService,
   moduleLoader as bookingCancelServiceModule,
-} from "../modules/BookingCancelService.module";
+} from "./BookingCancelService.module";
 
 const bookingCancelServiceContainer = createContainer();
 
diff --git a/packages/features/bookings/di/BookingCancelService.module.ts b/packages/features/bookings/di/BookingCancelService.module.ts
index 8781e6e195075c..217fd40dd83574 100644
--- a/packages/features/bookings/di/BookingCancelService.module.ts
+++ b/packages/features/bookings/di/BookingCancelService.module.ts
@@ -1,6 +1,6 @@
 import { BookingCancelService } from "@calcom/features/bookings/lib/handleCancelBooking";
-import { bindModuleToClassOnToken, createModule } from "@calcom/lib/di/di";
-import { DI_TOKENS } from "@calcom/lib/di/tokens";
+import { bindModuleToClassOnToken, createModule } from "@calcom/features/di/di";
+import { DI_TOKENS } from "@calcom/features/di/tokens";
 import { moduleLoader as prismaModuleLoader } from "@calcom/features/di/modules/Prisma";
 
 const thisModule = createModule();
diff --git a/packages/features/delegation-credentials/repositories/DelegationCredentialRepository.test.ts b/packages/features/delegation-credentials/repositories/DelegationCredentialRepository.test.ts
index a6e3ffc602626e..53a4f1bf978bb0 100644
--- a/packages/features/delegation-credentials/repositories/DelegationCredentialRepository.test.ts
+++ b/packages/features/delegation-credentials/repositories/DelegationCredentialRepository.test.ts
@@ -2,22 +2,27 @@ import prismock from "../../../../tests/libs/__mocks__/prisma";
 
 import { describe, expect, it, beforeEach, vi } from "vitest";
 
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
 import { encryptServiceAccountKey } from "@calcom/lib/server/serviceAccountKey";
 
 import { DelegationCredentialRepository } from "./DelegationCredentialRepository";
 
-vi.mock("@calcom/features/ee/organizations/repositories/OrganizationRepository", () => ({
-  OrganizationRepository: {
-    findByMemberEmail: vi.fn(),
-  },
+const mockOrganizationRepository = {
+  findByMemberEmail: vi.fn(),
+};
+
+vi.mock("@calcom/features/ee/organizations/di/OrganizationRepository.container", () => ({
+  getOrganizationRepository: () => mockOrganizationRepository,
+}));
+
+vi.mock("@calcom/prisma", () => ({
+  prisma: {},
 }));
 
 // Mock service account key functions
 vi.mock("@calcom/lib/crypto", async (importOriginal) => {
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  const actual = await importOriginal<any>();
+  const actual = await importOriginal<typeof import("@calcom/lib/crypto")>();
   return {
     ...actual,
     symmetricEncrypt: vi.fn((serviceAccountKey) => {
@@ -92,8 +97,8 @@ const createTestDelegationCredential = async (overrides = {}) => {
   });
 };
 
-const setupOrganizationMock = (returnValue: any) => {
-  vi.mocked(OrganizationRepository.findByMemberEmail).mockResolvedValue(returnValue);
+const setupOrganizationMock = (returnValue: { id: number } | null) => {
+  mockOrganizationRepository.findByMemberEmail.mockResolvedValue(returnValue);
 };
 
 describe("DelegationCredentialRepository", () => {
diff --git a/packages/features/delegation-credentials/repositories/DelegationCredentialRepository.ts b/packages/features/delegation-credentials/repositories/DelegationCredentialRepository.ts
index 2cf8522b502602..0049e863b823c7 100644
--- a/packages/features/delegation-credentials/repositories/DelegationCredentialRepository.ts
+++ b/packages/features/delegation-credentials/repositories/DelegationCredentialRepository.ts
@@ -1,4 +1,4 @@
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import logger from "@calcom/lib/logger";
 import {
   serviceAccountKeySchema,
@@ -137,7 +137,8 @@ export class DelegationCredentialRepository {
       prefix: ["findUniqueByOrgMemberEmailIncludeSensitiveServiceAccountKey"],
     });
     log.debug("called with", { email });
-    const organization = await OrganizationRepository.findByMemberEmail({ email });
+    const organizationRepository = getOrganizationRepository();
+    const organization = await organizationRepository.findByMemberEmail({ email });
     if (!organization) {
       log.debug("Email not found in any organization:", email);
       return null;
diff --git a/packages/features/di/tokens.ts b/packages/features/di/tokens.ts
index 1e56074e12a35a..a6f600b3b57935 100644
--- a/packages/features/di/tokens.ts
+++ b/packages/features/di/tokens.ts
@@ -1,6 +1,6 @@
 import { BOOKING_DI_TOKENS } from "@calcom/features/bookings/di/tokens";
 import { HASHED_LINK_DI_TOKENS } from "@calcom/features/hashedLink/di/tokens";
-
+import { ORGANIZATION_DI_TOKENS } from "@calcom/features/ee/organizations/di/tokens";
 import { WATCHLIST_DI_TOKENS } from "./watchlist/Watchlist.tokens";
 
 export const DI_TOKENS = {
@@ -63,4 +63,5 @@ export const DI_TOKENS = {
   ...HASHED_LINK_DI_TOKENS,
   // Watchlist service tokens
   ...WATCHLIST_DI_TOKENS,
+  ...ORGANIZATION_DI_TOKENS,
 };
diff --git a/packages/features/ee/impersonation/lib/ImpersonationProvider.test.ts b/packages/features/ee/impersonation/lib/ImpersonationProvider.test.ts
index 28ea23d489dd18..c9116b0d8a5c6d 100644
--- a/packages/features/ee/impersonation/lib/ImpersonationProvider.test.ts
+++ b/packages/features/ee/impersonation/lib/ImpersonationProvider.test.ts
@@ -25,7 +25,7 @@ const session: Session = {
 
 vi.mock("@calcom/prisma", () => {
   return {
-    default: vi.fn(),
+    prisma: vi.fn(),
   };
 });
 
diff --git a/packages/features/ee/organizations/__mocks__/organizationMock.ts b/packages/features/ee/organizations/__mocks__/organizationMock.ts
index 0c7e23d9aeb4f3..b22cfd7870ba10 100644
--- a/packages/features/ee/organizations/__mocks__/organizationMock.ts
+++ b/packages/features/ee/organizations/__mocks__/organizationMock.ts
@@ -1,23 +1,24 @@
 import { vi, beforeEach } from "vitest";
-import { mockReset, mockDeep } from "vitest-mock-extended";
+import { mockDeep, mockReset } from "vitest-mock-extended";
 
-import type * as organization from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import type { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+
+const mockedSingleton = mockDeep<OrganizationRepository>();
+
+vi.mock("@calcom/features/ee/organizations/di/OrganizationRepository.container", () => ({
+  getOrganizationRepository: () => mockedSingleton,
+}));
 
-vi.mock("@calcom/features/ee/organizations/repositories/OrganizationRepository", () => organizationMock);
-type OrganizationModule = typeof organization;
 beforeEach(() => {
-  mockReset(organizationMock);
+  mockReset(mockedSingleton);
 });
 
-const organizationMock = mockDeep<OrganizationModule>();
-const OrganizationRepository = organizationMock.OrganizationRepository;
-
 export const organizationScenarios = {
-  OrganizationRepository: {
+  organizationRepository: {
     findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail: {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       fakeReturnOrganization: (org: any, forInput: any) => {
-        OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.mockImplementation(
+        mockedSingleton.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.mockImplementation(
           (arg) => {
             if (forInput.email === arg.email) {
               return org;
@@ -29,10 +30,11 @@ export const organizationScenarios = {
         );
       },
       fakeNoMatch: () => {
-        OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.mockResolvedValue(null);
+        mockedSingleton.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail.mockResolvedValue(null);
       },
     },
-  } satisfies Partial<Record<keyof OrganizationModule["OrganizationRepository"], unknown>>,
-} satisfies Partial<Record<keyof OrganizationModule, unknown>>;
+  },
+};
 
-export default organizationMock;
+export { mockedSingleton as organizationRepositoryMock };
+export default { organizationRepository: mockedSingleton };
diff --git a/packages/features/ee/organizations/di/OrganizationMembershipService.module.ts b/packages/features/ee/organizations/di/OrganizationMembershipService.module.ts
new file mode 100644
index 00000000000000..22a2256e6134eb
--- /dev/null
+++ b/packages/features/ee/organizations/di/OrganizationMembershipService.module.ts
@@ -0,0 +1,27 @@
+import { bindModuleToClassOnToken, createModule } from "@calcom/features/di/di";
+import { OrganizationMembershipService } from "@calcom/features/ee/organizations/lib/service/OrganizationMembershipService";
+
+import { moduleLoader as organizationRepositoryModuleLoader } from "./OrganizationRepository.module";
+import { ORGANIZATION_DI_TOKENS } from "./tokens";
+
+const thisModule = createModule();
+const token = ORGANIZATION_DI_TOKENS.ORGANIZATION_MEMBERSHIP_SERVICE;
+const moduleToken = ORGANIZATION_DI_TOKENS.ORGANIZATION_MEMBERSHIP_SERVICE_MODULE;
+
+const loadModule = bindModuleToClassOnToken({
+    module: thisModule,
+    moduleToken,
+    token,
+    classs: OrganizationMembershipService,
+    depsMap: {
+        organizationRepository: organizationRepositoryModuleLoader,
+    },
+});
+
+export const moduleLoader = {
+    token,
+    loadModule,
+};
+
+export type { OrganizationMembershipService };
+
diff --git a/packages/features/ee/organizations/di/OrganizationRepository.container.ts b/packages/features/ee/organizations/di/OrganizationRepository.container.ts
new file mode 100644
index 00000000000000..bf8fe15e2d3c07
--- /dev/null
+++ b/packages/features/ee/organizations/di/OrganizationRepository.container.ts
@@ -0,0 +1,14 @@
+import { createContainer } from "@calcom/features/di/di";
+
+import {
+  type OrganizationRepository,
+  moduleLoader as organizationRepositoryModule,
+} from "./OrganizationRepository.module";
+
+const organizationRepositoryContainer = createContainer();
+
+export function getOrganizationRepository(): OrganizationRepository {
+  organizationRepositoryModule.loadModule(organizationRepositoryContainer);
+
+  return organizationRepositoryContainer.get<OrganizationRepository>(organizationRepositoryModule.token);
+}
diff --git a/packages/features/ee/organizations/di/OrganizationRepository.module.ts b/packages/features/ee/organizations/di/OrganizationRepository.module.ts
new file mode 100644
index 00000000000000..ba41eb1a7e9b58
--- /dev/null
+++ b/packages/features/ee/organizations/di/OrganizationRepository.module.ts
@@ -0,0 +1,26 @@
+import { bindModuleToClassOnToken, createModule, type ModuleLoader } from "@calcom/features/di/di";
+import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { moduleLoader as prismaModuleLoader } from "@calcom/features/di/modules/Prisma";
+
+import { ORGANIZATION_DI_TOKENS } from "./tokens";
+
+export const organizationRepositoryModule = createModule();
+const token = ORGANIZATION_DI_TOKENS.ORGANIZATION_REPOSITORY;
+const moduleToken = ORGANIZATION_DI_TOKENS.ORGANIZATION_REPOSITORY_MODULE;
+const loadModule = bindModuleToClassOnToken({
+    module: organizationRepositoryModule,
+    moduleToken,
+    token,
+    classs: OrganizationRepository,
+    depsMap: {
+        prismaClient: prismaModuleLoader,
+    },
+});
+
+export const moduleLoader: ModuleLoader = {
+    token,
+    loadModule,
+};
+
+export type { OrganizationRepository };
+
diff --git a/packages/features/ee/organizations/di/tokens.ts b/packages/features/ee/organizations/di/tokens.ts
new file mode 100644
index 00000000000000..c6b23698ee609a
--- /dev/null
+++ b/packages/features/ee/organizations/di/tokens.ts
@@ -0,0 +1,6 @@
+export const ORGANIZATION_DI_TOKENS = {
+    ORGANIZATION_REPOSITORY: Symbol("OrganizationRepository"),
+    ORGANIZATION_REPOSITORY_MODULE: Symbol("OrganizationRepositoryModule"),
+    ORGANIZATION_MEMBERSHIP_SERVICE: Symbol("OrganizationMembershipService"),
+    ORGANIZATION_MEMBERSHIP_SERVICE_MODULE: Symbol("OrganizationMembershipServiceModule"),
+};
diff --git a/packages/features/ee/organizations/lib/OrganizationPermissionService.ts b/packages/features/ee/organizations/lib/OrganizationPermissionService.ts
index 88f962e5a29e67..e21824e201e371 100644
--- a/packages/features/ee/organizations/lib/OrganizationPermissionService.ts
+++ b/packages/features/ee/organizations/lib/OrganizationPermissionService.ts
@@ -1,4 +1,4 @@
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { UserPermissionRole } from "@calcom/kysely/types";
 import { ORGANIZATION_SELF_SERVE_MIN_SEATS, ORGANIZATION_SELF_SERVE_PRICE } from "@calcom/lib/constants";
 import logger from "@calcom/lib/logger";
@@ -39,7 +39,8 @@ export class OrganizationPermissionService {
    * If an onboarding is complete then it also means that org is created already.
    */
   async hasConflictingOrganization({ slug }: { slug: string }): Promise<boolean> {
-    return !!(await OrganizationRepository.findBySlug({ slug }));
+    const organizationRepository = getOrganizationRepository(); 
+    return !!(await organizationRepository.findBySlug({ slug }));
   }
 
   async hasCompletedOnboarding(email: string): Promise<boolean> {
diff --git a/packages/features/ee/organizations/lib/ensureOrganizationIsReviewed.ts b/packages/features/ee/organizations/lib/ensureOrganizationIsReviewed.ts
index 14f34cc5566315..f996a1829f5095 100644
--- a/packages/features/ee/organizations/lib/ensureOrganizationIsReviewed.ts
+++ b/packages/features/ee/organizations/lib/ensureOrganizationIsReviewed.ts
@@ -1,12 +1,13 @@
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 
 /**
  * It assumes that a user can only impersonate the members of the organization he is logged in to.
  * Note: Ensuring that one organization's member can't impersonate other organization's member isn't the job of this function
  */
 export async function ensureOrganizationIsReviewed(loggedInUserOrgId: number | undefined) {
+  const organizationRepository = getOrganizationRepository();
   if (loggedInUserOrgId) {
-    const org = await OrganizationRepository.findByIdIncludeOrganizationSettings({
+    const org = await organizationRepository.findByIdIncludeOrganizationSettings({
       id: loggedInUserOrgId,
     });
 
diff --git a/packages/features/ee/organizations/lib/repository/IOrganizationRepository.d.ts b/packages/features/ee/organizations/lib/repository/IOrganizationRepository.d.ts
new file mode 100644
index 00000000000000..fca9b9ca0d5291
--- /dev/null
+++ b/packages/features/ee/organizations/lib/repository/IOrganizationRepository.d.ts
@@ -0,0 +1,6 @@
+export interface IOrganizationRepository {
+    getOrganizationAutoAcceptSettings(organizationId: number): Promise<{
+        orgAutoAcceptEmail: string | null;
+        isOrganizationVerified: boolean | null;
+    } | null>;
+}
\ No newline at end of file
diff --git a/packages/features/ee/organizations/lib/service/OrganizationMembershipService.ts b/packages/features/ee/organizations/lib/service/OrganizationMembershipService.ts
new file mode 100644
index 00000000000000..2a25883655e74d
--- /dev/null
+++ b/packages/features/ee/organizations/lib/service/OrganizationMembershipService.ts
@@ -0,0 +1,37 @@
+import type { IOrganizationRepository } from "../repository/IOrganizationRepository";
+export interface IOrganizationMembershipServiceDependencies {
+    organizationRepository: IOrganizationRepository;
+}
+
+export class OrganizationMembershipService {
+    constructor(private readonly deps: IOrganizationMembershipServiceDependencies) { }
+
+    /**
+     * Determines if user should be auto-accepted to an organization or its sub-teams based on email domain
+     */
+    async shouldAutoAccept({
+        organizationId,
+        userEmail,
+    }: {
+        organizationId: number;
+        userEmail: string;
+    }): Promise<boolean> {
+        const orgSettings = await this.deps.organizationRepository.getOrganizationAutoAcceptSettings(
+            organizationId
+        );
+
+        if (!orgSettings) return false;
+
+        const { orgAutoAcceptEmail, isOrganizationVerified } = orgSettings;
+
+        if (!isOrganizationVerified || !orgAutoAcceptEmail) return false;
+
+        // Case-insensitive comparison (email domains are case-insensitive per RFC)
+        const emailDomain = userEmail.split("@")[1]?.trim().toLowerCase();
+        const autoAcceptEmailDomain = orgAutoAcceptEmail.trim().toLowerCase();
+
+        if (!emailDomain) return false;
+
+        return emailDomain === autoAcceptEmailDomain;
+    }
+}
diff --git a/packages/features/ee/organizations/lib/service/onboarding/BaseOnboardingService.ts b/packages/features/ee/organizations/lib/service/onboarding/BaseOnboardingService.ts
index 363241bf2723ab..ea90348212c782 100644
--- a/packages/features/ee/organizations/lib/service/onboarding/BaseOnboardingService.ts
+++ b/packages/features/ee/organizations/lib/service/onboarding/BaseOnboardingService.ts
@@ -8,7 +8,7 @@ import {
   findUserToBeOrgOwner,
   setupDomain,
 } from "@calcom/features/ee/organizations/lib/server/orgCreationUtils";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
 import { DEFAULT_SCHEDULE, getAvailabilityFromSchedule } from "@calcom/lib/availability";
 import { WEBAPP_URL } from "@calcom/lib/constants";
@@ -296,8 +296,9 @@ export abstract class BaseOnboardingService implements IOrganizationOnboardingSe
     owner: NonNullable<Awaited<ReturnType<typeof findUserToBeOrgOwner>>>;
     orgData: OrganizationData;
   }) {
+    const organizationRepository = getOrganizationRepository();
     const orgOwnerTranslation = await getTranslation(owner.locale || "en", "common");
-    let organization = orgData.id ? await OrganizationRepository.findById({ id: orgData.id }) : null;
+    let organization = orgData.id ? await organizationRepository.findById({ id: orgData.id }) : null;
 
     if (organization) {
       log.info(
@@ -328,7 +329,7 @@ export abstract class BaseOnboardingService implements IOrganizationOnboardingSe
       const nonOrgUsername = owner.username || "";
 
       // Create organization first to get the ID
-      const orgCreationResult = await OrganizationRepository.createWithExistingUserAsOwner({
+      const orgCreationResult = await organizationRepository.createWithExistingUserAsOwner({
         orgData: {
           ...orgData,
           // Don't pass brand assets yet - will be uploaded after org is created
@@ -394,9 +395,10 @@ export abstract class BaseOnboardingService implements IOrganizationOnboardingSe
     email: string;
     orgData: OrganizationData;
   }) {
+    const organizationRepository = getOrganizationRepository();
     let organization = orgData.id
-      ? await OrganizationRepository.findById({ id: orgData.id })
-      : await OrganizationRepository.findBySlug({ slug: orgData.slug });
+      ? await organizationRepository.findById({ id: orgData.id })
+      : await organizationRepository.findBySlug({ slug: orgData.slug });
 
     if (organization) {
       log.info(
@@ -410,7 +412,7 @@ export abstract class BaseOnboardingService implements IOrganizationOnboardingSe
       return { organization, owner };
     }
 
-    const orgCreationResult = await OrganizationRepository.createWithNonExistentOwner({
+    const orgCreationResult = await organizationRepository.createWithNonExistentOwner({
       orgData: {
         ...orgData,
         // To be uploaded after org is created
@@ -670,7 +672,8 @@ export abstract class BaseOnboardingService implements IOrganizationOnboardingSe
     }
 
     const existingMetadata = teamMetadataStrictSchema.parse(organization.metadata);
-    const updatedOrganization = await OrganizationRepository.updateStripeSubscriptionDetails({
+    const organizationRepository = getOrganizationRepository();
+    const updatedOrganization = await organizationRepository.updateStripeSubscriptionDetails({
       id: organization.id,
       stripeSubscriptionId: paymentSubscriptionId,
       stripeSubscriptionItemId: paymentSubscriptionItemId,
@@ -680,7 +683,8 @@ export abstract class BaseOnboardingService implements IOrganizationOnboardingSe
   }
 
   protected async hasConflictingOrganization({ slug, onboardingId }: { slug: string; onboardingId: string }) {
-    const organization = await OrganizationRepository.findBySlugIncludeOnboarding({ slug });
+    const organizationRepository = getOrganizationRepository();
+    const organization = await organizationRepository.findBySlugIncludeOnboarding({ slug });
     if (!organization?.organizationOnboarding) {
       return false;
     }
diff --git a/packages/features/ee/organizations/lib/service/onboarding/BillingEnabledOrgOnboardingService.ts b/packages/features/ee/organizations/lib/service/onboarding/BillingEnabledOrgOnboardingService.ts
index daec8c3b1de33b..f8f059f4c0176c 100644
--- a/packages/features/ee/organizations/lib/service/onboarding/BillingEnabledOrgOnboardingService.ts
+++ b/packages/features/ee/organizations/lib/service/onboarding/BillingEnabledOrgOnboardingService.ts
@@ -1,5 +1,5 @@
 import { findUserToBeOrgOwner } from "@calcom/features/ee/organizations/lib/server/orgCreationUtils";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
 import logger from "@calcom/lib/logger";
 import { safeStringify } from "@calcom/lib/safeStringify";
@@ -143,6 +143,7 @@ export class BillingEnabledOrgOnboardingService extends BaseOnboardingService {
     organizationOnboarding: OrganizationOnboardingData,
     paymentDetails?: { subscriptionId: string; subscriptionItemId: string }
   ): Promise<{ organization: Team; owner: User }> {
+    const organizationRepository = getOrganizationRepository();
     log.info(
       "createOrganization (billing-enabled)",
       safeStringify({
@@ -245,7 +246,7 @@ export class BillingEnabledOrgOnboardingService extends BaseOnboardingService {
 
     if (!organization.slug) {
       try {
-        const { slug } = await OrganizationRepository.setSlug({
+        const { slug } = await organizationRepository.setSlug({
           id: organization.id,
           slug: organizationOnboarding.slug,
         });
diff --git a/packages/features/ee/organizations/lib/service/onboarding/SelfHostedOnboardingService.ts b/packages/features/ee/organizations/lib/service/onboarding/SelfHostedOnboardingService.ts
index a0214390769ebb..4a85d589ca617b 100644
--- a/packages/features/ee/organizations/lib/service/onboarding/SelfHostedOnboardingService.ts
+++ b/packages/features/ee/organizations/lib/service/onboarding/SelfHostedOnboardingService.ts
@@ -1,6 +1,6 @@
 import { LicenseKeySingleton } from "@calcom/ee/common/server/LicenseKeyService";
 import { findUserToBeOrgOwner } from "@calcom/features/ee/organizations/lib/server/orgCreationUtils";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { IS_SELF_HOSTED } from "@calcom/lib/constants";
 import logger from "@calcom/lib/logger";
 import { safeStringify } from "@calcom/lib/safeStringify";
@@ -113,6 +113,7 @@ export class SelfHostedOrganizationOnboardingService extends BaseOnboardingServi
   async createOrganization(
     organizationOnboarding: OrganizationOnboardingData
   ): Promise<{ organization: Team; owner: User }> {
+    const organizationRepository = getOrganizationRepository();
     log.info(
       "createOrganization (self-hosted)",
       safeStringify({
@@ -205,7 +206,7 @@ export class SelfHostedOrganizationOnboardingService extends BaseOnboardingServi
 
     if (!organization.slug) {
       try {
-        const { slug } = await OrganizationRepository.setSlug({
+        const { slug } = await organizationRepository.setSlug({
           id: organization.id,
           slug: organizationOnboarding.slug,
         });
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamList.tsx b/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
index 1deadc4b51d1b9..c5d4691d49e496 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamList.tsx
@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 
-import type { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import type { OrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.module";
 import { trackFormbricksAction } from "@calcom/features/formbricks/formbricks-client";
 import { trpc } from "@calcom/trpc/react";
 import { showToast } from "@calcom/ui/components/toast";
@@ -10,7 +10,7 @@ import { showToast } from "@calcom/ui/components/toast";
 import OtherTeamListItem from "./OtherTeamListItem";
 
 interface Props {
-  teams: Awaited<ReturnType<typeof OrganizationRepository.findTeamsInOrgIamNotPartOf>>;
+  teams: Awaited<ReturnType<OrganizationRepository["findTeamsInOrgIamNotPartOf"]>>;
   pending?: boolean;
 }
 
diff --git a/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx b/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
index 50c39cb32c4fdf..23a3869660305e 100644
--- a/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
+++ b/packages/features/ee/organizations/pages/components/OtherTeamsListing.tsx
@@ -1,13 +1,13 @@
 "use client";
 
-import type { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import type { OrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.module";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { EmptyScreen } from "@calcom/ui/components/empty-screen";
 
 import OtherTeamList from "./OtherTeamList";
 
 type OtherTeamsListingProps = {
-  teams: Awaited<ReturnType<typeof OrganizationRepository.findTeamsInOrgIamNotPartOf>>;
+  teams: Awaited<ReturnType<OrganizationRepository["findTeamsInOrgIamNotPartOf"]>>;
 };
 export function OtherTeamsListing({ teams }: OtherTeamsListingProps) {
   const { t } = useLocale();
diff --git a/packages/features/ee/organizations/repositories/OrganizationRepository.test.ts b/packages/features/ee/organizations/repositories/OrganizationRepository.test.ts
index 4310b40abe8df1..1df9ec9a42a03b 100644
--- a/packages/features/ee/organizations/repositories/OrganizationRepository.test.ts
+++ b/packages/features/ee/organizations/repositories/OrganizationRepository.test.ts
@@ -6,9 +6,11 @@ import { OrganizationRepository } from "@calcom/features/ee/organizations/reposi
 import type { Prisma } from "@calcom/prisma/client";
 
 vi.mock("@calcom/lib/server/repository/teamUtils", () => ({
-  getParsedTeam: (org: any) => org,
+  getParsedTeam: <T>(org: T) => org,
 }));
 
+const organizationRepository = new OrganizationRepository({ prismaClient: prismock });
+
 async function createOrganization(
   data: Prisma.TeamCreateInput & {
     organizationSettings: {
@@ -72,7 +74,7 @@ beforeEach(async () => {
 
 describe("Organization.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail", () => {
   it("should return null if no organization matches the email domain", async () => {
-    const result = await OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({
+    const result = await organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({
       email: "test@example.com",
     });
 
@@ -84,7 +86,7 @@ describe("Organization.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail", () =
     await createReviewedOrganization({ name: "Test Org 2", orgAutoAcceptEmail: "example.com" });
 
     await expect(
-      OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({ email: "test@example.com" })
+      organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({ email: "test@example.com" })
     ).rejects.toThrow("Multiple organizations found with the same auto accept email domain");
   });
 
@@ -94,7 +96,7 @@ describe("Organization.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail", () =
       orgAutoAcceptEmail: "example.com",
     });
 
-    const result = await OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({
+    const result = await organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({
       email: "test@example.com",
     });
 
@@ -104,7 +106,7 @@ describe("Organization.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail", () =
   it("should not confuse a team with organization", async () => {
     await createTeam({ name: "Test Team", orgAutoAcceptEmail: "example.com" });
 
-    const result = await OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({
+    const result = await organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({
       email: "test@example.com",
     });
 
@@ -114,7 +116,7 @@ describe("Organization.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail", () =
   it("should correctly match orgAutoAcceptEmail", async () => {
     await createReviewedOrganization({ name: "Test Org", orgAutoAcceptEmail: "noexample.com" });
 
-    const result = await OrganizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({
+    const result = await organizationRepository.findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({
       email: "test@example.com",
     });
 
@@ -129,7 +131,7 @@ describe("Organization.getVerifiedOrganizationByAutoAcceptEmailDomain", () => {
       organizationSettings: { create: { orgAutoAcceptEmail: "cal.com", isOrganizationVerified: true } },
     });
 
-    const result = await OrganizationRepository.getVerifiedOrganizationByAutoAcceptEmailDomain("cal.com");
+    const result = await organizationRepository.getVerifiedOrganizationByAutoAcceptEmailDomain("cal.com");
 
     expect(result).toEqual({
       id: verifiedOrganization.id,
@@ -145,7 +147,7 @@ describe("Organization.getVerifiedOrganizationByAutoAcceptEmailDomain", () => {
       organizationSettings: { create: { orgAutoAcceptEmail: "cal.com", isOrganizationVerified: false } },
     });
 
-    const result = await OrganizationRepository.getVerifiedOrganizationByAutoAcceptEmailDomain("cal.com");
+    const result = await organizationRepository.getVerifiedOrganizationByAutoAcceptEmailDomain("cal.com");
 
     expect(result).toEqual(null);
   });
@@ -169,7 +171,7 @@ describe("Organization.create", () => {
       bannerUrl: "https://example.com/banner.jpg",
     };
 
-    const organization = await OrganizationRepository.create(orgData);
+    const organization = await organizationRepository.create(orgData);
 
     expect(organization).toMatchObject({
       name: "Test Organization",
@@ -198,7 +200,7 @@ describe("Organization.create", () => {
       bannerUrl: null,
     };
 
-    const organization = await OrganizationRepository.create(orgData);
+    const organization = await organizationRepository.create(orgData);
 
     expect(organization).toMatchObject({
       name: "Test Organization",
diff --git a/packages/features/ee/organizations/repositories/OrganizationRepository.ts b/packages/features/ee/organizations/repositories/OrganizationRepository.ts
index ebe32f414a5b27..7ab25073d00498 100644
--- a/packages/features/ee/organizations/repositories/OrganizationRepository.ts
+++ b/packages/features/ee/organizations/repositories/OrganizationRepository.ts
@@ -6,7 +6,7 @@ import { UserRepository } from "@calcom/features/users/repositories/UserReposito
 import logger from "@calcom/lib/logger";
 import { safeStringify } from "@calcom/lib/safeStringify";
 import { getParsedTeam } from "@calcom/lib/server/repository/teamUtils";
-import { prisma } from "@calcom/prisma";
+import type { PrismaClient } from "@calcom/prisma";
 import { MembershipRole } from "@calcom/prisma/enums";
 import type { CreationSource } from "@calcom/prisma/enums";
 import type { teamMetadataStrictSchema } from "@calcom/prisma/zod-utils";
@@ -20,7 +20,13 @@ const orgSelect = {
 };
 
 export class OrganizationRepository {
-  static async createWithExistingUserAsOwner({
+  protected readonly prismaClient: PrismaClient;
+
+  constructor(deps: { prismaClient: PrismaClient }) {
+    this.prismaClient = deps.prismaClient;
+  }
+
+  async createWithExistingUserAsOwner({
     orgData,
     owner,
   }: {
@@ -57,7 +63,7 @@ export class OrganizationRepository {
       organizationId: organization.id,
     });
 
-    await prisma.membership.create({
+    await this.prismaClient.membership.create({
       data: {
         createdAt: new Date(),
         userId: owner.id,
@@ -69,7 +75,7 @@ export class OrganizationRepository {
     return { organization, ownerProfile };
   }
 
-  static async createWithNonExistentOwner({
+  async createWithNonExistentOwner({
     orgData,
     owner,
     creationSource,
@@ -97,7 +103,7 @@ export class OrganizationRepository {
     logger.debug("createWithNonExistentOwner", safeStringify({ orgData, owner }));
     const organization = await this.create(orgData);
     const ownerUsernameInOrg = getOrgUsernameFromEmail(owner.email, orgData.autoAcceptEmail);
-    const userRepo = new UserRepository(prisma);
+    const userRepo = new UserRepository(this.prismaClient);
     const ownerInDb = await userRepo.create({
       email: owner.email,
       username: ownerUsernameInOrg,
@@ -106,7 +112,7 @@ export class OrganizationRepository {
       creationSource,
     });
 
-    await prisma.membership.create({
+    await this.prismaClient.membership.create({
       data: {
         createdAt: new Date(),
         userId: ownerInDb.id,
@@ -125,7 +131,7 @@ export class OrganizationRepository {
     };
   }
 
-  static async create(orgData: {
+  async create(orgData: {
     name: string;
     slug: string | null;
     isOrganizationConfigured: boolean;
@@ -141,7 +147,7 @@ export class OrganizationRepository {
     bannerUrl: string | null;
     requestedSlug?: string | null;
   }) {
-    return await prisma.team.create({
+    return await this.prismaClient.team.create({
       data: {
         name: orgData.name,
         isOrganization: true,
@@ -176,8 +182,8 @@ export class OrganizationRepository {
     });
   }
 
-  static async findById({ id }: { id: number }) {
-    return prisma.team.findUnique({
+  async findById({ id }: { id: number }) {
+    return this.prismaClient.team.findUnique({
       where: {
         id,
         isOrganization: true,
@@ -185,9 +191,9 @@ export class OrganizationRepository {
     });
   }
 
-  static async findBySlug({ slug }: { slug: string }) {
+  async findBySlug({ slug }: { slug: string }) {
     // Slug is unique but could be null as well, so we can't use findUnique
-    return prisma.team.findFirst({
+    return this.prismaClient.team.findFirst({
       where: {
         slug,
         isOrganization: true,
@@ -195,8 +201,8 @@ export class OrganizationRepository {
     });
   }
 
-  static async findBySlugIncludeOnboarding({ slug }: { slug: string }) {
-    return prisma.team.findFirst({
+  async findBySlugIncludeOnboarding({ slug }: { slug: string }) {
+    return this.prismaClient.team.findFirst({
       where: { slug, isOrganization: true },
       include: {
         organizationOnboarding: {
@@ -213,8 +219,8 @@ export class OrganizationRepository {
     });
   }
 
-  static async findByIdIncludeOrganizationSettings({ id }: { id: number }) {
-    return prisma.team.findUnique({
+  async findByIdIncludeOrganizationSettings({ id }: { id: number }) {
+    return this.prismaClient.team.findUnique({
       where: {
         id,
         isOrganization: true,
@@ -226,9 +232,9 @@ export class OrganizationRepository {
     });
   }
 
-  static async findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({ email }: { email: string }) {
+  async findUniqueNonPlatformOrgsByMatchingAutoAcceptEmail({ email }: { email: string }) {
     const emailDomain = email.split("@").at(-1);
-    const orgs = await prisma.team.findMany({
+    const orgs = await this.prismaClient.team.findMany({
       where: {
         isOrganization: true,
         isPlatform: false,
@@ -254,8 +260,8 @@ export class OrganizationRepository {
     return getParsedTeam(org);
   }
 
-  static async findCurrentOrg({ userId, orgId }: { userId: number; orgId: number }) {
-    const membership = await prisma.membership.findUnique({
+  async findCurrentOrg({ userId, orgId }: { userId: number; orgId: number }) {
+    const membership = await this.prismaClient.membership.findUnique({
       where: {
         userId_teamId: {
           userId,
@@ -267,7 +273,7 @@ export class OrganizationRepository {
       },
     });
 
-    const organizationSettings = await prisma.organizationSettings.findUnique({
+    const organizationSettings = await this.prismaClient.organizationSettings.findUnique({
       where: {
         organizationId: orgId,
       },
@@ -307,8 +313,8 @@ export class OrganizationRepository {
     };
   }
 
-  static async findTeamsInOrgIamNotPartOf({ userId, parentId }: { userId: number; parentId: number | null }) {
-    const teamsInOrgIamNotPartOf = await prisma.team.findMany({
+  async findTeamsInOrgIamNotPartOf({ userId, parentId }: { userId: number; parentId: number | null }) {
+    const teamsInOrgIamNotPartOf = await this.prismaClient.team.findMany({
       where: {
         parentId,
         members: {
@@ -329,8 +335,8 @@ export class OrganizationRepository {
     return teamsInOrgIamNotPartOf;
   }
 
-  static async adminFindById({ id }: { id: number }) {
-    const org = await prisma.team.findUnique({
+  async adminFindById({ id }: { id: number }) {
+    const org = await this.prismaClient.team.findUnique({
       where: {
         id,
       },
@@ -374,8 +380,8 @@ export class OrganizationRepository {
     return { ...org, metadata: parsedMetadata };
   }
 
-  static async findByMemberEmail({ email }: { email: string }) {
-    const organization = await prisma.team.findFirst({
+  async findByMemberEmail({ email }: { email: string }) {
+    const organization = await this.prismaClient.team.findFirst({
       where: {
         isOrganization: true,
         members: {
@@ -388,10 +394,10 @@ export class OrganizationRepository {
     return organization ?? null;
   }
 
-  static async findByMemberEmailId({ email }: { email: string }) {
+  async findByMemberEmailId({ email }: { email: string }) {
     const log = logger.getSubLogger({ prefix: ["findByMemberEmailId"] });
     log.debug("called with", { email });
-    const organization = await prisma.team.findFirst({
+    const organization = await this.prismaClient.team.findFirst({
       where: {
         isOrganization: true,
         members: {
@@ -407,8 +413,8 @@ export class OrganizationRepository {
     return organization;
   }
 
-  static async findCalVideoLogoByOrgId({ id }: { id: number }) {
-    const org = await prisma.team.findUnique({
+  async findCalVideoLogoByOrgId({ id }: { id: number }) {
+    const org = await this.prismaClient.team.findUnique({
       where: {
         id,
       },
@@ -420,8 +426,8 @@ export class OrganizationRepository {
     return org?.calVideoLogo;
   }
 
-  static async getVerifiedOrganizationByAutoAcceptEmailDomain(domain: string) {
-    return await prisma.team.findFirst({
+  async getVerifiedOrganizationByAutoAcceptEmailDomain(domain: string) {
+    return await this.prismaClient.team.findFirst({
       where: {
         organizationSettings: {
           isOrganizationVerified: true,
@@ -439,14 +445,14 @@ export class OrganizationRepository {
     });
   }
 
-  static async setSlug({ id, slug }: { id: number; slug: string }) {
-    return await prisma.team.update({
+  async setSlug({ id, slug }: { id: number; slug: string }) {
+    return await this.prismaClient.team.update({
       where: { id, isOrganization: true },
       data: { slug },
     });
   }
 
-  static async updateStripeSubscriptionDetails({
+  async updateStripeSubscriptionDetails({
     id,
     stripeSubscriptionId,
     stripeSubscriptionItemId,
@@ -457,7 +463,7 @@ export class OrganizationRepository {
     stripeSubscriptionItemId: string;
     existingMetadata: z.infer<typeof teamMetadataStrictSchema>;
   }) {
-    return await prisma.team.update({
+    return await this.prismaClient.team.update({
       where: { id, isOrganization: true },
       data: {
         metadata: {
@@ -469,8 +475,8 @@ export class OrganizationRepository {
     });
   }
 
-  static async checkIfPrivate({ orgId }: { orgId: number }) {
-    const team = await prisma.team.findUnique({
+  async checkIfPrivate({ orgId }: { orgId: number }) {
+    const team = await this.prismaClient.team.findUnique({
       where: {
         id: orgId,
         isOrganization: true,
@@ -482,4 +488,20 @@ export class OrganizationRepository {
 
     return team?.isPrivate ?? false;
   }
+
+  async getOrganizationAutoAcceptSettings(organizationId: number) {
+    const org = await this.prismaClient.team.findUnique({
+      where: { id: organizationId, isOrganization: true },
+      select: {
+        organizationSettings: {
+          select: {
+            orgAutoAcceptEmail: true,
+            isOrganizationVerified: true,
+          },
+        },
+      },
+    });
+
+    return org?.organizationSettings ?? null;
+  }
 }
diff --git a/packages/features/ee/sso/lib/sso.ts b/packages/features/ee/sso/lib/sso.ts
index f8007c18ea1fc0..0a80acc3f44f52 100644
--- a/packages/features/ee/sso/lib/sso.ts
+++ b/packages/features/ee/sso/lib/sso.ts
@@ -1,5 +1,5 @@
 import createUsersAndConnectToOrg from "@calcom/features/ee/dsync/lib/users/createUsersAndConnectToOrg";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { HOSTED_CAL_FEATURES } from "@calcom/lib/constants";
 import type { PrismaClient } from "@calcom/prisma";
 import { IdentityProvider } from "@calcom/prisma/enums";
@@ -36,7 +36,8 @@ export const ssoTenantProduct = async (prisma: PrismaClient, email: string) => {
       });
 
     const domain = email.split("@")[1];
-    const organization = await OrganizationRepository.getVerifiedOrganizationByAutoAcceptEmailDomain(domain);
+    const organizationRepository = getOrganizationRepository();
+    const organization = await organizationRepository.getVerifiedOrganizationByAutoAcceptEmailDomain(domain);
 
     if (!organization)
       throw new TRPCError({
diff --git a/packages/features/shell/hooks/useWelcomeToCalcomModal.ts b/packages/features/shell/hooks/useWelcomeToCalcomModal.ts
new file mode 100644
index 00000000000000..1a6faaf78e2904
--- /dev/null
+++ b/packages/features/shell/hooks/useWelcomeToCalcomModal.ts
@@ -0,0 +1,51 @@
+import { parseAsBoolean, useQueryState } from "nuqs";
+import { useEffect, useState } from "react";
+
+const STORAGE_KEY = "showWelcomeToCalcomModal";
+
+export function useWelcomeToCalcomModal() {
+  const [welcomeToCalcomModal, setWelcomeToCalcomModal] = useQueryState(
+    "welcomeToCalcomModal",
+    parseAsBoolean.withDefault(false)
+  );
+
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    // Check query param first
+    if (welcomeToCalcomModal) {
+      setIsOpen(true);
+      return;
+    }
+
+    // Check sessionStorage as fallback (for cases where we redirect through personal onboarding)
+    if (typeof window !== "undefined" && sessionStorage.getItem(STORAGE_KEY) === "true") {
+      setIsOpen(true);
+    }
+  }, [welcomeToCalcomModal]);
+
+  const closeModal = () => {
+    setIsOpen(false);
+    // Remove the query param from URL
+    setWelcomeToCalcomModal(null);
+    // Also clear sessionStorage
+    if (typeof window !== "undefined") {
+      sessionStorage.removeItem(STORAGE_KEY);
+    }
+  };
+
+  return {
+    isOpen,
+    closeModal,
+  };
+}
+
+/**
+ * Helper function to set the flag that triggers the welcome modal.
+ * Use this before redirecting to ensure the modal shows after navigation.
+ */
+export function setShowWelcomeToCalcomModalFlag() {
+  if (typeof window !== "undefined") {
+    sessionStorage.setItem(STORAGE_KEY, "true");
+  }
+}
diff --git a/packages/platform/libraries/organizations.ts b/packages/platform/libraries/organizations.ts
new file mode 100644
index 00000000000000..62ed49528cdd13
--- /dev/null
+++ b/packages/platform/libraries/organizations.ts
@@ -0,0 +1,4 @@
+export { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
+export { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+export { OrganizationMembershipService } from "@calcom/features/ee/organizations/lib/service/OrganizationMembershipService";
+export type { IOrganizationRepository } from "@calcom/features/ee/organizations/lib/repository/IOrganizationRepository";
diff --git a/packages/platform/libraries/package.json b/packages/platform/libraries/package.json
index 4eb67fb3cf0449..cd6fbe04ec2665 100644
--- a/packages/platform/libraries/package.json
+++ b/packages/platform/libraries/package.json
@@ -79,6 +79,11 @@
       "require": "./dist/bookings.cjs",
       "types": "./dist/bookings.d.ts"
     },
+    "./organizations": {
+      "import": "./dist/organizations.js",
+      "require": "./dist/organizations.cjs",
+      "types": "./dist/organizations.d.ts"
+    },
     "./private-links": {
       "import": "./dist/private-links.js",
       "require": "./dist/private-links.cjs",
@@ -119,6 +124,9 @@
       "bookings": [
         "dist/bookings.d.ts"
       ],
+      "organizations": [
+        "dist/organizations.d.ts"
+      ],
       "private-links": [
         "dist/private-links.d.ts"
       ],
diff --git a/packages/platform/libraries/vite.config.js b/packages/platform/libraries/vite.config.js
index d975221306d557..a422d26c48eb71 100644
--- a/packages/platform/libraries/vite.config.js
+++ b/packages/platform/libraries/vite.config.js
@@ -36,6 +36,7 @@ export default defineConfig({
         conferencing: resolve(__dirname, "./conferencing.ts"),
         repositories: resolve(__dirname, "./repositories.ts"),
         bookings: resolve(__dirname, "./bookings.ts"),
+        organizations: resolve(__dirname, "./organizations.ts"),
         "private-links": resolve(__dirname, "./private-links.ts"),
         pbac: resolve(__dirname, "./pbac.ts"),
       },
diff --git a/packages/trpc/server/routers/viewer/organizations/adminGet.handler.ts b/packages/trpc/server/routers/viewer/organizations/adminGet.handler.ts
index 9fb740b782d22c..f30ee936be0b19 100644
--- a/packages/trpc/server/routers/viewer/organizations/adminGet.handler.ts
+++ b/packages/trpc/server/routers/viewer/organizations/adminGet.handler.ts
@@ -1,4 +1,4 @@
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 
 import type { TrpcSessionUser } from "../../../types";
 import type { TAdminGet } from "./adminGet.schema";
@@ -11,7 +11,8 @@ type AdminGetOptions = {
 };
 
 export const adminGetHandler = async ({ input }: AdminGetOptions) => {
-  return await OrganizationRepository.adminFindById({ id: input.id });
+  const organizationRepository = getOrganizationRepository();
+  return await organizationRepository.adminFindById({ id: input.id });
 };
 
 export default adminGetHandler;
diff --git a/packages/trpc/server/routers/viewer/organizations/create.handler.ts b/packages/trpc/server/routers/viewer/organizations/create.handler.ts
index f9e3b38edbe7bf..062c18181abcab 100644
--- a/packages/trpc/server/routers/viewer/organizations/create.handler.ts
+++ b/packages/trpc/server/routers/viewer/organizations/create.handler.ts
@@ -4,7 +4,7 @@ import { getOrgFullOrigin } from "@calcom/ee/organizations/lib/orgDomains";
 import { isNotACompanyEmail } from "@calcom/ee/organizations/lib/server/orgCreationUtils";
 import { sendAdminOrganizationNotification, sendOrganizationCreationEmail } from "@calcom/emails";
 import { sendEmailVerification } from "@calcom/features/auth/lib/verifyEmail";
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { UserRepository } from "@calcom/features/users/repositories/UserRepository";
 import { DEFAULT_SCHEDULE, getAvailabilityFromSchedule } from "@calcom/lib/availability";
 import {
@@ -44,6 +44,7 @@ const getIPAddress = async (url: string): Promise<string> => {
  * TODO: To be removed. We need to reuse the logic from orgCreationUtils like in intentToCreateOrgHandler
  */
 export const createHandler = async ({ input, ctx }: CreateOptions) => {
+  const organizationRepository = getOrganizationRepository();
   const {
     slug,
     name,
@@ -189,7 +190,7 @@ export const createHandler = async ({ input, ctx }: CreateOptions) => {
 
   // Create a new user and invite them as the owner of the organization
   if (!orgOwner) {
-    const data = await OrganizationRepository.createWithNonExistentOwner({
+    const data = await organizationRepository.createWithNonExistentOwner({
       orgData,
       owner: {
         email: orgOwnerEmail,
@@ -246,7 +247,7 @@ export const createHandler = async ({ input, ctx }: CreateOptions) => {
     }
 
     const nonOrgUsernameForOwner = orgOwner.username || "";
-    const { organization, ownerProfile } = await OrganizationRepository.createWithExistingUserAsOwner({
+    const { organization, ownerProfile } = await organizationRepository.createWithExistingUserAsOwner({
       orgData,
       owner: {
         id: orgOwner.id,
diff --git a/packages/trpc/server/routers/viewer/organizations/list.handler.ts b/packages/trpc/server/routers/viewer/organizations/list.handler.ts
index 216c2a47b7508d..56ba349ec8cd3a 100644
--- a/packages/trpc/server/routers/viewer/organizations/list.handler.ts
+++ b/packages/trpc/server/routers/viewer/organizations/list.handler.ts
@@ -1,4 +1,4 @@
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 import { FeaturesRepository } from "@calcom/features/flags/features.repository";
 import prisma from "@calcom/prisma";
 import type { TrpcSessionUser } from "@calcom/trpc/server/types";
@@ -18,7 +18,8 @@ export const listHandler = async ({ ctx }: ListHandlerInput) => {
     throw new TRPCError({ code: "BAD_REQUEST", message: "You do not belong to an organization" });
   }
 
-  const currentOrg = await OrganizationRepository.findCurrentOrg({
+  const organizationRepository = getOrganizationRepository();
+  const currentOrg = await organizationRepository.findCurrentOrg({
     userId: ctx.user.id,
     orgId: organizationId,
   });
diff --git a/packages/trpc/server/routers/viewer/organizations/listOtherTeams.handler.ts b/packages/trpc/server/routers/viewer/organizations/listOtherTeams.handler.ts
index e45d51a3089f36..5cb823b349265f 100644
--- a/packages/trpc/server/routers/viewer/organizations/listOtherTeams.handler.ts
+++ b/packages/trpc/server/routers/viewer/organizations/listOtherTeams.handler.ts
@@ -1,4 +1,4 @@
-import { OrganizationRepository } from "@calcom/features/ee/organizations/repositories/OrganizationRepository";
+import { getOrganizationRepository } from "@calcom/features/ee/organizations/di/OrganizationRepository.container";
 
 import type { TrpcSessionUser } from "../../../types";
 
@@ -13,7 +13,8 @@ export const listOtherTeamHandler = async ({ ctx: { user } }: ListOptions) => {
     return [];
   }
 
-  return await OrganizationRepository.findTeamsInOrgIamNotPartOf({
+  const organizationRepository = getOrganizationRepository();
+  return await organizationRepository.findTeamsInOrgIamNotPartOf({
     userId: user.id,
     parentId: user?.organization?.id ?? null,
   });
diff --git a/packages/trpc/server/routers/viewer/teams/create.handler.ts b/packages/trpc/server/routers/viewer/teams/create.handler.ts
index 8a0caba944ca2a..735f10e4937bc6 100644
--- a/packages/trpc/server/routers/viewer/teams/create.handler.ts
+++ b/packages/trpc/server/routers/viewer/teams/create.handler.ts
@@ -51,7 +51,7 @@ const generateCheckoutSession = async ({
 
 export const createHandler = async ({ ctx, input }: CreateOptions) => {
   const { user } = ctx;
-  const { slug, name, isOnboarding } = input;
+  const { slug, name, bio, isOnboarding } = input;
   const isOrgChildTeam = !!user.profile?.organizationId;
 
   // For orgs we want to create teams under the org
@@ -99,6 +99,7 @@ export const createHandler = async ({ ctx, input }: CreateOptions) => {
     data: {
       slug,
       name,
+      bio: bio || null,
       members: {
         create: {
           userId: ctx.user.id,
diff --git a/packages/trpc/server/routers/viewer/teams/create.schema.ts b/packages/trpc/server/routers/viewer/teams/create.schema.ts
index 0bd67da017af9f..87937c24fc27e4 100644
--- a/packages/trpc/server/routers/viewer/teams/create.schema.ts
+++ b/packages/trpc/server/routers/viewer/teams/create.schema.ts
@@ -10,6 +10,7 @@ export const ZCreateInputSchema = z.object({
     .optional()
     .nullable()
     .transform((v) => v || null),
+  bio: z.string().optional(),
   isOnboarding: z.boolean().optional(),
 });