diff --git a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
index bb1ca8a1d7e..2993c2f4fb5 100644
--- a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
+++ b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
@@ -16,6 +16,8 @@ type Option = { label: string; value: string };
 export function MultiNetworkSelector(props: {
   selectedChainIds: number[];
   onChange: (chainIds: number[]) => void;
+  disableChainId?: boolean;
+  className?: string;
 }) {
   const { allChains, idToChain } = useAllChainsData();
 
@@ -53,16 +55,24 @@ export function MultiNetworkSelector(props: {
       return (
         <div className="flex justify-between gap-4">
           <span className="flex grow gap-2 truncate text-left">
+            <ChainIcon
+              className="size-5"
+              ipfsSrc={chain.icon?.url}
+              loading="lazy"
+            />
             {cleanChainName(chain.name)}
           </span>
-          <Badge variant="outline" className="gap-2">
-            <span className="text-muted-foreground">Chain ID</span>
-            {chain.chainId}
-          </Badge>
+
+          {!props.disableChainId && (
+            <Badge variant="outline" className="gap-2">
+              <span className="text-muted-foreground">Chain ID</span>
+              {chain.chainId}
+            </Badge>
+          )}
         </div>
       );
     },
-    [idToChain],
+    [idToChain, props.disableChainId],
   );
 
   return (
@@ -79,6 +89,7 @@ export function MultiNetworkSelector(props: {
       disabled={allChains.length === 0}
       overrideSearchFn={searchFn}
       renderOption={renderOption}
+      className={props.className}
     />
   );
 }
@@ -143,7 +154,7 @@ export function SingleNetworkSelector(props: {
               ipfsSrc={chain.icon?.url}
               loading="lazy"
             />
-            {chain.name}
+            {cleanChainName(chain.name)}
           </span>
 
           {!props.disableChainId && (
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 029064f757e..2de74b13abd 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
@@ -181,6 +181,7 @@ function SessionCard(props: {
         <Link
           className="before:absolute before:inset-0"
           href={`/chat/${props.session.id}`}
+          prefetch={false}
         >
           {props.session.title || "Untitled"}
         </Link>
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 6639ec5b876..04ebb5570aa 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
@@ -20,7 +20,7 @@ import type { ExecuteConfig, SessionInfo } from "../api/types";
 import { newChatPageUrlStore, newSessionsStore } from "../stores";
 import { ChatBar } from "./ChatBar";
 import { type ChatMessage, Chats } from "./Chats";
-import ContextFiltersButton from "./ContextFilters";
+import ContextFiltersButton, { ContextFiltersForm } from "./ContextFilters";
 import { EmptyStateChatPageContent } from "./EmptyStateChatPageContent";
 
 export function ChatPageContent(props: {
@@ -362,69 +362,92 @@ export function ChatPageContent(props: {
 
   const showEmptyState = !userHasSubmittedMessage && messages.length === 0;
 
+  const handleUpdateContextFilters = async (
+    values: ContextFilters | undefined,
+  ) => {
+    // if session is not yet created, don't need to update sessions - starting a chat will create a session with the context filters
+    if (sessionId) {
+      await updateSession({
+        authToken: props.authToken,
+        config,
+        sessionId,
+        contextFilters: values,
+      });
+    }
+  };
+
   return (
     <div className="flex grow flex-col overflow-hidden">
       <WalletDisconnectedDialog
         open={showConnectModal}
         onOpenChange={setShowConnectModal}
       />
-      <header className="flex justify-start border-b bg-background p-4">
+      <header className="flex justify-between border-b bg-background p-4 xl:hidden">
         <ContextFiltersButton
           contextFilters={contextFilters}
           setContextFilters={setContextFilters}
-          updateContextFilters={async (values) => {
-            // if session is not yet created, don't need to update sessions - starting a chat will create a session with the context filters
-            if (sessionId) {
-              await updateSession({
-                authToken: props.authToken,
-                config,
-                sessionId,
-                contextFilters: values,
-              });
-            }
-          }}
+          updateContextFilters={handleUpdateContextFilters}
         />
       </header>
-      <div className="relative flex grow flex-col overflow-hidden rounded-lg pb-6">
-        {showEmptyState ? (
-          <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">
-            <Chats
-              messages={messages}
-              isChatStreaming={isChatStreaming}
-              authToken={props.authToken}
-              sessionId={sessionId}
-              className="min-w-0 pt-6 pb-32"
-              twAccount={props.account}
-              client={client}
-              enableAutoScroll={enableAutoScroll}
-              setEnableAutoScroll={setEnableAutoScroll}
-            />
-
-            <div className="container max-w-[800px]">
-              <ChatBar
-                sendMessage={handleSendMessage}
+
+      <div className="flex grow overflow-hidden">
+        <div className="relative flex grow flex-col overflow-hidden rounded-lg pb-6">
+          {showEmptyState ? (
+            <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">
+              <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-6 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>
-          </div>
-        )}
+          )}
 
-        <p className="mt-4 text-center text-muted-foreground text-xs opacity-75 lg:text-sm">
-          Nebula may make mistakes. Please use with discretion
-        </p>
+          <p className="mt-4 text-center text-muted-foreground text-xs opacity-75 lg:text-sm">
+            Nebula may make mistakes. Please use with discretion
+          </p>
+        </div>
+        <aside className="hidden w-[360px] flex-col border-l bg-card pt-4 xl:flex">
+          <div className="px-4">
+            <h3 className="font-semibold text-lg tracking-tight">Context</h3>
+            <p className="mb-5 text-muted-foreground text-sm">
+              Provide context to Nebula for your prompts
+            </p>
+          </div>
+          <ContextFiltersForm
+            contextFilters={contextFilters}
+            setContextFilters={setContextFilters}
+            modal={undefined}
+            updateContextFilters={handleUpdateContextFilters}
+            formBodyClassName="px-4"
+            formActionContainerClassName="px-4 border-t-0 pt-0 bg-transparent"
+          />
+        </aside>
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
index 91e15e365c5..629a32989f2 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
@@ -4,6 +4,8 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
 import {
+  FileCode2Icon,
+  MessageSquareShareIcon,
   MessagesSquareIcon,
   SquareDashedBottomCodeIcon,
   TextIcon,
@@ -29,8 +31,11 @@ export function ChatSidebar(props: {
   return (
     <div className="flex h-full flex-col p-2">
       <div className="flex items-center justify-start gap-3 p-2 lg:justify-between">
-        <Link href="/">
-          <NebulaIcon className="size-8 text-foreground" />
+        <Link href="/" className="flex items-center gap-2">
+          <NebulaIcon className="size-8 text-foreground" aria-label="Nebula" />
+          <span className="font-semibold text-lg tracking-tight">
+            Playground
+          </span>
         </Link>
 
         <Badge variant="secondary" className="gap-1 py-1">
@@ -48,6 +53,13 @@ export function ChatSidebar(props: {
 
       <div className="h-3" />
 
+      <SidebarIconLink
+        href="https://portal.thirdweb.com/nebula/api-reference"
+        icon={FileCode2Icon}
+        label="API Reference"
+        target="_blank"
+      />
+
       <SidebarIconLink
         href="/chat/history"
         icon={MessagesSquareIcon}
@@ -79,7 +91,14 @@ export function ChatSidebar(props: {
         </ScrollShadow>
       )}
 
-      <div className="mb-3 border-b border-dashed pt-2 pb-3">
+      <div className="mb-3 border-y border-dashed py-3">
+        <SidebarIconLink
+          href="https://docs.google.com/forms/d/e/1FAIpQLSeM3fJRyywihRZUF1fiTNKEpJ_AzAcohRwXPpLr_3zxQ6W-tg/viewform?usp=sharing"
+          icon={MessageSquareShareIcon}
+          label="Take our quick survey!"
+          target="_blank"
+        />
+
         <SidebarIconLink
           href="https://portal.thirdweb.com/changelog"
           icon={TextIcon}
@@ -116,6 +135,7 @@ function SidebarIconLink(props: {
         href={props.href}
         target={props.target}
         className="!justify-start !px-3 w-full gap-2.5 rounded-lg text-left"
+        prefetch={false}
       >
         <props.icon className="size-4" />
         {props.label}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
index 2a8b563b938..e3d37897eab 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
@@ -8,6 +8,7 @@ import {
   Dialog,
   DialogClose,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
@@ -15,15 +16,14 @@ import {
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { DialogDescription } from "@radix-ui/react-dialog";
 import { useMutation } from "@tanstack/react-query";
 import { SlidersHorizontalIcon } from "lucide-react";
 import { useState } from "react";
@@ -39,9 +39,6 @@ export default function ContextFiltersButton(props: {
   updateContextFilters: (filters: ContextFilters | undefined) => Promise<void>;
 }) {
   const [isOpen, setIsOpen] = useState(false);
-  const updateMutation = useMutation({
-    mutationFn: props.updateContextFilters,
-  });
 
   const chainIds = props.contextFilters?.chainIds;
   const contractAddresses = props.contextFilters?.contractAddresses;
@@ -85,21 +82,22 @@ export default function ContextFiltersButton(props: {
           </div>
         </Button>
       </DialogTrigger>
-      <DialogContent className="p-0">
-        <ContextFilterDialogContent
-          contextFilters={props.contextFilters}
-          isPending={updateMutation.isPending}
-          updateFilters={async (data) => {
-            const promise = updateMutation.mutateAsync(data);
-            toast.promise(promise, {
-              success: "Context filters updated",
-              error: "Failed to update context filters",
-            });
+      <DialogContent className="overflow-hidden p-0">
+        <DialogHeader className="px-6 pt-6 pb-1">
+          <DialogTitle className="font-semibold text-xl">
+            Context Filters
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Provide context to Nebula for your prompts
+          </DialogDescription>
+        </DialogHeader>
 
-            promise.then(() => {
-              props.setContextFilters(data);
-              setIsOpen(false);
-            });
+        <ContextFiltersForm
+          contextFilters={props.contextFilters}
+          updateContextFilters={props.updateContextFilters}
+          setContextFilters={props.setContextFilters}
+          modal={{
+            close: () => setIsOpen(false),
           }}
         />
       </DialogContent>
@@ -138,11 +136,22 @@ const formSchema = z.object({
   walletAddresses: commaSeparateListOfAddresses,
 });
 
-function ContextFilterDialogContent(props: {
+export function ContextFiltersForm(props: {
   contextFilters: ContextFilters | undefined;
-  updateFilters: (filters: ContextFilters | undefined) => void;
-  isPending: boolean;
+  updateContextFilters: (filters: ContextFilters | undefined) => Promise<void>;
+  setContextFilters: (filters: ContextFilters | undefined) => void;
+  formBodyClassName?: string;
+  formActionContainerClassName?: string;
+  modal:
+    | {
+        close: () => void;
+      }
+    | undefined;
 }) {
+  const updateMutation = useMutation({
+    mutationFn: props.updateContextFilters,
+  });
+
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     values: {
@@ -172,26 +181,37 @@ function ContextFilterDialogContent(props: {
       .split(",")
       .filter((v) => v.trim());
 
-    props.updateFilters({
+    const data = {
       chainIds: chainIdsArray,
       contractAddresses: contractAddressesArray,
       walletAddresses: walletAddressesArray,
+    };
+
+    const promise = updateMutation.mutateAsync(data);
+
+    toast.promise(promise, {
+      success: "Context filters updated",
+      error: "Failed to update context filters",
+    });
+
+    promise.then(() => {
+      props.setContextFilters(data);
+      props.modal?.close?.();
     });
   }
 
   return (
     <Form {...form}>
-      <DialogHeader className="px-6 pt-6 pb-1">
-        <DialogTitle className="font-semibold text-xl">
-          Context Filters
-        </DialogTitle>
-        <DialogDescription className="text-muted-foreground">
-          Provide context information to Nebula for your prompts
-        </DialogDescription>
-      </DialogHeader>
-
-      <form onSubmit={form.handleSubmit(onSubmit)}>
-        <div className="flex flex-col gap-5 px-6">
+      <form
+        onSubmit={form.handleSubmit(onSubmit)}
+        className={cn("flex w-full grow flex-col")}
+      >
+        <div
+          className={cn(
+            "flex flex-col gap-5 px-6 pb-6",
+            props.formBodyClassName,
+          )}
+        >
           <FormField
             control={form.control}
             name="chainIds"
@@ -200,6 +220,8 @@ function ContextFilterDialogContent(props: {
                 <FormLabel>Chain IDs</FormLabel>
                 <FormControl>
                   <MultiNetworkSelector
+                    disableChainId
+                    className="bg-background"
                     selectedChainIds={form
                       .watch()
                       .chainIds.split(",")
@@ -226,12 +248,9 @@ function ContextFilterDialogContent(props: {
                   <AutoResizeTextarea
                     {...field}
                     placeholder="0x123..., 0x456..."
-                    className="min-h-[32px] resize-none"
+                    className="!leading-relaxed min-h-[52px] resize-none md:text-xs"
                   />
                 </FormControl>
-                <FormDescription>
-                  Comma separated list of contract addresses
-                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
@@ -247,25 +266,36 @@ function ContextFilterDialogContent(props: {
                   <AutoResizeTextarea
                     {...field}
                     placeholder="0x123..., 0x456..."
-                    className="min-h-[32px] resize-none"
+                    className="!leading-relaxed min-h-[52px] resize-none md:text-xs"
                   />
                 </FormControl>
-                <FormDescription>
-                  Comma separated list of wallet addresses
-                </FormDescription>
                 <FormMessage />
               </FormItem>
             )}
           />
         </div>
 
-        <div className="mt-10 flex justify-end gap-3 border-t bg-card p-6">
-          <DialogClose asChild>
-            <Button variant="outline">Cancel</Button>
-          </DialogClose>
-          <Button className="min-w-28 gap-2" type="submit">
-            {props.isPending && <Spinner className="size-4" />}
-            Update
+        <div
+          className={cn(
+            "flex justify-end gap-3 border-t bg-card p-6",
+            props.formActionContainerClassName,
+          )}
+        >
+          {props.modal && (
+            <DialogClose asChild>
+              <Button variant="outline" size="sm">
+                Cancel
+              </Button>
+            </DialogClose>
+          )}
+          <Button
+            className="min-w-24 gap-2"
+            type="submit"
+            size="sm"
+            disabled={updateMutation.isPending}
+          >
+            {updateMutation.isPending && <Spinner className="size-4" />}
+            Update Context
           </Button>
         </div>
       </form>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
index a944a1ff22c..a3a8e64e9ae 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
@@ -10,7 +10,7 @@ export function EmptyStateChatPageContent(props: {
   sendMessage: (message: string) => void;
 }) {
   return (
-    <div className="py-16">
+    <div className="py-10 lg:py-16">
       <div className="relative py-10">
         <FancyBorders />
         <div className="flex justify-center">