diff --git a/templates/public/index.html b/templates/public/index.html
index 93347fde3..b5cfe1227 100644
--- a/templates/public/index.html
+++ b/templates/public/index.html
@@ -4,8 +4,8 @@
     <!-- latest poll if we have it -->
     {% if latest_poll and latest_poll.get_first_question %}
         <div class="max-w-page mx-auto bg-white mt-6">
-            <div class="md:flex {% if is_rtl_org %}md:-mr-12 vertical-angle-right-side  md:pr-12{% else %}vertical-angle-left-side md:pl-12 md:-ml-12{% endif %} {% if latest_poll.get_first_question.get_color_choice_css %} {{ latest_poll.get_first_question.get_color_choice_css }} {% else %}bg-dark1 text-white{% endif %}">
-                <div class="{% if latest_poll.get_first_question.get_color_choice_css %} {{ latest_poll.get_first_question.get_color_choice_css }} {% else %}bg-dark1 text-white{% endif %} flex-1 self-stretch p-home self-center">
+            <div class="md:flex {% if is_rtl_org %}md:-mr-12 vertical-angle-right-side  md:pr-12{% else %}vertical-angle-left-side md:pl-12 md:-ml-12{% endif %} {% if latest_poll.get_first_question.get_color_choice_css %} {{ latest_poll.get_first_question.get_color_choice_css }} {% else %}bg-dark1-home text-white{% endif %}">
+                <div class="{% if latest_poll.get_first_question.get_color_choice_css %} {{ latest_poll.get_first_question.get_color_choice_css }} {% else %}bg-dark1-home text-white{% endif %} flex-1 self-stretch p-home self-center">
                     <div class="text-l mb-10">{% trans "LATEST OPINION" %}</div>
                     <div class="{% if latest_poll.title|length < 50 %}text-4xl{% elif latest_poll.title|length < 120 %}text-3xl leading-tight{% else %}text-2xl leading-tight{% endif %} font-bold mt-2 hover-parent">
                         {% edit_content 'polls.poll_update' latest_poll.pk "#id_title"  "-m-8" "dark" %}
@@ -29,20 +29,20 @@
                     <div style="min-height:20rem;" class="relative w-full">
                         <div data-question="{{ latest_poll.get_first_question.id }}"
                              data-segment="all"
-                             data-bar-color="{% if latest_poll.get_first_question.get_bg_color_choice %} {{ latest_poll.get_first_question.get_bg_color_choice }} {% else %}{{ org|config:'dark1_color'|default:'#439932' }}{% endif %}"
+                             data-bar-color="{% if org|config:"has_new_brand" %}#00aeef{% else %}{% if latest_poll.get_first_question.get_bg_color_choice %} {{ latest_poll.get_first_question.get_bg_color_choice }} {% else %}{{ org|config:'dark1_color'|default:'#439932' }}{% endif %}{% endif %}"
                              class="w-full h-full absolute poll-chart block"
                              id="chart-{{ latest_poll.get_first_question.id }}"></div>
                     </div>
                     <div class="md:mb-0 mb-6 text-center">
                         <a href="{% url 'public.opinion_read' latest_poll.pk %}"
-                           class="btn bg-light1 text-black hover-dark">{% trans "VIEW FULL RESULTS" %}</a>
+                           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>
                     </div>
                 </div>
             </div>
         </div>
     {% endif %}
     <!-- ureporters graph -->
-    <div class="bg-black text-light1 bg-white-u">
+    <div class="bg-black text-light1-home bg-white-u">
         <div class="md:flex max-w-page mx-auto p-home">
             <div class="md:w-1/2 md:mt-0 md:p-0 flex-center-y mt-4 p-8">
                 <div class="font-bold text-l">
@@ -73,7 +73,7 @@
                             {{ age_stats|json_script:"age_stats" }}
                             <div data-aos="fade"
                                  data-graph-type="age-chart"
