diff --git a/src/amo/containers/Home.js b/src/amo/containers/Home.js
index fe43268d815..a91308f3cea 100644
--- a/src/amo/containers/Home.js
+++ b/src/amo/containers/Home.js
@@ -16,26 +16,50 @@ export class HomePageBase extends React.Component {
     return (
       <div className="HomePage">
         <h2 className="HomePage-subheading">{i18n.gettext('What do you want Firefox to do?')}</h2>
-        <ul className="HomePage-cat-list">
-          <li className="HomePage-block-ads"><Link to="#block-ads"><span>{i18n.gettext('Block ads')}</span></Link></li>
-          <li className="HomePage-screenshot"><Link to="#screenshot"><span>{i18n.gettext('Screenshot')}</span></Link></li>
-          <li className="HomePage-save-stuff"><Link to="#save-stuff"><span>{i18n.gettext('Save stuff')}</span></Link></li>
-          <li className="HomePage-shop-online"><Link to="#shop-online"><span>{i18n.gettext('Shop online')}</span></Link></li>
-          <li className="HomePage-be-social"><Link to="#share-stuff"><span>{i18n.gettext('Be social')}</span></Link></li>
-          <li className="HomePage-share-stuff"><Link to="#share-stuff"><span>{i18n.gettext('Share stuff')}</span></Link></li>
+        <ul className="HomePage-category-list">
+          <li className="HomePage-category-li HomePage-block-ads">
+            <Link to="#block-ads"><span>{i18n.gettext('Block ads')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-screenshot">
+            <Link to="#screenshot"><span>{i18n.gettext('Screenshot')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-save-stuff">
+            <Link to="#save-stuff"><span>{i18n.gettext('Save stuff')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-shop-online">
+            <Link to="#shop-online"><span>{i18n.gettext('Shop online')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-be-social">
+            <Link to="#share-stuff"><span>{i18n.gettext('Be social')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-share-stuff">
+            <Link to="#share-stuff"><span>{i18n.gettext('Share stuff')}</span></Link>
+          </li>
         </ul>
         <Link className="HomePage-extensions-link" to="/extensions/">
           {i18n.gettext('Browse all extensions')}
         </Link>
 
         <h2 className="HomePage-subheading">{i18n.gettext('How do you want Firefox to look?')}</h2>
-        <ul className="HomePage-cat-list">
-          <li className="HomePage-wild"><Link to="#wild"><span>{i18n.gettext('Wild')}</span></Link></li>
-          <li className="HomePage-abstract"><Link to="#abstract"><span>{i18n.gettext('Abstract')}</span></Link></li>
-          <li className="HomePage-fashionable"><Link to="#fashionable"><span>{i18n.gettext('Fashionable')}</span></Link></li>
-          <li className="HomePage-scenic"><Link to="#scenic"><span>{i18n.gettext('Scenic')}</span></Link></li>
-          <li className="HomePage-sporty"><Link to="#sporty"><span>{i18n.gettext('Sporty')}</span></Link></li>
-          <li className="HomePage-mystical"><Link to="#mystical"><span>{i18n.gettext('Mystical')}</span></Link></li>
+        <ul className="HomePage-category-list">
+          <li className="HomePage-category-li HomePage-wild">
+            <Link to="#wild"><span>{i18n.gettext('Wild')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-abstract">
+            <Link to="#abstract"><span>{i18n.gettext('Abstract')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-fashionable">
+            <Link to="#fashionable"><span>{i18n.gettext('Fashionable')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-scenic">
+            <Link to="#scenic"><span>{i18n.gettext('Scenic')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-sporty">
+            <Link to="#sporty"><span>{i18n.gettext('Sporty')}</span></Link>
+          </li>
+          <li className="HomePage-category-li HomePage-mystical">
+            <Link to="#mystical"><span>{i18n.gettext('Mystical')}</span></Link>
+          </li>
         </ul>
         <Link className="HomePage-themes-link" to="/themes/">
           {i18n.gettext('Browse all themes')}
diff --git a/src/amo/css/Home.scss b/src/amo/css/Home.scss
index 3a2d2549e6a..6eeb8dce00a 100644
--- a/src/amo/css/Home.scss
+++ b/src/amo/css/Home.scss
@@ -8,51 +8,40 @@
   text-align: center;
 }
 
-.HomePage-cat-list {
+.HomePage-category-list {
   display: flex;
   flex-wrap: wrap;
   overflow: auto;
   padding: 0;
   width: 100%;
+}
 
-  li {
-    background-color: #fff;
-    background-size: 50% 50%;
-    border-radius: 6px;
-    display: block;
-    flex-grow: 1;
-    list-style-type: none;
-    margin: 5px;
-    overflow: auto;
-    padding: 0;
-    position: relative;
-    text-align: center;
-    width: 30%;
-
-    &::before {
-      content: '';
-      display: block;
-      padding-bottom: 100%;
-    }
-  }
+.HomePage-category-li {
+  background-color: $base-color;
+  background-size: 50% auto;
+  background-position: 50% 35%;
+  background-repeat: no-repeat;
+  border-radius: 6px;
+  display: block;
+  flex-grow: 1;
+  list-style-type: none;
+  margin: 5px;
+  overflow: auto;
+  padding: 0;
+  position: relative;
+  text-align: center;
+  width: 30%;
 
   a:link {
-    bottom: 0;
     font-size: 10px;
-    left: 0;
-    position: absolute;
-    right: 0;
     text-decoration: none;
-    top: 0;
+    padding-top: 70%;
+    display: block;
   }
 
   span {
-    bottom: 10px;
     display: block;
-    left: 0;
-    padding: 0 10px;
-    position: absolute;
-    right: 0;
+    padding: 5px 10px;
     text-align: center;
     text-decoration: inherit;
   }
@@ -66,7 +55,7 @@
 .HomePage-extensions-link:link,
 .HomePage-themes-link:link {
   align-items: center;
-  background: #fff;
+  background: $base-color;
   border-radius: 6px;
   display: flex;
   font-size: 10px;
@@ -103,49 +92,50 @@
 }
 
 .HomePage-block-ads {
-  background: url('../img/home/block-ads.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/block-ads.svg');
 }
 
 .HomePage-screenshot {
-  background: url('../img/home/screenshot.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/screenshot.svg');
 }
 
 .HomePage-save-stuff {
-  background: url('../img/home/save-stuff.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/save-stuff.svg');
+  background-size: 40% auto;
 }
 
 .HomePage-shop-online {
-  background: url('../img/home/shop-online.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/shop-online.svg');
 }
 
 .HomePage-be-social {
-  background: url('../img/home/be-social.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/be-social.svg');
 }
 
 .HomePage-share-stuff {
-  background: url('../img/home/share-stuff.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/share-stuff.svg');
 }
 
 .HomePage-wild {
-  background: url('../img/home/wild.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/wild.svg');
 }
 
 .HomePage-abstract {
-  background: url('../img/home/abstract.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/abstract.svg');
 }
 
 .HomePage-fashionable {
-  background: url('../img/home/fashion.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/fashion.svg');
 }
 
 .HomePage-scenic {
-  background: url('../img/home/scenic.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/scenic.svg');
 }
 
 .HomePage-sporty {
-  background: url('../img/home/sporty.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/sporty.svg');
 }
 
 .HomePage-mystical {
-  background: url('../img/home/mystical.svg') no-repeat 50% 35%;
+  background-image: url('../img/home/mystical.svg');
 }