diff --git a/apps/dashboard/src/@/components/ui/image-upload-button.tsx b/apps/dashboard/src/@/components/ui/image-upload-button.tsx
new file mode 100644
index 00000000000..d8dada3e7ec
--- /dev/null
+++ b/apps/dashboard/src/@/components/ui/image-upload-button.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import type React from "react";
+import { useRef } from "react";
+
+interface ImageUploadProps {
+  value: File | undefined;
+  onChange?: (files: File[]) => void;
+  children?: React.ReactNode;
+  variant?: React.ComponentProps<typeof Button>["variant"];
+  className?: string;
+  multiple?: boolean;
+}
+
+export function ImageUploadButton(props: ImageUploadProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = Array.from(e.target.files || []);
+    props.onChange?.(files);
+  };
+
+  return (
+    <div>
+      <Button
+        variant={props.variant}
+        onClick={() => fileInputRef.current?.click()}
+        className={props.className}
+      >
+        {props.children}
+      </Button>
+      <input
+        ref={fileInputRef}
+        type="file"
+        multiple={props.multiple}
+        accept="image/*"
+        onChange={handleFileChange}
+        className="hidden"
+        aria-label="Upload image"
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/types.ts b/apps/dashboard/src/app/nebula-app/(app)/api/types.ts
index 9a8515d7242..e59bb73c0e2 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/api/types.ts
+++ b/apps/dashboard/src/app/nebula-app/(app)/api/types.ts
@@ -8,6 +8,10 @@ type NebulaUserMessageContentItem =
       type: "image";
       image_url: string;
     }
