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 55b7ed646e89752ce6f518b6213baae65c74d8b9..69163f7a8b50743e2aa08f989ee23856d98d340b 100644
--- a/ui-admin/src/js/components/database/data-browser/GridView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridView.jsx
@@ -1,19 +1,19 @@
 import React from 'react'
 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 => ({
-    containerDefault: {
-        padding: `${theme.spacing(1)}px ${theme.spacing(2)}px`
-    },
-    containerSquare: {
-        padding: `${theme.spacing(2)}px ${theme.spacing(2)}px`
-    }
 })
 
 class GridView extends React.Component {
+
     render() {
+        const { classes, configuration, files } = this.props
         return (
-            <div>GridView</div>
+            <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
new file mode 100644
index 0000000000000000000000000000000000000000..624509fae677ee52e10a5e119f1322bbd4afbf8c
--- /dev/null
+++ b/ui-admin/src/js/components/database/data-browser/GridViewItem.jsx
@@ -0,0 +1,52 @@
+import React from 'react'
+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 => ({
+    icon: {
+        verticalAlign: 'middle',
+        fontSize: '4rem'
+    },
+})
+
+class GridViewItem extends React.Component {
+
+    constructor(props, context) {
+        super(props, context)
+        autoBind(this)
+
+        const { configuration } = this.props
+
+        this.extensionToIconType = new Map(
+          configuration.flatMap(
+            (configObject) => configObject.extensions.map(extension => [extension, configObject.icon])
+          )
+        )
+    }
+
+    // TODO: move out this method in favour of using a utility method from DataBrowser for example
+    getIcon(file) {
+        const { classes } = this.props
+
+        if (file.folder) {
+            return <FolderIcon className={classes.icon} />
+        } else {
+            const iconType = this.extensionToIconType.get(file.name.substring(file.name.lastIndexOf(".") + 1))
+            return iconType ? React.createElement(iconType, { className: classes.icon }) : <FileIcon className={classes.icon} />
+        }
+    }
+
+    render() {
+        const { classes, file } = this.props
+
+        return (
+            <div>
+                <>{this.getIcon(file)} {file.name}</>
+            </div>
+        )
+    }
+}
+
+export default withStyles(styles)(GridViewItem)