diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx
index 8fab0e3fd72..bb294ed6793 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChatContent.tsx
@@ -8,12 +8,11 @@ import { useCallback, useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
 import { useActiveWalletConnectionStatus } from "thirdweb/react";
 import type { NebulaContext } from "../../api/chat";
-import type { NebulaUserMessage } from "../../api/types";
 import type { ExamplePrompt } from "../../data/examplePrompts";
 import { NebulaIcon } from "../../icons/NebulaIcon";
 import { ChatBar } from "../ChatBar";
-import { Chats } from "../Chats";
-import type { ChatMessage } from "../Chats";
+import { type CustomChatMessage, CustomChats } from "./CustomChats";
+import type { UserMessage, UserMessageContent } from "./CustomChats";
 
 export default function CustomChatContent(props: {
   authToken: string | undefined;
@@ -49,7 +48,7 @@ function CustomChatContentLoggedIn(props: {
   networks: NebulaContext["networks"];
 }) {
   const [userHasSubmittedMessage, setUserHasSubmittedMessage] = useState(false);
-  const [messages, setMessages] = useState<Array<ChatMessage>>([]);
+  const [messages, setMessages] = useState<Array<CustomChatMessage>>([]);
   // sessionId is initially undefined, will be set to conversationId from API after first response
   const [sessionId, setSessionId] = useState<string | undefined>(undefined);
   const [chatAbortController, setChatAbortController] = useState<
@@ -61,13 +60,15 @@ function CustomChatContentLoggedIn(props: {
   const connectionStatus = useActiveWalletConnectionStatus();
 
   const handleSendMessage = useCallback(
-    async (userMessage: NebulaUserMessage) => {
+    async (userMessage: UserMessage) => {
       const abortController = new AbortController();
       setUserHasSubmittedMessage(true);
       setIsChatStreaming(true);
       setEnableAutoScroll(true);
 
-      const textMessage = userMessage.content.find((x) => x.type === "text");
+      const textMessage = userMessage.content.find(
+        (x: UserMessageContent) => x.type === "text",
+      );
 
       trackEvent({
         category: "siwa",
@@ -80,7 +81,7 @@ function CustomChatContentLoggedIn(props: {
         ...prev,
         {
           type: "user",
-          content: userMessage.content,
+          content: userMessage.content as UserMessageContent[],
         },
         // instant loading indicator feedback to user
         {
@@ -93,7 +94,7 @@ function CustomChatContentLoggedIn(props: {
       // deep clone `userMessage` to avoid mutating the original message, its a pretty small object so JSON.parse is fine
       const messageToSend = JSON.parse(
         JSON.stringify(userMessage),
-      ) as NebulaUserMessage;
+      ) as UserMessage;
 
       try {
         setChatAbortController(abortController);
@@ -149,6 +150,70 @@ function CustomChatContentLoggedIn(props: {
     [props.authToken, props.clientId, props.teamId, sessionId, trackEvent],
   );
 
+  const handleFeedback = useCallback(
+    async (messageIndex: number, feedback: 1 | -1) => {
+      if (!sessionId) {
+        console.error("Cannot submit feedback: missing session ID");
+        return;
+      }
+
+      // Validate message exists and is of correct type
+      const message = messages[messageIndex];
+      if (!message || message.type !== "assistant") {
+        console.error("Invalid message for feedback:", messageIndex);
+        return;
+      }
+
+      // Prevent duplicate feedback
+      if (message.feedback) {
+        console.warn("Feedback already submitted for this message");
+        return;
+      }
+
+      try {
+        trackEvent({
+          category: "siwa",
+          action: "submit-feedback",
+          rating: feedback === 1 ? "good" : "bad",
+          sessionId,
+          teamId: props.teamId,
+        });
+
+        const apiUrl = process.env.NEXT_PUBLIC_SIWA_URL;
+        const response = await fetch(`${apiUrl}/v1/chat/feedback`, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${props.authToken}`,
+            ...(props.teamId ? { "x-team-id": props.teamId } : {}),
+          },
+          body: JSON.stringify({
+            conversationId: sessionId,
+            feedbackRating: feedback,
+          }),
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+        }
+
+        // Update the message with feedback
+        setMessages((prev) =>
+          prev.map((msg, index) =>
+            index === messageIndex && msg.type === "assistant"
+              ? { ...msg, feedback }
+              : msg,
+          ),
+        );
+      } catch (error) {
+        console.error("Failed to send feedback:", error);
+        // Optionally show user-facing error notification
+        // Consider implementing retry logic here
+      }
+    },
+    [sessionId, props.authToken, props.teamId, trackEvent, messages],
+  );
+
   const showEmptyState = !userHasSubmittedMessage && messages.length === 0;
   return (
     <div className="flex grow flex-col overflow-hidden">
@@ -158,7 +223,7 @@ function CustomChatContentLoggedIn(props: {
           examplePrompts={props.examplePrompts}
         />
       ) : (
-        <Chats
+        <CustomChats
           messages={messages}
           isChatStreaming={isChatStreaming}
           authToken={props.authToken}
@@ -169,6 +234,7 @@ function CustomChatContentLoggedIn(props: {
           setEnableAutoScroll={setEnableAutoScroll}
           useSmallText
           sendMessage={handleSendMessage}
+          onFeedback={handleFeedback}
         />
       )}
       <ChatBar
@@ -192,7 +258,15 @@ function CustomChatContentLoggedIn(props: {
         }}
         isChatStreaming={isChatStreaming}
         prefillMessage={undefined}
-        sendMessage={handleSendMessage}
+        sendMessage={(siwaUserMessage) => {
+          const userMessage: UserMessage = {
+            type: "user",
+            content: siwaUserMessage.content
+              .filter((c) => c.type === "text")
+              .map((c) => ({ type: "text", text: c.text })),
+          };
+          handleSendMessage(userMessage);
+        }}
         className="rounded-none border-x-0 border-b-0"
         allowImageUpload={false}
       />
@@ -237,7 +311,7 @@ function LoggedOutStateChatContent() {
 }
 
 function EmptyStateChatPageContent(props: {
-  sendMessage: (message: NebulaUserMessage) => void;
+  sendMessage: (message: UserMessage) => void;
   examplePrompts: { title: string; message: string }[];
 }) {
   return (
@@ -264,7 +338,7 @@ function EmptyStateChatPageContent(props: {
             size="sm"
             onClick={() =>
               props.sendMessage({
-                role: "user",
+                type: "user",
                 content: [
                   {
                     type: "text",
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChats.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChats.tsx
new file mode 100644
index 00000000000..172c03d2d30
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/CustomChat/CustomChats.tsx
@@ -0,0 +1,345 @@
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { cn } from "@/lib/utils";
+import { MarkdownRenderer } from "components/contract-components/published-contract/markdown-renderer";
+import {
+  AlertCircleIcon,
+  MessageCircleIcon,
+  ThumbsDownIcon,
+  ThumbsUpIcon,
+} from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import { Reasoning } from "../Reasoning/Reasoning";
+
+// Define local types
+export type UserMessageContent = { type: "text"; text: string };
+export type UserMessage = {
+  type: "user";
+  content: UserMessageContent[];
+};
+
+export type CustomChatMessage =
+  | UserMessage
+  | {
+      text: string;
+      type: "error";
+    }
+  | {
+      texts: string[];
+      type: "presence";
+    }
+  | {
+      request_id: string | undefined;
+      text: string;
+      type: "assistant";
+      feedback?: 1 | -1;
+    };
+
+export function CustomChats(props: {
+  messages: Array<CustomChatMessage>;
+  isChatStreaming: boolean;
+  authToken: string;
+  sessionId: string | undefined;
+  className?: string;
+  client: ThirdwebClient;
+  setEnableAutoScroll: (enable: boolean) => void;
+  enableAutoScroll: boolean;
+  useSmallText?: boolean;
+  sendMessage: (message: UserMessage) => void;
+  onFeedback?: (messageIndex: number, feedback: 1 | -1) => void;
+}) {
+  const { messages, setEnableAutoScroll, enableAutoScroll } = props;
+  const scrollAnchorRef = useRef<HTMLDivElement>(null);
+  const chatContainerRef = useRef<HTMLDivElement>(null);
+
+  // auto scroll to bottom when messages change
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!enableAutoScroll || messages.length === 0) {
+      return;
+    }
+
+    scrollAnchorRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, enableAutoScroll]);
+
+  // stop auto scrolling when user interacts with chat
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!enableAutoScroll) {
+      return;
+    }
+
+    const chatScrollContainer =
+      chatContainerRef.current?.querySelector("[data-scrollable]");
+
+    if (!chatScrollContainer) {
+      return;
+    }
+
+    const disableScroll = () => {
+      setEnableAutoScroll(false);
+      chatScrollContainer.removeEventListener("mousedown", disableScroll);
+      chatScrollContainer.removeEventListener("wheel", disableScroll);
+    };
+
+    chatScrollContainer.addEventListener("mousedown", disableScroll);
+    chatScrollContainer.addEventListener("wheel", disableScroll);
+  }, [setEnableAutoScroll, enableAutoScroll]);
+
+  return (
+    <div
+      className="relative flex max-h-full flex-1 flex-col overflow-hidden"
+      ref={chatContainerRef}
+    >
+      <ScrollShadow
+        className="flex-1"
+        scrollableClassName="max-h-full overscroll-contain"
+        shadowColor="hsl(var(--background))"
+        shadowClassName="z-[1]"
+      >
+        <div className="container max-w-[800px]">
+          <div className={cn("flex flex-col gap-5 py-4", props.className)}>
+            {props.messages.map((message, index) => {
+              const isMessagePending =
+                props.isChatStreaming && index === props.messages.length - 1;
+
+              return (
+                <div
+                  className={cn(
+                    "fade-in-0 min-w-0 animate-in pt-1 text-sm duration-300 lg:text-base",
+                    props.useSmallText && "lg:text-sm",
+                  )}
+                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique key
+                  key={index}
+                >
+                  <RenderMessage
+                    message={message}
+                    messageIndex={index}
+                    isMessagePending={isMessagePending}
+                    client={props.client}
+                    sendMessage={props.sendMessage}
+                    nextMessage={props.messages[index + 1]}
+                    authToken={props.authToken}
+                    sessionId={props.sessionId}
+                    onFeedback={props.onFeedback}
+                  />
+                </div>
+              );
+            })}
+            <div ref={scrollAnchorRef} />
+          </div>
+        </div>
+      </ScrollShadow>
+    </div>
+  );
+}
+
+function RenderMessage(props: {
+  message: CustomChatMessage;
+  messageIndex: number;
+  isMessagePending: boolean;
+  client: ThirdwebClient;
+  sendMessage: (message: UserMessage) => void;
+  nextMessage: CustomChatMessage | undefined;
+  authToken: string;
+  sessionId: string | undefined;
+  onFeedback?: (messageIndex: number, feedback: 1 | -1) => void;
+}) {
+  const { message } = props;
+
+  if (props.message.type === "user") {
+    return (
+      <div className="mt-6 flex flex-col gap-4">
+        {props.message.content.map((msg, index) => {
+          if (msg.type === "text") {
+            return (
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              <div className="flex justify-end" key={index}>
+                <div className="max-w-[80%] overflow-auto rounded-xl border bg-card px-4 py-2">
+                  <StyledMarkdownRenderer
+                    text={msg.text}
+                    isMessagePending={props.isMessagePending}
+                    type="user"
+                  />
+                </div>
+              </div>
+            );
+          }
+
+          return null;
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-3">
+      {/* Left Icon */}
+      <div className="-translate-y-[2px] relative shrink-0">
+        <div
+          className={cn(
+            "flex size-9 items-center justify-center rounded-full",
+            message.type === "assistant" && "border bg-card",
+            message.type === "error" && "border",
+            message.type === "presence" && "border bg-card",
+          )}
+        >
+          {(message.type === "presence" || message.type === "assistant") && (
+            <MessageCircleIcon className="size-5 text-muted-foreground" />
+          )}
+
+          {message.type === "error" && (
+            <AlertCircleIcon className="size-5 text-destructive-text" />
+          )}
+        </div>
+      </div>
+
+      {/* Right Message */}
+      <div className="min-w-0 grow">
+        <ScrollShadow className="rounded-lg">
+          <RenderResponse
+            message={message}
+            isMessagePending={props.isMessagePending}
+            client={props.client}
+            sendMessage={props.sendMessage}
+            nextMessage={props.nextMessage}
+            sessionId={props.sessionId}
+            authToken={props.authToken}
+          />
+        </ScrollShadow>
+
+        {/* Custom Feedback Buttons */}
+        {message.type === "assistant" &&
+          !props.isMessagePending &&
+          props.onFeedback && (
+            <CustomFeedbackButtons
+              message={message}
+              messageIndex={props.messageIndex}
+              onFeedback={props.onFeedback}
+              className="mt-4"
+            />
+          )}
+      </div>
+    </div>
+  );
+}
+
+function CustomFeedbackButtons(props: {
+  message: CustomChatMessage & { type: "assistant" };
+  messageIndex: number;
+  onFeedback: (messageIndex: number, feedback: 1 | -1) => void;
+  className?: string;
+}) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleFeedback = async (feedback: 1 | -1) => {
+    if (isSubmitting || props.message.feedback) return;
+
+    setIsSubmitting(true);
+    try {
+      await props.onFeedback(props.messageIndex, feedback);
+    } catch (_e) {
+      // Handle error silently
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Don't show buttons if feedback already given
+  if (props.message.feedback) {
+    return null;
+  }
+
+  return (
+    <div className={cn("flex gap-2", props.className)}>
+      <button
+        type="button"
+        aria-label="Thumbs up"
+        className="text-muted-foreground transition-colors hover:text-green-500 disabled:opacity-50"
+        onClick={() => handleFeedback(1)}
+        disabled={isSubmitting}
+      >
+        <ThumbsUpIcon className="size-5" />
+      </button>
+      <button
+        type="button"
+        aria-label="Thumbs down"
+        className="text-muted-foreground transition-colors hover:text-red-500 disabled:opacity-50"
+        onClick={() => handleFeedback(-1)}
+        disabled={isSubmitting}
+      >
+        <ThumbsDownIcon className="size-5" />
+      </button>
+    </div>
+  );
+}
+
+function RenderResponse(props: {
+  message: CustomChatMessage;
+  isMessagePending: boolean;
+  client: ThirdwebClient;
+  sendMessage: (message: UserMessage) => void;
+  nextMessage: CustomChatMessage | undefined;
+  sessionId: string | undefined;
+  authToken: string;
+}) {
+  const { message, isMessagePending } = props;
+
+  switch (message.type) {
+    case "assistant":
+      return (
+        <StyledMarkdownRenderer
+          text={message.text}
+          isMessagePending={isMessagePending}
+          type="assistant"
+        />
+      );
+
+    case "presence":
+      return <Reasoning isPending={isMessagePending} texts={message.texts} />;
+
+    case "error":
+      return (
+        <div className="rounded-xl border bg-card px-4 py-2 text-destructive-text leading-normal">
+          {message.text}
+        </div>
+      );
+
+    case "user": {
+      return null;
+    }
+
+    default: {
+      // This ensures TypeScript will catch if we miss a case
+      const _exhaustive: never = message;
+      console.error("Unhandled message type:", _exhaustive);
+      return null;
+    }
+  }
+}
+
+function StyledMarkdownRenderer(props: {
+  text: string;
+  isMessagePending: boolean;
+  type: "assistant" | "user";
+}) {
+  return (
+    <MarkdownRenderer
+      skipHtml
+      markdownText={props.text}
+      className="text-foreground [&>*:first-child]:mt-0 [&>*:first-child]:border-none [&>*:first-child]:pb-0 [&>*:last-child]:mb-0"
+      code={{
+        ignoreFormattingErrors: true,
+        className: "bg-transparent",
+      }}
+      p={{
+        className:
+          props.type === "assistant"
+            ? "text-foreground"
+            : "text-foreground leading-normal",
+      }}
+      li={{ className: "text-foreground" }}
+      inlineCode={{ className: "border-none" }}
+    />
+  );
+}