diff --git a/blogs/themes/mysociety/assets/css/base.css b/blogs/themes/mysociety/assets/css/base.css
index 5ec305c9..0544e33f 100644
--- a/blogs/themes/mysociety/assets/css/base.css
+++ b/blogs/themes/mysociety/assets/css/base.css
@@ -1308,6 +1308,38 @@ article.post .entry-header {
   clear: both;
 }
 
+.news-list {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+.news-list li {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+.news-list li {
+  margin-bottom: 0.5em;
+  padding-bottom: 0.5em;
+}
+.news-list li h3 {
+  margin: 0;
+}
+.news-list li h3 a {
+  color: #333333;
+}
+.news-list li .entry-date {
+  color: #888888;
+  font-style: normal;
+}
+
+.news_box {
+  border-bottom: 0.25em solid #CFCFCF;
+  margin-bottom: 1em;
+  padding-bottom: 1em;
+}
+
 /* PAGE SPECIFIC */
 article.ms_project .entry-header,
 article.ms_product .entry-header,
@@ -1317,11 +1349,40 @@ article.page .entry-header {
 
 article.homepage .entry-header .banner {
   margin: 1em 0;
+  text-align: center;
 }
 article.homepage .entry-header p.entry-intro {
   font-size: 1.375em;
   line-height: 1.27272727272727em;
   color: #333333;
+  text-align: center;
+}
+article.homepage .twitter_box {
+  margin-bottom: 2em;
+}
+article.homepage .project_product-section .project_product-section-inner ul.block-list {
+  width: 100%;
+}
+article.homepage .project_product-section .project_product-section-inner ul.block-list li {
+  width: 100%;
+  display: block;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  border-bottom: 0.125em solid #cccccc;
+}
+article.homepage .project_product-section .project_product-section-inner ul.block-list li:last-child {
+  border-bottom: none;
+}
+article.homepage .project_product-section .project_product-section-inner ul.block-list li .thumb {
+  display: none;
+}
+article.homepage .project_product-section .project_product-section-inner ul.block-list li h3 {
+  margin: 0;
+}
+article.homepage .project_product-section .project_product-section-inner ul.block-list li h3 a {
+  width: 100%;
+  padding: 1em 0;
 }
 
 .product-section-header {
diff --git a/blogs/themes/mysociety/assets/css/layout.css b/blogs/themes/mysociety/assets/css/layout.css
index 0e858ad0..5a2be59a 100644
--- a/blogs/themes/mysociety/assets/css/layout.css
+++ b/blogs/themes/mysociety/assets/css/layout.css
@@ -254,14 +254,14 @@ h2.pound, h2.build, h2.github, h2.codeblog, h2.wikidocs, h2.bubble, h2.twitter,
   margin-bottom: 1em !important;
 }
 
-.tweets {
+.tweets, .news-list {
   background: white url(../images/grid_12.gif) center repeat;
 }
-.tweets li {
+.tweets li, .news-list li {
   display: block;
   border-bottom: 0.0625em solid #EEEEEE;
 }
-.tweets li:last-child {
+.tweets li:last-child, .news-list li:last-child {
   border-bottom: none;
 }
 
@@ -277,6 +277,14 @@ h2.pound, h2.build, h2.github, h2.codeblog, h2.wikidocs, h2.bubble, h2.twitter,
   clear: left;
 }
 
+.news_box {
+  border-bottom: none;
+  padding-left: 3em;
+}
+.news_box > h2 {
+  margin-left: -1.174em;
+}
+
 #tab-nav {
   list-style-type: none;
   padding: 0;
@@ -296,6 +304,18 @@ h2.pound, h2.build, h2.github, h2.codeblog, h2.wikidocs, h2.bubble, h2.twitter,
 }
 
 /* PAGE SPECIFIC */
+article.homepage #news-and-twitter {
+  overflow: hidden;
+}
+article.homepage #news-and-twitter .news_box {
+  width: 40em;
+  float: left;
+}
+article.homepage #news-and-twitter .twitter_box {
+  width: 20em;
+  float: left;
+}
+
 .product-section-header h2 {
   margin-left: 0;
   margin-right: 0;
diff --git a/blogs/themes/mysociety/assets/images/mob-homepage-banner.png b/blogs/themes/mysociety/assets/images/mob-homepage-banner.png
new file mode 100644
index 00000000..01991ec2
Binary files /dev/null and b/blogs/themes/mysociety/assets/images/mob-homepage-banner.png differ
diff --git a/blogs/themes/mysociety/assets/scss/base.scss b/blogs/themes/mysociety/assets/scss/base.scss
index 425b9a44..6aa5a979 100644
--- a/blogs/themes/mysociety/assets/scss/base.scss
+++ b/blogs/themes/mysociety/assets/scss/base.scss
@@ -772,6 +772,30 @@ article.post .entry-header {
   }
 }
 
+.news-list {
+  @include list-reset-soft;
+  li {
+    margin-bottom:0.5em;
+    padding-bottom:0.5em;
+    h3 {
+      margin:0;
+      a {
+        color:#333333;
+      }
+    }
+    .entry-date {
+      color:#888888;
+      font-style:normal;
+    }
+  }
+}
+
+.news_box {
+  border-bottom:0.25em solid #CFCFCF; //3px
+  margin-bottom:1em;
+  padding-bottom:1em;
+}
+
 /* PAGE SPECIFIC */
 article.ms_project,
 article.ms_product,
@@ -786,11 +810,44 @@ article.homepage {
   .entry-header {
     .banner {
       margin:1em 0;
+      text-align:center;
     }
     p.entry-intro {
       font-size:1.375em; //22px
       line-height:1.27272727272727em; //28px
       color:#333333;
+      text-align:center;
+    }
+  }
+  .twitter_box {
+    margin-bottom:2em;
+  }
+  .project_product-section {
+    .project_product-section-inner {
+      ul.block-list {
+        width:100%;
+        li {
+          width:100%;
+          display:block;
+          height:auto;
+          padding:0;
+          margin:0;
+          border-bottom:0.125em solid #cccccc; //2px
+          &:last-child {
+            border-bottom:none;
+          }
+          .thumb {
+            display:none;
+          }
+          h3 {
+            margin:0;
+            a {
+              width:100%;
+              padding:1em 0;
+            }
+          }
+        }
+      }
     }
   }
 }
diff --git a/blogs/themes/mysociety/assets/scss/layout.scss b/blogs/themes/mysociety/assets/scss/layout.scss
index 22a54ab7..e1dbc5c5 100644
--- a/blogs/themes/mysociety/assets/scss/layout.scss
+++ b/blogs/themes/mysociety/assets/scss/layout.scss
@@ -291,6 +291,18 @@ h2.pound, h2.build, h2.github, h2.codeblog, h2.wikidocs, h2.bubble, h2.twitter,
   }
 }
 
