diff --git a/html/index.html b/html/index.html
index c8874d38..5f0c87d7 100644
--- a/html/index.html
+++ b/html/index.html
@@ -9,7 +9,7 @@
 </head>
 <body>
 
-<h1 class="logo" id="top">
+<a href="index.html" class="logo" id="top">
     <div class="grid">
         <div class="row">
             <div class="cell"></div>
@@ -30,11 +30,11 @@
             <div class="cell"></div>
         </div>
     </div>
-    <div class="logotype">
+    <h1 class="logotype">
         <span>Colouring</span>
         <span>London</span>
-    </div>
-</h1>
+    </h1>
+</a>
 
 <article>
 
@@ -62,7 +62,7 @@ will look like.
 <div class="carousel">
     <button class="carousel-control offscreen-text back">Back</button>
     <ul class="carousel-content">
-        <li class="active"><img src="images/slide-1-welcome.png" alt="Welcome"></li>
+        <li><img src="images/slide-1-welcome.png" alt="Welcome"></li>
         <li><img src="images/slide-2-categories.png" alt="Categories"></li>
         <li><img src="images/slide-3-edit.png" alt="Add/edit data"></li>
         <li><img src="images/slide-4-view.png" alt="View maps"></li>
@@ -158,6 +158,7 @@ research.
 
 <h2>Once built, our platform will allow you to:</h2>
 
+<section class="pale-pink">
 <h3>View maps</h3>
 
 <p>
@@ -168,7 +169,9 @@ interests you.
 </p>
 
 <img src="images/slide-4-view.png" alt="Preview of view maps page">
+</section>
 
+<section class="pale-yellow">
 <h3>Add and edit data</h3>
 
 <p>
@@ -178,7 +181,9 @@ Find a building and add or edit data for any of the 12 core categories.
 </p>
 
 <img src="images/slide-3-edit.png" alt="Preview of add/edit data page">
+</section>
 
+<section class="pale-orange">
 <h3>See how people are using our data</h3>
 
 <p>
@@ -190,7 +195,9 @@ history&mdash;or something we haven’t imagined yet.
 </p>
 
 <img src="images/slide-6-showcase.png" alt="Preview of data showcase page">
+</section>
 
+<section class="pale-green">
 <h3>Download, remix and reuse</h3>
 
 <p>
@@ -202,7 +209,7 @@ projects on the Colouring London site.
 </p>
 
 <img src="images/slide-5-download.png" alt="Preview of download page">
-
+</section>
 
 <form id="sign-up" action="https://tinyletter.com/colouringlondon" method="post" target="popupwindow"
     onsubmit="window.open('https://tinyletter.com/colouringlondon', 'popupwindow', 'scrollbars=yes,width=800,height=600');return true">
@@ -260,5 +267,6 @@ projects on the Colouring London site.
     </a>
 </footer>
 
+<script src="main.js"></script>
 </body>
 </html>
diff --git a/html/main.css b/html/main.css
index 3ad0b2ba..a6582942 100644
--- a/html/main.css
+++ b/html/main.css
@@ -29,6 +29,17 @@ h1, h2, h3, h4 {
     color: #878d96 !important;
 }
 
+/**
+ * Form
+ */
+input[type="text"],
+input[type="email"] {
+    display: block;
+    width: 100%;
+    border: 1px solid #222;
+    padding: 0.5em 0.25em;
+}
+
 /**
  * Colours
  */
@@ -41,15 +52,24 @@ h1, h2, h3, h4 {
 .bright-yellow {
     background-color: #f0d106;
 }
+.pale-yellow {
+    background-color: #fff021;
+}
 .bold-orange {
     background-color: #eb7905;
 }
+.pale-orange {
+    background-color: #ffc04e;
+}
 .red {
     background-color: #e96762;
 }
 .pastel-pink {
     background-color: #e099c1;
 }
+.pale-pink {
+    background-color: #ffcde5;
+}
 .pastel-purple {
     background-color: #7d6f94;
 }
@@ -62,6 +82,9 @@ h1, h2, h3, h4 {
 .pastel-green {
     background-color: #72b889;
 }
+.pale-green {
+    background-color: #73ebaf;
+}
 .bright-blue {
     background-color: #72b2fe;
 }
@@ -86,6 +109,8 @@ h1, h2, h3, h4 {
     text-decoration: none;
 }
 .logo .logotype {
+    font-size: 1em;
+    margin: 0;
     display: inline-block;
     vertical-align: bottom;
 }
@@ -257,10 +282,14 @@ img {
 }
 .carousel-control {
     position: absolute;
+    display: none;
     top: 0;
     bottom: 0;
     width: 1em;
 }
+.carousel.active .carousel-control {
+    display: block;
+}
 .carousel-control.next {
     right: 0;
 }
@@ -272,10 +301,12 @@ img {
     list-style: none;
 }
 .carousel-content li {
-    display: none;
     text-align: center;
 }
-.carousel-content li.active {
+.carousel.active .carousel-content li {
+    display: none;
+}
+.carousel.active .carousel-content li.current {
     display: block;
 }
 
diff --git a/html/main.js b/html/main.js
new file mode 100644
index 00000000..ad804d96
--- /dev/null
+++ b/html/main.js
@@ -0,0 +1,36 @@
+
+carousel = (function(){
+    var box = document.querySelector('.carousel');
+    var next = box.querySelector('.next');
+    var prev = box.querySelector('.back');
+    // Define the global counter, the items and the
+    // current item
+    var counter = 0;
+    var items = box.querySelectorAll('.carousel-content li');
+    var amount = items.length;
+    var current = items[0];
+    box.classList.add('active');
+    // navigate through the carousel
+    function navigate(direction) {
+        // hide the old current list item
+        current.classList.remove('current');
+
+        // calculate the new position
+        counter = (counter + direction) % amount;
+        counter = counter < 0 ? amount - 1 : counter;
+        // set new current element
+        // and add CSS class
+        current = items[counter];
+        current.classList.add('current');
+    }
+    // add event handlers to buttons
+    next.addEventListener('click', function(ev) {
+        navigate(1);
+    });
+    prev.addEventListener('click', function(ev) {
+        navigate(-1);
+    });
+    // show the first element
+    // (when direction is 0 counter doesn't change)
+    navigate(0);
+})();
