diff --git a/package-lock.json b/package-lock.json
index 1d1738f..e643bbe 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4221,8 +4221,7 @@
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "optional": true
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
         },
         "slice-ansi": {
           "version": "3.0.0",
@@ -9624,14 +9623,12 @@
         "ansi-regex": {
           "version": "5.0.0",
           "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
-          "optional": true
+          "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
         },
         "ansi-styles": {
           "version": "4.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
           "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
-          "optional": true,
           "requires": {
             "@types/color-name": "^1.1.1",
             "color-convert": "^2.0.1"
@@ -9657,7 +9654,6 @@
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
           "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-          "optional": true,
           "requires": {
             "color-name": "~1.1.4"
           }
@@ -9665,8 +9661,7 @@
         "color-name": {
           "version": "1.1.4",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-          "optional": true
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
         },
         "emoji-regex": {
           "version": "8.0.0",
@@ -9683,8 +9678,7 @@
         "is-fullwidth-code-point": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-          "optional": true
+          "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg=="
         },
         "slice-ansi": {
           "version": "3.0.0",
@@ -9712,7 +9706,6 @@
           "version": "6.0.0",
           "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
           "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
-          "optional": true,
           "requires": {
             "ansi-regex": "^5.0.0"
           }
@@ -14831,7 +14824,6 @@
       "version": "0.18.0",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.18.0.tgz",
       "integrity": "sha512-agTSHR1Nbfi6ulI0kYNK0203joW2Y5W4po4l+v03tOoiJKpTBbxpNhWDvqc/4IcOw+KLmSiQLTasZ4cab2/UWQ==",
-      "optional": true,
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
diff --git a/src/colors.css b/src/colors.css
index 4398e98..bb939a5 100644
--- a/src/colors.css
+++ b/src/colors.css
@@ -3,4 +3,5 @@
   --black: #0F1721;
   --gray: #757575;
   --blue: #00455D;
+  --white: #FEFEFE;
 }
diff --git a/src/components/footer.js b/src/components/footer.js
new file mode 100644
index 0000000..5468ad9
--- /dev/null
+++ b/src/components/footer.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import './intro.css';
+
+export default function Footer() {
+    return(
+  <div className="footer-wrapper">
+    <div className="footer-left-column">
+      <h1>
+        <span className="footer-big">Code For Syracuse</span>
+        </h1>
+        <p className="footer-byline">
+        About
+      </p>
+      <p className="footer-byline">
+        Volunteer
+      </p>
+      <p className= "footer-byline">
+        Civic Data Sources
+      </p>
+    </div>
+ 
+<div className="footer-right-column">
+<h1>
+        <span className="footer-big">Contact Us</span>
+        </h1>
+        <p className="footer-byline">
+        Email: <a href= "mailto: hello@codeforsyracuse.org">hello@codeforsyracuse.org</a> 
+      </p>
+      <p className="footer-byline">
+      Slack: Join the <a href="https://slackacuse.herokuapp.com/">Syracuse.io</a> Slack group
+      </p>
+      <p className= "footer-byline">
+      Twitter: <a href="https://twitter.com/codeforsyracuse">@CodeForSyracuse</a> 
+      </p>
+      <p className= "footer-byline">
+      Meetup: <a href="https://www.meetup.com/Code-for-Syracuse/">Code For Syracuse</a>
+      </p>
+</div>
+</div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/intro.css b/src/components/intro.css
index c59752f..b6b818b 100644
--- a/src/components/intro.css
+++ b/src/components/intro.css
@@ -140,3 +140,48 @@
   width: 100%;
   border-radius: 4px;
 }
+
+/* ---------------------------------------------------------------------------- */
+/* Footer */
+/* ------------------------------------------------------------------------------ */
+.footer-wrapper {
+  display: flex;
+  padding-top: 2880px;
+  padding-left: 50px;
+  padding-right: 50px;
+
+  margin: 0px auto;
+  background: white;
+}
+
+.footer-left-column {
+  width: 50%;
+  margin-right: 75px;
+}
+
+.footer-right-column {
+  width: 50%;
+  margin-left: 75px;
+}
+
+.footer-big {
+  color: var(--black);
+  font-size: 24px;
+  font-style: normal;
+  font-weight: bold;
+  line-height: 33px;
+}
+
+.footer-byline {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 22px;
+  color: var(--black);
+}
+
+.footer-byline a {
+  font-size: 16px;
+  font-weight: bold;
+  line-height: 22px;
+  color: var(--orange);
+}
\ No newline at end of file
diff --git a/src/components/layout.js b/src/components/layout.js
index 1f7d726..cc9f44d 100644
--- a/src/components/layout.js
+++ b/src/components/layout.js
@@ -11,6 +11,7 @@ import { useStaticQuery, graphql } from "gatsby"
 
 import Header from "./header"
 import "./layout.css"
+import Footer from "./footer"
 
 const Layout = ({ children }) => {
   const data = useStaticQuery(graphql`
diff --git a/src/pages/index.js b/src/pages/index.js
index bc8e824..5fb15ac 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -2,22 +2,19 @@ import React from "react"
 import { Link } from "gatsby"
 
 import Layout from "../components/layout"
-import Image from "../components/image"
+
 import SEO from "../components/seo"
 
-import Intro from '../components/intro';
+import Intro from '../components/intro'
+
+import Footer from '../components/footer';
 
 const IndexPage = () => (
   <div>
     <Intro />
     <Layout>
       <SEO title="Home" />
-      <h1>Hi people</h1>
-      <p>Welcome to your new Gatsby site.</p>
-      <p>Now go build something great.</p>
-      <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
-        <Image />
-      </div>
+      <Footer />
       <Link to="/page-2/">Go to page 2</Link>
     </Layout>
   </div>