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 ea818cb3d315a182f14ed68dd31465922536d430..0480d50fe647c294bd2f5f215289b5ac6a149ca5 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -12,6 +12,7 @@ import GridFilterOptions from '@src/js/components/common/grid/GridFilterOptions.
 import AppController from '@src/js/components/AppController.js'
 import ItemIcon from '@src/js/components/database/data-browser/ItemIcon.jsx'
 import InfoPanel from '@src/js/components/database/data-browser/InfoPanel.jsx'
+import DataBrowserController from '@src/js/components/database/data-browser/DataBrowserController.js'
 
 const HTTP_SERVER_URI = '/data-store-server'
 
@@ -88,6 +89,9 @@ class DataBrowser extends React.Component {
   constructor(props, context) {
     super(props, context)
     autoBind(this)
+
+    this.controller = this.props.controller || new DataBrowserController()
+    this.controller.attach(this)
     this.datastoreServer = new DataStoreServer(
       'http://localhost:8085',
       HTTP_SERVER_URI
@@ -117,39 +121,6 @@ class DataBrowser extends React.Component {
     // TODO: implement
   }
 
-  async login() {
-    return new Promise((resolve, reject) => {
-      this.datastoreServer.login('admin', 'changeit', token => {
-        if (token) {
-          resolve(token)
-        } else {
-          reject('Could not perform login.')
-        }
-      })
-    })
-  }
-
-  async listFiles() {
-    return new Promise((resolve, reject) => {
-      this.datastoreServer.list('demo-sample', '', 'true', (data) => {
-        if (!data.error) {
-          const results = data.result[1]
-          const files = results.map(result => result[1])
-          resolve(files)
-        } else {
-          reject(data.error)
-        }
-      })
-    })
-  }
-
-  async load() {
-    await this.login()
-    const files = await this.listFiles()
-    this.setState({ files })
-    return await files.map(file => ({ id: file.name, ...file }))
-  }
-
   async onError(error) {
     await AppController.getInstance().errorChange(error)
   }
@@ -166,6 +137,7 @@ class DataBrowser extends React.Component {
     return (
       <div className={[classes.boundary, classes.columnFlexContainer].join(' ')}>
         <Toolbar
+          controller={this.controller}
           viewType={viewType}
           onViewTypeChange={this.handleViewTypeChange}
           onShowInfoChange={this.handleShowInfoChange}
@@ -210,7 +182,7 @@ class DataBrowser extends React.Component {
                   getValue: ({ row }) => row.lastModifiedTime.toLocaleString()
                 }
               ]}
-              loadRows={this.load}
+              loadRows={this.controller.load}
               sort='registrationDate'
               sortDirection='desc'
               exportable={false}
diff --git a/ui-admin/src/js/components/database/data-browser/DataBrowserController.js b/ui-admin/src/js/components/database/data-browser/DataBrowserController.js
new file mode 100644
index 0000000000000000000000000000000000000000..e09042a3a92221bf0ac15b6f0920f3ef0da7fe0a
--- /dev/null
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowserController.js
@@ -0,0 +1,68 @@
+/*
+ * Copyright ETH 2023 Zürich, Scientific IT Services
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+import ComponentController from '@src/js/components/common/ComponentController.js'
+import autoBind from 'auto-bind'
+
+export default class DataBrowserController extends ComponentController {
+
+  constructor() {
+    super()
+    autoBind(this)
+  }
+
+  async login() {
+    return new Promise((resolve, reject) => {
+      this.component.datastoreServer.login('admin', 'changeit', token => {
+        if (token) {
+          resolve(token)
+        } else {
+          reject('Could not perform login.')
+        }
+      })
+    })
+  }
+
+  async listFiles() {
+    return new Promise((resolve, reject) => {
+      this.component.datastoreServer.list('demo-sample', '', 'true', (data) => {
+        if (!data.error) {
+          const results = data.result[1]
+          const files = results.map(result => result[1])
+          resolve(files)
+        } else {
+          reject(data.error)
+        }
+      })
+    })
+  }
+
+  async load() {
+    await this.login()
+    const files = await this.listFiles()
+    await this.setState({ files })
+    return await files.map(file => ({ id: file.name, ...file }))
+  }
+
+  handleNewFolderClick(event) {
+    console.log(event.target)
+  }
+
+  handleUploadClick(event) {
+    console.log(event.target)
+  }
+
+}
\ No newline at end of file
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 f79610848053bebdc23ee465404d2589df639049..3f91c29e551cb803f13595efac4f9b6c025d1c09 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -68,6 +68,8 @@ class Toolbar extends React.Component {
   constructor(props, context) {
     super(props, context)
     autoBind(this)
+
+    this.controller = this.props.controller
   }
 
   render() {
@@ -84,6 +86,7 @@ class Toolbar extends React.Component {
             size={buttonSize}
             variant='outlined'
             startIcon={<CreateNewFolderIcon />}
+            onClick={this.controller.handleNewFolderClick}
           >
             {messages.get(messages.NEW_FOLDER)}
           </Button>
@@ -144,6 +147,7 @@ class Toolbar extends React.Component {
             size={buttonSize}
             variant='contained'
             startIcon={<PublishIcon />}
+            onClick={this.controller.handleUploadClick}
           >
             {messages.get(messages.UPLOAD)}
           </Button>