diff --git a/lama_cleaner/app/src/App.tsx b/lama_cleaner/app/src/App.tsx
index 198f689..445f2fb 100644
--- a/lama_cleaner/app/src/App.tsx
+++ b/lama_cleaner/app/src/App.tsx
@@ -123,7 +123,7 @@ function App() {
   return (
     <div className="lama-cleaner">
       <Header />
-      {file ? <Workspace file={file} key={workspaceId} /> : <LandingPage />}
+      <Workspace key={workspaceId} />
     </div>
   )
 }
diff --git a/lama_cleaner/app/src/components/Editor/Editor.tsx b/lama_cleaner/app/src/components/Editor/Editor.tsx
index 2d62915..780e84a 100644
--- a/lama_cleaner/app/src/components/Editor/Editor.tsx
+++ b/lama_cleaner/app/src/components/Editor/Editor.tsx
@@ -33,6 +33,7 @@ import {
 } from '../../utils'
 import {
   croperState,
+  fileState,
   isInpaintingState,
   isSDState,
   propmtState,
@@ -44,14 +45,11 @@ import {
 import useHotKey from '../../hooks/useHotkey'
 import Croper from '../Croper/Croper'
 import emitter, { EVENT_PROMPT } from '../../event'
+import FileSelect from '../FileSelect/FileSelect'
 
 const TOOLBAR_SIZE = 200
 const BRUSH_COLOR = '#ffcc00bb'
 
-interface EditorProps {
-  file: File
-}
-
 interface Line {
   size?: number
   pts: { x: number; y: number }[]
@@ -85,8 +83,8 @@ function mouseXY(ev: SyntheticEvent) {
   return { x: mouseEvent.offsetX, y: mouseEvent.offsetY }
 }
 
-export default function Editor(props: EditorProps) {
-  const { file } = props
+export default function Editor() {
+  const [file, setFile] = useRecoilState(fileState)
   const promptVal = useRecoilValue(propmtState)
   const settings = useRecoilValue(settingState)
   const [seedVal, setSeed] = useRecoilState(seedState)
@@ -186,6 +184,9 @@ export default function Editor(props: EditorProps) {
 
   const runInpainting = useCallback(
     async (prompt?: string, useLastLineGroup?: boolean) => {
+      if (file === undefined) {
+        return
+      }
       // useLastLineGroup 的影响
       // 1. 使用上一次的 mask
       // 2. 结果替换当前 render
@@ -781,6 +782,9 @@ export default function Editor(props: EditorProps) {
   )
 
   function download() {
+    if (file === undefined) {
+      return
+    }
     const name = file.name.replace(/(\.[\w\d_-]+)$/i, '_cleanup$1')
     const curRender = renders[renders.length - 1]
     downloadImage(curRender.currentSrc, name)
@@ -918,13 +922,20 @@ export default function Editor(props: EditorProps) {
     }
   }
 
-  return (
-    <div
-      className="editor-container"
-      aria-hidden="true"
-      onMouseMove={onMouseMove}
-      onMouseUp={onPointerUp}
-    >
+  const renderFileSelect = () => {
+    return (
+      <div className="landing-file-selector">
+        <FileSelect
+          onSelection={async f => {
+            setFile(f)
+          }}
+        />
+      </div>
+    )
+  }
+
+  const renderCanvas = () => {
+    return (
       <TransformWrapper
         ref={r => {
           if (r) {
@@ -1024,6 +1035,17 @@ export default function Editor(props: EditorProps) {
           )}
         </TransformComponent>
       </TransformWrapper>
+    )
+  }
+
+  return (
+    <div
+      className="editor-container"
+      aria-hidden="true"
+      onMouseMove={onMouseMove}
+      onMouseUp={onPointerUp}
+    >
+      {file === undefined ? renderFileSelect() : renderCanvas()}
 
       {showBrush && !isInpainting && !isPanning && (
         <div className="brush-shape" style={getBrushStyle(x, y)} />
@@ -1037,7 +1059,7 @@ export default function Editor(props: EditorProps) {
       )}
 
       <div className="editor-toolkit-panel">
-        {isSD ? (
+        {isSD || file === undefined ? (
           <></>
         ) : (
           <SizeSelector
diff --git a/lama_cleaner/app/src/components/Header/Header.tsx b/lama_cleaner/app/src/components/Header/Header.tsx
index d839d01..b2c51c8 100644
--- a/lama_cleaner/app/src/components/Header/Header.tsx
+++ b/lama_cleaner/app/src/components/Header/Header.tsx
@@ -18,7 +18,7 @@ const Header = () => {
   const renderHeader = () => {
     return (
       <header>
-        <div style={{ visibility: file ? 'visible' : 'hidden' }}>
+        <div>
           <label htmlFor={uploadElemId}>
             <Button icon={<UploadIcon />} style={{ border: 0 }}>
               <input
diff --git a/lama_cleaner/app/src/components/Workspace.tsx b/lama_cleaner/app/src/components/Workspace.tsx
index 1e3fe20..246dd6b 100644
--- a/lama_cleaner/app/src/components/Workspace.tsx
+++ b/lama_cleaner/app/src/components/Workspace.tsx
@@ -12,11 +12,7 @@ import {
 } from '../adapters/inpainting'
 import SidePanel from './SidePanel/SidePanel'
 
-interface WorkspaceProps {
-  file: File
-}
-
-const Workspace = ({ file }: WorkspaceProps) => {
+const Workspace = () => {
   const [settings, setSettingState] = useRecoilState(settingState)
   const [toastVal, setToastState] = useRecoilState(toastState)
   const isSD = useRecoilValue(isSDState)
@@ -85,7 +81,7 @@ const Workspace = ({ file }: WorkspaceProps) => {
   return (
     <>
       {isSD ? <SidePanel /> : <></>}
-      <Editor file={file} />
+      <Editor />
       <SettingModal onClose={onSettingClose} />
       <ShortcutsModal />
       <Toast
diff --git a/lama_cleaner/app/src/utils.ts b/lama_cleaner/app/src/utils.ts
index e528073..7df2c88 100644
--- a/lama_cleaner/app/src/utils.ts
+++ b/lama_cleaner/app/src/utils.ts
@@ -74,11 +74,14 @@ export function loadImage(image: HTMLImageElement, src: string) {
   })
 }
 
-export function useImage(file: File): [HTMLImageElement, boolean] {
+export function useImage(file?: File): [HTMLImageElement, boolean] {
   const [image] = useState(new Image())
   const [isLoaded, setIsLoaded] = useState(false)
 
   useEffect(() => {
+    if (file === undefined) {
+      return
+    }
     image.onload = () => {
       setIsLoaded(true)
     }