diff --git a/src/app/components/app/index.js b/src/app/components/app/index.js
index d6128e583..ba2862574 100644
--- a/src/app/components/app/index.js
+++ b/src/app/components/app/index.js
@@ -39,6 +39,7 @@ const pageMap = {
   'work/design-build': require('app/components/work-design-build'),
   'work/launch-scale': require('app/components/work-launch-scale'),
   'work/ways-of-working': require('app/components/work-ways-of-working'),
+  'work/ustwo-auto': require('app/components/ustwo-auto'),
   'blog': require('app/components/blog'),
   'blog/post': require('app/components/post'),
   'legal': require('app/components/legal'),
diff --git a/src/app/components/featured-case-study/_index.scss b/src/app/components/featured-case-study/_index.scss
index 60c3636b8..f074e3b3a 100644
--- a/src/app/components/featured-case-study/_index.scss
+++ b/src/app/components/featured-case-study/_index.scss
@@ -21,14 +21,25 @@
     padding-top: 100px;
     padding-bottom: 150px;
   }
+}
+
+.featured-case-study-image {
+  text-align: center;
+  margin-bottom: 40px;
 
-  @media screen and (min-width: $bp-large) {
-    padding-top: 170px;
-    padding-bottom: 170px;
+  img {
+    width: 90%;
+    max-width: 435px;
+    margin: 0 auto;
   }
 }
 
 @media screen and (min-width: $bp-large) {
+  .featured-case-study {
+    height: $section-height;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
   .featured-case-study-inner {
     display: flex;
   }
@@ -47,21 +58,15 @@
     flex: 1;
     order: 2;
   }
-}
-
-.featured-case-study-image {
-  text-align: center;
-  margin-bottom: 40px;
-
-  img {
-    width: 90%;
-    max-width: 435px;
-    margin: 0 auto;
-  }
+  .featured-case-study-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0;
 
-  @media screen and (min-width: $bp-large) {
     img {
-      max-width: 590px;
+      height: 90%;
+      max-width: 500px;
     }
   }
 }
diff --git a/src/app/components/testimonial-carousel/index.js b/src/app/components/testimonial-carousel/index.js
index 54590488c..dcb354ea9 100644
--- a/src/app/components/testimonial-carousel/index.js
+++ b/src/app/components/testimonial-carousel/index.js
@@ -30,32 +30,37 @@ class TestimonialCarousel extends Component {
   }
 
   getTestimonialsPosition() {
-    const { documentScrollPosition, viewportDimensions } = this.props;
-
-    const testimonialsHeight = this.testimonialsWrapper.getBoundingClientRect().height;
-
-    // Has been some problems relying on the following value.
-    // So I've taken lead from the following to get a more robust solution:
-    // http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
-    const box = this.testimonialsWrapper.getBoundingClientRect();
-    const body = document.body;
-    const scrollTop = window.pageYOffset || body.scrollTop;
-    const clientTop = body.clientTop || 0;
-    const top = box.top + scrollTop - clientTop;
-    const testimonialsPositionFromTop = Math.round(top);
-
-    const testimonialsPosition = {
-      from: testimonialsPositionFromTop,
-      to: testimonialsPositionFromTop + testimonialsHeight
-    }
+    const { documentScrollPosition, viewportDimensions, type } = this.props;
+
+    // Here type denotes the ustwo-auto colour on the twitter block, meaning it is
+    // a lighter colour and therefore we don't want the navigation to know about it
+    // as we don't want the nav colour to change when over it - getit?
+    if (!type) {
+      const testimonialsHeight = this.testimonialsWrapper.getBoundingClientRect().height;
+
+      // Has been some problems relying on the following value.
+      // So I've taken lead from the following to get a more robust solution:
+      // http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
+      const box = this.testimonialsWrapper.getBoundingClientRect();
+      const body = document.body;
+      const scrollTop = window.pageYOffset || body.scrollTop;
+      const clientTop = body.clientTop || 0;
+      const top = box.top + scrollTop - clientTop;
+      const testimonialsPositionFromTop = Math.round(top);
+
+      const testimonialsPosition = {
+        from: testimonialsPositionFromTop,
+        to: testimonialsPositionFromTop + testimonialsHeight
+      }
 
-    const fixedHeightTestimonials = testimonialsHeight;
+      const fixedHeightTestimonials = testimonialsHeight;
 
-    Flux.testimonialsPosition(testimonialsPosition);
+      Flux.testimonialsPosition(testimonialsPosition);
+    }
   }
 
   renderTestimonials() {
-    const { style } = this.props;
+    const { type } = this.props;
 
     return this.props.testimonials.map((testimonial, i) => {
       const classes = classnames('testimonial-item', {
@@ -63,7 +68,7 @@ class TestimonialCarousel extends Component {
       });
 
       let icon;
-      if (style === 'twitter-auto') {
+      if (type === 'twitter-auto') {
         icon = (
           <div className="testimonial-icon">
             <SVG
@@ -89,25 +94,6 @@ class TestimonialCarousel extends Component {
     });
   }
 
-  renderTestimonials() {
-    return this.props.testimonials.map((testimonial, i) => {
-      const classes = classnames('testimonial-item', {
-        active: i === this.state.currentItem
-      });
-
-      return (
-        <div key={`testimonial-${i}`} className={classes}>
-          <p>&ldquo;{testimonial.testimonial}&rdquo;</p>
-          <div className="testimonial-name">{testimonial.source.name}</div>
-          <div className="testimonial-smallprint">
-            <span className="testimonial-title">{testimonial.source.title}&nbsp;</span>
-            <span className="testimonial-company">{testimonial.source.company}</span>
-          </div>
-        </div>
-      );
-    });
-  }
-
   componentDidMount() {
     this.getTestimonialsPosition();
     window.addEventListener('resize', this.getTestimonialsPositionBound);
@@ -119,18 +105,18 @@ class TestimonialCarousel extends Component {
   }
 
   render() {
-    const { fixedHeight, style } = this.props;
+    const { fixedHeight, type } = this.props;
     const classes = classnames('testimonial-carousel', {
-      twitterAuto: style === 'twitter-auto'
+      twitterAuto: type === 'twitter-auto'
     });
 
     let styles;
     if (fixedHeight) {
-      styles = { height: `${fixedHeight}px` }
+      styles = { height: `${fixedHeight * .9}px` }
     }
 
     return (
-      <section className="testimonial-carousel" style={styles} ref={(ref) => this.testimonialsWrapper = ref }>
+      <section className={classes} style={styles} ref={(ref) => this.testimonialsWrapper = ref }>
         <div className="testimonial-content">
           {this.renderTestimonials()}
         </div>
diff --git a/src/app/components/ustwo-auto/_index.scss b/src/app/components/ustwo-auto/_index.scss
index 04e3df2fc..a50256a8e 100644
--- a/src/app/components/ustwo-auto/_index.scss
+++ b/src/app/components/ustwo-auto/_index.scss
@@ -75,7 +75,8 @@
   }
 
   .card-list {
-    padding: 100px 0;
+    padding-top: 100px;
+    padding-bottom: 100px;
   }
 
   .testimonial-smallprint {
@@ -111,7 +112,8 @@
 
 .ustwo-auto-team {
   @include core-layout;
-  padding: 100px 0;
+  padding-top: 100px;
+  padding-bottom: 100px;
   text-align: center;
 
   h2 {
diff --git a/src/app/components/ustwo-auto/index.js b/src/app/components/ustwo-auto/index.js
index 3632fb09f..b935a05ff 100644
--- a/src/app/components/ustwo-auto/index.js
+++ b/src/app/components/ustwo-auto/index.js
@@ -26,7 +26,7 @@ function UstwoAuto({ page, documentScrollPosition, viewportDimensions, footer, s
     : null;
 
   const renderTwitter = ustwoAutoData.twitter.length > 0
-    ? <TestimonialCarousel testimonials={ustwoAutoData.twitter} fixedHeight={fixedHeight} style="twitter-auto" />
+    ? <TestimonialCarousel testimonials={ustwoAutoData.twitter} fixedHeight={fixedHeight} type="twitter-auto" />
     : null;
 
   const caseStudies = get(page, '_embedded.ustwo:case_studies', []);
diff --git a/src/app/components/work-case-studies/_index.scss b/src/app/components/work-case-studies/_index.scss
new file mode 100644
index 000000000..6a132cf8e
--- /dev/null
+++ b/src/app/components/work-case-studies/_index.scss
@@ -0,0 +1,11 @@
+@media screen and (min-width: $bp-larger) {
+  .work-case-studies {
+    .card-list-inner.lessThanThree {
+      justify-content: flex-start;
+
+      .card-item {
+        margin-right: 30px;
+      }
+    }
+  }
+}
diff --git a/src/app/components/work-case-studies/index.js b/src/app/components/work-case-studies/index.js
index 2deff7045..dcf3485cb 100644
--- a/src/app/components/work-case-studies/index.js
+++ b/src/app/components/work-case-studies/index.js
@@ -2,15 +2,20 @@ import React from 'react';
 import WorkItem from 'app/components/work-item';
 import LoadMoreButton from 'app/components/load-more-button';
 import kebabCase from 'lodash/string/kebabCase';
+import classnames from 'classnames';
 
 function WorkCaseStudies({ page, caseStudies, caseStudyFilter, numberOfCaseStudiesShowing, addMoreCaseStudies }) {
 
+  if (caseStudyFilter === 'venture') {
+    caseStudyFilter = 'ustwo-venture';
+  }
+
   let filteredCaseStudies;
   if (caseStudyFilter === 'all') {
     filteredCaseStudies = caseStudies;
   } else {
     filteredCaseStudies = caseStudies.filter(caseStudy => {
-      return caseStudy.categories[0].name === caseStudyFilter
+      return caseStudy.categories[0].slug === caseStudyFilter
     });
   }
 
@@ -24,9 +29,13 @@ function WorkCaseStudies({ page, caseStudies, caseStudyFilter, numberOfCaseStudi
     }
   });
 
+  const classes = classnames('card-list-inner', {
+    lessThanThree: filteredCaseStudies.length < 3
+  });
+
   return (
     <div className="card-list work-items-list work-case-studies">
-      <div className="card-list-inner">
+      <div className={classes}>
         {renderCaseStudies}
       </div>
       <LoadMoreButton
diff --git a/src/app/components/work-clients-board/_index.scss b/src/app/components/work-clients-board/_index.scss
index 21a1d57c6..9efc6f3bb 100644
--- a/src/app/components/work-clients-board/_index.scss
+++ b/src/app/components/work-clients-board/_index.scss
@@ -5,8 +5,8 @@
  */
 
 .work-clients-board {
-  padding-top: 130px;
-  padding-bottom: 130px;
+  padding-top: 80px;
+  padding-bottom: 80px;
 
   .work-clients-board-inner {
     max-width: $grid-max-width;
@@ -39,8 +39,8 @@
   }
 
   @media screen and (min-width: $bp-medium) {
-    padding-top: 150px;
-    padding-bottom: 150px;
+    padding-top: 100px;
+    padding-bottom: 100px;
 
     .title {
       margin-bottom: 110px;
@@ -58,8 +58,6 @@
   }
 
   @media screen and (min-width: $bp-large) {
-    padding-top: 170px;
-    padding-bottom: 170px;
 
     .title {
       margin-bottom: 50px;
diff --git a/src/app/components/work-verticals/_index.scss b/src/app/components/work-verticals/_index.scss
index 9e6913eb2..cddc64a92 100644
--- a/src/app/components/work-verticals/_index.scss
+++ b/src/app/components/work-verticals/_index.scss
@@ -5,6 +5,8 @@
 
 
 .work-verticals {
+  display: flex;
+  flex-wrap: wrap;
 
   .section-title {
     margin-bottom: 5px;
@@ -16,6 +18,9 @@
   background-color: $lightGrey;
   background-repeat: no-repeat;
   background-size: cover;
+  height: $section-height;
+  align-items: center;
+  width: 100%;
 
   h3 {
     margin-bottom: 15px;
@@ -24,21 +29,11 @@
 }
 
 .work-verticals-item-small {
-  display: inline-block;
   width: 50%;
 }
 
 .work-verticals-item-inner {
   position: relative;
-  padding: 100px 0;
-
-  @media screen and (min-width: $bp-medium) {
-    padding: 150px 0;
-  }
-
-  @media screen and (min-width: $bp-larger) {
-    padding: 200px 0;
-  }
 }
 
 .work-vertical-intro {
diff --git a/src/app/components/work-verticals/index.js b/src/app/components/work-verticals/index.js
index 67a8ed9e2..d0059e5fd 100644
--- a/src/app/components/work-verticals/index.js
+++ b/src/app/components/work-verticals/index.js
@@ -15,7 +15,7 @@ function WorkVerticals({ data }) {
       >
         <div className="work-verticals-item-inner">
           <div className="work-verticals-content">
-            <div className="section-title">Expertise</div>
+            <div className="section-title">Research Project</div>
             <h3>{item.title}</h3>
             <p>{item.text}</p>
             <button className="work-verticals-button" onClick={Flux.override(item.slug)}>
diff --git a/src/app/components/work/_index.scss b/src/app/components/work/_index.scss
index a81c83cbc..a83d21a44 100644
--- a/src/app/components/work/_index.scss
+++ b/src/app/components/work/_index.scss
@@ -166,7 +166,7 @@
   padding: 24px 0;
 }
 
-.page-work-filter {
+.work-item-filter {
   text-align: center;
 
   button {
diff --git a/src/app/components/work/index.js b/src/app/components/work/index.js
index ffcea71b6..d50536f7c 100644
--- a/src/app/components/work/index.js
+++ b/src/app/components/work/index.js
@@ -6,6 +6,7 @@ import getFeaturedImage from 'app/lib/get-featured-image';
 import env from 'app/adaptors/server/env';
 import Flux from 'app/flux';
 import window from 'app/adaptors/server/window';
+import kebabCase from 'lodash/string/kebabCase';
 
 import TestimonialCarousel from 'app/components/testimonial-carousel';
 import Video from 'app/components/video';
@@ -73,15 +74,34 @@ class PageWork extends Component {
     })
   }
 
+  renderWorkItemFilter() {
+    const { caseStudyFilter } = this.state;
+    const filterItems = ['All', 'Client Work', 'Venture'];
+
+    const renderFilterItems = filterItems.map(item => {
+      const classes = classnames({ selected: caseStudyFilter === kebabCase(item) });
+      return (
+        <button
+          className={classes}
+          onClick={() => this.setState({ caseStudyFilter: kebabCase(item), numberOfCaseStudiesShowing: 12 })}>
+          {item}
+        </button>
+      );
+    });
+
+    return (
+      <div className="work-item-filter">
+        {renderFilterItems}
+      </div>
+    );
+  }
+
   render() {
     const { page, className, loaded, isMobile, footer, studios, currentPage, fixedHeight, documentScrollPosition, viewportDimensions, popup, modal } = this.props;
     const { isLoadingMorePosts, numberOfCaseStudiesShowing, caseStudyFilter } = this.state;
     const caseStudies = get(page, '_embedded.ustwo:case_studies', []);
     const image = getFeaturedImage(page);
     const classes = classnames('page-work', className);
-    const buttonClassAll = classnames({ selected: caseStudyFilter === 'all' });
-    const buttonClassClients = classnames({ selected: caseStudyFilter === 'Client Work' });
-    const buttonClassVentures = classnames({ selected: caseStudyFilter === 'Venture' });
 
     return (
       <article className={classes}>
@@ -110,27 +130,7 @@ class PageWork extends Component {
           <FeaturedCaseStudy content={featuredCaseStudy} />
 
           <div className="page-work-controls" ref={(ref) => this.workAnchor = ref}>
-            <div className="page-work-filter">
-              <button className={buttonClassAll}
-                onClick={() => this.setState({
-                  caseStudyFilter: 'all', numberOfCaseStudiesShowing: 12
-                })}>
-                All
-              </button>
-              <button className={buttonClassClients}
-                onClick={() => this.setState({
-                  caseStudyFilter: 'Client Work', numberOfCaseStudiesShowing: 12
-                })}>
-                Client Work
-              </button>
-              <button
-                className={buttonClassVentures}
-                onClick={() => this.setState({
-                  caseStudyFilter: 'Venture', numberOfCaseStudiesShowing: 12
-                })}>
-                Ventures
-              </button>
-            </div>
+            {this.renderWorkItemFilter()}
           </div>
 
           <WorkCaseStudies
diff --git a/src/app/flux/routes.js b/src/app/flux/routes.js
index beea68a2a..296fb0fee 100644
--- a/src/app/flux/routes.js
+++ b/src/app/flux/routes.js
@@ -54,6 +54,15 @@ const routes = {
       slug: 'ways-of-working'
     }]
   },
+  ustwoAuto: {
+    id: 'work/ustwo-auto',
+    patterns: ['/work/ustwo-auto'],
+    data: () => [{
+      url: 'ustwo/v1/pages/ustwo-auto',
+      type: 'page',
+      slug: 'ustwo-auto'
+    }]
+  },
   caseStudy: {
     id: 'work/case-study',
     patterns: ['/work/:cid'],
diff --git a/src/app/images/auto/ustwo-auto-mobility.png b/src/app/images/auto/ustwo-auto-mobility.png
index 30a98eecb..8313667cb 100644
Binary files a/src/app/images/auto/ustwo-auto-mobility.png and b/src/app/images/auto/ustwo-auto-mobility.png differ
diff --git a/src/app/index.scss b/src/app/index.scss
index 3dc4cc4bd..d8b7c814d 100644
--- a/src/app/index.scss
+++ b/src/app/index.scss
@@ -98,3 +98,4 @@
 @import "components/ustwo-auto/index";
 @import "components/contact-block-auto/index";
 @import "components/ustwo-auto-whatwedo/index";
+@import "components/work-case-studies/index";
diff --git a/src/app/lib/_variables.scss b/src/app/lib/_variables.scss
index 7f603015c..30ece6785 100644
--- a/src/app/lib/_variables.scss
+++ b/src/app/lib/_variables.scss
@@ -47,6 +47,8 @@ $grid-max-width: 1200px;
 $grid-inner-padding: 120px;
 $core-padding: 6%;
 
+$section-height: 90vh;
+
 /* ------------------------------------------------------------ *\
 |* Blog
 \* ------------------------------------------------------------ */