diff --git a/src/scenes/home/families/facts/facts.css b/src/scenes/home/families/facts/facts.css
index 33102ee2d..1bb049375 100644
--- a/src/scenes/home/families/facts/facts.css
+++ b/src/scenes/home/families/facts/facts.css
@@ -1,26 +1,54 @@
-
 .facts {
-  display: 'flex';
-  background-color: '#E2E2E2';
-  align-items: 'center';
-  padding: '96px';
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 50px 0;
+}
+
+@media screen and (max-width: 1024px) {
+  .facts {
+    display: block;
+  }
 }
-.factsHeading {
-  font-size: '50px';
-  text-align: 'center';
+
+.factsHeading h2 {
+  font-size: 50px;
+  width: 100%;
 }
+
 .factsList {
-  color: '#445366';
-  font-size: '24px';
-  padding: '0 32px';
+  flex: .48;
+  color: #445366;
+  font-size: 24px;
+}
+
+.factsList ul {
+  width: 80%;
+  margin: 0 auto;
 }
+
+.factsList .footnote {
+  font-size: 80%;
+  font-style: italic;
+  text-align: center;
+  width: 80%;
+}
+
 .factsRight {
-  padding: '0 32px'
+  background-position: 90% 25%;
+  border-radius: 40px;
+  flex: .48;
+  height: 50vh;
+  margin-top: 65px;
+  overflow: hidden;
 }
-.factsImage {
-  width: '30vw';
-  border-radius: '40px';
+
+@media screen and (max-width: 1150px) {
+  .factsRight {
+    background-position: 80% 25%;
+  }
 }
+
 .factItem {
-  padding-bottom: '24px';
-}
\ No newline at end of file
+  padding-bottom: 24px;
+}
diff --git a/src/scenes/home/families/facts/facts.js b/src/scenes/home/families/facts/facts.js
index 6c6c03725..51011d092 100644
--- a/src/scenes/home/families/facts/facts.js
+++ b/src/scenes/home/families/facts/facts.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Heading from 'shared/components/heading/heading';
 import styles from './facts.css';
 import family3 from '../../../../images/Family-3.jpg';
 
@@ -8,7 +9,7 @@ class Facts extends Component {
       <div className={styles.facts}>
         <div className={styles.factsList}>
           <div className={styles.factsHeading}>
-            <h5>The Facts</h5>
+            <Heading text="The Facts" />
           </div>
           <ul>
             <li className={styles.factItem}>
@@ -28,10 +29,11 @@ class Facts extends Component {
               Only 19% of military spouses have adequate full-time employment.
             </li>
           </ul>
+          <div className={styles.footnote}>
+            <span>*Source </span><strong>pointsofflight.org</strong>
+          </div>
         </div>
-        <div className={styles.factsRight}>
-          <img className={styles.factsImage} src={family3} alt="" />
-        </div>
+        <div className={styles.factsRight} style={{ backgroundImage: `url(${family3})` }}>{null}</div>
       </div>
     );
   }
diff --git a/src/scenes/home/families/families.css b/src/scenes/home/families/families.css
new file mode 100644
index 000000000..ba001cb5a
--- /dev/null
+++ b/src/scenes/home/families/families.css
@@ -0,0 +1,17 @@
+.quoteSection {
+  margin-top: 50vh;
+  position: relative;
+}
+
+@media screen and (max-width: 1700px) {
+  .factsSection > *,
+  .goalsSection > * {
+    width: 90%;
+  }
+}
+
+@media screen and (max-width: 800px) {
+  .quoteSection {
+    margin-top: 200px;
+  }
+}
diff --git a/src/scenes/home/families/families.js b/src/scenes/home/families/families.js
new file mode 100644
index 000000000..5bfa9ed49
--- /dev/null
+++ b/src/scenes/home/families/families.js
@@ -0,0 +1,39 @@
+import React, { Component } from 'react';
+// import family3 from '../../../images/Family-3.jpg';
+// import { Link } from 'react-router-dom';
+import Join from 'shared/components/join/join';
+import Donate from 'shared/components/donate/donate';
+import Section from 'shared/components/section/section';
+import HeaderClipMaskLeft from 'shared/components/headerClipMaskLeft/headerClipMaskLeft';
+import HeaderClipMaskRight from 'shared/components/headerClipMaskRight/headerClipMaskRight';
+import Quote from './jumboQuote/jumboQuote';
+import Facts from './facts/facts';
+import Goals from './goals/goals';
+import styles from './families.css';
+
+class Families extends Component {
+  render() {
+    return (
+      <div>
+        <Section className={styles.quoteSection} theme="white">
+          <HeaderClipMaskLeft />
+          <HeaderClipMaskRight />
+          <Quote />
+        </Section>
+
+        <Section className={styles.factsSection}>
+          <Facts />
+        </Section>
+
+        <Section className={styles.goalsSection} theme="white">
+          <Goals />
+        </Section>
+
+        <Donate />
+        <Join />
+      </div>
+    );
+  }
+}
+
+export default Families;
diff --git a/src/scenes/home/families/goals/goals.css b/src/scenes/home/families/goals/goals.css
new file mode 100644
index 000000000..a53ed08c7
--- /dev/null
+++ b/src/scenes/home/families/goals/goals.css
@@ -0,0 +1,45 @@
+.goals {
+  width: 100%;
+}
+
+.goalsHeading h2 {
+  font-size: 50px;
+  width: 100%;
+}
+
+.goalsContent {
+  margin: 0 auto;
+  width: 80%;
+}
+
+@media screen and (max-width: 1024px) {
+  .goalsContent {
+    width: 95%;
+  }
+}
+
+.goalsContent p,
+.goalsContent ul li {
+  font-size: 24px;
+}
+
+.goalsContent ul li {
+  background-image: url('../../../../images/logos/small-blue-medal.png');
+  background-position: left center;
+  background-repeat: no-repeat;
+  background-size: 60px;
+  list-style: none;
+  margin: 0;
+  padding: 36px 0 36px 97px;
+}
+
+@media screen and (max-width: 1024px) {
+  .goalsContent ul {
+    padding: 0;
+  }
+
+  .goalsContent ul li {
+    background-size: 40px;
+    padding: 16px 0 16px 67px;
+  }
+}
diff --git a/src/scenes/home/families/goals/goals.js b/src/scenes/home/families/goals/goals.js
new file mode 100644
index 000000000..7e60e15b4
--- /dev/null
+++ b/src/scenes/home/families/goals/goals.js
@@ -0,0 +1,26 @@
+import React, { Component } from 'react';
+import Heading from 'shared/components/heading/heading';
+import styles from './goals.css';
+
+class Goals extends Component {
+  render() {
+    return (
+      <div className={styles.goals}>
+        <div className={styles.goalsHeading}>
+          <Heading text="Our Goals" />
+        </div>
+        <div className={styles.goalsContent}>
+          <p>When a loved one deploys, we understand the hardships that family members who are left behind can endure. There can be a lot of responsibilities to juggle. Operation Code works to ease the burden on military families by opening our programs and services up to military spouses, children and grandchildren.</p>
+          <ul>
+            <li>We strive to make software development more accessible not only to our veteran and military members, but also to their spouses and extended family.</li>
+            <li>Our community works to increase the interaction and engagement between military families across all our social channels.</li>
+            <li>Operation Code programs, scholarships and services are open to military families to help cultivate the learning process, and our employer services can work with family members to get them placed in software development jobs.</li>
+            <li>In the future, Operation Code plans to do a curriculum and grow a community for military children who are interested in learning how to code.</li>
+          </ul>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Goals;
diff --git a/src/scenes/home/families/jumboQuote/jumboQuote.css b/src/scenes/home/families/jumboQuote/jumboQuote.css
index c98c2c8dd..0e0491618 100644
--- a/src/scenes/home/families/jumboQuote/jumboQuote.css
+++ b/src/scenes/home/families/jumboQuote/jumboQuote.css
@@ -1,15 +1,26 @@
-
 .quotes {
   color: #445366;
+  max-width: 1100px;
+  padding: 50px 0;
 }
+
 .quoteBody {
-  text-align: center;
   color: #445366;
+  font-family: "Noto Serif", sans-serif;
+  font-weight: normal;
+  text-align: center;
 }
+
 .quoteAuthor {
-  text-align: right;
   color: #445366;
+  font-family: "Noto Serif", sans-serif;
+  font-weight: normal;
+  margin-top: 20px;
+  text-align: right;
 }
-.quoteIcon {
-  vertical-align: top;
+
+@media only screen and (max-width: 800px) {
+  .quoteAuthor {
+    text-align: center;
+  }
 }
diff --git a/src/scenes/home/families/jumboQuote/jumboQuote.js b/src/scenes/home/families/jumboQuote/jumboQuote.js
index 36c04110d..9b8d41512 100644
--- a/src/scenes/home/families/jumboQuote/jumboQuote.js
+++ b/src/scenes/home/families/jumboQuote/jumboQuote.js
@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import Promise from 'bluebird';
-import { FaQuoteLeft, FaQuoteRight } from 'react-icons/lib/fa';
 import quotes from './quotes.json';
 import styles from './jumboQuote.css';
 
@@ -27,9 +26,7 @@ class JumboQuote extends Component {
     return (
       <div className={styles.quotes}>
         <h4 className={styles.quoteBody}>
-          <FaQuoteLeft className={styles.quoteIcon} />
-          {this.state.quote.body}
-          <FaQuoteRight className={styles.quoteIcon} />
+          &ldquo;{this.state.quote.body}&rdquo;
         </h4>
         <h5 className={styles.quoteAuthor}>{this.state.quote.author} </h5>
       </div>
diff --git a/src/scenes/home/home.js b/src/scenes/home/home.js
index 07d61f63c..eb4618a4b 100644
--- a/src/scenes/home/home.js
+++ b/src/scenes/home/home.js
@@ -29,6 +29,7 @@ import MentorRequest from './mentorRequest/mentorRequest';
 import SquadsNew from './squads/squadsNew/squadsNew';
 import CodeSchools from './codeSchools/codeSchools';
 import About from './about/about';
+import Families from './families/families';
 import Press from './press/press';
 import ResetPassword from './resetPassword/resetPassword';
 import Challenge from './challenge/challenge';
@@ -56,7 +57,7 @@ class Home extends Component {
   }
 
   setBgImage(location) {
-    if (location.pathname === '/') {
+    if (location.pathname === '/' || location.pathname === '/families') {
       this.setState({ bgChanged: !(this.state.bgImage), bgImage: true, bgImageUrl: familyImage });
     } else {
       this.setState({ bgChanged: this.state.bgImage, bgImage: false, bgImageUrl: null });
@@ -158,6 +159,10 @@ class Home extends Component {
               path="/about"
               component={About}
             />
+            <Route
+              path="/families"
+              component={Families}
+            />
             <Route
               path="/press"
               component={Press}
diff --git a/src/shared/components/headerClipMaskLeft/headerClipMaskLeft.css b/src/shared/components/headerClipMaskLeft/headerClipMaskLeft.css
new file mode 100644
index 000000000..20bb982aa
--- /dev/null
+++ b/src/shared/components/headerClipMaskLeft/headerClipMaskLeft.css
@@ -0,0 +1,7 @@
+.mask {
+  bottom: 99%;
+  fill: #FFFFFF;
+  position: absolute;
+  left: 0;
+  width: 50%;
+}
diff --git a/src/shared/components/headerClipMaskLeft/headerClipMaskLeft.js b/src/shared/components/headerClipMaskLeft/headerClipMaskLeft.js
new file mode 100644
index 000000000..f961ed9f8
--- /dev/null
+++ b/src/shared/components/headerClipMaskLeft/headerClipMaskLeft.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import styles from './headerClipMaskLeft.css';
+
+class HeaderClipMaskLeft extends Component {
+  render() {
+    return (
+      <svg className={styles.mask} x="0px" y="0px" viewBox="0 0 612 97" style={{ enableBackground: 'new 0 0 612 97' }}>
+        <path d="M614.8,97H0V0C0,0,317.7,97,614.8,97z" />
+      </svg>
+    );
+  }
+}
+
+export default HeaderClipMaskLeft;
diff --git a/src/shared/components/headerClipMaskRight/headerClipMaskRight.css b/src/shared/components/headerClipMaskRight/headerClipMaskRight.css
new file mode 100644
index 000000000..ca92ddcbf
--- /dev/null
+++ b/src/shared/components/headerClipMaskRight/headerClipMaskRight.css
@@ -0,0 +1,7 @@
+.mask {
+  bottom: 99%;
+  fill: #FFFFFF;
+  position: absolute;
+  right: 0px;
+  width: 50%;
+}
diff --git a/src/shared/components/headerClipMaskRight/headerClipMaskRight.js b/src/shared/components/headerClipMaskRight/headerClipMaskRight.js
new file mode 100644
index 000000000..ca9c61519
--- /dev/null
+++ b/src/shared/components/headerClipMaskRight/headerClipMaskRight.js
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import styles from './headerClipMaskRight.css';
+
+class HeaderClipMaskRight extends Component {
+  render() {
+    return (
+      <svg className={styles.mask} x="0px" y="0px" viewBox="0 0 612 97" style={{ enableBackground: 'new 0 0 612 97' }}>
+        <path d="M0,97h615V0C615,0,297.1,97,0,97z" />
+      </svg>
+    );
+  }
+}
+
+export default HeaderClipMaskRight;