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 376d14cb1721b50afcd72bf1aea2caf3d5151882..53a7a4e7f40acd086bb65e47df53449bc987aae8 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -6,12 +6,6 @@ import ListView from '@src/js/components/database/data-browser/ListView.jsx'
 import GridView from '@src/js/components/database/data-browser/GridView.jsx'
 
 const styles = theme => ({
-  containerDefault: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
-  },
-  containerSquare: {
-    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
-  },
   boundary: {
     padding: theme.spacing(1),
     borderWidth: '2px',
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 9f8589141e8bd0b91accecbdf5b362db05286cc9..7dab5047e5708819017f75bdee8040ce21030226 100644
--- a/ui-admin/src/js/components/database/data-browser/ListView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/ListView.jsx
@@ -1,16 +1,14 @@
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
 import Container from '@src/js/components/common/form/Container.jsx'
+import FolderIcon from '@material-ui/icons/FolderOpen'
+import FileIcon from '@material-ui/icons/DescriptionOutlined'
+import autoBind from 'auto-bind'
 
 const styles = theme => ({
-  containerDefault: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
-  },
-  containerSquare: {
-    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
-  },
   content: {
-    width: '100%'
+    width: '100%',
+    fontFamily: theme.typography.fontFamily,
   },
   tableHeader: {
     textAlign: 'left'
@@ -29,6 +27,20 @@ const styles = theme => ({
 })
 
 class ListView extends React.Component {
+
+  constructor(props, context) {
+    super(props, context)
+    autoBind(this)
+  }
+
+  getIcon(file) {
+    if (file.folder) {
+      return <FolderIcon />
+    } else {
+      return <FileIcon />
+    }
+  }
+
   render() {
     const { classes, files } = this.props
     /* Create strings in messages. */
@@ -45,7 +57,7 @@ class ListView extends React.Component {
           <tbody>
             {files.map((file, index) =>
               <tr key={index}>
-                <td className={classes.nameColumn}>{file.name}</td>
+                <td className={classes.nameColumn}>{<>{this.getIcon(file)} {file.name}</>}</td>
                 <td className={classes.sizeColumn}>{file.folder ? '-' : file.size}</td>
                 <td className={classes.modifiedColumn}>{file.lastModifiedTime.toLocaleString()}</td>
               </tr>
diff --git a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
index 1d54c5d68a7b0d80e0920902e52fd4aa1eca98a7..e6e8b48456424eea756ea5fff3522a8bc396ea1c 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -12,12 +12,6 @@ import InfoIcon from '@material-ui/icons/InfoOutlined'
 import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined'
 
 const styles = theme => ({
-  containerDefault: {
-    padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
-  },
-  containerSquare: {
-    padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
-  }
 })
 
 class Toolbar extends React.Component {