-                                 data-bar-color="{{ org|config:'light1_color'|default:'#FFD100' }}"
+                                 data-bar-color="{% if org|config:"has_new_brand" %}#00aeef{% else %}{{ org|config:'light1_color'|default:'#FFD100' }}{% endif %}"
                                  data-label-color="#AAA"
                                  data-label-position="top"
                                  data-stats="age_stats"
diff --git a/templates/public_base.html b/templates/public_base.html
index 0addf6488..1a861f157 100644
--- a/templates/public_base.html
+++ b/templates/public_base.html
@@ -47,7 +47,7 @@
             <link rel="stylesheet" href="{{ STATIC_URL }}css/tailwind.css">
         {% endcompress %}
         <style type="text/css">
-      .bg-dark1 {
+      .bg-dark1, .bg-dark1-home {
         background: {{ org|config:'dark1_color'|default:'#439932'  }};
       }
       
@@ -59,7 +59,7 @@
         border-color: {{ org|config:'dark1_color'|default:'#439932' }};
       }
       
-      .bg-dark2 {
+      .bg-dark2, .bg-dark2-home {
         background: {{ org|config:'dark2_color'|default:'#1751af' }};
       }
       
@@ -71,7 +71,7 @@
         border-color: {{ org|config:'dark2_color'|default:'#1751af' }};
       }
       
-      .bg-dark3 {
+      .bg-dark3, .bg-dark3-home {
         background: {{ org|config:'dark3_color'|default:'#5eb3e0' }};
       }
       
@@ -87,7 +87,7 @@
         border-color: {{ org|config:'light1_color'|default:'#FFD100' }};
       }
       
-      .bg-light1 {
+      .bg-light1, .bg-light1-home {
         background: {{ org|config:'light1_color'|default:'#FFD100' }};
       }
       
@@ -95,11 +95,11 @@
         background: #ffda33;
       }
       
-      .text-light1 {
+      .text-light1, .text-light1-home {
         color: {{ org|config:'light1_color'|default:'#FFD100' }};
       }
       
-      .bg-light2 {
+      .bg-light2, .bg-light2-home {
         background: {{ org|config:'light2_color'|default:'#5eb3e0' }};
       }
       
@@ -149,6 +149,33 @@
       .slideout-open .slideout-menu {
         display: block;
       }
+      {% if org|config:"has_new_brand" %}
+      .bg-dark1-home {
+        background: #00aeef;
+      }
+
+      .bg-dark2-home {
+        background: #00aeef;
+      }
+
+      .bg-dark3-home {
+        background: #00aeef;
+      }
+
+      .bg-light1-home {
+        background: #00aeef;
+      }
+
+      .bg-light2-home {
+        background: #00aeef;
+      }
+
+      .text-light1-home {
+        color: #00aeef;
+      }
+
+      {% endif %}
+
         </style>
         <script type="text/javascript">
       var defaultColors = ["#e4002b", "#ff8200", "#ffd100", "#009a17", "#41b6e6", "#0050b5", "#d9d9d6"];
@@ -691,16 +718,16 @@
             <div class="flex-1">
                 <div class="p-8 hover-parent">
                     {% edit_content 'orgs.org_edit' "" "#id_common.join_text_top"  "-m-8"  "dark" %}
-                    <div class="text-3xl font-bold leading-tight text-center">
+                    <div class="text-3xl font-bold leading-tight {% if not org|config:"has_new_brand" %}text-center{% endif %}">
                         {% if org|config:"join_text_top" %}
                             {{ org|config:"join_text_top" }}
                         {% else %}
                             {% trans "Join U-Report, Your voice matters." %}
                         {% endif %}
                     </div>
-                    <div class="mt-8 text-center">
+                    <div class="mt-8 {% if not org|config:"has_new_brand" %}text-center{% endif %}">
                         <a href="{% url 'public.join' %}"
-                           class="btn bg-light1 text-black hover-dark">
+                           class="btn bg-light1-home hover-dark {% if org|config:"has_new_brand" %}text-white{% else %}text-black{% endif %}">
                             {% if org|config:"join_button_text" %}
                                 {{ org|config:"join_button_text" }}
                             {% else %}