diff --git a/src/app/communities/browseCommunity/browse-community.component.html b/src/app/communities/browseCommunity/browse-community.component.html
index f1e27f1..47e66a5 100644
--- a/src/app/communities/browseCommunity/browse-community.component.html
+++ b/src/app/communities/browseCommunity/browse-community.component.html
@@ -8,7 +8,7 @@
   <div class="uk-card-media-top uk-margin-top community uk-padding">
     <a (click)="confirmModalOpen()">
       <div class="communitiesImageBox uk-position-relative">
-        <img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-responsive-height uk-height-small uk-position-center">
+        <img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-position-center">
         <span  *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-responsive-height uk-height-small uk-position-center">
           <svg  viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
         </span>
diff --git a/src/app/communities/communities.component.html b/src/app/communities/communities.component.html
index c29ebf6..3c31b9e 100644
--- a/src/app/communities/communities.component.html
+++ b/src/app/communities/communities.component.html
@@ -1,6 +1,6 @@
 <div class="image-front-topbar uk-section-large banner-connect uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
   <div class=" uk-section uk-padding-remove-bottom">
-    <div class="uk-position-cover" style=""></div>
+    <div class="uk-position-cover"></div>
     <div class="uk-position-relative uk-panel">
       <div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
         <div class="uk-animation-fade uk-margin-top  uk-width-1-2" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
@@ -72,7 +72,7 @@
   <div class="">
     <div class="uk-margin-bottom uk-margin-medium-top">
         <div class="uk-container uk-container-large uk-margin-large-bottom">
-          <h1 class="uk-text-center uk-text-bold" style="font-size: 28px">Our mission for an Open and FAIR science</h1>
+          <h1 class="uk-text-center uk-text-bold">Our mission for an Open and FAIR science</h1>
         </div>
         <div class="uk-container uk-container-large" uk-height-match=".target">
           <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin" uk-grid>
@@ -189,7 +189,7 @@
           <div class="uk-animation-fade uk-margin-top  uk-width-1-2" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
         </div>
         <div *ngIf= "!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-medium-top uk-margin-medium-bottom">
-          <h1 class="uk-text-bold" style="font-size: 28px">Community Gateways already in action</h1>
+          <h1 class="uk-text-bold">Community Gateways already in action</h1>
           <div [class]="'uk-margin-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
 
             <div class="uk-grid-match uk-grid-small  uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
@@ -218,8 +218,8 @@
     <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
       <div class="uk-width-1-2"></div>
       <div class="uk-width-1-2">
-        <h1 style="font-size: 28px">Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>
-        <div class="uk-text-large">Get in touch with our team to find out how.</div>
+        <h1>Let us Help you Develop a Collaborative Science Gateway. It is fast. It is reliable.</h1>
+        <div>Get in touch with our team to find out how.</div>
         <div class="uk-inline uk-margin-large-top uk-margin-bottom">
           <a class="uk-button portal-button" routerLink="/contact" routerLinkActive="router-link-active"> CONTACT US</a>
         </div>
diff --git a/src/app/learn-how/learn-how.component.ts b/src/app/learn-how/learn-how.component.ts
index 7ee54c0..171e6a7 100644
--- a/src/app/learn-how/learn-how.component.ts
+++ b/src/app/learn-how/learn-how.component.ts
@@ -13,33 +13,17 @@ import {FAQ} from "../openaireLibrary/utils/entities/FAQ";
               class="uk-section uk-padding-remove-bottom" >
             <div class="uk-container uk-container-large uk-section">
               <div class="uk-margin-large-top" uk-grid>
-                <h1 class="uk-width-1-1" style="font-size: 52px">Learn the process</h1>
+                <h1 class="uk-width-1-1" style="font-size: 41px">Learn the process</h1>
                 <h5 class="uk-width-1-2@l uk-width-1-1@s">Build a <b>Gateway to your community's</b> open and linked research outcomes. Customized to your needs.</h5>
               </div>
             </div>
             <div class="uk-section-muted"> <!--background-->
