diff --git a/ui-admin/src/js/components/database/DatabaseComponent.jsx b/ui-admin/src/js/components/database/DatabaseComponent.jsx
index 64cf60e40b02bd3e5409059ed817cbbc18004dba..a91ed0a93b13b275d54e3c4ce37caea6cff2b096 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='list'/>
+          <DataBrowser viewType='grid'/>
         :
           <Container>
             <pre>{JSON.stringify(this.state.json || {}, null, 2)}</pre>
diff --git a/ui-admin/src/js/components/database/data-browser/GridView.jsx b/ui-admin/src/js/components/database/data-browser/GridView.jsx
index 69163f7a8b50743e2aa08f989ee23856d98d340b..61c6561eb8f706d946a71b69ee69891c715e5c42 100644
--- a/ui-admin/src/js/components/database/data-browser/GridView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridView.jsx
@@ -3,7 +3,13 @@ import { withStyles } from '@material-ui/core/styles'
 import GridViewItem from "@src/js/components/database/data-browser/GridViewItem.jsx";
 import Container from "@src/js/components/common/form/Container.jsx";
 
-const styles = theme => ({
+const styles = (theme) => ({
+    container: {
+        fontFamily: theme.typography.fontFamily,
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(8rem, 1fr))',
+        gridGap: '0.5rem'
+    }
 })
 
 class GridView extends React.Component {
@@ -11,7 +17,7 @@ class GridView extends React.Component {
     render() {
         const { classes, configuration, files } = this.props
         return (
-            <Container>
+            <Container className={classes.container}>
                 {files.map((file) => <GridViewItem file={file} configuration={configuration}/>)}
             </Container>
         )
diff --git a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
index 624509fae677ee52e10a5e119f1322bbd4afbf8c..a3e2f74ff6a36f122b0617c7d4f7d013752b6947 100644
--- a/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
@@ -3,11 +3,22 @@ import { withStyles } from '@material-ui/core/styles'
 import FolderIcon from "@material-ui/icons/FolderOpen";
 import FileIcon from "@material-ui/icons/InsertDriveFileOutlined";
 import autoBind from "auto-bind";
-
-const styles = theme => ({
+import Container from "@src/js/components/common/form/Container.jsx";
+
+const styles = (theme) => ({
+    cell: {
+        display: 'block',
+        position: 'relative',
+        width: '6rem',
+        height: '8rem',
+        overflow: 'hidden',
+        margin: '0.25rem',
+        // border: '1px solid black',
+        textAlign: 'center'
+    },
     icon: {
         verticalAlign: 'middle',
-        fontSize: '4rem'
+        fontSize: '6rem'
     },
 })
 
@@ -42,9 +53,9 @@ class GridViewItem extends React.Component {
         const { classes, file } = this.props
 
         return (
-            <div>
+            <Container className={classes.cell}>
                 <>{this.getIcon(file)} {file.name}</>
-            </div>
+            </Container>
         )
     }
 }