diff --git a/static/img/U-Report_Logo_invert.png b/static/img/U-Report_Logo_invert.png
new file mode 100644
index 000000000..d00b43083
Binary files /dev/null and b/static/img/U-Report_Logo_invert.png differ
diff --git a/templates/public/index.html b/templates/public/index.html
index b5cfe1227..53a07d300 100644
--- a/templates/public/index.html
+++ b/templates/public/index.html
@@ -35,7 +35,7 @@
                     </div>
                     <div class="md:mb-0 mb-6 text-center">
                         <a href="{% url 'public.opinion_read' latest_poll.pk %}"
-                           class="btn hover-dark {% if org|config:"has_new_brand" %}bg-black text-white{% else %}bg-light1-home text-black{% endif %}">{% trans "VIEW FULL RESULTS" %}</a>
+                           class="btn hover-dark {% if org|config:"has_new_brand" %}hover:bg-gray-700 bg-black text-white{% else %}bg-light1-home text-black{% endif %}">{% trans "VIEW FULL RESULTS" %}</a>
                     </div>
                 </div>
             </div>
@@ -147,7 +147,7 @@
     <div class="max-w-page mx-auto">
         <div class="md:flex">
             <div class="flex-1">
-                <div class="bg-light1 p-12 hover-parent">
+                <div class="bg-light1-home p-12 hover-parent">
                     {% edit_content 'orgs.org_edit' "" "#id_common.join_text"  "-m-8"  "dark" %}
                     <div class="text-3xl font-bold leading-tight text-center">
                         {% if org|config:"join_text" %}
@@ -182,7 +182,11 @@
                         <div style="min-height:349px" class="flex justify-content">
                             <div class="inline-block mx-auto my-auto text-center">
                                 <div class="w-64">
+                                    {% if org|config:"has_new_brand" %}
+                                        <img src="{{ STATIC_URL }}/img/U-Report_Logo_invert.png" alt="{{ org.name }}" class="logo">
+                                    {% else %}
                                     <img src="{{ STATIC_URL }}img/u-report-global-logo-white.png">
+                                    {% endif %}
                                 </div>
                             </div>
                         </div>
@@ -344,7 +348,7 @@
                         {% trans "Learn more about how U-Report is empowering and connecting young people to speak out on issues that matter to them." %}
                     </div>
                     <a href="{% url 'public.about' %}"
-                       class="btn bg-light1 text-black hover-dark">{% trans "LEARN MORE" %}</a>
+                       class="btn bg-light1-home text-black hover-dark">{% trans "LEARN MORE" %}</a>
                 </div>
             </div>
         </div>
diff --git a/templates/public/ureporters.html b/templates/public/ureporters.html
index 8a4dbeecc..17430f720 100644
--- a/templates/public/ureporters.html
+++ b/templates/public/ureporters.html
@@ -149,7 +149,7 @@
                                  class="md:flex engagement-graph-block hover-parent block mt-16 p-2 bg-dark-blue"
                                  id="graph-block-{{ metric.slug }}-{{ time_filter.time_filter_number }}">
                                 <div class="md:w-2/5 hover-parent">
-                                    <div class="bg-light1 h-1 w-16 mb-4"></div>
+                                    <div class="bg-light1-home h-1 w-16 mb-4"></div>
                                     <div class="text-3xl mb-4 font-bold">{{ metric.title }}</div>
                                     <div data-page="engagement"
                                          class="text-xs flex mb-6 text-black random-pill">
diff --git a/templates/public_base.html b/templates/public_base.html
index 11a120d0f..01913bb98 100644
--- a/templates/public_base.html
+++ b/templates/public_base.html
@@ -150,24 +150,12 @@
         display: block;
       }
       {% if org|config:"has_new_brand" %}
-      .bg-dark1-home {
+      .bg-dark1-home, .bg-dark2-home,  .bg-dark3-home, .bg-light1-home, .bg-light2-home {
         background: #00aeef;
       }
 
-      .bg-dark2-home {
-        background: #00aeef;
-      }
-
-      .bg-dark3-home {
-        background: #00aeef;
-      }
-
-      .bg-light1-home {
-        background: #00aeef;
-      }
-
-      .bg-light2-home {
-        background: #00aeef;
+      .bg-dark1-home.hover-dark:hover, .bg-dark2-home.hover-dark:hover,  .bg-dark3-home.hover-dark:hover, .bg-light1-home.hover-dark:hover, .bg-light2-home.hover-dark:hover {
+        background: #42ccff;
       }
 
       .text-light1-home {
@@ -271,7 +259,7 @@
             </div>
             <div class="md:w-1/4 rtl:float-left rtl:text-left ltr:float-right ltr:text-right   inline-block mb-4">
                 <a href="#"
-                   class="btn bg-light1 text-black inline-block download-screenshot hover-dark">Download</a>
+                   class="btn bg-light1-home text-black inline-block download-screenshot hover-dark">Download</a>
             </div>
             <div class="mt-4 shadow">
                 <img src="#" alt="" class="screenshot-rendered">
@@ -784,7 +772,7 @@
                         {% endif %}
                     </div>
                     <a href="{% url 'public.ureporters' %}"
-                       class="btn bg-light2 text-white inline-block hover-dark">{% trans "EXPLORE ENGAGEMENT" %}</a>
+                       class="btn bg-light2-home text-white inline-block hover-dark">{% trans "EXPLORE ENGAGEMENT" %}</a>
                 </div>
             </div>
         </div>