diff --git a/.gitignore b/.gitignore
index 40ed268df7881f8c939a0f75606ed1e556690581..8080a1d923d1cec088b9e67fdc46dd6a0806bb68 100644
--- a/.gitignore
+++ b/.gitignore
@@ -227,6 +227,14 @@ deployment/playbooks/templates/vitamui/conf/*/*.jks
 # Imported vitamui app vitam truststore
 deployment/playbooks/templates/vitamui/conf/*/*.p12
 
+# Vitam development configuration
+
+###################################
+# Vitam development configuration #
+###################################
+api/api-referential/referential-internal/src/main/config/dev-vitam/*
+api/api-iam/iam-internal/src/main/config/dev-vitam/*
+
 ##########################################
 # Mongo workspace entry-point #
 ##########################################
diff --git a/api/api-iam/iam-internal/src/main/config/dev-vitam/access-external-client.conf b/api/api-iam/iam-internal/src/main/config/dev-vitam/access-external-client.conf
old mode 100644
new mode 100755
index fd7adb31f89032e9d853e20a93d6d44721761c50..ca4c9f08baf873d9aa9785cad2653545cdc0b1fa
--- a/api/api-iam/iam-internal/src/main/config/dev-vitam/access-external-client.conf
+++ b/api/api-iam/iam-internal/src/main/config/dev-vitam/access-external-client.conf
@@ -3,9 +3,9 @@ serverPort: 8444
 secure: true
 sslConfiguration :
  keystore :
-  - keyPath:  src/main/config/dev-vitam/keystore_ihm-demo.p12
+  - keyPath: keystore_ihm-demo.p12
     keyPassword: azerty4
  truststore :
-  - keyPath: src/main/config/dev-vitam/truststore_ihm-demo.jks
+  - keyPath: truststore_ihm-demo.jks
     keyPassword: azerty10
 hostnameVerification: true
diff --git a/api/api-iam/iam-internal/src/main/config/dev-vitam/ingest-external-client.conf b/api/api-iam/iam-internal/src/main/config/dev-vitam/ingest-external-client.conf
old mode 100644
new mode 100755
index 8bceab662d6286ba84247e93ec23cb75d9e9f852..7663d51796e848dd122012666636168b048fe99e
--- a/api/api-iam/iam-internal/src/main/config/dev-vitam/ingest-external-client.conf
+++ b/api/api-iam/iam-internal/src/main/config/dev-vitam/ingest-external-client.conf
@@ -3,9 +3,9 @@ serverPort: 8443
 secure: true
 sslConfiguration :
  keystore :
-  - keyPath: src/main/config/dev-vitam/keystore_ihm-demo.p12
+  - keyPath: keystore_ihm-demo.p12
     keyPassword: azerty4
  truststore :
-  - keyPath: src/main/config/dev-vitam/truststore_ihm-demo.jks
+  - keyPath: truststore_ihm-demo.jks
     keyPassword: azerty10
 hostnameVerification: true
diff --git a/api/api-iam/iam-internal/src/main/config/dev-vitam/keystore_ihm-demo.p12 b/api/api-iam/iam-internal/src/main/config/dev-vitam/keystore_ihm-demo.p12
old mode 100755
new mode 100644
index 6307b111d22ae85d636ea1a7d9f2d1fd26727cdd..652b1b4c5a06351fd936695a604a0024eab3cd1d
Binary files a/api/api-iam/iam-internal/src/main/config/dev-vitam/keystore_ihm-demo.p12 and b/api/api-iam/iam-internal/src/main/config/dev-vitam/keystore_ihm-demo.p12 differ
diff --git a/api/api-iam/iam-internal/src/main/config/dev-vitam/truststore_ihm-demo.jks b/api/api-iam/iam-internal/src/main/config/dev-vitam/truststore_ihm-demo.jks
old mode 100755
new mode 100644
index cc137286b97dfba8fa84a03aaed764c9c5b7e7dc..d533f7cfe83e4a29c67eff203fecb23f9e409137
Binary files a/api/api-iam/iam-internal/src/main/config/dev-vitam/truststore_ihm-demo.jks and b/api/api-iam/iam-internal/src/main/config/dev-vitam/truststore_ihm-demo.jks differ
diff --git a/api/api-referential/referential-internal/src/main/config/dev-vitam/access-external-client.conf b/api/api-referential/referential-internal/src/main/config/dev-vitam/access-external-client.conf
old mode 100644
new mode 100755
index 6e4a893566cf1853588be7518a17eb2cf2d5167a..ca4c9f08baf873d9aa9785cad2653545cdc0b1fa
--- a/api/api-referential/referential-internal/src/main/config/dev-vitam/access-external-client.conf
+++ b/api/api-referential/referential-internal/src/main/config/dev-vitam/access-external-client.conf
@@ -3,9 +3,9 @@ serverPort: 8444
 secure: true
 sslConfiguration :
  keystore :
-  - keyPath: src/main/config/dev-vitam/keystore_ihm-demo.p12
-    keyPassword: FaKzJrnQFxFe3D2d
+  - keyPath: keystore_ihm-demo.p12
+    keyPassword: azerty4
  truststore :
-  - keyPath: src/main/config/dev-vitam/truststore_ihm-demo.jks
-    keyPassword: K8GeuGNjfbFB66JG
+  - keyPath: truststore_ihm-demo.jks
+    keyPassword: azerty10
 hostnameVerification: true
diff --git a/api/api-referential/referential-internal/src/main/config/dev-vitam/ingest-external-client.conf b/api/api-referential/referential-internal/src/main/config/dev-vitam/ingest-external-client.conf
old mode 100644
new mode 100755
index 8bceab662d6286ba84247e93ec23cb75d9e9f852..7663d51796e848dd122012666636168b048fe99e
--- a/api/api-referential/referential-internal/src/main/config/dev-vitam/ingest-external-client.conf
+++ b/api/api-referential/referential-internal/src/main/config/dev-vitam/ingest-external-client.conf
@@ -3,9 +3,9 @@ serverPort: 8443
 secure: true
 sslConfiguration :
  keystore :
-  - keyPath: src/main/config/dev-vitam/keystore_ihm-demo.p12
+  - keyPath: keystore_ihm-demo.p12
     keyPassword: azerty4
  truststore :
-  - keyPath: src/main/config/dev-vitam/truststore_ihm-demo.jks
+  - keyPath: truststore_ihm-demo.jks
     keyPassword: azerty10
 hostnameVerification: true
diff --git a/api/api-referential/referential-internal/src/main/config/dev-vitam/keystore_ihm-demo.p12 b/api/api-referential/referential-internal/src/main/config/dev-vitam/keystore_ihm-demo.p12
index fde3f6dab2b74420967a4a04d49eea423af9c22e..652b1b4c5a06351fd936695a604a0024eab3cd1d 100644
Binary files a/api/api-referential/referential-internal/src/main/config/dev-vitam/keystore_ihm-demo.p12 and b/api/api-referential/referential-internal/src/main/config/dev-vitam/keystore_ihm-demo.p12 differ
diff --git a/api/api-referential/referential-internal/src/main/config/dev-vitam/truststore_ihm-demo.jks b/api/api-referential/referential-internal/src/main/config/dev-vitam/truststore_ihm-demo.jks
index 9142cc15aa1057072d6ca3fe886d41aa29c15fa5..d533f7cfe83e4a29c67eff203fecb23f9e409137 100644
Binary files a/api/api-referential/referential-internal/src/main/config/dev-vitam/truststore_ihm-demo.jks and b/api/api-referential/referential-internal/src/main/config/dev-vitam/truststore_ihm-demo.jks differ
diff --git a/commons/commons-api/src/main/java/fr/gouv/vitamui/commons/api/domain/ServicesData.java b/commons/commons-api/src/main/java/fr/gouv/vitamui/commons/api/domain/ServicesData.java
index 51580f99fc84cab570725f5658766ed7daa66ef5..827cf36228d6326d59eb65123c81e78e15a8928a 100644
--- a/commons/commons-api/src/main/java/fr/gouv/vitamui/commons/api/domain/ServicesData.java
+++ b/commons/commons-api/src/main/java/fr/gouv/vitamui/commons/api/domain/ServicesData.java
@@ -310,8 +310,8 @@ public class ServicesData {
 
     public static final String ROLE_RUN_AUDITS = ROLE_PREFIX + "RUN_" + SERVICE_AUDITS;
 
-    //------------------------------------- PROBATIVE_VALUE --------------------------------------------    
-    
+    //------------------------------------- PROBATIVE_VALUE --------------------------------------------
+
     public static final String SERVICE_PROBATIVE_VALUE = "PROBATIVE_VALUE";
 
     public static final String ROLE_RUN_PROBATIVE_VALUE = "ROLE_RUN_" + SERVICE_PROBATIVE_VALUE;
@@ -326,6 +326,14 @@ public class ServicesData {
 
     public static final String ROLE_GET_ARCHIVE_PROFILES = ROLE_PREFIX + "GET_ARCHIVE_PROFILES";
 
+    //------------------------------------ API SUPERVISION -----------------------------------------
+
+    public static final String SERVICE_API_SUPERVISION_ROLE = "SUPERVISION_API";
+
+    public static final String ROLE_CREATE_SUPERVISION_ROLE = CREATE_ROLE_PREFIX + SERVICE_API_SUPERVISION_ROLE;
+    public static final String ROLE_GET_SUPERVISION_ROLE = GET_ROLE_PREFIX + SERVICE_API_SUPERVISION_ROLE;
+    public static final String ROLE_GET_ALL_SUPERVISION_ROLE = GET_ROLE_PREFIX + "ALL_" + SERVICE_API_SUPERVISION_ROLE;
+
     //@formatter:off
 
     /**
@@ -404,7 +412,11 @@ public class ServicesData {
 
             ROLE_RUN_AUDITS,
             ROLE_GET_OPERATIONS,
-            ROLE_RUN_PROBATIVE_VALUE
+            ROLE_RUN_PROBATIVE_VALUE,
+
+            ROLE_CREATE_SUPERVISION_ROLE,
+            ROLE_GET_SUPERVISION_ROLE,
+            ROLE_GET_ALL_SUPERVISION_ROLE
 
             );
 
@@ -507,7 +519,11 @@ public class ServicesData {
             ROLE_DELETE_ONTOLOGIES,
 
             ROLE_RUN_AUDITS,
-            ROLE_RUN_PROBATIVE_VALUE
+            ROLE_RUN_PROBATIVE_VALUE,
+
+            ROLE_CREATE_SUPERVISION_ROLE,
+            ROLE_GET_SUPERVISION_ROLE,
+            ROLE_GET_ALL_SUPERVISION_ROLE
 
             );
     //@formatter:on
diff --git a/deployment/scripts/mongod/1.0.0/101_iam_system_demo.js b/deployment/scripts/mongod/1.0.0/101_iam_system_demo.js
index e84c2d00f3962f9cc48af3ec966378c4919390a1..850f4e85c29ecce6ca3cc466173427a60c31f3c7 100644
--- a/deployment/scripts/mongod/1.0.0/101_iam_system_demo.js
+++ b/deployment/scripts/mongod/1.0.0/101_iam_system_demo.js
@@ -199,7 +199,8 @@ db.groups.insert({
         "system_audit",
         "system_secure",
         "system_dsl",
-        "system_probative_value"
+        "system_probative_value",
+         "system_supervision_api_profile"
 	],
 	"readonly": false,
 	"level": "",
diff --git a/deployment/scripts/mongod/1.0.0/207_iam_ref.js.j2 b/deployment/scripts/mongod/1.0.0/207_iam_ref.js.j2
index c4a5a51806f24f41a0265afdd522b8f009b05900..0f9a3c064fd65428f91635c9c113d186aba8ee63 100644
--- a/deployment/scripts/mongod/1.0.0/207_iam_ref.js.j2
+++ b/deployment/scripts/mongod/1.0.0/207_iam_ref.js.j2
@@ -407,6 +407,33 @@ db.profiles.insert({
 	 ]
 });
 
+db.profiles.insert({
+  "_id": "system_supervision_api_profile",
+  "identifier" : NumberInt(maxIdProfile++),
+  "name": "Supervision API Profile",
+  "description": "Supervision Profile api",
+  "tenantIdentifier": NumberInt({{ vitamui_platform_informations.proof_tenant }}),
+  "applicationName": "SUPERVISION_API_APP",
+  "level": "",
+  "enabled": true,
+  "readonly": false,
+  "customerId": "system_customer",
+  "roles": [
+  {
+    "name": "ROLE_CREATE_SUPERVISION_API"
+  },
+  {
+    "name": "ROLE_GET_SUPERVISION_API"
+  },
+  {
+    "name": "ROLE_GET_ALL_SUPERVISION_API"
+  },
+  {
+       "name": "ROLE_LOGBOOKS"
+  }
+   ]
+});
+
 db.sequences.updateOne({
     "_id": "profile_identifier"
 }, {
@@ -436,10 +463,11 @@ db.groups.updateOne( {
                 "system_audit",
                 "system_secure",
                 "system_dsl",
-                "system_probative_value"
+                "system_probative_value",
+                "system_supervision_api_profile"
         	]
         }
     }
 });
 
-print("END 207_iam_ref.js");
\ No newline at end of file
+print("END 207_iam_ref.js");
diff --git a/deployment/scripts/mongod/1.0.0/208_application_ref.js.j2 b/deployment/scripts/mongod/1.0.0/208_application_ref.js.j2
index 43afea9012a5465b44b03888046f980c7c8c26ce..03bba5a243fdab130afc42e74fd532135b60e27c 100644
--- a/deployment/scripts/mongod/1.0.0/208_application_ref.js.j2
+++ b/deployment/scripts/mongod/1.0.0/208_application_ref.js.j2
@@ -202,4 +202,22 @@ db.applications.insert({
     "target" : "_self"
 });
 
-print("END 208_application_ref.js");
\ No newline at end of file
+db.applications.insert({
+    "identifier" : "SUPERVISION_API_APP",
+{% if vitamui.referential.base_url is defined %}
+    "url": "{{ vitamui.referential.base_url }}/supervision-api",
+{% else %}
+    "url": "{{ url_prefix }}/referential/supervision-api",
+{% endif %}
+    "icon": "vitamui-icon vitamui-icon-api-supervision",
+    "name": "Supervision des APIs",
+    "category": "referential",
+    "position": NumberInt(16),
+    "hasCustomerList": false,
+    "hasTenantList": false,
+    "hasHighlight": false,
+    "tooltip": "Consultation des journaux des opérations d'entrées, de bases, d'éliminations",
+    "target": "_self"
+});
+
+print("END 208_application_ref.js");
diff --git a/deployment/scripts/mongod/1.0.0/210_security_ref.js.j2 b/deployment/scripts/mongod/1.0.0/210_security_ref.js.j2
index 59e6a1fc032cba716794ed7c370c7563c4d058e5..10e7c5fd5af6424136898c14825e29637f27e960 100644
--- a/deployment/scripts/mongod/1.0.0/210_security_ref.js.j2
+++ b/deployment/scripts/mongod/1.0.0/210_security_ref.js.j2
@@ -24,8 +24,10 @@ db.contexts.insert({
         "ROLE_GET_FILE_FORMATS", "ROLE_UPDATE_FILE_FORMATS", "ROLE_CREATE_FILE_FORMATS", "ROLE_DELETE_FILE_FORMATS",
         "ROLE_GET_CONTEXTS", "ROLE_UPDATE_CONTEXTS", "ROLE_CREATE_CONTEXTS",
         "ROLE_GET_SECURITY_PROFILES", "ROLE_UPDATE_SECURITY_PROFILES", "ROLE_CREATE_SECURITY_PROFILES", "ROLE_DELETE_SECURITY_PROFILES",
-        "ROLE_GET_OPERATIONS", "ROLE_RUN_AUDITS", "ROLE_RUN_PROBATIVE_VALUE"
+        "ROLE_GET_OPERATIONS", "ROLE_RUN_AUDITS", "ROLE_RUN_PROBATIVE_VALUE",
+        "ROLE_CREATE_SUPERVISION_API", "ROLE_GET_SUPERVISION_API", "ROLE_GET_ALL_SUPERVISION_API", "ROLE_LOGBOOKS"
+
     ]
 });
 
-print("END 210_security_ref.js");
\ No newline at end of file
+print("END 210_security_ref.js");
diff --git a/ui/package-lock.json b/ui/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..48e341a0954d5f8c2accf3a6731be28e5bb9c0de
--- /dev/null
+++ b/ui/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/ui/ui-frontend-common/package-lock.json b/ui/ui-frontend-common/package-lock.json
index 9c5e065d8ba5d818dde51bb48d137081b38fd0c5..158cf6b75c9652c1119893ea85cc354645dd260d 100644
--- a/ui/ui-frontend-common/package-lock.json
+++ b/ui/ui-frontend-common/package-lock.json
@@ -5431,9 +5431,43 @@
           "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
           "dev": true
         },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://nexus.teamdlab.com/repository/npm/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "^0.1.0"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://nexus.teamdlab.com/repository/npm/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "1.0.0",
+          "resolved": "https://nexus.teamdlab.com/repository/npm/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
+          "requires": {
+            "kind-of": "^6.0.0"
+          }
+        },
+        "is-descriptor": {
+          "version": "1.0.2",
+          "resolved": "https://nexus.teamdlab.com/repository/npm/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
+          "requires": {
+            "is-accessor-descriptor": "^1.0.0",
+            "is-data-descriptor": "^1.0.0",
+            "kind-of": "^6.0.2"
+          }
+        },
         "qs": {
           "version": "6.7.0",
-          "resolved": "https://nexus.teamdlab.com/repository/npm/qs/-/qs-6.7.0.tgz",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
           "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
           "dev": true
         }
@@ -5501,56 +5535,10 @@
           "requires": {
             "is-descriptor": "^1.0.0"
           }
-        }
-      }
-    },
-    "express": {
-      "version": "4.17.1",
-      "resolved": "https://nexus.teamdlab.com/repository/npm/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.7",
-        "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
-        "content-type": "~1.0.4",
-        "cookie": "0.4.0",
-        "cookie-signature": "1.0.6",
-        "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "encodeurl": "~1.0.2",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
-        "fresh": "0.5.2",
-        "merge-descriptors": "1.0.1",
-        "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
-        "parseurl": "~1.3.3",
-        "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
-        "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
-        "type-is": "~1.6.18",
-        "utils-merge": "1.0.1",
-        "vary": "~1.1.2"
-      },
-      "dependencies": {
-        "array-flatten": {
-          "version": "1.1.1",
-          "resolved": "https://nexus.teamdlab.com/repository/npm/array-flatten/-/array-flatten-1.1.1.tgz",
-          "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=",
-          "dev": true
         },
         "extend-shallow": {
           "version": "2.0.1",
-          "resolved": "https://nexus.teamdlab.com/repository/npm/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
           "requires": {
@@ -5559,7 +5547,7 @@
         },
         "is-accessor-descriptor": {
           "version": "1.0.0",
-          "resolved": "https://nexus.teamdlab.com/repository/npm/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
           "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
           "dev": true,
           "requires": {
@@ -5568,7 +5556,7 @@
         },
         "is-data-descriptor": {
           "version": "1.0.0",
-          "resolved": "https://nexus.teamdlab.com/repository/npm/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
           "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
           "dev": true,
           "requires": {
@@ -5577,7 +5565,7 @@
         },
         "is-descriptor": {
           "version": "1.0.2",
-          "resolved": "https://nexus.teamdlab.com/repository/npm/is-descriptor/-/is-descriptor-1.0.2.tgz",
+          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
           "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
           "dev": true,
           "requires": {
@@ -7105,8 +7093,7 @@
     "is-extendable": {
       "version": "0.1.1",
       "resolved": "https://nexus.teamdlab.com/repository/npm/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
-      "dev": true
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik="
     },
     "is-extglob": {
       "version": "2.1.1",
@@ -8064,8 +8051,7 @@
     "kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
-      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
-      "dev": true
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw=="
     },
     "latest-version": {
       "version": "5.1.0",
@@ -8960,15 +8946,6 @@
             "universalify": "^0.1.0"
           }
         },
-        "rimraf": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
-          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
         "rimraf": {
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz",
diff --git a/ui/ui-frontend-common/src/app/modules/auth.service.ts b/ui/ui-frontend-common/src/app/modules/auth.service.ts
index 8d68a152b69a7dbb9b176122f5697d1523bf46b0..7226f8cc5508afce0ab7b6dfc1a68feb3b4027d9 100644
--- a/ui/ui-frontend-common/src/app/modules/auth.service.ts
+++ b/ui/ui-frontend-common/src/app/modules/auth.service.ts
@@ -37,6 +37,7 @@
 import { Inject, Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
+import { ApplicationId } from './application-id.enum';
 import { WINDOW_LOCATION } from './injection-tokens';
 import { AuthUser, Tenant } from './models';
 
@@ -111,4 +112,25 @@ export class AuthService {
     return tenant;
   }
 
+  getTenantByAppAndIdentifier(appId: ApplicationId, tenantIdentifier: number): Tenant {
+    if (!this._user) {
+      console.error(`AuthService Error: user is null`);
+
+      return null;
+    }
+
+    const app = this._user.tenantsByApp.find((appTenants) => appTenants.name === appId);
+    if (!app) {
+      console.error(`AuthService Error: can\'t find application with id "${appId}"`);
+      return null;
+    }
+
+    const tenant = app.tenants.find((t) => t.identifier === tenantIdentifier);
+    if (!tenant) {
+      console.error(`AuthService Error: can\'t find tenant with id "${tenantIdentifier}"`);
+      return null;
+    }
+    return tenant;
+  }
+
 }
diff --git a/ui/ui-frontend-common/src/app/modules/logbook/logbook.service.ts b/ui/ui-frontend-common/src/app/modules/logbook/logbook.service.ts
index 0d57674e73a379dc804832f0f3ea46b725c5bb34..f913332658d72442c0f04f024c70c88c0db384bc 100644
--- a/ui/ui-frontend-common/src/app/modules/logbook/logbook.service.ts
+++ b/ui/ui-frontend-common/src/app/modules/logbook/logbook.service.ts
@@ -36,8 +36,8 @@
  */
 import { HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { forkJoin, Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
+import { forkJoin, Observable, of, throwError } from 'rxjs';
+import { catchError, map, switchMap } from 'rxjs/operators';
 
 import { LogbookApiService } from '../api/logbook-api.service';
 import { Logger } from '../logger/logger';
@@ -131,6 +131,25 @@ export class LogbookService {
     );
   }
 
+   getOperationById(id: string, tenantIdentifier: number, accessContractId: string): Observable<Event> {
+    const headers = new HttpHeaders({
+      'X-Tenant-Id': tenantIdentifier.toString(),
+      'X-Access-Contract-Id': accessContractId
+    });
+
+    return this.logbookApi.findOperationById(id, headers).pipe(
+      switchMap((response) => {
+        if (!response || !response.$results || response.$results.length === 0) {
+          return throwError(`getOperationById error: no result for operation with id ${id}`);
+        }
+
+        return of(response);
+      }),
+      map((response) => response.$results.length === 1 ? LogbookApiService.toEvent(response.$results[0]) : null)
+    );
+  }
+
+
 }
 
 function flattenChildEvents(acc: Event[], current: Event): Event[] {
diff --git a/ui/ui-frontend/package-lock.json b/ui/ui-frontend/package-lock.json
index 70e1bfb3e59a1373f10024f5b6f22065229cc913..2b551c337fb2f61218929a56ca25eb6b302fa324 100644
--- a/ui/ui-frontend/package-lock.json
+++ b/ui/ui-frontend/package-lock.json
@@ -643,7 +643,6 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
@@ -844,7 +843,7 @@
     },
     "@angular/material-moment-adapter": {
       "version": "8.2.3",
-      "resolved": "https://nexus.dev.programmevitam.fr/repository/npm-group/@angular/material-moment-adapter/-/material-moment-adapter-8.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-8.2.3.tgz",
       "integrity": "sha512-x0WE9MyQajqzGPYKm8eHcDmWWlwiobOX9rZ+V5uqY80fsvm2czk6TYnc1drFYcPAHIaIcx7je7NYOULPF1rTpw==",
       "requires": {
         "tslib": "^1.7.1"
@@ -2958,16 +2957,6 @@
       "integrity": "sha512-Phlt0plgpIIBOGTT/ehfFnbNlfsDEiqmzE2KRXoX1bLIlir4X/MR+zSyBEkL05ffWgnRSf/DXv+WrUAVr93/ow==",
       "dev": true
     },
-    "bindings": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
-      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "file-uri-to-path": "1.0.0"
-      }
-    },
     "blob": {
       "version": "0.0.5",
       "resolved": "https://nexus.dev.programmevitam.fr/repository/npm-group/blob/-/blob-0.0.5.tgz",
@@ -5719,13 +5708,6 @@
         }
       }
     },
