diff --git a/src/authn-component/index.jsx b/src/authn-component/index.jsx
index ac9bfd73..14506dd6 100644
--- a/src/authn-component/index.jsx
+++ b/src/authn-component/index.jsx
@@ -1,9 +1,12 @@
 import React from 'react';
 
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 
+import messages from './messages';
 import BaseContainer from '../base-container';
 import { LoginForm } from '../forms';
+import RegistrationForm from '../forms/registration-popup';
 
 /**
  * Main component that holds the logic for conditionally rendering login or registration form.
@@ -14,13 +17,17 @@ import { LoginForm } from '../forms';
  * @returns {JSX.Element} The rendered BaseContainer component containing either login or registration form.
  */
 
-const AuthnComponent = ({
-  open, setOpen,
-}) => (
-  <BaseContainer open={open} setOpen={setOpen}>
-    <LoginForm />
-  </BaseContainer>
-);
+const AuthnComponent = ({ open, setOpen }) => {
+  const { formatMessage } = useIntl();
+  const registrationFooterText = formatMessage(messages.footerText);
+
+  return (
+    <BaseContainer open={open} setOpen={setOpen} footerText={registrationFooterText}>
+      <LoginForm />
+      <RegistrationForm />
+    </BaseContainer>
+  );
+};
 
 AuthnComponent.propTypes = {
   open: PropTypes.bool.isRequired,
diff --git a/src/authn-component/messages.jsx b/src/authn-component/messages.jsx
new file mode 100644
index 00000000..60fb0f7f
--- /dev/null
+++ b/src/authn-component/messages.jsx
@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  footerText: {
+    id: 'footer.text',
+    defaultMessage: 'By creating an account, you agree to the Terms of Service and Honor Code and you acknowledge that edX and each Member process your personal data in accordance with the Privacy Policy.',
+    description: 'Text that appears on registration form stating honor code and privacy policy',
+  },
+});
+
+export default messages;
diff --git a/src/base-container/index.jsx b/src/base-container/index.jsx
index 5bd3d425..6cfe66d4 100644
--- a/src/base-container/index.jsx
+++ b/src/base-container/index.jsx
@@ -39,7 +39,7 @@ const BaseContainer = ({
     </ModalDialog.Body>
     {footerText && (
       <ModalDialog.Footer className="bg-dark-500 p-4.5">
-        <p className="mb-0 text-white">{footerText}</p>
+        <p className="mb-0 text-white m-auto">{footerText}</p>
       </ModalDialog.Footer>
     )}
   </ModalDialog>
diff --git a/src/forms/login/messages.js b/src/forms/login/messages.js
index 4e42f910..c30a399e 100644
--- a/src/forms/login/messages.js
+++ b/src/forms/login/messages.js
@@ -27,17 +27,17 @@ const messages = defineMessages({
     description: 'Text that appears on the registration button',
   },
   loginFormEmailFieldLabel: {
-    id: 'login.form.email.field.text',
+    id: 'login.form.email.field.label',
     defaultMessage: 'Email',
     description: 'Email field label',
   },
   loginFormPasswordFieldLabel: {
-    id: 'login.form.password.field.text',
+    id: 'login.form.password.field.label',
     defaultMessage: 'Password',
     description: 'Password field label',
   },
   loginFormHeading2: {
-    id: 'login.form.or.message',
+    id: 'login.form.heading.2',
     defaultMessage: 'or',
     description: 'Heading that appears between social auth and basic login form',
   },
diff --git a/src/forms/registration-popup/index.jsx b/src/forms/registration-popup/index.jsx
new file mode 100644
index 00000000..d853fc29
--- /dev/null
+++ b/src/forms/registration-popup/index.jsx
@@ -0,0 +1,87 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import {
+  Button, Container, Form, Hyperlink, Icon,
+} from '@openedx/paragon';
+import { CheckCircleOutline, RemoveRedEye } from '@openedx/paragon/icons';
+
+import messages from './messages';
+import SocialAuthButtons from '../../common-ui/SocialAuthButtons';
+import './index.scss';
+
+const RegistrationForm = () => {
+  const { formatMessage } = useIntl();
+  return (
+    <Container size="lg" className="registration-form overflow-auto">
+      <h2 className="font-italic text-center display-1 mb-4">{formatMessage(messages.registrationFormHeading1)}</h2>
+      <hr className="separator mb-3 mt-3" />
+      <div className="d-flex mb-4">
+        <span className="pt-1">
+          <Icon src={CheckCircleOutline} className="mr-2" />
+        </span>
+        <div className="text-gray-800">
+          <span className="font-weight-bold mr-2">Lorem ipsum dolor sit amet</span>
+          <br />
+          <span className="small">Lorem ipsum dolor sit amet consectetur. Morbi etiam mauris enim est morbi aliquet ipsum iaculis</span>
+        </div>
+      </div>
+      <SocialAuthButtons isLoginPage={false} />
+      <div className="text-center mt-4.5 mb-4.5">
+        {formatMessage(messages.registrationFormHeading2)}
+      </div>
+      <Form>
+        <Form.Row className="mb-4">
+          <Form.Group controlId="email" className="w-100 mb-0">
+            <Form.Control
+              type="email"
+              floatingLabel={formatMessage(messages.registrationFormEmailFieldLabel)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row className="mb-4">
+          <Form.Group controlId="fullName" className="w-100 mb-0">
+            <Form.Control
+              type="text"
+              floatingLabel={formatMessage(messages.registrationFormFullNameFieldLabel)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Row className="mb-4">
+          <Form.Group controlId="password" className="w-100 mb-0">
+            <Form.Control
+              type="password"
+              trailingElement={<Icon src={RemoveRedEye} />}
+              floatingLabel={formatMessage(messages.registrationFormPasswordFieldLabel)}
+            />
+          </Form.Group>
+        </Form.Row>
+        <Form.Group id="formGridCheckbox">
+          <Form.Checkbox className="text-gray-800">{formatMessage(messages.registrationFormOptOutLabel)}</Form.Checkbox>
+        </Form.Group>
+        <div className="d-flex flex-column">
+          <Button variant="primary" type="submit" className="align-self-end">
+            {formatMessage(messages.registrationFormCreateAccountButton)}
+          </Button>
+        </div>
+      </Form>
+      <div>
+        <span className="mt-5.5 text-gray-800 mt-1">
+          {formatMessage(messages.registrationFormAlreadyHaveAccountText)}
+          <Hyperlink className="p-2">
+            {formatMessage(messages.registrationFormSignInLink)}
+          </Hyperlink>
+        </span>
+        <br />
+        <span className="font-weight-normal">
+          {formatMessage(messages.registrationFormSchoolOrOrganizationLink)}
+          <Hyperlink className="p-2">
+            {formatMessage(messages.registrationFormSignInWithCredentialsLink)}
+          </Hyperlink>
+        </span>
+      </div>
+    </Container>
+  );
+};
+
+export default RegistrationForm;
diff --git a/src/forms/registration-popup/index.scss b/src/forms/registration-popup/index.scss
new file mode 100644
index 00000000..bac0c8a9
--- /dev/null
+++ b/src/forms/registration-popup/index.scss
@@ -0,0 +1,15 @@
+@import "~@edx/brand/paragon/variables";
+
+.registration-form {
+  padding: 3.5rem 2.5rem;
+}
+
+.separator {
+  border: 0;
+  border-top: 0.075rem solid $light-500
+}
+
+.pgn__form-control-floating-label-text:after {
+  content:"*";
+  color: $danger-500;
+}
diff --git a/src/forms/registration-popup/messages.jsx b/src/forms/registration-popup/messages.jsx
new file mode 100644
index 00000000..837fcef2
--- /dev/null
+++ b/src/forms/registration-popup/messages.jsx
@@ -0,0 +1,61 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  registrationFormHeading1: {
+    id: 'registration.form.heading.1',
+    defaultMessage: 'Create account',
+    description: 'registration form main heading',
+  },
+  registrationFormHeading2: {
+    id: 'registration.form.or.heading.2',
+    defaultMessage: 'or',
+    description: 'Heading that appears between social auth and basic registration form',
+  },
+  registrationFormEmailFieldLabel: {
+    id: 'registration.form.email.label',
+    defaultMessage: 'Email',
+    description: 'Label for email input field',
+  },
+  registrationFormFullNameFieldLabel: {
+    id: 'registration.form.full.name.label',
+    defaultMessage: 'Full Name',
+    description: 'Label for full name input field',
+  },
+  registrationFormPasswordFieldLabel: {
+    id: 'registration.form.password.label',
+    defaultMessage: 'Password',
+    description: 'Label for password input field',
+  },
+  registrationFormOptOutLabel: {
+    id: 'registration.Form.opt.out.label',
+    defaultMessage: 'I don’t want to receive marketing messages from edX',
+    description: 'Label marketing email opt out option on registration form',
+  },
+  registrationFormCreateAccountButton: {
+    id: 'registration.form.continue.button',
+    defaultMessage: 'Create an account for free',
+    description: 'Text for submit button on registration form',
+  },
+  registrationFormAlreadyHaveAccountText: {
+    id: 'registration.form.already.have.account.text',
+    defaultMessage: 'Already have an account?',
+    description: 'Login button help text',
+  },
+  registrationFormSignInLink: {
+    id: 'registration.form.sign.in.link',
+    defaultMessage: 'Sign In',
+    description: 'Text for sign in link',
+  },
+  registrationFormSchoolOrOrganizationLink: {
+    id: 'registration.form.account.school.organization.text',
+    defaultMessage: 'Have an account through school or organization?',
+    description: 'Label for link that leads learners to the institution login page',
+  },
+  registrationFormSignInWithCredentialsLink: {
+    id: 'registration.form.sign.in.with.credentials.link',
+    defaultMessage: 'Sign in with your credentials',
+    description: 'Text for signing in with credentials',
+  },
+});
+
+export default messages;