diff --git a/source/about.html.erb b/source/about.html.erb
index 454482f85e..d0a21ccb92 100644
--- a/source/about.html.erb
+++ b/source/about.html.erb
@@ -3,21 +3,6 @@ title: "A framework for ambitious web developers"
 responsive: true
 ---
 <% content_for :foot do %>
-  <script type="text/javascript">
-    $(function() {
-      $('#slider').bxSlider({
-        displaySlideQty: 4,
-        moveSlideQty: 4,
-        auto: true,
-        pager: true,
-        speed: 700,
-        pause: 5000
-      });
-
-      // Hack to force proper sizing
-      $('.bx-wrapper, .bx-window').css('width', 940);
-    });
-  </script>
   <script>
     !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
   </script>
@@ -58,33 +43,35 @@ responsive: true
     <div class="feature">
       <div class="structure feature-img"></div>
       <p>No need to waste time on trivial choices. Ember's abstractions allow developers to focus on what makes your app <i>unique</i>.</p>
-    
     </div>
     <div class="feature">
       <div class="productivity feature-img"></div>
       <p>Ember.js is built for productivity. Designed with developer ergonomics in mind, its friendly APIs help developers <i>efficiently</i> get the job done.</p>
-    
-
     </div>
   </div>
   <div class="users section">
     <h2 class="text-center">Who's Using Ember.js?</h2>
     <div class="surround">
       <ul id="slider">
-        <% data.users.slice(0,12).each do |user| %>
+        <% data.users.slice(0,4).each do |user| %>
         <li class="user">
           <a href="<%= user.url %>" rel="nofollow">
             <img src="/images/about/<%= user.image %>" width="210" height="103" alt="<%= user.alt %>"/>
           </a>
         </li>
         <% end %>
+        <% data.users.slice(4,4).each do |user| %>
+        <li class="user desktop-only">
+          <a href="<%= user.url %>" rel="nofollow">
+            <img src="/images/about/<%= user.image %>" width="210" height="103" alt="<%= user.alt %>"/>
+          </a>
+        </li>
+        <% end %>
       </ul>
     </div>
-    <div class="about__listing-button">
-      <a class="ember-button ember-button--centered" href="/ember-users">
-        Meet More Users
-      </a>
-    </div>
+    <a class="ember-button ember-button--centered" href="/ember-users">
+      Meet More Users
+    </a>
   </div>
   <div class="gears section">
     <h2 class="text-center">Buy Ember.js Gear and Support Development</h2>
diff --git a/source/stylesheets/pages/about.css.scss b/source/stylesheets/pages/about.css.scss
index 972c580031..c64777b4f7 100644
--- a/source/stylesheets/pages/about.css.scss
+++ b/source/stylesheets/pages/about.css.scss
@@ -5,13 +5,7 @@
 
 .section {
   overflow: hidden;
-  table.columns {
-    margin: 0 auto;
-    td {
-      vertical-align: top;
-      padding-right: 50px;
-    }
-  }
+  margin: 4rem 0;
 }
 
 .features.section {
@@ -52,166 +46,68 @@
 }
 
 #content .users.section {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+
+  h2 {
+    margin-bottom: 2rem;
+  }
+
   .surround {
-    @include clearfix;
-    background-color: #FFF;
+    background-color: #fff;
     border-radius: 3px;
     border: 1px solid #d1d1d1;
     box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 #fff;
-    margin: 0 auto;
-    max-width: 100%;
-    // padding-top: 19px;
-    width: 940px;
+    margin: 0 2rem 2rem 2rem;
+    max-width: 940px;
+    padding: 1rem;
 
     a:hover {
       border: 0;
     }
 
     ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
       margin: 0;
-    }
 
