diff --git a/demo-shell-ng2/app/components/about/about.component.css b/demo-shell-ng2/app/components/about/about.component.css
new file mode 100644
index 0000000000..bafc1e6a63
--- /dev/null
+++ b/demo-shell-ng2/app/components/about/about.component.css
@@ -0,0 +1,3 @@
+.about-container {
+    padding: 10px;
+}
diff --git a/demo-shell-ng2/app/components/about/about.component.html b/demo-shell-ng2/app/components/about/about.component.html
index c0922f8141..556f7a350a 100644
--- a/demo-shell-ng2/app/components/about/about.component.html
+++ b/demo-shell-ng2/app/components/about/about.component.html
@@ -1,4 +1,4 @@
-<div style="padding: 10px">
+<div class="about-container">
     <h3>Packages</h3>
     <alfresco-datatable [data]="data"></alfresco-datatable>
 </div>
diff --git a/demo-shell-ng2/app/components/about/about.component.ts b/demo-shell-ng2/app/components/about/about.component.ts
index 4fba975fe8..a1766c5f30 100644
--- a/demo-shell-ng2/app/components/about/about.component.ts
+++ b/demo-shell-ng2/app/components/about/about.component.ts
@@ -22,7 +22,8 @@ import { LogService } from 'ng2-alfresco-core';
 
 @Component({
     selector: 'about-page',
-    templateUrl: './about.component.html'
+    templateUrl: './about.component.html',
+    styleUrls: ['./about.component.css']
 })
 export class AboutComponent implements OnInit {
 
diff --git a/demo-shell-ng2/app/components/files/files.component.css b/demo-shell-ng2/app/components/files/files.component.css
index cb4cb685aa..ce96c9eff8 100644
--- a/demo-shell-ng2/app/components/files/files.component.css
+++ b/demo-shell-ng2/app/components/files/files.component.css
@@ -15,3 +15,8 @@
 .error-message--text {
     color: #d50000;
 }
+
+.options-container {
+    width: 250px;
+    margin: 20px;
+}
diff --git a/demo-shell-ng2/app/components/files/files.component.html b/demo-shell-ng2/app/components/files/files.component.html
index 7d15d01ed5..8272c65e35 100644
--- a/demo-shell-ng2/app/components/files/files.component.html
+++ b/demo-shell-ng2/app/components/files/files.component.html
@@ -107,7 +107,7 @@
 
 <context-menu-holder></context-menu-holder>
 
-<p style="width:250px;margin: 20px;">
+<p class="options-container">
     <label for="switch-multiple-file" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
         <input type="checkbox" id="switch-multiple-file" class="mdl-switch__input" (change)="toggleMultipleFileUpload()" >
         <span class="mdl-switch__label">Multiple File Upload</span>
@@ -115,14 +115,14 @@
 </p>
 
 
-<p style="width:250px;margin: 20px;">
+<p class="options-container">
     <label for="switch-folder-upload" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
         <input type="checkbox" id="switch-folder-upload" class="mdl-switch__input" (change)="toggleFolder()">
         <span class="mdl-switch__label">Folder Upload</span>
     </label>
 </p>
 
-<p style="width:250px;margin: 20px;">
+<p class="options-container">
     <label for="switch-accepted-file-type" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
         <input type="checkbox" id="switch-accepted-file-type" class="mdl-switch__input" (change)="toggleAcceptedFilesType()">
         <span class="mdl-switch__label">Filter extension</span>
diff --git a/demo-shell-ng2/app/components/setting/setting.component.css b/demo-shell-ng2/app/components/setting/setting.component.css
index da6c349ed8..0e576c8af9 100644
--- a/demo-shell-ng2/app/components/setting/setting.component.css
+++ b/demo-shell-ng2/app/components/setting/setting.component.css
@@ -2,6 +2,7 @@
     width: 320px;
     height: 320px;
 }
