diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 0000000..8f751f7
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,71 @@
+<!doctype html>
+<html lang="en-US">
+
+{% include head.html %}
+
+<body>
+
+  <header>
+
+    <div data-sticky-container style="height: 82.7812px;">
+
+      <div class="top-bar sticky iss-stuck is-at-top" data-sticky data-margin-top=0>
+        <div class="top-bar-title">
+          <strong>
+                        <a id="logo" href="https://www.coops.tech/">
+                            <img src="https://www.coops.tech/app/themes/coop-tech-oowp-theme/public/img/CoTech-logo.png">CoTech
+                        </a>
+                    </strong>
+          <span data-responsive-toggle="responsive-menu" data-hide-for="medium"><button class="menu-icon dark" type="button" data-toggle></button></span>
+        </div>
+        <div id="responsive-menu">
+          <div class="top-bar-right">
+            <ul class="dropdown menu vertical medium-horizontal" data-magellan>
+              <li><a href="#members">Members</a></li>
+              <li><a href="#clients">Clients</a></li>
+              <li><a href="#services">Services</a></li>
+              <li><a href="#technologies">Technologies</a></li>
+              <li><a href="#contact" class="button">Get In Touch</a></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+    </div>
+
+  </header>
+
+  <div class="home">
+
+    <div id="banner">
+      <div class="row">
+        <div class="small-12 columns">
+          <h1>Cooperative Technologists</h1>
+          <p>Building a tech industry that's better for its workers and customers through co-operation, democracy and worker ownership.</p>
+          <span>
+                        <a id="video" data-open="video-modal"><i class="fi-play"></i>Watch video</a>
+                        <a id="our-manifesto" href="manifesto">Our manifesto</a>
+                    </span>
+
+          <div class="reveal large" id="video-modal" data-reveal>
+            <div class="flex-video widescreen">
+              <iframe width="420" height="315" src="https://player.vimeo.com/video/196080655" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+
+    {{ content }}
+
+  </div>
+
+
+  {% include footer.html %}
+
+  <script type='text/javascript' src='{{ site.github.url }}/app/themes/coop-tech-oowp-theme/public/js/app.js?ver=4.8'></script>
+  <script type='text/javascript' src='{{ site.github.url }}/wp/wp-includes/js/wp-embed.min.js?ver=4.8'></script>
+</body>
+
+</html>
diff --git a/app/themes/coop-tech-oowp-theme/public/foundation-icons/foundation-icons.ttf b/app/themes/coop-tech-oowp-theme/public/foundation-icons/foundation-icons.ttf
new file mode 100644
index 0000000..6cce217
Binary files /dev/null and b/app/themes/coop-tech-oowp-theme/public/foundation-icons/foundation-icons.ttf differ
diff --git a/app/themes/coop-tech-oowp-theme/public/foundation-icons/foundation-icons.woff b/app/themes/coop-tech-oowp-theme/public/foundation-icons/foundation-icons.woff
new file mode 100644
index 0000000..e2cfe25
Binary files /dev/null and b/app/themes/coop-tech-oowp-theme/public/foundation-icons/foundation-icons.woff differ
diff --git a/app/themes/coop-tech-oowp-theme/public/img/banner-collage.jpg b/app/themes/coop-tech-oowp-theme/public/img/banner-collage.jpg
new file mode 100644
index 0000000..9eec8d6
Binary files /dev/null and b/app/themes/coop-tech-oowp-theme/public/img/banner-collage.jpg differ
diff --git a/app/themes/coop-tech-oowp-theme/public/img/icon-clients.png b/app/themes/coop-tech-oowp-theme/public/img/icon-clients.png
new file mode 100644
index 0000000..c890360
Binary files /dev/null and b/app/themes/coop-tech-oowp-theme/public/img/icon-clients.png differ
diff --git a/app/themes/coop-tech-oowp-theme/public/img/icon-coops.png b/app/themes/coop-tech-oowp-theme/public/img/icon-coops.png
new file mode 100644
index 0000000..8e068df
Binary files /dev/null and b/app/themes/coop-tech-oowp-theme/public/img/icon-coops.png differ
diff --git a/app/themes/coop-tech-oowp-theme/public/img/icon-revenue.png b/app/themes/coop-tech-oowp-theme/public/img/icon-revenue.png
new file mode 100644
index 0000000..fb4e5f7
Binary files /dev/null and b/app/themes/coop-tech-oowp-theme/public/img/icon-revenue.png differ
diff --git a/app/themes/coop-tech-oowp-theme/public/img/icon-staff.png b/app/themes/coop-tech-oowp-theme/public/img/icon-staff.png
new file mode 100644
index 0000000..0a32b76
Binary files /dev/null and b/app/themes/coop-tech-oowp-theme/public/img/icon-staff.png differ
diff --git a/images/services/business-analysis.png b/images/services/business-analysis.png
new file mode 100644
index 0000000..df20946
Binary files /dev/null and b/images/services/business-analysis.png differ
diff --git a/images/services/consultancy.png b/images/services/consultancy.png
new file mode 100644
index 0000000..8bb26b1
Binary files /dev/null and b/images/services/consultancy.png differ
diff --git a/index.html b/index.html
index 4409d7e..45004b1 100644
--- a/index.html
+++ b/index.html
@@ -1,29 +1,110 @@
 ---
 title: CoTech
