diff --git a/src/app/learn-how/learn-how.component.css b/src/app/learn-how/learn-how.component.css
index ae10e14..8386719 100644
--- a/src/app/learn-how/learn-how.component.css
+++ b/src/app/learn-how/learn-how.component.css
@@ -87,168 +87,6 @@
   .process .fifth {
     padding: 16% 10% 0 2%;
   }
-
-  .how .first > div:first-child {
-    position: relative;
-  }
-
-  .how .first > div:first-child:after {
-    content: "we";
-    text-align: center;
-    padding-bottom: 5%;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/1.svg");
-    right: -21%;
-    top: 33%;
-    width: 20%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: bottom center;
-  }
-
-  .how .second > div:first-child {
-    position: relative;
-    padding: 0 22% 0 22%;
-  }
-
-  .how .second > div:first-child:after {
-    content: "and";
-    text-align: center;
-    padding-bottom: 5%;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/2.svg");
-    right: -10%;
-    top: 31%;
-    width: 30%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: bottom center;
-  }
-
-  .how .third {
-    position:  relative;
-  }
-
-  .how .third > div:first-child {
-    padding: 0 12% 0 12%;
-  }
-
-  .how .third:after {
-    content: "on which";
-    padding-right: 30%;
-    padding-top: 5%;
-    padding-bottom: 5%;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/3.svg");
-    bottom: 6%;
-    left: 6%;
-    transform: translateY(100%);
-    width: 55%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .how .fourth {
-    padding: 10% 3% 0 3%;
-  }
-
-  .how .fourth > div:first-child {
-    position:  relative;
-    padding: 0 15% 0 15%;
-  }
-
-  .how .fourth> div:first-child:after {
-    content: "and";
-    text-align: center;
-    padding-bottom: 5%;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/4.svg");
-    left: -18%;
-    top: 35%;
-    width: 30%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: bottom center;
-  }
-
-  .how .fifth {
-    padding: 10% 2% 0 2%;
-  }
-
-  .how .fifth > div:first-child {
-    position:  relative;
-  }
-
-  .how .fifth > div:first-child:after {
-    content: "We";
-    text-align: center;
-    padding-bottom: 5%;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/5.svg");
-    left: -35%;
-    top: 36%;
-    width: 30%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: bottom center;
-  }
-
-  .how .sixth {
-    padding: 10% 5% 0 0;
-  }
-
-  .how .sixth > div:first-child {
-    padding: 0 15% 0 15%;
-  }
-
-  .how .final {
-    padding: 10% 20% 0 20%;
-  }
-
-  .how .final > div:first-child {
-    position: relative;
-  }
-
-  .how .final > div:first-child:before {
-    content: "";
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/6.svg");
-    left: -20%;
-    top: -20%;
-    height: 70%;
-    width: 30%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: bottom center;
-  }
-
-  .how .final > div:first-child:after {
-    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/how/circle.png");
-    right: -220px;
-    top: -20%;
-    width: 300px;
-    padding: 8% 0 5% 220px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: bottom center;
-  }
-}
-
-@media only screen and (min-width: 960px) {
-  .how .third:after {
-    bottom: -6%;
-  }
-}
-
-@media only screen and (min-width: 1200px) {
-  .how .third:after {
-    bottom: -10%;
-    left: 25%;
-    width: 25%;
-  }
 }
 
 @media only screen and (max-width: 639px) {
@@ -356,140 +194,4 @@
   .process .fifth {
     padding: 20% 7.6% 0 16%;
   }
-
-  .how .first {
-    position: relative;
-    padding-bottom: 30%;
-  }
-
-  .how .first:after {
-    content: "we";
-    text-align: center;
-    padding: 25px 105px 25px 0;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/3.svg");
-    left: 26%;
-    top: 72%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .how .second {
-    position: relative;
-    padding: 0 15% 30% 15%;
-  }
-
-  .how .second:after {
-    content: "and";
-    text-align: center;
-    padding: 25px 105px 25px 0;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/3.svg");
-    left: 25%;
-    top: 70%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .how .third {
-    position:  relative;
-    padding: 0 5% 30% 5%;
-  }
-
-  .how .third:after {
-    content: "on which";
-    text-align: center;
-    padding: 25px 105px 25px 0;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/3.svg");
-    left: 17%;
-    top: 75%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .how .fourth {
-    position:  relative;
-    padding: 0 0 30% 0;
-  }
-
-  .how .fourth > div:first-child {
-    padding: 0 10% 0 10%;
-  }
-
-  .how .fourth:after {
-    content: "and";
-    text-align: center;
-    padding: 25px 105px 25px 0;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/3.svg");
-    left: 26%;
-    top: 79%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .how .fifth {
-    position:  relative;
-    padding: 0 2% 30% 2%;
-  }
-
-  .how .fifth:after {
-    content: "We";
-    text-align: center;
-    padding: 25px 105px 25px 0;
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/3.svg");
-    left: 27%;
-    top: 76%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .how .sixth {
-    padding: 0 5% 30% 0;
-  }
-
-  .how .sixth > div:first-child {
-    padding: 0 15% 0 15%;
-  }
-
-  .how .final {
-    padding: 20% 0 20% 0;
-  }
-
-  .how .final > div:first-child {
-    position: relative;
-  }
-
-  .how .final > div:first-child:before {
-    content: "";
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/green-arrows/6.svg");
-    left: 32%;
-    top: -80%;
-    height: 70%;
-    width: 30%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
-
-  .how .final > div:first-child:after {
-    content: "We make visualizations, graphs, reports and deliver all in a customisable tool";
-    position: absolute;
-    background-image: url("/assets/monitor-assets/about/how/circle.png");
-    left: -62%;
-    top: 85%;
-    width: 300px;
-    padding: 12% 0 0 70%;
-    background-size: contain;
-    background-repeat: no-repeat;
-    background-position: center;
-  }
 }
diff --git a/src/app/learn-how/learn-how.component.html b/src/app/learn-how/learn-how.component.html
index f892306..4c5a525 100644
--- a/src/app/learn-how/learn-how.component.html
+++ b/src/app/learn-how/learn-how.component.html
@@ -91,66 +91,8 @@
         Simplify research tracking & monitoring
       </h6>
     </div>
-    <div class="how uk-margin-large-top uk-h6">
-      <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s first uk-text-muted">
-          <div>
-            <img src="../../assets/monitor-assets/about/how/1.png">
-          </div>
-          <div class="uk-text-center">
-            <span class="uk-text-bold uk-text-uppercase">Starting</span> from existing<br>research-related data sources
-          </div>
-        </div>
-        <div class="uk-width-1-3@s second uk-text-muted">
-          <div>
-            <img src="../../assets/monitor-assets/about/how/2.png">
-          </div>
-        </div>
-        <div class="uk-width-1-3@s third uk-text-muted">
-          <div>
-            <img src="../../assets/monitor-assets/about/how/3.png">
-          </div>
-          <div class="uk-text-center">
-            build an open, global<br>and trusted Research graph
-          </div>
-        </div>
-      </div>
-      <div class="uk-flex uk-flex-wrap">
-        <div class="uk-width-1-3@s fourth uk-flex-last@s uk-text-muted">
-          <div>
-            <img src="../../assets/monitor-assets/about/how/4.png">
-          </div>
-          <div class="uk-text-center">
-            we perform <span class="uk-text-bold uk-text-uppercase">Statistical Analysis</span> and produce
-            <span class="portal-color">Open Science Indicators</span>
-          </div>
-        </div>
-        <div class="uk-width-1-3@s fifth uk-text-muted">
-          <div>
-            <img src="../../assets/monitor-assets/about/how/5.png">
-          </div>
-          <div class="uk-text-center">
-            furthermore <span class="uk-text-bold uk-text-uppercase">Network<br>Analysis</span> producing
-            <span class="portal-color">Collaboration Indicators</span>
-          </div>
-        </div>
-        <div class="uk-width-1-3@s sixth uk-flex-first@s uk-text-muted">
-          <div>
-            <img src="../../assets/monitor-assets/about/how/6.png">
-          </div>
-          <div class="uk-text-center">
-            Often combine with external data
-            (patents, social, company) and
-            perform <span class="uk-text-bold uk-text-uppercase">Impact Analysis</span> to
-            produce <span class="portal-color">Innovation Indicators</span>
-          </div>
-        </div>
-      </div>
-      <div class="final uk-text-muted">
-        <div>
-          <img src="../../assets/monitor-assets/about/how/7.png">
-        </div>
-      </div>
+    <div class="uk-margin-large-top">
+      <methodology></methodology>
     </div>
   </div>
 </div>
diff --git a/src/app/learn-how/learn-how.module.ts b/src/app/learn-how/learn-how.module.ts
index 60a1d75..d3b8aea 100644
--- a/src/app/learn-how/learn-how.module.ts
+++ b/src/app/learn-how/learn-how.module.ts
@@ -10,11 +10,12 @@ import {GifSliderModule} from "../openaireLibrary/utils/gif-slider/gif-slider.mo
 import {HelperModule} from "../openaireLibrary/utils/helper/helper.module";
 import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
 import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
+import {MethodologyModule} from "../openaireLibrary/monitor/methodology/methodology.module";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, LearnHowRoutingModule, GifSliderModule, HelperModule,
-    Schema2jsonldModule, SEOServiceModule
+    Schema2jsonldModule, SEOServiceModule, MethodologyModule
   ],
   declarations: [
     LearnHowComponent