diff --git a/newVersion/css/homeStyle.css b/newVersion/css/homeStyle.css
index 2c68ad0..988ef12 100644
--- a/newVersion/css/homeStyle.css
+++ b/newVersion/css/homeStyle.css
@@ -3,7 +3,7 @@
 */
 
 body {
-    height: 300%;
+    height: 400%;
 }
 
 .step {
@@ -19,6 +19,11 @@ body {
     padding: 0;
 }
 
+.step-content {
+    width: 90%;
+    margin-left: 2.5%;
+}
+
 .reveal {
     position: fixed;
     transition: 1.5s all ease;
diff --git a/newVersion/css/navstyle.css b/newVersion/css/navstyle.css
index 5afaf2b..3e8f9f4 100644
--- a/newVersion/css/navstyle.css
+++ b/newVersion/css/navstyle.css
@@ -15,6 +15,7 @@
     height: 100%;
     background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.822), rgba(22, 17, 65, 0.822) 5% );
     background-size: 150vh 150vh;
+    background-position: 0px;
     position: fixed;
     display: block;
     z-index: 10;
@@ -123,7 +124,7 @@
 .navitem {
     text-decoration: none;
     text-align: center;
-    color: rgb(107, 107, 107);;
+    color: rgb(29, 69, 105);
     font-size: 1.4rem;
     width: fit-content;
     padding: 2%;
@@ -137,13 +138,13 @@
 
 .inactive:hover {
     font-size: 1.6rem;
-    color: rgb(107, 107, 107);
+    color: rgb(29, 69, 105);
     transition: 0.4s;
 }
 
 /* ~ --> all next & + --> next */
 .shaded {
-    color: rgb(107, 107, 107);
+    color: rgb(29, 69, 105);
     transition: 0.3s;
 }
 
diff --git a/newVersion/css/style.css b/newVersion/css/style.css
index 2fcbce5..d1c421c 100644
--- a/newVersion/css/style.css
+++ b/newVersion/css/style.css
@@ -11,6 +11,15 @@ body {
     font-family: sans-serif;
 }
 
+
+::selection {
+    background-color: rgb(41, 37, 95);
+    color: white;
+    -webkit-background-clip: none;
+    background-clip: none;
+    -webkit-text-fill-color: currentColor;
+}
+
 /*
     GRADIENTS
 */
@@ -24,6 +33,14 @@ body {
 }
 
 
+/* 
+    Colours
+*/
+.white {
+    color: white;
+}
+
+
 /* 
     SIZES
 */
@@ -32,6 +49,10 @@ body {
     font-size: 500%;
 }
 
+.biggest {
+    font-size: 325%;
+}
+
 .bigger {
     font-size: 200%;
 }
@@ -42,4 +63,8 @@ body {
 
 .no-margin {
     margin: 0;
+}
+
+.half-width {
+    width: 50%;
 }
\ No newline at end of file
diff --git a/newVersion/index.html b/newVersion/index.html
index cd4b373..5e46f82 100644
--- a/newVersion/index.html
+++ b/newVersion/index.html
@@ -19,22 +19,49 @@
     <body>
         <div id="nav"></div>
         <div class="step" id="step-1">
-            <h1 class="gradient-purple huge small-margin">Web&shy;sites</h1>
-            <h3 class="gradient-purple bigger">Get your new online presence</h3>
+            <div class="step-content">
+                <h1 class="gradient-purple huge small-margin">Web&shy;sites</h1>
+                <h3 class="gradient-purple bigger">Get your new online presence</h3>
+            </div>
         </div>
 
         <div class="step reveal">
-            <h1 class="gradient-purple huge small-margin">Beau&shy;ti&shy;ful</h1>
-            <h3 class="gradient-purple bigger">yet still not expensive</h3>
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1>
+                <p class="white half-width">Get a website of any style you want</p>
+            </div>
         </div>
 
         <div class="step reveal">
-            <h1 class="gradient-purple huge small-margin">In&shy;te&shy;res&shy;ted?</h1>
-            <h3 class="gradient-purple bigger">contact me for an offer</h3>
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Cus&shy;tom</h1>
+                <p class="white half-width">Built with the technologies used by frameworks, but without the downsides that come with them</p>
+            </div>
+        </div>
+
+        <div class="step reveal">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Static</h1>
+                <p class="white half-width">Websites that display your content in a stylish, beautiful manner, like this page</p>
+            </div>
+        </div>
+
+        <div class="step reveal">
+            <div class="step-content">
+                <h1 class="gradient-purple biggest small-margin">Dynamic</h1>
+                <p class="white half-width">Websites that include blogs, contact forms, registration forms and many more dynamic features, like the order page</p>
+            </div>
+        </div>
+
+        <div class="step reveal">
+            <div class="step-content">
+                <h1 class="gradient-purple huge small-margin">In&shy;te&shy;res&shy;ted?</h1>
+                <h3 class="gradient-purple bigger">contact me for an offer</h3>
+            </div>
         </div>
 
         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
-        <script defer src="js/scrolling.js"></script>
+        <script defer src="/js/scrolling.js"></script>
 
         <script>
             $( '#nav' ).load( '/nav.html' );
diff --git a/newVersion/js/scrolling.js b/newVersion/js/scrolling.js
index 5274eb1..77bee3e 100644
--- a/newVersion/js/scrolling.js
+++ b/newVersion/js/scrolling.js
@@ -1,11 +1,11 @@
 $( document ).ready( function () {
 
     document.addEventListener( 'scroll', scrolled );
+    document.addEventListener( 'resize', scrolled );
 
     let revealables = document.querySelectorAll( '.reveal' );
-
-    let currentlyShowing = Math.floor( window.scrollY / ( window.innerHeight / revealables.length + 50 ) );
-
+    let heights = $( document ).height() / ( revealables.length + 1 );
+    let currentlyShowing = Math.round( window.scrollY / heights );
 
     for ( let i = 0; i < currentlyShowing; i++ ) {
         if ( i < parseInt( revealables.length ) ) {
@@ -14,7 +14,8 @@ $( document ).ready( function () {
     }
 
     function scrolled() {
-        let regPos = Math.floor( window.scrollY / ( window.innerHeight / revealables.length + 50 ) );
+        heights = $( document ).height() / ( revealables.length + 1 );
+        let regPos = Math.round( window.scrollY / heights );
         if ( regPos < currentlyShowing && regPos < parseInt( revealables.length ) ) {
             revealables[ regPos ].classList.remove( 'active' );
         } else if ( regPos > currentlyShowing && regPos < parseInt( revealables.length ) + 1 ) {
diff --git a/newVersion/nav.html b/newVersion/nav.html
index 39aa565..171f294 100644
--- a/newVersion/nav.html
+++ b/newVersion/nav.html
@@ -52,13 +52,13 @@
                 $( '.inactive' ).mouseenter( function () {
                     let obj = $( this ).attr( 'id' );
                     if ( obj === 'home' ) {
-                        $( '#nav-menu' ).css( 'background-position', `${0 - offset}px` );
+                        $( '#nav-menu' ).css( 'background-position', `${0 + offset}px` );
                     } else if ( obj == 'order' ) {
-                        $( '#nav-menu' ).css( 'background-position', `${200 - offset}px` );
+                        $( '#nav-menu' ).css( 'background-position', `${200 + offset}px` );
                     } else if ( obj == 'contact' ) {
-                        $( '#nav-menu' ).css( 'background-position', `${400 - offset}px` );
+                        $( '#nav-menu' ).css( 'background-position', `${400 + offset}px` );
                     } else if ( obj == 'examples' ) {
-                        $( '#nav-menu' ).css( 'background-position', `${600 - offset}px` );
+                        $( '#nav-menu' ).css( 'background-position', `${600 + offset}px` );
                     }
                 } )
                 $( '.inactive' ).mouseleave ( function () {
diff --git a/newVersion/order/index.html b/newVersion/order/index.html
new file mode 100644
index 0000000..00070fd
--- /dev/null
+++ b/newVersion/order/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        
+        <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet'>
+        <link rel="stylesheet" href="/css/style.css">
+        <link rel="stylesheet" href="/css/homeStyle.css">
+
+        <meta http-equiv="X-UA-Compatible" content="IE=8">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>Home :: Development - janishutz.com</title>
+    </head>
+    <body>
+        <div id="nav"></div>
+        <div class="step" id="step-1">
+            <h1 class="gradient-purple huge small-margin">Order</h1>
+            <h3 class="gradient-purple bigger">Ready for your new website?</h3>
+        </div>
+
+        <div class="step reveal">
+            <h1 class="gradient-purple biggest small-margin">Beau&shy;ti&shy;ful</h1>
+            <p class="white">Get a website of any style you want</p>
+        </div>
+
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+        <script defer src="/js/scrolling.js"></script>
+
+        <script>
+            $( '#nav' ).load( '/nav.html' );
+        </script>
+    </body>
+</html>
\ No newline at end of file
