diff --git a/src/app/components/boxes/boxes.html b/src/app/components/boxes/boxes.html
new file mode 100644
index 0000000..d3e89d7
--- /dev/null
+++ b/src/app/components/boxes/boxes.html
@@ -0,0 +1,3 @@
+{{vm.boxesOrder}}
+{{boxesOrder}}
+<ng-include ng-repeat="box in vm.boxes | orderBy: vm.boxesOrder" src="'app/components/noosfero-boxes/box.html'"></ng-include>
diff --git a/src/app/components/noosfero-boxes/box.html b/src/app/components/noosfero-boxes/box.html
new file mode 100644
index 0000000..200d6f6
--- /dev/null
+++ b/src/app/components/noosfero-boxes/box.html
@@ -0,0 +1,10 @@
+<div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
+  <div ng-repeat="block in box.blocks | orderBy: 'position'" class="panel panel-default block" >
+    <div class="panel-heading" ng-show="block.title">
+      <h3 class="panel-title">{{block.title}}</h3>
+    </div>
+    <div class="panel-body">
+      <noosfero-block block="block" owner="vm.owner"></noosfero-block>
+    </div>
+  </div>
+</div>
diff --git a/src/app/components/noosfero-boxes/boxes.directive.js b/src/app/components/noosfero-boxes/boxes.directive.js
new file mode 100644
index 0000000..519598f
--- /dev/null
+++ b/src/app/components/noosfero-boxes/boxes.directive.js
@@ -0,0 +1,35 @@
+(function() {
+  'use strict';
+
+  angular
+    .module('angular')
+    .directive('noosferoBoxes', noosferoBoxes);
+
+  /** @ngInject */
+  function noosferoBoxes() {
+    var directive = {
+      restrict: 'E',
+      scope: {
+          boxes: '=',
+          owner: '='
+      },
+      templateUrl: 'app/components/noosfero-boxes/boxes.html',
+      controller: BoxesController,
+      controllerAs: 'vm',
+      bindToController: true
+    };
+
+    return directive;
+
+    /** @ngInject */
+    function BoxesController() {
+      var vm = this;
+
+      vm.boxesOrder = function(box) {
+        if(box.position==2) return 0;
+        return box.position;
+      }
+    }
+  }
+
+})();
diff --git a/src/app/components/noosfero-boxes/boxes.html b/src/app/components/noosfero-boxes/boxes.html
new file mode 100644
index 0000000..c40cb87
--- /dev/null
+++ b/src/app/components/noosfero-boxes/boxes.html
@@ -0,0 +1 @@
+<ng-include ng-repeat="box in vm.boxes | orderBy: vm.boxesOrder" src="'app/components/noosfero-boxes/box.html'"></ng-include>
diff --git a/src/app/components/noosfero-boxes/boxes.scss b/src/app/components/noosfero-boxes/boxes.scss
new file mode 100644
index 0000000..9e6d526
--- /dev/null
+++ b/src/app/components/noosfero-boxes/boxes.scss
@@ -0,0 +1,6 @@
+.col-md-2-5 {
+  @extend .col-md-3;
+  @media (min-width: 920px) {
+    width: 20.83%;
+  }
+}
diff --git a/src/app/index.scss b/src/app/index.scss
index f5bc6a6..772c2ee 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -36,13 +36,6 @@ $page-header-border-color: #eee;
   }
 }
 
-.col-md-2-5 {
-  @extend .col-md-3;
-  @media (min-width: 920px) {
-    width: 20.83%;
-  }
-}
-
 /**
  *  Do not remove the comments below. It's the markers used by gulp-inject to inject
  *  all your sass files automatically
diff --git a/src/app/profile/profile.controller.js b/src/app/profile/profile.controller.js
index ff3e332..1efe387 100644
--- a/src/app/profile/profile.controller.js
+++ b/src/app/profile/profile.controller.js
@@ -14,16 +14,11 @@
 
     function activate() {
       noosfero.profiles.one().get({identifier: $stateParams.profile}).then(function(profiles) {
-        vm.owner = profiles[0];
-        return noosfero.boxes(vm.owner.id).one().get();
+        vm.profile = profiles[0];
+        return noosfero.boxes(vm.profile.id).one().get();
       }).then(function(response) {
         vm.boxes = response.boxes;
       });
     }
-
-    vm.boxesOrder = function(box) {
-      if(box.position==2) return 0;
-      return box.position;
-    }
   }
 })();
diff --git a/src/app/profile/profile.html b/src/app/profile/profile.html
index 41846d8..e69c9c0 100644
--- a/src/app/profile/profile.html
+++ b/src/app/profile/profile.html
@@ -1,5 +1,5 @@
 <div class="profile-container">
   <div class="row">
-    <ng-include ng-repeat="box in vm.boxes | orderBy: vm.boxesOrder" src="'app/views/profile/box.html'"></ng-include>
+    <noosfero-boxes boxes="vm.boxes" owner="vm.profile"></noosfero-boxes>
   </div>
 </div>
diff --git a/src/app/views/profile/block.html b/src/app/views/profile/block.html
deleted file mode 100644
index 372dc11..0000000
--- a/src/app/views/profile/block.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<div class="panel panel-default block" >
-  <div class="panel-heading" ng-show="block.title">
-    <h3 class="panel-title">{{block.title}}</h3>
-  </div>
-  <div class="panel-body">
-    <noosfero-block block="block" owner="vm.owner"></noosfero-block>
-  </div>
-</div>
diff --git a/src/app/views/profile/box.html b/src/app/views/profile/box.html
deleted file mode 100644
index 2f7c0ad..0000000
--- a/src/app/views/profile/box.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
-  <ng-include ng-repeat="block in box.blocks | orderBy: 'position'" src="'app/views/profile/block.html'"></ng-include>
-</div>
--
libgit2 0.21.2