diff --git a/react-frontend/public/assets/images/cat-img.png b/react-frontend/public/assets/images/cat-img.png
new file mode 100644
index 000000000..317a3f8d4
Binary files /dev/null and b/react-frontend/public/assets/images/cat-img.png differ
diff --git a/react-frontend/public/assets/images/cat-img@2x.png b/react-frontend/public/assets/images/cat-img@2x.png
new file mode 100644
index 000000000..fd3dd7dbf
Binary files /dev/null and b/react-frontend/public/assets/images/cat-img@2x.png differ
diff --git a/react-frontend/src/layout-components/login/PreLoginPanelMobileComponent.js b/react-frontend/src/layout-components/login/PreLoginPanelMobileComponent.js
new file mode 100644
index 000000000..8062432ac
--- /dev/null
+++ b/react-frontend/src/layout-components/login/PreLoginPanelMobileComponent.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { Container, Row } from "react-bootstrap";
+
+import LogoComponent from "../../shared-components/peerly-Logo/LogoComponent";
+import LoginTextComponent from "../../shared-components/loginTextComponent/LoginTextComponent";
+import PreLoginImageComponent from "../../shared-components/prelogin-image-components/PreLoginImageComponent";
+
+const PreLoginPanelMobileComponent = () => (
+  <Container className="bg-dark h-100 w-100">
+    <Row className="h-25">
+      <LogoComponent />
+    </Row>
+    <Row className="h-50">
+      <PreLoginImageComponent size="lg" className="w-100" hight="100px" />
+    </Row>
+    <Row className="h-25">
+      <LoginTextComponent />
+    </Row>
+  </Container>
+);
+
+PreLoginPanelMobileComponent.defaultProps = {};
+
+PreLoginPanelMobileComponent.propTypes = {};
+
+export default PreLoginPanelMobileComponent;
diff --git a/react-frontend/src/root/App.js b/react-frontend/src/root/App.js
index eedcc33a9..92b508361 100644
--- a/react-frontend/src/root/App.js
+++ b/react-frontend/src/root/App.js
@@ -2,7 +2,6 @@ import React from "react";
 import { Link } from "react-router-dom";
 
 import { DASHBOARD_ROUTES } from "constants/routeConstants";
-
 function App() {
   return (
     <div>
diff --git a/react-frontend/src/shared-components/loginTextComponent/LoginTextComponent.js b/react-frontend/src/shared-components/loginTextComponent/LoginTextComponent.js
index c292e6b38..c9a3d903e 100644
--- a/react-frontend/src/shared-components/loginTextComponent/LoginTextComponent.js
+++ b/react-frontend/src/shared-components/loginTextComponent/LoginTextComponent.js
@@ -9,7 +9,10 @@ const LoginTextComponent = ({
   encouragementThought,
 }) => (
   <Col className={className} data-testid="LoginTextComponent">
-    <LabelComponent text={orgPrimaryCoreValue} className="font-weight-bold" />
+    <LabelComponent
+      text={orgPrimaryCoreValue}
+      className="font-weight-bold h3"
+    />
     <hr className="w-25 bg-light" />
     <LabelComponent text={encouragementThought} />
   </Col>
diff --git a/react-frontend/src/shared-components/peerly-Logo/LogoComponent.js b/react-frontend/src/shared-components/peerly-Logo/LogoComponent.js
index 56ec2d647..63e1d40a1 100644
--- a/react-frontend/src/shared-components/peerly-Logo/LogoComponent.js
+++ b/react-frontend/src/shared-components/peerly-Logo/LogoComponent.js
@@ -2,20 +2,17 @@ import React from "react";
 
 import { Col, Row } from "react-bootstrap";
 
-import LabelComponent from "core-components/core/Label/LabelComponent";
+import LabelComponent from "../../core-components/Label/LabelComponent";
 
 const LogoComponent = () => (
-  <Col data-testid="peerlyLogoComponent">
+  <Col data-testid="peerlyLogoComponent" className="text-white h3">
     <Row>
-      <LabelComponent
-        text="+"
-        className="text-black font-weight-bold text-center w-100"
-      />
+      <LabelComponent text="+" className="font-weight-bold text-center w-100" />
     </Row>
     <Row>
       <LabelComponent
         text="Peerly"
-        className="text-black font-weight-bold text-center w-100"
+        className="font-weight-bold text-center w-100"
       />
     </Row>
   </Col>
diff --git a/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.js b/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.js
new file mode 100644
index 000000000..00d609f90
--- /dev/null
+++ b/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.js
@@ -0,0 +1,36 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Image } from "react-bootstrap";
+import { IMG_BASE_PATH } from "constants/appConstants";
+
+const getImagePath = (size) =>
+  size === "lg"
+    ? `${IMG_BASE_PATH}/cat-img@2x.png`
+    : `${IMG_BASE_PATH}/cat-img.png`;
+
+const PreLoginImageComponent = ({ className, hight, width, size }) => {
+  const imagePath = React.useMemo(() => getImagePath(size), [size]);
+
+  return (
+    <Image
+      src={imagePath}
+      className={className}
+      hight={hight}
+      width={width}
+      alt="pre login image"
+    />
+  );
+};
+
+PreLoginImageComponent.propTypes = {
+  className: PropTypes.string,
+  hight: PropTypes.string,
+  width: PropTypes.string,
+  size: PropTypes.oneOf(["md", "lg"]),
+};
+
+PreLoginImageComponent.defaultProps = {
+  size: "md",
+};
+
+export default React.memo(PreLoginImageComponent);
diff --git a/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.test.js b/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.test.js
new file mode 100644
index 000000000..e69de29bb