diff --git a/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.controller.js b/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.controller.js
new file mode 100644
index 000000000000..6b17fc41c2d8
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.controller.js
@@ -0,0 +1,7 @@
+export default class HostingCdnController {
+  /* @ngInject */
+  constructor($stateParams, serviceName) {
+    this.$stateParams = $stateParams;
+    this.serviceName = serviceName;
+  }
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.html b/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.html
new file mode 100644
index 000000000000..5acc5c8006fa
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.html
@@ -0,0 +1 @@
+<div data-ui-view="cdnView"></div>
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.modules.js b/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.modules.js
index 928e5c5338de..c28c4eeb482a 100644
--- a/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.modules.js
+++ b/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.modules.js
@@ -2,9 +2,13 @@ import routing from './hosting-cdn.routing';
 
 import shared from './shared/hosting-cdn-shared-settings.module';
 import order from './order/hosting-cdn-order.module';
+import logs from './logs';
 
 const moduleName = 'ovhManagerHostingCdn';
 
-angular.module(moduleName, [order, shared]).config(routing);
+angular
+  .module(moduleName, [order, shared, logs])
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
 
 export default moduleName;
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.routing.js b/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.routing.js
index 199b37b4b4a4..d040fc8dad65 100644
--- a/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.routing.js
+++ b/packages/manager/apps/web/client/app/hosting/cdn/hosting-cdn.routing.js
@@ -1,6 +1,19 @@
+import template from './hosting-cdn.html';
+import controller from './hosting-cdn.controller';
+
 export default /* @ngInject */ ($stateProvider) => {
   $stateProvider.state('app.hosting.dashboard.cdn', {
     url: '/cdn',
-    abstract: true,
+    redirectTo: 'app.hosting.dashboard.cdn.logs',
+    views: {
+      '@app.hosting.dashboard': {
+        template,
+        controller,
+        controllerAs: '$ctrl',
+      },
+    },
+    resolve: {
+      breadcrumb: () => 'CDN',
+    },
   });
 };
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.component.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.component.js
new file mode 100644
index 000000000000..44c8eeaf967e
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.component.js
@@ -0,0 +1,17 @@
+import template from './data-streams.template.html';
+
+export const name = 'cdnDedicatedLogsDataStreams';
+
+export default {
+  bindings: {
+    kind: '<',
+    url: '<',
+    goBack: '<',
+    trackClick: '<',
+    apiVersion: '<',
+    trackingHits: '<',
+    logKinds: '<',
+    logSubscriptionApiData: '=',
+  },
+  template,
+};
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.controller.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.controller.js
new file mode 100644
index 000000000000..e575a658a56b
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.controller.js
@@ -0,0 +1,22 @@
+export default class HostingCdnLogsDataStreamsController {
+  /* @ngInject */
+  constructor(
+    trackClick,
+    trackingHits,
+    url,
+    apiVersion,
+    kind,
+    goBack,
+    logKinds,
+    logSubscriptionApiData,
+  ) {
+    this.trackClick = trackClick;
+    this.trackingHits = trackingHits;
+    this.url = url;
+    this.apiVersion = apiVersion;
+    this.kind = kind;
+    this.goBack = goBack;
+    this.logKinds = logKinds;
+    this.logSubscriptionApiData = logSubscriptionApiData;
+  }
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.routing.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.routing.js
new file mode 100644
index 000000000000..594f5a542606
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.routing.js
@@ -0,0 +1,45 @@
+import template from './data-streams.template.html';
+import controller from './data-streams.controller';
+import {
+  CDN_HOSTING_DATA_STREAMS_TRACKING_HITS,
+  LOGS_TRACKING_CONTEXT,
+} from '../logs.constants';
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('app.hosting.dashboard.cdn.logs.data-streams', {
+    url: '/data-streams',
+    params: {
+      kind: null,
+    },
+    views: {
+      'cdnView@app.hosting.dashboard.cdn': {
+        template,
+        controller,
+        controllerAs: '$ctrl',
+      },
+    },
+    atInternet: {
+      rename: CDN_HOSTING_DATA_STREAMS_TRACKING_HITS.LISTING_PAGE,
+      ...LOGS_TRACKING_CONTEXT,
+    },
+    resolve: {
+      breadcrumb: () => null,
+      url: /* @ngInject */ ($stateParams) =>
+        `/hosting/web/${$stateParams.productId}/cdn/log/subscription`,
+      trackingHits: () => CDN_HOSTING_DATA_STREAMS_TRACKING_HITS,
+      kind: /* @ngInject */ ($transition$) => $transition$.params().kind,
+      logSubscriptionApiData: /* @ngInject */ (url, kind) => ({
+        url,
+        params: { kind },
+      }),
+      goBack: /* @ngInject  */ ($state, trackClick) => (kind) => {
+        trackClick(CDN_HOSTING_DATA_STREAMS_TRACKING_HITS.GO_BACK);
+        return $state.go(
+          'app.hosting.dashboard.cdn.logs',
+          { kind },
+          { reload: true },
+        );
+      },
+    },
+  });
+};
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.template.html b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.template.html
new file mode 100644
index 000000000000..980dd84f57d0
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/data-streams.template.html
@@ -0,0 +1,11 @@
+<div data-ovh-alert></div>
+<log-to-customer-list
+    data-log-subscription-api-data="$ctrl.logSubscriptionApiData"
+    data-description="{{:: 'cdn_logs_data_streams_description' | translate }}"
+    data-go-back=":: $ctrl.goBack"
+    data-tracking-hits=":: $ctrl.trackingHits"
+    data-track-click=":: $ctrl.trackClick"
+    data-api-version=":: $ctrl.apiVersion"
+    data-log-kinds-list=":: $ctrl.logKinds"
+>
+</log-to-customer-list>
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/index.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/index.js
new file mode 100644
index 000000000000..8ce8e0514e5d
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/index.js
@@ -0,0 +1,25 @@
+import angular from 'angular';
+import uiRouter from '@uirouter/angularjs';
+import '@ovh-ux/ng-translate-async-loader';
+import 'angular-translate';
+import '@ovh-ux/ui-kit';
+import ovhManagerLogToCustomer from '@ovh-ux/manager-log-to-customer';
+
+import routing from './data-streams.routing';
+import controller from './data-streams.controller';
+
+const moduleName = 'hostingCdnLogsDataStreams';
+
+angular
+  .module(moduleName, [
+    uiRouter,
+    'ngTranslateAsyncLoader',
+    'oui',
+    'pascalprecht.translate',
+    ovhManagerLogToCustomer,
+  ])
+  .controller('HostingCdnLogsDataStreamsController', controller)
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_de_DE.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_de_DE.json
new file mode 100644
index 000000000000..48c5a27a6502
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_de_DE.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_data_streams_description": "Wenn Sie die Sicherheits-Logs in Ihrem Kunden-Account abonnieren, werden diese auf die Logs Data Platform übertragen. Diese Plattform bietet Zugriff auf erweiterte Funktionen wie Warnungen, das Durchführen von Suchen oder die Verwaltung der Aufbewahrung."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_en_GB.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_en_GB.json
new file mode 100644
index 000000000000..a91ac1e3ddd2
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_en_GB.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_data_streams_description": "Once you subscribe, your customer account’s security logs will be sent to the Logs Data Platform. This platform gives you access to advanced features such as alerting, searching, and retention management."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_es_ES.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_es_ES.json
new file mode 100644
index 000000000000..379dfa35186d
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_es_ES.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_data_streams_description": "Al suscribirse a los logs de seguridad de su cuenta de cliente, estos serán transferidos a la Logs Data Platform. Esta plataforma le permite acceder a funcionalidades avanzadas como la gestión de las alertas, la ejecución de las búsquedas o la gestión de las retenciones."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_fr_CA.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_fr_CA.json
new file mode 100644
index 000000000000..837f8a7c30e5
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_fr_CA.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_data_streams_description": "En vous abonnant aux logs de sécurité de votre compte client, ceux-ci seront transférés vers la plateforme Logs Data Platform. Cette plateforme vous donne accès à des fonctionnalités avancées telles que l'alerte, l'exécution de recherches et la gestion de la rétention."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_fr_FR.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_fr_FR.json
new file mode 100644
index 000000000000..837f8a7c30e5
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_fr_FR.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_data_streams_description": "En vous abonnant aux logs de sécurité de votre compte client, ceux-ci seront transférés vers la plateforme Logs Data Platform. Cette plateforme vous donne accès à des fonctionnalités avancées telles que l'alerte, l'exécution de recherches et la gestion de la rétention."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_it_IT.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_it_IT.json
new file mode 100644
index 000000000000..bc8a7a55f67f
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_it_IT.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_data_streams_description": "Abbonandoti ai log di sicurezza del tuo account cliente, questi verranno trasferiti verso la soluzione Logs Data Platform. Questa piattaforma offre accesso a funzionalità avanzate come alert, esecuzione di ricerche e gestione delle retention."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_pl_PL.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_pl_PL.json
new file mode 100644
index 000000000000..54a93e6a0758
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_pl_PL.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_data_streams_description": "Po zasubskrybowaniu logów bezpieczeństwa konta klienta, logi zostaną przeniesione na platformę Logs Data Platform. Platforma zapewnia dostęp do zaawansowanych funkcji, takich jak alerty, wyszukiwanie lub zarządzanie czasem przechowywania."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_pt_PT.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_pt_PT.json
new file mode 100644
index 000000000000..a68bfdc5ebf3
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/data-streams/translations/Messages_pt_PT.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_data_streams_description": "Ao subscrever os logs de segurança da sua conta de cliente, estes serão transferidos para a plataforma Logs Data Platform. Esta plataforma dá-lhe acesso a funcionalidades avançadas tais como o alerta, a execução de pesquisas e a gestão da retenção."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/index.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/index.js
new file mode 100644
index 000000000000..6102ecd7c86a
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/index.js
@@ -0,0 +1,29 @@
+import angular from 'angular';
+import uiRouter from '@uirouter/angularjs';
+import '@ovh-ux/ng-translate-async-loader';
+import 'angular-translate';
+import '@ovh-ux/ui-kit';
+import ovhManagerLogToCustomer from '@ovh-ux/manager-log-to-customer';
+
+import routing from './logs.routing';
+import service from './logs.service';
+import controller from './logs.controller';
+import dataStreams from './data-streams';
+
+const moduleName = 'hostingCdnLogs';
+
+angular
+  .module(moduleName, [
+    uiRouter,
+    'ngTranslateAsyncLoader',
+    'oui',
+    'pascalprecht.translate',
+    ovhManagerLogToCustomer,
+    dataStreams,
+  ])
+  .controller('HostingCdnLogsController', controller)
+  .service('hostingCdnLogsService', service)
+  .config(routing)
+  .run(/* @ngTranslationsInject:json ./translations */);
+
+export default moduleName;
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.constants.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.constants.js
new file mode 100644
index 000000000000..24bc83251f5f
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.constants.js
@@ -0,0 +1,27 @@
+export const CDN_HOSTING_LOG_KEYS = ['message'];
+
+export const LOGS_TRACKING_CONTEXT = {
+  page_theme: 'Network',
+  level2: 99,
+};
+
+const logsPrefix = 'network::cdn-dedicated::::logs';
+export const CDN_HOSTING_LOGS_TRACKING_HITS = {
+  LOGS_PAGE: logsPrefix,
+  TRANSFER: `${logsPrefix}::subscribe`,
+  STOP_TRANSFER: `${logsPrefix}::unsubscribe`,
+  CREATE_ACCOUNT: `${logsPrefix}::create-account`,
+  CREATE_DATA_STREAM: `${logsPrefix}::create-data-stream`,
+  SUBSCRIBE_OTHER_ACCOUNT: `${logsPrefix}::subscribe-other-datastream`,
+  GRAYLOG_WATCH: `${logsPrefix}::graylog`,
+};
+
+const dataStreamsPrefix = `${logsPrefix}::data-streams`;
+export const CDN_HOSTING_DATA_STREAMS_TRACKING_HITS = {
+  LISTING_PAGE: dataStreamsPrefix,
+  ADD_DATA_STREAM: `${dataStreamsPrefix}::add-datastream`,
+  GO_BACK: `${dataStreamsPrefix}::back-previous-page`,
+  LDP_DETAIL: `${dataStreamsPrefix}::ldp-detail`,
+  SUBSCRIBE: `${dataStreamsPrefix}::subscribe`,
+  UNSUBSCRIBE: `${dataStreamsPrefix}::unsubscribe`,
+};
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.controller.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.controller.js
new file mode 100644
index 000000000000..e05bac5d0513
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.controller.js
@@ -0,0 +1,28 @@
+export default class HostingCdnLogsController {
+  /* @ngInject */
+  constructor(
+    $translate,
+    trackClick,
+    trackingHits,
+    url,
+    apiVersion,
+    kind,
+    description,
+    goToListingPage,
+    logKinds,
+    logKindsKeys,
+    logServiceGuideLink,
+  ) {
+    this.$translate = $translate;
+    this.trackClick = trackClick;
+    this.trackingHits = trackingHits;
+    this.url = url;
+    this.apiVersion = apiVersion;
+    this.kind = kind;
+    this.description = description;
+    this.goToListingPage = goToListingPage;
+    this.logKinds = logKinds;
+    this.logKindsKeys = logKindsKeys;
+    this.logServiceGuideLink = logServiceGuideLink;
+  }
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.html b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.html
new file mode 100644
index 000000000000..f2a7ae3ac42a
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.html
@@ -0,0 +1,18 @@
+<div data-ovh-alert></div>
+
+<log-to-customer-live-tail
+    data-log-api-url=":: $ctrl.url.LOG"
+    data-log-subscription-url=":: $ctrl.url.LOG_SUBSCRIPTION"
+    data-log-service-guide-link=":: $ctrl.logServiceGuideLink"
+    data-api-version=":: $ctrl.apiVersion"
+    data-go-to-listing-page=":: $ctrl.goToListingPage"
+    data-log-kinds-list=":: $ctrl.logKinds"
+    data-log-kinds-keys=":: $ctrl.logKindsKeys"
+    data-kind-init-value=":: $ctrl.kind"
+    data-track-click=":: $ctrl.trackClick"
+    data-tracking-hits=":: $ctrl.trackingHits"
+>
+    <main-description>
+        <span data-ng-bind=":: $ctrl.description"></span>
+    </main-description>
+</log-to-customer-live-tail>
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.routing.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.routing.js
new file mode 100644
index 000000000000..ee8d563ac237
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.routing.js
@@ -0,0 +1,74 @@
+import template from './logs.html';
+import controller from './logs.controller';
+import {
+  CDN_HOSTING_LOG_KEYS,
+  CDN_HOSTING_LOGS_TRACKING_HITS,
+  LOGS_TRACKING_CONTEXT,
+} from './logs.constants';
+
+const redirectTo = (transition) =>
+  transition
+    .injector()
+    .getAsync('logKinds')
+    .then((logKinds) =>
+      !logKinds || logKinds.length === 0 ? 'app.hosting.dashboard.cdn' : false,
+    );
+
+export default /* @ngInject */ ($stateProvider) => {
+  $stateProvider.state('app.hosting.dashboard.cdn.logs', {
+    url: '/logs',
+    views: {
+      'cdnView@app.hosting.dashboard.cdn': {
+        template,
+        controller,
+        controllerAs: '$ctrl',
+      },
+    },
+    atInternet: {
+      rename: CDN_HOSTING_LOGS_TRACKING_HITS.LOGS_PAGE,
+      ...LOGS_TRACKING_CONTEXT,
+    },
+    params: {
+      kind: null,
+    },
+    redirectTo,
+    resolve: {
+      breadcrumb: /* @ngInject */ ($translate) =>
+        $translate.instant('cdn_logs'),
+      trackClick: /* @ngInject */ (atInternet) => (hit) => {
+        atInternet.trackClick({
+          name: hit,
+          type: 'action',
+          ...LOGS_TRACKING_CONTEXT,
+        });
+      },
+      trackingHits: () => CDN_HOSTING_LOGS_TRACKING_HITS,
+      url: /* @ngInject */ ($stateParams) => {
+        const baseLogsUrl = `/hosting/web/${$stateParams.productId}/cdn/log`;
+        return {
+          LOG: `${baseLogsUrl}/url`,
+          LOG_SUBSCRIPTION: `${baseLogsUrl}/subscription`,
+        };
+      },
+      apiVersion: /* @ngInject */ (API_VERSION) => API_VERSION.v1,
+      kind: /* @ngInject */ (logKinds, $transition$) =>
+        $transition$.params().kind || logKinds[0],
+      description: /* @ngInject */ ($translate) =>
+        $translate.instant('cdn_logs_description'),
+      goToListingPage: /* @ngInject */ ($state, $transition$) => (params) =>
+        $state.go('app.hosting.dashboard.cdn.logs.data-streams', {
+          ...$transition$.params(),
+          ...params,
+        }),
+      logKinds: /* @ngInject */ (hostingCdnLogsService) =>
+        hostingCdnLogsService.getLogKinds().catch(() => []),
+      logKindsKeys: /* @ngInject */ (logKinds) =>
+        Object.fromEntries(
+          logKinds.map((kind) => [kind, CDN_HOSTING_LOG_KEYS]),
+        ),
+      logServiceGuideLink: /* @ngInject */ (coreConfig, DATA_PLATFORM_GUIDE) =>
+        DATA_PLATFORM_GUIDE[coreConfig.getUser().ovhSubsidiary] ??
+        DATA_PLATFORM_GUIDE.WE,
+    },
+  });
+};
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.service.js b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.service.js
new file mode 100644
index 000000000000..0ea113b7f54c
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/logs.service.js
@@ -0,0 +1,10 @@
+export default class HostingCdnLogsService {
+  /* @ngInject */
+  constructor($http) {
+    this.$http = $http;
+  }
+
+  getLogKinds() {
+    return this.$http.get('/hosting/web/cdn/log/kind').then(({ data }) => data);
+  }
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/logs/translations/Messages_fr_FR.json b/packages/manager/apps/web/client/app/hosting/cdn/logs/translations/Messages_fr_FR.json
new file mode 100644
index 000000000000..24cc0dcf8981
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/logs/translations/Messages_fr_FR.json
@@ -0,0 +1,3 @@
+{
+  "cdn_logs_description": "Vous trouverez ci-dessous les logs en temps réel générés par votre service CDN."
+}
diff --git a/packages/manager/apps/web/client/app/hosting/cdn/translations/Messages_fr_FR.json b/packages/manager/apps/web/client/app/hosting/cdn/translations/Messages_fr_FR.json
new file mode 100644
index 000000000000..0966d427982c
--- /dev/null
+++ b/packages/manager/apps/web/client/app/hosting/cdn/translations/Messages_fr_FR.json
@@ -0,0 +1,5 @@
+{
+  "cdn_tab_statistics": "Statistiques",
+  "cdn_tab_ssl": "SSL",
+  "cdn_tab_domains": "Domaines"
+}
diff --git a/packages/manager/apps/web/client/app/hosting/dashboard/hosting.controller.js b/packages/manager/apps/web/client/app/hosting/dashboard/hosting.controller.js
index 55627fe57c76..ad726050c03c 100644
--- a/packages/manager/apps/web/client/app/hosting/dashboard/hosting.controller.js
+++ b/packages/manager/apps/web/client/app/hosting/dashboard/hosting.controller.js
@@ -34,6 +34,7 @@ export default class {
     cdnProperties,
     cdnServiceInfo,
     cdnRange,
+    cdnLogsLink,
     coreURLBuilder,
     cronLink,
     currentActiveLink,
@@ -105,6 +106,7 @@ export default class {
     this.boostLink = boostLink;
     this.constants = constants;
     this.availableOptions = availableOptions;
+    this.cdnLogsLink = cdnLogsLink;
     this.coreURLBuilder = coreURLBuilder;
     this.cronLink = cronLink;
     this.currentActiveLink = currentActiveLink;
diff --git a/packages/manager/apps/web/client/app/hosting/dashboard/hosting.html b/packages/manager/apps/web/client/app/hosting/dashboard/hosting.html
index f971f0c2e8dd..9394602b7ed5 100644
--- a/packages/manager/apps/web/client/app/hosting/dashboard/hosting.html
+++ b/packages/manager/apps/web/client/app/hosting/dashboard/hosting.html
@@ -274,6 +274,10 @@ <h1 class="d-inline-block mb-0 word-break">
             >
                 <span data-translate="hosting_tab_INDY"></span>
             </oui-header-tabs-item>
+            <oui-header-tabs-item data-ng-if="$ctrl.$scope.cdnProperties" href="{{ $ctrl.cdnLogsLink }}"
+                active="$ctrl.currentActiveLink() === $ctrl.cdnLogsLink">
+                <span data-translate="hosting_tab_CDN_LOGS"></span>
+            </oui-header-tabs-item>
             <oui-header-tabs-divider
                 data-ng-if="!$ctrl.hosting.isCloudWeb && $ctrl.isEmailDomainAvailable"
             ></oui-header-tabs-divider>
diff --git a/packages/manager/apps/web/client/app/hosting/dashboard/hosting.routes.js b/packages/manager/apps/web/client/app/hosting/dashboard/hosting.routes.js
index 82bbd6418960..d223cc8f4537 100644
--- a/packages/manager/apps/web/client/app/hosting/dashboard/hosting.routes.js
+++ b/packages/manager/apps/web/client/app/hosting/dashboard/hosting.routes.js
@@ -102,6 +102,8 @@ export default /* @ngInject */ ($stateProvider) => {
         $state.href('app.hosting.dashboard.boost', $transition$.params()),
       indyLink: /* @ngInject */ ($state, $transition$) =>
         $state.href('app.hosting.dashboard.indy', $transition$.params()),
+      cdnLogsLink: /* @ngInject */ ($state, $transition$) =>
+        $state.href('app.hosting.dashboard.cdn.logs', $transition$.params()),
       goToEmails: /* @ngInject */ ($state) => (email) => {
         return $state.go('app.email.domain.mailing-list', {
           productId: email.domain,
diff --git a/packages/manager/apps/web/client/app/hosting/dashboard/translations/Messages_fr_FR.json b/packages/manager/apps/web/client/app/hosting/dashboard/translations/Messages_fr_FR.json
index 4c688e6b2ad2..eb64f834e94f 100644
--- a/packages/manager/apps/web/client/app/hosting/dashboard/translations/Messages_fr_FR.json
+++ b/packages/manager/apps/web/client/app/hosting/dashboard/translations/Messages_fr_FR.json
@@ -1277,6 +1277,7 @@
   "hosting_action_edit_choose_rollback": "Revenir à une configuration précédente",
   "hosting_action_config_edit_no_choice": "Une seule configuration disponible dans l’historique. Le choix est donc désactivé, cliquez sur \"valider\" pour appliquer les valeurs présentées ci-dessous.",
   "hosting_tab_USER_LOGS": "Statistiques et logs",
+  "hosting_tab_CDN_LOGS": "Logs CDN",
   "hosting_tab_USER_LOGS_configuration_user_create_title": "Créer un nouvel utilisateur",
   "hosting_tab_USER_LOGS_configuration_user_create_step1_question": "Ce nouvel utilisateur aura accès à vos statistiques et aux logs de vos sites en plus des contacts normaux de l'hébergement (administratif, technique et facturation). Vous pouvez librement ajouter, modifier ou supprimer ces utilisateurs supplémentaires.",
   "hosting_tab_USER_LOGS_configuration_user_create_step1_user": "Utilisateur",