diff --git a/lib/ProductOpener/Display.pm b/lib/ProductOpener/Display.pm
index 6277c1f103ba6..71fb0baae9514 100644
--- a/lib/ProductOpener/Display.pm
+++ b/lib/ProductOpener/Display.pm
@@ -6938,36 +6938,9 @@ sub display_page ($request_ref) {
 	$template_data_ref->{link} = $link;
 	$template_data_ref->{lc} = $lc;
 
-	if (
-		not($server_options{producers_platform})
-		and (  (not(defined cookie('hide_image_banner_2022')))
-			or (not(cookie('hide_image_banner_2022') eq '1')))
-		)
-	{
-		$template_data_ref->{banner} = $banner;
-
-		$initjs .= <<'JS';
-if ($.cookie('hide_image_banner_2022') == '1') {
-	$('.hide_image_banner').prop('checked', true);
-	$('#donate_banner_top').remove();
-}
-else {
-	$('.hide_image_banner').prop('checked', false);
-	$('#donate_banner_top').show();
-	$('.hide_image_banner').change(function () {
-		if (($('#hide_image_banner1').prop('checked')) || ($('#hide_image_banner2').prop('checked'))) {
-			$.cookie('hide_image_banner_2022', '1', { expires: 90, path: '/' });
-			$('#donate_banner_top').remove();
-		}
-	});
-}
-JS
-	}
-
 	my $tagline = lang("tagline");
 
 	if ($server_options{producers_platform}) {
-
 		$tagline = "";
 	}
 
diff --git a/scss/_off.scss b/scss/_off.scss
index 5cd5bb55689a4..deb178dcea83c 100644
--- a/scss/_off.scss
+++ b/scss/_off.scss
@@ -3,31 +3,38 @@
 // From https://google-webfonts-helper.herokuapp.com/fonts/public-sans?subsets=latin,latin-ext,vietnamese :
 /* public-sans-regular - vietnamese_latin-ext_latin */
 @font-face {
-  font-family: 'Public Sans';
+  font-family: "Public Sans";
   font-style: normal;
   font-weight: 400;
-  src: url('/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
-  src: local(''),
-       url('/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.svg#PublicSans') format('svg'); /* Legacy iOS */
+  src: url("/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.eot"); /* IE9 Compat Modes */
+  src: local(""),
+    url("/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.eot?#iefix")
+      format("embedded-opentype"),
+    /* IE6-IE8 */
+      url("/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.woff2")
+      format("woff2"),
+    /* Super Modern Browsers */
+      url("/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.woff")
+      format("woff"),
+    /* Modern Browsers */
+      url("/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.ttf")
+      format("truetype"),
+    /* Safari, Android, iOS */
+      url("/fonts/public-sans-v14-vietnamese_latin-ext_latin-regular.svg#PublicSans")
+      format("svg"); /* Legacy iOS */
 }
 
 // Font for Material Icons
 // variable to prevent sonar-cloud to complain that there isn't a generic family for the icon font
-$material-icons: 'Material Icons';
+$material-icons: "Material Icons";
 @font-face {
-  font-family: 'Material Icons';
+  font-family: "Material Icons";
   font-style: normal;
   font-weight: 400;
-  src: local(''),
-    url('/fonts/material-icons-v139.woff2') format('woff2'),
-    url('/fonts/material-icons-v139.ttf') format('truetype');
+  src: local(""), url("/fonts/material-icons-v139.woff2") format("woff2"),
+    url("/fonts/material-icons-v139.ttf") format("truetype");
 }
 
-
 .material-icons {
   font-family: $material-icons;
   font-weight: normal;
@@ -40,7 +47,7 @@ $material-icons: 'Material Icons';
   white-space: nowrap;
   word-wrap: normal;
   direction: ltr;
-  -webkit-font-feature-settings: 'liga';
+  -webkit-font-feature-settings: "liga";
   -webkit-font-smoothing: antialiased;
 }
 
@@ -48,42 +55,41 @@ $material-icons: 'Material Icons';
 // combine classes block_light or block_dark with a color like block_ristreto
 
 .block_off a {
-    text-decoration:underline;
+  text-decoration: underline;
 }
 
 .block_dark {
-    color: $white;
+  color: $white;
 }
 
 .block_light {
-    color: $black;
+  color: $black;
 }
 
 .block_dark.block_off a {
-    color:$white;
+  color: $white;
 }
 
 .block_ristreto {
-    background-color: $ristreto; 
+  background-color: $ristreto;
 }
 
 .block_latte {
-    background-color: $latte;
+  background-color: $latte;
 }
 
 .block_cappucino {
-    background-color: $cappucino;
+  background-color: $cappucino;
 }
 
 .block_light_yellow {
-    background-color: #E3F6FF;
+  background-color: #e3f6ff;
 }
 
 .block_main {
-    background-color: #FFF2DF;
+  background-color: #fff2df;
 }
 
-
 // background colors for attributes and panels
 $grade-a-color: #219653;
 $grade-b-color: #60ac0e;
@@ -97,550 +103,549 @@ $evaluation-bad-color: #eb5757;
 $evaluation-unknown-color: #4f4f4f;
 //** add options to found5 //
 .row.full-width {
-    width: 100%;
-    max-width: 100%;
+  width: 100%;
+  max-width: 100%;
 }
 
 .full-width {
-    width: 100%;
-    max-width: 100%;
+  width: 100%;
+  max-width: 100%;
 }
 
 //
 hr.floatclear {
-    background: none;
-    border: 0;
-    clear: both;
-    display: block;
-    float: none;
-    font-size: 0;
-    height: 0;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    visibility: hidden;
-    width: 0;
+  background: none;
+  border: 0;
+  clear: both;
+  display: block;
+  float: none;
+  font-size: 0;
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
 }
 
 hr.floatleft {
-    background: none;
-    border: 0;
-    clear: left;
-    display: block;
-    float: none;
-    font-size: 0;
-    height: 0;
-    margin: 0;
-    overflow: hidden;
-    padding: 0;
-    visibility: hidden;
-    width: 0;
+  background: none;
+  border: 0;
+  clear: left;
+  display: block;
+  float: none;
+  font-size: 0;
+  height: 0;
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  visibility: hidden;
+  width: 0;
 }
 
 hr.floatright {
-    background: none;
-    border: 0;
-    clear: right;
-    display: block;
-    float: none;
-    font-size: 0;
-    height: 0;
-    margin: 0;
-    padding: 0;
-    overflow: hidden;
-    visibility: hidden;
-    width: 0;
+  background: none;
+  border: 0;
+  clear: right;
+  display: block;
+  float: none;
+  font-size: 0;
+  height: 0;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0;
 }
 
 .data_table label,
 .data_table input {
-    display: inline;
+  display: inline;
 }
 
 .data_table input,
 .data_table select {
-    font-size: 1em;
+  font-size: 1em;
 }
 
 .nutriment_label {
-    text-align: left;
-    width: 300px;
+  text-align: left;
+  width: 300px;
 }
 
 .nutriment_value {
-    text-align: right;
+  text-align: right;
 }
 
 .nutriment_subx {
-    font-size: 0.9em;
+  font-size: 0.9em;
 }
 
 .data_table .nutriment_sub .nutriment_label {
-    padding-left: 20px;
+  padding-left: 20px;
 }
 
 .data_table .nutriment_sub_sub .nutriment_label {
-    padding-left: 40px;
+  padding-left: 40px;
 }
 
 input.nutriment_value {
-    height: 2.3125rem;
-    width: 5rem;
+  height: 2.3125rem;
+  width: 5rem;
 }
 
 select.nutriment_unit {
-    margin-bottom: 0;
-    width: 5rem;
+  margin-bottom: 0;
+  width: 5rem;
 }
 
 thead,
 tbody {
-    margin: 0;
-    padding: 0;
+  margin: 0;
+  padding: 0;
 }
 
 .data_table {
-    border-collapse: collapse;
-    margin-top: 20px;
-    padding: 0;
-    vertical-align: middle;
+  border-collapse: collapse;
+  margin-top: 20px;
+  padding: 0;
+  vertical-align: middle;
 }
 
 .data_table td,
 .data_table th {
-    margin: 0;
-    padding: 0.2rem;
-    padding-left: 0.5rem;
+  margin: 0;
+  padding: 0.2rem;
+  padding-left: 0.5rem;
 }
 
 .data_table .nutriment_head {
-    background-color: #88f;
-    color: #fff;
+  background-color: #88f;
+  color: #fff;
 }
 
 .data_table .nutriment_main {
-    background-color: #ddf;
-    border-top: 3px solid #fff;
+  background-color: #ddf;
+  border-top: 3px solid #fff;
 }
 
 .data_table .nutriment_sub,
 .data_table .nutriment_sub td {
-    background-color: #eef;
-    border-top: 1px solid #ddf;
+  background-color: #eef;
+  border-top: 1px solid #ddf;
 }
 
 .ui-autocomplete li {
-    font-size: 1em;
+  font-size: 1em;
 }
 
 #nutriment_carbon-footprint_tr {
-    background-color: #dfd;
+  background-color: #dfd;
 }
 
 ul.products {
-    list-style: none;
-    margin: 0;
-    padding: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
 .products li {
-    display: block;
-    float: left;
-    text-align: center;
+  display: block;
+  float: left;
+  text-align: center;
 }
 
 .products a {
-    display: block;
-    height: 167px;
-    margin: 10px;
-    overflow: hidden;
-    padding: 10px;
-    width: 120px;
-    word-wrap: break-word;
+  display: block;
+  height: 167px;
+  margin: 10px;
+  overflow: hidden;
+  padding: 10px;
+  width: 120px;
+  word-wrap: break-word;
 }
 
 .products div {
-    display: table-cell;
-    height: 100px;
-    line-height: 100px;
-    margin: 0;
-    padding: 0;
-    text-align: center;
-    vertical-align: middle;
-    width: 120px;
+  display: table-cell;
+  height: 100px;
+  line-height: 100px;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+  vertical-align: middle;
+  width: 120px;
 }
 
 .products a:hover {
-    background: #f4f4f4;
+  background: #f4f4f4;
 }
 
 .products img {
-    vertical-align: middle;
+  vertical-align: middle;
 }
 
 #pages {
-    margin-top: 1.5rem;
+  margin-top: 1.5rem;
 }
 
 a {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 strong {
-    font-weight: 700 !important
+  font-weight: 700 !important;
 }
 
 a:hover {
-    text-decoration: underline;
+  text-decoration: underline;
 }
 
 // disable rule below, it interferes with the white-button class
 a.disabled_rule_button {
-    color: #fff;
-    &.white {
-      color:$primary-color;
-    }
+  color: #fff;
+  &.white {
+    color: $primary-color;
+  }
 }
 
 a.button:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .level_3,
 a.level_3,
 a:visited.level_3,
 a:hover.level_3 {
-    color: red;
+  color: red;
 }
 
 .level_2,
 a.level_2,
 a:visited.level_2,
 a:hover.level_2 {
-    color: #ff8c00;
+  color: #ff8c00;
 }
 
 .level_1,
 a.level_1,
 a:visited.level_1,
 a:hover.level_1 {
-    color: green;
+  color: green;
 }
 
 #select_country_li .select2-container--default .select2-selection--single {
-    border-radius: 0;
-    font-size: 0.875rem;
-    height: 1.75rem;
-    position: relative;
-    top: 0.53125rem;
-    width: 10rem;
+  border-radius: 0;
+  font-size: 0.875rem;
+  height: 1.75rem;
+  position: relative;
+  top: 0.53125rem;
+  width: 10rem;
 }
 
-nav.tab-bar>div {
-    padding-top: 4px;
+nav.tab-bar > div {
+  padding-top: 4px;
 }
 
 .left-small {
-    border-right: 0;
+  border-right: 0;
 }
 
 .right-small {
-    border-left: 0;
+  border-left: 0;
 }
 
 .tab-bar-section.middle {
-    right: 0;
+  right: 0;
 }
 
-
 @media only screen and (max-width: 64em) {
-    a.button.icon {
-        font-size: 1rem;
-        height: 2rem;
-        padding: 0.5rem;
-        width: 2rem;
-    }
+  a.button.icon {
+    font-size: 1rem;
+    height: 2rem;
+    padding: 0.5rem;
+    width: 2rem;
+  }
 }
 
 .products {
-    line-height: 1.2;
+  line-height: 1.2;
 }
 
 .dark {
-    color: #f0f0f0;
+  color: #f0f0f0;
 }
 
 .dark h4 {
-    color: #fff;
+  color: #fff;
 }
 
 .dark a,
 .dark a:hover,
 .dark a:visited {
-    color: #fff;
+  color: #fff;
 }
 
 .example {
-    color: green;
-    font-size: 0.8em;
+  color: green;
+  font-size: 0.8em;
 }
 
 .note {
-    font-size: 0.8em;
+  font-size: 0.8em;
 }
 
 .example,
 .note {
-    margin: 4px 0 0 4px;
+  margin: 4px 0 0 4px;
 }
 
 .tag.user_defined {
-    font-style: italic;
+  font-style: italic;
 }
 
 .button-group ul {
-    height: 400px;
-    overflow: auto;
+  height: 400px;
+  overflow: auto;
 }
 
-.top-bar-section ul li>a {
-    text-decoration: none;
+.top-bar-section ul li > a {
+  text-decoration: none;
 }
 
 p.details {
-    color: gray;
-    font-size: 0.8em;
+  color: gray;
+  font-size: 0.8em;
 }
 
 .select2-dropdown.select2-dropdown--below {
-    margin-top: 10px;
+  margin-top: 10px;
 }
 
 @media only screen and (max-width: 40em) {
-    h2 {
-        font-weight: bold;
-        font-size: 1.2em;
-    }
+  h2 {
+    font-weight: bold;
+    font-size: 1.2em;
+  }
 }
 
 details.recent {
-    margin-left: 1.5em;
-    cursor: pointer;
+  margin-left: 1.5em;
+  cursor: pointer;
 }
 
 .top-bar .button,
 .top-bar button {
-    padding-top: 0.2rem;
-    padding-bottom: 0.2rem;
+  padding-top: 0.2rem;
+  padding-bottom: 0.2rem;
 }
 
 .button.small,
 button.small,
 button.tiny,
 .button.tiny {
-    padding: 0.5rem;
-    padding-left: 0.75rem;
-    padding-right: 0.75rem;
+  padding: 0.5rem;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
 }
 
 .postfix.button.small,
 button.postfix.small {
-    padding: 0;
+  padding: 0;
 }
 
 .icon {
-    display: inline-block;
-    fill: currentColor;
-    margin-left: 0.25em;
-    margin-right: 0.25em;
-    overflow: hidden;
-    vertical-align: middle;
-    font-size: 18px;
-    width: 1em;
-    height: 1em;
+  display: inline-block;
+  fill: currentColor;
+  margin-left: 0.25em;
+  margin-right: 0.25em;
+  overflow: hidden;
+  vertical-align: middle;
+  font-size: 18px;
+  width: 1em;
+  height: 1em;
 }
 
 // Style material symbols like the SVG icons
 .material-symbols-button {
-    vertical-align:middle;
-    font-size:18px;
+  vertical-align: middle;
+  font-size: 18px;
 }
 
-h3>.icon {
-    font-size: 24px;
+h3 > .icon {
+  font-size: 24px;
 }
 
-h4>.icon {
-    font-size: 24px;
+h4 > .icon {
+  font-size: 24px;
 }
 
 .ingredients_analysis {
-    font-size: 1rem;
-    padding-left: 0.2rem;
-    padding-right: 1rem;
-    .icon {
-        width: 32px;
-        height: 32px;
-        vertical-align: middle;
-    }
-    &.red {
-        background-color: $evaluation-bad-color;
-    }
-    &.orange {
-        background-color: $evaluation-average-color;
-    }
-    &.green {
-        background-color: $evaluation-good-color;
-    }
-    &.grey {
-        background-color: $evaluation-unknown-color;
-    }
+  font-size: 1rem;
+  padding-left: 0.2rem;
+  padding-right: 1rem;
+  .icon {
+    width: 32px;
+    height: 32px;
+    vertical-align: middle;
+  }
+  &.red {
+    background-color: $evaluation-bad-color;
+  }
+  &.orange {
+    background-color: $evaluation-average-color;
+  }
+  &.green {
+    background-color: $evaluation-good-color;
+  }
+  &.grey {
+    background-color: $evaluation-unknown-color;
+  }
 }
 
 .red {
-    color: $evaluation-bad-color;
+  color: $evaluation-bad-color;
 }
 
 .orange {
-    color: $evaluation-average-color;
+  color: $evaluation-average-color;
 }
 
 .green {
-    color: $evaluation-good-color;
+  color: $evaluation-good-color;
 }
 
 .grey {
-    color: $evaluation-unknown-color;
+  color: $evaluation-unknown-color;
 }
 
 .percent_bar {
-    background-color: #88bbff;
+  background-color: #88bbff;
 }
 
 .percent_bar.red {
-    background-color: $evaluation-bad-color;
+  background-color: $evaluation-bad-color;
 }
 
 .percent_bar.orange {
-    background-color: $evaluation-average-color;
+  background-color: $evaluation-average-color;
 }
 
 .percent_bar.green {
-    background-color: $evaluation-good-color;
+  background-color: $evaluation-good-color;
 }
 
 a[aria-controls="idOfLeftMenu"] {
-    &.anonymous {
-        color: white;
-    }
-    &.loggedin {
-        color: #ffe681;
-    }
-    .icon {
-        font-size: 1.8rem;
-    }
+  &.anonymous {
+    color: white;
+  }
+  &.loggedin {
+    color: #ffe681;
+  }
+  .icon {
+    font-size: 1.8rem;
+  }
 }
 
 ul.pagination li a {
-  color: black
+  color: black;
 }
 
 .share_button,
 .edit_button {
-    //float: right;
+  //float: right;
 }
 
 .delete_button {
-    float: right;
-    margin-right: 10px;
+  float: right;
+  margin-right: 10px;
 }
 .buttons_prod {
-  display:flex;
+  display: flex;
 }
 .country_language_selection {
-    float: left;
+  float: left;
 }
 
 .search_and_links {
-    float: right;
+  float: right;
 }
 
 .rev_summary {
-    .rev_previous {
-        margin-right: 2em;
-    }
-    .rev_next {
-        margin-left: 2em;
-    }
+  .rev_previous {
+    margin-right: 2em;
+  }
+  .rev_next {
+    margin-left: 2em;
+  }
 }
 
 html[dir="rtl"] {
-    .tab-bar-section.middle {
-        left: 0;
-        right: $tabbar-icon-width;
-    }
-    .share_button,
-    .edit_button {
-        float: left;
-    }
-    .delete_button {
-        float: left;
-        margin-right: unset;
-        margin-left: 10px;
-    }
-    .country_language_selection {
-        float: right;
-    }
-    .search_and_links {
-        float: left;
+  .tab-bar-section.middle {
+    left: 0;
+    right: $tabbar-icon-width;
+  }
+  .share_button,
+  .edit_button {
+    float: left;
+  }
+  .delete_button {
+    float: left;
+    margin-right: unset;
+    margin-left: 10px;
+  }
+  .country_language_selection {
+    float: right;
+  }
+  .search_and_links {
+    float: left;
+  }
+  .rev_summary {
+    .rev_previous {
+      margin-left: 2em;
     }
-    .rev_summary {
-        .rev_previous {
-            margin-left: 2em;
-        }
-        .rev_next {
-            margin-right: 2em;
-        }
+    .rev_next {
+      margin-right: 2em;
     }
+  }
 }
 
 .match_icons {
-    height: 48px;
-    margin-right: 4px;
+  height: 48px;
+  margin-right: 4px;
 }
 
 .additives_efsa_evaluation_overexposure_risk_high {
-    color: red
+  color: red;
 }
 
 .additives_efsa_evaluation_overexposure_risk_moderate {
-    color: #ff6600
+  color: #ff6600;
 }
 
 #prodBanner {
-  padding:5px;
-  display:block;
-  color:white;
-  font-size:1rem;
-  text-align:center;
+  padding: 5px;
+  display: block;
+  color: white;
+  font-size: 1rem;
+  text-align: center;
 }
 
 .list_product_banner {
-  border-top-left-radius:8px;
-  border-top-right-radius:8px;
-  padding:2px;
-  display:block;
-  color:white;
-  font-size:0.8rem;
-  text-align:center;
+  border-top-left-radius: 8px;
+  border-top-right-radius: 8px;
+  padding: 2px;
+  display: block;
+  color: white;
+  font-size: 0.8rem;
+  text-align: center;
 }
 
 .list_product_banner_does_not_match {
-  background-color:$grade-e-color;
+  background-color: $grade-e-color;
 }
 
 .list_product_banner_may_not_match {
-  background-color:$grade-d-color;
+  background-color: $grade-d-color;
 }
 
 .list_product_banner_unknown_match {
@@ -660,28 +665,27 @@ html[dir="rtl"] {
 }
 
 .list_product_content {
-  border-radius:8px;
-  padding:10px;
-  display:block;
+  border-radius: 8px;
+  padding: 10px;
+  display: block;
 }
 
-
 #product_banner {
-  color:black;
+  color: black;
 }
 
 .product_banner_unranked {
-  background-color:#DFF4FF;
+  background-color: #dff4ff;
 }
 
 .product_banner_does_not_match {
-  color:$grade-e-color;
-  background-color:scale-color($grade-e-color, $lightness: 50%);
+  color: $grade-e-color;
+  background-color: scale-color($grade-e-color, $lightness: 50%);
 }
 
 .product_banner_may_not_match {
-  color:$grade-d-color;
-  background-color:scale-color($grade-d-color, $lightness: 50%);
+  color: $grade-d-color;
+  background-color: scale-color($grade-d-color, $lightness: 50%);
 }
 
 .product_banner_unknown_match {
@@ -704,44 +708,43 @@ html[dir="rtl"] {
   background-color: scale-color($grade-a-color, $lightness: 50%);
 }
 
-
 #match_title {
-  float:left;
+  float: left;
 }
 
 #match_score_and_status {
-  float:right;
+  float: right;
 }
 
 #product_summary {
-  clear:both;
+  clear: both;
 }
 
 .match_status {
-  text-align:center;
-  display:inline-block;
-  font-size:16px;
-  border-radius:200px;
+  text-align: center;
+  display: inline-block;
+  font-size: 16px;
+  border-radius: 200px;
 }
 
 .match_score {
-  color:white;
-  font-weight:bold;
-  padding:12px 0px;
-  width:50px;
-  height:50px;
-  border-radius:200px;
-  display:inline-block;
+  color: white;
+  font-weight: bold;
+  padding: 12px 0px;
+  width: 50px;
+  height: 50px;
+  border-radius: 200px;
+  display: inline-block;
 }
 
 .match_status_does_not_match {
-  color:$grade-e-color;
-  background-color:scale-color($grade-e-color, $lightness: 75%);
+  color: $grade-e-color;
+  background-color: scale-color($grade-e-color, $lightness: 75%);
 }
 
 .match_status_may_not_match {
-  color:$grade-d-color;
-  background-color:scale-color($grade-d-color, $lightness: 75%);
+  color: $grade-d-color;
+  background-color: scale-color($grade-d-color, $lightness: 75%);
 }
 
 .match_status_unknown_match {
@@ -764,13 +767,12 @@ html[dir="rtl"] {
   background-color: scale-color($grade-a-color, $lightness: 75%);
 }
 
-
 .match_score_does_not_match {
-  background-color:$grade-e-color;
+  background-color: $grade-e-color;
 }
 
 .match_score_may_not_match {
-  background-color:$grade-d-color;
+  background-color: $grade-d-color;
 }
 
 .match_score_unknown_match {
@@ -791,7 +793,7 @@ html[dir="rtl"] {
 
 .search_results .list_display_barcode {
   color: black;
-  font-size: .8em;
+  font-size: 0.8em;
   display: block; // one line for barcode, to keep thing homogeneous
 }
 
@@ -804,7 +806,7 @@ html[dir="rtl"] {
   top: 0;
   right: 0;
   padding: 0 0.5em;
-  border-radius: .3em;
+  border-radius: 0.3em;
 }
 
 .search_results .list_edit_link:hover {
@@ -813,305 +815,312 @@ html[dir="rtl"] {
 
 // Horizontally and vertically center images
 .list_product_img_div {
-  height:100px;
-  text-align:center;
-  line-height:100px;
+  height: 100px;
+  text-align: center;
+  line-height: 100px;
 }
 
 .list_product_img {
-  height:auto;
-  display:inline-block;
-  vertical-align:middle;
+  height: auto;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .list_product_name {
-  margin-top:0.2rem;
-  line-height:20px;
+  margin-top: 0.2rem;
+  line-height: 20px;
 }
 
 .list_product_icons {
-  height:24px;
-  margin-right:0.2rem;
-  margin-top:0.2rem;
+  height: 24px;
+  margin-right: 0.2rem;
+  margin-top: 0.2rem;
 }
 
-
 // For small screen, cards take the full width, move the image to the left
-@media #{$small-only} { 
-  .list_product_img_div { width:100px;float:left;margin-right:1em; }
-  .list_product_a { min-height:120px; }
-  .list_product_icons { height:36px; }
+@media #{$small-only} {
+  .list_product_img_div {
+    width: 100px;
+    float: left;
+    margin-right: 1em;
+  }
+  .list_product_a {
+    min-height: 120px;
+  }
+  .list_product_icons {
+    height: 36px;
+  }
 }
 
 // For medium screen, force the height of the product name so that icons
 // below are vertically aligned with other cards on the same line
 @media #{$medium-up} {
   .list_product_name {
-    height:80px;
-    overflow:hidden;
+    height: 80px;
+    overflow: hidden;
   }
 }
 
 .tabs a:focus {
-    outline: none;
+  outline: none;
 }
 
 .tabs a:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 .tab_products-title.active {
-    border-bottom: 1px solid grey;
+  border-bottom: 1px solid grey;
 }
 
 // from https://www.w3.org/WAI/tutorials/forms/labels/
 .visuallyhidden {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
 }
 
 .f-dropdown {
-    max-width: 300px;
+  max-width: 300px;
 }
 
 .ecoscore_panel {
-    border-radius: 1rem;
+  border-radius: 1rem;
 }
 
 .ecoscore_panel li:hover {
-    background-color: transparent;
-    cursor: default;
+  background-color: transparent;
+  cursor: default;
 }
 
 .ecoscore_panel ul {
-    list-style-type: none;
+  list-style-type: none;
 }
 
 #ecoscore_panel_lca {
-    background-color: #fafafa;
+  background-color: #fafafa;
 }
 
 #ecoscore_panel_production_system {
-    background-color: #e1fdd4;
+  background-color: #e1fdd4;
 }
 
 #ecoscore_panel_origins {
-    background-color: #d6f5ff;
+  background-color: #d6f5ff;
 }
 
 #ecoscore_panel_threatened_species {
-    background-color: #ffe4d1;
+  background-color: #ffe4d1;
 }
 
 #ecoscore_panel_packaging {
-    background-color: #fff6d5;
+  background-color: #fff6d5;
 }
 
 .agribalyse_impact_bar {
-    background-color: #ffbb88;
-    height: 1.2rem;
-    float: left;
+  background-color: #ffbb88;
+  height: 1.2rem;
+  float: left;
 }
 
 .agribalyse_impact_bar_full {
-    width: 200px;
-    background-color: #eeeeee;
-    height: 1.2rem;
+  width: 200px;
+  background-color: #eeeeee;
+  height: 1.2rem;
 }
 
 // CSS filters to color SVG images
 // Filters generated from https://codepen.io/sosuke/pen/Pjoqqp
 .filter-green {
-    filter: invert(43%) sepia(100%) saturate(320%) hue-rotate(93deg) brightness(89%) contrast(97%);
+  filter: invert(43%) sepia(100%) saturate(320%) hue-rotate(93deg)
+    brightness(89%) contrast(97%);
 }
 
 .filter-red {
-    // loss: 4.0, close enough
-    filter: invert(43%) sepia(45%) saturate(992%) hue-rotate(314deg) brightness(99%) contrast(89%);
+  // loss: 4.0, close enough
+  filter: invert(43%) sepia(45%) saturate(992%) hue-rotate(314deg)
+    brightness(99%) contrast(89%);
 }
 
 .filter-orange {
-    filter: invert(83%) sepia(20%) saturate(6233%) hue-rotate(327deg) brightness(101%) contrast(90%);
+  filter: invert(83%) sepia(20%) saturate(6233%) hue-rotate(327deg)
+    brightness(101%) contrast(90%);
 }
 
 .filter-darkorange {
-    filter: invert(47%) sepia(24%) saturate(4013%) hue-rotate(4deg) brightness(98%) contrast(86%);
+  filter: invert(47%) sepia(24%) saturate(4013%) hue-rotate(4deg)
+    brightness(98%) contrast(86%);
 }
 
 .filter-grey {
-    filter: invert(30%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(97%) contrast(89%);
+  filter: invert(30%) sepia(0%) saturate(0%) hue-rotate(29deg) brightness(97%)
+    contrast(89%);
 }
 
-
 /* Accessibility: Adding focus styles on the outer-box of the fake checkbox used for the Foundation switch to classify products according to one's preferences */
 
-.switch input[type="checkbox"]:focus+label::after {
-    outline: rgb(59, 153, 252) auto 5px;
+.switch input[type="checkbox"]:focus + label::after {
+  outline: rgb(59, 153, 252) auto 5px;
 }
 
 // Attributes cards in summary
 .attribute_card {
-    border-radius: 8px;
-    padding: 1rem;
-    min-height: 96px;
-    display: block;
+  border-radius: 8px;
+  padding: 1rem;
+  min-height: 96px;
+  display: block;
 }
 
 a.attribute_card {
-    color: $body-font-color;
+  color: $body-font-color;
 }
 
 a.attribute_card:hover {
-    text-decoration: none;
+  text-decoration: none;
 }
 
 // Knowledge panels
 // We need a large padding inside panel content so that we can see
 // the hierarchy of panels that contain other panels
 .panel_content {
-    clear: left;
-    margin-top: 1rem;
-    padding-left: 2rem !important;
-    padding-right: 2rem !important;
+  clear: left;
+  margin-top: 1rem;
+  padding-left: 2rem !important;
+  padding-right: 2rem !important;
 }
 
 .panel_content_card {
-    margin-top: 1rem;
+  margin-top: 1rem;
 }
 
 .evaluation_good_title {
-    color: $evaluation-good-color;
+  color: $evaluation-good-color;
 }
 
 .evaluation_average_title {
-    color: $evaluation-average-color;
+  color: $evaluation-average-color;
 }
 
 .evaluation_bad_title {
-    color: $evaluation-bad-color;
+  color: $evaluation-bad-color;
 }
 
 .evaluation_unknown_title {
-    color: $evaluation-unknown-color;
+  color: $evaluation-unknown-color;
 }
 
 .evaluation_neutral_title {
-    color: $grade-unknown-color;
+  color: $grade-unknown-color;
 }
 
 .text_good {
-  background-color:rgba($evaluation-good-color,0.1) !important;
+  background-color: rgba($evaluation-good-color, 0.1) !important;
 }
 
 .text_average {
-  background-color:rgba($evaluation-average-color,0.1) !important;
+  background-color: rgba($evaluation-average-color, 0.1) !important;
 }
 
 .text_bad {
-  background-color:rgba($evaluation-bad-color,0.1) !important;
+  background-color: rgba($evaluation-bad-color, 0.1) !important;
 }
 
 .text_info {
-  background-color:$info-color !important;
+  background-color: $info-color !important;
 }
 
 .text_warning {
-  background-color:$warning-color !important;
+  background-color: $warning-color !important;
   color: white;
 }
 
 .text_error {
-  background-color:$alert-color !important;
+  background-color: $alert-color !important;
 }
 
-
-
-
-
 .grade_unknown {
-    background-color: rgba($grade-unknown-color, 0.1) !important;
+  background-color: rgba($grade-unknown-color, 0.1) !important;
 }
 
 a.grade_unknown:hover {
-    background-color: rgba($grade-unknown-color, 0.2) !important;
+  background-color: rgba($grade-unknown-color, 0.2) !important;
 }
 
 .grade_unknown_tile {
-    color: $grade-unknown-color;
+  color: $grade-unknown-color;
 }
 
 .grade_a {
-    background-color: rgba($grade-a-color, 0.1) !important;
+  background-color: rgba($grade-a-color, 0.1) !important;
 }
 
 a.grade_a:hover {
-    background-color: rgba($grade-a-color, 0.2) !important;
+  background-color: rgba($grade-a-color, 0.2) !important;
 }
 
 .grade_a_title {
-    color: $grade-a-color;
+  color: $grade-a-color;
 }
 
 .grade_b {
-    background-color: rgba($grade-b-color, 0.1) !important;
+  background-color: rgba($grade-b-color, 0.1) !important;
 }
 
 a.grade_b:hover {
-    background-color: rgba($grade-b-color, 0.2) !important;
+  background-color: rgba($grade-b-color, 0.2) !important;
 }
 
 .grade_b_title {
-    color: $grade-b-color;
+  color: $grade-b-color;
 }
 
 .grade_c {
-    background-color: rgba($grade-c-color, 0.1) !important;
+  background-color: rgba($grade-c-color, 0.1) !important;
 }
 
 a.grade_c:hover {
-    background-color: rgba($grade-c-color, 0.2) !important;
+  background-color: rgba($grade-c-color, 0.2) !important;
 }
 
 .grade_c_title {
-    color: $grade-c-color;
+  color: $grade-c-color;
 }
 
 .grade_d {
-    background-color: rgba($grade-d-color, 0.1) !important;
+  background-color: rgba($grade-d-color, 0.1) !important;
 }
 
 a.grade_d:hover {
-    background-color: rgba($grade-d-color, 0.2) !important;
+  background-color: rgba($grade-d-color, 0.2) !important;
 }
 
 .grade_d_title {
-    color: $grade-d-color;
+  color: $grade-d-color;
 }
 
 .grade_e {
-    background-color: rgba($grade-e-color, 0.1) !important;
+  background-color: rgba($grade-e-color, 0.1) !important;
 }
 
 a.grade_e:hover {
-    background-color: rgba($grade-e-color, 0.2) !important;
+  background-color: rgba($grade-e-color, 0.2) !important;
 }
 
 .grade_e_title {
-    color: $grade-e-color;
+  color: $grade-e-color;
 }
 
 #main_column {
-    padding-bottom: 2rem;
-    >h1,
-    >p {
-        display: none;
-    }
+  padding-bottom: 2rem;
+  > h1,
+  > p {
+    display: none;
+  }
 }
 
 @import "cards";
@@ -1119,111 +1128,182 @@ a.grade_e:hover {
 
 ////
 .button {
-  border-radius:$button-radius;
+  border-radius: $button-radius;
+}
+.align-center {
+  align-items: center;
 }
-.align-center {align-items:center;}
 
 /* Recommended icon sizes */
 span.size-20 {
   font-size: 20px;
-  font-variation-settings: 'OPSZ' 20;
+  font-variation-settings: "OPSZ" 20;
 }
 span.size-24 {
   font-size: 24px;
-  font-variation-settings: 'OPSZ' 24;
+  font-variation-settings: "OPSZ" 24;
 }
 span.size-40 {
   font-size: 40px;
-  font-variation-settings: 'OPSZ' 40;
+  font-variation-settings: "OPSZ" 40;
 }
 span.size-48 {
   font-size: 48px;
-  font-variation-settings: 'OPSZ' 48;
+  font-variation-settings: "OPSZ" 48;
 }
 
-
 span.ico-bold {
-  font-variation-settings: 'wght' 700;
+  font-variation-settings: "wght" 700;
 }
 
 @import "topbar";
 @import "footer";
-@import "product-list" ;
-@import "product-page" ;
-@import "product-form" ;
-@import "inputs_redesign" ;
+@import "product-list";
+@import "product-page";
+@import "product-form";
+@import "inputs_redesign";
 
 .white-button {
-  @include button( 10, $white);
+  @include button(10, $white);
 }
 
-.donate_image_banner_outside {
-  margin-bottom:1rem;
-  background: no-repeat url(/images/illustrations/donate-heart.svg)
+$section-blue: #6d85d9;
+
+.donation-banner,
+.donation-banner-footer {
+  position: relative;
+  display: flex;
+  padding: 2rem 0;
+  background-color: $section-blue;
+  @media #{$small-only} {
+    flex-direction: column;
+    padding: 1rem 0;
+  }
+  &__image {
+    display: block;
+    content: "";
+    background: no-repeat url(/images/illustrations/donate-heart.svg);
+    min-width: 150px;
+    height: 81px;
+  }
+  &__content {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: 1rem;
+    margin: 0 auto;
+    max-width: 100rem;
+    @media #{$small-only} {
+      flex-direction: column;
+      gap: 0;
+      margin-top: -2rem;
+    }
+    &--button {
+      appearance: button;
+      display: inline-flex;
+      flex-direction: row;
+      align-items: center;
+      gap: 8px;
+      height: fit-content;
+      margin-bottom: 0;
+      @media #{$small-only} {
+        order: 3;
+      }
+    }
+    &-paragraphs {
+      > p { color: $white; }
+      @media #{$small-only} {
+        text-align: center;
+        order: 2;
+        padding: 1rem;
+      }
+      &--thank-you {
+        font-weight: bold;
+        span {
+          color: red;
+          font-size: 1rem;
+        }
+      }
+    }
+    &-close {
+      align-self: flex-start;
+      cursor: pointer;
+      color: white;
+      opacity: 0.5;
+      margin-right: 1rem;
+      @media #{$small-only} { 
+        position: relative;
+        top: -25px;
+        margin-right: 2rem;
+        align-self: flex-end;
+        order: 1;
+      }
+    }
+  }
 }
 
-.donate_image_banner_inside {
-  @media only screen and (max-width: 100rem) {margin-left:140px;}
+.donation-banner-footer {
+  &__content {
+    @media #{$small-only} { margin-top: 0; }
+  }
 }
 
 .footer_social_icon {
-  height:24px;
-  vertical-align:middle;
+  height: 24px;
+  vertical-align: middle;
 }
 
 // Footer: Scan your everyday foods
 
 #footer_scan {
-font-style: normal;
-font-weight: 700;
-font-size: 22px;
-line-height: 28px;
-
-display: flex;
-align-items: center;
-text-align: center;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 22px;
+  line-height: 28px;
 
-color: #000000;
+  display: flex;
+  align-items: center;
+  text-align: center;
 
+  color: #000000;
 }
 
 #footer_install_the_app {
-font-weight: 800;
-font-size: 26px;
-line-height: 30px;
-text-transform:uppercase;
-margin-bottom:8px;
+  font-weight: 800;
+  font-size: 26px;
+  line-height: 30px;
+  text-transform: uppercase;
+  margin-bottom: 8px;
 }
 
 #everyday {