-              <div class="uk-container uk-container-large uk-section">
-                <div class="uk-flex uk-flex-middle" uk-grid>
-                  <div class="uk-width-1-2">
-                    <h1>Our main features</h1>
-                    <span>OpenAIRE offers the Research Community Dashboard as a key service for research communities, whether they are established or emerging, helping you reach out and engage all your researchers to practice open science out-of-the-box.</span>
-                  </div>
-                  <div class="uk-width-1-2">
-                      eikona
-                  </div>
-                </div>
+              <div class="uk-container uk-container-large">
+                <gif-slider [gifs]="first" [gifRight]="true"></gif-slider>
               </div>
             </div>
-            <div class="uk-container uk-container-large uk-section">
-              <div class="uk-flex uk-flex-middle" uk-grid>
-                <div class="uk-width-1-2">
-                  <h1>Our main features</h1>
-                  <span>OpenAIRE offers the Research Community Dashboard as a key service for research communities, whether they are established or emerging, helping you reach out and engage all your researchers to practice open science out-of-the-box.</span>
-                </div>
-                <div class="uk-width-1-2 uk-flex-first">
-                  eikona
-                </div>
-              </div>
+            <div class="uk-container uk-container-large">
+              <gif-slider [gifs]="second"></gif-slider>
             </div>
             <div class="uk-section-muted"> <!--background-->
               <div class="uk-container uk-container-large uk-section">
@@ -95,6 +79,8 @@ export class LearnHowComponent {
       answer: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.'
     }
   ];
+  public first: {"gif": string, "header": string, "text"}[] = [];
+  public second: {"gif": string, "header": string, "text"}[] = [];
 
 
   private pageTitle = "OpenAIRE - Connect | Learn How";
@@ -118,6 +104,7 @@ export class LearnHowComponent {
               this.piwiksub = this._piwikService.trackView(this.properties, "OpenAIRE Connect | Create and manage your community page", this.properties.piwikSiteId).subscribe();
             }
           });
+          this.createGifs();
   }
 
   public ngOnDestroy() {
@@ -125,4 +112,38 @@ export class LearnHowComponent {
       this.piwiksub.unsubscribe();
     }
   }
+
+  private createGifs() {
+    this.first.push({
+      gif: "../../../../assets/Connect%20animations.gif",
+      header: "Research Community Dashboard",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.first.push({
+      gif: "../../../../assets/admin-portal.png",
+      header: "Research Community Dashboard 2",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.first.push({
+      gif: "../../../../assets/banner connect.jpg",
+      header: "Research Community Dashboard 3",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+
+    this.second.push({
+      gif: "../../../../assets/Connect%20animations.gif",
+      header: "Research Community Dashboard",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.second.push({
+      gif: "../../../../assets/admin-portal.png",
+      header: "Research Community Dashboard 2",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+    this.second.push({
+      gif: "../../../../assets/banner connect.jpg",
+      header: "Research Community Dashboard 3",
+      text: "This is OpenAIRE’s key service for research communities, both established and emerging ones. Our service helps you reach out and engage all your researchers to practice open science out-of-the-box."
+    });
+  }
 }
diff --git a/src/app/learn-how/learn-how.module.ts b/src/app/learn-how/learn-how.module.ts
index 022896f..146f9f1 100644
--- a/src/app/learn-how/learn-how.module.ts
+++ b/src/app/learn-how/learn-how.module.ts
@@ -8,10 +8,11 @@ import {PiwikService}          from '../openaireLibrary/utils/piwik/piwik.servic
 
 import {LearnHowComponent} from "./learn-how.component";
 import {LearnHowRoutingModule} from "./learn-how-routing.module";
+import {GifSliderModule} from "../openaireLibrary/utils/gif-slider/gif-slider.module";
 
 @NgModule({
   imports: [
-    CommonModule, RouterModule, LearnHowRoutingModule
+    CommonModule, RouterModule, LearnHowRoutingModule, GifSliderModule
   ],
   declarations: [
     LearnHowComponent