diff --git a/.env.example b/.env.example
index 4b7e546..59b2361 100644
--- a/.env.example
+++ b/.env.example
@@ -3,7 +3,6 @@ LIVEKIT_API_KEY=<your_api_key>
 LIVEKIT_API_SECRET=<your_api_secret>
 LIVEKIT_URL=wss://<project-subdomain>.livekit.cloud
 
-
 # Internally used environment variables
-NEXT_PUBLIC_APP_CONFIG_ENDPOINT=
-SANDBOX_ID=
+NEXT_PUBLIC_CONN_DETAILS_ENDPOINT=http://localhost:3000/api/connection-details
+# NEXT_PUBLIC_APP_CONFIG_ENDPOINT=
diff --git a/.github/assets/frontend-screenshot.png b/.github/assets/frontend-screenshot.png
deleted file mode 100644
index 13446af..0000000
Binary files a/.github/assets/frontend-screenshot.png and /dev/null differ
diff --git a/.github/assets/readme-hero-dark.webp b/.github/assets/readme-hero-dark.webp
new file mode 100644
index 0000000..5f1af31
Binary files /dev/null and b/.github/assets/readme-hero-dark.webp differ
diff --git a/.github/assets/readme-hero-light.webp b/.github/assets/readme-hero-light.webp
new file mode 100644
index 0000000..90dff5c
Binary files /dev/null and b/.github/assets/readme-hero-light.webp differ
diff --git a/.github/assets/screenshot-dark.webp b/.github/assets/screenshot-dark.webp
new file mode 100644
index 0000000..7139d06
Binary files /dev/null and b/.github/assets/screenshot-dark.webp differ
diff --git a/.github/assets/screenshot-light.webp b/.github/assets/screenshot-light.webp
new file mode 100644
index 0000000..f0c61ae
Binary files /dev/null and b/.github/assets/screenshot-light.webp differ
diff --git a/README.md b/README.md
index 01ae5c9..89faa5e 100644
--- a/README.md
+++ b/README.md
@@ -1,18 +1,61 @@
-<img src="./.github/assets/app-icon.png" alt="Voice Assistant App Icon" width="100" height="100">
-
 # Web Embed Agent Starter
 
 This is a starter template for [LiveKit Agents](https://docs.livekit.io/agents) that provides an example of how you might approach building web embed using the [LiveKit JavaScript SDK](https://github.com/livekit/client-sdk-js). It supports [voice](https://docs.livekit.io/agents/start/voice-ai) and [transcriptions](https://docs.livekit.io/agents/build/text/).
 
 This template is built with Next.js and is free for you to use or modify as you see fit.
 
-![App screenshot](/.github/assets/frontend-screenshot.png)
+<picture>
+  <source srcset="./.github/assets/readme-hero-dark.webp" media="(prefers-color-scheme: dark)">
+  <source srcset="./.github/assets/readme-hero-light.webp" media="(prefers-color-scheme: light)">
+  <img src="./.github/assets/readme-hero-light.webp" alt="App screenshot">
+</picture>
+
+### Features:
+
+- Real-time voice interaction with LiveKit Agents
+- Camera video streaming support
+- Screen sharing capabilities
+- Audio visualization and level monitoring
+- Virtual avatar integration
+- Light/dark theme switching with system preference detection
+- Customizable branding, colors, and UI text via configuration
+
+This template is built with Next.js and is free for you to use or modify as you see fit.
+
+### Project structure
+
+```
+agent-starter-react/
+├── app/
+│   ├── (app)/
+│   ├── (iframe)/
+│   ├── api/
+│   ├── test/
+│   ├── favicon.ico
+├── components/
+│   ├── embed-iframe/
+│   ├── embed-popup/
+│   ├── livekit/
+│   ├── ui/
+│   ├── popup-page.tsx
+│   ├── root-layout.tsx
+│   └── theme-toggle.tsx
+│   └── welcome.tsx
+│   └── ...
+├── hooks/
+├── lib/
+├── public/
+├── styles/
+└── package.json
+```
 
 ## Getting started
 
 > [!TIP]
 > If you'd like to try this application without modification, you can deploy an instance in just a few clicks with [LiveKit Cloud Sandbox](https://cloud.livekit.io/projects/p_/sandbox/templates/agent-starter-embed).
 
+[![Open on LiveKit](https://img.shields.io/badge/Open%20on%20LiveKit%20Cloud-002CF2?style=for-the-badge&logo=external-link)](https://cloud.livekit.io/projects/p_/sandbox/templates/agent-starter-embed)
+
 Run the following command to automatically clone this template.
 
 ```bash
@@ -34,15 +77,54 @@ You'll also need an agent to speak with. Try our starter agent for [Python](http
 > [!NOTE]
 > If you need to modify the LiveKit project credentials used, you can edit `.env.local` (copy from `.env.example` if you don't have one) to suit your needs.
 
+## Configuration
+
+This starter is designed to be flexible so you can adapt it to your specific agent use case. You can easily configure it to work with different types of inputs and outputs:
+
+#### Example: App configuration (`app-config.ts`)
+
+```ts
+export const APP_CONFIG_DEFAULTS = {
+  supportsChatInput: true,
+  supportsVideoInput: true,
+  supportsScreenShare: true,
+  isPreConnectBufferEnabled: true,
+};
+```
+
+You can update these values in [`app-config.ts`](./app-config.ts) to customize branding, features, and UI text for your deployment.
+
+#### Environment Variables
+
+You'll also need to configure your LiveKit credentials in `.env.local` (copy `.env.example` if you don't have one):
+
+```env
+LIVEKIT_API_KEY=your_livekit_api_key
+LIVEKIT_API_SECRET=your_livekit_api_secret
+LIVEKIT_URL=https://your-livekit-server-url
+
+NEXT_PUBLIC_CONN_DETAILS_ENDPOINT=http://localhost:3000/api/connection-details
+```
+
+These are required for the voice agent functionality to work with your LiveKit project.
+
 ## Local Development
 
 http://localhost:3000 will respond to code changes in real time through [NextJS Fast Refresh](https://nextjs.org/docs/architecture/fast-refresh) to support a rapid iteration feedback loop.
 
 ## Production deployment of embed-popup.js script
 
-Any code changes you see locally will not be reflected in `embed-popup.js` until you run `pnpm build-embed-popup-script`.
+Once your environment is set up and you've made any configuration changes, you can copy the embed code generated on the welcome page of your LiveKit Sandbox and paste it into your website.
+
+> [!IMPORTANT]
+> You MUST use the embed code generated on the welcome page of your LiveKit Sandbox to ensure LiveKit connection tokens are generated correctly.
+
+## Debugging the build of embed-popup.js script
+
+You can test and debug your latest build of `embed-popup.js` locally at http://localhost:3000/test/popup.
 
-You can test your latest build of `embed-popup.js` at http://localhost:3000/popup.
+> [!IMPORTANT]
+> Code changes you make locally will not be reflected in the bundled `embed-popup.js` script until you run `pnpm build-embed-popup-script`.
 
 ## Contributing
 
diff --git a/app-config.ts b/app-config.ts
index 6c75673..345e00c 100644
--- a/app-config.ts
+++ b/app-config.ts
@@ -1,18 +1,8 @@
 import type { AppConfig } from './lib/types';
 
 export const APP_CONFIG_DEFAULTS: AppConfig = {
-  companyName: 'LiveKit',
-  pageTitle: 'LiveKit Embed',
-  pageDescription: 'A web embed connected to an agent, built with LiveKit',
-
   supportsChatInput: true,
   supportsVideoInput: true,
   supportsScreenShare: true,
   isPreConnectBufferEnabled: true,
-
-  logo: '/lk-logo.svg',
-  accent: '#002cf2',
-  logoDark: '/lk-logo-dark.svg',
-  accentDark: '#1fd5f9',
-  startButtonText: 'Start call',
 };
diff --git a/app/(app)/popup/layout.tsx b/app/(app)/popup/layout.tsx
deleted file mode 100644
index 312f7f0..0000000
--- a/app/(app)/popup/layout.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ApplyThemeScript } from '@/components/theme-toggle';
-
-export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <>
-      <ApplyThemeScript />
-      {children}
-    </>
-  );
-}
diff --git a/app/(app)/popup/page.tsx b/app/(app)/popup/page.tsx
deleted file mode 100644
index d25addd..0000000
--- a/app/(app)/popup/page.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import PopupPageDynamic from '@/components/popup-page-dynamic';
-
-export default function Page() {
-  return <PopupPageDynamic />;
-}
diff --git a/app/api/connection-details/route.ts b/app/api/connection-details/route.ts
index 04f3160..02d6542 100644
--- a/app/api/connection-details/route.ts
+++ b/app/api/connection-details/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
 import { AccessToken, type AccessTokenOptions, type VideoGrant } from 'livekit-server-sdk';
+import { RoomConfiguration } from '@livekit/protocol';
 
 // NOTE: you are expected to define the following environment variables in `.env.local`:
 const API_KEY = process.env.LIVEKIT_API_KEY;
@@ -16,7 +17,7 @@ export type ConnectionDetails = {
   participantToken: string;
 };
 
-export async function GET() {
+export async function POST(req: Request) {
   try {
     if (LIVEKIT_URL === undefined) {
       throw new Error('LIVEKIT_URL is not defined');
@@ -28,13 +29,19 @@ export async function GET() {
       throw new Error('LIVEKIT_API_SECRET is not defined');
     }
 
+    // Parse agent configuration from request body
+    const body = await req.json();
+    const agentName: string = body?.room_config?.agents?.[0]?.agent_name;
+
     // Generate participant token
     const participantName = 'user';
     const participantIdentity = `voice_assistant_user_${Math.floor(Math.random() * 10_000)}`;
     const roomName = `voice_assistant_room_${Math.floor(Math.random() * 10_000)}`;
+
     const participantToken = await createParticipantToken(
       { identity: participantIdentity, name: participantName },
-      roomName
+      roomName,
+      agentName
     );
 
     // Return connection details
@@ -56,7 +63,11 @@ export async function GET() {
   }
 }
 
-function createParticipantToken(userInfo: AccessTokenOptions, roomName: string) {
+function createParticipantToken(
+  userInfo: AccessTokenOptions,
+  roomName: string,
+  agentName?: string
+): Promise<string> {
   const at = new AccessToken(API_KEY, API_SECRET, {
     ...userInfo,
     ttl: '15m',
@@ -69,5 +80,12 @@ function createParticipantToken(userInfo: AccessTokenOptions, roomName: string)
     canSubscribe: true,
   };
   at.addGrant(grant);
+
+  if (agentName) {
+    at.roomConfig = new RoomConfiguration({
+      agents: [{ agentName }],
+    });
+  }
+
   return at.toJwt();
 }
diff --git a/app/test/layout.tsx b/app/test/layout.tsx
new file mode 100644
index 0000000..8f80eae
--- /dev/null
+++ b/app/test/layout.tsx
@@ -0,0 +1,11 @@
+interface RootLayoutProps {
+  children: React.ReactNode;
+}
+
+export default async function Layout({ children }: RootLayoutProps) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
diff --git a/app/test/popup/page.tsx b/app/test/popup/page.tsx
new file mode 100644
index 0000000..e948fb5
--- /dev/null
+++ b/app/test/popup/page.tsx
@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Script from 'next/script';
+import { getSandboxId } from '@/lib/env';
+import './styles.css';
+
+const CODE_SNIPPET = `
+function toggleTheme() {
+  var embedWrapper = document.querySelector('#lk-embed-wrapper');
+
+  if (embedWrapper) {
+    embedWrapper.classList.toggle('dark');
+  }
+}
+`.trim();
+
+export default function Page() {
+  const [sandboxId, setSandboxId] = useState('');
+
+  useEffect(() => {
+    setSandboxId(getSandboxId(window.location.origin));
+  }, []);
+
+  function handleToggleTheme() {
+    const doc = document.documentElement;
+    const popupWrapper = document.querySelector('#lk-embed-wrapper');
+
+    doc.classList.toggle('page-dark');
+
+    if (popupWrapper) {
+      popupWrapper.classList.toggle('dark');
+    }
+  }
+
+  return (
+    <div>
+      <p>This page has a minimal stylesheet inorder to test the embed-popup.js bundled styles</p>
+      <p>
+        Ensure you have run <code>pnpm build-embed-popup-script</code> after your latest code
+        changes.
+      </p>
+      <p>
+        In order to toggle the theme on the popup, <br />
+        apply the class `dark` to the root element (#lk-embed-wrapper)
+      </p>
+
+      <pre>
+        <code>{CODE_SNIPPET}</code>
+      </pre>
+
+      <p>
+        <button onClick={handleToggleTheme}>toggle theme</button>
+      </p>
+      {sandboxId && <Script src="/embed-popup.js" data-lk-sandbox-id={sandboxId} />}
+    </div>
+  );
+}
diff --git a/app/test/popup/styles.css b/app/test/popup/styles.css
new file mode 100644
index 0000000..8b7b88a
--- /dev/null
+++ b/app/test/popup/styles.css
@@ -0,0 +1,9 @@
+:root {
+  background-color: #fff;
+  color: #000;
+}
+
+.page-dark {
+  background-color: #000;
+  color: #fff;
+}
diff --git a/components/embed-iframe/agent-client.tsx b/components/embed-iframe/agent-client.tsx
index bfa0a6b..c939220 100644
--- a/components/embed-iframe/agent-client.tsx
+++ b/components/embed-iframe/agent-client.tsx
@@ -21,7 +21,7 @@ interface AppProps {
 function EmbedAgentClient({ appConfig }: AppProps) {
   const room = useMemo(() => new Room(), []);
   const [sessionStarted, setSessionStarted] = useState(false);
-  const { connectionDetails, refreshConnectionDetails } = useConnectionDetails();
+  const { connectionDetails, refreshConnectionDetails } = useConnectionDetails(appConfig);
 
   const [currentError, setCurrentError] = useState<EmbedErrorDetails | null>(null);
 
diff --git a/components/embed-popup/action-bar.tsx b/components/embed-popup/action-bar.tsx
new file mode 100644
index 0000000..8e2cf4b
--- /dev/null
+++ b/components/embed-popup/action-bar.tsx
@@ -0,0 +1,215 @@
+'use client';
+
+import * as React from 'react';
+import { useCallback } from 'react';
+import { Track } from 'livekit-client';
+import { BarVisualizer, useRemoteParticipants } from '@livekit/components-react';
+import { ChatTextIcon } from '@phosphor-icons/react/dist/ssr';
+import { ChatInput } from '@/components/livekit/chat/chat-input';
+import { DeviceSelect } from '@/components/livekit/device-select';
+import { TrackToggle } from '@/components/livekit/track-toggle';
+import { Toggle } from '@/components/ui/toggle';
+import { UseAgentControlBarProps, useAgentControlBar } from '@/hooks/use-agent-control-bar';
+import { AppConfig } from '@/lib/types';
+import { cn } from '@/lib/utils';
+
+export interface AgentControlBarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    UseAgentControlBarProps {
+  capabilities: Pick<AppConfig, 'supportsChatInput' | 'supportsVideoInput' | 'supportsScreenShare'>;
+  onChatOpenChange?: (open: boolean) => void;
+  onSendMessage?: (message: string) => Promise<void>;
+  onDeviceError?: (error: { source: Track.Source; error: Error }) => void;
+}
+
+/**
+ * A control bar specifically designed for voice assistant interfaces
+ */
+export function ActionBar({
+  controls,
+  saveUserChoices = true,
+  capabilities,
+  className,
+  onSendMessage,
+  onChatOpenChange,
+  onDeviceError,
+  ...props
+}: AgentControlBarProps) {
+  const participants = useRemoteParticipants();
+  const [chatOpen, setChatOpen] = React.useState(false);
+  const [isSendingMessage, setIsSendingMessage] = React.useState(false);
+
+  const isAgentAvailable = participants.some((p) => p.isAgent);
+  const isInputDisabled = !chatOpen || !isAgentAvailable || isSendingMessage;
+
+  const {
+    micTrackRef,
+    visibleControls,
+    cameraToggle,
+    microphoneToggle,
+    screenShareToggle,
+    handleAudioDeviceChange,
+    handleVideoDeviceChange,
+  } = useAgentControlBar({
+    controls,
+    saveUserChoices,
+  });
+
+  const handleSendMessage = async (message: string) => {
+    setIsSendingMessage(true);
+    try {
+      await onSendMessage?.(message);
+    } finally {
+      setIsSendingMessage(false);
+    }
+  };
+
+  React.useEffect(() => {
+    onChatOpenChange?.(chatOpen);
+  }, [chatOpen, onChatOpenChange]);
+
+  const onMicrophoneDeviceSelectError = useCallback(
+    (error: Error) => {
+      onDeviceError?.({ source: Track.Source.Microphone, error });
+    },
+    [onDeviceError]
+  );
+  const onCameraDeviceSelectError = useCallback(
+    (error: Error) => {
+      onDeviceError?.({ source: Track.Source.Camera, error });
+    },
+    [onDeviceError]
+  );
+
+  return (
+    <div
+      aria-label="Voice assistant controls"
+      className={cn(
+        'bg-background border-separator1 dark:border-separator1 relative z-20 mx-2 mb-1 flex flex-col rounded-[24px] border p-1 drop-shadow-md',
+        className
+      )}
+      {...props}
+    >
+      {capabilities.supportsChatInput && (
+        <div
+          inert={!chatOpen}
+          className={cn(
+            'relative overflow-hidden transition-[height] duration-300 ease-out',
+            chatOpen ? 'h-[46px]' : 'h-0'
+          )}
+        >
+          <div
+            className={cn(
+              'absolute inset-x-0 top-0 flex h-9 w-full transition-opacity duration-150 ease-linear',
+              chatOpen ? 'opacity-100 delay-150' : 'opacity-0'
+            )}
+          >
+            <ChatInput onSend={handleSendMessage} disabled={isInputDisabled} className="w-full" />
+          </div>
+          <hr className="border-bg2 absolute inset-x-0 bottom-0 my-1 w-full" />
+        </div>
+      )}
+
+      <div className="flex flex-row justify-between gap-1">
+        <div className="flex gap-1">
+          {visibleControls.microphone && (
+            <div className="flex items-center gap-0">
+              <TrackToggle
+                variant="primary"
+                source={Track.Source.Microphone}
+                pressed={microphoneToggle.enabled}
+                disabled={microphoneToggle.pending}
+                onPressedChange={microphoneToggle.toggle}
+                className="peer/track group/track relative w-auto pr-3 pl-3 has-[+_*]:rounded-r-none has-[+_*]:border-r-0 has-[+_*]:pr-2"
+              >
+                <BarVisualizer
+                  barCount={3}
+                  trackRef={micTrackRef}
+                  options={{ minHeight: 5 }}
+                  className="flex h-full w-auto items-center justify-center gap-0.5"
+                >
+                  <span
+                    className={cn([
+                      'h-full w-0.5 origin-center rounded-2xl',
+                      'group-data-[state=on]/track:bg-fg1 group-data-[state=off]/track:bg-destructive-foreground',
+                      'data-lk-muted:bg-muted',
+                    ])}
+                  ></span>
+                </BarVisualizer>
+              </TrackToggle>
+              <DeviceSelect
+                size="sm"
+                kind="audioinput"
+                requestPermissions={false}
+                onMediaDeviceError={onMicrophoneDeviceSelectError}
+                onActiveDeviceChange={handleAudioDeviceChange}
+                className={cn([
+                  'pl-2',
+                  'peer-data-[state=off]/track:text-destructive-foreground',
+                  'hover:text-fg1 focus:text-fg1',
+                  'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
+                  'hidden rounded-l-none md:block',
+                ])}
+              />
+            </div>
+          )}
+
+          {capabilities.supportsVideoInput && visibleControls.camera && (
+            <div className="flex items-center gap-0">
+              <TrackToggle
+                variant="primary"
+                source={Track.Source.Camera}
+                pressed={cameraToggle.enabled}
+                pending={cameraToggle.pending}
+                disabled={cameraToggle.pending}
+                onPressedChange={cameraToggle.toggle}
+                className="peer/track relative w-auto pr-3 pl-3 disabled:opacity-100 has-[+_*]:rounded-r-none has-[+_*]:border-r-0 has-[+_*]:pr-2"
+              />
+              <DeviceSelect
+                size="sm"
+                kind="videoinput"
+                requestPermissions={false}
+                onMediaDeviceError={onCameraDeviceSelectError}
+                onActiveDeviceChange={handleVideoDeviceChange}
+                className={cn([
+                  'pl-2',
+                  'peer-data-[state=off]/track:text-destructive-foreground',
+                  'hover:text-fg1 focus:text-fg1',
+                  'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
+                  'rounded-l-none',
+                ])}
+              />
+            </div>
+          )}
+        </div>
+        <div className="flex gap-1">
+          {capabilities.supportsScreenShare && visibleControls.screenShare && (
+            <div className="flex items-center gap-0">
+              <TrackToggle
+                variant="secondary"
+                source={Track.Source.ScreenShare}
+                pressed={screenShareToggle.enabled}
+                disabled={screenShareToggle.pending}
+                onPressedChange={screenShareToggle.toggle}
+                className="relative w-auto"
+              />
+            </div>
+          )}
+
+          {visibleControls.chat && (
+            <Toggle
+              variant="secondary"
+              aria-label="Toggle chat"
+              pressed={chatOpen}
+              onPressedChange={setChatOpen}
+              disabled={!isAgentAvailable}
+              className="aspect-square h-full"
+            >
+              <ChatTextIcon weight="bold" />
+            </Toggle>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/components/embed-popup/agent-client.tsx b/components/embed-popup/agent-client.tsx
index 57bd10e..c2e6e0e 100644
--- a/components/embed-popup/agent-client.tsx
+++ b/components/embed-popup/agent-client.tsx
@@ -1,38 +1,48 @@
 'use client';
 
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Room, RoomEvent } from 'livekit-client';
 import { motion } from 'motion/react';
 import { RoomAudioRenderer, RoomContext, StartAudio } from '@livekit/components-react';
-import { XIcon } from '@phosphor-icons/react';
+import { ErrorMessage } from '@/components/embed-popup/error-message';
 import { PopupView } from '@/components/embed-popup/popup-view';
 import { Trigger } from '@/components/embed-popup/trigger';
-import { Button } from '@/components/ui/button';
 import useConnectionDetails from '@/hooks/use-connection-details';
 import { type AppConfig, EmbedErrorDetails } from '@/lib/types';
-import { cn } from '@/lib/utils';
+
+const PopupViewMotion = motion.create(PopupView);
 
 export type EmbedFixedAgentClientProps = {
   appConfig: AppConfig;
 };
 
-function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
+function AgentClient({ appConfig }: EmbedFixedAgentClientProps) {
+  const isAnimating = useRef(false);
   const room = useMemo(() => new Room(), []);
   const [popupOpen, setPopupOpen] = useState(false);
-  const [currentError, setCurrentError] = useState<EmbedErrorDetails | null>(null);
-  const { connectionDetails, refreshConnectionDetails } = useConnectionDetails();
+  const [error, setError] = useState<EmbedErrorDetails | null>(null);
+  const { connectionDetails, refreshConnectionDetails, existingOrRefreshConnectionDetails } =
+    useConnectionDetails(appConfig);
 
   const handleTogglePopup = () => {
+    if (isAnimating.current) {
+      // prevent re-opening before room has disconnected
+      return;
+    }
+
+    setError(null);
     setPopupOpen((open) => !open);
+  };
 
-    if (currentError) {
-      handleDismissError();
-    }
+  const handlePanelAnimationStart = () => {
+    isAnimating.current = true;
   };
 
-  const handleDismissError = () => {
-    room.disconnect();
-    setCurrentError(null);
+  const handlePanelAnimationComplete = () => {
+    isAnimating.current = false;
+    if (!popupOpen && room.state !== 'disconnected') {
+      room.disconnect();
+    }
   };
 
   useEffect(() => {
@@ -41,7 +51,7 @@ function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
       refreshConnectionDetails();
     };
     const onMediaDevicesError = (error: Error) => {
-      setCurrentError({
+      setError({
         title: 'Encountered an error with your media devices',
         description: `${error.name}: ${error.message}`,
       });
@@ -58,42 +68,51 @@ function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
     if (!popupOpen) {
       return;
     }
-    if (room.state !== 'disconnected') {
+    if (!connectionDetails) {
+      setError({
+        title: 'Error fetching connection details',
+        description: 'Please try again later',
+      });
       return;
     }
-    if (!connectionDetails) {
+    if (room.state !== 'disconnected') {
       return;
     }
 
     const connect = async () => {
-      try {
-        await room.connect(connectionDetails.serverUrl, connectionDetails.participantToken);
-        await room.localParticipant.setMicrophoneEnabled(true, undefined, {
+      Promise.all([
+        room.localParticipant.setMicrophoneEnabled(true, undefined, {
           preConnectBuffer: appConfig.isPreConnectBufferEnabled,
-        });
-      } catch (error: unknown) {
+        }),
+        existingOrRefreshConnectionDetails().then((connectionDetails) =>
+          room.connect(connectionDetails.serverUrl, connectionDetails.participantToken)
+        ),
+      ]).catch((error) => {
         if (error instanceof Error) {
           console.error('Error connecting to agent:', error);
-          setCurrentError({
+          setError({
             title: 'There was an error connecting to the agent',
             description: `${error.name}: ${error.message}`,
           });
         }
-      }
+      });
     };
-    connect();
 
-    return () => {
-      room.disconnect();
-    };
-  }, [room, popupOpen, connectionDetails, appConfig.isPreConnectBufferEnabled]);
+    connect();
+  }, [
+    room,
+    popupOpen,
+    connectionDetails,
+    existingOrRefreshConnectionDetails,
+    appConfig.isPreConnectBufferEnabled,
+  ]);
 
   return (
     <RoomContext.Provider value={room}>
       <RoomAudioRenderer />
       <StartAudio label="Start Audio" />
 
-      <Trigger error={!!currentError} popupOpen={popupOpen} onToggle={handleTogglePopup} />
+      <Trigger error={error} popupOpen={popupOpen} onToggle={handleTogglePopup} />
 
       <motion.div
         inert={!popupOpen}
@@ -107,53 +126,31 @@ function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
         }}
         transition={{
           type: 'spring',
-          duration: 1,
           bounce: 0,
+          duration: popupOpen ? 1 : 0.2,
         }}
-        className="fixed right-0 bottom-20 z-50 w-full px-4"
+        onAnimationStart={handlePanelAnimationStart}
+        onAnimationComplete={handlePanelAnimationComplete}
+        className="fixed right-4 bottom-20 left-4 z-50 md:left-auto"
       >
-        <div className="bg-bg2 dark:bg-bg1 border-separator1 ml-auto h-[480px] w-full rounded-[28px] border drop-shadow-md md:max-w-[360px]">
+        <div className="bg-bg1 dark:bg-bg2 border-separator1 dark:border-separator2 ml-auto h-[480px] w-full rounded-[28px] border border-solid drop-shadow-md md:w-[360px]">
           <div className="relative h-full w-full">
-            <div
-              inert={currentError === null}
-              className={cn(
-                'absolute inset-0 flex h-full w-full flex-col items-center justify-center gap-5 transition-opacity',
-                currentError === null ? 'opacity-0' : 'opacity-100'
-              )}
-            >
-              <div className="pl-3">
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src="/lk-logo.svg" alt="LiveKit Logo" className="block size-6 dark:hidden" />
-                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img
-                  src="/lk-logo-dark.svg"
-                  alt="LiveKit Logo"
-                  className="hidden size-6 dark:block"
-                />
-              </div>
-
-              <div className="flex w-full flex-col justify-center gap-1 overflow-auto px-4 text-center">
-                <span className="text-sm font-medium">{currentError?.title}</span>
-                <span className="text-xs">{currentError?.description}</span>
-              </div>
-
-              <Button variant="secondary" onClick={handleDismissError}>
-                <XIcon /> Dismiss
-              </Button>
-            </div>
-            <div
-              inert={currentError !== null}
-              className={cn(
-                'absolute inset-0 transition-opacity',
-                currentError === null ? 'opacity-100' : 'opacity-0'
-              )}
-            >
-              <PopupView
+            <ErrorMessage error={error} />
+            {!error && (
+              <PopupViewMotion
+                appConfig={appConfig}
+                initial={{ opacity: 1 }}
+                animate={{ opacity: error === null ? 1 : 0 }}
+                transition={{
+                  type: 'linear',
+                  duration: 0.2,
+                }}
                 disabled={!popupOpen}
                 sessionStarted={popupOpen}
-                onDisplayError={setCurrentError}
+                onEmbedError={setError}
+                className="absolute inset-0"
               />
-            </div>
+            )}
           </div>
         </div>
       </motion.div>
@@ -161,4 +158,4 @@ function EmbedFixedAgentClient({ appConfig }: EmbedFixedAgentClientProps) {
   );
 }
 
-export default EmbedFixedAgentClient;
+export default AgentClient;
diff --git a/components/embed-popup/audio-visualizer.tsx b/components/embed-popup/audio-visualizer.tsx
new file mode 100644
index 0000000..b0444e4
--- /dev/null
+++ b/components/embed-popup/audio-visualizer.tsx
@@ -0,0 +1,27 @@
+import { type AgentState, BarVisualizer, type TrackReference } from '@livekit/components-react';
+import { cn } from '@/lib/utils';
+
+interface AudioVisualizerProps {
+  agentState: AgentState;
+  audioTrack?: TrackReference;
+}
+
+export function AudioVisualizer({ agentState, audioTrack }: AudioVisualizerProps) {
+  return (
+    <BarVisualizer
+      barCount={5}
+      state={agentState}
+      trackRef={audioTrack}
+      options={{ minHeight: 5 }}
+      className="flex h-full w-auto items-center justify-center gap-3"
+    >
+      <span
+        className={cn([
+          'bg-muted min-h-6 w-6 rounded-full',
+          'origin-center transition-colors duration-250 ease-linear',
+          'data-[lk-highlighted=true]:bg-foreground data-[lk-muted=true]:bg-muted',
+        ])}
+      />
+    </BarVisualizer>
+  );
+}
diff --git a/components/embed-popup/error-message.tsx b/components/embed-popup/error-message.tsx
new file mode 100644
index 0000000..992a235
--- /dev/null
+++ b/components/embed-popup/error-message.tsx
@@ -0,0 +1,30 @@
+import { EmbedErrorDetails } from '@/lib/types';
+import { cn } from '@/lib/utils';
+
+interface ErrorMessageProps {
+  error: EmbedErrorDetails | null;
+}
+
+export function ErrorMessage({ error }: ErrorMessageProps) {
+  return (
+    <div
+      inert={error === null}
+      className={cn(
+        'absolute inset-0 z-50 flex h-full w-full flex-col items-center justify-center gap-5 transition-opacity',
+        error === null ? 'opacity-0' : 'opacity-100'
+      )}
+    >
+      <div className="pl-3">
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/lk-logo.svg" alt="LiveKit Logo" className="block size-6 dark:hidden" />
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img src="/lk-logo-dark.svg" alt="LiveKit Logo" className="hidden size-6 dark:block" />
+      </div>
+
+      <div className="flex w-full flex-col justify-center gap-4 overflow-auto px-8 text-center">
+        <span className="leading-tight font-medium text-pretty">{error?.title}</span>
+        <span className="text-sm text-balance">{error?.description}</span>
+      </div>
+    </div>
+  );
+}
diff --git a/components/embed-popup/microphone-toggle.tsx b/components/embed-popup/microphone-toggle.tsx
new file mode 100644
index 0000000..cfd09fa
--- /dev/null
+++ b/components/embed-popup/microphone-toggle.tsx
@@ -0,0 +1,64 @@
+import { Track } from 'livekit-client';
+import {
+  BarVisualizer,
+  type TrackReferenceOrPlaceholder,
+  useTrackToggle,
+} from '@livekit/components-react';
+import { DeviceSelect } from '@/components/livekit/device-select';
+import { TrackToggle } from '@/components/livekit/track-toggle';
+import { cn } from '@/lib/utils';
+
+interface MicrophoneToggleProps {
+  micTrackRef: TrackReferenceOrPlaceholder;
+  microphoneToggle: ReturnType<typeof useTrackToggle<Track.Source.Microphone>>;
+  handleAudioDeviceChange: (deviceId: string) => void;
+}
+
+export function MicrophoneToggle({
+  microphoneToggle,
+  micTrackRef,
+  handleAudioDeviceChange,
+}: MicrophoneToggleProps) {
+  return (
+    <div className="flex items-center gap-0">
+      <TrackToggle
+        variant="primary"
+        source={Track.Source.Microphone}
+        pressed={microphoneToggle.enabled}
+        disabled={microphoneToggle.pending}
+        onPressedChange={microphoneToggle.toggle}
+        className="peer/track group/track relative w-auto pr-3 pl-3 md:rounded-r-none md:border-r-0 md:pr-2"
+      >
+        <BarVisualizer
+          barCount={3}
+          trackRef={micTrackRef}
+          options={{ minHeight: 5 }}
+          className="flex h-full w-auto items-center justify-center gap-0.5"
+        >
+          <span
+            className={cn([
+              'h-full w-0.5 origin-center rounded-2xl',
+              'group-data-[state=on]/track:bg-fg1 group-data-[state=off]/track:bg-destructive-foreground',
+              'data-lk-muted:bg-muted',
+            ])}
+          ></span>
+        </BarVisualizer>
+      </TrackToggle>
+
+      <hr className="bg-separator1 peer-data-[state=off]/track:bg-separatorSerious relative z-10 -mr-px hidden h-4 w-px md:block" />
+
+      <DeviceSelect
+        size="sm"
+        kind="audioinput"
+        onActiveDeviceChange={handleAudioDeviceChange}
+        className={cn([
+          'pl-2',
+          'peer-data-[state=off]/track:text-destructive-foreground',
+          'hover:text-fg1 focus:text-fg1',
+          'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
+          'hidden rounded-l-none md:block',
+        ])}
+      />
+    </div>
+  );
+}
diff --git a/components/embed-popup/popup-view.tsx b/components/embed-popup/popup-view.tsx
index 260f79f..b4af5f1 100644
--- a/components/embed-popup/popup-view.tsx
+++ b/components/embed-popup/popup-view.tsx
@@ -1,64 +1,87 @@
 'use client';
 
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Track } from 'livekit-client';
 import { AnimatePresence, motion } from 'motion/react';
 import {
   type AgentState,
-  BarVisualizer,
+  type TrackReference,
+  useLocalParticipant,
   useRoomContext,
+  useTracks,
   useVoiceAssistant,
 } from '@livekit/components-react';
-import { ChatEntry } from '@/components/livekit/chat/chat-entry';
-import { DeviceSelect } from '@/components/livekit/device-select';
-import { TrackToggle } from '@/components/livekit/track-toggle';
-import { useAgentControlBar } from '@/hooks/use-agent-control-bar';
+import { ActionBar } from '@/components/embed-popup/action-bar';
+import { AudioVisualizer } from '@/components/embed-popup/audio-visualizer';
+import { Transcript } from '@/components/embed-popup/transcript';
+import { AvatarTile } from '@/components/livekit/avatar-tile';
 import useChatAndTranscription from '@/hooks/use-chat-and-transcription';
 import { useDebugMode } from '@/hooks/useDebug';
-import type { EmbedErrorDetails } from '@/lib/types';
+import type { AppConfig, EmbedErrorDetails } from '@/lib/types';
 import { cn } from '@/lib/utils';
-import { AvatarTile } from '../livekit/avatar-tile';
-import { ChatInput } from '../livekit/chat/chat-input';
+
+const TILE_TRANSITION = {
+  type: 'spring',
+  stiffness: 675,
+  damping: 75,
+  mass: 1,
+};
+
+const TranscriptMotion = motion.create(Transcript);
+
+export function useLocalTrackRef(source: Track.Source) {
+  const { localParticipant } = useLocalParticipant();
+  const publication = localParticipant.getTrackPublication(source);
+  const trackRef = useMemo<TrackReference | undefined>(
+    () => (publication ? { source, participant: localParticipant, publication } : undefined),
+    [source, publication, localParticipant]
+  );
+  return trackRef;
+}
 
 function isAgentAvailable(agentState: AgentState) {
   return agentState == 'listening' || agentState == 'thinking' || agentState == 'speaking';
 }
 
-type SessionViewProps = {
+type PopupProps = {
+  appConfig: AppConfig;
   disabled: boolean;
   sessionStarted: boolean;
-  onDisplayError: (err: EmbedErrorDetails) => void;
+  onEmbedError: React.Dispatch<React.SetStateAction<EmbedErrorDetails | null>>;
 };
 
 export const PopupView = ({
+  appConfig,
   disabled,
   sessionStarted,
-  onDisplayError,
+  onEmbedError,
   ref,
-}: React.ComponentProps<'div'> & SessionViewProps) => {
+}: React.ComponentProps<'div'> & PopupProps) => {
+  useDebugMode();
+
   const room = useRoomContext();
-  const transcriptRef = useRef<HTMLDivElement>(null);
   const {
     state: agentState,
     audioTrack: agentAudioTrack,
     videoTrack: agentVideoTrack,
   } = useVoiceAssistant();
-  const agentHasAvatar = agentVideoTrack !== undefined;
-
-  const {
-    micTrackRef,
-    // FIXME: how do I explicitly ensure only the microphone channel is used?
-    visibleControls,
-    microphoneToggle,
-    handleAudioDeviceChange,
-  } = useAgentControlBar({
-    controls: { microphone: true },
-    saveUserChoices: true,
-  });
+  const { isCameraEnabled, isScreenShareEnabled } = useLocalParticipant();
+  const [screenShareTrack] = useTracks([Track.Source.ScreenShare]);
+  const cameraTrack: TrackReference | undefined = useLocalTrackRef(Track.Source.Camera);
+  const [chatOpen, setChatOpen] = useState(false);
   const { messages, send } = useChatAndTranscription();
-  const onSend = (message: string) => send(message);
 
-  useDebugMode();
+  const { supportsChatInput, supportsVideoInput, supportsScreenShare } = appConfig;
+  const capabilities = {
+    supportsChatInput,
+    supportsVideoInput,
+    supportsScreenShare,
+  };
+
+  async function onSendMessage(message: string) {
+    await send(message);
+    return;
+  }
 
   // If the agent hasn't connected after an interval,
   // then show an error - something must not be working
@@ -74,7 +97,7 @@ export const PopupView = ({
             ? 'Agent did not join the room. '
             : 'Agent connected but did not complete initializing. ';
 
-        onDisplayError({
+        onEmbedError({
           title: 'Session ended',
           description: <p className="w-full">{reason}</p>,
         });
@@ -82,171 +105,169 @@ export const PopupView = ({
     }, 10_000);
 
     return () => clearTimeout(timeout);
-  }, [agentState, sessionStarted, room, onDisplayError]);
-
-  useEffect(() => {
-    function scrollToBottom() {
-      const scrollingElement = transcriptRef.current;
-
-      if (scrollingElement) {
-        scrollingElement.scrollTop = scrollingElement.scrollHeight;
-      }
-    }
+  }, [agentState, sessionStarted, room, onEmbedError]);
 
-    if (transcriptRef.current) {
-      const resizeObserver = new ResizeObserver(scrollToBottom);
+  return (
+    <div ref={ref} inert={disabled} className="flex h-full w-full flex-col overflow-hidden">
+      <div className="relative flex h-full shrink-1 grow-1 flex-col py-1">
+        <div className="absolute top-0 left-0 h-full w-1/2" />
+        {/* Audio Visualizer */}
+        <AnimatePresence>
+          {!agentVideoTrack && (
+            <motion.div
+              key="audio-visualizer"
+              initial={{
+                scale: 1,
+                left: '50%',
+                top: '50%',
+                translateX: '-50%',
+                translateY: '-50%',
+                transformOrigin: 'center top',
+              }}
+              animate={{
+                left: chatOpen && (isCameraEnabled || isScreenShareEnabled) ? '39%' : '50%',
+                scale: chatOpen ? 0.275 : 1,
+                top: chatOpen ? '12px' : '50%',
+                translateY: chatOpen ? '0' : '-50%',
+                transformOrigin: chatOpen ? 'center top' : 'center center',
+              }}
+              transition={TILE_TRANSITION}
+              className={cn(
+                'bg-bg1 dark:bg-bg2 pointer-events-none absolute z-10 flex aspect-square w-64 items-center justify-center rounded-2xl border border-transparent transition-colors',
+                chatOpen && 'border-separator1 dark:border-separator2 drop-shadow-2xl'
+              )}
+            >
+              <AudioVisualizer agentState={agentState} audioTrack={agentAudioTrack} />
+            </motion.div>
+          )}
+        </AnimatePresence>
 
-      resizeObserver.observe(transcriptRef.current);
-      scrollToBottom();
+        {/* Avatar (Background)) */}
+        <AnimatePresence>
+          {agentVideoTrack && (
+            <motion.div
+              key="avatar"
+              initial={{
+                maskImage:
+                  'radial-gradient(circle, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 40px, transparent 40px)',
+                filter: 'blur(20px)',
+              }}
+              animate={{
+                opacity: chatOpen ? 0 : 1,
+                maskImage:
+                  'radial-gradient(circle, rgba(0, 0, 0, 1) 0, rgba(0, 0, 0, 1) 500px, transparent 500px)',
+                filter: 'blur(0px)',
+              }}
+              transition={{
+                opacity: {
+                  ease: 'linear',
+                  duration: 0.2,
+                },
+                maskImage: {
+                  ease: 'linear',
+                  duration: 1,
+                },
+                filter: {
+                  ease: 'linear',
+                  duration: 1,
+                },
+              }}
+              className="pointer-events-none absolute inset-1 z-10 overflow-hidden rounded-[24px]"
+            >
+              <AvatarTile videoTrack={agentVideoTrack} className="h-full bg-black object-cover" />
+            </motion.div>
+          )}
+        </AnimatePresence>
 
-      return () => resizeObserver.disconnect();
-    }
-  }, [messages]);
+        {/* Avatar (Tile) */}
+        <AnimatePresence>
+          {agentVideoTrack && chatOpen && (
+            <motion.div
+              key="audio-visualizer"
+              initial={{
+                opacity: 0,
+                scale: 0.5,
+                left: isCameraEnabled || isScreenShareEnabled ? '39%' : '50%',
+                top: '12px',
+                translateX: '-50%',
+                transformOrigin: 'center top',
+              }}
+              animate={{
+                opacity: 1,
+                scale: 1,
+                left: isCameraEnabled || isScreenShareEnabled ? '37.5%' : '50%',
+              }}
+              transition={TILE_TRANSITION}
+              className="pointer-events-none absolute z-10 overflow-hidden rounded-md"
+            >
+              <AvatarTile
+                videoTrack={agentVideoTrack}
+                className="aspect-square w-[70px] bg-black object-cover"
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
 
-  const agentHasConnected =
-    agentState !== 'disconnected' && agentState !== 'connecting' && agentState !== 'initializing';
+        {/* Camera (Tile) */}
+        <AnimatePresence>
+          {((cameraTrack && isCameraEnabled) || (screenShareTrack && isScreenShareEnabled)) && (
+            <motion.div
+              key="camera"
+              initial={{
+                scale: 0.5,
+                opacity: 0,
+                right: '12px',
+                top: '346px',
 
-  return (
-    <div ref={ref} inert={disabled} className="flex h-full w-full flex-col overflow-hidden">
-      <div className="relative flex h-full shrink-1 grow-1 flex-col py-1">
-        <motion.div
-          className={cn(
-            'bg-bg2 dark:bg-bg1 pointer-events-none absolute z-10 flex aspect-[1.5] w-64 items-center justify-center rounded-2xl border border-transparent transition-colors',
-            agentHasConnected && 'bg-bg1 border-separator1 drop-shadow-2xl'
+                transformOrigin: 'center bottom',
+              }}
+              animate={{
+                scale: 1,
+                opacity: 1,
+                top: chatOpen ? '12px' : '346px',
+                right: chatOpen ? '106px' : '12px',
+                transformOrigin: chatOpen ? 'center top' : 'center bottom',
+              }}
+              exit={{
+                scale: 0.5,
+                opacity: 0,
+              }}
+              transition={TILE_TRANSITION}
+              className="pointer-events-none absolute z-10 overflow-hidden rounded-md"
+            >
+              <AvatarTile
+                videoTrack={cameraTrack || screenShareTrack}
+                className="aspect-square w-[70px] bg-black object-cover"
+              />
+            </motion.div>
           )}
+        </AnimatePresence>
+
+        {/* Transcript */}
+        <TranscriptMotion
           initial={{
-            scale: 1,
-            left: '50%',
-            top: '50%',
-            translateX: '-50%',
-            translateY: '-50%',
-            transformOrigin: 'center top',
+            y: 10,
+            opacity: 0,
           }}
           animate={{
-            scale: agentHasConnected ? 0.4 : 1,
-            top: agentHasConnected ? '12px' : '50%',
-            translateY: agentHasConnected ? '0' : '-50%',
+            y: chatOpen ? 0 : 10,
+            opacity: chatOpen ? 1 : 0,
           }}
           transition={{
             type: 'spring',
-            stiffness: 675,
-            damping: 75,
-            mass: 1,
+            duration: 0.5,
+            bounce: 0,
           }}
-        >
-          <BarVisualizer
-            barCount={5}
-            state={agentState}
-            trackRef={agentAudioTrack}
-            options={{ minHeight: 5 }}
-            className="flex h-full w-auto items-center justify-center gap-3"
-          >
-            <span
-              className={cn([
-                'bg-muted min-h-6 w-6 rounded-full',
-                'origin-center transition-colors duration-250 ease-linear',
-                'data-[lk-highlighted=true]:bg-foreground data-[lk-muted=true]:bg-muted',
-              ])}
-            />
-          </BarVisualizer>
-        </motion.div>
+          messages={messages}
+          className="relative z-30"
+        />
 
-        {/* Transcript */}
-        <div
-          ref={transcriptRef}
-          className="flex flex-1 flex-col overflow-y-auto [mask-image:linear-gradient(0deg,rgba(0,0,0,0.2)_0%,rgba(0,0,0,1)_5%,rgba(0,0,0,1)_95%,rgba(0,0,0,0)_100%)] px-1 py-2"
-        >
-          <div className="flex flex-1 flex-col justify-end gap-2 pt-10">
-            <AnimatePresence>
-              {messages.map((message) => (
-                <motion.div
-                  key={message.id}
-                  initial={{ opacity: 0, height: 0 }}
-                  animate={{ opacity: 1, height: 'auto' }}
-                  exit={{ opacity: 1, height: 'auto', translateY: 0.001 }}
-                  transition={{ duration: 0.5, ease: 'easeOut' }}
-                >
-                  <ChatEntry hideName key={message.id} entry={message} />
-                </motion.div>
-              ))}
-            </AnimatePresence>
-          </div>
-        </div>
-
-        <motion.div
-          initial={{ opacity: 0, scale: 0 }}
-          variants={{
-            visible: { opacity: 1, scale: 1 },
-            hidden: { opacity: 0, scale: 0 },
-          }}
-          animate={agentHasAvatar ? 'visible' : 'hidden'}
-          exit={{ opacity: 0, scale: 0 }}
-          transition={{
-            type: 'spring',
-            stiffness: 675,
-            damping: 75,
-            mass: 1,
-          }}
-          className={cn('absolute inset-1 h-full overflow-hidden rounded-t-[24px] pb-8', {
-            'pointer-events-none': !agentHasAvatar,
-          })}
-        >
-          {agentVideoTrack ? (
-            <AvatarTile videoTrack={agentVideoTrack} className="h-full object-cover" />
-          ) : null}
-        </motion.div>
-
-        <div
-          aria-label="Voice assistant controls"
-          className="bg-bg1 border-separator1 relative mx-1 flex h-12 shrink-0 grow-0 items-center gap-1 rounded-full border px-1 drop-shadow-md"
-        >
-          <div className="flex gap-1">
-            {visibleControls.microphone ? (
-              <div className="flex items-center gap-0">
-                <TrackToggle
-                  variant="primary"
-                  source={Track.Source.Microphone}
-                  pressed={microphoneToggle.enabled}
-                  disabled={microphoneToggle.pending}
-                  onPressedChange={microphoneToggle.toggle}
-                  className="peer/track group/track relative w-auto pr-3 pl-3 md:rounded-r-none md:border-r-0 md:pr-2"
-                >
-                  <BarVisualizer
-                    barCount={3}
-                    trackRef={micTrackRef}
-                    options={{ minHeight: 5 }}
-                    className="flex h-full w-auto items-center justify-center gap-0.5"
-                  >
-                    <span
-                      className={cn([
-                        'h-full w-0.5 origin-center rounded-2xl',
-                        'group-data-[state=on]/track:bg-fg1 group-data-[state=off]/track:bg-destructive-foreground',
-                        'data-lk-muted:bg-muted',
-                      ])}
-                    ></span>
-                  </BarVisualizer>
-                </TrackToggle>
-                <hr className="bg-separator1 peer-data-[state=off]/track:bg-separatorSerious relative z-10 -mr-px hidden h-4 w-px md:block" />
-                <DeviceSelect
-                  size="sm"
-                  kind="audioinput"
-                  onActiveDeviceChange={handleAudioDeviceChange}
-                  className={cn([
-                    'pl-2',
-                    'peer-data-[state=off]/track:text-destructive-foreground',
-                    'hover:text-fg1 focus:text-fg1',
-                    'hover:peer-data-[state=off]/track:text-destructive-foreground focus:peer-data-[state=off]/track:text-destructive-foreground',
-                    'hidden rounded-l-none md:block',
-                  ])}
-                />
-              </div>
-            ) : null}
-
-            {/* FIXME: do I need to handle the other channels here? */}
-          </div>
-
-          <ChatInput className="w-0 shrink-1 grow-1" onSend={onSend} />
-        </div>
+        {/* Action Bar */}
+        <ActionBar
+          onSendMessage={onSendMessage}
+          capabilities={capabilities}
+          onChatOpenChange={setChatOpen}
+        />
       </div>
     </div>
   );
diff --git a/components/embed-popup/transcript.tsx b/components/embed-popup/transcript.tsx
new file mode 100644
index 0000000..dbd2322
--- /dev/null
+++ b/components/embed-popup/transcript.tsx
@@ -0,0 +1,81 @@
+import { useCallback, useEffect, useRef } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { type ReceivedChatMessage } from '@livekit/components-react';
+import { ChatEntry } from '@/components/livekit/chat/chat-entry';
+import { cn } from '@/lib/utils';
+
+const ChatEntryMotion = motion.create(ChatEntry);
+
+interface TranscriptProps {
+  messages: ReceivedChatMessage[];
+  className?: string;
+}
+
+export function Transcript({
+  ref,
+  messages,
+  className,
+}: React.ComponentProps<'div'> & TranscriptProps) {
+  const transcriptRef = useRef<HTMLDivElement>(null);
+
+  const handleRef = useCallback(
+    (node: HTMLDivElement) => {
+      transcriptRef.current = node;
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else {
+          ref.current = node;
+        }
+      }
+    },
+    [ref]
+  );
+
+  // auto scroll transcript
+  useEffect(() => {
+    function scrollToBottom() {
+      const scrollingElement = transcriptRef.current;
+
+      if (scrollingElement) {
+        scrollingElement.scrollTop = scrollingElement.scrollHeight;
+      }
+    }
+
+    if (transcriptRef.current) {
+      const resizeObserver = new ResizeObserver(scrollToBottom);
+
+      resizeObserver.observe(transcriptRef.current);
+      scrollToBottom();
+
+      return () => resizeObserver.disconnect();
+    }
+  }, [messages]);
+
+  return (
+    <div
+      ref={handleRef}
+      className={cn(
+        'scrollbar-on-hover flex grow flex-col overflow-x-hidden overflow-y-scroll py-2 pr-3 pl-1',
+        '[mask-image:linear-gradient(0deg,rgba(0,0,0,0.2)_0%,rgba(0,0,0,1)_5%,rgba(0,0,0,1)_95%,rgba(0,0,0,0)_100%)]',
+        className
+      )}
+    >
+      <div className="flex flex-1 flex-col justify-end gap-2 pt-12">
+        <AnimatePresence>
+          {messages.map((message) => (
+            <ChatEntryMotion
+              hideName
+              key={message.id}
+              initial={{ opacity: 0, height: 0 }}
+              animate={{ opacity: 1, height: 'auto' }}
+              exit={{ opacity: 1, height: 'auto', translateY: 0.001 }}
+              transition={{ duration: 0.5, ease: 'easeOut' }}
+              entry={message}
+            />
+          ))}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}
diff --git a/components/embed-popup/trigger.tsx b/components/embed-popup/trigger.tsx
index ed75c63..c386c53 100644
--- a/components/embed-popup/trigger.tsx
+++ b/components/embed-popup/trigger.tsx
@@ -1,21 +1,24 @@
 import { AnimatePresence, motion } from 'motion/react';
 import { useVoiceAssistant } from '@livekit/components-react';
 import { PhoneDisconnectIcon, XIcon } from '@phosphor-icons/react';
+import { EmbedErrorDetails } from '@/lib/types';
 import { cn } from '@/lib/utils';
 import { Button } from '../ui/button';
 
 const AnimatedButton = motion.create(Button);
 
 interface TriggerProps {
-  error: boolean;
+  error: EmbedErrorDetails | null;
   popupOpen: boolean;
   onToggle: () => void;
 }
 
-export function Trigger({ error = false, popupOpen, onToggle }: TriggerProps) {
+export function Trigger({ error = null, popupOpen, onToggle }: TriggerProps) {
   const { state: agentState } = useVoiceAssistant();
 
-  const isAgentConnecting = agentState === 'connecting' || agentState === 'initializing';
+  const isAgentConnecting =
+    popupOpen && (agentState === 'connecting' || agentState === 'initializing');
+
   const isAgentConnected =
     popupOpen &&
     agentState !== 'disconnected' &&
@@ -50,39 +53,24 @@ export function Trigger({ error = false, popupOpen, onToggle }: TriggerProps) {
         <motion.div
           className={cn(
             'absolute inset-0 z-10 rounded-full transition-colors',
+            !popupOpen && 'bg-fgAccent',
             !error &&
               isAgentConnecting &&
               'bg-fgAccent/30 animate-spin [background-image:conic-gradient(from_0deg,transparent_0%,transparent_30%,var(--color-fgAccent)_50%,transparent_70%,transparent_100%)]',
-            !error && agentState === 'disconnected' && 'bg-fgAccent',
-            (error || isAgentConnected) && 'bg-destructive-foreground'
+            (isAgentConnected || (error && popupOpen)) && 'bg-destructive-foreground'
           )}
         />
         {/* icon */}
         <div
           className={cn(
             'relative z-20 grid size-11 place-items-center rounded-full transition-colors',
+            !popupOpen && 'bg-fgAccent',
             !error && isAgentConnecting && 'bg-bg1',
-            !error && agentState === 'disconnected' && 'bg-fgAccent',
-            (error || isAgentConnected) && 'bg-destructive'
+            (isAgentConnected || (error && popupOpen)) && 'bg-destructive'
           )}
         >
           <AnimatePresence>
-            {!error && isAgentConnected && (
-              <motion.div
-                key="disconnect"
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: popupOpen ? -20 : 20 }}
-                className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
-              >
-                <PhoneDisconnectIcon
-                  size={20}
-                  weight="bold"
-                  className="text-destructive-foreground size-5"
-                />
-              </motion.div>
-            )}
-            {!error && agentState === 'disconnected' && (
+            {!popupOpen && (
               <motion.div
                 key="lk-logo"
                 initial={{ opacity: 0, y: -20 }}
@@ -100,7 +88,7 @@ export function Trigger({ error = false, popupOpen, onToggle }: TriggerProps) {
                 />
               </motion.div>
             )}
-            {(error || isAgentConnecting) && (
+            {(isAgentConnecting || (error && popupOpen)) && (
               <motion.div
                 key="dismiss"
                 initial={{ opacity: 0, y: 20 }}
@@ -115,6 +103,21 @@ export function Trigger({ error = false, popupOpen, onToggle }: TriggerProps) {
                 />
               </motion.div>
             )}
+            {!error && isAgentConnected && (
+              <motion.div
+                key="disconnect"
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: popupOpen ? -20 : 20 }}
+                className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+              >
+                <PhoneDisconnectIcon
+                  size={20}
+                  weight="bold"
+                  className="text-destructive-foreground size-5"
+                />
+              </motion.div>
+            )}
           </AnimatePresence>
         </div>
       </AnimatedButton>
diff --git a/components/livekit/agent-tile.tsx b/components/livekit/agent-tile.tsx
new file mode 100644
index 0000000..a23fa15
--- /dev/null
+++ b/components/livekit/agent-tile.tsx
@@ -0,0 +1,35 @@
+import { type AgentState, BarVisualizer, type TrackReference } from '@livekit/components-react';
+import { cn } from '@/lib/utils';
+
+interface AgentAudioTileProps {
+  state: AgentState;
+  audioTrack: TrackReference;
+  className?: string;
+}
+
+export const AgentTile = ({
+  state,
+  audioTrack,
+  className,
+  ref,
+}: React.ComponentProps<'div'> & AgentAudioTileProps) => {
+  return (
+    <div ref={ref} className={cn(className)}>
+      <BarVisualizer
+        barCount={5}
+        state={state}
+        options={{ minHeight: 5 }}
+        trackRef={audioTrack}
+        className={cn('flex aspect-video w-40 items-center justify-center gap-1')}
+      >
+        <span
+          className={cn([
+            'bg-muted min-h-4 w-4 rounded-full',
+            'origin-center transition-colors duration-250 ease-linear',
+            'data-[lk-highlighted=true]:bg-foreground data-[lk-muted=true]:bg-muted',
+          ])}
+        />
+      </BarVisualizer>
+    </div>
+  );
+};
diff --git a/components/livekit/avatar-tile.tsx b/components/livekit/avatar-tile.tsx
index 12b09a7..48451ea 100644
--- a/components/livekit/avatar-tile.tsx
+++ b/components/livekit/avatar-tile.tsx
@@ -1,17 +1,23 @@
 import { type TrackReference, VideoTrack } from '@livekit/components-react';
+import { cn } from '@/lib/utils';
 
 interface AgentAudioTileProps {
   videoTrack: TrackReference;
   className?: string;
 }
 
-export const AvatarTile = ({ videoTrack, className }: AgentAudioTileProps) => {
+export const AvatarTile = ({
+  videoTrack,
+  className,
+  ref,
+}: React.ComponentProps<'video'> & AgentAudioTileProps) => {
   return (
     <VideoTrack
+      ref={ref}
       trackRef={videoTrack}
       width={videoTrack?.publication.dimensions?.width ?? 0}
       height={videoTrack?.publication.dimensions?.height ?? 0}
-      className={className}
+      className={cn(className)}
     />
   );
 };
diff --git a/components/livekit/chat/chat-entry.tsx b/components/livekit/chat/chat-entry.tsx
index c80d394..535e708 100644
--- a/components/livekit/chat/chat-entry.tsx
+++ b/components/livekit/chat/chat-entry.tsx
@@ -20,8 +20,9 @@ export const ChatEntry = ({
   hideName,
   hideTimestamp,
   className,
+  ref,
   ...props
-}: ChatEntryProps) => {
+}: React.ComponentProps<'li'> & ChatEntryProps) => {
   const { message, hasBeenEdited, time, locale, name } = useChatMessage(entry, messageFormatter);
 
   const isUser = entry.from?.isLocal ?? false;
@@ -29,6 +30,7 @@ export const ChatEntry = ({
 
   return (
     <li
+      ref={ref}
       data-lk-message-origin={messageOrigin}
       title={time.toLocaleTimeString(locale, { timeStyle: 'full' })}
       className={cn('group flex flex-col gap-0.5', className)}
diff --git a/components/livekit/chat/chat-input.tsx b/components/livekit/chat/chat-input.tsx
index 0bec257..b5120f3 100644
--- a/components/livekit/chat/chat-input.tsx
+++ b/components/livekit/chat/chat-input.tsx
@@ -43,7 +43,7 @@ export function ChatInput({ onSend, className, disabled, ...props }: ChatInputPr
         disabled={disabled}
         placeholder="Type something..."
         onChange={(e) => setMessage(e.target.value)}
-        className="w-0 shrink-1 grow-1 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
+        className="h-9 shrink-1 grow-1 pl-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
       />
       <Button
         size="icon"
diff --git a/components/livekit/device-select.tsx b/components/livekit/device-select.tsx
index 04e2ffe..23c797f 100644
--- a/components/livekit/device-select.tsx
+++ b/components/livekit/device-select.tsx
@@ -16,7 +16,7 @@ type DeviceSelectProps = React.ComponentProps<typeof SelectTrigger> & {
   kind: MediaDeviceKind;
   track?: LocalAudioTrack | LocalVideoTrack | undefined;
   requestPermissions?: boolean;
-  onError?: (error: Error) => void;
+  onMediaDeviceError?: (error: Error) => void;
   initialSelection?: string;
   onActiveDeviceChange?: (deviceId: string) => void;
   onDeviceListChange?: (devices: MediaDeviceInfo[]) => void;
@@ -45,7 +45,7 @@ export function DeviceSelect({
   kind,
   track,
   requestPermissions,
-  onError,
+  onMediaDeviceError,
   // initialSelection,
   // onActiveDeviceChange,
   // onDeviceListChange,
@@ -59,8 +59,13 @@ export function DeviceSelect({
     room,
     track,
     requestPermissions,
-    onError,
+    onError: onMediaDeviceError,
   });
+
+  if (devices.length < 2) {
+    return null;
+  }
+
   return (
     <Select value={activeDeviceId} onValueChange={setActiveMediaDevice}>
       <SelectTrigger className={cn(selectVariants({ size }), props.className)}>
diff --git a/components/livekit/video-tile.tsx b/components/livekit/video-tile.tsx
new file mode 100644
index 0000000..90fd321
--- /dev/null
+++ b/components/livekit/video-tile.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { motion } from 'motion/react';
+import { VideoTrack } from '@livekit/components-react';
+import { cn } from '@/lib/utils';
+
+const MotionVideoTrack = motion.create(VideoTrack);
+
+export const VideoTile = ({
+  trackRef,
+  className,
+  ref,
+}: React.ComponentProps<'div'> & React.ComponentProps<typeof VideoTrack>) => {
+  return (
+    <div ref={ref} className={cn('bg-muted overflow-hidden rounded-md', className)}>
+      <MotionVideoTrack
+        trackRef={trackRef}
+        width={trackRef?.publication.dimensions?.width ?? 0}
+        height={trackRef?.publication.dimensions?.height ?? 0}
+        className={cn('h-full w-auto')}
+      />
+    </div>
+  );
+};
diff --git a/components/root-layout.tsx b/components/root-layout.tsx
index 96e39e7..d07d279 100644
--- a/components/root-layout.tsx
+++ b/components/root-layout.tsx
@@ -1,10 +1,13 @@
 import { Public_Sans } from 'next/font/google';
 import localFont from 'next/font/local';
-import { headers } from 'next/headers';
-import { getAppConfig, getOrigin } from '@/lib/env';
 import { cn } from '@/lib/utils';
 import '@/styles/globals.css';
 
+export const metadata = {
+  title: 'LiveKit Embeded Voice Agent',
+  description: 'LiveKit Embeded Voice Agent',
+};
+
 const publicSans = Public_Sans({
   variable: '--font-public-sans',
   subsets: ['latin'],
@@ -42,24 +45,8 @@ interface RootLayoutProps {
 }
 
 export async function RootLayout({ children, className }: RootLayoutProps) {
-  const hdrs = await headers();
-  const origin = getOrigin(hdrs);
-  const { accent, accentDark, pageTitle, pageDescription } = await getAppConfig(origin);
-
-  const styles = [
-    accent ? `:root { --primary: ${accent}; }` : '',
-    accentDark ? `.dark { --primary: ${accentDark}; }` : '',
-  ]
-    .filter(Boolean)
-    .join('\n');
-
   return (
     <html lang="en" suppressHydrationWarning className={cn('scroll-smooth', className)}>
-      <head>
-        {styles && <style>{styles}</style>}
-        <title>{pageTitle}</title>
-        <meta name="description" content={pageDescription} />
-      </head>
       <body
         className={cn(publicSans.variable, commitMono.variable, 'overflow-x-hidden antialiased')}
       >
diff --git a/components/welcome.tsx b/components/welcome.tsx
index 9efe89b..1f8a960 100644
--- a/components/welcome.tsx
+++ b/components/welcome.tsx
@@ -10,7 +10,6 @@ import type { ThemeMode } from '@/lib/types';
 import { cn } from '@/lib/utils';
 import EmbedPopupAgentClient from './embed-popup/agent-client';
 import { ThemeToggle } from './theme-toggle';
-import { Button } from './ui/button';
 
 export default function Welcome() {
   const router = useRouter();
@@ -20,6 +19,7 @@ export default function Welcome() {
   const selectedTab = tabParam ? (tabParam === 'popup' ? 'popup' : 'iframe') : 'iframe';
   const [, forceUpdate] = useState(0);
   const theme = (localStorage.getItem(THEME_STORAGE_KEY) as ThemeMode) ?? 'dark';
+  const IS_SANDBOX_ENVIRONMENT = process.env.NODE_ENV === 'production';
 
   const [copied, setCopied] = useState(false);
   const copyEmbedCode = useCallback((embedCode: string) => {
@@ -53,7 +53,7 @@ export default function Welcome() {
   }, [iframeEmbedUrl]);
 
   const popupTestUrl = useMemo(() => {
-    const url = new URL('/popup', window.location.origin);
+    const url = new URL('/test/popup', window.location.origin);
     return url.toString();
   }, []);
 
@@ -123,7 +123,7 @@ export default function Welcome() {
             <h3 className="sr-only text-lg font-semibold">IFrame Style</h3>
             <div>
               <h4 className="text-fg0 mb-1 font-semibold">Embed code</h4>
-              <pre className="border-separator2 bg-bg2 relative overflow-auto rounded-md border px-2 py-1">
+              <pre className="border-separator2 bg-bg2 scrollbar-custom relative overflow-auto rounded-md border px-2 py-1">
                 <code className="font-mono">
                   {iframeEmbedCode.split(iframeEmbedUrl).map((stringPart, index) => {
                     if (index === 0) {
@@ -146,9 +146,12 @@ export default function Welcome() {
                   })}
                 </code>
                 <div className="absolute top-0 right-0">
-                  <Button onClick={() => copyEmbedCode(iframeEmbedCode)}>
-                    {copied ? <CheckIcon className="text-fgSuccess" /> : <CopyIcon />}
-                  </Button>
+                  <button
+                    onClick={() => copyEmbedCode(iframeEmbedCode)}
+                    className="cursor-pointer p-2 opacity-50 transition-opacity hover:opacity-100"
+                  >
+                    {copied ? <CheckIcon weight="bold" className="text-fgSuccess" /> : <CopyIcon />}
+                  </button>
                 </div>
               </pre>
             </div>
@@ -167,18 +170,38 @@ export default function Welcome() {
             <h3 className="sr-only text-lg font-semibold">Popup Style</h3>
             <div>
               <h4 className="text-fg0 mb-1 font-semibold">Embed code</h4>
-              <pre className="border-separator2 bg-bg2 overflow-auto rounded-md border px-2 py-1">
+              <pre className="order-separator2 bg-bg2 scrollbar-custom relative overflow-auto rounded-md border px-2 py-1">
                 <code className="font-mono">{popupEmbedCode}</code>
+                <div className="absolute top-0 right-0">
+                  <button
+                    onClick={() => copyEmbedCode(popupEmbedCode)}
+                    className="cursor-pointer p-2 opacity-50 transition-opacity hover:opacity-100"
+                  >
+                    {copied ? <CheckIcon weight="bold" className="text-fgSuccess" /> : <CopyIcon />}
+                  </button>
+                </div>
               </pre>
-              <p className="text-fg4 my-4 text-sm">
-                To apply local changes, run{' '}
-                <code className="text-fg0">pnpm build-embed-popup-script</code>.<br />
-                Test your latest build at{' '}
-                <a href="/popup" target="_blank" rel="noopener noreferrer" className="underline">
-                  {popupTestUrl}
-                </a>
-                .
-              </p>
+              {/* hide build/test instructions in sandbox environment on Vercel */}
+              {!IS_SANDBOX_ENVIRONMENT && (
+                <div className="my-4">
+                  <p className="text-fg4 overflow-hidden text-sm text-ellipsis whitespace-nowrap">
+                    To apply local changes, run{' '}
+                    <code className="text-fg0">pnpm build-embed-popup-script</code>.
+                  </p>
+                  <p className="text-fg4 overflow-hidden text-sm text-ellipsis whitespace-nowrap">
+                    Test your latest build at{' '}
+                    <a
+                      href={popupTestUrl}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline"
+                    >
+                      {popupTestUrl}
+                    </a>
+                    .
+                  </p>
+                </div>
+              )}
             </div>
             <div className="flex justify-center pt-8">
               <div className="text-fgAccent flex gap-1">
diff --git a/hooks/use-connection-details.ts b/hooks/use-connection-details.ts
index 521d8ce..c147b9e 100644
--- a/hooks/use-connection-details.ts
+++ b/hooks/use-connection-details.ts
@@ -1,7 +1,11 @@
 import { useCallback, useEffect, useState } from 'react';
+import { decodeJwt } from 'jose';
 import { ConnectionDetails } from '@/app/api/connection-details/route';
+import { AppConfig } from '@/lib/types';
 
-export default function useConnectionDetails() {
+const ONE_MINUTE_IN_MILLISECONDS = 60 * 1000;
+
+export default function useConnectionDetails(appConfig: AppConfig) {
   // Generate room connection details, including:
   //   - A random Room name
   //   - A random Participant name
@@ -13,25 +17,70 @@ export default function useConnectionDetails() {
 
   const [connectionDetails, setConnectionDetails] = useState<ConnectionDetails | null>(null);
 
-  const fetchConnectionDetails = useCallback(() => {
+  const fetchConnectionDetails = useCallback(async () => {
     setConnectionDetails(null);
     const url = new URL(
       process.env.NEXT_PUBLIC_CONN_DETAILS_ENDPOINT ?? '/api/connection-details',
       window.location.origin
     );
-    fetch(url.toString())
-      .then((res) => res.json())
-      .then((data) => {
-        setConnectionDetails(data);
-      })
-      .catch((error) => {
-        console.error('Error fetching connection details:', error);
+
+    let data: ConnectionDetails;
+    try {
+      const res = await fetch(url.toString(), {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'X-Sandbox-Id': appConfig.sandboxId ?? '',
+        },
+        body: JSON.stringify({
+          room_config: appConfig.agentName
+            ? {
+                agents: [{ agent_name: appConfig.agentName }],
+              }
+            : undefined,
+        }),
       });
+      data = await res.json();
+    } catch (error) {
+      console.error('Error fetching connection details:', error);
+      throw new Error('Error fetching connection details!');
+    }
+
+    setConnectionDetails(data);
+    return data;
   }, []);
 
   useEffect(() => {
     fetchConnectionDetails();
   }, [fetchConnectionDetails]);
 
-  return { connectionDetails, refreshConnectionDetails: fetchConnectionDetails };
+  const isConnectionDetailsExpired = useCallback(() => {
+    const token = connectionDetails?.participantToken;
+    if (!token) {
+      return true;
+    }
+
+    const jwtPayload = decodeJwt(token);
+    if (!jwtPayload.exp) {
+      return true;
+    }
+    const expiresAt = new Date(jwtPayload.exp - ONE_MINUTE_IN_MILLISECONDS);
+
+    const now = new Date();
+    return expiresAt >= now;
+  }, [connectionDetails?.participantToken]);
+
+  const existingOrRefreshConnectionDetails = useCallback(async () => {
+    if (isConnectionDetailsExpired() || !connectionDetails) {
+      return fetchConnectionDetails();
+    } else {
+      return connectionDetails;
+    }
+  }, [connectionDetails, fetchConnectionDetails, isConnectionDetailsExpired]);
+
+  return {
+    connectionDetails,
+    refreshConnectionDetails: fetchConnectionDetails,
+    existingOrRefreshConnectionDetails,
+  };
 }
diff --git a/hooks/useDelayedValue.ts b/hooks/useDelayedValue.ts
new file mode 100644
index 0000000..4620a9c
--- /dev/null
+++ b/hooks/useDelayedValue.ts
@@ -0,0 +1,16 @@
+import { useEffect, useState } from 'react';
+
+export function useDelayedValue<T>(value: T, delay: number) {
+  const [delayedValue, setDelayedValue] = useState(value);
+
+  useEffect(() => {
+    if (value === delayedValue) {
+      return;
+    }
+
+    const timeout = setTimeout(() => setDelayedValue(value), delay);
+    return () => clearTimeout(timeout);
+  }, [value, delay, delayedValue]);
+
+  return delayedValue;
+}
diff --git a/lib/types.ts b/lib/types.ts
index e57853f..780ddfb 100644
--- a/lib/types.ts
+++ b/lib/types.ts
@@ -8,20 +8,13 @@ export interface CombinedTranscription extends TranscriptionSegment {
 export type ThemeMode = 'dark' | 'light' | 'system';
 
 export interface AppConfig {
-  pageTitle: string;
-  pageDescription: string;
-  companyName: string;
+  sandboxId?: string;
+  agentName?: string;
 
   supportsChatInput: boolean;
   supportsVideoInput: boolean;
   supportsScreenShare: boolean;
   isPreConnectBufferEnabled: boolean;
-
-  logo: string;
-  startButtonText: string;
-  accent?: string;
-  logoDark?: string;
-  accentDark?: string;
 }
 
 export interface SandboxConfig {
diff --git a/package.json b/package.json
index 3b74d2b..e1a9a85 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,8 @@
     "format:check": "prettier --check ."
   },
   "dependencies": {
-    "@livekit/components-react": "^2.9.9",
+    "@livekit/components-react": "^2.9.14",
+    "@livekit/protocol": "^1.41.0",
     "@phosphor-icons/react": "^2.1.8",
     "@radix-ui/react-label": "^2.1.7",
     "@radix-ui/react-popover": "^1.1.14",
@@ -23,6 +24,7 @@
     "@radix-ui/react-toolbar": "^1.1.10",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "jose": "^6.1.0",
     "livekit-client": "^2.13.3",
     "livekit-server-sdk": "^2.13.0",
     "motion": "^12.16.0",
@@ -50,8 +52,8 @@
     "postcss-loader": "^8.1.1",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "tailwindcss": "^4",
     "style-loader": "^4.0.0",
+    "tailwindcss": "^4",
     "ts-loader": "^9.5.2",
     "tw-animate-css": "^1.3.0",
     "typescript": "^5",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2c87a66..4636b52 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -9,8 +9,11 @@ importers:
   .:
     dependencies:
       '@livekit/components-react':
-        specifier: ^2.9.9
+        specifier: ^2.9.14
         version: 2.9.14(@livekit/krisp-noise-filter@0.2.16(livekit-client@2.15.6(@types/dom-mediacapture-record@1.0.22)))(livekit-client@2.15.6(@types/dom-mediacapture-record@1.0.22))(react-dom@19.1.1(react@19.1.1))(react@19.1.1)(tslib@2.8.1)
+      '@livekit/protocol':
+        specifier: ^1.41.0
+        version: 1.41.0
       '@phosphor-icons/react':
         specifier: ^2.1.8
         version: 2.1.10(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -41,6 +44,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      jose:
+        specifier: ^6.1.0
+        version: 6.1.0
       livekit-client:
         specifier: ^2.13.3
         version: 2.15.6(@types/dom-mediacapture-record@1.0.22)
@@ -2156,6 +2162,9 @@ packages:
   jose@5.10.0:
     resolution: {integrity: sha512-s+3Al/p9g32Iq+oqXxkW//7jk2Vig6FF1CFqzVXoTUXt2qz89YWbL+OwS17NFYEvxC35n0FKeGO2LGYSxeM2Gg==}
 
+  jose@6.1.0:
+    resolution: {integrity: sha512-TTQJyoEoKcC1lscpVDCSsVgYzUDg/0Bt3WE//WiTPK6uOCQC2KZS4MpugbMWt/zyjkopgZoXhZuCi00gLudfUA==}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -5280,6 +5289,8 @@ snapshots:
 
   jose@5.10.0: {}
 
+  jose@6.1.0: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@4.1.0:
diff --git a/styles/globals.css b/styles/globals.css
index 747d72a..dbfea00 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -1,9 +1,15 @@
 @import 'tailwindcss';
 @import 'tw-animate-css';
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark {
+  &:where(.dark *),
+  &:where(:host(.dark) *) {
+    @slot;
+  }
+}
 
-:root {
+:root,
+:host {
   --fg0: #000000;
   --fg1: #3b3b3b;
   --fg2: #4d4d4d;
@@ -65,7 +71,8 @@
   --sidebar-ring: oklch(0.708 0 0);
 }
 
-.dark {
+.dark,
+:host(.dark) {
   --fg0: #ffffff;
   --fg1: #cccccc;
   --fg2: #b2b2b2;
@@ -245,4 +252,43 @@
       background-position: 250% 0;
     }
   }
+
+  .scrollbar-custom,
+  .scrollbar-on-hover {
+    scrollbar-width: thin;
+    scrollbar-gutter: stable both-edges;
+    scrollbar-color: var(--fg4) transparent;
+  }
+
+  .scrollbar-on-hover {
+    scrollbar-color: transparent transparent;
+    transition: scrollbar-color 0.2s linear;
+  }
+
+  .scrollbar-custom:hover,
+  .scrollbar-on-hover:hover {
+    scrollbar-color: var(--fg4) transparent;
+  }
+
+  .scrollbar-custom::-webkit-scrollbar,
+  .scrollbar-on-hover::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 8px;
+  }
+
+  .scrollbar-custom::-webkit-scrollbar-thumb,
+  .scrollbar-on-hover::-webkit-scrollbar-thumb {
+    background-color: transparent;
+    transition: background-color 0.2s linear;
+  }
+
+  .scrollbar-custom:hover::-webkit-scrollbar-thumb,
+  .scrollbar-on-hover:hover::-webkit-scrollbar-thumb {
+    background-color: var(--fg4);
+  }
+
+  .scrollbar-custom::-webkit-scrollbar-track,
+  .scrollbar-on-hover::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
 }
diff --git a/webpack.config.js b/webpack.config.js
index 5b3df7a..969925c 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -3,6 +3,7 @@ const path = require('path');
 const Dotenv = require('dotenv-webpack');
 
 module.exports = {
+  mode: 'production',
   entry: './components/embed-popup/standalone-bundle-root.tsx', // Input file
   output: {
     path: path.resolve(__dirname, 'public'),
@@ -15,7 +16,10 @@ module.exports = {
   },
   plugins: [
     // NOTE: the below doesn't whitelist, see https://github.com/mrsteele/dotenv-webpack/issues/41
-    new Dotenv(),
+    new Dotenv({
+      systemvars: true,
+      path: '.env.local',
+    }),
   ],
   module: {
     rules: [