-line-height: 28px;
-font-weight: 800;
-color: #FFFFFF;
-
-transform: rotate(2.5deg);
-background-color:#0064C8;
-border-inline: 5px solid #0064c8;
-border-radius:5px;
-text-transform:uppercase;
-display:inline-block;
+  line-height: 28px;
+  font-weight: 800;
+  color: #ffffff;
+
+  transform: rotate(2.5deg);
+  background-color: #0064c8;
+  border-inline: 5px solid #0064c8;
+  border-radius: 5px;
+  text-transform: uppercase;
+  display: inline-block;
 }
 
 #foods {
-line-height: 28px;
-font-weight: 800;
-color: #FFFFFF;
-
-transform: rotate(-3deg);
-background-color:#FF8714;
-border-inline: 5px solid #FF8714;
-border-radius:5px;
-text-transform:uppercase;
-display: inline-block;
-
+  line-height: 28px;
+  font-weight: 800;
+  color: #ffffff;
+
+  transform: rotate(-3deg);
+  background-color: #ff8714;
+  border-inline: 5px solid #ff8714;
+  border-radius: 5px;
+  text-transform: uppercase;
+  display: inline-block;
 }
 
 .search_form_accordion_navigation {
-  margin-top:1rem;
+  margin-top: 1rem;
 }
 
 .search_form_accordion_content {
@@ -1233,18 +1313,18 @@ display: inline-block;
 // Grow the content so that the footer is always at the bottom of the page
 
 #page {
-  min-height:100vh;
-  display:flex;
-  flex-direction:column;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
 
 #main_container {
-  flex-grow:1;
-  flex-direction:column;
+  flex-grow: 1;
+  flex-direction: column;
 }
 
 #content {
