diff --git a/explore/src/app/home/home.component.html b/explore/src/app/home/home.component.html
index 983d91f7..ff7b473a 100644
--- a/explore/src/app/home/home.component.html
+++ b/explore/src/app/home/home.component.html
@@ -86,35 +86,42 @@
                           <li *ngFor="let range of createRange(logos[type].length) let j=index"
                               class="uk-width-1-1 home-logo">
                             <h1 class="uk-text-center uk-margin-bottom portal-color uk-h3">
-                                <span *ngIf="type=='publication' && showPublications && publicationsSize">
-                                  <span class="uk-text-bold">{{publicationsSize.number|number}}{{publicationsSize.size}}
+                                <span *ngIf="type=='publication' && showPublications && numbers?.publicationsSize">
+                                  <span
+                                      class="uk-text-bold">{{numbers.publicationsSize.number|number}}{{numbers.publicationsSize.size}}
                                     publications</span><span> deduplicated</span>
                                 </span>
-                              <span *ngIf="type=='dataset' && showDatasets && (datasetsLinkedSize ||datasetsSize)">
-                                  <span *ngIf="datasetsLinkedSize">
+                              <span
+                                  *ngIf="type=='dataset' && showDatasets && (numbers?.datasetsLinkedSize || numbers?.datasetsSize)">
+                                  <span *ngIf="numbers?.datasetsLinkedSize">
                                        <span
-                                           class="uk-text-bold">{{datasetsLinkedSize.number|number}}{{datasetsLinkedSize.size}}
+                                           class="uk-text-bold">{{numbers.datasetsLinkedSize.number|number}}{{numbers.datasetsLinkedSize.size}}
                                          datasets</span> interlinked with publications</span>
-                                  <span *ngIf="datasetsSize && !datasetsLinkedSize"
-                                        class="uk-text-bold">{{datasetsSize.number|number}}{{datasetsSize.size}}
+                                  <span *ngIf="numbers?.datasetsSize && !numbers?.datasetsLinkedSize"
+                                        class="uk-text-bold">{{numbers.datasetsSize.number|number}}{{numbers.datasetsSize.size}}
                                     research data</span>
                                 </span>
-                              <span *ngIf="type=='software' && showSoftware && (softwareSize ||softwareLinkedSize)">
-                                  <span *ngIf="softwareLinkedSize">
-                                        <span class="uk-text-bold
-                                    ">{{softwareLinkedSize.number|number}}{{softwareLinkedSize.size}} research
-                                          software</span>  interlinked with publications</span>
-                                  <span *ngIf="softwareSize && !softwareLinkedSize"
-                                        class="uk-text-bold">{{softwareSize.number|number}}{{softwareSize.size}}
+                              <span
+                                  *ngIf="type=='software' && showSoftware && (numbers?.softwareSize || numbers?.softwareLinkedSize)">
+                                  <span *ngIf="numbers?.softwareLinkedSize">
+                                    <span
+                                        class="uk-text-bol ">{{numbers.softwareLinkedSize.number|number}}{{numbers.softwareLinkedSize.size}}
+                                      research
+                                      software</span>  interlinked with publications</span>
+                                  <span *ngIf="numbers?.softwareSize && !numbers?.softwareLinkedSize"
+                                        class="uk-text-bold">{{numbers.softwareSize.number|number}}{{numbers.softwareSize.size}}
                                     research software</span>
                                 </span>
                               <span *ngIf="type=='persistent'">
                                   <span>Persistent identifiers and registries</span>
                                 </span>
-                              <span *ngIf="type=='funder' && showProjects && fundersSize">
-                                  <span class="uk-text-bold">{{fundersSize.number|number}}{{fundersSize.size}}
+                              <span *ngIf="type=='funder' && showProjects && numbers?.fundersSize">
+                                  <span
+                                      class="uk-text-bold">{{numbers.fundersSize.number|number}}{{numbers.fundersSize.size}}
                                     funders</span><span> and</span>
-                                  <span class="uk-text-bold"> {{projectsSize.number|number}}{{projectsSize.size}} funded grants</span>
+                                  <span
+                                      class="uk-text-bold"> {{numbers.projectsSize.number|number}}{{numbers.projectsSize.size}}
+                                    funded grants</span>
                                 </span>
 
                             </h1>
@@ -168,26 +175,26 @@
      class="uk-section graph-background">
   <div class="uk-container">
     <div class="uk-flex uk-flex-top uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
-        <div class="uk-flex-last@m">
-          <div [class.lines-10]="!readMore" class="uk-margin-bottom multi-line-ellipsis">
-            <helper [texts]="pageContents['right']"></helper>
-          </div>
-          <div *ngIf="!readMore" class="uk-text-center clickable" (click)="readMore = true">
-            <span>Read more<span class="space" uk-icon="chevron-down"></span></span>
-          </div>
-          <div *ngIf="readMore" class="uk-text-center clickable" (click)="readMore = false">
-            <span>Read less<span class="space" uk-icon="chevron-up"></span></span>
-          </div>
+      <div class="uk-flex-last@m">
+        <div [class.lines-10]="!readMore" class="uk-margin-bottom multi-line-ellipsis">
+          <helper [texts]="pageContents['right']"></helper>
         </div>
