diff --git a/packages/platform/atoms/.env.example b/packages/platform/atoms/.env.example
new file mode 100644
index 0000000000..d66462f442
--- /dev/null
+++ b/packages/platform/atoms/.env.example
@@ -0,0 +1,3 @@
+VITE_BOOKER_EMBED_OAUTH_CLIENT_ID="clye3x2f6000133strp0tf85t"
+
+VITE_BOOKER_EMBED_API_URL="http://localhost:5555/api/v2"
diff --git a/packages/platform/atoms/booker-embed/BookerEmbed.tsx b/packages/platform/atoms/booker-embed/BookerEmbed.tsx
new file mode 100644
index 0000000000..319ba177fa
--- /dev/null
+++ b/packages/platform/atoms/booker-embed/BookerEmbed.tsx
@@ -0,0 +1,15 @@
+import type { BookerPlatformWrapperAtomProps } from "../booker/BookerPlatformWrapper";
+import { BookerPlatformWrapper } from "../booker/BookerPlatformWrapper";
+import { CalProvider } from "../cal-provider/CalProvider";
+
+export const BookerEmbed = (props: BookerPlatformWrapperAtomProps) => {
+  return (
+    <CalProvider
+      clientId={import.meta.env.VITE_BOOKER_EMBED_OAUTH_CLIENT_ID}
+      options={{
+        apiUrl: import.meta.env.VITE_BOOKER_EMBED_API_URL,
+      }}>
+      <BookerPlatformWrapper {...props} />
+    </CalProvider>
+  );
+};
diff --git a/packages/platform/atoms/booker-embed/index.ts b/packages/platform/atoms/booker-embed/index.ts
new file mode 100644
index 0000000000..3f6fa552e8
--- /dev/null
+++ b/packages/platform/atoms/booker-embed/index.ts
@@ -0,0 +1 @@
+export { BookerEmbed } from "./BookerEmbed";
diff --git a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
index 4f4bc7813d..202e313c7c 100644
--- a/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
+++ b/packages/platform/atoms/booker/BookerPlatformWrapper.tsx
@@ -41,7 +41,7 @@ import { useMe } from "../hooks/useMe";
 import { useSlots } from "../hooks/useSlots";
 import { AtomsWrapper } from "../src/components/atoms-wrapper";
 
-type BookerPlatformWrapperAtomProps = Omit<BookerProps, "username" | "entity"> & {
+export type BookerPlatformWrapperAtomProps = Omit<BookerProps, "username" | "entity"> & {
   rescheduleUid?: string;
   bookingUid?: string;
   username: string | string[];
diff --git a/packages/platform/atoms/index.ts b/packages/platform/atoms/index.ts
index f40788dbc1..0ace2cbf53 100644
--- a/packages/platform/atoms/index.ts
+++ b/packages/platform/atoms/index.ts
@@ -14,3 +14,4 @@ export { useGetBookings } from "./hooks/useGetBookings";
 export { useMe } from "./hooks/useMe";
 export { OutlookConnect } from "./connect/outlook/OutlookConnect";
 export * as Connect from "./connect";
+export { BookerEmbed } from "./booker-embed";
diff --git a/packages/platform/examples/base/src/components/Navbar/index.tsx b/packages/platform/examples/base/src/components/Navbar/index.tsx
index 4ef7ea3086..63213c4d15 100644
--- a/packages/platform/examples/base/src/components/Navbar/index.tsx
+++ b/packages/platform/examples/base/src/components/Navbar/index.tsx
@@ -28,6 +28,9 @@ export function Navbar({ username }: { username?: string }) {
           <li>
             <Link href="/bookings">My Bookings</Link>
           </li>
+          <li>
+            <Link href="/embed">Embed</Link>
+          </li>
         </ul>
       </div>
     </nav>
diff --git a/packages/platform/examples/base/src/pages/_app.tsx b/packages/platform/examples/base/src/pages/_app.tsx
index b598a7d3a2..ca83d84598 100644
--- a/packages/platform/examples/base/src/pages/_app.tsx
+++ b/packages/platform/examples/base/src/pages/_app.tsx
@@ -1,9 +1,11 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 import { Poppins } from "next/font/google";
+import { usePathname } from "next/navigation";
+import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 
-import { CalProvider } from "@calcom/atoms";
+import { CalProvider, BookerEmbed } from "@calcom/atoms";
 import "@calcom/atoms/globals.min.css";
 
 const poppins = Poppins({ subsets: ["latin"], weight: ["400", "800"] });
@@ -25,6 +27,8 @@ export default function App({ Component, pageProps }: AppProps) {
   const [accessToken, setAccessToken] = useState("");
   const [email, setUserEmail] = useState("");
   const [username, setUsername] = useState("");
+  const router = useRouter();
+  const pathname = usePathname();
 
   useEffect(() => {
     const randomEmail = generateRandomEmail();
@@ -59,6 +63,30 @@ export default function App({ Component, pageProps }: AppProps) {
           </>
         )}
       </CalProvider>{" "}
+      {pathname === "/embed" && (
+        <div>
+          <BookerEmbed
+            customClassNames={{
+              bookerContainer: "!bg-[#F5F2FE] [&_button:!rounded-full] border-subtle border",
+              datePickerCustomClassNames: {
+                datePickerDatesActive: "!bg-[#D7CEF5]",
+              },
+              eventMetaCustomClassNames: {
+                eventMetaTitle: "text-[#7151DC]",
+              },
+              availableTimeSlotsCustomClassNames: {
+                availableTimeSlotsHeaderContainer: "!bg-[#F5F2FE]",
+                availableTimes: "!bg-[#D7CEF5]",
+              },
+            }}
+            username={username}
+            eventSlug="thirty-minutes"
+            onCreateBookingSuccess={(data) => {
+              router.push(`/${data.data.uid}`);
+            }}
+          />
+        </div>
+      )}
     </div>
   );
 }
diff --git a/packages/platform/examples/base/src/pages/embed.tsx b/packages/platform/examples/base/src/pages/embed.tsx
new file mode 100644
index 0000000000..964601367b
--- /dev/null
+++ b/packages/platform/examples/base/src/pages/embed.tsx
@@ -0,0 +1,15 @@
+import { Navbar } from "@/components/Navbar";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function Embed(props: { calUsername: string; calEmail: string }) {
+  return (
+    <main className={`flex ${inter.className} text-default flex flex-col`}>
+      <Navbar username={props.calUsername} />
+      <div>
+        <h1 className="mx-8 my-4 text-2xl font-bold">This is the booker embed</h1>
+      </div>
+    </main>
+  );
+}