diff --git a/apps/dashboard/src/@/components/ui/text-shimmer.tsx b/apps/dashboard/src/@/components/ui/text-shimmer.tsx
new file mode 100644
index 00000000000..7355cb8c18a
--- /dev/null
+++ b/apps/dashboard/src/@/components/ui/text-shimmer.tsx
@@ -0,0 +1,23 @@
+import { cn } from "../../lib/utils";
+
+export function TextShimmer(props: {
+  text: string;
+  className?: string;
+}) {
+  return (
+    <div className="flex">
+      <p
+        className={cn(
+          "animate-text-shimmer bg-[length:200%_50%] bg-clip-text text-transparent will-change-auto",
+          props.className,
+        )}
+        style={{
+          backgroundImage:
+            "linear-gradient(70deg, hsl(var(--muted-foreground)/50%) 50%, hsl(var(--foreground)) 70%, hsl(var(--muted-foreground)/50%) 100%)",
+        }}
+      >
+        {props.text}
+      </p>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
index da8a79eaaac..e1ab264463e 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
@@ -213,7 +213,7 @@ export function ChatPageContent(props: {
         // instant loading indicator feedback to user
         {
           type: "presence",
-          text: "Thinking...",
+          texts: [],
         },
       ]);
 
@@ -521,19 +521,8 @@ export async function handleNebulaPrompt(params: {
         hasReceivedResponse = true;
         setMessages((prev) => {
           const lastMessage = prev[prev.length - 1];
-          // if last message is presence, overwrite it
-          if (lastMessage?.type === "presence") {
-            return [
-              ...prev.slice(0, -1),
-              {
-                text: res.data.v,
-                type: "assistant",
-                request_id: requestIdForMessage,
-              },
-            ];
-          }
 
-          // if last message is from chat, append to it
+          // append to previous assistant message
           if (lastMessage?.type === "assistant") {
             return [
               ...prev.slice(0, -1),
@@ -545,7 +534,7 @@ export async function handleNebulaPrompt(params: {
             ];
           }
 
-          // otherwise, add a new message
+          // start a new assistant message
           return [
             ...prev,
             {
@@ -560,28 +549,27 @@ export async function handleNebulaPrompt(params: {
       if (res.event === "presence") {
         setMessages((prev) => {
           const lastMessage = prev[prev.length - 1];
-          // if last message is presence, overwrite it
+
+          // append to previous presence message
           if (lastMessage?.type === "presence") {
             return [
               ...prev.slice(0, -1),
-              { text: res.data.data, type: "presence" },
+              {
+                type: "presence",
+                texts: [...lastMessage.texts, res.data.data],
+              },
             ];
           }
-          // otherwise, add a new message
-          return [...prev, { text: res.data.data, type: "presence" }];
+
+          // start a new presence message
+          return [...prev, { texts: [res.data.data], type: "presence" }];
         });
       }
 
       if (res.event === "action") {
         if (res.type === "sign_transaction") {
           hasReceivedResponse = true;
-          setMessages((prev) => {
-            let prevMessages = prev;
-            // if last message is presence, remove it
-            if (prevMessages[prevMessages.length - 1]?.type === "presence") {
-              prevMessages = prevMessages.slice(0, -1);
-            }
-
+          setMessages((prevMessages) => {
             return [
               ...prevMessages,
               {
@@ -608,10 +596,7 @@ export async function handleNebulaPrompt(params: {
   // show an error message in that case
   if (!hasReceivedResponse) {
     setMessages((prev) => {
-      const newMessages = prev.slice(
-        0,
-        prev[prev.length - 1]?.type === "presence" ? -1 : undefined,
-      );
+      const newMessages = [...prev];
 
       newMessages.push({
         text: "No response received, please try again",
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
index ad34b3f0e24..2aa478113f2 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
@@ -1,24 +1,105 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { randomLorem } from "stories/stubs";
-import { BadgeContainer, storybookThirdwebClient } from "stories/utils";
+import { storybookThirdwebClient } from "stories/utils";
 import { ConnectButton, ThirdwebProvider } from "thirdweb/react";
 import { type ChatMessage, Chats } from "./Chats";
 
 const meta = {
   title: "Nebula/Chats",
-  component: Story,
+  component: Variant,
   parameters: {
     nextjs: {
       appDirectory: true,
     },
   },
-} satisfies Meta<typeof Story>;
+  decorators: [
+    (Story) => (
+      <ThirdwebProvider>
+        <div className="container flex max-w-[800px] flex-col gap-14 py-10">
+          <div>
+            <ConnectButton client={storybookThirdwebClient} />
+          </div>
+          <Story />
+        </div>
+      </ThirdwebProvider>
+    ),
+  ],
+} satisfies Meta<typeof Variant>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Variants: Story = {
-  args: {},
+export const UserPresenceError: Story = {
+  args: {
+    messages: [
+      {
+        text: randomLorem(10),
+        type: "user",
+      },
+      {
+        texts: [randomLorem(20)],
+        type: "presence",
+      },
+      {
+        text: randomLorem(20),
+        type: "error",
+      },
+    ],
+  },
+};
+
+export const SendTransaction: Story = {
+  args: {
+    messages: [
+      {
+        text: randomLorem(40),
+        type: "assistant",
+        request_id: undefined,
+      },
+      {
+        type: "send_transaction",
+        data: {
+          chainId: 1,
+          to: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
+          data: "0x",
+          value: "0x16345785d8a0000",
+        },
+      },
+    ],
+  },
+};
+
+export const InvalidTxData: Story = {
+  args: {
+    messages: [
+      {
+        text: randomLorem(40),
+        type: "assistant",
+        request_id: undefined,
+      },
+      {
+        type: "send_transaction",
+        data: null,
+      },
+    ],
+  },
+};
+
+export const WithAndWithoutRequestId: Story = {
+  args: {
+    messages: [
+      {
+        text: randomLorem(40),
+        type: "assistant",
+        request_id: "xxxxx",
+      },
+      {
+        text: randomLorem(50),
+        type: "assistant",
+        request_id: undefined,
+      },
+    ],
+  },
 };
 
 const markdownExample = `\
@@ -129,134 +210,35 @@ ${randomLorem(20)}
 ${markdownExample}
 `;
 
-function Story() {
-  return (
-    <ThirdwebProvider>
-      <div className="container flex max-w-[800px] flex-col gap-14 py-10">
-        <div>
-          <ConnectButton client={storybookThirdwebClient} />
-        </div>
-
-        <Variant
-          label="user + presence + error"
-          messages={[
-            {
-              text: randomLorem(10),
-              type: "user",
-            },
-            {
-              text: randomLorem(20),
-              type: "presence",
-            },
-            {
-              text: randomLorem(20),
-              type: "error",
-            },
-          ]}
-        />
-
-        <Variant
-          label="send-transaction"
-          messages={[
-            {
-              text: randomLorem(40),
-              type: "assistant",
-              request_id: undefined,
-            },
-            {
-              type: "send_transaction",
-              data: {
-                chainId: 1,
-                to: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
-                data: "0x",
-                value: "0x16345785d8a0000",
-              },
-            },
-          ]}
-        />
-
-        <Variant
-          label="invalid send-transaction"
-          messages={[
-            {
-              text: randomLorem(40),
-              type: "assistant",
-              request_id: undefined,
-            },
-            {
-              type: "send_transaction",
-              data: null,
-            },
-          ]}
-        />
-
-        <BadgeContainer label="Assistant response With request_id, Without request_id">
-          <Chats
-            sendMessage={() => {}}
-            enableAutoScroll={false}
-            setEnableAutoScroll={() => {}}
-            client={storybookThirdwebClient}
-            authToken="xxxxx"
-            isChatStreaming={false}
-            sessionId="xxxxx"
-            messages={[
-              {
-                text: randomLorem(40),
-                type: "assistant",
-                request_id: "xxxxx",
-              },
-              {
-                text: randomLorem(50),
-                type: "assistant",
-                request_id: undefined,
-              },
-            ]}
-          />
-        </BadgeContainer>
-
-        <BadgeContainer label="Assistant markdown">
-          <Chats
-            sendMessage={() => {}}
-            enableAutoScroll={false}
-            setEnableAutoScroll={() => {}}
-            client={storybookThirdwebClient}
-            authToken="xxxxx"
-            isChatStreaming={false}
-            sessionId="xxxxx"
-            messages={[
-              {
-                text: responseWithCodeMarkdown,
-                type: "assistant",
-                request_id: undefined,
-              },
-              {
-                text: responseWithCodeMarkdown,
-                type: "user",
-              },
-            ]}
-          />
-        </BadgeContainer>
-      </div>
-    </ThirdwebProvider>
-  );
-}
+export const Markdown: Story = {
+  args: {
+    messages: [
+      {
+        text: responseWithCodeMarkdown,
+        type: "assistant",
+        request_id: undefined,
+      },
+      {
+        text: responseWithCodeMarkdown,
+        type: "user",
+      },
+    ],
+  },
+};
 
 function Variant(props: {
-  label: string;
   messages: ChatMessage[];
 }) {
   return (
-    <BadgeContainer label={props.label}>
-      <Chats
-        enableAutoScroll={false}
-        setEnableAutoScroll={() => {}}
-        client={storybookThirdwebClient}
-        sendMessage={() => {}}
-        authToken="xxxxx"
-        isChatStreaming={false}
-        sessionId="xxxxx"
-        messages={props.messages}
-      />
-    </BadgeContainer>
+    <Chats
+      enableAutoScroll={false}
+      setEnableAutoScroll={() => {}}
+      client={storybookThirdwebClient}
+      sendMessage={() => {}}
+      authToken="xxxxx"
+      isChatStreaming={false}
+      sessionId="xxxxx"
+      messages={props.messages}
+    />
   );
 }
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
index ad88ec3fd35..b31aaa68d7a 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
@@ -18,6 +18,7 @@ import type { ThirdwebClient } from "thirdweb";
 import { submitFeedback } from "../api/feedback";
 import { NebulaIcon } from "../icons/NebulaIcon";
 import { ExecuteTransactionCard } from "./ExecuteTransactionCard";
+import { Reasoning } from "./Reasoning/Reasoning";
 
 export type NebulaTxData = {
   chainId: number;
@@ -29,7 +30,11 @@ export type NebulaTxData = {
 export type ChatMessage =
   | {
       text: string;
-      type: "user" | "error" | "presence";
+      type: "user" | "error";
+    }
+  | {
+      texts: string[];
+      type: "presence";
     }
   | {
       // assistant type message loaded from history doesn't have request_id
@@ -140,7 +145,7 @@ export function Chats(props: {
                           )}
                         >
                           {message.type === "presence" && (
-                            <Spinner className="size-4" />
+                            <NebulaIcon className="size-5 text-muted-foreground" />
                           )}
 
                           {message.type === "assistant" && (
@@ -176,11 +181,12 @@ export function Chats(props: {
                                 );
                               }}
                             />
-                          ) : (
-                            <span className="leading-loose">
-                              {message.text}
-                            </span>
-                          )}
+                          ) : message.type === "presence" ? (
+                            <Reasoning
+                              isPending={isMessagePending}
+                              texts={message.texts}
+                            />
+                          ) : null}
                         </ScrollShadow>
 
                         {message.type === "assistant" &&
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
index 23789d1c2eb..b3ee4cb7418 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/FloatingChat/FloatingChatContent.tsx
@@ -126,7 +126,7 @@ function FloatingChatContentLoggedIn(props: {
         // instant loading indicator feedback to user
         {
           type: "presence",
-          text: "Thinking...",
+          texts: [],
         },
       ]);
 
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.stories.tsx
new file mode 100644
index 00000000000..e1014413aa9
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { randomLorem } from "../../../../../stories/stubs";
+import { Reasoning } from "./Reasoning";
+
+const meta = {
+  title: "Nebula/Reasoning",
+  component: Story,
+  decorators: [
+    (Story) => (
+      <div className="container max-w-[800px] py-10">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Pending: Story = {
+  args: {},
+};
+
+function Story() {
+  return (
+    <div className="flex flex-col gap-10">
+      <Reasoning isPending texts={[randomLorem(10), randomLorem(5)]} />
+      <Reasoning
+        isPending={false}
+        texts={[randomLorem(10), randomLorem(5), randomLorem(30)]}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.tsx
new file mode 100644
index 00000000000..504df554f6b
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Reasoning/Reasoning.tsx
@@ -0,0 +1,53 @@
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
+import { Button } from "@/components/ui/button";
+import { TextShimmer } from "@/components/ui/text-shimmer";
+import { cn } from "@/lib/utils";
+import { ChevronDownIcon } from "lucide-react";
+import { useState } from "react";
+
+export function Reasoning(props: {
+  isPending: boolean;
+  texts: string[];
+}) {
+  const [_isOpen, setIsOpen] = useState(false);
+  const isOpen = props.isPending ? true : _isOpen;
+
+  return (
+    <DynamicHeight>
+      <Button
+        variant="link"
+        size="sm"
+        onClick={() => setIsOpen(!isOpen)}
+        className="h-auto w-auto items-center gap-1 px-0 py-1 pb-2 font-normal text-base text-muted-foreground hover:text-foreground hover:no-underline"
+      >
+        {props.isPending ? (
+          <TextShimmer text="Reasoning..." />
+        ) : (
+          <span>Reasoning</span>
+        )}
+
+        {!props.isPending && (
+          <ChevronDownIcon
+            className={cn(
+              "size-4 transition-transform",
+              isOpen && "rotate-180",
+            )}
+          />
+        )}
+      </Button>
+
+      {isOpen && props.texts.length > 0 && (
+        <ul className="list-none space-y-1.5">
+          {props.texts.map((text) => (
+            <li
+              key={text}
+              className="fade-in-0 animate-in text-muted-foreground text-sm leading-relaxed duration-300"
+            >
+              {text.trim()}
+            </li>
+          ))}
+        </ul>
+      )}
+    </DynamicHeight>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/nebula-global.css b/apps/dashboard/src/app/nebula-app/nebula-global.css
index d0a1d7bbba6..345dfcb1578 100644
--- a/apps/dashboard/src/app/nebula-app/nebula-global.css
+++ b/apps/dashboard/src/app/nebula-app/nebula-global.css
@@ -1,3 +1,4 @@
 ::selection {
-  background-color: hsl(var(--nebula-pink-foreground) / 0.25);
+  background-color: hsl(var(--inverted));
+  color: hsl(var(--inverted-foreground));
 }
diff --git a/apps/dashboard/tailwind.config.js b/apps/dashboard/tailwind.config.js
index 1356d7ea55b..fdc57832312 100644
--- a/apps/dashboard/tailwind.config.js
+++ b/apps/dashboard/tailwind.config.js
@@ -103,12 +103,17 @@ module.exports = {
           "0%,70%,100%": { opacity: "1" },
           "20%,50%": { opacity: "0" },
         },
+        "text-shimmer": {
+          "0%": { backgroundPosition: "100% 50%" },
+          "100%": { backgroundPosition: "-100% 50%" },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
         skeleton: "skeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
         "caret-blink": "caret-blink 1.25s ease-out infinite",
+        "text-shimmer": "text-shimmer 1.25s linear infinite",
       },
       fontFamily: {
         sans: ["var(--font-sans)", ...fontFamily.sans],