diff --git a/public/app/core/components/Branding/Branding.tsx b/public/app/core/components/Branding/Branding.tsx
index 4968330dd59..474ad7f850a 100644
--- a/public/app/core/components/Branding/Branding.tsx
+++ b/public/app/core/components/Branding/Branding.tsx
@@ -9,8 +9,8 @@ export interface BrandComponentProps {
   children?: JSX.Element | JSX.Element[];
 }
 
-const LoginLogo: FC<BrandComponentProps> = ({ className }) => {
-  return <img className={className} src="public/img/grafana_icon.svg" alt="Grafana" />;
+export const LoginLogo: FC<BrandComponentProps & { logo?: string }> = ({ className, logo }) => {
+  return <img className={className} src={`${logo ? logo : 'public/img/grafana_icon.svg'}`} alt="Grafana" />;
 };
 
 const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
diff --git a/public/app/core/components/Branding/types.ts b/public/app/core/components/Branding/types.ts
new file mode 100644
index 00000000000..cddfcb6d78b
--- /dev/null
+++ b/public/app/core/components/Branding/types.ts
@@ -0,0 +1,15 @@
+import { FooterLink } from '../Footer/Footer';
+
+export interface BrandingSettings {
+  footerLinks: FooterLink[] | null;
+  appTitle: string;
+  loginSubtitle: string;
+  loginTitle: string;
+  loginLogo: string;
+  loginBackground: string;
+  loginBoxBackground: string;
+  menuLogo: string;
+  favIcon: string;
+  loadingLogo: string;
+  appleTouchIcon: string;
+}
diff --git a/public/app/core/components/Footer/Footer.tsx b/public/app/core/components/Footer/Footer.tsx
index fb05620b3d8..ce1a412d659 100644
--- a/public/app/core/components/Footer/Footer.tsx
+++ b/public/app/core/components/Footer/Footer.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 
 import { config } from '@grafana/runtime';
 import { Icon, IconName } from '@grafana/ui';
@@ -82,8 +82,13 @@ export function setVersionLinkFn(fn: typeof getFooterLinks) {
   getVersionLinks = fn;
 }
 
-export const Footer: FC = React.memo(() => {
-  const links = getFooterLinks().concat(getVersionLinks());
+export interface Props {
+  /** Link overrides to show specific links in the UI */
+  customLinks?: FooterLink[] | null;
+}
+
+export const Footer = React.memo(({ customLinks }: Props) => {
+  const links = (customLinks || getFooterLinks()).concat(getVersionLinks());
 
   return (
     <footer className="footer">
diff --git a/public/app/core/components/Login/LoginLayout.tsx b/public/app/core/components/Login/LoginLayout.tsx
index 56cbfdf758e..2cb85aa204b 100644
--- a/public/app/core/components/Login/LoginLayout.tsx
+++ b/public/app/core/components/Login/LoginLayout.tsx
@@ -5,6 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2, styleMixins } from '@grafana/ui';
 
 import { Branding } from '../Branding/Branding';
+import { BrandingSettings } from '../Branding/types';
 import { Footer } from '../Footer/Footer';
 
 interface InnerBoxProps {
@@ -15,26 +16,36 @@ export const InnerBox: FC<InnerBoxProps> = ({ children, enterAnimation = true })
   return <div className={cx(loginStyles.loginInnerBox, enterAnimation && loginStyles.enterAnimation)}>{children}</div>;
 };
 
-export const LoginLayout: FC = ({ children }) => {
+export interface LoginLayoutProps {
+  /** Custom branding settings that can be used e.g. for previewing the Login page changes */
+  branding?: BrandingSettings;
+}
+
+export const LoginLayout: FC<LoginLayoutProps> = ({ children, branding }) => {
   const loginStyles = useStyles2(getLoginStyles);
-  const subTitle = Branding.GetLoginSubTitle();
   const [startAnim, setStartAnim] = useState(false);
+  const subTitle = branding?.loginSubtitle ?? Branding.GetLoginSubTitle();
+  const loginTitle = branding?.loginTitle ?? Branding.LoginTitle;
+  const loginBoxBackground = branding?.loginBoxBackground || Branding.LoginBoxBackground();
+  const loginLogo = branding?.loginLogo;
 
   useEffect(() => setStartAnim(true), []);
 
   return (
-    <Branding.LoginBackground className={cx(loginStyles.container, startAnim && loginStyles.loginAnim)}>
-      <div className={cx(loginStyles.loginContent, Branding.LoginBoxBackground(), 'login-content-box')}>
+    <Branding.LoginBackground
+      className={cx(loginStyles.container, startAnim && loginStyles.loginAnim, branding?.loginBackground)}
+    >
+      <div className={cx(loginStyles.loginContent, loginBoxBackground, 'login-content-box')}>
         <div className={loginStyles.loginLogoWrapper}>
-          <Branding.LoginLogo className={loginStyles.loginLogo} />
+          <Branding.LoginLogo className={loginStyles.loginLogo} logo={loginLogo} />
           <div className={loginStyles.titleWrapper}>
-            <h1 className={loginStyles.mainTitle}>{Branding.LoginTitle}</h1>
-            {subTitle && <h3 className={loginStyles.subTitle}>{Branding.GetLoginSubTitle()}</h3>}
+            <h1 className={loginStyles.mainTitle}>{loginTitle}</h1>
+            {subTitle && <h3 className={loginStyles.subTitle}>{subTitle}</h3>}
           </div>
         </div>
         <div className={loginStyles.loginOuterBox}>{children}</div>
       </div>
-      <Footer />
+      <Footer customLinks={branding?.footerLinks} />
     </Branding.LoginBackground>
   );
 };