diff --git a/src/App.js b/src/App.js
index eae0c68..717d0a1 100644
--- a/src/App.js
+++ b/src/App.js
@@ -3,7 +3,6 @@ import Home from './components/Home.jsx'
 import Header from './components/header.jsx'
 import NewForm from './components/NewForm.jsx'
 import Event from './components/Event.jsx'
-import Footer from './components/Footer.jsx'
 import axios from 'axios'
 import {
 	HashRouter as Router,
@@ -85,7 +84,6 @@ class App extends Component {
 						<Route exact path='/:id' render={(props) => <Event cities ={this.state.cities}/>} />
 					</Switch>
 				</div>
-				<Footer />
 			</Router>
 
 		)
diff --git a/src/components/Event.jsx b/src/components/Event.jsx
index 6d1c463..d564c7c 100644
--- a/src/components/Event.jsx
+++ b/src/components/Event.jsx
@@ -4,6 +4,7 @@ import EditForm from './EditForm.jsx'
 import Confirm from './Confirm.jsx'
 import Explore from './Explore.jsx'
 import { withRouter } from 'react-router-dom'
+
 let baseURL = ''
 if(process.env.NODE_ENV === 'development') {
 	baseURL = 'http://localhost:3003'
@@ -72,43 +73,47 @@ class Event extends Component {
 		const editForm = this.state.editForm
 		return (
 			<div className="container-fluid for-backgrounds full-screen">
-						<Explore className="push" cities = {this.props.cities}/>
-						<h1 className="slight-push text-center my-4">Get the Deets</h1>
-						<hr className="large push"></hr>
-						<div className="container-fluid for-backgrounds">
-							<section className="page-content-show d-flex flex-wrap justify-content-center slight-push">
-								<div className="each-item-show d-flex flex-column rounded position-relative">
-									<h5 className="each-title text-start">{ this.state.Title }</h5>
-									<p className="each-name text-start"><strong>Added By:</strong> { this.state.Creator }</p>
-									<p className="each-name text-start"><strong>Date(s):</strong> { this.state.Date }</p>
-									<p className="rounded-pill position-absolute text-center pt-1">{ this.state.Category }<i className="fas fa-icons ml-2"></i></p>
-									<i class="fas fa-pencil-alt position-absolute" onClick={ () => this.toggleEditForm() }></i>
-									<p className="each-name text-start"><strong>Description:</strong> { this.state.Description }</p>
-									<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20300319%2F20300320&text=Let%27s%20Gather%21" target="_blank" rel="noreferrer" title="Save Event in my Calendar" ><i class="far fa-calendar-alt position-absolute pt-1"></i></a>
-									<a href="https://www.facebook.com/sharer/sharer.php?u=https://mighty-savannah-40031.herokuapp.com/#/" target="_blank" rel="noreferrer">
-										<i class="fab fa-facebook-f position-absolute pt-1"></i></a>
-									<a href="https://twitter.com/intent/tweet?url=https://mighty-savannah-40031.herokuapp.com/#/&text=" target="-blank" rel="noreferrer"><i class="fab fa-twitter position-absolute pt-1"></i></a>
-									<a href="mailto:info@example.com?&subject=&cc=&bcc=&body=https://mighty-savannah-40031.herokuapp.com/#/%0A" target="_blank" rel="noreferrer"><i class="far fa-envelope position-absolute pt-1"></i></a>
-									<Confirm className="container-fluid" onConfirm={() => {
-										this.deleteEvent();
-									}}
-										body="Are you sure you want to delete this?"
-									title="⚠️ Heads Up!">
-										<i className="far fa-trash-alt position-absolute"></i>
-									</Confirm>
-								</div>
-							</section>
+				<Explore className="push" cities = {this.props.cities}/>
+				<h1 className="slight-push text-center my-4">Get the Deets</h1>
+				<hr className="large push"></hr>
+				<div className="container-fluid for-backgrounds">
+					<section className="page-content-show d-flex flex-wrap justify-content-center slight-push">
+						<div className="each-item-show d-flex flex-column rounded position-relative">
+							<h5 className="each-title text-start">{ this.state.Title }</h5>
+							<p className="each-name text-start"><strong>Added By:</strong> { this.state.Creator }</p>
+							<p className="each-name text-start"><strong>Date(s):</strong> { this.state.Date }</p>
+							<p className="rounded-pill position-absolute text-center pt-1">{ this.state.Category }<i className="fas fa-icons ml-2"></i></p>
+							<i class="fas fa-pencil-alt position-absolute" onClick={ () => this.toggleEditForm() }></i>
+							<p className="each-name text-start"><strong>Description:</strong> { this.state.Description }</p>
+							<a href="https://calendar.google.com/calendar/render?action=TEMPLATE&dates=20300319%2F20300320&text=Let%27s%20Gather%21" target="_blank" rel="noreferrer" title="Save Event in my Calendar" ><i class="far fa-calendar-alt position-absolute pt-1"></i></a>
+							<a href="https://www.facebook.com/sharer/sharer.php?u=https://mighty-savannah-40031.herokuapp.com/#/" target="_blank" rel="noreferrer">
+								<i class="fab fa-facebook-f position-absolute pt-1"></i></a>
+							<a href="https://twitter.com/intent/tweet?url=https://mighty-savannah-40031.herokuapp.com/#/&text=" target="-blank" rel="noreferrer"><i class="fab fa-twitter position-absolute pt-1"></i></a>
+							<a href="mailto:info@example.com?&subject=&cc=&bcc=&body=https://mighty-savannah-40031.herokuapp.com/#/%0A" target="_blank" rel="noreferrer"><i class="far fa-envelope position-absolute pt-1"></i></a>
+							<Confirm className="container-fluid" onConfirm={() => {
+								this.deleteEvent();
+							}}
+								body="Are you sure you want to delete this?"
+							title="⚠️ Heads Up!">
+								<i className="far fa-trash-alt position-absolute"></i>
+							</Confirm>
 						</div>
- 					<div className="for-backgrounds container-fluid full-screen">
-							{ this.state.editForm &&
-							<EditForm
-								event={ this.state }
-								handleChange={ (e) => this.handleChange(e) }
-								handleSubmit={ (e) => this.handleSubmit(e) }
-					/>
-							}
+					</section>
 				</div>
+				<div className="container-fluid full-screen">
+					{ this.state.editForm &&
+						<EditForm
+							event={ this.state }
+							handleChange={ (e) => this.handleChange(e) }
+							handleSubmit={ (e) => this.handleSubmit(e) }
+						/>
+					}
+
 				</div>
+
+			</div>
+
+
 		)
 	}
 }
diff --git a/src/components/Explore.jsx b/src/components/Explore.jsx
index ac9c6ad..09b901f 100644
--- a/src/components/Explore.jsx
+++ b/src/components/Explore.jsx
@@ -62,10 +62,10 @@ export default class Explore extends Component {
 
 				<div className="gather-here">
 					{/* after the icon, have it render city, state */}
-					<i class="fas fa-globe-americas mt-4"></i><span>City, State</span>
+					<i class="fas fa-globe-americas mt-4"></i><span className="gather-here-text">City, State</span>
 					<br></br><br></br>
 					{/* after the icon, have it render activity */}
-					<i class="fas fa-info ml-1"></i><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
+					<i class="fas fa-info ml-1"></i><span className="gather-here-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>
 				</div>
 
 
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index c4d94b5..727f35a 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -3,11 +3,16 @@ import React, { Component } from 'react'
 class Footer extends Component {
 	render() {
 		return (
-			<div>
-                <footer>
-                    <p>Web app by Jamera McNeil, Molly Carroll, and Jessica Gallagher. <a href='https://github.com/mollycarroll/gather-front-end'>View on GitHub</a></p>
-                </footer>
-            </div>
+			<div className="container-fluid footer">
+				<footer>
+					<h3 className="text-center pt-3">G A T H E R</h3>
+					<hr className="large"></hr>
+					<h5 className="text-center">G A T H E R was created by:</h5>
+					<p className="text-center footer-text pt-2">Jamera McNeil | Molly Carroll | Jessica Gallagher</p>
+					<p className="text-center"><a href='https://github.com/mollycarroll/gather-front-end' className="hover">View on GitHub</a></p>
+
+				</footer>
+			</div>
 		)
 	}
 }
diff --git a/src/components/Home.jsx b/src/components/Home.jsx
index 636b18b..7008bb1 100644
--- a/src/components/Home.jsx
+++ b/src/components/Home.jsx
@@ -1,18 +1,20 @@
 import React, { Component } from 'react'
 import EventCard from './EventCard'
+import Footer from './Footer.jsx'
 
 export default class Home extends Component {
 	render() {
 		return (
 
-			<div className="for-backgrounds">
-        <div className="container-fluid px-0 mb-5 for-backgrounds">
+			<div className="full-screen">
+        <div className="container-fluid px-0 mb-5">
           <div className="hero">
             <p className="text-center hero-text mb-0 d-flex justify-content-center real">G a t h e r</p>
             <p className="text-center hero-text reflection d-flex justify-content-center">G a t h e r</p>
           </div>
         </div>
         <EventCard events={ this.props.events }/>
+				<Footer />
   			</div>
 		)
 	}
diff --git a/src/index.css b/src/index.css
index e827783..ba2a6d8 100644
--- a/src/index.css
+++ b/src/index.css
@@ -141,12 +141,6 @@ nav {
 .hero {
   background: url(./assets/hero.jpeg) no-repeat center;
   background-size: cover;
-  box-shadow: 0 0.6px 2.2px rgba(0, 0, 0, 0.02),
-    0 1.5px 5.3px rgba(0, 0, 0, 0.028),
-    0 2.9px 10px rgba(0, 0, 0, 0.035),
-    0 5.1px 17.9px rgba(0, 0, 0, 0.042),
-    0 9.6px 33.4px rgba(0, 0, 0, 0.05),
-    0 23px 80px rgba(0, 0, 0, 0.07);
   height: 400px;
 }
 
@@ -312,11 +306,16 @@ nav {
   height: 14em;
   text-align: center;
   width: 14em;
+  min-width: 23%;
   margin: 3em auto;
   border-radius: 4px;
   box-shadow: 0 0 0 2px var(--rose-gold), 0 0.25em 0 0 var(--rose-gold);
 }
 
+.gather-here-text {
+  font-size: 1em;
+}
+
 .fa-globe-americas, .fa-info {
   color: black;
   margin-right: .5em;
@@ -330,6 +329,21 @@ nav {
   font-size: 2em;
 }
 
+.footer {
+  background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
+  box-shadow: 0px 5px 22px 0px var(--dk-grey);
+  height: 13em;
+}
+
+.footer-text {
+  font-weight: 700;
+}
+
+.hover {
+  color: var(--turquoise) !important;
+  font-weight: 700;
+}
+
 
 @keyframes fade-in {
   from {