diff --git a/resources/scripts/components/server/files/FileManagerContainer.tsx b/resources/scripts/components/server/files/FileManagerContainer.tsx
index 12e192851..80ea020d4 100644
--- a/resources/scripts/components/server/files/FileManagerContainer.tsx
+++ b/resources/scripts/components/server/files/FileManagerContainer.tsx
@@ -5,19 +5,10 @@ import loadDirectory, { FileObject } from '@/api/server/files/loadDirectory';
 import { Actions, useStoreActions } from 'easy-peasy';
 import { ApplicationStore } from '@/state';
 import { httpErrorToHuman } from '@/api/http';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
-import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
-import format from 'date-fns/format';
-import differenceInHours from 'date-fns/difference_in_hours';
-import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
-import { bytesToHuman } from '@/helpers';
 import { CSSTransition } from 'react-transition-group';
 import { Link } from 'react-router-dom';
 import Spinner from '@/components/elements/Spinner';
-import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
-import { faFile } from '@fortawesome/free-solid-svg-icons/faFile';
-import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
+import FileObjectRow from '@/components/server/files/FileObjectRow';
 
 export default () => {
     const [ loading, setLoading ] = useState(true);
@@ -98,48 +89,7 @@ export default () => {
                                 <div>
                                     {
                                         files.map(file => (
-                                            <a
-                                                key={file.name}
-                                                href={file.isFile ? undefined : `#${currentDirectory}/${file.name}`}
-                                                className={`
-                                                    flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
-                                                    hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
-                                                `}
-                                                onClick={(e) => {
-                                                    if (file.isFile) {
-                                                        return e.preventDefault();
-                                                    }
-                                                }}
-                                            >
-                                                <div className={'flex-none text-neutral-400 mr-4 text-lg'}>
-                                                    {file.isFile ?
-                                                        <FontAwesomeIcon icon={file.isSymlink ? faFileImport : faFileAlt}/>
-                                                        :
-                                                        <FontAwesomeIcon icon={faFolder}/>
-                                                    }
-                                                </div>
-                                                <div className={'flex-1'}>
-                                                    {file.name}
-                                                </div>
-                                                {file.isFile &&
-                                                <div className={'w-1/6 text-right mr-4'}>
-                                                    {bytesToHuman(file.size)}
-                                                </div>
-                                                }
-                                                <div
-                                                    className={'w-1/5 text-right mr-4'}
-                                                    title={file.modifiedAt.toString()}
-                                                >
-                                                    {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
-                                                        format(file.modifiedAt, 'MMM Do, YYYY h:mma')
-                                                        :
-                                                        distanceInWordsToNow(file.modifiedAt, { includeSeconds: true })
-                                                    }
-                                                </div>
-                                                <div>
-                                                    <FontAwesomeIcon icon={faEllipsisH}/>
-                                                </div>
-                                            </a>
+                                            <FileObjectRow key={file.name} directory={currentDirectory} file={file}/>
                                         ))
                                     }
                                 </div>
diff --git a/resources/scripts/components/server/files/FileObjectRow.tsx b/resources/scripts/components/server/files/FileObjectRow.tsx
new file mode 100644
index 000000000..b284b56cd
--- /dev/null
+++ b/resources/scripts/components/server/files/FileObjectRow.tsx
@@ -0,0 +1,58 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faFileImport } from '@fortawesome/free-solid-svg-icons/faFileImport';
+import { faFileAlt } from '@fortawesome/free-solid-svg-icons/faFileAlt';
+import { faFolder } from '@fortawesome/free-solid-svg-icons/faFolder';
+import { bytesToHuman } from '@/helpers';
+import differenceInHours from 'date-fns/difference_in_hours';
+import format from 'date-fns/format';
+import distanceInWordsToNow from 'date-fns/distance_in_words_to_now';
+import { faEllipsisH } from '@fortawesome/free-solid-svg-icons/faEllipsisH';
+import React from 'react';
+import { FileObject } from '@/api/server/files/loadDirectory';
+
+export default ({ file, directory }: { file: FileObject; directory: string }) => {
+    return (
+        <a
+            key={file.name}
+            href={file.isFile ? undefined : `#${directory}/${file.name}`}
+            className={`
+                flex px-4 py-3 bg-neutral-700 text-neutral-300 rounded-sm mb-px text-sm
+                hover:text-neutral-100 cursor-pointer items-center no-underline hover:bg-neutral-600
+            `}
+            onClick={(e) => {
+                if (file.isFile) {
+                    return e.preventDefault();
+                }
+            }}
+        >
+            <div className={'flex-none text-neutral-400 mr-4 text-lg'}>
+                {file.isFile ?
+                    <FontAwesomeIcon icon={file.isSymlink ? faFileImport : faFileAlt}/>
+                    :
+                    <FontAwesomeIcon icon={faFolder}/>
+                }
+            </div>
+            <div className={'flex-1'}>
+                {file.name}
+            </div>
+            {file.isFile &&
+            <div className={'w-1/6 text-right mr-4'}>
+                {bytesToHuman(file.size)}
+            </div>
+            }
+            <div
+                className={'w-1/5 text-right mr-4'}
+                title={file.modifiedAt.toString()}
+            >
+                {Math.abs(differenceInHours(file.modifiedAt, new Date())) > 48 ?
+                    format(file.modifiedAt, 'MMM Do, YYYY h:mma')
+                    :
+                    distanceInWordsToNow(file.modifiedAt, { includeSeconds: true })
+                }
+            </div>
+            <div>
+                <FontAwesomeIcon icon={faEllipsisH}/>
+            </div>
+        </a>
+    );
+};