diff --git a/demo-shell/src/app/components/card-view/card-view.component.html b/demo-shell/src/app/components/card-view/card-view.component.html
index e9800ff9bd..03a2cb9566 100644
--- a/demo-shell/src/app/components/card-view/card-view.component.html
+++ b/demo-shell/src/app/components/card-view/card-view.component.html
@@ -1,17 +1,15 @@
 <div class="app-main-content">
     <h1>CardView Component</h1>
 
-    <mat-card class="app-card-view">
-        <adf-card-view
-            [properties]="properties"
-            [editable]="isEditable"
-            [displayClearAction]="showClearDateAction"
-            [displayNoneOption]="showNoneOption"
-            [displayLabelForChips]="showLabelForChips">
-        </adf-card-view>
-    </mat-card>
+    <adf-card-view
+        [properties]="properties"
+        [editable]="isEditable"
+        [displayClearAction]="showClearDateAction"
+        [displayNoneOption]="showNoneOption"
+        [displayLabelForChips]="showLabelForChips">
+    </adf-card-view>
 
-    <div class="app-console" #console>
+    <div class="app-console">
         <h3>Changes log:</h3>
         <p *ngFor="let log of logs">{{ log }}</p>
     </div>
diff --git a/demo-shell/src/app/components/card-view/card-view.component.scss b/demo-shell/src/app/components/card-view/card-view.component.scss
index 927bbee58e..2f736a1e94 100644
--- a/demo-shell/src/app/components/card-view/card-view.component.scss
+++ b/demo-shell/src/app/components/card-view/card-view.component.scss
@@ -2,7 +2,7 @@
     padding: 0 15px;
 }
 
