diff --git a/frontend/public/locales/en-GB/translation.json b/frontend/public/locales/en-GB/translation.json
index c18849441..261b8dbc7 100644
--- a/frontend/public/locales/en-GB/translation.json
+++ b/frontend/public/locales/en-GB/translation.json
@@ -48,7 +48,11 @@
   "filesSelected": "{{count}} files selected",
   "files": {
     "title": "Files",
-    "placeholder": "Select a PDF file in the main view to get started"
+    "placeholder": "Select a PDF file in the main view to get started",
+    "upload": "Upload",
+    "addFiles": "Add files",
+    "noFiles": "No files uploaded. ",
+    "selectFromWorkbench": "Select files from the workbench or "
   },
   "noFavourites": "No favourites added",
   "downloadComplete": "Download Complete",
diff --git a/frontend/src/components/tools/ToolPanel.tsx b/frontend/src/components/tools/ToolPanel.tsx
index a846978d6..69a012690 100644
--- a/frontend/src/components/tools/ToolPanel.tsx
+++ b/frontend/src/components/tools/ToolPanel.tsx
@@ -8,6 +8,7 @@ import ToolRenderer from './ToolRenderer';
 import ToolSearch from './toolPicker/ToolSearch';
 import { useSidebarContext } from "../../contexts/SidebarContext";
 import rainbowStyles from '../../styles/rainbow.module.css';
+import { Stack, ScrollArea } from '@mantine/core';
 
 // No props needed - component uses context
 
@@ -91,15 +92,17 @@ export default function ToolPanel() {
           </div>
         ) : (
           // Selected Tool Content View
-          <div className="flex-1 flex flex-col">
+          <div className="flex-1 flex flex-col overflow-hidden">
             {/* Tool content */}
-            <div className="flex-1 min-h-0">
-              {selectedToolKey && (
-                <ToolRenderer
-                  selectedToolKey={selectedToolKey}
-                  onPreviewFile={setPreviewFile}
-                />
-              )}
+            <div className="flex-1 min-h-0 overflow-hidden">
+              <ScrollArea h="100%">
+                {selectedToolKey && (
+                  <ToolRenderer
+                    selectedToolKey={selectedToolKey}
+                    onPreviewFile={setPreviewFile}
+                  />
+                )}
+              </ScrollArea>
             </div>
           </div>
         )}
diff --git a/frontend/src/components/tools/shared/FileStatusIndicator.tsx b/frontend/src/components/tools/shared/FileStatusIndicator.tsx
index 20e7c4d7a..ca56b3c22 100644
--- a/frontend/src/components/tools/shared/FileStatusIndicator.tsx
+++ b/frontend/src/components/tools/shared/FileStatusIndicator.tsx
@@ -1,9 +1,11 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import { Text, Anchor } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import FolderIcon from '@mui/icons-material/Folder';
+import UploadIcon from '@mui/icons-material/Upload';
 import { useFilesModalContext } from "../../../contexts/FilesModalContext";
 import { useAllFiles } from "../../../contexts/FileContext";
