diff --git a/apps/storybook/.storybook/components/ElementInspector/ElementInspector.tsx b/apps/storybook/.storybook/components/ElementInspector/ElementInspector.tsx
deleted file mode 100644
index 29ca311c03d5d6..00000000000000
--- a/apps/storybook/.storybook/components/ElementInspector/ElementInspector.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import { extractElementData } from './utils';
-
-/**
- * ElementInspector - Runs inside the Storybook iframe.
- *
- * Responsibilities:
- * 1. Respond to parent mouse position messages with element data at those coordinates
- * 2. Support the overlay-based element selection pattern
- */
-export function ElementInspector() {
-  useEffect(() => {
-    // Only run if we're in an iframe
-    if (window.self === window.top) return;
-
-    // Listen for mouse position from parent overlay
-    const handleMessage = (event: MessageEvent) => {
-      if (event.data?.type === 'parent-mouse-position') {
-        const { x, y } = event.data;
-
-        const element = document.elementFromPoint(x, y);
-
-        if (element) {
-          const elementData = extractElementData(element as HTMLElement);
-
-          window.parent.postMessage(
-            { type: 'iframe-element-at-position', element: elementData },
-            '*',
-          );
-        } else {
-          window.parent.postMessage(
-            { type: 'iframe-element-at-position', element: null },
-            '*',
-          );
-        }
-      }
-    };
-
-    window.addEventListener('message', handleMessage);
-
-    return () => {
-      window.removeEventListener('message', handleMessage);
-    };
-  }, []);
-
-  return null;
-}
diff --git a/apps/storybook/.storybook/components/ElementInspector/index.ts b/apps/storybook/.storybook/components/ElementInspector/index.ts
deleted file mode 100644
index 688bd26f3032c3..00000000000000
--- a/apps/storybook/.storybook/components/ElementInspector/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ElementInspector } from './ElementInspector';
diff --git a/apps/storybook/.storybook/components/ElementInspector/utils/index.ts b/apps/storybook/.storybook/components/ElementInspector/utils/index.ts
deleted file mode 100644
index 04bca77e0dec46..00000000000000
--- a/apps/storybook/.storybook/components/ElementInspector/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './utils';
diff --git a/apps/storybook/.storybook/components/ElementInspector/utils/utils.ts b/apps/storybook/.storybook/components/ElementInspector/utils/utils.ts
deleted file mode 100644
index 1d74322e97fca7..00000000000000
--- a/apps/storybook/.storybook/components/ElementInspector/utils/utils.ts
+++ /dev/null
@@ -1,259 +0,0 @@
-import type { ElementData } from '../../../types';
-
-type Fiber = {
-  type?:
-    | string
-    | { name?: string; displayName?: string }
-    | ((...args: unknown[]) => unknown);
-  return?: Fiber;
-};
-
-// Props to filter out (noise, not semantic)
-const FILTERED_PROPS = new Set([
-  'className',
-  'class',
-  'style',
-  'ref',
-  'children',
-  'key',
-  'dangerouslySetInnerHTML',
-]);
-
-// Max length for string props before filtering
-const MAX_PROP_LENGTH = 50;
-
-// Get React props from DOM element via __reactProps$xxx
-export function getReactProps(element: HTMLElement): Record<string, unknown> | null {
-  const key = Object.keys(element).find((k) => k.startsWith('__reactProps$'));
-  return key
-    ? ((element as unknown as Record<string, Record<string, unknown>>)[key] ?? null)
-    : null;
-}
-
-// Get React fiber from DOM element via __reactFiber$xxx
-export function getReactFiber(element: HTMLElement): Fiber | null {
-  const key = Object.keys(element).find((k) => k.startsWith('__reactFiber$'));
-  return key ? ((element as unknown as Record<string, Fiber>)[key] ?? null) : null;
-}
-
-// Extended fiber type with memoizedProps
-type FiberWithProps = Fiber & {
-  memoizedProps?: Record<string, unknown>;
-};
-
-// Get component name from fiber
-function getComponentNameFromFiber(fiber: Fiber | null): string | null {
-  if (!fiber) return null;
-  const type = fiber.type;
-  if (typeof type === 'function' && 'name' in type && type.name) {
-    return type.name;
-  }
-  if (typeof type === 'object' && type !== null) {
-    if ('displayName' in type && type.displayName) {
-      return type.displayName;
-    }
-    if ('name' in type && type.name) {
-      return type.name;
-    }
-  }
-  return null;
-}
-
-// Get component props from fiber tree (finds first named component's props)
-function getComponentPropsFromFiber(
-  element: HTMLElement,
-): Record<string, unknown> | null {
-  let fiber: FiberWithProps | null | undefined = getReactFiber(element) as FiberWithProps;
-  while (fiber) {
-    const name = getComponentNameFromFiber(fiber);
-    if (name && fiber.memoizedProps) {
-      return fiber.memoizedProps;
-    }
-    fiber = fiber.return as FiberWithProps | undefined;
-  }
-  return null;
-}
-
-// Walk up fiber tree to find component name
-export function getComponentName(element: HTMLElement): string | null {
-  let fiber: Fiber | null | undefined = getReactFiber(element);
-  while (fiber) {
-    const name = getComponentNameFromFiber(fiber);
-    if (name) return name;
-    fiber = fiber.return;
-  }
-  return null;
-}
-
-// Walk up fiber tree to find parent component name (skip the first one)
-export function getParentComponentName(element: HTMLElement): string | null {
-  let fiber: Fiber | null | undefined = getReactFiber(element);
-  let foundFirst = false;
-
-  while (fiber) {
-    const name = getComponentNameFromFiber(fiber);
-    if (name) {
-      if (foundFirst) {
-        return name;
-      }
-      foundFirst = true;
-    }
-    fiber = fiber.return;
-  }
-  return null;
-}
-
-// Check if prop should be filtered
-function shouldFilterProp(key: string, value: unknown): boolean {
-  // Skip internal props
-  if (key.startsWith('__')) return true;
-
-  // Skip data-* attributes
-  if (key.startsWith('data-')) return true;
-
-  // Skip known noise props
-  if (FILTERED_PROPS.has(key)) return true;
-
-  // Skip long strings (likely className or similar)
-  if (typeof value === 'string' && value.length > MAX_PROP_LENGTH) return true;
-
-  return false;
-}
-
-// Serialize props with filtering and placeholders
-export function serializeProps(
-  props: Record<string, unknown>,
-): Record<string, string> | null {
-  const result: Record<string, string> = {};
-
-  for (const [key, value] of Object.entries(props)) {
-    if (shouldFilterProp(key, value)) continue;
-    if (value === undefined) continue;
-
-    if (typeof value === 'function') {
-      result[key] = '[Function]';
-    } else if (value instanceof HTMLElement) {
-      result[key] = '[Element]';
-    } else if (typeof value === 'object' && value !== null) {
-      result[key] = '[Object]';
-    } else if (typeof value === 'boolean') {
-      result[key] = value ? 'true' : 'false';
-    } else {
-      result[key] = String(value);
-    }
-  }
-
-  return Object.keys(result).length > 0 ? result : null;
-}
-
-// Get key computed styles
-export function getStyles(element: HTMLElement): Record<string, string> {
-  const computed = window.getComputedStyle(element);
-  return {
-    color: computed.color,
-    backgroundColor: computed.backgroundColor,
-    fontSize: computed.fontSize,
-    fontFamily: computed.fontFamily,
-    display: computed.display,
-    position: computed.position,
-  };
-}
-
-// Generate CSS selector path from element to root (for deduplication)
-export function generateSelectorPath(element: HTMLElement): string {
-  const path: string[] = [];
-  let current: HTMLElement | null = element;
-
-  while (current && current.nodeType === Node.ELEMENT_NODE && current !== document.body) {
-    let selector = current.tagName.toLowerCase();
-
-    // Stop at ID (unique identifier)
-    if (current.id) {
-      selector = `#${current.id}`;
-      path.unshift(selector);
-      break;
-    }
-
-    // Add nth-child for uniqueness
-    const parent = current.parentElement;
-    if (parent) {
-      const siblings = Array.from(parent.children);
-      const index = siblings.indexOf(current) + 1;
-      selector += `:nth-child(${index})`;
-    }
-
-    path.unshift(selector);
-    current = current.parentElement;
-  }
-
-  return path.join(' > ');
-}
-
-// Parse source location from data attributes
-function parseSource(
-  element: HTMLElement | null,
-): ElementData extends null ? never : NonNullable<ElementData>['source'] {
-  if (!element) return null;
-
-  const file = element.getAttribute('data-component-file');
-  const start = element.getAttribute('data-component-start');
-  const end = element.getAttribute('data-component-end');
-
-  if (!file || !start || !end) return null;
-
-  // Parse "52:4" format
-  const [startLine, startColumn] = start.split(':').map(Number);
-  const [endLine, endColumn] = end.split(':').map(Number);
-
-  return {
-    file,
-    startLine,
-    startColumn,
-    endLine,
-    endColumn,
-  };
-}
-
-// Extract all element data in one call
-export function extractElementData(target: HTMLElement): NonNullable<ElementData> {
-  const componentElement = target.closest('[data-component-file]') as HTMLElement | null;
-  const elementToInspect = componentElement || target;
-
-  // Get component props from fiber tree (memoizedProps on the component fiber)
-  const componentProps = getComponentPropsFromFiber(elementToInspect);
-  const rect = elementToInspect.getBoundingClientRect();
-
-  return {
-    // React Component
-    component: getComponentName(elementToInspect),
-
-    // Filtered semantic props from component's memoizedProps
-    props: componentProps ? serializeProps(componentProps) : null,
-
-    // Source location
-    source: parseSource(componentElement),
-
-    // DOM element
-    element: {
-      tag: elementToInspect.tagName.toLowerCase(),
-      id: elementToInspect.id || undefined,
-    },
-
-    // Parent component for context
-    parentComponent: getParentComponentName(elementToInspect),
-
-    // Selector path for deduplication
-    selectorPath: generateSelectorPath(elementToInspect),
-
-    // Computed styles
-    computedStyles: getStyles(elementToInspect),
-
-    // Bounding rect
-    rect: {
-      x: rect.left,
-      y: rect.top,
-      width: rect.width,
-      height: rect.height,
-    },
-  };
-}
diff --git a/apps/storybook/.storybook/components/IframeKeyboardRelay/IframeKeyboardRelay.tsx b/apps/storybook/.storybook/components/IframeKeyboardRelay/IframeKeyboardRelay.tsx
deleted file mode 100644
index df2c653480dcfa..00000000000000
--- a/apps/storybook/.storybook/components/IframeKeyboardRelay/IframeKeyboardRelay.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useEffect } from 'react';
-
-/**
- * Relays keyboard events from iframe to parent window.
- * This allows the parent to handle shortcuts even when iframe has focus.
- */
-export function IframeKeyboardRelay() {
-  useEffect(() => {
-    // Only run if we're in an iframe
-    if (window.self === window.top) return;
-
-    const handleKeyDown = (e: KeyboardEvent) => {
-      const isMod = e.metaKey || e.ctrlKey;
-
-      // Only relay modifier key combinations to avoid breaking normal typing
-      if (!isMod) return;
-
-      // Relay the keyboard event to parent
-      e.preventDefault();
-      e.stopPropagation();
-
-      window.parent.postMessage(
-        {
-          type: 'iframe-keydown',
-          key: e.key,
-          code: e.code,
-          metaKey: e.metaKey,
-          ctrlKey: e.ctrlKey,
-          shiftKey: e.shiftKey,
-          altKey: e.altKey,
-        },
-        '*',
-      );
-    };
-
-    document.addEventListener('keydown', handleKeyDown, { capture: true });
-
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown, { capture: true });
-    };
-  }, []);
-
-  return null;
-}
diff --git a/apps/storybook/.storybook/components/IframeKeyboardRelay/index.ts b/apps/storybook/.storybook/components/IframeKeyboardRelay/index.ts
deleted file mode 100644
index 2bbb635782c26b..00000000000000
--- a/apps/storybook/.storybook/components/IframeKeyboardRelay/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { IframeKeyboardRelay } from './IframeKeyboardRelay';
diff --git a/apps/storybook/.storybook/components/IframeReloadListener/IframeReloadListener.tsx b/apps/storybook/.storybook/components/IframeReloadListener/IframeReloadListener.tsx
deleted file mode 100644
index 8c0a14abeffbba..00000000000000
--- a/apps/storybook/.storybook/components/IframeReloadListener/IframeReloadListener.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { useEffect } from 'react';
-
-/**
- * Listens for reload messages from the parent window and reloads the iframe.
- * Used when Storybook is embedded in an iframe to allow manual refresh.
- */
-export function IframeReloadListener() {
-  useEffect(() => {
-    const handleReloadMessage = (e: MessageEvent) => {
-      console.log('[Storybook] Received message:', e.data, 'from origin:', e.origin);
-      if (e.data.type === 'reload') {
-        console.log('[Storybook] Reloading iframe...');
-        window.location.reload();
-      }
-    };
-
-    window.addEventListener('message', handleReloadMessage);
-    console.log('[Storybook] Reload message listener registered');
-
-    return () => {
-      window.removeEventListener('message', handleReloadMessage);
-    };
-  }, []);
-
-  return null; // This component only adds event listeners
-}
diff --git a/apps/storybook/.storybook/components/IframeReloadListener/index.ts b/apps/storybook/.storybook/components/IframeReloadListener/index.ts
deleted file mode 100644
index 124b5d1e9e4403..00000000000000
--- a/apps/storybook/.storybook/components/IframeReloadListener/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { IframeReloadListener } from './IframeReloadListener';
diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
index 8b0e7c2020fd29..eeee3008f650a1 100644
--- a/apps/storybook/.storybook/main.ts
+++ b/apps/storybook/.storybook/main.ts
@@ -1,10 +1,10 @@
+import { dirname, join, resolve } from 'path';
+import { fileURLToPath } from 'url';
 import type { StorybookConfig } from '@storybook/nextjs-vite';
-import { storybookOnlookPlugin } from './storybook-onlook-plugin/index';
-import componentLocPlugin from './vite-plugin-component-loc';
+import { storybookOnlookPlugin } from '@onlook/storybook-plugin';
 
-// Disable custom plugins for Chromatic/CI static builds
-// eslint-disable-next-line turbo/no-undeclared-env-vars
-const isStaticBuild = Boolean(process.env.CHROMATIC || process.env.CI);
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
 
 const config: StorybookConfig = {
   stories: [
@@ -12,6 +12,10 @@ const config: StorybookConfig = {
     '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)',
     // Include stories from packages/ui (components directory only, excludes node_modules)
     '../../../packages/ui/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // Include stories from packages/features
+    '../../../packages/features/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+    // Include stories from apps/web/components
+    '../../../apps/web/components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
   addons: [
     '@chromatic-com/storybook',
@@ -27,27 +31,26 @@ const config: StorybookConfig = {
   async viteFinal(config) {
     const { mergeConfig } = await import('vite');
 
-    const merged = mergeConfig(config, {
-      plugins: isStaticBuild ? [] : [storybookOnlookPlugin],
-      server: isStaticBuild
-        ? {}
-        : {
-            hmr: {
-              // E2B sandboxes use HTTPS, so we need secure WebSocket
-              protocol: 'wss',
-              // E2B routes through standard HTTPS port 443
-              clientPort: 443,
-              // The actual Storybook server port inside the sandbox
-              port: 6006,
-            },
-            cors: true, // Allow cross-origin requests for iframe embedding
-          },
-    });
+    // Path aliases for apps/web components
+    const webAppPath = resolve(__dirname, '../../../apps/web');
 
-    // componentLocPlugin must run BEFORE Storybook's plugins so it can inject
-    // data-component-loc attributes into JSX before other transforms run
-    merged.plugins = [componentLocPlugin(), ...(merged.plugins ?? [])];
-    return merged;
+    // storybookOnlookPlugin handles:
+    // - Component location injection (data-component-file, etc.)
+    // - HMR configuration for E2B sandboxes
+    // - CORS configuration
+    // - Static build detection (returns [] for CI/Chromatic)
+    return mergeConfig(config, {
+      plugins: [storybookOnlookPlugin()],
+      resolve: {
+        alias: {
+          '@components': join(webAppPath, 'components'),
+          '@lib': join(webAppPath, 'lib'),
+          '@server': join(webAppPath, 'server'),
+          '@pages': join(webAppPath, 'pages'),
+          '~': join(webAppPath, 'modules'),
+        },
+      },
+    });
   },
 };
 export default config;
diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
index e4c37e9b618fc8..0bd5aeca9175bd 100644
--- a/apps/storybook/.storybook/preview.tsx
+++ b/apps/storybook/.storybook/preview.tsx
@@ -2,15 +2,8 @@ import type { Preview } from '@storybook/nextjs-vite';
 import '../src/styles/globals.css';
 import { withThemeByClassName } from '@storybook/addon-themes';
 import { Provider as TooltipProvider } from '@radix-ui/react-tooltip';
-import { ElementInspector } from './components/ElementInspector';
-import { IframeKeyboardRelay } from './components/IframeKeyboardRelay';
-import { IframeReloadListener } from './components/IframeReloadListener';
 import SVG from 'react-inlinesvg';
 
-// Disable iframe communication components for static builds (Chromatic/CI)
-// eslint-disable-next-line turbo/no-undeclared-env-vars
-const isStaticBuild = Boolean(process.env.CHROMATIC || process.env.CI);
-
 // Load cal.com icon sprites
 function IconSprites() {
   return <SVG src="/icons/sprite.svg" />;
@@ -28,9 +21,6 @@ const preview: Preview = {
     (Story) => (
       <TooltipProvider>
         <IconSprites />
-        {!isStaticBuild && <IframeReloadListener />}
-        {!isStaticBuild && <IframeKeyboardRelay />}
-        {!isStaticBuild && <ElementInspector />}
         <div className="font-sans">
           <Story />
         </div>
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/handlers/handleStoryFileChange/handleStoryFileChange.ts b/apps/storybook/.storybook/storybook-onlook-plugin/handlers/handleStoryFileChange/handleStoryFileChange.ts
deleted file mode 100644
index 9b5a788e98febc..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/handlers/handleStoryFileChange/handleStoryFileChange.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-import path from 'node:path';
-import type { HmrContext } from 'vite';
-import { generateScreenshot } from '../../screenshot-service/index';
-import { computeFileHash } from '../../utils/fileSystem/index';
-import { updateManifest } from '../../utils/manifest/index';
-
-// Cache for Storybook's index.json
-let cachedIndex: {
-  entries: Record<string, { id: string; importPath: string; type: string }>;
-} | null = null;
-let indexFetchPromise: Promise<void> | null = null;
-
-// Debounce state
-const pendingFiles = new Set<string>();
-let debounceTimer: ReturnType<typeof setTimeout> | null = null;
-const DEBOUNCE_MS = 500;
-
-async function fetchStorybookIndex(): Promise<void> {
-  try {
-    const response = await fetch('http://localhost:6006/index.json');
-    if (response.ok) {
-      cachedIndex = await response.json();
-      console.log('[Screenshots] Cached Storybook index');
-    }
-  } catch (error) {
-    console.error('[Screenshots] Failed to fetch Storybook index:', error);
-  }
-}
-
-function getStoriesForFile(filePath: string): string[] {
-  if (!cachedIndex) return [];
-
-  // Normalize the file path to match Storybook's importPath format
-  const fileName = path.basename(filePath);
-
-  return Object.values(cachedIndex.entries)
-    .filter((entry) => entry.type === 'story' && entry.importPath.endsWith(fileName))
-    .map((entry) => entry.id);
-}
-
-async function regenerateScreenshotsForFiles(files: string[]): Promise<void> {
-  // Refresh index before regenerating (in case new stories were added)
-  await fetchStorybookIndex();
-
-  const allStoryIds = new Set<string>();
-  const fileToStories = new Map<string, string[]>();
-
-  for (const file of files) {
-    const storyIds = getStoriesForFile(file);
-    fileToStories.set(file, storyIds);
-    for (const id of storyIds) {
-      allStoryIds.add(id);
-    }
-  }
-
-  if (allStoryIds.size === 0) {
-    console.log('[Screenshots] No stories found for changed files');
-    return;
-  }
-
-  console.log(
-    `[Screenshots] Regenerating ${allStoryIds.size} stories from ${files.length} files`,
-  );
-
-  const storybookUrl = 'http://localhost:6006';
-
-  // Regenerate screenshots for each story (both themes) and collect bounding boxes
-  const storyBoundingBoxes = new Map<string, { width: number; height: number } | null>();
-
-  await Promise.all(
-    Array.from(allStoryIds).map(async (storyId) => {
-      const [lightResult, _darkResult] = await Promise.all([
-        generateScreenshot(storyId, 'light', storybookUrl),
-        generateScreenshot(storyId, 'dark', storybookUrl),
-      ]);
-      // Use bounding box from light theme
-      if (lightResult) {
-        storyBoundingBoxes.set(storyId, lightResult.boundingBox);
-      }
-    }),
-  );
-
-  // Update manifest with new hashes and bounding boxes
-  for (const [file, storyIds] of fileToStories) {
-    const fileHash = computeFileHash(file);
-    storyIds.forEach((storyId) => {
-      updateManifest(storyId, file, fileHash, storyBoundingBoxes.get(storyId));
-    });
-  }
-
-  console.log(`[Screenshots] ✓ Regenerated ${allStoryIds.size} stories`);
-}
-
-export function handleStoryFileChange({ file, modules }: HmrContext) {
-  // Detect story file changes
-  if (file.endsWith('.stories.tsx') || file.endsWith('.stories.ts')) {
-    console.log(`[Screenshots] Story file changed: ${file}`);
-
-    // Initialize index cache on first change
-    if (!cachedIndex && !indexFetchPromise) {
-      indexFetchPromise = fetchStorybookIndex();
-    }
-
-    // Add to pending files
-    pendingFiles.add(file);
-
-    // Debounce regeneration
-    if (debounceTimer) {
-      clearTimeout(debounceTimer);
-    }
-
-    debounceTimer = setTimeout(async () => {
-      const files = Array.from(pendingFiles);
-      pendingFiles.clear();
-      debounceTimer = null;
-
-      try {
-        await regenerateScreenshotsForFiles(files);
-      } catch (error) {
-        console.error('[Screenshots] Error regenerating screenshots:', error);
-      }
-    }, DEBOUNCE_MS);
-
-    // Return modules to trigger HMR update in Storybook
-    return modules;
-  }
-}
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/handlers/handleStoryFileChange/index.ts b/apps/storybook/.storybook/storybook-onlook-plugin/handlers/handleStoryFileChange/index.ts
deleted file mode 100644
index 3799506b2e54ce..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/handlers/handleStoryFileChange/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { handleStoryFileChange } from './handleStoryFileChange';
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/index.ts b/apps/storybook/.storybook/storybook-onlook-plugin/index.ts
deleted file mode 100644
index a4f199a73a0d56..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { storybookOnlookPlugin } from './storybook-onlook-plugin';
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/constants.ts b/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/constants.ts
deleted file mode 100644
index 9b0b0e582ae58e..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/constants.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import path from 'node:path';
-
-export const CACHE_DIR = path.join(process.cwd(), '.storybook-cache');
-export const SCREENSHOTS_DIR = path.join(CACHE_DIR, 'screenshots');
-export const MANIFEST_PATH = path.join(CACHE_DIR, 'manifest.json');
-
-// Full HD viewport so page-level mocks render correctly
-// Screenshot clips to actual component size, so this doesn't affect file size
-export const VIEWPORT_WIDTH = 1920;
-export const VIEWPORT_HEIGHT = 1080;
-
-// Minimum dimensions for components on canvas
-export const MIN_COMPONENT_WIDTH = 420;
-export const MIN_COMPONENT_HEIGHT = 280;
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/index.ts b/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/index.ts
deleted file mode 100644
index b8c32ff78bb57d..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { generateAllScreenshots } from './screenshot-service';
-export { generateScreenshot, captureScreenshotBuffer } from './utils/screenshot/index';
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/screenshot-service.ts b/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/screenshot-service.ts
deleted file mode 100644
index c03d9aeb857979..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/screenshot-service.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { computeFileHash } from '../utils/fileSystem/index';
-import { updateManifest } from '../utils/manifest/index';
-import { closeBrowser } from './utils/browser/index';
-import { generateScreenshot } from './utils/screenshot/index';
-
-/**
- * Generate screenshots for all stories (parallelized for speed)
- */
-export async function generateAllScreenshots(
-  stories: Array<{ id: string; importPath: string }>,
-  storybookUrl: string = 'http://localhost:6006',
-): Promise<void> {
-  console.log(`Generating screenshots for ${stories.length} stories...`);
-
-  // Process stories in batches for better performance
-  // Higher than CPU count since work is I/O-bound (waiting for page render)
-  const BATCH_SIZE = 10;
-  const batches: Array<Array<{ id: string; importPath: string }>> = [];
-
-  for (let i = 0; i < stories.length; i += BATCH_SIZE) {
-    batches.push(stories.slice(i, i + BATCH_SIZE));
-  }
-
-  let completed = 0;
-  for (const batch of batches) {
-    await Promise.all(
-      batch.map(async (story) => {
-        // Generate both light and dark in parallel for each story
-        const [lightResult, darkResult] = await Promise.all([
-          generateScreenshot(story.id, 'light', storybookUrl),
-          generateScreenshot(story.id, 'dark', storybookUrl),
-        ]);
-
-        if (lightResult && darkResult) {
-          const fileHash = computeFileHash(story.importPath);
-          // Use bounding box from light theme (should be same for both)
-          updateManifest(story.id, story.importPath, fileHash, lightResult.boundingBox);
-        }
-
-        completed++;
-        console.log(
-          `[${completed}/${stories.length}] Generated screenshots for ${story.id}`,
-        );
-      }),
-    );
-  }
-
-  await closeBrowser();
-  console.log('Screenshot generation complete!');
-}
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/types.ts b/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/types.ts
deleted file mode 100644
index aeb0f123430c22..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export interface BoundingBox {
-  width: number;
-  height: number;
-}
-
-export interface ScreenshotMetadata {
-  fileHash: string;
-  lastGenerated: string;
-  sourcePath: string;
-  screenshots: {
-    light: string;
-    dark: string;
-  };
-  boundingBox?: BoundingBox;
-}
-
-export interface Manifest {
-  stories: Record<string, ScreenshotMetadata>;
-}
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/browser/browser.ts b/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/browser/browser.ts
deleted file mode 100644
index f190c10a36faf2..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/browser/browser.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { type Browser, chromium } from 'playwright';
-
-let browser: Browser | null = null;
-
-/**
- * Initialize browser instance
- */
-export async function getBrowser(): Promise<Browser> {
-  if (!browser) {
-    browser = await chromium.launch({
-      headless: true,
-    });
-  }
-  return browser;
-}
-
-/**
- * Close browser instance
- */
-export async function closeBrowser() {
-  if (browser) {
-    try {
-      await browser.close();
-    } catch (error) {
-      console.error('Error closing browser:', error);
-    } finally {
-      browser = null;
-    }
-  }
-}
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/browser/index.ts b/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/browser/index.ts
deleted file mode 100644
index a11c96c366e6b5..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/browser/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { getBrowser, closeBrowser } from './browser';
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/screenshot/index.ts b/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/screenshot/index.ts
deleted file mode 100644
index 52bf20ae390c1b..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/screenshot/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export {
-  getScreenshotPath,
-  screenshotExists,
-  captureScreenshotBuffer,
-  generateScreenshot,
-  type ScreenshotResult,
-  type GenerateScreenshotResult,
-} from './screenshot';
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/screenshot/screenshot.ts b/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/screenshot/screenshot.ts
deleted file mode 100644
index 83815d52f11c47..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/screenshot/screenshot.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import fs from 'node:fs';
-import path from 'node:path';
-import { ensureCacheDirectories } from '../../../utils/fileSystem/index';
-import {
-  MIN_COMPONENT_HEIGHT,
-  MIN_COMPONENT_WIDTH,
-  SCREENSHOTS_DIR,
-  VIEWPORT_HEIGHT,
-  VIEWPORT_WIDTH,
-} from '../../constants';
-import type { BoundingBox } from '../../types';
-import { getBrowser } from '../browser/index';
-
-export interface ScreenshotResult {
-  buffer: Buffer;
-  boundingBox: BoundingBox | null;
-}
-
-export interface GenerateScreenshotResult {
-  path: string;
-  boundingBox: BoundingBox | null;
-}
-
-/**
- * Get screenshot file path
- */
-export function getScreenshotPath(storyId: string, theme: 'light' | 'dark'): string {
-  const storyDir = path.join(SCREENSHOTS_DIR, storyId);
-  return path.join(storyDir, `${theme}.png`);
-}
-
-/**
- * Check if screenshot exists
- */
-export function screenshotExists(storyId: string, theme: 'light' | 'dark'): boolean {
-  const screenshotPath = getScreenshotPath(storyId, theme);
-  return fs.existsSync(screenshotPath);
-}
-
-/**
- * Capture a screenshot and return it as a Buffer with bounding box info
- */
-export async function captureScreenshotBuffer(
-  storyId: string,
-  theme: 'light' | 'dark',
-  width: number = VIEWPORT_WIDTH,
-  height: number = VIEWPORT_HEIGHT,
-  storybookUrl: string = 'http://localhost:6006',
-): Promise<ScreenshotResult> {
-  const browser = await getBrowser();
-  const context = await browser.newContext({
-    viewport: { width, height },
-    deviceScaleFactor: 2,
-  });
-  const page = await context.newPage();
-
-  try {
-    // Navigate to story iframe URL
-    const url = `${storybookUrl}/iframe.html?id=${storyId}&viewMode=story&globals=theme:${theme}`;
-    await page.goto(url, { timeout: 15000 });
-
-    // Wait for page to be fully ready (matching @storybook/test-runner's waitForPageReady)
-    await page.waitForLoadState('domcontentloaded');
-    await page.waitForLoadState('load');
-    await page.waitForLoadState('networkidle');
-    await page.evaluate(() => document.fonts.ready);
-
-    // Wait for all images to be fully loaded and decoded
-    await page.evaluate(async () => {
-      const images = document.querySelectorAll('img');
-      await Promise.all(
-        Array.from(images).map((img) => {
-          if (img.complete) return Promise.resolve();
-          return new Promise((resolve) => {
-            img.addEventListener('load', resolve);
-            img.addEventListener('error', resolve);
-          });
-        }),
-      );
-    });
-
-    // Calculate the bounding box of all content inside #storybook-root
-    const contentBounds = await page.evaluate(() => {
-      const root = document.querySelector('#storybook-root');
-      if (!root) return null;
-
-      // Get the bounding rect of all children combined
-      const children = root.querySelectorAll('*');
-      if (children.length === 0) return null;
-
-      let minX = Infinity,
-        minY = Infinity,
-        maxX = -Infinity,
-        maxY = -Infinity;
-
-      children.forEach((child) => {
-        const rect = child.getBoundingClientRect();
-        if (rect.width === 0 || rect.height === 0) return;
-        minX = Math.min(minX, rect.left);
-        minY = Math.min(minY, rect.top);
-        maxX = Math.max(maxX, rect.right);
-        maxY = Math.max(maxY, rect.bottom);
-      });
-
-      if (minX === Infinity) return null;
-
-      return {
-        x: minX,
-        y: minY,
-        width: maxX - minX,
-        height: maxY - minY,
-      };
-    });
-
-    let screenshotBuffer: Buffer;
-    let resultBoundingBox: BoundingBox | null = null;
-
-    if (contentBounds && contentBounds.width > 0 && contentBounds.height > 0) {
-      const PADDING = 20; // 10px each side
-      const clippedWidth = Math.min(width, contentBounds.width + PADDING);
-      const clippedHeight = Math.min(height, contentBounds.height + PADDING);
-
-      // Store dimensions that match the actual screenshot (including padding)
-      resultBoundingBox = {
-        width: Math.max(MIN_COMPONENT_WIDTH, Math.round(clippedWidth)),
-        height: Math.max(MIN_COMPONENT_HEIGHT, Math.round(clippedHeight)),
-      };
-
-      screenshotBuffer = await page.screenshot({
-        type: 'png',
-        clip: {
-          x: Math.max(0, contentBounds.x - 10),
-          y: Math.max(0, contentBounds.y - 10),
-          width: clippedWidth,
-          height: clippedHeight,
-        },
-      });
-    } else {
-      screenshotBuffer = await page.screenshot({ type: 'png' });
-    }
-
-    return { buffer: screenshotBuffer, boundingBox: resultBoundingBox };
-  } finally {
-    await context.close();
-  }
-}
-
-/**
- * Generate a screenshot for a story and save to disk
- */
-export async function generateScreenshot(
-  storyId: string,
-  theme: 'light' | 'dark',
-  storybookUrl: string = 'http://localhost:6006',
-): Promise<GenerateScreenshotResult | null> {
-  try {
-    ensureCacheDirectories();
-
-    const storyDir = path.join(SCREENSHOTS_DIR, storyId);
-    if (!fs.existsSync(storyDir)) {
-      fs.mkdirSync(storyDir, { recursive: true });
-    }
-
-    const screenshotPath = getScreenshotPath(storyId, theme);
-    const { buffer, boundingBox } = await captureScreenshotBuffer(
-      storyId,
-      theme,
-      VIEWPORT_WIDTH,
-      VIEWPORT_HEIGHT,
-      storybookUrl,
-    );
-    fs.writeFileSync(screenshotPath, buffer);
-
-    return { path: screenshotPath, boundingBox };
-  } catch (error) {
-    console.error(`Error generating screenshot for ${storyId} (${theme}):`, error);
-    return null;
-  }
-}
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/storybook-onlook-plugin.ts b/apps/storybook/.storybook/storybook-onlook-plugin/storybook-onlook-plugin.ts
deleted file mode 100644
index 08037f423ff4e5..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/storybook-onlook-plugin.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-import fs from 'node:fs';
-import type { IncomingMessage, ServerResponse } from 'node:http';
-import path, { dirname, join, relative } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import type { Plugin, ViteDevServer } from 'vite';
-import { handleStoryFileChange } from './handlers/handleStoryFileChange/index';
-import { captureScreenshotBuffer } from './screenshot-service/utils/screenshot/index';
-import { findGitRoot } from './utils/findGitRoot/index';
-
-// Calculate storybook location relative to git root
-const __dirname = dirname(fileURLToPath(import.meta.url));
-const storybookDir = join(__dirname, '..');
-const gitRoot = findGitRoot(storybookDir);
-const storybookLocation = gitRoot ? relative(gitRoot, storybookDir) : '';
-const repoRoot = gitRoot || process.cwd();
-
-const serveMetadataAndScreenshots = (
-  req: IncomingMessage,
-  res: ServerResponse,
-  next: () => void,
-) => {
-  // Consolidated endpoint: Storybook index + metadata + boundingBox
-  if (req.url === '/onbook-index.json') {
-    const manifestPath = path.join(process.cwd(), '.storybook-cache', 'manifest.json');
-
-    // Fetch Storybook's index.json and enrich it
-    fetch('http://localhost:6006/index.json')
-      .then((response) => response.json())
-      .then((indexData: Record<string, unknown>) => {
-        // Load manifest for bounding box data
-        const manifest = fs.existsSync(manifestPath)
-          ? JSON.parse(fs.readFileSync(manifestPath, 'utf-8'))
-          : { stories: {} };
-
-        // Default viewport size as fallback
-        const defaultBoundingBox = { width: 1920, height: 1080 };
-
-        // Add boundingBox to each entry
-        const entries = (indexData.entries || {}) as Record<string, Record<string, unknown>>;
-        for (const [storyId, entry] of Object.entries(entries)) {
-          const manifestEntry = manifest.stories?.[storyId];
-          entry.boundingBox = manifestEntry?.boundingBox || defaultBoundingBox;
-        }
-
-        // Add metadata
-        indexData.meta = { storybookLocation, repoRoot };
-
-        res.setHeader('Content-Type', 'application/json');
-        res.setHeader('Access-Control-Allow-Origin', '*');
-        res.end(JSON.stringify(indexData));
-      })
-      .catch((error) => {
-        console.error('Failed to fetch/extend index.json:', error);
-        res.statusCode = 500;
-        res.setHeader('Content-Type', 'application/json');
-        res.end(
-          JSON.stringify({ error: 'Failed to fetch index', details: String(error) }),
-        );
-      });
-    return;
-  }
-
-  // On-demand screenshot capture API
-  if (req.url?.startsWith('/api/capture-screenshot')) {
-    const url = new URL(req.url, 'http://localhost');
-    const storyId = url.searchParams.get('storyId');
-    const theme = (url.searchParams.get('theme') || 'light') as 'light' | 'dark';
-    const width = parseInt(url.searchParams.get('width') || '800', 10);
-    const height = parseInt(url.searchParams.get('height') || '600', 10);
-
-    if (!storyId) {
-      res.statusCode = 400;
-      res.setHeader('Content-Type', 'application/json');
-      res.end(JSON.stringify({ error: 'storyId is required' }));
-      return;
-    }
-
-    // Validate theme
-    if (theme !== 'light' && theme !== 'dark') {
-      res.statusCode = 400;
-      res.setHeader('Content-Type', 'application/json');
-      res.end(JSON.stringify({ error: 'theme must be "light" or "dark"' }));
-      return;
-    }
-
-    // Capture screenshot asynchronously
-    captureScreenshotBuffer(storyId, theme, width, height)
-      .then(({ buffer }) => {
-        res.setHeader('Content-Type', 'image/png');
-        res.setHeader('Access-Control-Allow-Origin', '*');
-        res.setHeader('Cache-Control', 'no-cache');
-        res.end(buffer);
-      })
-      .catch((error) => {
-        console.error('Screenshot capture error:', error);
-        res.statusCode = 500;
-        res.setHeader('Content-Type', 'application/json');
-        res.end(
-          JSON.stringify({
-            error: 'Failed to capture screenshot',
-            details: String(error),
-          }),
-        );
-      });
-    return;
-  }
-
-  // Serve screenshots from cache
-  if (req.url?.startsWith('/screenshots/')) {
-    const screenshotPath = path.join(
-      process.cwd(),
-      '.storybook-cache',
-      req.url.replace('/screenshots/', 'screenshots/'),
-    );
-
-    if (fs.existsSync(screenshotPath)) {
-      res.setHeader('Content-Type', 'image/png');
-      res.setHeader('Access-Control-Allow-Origin', '*');
-      res.setHeader('Cache-Control', 'public, max-age=3600');
-      fs.createReadStream(screenshotPath).pipe(res);
-    } else {
-      res.statusCode = 404;
-      res.end('Screenshot not found');
-    }
-    return;
-  }
-
-  next();
-};
-
-export const storybookOnlookPlugin: Plugin = {
-  name: 'storybook-onlook-plugin',
-  configureServer(server: ViteDevServer) {
-    server.middlewares.use(serveMetadataAndScreenshots);
-  },
-  configurePreviewServer(server) {
-    server.middlewares.use(serveMetadataAndScreenshots);
-  },
-  handleHotUpdate: handleStoryFileChange,
-};
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/utils/fileSystem/fileSystem.ts b/apps/storybook/.storybook/storybook-onlook-plugin/utils/fileSystem/fileSystem.ts
deleted file mode 100644
index 8f9cd2e5177e62..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/utils/fileSystem/fileSystem.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import crypto from 'node:crypto';
-import fs from 'node:fs';
-import { CACHE_DIR, SCREENSHOTS_DIR } from '../../screenshot-service/constants';
-
-/**
- * Ensure cache directories exist
- */
-export function ensureCacheDirectories() {
-  if (!fs.existsSync(CACHE_DIR)) {
-    fs.mkdirSync(CACHE_DIR, { recursive: true });
-  }
-  if (!fs.existsSync(SCREENSHOTS_DIR)) {
-    fs.mkdirSync(SCREENSHOTS_DIR, { recursive: true });
-  }
-}
-
-/**
- * Compute file hash
- */
-export function computeFileHash(filePath: string): string {
-  if (!fs.existsSync(filePath)) {
-    return '';
-  }
-  const content = fs.readFileSync(filePath, 'utf-8');
-  return crypto.createHash('sha256').update(content).digest('hex');
-}
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/utils/fileSystem/index.ts b/apps/storybook/.storybook/storybook-onlook-plugin/utils/fileSystem/index.ts
deleted file mode 100644
index 1cbf7ecf3f8806..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/utils/fileSystem/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { ensureCacheDirectories, computeFileHash } from './fileSystem';
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/utils/findGitRoot/findGitRoot.ts b/apps/storybook/.storybook/storybook-onlook-plugin/utils/findGitRoot/findGitRoot.ts
deleted file mode 100644
index eeb0d91d01b193..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/utils/findGitRoot/findGitRoot.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { existsSync } from 'node:fs';
-import { dirname, join } from 'node:path';
-
-/**
- * Find the git repository root by walking up the directory tree
- */
-export function findGitRoot(startPath: string): string | null {
-  let currentPath = startPath;
-
-  while (currentPath !== dirname(currentPath)) {
-    if (existsSync(join(currentPath, '.git'))) {
-      return currentPath;
-    }
-    currentPath = dirname(currentPath);
-  }
-
-  return null;
-}
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/utils/findGitRoot/index.ts b/apps/storybook/.storybook/storybook-onlook-plugin/utils/findGitRoot/index.ts
deleted file mode 100644
index f1b7d1a5a536b7..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/utils/findGitRoot/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { findGitRoot } from './findGitRoot';
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/utils/manifest/index.ts b/apps/storybook/.storybook/storybook-onlook-plugin/utils/manifest/index.ts
deleted file mode 100644
index 1aaf4bfd584f41..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/utils/manifest/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { loadManifest, saveManifest, getManifestEntry, updateManifest } from './manifest';
diff --git a/apps/storybook/.storybook/storybook-onlook-plugin/utils/manifest/manifest.ts b/apps/storybook/.storybook/storybook-onlook-plugin/utils/manifest/manifest.ts
deleted file mode 100644
index b6dd369e2ec319..00000000000000
--- a/apps/storybook/.storybook/storybook-onlook-plugin/utils/manifest/manifest.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import fs from 'node:fs';
-import { MANIFEST_PATH } from '../../screenshot-service/constants';
-import type { Manifest, ScreenshotMetadata } from '../../screenshot-service/types';
-import { ensureCacheDirectories } from '../fileSystem/index';
-
-/**
- * Load manifest from disk
- */
-export function loadManifest(): Manifest {
-  if (fs.existsSync(MANIFEST_PATH)) {
-    const content = fs.readFileSync(MANIFEST_PATH, 'utf-8');
-    return JSON.parse(content);
-  }
-  return { stories: {} };
-}
-
-/**
- * Save manifest to disk
- */
-export function saveManifest(manifest: Manifest) {
-  ensureCacheDirectories();
-  fs.writeFileSync(MANIFEST_PATH, JSON.stringify(manifest, null, 2));
-}
-
-/**
- * Get manifest entry for a story
- */
-export function getManifestEntry(storyId: string): ScreenshotMetadata | null {
-  const manifest = loadManifest();
-  return manifest.stories[storyId] || null;
-}
-
-/**
- * Update manifest for a story
- */
-export function updateManifest(
-  storyId: string,
-  sourcePath: string,
-  fileHash: string,
-  boundingBox?: { width: number; height: number } | null,
-) {
-  const manifest = loadManifest();
-
-  manifest.stories[storyId] = {
-    fileHash,
-    lastGenerated: new Date().toISOString(),
-    sourcePath,
-    screenshots: {
-      light: `screenshots/${storyId}/light.png`,
-      dark: `screenshots/${storyId}/dark.png`,
-    },
-    boundingBox: boundingBox ?? undefined,
-  };
-
-  saveManifest(manifest);
-}
diff --git a/apps/storybook/.storybook/types.ts b/apps/storybook/.storybook/types.ts
deleted file mode 100644
index 3a4e02bc97310b..00000000000000
--- a/apps/storybook/.storybook/types.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// Shared types for Storybook iframe communication
-
-export type ElementData = {
-  // React Component
-  component: string | null;
-
-  // Semantic props (filtered - no className, data-*, style, ref)
-  props: Record<string, string> | null;
-
-  // Source location (definition)
-  source: {
-    file: string;
-    startLine: number;
-    startColumn: number;
-    endLine: number;
-    endColumn: number;
-  } | null;
-
-  // DOM element
-  element: {
-    tag: string;
-    id?: string;
-  };
-
-  // Parent React component (for context)
-  parentComponent: string | null;
-
-  // CSS selector path (for deduplication)
-  selectorPath: string;
-
-  // Computed styles
-  computedStyles: Record<string, string>;
-
-  // Bounding rect
-  rect: {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-  };
-
-  // Story context (added by parent when storing)
-  story?: {
-    nodeId: string;
-    storyId: string;
-    name: string;
-    file?: string;
-    theme: 'light' | 'dark';
-  };
-} | null;
-
-// Message types for iframe-parent communication
-export type IframeMessage =
-  | { type: 'iframe-element-at-position'; element: ElementData }
-  | { type: 'parent-mouse-position'; x: number; y: number }
-  | { type: 'reload' };
diff --git a/apps/storybook/.storybook/vite-plugin-component-loc.ts b/apps/storybook/.storybook/vite-plugin-component-loc.ts
deleted file mode 100644
index 5a976decbf7ba0..00000000000000
--- a/apps/storybook/.storybook/vite-plugin-component-loc.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-import path from 'node:path';
-import generateModule from '@babel/generator';
-import { parse } from '@babel/parser';
-import traverseModule from '@babel/traverse';
-import * as t from '@babel/types';
-import type { Plugin } from 'vite';
-
-type ComponentLocPluginOptions = {
-  include?: RegExp;
-};
-
-export function componentLocPlugin(options: ComponentLocPluginOptions = {}): Plugin {
-  const include = options.include ?? /\.(jsx|tsx)$/;
-
-  // @babel/traverse and @babel/generator are CommonJS modules with default exports.
-  // When imported in an ESM context, the default export may be on `.default` or directly on the module.
-  // This workaround handles both cases to ensure compatibility across different bundler configurations.
-  const traverse =
-    (traverseModule as unknown as typeof import('@babel/traverse')).default ??
-    (traverseModule as unknown as typeof import('@babel/traverse').default);
-  const generate =
-    (generateModule as unknown as typeof import('@babel/generator')).default ??
-    (generateModule as unknown as typeof import('@babel/generator').default);
-
-  let root: string;
-
-  return {
-    name: 'calcom-component-loc',
-    enforce: 'pre',
-    apply: 'serve',
-    configResolved(config) {
-      root = config.root;
-    },
-    transform(code, id) {
-      const [filepath] = id.split('?', 1);
-      if (filepath.includes('node_modules')) return null;
-      if (!include.test(filepath)) return null;
-
-      const ast = parse(code, {
-        sourceType: 'module',
-        plugins: ['jsx', 'typescript'],
-        sourceFilename: filepath,
-      });
-
-      let mutated = false;
-
-      // Get relative path from project root
-      const relativePath = path.relative(root, filepath);
-
-      traverse(ast, {
-        JSXElement(nodePath) {
-          const opening = nodePath.node.openingElement;
-          const element = nodePath.node;
-          if (!opening.loc || !element.loc) return;
-
-          const alreadyTagged = opening.attributes.some(
-            (attribute) =>
-              t.isJSXAttribute(attribute) &&
-              attribute.name.name === 'data-component-file',
-          );
-          if (alreadyTagged) return;
-
-          opening.attributes.push(
-            t.jsxAttribute(
-              t.jsxIdentifier('data-component-file'),
-              t.stringLiteral(relativePath),
-            ),
-            t.jsxAttribute(
-              t.jsxIdentifier('data-component-start'),
-              t.stringLiteral(`${element.loc.start.line}:${element.loc.start.column}`),
-            ),
-            t.jsxAttribute(
-              t.jsxIdentifier('data-component-end'),
-              t.stringLiteral(`${element.loc.end.line}:${element.loc.end.column}`),
-            ),
-          );
-
-          mutated = true;
-        },
-      });
-
-      if (!mutated) return null;
-
-      const output = generate(
-        ast,
-        { retainLines: true, sourceMaps: true, sourceFileName: id },
-        code,
-      );
-      return { code: output.code, map: output.map };
-    },
-  };
-}
-
-export default componentLocPlugin;
diff --git a/apps/storybook/package.json b/apps/storybook/package.json
index 6dc435a4209eb1..a2f93fdd8ba136 100644
--- a/apps/storybook/package.json
+++ b/apps/storybook/package.json
@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "storybook dev -p 6006",
-    "storybook": "storybook dev -p 6006",
+    "dev": "storybook dev",
+    "storybook": "storybook dev",
     "build": "storybook build",
     "build-storybook": "storybook build"
   },
@@ -16,12 +16,9 @@
     "react-inlinesvg": "^4.1.3"
   },
   "devDependencies": {
-    "@babel/generator": "^7.26.9",
-    "@babel/parser": "^7.26.9",
-    "@babel/traverse": "^7.26.9",
-    "@babel/types": "^7.26.9",
     "@calcom/tsconfig": "workspace:*",
     "@chromatic-com/storybook": "^4.1.2",
+    "@onlook/storybook-plugin": "^0.1.0",
     "@storybook/addon-a11y": "^10.0.5",
     "@storybook/addon-docs": "^10.0.5",
     "@storybook/addon-themes": "^10.0.5",
@@ -30,7 +27,6 @@
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "playwright": "^1.52.0",
     "storybook": "^10.0.5",
     "tailwindcss": "4.1.17",
     "typescript": "^5.9.0",
diff --git a/apps/web/components/AddToHomescreen.stories.tsx b/apps/web/components/AddToHomescreen.stories.tsx
new file mode 100644
index 00000000000000..9a058a93af4cf6
--- /dev/null
+++ b/apps/web/components/AddToHomescreen.stories.tsx
@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import AddToHomescreen from "./AddToHomescreen";
+
+const meta: Meta<typeof AddToHomescreen> = {
+  title: "Components/AddToHomescreen",
+  component: AddToHomescreen,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AddToHomescreen>;
+
+export const Default: Story = {};
diff --git a/apps/web/components/apps/AppPage.stories.tsx b/apps/web/components/apps/AppPage.stories.tsx
new file mode 100644
index 00000000000000..508ff41291e10c
--- /dev/null
+++ b/apps/web/components/apps/AppPage.stories.tsx
@@ -0,0 +1,330 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { AppPage } from "./AppPage";
+import type { AppPageProps } from "./AppPage";
+
+const meta = {
+  title: "Components/Apps/AppPage",
+  component: AppPage,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100vw", maxWidth: "1200px", padding: "20px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AppPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const baseProps: AppPageProps = {
+  name: "Sample App",
+  description: "A comprehensive application for managing your calendar and bookings",
+  type: "sample_app",
+  logo: "https://via.placeholder.com/64",
+  slug: "sample-app",
+  variant: "calendar",
+  body: (
+    <div>
+      <p>
+        This is a sample application that demonstrates the capabilities of our app ecosystem. It
+        integrates seamlessly with your calendar and provides advanced scheduling features.
+      </p>
+      <h3>Features</h3>
+      <ul>
+        <li>Automatic calendar synchronization</li>
+        <li>Smart scheduling suggestions</li>
+        <li>Team collaboration tools</li>
+        <li>Custom notifications</li>
+      </ul>
+    </div>
+  ),
+  categories: ["calendar"],
+  author: "Cal.com Team",
+  email: "support@cal.com",
+  licenseRequired: false,
+  teamsPlanRequired: false,
+  concurrentMeetings: false,
+};
+
+export const Default: Story = {
+  args: baseProps,
+};
+
+export const WithDescriptionItems: Story = {
+  args: {
+    ...baseProps,
+    name: "Video Conferencing App",
+    type: "video_conferencing",
+    categories: ["conferencing"],
+    descriptionItems: [
+      "https://via.placeholder.com/800x600/4A90E2/ffffff?text=Feature+Screenshot+1",
+      "https://via.placeholder.com/800x600/50C878/ffffff?text=Feature+Screenshot+2",
+      "https://via.placeholder.com/800x600/FF6B6B/ffffff?text=Feature+Screenshot+3",
+    ],
+  },
+};
+
+export const WithIframeDescription: Story = {
+  args: {
+    ...baseProps,
+    name: "Interactive Demo App",
+    descriptionItems: [
+      "https://via.placeholder.com/800x600/4A90E2/ffffff?text=Screenshot",
+      {
+        iframe: {
+          src: "https://www.youtube.com/embed/dQw4w9WgXcQ",
+          title: "App Demo Video",
+          width: "100%",
+          height: "315",
+        },
+      },
+    ],
+  },
+};
+
+export const PaidApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Premium Calendar Integration",
+    price: 9.99,
+    feeType: "monthly",
+    paid: {
+      priceInUsd: 9.99,
+      currency: "usd",
+    },
+  },
+};
+
+export const UsageBasedPricing: Story = {
+  args: {
+    ...baseProps,
+    name: "Usage-Based App",
+    price: 2.99,
+    commission: 10,
+    feeType: "usage-based",
+  },
+};
+
+export const GlobalApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Global System App",
+    isGlobal: true,
+    categories: ["other"],
+  },
+};
+
+export const ProApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Professional Suite",
+    pro: true,
+    price: 19.99,
+    feeType: "monthly",
+  },
+};
+
+export const TeamsPlanRequired: Story = {
+  args: {
+    ...baseProps,
+    name: "Enterprise Team Tool",
+    teamsPlanRequired: true,
+    categories: ["automation"],
+  },
+};
+
+export const WithAllContactInfo: Story = {
+  args: {
+    ...baseProps,
+    name: "Fully Documented App",
+    docs: "https://docs.example.com/app",
+    website: "https://example.com",
+    email: "support@example.com",
+    tos: "https://example.com/terms",
+    privacy: "https://example.com/privacy",
+  },
+};
+
+export const TemplateApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Template Application",
+    isTemplate: true,
+    categories: ["other"],
+  },
+};
+
+export const WithDependencies: Story = {
+  args: {
+    ...baseProps,
+    name: "Dependent App",
+    dependencies: ["google-calendar", "google-meet"],
+    categories: ["calendar", "conferencing"],
+  },
+};
+
+export const ConferencingApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Zoom Integration",
+    type: "zoom_video",
+    categories: ["conferencing", "video"],
+    author: "Zoom",
+    website: "https://zoom.us",
+    descriptionItems: [
+      "https://via.placeholder.com/800x600/2D8CFF/ffffff?text=Zoom+Integration",
+    ],
+  },
+};
+
+export const ConcurrentMeetingsApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Round Robin Scheduler",
+    categories: ["conferencing"],
+    concurrentMeetings: true,
+    body: (
+      <div>
+        <p>
+          Enable concurrent meetings with round-robin scheduling. Perfect for teams that need to
+          distribute meeting load across multiple team members.
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const PaymentApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Stripe Payment Gateway",
+    type: "stripe_payment",
+    categories: ["payment"],
+    author: "Stripe",
+    price: 0,
+    website: "https://stripe.com",
+    docs: "https://stripe.com/docs",
+    body: (
+      <div>
+        <p>Accept payments for your bookings with Stripe integration.</p>
+        <h3>Supported Features</h3>
+        <ul>
+          <li>One-time payments</li>
+          <li>Subscription billing</li>
+          <li>Refunds and disputes</li>
+          <li>Multiple currencies</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+
+export const AnalyticsApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Analytics Dashboard",
+    type: "analytics_app",
+    categories: ["analytics"],
+    author: "Cal.com",
+    descriptionItems: [
+      "https://via.placeholder.com/800x600/6C5CE7/ffffff?text=Analytics+Dashboard",
+      "https://via.placeholder.com/800x600/A29BFE/ffffff?text=Reports+View",
+      "https://via.placeholder.com/800x600/FD79A8/ffffff?text=Insights",
+    ],
+    body: (
+      <div>
+        <p>
+          Get detailed insights into your booking performance with comprehensive analytics and
+          reporting.
+        </p>
+        <h3>Key Metrics</h3>
+        <ul>
+          <li>Booking conversion rates</li>
+          <li>Revenue tracking</li>
+          <li>User engagement</li>
+          <li>Popular time slots</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+
+export const WebhookApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Webhook Integration",
+    type: "webhook_app",
+    categories: ["automation", "other"],
+    author: "Cal.com",
+    body: (
+      <div>
+        <p>
+          Connect your workflows with webhook integrations. Send booking data to external systems
+          in real-time.
+        </p>
+        <h3>Webhook Events</h3>
+        <ul>
+          <li>Booking created</li>
+          <li>Booking rescheduled</li>
+          <li>Booking cancelled</li>
+          <li>Booking completed</li>
+        </ul>
+      </div>
+    ),
+  },
+};
+
+export const CRMApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Salesforce CRM",
+    type: "salesforce_crm",
+    categories: ["crm"],
+    author: "Salesforce",
+    website: "https://salesforce.com",
+    docs: "https://developer.salesforce.com",
+    price: 15.99,
+    feeType: "monthly",
+    descriptionItems: [
+      "https://via.placeholder.com/800x600/00A1E0/ffffff?text=CRM+Integration",
+    ],
+    body: (
+      <div>
+        <p>
+          Seamlessly integrate your bookings with Salesforce CRM. Automatically create leads,
+          contacts, and opportunities from your calendar events.
+        </p>
+      </div>
+    ),
+  },
+};
+
+export const MessagingApp: Story = {
+  args: {
+    ...baseProps,
+    name: "Slack Notifications",
+    type: "slack_messaging",
+    categories: ["messaging"],
+    author: "Slack",
+    website: "https://slack.com",
+    descriptionItems: [
+      "https://via.placeholder.com/800x600/4A154B/ffffff?text=Slack+Integration",
+    ],
+    body: (
+      <div>
+        <p>
+          Get instant notifications in Slack when bookings are created, rescheduled, or cancelled.
+          Keep your team informed in real-time.
+        </p>
+      </div>
+    ),
+  },
+};
diff --git a/apps/web/components/apps/MultiDisconnectIntegration.stories.tsx b/apps/web/components/apps/MultiDisconnectIntegration.stories.tsx
new file mode 100644
index 00000000000000..0f6d0c008dd9ad
--- /dev/null
+++ b/apps/web/components/apps/MultiDisconnectIntegration.stories.tsx
@@ -0,0 +1,250 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { MultiDisconnectIntegration } from "./MultiDisconnectIntegration";
+
+const meta = {
+  title: "Apps/MultiDisconnectIntegration",
+  component: MultiDisconnectIntegration,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    credentials: {
+      description: "Array of credential objects to display in the disconnect dropdown",
+      control: "object",
+    },
+    onSuccess: {
+      description: "Callback function called when disconnection is successful",
+      control: false,
+    },
+  },
+} satisfies Meta<typeof MultiDisconnectIntegration>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock credentials data
+const mockPersonalCredentials = [
+  {
+    id: 1,
+    type: "google_calendar",
+    key: {},
+    userId: 101,
+    teamId: null,
+    appId: "google-calendar",
+    subscriptionId: null,
+    paymentStatus: null,
+    billingCycleStart: null,
+    user: {
+      id: 101,
+      name: "John Doe",
+      email: "john.doe@example.com",
+    },
+    team: null,
+    invalid: false,
+  },
+  {
+    id: 2,
+    type: "google_calendar",
+    key: {},
+    userId: 102,
+    teamId: null,
+    appId: "google-calendar",
+    subscriptionId: null,
+    paymentStatus: null,
+    billingCycleStart: null,
+    user: {
+      id: 102,
+      name: "Jane Smith",
+      email: "jane.smith@example.com",
+    },
+    team: null,
+    invalid: false,
+  },
+];
+
+const mockTeamCredentials = [
+  {
+    id: 3,
+    type: "google_calendar",
+    key: {},
+    userId: null,
+    teamId: 201,
+    appId: "google-calendar",
+    subscriptionId: null,
+    paymentStatus: null,
+    billingCycleStart: null,
+    user: null,
+    team: {
+      id: 201,
+      name: "Engineering Team",
+    },
+    invalid: false,
+  },
+  {
+    id: 4,
+    type: "google_calendar",
+    key: {},
+    userId: null,
+    teamId: 202,
+    appId: "google-calendar",
+    subscriptionId: null,
+    paymentStatus: null,
+    billingCycleStart: null,
+    user: null,
+    team: {
+      id: 202,
+      name: "Marketing Team",
+    },
+    invalid: false,
+  },
+];
+
+const mockMixedCredentials = [
+  ...mockPersonalCredentials.slice(0, 1),
+  ...mockTeamCredentials.slice(0, 1),
+];
+
+const mockCredentialWithoutName = [
+  {
+    id: 5,
+    type: "google_calendar",
+    key: {},
+    userId: 103,
+    teamId: null,
+    appId: "google-calendar",
+    subscriptionId: null,
+    paymentStatus: null,
+    billingCycleStart: null,
+    user: {
+      id: 103,
+      email: "nousername@example.com",
+    },
+    team: null,
+    invalid: false,
+  },
+];
+
+const mockCredentialWithOnlyEmail = [
+  {
+    id: 6,
+    type: "google_calendar",
+    key: {},
+    userId: 104,
+    teamId: null,
+    appId: "google-calendar",
+    subscriptionId: null,
+    paymentStatus: null,
+    billingCycleStart: null,
+    user: {
+      id: 104,
+      name: "",
+      email: "emailonly@example.com",
+    },
+    team: null,
+    invalid: false,
+  },
+];
+
+export const Default: Story = {
+  args: {
+    credentials: mockPersonalCredentials,
+    onSuccess: fn(),
+  },
+};
+
+export const PersonalCredentials: Story = {
+  args: {
+    credentials: mockPersonalCredentials,
+    onSuccess: fn(),
+  },
+};
+
+export const TeamCredentials: Story = {
+  args: {
+    credentials: mockTeamCredentials,
+    onSuccess: fn(),
+  },
+};
+
+export const MixedCredentials: Story = {
+  args: {
+    credentials: mockMixedCredentials,
+    onSuccess: fn(),
+  },
+};
+
+export const SingleCredential: Story = {
+  args: {
+    credentials: mockPersonalCredentials.slice(0, 1),
+    onSuccess: fn(),
+  },
+};
+
+export const WithoutUserName: Story = {
+  args: {
+    credentials: mockCredentialWithoutName,
+    onSuccess: fn(),
+  },
+};
+
+export const WithOnlyEmail: Story = {
+  args: {
+    credentials: mockCredentialWithOnlyEmail,
+    onSuccess: fn(),
+  },
+};
+
+export const EmptyCredentials: Story = {
+  args: {
+    credentials: [],
+    onSuccess: fn(),
+  },
+};
+
+export const ManyCredentials: Story = {
+  args: {
+    credentials: [
+      ...mockPersonalCredentials,
+      ...mockTeamCredentials,
+      {
+        id: 7,
+        type: "google_calendar",
+        key: {},
+        userId: 105,
+        teamId: null,
+        appId: "google-calendar",
+        subscriptionId: null,
+        paymentStatus: null,
+        billingCycleStart: null,
+        user: {
+          id: 105,
+          name: "Alice Johnson",
+          email: "alice.j@example.com",
+        },
+        team: null,
+        invalid: false,
+      },
+      {
+        id: 8,
+        type: "google_calendar",
+        key: {},
+        userId: null,
+        teamId: 203,
+        appId: "google-calendar",
+        subscriptionId: null,
+        paymentStatus: null,
+        billingCycleStart: null,
+        user: null,
+        team: {
+          id: 203,
+          name: "Sales Team",
+        },
+        invalid: false,
+      },
+    ],
+    onSuccess: fn(),
+  },
+};
diff --git a/apps/web/components/apps/alby/Setup.stories.tsx b/apps/web/components/apps/alby/Setup.stories.tsx
new file mode 100644
index 00000000000000..fb40f68688a060
--- /dev/null
+++ b/apps/web/components/apps/alby/Setup.stories.tsx
@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import AlbySetup from "./Setup";
+
+const meta = {
+  title: "Apps/Alby/Setup",
+  component: AlbySetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AlbySetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    clientId: "mock-client-id",
+    clientSecret: "mock-client-secret",
+    lightningAddress: "",
+    email: "",
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/alby/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const NotConnected: Story = {
+  args: {
+    clientId: "mock-client-id",
+    clientSecret: "mock-client-secret",
+    lightningAddress: "",
+    email: "",
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/alby/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const Connected: Story = {
+  args: {
+    clientId: "mock-client-id",
+    clientSecret: "mock-client-secret",
+    lightningAddress: "satoshi@getalby.com",
+    email: "satoshi@example.com",
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/alby/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const CallbackMode: Story = {
+  args: {
+    clientId: "mock-client-id",
+    clientSecret: "mock-client-secret",
+    lightningAddress: "",
+    email: "",
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/alby/setup",
+        query: {
+          callback: "true",
+        },
+      },
+    },
+  },
+};
+
+export const CallbackModeWithCode: Story = {
+  args: {
+    clientId: "mock-client-id",
+    clientSecret: "mock-client-secret",
+    lightningAddress: "",
+    email: "",
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/alby/setup",
+        query: {
+          callback: "true",
+          code: "mock-authorization-code",
+        },
+      },
+    },
+  },
+};
+
+export const CallbackModeWithError: Story = {
+  args: {
+    clientId: "mock-client-id",
+    clientSecret: "mock-client-secret",
+    lightningAddress: "",
+    email: "",
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/alby/setup",
+        query: {
+          callback: "true",
+          error: "access_denied",
+        },
+      },
+    },
+  },
+};
diff --git a/apps/web/components/apps/applecalendar/Setup.stories.tsx b/apps/web/components/apps/applecalendar/Setup.stories.tsx
new file mode 100644
index 00000000000000..887d8939421809
--- /dev/null
+++ b/apps/web/components/apps/applecalendar/Setup.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import AppleCalendarSetup from "./Setup";
+
+const meta = {
+  title: "Apps/AppleCalendar/Setup",
+  component: AppleCalendarSetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AppleCalendarSetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithMockApiError: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        push: (url: string) => console.log("Navigate to:", url),
+      },
+    },
+    mockData: [
+      {
+        url: "/api/integrations/applecalendar/add",
+        method: "POST",
+        status: 400,
+        response: {
+          message: "invalid_credentials",
+        },
+      },
+    ],
+  },
+};
+
+export const WithMockApiSuccess: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        push: (url: string) => console.log("Navigate to:", url),
+      },
+    },
+    mockData: [
+      {
+        url: "/api/integrations/applecalendar/add",
+        method: "POST",
+        status: 200,
+        response: {
+          url: "/apps/installed/calendar",
+        },
+      },
+    ],
+  },
+};
+
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+    theme: "dark",
+  },
+};
diff --git a/apps/web/components/apps/btcpayserver/Setup.stories.tsx b/apps/web/components/apps/btcpayserver/Setup.stories.tsx
new file mode 100644
index 00000000000000..516d060671869b
--- /dev/null
+++ b/apps/web/components/apps/btcpayserver/Setup.stories.tsx
@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { SessionProvider } from "next-auth/react";
+
+import BTCPaySetup from "./Setup";
+
+const meta = {
+  component: BTCPaySetup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <SessionProvider
+        session={{
+          user: {
+            id: 1,
+            name: "Test User",
+            email: "test@example.com",
+          },
+          expires: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+        }}>
+        <Story />
+      </SessionProvider>
+    ),
+  ],
+} satisfies Meta<typeof BTCPaySetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};
+
+export const WithExistingCredentials: Story = {
+  args: {
+    serverUrl: "https://btcpay.example.com",
+    storeId: "ABC123XYZ456",
+    apiKey: "secret_api_key_example_1234567890",
+    webhookSecret: "webhook_secret_example_abcdef",
+  },
+};
+
+export const NewCredential: Story = {
+  args: {
+    serverUrl: "",
+    storeId: "",
+    apiKey: "",
+    webhookSecret: "",
+  },
+};
+
+export const PartialCredentials: Story = {
+  args: {
+    serverUrl: "https://btcpay.example.com",
+    storeId: "ABC123XYZ456",
+    apiKey: "",
+    webhookSecret: "",
+  },
+};
diff --git a/apps/web/components/apps/caldavcalendar/Setup.stories.tsx b/apps/web/components/apps/caldavcalendar/Setup.stories.tsx
new file mode 100644
index 00000000000000..c435beeff83ac8
--- /dev/null
+++ b/apps/web/components/apps/caldavcalendar/Setup.stories.tsx
@@ -0,0 +1,206 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, userEvent, within } from "storybook/test";
+
+import Setup from "./Setup";
+
+const meta = {
+  title: "Apps/CalDAV Calendar/Setup",
+  component: Setup,
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/caldavcalendar/setup",
+      },
+    },
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Setup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default state of the CalDAV Calendar setup form.
+ * Shows empty input fields ready for user configuration.
+ */
+export const Default: Story = {};
+
+/**
+ * Form with partially filled data.
+ * Demonstrates the form in the middle of user input.
+ */
+export const PartiallyFilled: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Fill in URL field
+    const urlInput = canvas.getByLabelText(/calendar_url/i);
+    await userEvent.type(urlInput, "https://caldav.example.com/calendar");
+
+    // Fill in username field
+    const usernameInput = canvas.getByLabelText(/username/i);
+    await userEvent.type(usernameInput, "john.doe");
+  },
+};
+
+/**
+ * Form with all fields filled.
+ * Shows the complete state before submission.
+ */
+export const FilledForm: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Fill in all fields
+    const urlInput = canvas.getByLabelText(/calendar_url/i);
+    await userEvent.type(urlInput, "https://caldav.example.com/calendar");
+
+    const usernameInput = canvas.getByLabelText(/username/i);
+    await userEvent.type(usernameInput, "john.doe");
+
+    const passwordInput = canvas.getByLabelText(/password/i);
+    await userEvent.type(passwordInput, "secretpassword123");
+  },
+};
+
+/**
+ * Form in submitting state.
+ * Shows the loading state when the form is being submitted.
+ */
+export const Submitting: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Fill in all fields
+    const urlInput = canvas.getByLabelText(/calendar_url/i);
+    await userEvent.type(urlInput, "https://caldav.example.com/calendar");
+
+    const usernameInput = canvas.getByLabelText(/username/i);
+    await userEvent.type(usernameInput, "john.doe");
+
+    const passwordInput = canvas.getByLabelText(/password/i);
+    await userEvent.type(passwordInput, "secretpassword123");
+
+    // Click submit button
+    const submitButton = canvas.getByRole("button", { name: /save/i });
+    await userEvent.click(submitButton);
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        // Mock API call to simulate slow response
+        {
+          url: "/api/integrations/caldavcalendar/add",
+          method: "POST",
+          status: 200,
+          delay: 3000,
+          response: {
+            url: "/apps/installed/calendar",
+          },
+        },
+      ],
+    },
+  },
+};
+
+/**
+ * Form with validation error.
+ * Demonstrates required field validation by attempting to submit empty form.
+ */
+export const ValidationError: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Try to submit without filling fields
+    const submitButton = canvas.getByRole("button", { name: /save/i });
+    await userEvent.click(submitButton);
+
+    // Browser's HTML5 validation should prevent submission
+  },
+};
+
+/**
+ * Form with server error response.
+ * Shows the error alert when the API returns an error.
+ */
+export const WithError: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Fill in all fields
+    const urlInput = canvas.getByLabelText(/calendar_url/i);
+    await userEvent.type(urlInput, "https://invalid-caldav.example.com/calendar");
+
+    const usernameInput = canvas.getByLabelText(/username/i);
+    await userEvent.type(usernameInput, "wronguser");
+
+    const passwordInput = canvas.getByLabelText(/password/i);
+    await userEvent.type(passwordInput, "wrongpassword");
+
+    // Click submit button
+    const submitButton = canvas.getByRole("button", { name: /save/i });
+    await userEvent.click(submitButton);
+
+    // Wait for error message to appear
+    await canvas.findByText(/authentication failed/i);
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        {
+          url: "/api/integrations/caldavcalendar/add",
+          method: "POST",
+          status: 401,
+          response: {
+            message: "Authentication failed. Please check your credentials.",
+          },
+        },
+      ],
+    },
+  },
+};
+
+/**
+ * Form with error and action button.
+ * Shows error alert with an additional action button to go to admin panel.
+ */
+export const WithErrorAndAction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Fill in all fields
+    const urlInput = canvas.getByLabelText(/calendar_url/i);
+    await userEvent.type(urlInput, "https://caldav.example.com/calendar");
+
+    const usernameInput = canvas.getByLabelText(/username/i);
+    await userEvent.type(usernameInput, "user");
+
+    const passwordInput = canvas.getByLabelText(/password/i);
+    await userEvent.type(passwordInput, "password");
+
+    // Click submit button
+    const submitButton = canvas.getByRole("button", { name: /save/i });
+    await userEvent.click(submitButton);
+
+    // Wait for error message and action button
+    await canvas.findByText(/calendar not found/i);
+    await canvas.findByRole("button", { name: /go to admin/i });
+  },
+  parameters: {
+    msw: {
+      handlers: [
+        {
+          url: "/api/integrations/caldavcalendar/add",
+          method: "POST",
+          status: 404,
+          response: {
+            message: "Calendar not found. Please check your configuration in admin panel.",
+            actionUrl: "/settings/admin/apps/calendar",
+          },
+        },
+      ],
+    },
+  },
+};
diff --git a/apps/web/components/apps/exchange2013calendar/Setup.stories.tsx b/apps/web/components/apps/exchange2013calendar/Setup.stories.tsx
new file mode 100644
index 00000000000000..97c3ba5fbd8202
--- /dev/null
+++ b/apps/web/components/apps/exchange2013calendar/Setup.stories.tsx
@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import Exchange2013CalendarSetup from "./Setup";
+
+const meta = {
+  title: "Components/Apps/Exchange2013Calendar/Setup",
+  component: Exchange2013CalendarSetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Exchange2013CalendarSetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default state of the Exchange 2013 Calendar setup form.
+ * Shows the initial empty form with username, password, and URL fields.
+ */
+export const Default: Story = {};
+
+/**
+ * Setup form with a pre-filled EWS URL.
+ * Useful for testing when the EXCHANGE_DEFAULT_EWS_URL environment variable is set.
+ */
+export const WithDefaultUrl: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/integrations/exchange2013calendar/add",
+        method: "POST",
+        status: 200,
+        response: {
+          url: "/apps/installed",
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Setup form in submitting state.
+ * Shows the loading state when the form is being submitted.
+ */
+export const Submitting: Story = {
+  play: async ({ canvasElement }) => {
+    // This would show the loading state when submit is clicked
+    // In actual implementation, you'd need to interact with the form
+  },
+};
+
+/**
+ * Setup form with an error message displayed.
+ * Shows how validation or API errors are displayed to the user.
+ */
+export const WithError: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/integrations/exchange2013calendar/add",
+        method: "POST",
+        status: 400,
+        response: {
+          message: "Invalid credentials. Please check your username and password.",
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Setup form with network error.
+ * Simulates a scenario where the API request fails.
+ */
+export const WithNetworkError: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/integrations/exchange2013calendar/add",
+        method: "POST",
+        status: 500,
+        response: {
+          message: "Unable to connect to Exchange server. Please try again later.",
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Setup form with authentication error.
+ * Shows the error state when authentication fails.
+ */
+export const WithAuthenticationError: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/integrations/exchange2013calendar/add",
+        method: "POST",
+        status: 401,
+        response: {
+          message: "Authentication failed. Invalid username or password.",
+        },
+      },
+    ],
+  },
+};
diff --git a/apps/web/components/apps/exchange2016calendar/Setup.stories.tsx b/apps/web/components/apps/exchange2016calendar/Setup.stories.tsx
new file mode 100644
index 00000000000000..e6646756b01f8f
--- /dev/null
+++ b/apps/web/components/apps/exchange2016calendar/Setup.stories.tsx
@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import Exchange2016CalendarSetup from "./Setup";
+
+const meta = {
+  title: "Components/Apps/Exchange2016Calendar/Setup",
+  component: Exchange2016CalendarSetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Exchange2016CalendarSetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithDefaultURL: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    // This story demonstrates the component with a default EWS URL pre-filled
+    // In actual usage, this would be populated from process.env.EXCHANGE_DEFAULT_EWS_URL
+  },
+};
+
+export const MobileView: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1",
+    },
+  },
+};
+
+export const TabletView: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: "tablet",
+    },
+  },
+};
diff --git a/apps/web/components/apps/exchangecalendar/Setup.stories.tsx b/apps/web/components/apps/exchangecalendar/Setup.stories.tsx
new file mode 100644
index 00000000000000..9957a08b756f7f
--- /dev/null
+++ b/apps/web/components/apps/exchangecalendar/Setup.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import ExchangeSetup from "./Setup";
+
+const meta = {
+  title: "Apps/ExchangeCalendar/Setup",
+  component: ExchangeSetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        push: fn(),
+        back: fn(),
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ExchangeSetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default state of the Exchange Calendar setup form.
+ * Shows the complete setup flow with all fields required to configure
+ * Microsoft Exchange calendar integration.
+ */
+export const Default: Story = {};
+
+/**
+ * Setup form in a loading/submitting state.
+ * This demonstrates the form's behavior when the user
+ * has submitted their credentials and is waiting for validation.
+ */
+export const Submitting: Story = {
+  play: async ({ canvasElement }) => {
+    // Note: In a real implementation, you would interact with the form
+    // to trigger the submitting state. This is a visual representation.
+  },
+};
+
+/**
+ * Setup form with an error message displayed.
+ * Shows how validation or connection errors are presented to users.
+ */
+export const WithError: Story = {
+  play: async ({ canvasElement }) => {
+    // Note: Error state would be triggered by form submission
+    // This story demonstrates the error alert styling
+  },
+};
+
+/**
+ * Setup form with NTLM authentication selected (default).
+ * NTLM authentication is the default method and doesn't
+ * require the Exchange version selector.
+ */
+export const NTLMAuthentication: Story = {};
+
+/**
+ * Setup form with Standard authentication selected.
+ * When using Standard authentication, users must also
+ * select their Exchange server version.
+ */
+export const StandardAuthentication: Story = {
+  play: async ({ canvasElement }) => {
+    // Note: In a real test, you would select the Standard
+    // authentication option from the dropdown
+  },
+};
diff --git a/apps/web/components/apps/hitpay/Setup.stories.tsx b/apps/web/components/apps/hitpay/Setup.stories.tsx
new file mode 100644
index 00000000000000..8fb37d70c30582
--- /dev/null
+++ b/apps/web/components/apps/hitpay/Setup.stories.tsx
@@ -0,0 +1,166 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import HitPaySetup from "./Setup";
+
+const meta = {
+  title: "Apps/HitPay/Setup",
+  component: HitPaySetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof HitPaySetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    isSandbox: false,
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/hitpay/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const SandboxMode: Story = {
+  args: {
+    isSandbox: true,
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/hitpay/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const WithProductionKeys: Story = {
+  args: {
+    isSandbox: false,
+    prod: {
+      apiKey: "prod_api_key_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+      saltKey: "prod_salt_key_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+    },
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/hitpay/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const WithSandboxKeys: Story = {
+  args: {
+    isSandbox: true,
+    sandbox: {
+      apiKey: "sandbox_api_key_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+      saltKey: "sandbox_salt_key_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+    },
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/hitpay/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const WithBothKeys: Story = {
+  args: {
+    isSandbox: false,
+    prod: {
+      apiKey: "prod_api_key_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+      saltKey: "prod_salt_key_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+    },
+    sandbox: {
+      apiKey: "sandbox_api_key_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+      saltKey: "sandbox_salt_key_1234567890abcdef1234567890abcdef1234567890abcdef1234567890abcdef",
+    },
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/hitpay/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const CallbackMode: Story = {
+  args: {
+    isSandbox: false,
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/hitpay/setup",
+        query: {
+          callback: "true",
+        },
+      },
+    },
+  },
+};
+
+export const CallbackModeWithCode: Story = {
+  args: {
+    isSandbox: false,
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/hitpay/setup",
+        query: {
+          callback: "true",
+          code: "mock-authorization-code",
+        },
+      },
+    },
+  },
+};
+
+export const CallbackModeWithError: Story = {
+  args: {
+    isSandbox: false,
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/hitpay/setup",
+        query: {
+          callback: "true",
+          error: "access_denied",
+        },
+      },
+    },
+  },
+};
diff --git a/apps/web/components/apps/ics-feedcalendar/Setup.stories.tsx b/apps/web/components/apps/ics-feedcalendar/Setup.stories.tsx
new file mode 100644
index 00000000000000..8036d23d696d4f
--- /dev/null
+++ b/apps/web/components/apps/ics-feedcalendar/Setup.stories.tsx
@@ -0,0 +1,254 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { expect, userEvent, waitFor, within } from "storybook/test";
+
+import ICSFeedSetup from "./Setup";
+
+const meta = {
+  title: "Apps/ICS Feed Calendar/Setup",
+  component: ICSFeedSetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/ics-feedcalendar/setup",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen w-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ICSFeedSetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default view of the ICS Feed Calendar setup form.
+ * Shows a single URL input field with options to add more feeds.
+ */
+export const Default: Story = {};
+
+/**
+ * Interactive story demonstrating the ability to add multiple ICS feed URLs.
+ * Users can click the "Add" button to add additional URL input fields.
+ */
+export const WithMultipleURLs: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the component to render
+    await waitFor(() => {
+      expect(canvas.getByPlaceholderText("https://example.com/calendar.ics")).toBeInTheDocument();
+    });
+
+    // Find and click the add button to add more URL fields
+    const addButton = canvas.getByRole("button", { name: /add/i });
+    await userEvent.click(addButton);
+
+    // Wait for the second input to appear
+    await waitFor(() => {
+      const inputs = canvas.getAllByPlaceholderText("https://example.com/calendar.ics");
+      expect(inputs).toHaveLength(2);
+    });
+
+    // Fill in the first URL
+    const inputs = canvas.getAllByPlaceholderText("https://example.com/calendar.ics");
+    await userEvent.type(inputs[0], "https://calendar1.example.com/feed.ics");
+    await userEvent.type(inputs[1], "https://calendar2.example.com/feed.ics");
+  },
+};
+
+/**
+ * Story demonstrating the error state when form submission fails.
+ * Shows how error messages are displayed to the user.
+ */
+export const WithErrorMessage: Story = {
+  parameters: {
+    msw: {
+      handlers: [
+        {
+          method: "POST",
+          url: "/api/integrations/ics-feedcalendar/add",
+          status: 400,
+          response: {
+            message: "Invalid calendar URL format",
+          },
+        },
+      ],
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the component to render
+    await waitFor(() => {
+      expect(canvas.getByPlaceholderText("https://example.com/calendar.ics")).toBeInTheDocument();
+    });
+
+    // Fill in an invalid URL
+    const input = canvas.getByPlaceholderText("https://example.com/calendar.ics");
+    await userEvent.type(input, "invalid-url");
+
+    // Submit the form
+    const saveButton = canvas.getByRole("button", { name: /save/i });
+    await userEvent.click(saveButton);
+  },
+};
+
+/**
+ * Story demonstrating error state with an admin action URL.
+ * Shows the error alert with a "Go to Admin" button.
+ */
+export const WithErrorAndActionUrl: Story = {
+  parameters: {
+    msw: {
+      handlers: [
+        {
+          method: "POST",
+          url: "/api/integrations/ics-feedcalendar/add",
+          status: 403,
+          response: {
+            message: "Insufficient permissions to add calendar feeds",
+            actionUrl: "/settings/admin",
+          },
+        },
+      ],
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the component to render
+    await waitFor(() => {
+      expect(canvas.getByPlaceholderText("https://example.com/calendar.ics")).toBeInTheDocument();
+    });
+
+    // Fill in a URL
+    const input = canvas.getByPlaceholderText("https://example.com/calendar.ics");
+    await userEvent.type(input, "https://calendar.example.com/feed.ics");
+
+    // Submit the form
+    const saveButton = canvas.getByRole("button", { name: /save/i });
+    await userEvent.click(saveButton);
+  },
+};
+
+/**
+ * Story demonstrating successful form submission.
+ * After submission, the user should be redirected (mocked in Storybook).
+ */
+export const SuccessfulSubmission: Story = {
+  parameters: {
+    msw: {
+      handlers: [
+        {
+          method: "POST",
+          url: "/api/integrations/ics-feedcalendar/add",
+          status: 200,
+          response: {
+            url: "/apps/installed/ics-feedcalendar",
+          },
+        },
+      ],
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the component to render
+    await waitFor(() => {
+      expect(canvas.getByPlaceholderText("https://example.com/calendar.ics")).toBeInTheDocument();
+    });
+
+    // Fill in a valid URL
+    const input = canvas.getByPlaceholderText("https://example.com/calendar.ics");
+    await userEvent.type(input, "https://calendar.example.com/feed.ics");
+
+    // Submit the form
+    const saveButton = canvas.getByRole("button", { name: /save/i });
+    await userEvent.click(saveButton);
+
+    // Button should show loading state
+    await waitFor(() => {
+      expect(saveButton).toHaveAttribute("data-loading", "true");
+    });
+  },
+};
+
+/**
+ * Story demonstrating the ability to remove added URL fields.
+ * The first URL field cannot be removed, but additional ones can be.
+ */
+export const RemovingURLFields: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the component to render
+    await waitFor(() => {
+      expect(canvas.getByPlaceholderText("https://example.com/calendar.ics")).toBeInTheDocument();
+    });
+
+    // Add a second URL field
+    const addButton = canvas.getByRole("button", { name: /add/i });
+    await userEvent.click(addButton);
+
+    // Wait for the second input to appear
+    await waitFor(() => {
+      const inputs = canvas.getAllByPlaceholderText("https://example.com/calendar.ics");
+      expect(inputs).toHaveLength(2);
+    });
+
+    // Add a third URL field
+    await userEvent.click(addButton);
+
+    await waitFor(() => {
+      const inputs = canvas.getAllByPlaceholderText("https://example.com/calendar.ics");
+      expect(inputs).toHaveLength(3);
+    });
+
+    // Find and click a delete button (trash icon)
+    const deleteButtons = canvas.getAllByRole("button").filter((btn) => {
+      const icon = btn.querySelector('[data-icon="trash"]');
+      return icon !== null;
+    });
+
+    if (deleteButtons.length > 0) {
+      await userEvent.click(deleteButtons[0]);
+
+      // Verify one input was removed
+      await waitFor(() => {
+        const inputs = canvas.getAllByPlaceholderText("https://example.com/calendar.ics");
+        expect(inputs).toHaveLength(2);
+      });
+    }
+  },
+};
+
+/**
+ * Story demonstrating the cancel functionality.
+ * Clicking cancel should navigate back to the previous page.
+ */
+export const CancelAction: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Wait for the component to render
+    await waitFor(() => {
+      expect(canvas.getByPlaceholderText("https://example.com/calendar.ics")).toBeInTheDocument();
+    });
+
+    // Fill in some data
+    const input = canvas.getByPlaceholderText("https://example.com/calendar.ics");
+    await userEvent.type(input, "https://calendar.example.com/feed.ics");
+
+    // Click cancel
+    const cancelButton = canvas.getByRole("button", { name: /cancel/i });
+    expect(cancelButton).toBeInTheDocument();
+  },
+};
diff --git a/apps/web/components/apps/installation/AccountsStepCard.stories.tsx b/apps/web/components/apps/installation/AccountsStepCard.stories.tsx
new file mode 100644
index 00000000000000..d9ee66f3d0df70
--- /dev/null
+++ b/apps/web/components/apps/installation/AccountsStepCard.stories.tsx
@@ -0,0 +1,206 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { AccountsStepCard } from "./AccountsStepCard";
+
+const meta = {
+  component: AccountsStepCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    onSelect: fn(),
+    loading: false,
+  },
+} satisfies Meta<typeof AccountsStepCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    personalAccount: {
+      id: 1,
+      name: "John Doe",
+      avatarUrl: "https://cal.com/avatar.png",
+      alreadyInstalled: false,
+    },
+    installableOnTeams: false,
+  },
+};
+
+export const WithTeams: Story = {
+  args: {
+    personalAccount: {
+      id: 1,
+      name: "John Doe",
+      avatarUrl: "https://cal.com/avatar.png",
+      alreadyInstalled: false,
+    },
+    teams: [
+      {
+        id: 2,
+        name: "Marketing Team",
+        logoUrl: "https://cal.com/team-logo.png",
+        alreadyInstalled: false,
+      },
+      {
+        id: 3,
+        name: "Sales Team",
+        logoUrl: "https://cal.com/team-logo-2.png",
+        alreadyInstalled: false,
+      },
+      {
+        id: 4,
+        name: "Engineering Team",
+        logoUrl: "https://cal.com/team-logo-3.png",
+        alreadyInstalled: false,
+      },
+    ],
+    installableOnTeams: true,
+  },
+};
+
+export const PersonalAccountAlreadyInstalled: Story = {
+  args: {
+    personalAccount: {
+      id: 1,
+      name: "John Doe",
+      avatarUrl: "https://cal.com/avatar.png",
+      alreadyInstalled: true,
+    },
+    installableOnTeams: false,
+  },
+};
+
+export const WithTeamsSomeInstalled: Story = {
+  args: {
+    personalAccount: {
+      id: 1,
+      name: "John Doe",
+      avatarUrl: "https://cal.com/avatar.png",
+      alreadyInstalled: false,
+    },
+    teams: [
+      {
+        id: 2,
+        name: "Marketing Team",
+        logoUrl: "https://cal.com/team-logo.png",
+        alreadyInstalled: true,
+      },
+      {
+        id: 3,
+        name: "Sales Team",
+        logoUrl: "https://cal.com/team-logo-2.png",
+        alreadyInstalled: false,
+      },
+      {
+        id: 4,
+        name: "Engineering Team",
+        logoUrl: "https://cal.com/team-logo-3.png",
+        alreadyInstalled: true,
+      },
+    ],
+    installableOnTeams: true,
+  },
+};
+
+export const AllInstalled: Story = {
+  args: {
+    personalAccount: {
+      id: 1,
+      name: "John Doe",
+      avatarUrl: "https://cal.com/avatar.png",
+      alreadyInstalled: true,
+    },
+    teams: [
+      {
+        id: 2,
+        name: "Marketing Team",
+        logoUrl: "https://cal.com/team-logo.png",
+        alreadyInstalled: true,
+      },
+      {
+        id: 3,
+        name: "Sales Team",
+        logoUrl: "https://cal.com/team-logo-2.png",
+        alreadyInstalled: true,
+      },
+    ],
+    installableOnTeams: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    personalAccount: {
+      id: 1,
+      name: "John Doe",
+      avatarUrl: "https://cal.com/avatar.png",
+      alreadyInstalled: false,
+    },
+    teams: [
+      {
+        id: 2,
+        name: "Marketing Team",
+        logoUrl: "https://cal.com/team-logo.png",
+        alreadyInstalled: false,
+      },
+      {
+        id: 3,
+        name: "Sales Team",
+        logoUrl: "https://cal.com/team-logo-2.png",
+        alreadyInstalled: false,
+      },
+    ],
+    installableOnTeams: true,
+    loading: true,
+  },
+};
+
+export const NoAvatar: Story = {
+  args: {
+    personalAccount: {
+      id: 1,
+      name: "Jane Smith",
+      avatarUrl: null,
+      alreadyInstalled: false,
+    },
+    teams: [
+      {
+        id: 2,
+        name: "Product Team",
+        logoUrl: null,
+        alreadyInstalled: false,
+      },
+    ],
+    installableOnTeams: true,
+  },
+};
+
+export const LongTeamNames: Story = {
+  args: {
+    personalAccount: {
+      id: 1,
+      name: "Alexander Maximilian Vanderbilt III",
+      avatarUrl: "https://cal.com/avatar.png",
+      alreadyInstalled: false,
+    },
+    teams: [
+      {
+        id: 2,
+        name: "Enterprise Solutions and Digital Transformation Team",
+        logoUrl: "https://cal.com/team-logo.png",
+        alreadyInstalled: false,
+      },
+      {
+        id: 3,
+        name: "Customer Success and Support Operations Division",
+        logoUrl: "https://cal.com/team-logo-2.png",
+        alreadyInstalled: true,
+      },
+    ],
+    installableOnTeams: true,
+  },
+};
diff --git a/apps/web/components/apps/installation/ConfigureStepCard.stories.tsx b/apps/web/components/apps/installation/ConfigureStepCard.stories.tsx
new file mode 100644
index 00000000000000..4b483c12b8e17a
--- /dev/null
+++ b/apps/web/components/apps/installation/ConfigureStepCard.stories.tsx
@@ -0,0 +1,260 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useRef } from "react";
+import { useForm, FormProvider } from "react-hook-form";
+
+import { ConfigureStepCard } from "./ConfigureStepCard";
+import type { ConfigureStepCardProps } from "./ConfigureStepCard";
+
+const meta = {
+  title: "Apps/Installation/ConfigureStepCard",
+  component: ConfigureStepCard,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof ConfigureStepCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper component to provide FormProvider and portal ref
+const ConfigureStepCardWrapper = (props: ConfigureStepCardProps) => {
+  const formPortalRef = useRef<HTMLDivElement>(null);
+  const formMethods = useForm({
+    defaultValues: {
+      eventTypeGroups: props.eventTypeGroups,
+    },
+  });
+
+  return (
+    <FormProvider {...formMethods}>
+      <div className="w-full max-w-2xl">
+        <ConfigureStepCard {...props} formPortalRef={formPortalRef} />
+        <div ref={formPortalRef} />
+      </div>
+    </FormProvider>
+  );
+};
+
+const mockEventTypeGroups = [
+  {
+    image: "https://via.placeholder.com/40",
+    slug: "john-doe",
+    eventTypes: [
+      {
+        id: 1,
+        title: "30 Min Meeting",
+        slug: "30min",
+        selected: true,
+        metadata: {},
+        locations: [
+          {
+            type: "integrations:google:meet",
+            displayLocationPublicly: true,
+          },
+        ],
+        bookingFields: [],
+        seatsPerTimeSlot: null,
+        team: null,
+      },
+      {
+        id: 2,
+        title: "60 Min Meeting",
+        slug: "60min",
+        selected: true,
+        metadata: {},
+        locations: [
+          {
+            type: "integrations:zoom",
+            displayLocationPublicly: true,
+          },
+        ],
+        bookingFields: [],
+        seatsPerTimeSlot: null,
+        team: null,
+      },
+    ],
+  },
+];
+
+const mockEventTypeGroupsWithTeam = [
+  {
+    image: "https://via.placeholder.com/40",
+    slug: "acme-team",
+    eventTypes: [
+      {
+        id: 3,
+        title: "Team Standup",
+        slug: "team-standup",
+        selected: true,
+        metadata: {},
+        locations: [
+          {
+            type: "integrations:google:meet",
+            displayLocationPublicly: true,
+          },
+        ],
+        bookingFields: [],
+        seatsPerTimeSlot: null,
+        team: {
+          id: 1,
+          slug: "acme-team",
+          name: "Acme Team",
+        },
+      },
+    ],
+  },
+];
+
+const baseArgs: ConfigureStepCardProps = {
+  slug: "google-meet",
+  userName: "john-doe",
+  categories: ["conferencing"],
+  credentialId: 123,
+  loading: false,
+  isConferencing: true,
+  formPortalRef: { current: null },
+  eventTypeGroups: mockEventTypeGroups,
+  setConfigureStep: () => {},
+  handleSetUpLater: () => {
+    console.log("Set up later clicked");
+  },
+};
+
+export const Default: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: baseArgs,
+};
+
+export const ConferencingApp: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: {
+    ...baseArgs,
+    slug: "zoom",
+    isConferencing: true,
+    categories: ["conferencing"],
+  },
+};
+
+export const NonConferencingApp: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: {
+    ...baseArgs,
+    slug: "google-calendar",
+    isConferencing: false,
+    categories: ["calendar"],
+  },
+};
+
+export const WithTeamEventTypes: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: {
+    ...baseArgs,
+    eventTypeGroups: mockEventTypeGroupsWithTeam,
+  },
+};
+
+export const Loading: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: {
+    ...baseArgs,
+    loading: true,
+  },
+};
+
+export const MultipleGroups: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: {
+    ...baseArgs,
+    eventTypeGroups: [
+      ...mockEventTypeGroups,
+      {
+        image: "https://via.placeholder.com/40",
+        slug: "jane-smith",
+        eventTypes: [
+          {
+            id: 4,
+            title: "Quick Chat",
+            slug: "quick-chat",
+            selected: true,
+            metadata: {},
+            locations: [
+              {
+                type: "integrations:zoom",
+                displayLocationPublicly: true,
+              },
+            ],
+            bookingFields: [],
+            seatsPerTimeSlot: null,
+            team: null,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const SingleEventType: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: {
+    ...baseArgs,
+    eventTypeGroups: [
+      {
+        image: "https://via.placeholder.com/40",
+        slug: "john-doe",
+        eventTypes: [
+          {
+            id: 1,
+            title: "30 Min Meeting",
+            slug: "30min",
+            selected: true,
+            metadata: {},
+            locations: [
+              {
+                type: "integrations:google:meet",
+                displayLocationPublicly: true,
+              },
+            ],
+            bookingFields: [],
+            seatsPerTimeSlot: null,
+            team: null,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const NoSelectedEventTypes: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: {
+    ...baseArgs,
+    eventTypeGroups: [
+      {
+        image: "https://via.placeholder.com/40",
+        slug: "john-doe",
+        eventTypes: [
+          {
+            id: 1,
+            title: "30 Min Meeting",
+            slug: "30min",
+            selected: false,
+            metadata: {},
+            locations: [],
+            bookingFields: [],
+            seatsPerTimeSlot: null,
+            team: null,
+          },
+        ],
+      },
+    ],
+  },
+};
+
+export const WithoutCredentialId: Story = {
+  render: (args) => <ConfigureStepCardWrapper {...args} />,
+  args: {
+    ...baseArgs,
+    credentialId: undefined,
+  },
+};
diff --git a/apps/web/components/apps/installation/EventTypesStepCard.stories.tsx b/apps/web/components/apps/installation/EventTypesStepCard.stories.tsx
new file mode 100644
index 00000000000000..1bd5642ed4d1e5
--- /dev/null
+++ b/apps/web/components/apps/installation/EventTypesStepCard.stories.tsx
@@ -0,0 +1,305 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { FormProvider, useForm } from "react-hook-form";
+
+import { EventTypesStepCard } from "./EventTypesStepCard";
+import type { TEventTypesForm } from "~/apps/installation/[[...step]]/step-view";
+
+const meta = {
+  title: "Components/Apps/Installation/EventTypesStepCard",
+  component: EventTypesStepCard,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story, context) => {
+      const methods = useForm<TEventTypesForm>({
+        defaultValues: context.args.formDefaultValues || {
+          eventTypeGroups: [],
+        },
+      });
+
+      return (
+        <FormProvider {...methods}>
+          <div className="w-[600px]">
+            <Story />
+          </div>
+        </FormProvider>
+      );
+    },
+  ],
+} satisfies Meta<typeof EventTypesStepCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockEventTypeGroups = [
+  {
+    teamId: undefined,
+    userId: 1,
+    slug: "user",
+    name: "User",
+    image: "",
+    isOrganisation: false,
+    eventTypes: [
+      {
+        id: 1,
+        title: "30 Min Meeting",
+        description: "A quick 30 minute meeting to discuss your project needs",
+        slug: "30min",
+        length: 30,
+        selected: false,
+        team: null,
+        metadata: {},
+        schedulingType: null,
+        requiresConfirmation: false,
+        position: 0,
+        destinationCalendar: null,
+        calVideoSettings: null,
+        locations: [],
+      },
+      {
+        id: 2,
+        title: "60 Min Consultation",
+        description: "An hour-long consultation for in-depth discussion about your requirements",
+        slug: "60min",
+        length: 60,
+        selected: false,
+        team: null,
+        metadata: {},
+        schedulingType: null,
+        requiresConfirmation: false,
+        position: 1,
+        destinationCalendar: null,
+        calVideoSettings: null,
+        locations: [],
+      },
+      {
+        id: 3,
+        title: "Quick 15 Min Call",
+        description: "",
+        slug: "15min",
+        length: 15,
+        selected: false,
+        team: null,
+        metadata: {},
+        schedulingType: null,
+        requiresConfirmation: false,
+        position: 2,
+        destinationCalendar: null,
+        calVideoSettings: null,
+        locations: [],
+      },
+    ],
+  },
+];
+
+const mockEventTypeGroupsWithMultipleDurations = [
+  {
+    teamId: undefined,
+    userId: 1,
+    slug: "user",
+    name: "User",
+    image: "",
+    isOrganisation: false,
+    eventTypes: [
+      {
+        id: 4,
+        title: "Flexible Duration Meeting",
+        description: "Choose from multiple duration options for this meeting",
+        slug: "flexible",
+        length: 30,
+        selected: false,
+        team: null,
+        metadata: {
+          multipleDuration: [15, 30, 45, 60],
+        },
+        schedulingType: null,
+        requiresConfirmation: false,
+        position: 0,
+        destinationCalendar: null,
+        calVideoSettings: null,
+        locations: [],
+      },
+    ],
+  },
+];
+
+const mockEventTypeGroupsWithTeam = [
+  {
+    teamId: 10,
+    userId: null,
+    slug: "engineering-team",
+    name: "Engineering Team",
+    image: "https://cal.com/team-avatar.png",
+    isOrganisation: false,
+    eventTypes: [
+      {
+        id: 5,
+        title: "Team Standup",
+        description: "Daily team standup meeting",
+        slug: "standup",
+        length: 15,
+        selected: false,
+        team: {
+          id: 10,
+          name: "Engineering Team",
+          slug: "engineering-team",
+        },
+        metadata: {},
+        schedulingType: null,
+        requiresConfirmation: false,
+        position: 0,
+        destinationCalendar: null,
+        calVideoSettings: null,
+        locations: [],
+      },
+      {
+        id: 6,
+        title: "Sprint Planning",
+        description: "Bi-weekly sprint planning session",
+        slug: "sprint-planning",
+        length: 120,
+        selected: false,
+        team: {
+          id: 10,
+          name: "Engineering Team",
+          slug: "engineering-team",
+        },
+        metadata: {},
+        schedulingType: null,
+        requiresConfirmation: false,
+        position: 1,
+        destinationCalendar: null,
+        calVideoSettings: null,
+        locations: [],
+      },
+    ],
+  },
+];
+
+const mockEventTypeGroupsWithSelectedEvents = [
+  {
+    teamId: undefined,
+    userId: 1,
+    slug: "user",
+    name: "User",
+    image: "",
+    isOrganisation: false,
+    eventTypes: [
+      {
+        id: 1,
+        title: "30 Min Meeting",
+        description: "A quick 30 minute meeting to discuss your project needs",
+        slug: "30min",
+        length: 30,
+        selected: true,
+        team: null,
+        metadata: {},
+        schedulingType: null,
+        requiresConfirmation: false,
+        position: 0,
+        destinationCalendar: null,
+        calVideoSettings: null,
+        locations: [],
+      },
+      {
+        id: 2,
+        title: "60 Min Consultation",
+        description: "An hour-long consultation for in-depth discussion about your requirements",
+        slug: "60min",
+        length: 60,
+        selected: true,
+        team: null,
+        metadata: {},
+        schedulingType: null,
+        requiresConfirmation: false,
+        position: 1,
+        destinationCalendar: null,
+        calVideoSettings: null,
+        locations: [],
+      },
+    ],
+  },
+];
+
+const mockEmptyEventTypeGroup = [
+  {
+    teamId: 10,
+    userId: null,
+    slug: "new-team",
+    name: "New Team",
+    image: "",
+    isOrganisation: false,
+    eventTypes: [],
+  },
+];
+
+export const Default: Story = {
+  args: {
+    userName: "johndoe",
+    setConfigureStep: () => {},
+    handleSetUpLater: () => {},
+    formDefaultValues: {
+      eventTypeGroups: mockEventTypeGroups,
+    },
+  },
+};
+
+export const WithSelectedEvents: Story = {
+  args: {
+    userName: "johndoe",
+    setConfigureStep: () => {},
+    handleSetUpLater: () => {},
+    formDefaultValues: {
+      eventTypeGroups: mockEventTypeGroupsWithSelectedEvents,
+    },
+  },
+};
+
+export const WithTeamEvents: Story = {
+  args: {
+    userName: "johndoe",
+    setConfigureStep: () => {},
+    handleSetUpLater: () => {},
+    formDefaultValues: {
+      eventTypeGroups: mockEventTypeGroupsWithTeam,
+    },
+  },
+};
+
+export const WithMultipleDurations: Story = {
+  args: {
+    userName: "johndoe",
+    setConfigureStep: () => {},
+    handleSetUpLater: () => {},
+    formDefaultValues: {
+      eventTypeGroups: mockEventTypeGroupsWithMultipleDurations,
+    },
+  },
+};
+
+export const WithEmptyTeam: Story = {
+  args: {
+    userName: "johndoe",
+    setConfigureStep: () => {},
+    handleSetUpLater: () => {},
+    formDefaultValues: {
+      eventTypeGroups: mockEmptyEventTypeGroup,
+    },
+  },
+};
+
+export const WithMultipleGroups: Story = {
+  args: {
+    userName: "johndoe",
+    setConfigureStep: () => {},
+    handleSetUpLater: () => {},
+    formDefaultValues: {
+      eventTypeGroups: [
+        ...mockEventTypeGroups,
+        ...mockEventTypeGroupsWithTeam,
+      ],
+    },
+  },
+};
diff --git a/apps/web/components/apps/layouts/AppsLayout.stories.tsx b/apps/web/components/apps/layouts/AppsLayout.stories.tsx
new file mode 100644
index 00000000000000..bcef5ae52caf29
--- /dev/null
+++ b/apps/web/components/apps/layouts/AppsLayout.stories.tsx
@@ -0,0 +1,240 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useRouter } from "next/navigation";
+
+import AppsLayout from "./AppsLayout";
+
+const meta: Meta<typeof AppsLayout> = {
+  title: "Apps/Layouts/AppsLayout",
+  component: AppsLayout,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "fullscreen",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps",
+      },
+    },
+  },
+  argTypes: {
+    children: {
+      control: false,
+      description: "The content to display inside the layout",
+    },
+    isAdmin: {
+      control: "boolean",
+      description: "Whether the current user is an admin",
+    },
+    actions: {
+      control: false,
+      description: "Optional action buttons to display in the shell",
+    },
+    emptyStore: {
+      control: "boolean",
+      description: "Whether to show the empty state screen",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AppsLayout>;
+
+export const Default: Story = {
+  args: {
+    isAdmin: false,
+    emptyStore: false,
+    children: (
+      <div className="space-y-4 p-6">
+        <h1 className="text-2xl font-bold">Apps Content</h1>
+        <p className="text-gray-600">This is the main content area for apps.</p>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="rounded-lg border p-4">
+            <h3 className="font-semibold">Calendar App</h3>
+            <p className="text-sm text-gray-500">Manage your calendar integrations</p>
+          </div>
+          <div className="rounded-lg border p-4">
+            <h3 className="font-semibold">Video App</h3>
+            <p className="text-sm text-gray-500">Configure video conferencing</p>
+          </div>
+          <div className="rounded-lg border p-4">
+            <h3 className="font-semibold">Payment App</h3>
+            <p className="text-sm text-gray-500">Set up payment integrations</p>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    isAdmin: false,
+    emptyStore: false,
+    actions: (className?: string) => (
+      <button className={className}>
+        <span className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Add New App
+        </span>
+      </button>
+    ),
+    children: (
+      <div className="space-y-4 p-6">
+        <h1 className="text-2xl font-bold">Apps with Actions</h1>
+        <p className="text-gray-600">Layout with action buttons in the header.</p>
+      </div>
+    ),
+  },
+};
+
+export const EmptyStateAdmin: Story = {
+  args: {
+    isAdmin: true,
+    emptyStore: true,
+    children: null,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Empty state shown to admin users when no apps are configured.",
+      },
+    },
+  },
+};
+
+export const EmptyStateNonAdmin: Story = {
+  args: {
+    isAdmin: false,
+    emptyStore: true,
+    children: null,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Empty state shown to non-admin users when no apps are configured.",
+      },
+    },
+  },
+};
+
+export const WithCustomShellProps: Story = {
+  args: {
+    isAdmin: true,
+    emptyStore: false,
+    heading: "Custom Apps Heading",
+    subtitle: "Manage your application integrations",
+    children: (
+      <div className="space-y-4 p-6">
+        <h2 className="text-xl font-semibold">Custom Shell Configuration</h2>
+        <p className="text-gray-600">
+          This story demonstrates using Shell component props like heading and subtitle.
+        </p>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "AppsLayout with custom Shell component properties.",
+      },
+    },
+  },
+};
+
+export const WithComplexContent: Story = {
+  args: {
+    isAdmin: true,
+    emptyStore: false,
+    actions: (className?: string) => (
+      <div className={className}>
+        <button className="mr-2 rounded-md border px-4 py-2 hover:bg-gray-50">
+          Filter
+        </button>
+        <button className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Install App
+        </button>
+      </div>
+    ),
+    children: (
+      <div className="space-y-6 p-6">
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold">All Apps</h1>
+          <input
+            type="text"
+            placeholder="Search apps..."
+            className="rounded-md border px-4 py-2"
+          />
+        </div>
+        <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          {[
+            {
+              name: "Google Calendar",
+              category: "Calendar",
+              status: "Installed",
+              color: "blue",
+            },
+            {
+              name: "Zoom",
+              category: "Video",
+              status: "Available",
+              color: "gray",
+            },
+            {
+              name: "Stripe",
+              category: "Payment",
+              status: "Installed",
+              color: "blue",
+            },
+            {
+              name: "Microsoft Teams",
+              category: "Video",
+              status: "Available",
+              color: "gray",
+            },
+            {
+              name: "PayPal",
+              category: "Payment",
+              status: "Available",
+              color: "gray",
+            },
+            {
+              name: "Outlook Calendar",
+              category: "Calendar",
+              status: "Installed",
+              color: "blue",
+            },
+          ].map((app, index) => (
+            <div key={index} className="rounded-lg border p-6 shadow-sm hover:shadow-md">
+              <div className="mb-2 flex items-center justify-between">
+                <h3 className="font-semibold">{app.name}</h3>
+                <span
+                  className={`rounded-full px-2 py-1 text-xs ${
+                    app.status === "Installed"
+                      ? "bg-blue-100 text-blue-800"
+                      : "bg-gray-100 text-gray-800"
+                  }`}>
+                  {app.status}
+                </span>
+              </div>
+              <p className="mb-4 text-sm text-gray-500">{app.category}</p>
+              <button
+                className={`w-full rounded-md px-4 py-2 text-sm ${
+                  app.status === "Installed"
+                    ? "bg-gray-100 text-gray-700 hover:bg-gray-200"
+                    : "bg-blue-600 text-white hover:bg-blue-700"
+                }`}>
+                {app.status === "Installed" ? "Configure" : "Install"}
+              </button>
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "AppsLayout with a complex content layout showing multiple apps.",
+      },
+    },
+  },
+};
diff --git a/apps/web/components/apps/make/Setup.stories.tsx b/apps/web/components/apps/make/Setup.stories.tsx
new file mode 100644
index 00000000000000..46ec26120cc8b3
--- /dev/null
+++ b/apps/web/components/apps/make/Setup.stories.tsx
@@ -0,0 +1,262 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCReact, httpBatchLink } from "@trpc/react-query";
+import { useState } from "react";
+
+import MakeSetup from "./Setup";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+// Mock tRPC client
+const mockTrpc = createTRPCReact<any>();
+
+const mockTrpcClient = mockTrpc.createClient({
+  links: [
+    () =>
+      ({ op, next }) => {
+        // Mock responses based on the operation path
+        if (op.path === "viewer.apps.integrations") {
+          return {
+            subscribe: (observer: any) => {
+              observer.next({
+                result: {
+                  data: {
+                    items: [
+                      {
+                        type: "make_automation",
+                        userCredentialIds: [1],
+                      },
+                    ],
+                  },
+                },
+              });
+              observer.complete();
+              return {
+                unsubscribe: () => {},
+              };
+            },
+          } as any;
+        }
+        if (op.path === "viewer.apiKeys.findKeyOfType") {
+          return {
+            subscribe: (observer: any) => {
+              observer.next({
+                result: {
+                  data: [],
+                },
+              });
+              observer.complete();
+              return {
+                unsubscribe: () => {},
+              };
+            },
+          } as any;
+        }
+        if (op.path === "viewer.teams.listOwnedTeams") {
+          return {
+            subscribe: (observer: any) => {
+              observer.next({
+                result: {
+                  data: op.context?.withTeams
+                    ? [
+                        { id: 1, name: "Engineering Team" },
+                        { id: 2, name: "Marketing Team" },
+                      ]
+                    : [],
+                },
+              });
+              observer.complete();
+              return {
+                unsubscribe: () => {},
+              };
+            },
+          } as any;
+        }
+        return next(op);
+      },
+  ] as any,
+});
+
+const meta: Meta<typeof MakeSetup> = {
+  title: "Components/Apps/Make/Setup",
+  component: MakeSetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story, context) => {
+      const [trpcClient] = useState(() =>
+        mockTrpc.createClient({
+          links: [
+            () =>
+              ({ op, next }) => {
+                // Mock responses based on the operation path and story context
+                if (op.path === "viewer.apps.integrations") {
+                  return {
+                    subscribe: (observer: any) => {
+                      if (context.args.isNotInstalled) {
+                        observer.next({
+                          result: {
+                            data: {
+                              items: [],
+                            },
+                          },
+                        });
+                      } else {
+                        observer.next({
+                          result: {
+                            data: {
+                              items: [
+                                {
+                                  type: "make_automation",
+                                  userCredentialIds: [1],
+                                },
+                              ],
+                            },
+                          },
+                        });
+                      }
+                      observer.complete();
+                      return {
+                        unsubscribe: () => {},
+                      };
+                    },
+                  } as any;
+                }
+                if (op.path === "viewer.apiKeys.findKeyOfType") {
+                  return {
+                    subscribe: (observer: any) => {
+                      observer.next({
+                        result: {
+                          data: [],
+                        },
+                      });
+                      observer.complete();
+                      return {
+                        unsubscribe: () => {},
+                      };
+                    },
+                  } as any;
+                }
+                if (op.path === "viewer.teams.listOwnedTeams") {
+                  return {
+                    subscribe: (observer: any) => {
+                      observer.next({
+                        result: {
+                          data: context.args.withTeams
+                            ? [
+                                { id: 1, name: "Engineering Team" },
+                                { id: 2, name: "Marketing Team" },
+                              ]
+                            : [],
+                        },
+                      });
+                      observer.complete();
+                      return {
+                        unsubscribe: () => {},
+                      };
+                    },
+                  } as any;
+                }
+                if (op.path === "viewer.apiKeys.create") {
+                  return {
+                    subscribe: (observer: any) => {
+                      observer.next({
+                        result: {
+                          data: "cal_test_" + Math.random().toString(36).substring(2, 15),
+                        },
+                      });
+                      observer.complete();
+                      return {
+                        unsubscribe: () => {},
+                      };
+                    },
+                  } as any;
+                }
+                if (op.path === "viewer.apiKeys.delete") {
+                  return {
+                    subscribe: (observer: any) => {
+                      observer.next({
+                        result: {
+                          data: { success: true },
+                        },
+                      });
+                      observer.complete();
+                      return {
+                        unsubscribe: () => {},
+                      };
+                    },
+                  } as any;
+                }
+                return next(op);
+              },
+          ] as any,
+        })
+      );
+
+      return (
+        <mockTrpc.Provider client={trpcClient} queryClient={queryClient}>
+          <QueryClientProvider client={queryClient}>
+            <Story />
+          </QueryClientProvider>
+        </mockTrpc.Provider>
+      );
+    },
+  ],
+  argTypes: {
+    inviteLink: {
+      control: "text",
+      description: "The Make invite link URL",
+    },
+    withTeams: {
+      control: "boolean",
+      description: "Show setup with team API keys",
+    },
+    isNotInstalled: {
+      control: "boolean",
+      description: "Show app not installed state",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MakeSetup>;
+
+export const Default: Story = {
+  args: {
+    inviteLink: "https://www.make.com/en/integrations/cal-com",
+    withTeams: false,
+    isNotInstalled: false,
+  },
+};
+
+export const WithTeams: Story = {
+  args: {
+    inviteLink: "https://www.make.com/en/integrations/cal-com",
+    withTeams: true,
+    isNotInstalled: false,
+  },
+};
+
+export const NotInstalled: Story = {
+  args: {
+    inviteLink: "https://www.make.com/en/integrations/cal-com",
+    withTeams: false,
+    isNotInstalled: true,
+  },
+};
+
+export const CustomInviteLink: Story = {
+  args: {
+    inviteLink: "https://custom-make-invite-link.example.com",
+    withTeams: false,
+    isNotInstalled: false,
+  },
+};
diff --git a/apps/web/components/apps/paypal/Setup.stories.tsx b/apps/web/components/apps/paypal/Setup.stories.tsx
new file mode 100644
index 00000000000000..f94920525db7e0
--- /dev/null
+++ b/apps/web/components/apps/paypal/Setup.stories.tsx
@@ -0,0 +1,160 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCReact } from "@trpc/react-query";
+import { useState } from "react";
+
+import PayPalSetup from "./Setup";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+// Mock tRPC client
+const mockTrpc = createTRPCReact<any>();
+
+const meta: Meta<typeof PayPalSetup> = {
+  title: "Components/Apps/PayPal/Setup",
+  component: PayPalSetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story, context) => {
+      const [trpcClient] = useState(() =>
+        mockTrpc.createClient({
+          links: [
+            () =>
+              ({ op, next }) => {
+                // Mock responses based on the operation path and story context
+                if (op.path === "viewer.apps.integrations") {
+                  return {
+                    subscribe: (observer: any) => {
+                      if (context.args.isLoading) {
+                        // Don't complete the observer to simulate loading state
+                        return {
+                          unsubscribe: () => {},
+                        };
+                      }
+
+                      if (context.args.isNotInstalled) {
+                        observer.next({
+                          result: {
+                            data: {
+                              items: [],
+                            },
+                          },
+                        });
+                      } else {
+                        observer.next({
+                          result: {
+                            data: {
+                              items: [
+                                {
+                                  type: "paypal_payment",
+                                  userCredentialIds: [1],
+                                },
+                              ],
+                            },
+                          },
+                        });
+                      }
+                      observer.complete();
+                      return {
+                        unsubscribe: () => {},
+                      };
+                    },
+                  } as any;
+                }
+
+                if (op.path === "viewer.apps.updateAppCredentials") {
+                  return {
+                    subscribe: (observer: any) => {
+                      if (context.args.saveError) {
+                        observer.error(new Error("Failed to save credentials"));
+                      } else {
+                        observer.next({
+                          result: {
+                            data: { success: true },
+                          },
+                        });
+                        observer.complete();
+                      }
+                      return {
+                        unsubscribe: () => {},
+                      };
+                    },
+                  } as any;
+                }
+
+                return next(op);
+              },
+          ] as any,
+        })
+      );
+
+      return (
+        <mockTrpc.Provider client={trpcClient} queryClient={queryClient}>
+          <QueryClientProvider client={queryClient}>
+            <div className="min-h-screen">
+              <Story />
+            </div>
+          </QueryClientProvider>
+        </mockTrpc.Provider>
+      );
+    },
+  ],
+  argTypes: {
+    isNotInstalled: {
+      control: "boolean",
+      description: "Show app not installed state",
+    },
+    isLoading: {
+      control: "boolean",
+      description: "Show loading state",
+    },
+    saveError: {
+      control: "boolean",
+      description: "Simulate save error",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PayPalSetup>;
+
+export const Default: Story = {
+  args: {
+    isNotInstalled: false,
+    isLoading: false,
+    saveError: false,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    isNotInstalled: false,
+    isLoading: true,
+    saveError: false,
+  },
+};
+
+export const NotInstalled: Story = {
+  args: {
+    isNotInstalled: true,
+    isLoading: false,
+    saveError: false,
+  },
+};
+
+export const WithSaveError: Story = {
+  args: {
+    isNotInstalled: false,
+    isLoading: false,
+    saveError: true,
+  },
+};
diff --git a/apps/web/components/apps/routing-forms/FormActions.stories.tsx b/apps/web/components/apps/routing-forms/FormActions.stories.tsx
new file mode 100644
index 00000000000000..99f008e0690643
--- /dev/null
+++ b/apps/web/components/apps/routing-forms/FormActions.stories.tsx
@@ -0,0 +1,531 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { FormAction, FormActionsDropdown, FormActionsProvider } from "./FormActions";
+import type { NewFormDialogState } from "./FormActions";
+
+type RoutingForm = {
+  id: string;
+  name: string;
+  disabled: boolean;
+  fields?: Array<{
+    identifier?: string;
+    id: string;
+    type: string;
+    label: string;
+    routerId?: string | null;
+  }>;
+};
+
+const mockRoutingForm: RoutingForm = {
+  id: "form-123",
+  name: "Customer Intake Form",
+  disabled: false,
+  fields: [
+    {
+      id: "field-1",
+      identifier: "customer_name",
+      type: "text",
+      label: "Customer Name",
+      routerId: null,
+    },
+    {
+      id: "field-2",
+      identifier: "email",
+      type: "email",
+      label: "Email Address",
+      routerId: null,
+    },
+  ],
+};
+
+const mockDisabledForm: RoutingForm = {
+  id: "form-456",
+  name: "Disabled Form",
+  disabled: true,
+};
+
+// Wrapper component to handle provider state
+function FormActionsWrapper({ children }: { children: React.ReactNode }) {
+  const [newFormDialogState, setNewFormDialogState] = useState<NewFormDialogState>(null);
+
+  return (
+    <FormActionsProvider
+      appUrl="/routing-forms"
+      newFormDialogState={newFormDialogState}
+      setNewFormDialogState={setNewFormDialogState}>
+      {children}
+    </FormActionsProvider>
+  );
+}
+
+const meta = {
+  title: "Components/Apps/RoutingForms/FormActions",
+  component: FormAction,
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <FormActionsWrapper>
+        <div style={{ padding: "20px" }}>
+          <Story />
+        </div>
+      </FormActionsWrapper>
+    ),
+  ],
+} satisfies Meta<typeof FormAction>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <FormAction action="edit" routingForm={mockRoutingForm} color="primary">
+      Edit Form
+    </FormAction>
+  ),
+};
+
+export const EditAction: Story = {
+  render: () => (
+    <FormAction action="edit" routingForm={mockRoutingForm} color="secondary" StartIcon="pencil">
+      Edit
+    </FormAction>
+  ),
+};
+
+export const PreviewAction: Story = {
+  render: () => (
+    <FormAction action="preview" routingForm={mockRoutingForm} color="secondary" StartIcon="eye">
+      Preview
+    </FormAction>
+  ),
+};
+
+export const CopyLinkAction: Story = {
+  render: () => (
+    <FormAction
+      action="copyLink"
+      routingForm={mockRoutingForm}
+      color="secondary"
+      StartIcon="link">
+      Copy Link
+    </FormAction>
+  ),
+};
+
+export const DuplicateAction: Story = {
+  render: () => (
+    <FormAction
+      action="duplicate"
+      routingForm={mockRoutingForm}
+      color="secondary"
+      StartIcon="copy">
+      Duplicate
+    </FormAction>
+  ),
+};
+
+export const DeleteAction: Story = {
+  render: () => (
+    <FormAction
+      action="_delete"
+      routingForm={mockRoutingForm}
+      color="destructive"
+      StartIcon="trash-2">
+      Delete
+    </FormAction>
+  ),
+};
+
+export const DownloadAction: Story = {
+  render: () => (
+    <FormAction
+      action="download"
+      routingForm={mockRoutingForm}
+      color="secondary"
+      StartIcon="download">
+      Download CSV
+    </FormAction>
+  ),
+};
+
+export const ViewResponsesAction: Story = {
+  render: () => (
+    <FormAction
+      action="viewResponses"
+      routingForm={mockRoutingForm}
+      color="secondary"
+      StartIcon="bar-chart">
+      View Responses
+    </FormAction>
+  ),
+};
+
+export const ToggleAction: Story = {
+  render: () => (
+    <FormAction action="toggle" routingForm={mockRoutingForm} label="Enable form" />
+  ),
+};
+
+export const ToggleDisabledForm: Story = {
+  render: () => (
+    <FormAction action="toggle" routingForm={mockDisabledForm} label="Enable form" />
+  ),
+};
+
+export const CopyRedirectUrlAction: Story = {
+  render: () => (
+    <FormAction
+      action="copyRedirectUrl"
+      routingForm={mockRoutingForm}
+      color="secondary"
+      StartIcon="link">
+      Copy Redirect URL
+    </FormAction>
+  ),
+};
+
+export const CreateFormAction: Story = {
+  render: () => (
+    <FormAction action="create" routingForm={null} color="primary" StartIcon="plus">
+      Create New Form
+    </FormAction>
+  ),
+};
+
+export const ActionsDropdown: Story = {
+  render: () => (
+    <FormActionsDropdown>
+      <FormAction action="edit" routingForm={mockRoutingForm} color="minimal" StartIcon="pencil">
+        Edit
+      </FormAction>
+      <FormAction
+        action="preview"
+        routingForm={mockRoutingForm}
+        color="minimal"
+        StartIcon="eye">
+        Preview
+      </FormAction>
+      <FormAction
+        action="copyLink"
+        routingForm={mockRoutingForm}
+        color="minimal"
+        StartIcon="link">
+        Copy Link
+      </FormAction>
+      <FormAction
+        action="duplicate"
+        routingForm={mockRoutingForm}
+        color="minimal"
+        StartIcon="copy">
+        Duplicate
+      </FormAction>
+      <FormAction
+        action="download"
+        routingForm={mockRoutingForm}
+        color="minimal"
+        StartIcon="download">
+        Download CSV
+      </FormAction>
+      <FormAction
+        action="viewResponses"
+        routingForm={mockRoutingForm}
+        color="minimal"
+        StartIcon="bar-chart">
+        View Responses
+      </FormAction>
+      <FormAction
+        action="_delete"
+        routingForm={mockRoutingForm}
+        color="destructive"
+        StartIcon="trash-2">
+        Delete
+      </FormAction>
+    </FormActionsDropdown>
+  ),
+};
+
+export const DisabledDropdown: Story = {
+  render: () => (
+    <FormActionsDropdown disabled>
+      <FormAction action="edit" routingForm={mockRoutingForm} color="minimal" StartIcon="pencil">
+        Edit
+      </FormAction>
+      <FormAction
+        action="preview"
+        routingForm={mockRoutingForm}
+        color="minimal"
+        StartIcon="eye">
+        Preview
+      </FormAction>
+    </FormActionsDropdown>
+  ),
+};
+
+export const ActionButtons: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+      <FormAction action="edit" routingForm={mockRoutingForm} color="primary">
+        Edit
+      </FormAction>
+      <FormAction action="preview" routingForm={mockRoutingForm} color="secondary">
+        Preview
+      </FormAction>
+      <FormAction action="copyLink" routingForm={mockRoutingForm} color="secondary">
+        Copy Link
+      </FormAction>
+      <FormAction action="duplicate" routingForm={mockRoutingForm} color="secondary">
+        Duplicate
+      </FormAction>
+      <FormAction action="_delete" routingForm={mockRoutingForm} color="destructive">
+        Delete
+      </FormAction>
+    </div>
+  ),
+};
+
+export const ActionButtonsWithIcons: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>
+      <FormAction action="edit" routingForm={mockRoutingForm} color="primary" StartIcon="pencil">
+        Edit
+      </FormAction>
+      <FormAction action="preview" routingForm={mockRoutingForm} color="secondary" StartIcon="eye">
+        Preview
+      </FormAction>
+      <FormAction
+        action="copyLink"
+        routingForm={mockRoutingForm}
+        color="secondary"
+        StartIcon="link">
+        Copy Link
+      </FormAction>
+      <FormAction
+        action="duplicate"
+        routingForm={mockRoutingForm}
+        color="secondary"
+        StartIcon="copy">
+        Duplicate
+      </FormAction>
+      <FormAction
+        action="download"
+        routingForm={mockRoutingForm}
+        color="secondary"
+        StartIcon="download">
+        Download
+      </FormAction>
+      <FormAction
+        action="_delete"
+        routingForm={mockRoutingForm}
+        color="destructive"
+        StartIcon="trash-2">
+        Delete
+      </FormAction>
+    </div>
+  ),
+};
+
+export const IconOnlyActions: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "8px" }}>
+      <FormAction
+        action="edit"
+        routingForm={mockRoutingForm}
+        variant="icon"
+        color="secondary"
+        StartIcon="pencil"
+        tooltip="Edit form"
+      />
+      <FormAction
+        action="preview"
+        routingForm={mockRoutingForm}
+        variant="icon"
+        color="secondary"
+        StartIcon="eye"
+        tooltip="Preview form"
+      />
+      <FormAction
+        action="copyLink"
+        routingForm={mockRoutingForm}
+        variant="icon"
+        color="secondary"
+        StartIcon="link"
+        tooltip="Copy link"
+      />
+      <FormAction
+        action="duplicate"
+        routingForm={mockRoutingForm}
+        variant="icon"
+        color="secondary"
+        StartIcon="copy"
+        tooltip="Duplicate form"
+      />
+      <FormAction
+        action="_delete"
+        routingForm={mockRoutingForm}
+        variant="icon"
+        color="destructive"
+        StartIcon="trash-2"
+        tooltip="Delete form"
+      />
+    </div>
+  ),
+};
+
+export const FormWithToggle: Story = {
+  render: () => (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: "16px",
+        padding: "16px",
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        minWidth: "400px",
+      }}>
+      <div style={{ flex: 1 }}>
+        <h3 style={{ margin: 0, fontSize: "16px", fontWeight: 600 }}>Customer Intake Form</h3>
+        <p style={{ margin: "4px 0 0", fontSize: "14px", color: "#6b7280" }}>
+          Form is currently enabled
+        </p>
+      </div>
+      <FormAction action="toggle" routingForm={mockRoutingForm} label="Enabled" />
+      <FormActionsDropdown>
+        <FormAction
+          action="edit"
+          routingForm={mockRoutingForm}
+          color="minimal"
+          StartIcon="pencil">
+          Edit
+        </FormAction>
+        <FormAction
+          action="preview"
+          routingForm={mockRoutingForm}
+          color="minimal"
+          StartIcon="eye">
+          Preview
+        </FormAction>
+        <FormAction
+          action="copyLink"
+          routingForm={mockRoutingForm}
+          color="minimal"
+          StartIcon="link">
+          Copy Link
+        </FormAction>
+        <FormAction
+          action="duplicate"
+          routingForm={mockRoutingForm}
+          color="minimal"
+          StartIcon="copy">
+          Duplicate
+        </FormAction>
+        <FormAction
+          action="_delete"
+          routingForm={mockRoutingForm}
+          color="destructive"
+          StartIcon="trash-2">
+          Delete
+        </FormAction>
+      </FormActionsDropdown>
+    </div>
+  ),
+};
+
+export const CompleteFormCard: Story = {
+  render: () => (
+    <div
+      style={{
+        border: "1px solid #e5e7eb",
+        borderRadius: "8px",
+        padding: "20px",
+        minWidth: "600px",
+        backgroundColor: "#ffffff",
+      }}>
+      <div style={{ display: "flex", alignItems: "start", gap: "16px", marginBottom: "16px" }}>
+        <div style={{ flex: 1 }}>
+          <h3 style={{ margin: 0, fontSize: "18px", fontWeight: 600 }}>Customer Intake Form</h3>
+          <p style={{ margin: "8px 0", fontSize: "14px", color: "#6b7280" }}>
+            Collect customer information and route to the right team
+          </p>
+          <div style={{ display: "flex", gap: "8px", fontSize: "12px", color: "#9ca3af" }}>
+            <span>2 fields</span>
+            <span>•</span>
+            <span>45 responses</span>
+          </div>
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <FormAction action="toggle" routingForm={mockRoutingForm} label="" />
+          <FormActionsDropdown>
+            <FormAction
+              action="edit"
+              routingForm={mockRoutingForm}
+              color="minimal"
+              StartIcon="pencil">
+              Edit
+            </FormAction>
+            <FormAction
+              action="preview"
+              routingForm={mockRoutingForm}
+              color="minimal"
+              StartIcon="eye">
+              Preview
+            </FormAction>
+            <FormAction
+              action="copyLink"
+              routingForm={mockRoutingForm}
+              color="minimal"
+              StartIcon="link">
+              Copy Link
+            </FormAction>
+            <FormAction
+              action="duplicate"
+              routingForm={mockRoutingForm}
+              color="minimal"
+              StartIcon="copy">
+              Duplicate
+            </FormAction>
+            <FormAction
+              action="download"
+              routingForm={mockRoutingForm}
+              color="minimal"
+              StartIcon="download">
+              Download CSV
+            </FormAction>
+            <FormAction
+              action="viewResponses"
+              routingForm={mockRoutingForm}
+              color="minimal"
+              StartIcon="bar-chart">
+              View Responses
+            </FormAction>
+            <FormAction
+              action="_delete"
+              routingForm={mockRoutingForm}
+              color="destructive"
+              StartIcon="trash-2">
+              Delete
+            </FormAction>
+          </FormActionsDropdown>
+        </div>
+      </div>
+      <div style={{ display: "flex", gap: "8px" }}>
+        <FormAction action="edit" routingForm={mockRoutingForm} color="primary" size="sm">
+          Edit Form
+        </FormAction>
+        <FormAction action="preview" routingForm={mockRoutingForm} color="secondary" size="sm">
+          Preview
+        </FormAction>
+        <FormAction action="viewResponses" routingForm={mockRoutingForm} color="secondary" size="sm">
+          View Responses
+        </FormAction>
+      </div>
+    </div>
+  ),
+};
diff --git a/apps/web/components/apps/routing-forms/FormSettingsSlideover.stories.tsx b/apps/web/components/apps/routing-forms/FormSettingsSlideover.stories.tsx
new file mode 100644
index 00000000000000..2fcdd91a1ebd28
--- /dev/null
+++ b/apps/web/components/apps/routing-forms/FormSettingsSlideover.stories.tsx
@@ -0,0 +1,357 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+
+import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-forms/types/types";
+import { Button } from "@calcom/ui/components/button";
+
+import { FormSettingsSlideover } from "./FormSettingsSlideover";
+
+const meta = {
+  title: "Components/Apps/RoutingForms/FormSettingsSlideover",
+  component: FormSettingsSlideover,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof FormSettingsSlideover>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock form data
+const mockFormData: RoutingFormWithResponseCount = {
+  id: "form-123",
+  name: "Customer Feedback Form",
+  description: "A form to gather customer feedback and route to appropriate teams",
+  fields: [],
+  routes: [],
+  createdAt: "2024-01-01T00:00:00.000Z",
+  updatedAt: "2024-01-15T00:00:00.000Z",
+  position: 0,
+  userId: 1,
+  teamId: 1,
+  disabled: false,
+  settings: {
+    sendUpdatesTo: [],
+    sendToAll: false,
+    emailOwnerOnSubmission: false,
+  },
+  routers: [
+    {
+      id: "router-1",
+      name: "Sales Router",
+      description: "Routes to sales team",
+    },
+    {
+      id: "router-2",
+      name: "Support Router",
+      description: "Routes to support team",
+    },
+  ],
+  connectedForms: [
+    {
+      id: "form-456",
+      name: "Lead Qualification",
+      description: "Connected qualification form",
+    },
+  ],
+  teamMembers: [
+    {
+      id: 1,
+      name: "John Doe",
+      email: "john@example.com",
+      avatarUrl: null,
+      defaultScheduleId: null,
+    },
+    {
+      id: 2,
+      name: "Jane Smith",
+      email: "jane@example.com",
+      avatarUrl: null,
+      defaultScheduleId: null,
+    },
+    {
+      id: 3,
+      name: "Bob Johnson",
+      email: "bob@example.com",
+      avatarUrl: null,
+      defaultScheduleId: null,
+    },
+  ],
+  team: {
+    slug: "example-team",
+    name: "Example Team",
+  },
+  _count: {
+    responses: 42,
+  },
+};
+
+// Mock form data without team
+const mockPersonalFormData: RoutingFormWithResponseCount = {
+  id: "form-789",
+  name: "Personal Form",
+  description: "A personal routing form",
+  fields: [],
+  routes: [],
+  createdAt: "2024-01-01T00:00:00.000Z",
+  updatedAt: "2024-01-15T00:00:00.000Z",
+  position: 0,
+  userId: 1,
+  teamId: null,
+  disabled: false,
+  settings: {
+    sendUpdatesTo: [],
+    sendToAll: false,
+    emailOwnerOnSubmission: false,
+  },
+  routers: [],
+  connectedForms: [],
+  teamMembers: [],
+  team: null,
+  _count: {
+    responses: 5,
+  },
+};
+
+// Mock form data without routers or connected forms
+const mockMinimalFormData: RoutingFormWithResponseCount = {
+  id: "form-minimal",
+  name: "Minimal Form",
+  description: "",
+  fields: [],
+  routes: [],
+  createdAt: "2024-01-01T00:00:00.000Z",
+  updatedAt: "2024-01-15T00:00:00.000Z",
+  position: 0,
+  userId: 1,
+  teamId: 1,
+  disabled: false,
+  settings: {
+    sendUpdatesTo: [],
+    sendToAll: false,
+    emailOwnerOnSubmission: false,
+  },
+  routers: [],
+  connectedForms: [],
+  teamMembers: [
+    {
+      id: 1,
+      name: "Admin User",
+      email: "admin@example.com",
+      avatarUrl: null,
+      defaultScheduleId: null,
+    },
+  ],
+  team: {
+    slug: "minimal-team",
+    name: "Minimal Team",
+  },
+  _count: {
+    responses: 0,
+  },
+};
+
+// Wrapper component to handle state
+function FormSettingsSlideoverWrapper({
+  formData,
+  defaultOpen = false,
+}: {
+  formData: RoutingFormWithResponseCount;
+  defaultOpen?: boolean;
+}) {
+  const [isOpen, setIsOpen] = useState(defaultOpen);
+  const hookForm = useForm<RoutingFormWithResponseCount>({
+    defaultValues: formData,
+  });
+
+  return (
+    <div>
+      <Button onClick={() => setIsOpen(true)}>Open Form Settings</Button>
+      <FormSettingsSlideover
+        form={formData}
+        hookForm={hookForm}
+        isOpen={isOpen}
+        onOpenChange={setIsOpen}
+        appUrl="/apps/routing-forms"
+      />
+    </div>
+  );
+}
+
+// Default story with team form
+export const Default: Story = {
+  render: () => <FormSettingsSlideoverWrapper formData={mockFormData} />,
+};
+
+// Story with slideover open by default
+export const OpenByDefault: Story = {
+  render: () => <FormSettingsSlideoverWrapper formData={mockFormData} defaultOpen={true} />,
+};
+
+// Personal form without team
+export const PersonalForm: Story = {
+  render: () => <FormSettingsSlideoverWrapper formData={mockPersonalFormData} />,
+};
+
+// Personal form open by default
+export const PersonalFormOpen: Story = {
+  render: () => <FormSettingsSlideoverWrapper formData={mockPersonalFormData} defaultOpen={true} />,
+};
+
+// Minimal form without routers or connected forms
+export const MinimalForm: Story = {
+  render: () => <FormSettingsSlideoverWrapper formData={mockMinimalFormData} />,
+};
+
+// Minimal form open by default
+export const MinimalFormOpen: Story = {
+  render: () => <FormSettingsSlideoverWrapper formData={mockMinimalFormData} defaultOpen={true} />,
+};
+
+// Form with pre-selected team members
+export const WithSelectedMembers: Story = {
+  render: () => {
+    const formWithSelectedMembers = {
+      ...mockFormData,
+      settings: {
+        sendUpdatesTo: [1, 2],
+        sendToAll: false,
+        emailOwnerOnSubmission: false,
+      },
+    };
+    return <FormSettingsSlideoverWrapper formData={formWithSelectedMembers} defaultOpen={true} />;
+  },
+};
+
+// Form with "send to all" enabled
+export const SendToAllEnabled: Story = {
+  render: () => {
+    const formWithSendToAll = {
+      ...mockFormData,
+      settings: {
+        sendUpdatesTo: [],
+        sendToAll: true,
+        emailOwnerOnSubmission: false,
+      },
+    };
+    return <FormSettingsSlideoverWrapper formData={formWithSendToAll} defaultOpen={true} />;
+  },
+};
+
+// Personal form with email owner enabled
+export const EmailOwnerEnabled: Story = {
+  render: () => {
+    const formWithEmailOwner = {
+      ...mockPersonalFormData,
+      settings: {
+        sendUpdatesTo: [],
+        sendToAll: false,
+        emailOwnerOnSubmission: true,
+      },
+    };
+    return <FormSettingsSlideoverWrapper formData={formWithEmailOwner} defaultOpen={true} />;
+  },
+};
+
+// Form with many routers
+export const ManyRouters: Story = {
+  render: () => {
+    const formWithManyRouters = {
+      ...mockFormData,
+      routers: [
+        { id: "router-1", name: "Sales Router", description: "Routes to sales team" },
+        { id: "router-2", name: "Support Router", description: "Routes to support team" },
+        { id: "router-3", name: "Marketing Router", description: "Routes to marketing team" },
+        { id: "router-4", name: "Product Router", description: "Routes to product team" },
+        { id: "router-5", name: "Engineering Router", description: "Routes to engineering team" },
+      ],
+    };
+    return <FormSettingsSlideoverWrapper formData={formWithManyRouters} defaultOpen={true} />;
+  },
+};
+
+// Form with many connected forms
+export const ManyConnectedForms: Story = {
+  render: () => {
+    const formWithManyConnected = {
+      ...mockFormData,
+      connectedForms: [
+        { id: "form-1", name: "Lead Qualification", description: "Qualification form" },
+        { id: "form-2", name: "Product Interest", description: "Product interest form" },
+        { id: "form-3", name: "Feedback Survey", description: "Customer feedback" },
+        { id: "form-4", name: "Support Ticket", description: "Support form" },
+      ],
+    };
+    return <FormSettingsSlideoverWrapper formData={formWithManyConnected} defaultOpen={true} />;
+  },
+};
+
+// Form with long description
+export const LongDescription: Story = {
+  render: () => {
+    const formWithLongDescription = {
+      ...mockFormData,
+      description:
+        "This is a comprehensive customer feedback form designed to gather detailed information about user experience, product satisfaction, feature requests, and overall sentiment. It includes multiple sections covering different aspects of the customer journey and routes responses to appropriate teams based on the feedback type and urgency level. The form is used across multiple departments and integrates with our CRM system.",
+    };
+    return <FormSettingsSlideoverWrapper formData={formWithLongDescription} defaultOpen={true} />;
+  },
+};
+
+// Form with many team members
+export const ManyTeamMembers: Story = {
+  render: () => {
+    const formWithManyMembers = {
+      ...mockFormData,
+      teamMembers: [
+        { id: 1, name: "John Doe", email: "john@example.com", avatarUrl: null, defaultScheduleId: null },
+        {
+          id: 2,
+          name: "Jane Smith",
+          email: "jane@example.com",
+          avatarUrl: null,
+          defaultScheduleId: null,
+        },
+        {
+          id: 3,
+          name: "Bob Johnson",
+          email: "bob@example.com",
+          avatarUrl: null,
+          defaultScheduleId: null,
+        },
+        {
+          id: 4,
+          name: "Alice Williams",
+          email: "alice@example.com",
+          avatarUrl: null,
+          defaultScheduleId: null,
+        },
+        {
+          id: 5,
+          name: "Charlie Brown",
+          email: "charlie@example.com",
+          avatarUrl: null,
+          defaultScheduleId: null,
+        },
+        { id: 6, name: "Diana Ross", email: "diana@example.com", avatarUrl: null, defaultScheduleId: null },
+        {
+          id: 7,
+          name: "Edward Norton",
+          email: "edward@example.com",
+          avatarUrl: null,
+          defaultScheduleId: null,
+        },
+        {
+          id: 8,
+          name: "Fiona Apple",
+          email: "fiona@example.com",
+          avatarUrl: null,
+          defaultScheduleId: null,
+        },
+      ],
+    };
+    return <FormSettingsSlideoverWrapper formData={formWithManyMembers} defaultOpen={true} />;
+  },
+};
diff --git a/apps/web/components/apps/routing-forms/Header.stories.tsx b/apps/web/components/apps/routing-forms/Header.stories.tsx
new file mode 100644
index 00000000000000..c58ef0f996f1de
--- /dev/null
+++ b/apps/web/components/apps/routing-forms/Header.stories.tsx
@@ -0,0 +1,399 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+import { FormProvider, useForm } from "react-hook-form";
+
+import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-forms/types/types";
+
+import { FormActionsProvider } from "./FormActions";
+import { Header } from "./Header";
+
+const meta = {
+  title: "Components/Apps/RoutingForms/Header",
+  component: Header,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/routing-forms/form-edit/cltest123",
+      },
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const methods = useForm<RoutingFormWithResponseCount>({
+        defaultValues: context.args.routingForm,
+      });
+
+      return (
+        <FormActionsProvider
+          appUrl="/apps/routing-forms"
+          newFormDialogState={null}
+          setNewFormDialogState={fn()}>
+          <FormProvider {...methods}>
+            <div style={{ width: "100vw", maxWidth: "1400px" }}>
+              <Story />
+            </div>
+          </FormProvider>
+        </FormActionsProvider>
+      );
+    },
+  ],
+  args: {
+    isSaving: false,
+    appUrl: "/apps/routing-forms",
+    setShowInfoLostDialog: fn(),
+    setIsTestPreviewOpen: fn(),
+    isTestPreviewOpen: false,
+  },
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Base mock form data
+const baseMockForm: RoutingFormWithResponseCount = {
+  id: "cltest123",
+  name: "Customer Inquiry Form",
+  description: "Route customers to the right team based on their inquiry type",
+  disabled: false,
+  userId: 1,
+  teamId: null,
+  position: 0,
+  createdAt: "2024-01-15T10:00:00.000Z",
+  updatedAt: "2024-01-20T14:30:00.000Z",
+  routes: [
+    {
+      id: "route1",
+      action: { type: "eventTypeRedirectUrl", value: "team/sales" },
+      queryValue: {
+        type: "group",
+        children1: {
+          rule1: {
+            type: "rule",
+            properties: {
+              field: "inquiry_type",
+              operator: "equal",
+              value: ["sales"],
+              valueSrc: ["value"],
+            },
+          },
+        },
+      },
+      isFallback: false,
+    },
+    {
+      id: "fallback",
+      action: { type: "eventTypeRedirectUrl", value: "team/general" },
+      isFallback: true,
+    },
+  ],
+  fields: [
+    {
+      id: "field1",
+      type: "text",
+      label: "Your Name",
+      required: true,
+    },
+    {
+      id: "field2",
+      type: "email",
+      label: "Email Address",
+      required: true,
+    },
+    {
+      id: "inquiry_type",
+      type: "select",
+      label: "Type of Inquiry",
+      required: true,
+      options: [
+        { id: "opt1", label: "Sales" },
+        { id: "opt2", label: "Support" },
+        { id: "opt3", label: "General" },
+      ],
+    },
+  ],
+  settings: {
+    emailOwnerOnSubmission: false,
+    sendUpdatesTo: [],
+  },
+  connectedForms: [],
+  routers: [],
+  teamMembers: [],
+  team: null,
+  _count: {
+    responses: 0,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    routingForm: baseMockForm,
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const WithLongName: Story = {
+  args: {
+    routingForm: {
+      ...baseMockForm,
+      name: "This is a Very Long Form Name That Should Demonstrate How The Header Handles Text Truncation and Overflow",
+    },
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const SavingState: Story = {
+  args: {
+    routingForm: baseMockForm,
+    isSaving: true,
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const PreviewOpen: Story = {
+  args: {
+    routingForm: baseMockForm,
+    isTestPreviewOpen: true,
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const TeamForm: Story = {
+  args: {
+    routingForm: {
+      ...baseMockForm,
+      name: "Team Sales Routing Form",
+      teamId: 5,
+      team: {
+        slug: "sales-team",
+        name: "Sales Team",
+      },
+    },
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const WithManyResponses: Story = {
+  args: {
+    routingForm: {
+      ...baseMockForm,
+      name: "Popular Contact Form",
+      _count: {
+        responses: 1247,
+      },
+    },
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const ReadOnlyPermissions: Story = {
+  args: {
+    routingForm: baseMockForm,
+    permissions: {
+      canCreate: false,
+      canRead: true,
+      canEdit: false,
+      canDelete: false,
+    },
+  },
+};
+
+export const CanEditOnly: Story = {
+  args: {
+    routingForm: baseMockForm,
+    permissions: {
+      canCreate: false,
+      canRead: true,
+      canEdit: true,
+      canDelete: false,
+    },
+  },
+};
+
+export const DisabledForm: Story = {
+  args: {
+    routingForm: {
+      ...baseMockForm,
+      name: "Inactive Form",
+      disabled: true,
+      description: "This form is currently disabled and not accepting responses",
+    },
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const ComplexFormWithManyFields: Story = {
+  args: {
+    routingForm: {
+      ...baseMockForm,
+      name: "Advanced Lead Qualification",
+      description: "Multi-step form to qualify leads and route them to the appropriate sales representative",
+      fields: [
+        {
+          id: "field1",
+          type: "text",
+          label: "Company Name",
+          required: true,
+        },
+        {
+          id: "field2",
+          type: "text",
+          label: "Your Name",
+          required: true,
+        },
+        {
+          id: "field3",
+          type: "email",
+          label: "Work Email",
+          required: true,
+        },
+        {
+          id: "field4",
+          type: "phone",
+          label: "Phone Number",
+          required: true,
+        },
+        {
+          id: "field5",
+          type: "select",
+          label: "Company Size",
+          required: true,
+          options: [
+            { id: "opt1", label: "1-10 employees" },
+            { id: "opt2", label: "11-50 employees" },
+            { id: "opt3", label: "51-200 employees" },
+            { id: "opt4", label: "201-500 employees" },
+            { id: "opt5", label: "500+ employees" },
+          ],
+        },
+        {
+          id: "field6",
+          type: "multiselect",
+          label: "Products of Interest",
+          required: true,
+          options: [
+            { id: "prod1", label: "Platform" },
+            { id: "prod2", label: "Enterprise" },
+            { id: "prod3", label: "Teams" },
+            { id: "prod4", label: "API" },
+          ],
+        },
+      ],
+      routes: [
+        {
+          id: "enterprise-route",
+          action: { type: "eventTypeRedirectUrl", value: "team/enterprise-sales" },
+          queryValue: {
+            type: "group",
+            children1: {
+              rule1: {
+                type: "rule",
+                properties: {
+                  field: "field5",
+                  operator: "select_any_in",
+                  value: ["opt4", "opt5"],
+                  valueSrc: ["value"],
+                },
+              },
+            },
+          },
+          isFallback: false,
+        },
+        {
+          id: "fallback",
+          action: { type: "eventTypeRedirectUrl", value: "team/general-sales" },
+          isFallback: true,
+        },
+      ],
+      _count: {
+        responses: 892,
+      },
+    },
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const ShortFormName: Story = {
+  args: {
+    routingForm: {
+      ...baseMockForm,
+      name: "Form",
+    },
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const WithSpecialCharacters: Story = {
+  args: {
+    routingForm: {
+      ...baseMockForm,
+      name: "Form & Survey (2024) - Q1",
+    },
+    permissions: {
+      canCreate: true,
+      canRead: true,
+      canEdit: true,
+      canDelete: true,
+    },
+  },
+};
+
+export const SavingWithReadOnlyPermissions: Story = {
+  args: {
+    routingForm: baseMockForm,
+    isSaving: true,
+    permissions: {
+      canCreate: false,
+      canRead: true,
+      canEdit: false,
+      canDelete: false,
+    },
+  },
+};
diff --git a/apps/web/components/apps/routing-forms/SingleForm.stories.tsx b/apps/web/components/apps/routing-forms/SingleForm.stories.tsx
new file mode 100644
index 00000000000000..4a2bcfd4704788
--- /dev/null
+++ b/apps/web/components/apps/routing-forms/SingleForm.stories.tsx
@@ -0,0 +1,519 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { FormProvider, useForm } from "react-hook-form";
+
+import type { RoutingFormWithResponseCount } from "@calcom/app-store/routing-forms/types/types";
+
+import SingleForm from "./SingleForm";
+import type { SingleFormComponentProps } from "./SingleForm";
+
+const meta = {
+  title: "Components/Apps/RoutingForms/SingleForm",
+  component: SingleForm,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  decorators: [
+    (Story, context) => {
+      const methods = useForm<RoutingFormWithResponseCount>({
+        defaultValues: context.args.form,
+      });
+
+      return (
+        <FormProvider {...methods}>
+          <div style={{ width: "100vw", height: "100vh", maxWidth: "1400px" }}>
+            <Story />
+          </div>
+        </FormProvider>
+      );
+    },
+  ],
+} satisfies Meta<typeof SingleForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock Page component
+const MockPage = ({ form }: { form: RoutingFormWithResponseCount }) => (
+  <div className="bg-default border-subtle rounded-md border p-6">
+    <h2 className="text-emphasis mb-4 text-2xl font-semibold">{form.name}</h2>
+    <p className="text-default mb-4">{form.description || "No description provided"}</p>
+    <div className="text-muted text-sm">
+      <p>Form ID: {form.id}</p>
+      <p>Fields: {form.fields?.length || 0}</p>
+      <p>Routes: {form.routes?.length || 0}</p>
+      <p>Responses: {form._count.responses}</p>
+    </div>
+  </div>
+);
+
+// Base mock form data
+const baseMockForm: RoutingFormWithResponseCount = {
+  id: "cltest123",
+  name: "Customer Inquiry Form",
+  description: "Route customers to the right team based on their inquiry type",
+  disabled: false,
+  userId: 1,
+  teamId: null,
+  position: 0,
+  createdAt: "2024-01-15T10:00:00.000Z",
+  updatedAt: "2024-01-20T14:30:00.000Z",
+  routes: [
+    {
+      id: "route1",
+      action: { type: "eventTypeRedirectUrl", value: "team/sales" },
+      queryValue: {
+        type: "group",
+        children1: {
+          rule1: {
+            type: "rule",
+            properties: {
+              field: "inquiry_type",
+              operator: "equal",
+              value: ["sales"],
+              valueSrc: ["value"],
+            },
+          },
+        },
+      },
+      isFallback: false,
+    },
+    {
+      id: "route2",
+      action: { type: "eventTypeRedirectUrl", value: "team/support" },
+      queryValue: {
+        type: "group",
+        children1: {
+          rule1: {
+            type: "rule",
+            properties: {
+              field: "inquiry_type",
+              operator: "equal",
+              value: ["support"],
+              valueSrc: ["value"],
+            },
+          },
+        },
+      },
+      isFallback: false,
+    },
+    {
+      id: "fallback",
+      action: { type: "eventTypeRedirectUrl", value: "team/general" },
+      isFallback: true,
+    },
+  ],
+  fields: [
+    {
+      id: "field1",
+      type: "text",
+      label: "Your Name",
+      required: true,
+    },
+    {
+      id: "field2",
+      type: "email",
+      label: "Email Address",
+      required: true,
+    },
+    {
+      id: "inquiry_type",
+      type: "select",
+      label: "Type of Inquiry",
+      required: true,
+      options: [
+        { id: "opt1", label: "Sales" },
+        { id: "opt2", label: "Support" },
+        { id: "opt3", label: "General" },
+      ],
+    },
+    {
+      id: "field4",
+      type: "textarea",
+      label: "Message",
+      required: false,
+    },
+  ],
+  settings: {
+    emailOwnerOnSubmission: false,
+    sendUpdatesTo: [],
+  },
+  connectedForms: [],
+  routers: [],
+  teamMembers: [],
+  team: null,
+  _count: {
+    responses: 0,
+  },
+};
+
+const baseProps: Omit<SingleFormComponentProps, "form"> = {
+  appUrl: "/apps/routing-forms",
+  Page: MockPage,
+  enrichedWithUserProfileForm: {
+    user: {
+      id: 1,
+      username: "johndoe",
+      name: "John Doe",
+    },
+    team: null,
+    nonOrgUsername: "johndoe",
+    nonOrgTeamslug: null,
+    userOrigin: "https://cal.com/johndoe",
+    teamOrigin: null,
+  },
+  permissions: {
+    canEditForm: true,
+    canDeleteForm: true,
+    canToggleForm: true,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    form: baseMockForm,
+    ...baseProps,
+  },
+};
+
+export const WithTeam: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Team Sales Inquiry Form",
+      teamId: 5,
+      team: {
+        slug: "sales-team",
+        name: "Sales Team",
+      },
+    },
+    enrichedWithUserProfileForm: {
+      ...baseProps.enrichedWithUserProfileForm,
+      team: {
+        id: 5,
+        slug: "sales-team",
+        name: "Sales Team",
+      },
+      nonOrgTeamslug: "sales-team",
+      teamOrigin: "https://cal.com/team/sales-team",
+    },
+    ...baseProps,
+  },
+};
+
+export const WithManyResponses: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Popular Contact Form",
+      _count: {
+        responses: 1247,
+      },
+    },
+    ...baseProps,
+  },
+};
+
+export const ComplexForm: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Advanced Lead Qualification",
+      description: "Multi-step form to qualify leads and route them to the appropriate sales representative",
+      fields: [
+        {
+          id: "field1",
+          type: "text",
+          label: "Company Name",
+          required: true,
+        },
+        {
+          id: "field2",
+          type: "text",
+          label: "Your Name",
+          required: true,
+        },
+        {
+          id: "field3",
+          type: "email",
+          label: "Work Email",
+          required: true,
+        },
+        {
+          id: "field4",
+          type: "phone",
+          label: "Phone Number",
+          required: true,
+        },
+        {
+          id: "field5",
+          type: "select",
+          label: "Company Size",
+          required: true,
+          options: [
+            { id: "opt1", label: "1-10 employees" },
+            { id: "opt2", label: "11-50 employees" },
+            { id: "opt3", label: "51-200 employees" },
+            { id: "opt4", label: "201-500 employees" },
+            { id: "opt5", label: "500+ employees" },
+          ],
+        },
+        {
+          id: "field6",
+          type: "multiselect",
+          label: "Products of Interest",
+          required: true,
+          options: [
+            { id: "prod1", label: "Platform" },
+            { id: "prod2", label: "Enterprise" },
+            { id: "prod3", label: "Teams" },
+            { id: "prod4", label: "API" },
+          ],
+        },
+        {
+          id: "field7",
+          type: "select",
+          label: "Budget Range",
+          required: true,
+          options: [
+            { id: "budget1", label: "< $10,000" },
+            { id: "budget2", label: "$10,000 - $50,000" },
+            { id: "budget3", label: "$50,000 - $100,000" },
+            { id: "budget4", label: "$100,000+" },
+          ],
+        },
+        {
+          id: "field8",
+          type: "select",
+          label: "Timeline",
+          required: true,
+          options: [
+            { id: "time1", label: "Immediate (< 1 month)" },
+            { id: "time2", label: "1-3 months" },
+            { id: "time3", label: "3-6 months" },
+            { id: "time4", label: "6+ months" },
+          ],
+        },
+        {
+          id: "field9",
+          type: "textarea",
+          label: "Additional Requirements",
+          required: false,
+        },
+      ],
+      routes: [
+        {
+          id: "enterprise-route",
+          action: { type: "eventTypeRedirectUrl", value: "team/enterprise-sales" },
+          queryValue: {
+            type: "group",
+            children1: {
+              rule1: {
+                type: "rule",
+                properties: {
+                  field: "field5",
+                  operator: "select_any_in",
+                  value: ["opt4", "opt5"],
+                  valueSrc: ["value"],
+                },
+              },
+            },
+          },
+          isFallback: false,
+        },
+        {
+          id: "smb-route",
+          action: { type: "eventTypeRedirectUrl", value: "team/smb-sales" },
+          queryValue: {
+            type: "group",
+            children1: {
+              rule1: {
+                type: "rule",
+                properties: {
+                  field: "field5",
+                  operator: "select_any_in",
+                  value: ["opt1", "opt2", "opt3"],
+                  valueSrc: ["value"],
+                },
+              },
+            },
+          },
+          isFallback: false,
+        },
+        {
+          id: "fallback",
+          action: { type: "eventTypeRedirectUrl", value: "team/general-sales" },
+          isFallback: true,
+        },
+      ],
+      _count: {
+        responses: 892,
+      },
+    },
+    ...baseProps,
+  },
+};
+
+export const DisabledForm: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Inactive Form",
+      disabled: true,
+      description: "This form is currently disabled and not accepting responses",
+    },
+    ...baseProps,
+  },
+};
+
+export const NoResponsesYet: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Brand New Form",
+      description: "Just created, waiting for the first response",
+      _count: {
+        responses: 0,
+      },
+    },
+    ...baseProps,
+  },
+};
+
+export const MinimalForm: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Simple Contact Form",
+      description: null,
+      fields: [
+        {
+          id: "field1",
+          type: "text",
+          label: "Name",
+          required: true,
+        },
+        {
+          id: "field2",
+          type: "email",
+          label: "Email",
+          required: true,
+        },
+      ],
+      routes: [
+        {
+          id: "default",
+          action: { type: "eventTypeRedirectUrl", value: "team/general" },
+          isFallback: true,
+        },
+      ],
+      _count: {
+        responses: 23,
+      },
+    },
+    ...baseProps,
+  },
+};
+
+export const WithConnectedForms: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Multi-Form Router",
+      description: "Routes to other routing forms based on user selection",
+      connectedForms: [
+        { id: "form1", name: "Sales Qualification", description: "Qualify sales leads" },
+        { id: "form2", name: "Support Intake", description: "Technical support requests" },
+        { id: "form3", name: "Partnership Inquiry", description: "Partnership opportunities" },
+      ],
+      routers: [
+        { id: "router1", name: "Regional Router", description: "Routes by region" },
+      ],
+    },
+    ...baseProps,
+  },
+};
+
+export const WithTeamMembers: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Team Routing Form",
+      description: "Routes inquiries to available team members",
+      teamId: 10,
+      team: {
+        slug: "customer-success",
+        name: "Customer Success Team",
+      },
+      teamMembers: [
+        {
+          id: 1,
+          name: "Alice Johnson",
+          email: "alice@example.com",
+          avatarUrl: "https://i.pravatar.cc/150?img=1",
+          defaultScheduleId: 1,
+        },
+        {
+          id: 2,
+          name: "Bob Smith",
+          email: "bob@example.com",
+          avatarUrl: "https://i.pravatar.cc/150?img=2",
+          defaultScheduleId: 2,
+        },
+        {
+          id: 3,
+          name: "Carol Williams",
+          email: "carol@example.com",
+          avatarUrl: "https://i.pravatar.cc/150?img=3",
+          defaultScheduleId: 3,
+        },
+      ],
+    },
+    ...baseProps,
+  },
+};
+
+export const ReadOnlyPermissions: Story = {
+  args: {
+    form: baseMockForm,
+    appUrl: "/apps/routing-forms",
+    Page: MockPage,
+    enrichedWithUserProfileForm: baseProps.enrichedWithUserProfileForm,
+    permissions: {
+      canEditForm: false,
+      canDeleteForm: false,
+      canToggleForm: false,
+    },
+  },
+};
+
+export const PartialPermissions: Story = {
+  args: {
+    form: baseMockForm,
+    appUrl: "/apps/routing-forms",
+    Page: MockPage,
+    enrichedWithUserProfileForm: baseProps.enrichedWithUserProfileForm,
+    permissions: {
+      canEditForm: true,
+      canDeleteForm: false,
+      canToggleForm: true,
+    },
+  },
+};
+
+export const WithEmailNotifications: Story = {
+  args: {
+    form: {
+      ...baseMockForm,
+      name: "Form with Notifications",
+      settings: {
+        emailOwnerOnSubmission: true,
+        sendUpdatesTo: ["admin@example.com", "team@example.com"],
+      },
+    },
+    ...baseProps,
+  },
+};
diff --git a/apps/web/components/apps/routing-forms/TestForm.stories.tsx b/apps/web/components/apps/routing-forms/TestForm.stories.tsx
new file mode 100644
index 00000000000000..c3c399c4e545f9
--- /dev/null
+++ b/apps/web/components/apps/routing-forms/TestForm.stories.tsx
@@ -0,0 +1,360 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import type { RoutingForm } from "@calcom/app-store/routing-forms/types/types";
+
+import { TestForm } from "./TestForm";
+
+const meta = {
+  title: "Components/Apps/RoutingForms/TestForm",
+  component: TestForm,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+} satisfies Meta<typeof TestForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock routing form with basic fields
+const mockBasicForm: RoutingForm = {
+  id: "test-form-1",
+  name: "Contact Form",
+  description: "A simple contact routing form",
+  position: 0,
+  routes: [
+    {
+      id: "route-1",
+      action: {
+        type: "eventTypeRedirectUrl",
+        value: "https://cal.com/team/sales",
+        eventTypeId: 1,
+      },
+      queryValue: {
+        id: "query-1",
+        type: "group",
+      },
+      isFallback: false,
+    },
+  ],
+  fields: [
+    {
+      id: "field-1",
+      type: "text",
+      label: "Full Name",
+      identifier: "name",
+      required: true,
+      placeholder: "Enter your full name",
+      deleted: false,
+    },
+    {
+      id: "field-2",
+      type: "email",
+      label: "Email Address",
+      identifier: "email",
+      required: true,
+      placeholder: "you@example.com",
+      deleted: false,
+    },
+    {
+      id: "field-3",
+      type: "textarea",
+      label: "Message",
+      identifier: "message",
+      required: false,
+      placeholder: "Tell us how we can help",
+      deleted: false,
+    },
+  ],
+  settings: {
+    emailOwnerOnSubmission: false,
+    sendUpdatesTo: [],
+  },
+  disabled: false,
+  createdAt: "2024-01-01T00:00:00.000Z",
+  updatedAt: "2024-01-01T00:00:00.000Z",
+  userId: 1,
+  teamId: 1,
+  connectedForms: [],
+  routers: [],
+  teamMembers: [],
+  _count: {
+    responses: 0,
+  },
+};
+
+// Mock form with multiple choice fields
+const mockFormWithChoices: RoutingForm = {
+  ...mockBasicForm,
+  id: "test-form-2",
+  name: "Service Selection Form",
+  description: "Form with radio and select fields",
+  fields: [
+    {
+      id: "field-1",
+      type: "text",
+      label: "Company Name",
+      identifier: "company",
+      required: true,
+      placeholder: "Your company",
+      deleted: false,
+    },
+    {
+      id: "field-2",
+      type: "radio",
+      label: "Service Type",
+      identifier: "service_type",
+      required: true,
+      deleted: false,
+      options: [
+        { id: "opt-1", label: "Consulting", value: "consulting" },
+        { id: "opt-2", label: "Development", value: "development" },
+        { id: "opt-3", label: "Support", value: "support" },
+      ],
+    },
+    {
+      id: "field-3",
+      type: "select",
+      label: "Team Size",
+      identifier: "team_size",
+      required: true,
+      deleted: false,
+      options: [
+        { id: "size-1", label: "1-10", value: "small" },
+        { id: "size-2", label: "11-50", value: "medium" },
+        { id: "size-3", label: "51+", value: "large" },
+      ],
+    },
+  ],
+};
+
+// Mock form with multiselect
+const mockFormWithMultiSelect: RoutingForm = {
+  ...mockBasicForm,
+  id: "test-form-3",
+  name: "Interest Survey",
+  description: "Form with multiselect field",
+  fields: [
+    {
+      id: "field-1",
+      type: "text",
+      label: "Name",
+      identifier: "name",
+      required: true,
+      placeholder: "Your name",
+      deleted: false,
+    },
+    {
+      id: "field-2",
+      type: "multiselect",
+      label: "Areas of Interest",
+      identifier: "interests",
+      required: true,
+      deleted: false,
+      options: [
+        { id: "int-1", label: "Web Development", value: "web" },
+        { id: "int-2", label: "Mobile Apps", value: "mobile" },
+        { id: "int-3", label: "DevOps", value: "devops" },
+        { id: "int-4", label: "AI/ML", value: "ai" },
+      ],
+    },
+    {
+      id: "field-3",
+      type: "textarea",
+      label: "Additional Comments",
+      identifier: "comments",
+      required: false,
+      placeholder: "Any other information",
+      deleted: false,
+    },
+  ],
+};
+
+// Mock form with phone field
+const mockFormWithPhone: RoutingForm = {
+  ...mockBasicForm,
+  id: "test-form-4",
+  name: "Contact Details Form",
+  description: "Form with phone field",
+  fields: [
+    {
+      id: "field-1",
+      type: "text",
+      label: "Full Name",
+      identifier: "name",
+      required: true,
+      placeholder: "Enter your name",
+      deleted: false,
+    },
+    {
+      id: "field-2",
+      type: "email",
+      label: "Email",
+      identifier: "email",
+      required: true,
+      placeholder: "you@example.com",
+      deleted: false,
+    },
+    {
+      id: "field-3",
+      type: "phone",
+      label: "Phone Number",
+      identifier: "phone",
+      required: true,
+      placeholder: "+1 (555) 000-0000",
+      deleted: false,
+    },
+  ],
+};
+
+// Default story with basic form
+export const Default: Story = {
+  args: {
+    form: mockBasicForm,
+    supportsTeamMembersMatchingLogic: false,
+    isDialog: false,
+    showRRData: false,
+  },
+};
+
+// Story with form in dialog mode
+export const DialogMode: Story = {
+  args: {
+    form: mockBasicForm,
+    supportsTeamMembersMatchingLogic: false,
+    isDialog: true,
+    showRRData: false,
+  },
+};
+
+// Story with team members matching logic enabled
+export const WithTeamMembersMatching: Story = {
+  args: {
+    form: {
+      ...mockBasicForm,
+      team: {
+        id: 1,
+        name: "Sales Team",
+        slug: "sales",
+        parentId: 1,
+      },
+    },
+    supportsTeamMembersMatchingLogic: true,
+    isDialog: false,
+    showRRData: false,
+  },
+};
+
+// Story with multiple choice fields
+export const WithChoiceFields: Story = {
+  args: {
+    form: mockFormWithChoices,
+    supportsTeamMembersMatchingLogic: false,
+    isDialog: false,
+    showRRData: false,
+  },
+};
+
+// Story with multiselect field
+export const WithMultiSelectField: Story = {
+  args: {
+    form: mockFormWithMultiSelect,
+    supportsTeamMembersMatchingLogic: false,
+    isDialog: false,
+    showRRData: false,
+  },
+};
+
+// Story with phone field
+export const WithPhoneField: Story = {
+  args: {
+    form: mockFormWithPhone,
+    supportsTeamMembersMatchingLogic: false,
+    isDialog: false,
+    showRRData: false,
+  },
+};
+
+// Story showing round robin data
+export const ShowingRoundRobinData: Story = {
+  args: {
+    form: {
+      ...mockBasicForm,
+      team: {
+        id: 1,
+        name: "Support Team",
+        slug: "support",
+        parentId: 1,
+      },
+    },
+    supportsTeamMembersMatchingLogic: true,
+    isDialog: false,
+    showRRData: true,
+  },
+};
+
+// Story with custom footer renderer
+export const WithCustomFooter: Story = {
+  args: {
+    form: mockBasicForm,
+    supportsTeamMembersMatchingLogic: false,
+    isDialog: true,
+    showRRData: false,
+    renderFooter: (onClose, onSubmit, isValid) => (
+      <div className="flex gap-2 mt-4">
+        <button
+          onClick={onClose}
+          className="px-4 py-2 bg-gray-200 rounded hover:bg-gray-300">
+          Cancel
+        </button>
+        <button
+          onClick={onSubmit}
+          disabled={!isValid}
+          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed">
+          Submit Form
+        </button>
+      </div>
+    ),
+  },
+};
+
+// Story with all optional fields
+export const AllOptionalFields: Story = {
+  args: {
+    form: {
+      ...mockBasicForm,
+      fields: [
+        {
+          id: "field-1",
+          type: "text",
+          label: "Name (Optional)",
+          identifier: "name",
+          required: false,
+          placeholder: "Your name",
+          deleted: false,
+        },
+        {
+          id: "field-2",
+          type: "email",
+          label: "Email (Optional)",
+          identifier: "email",
+          required: false,
+          placeholder: "you@example.com",
+          deleted: false,
+        },
+        {
+          id: "field-3",
+          type: "textarea",
+          label: "Comments (Optional)",
+          identifier: "comments",
+          required: false,
+          placeholder: "Any feedback",
+          deleted: false,
+        },
+      ],
+    },
+    supportsTeamMembersMatchingLogic: false,
+    isDialog: false,
+    showRRData: false,
+  },
+};
diff --git a/apps/web/components/apps/sendgrid/Setup.stories.tsx b/apps/web/components/apps/sendgrid/Setup.stories.tsx
new file mode 100644
index 00000000000000..e0ac3c1d0d542a
--- /dev/null
+++ b/apps/web/components/apps/sendgrid/Setup.stories.tsx
@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import SendgridSetup from "./Setup";
+
+const meta = {
+  title: "Apps/Sendgrid/Setup",
+  component: SendgridSetup,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-screen h-screen">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SendgridSetup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/sendgrid/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const WithApiKeyInput: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/sendgrid/setup",
+        query: {},
+      },
+    },
+  },
+};
+
+export const TestApiKeySuccess: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/sendgrid/setup",
+        query: {},
+        push: (url: string) => console.log("Navigate to:", url),
+      },
+    },
+    mockData: [
+      {
+        url: "/api/integrations/sendgrid/check",
+        method: "POST",
+        status: 200,
+        response: {},
+      },
+    ],
+  },
+};
+
+export const TestApiKeyFailed: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/sendgrid/setup",
+        query: {},
+        push: (url: string) => console.log("Navigate to:", url),
+      },
+    },
+    mockData: [
+      {
+        url: "/api/integrations/sendgrid/check",
+        method: "POST",
+        status: 401,
+        response: {
+          message: "Invalid API key",
+        },
+      },
+    ],
+  },
+};
+
+export const SaveApiKeySuccess: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/sendgrid/setup",
+        query: {},
+        push: (url: string) => console.log("Navigate to:", url),
+      },
+    },
+    mockData: [
+      {
+        url: "/api/integrations/sendgrid/add",
+        method: "POST",
+        status: 200,
+        response: {
+          url: "/apps/installed/messaging",
+        },
+      },
+    ],
+  },
+};
+
+export const SaveApiKeyError: Story = {
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/sendgrid/setup",
+        query: {},
+        push: (url: string) => console.log("Navigate to:", url),
+      },
+    },
+    mockData: [
+      {
+        url: "/api/integrations/sendgrid/add",
+        method: "POST",
+        status: 400,
+        response: {
+          message: "Failed to save API key. Please try again.",
+        },
+      },
+    ],
+  },
+};
+
+export const DarkMode: Story = {
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+    theme: "dark",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps/sendgrid/setup",
+        query: {},
+      },
+    },
+  },
+};
diff --git a/apps/web/components/apps/wipemycalother/ConfirmDialog.stories.tsx b/apps/web/components/apps/wipemycalother/ConfirmDialog.stories.tsx
new file mode 100644
index 00000000000000..9843373cb4ae3a
--- /dev/null
+++ b/apps/web/components/apps/wipemycalother/ConfirmDialog.stories.tsx
@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+import { useState } from "react";
+
+import { Button } from "@calcom/ui/components/button";
+
+import { ConfirmDialog } from "./ConfirmDialog";
+
+const meta = {
+  title: "Components/Apps/WipeMyCalOther/ConfirmDialog",
+  component: ConfirmDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    isOpenDialog: {
+      control: "boolean",
+      description: "Controls whether the dialog is open or closed",
+    },
+    setIsOpenDialog: {
+      description: "Function to set the dialog open state",
+    },
+  },
+} satisfies Meta<typeof ConfirmDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Helper component to manage dialog state
+const DialogWrapper = ({ initialOpen = false }: { initialOpen?: boolean }) => {
+  const [isOpen, setIsOpen] = useState(initialOpen);
+
+  return (
+    <div>
+      <Button onClick={() => setIsOpen(true)}>Wipe My Calendar</Button>
+      <ConfirmDialog isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <DialogWrapper initialOpen={true} />,
+};
+
+export const ClosedState: Story = {
+  render: () => <DialogWrapper initialOpen={false} />,
+};
+
+export const WithTriggerButton: Story = {
+  render: () => <DialogWrapper />,
+  parameters: {
+    docs: {
+      description: {
+        story: "Click the button to open the dialog",
+      },
+    },
+  },
+};
diff --git a/apps/web/components/auth/BackupCode.stories.tsx b/apps/web/components/auth/BackupCode.stories.tsx
new file mode 100644
index 00000000000000..445c52e8ee2305
--- /dev/null
+++ b/apps/web/components/auth/BackupCode.stories.tsx
@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { FormProvider, useForm } from "react-hook-form";
+
+import BackupCode from "./BackupCode";
+
+const meta: Meta<typeof BackupCode> = {
+  title: "Components/Auth/BackupCode",
+  component: BackupCode,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => {
+      const methods = useForm({
+        defaultValues: {
+          backupCode: "",
+        },
+      });
+      return (
+        <FormProvider {...methods}>
+          <Story />
+        </FormProvider>
+      );
+    },
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof BackupCode>;
+
+export const Default: Story = {};
+
+export const Centered: Story = {
+  args: {
+    center: true,
+  },
+};
+
+export const NotCentered: Story = {
+  args: {
+    center: false,
+  },
+};
diff --git a/apps/web/components/auth/TwoFactor.stories.tsx b/apps/web/components/auth/TwoFactor.stories.tsx
new file mode 100644
index 00000000000000..1533d4b5b7464e
--- /dev/null
+++ b/apps/web/components/auth/TwoFactor.stories.tsx
@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { FormProvider, useForm } from "react-hook-form";
+
+import TwoFactor from "./TwoFactor";
+
+const meta: Meta<typeof TwoFactor> = {
+  title: "Components/Auth/TwoFactor",
+  component: TwoFactor,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => {
+      const methods = useForm({
+        defaultValues: {
+          totpCode: "",
+        },
+      });
+      return (
+        <FormProvider {...methods}>
+          <Story />
+        </FormProvider>
+      );
+    },
+  ],
+  argTypes: {
+    center: {
+      control: "boolean",
+      description: "Whether to center the component horizontally",
+    },
+    autoFocus: {
+      control: "boolean",
+      description: "Whether to auto-focus the first input on mount",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TwoFactor>;
+
+export const Default: Story = {};
+
+export const Centered: Story = {
+  args: {
+    center: true,
+  },
+};
+
+export const NotCentered: Story = {
+  args: {
+    center: false,
+  },
+};
+
+export const WithAutoFocus: Story = {
+  args: {
+    autoFocus: true,
+  },
+};
+
+export const WithoutAutoFocus: Story = {
+  args: {
+    autoFocus: false,
+  },
+};
diff --git a/apps/web/components/booking/CancelBooking.stories.tsx b/apps/web/components/booking/CancelBooking.stories.tsx
new file mode 100644
index 00000000000000..9bca4fc1dd6370
--- /dev/null
+++ b/apps/web/components/booking/CancelBooking.stories.tsx
@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import CancelBooking from "./CancelBooking";
+
+const meta = {
+  title: "Components/Booking/CancelBooking",
+  component: CancelBooking,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof CancelBooking>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const baseBooking = {
+  title: "Team Meeting",
+  uid: "booking-uid-123",
+  id: 1,
+  startTime: new Date("2025-12-30T10:00:00Z"),
+};
+
+const baseProfile = {
+  name: "John Doe",
+  slug: "john-doe",
+};
+
+const baseBookingCancelledEventProps = {
+  booking: {
+    id: 1,
+    uid: "booking-uid-123",
+    title: "Team Meeting",
+  },
+  organizer: {
+    name: "John Doe",
+    email: "john@example.com",
+    timeZone: "America/New_York",
+  },
+  eventType: {
+    title: "Team Meeting",
+    length: 30,
+  },
+};
+
+export const Default: Story = {
+  args: {
+    booking: baseBooking,
+    profile: baseProfile,
+    recurringEvent: null,
+    team: null,
+    setIsCancellationMode: () => {},
+    theme: "light",
+    allRemainingBookings: false,
+    currentUserEmail: "user@example.com",
+    bookingCancelledEventProps: baseBookingCancelledEventProps,
+    isHost: false,
+    internalNotePresets: [],
+    renderContext: "booking-single-view",
+    eventTypeMetadata: null,
+  },
+};
+
+export const DialogContext: Story = {
+  args: {
+    ...Default.args,
+    renderContext: "dialog",
+  },
+};
+
+export const HostCancelling: Story = {
+  args: {
+    ...Default.args,
+    isHost: true,
+    currentUserEmail: "john@example.com",
+  },
+};
+
+export const HostWithInternalNotePresets: Story = {
+  args: {
+    ...Default.args,
+    isHost: true,
+    currentUserEmail: "john@example.com",
+    internalNotePresets: [
+      {
+        id: 1,
+        name: "No show",
+        cancellationReason: "Attendee did not show up for the meeting",
+      },
+      {
+        id: 2,
+        name: "Rescheduled",
+        cancellationReason: "Meeting was rescheduled to a different time",
+      },
+      {
+        id: 3,
+        name: "Technical issues",
+        cancellationReason: "Unable to proceed due to technical difficulties",
+      },
+    ],
+  },
+};
+
+export const WithPayment: Story = {
+  args: {
+    ...Default.args,
+    booking: {
+      ...baseBooking,
+      payment: {
+        amount: 5000, // $50.00 in cents
+        currency: "USD",
+        appId: "stripe",
+      },
+    },
+  },
+};
+
+export const WithNoShowFee: Story = {
+  args: {
+    ...Default.args,
+    booking: {
+      ...baseBooking,
+      startTime: new Date(Date.now() + 1000 * 60 * 30), // 30 minutes from now
+      payment: {
+        amount: 5000, // $50.00 in cents
+        currency: "USD",
+        appId: "stripe",
+      },
+    },
+    eventTypeMetadata: {
+      apps: {
+        stripe: {
+          autoChargeNoShowFeeTimeValue: 24,
+          autoChargeNoShowFeeTimeUnit: "hours",
+          autoChargeNoShowFee: true,
+        },
+      },
+    },
+  },
+};
+
+export const RecurringBooking: Story = {
+  args: {
+    ...Default.args,
+    allRemainingBookings: true,
+    recurringEvent: {
+      freq: 2, // WEEKLY
+      count: 10,
+      interval: 1,
+    },
+  },
+};
+
+export const WithTeam: Story = {
+  args: {
+    ...Default.args,
+    team: "Engineering Team",
+    teamId: 42,
+  },
+};
+
+export const SeatReservation: Story = {
+  args: {
+    ...Default.args,
+    seatReferenceUid: "seat-ref-uid-456",
+  },
+};
+
+export const AlreadyCancelled: Story = {
+  args: {
+    ...Default.args,
+    booking: {
+      ...baseBooking,
+      uid: undefined,
+    },
+  },
+};
+
+export const WithErrorAsToast: Story = {
+  args: {
+    ...Default.args,
+    showErrorAsToast: true,
+  },
+};
+
+export const ComplexScenario: Story = {
+  args: {
+    ...Default.args,
+    isHost: true,
+    currentUserEmail: "john@example.com",
+    team: "Sales Team",
+    teamId: 123,
+    internalNotePresets: [
+      {
+        id: 1,
+        name: "Client requested reschedule",
+        cancellationReason: "Client needs to reschedule to next week",
+      },
+      {
+        id: 2,
+        name: "Emergency",
+        cancellationReason: "Unexpected emergency arose",
+      },
+    ],
+    booking: {
+      ...baseBooking,
+      payment: {
+        amount: 10000, // $100.00 in cents
+        currency: "USD",
+        appId: "stripe",
+      },
+    },
+    recurringEvent: {
+      freq: 2, // WEEKLY
+      count: 5,
+      interval: 1,
+    },
+    allRemainingBookings: true,
+  },
+};
diff --git a/apps/web/components/booking/actions/BookingActionsDropdown.stories.tsx b/apps/web/components/booking/actions/BookingActionsDropdown.stories.tsx
new file mode 100644
index 00000000000000..c8a303b36d0921
--- /dev/null
+++ b/apps/web/components/booking/actions/BookingActionsDropdown.stories.tsx
@@ -0,0 +1,412 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { BookingActionsDropdown } from "./BookingActionsDropdown";
+import { BookingActionsStoreProvider } from "./BookingActionsStoreProvider";
+import type { BookingItemProps } from "../types";
+
+// Mock booking data factory
+const createMockBooking = (overrides?: Partial<BookingItemProps>): BookingItemProps => ({
+  id: 1,
+  uid: "booking-uid-123",
+  title: "30 Min Meeting",
+  description: "A quick meeting to discuss the project",
+  startTime: new Date("2025-12-24T10:00:00Z"),
+  endTime: new Date("2025-12-24T10:30:00Z"),
+  status: "ACCEPTED",
+  paid: false,
+  payment: [],
+  attendees: [
+    {
+      id: 1,
+      name: "John Doe",
+      email: "john@example.com",
+      timeZone: "America/New_York",
+      locale: "en",
+      noShow: false,
+      phoneNumber: null,
+    },
+  ],
+  user: {
+    id: 1,
+    name: "Jane Smith",
+    email: "jane@example.com",
+    username: "janesmith",
+    timeZone: "America/Los_Angeles",
+  },
+  userPrimaryEmail: "jane@example.com",
+  eventType: {
+    id: 1,
+    title: "30 Min Meeting",
+    slug: "30min",
+    length: 30,
+    recurringEvent: null,
+    team: null,
+    parentId: null,
+    disableCancelling: false,
+    disableRescheduling: false,
+    metadata: null,
+    schedulingType: null,
+  },
+  location: "integrations:daily",
+  recurringEventId: null,
+  fromReschedule: null,
+  seatsReferences: [],
+  metadata: null,
+  routedFromRoutingFormReponse: null,
+  isRecorded: false,
+  listingStatus: "upcoming",
+  recurringInfo: undefined,
+  loggedInUser: {
+    userId: 1,
+    userTimeZone: "America/Los_Angeles",
+    userTimeFormat: 12,
+    userEmail: "jane@example.com",
+  },
+  isToday: false,
+  ...overrides,
+});
+
+const meta = {
+  component: BookingActionsDropdown,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <BookingActionsStoreProvider>
+        <Story />
+      </BookingActionsStoreProvider>
+    ),
+  ],
+} satisfies Meta<typeof BookingActionsDropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    booking: createMockBooking(),
+    context: "list",
+  },
+};
+
+export const DetailsContext: Story = {
+  args: {
+    booking: createMockBooking({
+      status: "PENDING",
+    }),
+    context: "details",
+  },
+};
+
+export const PendingBooking: Story = {
+  args: {
+    booking: createMockBooking({
+      status: "PENDING",
+      listingStatus: "unconfirmed",
+    }),
+    context: "details",
+  },
+};
+
+export const CancelledBooking: Story = {
+  args: {
+    booking: createMockBooking({
+      status: "CANCELLED",
+    }),
+    context: "list",
+  },
+};
+
+export const RejectedBooking: Story = {
+  args: {
+    booking: createMockBooking({
+      status: "REJECTED",
+    }),
+    context: "list",
+  },
+};
+
+export const PastBooking: Story = {
+  args: {
+    booking: createMockBooking({
+      startTime: new Date("2025-12-20T10:00:00Z"),
+      endTime: new Date("2025-12-20T10:30:00Z"),
+    }),
+    context: "list",
+  },
+};
+
+export const RecurringBooking: Story = {
+  args: {
+    booking: createMockBooking({
+      recurringEventId: "recurring-123",
+      listingStatus: "recurring",
+      eventType: {
+        id: 1,
+        title: "Weekly Standup",
+        slug: "weekly-standup",
+        length: 30,
+        recurringEvent: {
+          freq: 2,
+          count: 12,
+          interval: 1,
+        },
+        team: null,
+        parentId: null,
+        disableCancelling: false,
+        disableRescheduling: false,
+        metadata: null,
+        schedulingType: null,
+      },
+    }),
+    context: "list",
+  },
+};
+
+export const WithPayment: Story = {
+  args: {
+    booking: createMockBooking({
+      paid: true,
+      payment: [
+        {
+          id: 1,
+          success: true,
+          amount: 5000,
+          currency: "USD",
+          paymentOption: "ON_BOOKING",
+        },
+      ],
+    }),
+    context: "list",
+  },
+};
+
+export const WithPendingPayment: Story = {
+  args: {
+    booking: createMockBooking({
+      paid: false,
+      payment: [
+        {
+          id: 1,
+          success: false,
+          amount: 5000,
+          currency: "USD",
+          paymentOption: "ON_BOOKING",
+        },
+      ],
+    }),
+    context: "list",
+  },
+};
+
+export const TeamBooking: Story = {
+  args: {
+    booking: createMockBooking({
+      eventType: {
+        id: 1,
+        title: "Team Meeting",
+        slug: "team-meeting",
+        length: 60,
+        recurringEvent: null,
+        team: {
+          id: 1,
+          name: "Engineering Team",
+          slug: "engineering",
+        },
+        parentId: null,
+        disableCancelling: false,
+        disableRescheduling: false,
+        metadata: null,
+        schedulingType: "COLLECTIVE",
+      },
+    }),
+    context: "list",
+  },
+};
+
+export const DisabledCancelling: Story = {
+  args: {
+    booking: createMockBooking({
+      eventType: {
+        id: 1,
+        title: "Important Meeting",
+        slug: "important-meeting",
+        length: 30,
+        recurringEvent: null,
+        team: null,
+        parentId: null,
+        disableCancelling: true,
+        disableRescheduling: false,
+        metadata: null,
+        schedulingType: null,
+      },
+    }),
+    context: "list",
+  },
+};
+
+export const DisabledRescheduling: Story = {
+  args: {
+    booking: createMockBooking({
+      eventType: {
+        id: 1,
+        title: "Fixed Time Meeting",
+        slug: "fixed-time-meeting",
+        length: 30,
+        recurringEvent: null,
+        team: null,
+        parentId: null,
+        disableCancelling: false,
+        disableRescheduling: true,
+        metadata: null,
+        schedulingType: null,
+      },
+    }),
+    context: "list",
+  },
+};
+
+export const WithRecordings: Story = {
+  args: {
+    booking: createMockBooking({
+      isRecorded: true,
+      startTime: new Date("2025-12-20T10:00:00Z"),
+      endTime: new Date("2025-12-20T10:30:00Z"),
+    }),
+    context: "list",
+  },
+};
+
+export const MultipleAttendees: Story = {
+  args: {
+    booking: createMockBooking({
+      attendees: [
+        {
+          id: 1,
+          name: "John Doe",
+          email: "john@example.com",
+          timeZone: "America/New_York",
+          locale: "en",
+          noShow: false,
+          phoneNumber: "+1234567890",
+        },
+        {
+          id: 2,
+          name: "Jane Smith",
+          email: "jane@example.com",
+          timeZone: "America/Los_Angeles",
+          locale: "en",
+          noShow: false,
+          phoneNumber: "+0987654321",
+        },
+        {
+          id: 3,
+          name: "Bob Johnson",
+          email: "bob@example.com",
+          timeZone: "Europe/London",
+          locale: "en",
+          noShow: false,
+          phoneNumber: null,
+        },
+      ],
+    }),
+    context: "list",
+  },
+};
+
+export const RescheduledBooking: Story = {
+  args: {
+    booking: createMockBooking({
+      fromReschedule: "original-booking-uid",
+    }),
+    context: "list",
+  },
+};
+
+export const RoutingFormBooking: Story = {
+  args: {
+    booking: createMockBooking({
+      routedFromRoutingFormReponse: {
+        id: 1,
+        formId: "form-123",
+      },
+      eventType: {
+        id: 1,
+        title: "Sales Call",
+        slug: "sales-call",
+        length: 30,
+        recurringEvent: null,
+        team: {
+          id: 1,
+          name: "Sales Team",
+          slug: "sales",
+        },
+        parentId: null,
+        disableCancelling: false,
+        disableRescheduling: false,
+        metadata: null,
+        schedulingType: null,
+      },
+    }),
+    context: "list",
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    booking: createMockBooking(),
+    context: "list",
+    size: "xs",
+  },
+};
+
+export const LargeSize: Story = {
+  args: {
+    booking: createMockBooking(),
+    context: "list",
+    size: "lg",
+  },
+};
+
+export const WithoutPortal: Story = {
+  args: {
+    booking: createMockBooking(),
+    context: "list",
+    usePortal: false,
+  },
+};
+
+export const CustomClassName: Story = {
+  args: {
+    booking: createMockBooking(),
+    context: "list",
+    className: "bg-brand-default hover:bg-brand-emphasis",
+  },
+};
+
+export const AsAttendee: Story = {
+  args: {
+    booking: createMockBooking({
+      seatsReferences: [
+        {
+          id: 1,
+          referenceUid: "seat-ref-123",
+          attendee: {
+            id: 1,
+            email: "jane@example.com",
+            name: "Jane Smith",
+          },
+        },
+      ],
+      loggedInUser: {
+        userId: 2,
+        userTimeZone: "America/Los_Angeles",
+        userTimeFormat: 12,
+        userEmail: "jane@example.com",
+      },
+    }),
+    context: "list",
+  },
+};
diff --git a/apps/web/components/dialog/AddGuestsDialog.stories.tsx b/apps/web/components/dialog/AddGuestsDialog.stories.tsx
new file mode 100644
index 00000000000000..ca709105f1fc04
--- /dev/null
+++ b/apps/web/components/dialog/AddGuestsDialog.stories.tsx
@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { AddGuestsDialog } from "./AddGuestsDialog";
+
+const meta = {
+  title: "Components/Dialog/AddGuestsDialog",
+  component: AddGuestsDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen w-screen flex items-center justify-center">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AddGuestsDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper component to handle state
+const AddGuestsDialogWithState = (args: { isOpenDialog: boolean; bookingId: number }) => {
+  const [isOpenDialog, setIsOpenDialog] = useState(args.isOpenDialog);
+
+  return <AddGuestsDialog isOpenDialog={isOpenDialog} setIsOpenDialog={setIsOpenDialog} bookingId={args.bookingId} />;
+};
+
+/**
+ * Default state of the AddGuestsDialog component.
+ * The dialog is open and ready for adding guests to a booking.
+ */
+export const Default: Story = {
+  render: (args) => <AddGuestsDialogWithState {...args} />,
+  args: {
+    isOpenDialog: true,
+    bookingId: 123,
+  },
+};
+
+/**
+ * Dialog in a closed state.
+ * Click the trigger or set isOpenDialog to true to open it.
+ */
+export const Closed: Story = {
+  render: (args) => {
+    const [isOpenDialog, setIsOpenDialog] = useState(false);
+
+    return (
+      <div>
+        <button
+          onClick={() => setIsOpenDialog(true)}
+          className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+        >
+          Open Add Guests Dialog
+        </button>
+        <AddGuestsDialog
+          isOpenDialog={isOpenDialog}
+          setIsOpenDialog={setIsOpenDialog}
+          bookingId={args.bookingId || 123}
+        />
+      </div>
+    );
+  },
+  args: {
+    bookingId: 123,
+  },
+};
+
+/**
+ * Dialog with a different booking ID.
+ * Shows the dialog configured for a different booking.
+ */
+export const DifferentBooking: Story = {
+  render: (args) => <AddGuestsDialogWithState {...args} />,
+  args: {
+    isOpenDialog: true,
+    bookingId: 456,
+  },
+};
+
+/**
+ * Interactive example with controlled state.
+ * Demonstrates full interaction flow with state management.
+ */
+export const Interactive: Story = {
+  render: () => {
+    const [isOpenDialog, setIsOpenDialog] = useState(false);
+    const [bookingId] = useState(789);
+
+    return (
+      <div className="space-y-4">
+        <div className="text-center">
+          <p className="text-sm text-gray-600 mb-2">Booking ID: {bookingId}</p>
+          <button
+            onClick={() => setIsOpenDialog(true)}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Add Guests to Booking
+          </button>
+        </div>
+        <AddGuestsDialog
+          isOpenDialog={isOpenDialog}
+          setIsOpenDialog={setIsOpenDialog}
+          bookingId={bookingId}
+        />
+      </div>
+    );
+  },
+};
diff --git a/apps/web/components/dialog/CancelBookingDialog.stories.tsx b/apps/web/components/dialog/CancelBookingDialog.stories.tsx
new file mode 100644
index 00000000000000..a87b40f36de759
--- /dev/null
+++ b/apps/web/components/dialog/CancelBookingDialog.stories.tsx
@@ -0,0 +1,252 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { CancelBookingDialog } from "./CancelBookingDialog";
+
+const meta = {
+  title: "Components/Dialog/CancelBookingDialog",
+  component: CancelBookingDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[600px] min-w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof CancelBookingDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const CancelBookingDialogWrapper = (args: React.ComponentProps<typeof CancelBookingDialog>) => {
+  const [isOpen, setIsOpen] = useState(args.isOpenDialog);
+
+  return <CancelBookingDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />;
+};
+
+export const Default: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    isOpenDialog: true,
+    booking: {
+      uid: "booking-uid-123",
+      id: 1,
+      title: "30 Min Meeting",
+      startTime: new Date("2025-12-25T10:00:00Z"),
+    },
+    profile: {
+      name: "John Doe",
+      slug: "john-doe",
+    },
+    recurringEvent: null,
+    team: null,
+    teamId: undefined,
+    allRemainingBookings: false,
+    seatReferenceUid: undefined,
+    currentUserEmail: "user@example.com",
+    bookingCancelledEventProps: {
+      booking: {},
+      organizer: {
+        name: "John Doe",
+        email: "john@example.com",
+        timeZone: "America/New_York",
+      },
+      eventType: {},
+    },
+    isHost: true,
+    internalNotePresets: [],
+    eventTypeMetadata: null,
+  },
+};
+
+export const WithPayment: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-456",
+      id: 2,
+      title: "Consultation - 1 Hour",
+      startTime: new Date("2025-12-26T14:00:00Z"),
+      payment: [
+        {
+          amount: 5000,
+          currency: "USD",
+          success: true,
+          paymentOption: "stripe",
+          appId: "stripe",
+          refunded: false,
+        },
+      ],
+    },
+  },
+};
+
+export const RecurringEvent: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-789",
+      id: 3,
+      title: "Weekly Standup",
+      startTime: new Date("2025-12-24T09:00:00Z"),
+    },
+    recurringEvent: {
+      freq: 2,
+      count: 12,
+      interval: 1,
+    },
+    allRemainingBookings: false,
+  },
+};
+
+export const CancelAllRemaining: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-101",
+      id: 4,
+      title: "Weekly Standup",
+      startTime: new Date("2025-12-24T09:00:00Z"),
+    },
+    recurringEvent: {
+      freq: 2,
+      count: 12,
+      interval: 1,
+    },
+    allRemainingBookings: true,
+  },
+};
+
+export const TeamBooking: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-202",
+      id: 5,
+      title: "Team Discovery Call",
+      startTime: new Date("2025-12-27T15:00:00Z"),
+    },
+    team: "engineering-team",
+    teamId: 100,
+    profile: {
+      name: "Engineering Team",
+      slug: "engineering-team",
+    },
+  },
+};
+
+export const WithInternalNotePresets: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-303",
+      id: 6,
+      title: "Sales Call",
+      startTime: new Date("2025-12-28T11:00:00Z"),
+    },
+    internalNotePresets: [
+      { id: 1, name: "No Show", cancellationReason: "Attendee did not show up" },
+      { id: 2, name: "Rescheduled", cancellationReason: "Meeting was rescheduled" },
+      { id: 3, name: "Client Request", cancellationReason: "Cancelled at client's request" },
+    ],
+  },
+};
+
+export const AsGuest: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-404",
+      id: 7,
+      title: "Interview - Frontend Engineer",
+      startTime: new Date("2025-12-29T16:00:00Z"),
+    },
+    isHost: false,
+    currentUserEmail: "guest@example.com",
+  },
+};
+
+export const WithSeatReference: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-505",
+      id: 8,
+      title: "Group Workshop - Design Systems",
+      startTime: new Date("2025-12-30T13:00:00Z"),
+    },
+    seatReferenceUid: "seat-ref-abc-123",
+  },
+};
+
+export const WithEventTypeMetadata: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-606",
+      id: 9,
+      title: "Custom Event",
+      startTime: new Date("2025-12-31T10:00:00Z"),
+    },
+    eventTypeMetadata: {
+      customField1: "value1",
+      customField2: "value2",
+      requiresConfirmation: true,
+    },
+  },
+};
+
+export const ComplexScenario: Story = {
+  render: (args) => <CancelBookingDialogWrapper {...args} />,
+  args: {
+    ...Default.args,
+    booking: {
+      uid: "booking-uid-707",
+      id: 10,
+      title: "Enterprise Consultation",
+      startTime: new Date("2026-01-02T14:00:00Z"),
+      payment: [
+        {
+          amount: 25000,
+          currency: "USD",
+          success: true,
+          paymentOption: "stripe",
+          appId: "stripe",
+          refunded: false,
+        },
+      ],
+    },
+    profile: {
+      name: "Premium Consulting Team",
+      slug: "premium-consulting",
+    },
+    team: "premium-consulting",
+    teamId: 200,
+    recurringEvent: {
+      freq: 2,
+      count: 4,
+      interval: 1,
+    },
+    internalNotePresets: [
+      { id: 1, name: "No Show", cancellationReason: "Attendee did not show up" },
+      { id: 2, name: "Rescheduled", cancellationReason: "Meeting was rescheduled" },
+    ],
+    eventTypeMetadata: {
+      requiresConfirmation: true,
+      priority: "high",
+    },
+    isHost: true,
+  },
+};
diff --git a/apps/web/components/dialog/ChargeCardDialog.stories.tsx b/apps/web/components/dialog/ChargeCardDialog.stories.tsx
new file mode 100644
index 00000000000000..3a3d6fd5494d68
--- /dev/null
+++ b/apps/web/components/dialog/ChargeCardDialog.stories.tsx
@@ -0,0 +1,110 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { ChargeCardDialog } from "./ChargeCardDialog";
+
+const meta = {
+  title: "Components/Dialog/ChargeCardDialog",
+  component: ChargeCardDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ChargeCardDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Default story with controlled state
+export const Default: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    return <ChargeCardDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />;
+  },
+  args: {
+    bookingId: 12345,
+    paymentAmount: 5000, // $50.00 in cents
+    paymentCurrency: "USD",
+  },
+};
+
+// Story showing EUR currency
+export const EuroCurrency: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    return <ChargeCardDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />;
+  },
+  args: {
+    bookingId: 12346,
+    paymentAmount: 7500, // €75.00 in cents
+    paymentCurrency: "EUR",
+  },
+};
+
+// Story showing GBP currency
+export const PoundCurrency: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    return <ChargeCardDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />;
+  },
+  args: {
+    bookingId: 12347,
+    paymentAmount: 10000, // £100.00 in cents
+    paymentCurrency: "GBP",
+  },
+};
+
+// Story showing a small amount
+export const SmallAmount: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    return <ChargeCardDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />;
+  },
+  args: {
+    bookingId: 12348,
+    paymentAmount: 999, // $9.99 in cents
+    paymentCurrency: "USD",
+  },
+};
+
+// Story showing a large amount
+export const LargeAmount: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    return <ChargeCardDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />;
+  },
+  args: {
+    bookingId: 12349,
+    paymentAmount: 250000, // $2,500.00 in cents
+    paymentCurrency: "USD",
+  },
+};
+
+// Story demonstrating closed state
+export const Closed: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <button
+          onClick={() => setIsOpen(true)}
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+          Open Dialog
+        </button>
+        <ChargeCardDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />
+      </>
+    );
+  },
+  args: {
+    bookingId: 12350,
+    paymentAmount: 5000,
+    paymentCurrency: "USD",
+  },
+};
diff --git a/apps/web/components/dialog/EditLocationDialog.stories.tsx b/apps/web/components/dialog/EditLocationDialog.stories.tsx
new file mode 100644
index 00000000000000..78e693d4c65da0
--- /dev/null
+++ b/apps/web/components/dialog/EditLocationDialog.stories.tsx
@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+import { useState } from "react";
+
+import { LocationType } from "@calcom/app-store/locations";
+
+import { EditLocationDialog } from "./EditLocationDialog";
+
+const meta = {
+  title: "Components/Dialog/EditLocationDialog",
+  component: EditLocationDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100vw", height: "100vh" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof EditLocationDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper component to manage dialog state
+const DialogWrapper = (args: any) => {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <EditLocationDialog
+      {...args}
+      isOpenDialog={isOpen}
+      setShowLocationModal={setIsOpen}
+      saveLocation={async (data) => {
+        console.log("Saving location:", data);
+        args.saveLocation?.(data);
+      }}
+    />
+  );
+};
+
+export const Default: Story = {
+  args: {
+    saveLocation: fn(),
+    booking: {
+      location: "integrations:zoom",
+    },
+    isOpenDialog: true,
+    setShowLocationModal: fn(),
+    setSelectedLocation: fn(),
+    setEditingLocationType: fn(),
+  },
+  render: (args) => <DialogWrapper {...args} />,
+};
+
+export const WithPhoneLocation: Story = {
+  args: {
+    saveLocation: fn(),
+    booking: {
+      location: "+1234567890",
+    },
+    isOpenDialog: true,
+    setShowLocationModal: fn(),
+    setSelectedLocation: fn(),
+    setEditingLocationType: fn(),
+  },
+  render: (args) => <DialogWrapper {...args} />,
+};
+
+export const WithInPersonLocation: Story = {
+  args: {
+    saveLocation: fn(),
+    booking: {
+      location: "123 Main St, New York, NY 10001",
+    },
+    defaultValues: [
+      {
+        type: LocationType.InPerson,
+        address: "123 Main St, New York, NY 10001",
+        displayLocationPublicly: true,
+      },
+    ],
+    isOpenDialog: true,
+    setShowLocationModal: fn(),
+    setSelectedLocation: fn(),
+    setEditingLocationType: fn(),
+  },
+  render: (args) => <DialogWrapper {...args} />,
+};
+
+export const WithGoogleMeet: Story = {
+  args: {
+    saveLocation: fn(),
+    booking: {
+      location: "integrations:google:meet",
+    },
+    isOpenDialog: true,
+    setShowLocationModal: fn(),
+    setSelectedLocation: fn(),
+    setEditingLocationType: fn(),
+  },
+  render: (args) => <DialogWrapper {...args} />,
+};
+
+export const WithLink: Story = {
+  args: {
+    saveLocation: fn(),
+    booking: {
+      location: "https://example.com/meeting",
+    },
+    defaultValues: [
+      {
+        type: LocationType.Link,
+        link: "https://example.com/meeting",
+      },
+    ],
+    isOpenDialog: true,
+    setShowLocationModal: fn(),
+    setSelectedLocation: fn(),
+    setEditingLocationType: fn(),
+  },
+  render: (args) => <DialogWrapper {...args} />,
+};
+
+export const WithTeamId: Story = {
+  args: {
+    saveLocation: fn(),
+    booking: {
+      location: "integrations:zoom",
+    },
+    teamId: 123,
+    isOpenDialog: true,
+    setShowLocationModal: fn(),
+    setSelectedLocation: fn(),
+    setEditingLocationType: fn(),
+  },
+  render: (args) => <DialogWrapper {...args} />,
+};
+
+export const WithPreselectedLocation: Story = {
+  args: {
+    saveLocation: fn(),
+    booking: {
+      location: "integrations:zoom",
+    },
+    selection: {
+      label: "Zoom Video",
+      value: "integrations:zoom",
+      credentialId: 456,
+    },
+    isOpenDialog: true,
+    setShowLocationModal: fn(),
+    setSelectedLocation: fn(),
+    setEditingLocationType: fn(),
+  },
+  render: (args) => <DialogWrapper {...args} />,
+};
+
+export const NoCurrentLocation: Story = {
+  args: {
+    saveLocation: fn(),
+    booking: {
+      location: null,
+    },
+    isOpenDialog: true,
+    setShowLocationModal: fn(),
+    setSelectedLocation: fn(),
+    setEditingLocationType: fn(),
+  },
+  render: (args) => <DialogWrapper {...args} />,
+};
diff --git a/apps/web/components/dialog/ReassignDialog.stories.tsx b/apps/web/components/dialog/ReassignDialog.stories.tsx
new file mode 100644
index 00000000000000..c7aa77ae900404
--- /dev/null
+++ b/apps/web/components/dialog/ReassignDialog.stories.tsx
@@ -0,0 +1,151 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { ReassignDialog } from "./ReassignDialog";
+
+const meta = {
+  title: "Components/Dialog/ReassignDialog",
+  component: ReassignDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "A dialog component for reassigning bookings to different team members. Supports both automatic reassignment and manual selection of specific team members. Used for both managed events and round-robin events.",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen flex items-center justify-center p-4">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ReassignDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper component to manage dialog state
+function ReassignDialogWrapper(props: Omit<React.ComponentProps<typeof ReassignDialog>, "isOpenDialog" | "setIsOpenDialog">) {
+  const [isOpenDialog, setIsOpenDialog] = useState(true);
+
+  return (
+    <>
+      <button
+        onClick={() => setIsOpenDialog(true)}
+        className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+        Open Reassign Dialog
+      </button>
+      <ReassignDialog
+        {...props}
+        isOpenDialog={isOpenDialog}
+        setIsOpenDialog={setIsOpenDialog}
+      />
+    </>
+  );
+}
+
+export const Default: Story = {
+  render: (args) => <ReassignDialogWrapper {...args} />,
+  args: {
+    teamId: 1,
+    bookingId: 123,
+    bookingFromRoutingForm: false,
+    isManagedEvent: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default reassign dialog for round-robin events with auto-reassign option.",
+      },
+    },
+  },
+};
+
+export const ManagedEvent: Story = {
+  render: (args) => <ReassignDialogWrapper {...args} />,
+  args: {
+    teamId: 1,
+    bookingId: 123,
+    bookingFromRoutingForm: false,
+    isManagedEvent: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Reassign dialog for managed events, showing auto-reassign and specific team member options.",
+      },
+    },
+  },
+};
+
+export const FromRoutingForm: Story = {
+  render: (args) => <ReassignDialogWrapper {...args} />,
+  args: {
+    teamId: 1,
+    bookingId: 123,
+    bookingFromRoutingForm: true,
+    isManagedEvent: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Reassign dialog for bookings from routing forms. Only shows manual team member selection (no auto-reassign option).",
+      },
+    },
+  },
+};
+
+export const ManagedEventFromRoutingForm: Story = {
+  render: (args) => <ReassignDialogWrapper {...args} />,
+  args: {
+    teamId: 1,
+    bookingId: 123,
+    bookingFromRoutingForm: true,
+    isManagedEvent: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Reassign dialog for managed events from routing forms. Only manual selection is available.",
+      },
+    },
+  },
+};
+
+export const RoundRobinEvent: Story = {
+  render: (args) => <ReassignDialogWrapper {...args} />,
+  args: {
+    teamId: 1,
+    bookingId: 456,
+    bookingFromRoutingForm: false,
+    isManagedEvent: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Reassign dialog for round-robin events with both auto and manual reassignment options.",
+      },
+    },
+  },
+};
+
+export const WithDifferentTeamId: Story = {
+  render: (args) => <ReassignDialogWrapper {...args} />,
+  args: {
+    teamId: 999,
+    bookingId: 789,
+    bookingFromRoutingForm: false,
+    isManagedEvent: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Reassign dialog with a different team ID to test team-specific behavior.",
+      },
+    },
+  },
+};
diff --git a/apps/web/components/dialog/RejectionReasonDialog.stories.tsx b/apps/web/components/dialog/RejectionReasonDialog.stories.tsx
new file mode 100644
index 00000000000000..60b5b49752767e
--- /dev/null
+++ b/apps/web/components/dialog/RejectionReasonDialog.stories.tsx
@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+import { fn } from "storybook/test";
+
+import { RejectionReasonDialog } from "./RejectionReasonDialog";
+
+const meta: Meta<typeof RejectionReasonDialog> = {
+  title: "Components/Dialog/RejectionReasonDialog",
+  component: RejectionReasonDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<typeof RejectionReasonDialog>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    return <RejectionReasonDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />;
+  },
+  args: {
+    onConfirm: fn(),
+    isPending: false,
+  },
+};
+
+export const WithPendingState: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    return <RejectionReasonDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />;
+  },
+  args: {
+    onConfirm: fn(),
+    isPending: true,
+  },
+};
+
+export const Closed: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (
+      <>
+        <button onClick={() => setIsOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white">
+          Open Dialog
+        </button>
+        <RejectionReasonDialog {...args} isOpenDialog={isOpen} setIsOpenDialog={setIsOpen} />
+      </>
+    );
+  },
+  args: {
+    onConfirm: fn(),
+    isPending: false,
+  },
+};
+
+export const Interactive: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleConfirm = (reason: string) => {
+      console.log("Rejection reason:", reason);
+      args.onConfirm?.(reason);
+      setIsOpen(false);
+    };
+    return (
+      <>
+        <button onClick={() => setIsOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white">
+          Open Rejection Dialog
+        </button>
+        <RejectionReasonDialog
+          {...args}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          onConfirm={handleConfirm}
+        />
+      </>
+    );
+  },
+  args: {
+    onConfirm: fn(),
+    isPending: false,
+  },
+};
diff --git a/apps/web/components/dialog/ReportBookingDialog.stories.tsx b/apps/web/components/dialog/ReportBookingDialog.stories.tsx
new file mode 100644
index 00000000000000..a81bdd53d0c66f
--- /dev/null
+++ b/apps/web/components/dialog/ReportBookingDialog.stories.tsx
@@ -0,0 +1,106 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { ReportBookingDialog } from "./ReportBookingDialog";
+
+const meta = {
+  title: "Components/Dialog/ReportBookingDialog",
+  component: ReportBookingDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[600px] w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ReportBookingDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper component to handle dialog state
+const ReportBookingDialogWrapper = (args: any) => {
+  const [isOpen, setIsOpen] = useState(args.isOpenDialog);
+
+  return (
+    <ReportBookingDialog
+      {...args}
+      isOpenDialog={isOpen}
+      setIsOpenDialog={setIsOpen}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: (args) => <ReportBookingDialogWrapper {...args} />,
+  args: {
+    isOpenDialog: true,
+    bookingUid: "booking-123",
+    isRecurring: false,
+    status: "upcoming",
+  },
+};
+
+export const UpcomingBooking: Story = {
+  render: (args) => <ReportBookingDialogWrapper {...args} />,
+  args: {
+    isOpenDialog: true,
+    bookingUid: "booking-upcoming-123",
+    isRecurring: false,
+    status: "upcoming",
+  },
+};
+
+export const PastBooking: Story = {
+  render: (args) => <ReportBookingDialogWrapper {...args} />,
+  args: {
+    isOpenDialog: true,
+    bookingUid: "booking-past-123",
+    isRecurring: false,
+    status: "past",
+  },
+};
+
+export const CancelledBooking: Story = {
+  render: (args) => <ReportBookingDialogWrapper {...args} />,
+  args: {
+    isOpenDialog: true,
+    bookingUid: "booking-cancelled-123",
+    isRecurring: false,
+    status: "cancelled",
+  },
+};
+
+export const RejectedBooking: Story = {
+  render: (args) => <ReportBookingDialogWrapper {...args} />,
+  args: {
+    isOpenDialog: true,
+    bookingUid: "booking-rejected-123",
+    isRecurring: false,
+    status: "rejected",
+  },
+};
+
+export const RecurringBooking: Story = {
+  render: (args) => <ReportBookingDialogWrapper {...args} />,
+  args: {
+    isOpenDialog: true,
+    bookingUid: "booking-recurring-123",
+    isRecurring: true,
+    status: "upcoming",
+  },
+};
+
+export const Closed: Story = {
+  render: (args) => <ReportBookingDialogWrapper {...args} />,
+  args: {
+    isOpenDialog: false,
+    bookingUid: "booking-123",
+    isRecurring: false,
+    status: "upcoming",
+  },
+};
diff --git a/apps/web/components/dialog/RerouteDialog.stories.tsx b/apps/web/components/dialog/RerouteDialog.stories.tsx
new file mode 100644
index 00000000000000..49bf86cad742c1
--- /dev/null
+++ b/apps/web/components/dialog/RerouteDialog.stories.tsx
@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { RerouteDialog } from "./RerouteDialog";
+
+const meta = {
+  title: "Components/Dialog/RerouteDialog",
+  component: RerouteDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    isOpenDialog: {
+      control: "boolean",
+      description: "Controls whether the dialog is open",
+    },
+    setIsOpenDialog: {
+      action: "setIsOpenDialog",
+      description: "Callback to control dialog open state",
+    },
+    booking: {
+      description: "Booking object with routing information",
+    },
+  },
+} satisfies Meta<typeof RerouteDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockBooking = {
+  id: 1,
+  uid: "booking-uid-123",
+  title: "Team Meeting",
+  status: "ACCEPTED" as const,
+  startTime: new Date(Date.now() + 86400000).toISOString(), // Tomorrow
+  metadata: {
+    videoCallUrl: "https://example.com/call",
+  },
+  responses: {
+    name: { value: "John Doe" },
+    email: { value: "john.doe@example.com" },
+    notes: { value: "Looking forward to the meeting" },
+  },
+  routedFromRoutingFormReponse: {
+    id: 1,
+  },
+  attendees: [
+    {
+      name: "John Doe",
+      email: "john.doe@example.com",
+      timeZone: "America/New_York",
+      locale: "en",
+    },
+  ],
+  eventType: {
+    id: 1,
+    slug: "team-meeting",
+    title: "Team Meeting",
+    length: 30,
+    schedulingType: "ROUND_ROBIN" as const,
+    team: {
+      slug: "engineering",
+    },
+  },
+  user: {
+    id: 1,
+    name: "Jane Smith",
+    email: "jane.smith@example.com",
+  },
+};
+
+const mockBookingWithCollectiveScheduling = {
+  ...mockBooking,
+  eventType: {
+    ...mockBooking.eventType,
+    schedulingType: "COLLECTIVE" as const,
+  },
+};
+
+const mockBookingPastTimeslot = {
+  ...mockBooking,
+  startTime: new Date(Date.now() - 86400000).toISOString(), // Yesterday
+};
+
+export const Default: Story = {
+  args: {
+    isOpenDialog: true,
+    setIsOpenDialog: fn(),
+    booking: mockBooking,
+  },
+};
+
+export const Closed: Story = {
+  args: {
+    isOpenDialog: false,
+    setIsOpenDialog: fn(),
+    booking: mockBooking,
+  },
+};
+
+export const CollectiveScheduling: Story = {
+  args: {
+    isOpenDialog: true,
+    setIsOpenDialog: fn(),
+    booking: mockBookingWithCollectiveScheduling,
+  },
+};
+
+export const PastTimeslot: Story = {
+  args: {
+    isOpenDialog: true,
+    setIsOpenDialog: fn(),
+    booking: mockBookingPastTimeslot,
+  },
+};
+
+export const LongEventDuration: Story = {
+  args: {
+    isOpenDialog: true,
+    setIsOpenDialog: fn(),
+    booking: {
+      ...mockBooking,
+      eventType: {
+        ...mockBooking.eventType,
+        length: 120, // 2 hours
+        title: "Extended Strategy Session",
+      },
+    },
+  },
+};
+
+export const MultipleAttendees: Story = {
+  args: {
+    isOpenDialog: true,
+    setIsOpenDialog: fn(),
+    booking: {
+      ...mockBooking,
+      attendees: [
+        {
+          name: "John Doe",
+          email: "john.doe@example.com",
+          timeZone: "America/New_York",
+          locale: "en",
+        },
+        {
+          name: "Alice Johnson",
+          email: "alice.johnson@example.com",
+          timeZone: "America/Los_Angeles",
+          locale: "en",
+        },
+        {
+          name: "Bob Williams",
+          email: "bob.williams@example.com",
+          timeZone: "Europe/London",
+          locale: "en",
+        },
+      ],
+    },
+  },
+};
+
+export const DifferentTimezones: Story = {
+  args: {
+    isOpenDialog: true,
+    setIsOpenDialog: fn(),
+    booking: {
+      ...mockBooking,
+      attendees: [
+        {
+          name: "Tokyo User",
+          email: "tokyo@example.com",
+          timeZone: "Asia/Tokyo",
+          locale: "ja",
+        },
+      ],
+    },
+  },
+};
diff --git a/apps/web/components/dialog/RescheduleDialog.stories.tsx b/apps/web/components/dialog/RescheduleDialog.stories.tsx
new file mode 100644
index 00000000000000..b67b8112c5a3c0
--- /dev/null
+++ b/apps/web/components/dialog/RescheduleDialog.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { RescheduleDialog } from "./RescheduleDialog";
+
+const meta = {
+  title: "Components/Dialog/RescheduleDialog",
+  component: RescheduleDialog,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[600px] min-w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof RescheduleDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper component to handle state
+const RescheduleDialogWrapper = (args: { bookingUid: string; initialOpen?: boolean }) => {
+  const [isOpen, setIsOpen] = useState(args.initialOpen ?? true);
+
+  return (
+    <div>
+      <button onClick={() => setIsOpen(true)} className="rounded bg-blue-500 px-4 py-2 text-white">
+        Open Reschedule Dialog
+      </button>
+      <RescheduleDialog
+        isOpenDialog={isOpen}
+        setIsOpenDialog={setIsOpen}
+        bookingUid={args.bookingUid}
+      />
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => <RescheduleDialogWrapper bookingUid="booking-uid-123" initialOpen={true} />,
+  parameters: {
+    docs: {
+      description: {
+        story: "Default reschedule dialog with standard booking UID.",
+      },
+    },
+  },
+};
+
+export const WithButton: Story = {
+  render: () => <RescheduleDialogWrapper bookingUid="booking-uid-456" initialOpen={false} />,
+  parameters: {
+    docs: {
+      description: {
+        story: "Reschedule dialog that can be opened via a button click.",
+      },
+    },
+  },
+};
+
+export const LongBookingUid: Story = {
+  render: () => (
+    <RescheduleDialogWrapper
+      bookingUid="very-long-booking-uid-with-many-characters-1234567890"
+      initialOpen={true}
+    />
+  ),
+  parameters: {
+    docs: {
+      description: {
+        story: "Reschedule dialog with a longer booking UID to test edge cases.",
+      },
+    },
+  },
+};
diff --git a/apps/web/components/error/BookingPageErrorBoundary.stories.tsx b/apps/web/components/error/BookingPageErrorBoundary.stories.tsx
new file mode 100644
index 00000000000000..c504318e7b881d
--- /dev/null
+++ b/apps/web/components/error/BookingPageErrorBoundary.stories.tsx
@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import BookingPageErrorBoundary from "./BookingPageErrorBoundary";
+
+const meta = {
+  title: "Components/Error/BookingPageErrorBoundary",
+  component: BookingPageErrorBoundary,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BookingPageErrorBoundary>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Component that throws a generic error
+const GenericErrorComponent = () => {
+  throw new Error("Failed to load booking page");
+};
+
+// Component that throws a network error
+const NetworkErrorComponent = () => {
+  const error = new Error("Network request failed");
+  error.name = "NetworkError";
+  throw error;
+};
+
+// Component that throws a validation error
+const ValidationErrorComponent = () => {
+  const error = new Error("Invalid booking parameters: eventTypeId is required");
+  error.name = "ValidationError";
+  throw error;
+};
+
+// Component that throws an error with a long stack trace
+const DetailedErrorComponent = () => {
+  const error = new Error("Detailed error with stack trace");
+  error.stack = `Error: Detailed error with stack trace
+    at DetailedErrorComponent (BookingPageErrorBoundary.stories.tsx:45:19)
+    at renderWithHooks (react-dom.development.js:14985:18)
+    at mountIndeterminateComponent (react-dom.development.js:17811:13)
+    at beginWork (react-dom.development.js:19049:16)
+    at HTMLUnknownElement.callCallback (react-dom.development.js:3945:14)
+    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:16)`;
+  throw error;
+};
+
+// Component that renders successfully
+const SuccessfulComponent = () => {
+  return (
+    <div className="rounded-lg border border-gray-200 bg-white p-8 shadow-sm">
+      <h2 className="mb-4 text-2xl font-semibold">Booking Page</h2>
+      <p className="mb-4 text-gray-600">
+        This is a successful booking page render. No errors occurred.
+      </p>
+      <div className="space-y-2">
+        <div className="rounded bg-gray-100 p-3">
+          <p className="text-sm font-medium">Event Type: 30 Min Meeting</p>
+        </div>
+        <div className="rounded bg-gray-100 p-3">
+          <p className="text-sm font-medium">Duration: 30 minutes</p>
+        </div>
+        <div className="rounded bg-gray-100 p-3">
+          <p className="text-sm font-medium">Status: Available</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Default: Story = {
+  render: () => (
+    <BookingPageErrorBoundary>
+      <GenericErrorComponent />
+    </BookingPageErrorBoundary>
+  ),
+};
+
+export const NetworkError: Story = {
+  render: () => (
+    <BookingPageErrorBoundary>
+      <NetworkErrorComponent />
+    </BookingPageErrorBoundary>
+  ),
+};
+
+export const ValidationError: Story = {
+  render: () => (
+    <BookingPageErrorBoundary>
+      <ValidationErrorComponent />
+    </BookingPageErrorBoundary>
+  ),
+};
+
+export const DetailedError: Story = {
+  render: () => (
+    <BookingPageErrorBoundary>
+      <DetailedErrorComponent />
+    </BookingPageErrorBoundary>
+  ),
+};
+
+export const NoError: Story = {
+  render: () => (
+    <BookingPageErrorBoundary>
+      <SuccessfulComponent />
+    </BookingPageErrorBoundary>
+  ),
+};
+
+export const MultipleChildrenWithError: Story = {
+  render: () => (
+    <BookingPageErrorBoundary>
+      <div className="space-y-4">
+        <div className="rounded-lg border border-gray-200 p-4">
+          <p className="font-medium">Header Section</p>
+        </div>
+        <GenericErrorComponent />
+        <div className="rounded-lg border border-gray-200 p-4">
+          <p className="font-medium">Footer Section (won't render due to error above)</p>
+        </div>
+      </div>
+    </BookingPageErrorBoundary>
+  ),
+};
diff --git a/apps/web/components/error/ErrorPage.stories.tsx b/apps/web/components/error/ErrorPage.stories.tsx
new file mode 100644
index 00000000000000..1daf6ce3c7c7fc
--- /dev/null
+++ b/apps/web/components/error/ErrorPage.stories.tsx
@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { HttpError } from "@calcom/lib/http-error";
+
+import { ErrorPage } from "./error-page";
+
+const meta = {
+  title: "Components/Error/ErrorPage",
+  component: ErrorPage,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen min-w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ErrorPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    statusCode: 500,
+    message: "Internal Server Error: Unable to process your request at this time.",
+  },
+};
+
+export const Error404: Story = {
+  args: {
+    statusCode: 404,
+    message: "The page you are looking for could not be found.",
+  },
+};
+
+export const Error403: Story = {
+  args: {
+    statusCode: 403,
+    message: "You do not have permission to access this resource.",
+  },
+};
+
+export const Error400: Story = {
+  args: {
+    statusCode: 400,
+    message: "Bad Request: The request could not be understood by the server.",
+  },
+};
+
+export const Error503: Story = {
+  args: {
+    statusCode: 503,
+    message: "Service Unavailable: The server is currently unable to handle the request.",
+  },
+};
+
+export const WithStandardError: Story = {
+  args: {
+    statusCode: 500,
+    message: "An unexpected error occurred while processing your booking.",
+    error: new Error("Database connection timeout"),
+  },
+};
+
+export const WithHttpError: Story = {
+  args: {
+    statusCode: 502,
+    message: "Bad Gateway: Unable to connect to the upstream server.",
+    error: new HttpError({
+      statusCode: 502,
+      message: "Bad Gateway",
+      url: "https://api.cal.com/v1/bookings",
+      cause: new Error("Connection refused"),
+    }),
+  },
+};
+
+export const WithDebugPanel: Story = {
+  args: {
+    statusCode: 500,
+    message: "Internal Server Error: Failed to create booking due to validation error.",
+    error: new Error("Validation failed: Invalid event type configuration"),
+    displayDebug: true,
+  },
+};
+
+export const WithHttpErrorAndDebug: Story = {
+  args: {
+    statusCode: 504,
+    message: "Gateway Timeout: The server took too long to respond.",
+    error: new HttpError({
+      statusCode: 504,
+      message: "Gateway Timeout",
+      url: "https://api.cal.com/v1/availability",
+      cause: new Error("Request timeout after 30000ms"),
+    }),
+    displayDebug: true,
+  },
+};
+
+export const LongErrorMessage: Story = {
+  args: {
+    statusCode: 500,
+    message:
+      "Error ID: ERR-2025-12-23-ABC123 | Timestamp: 2025-12-23T10:30:00Z | Service: booking-service | Database: Connection pool exhausted after 5000ms | Stack Trace: at BookingService.create (/app/services/booking.js:142:15) | Request ID: req_abc123xyz789 | User ID: usr_456def | Please include this information when contacting support.",
+  },
+};
+
+export const WithResetCallback: Story = {
+  args: {
+    statusCode: 500,
+    message: "An error occurred while loading your calendar data. You can try again to reload the page.",
+    error: new Error("Failed to fetch calendar events"),
+    reset: () => {
+      console.log("Reset callback triggered - page will reload");
+    },
+  },
+};
+
+export const MinimalError: Story = {
+  args: {
+    statusCode: 500,
+  },
+};
+
+export const WithoutStatusCode: Story = {
+  args: {
+    message: "An unexpected error occurred. Please try again later.",
+    error: new Error("Unknown error"),
+  },
+};
+
+export const ComplexHttpErrorWithDebug: Story = {
+  args: {
+    statusCode: 422,
+    message:
+      "Unprocessable Entity: The booking request contains invalid data. Event ID: evt_123abc | User ID: usr_456def | Timestamp: 2025-12-23T15:45:00Z",
+    error: new HttpError({
+      statusCode: 422,
+      message: "Validation Error: Event type does not accept bookings at this time",
+      url: "https://api.cal.com/v1/bookings/create",
+      cause: new Error("Event type is disabled or archived"),
+    }),
+    displayDebug: true,
+  },
+};
+
+export const NetworkError: Story = {
+  args: {
+    statusCode: 0,
+    message:
+      "Network Error: Unable to reach the server. Please check your internet connection and try again.",
+    error: new Error("Network request failed"),
+  },
+};
+
+export const DatabaseError: Story = {
+  args: {
+    statusCode: 500,
+    message:
+      "Database Error: Unable to retrieve booking information. Error Code: DB_001 | Connection: primary-db-pool | Timestamp: 2025-12-23T12:00:00Z",
+    error: new Error("ECONNREFUSED: Connection refused to database"),
+    displayDebug: true,
+  },
+};
diff --git a/apps/web/components/integrations/SubHeadingTitleWithConnections.stories.tsx b/apps/web/components/integrations/SubHeadingTitleWithConnections.stories.tsx
new file mode 100644
index 00000000000000..1de0b72f48a4d7
--- /dev/null
+++ b/apps/web/components/integrations/SubHeadingTitleWithConnections.stories.tsx
@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import SubHeadingTitleWithConnections from "./SubHeadingTitleWithConnections";
+
+const meta = {
+  component: SubHeadingTitleWithConnections,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      description: "The title text to display",
+      control: "text",
+    },
+    numConnections: {
+      description: "Number of connections to display in the badge",
+      control: { type: "number", min: 0 },
+    },
+  },
+} satisfies Meta<typeof SubHeadingTitleWithConnections>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Calendar Integration",
+  },
+};
+
+export const WithOneConnection: Story = {
+  args: {
+    title: "Calendar Integration",
+    numConnections: 1,
+  },
+};
+
+export const WithMultipleConnections: Story = {
+  args: {
+    title: "Calendar Integration",
+    numConnections: 3,
+  },
+};
+
+export const WithZeroConnections: Story = {
+  args: {
+    title: "Calendar Integration",
+    numConnections: 0,
+  },
+};
+
+export const LongTitle: Story = {
+  args: {
+    title: "This is a very long integration title to test layout",
+    numConnections: 5,
+  },
+};
+
+export const WithReactNodeTitle: Story = {
+  args: {
+    title: (
+      <span>
+        <strong>Bold Title</strong> with some <em>emphasis</em>
+      </span>
+    ),
+    numConnections: 2,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-semibold mb-2">No Connections</h3>
+        <div className="flex gap-2">
+          <SubHeadingTitleWithConnections title="No Connection Badge" />
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">With Connections</h3>
+        <div className="space-y-2">
+          <div className="flex gap-2">
+            <SubHeadingTitleWithConnections title="Google Calendar" numConnections={1} />
+          </div>
+          <div className="flex gap-2">
+            <SubHeadingTitleWithConnections title="Zoom" numConnections={5} />
+          </div>
+          <div className="flex gap-2">
+            <SubHeadingTitleWithConnections title="Microsoft Teams" numConnections={12} />
+          </div>
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/apps/web/components/security/DisableUserImpersonation.stories.tsx b/apps/web/components/security/DisableUserImpersonation.stories.tsx
new file mode 100644
index 00000000000000..599a64c8216734
--- /dev/null
+++ b/apps/web/components/security/DisableUserImpersonation.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+
+// Create a presentational-only version for Storybook
+// The actual component uses TRPC for mutations
+const DisableUserImpersonationPreview = ({
+  disableImpersonation,
+}: {
+  disableImpersonation: boolean;
+}) => {
+  const [disabled, setDisabled] = useState(disableImpersonation);
+
+  return (
+    <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
+      <div>
+        <div className="flex flex-row items-center">
+          <h2 className="font-cal text-emphasis text-lg font-medium leading-6">User Impersonation</h2>
+          <Badge className="ml-2 text-xs" variant={!disabled ? "success" : "gray"}>
+            {!disabled ? "Enabled" : "Disabled"}
+          </Badge>
+        </div>
+        <p className="text-subtle mt-1 text-sm">
+          Allow Cal.com support to temporarily access your account for troubleshooting
+        </p>
+      </div>
+      <div className="mt-5 sm:mt-0 sm:self-center">
+        <Button type="submit" color="secondary" onClick={() => setDisabled(!disabled)}>
+          {!disabled ? "Disable" : "Enable"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const meta = {
+  component: DisableUserImpersonationPreview,
+  title: "Web/Security/DisableUserImpersonation",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px] rounded-lg border border-default bg-default p-6">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DisableUserImpersonationPreview>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ImpersonationEnabled: Story = {
+  args: {
+    disableImpersonation: false,
+  },
+};
+
+export const ImpersonationDisabled: Story = {
+  args: {
+    disableImpersonation: true,
+  },
+};
+
+export const Interactive: Story = {
+  render: function InteractiveStory() {
+    const [disabled, setDisabled] = useState(false);
+
+    return (
+      <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
+        <div>
+          <div className="flex flex-row items-center">
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">User Impersonation</h2>
+            <Badge className="ml-2 text-xs" variant={!disabled ? "success" : "gray"}>
+              {!disabled ? "Enabled" : "Disabled"}
+            </Badge>
+          </div>
+          <p className="text-subtle mt-1 text-sm">
+            Allow Cal.com support to temporarily access your account for troubleshooting
+          </p>
+        </div>
+        <div className="mt-5 sm:mt-0 sm:self-center">
+          <Button type="submit" color="secondary" onClick={() => setDisabled(!disabled)}>
+            {!disabled ? "Disable" : "Enable"}
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/apps/web/components/security/TwoFactorAuthSection.stories.tsx b/apps/web/components/security/TwoFactorAuthSection.stories.tsx
new file mode 100644
index 00000000000000..ad99c92b4a28e1
--- /dev/null
+++ b/apps/web/components/security/TwoFactorAuthSection.stories.tsx
@@ -0,0 +1,88 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+
+// Create a presentational-only version for Storybook
+// The actual component uses modals with API calls
+const TwoFactorAuthSectionPreview = ({ twoFactorEnabled }: { twoFactorEnabled: boolean }) => {
+  const [enabled, setEnabled] = useState(twoFactorEnabled);
+
+  return (
+    <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
+      <div>
+        <div className="flex flex-row items-center">
+          <h2 className="font-cal text-emphasis text-lg font-medium leading-6">Two-Factor Authentication</h2>
+          <Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
+            {enabled ? "Enabled" : "Disabled"}
+          </Badge>
+        </div>
+        <p className="text-subtle mt-1 text-sm">Add an extra layer of security to your account</p>
+      </div>
+      <div className="mt-5 sm:mt-0 sm:self-center">
+        <Button type="submit" color="secondary" onClick={() => setEnabled(!enabled)}>
+          {enabled ? "Disable" : "Enable"}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const meta = {
+  component: TwoFactorAuthSectionPreview,
+  title: "Web/Security/TwoFactorAuthSection",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px] rounded-lg border border-default bg-default p-6">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TwoFactorAuthSectionPreview>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Disabled: Story = {
+  args: {
+    twoFactorEnabled: false,
+  },
+};
+
+export const Enabled: Story = {
+  args: {
+    twoFactorEnabled: true,
+  },
+};
+
+export const Interactive: Story = {
+  render: function InteractiveStory() {
+    const [enabled, setEnabled] = useState(false);
+
+    return (
+      <div className="flex flex-col justify-between pl-2 pt-9 sm:flex-row">
+        <div>
+          <div className="flex flex-row items-center">
+            <h2 className="font-cal text-emphasis text-lg font-medium leading-6">
+              Two-Factor Authentication
+            </h2>
+            <Badge className="ml-2 text-xs" variant={enabled ? "success" : "gray"}>
+              {enabled ? "Enabled" : "Disabled"}
+            </Badge>
+          </div>
+          <p className="text-subtle mt-1 text-sm">Add an extra layer of security to your account</p>
+        </div>
+        <div className="mt-5 sm:mt-0 sm:self-center">
+          <Button type="submit" color="secondary" onClick={() => setEnabled(!enabled)}>
+            {enabled ? "Disable" : "Enable"}
+          </Button>
+        </div>
+      </div>
+    );
+  },
+};
diff --git a/apps/web/components/security/TwoFactorModalHeader.stories.tsx b/apps/web/components/security/TwoFactorModalHeader.stories.tsx
new file mode 100644
index 00000000000000..a0c916d3048596
--- /dev/null
+++ b/apps/web/components/security/TwoFactorModalHeader.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import TwoFactorModalHeader from "./TwoFactorModalHeader";
+
+const meta = {
+  component: TwoFactorModalHeader,
+  title: "Web/Security/TwoFactorModalHeader",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[400px] rounded-lg border border-default bg-default p-6">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TwoFactorModalHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const EnableTwoFactor: Story = {
+  args: {
+    title: "Enable Two-Factor Authentication",
+    description: "Add an extra layer of security to your account by enabling two-factor authentication.",
+  },
+};
+
+export const ConfirmPassword: Story = {
+  args: {
+    title: "Confirm Password",
+    description: "Please enter your current password to continue with two-factor authentication setup.",
+  },
+};
+
+export const ScanQRCode: Story = {
+  args: {
+    title: "Scan QR Code",
+    description: "Use your authenticator app to scan the QR code or enter the secret key manually.",
+  },
+};
+
+export const EnterCode: Story = {
+  args: {
+    title: "Enter Verification Code",
+    description: "Enter the 6-digit code from your authenticator app to verify setup.",
+  },
+};
+
+export const DisableTwoFactor: Story = {
+  args: {
+    title: "Disable Two-Factor Authentication",
+    description: "We recommend keeping two-factor authentication enabled for maximum security.",
+  },
+};
+
+export const SuccessMessage: Story = {
+  args: {
+    title: "Two-Factor Authentication Enabled",
+    description: "Your account is now protected with an additional layer of security.",
+  },
+};
+
+export const LongDescription: Story = {
+  args: {
+    title: "Security Verification Required",
+    description:
+      "For your security, we require additional verification before making changes to your account. Please enter your password and the verification code from your authenticator app.",
+  },
+};
diff --git a/apps/web/components/setup/AdminUser.stories.tsx b/apps/web/components/setup/AdminUser.stories.tsx
new file mode 100644
index 00000000000000..b76ae407de026d
--- /dev/null
+++ b/apps/web/components/setup/AdminUser.stories.tsx
@@ -0,0 +1,208 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { AdminUser, AdminUserContainer } from "./AdminUser";
+
+const meta: Meta<typeof AdminUser> = {
+  title: "Components/Setup/AdminUser",
+  component: AdminUser,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    onSubmit: {
+      description: "Callback fired when the form is submitted",
+      action: "submitted",
+    },
+    onError: {
+      description: "Callback fired when the form encounters an error",
+      action: "error",
+    },
+    onSuccess: {
+      description: "Callback fired when the form submission is successful",
+      action: "success",
+    },
+    nav: {
+      description: "Navigation callbacks for wizard navigation",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof AdminUser>;
+
+export const Default: Story = {
+  args: {
+    onSubmit: fn(),
+    onError: fn(),
+    onSuccess: fn(),
+    nav: {
+      onNext: fn(),
+      onPrev: fn(),
+    },
+  },
+};
+
+export const WithLongWebsiteUrl: Story = {
+  args: {
+    onSubmit: fn(),
+    onError: fn(),
+    onSuccess: fn(),
+    nav: {
+      onNext: fn(),
+      onPrev: fn(),
+    },
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/setup",
+      },
+    },
+  },
+  decorators: [
+    (Story) => {
+      // Mock a long WEBSITE_URL to trigger the long URL UI
+      const originalUrl = process.env.NEXT_PUBLIC_WEBSITE_URL;
+      process.env.NEXT_PUBLIC_WEBSITE_URL = "https://very-long-company-name-for-testing.example.com";
+      const result = (
+        <div className="w-[500px]">
+          <Story />
+        </div>
+      );
+      process.env.NEXT_PUBLIC_WEBSITE_URL = originalUrl;
+      return result;
+    },
+  ],
+};
+
+export const Interactive: Story = {
+  args: {
+    onSubmit: fn(),
+    onError: fn(),
+    onSuccess: fn(),
+    nav: {
+      onNext: fn(),
+      onPrev: fn(),
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Interactive story showing the admin user creation form with validation. Try filling in the form fields to see validation in action. The password field requires uppercase, lowercase, numbers, and at least 7 characters.",
+      },
+    },
+  },
+};
+
+// AdminUserContainer stories
+const containerMeta: Meta<typeof AdminUserContainer> = {
+  title: "Components/Setup/AdminUserContainer",
+  component: AdminUserContainer,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    userCount: {
+      control: "number",
+      description: "Number of existing users - shows success state if > 0",
+    },
+    onSubmit: {
+      description: "Callback fired when the form is submitted",
+      action: "submitted",
+    },
+    onError: {
+      description: "Callback fired when the form encounters an error",
+      action: "error",
+    },
+    onSuccess: {
+      description: "Callback fired when the form submission is successful",
+      action: "success",
+    },
+    nav: {
+      description: "Navigation callbacks for wizard navigation",
+    },
+  },
+};
+
+export const ContainerDefault = {
+  render: (args: React.ComponentProps<typeof AdminUserContainer>) => <AdminUserContainer {...args} />,
+  args: {
+    userCount: 0,
+    onSubmit: fn(),
+    onError: fn(),
+    onSuccess: fn(),
+    nav: {
+      onNext: fn(),
+      onPrev: fn(),
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Default state of the container when no admin user exists yet (userCount = 0).",
+      },
+    },
+  },
+} satisfies StoryObj<typeof AdminUserContainer>;
+
+export const ContainerWithExistingUser = {
+  render: (args: React.ComponentProps<typeof AdminUserContainer>) => <AdminUserContainer {...args} />,
+  args: {
+    userCount: 1,
+    onSubmit: fn(),
+    onError: fn(),
+    onSuccess: fn(),
+    nav: {
+      onNext: fn(),
+      onPrev: fn(),
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Container state when an admin user already exists (userCount > 0). Shows a success screen instead of the form.",
+      },
+    },
+  },
+} satisfies StoryObj<typeof AdminUserContainer>;
+
+export const ContainerMultipleUsers = {
+  render: (args: React.ComponentProps<typeof AdminUserContainer>) => <AdminUserContainer {...args} />,
+  args: {
+    userCount: 5,
+    onSubmit: fn(),
+    onError: fn(),
+    onSuccess: fn(),
+    nav: {
+      onNext: fn(),
+      onPrev: fn(),
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Container with multiple existing users - shows the same success screen as with one user.",
+      },
+    },
+  },
+} satisfies StoryObj<typeof AdminUserContainer>;
diff --git a/apps/web/components/ui/AuthContainer.stories.tsx b/apps/web/components/ui/AuthContainer.stories.tsx
new file mode 100644
index 00000000000000..ff00aa3059bdf1
--- /dev/null
+++ b/apps/web/components/ui/AuthContainer.stories.tsx
@@ -0,0 +1,167 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Button } from "@calcom/ui/components/button";
+import { TextField } from "@calcom/ui/components/form";
+
+import AuthContainer from "./AuthContainer";
+
+const meta = {
+  component: AuthContainer,
+  title: "Web/UI/AuthContainer",
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AuthContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    showLogo: true,
+    heading: "Sign in to your account",
+    children: (
+      <form className="space-y-4">
+        <TextField name="email" label="Email" type="email" placeholder="you@example.com" />
+        <TextField name="password" label="Password" type="password" placeholder="••••••••" />
+        <Button type="submit" className="w-full">
+          Sign in
+        </Button>
+      </form>
+    ),
+    footerText: (
+      <>
+        Don&apos;t have an account?{" "}
+        <a href="#" className="text-emphasis hover:underline">
+          Sign up
+        </a>
+      </>
+    ),
+  },
+};
+
+export const WithoutLogo: Story = {
+  args: {
+    showLogo: false,
+    heading: "Welcome back",
+    children: (
+      <form className="space-y-4">
+        <TextField name="email" label="Email" type="email" placeholder="you@example.com" />
+        <TextField name="password" label="Password" type="password" placeholder="••••••••" />
+        <Button type="submit" className="w-full">
+          Continue
+        </Button>
+      </form>
+    ),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    showLogo: true,
+    heading: "Sign in",
+    loading: true,
+    children: (
+      <form className="space-y-4">
+        <TextField name="email" label="Email" type="email" placeholder="you@example.com" />
+        <TextField name="password" label="Password" type="password" placeholder="••••••••" />
+        <Button type="submit" className="w-full">
+          Sign in
+        </Button>
+      </form>
+    ),
+  },
+};
+
+export const SignUp: Story = {
+  args: {
+    showLogo: true,
+    heading: "Create your account",
+    children: (
+      <form className="space-y-4">
+        <TextField name="name" label="Full Name" placeholder="John Doe" />
+        <TextField name="email" label="Email" type="email" placeholder="you@example.com" />
+        <TextField name="password" label="Password" type="password" placeholder="••••••••" />
+        <TextField name="confirmPassword" label="Confirm Password" type="password" placeholder="••••••••" />
+        <Button type="submit" className="w-full">
+          Create account
+        </Button>
+      </form>
+    ),
+    footerText: (
+      <>
+        Already have an account?{" "}
+        <a href="#" className="text-emphasis hover:underline">
+          Sign in
+        </a>
+      </>
+    ),
+  },
+};
+
+export const ForgotPassword: Story = {
+  args: {
+    showLogo: true,
+    heading: "Reset your password",
+    children: (
+      <form className="space-y-4">
+        <p className="text-subtle text-sm">
+          Enter your email address and we&apos;ll send you a link to reset your password.
+        </p>
+        <TextField name="email" label="Email" type="email" placeholder="you@example.com" />
+        <Button type="submit" className="w-full">
+          Send reset link
+        </Button>
+      </form>
+    ),
+    footerText: (
+      <a href="#" className="text-emphasis hover:underline">
+        Back to sign in
+      </a>
+    ),
+  },
+};
+
+export const TwoFactorAuth: Story = {
+  args: {
+    showLogo: true,
+    heading: "Two-factor authentication",
+    children: (
+      <form className="space-y-4">
+        <p className="text-subtle text-sm">
+          Enter the 6-digit code from your authenticator app.
+        </p>
+        <TextField
+          name="code"
+          label="Authentication code"
+          placeholder="000000"
+          maxLength={6}
+          className="text-center tracking-widest"
+        />
+        <Button type="submit" className="w-full">
+          Verify
+        </Button>
+      </form>
+    ),
+    footerText: (
+      <a href="#" className="text-emphasis hover:underline">
+        Use backup code instead
+      </a>
+    ),
+  },
+};
+
+export const MinimalContent: Story = {
+  args: {
+    showLogo: true,
+    children: (
+      <div className="text-center">
+        <h3 className="text-emphasis mb-2 text-lg font-medium">Check your email</h3>
+        <p className="text-subtle text-sm">
+          We&apos;ve sent a verification link to your email address.
+        </p>
+      </div>
+    ),
+  },
+};
diff --git a/apps/web/components/ui/LinkIconButton.stories.tsx b/apps/web/components/ui/LinkIconButton.stories.tsx
new file mode 100644
index 00000000000000..8d3dc1646b5105
--- /dev/null
+++ b/apps/web/components/ui/LinkIconButton.stories.tsx
@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import LinkIconButton from "./LinkIconButton";
+
+const meta = {
+  component: LinkIconButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    Icon: {
+      control: "text",
+      description: "Icon name from the Cal.com icon set",
+    },
+    children: {
+      control: "text",
+      description: "Button text content",
+    },
+    onClick: {
+      action: "clicked",
+      description: "Click handler",
+    },
+    disabled: {
+      control: "boolean",
+      description: "Whether the button is disabled",
+    },
+  },
+} satisfies Meta<typeof LinkIconButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    Icon: "link",
+    children: "Link Button",
+  },
+};
+
+export const WithCalendarIcon: Story = {
+  args: {
+    Icon: "calendar",
+    children: "Calendar",
+  },
+};
+
+export const WithUserIcon: Story = {
+  args: {
+    Icon: "user",
+    children: "Profile",
+  },
+};
+
+export const WithSettingsIcon: Story = {
+  args: {
+    Icon: "settings",
+    children: "Settings",
+  },
+};
+
+export const WithPlusIcon: Story = {
+  args: {
+    Icon: "plus",
+    children: "Add New",
+  },
+};
+
+export const WithEditIcon: Story = {
+  args: {
+    Icon: "edit",
+    children: "Edit",
+  },
+};
+
+export const WithTrashIcon: Story = {
+  args: {
+    Icon: "trash",
+    children: "Delete",
+  },
+};
+
+export const WithCopyIcon: Story = {
+  args: {
+    Icon: "copy",
+    children: "Copy",
+  },
+};
+
+export const WithExternalLinkIcon: Story = {
+  args: {
+    Icon: "external-link",
+    children: "Open External",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    Icon: "link",
+    children: "Disabled Button",
+    disabled: true,
+  },
+};
+
+export const LongText: Story = {
+  args: {
+    Icon: "file-text",
+    children: "Button with longer text content",
+  },
+};
+
+export const ShortText: Story = {
+  args: {
+    Icon: "check",
+    children: "OK",
+  },
+};
+
+export const CommonVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <LinkIconButton Icon="calendar">Calendar</LinkIconButton>
+      <LinkIconButton Icon="user">Profile</LinkIconButton>
+      <LinkIconButton Icon="settings">Settings</LinkIconButton>
+      <LinkIconButton Icon="plus">Add New</LinkIconButton>
+      <LinkIconButton Icon="edit">Edit</LinkIconButton>
+      <LinkIconButton Icon="copy">Copy</LinkIconButton>
+      <LinkIconButton Icon="trash">Delete</LinkIconButton>
+      <LinkIconButton Icon="external-link">Open Link</LinkIconButton>
+    </div>
+  ),
+};
+
+export const WithClickHandlers: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <LinkIconButton Icon="check" onClick={() => alert("Saved!")}>
+        Save
+      </LinkIconButton>
+      <LinkIconButton Icon="x" onClick={() => alert("Cancelled!")}>
+        Cancel
+      </LinkIconButton>
+      <LinkIconButton Icon="copy" onClick={() => alert("Copied!")}>
+        Copy to Clipboard
+      </LinkIconButton>
+    </div>
+  ),
+};
+
+export const NavigationButtons: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <LinkIconButton Icon="arrow-left">Back</LinkIconButton>
+      <LinkIconButton Icon="arrow-right">Next</LinkIconButton>
+      <LinkIconButton Icon="home">Home</LinkIconButton>
+      <LinkIconButton Icon="log-out">Sign Out</LinkIconButton>
+    </div>
+  ),
+};
+
+export const DisabledState: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <LinkIconButton Icon="link" disabled>
+        Disabled Link
+      </LinkIconButton>
+      <LinkIconButton Icon="calendar" disabled>
+        Disabled Calendar
+      </LinkIconButton>
+      <LinkIconButton Icon="settings" disabled>
+        Disabled Settings
+      </LinkIconButton>
+    </div>
+  ),
+};
diff --git a/apps/web/components/ui/ModalContainer.stories.tsx b/apps/web/components/ui/ModalContainer.stories.tsx
new file mode 100644
index 00000000000000..85c00a81382112
--- /dev/null
+++ b/apps/web/components/ui/ModalContainer.stories.tsx
@@ -0,0 +1,221 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { Button } from "@calcom/ui/components/button";
+
+import ModalContainer from "./ModalContainer";
+
+const meta = {
+  component: ModalContainer,
+  title: "Web/UI/ModalContainer",
+  parameters: {
+    layout: "fullscreen",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ModalContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+      <div className="h-screen w-full">
+        <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+        <ModalContainer isOpen={isOpen} onExit={() => setIsOpen(false)}>
+          <div className="p-6">
+            <h2 className="text-emphasis mb-4 text-lg font-semibold">Modal Title</h2>
+            <p className="text-default mb-4">
+              This is the modal content. You can put any content here.
+            </p>
+            <div className="flex justify-end gap-2">
+              <Button color="secondary" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setIsOpen(false)}>Confirm</Button>
+            </div>
+          </div>
+        </ModalContainer>
+      </div>
+    );
+  },
+};
+
+export const Wide: Story = {
+  render: function WideStory() {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+      <div className="h-screen w-full">
+        <Button onClick={() => setIsOpen(true)}>Open Wide Modal</Button>
+        <ModalContainer isOpen={isOpen} onExit={() => setIsOpen(false)} wide>
+          <div className="p-6">
+            <h2 className="text-emphasis mb-4 text-lg font-semibold">Wide Modal</h2>
+            <p className="text-default mb-4">
+              This is a wide modal that can contain more content side by side.
+            </p>
+            <div className="grid grid-cols-2 gap-4 mb-4">
+              <div className="bg-subtle rounded-md p-4">
+                <h3 className="font-medium">Left Column</h3>
+                <p className="text-subtle text-sm">Some content here</p>
+              </div>
+              <div className="bg-subtle rounded-md p-4">
+                <h3 className="font-medium">Right Column</h3>
+                <p className="text-subtle text-sm">Some content here</p>
+              </div>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button color="secondary" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setIsOpen(false)}>Confirm</Button>
+            </div>
+          </div>
+        </ModalContainer>
+      </div>
+    );
+  },
+};
+
+export const Scrollable: Story = {
+  render: function ScrollableStory() {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+      <div className="h-screen w-full">
+        <Button onClick={() => setIsOpen(true)}>Open Scrollable Modal</Button>
+        <ModalContainer isOpen={isOpen} onExit={() => setIsOpen(false)} scroll>
+          <div className="p-6 max-h-96">
+            <h2 className="text-emphasis mb-4 text-lg font-semibold">Scrollable Content</h2>
+            {Array.from({ length: 20 }).map((_, i) => (
+              <p key={i} className="text-default mb-2">
+                This is paragraph {i + 1}. The modal content is scrollable when it exceeds the container height.
+              </p>
+            ))}
+            <div className="flex justify-end gap-2 mt-4 sticky bottom-0 bg-default py-2">
+              <Button color="secondary" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button onClick={() => setIsOpen(false)}>Confirm</Button>
+            </div>
+          </div>
+        </ModalContainer>
+      </div>
+    );
+  },
+};
+
+export const NoPadding: Story = {
+  render: function NoPaddingStory() {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+      <div className="h-screen w-full">
+        <Button onClick={() => setIsOpen(true)}>Open No Padding Modal</Button>
+        <ModalContainer isOpen={isOpen} onExit={() => setIsOpen(false)} noPadding>
+          <div className="bg-emphasis p-8 text-center">
+            <h2 className="text-emphasis mb-2 text-lg font-semibold">Full Width Header</h2>
+            <p className="text-subtle">This modal has no padding for custom layouts</p>
+          </div>
+          <div className="p-6">
+            <p className="text-default mb-4">Content with custom padding applied manually.</p>
+            <div className="flex justify-end gap-2">
+              <Button color="secondary" onClick={() => setIsOpen(false)}>
+                Close
+              </Button>
+            </div>
+          </div>
+        </ModalContainer>
+      </div>
+    );
+  },
+};
+
+export const FormModal: Story = {
+  render: function FormModalStory() {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+      <div className="h-screen w-full">
+        <Button onClick={() => setIsOpen(true)}>Open Form Modal</Button>
+        <ModalContainer isOpen={isOpen} onExit={() => setIsOpen(false)}>
+          <form className="p-6">
+            <h2 className="text-emphasis mb-4 text-lg font-semibold">Edit Profile</h2>
+            <div className="space-y-4 mb-6">
+              <div>
+                <label className="text-default block text-sm font-medium mb-1">Name</label>
+                <input
+                  type="text"
+                  className="border-default bg-default w-full rounded-md border px-3 py-2 text-sm"
+                  placeholder="John Doe"
+                />
+              </div>
+              <div>
+                <label className="text-default block text-sm font-medium mb-1">Email</label>
+                <input
+                  type="email"
+                  className="border-default bg-default w-full rounded-md border px-3 py-2 text-sm"
+                  placeholder="john@example.com"
+                />
+              </div>
+              <div>
+                <label className="text-default block text-sm font-medium mb-1">Bio</label>
+                <textarea
+                  className="border-default bg-default w-full rounded-md border px-3 py-2 text-sm"
+                  rows={3}
+                  placeholder="Tell us about yourself"
+                />
+              </div>
+            </div>
+            <div className="flex justify-end gap-2">
+              <Button type="button" color="secondary" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button type="submit">Save Changes</Button>
+            </div>
+          </form>
+        </ModalContainer>
+      </div>
+    );
+  },
+};
+
+export const ConfirmationModal: Story = {
+  render: function ConfirmationModalStory() {
+    const [isOpen, setIsOpen] = useState(true);
+
+    return (
+      <div className="h-screen w-full">
+        <Button onClick={() => setIsOpen(true)}>Open Confirmation</Button>
+        <ModalContainer isOpen={isOpen} onExit={() => setIsOpen(false)}>
+          <div className="p-6 text-center">
+            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-100">
+              <svg className="h-6 w-6 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+            </div>
+            <h2 className="text-emphasis mb-2 text-lg font-semibold">Delete Event Type?</h2>
+            <p className="text-subtle mb-6 text-sm">
+              This action cannot be undone. All associated bookings will be cancelled.
+            </p>
+            <div className="flex justify-center gap-2">
+              <Button color="secondary" onClick={() => setIsOpen(false)}>
+                Cancel
+              </Button>
+              <Button color="destructive" onClick={() => setIsOpen(false)}>
+                Delete
+              </Button>
+            </div>
+          </div>
+        </ModalContainer>
+      </div>
+    );
+  },
+};
diff --git a/apps/web/components/ui/SettingInputContainer.stories.tsx b/apps/web/components/ui/SettingInputContainer.stories.tsx
new file mode 100644
index 00000000000000..205fd21b850e34
--- /dev/null
+++ b/apps/web/components/ui/SettingInputContainer.stories.tsx
@@ -0,0 +1,142 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Icon } from "@calcom/ui/components/icon";
+import { Input, TextField } from "@calcom/ui/components/form";
+import { Select } from "@calcom/ui/components/form";
+
+import SettingInputContainer from "./SettingInputContainer";
+
+const meta = {
+  component: SettingInputContainer,
+  title: "Web/UI/SettingInputContainer",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SettingInputContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const ClockIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <Icon name="clock" {...props} />
+);
+
+const UserIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <Icon name="user" {...props} />
+);
+
+const MailIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <Icon name="mail" {...props} />
+);
+
+const GlobeIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <Icon name="globe" {...props} />
+);
+
+const CalendarIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <Icon name="calendar" {...props} />
+);
+
+export const Default: Story = {
+  args: {
+    label: "Time Zone",
+    htmlFor: "timezone",
+    Icon: GlobeIcon,
+    Input: <Input id="timezone" placeholder="America/New_York" />,
+  },
+};
+
+export const WithTextField: Story = {
+  args: {
+    label: "Display Name",
+    htmlFor: "displayName",
+    Icon: UserIcon,
+    Input: <TextField name="displayName" placeholder="Enter your display name" />,
+  },
+};
+
+export const WithEmail: Story = {
+  args: {
+    label: "Email Address",
+    htmlFor: "email",
+    Icon: MailIcon,
+    Input: <Input id="email" type="email" placeholder="you@example.com" />,
+  },
+};
+
+export const WithSelect: Story = {
+  args: {
+    label: "Default Duration",
+    htmlFor: "duration",
+    Icon: ClockIcon,
+    Input: (
+      <Select
+        options={[
+          { value: "15", label: "15 minutes" },
+          { value: "30", label: "30 minutes" },
+          { value: "45", label: "45 minutes" },
+          { value: "60", label: "60 minutes" },
+        ]}
+      />
+    ),
+  },
+};
+
+export const WithCalendar: Story = {
+  args: {
+    label: "Default Calendar",
+    htmlFor: "calendar",
+    Icon: CalendarIcon,
+    Input: (
+      <Select
+        options={[
+          { value: "google", label: "Google Calendar" },
+          { value: "outlook", label: "Outlook Calendar" },
+          { value: "apple", label: "Apple Calendar" },
+        ]}
+      />
+    ),
+  },
+};
+
+export const MultipleSettings: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <SettingInputContainer
+        label="Display Name"
+        htmlFor="displayName"
+        Icon={UserIcon}
+        Input={<TextField name="displayName" defaultValue="John Doe" />}
+      />
+      <SettingInputContainer
+        label="Email"
+        htmlFor="email"
+        Icon={MailIcon}
+        Input={<Input id="email" type="email" defaultValue="john@example.com" />}
+      />
+      <SettingInputContainer
+        label="Time Zone"
+        htmlFor="timezone"
+        Icon={GlobeIcon}
+        Input={
+          <Select
+            options={[
+              { value: "America/New_York", label: "Eastern Time (ET)" },
+              { value: "America/Los_Angeles", label: "Pacific Time (PT)" },
+              { value: "Europe/London", label: "British Time (GMT)" },
+            ]}
+            defaultValue={{ value: "America/New_York", label: "Eastern Time (ET)" }}
+          />
+        }
+      />
+    </div>
+  ),
+};
diff --git a/apps/web/components/ui/form/CheckedSelect.stories.tsx b/apps/web/components/ui/form/CheckedSelect.stories.tsx
new file mode 100644
index 00000000000000..c96b513d23c974
--- /dev/null
+++ b/apps/web/components/ui/form/CheckedSelect.stories.tsx
@@ -0,0 +1,200 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+import { useState } from "react";
+
+import { CheckedSelect } from "./CheckedSelect";
+
+type CheckedSelectOption = {
+  avatar: string;
+  label: string;
+  value: string;
+  disabled?: boolean;
+};
+
+const sampleOptions: CheckedSelectOption[] = [
+  {
+    avatar: "https://cal.com/stakeholder/peer.jpg",
+    label: "John Doe",
+    value: "john-doe",
+  },
+  {
+    avatar: "https://cal.com/stakeholder/bailey.jpg",
+    label: "Jane Smith",
+    value: "jane-smith",
+  },
+  {
+    avatar: "https://cal.com/stakeholder/alice.jpg",
+    label: "Alice Johnson",
+    value: "alice-johnson",
+  },
+  {
+    avatar: "https://cal.com/stakeholder/peer.jpg",
+    label: "Bob Williams",
+    value: "bob-williams",
+  },
+  {
+    avatar: "https://cal.com/stakeholder/bailey.jpg",
+    label: "Carol Brown",
+    value: "carol-brown",
+    disabled: true,
+  },
+];
+
+const meta = {
+  component: CheckedSelect,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    onChange: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof CheckedSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    options: sampleOptions,
+    value: [],
+    placeholder: "Select team members...",
+    name: "team-members",
+  },
+};
+
+export const WithSelectedValues: Story = {
+  args: {
+    options: sampleOptions,
+    value: [sampleOptions[0], sampleOptions[1]],
+    placeholder: "Select team members...",
+    name: "team-members",
+  },
+};
+
+export const SingleSelection: Story = {
+  args: {
+    options: sampleOptions,
+    value: [sampleOptions[0]],
+    placeholder: "Select team members...",
+    name: "team-members",
+  },
+};
+
+export const AllSelected: Story = {
+  args: {
+    options: sampleOptions.filter((opt) => !opt.disabled),
+    value: sampleOptions.filter((opt) => !opt.disabled),
+    placeholder: "Select team members...",
+    name: "team-members",
+  },
+};
+
+export const WithDisabledOptions: Story = {
+  args: {
+    options: sampleOptions,
+    value: [],
+    placeholder: "Select team members...",
+    name: "team-members",
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    options: sampleOptions,
+    value: [],
+    placeholder: "Choose collaborators for this project...",
+    name: "collaborators",
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [selectedOptions, setSelectedOptions] = useState<CheckedSelectOption[]>([
+      sampleOptions[0],
+    ]);
+
+    return (
+      <div className="space-y-4">
+        <CheckedSelect
+          options={sampleOptions}
+          value={selectedOptions}
+          onChange={setSelectedOptions}
+          placeholder="Select team members..."
+          name="team-members"
+        />
+        <div className="text-sm text-gray-600">
+          <strong>Selected:</strong> {selectedOptions.length} member(s)
+        </div>
+      </div>
+    );
+  },
+};
+
+export const LargeList: Story = {
+  args: {
+    options: Array.from({ length: 10 }, (_, i) => ({
+      avatar: i % 2 === 0 ? "https://cal.com/stakeholder/peer.jpg" : "https://cal.com/stakeholder/bailey.jpg",
+      label: `Team Member ${i + 1}`,
+      value: `member-${i + 1}`,
+    })),
+    value: [],
+    placeholder: "Select team members...",
+    name: "team-members",
+  },
+};
+
+export const WithManySelections: Story = {
+  render: () => {
+    const largeOptions = Array.from({ length: 8 }, (_, i) => ({
+      avatar: i % 2 === 0 ? "https://cal.com/stakeholder/peer.jpg" : "https://cal.com/stakeholder/bailey.jpg",
+      label: `Team Member ${i + 1}`,
+      value: `member-${i + 1}`,
+    }));
+
+    return (
+      <CheckedSelect
+        options={largeOptions}
+        value={largeOptions.slice(0, 5)}
+        onChange={fn()}
+        placeholder="Select team members..."
+        name="team-members"
+      />
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const EventAssignment: Story = {
+  args: {
+    options: [
+      {
+        avatar: "https://cal.com/stakeholder/peer.jpg",
+        label: "John Doe (Sales)",
+        value: "john-sales",
+      },
+      {
+        avatar: "https://cal.com/stakeholder/bailey.jpg",
+        label: "Jane Smith (Support)",
+        value: "jane-support",
+      },
+      {
+        avatar: "https://cal.com/stakeholder/alice.jpg",
+        label: "Alice Johnson (Engineering)",
+        value: "alice-eng",
+      },
+    ],
+    value: [],
+    placeholder: "Assign team members to this event...",
+    name: "event-assignment",
+  },
+};
diff --git a/apps/web/components/ui/form/DatePicker.stories.tsx b/apps/web/components/ui/form/DatePicker.stories.tsx
new file mode 100644
index 00000000000000..0d54fb0875fbac
--- /dev/null
+++ b/apps/web/components/ui/form/DatePicker.stories.tsx
@@ -0,0 +1,72 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { fn } from "storybook/test";
+
+import { DatePicker } from "./DatePicker";
+
+const meta = {
+  title: "UI/Form/DatePicker",
+  component: DatePicker,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    date: { control: "date" },
+    minDate: { control: "date" },
+    disabled: { control: "boolean" },
+    className: { control: "text" },
+  },
+  args: {
+    onDatesChange: fn(),
+  },
+} satisfies Meta<typeof DatePicker>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    date: new Date(),
+  },
+};
+
+export const WithMinDate: Story = {
+  args: {
+    date: new Date(),
+    minDate: new Date(),
+  },
+};
+
+export const WithPastDate: Story = {
+  args: {
+    date: new Date(2024, 0, 1), // January 1, 2024
+  },
+};
+
+export const WithFutureDate: Story = {
+  args: {
+    date: new Date(2026, 11, 31), // December 31, 2026
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    date: new Date(),
+    disabled: true,
+  },
+};
+
+export const WithMinDateRestriction: Story = {
+  args: {
+    date: new Date(2025, 0, 15), // January 15, 2025
+    minDate: new Date(2025, 0, 1), // January 1, 2025 (restricts selection to dates after this)
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    date: new Date(),
+    className: "bg-blue-50 border-blue-300",
+  },
+};
diff --git a/apps/web/components/ui/form/MinutesField.stories.tsx b/apps/web/components/ui/form/MinutesField.stories.tsx
new file mode 100644
index 00000000000000..23433f1ccc0a34
--- /dev/null
+++ b/apps/web/components/ui/form/MinutesField.stories.tsx
@@ -0,0 +1,104 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import MinutesField from "./MinutesField";
+
+const meta = {
+  component: MinutesField,
+  title: "Web/UI/Form/MinutesField",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MinutesField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    id: "duration",
+    name: "duration",
+    defaultValue: 30,
+    onChange: fn(),
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    id: "buffer-time",
+    name: "bufferTime",
+    label: "Buffer Time",
+    defaultValue: 15,
+    onChange: fn(),
+  },
+};
+
+export const CustomValue: Story = {
+  args: {
+    id: "minimum-notice",
+    name: "minimumNotice",
+    label: "Minimum Notice",
+    defaultValue: 60,
+    onChange: fn(),
+  },
+};
+
+export const ZeroValue: Story = {
+  args: {
+    id: "zero-buffer",
+    name: "zeroBuffer",
+    label: "No Buffer",
+    defaultValue: 0,
+    onChange: fn(),
+  },
+};
+
+export const LongLabel: Story = {
+  args: {
+    id: "advance-notice",
+    name: "advanceNotice",
+    label: "Minimum booking notice before event starts",
+    defaultValue: 120,
+    onChange: fn(),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    id: "disabled-field",
+    name: "disabledField",
+    label: "Duration (readonly)",
+    defaultValue: 45,
+    disabled: true,
+    onChange: fn(),
+  },
+};
+
+export const WithPlaceholder: Story = {
+  args: {
+    id: "placeholder-field",
+    name: "placeholderField",
+    label: "Event Duration",
+    placeholder: "Enter duration",
+    onChange: fn(),
+  },
+};
+
+export const Required: Story = {
+  args: {
+    id: "required-field",
+    name: "requiredField",
+    label: "Required Duration",
+    defaultValue: 30,
+    required: true,
+    onChange: fn(),
+  },
+};
diff --git a/packages/features/apps/components/AllApps.stories.tsx b/packages/features/apps/components/AllApps.stories.tsx
new file mode 100644
index 00000000000000..7794bad843dafd
--- /dev/null
+++ b/packages/features/apps/components/AllApps.stories.tsx
@@ -0,0 +1,299 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import type { AppFrontendPayload as App } from "@calcom/types/App";
+
+import { AllApps } from "./AllApps";
+
+const mockApps: (App & { credentials?: any[] })[] = [
+  {
+    name: "Google Calendar",
+    slug: "google-calendar",
+    type: "google_calendar",
+    logo: "https://cal.com/api/app-store/googlecalendar/icon.svg",
+    description: "Connect your Google Calendar to automatically check for busy times and add new events.",
+    categories: ["calendar"],
+    variant: "calendar",
+    publisher: "Cal.com",
+    url: "https://www.google.com/calendar",
+    email: "support@cal.com",
+    verified: true,
+    trending: true,
+    rating: 5,
+    reviews: 1250,
+    feeType: "free",
+    price: 0,
+  },
+  {
+    name: "Zoom",
+    slug: "zoom",
+    type: "zoom_video",
+    logo: "https://cal.com/api/app-store/zoomvideo/icon.svg",
+    description: "Video conferencing with Zoom. Automatically create Zoom meetings for your bookings.",
+    categories: ["conferencing"],
+    variant: "conferencing",
+    publisher: "Cal.com",
+    url: "https://zoom.us",
+    email: "support@cal.com",
+    verified: true,
+    trending: true,
+    rating: 4.8,
+    reviews: 980,
+    feeType: "free",
+    price: 0,
+  },
+  {
+    name: "Stripe",
+    slug: "stripe",
+    type: "stripe_payment",
+    logo: "https://cal.com/api/app-store/stripepayment/icon.svg",
+    description: "Collect payments for your bookings using Stripe. Accept credit cards and more.",
+    categories: ["payment"],
+    variant: "payment",
+    publisher: "Cal.com",
+    url: "https://stripe.com",
+    email: "support@cal.com",
+    verified: true,
+    rating: 4.9,
+    reviews: 750,
+    feeType: "usage-based",
+    price: 0.5,
+    commission: 0.5,
+  },
+  {
+    name: "Salesforce",
+    slug: "salesforce",
+    type: "salesforce_crm",
+    logo: "https://cal.com/api/app-store/salesforce/icon.svg",
+    description: "Sync your bookings with Salesforce CRM. Automatically create contacts and opportunities.",
+    categories: ["crm"],
+    variant: "crm",
+    publisher: "Cal.com",
+    url: "https://www.salesforce.com",
+    email: "support@cal.com",
+    verified: true,
+    rating: 4.7,
+    reviews: 420,
+    feeType: "free",
+    price: 0,
+  },
+  {
+    name: "HubSpot",
+    slug: "hubspot",
+    type: "hubspot_crm",
+    logo: "https://cal.com/api/app-store/hubspot/icon.svg",
+    description: "Connect HubSpot CRM to track meetings and contacts automatically.",
+    categories: ["crm"],
+    variant: "crm",
+    publisher: "Cal.com",
+    url: "https://www.hubspot.com",
+    email: "support@cal.com",
+    verified: true,
+    trending: true,
+    rating: 4.6,
+    reviews: 530,
+    feeType: "free",
+    price: 0,
+  },
+  {
+    name: "Google Meet",
+    slug: "google-meet",
+    type: "google_video",
+    logo: "https://cal.com/api/app-store/googlevideo/icon.svg",
+    description: "Video conferencing with Google Meet. Free and integrated with Google Calendar.",
+    categories: ["conferencing"],
+    variant: "conferencing",
+    publisher: "Cal.com",
+    url: "https://meet.google.com",
+    email: "support@cal.com",
+    verified: true,
+    rating: 4.5,
+    reviews: 890,
+    feeType: "free",
+    price: 0,
+  },
+  {
+    name: "Microsoft Teams",
+    slug: "msteams",
+    type: "msteams_video",
+    logo: "https://cal.com/api/app-store/msteams/icon.svg",
+    description: "Video conferencing with Microsoft Teams. Integrated with Office 365.",
+    categories: ["conferencing"],
+    variant: "conferencing",
+    publisher: "Cal.com",
+    url: "https://www.microsoft.com/microsoft-teams",
+    email: "support@cal.com",
+    verified: true,
+    rating: 4.4,
+    reviews: 670,
+    feeType: "free",
+    price: 0,
+  },
+  {
+    name: "Zapier",
+    slug: "zapier",
+    type: "zapier_automation",
+    logo: "https://cal.com/api/app-store/zapier/icon.svg",
+    description: "Connect Cal.com with 5000+ apps. Automate your workflow with Zapier.",
+    categories: ["automation"],
+    variant: "automation",
+    publisher: "Cal.com",
+    url: "https://zapier.com",
+    email: "support@cal.com",
+    verified: true,
+    trending: true,
+    rating: 4.8,
+    reviews: 1120,
+    feeType: "free",
+    price: 0,
+  },
+];
+
+const meta = {
+  component: AllApps,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[1200px] p-8">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AllApps>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    apps: mockApps,
+    categories: ["calendar", "conferencing", "payment", "crm", "automation"],
+  },
+};
+
+export const WithSearchText: Story = {
+  args: {
+    apps: mockApps,
+    searchText: "zoom",
+    categories: ["calendar", "conferencing", "payment", "crm", "automation"],
+  },
+};
+
+export const SingleCategory: Story = {
+  args: {
+    apps: mockApps.filter((app) => app.categories.includes("conferencing")),
+    categories: ["conferencing"],
+  },
+};
+
+export const WithInstalledApps: Story = {
+  args: {
+    apps: mockApps.map((app, index) => ({
+      ...app,
+      credentials: index % 2 === 0 ? [{ id: 1, type: app.type }] : undefined,
+    })),
+    categories: ["calendar", "conferencing", "payment", "crm", "automation"],
+  },
+};
+
+export const EmptyState: Story = {
+  args: {
+    apps: [],
+    categories: ["calendar", "conferencing", "payment", "crm", "automation"],
+  },
+};
+
+export const EmptySearchResults: Story = {
+  args: {
+    apps: mockApps,
+    searchText: "nonexistent app",
+    categories: ["calendar", "conferencing", "payment", "crm", "automation"],
+  },
+};
+
+export const FewApps: Story = {
+  args: {
+    apps: mockApps.slice(0, 3),
+    categories: ["calendar", "conferencing", "payment"],
+  },
+};
+
+export const ManyCategoriesWithScroll: Story = {
+  args: {
+    apps: mockApps,
+    categories: [
+      "calendar",
+      "conferencing",
+      "payment",
+      "crm",
+      "automation",
+      "analytics",
+      "messaging",
+      "other",
+      "video",
+    ],
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[800px] p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const WithUserAdminTeams: Story = {
+  args: {
+    apps: mockApps.map((app) => ({
+      ...app,
+      credentials: [{ id: 1, type: app.type, teamId: 1 }],
+    })),
+    categories: ["calendar", "conferencing", "payment", "crm", "automation"],
+    userAdminTeams: [
+      { id: 1, name: "Engineering Team", isOrganization: false },
+      { id: 2, name: "Sales Team", isOrganization: false },
+    ],
+  },
+};
+
+export const CalendarAppsOnly: Story = {
+  args: {
+    apps: mockApps.filter((app) => app.categories.includes("calendar")),
+    categories: ["calendar"],
+  },
+};
+
+export const ConferencingAppsOnly: Story = {
+  args: {
+    apps: mockApps.filter((app) => app.categories.includes("conferencing")),
+    categories: ["conferencing"],
+  },
+};
+
+export const CRMAppsOnly: Story = {
+  args: {
+    apps: mockApps.filter((app) => app.categories.includes("crm")),
+    categories: ["crm"],
+  },
+};
+
+export const LargeDataset: Story = {
+  args: {
+    apps: [
+      ...mockApps,
+      ...mockApps.map((app) => ({
+        ...app,
+        name: `${app.name} Alternative`,
+        slug: `${app.slug}-alt`,
+      })),
+      ...mockApps.map((app) => ({
+        ...app,
+        name: `${app.name} Pro`,
+        slug: `${app.slug}-pro`,
+      })),
+    ],
+    categories: ["calendar", "conferencing", "payment", "crm", "automation"],
+  },
+};
diff --git a/packages/features/apps/components/AppCard.stories.tsx b/packages/features/apps/components/AppCard.stories.tsx
new file mode 100644
index 00000000000000..8abeb5979e8ad2
--- /dev/null
+++ b/packages/features/apps/components/AppCard.stories.tsx
@@ -0,0 +1,450 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import type { AppFrontendPayload as App } from "@calcom/types/App";
+
+import { AppCard } from "./AppCard";
+
+const meta = {
+  component: AppCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    app: {
+      description: "The app configuration object",
+      control: { type: "object" },
+    },
+    credentials: {
+      description: "Array of credentials for the app",
+      control: { type: "object" },
+    },
+    searchText: {
+      description: "Text to highlight in the app name",
+      control: { type: "text" },
+    },
+    userAdminTeams: {
+      description: "Teams where user is admin",
+      control: { type: "object" },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[320px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AppCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock app data
+const createMockApp = (overrides?: Partial<App>): App => ({
+  name: "Zoom",
+  slug: "zoom",
+  type: "zoom_video",
+  variant: "conferencing",
+  logo: "https://cal.com/integrations/zoom.svg",
+  description: "Video conferencing app that allows you to meet with others via video and audio.",
+  publisher: "Zoom Video Communications",
+  url: "https://zoom.us",
+  email: "support@zoom.us",
+  categories: ["video"],
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    app: createMockApp(),
+    credentials: [],
+  },
+};
+
+export const WithLongDescription: Story = {
+  args: {
+    app: createMockApp({
+      name: "Google Calendar",
+      slug: "google-calendar",
+      type: "google_calendar",
+      variant: "calendar",
+      logo: "https://cal.com/integrations/google-calendar.svg",
+      description:
+        "Google Calendar is a time-management and scheduling calendar service developed by Google. It allows users to create and edit events, with event times and details being automatically synchronized across all devices. This integration helps prevent double bookings by checking your availability across multiple calendars.",
+      categories: ["calendar"],
+    }),
+    credentials: [],
+  },
+};
+
+export const InstalledApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "Stripe",
+      slug: "stripe",
+      type: "stripe_payment",
+      variant: "payment",
+      logo: "https://cal.com/integrations/stripe.svg",
+      description: "Accept online payments securely with Stripe integration.",
+      categories: ["payment"],
+    }),
+    credentials: [
+      {
+        id: 1,
+        type: "stripe_payment",
+        key: {},
+        userId: 1,
+        teamId: null,
+        appId: "stripe",
+        invalid: false,
+        subscriptionId: null,
+        paymentStatus: null,
+        billingCycleStart: null,
+      },
+    ],
+  },
+};
+
+export const MultipleInstallations: Story = {
+  args: {
+    app: createMockApp({
+      name: "Google Calendar",
+      slug: "google-calendar",
+      type: "google_calendar",
+      variant: "calendar",
+      logo: "https://cal.com/integrations/google-calendar.svg",
+      description: "Sync your Google Calendar to prevent double bookings.",
+      categories: ["calendar"],
+    }),
+    credentials: [
+      {
+        id: 1,
+        type: "google_calendar",
+        key: {},
+        userId: 1,
+        teamId: null,
+        appId: "google-calendar",
+        invalid: false,
+        subscriptionId: null,
+        paymentStatus: null,
+        billingCycleStart: null,
+      },
+      {
+        id: 2,
+        type: "google_calendar",
+        key: {},
+        userId: 1,
+        teamId: null,
+        appId: "google-calendar",
+        invalid: false,
+        subscriptionId: null,
+        paymentStatus: null,
+        billingCycleStart: null,
+      },
+    ],
+  },
+};
+
+export const GlobalApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "Cal Video",
+      slug: "cal-video",
+      type: "cal_video",
+      variant: "conferencing",
+      logo: "https://cal.com/api/app-store/cal-video/icon.svg",
+      description: "Cal.com's own video conferencing solution, built-in and ready to use.",
+      categories: ["video"],
+      isGlobal: true,
+    }),
+  },
+};
+
+export const DefaultApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "Cal Video",
+      slug: "cal-video",
+      type: "cal_video",
+      variant: "conferencing",
+      logo: "https://cal.com/api/app-store/cal-video/icon.svg",
+      description: "Cal.com's own video conferencing solution.",
+      categories: ["video"],
+      isDefault: true,
+    }),
+    credentials: [],
+  },
+};
+
+export const TemplateApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "Custom App Template",
+      slug: "custom-app-template",
+      type: "custom_other",
+      variant: "other",
+      logo: "https://cal.com/api/app-store/_example/icon.svg",
+      description: "A template for creating custom apps with Cal.com.",
+      categories: ["other"],
+      isTemplate: true,
+    }),
+    credentials: [],
+  },
+};
+
+export const PaidApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "Cal.ai",
+      slug: "cal-ai",
+      type: "cal-ai_automation",
+      variant: "automation",
+      logo: "https://cal.com/api/app-store/cal-ai/icon.svg",
+      description: "AI-powered scheduling assistant that helps you manage your calendar intelligently.",
+      categories: ["automation"],
+      paid: {
+        priceInUsd: 29,
+        priceId: "price_123",
+        mode: "subscription",
+      },
+    }),
+    credentials: [],
+  },
+};
+
+export const PaidAppWithTrial: Story = {
+  args: {
+    app: createMockApp({
+      name: "Cal.ai",
+      slug: "cal-ai",
+      type: "cal-ai_automation",
+      variant: "automation",
+      logo: "https://cal.com/api/app-store/cal-ai/icon.svg",
+      description: "AI-powered scheduling assistant with a 14-day free trial.",
+      categories: ["automation"],
+      paid: {
+        priceInUsd: 29,
+        priceId: "price_123",
+        trial: 14,
+        mode: "subscription",
+      },
+    }),
+    credentials: [],
+  },
+};
+
+export const WithSearchHighlight: Story = {
+  args: {
+    app: createMockApp({
+      name: "Zoom Video",
+      slug: "zoom",
+      description: "Video conferencing made easy.",
+    }),
+    searchText: "Video",
+    credentials: [],
+  },
+};
+
+export const TeamsPlanRequired: Story = {
+  args: {
+    app: createMockApp({
+      name: "Advanced Features",
+      slug: "advanced-features",
+      type: "advanced_other",
+      variant: "other",
+      logo: "https://cal.com/api/app-store/_example/icon.svg",
+      description: "Premium features that require a teams plan subscription.",
+      categories: ["other"],
+      teamsPlanRequired: {
+        upgradeUrl: "https://cal.com/upgrade",
+      },
+    }),
+    credentials: [],
+  },
+};
+
+export const ConferencingApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "Microsoft Teams",
+      slug: "msteams",
+      type: "msteams_video",
+      variant: "conferencing",
+      logo: "https://cal.com/integrations/msteams.svg",
+      description: "Connect your Microsoft Teams account to use it for video meetings.",
+      categories: ["video"],
+      concurrentMeetings: true,
+    }),
+    credentials: [],
+  },
+};
+
+export const CRMApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "HubSpot",
+      slug: "hubspot",
+      type: "hubspot_crm",
+      variant: "crm",
+      logo: "https://cal.com/api/app-store/hubspot/icon.svg",
+      description: "Sync your contacts and meetings with HubSpot CRM automatically.",
+      categories: ["crm"],
+    }),
+    credentials: [],
+  },
+};
+
+export const AutomationApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "Zapier",
+      slug: "zapier",
+      type: "zapier_automation",
+      variant: "automation",
+      logo: "https://cal.com/api/app-store/zapier/icon.svg",
+      description: "Connect Cal.com with 5000+ apps to automate your workflows.",
+      categories: ["automation"],
+    }),
+    credentials: [],
+  },
+};
+
+export const AnalyticsApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "Google Analytics",
+      slug: "ga4",
+      type: "ga4_analytics",
+      variant: "other",
+      logo: "https://cal.com/api/app-store/ga4/icon.svg",
+      description: "Track booking events and user behavior with Google Analytics 4.",
+      categories: ["analytics"],
+    }),
+    credentials: [],
+  },
+};
+
+export const WithDependencies: Story = {
+  args: {
+    app: createMockApp({
+      name: "Dependent App",
+      slug: "dependent-app",
+      type: "dependent_other",
+      variant: "other",
+      logo: "https://cal.com/api/app-store/_example/icon.svg",
+      description: "This app requires another app to be installed first.",
+      categories: ["other"],
+      dependencies: ["google-calendar"],
+      dependencyData: [
+        {
+          name: "Google Calendar",
+          installed: false,
+        },
+      ],
+    }),
+    credentials: [],
+  },
+};
+
+export const DarkLogoApp: Story = {
+  args: {
+    app: createMockApp({
+      name: "GitHub",
+      slug: "github",
+      type: "github_other",
+      variant: "other",
+      logo: "https://cal.com/api/app-store/_example/icon-dark.svg",
+      description: "Integrate with GitHub for developer workflows.",
+      categories: ["other"],
+    }),
+    credentials: [],
+  },
+  parameters: {
+    backgrounds: {
+      default: "dark",
+    },
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 gap-8 p-4">
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Not Installed</h3>
+        <div className="w-80">
+          <AppCard app={createMockApp()} credentials={[]} />
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Installed</h3>
+        <div className="w-80">
+          <AppCard
+            app={createMockApp()}
+            credentials={[
+              {
+                id: 1,
+                type: "zoom_video",
+                key: {},
+                userId: 1,
+                teamId: null,
+                appId: "zoom",
+                invalid: false,
+                subscriptionId: null,
+                paymentStatus: null,
+                billingCycleStart: null,
+              },
+            ]}
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Default App</h3>
+        <div className="w-80">
+          <AppCard
+            app={createMockApp({
+              isDefault: true,
+            })}
+            credentials={[]}
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Template App</h3>
+        <div className="w-80">
+          <AppCard
+            app={createMockApp({
+              isTemplate: true,
+            })}
+            credentials={[]}
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Paid App</h3>
+        <div className="w-80">
+          <AppCard
+            app={createMockApp({
+              paid: {
+                priceInUsd: 29,
+                priceId: "price_123",
+                mode: "subscription",
+              },
+            })}
+            credentials={[]}
+          />
+        </div>
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">With Search Highlight</h3>
+        <div className="w-80">
+          <AppCard app={createMockApp({ name: "Zoom Video" })} searchText="Video" credentials={[]} />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+  decorators: [],
+};
diff --git a/packages/features/apps/components/AppList.stories.tsx b/packages/features/apps/components/AppList.stories.tsx
new file mode 100644
index 00000000000000..a9335c3bd4230e
--- /dev/null
+++ b/packages/features/apps/components/AppList.stories.tsx
@@ -0,0 +1,468 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import type { AppCardApp } from "@calcom/app-store/types";
+
+import { AppList } from "./AppList";
+
+const meta = {
+  component: AppList,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AppList>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock data helpers
+const createMockApp = (overrides?: Partial<AppCardApp>): AppCardApp => {
+  const baseApp = {
+    name: "Zoom",
+    slug: "zoom",
+    type: "zoom_video",
+    variant: "conferencing",
+    logo: "/api/app-store/zoomvideo/icon.svg",
+    description: "Video conferencing platform for online meetings and webinars.",
+    publisher: "Zoom Video Communications",
+    url: "https://zoom.us",
+    email: "support@zoom.us",
+    categories: ["video" as const],
+    userCredentialIds: [1],
+    invalidCredentialIds: [],
+    teams: [],
+    isInstalled: true,
+    dependencyData: [],
+    dirName: "zoomvideo",
+    ...overrides,
+  } as AppCardApp;
+  return baseApp;
+};
+
+const mockHandleDisconnect = fn();
+const mockHandleUpdateUserDefaultConferencingApp = fn();
+const mockHandleBulkUpdateDefaultLocation = fn();
+const mockHandleConnectDisconnectIntegrationMenuToggle = fn();
+const mockHandleBulkEditDialogToggle = fn();
+
+const defaultArgs = {
+  handleDisconnect: mockHandleDisconnect,
+  handleUpdateUserDefaultConferencingApp: mockHandleUpdateUserDefaultConferencingApp,
+  handleBulkUpdateDefaultLocation: mockHandleBulkUpdateDefaultLocation,
+  handleConnectDisconnectIntegrationMenuToggle: mockHandleConnectDisconnectIntegrationMenuToggle,
+  handleBulkEditDialogToggle: mockHandleBulkEditDialogToggle,
+  defaultConferencingApp: {
+    appSlug: "daily-video",
+    appLink: null,
+  },
+  isBulkUpdateDefaultLocationPending: false,
+  eventTypes: [],
+  isEventTypesFetching: false,
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    data: {
+      items: [
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing for online meetings",
+          userCredentialIds: [1],
+        }),
+        createMockApp({
+          name: "Google Meet",
+          slug: "google-meet",
+          logo: "/api/app-store/googlevideo/icon.svg",
+          description: "Google's video conferencing solution",
+          userCredentialIds: [2],
+        }),
+        createMockApp({
+          name: "Microsoft Teams",
+          slug: "msteams",
+          logo: "/api/app-store/office365video/icon.svg",
+          description: "Microsoft's collaboration platform",
+          userCredentialIds: [3],
+        }),
+      ],
+    },
+  },
+};
+
+export const ConferencingApps: Story = {
+  args: {
+    ...defaultArgs,
+    variant: "conferencing",
+    data: {
+      items: [
+        createMockApp({
+          name: "Cal Video",
+          slug: "daily-video",
+          logo: "/api/app-store/daily-video/icon.svg",
+          description: "Cal.com's built-in video conferencing solution",
+          userCredentialIds: [1],
+          isGlobal: true,
+        }),
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [2],
+        }),
+        createMockApp({
+          name: "Google Meet",
+          slug: "google-meet",
+          logo: "/api/app-store/googlevideo/icon.svg",
+          description: "Google's video conferencing solution",
+          userCredentialIds: [3],
+        }),
+      ],
+    },
+    defaultConferencingApp: {
+      appSlug: "daily-video",
+      appLink: null,
+    },
+  },
+};
+
+export const WithDefaultApp: Story = {
+  args: {
+    ...defaultArgs,
+    variant: "conferencing",
+    data: {
+      items: [
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [1],
+        }),
+      ],
+    },
+    defaultConferencingApp: {
+      appSlug: "zoom",
+      appLink: null,
+    },
+  },
+};
+
+export const WithInvalidCredentials: Story = {
+  args: {
+    ...defaultArgs,
+    data: {
+      items: [
+        createMockApp({
+          name: "Google Calendar",
+          slug: "google-calendar",
+          logo: "/api/app-store/google-calendar/icon.svg",
+          description: "Sync your Google Calendar",
+          userCredentialIds: [1],
+          invalidCredentialIds: [1],
+        }),
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [2],
+        }),
+      ],
+    },
+  },
+};
+
+export const WithTeamCredentials: Story = {
+  args: {
+    ...defaultArgs,
+    data: {
+      items: [
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [1],
+          teams: [
+            {
+              teamId: 1,
+              name: "Engineering Team",
+              logoUrl: null,
+              credentialId: 10,
+              isAdmin: true,
+            },
+            {
+              teamId: 2,
+              name: "Sales Team",
+              logoUrl: "/team-logo.png",
+              credentialId: 11,
+              isAdmin: false,
+            },
+          ],
+        }),
+      ],
+    },
+  },
+};
+
+export const WithReadOnlyTeamCredentials: Story = {
+  args: {
+    ...defaultArgs,
+    data: {
+      items: [
+        createMockApp({
+          name: "Google Meet",
+          slug: "google-meet",
+          logo: "/api/app-store/googlevideo/icon.svg",
+          description: "Google's video conferencing solution",
+          userCredentialIds: [],
+          teams: [
+            {
+              teamId: 1,
+              name: "Engineering Team",
+              logoUrl: null,
+              credentialId: 10,
+              isAdmin: false,
+            },
+          ],
+        }),
+      ],
+    },
+  },
+};
+
+export const MixedApps: Story = {
+  args: {
+    ...defaultArgs,
+    variant: "conferencing",
+    data: {
+      items: [
+        createMockApp({
+          name: "Cal Video",
+          slug: "daily-video",
+          logo: "/api/app-store/daily-video/icon.svg",
+          description: "Cal.com's built-in video conferencing",
+          userCredentialIds: [1],
+          isGlobal: true,
+        }),
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [2],
+          teams: [
+            {
+              teamId: 1,
+              name: "Engineering Team",
+              logoUrl: null,
+              credentialId: 10,
+              isAdmin: true,
+            },
+          ],
+        }),
+        createMockApp({
+          name: "Google Meet",
+          slug: "google-meet",
+          logo: "/api/app-store/googlevideo/icon.svg",
+          description: "Google's video conferencing",
+          userCredentialIds: [3],
+          invalidCredentialIds: [3],
+        }),
+        createMockApp({
+          name: "Microsoft Teams",
+          slug: "msteams",
+          logo: "/api/app-store/office365video/icon.svg",
+          description: "Microsoft's collaboration platform",
+          userCredentialIds: [],
+          teams: [
+            {
+              teamId: 2,
+              name: "Sales Team",
+              logoUrl: null,
+              credentialId: 11,
+              isAdmin: false,
+            },
+          ],
+        }),
+      ],
+    },
+    defaultConferencingApp: {
+      appSlug: "daily-video",
+      appLink: null,
+    },
+  },
+};
+
+export const EmptyList: Story = {
+  args: {
+    ...defaultArgs,
+    data: {
+      items: [],
+    },
+  },
+};
+
+export const SingleApp: Story = {
+  args: {
+    ...defaultArgs,
+    data: {
+      items: [
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform for online meetings and webinars",
+          userCredentialIds: [1],
+        }),
+      ],
+    },
+  },
+};
+
+export const WithEventTypes: Story = {
+  args: {
+    ...defaultArgs,
+    variant: "conferencing",
+    data: {
+      items: [
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [1],
+        }),
+      ],
+    },
+    eventTypes: [
+      {
+        id: 1,
+        title: "30 Min Meeting",
+        slug: "30min",
+        length: 30,
+      },
+      {
+        id: 2,
+        title: "Discovery Call",
+        slug: "discovery",
+        length: 60,
+      },
+    ],
+  },
+};
+
+export const LoadingEventTypes: Story = {
+  args: {
+    ...defaultArgs,
+    variant: "conferencing",
+    data: {
+      items: [
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [1],
+        }),
+      ],
+    },
+    isEventTypesFetching: true,
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    ...defaultArgs,
+    data: {
+      items: [
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [1],
+        }),
+        createMockApp({
+          name: "Google Meet",
+          slug: "google-meet",
+          logo: "/api/app-store/googlevideo/icon.svg",
+          description: "Google's video conferencing solution",
+          userCredentialIds: [2],
+        }),
+      ],
+    },
+    listClassName: "border-2 border-blue-500 rounded-lg p-4",
+  },
+};
+
+export const MultipleTeamInstallations: Story = {
+  args: {
+    ...defaultArgs,
+    variant: "conferencing",
+    data: {
+      items: [
+        createMockApp({
+          name: "Zoom",
+          slug: "zoom",
+          logo: "/api/app-store/zoomvideo/icon.svg",
+          description: "Video conferencing platform",
+          userCredentialIds: [1],
+          teams: [
+            {
+              teamId: 1,
+              name: "Engineering Team",
+              logoUrl: null,
+              credentialId: 10,
+              isAdmin: true,
+            },
+            {
+              teamId: 2,
+              name: "Marketing Team",
+              logoUrl: null,
+              credentialId: 11,
+              isAdmin: true,
+            },
+            {
+              teamId: 3,
+              name: "Sales Team",
+              logoUrl: null,
+              credentialId: 12,
+              isAdmin: false,
+            },
+          ],
+        }),
+      ],
+    },
+  },
+};
+
+export const GlobalApp: Story = {
+  args: {
+    ...defaultArgs,
+    data: {
+      items: [
+        createMockApp({
+          name: "Cal Video",
+          slug: "daily-video",
+          logo: "/api/app-store/daily-video/icon.svg",
+          description: "Cal.com's built-in video conferencing solution",
+          userCredentialIds: [],
+          isGlobal: true,
+          teams: [],
+        }),
+      ],
+    },
+  },
+};
diff --git a/packages/features/apps/components/AppListCard.stories.tsx b/packages/features/apps/components/AppListCard.stories.tsx
new file mode 100644
index 00000000000000..6457011689d90c
--- /dev/null
+++ b/packages/features/apps/components/AppListCard.stories.tsx
@@ -0,0 +1,189 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Button } from "@calcom/ui/components/button";
+
+import AppListCard from "./AppListCard";
+
+const meta = {
+  component: AppListCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AppListCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Google Calendar",
+    description: "Sync your Google Calendar to check for conflicts and create events.",
+  },
+};
+
+export const WithLogo: Story = {
+  args: {
+    title: "Zoom",
+    description: "Video conferencing platform for online meetings and webinars.",
+    logo: "/api/app-store/zoomvideo/icon.svg",
+  },
+};
+
+export const WithDefaultBadge: Story = {
+  args: {
+    title: "Cal Video",
+    description: "Built-in video conferencing solution for your meetings.",
+    logo: "/api/app-store/daily-video/icon.svg",
+    isDefault: true,
+  },
+};
+
+export const WithTemplateBadge: Story = {
+  args: {
+    title: "Custom Integration",
+    description: "A template for building custom integrations.",
+    isTemplate: true,
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    title: "Google Meet",
+    description: "Add Google Meet video conferencing to your events.",
+    logo: "/api/app-store/around/icon.svg",
+    actions: (
+      <div className="flex gap-2">
+        <Button size="sm" color="secondary">
+          Edit
+        </Button>
+        <Button size="sm" color="destructive">
+          Remove
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const InvalidCredential: Story = {
+  args: {
+    title: "Outlook Calendar",
+    description: "Sync with Microsoft Outlook Calendar.",
+    logo: "/api/app-store/office365-calendar/icon.svg",
+    invalidCredential: true,
+  },
+};
+
+export const WithCredentialOwner: Story = {
+  args: {
+    title: "Google Calendar",
+    description: "Sync your Google Calendar to check for conflicts and create events.",
+    logo: "/api/app-store/google-calendar/icon.svg",
+    credentialOwner: {
+      name: "John Doe",
+      avatar: null,
+      email: "john@example.com",
+    },
+  },
+};
+
+export const WithHighlight: Story = {
+  args: {
+    title: "New Integration",
+    description: "This integration was just added and is highlighted.",
+    logo: "/api/app-store/stripepayment/icon.svg",
+    slug: "new-integration",
+    shouldHighlight: true,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    title: "Stripe",
+    description: "Accept payments for your bookings.",
+    logo: "/api/app-store/stripepayment/icon.svg",
+    children: (
+      <div className="border-subtle border-t px-6 py-3">
+        <p className="text-subtle text-sm">Connected account: acct_1234567890</p>
+      </div>
+    ),
+  },
+};
+
+export const ComplexExample: Story = {
+  args: {
+    title: "Google Calendar",
+    description: "Sync your Google Calendar to check for conflicts and create events.",
+    logo: "/api/app-store/google-calendar/icon.svg",
+    isDefault: true,
+    credentialOwner: {
+      name: "Jane Smith",
+      avatar: null,
+      email: "jane@example.com",
+    },
+    actions: (
+      <div className="flex gap-2">
+        <Button size="sm" color="secondary">
+          Configure
+        </Button>
+        <Button size="sm" color="destructive">
+          Disconnect
+        </Button>
+      </div>
+    ),
+    children: (
+      <div className="border-subtle border-t px-6 py-3">
+        <div className="flex flex-col gap-2">
+          <p className="text-subtle text-xs">Last synced: 2 minutes ago</p>
+          <p className="text-subtle text-xs">Calendars connected: 3</p>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const MultipleApps: Story = {
+  render: () => (
+    <div className="divide-subtle w-[600px] divide-y">
+      <AppListCard
+        title="Google Calendar"
+        description="Sync your Google Calendar to check for conflicts."
+        logo="/api/app-store/google-calendar/icon.svg"
+        isDefault
+        actions={
+          <Button size="sm" color="secondary">
+            Configure
+          </Button>
+        }
+      />
+      <AppListCard
+        title="Zoom"
+        description="Video conferencing for online meetings."
+        logo="/api/app-store/zoomvideo/icon.svg"
+        actions={
+          <Button size="sm" color="secondary">
+            Configure
+          </Button>
+        }
+      />
+      <AppListCard
+        title="Stripe"
+        description="Accept payments for your bookings."
+        logo="/api/app-store/stripepayment/icon.svg"
+        invalidCredential
+        actions={
+          <Button size="sm" color="destructive">
+            Reconnect
+          </Button>
+        }
+      />
+    </div>
+  ),
+};
diff --git a/packages/features/apps/components/AppListCardWebWrapper.stories.tsx b/packages/features/apps/components/AppListCardWebWrapper.stories.tsx
new file mode 100644
index 00000000000000..2e07a15f780aeb
--- /dev/null
+++ b/packages/features/apps/components/AppListCardWebWrapper.stories.tsx
@@ -0,0 +1,194 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Button } from "@calcom/ui/components/button";
+import AppListCardWebWrapper from "./AppListCardWebWrapper";
+
+const meta = {
+  component: AppListCardWebWrapper,
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps",
+        query: {},
+      },
+    },
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AppListCardWebWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Google Calendar",
+    description: "Sync your Google Calendar to check for conflicts and create events.",
+    slug: "google-calendar",
+  },
+};
+
+export const WithLogo: Story = {
+  args: {
+    title: "Zoom",
+    description: "Video conferencing platform for online meetings and webinars.",
+    logo: "https://app.cal.com/api/app-store/zoomvideo/icon.svg",
+    slug: "zoom",
+  },
+};
+
+export const WithDefaultBadge: Story = {
+  args: {
+    title: "Cal Video",
+    description: "Built-in video conferencing solution for your meetings.",
+    isDefault: true,
+    slug: "cal-video",
+  },
+};
+
+export const WithTemplateBadge: Story = {
+  args: {
+    title: "Custom Integration",
+    description: "A template for building custom integrations.",
+    isTemplate: true,
+    slug: "custom-integration",
+  },
+};
+
+export const WithActions: Story = {
+  args: {
+    title: "Google Meet",
+    description: "Add Google Meet video conferencing to your events.",
+    slug: "google-meet",
+    actions: (
+      <div className="flex gap-2">
+        <Button size="sm" color="secondary">
+          Edit
+        </Button>
+        <Button size="sm" color="destructive">
+          Remove
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const InvalidCredential: Story = {
+  args: {
+    title: "Outlook Calendar",
+    description: "Sync with Microsoft Outlook Calendar.",
+    invalidCredential: true,
+    slug: "outlook-calendar",
+  },
+};
+
+export const Highlighted: Story = {
+  args: {
+    title: "New Integration",
+    description: "This integration was just added and is highlighted.",
+    slug: "new-integration",
+    shouldHighlight: true,
+  },
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+      navigation: {
+        pathname: "/apps",
+        query: {
+          hl: "new-integration",
+        },
+      },
+    },
+  },
+};
+
+export const WithCredentialOwner: Story = {
+  args: {
+    title: "Stripe",
+    description: "Accept payments for your bookings.",
+    slug: "stripe",
+    credentialOwner: {
+      name: "John Doe",
+      avatar: "https://avatar.vercel.sh/john-doe.svg",
+    },
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    title: "Stripe",
+    description: "Accept payments for your bookings.",
+    slug: "stripe",
+    children: (
+      <div className="border-subtle border-t px-6 py-3">
+        <p className="text-subtle text-sm">Connected account: acct_1234567890</p>
+      </div>
+    ),
+  },
+};
+
+export const CompleteExample: Story = {
+  args: {
+    title: "Salesforce",
+    description: "Sync your bookings with Salesforce CRM to keep your sales team informed.",
+    logo: "https://app.cal.com/api/app-store/salesforce/icon.svg",
+    slug: "salesforce",
+    credentialOwner: {
+      name: "Jane Smith",
+      avatar: "https://avatar.vercel.sh/jane-smith.svg",
+    },
+    actions: (
+      <div className="flex gap-2">
+        <Button size="sm" color="secondary">
+          Configure
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const MultipleApps: Story = {
+  render: () => (
+    <div className="divide-subtle divide-y">
+      <AppListCardWebWrapper
+        title="Google Calendar"
+        description="Sync your Google Calendar."
+        slug="google-calendar"
+        isDefault
+        actions={
+          <Button size="sm" color="secondary">
+            Configure
+          </Button>
+        }
+      />
+      <AppListCardWebWrapper
+        title="Zoom"
+        description="Video conferencing for meetings."
+        slug="zoom"
+        actions={
+          <Button size="sm" color="secondary">
+            Configure
+          </Button>
+        }
+      />
+      <AppListCardWebWrapper
+        title="Stripe"
+        description="Accept payments."
+        slug="stripe"
+        actions={
+          <Button size="sm" color="secondary">
+            Configure
+          </Button>
+        }
+      />
+    </div>
+  ),
+};
diff --git a/packages/features/apps/components/AppSetDefaultLinkDialog.stories.tsx b/packages/features/apps/components/AppSetDefaultLinkDialog.stories.tsx
new file mode 100644
index 00000000000000..53cd343a98e7e3
--- /dev/null
+++ b/packages/features/apps/components/AppSetDefaultLinkDialog.stories.tsx
@@ -0,0 +1,341 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+import { useState } from "react";
+
+import type { EventLocationType } from "@calcom/app-store/locations";
+
+import { AppSetDefaultLinkDialog } from "./AppSetDefaultLinkDialog";
+import type { UpdateUsersDefaultConferencingAppParams } from "./AppSetDefaultLinkDialog";
+
+const meta = {
+  component: AppSetDefaultLinkDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof AppSetDefaultLinkDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock location type for Zoom
+const mockZoomLocationType: EventLocationType & { slug: string } = {
+  default: false,
+  type: "integrations:zoom",
+  label: "Zoom Video",
+  organizerInputType: "text",
+  organizerInputPlaceholder: "https://zoom.us/j/1234567890",
+  variable: "locationLink",
+  defaultValueVariable: "link",
+  iconUrl: "/api/app-store/zoomvideo/icon.svg",
+  slug: "zoom",
+  urlRegExp: "^https:\\/\\/(.*)\\.?zoom\\.us\\/.*",
+  category: "conferencing",
+  linkType: "dynamic",
+  messageForOrganizer: "Use Zoom for this meeting",
+};
+
+// Mock location type for Google Meet
+const mockGoogleMeetLocationType: EventLocationType & { slug: string } = {
+  default: false,
+  type: "integrations:google:meet",
+  label: "Google Meet",
+  organizerInputType: "text",
+  organizerInputPlaceholder: "https://meet.google.com/abc-defg-hij",
+  variable: "locationLink",
+  defaultValueVariable: "link",
+  iconUrl: "/api/app-store/googlevideo/icon.svg",
+  slug: "google-meet",
+  urlRegExp: "^https:\\/\\/meet\\.google\\.com\\/.*",
+  category: "conferencing",
+  linkType: "dynamic",
+  messageForOrganizer: "Use Google Meet for this meeting",
+};
+
+// Mock location type for Microsoft Teams
+const mockTeamsLocationType: EventLocationType & { slug: string } = {
+  default: false,
+  type: "integrations:msteams",
+  label: "Microsoft Teams",
+  organizerInputType: "text",
+  organizerInputPlaceholder: "https://teams.microsoft.com/l/meetup-join/...",
+  variable: "locationLink",
+  defaultValueVariable: "link",
+  iconUrl: "/api/app-store/office365video/icon.svg",
+  slug: "msteams",
+  urlRegExp: "^https:\\/\\/teams\\.microsoft\\.com\\/.*",
+  category: "conferencing",
+  linkType: "dynamic",
+  messageForOrganizer: "Use Microsoft Teams for this meeting",
+};
+
+// Mock location type for a custom video link
+const mockCustomVideoLocationType: EventLocationType & { slug: string } = {
+  default: true,
+  type: "link",
+  label: "Video Link",
+  organizerInputType: "text",
+  organizerInputPlaceholder: "https://example.com/meeting",
+  variable: "locationLink",
+  defaultValueVariable: "link",
+  iconUrl: "/link.svg",
+  slug: "link",
+  urlRegExp: "^https?:\\/\\/.*",
+  category: "conferencing",
+  linkType: "static",
+  messageForOrganizer: "Use custom video link for this meeting",
+};
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [locationType, setLocationType] = useState<
+      (EventLocationType & { slug: string }) | undefined
+    >(mockZoomLocationType);
+
+    return (
+      <div>
+        <button
+          onClick={() => setLocationType(mockZoomLocationType)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Dialog
+        </button>
+        {locationType && (
+          <AppSetDefaultLinkDialog
+            locationType={locationType}
+            setLocationType={setLocationType}
+            onSuccess={fn()}
+            handleUpdateUserDefaultConferencingApp={fn()}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+export const ZoomDialog: Story = {
+  render: function ZoomStory() {
+    const [locationType, setLocationType] = useState<
+      (EventLocationType & { slug: string }) | undefined
+    >(mockZoomLocationType);
+
+    const handleUpdate = (params: UpdateUsersDefaultConferencingAppParams) => {
+      console.log("Updating Zoom link:", params);
+      params.onSuccessCallback();
+    };
+
+    return (
+      <div>
+        <button
+          onClick={() => setLocationType(mockZoomLocationType)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Set Zoom Link
+        </button>
+        {locationType && (
+          <AppSetDefaultLinkDialog
+            locationType={locationType}
+            setLocationType={setLocationType}
+            onSuccess={() => console.log("Success!")}
+            handleUpdateUserDefaultConferencingApp={handleUpdate}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+export const GoogleMeetDialog: Story = {
+  render: function GoogleMeetStory() {
+    const [locationType, setLocationType] = useState<
+      (EventLocationType & { slug: string }) | undefined
+    >(mockGoogleMeetLocationType);
+
+    const handleUpdate = (params: UpdateUsersDefaultConferencingAppParams) => {
+      console.log("Updating Google Meet link:", params);
+      params.onSuccessCallback();
+    };
+
+    return (
+      <div>
+        <button
+          onClick={() => setLocationType(mockGoogleMeetLocationType)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Set Google Meet Link
+        </button>
+        {locationType && (
+          <AppSetDefaultLinkDialog
+            locationType={locationType}
+            setLocationType={setLocationType}
+            onSuccess={() => console.log("Success!")}
+            handleUpdateUserDefaultConferencingApp={handleUpdate}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+export const MicrosoftTeamsDialog: Story = {
+  render: function TeamsStory() {
+    const [locationType, setLocationType] = useState<
+      (EventLocationType & { slug: string }) | undefined
+    >(mockTeamsLocationType);
+
+    const handleUpdate = (params: UpdateUsersDefaultConferencingAppParams) => {
+      console.log("Updating Microsoft Teams link:", params);
+      params.onSuccessCallback();
+    };
+
+    return (
+      <div>
+        <button
+          onClick={() => setLocationType(mockTeamsLocationType)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Set Microsoft Teams Link
+        </button>
+        {locationType && (
+          <AppSetDefaultLinkDialog
+            locationType={locationType}
+            setLocationType={setLocationType}
+            onSuccess={() => console.log("Success!")}
+            handleUpdateUserDefaultConferencingApp={handleUpdate}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+export const CustomVideoLinkDialog: Story = {
+  render: function CustomVideoStory() {
+    const [locationType, setLocationType] = useState<
+      (EventLocationType & { slug: string }) | undefined
+    >(mockCustomVideoLocationType);
+
+    const handleUpdate = (params: UpdateUsersDefaultConferencingAppParams) => {
+      console.log("Updating custom video link:", params);
+      params.onSuccessCallback();
+    };
+
+    return (
+      <div>
+        <button
+          onClick={() => setLocationType(mockCustomVideoLocationType)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Set Custom Video Link
+        </button>
+        {locationType && (
+          <AppSetDefaultLinkDialog
+            locationType={locationType}
+            setLocationType={setLocationType}
+            onSuccess={() => console.log("Success!")}
+            handleUpdateUserDefaultConferencingApp={handleUpdate}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+export const WithErrorHandling: Story = {
+  render: function ErrorStory() {
+    const [locationType, setLocationType] = useState<
+      (EventLocationType & { slug: string }) | undefined
+    >(mockZoomLocationType);
+
+    const handleUpdate = (params: UpdateUsersDefaultConferencingAppParams) => {
+      console.log("Simulating error for link:", params.appLink);
+      // Simulate error callback
+      params.onErrorCallback();
+    };
+
+    return (
+      <div>
+        <button
+          onClick={() => setLocationType(mockZoomLocationType)}
+          className="rounded-md bg-red-600 px-4 py-2 text-white hover:bg-red-700">
+          Open Dialog (Error Scenario)
+        </button>
+        {locationType && (
+          <AppSetDefaultLinkDialog
+            locationType={locationType}
+            setLocationType={setLocationType}
+            onSuccess={() => console.log("Success!")}
+            handleUpdateUserDefaultConferencingApp={handleUpdate}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+export const AlreadyOpen: Story = {
+  render: function AlreadyOpenStory() {
+    const [locationType, setLocationType] = useState<
+      (EventLocationType & { slug: string }) | undefined
+    >(mockZoomLocationType);
+
+    const handleUpdate = (params: UpdateUsersDefaultConferencingAppParams) => {
+      console.log("Updating link:", params);
+      setTimeout(() => {
+        params.onSuccessCallback();
+      }, 1000);
+    };
+
+    return (
+      <AppSetDefaultLinkDialog
+        locationType={locationType}
+        setLocationType={setLocationType}
+        onSuccess={() => console.log("Success!")}
+        handleUpdateUserDefaultConferencingApp={handleUpdate}
+      />
+    );
+  },
+};
+
+export const MultipleApps: Story = {
+  render: function MultipleAppsStory() {
+    const [locationType, setLocationType] = useState<
+      (EventLocationType & { slug: string }) | undefined
+    >();
+
+    const handleUpdate = (params: UpdateUsersDefaultConferencingAppParams) => {
+      console.log("Updating link:", params);
+      params.onSuccessCallback();
+    };
+
+    return (
+      <div className="flex flex-col gap-4">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setLocationType(mockZoomLocationType)}
+            className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+            Zoom
+          </button>
+          <button
+            onClick={() => setLocationType(mockGoogleMeetLocationType)}
+            className="rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700">
+            Google Meet
+          </button>
+          <button
+            onClick={() => setLocationType(mockTeamsLocationType)}
+            className="rounded-md bg-purple-600 px-4 py-2 text-white hover:bg-purple-700">
+            Teams
+          </button>
+          <button
+            onClick={() => setLocationType(mockCustomVideoLocationType)}
+            className="rounded-md bg-gray-600 px-4 py-2 text-white hover:bg-gray-700">
+            Custom
+          </button>
+        </div>
+        {locationType && (
+          <AppSetDefaultLinkDialog
+            locationType={locationType}
+            setLocationType={setLocationType}
+            onSuccess={() => console.log("Success!")}
+            handleUpdateUserDefaultConferencingApp={handleUpdate}
+          />
+        )}
+      </div>
+    );
+  },
+};
diff --git a/packages/features/apps/components/CredentialActionsDropdown.stories.tsx b/packages/features/apps/components/CredentialActionsDropdown.stories.tsx
new file mode 100644
index 00000000000000..cf9ae1e1d2f1b7
--- /dev/null
+++ b/packages/features/apps/components/CredentialActionsDropdown.stories.tsx
@@ -0,0 +1,183 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCReact } from "@trpc/react-query";
+import { fn } from "storybook/test";
+
+import CredentialActionsDropdown from "./CredentialActionsDropdown";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+// Mock tRPC client
+const mockTrpc = createTRPCReact<any>();
+
+const mockTrpcClient = mockTrpc.createClient({
+  links: [
+    () =>
+      ({ op }) => {
+        return {
+          subscribe: (observer: any) => {
+            observer.next({
+              result: {
+                data: {},
+              },
+            });
+            observer.complete();
+            return {
+              unsubscribe: () => {},
+            };
+          },
+        } as any;
+      },
+  ],
+});
+
+const meta = {
+  component: CredentialActionsDropdown,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <mockTrpc.Provider client={mockTrpcClient} queryClient={queryClient}>
+        <QueryClientProvider client={queryClient}>
+          <div style={{ padding: "50px" }}>
+            <Story />
+          </div>
+        </QueryClientProvider>
+      </mockTrpc.Provider>
+    ),
+  ],
+  argTypes: {
+    credentialId: {
+      description: "The ID of the credential to manage",
+      control: "number",
+    },
+    onSuccess: {
+      description: "Callback function called when the credential is successfully removed",
+      control: false,
+    },
+    delegationCredentialId: {
+      description: "ID of the delegation credential (when present, dropdown is hidden)",
+      control: "text",
+    },
+    disableConnectionModification: {
+      description: "Whether to disable the ability to disconnect the credential",
+      control: "boolean",
+    },
+  },
+  args: {
+    onSuccess: fn(),
+  },
+} satisfies Meta<typeof CredentialActionsDropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    credentialId: 1,
+    delegationCredentialId: null,
+    disableConnectionModification: false,
+  },
+};
+
+export const WithOnSuccessCallback: Story = {
+  args: {
+    credentialId: 2,
+    onSuccess: fn(() => console.log("Credential removed successfully")),
+    delegationCredentialId: null,
+    disableConnectionModification: false,
+  },
+};
+
+export const WithDelegationCredential: Story = {
+  args: {
+    credentialId: 3,
+    delegationCredentialId: "delegation-123",
+    disableConnectionModification: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "When a delegation credential is present, the dropdown is hidden and returns null.",
+      },
+    },
+  },
+};
+
+export const WithDisabledModification: Story = {
+  args: {
+    credentialId: 4,
+    delegationCredentialId: null,
+    disableConnectionModification: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "When connection modification is disabled, the dropdown is hidden and returns null.",
+      },
+    },
+  },
+};
+
+export const DisabledByBothConditions: Story = {
+  args: {
+    credentialId: 5,
+    delegationCredentialId: "delegation-456",
+    disableConnectionModification: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When both delegation credential is present AND connection modification is disabled, the dropdown is hidden.",
+      },
+    },
+  },
+};
+
+export const MultipleDropdowns: Story = {
+  render: () => (
+    <div className="flex gap-4 items-center">
+      <div>
+        <p className="text-sm mb-2">Google Calendar</p>
+        <CredentialActionsDropdown
+          credentialId={10}
+          delegationCredentialId={null}
+          disableConnectionModification={false}
+        />
+      </div>
+      <div>
+        <p className="text-sm mb-2">Outlook Calendar</p>
+        <CredentialActionsDropdown
+          credentialId={11}
+          delegationCredentialId={null}
+          disableConnectionModification={false}
+        />
+      </div>
+      <div>
+        <p className="text-sm mb-2">Apple Calendar</p>
+        <CredentialActionsDropdown
+          credentialId={12}
+          delegationCredentialId={null}
+          disableConnectionModification={false}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story: "Example showing multiple credential action dropdowns in a list.",
+      },
+    },
+  },
+};
diff --git a/packages/features/apps/components/DisconnectIntegration.stories.tsx b/packages/features/apps/components/DisconnectIntegration.stories.tsx
new file mode 100644
index 00000000000000..46a116149c7f57
--- /dev/null
+++ b/packages/features/apps/components/DisconnectIntegration.stories.tsx
@@ -0,0 +1,138 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import DisconnectIntegration from "./DisconnectIntegration";
+
+const meta = {
+  component: DisconnectIntegration,
+  parameters: {
+    layout: "centered",
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    credentialId: {
+      control: "number",
+      description: "The ID of the credential to disconnect",
+    },
+    teamId: {
+      control: "number",
+      description: "Optional team ID if this is a team credential",
+    },
+    label: {
+      control: "text",
+      description: "Optional button label text",
+    },
+    trashIcon: {
+      control: "boolean",
+      description: "Whether to show trash icon",
+    },
+    isGlobal: {
+      control: "boolean",
+      description: "Whether this is a global integration (disables disconnect)",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="flex items-center justify-center p-8">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DisconnectIntegration>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    credentialId: 1,
+    onSuccess: fn(),
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    credentialId: 2,
+    label: "Disconnect",
+    onSuccess: fn(),
+  },
+};
+
+export const WithTrashIcon: Story = {
+  args: {
+    credentialId: 3,
+    trashIcon: true,
+    onSuccess: fn(),
+  },
+};
+
+export const WithTrashIconAndLabel: Story = {
+  args: {
+    credentialId: 4,
+    label: "Remove Integration",
+    trashIcon: true,
+    onSuccess: fn(),
+  },
+};
+
+export const TeamIntegration: Story = {
+  args: {
+    credentialId: 5,
+    teamId: 123,
+    label: "Disconnect Team App",
+    trashIcon: true,
+    onSuccess: fn(),
+  },
+};
+
+export const GlobalIntegration: Story = {
+  args: {
+    credentialId: 6,
+    label: "Global Integration",
+    trashIcon: true,
+    isGlobal: true,
+    onSuccess: fn(),
+  },
+};
+
+export const CustomButtonProps: Story = {
+  args: {
+    credentialId: 7,
+    label: "Custom Style",
+    buttonProps: {
+      color: "secondary",
+      size: "sm",
+    },
+    onSuccess: fn(),
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex items-center gap-4">
+        <DisconnectIntegration credentialId={10} onSuccess={fn()} />
+        <span className="text-subtle text-sm">Default (no label, no icon)</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <DisconnectIntegration credentialId={11} label="Disconnect" onSuccess={fn()} />
+        <span className="text-subtle text-sm">With label</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <DisconnectIntegration credentialId={12} trashIcon onSuccess={fn()} />
+        <span className="text-subtle text-sm">Icon only</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <DisconnectIntegration credentialId={13} label="Remove App" trashIcon onSuccess={fn()} />
+        <span className="text-subtle text-sm">Icon with label</span>
+      </div>
+      <div className="flex items-center gap-4">
+        <DisconnectIntegration credentialId={14} label="Global App" isGlobal onSuccess={fn()} />
+        <span className="text-subtle text-sm">Global (disabled)</span>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/features/apps/components/Slider.stories.tsx b/packages/features/apps/components/Slider.stories.tsx
new file mode 100644
index 00000000000000..37da86a8227257
--- /dev/null
+++ b/packages/features/apps/components/Slider.stories.tsx
@@ -0,0 +1,277 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Slider } from "./Slider";
+
+const meta = {
+  component: Slider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      description: "Title displayed above the slider",
+      control: "text",
+    },
+    className: {
+      description: "Additional CSS classes for the slider container",
+      control: "text",
+    },
+    items: {
+      description: "Array of items to display in the slider",
+      control: "object",
+    },
+    options: {
+      description: "Glide.js options for carousel configuration",
+      control: "object",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample card component for demo purposes
+const SampleCard = ({ title, description }: { title: string; description: string }) => (
+  <div className="bg-default border-subtle hover:border-emphasis rounded-md border p-4 transition-colors">
+    <h3 className="text-emphasis mb-2 text-lg font-semibold">{title}</h3>
+    <p className="text-subtle text-sm">{description}</p>
+  </div>
+);
+
+// Sample data for stories
+const sampleApps = [
+  { id: "1", name: "Google Calendar", description: "Sync with Google Calendar to manage your schedule" },
+  { id: "2", name: "Zoom", description: "Automatically create Zoom meeting links for your bookings" },
+  { id: "3", name: "Stripe", description: "Accept payments for your services" },
+  { id: "4", name: "Slack", description: "Get notified in Slack when bookings are made" },
+  { id: "5", name: "HubSpot", description: "Sync your contacts and deals with HubSpot CRM" },
+  { id: "6", name: "Salesforce", description: "Connect with Salesforce to manage leads" },
+];
+
+export const Default: Story = {
+  args: {
+    title: "Popular Apps",
+    items: sampleApps,
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 3,
+      gap: 16,
+    },
+  },
+};
+
+export const WithoutTitle: Story = {
+  args: {
+    items: sampleApps.slice(0, 4),
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 3,
+      gap: 16,
+    },
+  },
+};
+
+export const SingleItemPerView: Story = {
+  args: {
+    title: "Featured Integrations",
+    items: sampleApps,
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 1,
+      gap: 20,
+    },
+  },
+};
+
+export const TwoItemsPerView: Story = {
+  args: {
+    title: "App Showcase",
+    items: sampleApps,
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 2,
+      gap: 16,
+    },
+  },
+};
+
+export const FourItemsPerView: Story = {
+  args: {
+    title: "All Apps",
+    items: sampleApps,
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 4,
+      gap: 12,
+    },
+  },
+};
+
+export const SmallGap: Story = {
+  args: {
+    title: "Compact View",
+    items: sampleApps,
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 3,
+      gap: 8,
+    },
+  },
+};
+
+export const LargeGap: Story = {
+  args: {
+    title: "Spacious View",
+    items: sampleApps,
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 3,
+      gap: 32,
+    },
+  },
+};
+
+export const WithAutoplay: Story = {
+  args: {
+    title: "Auto-rotating Apps",
+    items: sampleApps,
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 3,
+      gap: 16,
+      autoplay: 3000,
+      hoverpause: true,
+    },
+  },
+};
+
+export const FewItems: Story = {
+  args: {
+    title: "Limited Apps",
+    items: sampleApps.slice(0, 2),
+    itemKey: (item) => item.id,
+    renderItem: (item) => <SampleCard title={item.name} description={item.description} />,
+    options: {
+      perView: 3,
+      gap: 16,
+    },
+  },
+};
+
+export const StringItems: Story = {
+  args: {
+    title: "Simple Text Slider",
+    items: ["Feature 1", "Feature 2", "Feature 3", "Feature 4", "Feature 5"],
+    itemKey: (item: string) => item,
+    renderItem: (item: string) => (
+      <div className="bg-subtle rounded-md p-6 text-center">
+        <p className="text-emphasis text-lg font-medium">{item}</p>
+      </div>
+    ),
+    options: {
+      perView: 3,
+      gap: 16,
+    },
+  },
+};
+
+export const CustomStyling: Story = {
+  args: {
+    title: "Custom Styled Cards",
+    className: "custom-slider",
+    items: sampleApps.slice(0, 4),
+    itemKey: (item) => item.id,
+    renderItem: (item) => (
+      <div className="bg-brand-default text-brand-emphasis rounded-lg p-6 shadow-lg">
+        <h3 className="mb-2 text-xl font-bold">{item.name}</h3>
+        <p className="text-brand-emphasis text-sm opacity-90">{item.description}</p>
+      </div>
+    ),
+    options: {
+      perView: 2,
+      gap: 24,
+    },
+  },
+};
+
+export const ImageCards: Story = {
+  args: {
+    title: "App Gallery",
+    items: [
+      { id: "1", name: "Google Calendar", image: "https://via.placeholder.com/200x120/4285F4/FFF?text=Google" },
+      { id: "2", name: "Zoom", image: "https://via.placeholder.com/200x120/2D8CFF/FFF?text=Zoom" },
+      { id: "3", name: "Stripe", image: "https://via.placeholder.com/200x120/635BFF/FFF?text=Stripe" },
+      { id: "4", name: "Slack", image: "https://via.placeholder.com/200x120/4A154B/FFF?text=Slack" },
+      { id: "5", name: "HubSpot", image: "https://via.placeholder.com/200x120/FF7A59/FFF?text=HubSpot" },
+    ],
+    itemKey: (item) => item.id,
+    renderItem: (item) => (
+      <div className="bg-default border-subtle hover:border-emphasis overflow-hidden rounded-lg border transition-colors">
+        <img src={item.image} alt={item.name} className="h-32 w-full object-cover" />
+        <div className="p-4">
+          <h3 className="text-emphasis text-center font-semibold">{item.name}</h3>
+        </div>
+      </div>
+    ),
+    options: {
+      perView: 3,
+      gap: 16,
+    },
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8 w-[800px]">
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Default (3 items per view)</h3>
+        <Slider
+          title="Popular Apps"
+          items={sampleApps}
+          itemKey={(item) => item.id}
+          renderItem={(item) => <SampleCard title={item.name} description={item.description} />}
+          options={{ perView: 3, gap: 16 }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Single item per view</h3>
+        <Slider
+          title="Featured Integration"
+          items={sampleApps.slice(0, 3)}
+          itemKey={(item) => item.id}
+          renderItem={(item) => <SampleCard title={item.name} description={item.description} />}
+          options={{ perView: 1, gap: 20 }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Without title</h3>
+        <Slider
+          items={sampleApps.slice(0, 4)}
+          itemKey={(item) => item.id}
+          renderItem={(item) => <SampleCard title={item.name} description={item.description} />}
+          options={{ perView: 2, gap: 16 }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+  decorators: [],
+};
diff --git a/packages/features/auth/SAMLLogin.stories.tsx b/packages/features/auth/SAMLLogin.stories.tsx
new file mode 100644
index 00000000000000..3076550ba17b31
--- /dev/null
+++ b/packages/features/auth/SAMLLogin.stories.tsx
@@ -0,0 +1,296 @@
+import React from "react";
+
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+import { FormProvider, useForm } from "react-hook-form";
+
+import { SAMLLogin } from "./SAMLLogin";
+
+// Wrapper component to provide FormProvider context
+const SAMLLoginWrapper = (props: React.ComponentProps<typeof SAMLLogin>) => {
+  const methods = useForm({
+    defaultValues: {
+      email: props.email || "",
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <SAMLLogin {...props} />
+    </FormProvider>
+  );
+};
+
+const meta = {
+  component: SAMLLoginWrapper,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    samlTenantID: "tenant-123",
+    samlProductID: "product-456",
+    setErrorMessage: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SAMLLoginWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    email: "user@example.com",
+  },
+};
+
+export const WithValidEmail: Story = {
+  args: {
+    email: "john.doe@company.com",
+  },
+};
+
+export const WithInvalidEmail: Story = {
+  args: {
+    email: "invalid-email",
+  },
+};
+
+export const EmptyEmail: Story = {
+  args: {
+    email: "",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    email: "user@example.com",
+    disabled: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    email: "user@example.com",
+    loading: true,
+  },
+};
+
+export const WithDifferentColors: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <SAMLLoginWrapper
+        samlTenantID="tenant-123"
+        samlProductID="product-456"
+        setErrorMessage={fn()}
+        email="user@example.com"
+        color="primary"
+      />
+      <SAMLLoginWrapper
+        samlTenantID="tenant-123"
+        samlProductID="product-456"
+        setErrorMessage={fn()}
+        email="user@example.com"
+        color="secondary"
+      />
+      <SAMLLoginWrapper
+        samlTenantID="tenant-123"
+        samlProductID="product-456"
+        setErrorMessage={fn()}
+        email="user@example.com"
+        color="minimal"
+      />
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const WithDifferentSizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-xs mb-2 font-medium">Small</p>
+        <SAMLLoginWrapper
+          samlTenantID="tenant-123"
+          samlProductID="product-456"
+          setErrorMessage={fn()}
+          email="user@example.com"
+          size="sm"
+        />
+      </div>
+      <div>
+        <p className="text-xs mb-2 font-medium">Base (Default)</p>
+        <SAMLLoginWrapper
+          samlTenantID="tenant-123"
+          samlProductID="product-456"
+          setErrorMessage={fn()}
+          email="user@example.com"
+          size="base"
+        />
+      </div>
+      <div>
+        <p className="text-xs mb-2 font-medium">Large</p>
+        <SAMLLoginWrapper
+          samlTenantID="tenant-123"
+          samlProductID="product-456"
+          setErrorMessage={fn()}
+          email="user@example.com"
+          size="lg"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const DifferentTenants: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-sm mb-2 font-medium">Company A (SAML)</p>
+        <SAMLLoginWrapper
+          samlTenantID="company-a-tenant"
+          samlProductID="saml-product"
+          setErrorMessage={fn()}
+          email="user@company-a.com"
+        />
+      </div>
+      <div>
+        <p className="text-sm mb-2 font-medium">Company B (OIDC)</p>
+        <SAMLLoginWrapper
+          samlTenantID="company-b-tenant"
+          samlProductID="oidc-product"
+          setErrorMessage={fn()}
+          email="user@company-b.com"
+        />
+      </div>
+      <div>
+        <p className="text-sm mb-2 font-medium">Enterprise Organization</p>
+        <SAMLLoginWrapper
+          samlTenantID="enterprise-org-tenant"
+          samlProductID="enterprise-product"
+          setErrorMessage={fn()}
+          email="admin@enterprise.org"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const InLoginForm: Story = {
+  render: () => {
+    const FormExample = () => {
+      const methods = useForm({
+        defaultValues: {
+          email: "user@example.com",
+        },
+      });
+
+      return (
+        <FormProvider {...methods}>
+          <div className="bg-white p-6 rounded-lg shadow-md space-y-4">
+            <h2 className="text-xl font-semibold">Sign In</h2>
+            <div>
+              <label className="text-sm font-medium mb-1 block">Email</label>
+              <input
+                type="email"
+                {...methods.register("email")}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your email"
+              />
+            </div>
+            <div>
+              <label className="text-sm font-medium mb-1 block">Password</label>
+              <input
+                type="password"
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your password"
+              />
+            </div>
+            <button
+              type="button"
+              className="w-full py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
+              Sign In
+            </button>
+            <div className="relative">
+              <div className="absolute inset-0 flex items-center">
+                <div className="w-full border-t border-gray-300" />
+              </div>
+              <div className="relative flex justify-center text-sm">
+                <span className="px-2 bg-white text-gray-500">Or continue with</span>
+              </div>
+            </div>
+            <SAMLLogin
+              samlTenantID="tenant-123"
+              samlProductID="product-456"
+              setErrorMessage={fn()}
+            />
+          </div>
+        </FormProvider>
+      );
+    };
+
+    return <FormExample />;
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const WithErrorHandling: Story = {
+  render: () => {
+    const ErrorHandlingExample = () => {
+      const methods = useForm({
+        defaultValues: {
+          email: "",
+        },
+      });
+      const [errorMessage, setErrorMessage] = React.useState<string | null>(null);
+
+      return (
+        <FormProvider {...methods}>
+          <div className="space-y-4">
+            <div>
+              <label className="text-sm font-medium mb-1 block">Email</label>
+              <input
+                type="email"
+                {...methods.register("email")}
+                className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter your email"
+              />
+            </div>
+            {errorMessage && (
+              <div className="p-3 bg-red-50 border border-red-200 rounded-md text-red-800 text-sm">
+                {errorMessage}
+              </div>
+            )}
+            <SAMLLogin
+              samlTenantID="tenant-123"
+              samlProductID="product-456"
+              setErrorMessage={setErrorMessage}
+            />
+            <p className="text-xs text-gray-500">Try clicking without entering an email to see error handling</p>
+          </div>
+        </FormProvider>
+      );
+    };
+
+    return <ErrorHandlingExample />;
+  },
+  parameters: {
+    layout: "centered",
+  },
+};
diff --git a/packages/features/bookings/components/VerifyCodeDialog.stories.tsx b/packages/features/bookings/components/VerifyCodeDialog.stories.tsx
new file mode 100644
index 00000000000000..475a67de08e5f0
--- /dev/null
+++ b/packages/features/bookings/components/VerifyCodeDialog.stories.tsx
@@ -0,0 +1,379 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+import type { StoreApi } from "zustand";
+
+import { BookerStoreContext } from "../Booker/BookerStoreProvider";
+import type { BookerStore } from "../Booker/store";
+import { VerifyCodeDialog } from "./VerifyCodeDialog";
+
+// Mock BookerStore for Storybook
+const createMockStore = (): StoreApi<BookerStore> => {
+  let verificationCode: string | null = null;
+
+  return {
+    getState: () =>
+      ({
+        verificationCode,
+        setVerificationCode: (code: string | null) => {
+          verificationCode = code;
+        },
+      }) as BookerStore,
+    setState: () => {},
+    subscribe: () => () => {},
+    destroy: () => {},
+  } as unknown as StoreApi<BookerStore>;
+};
+
+const meta = {
+  component: VerifyCodeDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      const mockStore = createMockStore();
+      return (
+        <BookerStoreContext.Provider value={mockStore}>
+          <Story />
+        </BookerStoreContext.Provider>
+      );
+    },
+  ],
+  argTypes: {
+    isOpenDialog: {
+      control: "boolean",
+      description: "Controls whether the dialog is open",
+    },
+    email: {
+      control: "text",
+      description: "Email address to verify",
+    },
+    isUserSessionRequiredToVerify: {
+      control: "boolean",
+      description: "Whether user session is required for verification",
+    },
+    isPending: {
+      control: "boolean",
+      description: "Loading state during verification",
+    },
+    error: {
+      control: "text",
+      description: "Error message to display",
+    },
+  },
+} satisfies Meta<typeof VerifyCodeDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [isOpenDialog, setIsOpenDialog] = useState(true);
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState("");
+
+    const verifyCodeWithSessionNotRequired = (code: string, email: string) => {
+      console.log("Verifying code (no session required):", code, email);
+      setTimeout(() => {
+        setIsPending(false);
+        setIsOpenDialog(false);
+      }, 1000);
+    };
+
+    const verifyCodeWithSessionRequired = (code: string, email: string) => {
+      console.log("Verifying code (session required):", code, email);
+      setTimeout(() => {
+        setIsPending(false);
+        setIsOpenDialog(false);
+      }, 1000);
+    };
+
+    const resetErrors = () => {
+      setError("");
+    };
+
+    return (
+      <>
+        <button
+          onClick={() => setIsOpenDialog(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Verify Code Dialog
+        </button>
+        <VerifyCodeDialog
+          isOpenDialog={isOpenDialog}
+          setIsOpenDialog={setIsOpenDialog}
+          email="user@example.com"
+          isUserSessionRequiredToVerify={true}
+          verifyCodeWithSessionNotRequired={verifyCodeWithSessionNotRequired}
+          verifyCodeWithSessionRequired={verifyCodeWithSessionRequired}
+          resetErrors={resetErrors}
+          setIsPending={setIsPending}
+          isPending={isPending}
+          error={error}
+        />
+      </>
+    );
+  },
+};
+
+export const WithError: Story = {
+  render: function WithErrorStory() {
+    const [isOpenDialog, setIsOpenDialog] = useState(true);
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState("Invalid verification code. Please try again.");
+
+    const verifyCodeWithSessionNotRequired = (code: string, email: string) => {
+      console.log("Verifying code (no session required):", code, email);
+      setIsPending(true);
+      setTimeout(() => {
+        setIsPending(false);
+        setError("Invalid verification code. Please try again.");
+      }, 1000);
+    };
+
+    const verifyCodeWithSessionRequired = (code: string, email: string) => {
+      console.log("Verifying code (session required):", code, email);
+      setIsPending(true);
+      setTimeout(() => {
+        setIsPending(false);
+        setError("Invalid verification code. Please try again.");
+      }, 1000);
+    };
+
+    const resetErrors = () => {
+      setError("");
+    };
+
+    return (
+      <>
+        <button
+          onClick={() => setIsOpenDialog(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Verify Code Dialog (With Error)
+        </button>
+        <VerifyCodeDialog
+          isOpenDialog={isOpenDialog}
+          setIsOpenDialog={setIsOpenDialog}
+          email="user@example.com"
+          isUserSessionRequiredToVerify={true}
+          verifyCodeWithSessionNotRequired={verifyCodeWithSessionNotRequired}
+          verifyCodeWithSessionRequired={verifyCodeWithSessionRequired}
+          resetErrors={resetErrors}
+          setIsPending={setIsPending}
+          isPending={isPending}
+          error={error}
+        />
+      </>
+    );
+  },
+};
+
+export const Loading: Story = {
+  render: function LoadingStory() {
+    const [isOpenDialog, setIsOpenDialog] = useState(true);
+    const [isPending, setIsPending] = useState(true);
+    const [error, setError] = useState("");
+
+    const verifyCodeWithSessionNotRequired = (code: string, email: string) => {
+      console.log("Verifying code (no session required):", code, email);
+      setIsPending(true);
+    };
+
+    const verifyCodeWithSessionRequired = (code: string, email: string) => {
+      console.log("Verifying code (session required):", code, email);
+      setIsPending(true);
+    };
+
+    const resetErrors = () => {
+      setError("");
+    };
+
+    return (
+      <>
+        <button
+          onClick={() => setIsOpenDialog(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Verify Code Dialog (Loading)
+        </button>
+        <VerifyCodeDialog
+          isOpenDialog={isOpenDialog}
+          setIsOpenDialog={setIsOpenDialog}
+          email="user@example.com"
+          isUserSessionRequiredToVerify={true}
+          verifyCodeWithSessionNotRequired={verifyCodeWithSessionNotRequired}
+          verifyCodeWithSessionRequired={verifyCodeWithSessionRequired}
+          resetErrors={resetErrors}
+          setIsPending={setIsPending}
+          isPending={isPending}
+          error={error}
+        />
+      </>
+    );
+  },
+};
+
+export const NoSessionRequired: Story = {
+  render: function NoSessionRequiredStory() {
+    const [isOpenDialog, setIsOpenDialog] = useState(true);
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState("");
+
+    const verifyCodeWithSessionNotRequired = (code: string, email: string) => {
+      console.log("Verifying code (no session required):", code, email);
+      setIsPending(true);
+      setTimeout(() => {
+        setIsPending(false);
+        setIsOpenDialog(false);
+      }, 1000);
+    };
+
+    const verifyCodeWithSessionRequired = (code: string, email: string) => {
+      console.log("Verifying code (session required):", code, email);
+      setIsPending(true);
+      setTimeout(() => {
+        setIsPending(false);
+        setIsOpenDialog(false);
+      }, 1000);
+    };
+
+    const resetErrors = () => {
+      setError("");
+    };
+
+    return (
+      <>
+        <button
+          onClick={() => setIsOpenDialog(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Verify Code Dialog (No Session Required)
+        </button>
+        <VerifyCodeDialog
+          isOpenDialog={isOpenDialog}
+          setIsOpenDialog={setIsOpenDialog}
+          email="guest@example.com"
+          isUserSessionRequiredToVerify={false}
+          verifyCodeWithSessionNotRequired={verifyCodeWithSessionNotRequired}
+          verifyCodeWithSessionRequired={verifyCodeWithSessionRequired}
+          resetErrors={resetErrors}
+          setIsPending={setIsPending}
+          isPending={isPending}
+          error={error}
+        />
+      </>
+    );
+  },
+};
+
+export const LongEmail: Story = {
+  render: function LongEmailStory() {
+    const [isOpenDialog, setIsOpenDialog] = useState(true);
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState("");
+
+    const verifyCodeWithSessionNotRequired = (code: string, email: string) => {
+      console.log("Verifying code (no session required):", code, email);
+      setIsPending(true);
+      setTimeout(() => {
+        setIsPending(false);
+        setIsOpenDialog(false);
+      }, 1000);
+    };
+
+    const verifyCodeWithSessionRequired = (code: string, email: string) => {
+      console.log("Verifying code (session required):", code, email);
+      setIsPending(true);
+      setTimeout(() => {
+        setIsPending(false);
+        setIsOpenDialog(false);
+      }, 1000);
+    };
+
+    const resetErrors = () => {
+      setError("");
+    };
+
+    return (
+      <>
+        <button
+          onClick={() => setIsOpenDialog(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Verify Code Dialog (Long Email)
+        </button>
+        <VerifyCodeDialog
+          isOpenDialog={isOpenDialog}
+          setIsOpenDialog={setIsOpenDialog}
+          email="very.long.email.address.for.testing.purposes@example-domain.com"
+          isUserSessionRequiredToVerify={true}
+          verifyCodeWithSessionNotRequired={verifyCodeWithSessionNotRequired}
+          verifyCodeWithSessionRequired={verifyCodeWithSessionRequired}
+          resetErrors={resetErrors}
+          setIsPending={setIsPending}
+          isPending={isPending}
+          error={error}
+        />
+      </>
+    );
+  },
+};
+
+export const AutoVerify: Story = {
+  render: function AutoVerifyStory() {
+    const [isOpenDialog, setIsOpenDialog] = useState(true);
+    const [isPending, setIsPending] = useState(false);
+    const [error, setError] = useState("");
+    const [message, setMessage] = useState("");
+
+    const verifyCodeWithSessionNotRequired = (code: string, email: string) => {
+      console.log("Auto-verifying code (no session required):", code, email);
+      setIsPending(true);
+      setTimeout(() => {
+        setIsPending(false);
+        setIsOpenDialog(false);
+        setMessage(`Successfully verified code: ${code} for ${email}`);
+      }, 1500);
+    };
+
+    const verifyCodeWithSessionRequired = (code: string, email: string) => {
+      console.log("Auto-verifying code (session required):", code, email);
+      setIsPending(true);
+      setTimeout(() => {
+        setIsPending(false);
+        setIsOpenDialog(false);
+        setMessage(`Successfully verified code: ${code} for ${email}`);
+      }, 1500);
+    };
+
+    const resetErrors = () => {
+      setError("");
+    };
+
+    return (
+      <>
+        <div className="space-y-4">
+          <button
+            onClick={() => {
+              setIsOpenDialog(true);
+              setMessage("");
+            }}
+            className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+            Open Verify Code Dialog (Auto-verify on 6 digits)
+          </button>
+          {message && <p className="text-sm text-green-600">{message}</p>}
+        </div>
+        <VerifyCodeDialog
+          isOpenDialog={isOpenDialog}
+          setIsOpenDialog={setIsOpenDialog}
+          email="user@example.com"
+          isUserSessionRequiredToVerify={true}
+          verifyCodeWithSessionNotRequired={verifyCodeWithSessionNotRequired}
+          verifyCodeWithSessionRequired={verifyCodeWithSessionRequired}
+          resetErrors={resetErrors}
+          setIsPending={setIsPending}
+          isPending={isPending}
+          error={error}
+        />
+      </>
+    );
+  },
+};
diff --git a/packages/features/calendars/CalendarSwitch.stories.tsx b/packages/features/calendars/CalendarSwitch.stories.tsx
new file mode 100644
index 00000000000000..8f6e33002173df
--- /dev/null
+++ b/packages/features/calendars/CalendarSwitch.stories.tsx
@@ -0,0 +1,325 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCReact } from "@trpc/react-query";
+import { fn } from "storybook/test";
+
+import { CalendarSwitch, UserCalendarSwitch, EventCalendarSwitch } from "./CalendarSwitch";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+// Mock tRPC client
+const mockTrpc = createTRPCReact<any>();
+
+const mockTrpcClient = mockTrpc.createClient({
+  links: [
+    () =>
+      ({ op }) => {
+        return {
+          subscribe: (observer: any) => {
+            observer.next({
+              result: {
+                data: {},
+              },
+            });
+            observer.complete();
+            return {
+              unsubscribe: () => {},
+            };
+          },
+        } as any;
+      },
+  ],
+});
+
+const meta = {
+  component: CalendarSwitch,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <mockTrpc.Provider client={mockTrpcClient} queryClient={queryClient}>
+        <QueryClientProvider client={queryClient}>
+          <div style={{ width: "400px" }}>
+            <Story />
+          </div>
+        </QueryClientProvider>
+      </mockTrpc.Provider>
+    ),
+  ],
+  argTypes: {
+    title: {
+      description: "Title of the calendar",
+      control: "text",
+    },
+    name: {
+      description: "Display name of the calendar",
+      control: "text",
+    },
+    externalId: {
+      description: "External ID for the calendar",
+      control: "text",
+    },
+    type: {
+      description: "Integration type",
+      control: "text",
+    },
+    isChecked: {
+      description: "Whether the calendar is enabled",
+      control: "boolean",
+    },
+    disabled: {
+      description: "Whether the switch is disabled",
+      control: "boolean",
+    },
+    destination: {
+      description: "Whether this is the destination calendar for adding events",
+      control: "boolean",
+    },
+    credentialId: {
+      description: "Credential ID for the calendar integration",
+      control: "number",
+    },
+  },
+  args: {
+    onCheckedChange: fn(),
+  },
+} satisfies Meta<typeof CalendarSwitch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Personal Calendar",
+    name: "Personal Calendar",
+    externalId: "personal-calendar-1",
+    type: "google_calendar",
+    isChecked: false,
+    credentialId: 1,
+    delegationCredentialId: null,
+    eventTypeId: null,
+    disabled: false,
+  },
+};
+
+export const Checked: Story = {
+  args: {
+    title: "Work Calendar",
+    name: "Work Calendar",
+    externalId: "work-calendar-1",
+    type: "google_calendar",
+    isChecked: true,
+    credentialId: 2,
+    delegationCredentialId: null,
+    eventTypeId: null,
+    disabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    title: "Disabled Calendar",
+    name: "Disabled Calendar",
+    externalId: "disabled-calendar-1",
+    type: "google_calendar",
+    isChecked: false,
+    credentialId: 3,
+    delegationId: null,
+    eventTypeId: null,
+    disabled: true,
+  },
+};
+
+export const DisabledChecked: Story = {
+  args: {
+    title: "Always Enabled Calendar",
+    name: "Always Enabled Calendar",
+    externalId: "always-enabled-1",
+    type: "google_calendar",
+    isChecked: true,
+    credentialId: 4,
+    delegationCredentialId: null,
+    eventTypeId: null,
+    disabled: true,
+  },
+};
+
+export const WithDestination: Story = {
+  args: {
+    title: "Google Calendar",
+    name: "Google Calendar",
+    externalId: "google-calendar-1",
+    type: "google_calendar",
+    isChecked: true,
+    destination: true,
+    credentialId: 5,
+    delegationCredentialId: null,
+    eventTypeId: null,
+    disabled: false,
+  },
+};
+
+export const OutlookCalendar: Story = {
+  args: {
+    title: "Outlook Calendar",
+    name: "Outlook Calendar",
+    externalId: "outlook-calendar-1",
+    type: "office365_calendar",
+    isChecked: true,
+    credentialId: 6,
+    delegationCredentialId: null,
+    eventTypeId: null,
+    disabled: false,
+  },
+};
+
+export const AppleCalendar: Story = {
+  args: {
+    title: "Apple Calendar",
+    name: "Apple Calendar",
+    externalId: "apple-calendar-1",
+    type: "apple_calendar",
+    isChecked: false,
+    credentialId: 7,
+    delegationCredentialId: null,
+    eventTypeId: null,
+    disabled: false,
+  },
+};
+
+export const CalDavCalendar: Story = {
+  args: {
+    title: "CalDAV Calendar",
+    name: "CalDAV Calendar",
+    externalId: "caldav-calendar-1",
+    type: "caldav_calendar",
+    isChecked: true,
+    destination: true,
+    credentialId: 8,
+    delegationCredentialId: null,
+    eventTypeId: null,
+    disabled: false,
+  },
+};
+
+export const UserCalendarExample: Story = {
+  render: () => (
+    <UserCalendarSwitch
+      title="User Personal Calendar"
+      name="User Personal Calendar"
+      externalId="user-calendar-1"
+      type="google_calendar"
+      isChecked={true}
+      credentialId={10}
+      delegationCredentialId={null}
+      disabled={false}
+    />
+  ),
+};
+
+export const EventCalendarExample: Story = {
+  render: () => (
+    <EventCalendarSwitch
+      title="Event Type Calendar"
+      name="Event Type Calendar"
+      externalId="event-calendar-1"
+      type="google_calendar"
+      isChecked={true}
+      credentialId={11}
+      delegationCredentialId={null}
+      eventTypeId={100}
+      disabled={false}
+    />
+  ),
+};
+
+export const MultipleCalendars: Story = {
+  render: () => (
+    <div className="space-y-2">
+      <CalendarSwitch
+        title="Personal Calendar"
+        name="Personal Calendar"
+        externalId="multi-cal-1"
+        type="google_calendar"
+        isChecked={true}
+        credentialId={20}
+        delegationCredentialId={null}
+        eventTypeId={null}
+        disabled={false}
+      />
+      <CalendarSwitch
+        title="Work Calendar"
+        name="Work Calendar"
+        externalId="multi-cal-2"
+        type="google_calendar"
+        isChecked={true}
+        destination={true}
+        credentialId={21}
+        delegationCredentialId={null}
+        eventTypeId={null}
+        disabled={false}
+      />
+      <CalendarSwitch
+        title="Team Calendar"
+        name="Team Calendar"
+        externalId="multi-cal-3"
+        type="office365_calendar"
+        isChecked={false}
+        credentialId={22}
+        delegationCredentialId={null}
+        eventTypeId={null}
+        disabled={false}
+      />
+      <CalendarSwitch
+        title="Shared Calendar"
+        name="Shared Calendar"
+        externalId="multi-cal-4"
+        type="apple_calendar"
+        isChecked={false}
+        credentialId={23}
+        delegationCredentialId={null}
+        eventTypeId={null}
+        disabled={true}
+      />
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const LongCalendarName: Story = {
+  args: {
+    title: "My Very Long Calendar Name That Should Wrap Properly In The UI",
+    name: "My Very Long Calendar Name That Should Wrap Properly In The UI",
+    externalId: "long-name-calendar-1",
+    type: "google_calendar",
+    isChecked: true,
+    credentialId: 30,
+    delegationCredentialId: null,
+    eventTypeId: null,
+    disabled: false,
+  },
+};
+
+export const WithDelegationCredential: Story = {
+  args: {
+    title: "Delegated Calendar",
+    name: "Delegated Calendar",
+    externalId: "delegated-calendar-1",
+    type: "google_calendar",
+    isChecked: true,
+    credentialId: 40,
+    delegationCredentialId: "delegation-cred-123",
+    eventTypeId: null,
+    disabled: false,
+  },
+};
diff --git a/packages/features/calendars/DestinationCalendarSelector.stories.tsx b/packages/features/calendars/DestinationCalendarSelector.stories.tsx
new file mode 100644
index 00000000000000..40ff118ae421bf
--- /dev/null
+++ b/packages/features/calendars/DestinationCalendarSelector.stories.tsx
@@ -0,0 +1,593 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import type { RouterOutputs } from "@calcom/trpc/react";
+
+import DestinationCalendarSelector from "./DestinationCalendarSelector";
+
+// Mock useLocale hook
+vi.mock("@calcom/lib/hooks/useLocale", () => ({
+  useLocale: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        create_events_on: "Create events on",
+        you_can_override_calendar_in_advanced_tab: "You can override this setting on a per-event basis.",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+const meta = {
+  component: DestinationCalendarSelector,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ width: "600px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {
+    onChange: {
+      description: "Callback when calendar selection changes",
+      action: "changed",
+    },
+    isPending: {
+      description: "Loading state",
+      control: "boolean",
+    },
+    hidePlaceholder: {
+      description: "Hide the placeholder text",
+      control: "boolean",
+    },
+    hideAdvancedText: {
+      description: "Hide the advanced settings hint text",
+      control: "boolean",
+    },
+    value: {
+      description: "External ID of the selected calendar",
+      control: "text",
+    },
+    maxWidth: {
+      description: "Maximum width of the select control",
+      control: "number",
+    },
+  },
+  args: {
+    onChange: fn(),
+  },
+} satisfies Meta<typeof DestinationCalendarSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock calendar data
+const mockGoogleCalendars: RouterOutputs["viewer"]["calendars"]["connectedCalendars"] = {
+  connectedCalendars: [
+    {
+      credentialId: 1,
+      integration: {
+        type: "google_calendar",
+        title: "Google Calendar",
+        slug: "google-calendar",
+      },
+      primary: {
+        name: "john@example.com",
+        email: "john@example.com",
+        integration: "google_calendar",
+        externalId: "john@example.com",
+        readOnly: false,
+        credentialId: 1,
+        isSelected: true,
+      },
+      calendars: [
+        {
+          externalId: "primary",
+          integration: "google_calendar",
+          name: "Personal",
+          readOnly: false,
+          email: "john@example.com",
+          isSelected: true,
+          credentialId: 1,
+        },
+        {
+          externalId: "work-calendar-id",
+          integration: "google_calendar",
+          name: "Work",
+          readOnly: false,
+          email: "john@example.com",
+          isSelected: false,
+          credentialId: 1,
+        },
+        {
+          externalId: "meetings-calendar-id",
+          integration: "google_calendar",
+          name: "Meetings",
+          readOnly: false,
+          email: "john@example.com",
+          isSelected: false,
+          credentialId: 1,
+        },
+      ],
+    },
+  ],
+  destinationCalendar: {
+    id: 1,
+    integration: "google_calendar",
+    externalId: "primary",
+    userId: 1,
+    eventTypeId: null,
+    credentialId: 1,
+    name: "Personal",
+    integrationTitle: "Google Calendar",
+    primaryEmail: "john@example.com",
+  },
+};
+
+const mockMultipleProviders: RouterOutputs["viewer"]["calendars"]["connectedCalendars"] = {
+  connectedCalendars: [
+    {
+      credentialId: 1,
+      integration: {
+        type: "google_calendar",
+        title: "Google Calendar",
+        slug: "google-calendar",
+      },
+      primary: {
+        name: "john@example.com",
+        email: "john@example.com",
+        integration: "google_calendar",
+        externalId: "john@example.com",
+        readOnly: false,
+        credentialId: 1,
+        isSelected: true,
+      },
+      calendars: [
+        {
+          externalId: "google-primary",
+          integration: "google_calendar",
+          name: "Personal",
+          readOnly: false,
+          email: "john@example.com",
+          isSelected: true,
+          credentialId: 1,
+        },
+        {
+          externalId: "google-work",
+          integration: "google_calendar",
+          name: "Work Calendar",
+          readOnly: false,
+          email: "john@example.com",
+          isSelected: false,
+          credentialId: 1,
+        },
+      ],
+    },
+    {
+      credentialId: 2,
+      integration: {
+        type: "office365_calendar",
+        title: "Office 365 Calendar",
+        slug: "office365-calendar",
+      },
+      primary: {
+        name: "john@company.com",
+        email: "john@company.com",
+        integration: "office365_calendar",
+        externalId: "john@company.com",
+        readOnly: false,
+        credentialId: 2,
+        isSelected: false,
+      },
+      calendars: [
+        {
+          externalId: "office365-primary",
+          integration: "office365_calendar",
+          name: "Calendar",
+          readOnly: false,
+          email: "john@company.com",
+          isSelected: false,
+          credentialId: 2,
+        },
+        {
+          externalId: "office365-team",
+          integration: "office365_calendar",
+          name: "Team Events",
+          readOnly: false,
+          email: "john@company.com",
+          isSelected: false,
+          credentialId: 2,
+        },
+      ],
+    },
+    {
+      credentialId: 3,
+      integration: {
+        type: "apple_calendar",
+        title: "Apple Calendar",
+        slug: "apple-calendar",
+      },
+      primary: {
+        name: "iCloud",
+        email: "john@icloud.com",
+        integration: "apple_calendar",
+        externalId: "https://caldav.icloud.com/12345",
+        readOnly: false,
+        credentialId: 3,
+        isSelected: false,
+      },
+      calendars: [
+        {
+          externalId: "https://caldav.icloud.com/12345/calendars/home",
+          integration: "apple_calendar",
+          name: "Home",
+          readOnly: false,
+          email: "john@icloud.com",
+          isSelected: false,
+          credentialId: 3,
+        },
+      ],
+    },
+  ],
+  destinationCalendar: {
+    id: 1,
+    integration: "google_calendar",
+    externalId: "google-primary",
+    userId: 1,
+    eventTypeId: null,
+    credentialId: 1,
+    name: "Personal",
+    integrationTitle: "Google Calendar",
+    primaryEmail: "john@example.com",
+  },
+};
+
+export const Default: Story = {
+  args: {
+    calendarsQueryData: mockGoogleCalendars,
+    value: "primary",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
+
+export const WithSelectedCalendar: Story = {
+  args: {
+    calendarsQueryData: mockGoogleCalendars,
+    value: "work-calendar-id",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    calendarsQueryData: mockGoogleCalendars,
+    value: "primary",
+    isPending: true,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
+
+export const HiddenPlaceholder: Story = {
+  args: {
+    calendarsQueryData: mockGoogleCalendars,
+    value: undefined,
+    isPending: false,
+    hidePlaceholder: true,
+    hideAdvancedText: false,
+  },
+};
+
+export const HiddenAdvancedText: Story = {
+  args: {
+    calendarsQueryData: mockGoogleCalendars,
+    value: "primary",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: true,
+  },
+};
+
+export const MultipleProviders: Story = {
+  args: {
+    calendarsQueryData: mockMultipleProviders,
+    value: "google-primary",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
+
+export const WithMaxWidth: Story = {
+  args: {
+    calendarsQueryData: mockGoogleCalendars,
+    value: "primary",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+    maxWidth: 400,
+  },
+};
+
+export const NoCalendars: Story = {
+  args: {
+    calendarsQueryData: {
+      connectedCalendars: [],
+      destinationCalendar: null,
+    },
+    value: undefined,
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
+
+export const SingleCalendar: Story = {
+  args: {
+    calendarsQueryData: {
+      connectedCalendars: [
+        {
+          credentialId: 1,
+          integration: {
+            type: "google_calendar",
+            title: "Google Calendar",
+            slug: "google-calendar",
+          },
+          primary: {
+            name: "john@example.com",
+            email: "john@example.com",
+            integration: "google_calendar",
+            externalId: "john@example.com",
+            readOnly: false,
+            credentialId: 1,
+            isSelected: true,
+          },
+          calendars: [
+            {
+              externalId: "primary",
+              integration: "google_calendar",
+              name: "Personal",
+              readOnly: false,
+              email: "john@example.com",
+              isSelected: true,
+              credentialId: 1,
+            },
+          ],
+        },
+      ],
+      destinationCalendar: {
+        id: 1,
+        integration: "google_calendar",
+        externalId: "primary",
+        userId: 1,
+        eventTypeId: null,
+        credentialId: 1,
+        name: "Personal",
+        integrationTitle: "Google Calendar",
+        primaryEmail: "john@example.com",
+      },
+    },
+    value: "primary",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
+
+export const Office365Calendar: Story = {
+  args: {
+    calendarsQueryData: {
+      connectedCalendars: [
+        {
+          credentialId: 2,
+          integration: {
+            type: "office365_calendar",
+            title: "Office 365 Calendar",
+            slug: "office365-calendar",
+          },
+          primary: {
+            name: "john@company.com",
+            email: "john@company.com",
+            integration: "office365_calendar",
+            externalId: "john@company.com",
+            readOnly: false,
+            credentialId: 2,
+            isSelected: true,
+          },
+          calendars: [
+            {
+              externalId: "office365-primary",
+              integration: "office365_calendar",
+              name: "Calendar",
+              readOnly: false,
+              email: "john@company.com",
+              isSelected: true,
+              credentialId: 2,
+            },
+            {
+              externalId: "office365-team",
+              integration: "office365_calendar",
+              name: "Team Events",
+              readOnly: false,
+              email: "john@company.com",
+              isSelected: false,
+              credentialId: 2,
+            },
+          ],
+        },
+      ],
+      destinationCalendar: {
+        id: 2,
+        integration: "office365_calendar",
+        externalId: "office365-primary",
+        userId: 1,
+        eventTypeId: null,
+        credentialId: 2,
+        name: "Calendar",
+        integrationTitle: "Office 365 Calendar",
+        primaryEmail: "john@company.com",
+      },
+    },
+    value: "office365-primary",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
+
+export const AppleCalendar: Story = {
+  args: {
+    calendarsQueryData: {
+      connectedCalendars: [
+        {
+          credentialId: 3,
+          integration: {
+            type: "apple_calendar",
+            title: "Apple Calendar",
+            slug: "apple-calendar",
+          },
+          primary: {
+            name: "iCloud",
+            email: "john@icloud.com",
+            integration: "apple_calendar",
+            externalId: "https://caldav.icloud.com/12345",
+            readOnly: false,
+            credentialId: 3,
+            isSelected: true,
+          },
+          calendars: [
+            {
+              externalId: "https://caldav.icloud.com/12345/calendars/home",
+              integration: "apple_calendar",
+              name: "Home",
+              readOnly: false,
+              email: "john@icloud.com",
+              isSelected: true,
+              credentialId: 3,
+            },
+            {
+              externalId: "https://caldav.icloud.com/12345/calendars/work",
+              integration: "apple_calendar",
+              name: "Work",
+              readOnly: false,
+              email: "john@icloud.com",
+              isSelected: false,
+              credentialId: 3,
+            },
+          ],
+        },
+      ],
+      destinationCalendar: {
+        id: 3,
+        integration: "apple_calendar",
+        externalId: "https://caldav.icloud.com/12345/calendars/home",
+        userId: 1,
+        eventTypeId: null,
+        credentialId: 3,
+        name: "Home",
+        integrationTitle: "Apple Calendar",
+        primaryEmail: "john@icloud.com",
+      },
+    },
+    value: "https://caldav.icloud.com/12345/calendars/home",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
+
+export const ManyCalendars: Story = {
+  args: {
+    calendarsQueryData: {
+      connectedCalendars: [
+        {
+          credentialId: 1,
+          integration: {
+            type: "google_calendar",
+            title: "Google Calendar",
+            slug: "google-calendar",
+          },
+          primary: {
+            name: "john@example.com",
+            email: "john@example.com",
+            integration: "google_calendar",
+            externalId: "john@example.com",
+            readOnly: false,
+            credentialId: 1,
+            isSelected: true,
+          },
+          calendars: [
+            {
+              externalId: "primary",
+              integration: "google_calendar",
+              name: "Personal",
+              readOnly: false,
+              email: "john@example.com",
+              isSelected: true,
+              credentialId: 1,
+            },
+            {
+              externalId: "work-id",
+              integration: "google_calendar",
+              name: "Work",
+              readOnly: false,
+              email: "john@example.com",
+              isSelected: false,
+              credentialId: 1,
+            },
+            {
+              externalId: "meetings-id",
+              integration: "google_calendar",
+              name: "Meetings",
+              readOnly: false,
+              email: "john@example.com",
+              isSelected: false,
+              credentialId: 1,
+            },
+            {
+              externalId: "projects-id",
+              integration: "google_calendar",
+              name: "Projects",
+              readOnly: false,
+              email: "john@example.com",
+              isSelected: false,
+              credentialId: 1,
+            },
+            {
+              externalId: "family-id",
+              integration: "google_calendar",
+              name: "Family",
+              readOnly: false,
+              email: "john@example.com",
+              isSelected: false,
+              credentialId: 1,
+            },
+          ],
+        },
+      ],
+      destinationCalendar: {
+        id: 1,
+        integration: "google_calendar",
+        externalId: "primary",
+        userId: 1,
+        eventTypeId: null,
+        credentialId: 1,
+        name: "Personal",
+        integrationTitle: "Google Calendar",
+        primaryEmail: "john@example.com",
+      },
+    },
+    value: "primary",
+    isPending: false,
+    hidePlaceholder: false,
+    hideAdvancedText: false,
+  },
+};
diff --git a/packages/features/components/timezone-select/TimezoneSelect.stories.tsx b/packages/features/components/timezone-select/TimezoneSelect.stories.tsx
new file mode 100644
index 00000000000000..1d48d72cdf2a5a
--- /dev/null
+++ b/packages/features/components/timezone-select/TimezoneSelect.stories.tsx
@@ -0,0 +1,280 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import type { ITimezoneOption } from "./TimezoneSelect";
+import { TimezoneSelectComponent } from "./TimezoneSelect";
+
+const mockTimezones = [
+  { label: "San Francisco", timezone: "America/Los_Angeles" },
+  { label: "New York", timezone: "America/New_York" },
+  { label: "Chicago", timezone: "America/Chicago" },
+  { label: "Denver", timezone: "America/Denver" },
+  { label: "London", timezone: "Europe/London" },
+  { label: "Paris", timezone: "Europe/Paris" },
+  { label: "Berlin", timezone: "Europe/Berlin" },
+  { label: "Tokyo", timezone: "Asia/Tokyo" },
+  { label: "Mumbai", timezone: "Asia/Kolkata" },
+  { label: "Sydney", timezone: "Australia/Sydney" },
+  { label: "Toronto", timezone: "America/Toronto" },
+  { label: "Mexico City", timezone: "America/Mexico_City" },
+  { label: "Dubai", timezone: "Asia/Dubai" },
+  { label: "Singapore", timezone: "Asia/Singapore" },
+  { label: "Hong Kong", timezone: "Asia/Hong_Kong" },
+  { label: "Sao Paulo", timezone: "America/Sao_Paulo" },
+  { label: "Buenos Aires", timezone: "America/Argentina/Buenos_Aires" },
+  { label: "Lagos", timezone: "Africa/Lagos" },
+  { label: "Cairo", timezone: "Africa/Cairo" },
+  { label: "Moscow", timezone: "Europe/Moscow" },
+];
+
+const meta = {
+  component: TimezoneSelectComponent,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    onChange: fn(),
+    isPending: false,
+    data: mockTimezones,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TimezoneSelectComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    placeholder: "Select timezone...",
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    placeholder: "Select timezone...",
+    value: {
+      value: "America/New_York",
+      label: "America/New_York",
+    } as ITimezoneOption,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    placeholder: "Loading timezones...",
+    isPending: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    placeholder: "Select timezone...",
+    isDisabled: true,
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    placeholder: "Select timezone...",
+    size: "sm",
+  },
+};
+
+export const MediumSize: Story = {
+  args: {
+    placeholder: "Select timezone...",
+    size: "md",
+  },
+};
+
+export const WithGrow: Story = {
+  args: {
+    placeholder: "Select timezone...",
+    grow: true,
+  },
+};
+
+export const WithCustomValue: Story = {
+  args: {
+    placeholder: "Select timezone...",
+    value: {
+      value: "Asia/Tokyo",
+      label: "Asia/Tokyo",
+    } as ITimezoneOption,
+  },
+};
+
+export const MultiSelect: Story = {
+  args: {
+    placeholder: "Select timezones...",
+    isMulti: true,
+  },
+};
+
+export const MultiSelectWithValues: Story = {
+  args: {
+    placeholder: "Select timezones...",
+    isMulti: true,
+    value: [
+      {
+        value: "America/New_York",
+        label: "America/New_York",
+      },
+      {
+        value: "Europe/London",
+        label: "Europe/London",
+      },
+      {
+        value: "Asia/Tokyo",
+        label: "Asia/Tokyo",
+      },
+    ] as ITimezoneOption[],
+  },
+};
+
+export const SmallMultiSelect: Story = {
+  args: {
+    placeholder: "Select timezones...",
+    isMulti: true,
+    size: "sm",
+    value: [
+      {
+        value: "America/Los_Angeles",
+        label: "America/Los_Angeles",
+      },
+      {
+        value: "Europe/Paris",
+        label: "Europe/Paris",
+      },
+    ] as ITimezoneOption[],
+  },
+};
+
+export const WithoutWebTimezoneSelect: Story = {
+  args: {
+    placeholder: "Select timezone...",
+    isWebTimezoneSelect: false,
+  },
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <label className="text-sm font-medium mb-2 block">Primary Timezone</label>
+        <TimezoneSelectComponent
+          placeholder="Select your timezone..."
+          isPending={false}
+          data={mockTimezones}
+          onChange={fn()}
+        />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Additional Timezones</label>
+        <TimezoneSelectComponent
+          placeholder="Select additional timezones..."
+          isPending={false}
+          data={mockTimezones}
+          onChange={fn()}
+          isMulti
+        />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Compact Timezone Selector</label>
+        <TimezoneSelectComponent
+          placeholder="Select timezone..."
+          isPending={false}
+          data={mockTimezones}
+          onChange={fn()}
+          size="sm"
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const ComparisonSizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <p className="text-xs mb-2 font-medium">Small Size</p>
+        <TimezoneSelectComponent
+          placeholder="Select timezone..."
+          isPending={false}
+          data={mockTimezones}
+          onChange={fn()}
+          size="sm"
+        />
+      </div>
+      <div>
+        <p className="text-xs mb-2 font-medium">Medium Size (Default)</p>
+        <TimezoneSelectComponent
+          placeholder="Select timezone..."
+          isPending={false}
+          data={mockTimezones}
+          onChange={fn()}
+          size="md"
+        />
+      </div>
+    </div>
+  ),
+};
+
+export const WithPreselectedTimezones: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <label className="text-sm font-medium mb-2 block">US Eastern Time</label>
+        <TimezoneSelectComponent
+          placeholder="Select timezone..."
+          isPending={false}
+          data={mockTimezones}
+          onChange={fn()}
+          value={{
+            value: "America/New_York",
+            label: "America/New_York",
+          }}
+        />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Central European Time</label>
+        <TimezoneSelectComponent
+          placeholder="Select timezone..."
+          isPending={false}
+          data={mockTimezones}
+          onChange={fn()}
+          value={{
+            value: "Europe/Berlin",
+            label: "Europe/Berlin",
+          }}
+        />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Japan Standard Time</label>
+        <TimezoneSelectComponent
+          placeholder="Select timezone..."
+          isPending={false}
+          data={mockTimezones}
+          onChange={fn()}
+          value={{
+            value: "Asia/Tokyo",
+            label: "Asia/Tokyo",
+          }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/data-table/components/DataTable.stories.tsx b/packages/features/data-table/components/DataTable.stories.tsx
new file mode 100644
index 00000000000000..f3aee1336cbb35
--- /dev/null
+++ b/packages/features/data-table/components/DataTable.stories.tsx
@@ -0,0 +1,611 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useRef, useMemo } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  createColumnHelper,
+} from "@tanstack/react-table";
+
+import { DataTable } from "./DataTable";
+
+const meta = {
+  title: "Features/DataTable",
+  component: DataTable,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DataTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample data types
+type Person = {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: "active" | "inactive" | "pending";
+};
+
+type Booking = {
+  id: number;
+  title: string;
+  date: string;
+  attendee: string;
+  duration: number;
+  status: "confirmed" | "pending" | "cancelled";
+};
+
+// Sample data
+const samplePeople: Person[] = [
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", status: "active" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Member", status: "active" },
+  { id: 3, name: "Bob Wilson", email: "bob@example.com", role: "Member", status: "inactive" },
+  { id: 4, name: "Alice Johnson", email: "alice@example.com", role: "Editor", status: "active" },
+  { id: 5, name: "Charlie Brown", email: "charlie@example.com", role: "Viewer", status: "pending" },
+];
+
+const sampleBookings: Booking[] = [
+  {
+    id: 1,
+    title: "Product Demo",
+    date: "Dec 20, 2024",
+    attendee: "john@company.com",
+    duration: 30,
+    status: "confirmed",
+  },
+  {
+    id: 2,
+    title: "Sales Call",
+    date: "Dec 21, 2024",
+    attendee: "jane@company.com",
+    duration: 45,
+    status: "pending",
+  },
+  {
+    id: 3,
+    title: "Technical Review",
+    date: "Dec 22, 2024",
+    attendee: "bob@company.com",
+    duration: 60,
+    status: "cancelled",
+  },
+  {
+    id: 4,
+    title: "Team Sync",
+    date: "Dec 23, 2024",
+    attendee: "alice@company.com",
+    duration: 30,
+    status: "confirmed",
+  },
+  {
+    id: 5,
+    title: "Client Meeting",
+    date: "Dec 24, 2024",
+    attendee: "charlie@company.com",
+    duration: 60,
+    status: "confirmed",
+  },
+];
+
+// Generate large dataset for infinite scroll
+const generateLargeDataset = (count: number): Person[] => {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    name: `Person ${i + 1}`,
+    email: `person${i + 1}@example.com`,
+    role: ["Admin", "Member", "Editor", "Viewer"][i % 4],
+    status: (["active", "inactive", "pending"] as const)[i % 3],
+  }));
+};
+
+// Column helpers
+const personColumnHelper = createColumnHelper<Person>();
+const bookingColumnHelper = createColumnHelper<Booking>();
+
+// Default story with basic table
+export const Default: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("status", {
+          header: "Status",
+          cell: (info) => {
+            const status = info.getValue();
+            const statusColors = {
+              active: "bg-green-100 text-green-800",
+              inactive: "bg-gray-100 text-gray-800",
+              pending: "bg-yellow-100 text-yellow-800",
+            };
+            return (
+              <span className={`rounded-full px-2 py-1 text-xs ${statusColors[status]}`}>
+                {status.charAt(0).toUpperCase() + status.slice(1)}
+              </span>
+            );
+          },
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+    });
+
+    return (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <DataTable table={table} tableContainerRef={tableContainerRef} paginationMode="standard" />
+      </div>
+    );
+  },
+};
+
+// Compact variant
+export const CompactVariant: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("id", {
+          header: "ID",
+          cell: (info) => `#${info.getValue()}`,
+          size: 60,
+        }),
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+      <div style={{ width: "600px", maxWidth: "90vw" }}>
+        <DataTable
+          table={table}
+          tableContainerRef={tableContainerRef}
+          variant="compact"
+          paginationMode="standard"
+        />
+      </div>
+    );
+  },
+};
+
+// With sorting enabled
+export const WithSorting: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        bookingColumnHelper.accessor("title", {
+          header: "Title",
+          cell: (info) => <span className="font-medium">{info.getValue()}</span>,
+          enableSorting: true,
+        }),
+        bookingColumnHelper.accessor("date", {
+          header: "Date",
+          cell: (info) => info.getValue(),
+          enableSorting: true,
+        }),
+        bookingColumnHelper.accessor("duration", {
+          header: "Duration",
+          cell: (info) => `${info.getValue()} min`,
+          enableSorting: true,
+        }),
+        bookingColumnHelper.accessor("status", {
+          header: "Status",
+          cell: (info) => {
+            const status = info.getValue();
+            const statusColors = {
+              confirmed: "bg-green-100 text-green-800",
+              pending: "bg-yellow-100 text-yellow-800",
+              cancelled: "bg-red-100 text-red-800",
+            };
+            return (
+              <span className={`rounded-full px-2 py-1 text-xs ${statusColors[status]}`}>
+                {status.charAt(0).toUpperCase() + status.slice(1)}
+              </span>
+            );
+          },
+          enableSorting: true,
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: sampleBookings,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+    });
+
+    return (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <DataTable table={table} tableContainerRef={tableContainerRef} paginationMode="standard" />
+      </div>
+    );
+  },
+};
+
+// With column resizing
+export const WithColumnResizing: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+          size: 200,
+          minSize: 100,
+          maxSize: 400,
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+          size: 250,
+          minSize: 150,
+          maxSize: 400,
+        }),
+        personColumnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+          size: 150,
+          minSize: 100,
+          maxSize: 300,
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      enableColumnResizing: true,
+      columnResizeMode: "onChange",
+    });
+
+    return (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <DataTable
+          table={table}
+          tableContainerRef={tableContainerRef}
+          enableColumnResizing
+          paginationMode="standard"
+        />
+      </div>
+    );
+  },
+};
+
+// With row click handler
+export const WithRowClick: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    const handleRowClick = (row: any) => {
+      alert(`Clicked on: ${row.original.name}`);
+    };
+
+    return (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <DataTable
+          table={table}
+          tableContainerRef={tableContainerRef}
+          onRowMouseclick={handleRowClick}
+          paginationMode="standard"
+        />
+      </div>
+    );
+  },
+};
+
+// Empty state
+export const EmptyState: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: [],
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <DataTable table={table} tableContainerRef={tableContainerRef} paginationMode="standard" />
+      </div>
+    );
+  },
+};
+
+// Loading state
+export const LoadingState: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <DataTable
+          table={table}
+          tableContainerRef={tableContainerRef}
+          isPending
+          paginationMode="standard"
+        />
+      </div>
+    );
+  },
+};
+
+// Infinite scroll mode
+export const InfiniteScroll: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+    const largeDataset = useMemo(() => generateLargeDataset(100), []);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("id", {
+          header: "ID",
+          cell: (info) => `#${info.getValue()}`,
+          size: 80,
+        }),
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("status", {
+          header: "Status",
+          cell: (info) => {
+            const status = info.getValue();
+            const statusColors = {
+              active: "bg-green-100 text-green-800",
+              inactive: "bg-gray-100 text-gray-800",
+              pending: "bg-yellow-100 text-yellow-800",
+            };
+            return (
+              <span className={`rounded-full px-2 py-1 text-xs ${statusColors[status]}`}>
+                {status.charAt(0).toUpperCase() + status.slice(1)}
+              </span>
+            );
+          },
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: largeDataset,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+      <div style={{ width: "900px", maxWidth: "90vw" }}>
+        <DataTable table={table} tableContainerRef={tableContainerRef} paginationMode="infinite" />
+      </div>
+    );
+  },
+};
+
+// With custom row className
+export const WithCustomRowStyling: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+        }),
+        personColumnHelper.accessor("status", {
+          header: "Status",
+          cell: (info) => info.getValue(),
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+    });
+
+    const getRowClassName = (row: any) => {
+      if (row.original.status === "inactive") {
+        return "opacity-50";
+      }
+      if (row.original.status === "pending") {
+        return "bg-yellow-50";
+      }
+      return "";
+    };
+
+    return (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <DataTable
+          table={table}
+          tableContainerRef={tableContainerRef}
+          rowClassName={getRowClassName}
+          paginationMode="standard"
+        />
+      </div>
+    );
+  },
+};
+
+// With column filtering
+export const WithFiltering: Story = {
+  render: () => {
+    const tableContainerRef = useRef<HTMLDivElement>(null);
+
+    const columns = useMemo(
+      () => [
+        personColumnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+        personColumnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+        personColumnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+        personColumnHelper.accessor("status", {
+          header: "Status",
+          cell: (info) => {
+            const status = info.getValue();
+            const statusColors = {
+              active: "bg-green-100 text-green-800",
+              inactive: "bg-gray-100 text-gray-800",
+              pending: "bg-yellow-100 text-yellow-800",
+            };
+            return (
+              <span className={`rounded-full px-2 py-1 text-xs ${statusColors[status]}`}>
+                {status.charAt(0).toUpperCase() + status.slice(1)}
+              </span>
+            );
+          },
+          enableColumnFilter: true,
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+    });
+
+    return (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <DataTable table={table} tableContainerRef={tableContainerRef} paginationMode="standard" />
+      </div>
+    );
+  },
+};
diff --git a/packages/features/data-table/components/DataTableSelectionBar.stories.tsx b/packages/features/data-table/components/DataTableSelectionBar.stories.tsx
new file mode 100644
index 00000000000000..ac624b547096e0
--- /dev/null
+++ b/packages/features/data-table/components/DataTableSelectionBar.stories.tsx
@@ -0,0 +1,561 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState, useMemo, useRef } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  createColumnHelper,
+  type RowSelectionState,
+} from "@tanstack/react-table";
+
+import { DataTableSelectionBar, type ActionItem } from "./DataTableSelectionBar";
+
+const meta = {
+  title: "Features/DataTable/DataTableSelectionBar",
+  component: DataTableSelectionBar.Root,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DataTableSelectionBar.Root>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample data type
+type Person = {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+};
+
+// Sample data
+const samplePeople: Person[] = [
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Member" },
+  { id: 3, name: "Bob Wilson", email: "bob@example.com", role: "Member" },
+  { id: 4, name: "Alice Johnson", email: "alice@example.com", role: "Editor" },
+  { id: 5, name: "Charlie Brown", email: "charlie@example.com", role: "Viewer" },
+];
+
+const personColumnHelper = createColumnHelper<Person>();
+
+// Helper component to create a table with row selection
+function SelectableTableWrapper({ children }: { children: (table: any) => React.ReactNode }) {
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({
+    "0": true,
+    "1": true,
+    "2": true,
+  });
+
+  const columns = useMemo(
+    () => [
+      personColumnHelper.display({
+        id: "select",
+        header: ({ table }) => (
+          <input
+            type="checkbox"
+            checked={table.getIsAllRowsSelected()}
+            onChange={table.getToggleAllRowsSelectedHandler()}
+          />
+        ),
+        cell: ({ row }) => (
+          <input
+            type="checkbox"
+            checked={row.getIsSelected()}
+            onChange={row.getToggleSelectedHandler()}
+          />
+        ),
+      }),
+      personColumnHelper.accessor("name", {
+        header: "Name",
+        cell: (info) => info.getValue(),
+      }),
+      personColumnHelper.accessor("email", {
+        header: "Email",
+        cell: (info) => info.getValue(),
+      }),
+      personColumnHelper.accessor("role", {
+        header: "Role",
+        cell: (info) => info.getValue(),
+      }),
+    ],
+    []
+  );
+
+  const table = useReactTable({
+    data: samplePeople,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    state: {
+      rowSelection,
+    },
+    onRowSelectionChange: setRowSelection,
+    enableRowSelection: true,
+  });
+
+  return <>{children(table)}</>;
+}
+
+export const Default: Story = {
+  render: () => (
+    <SelectableTableWrapper>
+      {(table) => (
+        <div style={{ width: "800px", maxWidth: "90vw" }}>
+          <div className="mb-4 rounded-lg border p-4">
+            <p className="text-sm mb-2">Selected rows: {table.getSelectedRowModel().rows.length}</p>
+            <div className="border-subtle overflow-hidden rounded-lg border">
+              <table className="w-full">
+                <thead className="bg-subtle">
+                  <tr>
+                    {table.getFlatHeaders().map((header) => (
+                      <th key={header.id} className="border-subtle border-b px-4 py-2 text-left">
+                        {header.isPlaceholder ? null : header.column.columnDef.header?.(header.getContext())}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className="border-subtle border-b last:border-0">
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="px-4 py-2">
+                          {cell.column.columnDef.cell?.(cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          {table.getSelectedRowModel().rows.length > 0 && (
+            <DataTableSelectionBar.Root>
+              <span className="text-sm font-medium">
+                {table.getSelectedRowModel().rows.length} selected
+              </span>
+              <DataTableSelectionBar.Button icon="trash-2" color="destructive">
+                Delete
+              </DataTableSelectionBar.Button>
+            </DataTableSelectionBar.Root>
+          )}
+        </div>
+      )}
+    </SelectableTableWrapper>
+  ),
+};
+
+export const WithMultipleActions: Story = {
+  render: () => (
+    <SelectableTableWrapper>
+      {(table) => (
+        <div style={{ width: "800px", maxWidth: "90vw" }}>
+          <div className="mb-4 rounded-lg border p-4">
+            <p className="text-sm mb-2">Selected rows: {table.getSelectedRowModel().rows.length}</p>
+            <div className="border-subtle overflow-hidden rounded-lg border">
+              <table className="w-full">
+                <thead className="bg-subtle">
+                  <tr>
+                    {table.getFlatHeaders().map((header) => (
+                      <th key={header.id} className="border-subtle border-b px-4 py-2 text-left">
+                        {header.isPlaceholder ? null : header.column.columnDef.header?.(header.getContext())}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className="border-subtle border-b last:border-0">
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="px-4 py-2">
+                          {cell.column.columnDef.cell?.(cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          {table.getSelectedRowModel().rows.length > 0 && (
+            <DataTableSelectionBar.Root>
+              <span className="text-sm font-medium">
+                {table.getSelectedRowModel().rows.length} selected
+              </span>
+              <DataTableSelectionBar.Button
+                icon="mail"
+                color="secondary"
+                onClick={() => alert("Send email to selected users")}>
+                Email
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button
+                icon="download"
+                color="secondary"
+                onClick={() => alert("Export selected users")}>
+                Export
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button
+                icon="copy"
+                color="secondary"
+                onClick={() => alert("Duplicate selected users")}>
+                Duplicate
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button
+                icon="trash-2"
+                color="destructive"
+                onClick={() => alert("Delete selected users")}>
+                Delete
+              </DataTableSelectionBar.Button>
+            </DataTableSelectionBar.Root>
+          )}
+        </div>
+      )}
+    </SelectableTableWrapper>
+  ),
+};
+
+export const WithCustomContent: Story = {
+  render: () => (
+    <SelectableTableWrapper>
+      {(table) => (
+        <div style={{ width: "800px", maxWidth: "90vw" }}>
+          <div className="mb-4 rounded-lg border p-4">
+            <p className="text-sm mb-2">Selected rows: {table.getSelectedRowModel().rows.length}</p>
+            <div className="border-subtle overflow-hidden rounded-lg border">
+              <table className="w-full">
+                <thead className="bg-subtle">
+                  <tr>
+                    {table.getFlatHeaders().map((header) => (
+                      <th key={header.id} className="border-subtle border-b px-4 py-2 text-left">
+                        {header.isPlaceholder ? null : header.column.columnDef.header?.(header.getContext())}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className="border-subtle border-b last:border-0">
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="px-4 py-2">
+                          {cell.column.columnDef.cell?.(cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          {table.getSelectedRowModel().rows.length > 0 && (
+            <DataTableSelectionBar.Root>
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-semibold">
+                  {table.getSelectedRowModel().rows.length} items
+                </span>
+                <span className="text-subtle text-xs">
+                  ({table.getSelectedRowModel().rows.map((r) => r.original.name).join(", ")})
+                </span>
+              </div>
+              <DataTableSelectionBar.Button
+                icon="x"
+                color="minimal"
+                onClick={() => table.resetRowSelection()}>
+                Clear Selection
+              </DataTableSelectionBar.Button>
+            </DataTableSelectionBar.Root>
+          )}
+        </div>
+      )}
+    </SelectableTableWrapper>
+  ),
+};
+
+export const SingleSelection: Story = {
+  render: () => {
+    function SingleSelectionWrapper() {
+      const [rowSelection, setRowSelection] = useState<RowSelectionState>({ "0": true });
+
+      const columns = useMemo(
+        () => [
+          personColumnHelper.display({
+            id: "select",
+            header: "",
+            cell: ({ row }) => (
+              <input
+                type="radio"
+                name="selection"
+                checked={row.getIsSelected()}
+                onChange={row.getToggleSelectedHandler()}
+              />
+            ),
+          }),
+          personColumnHelper.accessor("name", {
+            header: "Name",
+            cell: (info) => info.getValue(),
+          }),
+          personColumnHelper.accessor("email", {
+            header: "Email",
+            cell: (info) => info.getValue(),
+          }),
+          personColumnHelper.accessor("role", {
+            header: "Role",
+            cell: (info) => info.getValue(),
+          }),
+        ],
+        []
+      );
+
+      const table = useReactTable({
+        data: samplePeople,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        state: {
+          rowSelection,
+        },
+        onRowSelectionChange: setRowSelection,
+        enableRowSelection: true,
+        enableMultiRowSelection: false,
+      });
+
+      return (
+        <div style={{ width: "800px", maxWidth: "90vw" }}>
+          <div className="mb-4 rounded-lg border p-4">
+            <div className="border-subtle overflow-hidden rounded-lg border">
+              <table className="w-full">
+                <thead className="bg-subtle">
+                  <tr>
+                    {table.getFlatHeaders().map((header) => (
+                      <th key={header.id} className="border-subtle border-b px-4 py-2 text-left">
+                        {header.isPlaceholder ? null : header.column.columnDef.header?.(header.getContext())}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className="border-subtle border-b last:border-0">
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="px-4 py-2">
+                          {cell.column.columnDef.cell?.(cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          {table.getSelectedRowModel().rows.length > 0 && (
+            <DataTableSelectionBar.Root>
+              <span className="text-sm font-medium">
+                {table.getSelectedRowModel().rows[0].original.name} selected
+              </span>
+              <DataTableSelectionBar.Button
+                icon="pencil"
+                color="primary"
+                onClick={() => alert("Edit user")}>
+                Edit
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button
+                icon="trash-2"
+                color="destructive"
+                onClick={() => alert("Delete user")}>
+                Delete
+              </DataTableSelectionBar.Button>
+            </DataTableSelectionBar.Root>
+          )}
+        </div>
+      );
+    }
+
+    return <SingleSelectionWrapper />;
+  },
+};
+
+export const ResponsiveButtons: Story = {
+  render: () => (
+    <SelectableTableWrapper>
+      {(table) => (
+        <div style={{ width: "100%", maxWidth: "90vw" }}>
+          <div className="mb-4 rounded-lg border p-4">
+            <p className="text-subtle text-xs mb-2">
+              Note: Resize your browser to see how the buttons adapt - they show only icons on mobile and
+              icons with text on larger screens.
+            </p>
+            <p className="text-sm mb-2">Selected rows: {table.getSelectedRowModel().rows.length}</p>
+            <div className="border-subtle overflow-hidden rounded-lg border">
+              <table className="w-full">
+                <thead className="bg-subtle">
+                  <tr>
+                    {table.getFlatHeaders().map((header) => (
+                      <th key={header.id} className="border-subtle border-b px-4 py-2 text-left">
+                        {header.isPlaceholder ? null : header.column.columnDef.header?.(header.getContext())}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className="border-subtle border-b last:border-0">
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="px-4 py-2">
+                          {cell.column.columnDef.cell?.(cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          {table.getSelectedRowModel().rows.length > 0 && (
+            <DataTableSelectionBar.Root>
+              <span className="text-sm font-medium">
+                {table.getSelectedRowModel().rows.length} selected
+              </span>
+              <DataTableSelectionBar.Button icon="mail" color="secondary">
+                Send Email
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button icon="download" color="secondary">
+                Export CSV
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button icon="user-plus" color="secondary">
+                Add to Group
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button icon="trash-2" color="destructive">
+                Delete Selected
+              </DataTableSelectionBar.Button>
+            </DataTableSelectionBar.Root>
+          )}
+        </div>
+      )}
+    </SelectableTableWrapper>
+  ),
+};
+
+export const BarOnly: Story = {
+  render: () => (
+    <div className="relative" style={{ width: "800px", height: "200px", maxWidth: "90vw" }}>
+      <DataTableSelectionBar.Root>
+        <span className="text-sm font-medium">3 items selected</span>
+        <DataTableSelectionBar.Button icon="mail" color="secondary">
+          Email
+        </DataTableSelectionBar.Button>
+        <DataTableSelectionBar.Button icon="download" color="secondary">
+          Export
+        </DataTableSelectionBar.Button>
+        <DataTableSelectionBar.Button icon="trash-2" color="destructive">
+          Delete
+        </DataTableSelectionBar.Button>
+      </DataTableSelectionBar.Root>
+    </div>
+  ),
+};
+
+export const MinimalActions: Story = {
+  render: () => (
+    <SelectableTableWrapper>
+      {(table) => (
+        <div style={{ width: "800px", maxWidth: "90vw" }}>
+          <div className="mb-4 rounded-lg border p-4">
+            <p className="text-sm mb-2">Selected rows: {table.getSelectedRowModel().rows.length}</p>
+            <div className="border-subtle overflow-hidden rounded-lg border">
+              <table className="w-full">
+                <thead className="bg-subtle">
+                  <tr>
+                    {table.getFlatHeaders().map((header) => (
+                      <th key={header.id} className="border-subtle border-b px-4 py-2 text-left">
+                        {header.isPlaceholder ? null : header.column.columnDef.header?.(header.getContext())}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className="border-subtle border-b last:border-0">
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="px-4 py-2">
+                          {cell.column.columnDef.cell?.(cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          {table.getSelectedRowModel().rows.length > 0 && (
+            <DataTableSelectionBar.Root>
+              <span className="text-sm font-medium">
+                {table.getSelectedRowModel().rows.length} selected
+              </span>
+              <DataTableSelectionBar.Button
+                icon="trash-2"
+                color="destructive"
+                onClick={() => alert("Delete selected")}>
+                Delete
+              </DataTableSelectionBar.Button>
+            </DataTableSelectionBar.Root>
+          )}
+        </div>
+      )}
+    </SelectableTableWrapper>
+  ),
+};
+
+export const WithButtonVariants: Story = {
+  render: () => (
+    <SelectableTableWrapper>
+      {(table) => (
+        <div style={{ width: "800px", maxWidth: "90vw" }}>
+          <div className="mb-4 rounded-lg border p-4">
+            <p className="text-sm mb-2">Selected rows: {table.getSelectedRowModel().rows.length}</p>
+            <div className="border-subtle overflow-hidden rounded-lg border">
+              <table className="w-full">
+                <thead className="bg-subtle">
+                  <tr>
+                    {table.getFlatHeaders().map((header) => (
+                      <th key={header.id} className="border-subtle border-b px-4 py-2 text-left">
+                        {header.isPlaceholder ? null : header.column.columnDef.header?.(header.getContext())}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
+                <tbody>
+                  {table.getRowModel().rows.map((row) => (
+                    <tr key={row.id} className="border-subtle border-b last:border-0">
+                      {row.getVisibleCells().map((cell) => (
+                        <td key={cell.id} className="px-4 py-2">
+                          {cell.column.columnDef.cell?.(cell.getContext())}
+                        </td>
+                      ))}
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          </div>
+          {table.getSelectedRowModel().rows.length > 0 && (
+            <DataTableSelectionBar.Root>
+              <span className="text-sm font-medium">
+                {table.getSelectedRowModel().rows.length} selected
+              </span>
+              <DataTableSelectionBar.Button icon="check" color="primary">
+                Approve
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button icon="pencil" color="secondary">
+                Edit
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button icon="copy" color="minimal">
+                Duplicate
+              </DataTableSelectionBar.Button>
+              <DataTableSelectionBar.Button icon="trash-2" color="destructive">
+                Delete
+              </DataTableSelectionBar.Button>
+            </DataTableSelectionBar.Root>
+          )}
+        </div>
+      )}
+    </SelectableTableWrapper>
+  ),
+};
diff --git a/packages/features/data-table/components/DataTableToolbar.stories.tsx b/packages/features/data-table/components/DataTableToolbar.stories.tsx
new file mode 100644
index 00000000000000..e646c0fafc4f37
--- /dev/null
+++ b/packages/features/data-table/components/DataTableToolbar.stories.tsx
@@ -0,0 +1,466 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState, useMemo } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getFilteredRowModel,
+  createColumnHelper,
+} from "@tanstack/react-table";
+
+import { DataTableProvider } from "../DataTableProvider";
+import { DataTableToolbar } from "./DataTableToolbar";
+
+const meta = {
+  title: "Features/DataTable/DataTableToolbar",
+  component: DataTableToolbar.Root,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ width: "800px", maxWidth: "90vw" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof DataTableToolbar.Root>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample data type for stories
+type Person = {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: "active" | "inactive" | "pending";
+};
+
+// Sample data
+const samplePeople: Person[] = [
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", status: "active" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "Member", status: "active" },
+  { id: 3, name: "Bob Wilson", email: "bob@example.com", role: "Member", status: "inactive" },
+  { id: 4, name: "Alice Johnson", email: "alice@example.com", role: "Editor", status: "active" },
+  { id: 5, name: "Charlie Brown", email: "charlie@example.com", role: "Viewer", status: "pending" },
+];
+
+// Column helper
+const columnHelper = createColumnHelper<Person>();
+
+// Default story with just the toolbar root
+export const Default: Story = {
+  render: () => {
+    return (
+      <DataTableProvider tableIdentifier="toolbar-default">
+        <DataTableToolbar.Root>
+          <div className="text-sm text-gray-600">Toolbar content goes here</div>
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar with SearchBar
+export const WithSearchBar: Story = {
+  render: () => {
+    return (
+      <DataTableProvider tableIdentifier="toolbar-search">
+        <DataTableToolbar.Root>
+          <DataTableToolbar.SearchBar />
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar with SearchBar and custom className
+export const WithSearchBarCustomClass: Story = {
+  render: () => {
+    return (
+      <DataTableProvider tableIdentifier="toolbar-search-custom">
+        <DataTableToolbar.Root>
+          <DataTableToolbar.SearchBar className="w-64" />
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar with ClearFiltersButton
+export const WithClearFiltersButton: Story = {
+  render: () => {
+    const columns = useMemo(
+      () => [
+        columnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+        columnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+        columnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    });
+
+    return (
+      <DataTableProvider tableIdentifier="toolbar-clear-filters">
+        <DataTableToolbar.Root>
+          <DataTableToolbar.ClearFiltersButton table={table} />
+          <div className="text-sm text-gray-500">
+            Note: The Clear Filters button only appears when filters are active.
+          </div>
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar with CTA button
+export const WithCTA: Story = {
+  render: () => {
+    const [clickCount, setClickCount] = useState(0);
+
+    return (
+      <DataTableProvider tableIdentifier="toolbar-cta">
+        <DataTableToolbar.Root>
+          <DataTableToolbar.CTA onClick={() => setClickCount(clickCount + 1)}>
+            Add New Item
+          </DataTableToolbar.CTA>
+          {clickCount > 0 && (
+            <div className="text-sm text-gray-500">Button clicked {clickCount} times</div>
+          )}
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar with CTA button variants
+export const CTAVariants: Story = {
+  render: () => {
+    return (
+      <DataTableProvider tableIdentifier="toolbar-cta-variants">
+        <div className="space-y-4">
+          <DataTableToolbar.Root>
+            <DataTableToolbar.CTA color="primary">Primary CTA</DataTableToolbar.CTA>
+          </DataTableToolbar.Root>
+          <DataTableToolbar.Root>
+            <DataTableToolbar.CTA color="secondary">Secondary CTA</DataTableToolbar.CTA>
+          </DataTableToolbar.Root>
+          <DataTableToolbar.Root>
+            <DataTableToolbar.CTA color="minimal">Minimal CTA</DataTableToolbar.CTA>
+          </DataTableToolbar.Root>
+          <DataTableToolbar.Root>
+            <DataTableToolbar.CTA color="destructive">Destructive CTA</DataTableToolbar.CTA>
+          </DataTableToolbar.Root>
+        </div>
+      </DataTableProvider>
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
+
+// Toolbar with CTA with icons
+export const CTAWithIcons: Story = {
+  render: () => {
+    return (
+      <DataTableProvider tableIdentifier="toolbar-cta-icons">
+        <div className="space-y-4">
+          <DataTableToolbar.Root>
+            <DataTableToolbar.CTA StartIcon="plus">Add Item</DataTableToolbar.CTA>
+          </DataTableToolbar.Root>
+          <DataTableToolbar.Root>
+            <DataTableToolbar.CTA EndIcon="arrow-right">Continue</DataTableToolbar.CTA>
+          </DataTableToolbar.Root>
+          <DataTableToolbar.Root>
+            <DataTableToolbar.CTA StartIcon="upload" EndIcon="arrow-right">
+              Import Data
+            </DataTableToolbar.CTA>
+          </DataTableToolbar.Root>
+        </div>
+      </DataTableProvider>
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
+
+// Complete toolbar with all components
+export const CompleteToolbar: Story = {
+  render: () => {
+    const columns = useMemo(
+      () => [
+        columnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+        columnHelper.accessor("email", {
+          header: "Email",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+        columnHelper.accessor("role", {
+          header: "Role",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+        columnHelper.accessor("status", {
+          header: "Status",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    });
+
+    return (
+      <DataTableProvider tableIdentifier="toolbar-complete">
+        <DataTableToolbar.Root className="grid-cols-[1fr_auto_auto]">
+          <DataTableToolbar.SearchBar />
+          <DataTableToolbar.ClearFiltersButton table={table} />
+          <DataTableToolbar.CTA StartIcon="plus">Add Person</DataTableToolbar.CTA>
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar with search and CTA
+export const SearchWithCTA: Story = {
+  render: () => {
+    const [searchValue, setSearchValue] = useState("");
+
+    return (
+      <DataTableProvider tableIdentifier="toolbar-search-cta">
+        <DataTableToolbar.Root className="grid-cols-[1fr_auto]">
+          <DataTableToolbar.SearchBar />
+          <DataTableToolbar.CTA StartIcon="plus" color="primary">
+            Create New
+          </DataTableToolbar.CTA>
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar with multiple CTAs
+export const MultipleCTAs: Story = {
+  render: () => {
+    return (
+      <DataTableProvider tableIdentifier="toolbar-multiple-ctas">
+        <DataTableToolbar.Root className="grid-cols-[1fr_auto_auto_auto]">
+          <DataTableToolbar.SearchBar />
+          <DataTableToolbar.CTA color="minimal" StartIcon="upload">
+            Import
+          </DataTableToolbar.CTA>
+          <DataTableToolbar.CTA color="minimal" StartIcon="download">
+            Export
+          </DataTableToolbar.CTA>
+          <DataTableToolbar.CTA color="primary" StartIcon="plus">
+            Add New
+          </DataTableToolbar.CTA>
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Custom toolbar layout
+export const CustomLayout: Story = {
+  render: () => {
+    const columns = useMemo(
+      () => [
+        columnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    });
+
+    return (
+      <DataTableProvider tableIdentifier="toolbar-custom-layout">
+        <DataTableToolbar.Root className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <DataTableToolbar.SearchBar />
+            <DataTableToolbar.ClearFiltersButton table={table} />
+          </div>
+          <div className="flex items-center gap-2">
+            <DataTableToolbar.CTA color="minimal" StartIcon="filter">
+              Filters
+            </DataTableToolbar.CTA>
+            <DataTableToolbar.CTA StartIcon="plus">Add Person</DataTableToolbar.CTA>
+          </div>
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar with custom styling
+export const CustomStyling: Story = {
+  render: () => {
+    return (
+      <DataTableProvider tableIdentifier="toolbar-custom-style">
+        <DataTableToolbar.Root className="rounded-lg border border-gray-200 bg-gray-50 p-6">
+          <div className="flex items-center gap-4">
+            <DataTableToolbar.SearchBar className="flex-1" />
+            <DataTableToolbar.CTA StartIcon="sparkles" color="primary">
+              Magic Action
+            </DataTableToolbar.CTA>
+          </div>
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Responsive toolbar
+export const ResponsiveToolbar: Story = {
+  render: () => {
+    const columns = useMemo(
+      () => [
+        columnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    });
+
+    return (
+      <DataTableProvider tableIdentifier="toolbar-responsive">
+        <DataTableToolbar.Root className="grid grid-cols-1 gap-2 md:grid-cols-[1fr_auto_auto]">
+          <DataTableToolbar.SearchBar className="w-full md:max-w-48" />
+          <DataTableToolbar.ClearFiltersButton table={table} />
+          <DataTableToolbar.CTA StartIcon="plus" className="w-full md:w-auto">
+            Add New
+          </DataTableToolbar.CTA>
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Minimal toolbar
+export const MinimalToolbar: Story = {
+  render: () => {
+    return (
+      <DataTableProvider tableIdentifier="toolbar-minimal">
+        <DataTableToolbar.Root>
+          <DataTableToolbar.SearchBar />
+        </DataTableToolbar.Root>
+      </DataTableProvider>
+    );
+  },
+};
+
+// Toolbar states showcase
+export const ToolbarStates: Story = {
+  render: () => {
+    const columns = useMemo(
+      () => [
+        columnHelper.accessor("name", {
+          header: "Name",
+          cell: (info) => info.getValue(),
+          enableColumnFilter: true,
+        }),
+      ],
+      []
+    );
+
+    const table = useReactTable({
+      data: samplePeople,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    });
+
+    return (
+      <div className="space-y-6">
+        <div>
+          <h3 className="mb-2 text-sm font-semibold">Default State</h3>
+          <DataTableProvider tableIdentifier="toolbar-state-1">
+            <DataTableToolbar.Root className="grid-cols-[1fr_auto_auto]">
+              <DataTableToolbar.SearchBar />
+              <DataTableToolbar.ClearFiltersButton table={table} />
+              <DataTableToolbar.CTA StartIcon="plus">Add Item</DataTableToolbar.CTA>
+            </DataTableToolbar.Root>
+          </DataTableProvider>
+        </div>
+
+        <div>
+          <h3 className="mb-2 text-sm font-semibold">With Loading CTA</h3>
+          <DataTableProvider tableIdentifier="toolbar-state-2">
+            <DataTableToolbar.Root className="grid-cols-[1fr_auto]">
+              <DataTableToolbar.SearchBar />
+              <DataTableToolbar.CTA StartIcon="plus" loading>
+                Adding...
+              </DataTableToolbar.CTA>
+            </DataTableToolbar.Root>
+          </DataTableProvider>
+        </div>
+
+        <div>
+          <h3 className="mb-2 text-sm font-semibold">With Disabled CTA</h3>
+          <DataTableProvider tableIdentifier="toolbar-state-3">
+            <DataTableToolbar.Root className="grid-cols-[1fr_auto]">
+              <DataTableToolbar.SearchBar />
+              <DataTableToolbar.CTA StartIcon="plus" disabled>
+                Add Item
+              </DataTableToolbar.CTA>
+            </DataTableToolbar.Root>
+          </DataTableProvider>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/data-table/components/DataTableWrapper.stories.tsx b/packages/features/data-table/components/DataTableWrapper.stories.tsx
new file mode 100644
index 00000000000000..8548c89e913d0a
--- /dev/null
+++ b/packages/features/data-table/components/DataTableWrapper.stories.tsx
@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { createColumnHelper, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useMemo } from "react";
+
+import { DataTableProvider } from "../DataTableProvider";
+import { DataTableWrapper } from "./DataTableWrapper";
+
+type SampleData = {
+  id: number;
+  name: string;
+  email: string;
+  role: string;
+  status: "active" | "inactive";
+};
+
+const columnHelper = createColumnHelper<SampleData>();
+
+const sampleData: SampleData[] = [
+  { id: 1, name: "John Doe", email: "john@example.com", role: "Admin", status: "active" },
+  { id: 2, name: "Jane Smith", email: "jane@example.com", role: "User", status: "active" },
+  { id: 3, name: "Bob Johnson", email: "bob@example.com", role: "User", status: "inactive" },
+  { id: 4, name: "Alice Williams", email: "alice@example.com", role: "Editor", status: "active" },
+  { id: 5, name: "Charlie Brown", email: "charlie@example.com", role: "User", status: "inactive" },
+];
+
+const sampleColumns = [
+  columnHelper.accessor("name", {
+    header: "Name",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("email", {
+    header: "Email",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("role", {
+    header: "Role",
+    cell: (info) => info.getValue(),
+  }),
+  columnHelper.accessor("status", {
+    header: "Status",
+    cell: (info) => (
+      <span
+        className={
+          info.getValue() === "active" ? "text-green-600 font-semibold" : "text-gray-400 font-semibold"
+        }>
+        {info.getValue()}
+      </span>
+    ),
+  }),
+];
+
+const DataTableWrapperWithTable = (
+  props: Omit<React.ComponentProps<typeof DataTableWrapper<SampleData>>, "table"> & {
+    data?: SampleData[];
+  }
+) => {
+  const { data = sampleData, ...rest } = props;
+  const table = useReactTable({
+    data,
+    columns: sampleColumns,
+    getCoreRowModel: getCoreRowModel(),
+  });
+
+  return (
+    <DataTableProvider tableIdentifier="storybook-table">
+      <DataTableWrapper table={table} {...rest} />
+    </DataTableProvider>
+  );
+};
+
+const meta = {
+  component: DataTableWrapper,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[900px]">
+        <Story />
+      </div>
+    ),
+  ],
+  render: (args) => <DataTableWrapperWithTable {...args} />,
+} satisfies Meta<typeof DataTableWrapper>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+  },
+};
+
+export const WithToolbars: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+    ToolbarLeft: (
+      <div className="flex gap-2">
+        <button className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md">Add User</button>
+        <button className="px-3 py-1.5 text-sm border border-gray-300 rounded-md">Import</button>
+      </div>
+    ),
+    ToolbarRight: (
+      <div className="flex gap-2">
+        <input
+          type="search"
+          placeholder="Search..."
+          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md"
+        />
+        <button className="px-3 py-1.5 text-sm border border-gray-300 rounded-md">Filter</button>
+      </div>
+    ),
+  },
+};
+
+export const CompactVariant: Story = {
+  args: {
+    paginationMode: "standard",
+    variant: "compact",
+    isPending: false,
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: true,
+    LoaderView: (
+      <div className="flex items-center justify-center p-12">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-gray-900"></div>
+      </div>
+    ),
+  },
+};
+
+export const EmptyState: Story = {
+  args: {
+    paginationMode: "standard",
+    data: [],
+    isPending: false,
+    EmptyView: (
+      <div className="flex flex-col items-center justify-center p-12 text-center">
+        <svg
+          className="w-12 h-12 text-gray-400 mb-4"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+          />
+        </svg>
+        <h3 className="text-lg font-semibold mb-1">No users found</h3>
+        <p className="text-gray-500">Get started by adding your first user</p>
+      </div>
+    ),
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+    hasError: true,
+    ErrorView: (
+      <div className="flex flex-col items-center justify-center p-12 text-center">
+        <svg className="w-12 h-12 text-red-500 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+        <h3 className="text-lg font-semibold mb-1">Error loading data</h3>
+        <p className="text-gray-500 mb-4">Something went wrong while fetching the data</p>
+        <button className="px-4 py-2 text-sm bg-blue-600 text-white rounded-md">Try Again</button>
+      </div>
+    ),
+  },
+};
+
+export const InfinitePagination: Story = {
+  args: {
+    paginationMode: "infinite",
+    hasNextPage: true,
+    fetchNextPage: () => console.log("Fetching next page..."),
+    isFetching: false,
+    isPending: false,
+  },
+};
+
+export const WithTotalRowCount: Story = {
+  args: {
+    paginationMode: "standard",
+    totalRowCount: 127,
+    isPending: false,
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+    className: "border-2 border-blue-500",
+    containerClassName: "bg-gray-50",
+    headerClassName: "bg-blue-100",
+  },
+};
+
+export const WithRowClickHandler: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+    onRowMouseclick: (row) => {
+      alert(`Clicked on ${row.original.name}`);
+    },
+  },
+};
+
+export const WithCustomRowClassName: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+    rowClassName: (row) => {
+      return row.original.status === "inactive" ? "opacity-50" : "";
+    },
+  },
+};
+
+export const ComplexExample: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+    variant: "default",
+    totalRowCount: 127,
+    ToolbarLeft: (
+      <div className="flex gap-2 items-center">
+        <h2 className="text-lg font-semibold">User Management</h2>
+        <span className="px-2 py-0.5 text-xs bg-blue-100 text-blue-700 rounded-full">127 users</span>
+      </div>
+    ),
+    ToolbarRight: (
+      <div className="flex gap-2">
+        <input
+          type="search"
+          placeholder="Search users..."
+          className="px-3 py-1.5 text-sm border border-gray-300 rounded-md"
+        />
+        <select className="px-3 py-1.5 text-sm border border-gray-300 rounded-md">
+          <option>All Roles</option>
+          <option>Admin</option>
+          <option>User</option>
+          <option>Editor</option>
+        </select>
+        <button className="px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md">Add User</button>
+      </div>
+    ),
+    onRowMouseclick: (row) => {
+      console.log("Selected user:", row.original.name);
+    },
+  },
+};
+
+export const LargeDataset: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+    data: Array.from({ length: 50 }, (_, i) => ({
+      id: i + 1,
+      name: `User ${i + 1}`,
+      email: `user${i + 1}@example.com`,
+      role: ["Admin", "User", "Editor"][i % 3],
+      status: i % 3 === 0 ? "inactive" : "active",
+    })) as SampleData[],
+    totalRowCount: 500,
+  },
+};
+
+export const WithChildren: Story = {
+  args: {
+    paginationMode: "standard",
+    isPending: false,
+    ToolbarLeft: <div className="text-sm font-semibold">Users</div>,
+    children: (
+      <div className="p-3 bg-blue-50 border border-blue-200 rounded-md text-sm">
+        <p className="text-blue-800">
+          This is additional content rendered between the toolbar and the table. You can use this for
+          filters, notifications, or other contextual information.
+        </p>
+      </div>
+    ),
+  },
+};
diff --git a/packages/features/ee/video/MeetingSessionDetailsDialog.stories.tsx b/packages/features/ee/video/MeetingSessionDetailsDialog.stories.tsx
new file mode 100644
index 00000000000000..72680c750a10f7
--- /dev/null
+++ b/packages/features/ee/video/MeetingSessionDetailsDialog.stories.tsx
@@ -0,0 +1,352 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+import { fn } from "storybook/test";
+
+import { Button } from "@calcom/ui/components/button";
+
+import { MeetingSessionDetailsDialog } from "./MeetingSessionDetailsDialog";
+
+const meta = {
+  component: MeetingSessionDetailsDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    isOpenDialog: {
+      description: "Controls whether the dialog is open or closed",
+      control: "boolean",
+    },
+    timeFormat: {
+      description: "Time format (12 or 24 hour)",
+      control: "select",
+      options: [12, 24, null],
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-screen w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MeetingSessionDetailsDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockBookingBase = {
+  id: 12345,
+  uid: "abc123xyz",
+  title: "30 Min Meeting",
+  description: "Quick sync meeting",
+  startTime: new Date("2024-03-15T14:00:00Z"),
+  endTime: new Date("2024-03-15T14:30:00Z"),
+  attendees: [
+    {
+      id: 1,
+      email: "john@example.com",
+      name: "John Doe",
+      timeZone: "America/New_York",
+      locale: "en",
+    },
+  ],
+  user: {
+    id: 1,
+    email: "host@example.com",
+    name: "Meeting Host",
+    timeZone: "America/Los_Angeles",
+  },
+  metadata: {},
+  status: "ACCEPTED" as const,
+  paid: false,
+  payment: [],
+  references: [
+    {
+      id: 1,
+      type: "daily_video",
+      uid: "daily-meeting-room-123",
+      meetingId: "daily-meeting-room-123",
+      meetingPassword: "secret123",
+      meetingUrl: "https://example.daily.co/daily-meeting-room-123",
+    },
+  ],
+};
+
+const mockBookingWithoutVideo = {
+  ...mockBookingBase,
+  references: [
+    {
+      id: 2,
+      type: "google_calendar",
+      uid: "gcal-event-456",
+    },
+  ],
+};
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setIsOpen(true)}>View Meeting Session Details</Button>
+        <MeetingSessionDetailsDialog
+          booking={mockBookingBase}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={12}
+        />
+      </div>
+    );
+  },
+};
+
+export const Open: Story = {
+  args: {
+    booking: mockBookingBase,
+    isOpenDialog: true,
+    setIsOpenDialog: fn(),
+    timeFormat: 12,
+  },
+};
+
+export const With24HourFormat: Story = {
+  render: function With24HourFormatStory() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setIsOpen(true)}>View Meeting Details (24h format)</Button>
+        <MeetingSessionDetailsDialog
+          booking={mockBookingBase}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={24}
+        />
+      </div>
+    );
+  },
+};
+
+export const WithoutVideoReference: Story = {
+  render: function WithoutVideoReferenceStory() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setIsOpen(true)}>View Meeting Without Video</Button>
+        <MeetingSessionDetailsDialog
+          booking={mockBookingWithoutVideo}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={12}
+        />
+      </div>
+    );
+  },
+};
+
+export const TeamMeeting: Story = {
+  render: function TeamMeetingStory() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const teamBooking = {
+      ...mockBookingBase,
+      title: "Team Standup - Engineering",
+      startTime: new Date("2024-03-20T10:00:00Z"),
+      endTime: new Date("2024-03-20T10:30:00Z"),
+      attendees: [
+        {
+          id: 1,
+          email: "alice@example.com",
+          name: "Alice Smith",
+          timeZone: "America/New_York",
+          locale: "en",
+        },
+        {
+          id: 2,
+          email: "bob@example.com",
+          name: "Bob Johnson",
+          timeZone: "America/Chicago",
+          locale: "en",
+        },
+        {
+          id: 3,
+          email: "charlie@example.com",
+          name: "Charlie Brown",
+          timeZone: "Europe/London",
+          locale: "en",
+        },
+      ],
+    };
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setIsOpen(true)}>View Team Meeting Details</Button>
+        <MeetingSessionDetailsDialog
+          booking={teamBooking}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={12}
+        />
+      </div>
+    );
+  },
+};
+
+export const LongMeeting: Story = {
+  render: function LongMeetingStory() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const longBooking = {
+      ...mockBookingBase,
+      title: "Quarterly Business Review & Strategic Planning Session",
+      startTime: new Date("2024-04-01T09:00:00Z"),
+      endTime: new Date("2024-04-01T11:00:00Z"),
+    };
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setIsOpen(true)}>View Long Meeting Details</Button>
+        <MeetingSessionDetailsDialog
+          booking={longBooking}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={12}
+        />
+      </div>
+    );
+  },
+};
+
+export const RecurringMeeting: Story = {
+  render: function RecurringMeetingStory() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const recurringBooking = {
+      ...mockBookingBase,
+      title: "Weekly 1:1 Check-in",
+      startTime: new Date("2024-03-18T15:00:00Z"),
+      endTime: new Date("2024-03-18T15:30:00Z"),
+      recurringEventId: "weekly-checkin-789",
+    };
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setIsOpen(true)}>View Recurring Meeting Details</Button>
+        <MeetingSessionDetailsDialog
+          booking={recurringBooking}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={12}
+        />
+      </div>
+    );
+  },
+};
+
+export const PastMeeting: Story = {
+  render: function PastMeetingStory() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const pastBooking = {
+      ...mockBookingBase,
+      title: "Product Demo",
+      startTime: new Date("2024-01-15T14:00:00Z"),
+      endTime: new Date("2024-01-15T14:45:00Z"),
+    };
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setIsOpen(true)}>View Past Meeting Details</Button>
+        <MeetingSessionDetailsDialog
+          booking={pastBooking}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={12}
+        />
+      </div>
+    );
+  },
+};
+
+export const UndefinedBooking: Story = {
+  render: function UndefinedBookingStory() {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <Button onClick={() => setIsOpen(true)}>View Meeting (No Booking Data)</Button>
+        <MeetingSessionDetailsDialog
+          booking={undefined}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={12}
+        />
+      </div>
+    );
+  },
+};
+
+export const InteractiveExample: Story = {
+  render: function InteractiveExampleStory() {
+    const [isOpen, setIsOpen] = useState(false);
+    const [selectedMeeting, setSelectedMeeting] = useState(mockBookingBase);
+
+    const meetings = [
+      {
+        label: "Standard Meeting",
+        booking: mockBookingBase,
+      },
+      {
+        label: "Team Meeting",
+        booking: {
+          ...mockBookingBase,
+          title: "Team Standup",
+          attendees: [
+            ...mockBookingBase.attendees,
+            {
+              id: 2,
+              email: "jane@example.com",
+              name: "Jane Smith",
+              timeZone: "Europe/London",
+              locale: "en",
+            },
+          ],
+        },
+      },
+      {
+        label: "No Video Reference",
+        booking: mockBookingWithoutVideo,
+      },
+    ];
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          {meetings.map((meeting) => (
+            <Button
+              key={meeting.label}
+              color="secondary"
+              onClick={() => {
+                setSelectedMeeting(meeting.booking as any);
+                setIsOpen(true);
+              }}>
+              {meeting.label}
+            </Button>
+          ))}
+        </div>
+        <MeetingSessionDetailsDialog
+          booking={selectedMeeting}
+          isOpenDialog={isOpen}
+          setIsOpenDialog={setIsOpen}
+          timeFormat={12}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/embed/Embed.stories.tsx b/packages/features/embed/Embed.stories.tsx
new file mode 100644
index 00000000000000..ec22dcaf5fe8bd
--- /dev/null
+++ b/packages/features/embed/Embed.stories.tsx
@@ -0,0 +1,352 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { BookerLayouts } from "@calcom/prisma/zod-utils";
+
+import { EmbedButton, EmbedDialog } from "./Embed";
+import { EmbedTabName } from "./lib/EmbedTabs";
+import { EmbedType } from "./types";
+
+// Mock tabs configuration
+const mockTabs = [
+  {
+    name: "HTML",
+    href: "embedTabName=embed-code",
+    type: "code" as const,
+    Component: () => null,
+  },
+  {
+    name: "React",
+    href: "embedTabName=embed-react",
+    type: "code" as const,
+    Component: () => null,
+  },
+  {
+    name: "Preview",
+    href: "embedTabName=embed-preview",
+    type: "preview" as const,
+    Component: () => null,
+  },
+];
+
+// Mock embed types
+const mockTypes = [
+  {
+    type: "inline" as EmbedType,
+    title: "Inline Embed",
+    subtitle: "Embed the booking page directly into your website",
+    illustration: <div className="h-20 w-20 bg-gray-200" />,
+  },
+  {
+    type: "floating-popup" as EmbedType,
+    title: "Floating Button",
+    subtitle: "Add a floating button to your website",
+    illustration: <div className="h-20 w-20 bg-gray-200" />,
+  },
+  {
+    type: "element-click" as EmbedType,
+    title: "Pop-up on Element Click",
+    subtitle: "Show booking page when clicking an element",
+    illustration: <div className="h-20 w-20 bg-gray-200" />,
+  },
+  {
+    type: "email" as EmbedType,
+    title: "Email Embed",
+    subtitle: "Share booking slots via email",
+    illustration: <div className="h-20 w-20 bg-gray-200" />,
+  },
+];
+
+const meta = {
+  component: EmbedDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    noQueryParamMode: {
+      control: "boolean",
+      description: "Whether to use query params or internal state for dialog management",
+    },
+    eventTypeHideOptionDisabled: {
+      control: "boolean",
+      description: "Disable the option to hide event type details",
+    },
+  },
+} satisfies Meta<typeof EmbedDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default story showing the EmbedDialog in no-query-param mode.
+ * This allows the dialog to be controlled via internal state.
+ */
+export const Default: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Embed Dialog
+        </button>
+        {isOpen && (
+          <EmbedDialog
+            {...args}
+            types={mockTypes}
+            tabs={mockTabs}
+            eventTypeHideOptionDisabled={false}
+            defaultBrandColor={{ brandColor: "#000000", darkBrandColor: "#ffffff" }}
+            noQueryParamMode={true}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * EmbedButton component that triggers the embed dialog.
+ * This is the typical way users would interact with the embed functionality.
+ */
+export const WithEmbedButton: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-600">Click the button below to open the embed dialog:</p>
+      <EmbedButton
+        embedUrl="https://cal.com/example/30min"
+        namespace="example"
+        eventId={123}
+        noQueryParamMode={true}>
+        Embed This Event
+      </EmbedButton>
+    </div>
+  ),
+};
+
+/**
+ * Inline embed type variant.
+ * Shows the dialog configured for inline embedding.
+ */
+export const InlineEmbedType: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Inline Embed
+        </button>
+        {isOpen && (
+          <EmbedDialog
+            {...args}
+            types={mockTypes.filter((t) => t.type === "inline")}
+            tabs={mockTabs}
+            eventTypeHideOptionDisabled={false}
+            defaultBrandColor={{ brandColor: "#292929", darkBrandColor: "#fafafa" }}
+            noQueryParamMode={true}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Floating popup embed type variant.
+ * Shows the dialog configured for floating button embedding.
+ */
+export const FloatingPopupEmbedType: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Floating Popup Embed
+        </button>
+        {isOpen && (
+          <EmbedDialog
+            {...args}
+            types={mockTypes.filter((t) => t.type === "floating-popup")}
+            tabs={mockTabs}
+            eventTypeHideOptionDisabled={false}
+            defaultBrandColor={{ brandColor: "#000000", darkBrandColor: "#ffffff" }}
+            noQueryParamMode={true}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Element click embed type variant.
+ * Shows the dialog configured for element click embedding.
+ */
+export const ElementClickEmbedType: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Element Click Embed
+        </button>
+        {isOpen && (
+          <EmbedDialog
+            {...args}
+            types={mockTypes.filter((t) => t.type === "element-click")}
+            tabs={mockTabs}
+            eventTypeHideOptionDisabled={false}
+            defaultBrandColor={{ brandColor: "#000000", darkBrandColor: "#ffffff" }}
+            noQueryParamMode={true}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Custom brand colors variant.
+ * Shows the dialog with custom brand colors configured.
+ */
+export const WithCustomBrandColors: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-md bg-purple-600 px-4 py-2 text-white hover:bg-purple-700">
+          Open with Custom Colors
+        </button>
+        {isOpen && (
+          <EmbedDialog
+            {...args}
+            types={mockTypes}
+            tabs={mockTabs}
+            eventTypeHideOptionDisabled={false}
+            defaultBrandColor={{ brandColor: "#8b5cf6", darkBrandColor: "#c4b5fd" }}
+            noQueryParamMode={true}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Event type hide option disabled variant.
+ * Shows the dialog with the event type hide option disabled.
+ */
+export const EventTypeHideDisabled: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">
+          This variant has the event type hide option disabled.
+        </p>
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open Dialog
+        </button>
+        {isOpen && (
+          <EmbedDialog
+            {...args}
+            types={mockTypes}
+            tabs={mockTabs}
+            eventTypeHideOptionDisabled={true}
+            defaultBrandColor={{ brandColor: "#000000", darkBrandColor: "#ffffff" }}
+            noQueryParamMode={true}
+          />
+        )}
+      </div>
+    );
+  },
+};
+
+/**
+ * Multiple embed buttons variant.
+ * Shows multiple embed buttons for different event types.
+ */
+export const MultipleEmbedButtons: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-600">Multiple event types with embed buttons:</p>
+      <div className="flex flex-col gap-2">
+        <EmbedButton
+          embedUrl="https://cal.com/example/15min"
+          namespace="example"
+          eventId={1}
+          noQueryParamMode={true}
+          className="w-full">
+          Embed 15 Min Meeting
+        </EmbedButton>
+        <EmbedButton
+          embedUrl="https://cal.com/example/30min"
+          namespace="example"
+          eventId={2}
+          noQueryParamMode={true}
+          className="w-full">
+          Embed 30 Min Meeting
+        </EmbedButton>
+        <EmbedButton
+          embedUrl="https://cal.com/example/60min"
+          namespace="example"
+          eventId={3}
+          noQueryParamMode={true}
+          className="w-full">
+          Embed 60 Min Meeting
+        </EmbedButton>
+      </div>
+    </div>
+  ),
+};
+
+/**
+ * All embed types variant.
+ * Shows the dialog with all available embed types.
+ */
+export const AllEmbedTypes: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">
+          This shows all available embed types: Inline, Floating Button, Element Click, and Email.
+        </p>
+        <button
+          onClick={() => setIsOpen(true)}
+          className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+          Open All Embed Types
+        </button>
+        {isOpen && (
+          <EmbedDialog
+            {...args}
+            types={mockTypes}
+            tabs={mockTabs}
+            eventTypeHideOptionDisabled={false}
+            defaultBrandColor={{ brandColor: "#000000", darkBrandColor: "#ffffff" }}
+            noQueryParamMode={true}
+          />
+        )}
+      </div>
+    );
+  },
+};
diff --git a/packages/features/embed/EventTypeEmbed.stories.tsx b/packages/features/embed/EventTypeEmbed.stories.tsx
new file mode 100644
index 00000000000000..b3db843a658d02
--- /dev/null
+++ b/packages/features/embed/EventTypeEmbed.stories.tsx
@@ -0,0 +1,202 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { EventTypeEmbedButton } from "./EventTypeEmbed";
+
+const meta = {
+  component: EventTypeEmbedButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    embedUrl: "john-doe/30min",
+    namespace: "default",
+  },
+  argTypes: {
+    embedUrl: {
+      control: "text",
+      description: "The URL path for the event type to embed (e.g., 'username/event-slug')",
+    },
+    namespace: {
+      control: "text",
+      description: "Namespace identifier for the embed instance",
+    },
+    eventId: {
+      control: "number",
+      description: "Optional event type ID",
+    },
+    noQueryParamMode: {
+      control: "boolean",
+      description: "Whether to use query parameters or internal state for embed dialog",
+    },
+    className: {
+      control: "text",
+      description: "Additional CSS classes to apply to the button",
+    },
+  },
+} satisfies Meta<typeof EventTypeEmbedButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    embedUrl: "john-doe/30min",
+    namespace: "default",
+    children: "Embed",
+  },
+};
+
+export const WithCustomText: Story = {
+  args: {
+    embedUrl: "team/consultation",
+    namespace: "team-embed",
+    children: "Add to your site",
+  },
+};
+
+export const WithEventId: Story = {
+  args: {
+    embedUrl: "jane-smith/discovery-call",
+    namespace: "discovery",
+    eventId: 123,
+    children: "Embed Event",
+  },
+};
+
+export const NoQueryParamMode: Story = {
+  args: {
+    embedUrl: "sales/demo",
+    namespace: "sales-demo",
+    noQueryParamMode: true,
+    children: "Embed (No Query Params)",
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    embedUrl: "support/meeting",
+    namespace: "support",
+    className: "bg-blue-500 text-white hover:bg-blue-600",
+    children: "Book a Meeting",
+  },
+};
+
+export const TeamEvent: Story = {
+  args: {
+    embedUrl: "team/engineering/standup",
+    namespace: "team-standup",
+    eventId: 456,
+    children: "Embed Team Event",
+  },
+};
+
+export const LongEventName: Story = {
+  args: {
+    embedUrl: "consultant/in-depth-strategic-planning-session",
+    namespace: "strategic-planning",
+    children: "Embed Strategic Planning",
+  },
+};
+
+export const MultipleButtons: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <EventTypeEmbedButton
+          embedUrl="john/30min"
+          namespace="quick-call"
+          className="w-full justify-center">
+          30 Min Meeting
+        </EventTypeEmbedButton>
+      </div>
+      <div>
+        <EventTypeEmbedButton embedUrl="john/60min" namespace="long-call" className="w-full justify-center">
+          60 Min Meeting
+        </EventTypeEmbedButton>
+      </div>
+      <div>
+        <EventTypeEmbedButton
+          embedUrl="john/consultation"
+          namespace="consultation"
+          className="w-full justify-center">
+          Free Consultation
+        </EventTypeEmbedButton>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const InCardLayout: Story = {
+  render: () => (
+    <div className="border-subtle max-w-md rounded-lg border p-6">
+      <h3 className="text-emphasis mb-2 text-lg font-semibold">Schedule a Meeting</h3>
+      <p className="text-subtle mb-4 text-sm">
+        Click the button below to embed our booking calendar on your website or share it with your audience.
+      </p>
+      <EventTypeEmbedButton
+        embedUrl="team/consultation"
+        namespace="card-embed"
+        className="w-full justify-center">
+        Get Embed Code
+      </EventTypeEmbedButton>
+    </div>
+  ),
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export const WithDifferentColorSchemes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <EventTypeEmbedButton
+        embedUrl="john/meeting"
+        namespace="primary"
+        className="bg-brand text-brand-text hover:bg-brand-emphasis">
+        Primary Style
+      </EventTypeEmbedButton>
+      <EventTypeEmbedButton
+        embedUrl="john/meeting"
+        namespace="secondary"
+        className="bg-subtle text-emphasis hover:bg-emphasis">
+        Secondary Style
+      </EventTypeEmbedButton>
+      <EventTypeEmbedButton
+        embedUrl="john/meeting"
+        namespace="minimal"
+        className="bg-transparent text-emphasis border border-subtle hover:bg-subtle">
+        Minimal Style
+      </EventTypeEmbedButton>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const AsCustomElement: Story = {
+  args: {
+    embedUrl: "designer/portfolio-review",
+    namespace: "custom-element",
+    as: "div",
+    children: "Click to Embed",
+  },
+};
+
+export const Interactive: Story = {
+  args: {
+    embedUrl: "interactive/demo",
+    namespace: "interactive-demo",
+    children: "Open Embed Dialog",
+  },
+  play: async ({ args }) => {
+    // This story demonstrates the interactive behavior
+    // When clicked, it should open the embed dialog
+    console.log("Embed button clicked with args:", args);
+  },
+};
diff --git a/packages/features/embed/RoutingFormEmbed.stories.tsx b/packages/features/embed/RoutingFormEmbed.stories.tsx
new file mode 100644
index 00000000000000..64158ce31bbc6c
--- /dev/null
+++ b/packages/features/embed/RoutingFormEmbed.stories.tsx
@@ -0,0 +1,368 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { RoutingFormEmbedDialog, RoutingFormEmbedButton } from "./RoutingFormEmbed";
+
+const meta = {
+  title: "Features/Embed/RoutingFormEmbed",
+  component: RoutingFormEmbedDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="min-h-[600px] w-full">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof RoutingFormEmbedDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock data for stories
+const mockUserData = {
+  id: 1,
+  username: "testuser",
+  email: "test@example.com",
+  brandColor: "#292929",
+  darkBrandColor: "#fafafa",
+  name: "Test User",
+  timeZone: "America/New_York",
+  locale: "en",
+};
+
+/**
+ * Default RoutingFormEmbedDialog story
+ *
+ * This shows the routing form embed dialog with all standard embed types.
+ * The dialog allows users to choose how to embed their routing form:
+ * - Inline: Embedded directly in a page
+ * - Floating Popup: A floating button that opens the form
+ * - On Element Click: Triggered when clicking specific elements
+ */
+export const Default: Story = {
+  render: function DefaultStory() {
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">
+          Click the button below to open the Routing Form Embed Dialog
+        </p>
+        <RoutingFormEmbedButton
+          embedUrl="routing/form"
+          namespace="routing"
+          eventId={1}>
+          Open Routing Form Embed
+        </RoutingFormEmbedButton>
+        <RoutingFormEmbedDialog />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The default routing form embed dialog. Users can select different embed types for their routing forms, excluding email embeds which are not supported for routing forms.",
+      },
+    },
+  },
+};
+
+/**
+ * RoutingFormEmbedButton story
+ *
+ * Shows the embed button component in isolation with different variants.
+ */
+export const EmbedButton: Story = {
+  render: function EmbedButtonStory() {
+    return (
+      <div className="space-y-4">
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Default Button</p>
+          <RoutingFormEmbedButton
+            embedUrl="routing/example"
+            namespace="routing"
+            eventId={1}>
+            Embed Routing Form
+          </RoutingFormEmbedButton>
+        </div>
+
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Custom Styled Button</p>
+          <RoutingFormEmbedButton
+            embedUrl="routing/custom"
+            namespace="custom"
+            eventId={2}
+            className="bg-blue-500 hover:bg-blue-600 text-white">
+            Custom Embed Button
+          </RoutingFormEmbedButton>
+        </div>
+
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Different Event ID</p>
+          <RoutingFormEmbedButton
+            embedUrl="routing/sales-form"
+            namespace="sales"
+            eventId={999}>
+            Sales Form Embed
+          </RoutingFormEmbedButton>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The RoutingFormEmbedButton component triggers the embed dialog. It supports custom styling and can be used with different event IDs and namespaces.",
+      },
+    },
+  },
+};
+
+/**
+ * Dialog with Custom Brand Colors
+ *
+ * Shows how the embed dialog adapts to different brand colors.
+ */
+export const WithCustomBrandColors: Story = {
+  render: function CustomBrandColorsStory() {
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600">
+          This example shows the embed dialog with custom brand colors configured.
+          The dialog will use these colors in the embed code generation.
+        </p>
+        <RoutingFormEmbedButton
+          embedUrl="routing/branded-form"
+          namespace="branded"
+          eventId={1}>
+          Open Branded Embed Dialog
+        </RoutingFormEmbedButton>
+        <RoutingFormEmbedDialog />
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When a user has custom brand colors configured, the embed dialog will include these in the generated embed code.",
+      },
+    },
+  },
+};
+
+/**
+ * Multiple Buttons Example
+ *
+ * Shows how multiple embed buttons can be used on the same page.
+ */
+export const MultipleEmbedButtons: Story = {
+  render: function MultipleButtonsStory() {
+    return (
+      <div className="space-y-6">
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Marketing Form</h3>
+          <p className="text-sm text-gray-600 mb-2">
+            Embed button for marketing routing form
+          </p>
+          <RoutingFormEmbedButton
+            embedUrl="routing/marketing"
+            namespace="marketing"
+            eventId={101}>
+            Embed Marketing Form
+          </RoutingFormEmbedButton>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Sales Form</h3>
+          <p className="text-sm text-gray-600 mb-2">
+            Embed button for sales routing form
+          </p>
+          <RoutingFormEmbedButton
+            embedUrl="routing/sales"
+            namespace="sales"
+            eventId={102}>
+            Embed Sales Form
+          </RoutingFormEmbedButton>
+        </div>
+
+        <div>
+          <h3 className="text-lg font-semibold mb-2">Support Form</h3>
+          <p className="text-sm text-gray-600 mb-2">
+            Embed button for support routing form
+          </p>
+          <RoutingFormEmbedButton
+            embedUrl="routing/support"
+            namespace="support"
+            eventId={103}>
+            Embed Support Form
+          </RoutingFormEmbedButton>
+        </div>
+
+        <RoutingFormEmbedDialog />
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Multiple routing form embed buttons can be used on the same page, each with different configurations and event IDs.",
+      },
+    },
+  },
+};
+
+/**
+ * Button as Custom Element
+ *
+ * Shows how the embed button can be rendered as a custom element type.
+ */
+export const ButtonAsCustomElement: Story = {
+  render: function CustomElementStory() {
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600 mb-4">
+          The embed button can be rendered as different HTML elements using the `as` prop.
+        </p>
+
+        <div className="space-y-3">
+          <div>
+            <p className="text-xs text-gray-500 mb-1">As default button:</p>
+            <RoutingFormEmbedButton
+              embedUrl="routing/form1"
+              namespace="default"
+              eventId={1}>
+              Default Button Element
+            </RoutingFormEmbedButton>
+          </div>
+
+          <div>
+            <p className="text-xs text-gray-500 mb-1">With custom className:</p>
+            <RoutingFormEmbedButton
+              embedUrl="routing/form2"
+              namespace="custom-class"
+              eventId={2}
+              className="bg-purple-500 hover:bg-purple-600">
+              Custom Styled Element
+            </RoutingFormEmbedButton>
+          </div>
+        </div>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "The RoutingFormEmbedButton component accepts an `as` prop to render as different element types, and supports custom className for styling.",
+      },
+    },
+  },
+};
+
+/**
+ * Compact Button Variant
+ *
+ * Shows a more compact version of the embed button.
+ */
+export const CompactButton: Story = {
+  render: function CompactButtonStory() {
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600 mb-2">
+          Compact embed button suitable for limited spaces
+        </p>
+        <RoutingFormEmbedButton
+          embedUrl="routing/compact"
+          namespace="compact"
+          eventId={1}
+          className="text-sm px-3 py-1.5">
+          Embed
+        </RoutingFormEmbedButton>
+      </div>
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "A compact version of the embed button, useful when space is limited or when you want a more subtle call-to-action.",
+      },
+    },
+  },
+};
+
+/**
+ * Button with Different Namespaces
+ *
+ * Demonstrates how different namespaces affect the embed configuration.
+ */
+export const DifferentNamespaces: Story = {
+  render: function DifferentNamespacesStory() {
+    return (
+      <div className="space-y-4">
+        <p className="text-sm text-gray-600 mb-4">
+          Different namespaces help organize and differentiate multiple embeds on the same page.
+        </p>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="p-4 border rounded">
+            <p className="text-xs font-semibold mb-2">Namespace: "onboarding"</p>
+            <RoutingFormEmbedButton
+              embedUrl="routing/onboarding"
+              namespace="onboarding"
+              eventId={1}>
+              Onboarding Form
+            </RoutingFormEmbedButton>
+          </div>
+
+          <div className="p-4 border rounded">
+            <p className="text-xs font-semibold mb-2">Namespace: "feedback"</p>
+            <RoutingFormEmbedButton
+              embedUrl="routing/feedback"
+              namespace="feedback"
+              eventId={2}>
+              Feedback Form
+            </RoutingFormEmbedButton>
+          </div>
+
+          <div className="p-4 border rounded">
+            <p className="text-xs font-semibold mb-2">Namespace: "contact"</p>
+            <RoutingFormEmbedButton
+              embedUrl="routing/contact"
+              namespace="contact"
+              eventId={3}>
+              Contact Form
+            </RoutingFormEmbedButton>
+          </div>
+
+          <div className="p-4 border rounded">
+            <p className="text-xs font-semibold mb-2">Namespace: "application"</p>
+            <RoutingFormEmbedButton
+              embedUrl="routing/application"
+              namespace="application"
+              eventId={4}>
+              Application Form
+            </RoutingFormEmbedButton>
+          </div>
+        </div>
+
+        <RoutingFormEmbedDialog />
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        story:
+          "Namespaces are used to differentiate multiple routing form embeds on the same page. Each namespace creates an isolated embed instance.",
+      },
+    },
+  },
+};
diff --git a/packages/features/eventtypes/components/AddMembersWithSwitch.stories.tsx b/packages/features/eventtypes/components/AddMembersWithSwitch.stories.tsx
new file mode 100644
index 00000000000000..8f6d54d8ad7b25
--- /dev/null
+++ b/packages/features/eventtypes/components/AddMembersWithSwitch.stories.tsx
@@ -0,0 +1,432 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+
+import type { FormValues, Host, TeamMember } from "@calcom/features/eventtypes/lib/types";
+
+import { AddMembersWithSwitch } from "./AddMembersWithSwitch";
+
+// Mock team members data
+const mockTeamMembers: TeamMember[] = [
+  {
+    value: "1",
+    label: "Alice Johnson",
+    avatar: "https://i.pravatar.cc/150?img=1",
+    email: "alice@example.com",
+    defaultScheduleId: 1,
+  },
+  {
+    value: "2",
+    label: "Bob Smith",
+    avatar: "https://i.pravatar.cc/150?img=2",
+    email: "bob@example.com",
+    defaultScheduleId: 2,
+  },
+  {
+    value: "3",
+    label: "Charlie Davis",
+    avatar: "https://i.pravatar.cc/150?img=3",
+    email: "charlie@example.com",
+    defaultScheduleId: 3,
+  },
+  {
+    value: "4",
+    label: "Diana Prince",
+    avatar: "https://i.pravatar.cc/150?img=4",
+    email: "diana@example.com",
+    defaultScheduleId: 4,
+  },
+  {
+    value: "5",
+    label: "Eve Martinez",
+    avatar: "https://i.pravatar.cc/150?img=5",
+    email: "eve@example.com",
+    defaultScheduleId: 5,
+  },
+];
+
+// Wrapper component to provide form context
+const FormWrapper = ({ children, defaultValues }: { children: React.ReactNode; defaultValues?: any }) => {
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      assignRRMembersUsingSegment: defaultValues?.assignRRMembersUsingSegment || false,
+      rrSegmentQueryValue: defaultValues?.rrSegmentQueryValue || null,
+      ...defaultValues,
+    },
+  });
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+const meta = {
+  component: AddMembersWithSwitch,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AddMembersWithSwitch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={false}
+          onActive={() => console.log("Active")}
+          isFixed={false}
+          placeholder="Add team members"
+          teamId={1}
+          groupId={null}
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const WithSelectedMembers: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([
+      {
+        isFixed: false,
+        userId: 1,
+        priority: 2,
+        weight: 100,
+        scheduleId: 1,
+        groupId: null,
+      },
+      {
+        isFixed: false,
+        userId: 2,
+        priority: 2,
+        weight: 100,
+        scheduleId: 2,
+        groupId: null,
+      },
+    ]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={false}
+          onActive={() => console.log("Active")}
+          isFixed={false}
+          placeholder="Add team members"
+          teamId={1}
+          groupId={null}
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const WithAssignAllEnabled: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={true}
+          onActive={() => console.log("Active")}
+          isFixed={false}
+          placeholder="Add team members"
+          teamId={1}
+          groupId={null}
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const WithAssignAllActive: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(true);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={true}
+          onActive={() => console.log("Active")}
+          isFixed={false}
+          placeholder="Add team members"
+          teamId={1}
+          groupId={null}
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const WithSegmentApplicable: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(true);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={true}
+          onActive={() => console.log("Active")}
+          isFixed={false}
+          placeholder="Add team members"
+          teamId={1}
+          isSegmentApplicable={true}
+          groupId={null}
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const WithRoundRobinWeights: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([
+      {
+        isFixed: false,
+        userId: 1,
+        priority: 2,
+        weight: 80,
+        scheduleId: 1,
+        groupId: null,
+      },
+      {
+        isFixed: false,
+        userId: 2,
+        priority: 1,
+        weight: 120,
+        scheduleId: 2,
+        groupId: null,
+      },
+      {
+        isFixed: false,
+        userId: 3,
+        priority: 2,
+        weight: 100,
+        scheduleId: 3,
+        groupId: null,
+      },
+    ]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={false}
+          onActive={() => console.log("Active")}
+          isFixed={false}
+          placeholder="Add team members"
+          isRRWeightsEnabled={true}
+          teamId={1}
+          groupId={null}
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const FixedHosts: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([
+      {
+        isFixed: true,
+        userId: 1,
+        priority: 2,
+        weight: 100,
+        scheduleId: 1,
+        groupId: null,
+      },
+      {
+        isFixed: true,
+        userId: 3,
+        priority: 2,
+        weight: 100,
+        scheduleId: 3,
+        groupId: null,
+      },
+    ]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={false}
+          onActive={() => console.log("Active")}
+          isFixed={true}
+          placeholder="Add fixed hosts"
+          teamId={1}
+          groupId={null}
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const WithCustomClassNames: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={true}
+          onActive={() => console.log("Active")}
+          isFixed={false}
+          placeholder="Add team members"
+          teamId={1}
+          groupId={null}
+          customClassNames={{
+            assingAllTeamMembers: {
+              container: "border-2 border-blue-200 p-4 rounded-lg",
+            },
+          }}
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const WithGroupId: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([
+      {
+        isFixed: false,
+        userId: 1,
+        priority: 2,
+        weight: 100,
+        scheduleId: 1,
+        groupId: "group-123",
+      },
+    ]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
+
+    return (
+      <FormWrapper>
+        <AddMembersWithSwitch
+          teamMembers={mockTeamMembers}
+          value={hosts}
+          onChange={setHosts}
+          assignAllTeamMembers={assignAllTeamMembers}
+          setAssignAllTeamMembers={setAssignAllTeamMembers}
+          automaticAddAllEnabled={true}
+          onActive={() => console.log("Active")}
+          isFixed={false}
+          placeholder="Add team members"
+          teamId={1}
+          groupId="group-123"
+        />
+      </FormWrapper>
+    );
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [hosts, setHosts] = useState<Host[]>([]);
+    const [assignAllTeamMembers, setAssignAllTeamMembers] = useState(false);
+
+    return (
+      <FormWrapper>
+        <div className="space-y-4">
+          <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+            <h3 className="mb-2 text-sm font-semibold">State:</h3>
+            <div className="space-y-1 text-xs">
+              <p>Assign all: {assignAllTeamMembers ? "Yes" : "No"}</p>
+              <p>Selected hosts: {hosts.length}</p>
+              {hosts.length > 0 && (
+                <div className="mt-2">
+                  <p className="font-medium">Host details:</p>
+                  {hosts.map((host) => {
+                    const member = mockTeamMembers.find((m) => m.value === host.userId.toString());
+                    return (
+                      <div key={host.userId} className="ml-2">
+                        {member?.label} (Priority: {host.priority}, Weight: {host.weight})
+                      </div>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+          </div>
+
+          <AddMembersWithSwitch
+            teamMembers={mockTeamMembers}
+            value={hosts}
+            onChange={(newHosts) => {
+              console.log("Hosts changed:", newHosts);
+              setHosts(newHosts);
+            }}
+            assignAllTeamMembers={assignAllTeamMembers}
+            setAssignAllTeamMembers={(value) => {
+              console.log("Assign all changed:", value);
+              setAssignAllTeamMembers(value);
+            }}
+            automaticAddAllEnabled={true}
+            onActive={() => console.log("Activated")}
+            isFixed={false}
+            placeholder="Select team members"
+            isRRWeightsEnabled={true}
+            teamId={1}
+            groupId={null}
+          />
+        </div>
+      </FormWrapper>
+    );
+  },
+};
diff --git a/packages/features/eventtypes/components/CheckedTeamSelect.stories.tsx b/packages/features/eventtypes/components/CheckedTeamSelect.stories.tsx
new file mode 100644
index 00000000000000..5d491f07674075
--- /dev/null
+++ b/packages/features/eventtypes/components/CheckedTeamSelect.stories.tsx
@@ -0,0 +1,276 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { CheckedTeamSelect } from "./CheckedTeamSelect";
+import type { CheckedSelectOption } from "./CheckedTeamSelect";
+
+const mockOptions: CheckedSelectOption[] = [
+  {
+    avatar: "https://cal.com/stakeholder/peer.jpg",
+    label: "John Doe",
+    value: "user-1",
+    priority: 2,
+    weight: 100,
+    isFixed: false,
+    disabled: false,
+    defaultScheduleId: 1,
+    groupId: null,
+  },
+  {
+    avatar: "https://cal.com/stakeholder/bailey.jpg",
+    label: "Jane Smith",
+    value: "user-2",
+    priority: 3,
+    weight: 80,
+    isFixed: false,
+    disabled: false,
+    defaultScheduleId: 2,
+    groupId: null,
+  },
+  {
+    avatar: "https://cal.com/stakeholder/alex.jpg",
+    label: "Alex Johnson",
+    value: "user-3",
+    priority: 1,
+    weight: 60,
+    isFixed: false,
+    disabled: false,
+    defaultScheduleId: 3,
+    groupId: null,
+  },
+  {
+    avatar: "https://cal.com/stakeholder/chris.jpg",
+    label: "Chris Brown",
+    value: "user-4",
+    priority: 4,
+    weight: 120,
+    isFixed: false,
+    disabled: false,
+    defaultScheduleId: 4,
+    groupId: null,
+  },
+  {
+    avatar: "https://cal.com/stakeholder/sam.jpg",
+    label: "Sam Wilson",
+    value: "user-5",
+    priority: 0,
+    weight: 50,
+    isFixed: false,
+    disabled: false,
+    defaultScheduleId: 5,
+    groupId: null,
+  },
+];
+
+const mockOptionsWithFixed: CheckedSelectOption[] = [
+  ...mockOptions.slice(0, 2),
+  {
+    avatar: "https://cal.com/stakeholder/admin.jpg",
+    label: "Admin User (Fixed)",
+    value: "user-admin",
+    priority: 2,
+    weight: 100,
+    isFixed: true,
+    disabled: false,
+    defaultScheduleId: 6,
+    groupId: null,
+  },
+  ...mockOptions.slice(2),
+];
+
+const meta = {
+  component: CheckedTeamSelect,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    onChange: fn(),
+    groupId: null,
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[500px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof CheckedTeamSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    options: mockOptions,
+    value: [],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: false,
+  },
+};
+
+export const WithSelectedMembers: Story = {
+  args: {
+    options: mockOptions,
+    value: [mockOptions[0], mockOptions[1]],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: false,
+  },
+};
+
+export const WithWeightsEnabled: Story = {
+  args: {
+    options: mockOptions,
+    value: [mockOptions[0], mockOptions[1], mockOptions[2]],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: true,
+  },
+};
+
+export const WithFixedMember: Story = {
+  args: {
+    options: mockOptionsWithFixed,
+    value: [mockOptionsWithFixed[0], mockOptionsWithFixed[2]],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: false,
+  },
+};
+
+export const WithFixedMemberAndWeights: Story = {
+  args: {
+    options: mockOptionsWithFixed,
+    value: [mockOptionsWithFixed[0], mockOptionsWithFixed[2], mockOptionsWithFixed[3]],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: true,
+  },
+};
+
+export const AllPriorityLevels: Story = {
+  args: {
+    options: mockOptions,
+    value: mockOptions,
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: false,
+  },
+};
+
+export const AllPriorityLevelsWithWeights: Story = {
+  args: {
+    options: mockOptions,
+    value: mockOptions,
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: true,
+  },
+};
+
+export const WithDisabledOptions: Story = {
+  args: {
+    options: mockOptions.map((opt, index) => ({
+      ...opt,
+      disabled: index % 2 === 0,
+    })),
+    value: [mockOptions[1]],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: false,
+  },
+};
+
+export const WithGroupId: Story = {
+  args: {
+    options: mockOptions.map((opt) => ({ ...opt, groupId: "group-1" })),
+    value: [
+      { ...mockOptions[0], groupId: "group-1" },
+      { ...mockOptions[1], groupId: "group-1" },
+    ],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: false,
+    groupId: "group-1",
+  },
+};
+
+export const MixedGroups: Story = {
+  args: {
+    options: mockOptions.map((opt, index) => ({
+      ...opt,
+      groupId: index < 3 ? "group-1" : "group-2",
+    })),
+    value: [
+      { ...mockOptions[0], groupId: "group-1" },
+      { ...mockOptions[1], groupId: "group-1" },
+      { ...mockOptions[3], groupId: "group-2" },
+    ],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: true,
+    groupId: "group-1",
+  },
+};
+
+export const SingleSelection: Story = {
+  args: {
+    options: mockOptions,
+    value: [mockOptions[0]],
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: false,
+  },
+};
+
+export const CustomPlaceholder: Story = {
+  args: {
+    options: mockOptions,
+    value: [],
+    name: "team-members",
+    placeholder: "Add hosts to your event type...",
+    isRRWeightsEnabled: false,
+  },
+};
+
+export const EmptyState: Story = {
+  args: {
+    options: [],
+    value: [],
+    name: "team-members",
+    placeholder: "No team members available",
+    isRRWeightsEnabled: false,
+  },
+};
+
+export const LargeTeam: Story = {
+  args: {
+    options: Array.from({ length: 20 }, (_, i) => ({
+      avatar: `https://cal.com/stakeholder/peer.jpg`,
+      label: `Team Member ${i + 1}`,
+      value: `user-${i + 1}`,
+      priority: i % 5,
+      weight: 50 + i * 5,
+      isFixed: false,
+      disabled: false,
+      defaultScheduleId: i + 1,
+      groupId: null,
+    })),
+    value: Array.from({ length: 5 }, (_, i) => ({
+      avatar: `https://cal.com/stakeholder/peer.jpg`,
+      label: `Team Member ${i + 1}`,
+      value: `user-${i + 1}`,
+      priority: i % 5,
+      weight: 50 + i * 5,
+      isFixed: false,
+      disabled: false,
+      defaultScheduleId: i + 1,
+      groupId: null,
+    })),
+    name: "team-members",
+    placeholder: "Select team members...",
+    isRRWeightsEnabled: true,
+  },
+};
diff --git a/packages/features/eventtypes/components/CreateEventTypeForm.stories.tsx b/packages/features/eventtypes/components/CreateEventTypeForm.stories.tsx
new file mode 100644
index 00000000000000..317c8673756f8f
--- /dev/null
+++ b/packages/features/eventtypes/components/CreateEventTypeForm.stories.tsx
@@ -0,0 +1,282 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+import { createEventTypeInput } from "@calcom/features/eventtypes/lib/types";
+import type { CreateEventTypeFormValues } from "@calcom/features/eventtypes/hooks/useCreateEventType";
+import { Button } from "@calcom/ui/components/button";
+
+import CreateEventTypeForm from "./CreateEventTypeForm";
+
+const meta = {
+  component: CreateEventTypeForm,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof CreateEventTypeForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const FormWrapper = ({
+  isManagedEventType = false,
+  isPending = false,
+  pageSlug = "johndoe",
+  urlPrefix = "https://cal.com",
+  defaultValues,
+}: {
+  isManagedEventType?: boolean;
+  isPending?: boolean;
+  pageSlug?: string;
+  urlPrefix?: string;
+  defaultValues?: Partial<CreateEventTypeFormValues>;
+}) => {
+  const form = useForm<CreateEventTypeFormValues>({
+    defaultValues: {
+      length: 15,
+      title: "",
+      slug: "",
+      description: "",
+      ...defaultValues,
+    },
+    resolver: zodResolver(createEventTypeInput),
+  });
+
+  const handleSubmit = (values: CreateEventTypeFormValues) => {
+    console.log("Form submitted:", values);
+    alert(`Event Type Created:\nTitle: ${values.title}\nSlug: ${values.slug}\nDuration: ${values.length} minutes`);
+  };
+
+  const SubmitButton = (isPending: boolean) => (
+    <div className="flex justify-end">
+      <Button type="submit" loading={isPending}>
+        {isPending ? "Creating..." : "Create Event Type"}
+      </Button>
+    </div>
+  );
+
+  return (
+    <CreateEventTypeForm
+      form={form}
+      isManagedEventType={isManagedEventType}
+      handleSubmit={handleSubmit}
+      pageSlug={pageSlug}
+      isPending={isPending}
+      urlPrefix={urlPrefix}
+      SubmitButton={SubmitButton}
+    />
+  );
+};
+
+export const Default: Story = {
+  render: () => <FormWrapper />,
+};
+
+export const WithDefaultValues: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        title: "Quick Chat",
+        slug: "quick-chat",
+        description: "A quick 15 minute chat to discuss your needs",
+        length: 15,
+      }}
+    />
+  ),
+};
+
+export const LongerDuration: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        title: "Initial Consultation",
+        slug: "initial-consultation",
+        description: "A comprehensive one-hour consultation to understand your requirements",
+        length: 60,
+      }}
+    />
+  ),
+};
+
+export const WithLongUrlPrefix: Story = {
+  render: () => (
+    <FormWrapper
+      urlPrefix="https://very-long-organization-name.cal.com"
+      pageSlug="user-with-long-name"
+      defaultValues={{
+        title: "Team Meeting",
+        slug: "team-meeting",
+        length: 30,
+      }}
+    />
+  ),
+};
+
+export const ManagedEventType: Story = {
+  render: () => (
+    <FormWrapper
+      isManagedEventType={true}
+      defaultValues={{
+        title: "Managed Event",
+        slug: "managed-event",
+        description: "This is a managed event type for the team",
+        length: 30,
+      }}
+    />
+  ),
+};
+
+export const LoadingState: Story = {
+  render: () => (
+    <FormWrapper
+      isPending={true}
+      defaultValues={{
+        title: "Creating Event",
+        slug: "creating-event",
+        length: 30,
+      }}
+    />
+  ),
+};
+
+export const ShortUrlPrefix: Story = {
+  render: () => (
+    <FormWrapper
+      urlPrefix="cal.com"
+      pageSlug="john"
+      defaultValues={{
+        title: "Quick Call",
+        slug: "quick-call",
+        length: 15,
+      }}
+    />
+  ),
+};
+
+export const CustomPageSlug: Story = {
+  render: () => (
+    <FormWrapper
+      pageSlug="sales-team"
+      defaultValues={{
+        title: "Sales Demo",
+        slug: "sales-demo",
+        description: "Schedule a demo with our sales team",
+        length: 45,
+      }}
+    />
+  ),
+};
+
+export const EmptyForm: Story = {
+  render: () => <FormWrapper defaultValues={{}} />,
+};
+
+export const WithMarkdownDescription: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        title: "Strategy Session",
+        slug: "strategy-session",
+        description: `## What to Expect
+
+- In-depth discussion of your goals
+- Strategic recommendations
+- Action plan development
+
+**Duration:** Flexible based on your needs`,
+        length: 90,
+      }}
+    />
+  ),
+};
+
+export const AllDurations: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-sm font-semibold mb-4">15 Minutes</h3>
+        <FormWrapper
+          defaultValues={{
+            title: "Quick Check-in",
+            slug: "quick-checkin",
+            length: 15,
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-4">30 Minutes</h3>
+        <FormWrapper
+          defaultValues={{
+            title: "Standard Meeting",
+            slug: "standard-meeting",
+            length: 30,
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-4">60 Minutes</h3>
+        <FormWrapper
+          defaultValues={{
+            title: "Consultation",
+            slug: "consultation",
+            length: 60,
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-4">120 Minutes</h3>
+        <FormWrapper
+          defaultValues={{
+            title: "Workshop",
+            slug: "workshop",
+            length: 120,
+          }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const DifferentEventTypes: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Personal Event</h3>
+        <FormWrapper
+          defaultValues={{
+            title: "Coffee Chat",
+            slug: "coffee-chat",
+            description: "Informal coffee chat",
+            length: 30,
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Managed Event</h3>
+        <FormWrapper
+          isManagedEventType={true}
+          defaultValues={{
+            title: "Team Sync",
+            slug: "team-sync",
+            description: "Team synchronization meeting",
+            length: 45,
+          }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/eventtypes/components/EventTypeDescription.stories.tsx b/packages/features/eventtypes/components/EventTypeDescription.stories.tsx
new file mode 100644
index 00000000000000..224b8fb3b09472
--- /dev/null
+++ b/packages/features/eventtypes/components/EventTypeDescription.stories.tsx
@@ -0,0 +1,354 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { SchedulingType } from "@calcom/prisma/enums";
+
+import { EventTypeDescription } from "./EventTypeDescription";
+
+const meta = {
+  component: EventTypeDescription,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    shortenDescription: {
+      description: "Whether to shorten the description to 4 lines",
+      control: "boolean",
+    },
+    isPublic: {
+      description: "Whether this is a public event type",
+      control: "boolean",
+    },
+    className: {
+      description: "Additional CSS classes",
+      control: "text",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[650px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof EventTypeDescription>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const baseEventType = {
+  id: 1,
+  title: "30 Minute Meeting",
+  slug: "30min",
+  length: 30,
+  descriptionAsSafeHTML: "A quick 30 minute meeting to discuss your needs and goals.",
+  position: 0,
+  userId: 1,
+  teamId: null,
+  eventName: null,
+  parentId: null,
+  timeZone: null,
+  periodType: "UNLIMITED" as const,
+  periodStartDate: null,
+  periodEndDate: null,
+  periodDays: null,
+  periodCountCalendarDays: false,
+  requiresConfirmation: false,
+  recurringEvent: null,
+  disableGuests: false,
+  hideCalendarNotes: false,
+  minimumBookingNotice: 120,
+  beforeEventBuffer: 0,
+  afterEventBuffer: 0,
+  schedulingType: null,
+  price: 0,
+  currency: "usd",
+  slotInterval: null,
+  metadata: {},
+  successRedirectUrl: null,
+  seatsPerTimeSlot: null,
+  seatsShowAttendees: null,
+  seatsShowAvailabilityCount: null,
+  forwardParamsSuccessRedirect: null,
+  offsetStart: 0,
+  hidden: false,
+  locations: null,
+};
+
+export const Default: Story = {
+  args: {
+    eventType: baseEventType,
+  },
+};
+
+export const WithLongDescription: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: `# Welcome to our consultation
+
+This is a comprehensive meeting where we will:
+
+- Discuss your project requirements in detail
+- Review your current setup and challenges
+- Provide recommendations and next steps
+- Answer any questions you may have
+
+We look forward to speaking with you!`,
+    },
+  },
+};
+
+export const ShortenedDescription: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: `# Welcome to our consultation
+
+This is a comprehensive meeting where we will:
+
+- Discuss your project requirements in detail
+- Review your current setup and challenges
+- Provide recommendations and next steps
+- Answer any questions you may have
+
+We look forward to speaking with you!`,
+    },
+    shortenDescription: true,
+  },
+};
+
+export const RoundRobinScheduling: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: "Meet with one of our team members in a round-robin fashion.",
+      schedulingType: SchedulingType.ROUND_ROBIN,
+    },
+  },
+};
+
+export const CollectiveScheduling: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: "Meet with our entire team together.",
+      schedulingType: SchedulingType.COLLECTIVE,
+    },
+  },
+};
+
+export const RecurringEvent: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: "Weekly check-in meeting that repeats.",
+      recurringEvent: {
+        freq: 2,
+        count: 12,
+        interval: 1,
+      },
+    },
+  },
+};
+
+export const WithPayment: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: "One-on-one coaching session.",
+      metadata: {
+        apps: {
+          stripe: {
+            enabled: true,
+            price: 5000,
+            currency: "usd",
+          },
+        },
+      },
+    },
+  },
+};
+
+export const RequiresConfirmation: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: "This meeting requires manual confirmation before being scheduled.",
+      requiresConfirmation: true,
+    },
+  },
+};
+
+export const RequiresConfirmationWithThreshold: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: "May require confirmation based on availability.",
+      requiresConfirmation: true,
+      metadata: {
+        requiresConfirmationThreshold: {
+          time: 30,
+          unit: "minutes",
+        },
+      },
+    },
+  },
+};
+
+export const WithSeats: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: "Group event with limited seats available.",
+      seatsPerTimeSlot: 10,
+    },
+  },
+};
+
+export const MultipleDurations: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: "Flexible meeting with multiple duration options.",
+      metadata: {
+        multipleDuration: [15, 30, 60],
+      },
+    },
+  },
+};
+
+export const CompleteExample: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: `# Premium Consultation
+
+A comprehensive consultation session with our expert team.
+
+**What you'll get:**
+- Personalized recommendations
+- Action plan
+- Follow-up resources
+
+[Learn more](https://example.com)`,
+      schedulingType: SchedulingType.ROUND_ROBIN,
+      requiresConfirmation: true,
+      recurringEvent: {
+        freq: 2,
+        count: 4,
+        interval: 1,
+      },
+      metadata: {
+        apps: {
+          stripe: {
+            enabled: true,
+            price: 10000,
+            currency: "usd",
+          },
+        },
+      },
+      seatsPerTimeSlot: 5,
+    },
+  },
+};
+
+export const NoDescription: Story = {
+  args: {
+    eventType: {
+      ...baseEventType,
+      descriptionAsSafeHTML: null,
+    },
+  },
+};
+
+export const AllFeatures: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Basic Event</h3>
+        <EventTypeDescription eventType={baseEventType} />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Round Robin</h3>
+        <EventTypeDescription
+          eventType={{
+            ...baseEventType,
+            schedulingType: SchedulingType.ROUND_ROBIN,
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Collective</h3>
+        <EventTypeDescription
+          eventType={{
+            ...baseEventType,
+            schedulingType: SchedulingType.COLLECTIVE,
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">With Payment</h3>
+        <EventTypeDescription
+          eventType={{
+            ...baseEventType,
+            metadata: {
+              apps: {
+                stripe: {
+                  enabled: true,
+                  price: 2500,
+                  currency: "usd",
+                },
+              },
+            },
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Recurring</h3>
+        <EventTypeDescription
+          eventType={{
+            ...baseEventType,
+            recurringEvent: {
+              freq: 2,
+              count: 8,
+              interval: 1,
+            },
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Requires Confirmation</h3>
+        <EventTypeDescription
+          eventType={{
+            ...baseEventType,
+            requiresConfirmation: true,
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">With Seats</h3>
+        <EventTypeDescription
+          eventType={{
+            ...baseEventType,
+            seatsPerTimeSlot: 15,
+          }}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Multiple Durations</h3>
+        <EventTypeDescription
+          eventType={{
+            ...baseEventType,
+            metadata: {
+              multipleDuration: [15, 30, 45, 60],
+            },
+          }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/eventtypes/components/HostEditDialogs.stories.tsx b/packages/features/eventtypes/components/HostEditDialogs.stories.tsx
new file mode 100644
index 00000000000000..e8121d96f95350
--- /dev/null
+++ b/packages/features/eventtypes/components/HostEditDialogs.stories.tsx
@@ -0,0 +1,367 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+import { FormProvider, useForm } from "react-hook-form";
+
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
+import { DEFAULT_GROUP_ID } from "@calcom/lib/constants";
+
+import type { CheckedSelectOption } from "./CheckedTeamSelect";
+import { PriorityDialog, WeightDialog } from "./HostEditDialogs";
+
+// Mock form data for the stories
+const mockHosts = [
+  {
+    userId: 1,
+    priority: 2,
+    weight: 100,
+    isFixed: false,
+    groupId: DEFAULT_GROUP_ID,
+  },
+  {
+    userId: 2,
+    priority: 3,
+    weight: 80,
+    isFixed: false,
+    groupId: DEFAULT_GROUP_ID,
+  },
+  {
+    userId: 3,
+    priority: 1,
+    weight: 60,
+    isFixed: false,
+    groupId: DEFAULT_GROUP_ID,
+  },
+];
+
+const mockOptions: CheckedSelectOption[] = [
+  {
+    avatar: "https://i.pravatar.cc/150?img=1",
+    label: "John Doe",
+    value: "1",
+    priority: 2,
+    weight: 100,
+    isFixed: false,
+    groupId: DEFAULT_GROUP_ID,
+  },
+  {
+    avatar: "https://i.pravatar.cc/150?img=2",
+    label: "Jane Smith",
+    value: "2",
+    priority: 3,
+    weight: 80,
+    isFixed: false,
+    groupId: DEFAULT_GROUP_ID,
+  },
+  {
+    avatar: "https://i.pravatar.cc/150?img=3",
+    label: "Bob Johnson",
+    value: "3",
+    priority: 1,
+    weight: 60,
+    isFixed: false,
+    groupId: DEFAULT_GROUP_ID,
+  },
+];
+
+// Wrapper component to provide form context
+const FormWrapper = ({ children }: { children: React.ReactNode }) => {
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      hosts: mockHosts,
+      isRRWeightsEnabled: true,
+      hostGroups: [],
+    },
+  });
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+// Priority Dialog Stories
+const metaPriority = {
+  component: PriorityDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    isOpenDialog: {
+      description: "Controls whether the dialog is open",
+      control: "boolean",
+    },
+    option: {
+      description: "The selected host option to edit",
+      control: "object",
+    },
+    customClassNames: {
+      description: "Custom CSS class names for styling",
+      control: "object",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <FormWrapper>
+        <Story />
+      </FormWrapper>
+    ),
+  ],
+} satisfies Meta<typeof PriorityDialog>;
+
+export default metaPriority;
+type PriorityStory = StoryObj<typeof metaPriority>;
+
+export const PriorityDialogDefault: PriorityStory = {
+  args: {
+    isOpenDialog: true,
+    option: mockOptions[0],
+    options: mockOptions,
+    onChange: (value) => console.log("Priority changed:", value),
+    setIsOpenDialog: () => {},
+  },
+};
+
+export const PriorityDialogHighPriority: PriorityStory = {
+  args: {
+    isOpenDialog: true,
+    option: {
+      ...mockOptions[1],
+      priority: 3,
+    },
+    options: mockOptions,
+    onChange: (value) => console.log("Priority changed:", value),
+    setIsOpenDialog: () => {},
+  },
+};
+
+export const PriorityDialogLowestPriority: PriorityStory = {
+  args: {
+    isOpenDialog: true,
+    option: {
+      ...mockOptions[2],
+      priority: 0,
+    },
+    options: mockOptions,
+    onChange: (value) => console.log("Priority changed:", value),
+    setIsOpenDialog: () => {},
+  },
+};
+
+export const PriorityDialogInteractive: PriorityStory = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const [selectedOptions, setSelectedOptions] = useState(mockOptions);
+
+    return (
+      <FormWrapper>
+        <div>
+          <button
+            onClick={() => setIsOpen(true)}
+            className="mb-4 rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+            Open Priority Dialog
+          </button>
+          <PriorityDialog
+            {...args}
+            isOpenDialog={isOpen}
+            setIsOpenDialog={setIsOpen}
+            option={mockOptions[0]}
+            options={selectedOptions}
+            onChange={(value) => {
+              console.log("Priority changed:", value);
+              setSelectedOptions(value as CheckedSelectOption[]);
+            }}
+          />
+        </div>
+      </FormWrapper>
+    );
+  },
+};
+
+// Weight Dialog Stories
+const metaWeight = {
+  component: WeightDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    isOpenDialog: {
+      description: "Controls whether the dialog is open",
+      control: "boolean",
+    },
+    option: {
+      description: "The selected host option to edit",
+      control: "object",
+    },
+    customClassNames: {
+      description: "Custom CSS class names for styling",
+      control: "object",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <FormWrapper>
+        <Story />
+      </FormWrapper>
+    ),
+  ],
+} satisfies Meta<typeof WeightDialog>;
+
+export { metaWeight as WeightDialogMeta };
+type WeightStory = StoryObj<typeof metaWeight>;
+
+export const WeightDialogDefault: WeightStory = {
+  args: {
+    isOpenDialog: true,
+    option: mockOptions[0],
+    options: mockOptions,
+    onChange: (value) => console.log("Weight changed:", value),
+    setIsOpenDialog: () => {},
+  },
+};
+
+export const WeightDialogHighWeight: WeightStory = {
+  args: {
+    isOpenDialog: true,
+    option: {
+      ...mockOptions[1],
+      weight: 150,
+    },
+    options: mockOptions,
+    onChange: (value) => console.log("Weight changed:", value),
+    setIsOpenDialog: () => {},
+  },
+};
+
+export const WeightDialogLowWeight: WeightStory = {
+  args: {
+    isOpenDialog: true,
+    option: {
+      ...mockOptions[2],
+      weight: 50,
+    },
+    options: mockOptions,
+    onChange: (value) => console.log("Weight changed:", value),
+    setIsOpenDialog: () => {},
+  },
+};
+
+export const WeightDialogInteractive: WeightStory = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(true);
+    const [selectedOptions, setSelectedOptions] = useState(mockOptions);
+
+    return (
+      <FormWrapper>
+        <div>
+          <button
+            onClick={() => setIsOpen(true)}
+            className="mb-4 rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+            Open Weight Dialog
+          </button>
+          <WeightDialog
+            {...args}
+            isOpenDialog={isOpen}
+            setIsOpenDialog={setIsOpen}
+            option={mockOptions[0]}
+            options={selectedOptions}
+            onChange={(value) => {
+              console.log("Weight changed:", value);
+              setSelectedOptions(value as CheckedSelectOption[]);
+            }}
+          />
+        </div>
+      </FormWrapper>
+    );
+  },
+};
+
+export const WeightDialogWithCustomClassNames: WeightStory = {
+  args: {
+    isOpenDialog: true,
+    option: mockOptions[0],
+    options: mockOptions,
+    onChange: (value) => console.log("Weight changed:", value),
+    setIsOpenDialog: () => {},
+    customClassNames: {
+      container: "bg-gray-50 p-4 rounded-lg",
+      label: "text-blue-600 font-bold",
+      confirmButton: "bg-green-600 hover:bg-green-700",
+    },
+  },
+};
+
+export const PriorityDialogWithCustomClassNames: PriorityStory = {
+  args: {
+    isOpenDialog: true,
+    option: mockOptions[0],
+    options: mockOptions,
+    onChange: (value) => console.log("Priority changed:", value),
+    setIsOpenDialog: () => {},
+    customClassNames: {
+      container: "bg-gray-50 p-4 rounded-lg",
+      label: "text-blue-600 font-bold",
+      confirmButton: "bg-green-600 hover:bg-green-700",
+    },
+  },
+};
+
+// Combined story showing both dialogs
+export const AllDialogs: PriorityStory = {
+  render: () => {
+    const [priorityOpen, setPriorityOpen] = useState(false);
+    const [weightOpen, setWeightOpen] = useState(false);
+    const [selectedOptions, setSelectedOptions] = useState(mockOptions);
+
+    return (
+      <FormWrapper>
+        <div className="space-y-4">
+          <h2 className="text-lg font-semibold">Host Edit Dialogs</h2>
+          <div className="space-x-4">
+            <button
+              onClick={() => setPriorityOpen(true)}
+              className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-700">
+              Edit Priority
+            </button>
+            <button
+              onClick={() => setWeightOpen(true)}
+              className="rounded-md bg-green-600 px-4 py-2 text-white hover:bg-green-700">
+              Edit Weight
+            </button>
+          </div>
+
+          <div className="mt-4">
+            <h3 className="mb-2 text-sm font-medium">Current Hosts:</h3>
+            <ul className="space-y-2">
+              {selectedOptions.map((opt) => (
+                <li key={opt.value} className="rounded-md border p-2 text-sm">
+                  <div className="font-medium">{opt.label}</div>
+                  <div className="text-gray-600">
+                    Priority: {opt.priority ?? 2} | Weight: {opt.weight ?? 100}%
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <PriorityDialog
+            isOpenDialog={priorityOpen}
+            setIsOpenDialog={setPriorityOpen}
+            option={mockOptions[0]}
+            options={selectedOptions}
+            onChange={(value) => setSelectedOptions(value as CheckedSelectOption[])}
+          />
+
+          <WeightDialog
+            isOpenDialog={weightOpen}
+            setIsOpenDialog={setWeightOpen}
+            option={mockOptions[0]}
+            options={selectedOptions}
+            onChange={(value) => setSelectedOptions(value as CheckedSelectOption[])}
+          />
+        </div>
+      </FormWrapper>
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/eventtypes/components/MultiplePrivateLinksController.stories.tsx b/packages/features/eventtypes/components/MultiplePrivateLinksController.stories.tsx
new file mode 100644
index 00000000000000..adfca20cc6d5b0
--- /dev/null
+++ b/packages/features/eventtypes/components/MultiplePrivateLinksController.stories.tsx
@@ -0,0 +1,316 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { FormProvider, useForm } from "react-hook-form";
+
+import type { FormValues } from "@calcom/features/eventtypes/lib/types";
+
+import { MultiplePrivateLinksController } from "./MultiplePrivateLinksController";
+
+// Mock wrapper component to provide form context
+const FormWrapper = ({
+  children,
+  defaultValues,
+}: {
+  children: React.ReactNode;
+  defaultValues?: Partial<FormValues>;
+}) => {
+  const methods = useForm<FormValues>({
+    defaultValues: {
+      slug: "30min",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [],
+      ...defaultValues,
+    } as FormValues,
+  });
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+const meta = {
+  component: MultiplePrivateLinksController,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    bookerUrl: {
+      description: "The base URL for booking links",
+      control: "text",
+    },
+    userTimeZone: {
+      description: "User's timezone for link expiration calculations",
+      control: "text",
+    },
+    team: {
+      description: "Team information if this is a team event type",
+      control: "object",
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <div className="w-[800px]">
+        <FormWrapper defaultValues={context.args.defaultValues}>
+          <Story />
+        </FormWrapper>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MultiplePrivateLinksController>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "America/New_York",
+    team: undefined,
+    defaultValues: {
+      slug: "30min",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [],
+    } as Partial<FormValues>,
+  },
+};
+
+export const WithExistingLinks: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "America/New_York",
+    team: undefined,
+    defaultValues: {
+      slug: "30min",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [
+        {
+          link: "abc123def456",
+          expiresAt: null,
+          maxUsageCount: 1,
+          usageCount: 0,
+        },
+        {
+          link: "xyz789uvw012",
+          expiresAt: null,
+          maxUsageCount: 5,
+          usageCount: 2,
+        },
+      ],
+    } as Partial<FormValues>,
+  },
+};
+
+export const WithTimeBasedExpiration: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "America/New_York",
+    team: undefined,
+    defaultValues: {
+      slug: "30min",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [
+        {
+          link: "time123exp456",
+          expiresAt: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days from now
+          maxUsageCount: null,
+          usageCount: 0,
+        },
+        {
+          link: "time789exp012",
+          expiresAt: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000), // 30 days from now
+          maxUsageCount: null,
+          usageCount: 0,
+        },
+      ],
+    } as Partial<FormValues>,
+  },
+};
+
+export const WithExpiredLinks: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "America/New_York",
+    team: undefined,
+    defaultValues: {
+      slug: "30min",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [
+        {
+          link: "expired123old456",
+          expiresAt: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000), // 7 days ago
+          maxUsageCount: null,
+          usageCount: 0,
+        },
+        {
+          link: "maxed789out012",
+          expiresAt: null,
+          maxUsageCount: 3,
+          usageCount: 3,
+        },
+      ],
+    } as Partial<FormValues>,
+  },
+};
+
+export const WithMixedLinks: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "America/New_York",
+    team: undefined,
+    defaultValues: {
+      slug: "30min",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [
+        {
+          link: "active123link456",
+          expiresAt: null,
+          maxUsageCount: 1,
+          usageCount: 0,
+        },
+        {
+          link: "time789based012",
+          expiresAt: new Date(Date.now() + 14 * 24 * 60 * 60 * 1000), // 14 days from now
+          maxUsageCount: null,
+          usageCount: 0,
+        },
+        {
+          link: "multiple345uses678",
+          expiresAt: null,
+          maxUsageCount: 10,
+          usageCount: 4,
+        },
+        {
+          link: "expired901link234",
+          expiresAt: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000), // 2 days ago
+          maxUsageCount: null,
+          usageCount: 0,
+        },
+      ],
+    } as Partial<FormValues>,
+  },
+};
+
+export const WithTeamEvent: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "Europe/London",
+    team: {
+      id: 100,
+      name: "Engineering Team",
+      slug: "engineering",
+    } as any,
+    defaultValues: {
+      slug: "team-meeting",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [
+        {
+          link: "team123link456",
+          expiresAt: null,
+          maxUsageCount: 5,
+          usageCount: 1,
+        },
+      ],
+    } as Partial<FormValues>,
+  },
+};
+
+export const WithMultipleUsageCounts: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "America/Los_Angeles",
+    team: undefined,
+    defaultValues: {
+      slug: "consultation",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [
+        {
+          link: "single123use456",
+          expiresAt: null,
+          maxUsageCount: 1,
+          usageCount: 0,
+        },
+        {
+          link: "five789uses012",
+          expiresAt: null,
+          maxUsageCount: 5,
+          usageCount: 0,
+        },
+        {
+          link: "ten345uses678",
+          expiresAt: null,
+          maxUsageCount: 10,
+          usageCount: 3,
+        },
+        {
+          link: "hundred901uses234",
+          expiresAt: null,
+          maxUsageCount: 100,
+          usageCount: 42,
+        },
+      ],
+    } as Partial<FormValues>,
+  },
+};
+
+export const WithPartiallyUsedLinks: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "Asia/Tokyo",
+    team: undefined,
+    defaultValues: {
+      slug: "webinar",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [
+        {
+          link: "almost123full456",
+          expiresAt: null,
+          maxUsageCount: 5,
+          usageCount: 4,
+        },
+        {
+          link: "half789used012",
+          expiresAt: null,
+          maxUsageCount: 10,
+          usageCount: 5,
+        },
+        {
+          link: "barely345used678",
+          expiresAt: null,
+          maxUsageCount: 20,
+          usageCount: 2,
+        },
+      ],
+    } as Partial<FormValues>,
+  },
+};
+
+export const WithCustomBookerUrl: Story = {
+  args: {
+    bookerUrl: "https://custom-domain.example.com",
+    userTimeZone: "America/New_York",
+    team: undefined,
+    defaultValues: {
+      slug: "meeting",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [
+        {
+          link: "custom123domain456",
+          expiresAt: null,
+          maxUsageCount: 3,
+          usageCount: 0,
+        },
+      ],
+    } as Partial<FormValues>,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    bookerUrl: "https://cal.com",
+    userTimeZone: "America/New_York",
+    team: undefined,
+    defaultValues: {
+      slug: "30min",
+      users: [{ id: 1 }],
+      multiplePrivateLinks: [],
+    } as Partial<FormValues>,
+  },
+};
diff --git a/packages/features/filters/components/TeamsFilter.stories.tsx b/packages/features/filters/components/TeamsFilter.stories.tsx
new file mode 100644
index 00000000000000..9cdd2837f298d2
--- /dev/null
+++ b/packages/features/filters/components/TeamsFilter.stories.tsx
@@ -0,0 +1,421 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCReact } from "@trpc/react-query";
+import { SessionProvider } from "next-auth/react";
+import { fn } from "storybook/test";
+
+import { TeamsFilter } from "./TeamsFilter";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+// Mock teams data
+const mockTeams = [
+  {
+    id: 1,
+    name: "Engineering Team",
+    slug: "engineering",
+    logoUrl: null,
+    isOrganization: false,
+  },
+  {
+    id: 2,
+    name: "Design Team",
+    slug: "design",
+    logoUrl: null,
+    isOrganization: false,
+  },
+  {
+    id: 3,
+    name: "Marketing Team",
+    slug: "marketing",
+    logoUrl: null,
+    isOrganization: false,
+  },
+  {
+    id: 4,
+    name: "Sales Team",
+    slug: "sales",
+    logoUrl: null,
+    isOrganization: false,
+  },
+  {
+    id: 5,
+    name: "Product Team",
+    slug: "product",
+    logoUrl: null,
+    isOrganization: false,
+  },
+];
+
+// Mock session data
+const mockSession = {
+  expires: new Date(Date.now() + 2 * 86400).toISOString(),
+  user: {
+    id: 1,
+    name: "John Doe",
+    email: "john@example.com",
+    username: "johndoe",
+  },
+  upId: "user-profile-1",
+};
+
+// Mock tRPC client
+const mockTrpc = createTRPCReact<any>();
+
+const createMockTrpcClient = (teams = mockTeams) =>
+  mockTrpc.createClient({
+    links: [
+      () =>
+        ({ op }) => {
+          return {
+            subscribe: (observer: any) => {
+              // Mock the teams.list query
+              if (op.path === "viewer.teams.list") {
+                observer.next({
+                  result: {
+                    data: teams,
+                  },
+                });
+              } else {
+                observer.next({
+                  result: {
+                    data: {},
+                  },
+                });
+              }
+              observer.complete();
+              return {
+                unsubscribe: () => {},
+              };
+            },
+          } as any;
+        },
+    ],
+  });
+
+const meta = {
+  component: TeamsFilter,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story, context) => {
+      const mockTrpcClient = createMockTrpcClient(context.args.mockTeams || mockTeams);
+      return (
+        <SessionProvider session={context.args.mockSession || mockSession}>
+          <mockTrpc.Provider client={mockTrpcClient} queryClient={queryClient}>
+            <QueryClientProvider client={queryClient}>
+              <div style={{ padding: "50px", minWidth: "300px" }}>
+                <Story />
+              </div>
+            </QueryClientProvider>
+          </mockTrpc.Provider>
+        </SessionProvider>
+      );
+    },
+  ],
+  argTypes: {
+    popoverTriggerClassNames: {
+      description: "Custom CSS classes for the popover trigger button",
+      control: "text",
+    },
+    useProfileFilter: {
+      description: "Whether to use profile filter (upIds) instead of user filter (userIds)",
+      control: "boolean",
+    },
+    showVerticalDivider: {
+      description: "Whether to show a vertical divider after the filter",
+      control: "boolean",
+    },
+    mockTeams: {
+      description: "Mock teams data for Storybook",
+      control: "object",
+      table: {
+        disable: true,
+      },
+    },
+    mockSession: {
+      description: "Mock session data for Storybook",
+      control: "object",
+      table: {
+        disable: true,
+      },
+    },
+  },
+} satisfies Meta<typeof TeamsFilter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: false,
+    showVerticalDivider: false,
+    mockTeams,
+    mockSession,
+  },
+};
+
+export const WithVerticalDivider: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: false,
+    showVerticalDivider: true,
+    mockTeams,
+    mockSession,
+  },
+};
+
+export const WithProfileFilter: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: true,
+    showVerticalDivider: false,
+    mockTeams,
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Uses profile filter (upIds) instead of user filter (userIds) for filtering.",
+      },
+    },
+  },
+};
+
+export const CustomTriggerClassNames: Story = {
+  args: {
+    popoverTriggerClassNames: "bg-blue-500 text-white hover:bg-blue-600",
+    useProfileFilter: false,
+    showVerticalDivider: false,
+    mockTeams,
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Custom styling applied to the popover trigger button.",
+      },
+    },
+  },
+};
+
+export const FewTeams: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: false,
+    showVerticalDivider: false,
+    mockTeams: [
+      {
+        id: 1,
+        name: "Engineering Team",
+        slug: "engineering",
+        logoUrl: null,
+        isOrganization: false,
+      },
+      {
+        id: 2,
+        name: "Design Team",
+        slug: "design",
+        logoUrl: null,
+        isOrganization: false,
+      },
+    ],
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Filter with only a few teams available.",
+      },
+    },
+  },
+};
+
+export const ManyTeams: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: false,
+    showVerticalDivider: false,
+    mockTeams: [
+      { id: 1, name: "Engineering Team", slug: "engineering", logoUrl: null, isOrganization: false },
+      { id: 2, name: "Design Team", slug: "design", logoUrl: null, isOrganization: false },
+      { id: 3, name: "Marketing Team", slug: "marketing", logoUrl: null, isOrganization: false },
+      { id: 4, name: "Sales Team", slug: "sales", logoUrl: null, isOrganization: false },
+      { id: 5, name: "Product Team", slug: "product", logoUrl: null, isOrganization: false },
+      { id: 6, name: "Customer Success Team", slug: "customer-success", logoUrl: null, isOrganization: false },
+      { id: 7, name: "Operations Team", slug: "operations", logoUrl: null, isOrganization: false },
+      { id: 8, name: "Finance Team", slug: "finance", logoUrl: null, isOrganization: false },
+      { id: 9, name: "HR Team", slug: "hr", logoUrl: null, isOrganization: false },
+      { id: 10, name: "Legal Team", slug: "legal", logoUrl: null, isOrganization: false },
+    ],
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Filter with many teams showing scrollable list and search functionality.",
+      },
+    },
+  },
+};
+
+export const TeamsWithLogos: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: false,
+    showVerticalDivider: false,
+    mockTeams: [
+      {
+        id: 1,
+        name: "Engineering Team",
+        slug: "engineering",
+        logoUrl: "https://avatars.githubusercontent.com/u/1?v=4",
+        isOrganization: false,
+      },
+      {
+        id: 2,
+        name: "Design Team",
+        slug: "design",
+        logoUrl: "https://avatars.githubusercontent.com/u/2?v=4",
+        isOrganization: false,
+      },
+      {
+        id: 3,
+        name: "Marketing Team",
+        slug: "marketing",
+        logoUrl: "https://avatars.githubusercontent.com/u/3?v=4",
+        isOrganization: false,
+      },
+    ],
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Teams with custom avatar logos displayed in the filter.",
+      },
+    },
+  },
+};
+
+export const NoTeams: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: false,
+    showVerticalDivider: false,
+    mockTeams: [],
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "When no teams are available, the component returns null and renders nothing.",
+      },
+    },
+  },
+};
+
+export const WithOrganizationFiltered: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: false,
+    showVerticalDivider: false,
+    mockTeams: [
+      {
+        id: 1,
+        name: "Acme Organization",
+        slug: "acme",
+        logoUrl: null,
+        isOrganization: true,
+      },
+      {
+        id: 2,
+        name: "Engineering Team",
+        slug: "engineering",
+        logoUrl: null,
+        isOrganization: false,
+      },
+      {
+        id: 3,
+        name: "Design Team",
+        slug: "design",
+        logoUrl: null,
+        isOrganization: false,
+      },
+    ],
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Organizations are automatically filtered out from the teams list, only showing actual teams.",
+      },
+    },
+  },
+};
+
+export const LongTeamNames: Story = {
+  args: {
+    popoverTriggerClassNames: undefined,
+    useProfileFilter: false,
+    showVerticalDivider: false,
+    mockTeams: [
+      {
+        id: 1,
+        name: "Engineering and Development Team for Product Infrastructure",
+        slug: "engineering-long",
+        logoUrl: null,
+        isOrganization: false,
+      },
+      {
+        id: 2,
+        name: "User Experience and Interface Design Department",
+        slug: "design-long",
+        logoUrl: null,
+        isOrganization: false,
+      },
+      {
+        id: 3,
+        name: "Marketing and Brand Communications Division",
+        slug: "marketing-long",
+        logoUrl: null,
+        isOrganization: false,
+      },
+    ],
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Teams with long names demonstrating text truncation and tooltip functionality.",
+      },
+    },
+  },
+};
+
+export const CompleteConfiguration: Story = {
+  args: {
+    popoverTriggerClassNames: "border-2 border-blue-300",
+    useProfileFilter: true,
+    showVerticalDivider: true,
+    mockTeams,
+    mockSession,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "All options enabled: custom classes, profile filter, and vertical divider.",
+      },
+    },
+  },
+};
diff --git a/packages/features/flags/components/AssignFeatureSheet.stories.tsx b/packages/features/flags/components/AssignFeatureSheet.stories.tsx
new file mode 100644
index 00000000000000..c22c278d9f9a6d
--- /dev/null
+++ b/packages/features/flags/components/AssignFeatureSheet.stories.tsx
@@ -0,0 +1,482 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { Button } from "@calcom/ui/components/button";
+
+import { AssignFeatureSheet } from "./AssignFeatureSheet";
+
+// Mock flag type
+type Flag = RouterOutputs["viewer"]["features"]["list"][number];
+
+// Mock team type
+type Team = {
+  id: number;
+  name: string | null;
+  slug: string | null;
+  logoUrl: string | null;
+  hasFeature: boolean;
+  isOrganization: boolean;
+  parent: {
+    name: string | null;
+    logoUrl: string | null;
+  } | null;
+  parentId: number | null;
+};
+
+// Mock TRPC module
+jest.mock("@calcom/trpc/react", () => ({
+  trpc: {
+    useUtils: jest.fn(),
+    viewer: {
+      admin: {
+        getTeamsForFeature: {
+          useInfiniteQuery: jest.fn(),
+        },
+        assignFeatureToTeam: {
+          useMutation: jest.fn(),
+        },
+        unassignFeatureFromTeam: {
+          useMutation: jest.fn(),
+        },
+      },
+    },
+  },
+}));
+
+const { trpc } = require("@calcom/trpc/react");
+
+// Mock utils
+const mockUtils = {
+  viewer: {
+    admin: {
+      getTeamsForFeature: {
+        invalidate: jest.fn(),
+      },
+    },
+  },
+};
+
+// Mock flag data helper
+const createMockFlag = (overrides?: Partial<Flag>): Flag => ({
+  slug: "example-feature",
+  description: "An example feature flag for testing",
+  enabled: true,
+  type: "EXPERIMENT",
+  lastUpdated: new Date().toISOString(),
+  ...overrides,
+});
+
+// Mock team data helper
+const createMockTeam = (overrides?: Partial<Team>): Team => ({
+  id: 1,
+  name: "Engineering",
+  slug: "engineering",
+  logoUrl: "https://cal.com/api/avatar/team-1.png",
+  hasFeature: false,
+  isOrganization: false,
+  parent: null,
+  parentId: null,
+  ...overrides,
+});
+
+// Wrapper component for interactive stories
+function AssignFeatureSheetWrapper({
+  flag,
+  teams,
+  hasNextPage = false,
+  isPending = false,
+}: {
+  flag: Flag;
+  teams: Team[];
+  hasNextPage?: boolean;
+  isPending?: boolean;
+}) {
+  const [open, setOpen] = useState(true);
+  const [teamStates, setTeamStates] = useState<Record<number, boolean>>(
+    teams.reduce((acc, team) => ({ ...acc, [team.id]: team.hasFeature }), {})
+  );
+
+  // Mock useUtils
+  trpc.useUtils.mockReturnValue(mockUtils);
+
+  // Mock useInfiniteQuery
+  trpc.viewer.admin.getTeamsForFeature.useInfiniteQuery.mockReturnValue({
+    data: {
+      pages: [
+        {
+          teams: teams.map((team) => ({
+            ...team,
+            hasFeature: teamStates[team.id] ?? team.hasFeature,
+          })),
+          nextCursor: hasNextPage ? "next-cursor" : undefined,
+        },
+      ],
+    },
+    fetchNextPage: jest.fn(),
+    hasNextPage,
+    isFetchingNextPage: false,
+    isPending,
+  });
+
+  // Mock assignFeatureToTeam mutation
+  trpc.viewer.admin.assignFeatureToTeam.useMutation.mockReturnValue({
+    mutate: jest.fn(({ teamId }) => {
+      console.log("Assigning feature to team:", teamId);
+      setTeamStates((prev) => ({ ...prev, [teamId]: true }));
+    }),
+    isPending: false,
+  });
+
+  // Mock unassignFeatureFromTeam mutation
+  trpc.viewer.admin.unassignFeatureFromTeam.useMutation.mockReturnValue({
+    mutate: jest.fn(({ teamId }) => {
+      console.log("Unassigning feature from team:", teamId);
+      setTeamStates((prev) => ({ ...prev, [teamId]: false }));
+    }),
+    isPending: false,
+  });
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open Assign Feature Sheet</Button>
+      <AssignFeatureSheet flag={flag} open={open} onOpenChange={setOpen} />
+    </>
+  );
+}
+
+const meta = {
+  component: AssignFeatureSheet,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AssignFeatureSheet>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "new-dashboard",
+        description: "New dashboard layout with improved analytics",
+      })}
+      teams={[
+        createMockTeam({
+          id: 1,
+          name: "Engineering",
+          slug: "engineering",
+          hasFeature: false,
+        }),
+        createMockTeam({
+          id: 2,
+          name: "Marketing",
+          slug: "marketing",
+          hasFeature: true,
+        }),
+        createMockTeam({
+          id: 3,
+          name: "Sales",
+          slug: "sales",
+          hasFeature: false,
+        }),
+      ]}
+    />
+  ),
+};
+
+export const WithOrganizations: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "advanced-analytics",
+        description: "Advanced analytics and reporting features",
+      })}
+      teams={[
+        createMockTeam({
+          id: 1,
+          name: "Acme Corp",
+          slug: "acme-corp",
+          logoUrl: "https://cal.com/api/avatar/org.png",
+          hasFeature: true,
+          isOrganization: true,
+        }),
+        createMockTeam({
+          id: 2,
+          name: "Engineering",
+          slug: "engineering",
+          hasFeature: false,
+          isOrganization: false,
+          parent: {
+            name: "Acme Corp",
+            logoUrl: "https://cal.com/api/avatar/org.png",
+          },
+          parentId: 1,
+        }),
+        createMockTeam({
+          id: 3,
+          name: "Marketing",
+          slug: "marketing",
+          hasFeature: true,
+          isOrganization: false,
+          parent: {
+            name: "Acme Corp",
+            logoUrl: "https://cal.com/api/avatar/org.png",
+          },
+          parentId: 1,
+        }),
+      ]}
+    />
+  ),
+};
+
+export const WithoutAvatars: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "team-collaboration",
+        description: "Enhanced team collaboration tools",
+      })}
+      teams={[
+        createMockTeam({
+          id: 1,
+          name: "Engineering",
+          slug: "engineering",
+          logoUrl: null,
+          hasFeature: false,
+        }),
+        createMockTeam({
+          id: 2,
+          name: "Marketing",
+          slug: "marketing",
+          logoUrl: null,
+          hasFeature: true,
+        }),
+        createMockTeam({
+          id: 3,
+          name: "Design",
+          slug: "design",
+          logoUrl: null,
+          hasFeature: false,
+        }),
+      ]}
+    />
+  ),
+};
+
+export const AllTeamsAssigned: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "premium-features",
+        description: "Premium features for all teams",
+      })}
+      teams={[
+        createMockTeam({
+          id: 1,
+          name: "Engineering",
+          slug: "engineering",
+          hasFeature: true,
+        }),
+        createMockTeam({
+          id: 2,
+          name: "Marketing",
+          slug: "marketing",
+          hasFeature: true,
+        }),
+        createMockTeam({
+          id: 3,
+          name: "Sales",
+          slug: "sales",
+          hasFeature: true,
+        }),
+      ]}
+    />
+  ),
+};
+
+export const NoTeamsAssigned: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "experimental-feature",
+        description: "New experimental feature in testing",
+      })}
+      teams={[
+        createMockTeam({
+          id: 1,
+          name: "Engineering",
+          slug: "engineering",
+          hasFeature: false,
+        }),
+        createMockTeam({
+          id: 2,
+          name: "Marketing",
+          slug: "marketing",
+          hasFeature: false,
+        }),
+        createMockTeam({
+          id: 3,
+          name: "Sales",
+          slug: "sales",
+          hasFeature: false,
+        }),
+      ]}
+    />
+  ),
+};
+
+export const ManyTeams: Story = {
+  render: () => {
+    const teams = Array.from({ length: 20 }, (_, i) => {
+      const isOrg = i === 0;
+      return createMockTeam({
+        id: i + 1,
+        name: isOrg ? "Acme Corporation" : `Team ${i}`,
+        slug: isOrg ? "acme-corp" : `team-${i}`,
+        logoUrl: i % 3 === 0 ? null : `https://cal.com/api/avatar/team-${i}.png`,
+        hasFeature: i % 4 === 0,
+        isOrganization: isOrg,
+        parent: !isOrg && i <= 10 ? { name: "Acme Corporation", logoUrl: null } : null,
+        parentId: !isOrg && i <= 10 ? 1 : null,
+      });
+    });
+
+    return (
+      <AssignFeatureSheetWrapper
+        flag={createMockFlag({
+          slug: "scalable-feature",
+          description: "Feature with many team assignments",
+        })}
+        teams={teams}
+        hasNextPage={true}
+      />
+    );
+  },
+};
+
+export const LongTeamNames: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "ui-improvements",
+        description: "User interface improvements and refinements",
+      })}
+      teams={[
+        createMockTeam({
+          id: 1,
+          name: "Engineering and Product Development Team",
+          slug: "engineering-product-dev",
+          hasFeature: false,
+        }),
+        createMockTeam({
+          id: 2,
+          name: "Marketing, Communications, and Brand Strategy Division",
+          slug: "marketing-comms-brand",
+          hasFeature: true,
+        }),
+        createMockTeam({
+          id: 3,
+          name: "Sales and Customer Success Operations",
+          slug: "sales-customer-success",
+          hasFeature: false,
+        }),
+      ]}
+    />
+  ),
+};
+
+export const EmptyState: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "new-feature",
+        description: "A brand new feature with no teams yet",
+      })}
+      teams={[]}
+    />
+  ),
+};
+
+export const LoadingState: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "loading-feature",
+        description: "Loading teams for this feature",
+      })}
+      teams={[]}
+      isPending={true}
+    />
+  ),
+};
+
+export const MixedOrganizationStructure: Story = {
+  render: () => (
+    <AssignFeatureSheetWrapper
+      flag={createMockFlag({
+        slug: "org-structure-feature",
+        description: "Feature with complex organizational structure",
+      })}
+      teams={[
+        createMockTeam({
+          id: 1,
+          name: "Global Corporation",
+          slug: "global-corp",
+          logoUrl: "https://cal.com/api/avatar/org-1.png",
+          hasFeature: true,
+          isOrganization: true,
+        }),
+        createMockTeam({
+          id: 2,
+          name: "North America Division",
+          slug: "north-america",
+          logoUrl: "https://cal.com/api/avatar/org-2.png",
+          hasFeature: false,
+          isOrganization: true,
+        }),
+        createMockTeam({
+          id: 3,
+          name: "Engineering - NA",
+          slug: "engineering-na",
+          logoUrl: null,
+          hasFeature: true,
+          isOrganization: false,
+          parent: {
+            name: "North America Division",
+            logoUrl: "https://cal.com/api/avatar/org-2.png",
+          },
+          parentId: 2,
+        }),
+        createMockTeam({
+          id: 4,
+          name: "Sales - NA",
+          slug: "sales-na",
+          hasFeature: false,
+          isOrganization: false,
+          parent: {
+            name: "North America Division",
+            logoUrl: "https://cal.com/api/avatar/org-2.png",
+          },
+          parentId: 2,
+        }),
+        createMockTeam({
+          id: 5,
+          name: "Independent Team",
+          slug: "independent",
+          hasFeature: true,
+          isOrganization: false,
+        }),
+      ]}
+    />
+  ),
+};
diff --git a/packages/features/flags/components/FlagAdminList.stories.tsx b/packages/features/flags/components/FlagAdminList.stories.tsx
new file mode 100644
index 00000000000000..d8b7c1018a3c1b
--- /dev/null
+++ b/packages/features/flags/components/FlagAdminList.stories.tsx
@@ -0,0 +1,393 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import type { RouterOutputs } from "@calcom/trpc/react";
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { PanelCard } from "@calcom/ui/components/card";
+import { Switch } from "@calcom/ui/components/form";
+import { ListItem, ListItemText, ListItemTitle } from "@calcom/ui/components/list";
+import { List } from "@calcom/ui/components/list";
+
+import { AssignFeatureSheet } from "./AssignFeatureSheet";
+
+// Mock flag type
+type Flag = RouterOutputs["viewer"]["features"]["list"][number];
+
+// Mock FlagAdminList component without TRPC dependencies
+const FlagAdminListStory = ({ flags }: { flags: Flag[] }) => {
+  const [selectedFlag, setSelectedFlag] = useState<Flag | null>(null);
+  const [sheetOpen, setSheetOpen] = useState(false);
+  const [flagStates, setFlagStates] = useState<Record<string, boolean>>(
+    flags.reduce((acc, flag) => ({ ...acc, [flag.slug]: flag.enabled }), {})
+  );
+
+  const groupedFlags = flags.reduce((acc, flag) => {
+    const type = flag.type || "OTHER";
+    if (!acc[type]) {
+      acc[type] = [];
+    }
+    acc[type].push(flag);
+    return acc;
+  }, {} as Record<string, typeof flags>);
+
+  const sortedTypes = Object.keys(groupedFlags).sort();
+
+  const handleAssignClick = (flag: Flag) => {
+    setSelectedFlag(flag);
+    setSheetOpen(true);
+  };
+
+  const handleToggle = (slug: string, checked: boolean) => {
+    setFlagStates((prev) => ({ ...prev, [slug]: checked }));
+  };
+
+  return (
+    <>
+      <div className="stack-y-4">
+        {sortedTypes.map((type) => (
+          <PanelCard key={type} title={type.replace(/_/g, " ")} collapsible defaultCollapsed={false}>
+            <List roundContainer noBorderTreatment>
+              {groupedFlags[type].map((flag: Flag, index: number) => (
+                <ListItem key={flag.slug} rounded={index === 0 || index === groupedFlags[type].length - 1}>
+                  <div className="flex flex-1 flex-col">
+                    <ListItemTitle component="h3">{flag.slug}</ListItemTitle>
+                    <ListItemText component="p">{flag.description}</ListItemText>
+                  </div>
+                  <div className="flex items-center gap-2 py-2">
+                    <Switch
+                      defaultChecked={flagStates[flag.slug]}
+                      onCheckedChange={(checked) => handleToggle(flag.slug, checked)}
+                    />
+                    <Button
+                      color="secondary"
+                      size="sm"
+                      variant="icon"
+                      onClick={() => handleAssignClick(flag)}
+                      StartIcon="users"></Button>
+                  </div>
+                </ListItem>
+              ))}
+            </List>
+          </PanelCard>
+        ))}
+      </div>
+      {selectedFlag && (
+        <AssignFeatureSheet flag={selectedFlag} open={sheetOpen} onOpenChange={setSheetOpen} />
+      )}
+    </>
+  );
+};
+
+const meta = {
+  component: FlagAdminListStory,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof FlagAdminListStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Mock flag data helper
+const createMockFlag = (overrides?: Partial<Flag>): Flag => ({
+  slug: "example-flag",
+  description: "An example feature flag",
+  enabled: false,
+  type: "EXPERIMENT",
+  lastUpdated: new Date().toISOString(),
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    flags: [
+      createMockFlag({
+        slug: "new-booking-flow",
+        description: "Enable the new streamlined booking flow with improved UX",
+        enabled: true,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "advanced-analytics",
+        description: "Advanced analytics dashboard with detailed insights",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "team-collaboration",
+        description: "Enhanced team collaboration features",
+        enabled: true,
+        type: "FEATURE",
+      }),
+    ],
+  },
+};
+
+export const SingleType: Story = {
+  args: {
+    flags: [
+      createMockFlag({
+        slug: "experiment-a",
+        description: "First experimental feature for testing",
+        enabled: true,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "experiment-b",
+        description: "Second experimental feature for testing",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "experiment-c",
+        description: "Third experimental feature for testing",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+    ],
+  },
+};
+
+export const MultipleTypes: Story = {
+  args: {
+    flags: [
+      createMockFlag({
+        slug: "ai-scheduling",
+        description: "AI-powered scheduling suggestions",
+        enabled: true,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "smart-routing",
+        description: "Smart meeting routing based on availability",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "calendar-sync",
+        description: "Enhanced calendar synchronization",
+        enabled: true,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "video-integration",
+        description: "Native video conferencing integration",
+        enabled: true,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "payment-processing",
+        description: "Integrated payment processing",
+        enabled: false,
+        type: "INTEGRATION",
+      }),
+      createMockFlag({
+        slug: "crm-sync",
+        description: "CRM synchronization and data export",
+        enabled: false,
+        type: "INTEGRATION",
+      }),
+    ],
+  },
+};
+
+export const AllEnabled: Story = {
+  args: {
+    flags: [
+      createMockFlag({
+        slug: "feature-one",
+        description: "First enabled feature",
+        enabled: true,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "feature-two",
+        description: "Second enabled feature",
+        enabled: true,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "feature-three",
+        description: "Third enabled feature",
+        enabled: true,
+        type: "FEATURE",
+      }),
+    ],
+  },
+};
+
+export const AllDisabled: Story = {
+  args: {
+    flags: [
+      createMockFlag({
+        slug: "disabled-feature-one",
+        description: "First disabled feature",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "disabled-feature-two",
+        description: "Second disabled feature",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "disabled-feature-three",
+        description: "Third disabled feature",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+    ],
+  },
+};
+
+export const LongDescriptions: Story = {
+  args: {
+    flags: [
+      createMockFlag({
+        slug: "comprehensive-analytics",
+        description:
+          "A comprehensive analytics suite that provides deep insights into booking patterns, user behavior, conversion rates, and team performance metrics. Includes customizable dashboards, exportable reports, and real-time data visualization.",
+        enabled: true,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "enterprise-sso",
+        description:
+          "Enterprise-grade Single Sign-On (SSO) integration with support for SAML 2.0, OAuth 2.0, and OpenID Connect. Enables seamless authentication across your organization's identity provider with advanced security features and audit logging.",
+        enabled: false,
+        type: "FEATURE",
+      }),
+    ],
+  },
+};
+
+export const ManyFlags: Story = {
+  args: {
+    flags: [
+      createMockFlag({
+        slug: "experiment-alpha",
+        description: "Alpha experiment for new UI patterns",
+        enabled: true,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "experiment-beta",
+        description: "Beta experiment for performance optimization",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "experiment-gamma",
+        description: "Gamma experiment for user onboarding",
+        enabled: true,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "feature-notifications",
+        description: "Enhanced notification system",
+        enabled: true,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "feature-mobile-app",
+        description: "Native mobile application support",
+        enabled: false,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "feature-webhooks",
+        description: "Advanced webhook configuration",
+        enabled: true,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "integration-slack",
+        description: "Slack workspace integration",
+        enabled: true,
+        type: "INTEGRATION",
+      }),
+      createMockFlag({
+        slug: "integration-teams",
+        description: "Microsoft Teams integration",
+        enabled: false,
+        type: "INTEGRATION",
+      }),
+      createMockFlag({
+        slug: "integration-salesforce",
+        description: "Salesforce CRM integration",
+        enabled: false,
+        type: "INTEGRATION",
+      }),
+      createMockFlag({
+        slug: "beta-ai-assistant",
+        description: "AI-powered scheduling assistant",
+        enabled: true,
+        type: "BETA",
+      }),
+      createMockFlag({
+        slug: "beta-voice-booking",
+        description: "Voice-activated booking",
+        enabled: false,
+        type: "BETA",
+      }),
+    ],
+  },
+};
+
+export const EmptyState: Story = {
+  args: {
+    flags: [],
+  },
+  render: () => (
+    <div className="text-subtle p-8 text-center">
+      <p>No feature flags configured</p>
+    </div>
+  ),
+};
+
+export const MixedStates: Story = {
+  args: {
+    flags: [
+      createMockFlag({
+        slug: "booking-buffer-time",
+        description: "Add buffer time between bookings",
+        enabled: true,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "custom-branding",
+        description: "Custom branding and white-labeling options",
+        enabled: false,
+        type: "FEATURE",
+      }),
+      createMockFlag({
+        slug: "round-robin-v2",
+        description: "Improved round-robin scheduling algorithm",
+        enabled: true,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "advanced-routing",
+        description: "Advanced meeting routing rules",
+        enabled: false,
+        type: "EXPERIMENT",
+      }),
+      createMockFlag({
+        slug: "zapier-integration",
+        description: "Zapier automation integration",
+        enabled: true,
+        type: "INTEGRATION",
+      }),
+    ],
+  },
+};
diff --git a/packages/features/flags/pages/flag-listing-view.stories.tsx b/packages/features/flags/pages/flag-listing-view.stories.tsx
new file mode 100644
index 00000000000000..26f04e3bceca02
--- /dev/null
+++ b/packages/features/flags/pages/flag-listing-view.stories.tsx
@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { Suspense } from "react";
+
+import NoSSR from "@calcom/lib/components/NoSSR";
+import { SkeletonText, SkeletonContainer } from "@calcom/ui/components/skeleton";
+
+const SkeletonLoader = () => {
+  return (
+    <SkeletonContainer>
+      <div className="divide-subtle mb-8 mt-6 stack-y-6">
+        <SkeletonText className="h-8 w-full" />
+        <SkeletonText className="h-8 w-full" />
+      </div>
+    </SkeletonContainer>
+  );
+};
+
+// Story component that mimics FlagListingView structure
+const FlagListingViewStory = ({ showLoading = false }: { showLoading?: boolean }) => {
+  return (
+    <NoSSR>
+      <Suspense fallback={<SkeletonLoader />}>
+        {showLoading ? (
+          <SkeletonLoader />
+        ) : (
+          <div className="text-default p-4">
+            <p>Flag listing content would be rendered here.</p>
+            <p className="text-subtle mt-2 text-sm">
+              This story demonstrates the FlagListingView wrapper component with NoSSR and Suspense.
+            </p>
+          </div>
+        )}
+      </Suspense>
+    </NoSSR>
+  );
+};
+
+const meta = {
+  title: "Features/Flags/FlagListingView",
+  component: FlagListingViewStory,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof FlagListingViewStory>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    showLoading: false,
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    showLoading: true,
+  },
+};
+
+export const WithSkeleton: Story = {
+  render: () => (
+    <div className="w-[800px]">
+      <SkeletonLoader />
+    </div>
+  ),
+};
diff --git a/packages/features/form-builder/Components.stories.tsx b/packages/features/form-builder/Components.stories.tsx
new file mode 100644
index 00000000000000..14bfe657f61be0
--- /dev/null
+++ b/packages/features/form-builder/Components.stories.tsx
@@ -0,0 +1,630 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { ComponentForField } from "./FormBuilderField";
+
+const meta = {
+  component: ComponentForField,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ width: "400px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ComponentForField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Text Component
+export const TextComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "text",
+          name: "fullName",
+          label: "Full Name",
+          placeholder: "Enter your full name",
+          required: true,
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Textarea Component
+export const TextareaComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "textarea",
+          name: "description",
+          label: "Description",
+          placeholder: "Enter a description...",
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Number Component
+export const NumberComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "number",
+          name: "age",
+          label: "Age",
+          placeholder: "Enter your age",
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Name Component - Full Name Variant
+export const NameComponentFullName: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "name",
+          name: "name",
+          label: "Name",
+          variant: "fullName",
+          variantsConfig: {
+            variants: {
+              fullName: {
+                fields: [
+                  {
+                    name: "name",
+                    label: "Full Name",
+                    placeholder: "John Doe",
+                    required: true,
+                  },
+                ],
+              },
+            },
+          },
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Name Component - First and Last Name Variant
+export const NameComponentFirstAndLastName: Story = {
+  render: () => {
+    const [value, setValue] = useState<Record<string, string>>({});
+    return (
+      <ComponentForField
+        field={{
+          type: "name",
+          name: "name",
+          label: "Name",
+          variant: "firstAndLastName",
+          variantsConfig: {
+            variants: {
+              firstAndLastName: {
+                fields: [
+                  {
+                    name: "firstName",
+                    label: "First Name",
+                    placeholder: "John",
+                    required: true,
+                  },
+                  {
+                    name: "lastName",
+                    label: "Last Name",
+                    placeholder: "Doe",
+                    required: true,
+                  },
+                ],
+              },
+            },
+          },
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Email Component
+export const EmailComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "email",
+          name: "email",
+          label: "Email Address",
+          placeholder: "you@example.com",
+          required: true,
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Phone Component
+export const PhoneComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "phone",
+          name: "phone",
+          label: "Phone Number",
+          placeholder: "+1 (555) 000-0000",
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Address Component
+export const AddressComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "address",
+          name: "address",
+          label: "Address",
+          placeholder: "Enter your address",
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Multi-Email Component
+export const MultiEmailComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([""]);
+    return (
+      <ComponentForField
+        field={{
+          type: "multiemail",
+          name: "guests",
+          label: "Add Guests",
+          placeholder: "guest@example.com",
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Select Component
+export const SelectComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "select",
+          name: "country",
+          label: "Country",
+          placeholder: "Select a country",
+          options: [
+            { label: "United States", value: "us" },
+            { label: "Canada", value: "ca" },
+            { label: "United Kingdom", value: "uk" },
+            { label: "Australia", value: "au" },
+          ],
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Multiselect Component
+export const MultiselectComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <ComponentForField
+        field={{
+          type: "multiselect",
+          name: "interests",
+          label: "Interests",
+          placeholder: "Select your interests",
+          options: [
+            { label: "Technology", value: "tech" },
+            { label: "Sports", value: "sports" },
+            { label: "Music", value: "music" },
+            { label: "Art", value: "art" },
+            { label: "Travel", value: "travel" },
+          ],
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Checkbox Component
+export const CheckboxComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>([]);
+    return (
+      <ComponentForField
+        field={{
+          type: "checkbox",
+          name: "preferences",
+          label: "Preferences",
+          options: [
+            { label: "Email notifications", value: "email" },
+            { label: "SMS notifications", value: "sms" },
+            { label: "Push notifications", value: "push" },
+          ],
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Radio Component
+export const RadioComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "radio",
+          name: "gender",
+          label: "Gender",
+          options: [
+            { label: "Male", value: "male" },
+            { label: "Female", value: "female" },
+            { label: "Other", value: "other" },
+            { label: "Prefer not to say", value: "not_say" },
+          ],
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// RadioInput Component
+export const RadioInputComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState<{ value: string; optionValue: string }>({
+      value: "phone",
+      optionValue: "",
+    });
+    return (
+      <ComponentForField
+        field={{
+          type: "radioInput",
+          name: "location",
+          label: "Where would you like to meet?",
+          options: [
+            { label: "Phone Call", value: "phone" },
+            { label: "Video Meeting", value: "video" },
+            { label: "In Person", value: "inPerson" },
+          ],
+          optionsInputs: {
+            phone: {
+              type: "phone",
+              required: true,
+              placeholder: "+1 (555) 000-0000",
+            },
+            inPerson: {
+              type: "address",
+              required: true,
+              placeholder: "Enter meeting address",
+            },
+          },
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+        translatedDefaultLabel="Location"
+      />
+    );
+  },
+};
+
+// Boolean Component
+export const BooleanComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState(false);
+    return (
+      <ComponentForField
+        field={{
+          type: "boolean",
+          name: "terms",
+          label: "I agree to the terms and conditions",
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// URL Component
+export const URLComponent: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "url",
+          name: "website",
+          label: "Website",
+          placeholder: "https://example.com",
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Read-only States
+export const ReadOnlyText: Story = {
+  render: () => {
+    const [value, setValue] = useState("John Doe");
+    return (
+      <ComponentForField
+        field={{
+          type: "text",
+          name: "fullName",
+          label: "Full Name (Read-only)",
+          placeholder: "Enter your full name",
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={true}
+      />
+    );
+  },
+};
+
+export const ReadOnlySelect: Story = {
+  render: () => {
+    const [value, setValue] = useState("us");
+    return (
+      <ComponentForField
+        field={{
+          type: "select",
+          name: "country",
+          label: "Country (Read-only)",
+          options: [
+            { label: "United States", value: "us" },
+            { label: "Canada", value: "ca" },
+            { label: "United Kingdom", value: "uk" },
+          ],
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={true}
+      />
+    );
+  },
+};
+
+export const ReadOnlyCheckbox: Story = {
+  render: () => {
+    const [value, setValue] = useState<string[]>(["email", "sms"]);
+    return (
+      <ComponentForField
+        field={{
+          type: "checkbox",
+          name: "preferences",
+          label: "Preferences (Read-only)",
+          options: [
+            { label: "Email notifications", value: "email" },
+            { label: "SMS notifications", value: "sms" },
+            { label: "Push notifications", value: "push" },
+          ],
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={true}
+      />
+    );
+  },
+};
+
+// Default story showcasing all field types
+export const Default: Story = {
+  render: () => {
+    const [textValue, setTextValue] = useState("");
+    const [emailValue, setEmailValue] = useState("");
+    const [selectValue, setSelectValue] = useState("");
+    const [booleanValue, setBooleanValue] = useState(false);
+
+    return (
+      <div className="space-y-6">
+        <ComponentForField
+          field={{
+            type: "text",
+            name: "name",
+            label: "Name",
+            placeholder: "Enter your name",
+            required: true,
+          }}
+          value={textValue}
+          setValue={setTextValue}
+          readOnly={false}
+        />
+        <ComponentForField
+          field={{
+            type: "email",
+            name: "email",
+            label: "Email",
+            placeholder: "you@example.com",
+            required: true,
+          }}
+          value={emailValue}
+          setValue={setEmailValue}
+          readOnly={false}
+        />
+        <ComponentForField
+          field={{
+            type: "select",
+            name: "role",
+            label: "Role",
+            placeholder: "Select your role",
+            options: [
+              { label: "Developer", value: "dev" },
+              { label: "Designer", value: "design" },
+              { label: "Manager", value: "manager" },
+            ],
+          }}
+          value={selectValue}
+          setValue={setSelectValue}
+          readOnly={false}
+        />
+        <ComponentForField
+          field={{
+            type: "boolean",
+            name: "newsletter",
+            label: "Subscribe to newsletter",
+          }}
+          value={booleanValue}
+          setValue={setBooleanValue}
+          readOnly={false}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
+
+// Form with validation constraints
+export const WithValidationConstraints: Story = {
+  render: () => {
+    const [value, setValue] = useState("");
+    return (
+      <ComponentForField
+        field={{
+          type: "text",
+          name: "username",
+          label: "Username",
+          placeholder: "Enter username",
+          required: true,
+          minLength: 3,
+          maxLength: 20,
+        }}
+        value={value}
+        setValue={setValue}
+        readOnly={false}
+      />
+    );
+  },
+};
+
+// Pre-filled form fields
+export const PrefilledForm: Story = {
+  render: () => {
+    const [nameValue, setNameValue] = useState("Jane Smith");
+    const [emailValue, setEmailValue] = useState("jane@example.com");
+    const [countryValue, setCountryValue] = useState("us");
+
+    return (
+      <div className="space-y-6">
+        <ComponentForField
+          field={{
+            type: "text",
+            name: "name",
+            label: "Name",
+            placeholder: "Enter your name",
+          }}
+          value={nameValue}
+          setValue={setNameValue}
+          readOnly={false}
+        />
+        <ComponentForField
+          field={{
+            type: "email",
+            name: "email",
+            label: "Email",
+            placeholder: "you@example.com",
+          }}
+          value={emailValue}
+          setValue={setEmailValue}
+          readOnly={false}
+        />
+        <ComponentForField
+          field={{
+            type: "select",
+            name: "country",
+            label: "Country",
+            options: [
+              { label: "United States", value: "us" },
+              { label: "Canada", value: "ca" },
+              { label: "United Kingdom", value: "uk" },
+            ],
+          }}
+          value={countryValue}
+          setValue={setCountryValue}
+          readOnly={false}
+        />
+      </div>
+    );
+  },
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/form-builder/FormBuilder.stories.tsx b/packages/features/form-builder/FormBuilder.stories.tsx
new file mode 100644
index 00000000000000..7c1199405d0805
--- /dev/null
+++ b/packages/features/form-builder/FormBuilder.stories.tsx
@@ -0,0 +1,421 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useForm, FormProvider } from "react-hook-form";
+
+import { FormBuilder } from "./FormBuilder";
+
+// Wrapper component to provide form context
+function FormBuilderWrapper(props: React.ComponentProps<typeof FormBuilder>) {
+  const methods = useForm({
+    defaultValues: {
+      fields: [
+        {
+          name: "name",
+          type: "name" as const,
+          label: "Your Name",
+          required: true,
+          editable: "system" as const,
+          defaultLabel: "your_name",
+          variant: "fullName",
+          variantsConfig: {
+            variants: {
+              fullName: {
+                fields: [
+                  {
+                    name: "fullName",
+                    type: "text" as const,
+                    label: "your_name",
+                    required: true,
+                  },
+                ],
+              },
+            },
+          },
+        },
+        {
+          name: "email",
+          type: "email" as const,
+          label: "Email Address",
+          required: true,
+          editable: "system" as const,
+          defaultLabel: "email_address",
+        },
+        {
+          name: "location",
+          type: "radioInput" as const,
+          label: "Location",
+          required: false,
+          editable: "system-but-optional" as const,
+          defaultLabel: "location",
+        },
+      ],
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <div className="max-w-4xl">
+        <FormBuilder {...props} />
+      </div>
+    </FormProvider>
+  );
+}
+
+const meta = {
+  component: FormBuilder,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      description: "Title for the form builder section",
+      control: "text",
+    },
+    description: {
+      description: "Description text for the form builder",
+      control: "text",
+    },
+    addFieldLabel: {
+      description: "Label for the add field button",
+      control: "text",
+    },
+    disabled: {
+      description: "Whether the form builder is disabled",
+      control: "boolean",
+    },
+    showPhoneAndEmailToggle: {
+      description: "Show toggle between phone and email fields",
+      control: "boolean",
+    },
+    showPriceField: {
+      description: "Show price field for applicable field types",
+      control: "boolean",
+    },
+    paymentCurrency: {
+      description: "Currency for pricing fields",
+      control: "text",
+    },
+  },
+  render: (args) => <FormBuilderWrapper {...args} />,
+} satisfies Meta<typeof FormBuilder>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Booking Questions",
+    description: "Customize the information you collect from people booking with you",
+    addFieldLabel: "Add question",
+    formProp: "fields",
+    disabled: false,
+    LockedIcon: false,
+    dataStore: {
+      options: {},
+    },
+    paymentCurrency: "USD",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    title: "Booking Questions (View Only)",
+    description: "You don't have permission to edit these questions",
+    addFieldLabel: "Add question",
+    formProp: "fields",
+    disabled: true,
+    LockedIcon: false,
+    dataStore: {
+      options: {},
+    },
+    paymentCurrency: "USD",
+  },
+};
+
+export const WithPhoneEmailToggle: Story = {
+  args: {
+    title: "Booking Questions",
+    description: "Customize the information you collect from people booking with you",
+    addFieldLabel: "Add question",
+    formProp: "fields",
+    disabled: false,
+    LockedIcon: false,
+    dataStore: {
+      options: {},
+    },
+    showPhoneAndEmailToggle: true,
+    paymentCurrency: "USD",
+  },
+};
+
+export const WithPricing: Story = {
+  args: {
+    title: "Booking Questions with Pricing",
+    description: "Collect payment information with custom questions",
+    addFieldLabel: "Add paid question",
+    formProp: "fields",
+    disabled: false,
+    LockedIcon: false,
+    dataStore: {
+      options: {},
+    },
+    showPriceField: true,
+    paymentCurrency: "USD",
+  },
+};
+
+export const WithEuroCurrency: Story = {
+  args: {
+    title: "Booking Questions (EUR)",
+    description: "Pricing in Euros",
+    addFieldLabel: "Add question",
+    formProp: "fields",
+    disabled: false,
+    LockedIcon: false,
+    dataStore: {
+      options: {},
+    },
+    showPriceField: true,
+    paymentCurrency: "EUR",
+  },
+};
+
+// Story with custom fields using a wrapper that provides different default values
+function CustomFieldsWrapper(props: React.ComponentProps<typeof FormBuilder>) {
+  const methods = useForm({
+    defaultValues: {
+      fields: [
+        {
+          name: "name",
+          type: "name" as const,
+          label: "Your Name",
+          required: true,
+          editable: "system" as const,
+          defaultLabel: "your_name",
+          variant: "fullName",
+          variantsConfig: {
+            variants: {
+              fullName: {
+                fields: [
+                  {
+                    name: "fullName",
+                    type: "text" as const,
+                    label: "your_name",
+                    required: true,
+                  },
+                ],
+              },
+            },
+          },
+        },
+        {
+          name: "email",
+          type: "email" as const,
+          label: "Email Address",
+          required: true,
+          editable: "system" as const,
+          defaultLabel: "email_address",
+        },
+        {
+          name: "company",
+          type: "text" as const,
+          label: "Company Name",
+          required: false,
+          editable: "user" as const,
+          sources: [
+            {
+              label: "User",
+              type: "user" as const,
+              id: "user",
+              fieldRequired: false,
+            },
+          ],
+        },
+        {
+          name: "guests",
+          type: "multiemail" as const,
+          label: "Additional Guests",
+          required: false,
+          hidden: true,
+          editable: "system-but-optional" as const,
+          defaultLabel: "additional_guests",
+        },
+        {
+          name: "meetingPurpose",
+          type: "select" as const,
+          label: "Meeting Purpose",
+          required: true,
+          editable: "user" as const,
+          options: [
+            { label: "Sales Demo", value: "sales" },
+            { label: "Technical Support", value: "support" },
+            { label: "General Inquiry", value: "inquiry" },
+          ],
+          sources: [
+            {
+              label: "User",
+              type: "user" as const,
+              id: "user",
+              fieldRequired: true,
+            },
+          ],
+        },
+        {
+          name: "specialRequirements",
+          type: "textarea" as const,
+          label: "Special Requirements",
+          placeholder: "Any special requests or requirements...",
+          required: false,
+          editable: "user" as const,
+          sources: [
+            {
+              label: "User",
+              type: "user" as const,
+              id: "user",
+              fieldRequired: false,
+            },
+          ],
+        },
+      ],
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <div className="max-w-4xl">
+        <FormBuilder {...props} />
+      </div>
+    </FormProvider>
+  );
+}
+
+export const WithMixedFieldTypes: Story = {
+  render: (args) => <CustomFieldsWrapper {...args} />,
+  args: {
+    title: "Event Registration Form",
+    description: "Gather comprehensive information from attendees",
+    addFieldLabel: "Add custom field",
+    formProp: "fields",
+    disabled: false,
+    LockedIcon: false,
+    dataStore: {
+      options: {},
+    },
+    paymentCurrency: "USD",
+  },
+};
+
+// Story demonstrating the locked state with icon
+function LockedFormWrapper(props: React.ComponentProps<typeof FormBuilder>) {
+  const methods = useForm({
+    defaultValues: {
+      fields: [
+        {
+          name: "name",
+          type: "name" as const,
+          label: "Your Name",
+          required: true,
+          editable: "system" as const,
+          defaultLabel: "your_name",
+          variant: "fullName",
+          variantsConfig: {
+            variants: {
+              fullName: {
+                fields: [
+                  {
+                    name: "fullName",
+                    type: "text" as const,
+                    label: "your_name",
+                    required: true,
+                  },
+                ],
+              },
+            },
+          },
+        },
+        {
+          name: "email",
+          type: "email" as const,
+          label: "Email Address",
+          required: true,
+          editable: "system" as const,
+          defaultLabel: "email_address",
+        },
+      ],
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <div className="max-w-4xl">
+        <FormBuilder {...props} />
+      </div>
+    </FormProvider>
+  );
+}
+
+export const WithLockedIcon: Story = {
+  render: (args) => <LockedFormWrapper {...args} />,
+  args: {
+    title: "Booking Questions",
+    description: "Premium feature - upgrade to customize",
+    addFieldLabel: "Add question",
+    formProp: "fields",
+    disabled: false,
+    LockedIcon: (
+      <span className="ml-2 inline-block">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="text-muted">
+          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
+          <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
+        </svg>
+      </span>
+    ),
+    dataStore: {
+      options: {},
+    },
+    paymentCurrency: "USD",
+  },
+};
+
+// Empty state story
+function EmptyFormWrapper(props: React.ComponentProps<typeof FormBuilder>) {
+  const methods = useForm({
+    defaultValues: {
+      fields: [],
+    },
+  });
+
+  return (
+    <FormProvider {...methods}>
+      <div className="max-w-4xl">
+        <FormBuilder {...props} />
+      </div>
+    </FormProvider>
+  );
+}
+
+export const EmptyState: Story = {
+  render: (args) => <EmptyFormWrapper {...args} />,
+  args: {
+    title: "Booking Questions",
+    description: "Start building your custom booking form",
+    addFieldLabel: "Add your first question",
+    formProp: "fields",
+    disabled: false,
+    LockedIcon: false,
+    dataStore: {
+      options: {},
+    },
+    paymentCurrency: "USD",
+  },
+};
diff --git a/packages/features/form/components/Select.stories.tsx b/packages/features/form/components/Select.stories.tsx
new file mode 100644
index 00000000000000..17f0967016d8a1
--- /dev/null
+++ b/packages/features/form/components/Select.stories.tsx
@@ -0,0 +1,234 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import Select, { SelectWithValidation } from "./Select";
+
+type Option = { label: string; value: string };
+
+const options: Option[] = [
+  { label: "15 minutes", value: "15" },
+  { label: "30 minutes", value: "30" },
+  { label: "45 minutes", value: "45" },
+  { label: "60 minutes", value: "60" },
+];
+
+const meta = {
+  component: Select,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    onChange: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[300px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Select<Option>>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    options,
+    placeholder: "Select duration...",
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    options,
+    value: options[1],
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    options,
+    placeholder: "Disabled select",
+    isDisabled: true,
+  },
+};
+
+export const Searchable: Story = {
+  args: {
+    options,
+    placeholder: "Search options...",
+    isSearchable: true,
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    options,
+    value: options[0],
+    isClearable: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    options,
+    placeholder: "Loading...",
+    isLoading: true,
+  },
+};
+
+export const MultiSelect: Story = {
+  args: {
+    options,
+    placeholder: "Select multiple...",
+    isMulti: true,
+  },
+};
+
+export const MultiSelectWithValues: Story = {
+  args: {
+    options,
+    value: [options[0], options[2]],
+    isMulti: true,
+  },
+};
+
+export const WithGroups: Story = {
+  args: {
+    options: [
+      {
+        label: "Short meetings",
+        options: [
+          { label: "15 minutes", value: "15" },
+          { label: "30 minutes", value: "30" },
+        ],
+      },
+      {
+        label: "Long meetings",
+        options: [
+          { label: "45 minutes", value: "45" },
+          { label: "60 minutes", value: "60" },
+          { label: "90 minutes", value: "90" },
+        ],
+      },
+    ],
+    placeholder: "Select duration...",
+  },
+};
+
+export const CustomClassNames: Story = {
+  args: {
+    options,
+    placeholder: "Select with custom class",
+    className: "custom-select-class",
+  },
+};
+
+export const WithValidation: Story = {
+  render: () => (
+    <SelectWithValidation
+      options={options}
+      placeholder="Required select..."
+      required
+    />
+  ),
+};
+
+export const WithValidationAndValue: Story = {
+  render: () => (
+    <SelectWithValidation
+      options={options}
+      value={options[1]}
+      required
+    />
+  ),
+};
+
+export const WithValidationMultiSelect: Story = {
+  render: () => (
+    <SelectWithValidation
+      options={options}
+      placeholder="Select multiple (required)..."
+      isMulti
+      required
+    />
+  ),
+};
+
+export const TimezoneExample: Story = {
+  args: {
+    options: [
+      { label: "America/New_York (EST)", value: "America/New_York" },
+      { label: "America/Los_Angeles (PST)", value: "America/Los_Angeles" },
+      { label: "America/Chicago (CST)", value: "America/Chicago" },
+      { label: "Europe/London (GMT)", value: "Europe/London" },
+      { label: "Europe/Paris (CET)", value: "Europe/Paris" },
+      { label: "Asia/Tokyo (JST)", value: "Asia/Tokyo" },
+      { label: "Asia/Shanghai (CST)", value: "Asia/Shanghai" },
+      { label: "Australia/Sydney (AEST)", value: "Australia/Sydney" },
+    ],
+    placeholder: "Select timezone...",
+    isSearchable: true,
+  },
+};
+
+export const FormExample: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <label className="text-sm font-medium mb-2 block">Event Type</label>
+        <Select
+          options={[
+            { label: "One-on-One", value: "one-on-one" },
+            { label: "Group Meeting", value: "group" },
+            { label: "Round Robin", value: "round-robin" },
+          ]}
+          placeholder="Select event type..."
+        />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Duration</label>
+        <Select
+          options={options}
+          placeholder="Select duration..."
+        />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-2 block">Location</label>
+        <Select
+          options={[
+            { label: "Google Meet", value: "google-meet" },
+            { label: "Zoom", value: "zoom" },
+            { label: "Microsoft Teams", value: "teams" },
+            { label: "Phone Call", value: "phone" },
+            { label: "In Person", value: "in-person" },
+          ]}
+          placeholder="Select location..."
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
+
+export const ThemeAwareExample: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-gray-600">
+        This select component automatically adapts to light and dark themes
+      </p>
+      <Select
+        options={options}
+        placeholder="Try switching themes..."
+        isSearchable
+      />
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/insights/components/BookedByCell.stories.tsx b/packages/features/insights/components/BookedByCell.stories.tsx
new file mode 100644
index 00000000000000..ae956264838bf6
--- /dev/null
+++ b/packages/features/insights/components/BookedByCell.stories.tsx
@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { BookedByCell } from "./BookedByCell";
+
+const meta = {
+  component: BookedByCell,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof BookedByCell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    attendees: [
+      {
+        name: "John Doe",
+        email: "john.doe@example.com",
+        phoneNumber: "+1 (555) 123-4567",
+      },
+    ],
+    rowId: 1,
+  },
+};
+
+export const MultipleAttendees: Story = {
+  args: {
+    attendees: [
+      {
+        name: "John Doe",
+        email: "john.doe@example.com",
+        phoneNumber: "+1 (555) 123-4567",
+      },
+      {
+        name: "Jane Smith",
+        email: "jane.smith@example.com",
+        phoneNumber: "+1 (555) 987-6543",
+      },
+      {
+        name: "Bob Johnson",
+        email: "bob.johnson@example.com",
+        phoneNumber: "+1 (555) 246-8135",
+      },
+    ],
+    rowId: 2,
+  },
+};
+
+export const WithoutPhoneNumbers: Story = {
+  args: {
+    attendees: [
+      {
+        name: "Alice Cooper",
+        email: "alice.cooper@example.com",
+        phoneNumber: null,
+      },
+      {
+        name: "Charlie Brown",
+        email: "charlie.brown@example.com",
+        phoneNumber: null,
+      },
+    ],
+    rowId: 3,
+  },
+};
+
+export const SingleAttendeeWithoutPhone: Story = {
+  args: {
+    attendees: [
+      {
+        name: "Emily Davis",
+        email: "emily.davis@example.com",
+        phoneNumber: null,
+      },
+    ],
+    rowId: 4,
+  },
+};
+
+export const LongNameAttendee: Story = {
+  args: {
+    attendees: [
+      {
+        name: "Alexander Christopher Montgomery Wellington III",
+        email: "alexander.wellington@example.com",
+        phoneNumber: "+1 (555) 111-2222",
+      },
+    ],
+    rowId: 5,
+  },
+};
+
+export const ManyAttendees: Story = {
+  args: {
+    attendees: [
+      {
+        name: "Attendee 1",
+        email: "attendee1@example.com",
+        phoneNumber: "+1 (555) 111-1111",
+      },
+      {
+        name: "Attendee 2",
+        email: "attendee2@example.com",
+        phoneNumber: "+1 (555) 222-2222",
+      },
+      {
+        name: "Attendee 3",
+        email: "attendee3@example.com",
+        phoneNumber: "+1 (555) 333-3333",
+      },
+      {
+        name: "Attendee 4",
+        email: "attendee4@example.com",
+        phoneNumber: "+1 (555) 444-4444",
+      },
+      {
+        name: "Attendee 5",
+        email: "attendee5@example.com",
+        phoneNumber: "+1 (555) 555-5555",
+      },
+    ],
+    rowId: 6,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    attendees: [],
+    rowId: 7,
+  },
+};
+
+export const NullAttendees: Story = {
+  args: {
+    attendees: null,
+    rowId: 8,
+  },
+};
diff --git a/packages/features/insights/components/BookingAtCell.stories.tsx b/packages/features/insights/components/BookingAtCell.stories.tsx
new file mode 100644
index 00000000000000..81ce647c1806ba
--- /dev/null
+++ b/packages/features/insights/components/BookingAtCell.stories.tsx
@@ -0,0 +1,237 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { BookingStatus } from "@calcom/prisma/enums";
+
+import type { RoutingFormTableRow } from "../lib/types";
+import { BookingAtCell } from "./BookingAtCell";
+
+const meta = {
+  component: BookingAtCell,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    row: {
+      description: "The routing form table row data containing booking information",
+      control: { type: "object" },
+    },
+    rowId: {
+      description: "Unique identifier for the row",
+      control: { type: "number" },
+    },
+  },
+} satisfies Meta<typeof BookingAtCell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Helper function to create mock booking data
+const createMockRow = (overrides?: Partial<RoutingFormTableRow>): RoutingFormTableRow => ({
+  id: "row-1",
+  formId: "form-1",
+  formFillerId: "filler-1",
+  response: {},
+  createdAt: new Date("2024-01-15T10:30:00Z"),
+  bookingUid: "booking-abc123",
+  bookingUserId: 1,
+  bookingUserName: "John Doe",
+  bookingUserEmail: "john.doe@example.com",
+  bookingUserAvatarUrl: "https://cal.com/avatar/john-doe.jpg",
+  bookingCreatedAt: new Date("2024-01-15T14:00:00Z"),
+  bookingStatus: BookingStatus.ACCEPTED,
+  ...overrides,
+});
+
+export const Default: Story = {
+  args: {
+    row: createMockRow(),
+    rowId: 1,
+  },
+};
+
+export const WithoutBooking: Story = {
+  args: {
+    row: createMockRow({
+      bookingUserId: null,
+      bookingCreatedAt: null,
+      bookingUid: null,
+      bookingUserName: null,
+      bookingUserEmail: null,
+      bookingUserAvatarUrl: null,
+      bookingStatus: null,
+    }),
+    rowId: 1,
+  },
+};
+
+export const AcceptedBooking: Story = {
+  args: {
+    row: createMockRow({
+      bookingUserName: "Alice Johnson",
+      bookingUserEmail: "alice.johnson@example.com",
+      bookingUserAvatarUrl: "https://cal.com/avatar/alice.jpg",
+      bookingStatus: BookingStatus.ACCEPTED,
+      bookingCreatedAt: new Date("2024-03-20T09:00:00Z"),
+    }),
+    rowId: 1,
+  },
+};
+
+export const PendingBooking: Story = {
+  args: {
+    row: createMockRow({
+      bookingUserName: "Bob Smith",
+      bookingUserEmail: "bob.smith@example.com",
+      bookingUserAvatarUrl: "https://cal.com/avatar/bob.jpg",
+      bookingStatus: BookingStatus.PENDING,
+      bookingCreatedAt: new Date("2024-03-21T10:30:00Z"),
+    }),
+    rowId: 1,
+  },
+};
+
+export const CancelledBooking: Story = {
+  args: {
+    row: createMockRow({
+      bookingUserName: "Charlie Brown",
+      bookingUserEmail: "charlie.brown@example.com",
+      bookingUserAvatarUrl: "https://cal.com/avatar/charlie.jpg",
+      bookingStatus: BookingStatus.CANCELLED,
+      bookingCreatedAt: new Date("2024-03-19T15:45:00Z"),
+    }),
+    rowId: 1,
+  },
+};
+
+export const RejectedBooking: Story = {
+  args: {
+    row: createMockRow({
+      bookingUserName: "Diana Prince",
+      bookingUserEmail: "diana.prince@example.com",
+      bookingUserAvatarUrl: "https://cal.com/avatar/diana.jpg",
+      bookingStatus: BookingStatus.REJECTED,
+      bookingCreatedAt: new Date("2024-03-18T11:00:00Z"),
+    }),
+    rowId: 1,
+  },
+};
+
+export const AwaitingHostBooking: Story = {
+  args: {
+    row: createMockRow({
+      bookingUserName: "Eve Adams",
+      bookingUserEmail: "eve.adams@example.com",
+      bookingUserAvatarUrl: "https://cal.com/avatar/eve.jpg",
+      bookingStatus: BookingStatus.AWAITING_HOST,
+      bookingCreatedAt: new Date("2024-03-22T08:15:00Z"),
+    }),
+    rowId: 1,
+  },
+};
+
+export const WithoutAvatar: Story = {
+  args: {
+    row: createMockRow({
+      bookingUserName: "Frank Wilson",
+      bookingUserEmail: "frank.wilson@example.com",
+      bookingUserAvatarUrl: null,
+      bookingStatus: BookingStatus.ACCEPTED,
+      bookingCreatedAt: new Date("2024-03-17T16:30:00Z"),
+    }),
+    rowId: 1,
+  },
+};
+
+export const LongEmailAddress: Story = {
+  args: {
+    row: createMockRow({
+      bookingUserName: "Grace Hopper",
+      bookingUserEmail: "grace.hopper.with.a.very.long.email@example-company.com",
+      bookingUserAvatarUrl: "https://cal.com/avatar/grace.jpg",
+      bookingStatus: BookingStatus.ACCEPTED,
+      bookingCreatedAt: new Date("2024-03-16T13:20:00Z"),
+    }),
+    rowId: 1,
+  },
+};
+
+export const AllStatuses: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Accepted</h3>
+        <BookingAtCell
+          row={createMockRow({
+            bookingUserName: "Alice Johnson",
+            bookingUserEmail: "alice@example.com",
+            bookingStatus: BookingStatus.ACCEPTED,
+          })}
+          rowId={1}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Pending</h3>
+        <BookingAtCell
+          row={createMockRow({
+            bookingUserName: "Bob Smith",
+            bookingUserEmail: "bob@example.com",
+            bookingStatus: BookingStatus.PENDING,
+          })}
+          rowId={2}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Cancelled</h3>
+        <BookingAtCell
+          row={createMockRow({
+            bookingUserName: "Charlie Brown",
+            bookingUserEmail: "charlie@example.com",
+            bookingStatus: BookingStatus.CANCELLED,
+          })}
+          rowId={3}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Rejected</h3>
+        <BookingAtCell
+          row={createMockRow({
+            bookingUserName: "Diana Prince",
+            bookingUserEmail: "diana@example.com",
+            bookingStatus: BookingStatus.REJECTED,
+          })}
+          rowId={4}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">Awaiting Host</h3>
+        <BookingAtCell
+          row={createMockRow({
+            bookingUserName: "Eve Adams",
+            bookingUserEmail: "eve@example.com",
+            bookingStatus: BookingStatus.AWAITING_HOST,
+          })}
+          rowId={5}
+        />
+      </div>
+      <div>
+        <h3 className="text-sm font-semibold mb-2">No Booking</h3>
+        <BookingAtCell
+          row={createMockRow({
+            bookingUserId: null,
+            bookingCreatedAt: null,
+            bookingUid: null,
+            bookingUserName: null,
+            bookingUserEmail: null,
+            bookingUserAvatarUrl: null,
+            bookingStatus: null,
+          })}
+          rowId={6}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/insights/components/ChartCard.stories.tsx b/packages/features/insights/components/ChartCard.stories.tsx
new file mode 100644
index 00000000000000..cb796515738b6f
--- /dev/null
+++ b/packages/features/insights/components/ChartCard.stories.tsx
@@ -0,0 +1,330 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+
+import { ChartCard, ChartCardItem } from "./ChartCard";
+
+const meta = {
+  component: ChartCard,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      description: "Title of the chart card",
+      control: { type: "text" },
+    },
+    legend: {
+      description: "Array of legend items with label and color",
+      control: { type: "object" },
+    },
+    legendSize: {
+      description: "Size of the legend items",
+      control: { type: "select" },
+      options: ["sm", "default"],
+    },
+    enabledLegend: {
+      description: "Array of enabled legend items for toggling",
+      control: { type: "object" },
+    },
+    onSeriesToggle: {
+      description: "Callback when a legend item is toggled",
+      action: "series toggled",
+    },
+    isPending: {
+      description: "Loading state",
+      control: { type: "boolean" },
+    },
+    isError: {
+      description: "Error state",
+      control: { type: "boolean" },
+    },
+    children: {
+      description: "Chart content or other child components",
+      control: false,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[800px] max-w-[90vw]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ChartCard>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Sample data for charts
+const sampleChartData = [
+  { month: "Jan", created: 65, completed: 45, cancelled: 10 },
+  { month: "Feb", created: 72, completed: 58, cancelled: 8 },
+  { month: "Mar", created: 88, completed: 70, cancelled: 12 },
+  { month: "Apr", created: 95, completed: 82, cancelled: 9 },
+  { month: "May", created: 105, completed: 88, cancelled: 11 },
+  { month: "Jun", created: 118, completed: 95, cancelled: 15 },
+];
+
+const sampleLegend = [
+  { label: "Created", color: "#a855f7" },
+  { label: "Completed", color: "#22c55e" },
+  { label: "Cancelled", color: "#ef4444" },
+];
+
+const extendedLegend = [
+  { label: "Created", color: "#a855f7" },
+  { label: "Completed", color: "#22c55e" },
+  { label: "Rescheduled", color: "#3b82f6" },
+  { label: "Cancelled", color: "#ef4444" },
+  { label: "No-Show (Host)", color: "#64748b" },
+  { label: "No-Show (Guest)", color: "#f97316" },
+];
+
+// Simple chart component for stories
+const SimpleLineChart = ({ data }: { data: typeof sampleChartData }) => (
+  <div className="ml-4 mt-4 h-80 sm:ml-0">
+    <ResponsiveContainer width="100%" height="100%">
+      <LineChart data={data} margin={{ top: 30, right: 20, left: 0, bottom: 0 }}>
+        <CartesianGrid strokeDasharray="3 3" vertical={false} />
+        <XAxis dataKey="month" className="text-xs" axisLine={false} tickLine={false} />
+        <YAxis allowDecimals={false} className="text-xs opacity-50" axisLine={false} tickLine={false} />
+        <Tooltip />
+        <Line
+          type="linear"
+          dataKey="created"
+          stroke="#a855f7"
+          strokeWidth={2}
+          dot={{ r: 4 }}
+          activeDot={{ r: 6 }}
+        />
+        <Line
+          type="linear"
+          dataKey="completed"
+          stroke="#22c55e"
+          strokeWidth={2}
+          dot={{ r: 4 }}
+          activeDot={{ r: 6 }}
+        />
+        <Line
+          type="linear"
+          dataKey="cancelled"
+          stroke="#ef4444"
+          strokeWidth={2}
+          dot={{ r: 4 }}
+          activeDot={{ r: 6 }}
+        />
+      </LineChart>
+    </ResponsiveContainer>
+  </div>
+);
+
+export const Default: Story = {
+  args: {
+    title: "Event Trends",
+    legend: sampleLegend,
+    children: <SimpleLineChart data={sampleChartData} />,
+  },
+};
+
+export const WithLegend: Story = {
+  args: {
+    title: "Bookings Overview",
+    legend: sampleLegend,
+    children: <SimpleLineChart data={sampleChartData} />,
+  },
+};
+
+export const WithExtendedLegend: Story = {
+  args: {
+    title: "Detailed Event Trends",
+    legend: extendedLegend,
+    children: (
+      <div className="ml-4 mt-4 h-80 sm:ml-0">
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart data={sampleChartData} margin={{ top: 30, right: 20, left: 0, bottom: 0 }}>
+            <CartesianGrid strokeDasharray="3 3" vertical={false} />
+            <XAxis dataKey="month" className="text-xs" axisLine={false} tickLine={false} />
+            <YAxis allowDecimals={false} className="text-xs opacity-50" axisLine={false} tickLine={false} />
+            <Tooltip />
+            <Line type="linear" dataKey="created" stroke="#a855f7" strokeWidth={2} />
+            <Line type="linear" dataKey="completed" stroke="#22c55e" strokeWidth={2} />
+            <Line type="linear" dataKey="cancelled" stroke="#ef4444" strokeWidth={2} />
+          </LineChart>
+        </ResponsiveContainer>
+      </div>
+    ),
+  },
+};
+
+export const WithSmallLegend: Story = {
+  args: {
+    title: "Event Trends (Compact Legend)",
+    legend: extendedLegend,
+    legendSize: "sm",
+    children: <SimpleLineChart data={sampleChartData} />,
+  },
+};
+
+export const WithHeaderContent: Story = {
+  args: {
+    title: "Event Trends",
+    legend: sampleLegend,
+    headerContent: (
+      <div className="flex items-center gap-2">
+        <span className="text-subtle text-sm">Last 30 days</span>
+      </div>
+    ),
+    children: <SimpleLineChart data={sampleChartData} />,
+  },
+};
+
+export const LoadingState: Story = {
+  args: {
+    title: "Event Trends",
+    legend: sampleLegend,
+    isPending: true,
+  },
+};
+
+export const LoadingWithContent: Story = {
+  args: {
+    title: "Event Trends",
+    legend: sampleLegend,
+    isPending: true,
+    children: <SimpleLineChart data={sampleChartData} />,
+  },
+};
+
+export const ErrorState: Story = {
+  args: {
+    title: "Event Trends",
+    legend: sampleLegend,
+    isError: true,
+    children: (
+      <div className="m-auto flex h-80 flex-col items-center justify-center">
+        <p className="text-error text-sm">Failed to load chart data</p>
+      </div>
+    ),
+  },
+};
+
+export const WithListItems: Story = {
+  args: {
+    title: "Top Event Types",
+    children: (
+      <div>
+        <ChartCardItem count={142}>30 Minute Meeting</ChartCardItem>
+        <ChartCardItem count={98}>Discovery Call</ChartCardItem>
+        <ChartCardItem count={76}>Team Sync</ChartCardItem>
+        <ChartCardItem count={54}>Sales Demo</ChartCardItem>
+        <ChartCardItem count={32}>Technical Interview</ChartCardItem>
+      </div>
+    ),
+  },
+};
+
+export const WithListItemsNoCount: Story = {
+  args: {
+    title: "Recent Activities",
+    children: (
+      <div>
+        <ChartCardItem>Meeting with John Doe scheduled</ChartCardItem>
+        <ChartCardItem>Discovery Call with Jane Smith completed</ChartCardItem>
+        <ChartCardItem>Team Sync with Bob Wilson cancelled</ChartCardItem>
+        <ChartCardItem>Sales Demo with Alice Johnson rescheduled</ChartCardItem>
+      </div>
+    ),
+  },
+};
+
+export const MixedContent: Story = {
+  args: {
+    title: "Top Performers",
+    legend: sampleLegend,
+    headerContent: <span className="text-subtle text-sm">This Month</span>,
+    children: (
+      <div>
+        <ChartCardItem count="95%">Sarah Johnson</ChartCardItem>
+        <ChartCardItem count="92%">Michael Chen</ChartCardItem>
+        <ChartCardItem count="88%">Emily Rodriguez</ChartCardItem>
+        <ChartCardItem count="85%">David Kim</ChartCardItem>
+        <ChartCardItem count="82%">Lisa Anderson</ChartCardItem>
+      </div>
+    ),
+  },
+};
+
+export const InteractiveLegend: Story = {
+  args: {
+    title: "Event Trends (Click to toggle)",
+    legend: sampleLegend,
+    enabledLegend: sampleLegend,
+    onSeriesToggle: (label: string) => {
+      console.log("Toggled series:", label);
+    },
+    children: <SimpleLineChart data={sampleChartData} />,
+  },
+};
+
+export const CompactCard: Story = {
+  args: {
+    title: "Quick Stats",
+    children: (
+      <div className="p-4">
+        <div className="grid grid-cols-3 gap-4">
+          <div className="text-center">
+            <div className="text-emphasis text-2xl font-bold">142</div>
+            <div className="text-subtle text-xs">Total</div>
+          </div>
+          <div className="text-center">
+            <div className="text-emphasis text-2xl font-bold">98</div>
+            <div className="text-subtle text-xs">Completed</div>
+          </div>
+          <div className="text-center">
+            <div className="text-emphasis text-2xl font-bold">12</div>
+            <div className="text-subtle text-xs">Cancelled</div>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 gap-8 p-4">
+      <div>
+        <h3 className="text-emphasis mb-2 text-sm font-semibold">Default with Chart</h3>
+        <ChartCard title="Event Trends" legend={sampleLegend}>
+          <SimpleLineChart data={sampleChartData} />
+        </ChartCard>
+      </div>
+      <div>
+        <h3 className="text-emphasis mb-2 text-sm font-semibold">Loading State</h3>
+        <ChartCard title="Event Trends" legend={sampleLegend} isPending />
+      </div>
+      <div>
+        <h3 className="text-emphasis mb-2 text-sm font-semibold">With List Items</h3>
+        <ChartCard title="Top Events">
+          <ChartCardItem count={142}>30 Minute Meeting</ChartCardItem>
+          <ChartCardItem count={98}>Discovery Call</ChartCardItem>
+          <ChartCardItem count={76}>Team Sync</ChartCardItem>
+        </ChartCard>
+      </div>
+      <div>
+        <h3 className="text-emphasis mb-2 text-sm font-semibold">With Header Content</h3>
+        <ChartCard
+          title="Analytics"
+          legend={sampleLegend}
+          headerContent={<span className="text-subtle text-sm">Last 30 days</span>}>
+          <SimpleLineChart data={sampleChartData} />
+        </ChartCard>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+  decorators: [],
+};
diff --git a/packages/features/insights/components/ResponseValueCell.stories.tsx b/packages/features/insights/components/ResponseValueCell.stories.tsx
new file mode 100644
index 00000000000000..070d7bcf7ef356
--- /dev/null
+++ b/packages/features/insights/components/ResponseValueCell.stories.tsx
@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { ResponseValueCell } from "./ResponseValueCell";
+
+const meta = {
+  component: ResponseValueCell,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ResponseValueCell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    optionMap: {
+      "opt1": "Option 1",
+      "opt2": "Option 2",
+    },
+    values: ["opt1"],
+    rowId: 1,
+  },
+};
+
+export const TwoValues: Story = {
+  args: {
+    optionMap: {
+      "opt1": "Option 1",
+      "opt2": "Option 2",
+      "opt3": "Option 3",
+    },
+    values: ["opt1", "opt2"],
+    rowId: 2,
+  },
+};
+
+export const ThreeValues: Story = {
+  args: {
+    optionMap: {
+      "opt1": "Option 1",
+      "opt2": "Option 2",
+      "opt3": "Option 3",
+    },
+    values: ["opt1", "opt2", "opt3"],
+    rowId: 3,
+  },
+};
+
+export const ManyValues: Story = {
+  args: {
+    optionMap: {
+      "opt1": "Option 1",
+      "opt2": "Option 2",
+      "opt3": "Option 3",
+      "opt4": "Option 4",
+      "opt5": "Option 5",
+      "opt6": "Option 6",
+    },
+    values: ["opt1", "opt2", "opt3", "opt4", "opt5", "opt6"],
+    rowId: 4,
+  },
+};
+
+export const LongOptionLabels: Story = {
+  args: {
+    optionMap: {
+      "opt1": "This is a very long option label that might overflow",
+      "opt2": "Another extremely long label for testing purposes",
+      "opt3": "Yet another long label to see how it behaves",
+    },
+    values: ["opt1", "opt2", "opt3"],
+    rowId: 5,
+  },
+};
+
+export const UnmappedValues: Story = {
+  args: {
+    optionMap: {
+      "opt1": "Option 1",
+    },
+    values: ["opt1", "opt2", "opt3"],
+    rowId: 6,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    optionMap: {
+      "opt1": "Option 1",
+      "opt2": "Option 2",
+    },
+    values: [],
+    rowId: 7,
+  },
+};
+
+export const WithSpecialCharacters: Story = {
+  args: {
+    optionMap: {
+      "opt1": "Option with emoji 🎉",
+      "opt2": "Option & Special < > Characters",
+      "opt3": "Option with 'quotes'",
+    },
+    values: ["opt1", "opt2", "opt3"],
+    rowId: 8,
+  },
+};
+
+export const NumericKeys: Story = {
+  args: {
+    optionMap: {
+      "1": "First Choice",
+      "2": "Second Choice",
+      "3": "Third Choice",
+      "4": "Fourth Choice",
+    },
+    values: ["1", "2", "3", "4"],
+    rowId: 9,
+  },
+};
diff --git a/packages/features/insights/filters/DateTargetSelector.stories.tsx b/packages/features/insights/filters/DateTargetSelector.stories.tsx
new file mode 100644
index 00000000000000..d0aa40a9a09992
--- /dev/null
+++ b/packages/features/insights/filters/DateTargetSelector.stories.tsx
@@ -0,0 +1,128 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { DateTargetSelector, type DateTarget } from "./DateTargetSelector";
+
+// Mock the useLocale hook
+jest.mock("@calcom/lib/hooks/useLocale", () => ({
+  useLocale: () => ({
+    t: (key: string) => {
+      const translations: Record<string, string> = {
+        booking_time_option: "Booking Time",
+        booking_time_option_description: "Filter by when the booking is scheduled to occur",
+        created_at_option: "Created At",
+        created_at_option_description: "Filter by when the booking was created",
+      };
+      return translations[key] || key;
+    },
+  }),
+}));
+
+const meta = {
+  component: DateTargetSelector,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    value: {
+      control: "select",
+      options: ["startTime", "createdAt"],
+      description: "The currently selected date target",
+    },
+    onChange: {
+      action: "changed",
+      description: "Callback function called when the selection changes",
+    },
+  },
+} satisfies Meta<typeof DateTargetSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateTarget>("startTime");
+    return <DateTargetSelector value={value} onChange={setValue} />;
+  },
+};
+
+export const BookingTimeSelected: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateTarget>("startTime");
+    return <DateTargetSelector value={value} onChange={setValue} />;
+  },
+};
+
+export const CreatedAtSelected: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateTarget>("createdAt");
+    return <DateTargetSelector value={value} onChange={setValue} />;
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateTarget>("startTime");
+    return (
+      <div className="flex flex-col gap-4">
+        <DateTargetSelector value={value} onChange={setValue} />
+        <div className="text-sm text-muted-foreground">
+          Current selection: <span className="font-medium">{value}</span>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const WithContextDisplay: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateTarget>("startTime");
+    const displayText = value === "startTime" ? "Booking Time" : "Created At";
+    return (
+      <div className="flex flex-col gap-4 items-center">
+        <div className="flex items-center gap-2">
+          <span className="text-sm font-medium">Filter by:</span>
+          <DateTargetSelector value={value} onChange={setValue} />
+        </div>
+        <div className="text-sm text-muted-foreground p-4 border border-gray-200 rounded-md">
+          Filtering insights by: <span className="font-semibold">{displayText}</span>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const MultipleInstances: Story = {
+  render: () => {
+    const [value1, setValue1] = useState<DateTarget>("startTime");
+    const [value2, setValue2] = useState<DateTarget>("createdAt");
+    return (
+      <div className="flex flex-col gap-6">
+        <div className="flex items-center gap-2">
+          <span className="text-sm">Filter 1:</span>
+          <DateTargetSelector value={value1} onChange={setValue1} />
+          <span className="text-xs text-muted-foreground">({value1})</span>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-sm">Filter 2:</span>
+          <DateTargetSelector value={value2} onChange={setValue2} />
+          <span className="text-xs text-muted-foreground">({value2})</span>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const InFilterBar: Story = {
+  render: () => {
+    const [value, setValue] = useState<DateTarget>("startTime");
+    return (
+      <div className="flex items-center gap-2 p-4 border border-gray-200 rounded-md bg-gray-50">
+        <span className="text-sm font-medium">Insights Filters:</span>
+        <div className="flex-1" />
+        <DateTargetSelector value={value} onChange={setValue} />
+      </div>
+    );
+  },
+};
diff --git a/packages/features/insights/filters/OrgTeamsFilter.stories.tsx b/packages/features/insights/filters/OrgTeamsFilter.stories.tsx
new file mode 100644
index 00000000000000..fc561c56e8e68c
--- /dev/null
+++ b/packages/features/insights/filters/OrgTeamsFilter.stories.tsx
@@ -0,0 +1,303 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { SessionProvider } from "next-auth/react";
+import { useState } from "react";
+
+import { InsightsOrgTeamsContext } from "../context/InsightsOrgTeamsProvider";
+import type { OrgTeamsType } from "./OrgTeamsFilter";
+import { OrgTeamsFilter } from "./OrgTeamsFilter";
+
+// Mock TRPC hook
+const mockTRPCHook = (data: any) => ({
+  data,
+  isLoading: false,
+  isError: false,
+  error: null,
+  refetch: () => Promise.resolve({ data }),
+});
+
+// Mock teams data
+const mockTeamsData = [
+  {
+    id: 1,
+    name: "Engineering",
+    isOrg: false,
+    logoUrl: "https://cal.com/api/avatar/team-1.png",
+  },
+  {
+    id: 2,
+    name: "Marketing",
+    isOrg: false,
+    logoUrl: "https://cal.com/api/avatar/team-2.png",
+  },
+  {
+    id: 3,
+    name: "Sales",
+    isOrg: false,
+    logoUrl: "https://cal.com/api/avatar/team-3.png",
+  },
+  {
+    id: 4,
+    name: "Design",
+    isOrg: false,
+    logoUrl: null,
+  },
+];
+
+const mockOrgData = [
+  {
+    id: 100,
+    name: "Acme Corp",
+    isOrg: true,
+    logoUrl: "https://cal.com/api/avatar/org.png",
+  },
+  ...mockTeamsData,
+];
+
+// Mock session data
+const mockSession = {
+  user: {
+    id: 1,
+    name: "John Doe",
+    email: "john.doe@example.com",
+    avatarUrl: "https://cal.com/api/avatar/user.png",
+    org: {
+      id: 100,
+      name: "Acme Corp",
+      role: "OWNER",
+    },
+  },
+  expires: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+};
+
+const mockSessionWithoutOrg = {
+  user: {
+    id: 1,
+    name: "John Doe",
+    email: "john.doe@example.com",
+    avatarUrl: "https://cal.com/api/avatar/user.png",
+  },
+  expires: new Date(Date.now() + 24 * 60 * 60 * 1000).toISOString(),
+};
+
+// Mock TRPC module
+jest.mock("@calcom/trpc/react", () => ({
+  trpc: {
+    viewer: {
+      insights: {
+        teamListForUser: {
+          useQuery: jest.fn(),
+        },
+      },
+    },
+  },
+}));
+
+const { trpc } = require("@calcom/trpc/react");
+
+// Wrapper component with context providers
+function OrgTeamsFilterWrapper({
+  teamsData,
+  session,
+  initialOrgTeamsType = "org",
+  initialSelectedTeamId,
+}: {
+  teamsData: any[];
+  session: any;
+  initialOrgTeamsType?: OrgTeamsType;
+  initialSelectedTeamId?: number;
+}) {
+  const [orgTeamsType, setOrgTeamsType] = useState<OrgTeamsType>(initialOrgTeamsType);
+  const [selectedTeamId, setSelectedTeamId] = useState<number | undefined>(initialSelectedTeamId);
+
+  // Mock TRPC response
+  trpc.viewer.insights.teamListForUser.useQuery.mockReturnValue(mockTRPCHook(teamsData));
+
+  return (
+    <SessionProvider session={session}>
+      <InsightsOrgTeamsContext.Provider
+        value={{
+          orgTeamsType,
+          setOrgTeamsType,
+          selectedTeamId,
+          setSelectedTeamId,
+        }}>
+        <OrgTeamsFilter />
+      </InsightsOrgTeamsContext.Provider>
+    </SessionProvider>
+  );
+}
+
+const meta = {
+  component: OrgTeamsFilter,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[300px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof OrgTeamsFilter>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <OrgTeamsFilterWrapper teamsData={mockOrgData} session={mockSession} initialOrgTeamsType="org" />
+  ),
+};
+
+export const SelectedYours: Story = {
+  render: () => (
+    <OrgTeamsFilterWrapper
+      teamsData={mockOrgData}
+      session={mockSession}
+      initialOrgTeamsType="yours"
+    />
+  ),
+};
+
+export const SelectedTeam: Story = {
+  render: () => (
+    <OrgTeamsFilterWrapper
+      teamsData={mockOrgData}
+      session={mockSession}
+      initialOrgTeamsType="team"
+      initialSelectedTeamId={1}
+    />
+  ),
+};
+
+export const WithoutOrganization: Story = {
+  render: () => (
+    <OrgTeamsFilterWrapper
+      teamsData={mockTeamsData}
+      session={mockSessionWithoutOrg}
+      initialOrgTeamsType="yours"
+    />
+  ),
+};
+
+export const NoTeams: Story = {
+  render: () => (
+    <OrgTeamsFilterWrapper
+      teamsData={[]}
+      session={mockSessionWithoutOrg}
+      initialOrgTeamsType="yours"
+    />
+  ),
+};
+
+export const ManyTeams: Story = {
+  render: () => {
+    const manyTeams = [
+      {
+        id: 100,
+        name: "Acme Corp",
+        isOrg: true,
+        logoUrl: "https://cal.com/api/avatar/org.png",
+      },
+      ...Array.from({ length: 15 }, (_, i) => ({
+        id: i + 1,
+        name: `Team ${i + 1}`,
+        isOrg: false,
+        logoUrl: i % 3 === 0 ? null : `https://cal.com/api/avatar/team-${i + 1}.png`,
+      })),
+    ];
+    return (
+      <OrgTeamsFilterWrapper
+        teamsData={manyTeams}
+        session={mockSession}
+        initialOrgTeamsType="org"
+      />
+    );
+  },
+};
+
+export const LongTeamNames: Story = {
+  render: () => {
+    const teamsWithLongNames = [
+      {
+        id: 100,
+        name: "Acme Corp",
+        isOrg: true,
+        logoUrl: "https://cal.com/api/avatar/org.png",
+      },
+      {
+        id: 1,
+        name: "Engineering and Product Development Team",
+        isOrg: false,
+        logoUrl: "https://cal.com/api/avatar/team-1.png",
+      },
+      {
+        id: 2,
+        name: "Marketing, Communications, and Brand Strategy",
+        isOrg: false,
+        logoUrl: "https://cal.com/api/avatar/team-2.png",
+      },
+      {
+        id: 3,
+        name: "Sales and Customer Success Division",
+        isOrg: false,
+        logoUrl: null,
+      },
+    ];
+    return (
+      <OrgTeamsFilterWrapper
+        teamsData={teamsWithLongNames}
+        session={mockSession}
+        initialOrgTeamsType="team"
+        initialSelectedTeamId={1}
+      />
+    );
+  },
+};
+
+export const WithoutAvatars: Story = {
+  render: () => {
+    const teamsWithoutAvatars = [
+      {
+        id: 100,
+        name: "Acme Corp",
+        isOrg: true,
+        logoUrl: null,
+      },
+      {
+        id: 1,
+        name: "Engineering",
+        isOrg: false,
+        logoUrl: null,
+      },
+      {
+        id: 2,
+        name: "Marketing",
+        isOrg: false,
+        logoUrl: null,
+      },
+      {
+        id: 3,
+        name: "Sales",
+        isOrg: false,
+        logoUrl: null,
+      },
+    ];
+    const sessionWithoutAvatar = {
+      ...mockSession,
+      user: {
+        ...mockSession.user,
+        avatarUrl: null,
+      },
+    };
+    return (
+      <OrgTeamsFilterWrapper
+        teamsData={teamsWithoutAvatars}
+        session={sessionWithoutAvatar}
+        initialOrgTeamsType="yours"
+      />
+    );
+  },
+};
diff --git a/packages/features/mintlify-chat/MintlifyChat.stories.tsx b/packages/features/mintlify-chat/MintlifyChat.stories.tsx
new file mode 100644
index 00000000000000..c6b75da870ca03
--- /dev/null
+++ b/packages/features/mintlify-chat/MintlifyChat.stories.tsx
@@ -0,0 +1,164 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { MintlifyChat } from "./MintlifyChat";
+
+const meta = {
+  component: MintlifyChat,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    searchText: {
+      description: "The search query text that the AI will answer",
+      control: "text",
+    },
+    aiResponse: {
+      description: "The AI-generated response (can include markdown and citations)",
+      control: "text",
+    },
+    setAiResponse: {
+      description: "Function to update the AI response state",
+      table: {
+        disable: true,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MintlifyChat>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Wrapper component to handle state for interactive stories
+const MintlifyChatWrapper = ({ searchText, initialResponse }: { searchText: string; initialResponse: string }) => {
+  const [aiResponse, setAiResponse] = useState(initialResponse);
+
+  return <MintlifyChat searchText={searchText} aiResponse={aiResponse} setAiResponse={setAiResponse} />;
+};
+
+export const Default: Story = {
+  render: () => {
+    return <MintlifyChatWrapper searchText="event types" initialResponse="" />;
+  },
+};
+
+export const WithSearchQuery: Story = {
+  render: () => {
+    return <MintlifyChatWrapper searchText="how to create a booking" initialResponse="" />;
+  },
+};
+
+export const WithResponse: Story = {
+  render: () => {
+    const response = `Event types are the foundation of your scheduling setup in Cal.com. They define the type of meetings you want to offer, including duration, availability, and booking conditions.
+
+To create an event type:
+1. Go to your dashboard
+2. Click on "Event Types"
+3. Click "New Event Type"
+4. Configure your settings
+5. Save and share your booking link||[{"id":"1","link":"/event-types","chunk_html":"","metadata":{"title":"Event Types Documentation"}},{"id":"2","link":"/getting-started","chunk_html":"","metadata":{"title":"Getting Started Guide"}}]`;
+
+    return <MintlifyChatWrapper searchText="event types" initialResponse={response} />;
+  },
+};
+
+export const WithMarkdownResponse: Story = {
+  render: () => {
+    const response = `You can customize your booking page in several ways:
+
+## Appearance
+- **Colors**: Choose your brand colors
+- **Logo**: Upload your company logo
+- **Background**: Set a custom background image
+
+## Settings
+- Add custom questions
+- Set buffer times
+- Configure notifications||[{"id":"1","link":"/appearance","chunk_html":"","metadata":{"title":"Appearance Settings"}},{"id":"2","link":"/booking-questions","chunk_html":"","metadata":{"title":"Custom Questions"}}]`;
+
+    return <MintlifyChatWrapper searchText="customize booking page" initialResponse={response} />;
+  },
+};
+
+export const WithLongResponse: Story = {
+  render: () => {
+    const response = `Cal.com offers extensive integration capabilities with various tools and platforms:
+
+## Calendar Integrations
+Connect with Google Calendar, Outlook, Apple Calendar, and CalDAV to sync your availability automatically. This ensures you never get double-booked.
+
+## Video Conferencing
+Integrate with Zoom, Google Meet, Microsoft Teams, or any custom video conferencing solution. Each meeting can automatically include video conferencing links.
+
+## Payment Processing
+Accept payments through Stripe, PayPal, or other payment processors. Set up paid event types for consultations, workshops, or any service.
+
+## CRM Integration
+Sync your bookings with Salesforce, HubSpot, and other CRM platforms to keep your customer data up-to-date.
+
+## Automation
+Use webhooks and API integrations to automate workflows with tools like Zapier, Make, or custom solutions.||[{"id":"1","link":"/integrations/calendar","chunk_html":"","metadata":{"title":"Calendar Integrations"}},{"id":"2","link":"/integrations/video","chunk_html":"","metadata":{"title":"Video Conferencing"}},{"id":"3","link":"/integrations/payment","chunk_html":"","metadata":{"title":"Payment Processing"}},{"id":"4","link":"/integrations/crm","chunk_html":"","metadata":{"title":"CRM Integration"}}]`;
+
+    return <MintlifyChatWrapper searchText="integrations" initialResponse={response} />;
+  },
+};
+
+export const ShortQuery: Story = {
+  render: () => {
+    return <MintlifyChatWrapper searchText="API" initialResponse="" />;
+  },
+};
+
+export const ComplexQuery: Story = {
+  render: () => {
+    return <MintlifyChatWrapper searchText="How do I set up round-robin scheduling for my team with weighted distribution?" initialResponse="" />;
+  },
+};
+
+export const ResponseWithoutCitations: Story = {
+  render: () => {
+    const response = "Round-robin scheduling allows you to distribute bookings evenly across team members. This is perfect for sales teams, support staff, or any scenario where you want to balance the load.||";
+
+    return <MintlifyChatWrapper searchText="round-robin scheduling" initialResponse={response} />;
+  },
+};
+
+export const ResponseWithManyCitations: Story = {
+  render: () => {
+    const response = `Cal.com provides comprehensive team scheduling features for organizations of all sizes.||[{"id":"1","link":"/teams/getting-started","chunk_html":"","metadata":{"title":"Getting Started with Teams"}},{"id":"2","link":"/teams/round-robin","chunk_html":"","metadata":{"title":"Round-Robin Scheduling"}},{"id":"3","link":"/teams/collective","chunk_html":"","metadata":{"title":"Collective Events"}},{"id":"4","link":"/teams/permissions","chunk_html":"","metadata":{"title":"Team Permissions"}},{"id":"5","link":"/teams/billing","chunk_html":"","metadata":{"title":"Team Billing"}},{"id":"6","link":"/teams/branding","chunk_html":"","metadata":{"title":"Team Branding"}}]`;
+
+    return <MintlifyChatWrapper searchText="team features" initialResponse={response} />;
+  },
+};
+
+export const AllStates: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <div>
+        <h3 className="mb-2 font-semibold">Initial State (No Response)</h3>
+        <div className="w-[600px]">
+          <MintlifyChatWrapper searchText="webhooks" initialResponse="" />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="mb-2 font-semibold">With Response and Citations</h3>
+        <div className="w-[600px]">
+          <MintlifyChatWrapper
+            searchText="API authentication"
+            initialResponse={`To authenticate with the Cal.com API, you need to generate an API key from your account settings.||[{"id":"1","link":"/api/authentication","chunk_html":"","metadata":{"title":"API Authentication"}}]`}
+          />
+        </div>
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/features/schedules/components/ScheduleListItem.stories.tsx b/packages/features/schedules/components/ScheduleListItem.stories.tsx
new file mode 100644
index 00000000000000..26c1e6855c2874
--- /dev/null
+++ b/packages/features/schedules/components/ScheduleListItem.stories.tsx
@@ -0,0 +1,318 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { ScheduleListItem } from "./ScheduleListItem";
+
+const meta = {
+  component: ScheduleListItem,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <ul>
+          <Story />
+        </ul>
+      </div>
+    ),
+  ],
+  argTypes: {
+    schedule: {
+      description: "Schedule data including name, availability times, and timezone",
+    },
+    deleteFunction: {
+      description: "Function called when deleting a schedule",
+    },
+    displayOptions: {
+      description: "Display options for timezone and time formatting",
+    },
+    isDeletable: {
+      description: "Whether the schedule can be deleted",
+      control: "boolean",
+    },
+    updateDefault: {
+      description: "Function called when setting a schedule as default",
+    },
+    duplicateFunction: {
+      description: "Function called when duplicating a schedule",
+    },
+    redirectUrl: {
+      description: "URL to navigate to when clicking the schedule",
+    },
+  },
+} satisfies Meta<typeof ScheduleListItem>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const mockAvailability = [
+  {
+    id: 1,
+    userId: 1,
+    eventTypeId: null,
+    days: [1, 2, 3, 4, 5],
+    startTime: new Date(Date.UTC(1970, 0, 1, 9, 0, 0, 0)),
+    endTime: new Date(Date.UTC(1970, 0, 1, 17, 0, 0, 0)),
+    date: null,
+    scheduleId: 1,
+    profileId: null,
+  },
+];
+
+const mockSchedule = {
+  id: 1,
+  userId: 1,
+  name: "Working Hours",
+  availability: mockAvailability,
+  timeZone: "America/New_York",
+  dateOverrides: [],
+  isDefault: false,
+  isManaged: false,
+  workingHours: [],
+  profileId: null,
+};
+
+export const Default: Story = {
+  args: {
+    schedule: mockSchedule,
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/1",
+    displayOptions: {
+      hour12: true,
+      weekStart: "Sunday",
+    },
+  },
+};
+
+export const DefaultSchedule: Story = {
+  args: {
+    schedule: {
+      ...mockSchedule,
+      isDefault: true,
+    },
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/1",
+    displayOptions: {
+      hour12: true,
+      weekStart: "Sunday",
+    },
+  },
+};
+
+export const NotDeletable: Story = {
+  args: {
+    schedule: {
+      ...mockSchedule,
+      name: "Last Schedule",
+    },
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: false,
+    redirectUrl: "/availability/1",
+    displayOptions: {
+      hour12: true,
+      weekStart: "Sunday",
+    },
+  },
+};
+
+export const TwentyFourHourFormat: Story = {
+  args: {
+    schedule: mockSchedule,
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/1",
+    displayOptions: {
+      hour12: false,
+      weekStart: "Sunday",
+    },
+  },
+};
+
+export const WeekendSchedule: Story = {
+  args: {
+    schedule: {
+      ...mockSchedule,
+      name: "Weekend Availability",
+      availability: [
+        {
+          id: 2,
+          userId: 1,
+          eventTypeId: null,
+          days: [6, 0],
+          startTime: new Date(Date.UTC(1970, 0, 1, 10, 0, 0, 0)),
+          endTime: new Date(Date.UTC(1970, 0, 1, 14, 0, 0, 0)),
+          date: null,
+          scheduleId: 2,
+          profileId: null,
+        },
+      ],
+      timeZone: "America/Los_Angeles",
+    },
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/2",
+    displayOptions: {
+      hour12: true,
+      weekStart: "Sunday",
+    },
+  },
+};
+
+export const MultipleTimeRanges: Story = {
+  args: {
+    schedule: {
+      ...mockSchedule,
+      name: "Split Schedule",
+      availability: [
+        {
+          id: 3,
+          userId: 1,
+          eventTypeId: null,
+          days: [1, 2, 3, 4, 5],
+          startTime: new Date(Date.UTC(1970, 0, 1, 9, 0, 0, 0)),
+          endTime: new Date(Date.UTC(1970, 0, 1, 12, 0, 0, 0)),
+          date: null,
+          scheduleId: 3,
+          profileId: null,
+        },
+        {
+          id: 4,
+          userId: 1,
+          eventTypeId: null,
+          days: [1, 2, 3, 4, 5],
+          startTime: new Date(Date.UTC(1970, 0, 1, 13, 0, 0, 0)),
+          endTime: new Date(Date.UTC(1970, 0, 1, 17, 0, 0, 0)),
+          date: null,
+          scheduleId: 3,
+          profileId: null,
+        },
+      ],
+      timeZone: "Europe/London",
+    },
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/3",
+    displayOptions: {
+      hour12: false,
+      weekStart: "Monday",
+    },
+  },
+};
+
+export const StaggeredDays: Story = {
+  args: {
+    schedule: {
+      ...mockSchedule,
+      name: "Custom Days",
+      availability: [
+        {
+          id: 5,
+          userId: 1,
+          eventTypeId: null,
+          days: [1, 3, 5],
+          startTime: new Date(Date.UTC(1970, 0, 1, 8, 0, 0, 0)),
+          endTime: new Date(Date.UTC(1970, 0, 1, 16, 30, 0, 0)),
+          date: null,
+          scheduleId: 4,
+          profileId: null,
+        },
+      ],
+      timeZone: "Asia/Tokyo",
+    },
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/4",
+    displayOptions: {
+      hour12: true,
+      weekStart: "Sunday",
+    },
+  },
+};
+
+export const AllDaysAvailable: Story = {
+  args: {
+    schedule: {
+      ...mockSchedule,
+      name: "24/7 Support",
+      availability: [
+        {
+          id: 6,
+          userId: 1,
+          eventTypeId: null,
+          days: [0, 1, 2, 3, 4, 5, 6],
+          startTime: new Date(Date.UTC(1970, 0, 1, 0, 0, 0, 0)),
+          endTime: new Date(Date.UTC(1970, 0, 1, 23, 59, 0, 0)),
+          date: null,
+          scheduleId: 5,
+          profileId: null,
+        },
+      ],
+      timeZone: "UTC",
+    },
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/5",
+    displayOptions: {
+      hour12: false,
+      weekStart: "Sunday",
+    },
+  },
+};
+
+export const NoTimezone: Story = {
+  args: {
+    schedule: {
+      ...mockSchedule,
+      name: "No Timezone Schedule",
+      timeZone: null,
+      availability: mockAvailability,
+    },
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/6",
+    displayOptions: {
+      hour12: true,
+      weekStart: "Sunday",
+    },
+  },
+};
+
+export const LongScheduleName: Story = {
+  args: {
+    schedule: {
+      ...mockSchedule,
+      name: "This is a very long schedule name that should be truncated in the UI to prevent layout issues",
+    },
+    deleteFunction: fn(),
+    updateDefault: fn(),
+    duplicateFunction: fn(),
+    isDeletable: true,
+    redirectUrl: "/availability/7",
+    displayOptions: {
+      hour12: true,
+      weekStart: "Sunday",
+    },
+  },
+};
diff --git a/packages/features/settings/BookerLayoutSelector.stories.tsx b/packages/features/settings/BookerLayoutSelector.stories.tsx
new file mode 100644
index 00000000000000..c12cd2e48d19aa
--- /dev/null
+++ b/packages/features/settings/BookerLayoutSelector.stories.tsx
@@ -0,0 +1,303 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { FormProvider, useForm } from "react-hook-form";
+
+import { BookerLayouts } from "@calcom/prisma/zod-utils";
+import type { BookerLayoutSettings } from "@calcom/prisma/zod-utils";
+
+import { BookerLayoutSelector } from "./BookerLayoutSelector";
+
+// Wrapper component to provide form context
+const FormWrapper = ({
+  children,
+  defaultValues,
+}: {
+  children: React.ReactNode;
+  defaultValues?: any;
+}) => {
+  const methods = useForm({
+    defaultValues: {
+      metadata: {
+        bookerLayouts: defaultValues?.bookerLayouts || {
+          enabledLayouts: [BookerLayouts.MONTH_VIEW, BookerLayouts.WEEK_VIEW, BookerLayouts.COLUMN_VIEW],
+          defaultLayout: BookerLayouts.MONTH_VIEW,
+        },
+      },
+      ...defaultValues,
+    },
+  });
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
+const meta = {
+  component: BookerLayoutSelector,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof BookerLayoutSelector>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <FormWrapper>
+      <BookerLayoutSelector />
+    </FormWrapper>
+  ),
+};
+
+export const WithCustomTitle: Story = {
+  render: () => (
+    <FormWrapper>
+      <BookerLayoutSelector title="Choose Your Layout" description="Select which booking layouts to enable" />
+    </FormWrapper>
+  ),
+};
+
+export const DarkMode: Story = {
+  render: () => (
+    <FormWrapper>
+      <BookerLayoutSelector isDark={true} />
+    </FormWrapper>
+  ),
+};
+
+export const WithOuterBorder: Story = {
+  render: () => (
+    <FormWrapper>
+      <BookerLayoutSelector isOuterBorder={true} />
+    </FormWrapper>
+  ),
+};
+
+export const Loading: Story = {
+  render: () => (
+    <FormWrapper>
+      <BookerLayoutSelector isLoading={true} />
+    </FormWrapper>
+  ),
+};
+
+export const Disabled: Story = {
+  render: () => (
+    <FormWrapper>
+      <BookerLayoutSelector isDisabled={true} />
+    </FormWrapper>
+  ),
+};
+
+export const MonthViewOnly: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        metadata: {
+          bookerLayouts: {
+            enabledLayouts: [BookerLayouts.MONTH_VIEW],
+            defaultLayout: BookerLayouts.MONTH_VIEW,
+          },
+        },
+      }}>
+      <BookerLayoutSelector />
+    </FormWrapper>
+  ),
+};
+
+export const WeekViewDefault: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        metadata: {
+          bookerLayouts: {
+            enabledLayouts: [BookerLayouts.MONTH_VIEW, BookerLayouts.WEEK_VIEW, BookerLayouts.COLUMN_VIEW],
+            defaultLayout: BookerLayouts.WEEK_VIEW,
+          },
+        },
+      }}>
+      <BookerLayoutSelector />
+    </FormWrapper>
+  ),
+};
+
+export const ColumnViewDefault: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        metadata: {
+          bookerLayouts: {
+            enabledLayouts: [BookerLayouts.MONTH_VIEW, BookerLayouts.WEEK_VIEW, BookerLayouts.COLUMN_VIEW],
+            defaultLayout: BookerLayouts.COLUMN_VIEW,
+          },
+        },
+      }}>
+      <BookerLayoutSelector />
+    </FormWrapper>
+  ),
+};
+
+export const TwoLayoutsEnabled: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        metadata: {
+          bookerLayouts: {
+            enabledLayouts: [BookerLayouts.MONTH_VIEW, BookerLayouts.WEEK_VIEW],
+            defaultLayout: BookerLayouts.MONTH_VIEW,
+          },
+        },
+      }}>
+      <BookerLayoutSelector />
+    </FormWrapper>
+  ),
+};
+
+export const WithUserFallback: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        metadata: {
+          bookerLayouts: null,
+        },
+      }}>
+      <BookerLayoutSelector
+        fallbackToUserSettings={true}
+        user={{
+          defaultBookerLayouts: {
+            enabledLayouts: [BookerLayouts.WEEK_VIEW, BookerLayouts.COLUMN_VIEW],
+            defaultLayout: BookerLayouts.WEEK_VIEW,
+          },
+        }}
+      />
+    </FormWrapper>
+  ),
+};
+
+export const WithUserFallbackLoading: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        metadata: {
+          bookerLayouts: null,
+        },
+      }}>
+      <BookerLayoutSelector
+        fallbackToUserSettings={true}
+        isUserLoading={true}
+        user={{
+          defaultBookerLayouts: {
+            enabledLayouts: [BookerLayouts.WEEK_VIEW, BookerLayouts.COLUMN_VIEW],
+            defaultLayout: BookerLayouts.WEEK_VIEW,
+          },
+        }}
+      />
+    </FormWrapper>
+  ),
+};
+
+export const DarkModeWithOuterBorder: Story = {
+  render: () => (
+    <FormWrapper>
+      <BookerLayoutSelector isDark={true} isOuterBorder={true} />
+    </FormWrapper>
+  ),
+};
+
+export const CustomFieldName: Story = {
+  render: () => (
+    <FormWrapper
+      defaultValues={{
+        customBookerLayouts: {
+          enabledLayouts: [BookerLayouts.COLUMN_VIEW],
+          defaultLayout: BookerLayouts.COLUMN_VIEW,
+        },
+      }}>
+      <BookerLayoutSelector name="customBookerLayouts" />
+    </FormWrapper>
+  ),
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const FormContent = () => {
+      const methods = useForm({
+        defaultValues: {
+          metadata: {
+            bookerLayouts: {
+              enabledLayouts: [BookerLayouts.MONTH_VIEW, BookerLayouts.WEEK_VIEW, BookerLayouts.COLUMN_VIEW],
+              defaultLayout: BookerLayouts.MONTH_VIEW,
+            } as BookerLayoutSettings,
+          },
+        },
+      });
+
+      const bookerLayouts = methods.watch("metadata.bookerLayouts");
+
+      return (
+        <FormProvider {...methods}>
+          <div className="space-y-4">
+            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+              <h3 className="mb-2 text-sm font-semibold">Current State:</h3>
+              <div className="space-y-1 text-xs">
+                <p>
+                  Enabled layouts:{" "}
+                  {bookerLayouts?.enabledLayouts?.join(", ") || "None"}
+                </p>
+                <p>Default layout: {bookerLayouts?.defaultLayout || "None"}</p>
+              </div>
+            </div>
+            <BookerLayoutSelector />
+          </div>
+        </FormProvider>
+      );
+    };
+
+    return <FormContent />;
+  },
+};
+
+export const InteractiveDarkMode: Story = {
+  render: () => {
+    const FormContent = () => {
+      const methods = useForm({
+        defaultValues: {
+          metadata: {
+            bookerLayouts: {
+              enabledLayouts: [BookerLayouts.MONTH_VIEW, BookerLayouts.WEEK_VIEW, BookerLayouts.COLUMN_VIEW],
+              defaultLayout: BookerLayouts.MONTH_VIEW,
+            } as BookerLayoutSettings,
+          },
+        },
+      });
+
+      const bookerLayouts = methods.watch("metadata.bookerLayouts");
+
+      return (
+        <FormProvider {...methods}>
+          <div className="space-y-4">
+            <div className="rounded-lg border border-gray-200 bg-gray-50 p-4">
+              <h3 className="mb-2 text-sm font-semibold">Current State:</h3>
+              <div className="space-y-1 text-xs">
+                <p>
+                  Enabled layouts:{" "}
+                  {bookerLayouts?.enabledLayouts?.join(", ") || "None"}
+                </p>
+                <p>Default layout: {bookerLayouts?.defaultLayout || "None"}</p>
+              </div>
+            </div>
+            <BookerLayoutSelector isDark={true} />
+          </div>
+        </FormProvider>
+      );
+    };
+
+    return <FormContent />;
+  },
+};
diff --git a/packages/features/settings/TimezoneChangeDialog.stories.tsx b/packages/features/settings/TimezoneChangeDialog.stories.tsx
new file mode 100644
index 00000000000000..f9d2fee33daba9
--- /dev/null
+++ b/packages/features/settings/TimezoneChangeDialog.stories.tsx
@@ -0,0 +1,365 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { createTRPCReact } from "@trpc/react-query";
+import { SessionProvider } from "next-auth/react";
+import { useState } from "react";
+
+import { Dialog } from "@calcom/features/components/controlled-dialog";
+import { DialogContent, DialogFooter, DialogHeader, DialogClose } from "@calcom/ui/components/dialog";
+import { Button } from "@calcom/ui/components/button";
+
+// Mock the useLocale hook
+jest.mock("@calcom/lib/hooks/useLocale", () => ({
+  useLocale: () => ({
+    t: (key: string, options?: any) => {
+      const translations: Record<string, string> = {
+        update_timezone_question: "Update timezone?",
+        update_timezone_description: `Your current timezone is ${options?.formattedCurrentTz || "America/New_York"}. Do you want to update your timezone?`,
+        dont_update: "Don't update",
+        update_timezone: "Update timezone",
+        we_wont_show_again: "We won't show this again",
+        updated_timezone_to: `Timezone updated to ${options?.formattedCurrentTz || "America/New_York"}`,
+        couldnt_update_timezone: "Couldn't update timezone",
+      };
+      return translations[key] || key;
+    },
+    isLocaleReady: true,
+    i18n: {
+      language: "en",
+    },
+  }),
+}));
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: false,
+    },
+  },
+});
+
+// Mock tRPC client
+const mockTrpc = createTRPCReact<any>();
+
+const createMockTrpcClient = (overrides?: any) => {
+  return mockTrpc.createClient({
+    links: [
+      () =>
+        ({ op }) => {
+          return {
+            subscribe: (observer: any) => {
+              if (op.path === "viewer.me.get") {
+                observer.next({
+                  result: {
+                    data: {
+                      timeZone: "America/Los_Angeles",
+                      id: 1,
+                      name: "Test User",
+                      email: "test@example.com",
+                      ...overrides?.user,
+                    },
+                  },
+                });
+              } else if (op.path === "viewer.me.updateProfile") {
+                observer.next({
+                  result: {
+                    data: {
+                      success: true,
+                    },
+                  },
+                });
+              } else {
+                observer.next({
+                  result: {
+                    data: {},
+                  },
+                });
+              }
+              observer.complete();
+              return {
+                unsubscribe: () => {},
+              };
+            },
+          } as any;
+        },
+    ],
+  });
+};
+
+const mockSession = {
+  user: {
+    id: 1,
+    name: "Test User",
+    email: "test@example.com",
+  },
+  expires: "2099-12-31",
+};
+
+// Internal component for rendering the dialog content
+const TimezoneChangeDialogContent = () => {
+  const t = (key: string, options?: any) => {
+    const translations: Record<string, string> = {
+      update_timezone_question: "Update timezone?",
+      update_timezone_description: `Your current timezone is ${options?.formattedCurrentTz || "America/New_York"}. Do you want to update your timezone?`,
+      dont_update: "Don't update",
+      update_timezone: "Update timezone",
+      we_wont_show_again: "We won't show this again",
+    };
+    return translations[key] || key;
+  };
+
+  const formattedCurrentTz = "America/New_York";
+
+  return (
+    <>
+      <DialogHeader
+        title={t("update_timezone_question")}
+        subtitle={t("update_timezone_description", {
+          formattedCurrentTz,
+          interpolation: { escapeValue: false },
+        })}
+      />
+      <div className="mb-8" />
+      <DialogFooter showDivider>
+        <DialogClose onClick={() => {}} color="secondary">
+          {t("dont_update")}
+        </DialogClose>
+        <DialogClose onClick={() => {}} color="primary">
+          {t("update_timezone")}
+        </DialogClose>
+      </DialogFooter>
+    </>
+  );
+};
+
+const meta = {
+  component: TimezoneChangeDialogContent,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      const mockTrpcClient = createMockTrpcClient();
+      return (
+        <SessionProvider session={mockSession}>
+          <mockTrpc.Provider client={mockTrpcClient} queryClient={queryClient}>
+            <QueryClientProvider client={queryClient}>
+              <Story />
+            </QueryClientProvider>
+          </mockTrpc.Provider>
+        </SessionProvider>
+      );
+    },
+  ],
+} satisfies Meta<typeof TimezoneChangeDialogContent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+
+    return (
+      <div>
+        <Button onClick={() => setOpen(true)}>Open Timezone Dialog</Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent type="creation">
+            <TimezoneChangeDialogContent />
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const Closed: Story = {
+  render: () => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <div>
+        <Button onClick={() => setOpen(true)}>Open Timezone Dialog</Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent type="creation">
+            <TimezoneChangeDialogContent />
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const WithDifferentTimezone: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+
+    const CustomDialogContent = () => {
+      const t = (key: string, options?: any) => {
+        const translations: Record<string, string> = {
+          update_timezone_question: "Update timezone?",
+          update_timezone_description: `Your current timezone is ${options?.formattedCurrentTz || "Europe/London"}. Do you want to update your timezone?`,
+          dont_update: "Don't update",
+          update_timezone: "Update timezone",
+        };
+        return translations[key] || key;
+      };
+
+      const formattedCurrentTz = "Europe/London";
+
+      return (
+        <>
+          <DialogHeader
+            title={t("update_timezone_question")}
+            subtitle={t("update_timezone_description", {
+              formattedCurrentTz,
+              interpolation: { escapeValue: false },
+            })}
+          />
+          <div className="mb-8" />
+          <DialogFooter showDivider>
+            <DialogClose onClick={() => {}} color="secondary">
+              {t("dont_update")}
+            </DialogClose>
+            <DialogClose onClick={() => {}} color="primary">
+              {t("update_timezone")}
+            </DialogClose>
+          </DialogFooter>
+        </>
+      );
+    };
+
+    return (
+      <div>
+        <Button onClick={() => setOpen(true)}>Open Timezone Dialog</Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent type="creation">
+            <CustomDialogContent />
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const WithAsianTimezone: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+
+    const CustomDialogContent = () => {
+      const t = (key: string, options?: any) => {
+        const translations: Record<string, string> = {
+          update_timezone_question: "Update timezone?",
+          update_timezone_description: `Your current timezone is ${options?.formattedCurrentTz || "Asia/Tokyo"}. Do you want to update your timezone?`,
+          dont_update: "Don't update",
+          update_timezone: "Update timezone",
+        };
+        return translations[key] || key;
+      };
+
+      const formattedCurrentTz = "Asia/Tokyo";
+
+      return (
+        <>
+          <DialogHeader
+            title={t("update_timezone_question")}
+            subtitle={t("update_timezone_description", {
+              formattedCurrentTz,
+              interpolation: { escapeValue: false },
+            })}
+          />
+          <div className="mb-8" />
+          <DialogFooter showDivider>
+            <DialogClose onClick={() => {}} color="secondary">
+              {t("dont_update")}
+            </DialogClose>
+            <DialogClose onClick={() => {}} color="primary">
+              {t("update_timezone")}
+            </DialogClose>
+          </DialogFooter>
+        </>
+      );
+    };
+
+    return (
+      <div>
+        <Button onClick={() => setOpen(true)}>Open Timezone Dialog</Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent type="creation">
+            <CustomDialogContent />
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  },
+};
+
+export const InteractionExample: Story = {
+  render: () => {
+    const [open, setOpen] = useState(true);
+    const [timezoneUpdated, setTimezoneUpdated] = useState(false);
+
+    const InteractiveDialogContent = () => {
+      const t = (key: string, options?: any) => {
+        const translations: Record<string, string> = {
+          update_timezone_question: "Update timezone?",
+          update_timezone_description: `Your current timezone is ${options?.formattedCurrentTz || "America/Chicago"}. Do you want to update your timezone?`,
+          dont_update: "Don't update",
+          update_timezone: "Update timezone",
+        };
+        return translations[key] || key;
+      };
+
+      const formattedCurrentTz = "America/Chicago";
+
+      return (
+        <>
+          <DialogHeader
+            title={t("update_timezone_question")}
+            subtitle={t("update_timezone_description", {
+              formattedCurrentTz,
+              interpolation: { escapeValue: false },
+            })}
+          />
+          <div className="mb-8" />
+          <DialogFooter showDivider>
+            <DialogClose
+              onClick={() => {
+                setOpen(false);
+              }}
+              color="secondary">
+              {t("dont_update")}
+            </DialogClose>
+            <DialogClose
+              onClick={() => {
+                setTimezoneUpdated(true);
+                setOpen(false);
+              }}
+              color="primary">
+              {t("update_timezone")}
+            </DialogClose>
+          </DialogFooter>
+        </>
+      );
+    };
+
+    return (
+      <div className="space-y-4">
+        <div className="text-sm">
+          {timezoneUpdated ? (
+            <p className="text-green-600">Timezone updated successfully!</p>
+          ) : (
+            <p className="text-gray-600">Timezone not updated yet</p>
+          )}
+        </div>
+        <Button onClick={() => setOpen(true)}>Open Timezone Dialog</Button>
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogContent type="creation">
+            <InteractiveDialogContent />
+          </DialogContent>
+        </Dialog>
+      </div>
+    );
+  },
+};
diff --git a/packages/features/settings/appDir/SettingsHeader.stories.tsx b/packages/features/settings/appDir/SettingsHeader.stories.tsx
new file mode 100644
index 00000000000000..db606aeef1f4b9
--- /dev/null
+++ b/packages/features/settings/appDir/SettingsHeader.stories.tsx
@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Button } from "@calcom/ui/components/button";
+
+import Header from "./SettingsHeader";
+
+const meta = {
+  component: Header,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Header>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Profile Settings",
+    description: "Manage your profile information and preferences",
+    children: <div className="p-4">Content goes here</div>,
+  },
+};
+
+export const WithBackButton: Story = {
+  args: {
+    title: "Edit Profile",
+    description: "Update your personal information",
+    backButton: true,
+    onBackButtonClick: () => console.log("Back button clicked"),
+    children: <div className="p-4">Edit form content</div>,
+  },
+};
+
+export const WithCTA: Story = {
+  args: {
+    title: "Billing Settings",
+    description: "Manage your subscription and payment methods",
+    CTA: (
+      <Button color="primary" size="sm">
+        Upgrade Plan
+      </Button>
+    ),
+    children: <div className="p-4">Billing details</div>,
+  },
+};
+
+export const WithBackButtonAndCTA: Story = {
+  args: {
+    title: "Team Settings",
+    description: "Configure team members and permissions",
+    backButton: true,
+    onBackButtonClick: () => console.log("Back button clicked"),
+    CTA: (
+      <Button color="primary" size="sm" StartIcon="plus">
+        Add Member
+      </Button>
+    ),
+    children: <div className="p-4">Team management content</div>,
+  },
+};
+
+export const WithBorderInShellHeader: Story = {
+  args: {
+    title: "General Settings",
+    description: "Configure your general preferences",
+    borderInShellHeader: true,
+    children: <div className="p-4">General settings content</div>,
+  },
+};
+
+export const WithBorderAndCTA: Story = {
+  args: {
+    title: "API Keys",
+    description: "Manage your API keys and integrations",
+    borderInShellHeader: true,
+    CTA: (
+      <Button color="secondary" size="sm" StartIcon="key">
+        Generate Key
+      </Button>
+    ),
+    children: <div className="p-4">API keys list</div>,
+  },
+};
+
+export const WithCustomCTAClassName: Story = {
+  args: {
+    title: "Notification Settings",
+    description: "Control how you receive notifications",
+    CTA: (
+      <div className="flex gap-2">
+        <Button color="secondary" size="sm">
+          Cancel
+        </Button>
+        <Button color="primary" size="sm">
+          Save Changes
+        </Button>
+      </div>
+    ),
+    ctaClassName: "flex gap-2",
+    children: <div className="p-4">Notification preferences</div>,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: <div className="p-4">Content that loads after suspension</div>,
+  },
+};
+
+export const LongDescription: Story = {
+  args: {
+    title: "Security Settings",
+    description:
+      "Configure your security preferences including two-factor authentication, password requirements, and session management to keep your account secure",
+    CTA: <Button color="primary">Save</Button>,
+    children: <div className="p-4">Security settings form</div>,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8 w-[800px]">
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Default</h3>
+        <Header title="Profile Settings" description="Manage your profile information">
+          <div className="p-4 text-sm">Content area</div>
+        </Header>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">With Back Button</h3>
+        <Header
+          title="Edit Profile"
+          description="Update your information"
+          backButton={true}
+          onBackButtonClick={() => console.log("Back")}>
+          <div className="p-4 text-sm">Content area</div>
+        </Header>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">With CTA Button</h3>
+        <Header
+          title="Billing"
+          description="Manage subscription"
+          CTA={<Button color="primary">Upgrade</Button>}>
+          <div className="p-4 text-sm">Content area</div>
+        </Header>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">With Border</h3>
+        <Header
+          title="Settings"
+          description="Configure preferences"
+          borderInShellHeader={true}
+          CTA={<Button color="secondary">Save</Button>}>
+          <div className="p-4 text-sm">Content area</div>
+        </Header>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/settings/appDir/SettingsHeaderWithBackButton.stories.tsx b/packages/features/settings/appDir/SettingsHeaderWithBackButton.stories.tsx
new file mode 100644
index 00000000000000..3a2bebcefb250a
--- /dev/null
+++ b/packages/features/settings/appDir/SettingsHeaderWithBackButton.stories.tsx
@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Button } from "@calcom/ui/components/button";
+
+import SettingsHeaderWithBackButton from "./SettingsHeaderWithBackButton";
+
+const meta = {
+  component: SettingsHeaderWithBackButton,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[800px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SettingsHeaderWithBackButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Edit Profile",
+    description: "Update your personal information",
+    children: <div className="p-4">Content goes here</div>,
+  },
+};
+
+export const WithCTA: Story = {
+  args: {
+    title: "Edit Team Settings",
+    description: "Configure team members and permissions",
+    CTA: (
+      <Button color="primary" size="sm">
+        Save Changes
+      </Button>
+    ),
+    children: <div className="p-4">Team settings form</div>,
+  },
+};
+
+export const WithMultipleCTAButtons: Story = {
+  args: {
+    title: "Billing Configuration",
+    description: "Update your payment methods and subscription",
+    CTA: (
+      <div className="flex gap-2">
+        <Button color="secondary" size="sm">
+          Cancel
+        </Button>
+        <Button color="primary" size="sm">
+          Save Changes
+        </Button>
+      </div>
+    ),
+    ctaClassName: "flex gap-2",
+    children: <div className="p-4">Billing form content</div>,
+  },
+};
+
+export const WithBorderInShellHeader: Story = {
+  args: {
+    title: "General Settings",
+    description: "Configure your general preferences",
+    borderInShellHeader: true,
+    children: <div className="p-4">General settings content</div>,
+  },
+};
+
+export const WithBorderAndCTA: Story = {
+  args: {
+    title: "API Configuration",
+    description: "Manage your API keys and integrations",
+    borderInShellHeader: true,
+    CTA: (
+      <Button color="secondary" size="sm" StartIcon="key">
+        Generate Key
+      </Button>
+    ),
+    children: <div className="p-4">API keys list</div>,
+  },
+};
+
+export const WithIconCTA: Story = {
+  args: {
+    title: "Add Team Member",
+    description: "Invite a new member to your team",
+    CTA: (
+      <Button color="primary" size="sm" StartIcon="plus">
+        Add Member
+      </Button>
+    ),
+    children: <div className="p-4">Add member form</div>,
+  },
+};
+
+export const WithCustomCTAClassName: Story = {
+  args: {
+    title: "Notification Preferences",
+    description: "Control how you receive notifications",
+    CTA: (
+      <div className="flex gap-2">
+        <Button color="minimal" size="sm">
+          Reset
+        </Button>
+        <Button color="primary" size="sm">
+          Apply
+        </Button>
+      </div>
+    ),
+    ctaClassName: "flex gap-2",
+    children: <div className="p-4">Notification settings content</div>,
+  },
+};
+
+export const LongDescription: Story = {
+  args: {
+    title: "Security Settings",
+    description:
+      "Configure your security preferences including two-factor authentication, password requirements, and session management to keep your account secure",
+    CTA: <Button color="primary">Save Settings</Button>,
+    children: <div className="p-4">Security settings form</div>,
+  },
+};
+
+export const MinimalContent: Story = {
+  args: {
+    title: "Quick Edit",
+    description: "Make quick changes",
+    children: <div className="p-2 text-sm">Minimal content area</div>,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8 w-[800px]">
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Default</h3>
+        <SettingsHeaderWithBackButton
+          title="Edit Profile"
+          description="Update your personal information">
+          <div className="p-4 text-sm">Content area</div>
+        </SettingsHeaderWithBackButton>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">With CTA Button</h3>
+        <SettingsHeaderWithBackButton
+          title="Team Settings"
+          description="Configure team preferences"
+          CTA={<Button color="primary">Save</Button>}>
+          <div className="p-4 text-sm">Content area</div>
+        </SettingsHeaderWithBackButton>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">With Border</h3>
+        <SettingsHeaderWithBackButton
+          title="API Settings"
+          description="Manage API configuration"
+          borderInShellHeader={true}
+          CTA={<Button color="secondary">Generate</Button>}>
+          <div className="p-4 text-sm">Content area</div>
+        </SettingsHeaderWithBackButton>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">With Multiple CTAs</h3>
+        <SettingsHeaderWithBackButton
+          title="Advanced Settings"
+          description="Configure advanced options"
+          CTA={
+            <div className="flex gap-2">
+              <Button color="minimal">Cancel</Button>
+              <Button color="primary">Apply</Button>
+            </div>
+          }>
+          <div className="p-4 text-sm">Content area</div>
+        </SettingsHeaderWithBackButton>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/features/troubleshooter/components/EventTypeSelect.stories.tsx b/packages/features/troubleshooter/components/EventTypeSelect.stories.tsx
new file mode 100644
index 00000000000000..7ce985a25209ce
--- /dev/null
+++ b/packages/features/troubleshooter/components/EventTypeSelect.stories.tsx
@@ -0,0 +1,321 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { EventTypeSelect } from "./EventTypeSelect";
+
+/**
+ * Mock event types data for stories
+ */
+const mockEventTypes = [
+  {
+    id: 1,
+    title: "15 Min Meeting",
+    slug: "15min",
+    length: 15,
+    team: null,
+  },
+  {
+    id: 2,
+    title: "30 Min Meeting",
+    slug: "30min",
+    length: 30,
+    team: null,
+  },
+  {
+    id: 3,
+    title: "60 Min Meeting",
+    slug: "60min",
+    length: 60,
+    team: null,
+  },
+  {
+    id: 4,
+    title: "Discovery Call",
+    slug: "discovery-call",
+    length: 45,
+    team: null,
+  },
+  {
+    id: 5,
+    title: "Team Standup",
+    slug: "team-standup",
+    length: 15,
+    team: { id: 1, name: "Engineering Team" },
+  },
+  {
+    id: 6,
+    title: "Team Planning Session",
+    slug: "team-planning",
+    length: 90,
+    team: { id: 1, name: "Engineering Team" },
+  },
+];
+
+/**
+ * EventTypeSelect allows users to select from their available event types.
+ * It integrates with the troubleshooter store and displays event types with their durations.
+ *
+ * This component:
+ * - Fetches event types via tRPC
+ * - Syncs selection with the troubleshooter store
+ * - Supports initialization from URL query parameters
+ * - Displays both personal and team event types
+ */
+const meta = {
+  component: EventTypeSelect,
+  parameters: {
+    layout: "centered",
+    mockData: [
+      {
+        url: "/api/trpc/viewer.eventTypes.listWithTeam",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: mockEventTypes,
+          },
+        },
+      },
+    ],
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof EventTypeSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default state showing the event type selector with multiple options.
+ */
+export const Default: Story = {};
+
+/**
+ * Shows the component in a loading state while fetching event types.
+ */
+export const Loading: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.eventTypes.listWithTeam",
+        method: "GET",
+        delay: 999999, // Simulate infinite loading
+      },
+    ],
+  },
+};
+
+/**
+ * Shows the component when there are no event types available.
+ * The select is disabled in this state.
+ */
+export const NoEventTypes: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.eventTypes.listWithTeam",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: [],
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Shows a user with only one event type.
+ */
+export const SingleEventType: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.eventTypes.listWithTeam",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: [mockEventTypes[0]],
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Shows only personal event types (no team events).
+ */
+export const PersonalEventTypesOnly: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.eventTypes.listWithTeam",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: mockEventTypes.filter((e) => !e.team),
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Shows only team event types.
+ */
+export const TeamEventTypesOnly: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.eventTypes.listWithTeam",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: mockEventTypes.filter((e) => e.team),
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Shows a large number of event types to test scrolling behavior.
+ */
+export const ManyEventTypes: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.eventTypes.listWithTeam",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: [
+              ...mockEventTypes,
+              {
+                id: 7,
+                title: "Coffee Chat",
+                slug: "coffee-chat",
+                length: 30,
+                team: null,
+              },
+              {
+                id: 8,
+                title: "Quick Sync",
+                slug: "quick-sync",
+                length: 15,
+                team: null,
+              },
+              {
+                id: 9,
+                title: "Code Review",
+                slug: "code-review",
+                length: 45,
+                team: { id: 1, name: "Engineering Team" },
+              },
+              {
+                id: 10,
+                title: "Product Demo",
+                slug: "product-demo",
+                length: 60,
+                team: { id: 2, name: "Product Team" },
+              },
+              {
+                id: 11,
+                title: "Strategy Meeting",
+                slug: "strategy-meeting",
+                length: 120,
+                team: { id: 3, name: "Leadership Team" },
+              },
+              {
+                id: 12,
+                title: "1-on-1",
+                slug: "one-on-one",
+                length: 30,
+                team: null,
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Shows event types with varying durations from short to long.
+ */
+export const VariedDurations: Story = {
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.eventTypes.listWithTeam",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: [
+              {
+                id: 1,
+                title: "Quick Question",
+                slug: "quick-question",
+                length: 10,
+                team: null,
+              },
+              {
+                id: 2,
+                title: "Standard Meeting",
+                slug: "standard-meeting",
+                length: 30,
+                team: null,
+              },
+              {
+                id: 3,
+                title: "Deep Dive",
+                slug: "deep-dive",
+                length: 90,
+                team: null,
+              },
+              {
+                id: 4,
+                title: "Workshop",
+                slug: "workshop",
+                length: 180,
+                team: null,
+              },
+            ],
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Example showing the component in a form context with other fields.
+ */
+export const InFormContext: Story = {
+  render: () => (
+    <div className="space-y-4 w-[400px]">
+      <div className="text-sm font-medium">Schedule a Troubleshooting Session</div>
+      <EventTypeSelect />
+      <div className="text-subtle text-xs">
+        Select an event type to begin troubleshooting availability issues.
+      </div>
+    </div>
+  ),
+};
diff --git a/packages/features/troubleshooter/components/LargeCalendar.stories.tsx b/packages/features/troubleshooter/components/LargeCalendar.stories.tsx
new file mode 100644
index 00000000000000..731bb403cebbff
--- /dev/null
+++ b/packages/features/troubleshooter/components/LargeCalendar.stories.tsx
@@ -0,0 +1,620 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import dayjs from "@calcom/dayjs";
+import type { CalendarAvailableTimeslots } from "@calcom/features/calendars/weeklyview/types/state";
+import { BookingStatus } from "@calcom/prisma/enums";
+
+import { LargeCalendar } from "./LargeCalendar";
+
+// Mock next-auth session
+jest.mock("next-auth/react", () => ({
+  useSession: () => ({
+    data: {
+      user: {
+        username: "testuser",
+        org: {
+          slug: "test-org",
+        },
+      },
+    },
+    status: "authenticated",
+  }),
+}));
+
+// Mock troubleshooter store
+const mockTroubleshooterStore = {
+  selectedDate: dayjs().format("YYYY-MM-DD"),
+  event: {
+    id: 1,
+    slug: "30min",
+    duration: 30,
+    teamId: null,
+  },
+  calendarToColorMap: {
+    "calendar-1": "#FF5733",
+    "calendar-2": "#33C1FF",
+    "calendar-3": "#7CFC00",
+  },
+};
+
+jest.mock("../store", () => ({
+  useTroubleshooterStore: (selector: any) => {
+    if (typeof selector === "function") {
+      return selector(mockTroubleshooterStore);
+    }
+    return mockTroubleshooterStore;
+  },
+}));
+
+// Mock time preferences
+jest.mock("../../bookings/lib/timePreferences", () => ({
+  useTimePreferences: () => ({
+    timezone: "America/New_York",
+  }),
+}));
+
+// Mock tRPC
+const mockBusyEvents = [
+  {
+    title: "Team Standup",
+    start: dayjs().hour(9).minute(0).toISOString(),
+    end: dayjs().hour(9).minute(30).toISOString(),
+    source: "calendar-1",
+  },
+  {
+    title: "Client Meeting",
+    start: dayjs().hour(14).minute(0).toISOString(),
+    end: dayjs().hour(15).minute(0).toISOString(),
+    source: "calendar-2",
+  },
+  {
+    title: "Code Review",
+    start: dayjs().add(1, "day").hour(10).minute(0).toISOString(),
+    end: dayjs().add(1, "day").hour(11).minute(0).toISOString(),
+    source: "calendar-3",
+  },
+];
+
+jest.mock("@calcom/trpc/react", () => ({
+  trpc: {
+    viewer: {
+      availability: {
+        user: {
+          useQuery: () => ({
+            data: {
+              busy: mockBusyEvents,
+              dateOverrides: [],
+              workingHours: [
+                {
+                  days: [0, 1, 2, 3, 4, 5, 6],
+                  startTime: 540, // 9:00 AM
+                  endTime: 1020, // 5:00 PM
+                },
+              ],
+            },
+            isLoading: false,
+          }),
+        },
+      },
+    },
+  },
+}));
+
+// Mock useSchedule
+jest.mock("../../schedules/lib/use-schedule/useSchedule", () => ({
+  useSchedule: () => ({
+    data: {
+      slots: {},
+    },
+    isLoading: false,
+  }),
+}));
+
+// Helper function to generate available timeslots
+const generateAvailableTimeslots = (days: number, startDate: Date): CalendarAvailableTimeslots => {
+  const slots: CalendarAvailableTimeslots = {};
+
+  for (let i = 0; i < days; i++) {
+    const date = dayjs(startDate).add(i, "day");
+    const dateKey = date.format("YYYY-MM-DD");
+
+    // Generate morning slots (9 AM - 12 PM)
+    const morningSlots = [];
+    for (let hour = 9; hour < 12; hour++) {
+      morningSlots.push({
+        start: date.hour(hour).minute(0).toDate(),
+        end: date.hour(hour).minute(30).toDate(),
+      });
+      morningSlots.push({
+        start: date.hour(hour).minute(30).toDate(),
+        end: date.hour(hour + 1).minute(0).toDate(),
+      });
+    }
+
+    // Generate afternoon slots (1 PM - 5 PM)
+    const afternoonSlots = [];
+    for (let hour = 13; hour < 17; hour++) {
+      afternoonSlots.push({
+        start: date.hour(hour).minute(0).toDate(),
+        end: date.hour(hour).minute(30).toDate(),
+      });
+      afternoonSlots.push({
+        start: date.hour(hour).minute(30).toDate(),
+        end: date.hour(hour + 1).minute(0).toDate(),
+      });
+    }
+
+    slots[dateKey] = [...morningSlots, ...afternoonSlots];
+  }
+
+  return slots;
+};
+
+// Mock useAvailableTimeSlots
+let mockAvailableSlots: CalendarAvailableTimeslots = generateAvailableTimeslots(7, new Date());
+
+jest.mock("@calcom/features/bookings/Booker/components/hooks/useAvailableTimeSlots", () => ({
+  useAvailableTimeSlots: () => mockAvailableSlots,
+}));
+
+/**
+ * LargeCalendar displays a weekly calendar view with busy times, available slots,
+ * and date overrides for troubleshooting availability issues.
+ *
+ * This component:
+ * - Shows busy events from connected calendars
+ * - Displays available time slots for booking
+ * - Highlights date overrides and working hours
+ * - Supports multiple days view (configurable via extraDays prop)
+ * - Color-codes events by calendar source
+ */
+const meta = {
+  component: LargeCalendar,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    extraDays: {
+      description: "Number of days to display in the calendar view",
+      control: { type: "number", min: 1, max: 30 },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[800px] w-[1200px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof LargeCalendar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * Default 7-day calendar view showing busy events and available slots
+ */
+export const Default: Story = {
+  args: {
+    extraDays: 7,
+  },
+};
+
+/**
+ * Single day view - useful for detailed day analysis
+ */
+export const SingleDay: Story = {
+  args: {
+    extraDays: 1,
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[800px] w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Three-day view - compact view for shorter time range
+ */
+export const ThreeDays: Story = {
+  args: {
+    extraDays: 3,
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[800px] w-[900px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Two-week view - extended view for longer range planning
+ */
+export const TwoWeeks: Story = {
+  args: {
+    extraDays: 14,
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[800px] w-full max-w-[1600px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Full month view (30 days)
+ */
+export const FullMonth: Story = {
+  args: {
+    extraDays: 30,
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-[800px] w-full max-w-[2000px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Calendar with no busy events - shows only available slots
+ */
+export const NoBusyEvents: Story = {
+  args: {
+    extraDays: 7,
+  },
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.availability.user",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: {
+              busy: [],
+              dateOverrides: [],
+              workingHours: [
+                {
+                  days: [0, 1, 2, 3, 4, 5, 6],
+                  startTime: 540,
+                  endTime: 1020,
+                },
+              ],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Heavily booked calendar - many busy time slots
+ */
+export const HeavilyBooked: Story = {
+  args: {
+    extraDays: 7,
+  },
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.availability.user",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: {
+              busy: [
+                ...mockBusyEvents,
+                {
+                  title: "Morning Sync",
+                  start: dayjs().hour(8).minute(0).toISOString(),
+                  end: dayjs().hour(8).minute(30).toISOString(),
+                  source: "calendar-1",
+                },
+                {
+                  title: "Lunch Meeting",
+                  start: dayjs().hour(12).minute(0).toISOString(),
+                  end: dayjs().hour(13).minute(0).toISOString(),
+                  source: "calendar-2",
+                },
+                {
+                  title: "Planning Session",
+                  start: dayjs().hour(16).minute(0).toISOString(),
+                  end: dayjs().hour(17).minute(30).toISOString(),
+                  source: "calendar-3",
+                },
+                {
+                  title: "Weekly Review",
+                  start: dayjs().add(2, "day").hour(9).minute(0).toISOString(),
+                  end: dayjs().add(2, "day").hour(10).minute(30).toISOString(),
+                  source: "calendar-1",
+                },
+                {
+                  title: "Product Demo",
+                  start: dayjs().add(2, "day").hour(14).minute(0).toISOString(),
+                  end: dayjs().add(2, "day").hour(15).minute(30).toISOString(),
+                  source: "calendar-2",
+                },
+              ],
+              dateOverrides: [],
+              workingHours: [
+                {
+                  days: [0, 1, 2, 3, 4, 5, 6],
+                  startTime: 540,
+                  endTime: 1020,
+                },
+              ],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Calendar with limited working hours (10 AM - 2 PM only)
+ */
+export const LimitedWorkingHours: Story = {
+  args: {
+    extraDays: 7,
+  },
+  decorators: [
+    (Story) => {
+      // Mock limited availability slots
+      mockAvailableSlots = (() => {
+        const slots: CalendarAvailableTimeslots = {};
+        const startDate = new Date();
+
+        for (let i = 0; i < 7; i++) {
+          const date = dayjs(startDate).add(i, "day");
+          const dateKey = date.format("YYYY-MM-DD");
+          const limitedSlots = [];
+
+          // Only 10 AM - 2 PM
+          for (let hour = 10; hour < 14; hour++) {
+            limitedSlots.push({
+              start: date.hour(hour).minute(0).toDate(),
+              end: date.hour(hour).minute(30).toDate(),
+            });
+            limitedSlots.push({
+              start: date.hour(hour).minute(30).toDate(),
+              end: date.hour(hour + 1).minute(0).toDate(),
+            });
+          }
+
+          slots[dateKey] = limitedSlots;
+        }
+
+        return slots;
+      })();
+
+      return (
+        <div className="h-[800px] w-[1200px]">
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+/**
+ * Weekdays only availability (Monday - Friday)
+ */
+export const WeekdaysOnly: Story = {
+  args: {
+    extraDays: 7,
+  },
+  decorators: [
+    (Story) => {
+      mockAvailableSlots = (() => {
+        const slots: CalendarAvailableTimeslots = {};
+        const startDate = new Date();
+
+        for (let i = 0; i < 7; i++) {
+          const date = dayjs(startDate).add(i, "day");
+          const dayOfWeek = date.day();
+
+          // Only weekdays (1-5, Mon-Fri)
+          if (dayOfWeek >= 1 && dayOfWeek <= 5) {
+            const dateKey = date.format("YYYY-MM-DD");
+            const weekdaySlots = [];
+
+            for (let hour = 9; hour < 17; hour++) {
+              weekdaySlots.push({
+                start: date.hour(hour).minute(0).toDate(),
+                end: date.hour(hour).minute(30).toDate(),
+              });
+              weekdaySlots.push({
+                start: date.hour(hour).minute(30).toDate(),
+                end: date.hour(hour + 1).minute(0).toDate(),
+              });
+            }
+
+            slots[dateKey] = weekdaySlots;
+          }
+        }
+
+        return slots;
+      })();
+
+      return (
+        <div className="h-[800px] w-[1200px]">
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+/**
+ * Calendar with date overrides
+ */
+export const WithDateOverrides: Story = {
+  args: {
+    extraDays: 7,
+  },
+  parameters: {
+    mockData: [
+      {
+        url: "/api/trpc/viewer.availability.user",
+        method: "GET",
+        status: 200,
+        response: {
+          result: {
+            data: {
+              busy: mockBusyEvents,
+              dateOverrides: [
+                {
+                  start: dayjs().add(3, "day").toISOString(),
+                  end: dayjs().add(3, "day").toISOString(),
+                },
+              ],
+              workingHours: [
+                {
+                  days: [0, 1, 2, 3, 4, 5, 6],
+                  startTime: 540,
+                  endTime: 1020,
+                },
+              ],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+
+/**
+ * Early morning availability (6 AM - 12 PM)
+ */
+export const EarlyMorning: Story = {
+  args: {
+    extraDays: 7,
+  },
+  decorators: [
+    (Story) => {
+      mockAvailableSlots = (() => {
+        const slots: CalendarAvailableTimeslots = {};
+        const startDate = new Date();
+
+        for (let i = 0; i < 7; i++) {
+          const date = dayjs(startDate).add(i, "day");
+          const dateKey = date.format("YYYY-MM-DD");
+          const morningSlots = [];
+
+          for (let hour = 6; hour < 12; hour++) {
+            morningSlots.push({
+              start: date.hour(hour).minute(0).toDate(),
+              end: date.hour(hour).minute(30).toDate(),
+            });
+            morningSlots.push({
+              start: date.hour(hour).minute(30).toDate(),
+              end: date.hour(hour + 1).minute(0).toDate(),
+            });
+          }
+
+          slots[dateKey] = morningSlots;
+        }
+
+        return slots;
+      })();
+
+      return (
+        <div className="h-[800px] w-[1200px]">
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+/**
+ * Evening availability (2 PM - 10 PM)
+ */
+export const Evening: Story = {
+  args: {
+    extraDays: 7,
+  },
+  decorators: [
+    (Story) => {
+      mockAvailableSlots = (() => {
+        const slots: CalendarAvailableTimeslots = {};
+        const startDate = new Date();
+
+        for (let i = 0; i < 7; i++) {
+          const date = dayjs(startDate).add(i, "day");
+          const dateKey = date.format("YYYY-MM-DD");
+          const eveningSlots = [];
+
+          for (let hour = 14; hour < 22; hour++) {
+            eveningSlots.push({
+              start: date.hour(hour).minute(0).toDate(),
+              end: date.hour(hour).minute(30).toDate(),
+            });
+            eveningSlots.push({
+              start: date.hour(hour).minute(30).toDate(),
+              end: date.hour(hour + 1).minute(0).toDate(),
+            });
+          }
+
+          slots[dateKey] = eveningSlots;
+        }
+
+        return slots;
+      })();
+
+      return (
+        <div className="h-[800px] w-[1200px]">
+          <Story />
+        </div>
+      );
+    },
+  ],
+};
+
+/**
+ * Comparison view showing multiple calendar scenarios
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Default - 7 Days</h3>
+        <div className="h-[600px] w-full border rounded-lg overflow-hidden">
+          <LargeCalendar extraDays={7} />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Single Day View</h3>
+        <div className="h-[600px] w-full border rounded-lg overflow-hidden">
+          <LargeCalendar extraDays={1} />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Two Week View</h3>
+        <div className="h-[600px] w-full border rounded-lg overflow-hidden">
+          <LargeCalendar extraDays={14} />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [],
+};
diff --git a/packages/features/troubleshooter/components/TroubleshooterHeader.stories.tsx b/packages/features/troubleshooter/components/TroubleshooterHeader.stories.tsx
new file mode 100644
index 00000000000000..e868701e08a2e7
--- /dev/null
+++ b/packages/features/troubleshooter/components/TroubleshooterHeader.stories.tsx
@@ -0,0 +1,219 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import dayjs from "@calcom/dayjs";
+
+import { TroubleshooterHeader } from "./TroubleshooterHeader";
+
+// Mock the useLocale hook
+const mockUseLocale = () => ({
+  t: (key: string) => {
+    const translations: Record<string, string> = {
+      today: "Today",
+    };
+    return translations[key] || key;
+  },
+  i18n: {
+    language: "en",
+  },
+});
+
+// Mock the store with default values
+const createMockStore = (selectedDate: string) => (selector: any) => {
+  const state = {
+    selectedDate,
+    setSelectedDate: fn((date: string) => console.log("setSelectedDate", date)),
+    addToSelectedDate: fn((days: number) => console.log("addToSelectedDate", days)),
+  };
+  return selector(state);
+};
+
+// Mock modules
+jest.mock("@calcom/lib/hooks/useLocale", () => ({
+  useLocale: mockUseLocale,
+}));
+
+jest.mock("../store", () => ({
+  useTroubleshooterStore: createMockStore(dayjs().format("YYYY-MM-DD")),
+}));
+
+const meta = {
+  component: TroubleshooterHeader,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    extraDays: {
+      control: "number",
+      description: "Number of days to show in the date range",
+    },
+    isMobile: {
+      control: "boolean",
+      description: "Whether the component is displayed on mobile (returns null when true)",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TroubleshooterHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    extraDays: 7,
+    isMobile: false,
+  },
+};
+
+export const SingleDay: Story = {
+  args: {
+    extraDays: 1,
+    isMobile: false,
+  },
+};
+
+export const ThreeDays: Story = {
+  args: {
+    extraDays: 3,
+    isMobile: false,
+  },
+};
+
+export const TwoWeeks: Story = {
+  args: {
+    extraDays: 14,
+    isMobile: false,
+  },
+};
+
+export const Month: Story = {
+  args: {
+    extraDays: 30,
+    isMobile: false,
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    extraDays: 7,
+    isMobile: true,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "On mobile, the component returns null and doesn't render anything.",
+      },
+    },
+  },
+};
+
+export const CrossMonthRange: Story = {
+  args: {
+    extraDays: 14,
+    isMobile: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When the date range spans across different months, both month names are displayed.",
+      },
+    },
+  },
+  render: (args) => {
+    // Temporarily override the mock for this story
+    const originalMock = require("../store").useTroubleshooterStore;
+    const endOfMonthDate = dayjs().endOf("month").subtract(5, "days").format("YYYY-MM-DD");
+
+    jest.mock("../store", () => ({
+      useTroubleshooterStore: createMockStore(endOfMonthDate),
+    }));
+
+    return <TroubleshooterHeader {...args} />;
+  },
+};
+
+export const WithTodayButton: Story = {
+  args: {
+    extraDays: 7,
+    isMobile: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "When the selected date is more than 3 days away from today, a 'Today' button appears to quickly jump back to the current date.",
+      },
+    },
+  },
+  render: (args) => {
+    // Temporarily override the mock for this story
+    const pastDate = dayjs().subtract(10, "days").format("YYYY-MM-DD");
+
+    jest.mock("../store", () => ({
+      useTroubleshooterStore: createMockStore(pastDate),
+    }));
+
+    return <TroubleshooterHeader {...args} />;
+  },
+};
+
+export const InteractiveNavigation: Story = {
+  args: {
+    extraDays: 7,
+    isMobile: false,
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Use the chevron buttons to navigate between date ranges. The navigation buttons will add or subtract the number of extraDays.",
+      },
+    },
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="space-y-8 p-8">
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Default - 7 Days</h3>
+        <div className="border rounded-lg overflow-hidden">
+          <TroubleshooterHeader extraDays={7} isMobile={false} />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Single Day</h3>
+        <div className="border rounded-lg overflow-hidden">
+          <TroubleshooterHeader extraDays={1} isMobile={false} />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Two Weeks</h3>
+        <div className="border rounded-lg overflow-hidden">
+          <TroubleshooterHeader extraDays={14} isMobile={false} />
+        </div>
+      </div>
+
+      <div>
+        <h3 className="text-sm font-semibold mb-4">Month</h3>
+        <div className="border rounded-lg overflow-hidden">
+          <TroubleshooterHeader extraDays={30} isMobile={false} />
+        </div>
+      </div>
+    </div>
+  ),
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [],
+};
diff --git a/packages/features/troubleshooter/components/TroubleshooterListItemContainer.stories.tsx b/packages/features/troubleshooter/components/TroubleshooterListItemContainer.stories.tsx
new file mode 100644
index 00000000000000..45a336c89ca8ac
--- /dev/null
+++ b/packages/features/troubleshooter/components/TroubleshooterListItemContainer.stories.tsx
@@ -0,0 +1,299 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { Badge } from "@calcom/ui/components/badge";
+import { Button } from "@calcom/ui/components/button";
+import { Icon } from "@calcom/ui/components/icon";
+
+import { TroubleshooterListItemContainer, TroubleshooterListItemHeader } from "./TroubleshooterListItemContainer";
+
+const meta = {
+  component: TroubleshooterListItemContainer,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      description: "The main title text",
+      control: { type: "text" },
+    },
+    subtitle: {
+      description: "Optional subtitle text",
+      control: { type: "text" },
+    },
+    prefixSlot: {
+      description: "Content to display before the title",
+      control: false,
+    },
+    suffixSlot: {
+      description: "Content to display after the title",
+      control: false,
+    },
+    className: {
+      description: "Additional CSS classes",
+      control: { type: "text" },
+    },
+    children: {
+      description: "Content to display in the container body",
+      control: false,
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof TroubleshooterListItemContainer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    title: "Default Item",
+    children: <p className="text-sm">This is the content area of the troubleshooter item.</p>,
+  },
+};
+
+export const WithSubtitle: Story = {
+  args: {
+    title: "Item with Subtitle",
+    subtitle: "Additional information here",
+    children: (
+      <div className="space-y-2">
+        <p className="text-sm">Main content with subtitle example.</p>
+        <p className="text-sm text-subtle">This shows how subtitles work in the header.</p>
+      </div>
+    ),
+  },
+};
+
+export const WithPrefixIcon: Story = {
+  args: {
+    title: "Calendar Integration",
+    subtitle: "Connected",
+    prefixSlot: <div className="h-4 w-4 self-center rounded-[4px] bg-blue-500" />,
+    children: (
+      <div className="space-y-2">
+        <p className="text-sm">Calendar integration settings and options.</p>
+        <p className="text-sm text-subtle">Sync your events across all calendars.</p>
+      </div>
+    ),
+  },
+};
+
+export const WithBadge: Story = {
+  args: {
+    title: "Google Calendar",
+    subtitle: "google@calendar.com",
+    prefixSlot: <div className="h-4 w-4 self-center rounded-[4px] bg-green-500" />,
+    suffixSlot: (
+      <Badge variant="green" withDot size="sm">
+        Connected
+      </Badge>
+    ),
+    children: (
+      <div className="space-y-2">
+        <p className="text-sm">Your Google Calendar is successfully connected.</p>
+        <p className="text-sm text-subtle">Last synced: 2 minutes ago</p>
+      </div>
+    ),
+  },
+};
+
+export const WithActionButton: Story = {
+  args: {
+    title: "Availability Schedule",
+    subtitle: "Working Hours",
+    prefixSlot: <div className="h-4 w-4 rounded-[4px] bg-black" />,
+    suffixSlot: (
+      <Button size="sm" color="secondary">
+        Edit
+      </Button>
+    ),
+    children: (
+      <div className="space-y-2">
+        <p className="text-sm">Monday - Friday: 9:00 AM - 5:00 PM</p>
+        <p className="text-sm text-subtle">Configure your availability settings</p>
+      </div>
+    ),
+  },
+};
+
+export const WithEditBadge: Story = {
+  args: {
+    title: "Event Schedule",
+    prefixSlot: <div className="h-4 w-4 rounded-[4px] bg-black" />,
+    suffixSlot: (
+      <Badge color="orange" size="sm" className="hover:cursor-pointer">
+        Edit
+      </Badge>
+    ),
+    className: "group",
+    children: (
+      <div className="space-y-2">
+        <p className="text-sm">Customize your event scheduling options.</p>
+        <p className="text-sm text-subtle">Click edit to modify settings</p>
+      </div>
+    ),
+  },
+};
+
+export const DisconnectedState: Story = {
+  args: {
+    title: "Outlook Calendar",
+    subtitle: "outlook@email.com",
+    prefixSlot: <div className="h-4 w-4 self-center rounded-[4px] bg-red-500" />,
+    suffixSlot: (
+      <Badge variant="red" withDot size="sm">
+        Disconnected
+      </Badge>
+    ),
+    children: (
+      <div className="space-y-2">
+        <p className="text-sm text-error">Your Outlook Calendar connection has been lost.</p>
+        <Button size="sm" color="primary">
+          Reconnect
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const WithIconPrefix: Story = {
+  args: {
+    title: "Notifications",
+    subtitle: "Email & SMS alerts",
+    prefixSlot: <Icon name="bell" className="h-4 w-4 self-center text-brand-default" />,
+    suffixSlot: (
+      <Badge variant="gray" size="sm">
+        Enabled
+      </Badge>
+    ),
+    children: (
+      <div className="space-y-2">
+        <p className="text-sm">Manage your notification preferences.</p>
+        <div className="flex gap-2">
+          <Button size="sm" color="secondary">
+            Configure
+          </Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const MultipleItems: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <TroubleshooterListItemContainer
+        title="Google Calendar"
+        subtitle="google@calendar.com"
+        prefixSlot={<div className="h-4 w-4 self-center rounded-[4px] bg-blue-500" />}
+        suffixSlot={
+          <Badge variant="green" withDot size="sm">
+            Connected
+          </Badge>
+        }>
+        <p className="text-sm">Calendar synced successfully.</p>
+      </TroubleshooterListItemContainer>
+
+      <TroubleshooterListItemContainer
+        title="Outlook Calendar"
+        subtitle="outlook@email.com"
+        prefixSlot={<div className="h-4 w-4 self-center rounded-[4px] bg-blue-600" />}
+        suffixSlot={
+          <Badge variant="green" withDot size="sm">
+            Connected
+          </Badge>
+        }>
+        <p className="text-sm">Calendar synced successfully.</p>
+      </TroubleshooterListItemContainer>
+
+      <TroubleshooterListItemContainer
+        title="Apple Calendar"
+        subtitle="apple@icloud.com"
+        prefixSlot={<div className="h-4 w-4 self-center rounded-[4px] bg-gray-500" />}
+        suffixSlot={
+          <Badge variant="red" withDot size="sm">
+            Disconnected
+          </Badge>
+        }>
+        <p className="text-sm text-error">Connection failed. Please reconnect.</p>
+      </TroubleshooterListItemContainer>
+    </div>
+  ),
+};
+
+export const HeaderOnly: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-0">
+      <TroubleshooterListItemHeader
+        title="First Item"
+        subtitle="google@calendar.com"
+        prefixSlot={<div className="h-4 w-4 self-center rounded-[4px] bg-blue-500" />}
+        suffixSlot={
+          <Badge variant="green" withDot size="sm">
+            Connected
+          </Badge>
+        }
+      />
+      <TroubleshooterListItemHeader
+        title="Second Item"
+        subtitle="outlook@email.com"
+        prefixSlot={<div className="h-4 w-4 self-center rounded-[4px] bg-blue-600" />}
+        suffixSlot={
+          <Badge variant="green" withDot size="sm">
+            Connected
+          </Badge>
+        }
+      />
+      <TroubleshooterListItemHeader
+        title="Third Item"
+        subtitle="apple@icloud.com"
+        prefixSlot={<div className="h-4 w-4 self-center rounded-[4px] bg-gray-500" />}
+        suffixSlot={
+          <Badge variant="red" withDot size="sm">
+            Disconnected
+          </Badge>
+        }
+        className="border-b"
+      />
+    </div>
+  ),
+};
+
+export const RichContent: Story = {
+  args: {
+    title: "Advanced Configuration",
+    subtitle: "System settings",
+    prefixSlot: <Icon name="settings" className="h-4 w-4 self-center text-brand-default" />,
+    suffixSlot: (
+      <Badge variant="blue" size="sm">
+        Active
+      </Badge>
+    ),
+    children: (
+      <div className="space-y-3">
+        <div>
+          <p className="text-sm font-medium">Current Settings</p>
+          <ul className="mt-2 space-y-1 text-sm text-subtle">
+            <li>- Timezone: UTC-8</li>
+            <li>- Buffer time: 15 minutes</li>
+            <li>- Max bookings per day: 8</li>
+          </ul>
+        </div>
+        <div className="flex gap-2">
+          <Button size="sm" color="primary">
+            Update Settings
+          </Button>
+          <Button size="sm" color="secondary">
+            Reset to Default
+          </Button>
+        </div>
+      </div>
+    ),
+  },
+};
diff --git a/packages/ui/components/address/Fields.stories.tsx b/packages/ui/components/address/Fields.stories.tsx
new file mode 100644
index 00000000000000..c4a708396128d6
--- /dev/null
+++ b/packages/ui/components/address/Fields.stories.tsx
@@ -0,0 +1,315 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useForm } from "react-hook-form";
+
+import {
+  Input,
+  Label,
+  InputLeading,
+  TextField,
+  PasswordField,
+  EmailInput,
+  EmailField,
+  TextArea,
+  TextAreaField,
+  Form,
+  FieldsetLegend,
+  InputGroupBox,
+} from "./Fields";
+
+const meta = {
+  title: "Address/Fields",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta;
+
+export default meta;
+
+// Input Component Stories
+export const BasicInput: StoryObj<typeof Input> = {
+  name: "Basic Input",
+  render: () => <Input name="basic" placeholder="Enter text..." />,
+};
+
+export const InputWithValue: StoryObj<typeof Input> = {
+  name: "Input with Value",
+  render: () => <Input name="withValue" defaultValue="Sample text" />,
+};
+
+export const DisabledInput: StoryObj<typeof Input> = {
+  name: "Disabled Input",
+  render: () => <Input name="disabled" placeholder="Disabled input" disabled />,
+};
+
+// Label Component Stories
+export const BasicLabel: StoryObj<typeof Label> = {
+  name: "Basic Label",
+  render: () => <Label htmlFor="example">Example Label</Label>,
+};
+
+export const LabelWithInput: StoryObj<typeof Label> = {
+  name: "Label with Input",
+  render: () => (
+    <div>
+      <Label htmlFor="example-input">Full Name</Label>
+      <Input id="example-input" name="fullName" placeholder="John Doe" />
+    </div>
+  ),
+};
+
+// InputLeading Component Stories
+export const InputLeadingExample: StoryObj<typeof InputLeading> = {
+  name: "Input Leading",
+  render: () => (
+    <div className="flex">
+      <InputLeading>https://</InputLeading>
+      <Input name="website" className="rounded-l-none mt-0" placeholder="example.com" />
+    </div>
+  ),
+};
+
+// TextField Component Stories
+export const BasicTextField: StoryObj<typeof TextField> = {
+  name: "Basic TextField",
+  render: () => {
+    const methods = useForm();
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <TextField name="username" label="Username" placeholder="Enter username" />
+      </Form>
+    );
+  },
+};
+
+export const TextFieldWithAddOnLeading: StoryObj<typeof TextField> = {
+  name: "TextField with Leading Add-on",
+  render: () => {
+    const methods = useForm();
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <TextField
+          name="website"
+          label="Website"
+          addOnLeading={<InputLeading>https://</InputLeading>}
+          placeholder="example.com"
+        />
+      </Form>
+    );
+  },
+};
+
+export const TextFieldWithHint: StoryObj<typeof TextField> = {
+  name: "TextField with Hint",
+  render: () => {
+    const methods = useForm();
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <TextField
+          name="slug"
+          label="Event Slug"
+          placeholder="my-event"
+          hint={<p className="mt-1 text-sm text-gray-500">This will be part of your event URL</p>}
+        />
+      </Form>
+    );
+  },
+};
+
+export const TextFieldWithError: StoryObj<typeof TextField> = {
+  name: "TextField with Error",
+  render: () => {
+    const methods = useForm();
+    methods.setError("errorField", {
+      type: "manual",
+      message: "This field is required",
+    });
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <TextField name="errorField" label="Field with Error" />
+      </Form>
+    );
+  },
+};
+
+// PasswordField Component Stories
+export const BasicPasswordField: StoryObj<typeof PasswordField> = {
+  name: "Basic Password Field",
+  render: () => {
+    const methods = useForm();
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <PasswordField name="password" label="Password" />
+      </Form>
+    );
+  },
+};
+
+// EmailInput Component Stories
+export const BasicEmailInput: StoryObj<typeof EmailInput> = {
+  name: "Basic Email Input",
+  render: () => <EmailInput name="email" placeholder="you@example.com" />,
+};
+
+// EmailField Component Stories
+export const BasicEmailField: StoryObj<typeof EmailField> = {
+  name: "Basic Email Field",
+  render: () => {
+    const methods = useForm();
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <EmailField name="email" label="Email Address" placeholder="you@example.com" />
+      </Form>
+    );
+  },
+};
+
+// TextArea Component Stories
+export const BasicTextArea: StoryObj<typeof TextArea> = {
+  name: "Basic TextArea",
+  render: () => <TextArea name="description" placeholder="Enter description..." rows={4} />,
+};
+
+// TextAreaField Component Stories
+export const BasicTextAreaField: StoryObj<typeof TextAreaField> = {
+  name: "Basic TextArea Field",
+  render: () => {
+    const methods = useForm();
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <TextAreaField name="bio" label="Biography" placeholder="Tell us about yourself..." rows={5} />
+      </Form>
+    );
+  },
+};
+
+export const TextAreaFieldWithError: StoryObj<typeof TextAreaField> = {
+  name: "TextArea Field with Error",
+  render: () => {
+    const methods = useForm();
+    methods.setError("bioError", {
+      type: "manual",
+      message: "Biography must be at least 50 characters",
+    });
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <TextAreaField name="bioError" label="Biography" rows={5} />
+      </Form>
+    );
+  },
+};
+
+// FieldsetLegend Component Stories
+export const BasicFieldsetLegend: StoryObj<typeof FieldsetLegend> = {
+  name: "Fieldset Legend",
+  render: () => (
+    <fieldset>
+      <FieldsetLegend>Personal Information</FieldsetLegend>
+      <div className="mt-4 space-y-3">
+        <Input name="firstName" placeholder="First name" />
+        <Input name="lastName" placeholder="Last name" />
+      </div>
+    </fieldset>
+  ),
+};
+
+// InputGroupBox Component Stories
+export const BasicInputGroupBox: StoryObj<typeof InputGroupBox> = {
+  name: "Input Group Box",
+  render: () => (
+    <InputGroupBox>
+      <div className="flex items-center gap-2">
+        <input type="radio" name="plan" id="free" />
+        <label htmlFor="free" className="text-sm">
+          Free Plan
+        </label>
+      </div>
+      <div className="flex items-center gap-2">
+        <input type="radio" name="plan" id="pro" />
+        <label htmlFor="pro" className="text-sm">
+          Pro Plan
+        </label>
+      </div>
+      <div className="flex items-center gap-2">
+        <input type="radio" name="plan" id="enterprise" />
+        <label htmlFor="enterprise" className="text-sm">
+          Enterprise Plan
+        </label>
+      </div>
+    </InputGroupBox>
+  ),
+};
+
+// Complete Form Example
+export const CompleteFormExample: StoryObj = {
+  name: "Complete Form Example",
+  render: () => {
+    const methods = useForm({
+      defaultValues: {
+        fullName: "",
+        email: "",
+        password: "",
+        website: "",
+        bio: "",
+      },
+    });
+
+    return (
+      <Form form={methods} handleSubmit={(data) => console.log(data)}>
+        <div className="space-y-4">
+          <TextField name="fullName" label="Full Name" placeholder="John Doe" />
+          <EmailField name="email" label="Email Address" placeholder="john@example.com" />
+          <PasswordField name="password" label="Password" />
+          <TextField
+            name="website"
+            label="Website"
+            addOnLeading={<InputLeading>https://</InputLeading>}
+            placeholder="example.com"
+          />
+          <TextAreaField name="bio" label="Biography" placeholder="Tell us about yourself..." rows={4} />
+        </div>
+      </Form>
+    );
+  },
+};
+
+// All Input Types
+export const AllInputTypes: StoryObj = {
+  name: "All Input Types",
+  render: () => {
+    const methods = useForm();
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <div className="space-y-4">
+          <div>
+            <Label>Basic Input</Label>
+            <Input name="basic" placeholder="Basic input" />
+          </div>
+          <TextField name="textField" label="Text Field" placeholder="Text field with label" />
+          <EmailField name="email" label="Email Field" placeholder="email@example.com" />
+          <PasswordField name="password" label="Password Field" />
+          <TextAreaField name="textarea" label="Text Area Field" placeholder="Enter text..." rows={3} />
+        </div>
+      </Form>
+    );
+  },
+};
+
+// Default Story
+export const Default: StoryObj = {
+  render: () => {
+    const methods = useForm();
+    return (
+      <Form form={methods} handleSubmit={() => {}}>
+        <TextField name="example" label="Example Field" placeholder="Enter some text..." />
+      </Form>
+    );
+  },
+};
diff --git a/packages/ui/components/avatar/UserAvatarGroup.stories.tsx b/packages/ui/components/avatar/UserAvatarGroup.stories.tsx
new file mode 100644
index 00000000000000..68ad437e7310bb
--- /dev/null
+++ b/packages/ui/components/avatar/UserAvatarGroup.stories.tsx
@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import { UserAvatarGroup } from "./UserAvatarGroup";
+
+const meta = {
+  component: UserAvatarGroup,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof UserAvatarGroup>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const sampleUsers = [
+  {
+    name: "John Doe",
+    username: "johndoe",
+    avatarUrl: "https://i.pravatar.cc/150?img=1",
+    profile: {
+      username: "johndoe",
+      organization: null,
+    },
+  },
+  {
+    name: "Jane Smith",
+    username: "janesmith",
+    avatarUrl: "https://i.pravatar.cc/150?img=2",
+    profile: {
+      username: "janesmith",
+      organization: null,
+    },
+  },
+  {
+    name: "Bob Wilson",
+    username: "bobwilson",
+    avatarUrl: "https://i.pravatar.cc/150?img=3",
+    profile: {
+      username: "bobwilson",
+      organization: null,
+    },
+  },
+  {
+    name: "Alice Johnson",
+    username: "alicejohnson",
+    avatarUrl: "https://i.pravatar.cc/150?img=4",
+    profile: {
+      username: "alicejohnson",
+      organization: null,
+    },
+  },
+  {
+    name: "Charlie Brown",
+    username: "charliebrown",
+    avatarUrl: "https://i.pravatar.cc/150?img=5",
+    profile: {
+      username: "charliebrown",
+      organization: null,
+    },
+  },
+  {
+    name: "Diana Prince",
+    username: "dianaprince",
+    avatarUrl: "https://i.pravatar.cc/150?img=6",
+    profile: {
+      username: "dianaprince",
+      organization: null,
+    },
+  },
+];
+
+const sampleOrgUsers = [
+  {
+    name: "Alex Turner",
+    username: "alexturner",
+    avatarUrl: "https://i.pravatar.cc/150?img=7",
+    profile: {
+      username: "alexturner",
+      organization: {
+        slug: "acme-corp",
+      },
+    },
+  },
+  {
+    name: "Sarah Connor",
+    username: "sarahconnor",
+    avatarUrl: "https://i.pravatar.cc/150?img=8",
+    profile: {
+      username: "sarahconnor",
+      organization: {
+        slug: "acme-corp",
+      },
+    },
+  },
+  {
+    name: "Mike Ross",
+    username: "mikeross",
+    avatarUrl: "https://i.pravatar.cc/150?img=9",
+    profile: {
+      username: "mikeross",
+      organization: {
+        slug: "acme-corp",
+      },
+    },
+  },
+];
+
+export const Default: Story = {
+  args: {
+    size: "sm",
+    users: sampleUsers.slice(0, 3),
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+    users: sampleUsers.slice(0, 3),
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    users: sampleUsers.slice(0, 3),
+  },
+};
+
+export const WithTruncation: Story = {
+  args: {
+    size: "sm",
+    users: sampleUsers,
+    truncateAfter: 4,
+  },
+};
+
+export const TruncateAfterTwo: Story = {
+  args: {
+    size: "sm",
+    users: sampleUsers,
+    truncateAfter: 2,
+  },
+};
+
+export const HideTruncatedCount: Story = {
+  args: {
+    size: "sm",
+    users: sampleUsers,
+    truncateAfter: 3,
+    hideTruncatedAvatarsCount: true,
+  },
+};
+
+export const SingleUser: Story = {
+  args: {
+    size: "sm",
+    users: [sampleUsers[0]],
+  },
+};
+
+export const OrganizationMembers: Story = {
+  args: {
+    size: "sm",
+    users: sampleOrgUsers,
+    truncateAfter: 3,
+  },
+};
+
+export const TeamMembers: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <UserAvatarGroup
+        size="sm"
+        users={sampleUsers.slice(0, 4)}
+        truncateAfter={3}
+      />
+      <span className="text-subtle text-sm">4 team members</span>
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <div className="flex items-center gap-4">
+        <span className="text-subtle w-12 text-sm">Small:</span>
+        <UserAvatarGroup size="sm" users={sampleUsers.slice(0, 4)} />
+      </div>
+      <div className="flex items-center gap-4">
+        <span className="text-subtle w-12 text-sm">Large:</span>
+        <UserAvatarGroup size="lg" users={sampleUsers.slice(0, 4)} />
+      </div>
+    </div>
+  ),
+};
+
+export const WithoutAvatars: Story = {
+  args: {
+    size: "sm",
+    users: [
+      {
+        name: "No Avatar User",
+        username: "noavatar",
+        avatarUrl: null,
+        profile: {
+          username: "noavatar",
+          organization: null,
+        },
+      },
+    ],
+  },
+};
+
+export const MixedUsersWithAndWithoutOrganization: Story = {
+  args: {
+    size: "sm",
+    users: [
+      sampleUsers[0],
+      sampleOrgUsers[0],
+      sampleUsers[1],
+      sampleOrgUsers[1],
+    ],
+    truncateAfter: 4,
+  },
+};
diff --git a/packages/ui/components/disconnect-calendar-integration/DisconnectIntegration.stories.tsx b/packages/ui/components/disconnect-calendar-integration/DisconnectIntegration.stories.tsx
new file mode 100644
index 00000000000000..06dc475981d518
--- /dev/null
+++ b/packages/ui/components/disconnect-calendar-integration/DisconnectIntegration.stories.tsx
@@ -0,0 +1,126 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+import { useState } from "react";
+
+import { DisconnectIntegrationComponent } from "./DisconnectIntegration";
+
+const meta = {
+  component: DisconnectIntegrationComponent,
+  title: "UI/DisconnectIntegration",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof DisconnectIntegrationComponent>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    return (
+      <DisconnectIntegrationComponent
+        label="Disconnect"
+        isModalOpen={isModalOpen}
+        onModalOpen={() => setIsModalOpen(!isModalOpen)}
+        onDeletionConfirmation={fn()}
+      />
+    );
+  },
+};
+
+export const WithTrashIcon: Story = {
+  render: function WithTrashIconStory() {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    return (
+      <DisconnectIntegrationComponent
+        label="Remove"
+        trashIcon={true}
+        isModalOpen={isModalOpen}
+        onModalOpen={() => setIsModalOpen(!isModalOpen)}
+        onDeletionConfirmation={fn()}
+      />
+    );
+  },
+};
+
+export const IconOnly: Story = {
+  render: function IconOnlyStory() {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    return (
+      <DisconnectIntegrationComponent
+        trashIcon={true}
+        isModalOpen={isModalOpen}
+        onModalOpen={() => setIsModalOpen(!isModalOpen)}
+        onDeletionConfirmation={fn()}
+      />
+    );
+  },
+};
+
+export const GlobalIntegration: Story = {
+  render: function GlobalIntegrationStory() {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    return (
+      <DisconnectIntegrationComponent
+        label="Disconnect"
+        isGlobal={true}
+        isModalOpen={isModalOpen}
+        onModalOpen={() => setIsModalOpen(!isModalOpen)}
+        onDeletionConfirmation={fn()}
+      />
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: function DisabledStory() {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    return (
+      <DisconnectIntegrationComponent
+        label="Disconnect"
+        disabled={true}
+        isModalOpen={isModalOpen}
+        onModalOpen={() => setIsModalOpen(!isModalOpen)}
+        onDeletionConfirmation={fn()}
+      />
+    );
+  },
+};
+
+export const CustomButtonColor: Story = {
+  render: function CustomButtonColorStory() {
+    const [isModalOpen, setIsModalOpen] = useState(false);
+
+    return (
+      <DisconnectIntegrationComponent
+        label="Remove Integration"
+        isModalOpen={isModalOpen}
+        onModalOpen={() => setIsModalOpen(!isModalOpen)}
+        onDeletionConfirmation={fn()}
+        buttonProps={{ color: "secondary" }}
+      />
+    );
+  },
+};
+
+export const DialogOpen: Story = {
+  render: function DialogOpenStory() {
+    const [isModalOpen, setIsModalOpen] = useState(true);
+
+    return (
+      <DisconnectIntegrationComponent
+        label="Disconnect"
+        isModalOpen={isModalOpen}
+        onModalOpen={() => setIsModalOpen(!isModalOpen)}
+        onDeletionConfirmation={fn()}
+      />
+    );
+  },
+};
diff --git a/packages/ui/components/editor/Editor.stories.tsx b/packages/ui/components/editor/Editor.stories.tsx
new file mode 100644
index 00000000000000..a8882a49b3094c
--- /dev/null
+++ b/packages/ui/components/editor/Editor.stories.tsx
@@ -0,0 +1,279 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { Editor } from "./Editor";
+import "./stylesEditor.css";
+
+const meta = {
+  component: Editor,
+  title: "UI/Editor",
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Editor>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="200px"
+        placeholder="Start typing..."
+      />
+    );
+  },
+};
+
+export const WithLabel: Story = {
+  render: function WithLabelStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="200px"
+        label="Description"
+        placeholder="Enter a description..."
+      />
+    );
+  },
+};
+
+export const WithInitialContent: Story = {
+  render: function WithInitialContentStory() {
+    const [text, setText] = useState(
+      "<p>This is some <b>bold</b> and <i>italic</i> text with a <a href='https://cal.com'>link</a>.</p>"
+    );
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="200px"
+      />
+    );
+  },
+};
+
+export const WithVariables: Story = {
+  render: function WithVariablesStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+    const variables = ["attendee name", "event name", "event date", "event time", "organizer name"];
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="200px"
+        variables={variables}
+        placeholder="Type @ to insert a variable..."
+      />
+    );
+  },
+};
+
+export const WithVariablesButtonTop: Story = {
+  render: function WithVariablesButtonTopStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+    const variables = ["attendee name", "event name", "event date", "event time"];
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="200px"
+        variables={variables}
+        addVariableButtonTop={true}
+        placeholder="Use the variable button above..."
+      />
+    );
+  },
+};
+
+export const ReadOnly: Story = {
+  render: function ReadOnlyStory() {
+    const [text, setText] = useState(
+      "<h2>Read Only Content</h2><p>This editor is in read-only mode. You cannot edit this content.</p><ul><li>Item one</li><li>Item two</li></ul>"
+    );
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="250px"
+        editable={false}
+      />
+    );
+  },
+};
+
+export const PlainTextMode: Story = {
+  render: function PlainTextModeStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="150px"
+        plainText={true}
+        placeholder="Plain text only..."
+      />
+    );
+  },
+};
+
+export const DisabledLists: Story = {
+  render: function DisabledListsStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="200px"
+        disableLists={true}
+        placeholder="Lists are disabled in this editor..."
+      />
+    );
+  },
+};
+
+export const CustomHeight: Story = {
+  render: function CustomHeightStory() {
+    const [text, setText] = useState(
+      "<p>This editor has a custom height of 400px to accommodate longer content.</p>"
+    );
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="400px"
+        maxHeight="400px"
+      />
+    );
+  },
+};
+
+export const WithExcludedToolbarItems: Story = {
+  render: function WithExcludedToolbarItemsStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="200px"
+        excludedToolbarItems={["blockType", "link"]}
+        placeholder="Simplified toolbar (no block type or link)..."
+      />
+    );
+  },
+};
+
+export const FullFeatured: Story = {
+  render: function FullFeaturedStory() {
+    const [text, setText] = useState(
+      "<h1>Welcome to the Editor</h1><p>This is a <b>fully featured</b> editor demonstrating all capabilities:</p><ul><li>Rich text formatting</li><li>Variables support</li><li>Links</li><li>Lists</li></ul><p>Try it out!</p>"
+    );
+    const [firstRender, setFirstRender] = useState(true);
+    const variables = [
+      "attendee name",
+      "attendee email",
+      "event name",
+      "event date",
+      "event time",
+      "event location",
+      "organizer name",
+      "organizer email",
+    ];
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="350px"
+        label="Email Template"
+        variables={variables}
+      />
+    );
+  },
+};
+
+export const EmailTemplate: Story = {
+  render: function EmailTemplateStory() {
+    const [text, setText] = useState(
+      "<p>Hi {attendee name},</p><p>Your booking for <b>{event name}</b> has been confirmed!</p><p><b>Date:</b> {event date}<br/><b>Time:</b> {event time}</p><p>Best regards,<br/>{organizer name}</p>"
+    );
+    const [firstRender, setFirstRender] = useState(true);
+    const variables = [
+      "attendee name",
+      "attendee email",
+      "event name",
+      "event date",
+      "event time",
+      "event location",
+      "organizer name",
+    ];
+
+    return (
+      <Editor
+        getText={() => text}
+        setText={setText}
+        firstRender={firstRender}
+        setFirstRender={setFirstRender}
+        height="300px"
+        label="Confirmation Email"
+        variables={variables}
+      />
+    );
+  },
+};
diff --git a/packages/ui/components/editor/plugins/AddVariablesDropdown.stories.tsx b/packages/ui/components/editor/plugins/AddVariablesDropdown.stories.tsx
new file mode 100644
index 00000000000000..9ce7777723972a
--- /dev/null
+++ b/packages/ui/components/editor/plugins/AddVariablesDropdown.stories.tsx
@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { AddVariablesDropdown } from "./AddVariablesDropdown";
+
+const meta = {
+  component: AddVariablesDropdown,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  args: {
+    addVariable: fn(),
+  },
+} satisfies Meta<typeof AddVariablesDropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variables: ["attendee name", "event name", "event date", "event time", "organizer name"],
+    isTextEditor: false,
+  },
+};
+
+export const TextEditorMode: Story = {
+  args: {
+    variables: ["attendee name", "event name", "event date", "event time", "organizer name"],
+    isTextEditor: true,
+  },
+};
+
+export const TextEditorWithButtonTop: Story = {
+  args: {
+    variables: ["attendee name", "event name", "event date", "event time", "organizer name"],
+    isTextEditor: true,
+    addVariableButtonTop: true,
+  },
+};
+
+export const WithManyVariables: Story = {
+  args: {
+    variables: [
+      "attendee name",
+      "attendee email",
+      "attendee first name",
+      "attendee last name",
+      "event name",
+      "event date",
+      "event time",
+      "event duration",
+      "event location",
+      "event description",
+      "organizer name",
+      "organizer email",
+      "booking date",
+      "booking time",
+      "reschedule link",
+      "cancel link",
+    ],
+    isTextEditor: false,
+  },
+};
+
+export const WithFewVariables: Story = {
+  args: {
+    variables: ["attendee name", "event name"],
+    isTextEditor: false,
+  },
+};
+
+export const EmptyVariables: Story = {
+  args: {
+    variables: [],
+    isTextEditor: false,
+  },
+};
+
+export const WithCustomClassName: Story = {
+  args: {
+    variables: ["attendee name", "event name", "event date", "event time", "organizer name"],
+    isTextEditor: false,
+    addVariableButtonClassName: "custom-button-class",
+  },
+};
+
+export const TextEditorManyVariables: Story = {
+  args: {
+    variables: [
+      "attendee name",
+      "attendee email",
+      "attendee first name",
+      "attendee last name",
+      "attendee timezone",
+      "attendee phone",
+      "event name",
+      "event date",
+      "event time",
+      "event duration",
+      "event location",
+      "event description",
+      "event link",
+      "organizer name",
+      "organizer email",
+      "organizer phone",
+      "booking date",
+      "booking time",
+      "booking reference",
+      "reschedule link",
+      "cancel link",
+      "payment amount",
+      "payment status",
+    ],
+    isTextEditor: true,
+  },
+};
diff --git a/packages/ui/components/editor/plugins/AddVariablesPlugin.stories.tsx b/packages/ui/components/editor/plugins/AddVariablesPlugin.stories.tsx
new file mode 100644
index 00000000000000..22bd5086189523
--- /dev/null
+++ b/packages/ui/components/editor/plugins/AddVariablesPlugin.stories.tsx
@@ -0,0 +1,330 @@
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+
+import ExampleTheme from "../ExampleTheme";
+import { VariableNode } from "../nodes/VariableNode";
+import "../stylesEditor.css";
+import AddVariablesPlugin from "./AddVariablesPlugin";
+import AutoLinkPlugin from "./AutoLinkPlugin";
+
+const editorConfig = {
+  theme: ExampleTheme,
+  onError(error: Error) {
+    console.error(error);
+  },
+  namespace: "AddVariablesPluginStorybook",
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+    VariableNode,
+  ],
+};
+
+const EditorWrapper = ({
+  children,
+  height = "250px",
+}: {
+  children: React.ReactNode;
+  height?: string;
+}) => {
+  return (
+    <LexicalComposer initialConfig={{ ...editorConfig }}>
+      <div className="editor-container rounded-lg p-0 transition focus-within:shadow-outline-gray-focused focus-within:border-emphasis border border-default">
+        <div className="editor-inner scroll-bar overflow-x-hidden" style={{ height }}>
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable
+                id="custom-editor"
+                style={{ height }}
+                className="editor-input focus:outline-none"
+              />
+            }
+            placeholder={
+              <div className="text-muted -mt-11 p-3 text-sm">Type {"{"} to insert a variable...</div>
+            }
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          {children}
+          <ListPlugin />
+          <LinkPlugin />
+          <AutoLinkPlugin />
+          <HistoryPlugin />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+};
+
+const meta = {
+  component: AddVariablesPlugin,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AddVariablesPlugin>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const variables = ["attendee name", "event name", "event date", "event time", "organizer name"];
+
+    return (
+      <EditorWrapper>
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const BasicVariables: Story = {
+  render: function BasicVariablesStory() {
+    const variables = ["name", "email", "phone"];
+
+    return (
+      <EditorWrapper>
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const ExtensiveVariables: Story = {
+  render: function ExtensiveVariablesStory() {
+    const variables = [
+      "attendee name",
+      "attendee email",
+      "attendee phone",
+      "attendee timezone",
+      "event name",
+      "event description",
+      "event date",
+      "event time",
+      "event duration",
+      "event location",
+      "organizer name",
+      "organizer email",
+      "organizer phone",
+      "booking id",
+      "booking reference",
+      "meeting url",
+      "cancellation reason",
+      "reschedule reason",
+    ];
+
+    return (
+      <EditorWrapper height="350px">
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const SingleVariable: Story = {
+  render: function SingleVariableStory() {
+    const variables = ["attendee name"];
+
+    return (
+      <EditorWrapper>
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const NoVariables: Story = {
+  render: function NoVariablesStory() {
+    const variables: string[] = [];
+
+    return (
+      <EditorWrapper>
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const EventVariables: Story = {
+  render: function EventVariablesStory() {
+    const variables = [
+      "event name",
+      "event description",
+      "event date",
+      "event time",
+      "event duration",
+      "event location",
+      "event type",
+    ];
+
+    return (
+      <EditorWrapper>
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const AttendeeVariables: Story = {
+  render: function AttendeeVariablesStory() {
+    const variables = [
+      "attendee name",
+      "attendee email",
+      "attendee phone",
+      "attendee timezone",
+      "attendee notes",
+    ];
+
+    return (
+      <EditorWrapper>
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const OrganizerVariables: Story = {
+  render: function OrganizerVariablesStory() {
+    const variables = ["organizer name", "organizer email", "organizer phone", "organizer company"];
+
+    return (
+      <EditorWrapper>
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const BookingVariables: Story = {
+  render: function BookingVariablesStory() {
+    const variables = [
+      "booking id",
+      "booking reference",
+      "booking status",
+      "meeting url",
+      "cancellation reason",
+      "reschedule reason",
+      "booking notes",
+    ];
+
+    return (
+      <EditorWrapper>
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const FilteringDemo: Story = {
+  render: function FilteringDemoStory() {
+    const variables = [
+      "attendee name",
+      "attendee email",
+      "attendee phone",
+      "event name",
+      "event date",
+      "event time",
+      "organizer name",
+      "organizer email",
+    ];
+
+    return (
+      <div className="space-y-4">
+        <div className="bg-blue-50 p-4 rounded-lg text-sm">
+          <p className="font-semibold mb-2">Try typing:</p>
+          <ul className="list-disc list-inside space-y-1">
+            <li>
+              <code className="bg-white px-2 py-1 rounded">{"{"}</code> - See all variables
+            </li>
+            <li>
+              <code className="bg-white px-2 py-1 rounded">{"{attendee"}</code> - Filter to attendee
+              variables
+            </li>
+            <li>
+              <code className="bg-white px-2 py-1 rounded">{"{event"}</code> - Filter to event
+              variables
+            </li>
+            <li>
+              <code className="bg-white px-2 py-1 rounded">{"{email"}</code> - Filter by keyword
+            </li>
+          </ul>
+        </div>
+        <EditorWrapper height="300px">
+          <AddVariablesPlugin variables={variables} />
+        </EditorWrapper>
+      </div>
+    );
+  },
+};
+
+export const WithExistingVariables: Story = {
+  render: function WithExistingVariablesStory() {
+    const variables = ["attendee name", "event name", "event date", "organizer name"];
+
+    return (
+      <div className="space-y-4">
+        <div className="bg-blue-50 p-4 rounded-lg text-sm">
+          <p className="font-semibold mb-2">
+            Variables are automatically converted when pasted or typed:
+          </p>
+          <p>
+            Try typing: <code className="bg-white px-2 py-1 rounded">{"{ATTENDEE_NAME}"}</code>
+          </p>
+        </div>
+        <EditorWrapper>
+          <AddVariablesPlugin variables={variables} />
+        </EditorWrapper>
+      </div>
+    );
+  },
+};
+
+export const TallEditor: Story = {
+  render: function TallEditorStory() {
+    const variables = [
+      "attendee name",
+      "attendee email",
+      "event name",
+      "event date",
+      "event time",
+      "event location",
+      "organizer name",
+      "organizer email",
+      "meeting url",
+      "booking reference",
+    ];
+
+    return (
+      <EditorWrapper height="500px">
+        <AddVariablesPlugin variables={variables} />
+      </EditorWrapper>
+    );
+  },
+};
diff --git a/packages/ui/components/editor/plugins/ToolbarPlugin.stories.tsx b/packages/ui/components/editor/plugins/ToolbarPlugin.stories.tsx
new file mode 100644
index 00000000000000..f237ee88d550e7
--- /dev/null
+++ b/packages/ui/components/editor/plugins/ToolbarPlugin.stories.tsx
@@ -0,0 +1,387 @@
+import { CodeHighlightNode, CodeNode } from "@lexical/code";
+import { AutoLinkNode, LinkNode } from "@lexical/link";
+import { ListItemNode, ListNode } from "@lexical/list";
+import { LexicalComposer } from "@lexical/react/LexicalComposer";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary";
+import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { ListPlugin } from "@lexical/react/LexicalListPlugin";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
+import { HeadingNode, QuoteNode } from "@lexical/rich-text";
+import { TableCellNode, TableNode, TableRowNode } from "@lexical/table";
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import ExampleTheme from "../ExampleTheme";
+import { VariableNode } from "../nodes/VariableNode";
+import "../stylesEditor.css";
+import AutoLinkPlugin from "./AutoLinkPlugin";
+import ToolbarPlugin from "./ToolbarPlugin";
+
+const editorConfig = {
+  theme: ExampleTheme,
+  onError(error: Error) {
+    console.error(error);
+  },
+  namespace: "ToolbarPluginStorybook",
+  nodes: [
+    HeadingNode,
+    ListNode,
+    ListItemNode,
+    QuoteNode,
+    CodeNode,
+    CodeHighlightNode,
+    TableNode,
+    TableCellNode,
+    TableRowNode,
+    AutoLinkNode,
+    LinkNode,
+    VariableNode,
+  ],
+};
+
+const EditorWrapper = ({
+  children,
+  height = "250px",
+}: {
+  children: React.ReactNode;
+  height?: string;
+}) => {
+  return (
+    <LexicalComposer initialConfig={{ ...editorConfig }}>
+      <div className="editor-container rounded-lg p-0 transition focus-within:shadow-outline-gray-focused focus-within:border-emphasis border border-default">
+        {children}
+        <div className="editor-inner scroll-bar overflow-x-hidden" style={{ height }}>
+          <RichTextPlugin
+            contentEditable={
+              <ContentEditable
+                id="custom-editor"
+                style={{ height }}
+                className="editor-input focus:outline-none"
+              />
+            }
+            placeholder={<div className="text-muted -mt-11 p-3 text-sm">Start typing...</div>}
+            ErrorBoundary={LexicalErrorBoundary}
+          />
+          <ListPlugin />
+          <LinkPlugin />
+          <AutoLinkPlugin />
+          <HistoryPlugin />
+        </div>
+      </div>
+    </LexicalComposer>
+  );
+};
+
+const meta = {
+  component: ToolbarPlugin,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[600px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ToolbarPlugin>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: function DefaultStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const WithInitialContent: Story = {
+  render: function WithInitialContentStory() {
+    const [text, setText] = useState("<p>This is some <b>bold</b> and <i>italic</i> text.</p>");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const WithVariables: Story = {
+  render: function WithVariablesStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+    const variables = ["attendee name", "event name", "event date", "event time", "organizer name"];
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          variables={variables}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const WithVariablesButtonTop: Story = {
+  render: function WithVariablesButtonTopStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+    const variables = ["attendee name", "event name", "event date", "event time", "organizer name"];
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          variables={variables}
+          addVariableButtonTop={true}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const ExcludeBoldAndItalic: Story = {
+  render: function ExcludeBoldAndItalicStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          excludedToolbarItems={["bold", "italic"]}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const ExcludeBlockType: Story = {
+  render: function ExcludeBlockTypeStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          excludedToolbarItems={["blockType"]}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const ExcludeLink: Story = {
+  render: function ExcludeLinkStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          excludedToolbarItems={["link"]}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const MinimalToolbar: Story = {
+  render: function MinimalToolbarStory() {
+    const [text, setText] = useState("");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          excludedToolbarItems={["blockType", "italic", "link"]}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const ReadOnlyMode: Story = {
+  render: function ReadOnlyModeStory() {
+    const [text, setText] = useState("<p>This editor is in read-only mode.</p>");
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper>
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={false}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const WithHeadings: Story = {
+  render: function WithHeadingsStory() {
+    const [text, setText] = useState(
+      "<h1>Large Heading</h1><h2>Small Heading</h2><p>Normal paragraph text</p>"
+    );
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper height="300px">
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const WithLists: Story = {
+  render: function WithListsStory() {
+    const [text, setText] = useState(
+      "<ul><li>Bullet item 1</li><li>Bullet item 2</li></ul><ol><li>Numbered item 1</li><li>Numbered item 2</li></ol>"
+    );
+    const [firstRender, setFirstRender] = useState(true);
+
+    return (
+      <EditorWrapper height="350px">
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const FullFeatured: Story = {
+  render: function FullFeaturedStory() {
+    const [text, setText] = useState(
+      "<h1>Welcome to the Editor</h1><p>This is a <b>fully featured</b> editor with <i>rich text</i> capabilities.</p><ul><li>Lists</li><li>Headings</li><li>Variables</li></ul>"
+    );
+    const [firstRender, setFirstRender] = useState(true);
+    const variables = [
+      "attendee name",
+      "attendee email",
+      "event name",
+      "event date",
+      "event time",
+      "event location",
+      "organizer name",
+      "organizer email",
+    ];
+
+    return (
+      <EditorWrapper height="400px">
+        <ToolbarPlugin
+          getText={() => text}
+          setText={setText}
+          editable={true}
+          variables={variables}
+          firstRender={firstRender}
+          setFirstRender={setFirstRender}
+        />
+      </EditorWrapper>
+    );
+  },
+};
+
+export const UpdateTemplate: Story = {
+  render: function UpdateTemplateStory() {
+    const [text, setText] = useState("<p>Initial template content</p>");
+    const [firstRender, setFirstRender] = useState(true);
+    const [updateTemplate, setUpdateTemplate] = useState(false);
+    const [templateVersion, setTemplateVersion] = useState(1);
+
+    const updateContent = () => {
+      const newVersion = templateVersion + 1;
+      setTemplateVersion(newVersion);
+      setText(`<p>Updated template content - Version ${newVersion}</p>`);
+      setUpdateTemplate(true);
+      setTimeout(() => setUpdateTemplate(false), 100);
+    };
+
+    return (
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          <button
+            onClick={updateContent}
+            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
+            Update Template
+          </button>
+          <span className="px-4 py-2 bg-gray-100 rounded">Version: {templateVersion}</span>
+        </div>
+        <EditorWrapper>
+          <ToolbarPlugin
+            getText={() => text}
+            setText={setText}
+            editable={true}
+            updateTemplate={updateTemplate}
+            firstRender={firstRender}
+            setFirstRender={setFirstRender}
+          />
+        </EditorWrapper>
+      </div>
+    );
+  },
+};
diff --git a/packages/ui/components/form/inputs/InputFieldWithSelect.stories.tsx b/packages/ui/components/form/inputs/InputFieldWithSelect.stories.tsx
new file mode 100644
index 00000000000000..aaa61ab6e3606a
--- /dev/null
+++ b/packages/ui/components/form/inputs/InputFieldWithSelect.stories.tsx
@@ -0,0 +1,236 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { fn } from "storybook/test";
+
+import { InputFieldWithSelect } from "./InputFieldWithSelect";
+
+const meta = {
+  component: InputFieldWithSelect,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    label: {
+      description: "Label for the input field",
+      control: "text",
+    },
+    placeholder: {
+      description: "Placeholder text",
+      control: "text",
+    },
+    disabled: {
+      description: "Whether the input is disabled",
+      control: "boolean",
+    },
+    required: {
+      description: "Whether the field is required",
+      control: "boolean",
+    },
+    hint: {
+      description: "Helper text displayed below the input",
+      control: "text",
+    },
+  },
+  args: {
+    onChange: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[400px]">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof InputFieldWithSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const durationOptions = [
+  { value: "15", label: "15 min" },
+  { value: "30", label: "30 min" },
+  { value: "45", label: "45 min" },
+  { value: "60", label: "60 min" },
+];
+
+const unitOptions = [
+  { value: "px", label: "px" },
+  { value: "rem", label: "rem" },
+  { value: "em", label: "em" },
+  { value: "%", label: "%" },
+];
+
+const currencyOptions = [
+  { value: "USD", label: "USD" },
+  { value: "EUR", label: "EUR" },
+  { value: "GBP", label: "GBP" },
+  { value: "JPY", label: "JPY" },
+];
+
+export const Default: Story = {
+  args: {
+    name: "duration",
+    label: "Duration",
+    placeholder: "Enter duration",
+    selectProps: {
+      options: durationOptions,
+      defaultValue: durationOptions[1],
+      onChange: fn(),
+    },
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    name: "duration",
+    label: "Duration",
+    defaultValue: "30",
+    selectProps: {
+      options: durationOptions,
+      defaultValue: durationOptions[1],
+      onChange: fn(),
+    },
+  },
+};
+
+export const Required: Story = {
+  args: {
+    name: "duration",
+    label: "Duration",
+    placeholder: "Enter duration",
+    required: true,
+    showAsteriskIndicator: true,
+    selectProps: {
+      options: durationOptions,
+      defaultValue: durationOptions[1],
+      onChange: fn(),
+    },
+  },
+};
+
+export const WithHint: Story = {
+  args: {
+    name: "duration",
+    label: "Duration",
+    placeholder: "Enter duration",
+    hint: "Specify how long this event will last",
+    selectProps: {
+      options: durationOptions,
+      defaultValue: durationOptions[1],
+      onChange: fn(),
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    name: "duration",
+    label: "Duration",
+    placeholder: "Enter duration",
+    disabled: true,
+    selectProps: {
+      options: durationOptions,
+      defaultValue: durationOptions[1],
+      isDisabled: true,
+      onChange: fn(),
+    },
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    name: "duration",
+    label: "Duration",
+    placeholder: "Enter duration",
+    error: "Duration is required",
+    selectProps: {
+      options: durationOptions,
+      defaultValue: durationOptions[1],
+      onChange: fn(),
+    },
+  },
+};
+
+export const PriceInput: Story = {
+  args: {
+    name: "price",
+    label: "Price",
+    placeholder: "0.00",
+    type: "number",
+    selectProps: {
+      options: currencyOptions,
+      defaultValue: currencyOptions[0],
+      onChange: fn(),
+    },
+  },
+};
+
+export const DimensionInput: Story = {
+  args: {
+    name: "width",
+    label: "Width",
+    placeholder: "Enter width",
+    type: "number",
+    selectProps: {
+      options: unitOptions,
+      defaultValue: unitOptions[0],
+      onChange: fn(),
+    },
+  },
+};
+
+export const SmallSize: Story = {
+  args: {
+    name: "duration",
+    label: "Duration",
+    placeholder: "Enter duration",
+    size: "sm",
+    selectProps: {
+      options: durationOptions,
+      defaultValue: durationOptions[1],
+      onChange: fn(),
+    },
+  },
+};
+
+export const MultipleVariants: Story = {
+  render: () => (
+    <div className="space-y-6">
+      <InputFieldWithSelect
+        name="duration"
+        label="Event Duration"
+        placeholder="Enter duration"
+        selectProps={{
+          options: durationOptions,
+          defaultValue: durationOptions[1],
+        }}
+      />
+      <InputFieldWithSelect
+        name="price"
+        label="Price"
+        placeholder="0.00"
+        type="number"
+        hint="Set your pricing"
+        selectProps={{
+          options: currencyOptions,
+          defaultValue: currencyOptions[0],
+        }}
+      />
+      <InputFieldWithSelect
+        name="dimension"
+        label="Container Width"
+        placeholder="Enter value"
+        type="number"
+        required
+        showAsteriskIndicator
+        selectProps={{
+          options: unitOptions,
+          defaultValue: unitOptions[0],
+        }}
+      />
+    </div>
+  ),
+  parameters: {
+    layout: "padded",
+  },
+};
diff --git a/packages/ui/components/image-uploader/Common.stories.tsx b/packages/ui/components/image-uploader/Common.stories.tsx
new file mode 100644
index 00000000000000..50b9d1b84fd9b5
--- /dev/null
+++ b/packages/ui/components/image-uploader/Common.stories.tsx
@@ -0,0 +1,185 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { Slider } from "./Common";
+
+const meta = {
+  component: Slider,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[400px] p-4">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <div className="space-y-4">
+        <Slider value={value} label="Default Slider" changeHandler={setValue} min={0} max={100} step={1} />
+        <p className="text-subtle text-sm">Value: {value}</p>
+      </div>
+    );
+  },
+};
+
+export const ZoomControl: Story = {
+  render: () => {
+    const [zoom, setZoom] = useState(1);
+    return (
+      <div className="space-y-4">
+        <label className="text-emphasis text-sm font-medium">Zoom Level</label>
+        <Slider
+          value={zoom}
+          label="Zoom Control"
+          changeHandler={setZoom}
+          min={0.1}
+          max={3}
+          step={0.1}
+        />
+        <p className="text-subtle text-sm">Zoom: {zoom.toFixed(1)}x</p>
+      </div>
+    );
+  },
+};
+
+export const BrightnessControl: Story = {
+  render: () => {
+    const [brightness, setBrightness] = useState(100);
+    return (
+      <div className="space-y-4">
+        <label className="text-emphasis text-sm font-medium">Brightness</label>
+        <Slider
+          value={brightness}
+          label="Brightness Control"
+          changeHandler={setBrightness}
+          min={0}
+          max={200}
+          step={1}
+        />
+        <p className="text-subtle text-sm">{brightness}%</p>
+      </div>
+    );
+  },
+};
+
+export const RotationControl: Story = {
+  render: () => {
+    const [rotation, setRotation] = useState(0);
+    return (
+      <div className="space-y-4">
+        <label className="text-emphasis text-sm font-medium">Rotation</label>
+        <Slider
+          value={rotation}
+          label="Rotation Control"
+          changeHandler={setRotation}
+          min={0}
+          max={360}
+          step={1}
+        />
+        <p className="text-subtle text-sm">{rotation}°</p>
+      </div>
+    );
+  },
+};
+
+export const OpacityControl: Story = {
+  render: () => {
+    const [opacity, setOpacity] = useState(100);
+    return (
+      <div className="space-y-4">
+        <label className="text-emphasis text-sm font-medium">Opacity</label>
+        <Slider
+          value={opacity}
+          label="Opacity Control"
+          changeHandler={setOpacity}
+          min={0}
+          max={100}
+          step={1}
+        />
+        <div className="flex items-center gap-4">
+          <div
+            className="bg-default h-16 w-16 rounded border"
+            style={{ opacity: opacity / 100 }}
+          />
+          <p className="text-subtle text-sm">{opacity}%</p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const ImageCropScale: Story = {
+  render: () => {
+    const [scale, setScale] = useState(1);
+    return (
+      <div className="space-y-4">
+        <label className="text-emphasis text-sm font-medium">Image Scale</label>
+        <p className="text-subtle text-xs">Scale image for cropping</p>
+        <Slider
+          value={scale}
+          label="Image Crop Scale"
+          changeHandler={setScale}
+          min={1}
+          max={3}
+          step={0.05}
+        />
+        <p className="text-subtle text-sm">Scale: {scale.toFixed(2)}x</p>
+      </div>
+    );
+  },
+};
+
+export const VolumeControl: Story = {
+  render: () => {
+    const [volume, setVolume] = useState(75);
+    return (
+      <div className="space-y-4">
+        <label className="text-emphasis text-sm font-medium">Volume</label>
+        <Slider
+          value={volume}
+          label="Volume Control"
+          changeHandler={setVolume}
+          min={0}
+          max={100}
+          step={5}
+        />
+        <div className="flex items-center gap-2">
+          <div className="bg-emphasis h-2 rounded" style={{ width: `${volume}%` }} />
+          <p className="text-subtle text-sm">{volume}%</p>
+        </div>
+      </div>
+    );
+  },
+};
+
+export const Disabled: Story = {
+  render: () => {
+    const [value, setValue] = useState(50);
+    return (
+      <div className="space-y-4">
+        <label className="text-emphasis text-sm font-medium">Disabled Slider</label>
+        <Slider
+          value={value}
+          label="Disabled Slider"
+          changeHandler={setValue}
+          min={0}
+          max={100}
+          step={1}
+          disabled
+        />
+        <p className="text-subtle text-sm">Value: {value}</p>
+      </div>
+    );
+  },
+};
diff --git a/packages/ui/components/layout/WizardLayout.stories.tsx b/packages/ui/components/layout/WizardLayout.stories.tsx
new file mode 100644
index 00000000000000..6a2a55e97f19de
--- /dev/null
+++ b/packages/ui/components/layout/WizardLayout.stories.tsx
@@ -0,0 +1,354 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import { useState } from "react";
+
+import { Button } from "../button";
+import { WizardLayout } from "./WizardLayout";
+
+const meta = {
+  component: WizardLayout,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div style={{ width: "100%", maxWidth: "800px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof WizardLayout>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    maxSteps: 2,
+    currentStep: 1,
+    children: (
+      <div className="space-y-4 p-6">
+        <h2 className="text-emphasis text-lg font-semibold">Welcome to the Setup</h2>
+        <p className="text-subtle text-sm">
+          This is the first step of the wizard. Let&apos;s get you started with setting up your account.
+        </p>
+        <div className="mt-6">
+          <label className="text-emphasis mb-2 block text-sm font-medium">Your Name</label>
+          <input
+            type="text"
+            className="border-subtle w-full rounded-md border px-3 py-2 text-sm"
+            placeholder="Enter your name"
+          />
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithMultipleSteps: Story = {
+  args: {
+    maxSteps: 4,
+    currentStep: 2,
+    children: (
+      <div className="space-y-4 p-6">
+        <h2 className="text-emphasis text-lg font-semibold">Configure Your Settings</h2>
+        <p className="text-subtle text-sm">Step 2 of 4: Set your preferences</p>
+        <div className="space-y-4">
+          <div>
+            <label className="text-emphasis mb-2 block text-sm font-medium">Time Zone</label>
+            <select className="border-subtle w-full rounded-md border px-3 py-2 text-sm">
+              <option>UTC</option>
+              <option>America/New_York</option>
+              <option>Europe/London</option>
+            </select>
+          </div>
+          <div>
+            <label className="text-emphasis mb-2 block text-sm font-medium">Language</label>
+            <select className="border-subtle w-full rounded-md border px-3 py-2 text-sm">
+              <option>English</option>
+              <option>Spanish</option>
+              <option>French</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const WithFooter: Story = {
+  args: {
+    maxSteps: 3,
+    currentStep: 2,
+    children: (
+      <div className="space-y-4 p-6">
+        <h2 className="text-emphasis text-lg font-semibold">Connect Your Calendar</h2>
+        <p className="text-subtle text-sm">
+          Connect your calendar to automatically sync your availability and prevent double bookings.
+        </p>
+        <div className="mt-4 flex gap-2">
+          <button className="bg-emphasis text-inverted rounded-md px-4 py-2 text-sm font-medium">
+            Connect Google Calendar
+          </button>
+          <button className="border-subtle text-emphasis rounded-md border px-4 py-2 text-sm font-medium">
+            Connect Outlook
+          </button>
+        </div>
+      </div>
+    ),
+    footer: (
+      <div className="flex justify-between rounded-md bg-gray-50 p-4">
+        <Button color="secondary">Back</Button>
+        <Button color="primary">Continue</Button>
+      </div>
+    ),
+  },
+};
+
+export const WithOptionalCallback: Story = {
+  args: {
+    maxSteps: 3,
+    currentStep: 1,
+    children: (
+      <div className="space-y-4 p-6">
+        <h2 className="text-emphasis text-lg font-semibold">Optional: Add Team Members</h2>
+        <p className="text-subtle text-sm">
+          Invite your team members to collaborate. You can skip this step and add them later.
+        </p>
+        <div className="space-y-3">
+          <input
+            type="email"
+            className="border-subtle w-full rounded-md border px-3 py-2 text-sm"
+            placeholder="teammate@example.com"
+          />
+          <Button color="secondary" StartIcon="plus">
+            Add Another
+          </Button>
+        </div>
+      </div>
+    ),
+    isOptionalCallback: () => alert("Skip to next step"),
+  },
+};
+
+export const FirstStep: Story = {
+  args: {
+    maxSteps: 5,
+    currentStep: 0,
+    children: (
+      <div className="space-y-4 p-6">
+        <h2 className="text-emphasis text-lg font-semibold">Getting Started</h2>
+        <p className="text-subtle text-sm">
+          Welcome! Let&apos;s set up your account in just a few steps.
+        </p>
+        <div className="mt-6 space-y-4">
+          <div className="border-subtle rounded-lg border p-4">
+            <h3 className="text-emphasis text-base font-medium">What we&apos;ll cover</h3>
+            <ul className="text-subtle mt-2 list-inside list-disc space-y-1 text-sm">
+              <li>Basic information</li>
+              <li>Team setup</li>
+              <li>Calendar integration</li>
+              <li>Availability settings</li>
+              <li>Review and confirm</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const LastStep: Story = {
+  args: {
+    maxSteps: 4,
+    currentStep: 4,
+    children: (
+      <div className="space-y-4 p-6">
+        <h2 className="text-emphasis text-lg font-semibold">All Set!</h2>
+        <p className="text-subtle text-sm">
+          You&apos;re all done with the setup. Review your settings below.
+        </p>
+        <div className="mt-6 space-y-3">
+          <div className="border-subtle rounded-lg border p-4">
+            <div className="text-emphasis text-sm font-medium">Account Information</div>
+            <div className="text-subtle mt-1 text-sm">John Doe • john@example.com</div>
+          </div>
+          <div className="border-subtle rounded-lg border p-4">
+            <div className="text-emphasis text-sm font-medium">Calendar Connected</div>
+            <div className="text-subtle mt-1 text-sm">Google Calendar</div>
+          </div>
+          <div className="border-subtle rounded-lg border p-4">
+            <div className="text-emphasis text-sm font-medium">Team Members</div>
+            <div className="text-subtle mt-1 text-sm">3 members added</div>
+          </div>
+        </div>
+      </div>
+    ),
+    footer: (
+      <div className="flex justify-end">
+        <Button color="primary" size="lg">
+          Get Started
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const WithFormContent: Story = {
+  args: {
+    maxSteps: 3,
+    currentStep: 1,
+    children: (
+      <div className="space-y-6 p-6">
+        <div>
+          <h2 className="text-emphasis text-lg font-semibold">Personal Information</h2>
+          <p className="text-subtle mt-1 text-sm">Tell us a bit about yourself</p>
+        </div>
+        <div className="space-y-4">
+          <div>
+            <label className="text-emphasis mb-2 block text-sm font-medium">
+              Full Name <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              className="border-subtle w-full rounded-md border px-3 py-2 text-sm"
+              placeholder="John Doe"
+            />
+          </div>
+          <div>
+            <label className="text-emphasis mb-2 block text-sm font-medium">
+              Email <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="email"
+              className="border-subtle w-full rounded-md border px-3 py-2 text-sm"
+              placeholder="john@example.com"
+            />
+          </div>
+          <div>
+            <label className="text-emphasis mb-2 block text-sm font-medium">Company</label>
+            <input
+              type="text"
+              className="border-subtle w-full rounded-md border px-3 py-2 text-sm"
+              placeholder="Acme Inc."
+            />
+          </div>
+          <div>
+            <label className="text-emphasis mb-2 block text-sm font-medium">Role</label>
+            <select className="border-subtle w-full rounded-md border px-3 py-2 text-sm">
+              <option value="">Select a role</option>
+              <option value="developer">Developer</option>
+              <option value="designer">Designer</option>
+              <option value="manager">Manager</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    ),
+    footer: (
+      <div className="flex justify-between">
+        <Button color="minimal">Back</Button>
+        <Button color="primary">Next Step</Button>
+      </div>
+    ),
+  },
+};
+
+export const Interactive: Story = {
+  render: () => {
+    const [currentStep, setCurrentStep] = useState(1);
+    const maxSteps = 4;
+
+    const stepContent = [
+      {
+        title: "Welcome",
+        content: "Let's get started with your onboarding journey.",
+      },
+      {
+        title: "Profile Setup",
+        content: "Tell us about yourself and your preferences.",
+      },
+      {
+        title: "Team Configuration",
+        content: "Set up your team and invite members.",
+      },
+      {
+        title: "Complete",
+        content: "You're all set! Ready to get started?",
+      },
+    ];
+
+    const step = stepContent[currentStep - 1];
+
+    return (
+      <WizardLayout
+        maxSteps={maxSteps}
+        currentStep={currentStep}
+        footer={
+          <div className="flex justify-between">
+            <Button
+              color="secondary"
+              disabled={currentStep === 1}
+              onClick={() => setCurrentStep(Math.max(1, currentStep - 1))}>
+              Back
+            </Button>
+            <Button
+              color="primary"
+              onClick={() => setCurrentStep(Math.min(maxSteps, currentStep + 1))}>
+              {currentStep === maxSteps ? "Finish" : "Next"}
+            </Button>
+          </div>
+        }>
+        <div className="space-y-4 p-6">
+          <h2 className="text-emphasis text-lg font-semibold">{step.title}</h2>
+          <p className="text-subtle text-sm">{step.content}</p>
+          <div className="text-subtle mt-4 text-xs">
+            Step {currentStep} of {maxSteps}
+          </div>
+        </div>
+      </WizardLayout>
+    );
+  },
+};
+
+export const WithComplexFooter: Story = {
+  args: {
+    maxSteps: 3,
+    currentStep: 2,
+    children: (
+      <div className="space-y-4 p-6">
+        <h2 className="text-emphasis text-lg font-semibold">Review Your Choices</h2>
+        <p className="text-subtle text-sm">
+          Please review the information below before proceeding to the next step.
+        </p>
+        <div className="space-y-2">
+          <div className="flex items-center justify-between rounded-md bg-gray-50 p-3">
+            <span className="text-emphasis text-sm">Selected Plan:</span>
+            <span className="text-emphasis text-sm font-medium">Professional</span>
+          </div>
+          <div className="flex items-center justify-between rounded-md bg-gray-50 p-3">
+            <span className="text-emphasis text-sm">Billing Cycle:</span>
+            <span className="text-emphasis text-sm font-medium">Monthly</span>
+          </div>
+        </div>
+      </div>
+    ),
+    footer: (
+      <div className="space-y-3">
+        <div className="bg-subtle rounded-md p-4">
+          <div className="flex items-center justify-between">
+            <span className="text-emphasis text-sm font-medium">Total:</span>
+            <span className="text-emphasis text-lg font-bold">$29/month</span>
+          </div>
+        </div>
+        <div className="flex justify-between">
+          <Button color="minimal">Cancel</Button>
+          <div className="flex gap-2">
+            <Button color="secondary">Back</Button>
+            <Button color="primary">Continue to Payment</Button>
+          </div>
+        </div>
+      </div>
+    ),
+  },
+};
diff --git a/tooling/sandbox/generate-screenshots.ts b/tooling/sandbox/generate-screenshots.ts
deleted file mode 100644
index d85e5e2ed81541..00000000000000
--- a/tooling/sandbox/generate-screenshots.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-#!/usr/bin/env npx tsx
-
-import { type ChildProcess, spawn } from 'node:child_process';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-
-const STORYBOOK_URL = 'http://localhost:6006';
-
-// Resolve paths relative to this script's location
-const REPO_ROOT = path.resolve(__dirname, '../..');
-const APPS_STORYBOOK_DIR = path.join(REPO_ROOT, 'apps/storybook');
-
-// Change working directory to apps/storybook so storybook cache is in the right place
-process.chdir(APPS_STORYBOOK_DIR);
-
-interface StoryIndexEntry {
-  id: string;
-  title: string;
-  name: string;
-  importPath: string;
-}
-
-interface StoryIndex {
-  v: number;
-  entries: Record<string, StoryIndexEntry>;
-}
-
-async function fetchStoryIndex(): Promise<StoryIndexEntry[]> {
-  const indexUrl = `${STORYBOOK_URL}/index.json`;
-
-  try {
-    const response = await fetch(indexUrl);
-    if (!response.ok) {
-      throw new Error(`Failed to fetch story index: ${response.statusText}`);
-    }
-
-    const data = (await response.json()) as StoryIndex;
-    return Object.values(data.entries);
-  } catch (error) {
-    console.error('Error fetching story index:', error);
-    console.error(`Make sure Storybook is running at ${STORYBOOK_URL}`);
-    process.exit(1);
-  }
-}
-
-async function startStorybook(): Promise<{ process: ChildProcess; port: number }> {
-  console.log('🚀 Starting Storybook...');
-
-  // Run storybook dev directly with --no-open flag
-  const storybookProcess = spawn('npx', ['storybook', 'dev', '-p', '6006', '--no-open'], {
-    cwd: APPS_STORYBOOK_DIR,
-    stdio: 'pipe',
-    detached: false,
-    shell: true,
-  });
-
-  // Wait for Storybook to be ready
-  return new Promise((resolve, reject) => {
-    let started = false;
-    const timeout = setTimeout(() => {
-      if (!started) {
-        storybookProcess.kill();
-        reject(new Error('Storybook failed to start within 120 seconds'));
-      }
-    }, 120000);
-
-    storybookProcess.stdout?.on('data', (data) => {
-      const output = data.toString();
-      console.log(output);
-      if (output.includes('Local:') || output.includes('localhost:6006')) {
-        if (!started) {
-          started = true;
-          clearTimeout(timeout);
-          console.log('✅ Storybook is ready!');
-          resolve({ process: storybookProcess, port: 6006 });
-        }
-      }
-    });
-
-    storybookProcess.stderr?.on('data', (data) => {
-      console.error(data.toString());
-    });
-
-    storybookProcess.on('error', (error) => {
-      clearTimeout(timeout);
-      reject(error);
-    });
-  });
-}
-
-async function warmupStorybook(firstStoryId: string): Promise<void> {
-  console.log('🔥 Warming up Storybook...');
-
-  // Import the browser utility and load one story to force full initialization
-  const { getBrowser } = await import(
-    '../../apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/utils/browser/index.js'
-  );
-  const browser = await getBrowser();
-  const context = await browser.newContext();
-  const page = await context.newPage();
-
-  try {
-    const warmupUrl = `${STORYBOOK_URL}/iframe.html?id=${firstStoryId}&viewMode=story`;
-    await page.goto(warmupUrl, { timeout: 15000 });
-    await page.waitForLoadState('networkidle');
-    console.log('✅ Storybook warmed up');
-  } catch (error) {
-    console.log('⚠️ Warmup had issues, proceeding anyway:', error);
-  } finally {
-    await context.close();
-  }
-}
-
-async function main() {
-  console.log('📸 Generating Storybook screenshots...');
-
-  let storybookInstance: { process: ChildProcess; port: number } | null = null;
-
-  try {
-    // Start Storybook
-    storybookInstance = await startStorybook();
-    console.log(`Using Storybook URL: ${STORYBOOK_URL}`);
-
-    // Fetch all stories
-    const stories = await fetchStoryIndex();
-    console.log(`Found ${stories.length} stories`);
-
-    const firstStory = stories[0];
-    if (!firstStory) {
-      throw new Error('No stories found');
-    }
-
-    // Warm up Storybook by loading the first story
-    await warmupStorybook(firstStory.id);
-
-    // Generate screenshots (dynamic import so it runs after chdir)
-    const { generateAllScreenshots } = await import(
-      '../../apps/storybook/.storybook/storybook-onlook-plugin/screenshot-service/index.js'
-    );
-    await generateAllScreenshots(
-      stories.map((story) => ({
-        id: story.id,
-        importPath: story.importPath,
-      })),
-      STORYBOOK_URL,
-    );
-
-    console.log('✅ Screenshot generation complete!');
-  } catch (error) {
-    console.error('❌ Error during screenshot generation:', error);
-    throw error;
-  } finally {
-    // Always stop Storybook
-    if (storybookInstance) {
-      console.log('🛑 Stopping Storybook...');
-      storybookInstance.process.kill();
-    }
-  }
-}
-
-main()
-  .then(() => process.exit(0))
-  .catch((error) => {
-    console.error('Fatal error:', error);
-    process.exit(1);
-  });
diff --git a/tooling/sandbox/package.json b/tooling/sandbox/package.json
index c5ce701faf90bc..59df95188a3d0d 100644
--- a/tooling/sandbox/package.json
+++ b/tooling/sandbox/package.json
@@ -6,8 +6,7 @@
   "scripts": {
     "build": "npx tsx cli.ts",
     "build:dev": "npx tsx build.dev.ts",
-    "build:prod": "npx tsx build.prod.ts",
-    "generate-screenshots": "npx tsx generate-screenshots.ts"
+    "build:prod": "npx tsx build.prod.ts"
   },
   "dependencies": {
     "dotenv": "^16.4.5",
diff --git a/tooling/sandbox/template.ts b/tooling/sandbox/template.ts
index e2724cc59bc4fb..0204e3a414a92b 100644
--- a/tooling/sandbox/template.ts
+++ b/tooling/sandbox/template.ts
@@ -23,13 +23,15 @@ export const template = Template()
   .gitClone(
     `https://${process.env.GIT_ACCESS_TOKEN}@github.com/onlook-dev/cal.com.git`,
     '/home/user/code',
-    { branch: 'feat/storybook-setup' },
+    { branch: 'feat/storybook-stories' },
   )
   .setWorkdir('/home/user/code')
   .runCmd('yarn install')
-  .runCmd('npx playwright install --with-deps chromium')
-  .runCmd('npx tsx tooling/sandbox/generate-screenshots.ts')
+  // Install playwright browsers for the @onlook/storybook-plugin's playwright version
+  .runCmd('cd apps/storybook && npx playwright install --with-deps chromium')
+  // Generate screenshots (CLI starts Storybook automatically and waits for it)
+  .runCmd('cd apps/storybook && npx @onlook/storybook-plugin generate-screenshots')
   .setStartCmd(
-    'cd /home/user/code; git pull https://$GIT_ACCESS_TOKEN@github.com/onlook-dev/cal.com.git feat/storybook-setup; yarn install; yarn workspace @calcom/storybook storybook --host 0.0.0.0 --disable-telemetry --no-open',
+    'cd /home/user/code; git pull https://$GIT_ACCESS_TOKEN@github.com/onlook-dev/cal.com.git feat/storybook-stories; yarn install; yarn workspace @calcom/storybook storybook --host 0.0.0.0 --disable-telemetry --no-open',
     waitForPort(6006),
   );
diff --git a/yarn.lock b/yarn.lock
index 9f87879a35d093..72a84b84b52914 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3299,13 +3299,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@calcom/storybook@workspace:apps/storybook"
   dependencies:
-    "@babel/generator": "npm:^7.26.9"
-    "@babel/parser": "npm:^7.26.9"
-    "@babel/traverse": "npm:^7.26.9"
-    "@babel/types": "npm:^7.26.9"
     "@calcom/tsconfig": "workspace:*"
     "@calcom/ui": "workspace:*"
     "@chromatic-com/storybook": "npm:^4.1.2"
+    "@onlook/storybook-plugin": "npm:^0.1.0"
     "@storybook/addon-a11y": "npm:^10.0.5"
     "@storybook/addon-docs": "npm:^10.0.5"
     "@storybook/addon-themes": "npm:^10.0.5"
@@ -3315,7 +3312,6 @@ __metadata:
     "@types/react": "npm:^18.2.0"
     "@types/react-dom": "npm:^18.2.0"
     next: "npm:^15.1.0"
-    playwright: "npm:^1.52.0"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
     react-inlinesvg: "npm:^4.1.3"
@@ -4413,6 +4409,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@drizzle-team/brocli@npm:^0.11.0":
+  version: 0.11.0
+  resolution: "@drizzle-team/brocli@npm:0.11.0"
+  checksum: 10/9dc5b901255895852c5cd051d2bb4ad1e89d452c97e1a39a0c74ee3fd82bbec3fecc3e0b49151aebc3bccd482c69c38a734281317b0eda3932052fe3c405a80c
+  languageName: node
+  linkType: hard
+
 "@dub/analytics@npm:^0.0.27":
   version: 0.0.27
   resolution: "@dub/analytics@npm:0.0.27"
@@ -10123,6 +10126,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@onlook/storybook-plugin@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "@onlook/storybook-plugin@npm:0.1.0"
+  dependencies:
+    "@babel/generator": "npm:^7.26.9"
+    "@babel/parser": "npm:^7.26.9"
+    "@babel/traverse": "npm:^7.26.9"
+    "@babel/types": "npm:^7.26.9"
+    "@drizzle-team/brocli": "npm:^0.11.0"
+    playwright: "npm:^1.52.0"
+  peerDependencies:
+    vite: ^5.0.0 || ^6.0.0
+  bin:
+    onlook-storybook: dist/cli/index.js
+  checksum: 10/4d982d38b2f4e30dfc9c41f2f864da8f650b95be7ecfe7b3b7d22cfb8a7e8ae519f4215e5987fb366d1a2d14f733bcaf23359128a2958916927424c55f34f5aa
+  languageName: node
+  linkType: hard
+
 "@open-draft/deferred-promise@npm:^2.2.0":
   version: 2.2.0
   resolution: "@open-draft/deferred-promise@npm:2.2.0"