diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 184e3f51..10f33a3d 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@bmdsoftware/react-file-manager",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@bmdsoftware/react-file-manager",
-      "version": "1.0.5",
+      "version": "1.1.0",
       "license": "MIT",
       "dependencies": {
         "react-collapsible": "^2.10.0",
diff --git a/frontend/package.json b/frontend/package.json
index cc0d3e8e..45ef0772 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@bmdsoftware/react-file-manager",
   "private": false,
-  "version": "1.0.5",
+  "version": "1.1.0",
   "type": "module",
   "module": "dist/react-file-manager.es.js",
   "files": [
diff --git a/frontend/src/FileManager/FileList/FileList.jsx b/frontend/src/FileManager/FileList/FileList.jsx
index 7c84cafa..a659b2d0 100644
--- a/frontend/src/FileManager/FileList/FileList.jsx
+++ b/frontend/src/FileManager/FileList/FileList.jsx
@@ -47,78 +47,85 @@ const FileList = ({
   const canLoadMore = currentFetched < currentTotal;
 
   return (
-    <div
-      ref={filesViewRef}
-      className={`files ${activeLayout}`}
-      onContextMenu={handleContextMenu}
-      onClick={unselectFiles}
-    >
-      {activeLayout === "list" && <FilesHeader unselectFiles={unselectFiles} />}
-
-      {currentPathFiles?.length > 0 ? (
-        <>
-          {currentPathFiles.map((file, index) => (
-            <FileItem
-              key={index}
-              index={index}
-              file={file}
-              onCreateFolder={onCreateFolder}
-              onRename={onRename}
-              onFileOpen={onFileOpen}
-              enableFilePreview={enableFilePreview}
-              triggerAction={triggerAction}
-              filesViewRef={filesViewRef}
-              selectedFileIndexes={selectedFileIndexes}
-              handleContextMenu={handleContextMenu}
-              setVisible={setVisible}
-              setLastSelectedFile={setLastSelectedFile}
-              onSelectFolder={onSelectFolder}
-              permissions={permissions}
-            />
-          ))}
-
-          
-          
-          {lazyLoading && (
-          <div
-            style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center',
-              textAlign: 'center',
-              marginTop: '2rem',
-              gridColumn: '1 / -1', // Span the full width of the grid
-              width: '100%',
-            }}
-          >
-            {canLoadMore && (
-            <Button onClick={loadMoreFiles} padding="0.45rem .45rem" disabled={isLoading}>
-              <MdOutlineFileDownload size={15} />
-              <span>Load More Files</span>
-            </Button>
-            )}
+    <div className="files-root">
+      <FilesHeader unselectFiles={unselectFiles}>
+        {activeLayout === "list" && 
+          <>
+            <div className="file-name">Name</div>
+            <div className="file-date">Modified</div>
+            <div className="file-size">Size</div>
+          </>
+        }
+      </FilesHeader>
+      <div
+        ref={filesViewRef}
+        className={`files ${activeLayout}`}
+        onContextMenu={handleContextMenu}
+        onClick={unselectFiles}
+      >
+        {currentPathFiles?.length > 0 ? (
+          <>
+            {currentPathFiles.map((file, index) => (
+              <FileItem
+                key={index}
+                index={index}
+                file={file}
+                onCreateFolder={onCreateFolder}
+                onRename={onRename}
+                onFileOpen={onFileOpen}
+                enableFilePreview={enableFilePreview}
+                triggerAction={triggerAction}
+                filesViewRef={filesViewRef}
+                selectedFileIndexes={selectedFileIndexes}
+                handleContextMenu={handleContextMenu}
+                setVisible={setVisible}
+                setLastSelectedFile={setLastSelectedFile}
+                onSelectFolder={onSelectFolder}
+                permissions={permissions}
+              />
+            ))}
             
-            <div style={{ marginTop: '0.5rem', fontSize: '0.9rem', color: '#666' }}>
-              Showing {currentFetched} of {currentTotal} files
+            {lazyLoading && (
+            <div
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                textAlign: 'center',
+                marginTop: '2rem',
+                gridColumn: '1 / -1', // Span the full width of the grid
+                width: '100%',
+              }}
+            >
+              {canLoadMore && (
+              <Button onClick={loadMoreFiles} padding="0.45rem .45rem" disabled={isLoading}>
+                <MdOutlineFileDownload size={15} />
+                <span>Load More Files</span>
+              </Button>
+              )}
+              
+              <div style={{ marginTop: '0.5rem', fontSize: '0.9rem', color: '#666' }}>
+                Showing {currentFetched} of {currentTotal} files
+              </div>
             </div>
-          </div>
+          )}
+            
+          </>
+        )
+        : (
+          <div className="empty-folder">This folder is empty.</div>
         )}
-          
-        </>
-      )
-      : (
-        <div className="empty-folder">This folder is empty.</div>
-      )}
 
-      <ContextMenu
-        filesViewRef={filesViewRef}
-        contextMenuRef={contextMenuRef.ref}
-        menuItems={isSelectionCtx ? selecCtxItems : emptySelecCtxItems}
-        visible={visible}
-        setVisible={setVisible}
-        clickPosition={clickPosition}
-      />
+        <ContextMenu
+          filesViewRef={filesViewRef}
+          contextMenuRef={contextMenuRef.ref}
+          menuItems={isSelectionCtx ? selecCtxItems : emptySelecCtxItems}
+          visible={visible}
+          setVisible={setVisible}
+          clickPosition={clickPosition}
+        />
+      </div>
     </div>
   );
 };
diff --git a/frontend/src/FileManager/FileList/FileList.scss b/frontend/src/FileManager/FileList/FileList.scss
index 55137deb..0d104079 100644
--- a/frontend/src/FileManager/FileList/FileList.scss
+++ b/frontend/src/FileManager/FileList/FileList.scss
@@ -1,5 +1,12 @@
 @import "../../styles/variables";
 
+.files-root {
+  position: relative;
+  height: calc(100% - (35px + 16px));
+  display: flex;
+  flex-direction: column;
+}
+
 .files {
   position: relative;
   display: flex;
@@ -7,7 +14,7 @@
   flex-wrap: wrap;
   column-gap: 0.5em;
   row-gap: 5px;
-  height: calc(100% - (35px + 16px));
+  height: 100%;
   @include overflow-y-scroll;
   padding: 8px;
   padding-right: 4px;
@@ -134,6 +141,40 @@
   }
 }
 
