diff --git a/src/app/layout/blocks/block.component.spec.ts b/src/app/layout/blocks/block.component.spec.ts
new file mode 100644
index 0000000..52178b6
--- /dev/null
+++ b/src/app/layout/blocks/block.component.spec.ts
@@ -0,0 +1,135 @@
+import {Component} from 'ng-forward';
+import {BlockComponent} from './block.component';
+import * as helpers from "../../../spec/helpers";
+import {ComponentTestHelper, createClass} from '../../../spec/component-test-helper';
+
+const htmlTemplate: string = '<noosfero-block [block]="ctrl.block" [owner]="ctrl.profile"></noosfero-block>';
+
+describe("Boxes Component", () => {
+
+    let helper: ComponentTestHelper<BlockComponent>;
+    beforeEach(() => {
+        angular.mock.module("templates");
+    });
+
+    let properties = {
+        block: { id: 1 },
+        owner: {
+            id: 1,
+            identifier: 'profile-name',
+            type: 'Person'
+        }
+    };
+    beforeEach((done) => {
+        let cls = createClass({
+            template: htmlTemplate,
+            directives: [BlockComponent],
+            properties: properties,
+            providers: [
+                helpers.createProviderToValue('SessionService', helpers.mocks.sessionWithCurrentUser({})),
+                helpers.createProviderToValue('AuthService', helpers.mocks.authService),
+                helpers.createProviderToValue('$state', state),
+                helpers.createProviderToValue('TranslatorService', translatorService),
+                helpers.createProviderToValue('$uibModal', helpers.mocks.$modal),
+                helpers.createProviderToValue('BlockService', blockService),
+                helpers.createProviderToValue('NotificationService', helpers.mocks.notificationService)
+            ]
+        });
+        helper = new ComponentTestHelper<BlockComponent>(cls, done);
+    });
+
+    let translatorService = jasmine.createSpyObj("translatorService", ["currentLanguage"]);
+    let blockService = jasmine.createSpyObj("blockService", ["update"]);
+    let state = jasmine.createSpyObj("state", ["current"]);
+    state.current = { name: "" };
+
+    it("set isHomepage as false by default", () => {
+        expect(helper.component.isHomepage).toBeFalsy();
+    });
+
+    it("set isHomepage as true when in profile home page", () => {
+        state.current = { name: "main.profile.home" };
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("set isHomepage as true when in profile info page", () => {
+        state.current = { name: "main.profile.info" };
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("set isHomepage as true when in profile page", () => {
+        state.current = { name: "main.profile.page" };
+        state.params = { page: "/page" };
+        (<noosfero.Profile>helper.component.owner).homepage = '/page';
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("set isHomepage as true when in environment home page", () => {
+        state.current = { name: "main.environment.home" };
+        helper.component.owner = <noosfero.Environment>{};
+        helper.component.ngOnInit();
+        expect(helper.component.isHomepage).toBeTruthy();
+    });
+
+    it("return true in canDisplay when no display option is setted", () => {
+        helper.component.block = <any>{};
+        expect(helper.component.canDisplay()).toEqual(true);
+    });
+
+    it("return false in canDisplay for an invisible block", () => {
+        helper.component.block = <any>{ settings: { display: "never" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay with except_home_page in homepage", () => {
+        helper.component.block = <any>{ settings: { display_user: "except_home_page" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay with home_page_only outside homepage", () => {
+        helper.component.block = <any>{ settings: { display_user: "home_page_only" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return true in canDisplay when display_user is all for logged user", () => {
+        helper.component.block = <any>{ settings: { display_user: "all" } };
+        expect(helper.component.canDisplay()).toEqual(true);
+    });
+
+    it("return true in canDisplay when display_user is all for not logged user", () => {
+        helper.component.currentUser = null;
+        helper.component.block = <any>{ settings: { display_user: "all" } };
+        expect(helper.component.canDisplay()).toEqual(true);
+    });
+
+    it("return false in canDisplay when display_user is logged for not logged user", () => {
+        helper.component.currentUser = null;
+        helper.component.block = <any>{ settings: { display_user: "logged" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay when display_user is not_logged for logged user", () => {
+        helper.component.block = <any>{ settings: { display_user: "not_logged" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay when current language is not equal to language in block settings", () => {
+        helper.component['translatorService'].currentLanguage = jasmine.createSpy("currentLanguage").and.returnValue("pt");
+        helper.component.block = <any>{ settings: { language: "en" } };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return false in canDisplay when hide is true", () => {
+        helper.component.block = <any>{ id: 1, hide: true };
+        expect(helper.component.canDisplay()).toEqual(false);
+    });
+
+    it("return true in canDisplay when hide is not true", () => {
+        helper.component.block = <any>{ id: 1, hide: false };
+        expect(helper.component.canDisplay()).toEqual(true);
+    });
+
+});
diff --git a/src/app/layout/blocks/block.component.ts b/src/app/layout/blocks/block.component.ts
index ceb38b6..3cf6a16 100644
--- a/src/app/layout/blocks/block.component.ts
+++ b/src/app/layout/blocks/block.component.ts
@@ -1,25 +1,58 @@
 import { Input, Component, Inject } from 'ng-forward';
 import { BlockEditionComponent } from './block-edition/block-edition.component';
 import { BlockService } from '../../../lib/ng-noosfero-api/http/block.service';
-import {NotificationService} from '../../shared/services/notification.service';
+import { NotificationService } from '../../shared/services/notification.service';
+import { AuthService, SessionService, AuthEvents } from "../../login";
+import { TranslatorService } from "../../shared/services/translator.service";
 
 @Component({
     selector: 'noosfero-block',
     templateUrl: 'app/layout/blocks/block.html',
     directives: [BlockEditionComponent]
 })
-@Inject("$uibModal", "$scope", BlockService, NotificationService)
+@Inject("$uibModal", "$scope", "$state", "$rootScope", BlockService, NotificationService, AuthService, SessionService, TranslatorService)
 export class BlockComponent {
 
-    @Input() block: any;
-    @Input() owner: any;
+    @Input() block: noosfero.Block;
+    @Input() owner: noosfero.Profile | noosfero.Environment;
 
     private modalInstance: any = null;
     originalBlock: noosfero.Block;
 
-    constructor(private $uibModal: any, private $scope: ng.IScope, private blockService: BlockService, private notificationService: NotificationService) { }
+    currentUser: noosfero.User;
+    isHomepage = true;
+    editionMode = false;
+
+    constructor(private $uibModal: any,
+        private $scope: ng.IScope,
+        private $state: ng.ui.IStateService,
+        private $rootScope: ng.IRootScopeService,
+        private blockService: BlockService,
+        private notificationService: NotificationService,
+        private authService: AuthService,
+        private session: SessionService,
+        private translatorService: TranslatorService) {
+
+        this.currentUser = this.session.currentUser();
+        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
+            this.currentUser = this.session.currentUser();
+            this.verifyHomepage();
+        });
+        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
+            this.currentUser = this.session.currentUser();
+            this.verifyHomepage();
+        });
+        this.$rootScope.$on("$stateChangeSuccess", (event: ng.IAngularEvent, toState: ng.ui.IState) => {
+            this.verifyHomepage();
+        });
+    }
+
+    ngOnInit() {
+        this.verifyHomepage();
+    }
 
     openEdit() {
+        this.editionMode = true;
         if (!this.originalBlock) this.originalBlock = JSON.parse(JSON.stringify(this.block)); // deep copy of block data
         this.modalInstance = this.$uibModal.open({
             templateUrl: 'app/layout/blocks/block-edition/block-edition.html',
@@ -32,7 +65,8 @@ export class BlockComponent {
     }
 
     save() {
-        this.blockService.update(this.attributesToUpdate(this.block)).then(() => {
+        this.editionMode = false;
+        this.blockService.update(this.attributesToUpdate()).then(() => {
             this.closeEdit();
             this.notificationService.success({ title: "block.edition.success.title", message: "block.edition.success.message" });
         });
@@ -43,20 +77,59 @@ export class BlockComponent {
     }
 
     cancel() {
+        this.editionMode = false;
         this.block = this.originalBlock;
         this.closeEdit();
     }
 
-    protected attributesToUpdate(block: noosfero.Block) {
+    canDisplay() {
+        return this.visible() && this.displayToUser() &&
+            this.displayOnLanguage(this.translatorService.currentLanguage()) &&
+            !this.block.hide;
+    }
+
+    protected visible() {
+        let display = this.block.settings ? (<any>this.block.settings)['display'] : null;
+        return !display || ((this.isHomepage ? display !== "except_home_page" : display !== "home_page_only") && display !== "never");
+    }
+
+    protected displayToUser() {
+        let displayUser = this.block.settings ? (<any>this.block.settings)['display_user'] : null;
+        return !displayUser || displayUser === "all" ||
+            (this.currentUser ? displayUser === "logged" : displayUser === "not_logged");
+    }
+
+    protected displayOnLanguage(language: string) {
+        let displayLanguage = this.block.settings ? (<any>this.block.settings)['language'] : null;
+        return !displayLanguage || displayLanguage === "all" ||
+            language === displayLanguage;
+    }
+
+    protected attributesToUpdate() {
         return <any>{
             id: this.block.id,
-            display: this.block.settings.display,
+            display: (<any>this.block.settings).display,
             title: this.block.title,
-            display_user: this.block.settings.display_user,
-            language: this.block.settings.language
+            display_user: (<any>this.block.settings).display_user,
+            language: (<any>this.block.settings).language
         };
     }
 
+    protected verifyHomepage() {
+        if (this.owner && ["Profile", "Community", "Person"].indexOf((<any>this.owner)['type']) >= 0) {
+            let profile = <noosfero.Profile>this.owner;
+            this.isHomepage = this.$state.current.name === "main.profile.home";
+            if (profile.homepage) {
+                this.isHomepage = this.isHomepage ||
+                    (this.$state.current.name === "main.profile.page" && profile.homepage === this.$state.params['page']);
+            } else {
+                this.isHomepage = this.isHomepage || this.$state.current.name === "main.profile.info";
+            }
+        } else {
+            this.isHomepage = this.$state.current.name === "main.environment.home";
+        }
+    }
+
     private closeEdit() {
         if (this.modalInstance) {
             this.modalInstance.close();
diff --git a/src/app/layout/blocks/block.html b/src/app/layout/blocks/block.html
index 4d1e49d..549615e 100644
--- a/src/app/layout/blocks/block.html
+++ b/src/app/layout/blocks/block.html
@@ -1,4 +1,4 @@
-<div class="noosfero-block" ng-mouseover="displayActions = true" ng-mouseleave="displayActions = false">
+<div ng-show="ctrl.canDisplay() || ctrl.editionMode" ng-class="{'invisible-block': !ctrl.canDisplay()}" class="noosfero-block" ng-mouseover="displayActions = true" ng-mouseleave="displayActions = false">
   <div ng-show="displayActions" class="actions" permission="ctrl.block.permissions" permission-action="allow_edit">
     <button type="submit" class="btn btn-xs btn-default" ng-click="ctrl.openEdit()"><i class="fa fa-edit fa-fw"></i></button>
   </div>
diff --git a/src/app/layout/boxes/box.html b/src/app/layout/boxes/box.html
index a0de606..4b514ca 100644
--- a/src/app/layout/boxes/box.html
+++ b/src/app/layout/boxes/box.html
@@ -1,3 +1,3 @@
 <div ng-class="{'col-md-2-5': box.position!=1, 'col-md-7': box.position==1}">
-  <noosfero-block ng-repeat="block in box.blocks | displayBlocks:ctrl.isHomepage:ctrl.currentUser  | orderBy: 'position'" [block]="block" [owner]="ctrl.owner"></noosfero-block>
+  <noosfero-block ng-repeat="block in box.blocks | orderBy: 'position'" [block]="block" [owner]="ctrl.owner"></noosfero-block>
 </div>
diff --git a/src/app/layout/boxes/boxes.component.spec.ts b/src/app/layout/boxes/boxes.component.spec.ts
index d7d0534..0db1b6e 100644
--- a/src/app/layout/boxes/boxes.component.spec.ts
+++ b/src/app/layout/boxes/boxes.component.spec.ts
@@ -53,35 +53,4 @@ describe("Boxes Component", () => {
         expect(helper.component.boxesOrder(properties['boxes'][0])).toEqual(1);
         expect(helper.component.boxesOrder(properties['boxes'][1])).toEqual(0);
     });
-
-    it("set isHomepage as false by default", () => {
-        expect(helper.component.isHomepage).toBeFalsy();
-    });
-
-    it("set isHomepage as true when in profile home page", () => {
-        state.current = { name: "main.profile.home" };
-        helper.component.ngOnInit();
-        expect(helper.component.isHomepage).toBeTruthy();
-    });
-
-    it("set isHomepage as true when in profile info page", () => {
-        state.current = { name: "main.profile.info" };
-        helper.component.ngOnInit();
-        expect(helper.component.isHomepage).toBeTruthy();
-    });
-
-    it("set isHomepage as true when in profile page", () => {
-        state.current = { name: "main.profile.page" };
-        state.params = { page: "/page" };
-        (<noosfero.Profile>helper.component.owner).homepage = '/page';
-        helper.component.ngOnInit();
-        expect(helper.component.isHomepage).toBeTruthy();
-    });
-
-    it("set isHomepage as true when in environment home page", () => {
-        state.current = { name: "main.environment.home" };
-        helper.component.owner = <noosfero.Environment>{};
-        helper.component.ngOnInit();
-        expect(helper.component.isHomepage).toBeTruthy();
-    });
 });
diff --git a/src/app/layout/boxes/boxes.component.ts b/src/app/layout/boxes/boxes.component.ts
index 19b4af1..40b45fa 100644
--- a/src/app/layout/boxes/boxes.component.ts
+++ b/src/app/layout/boxes/boxes.component.ts
@@ -1,61 +1,16 @@
-import {Input, Inject, Component} from 'ng-forward';
-import {SessionService, AuthService, AuthEvents} from "../../login";
-import {DisplayBlocks} from "./display-blocks.filter";
+import {Input, Component} from 'ng-forward';
 
 @Component({
     selector: "noosfero-boxes",
-    templateUrl: "app/layout/boxes/boxes.html",
-    directives: [DisplayBlocks]
+    templateUrl: "app/layout/boxes/boxes.html"
 })
-@Inject("SessionService", 'AuthService', "$state", "$rootScope")
 export class BoxesComponent {
 
     @Input() boxes: noosfero.Box[];
     @Input() owner: noosfero.Profile | noosfero.Environment;
 
-    currentUser: noosfero.User;
-    isHomepage = true;
-
-    constructor(private session: SessionService,
-        private authService: AuthService,
-        private $state: ng.ui.IStateService,
-        private $rootScope: ng.IRootScopeService) {
-
-        this.currentUser = this.session.currentUser();
-        this.authService.subscribe(AuthEvents[AuthEvents.loginSuccess], () => {
-            this.currentUser = this.session.currentUser();
-            this.verifyHomepage();
-        });
-        this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
-            this.currentUser = this.session.currentUser();
-            this.verifyHomepage();
-        });
-        this.$rootScope.$on("$stateChangeSuccess", (event: ng.IAngularEvent, toState: ng.ui.IState) => {
-            this.verifyHomepage();
-        });
-    }
-
-    ngOnInit() {
-        this.verifyHomepage();
-    }
-
     boxesOrder(box: noosfero.Box) {
         if (box.position === 2) return 0;
         return box.position;
     }
-
-    private verifyHomepage() {
-        if (this.owner && ["Profile", "Community", "Person"].indexOf((<any>this.owner)['type']) >= 0) {
-            let profile = <noosfero.Profile>this.owner;
-            this.isHomepage = this.$state.current.name === "main.profile.home";
-            if (profile.homepage) {
-                this.isHomepage = this.isHomepage ||
-                    (this.$state.current.name === "main.profile.page" && profile.homepage === this.$state.params['page']);
-            } else {
-                this.isHomepage = this.isHomepage || this.$state.current.name === "main.profile.info";
-            }
-        } else {
-            this.isHomepage = this.$state.current.name === "main.environment.home";
-        }
-    }
 }
diff --git a/src/app/layout/boxes/display-blocks.filter.spec.ts b/src/app/layout/boxes/display-blocks.filter.spec.ts
deleted file mode 100644
index 3c988ca..0000000
--- a/src/app/layout/boxes/display-blocks.filter.spec.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-import {quickCreateComponent} from "../../../spec/helpers";
-import {DisplayBlocks} from './display-blocks.filter';
-
-describe("Filters", () => {
-    describe("Display Blocks Filter", () => {
-
-        let translatorService = jasmine.createSpyObj("translatorService", ["currentLanguage"]);
-
-        it("not fail when blocks is null", done => {
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(null, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("return blocks when no setting is passed", done => {
-            let blocks = [{}];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
-            done();
-        });
-
-        it("return blocks when no display is passed", done => {
-            let blocks = [{ setting: {} }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
-            done();
-        });
-
-        it("filter invisible blocks", done => {
-            let blocks = [{ settings: { display: "never" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("filter blocks with except_home_page in homepage", done => {
-            let blocks = [{ settings: { display: "except_home_page" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("filter blocks with home_page_only outside homepage", done => {
-            let blocks = [{ settings: { display: "home_page_only" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, false, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("show all blocks when display_user is all for logged user", done => {
-            let blocks = [{ settings: { display_user: "all" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual(blocks);
-            done();
-        });
-
-        it("show all blocks when display_user is all for not logged user", done => {
-            let blocks = [{ settings: { display_user: "all" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, null)).toEqual(blocks);
-            done();
-        });
-
-        it("filter blocks when display_user is logged for not logged user", done => {
-            let blocks = [{ settings: { display_user: "logged" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, null)).toEqual([]);
-            done();
-        });
-
-        it("filter blocks when display_user is not_logged for logged user", done => {
-            let blocks = [{ settings: { display_user: "not_logged" } }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("filter blocks with different language", done => {
-            let blocks = [{ settings: { language: "en" } }];
-            translatorService.currentLanguage = jasmine.createSpy("currentLanguage").and.returnValue("pt");
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, <noosfero.User>{})).toEqual([]);
-            done();
-        });
-
-        it("filter blocks when hide is true", done => {
-            let blocks = [{ hide: true }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, null)).toEqual([]);
-            done();
-        });
-
-        it("not filter blocks when hide is not true", done => {
-            let blocks = [{ id: 1, hide: false }, { id: 2 }];
-            let filter = new DisplayBlocks(translatorService);
-            expect(filter.transform(<any>blocks, true, null)).toEqual(blocks);
-            done();
-        });
-    });
-});
diff --git a/src/app/layout/boxes/display-blocks.filter.ts b/src/app/layout/boxes/display-blocks.filter.ts
deleted file mode 100644
index d691eeb..0000000
--- a/src/app/layout/boxes/display-blocks.filter.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import {Pipe, Inject} from "ng-forward";
-import {TranslatorService} from "../../shared/services/translator.service";
-
-@Pipe("displayBlocks")
-@Inject(TranslatorService)
-export class DisplayBlocks {
-
-    constructor(private translatorService: TranslatorService) { }
-
-    transform(blocks: noosfero.Block[], isHomepage: boolean, currentUser: noosfero.User) {
-        let selected: noosfero.Block[] = [];
-        blocks = blocks || [];
-        for (let block of blocks) {
-            if (this.visible(block, isHomepage) && this.displayToUser(block, currentUser) &&
-                this.displayOnLanguage(block, this.translatorService.currentLanguage())
-                && !block.hide) {
-                selected.push(block);
-            }
-        }
-        return selected;
-    }
-
-    private visible(block: noosfero.Block, isHomepage: boolean) {
-        let display = block.settings ? (<any>block.settings)['display'] : null;
-        return !display || ((isHomepage ? display !== "except_home_page" : display !== "home_page_only") && display !== "never");
-    }
-
-    private displayToUser(block: noosfero.Block, currentUser: noosfero.User) {
-        let displayUser = block.settings ? (<any>block.settings)['display_user'] : null;
-        return !displayUser || displayUser === "all" ||
-            (currentUser ? displayUser === "logged" : displayUser === "not_logged");
-    }
-
-    private displayOnLanguage(block: noosfero.Block, language: string) {
-        let displayLanguage = block.settings ? (<any>block.settings)['language'] : null;
-        return !displayLanguage || displayLanguage === "all" ||
-            language === displayLanguage;
-    }
-}
diff --git a/src/lib/ng-noosfero-api/interfaces/block.ts b/src/lib/ng-noosfero-api/interfaces/block.ts
index f20b1b3..b9cec12 100644
--- a/src/lib/ng-noosfero-api/interfaces/block.ts
+++ b/src/lib/ng-noosfero-api/interfaces/block.ts
@@ -5,5 +5,6 @@ namespace noosfero {
         limit: number;
         api_content: any;
         hide: boolean;
+        title: string;
     }
 }
--
libgit2 0.21.2