+  | {
+      type: "image";
+      b64: string;
+    }
   | {
       type: "text";
       text: string;
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
index 98b8bdd82d5..b1af35b7a3a 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -1,9 +1,12 @@
 "use client";
 
+import { Img } from "@/components/blocks/Img";
 import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { DynamicHeight } from "@/components/ui/DynamicHeight";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { ImageUploadButton } from "@/components/ui/image-upload-button";
 import {
   Popover,
   PopoverContent,
@@ -11,7 +14,9 @@ import {
 } from "@/components/ui/popover";
 import { Skeleton } from "@/components/ui/skeleton";
 import { AutoResizeTextarea } from "@/components/ui/textarea";
+import { ToolTipLabel } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { useMutation } from "@tanstack/react-query";
 import { ChainIconClient } from "components/icons/ChainIcon";
 import { useAllChainsData } from "hooks/chains/allChains";
 import {
@@ -20,8 +25,11 @@ import {
   ChevronDownIcon,
   CircleStopIcon,
   CopyIcon,
+  PaperclipIcon,
+  XIcon,
 } from "lucide-react";
 import { useState } from "react";
+import { toast } from "sonner";
 import type { ThirdwebClient } from "thirdweb";
 import {
   AccountAvatar,
@@ -41,6 +49,8 @@ export type WalletMeta = {
   address: string;
 };
 
+const maxAllowedImagesPerMessage = 4;
+
 export function ChatBar(props: {
   sendMessage: (message: NebulaUserMessage) => void;
   isChatStreaming: boolean;
@@ -54,164 +64,346 @@ export function ChatBar(props: {
   connectedWallets: WalletMeta[];
   setActiveWallet: (wallet: WalletMeta) => void;
   isConnectingWallet: boolean;
-  // TODO - add this option later
-  // showImageUploader: boolean;
+  allowImageUpload: boolean;
+  onLoginClick: undefined | (() => void);
 }) {
   const [message, setMessage] = useState(props.prefillMessage || "");
   const selectedChainIds = props.context?.chainIds?.map((x) => Number(x)) || [];
   const firstChainId = selectedChainIds[0];
+  const [images, setImages] = useState<
+    Array<{ file: File; b64: string | undefined }>
+  >([]);
 
   function handleSubmit(message: string) {
-    setMessage("");
-    props.sendMessage({
+    const userMessage: NebulaUserMessage = {
       role: "user",
-      // TODO - add image here later
       content: [{ type: "text", text: message }],
-    });
+    };
+    if (images.length > 0) {
+      for (const image of images) {
+        if (image.b64) {
+          userMessage.content.push({ type: "image", b64: image.b64 });
+        }
+      }
+    }
+    props.sendMessage(userMessage);
+    setMessage("");
+    setImages([]);
+  }
+
+  const uploadImageMutation = useMutation({
+    mutationFn: async (image: File) => {
+      return toBase64(image);
+    },
+  });
+
+  async function handleImageUpload(images: File[]) {
+    try {
+      const urls = await Promise.all(
+        images.map(async (image) => {
+          const b64 = await uploadImageMutation.mutateAsync(image);
+          return { file: image, b64: b64 };
+        }),
+      );
+
+      setImages((prev) => [...prev, ...urls]);
+    } catch (e) {
+      console.error(e);
+      toast.error("Failed to upload image", {
+        position: "top-right",
+      });
+    }
   }
 
   return (
-    <div
-      className={cn(
-        "rounded-2xl border border-border bg-card p-2",
-        props.className,
-      )}
-    >
-      <div className="max-h-[200px] overflow-y-auto">
-        <AutoResizeTextarea
-          placeholder={"Ask Nebula"}
-          value={message}
-          onChange={(e) => setMessage(e.target.value)}
-          onKeyDown={(e) => {
-            // ignore if shift key is pressed to allow entering new lines
-            if (e.shiftKey) {
-              return;
-            }
-            if (e.key === "Enter" && !props.isChatStreaming) {
-              e.preventDefault();
-              handleSubmit(message);
-            }
-          }}
-          className="min-h-[60px] resize-none border-none bg-transparent pt-2 leading-relaxed focus-visible:ring-0 focus-visible:ring-offset-0"
-          disabled={props.isChatStreaming}
-        />
-      </div>
+    <DynamicHeight transition="height 200ms ease">
+      <div
+        className={cn(
+          "overflow-hidden rounded-2xl border border-border bg-card",
+          props.className,
+        )}
+      >
+        {images.length > 0 && (
+          <ImagePreview
+            images={images}
+            isUploading={uploadImageMutation.isPending}
+            onRemove={(index) => {
+              setImages((prev) => prev.filter((_, i) => i !== index));
+            }}
+          />
+        )}
+
+        <div className="p-2">
+          <div className="max-h-[200px] overflow-y-auto">
+            <AutoResizeTextarea
+              placeholder={"Ask Nebula"}
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              onKeyDown={(e) => {
+                // ignore if shift key is pressed to allow entering new lines
+                if (e.shiftKey) {
+                  return;
+                }
+                if (e.key === "Enter" && !props.isChatStreaming) {
+                  e.preventDefault();
+                  handleSubmit(message);
+                }
+              }}
+              className="min-h-[60px] resize-none border-none bg-transparent pt-2 leading-relaxed focus-visible:ring-0 focus-visible:ring-offset-0"
+              disabled={props.isChatStreaming}
+            />
+          </div>
+
+          <div className="flex items-end justify-between gap-3 px-2 pb-2">
+            {/* left */}
+            <div className="grow">
+              {props.showContextSelector && (
+                <div className="flex flex-wrap gap-2 [&>*]:w-auto">
+                  {props.connectedWallets.length > 1 &&
+                    !props.isConnectingWallet && (
+                      <WalletSelector
+                        client={props.client}
+                        wallets={props.connectedWallets}
+                        selectedAddress={
+                          props.context?.walletAddress || undefined
+                        }
+                        onClick={(walletMeta) => {
+                          props.setActiveWallet(walletMeta);
+                          props.setContext({
+                            walletAddress: walletMeta.address,
+                            chainIds: props.context?.chainIds || [],
+                            networks: props.context?.networks || null,
+                          });
+                        }}
+                      />
+                    )}
+
+                  {props.isConnectingWallet && (
+                    <Badge
+                      variant="outline"
+                      className="h-auto w-auto shrink-0 gap-1.5 px-2 py-1.5"
+                    >
+                      <Spinner className="size-3" />
+                      <span>Connecting Wallet</span>
+                    </Badge>
+                  )}
 
-      <div className="flex items-end justify-between gap-3 px-2 pb-2">
-        {/* left */}
-        <div className="grow">
-          {props.showContextSelector && (
-            <div className="flex flex-wrap gap-2 [&>*]:w-auto">
-              {props.connectedWallets.length > 1 &&
-                !props.isConnectingWallet && (
-                  <WalletSelector
+                  <MultiNetworkSelector
                     client={props.client}
-                    wallets={props.connectedWallets}
-                    selectedAddress={props.context?.walletAddress || undefined}
-                    onClick={(walletMeta) => {
-                      props.setActiveWallet(walletMeta);
+                    hideTestnets
+                    disableChainId
+                    selectedChainIds={selectedChainIds}
+                    popoverContentClassName="!w-[calc(100vw-80px)] lg:!w-[320px]"
+                    align="start"
+                    side="top"
+                    showSelectedValuesInModal={true}
+                    customTrigger={
+                      <Button
+                        variant="ghost"
+                        className="h-auto w-full p-0 hover:bg-transparent "
+                      >
+                        {selectedChainIds.length > 0 && firstChainId && (
+                          <ChainBadge
+                            chainId={firstChainId}
+                            plusMore={selectedChainIds.length - 1}
+                            client={props.client}
+                          />
+                        )}
+
+                        {selectedChainIds.length === 0 && (
+                          <Badge
+                            variant="outline"
+                            className="flex h-auto gap-1 px-2 py-1.5 hover:bg-accent"
+                          >
+                            Select Chains
+                            <ChevronDownIcon className="size-3 text-muted-foreground" />
+                          </Badge>
+                        )}
+                      </Button>
+                    }
+                    onChange={(values) => {
                       props.setContext({
-                        walletAddress: walletMeta.address,
-                        chainIds: props.context?.chainIds || [],
+                        walletAddress: props.context?.walletAddress || null,
+                        chainIds: values.map((x) => x.toString()),
                         networks: props.context?.networks || null,
                       });
                     }}
+                    priorityChains={[
+                      1, // ethereum
+                      56, // bnb smart chain mainnet (bsc)
+                      42161, // arbitrum one mainnet
+                      8453, // base mainnet
+                      43114, // avalanche mainnet
+                      146, // sonic
+                      137, // polygon
+                      80094, // berachain mainnet
+                      10, // optimism
+                    ]}
                   />
-                )}
-
-              {props.isConnectingWallet && (
-                <Badge
-                  variant="outline"
-                  className="h-auto w-auto shrink-0 gap-1.5 px-2 py-1.5"
-                >
-                  <Spinner className="size-3" />
-                  <span>Connecting Wallet</span>
-                </Badge>
+                </div>
               )}
+            </div>
 
-              <MultiNetworkSelector
-                client={props.client}
-                hideTestnets
-                disableChainId
-                selectedChainIds={selectedChainIds}
-                popoverContentClassName="!w-[calc(100vw-80px)] lg:!w-[320px]"
-                align="start"
-                side="top"
-                showSelectedValuesInModal={true}
-                customTrigger={
-                  <Button
-                    variant="ghost"
-                    className="h-auto w-full p-0 hover:bg-transparent "
-                  >
-                    {selectedChainIds.length > 0 && firstChainId && (
-                      <ChainBadge
-                        chainId={firstChainId}
-                        plusMore={selectedChainIds.length - 1}
-                        client={props.client}
-                      />
-                    )}
+            {/* right */}
+            <div className="flex items-center gap-2">
+              {props.allowImageUpload ? (
+                <ImageUploadButton
+                  multiple
+                  value={undefined}
+                  onChange={(files) => {
+                    const totalFiles = files.length + images.length;
+
+                    if (totalFiles > maxAllowedImagesPerMessage) {
+                      toast.error(
+                        `You can only upload up to ${maxAllowedImagesPerMessage} images at a time`,
+                        {
+                          position: "top-right",
+                        },
+                      );
+                      return;
+                    }
 
-                    {selectedChainIds.length === 0 && (
-                      <Badge
-                        variant="outline"
-                        className="flex h-auto gap-1 px-2 py-1.5 hover:bg-accent"
+                    const validFiles: File[] = [];
+
+                    for (const file of files) {
+                      if (file.size <= 5 * 1024 * 1024) {
+                        validFiles.push(file);
+                      } else {
+                        toast.error("Image is larger than 5MB", {
+                          description: `File: ${file.name}`,
+                          position: "top-right",
+                        });
+                      }
+                    }
+
+                    handleImageUpload(validFiles);
+                  }}
+                  variant="ghost"
+                  className="!h-auto w-auto shrink-0 gap-2 p-2"
+                >
+                  <ToolTipLabel label="Attach Image">
+                    <PaperclipIcon className="size-4" />
+                  </ToolTipLabel>
+                </ImageUploadButton>
+              ) : props.onLoginClick ? (
+                <Popover>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="ghost"
+                      className="!h-auto w-auto shrink-0 gap-2 p-2"
+                    >
+                      <ToolTipLabel label="Attach Image">
+                        <PaperclipIcon className="size-4" />
+                      </ToolTipLabel>
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-72">
+                    <div>
+                      <p className="mb-3 text-muted-foreground text-sm">
+                        Get access to image uploads by signing in to Nebula
+                      </p>
+                      <Button
+                        variant="default"
+                        onClick={props.onLoginClick}
+                        className="w-full"
                       >
-                        Select Chains
-                        <ChevronDownIcon className="size-3 text-muted-foreground" />
-                      </Badge>
-                    )}
-                  </Button>
-                }
-                onChange={(values) => {
-                  props.setContext({
-                    walletAddress: props.context?.walletAddress || null,
-                    chainIds: values.map((x) => x.toString()),
-                    networks: props.context?.networks || null,
-                  });
-                }}
-                priorityChains={[
-                  1, // ethereum
-                  56, // bnb smart chain mainnet (bsc)
-                  42161, // arbitrum one mainnet
-                  8453, // base mainnet
-                  43114, // avalanche mainnet
-                  146, // sonic
-                  137, // polygon
-                  80094, // berachain mainnet
-                  10, // optimism
-                ]}
-              />
+                        Sign in
+                      </Button>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+              ) : null}
+
+              {/* Send / Stop */}
+              {props.isChatStreaming ? (
+                <Button
+                  variant="default"
+                  className="!h-auto w-auto shrink-0 gap-2 p-2"
+                  onClick={() => {
+                    props.abortChatStream();
+                  }}
+                >
+                  <CircleStopIcon className="size-4" />
+                  Stop
+                </Button>
+              ) : (
+                <Button
+                  aria-label="Send"
+                  disabled={
+                    (message.trim() === "" && images.length === 0) ||
+                    props.isConnectingWallet
+                  }
+                  className="!h-auto w-auto border border-nebula-pink-foreground p-2 disabled:opacity-100"
+                  variant="pink"
+                  onClick={() => {
+                    if (message.trim() === "" && images.length === 0) return;
+                    handleSubmit(message);
+                  }}
+                >
+                  <ArrowUpIcon className="size-4" />
+                </Button>
+              )}
             </div>
-          )}
+          </div>
         </div>
+      </div>
+    </DynamicHeight>
+  );
+}
 
-        {/* Send / Stop */}
-        {props.isChatStreaming ? (
-          <Button
-            variant="default"
-            className="!h-auto w-auto shrink-0 gap-2 p-2"
-            onClick={() => {
-              props.abortChatStream();
-            }}
-          >
-            <CircleStopIcon className="size-4" />
-            Stop
-          </Button>
-        ) : (
-          <Button
-            aria-label="Send"
-            disabled={message.trim() === "" || props.isConnectingWallet}
-            className="!h-auto w-auto border border-nebula-pink-foreground p-2 disabled:opacity-100"
-            variant="pink"
-            onClick={() => {
-              if (message.trim() === "") return;
-              handleSubmit(message);
-            }}
+async function toBase64(file: File) {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file); // includes "data:<mime-type>;base64," prefix
+    reader.onload = () =>
+      resolve(typeof reader.result === "string" ? reader.result : "");
+    reader.onerror = (error) => reject(error);
+  });
+}
+
+function ImagePreview(props: {
+  images: Array<{ file: File; b64: string | undefined }>;
+  isUploading: boolean;
+  onRemove: (index: number) => void;
+}) {
+  return (
+    <div className="fade-in-0 flex animate-in flex-wrap items-center gap-2 border-b border-dashed bg-background p-3">
+      {props.images.map((image, index) => {
+        return (
+          <div
+            className="relative flex items-center gap-2 rounded-lg border bg-card p-1"
+            key={image.file.name}
           >
-            <ArrowUpIcon className="size-4" />
-          </Button>
-        )}
-      </div>
+            <Img
+              src={image.b64}
+              className="size-8 rounded"
+              skeleton={
+                <div className="flex items-center justify-center rounded border">
+                  <Spinner className="size-4 text-muted-foreground" />
+                </div>
+              }
+            />
+            <div className="w-[100px] lg:w-[120px]">
+              <p className="truncate text-muted-foreground text-xs">
+                {props.isUploading ? "Uploading..." : image.file.name}
+              </p>
+              <p className="text-muted-foreground text-xs">
+                {Math.round(image.file.size / 1024)} kB
+              </p>
+            </div>
+
+            <ToolTipLabel label="Remove Image">
+              <Button
+                variant="outline"
+                className="-top-1.5 -right-1.5 absolute h-auto w-auto rounded-full bg-card p-0.5"
+                onClick={() => props.onRemove(index)}
+              >
+                <XIcon className="size-2.5" />
+              </Button>
+            </ToolTipLabel>
+          </div>
+        );
+      })}
     </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 4de667f4d9a..bdf6a718e89 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
@@ -304,6 +304,7 @@ export function ChatPageContent(props: {
           {showEmptyState ? (
             <div className="fade-in-0 container flex max-w-[800px] grow animate-in flex-col justify-center">
               <EmptyStateChatPageContent
+                onLoginClick={undefined}
                 showAurora={true}
                 isConnectingWallet={connectionStatus === "connecting"}
                 sendMessage={handleSendMessage}
@@ -312,6 +313,7 @@ export function ChatPageContent(props: {
                 setContext={setContextFilters}
                 connectedWallets={connectedWalletsMeta}
                 setActiveWallet={handleSetActiveWallet}
+                allowImageUpload={true}
               />
             </div>
           ) : (
@@ -348,6 +350,8 @@ export function ChatPageContent(props: {
                     setContextFilters(v);
                     handleUpdateContextFilters(v);
                   }}
+                  allowImageUpload={true}
+                  onLoginClick={undefined}
                 />
               </div>
             </div>
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
index eed53ac15c0..582aa4d4d3a 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
@@ -27,7 +27,7 @@ const userWalletAddress = "0x2d7B4e58bb163462cba2e705090a4EC56A958F2a";
 function Story() {
   return (
     <ThirdwebProvider>
-      <div className="container flex max-w-6xl flex-col gap-14 py-10">
+      <div className="container flex max-w-[800px] flex-col gap-14 py-10">
         <Variant
           label="Not Streaming"
           isStreaming={false}
@@ -126,6 +126,15 @@ function Story() {
           activeAccountAddress={undefined}
         />
 
+        <Variant
+          label="No Image Upload"
+          isStreaming={false}
+          showContextSelector={true}
+          connectedWallets={[]}
+          activeAccountAddress={undefined}
+          allowImageUpload={false}
+        />
+
         <Variant
           label="Connecting Wallet"
           isStreaming={false}
@@ -148,6 +157,7 @@ function Variant(props: {
   connectedWallets: WalletMeta[];
   activeAccountAddress: string | undefined;
   isConnectingWallet?: boolean;
+  allowImageUpload?: boolean;
 }) {
   const [context, setContext] = useState<NebulaContext | undefined>(
     props.context,
@@ -159,6 +169,7 @@ function Variant(props: {
         isConnectingWallet={props.isConnectingWallet || false}
         client={storybookThirdwebClient}
         abortChatStream={() => {}}
+        onLoginClick={undefined}
         isChatStreaming={props.isStreaming}
         sendMessage={() => {}}
         prefillMessage={props.prefillMessage}
@@ -166,6 +177,9 @@ function Variant(props: {
         setContext={setContext}
         showContextSelector={props.showContextSelector}
         connectedWallets={props.connectedWallets}
+        allowImageUpload={
+          props.allowImageUpload === undefined ? true : props.allowImageUpload
+        }
         setActiveWallet={(wallet) => {
           setContext({
             chainIds: context?.chainIds || [],
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 1565bc4f233..34fcc5c6b5c 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
@@ -179,10 +179,11 @@ function RenderMessage(props: {
   if (props.message.type === "user") {
     return (
       <div className="mt-6 flex flex-col gap-4">
-        {props.message.content.map((msg) => {
+        {props.message.content.map((msg, index) => {
           if (msg.type === "text") {
             return (
-              <div className="flex justify-end" key={msg.type}>
+              // 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}
@@ -196,12 +197,20 @@ function RenderMessage(props: {
 
           if (msg.type === "image") {
             return (
-              <NebulaImage
-                key={msg.type}
-                type="submitted"
-                url={msg.image_url}
-                client={props.client}
-              />
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              <div className="flex justify-end" key={index}>
+                <NebulaImage
+                  type="submitted"
+                  url={
+                    "b64" in msg
+                      ? msg.b64.startsWith("data:image")
+                        ? msg.b64
+                        : `data:image/png;base64,${msg.b64}`
+                      : msg.image_url
+                  }
+                  client={props.client}
+                />
+              </div>
             );
           }
 
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
index f5564070739..e7ece368e87 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
@@ -34,6 +34,7 @@ function Story(props: {
     <ThirdwebProvider>
       <div className="container flex max-w-[800px] grow flex-col justify-center overflow-hidden">
         <EmptyStateChatPageContent
+          onLoginClick={undefined}
           showAurora={false}
           isConnectingWallet={false}
           sendMessage={() => {}}
@@ -42,6 +43,7 @@ function Story(props: {
           setContext={() => {}}
           connectedWallets={[]}
           setActiveWallet={() => {}}
+          allowImageUpload={true}
         />
       </div>
     </ThirdwebProvider>
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 2d841b5ee17..011c803c80f 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
@@ -19,6 +19,8 @@ export function EmptyStateChatPageContent(props: {
   setActiveWallet: (wallet: WalletMeta) => void;
   isConnectingWallet: boolean;
   showAurora: boolean;
+  allowImageUpload: boolean;
+  onLoginClick: undefined | (() => void);
 }) {
   return (
     <div className="overflow-hidden py-10 lg:py-16">
@@ -41,6 +43,7 @@ export function EmptyStateChatPageContent(props: {
         <div className="h-5" />
         <div className="mx-auto max-w-[600px]">
           <ChatBar
+            onLoginClick={props.onLoginClick}
             isConnectingWallet={props.isConnectingWallet}
             showContextSelector={true}
             context={props.context}
@@ -54,6 +57,7 @@ export function EmptyStateChatPageContent(props: {
               // the page will switch so, no need to handle abort here
             }}
             prefillMessage={props.prefillMessage}
+            allowImageUpload={props.allowImageUpload}
           />
           <div className="h-5" />
           <div className="flex flex-wrap justify-center gap-2.5">
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 6b3a5cc8eb7..804fb40f52b 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
@@ -215,6 +215,7 @@ function FloatingChatContentLoggedIn(props: {
         />
       )}
       <ChatBar
+        onLoginClick={undefined}
         client={props.client}
         isConnectingWallet={connectionStatus === "connecting"}
         context={contextFilters}
@@ -244,6 +245,7 @@ function FloatingChatContentLoggedIn(props: {
         prefillMessage={undefined}
         sendMessage={handleSendMessage}
         className="rounded-none border-x-0 border-b-0"
+        allowImageUpload={true}
       />
     </div>
   );
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/MessageActions.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/MessageActions.tsx
index 65d0e2ffd0a..148b3f439ec 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/MessageActions.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/MessageActions.tsx
@@ -18,6 +18,7 @@ export function MessageActions(props: {
   sessionId: string;
   messageText: string | undefined;
   className?: string;
+  buttonClassName?: string;
 }) {
   const [isCopied, setIsCopied] = useState(false);
   function sendRating(rating: "good" | "bad") {
@@ -66,7 +67,7 @@ export function MessageActions(props: {
         <Button
           variant="outline"
           size="sm"
-          className="h-8 gap-2 rounded-lg text-sm"
+          className={cn("h-8 gap-2 rounded-lg text-sm", props.buttonClassName)}
           onClick={() => {
             navigator.clipboard.writeText(messageText);
             setIsCopied(true);
@@ -87,7 +88,10 @@ export function MessageActions(props: {
       <Button
         variant="outline"
         size="sm"
-        className="size-8 rounded-lg bg-background p-0"
+        className={cn(
+          "size-8 rounded-lg bg-background p-0",
+          props.buttonClassName,
+        )}
         onClick={() => {
           sendPositiveRating.mutate();
         }}
@@ -102,7 +106,10 @@ export function MessageActions(props: {
       <Button
         variant="outline"
         size="sm"
-        className="size-8 rounded-lg bg-background p-0"
+        className={cn(
+          "size-8 rounded-lg bg-background p-0",
+          props.buttonClassName,
+        )}
         onClick={() => {
           sendBadRating.mutate();
         }}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaImage.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaImage.tsx
index dd2e4fe6adf..4cd79614ef8 100644
--- a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaImage.tsx
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaImage.tsx
@@ -1,6 +1,12 @@
 import { Img } from "@/components/blocks/Img";
 import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useMutation } from "@tanstack/react-query";
 import { ArrowDownToLineIcon } from "lucide-react";
@@ -25,10 +31,12 @@ export function NebulaImage(
         client: ThirdwebClient;
       },
 ) {
-  const src = resolveSchemeWithErrorHandler({
-    uri: props.url,
-    client: props.client,
-  });
+  const src = props.url.startsWith("ipfs://")
+    ? resolveSchemeWithErrorHandler({
+        uri: props.url,
+        client: props.client,
+      })
+    : props.url;
 
   const downloadMutation = useMutation({
     mutationFn: () => downloadImage(src || ""),
@@ -39,28 +47,47 @@ export function NebulaImage(
   }
 
   return (
-    <div className="group relative max-w-[80%] lg:max-w-[60%]">
-      <Img
-        width={props.type === "response" ? props.width : undefined}
-        height={props.type === "response" ? props.height : undefined}
-        src={src}
-        className="w-full rounded-lg border"
-        skeleton={<div className="animate-skeleton bg-muted" />}
-      />
-      <Button
-        variant="outline"
-        size="sm"
-        className="absolute top-4 right-4 z-10 flex size-8 gap-2 rounded-lg bg-background p-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
-        onClick={async () => {
-          downloadMutation.mutate();
-        }}
-      >
-        {downloadMutation.isPending ? (
-          <Spinner className="size-4" />
-        ) : (
-          <ArrowDownToLineIcon className="size-4" />
-        )}
-      </Button>
+    <div className="group relative w-full max-w-[80%] lg:max-w-[50%]">
+      <Dialog>
+        <DialogTrigger asChild>
+          <Img
+            width={props.type === "response" ? props.width : undefined}
+            height={props.type === "response" ? props.height : undefined}
+            src={src}
+            className="w-full rounded-lg border hover:border-active-border"
+            skeleton={<div className="animate-skeleton bg-muted" />}
+          />
+        </DialogTrigger>
+
+        <DialogContent
+          className="!w-full !max-w-[800px] p-2"
+          dialogCloseClassName="focus:ring-offset-0 focus:ring-transparent"
+        >
+          <DialogTitle className="sr-only">Image</DialogTitle>
+          <Img
+            src={src}
+            className="h-full w-full object-contain"
+            skeleton={<div className="animate-skeleton bg-muted" />}
+          />
+        </DialogContent>
+      </Dialog>
+
+      <div className="absolute top-4 right-4 z-10 flex justify-between gap-2 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="size-8 gap-2 rounded-lg bg-background/50 p-0 "
+          onClick={async () => {
+            downloadMutation.mutate();
+          }}
+        >
+          {downloadMutation.isPending ? (
+            <Spinner className="size-4" />
+          ) : (
+            <ArrowDownToLineIcon className="size-4" />
+          )}
+        </Button>
+      </div>
 
       {props.type === "response" && props.sessionId && (
         <div className="absolute right-4 bottom-4 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
@@ -69,6 +96,7 @@ export function NebulaImage(
             requestId={props.requestId}
             sessionId={props.sessionId}
             messageText={undefined}
+            buttonClassName="bg-background/50 border-none"
           />
         </div>
       )}
diff --git a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
index e1b0784e1df..40d324d707b 100644
--- a/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
+++ b/apps/dashboard/src/app/nebula-app/login/NebulaLoginPage.tsx
@@ -89,7 +89,11 @@ export function NebulaLoggedOutStatePage(props: {
         <div className="container relative flex max-w-[800px] grow flex-col justify-center overflow-hidden rounded-lg pb-6">
           <EmptyStateChatPageContent
             showAurora={false}
+            allowImageUpload={false}
             isConnectingWallet={false}
+            onLoginClick={() => {
+              setShowPage("connect");
+            }}
             prefillMessage={props.params.q}
             context={{
               walletAddress: null,