diff --git a/frontend/src/assets/img/Logo_White_Transparent_Horizontal.svg b/frontend/src/assets/img/Logo_White_Transparent_Horizontal.svg
new file mode 100644
index 0000000000..8f78bf75a2
--- /dev/null
+++ b/frontend/src/assets/img/Logo_White_Transparent_Horizontal.svg
@@ -0,0 +1 @@
+<svg id="bg" width="100%" height="100%" viewBox="0 0 622 318" fill="none"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#1a4049;}.cls-3{fill:#817afe;}</style></defs><circle class="cls-1" cx="125.62" cy="125.62" r="80"/><polygon class="cls-1" points="137.05 91.33 137.05 114.19 137.05 137.05 159.9 137.05 159.9 114.19 159.9 91.33 137.05 91.33"/><polygon class="cls-1" points="114.19 114.19 114.19 91.33 91.33 91.33 91.33 114.19 91.33 137.05 91.33 159.9 114.19 159.9 137.05 159.9 137.05 137.05 114.19 137.05 114.19 114.19"/><polygon class="cls-2" points="137.05 91.33 137.05 114.19 137.05 137.05 159.9 137.05 159.9 114.19 159.9 91.33 137.05 91.33"/><polygon class="cls-2" points="114.19 114.19 114.19 91.33 91.33 91.33 91.33 114.19 91.33 137.05 91.33 159.9 114.19 159.9 137.05 159.9 137.05 137.05 114.19 137.05 114.19 114.19"/><rect class="cls-3" x="137.05" y="137.05" width="22.86" height="22.86"/><path class="cls-1" d="M251.58,139.13V112.77h11.93v25.06c0,7.36,3.91,12.2,11.27,12.2s11.27-4.84,11.27-12.2V112.77h12v26.36c0,12.67-8.48,21.8-23.1,21.8C260.06,160.93,251.58,151.8,251.58,139.13Z"/><path class="cls-1" d="M321.91,159.9H310.08V112.77h11.83v7.92a17.93,17.93,0,0,1,15.65-9c11.83,0,19.66,8.67,19.66,20.68V159.9h-12V134.75c0-7.45-4.38-12.39-11.46-12.39s-11.83,5-11.83,12.39Z"/><path class="cls-1" d="M369.42,91.34h11.92V159.9H369.42Z"/><path class="cls-1" d="M441.24,137v1.3H403.79c.47,7.36,5.87,13,13.69,13,7.55,0,10.62-3.82,11.46-5.12h11.74c-.75,4.84-7.17,15-23.2,15-15.27,0-25.61-10.61-25.61-24.77,0-14.63,10.24-24.78,24.68-24.78S441.24,121.62,441.24,137Zm-37.08-6.9h24.6c-1.77-6-6.15-9.31-12.21-9.31C410.12,120.78,405.65,124.23,404.16,130.09Z"/><path class="cls-1" d="M467.78,130.37h15.47c0-5.68-4.29-9.31-11.27-9.31-6.62,0-9,3.54-9.78,4.75h-12c1-4.94,6.89-14.25,21.8-14.25,14.62,0,22.73,7.64,22.73,18.81V146.3c0,2.89,1,4,3.72,4.29v9.59h-3.72c-6.06-.09-9.69-2.33-11-6.52-2.23,3.45-7.26,7.27-15.27,7.27-11.09,0-19.47-6.24-19.47-15.93S456.14,130.37,467.78,130.37Zm15.47,12.11v-4H469.74c-5.59,0-9,2-9,6.33,0,4.57,4.29,7.27,10.25,7.27C477.66,152.08,483.25,148.82,483.25,142.48Z"/><path class="cls-1" d="M523.12,140.62c-10.34-.74-17.33-5.59-17.33-14.72,0-8.85,8.1-14.44,20.77-14.44,17,0,21.8,8.76,23.1,13.32H537.09c-.84-1-3.54-4.28-10.62-4.28-5.68,0-8.66,1.86-8.66,4.75,0,2.61,2,4.29,6.7,4.94l8,.84c12.77,1.11,18,6,18,15.27,0,8.85-7.36,14.91-21.8,14.91-17.51,0-23.19-10.16-24.12-14.53h12.76c.47,1.11,3.35,5.31,11.36,5.31,6.62,0,9.69-2.24,9.69-5.22s-1.67-4.66-7-5.31C528.05,141.18,526.38,141,523.12,140.62Z"/><path class="cls-1" d="M571.55,159.9H559.72V91.34h11.83v29.35a17.93,17.93,0,0,1,15.65-9c11.83,0,19.66,8.67,19.66,20.68V159.9h-12V134.75c0-7.45-4.38-12.39-11.46-12.39s-11.83,5-11.83,12.39Z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
index 84a78ceaa1..523035e69c 100644
--- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
+++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
@@ -1,15 +1,21 @@
 import { makeStyles } from '@material-ui/core/styles';
 
 export const useStyles = makeStyles(theme => ({
+    gradient: {
+        display: 'flex',
+        justifyContent: 'center',
+        [theme.breakpoints.up('sm')]: {
+            borderBottomLeftRadius: '3px',
+            borderTopLeftRadius: '3px',
+        },
+    },
     title: {
         color: '#fff',
         marginBottom: '1rem',
         fontSize: '2rem',
         marginTop: '5rem',
         [theme.breakpoints.down('sm')]: {
-            textAlign: 'left',
-            fontSize: '1.75rem',
-            marginTop: 0,
+            display: 'none',
         },
     },
     container: {
@@ -28,9 +34,7 @@ export const useStyles = makeStyles(theme => ({
     },
     bannerSubtitle: {
         [theme.breakpoints.down('sm')]: {
-            maxWidth: '300px',
-            fontSize: '1.75rem',
-            textAlign: 'left',
+            display: 'none',
         },
         [theme.breakpoints.down('xs')]: {
             display: 'none',
@@ -40,16 +44,18 @@ export const useStyles = makeStyles(theme => ({
     },
     logoContainer: {
         position: 'absolute',
-        bottom: '-50px',
-        left: '-50px',
-        display: 'flex',
-        flexDirection: 'column',
-        [theme.breakpoints.down('sm')]: {
-            display: 'none',
+        [theme.breakpoints.up('md')]: {
+            bottom: '-50px',
+            left: '-50px',
+            display: 'flex',
+            flexDirection: 'column',
         },
     },
     logo: {
-        width: '240px',
-        height: '240px',
+        width: '200px',
+        [theme.breakpoints.up('md')]: {
+            width: '240px',
+            height: '200px',
+        },
     },
 }));
diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
index 9eb26a2436..e19a68203d 100644
--- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
+++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
@@ -1,11 +1,10 @@
 import { FC } from 'react';
-
-import { Typography, useTheme } from '@material-ui/core';
+import { Typography, useTheme, useMediaQuery } from '@material-ui/core';
 import Gradient from '../../common/Gradient/Gradient';
-
 import { ReactComponent as Logo } from '../../../assets/icons/logo-white-bg.svg';
-
+import { ReactComponent as LogoWithText } from '../../../assets/img/Logo_White_Transparent_Horizontal.svg';
 import { useStyles } from './StandaloneBanner.styles';
+import ConditionallyRender from '../../common/ConditionallyRender';
 
 interface IStandaloneBannerProps {
     title: string;
@@ -14,14 +13,14 @@ interface IStandaloneBannerProps {
 const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title, children }) => {
     const theme = useTheme();
     const styles = useStyles();
+    const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    console.log(smallScreen);
+
     return (
         <Gradient
             from={theme.palette.primary.main}
             to={theme.palette.login.gradient.bottom}
-            style={{
-                borderBottomLeftRadius: '3px',
-                borderTopLeftRadius: '3px',
-            }}
+            className={styles.gradient}
         >
             <div className={styles.container}>
                 <Typography variant="h1" className={styles.title}>
@@ -33,7 +32,11 @@ const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title, children }) => {
             </div>
 
             <div className={styles.logoContainer}>
-                <Logo className={styles.logo} />
+                <ConditionallyRender
+                    condition={smallScreen}
+                    show={<LogoWithText className={styles.logo} />}
+                    elseShow={<Logo className={styles.logo} />}
+                />
             </div>
         </Gradient>
     );