+layout: home
 ---
 
-<h1>CoTech</h1>
+<div id="kpi">
+  <div class="row">
+    <div class="small-12 medium-10 large-8 small-centered columns">
 
-Co-ops: {{ site.coops.size }}
+      <div class="small-3 columns">
+        <img src="app/themes/coop-tech-oowp-theme/public/img/icon-coops.png" class="float-center">
+        <h6>Co-ops</h6>
+        <h5>{{ site.coops.size }}</h5>
+      </div>
+      <div class="small-3 columns">
+        <img src="app/themes/coop-tech-oowp-theme/public/img/icon-staff.png" class="float-center">
+        <h6>Staff</h6>
+        <h5>159+</h5>
+      </div>
+      <div class="small-3 columns">
+        <img src="app/themes/coop-tech-oowp-theme/public/img/icon-revenue.png" class="float-center">
+        <h6>Revenue</h6>
+        <h5>£5.7m</h5>
+      </div>
+      <div class="small-3 columns">
+        <img src="app/themes/coop-tech-oowp-theme/public/img/icon-clients.png" class="float-center">
+        <h6>Clients</h6>
+        <h5>232+</h5>
+      </div>
 
-<ul>
-{% for coop in site.coops %}
-  <li>
-    <a href="{{ coop.url | relative_url }}">
-      {{ coop.name }}
-    </a>
-  </li>
-{% endfor %}
-</ul>
+    </div>
+  </div>
+</div>
 
-<h2>Services</h2>
+<section id="members" data-magellan-target="members">
+  <div class="row">
+    <div class="small-12 columns">
 
-<ul>
-{% for service in site.services %}
-  <li>
-    <a href="{{ service.url | relative_url }}">
-      {{ service.name }}
-    </a>
-  </li>
-{% endfor %}
-</ul>
+      <h2>Members</h2>
+      <p>Take a look at who is part of the CoTech network</p>
+
+      <div class="view float-center">
+        <ul class="tabs" data-tabs id="coops-view-tabs">
+          <li class="tabs-title is-active"><a href="#grid" aria-selected="true">Grid</a></li>
+          <li class="separator">|</li>
+          <li class="tabs-title"><a href="#map">Map</a></li>
+        </ul>
+      </div>
+
+      <div class="tabs-content" data-tabs-content="coops-view-tabs">
+
+        <!-- START Grid View Content -->
+        <div class="tabs-panel is-active" id="grid">
+          <div class="row small-up-2 medium-up-4 large-up-6 small-collapse">
+            <div class="column">
+              {% for coop in site.coops %}
+                <a class="coop-thumb" href="{{ coop.url | relative_url }}">
+                  <div class="coop-thumb-img has-tip tip-bottom radius" style="background-image: url(/images/coops/{{ coop.slug }}.png)" data-tooltip aria-haspopup="true" title="{{ coop.name }}"></div>
+                </a>
+              {% endfor %}
+            </div>
+            <div class="column">
+              <a href="join" class="coop-thumb">
+                  <h5 id="join-us">Join CoTech</h5>
+              </a>
+            </div>
+          </div>
+        </div>
+        <!-- END Grid View Content -->
+
+      </div>
+    </div>
+  </div>
+</section>
+
+<section id="services" data-magellan-target="services">
+  <div class="row">
+    <div class="small-12 columns">
+
+      <h2>Services</h2>
+      <p>Here are the services the network are able to offer</p>
+
+      <div class="row small-up-3 medium-up-4 large-up-6 small-collapse">
+        {% for service in site.services %}
+          <div class="column">
+            <a href="{{ service.url | relative_url }}" class="service-thumb">
+              <div class="service-thumb-img float-center" style="background-image: url(/images/services/{{ service.slug }}.png)"></div>
+              <h5>{{ service.name }}</h5>
+            </a>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+</section>
+
+<section id="contact" data-magellan-target="contact">
+  <div class="row">
+    <div class="small-12 medium-6 small-centered columns">
+
+      <h2>Get In Touch</h2>
+      <p>
+        If you would like to work with us, or find out more,
+        <a href="mailto:contact@coops.tech">get in touch</a>.
+        <br/> Not sure which tech coop, or coops, are right for you? Drop us a message at
+        <a href="mailto:contact@coops.tech">contact@coops.tech</a>, and we will help you find the perfect match.
+      </p>
+
+    </div>
+  </div>
+</section>
