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 15e89d08bb9b259eea3220b69a5661cf18bb95d2..30de7517bf2f22a49ccb29f0cac1c9d4b58bf281 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { withStyles } from '@material-ui/core/styles'
+import autoBind from 'auto-bind'
 import Toolbar from '@src/js/components/database/data-browser/Toolbar.jsx'
 import ListView from '@src/js/components/database/data-browser/ListView.jsx'
 import GridView from '@src/js/components/database/data-browser/GridView.jsx'
@@ -22,23 +23,27 @@ const styles = theme => ({
 
 class DataBrowser extends React.Component {
 
-
   constructor(props, context) {
     super(props, context)
+    autoBind(this)
     this.state = {
       viewType: props.viewType
     }
   }
 
+  handleViewTypeChange(viewType) {
+    this.setState({ viewType })
+  }
+
   render() {
     const { viewType } = this.state
     const { classes } = this.props
 
     return (
-      <div className={ classes.boundary }>
-        <Toolbar viewType={viewType} />
-        {viewType === 'list' ? <ListView /> : null}
-        {viewType === 'grid' ? <GridView /> : null}
+      <div className={classes.boundary}>
+        <Toolbar viewType={viewType} onViewTypeChange={this.handleViewTypeChange} />
+        {viewType === 'list' && <ListView />}
+        {viewType === 'grid' && <GridView />}
       </div>
     )
   }
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 27d31b0849c1cea823d71106855d0994762710fb..55b7ed646e89752ce6f518b6213baae65c74d8b9 100644
--- a/ui-admin/src/js/components/database/data-browser/GridView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/GridView.jsx
@@ -13,7 +13,7 @@ const styles = theme => ({
 class GridView extends React.Component {
     render() {
         return (
-            <div>GalleryBrowser</div>
+            <div>GridView</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 8e2d9d33c04cadd239ac82f44266b6d025510554..57952585991a1440c4128f8638549a6d334cc6a6 100644
--- a/ui-admin/src/js/components/database/data-browser/ListView.jsx
+++ b/ui-admin/src/js/components/database/data-browser/ListView.jsx
@@ -1,5 +1,5 @@
-import React from "react";
-import { withStyles } from "@material-ui/core/styles";
+import React from 'react'
+import { withStyles } from '@material-ui/core/styles'
 
 const styles = theme => ({
     containerDefault: {
@@ -13,7 +13,7 @@ const styles = theme => ({
 class ListView extends React.Component {
     render() {
         return (
-            <div>ListBrowser</div>
+            <div>ListView</div>
         )
     }
 }
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 e5d3af68adf65ac72d9bdf7f7c73d66899c10538..26b028b3bdb49151526daed0113851974f91f2ec 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -16,11 +16,11 @@ const styles = theme => ({
 
 class Toolbar extends React.Component {
   render() {
-    const { viewType } = this.props
+    const { viewType, onViewTypeChange } = this.props
     return (
       <Container>
-        {viewType === 'list' && <Button label={<ViewComfyIcon/>}/>}
-        {viewType === 'grid' && <Button label={<ViewListIcon/>}/>}
+        {viewType === 'list' && <Button label={<ViewComfyIcon/>} onClick={() => onViewTypeChange('grid')} />}
+        {viewType === 'grid' && <Button label={<ViewListIcon/>} onClick={() => onViewTypeChange('list')} />}
       </Container>
     )
   }