-  flex-grow:1;
+  flex-grow: 1;
 }
 
 /* Packaging widget */
diff --git a/templates/web/common/includes/donate_banner.tt.html b/templates/web/common/includes/donate_banner.tt.html
index d93e120d65cc2..41de80fe1d834 100644
--- a/templates/web/common/includes/donate_banner.tt.html
+++ b/templates/web/common/includes/donate_banner.tt.html
@@ -1,56 +1,89 @@
-
 <!-- start templates/[% component.name %] -->
 
-[% IF banner %]
-
-<div id="donate_banner_top" class="donate_banner block black short" style="background-color:#6D85D9">
-	
-		<div class="donate_image_banner_outside">
-			<div class="row hide-for-small">
-
-				<div class="donate_image_banner_inside">
-
-					<a href="[% link %]?utm_source=off&utm_medium=web&utm_campaign=donate-2022&utm_term=en-text-button" class="button round white-button" style="float:left;margin-right:2rem;">
-						<span class="material-icons material-symbols-button">volunteer_activism</span>
-						[% lang('donation_cta') %]
-					</a>
-
-					<p class="">[% f_lang('donation_body_employees', { number_of_employees => '8' }) %]<br>
-					[% f_lang('donation_why_year', { year => '2023' }) %] <strong>[% lang('thank_you') %] <span style="color:red">❤️</span></strong>
-					</p>
-					<input class="hide_image_banner" id="hide_image_banner1" type="checkbox" style="margin-top:1.5rem;margin-bottom:0;">
-					<label for="hide_image_banner1">
-						<span id="hide_image_banner_hide1" class="text-white">[% lang('donation_banner_hide') %]</span>
-					</label>
-
-				</div>
-			</div>
-
-			<div class="row hide-for-medium-up">
-
-				<div class="donate_image_banner_inside" style="min-height:90px;padding-top:10px;">
-
-					<a href="[% link %]?utm_source=off&utm_medium=web&utm_campaign=donate-2022&utm_term=en-text-button" class="button round white-button" style="float:left;margin-right:2rem;">
-						<span class="material-icons material-symbols-button">volunteer_activism</span>
-						[% lang('donation_cta') %]
-					</a>
-				</div>
-
-				<div class="small-12 columns">
-					<p class="">[% f_lang('donation_body_employees', { number_of_employees => '8' }) %]<br>
-					[% f_lang('donation_why_year', { year => '2023' }) %] <strong>[% lang('thank_you') %] <span style="color:red">❤️</span></strong>
-					</p>
-					<input class="hide_image_banner" id="hide_image_banner2" type="checkbox" style="margin-top:1.5rem;margin-bottom:0;">
-					<label for="hide_image_banner2">
-						<span id="hide_image_banner_hide2" class="text-white">[% lang('donation_banner_hide') %]</span>
-					</label>
-
-				</div>
-			</div>			
-			
-		</div>
-	
-</div>
+[% banner_main = BLOCK %]
+<section id="donation-banner-top" class="donation-banner hide-when-no-access-to-producers-platform">
+  <span class="donation-banner__image"></span>
+  <div class="donation-banner__content">
+  <a
+      class="donation-banner__content--button button round white-button"
+      href="[% link %]?utm_source=off&utf_medium=web&utm_campaign=donate-2023&utm_term=en-text-button"
+  >
+    <span class="material-icons">volunteer_activism</span>
+    [% lang('donation_cta') %]
+  </a>
+  <div class="donation-banner__content-paragraphs">
+    <p class="donation-banner__content-paragraphs--text">
+      [% f_lang('donation_body_employees', { 'number_of_employees' => '8' }) %] [%
+      f_lang('donation_why_year', { year => '2023' }) %]
+    </p>
+    <p class="donation-banner__content-paragraphs--thank-you">[% lang('thank_you') %] <span class="material-icons">favorite</span></p>
+  </div>
+  <div class="donation-banner__content-close">
+    <span id="hide-donate-banner" class="donation-banner__content-close--icon material-icons" onclick="DonationButton();">close</span>
+  </div>
+</section>
+
+<script>
+  let d = new Date();
+  let bannerID = document.getElementById('donation-banner-top');
+  let getDomain = window.location.origin.split('.');
+
+  function setBannerCookie(bcname, bcval, bcexdays) {
+    d.setTime(d.getTime() + (bcexdays*60*60*24*1000));
+    let expires = 'expires=' + d.toUTCString();
+    // Apply cookie for every domain contains open...facts
+    let domain = 'domain=.' + getDomain.slice(1).join('.');
+    document.cookie = bcname + '=' + bcval + ';' + expires + ';' + domain + ';SameSite=None;Secure;path=/';
+  }
+  
+  function getBannerCookie(bcname) {
+    let name = bcname + '=';
+    let decodedCookie = decodeURIComponent(document.cookie);
+    let ca = decodedCookie.split(';');
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) == ' ') { c = c.substring(1); }
+      if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); }
+    }
+    return '';
+  }
+
+  function DonationButton() {
+    setBannerCookie('off-donation-banner', 1, 180);
+    bannerID.style.display = 'none';
+  }
+
+  if (getBannerCookie('off-donation-banner') !== '') {
+    bannerID.style.display = 'none';
+  } else { 
+    bannerID.style.display = 'flex';
+  }
+</script>
+
+[% END %]
+
+<!-- Donation banner @ footer -->
+[% banner_footer = BLOCK %]
+
+<section class="donation-banner-footer hide-when-no-access-to-producers-platform">
+  <span class="donation-banner-footer__image"></span>
+  <div class="donation-banner-footer__content">
+  <a
+      class="donation-banner-footer__content--button button round white-button"
+      href="[% link %]?utm_source=off&utf_medium=web&utm_campaign=donate-2023&utm_term=en-text-button"
+  >
+    <span class="material-icons">volunteer_activism</span>
+    [% lang('donation_cta') %]
+  </a>
+  <div class="donation-banner-footer__content-paragraphs">
+    <p class="donation-banner-footer__content-paragraphs--text">
+      [% f_lang('donation_body_employees', { 'number_of_employees' => '8' }) %] [%
+      f_lang('donation_why_year', { year => '2023' }) %]
+    </p>
+    <p class="donation-banner-footer__content-paragraphs--thank-you">[% lang('thank_you') %] <span class="material-icons">favorite</span></p>
+  </div>
+</section>
+
 [% END %]
 
 <!-- end templates/[% component.name %] -->
