diff --git a/package.json b/package.json
index e521d403..caec835e 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "ng2-bootstrap": "1.1.16-11",
     "ng2-ckeditor": "1.1.5",
     "ng2-smart-table": "^0.3.2",
-    "ng2-tree": "^0.0.2-7",
+    "ng2-tree": "^2.0.0-alpha.0",
     "ngx-uploader": "^2.0.24",
     "normalize.css": "^4.1.1",
     "reflect-metadata": "^0.1.9",
diff --git a/src/app/pages/components/components.component.ts b/src/app/pages/components/components.component.ts
new file mode 100644
index 00000000..bc1ba4da
--- /dev/null
+++ b/src/app/pages/components/components.component.ts
@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'components',
+  template: `<router-outlet></router-outlet>`
+})
+export class Components {
+
+  constructor() {
+  }
+
+}
diff --git a/src/app/pages/components/components.module.ts b/src/app/pages/components/components.module.ts
new file mode 100644
index 00000000..23a95fbf
--- /dev/null
+++ b/src/app/pages/components/components.module.ts
@@ -0,0 +1,24 @@
+import { NgModule }      from '@angular/core';
+import { CommonModule }  from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { NgaModule } from '../../theme/nga.module';
+import { TreeModule } from 'ng2-tree';
+
+import { routing }       from './components.routing';
+import { Components } from './components.component';
+import { TreeView } from './components/treeView/treeView.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FormsModule,
+    NgaModule,
+    TreeModule,
+    routing
+  ],
+  declarations: [
+    Components,
+    TreeView,
+  ]
+})
+export class ComponentsModule {}
diff --git a/src/app/pages/components/components.routing.ts b/src/app/pages/components/components.routing.ts
new file mode 100644
index 00000000..8fc5d945
--- /dev/null
+++ b/src/app/pages/components/components.routing.ts
@@ -0,0 +1,17 @@
+import { Routes, RouterModule }  from '@angular/router';
+
+import { Components } from './components.component';
+import { TreeView } from './components/treeView/treeView.component';
+
+// noinspection TypeScriptValidateTypes
+const routes: Routes = [
+  {
+    path: '',
+    component: Components,
+    children: [
+      { path: 'treeview', component: TreeView }
+    ]
+  }
+];
+
+export const routing = RouterModule.forChild(routes);
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..84c8bcbc
--- /dev/null
+++ b/src/app/pages/components/components/treeView/treeView.component.ts
@@ -0,0 +1,36 @@
+import {Component} from '@angular/core';
+import {TreeModel} from 'ng2-tree';
+
+@Component({
+  selector: 'tree-view',
+  templateUrl: './treeView.html',
+})
+
+export class TreeView {
+
+  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'},
+        ]
+      }
+    ]
+  };
+
+  constructor() {
+  }
+
+}
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..250124af
--- /dev/null
+++ b/src/app/pages/components/components/treeView/treeView.html
@@ -0,0 +1,5 @@
+<div class="col-md-6">
+  <ba-card title="basic">
+    <tree id="tree-view" [tree]="tree"></tree>
+  </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/pages/pages.menu.ts b/src/app/pages/pages.menu.ts
index 0a148476..9e428c36 100644
--- a/src/app/pages/pages.menu.ts
+++ b/src/app/pages/pages.menu.ts
@@ -36,28 +36,28 @@ export const PAGES_MENU = [
           }
         ]
       },
-      // {
-      //   path: 'components',
-      //   data: {
-      //     menu: {
-      //       title: 'Components',
-      //       icon: 'ion-gear-a',
-      //       selected: false,
-      //       expanded: false,
-      //       order: 250,
-      //     }
-      //   },
-      //   children: [
-      //     {
-      //       path: 'treeview',
-      //       data: {
-      //         menu: {
-      //           title: 'Tree View',
-      //         }
-      //       }
-      //     }
-      //   ]
-      // },
+      {
+        path: 'components',
+        data: {
+          menu: {
+            title: 'Components',
+            icon: 'ion-gear-a',
+            selected: false,
+            expanded: false,
+            order: 250,
+          }
+        },
+        children: [
+          {
+            path: 'treeview',
+            data: {
+              menu: {
+                title: 'Tree View',
+              }
+            }
+          }
+        ]
+      },
       {
         path: 'charts',
         data: {
diff --git a/src/app/pages/pages.routing.ts b/src/app/pages/pages.routing.ts
index 47ef831f..c334f168 100644
--- a/src/app/pages/pages.routing.ts
+++ b/src/app/pages/pages.routing.ts
@@ -21,6 +21,7 @@ export const routes: Routes = [
       { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
       { path: 'dashboard', loadChildren: 'app/pages/dashboard/dashboard.module#DashboardModule' },
       { path: 'editors', loadChildren: 'app/pages/editors/editors.module#EditorsModule' },
+      { path: 'components', loadChildren: 'app/pages/components/components.module#ComponentsModule' },
       { path: 'charts', loadChildren: 'app/pages/charts/charts.module#ChartsModule' },
       { path: 'ui', loadChildren: 'app/pages/ui/ui.module#UiModule' },
       { path: 'forms', loadChildren: 'app/pages/forms/forms.module#FormsModule' },