+import { useFileManager } from "../../../hooks/useFileManager";
 
 export interface FileStatusIndicatorProps {
   selectedFiles?: File[];
@@ -15,41 +17,110 @@ const FileStatusIndicator = ({
   placeholder,
 }: FileStatusIndicatorProps) => {
   const { t } = useTranslation();
-  const { openFilesModal } = useFilesModalContext();
+  const { openFilesModal, onFilesSelect } = useFilesModalContext();
   const { files: workbenchFiles } = useAllFiles();
+  const { loadRecentFiles } = useFileManager();
+  const [hasRecentFiles, setHasRecentFiles] = useState<boolean | null>(null);
+
+  // Check if there are recent files
+  useEffect(() => {
+    const checkRecentFiles = async () => {
+      try {
+        const recentFiles = await loadRecentFiles();
+        setHasRecentFiles(recentFiles.length > 0);
+      } catch (error) {
+        setHasRecentFiles(false);
+      }
+    };
+    checkRecentFiles();
+  }, [loadRecentFiles]);
+
+  // Handle native file picker
+  const handleNativeUpload = () => {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.accept = '.pdf,application/pdf';
+    input.onchange = (event) => {
+      const files = Array.from((event.target as HTMLInputElement).files || []);
+      if (files.length > 0) {
+        onFilesSelect(files);
+      }
+    };
+    input.click();
+  };
+
+  // Don't render until we know if there are recent files
+  if (hasRecentFiles === null) {
+    return null;
+  }
 
   // Check if there are no files in the workbench
   if (workbenchFiles.length === 0) {
-    return (
-      <Text size="sm" c="dimmed">
-        {t("files.noFiles", "No files uploaded. ")}{" "}
-        <Anchor
-          size="sm"
-          onClick={openFilesModal}
-          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
-        >
-          <FolderIcon style={{ fontSize: '14px' }} />
-          {t("files.addFiles", "Add files")}
-        </Anchor>
-      </Text>
-    );
+    // If no recent files, show upload button
+    if (!hasRecentFiles) {
+      return (
+        <Text size="sm" c="dimmed">
+          <Anchor
+            size="sm"
+            onClick={handleNativeUpload}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <UploadIcon style={{ fontSize: '0.875rem' }} />
+            {t("files.upload", "Upload")}
+          </Anchor>
+        </Text>
+      );
+    } else {
+      // If there are recent files, show add files button
+      return (
+        <Text size="sm" c="dimmed">
+          <Anchor
+            size="sm"
+            onClick={openFilesModal}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <FolderIcon style={{ fontSize: '0.875rem' }} />
+            {t("files.addFiles", "Add files")}
+          </Anchor>
+        </Text>
+      );
+    }
   }
 
   // Show selection status when there are files in workbench
   if (selectedFiles.length === 0) {
-    return (
-      <Text size="sm" c="dimmed">
-        {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
-        <Anchor
-          size="sm"
-          onClick={openFilesModal}
-          style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '4px' }}
-        >
-          <FolderIcon style={{ fontSize: '14px' }} />
-          {t("files.addFiles", "Add files")}
-        </Anchor>
-      </Text>
-    );
+    // If no recent files, show upload option
+    if (!hasRecentFiles) {
+      return (
+        <Text size="sm" c="dimmed">
+          {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
+          <Anchor
+            size="sm"
+            onClick={handleNativeUpload}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <UploadIcon style={{ fontSize: '0.875rem' }} />
+            {t("files.upload", "Upload")}
+          </Anchor>
+        </Text>
+      );
+    } else {
+      // If there are recent files, show add files option
+      return (
+        <Text size="sm" c="dimmed">
+          {t("files.selectFromWorkbench", "Select files from the workbench or ") + " "}
+          <Anchor
+            size="sm"
+            onClick={openFilesModal}
+            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+          >
+            <FolderIcon style={{ fontSize: '0.875rem' }} />
+            {t("files.addFiles", "Add files")}
+          </Anchor>
+        </Text>
+      );
+    }
   }
 
   return (
diff --git a/frontend/src/components/tools/shared/createToolFlow.tsx b/frontend/src/components/tools/shared/createToolFlow.tsx
index d523ff6f6..da2503b4e 100644
--- a/frontend/src/components/tools/shared/createToolFlow.tsx
+++ b/frontend/src/components/tools/shared/createToolFlow.tsx
@@ -65,7 +65,8 @@ export function createToolFlow(config: ToolFlowConfig) {
   const steps = createToolSteps();
 
   return (
-    <Stack gap="sm" p="sm" h="95vh" w="100%" style={{ overflow: 'auto' }}>
+    <Stack gap="sm" p="sm" >
+    {/* <Stack gap="sm" p="sm" h="100%" w="100%" style={{ overflow: 'auto' }}> */}
       <ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
         {config.title && <ToolWorkflowTitle {...config.title} />}