diff --git a/surfsense_web/components/assistant-ui/document-upload-popup.tsx b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
index d1fa208d2..9734954e1 100644
--- a/surfsense_web/components/assistant-ui/document-upload-popup.tsx
+++ b/surfsense_web/components/assistant-ui/document-upload-popup.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { Upload } from "lucide-react";
 import { useAtomValue } from "jotai";
 import { useRouter } from "next/navigation";
 import {
@@ -85,6 +86,7 @@ const DocumentUploadPopupContent: FC<{
 }> = ({ isOpen, onOpenChange }) => {
 	const searchSpaceId = useAtomValue(activeSearchSpaceIdAtom);
 	const router = useRouter();
+	const [isAccordionExpanded, setIsAccordionExpanded] = useState(false);
 
 	if (!searchSpaceId) return null;
 
@@ -95,16 +97,40 @@ const DocumentUploadPopupContent: FC<{
 
 	return (
 		<Dialog open={isOpen} onOpenChange={onOpenChange}>
-			<DialogContent className="max-w-4xl w-[95vw] sm:w-full h-[calc(100vh-2rem)] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-12 [&>button]:top-4 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5">
+			<DialogContent className="max-w-4xl w-[95vw] sm:w-full max-h-[calc(100vh-2rem)] sm:h-[85vh] flex flex-col p-0 gap-0 overflow-hidden border border-border bg-muted text-foreground [&>button]:right-3 sm:[&>button]:right-12 [&>button]:top-4 sm:[&>button]:top-10 [&>button]:opacity-80 hover:[&>button]:opacity-100 [&>button]:z-[100] [&>button_svg]:size-4 sm:[&>button_svg]:size-5">
 				<DialogTitle className="sr-only">Upload Document</DialogTitle>
-				<div className="flex-1 min-h-0 relative overflow-hidden">
-					<div className="h-full overflow-y-auto">
-						<div className="px-3 sm:px-12 pt-12 sm:pt-24 pb-6 sm:pb-16">
-							<DocumentUploadTab searchSpaceId={searchSpaceId} onSuccess={handleSuccess} />
+				
+				{/* Fixed Header */}
+				<div className="flex-shrink-0 px-4 sm:px-12 pt-6 sm:pt-10 transition-shadow duration-200 relative z-10">
+					{/* Upload header */}
+					<div className="flex items-center gap-2 sm:gap-4 mb-2 sm:mb-6">
+						<div className="flex h-10 w-10 sm:h-14 sm:w-14 items-center justify-center rounded-lg sm:rounded-xl bg-primary/10 border border-primary/20 flex-shrink-0">
+							<Upload className="size-5 sm:size-7 text-primary" />
+						</div>
+						<div className="flex-1 min-w-0">
+							<h2 className="text-lg sm:text-2xl font-semibold tracking-tight">Upload Documents</h2>
+							<p className="text-xs sm:text-base text-muted-foreground mt-0.5 sm:mt-1">
+								Upload and sync your documents to your search space
+							</p>
 						</div>
 					</div>
-					{/* Bottom fade shadow */}
-					<div className="absolute bottom-0 left-0 right-0 h-2 sm:h-7 bg-gradient-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
+				</div>
+
+				{/* Scrollable Content */}
+				<div className="flex-1 min-h-0 relative overflow-hidden">
+					<div className={`h-full ${isAccordionExpanded ? "overflow-y-auto" : ""}`}>
+						<div className="px-6 sm:px-12 pb-5 sm:pb-16">
+							<DocumentUploadTab 
+								searchSpaceId={searchSpaceId} 
+								onSuccess={handleSuccess}
+								onAccordionStateChange={setIsAccordionExpanded}
+							/>
+						</div>
+					</div>
+					{/* Bottom fade shadow - only show when scrolling */}
+					{isAccordionExpanded && (
+						<div className="absolute bottom-0 left-0 right-0 h-2 sm:h-7 bg-gradient-to-t from-muted via-muted/80 to-transparent pointer-events-none z-10" />
+					)}
 				</div>
 			</DialogContent>
 		</Dialog>
diff --git a/surfsense_web/components/sources/DocumentUploadTab.tsx b/surfsense_web/components/sources/DocumentUploadTab.tsx
index 5280ea850..0062dd2dc 100644
--- a/surfsense_web/components/sources/DocumentUploadTab.tsx
+++ b/surfsense_web/components/sources/DocumentUploadTab.tsx
@@ -31,6 +31,7 @@ import { GridPattern } from "./GridPattern";
 interface DocumentUploadTabProps {
 	searchSpaceId: string;
 	onSuccess?: () => void;
+	onAccordionStateChange?: (isExpanded: boolean) => void;
 }
 
 const audioFileTypes = {
@@ -109,11 +110,12 @@ const FILE_TYPE_CONFIG: Record<string, Record<string, string[]>> = {
 
 const cardClass = "border border-border bg-slate-400/5 dark:bg-white/5";
 
-export function DocumentUploadTab({ searchSpaceId, onSuccess }: DocumentUploadTabProps) {
+export function DocumentUploadTab({ searchSpaceId, onSuccess, onAccordionStateChange }: DocumentUploadTabProps) {
 	const t = useTranslations("upload_documents");
 	const router = useRouter();
 	const [files, setFiles] = useState<File[]>([]);
 	const [uploadProgress, setUploadProgress] = useState(0);
+	const [accordionValue, setAccordionValue] = useState<string>("");
 	const [uploadDocumentMutation] = useAtom(uploadDocumentMutationAtom);
 	const { mutate: uploadDocuments, isPending: isUploading } = uploadDocumentMutation;
 	const fileInputRef = useRef<HTMLInputElement>(null);
@@ -154,6 +156,12 @@ export function DocumentUploadTab({ searchSpaceId, onSuccess }: DocumentUploadTa
 
 	const totalFileSize = files.reduce((total, file) => total + file.size, 0);
 
+	// Track accordion state changes
+	const handleAccordionChange = useCallback((value: string) => {
+		setAccordionValue(value);
+		onAccordionStateChange?.(value === "supported-file-types");
+	}, [onAccordionStateChange]);
+
 	const handleUpload = async () => {
 		setUploadProgress(0);
 		trackDocumentUploadStarted(Number(searchSpaceId), files.length, totalFileSize);
@@ -190,11 +198,11 @@ export function DocumentUploadTab({ searchSpaceId, onSuccess }: DocumentUploadTa
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.3 }}
-			className="space-y-3 sm:space-y-6 max-w-4xl mx-auto"
+			className="space-y-3 sm:space-y-6 max-w-4xl mx-auto pt-0"
 		>
-			<Alert className="border border-border bg-slate-400/5 dark:bg-white/5">
-				<Info className="h-4 w-4" />
-				<AlertDescription className="text-xs sm:text-sm">{t("file_size_limit")}</AlertDescription>
+			<Alert className="border border-border bg-slate-400/5 dark:bg-white/5 flex items-start gap-3 [&>svg]:relative [&>svg]:left-0 [&>svg]:top-0 [&>svg~*]:pl-0">
+				<Info className="h-4 w-4 shrink-0 mt-0.5" />
+				<AlertDescription className="text-xs sm:text-sm leading-relaxed pt-0.5">{t("file_size_limit")}</AlertDescription>
 			</Alert>
 
 			<Card className={`relative overflow-hidden ${cardClass}`}>
@@ -366,11 +374,13 @@ export function DocumentUploadTab({ searchSpaceId, onSuccess }: DocumentUploadTa
 			<Accordion
 				type="single"
 				collapsible
-				className={`w-full ${cardClass} border border-border rounded-lg`}
+				value={accordionValue}
+				onValueChange={handleAccordionChange}
+				className={`w-full ${cardClass} border border-border rounded-lg mb-0`}
 			>
 				<AccordionItem value="supported-file-types" className="border-0">
-					<AccordionTrigger className="px-3 sm:px-6 py-3 sm:py-4 hover:no-underline">
-						<div className="flex items-center gap-2">
+					<AccordionTrigger className="px-3 sm:px-6 py-3 sm:py-4 hover:no-underline !items-center [&>svg]:!translate-y-0">
+						<div className="flex items-center gap-2 flex-1">
 							<Tag className="h-4 w-4 sm:h-5 sm:w-5 shrink-0" />
 							<div className="text-left min-w-0">
 								<div className="font-semibold text-sm sm:text-base">