diff --git a/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.js b/react-frontend/src/login/LoginImageComponent.js
similarity index 50%
rename from react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.js
rename to react-frontend/src/login/LoginImageComponent.js
index 7b03f73ee..f59f0a589 100644
--- a/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.js
+++ b/react-frontend/src/login/LoginImageComponent.js
@@ -1,36 +1,28 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Image } from "react-bootstrap";
 import { IMG_BASE_PATH } from "constants/appConstants";
+import ImageComponent from "core-components/image/ImageComponent";
 
 const getImagePath = (size) =>
   size === "lg"
     ? `${IMG_BASE_PATH}/cat-img.png`
     : `${IMG_BASE_PATH}/cat-mobile-img.png`;
 
-const PreLoginImageComponent = ({ className, hight, width, size }) => {
+const LoginImageComponent = ({ className, size }) => {
   const imagePath = React.useMemo(() => getImagePath(size), [size]);
 
   return (
-    <Image
-      src={imagePath}
-      className={className}
-      hight={hight}
-      width={width}
-      alt="pre login image"
-    />
+    <ImageComponent src={imagePath} className={className} alt="login image" />
   );
 };
 
-PreLoginImageComponent.propTypes = {
+LoginImageComponent.propTypes = {
   className: PropTypes.string,
-  hight: PropTypes.string,
-  width: PropTypes.string,
   size: PropTypes.oneOf(["md", "lg"]),
 };
 
-PreLoginImageComponent.defaultProps = {
+LoginImageComponent.defaultProps = {
   size: "md",
 };
 
-export default PreLoginImageComponent;
+export default LoginImageComponent;
diff --git a/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.test.js b/react-frontend/src/login/LoginImageComponent.test.js
similarity index 50%
rename from react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.test.js
rename to react-frontend/src/login/LoginImageComponent.test.js
index 0aa066362..31b185262 100644
--- a/react-frontend/src/shared-components/prelogin-image-components/PreLoginImageComponent.test.js
+++ b/react-frontend/src/login/LoginImageComponent.test.js
@@ -1,12 +1,12 @@
 import React from "react";
 import { render } from "@testing-library/react";
 
-import PreLoginImageComponent from "shared-components/prelogin-image-components/PreLoginImageComponent";
+import LoginImageComponent from "login/LoginImageComponent";
 
 describe("Image component test", () => {
   test("renders image component with image", () => {
-    const { getByAltText } = render(<PreLoginImageComponent />);
-    const testImage = getByAltText("pre login image");
+    const { getByAltText } = render(<LoginImageComponent />);
+    const testImage = getByAltText("login image");
     expect(testImage).toBeInTheDocument();
   });
 });
diff --git a/react-frontend/src/login/PreLoginPanelComponent.js b/react-frontend/src/login/PreLoginPanelComponent.js
new file mode 100644
index 000000000..05fcb6577
--- /dev/null
+++ b/react-frontend/src/login/PreLoginPanelComponent.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { Col, Row, Container } from "react-bootstrap";
+import styled from "styled-components";
+import PropTypes from "prop-types";
+
+import LogoComponent from "shared-components/peerly-Logo/LogoComponent";
+import PrimaryCoreValueComponent from "shared-components/primary-core-value-components/PrimaryCoreValueComponent";
+import LoginImageComponent from "login/LoginImageComponent";
+
+const Wrapper = styled(Container)`
+  height: 100vh;
+`;
+
+const Div = styled(Row)`
+  height: calc(100% / 3);
+`;
+
+const PreLoginPanelComponent = ({
+  orgPrimaryCoreValue,
+  encouragementThought,
+}) => (
+  <Wrapper className="bg-dark  d-sm-block d-xs-block d-md-none">
+    <Div>
+      <Col className="m-auto">
+        <LogoComponent />
+      </Col>
+    </Div>
+    <Div className="overflow-hidden">
+      <Col className="p-0">
+        <LoginImageComponent className="img-fluid" />
+      </Col>
+    </Div>
+    <Div>
+      <Col className="m-auto">
+        <PrimaryCoreValueComponent
+          orgPrimaryCoreValue={orgPrimaryCoreValue}
+          encouragementThought={encouragementThought}
+        />
+      </Col>
+    </Div>
+  </Wrapper>
+);
+
+PreLoginPanelComponent.propTypes = {
+  orgPrimaryCoreValue: PropTypes.string,
+  encouragementThought: PropTypes.string,
+};
+
+export default React.memo(PreLoginPanelComponent);
diff --git a/react-frontend/src/login/PreLoginPanelMobileComponent.test.js b/react-frontend/src/login/PreLoginPanelComponent.test.js
similarity index 92%
rename from react-frontend/src/login/PreLoginPanelMobileComponent.test.js
rename to react-frontend/src/login/PreLoginPanelComponent.test.js
index 1bcb0b751..f740c3968 100644
--- a/react-frontend/src/login/PreLoginPanelMobileComponent.test.js
+++ b/react-frontend/src/login/PreLoginPanelComponent.test.js
@@ -21,11 +21,11 @@ describe("Pre Login component test", () => {
     const { getByTestId } = render(
       <PrimaryCoreValueComponent
         orgPrimaryCoreValue="Lets Create the Office Positive"
-        encouragementThought="positive"
+        encouragementThought="thought"
       />
     );
     expect(getByTestId("PrimaryCoreValueComponent")).toHaveTextContent(
-      "Lets Create the Office Positive positive"
+      "Lets Create the Office Positive thought"
     );
   });
 });
diff --git a/react-frontend/src/login/PreLoginPanelMobileComponent.js b/react-frontend/src/login/PreLoginPanelMobileComponent.js
deleted file mode 100644
index 517d675a4..000000000
--- a/react-frontend/src/login/PreLoginPanelMobileComponent.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React from "react";
-import { Col } from "react-bootstrap";
-import styled from "styled-components";
-import PropTypes from "prop-types";
-import LogoComponent from "shared-components/peerly-Logo/LogoComponent";
-import PrimaryCoreValueComponent from "shared-components/primary-core-value-components/PrimaryCoreValueComponent";
-import PreLoginImageComponent from "shared-components/prelogin-image-components/PreLoginImageComponent";
-
-const Wrapper = styled.div`
-  height: 100vh;
-`;
-
-const PreLoginPanelMobileComponent = ({
-  orgPrimaryCoreValue,
-  encouragementThought,
-}) => (
-  <Wrapper className="bg-dark d-flex flex-column" fluid={true}>
-    <Col className=" d-flex justify-content-center align-items-center">
-      <LogoComponent />
-    </Col>
-    <Col className="d-flex justify-content-center align-items-center">
-      <PreLoginImageComponent className="img-fluid" />
-    </Col>
-    <Col className="d-flex justify-content-center align-items-center ">
-      <PrimaryCoreValueComponent
-        orgPrimaryCoreValue={orgPrimaryCoreValue}
-        encouragementThought={encouragementThought}
-      />
-    </Col>
-  </Wrapper>
-);
-
-PreLoginPanelMobileComponent.propTypes = {
-  orgPrimaryCoreValue: PropTypes.string,
-  encouragementThought: PropTypes.string,
-};
-
-export default React.memo(PreLoginPanelMobileComponent);
diff --git a/react-frontend/src/shared-components/peerly-Logo/LogoComponent.js b/react-frontend/src/shared-components/peerly-Logo/LogoComponent.js
index 56ec2d647..356e06d61 100644
--- a/react-frontend/src/shared-components/peerly-Logo/LogoComponent.js
+++ b/react-frontend/src/shared-components/peerly-Logo/LogoComponent.js
@@ -2,7 +2,7 @@ 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">