diff --git a/src/app/affiliations/affiliations.component.html b/src/app/affiliations/affiliations.component.html
index d8c8e64..ca546a8 100644
--- a/src/app/affiliations/affiliations.component.html
+++ b/src/app/affiliations/affiliations.component.html
@@ -76,10 +76,10 @@
     <!--       [class]="'uk-hidden-hover uk-position-center-left uk-padding uk-height-1-1 uk-flex uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)"-->
     <!--    class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"-->
     <a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
-       class="uk-position-center-left uk-padding uk-height-1-1 uk-flex"
+       class="uk-position-center-left uk-padding uk-height-1-1 uk-flex" [class.coloredBackground]="communityFirstPage"
        href="#" uk-slidenav-previous uk-slider-item="previous"></a>
     <a *ngIf="(affiliations.length > affiliationsInSlider) && arrows"
-       class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"
+       class="uk-position-center-right uk-padding uk-height-1-1 uk-flex" [class.coloredBackground]="communityFirstPage"
        href="#" uk-slidenav-next uk-slider-item="next"></a>
   </div>
   <div *ngIf="communityFirstPage">
diff --git a/src/assets/connect-custom.css b/src/assets/connect-custom.css
index f6a550b..c974beb 100644
--- a/src/assets/connect-custom.css
+++ b/src/assets/connect-custom.css
@@ -177,6 +177,14 @@ a:hover .user-circle-background {
     min-height: 60vh;
 }
 
+.coloredBackground, .coloredBackground:focus, .coloredBackground:hover {
+    background-color: #F7FCFF;
+}
+
+.coloredBackground:hover {
+    opacity: 0.9;
+}
+
 .generalSearchForm .subtitle{
     color: #000000 !important;
     opacity: 0.6;