diff --git a/frontend/public/assets/Exit_Plan_Hero.png b/frontend/public/assets/Exit_Plan_Hero.png
new file mode 100644
index 0000000..f8c11e5
Binary files /dev/null and b/frontend/public/assets/Exit_Plan_Hero.png differ
diff --git a/frontend/public/assets/Video_Holder.PNG b/frontend/public/assets/Video_Holder.PNG
new file mode 100644
index 0000000..e4c3a13
Binary files /dev/null and b/frontend/public/assets/Video_Holder.PNG differ
diff --git a/frontend/src/Email/Email.js b/frontend/src/Email/Email.js
new file mode 100644
index 0000000..59c39ba
--- /dev/null
+++ b/frontend/src/Email/Email.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Email.scss'; 
+
+const Email = () => {
+  return (
+    <div className="email">
+      
+    </div>
+  )
+};
+
+export default Email;
\ No newline at end of file
diff --git a/frontend/src/Email/Email.scss b/frontend/src/Email/Email.scss
new file mode 100644
index 0000000..14cd7ba
--- /dev/null
+++ b/frontend/src/Email/Email.scss
@@ -0,0 +1,9 @@
+@import '../index.scss'; 
+
+.email {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+}
+
diff --git a/frontend/src/Footer/Footer.js b/frontend/src/Footer/Footer.js
index 4c63d4b..5c978c6 100644
--- a/frontend/src/Footer/Footer.js
+++ b/frontend/src/Footer/Footer.js
@@ -6,13 +6,18 @@ const Footer = () => {
     <footer>
       <div className="footer-location">
         <h3>Exit Plan</h3>
+        <hr></hr>
+        <br />
         <p>123 W 12th Street,</p>
         <p>Denver, CO 12345</p>
       </div>
       <div className="footer-links">
         <h3>Useful Links</h3>
+        <hr></hr>
         <a>Customer Support</a>
+        <br/>
         <a>Emergency Resources</a>
+        <br/>
         <a>Directory</a>
       </div>
     </footer>
diff --git a/frontend/src/Footer/Footer.scss b/frontend/src/Footer/Footer.scss
index b9bb839..297eb73 100644
--- a/frontend/src/Footer/Footer.scss
+++ b/frontend/src/Footer/Footer.scss
@@ -2,18 +2,32 @@
 
 footer {
   background-color: $dark-blue; 
-  height: 200px; 
+  height: 100px; 
   display: flex; 
   flex-direction: row;
   justify-content: space-between; 
   color: $off-white;
+  align-items: center;
+  font-family: Helvetica, sans-serif; 
 }
 
 .footer-location {
-  width: 200px;
+  width: 125px;
+  margin-left: 20px;
 }
 
 .footer-links {
-  width: 200px;
+  width: 125px;
+  text-align: right;
+  margin-right: 20px;
+}
+
+h3 {
+  font-size: 18px;
+  font-style: italic;
+}
+
+p, a {
+  font-size: 12px;
 }
 
diff --git a/frontend/src/Hero/Hero.js b/frontend/src/Hero/Hero.js
new file mode 100644
index 0000000..b955c86
--- /dev/null
+++ b/frontend/src/Hero/Hero.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Hero.scss'; 
+
+const Hero = () => {
+  return (
+    <div className="hero">
+      <img className="hero-logo" src="./assets/Exit_Plan_Hero.png" alt="exit plan hero"/>
+    </div>
+  )
+};
+
+export default Hero;
\ No newline at end of file
diff --git a/frontend/src/Hero/Hero.scss b/frontend/src/Hero/Hero.scss
new file mode 100644
index 0000000..96f12c4
--- /dev/null
+++ b/frontend/src/Hero/Hero.scss
@@ -0,0 +1,16 @@
+@import '../index.scss'; 
+
+.hero {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 400px;
+}
+
+.hero-logo {
+  width: 100%; 
+  margin-top: 3%; 
+  padding-left: 10%;
+  padding-right: 10%;
+  margin-bottom: 3%;
+}
diff --git a/frontend/src/Intro/Intro.js b/frontend/src/Intro/Intro.js
new file mode 100644
index 0000000..c0f2e5b
--- /dev/null
+++ b/frontend/src/Intro/Intro.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import './Intro.scss'; 
+
+const Intro = () => {
+  return (
+    <div className="intro">
+      <div className="intro-text">
+        some text
+      </div>
+      <div className="intro-video">
+        some more text
+      </div>
+    </div>
+  )
+};
+
+export default Intro;
\ No newline at end of file
diff --git a/frontend/src/Intro/Intro.scss b/frontend/src/Intro/Intro.scss
new file mode 100644
index 0000000..a8e52f4
--- /dev/null
+++ b/frontend/src/Intro/Intro.scss
@@ -0,0 +1,20 @@
+@import '../index.scss'; 
+
+.intro {
+  background-color: $off-white; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+  flex-direction: row;
+  font-family: Helvetica, sans-serif; 
+}
+
+.intro-text {
+  width: 50%;
+  background: green;
+}
+
+.intro-video {
+  width: 50%;
+  background: purple;
+}
diff --git a/frontend/src/Link/Link.js b/frontend/src/Link/Link.js
new file mode 100644
index 0000000..657ace8
--- /dev/null
+++ b/frontend/src/Link/Link.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import './Link.scss'; 
+
+const Link = () => {
+  return (
+    <div className="link">
+      
+    </div>
+  )
+};
+
+export default Link;
\ No newline at end of file
diff --git a/frontend/src/Link/Link.scss b/frontend/src/Link/Link.scss
new file mode 100644
index 0000000..e4ddf4a
--- /dev/null
+++ b/frontend/src/Link/Link.scss
@@ -0,0 +1,8 @@
+@import '../index.scss'; 
+
+.link {
+  background-color: $light-blue; 
+  display: flex; 
+  justify-content: space-between; 
+  height: 300px;
+}
diff --git a/frontend/src/Main/Main.js b/frontend/src/Main/Main.js
index 8bab9d7..2b2c3c1 100644
--- a/frontend/src/Main/Main.js
+++ b/frontend/src/Main/Main.js
@@ -1,10 +1,18 @@
 import React from 'react';
 import './Main.scss'; 
+import Hero from '../Hero/Hero.js';
+import Intro from '../Intro/Intro.js';
+import Link from '../Link/Link.js';
+import Email from '../Email/Email.js';
+
 
 const Main = () => {
   return (
     <main>
-
+      <Hero />
+      <Intro />
+      <Link />
+      <Email />
     </main>
   )
 };