diff --git a/app/chat/[id]/page.tsx b/app/chat/[id]/page.tsx
index 4e7c7a7..79d4776 100644
--- a/app/chat/[id]/page.tsx
+++ b/app/chat/[id]/page.tsx
@@ -76,7 +76,7 @@ export default function Chat({ params }: { params: { id: string } }) {
             {conversation.map((message: ClientMessage) =>
               message.role === "user" ? (
                 <div key={message.id} className="flex flex-row gap-3 py-3 items-center justify-end">
-                  <div className="relative max-w-[70%] text-base text-stone-600 font-light bg-[#F4F4F4] rounded-full px-5 py-2.5">
+                  <div className="relative w-fit sm:max-w-[70%] text-sm sm:text-base text-stone-600 font-light bg-[#F4F4F4] rounded-full px-5 py-2.5">
                     {message.display}
                   </div>
                   <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
@@ -91,10 +91,13 @@ export default function Chat({ params }: { params: { id: string } }) {
                   <div className="border rounded-full h-8 w-8 min-w-8 flex items-center justify-center">
                     <Market0Icon />
                   </div>
-                  <div className="w-full font-light text-stone-600 flex items-center">{message.display}</div>
+                  <div className="w-full font-light text-stone-600 flex items-center text-sm sm:text-base">
+                    {message.display}
+                  </div>
                 </div>
               ) : null
             )}
+
             <div ref={visibilityRef} className="w-full h-px" />
           </div>
           {conversation.length === 0 && (
@@ -146,7 +149,7 @@ export default function Chat({ params }: { params: { id: string } }) {
                           <Input
                             autoFocus
                             autoComplete="off"
-                            className="bg-white shadow-none border-0 focus-visible:ring-0 py-2 px-0 placeholder-slate-500/80 text-base font-light"
+                            className="bg-white shadow-none border-0 focus-visible:ring-0 py-2 px-0 placeholder-slate-500/80 text-sm sm:text-base font-light"
                             placeholder="Start Typing..."
                             {...field}
                           />
diff --git a/llm/components/conditional-purchase.tsx b/llm/components/conditional-purchase.tsx
index cd330cc..eb76bd4 100644
--- a/llm/components/conditional-purchase.tsx
+++ b/llm/components/conditional-purchase.tsx
@@ -102,7 +102,7 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
           message={
             <>
               {!simulating && (
-                <div className="text-slate-500 text-sm leading-6">
+                <div className="text-slate-500 text-xs sm:text-sm leading-6">
                   To simulate the agent executing the task, please click{" "}
                   <button className="border-b border-slate-500 leading-none" onClick={simulateExecution}>
                     here
@@ -111,18 +111,18 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
                 </div>
               )}
               {simulating && (
-                <div className="flex gap-3 items-center w-fit mx-auto text-slate-500 text-sm leading-6">
+                <div className="flex gap-3 items-center w-fit mx-auto text-slate-500 text-xs sm:text-sm leading-6">
                   Simulating <Loader />
                 </div>
               )}
             </>
           }
         >
-          <div className="p-5 rounded-2xl bg-zinc-950 text-white">
+          <div className="p-4 sm:p-5 rounded-2xl bg-zinc-950 text-white">
             <div className="flex flex-row justify-between">
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-white">Buy {conditionalPurchase.symbol}</div>
-                <div className="text-sm text text-white/40 leading-6">
+                <div className="text-xs sm:text-sm text text-white/40 leading-6">
                   Created {formatRelative(conditionalPurchase.created_at, new Date())}
                 </div>
               </div>
@@ -130,15 +130,15 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
                 <div className="text-base font-semibold text-green-400 text-right">
                   If {conditionalPurchase.metric} {conditionalPurchase.operator} {conditionalPurchase.threshold}
                 </div>
-                <div className="text-sm text text-white/40 leading-6 uppercase">Condition</div>
+                <div className="text-xs sm:text-sm text text-white/40 leading-6 uppercase">Condition</div>
               </div>
             </div>
-            <div className="border-t border-white/20 mt-5 pt-5">
+            <div className="border-t border-white/20 mt-4 sm:mt-5 pt-4 sm:pt-5">
               <div className="flex flex-row gap-3 items-start">
                 <div className="w-[25px]">
                   <TaskIcon />
                 </div>
-                <div className="text-white font-light">
+                <div className="text-white font-light text-base sm:text-lg">
                   Task: Buy {conditionalPurchase.quantity} ${conditionalPurchase.symbol} shares if{" "}
                   {conditionalPurchase.metric} {conditionalPurchase.operator} {conditionalPurchase.threshold}
                 </div>
@@ -150,13 +150,13 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
     case "canceled":
       return (
         <WarningWrapper className="max-w-xl">
-          <div className="p-5 rounded-2xl bg-zinc-950 text-white">
+          <div className="p-4 sm:p-5 rounded-2xl bg-zinc-950 text-white">
             <div className="flex flex-row justify-between">
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-white">
                   Buy {conditionalPurchase.quantity} shares of {conditionalPurchase.symbol}
                 </div>
-                <div className="text-sm text text-white/40 leading-6">
+                <div className="text-xs sm:text-sm text text-white/40 leading-6">
                   Created {formatRelative(conditionalPurchase.created_at, new Date())}
                 </div>
               </div>
@@ -164,15 +164,15 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
                 <div className="text-base font-semibold text-green-400">
                   If {conditionalPurchase.metric} {conditionalPurchase.operator} {conditionalPurchase.threshold}
                 </div>
-                <div className="text-sm text text-white/40 leading-6 uppercase">Condition</div>
+                <div className="text-xs sm:text-sm text text-white/40 leading-6 uppercase">Condition</div>
               </div>
             </div>
-            <div className="border-t border-white/20 mt-5 pt-5">
+            <div className="border-t border-white/20 mt-4 sm:mt-5 pt-4 sm:pt-5">
               <div className="flex flex-row gap-4 items-start">
                 <div className="w-[25px]">
                   <CancelRedIcon />
                 </div>
-                <div className="text-white font-light">
+                <div className="text-white font-light text-base sm:text-lg">
                   The purchase was <strong className="text-red-400">CANCELED</strong> on{" "}
                   {format(conditionalPurchase.updated_at, "PPPP p")}.
                 </div>
@@ -184,13 +184,13 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
     case "completed":
       return (
         <WarningWrapper className="max-w-xl">
-          <div className="p-5 rounded-2xl bg-zinc-950 text-white">
+          <div className="p-4 sm:p-5 rounded-2xl bg-zinc-950 text-white">
             <div className="flex flex-row justify-between">
               <div className="flex flex-col gap-2">
                 <div className="text-base font-semibold text-white">
                   Buy {conditionalPurchase.quantity} shares of {conditionalPurchase.symbol}
                 </div>
-                <div className="text-sm text text-white/40 leading-6">
+                <div className="text-xs sm:text-sm text text-white/40 leading-6">
                   Created {formatRelative(conditionalPurchase.created_at, new Date())}
                 </div>
               </div>
@@ -198,15 +198,15 @@ export function ConditionalPurchase({ id, isMFAEnrolled }: { id: string; isMFAEn
                 <div className="text-base font-semibold text-green-400">
                   If {conditionalPurchase.metric} {conditionalPurchase.operator} {conditionalPurchase.threshold}
                 </div>
-                <div className="text-sm text text-white/40 leading-6 uppercase">Condition</div>
+                <div className="text-xs sm:text-sm text text-white/40 leading-6 uppercase">Condition</div>
               </div>
             </div>
-            <div className="border-t border-white/20 mt-5 pt-5">
+            <div className="border-t border-white/20 mt-4 sm:mt-5 pt-4 sm:pt-5">
               <div className="flex flex-row gap-4 items-start">
                 <div className="w-[25px]">
                   <CheckGreenIcon />
                 </div>
-                <div className="text-white font-light">
+                <div className="text-white font-light text-base sm:text-lg">
                   The purchase was <strong className="text-green-400">COMPLETED</strong> on{" "}
                   {format(conditionalPurchase.updated_at, "PPPP p")}.
                 </div>
diff --git a/llm/components/documents.tsx b/llm/components/documents.tsx
index f6fb718..733d942 100644
--- a/llm/components/documents.tsx
+++ b/llm/components/documents.tsx
@@ -40,10 +40,7 @@ export const Documents = ({
         message: `Subscribe me to the newsletter. Once done ASK me if I want to read the forecast analysis for ${symbol}.`,
         hidden: true,
       });
-      setMessages((prevMessages: ClientMessage[]) => [
-        ...prevMessages,
-        response,
-      ]);
+      setMessages((prevMessages: ClientMessage[]) => [...prevMessages, response]);
     })();
   };
 
@@ -59,17 +56,12 @@ export const Documents = ({
                   <Tooltip>
                     <TooltipTrigger asChild>
                       <Link
-                        href={
-                          document.metadata.link ??
-                          `/report/${document.metadata.id}`
-                        }
+                        href={document.metadata.link ?? `/report/${document.metadata.id}`}
                         target="_black"
                         rel="noopener noreferrer"
                         className="cursor-pointer"
                       >
-                        <span className="font-mono text-gray-500 text-[0.65rem]">
-                          [{index + 1}]
-                        </span>
+                        <span className="font-mono text-gray-500 text-[0.65rem]">[{index + 1}]</span>
                       </Link>
                     </TooltipTrigger>
                     <TooltipContent>
@@ -82,19 +74,17 @@ export const Documents = ({
           </div>
         )}
         {showEnrollment && finished && (
-          <div className="border border-gray-300 rounded-xl p-6 flex items-center w-full justify-between mt-5">
-            <div className="flex flex-col gap-1.5">
-              <h3 className="font-semibold text-base leading-6 text-stone-700">
-                Join Market0 Newsletter
-              </h3>
-              <p className="text-sm font-normal leading-5">
+          <div className="border border-gray-300 rounded-xl p-4 sm:p-6 flex flex-col sm:flex-row gap-4 sm:gap-0 items-center w-full justify-between mt-5">
+            <div className="flex flex-col gap-1 sm:gap-1.5">
+              <h3 className="font-semibold text-sm sm:text-base leading-6 text-stone-700">Join Market0 Newsletter</h3>
+              <p className="text-xs sm:text-sm font-normal leading-5">
                 To get access to analyst forecasts join the newsletter.
               </p>
             </div>
-            <div>
+            <div className="w-full sm:w-fit">
               <button
                 onClick={() => enroll()}
-                className="bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4 transition-all duration-300"
+                className="w-full sm:w-fit bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4 transition-all duration-300"
               >
                 Join
               </button>
diff --git a/llm/components/events.tsx b/llm/components/events.tsx
index 163cfda..a0c1309 100644
--- a/llm/components/events.tsx
+++ b/llm/components/events.tsx
@@ -17,17 +17,14 @@ export function Events({ events }: { events: Event[] }) {
     <div className="flex flex-col gap-4">
       <WarningWrapper>
         <div className="flex flex-col gap-4">
-          <div className="grid grid-cols-3 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-3 gap-1 sm:gap-3">
             {events.map((event) => (
-              <div
-                key={event.date}
-                className="flex flex-col p-6 bg-zinc-900 rounded-2xl"
-              >
-                <div className="border-b border-[#535257] pb-4 mb-4 flex flex-col gap-3">
+              <div key={event.date} className="flex flex-col p-4 sm:p-6 bg-zinc-900 rounded-2xl">
+                <div className="border-b border-[#535257] pb-2 sm:pb-4 mb-2 sm:mb-4 flex flex-col gap-3">
                   <div className="text-zinc-500 text-xs font-medium">
                     {format(parseISO(event.date), "dd LLL, yyyy")}
                   </div>
-                  <div className="text-xl text-white font-semibold leading-6">
+                  <div className="text-base sm:text-xl text-white font-semibold leading-6">
                     {event.headline.slice(0, 30)}
                   </div>
                 </div>
diff --git a/llm/components/positions.tsx b/llm/components/positions.tsx
index 8ab45e7..df2687f 100644
--- a/llm/components/positions.tsx
+++ b/llm/components/positions.tsx
@@ -17,29 +17,19 @@ export function Positions({ positions }: { positions: Position[] }) {
         {positions.map((position) => (
           <button
             key={position.ticker_id}
-            className="flex p-5 text-green-400 rounded-2xl bg-zinc-950 hover:bg-zinc-800 transition-all duration-300"
+            className="flex p-4 sm:p-5 text-green-400 rounded-2xl bg-zinc-950 hover:bg-zinc-800 transition-all duration-300"
             onClick={async () => {
-              const response = await continueConversation(
-                `View ${position.ticker_id}`
-              );
-              setMessages((prevMessages: ClientMessage[]) => [
-                ...prevMessages,
-                response,
-              ]);
+              const response = await continueConversation(`View ${position.ticker_id}`);
+              setMessages((prevMessages: ClientMessage[]) => [...prevMessages, response]);
             }}
           >
-            <div className="flex flex-row justify-between w-full items-end px-3">
+            <div className="flex flex-row justify-between w-full items-end px-1 sm:px-3">
               <div className="flex flex-col gap-2">
-                <div className="text-sm text text-white leading-6 text-left">
-                  {position.ticker_id}
-                </div>
-                <div className="text-base font-semibold text-white text-left">
-                  Qty: {position.quantity}
-                </div>
+                <div className="text-xs sm:text-sm text-white leading-6 text-left">{position.ticker_id}</div>
+                <div className="text-sm sm:text-base font-semibold text-white text-left">Qty: {position.quantity}</div>
               </div>
-              <div className="text-sm text-white text-right">
-                Avg. Price: $
-                {parseFloat(position.av_price.toString()).toFixed(2)}
+              <div className="text-xs sm:text-sm text-white text-right">
+                Avg. Price: ${parseFloat(position.av_price.toString()).toFixed(2)}
               </div>
             </div>
           </button>
diff --git a/llm/components/reminder.tsx b/llm/components/reminder.tsx
index 4713c50..30bc1e2 100644
--- a/llm/components/reminder.tsx
+++ b/llm/components/reminder.tsx
@@ -50,28 +50,25 @@ export function Reminder({ reminderID }: { reminderID: string }) {
       }}
       connectWidget={{
         title: "Connect to Google Tasks",
-        description:
-          "To create reminders in Google Tasks, you’ll first need to connect to your Google Account.",
+        description: "To create reminders in Google Tasks, you’ll first need to connect to your Google Account.",
       }}
       shouldCheckAuthorization={shouldCheckAuthorization}
       onUserAuthorized={onUserAuthorized}
     >
       {reminder && (
-        <div className="border border-gray-300 rounded-lg p-6 flex items-center w-full justify-between">
-          <div className="flex flex-col gap-2">
-            <h2 className="text-base leading-6 font-semibold">
-              {reminder.title}
-            </h2>
-            <p className="text-sm leading-5 font-light text-gray-500">
+        <div className="border border-gray-300 rounded-xl p-4 sm:p-6 flex flex-col sm:flex-row gap-4 sm:gap-0 items-center w-full justify-between">
+          <div className="flex flex-col gap-1 sm:gap-1.5 w-full">
+            <h3 className="font-semibold text-sm sm:text-base leading-6 text-stone-700">{reminder.title}</h3>
+            <p className="text-xs sm:text-sm font-normal leading-5">
               Google Task created at {format(reminder.due, "dd LLL, yyyy")}.
             </p>
           </div>
-          <div>
+          <div className="w-full sm:w-fit">
             <a
               href="https://tasks.google.com"
               rel="noopener noreferrer"
               target="_blank"
-              className="flex gap-2 items-center bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4"
+              className="w-full sm:w-fit flex items-center justify-center gap-3 bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4"
             >
               View Task <ExternalLink />
             </a>
diff --git a/llm/components/stock-purchase-status.tsx b/llm/components/stock-purchase-status.tsx
index 0041be3..e86d2dc 100644
--- a/llm/components/stock-purchase-status.tsx
+++ b/llm/components/stock-purchase-status.tsx
@@ -1,11 +1,18 @@
 import { CancelRedIcon, CheckGreenIcon } from "@/components/icons";
 
-export const StockPurchaseStatus = ({ message, status }: { message: string, status?: 'in-progress' | 'success' | 'failure'  }) =>
+export const StockPurchaseStatus = ({
+  message,
+  status,
+}: {
+  message: string;
+  status?: "in-progress" | "success" | "failure";
+}) => (
   <div className="flex flex-row gap-4 items-center">
-    { status === 'failure' && <CancelRedIcon /> }
-    { status === 'success' && <CheckGreenIcon /> }
-    { status === 'in-progress' && <div className="animate-spin h-5 w-5 border-t-2 border-b-2 border-white rounded-full" /> }
-    <p>
-      {message}
-    </p>
-  </div>;
+    {status === "failure" && <CancelRedIcon />}
+    {status === "success" && <CheckGreenIcon />}
+    {status === "in-progress" && (
+      <div className="animate-spin h-5 w-5 border-t-2 border-b-2 border-white rounded-full" />
+    )}
+    <p>{message}</p>
+  </div>
+);
diff --git a/llm/components/stock-purchase.tsx b/llm/components/stock-purchase.tsx
index d1e76a6..e1851a6 100644
--- a/llm/components/stock-purchase.tsx
+++ b/llm/components/stock-purchase.tsx
@@ -54,8 +54,8 @@ type StockPurchaseUIParams = {
    * Holds the result of the user interaction with the component.
    */
   result?: {
-    message: string
-    status: "success" | "failure"
+    message: string;
+    status: "success" | "failure";
   };
 };
 
@@ -101,31 +101,25 @@ export function StockPurchase({
 
   return (
     <WarningWrapper className="max-w-xl">
-      <div className="p-4 text-green-400 rounded-2xl bg-zinc-950 pt-5">
-        <div className="flex flex-row justify-between px-3">
+      <div className="p-2 sm:p-4 text-green-400 rounded-2xl bg-zinc-950 pt-3 sm:pt-5">
+        <div className="flex flex-row justify-between px-2 sm:px-3">
           <div className="flex flex-col gap-2">
             <div className="text-base font-semibold text-white">{symbol}</div>
 
-            <div className="text-sm text text-white/40 leading-6">
+            <div className="text-xs sm:text-sm text text-white/40 leading-6">
               {company} • {market} • {currency}
             </div>
           </div>
           <div className="flex flex-col gap-2">
-            <div className="text-base font-semibold text-white text-right">
-              ${price}
-            </div>
+            <div className="text-base font-semibold text-white text-right">${price}</div>
             <div
-              className={`inline-flex items-center gap-2 text-sm ${
+              className={`inline-flex items-center gap-2 text-xs sm:text-sm ${
                 delta > 0 ? "text-green-400" : "text-red-400"
               }`}
             >
               {delta > 0 ? <StockUpIcon /> : <StockDownIcon />}
               <span>
-                {delta} (
-                {`${delta > 0 ? "+" : ""}${((delta / price) * 100).toFixed(
-                  2
-                )}%`}
-                )
+                {delta} ({`${delta > 0 ? "+" : ""}${((delta / price) * 100).toFixed(2)}%`})
               </span>
             </div>
           </div>
@@ -133,12 +127,12 @@ export function StockPurchase({
 
         {purchasingUI ? (
           <div className="flex flex-row gap-4 pb-2 mt-5 mx-3 border-t border-white/20 pt-5 items-center">
-            <div className="text-white text-lg font-light">{purchasingUI}</div>
+            <div className="text-white text-base sm:text-lg font-light">{purchasingUI}</div>
           </div>
         ) : (
           <>
-            <div className="relative pb-5 mt-5 mx-3 border-t border-white/20 pt-5">
-              <p className="text-white/80 text-base mb-5">Shares to purchase</p>
+            <div className="relative pb-5 mt-5 mx-2 sm:mx-3 border-t border-white/20 pt-5">
+              <p className="text-white/80 text-sm sm:text-base mb-5">Shares to purchase</p>
               <input
                 id="labels-range-input"
                 type="range"
@@ -148,39 +142,33 @@ export function StockPurchase({
                 max="1000"
                 className="w-full h-1 rounded-lg appearance-none cursor-pointer bg-zinc-600 accent-green-500 dark:bg-zinc-700"
               />
-              <span className="absolute text-xs bottom-1 start-0 text-zinc-400">
-                0
-              </span>
+              <span className="absolute text-xs bottom-1 start-0 text-zinc-400">0</span>
               <span className="absolute text-xs -translate-x-1/2 bottom-1 start-1/3 text-zinc-400 rtl:translate-x-1/2">
                 100
               </span>
               <span className="absolute text-xs -translate-x-1/2 bottom-1 start-2/3 text-zinc-400 rtl:translate-x-1/2">
                 500
               </span>
-              <span className="absolute text-xs bottom-1 end-0 text-zinc-400">
-                1000
-              </span>
+              <span className="absolute text-xs bottom-1 end-0 text-zinc-400">1000</span>
             </div>
 
-            <div className="mt-6 mx-3">
+            <div className="mt-6 mx-2 sm:mx-3">
               <div className="flex justify-between items-end">
                 <div>
-                  <p className="font-medium text-white text-sm mb-1">
-                    Total cost
-                  </p>
+                  <p className="font-medium text-white text-sm mb-1">Total cost</p>
                   <div className="flex flex-row gap-2 text-white text-sm font-light">
                     {quantity} shares x ${price} per share
                   </div>
                 </div>
-                <div className="text-xl leading-8 font-semibold">
+                <div className="text-xl font-semibold">
                   <span>{formatNumber(quantity * price)}</span>
                 </div>
               </div>
             </div>
 
-            <div className="mx-3 mb-3">
+            <div className="mx-2 sm:mx-3 mb-3">
               <button
-                className="w-full py-2 mt-6 bg-green-500 rounded-lg text-black text-base font-normal"
+                className="w-full py-2 mt-6 bg-green-500 rounded-lg text-black text-sm sm:text-base font-normal"
                 onClick={async () => {
                   const response = await confirmPurchase({
                     symbol,
diff --git a/llm/components/stock-skeleton.tsx b/llm/components/stock-skeleton.tsx
index 0de63b1..ebc7516 100644
--- a/llm/components/stock-skeleton.tsx
+++ b/llm/components/stock-skeleton.tsx
@@ -3,12 +3,10 @@ import WarningWrapper from "./warning-wrapper";
 export const StockSkeleton = () => {
   return (
     <WarningWrapper className="max-w-xl">
-      <div className="p-5 text-green-400 rounded-2xl bg-zinc-950 pt-14 min-h-[192px]">
+      <div className="text-green-400 rounded-2xl bg-zinc-950 pt-3 sm:pt-5 min-h-[166px]">
         <div className="flex flex-row justify-between px-5">
           <div className="flex flex-col gap-2">
-            <div className="text-base font-bold text-transparent w-fit bg-zinc-700 rounded-md">
-              xxxxx
-            </div>
+            <div className="text-base font-bold text-transparent w-fit bg-zinc-700 rounded-md">xxxxx</div>
             <div className="text text-xs text-transparent mt-1 bg-zinc-700 w-fit rounded-md">
               xxxxxx xxx xx xxxx xx xxx
             </div>
@@ -17,9 +15,7 @@ export const StockSkeleton = () => {
             <div className="inline-block px-2 py-1 rounded-md bg-white/10 text-base text-transparent w-fit bg-zinc-700">
               xxx
             </div>
-            <div className="text text-xs text-transparent mt-1 bg-zinc-700 w-fit rounded-md">
-              xxxxxx xxx xx xxxx
-            </div>
+            <div className="text text-xs text-transparent mt-1 bg-zinc-700 w-fit rounded-md">xxxxxx xxx xx xxxx</div>
           </div>
         </div>
 
diff --git a/llm/components/stock.tsx b/llm/components/stock.tsx
index 5989e4c..be9f9b1 100644
--- a/llm/components/stock.tsx
+++ b/llm/components/stock.tsx
@@ -34,14 +34,13 @@ export function Stock({
   const chartRef = useRef<HTMLDivElement>(null);
 
   let width = 0;
-  const resizeObserverResult =
-    useResizeObserver({
-      ref: chartRef,
-      box: "content-box",
-      //TODO: This fails on safari 17. Need to investigate
-      //      returns twice the value of content-box.
-      // box: "device-pixel-content-box",
-    });
+  const resizeObserverResult = useResizeObserver({
+    ref: chartRef,
+    box: "content-box",
+    //TODO: This fails on safari 17. Need to investigate
+    //      returns twice the value of content-box.
+    // box: "device-pixel-content-box",
+  });
 
   //TODO remove this when the issue is fixed
   // width = resizeObserverResult?.width ? resizeObserverResult?.width : 0;
@@ -66,38 +65,32 @@ export function Stock({
 
   return (
     <WarningWrapper className="max-w-xl">
-      <div className="p-4 text-green-400 rounded-2xl bg-zinc-950 pt-5">
-        <div className="flex flex-row justify-between px-3">
+      <div className="text-green-400 rounded-2xl bg-zinc-950 pt-3 sm:pt-5">
+        <div className="flex flex-row justify-between px-5 sm:px-7">
           <div className="flex flex-col gap-2">
             <div className="text-base font-semibold text-white">{symbol}</div>
 
-            <div className="text-sm text text-white/40 leading-6">
+            <div className="text-xs sm:text-sm text text-white/40 leading-6">
               {company} • {market} • {currency}
             </div>
           </div>
           <div className="flex flex-col gap-2">
-            <div className="text-base font-semibold text-white text-right">
-              ${price}
-            </div>
+            <div className="text-base font-semibold text-white text-right">${price}</div>
             <div
-              className={`inline-flex items-center gap-2 text-sm ${
+              className={`inline-flex items-center gap-2 text-xs sm:text-sm ${
                 delta > 0 ? "text-green-400" : "text-red-400"
               }`}
             >
               {delta > 0 ? <StockUpIcon /> : <StockDownIcon />}
               <span>
-                {delta} (
-                {`${delta > 0 ? "+" : ""}${((delta / price) * 100).toFixed(
-                  2
-                )}%`}
-                )
+                {delta} ({`${delta > 0 ? "+" : ""}${((delta / price) * 100).toFixed(2)}%`})
               </span>
             </div>
           </div>
         </div>
 
         <div
-          className="relative mx-4 cursor-default mt-5"
+          className="relative cursor-default mt-5"
           onPointerMove={(event) => {
             if (chartRef.current) {
               const { clientX } = event;
@@ -133,26 +126,13 @@ export function Stock({
               }}
             >
               <div className="text-xs tabular-nums">${priceAtTime.value}</div>
-              <div className="text-xs text-zinc-400 tabular-nums">
-                {priceAtTime.time}
-              </div>
+              <div className="text-xs text-zinc-400 tabular-nums">{priceAtTime.time}</div>
             </div>
           ) : null}
 
-          <svg
-            viewBox="0 0 250.0 168.0"
-            height="80"
-            width="100%"
-            preserveAspectRatio="none"
-          >
+          <svg viewBox="0 0 250.0 168.0" height="80" width="100%" preserveAspectRatio="none">
             <defs>
-              <linearGradient
-                id="fill-id-tsuid_31"
-                x1="0%"
-                x2="0%"
-                y1="0%"
-                y2="100%"
-              >
+              <linearGradient id="fill-id-tsuid_31" x1="0%" x2="0%" y1="0%" y2="100%">
                 <stop offset="0%" stopColor="#34a853" stopOpacity="0.38"></stop>
                 <stop offset="13%" stopColor="#e6f4ea" stopOpacity="0"></stop>
               </linearGradient>
@@ -160,18 +140,8 @@ export function Stock({
                 <rect height="100%" width="0" x="0" y="0"></rect>
               </clipPath>
               <defs>
-                <linearGradient
-                  id="chart-grad-_f1bJZYLUHqWpxc8Prs2meA_33"
-                  x1="0%"
-                  x2="0%"
-                  y1="0%"
-                  y2="100%"
-                >
-                  <stop
-                    offset="0%"
-                    stopColor="#34a853"
-                    stopOpacity="0.38"
-                  ></stop>
+                <linearGradient id="chart-grad-_f1bJZYLUHqWpxc8Prs2meA_33" x1="0%" x2="0%" y1="0%" y2="100%">
+                  <stop offset="0%" stopColor="#34a853" stopOpacity="0.38"></stop>
                   <stop offset="13%" stopColor="#e6f4ea" stopOpacity="0"></stop>
                 </linearGradient>
               </defs>
diff --git a/llm/components/warning-wrapper.tsx b/llm/components/warning-wrapper.tsx
index 169dc8a..c339f1f 100644
--- a/llm/components/warning-wrapper.tsx
+++ b/llm/components/warning-wrapper.tsx
@@ -12,11 +12,11 @@ export default function WarningWrapper({
   return (
     <div className={cn("p-2 bg-gray-200 flex-1 rounded-3xl", className)}>
       {children}
-      <div className="pt-3 pb-3 px-10 text-center">
+      <div className="pt-3 pb-3 px-2 sm:px-10 text-center">
         {message ? (
           message
         ) : (
-          <span className="text-slate-500 text-sm leading-6">
+          <span className="text-slate-500 text-xs sm:text-sm leading-6">
             Data was randomly generated for illustrative purposes
           </span>
         )}
diff --git a/llm/tools/trading/show-stock-purchase-ui.tsx b/llm/tools/trading/show-stock-purchase-ui.tsx
index ade06d9..4ef5075 100644
--- a/llm/tools/trading/show-stock-purchase-ui.tsx
+++ b/llm/tools/trading/show-stock-purchase-ui.tsx
@@ -27,36 +27,15 @@ export default defineTool("show_stock_purchase_ui", () => {
     description:
       "Shows the current price of the stock and allow the user to buy it. Prefer this when there is a clear intention of buying a stock.",
     parameters: z.object({
-      symbol: z
-        .string()
-        .describe(
-          "The name or symbol of the stock. e.g. DOGE/AAPL/USD."
-        ),
-      limit: z
-        .number()
-        .optional()
-        .describe(
-          "The limit price of the order. Optional, defaults to market price."
-        ),
+      symbol: z.string().describe("The name or symbol of the stock. e.g. DOGE/AAPL/USD."),
+      limit: z.number().optional().describe("The limit price of the order. Optional, defaults to market price."),
       numberOfShares: z
         .number()
-        .describe(
-          "The **number of shares** for a stock to purchase. Defaults to 100."
-        )
+        .describe("The **number of shares** for a stock to purchase. Defaults to 100.")
         .default(100),
-      market: z
-        .string()
-        .describe(
-          "The market of the stock. e.g. ITMX/CSB. This is provided by the model."
-        ),
-      company: z
-        .string()
-        .describe(
-          "The company name of the stock. This is provided by the model."
-        ),
-      currency: z
-        .string()
-        .describe("The currency of the stock. This is provided by the model."),
+      market: z.string().describe("The market of the stock. e.g. ITMX/CSB. This is provided by the model."),
+      company: z.string().describe("The company name of the stock. This is provided by the model."),
+      currency: z.string().describe("The currency of the stock. This is provided by the model."),
     }),
     generate: withCheckPermission<ToolParams>(
       {
@@ -66,7 +45,7 @@ export default defineTool("show_stock_purchase_ui", () => {
             relation: RELATION.CAN_BUY_STOCKS,
             context: { current_time: new Date().toISOString() },
           }),
-        onUnauthorized: withTextGeneration(async function*({ symbol }) {
+        onUnauthorized: withTextGeneration(async function* ({ symbol }) {
           return `
 The user requesting the operation is not authorized to purchase ${symbol}.
 Specific restrictions might apply, such as:
@@ -77,14 +56,7 @@ Please tell the user they should contact the support desk of Market0 to get more
 `;
         }),
       },
-      async function* ({
-        symbol,
-        limit,
-        market,
-        company,
-        currency,
-        numberOfShares = 10,
-      }) {
+      async function* ({ symbol, limit, market, company, currency, numberOfShares = 10 }) {
         if (numberOfShares < 10 || numberOfShares > 1000) {
           history.update({
             role: "assistant",
@@ -101,8 +73,8 @@ Please tell the user they should contact the support desk of Market0 to get more
           messageID,
           symbol,
           price,
-          market,
-          company,
+          market: stockStatus.exchange,
+          company: stockStatus.shortname,
           currency,
           initialQuantity: numberOfShares,
           delta: stockStatus.delta,
@@ -116,11 +88,7 @@ Please tell the user they should contact the support desk of Market0 to get more
           params,
         });
 
-        return (
-          <StockPurchase
-            {...params}
-          />
-        );
+        return <StockPurchase {...params} />;
       }
     ),
   };
diff --git a/sdk/components/connect-google-account.tsx b/sdk/components/connect-google-account.tsx
index c3cbfde..a61ab97 100644
--- a/sdk/components/connect-google-account.tsx
+++ b/sdk/components/connect-google-account.tsx
@@ -10,17 +10,15 @@ export const ConnectGoogleAccount = ({
   api: string;
 }) => {
   return (
-    <div className="border border-gray-300 rounded-lg p-6 flex items-center w-full justify-between">
-      <div className="flex flex-col gap-2">
-        <h2 className="text-base leading-6 font-semibold">{title}</h2>
-        <p className="text-sm leading-5 font-light text-gray-500">
-          {description}
-        </p>
+    <div className="border border-gray-300 rounded-lg items-center w-full justify-between p-4 sm:p-6 flex flex-col sm:flex-row gap-4 sm:gap-0">
+      <div className="flex flex-col gap-1 sm:gap-1.5">
+        <h2 className="text-sm sm:text-base leading-6 font-semibold">{title}</h2>
+        <p className="text-xs sm:text-sm leading-5 font-light text-gray-500">{description}</p>
       </div>
-      <div>
+      <div className="w-full sm:w-fit">
         <a
           href={`/api/auth/login?3rdPartyApi=${api}&linkWith=google-oauth2&returnTo=${window.location.pathname}`}
-          className="bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4"
+          className="w-full sm:w-fit inline-block text-center bg-gray-200 text-black whitespace-nowrap rounded-md text-sm font-normal transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-primary/90 hover:text-white py-2 px-4"
         >
           Connect
         </a>