diff --git a/src/app/admin/layout-edit/designModeToggler.component.ts b/src/app/admin/layout-edit/designModeToggler.component.ts
index 2660902..6f1ffb2 100644
--- a/src/app/admin/layout-edit/designModeToggler.component.ts
+++ b/src/app/admin/layout-edit/designModeToggler.component.ts
@@ -6,18 +6,34 @@ import {AuthService, AuthEvents} from '../../login';
     selector: 'noosfero-design-toggler',
     templateUrl: 'app/admin/layout-edit/designModeToggler.html'
 })
-@Inject(DesignModeService, AuthService)
+@Inject(DesignModeService)
 export class DesignModeTogglerComponent {
 
-    icon: string = "&nbsp;<i class='glyphicon glyphicon-wrench'></i>&nbsp;";
+    @Input() iconClass: string = '';
+    @Input() knobLabel: string = '';
+    @Input() offLabel: string = '';
+    @Input() onLabel: string = '';
 
-    constructor(private designModeService: DesignModeService, private authService: AuthService) {
+	private _inDesignMode: boolean = false;
+
+    constructor(private designModeService: DesignModeService, private authService: AuthService,  private $sce: ng.ISCEService) {
         this.authService.subscribe(AuthEvents[AuthEvents.logoutSuccess], () => {
             this.designModeService.destroy();
         });
     }
 
-    private _inDesignMode: boolean = false;
+    get icon(): string {
+        if (this.iconClass && this.iconClass.trim().length > 0 ) {
+            return '<i class=\'design-toggle-icon ' + this.iconClass + '\'></i>';
+        }
+        else {
+            return '';
+        }
+    }
+
+    getKnobLabel(): string {
+        return this.$sce.trustAsHtml(this.icon + this.knobLabel);
+    }
 
     get inDesignMode(): boolean {
         return this.designModeService.isInDesignMode();
@@ -26,4 +42,4 @@ export class DesignModeTogglerComponent {
     set inDesignMode(value: boolean) {
         this.designModeService.setInDesignMode(value);
     };
-}
+}
\ No newline at end of file
diff --git a/src/app/admin/layout-edit/designModeToggler.html b/src/app/admin/layout-edit/designModeToggler.html
index 085482e..74037df 100644
--- a/src/app/admin/layout-edit/designModeToggler.html
+++ b/src/app/admin/layout-edit/designModeToggler.html
@@ -1,8 +1,8 @@
 <toggle-switch
     html="true"
     ng-model="ctrl.inDesignMode"
-    on-label="{{'designMode.toggle.ON' | translate}}"
-    off-label="{{'designMode.toggle.OFF' | translate}}"
+    on-label="{{ctrl.onLabel}}"
+    off-label="{{ctrl.offLabel}}"
     class="switch-small"
-    knob-label="{{ ctrl.icon + ('designMode.label' | translate) }}">
+    knob-label="{{ ctrl.getKnobLabel() }}">
 </toggle-switch>
\ No newline at end of file
diff --git a/src/app/admin/layout-edit/designModeToggler.scss b/src/app/admin/layout-edit/designModeToggler.scss
new file mode 100644
index 0000000..02753f9
--- /dev/null
+++ b/src/app/admin/layout-edit/designModeToggler.scss
@@ -0,0 +1,23 @@
+ul.nav > li.toggler-container {
+    position: relative;
+    padding-top: 12px;
+}
+
+body.noosfero-design-on {
+
+    div.content-wrapper {
+        opacity: 0.5;
+    }
+}
+
+
+
+noosfero-design-toggler .ats-switch .knob i {
+	color: #999999;
+}
+
+
+.design-toggle-icon {
+    margin-left: 3px;
+    margin-right: 3px;
+}
\ No newline at end of file
diff --git a/src/app/layout/scss/_layout.scss b/src/app/layout/scss/_layout.scss
index bc025cf..bbf5e2a 100644
--- a/src/app/layout/scss/_layout.scss
+++ b/src/app/layout/scss/_layout.scss
@@ -34,17 +34,4 @@
 	.main-box-body {
 		padding: 0 20px 20px 20px;
 	}
-}
-
-ul.nav > li.toggler-container {
-	position: relative;
-	padding-top: 12px;
-}
-
-.noosfero-main-toolbar {
-	padding: 5px;
-	@include make-row();
-	margin-left: 0px;
-	margin-right: 0px;
-	background-color: #edecec;
-}
+}
\ No newline at end of file
diff --git a/src/app/layout/scss/skins/_whbl.scss b/src/app/layout/scss/skins/_whbl.scss
index 2d42de2..6112db5 100644
--- a/src/app/layout/scss/skins/_whbl.scss
+++ b/src/app/layout/scss/skins/_whbl.scss
@@ -291,11 +291,7 @@ $whbl-font-color: #16191c;
 		background-color: #fff;
 	}
 
-	noosfero-design-toggler .ats-switch .knob i {
-		color: #999999;
-	}
-
-	.ats-switch .knob {
+    .ats-switch .knob {
 		padding-right: 15px;
 	}
 
diff --git a/src/app/profile/toolbar.html b/src/app/profile/toolbar.html
index 367573d..f08808a 100644
--- a/src/app/profile/toolbar.html
+++ b/src/app/profile/toolbar.html
@@ -1,4 +1,9 @@
 <div class="noosfero-main-toolbar" permission="vm.profile.permissions" permission-action="allow_edit">
-    <noosfero-design-toggler class="pull-right"></noosfero-design-toggler>
+    <noosfero-design-toggler
+       [icon-class]="'glyphicon glyphicon-wrench'"
+       [knob-label]="'designMode.label'     | translate"
+       [on-label]="'designMode.toggle.ON'   | translate"
+       [off-label]="'designMode.toggle.OFF' | translate"
+       class="pull-right"></noosfero-design-toggler>
 
 </div>
\ No newline at end of file
diff --git a/src/app/profile/toolbar.scss b/src/app/profile/toolbar.scss
new file mode 100644
index 0000000..b090f18
--- /dev/null
+++ b/src/app/profile/toolbar.scss
@@ -0,0 +1,7 @@
+.noosfero-main-toolbar {
+	padding: 5px;
+	@include make-row();
+	margin-left: 0px;
+	margin-right: 0px;
+	background-color: #edecec;
+}
\ No newline at end of file
--
libgit2 0.21.2