diff --git a/config/webpack.common.js b/config/webpack.common.js
index 25772a7d..979d8d2b 100644
--- a/config/webpack.common.js
+++ b/config/webpack.common.js
@@ -89,6 +89,7 @@ module.exports = {
           // these packages have problems with their sourcemaps
           helpers.root('node_modules/rxjs'),
           helpers.root('node_modules/ng2-bootstrap'),
+          helpers.root('node_modules/ng2-branchy')
         ]
       }
 
diff --git a/package.json b/package.json
index f8c8660c..1d50716b 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "lodash": "^4.12.0",
     "ng2-bootstrap": "^1.0.20",
     "ng2-ckeditor": "^1.0.4",
+    "ng2-branchy": "0.0.2-2",
     "ng2-uploader": "^0.5.2",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.6",
diff --git a/src/app/pages/components/components.component.ts b/src/app/pages/components/components.component.ts
new file mode 100644
index 00000000..ef02cdac
--- /dev/null
+++ b/src/app/pages/components/components.component.ts
@@ -0,0 +1,25 @@
+import {Component} from '@angular/core';
+import {RouteConfig} from '@angular/router-deprecated';
+import {TreeView} from "./components/treeView";
+
+@Component({
+  selector: 'components',
+  pipes: [],
+  providers: [],
+  styles: [],
+  template: `<router-outlet></router-outlet>`
+})
+@RouteConfig([
+  {
+    name: 'TreeView',
+    component: TreeView,
+    path: '/tree-view',
+    useAsDefault: true
+  }
+])
+export class Components {
+
+  constructor() {
+  }
+
+}
diff --git a/src/app/pages/components/components.scss b/src/app/pages/components/components.scss
new file mode 100644
index 00000000..1999f610
--- /dev/null
+++ b/src/app/pages/components/components.scss
@@ -0,0 +1 @@
+@import '../../theme/sass/treeView';
diff --git a/src/app/pages/components/components/treeView/index.ts b/src/app/pages/components/components/treeView/index.ts
new file mode 100644
index 00000000..15f949fe
--- /dev/null
+++ b/src/app/pages/components/components/treeView/index.ts
@@ -0,0 +1 @@
+export * from './treeView.component';
diff --git a/src/app/pages/components/components/treeView/treeView.component.ts b/src/app/pages/components/components/treeView/treeView.component.ts
new file mode 100644
index 00000000..ccded400
--- /dev/null
+++ b/src/app/pages/components/components/treeView/treeView.component.ts
@@ -0,0 +1,37 @@
+import {Component} from '@angular/core';
+import {BranchyComponent, TreeModel} from 'ng2-branchy';
+import {BaCard} from '../../../../theme/components/baCard';
+
+@Component({
+  selector: 'tree-view',
+  directives: [BranchyComponent, BaCard],
+  template: require('./treeView.html'),
+})
+
+export class TreeView {
+
+  constructor() {
+  }
+  private tree: TreeModel = {
+    value: 'Programming languages by programming paradigm',
+    children: [
+      {
+        value: 'Object-oriented programming',
+        children: [
+          {value: 'Java'},
+          {value: 'C++'},
+          {value: 'C#'},
+        ]
+      },
+      {
+        value: 'Prototype-based programming',
+        children: [
+          {value: 'JavaScript'},
+          {value: 'CoffeeScript'},
+          {value: 'Lua'},
+        ]
+      }
+    ]
+  };
+
+}
diff --git a/src/app/pages/components/components/treeView/treeView.html b/src/app/pages/components/components/treeView/treeView.html
new file mode 100644
index 00000000..df018c41
--- /dev/null
+++ b/src/app/pages/components/components/treeView/treeView.html
@@ -0,0 +1,5 @@
+<div class="col-md-6">
+  <ba-card title="basic">
+    <branchy id="tree-view" [tree]="tree"></branchy>
+  </ba-card>
+</div>
diff --git a/src/app/pages/components/index.ts b/src/app/pages/components/index.ts
new file mode 100644
index 00000000..86211eac
--- /dev/null
+++ b/src/app/pages/components/index.ts
@@ -0,0 +1 @@
+export * from './components.component';
diff --git a/src/app/theme/sass/_treeView.scss b/src/app/theme/sass/_treeView.scss
new file mode 100644
index 00000000..fd03a679
--- /dev/null
+++ b/src/app/theme/sass/_treeView.scss
@@ -0,0 +1,27 @@
+#tree-view .tree {
+  & .node-value {
+    color: white;
+  }
+  & .folding {
+    &.node-expanded::before {
+      color: white;
+    }
+    &.node-collapsed::before  {
+      color: white;
+    }
+    &.node-leaf::before {
+      color: white;
+    }
+  }
+  & .over-drop-target {
+    border: 4px solid ghostwhite;
+  }
+  & .node-value{
+    & .node-selected::after {
+      background-color: white;
+    }
+    &:after {
+      background-color: white;
+    }
+  }
+}
diff --git a/src/app/theme/theme.scss b/src/app/theme/theme.scss
index 4f38c1d0..f1f411b2 100644
--- a/src/app/theme/theme.scss
+++ b/src/app/theme/theme.scss
@@ -8,3 +8,4 @@
 @import "sass/socicon";
 @import "sass/table";
 @import "sass/form";
+@import "sass/treeView";