diff --git a/frontend/src/components/file-list/index.vue b/frontend/src/components/file-list/index.vue
index fa387eef2..09ab96d98 100644
--- a/frontend/src/components/file-list/index.vue
+++ b/frontend/src/components/file-list/index.vue
@@ -1,9 +1,19 @@
 <template>
-    <el-popover placement="right" :width="400" trigger="click" :title="$t('file.list')" :visible="popoverVisible">
+    <el-popover
+        placement="right"
+        :width="400"
+        trigger="click"
+        :title="$t('file.list')"
+        :visible="popoverVisible"
+        popper-class="file-list"
+    >
         <template #reference>
             <el-button :icon="Folder" @click="popoverVisible = true"></el-button>
         </template>
         <div>
+            <el-button class="close" link @click="popoverVisible = false">
+                <el-icon><Close /></el-icon>
+            </el-button>
             <BreadCrumbs>
                 <BreadCrumbItem @click="jump(-1)" :right="paths.length == 0">
                     <el-icon><HomeFilled /></el-icon>
@@ -152,3 +162,14 @@ onUpdated(() => {
     search(req);
 });
 </script>
+
+<style lang="scss">
+.file-list {
+    position: relative;
+    .close {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+    }
+}
+</style>
diff --git a/frontend/src/styles/element-dark.scss b/frontend/src/styles/element-dark.scss
index 8323e7858..2343804cd 100644
--- a/frontend/src/styles/element-dark.scss
+++ b/frontend/src/styles/element-dark.scss
@@ -63,6 +63,10 @@ html.dark {
         --el-pagination-button-color: #999999;
     }
 
+    .el-popover {
+        --el-popover-title-text-color: #999999;
+    }
+
     // * wangEditor
     --w-e-textarea-bg-color: #1b1b1b;
     --w-e-textarea-color: #eeeeee;
@@ -218,4 +222,7 @@ html.dark {
             }
         }
     }
+    .el-loading-mask {
+        background-color: rgba(0, 0, 0, 0.8);
+    }
 }