diff --git a/client/src/components/Contact.js b/client/src/components/Contact.js
index 07bdb5692..d0914b61b 100644
--- a/client/src/components/Contact.js
+++ b/client/src/components/Contact.js
@@ -3,10 +3,54 @@ import React from 'react'
 const Contact = () => {
   return (
     <div>
-      <div className="container">
-        <h4 className="center">Contact</h4>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae repudiandae repellat illo magni eligendi cupiditate voluptates eius nam voluptate. Incidunt nihil ullam quae quia officia quaerat, deserunt eligendi explicabo totam?</p>
+    <section class="section container scrollspy" id="contact">
+      <div class="row">
+        <div class="col s12 l5">
+          <h2 class="indigo-text text-darken-4">Get in Touch</h2>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
+          <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
+          <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
+        </div>
+        <div class="col s12 l5 offset-l2">
+          <form>
+            <div class="input-field">
+              <i class="material-icons prefix">email</i>
+              <input type="email" id="email"/>
+              <label for="email">Your Email</label>
+            </div>
+            <div class="input-field">
+              <i class="material-icons prefix">message</i>
+              <textarea id="message" class="materialize-textarea" cols="20" rows="20"></textarea>
+              <label for="message">Your Message</label>
+            </div>
+            <div class="input-field">
+              <i class="material-icons prefix">date_range</i>
+              <input type="text" id="date" class="datepicker"/>
+              <label for="date">Choose a date you need me for...</label>
+            </div>
+            <div class="input-field">
+              <p>Services required:</p>
+              <p>
+                <label>
+                  <input type="checkbox"/>
+                  <span>Photography</span>
+                </label>
+              </p>
+              <p>
+                <label>
+                  <input type="checkbox"/>
+                  <span>Photo Editing</span>
+                </label>
+              </p>
+            </div>
+            <div class="input-field center">
+              <button class="btn">Submit</button>
+            </div>
+          </form>
+        </div>
       </div>
+    </section>
     </div>
   )
 }
diff --git a/client/src/components/Home.js b/client/src/components/Home.js
index 5566de9fc..a3a40ac48 100644
--- a/client/src/components/Home.js
+++ b/client/src/components/Home.js
@@ -1,47 +1,99 @@
 import React, { Component } from 'react'
