diff --git a/frontend/app/chat/_components/chat-input.tsx b/frontend/app/chat/_components/chat-input.tsx
index 406ee10a..29b081c5 100644
--- a/frontend/app/chat/_components/chat-input.tsx
+++ b/frontend/app/chat/_components/chat-input.tsx
@@ -350,6 +350,7 @@ export const ChatInput = forwardRef<ChatInputHandle, ChatInputProps>(
                     onClear={() => {
                       onFileSelected(null);
                     }}
+                    isUploading={isUploading}
                   />
                 </motion.div>
               )}
diff --git a/frontend/app/chat/_components/file-preview.tsx b/frontend/app/chat/_components/file-preview.tsx
index 482a505c..95349b24 100644
--- a/frontend/app/chat/_components/file-preview.tsx
+++ b/frontend/app/chat/_components/file-preview.tsx
@@ -1,10 +1,11 @@
-import { X } from "lucide-react";
+import { Loader2, X } from "lucide-react";
 import Image from "next/image";
 import { Button } from "@/components/ui/button";
 
 interface FilePreviewProps {
   uploadedFile: File;
   onClear: () => void;
+  isUploading?: boolean;
 }
 
 const formatFileSize = (bytes: number): string => {
@@ -22,12 +23,14 @@ const getFilePreviewUrl = (file: File): string => {
   return "";
 };
 
-export const FilePreview = ({ uploadedFile, onClear }: FilePreviewProps) => {
+export const FilePreview = ({ uploadedFile, onClear, isUploading = false }: FilePreviewProps) => {
   return (
     <div className="max-w-[250px] flex items-center gap-2 p-2 bg-muted rounded-lg">
       {/* File Image Preview */}
       <div className="flex-shrink-0 w-8 h-8 bg-background rounded border border-input flex items-center justify-center overflow-hidden">
-        {getFilePreviewUrl(uploadedFile) ? (
+        {isUploading ? (
+          <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
+        ) : getFilePreviewUrl(uploadedFile) ? (
           <Image
             src={getFilePreviewUrl(uploadedFile)}
             alt="File preview"
diff --git a/frontend/components/navigation.tsx b/frontend/components/navigation.tsx
index 773117fb..4efd1403 100644
--- a/frontend/components/navigation.tsx
+++ b/frontend/components/navigation.tsx
@@ -472,19 +472,15 @@ export function Navigation({
                 </>
               )}
             </div>
-            <div className="flex-shrink-0 mt-4">
-              <div className="flex items-center justify-between mb-3 mx-3">
-                <h3 className="text-xs font-medium text-muted-foreground">
-                  Files
-                </h3>
-              </div>
-              <div className="overflow-y-auto scrollbar-hide space-y-1">
-                {(newConversationFiles?.length ?? 0) === 0 ? (
-                  <div className="text-[13px] text-muted-foreground py-2 px-3">
-                    No documents yet
-                  </div>
-                ) : (
-                  newConversationFiles?.map((file, index) => (
+            {(newConversationFiles?.length ?? 0) !== 0 && (
+              <div className="flex-shrink-0 mt-4">
+                <div className="flex items-center justify-between mb-3 mx-3">
+                  <h3 className="text-xs font-medium text-muted-foreground">
+                    Files
+                  </h3>
+                </div>
+                <div className="overflow-y-auto scrollbar-hide space-y-1">
+                  {newConversationFiles?.map((file, index) => (
                     <div
                       key={`${file}-${index}`}
                       className="flex-1 min-w-0 px-3"
@@ -493,10 +489,10 @@ export function Navigation({
                         {file}
                       </div>
                     </div>
-                  ))
-                )}
+                  ))}
+                </div>
               </div>
-            </div>
+            )}
           </div>
         </div>
       )}