diff --git a/src/client/app.js b/src/client/app.js
index 89078bcc..2cf6c4a5 100644
--- a/src/client/app.js
+++ b/src/client/app.js
@@ -18,9 +18,9 @@ import FooterLinks from './components/FooterLinks';
 
 import PageSchool from './components/PageSchool';
 import PageSchedule from './components/PageSchedule';
+import PageCollective from './components/PageCollective';
 
 import AppController from './controllers/AppController';
-import CollectiveController from './controllers/CollectiveController';
 import GalleryController from './controllers/GalleryController';
 import AlbumController from './controllers/AlbumController';
 import DocumentsController from './controllers/DocumentsController';
@@ -92,8 +92,8 @@ app.run(($location, $rootScope, $http) => {
     TeacherProfile,
     PageSchool,
     PageSchedule,
+    PageCollective,
     AppController,
-    CollectiveController,
     GalleryController,
     AlbumController,
     DocumentsController,
@@ -117,9 +117,5 @@ app.run(($location, $rootScope, $http) => {
         app.controller('DocumentsPageController', ($scope) => {
             $scope.pageClass = 'page-documents';
         });
-
-        app.controller('CollectivePageController', ($scope) => {
-            $scope.pageClass = 'page-collective';
-        });
     }
 ].map(i => i(app));
diff --git a/src/client/components/PageCollective.js b/src/client/components/PageCollective.js
new file mode 100644
index 00000000..746a3728
--- /dev/null
+++ b/src/client/components/PageCollective.js
@@ -0,0 +1,16 @@
+import template from '../../templates/components/page-collective.html';
+import {collectiveSortPattern} from '../config';
+
+export default function (app) {
+    app.component('pageCollective', {
+        template: template,
+        controller: function(api) {
+            this.pageClass = 'page-collective';
+
+            api.collective.list(collectiveSortPattern)
+                .success(collective => {
+                    this.members = collective;
+                });
+        }
+    });
+};
\ No newline at end of file
diff --git a/src/client/config.js b/src/client/config.js
index 54e62994..4d2e401d 100644
--- a/src/client/config.js
+++ b/src/client/config.js
@@ -32,8 +32,7 @@ export let routes = [
     },
     {
         name: '/collective',
-        templateUrl: '/views/collective.html',
-        controller: 'CollectivePageController',
+        template: '<page-collective></page-collective>',
         title: 'Преподаватели'
     },
     {
diff --git a/src/client/controllers/CollectiveController.js b/src/client/controllers/CollectiveController.js
deleted file mode 100644
index 67224ce1..00000000
--- a/src/client/controllers/CollectiveController.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import {collectiveSortPattern} from '../config';
-
-export default function (app) {
-    app.controller('CollectiveController', ($scope, api) => {
-        api.collective.list(collectiveSortPattern)
-            .success(collective => {
-                $scope.members = collective;
-                collective.map(person => {
-
-                    return person;
-                });
-            });
-    });
-};
diff --git a/src/style/components/page-collective.scss b/src/style/components/page-collective.scss
new file mode 100644
index 00000000..4be26ed2
--- /dev/null
+++ b/src/style/components/page-collective.scss
@@ -0,0 +1,11 @@
+@import "../variables";
+
+.page-collective {
+  &.ng-leave {
+    animation: slideOutLeft $short-duration both ease-in;
+  }
+
+  &.ng-enter {
+    animation: slideInRight $short-duration both ease-in;
+  }
+}
\ No newline at end of file
diff --git a/src/style/page.scss b/src/style/page.scss
index b03a3ce0..61c429b9 100644
--- a/src/style/page.scss
+++ b/src/style/page.scss
@@ -5,16 +5,6 @@
   &.ng-enter {}
 }
 
-.page-collective {
-  &.ng-leave {
-    animation: slideOutLeft 0.3s both ease-in;
-  }
-
-  &.ng-enter {
-    animation: slideInRight 0.3s both ease-in;
-  }
-}
-
 .page-documents {
   &.ng-leave {
     transform-origin: 50% 50%;
diff --git a/src/style/style.scss b/src/style/style.scss
index 16fb533a..dbe68369 100644
--- a/src/style/style.scss
+++ b/src/style/style.scss
@@ -13,6 +13,7 @@
 
 @import "components/page-school";
 @import "components/page-schedule";
+@import "components/page-collective";
 
 @import "main";
 @import "body-wrapper";
diff --git a/src/templates/components/page-collective.html b/src/templates/components/page-collective.html
new file mode 100644
index 00000000..d58e4d00
--- /dev/null
+++ b/src/templates/components/page-collective.html
@@ -0,0 +1,3 @@
+<div class="content content_semi-wide">
+    <teacher-profile ng-repeat="person in $ctrl.members track by $index" member="person"></teacher-profile>
+</div>
\ No newline at end of file
diff --git a/src/templates/views/collective.html b/src/templates/views/collective.html
deleted file mode 100644
index b5a4236f..00000000
--- a/src/templates/views/collective.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div class="content content_semi-wide" ng-controller="CollectiveController">
-    <teacher-profile ng-repeat="person in members track by $index" member="person"></teacher-profile>
-</div>
\ No newline at end of file