diff --git a/ui-admin/src/js/components/database/DatabaseComponent.jsx b/ui-admin/src/js/components/database/DatabaseComponent.jsx
index a91ed0a93b13b275d54e3c4ce37caea6cff2b096..64cf60e40b02bd3e5409059ed817cbbc18004dba 100644
--- a/ui-admin/src/js/components/database/DatabaseComponent.jsx
+++ b/ui-admin/src/js/components/database/DatabaseComponent.jsx
@@ -79,7 +79,7 @@ class DatabaseComponent extends React.PureComponent {
     return (
       this.state.showDataBrowser
         ?
-          <DataBrowser viewType='grid'/>
+          <DataBrowser viewType='list'/>
         :
           <Container>
             <pre>{JSON.stringify(this.state.json || {}, null, 2)}</pre>
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
index 30de7517bf2f22a49ccb29f0cac1c9d4b58bf281..376d14cb1721b50afcd72bf1aea2caf3d5151882 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -27,7 +27,49 @@ class DataBrowser extends React.Component {
     super(props, context)
     autoBind(this)
     this.state = {
-      viewType: props.viewType
+      viewType: props.viewType,
+      files: [
+        {
+          name: 'Processed',
+          folder: true,
+          size: 0,
+          creationTime: new Date('2020-08-13 14:45:54.034563'),
+          lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
+          lastAccessTime: new Date('2023-05-25 14:55:31.902857')
+        },
+        {
+          name: 'Text.txt',
+          folder: false,
+          size: 21432,
+          creationTime: new Date('2020-08-13 14:45:54.034563'),
+          lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
+          lastAccessTime: new Date('2023-05-25 14:55:31.902857')
+        },
+        {
+          name: 'Movie.mp4',
+          folder: false,
+          size: 2143243443537,
+          creationTime: new Date('2020-08-13 14:45:54.034563'),
+          lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
+          lastAccessTime: new Date('2023-05-25 14:55:31.902857')
+        },
+        {
+          name: 'Music.mp3',
+          folder: false,
+          size: 21432443,
+          creationTime: new Date('2020-08-13 14:45:54.034563'),
+          lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
+          lastAccessTime: new Date('2023-05-25 14:55:31.902857')
+        },
+        {
+          name: 'Image.png',
+          folder: false,
+          size: 214323234,
+          creationTime: new Date('2020-08-13 14:45:54.034563'),
+          lastModifiedTime: new Date('2022-02-24 04:35:21.486930'),
+          lastAccessTime: new Date('2023-05-25 14:55:31.902857')
+        }
+      ]
     }
   }
 
@@ -36,14 +78,14 @@ class DataBrowser extends React.Component {
   }
 
   render() {
-    const { viewType } = this.state
+    const { viewType, files } = this.state
     const { classes } = this.props
 
     return (
       <div className={classes.boundary}>
         <Toolbar viewType={viewType} onViewTypeChange={this.handleViewTypeChange} />
-        {viewType === 'list' && <ListView />}
-        {viewType === 'grid' && <GridView />}
+        {viewType === 'list' && <ListView files={files} />}
+        {viewType === 'grid' && <GridView files={files} />}
       </div>
     )
   }
diff --git a/ui-admin/src/js/components/database/data-browser/ListView.jsx b/ui-admin/src/js/components/database/data-browser/ListView.jsx
index 57952585991a1440c4128f8638549a6d334cc6a6..9f8589141e8bd0b91accecbdf5b362db05286cc9 100644
--- a/ui-admin/src/js/components/database/data-browser/ListView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/ListView.jsx
@@ -1,21 +1,60 @@
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import Container from '@src/js/components/common/form/Container.jsx'
 
 const styles = theme => ({
-    containerDefault: {
-        padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
-    },
-    containerSquare: {
-        padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
-    }
+  containerDefault: {
+    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
+  },
+  containerSquare: {
+    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
+  },
+  content: {
+    width: '100%'
+  },
+  tableHeader: {
+    textAlign: 'left'
+  },
+  nameColumn: {
+    textAlign: 'left'
+  },
+  sizeColumn: {
+    width: '11rem',
+    textAlign: 'left'
+  },
+  modifiedColumn: {
+    width: '11rem',
+    textAlign: 'right'
+  }
 })
 
 class ListView extends React.Component {
-    render() {
-        return (
-            <div>ListView</div>
-        )
-    }
+  render() {
+    const { classes, files } = this.props
+    /* Create strings in messages. */
+    return (
+      <Container>
+        <table className={classes.content}>
+          <thead>
+            <tr>
+              <th className={classes.tableHeader}>Name</th>
+              <th className={classes.tableHeader}>Size</th>
+              <th className={classes.tableHeader}>Modified</th>
+            </tr>
+          </thead>
+          <tbody>
+            {files.map((file, index) =>
+              <tr key={index}>
+                <td className={classes.nameColumn}>{file.name}</td>
+                <td className={classes.sizeColumn}>{file.folder ? '-' : file.size}</td>
+                <td className={classes.modifiedColumn}>{file.lastModifiedTime.toLocaleString()}</td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </Container>
+    )
+  }
 }
 
 export default withStyles(styles)(ListView)