diff --git a/templates/web/common/includes/donate_banner_bottom.tt.html b/templates/web/common/includes/donate_banner_bottom.tt.html
deleted file mode 100644
index 004cbd6bee5db..0000000000000
--- a/templates/web/common/includes/donate_banner_bottom.tt.html
+++ /dev/null
@@ -1,41 +0,0 @@
-
-<!-- start templates/[% component.name %] -->
-
-<div id="donate_banner_bottom" class="donate_banner block black short" style="background-color:#6D85D9">
-	
-		<div class="donate_image_banner_outside">
-			<div class="row hide-for-small">
-
-				<div class="donate_image_banner_inside">
-
-					<a href="[% link %]?utm_source=off&utm_medium=web&utm_campaign=donate-2022&utm_term=en-text-button-bottom-banner" class="button round white-button" style="float:left;margin-right:2rem;">
-						<span class="material-icons material-symbols-button">volunteer_activism</span>
-						[% lang('donation_cta') %]
-					</a>
-
-					<p class="">[% f_lang('donation_body_employees', { number_of_employees => '8' }) %]<br>
-					[% f_lang('donation_why_year', { year => '2023' }) %] <strong>[% lang('thank_you') %] <span style="color:red">❤️</span></strong>
-					</p>
-				</div>
-			</div>
-
-			<div class="row hide-for-medium-up">
-
-				<div class="donate_image_banner_inside" style="min-height:90px;padding-top:10px;">
-
-					<a href="[% link %]?utm_source=off&utm_medium=web&utm_campaign=donate-2022&utm_term=en-text-button-bottom-banner" class="button round white-button" style="float:left;margin-right:2rem;">
-						<span class="material-icons material-symbols-button">volunteer_activism</span>
-						[% lang('donation_cta') %]
-					</a>
-				</div>
-
-				<div class="small-12 columns">
-					<p class="">[% f_lang('donation_body_employees', { number_of_employees => '8' }) %]<br>
-					[% f_lang('donation_why_year', { year => '2023' }) %] <strong>[% lang('thank_you') %] <span style="color:red">❤️</span></strong>
-					</p>
-				</div>
-			</div>			
-		</div>
-</div>
-
-<!-- end templates/[% component.name %] -->
diff --git a/templates/web/common/site_layout.tt.html b/templates/web/common/site_layout.tt.html
index e12d979946267..d7e7d8cf6bed1 100644
--- a/templates/web/common/site_layout.tt.html
+++ b/templates/web/common/site_layout.tt.html
@@ -30,7 +30,6 @@
 <body[% bodyabout %] class="[% page_type %]_page">
 
 	<div id="page">