-import axios from 'axios'
-import { Link } from 'react-router-dom'
-import Pokeball from '../pokeball.png'
+
+// Images
+
+import PortraitImage from '../img/portrait.jpg'
+import CityImage from '../img/city.jpg'
+import NatureImage from '../img/nature.jpg'
+import StreetImage from '../img/street.jpg'
+import StarsImage from '../img/stars.jpg'
 
 class Home extends Component {
-  state = {
-    posts: []
-  }
-  componentDidMount(){
-    axios.get('https://jsonplaceholder.typicode.com/posts/')
-      .then(res => {
-        console.log(res);
-        this.setState({
-          posts: res.data.slice(0,10)
-        });
-      })
-  }
+
   render(){
-    const { posts } = this.state
-    const postList = posts.length ? (
-      posts.map(post => {
-        return (
-          <div className="post card" key={post.id}>
-            <img src={Pokeball} alt="A Pokeball" />
-            <div className="card-content">
-              <Link to={'/' + post.id}>
-                <span className="card-title red-text">{post.title}</span>
-              </Link>
-              <p>{post.body}</p>
-            </div>
-          </div>
-        )
-      })
-    ) : (
-      <div className="center">No posts to show</div>
-    );
 
     return (
       <div>
-        <div className="container home">
-          <h4 className="center">Home</h4>
-          {postList}
+
+      <section className="container section scrollspy" id="photos">
+        <div className="row">
+          <div className="col s12 l4">
+              <img src={PortraitImage} alt="" className="responsive-img materialboxed"></img>
+          </div>
+          <div className="col s12 l6 offset-l1">
+            <h2 className="indigo-text text-darken-4">Portraits</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
+          </div>
         </div>
+        <div className="row">
+          <div className="col s12 l4 offset-l1 push-l7">
+              <img src={CityImage} alt="" className="responsive-img materialboxed"></img>
+          </div>
+          <div className="col s12 l6 offset-l1 pull-l5 right-align">
+            <h2 className="indigo-text text-darken-4">Cityscapes</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col s12 l4">
+              <img src={NatureImage} alt="" className="responsive-img materialboxed"></img>
+          </div>
+          <div className="col s12 l6 offset-l1">
+            <h2 className="indigo-text text-darken-4">Nature</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
+          </div>
+        </div>
+      </section>
+
+
+      <div className="parallax-container">
+        <div className="parallax">
+          <img src={StreetImage} alt="" className="responsive-img"></img>
+        </div>
+      </div>
+
+
+      <section className="section container scrollspy" id="services">
+        <div className="row">
+          <div className="col s12 l4">
+            <h2 className="indigo-text text-darken-4">What I do..</h2>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
+            <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
+          </div>
+          <div className="col s12 l6 offset-l2">
+
+            <ul className="tabs">
+              <li className="tab col s6">
+                <a href="#photography" className="active indigo-text text-darken-4">Photography</a>
+              </li>
+              <li className="tab col s6">
+                <a href="#editing" className="indigo-text text-darken-4">Editing</a>
+              </li>
+            </ul>
+            <div id="photography" className="col s12">
+                <p className="flow-text indigo-text text-darken-4">Photography</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
+                <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
+            </div>
+            <div id="editing" className="col s12">
+                <p className="flow-text indigo-text text-darken-4">Editing</p>
+                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum at lacus congue, suscipit elit nec, tincidunt orci.</p>
+                <p>Mauris dolor augue, vulputate in pharetra ac, facilisis nec libero. Fusce condimentum gravida urna, vitae scelerisque erat ornare nec.</p>
+            </div>
+            </div>
+          </div>
+      </section>
+
+
+      <div className="parallax-container">
+        <div className="parallax">
+          <img src={StarsImage} alt="" className="responsive-img"></img>
+        </div>
+      </div>
+
+
+
+
       </div>
     )
   }
diff --git a/client/src/components/Navbar.js b/client/src/components/Navbar.js
index 1e504a8d5..339fbf0f7 100644
--- a/client/src/components/Navbar.js
+++ b/client/src/components/Navbar.js
@@ -1,21 +1,46 @@
 import React from 'react';
-import { Link, NavLink, withRouter } from 'react-router-dom'
+import { NavLink, withRouter } from 'react-router-dom'
 
 const Navbar = (props) => {
   return (
-    <nav className="nav-wrapper red darken-3">
-      <div className="container">
-        <Link className="brand-logo" to="/">Advanced Algos Users Module</Link>
-        <ul className="right">
-          <li><NavLink exact to="/">Home</NavLink></li>
-          <li><NavLink to='/profile'>Profile</NavLink></li>
-          <li><NavLink to='/browse'>Browse</NavLink></li>
-          <li><NavLink to='/search'>Search</NavLink></li>
-          <li><NavLink to='/contact'>Contact</NavLink></li>
-          <li><NavLink to='/about'>About</NavLink></li>
-        </ul>
-      </div>
-    </nav>
+    <header>
+      <nav className="nav-wrapper transparent">
+        <div className="container">
+          <a href="http://www.advancedalgos.net" className="brand-logo">Advanced Algos Users Module</a>
+          <a href="" className="sidenav-trigger" data-target="mobile-menu">
+            <i className="material-icons">menu</i>
+          </a>
+          <ul className="right hide-on-med-and-down">
+            <li><NavLink exact to="/">Home</NavLink></li>
+            <li><NavLink to='/profile'>Profile</NavLink></li>
+            <li><NavLink to='/browse'>Browse</NavLink></li>
+            <li><NavLink to='/search'>Search</NavLink></li>
+            <li><NavLink to='/contact'>Contact</NavLink></li>
+            <li><NavLink to='/about'>About</NavLink></li>
+            <li><a href="http://modules.advancedalgos.net">Modules</a></li>
+
+            <li><a href="" className="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Instagram">
+              <i className="fab fa-instagram"></i>
+            </a></li>
+            <li><a href="" className="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Facebook">
+              <i className="fab fa-facebook"></i>
+            </a></li>
+            <li><a href="" className="tooltipped btn-floating btn-small indigo darken-4" data-position="bottom" data-tooltip="Twitter">
+              <i className="fab fa-twitter"></i>
+            </a></li>
+
+          </ul>
+          <ul className="sidenav grey lighten-2" id="mobile-menu">
+            <li><NavLink exact to="/">Home</NavLink></li>
+            <li><NavLink to='/profile'>Profile</NavLink></li>
+            <li><NavLink to='/browse'>Browse</NavLink></li>
+            <li><NavLink to='/search'>Search</NavLink></li>
+            <li><NavLink to='/contact'>Contact</NavLink></li>
+            <li><NavLink to='/about'>About</NavLink></li>
+          </ul>
+        </div>
+      </nav>
+</header>
   )
 }
 
diff --git a/client/src/components/Search.js b/client/src/components/Search.js
index 7468b3d1b..719b161e4 100644
--- a/client/src/components/Search.js
+++ b/client/src/components/Search.js
@@ -1,14 +1,50 @@
-import React from 'react'
+import React, { Component } from 'react'
+import axios from 'axios'
+import { Link } from 'react-router-dom'
+import Pokeball from '../pokeball.png'
 
-const Search = () => {
-  return (
-    <div>
-      <div className="container">
-        <h4 className="center">Search</h4>
-        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae repudiandae repellat illo magni eligendi cupiditate voluptates eius nam voluptate. Incidunt nihil ullam quae quia officia quaerat, deserunt eligendi explicabo totam?</p>
+class Search extends Component {
+  state = {
+    posts: []
+  }
+  componentDidMount(){
+    axios.get('https://jsonplaceholder.typicode.com/posts/')
+      .then(res => {
+        console.log(res);
+        this.setState({
+          posts: res.data.slice(0,10)
+        });
+      })
+  }
+  render(){
+    const { posts } = this.state
+    const postList = posts.length ? (
+      posts.map(post => {
+        return (
+          <div className="post card" key={post.id}>
+            <img src={Pokeball} alt="A Pokeball" />
+            <div className="card-content">
+              <Link to={'/' + post.id}>
+                <span className="card-title red-text">{post.title}</span>
+              </Link>
+              <p>{post.body}</p>
+            </div>
+          </div>
+        )
+      })
+    ) : (
+      <div className="center">No posts to show</div>
+    );
+
+    return (
+      <div>
+        <div className="container home">
+          <h4 className="center">Search</h4>
+          {postList}
+        </div>
       </div>
-    </div>
-  )
+    )
+  }
 }
 
 export default Search
diff --git a/client/src/img/city.jpg b/client/src/img/city.jpg
new file mode 100644
index 000000000..d68a6e5ce
Binary files /dev/null and b/client/src/img/city.jpg differ
diff --git a/client/src/img/man.jpg b/client/src/img/man.jpg
new file mode 100644
index 000000000..c794190cf
Binary files /dev/null and b/client/src/img/man.jpg differ
diff --git a/client/src/img/nature.jpg b/client/src/img/nature.jpg
new file mode 100644
index 000000000..46d9cd096
Binary files /dev/null and b/client/src/img/nature.jpg differ
diff --git a/client/src/img/portrait.jpg b/client/src/img/portrait.jpg
new file mode 100644
index 000000000..628cad284
Binary files /dev/null and b/client/src/img/portrait.jpg differ
diff --git a/client/src/img/stars.jpg b/client/src/img/stars.jpg
new file mode 100644
index 000000000..1b47ce270
Binary files /dev/null and b/client/src/img/stars.jpg differ
diff --git a/client/src/img/street.jpg b/client/src/img/street.jpg
new file mode 100644
index 000000000..64c8fdb47
Binary files /dev/null and b/client/src/img/street.jpg differ