diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
index efc24f3caeb..3b303e9c9fe 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
@@ -81,12 +81,12 @@ export function ChatHistoryPageUI(props: {
 
       {filteredSessions.length > 0 && (
         <ScrollShadow
-          className="container flex-1"
+          className="container max-w-[800px] flex-1"
           scrollableClassName="max-h-full py-6"
           shadowColor="hsl(var(--background))"
         >
           {filteredSessions.length > 0 && (
-            <div className="flex flex-col gap-4">
+            <div className="flex flex-col gap-5">
               {filteredSessions.map((session) => (
                 <SessionCard
                   key={session.id + session.updated_at + session.created_at}
@@ -175,8 +175,10 @@ function SessionCard(props: {
   });
 
   return (
-    <div className="rounded-lg border bg-muted/50 p-4">
-      <h3>{props.session.title}</h3>
+    <div className="overflow-hidden rounded-lg border bg-muted/50 p-4">
+      <h3 className="line-clamp-3 break-all">
+        {props.session.title || "Untitled"}
+      </h3>
       <div className="mt-4 flex items-center justify-between gap-6 border-t pt-3">
         <p className="text-muted-foreground text-sm">
           Updated{" "}
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 fa08800b51b..6b61c2e27e2 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
@@ -1,7 +1,4 @@
 "use client";
-
-/* eslint-disable no-restricted-syntax */
-import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { useThirdwebClient } from "@/constants/thirdweb.client";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -111,18 +108,8 @@ export function ChatPageContent(props: {
     [props.type],
   );
 
-  const messagesEndRef = useRef<HTMLDivElement>(null);
   const [isChatStreaming, setIsChatStreaming] = useState(false);
-  const [isUserSubmittedMessage, setIsUserSubmittedMessage] = useState(false);
-
-  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-  useEffect(() => {
-    if (!isUserSubmittedMessage) {
-      return;
-    }
-
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, isUserSubmittedMessage]);
+  const [enableAutoScroll, setEnableAutoScroll] = useState(false);
 
   const initSession = useCallback(async () => {
     const session = await createSession({
@@ -148,7 +135,7 @@ export function ChatPageContent(props: {
       ]);
 
       setIsChatStreaming(true);
-      setIsUserSubmittedMessage(true);
+      setEnableAutoScroll(true);
       const abortController = new AbortController();
 
       try {
@@ -292,6 +279,7 @@ export function ChatPageContent(props: {
         });
       } finally {
         setIsChatStreaming(false);
+        setEnableAutoScroll(false);
       }
     },
     [
@@ -305,6 +293,8 @@ export function ChatPageContent(props: {
   );
 
   const hasDoneAutoPrompt = useRef(false);
+
+  // eslint-disable-next-line no-restricted-syntax
   useEffect(() => {
     if (
       props.initialPrompt &&
@@ -337,45 +327,40 @@ export function ChatPageContent(props: {
           }}
         />
       </header>
-      <div className="container relative flex max-w-[800px] grow flex-col overflow-hidden rounded-lg pb-6">
+      <div className="relative flex grow flex-col overflow-hidden rounded-lg pb-6">
         {showEmptyState ? (
-          <div className="fade-in-0 flex grow animate-in flex-col justify-center">
+          <div className="fade-in-0 container flex max-w-[800px] grow animate-in flex-col justify-center">
             <EmptyStateChatPageContent sendMessage={handleSendMessage} />
           </div>
         ) : (
           <div className="fade-in-0 relative z-[0] flex max-h-full flex-1 animate-in flex-col overflow-hidden">
-            <ScrollShadow
-              className="flex-1"
-              scrollableClassName="max-h-full"
-              shadowColor="hsl(var(--background))"
-              shadowClassName="z-[1]"
-            >
-              <Chats
-                messages={messages}
-                isChatStreaming={isChatStreaming}
-                authToken={props.authToken}
-                sessionId={sessionId}
-                className="min-w-0 pt-10 pb-32"
-                twAccount={props.account}
-                client={client}
-              />
-              {/* Scroll anchor */}
-              <div ref={messagesEndRef} />
-            </ScrollShadow>
-
-            <Chatbar
-              sendMessage={handleSendMessage}
+            <Chats
+              messages={messages}
               isChatStreaming={isChatStreaming}
-              abortChatStream={() => {
-                chatAbortController?.abort();
-                setChatAbortController(undefined);
-                setIsChatStreaming(false);
-                // if last message is presence, remove it
-                if (messages[messages.length - 1]?.type === "presence") {
-                  setMessages((prev) => prev.slice(0, -1));
-                }
-              }}
+              authToken={props.authToken}
+              sessionId={sessionId}
+              className="min-w-0 pt-10 pb-32"
+              twAccount={props.account}
+              client={client}
+              enableAutoScroll={enableAutoScroll}
+              setEnableAutoScroll={setEnableAutoScroll}
             />
+
+            <div className="container max-w-[800px]">
+              <Chatbar
+                sendMessage={handleSendMessage}
+                isChatStreaming={isChatStreaming}
+                abortChatStream={() => {
+                  chatAbortController?.abort();
+                  setChatAbortController(undefined);
+                  setIsChatStreaming(false);
+                  // if last message is presence, remove it
+                  if (messages[messages.length - 1]?.type === "presence") {
+                    setMessages((prev) => prev.slice(0, -1));
+                  }
+                }}
+              />
+            </div>
           </div>
         )}
 
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 082b1660468..2d42c17f3a5 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
@@ -1,7 +1,9 @@
 import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { cn } from "@/lib/utils";
 import type { Account as TWAccount } from "@3rdweb-sdk/react/hooks/useApi";
 import { useMutation } from "@tanstack/react-query";
@@ -12,13 +14,12 @@ import {
   ThumbsDownIcon,
   ThumbsUpIcon,
 } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import { sendTransaction } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
 import type { Account } from "thirdweb/wallets";
-import { getThirdwebClient } from "../../../../@/constants/thirdweb.server";
 import { TransactionButton } from "../../../../components/buttons/TransactionButton";
 import { MarkdownRenderer } from "../../../../components/contract-components/published-contract/markdown-renderer";
 import { useV5DashboardChain } from "../../../../lib/v5-adapter";
@@ -51,97 +52,153 @@ export function Chats(props: {
   className?: string;
   twAccount: TWAccount;
   client: ThirdwebClient;
+  setEnableAutoScroll: (enable: boolean) => void;
+  enableAutoScroll: boolean;
 }) {
+  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={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
-            // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique key
-            key={index}
-          >
-            <div
-              className={cn(
-                "fade-in-0 flex min-w-0 animate-in gap-3 duration-300",
-              )}
-            >
-              <div className="-translate-y-[2px] relative shrink-0 ">
-                {message.type === "user" ? (
-                  <GradientAvatar
-                    id={props.twAccount?.id || "default"}
-                    // TODO- set account image when available in account object
-                    src={""}
-                    className="size-8 shrink-0 rounded-lg"
-                    client={props.client}
-                  />
-                ) : (
+    <div
+      className="flex max-h-full flex-1 flex-col overflow-hidden"
+      ref={chatContainerRef}
+    >
+      <ScrollShadow
+        className="flex-1"
+        scrollableClassName="max-h-full"
+        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
+                  // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique key
+                  key={index}
+                >
                   <div
                     className={cn(
-                      "flex size-8 items-center justify-center rounded-lg",
-                      message.type === "assistant" && "border bg-muted/50",
-                      message.type === "error" && "border",
-                      message.type === "presence" && "border bg-muted/50",
+                      "fade-in-0 flex min-w-0 animate-in gap-3 duration-300",
                     )}
                   >
-                    {message.type === "presence" && (
-                      <Spinner className="size-4" />
-                    )}
+                    <div className="-translate-y-[2px] relative shrink-0 ">
+                      {message.type === "user" ? (
+                        <GradientAvatar
+                          id={props.twAccount?.id || "default"}
+                          // TODO- set account image when available in account object
+                          src={""}
+                          className="size-8 shrink-0 rounded-lg"
+                          client={props.client}
+                        />
+                      ) : (
+                        <div
+                          className={cn(
+                            "flex size-8 items-center justify-center rounded-lg",
+                            message.type === "assistant" &&
+                              "border bg-muted/50",
+                            message.type === "error" && "border",
+                            message.type === "presence" && "border bg-muted/50",
+                          )}
+                        >
+                          {message.type === "presence" && (
+                            <Spinner className="size-4" />
+                          )}
 
-                    {message.type === "assistant" && (
-                      <NebulaIcon className="size-5 text-muted-foreground" />
-                    )}
+                          {message.type === "assistant" && (
+                            <NebulaIcon className="size-5 text-muted-foreground" />
+                          )}
 
-                    {message.type === "error" && (
-                      <AlertCircleIcon className="size-5 text-destructive-text" />
-                    )}
-                  </div>
-                )}
-              </div>
-              <div className="min-w-0 grow">
-                {message.type === "assistant" ? (
-                  <MarkdownRenderer
-                    skipHtml
-                    markdownText={message.text}
-                    code={{
-                      disableCodeHighlight: isMessagePending,
-                      ignoreFormattingErrors: true,
-                    }}
-                    className="text-foreground"
-                    p={{ className: "text-foreground" }}
-                    li={{ className: "text-foreground" }}
-                  />
-                ) : message.type === "error" ? (
-                  <span className="text-destructive-text leading-loose">
-                    {message.text}
-                  </span>
-                ) : message.type === "send_transaction" ? (
-                  <SendTransactionButton
-                    txData={message.data}
-                    twAccount={props.twAccount}
-                  />
-                ) : (
-                  <span className="leading-loose">{message.text}</span>
-                )}
+                          {message.type === "error" && (
+                            <AlertCircleIcon className="size-5 text-destructive-text" />
+                          )}
+                        </div>
+                      )}
+                    </div>
+                    <div className="min-w-0 grow">
+                      {message.type === "assistant" ? (
+                        <MarkdownRenderer
+                          skipHtml
+                          markdownText={message.text}
+                          code={{
+                            disableCodeHighlight: isMessagePending,
+                            ignoreFormattingErrors: true,
+                          }}
+                          className="text-foreground"
+                          p={{ className: "text-foreground" }}
+                          li={{ className: "text-foreground" }}
+                        />
+                      ) : message.type === "error" ? (
+                        <span className="text-destructive-text leading-loose">
+                          {message.text}
+                        </span>
+                      ) : message.type === "send_transaction" ? (
+                        <SendTransactionButton
+                          txData={message.data}
+                          twAccount={props.twAccount}
+                        />
+                      ) : (
+                        <span className="leading-loose">{message.text}</span>
+                      )}
 
-                {message.type === "assistant" &&
-                  !props.isChatStreaming &&
-                  props.sessionId &&
-                  message.request_id && (
-                    <MessageActions
-                      messageText={message.text}
-                      authToken={props.authToken}
-                      requestId={message.request_id}
-                      sessionId={props.sessionId}
-                      className="mt-4"
-                    />
-                  )}
-              </div>
-            </div>
+                      {message.type === "assistant" &&
+                        !props.isChatStreaming &&
+                        props.sessionId &&
+                        message.request_id && (
+                          <MessageActions
+                            messageText={message.text}
+                            authToken={props.authToken}
+                            requestId={message.request_id}
+                            sessionId={props.sessionId}
+                            className="mt-4"
+                          />
+                        )}
+                    </div>
+                  </div>
+                </div>
+              );
+            })}
+            <div ref={scrollAnchorRef} />
           </div>
-        );
-      })}
+        </div>
+      </ScrollShadow>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx b/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx
new file mode 100644
index 00000000000..ff297366998
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/[...not-found]/page.tsx
@@ -0,0 +1,67 @@
+import { TrackedLinkTW } from "@/components/ui/tracked-link";
+
+export default function NebulaNotFound() {
+  return (
+    <div className="overflow-hidden">
+      <div className="container flex h-full min-h-screen flex-col justify-center">
+        <div className="flex flex-col items-center">
+          <div className="z-10 flex size-[90px] items-center justify-center rounded-3xl border bg-background font-semibold text-2xl text-muted-foreground tracking-tight shadow-lg md:size-[100px] md:text-3xl">
+            404
+          </div>
+
+          <div className="h-8" />
+
+          <p className="text-center font-bold text-3xl tracking-tighter md:text-5xl">
+            <span className="block"> Uh oh. </span>
+            <span className="block">Looks like Nebula</span>
+            <span className="block">can't be found here.</span>
+          </p>
+
+          <div className="h-12" />
+
+          <div>
+            <p className="text-center text-muted-foreground text-xl leading-7">
+              Go to{" "}
+              <TrackedLinkTW
+                category="page-not-found"
+                label="homepage"
+                href="/"
+                className="text-foreground hover:underline"
+              >
+                homepage
+              </TrackedLinkTW>
+            </p>
+          </div>
+
+          <Aurora
+            color="hsl(var(--foreground)/8%)"
+            pos={{ top: "40%", left: "50%" }}
+            size={{ width: "100vw", height: "100vh" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type AuroraProps = {
+  size: { width: string; height: string };
+  pos: { top: string; left: string };
+  color: string;
+};
+
+const Aurora: React.FC<AuroraProps> = ({ color, pos, size }) => {
+  return (
+    <div
+      className="pointer-events-none absolute"
+      style={{
+        top: pos.top,
+        left: pos.left,
+        width: size.width,
+        height: size.height,
+        transform: "translate(-50%, -50%)",
+        backgroundImage: `radial-gradient(ellipse at center, ${color}, transparent 60%)`,
+      }}
+    />
+  );
+};
diff --git a/apps/dashboard/src/components/notices/AnnouncementBanner.tsx b/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
index 74e44a0975c..c5cd7948f7a 100644
--- a/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
+++ b/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
@@ -15,6 +15,7 @@ function AnnouncementBanner(props: {
     useLocalStorage(`dismissed-${props.trackingLabel}`, false, true);
 
   if (
+    layoutSegment === "/_not-found" ||
     hasDismissedAnnouncement ||
     layoutSegment === "login" ||
     layoutSegment === "nebula-app"