+
 .setting-card > .mdl-card__title {
     color: #fff;
     background: bottom right 15% no-repeat #1fbcd2;
@@ -22,5 +23,9 @@
 }
 
 .icon-margin {
-     margin-right: 9px;
- }
+    margin-right: 9px;
+}
+
+.table-row {
+    display: table-row;
+}
diff --git a/demo-shell-ng2/app/components/setting/setting.component.html b/demo-shell-ng2/app/components/setting/setting.component.html
index 559566dc63..2184da7ff8 100644
--- a/demo-shell-ng2/app/components/setting/setting.component.html
+++ b/demo-shell-ng2/app/components/setting/setting.component.html
@@ -1,5 +1,5 @@
 <div class="setting-container">
-    <div style="display: table-row">
+    <div class="table-row">
         <div class="setting-card-padding"></div>
         <div class="setting-card mdl-card mdl-shadow--2dp">
             <div class="mdl-card__title mdl-card--expand">
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css
index 0f18f22972..ec0b172699 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.css
@@ -1,4 +1,7 @@
-.chart {display: block; width: 100%;}
+.chart {
+    display: block;
+    width: 100%;
+}
 
 .analytics-row__entry {
     cursor: pointer;
@@ -8,3 +11,16 @@
     margin: 20px 20px 20px 20px;
     float: right;
 }
+
+.full-width {
+    width: 100%
+}
+
+.partial-width {
+    width: 80%;
+    margin-left: 20px
+}
+
+.clear-both {
+    clear: both;
+}
diff --git a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html
index f9b420d372..215a487657 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/analytics-generator.component.html
@@ -7,7 +7,7 @@
             <i class="material-icons">{{report.icon}}</i>
         </button>
     </div>
-    <div style="clear: both"> </div>
+    <div class="clear-both"> </div>
     <div *ngFor="let report of reports; let idx = index">
         <div [ngSwitch]="report.type">
             <div *ngSwitchCase="'pie'">
@@ -29,7 +29,7 @@
                     <h4>{{report.title}}</h4>
                     <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                     <div [attr.id]="'chart-table-' + report.id" *ngIf="report.hasDatasets()">
-                        <table class="table table-responsive table-condensed" style="width: 80%;margin-left: 20px">
+                        <table class="table table-responsive table-condensed" class="partial-width">
                             <tr>
                                 <th *ngFor="let label of report.labels">{{label | translate}}</th>
                             </tr>
@@ -45,7 +45,7 @@
                     <h4>{{report.title}}</h4>
                     <div *ngIf="!report.hasDatasets()">{{'ANALYTICS.MESSAGES.NO-DATA-FOUND' | translate}}</div>
                     <div [attr.id]="'chart-master-detail-table-' + report.id" *ngIf="report.hasDatasets()">
-                        <table class="table table-responsive table-condensed" style="width: 100%">
+                        <table class="table table-responsive table-condensed" class="full-width">
                             <tr>
                                 <th *ngFor="let label of report.labels">{{label | translate}}</th>
                             </tr>
@@ -55,7 +55,7 @@
                         </table>
                     </div>
                     <div [attr.id]="'chart-master-detail-' + report.id" *ngIf="isShowDetails()">
-                        <table class="table table-responsive table-condensed" style="width: 100%">
+                        <table class="table table-responsive table-condensed" class="full-width">
                             <tr>
                                 <th *ngFor="let label of report.detailsTable.labels">{{label | translate}}</th>
                             </tr>
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.css b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.css
index 3e4f6952f3..e89482a3bb 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.css
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.css
@@ -17,3 +17,7 @@
 .number-widget__invalid .mdl-textfield__error {
     visibility: visible !important;
 }
+
+.dropdown-container {
+    margin-top: 30px;
+}
diff --git a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html
index 0a3668f160..0bd88dcb9a 100644
--- a/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html
+++ b/ng2-components/ng2-activiti-analytics/src/components/widgets/duration/duration.widget.html
@@ -12,10 +12,10 @@
         </div>
     </div>
     <div class="mdl-cell mdl-cell--6-col">
-        <div style="margin-top: 30px">
+        <div class="dropdown-container">
             <dropdown-widget [field]="duration" [group]="formGroup" [controllerName]="'timeType'"
                              [showDefaultOption]="false"
                              (fieldChanged)="calculateDuration()"></dropdown-widget>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.css b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.css
index 65aca84d10..03d3d17084 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.css
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.css
@@ -24,3 +24,11 @@
 .activiti-form-hide-button {
     display: none;
 }