+.news-list {
+  @extend .tweets;
+}
+
+.news_box {
+  border-bottom:none;
+  padding-left:3em; //48px
+  >h2 {// font base size is 46px
+    margin-left:-1.17391304347826em; //54px
+  }
+}
+
 #tab-nav {
   @include list-reset;
 }
@@ -298,6 +310,21 @@ h2.pound, h2.build, h2.github, h2.codeblog, h2.wikidocs, h2.bubble, h2.twitter,
 
 /* PAGE SPECIFIC */
 
+//homepage
+article.homepage {
+  #news-and-twitter {
+    overflow:hidden;
+    .news_box {
+      width:40em;
+      float:left;
+    }
+    .twitter_box {
+      width:20em;
+      float:left;
+    }
+  }
+}
+
 //product list page
 .product-section-header {
   h2 {// font base size is 46px
diff --git a/blogs/themes/mysociety/front-page.php b/blogs/themes/mysociety/front-page.php
index 363772d0..81237ab6 100644
--- a/blogs/themes/mysociety/front-page.php
+++ b/blogs/themes/mysociety/front-page.php
@@ -3,36 +3,106 @@
     <article id="post-<? the_ID() ?>" class="homepage">
     <header class="entry-header">
       <section class="banner">
-      <?
-        $images = get_field('gallery');
-        if($images):
-      ?>
-        <img src="<?= $images[0]['image']; ?>" alt="<?= $images[0]['alt'] ?>" />
-      <? else: ?>
-        <img src="<? bloginfo( 'template_url' ) ?>/assets/images/homepage-banner.png" alt="Welcome to mySociety" />
-      <? endif; ?>
+        <img class="mob-only" src="<? bloginfo( 'template_url' ) ?>/assets/images/mob-homepage-banner.png" alt="Welcome to mySociety" />
+        <img class="desk-only" src="<? bloginfo( 'template_url' ) ?>/assets/images/homepage-banner.png" alt="Welcome to mySociety" />
       </section>
 
       <? if(get_field('intro')): ?><p class="entry-intro"><? the_field('intro') ?></p><? endif; ?>
     </header>
 
     <div class="entry-content">
-      <section id="not-for-profit-projects" class="project_product-section">
-        <h2 class="pound grey_icon"><? _e( 'Not-for-profit Projects', 'mysociety' ) ?></h2>
+      <div id="news-and-twitter">
+        <section class="news_box">
+          <h2 class="bubble orange_icon">News</h2>
+          <ul class="news-list">
+            <?
+              $news_query = new WP_Query("posts_per_page=4");
+              while ($news_query->have_posts()) : $news_query->the_post();
+            ?>
+              <li>
+                <h3 class="entry-title"><a href="<? the_permalink() ?>"><? the_title() ?></a></h3>
+                <small class="entry-date"><? mysociety_posted_on() ?></small>
+              </li>
+            <?    
+              endwhile;
+            ?>
+          </ul>
+        </section>
+
+        <section class="twitter_box">
+          <h2 class="twitter green_icon"><? _e( 'Twitter', 'mysociety' ) ?></h2>
+          <a class="green_button" href="http://twitter.com/mySociety">@mySociety</a>
+          <ul class="tweets">
+            <li>
+              <span>13 Mar</span>
+              <small><a href="http://ow.ly/9CvOe">http://ow.ly/9CvOe</a> "Ministers expect councils to make savings on road maintenance" - one way is to put problem-reporting online!</small>
+            </li>
+            <li>
+              <span>13 Mar</span>
+              <small>FixMyStreet is available for council websites: <a href="http://ow.ly/9CvUF">http://ow.ly/9CvUF</a> - slashes costs and makes reporting easy for users.</small>
+            </li>
+          </ul>
+        </section>
+      </div>
+
+      <section id="not-for-profit-projects" class="project_product-section grey_back">
+        <h2 class="pound"><? _e( 'Not-for-profit Projects', 'mysociety' ) ?></h2>
         
         <div class="project_product-section-inner">
           <ul class="block-list">
-            
+            <? $not_for_profit_posts = new WP_Query('post_type=ms_project&posts_per_page=6'); ?>
+            <? $i = 0; while ($not_for_profit_posts->have_posts()) : $not_for_profit_posts->the_post(); $i++; ?>
+              <li id="project-<? the_ID() ?>" class="<? if ($i == 3){echo "last";$i = 0;} ?>">
+                <?
+                  $images = get_field('gallery');
+                  if($images) {
+                    $sized = vt_resize( $images[0]['image'], '', 288, 180, true );
+                    echo "<a class='thumb' href='".get_permalink()."'><img src='{$sized['url']}' width='{$sized['width']}' height='{$sized['height']}' alt='{$image['alt']}' /></a>";
+                  }
+                ?>
+
+                <h3><a href="<? the_permalink() ?>"><? the_title() ?></a></h3>
+
+                <?
+                  $intro = get_field('intro');
+                  if (strlen($intro) > 100)
+                    echo '<p class="desk-only">'.substr($intro, 0, 100) . '...</p>';
+                  else
+                    echo "<p class='desk-only'>{$intro}</p>";
+                ?>
+              </li>
+            <? endwhile; ?>
           </ul>
         </div>
       </section>
 
-      <section id="commercial-products" class="project_product-section">
-        <h2 class="pound <?= $colour; ?>_icon"><? _e( 'Commercial Products', 'mysociety' ) ?></h2>
+      <section id="commercial-products" class="project_product-section blue_back">
+        <h2 class="pound"><? _e( 'Commercial Products', 'mysociety' ) ?></h2>
         
         <div class="project_product-section-inner">
           <ul class="block-list">
+            <? $commercial_products = new WP_Query('post_type=ms_product&posts_per_page=6'); ?>
+            <? $i = 0; while ($commercial_products->have_posts()) : $commercial_products->the_post(); $i++; ?>
+              <li id="project-<? the_ID() ?>" class="<? if ($i == 3){echo "last";$i = 0;} ?>">
+                <?
+                  $images = get_field('gallery');
+                  if($images) {
+                    $sized = vt_resize( $images[0]['image'], '', 288, 180, true );
+                    echo "<a class='thumb' href='".get_permalink()."'><img src='{$sized['url']}' width='{$sized['width']}' height='{$sized['height']}' alt='{$image['alt']}' /></a>";
+                  }
+                ?>
+
+                <h3><a href="<? the_permalink() ?>"><? the_title() ?></a></h3>
 
+                <?
+                  $intro = get_field('intro');
+                  if (strlen($intro) > 100)
+                    echo '<p class="desk-only">'.substr($intro, 0, 100) . '...</p>';
+                  else
+                    echo "<p class='desk-only'>{$intro}</p>";
+                ?>
+              </li>
+            <? endwhile; ?>
           </ul>
         </div>
       </section>