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 4a7e73bc4054efc28437ed9485772632a20be3bc..c000e053e4077365c702ecd4d4f6b7601e4f8f68 100644
--- a/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
+++ b/ui-admin/src/js/components/database/data-browser/DataBrowser.jsx
@@ -147,15 +147,21 @@ class DataBrowser extends React.Component {
     await AppController.getInstance().errorChange(error)
   }
 
+  handleShowInfoChange() {
+    this.setState({showInfo: !this.state.showInfo})
+  }
+
   render() {
-    const { viewType, files, selectedFile, multiselectedFiles } = this.state
     const { classes } = this.props
+    const { viewType, files, selectedFile, multiselectedFiles, showInfo } = this.state
 
     return (
       <Paper className={classes.boundary}>
         <Toolbar
           viewType={viewType}
           onViewTypeChange={this.handleViewTypeChange}
+          onShowInfoChange={this.handleShowInfoChange}
+          showInfo={showInfo}
         />
         <div className={[classes.flexContainer, classes.boundary].join(' ')}>
           {viewType === 'list' && (
@@ -214,7 +220,7 @@ class DataBrowser extends React.Component {
               multiselectedFiles = {multiselectedFiles}
             />
           )}
-          {selectedFile && <InfoPanel file={selectedFile} configuration={configuration} />}
+          {showInfo && selectedFile && <InfoPanel file={selectedFile} configuration={configuration} />}
         </div>
       </Paper>
     )
diff --git a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
index 51bb16d7d52d934b18515f4ea2fe0ab67ea49b96..e5f798debf848c50bbc81681ce4076299669da01 100644
--- a/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
+++ b/ui-admin/src/js/components/database/data-browser/InfoPanel.jsx
@@ -41,7 +41,11 @@ class InfoPanel extends React.Component {
   }
 
   render() {
-    const { classes, file, configuration } = this.props
+    const {
+      classes,
+      file,
+      configuration
+    } = this.props
 
     return (file &&
       <Container>
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 314eb292250385d2a146be137d1545078b532298..e2a9ee15a6dc90fcc718dd9c463046fb3355310d 100644
--- a/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
+++ b/ui-admin/src/js/components/database/data-browser/Toolbar.jsx
@@ -26,16 +26,32 @@ import SettingsIcon from '@material-ui/icons/Settings'
 import SearchIcon from '@material-ui/icons/Search'
 import InfoIcon from '@material-ui/icons/InfoOutlined'
 import CreateNewFolderIcon from '@material-ui/icons/CreateNewFolderOutlined'
+import autoBind from "auto-bind";
+import { ToggleButton } from "@material-ui/lab";
 
 const styles = () => ({})
 
 class Toolbar extends React.Component {
+
+  constructor(props, context) {
+    super(props, context)
+    autoBind(this)
+  }
+
   render() {
-    const { viewType, onViewTypeChange, classes } = this.props
+    const {
+      viewType,
+      onViewTypeChange,
+      classes,
+      showInfo,
+      onShowInfoChange
+    } = this.props
     return (
       <>
+        <ToggleButton styles={{ root: classes.button }} selected={showInfo} onChange={onShowInfoChange} aria-label='Info'>
+          <InfoIcon />
+        </ToggleButton>
         <Button styles={{ root: classes.button }} label='New folder' startIcon={<CreateNewFolderIcon />} />
-        <Button styles={{ root: classes.button }} startIcon={<InfoIcon />} />
         <Button styles={{ root: classes.button }} label='Search' startIcon={<SearchIcon />} />
         {viewType === 'list' && <Button styles={{ root: classes.button }} label={<ViewComfyIcon />} onClick={() => onViewTypeChange('grid')} />}
         {viewType === 'grid' && <Button styles={{ root: classes.button }} label={<ViewListIcon />} onClick={() => onViewTypeChange('list')} />}