-
 		<div class="upper-nav contain-to-grid"  id="upNav">
 			<nav class="top-bar " data-topbar role="navigation">
 				
@@ -67,7 +66,7 @@
 										<option></option>
 									</select>
 								</li>
-								[% IF langs.match('<a') %]
+                [% IF langs.match('<a>') %]
 									<li class="has-dropdown">
 										[% selected_lang %]
 										<ul class="dropdown">
@@ -220,14 +219,12 @@
 					</div>
 					</a>
 				[% END %]
-				
-				<div class="main block_light" >
-					
-					<div id="main_column">
-										
-						[% INCLUDE 'web/common/includes/donate_banner.tt.html' %]
 
-						[% IF page_format == "banner" %]
+				<div class="main block_light">
+					<div id="main_column">
+          [% PROCESS 'web/common/includes/donate_banner.tt.html' %]
+          [% banner_main %]
+            [% IF page_format == "banner" %]
 							<!-- banner pages such as product and product edit form have their own h1 title -->
 							[% content %]
 						[% ELSIF page_type == "products" %]
@@ -271,10 +268,9 @@ <h1>[% title %]</h1>
 				</div>
 			</div>
 		</div>
-
 		</div>
 
-		<footer >
+		<footer>
 			<div class="block_light bg-white" id="install_the_app_block">
 				<div class="row">
 					<div class="small-12 flex-grid v-space-short v-align-center direction-row h-space-tiny">
@@ -297,7 +293,9 @@ <h1>[% title %]</h1>
 				</div>
 			</div>
 
-			[% INCLUDE 'web/common/includes/donate_banner_bottom.tt.html' %]
+      [% PROCESS 'web/common/includes/donate_banner.tt.html' %]
+      [% banner_footer %]
+
 			<div class="block_light block_cappucino" id="contribute_and_discover_links_block">
 				<div class="row">
 					<div class="small-12 large-6 columns v-space-normal block_off">