diff --git a/opentech/public/funds/templates/public_funds/includes/project_listing.html b/opentech/public/funds/templates/public_funds/includes/project_listing.html
index 6dd0cff5459016b44a376b1a0bb392b523b5e816..7e09cbcd8d9d3ddeb8861e51cb867f3a1e6a8782 100644
--- a/opentech/public/funds/templates/public_funds/includes/project_listing.html
+++ b/opentech/public/funds/templates/public_funds/includes/project_listing.html
@@ -1,10 +1,18 @@
 {% load wagtailcore_tags wagtailimages_tags %}
 <a class="media-box" href="{% pageurl project %}">
-    <div class="media-box__images">
+    {% if project.icon %}
         {% image project.icon max-210x235 as project_icon %}
-        <img class="media-box__image media-box__image--large" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
-        <img class="media-box__image media-box__image--small" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
-    </div>
+        <div class="media-box__image-container" style="background-image:url('{{ project_icon.url }}')">
+            <img class="media-box__image media-box__image--small" src="{{ project_icon.url }}" alt="{{project_icon.alt}}">
+        </div>
+    {% else %}
+        <div class="media-box__image-container">
+            <div class="media-box__image media-box__image--small media-box__default-image media-box__default-image--small">
+                    <svg><use xlink:href="#logo-mobile-no-text"></use></svg>
+            </div>
+        </div>
+    {% endif %}
+
     <div class="media-box__content">
         <h4>{{ project.title }}</h4>
         {% if project.listing_summary or project.introduction %}
diff --git a/opentech/public/funds/templates/public_funds/lab_page.html b/opentech/public/funds/templates/public_funds/lab_page.html
index 8fe3a6e6108f431225ff1688b23ea5607f4f0843..04c51ec2c752c0c8d82066bab304e57a57fb3002 100644
--- a/opentech/public/funds/templates/public_funds/lab_page.html
+++ b/opentech/public/funds/templates/public_funds/lab_page.html
@@ -10,9 +10,8 @@
         <section class="section section--main section--top-bottom-space">
             <div class="media-box media-box--reverse media-box--bottom-space">
                 {% if page.icon %}
-                    <div class="media-box__images">
-                        {% image page.icon max-210x235 as page_icon %}
-                        <img class="media-box__image media-box__image--large" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
+                    {% image page.icon max-210x235 as page_icon %}
+                    <div class="media-box__image-container" style="background-image:url('{{ page_icon.url }}')">
                         <img class="media-box__image media-box__image--small" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
                     </div>
                 {% else %}
diff --git a/opentech/public/projects/templates/projects/project_page.html b/opentech/public/projects/templates/projects/project_page.html
index 825e761735af7bc79ed55bbff55ca38e0efc0b1d..f38950fe3b946a558af34c1f4d0f1223be946804 100644
--- a/opentech/public/projects/templates/projects/project_page.html
+++ b/opentech/public/projects/templates/projects/project_page.html
@@ -5,9 +5,8 @@
 <div class="wrapper wrapper--small wrapper--top-inner-space">
     <div class="media-box media-box--reverse">
         {% if page.icon %}
-            <div class="media-box__images">
-                {% image page.icon max-210x235 as page_icon %}
-                <img class="media-box__image media-box__image--large" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
+            {% image page.icon max-210x235 as page_icon %}
+            <div class="media-box__image-container" style="background-image:url('{{ page_icon.url }}')">
                 <img class="media-box__image media-box__image--small" src="{{ page_icon.url }}" alt="{{ page_icon.alt }}">
             </div>
         {% else %}
diff --git a/opentech/static_src/src/sass/components/_media-box.scss b/opentech/static_src/src/sass/components/_media-box.scss
index 96fcf2c576213dc2f829ebc03665a2fed1b9206b..564fa80933533e881d315aa89b1e686afa0d9960 100644
--- a/opentech/static_src/src/sass/components/_media-box.scss
+++ b/opentech/static_src/src/sass/components/_media-box.scss
@@ -24,8 +24,20 @@
         }
     }
 
-    &__images {
+    &__image-container {
         position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 170px;
+        background-repeat: no-repeat;
+        background-size: cover;
+
+        @include media-query(mob-landscape) {
+            width: 210px;
+            height: 210px;
+        }
 
         &::before {
             position: absolute;
@@ -53,12 +65,9 @@
         }
 
         &--small {
-            position: absolute;
-            top: 50%;
-            left: 50%;
+            z-index: 10;
             max-width: 105px;
             border: 0 solid;
-            transform: translate(-50%, -50%);
             box-sizing: content-box;
             transition: border $transition;
 
@@ -151,5 +160,25 @@
             height: 70px;
             fill: $color--white;
         }
+
+        &--small {
+            width: 105px;
+            height: 105px;
+            background-color: $color--white;
+            border: 0 solid;
+            box-sizing: content-box;
+            transition: border $transition;
+
+            #{$root}:hover & {
+                border: 10px solid $color--light-blue;
+                transition: border $transition;
+            }
+
+            > svg {
+                width: 50px;
+                height: 50px;
+                fill: $color--light-blue;
+            }
+        }
     }
 }