-    .bx-wrapper,
-    .bx-window {
-      width: 940px;
-      max-width: 100%;
-    }
-
-    .bx-wrapper {
-
-      .bx-prev,
-      .bx-next {
-        background: no-repeat;
-        @include hidpi('about/carousel_controls', png);
-        float: left;
-        height: 28px;
-        width: 30px;
+      @media screen and (min-width: 958px) {
+        justify-content: space-between;
       }
-
-      .bx-prev,
-      .bx-next,
-      .pager-link {
-        text-indent: -9999px;
-      }
-
-      .bx-prev {
-        background-position: left;
-        border-right: 1px solid #d1d1d1;
-        float: right;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-      }
-
-      .bx-next {
-        background-position: right;
-        border-left: 1px solid #d1d1d1;
-        float: right;
-        position: absolute;
-        bottom: 0;
-        right: 1px;
-      }
-
-      .bx-window {
-        border-bottom: 1px solid #d1d1d1;
-        height: 124px;
-        .user.pager {
-          margin: 11px !important;
-          min-width: 177px;
-        }
-      }
-
-      .bx-pager {
-        @include clearfix;
-        background: bottom repeat-x #f4f4f4;
-        @include hidpi('about/carousel_pager_bg', png);
-        border-left: 1px solid #fafafa;
-        border-right: 1px solid #fafafa;
-        border-top: 1px solid #fefefe;
-        font-size: 0;
-        height: 28px;
-        line-height: 0;
-        margin: 0 29px;
-        padding-top: 9px;
-        text-align: center;
-
-        .pager-link {
-          background: 0 0 no-repeat;
-          @include hidpi('about/carousel_dots', png);
-          height: 11px;
-          width: 10px;
-          margin-left: 10px;
-          display: inline-block;
-
-          &.pager-active,
-          &.pager-active:hover {
-            background-position: -22px 0;
-          }
-
-          &:hover {
-            background-position: -11px 0;
-          }
-
-          &:first-of-type {
-            margin-left: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .user {
-    position: relative;
-    float: left;
-    @media screen and (min-width: 0px) and (max-width:767px) {
-      width: 175px;
-    }
-    @media screen and (min-width:768px) {
-      width: 230px;
-    }
-
-    &.empty {
-      display: block;
-      height: 210px;
-      visibility: hidden; /*Take up space, but be invisible*/
-    }
-
-    a {
-      display: block;
-      height: 103px;
-      margin-left: 20px;
-      width: 210px;
     }
   }
 
-  p {
-    text-align: center;
+  .user a {
+    display: block;
+    height: 103px;
+    width: 210px;
   }
 
-  .listed {
-    padding-top: 20px;
-    display:block;
-    margin: 0 auto;
-    width: 100%;
+  @media screen and (max-width: 767px) {
+    .desktop-only {
+      display: none;
+    }
   }
 }
 
 .gears.section {
   display: block;
-  clear: both;
-  max-width: 100%;
   margin: 0 auto;
+
+  h2 {
+    margin-bottom: 2rem;
+  }
+
   .gear {
-    text-align: center;
-    height: 120px;
-    max-width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-bottom: 2rem;
+
     a {
-      display: inline-block;
-      img {
-        display: block;
-        max-width: 100%;
-        margin: 0 auto;
-      }
+      margin: 0 0.5rem;
     }
   }
 }
@@ -298,17 +194,19 @@ a.toc-anchor {
 }
 
 .about__listing-button-group {
-  width: 100%;
+  align-content: center;
   display: flex;
   justify-content: center;
-  align-content: center;
-  @media screen and (min-width:0) and (max-width: 991px) {
+  width: 100%;
+
+  @media screen and (max-width: 991px) {
     flex-flow: row wrap;
   }
 }
 .about__listing-button {
-  margin: 10px 10px 0 10px;
-  @media screen and (min-width:0) and (max-width: 991px) {
+  margin: 0 10px;
+
+  @media screen and (max-width: 991px) {
     min-width: 100%;
     margin: 10px auto;
   }
diff --git a/source/stylesheets/pages/resources.css.scss b/source/stylesheets/pages/resources.css.scss
index 7c418c9393..03e6d2f642 100644
--- a/source/stylesheets/pages/resources.css.scss
+++ b/source/stylesheets/pages/resources.css.scss
@@ -145,21 +145,3 @@ body.community_resources #content {
     text-align: center;
   }
 }
-
-.gears.section {
-  .gear {
-    text-align: center;
-    height: 120px;
-
-    .gearplus {
-      padding: 0px 30px 0px 30px;
-      display: inline;
-      line-height: 120px;
-
-      img {
-        vertical-align: top;
-        padding-top: 50px;
-      }
-    }
-  }
-}