diff --git a/packages/touchpoint-ui/src/App.tsx b/packages/touchpoint-ui/src/App.tsx
index a05c456..2494bca 100644
--- a/packages/touchpoint-ui/src/App.tsx
+++ b/packages/touchpoint-ui/src/App.tsx
@@ -217,6 +217,7 @@ const App = forwardRef<AppRef, Props>((props, ref) => {
               <>
                 <ChatMessages
                   responses={responses}
+                  colorMode={colorMode}
                   handler={handler}
                   uploadedFiles={uploadedFiles}
                   className={
diff --git a/packages/touchpoint-ui/src/components/ChatInput.tsx b/packages/touchpoint-ui/src/components/ChatInput.tsx
index 00284a4..c5b90ce 100644
--- a/packages/touchpoint-ui/src/components/ChatInput.tsx
+++ b/packages/touchpoint-ui/src/components/ChatInput.tsx
@@ -15,6 +15,7 @@ import { IconButton } from "./ui/IconButton";
 import { ArrowForward, Attachment, Delete, Check, Error } from "./ui/Icons";
 import { type ChoiceMessage } from "../types";
 import { MessageChoices } from "./ChatMessages";
+import { useTailwindMediaQuery } from "../hooks";
 
 interface ChatInputProps {
   className?: string;
@@ -47,14 +48,21 @@ const ChatInput: FC<ChatInputProps> = ({
   const [uploadErrorMessage, setUploadErrorMessage] = useState<string | null>(
     null,
   );
-  const [fileInfo, setFileInfo] = useState<FileInfo | null>(null);
+  const [uploadedFileInfo, setUploadedFileInfo] = useState<FileInfo | null>(
+    null,
+  );
   const fileInputRef = useRef<HTMLInputElement>(null);
 
   const textInputRef = useRef<HTMLTextAreaElement>(null);
 
+  const isMd = useTailwindMediaQuery("md");
+
+  // Autofocus input on desktop only
   useEffect(() => {
-    textInputRef.current?.focus();
-  }, []);
+    if (isMd) {
+      textInputRef.current?.focus();
+    }
+  }, [isMd]);
 
   const isInputEmpty = useMemo(() => {
     return inputValue.trim() === "";
@@ -64,7 +72,7 @@ const ChatInput: FC<ChatInputProps> = ({
     if (isInputEmpty) {
       return;
     }
-    if (uploadUrl != null && fileInfo != null) {
+    if (uploadUrl != null && uploadedFileInfo != null) {
       handler.sendStructured({
         uploadIds: [uploadUrl.uploadId],
         utterance: inputValue,
@@ -73,7 +81,7 @@ const ChatInput: FC<ChatInputProps> = ({
       handler.sendText(inputValue);
     }
     setInputValue("");
-    setFileInfo(null);
+    setUploadedFileInfo(null);
   };
 
   const isUploadEnabled = uploadUrl != null;
@@ -94,7 +102,7 @@ const ChatInput: FC<ChatInputProps> = ({
     }
 
     const { name, size, type } = file;
-    setFileInfo({ name, size, type });
+    setUploadedFileInfo({ name, size, type });
 
     if (size / 1024 ** 2 > MAX_INPUT_FILE_SIZE_IN_MB) {
       setUploadErrorMessage(
@@ -138,7 +146,7 @@ const ChatInput: FC<ChatInputProps> = ({
         <div
           className={clsx(
             "bg-primary-5 transition-colors duration-200 p-2 rounded-plus text-base font-normal",
-            isTextAreaInFocus || isUploadEnabled ? "" : "hover:bg-secondary-20",
+            isTextAreaInFocus ? "" : "hover:bg-secondary-20",
           )}
         >
           {uploadErrorMessage != null && (
@@ -147,16 +155,16 @@ const ChatInput: FC<ChatInputProps> = ({
               <span className="truncate ml-1">{uploadErrorMessage}</span>
             </div>
           )}
-          {fileInfo && (
+          {uploadedFileInfo && (
             <>
               <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} />
+                    <Check size={16} className="text-primary-60" />
                   )}
-                  <span className="truncate ml-3">{fileInfo.name}</span>
+                  <span className="truncate ml-3">{uploadedFileInfo.name}</span>
                 </p>
                 <IconButton
                   className="flex-none"
@@ -165,7 +173,7 @@ const ChatInput: FC<ChatInputProps> = ({
                   onClick={
                     isUploadEnabled
                       ? () => {
-                          setFileInfo(null);
+                          setUploadedFileInfo(null);
                           setUploadErrorMessage(null);
                           if (fileInputRef.current != null) {
                             fileInputRef.current.value = "";
@@ -180,7 +188,7 @@ const ChatInput: FC<ChatInputProps> = ({
             </>
           )}
           <div className={clsx("flex items-end")}>
-            {isUploadEnabled ? (
+            {isUploadEnabled && uploadedFileInfo == null ? (
               <>
                 <label
                   htmlFor="file-upload"
@@ -198,6 +206,7 @@ const ChatInput: FC<ChatInputProps> = ({
                 />
               </>
             ) : (
+              /* Disabled attachment button */
               <IconButton
                 className="flex-none"
                 Icon={Attachment}
diff --git a/packages/touchpoint-ui/src/components/ChatMessages.tsx b/packages/touchpoint-ui/src/components/ChatMessages.tsx
index 4b98a7a..0b6de1b 100644
--- a/packages/touchpoint-ui/src/components/ChatMessages.tsx
+++ b/packages/touchpoint-ui/src/components/ChatMessages.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsdoc/require-jsdoc */
-import { useEffect, useRef, type FC, Fragment } from "react";
+import { type FC, Fragment, useEffect, useRef, useState } from "react";
 import {
   type Response,
   type ConversationHandler,
@@ -11,10 +11,12 @@ import { marked } from "marked";
 import { Loader } from "./ui/Loader";
 import { TextButton } from "./ui/TextButton";
 import { ArrowForward } from "./ui/Icons";
+import { type ColorMode } from "../types";
 
 export interface ChatMessagesProps {
   handler: ConversationHandler;
   responses: Response[];
+  colorMode: ColorMode;
   uploadedFiles: Record<string, File>;
   className?: string;
 }
@@ -81,6 +83,7 @@ const UserMessage: FC<{ text: string; files?: File[] }> = ({ text, files }) => {
 
 export const ChatMessages: FC<ChatMessagesProps> = ({
   responses,
+  colorMode,
   uploadedFiles,
   className,
 }) => {
@@ -88,6 +91,8 @@ export const ChatMessages: FC<ChatMessagesProps> = ({
 
   const containerRef = useRef<HTMLDivElement | null>(null);
 
+  const [scrollAtBottom, setScrollAtBottom] = useState<boolean>(false);
+
   useEffect(() => {
     const containerNode = containerRef.current;
     if (containerNode == null) {
@@ -99,86 +104,108 @@ export const ChatMessages: FC<ChatMessagesProps> = ({
   }, [responses]);
 
   return (
-    <div
-      className={clsx(
-        "h-full p-2 md:p-3 overflow-y-auto no-scrollbar space-y-8",
-        className,
+    <div className={clsx("h-full relative", className)}>
+      {isWaiting || scrollAtBottom || responses.length < 3 ? null : (
+        <div
+          data-theme={colorMode === "dark" ? "light" : "dark"}
+          className={clsx(
+            "absolute inset-x-0 h-[1px] top-0 bg-background opacity-[0.01] backdrop-blur-md",
+          )}
+        />
       )}
-      ref={containerRef}
-    >
-      {responses.map((response, responseIndex) => {
-        // User response
-        if (response.type === "user") {
-          if (response.payload.type === "text") {
+      <div
+        className="h-full p-2 md:p-3 overflow-y-auto no-scrollbar space-y-8"
+        ref={containerRef}
+        onScroll={() => {
+          const containerNode = containerRef.current;
+          if (containerNode == null) {
+            return;
+          }
+          const isAtBottom =
+            containerNode.scrollHeight - containerNode.scrollTop ===
+            containerNode.clientHeight;
+          if (!isAtBottom && scrollAtBottom) {
+            setScrollAtBottom(false);
+          }
+          if (isAtBottom && !scrollAtBottom) {
+            setScrollAtBottom(true);
+          }
+        }}
+      >
+        {responses.map((response, responseIndex) => {
+          // User response
+          if (response.type === "user") {
+            if (response.payload.type === "text") {
+              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;
+            }
+          }
+          // Failure
+          if (response.type === "failure") {
             return (
-              <UserMessage key={responseIndex} text={response.payload.text} />
+              <p key={responseIndex} className="text-error-primary text-base">
+                {response.payload.text}
+              </p>
             );
-          } 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;
           }
-        }
-        // Failure
-        if (response.type === "failure") {
+          // Bot response
+          const isLast = responseIndex === responses.length - 1;
           return (
-            <p key={responseIndex} className="text-error-primary text-base">
-              {response.payload.text}
-            </p>
-          );
-        }
-        // Bot response
-        const isLast = responseIndex === responses.length - 1;
-        return (
-          <Fragment key={responseIndex}>
-            <div className={clsx("space-y-2", isLast ? "min-h-full" : "")}>
+            <Fragment key={responseIndex}>
+              <div className={clsx("space-y-2", isLast ? "min-h-full" : "")}>
+                {response.payload.messages.map((message, messageIndex) => {
+                  return (
+                    <div key={messageIndex} className="text-base">
+                      <div
+                        className="pr-10"
+                        dangerouslySetInnerHTML={{
+                          __html: marked(message.text),
+                        }}
+                      />
+                    </div>
+                  );
+                })}
+              </div>
+              {/* Render the selected choice text as a user message */}
               {response.payload.messages.map((message, messageIndex) => {
-                return (
-                  <div key={messageIndex} className="text-base">
-                    <div
-                      className="pr-10"
-                      dangerouslySetInnerHTML={{
-                        __html: marked(message.text),
-                      }}
+                if (message.selectedChoiceId != null) {
+                  const selectedChoice = message.choices.find(
+                    (choice) => choice.choiceId === message.selectedChoiceId,
+                  );
+                  if (selectedChoice == null) {
+                    return null;
+                  }
+                  return (
+                    <UserMessage
+                      key={messageIndex}
+                      text={selectedChoice.choiceText}
                     />
-                  </div>
-                );
-              })}
-            </div>
-            {/* Render the selected choice text as a user message */}
-            {response.payload.messages.map((message, messageIndex) => {
-              if (message.selectedChoiceId != null) {
-                const selectedChoice = message.choices.find(
-                  (choice) => choice.choiceId === message.selectedChoiceId,
-                );
-                if (selectedChoice == null) {
-                  return null;
+                  );
                 }
-                return (
-                  <UserMessage
-                    key={messageIndex}
-                    text={selectedChoice.choiceText}
-                  />
-                );
-              }
-              return null;
-            })}
-          </Fragment>
-        );
-      })}
-      {isWaiting ? <Loader label="Thinking" /> : null}
+                return null;
+              })}
+            </Fragment>
+          );
+        })}
+        {isWaiting ? <Loader label="Thinking" /> : null}
+      </div>
     </div>
   );
 };
diff --git a/packages/touchpoint-ui/src/components/ui/Loader.tsx b/packages/touchpoint-ui/src/components/ui/Loader.tsx
index 2c55796..0647498 100644
--- a/packages/touchpoint-ui/src/components/ui/Loader.tsx
+++ b/packages/touchpoint-ui/src/components/ui/Loader.tsx
@@ -10,18 +10,8 @@ export interface LoaderProps {
 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
-  );
+const ease = (t: number): number => {
+  return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
 };
 
 // A pair of circles a dynamic distance apart, with a connecting goop if they are close enough
@@ -56,33 +46,36 @@ 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 getDistance = (t: number, stage: number): number => {
+  if (stage === 0) {
+    return ease(t);
+  }
+  if (stage === 1) {
+    return 1;
+  }
+  if (stage === 2) {
+    return ease(1 - t);
+  }
+  if (stage === 3) {
+    return 0;
+  }
+  return getDistance(t, stage - 4);
 };
 
-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);
+const getSpin = (t: number, stage: number): number => {
+  if (stage === 0) {
+    return 0;
+  }
+  if (stage === 1) {
+    return ease(t);
+  }
+  if (stage === 2) {
+    return 1;
+  }
+  if (stage === 3) {
+    return 1;
+  }
+  return getSpin(t, stage - 4) + 1;
 };
 
 export const Loader: FC<LoaderProps> = ({ label }) => {
@@ -109,15 +102,15 @@ export const Loader: FC<LoaderProps> = ({ label }) => {
   }
   const diff = time.current - time.start;
 
-  const adjustedTime = diff / 500;
+  const adjustedTime = diff / 333.333;
   const unit = Math.floor(adjustedTime);
-  const quarter = unit % 4;
+  const stage = unit % 8;
   const t = adjustedTime - unit;
 
-  const dFactor = getDistance(t, quarter);
-  const rotation = getRotation(t, quarter);
+  const dFactor = getDistance(t, stage);
+  const spin = getSpin(t, stage);
 
-  const dropShadowRadius = dFactor > 0.2 ? 0 : (8 * (0.2 - dFactor)) / 0.2;
+  const dropShadowRadius = dFactor > 0.2 ? 0 : (5 * (0.2 - dFactor)) / 0.2;
 
   return (
     <div className={clsx("h-full w-full flex items-center justify-center")}>
@@ -131,14 +124,11 @@ export const Loader: FC<LoaderProps> = ({ label }) => {
               filter: `drop-shadow(0 0 ${dropShadowRadius}px rgb(var(--accent)))`,
             }}
           >
-            <g transform={`translate(50 50) rotate(${rotation})`}>
+            <g transform={`translate(50 50) rotate(${spin * 90})`}>
               <Pair d={r * dFactor} />
             </g>
           </svg>
         </div>
-        {/* <video className={clsx("w-16 h-16 block")} autoPlay muted loop>
-          <source src={vid} type="video/mp4" />
-        </video> */}
         <p className="text-primary-60">{label}</p>
       </div>
     </div>