diff --git a/openbis_ng_ui/src/js/common/consts/ids.js b/openbis_ng_ui/src/js/common/consts/ids.js
index 2d108e4ec4ee1be1a3095d97b970da990385b2c0..de9be7af1499241ad5310a07f1acd5e06941086a 100644
--- a/openbis_ng_ui/src/js/common/consts/ids.js
+++ b/openbis_ng_ui/src/js/common/consts/ids.js
@@ -1,9 +1,11 @@
 const WEB_APP_ID = 'openbis_ng_ui'
 const TYPES_GRID_ID = 'types_grid'
 const USERS_GRID_ID = 'users_grid'
+const VOCABULARY_TERMS_GRID_ID = 'vocabulary_terms_grid'
 
 export default {
   WEB_APP_ID,
   TYPES_GRID_ID,
-  USERS_GRID_ID
+  USERS_GRID_ID,
+  VOCABULARY_TERMS_GRID_ID
 }
diff --git a/openbis_ng_ui/src/js/components/types/form/VocabularyForm.jsx b/openbis_ng_ui/src/js/components/types/form/VocabularyForm.jsx
index d9023458212afbd19483dc4250e166861390cc0e..2d53593806d74e4de141a248e4f97307d04a2bb2 100644
--- a/openbis_ng_ui/src/js/components/types/form/VocabularyForm.jsx
+++ b/openbis_ng_ui/src/js/components/types/form/VocabularyForm.jsx
@@ -1,8 +1,77 @@
 import React from 'react'
+import Grid from '@src/js/components/common/grid/Grid.jsx'
+import ids from '@src/js/common/consts/ids.js'
+import store from '@src/js/store/store.js'
+import actions from '@src/js/store/actions/actions.js'
+import openbis from '@src/js/services/openbis.js'
+import logger from '@src/js/common/logger.js'
 
 export default class VocabularyForm extends React.PureComponent {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      loaded: false
+    }
+  }
+
+  componentDidMount() {
+    this.load().then(terms => {
+      this.setState(() => ({
+        terms,
+        loaded: true
+      }))
+    })
+  }
+
+  load() {
+    const { id } = this.props.object
+
+    const criteria = new openbis.VocabularyTermSearchCriteria()
+    const fo = new openbis.VocabularyTermFetchOptions()
+
+    criteria.withAndOperator()
+    criteria.withVocabulary().withCode().thatEquals(id)
+
+    return openbis
+      .searchVocabularyTerms(criteria, fo)
+      .then(result => {
+        return result.objects.map(term => ({
+          ...term,
+          id: term.code
+        }))
+      })
+      .catch(error => {
+        store.dispatch(actions.errorChange(error))
+      })
+  }
+
   render() {
-    const { object } = this.props
-    return <div>Vocabulary Form {object.id}</div>
+    logger.log(logger.DEBUG, 'VocabularyForm.render')
+
+    if (!this.state.loaded) {
+      return null
+    }
+
+    return (
+      <Grid
+        id={ids.VOCABULARY_TERMS_GRID_ID}
+        columns={[
+          {
+            field: 'code'
+          },
+          {
+            field: 'label'
+          },
+          {
+            field: 'description'
+          },
+          {
+            field: 'official'
+          }
+        ]}
+        data={this.state.terms}
+      />
+    )
   }
 }