-.app-card-view {
+adf-card-view {
     width: 30%;
     display: inline-block;
 }
diff --git a/demo-shell/src/app/components/card-view/card-view.component.ts b/demo-shell/src/app/components/card-view/card-view.component.ts
index e89adf761e..0d21723a6c 100644
--- a/demo-shell/src/app/components/card-view/card-view.component.ts
+++ b/demo-shell/src/app/components/card-view/card-view.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ElementRef, ViewChild, OnDestroy } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import {
     CardViewTextItemModel,
     CardViewDateItemModel,
@@ -39,9 +39,6 @@ import { takeUntil } from 'rxjs/operators';
     styleUrls: ['./card-view.component.scss']
 })
 export class CardViewComponent implements OnInit, OnDestroy {
-
-    @ViewChild('console', { static: true }) console: ElementRef;
-
     isEditable = true;
     properties: any;
     logs: string[];
@@ -51,8 +48,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
 
     private onDestroy$ = new Subject<boolean>();
 
-    constructor(private cardViewUpdateService: CardViewUpdateService,
-                private decimalNumberPipe: DecimalNumberPipe) {
+    constructor(private cardViewUpdateService: CardViewUpdateService, private decimalNumberPipe: DecimalNumberPipe) {
         this.logs = [];
         this.createCard();
     }
@@ -62,9 +58,7 @@ export class CardViewComponent implements OnInit, OnDestroy {
     }
 
     ngOnInit() {
-        this.cardViewUpdateService.itemUpdated$
-            .pipe(takeUntil(this.onDestroy$))
-            .subscribe(this.onItemChange.bind(this));
+        this.cardViewUpdateService.itemUpdated$.pipe(takeUntil(this.onDestroy$)).subscribe(this.onItemChange.bind(this));
     }
 
     ngOnDestroy() {
@@ -192,20 +186,29 @@ export class CardViewComponent implements OnInit, OnDestroy {
             }),
             new CardViewKeyValuePairsItemModel({
                 label: 'CardView Key-Value Pairs Item',
-                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
+                value: [
+                    { name: 'hey', value: 'you' },
+                    { name: 'hey', value: 'you' }
+                ],
                 key: 'key-value-pairs',
                 editable: this.isEditable
             }),
             new CardViewKeyValuePairsItemModel({
                 label: 'CardView Key-Value Pairs Item',
-                value: [{ name: 'hey', value: 'you' }, { name: 'hey', value: 'you' }],
+                value: [
+                    { name: 'hey', value: 'you' },
+                    { name: 'hey', value: 'you' }
+                ],
                 key: 'key-value-pairs',
                 editable: false
             }),
             new CardViewSelectItemModel({
                 label: 'CardView Select Item',
                 value: 'one',
-                options$: of([{ key: 'one', label: 'One' }, { key: 'two', label: 'Two' }]),
+                options$: of([
+                    { key: 'one', label: 'One' },
+                    { key: 'two', label: 'Two' }
+                ]),
                 key: 'select',
                 editable: this.isEditable
             }),
@@ -253,7 +256,6 @@ export class CardViewComponent implements OnInit, OnDestroy {
         }
 
         this.logs.push(`[${notification.target.label}] - ${value}`);
-        this.console.nativeElement.scrollTop = this.console.nativeElement.scrollHeight;
     }
 
     toggleEditable() {
diff --git a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
index 8f353b4658..62f74a56fc 100644
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
@@ -16,7 +16,8 @@
 <mat-slide-toggle [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
     Display process details on process click
 </mat-slide-toggle>
-<mat-form-field data-automation-id="selectionMode">
+
+<mat-form-field data-automation-id="selectionMode" class="adf-cloud-settings-selection-mode">
     <mat-label>Selection Mode</mat-label>
     <mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
         <mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
@@ -24,32 +25,29 @@
         </mat-option>
     </mat-select>
 </mat-form-field>
-<mat-card *ngIf="actionMenu || contextMenu">
-    <mat-card-header>
-      <mat-card-title>Add Action</mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-        <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
-            <mat-form-field>
-                <input matInput formControlName="key" placeholder="Key">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput formControlName="title" placeholder="Title">
-            </mat-form-field>
-            <mat-form-field>
-                <input matInput formControlName="icon" placeholder="Icon">
-            </mat-form-field>
-            <mat-checkbox formControlName="visible">Visible</mat-checkbox>
-            <mat-checkbox formControlName="disabled">Disable</mat-checkbox>
-            <button mat-raised-button (click)="addAction()">Add</button>
-        </form>
-        <div *ngIf="actions.length > 0">
-            <mat-chip-list>
-                <mat-chip *ngFor="let action of actions" [removable]="true">
-                    {{action.title}}
-                    <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
-                </mat-chip>
-            </mat-chip-list>
-        </div>
-    </mat-card-content>
-</mat-card>
+
+<div class="app-cloud-actions" *ngIf="actionMenu || contextMenu">
+    <h2>Add Action</h2>
+    <form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="key" placeholder="Key">
+        </mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="title" placeholder="Title">
+        </mat-form-field>
+        <mat-form-field class="app-cloud-settings-form-input">
+            <input matInput formControlName="icon" placeholder="Icon">
+        </mat-form-field>
+        <mat-checkbox formControlName="visible">Visible</mat-checkbox>
+        <mat-checkbox formControlName="disabled">Disable</mat-checkbox>
+        <button mat-raised-button (click)="addAction()">Add</button>
+    </form>
+    <div *ngIf="actions.length > 0">
+        <mat-chip-list>
+            <mat-chip *ngFor="let action of actions" [removable]="true">
+                {{action.title}}
+                <mat-icon matChipRemove (click)="removeAction(action)">cancel</mat-icon>
+            </mat-chip>
+        </mat-chip-list>
+    </div>
+</div>
diff --git a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
index 06a13066f6..b572aa69c6 100644
--- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
+++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
@@ -4,7 +4,11 @@ app-cloud-settings {
     display: flex;
     flex: 1;
 
-    mat-form-field {
+    .app-cloud-actions {
+        background-color: white;
+    }
+
+    .adf-cloud-settings-selection-mode {
         max-width: 200px;
     }
 
@@ -13,13 +17,9 @@ app-cloud-settings {
         place-content: center space-around;
         align-items: center;
 
-        mat-form-field {
+        .app-cloud-settings-form-input {
             flex: 1 1 100%;
             max-width: 23%;
         }
-
-        mat-form-field, mat-checkbox {
-            margin-right: 20px;
-        }
     }
 }
diff --git a/demo-shell/src/app/components/file-view/file-view.component.html b/demo-shell/src/app/components/file-view/file-view.component.html
index ebb5ce4369..1fab5fc9ae 100644
--- a/demo-shell/src/app/components/file-view/file-view.component.html
+++ b/demo-shell/src/app/components/file-view/file-view.component.html
@@ -110,14 +110,10 @@
         </adf-info-drawer-tab>
 
         <adf-info-drawer-tab label="Versions">
-            <mat-card>
-                <mat-card-content>
-                    <adf-version-manager [node]="node"
-                                         (uploadError)="onUploadError($event)"
-                                         (viewVersion)="onViewVersion($event)">
-                    </adf-version-manager>
-                </mat-card-content>
-            </mat-card>
+            <adf-version-manager [node]="node"
+                                 (uploadError)="onUploadError($event)"
+                                 (viewVersion)="onViewVersion($event)">
+            </adf-version-manager>
         </adf-info-drawer-tab>
     </adf-info-drawer>
 </ng-template>
diff --git a/demo-shell/src/app/components/settings/host-settings.component.html b/demo-shell/src/app/components/settings/host-settings.component.html
index 74162f4cef..3eaa05348d 100644
--- a/demo-shell/src/app/components/settings/host-settings.component.html
+++ b/demo-shell/src/app/components/settings/host-settings.component.html
@@ -1,120 +1,106 @@
 <div class="adf-setting-container">
-    <mat-card class="adf-setting-card">
-        <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
-            <mat-form-field *ngIf="showSelectProviders">
-                <mat-select  id="adf-provider-selector" [formControl]="providersControl">
-                    <mat-option *ngFor="let provider of providers" [value]="provider">
-                        {{ provider }}
-                    </mat-option>
-                </mat-select>
+    <form id="host-form" [formGroup]="form" (submit)="onSubmit(form.value)" (keydown)="keyDownFunction($event)">
+        <mat-form-field *ngIf="showSelectProviders">
+            <mat-select id="adf-provider-selector" [formControl]="providersControl">
+                <mat-option *ngFor="let provider of providers" [value]="provider">
+                    {{ provider }}
+                </mat-option>
+            </mat-select>
+        </mat-form-field>
+
+        <div class="adf-authentication-type">
+            <div>Authentication type:</div>
+            <mat-radio-group formControlName="authType" class="adf-authentication-radio-group">
+                <mat-radio-button value="BASIC" class="adf-authentication-radio-button">Basic Authentication</mat-radio-button>
+                <mat-radio-button value="OAUTH" class="adf-authentication-radio-button">SSO</mat-radio-button>
+            </mat-radio-group>
+        </div>
+
+        <mat-form-field *ngIf="isALL() || isECM()" class="adf-full-width">
+            <mat-label>Content Services URL</mat-label>
+            <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" id="ecmHost" [placeholder]="PLACEHOLDER_URL">
+            <mat-error *ngIf="ecmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
+            <mat-error *ngIf="ecmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+        </mat-form-field>
+
+        <mat-form-field *ngIf="isALL() || isBPM()" class="adf-full-width">
+            <mat-label>Process Services URL</mat-label>
+            <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" id="bpmHost" [placeholder]="PLACEHOLDER_URL">
+            <mat-error *ngIf="bpmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
+            <mat-error *ngIf="bpmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+        </mat-form-field>
+
+        <mat-form-field *ngIf="isOAUTH()" class="adf-full-width">
+            <mat-label>Identity Host</mat-label>
+            <input matInput name="identityHost" id="identityHost" formControlName="identityHost" [placeholder]="PLACEHOLDER_URL">
+            <mat-error *ngIf="identityHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
+            <mat-error *ngIf="identityHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+        </mat-form-field>
+
+        <div *ngIf="isOAUTH()" formGroupName="oauthConfig">
+            <mat-form-field class="adf-full-width">
+                <mat-label>Auth Host</mat-label>
+                <input matInput name="host" id="oauthHost" formControlName="host" [placeholder]="PLACEHOLDER_URL">
+                <mat-error *ngIf="host.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
+                <mat-error *ngIf="host.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
             </mat-form-field>
 
-            <div class="adf-authentication-type">
-                <div>Authentication type :</div>
-                <mat-radio-group formControlName="authType" >
-                <mat-radio-button value="BASIC">Basic Authentication</mat-radio-button>
-                <mat-radio-button value="OAUTH">SSO</mat-radio-button>
-            </mat-radio-group>
-            </div>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Client ID</mat-label>
+                <input matInput name="clientId" id="clientId" formControlName="clientId">
+                <mat-error *ngIf="clientId.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+            </mat-form-field>
 
-            <ng-container *ngIf="isALL() || isECM()">
-                <mat-card-content>
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Content Services URL</mat-label>
-                        <input matInput [formControl]="ecmHost" data-automation-id="ecmHost" type="text" id="ecmHost" [placeholder]="PLACEHOLDER_URL">
-                        <mat-error *ngIf="ecmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
-                        <mat-error *ngIf="ecmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-                </mat-card-content>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Scope Id</mat-label>
+                <input matInput name="Scope" formControlName="scope">
+                <mat-error *ngIf="scope.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+            </mat-form-field>
+
+            <mat-form-field class="adf-full-width">
+                <mat-label>Secret</mat-label>
+                <input matInput name="Secret" formControlName="secret">
+                <mat-error *ngIf="secret.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+            </mat-form-field>
+
+            <mat-label>Silent Login</mat-label>
+            <mat-slide-toggle class="adf-full-width" name="silentLogin" formControlName="silentLogin">
+            </mat-slide-toggle>
+
+            <mat-label>Implicit Flow</mat-label>
+            <mat-slide-toggle class="adf-full-width" name="implicitFlow" formControlName="implicitFlow">
+            </mat-slide-toggle>
+
+            <ng-container *ngIf="supportsCodeFlow">
+                <mat-label>Code Flow</mat-label>
+                <mat-slide-toggle class="adf-full-width" name="codeFlow" formControlName="codeFlow">
+                </mat-slide-toggle>
             </ng-container>
 
-            <ng-container *ngIf="isALL() || isBPM()">
-                <mat-card-content>
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Process Services URL</mat-label>
-                        <input matInput [formControl]="bpmHost" data-automation-id="bpmHost" type="text" id="bpmHost" [placeholder]="PLACEHOLDER_URL">
-                        <mat-error *ngIf="bpmHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
-                        <mat-error *ngIf="bpmHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-                </mat-card-content>
-            </ng-container>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Redirect URI</mat-label>
+                <input matInput  name="redirectUri" formControlName="redirectUri">
+                <mat-error *ngIf="redirectUri.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
+            </mat-form-field>
 
-            <ng-container *ngIf="isOAUTH()">
-                <mat-card-content>
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Identity Host</mat-label>
-                        <input matInput name="identityHost" id="identityHost" formControlName="identityHost" [placeholder]="PLACEHOLDER_URL">
-                        <mat-error *ngIf="identityHost.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
-                        <mat-error *ngIf="identityHost.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-                </mat-card-content>
-            </ng-container>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Redirect URI Logout</mat-label>
+                <input id="logout-url" matInput name="redirectUriLogout" formControlName="redirectUriLogout">
+            </mat-form-field>
 
-            <ng-container *ngIf="isOAUTH()">
-                <div formGroupName="oauthConfig">
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Auth Host</mat-label>
-                        <input matInput name="host" id="oauthHost" formControlName="host" [placeholder]="PLACEHOLDER_URL">
-                        <mat-error *ngIf="host.hasError('pattern')">{{ ERR_INVALID_URL }}</mat-error>
-                        <mat-error *ngIf="host.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
+            <mat-form-field class="adf-full-width">
+                <mat-label>Public urls silent Login</mat-label>
+                <input id="public-url" matInput name="publicUrls" formControlName="publicUrls">
+            </mat-form-field>
+        </div>
 
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Client ID</mat-label>
-                        <input matInput name="clientId" id="clientId" formControlName="clientId">
-                        <mat-error *ngIf="clientId.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Scope Id</mat-label>
-                        <input matInput name="Scope" formControlName="scope">
-                        <mat-error *ngIf="scope.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Secret</mat-label>
-                        <input matInput name="Secret" formControlName="secret">
-                        <mat-error *ngIf="secret.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-
-                    <mat-label>Silent Login</mat-label>
-                    <mat-slide-toggle class="adf-full-width" name="silentLogin" formControlName="silentLogin">
-                    </mat-slide-toggle>
-
-                    <mat-label>Implicit Flow</mat-label>
-                    <mat-slide-toggle class="adf-full-width" name="implicitFlow" formControlName="implicitFlow">
-                    </mat-slide-toggle>
-
-                    <ng-container *ngIf="supportsCodeFlow">
-                        <mat-label>Code Flow</mat-label>
-                        <mat-slide-toggle class="adf-full-width" name="codeFlow" formControlName="codeFlow">
-                        </mat-slide-toggle>
-                    </ng-container>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Redirect URI</mat-label>
-                        <input matInput  name="redirectUri" formControlName="redirectUri">
-                        <mat-error *ngIf="redirectUri.hasError('required')">{{ ERR_REQUIRED }}</mat-error>
-                    </mat-form-field>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Redirect URI Logout</mat-label>
-                        <input id="logout-url" matInput name="redirectUriLogout" formControlName="redirectUriLogout">
-                    </mat-form-field>
-
-                    <mat-form-field class="adf-full-width">
-                        <mat-label>Public urls silent Login</mat-label>
-                        <input id="public-url" matInput name="publicUrls" formControlName="publicUrls">
-                    </mat-form-field>
-
-                </div>
-            </ng-container>
-            <mat-card-actions align="end">
-                <button mat-button (click)="onCancel()">Back</button>
-                <button type="submit" class="adf-login-button" mat-button
-                        color="primary" data-automation-id="settings-apply-button"
-                        [disabled]="!form.valid">Apply</button>
-            </mat-card-actions>
-        </form>
-    </mat-card>
+        <div class="adf-host-settings-actions">
+            <button mat-button (click)="onCancel()">Back</button>
+            <button type="submit"
+                    mat-button
+                    color="primary"
+                    data-automation-id="settings-apply-button"
+                    [disabled]="!form.valid">Apply</button>
+        </div>
+    </form>
 </div>
diff --git a/demo-shell/src/app/components/settings/host-settings.component.scss b/demo-shell/src/app/components/settings/host-settings.component.scss
index 724324270a..e2715b668f 100644
--- a/demo-shell/src/app/components/settings/host-settings.component.scss
+++ b/demo-shell/src/app/components/settings/host-settings.component.scss
@@ -3,11 +3,26 @@
     min-height: 100%;
     align-items: center;
 
+    .adf-host-settings-actions {
+        text-align: end;
+    }
+
     .adf-authentication-type {
         margin-bottom: 20px;
         margin-top: 10px;
     }
 
+    .adf-authentication-radio-group {
+        display: flex;
+        flex-direction: column;
+        margin: 15px 0;
+        align-items: flex-start;
+    }
+
+    .adf-authentication-radio-button {
+        margin: 5px;
+    }
+
     .adf-setting-container {
         width: 800px;
         display: table;