diff --git a/web/src/components/FileUplaod/index.module.scss b/web/src/components/FileUplaod/index.module.scss
index 3e465beafd..f308dee996 100644
--- a/web/src/components/FileUplaod/index.module.scss
+++ b/web/src/components/FileUplaod/index.module.scss
@@ -1,6 +1,6 @@
 .formFileUpload {
   height: 16rem;
-  width: 28rem;
+  width: 29rem;
   max-width: 100%;
   text-align: center;
   position: relative;
diff --git a/web/src/components/FileUplaod/index.tsx b/web/src/components/FileUplaod/index.tsx
index e6ec1ee1cb..f043182041 100644
--- a/web/src/components/FileUplaod/index.tsx
+++ b/web/src/components/FileUplaod/index.tsx
@@ -1,16 +1,26 @@
-import React from "react";
+import React, { useEffect } from "react";
 import clsx from "clsx";
 
 import styles from "./index.module.scss";
 
 // drag drop file component
-function FileUpload(props: { onUpload: (files: any) => void }) {
-  const { onUpload = () => {} } = props;
+function FileUpload(props: { onUpload: (files: any) => void, uploadType: "file" | "folder" }) {
+  const { onUpload = () => {}, uploadType } = props;
   // drag state
   const [dragActive, setDragActive] = React.useState(false);
   // ref
   const inputRef = React.useRef<any>(null);
 
+  useEffect(() => {
+    if (uploadType === "folder") {
+      inputRef.current.setAttribute("webkitdirectory", "");
+      inputRef.current.setAttribute("directory", "");
+    } else {
+      inputRef.current.removeAttribute("webkitdirectory");
+      inputRef.current.removeAttribute("directory");
+    }
+  }, [uploadType]);
+
   // handle drag events
   const handleDrag = function (e: any) {
     e.preventDefault();
@@ -57,7 +67,6 @@ function FileUpload(props: { onUpload: (files: any) => void }) {
         type="file"
         className={styles.inputFileUpload}
         multiple={true}
-        // @ts-ignore
         onChange={handleChange}
       />
       <label
@@ -68,9 +77,9 @@ function FileUpload(props: { onUpload: (files: any) => void }) {
         htmlFor="input-file-upload"
       >
         <div>
-          <p>Drag and drop your file here or</p>
+          <p>Drag and drop your {uploadType} here or</p>
           <button className={styles.uploadButton} onClick={onButtonClick}>
-            Upload a file
+            {uploadType === "file" ? "Upload File" : "Upload Folder"}
           </button>
         </div>
       </label>
diff --git a/web/src/hooks/useAwsS3.ts b/web/src/hooks/useAwsS3.ts
index 618b0aec06..4f45d0337b 100644
--- a/web/src/hooks/useAwsS3.ts
+++ b/web/src/hooks/useAwsS3.ts
@@ -27,9 +27,18 @@ function useAwsS3() {
         Delimiter: "/",
       })
       .promise();
-    return res.Contents || [];
+    
+    const files = res.Contents || []
+    const dirs = res.CommonPrefixes || []
+    return [...files, ...dirs];
   };
 
+
+  const getFileUrl = (bucket: string, key: string) => {
+    const res = s3.getSignedUrl('getObject', { Bucket: bucket, Key: key })
+    return res
+  }
+
   const uploadFile = async (bucketName: string, key: string, body: any, { contentType }: any) => {
     const res = await s3
       .putObject({ Bucket: bucketName, Key: key, ContentType: contentType, Body: body })
@@ -37,7 +46,12 @@ function useAwsS3() {
     return res;
   };
 
-  return { s3, getList, uploadFile };
+  const deleteFile = async (bucket: string, key: string) => {
+    const res = await s3.deleteObject({ Bucket: bucket, Key: key }).promise()
+    return res
+  }
+
+  return { s3, getList, uploadFile, getFileUrl, deleteFile };
 }
 
 export default useAwsS3;
diff --git a/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx b/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx
index 4e1f50fc7e..53654b47ce 100644
--- a/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx
+++ b/web/src/pages/app/storages/mods/CreateBucketModal/index.tsx
@@ -24,6 +24,7 @@ import {
 import IconWrap from "@/components/IconWrap";
 
 import { useBucketCreateMutation, useBucketUpdateMutation } from "../../service";
+import useStorageStore from "../../store";
 
 import { TBucket } from "@/apis/typing";
 import useGlobalStore from "@/pages/globalStore";
@@ -31,6 +32,7 @@ import useGlobalStore from "@/pages/globalStore";
 function CreateBucketModal(props: { storage?: TBucket }) {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { t } = useTranslation();
+  const store = useStorageStore((store) => store);
 
   const { storage } = props;
 
@@ -65,6 +67,7 @@ function CreateBucketModal(props: { storage?: TBucket }) {
       });
 
       if (!res.error) {
+        store.setCurrentStorage(res.data);
         showSuccess("update success.");
         onClose();
       }
@@ -72,6 +75,7 @@ function CreateBucketModal(props: { storage?: TBucket }) {
       res = await bucketCreateMutation.mutateAsync(values);
 
       if (!res.error) {
+        store.setCurrentStorage(res.data);
         showSuccess("create success.");
         onClose();
       }
@@ -89,7 +93,7 @@ function CreateBucketModal(props: { storage?: TBucket }) {
             setFocus("shortName");
           }, 0);
         }}
-        tooltip="创建 Bucket"
+        tooltip={isEdit ? "编辑 Bucket" : "创建 Bucket" }
       >
         {isEdit ? <EditIcon fontSize={13} /> : <AddIcon fontSize={10} />}
       </IconWrap>
@@ -97,7 +101,7 @@ function CreateBucketModal(props: { storage?: TBucket }) {
       <Modal isOpen={isOpen} onClose={onClose} size="lg">
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Create Bucket</ModalHeader>
+          <ModalHeader>{isEdit ? "编辑 Bucket" : "创建 Bucket" }</ModalHeader>
           <ModalCloseButton />
 
           <ModalBody pb={6}>
diff --git a/web/src/pages/app/storages/mods/CreateFolderModal/index.tsx b/web/src/pages/app/storages/mods/CreateFolderModal/index.tsx
index 4ba04d412a..e9ea27b532 100644
--- a/web/src/pages/app/storages/mods/CreateFolderModal/index.tsx
+++ b/web/src/pages/app/storages/mods/CreateFolderModal/index.tsx
@@ -16,10 +16,14 @@ import {
 } from "@chakra-ui/react";
 import { t } from "i18next";
 
+import useStorageStore, { TFile } from "../../store";
+
 function CreateModal() {
   const { isOpen, onOpen, onClose } = useDisclosure();
+  const { prefix, setPrefix } = useStorageStore();
+
 
-  const { register, setFocus, handleSubmit } = useForm<{ name: string }>();
+  const { register, setFocus, handleSubmit } = useForm<{ prefix: string }>();
 
   return (
     <>
@@ -28,7 +32,7 @@ function CreateModal() {
         onClick={() => {
           onOpen();
           setTimeout(() => {
-            setFocus("name");
+            setFocus("prefix");
           }, 0);
         }}
       >
@@ -44,9 +48,9 @@ function CreateModal() {
           <ModalBody pb={6}>
             <VStack spacing={6} align="flex-start">
               <FormControl>
-                <FormLabel htmlFor="name">文件夹名称</FormLabel>
+                <FormLabel htmlFor="prefix">文件夹名称</FormLabel>
                 <Input
-                  {...register("name", {
+                  {...register("prefix", {
                     required: true,
                   })}
                   variant="filled"
@@ -62,8 +66,9 @@ function CreateModal() {
             <Button
               colorScheme="primary"
               type="submit"
-              onClick={handleSubmit(() => {
-                console.log("submit");
+              onClick={handleSubmit((value) => {
+                setPrefix(prefix + value.prefix + "/");
+                onClose();
               })}
             >
               {t("Common.Dialog.Confirm")}
diff --git a/web/src/pages/app/storages/mods/FileList/index.tsx b/web/src/pages/app/storages/mods/FileList/index.tsx
index 8f36043f31..bd15d274eb 100644
--- a/web/src/pages/app/storages/mods/FileList/index.tsx
+++ b/web/src/pages/app/storages/mods/FileList/index.tsx
@@ -1,45 +1,67 @@
-import { DeleteIcon, DownloadIcon } from "@chakra-ui/icons";
+import { useEffect, useState } from "react";
+import { DeleteIcon, DownloadIcon, ViewIcon } from "@chakra-ui/icons";
 import { HStack, Table, TableContainer, Tbody, Td, Th, Thead, Tr } from "@chakra-ui/react";
 import { useQuery } from "@tanstack/react-query";
+import { t } from "i18next";
 
+import ConfirmButton from "@/components/ConfirmButton";
 import IconWrap from "@/components/IconWrap";
 import PanelHeader from "@/components/Panel/Header";
-import { formatDate } from "@/utils/format";
+import { formatDate, formatSize } from "@/utils/format";
 
 import useStorageStore, { TFile } from "../../store";
 import CreateFolderModal from "../CreateFolderModal";
 import HostingDrawer from "../HostingDrawer";
+import PathLink from "../PathLink";
 import UploadButton from "../UploadButton";
 
 import useAwsS3 from "@/hooks/useAwsS3";
 import RightPanel from "@/pages/app/mods/RightPanel";
 
 export default function FileList() {
-  const { getList } = useAwsS3();
+  const { getList, getFileUrl, deleteFile } = useAwsS3();
 
-  const { currentStorage } = useStorageStore();
+  const { currentStorage, prefix, setPrefix } = useStorageStore();
   const bucketName = currentStorage?.metadata.name;
 
   const query = useQuery(
-    ["fileList", bucketName, "/"],
-    () => getList(bucketName, { marker: "", prefix: "/" }),
+    ["fileList", bucketName],
+    () => getList(bucketName, { marker: "", prefix }),
     {
       enabled: !!bucketName,
     },
   );
 
+  useEffect(() => {
+    query.refetch();
+  }, [bucketName, prefix]);
+
+  const viewAppFile = (file: TFile) => {
+    if (file.Prefix) {
+      changeDirectory(file);
+      return
+    }
+
+    window.open(getFileUrl(bucketName!, file.Key), "_blank");
+  }
+
+  const changeDirectory = (file: TFile) => {
+    setPrefix(file.Prefix!)
+  }
+
   return (
     <RightPanel>
       <PanelHeader>
         <HStack spacing={2}>
-          <UploadButton />
+          <UploadButton onUploadSuccess={() => query.refetch()} />
           <CreateFolderModal />
-          <HostingDrawer />
+          <PathLink />
+          {/* <HostingDrawer /> */}
         </HStack>
         <HStack spacing={12}>
           <span>容量： {currentStorage?.spec.storage} </span>
-          <span>已用： {currentStorage?.status.capacity.storage} </span>
-          <span>文件数： {currentStorage?.status.capacity.objectCount} </span>
+          <span>已用： {currentStorage?.status?.capacity?.storage} </span>
+          <span>文件数： {currentStorage?.status?.capacity?.objectCount} </span>
         </HStack>
       </PanelHeader>
       <div className="m-2 ">
@@ -47,8 +69,8 @@ export default function FileList() {
           <Table variant="simple" size="sm">
             <Thead>
               <Tr>
-                <Th>..</Th>
                 <Th>文件路径</Th>
+                <Th>文件类型</Th>
                 <Th isNumeric>大小</Th>
                 <Th isNumeric>更新时间</Th>
                 <Th isNumeric>
@@ -59,18 +81,33 @@ export default function FileList() {
             <Tbody>
               {(query?.data || []).map((file: TFile) => {
                 return (
-                  <Tr _hover={{ bgColor: "#efefef" }} key={file.Key}>
-                    <Td>jpg</Td>
-                    <Td style={{ maxWidth: 200 }}>{file.Key}</Td>
-                    <Td isNumeric>{file.Size}</Td>
-                    <Td isNumeric>{formatDate(file.LastModified)}</Td>
+                  <Tr _hover={{ bgColor: "#efefef" }} key={file.Key || file.Prefix}>
+                    <Td style={{ maxWidth: 200 }}>
+                      {file.Prefix ?
+                        <a className="cursor-pointer text-blue-700 underline" onClick={() => changeDirectory(file)}>{bucketName + '/' + file.Prefix}</a>
+                        : bucketName + '/' + file.Key}
+                    </Td>
+                    <Td>--</Td>
+                    <Td isNumeric>{file.Size ? formatSize(file.Size) : '--'}</Td>
+                    <Td isNumeric>{file.LastModified ? formatDate(file.LastModified) : '--'}</Td>
                     <Td isNumeric className="flex justify-end">
-                      <IconWrap onClick={() => {}}>
-                        <DownloadIcon fontSize={12} />
-                      </IconWrap>
-                      <IconWrap onClick={() => {}}>
-                        <DeleteIcon fontSize={12} />
+                      <IconWrap onClick={() => viewAppFile(file)}>
+                        <ViewIcon fontSize={12} />
                       </IconWrap>
+                      <ConfirmButton
+                        onSuccessAction={async () => {
+                          await deleteFile(bucketName!, file.Key);
+                          query.refetch();
+                        }}
+                        headerText={String(t("Delete"))}
+                        bodyText={'确认要删除文件吗？'}
+                      >
+                        <IconWrap tooltip={String(t("Delete"))}>
+                          <DeleteIcon
+                            fontSize={14}
+                          />
+                        </IconWrap>
+                      </ConfirmButton>
                     </Td>
                   </Tr>
                 );
diff --git a/web/src/pages/app/storages/mods/PathLink/index.tsx b/web/src/pages/app/storages/mods/PathLink/index.tsx
new file mode 100644
index 0000000000..e4989cd482
--- /dev/null
+++ b/web/src/pages/app/storages/mods/PathLink/index.tsx
@@ -0,0 +1,38 @@
+import useStorageStore from "../../store";
+
+function PathLink() {
+  const { currentStorage, prefix, setPrefix } = useStorageStore();
+  const bucketName = currentStorage?.metadata.name || "";
+
+  const strs = prefix?.split("/").filter((s) => s !== "");
+  
+  const paths = strs?.map((s, i) => {
+    return {
+      name: s,
+      path: strs[i - 1] ? `${strs[i - 1]}/${s}/` : `/${s}/`,
+    };
+  });
+
+  paths?.unshift({
+    name: bucketName,
+    path: "/",
+  });
+  
+
+  const changeDirectory = (path: string) => {
+    setPrefix(path);
+  };
+
+  return (
+    <div>
+      {paths?.map((p) => (
+        <span key={p.path}>
+          <span className="text-blue-700 underline cursor-pointer" onClick={() => changeDirectory(p.path)}>{p.name}</span>
+          <span className="text-gray-500">/</span>
+        </span>
+      ))}
+    </div>
+  );
+}
+
+export default PathLink;
diff --git a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
index e14c6f3742..b7edf2b224 100644
--- a/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
+++ b/web/src/pages/app/storages/mods/StorageListPanel/index.tsx
@@ -17,8 +17,8 @@ export default function StorageListPanel() {
 
   const bucketListQuery = useBucketListQuery({
     onSuccess(data) {
-      if (data?.data?.items?.length) {
-        store.setCurrentStorage(data?.data?.items[0]);
+      if (data?.data?.items?.length) {        
+        if (!store.currentStorage) store.setCurrentStorage(data?.data?.items[0]);
       }
     },
   });
@@ -43,6 +43,7 @@ export default function StorageListPanel() {
                 className="group"
                 onClick={() => {
                   store.setCurrentStorage(storage);
+                  store.setPrefix("/")
                 }}
               >
                 <div className="relative flex-1">
diff --git a/web/src/pages/app/storages/mods/UploadButton/index.tsx b/web/src/pages/app/storages/mods/UploadButton/index.tsx
index 25408a9aca..c03cdc9af5 100644
--- a/web/src/pages/app/storages/mods/UploadButton/index.tsx
+++ b/web/src/pages/app/storages/mods/UploadButton/index.tsx
@@ -19,13 +19,14 @@ import FileUpload from "@/components/FileUplaod";
 import useStorageStore from "../../store";
 
 import useAwsS3 from "@/hooks/useAwsS3";
+import useGlobalStore from "@/pages/globalStore";
 
-function UploadButton() {
+function UploadButton({onUploadSuccess}: {onUploadSuccess: () => void}) {
   const { isOpen, onOpen, onClose } = useDisclosure();
-
-  const { currentStorage } = useStorageStore();
-
+  const { currentStorage, prefix } = useStorageStore();
+  const { showSuccess } = useGlobalStore();
   const { uploadFile } = useAwsS3();
+  const [uploadType, setUploadType] = React.useState<"file" | "folder">("file");
 
   return (
     <div>
@@ -34,26 +35,38 @@ function UploadButton() {
           上传
         </MenuButton>
         <MenuList>
-          <MenuItem onClick={onOpen}>上传文件</MenuItem>
-          <MenuItem>上传文件夹</MenuItem>
+          <MenuItem onClick={() => {
+            setUploadType("file");
+            onOpen();
+          }}>上传文件</MenuItem>
+          <MenuItem onClick={() => {
+            setUploadType("folder");
+            onOpen();
+          }}>上传文件夹</MenuItem>
         </MenuList>
       </Menu>
 
       <Modal isOpen={isOpen} onClose={onClose} size="lg">
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Upload File</ModalHeader>
+          <ModalHeader>Upload {uploadType === "file" ? "File" : "Folder"}</ModalHeader>
           <ModalCloseButton />
           <div className="p-6">
             <FileUpload
+              uploadType={uploadType}
               onUpload={async (files) => {
+                console.log(files);                
                 for (let i = 0; i < files.length; i++) {
-                  await uploadFile(currentStorage?.metadata.name!, "/" + files[i].name, files[i], {
-                    contentType: files[i].type,
+                  const file = files[i];
+                  const fileName = file.webkitRelativePath ? file.webkitRelativePath : file.name;
+                  await uploadFile(currentStorage?.metadata.name!, prefix + fileName, file, {
+                    contentType: file.type,
                   });
                 }
-                console.log("success");
-                return files;
+
+                onUploadSuccess();
+                onClose();
+                showSuccess("上传成功");
               }}
             />
           </div>
diff --git a/web/src/pages/app/storages/store.ts b/web/src/pages/app/storages/store.ts
index 7aee465a73..883085e228 100644
--- a/web/src/pages/app/storages/store.ts
+++ b/web/src/pages/app/storages/store.ts
@@ -15,11 +15,14 @@ export type TFile = {
     DisplayName: string;
     ID: string;
   };
+  Prefix?: string;
 };
 
 type State = {
   currentStorage?: TBucket;
   setCurrentStorage: (currentStorage: TBucket) => void;
+  prefix?: string;
+  setPrefix: (prefix: string) => void;
 };
 
 const useStorageStore = create<State>()(
@@ -30,6 +33,10 @@ const useStorageStore = create<State>()(
         set((state) => {
           state.currentStorage = currentStorage;
         }),
+      prefix: "/",
+      setPrefix: (prefix) => set((state) => {
+        state.prefix = prefix;
+      }),
     })),
   ),
 );
diff --git a/web/src/utils/format.ts b/web/src/utils/format.ts
index e7ee1ed0db..0639401c64 100644
--- a/web/src/utils/format.ts
+++ b/web/src/utils/format.ts
@@ -6,3 +6,13 @@ export function formatDate(
 ) {
   return dayjs(date).format(format);
 }
+
+export function formatSize(size: number) {
+  const units = ["B", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
+  let i = 0;
+  while (size >= 1024) {
+    size /= 1024;
+    i++;
+  }
+  return size.toFixed(2) + " " + units[i];
+}