-    "file-uri-to-path": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
-      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
-      "dev": true,
-      "optional": true
-    },
     "fileset": {
       "version": "2.0.3",
       "resolved": "https://nexus.dev.programmevitam.fr/repository/npm-group/fileset/-/fileset-2.0.3.tgz",
@@ -12982,6 +12964,7 @@
     },
     "ui-frontend-common": {
       "version": "file:../ui-frontend-common/ui-frontend-common-0.1.0.tgz",
+      "integrity": "sha512-RluantRkfYcd+qFzfD/DYQ9huDtpU+mCjAi3ugR9csL+q30ssKDjeR1yK7c11n85Sbd9hVMg1R9m0oarN/P0RA==",
       "requires": {
         "@angular/animations": "8.2.14",
         "@angular/cdk": "^8.2.3",
@@ -13511,7 +13494,6 @@
           "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
           "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-extendable": "^0.1.0"
           }
@@ -13536,7 +13518,6 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
@@ -13555,7 +13536,6 @@
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
           "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
           "dev": true,
-          "optional": true,
           "requires": {
             "kind-of": "^3.0.2"
           }
@@ -13565,7 +13545,6 @@
           "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
           "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-buffer": "^1.1.5"
           }
@@ -13924,7 +13903,6 @@
           "dev": true,
           "optional": true,
           "requires": {
-            "bindings": "^1.5.0",
             "nan": "^2.12.1"
           }
         },
