diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx
index d1b4127b2e2..15035264f15 100644
--- a/public/app/core/components/Branding/Branding.tsx
+++ b/public/app/core/components/Branding/Branding.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { css, cx } from '@emotion/css';
-import { useTheme2 } from '@grafana/ui';
+import { useTheme2, styleMixins } from '@grafana/ui';
 import { colorManipulator } from '@grafana/data';
 
 export interface BrandComponentProps {
@@ -24,9 +24,17 @@ const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
       bottom: 0;
       top: 0;
       background: url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg);
-      background-size: cover;
+      background-position: top center;
+      background-size: auto;
+      background-repeat: no-repeat;
+
       opacity: 0;
       transition: opacity 3s ease-in-out;
+
+      @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
+        background-position: center;
+        background-size: cover;
+      }
     }
   `;
 
diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx
index cff4081db03..fd7261d1c10 100644
--- a/public/app/core/components/Login/LoginLayout.tsx
+++ b/public/app/core/components/Login/LoginLayout.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useEffect, useState } from 'react';
 import { cx, css, keyframes } from '@emotion/css';
-import { useStyles2 } from '@grafana/ui';
+import { useStyles2, styleMixins } from '@grafana/ui';
 import { Branding } from '../Branding/Branding';
 import { GrafanaTheme2 } from '@grafana/data';
 import { Footer } from '../Footer/Footer';
@@ -79,8 +79,12 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
     `,
     loginLogo: css`
       width: 100%;
-      max-width: 100px;
+      max-width: 60px;
       margin-bottom: 15px;
+
+      @media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} {
+        max-width: 100px;
+      }
     `,
     loginLogoWrapper: css`
       display: flex;
@@ -93,7 +97,11 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
       text-align: center;
     `,
     mainTitle: css`
-      font-size: 32px;
+      font-size: 22px;
+
+      @media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} {
+        font-size: 32px;
+      }
     `,
     subTitle: css`
       font-size: ${theme.typography.size.md};
@@ -101,18 +109,23 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
     `,
     loginContent: css`
       max-width: 478px;
-      width: 100%;
+      width: calc(100% - 2rem);
       display: flex;
       align-items: stretch;
       flex-direction: column;
       position: relative;
-      justify-content: center;
+      justify-content: flex-start;
       z-index: 1;
       min-height: 320px;
       border-radius: ${theme.shape.borderRadius(4)};
       padding: ${theme.spacing(2, 0)};
       opacity: 0;
       transition: opacity 0.5s ease-in-out;
+
+      @media ${styleMixins.mediaUp(theme.v1.breakpoints.sm)} {
+        min-height: 320px;
+        justify-content: center;
+      }
     `,
     loginOuterBox: css`
       display: flex;
diff --git a/public/sass/components/_alerts.scss b/public/sass/components/_alerts.scss
index 60d63d0c007..d884c587e36 100644
--- a/public/sass/components/_alerts.scss
+++ b/public/sass/components/_alerts.scss
@@ -85,3 +85,13 @@
 .alert-icon-on-top {
   align-items: flex-start;
 }
+
+@include media-breakpoint-down(sm) {
+  .page-alert-list {
+    min-width: 0;
+    top: 30px;
+    width: calc(100% - 20px);
+    max-height: calc(100% - 60px);
+    overflow-y: auto;
+  }
+}