+.files-header {
+  font-size: 0.83em;
+  font-weight: 600;
+  display: flex;
+  gap: 5px;
+  border-bottom: 1px solid #dddddd;
+  padding: 4px 0 4px 5px;
+  position: sticky;
+  top: 0;
+  background-color: #f5f5f5;
+  z-index: 1;
+  min-height: 16px;
+
+  .file-select-all {
+    width: 5%;
+    height: 0.83em;
+  }
+
+  .file-name {
+    width: calc(65% - 35px);
+    padding-left: 35px;
+  }
+
+  .file-date {
+    text-align: center;
+    width: 20%;
+  }
+
+  .file-size {
+    text-align: center;
+    width: 10%;
+  }
+}
+
 .files.list {
   flex-direction: column;
   flex-wrap: nowrap;
@@ -141,39 +182,6 @@
   padding-left: 0px;
   padding-top: 0px;
 
-  .files-header {
-    font-size: 0.83em;
-    font-weight: 600;
-    display: flex;
-    gap: 5px;
-    border-bottom: 1px solid #dddddd;
-    padding: 4px 0 4px 5px;
-    position: sticky;
-    top: 0;
-    background-color: #f5f5f5;
-    z-index: 1;
-
-    .file-select-all {
-      width: 5%;
-      height: 0.83em;
-    }
-
-    .file-name {
-      width: calc(65% - 35px);
-      padding-left: 35px;
-    }
-
-    .file-date {
-      text-align: center;
-      width: 20%;
-    }
-
-    .file-size {
-      text-align: center;
-      width: 10%;
-    }
-  }
-
   .file-item-container {
     display: flex;
     width: 100%;
diff --git a/frontend/src/FileManager/FileList/FilesHeader.jsx b/frontend/src/FileManager/FileList/FilesHeader.jsx
index 753aae41..98d30544 100644
--- a/frontend/src/FileManager/FileList/FilesHeader.jsx
+++ b/frontend/src/FileManager/FileList/FilesHeader.jsx
@@ -3,7 +3,7 @@ import Checkbox from "../../components/Checkbox/Checkbox";
 import { useSelection } from "../../contexts/SelectionContext";
 import { useFileNavigation } from "../../contexts/FileNavigationContext";
 
-const FilesHeader = ({ unselectFiles }) => {
+const FilesHeader = ({ unselectFiles, children }) => {
   const [showSelectAll, setShowSelectAll] = useState(false);
 
   const { selectedFiles, setSelectedFiles } = useSelection();
@@ -33,9 +33,7 @@ const FilesHeader = ({ unselectFiles }) => {
           <Checkbox checked={allFilesSelected} onChange={handleSelectAll} title="Select all" disabled={currentPathFiles.length === 0} />
         )}
       </div>
-      <div className="file-name">Name</div>
-      <div className="file-date">Modified</div>
-      <div className="file-size">Size</div>
+      {children}
     </div>
   );
 };