diff --git a/ui/ui-frontend/projects/referential/src/app/app-routing.module.ts b/ui/ui-frontend/projects/referential/src/app/app-routing.module.ts
index c2d22edd01a4d739b93c1f594de194fb706dea99..b1ac9e5918b55316a642efbfcf0701c6f546403e 100644
--- a/ui/ui-frontend/projects/referential/src/app/app-routing.module.ts
+++ b/ui/ui-frontend/projects/referential/src/app/app-routing.module.ts
@@ -111,6 +111,15 @@ const routes: Routes = [
     data: {appId: 'PROBATIVE_VALUE_APP'}
   },
   // =====================================================
+  //                      SUPERVISION API
+  // =====================================================
+  {
+    path: 'supervision-api',
+    loadChildren: () => import('./supervision-api/api-supervision.module').then(m => m.ApiSupervisionModule),
+    canActivate: [AuthGuard, AppGuard],
+    data: { appId: 'SUPERVISION_API_APP' }
+  },
+  // =====================================================
   //                       DSL
   // =====================================================
   {
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.html b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..4ea07567fefa29ad6a5777a5deb3eb5eaec99dfc
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.html
@@ -0,0 +1,83 @@
+<div class="vitamui-sidepanel">
+  <div class="vitamui-sidepanel-header">
+    <ng-container *ngIf="!isPopup">
+      <button class="btn-popup" role="button" (click)="openPopup()"><i class="vitamui-icon vitamui-icon-pin"></i></button>
+    </ng-container>
+    <button class="btn-close" role="button" (click)="emitClose()"><i class="material-icons">close</i></button>
+
+    <div class="header-container">
+      <div class="title">
+        <div class="status-badge-mini" [ngClass]="event | eventTypeBadgeClass">
+          <i class="vitamui-icon vitamui-icon-box-hand no-margin"></i>
+        </div>
+        <h2>{{ event?.id }}</h2>
+      </div>
+    </div>
+  </div>
+  <div class="vitamui-sidepanel-body">
+    <mat-tab-group class="preview-tab-group">
+      <mat-tab label="Informations" i18n-label="Information tab@@eventDetailTabInformation">
+
+        <div class="read-only-field">
+          <label>Catégorie d'opération</label>
+          <div class="word-break">{{ event?.typeProc }}</div>
+        </div>
+
+        <div class="panel-row">
+          <div class="read-only-field">
+            <label>Identifiants des agents externes</label>
+            <div class="word-break">{{ event?.agIdExt }}</div>
+          </div>
+          <div class="read-only-field">
+            <label>Contrat associé</label>
+            <div class="word-break">{{ event?.rightsStatementIdentifier }}</div>
+          </div>
+        </div>
+
+        <div class="panel-row">
+          <div class="read-only-field">
+            <label>Identification de l'application</label>
+            <div class="word-break">{{ event?.agIdApp }}</div>
+          </div>
+          <div class="read-only-field">
+            <label>Numéro de transaction</label>
+            <div class="word-break">{{ event?.idRequest }}</div>
+          </div>
+        </div>
+
+        <div class="panel-row">
+          <div class="read-only-field">
+            <label>Identification de l'opération</label>
+            <div class="word-break">{{ event?.objectId }}</div>
+          </div>
+          <div class="read-only-field">
+            <label>Acteur(s) interne(s)</label>
+            <div class="word-break">{{ event?.agId }}</div>
+          </div>
+        </div>
+
+        <div class="read-only-field">
+          <label>Rapport</label>
+          <div>-</div>
+        </div>
+
+        <div class="read-only-field">
+          <label>Informations complémentaires sur l'opération</label>
+          <div class="word-break">{{ event?.data }}</div>
+        </div>
+
+        <div class="read-only-field">
+          <label>Message</label>
+          <div>{{ (event | lastEvent)?.outMessage }}</div>
+        </div>
+
+      </mat-tab>
+      <mat-tab label="Historique" i18n-label="History tab@@eventDetailTabInformation">
+          <vitamui-common-history-events [events]="event?.events"></vitamui-common-history-events>
+      </mat-tab>
+    </mat-tab-group>
+  </div>
+  <div class="vitamui-sidepanel-loading-overlay" *ngIf="loading" @fadeInOut>
+    <mat-spinner color="accent" diameter="40"></mat-spinner>
+  </div>
+</div>
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.scss b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..51a2cb702cfd8e4f8e35517eb9f1cf212080f5f6
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.scss
@@ -0,0 +1,43 @@
+.title {
+    max-width: 504px;
+
+    h2 {
+        word-break: break-all;
+    }
+
+    .vitamui-icon.no-margin {
+        margin-right: 0;
+    }
+
+    .status-badge-mini {
+        margin-right: 10px;
+
+        &:after {
+            margin-left: -11px;
+            margin-top: -11px;
+            width: 9px;
+            height: 9px;
+        }
+    }
+}
+
+.panel-row {
+    display: flex;
+}
+
+.word-break {
+    word-break: break-all;
+}
+
+.vitamui-sidepanel-loading-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(255, 255, 255, 0.5);
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.spec.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..99694f35c9e36d45438418a638684f3a0a9ea68d
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.spec.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { AuthService, LogbookService } from 'ui-frontend-common';
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute } from '@angular/router';
+
+import { EventTypeBadgeClassPipe } from '../api-supervision-list/event-type-badge-class.pipe';
+import { LastEventPipe } from '../api-supervision-list/last-event.pipe';
+import { ApiSupervisionDetailComponent } from './api-supervision-detail.component';
+
+describe('ApiSupervisionDetailComponent', () => {
+  let component: ApiSupervisionDetailComponent;
+  let fixture: ComponentFixture<ApiSupervisionDetailComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ApiSupervisionDetailComponent, EventTypeBadgeClassPipe, LastEventPipe ],
+      providers: [
+        { provide: LogbookService, useValue: {} },
+        { provide: AuthService, useValue: {} },
+        { provide: ActivatedRoute, useValue: {} },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ApiSupervisionDetailComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8c21b4dcec75354fa9f9e3802d980d521a669c8a
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-detail.component.ts
@@ -0,0 +1,119 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { trigger, style, transition, animate } from '@angular/animations';
+import { AuthService, Event, LogbookService } from 'ui-frontend-common';
+
+
+@Component({
+  selector: 'app-api-supervision-detail',
+  templateUrl: './api-supervision-detail.component.html',
+  styleUrls: ['./api-supervision-detail.component.scss'],
+  animations: [
+    trigger('fadeInOut', [
+      transition(':enter', [
+        style({ opacity: 0 }),
+        animate('200ms', style({ opacity: 1 })),
+      ]),
+      transition(':leave', [
+        style({ opacity: 1 }),
+        animate('200ms', style({ opacity: 0 })),
+      ]),
+    ])
+  ]
+})
+export class ApiSupervisionDetailComponent implements OnInit, OnChanges {
+
+  @Input() eventId: string;
+
+  @Input() tenantIdentifier: number;
+  @Input() isPopup: boolean;
+
+  @Output() closePanel = new EventEmitter();
+
+  event: Event;
+  loading: boolean;
+
+  constructor(private logbookService: LogbookService, private authService: AuthService, private route: ActivatedRoute) {
+  }
+
+  ngOnInit() {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.eventId || changes.tenantIdentifier) {
+      this.refreshEvents();
+    }
+  }
+
+  openPopup() {
+    window.open('/api-supervision/tenant/' + this.tenantIdentifier + '/event/' + this.event.id,
+      'detailPopup', 'width=584, height=713, resizable=no, location=no');
+    this.emitClose();
+  }
+
+  closePopup() {
+    window.close();
+  }
+
+  emitClose() {
+    this.closePanel.emit();
+  }
+
+  private refreshEvents() {
+    if (!this.tenantIdentifier || !this.eventId) {
+      return;
+    }
+
+    const tenant = this.authService.getTenantByAppAndIdentifier(this.route.snapshot.data.appId, this.tenantIdentifier);
+
+    if (!tenant) {
+      return;
+    }
+
+    const accessContractLogbookIdentifier = tenant.accessContractLogbookIdentifier || '';
+
+    this.loading = true;
+    this.logbookService.getOperationById(this.eventId, this.tenantIdentifier, accessContractLogbookIdentifier)
+      .subscribe((event) => {
+        this.event = event;
+        this.loading = false;
+      });
+  }
+
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-popup.component.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-popup.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..57c281ed65a6b1bff61790b30781e774f71a80cf
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-detail/api-supervision-popup.component.ts
@@ -0,0 +1,68 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-api-supervision-popup',
+  template: `
+    <app-api-supervision-detail
+      (closePanel)="closePopup()"
+      [eventId]="eventId"
+      [tenantIdentifier]="tenantIdentifier"
+      [isPopup]="true"
+    ></app-api-supervision-detail>
+  `
+})
+export class ApiSupervisionPopupComponent implements OnInit {
+
+  eventId: string;
+  tenantIdentifier: number;
+
+  constructor(private route: ActivatedRoute) {
+  }
+
+  ngOnInit() {
+    this.eventId = this.route.snapshot.paramMap.get('id');
+    this.tenantIdentifier = +this.route.snapshot.paramMap.get('tenantIdentifier');
+  }
+
+  closePopup() {
+    window.close();
+  }
+
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.html b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..008526d351033f40e73661d4a8963809e2d2a800
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.html
@@ -0,0 +1,81 @@
+<table class="vitamui-table" vitamuiCommonInfiniteScroll (vitamuiScroll)="onScroll()">
+  <thead>
+    <tr>
+      <th style="width: 60px;" class="no-first-cell-padding">
+        <i class="vitamui-icon vitamui-row-icon"></i>
+      </th>
+
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="@@apiSupervisionListIdentifiantHeader">Identifiant</span>
+        </div>
+      </th>
+
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="@@apiSupervisionListOperationHeader">Opération</span>
+        </div>
+      </th>
+
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="@@apiSupervisionListStartDateHeader">Date de création</span>
+        </div>
+      </th>
+
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="@@apiSupervisionListEndDateHeader">Fin d'exécution</span>
+        </div>
+      </th>
+
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="@@apiSupervisionListStatusHeader">Statut</span>
+        </div>
+      </th>
+
+      <th>
+        <div class="vitamui-table-header">
+          <span i18n="@@apiSupervisionListStepHeader">Etape</span>
+        </div>
+      </th>
+
+    </tr>
+  </thead>
+  <tbody>
+    <tr *ngFor="let event of dataSource; let index = index" (click)="selectEvent(event)" class="vitamui-table-row">
+      <td style="width:60px;" class="no-first-cell-padding">
+        <div class="vitamui-cell-icon aligned">
+          <div class="status-badge" [ngClass]="event | eventTypeBadgeClass">
+            <i class="vitamui-icon vitamui-icon-ingest vitamui-row-icon status-badge"></i>
+          </div>
+        </div>
+      </td>
+      <td><div class="vitamui-cell-content break-content" [title]="event.id">{{ event.id }}</div></td>
+      <td><div class="vitamui-cell-content" [ngClass]="event | eventTypeColorClass"><vitamui-common-event-type-label [key]="event.type"></vitamui-common-event-type-label></div></td>
+      <td>
+        <div class="vitamui-cell-content">{{ event.dateTime | date:'dd/MM/yyyy' }}</div>
+        <div class="vitamui-cell-sub-content cell-content-bold">
+          <span>{{ event.dateTime | date:'hh:mm:ss' }}</span>
+        </div>
+      </td>
+      <td>
+        <div class="vitamui-cell-content">{{ (event | lastEvent).dateTime | date:'dd/MM/yyyy' }}</div>
+        <div class="vitamui-cell-sub-content cell-content-bold">
+          <span>{{ (event | lastEvent).dateTime | date:'hh:mm:ss' }}</span>
+        </div>
+      </td>
+      <td><div class="vitamui-cell-content" [ngClass]="event | eventTypeColorClass">{{ (event | lastEvent).outcome }}</div></td>
+      <td><div class="vitamui-cell-content cell-content-bold break-content" [ngClass]="event | eventTypeColorClass">{{ (event | lastEvent).type }}</div></td>
+    </tr>
+  </tbody>
+</table>
+
+<div class="vitamui-table-footer">
+  <mat-spinner *ngIf="pending" diameter="50" color="accent"></mat-spinner>
+  <button *ngIf="!pending && infiniteScrollDisabled && logbookSearchService.canLoadMore" (click)="loadMore()" class="btn"
+    i18n="Show more results@@tableMoreResultButton">
+    Afficher plus de résultats...
+  </button>
+</div>
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.scss b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6de9e2a21d3d378fdeae484ddf1a428f5f54d350
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.scss
@@ -0,0 +1,29 @@
+@import "~ui-frontend-common/sass/variables/colors";
+
+.cell-content-bold {
+    color: $charcoal-grey;
+    font-size: 15px;
+    font-weight: bold;
+}
+
+.vitamui-cell-content {
+    &.success {
+        color: #74C31C;
+    }
+
+    &.warning {
+        color: $mustard-yellow;
+    }
+
+    &.error {
+        color: $red;
+    }
+}
+
+.break-content {
+    word-break: break-all;
+}
+
+.fixed-layout {
+    table-layout: auto;
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.spec.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..10d14148c74ee8e24e936df1ad18473879857484
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.spec.ts
@@ -0,0 +1,72 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { EMPTY } from 'rxjs';
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LogbookSearchService } from '../logbook-search.service';
+import { ApiSupervisionListComponent } from './api-supervision-list.component';
+import { EventTypeBadgeClassPipe } from './event-type-badge-class.pipe';
+import { EventTypeColorClassPipe } from './event-type-color-class.pipe';
+import { LastEventPipe } from './last-event.pipe';
+
+describe('ApiSupervisionListComponent', () => {
+  let component: ApiSupervisionListComponent;
+  let fixture: ComponentFixture<ApiSupervisionListComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ApiSupervisionListComponent, LastEventPipe, EventTypeColorClassPipe, EventTypeBadgeClassPipe ],
+      providers: [
+        { provide: LogbookSearchService, useValue: { search: () => EMPTY } },
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ApiSupervisionListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..199a7e3c8d40fd8cfd9686671eb7cba4f312890d
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/api-supervision-list.component.ts
@@ -0,0 +1,87 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { DEFAULT_PAGE_SIZE, Direction, Event, InfiniteScrollTable, PageRequest } from 'ui-frontend-common';
+
+import {
+  Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges
+} from '@angular/core';
+
+import { EventFilter } from '../event-filter.interface';
+import { LogbookSearchService } from '../logbook-search.service';
+
+@Component({
+  selector: 'app-api-supervision-list',
+  templateUrl: './api-supervision-list.component.html',
+  styleUrls: ['./api-supervision-list.component.scss']
+})
+export class ApiSupervisionListComponent extends InfiniteScrollTable<Event> implements OnInit, OnChanges {
+
+  @Input() tenantIdentifier: number;
+  @Input() filters: Readonly<EventFilter>;
+
+  @Output() eventClick = new EventEmitter<Event>();
+
+  orderBy = 'name';
+  direction = Direction.ASCENDANT;
+
+  constructor(public logbookSearchService: LogbookSearchService) {
+    super(logbookSearchService);
+  }
+
+  ngOnInit() {
+    this.refreshList();
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.tenantIdentifier || changes.filters) {
+      this.refreshList();
+    }
+  }
+
+  refreshList() {
+    const pageRequest = new PageRequest(0, DEFAULT_PAGE_SIZE, this.orderBy, this.direction);
+
+    const query = JSON.stringify(LogbookSearchService.buildVitamQuery(pageRequest, this.filters));
+
+    this.search(new PageRequest(0, DEFAULT_PAGE_SIZE, this.orderBy, this.direction, query));
+  }
+
+  selectEvent(event: Event) {
+    this.eventClick.emit(event);
+  }
+
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-badge-class.pipe.spec.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-badge-class.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a0bab9d4b1e67856558c3680d7ee19ba4d0f03c6
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-badge-class.pipe.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { EventTypeBadgeClassPipe } from './event-type-badge-class.pipe';
+
+describe('EventTypeBadgeClassPipe', () => {
+  it('create an instance', () => {
+    const pipe = new EventTypeBadgeClassPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-badge-class.pipe.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-badge-class.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3ee25f528489f8d2a38c3a4f696fa10d9243b4b9
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-badge-class.pipe.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { Event } from 'ui-frontend-common';
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+const classMap: { [key: string]: string } = {
+  OK: 'status-badge-green',
+  WARNING: 'status-badge-orange',
+  KO: 'status-badge-red',
+  FATAL: 'status-badge-red'
+};
+
+@Pipe({
+  name: 'eventTypeBadgeClass'
+})
+export class EventTypeBadgeClassPipe implements PipeTransform {
+
+  transform(event: Event): string {
+    if (!event || !event.events || event.events.length <= 0) {
+      return 'status-badge-grey';
+    }
+
+    const lastEvent = event.events[event.events.length - 1];
+
+    if (lastEvent.outcome === 'OK' && event.type === lastEvent.type) {
+      return 'status-badge-green';
+    }
+
+    return classMap[lastEvent.outcome] || 'status-badge-grey';
+  }
+
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-color-class.pipe.spec.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-color-class.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..74c71da8b90b5cb17ecd13d68825a2b333d6451e
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-color-class.pipe.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { EventTypeColorClassPipe } from './event-type-color-class.pipe';
+
+describe('EventTypeClassColorPipe', () => {
+  it('create an instance', () => {
+    const pipe = new EventTypeColorClassPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-color-class.pipe.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-color-class.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..00a4bafa73c430b615c1a1f0403b6a65180ae853
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/event-type-color-class.pipe.ts
@@ -0,0 +1,67 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { Pipe, PipeTransform } from '@angular/core';
+import { Event } from 'ui-frontend-common';
+
+const colorClassMap: { [key: string]: string } = {
+  OK: 'success',
+  WARNING: 'warning',
+  KO: 'error',
+  FATAL: 'error'
+};
+
+@Pipe({
+  name: 'eventTypeColorClass'
+})
+export class EventTypeColorClassPipe implements PipeTransform {
+
+  transform(event: Event): string {
+    if (!event.events || event.events.length <= 0) {
+      console.error('EventTypeColorClassPipe Error: event has no child event');
+      return '';
+    }
+
+    const lastEvent = event.events[event.events.length - 1];
+
+    if (lastEvent.outcome === 'OK' && event.type === lastEvent.type) {
+      return '';
+    }
+
+    return colorClassMap[lastEvent.outcome] || '';
+  }
+
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/last-event.pipe.spec.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/last-event.pipe.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..466a1357deaf2ae7d8bda08b329e76828271b11a
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/last-event.pipe.spec.ts
@@ -0,0 +1,44 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { LastEventPipe } from './last-event.pipe';
+
+describe('LastEventPipe', () => {
+  it('create an instance', () => {
+    const pipe = new LastEventPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/last-event.pipe.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/last-event.pipe.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ce9c8fbab5446adae9e1dc2b7cc982a017593bf8
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-list/last-event.pipe.ts
@@ -0,0 +1,50 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { Event } from 'ui-frontend-common';
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'lastEvent'
+})
+export class LastEventPipe implements PipeTransform {
+
+  transform(event: Event): Event {
+    return event && event.events ? event.events[event.events.length - 1] : null;
+  }
+
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-routing.module.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-routing.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..899938a62b1bd2311868d344e49a31376331feeb
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision-routing.module.ts
@@ -0,0 +1,73 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { Route, RouterModule } from '@angular/router';
+import { VitamUITenantSelectComponent, TenantSelectionGuard, ActiveTenantGuard } from 'ui-frontend-common';
+import { ApiSupervisionComponent } from './api-supervision.component';
+
+const routes: Route[] = [
+  {
+    path: '',
+    redirectTo: 'tenant',
+    pathMatch: 'full'
+  },
+  {
+    path: 'tenant',
+    component: VitamUITenantSelectComponent,
+    pathMatch: 'full',
+    canActivate: [TenantSelectionGuard]
+  },
+  {
+    path: 'tenant/:tenantIdentifier',
+    component: ApiSupervisionComponent,
+    canActivate: [ActiveTenantGuard]
+  }
+];
+
+
+@NgModule({
+  declarations: [],
+  imports: [
+    CommonModule,
+    RouterModule.forChild(routes)
+  ],
+  exports: [
+    RouterModule
+  ]
+})
+export class ApiSupervisionRoutingModule { }
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.html b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..b5773e24b07e3991eedaca7a88041e22f95c6bb2
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.html
@@ -0,0 +1,89 @@
+<mat-sidenav-container [autosize]="true" [hasBackdrop]="false">
+
+  <mat-sidenav #panel mode="side" position="end" [fixedInViewport]="true">
+    <app-api-supervision-detail *ngIf="openedItem" [tenantIdentifier]="tenantIdentifier" [eventId]="openedItem?.id"
+      (closePanel)="closePanel()"></app-api-supervision-detail>
+
+  </mat-sidenav>
+  <mat-sidenav-content>
+
+    <div class="vitamui-header">
+      <div class="vitamui-container">
+        <vitamui-common-navbar [appId]="appId" [hideTenantMenu]="false" [hideCustomerMenu]="true" (tenantSelect)="changeTenant($event)"></vitamui-common-navbar>
+        <div class="controls">
+          <h2 i18n="@@apiSupervisionPageTitle">
+            <img src="assets/mini-logo-vitam.png"> Supervision des <strong>API</strong>s
+          </h2>
+
+          <div class="actions">
+
+            <button class="btn secondary" (click)="refreshList()">
+              <i class="vitamui-icon vitamui-icon-refresh"></i> <span>Rafraîchir</span>
+            </button>
+
+            <button class="btn more-actions" [matMenuTriggerFor]="moreMenu">
+              <i class="material-icons">more_horiz</i> <span i18n="@@apiSupervisionMoreActionsButton">Autres actions</span>
+            </button>
+
+            <mat-menu #moreMenu="matMenu" [overlapTrigger]="false" class="more-actions-menu" xPosition="before">
+              <span mat-menu-item i18n="@@apiSupervisionComingSoon">
+                Bientôt
+              </span>
+
+            </mat-menu>
+          </div>
+        </div>
+
+        <div class="filter-controls">
+
+          <form [formGroup]="dateRangeFilterForm" class="date-filter-container">
+            <div class="date-filter-container">
+              <div class="date-filter">
+                <span *ngIf="!dateRangeFilterForm.get('startDate').value;else showStartDate" (click)="pickerStart.open()"
+                  i18n="@@apiSupervisionStartDate">Date de début</span>
+                <ng-template #showStartDate>
+                  <span (click)="pickerStart.open()">{{ dateRangeFilterForm.get('startDate').value | date:'dd/MM/yyyy'
+                    }}</span>
+                  <i class="material-icons clear-date-icon clickable" (click)="clearDate('startDate')">clear</i>
+                </ng-template>
+                <input class="hidden" size="0" [matDatepicker]="pickerStart" formControlName="startDate" [max]="dateRangeFilterForm.get('endDate').value">
+                <mat-datepicker #pickerStart></mat-datepicker>
+              </div>
+              <div class="date-filter">
+                <span *ngIf="!dateRangeFilterForm.get('endDate').value; else showEndDate" (click)="pickerEnd.open()"
+                  i18n="@@apiSupervisionEndDate">Date de fin</span>
+                <ng-template #showEndDate><span (click)="pickerEnd.open()">{{ dateRangeFilterForm.get('endDate').value
+                    | date:'dd/MM/yyyy' }} </span> <i class="material-icons clear-date-icon clickable" (click)="clearDate('endDate')">clear</i></ng-template>
+                <input class="hidden" size="0" [matDatepicker]="pickerEnd" formControlName="endDate" [min]="dateRangeFilterForm.get('startDate').value">
+                <mat-datepicker #pickerEnd></mat-datepicker>
+              </div>
+            </div>
+          </form>
+        </div>
+
+        <div class="custom-flex-controls">
+
+          <button class="btn" (click)="toggleTypeFilter('INGEST')" [class.active]="filters?.type === 'INGEST'">
+            <i class="vitamui-icon" i18n="@@apiSupervisionFilterIngest"></i> <span>Entrées</span>
+          </button>
+
+          <button class="btn" (click)="toggleTypeFilter('ELIMINATION')" [class.active]="filters?.type === 'ELIMINATION'">
+            <i class="vitamui-icon" i18n="@@apiSupervisionFilterElimination"></i> <span>Eliminations</span>
+          </button>
+
+          <button class="btn" (click)="toggleTypeFilter('MASTERDATA')" [class.active]="filters?.type === 'MASTERDATA'">
+            <i class="vitamui-icon" i18n="@@apiSupervisionFilterMasterData"></i> <span>Données de base</span>
+          </button>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="vitamui-body vitamui-container">
+      <app-api-supervision-list [filters]="filters" [tenantIdentifier]="tenantIdentifier" (eventClick)="openPanel($event)"></app-api-supervision-list>
+    </div>
+
+  </mat-sidenav-content>
+
+
+</mat-sidenav-container>
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.scss b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..6c1aeb44aad2ae5773def079f20ed02e5ed45f1a
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.scss
@@ -0,0 +1,31 @@
+@import "~ui-frontend-common/sass/variables/colors";
+
+.vitamui-header {
+    background-image: none;
+
+    .controls {
+        margin-top: 57.5px;
+
+        h2 {
+            font-weight: 300;
+            font-size: 28px;
+
+            > img {
+                vertical-align: middle;
+                width: 37px;
+                margin-right: 17px;
+            }
+        }
+    }
+}
+
+.filter-banner-container {
+  display: flex;
+  height: 70px;
+  margin-left: 10px;
+}
+
+.custom-flex-controls{
+    text-align: right;
+    justify-content: space-between;
+}
\ No newline at end of file
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.spec.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..0d10fca2f15432c3332b4540d2461ee05a7b1f3e
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.spec.ts
@@ -0,0 +1,83 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+
+import { GlobalEventService, ENVIRONMENT } from 'ui-frontend-common';
+
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatMenuModule } from '@angular/material';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { ApiSupervisionComponent } from './api-supervision.component';
+import { EMPTY } from 'rxjs';
+import { LogbookSearchService } from './logbook-search.service';
+import { environment } from '../../environments/environment';
+
+describe('ApiSupervisionComponent', () => {
+  let component: ApiSupervisionComponent;
+  let fixture: ComponentFixture<ApiSupervisionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        MatMenuModule,
+        ReactiveFormsModule
+      ],
+      declarations: [ApiSupervisionComponent],
+      providers: [
+        { provide: ActivatedRoute, useValue: { paramMap: EMPTY, data: EMPTY } },
+        { provide: LogbookSearchService, useValue: { search: () => EMPTY } },
+        { provide: Router, useValue: { navigate: () => { } } },
+        { provide: GlobalEventService, useValue: { pageEvent: EMPTY, customerEvent: EMPTY, tenantEvent: EMPTY } },
+        { provide: ENVIRONMENT, useValue: environment }
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
+    })
+      .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ApiSupervisionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..da8b33f7a51d7e6a17002a974b04a09446fed5b8
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.component.ts
@@ -0,0 +1,127 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { GlobalEventService, SidenavPage } from 'ui-frontend-common';
+
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+import { ApiSupervisionListComponent } from './api-supervision-list/api-supervision-list.component';
+import { EventFilter } from './event-filter.interface';
+
+@Component({
+  selector: 'app-api-supervision',
+  templateUrl: './api-supervision.component.html',
+  styleUrls: ['./api-supervision.component.scss']
+})
+export class ApiSupervisionComponent extends SidenavPage<any> implements OnInit {
+
+  dateRangeFilterForm: FormGroup;
+  tenantIdentifier: number;
+  filters: Readonly<EventFilter> = {};
+
+  @ViewChild(ApiSupervisionListComponent, { static: true }) list: ApiSupervisionListComponent;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private formBuilder: FormBuilder,
+    globalEventService: GlobalEventService
+  ) {
+    super(route, globalEventService);
+
+    this.route.paramMap.subscribe((paramMap) => this.tenantIdentifier = + paramMap.get('tenantIdentifier'));
+
+    this.dateRangeFilterForm = this.formBuilder.group({
+      startDate: null,
+      endDate: null
+    });
+
+    this.dateRangeFilterForm.valueChanges.subscribe((value) => {
+      this.filters = {
+        type: this.filters.type,
+        status: this.filters.status,
+        dateRange: value
+      };
+    });
+  }
+
+  ngOnInit() {
+    if (!this.list) {
+      console.error('ApiSupervisionComponent Error: no list in the template');
+    }
+  }
+
+  changeTenant(tenantIdentifier: number) {
+    this.router.navigate(['..', tenantIdentifier], { relativeTo: this.route });
+  }
+
+  clearDate(date: 'startDate' | 'endDate') {
+    if (date === 'startDate') {
+      this.dateRangeFilterForm.get(date).reset(null, { emitEvent: false });
+    } else if (date === 'endDate') {
+      this.dateRangeFilterForm.get(date).reset(null, { emitEvent: false });
+    } else {
+      console.error('clearDate() error: unknown date ' + date);
+    }
+  }
+
+  refreshList() {
+    if (!this.list) {
+      return;
+    }
+
+    this.list.refreshList();
+  }
+
+  toggleTypeFilter(type: 'INGEST' | 'ELIMINATION' | 'MASTERDATA') {
+    this.filters = {
+      type: (!this.filters.type || this.filters.type !== type) ? type : null,
+      status: this.filters.status,
+      dateRange: this.filters.dateRange
+    };
+  }
+
+  toggleStatusFilter(status: 'RUNNING' | 'ERROR' | 'DONE') {
+    this.filters = {
+      type: this.filters.type,
+      status: (!this.filters.status || this.filters.status !== status) ? status : null,
+      dateRange: this.filters.dateRange
+    };
+  }
+
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.module.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.module.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8fa48390a5b7caf2f94128a78dac09a334fe3930
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/api-supervision.module.ts
@@ -0,0 +1,82 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import { VitamUICommonModule } from 'ui-frontend-common';
+
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { ReactiveFormsModule } from '@angular/forms';
+import {
+  MatDatepickerModule, MatMenuModule, MatProgressSpinnerModule, MatSidenavModule, MatTabsModule, MatNativeDateModule
+} from '@angular/material';
+
+import {
+  ApiSupervisionDetailComponent
+} from './api-supervision-detail/api-supervision-detail.component';
+import {
+  ApiSupervisionPopupComponent
+} from './api-supervision-detail/api-supervision-popup.component';
+import { ApiSupervisionListComponent } from './api-supervision-list/api-supervision-list.component';
+import { EventTypeBadgeClassPipe } from './api-supervision-list/event-type-badge-class.pipe';
+import { EventTypeColorClassPipe } from './api-supervision-list/event-type-color-class.pipe';
+import { LastEventPipe } from './api-supervision-list/last-event.pipe';
+import { ApiSupervisionComponent } from './api-supervision.component';
+import { ApiSupervisionRoutingModule } from './api-supervision-routing.module';
+
+@NgModule({
+  declarations: [
+    ApiSupervisionComponent,
+    ApiSupervisionListComponent,
+    ApiSupervisionDetailComponent,
+    ApiSupervisionPopupComponent,
+    LastEventPipe,
+    EventTypeColorClassPipe,
+    EventTypeBadgeClassPipe,
+  ],
+  imports: [
+    CommonModule,
+    MatSidenavModule,
+    MatMenuModule,
+    MatDatepickerModule,
+    MatProgressSpinnerModule,
+    MatTabsModule,
+    ReactiveFormsModule,
+    VitamUICommonModule,
+    ApiSupervisionRoutingModule,
+    MatNativeDateModule
+  ]
+})
+export class ApiSupervisionModule { }
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/event-filter.interface.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/event-filter.interface.ts
new file mode 100644
index 0000000000000000000000000000000000000000..7cabb0f188187d0f45a3a01902c6ec127f883bd9
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/event-filter.interface.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+export interface EventFilter {
+  type?: 'INGEST' | 'ELIMINATION' | 'MASTERDATA';
+  status?: 'RUNNING' | 'ERROR' | 'DONE';
+  dateRange?: { startDate: Date, endDate: Date };
+}
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/logbook-search.service.spec.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/logbook-search.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..be366cab6c64072d9dd1db07bdba259e75f03304
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/logbook-search.service.spec.ts
@@ -0,0 +1,58 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+
+import { LogbookApiService, LogbookService } from 'ui-frontend-common';
+
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import { LogbookSearchService } from './logbook-search.service';
+
+describe('LogbookSearchService', () => {
+  beforeEach(() => TestBed.configureTestingModule({
+    imports: [HttpClientTestingModule],
+    providers: [
+      { provide: LogbookService, useValue: {} },
+      { provide: LogbookApiService, useValue: {} },
+    ]
+  }));
+
+  it('should be created', () => {
+    const service: LogbookSearchService = TestBed.get(LogbookSearchService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/ui/ui-frontend/projects/referential/src/app/supervision-api/logbook-search.service.ts b/ui/ui-frontend/projects/referential/src/app/supervision-api/logbook-search.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..8d33ebb6e85d07e614b39fa1ba4ab09297bb921a
--- /dev/null
+++ b/ui/ui-frontend/projects/referential/src/app/supervision-api/logbook-search.service.ts
@@ -0,0 +1,114 @@
+/*
+ * Copyright French Prime minister Office/SGMAP/DINSIC/Vitam Program (2019-2020)
+ * and the signatories of the "VITAM - Accord du Contributeur" agreement.
+ *
+ * contact@programmevitam.fr
+ *
+ * This software is a computer program whose purpose is to implement
+ * implement a digital archiving front-office system for the secure and
+ * efficient high volumetry VITAM solution.
+ *
+ * This software is governed by the CeCILL-C license under French law and
+ * abiding by the rules of distribution of free software.  You can  use,
+ * modify and/ or redistribute the software under the terms of the CeCILL-C
+ * license as circulated by CEA, CNRS and INRIA at the following URL
+ * "http://www.cecill.info".
+ *
+ * As a counterpart to the access to the source code and  rights to copy,
+ * modify and redistribute granted by the license, users are provided only
+ * with a limited warranty  and the software's author,  the holder of the
+ * economic rights,  and the successive licensors  have only  limited
+ * liability.
+ *
+ * In this respect, the user's attention is drawn to the risks associated
+ * with loading,  using,  modifying and/or developing or reproducing the
+ * software by the user in light of its specific status of free software,
+ * that may mean  that it is complicated to manipulate,  and  that  also
+ * therefore means  that it is reserved for developers  and  experienced
+ * professionals having in-depth computer knowledge. Users are therefore
+ * encouraged to load and test the software's suitability as regards their
+ * requirements in conditions enabling the security of their systems and/or
+ * data to be ensured and,  more generally, to use and operate it in the
+ * same conditions as regards security.
+ *
+ * The fact that you are presently reading this means that you have had
+ * knowledge of the CeCILL-C license and that you accept its terms.
+ */
+import {
+  Event, LogbookApiService, PageRequest, SearchService, VitamSelectOperator, VitamSelectQuery
+} from 'ui-frontend-common';
+import * as moment from 'moment';
+
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+import { EventFilter } from './event-filter.interface';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LogbookSearchService extends SearchService<Event> {
+
+  constructor(http: HttpClient, logbookApi: LogbookApiService) {
+    super(http, logbookApi);
+  }
+
+  static buildVitamQuery(pageRequest: PageRequest, filters: EventFilter): VitamSelectQuery {
+    const baseParameters: Partial<VitamSelectQuery> = {
+      $projection: {},
+      $filter: {
+        $limit: pageRequest.size,
+        $offset: Math.max(0, pageRequest.page - 1) * pageRequest.size,
+        $orderby: { evDateTime: -1 }
+      }
+    };
+
+    if (!filters) {
+      return {
+        $query: {} as VitamSelectOperator,
+        ...baseParameters
+      };
+    }
+
+    const queryOperators = this.buildQueryOperators(filters);
+
+    if (queryOperators.length === 0) {
+      return {
+        $query: {} as VitamSelectOperator,
+        ...baseParameters
+      };
+    }
+
+    return {
+      $query: {
+        $and: [
+          ...this.buildQueryOperators(filters),
+        ]
+      },
+      ...baseParameters
+    };
+  }
+
+  private static buildQueryOperators(filters: EventFilter): VitamSelectOperator[] {
+    const operators: VitamSelectOperator[] = [];
+
+    if (filters.type) {
+      operators.push({ $eq: { evTypeProc: filters.type } });
+    }
+
+    if (filters.status === 'ERROR') {
+      operators.push({ $in: { 'events.outcome': ['KO', 'FATAL'] } });
+    }
+
+    if (filters.dateRange && filters.dateRange.startDate) {
+      operators.push({ $gte: { evDateTime: filters.dateRange.startDate } });
+    }
+
+    if (filters.dateRange && filters.dateRange.endDate) {
+      operators.push({ $lte: { evDateTime: moment(filters.dateRange.endDate).endOf('day') } });
+    }
+
+    return operators;
+  }
+
+}
diff --git a/ui/ui-frontend/projects/referential/src/assets/mini-logo-vitam.png b/ui/ui-frontend/projects/referential/src/assets/mini-logo-vitam.png
new file mode 100644
index 0000000000000000000000000000000000000000..a13d7317b3a456085352397e7933f2d2a39b076f
Binary files /dev/null and b/ui/ui-frontend/projects/referential/src/assets/mini-logo-vitam.png differ
diff --git a/ui/ui-frontend/projects/referential/src/sass/styles.scss b/ui/ui-frontend/projects/referential/src/sass/styles.scss
index 523304e393983b4774e26887b4a9d850bc3b73ff..de83712e7949dcca2ae12680fa011a6645997bc8 100644
--- a/ui/ui-frontend/projects/referential/src/sass/styles.scss
+++ b/ui/ui-frontend/projects/referential/src/sass/styles.scss
@@ -20,8 +20,8 @@ $grid-gutter-width: 20px;
 @import "tooltip";
 @import "text";
 
-@import '../../../../dist/sass/icons/vitamui-icons.css';
-@import '../../../../dist/sass/styles';
+@import '../../../../dist/vitamui-library/src/sass/icons/vitamui-icons.css';
+@import '../../../../dist/vitamui-library/src/sass/styles';
 
 
 vitamui-common-slide-toggle {
diff --git a/ui/ui-identity/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json b/ui/ui-identity/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..48e341a0954d5f8c2accf3a6731be28e5bb9c0de
--- /dev/null
+++ b/ui/ui-identity/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/ui/ui-portal/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json b/ui/ui-portal/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..48e341a0954d5f8c2accf3a6731be28e5bb9c0de
--- /dev/null
+++ b/ui/ui-portal/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}
diff --git a/ui/ui-referential/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json b/ui/ui-referential/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json
new file mode 100644
index 0000000000000000000000000000000000000000..48e341a0954d5f8c2accf3a6731be28e5bb9c0de
--- /dev/null
+++ b/ui/ui-referential/${maven.multiModuleProjectDirectory}/ui/ui-frontend/package-lock.json
@@ -0,0 +1,3 @@
+{
+  "lockfileVersion": 1
+}