diff --git a/client/src/components/AccountForm/index.js b/client/src/components/AccountForm/index.js
index 1fe4f6c..a2ea864 100644
--- a/client/src/components/AccountForm/index.js
+++ b/client/src/components/AccountForm/index.js
@@ -94,7 +94,6 @@ export default class AccountForm extends Component {
       <button type="button" className={[style.formChild, style.regBtn].join(' ')}
         onClick={this.routeToRegister}>CREATE AN ACCOUNT</button>
     </div>;
-    let link1 = "";
     let link2 = <p class={style.link2}><a href="/forgot-password">forgot password?</a></p>;
 
     if(path === REGISTER_PATH){
@@ -106,23 +105,36 @@ export default class AccountForm extends Component {
         <input class={style.formChild} name="confirm_password" type="password" placeholder="confirm password"
           value={confirm_password} onInput={linkState(this, 'confirm_password')} required/>;
       submit_button = <button class={style.formChild}>SUBMIT</button>;
-      link1 = <p class={style.formChild}><a href="/signin">Sign in</a></p>;
       link2 = "";
     }
     
     if(path === RESET_PATH){
       form_header = "Reset Password";
-      email_input = <div>Email: <b>{user ? user.email : ''}</b><input name="email" type="hidden" value={user ? user.email : ''}/></div>;
-      password_input =  <div>Current password: <input id="password" name="password" type="password" value={password} onInput={linkState(this, 'password')}/></div>;
-      new_password_input = <div>New password: <input name="new_password" type="password" value={new_password} onInput={linkState(this, 'new_password')}/></div>;
-      confirm_password_input = <div>Confirm new password: <input name="confirm_password" type="password" value={confirm_password} onInput={linkState(this, 'confirm_password')}/></div>;
-      submit_button = <div><button>Reset!</button></div>;;
-      link1 = "";
+      name_input =
+        <div>
+          <p>To change user info:</p>
+          <input class={style.formChild} name="name" type="text" placeholder="Enter new name"
+            value={name} onInput={linkState(this, 'name')}/>
+          <input class={style.formChild} id="email" name="email" type="email" placeholder='Enter new email address' 
+            value={email} onInput={linkState(this, 'email')}/>
+      </div>;
+      email_input = "";
+      password_input =
+        <div>
+          <p>To change password:</p>
+          <input class={style.formChild} id="password" name="password" type="password" placeholder="Enter current password"
+            value={password} onInput={linkState(this, 'password')}/>
+          <input class={style.formChild} name="new_password" type="password" placeholder="Enter new password"
+            value={new_password} onInput={linkState(this, 'new_password')}/>
+          <input class={style.formChild} name="confirm_password" type="password" placeholder="Confirm new password"
+            value={confirm_password} onInput={linkState(this, 'confirm_password')}/>
+        </div>;
+      submit_button = <button class={style.formChild}>Update</button>;
       link2 = "";
     }
       return (
         <div class={style.inherit}>
-          <img class={style.logo} src='../../assets/logos/navi_logo_small.png' alt='Navi logo' />
+          <img class={style.logo} src='../../assets/icons/leaflet/SVG/darkLogo.svg' alt='Navi logo' />
           <div>{form_message}</div>
           <div>
             <form class={style.form} onSubmit={this.doSubmit}>
@@ -132,12 +144,10 @@ export default class AccountForm extends Component {
               {new_password_input}
               {confirm_password_input}
               {submit_button}
-              {link1}
             </form>
           </div>
           {link2}
         </div>
       );
     }
-  // }
 }
diff --git a/client/src/components/AccountForm/style.css b/client/src/components/AccountForm/style.css
index 8688dd3..c16a15b 100644
--- a/client/src/components/AccountForm/style.css
+++ b/client/src/components/AccountForm/style.css
@@ -1,10 +1,3 @@
-
-.signOut a{
-    padding: 5px;
-    font-weight: bold;
-    color: green;
-}
-
 .inherit {
     display: inherit;
     height: inherit;
@@ -15,11 +8,12 @@
     display: inherit;
     margin: auto;
     padding: 2vh;
+    width: 50%;
 }
 
 .form {
     display: grid;
-    padding: 5vh;
+    padding: 0 5vh;
     height: 70vh;
     align-content: flex-start;
 }
@@ -70,16 +64,16 @@
 .link2 {
     display: block;
     position: fixed;
-    right: 0px;
-    padding: 2vh;
+    right: 5vw;
+    bottom: 1vh;
     font-size: 1.1em;
     color: blue;
 }
 
 button {
-    background-color: turquoise;
+    background-color: #5A98A1;
 }
 
 .regBtn {
-    background-color: darkcyan;
-}
\ No newline at end of file
+    background-color: #2c5b61;
+}
diff --git a/client/src/components/ForgotPasswordForm/index.js b/client/src/components/ForgotPasswordForm/index.js
index 1a83853..80b1841 100644
--- a/client/src/components/ForgotPasswordForm/index.js
+++ b/client/src/components/ForgotPasswordForm/index.js
@@ -5,17 +5,16 @@ import style from './style';
 
 export default class ForgotPasswordForm extends Component {
     render() {
-        return (<div class={style['forgot-password-form']}>
-
-            <h1>We will send you a temporary password, enter your email address</h1>
-            <form action="/">
-                <span>Email: </span><input type="text" name="email"/><br/>
-                <br/>
-                <input type="submit" value="Submit"/>
+        return (
+        <div class={style['forgot-password-form']}>
+            <h2>Forgot Your Password?</h2>
+            <p>Enter your email address below to reset your password.</p>
+            <form action="/" class={style.form}>
+                <input type="email" name="email" placeholder="email address"
+                  class={style.formChild} required/>
+                <button type="button" class={style.formChild}>RESET PASSWORD</button>
             </form>
-            <a class={style.active} href="/register">register</a>
-            <br/>
-            <a class={style.active} href="/signin">sign in</a>
+            <p>Not a member? <a href="/register">Sign up!</a></p>
         </div>);
     }
 }
diff --git a/client/src/components/ForgotPasswordForm/style.css b/client/src/components/ForgotPasswordForm/style.css
index 7a68d82..4dd1649 100644
--- a/client/src/components/ForgotPasswordForm/style.css
+++ b/client/src/components/ForgotPasswordForm/style.css
@@ -1,5 +1,43 @@
 .forgot-password-form {
-    padding: 56px 20px;
-    min-height: 100%;
+    width: inherit;
+    height: inherit;
+    margin-top: 15vh;
+}
+
+.forgot-password-form > h2 {
+    margin: auto;
+    text-align: center;
+}
+
+.forgot-password-form > p {
+    padding: 3vw;
+    text-align: center;
+    font-size: 1.1em;
+}
+
+.form {
+    display: grid;
+    padding: 0 5vh;
+    align-content: flex-start;
+}
+
+.formChild {
+    display: block;
+    margin: 2vh auto;
     width: 100%;
+    padding: 3vw;
+    border-color: lightslategray;
+    border-radius: 8px;
+    font-size: 1.2em;
+}
+
+.register {
+    display: block;
+    position: fixed;
+    bottom: 5vh;
+}
+
+.register > p {
+    text-align: center;
 }
+
diff --git a/client/src/components/LeafletOsmMap/MapPane.js b/client/src/components/LeafletOsmMap/MapPane.js
index d259697..3a0412b 100644
--- a/client/src/components/LeafletOsmMap/MapPane.js
+++ b/client/src/components/LeafletOsmMap/MapPane.js
@@ -3,7 +3,7 @@ import { h, Component } from 'preact';
 export default class MapPane extends Component {
     render() {
         const styles = {
-            height: this.props.height,  // HAVE TO SET HEIGHT TO RENDER MAP
+            height: this.props.paneHeight,  // HAVE TO SET HEIGHT TO RENDER MAP
         }
         return (
             <div id="map" style={styles}/>
diff --git a/client/src/components/LeafletOsmMap/index.js b/client/src/components/LeafletOsmMap/index.js
index 854bc9b..29def97 100644
--- a/client/src/components/LeafletOsmMap/index.js
+++ b/client/src/components/LeafletOsmMap/index.js
@@ -230,7 +230,7 @@ export default class LeafletOSMMap extends Component {
         <Search position={this.state.mapCenter} map={this.state.map}>
           <SearchResults />
         </Search>
-        <MapPane height={screen.height} />
+        <MapPane paneHeight={this.props.paneHeight} />
       </div>
     );
   }
diff --git a/client/src/components/Logo/index.js b/client/src/components/Logo/index.js
index b35b49a..0a2e047 100644
--- a/client/src/components/Logo/index.js
+++ b/client/src/components/Logo/index.js
@@ -8,7 +8,7 @@ export default class Logo extends Component {
 		return (
 			<div class={style.logo}>
 				<img src='../assets/logos/navi_logo.png'/>
-				<h3>Welcome to {APP_NAME}</h3>
+				<h3>Welcome!</h3>
 			</div>
 		);
 	}
diff --git a/client/src/components/Nav/index.js b/client/src/components/Nav/index.js
index d283520..9ba4f62 100644
--- a/client/src/components/Nav/index.js
+++ b/client/src/components/Nav/index.js
@@ -1,41 +1,33 @@
 import {h, Component} from 'preact';
+import { route } from 'preact-router';
 import style from './style.css';
 
 export default class Nav extends Component {
+  constructor(props) {
+    super(props);
 
-  componentDidMount() {
-    let navIcon = document.getElementsByClassName(style.navIcon)[0];
-    let linkContainer = document.getElementsByClassName(style.linkContainer)[0];
-    linkContainer.style.display = "none";
-    navIcon.onclick = function (e) {
-      e.preventDefault();
-      var x = linkContainer;
-      if (x.style.display === "block") {
-        x.style.display = "none";
-      } else {
-        x.style.display = "block";
-      }
-      return false;
-    }
+    this.routeToHome = this.routeToHome.bind(this);
+    this.routeToProfile = this.routeToProfile.bind(this);
+  } 
 
-    let links = document.getElementsByClassName(style.link);
-    for (let link of links) {
-      link.onclick = function () {
-        linkContainer.style.display = "none";
-      }
-    }
-  }
+  routeToHome() {
+    route('/', true);
+  };
+
+  routeToProfile() {
+    route('/profile', true);
+  };
 
   render() {
+    const styles = {
+      height: this.props.navHeight,
+    }
     return (
-      <div class={style.nav}>
-        <a class={style.navIcon} href="">&#9776;</a>
-        <div class={style.linkContainer}>
-          <p><a href="/" class={style.link}>Home</a></p>
-          <p><a href="/maps" class={style.link}>Maps</a></p>
-          <p><a href="/directions" class={style.link}>Directions</a></p>
-          <p><a href="/profile" class={style.link}>Profile</a></p>
-        </div>
+      <div class={style.nav} style={styles}>
+        <img src='../../assets/icons/leaflet/SVG/NaviHomeIcon.svg' alt='Home screen icon'
+          class={style.homeIcon} onClick={this.routeToHome}/>
+        <img src='../../assets/icons/leaflet/SVG/ProfileIcon.svg' alt='Profile page icon'
+          class={style.profileIcon} onClick={this.routeToProfile}/>
       </div>
     );
   }
diff --git a/client/src/components/Nav/style.css b/client/src/components/Nav/style.css
index 0477ac8..50254af 100644
--- a/client/src/components/Nav/style.css
+++ b/client/src/components/Nav/style.css
@@ -1,26 +1,17 @@
 .nav {
 	width: 100%;
-	height: 5vh;
+	background: linear-gradient(to right, #5A98A1,#2c5b61);
+	display: block;
 }
 
-.navIcon{
-	height: 40px;
-	background-color:white;
-	position: relative;
-	top: 50%;
-	transform: translateY(-50%);
-	padding: 10px;
+.profileIcon {
+	padding: 2vw;
+	height: inherit;
+	position: fixed;
+	right: 0px;
 }
 
-.linkContainer{
-	display: none;
-	background-color: white;
-	position: absolute;
-	top: 40px;
-	padding: 10px;
-	z-index:1;
+.homeIcon {
+	padding: 2vw;
+	height: inherit;
 }
-
-.link{
-
-}
\ No newline at end of file
diff --git a/client/src/components/app.js b/client/src/components/app.js
index 5d661f4..94a4e5a 100644
--- a/client/src/components/app.js
+++ b/client/src/components/app.js
@@ -19,10 +19,16 @@ import SignOut from '../routes/signout';
 // import Register from '../routes/register';
 import Settings from '../routes/settings';
 
-// import Home from 'async!../routes/home';
-// import Profile from 'async!../routes/profile';
+// Available screen real state after factoring space for navbar
+const AVAIL_PANE_HEIGHT = screen.availHeight * 0.93;
 
 export default class App extends Component {
+	constructor() {
+		super();
+		this.state = {
+			navbarHeight: screen.availHeight - AVAIL_PANE_HEIGHT
+		};
+	}
 	/** Gets fired when the route changes.
 	 *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
 	 *	@param {string} event.url	The newly routed URL
@@ -34,24 +40,20 @@ export default class App extends Component {
 	render() {
 		return (
 			<div id="app">
-				<Match path="/">
-					{ ({ matches, path, url }) => matches && (
-						<Logo />
-					) }
-				</Match>
+				<Nav navHeight={this.state.navbarHeight}/>
 				<Router onChange={this.handleRoute}>
-					<Home path="/" />
+					<Home path="/" paneHeight={AVAIL_PANE_HEIGHT}/>
 					<Profile path="/profile/" user="me" />
 					<Profile path="/profile/:user" />
-					<Account path="/register" />
-					<Account path="/signin"/>
-					<Account path="/forgot-password"/>
-          				<Account path="/reset-password"/>
-          				<Settings path="/settings"/>
+					<Account path="/register" paneHeight={AVAIL_PANE_HEIGHT}/>
+					<Account path="/signin" paneHeight={AVAIL_PANE_HEIGHT}/>
+					<Account path="/forgot-password" paneHeight={AVAIL_PANE_HEIGHT}/>
+          				<Account path="/reset-password" paneHeight={AVAIL_PANE_HEIGHT}/>
+          				<Settings path="/settings" paneHeight={AVAIL_PANE_HEIGHT}/>
 					<SignOut path="/signout"/>
 					<Directions path="/directions" />
 					<Pins path="/pins" />
-					<Maps path="/maps" />
+					<Maps path="/maps" paneHeight={AVAIL_PANE_HEIGHT}/>
 				</Router>
 			</div>
 		);
diff --git a/client/src/routes/account/index.js b/client/src/routes/account/index.js
index 6c5e5dc..5ff98ff 100644
--- a/client/src/routes/account/index.js
+++ b/client/src/routes/account/index.js
@@ -27,11 +27,14 @@ export default class Account extends Component {
         <AccountForm path={LOGIN_PATH}/>
 			)
 		}
+
+		const styles = {
+			height: this.props.paneHeight
+		}
+
 		return (
-			<div class={style.main}>
-				<div class={style.inherit}>
-					{renderedForm}
-				</div>
+			<div class={style.main} style={styles}>
+				{renderedForm}
 			</div>
 		);
 	}
diff --git a/client/src/routes/account/style.css b/client/src/routes/account/style.css
index 8eefe33..fdcfad6 100644
--- a/client/src/routes/account/style.css
+++ b/client/src/routes/account/style.css
@@ -6,9 +6,7 @@
 
 .main {
 	display: block;
-	height: 93vh;
 	width: 100vw;
 	position: fixed;
 	top: 7vh;
-	background-color: snow;
 }
diff --git a/client/src/routes/home/index.js b/client/src/routes/home/index.js
index 4f987e3..489df8d 100644
--- a/client/src/routes/home/index.js
+++ b/client/src/routes/home/index.js
@@ -1,13 +1,36 @@
 import { h, Component } from 'preact';
 import style from './style';
+import { route } from 'preact-router';
+import Search from '../../components/Search';
+import SearchResults from '../../components/SearchResults';
 
 export default class Home extends Component {
+	constructor(props) {
+		super(props);
+
+		this.routeToMap = this.routeToMap.bind(this);
+	}
+
+	routeToMap() {
+		route('/maps', true);
+	}
+
 	render() {
 		return (
 			<div class={style.home}>
-				<p>What Can navi find for you today!</p>
-				<a href="/maps"><button>Map</button></a>				
-				<a href="/profile"><button>Profile</button></a>
+				<div class={style.welcome}>
+					<h2>WELCOME TO</h2>
+					<img src='../../assets/icons/leaflet/SVG/darkLogo.svg' />
+				</div>
+				<div class={style.search}>
+					<p>Where can we take you today?</p>
+					<Search>
+						<SearchResults />
+					</Search>
+				</div>
+				<a href="/maps" class={style.mapLink}>where am I?</a>
+				<img src='../../assets/icons/leaflet/SVG/CurrentLocationPin.svg'
+					class={style.pin} onClick={this.routeToMap}/>	
 			</div>
 		);
 	}
diff --git a/client/src/routes/home/style.css b/client/src/routes/home/style.css
index 727ea80..06dfee9 100644
--- a/client/src/routes/home/style.css
+++ b/client/src/routes/home/style.css
@@ -1,9 +1,48 @@
 .home {
-	padding: 56px 20px;
 	width: 100%;
+	display: block;
 }
 
-button {
-	display: block;
-	width: 80%;
+.welcome {
+	padding-top: 3vh;
+	display: inherit;
+}
+
+.welcome > h2 {
+	text-align: center;
+	margin: 3vh auto auto;
+}
+
+.welcome > img {
+	display: inherit;
+	margin: auto;
+	width: 50vw;
+}
+
+.search {
+	padding-top: 5vh;
+	display: inherit;
+}
+
+.search > p {
+	text-align: center;
+	font-size: 1.2em;
+}
+
+.search > form {
+	position: static;
+}
+
+.mapLink {
+	position: fixed;
+	right: 15vw;
+	bottom: 5vh;
+}
+
+.pin {
+	width: 9vw;
+	height: 9vh;
+	position: fixed;
+	right: 5vw;
+	bottom: 3vh;
 }
diff --git a/client/src/routes/maps/index.js b/client/src/routes/maps/index.js
index 16b5a50..2c71388 100644
--- a/client/src/routes/maps/index.js
+++ b/client/src/routes/maps/index.js
@@ -6,7 +6,7 @@ export default class MapExplorer extends Component {
   render() {
     return (
       <div class={style.maps}>
-        <MapContainer />
+        <MapContainer paneHeight={this.props.paneHeight}/>
       </div>
     );
   }
diff --git a/client/src/routes/maps/style.css b/client/src/routes/maps/style.css
index 9070e0b..5008164 100644
--- a/client/src/routes/maps/style.css
+++ b/client/src/routes/maps/style.css
@@ -1,5 +1,4 @@
 .maps {
 	width: 100vw;
-	height: 95vh;
 	display: block;
-}
\ No newline at end of file
+}
diff --git a/client/src/routes/profile/index.js b/client/src/routes/profile/index.js
index 2ac68b3..3f302af 100644
--- a/client/src/routes/profile/index.js
+++ b/client/src/routes/profile/index.js
@@ -26,13 +26,19 @@ render({success}, {user, time}) {
       <div class={style.profile}>
         <Logo/>
         <div class={style.successMessage}>{success}</div>
+        <form>
+          <fieldset>
+            <legend>User Info</legend>
+            Name: {user.name}<br />
+            Email: {user.email}<br />
+          </fieldset>
+        </form>
         <SearchHistoryCard user={user}/>
         <SavedPinsCard user={user}/>
         <div class={style.links_container}>
-        <div class={style.link}><a href="/">Home</a></div>
-        <div class={style.link}><a href="/maps">Your Maps</a></div>
-        <div class={style.link}><a href="/settings">Settings</a></div>
-        <div class={style.link}><a href="/signout">Sign Out</a></div>
+          <div class={style.link}><a href="/maps">Explore Map</a></div>
+          <div class={style.link}><a href="/reset-password">Update User Info</a></div>
+          <div class={style.link}><a href="/signout">Sign Out</a></div>
         </div>
       </div>
     );
diff --git a/client/src/routes/profile/style.css b/client/src/routes/profile/style.css
index 756d6bf..a7c1845 100644
--- a/client/src/routes/profile/style.css
+++ b/client/src/routes/profile/style.css
@@ -1,6 +1,5 @@
 .profile {
-	padding: 56px 20px;
-	min-height: 100%;
+	padding: 5vh 5vw;
 	width: 100%;
 }
 
@@ -21,3 +20,12 @@
 .links_container{
     text-align: center;
 }
+
+form {
+    text-align: center;
+    margin-bottom: 2vh;
+}
+
+fieldset {
+    border-radius: 3px;
+}