+
+.activiti-debug-button {
+    float: right;
+}
+
+.activiti-task-title {
+    text-align: center
+}
diff --git a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.html b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.html
index 2b00b52c76..b9813ffa68 100644
--- a/ng2-components/ng2-activiti-form/src/components/activiti-form.component.html
+++ b/ng2-components/ng2-activiti-form/src/components/activiti-form.component.html
@@ -1,6 +1,6 @@
 <div>
     <div *ngIf="!hasForm()">
-        <h3 style="text-align: center">Please select a Task</h3>
+        <h3 class="activiti-task-title">Please select a Task</h3>
     </div>
     <div *ngIf="hasForm()">
         <div class="mdl-card mdl-shadow--2dp activiti-form-container {{form.className}}">
@@ -44,7 +44,7 @@ will be removed during future revisions
 -->
 <div  *ngIf="showDebugButton" class="activiti-form-debug-container">
 
-    <div style="float: right">
+    <div class="activiti-debug-button">
         <label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="switch-1" [class.is-checked]="debugMode">
             <input type="checkbox" id="switch-1" class="mdl-switch__input" [(ngModel)]="debugMode">
             <span class="mdl-switch__label"></span>
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
index 550a7c6a59..cd3d8b289a 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.css
@@ -221,3 +221,7 @@
     margin-top: 5px;
     display: block;
 }
+
+.alfresco-login__message{
+    color: blue;
+}
diff --git a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
index 1407b617e7..9248851fb4 100644
--- a/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
+++ b/ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.html
@@ -16,7 +16,7 @@
                 <div>
                     <div *ngIf="error" id="login-error" data-automation-id="login-error"
                          class="error mdl-card__supporting-text">{{errorMsg | translate }}</div>
-                    <div *ngIf="success" id="login-success" data-automation-id="login-success" class="mdl-card__supporting-text" style="color: blue;">{{'LOGIN.MESSAGES.LOGIN-SUCCESS' | translate }}</div>
+                    <div *ngIf="success" id="login-success" data-automation-id="login-success" class="mdl-card__supporting-text" class="alfresco-login__message">{{'LOGIN.MESSAGES.LOGIN-SUCCESS' | translate }}</div>
                 </div>
 
                 <!--USERNAME FIELD-->
diff --git a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css
index 2fdb761011..6226775cad 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.css
@@ -41,6 +41,7 @@
     text-align: center;
     width: 100%;
 }
+
 :host .truncate {
     margin-left: 0;
     white-space: nowrap;
@@ -48,11 +49,11 @@
     text-overflow: ellipsis;
 }
 
-:host .mdl-progress{
+:host .mdl-progress {
     width: 150px;
 }
 
-@media (max-device-width: 360px){
+@media (max-device-width: 360px) {
     .truncate {
         max-width: 50px;
         margin-left: 0px;
@@ -63,6 +64,7 @@
     .truncate {
         width: 60px;
     }
+
     .mdl-progress {
         width: 60px;
     }
@@ -91,3 +93,11 @@
         display: table-cell;
     }
 }
+
+.full-width {
+    width: 100%;
+}
+
+.no-width {
+    width: 0%;
+}
diff --git a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html
index 051cf209a5..24b3b87887 100644
--- a/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html
+++ b/ng2-components/ng2-alfresco-upload/src/components/file-uploading-list.component.html
@@ -18,8 +18,8 @@
         <td class="mdl-data-table__cell--non-numeric">
             <div class="mdl-progress mdl-js-progress is-upgraded" id="{{file.id}}">
                 <div class="progressbar bar bar1" attr.data-automation-id="dialog_progress_{{file.name}}" [style.width.%]="file.progress.percent"></div>
-                <div class="bufferbar bar bar2" style="width: 100%;"></div>
-                <div class="auxbar bar bar3" style="width: 0%;"></div>
+                <div class="bufferbar bar bar2" class="full-width"></div>
+                <div class="auxbar bar bar3" class="no-width"></div>
             </div>
         </td>
         <td class="mdl-data-table__cell--non-numeric mdl-cell--hide-phone size-column" attr.data-automation-id="{{file.name}}_filesize">{{file.size}}</td>