9 files changed, 133 insertions, 2 deletions
diff --git a/src/components/Card/Card.module.css b/src/components/Card/Card.module.css
index ff09072..e351fd5 100644
--- a/src/components/Card/Card.module.css
+++ b/src/components/Card/Card.module.css
@@ -18,7 +18,7 @@
 
 .card:active {
   transform: scale(0.98);
-  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
 }
 
 .card__title {
diff --git a/src/components/RadioSelect/RadioSelect.jsx b/src/components/RadioSelect/RadioSelect.jsx
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/RadioSelect/RadioSelect.jsx
diff --git a/src/components/RadioSelect/RadioSelect.module.css b/src/components/RadioSelect/RadioSelect.module.css
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/components/RadioSelect/RadioSelect.module.css
diff --git a/src/components/SubmitButton/SubmitButton.jsx b/src/components/SubmitButton/SubmitButton.jsx
new file mode 100644
index 0000000..567d923
--- /dev/null
+++ b/src/components/SubmitButton/SubmitButton.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import styles from './SubmitButton.module.css'
+
+const SubmitButton = ({ onClick }) => {
+  return (
+    <>
+      <button onClick={onClick} className={styles.submit}>
+        <img
+          className={styles.submit__image}
+          src={`${process.env.PUBLIC_URL}/assets/images/white-check.svg`}
+          alt=""
+        />
+      </button>
+    </>
+  )
+}
+
+export default SubmitButton
diff --git a/src/components/SubmitButton/SubmitButton.module.css b/src/components/SubmitButton/SubmitButton.module.css
new file mode 100644
index 0000000..bb1b015
--- /dev/null
+++ b/src/components/SubmitButton/SubmitButton.module.css
@@ -0,0 +1,20 @@
+.submit {
+  position: absolute;
+  bottom: 100px;
+  right: 150px;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  transition: 0.2s all;
+  cursor: pointer;
+}
+
+.submit:active {
+  transform: scale(0.98);
+  box-shadow: 3px 2px 22px 1px var(--color-shadow);
+}
+
+.submit__image {
+  height: 75px;
+  width: 75px;
+}
diff --git a/src/pages/Enrollment/Enrollment.jsx b/src/pages/Enrollment/Enrollment.jsx
index 2aad1de..b8bbc81 100644
--- a/src/pages/Enrollment/Enrollment.jsx
+++ b/src/pages/Enrollment/Enrollment.jsx
@@ -1,7 +1,16 @@
 import React from 'react'
+import Header from '../../components/Header/Header'
+import SubmitButton from '../../components/SubmitButton/SubmitButton'
+import FormOne from './FormOne/FormOne'
 
 const Enrollment = () => {
-  return <div>Enrollment</div>
+  return (
+    <>
+      <Header subheading="Enrollment" />
+      <FormOne />
+      <SubmitButton />
+    </>
+  )
 }
 
 export default Enrollment
diff --git a/src/pages/Enrollment/FormOne/FormOne.jsx b/src/pages/Enrollment/FormOne/FormOne.jsx
new file mode 100644
index 0000000..7233581
--- /dev/null
+++ b/src/pages/Enrollment/FormOne/FormOne.jsx
@@ -0,0 +1,49 @@
+import React from 'react'
+import styles from './FormOne.module.css'
+
+const FormOne = () => {
+  return (
+    <div className={styles.formone}>
+      <div className={styles.formone__radio}>
+        <span className={styles.formone__resident}>
+          <input
+            type="radio"
+            id="indian"
+            name="resident"
+            value="Indian Resident"
+            required
+          />
+          <label htmlFor="indian">Indian Resident</label>
+        </span>
+        <span className={styles.formone__resident}>
+          <input
+            type="radio"
+            id="indian"
+            name="resident"
+            value="Indian Resident"
+            required
+          />
+          <label htmlFor="indian">Non-Residential Indian</label>
+        </span>
+      </div>
+
+      <div className={styles.formone__fullname}>
+        <label htmlFor="fullName">Full Name</label>
+        <input
+          type="text"
+          id="fullName"
+          name="fullName"
+          value="Full Name"
+          required
+        />
+      </div>
+
+      <div className={styles.formone__dob}>
+        <label htmlFor="dob">Date of Birth</label>
+        <input type="date" id="dob" name="dob" value="Date of Birth" required />
+      </div>
+    </div>
+  )
+}
+
+export default FormOne
diff --git a/src/pages/Enrollment/FormOne/FormOne.module.css b/src/pages/Enrollment/FormOne/FormOne.module.css
new file mode 100644
index 0000000..6fbe371
--- /dev/null
+++ b/src/pages/Enrollment/FormOne/FormOne.module.css
@@ -0,0 +1,33 @@
+.formone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  font-family: 'Barlow';
+  font-size: var(--font-medium-s);
+}
+
+.formone__radio {
+  display: flex;
+  align-items: center;
+}
+
+.formone__resident {
+  display: flex;
+  align-items: center;
+  margin: 15px;
+}
+
+.formone__resident input[type='radio'] {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.formone__fullname {
+  display: flex;
+  flex-direction: column;
+}
+
+#fullName {
+  margin: 10px;
+  padding: 20px 10px;
+}
diff --git a/src/styles/GlobalVariables.css b/src/styles/GlobalVariables.css
index fd76120..a1e3384 100644
--- a/src/styles/GlobalVariables.css
+++ b/src/styles/GlobalVariables.css
@@ -1,6 +1,8 @@
 :root {
   --color-black: #000;
+  --color-shadow: rgba(0, 0, 0, 0.24);
 
   --font-large: 4rem;
   --font-medium: 2rem;
+  --font-medium-s: 1.25rem;
 }