diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/EmailConfirmationFlow.jsx b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/EmailConfirmationFlow.jsx
index c7f12646..19be32aa 100644
--- a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/EmailConfirmationFlow.jsx
+++ b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/EmailConfirmationFlow.jsx
@@ -4,25 +4,33 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import progress from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/progressPage6.png';
 import newsletter from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Assets/ignitus-Images/img-Png/newsletterAcceptIcon.png';
+import {
+  Paragraph,
+  Heading2,
+} from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/typography';
+
+import * as T from '../../ignitus-WelcomeFlow/Styles/style';
+import * as C from '../Styles/style';
+
+import { RoundedPrimaryButton } from '../../../../ignitus-Shared/ignitus-DesignSystem/ignitus-Atoms/buttons';
 import { withErrorBoundary } from '../../../../ignitus-Shared/ignitus-ErrorHandlingComponents/errorBoundary';
-import '../Styles/style.scss';
 
 const EmailConfirmationFlow = () => (
-  <div className="emailConfirm">
-    <img className="progressBarSignup" src={progress} alt="progress-bar" />
-    <div className="newsletter">
-      <img src={newsletter} alt="newsletter" />
-    </div>
-    <p className="welcome">Your email has been confirmed.</p>
-    <p className="paragraph">Your verified email is sophia.crater@gmail.com</p>
-    <div className="text-center">
-      <button className="getStarted" type="button">
-        <Link to="/" className="saveText">
-          Get started
-        </Link>
-      </button>
-    </div>
-  </div>
+  <T.WelcomeContainer>
+    <T.TopSection>
+      <T.Progress src={progress} alt="progress-bar" />
+      <C.NewsletterImage src={newsletter} alt="newsletter" />
+      <C.TopMiddleSection>
+        <Heading2>Your email has been confirmed.</Heading2>
+        <Paragraph> Your verified email is sophia.crater@gmail.com</Paragraph>
+      </C.TopMiddleSection>
+    </T.TopSection>
+    <C.BottomSection>
+      <RoundedPrimaryButton>
+        <Link to="/">Get started</Link>
+      </RoundedPrimaryButton>
+    </C.BottomSection>
+  </T.WelcomeContainer>
 );
 
 export default withErrorBoundary(EmailConfirmationFlow);
diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.js b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.js
deleted file mode 100644
index ab288e6f..00000000
--- a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/* eslint-disable import/prefer-default-export */
-export { default as EmailConfirmationFlow } from './EmailConfirmationFlow';
diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.ts b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.ts
new file mode 100644
index 00000000..565de780
--- /dev/null
+++ b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Components/index.ts
@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export {default as EmailConfirmationFlow} from './EmailConfirmationFlow';
diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.scss b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.scss
deleted file mode 100644
index 2e3ae7c9..00000000
--- a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-// import ignitus token variables
-@import '../../../../ignitus-Shared/styles/ignitus-components-common.scss';
-
-.emailConfirm {
-  background-color: white;
-  height: 43rem;
-}
-
-.newsletter > img {
-  display: block;
-  margin: auto;
-  max-width: 100%;
-}
-
-.saveText {
-  color: #ffffff;
-  font-family: Raleway;
-  font-size: 1rem;
-  font-style: normal;
-  font-weight: bold;
-  line-height: 0.8rem;
-}
-
-.welcome {
-  color: #000066;
-  font-family: Raleway;
-  font-size: 2.8rem;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 3rem;
-  margin-top: 3rem;
-  text-align: center;
-  width: 100%;
-}
-
-.progressBarSignup {
-  display: block;
-  margin: auto;
-  max-height: 100%;
-  max-width: 100%;
-  padding-left: 10rem;
-  padding-right: 10rem;
-  padding-top: 4rem;
-}
-
-.getStarted {
-  background: #000066;
-  border-radius: 50px;
-  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
-  height: 2rem;
-  margin-top: 1.6rem;
-  width: 10rem;
-}
diff --git a/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.ts b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.ts
new file mode 100644
index 00000000..ee75e7f0
--- /dev/null
+++ b/src/ignitus-Authentication/ignitus-StudentSignUpFlow/ignitus-EmailConfirmationFlow/Styles/style.ts
@@ -0,0 +1,11 @@
+import styled from '@emotion/styled';
+
+export const NewsletterImage = styled.img``;
+
+export const BottomSection = styled.div`
+  margin-top: 3rem;
+`;
+
+export const TopMiddleSection = styled.div`
+  margin-top: 1rem;
+`;