diff --git a/demo-shell/src/app/components/login/login.component.css b/demo-shell/src/app/components/login/login.component.css
deleted file mode 100644
index db7a097696..0000000000
--- a/demo-shell/src/app/components/login/login.component.css
+++ /dev/null
@@ -1,40 +0,0 @@
-.setting-button {
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    z-index: 1;
-    background-color: rgb(68,138,255);
-    color: rgb(255,255,255);
-}
-
-.settings {
-    border-radius: 8px;
-    position: absolute;
-    background-color: papayawhip;
-    color: cadetblue;
-    left: 10px;
-    top: 10px;
-    z-index: 1;
-}
-
-.toggle {
-    width: 190px;
-    margin: 5px;
-    padding: 5px;
-}
-
-@media (min-width: 721px) {
-    .mobile-settings {
-        display: none;
-    }
-}
-
-@media (max-width: 720px) {
-    .settings {
-        display: none;
-    }
-}
-
-.settings ::ng-deep .mat-slide-toggle-thumb-container {
-    cursor: pointer;
-}
diff --git a/demo-shell/src/app/components/login/login.component.html b/demo-shell/src/app/components/login/login.component.html
index c39dda7011..0f8e36e545 100644
--- a/demo-shell/src/app/components/login/login.component.html
+++ b/demo-shell/src/app/components/login/login.component.html
@@ -41,7 +41,7 @@
 
 <!--SETTING BUTTON-->
 
-<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings">
+<a mat-fab class="setting-button" data-automation-id="settings" href="" routerLink="/settings" color="accent">
     <mat-icon>settings</mat-icon>
 </a>
 
@@ -92,5 +92,7 @@
                 {{ 'LOGIN.LOGIN_FOOTER'| translate }}
             </mat-slide-toggle>
         </p>
+        <button type="button" mat-raised-button color="accent" class="mobile-setting-button" routerLink="/settings" data-automation-id="settings">{{ 'APP_LAYOUT.SETTINGS'| translate }}</button>
+
     </div>
 </adf-login>
diff --git a/demo-shell/src/app/components/login/login.component.scss b/demo-shell/src/app/components/login/login.component.scss
new file mode 100644
index 0000000000..6a0b01043d
--- /dev/null
+++ b/demo-shell/src/app/components/login/login.component.scss
@@ -0,0 +1,52 @@
+@mixin adf-login-component-theme($theme) {
+    .setting-button.mat-fab.mat-accent {
+        position: absolute;
+        right: 10px;
+        top: 10px;
+        z-index: 1;
+
+    }
+
+    .settings {
+        border-radius: 8px;
+        position: absolute;
+        background-color: papayawhip;
+        color: cadetblue;
+        left: 10px;
+        top: 10px;
+        z-index: 1;
+    }
+
+    .toggle {
+        width: 190px;
+        margin: 5px;
+        padding: 5px;
+    }
+
+    .mobile-settings, .mobile-setting-button {
+        display: none;
+    }
+
+    @media screen and ($mat-small) {
+        .settings, .setting-button.mat-fab.mat-accent  {
+            display: none;
+        }
+
+        .mobile-settings, .mobile-setting-button {
+            display: block;
+        }
+
+        .mobile-setting-button {
+            width: 100%;
+        }
+
+        .mobile-settings {
+            padding-bottom: 20px;
+            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    .settings ::ng-deep .mat-slide-toggle-thumb-container {
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/demo-shell/src/app/components/login/login.component.ts b/demo-shell/src/app/components/login/login.component.ts
index 21b80183bf..40d176b55e 100644
--- a/demo-shell/src/app/components/login/login.component.ts
+++ b/demo-shell/src/app/components/login/login.component.ts
@@ -23,7 +23,7 @@ import { LogService, StorageService } from '@alfresco/adf-core';
 @Component({
     selector: 'app-login',
     templateUrl: './login.component.html',
-    styleUrls: ['./login.component.css']
+    styleUrls: ['./login.component.scss']
 })
 export class LoginComponent implements OnInit {
 
diff --git a/demo-shell/src/custom-style-dev.scss b/demo-shell/src/custom-style-dev.scss
index 5f4b0c80bf..501f59b898 100644
--- a/demo-shell/src/custom-style-dev.scss
+++ b/demo-shell/src/custom-style-dev.scss
@@ -1,6 +1,6 @@
 @import './app/components/app-layout/app-layout.component.scss';
 @import './app/components/files/files.component.scss';
-
+@import './app/components/login/login.component.scss';
 
 @import 'content-services/styles/index';
 @import 'process-services/styles/index';
@@ -19,6 +19,7 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 @include angular-material-theme($theme);
 @include adf-app-layout-theme($theme);
 @include adf-file-component-theme($theme);
+@include adf-login-component-theme($theme);
 
 @include adf-content-services-theme($theme);
 @include adf-process-services-theme($theme);
diff --git a/demo-shell/src/custom-style.scss b/demo-shell/src/custom-style.scss
index 82a08a470f..b48f2b1ba1 100644
--- a/demo-shell/src/custom-style.scss
+++ b/demo-shell/src/custom-style.scss
@@ -1,5 +1,6 @@
 @import './app/components/app-layout/app-layout.component.scss';
 @import './app/components/files/files.component.scss';
+@import './app/components/login/login.component.scss';
 
 @import '~@alfresco/adf-content-services/theming';
 @import '~@alfresco/adf-process-services/theming';
@@ -18,6 +19,7 @@ $theme:   mat-light-theme($primary, $accent, $warn);
 @include angular-material-theme($theme);
 @include adf-app-layout-theme($theme);
 @include adf-file-component-theme($theme);
+@include adf-login-component-theme($theme);
 
 @include adf-content-services-theme($theme);
 @include adf-process-services-theme($theme);