diff --git a/src/app/shared/vocabulary-treeview/vocabulary-treeview.component.ts b/src/app/shared/vocabulary-treeview/vocabulary-treeview.component.ts
index 41ba775171..f9e4d04f3b 100644
--- a/src/app/shared/vocabulary-treeview/vocabulary-treeview.component.ts
+++ b/src/app/shared/vocabulary-treeview/vocabulary-treeview.component.ts
@@ -98,7 +98,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    */
-  private subs: Subscription[] = [];
+  protected subs: Subscription[] = [];
 
   /**
    * Initialize instance variables
@@ -110,9 +110,9 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
    */
   constructor(
     public activeModal: NgbActiveModal,
-    private vocabularyTreeviewService: VocabularyTreeviewService,
-    private store: Store<CoreState>,
-    private translate: TranslateService
+    protected vocabularyTreeviewService: VocabularyTreeviewService,
+    protected store: Store<CoreState>,
+    protected translate: TranslateService
   ) {
     this.treeFlattener = new VocabularyTreeFlattener(this.transformer, this.getLevel,
       this.isExpandable, this.getChildren);
@@ -301,7 +301,7 @@ export class VocabularyTreeviewComponent implements OnDestroy, OnInit {
   /**
    * Return an id for a given {@link VocabularyEntry}
    */
-  private getEntryId(entry: VocabularyEntry): string {
+  protected getEntryId(entry: VocabularyEntry): string {
     return entry.authority || entry.otherInformation.id || undefined;
   }
 }
diff --git a/src/themes/okr/app/shared/okr-vocabulary-treeview/okr-vocabulary-treeview.component.scss b/src/themes/okr/app/shared/okr-vocabulary-treeview/okr-vocabulary-treeview.component.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/themes/okr/app/shared/okr-vocabulary-treeview/okr-vocabulary-treeview.component.ts b/src/themes/okr/app/shared/okr-vocabulary-treeview/okr-vocabulary-treeview.component.ts
new file mode 100644
index 0000000000..f340cdfccf
--- /dev/null
+++ b/src/themes/okr/app/shared/okr-vocabulary-treeview/okr-vocabulary-treeview.component.ts
@@ -0,0 +1,47 @@
+import { Component } from '@angular/core';
+import { VocabularyTreeviewComponent } from '../../../../../app/shared/vocabulary-treeview/vocabulary-treeview.component';
+import { filter, find, startWith } from 'rxjs/operators';
+import { PageInfo } from '../../../../../app/core/shared/page-info.model';
+
+/**
+ * Component that show a hierarchical vocabulary in a tree view
+ */
+@Component({
+  selector: 'ds-okr-vocabulary-treeview',
+  templateUrl: '../../../../../app/shared/vocabulary-treeview/vocabulary-treeview.component.html',
+  styleUrls: [
+    './okr-vocabulary-treeview.component.scss',
+    '../../../../../app/shared/vocabulary-treeview/vocabulary-treeview.component.scss',
+  ]
+})
+export class OkrVocabularyTreeviewComponent extends VocabularyTreeviewComponent {
+
+  /**
+   * Initialize the component, setting up the data to build the tree
+   */
+  ngOnInit(): void {
+    this.subs.push(
+      this.vocabularyTreeviewService.getData().subscribe((data) => {
+        this.dataSource.data = data;
+      })
+    );
+
+    const descriptionLabel = 'vocabulary-treeview.tree.description.' + this.vocabularyOptions.name;
+    this.description = this.translate.get(descriptionLabel).pipe(
+      filter((msg) => msg !== descriptionLabel),
+      startWith('')
+    );
+
+    // set isAuthenticated
+    this.isAuthenticated = this.store.pipe(select(isAuthenticated));
+
+    this.loading = this.vocabularyTreeviewService.isLoading();
+
+    this.isAuthenticated.pipe(
+      find((isAuth) => isAuth)
+    ).subscribe(() => {
+      const entryId: string = (this.selectedItem) ? this.getEntryId(this.selectedItem) : null;
+      this.vocabularyTreeviewService.initialize(this.vocabularyOptions, new PageInfo(), entryId);
+    });
+  }
+}