diff --git a/src/core/components/user-avatar/user-avatar.scss b/src/core/components/user-avatar/user-avatar.scss
index 5c41f6ca2..cf9c7a7df 100644
--- a/src/core/components/user-avatar/user-avatar.scss
+++ b/src/core/components/user-avatar/user-avatar.scss
@@ -45,7 +45,6 @@
         display: block;
 
         img {
-            padding: 4px;
             border-radius: 50%;
         }
     }
diff --git a/src/core/features/login/components/login-methods/login-methods.html b/src/core/features/login/components/login-methods/login-methods.html
index 3ce4e3fa9..e553ef901 100644
--- a/src/core/features/login/components/login-methods/login-methods.html
+++ b/src/core/features/login/components/login-methods/login-methods.html
@@ -1,6 +1,5 @@
-<div *ngIf="loginMethods.length || identityProviders.length || showScanQR"
-    class="ion-text-center ion-padding core-login-site-qrcode-separator">
-    {{ 'core.login.or' | translate }}
+<div *ngIf="loginMethods.length || identityProviders.length || showScanQR" class="ion-text-center ion-padding core-login-methods-separator">
+    <span>{{ 'core.login.or' | translate }}</span>
 </div>
 
 <div class="core-login-methods" *ngIf="loginMethods.length">
@@ -19,12 +18,8 @@
 </ng-container>
 
 <!-- Identity providers. -->
-<ion-list *ngIf="identityProviders.length" class="ion-padding-top core-login-identity-providers">
-    <ion-item class="ion-text-wrap">
-        <ion-label>
-            <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
-        </ion-label>
-    </ion-item>
+<ion-list *ngIf="identityProviders.length" class="core-login-identity-providers">
+    <h2 class="item-heading">{{ 'core.login.potentialidps' | translate }}</h2>
     <ion-button [fill]="'outline'" *ngFor="let provider of identityProviders" class="ion-text-wrap ion-margin core-oauth-provider"
         (click)="oauthClicked(provider)" [attr.aria-label]="provider.name" expand="block">
         <img *ngIf="provider.iconurl" [src]="provider.iconurl" alt="" width="32" height="32" slot="start" aria-hidden="true">
diff --git a/src/core/features/login/lang.json b/src/core/features/login/lang.json
index 7744cb51c..5d77bdad5 100644
--- a/src/core/features/login/lang.json
+++ b/src/core/features/login/lang.json
@@ -85,7 +85,7 @@
     "onboardingprovidefeedback": "Provide timely feedback",
     "onboardingtoconnect": "To connect to the Moodle App you'll need a Moodle site",
     "onboardingwelcome": "Welcome to the Moodle App!",
-    "or": "OR",
+    "or": "Or",
     "password": "Password",
     "passwordforgotten": "Forgotten password",
     "passwordforgotteninstructions2": "To reset your password, submit your username or your email address below. If we can find you in the database, an email will be sent to your email address, with instructions how to get access again.",
diff --git a/src/core/features/login/login.scss b/src/core/features/login/login.scss
index de84e1041..785732e0a 100644
--- a/src/core/features/login/login.scss
+++ b/src/core/features/login/login.scss
@@ -16,10 +16,6 @@
         }
     }
 
-    form div {
-        color: var(--color);
-    }
-
     ion-button.core-button-as-link {
         --color: var(--core-login-text-color);
         text-decoration-color: var(--core-login-text-color);
@@ -29,43 +25,73 @@
         }
     }
 