-        <div class="uk-flex uk-flex-bottom">
-          <div class="uk-width-1-3 uk-width-1-2@m">
-            <img src="assets/explore-assets/graph.svg">
-          </div>
-          <div class="uk-padding uk-width-1-2">
-            <img src="assets/common-assets/logo-large-graph.png">
-          </div>
+        <div *ngIf="!readMore" class="uk-text-center clickable" (click)="readMore = true">
+          <span>Read more<span class="space" uk-icon="chevron-down"></span></span>
+        </div>
+        <div *ngIf="readMore" class="uk-text-center clickable" (click)="readMore = false">
+          <span>Read less<span class="space" uk-icon="chevron-up"></span></span>
         </div>
       </div>
+      <div class="uk-flex uk-flex-bottom">
+        <div class="uk-width-1-3 uk-width-1-2@m">
+          <img src="assets/explore-assets/graph.svg">
+        </div>
+        <div class="uk-padding uk-width-1-2">
+          <img src="assets/common-assets/logo-large-graph.png">
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 <div *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
@@ -195,6 +202,11 @@
 <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
         [texts]="pageContents['bottom']"></helper>
 <div class="uk-section uk-padding-remove-bottom">
+  <h3 class="uk-text-center uk-margin-medium-bottom">Our growing <span class="uk-text-bold">Community</span></h3>
+  <numbers #numbersComponent [defaultInit]="false" backgroundClass="numbers-background"
+           (results)="numbers = $event"></numbers>
+</div>
+<!--<div class="uk-section uk-padding-remove-bottom">
   <div class="uk-container uk-text-center uk-margin-medium-bottom">
     <div class="uk-margin-medium uk-flex-center">
       <div class="uk-first-column">
@@ -285,7 +297,7 @@
       </div>
     </div>
   </div>
-</div>
+</div>-->
 <helper *ngIf="pageContents && pageContents['left'] && pageContents['left'].length > 0"
         [texts]="pageContents['left']"></helper>
 <div class="uk-section-muted"
diff --git a/explore/src/app/home/home.component.ts b/explore/src/app/home/home.component.ts
index cb1c8993..9b23029a 100644
--- a/explore/src/app/home/home.component.ts
+++ b/explore/src/app/home/home.component.ts
@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {Subscription} from 'rxjs';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Location} from '@angular/common';
@@ -21,6 +21,7 @@ import {SearchResearchResultsService} from "../openaireLibrary/services/searchRe
 import {HelperService} from "../openaireLibrary/utils/helper/helper.service";
 import {Filter} from "../openaireLibrary/searchPages/searchUtils/searchHelperClasses.class";
 import {properties} from "../../environments/environment";
