diff --git a/monitor/methodology/methodology.component.css b/monitor/methodology/methodology.component.css
new file mode 100644
index 00000000..854a88df
--- /dev/null
+++ b/monitor/methodology/methodology.component.css
@@ -0,0 +1,301 @@
+@media only screen and (min-width: 640px) {
+  .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) {
+  .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/monitor/methodology/methodology.component.ts b/monitor/methodology/methodology.component.ts
new file mode 100644
index 00000000..5a494cbb
--- /dev/null
+++ b/monitor/methodology/methodology.component.ts
@@ -0,0 +1,72 @@
+import {Component} from "@angular/core";
+
+@Component({
+  selector: 'methodology',
+  template: `
+    <div class="how 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>
+  `,
+  styleUrls: ['methodology.component.css']
+})
+export class MethodologyComponent {
+
+}
diff --git a/monitor/methodology/methodology.module.ts b/monitor/methodology/methodology.module.ts
new file mode 100644
index 00000000..0ca6a7d9
--- /dev/null
+++ b/monitor/methodology/methodology.module.ts
@@ -0,0 +1,12 @@
+import {NgModule} from "@angular/core";
+import {CommonModule} from "@angular/common";
+import {MethodologyComponent} from "./methodology.component";
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [MethodologyComponent],
+  exports: [MethodologyComponent]
+})
+export class MethodologyModule {
+
+}