diff --git a/dist/assets/js/app.js b/dist/assets/js/app.js
diff --git a/dist/assets/js/lib/hammer.min.js b/dist/assets/js/lib/hammer.min.js
diff --git a/dist/assets/js/lib/jquery.mousewheel.min.js b/dist/assets/js/lib/jquery.mousewheel.min.js
diff --git a/dist/favicon.ico b/dist/favicon.ico
diff --git a/dist/index.html b/dist/index.html
@@ -4,13 +4,201 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
-    <meta name="author" content="">
-    <meta name="description" content="">
-    <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
-    <title></title>
+    <meta name="author" content="Bernard Wang">
+    <meta name="description" content="IBM Maelstrom">
+    <link href="./favicon.ico" rel="shortcut icon" type="image/x-icon">
+    <title>IBM Maelstrom</title>
     <link rel="stylesheet" href="./assets/css/main.css">
   </head>
   <body>
-    <script src="./assets/js/app.js"></script>
+    <nav>
+        <div class="nav-container util-flex" id="nav">
+        <div class="nav-elem target">
+            <a class="nav-link util-flex" href="#maelstrom">
+                <div class="nav-button">1</div>
+                <div class="nav-label">Maelstrom</div>
+            </a>
+        </div>
+        <div class="nav-elem">
+            <a class="nav-link util-flex" href="#overview">
+                <div class="nav-button">2</div>
+                <div class="nav-label">Overview</div>
+            </a>
+        </div>
+        <div class="nav-elem">
+            <a class="nav-link util-flex" href="#about">
+                <div class="nav-button">3</div>
+                <div class="nav-label">About</div>
+            </a>
+        </div>
+        <div class="nav-elem">
+            <a class="nav-link util-flex" href="#projects">
+                <div class="nav-button">4</div>
+                <div class="nav-label">Projects</div>
+            </a>
+        </div>
+        <div class="nav-elem">
+            <a class="nav-link util-flex" href="#people">
+                <div class="nav-button">5</div>
+                <div class="nav-label">People</div>
+            </a>
+        </div>
+        <div class="nav-elem">
+            <a class="nav-link util-flex" href="#apply">
+                <div class="nav-button">6</div>
+                <div class="nav-label">Apply</div>
+            </a>
+        </div>
+        </div>
+    </nav>
+
+    <section class="page target" id="maelstrom">
+        <div class="overlay"></div>
+        <div class="page-container">
+        <div class="top-nav">
+            <a class="ibm-design util-link" href="https://www.ibm.com/design">IBM</a>
+            <a class="ibm-maelstrom util-link util-bold" href="">Maelstrom</a>
+        </div>
+        <p class="page-label">Descend into the</p>
+        <img class="main-branding" src="assets/img/Maelstrom_Wordmark.svg"/>
+
+        </div>
+        <div class="arrow-container util-flex" id="arrow-link">
+            <a class="arrow-label util-bold">Learn more</a>
+            <img class="main-arrow" src="assets/img/arrow.png"/>
+        </div>
+    </section>
+
+
+    <section class="page" id="overview">
+        <div class="overlay"></div>
+        <div class="page-container">
+        <p class="page-label">Overview</p>
+        <h1 class="page-header">15 designers.<br>10 weeks.<br>1 weird city.</h1>
+        <p class="page-body">This is Maelstrom, an intern experience like no other. Three times a year, a multi-disciplinary dream team is flown to <span class="util-bold">Austin, TX</span> to IBM Design's flagship studio. Designers, developers and researchers spend 10 weeks tackling industry-sized problems and building a one of a kind community.</p>
+        <div class="seasons-container util-flex">
+            <div class="svg-container">
+                <img class="svg" src="assets/img/Equinox.svg">
+                <p class="season-label util-bold">Equinox</p>
+                <p class="season-dates">Sep-Nov</p>
+            </div>
+            <div class="svg-container">
+                <img class="svg" src="assets/img/Solstice.svg">
+                <p class="season-label util-bold">Solstice</p>
+                <p class="season-dates">Jan-Mar</p>
+            </div>
+            <div class="svg-container">
+                <img class="svg" src="assets/img/Swelter.svg">
+                <p class="season-label util-bold">Swelter</p>
+                <p class="season-dates">Jun-Aug</p>
+            </div>
+        </div>
+        </div>
+    </section>
+
+    <section class="page" id="about">
+        <div class="overlay"></div>
+        <div class="page-container">
+        <p class="page-label">About</p>
+        <h1 class="page-header">We've got you covered.</h1>
+        <p class="page-body">We sort out housing and transportation so that you can focus on connecting emotionally with your new team. As a Maelstrom intern, we pay you for all the hard work you do during your stay here.</p>
+        <!--<p class="page-body">Already sold? <span><a class="util-link" href="">Apply here!</a></p>-->
+        </div>
+    </section>
+
+    <section class="page" id="projects">
+        <div class="overlay"></div>
+        <div class="page-container">
+        <p class="page-label">Projects</p>
+        <h1 class="page-header">Shape the future of IBM.<br> No, seriously.</h1>
+        <p class="page-body">Working in teams of interns, you'll learn how to bring a concept to life from research to execution through <span class="util-bold">radical collaboration</span>.</p>
+        <p class="page-body">You'll be equipped with mentorship from industry leaders, and support from IBM's global design community. With these tools, you'll deliver user-centric solutions with global reach.</p>
+        <p class="page-body">Interested in the curriculum? <span><a class="util-link util-bold" href="">Find out about IBM Education here!</a></p>
+        </div>
+    </section>
+
+    <section class="page" id="people">
+        <div class="overlay"></div>
+        <div class="page-container">
+        <p class="page-label">People</p>
+        <h1 class="page-header">Are you ready to be <br/> <span id="swap-word">empathetic</span></h1>
+        <div class="people-video util-flex">
+            <a id="video-link" href=""> 
+                <img class="video-tv" src="assets/img/tv_tv.png"/>
+                <img class="video-play" src="assets/img/tv_play.png"/>
+            </a>
+            <h3 class="video-label">Check out <br/> our stories</h3>
+        </div>
+        <div class="people-swap">
+            <h3 id="swap-name">Teresa Ibarra</h3>
+            <p id="swap-role">Frontend Developer</p>
+            <p id="swap-loc">From San Francisco, US</p>
+        </div>
+        </div>
+    </section>
+
+    <section class="util-flex page" id="apply">
+        <div class="overlay"></div>
+        <div class="page-container">
+            <section id="apply_copy">
+                <p class="page-label">Apply</p>
+                <h1 class="page-header">Think you got what it takes?</h1>
+                <img class="apply-visual" src="assets/img/slide6.png"/>
+            </section>
+            <form class="form-basic" method="post" action="#">
+              <h1>What discipline are you applying to?</h1>
+                <div id="job_selector" class="util-flex form-row">
+                  <div class="svg-container">
+                    <img class="svg" src="assets/img/Research.svg">
+                    <p>Research</p>
+                  </div>
+                  <div class="svg-container">
+                    <img class="svg" src="assets/img/UX.svg">
+                    <p>UX</p>
+                  </div>
+                  <div class="svg-container">
+                    <img class="svg" src="assets/img/Visual.svg">
+                    <p>Visual</p>
+                  </div>
+                  <div class="svg-container">
+                    <img class="svg" src="assets/img/FrontEnd.svg">
+                    <p>Front-end</p>
+                  </div>
+                </div>
+                <h1>Personal Information</h1>
+                <div class="form-row">
+                    <label>
+                    <h3 class="form-label">Name</h3>
+                <input placeholder="Meme Betadam" type="text" name="name">
+            </label>
+                </div>
+                <div class="form-row">
+                    <label>
+                    <h3 class="form-label">Email</h3>
+                <input type="email" placeholder="meme@school.edu" name="email">
+            </label>
+                </div>
+                <div class="form-row">
+                    <label>
+                    <h3 class="form-label">Phone Number</h3>
+                <input type="email" placeholder="512-123-4567" name="email">
+            </label>
+                </div>
+                <div class="form-row">
+                    <label>
+                    <h3 class="form-label">Portfolio</h3>
+                <input placeholder="www.mbetadam.com" type="text" name="text">
+            </label>
+                </div>
+                <div class="form-row">
+                    <button type="submit">Submit</button>
+                </div>
+            </form>
+        </div>
+    </section>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+    <script type="text/javascript" src="assets/js/lib/hammer.min.js"></script>
+    <script type="text/javascript" src="assets/js/lib/jquery.mousewheel.min.js"></script>
+    <script type="text/javascript" src="assets/js/app.js"></script>
   </body>
 </html>
