diff --git a/landingPages/annotation/annotation.component.ts b/landingPages/annotation/annotation.component.ts
index fa3cbf5f..ef8c72fa 100644
--- a/landingPages/annotation/annotation.component.ts
+++ b/landingPages/annotation/annotation.component.ts
@@ -1,7 +1,7 @@
 import {Component, Input, OnDestroy, OnInit} from "@angular/core";
-import {AnnotationService} from "./annotation.service";
-import {DomSanitizer} from "@angular/platform-browser";
+import {Annotation, AnnotationService} from "./annotation.service";
 import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
+import {EnvProperties} from "../../utils/properties/env-properties";
 
 @Component({
   selector: 'b2note',
@@ -37,15 +37,30 @@ import {ResultLandingInfo} from "../../utils/entities/resultLandingInfo";
           <span>add annotation</span>
         </button>
       </form>
+      <ul class="uk-list uk-list-divider">
+        <li *ngFor="let annotation of annotations.slice(0, visibleAnnotations)" uk-grid class="uk-flex uk-flex-top uk-margin-remove-left">
+          <div [ngClass]="annotation.type" class="uk-width-auto">{{annotation.type}}</div>
+          <div class="uk-width-auto">{{annotation.text}}</div>
+          <ul class="uk-width-expand uk-list uk-margin-remove-top" *ngIf="annotation.urls">
+            <li *ngFor="let url of annotation.urls.slice(0, urlSize)"><a [href]="url" target="_blank">{{url}}</a></li>
+            <li *ngIf="urlSize < annotation.urls.length"><a (click)="urlSize = annotation.urls.length">+ {{annotation.urls.length - urlSize}} more</a></li>
+          </ul>
+        </li>
+      </ul>
+      <div *ngIf="visibleAnnotations < annotations.length" class="uk-margin-medium-top uk-text-center">
+        <button class="uk-button uk-button-default" (click)="visibleAnnotations = (visibleAnnotations + annotationSize)">Load More</button>
+      </div>
     </div>
-    <div [class.uk-hidden]="!visible" class="widget-container">
-      <!--Close button, should be bound to hide the widget-->
-      <button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
-        <span aria-hidden="true">×</span>
-      </button>
-      <!--The glorious iframe with the running app!-->
-      <iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
-      </iframe>
+    <div [class.uk-hidden]="!visible"  class="widget">
+      <div class="widget-container">
+        <!--Close button, should be bound to hide the widget-->
+        <button type="button" class="close" aria-label="Close" (click)="toggleAnnotation($event)">
+          <span aria-hidden="true">×</span>
+        </button>
+        <!--The glorious iframe with the running app!-->
+        <iframe id="b2note_iframe" name="b2note_iframe" class="b2note-iframe">
+        </iframe>
+      </div>
     </div>`,
   styleUrls: ['annotation.css']
 })
@@ -55,17 +70,22 @@ export class AnnotationComponent implements OnInit, OnDestroy {
   public landingInfo: ResultLandingInfo = null;
   @Input()
   public id: string = null;
+  @Input()
+  public properties: EnvProperties;
   public url: string = null;
   public pid: string = null;
   public keywords: string[] = [];
   public visible: boolean = false;
+  public annotations: Annotation[] = [];
+  public annotationSize: number = 10;
+  public visibleAnnotations: number;
+  public urlSize: number = 3;
   
-  
-  constructor(private annotationService: AnnotationService,
-              private sanitizer: DomSanitizer) {
+  constructor(private annotationService: AnnotationService) {
   }
   
   ngOnInit(): void {
+    this.visibleAnnotations = this.annotationSize;
     if (typeof window !== "undefined") {
       let id = this.id;
       this.url = window.location.href;
@@ -73,20 +93,11 @@ export class AnnotationComponent implements OnInit, OnDestroy {
         id = this.landingInfo.deletedByInferenceIds[0];
         this.url = this.url.replace(this.id, id);
       }
-      if (this.landingInfo.identifiers.size > 0) {
-        if (this.landingInfo.identifiers.get('doi')) {
-          this.pid = this.landingInfo.identifiers.get('doi')[0];
-        } else {
-          const key: string = this.landingInfo.identifiers.keys().next().value;
-          if (key) {
-            this.pid = this.landingInfo.identifiers.get(key)[0];
-          }
-        }
-      } else {
-        this.pid = id;
-      }
-      console.log(this.pid);
-      console.log(this.url);
+      this.pid = this.url;
+      this.annotationService.getAllAnnotations(this.properties, this.url).subscribe(annotations => {
+        this.annotations = annotations;
+        console.log(this.annotations);
+      });
     }
   }
   
diff --git a/landingPages/annotation/annotation.css b/landingPages/annotation/annotation.css
index ea51f25b..d99e168f 100644
--- a/landingPages/annotation/annotation.css
+++ b/landingPages/annotation/annotation.css
@@ -1,8 +1,20 @@
+.widget {
+    position: fixed;
+    z-index: 10000;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+
 .widget-container {
     position: absolute;
-    right: 30px;
-    top:40%;
-    z-index: 1050;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    /*right: 30px;
+    top:40%;*/
+    z-index: 10001;
     padding: 19px;
     margin-bottom: 20px;
     box-shadow: black 0 0 32px;
diff --git a/landingPages/annotation/annotation.module.ts b/landingPages/annotation/annotation.module.ts
index c767558f..6ae707c5 100644
--- a/landingPages/annotation/annotation.module.ts
+++ b/landingPages/annotation/annotation.module.ts
@@ -1,7 +1,9 @@
 import {NgModule} from "@angular/core";
 import {AnnotationComponent} from "./annotation.component";
+import {CommonModule} from "@angular/common";
 
 @NgModule({
+    imports: [CommonModule],
     declarations: [AnnotationComponent],
     exports: [AnnotationComponent]
 })
diff --git a/landingPages/annotation/annotation.service.ts b/landingPages/annotation/annotation.service.ts
index 7e69fbb2..6f0c7c72 100644
--- a/landingPages/annotation/annotation.service.ts
+++ b/landingPages/annotation/annotation.service.ts
@@ -1,6 +1,16 @@
 import {Injectable} from "@angular/core";
 import {HttpClient} from "@angular/common/http";
 import {Observable} from "rxjs";
+import {EnvProperties} from "../../utils/properties/env-properties";
+import {map} from "rxjs/operators";
+import {response} from "express";
+import {el} from "@angular/platform-browser/testing/src/browser_util";
+
+export interface Annotation {
+    text: string;
+    type: 'semantic' | 'keyword' | 'comment';
+    urls?: string[];
+}
 
 @Injectable({
     providedIn: "root"
@@ -11,9 +21,61 @@ export class AnnotationService {
     constructor(private http: HttpClient) {
     }
 
-    getAnnotations(annotation: any): Observable<any> {
-        return this.http.get('https://b2note.eudat.eu/interface_main.html?recordurl_tofeed=' +
-            encodeURIComponent(annotation.get('recordurl_tofeed').value) + '&pid_tofeed='
-            + encodeURIComponent(annotation.get('pid_tofeed').value));
+    getAllAnnotations(properties: EnvProperties, source: string): Observable<Annotation[]> {
+        let url = properties.b2noteAPIURL + 'annotations?type[]=semantic&type[]=keyword&type[]=comment&format=json-ld&download=false&target-source=' + encodeURIComponent(source);
+        return this.http.get<Annotation[]>(url).pipe(map((response: any[]) => {
+            return this.parseAnnotations(response);
+        }));
+    }
+    
+    private parseAnnotations(response: any[]): Annotation[] {
+        let annotations: Annotation[] = [];
+        if(response && response.length > 0) {
+            response.forEach(value => {
+                let body = value.body;
+                if(body.type === 'TextualBody') {
+                    if(body.purpose === 'tagging') {
+                        annotations.push({
+                            text: body.value,
+                            type: "keyword"
+                        });
+                    } else {
+                        annotations.push({
+                            text: body.value,
+                            type: "comment"
+                        });
+                    }
+                } else {
+                    let items = body.items;
+                    let urls: string[] = [];
+                    let text: string = null;
+                    items.forEach(item => {
+                        if(item.type === 'SpecificResource') {
+                            urls.push(item.source);
+                        } else if(item.type === 'TextualBody') {
+                            text = item.value;
+                        }
+                    });
+                    annotations.push({
+                        text: text,
+                        type: "semantic",
+                        urls: urls
+                    });
+                }
+            });
+        }
+        return annotations.sort((a, b) => {
+            if(a.type === b.type) {
+                return 0;
+            } else if (a.type === 'semantic') {
+                return -1;
+            } else if(b.type === 'semantic') {
+                return 1;
+            } else if(a.type === 'keyword') {
+                return  -1;
+            } else if(b.type === 'keyword') {
+                return  1;
+            }
+        });
     }
 }
\ No newline at end of file
diff --git a/landingPages/result/resultLanding.component.html b/landingPages/result/resultLanding.component.html
index 28f4326b..9cbf19b5 100644
--- a/landingPages/result/resultLanding.component.html
+++ b/landingPages/result/resultLanding.component.html
@@ -192,7 +192,7 @@
                   class="uk-margin-small-left uk-text-small uk-text-baseline uk-text-muted">Powered by OpenAIRE Open Research Graph</span>
             </div>
             <div  *ngIf=" properties.environment === 'development' && resultLandingInfo" class="uk-margin-medium-top">
-              <b2note [id]="id"
+              <b2note [id]="id" [properties]="properties"
                       [landingInfo]="resultLandingInfo"></b2note>
             </div>
             <!--<ul #accordions class="custom-accordion" uk-accordion>