diff --git a/packages/journey-manager/src/ui.tsx b/packages/journey-manager/src/ui.tsx
index b3f5e80b..3c0120cc 100644
--- a/packages/journey-manager/src/ui.tsx
+++ b/packages/journey-manager/src/ui.tsx
@@ -2,7 +2,11 @@
 
 import { type Client } from "@nlxai/multimodal";
 import { autoUpdate, platform } from "@floating-ui/dom";
-import { render, type FunctionComponent, type VNode } from "preact";
+import {
+  render,
+  type FunctionComponent as FC,
+  type ComponentChildren,
+} from "preact";
 import {
   useEffect,
   useState,
@@ -11,6 +15,14 @@ import {
   type MutableRef,
 } from "preact/hooks";
 import { createPortal } from "preact/compat";
+import {
+  ArrowBackIcon,
+  CallEndIcon,
+  CheckIcon,
+  CloseIcon,
+  MultimodalIcon,
+  SupportAgentIcon,
+} from "./ui/icons";
 import tinycolor from "tinycolor2";
 
 /**
@@ -378,6 +390,7 @@ button {
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   z-index: 20;
+  gap: 20px;
 }
 
 /** Only add spacing margins from the third child onwards (as the first child is the dialog container) */
@@ -453,7 +466,9 @@ button {
   text-align: center;
 }
 
-.drawer-footer button {
+/** Discrete button */
+
+.discrete-button {
   display: inline-flex;
   align-items: center;
   border: none;
@@ -461,14 +476,14 @@ button {
   color: #777;
 }
 
-.drawer-footer button svg {
+.discrete-button svg {
   flex: 0 0 14px;
   height: 14px;
   display: inline-block;
   margin-right: 4px;
 }
 
-.drawer-footer button:hover {
+.discrete-button:hover {
   color: #000;
 }
 
@@ -495,6 +510,21 @@ button {
   color: red;
   text-align: center;
 }
+ 
+/** Confirmation */
+
+.confirmation {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.confirmation-buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
 
 /** Highlights */
 
@@ -515,49 +545,7 @@ button {
 `;
 };
 
-const MultimodalIcon: FunctionComponent<unknown> = () => (
-  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
-    <path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C11.4477 20 11 20.4477 11 21C11 21.5523 11.4477 22 12 22C16.456 22 20.2313 19.0855 21.5236 15.0587C22.3766 14.8106 23 14.0231 23 13.09V11.09C23 10.1795 22.4064 9.40764 21.5851 9.14028C20.3549 5.01091 16.5291 2 12 2C7.47091 2 3.64506 5.01091 2.41488 9.14028C1.59358 9.40764 1 10.1795 1 11.09V13.09C1 14.1666 1.82988 15.0493 2.88483 15.1334C2.92262 15.1378 2.96105 15.14 3 15.14C3.55228 15.14 4 14.6923 4 14.14V12Z"></path>
-    <path d="M10.09 10.8L15.2453 6.27083L13.9005 13L8.74526 17.5292L10.09 10.8ZM12.8613 12.4C12.5851 12.8783 11.9735 13.0422 11.4953 12.766C11.017 12.4899 10.8531 11.8783 11.1292 11.4C11.4054 10.9217 12.017 10.7578 12.4953 11.034C12.9735 11.3101 13.1374 11.9217 12.8613 12.4Z"></path>
-  </svg>
-);
-
-const SupportAgentIcon: FunctionComponent<unknown> = () => (
-  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
-    <path d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62"></path>
-    <circle cx="9" cy="13" r="1"></circle>
-    <circle cx="15" cy="13" r="1"></circle>
-    <path d="M18 11.03C17.52 8.18 15.04 6 12.05 6c-3.03 0-6.29 2.51-6.03 6.45 2.47-1.01 4.33-3.21 4.86-5.89 1.31 2.63 4 4.44 7.12 4.47"></path>
-  </svg>
-);
-
-const ArrowBackIcon: FunctionComponent<unknown> = () => (
-  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
-    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"></path>
-  </svg>
-);
-
-const CallEndIcon: FunctionComponent<unknown> = () => (
-  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
-    <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9"></path>
-  </svg>
-);
-
-const CloseIcon: FunctionComponent<unknown> = () => (
-  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
-    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
-  </svg>
-);
-
-const CheckIcon: FunctionComponent<unknown> = () => (
-  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
-    <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
-  </svg>
-);
-
-const Highlight: FunctionComponent<{ element: HTMLElement }> = ({
-  element,
-}) => {
+const Highlight: FC<{ element: HTMLElement }> = ({ element }) => {
   const ref = useRef<HTMLDivElement | null>(null);
   const [rect, setRect] = useState<{
     x: number;
@@ -624,9 +612,7 @@ type ControlCenterStatus =
   | "success-escalation"
   | "success-end";
 
-const SuccessMessage: FunctionComponent<{ message: string }> = ({
-  message,
-}) => {
+const SuccessMessage: FC<{ message: string }> = ({ message }) => {
   return (
     <p className="success-message">
       <span>
@@ -637,15 +623,42 @@ const SuccessMessage: FunctionComponent<{ message: string }> = ({
   );
 };
 
-const DrawerDialog: FunctionComponent<{ children: VNode<any> }> = ({
-  children,
-}) => {
+const CloseButton: FC<{ onClose: () => void }> = ({ onClose }) => {
+  return (
+    <button className="discrete-button" onClick={onClose}>
+      <CloseIcon />
+      <span>Close</span>
+    </button>
+  );
+};
+
+const DrawerDialog: FC<{ children: ComponentChildren }> = ({ children }) => {
   return <div className="drawer-dialog">{children}</div>;
 };
 
-const EscalationButton: FunctionComponent<{
+const Confirmation: FC<{
+  content: string;
+  onConfirm: () => void;
+  pending?: boolean;
+  onCancel: () => void;
+}> = ({ content, onConfirm, onCancel, pending }) => {
+  return (
+    <div className="confirmation">
+      <p>{content}</p>
+      <div className="confirmation-buttons">
+        <button disabled={pending} onClick={onConfirm}>
+          Confirm
+        </button>
+        <button onClick={onCancel}>Cancel</button>
+      </div>
+    </div>
+  );
+};
+
+const EscalationButton: FC<{
   onEscalation: (config: SimpleHandlerArg) => void;
   escalationButtonLabel?: string;
+  escalationConfirmation?: string;
   client: Client;
   onClose: () => void;
   drawerDialogRef: MutableRef<HTMLDivElement | null>;
@@ -655,47 +668,67 @@ const EscalationButton: FunctionComponent<{
   onClose,
   client,
   escalationButtonLabel,
+  escalationConfirmation,
 }) => {
   const [status, setStatus] = useState<
     "confirming" | "pending" | "success" | null
   >(null);
+
+  const onSubmit = () => {
+    setStatus("pending");
+    onEscalation?.({ sendStep: client.sendStep });
+    setTimeout(() => {
+      setStatus("success");
+    }, 800);
+    setTimeout(() => {
+      onClose();
+    }, 5000);
+  };
+
   return (
     <>
-      {status === "confirming"
+      {status === "confirming" ||
+      (status === "pending" && escalationConfirmation != null)
         ? createPortal(
             <DrawerDialog>
-              <p>abcd</p>
+              <Confirmation
+                content={escalationConfirmation ?? ""}
+                onConfirm={onSubmit}
+                pending={status === "pending"}
+                onCancel={() => {
+                  setStatus(null);
+                }}
+              />
             </DrawerDialog>,
             drawerDialogRef.current!,
           )
-        : null}
-      {status === "success" ? (
-        <SuccessMessage message="Your call is being transferred to an agent." />
-      ) : (
-        <button
-          disabled={status === "pending"}
-          onClick={() => {
+        : status === "success"
+          ? createPortal(
+              <DrawerDialog>
+                <SuccessMessage message="Your call has been transferred to an agent." />
+                <CloseButton onClose={onClose} />
+              </DrawerDialog>,
+              drawerDialogRef.current!,
+            )
+          : null}
+      <button
+        disabled={status === "pending"}
+        onClick={() => {
+          if (escalationConfirmation != null) {
             setStatus("confirming");
             return;
-            onEscalation?.({ sendStep: client.sendStep });
-            setStatus("pending");
-            setTimeout(() => {
-              setStatus("success");
-            }, 800);
-            setTimeout(() => {
-              onClose();
-            }, 5000);
-          }}
-        >
-          <SupportAgentIcon />
-          {escalationButtonLabel ?? "Escalate to Agent"}
-        </button>
-      )}
+          }
+          onSubmit();
+        }}
+      >
+        <SupportAgentIcon />
+        {escalationButtonLabel ?? "Escalate to Agent"}
+      </button>
     </>
   );
 };
 
-const ControlCenter: FunctionComponent<{
+const ControlCenter: FC<{
   config: UiConfig;
   client: Client;
   triggeredSteps: TriggeredStep[];
@@ -803,7 +836,8 @@ const ControlCenter: FunctionComponent<{
             drawerContentRef.current != null &&
             !drawerContentRef.current.contains(event.target as Node)
           ) {
-            setIsOpen(false);
+            // Does not work due to portal component bubbling
+            // setIsOpen(false);
           }
         }}
       >
@@ -837,6 +871,7 @@ const ControlCenter: FunctionComponent<{
                   onEscalation={config.onEscalation}
                   client={client}
                   escalationButtonLabel={config.escalationButtonLabel}
+                  escalationConfirmation={config.escalationConfirmation}
                   onClose={() => {
                     setIsOpen(false);
                   }}
@@ -878,14 +913,11 @@ const ControlCenter: FunctionComponent<{
             </div>
           )}
           <div className="drawer-footer">
-            <button
-              onClick={() => {
+            <CloseButton
+              onClose={() => {
                 setIsOpen(false);
               }}
-            >
-              <CloseIcon />
-              <span>Close</span>
-            </button>
+            />
           </div>
         </div>
       </div>
@@ -998,13 +1030,7 @@ interface PinBubbleProps {
   onClick: () => void;
 }
 
-// eslint-disable-next-line jsdoc/require-returns, jsdoc/require-param
-/** @hidden @internal */
-export const PinBubble: FunctionComponent<PinBubbleProps> = ({
-  isActive,
-  content,
-  onClick,
-}) => (
+const PinBubble: FC<PinBubbleProps> = ({ isActive, content, onClick }) => (
   <div className={`pin-bubble-container ${isActive ? "active" : "inactive"}`}>
     <div className="pin-bubble-content">{content}</div>
     <button className="pin-bubble-button" onClick={onClick}>
diff --git a/packages/journey-manager/src/ui/components.tsx b/packages/journey-manager/src/ui/components.tsx
new file mode 100644
index 00000000..e69de29b
diff --git a/packages/journey-manager/src/ui/icons.tsx b/packages/journey-manager/src/ui/icons.tsx
new file mode 100644
index 00000000..2b98a62f
--- /dev/null
+++ b/packages/journey-manager/src/ui/icons.tsx
@@ -0,0 +1,41 @@
+import { type FunctionComponent as FC } from "preact";
+
+export const MultimodalIcon: FC<unknown> = () => (
+  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
+    <path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C11.4477 20 11 20.4477 11 21C11 21.5523 11.4477 22 12 22C16.456 22 20.2313 19.0855 21.5236 15.0587C22.3766 14.8106 23 14.0231 23 13.09V11.09C23 10.1795 22.4064 9.40764 21.5851 9.14028C20.3549 5.01091 16.5291 2 12 2C7.47091 2 3.64506 5.01091 2.41488 9.14028C1.59358 9.40764 1 10.1795 1 11.09V13.09C1 14.1666 1.82988 15.0493 2.88483 15.1334C2.92262 15.1378 2.96105 15.14 3 15.14C3.55228 15.14 4 14.6923 4 14.14V12Z"></path>
+    <path d="M10.09 10.8L15.2453 6.27083L13.9005 13L8.74526 17.5292L10.09 10.8ZM12.8613 12.4C12.5851 12.8783 11.9735 13.0422 11.4953 12.766C11.017 12.4899 10.8531 11.8783 11.1292 11.4C11.4054 10.9217 12.017 10.7578 12.4953 11.034C12.9735 11.3101 13.1374 11.9217 12.8613 12.4Z"></path>
+  </svg>
+);
+
+export const SupportAgentIcon: FC<unknown> = () => (
+  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
+    <path d="M21 12.22C21 6.73 16.74 3 12 3c-4.69 0-9 3.65-9 9.28-.6.34-1 .98-1 1.72v2c0 1.1.9 2 2 2h1v-6.1c0-3.87 3.13-7 7-7s7 3.13 7 7V19h-8v2h8c1.1 0 2-.9 2-2v-1.22c.59-.31 1-.92 1-1.64v-2.3c0-.7-.41-1.31-1-1.62"></path>
+    <circle cx="9" cy="13" r="1"></circle>
+    <circle cx="15" cy="13" r="1"></circle>
+    <path d="M18 11.03C17.52 8.18 15.04 6 12.05 6c-3.03 0-6.29 2.51-6.03 6.45 2.47-1.01 4.33-3.21 4.86-5.89 1.31 2.63 4 4.44 7.12 4.47"></path>
+  </svg>
+);
+
+export const ArrowBackIcon: FC<unknown> = () => (
+  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
+    <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20z"></path>
+  </svg>
+);
+
+export const CallEndIcon: FC<unknown> = () => (
+  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
+    <path d="M12 9c-1.6 0-3.15.25-4.6.72v3.1c0 .39-.23.74-.56.9-.98.49-1.87 1.12-2.66 1.85-.18.18-.43.28-.7.28-.28 0-.53-.11-.71-.29L.29 13.08c-.18-.17-.29-.42-.29-.7 0-.28.11-.53.29-.71C3.34 8.78 7.46 7 12 7s8.66 1.78 11.71 4.67c.18.18.29.43.29.71 0 .28-.11.53-.29.71l-2.48 2.48c-.18.18-.43.29-.71.29-.27 0-.52-.11-.7-.28-.79-.74-1.69-1.36-2.67-1.85-.33-.16-.56-.5-.56-.9v-3.1C15.15 9.25 13.6 9 12 9"></path>
+  </svg>
+);
+
+export const CloseIcon: FC<unknown> = () => (
+  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
+    <path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
+  </svg>
+);
+
+export const CheckIcon: FC<unknown> = () => (
+  <svg viewBox="0 0 24 24" stroke="none" fill="currentColor">
+    <path d="M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
+  </svg>
+);
diff --git a/packages/website/src/components/Prototyping.tsx b/packages/website/src/components/Prototyping.tsx
index 81de85df..b8ed59d8 100644
--- a/packages/website/src/components/Prototyping.tsx
+++ b/packages/website/src/components/Prototyping.tsx
@@ -134,6 +134,8 @@ const runJourneyManager = async (): Promise<unknown> => {
         colors: { highlight: "#7dd3fc" },
       },
       escalationButtonLabel: "Hand Off To Specialist",
+      escalationConfirmation:
+        "You are about to hand off to a specialist. Are you sure?",
       onEscalation: (args) => {
         // eslint-disable-next-line no-console
         console.log("escalation", args);