diff --git a/demo-shell-ng2/app/components/login/login-demo.component.css b/demo-shell-ng2/app/components/login/login-demo.component.css
new file mode 100644
index 0000000000..e0d26ce54f
--- /dev/null
+++ b/demo-shell-ng2/app/components/login/login-demo.component.css
@@ -0,0 +1,10 @@
+.setting {
+    border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 10px;  z-index: 1;
+}
+.banned{
+    width:130px;margin: 10px;
+}
+
+.toggle {
+    width:120px;margin: 20px;
+}
\ No newline at end of file
diff --git a/demo-shell-ng2/app/components/login/login-demo.component.html b/demo-shell-ng2/app/components/login/login-demo.component.html
index bf8b9a4d95..dbc7ee20ca 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.html
+++ b/demo-shell-ng2/app/components/login/login-demo.component.html
@@ -1,17 +1,17 @@
-<div style="border-radius: 8px; position: absolute; background-color: papayawhip; color: cadetblue; left: 10px; top: 10px; z-index: 1;">
-    <p style="width:120px;margin: 20px;">
+<div class="setting">
+    <p class="toggle">
         <label for="switch1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
             <input type="checkbox" id="switch1" class="mdl-switch__input" checked (click)="toggleECM(ecm.checked)" #ecm>
             <span class="mdl-switch__label">ECM</span>
         </label>
     </p>
-    <p style="width:120px;margin: 20px;">
+    <p class="toggle">
         <label for="switch2" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
             <input type="checkbox" id="switch2" class="mdl-switch__input"  (click)="toggleBPM(bpm.checked)" #bpm>
             <span class="mdl-switch__label">BPM</span>
         </label>
     </p>
-    <p style="width:130px;margin: 10px;">
+    <p class="banned">
         <label for="blacklistusername">Banned username</label><br>
         <input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername" />
     </p>
diff --git a/demo-shell-ng2/app/components/login/login-demo.component.ts b/demo-shell-ng2/app/components/login/login-demo.component.ts
index adf98319fa..693bcbcb1b 100644
--- a/demo-shell-ng2/app/components/login/login-demo.component.ts
+++ b/demo-shell-ng2/app/components/login/login-demo.component.ts
@@ -26,6 +26,7 @@ declare let __moduleName: string;
     moduleId: __moduleName,
     selector: 'login-demo',
     templateUrl: './login-demo.component.html',
+    styleUrls: ['./login-demo.component.css'],
     directives: [ROUTER_DIRECTIVES, AlfrescoLoginComponent],
     pipes: []
 })