diff --git a/packages/touchpoint-ui/src/App.tsx b/packages/touchpoint-ui/src/App.tsx
index 0d8e1381..a05c4565 100644
--- a/packages/touchpoint-ui/src/App.tsx
+++ b/packages/touchpoint-ui/src/App.tsx
@@ -16,17 +16,21 @@ import {
   type Response,
   type Config,
   type BotResponse,
-  type BotMessage,
 } from "@nlxai/chat-core";
 import { clsx } from "clsx";
 import { findLastIndex } from "ramda";
 
 import { LaunchButton } from "./components/ui/LaunchButton";
-import ChatHeader from "./components/ChatHeader";
+import { ChatHeader } from "./components/ChatHeader";
 import { ChatSettings } from "./components/ChatSettings";
-import { MessageChoices, ChatMessages } from "./components/ChatMessages";
+import { ChatMessages } from "./components/ChatMessages";
 import ChatInput from "./components/ChatInput";
-import { type ColorMode, type WindowSize, type LogoUrl } from "./types";
+import {
+  type ColorMode,
+  type WindowSize,
+  type LogoUrl,
+  type ChoiceMessage,
+} from "./types";
 import { Context } from "./context";
 
 export interface Props {
@@ -61,7 +65,7 @@ const App = forwardRef<AppRef, Props>((props, ref) => {
 
   const [isExpanded, setIsExpanded] = useState(isDev);
 
-  const [settingsOpen, setSettingsOpen] = useState<boolean>(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState<boolean>(false);
 
   const expand = useCallback(() => {
     setIsExpanded(true);
@@ -130,24 +134,20 @@ const App = forwardRef<AppRef, Props>((props, ref) => {
     return { index, response };
   }, [responses]);
 
-  const choiceMessage = useMemo<{
-    message: BotMessage;
-    responseIndex: number;
-    messageIndex: number;
-  } | null>(() => {
+  const choiceMessage = useMemo<ChoiceMessage | undefined>(() => {
     if (lastBotResponse == null) {
-      return null;
+      return;
     }
     const choiceMessageIndex = findLastIndex((message) => {
       return message.choices.length > 0;
     }, lastBotResponse.response.payload.messages);
     if (choiceMessageIndex === -1) {
-      return null;
+      return;
     }
     const choiceMessage =
       lastBotResponse.response.payload.messages[choiceMessageIndex];
     if (choiceMessage == null) {
-      return null;
+      return;
     }
     return {
       message: choiceMessage,
@@ -156,33 +156,56 @@ const App = forwardRef<AppRef, Props>((props, ref) => {
     };
   }, [lastBotResponse]);
 
+  const [uploadedFiles, setUploadedFiles] = useState<Record<string, File>>({});
+
   if (handler == null) {
     return null;
   }
 
   return (
-    <Context.Provider value={{ colorMode, windowSize, handler }}>
+    <Context.Provider value={{ handler }}>
       {isExpanded ? (
         <div
           data-theme={colorMode}
-          className="grid grid-cols-2 fixed inset-0 z-touchpoint"
+          className="grid grid-cols-2 xl:grid-cols-[1fr_632px] fixed inset-0 z-touchpoint font-sans"
         >
           {windowSize === "half" ? (
-            <div className="hidden md:block bg-overlay" />
+            <div className="hidden md:block bg-overlay"></div>
           ) : null}
           <div
             className={clsx(
-              "w-full bg-background text-primary-80 flex relative flex-col backdrop-blur",
+              "w-full bg-background text-primary-80 flex relative flex-col h-full backdrop-blur-overlay",
               {
-                "col-span-2 md:col-span-1 h-full": windowSize === "half",
+                "col-span-2 md:col-span-1": windowSize === "half",
                 "col-span-2": windowSize === "full",
               },
             )}
           >
-            {settingsOpen ? (
+            <ChatHeader
+              windowSize={windowSize}
+              colorMode={colorMode}
+              logoUrl={props.logoUrl}
+              isSettingsOpen={isSettingsOpen}
+              toggleSettings={() => {
+                setIsSettingsOpen((prev) => !prev);
+              }}
+              collapse={() => {
+                setIsExpanded(false);
+              }}
+              reset={() => {
+                handler.reset({ clearResponses: true });
+                handler.sendWelcomeIntent();
+              }}
+            />
+            {isSettingsOpen ? (
               <ChatSettings
+                className={
+                  windowSize === "full"
+                    ? "w-full md:max-w-content md:mx-auto"
+                    : ""
+                }
                 onClose={() => {
-                  setSettingsOpen(false);
+                  setIsSettingsOpen(false);
                 }}
                 colorMode={colorMode}
                 windowSize={windowSize}
@@ -192,42 +215,37 @@ const App = forwardRef<AppRef, Props>((props, ref) => {
               />
             ) : (
               <>
-                <ChatHeader
-                  windowSize={windowSize}
-                  colorMode={colorMode}
-                  logoUrl={props.logoUrl}
-                  openSettings={() => {
-                    setSettingsOpen(true);
-                  }}
-                  collapse={() => {
-                    setIsExpanded(false);
-                  }}
-                  reset={() => {
-                    handler.reset({ clearResponses: true });
-                    handler.sendWelcomeIntent();
-                  }}
-                />
-                <ChatMessages responses={responses} handler={handler} />
-                {choiceMessage != null ? (
-                  <MessageChoices {...choiceMessage} handler={handler} />
-                ) : null}
-                <ChatInput
+                <ChatMessages
+                  responses={responses}
+                  handler={handler}
+                  uploadedFiles={uploadedFiles}
                   className={
-                    choiceMessage?.message.selectedChoiceId != null
-                      ? "hidden"
+                    windowSize === "full"
+                      ? "w-full md:max-w-content md:mx-auto"
                       : ""
                   }
+                />
+                <ChatInput
+                  className={clsx(
+                    windowSize === "full"
+                      ? "w-full md:max-w-content md:mx-auto"
+                      : "",
+                  )}
+                  choiceMessage={choiceMessage}
                   handler={handler}
                   uploadUrl={
                     lastBotResponse?.response.payload.metadata?.uploadUrls?.[0]
                   }
+                  onFileUpload={({ uploadId, file }) => {
+                    setUploadedFiles((prev) => ({ ...prev, [uploadId]: file }));
+                  }}
                 />
               </>
             )}
           </div>
         </div>
       ) : (
-        <div data-theme={colorMode}>
+        <div data-theme={colorMode} className="font-sans">
           <LaunchButton
             className="fixed z-100 bottom-2 right-2 backdrop-blur z-launchButton"
             onClick={() => {
diff --git a/packages/touchpoint-ui/src/components/ChatHeader.tsx b/packages/touchpoint-ui/src/components/ChatHeader.tsx
index b070ad6f..8ffd395e 100644
--- a/packages/touchpoint-ui/src/components/ChatHeader.tsx
+++ b/packages/touchpoint-ui/src/components/ChatHeader.tsx
@@ -13,7 +13,8 @@ interface ChatHeaderProps {
   logoUrl?: LogoUrl;
   collapse: () => void;
   reset: () => void;
-  openSettings?: () => void;
+  toggleSettings?: () => void;
+  isSettingsOpen: boolean;
 }
 
 export const ChatHeader: FC<ChatHeaderProps> = ({
@@ -21,7 +22,8 @@ export const ChatHeader: FC<ChatHeaderProps> = ({
   colorMode,
   collapse,
   logoUrl,
-  openSettings,
+  toggleSettings,
+  isSettingsOpen,
   reset,
 }) => {
   const isHalf = windowSize === "half";
@@ -31,7 +33,7 @@ export const ChatHeader: FC<ChatHeaderProps> = ({
     <div
       className={clsx(
         "flex",
-        "p-2 items-center justify-between gap-2",
+        "p-2 md:p-3 items-center justify-between gap-2",
         isHalf
           ? "md:absolute md:w-fit md:flex-col md:left-0 md:-translate-x-full"
           : "md:absolute md:left-0 md:right-0 md:top-0",
@@ -52,21 +54,22 @@ export const ChatHeader: FC<ChatHeaderProps> = ({
         }}
         Icon={Undo}
       />
-      {openSettings != null ? (
+      {toggleSettings != null ? (
         <IconButton
           className={logoUrl != null ? "" : "ml-auto"}
           Icon={Settings}
           label="Settings"
-          type={iconButtonType}
-          onClick={() => {
-            openSettings();
-          }}
+          type={isSettingsOpen ? "activated" : iconButtonType}
+          onClick={toggleSettings}
         />
       ) : null}
       <IconButton
         label="Collapse"
         type={iconButtonType}
-        className={openSettings == null ? "ml-auto" : ""}
+        className={clsx(
+          toggleSettings == null ? "ml-auto" : "",
+          isHalf ? "md:-order-1" : "",
+        )}
         onClick={() => {
           collapse();
         }}
@@ -75,5 +78,3 @@ export const ChatHeader: FC<ChatHeaderProps> = ({
     </div>
   );
 };
-
-export default ChatHeader;
diff --git a/packages/touchpoint-ui/src/components/ChatInput.tsx b/packages/touchpoint-ui/src/components/ChatInput.tsx
index f3dfccef..00284a4f 100644
--- a/packages/touchpoint-ui/src/components/ChatInput.tsx
+++ b/packages/touchpoint-ui/src/components/ChatInput.tsx
@@ -13,11 +13,15 @@ import { clsx } from "clsx";
 
 import { IconButton } from "./ui/IconButton";
 import { ArrowForward, Attachment, Delete, Check, Error } from "./ui/Icons";
+import { type ChoiceMessage } from "../types";
+import { MessageChoices } from "./ChatMessages";
 
 interface ChatInputProps {
   className?: string;
   handler: ConversationHandler;
   uploadUrl?: UploadUrl;
+  onFileUpload: (val: { uploadId: string; file: File }) => void;
+  choiceMessage?: ChoiceMessage;
 }
 
 interface FileInfo {
@@ -28,7 +32,13 @@ interface FileInfo {
 
 const MAX_INPUT_FILE_SIZE_IN_MB = 8;
 
-const ChatInput: FC<ChatInputProps> = ({ className, handler, uploadUrl }) => {
+const ChatInput: FC<ChatInputProps> = ({
+  className,
+  choiceMessage,
+  handler,
+  uploadUrl,
+  onFileUpload,
+}) => {
   // Text state
   const [isTextAreaInFocus, setIsTextAreaInFocus] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -54,7 +64,14 @@ const ChatInput: FC<ChatInputProps> = ({ className, handler, uploadUrl }) => {
     if (isInputEmpty) {
       return;
     }
-    handler.sendText(inputValue);
+    if (uploadUrl != null && fileInfo != null) {
+      handler.sendStructured({
+        uploadIds: [uploadUrl.uploadId],
+        utterance: inputValue,
+      });
+    } else {
+      handler.sendText(inputValue);
+    }
     setInputValue("");
     setFileInfo(null);
   };
@@ -96,6 +113,7 @@ const ChatInput: FC<ChatInputProps> = ({ className, handler, uploadUrl }) => {
     })
       .then(() => {
         setUploadErrorMessage(null);
+        onFileUpload({ uploadId: uploadUrl.uploadId, file });
       })
       .catch(() => {
         setGenericUploadError();
@@ -103,114 +121,128 @@ const ChatInput: FC<ChatInputProps> = ({ className, handler, uploadUrl }) => {
   };
 
   return (
-    <div className="p-2">
-      <div
-        className={clsx(
-          "bg-primary-5 transition-colors duration-200 p-2 rounded-plus text-base font-normal max-w-content mx-auto",
-          isTextAreaInFocus || isUploadEnabled ? "" : "hover:bg-secondary-20",
-          className,
-        )}
-      >
-        {uploadErrorMessage != null && (
-          <div className="flex items-center py-1 mb-2 w-full bg-error-secondary rounded-base">
-            <Error size={16} />
-            <span className="truncate ml-1">{uploadErrorMessage}</span>
-          </div>
-        )}
-        {fileInfo && (
-          <>
-            <div className="flex items-center justify-between mb-2 w-full">
-              <p className="flex items-center truncate mx-2">
-                {uploadErrorMessage != null ? (
-                  <Error size={16} className="text-error-primary" />
-                ) : (
-                  <Check size={16} />
-                )}
-                <span className="truncate ml-3">{fileInfo.name}</span>
-              </p>
+    <div className={clsx("p-2 md:p-3 relative", className)}>
+      {choiceMessage != null ? (
+        <MessageChoices
+          {...choiceMessage}
+          handler={handler}
+          className={clsx(
+            "absolute inset-x-0 z-10 top-0 transform -translate-y-full px-2 md:px-3",
+            choiceMessage.message.selectedChoiceId != null
+              ? "md:top-2"
+              : "md:top-1",
+          )}
+        />
+      ) : null}
+      {choiceMessage?.message.selectedChoiceId != null ? null : (
+        <div
+          className={clsx(
+            "bg-primary-5 transition-colors duration-200 p-2 rounded-plus text-base font-normal",
+            isTextAreaInFocus || isUploadEnabled ? "" : "hover:bg-secondary-20",
+          )}
+        >
+          {uploadErrorMessage != null && (
+            <div className="flex items-center py-1 mb-2 w-full bg-error-secondary rounded-base">
+              <Error size={16} />
+              <span className="truncate ml-1">{uploadErrorMessage}</span>
+            </div>
+          )}
+          {fileInfo && (
+            <>
+              <div className="flex items-center justify-between mb-2 w-full">
+                <p className="flex items-center truncate mx-2">
+                  {uploadErrorMessage != null ? (
+                    <Error size={16} className="text-error-primary" />
+                  ) : (
+                    <Check size={16} />
+                  )}
+                  <span className="truncate ml-3">{fileInfo.name}</span>
+                </p>
+                <IconButton
+                  className="flex-none"
+                  Icon={Delete}
+                  label="Delete"
+                  onClick={
+                    isUploadEnabled
+                      ? () => {
+                          setFileInfo(null);
+                          setUploadErrorMessage(null);
+                          if (fileInputRef.current != null) {
+                            fileInputRef.current.value = "";
+                          }
+                        }
+                      : undefined
+                  }
+                  type="ghost"
+                />
+              </div>
+              <hr className="border-b-px border-background mb-2 -mx-2" />
+            </>
+          )}
+          <div className={clsx("flex items-end")}>
+            {isUploadEnabled ? (
+              <>
+                <label
+                  htmlFor="file-upload"
+                  className="p-3 w-10 h-10 flex-none block transition-colors rounded-base bg-primary-80 hover:bg-primary-80 text-secondary-80 cursor-pointer"
+                >
+                  <Attachment />
+                </label>
+                <input
+                  type="file"
+                  id="file-upload"
+                  className="sr-only"
+                  accept=".jpg, .jpeg, .png, .webp, .mp4, .mpeg4, .avi, .mov, .pdf"
+                  onChange={uploadFile}
+                  ref={fileInputRef}
+                />
+              </>
+            ) : (
               <IconButton
                 className="flex-none"
-                Icon={Delete}
-                label="Delete"
-                onClick={
-                  isUploadEnabled
-                    ? () => {
-                        setFileInfo(null);
-                        setUploadErrorMessage(null);
-                        if (fileInputRef.current != null) {
-                          fileInputRef.current.value = "";
-                        }
-                      }
-                    : undefined
-                }
+                Icon={Attachment}
+                label="Upload file"
                 type="ghost"
               />
-            </div>
-            <hr className="border-b-px border-background mb-2 -mx-2" />
-          </>
-        )}
-        <div className={clsx("flex items-end")}>
-          {isUploadEnabled ? (
-            <>
-              <label
-                htmlFor="file-upload"
-                className="p-3 w-10 h-10 block transition-colors rounded-base bg-primary-80 hover:bg-primary-80 text-secondary-80 cursor-pointer"
-              >
-                <Attachment />
-              </label>
-              <input
-                type="file"
-                id="file-upload"
-                className="sr-only"
-                accept=".jpg, .jpeg, .png, .webp, .mp4, .mpeg4, .avi, .mov, .pdf"
-                onChange={uploadFile}
-                ref={fileInputRef}
-              />
-            </>
-          ) : (
+            )}
+            <TextareaAutosize
+              className="h-10 w-full resize-none mr-2 px-2 py-2 bg-transparent text-primary-80 placeholder:text-primary-40 outline-none caret-accent"
+              placeholder="Type something"
+              maxRows={10}
+              onFocus={() => {
+                setIsTextAreaInFocus(true);
+              }}
+              onBlur={() => {
+                setIsTextAreaInFocus(false);
+              }}
+              value={inputValue}
+              onChange={(e) => {
+                setInputValue(e.target.value);
+              }}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  submit();
+                }
+              }}
+              ref={textInputRef}
+            />
             <IconButton
               className="flex-none"
-              Icon={Attachment}
-              label="Upload file"
-              type="ghost"
-            />
-          )}
-          <TextareaAutosize
-            className="h-10 w-full mr-2 px-2 py-2 bg-transparent text-primary-80 placeholder:text-primary-40 outline-none caret-accent"
-            placeholder="Type something"
-            maxRows={10}
-            onFocus={() => {
-              setIsTextAreaInFocus(true);
-            }}
-            onBlur={() => {
-              setIsTextAreaInFocus(false);
-            }}
-            value={inputValue}
-            onChange={(e) => {
-              setInputValue(e.target.value);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                submit();
+              label="Send message"
+              onClick={
+                isInputEmpty
+                  ? undefined
+                  : () => {
+                      submit();
+                    }
               }
-            }}
-            ref={textInputRef}
-          />
-          <IconButton
-            className="flex-none"
-            label="Send message"
-            onClick={
-              isInputEmpty
-                ? undefined
-                : () => {
-                    submit();
-                  }
-            }
-            type="main"
-            Icon={ArrowForward}
-          />
+              type="main"
+              Icon={ArrowForward}
+            />
+          </div>
         </div>
-      </div>
+      )}
     </div>
   );
 };
diff --git a/packages/touchpoint-ui/src/components/ChatMessages.tsx b/packages/touchpoint-ui/src/components/ChatMessages.tsx
index b123a7d0..4b98a7a6 100644
--- a/packages/touchpoint-ui/src/components/ChatMessages.tsx
+++ b/packages/touchpoint-ui/src/components/ChatMessages.tsx
@@ -15,6 +15,8 @@ import { ArrowForward } from "./ui/Icons";
 export interface ChatMessagesProps {
   handler: ConversationHandler;
   responses: Response[];
+  uploadedFiles: Record<string, File>;
+  className?: string;
 }
 
 export const MessageChoices: FC<{
@@ -22,19 +24,15 @@ export const MessageChoices: FC<{
   message: BotMessage;
   responseIndex: number;
   messageIndex: number;
-}> = ({ handler, message, responseIndex, messageIndex }) => {
+  className?: string;
+}> = ({ handler, message, responseIndex, messageIndex, className }) => {
   return message.choices.length > 0 ? (
-    <div
-      className={clsx(
-        "absolute inset-x-2 pb-2 z-10",
-        message.selectedChoiceId != null ? "bottom-0" : "bottom-16",
-      )}
-    >
-      <ul className={"max-w-content mx-auto"}>
+    <div className={className}>
+      <ul className="space-y-2">
         {message.choices.map((choice, key) =>
           message.selectedChoiceId == null ||
           choice.choiceId === message.selectedChoiceId ? (
-            <li key={key} className="mt-2 w-full">
+            <li key={key} className="w-full">
               <TextButton
                 type="ghost"
                 Icon={ArrowForward}
@@ -59,15 +57,33 @@ export const MessageChoices: FC<{
   ) : null;
 };
 
-const UserMessage: FC<{ text: string }> = ({ text }) => {
+const UserMessage: FC<{ text: string; files?: File[] }> = ({ text, files }) => {
   return (
-    <div className="flex justify-end pl-10 text-base max-w-content mx-auto">
-      <div className="text-primary-60 whitespace-pre-wrap">{text}</div>
-    </div>
+    <>
+      <div className="flex justify-end pl-10 text-base">
+        <div className="text-primary-60 whitespace-pre-wrap">{text}</div>
+      </div>
+      {files != null ? (
+        <div className="flex flex-wrap justify-end gap-2">
+          {files.map((file, index) => (
+            // TODO: style, add file name as alt text
+            <img
+              className="rounded-base h-20"
+              key={index}
+              src={URL.createObjectURL(file)}
+            />
+          ))}
+        </div>
+      ) : null}
+    </>
   );
 };
 
-export const ChatMessages: FC<ChatMessagesProps> = ({ responses }) => {
+export const ChatMessages: FC<ChatMessagesProps> = ({
+  responses,
+  uploadedFiles,
+  className,
+}) => {
   const isWaiting = responses[responses.length - 1]?.type === "user";
 
   const containerRef = useRef<HTMLDivElement | null>(null);
@@ -77,12 +93,17 @@ export const ChatMessages: FC<ChatMessagesProps> = ({ responses }) => {
     if (containerNode == null) {
       return;
     }
-    containerNode.scrollTop = containerNode.scrollHeight;
-  }, [responses.length]);
+    setTimeout(() => {
+      containerNode.scrollTop = containerNode.scrollHeight;
+    });
+  }, [responses]);
 
   return (
     <div
-      className="h-full p-3 overflow-y-auto no-scrollbar space-y-8"
+      className={clsx(
+        "h-full p-2 md:p-3 overflow-y-auto no-scrollbar space-y-8",
+        className,
+      )}
       ref={containerRef}
     >
       {responses.map((response, responseIndex) => {
@@ -92,6 +113,20 @@ export const ChatMessages: FC<ChatMessagesProps> = ({ responses }) => {
             return (
               <UserMessage key={responseIndex} text={response.payload.text} />
             );
+          } else if (
+            response.payload.type === "structured" &&
+            response.payload.utterance != null &&
+            response.payload.uploadIds != null
+          ) {
+            return (
+              <UserMessage
+                key={responseIndex}
+                text={response.payload.utterance}
+                files={response.payload.uploadIds
+                  .map((uploadId) => uploadedFiles[uploadId])
+                  .filter((file) => file != null)}
+              />
+            );
           } else {
             return null;
           }
@@ -99,10 +134,7 @@ export const ChatMessages: FC<ChatMessagesProps> = ({ responses }) => {
         // Failure
         if (response.type === "failure") {
           return (
-            <p
-              key={responseIndex}
-              className="text-error-primary text-base max-w-content mx-auto"
-            >
+            <p key={responseIndex} className="text-error-primary text-base">
               {response.payload.text}
             </p>
           );
@@ -114,10 +146,7 @@ export const ChatMessages: FC<ChatMessagesProps> = ({ responses }) => {
             <div className={clsx("space-y-2", isLast ? "min-h-full" : "")}>
               {response.payload.messages.map((message, messageIndex) => {
                 return (
-                  <div
-                    key={messageIndex}
-                    className="text-base max-w-content mx-auto"
-                  >
+                  <div key={messageIndex} className="text-base">
                     <div
                       className="pr-10"
                       dangerouslySetInnerHTML={{
diff --git a/packages/touchpoint-ui/src/components/ChatSettings.tsx b/packages/touchpoint-ui/src/components/ChatSettings.tsx
index e6bc54a5..51eebe1b 100644
--- a/packages/touchpoint-ui/src/components/ChatSettings.tsx
+++ b/packages/touchpoint-ui/src/components/ChatSettings.tsx
@@ -2,10 +2,10 @@
 import { type FC, type Dispatch, type SetStateAction } from "react";
 import { type ConversationHandler } from "@nlxai/chat-core";
 
-import { IconButton } from "./ui/IconButton";
-import { ArrowForward, ArrowLeft, Escalate, Restart } from "./ui/Icons";
+import { ArrowForward, Escalate, Restart } from "./ui/Icons";
 import { TextButton } from "./ui/TextButton";
 import { type ColorMode, type WindowSize } from "../types";
+import { clsx } from "clsx";
 
 interface ChatSettingsProps {
   onClose: () => void;
@@ -14,6 +14,7 @@ interface ChatSettingsProps {
   windowSize: WindowSize;
   setColorModeOverride: Dispatch<SetStateAction<ColorMode | null>>;
   setWindowSizeOverride: Dispatch<SetStateAction<WindowSize | null>>;
+  className?: string;
 }
 
 export const ChatSettings: FC<ChatSettingsProps> = ({
@@ -23,71 +24,69 @@ export const ChatSettings: FC<ChatSettingsProps> = ({
   windowSize,
   setColorModeOverride,
   setWindowSizeOverride,
+  className,
 }) => {
   return (
-    <div className="absolute inset-0 p-2 flex flex-col">
-      <div className="flex items-center justify-start flex-none">
-        <IconButton
-          type="ghost"
-          label="Back"
-          onClick={onClose}
-          Icon={ArrowLeft}
+    <div
+      className={clsx(
+        "p-2 md:p-3 flex flex-col flex-grow justify-center gap-2",
+        className,
+      )}
+    >
+      <TextButton
+        label="Restart conversation"
+        Icon={Restart}
+        type="ghost"
+        onClick={() => {
+          handler.reset();
+          onClose();
+        }}
+      />
+      <TextButton
+        label="Talk to an agent"
+        Icon={Escalate}
+        type="ghost"
+        onClick={() => {
+          // TODO: avoid hard-coding default intent by exposing from the SDK
+          handler.sendIntent("NLX.Escalation");
+          onClose();
+        }}
+      />
+      <div className="grid grid-cols-2 gap-2">
+        <TextButton
+          label="Dark mode"
+          Icon={ArrowForward}
+          type={colorMode === "dark" ? "main" : "ghost"}
+          onClick={() => {
+            setColorModeOverride("dark");
+          }}
+        />
+        <TextButton
+          label="Light mode"
+          Icon={ArrowForward}
+          type={colorMode === "light" ? "main" : "ghost"}
+          onClick={() => {
+            setColorModeOverride("light");
+          }}
         />
       </div>
-      <div className="flex-grow flex flex-col gap-2 justify-center">
+      <div className="grid grid-cols-2 gap-2">
         <TextButton
-          label="Restart conversation"
-          Icon={Restart}
-          type="ghost"
+          label="Half width"
+          Icon={ArrowForward}
+          type={windowSize === "half" ? "main" : "ghost"}
           onClick={() => {
-            handler.reset();
+            setWindowSizeOverride("half");
           }}
         />
         <TextButton
-          label="Talk to an agent"
-          Icon={Escalate}
-          type="ghost"
+          label="Full width"
+          Icon={ArrowForward}
+          type={windowSize === "full" ? "main" : "ghost"}
           onClick={() => {
-            // TODO: avoid hard-coding default intent by exposing from the SDK
-            handler.sendIntent("NLX.Escalation");
+            setWindowSizeOverride("full");
           }}
         />
-        <div className="grid grid-cols-2 gap-2">
-          <TextButton
-            label="Dark mode"
-            Icon={ArrowForward}
-            type={colorMode === "dark" ? "main" : "ghost"}
-            onClick={() => {
-              setColorModeOverride("dark");
-            }}
-          />
-          <TextButton
-            label="Light mode"
-            Icon={ArrowForward}
-            type={colorMode === "light" ? "main" : "ghost"}
-            onClick={() => {
-              setColorModeOverride("light");
-            }}
-          />
-        </div>
-        <div className="grid grid-cols-2 gap-2">
-          <TextButton
-            label="Half width"
-            Icon={ArrowForward}
-            type={windowSize === "half" ? "main" : "ghost"}
-            onClick={() => {
-              setWindowSizeOverride("half");
-            }}
-          />
-          <TextButton
-            label="Full width"
-            Icon={ArrowForward}
-            type={windowSize === "full" ? "main" : "ghost"}
-            onClick={() => {
-              setWindowSizeOverride("full");
-            }}
-          />
-        </div>
       </div>
     </div>
   );
diff --git a/packages/touchpoint-ui/src/components/ui/Loader.tsx b/packages/touchpoint-ui/src/components/ui/Loader.tsx
index 043190ac..2c55796b 100644
--- a/packages/touchpoint-ui/src/components/ui/Loader.tsx
+++ b/packages/touchpoint-ui/src/components/ui/Loader.tsx
@@ -1,13 +1,28 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { clsx } from "clsx";
 import { useEffect, useRef, useState, type FC } from "react";
+// import vid from "./loader-assets/loader-dark.mp4";
 
 export interface LoaderProps {
   label: string;
 }
 
-const r = 28;
-const rc = 15;
+const r = 30;
+const rc = 17;
+
+const ease = (
+  t: number,
+  [x1, y1]: [number, number],
+  [x2, y2]: [number, number],
+): number => {
+  // TODO: use control points
+  return (
+    (1 - t) ** 3 * 0 +
+    3 * (1 - t) ** 2 * t * y1 +
+    3 * (1 - t) * t ** 2 * y2 +
+    t ** 3
+  );
+};
 
 // A pair of circles a dynamic distance apart, with a connecting goop if they are close enough
 const Pair: FC<{ d: number }> = ({ d }) => {
@@ -41,6 +56,35 @@ const Pair: FC<{ d: number }> = ({ d }) => {
   );
 };
 
+const getDistance = (t: number, quarter: number): number => {
+  const pt1: [number, number] = [0, 0.2];
+  const pt2: [number, number] = [0.7, 1];
+  const easeD = ease(t, pt1, pt2);
+  const easeD2 = ease(1 - t, pt1, pt2);
+
+  return quarter === 0
+    ? easeD
+    : quarter === 1
+      ? easeD2
+      : quarter === 2
+        ? easeD
+        : easeD2;
+};
+
+const getRotation = (t: number, quarter: number): number => {
+  const pt1: [number, number] = [0.9, 0];
+  const pt2: [number, number] = [0.1, 1];
+  const easeR = ease(t, pt1, pt2);
+  const easeR2 = ease(1 - t, pt1, pt2);
+  return quarter === 0
+    ? 45 * easeR
+    : quarter === 1
+      ? 45 + 45 * (1 - easeR2)
+      : quarter === 2
+        ? 90 + 45 * easeR
+        : 135 + 45 * (1 - easeR2);
+};
+
 export const Loader: FC<LoaderProps> = ({ label }) => {
   const [time, setTime] = useState<{ start: number; current: number } | null>(
     null,
@@ -64,9 +108,17 @@ export const Loader: FC<LoaderProps> = ({ label }) => {
     return null;
   }
   const diff = time.current - time.start;
-  const phase = diff / 225;
-  const dFactor = 0.5 + 0.5 * Math.sin(phase);
-  const dropShadowRadius = dFactor > 0.2 ? 0 : (4 * (0.2 - dFactor)) / 0.2;
+
+  const adjustedTime = diff / 500;
+  const unit = Math.floor(adjustedTime);
+  const quarter = unit % 4;
+  const t = adjustedTime - unit;
+
+  const dFactor = getDistance(t, quarter);
+  const rotation = getRotation(t, quarter);
+
+  const dropShadowRadius = dFactor > 0.2 ? 0 : (8 * (0.2 - dFactor)) / 0.2;
+
   return (
     <div className={clsx("h-full w-full flex items-center justify-center")}>
       <div className="flex flex-col items-center justify-center gap-3">
@@ -79,9 +131,7 @@ export const Loader: FC<LoaderProps> = ({ label }) => {
               filter: `drop-shadow(0 0 ${dropShadowRadius}px rgb(var(--accent)))`,
             }}
           >
-            <g
-              transform={`translate(50 50) rotate(${90 - 90 * (0.5 + 0.5 * Math.cos(phase))})`}
-            >
+            <g transform={`translate(50 50) rotate(${rotation})`}>
               <Pair d={r * dFactor} />
             </g>
           </svg>
diff --git a/packages/touchpoint-ui/src/context.ts b/packages/touchpoint-ui/src/context.ts
index 382da5fb..457c3a08 100644
--- a/packages/touchpoint-ui/src/context.ts
+++ b/packages/touchpoint-ui/src/context.ts
@@ -1,17 +1,12 @@
 /* eslint-disable jsdoc/require-jsdoc */
 import { type ConversationHandler } from "@nlxai/chat-core";
 import { createContext, useContext } from "react";
-import { type ColorMode, type WindowSize } from "./types";
 
 export interface ContextValue {
-  windowSize: WindowSize;
-  colorMode: ColorMode;
   handler: ConversationHandler | null;
 }
 
 export const Context = createContext<ContextValue>({
-  colorMode: "dark",
-  windowSize: "half",
   handler: null,
 });
 
diff --git a/packages/touchpoint-ui/src/design-system.tsx b/packages/touchpoint-ui/src/design-system.tsx
index 24e88155..90ca085e 100644
--- a/packages/touchpoint-ui/src/design-system.tsx
+++ b/packages/touchpoint-ui/src/design-system.tsx
@@ -200,9 +200,7 @@ const Container: FC<{ children: ReactNode; mode: ColorMode }> = ({
   mode,
 }) => {
   return (
-    <Context.Provider
-      value={{ colorMode: mode, windowSize: "half", handler: null }}
-    >
+    <Context.Provider value={{ handler: null }}>
       <div
         className="bg-background p-4 rounded-plus space-y-4"
         data-theme={mode}
diff --git a/packages/touchpoint-ui/src/index.css b/packages/touchpoint-ui/src/index.css
index 909effc1..653423b4 100644
--- a/packages/touchpoint-ui/src/index.css
+++ b/packages/touchpoint-ui/src/index.css
@@ -4,6 +4,8 @@
 
 @layer base {
   div[data-theme="light"] {
+    --font-family: "Neue Haas Grotesk", sans-serif;
+
     --primary-80: 0 2 9 / 0.8;
     --primary-60: 0 2 9 / 0.6;
     --primary-40: 0 2 9 / 0.4;
@@ -32,6 +34,8 @@
   }
 
   div[data-theme="dark"] {
+    --font-family: "Neue Haas Grotesk", sans-serif;
+
     --primary-80: 255 255 255 / 0.85;
     --primary-60: 255 255 255 / 0.65;
     --primary-40: 255 255 255 / 0.45;
diff --git a/packages/touchpoint-ui/src/types.ts b/packages/touchpoint-ui/src/types.ts
index 6b14beef..e221d478 100644
--- a/packages/touchpoint-ui/src/types.ts
+++ b/packages/touchpoint-ui/src/types.ts
@@ -1,3 +1,4 @@
+import { type BotMessage } from "@nlxai/chat-core";
 import { type FC } from "react";
 
 /**
@@ -24,3 +25,21 @@ export type ColorMode = "light" | "dark";
  * Logo URL if applicable. May be specified as a single image URL or as an object by color mode (light/dark)
  */
 export type LogoUrl = string | Record<ColorMode, string>;
+
+/**
+ * Choice message with metadata
+ */
+export interface ChoiceMessage {
+  /**
+   * Message contents
+   */
+  message: BotMessage;
+  /**
+   * Index in the response transcript history
+   */
+  responseIndex: number;
+  /**
+   * Message index in the current response
+   */
+  messageIndex: number;
+}
diff --git a/packages/touchpoint-ui/tailwind.config.js b/packages/touchpoint-ui/tailwind.config.js
index 14e9eaf8..04c92da2 100644
--- a/packages/touchpoint-ui/tailwind.config.js
+++ b/packages/touchpoint-ui/tailwind.config.js
@@ -3,7 +3,13 @@ module.exports = {
   content: ["./src/**/*.{ts,tsx}"],
   prefix: "",
   theme: {
+    fontFamily: {
+      sans: ["var(--font-family)"],
+    },
     extend: {
+      backdropBlur: {
+        overlay: "48px",
+      },
       maxWidth: {
         content: "608px",
       },