-    form .item.item-input {
-        margin-bottom: 16px;
+
+
+    .core-login-reconnect-warning {
+        margin: 0px 0px 32px 0px;
     }
 
-    form .item,
-    form .item ion-label {
-        --background: var(--core-login-input-background);
-        --color: var(--core-login-input-color);
-    }
+    .core-login-info-box {
+        margin-bottom: 32px;
 
-    .core-login-site-logo img {
-        max-width: 100%;
-    }
+        .core-login-site {
+            .core-login-site-logo {
+                width: 90%;
+                max-width: 300px;
+                margin: 0px auto;
 
-    .core-sitename + .core-siteurl {
-        margin-top: 0;
-    }
+                img {
+                    max-width: 100%;
+                    max-height: 104px;
+                }
+            }
 
-    .core-sitename {
-        font-size: 1.2rem;
-        margin-bottom: 0;
-    }
+            .core-sitename {
+                font-size: 1.2rem;
+                margin-bottom: 8px;
+            }
 
-    .core-login-site-logo {
-        width: 90%;
-        max-width: 300px;
-        margin: 5px auto;
-    }
+            .core-siteurl {
+                margin-top: 8px;
+                margin-bottom: 0px;
+            }
+        }
 
-    .core-login-forgotten-password {
-        text-decoration: underline;
+        .core-login-site + .core-login-user {
+            margin-top: 24px;
+        }
     }
 
     core-user-avatar.large-avatar {
         --core-avatar-size: var(--core-large-avatar-size);
     }
 
+    .core-login-fullname {
+        margin-top: 8px;
+        margin-bottom: 0px;
+    }
+
+    .core-login-methods {
+        form .item.item-input {
+            margin-bottom: 16px;
+        }
+
+        form .item,
+        form .item ion-label {
+            --background: var(--core-login-input-background);
+            --color: var(--core-login-input-color);
+        }
+    }
+
+    ion-button {
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+
+    .core-login-forgotten-password {
+        text-decoration: underline;
+    }
+
     @if ($core-login-hide-forgot-password) {
         .core-login-forgotten-password {
             display: none;
@@ -93,15 +119,59 @@
         }
     }
 
+    .core-login-methods-separator {
+        position: relative;
+        padding: 8px 0;
+
+        span {
+            background: var(--core-login-background);
+            padding: 0 8px;
+        }
+
+        &::before {
+            height: 1px;
+            position: absolute;
+            top: 50%;
+            left: 0px;
+            right: 0px;
+            border-bottom: 1px solid var(--gray-300);
+            content: "";
+            z-index: -1;
+        }
+    }
+
+
     @if ($core-login-hide-qrcode) {
         .core-login-site-qrcode,
-        .core-login-site-qrcode-separator {
+        .core-login-methods-separator {
             display: none;
         }
     }
 
+    .core-login-login-button {
+        margin-top: 32px;
+    }
+
+    .core-login-login-inbrowser-button {
+        margin-bottom: 8px;
+    }
+
     p.core-login-inbrowser {
         font-size: 12px;
+        margin-top: 8px;
+        margin-bottom: 8px;
+    }
+
+    .core-login-sign-up {
+        margin-top: 8px;
+        border-top: 1px solid var(--gray-300);
+    }
+
+    .core-login-identity-providers h2,
+    .core-login-sign-up h2 {
+        margin-top: 16px;
+        margin-bottom: 8px;
+        font-size: 16px;
     }
 
 }
diff --git a/src/core/features/login/pages/credentials/credentials.html b/src/core/features/login/pages/credentials/credentials.html
index 93554e1f5..8ba3874ff 100644
--- a/src/core/features/login/pages/credentials/credentials.html
+++ b/src/core/features/login/pages/credentials/credentials.html
@@ -20,79 +20,82 @@
 </ion-header>
 <ion-content class="ion-padding limited-width">
     <core-loading [hideUntil]="pageLoaded">
-        <div class="ion-text-wrap ion-text-center ion-margin-bottom">
-            <div class="core-login-site-logo">
-                <!-- Show site logo or a default image. -->
-                <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
-                <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+        <div class="ion-text-wrap ion-text-center core-login-info-box">
+            <div class="core-login-site">
+                <div class="core-login-site-logo">
+                    <!-- Show site logo or a default image. -->
+                    <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" alt="" onError="this.src='assets/img/login_logo.png'">
+                    <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+                </div>
+
+                <h2 *ngIf="siteName" class="ion-margin-top ion-no-padding core-sitename">
+                    <core-format-text [text]="siteName" [filter]="false"></core-format-text>
+                </h2>
+                <p class="core-siteurl">{{siteUrl}}</p>
             </div>
 
-            <h2 *ngIf="siteName" class="ion-padding core-sitename">
-                <core-format-text [text]="siteName" [filter]="false"></core-format-text>
-            </h2>
-            <p class="core-siteurl">{{siteUrl}}</p>
+            <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3"
+                [supportConfig]="supportConfig" [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
+                <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
+            </core-login-exceeded-attempts>
         </div>
 
-        <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && loginAttempts >= 3" [supportConfig]="supportConfig"
-            [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
-            <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
-        </core-login-exceeded-attempts>
-
-        <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
-            <ion-item>
-                <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
-                <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
-                    autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next" required="true">
-                </ion-input>
-            </ion-item>
-            <ion-item class="ion-margin-bottom">
-                <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
-                <core-show-password name="password">
-                    <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
-                        formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go" required="true">
+        <div class="core-login-methods">
+            <form [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #credentialsForm *ngIf="!isBrowserSSO">
+                <ion-item>
+                    <ion-label class="sr-only">{{ 'core.login.username' | translate }}</ion-label>
+                    <ion-input type="text" name="username" placeholder="{{ 'core.login.username' | translate }}" formControlName="username"
+                        autocapitalize="none" autocorrect="off" autocomplete="username" enterkeyhint="next" required="true">
                     </ion-input>
-                </core-show-password>
-            </ion-item>
-            <ion-button expand="block" type="submit" [disabled]="!credForm.valid" class="ion-margin core-login-login-button ion-text-wrap">
-                {{ 'core.login.loginbutton' | translate }}
-            </ion-button>
-            <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
-            <input type="submit" class="core-submit-hidden-enter" />
+                </ion-item>
+                <ion-item class="ion-margin-bottom">
+                    <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
+                    <core-show-password name="password">
+                        <ion-input name="password" type="password" placeholder="{{ 'core.login.password' | translate }}"
+                            formControlName="password" [clearOnEdit]="false" autocomplete="current-password" enterkeyhint="go"
+                            required="true">
+                        </ion-input>
+                    </core-show-password>
+                </ion-item>
+                <ion-button expand="block" type="submit" [disabled]="!credForm.valid"
+                    class="ion-margin core-login-login-button ion-text-wrap">
+                    {{ 'core.login.loginbutton' | translate }}
+                </ion-button>
+                <!-- Remove this once Ionic fixes this bug: https://github.com/ionic-team/ionic-framework/issues/19368 -->
+                <input type="submit" class="core-submit-hidden-enter" />
 
-            <!-- Forgotten password option. -->
-            <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
-                class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-                {{ 'core.login.forgotten' | translate }}
-            </ion-button>
-        </form>
+                <!-- Forgotten password option. -->
+                <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
+                    class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
+                    {{ 'core.login.forgotten' | translate }}
+                </ion-button>
+            </form>
 
-        <ng-container *ngIf="isBrowserSSO">
-            <ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-button ion-text-wrap">
-                {{ 'core.login.loginbutton' | translate }}
-                <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
-            </ion-button>
-            <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
-        </ng-container>
+            <ng-container *ngIf="isBrowserSSO">
+                <ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
+                    {{ 'core.login.loginbutton' | translate }}
+                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                </ion-button>
+                <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
+            </ng-container>
 
 
-        <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="siteUrl"></core-login-methods>
+            <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [siteUrl]="siteUrl"></core-login-methods>
+        </div>
 
-        <ion-list *ngIf="canSignup || authInstructions" class="ion-padding-top core-login-sign-up">
-            <ion-item class="ion-text-wrap">
+        <div class="core-login-sign-up" *ngIf="canSignup || authInstructions">
+            <h2>{{ 'core.login.firsttime' | translate }}</h2>
+
+            <ion-item class="ion-text-wrap ion-no-padding core-login-instructions">
                 <ion-label>
-                    <h2 class="item-heading">{{ 'core.login.firsttime' | translate }}</h2>
+                    <core-format-text *ngIf="authInstructions" [text]="authInstructions" [filter]="false"></core-format-text>
                 </ion-label>
             </ion-item>
-            <ion-item class="ion-text-wrap" *ngIf="authInstructions">
-                <ion-label>
-                    <p>
-                        <core-format-text [text]="authInstructions" [filter]="false"></core-format-text>
-                    </p>
-                </ion-label>
-            </ion-item>
-            <ion-button *ngIf="canSignup" expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
-                {{ 'core.login.startsignup' | translate }}
-            </ion-button>
-        </ion-list>
+
+
+        </div>
+        <ion-button *ngIf="canSignup" expand="block" class="ion-margin ion-text-wrap" fill="outline" (click)="openEmailSignup()">
+            {{ 'core.login.startsignup' | translate }}
+        </ion-button>
     </core-loading>
 </ion-content>
diff --git a/src/core/features/login/pages/reconnect/reconnect.html b/src/core/features/login/pages/reconnect/reconnect.html
index 663393e33..dbda9509a 100644
--- a/src/core/features/login/pages/reconnect/reconnect.html
+++ b/src/core/features/login/pages/reconnect/reconnect.html
@@ -20,74 +20,79 @@
 <ion-content class="ion-padding" (keydown)="keyDown($event)" (keyup)="keyUp($event)">
     <core-loading [hideUntil]="!showLoading">
         <div class="list-item-limited-width">
-            <ion-card *ngIf="!isLoggedOut" class="core-danger-card core-login-reconnect-warning">
+            <ion-card *ngIf="!isLoggedOut" class="core-warning-card core-login-reconnect-warning">
                 <ion-item>
-                    <ion-icon name="fas-circle-exclamation" slot="start" aria-hidden="true"></ion-icon>
+                    <ion-icon name="fas-triangle-exclamation" slot="start" aria-hidden="true"></ion-icon>
                     <ion-label>
                         <p>{{ 'core.lostconnection' | translate }}</p>
                     </ion-label>
                 </ion-item>
             </ion-card>
 
-            <div class="ion-text-wrap ion-text-center ion-margin-bottom" [ngClass]="{'item-avatar-center': showUserAvatar}">
-                <div class="core-login-site-logo" *ngIf="!showUserAvatar">
-                    <!-- Show site logo or a default image. -->
-                    <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" onError="this.src='assets/img/login_logo.png'" alt="">
-                    <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+            <div class="ion-text-wrap ion-text-center core-login-info-box">
+                <div class="core-login-site">
+                    <div class="core-login-site-logo" *ngIf="!showUserAvatar">
+                        <!-- Show site logo or a default image. -->
+                        <img *ngIf="logoUrl" [src]="logoUrl" role="presentation" onError="this.src='assets/img/login_logo.png'" alt="">
+                        <img *ngIf="!logoUrl" src="assets/img/login_logo.png" role="presentation" alt="">
+                    </div>
+
+                    <p *ngIf="siteInfo?.siteName" class="ion-no-margin ion-no-padding core-sitename">
+                        <core-format-text [text]="siteInfo?.siteName" [filter]="false"></core-format-text>
+                    </p>
+                    <p class="core-siteurl">{{siteUrl}}</p>
                 </div>
 
-                <p *ngIf="siteInfo?.siteName" class="ion-padding core-sitename">
-                    <core-format-text [text]="siteInfo?.siteName" [filter]="false"></core-format-text>
-                </p>
-                <p class="core-siteurl">{{siteUrl}}</p>
-
-                <!-- Show user avatar. -->
-                <core-user-avatar class="large-avatar" *ngIf="showUserAvatar" [user]="siteInfo" [linkProfile]="false"
-                    [siteId]="siteId"></core-user-avatar>
-                <p *ngIf="siteInfo?.fullname" class="core-login-fullname">
-                    <core-format-text [text]="siteInfo?.fullname" [filter]="false"></core-format-text>
-                </p>
-
+                <div class="core-login-user">
+                    <!-- Show user avatar. -->
+                    <core-user-avatar class="large-avatar" *ngIf="showUserAvatar" [user]="siteInfo" [linkProfile]="false"
+                        [siteId]="siteId"></core-user-avatar>
+                    <p *ngIf="siteInfo?.fullname" class="core-login-fullname">
+                        <core-format-text [text]="siteInfo?.fullname" [filter]="false"></core-format-text>
+                    </p>
+                </div>
                 <core-login-exceeded-attempts *ngIf="exceededAttemptsHTML && supportConfig && reconnectAttempts >= 3"
                     [supportConfig]="supportConfig" [supportSubject]="'core.login.exceededloginattemptssupportsubject' | translate">
                     <div [innerHTML]="exceededAttemptsHTML" (click)="exceededAttemptsClicked($event)"></div>
                 </core-login-exceeded-attempts>
             </div>
 
-            <form *ngIf="!isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
-                <ion-item class="ion-margin-bottom">
-                    <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
-                    <core-show-password name="password">
-                        <ion-input class="core-ioninput-password" name="password" type="password"
-                            placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
-                            autocomplete="current-password" enterkeyhint="go" required="true">
-                        </ion-input>
-                    </core-show-password>
-                </ion-item>
-                <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
-                    class="ion-margin core-login-login-button ion-text-wrap">
-                    {{ 'core.login.loginbutton' | translate }}
-                </ion-button>
+            <div class="core-login-methods">
+                <form *ngIf="!isBrowserSSO" [formGroup]="credForm" (ngSubmit)="login($event)" class="core-login-form" #reconnectForm>
+                    <ion-item class="ion-margin-bottom">
+                        <ion-label class="sr-only">{{ 'core.login.password' | translate }}</ion-label>
+                        <core-show-password name="password">
+                            <ion-input class="core-ioninput-password" name="password" type="password"
+                                placeholder="{{ 'core.login.password' | translate }}" formControlName="password" [clearOnEdit]="false"
+                                autocomplete="current-password" enterkeyhint="go" required="true">
+                            </ion-input>
+                        </core-show-password>
+                    </ion-item>
+                    <ion-button type="submit" expand="block" [disabled]="!credForm.valid"
+                        class="ion-margin core-login-login-button ion-text-wrap">
+                        {{ 'core.login.loginbutton' | translate }}
+                    </ion-button>
 
-                <!-- Forgotten password option. -->
-                <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
-                    class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
-                    {{ 'core.login.forgotten' | translate }}
-                </ion-button>
-            </form>
+                    <!-- Forgotten password option. -->
+                    <ion-button *ngIf="showForgottenPassword" expand="block" fill="clear"
+                        class="core-login-forgotten-password core-button-as-link ion-text-wrap" (click)="forgottenPassword()">
+                        {{ 'core.login.forgotten' | translate }}
+                    </ion-button>
+                </form>
 
-            <ng-container *ngIf="isBrowserSSO">
-                <ion-button expand="block" (click)="openBrowserSSO()" class="ion-margin core-login-login-button ion-text-wrap">
-                    {{ 'core.login.loginbutton' | translate }}
-                    <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
-                </ion-button>
-                <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
-            </ng-container>
-
-            <!-- Additional Login methods -->
-            <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [reconnect]="true" [siteUrl]="siteUrl"
-                [redirectData]="redirectData"></core-login-methods>
+                <ng-container *ngIf="isBrowserSSO">
+                    <ion-button expand="block" (click)="openBrowserSSO()"
+                        class="ion-margin core-login-login-inbrowser-button ion-text-wrap">
+                        {{ 'core.login.loginbutton' | translate }}
+                        <ion-icon name="fas-up-right-from-square" slot="end" aria-hidden="true"></ion-icon>
+                    </ion-button>
+                    <p class="text-center core-login-inbrowser">{{ 'core.openinbrowserdescription' | translate }}</p>
+                </ng-container>
 
+                <!-- Additional Login methods -->
+                <core-login-methods *ngIf="siteConfig" [siteConfig]="siteConfig" [reconnect]="true" [siteUrl]="siteUrl"
+                    [redirectData]="redirectData"></core-login-methods>
+            </div>
         </div>
     </core-loading>
 </ion-content>
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index dafb8f140..88ba3383f 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -902,10 +902,7 @@ img.large-avatar,
     height: var(--core-large-avatar-size);
     max-width: var(--core-large-avatar-size);
     max-height: var(--core-large-avatar-size);
-    margin-bottom: 10px;
     border-radius: 50%;
-    padding: 4px;
-    border: 1px solid var(--stroke);
     background-color: transparent;
 }
 
diff --git a/src/theme/theme.light.scss b/src/theme/theme.light.scss
index fa09f202c..f2d892099 100644
--- a/src/theme/theme.light.scss
+++ b/src/theme/theme.light.scss
@@ -328,7 +328,7 @@ html {
 
     --core-star-color: var(--primary);
 
-    --core-large-avatar-size: 90px;
+    --core-large-avatar-size: 80px;
     --core-avatar-size: var(--a11y-min-target-size);
     --core-avatar-radius: 50%;