diff --git a/gulpfile.babel.js b/gulpfile.babel.js
@@ -179,7 +179,7 @@ gulp.task('dev', ['styles','scripts-watch'], () => {
 /**
  *	Dist build
  */
-gulp.task('dist', ['min-img','min-styles','lint-scripts','min-scripts'], () => {
+gulp.task('dist', ['min-styles','lint-scripts','min-scripts'], () => {
   sync({
     server: {
       baseDir: './dist/'

diff --git a/src/fonts/HelvNeueBoldforIBM.otf b/src/fonts/HelvNeueBoldforIBM.otf
diff --git a/src/fonts/HelvNeueLightforIBM.otf b/src/fonts/HelvNeueLightforIBM.otf
diff --git a/src/fonts/HelvNeueMediumforIBM.otf b/src/fonts/HelvNeueMediumforIBM.otf
diff --git a/src/fonts/HelvNeueRomanforIBM.otf b/src/fonts/HelvNeueRomanforIBM.otf
diff --git a/src/img/Equinox.svg b/src/img/Equinox.svg
diff --git a/src/img/FrontEnd.svg b/src/img/FrontEnd.svg
diff --git a/src/img/Maelstrom_Wordmark.svg b/src/img/Maelstrom_Wordmark.svg
diff --git a/src/img/Research.svg b/src/img/Research.svg
diff --git a/src/img/Solstice.svg b/src/img/Solstice.svg
diff --git a/src/img/Swelter.svg b/src/img/Swelter.svg
diff --git a/src/img/UX.svg b/src/img/UX.svg
diff --git a/src/img/Visual.svg b/src/img/Visual.svg
diff --git a/src/img/arrow.png b/src/img/arrow.png
diff --git a/src/img/bold.png b/src/img/bold.png
diff --git a/src/img/curious.png b/src/img/curious.png
diff --git a/src/img/empathetic.png b/src/img/empathetic.png
diff --git a/src/img/geniune.png b/src/img/geniune.png
diff --git a/src/img/genuine.png b/src/img/genuine.png
diff --git a/src/img/open.png b/src/img/open.png
diff --git a/src/img/slide1.png b/src/img/slide1.png
diff --git a/src/img/slide2.png b/src/img/slide2.png
diff --git a/src/img/slide3.png b/src/img/slide3.png
diff --git a/src/img/slide4.png b/src/img/slide4.png
diff --git a/src/img/slide6.png b/src/img/slide6.png
diff --git a/src/img/tv_play.png b/src/img/tv_play.png
diff --git a/src/img/tv_tv.png b/src/img/tv_tv.png
diff --git a/src/js/app.js b/src/js/app.js
@@ -1,6 +1,169 @@
 import 'babel-polyfill';
 
 global.app = function () {
-
+	let words = [
+		'empathetic?',
+		'genuine?',
+		'open?',
+		'curious?',
+		'bold?'
+	];
+	let images = [
+		'assets/img/empathetic.png',
+		'assets/img/genuine.png',
+		'assets/img/open.png',
+		'assets/img/curious.png',
+		'assets/img/bold.png'
+	];
+	let people = [
+		['Teresa Ibarra', 'Frontend Developer', 'From San Francisco, US',],
+		['Kei Yumino', 'Visual Designer', 'From Shizokuo, Japan'],
+		['Nathalie Martin', 'Researcher', 'From Seattle, US',],
+		['Sanghyun Lee', 'Researcher', 'From Seoul, Korea'],
+		['Chloe Poulter', 'UX Designer', 'From London, UK'],
+	];
+
+	let i = 0;
+	let interval = null;
+
+	let stopPeopleCycle = function() {
+		clearInterval(interval);
+		interval = null;
+	}
+
+	let startPeopleCycle = function() {
+		if (interval != null) {
+			return;
+		}
+		interval = setInterval(function() {
+			i = (i + 1) % words.length;
+			// background 
+			$('#people').css("background-image", "url(" + images[i = (i + 1) % images.length] + ")");
+			// character traits
+			$('#swap-word').fadeOut(function() {
+				$(this).html(words[i]).fadeIn();
+			});
+			// people description
+			$('#swap-name').fadeOut(function() {
+				$(this).html(people[i][0]).fadeIn();
+			});
+			$('#swap-role').fadeOut(function() {
+				$(this).html(people[i][1]).fadeIn();
+			});
+			$('#swap-loc').fadeOut(function() {
+				$(this).html(people[i][2]).fadeIn();
+			});
+		}, 3000);
+	}
+
+	let old_id = 0;     // current page index
+	let pages = [       // array of pages
+		'#maelstrom',
+		'#overview',
+		'#about',
+		'#projects',
+		'#people',
+		'#apply'
+	];
+	let timer = null;   // scroll timer
+	let count = 0;      // scroll counter
+
+	/**
+	 * Navs to next page
+	 */
+	let nextPage = function() {
+		if (old_id < pages.length-1) {
+			let new_id = old_id+1;
+			switchPage(new_id);
+			if (timer !== null) clearTimeout(timer);
+		}
+	}
+
+	/**
+	 * Navs to prev page
+	 */
+	let prevPage = function() {
+		if (old_id > 0) {
+			let new_id = old_id-1;
+			switchPage(new_id);
+			if (timer !== null) clearTimeout(timer);
+		}
+	}
+
+	/**
+	 * Switch to given page id
+	 */
+	let switchPage = function(new_id) {
+		if (new_id !== old_id) {
+			if (new_id == 4) {
+				startPeopleCycle();
+			} else if (old_id == 4) {
+				stopPeopleCycle();
+			}
+
+			let new_page = pages[new_id];
+			let old_page = pages[old_id];
+			let new_nav = $('#nav').children()[new_id];
+			let old_nav = $('#nav').children()[old_id];
+
+			$(new_nav).addClass('target');
+			$(old_nav).removeClass('target');
+
+			$(new_page).addClass('target');
+			setTimeout(function(){
+				$(old_page).removeClass('target');
+			}, 100);
+
+			old_id = new_id;
+		}
+	}
+
+	// nav setup
+	$('.nav-link').click(function(e) {   
+		e.preventDefault();
+		let new_id = $('.nav-link').index($(this));
+		switchPage(new_id);
+	});
+
+	// scroll setup
+	$('body').mousewheel(function(e) {
+		// ignore smaller movements
+		if (Math.abs(e.deltaY) < 30) return;
+
+		// update direction count
+		if (e.deltaY < 0) {
+			count += 1;
+		} else if (e.deltaY > 0) {
+			count -= 1;
+		}
+
+		// scroll timer
+		if (timer !== null) clearTimeout(timer);    // still scrolling
+		timer = setTimeout(function() {             // function runs when scrolling stops
+			let count_threshold = 5;
+			if (count > count_threshold) {         
+				nextPage();
+			} else if (count < -count_threshold) {
+				prevPage();
+			}
+			count = 0;
+		}, 30);
+	});
+
+	// arrow setup
+	$('#arrow-link').click(function(e) {
+		nextPage();
+	});
+
+	// key binding for up and down arrows
+	$(document).keydown(function(e){
+		if (e.keyCode == 38) {
+			prevPage();
+		} else if (e.keyCode == 40) {
+			nextPage();
+		}
+	});
 };
 
+global.app();
+
diff --git a/src/sass/base/_all.scss b/src/sass/base/_all.scss
@@ -1,3 +1,6 @@
 @import 'variables';
 @import 'breakpoints';
+@import 'typefaces';
+@import 'colors';
+@import 'utils';
 @import 'global';
diff --git a/src/sass/base/_colors.scss b/src/sass/base/_colors.scss
@@ -0,0 +1,10 @@
+/* Colors */
+$background1: #B6EFF2;
+$background2: #7DE1EB;
+$background3: #4CC3D2;
+$background4: #2EA4B2;
+$background5: #2EA4B2;
+$background6: #1E818C;
+$primaryfont: #0C373C;
+$secondaryfont: #B6EFF2;
+$tertiaryfont: #07272B;
diff --git a/src/sass/base/_global.scss b/src/sass/base/_global.scss
@@ -6,12 +6,16 @@
 	box-sizing: border-box;
 }
 
-html{
-  margin: 0;
-  padding: 0;
+body {
+/*    font-family: $font-stack;
+    font-size: 16px;
+    line-height: normal;
+    overflow: hidden;
+    position: relative;*/
 }
 
-body{
+html, body{
+    min-height: 100%;
 }
 
 ul{

diff --git a/src/sass/base/_typefaces.scss b/src/sass/base/_typefaces.scss
@@ -0,0 +1,21 @@
+@font-face {
+    font-family: HelvNeueRomanForIBM;
+    src: url("../fonts/HelvNeueRomanForIBM.otf") format("opentype");
+}
+@font-face {
+    font-family: HelvNeueMediumForIBM;
+    src: url("../fonts/HelvNeueMediumForIBM.otf") format("opentype");
+}
+@font-face {
+    font-family: HelvNeueLightForIBM;
+    src: url("../fonts/HelvNeueLightForIBM.otf") format("opentype");
+}
+@font-face {
+    font-family: HelvNeueBoldForIBM;
+    src: url("../fonts/HelvNeueBoldForIBM.otf") format("opentype");
+}
+
+$font-stack: HelvNeueRomanForIBM, Helvetica, Arial, sans-serif;
+$bold-font-stack: HelvNeueBoldForIBM, HelvNeueRomanForIBM, Helvetica, Arial, sans-serif;
+$medium-font-stack: HelvNeuemediumForIBM, HelvNeueRomanForIBM, Helvetica, Arial, sans-serif;
+$light-font-stack: HelvNeueLightForIBM, HelvNeueRomanForIBM, Helvetica, Arial, sans-serif;
diff --git a/src/sass/base/_utils.scss b/src/sass/base/_utils.scss
@@ -0,0 +1,32 @@
+.util-bold {
+    font-family: $bold-font-stack;
+}
+.util-link {
+    text-decoration: none;
+    transition: all, .5s;
+
+    &:hover {
+        text-decoration: underline;
+    }
+}
+.util-link-arrow {
+    margin-top: 5px;
+}
+.util-button {
+    margin: 0;
+    border-radius: 2px;
+    background-color: white;
+    color: $primaryfont;
+    font-size: 1rem;
+    padding: 1rem;
+    border: 0;
+    width: 7rem;
+    height: 3rem;
+}
+.util-flex {
+    display: flex;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+}
diff --git a/src/sass/main.scss b/src/sass/main.scss
@@ -1,3 +1,3 @@
-@import 'base/all';
 @import 'lib/all';
+@import 'base/all';
 @import 'partials/all';
diff --git a/src/sass/partials/_all.scss b/src/sass/partials/_all.scss
@@ -0,0 +1,2 @@
+@import 'nav';
+@import 'page';
diff --git a/src/sass/partials/_nav.scss b/src/sass/partials/_nav.scss
@@ -0,0 +1,67 @@
+
+#nav {
+    flex-direction: column;
+    justify-content: center;
+    position: fixed;
+    width: 216px;
+    height: 100vh;
+    top: 0;
+    right: -155px;
+    text-align: left;
+    font-size: 14px;
+    background-color: rgba(1, 2, 3, .15);
+    transition: transform, .5s;
+    transition: background, .5s;
+    z-index: 999;
+
+    a {
+        text-decoration: none;
+        color: $background1;
+    }
+
+    .target {
+        transition: background, .5s;
+        background-color: rgba(1, 2, 3, .3);
+
+        .nav-label {
+            color: white;
+        }
+    }
+
+    &:hover {
+        transform: translateX(-146px);
+        background-color: rgba(1, 2, 3, .4);
+
+        .target {
+            background-color: rgba(1, 2, 3, 1);
+        }
+    }
+}
+
+.nav-link {
+    justify-content: flex-start;
+    align-items: center;
+    transition: all, .5s;
+    font-family: $bold-font-stack;
+
+    &:hover{
+        .nav-button, .nav-label {
+            color: white;
+        }
+    }
+}
+
+.nav-elem {
+    padding: 8px;
+    padding-left: 15px;
+}
+
+.nav-button {
+    color: white;
+    margin: 10px;
+    margin-right: 45px;
+}
+
+.nav-label {
+    font-family: $medium-font-stack;
+}
diff --git a/src/sass/partials/_page.scss b/src/sass/partials/_page.scss