diff --git a/apps/ui-playground/.gitignore b/apps/ui-playground/.gitignore
new file mode 100644
index 0000000000..5ef6a52078
--- /dev/null
+++ b/apps/ui-playground/.gitignore
@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/ui-playground/README.md b/apps/ui-playground/README.md
new file mode 100644
index 0000000000..e215bc4ccf
--- /dev/null
+++ b/apps/ui-playground/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
diff --git a/apps/ui-playground/app/favicon.ico b/apps/ui-playground/app/favicon.ico
new file mode 100644
index 0000000000..718d6fea48
Binary files /dev/null and b/apps/ui-playground/app/favicon.ico differ
diff --git a/apps/ui-playground/app/globals.css b/apps/ui-playground/app/globals.css
new file mode 100644
index 0000000000..4c25942b20
--- /dev/null
+++ b/apps/ui-playground/app/globals.css
@@ -0,0 +1,485 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+/**
+* Add css variables here as well for light mode in addition to tailwind.config to avoid FOUC
+*/
+:root {
+  /* background */
+
+  --cal-bg-emphasis: hsla(220,13%,91%,1);
+  --cal-bg: hsla(0,0%,100%,1);
+  --cal-bg-subtle: hsla(220, 14%, 96%,1);
+  --cal-bg-muted: hsla(210,20%,98%,1);
+  --cal-bg-inverted: hsla(0,0%,6%,1);
+
+  /* background -> components*/
+  --cal-bg-info: hsla(218,83%,98%,1);
+  --cal-bg-success: hsla(134,76%,94%,1);
+  --cal-bg-attention: hsla(37, 86%, 92%, 1);
+  --cal-bg-error: hsla(3,66%,93%,1);
+  --cal-bg-dark-error: hsla(2, 55%, 30%, 1);
+
+  /* Borders */
+  --cal-border-emphasis: hsla(218, 11%, 65%, 1);
+  --cal-border: hsla(216, 12%, 84%, 1);
+  --cal-border-subtle: hsla(220, 13%, 91%, 1);
+  --cal-border-booker: #e5e7eb;
+  --cal-border-muted: hsla(220, 14%, 96%, 1);
+  --cal-border-error: hsla(4, 63%, 41%, 1);
+  --cal-border-focus: hsla(0, 0%, 10%, 1);
+
+  /* Content/Text */
+  --cal-text-emphasis: hsla(217, 19%, 27%, 1);
+  --cal-text: hsla(217, 19%, 27%, 1);
+  --cal-text-subtle: hsla(220, 9%, 46%, 1);
+  --cal-text-muted: hsla(218, 11%, 65%, 1);
+  --cal-text-inverted: hsla(0, 0%, 100%, 1);
+
+  /* Content/Text -> components */
+  --cal-text-info: hsla(228, 56%, 33%, 1);
+  --cal-text-success: hsla(133, 34%, 24%, 1);
+  --cal-text-attention: hsla(16, 62%, 28%, 1);
+  --cal-text-error: hsla(2, 55%, 30%, 1);
+
+  /* Brand shinanigans
+      -> These will be computed for the users theme at runtime.
+    */
+  --cal-brand: hsla(221, 39%, 11%, 1);
+  --cal-brand-emphasis: hsla(0, 0%, 6%, 1);
+  --cal-brand-text: hsla(0, 0%, 100%, 1);
+}
+.dark {
+  /* background */
+
+  --cal-bg-emphasis: hsla(0, 0%, 25%, 1);
+  --cal-bg: hsla(0, 0%, 10%, 1);
+  --cal-bg-subtle: hsla(0, 0%, 18%, 1);
+  --cal-bg-muted: hsla(0, 0%, 12%, 1);
+  --cal-bg-inverted: hsla(220, 14%, 96%, 1);
+
+  /* background -> components*/
+  --cal-bg-info: hsla(228, 56%, 33%, 1);
+  --cal-bg-success: hsla(133, 34%, 24%, 1);
+  --cal-bg-attention: hsla(16, 62%, 28%, 1);
+  --cal-bg-error: hsla(2, 55%, 30%, 1);
+  --cal-bg-dark-error: hsla(2, 55%, 30%, 1);
+
+  /* Borders */
+  --cal-border-emphasis: hsla(0, 0%, 46%, 1);
+  --cal-border: hsla(0, 0%, 34%, 1);
+  --cal-border-subtle: hsla(0, 0%, 22%, 1);
+  --cal-border-booker: hsla(0, 0%, 22%, 1);
+  --cal-border-muted: hsla(0, 0%, 18%, 1);
+  --cal-border-error: hsla(4, 63%, 41%, 1);
+  --cal-border-focus: hsla(0, 0%, 100%, 1);
+
+  /* Content/Text */
+  --cal-text-emphasis: hsla(240, 20%, 99%, 1);
+  --cal-text: hsla(0, 0%, 84%, 1);
+  --cal-text-subtle: hsla(0, 0%, 65%, 1);
+  --cal-text-muted: hsla(0, 0%, 34%, 1);
+  --cal-text-inverted: hsla(0, 0%, 10%, 1);
+
+  /* Content/Text -> components */
+  --cal-text-info: hsla(218, 83%, 93%, 1);
+  --cal-text-success: hsla(134, 76%, 94%, 1);
+  --cal-text-attention: hsla(37, 86%, 92%, 1);
+  --cal-text-error: hsla(3, 66%, 93%, 1);
+
+  /* Brand shenanigans
+      -> These will be computed for the users theme at runtime.
+    */
+  --cal-brand: hsla(0, 0%, 100%, 1);
+  --cal-brand-emphasis: hsla(218, 11%, 65%, 1);
+  --cal-brand-text: hsla(0, 0%, 0%,1);
+}
+
+@layer base {
+  * {
+    @apply border-default
+  }
+}
+
+::-moz-selection {
+  color: var(--cal-brand-text);
+  background: var(--cal-brand);
+}
+
+::selection {
+  color: var(--cal-brand-text);
+  background: var(--cal-brand);
+}
+
+body  {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+/*
+  Desktop App specific CSS
+    https://docs.todesktop.com/
+*/
+
+html.todesktop-platform-win32 .todesktop\:\!bg-transparent{
+  background: inherit !important;
+}
+
+/* disable user selection on buttons, links and images on desktop app */
+html.todesktop button,
+html.todesktop a,
+html.todesktop img,
+html.todesktop header {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  cursor: default !important;
+}
+
+html.todesktop,
+html.todesktop div {
+  cursor: default !important;
+}
+
+/* make header draggable on desktop app */
+html.todesktop header {
+  -webkit-app-region: drag;
+}
+
+html.todesktop header button,
+html.todesktop header a {
+  -webkit-app-region: no-drag;
+}
+
+html.todesktop-platform-darwin body, html.todesktop-platform-darwin aside {
+  background: transparent !important;
+}
+
+html.todesktop-platform-darwin.dark main.bg-default {
+  background: rgba(0, 0, 0, 0.6) !important;
+}
+
+html.todesktop-platform-darwin.light main.bg-default {
+  background: rgba(255, 255, 255, 0.8) !important;
+}
+
+html.todesktop.light {
+  --cal-bg-emphasis: hsla(0, 0%, 11%, 0.1);
+}
+
+html.todesktop.dark {
+  --cal-bg-emphasis: hsla(220, 2%, 26%, 0.3);
+}
+
+/*
+  Adds Utility to hide scrollbar to tailwind
+    https://github.com/tailwindlabs/tailwindcss/discussions/2394
+    https://github.com/tailwindlabs/tailwindcss/pull/5732
+*/
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+}
+
+/*
+ * Override the default tailwindcss-forms styling (default is: 'colors.blue.600')
+ * @see: https://github.com/tailwindlabs/tailwindcss-forms/issues/14#issuecomment-1005376006
+ */
+[type="text"]:focus,
+[type="email"]:focus,
+[type="url"]:focus,
+[type="password"]:focus,
+[type="number"]:focus,
+[type="date"]:focus,
+[type="datetime-local"]:focus,
+[type="month"]:focus,
+[type="search"]:focus,
+[type="tel"]:focus,
+[type="checkbox"]:focus,
+[type="radio"]:focus,
+[type="time"]:focus,
+[type="week"]:focus,
+[multiple]:focus,
+textarea:focus,
+select:focus {
+  --tw-ring-color: var(--brand-color);
+  border-color: var(--brand-color);
+}
+
+@layer components {
+  .scroll-bar {
+    @apply scrollbar-thin scrollbar-thumb-rounded-md dark:scrollbar-thumb-darkgray-300 scrollbar-thumb-gray-300 scrollbar-track-transparent;
+  }
+}
+
+/* TODO: avoid global specific css */
+/* button[role="switch"][data-state="checked"] span {
+  transform: translateX(16px);
+} */
+
+@layer components {
+  /* slider */
+  .slider {
+    @apply relative flex h-4 w-40 select-none items-center;
+  }
+
+  .slider > .slider-track {
+    @apply relative h-1 flex-grow rounded-md bg-gray-400;
+  }
+
+  .slider .slider-range {
+    @apply absolute h-full rounded-full bg-gray-700;
+  }
+
+  .slider .slider-thumb {
+    @apply block h-3 w-3 cursor-pointer rounded-full bg-gray-700 transition-all;
+  }
+
+  .slider .slider-thumb:hover {
+    @apply bg-gray-600;
+  }
+
+  .slider .slider-thumb:focus {
+    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.2);
+  }
+}
+
+/* hide chat bubble on mobile */
+@media only screen and (max-width: 768px) {
+  /* Intercom FAB*/
+  #launcher {
+    display: none !important;
+  }
+
+  /* Zendesk FAB*/
+  div[role="presentation"] > iframe {
+    display: none !important;
+  }
+
+  /* Helpscout FAB*/
+  .BeaconFabButtonFrame {
+    margin-left: -30px;
+    left: 50%;
+    bottom: 28px !important;
+    z-index: 1058 !important;
+  }
+}
+
+/* TODO: implement styling for react-multi-email */
+
+/* !important to override react-dates */
+.DateRangePickerInput__withBorder {
+  border: 0 !important;
+}
+.DateInput_input {
+  border: 1px solid #d1d5db !important;
+  border-radius: 2px !important;
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  color: #000;
+  padding: 11px ​11px 9px !important;
+  line-height: 16px !important;
+}
+
+.DateInput_input__focused {
+  border: 2px solid #000 !important;
+  border-radius: 2px !important;
+  box-shadow: none !important;
+  padding: 10px ​10px 9px !important;
+}
+
+.DateRangePickerInput_arrow {
+  padding: 0px 10px;
+}
+
+.loader {
+  display: block;
+  width: 30px;
+  height: 30px;
+  margin: 60px auto;
+  position: relative;
+  border-width: 4px;
+  border-style: solid;
+  animation: loader 2s infinite ease;
+}
+
+.loader-inner {
+  vertical-align: top;
+  display: inline-block;
+  width: 100%;
+  animation: loader-inner 2s infinite ease-in;
+}
+
+.no-ring-inset {
+  --tw-ring-inset: unset;
+}
+
+@keyframes loader {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  25% {
+    transform: rotate(180deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  75% {
+    transform: rotate(360deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loader-inner {
+  0% {
+    height: 0%;
+  }
+
+  25% {
+    height: 0%;
+  }
+
+  50% {
+    height: 100%;
+  }
+
+  75% {
+    height: 100%;
+  }
+
+  100% {
+    height: 0%;
+  }
+}
+
+.text-inverted-important {
+  color: white !important;
+}
+
+@layer utilities {
+  .transition-max-width {
+    -webkit-transition-property: max-width;
+    transition-property: max-width;
+  }
+}
+
+#timeZone input:focus {
+  box-shadow: none;
+}
+
+/* react-date-picker forces a border upon us, cast it away */
+.react-date-picker__wrapper {
+  border: none !important;
+}
+
+.react-date-picker__inputGroup__input {
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
+/* animations */
+.slideInBottom {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-name: slideInBottom;
+}
+
+@keyframes slideInBottom {
+  from {
+    opacity: 0;
+    transform: translateY(30%);
+    pointer-events: none;
+  }
+  to {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
+/* animations */
+.slideInTop {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-name: slideInTop;
+}
+
+@keyframes slideInTop {
+  from {
+    opacity: 0;
+    transform: translateY(-20%);
+    pointer-events: none;
+  }
+  to {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translateY(0%);
+  }
+}
+
+.fadeIn {
+  animation-duration: 0.3s;
+  animation-fill-mode: both;
+  animation-name: fadeIn;
+  animation-timing-function: ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/**
+ * Makes sure h-screen works on mobile Safari. By default h-screen
+ * does not take into account the height of the address bar, causing
+ * weird behaviour when scrolling — sometimes the height will be correct
+ * and sometimes it won't, depending on whether the address bar is
+ * in 'collapsed' state or not.
+ * @see: https://benborgers.com/posts/tailwind-h-screen
+ */
+@supports (-webkit-touch-callout: none) {
+  .h-screen {
+    height: -webkit-fill-available;
+  }
+}
+
+::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+}
+
+.react-tel-input .country-list .country:hover,
+.react-tel-input .country-list .country.highlight {
+  @apply !bg-emphasis;
+}
+
+.react-tel-input .flag-dropdown .selected-flag,
+.react-tel-input .flag-dropdown.open .selected-flag {
+  @apply !bg-default;
+}
+
+.react-tel-input .flag-dropdown {
+  @apply !border-r-default left-0.5 !border-y-0 !border-l-0;
+}
+
+.intercom-lightweight-app  {
+  @apply z-40 !important;
+}
diff --git a/apps/ui-playground/app/layout.tsx b/apps/ui-playground/app/layout.tsx
new file mode 100644
index 0000000000..a521089ba0
--- /dev/null
+++ b/apps/ui-playground/app/layout.tsx
@@ -0,0 +1,31 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
+    </html>
+  );
+}
diff --git a/apps/ui-playground/app/page.tsx b/apps/ui-playground/app/page.tsx
new file mode 100644
index 0000000000..18bb6f0c61
--- /dev/null
+++ b/apps/ui-playground/app/page.tsx
@@ -0,0 +1,5 @@
+// import  AvatarDemo  from "./_components/AvatarDemo";
+
+export default function Home() {
+  return <div className="p-4 font-[family-name:var(--font-geist-sans)]">{/* <AvatarDemo /> */}</div>;
+}
diff --git a/apps/ui-playground/eslint.config.mjs b/apps/ui-playground/eslint.config.mjs
new file mode 100644
index 0000000000..c85fb67c46
--- /dev/null
+++ b/apps/ui-playground/eslint.config.mjs
@@ -0,0 +1,16 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+];
+
+export default eslintConfig;
diff --git a/apps/ui-playground/next.config.ts b/apps/ui-playground/next.config.ts
new file mode 100644
index 0000000000..e9ffa3083a
--- /dev/null
+++ b/apps/ui-playground/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;
diff --git a/apps/ui-playground/package.json b/apps/ui-playground/package.json
new file mode 100644
index 0000000000..79f7abbe38
--- /dev/null
+++ b/apps/ui-playground/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "ui-playground",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack --port=1337",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@calcom/config": "*",
+    "@calcom/lib": "*",
+    "@calcom/ui": "*",
+    "next": "15.1.6",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^9",
+    "eslint-config-next": "15.1.6",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
diff --git a/apps/ui-playground/postcss.config.mjs b/apps/ui-playground/postcss.config.mjs
new file mode 100644
index 0000000000..1a69fd2a45
--- /dev/null
+++ b/apps/ui-playground/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/apps/ui-playground/tailwind.config.ts b/apps/ui-playground/tailwind.config.ts
new file mode 100644
index 0000000000..f21d47baef
--- /dev/null
+++ b/apps/ui-playground/tailwind.config.ts
@@ -0,0 +1,8 @@
+import base from "@calcom/config/tailwind-preset";
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  ...base,
+  content: [...base.content],
+  plugins: [...base.plugins, require("tailwindcss-animate")],
+};
diff --git a/apps/ui-playground/tsconfig.json b/apps/ui-playground/tsconfig.json
new file mode 100644
index 0000000000..d8b93235f2
--- /dev/null
+++ b/apps/ui-playground/tsconfig.json
@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}