+import {Numbers, NumbersComponent} from "../openaireLibrary/sharedComponents/numbers/numbers.component";
 
 @Component({
   selector: 'home',
@@ -114,19 +115,7 @@ export class HomeComponent {
   public searchFields: SearchFields = new SearchFields();
   public errorCodes: ErrorCodes = new ErrorCodes();
   public routerHelper: RouterHelper = new RouterHelper();
-  
-  public publicationsSize: any = null;
-  public datasetsSize: any = null;
-  public datasetsLinkedSize: any = null;
-  public softwareLinkedSize: any = null;
-  public softwareSize: any = null;
-  public otherSize: any = null;
-  public fundersSize: any = null;
-  public projectsSize: any = null;
-  public datasourcesSize: any = null;
-  
-  private numResults: number = 2;
-  
+  public numbers: Numbers;
   showPublications: boolean = false;
   showDatasets: boolean = false;
   showSoftware: boolean = false;
@@ -159,6 +148,7 @@ export class HomeComponent {
     filterOperator: "or"
   };
   public pageContents = null;
+  @ViewChild("numbersComponent") numbersComponent: NumbersComponent;
   
   constructor(
     private route: ActivatedRoute,
@@ -237,7 +227,7 @@ export class HomeComponent {
             if (this.showOrp) {
               this.resultTypes.values.push({name: "Other research products", id: "other", selected: true, number: 0});
             }
-            this.getNumbers();
+            this.numbersComponent.init(this.showDatasets, this.showSoftware, this.showPublications, this.showDatasets, this.showSoftware, this.showOrp, this.showProjects, this.showDataProviders);
           }
         },
         error => {
@@ -253,119 +243,6 @@ export class HomeComponent {
     }
   }
   
-  private getNumbers() {
-    if (this.showPublications) {
-      this.subs.push(this._searchResearchResultsService.numOfSearchResults("publication", "", this.properties).subscribe(
-        data => {
-          if (data && data != null && data > 0) {
-            this.publicationsSize = NumberUtils.roundNumber(data);
-            
-          }
-        },
-        err => {
-          //console.log(err);
-          this.handleError("Error getting number of publications", err);
-        }
-      ));
-    }
-    if (this.showDatasets) {
-      this.subs.push(this._searchResearchResultsService.numOfSearchResults("dataset", "", this.properties).subscribe(
-        data => {
-          if (data && data != null && data > 0) {
-            this.datasetsSize = NumberUtils.roundNumber(data);
-          }
-        },
-        err => {
-          //console.log(err);
-          this.handleError("Error getting number of research data", err);
-        }
-      ));
-      this.subs.push(this._searchResearchResultsService.numOfSearchResultsLinkedToPub("dataset", this.properties).subscribe(
-        data => {
-          if (data && data != null && data > 0) {
-            this.datasetsLinkedSize = NumberUtils.roundNumber(data);
-          }
-        },
-        err => {
-          //console.log(err);
-          this.handleError("Error getting number of linkedresearch data", err);
-        }
-      ));
-      
-    }
-    if (this.showSoftware) {
-      this.subs.push(this._searchResearchResultsService.numOfSearchResults("software", "", this.properties).subscribe(
-        data => {
-          if (data && data > 0) {
-            this.softwareSize = NumberUtils.roundNumber(data);
-          } else {
-            this.showSoftware = false;
-          }
-        },
-        err => {
-          this.handleError("Error getting number of software data", err);
-        }
-      ));
-      this.subs.push(this._searchResearchResultsService.numOfSearchResultsLinkedToPub("software", this.properties).subscribe(
-        data => {
-          if (data && data != null && data > 0) {
-            this.softwareLinkedSize = NumberUtils.roundNumber(data);
-          }
-        },
-        err => {
-          //console.log(err);
-          this.handleError("Error getting number of linked software", err);
-        }
-      ));
-    }
-    if (this.showOrp) {
-      this.subs.push(this._searchResearchResultsService.numOfSearchResults("other", "", this.properties).subscribe(
-        data => {
-          if (data && data > 0) {
-            this.otherSize = NumberUtils.roundNumber(data);
-          } else {
-            this.showOrp = false;
-          }
-        },
-        err => {
-          this.handleError("Error getting number of software data", err);
-        }
-      ));
-    }
-    if (this.showProjects) {
-      this.subs.push(this._refineFieldResultsService.getRefineFieldsResultsByEntityName(["funder"], "project", this.properties).subscribe(
-        data => {
-          
-          
-          if (data[0] && data[0] > 0) {
-            this.projectsSize = NumberUtils.roundNumber(data[0]);
-          }
-          if (data[1].length > 0 && data[1][0].filterId == "funder" && data[1][0].values) {
-            this.fundersSize = NumberUtils.roundNumber(data[1][0].values.length);
-          }
-          
-        },
-        err => {
-          //console.log(err);
-          this.handleError("Error getting 'funder' field results of projects", err);
-        }));
-    }
-    if (this.showDataProviders) {
-      this.subs.push(this._searchDataprovidersService.numOfSearchDataproviders("", this.properties).subscribe(
-        data => {
-          if (data && data != null && data > 0) {
-            this.datasourcesSize = NumberUtils.roundNumber(data);
-          }
-          
-        },
-        err => {
-          //console.log(err);
-          this.handleError("Error getting number of content providers", err);
-        }
-      ));
-    }
-  }
-  
   private handleError(message: string, error) {
     console.error("Home Page: " + message, error);
   }
diff --git a/explore/src/app/home/home.module.ts b/explore/src/app/home/home.module.ts
index 51433d6d..779c5854 100644
--- a/explore/src/app/home/home.module.ts
+++ b/explore/src/app/home/home.module.ts
@@ -26,6 +26,7 @@ import {QuickSelectionsModule} from "../openaireLibrary/searchPages/searchUtils/
 import {IconsModule} from "../openaireLibrary/utils/icons/icons.module";
 import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
 import {arrow_right, book, cog, database, earth} from "../openaireLibrary/utils/icons/icons";
+import {NumbersModule} from "../openaireLibrary/sharedComponents/numbers/numbers.module";
 
  @NgModule({
    imports: [
@@ -38,7 +39,7 @@ import {arrow_right, book, cog, database, earth} from "../openaireLibrary/utils/
      HomeRoutingModule,
      HelperModule,
      ErrorMessagesModule,
-     SEOServiceModule, OtherPortalsModule, EntitiesSelectionModule, QuickSelectionsModule, IconsModule
+     SEOServiceModule, OtherPortalsModule, EntitiesSelectionModule, QuickSelectionsModule, IconsModule, NumbersModule
    ],
   declarations: [
     HomeComponent
diff --git a/explore/src/assets/explore-custom.css b/explore/src/assets/explore-custom.css
index df766e5d..443dc714 100644
--- a/explore/src/assets/explore-custom.css
+++ b/explore/src/assets/explore-custom.css
@@ -126,7 +126,7 @@
 }
 
 .numbers-background {
-    background: transparent url('explore-assets/numbers_background_pattern.svg') 0 0  repeat-x padding-box;
+    background: transparent url('explore-assets/numbers_background_pattern.svg') repeat-x center bottom;
 }
 
 .number {