diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index 8330ac4fc2..56414baaa5 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -848,6 +848,7 @@
     },
     "settings_tls_certificates": {
         "title": "TLS certificates",
+        "certificates": "Certificates",
         "show_all": "Show all",
         "request_certificate": "Request certificate",
         "filter_certificates": "Filter certificates",
@@ -889,6 +890,7 @@
         "uploaded": "Uploaded",
         "automatic": "Automatic",
         "obsolete": "Obsolete",
+        "obsolete_tooltip": "No longer referenced by any application, HTTP route, or user request. It may still be reachable by clients until renewed or deleted.",
         "valid": "Valid",
         "expiring": "Expiring",
         "expired": "Expired",
@@ -931,16 +933,20 @@
         "certificates_not_displayed": "Certificates configured on {instanceId} are not displayed"
     },
     "settings_acme_servers": {
-        "title": "ACME servers",
-        "search_acme_server": "Search ACME server",
-        "no_acme_server": "No ACME server",
-        "no_acme_server_description": "There is no ACME server configured",
-        "url": "URL",
+        "acme_settings": "ACME settings",
+        "search_acme_settings": "Search",
+        "no_acme_settings": "No ACME settings",
+        "no_acme_settings_description": "No cluster node has ACME settings configured",
+        "acme_directory_url": "ACME directory URL",
+        "acme_directory_url_helper": "URL of the ACME provider used to issue certificates.",
         "node": "Node",
-        "edit_acme_server": "Edit ACME server",
-        "edit_acme_server_for_node": "Edit ACME server for {node}",
-        "reload_page": "Page reload needed",
-        "edit_acme_server_leader_node_warning": "You are editing the ACME server for the leader node. After you click 'Edit ACME server' you'll need to reload the page"
+        "challenge": "Challenge type",
+        "challenge_http_01": "HTTP-01",
+        "challenge_tls_alpn_01": "TLS-ALPN-01",
+        "edit_acme_settings": "Edit ACME settings",
+        "acme_settings_for_node": "ACME settings for {node}",
+        "acme_restart_message": "HTTP clients on {node} will be briefly disconnected. The connection should resume automatically — otherwise, reload the page manually.",
+        "save_result_unknown": "Traefik restarted before the result was known. Check the ACME settings of the node and try again if needed."
     },
     "apps_lets_encrypt": {
         "lets_encrypt_tips": "Requests a Let's Encrypt TLS certificate automatically. Disabling this option deletes the existing certificate (if any). You can also view or delete it in Cluster settings > TLS certificates.",
diff --git a/core/ui/src/components/settings/AcmeSettingsPanel.vue b/core/ui/src/components/settings/AcmeSettingsPanel.vue
new file mode 100644
index 0000000000..6f66af03de
--- /dev/null
+++ b/core/ui/src/components/settings/AcmeSettingsPanel.vue
@@ -0,0 +1,304 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <div>
+    <cv-tile light>
+      <!-- no nested cv-grid: bx--grid caps at 99rem and centers, leaving empty
+           gutters above 1584px -->
+      <!-- NsDataTable would replace the rows: report partial failures here -->
+      <NsInlineNotification
+        v-if="tableError && servers.length"
+        kind="error"
+        :title="tableErrorTitle"
+        :description="tableErrorDescription"
+        :showCloseButton="false"
+      />
+      <NsDataTable
+        :allRows="servers"
+        :columns="i18nTableColumns"
+        :rawColumns="tableColumns"
+        :sortable="true"
+        :pageSizes="[10, 25, 50, 100]"
+        :overflow-menu="true"
+        isSearchable
+        :searchPlaceholder="$t('settings_acme_servers.search_acme_settings')"
+        :searchClearLabel="$t('common.clear_search')"
+        :noSearchResultsLabel="$t('common.no_search_results')"
+        :noSearchResultsDescription="$t('common.no_search_results_description')"
+        :isLoading="loadingServers"
+        :skeletonRows="5"
+        :isErrorShown="!!tableError && !servers.length"
+        :errorTitle="tableErrorTitle"
+        :errorDescription="tableErrorDescription"
+        :itemsPerPageLabel="$t('pagination.items_per_page')"
+        :rangeOfTotalItemsLabel="$t('pagination.range_of_total_items')"
+        :ofTotalPagesLabel="$t('pagination.of_total_pages')"
+        :backwardText="$t('pagination.previous_page')"
+        :forwardText="$t('pagination.next_page')"
+        :pageNumberLabel="$t('pagination.page_number')"
+        @updatePage="tablePage = $event"
+      >
+        <template slot="empty-state">
+          <NsEmptyState :title="$t('settings_acme_servers.no_acme_settings')">
+            <template #description>
+              <div>
+                {{ $t("settings_acme_servers.no_acme_settings_description") }}
+              </div>
+            </template>
+          </NsEmptyState>
+        </template>
+        <template slot="data">
+          <cv-data-table-row
+            v-for="(row, rowIndex) in tablePage"
+            :key="`${rowIndex}`"
+            :value="`${rowIndex}`"
+          >
+            <cv-data-table-cell>
+              <span>{{ row.node }}</span>
+            </cv-data-table-cell>
+            <cv-data-table-cell>
+              <span>
+                {{ row.url }}
+              </span>
+            </cv-data-table-cell>
+            <cv-data-table-cell>
+              <NsTag
+                v-if="row.challenge"
+                :kind="getChallengeTagKind(row.challenge)"
+                size="sm"
+                :label="getChallengeLabel(row.challenge)"
+              />
+            </cv-data-table-cell>
+            <cv-data-table-cell>
+              <div class="flex justify-end">
+                <NsButton
+                  kind="ghost"
+                  :icon="Edit20"
+                  size="small"
+                  @click="showEditServerModal(row)"
+                  :data-test-id="row.nodeId + '-edit'"
+                  >{{ $t("common.edit") }}
+                </NsButton>
+              </div>
+            </cv-data-table-cell>
+          </cv-data-table-row>
+        </template>
+      </NsDataTable>
+    </cv-tile>
+    <EditAcmeServerModal
+      :isShown="isShownEditServerModal"
+      :server="currentServer"
+      @hide="hideEditServerModal"
+      @reloadServers="onReloadServers"
+    />
+  </div>
+</template>
+
+<script>
+import to from "await-to-js";
+import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import EditAcmeServerModal, {
+  ACME_CHALLENGE_TYPES,
+} from "@/components/settings/EditAcmeServerModal.vue";
+
+export default {
+  name: "AcmeSettingsPanel",
+  components: { EditAcmeServerModal },
+  mixins: [TaskService, UtilService, IconService],
+  props: {
+    // the parent page already lists them: do not run the task twice
+    traefikInstances: {
+      type: Array,
+      default: () => [],
+    },
+    isLoadingInstances: Boolean,
+    instancesError: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      tablePage: [],
+      tableColumns: ["node", "url", "challenge"],
+      tableColumnLabelKeys: [
+        "settings_acme_servers.node",
+        "settings_acme_servers.acme_directory_url",
+        "settings_acme_servers.challenge",
+      ],
+      servers: [],
+      isShownEditServerModal: false,
+      currentErrorAction: "",
+      currentErrorDescription: "",
+      currentServer: null,
+      taskListeners: [],
+      loading: {
+        getAcmeServerNum: 0,
+      },
+      error: {
+        getAcmeServer: "",
+      },
+    };
+  },
+  computed: {
+    i18nTableColumns() {
+      return this.tableColumnLabelKeys.map((key) => this.$t(key));
+    },
+    loadingServers() {
+      return this.isLoadingInstances || this.loading.getAcmeServerNum > 0;
+    },
+    tableError() {
+      return this.instancesError || this.error.getAcmeServer;
+    },
+    tableErrorTitle() {
+      return this.instancesError
+        ? this.$t("action.list-installed-modules")
+        : this.currentErrorAction;
+    },
+    tableErrorDescription() {
+      return this.instancesError || this.currentErrorDescription;
+    },
+  },
+  watch: {
+    // a Traefik restart kills the websocket: the parent republishes, so this
+    // reload is also how the table recovers
+    traefikInstances: function () {
+      this.getAcmeServer();
+    },
+  },
+  created() {
+    if (this.traefikInstances.length) {
+      this.getAcmeServer();
+    }
+  },
+  beforeDestroy() {
+    // a task completing after destroy would re-fire the whole task chain
+    this.clearTaskListeners();
+  },
+  methods: {
+    registerTaskListener(eventName, handler) {
+      this.$root.$once(eventName, handler);
+      this.taskListeners.push([eventName, handler]);
+    },
+    clearTaskListeners() {
+      this.taskListeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      this.taskListeners = [];
+    },
+    getChallengeType(challenge) {
+      return ACME_CHALLENGE_TYPES.find((type) => type.value === challenge);
+    },
+    getChallengeTagKind(challenge) {
+      const challengeType = this.getChallengeType(challenge);
+      // cv-tag validates the kind against a fixed list
+      return challengeType ? challengeType.tagKind : "gray";
+    },
+    getChallengeLabel(challenge) {
+      const challengeType = this.getChallengeType(challenge);
+      return challengeType ? this.$t(challengeType.labelKey) : challenge;
+    },
+    showEditServerModal(server) {
+      this.currentServer = server;
+      this.isShownEditServerModal = true;
+    },
+    hideEditServerModal() {
+      this.isShownEditServerModal = false;
+    },
+    clearTableError() {
+      this.error.getAcmeServer = "";
+      this.currentErrorAction = "";
+      this.currentErrorDescription = "";
+    },
+    async getAcmeServer() {
+      // a handler of a previous round would decrement the counter of this one
+      this.clearTaskListeners();
+      this.servers = [];
+      // otherwise a transient error sticks after the nodes answer again
+      this.clearTableError();
+      // count upfront: the counter must not hit zero between two iterations
+      this.loading.getAcmeServerNum = this.traefikInstances.length;
+
+      for (const traefikInstance of this.traefikInstances) {
+        const taskAction = "get-acme-server";
+        const eventId = this.getUuid();
+
+        // register to task events
+
+        this.registerTaskListener(
+          `${taskAction}-aborted-${eventId}`,
+          this.getAcmeServerAborted
+        );
+
+        this.registerTaskListener(
+          `${taskAction}-completed-${eventId}`,
+          this.getAcmeServerCompleted
+        );
+
+        const res = await to(
+          this.createModuleTaskForApp(traefikInstance.id, {
+            action: taskAction,
+            data: {
+              expand_list: true,
+            },
+            extra: {
+              title: this.$t("action." + taskAction),
+              isNotificationHidden: true,
+              traefikInstance: traefikInstance,
+              eventId,
+            },
+          })
+        );
+        const err = res[0];
+
+        if (err) {
+          console.error(`error creating task ${taskAction}`, err);
+          const errMessage = this.getErrorMessage(err);
+          this.error.getAcmeServer = errMessage;
+          this.currentErrorAction = this.$t("action." + taskAction);
+          this.currentErrorDescription = errMessage;
+          this.loading.getAcmeServerNum--;
+        }
+      }
+    },
+    getAcmeServerAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.getAcmeServer = this.$t("error.generic_error");
+      this.currentErrorAction = this.$t("action." + taskContext.action);
+      this.currentErrorDescription = this.$t("error.generic_error");
+      this.loading.getAcmeServerNum--;
+    },
+    getAcmeServerCompleted(taskContext, taskResult) {
+      const server = taskResult.output;
+      const traefikId = taskContext.extra.traefikInstance.id;
+      const nodeId = taskContext.extra.traefikInstance.node;
+      const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
+      const node = { id: nodeId, ui_name: nodeUiName };
+      const nodeLabel = this.getShortNodeLabel(node) + ` (${traefikId})`;
+      server.node = nodeLabel;
+      server.nodeId = nodeId;
+      server.longNodeLabel = this.getNodeLabel(node);
+      server.traefikInstance = traefikId;
+
+      // replace instead of append: an event delivered after a reconnection
+      // reset would otherwise duplicate the row
+      const index = this.servers.findIndex(
+        (existing) => existing.traefikInstance === traefikId
+      );
+
+      if (index > -1) {
+        this.servers.splice(index, 1, server);
+      } else {
+        this.servers.push(server);
+      }
+      this.servers.sort(this.sortByProperty("node"));
+      this.loading.getAcmeServerNum--;
+    },
+    onReloadServers() {
+      this.getAcmeServer();
+    },
+  },
+};
+</script>
diff --git a/core/ui/src/components/settings/EditAcmeServerModal.vue b/core/ui/src/components/settings/EditAcmeServerModal.vue
index dcf73e0c80..e3e9f0d6e5 100644
--- a/core/ui/src/components/settings/EditAcmeServerModal.vue
+++ b/core/ui/src/components/settings/EditAcmeServerModal.vue
@@ -12,29 +12,69 @@
     @primary-click="setAcmeServer"
   >
     <template slot="title">{{
-      $t("settings_acme_servers.edit_acme_server_for_node", {
-        node: server ? server.node : "",
-      })
+      $t("settings_acme_servers.edit_acme_settings")
     }}</template>
     <template slot="content">
       <cv-form @submit.prevent="setAcmeServer">
+        <div class="mg-bottom-md">
+          {{
+            $t("settings_acme_servers.acme_settings_for_node", {
+              node: server ? server.node : "",
+            })
+          }}
+        </div>
         <NsInlineNotification
-          v-if="server && server.nodeId == leaderNode.id"
+          v-if="server"
           kind="warning"
-          :title="$t('settings_acme_servers.reload_page')"
+          :title="$t('settings_tls_certificates.traefik_will_be_restarted')"
           :description="
-            $t('settings_acme_servers.edit_acme_server_leader_node_warning')
+            $t('settings_acme_servers.acme_restart_message', {
+              node: server.node,
+            })
           "
           :showCloseButton="false"
         />
         <NsTextInput
           v-model.trim="url"
-          :label="$t('settings_acme_servers.url')"
+          :label="$t('settings_acme_servers.acme_directory_url')"
+          :helper-text="$t('settings_acme_servers.acme_directory_url_helper')"
           :invalid-message="error.url"
           :disabled="loading.setAcmeServer"
           data-modal-primary-focus
           ref="url"
         />
+        <!-- an older module reports no challenge type: do not invent one -->
+        <!-- ref on the wrapper: a ref inside v-for is an array, focusElement would throw -->
+        <div
+          v-if="isChallengeSupported"
+          class="mg-top-md"
+          tabindex="-1"
+          ref="challenge"
+        >
+          <label id="acme-challenge-label" class="bx--label">{{
+            $t("settings_acme_servers.challenge")
+          }}</label>
+          <div role="group" aria-labelledby="acme-challenge-label">
+            <cv-radio-group :vertical="true">
+              <!-- disabled must be per button: cv-radio-group has no such prop -->
+              <cv-radio-button
+                v-for="challengeType in challengeTypes"
+                :key="challengeType.value"
+                :label="$t(challengeType.labelKey)"
+                :value="challengeType.value"
+                name="acme-challenge"
+                v-model="challenge"
+                :disabled="loading.setAcmeServer"
+              />
+            </cv-radio-group>
+          </div>
+          <div
+            v-if="error.challenge"
+            class="bx--form-requirement challenge-error"
+          >
+            {{ error.challenge }}
+          </div>
+        </div>
         <NsInlineNotification
           v-if="error.setAcmeServer"
           kind="error"
@@ -45,16 +85,30 @@
       </cv-form>
     </template>
     <template slot="secondary-button">{{ $t("common.cancel") }}</template>
-    <template slot="primary-button">{{
-      $t("settings_acme_servers.edit_acme_server")
-    }}</template>
+    <template slot="primary-button">{{ $t("common.save") }}</template>
   </NsModal>
 </template>
 
 <script>
 import to from "await-to-js";
 import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
-import { mapGetters } from "vuex";
+import { mapState } from "vuex";
+
+// DNS-01 is not implemented yet: adding an entry here is enough
+export const ACME_CHALLENGE_TYPES = [
+  {
+    value: "HTTP-01",
+    labelKey: "settings_acme_servers.challenge_http_01",
+    tagKind: "blue",
+  },
+  {
+    value: "TLS-ALPN-01",
+    labelKey: "settings_acme_servers.challenge_tls_alpn_01",
+    tagKind: "purple",
+  },
+];
+
+export const DEFAULT_ACME_CHALLENGE_TYPE = "HTTP-01";
 
 export default {
   name: "EditAcmeServerModal",
@@ -68,26 +122,66 @@ export default {
   data() {
     return {
       url: "",
+      challenge: DEFAULT_ACME_CHALLENGE_TYPE,
       loading: {
         setAcmeServer: false,
       },
       error: {
         setAcmeServer: "",
         url: "",
+        challenge: "",
       },
+      taskListeners: [],
     };
   },
   computed: {
-    ...mapGetters(["leaderNode"]),
+    ...mapState(["isWebsocketConnected"]),
+    challengeTypes() {
+      return ACME_CHALLENGE_TYPES;
+    },
+    isChallengeSupported() {
+      return !!this.server && this.server.challenge !== undefined;
+    },
   },
   watch: {
+    isWebsocketConnected: function (isConnected) {
+      // the restart cut the request off before any task event: the outcome is
+      // unknown, so say so instead of closing as if the save had succeeded
+      if (isConnected && this.loading.setAcmeServer) {
+        this.clearTaskListeners();
+        this.loading.setAcmeServer = false;
+        this.error.setAcmeServer = this.$t(
+          "settings_acme_servers.save_result_unknown"
+        );
+        this.$emit("reloadServers");
+      }
+    },
     isShown: function () {
       if (this.isShown) {
         this.url = this.server.url;
+        // an empty reported challenge must not be silently promoted to HTTP-01
+        this.challenge =
+          this.server.challenge === undefined
+            ? DEFAULT_ACME_CHALLENGE_TYPE
+            : this.server.challenge;
       }
     },
   },
+  beforeDestroy() {
+    // a save completing after destroy runs focusElement on a deleted ref
+    this.clearTaskListeners();
+  },
   methods: {
+    registerTaskListener(eventName, handler) {
+      this.$root.$once(eventName, handler);
+      this.taskListeners.push([eventName, handler]);
+    },
+    clearTaskListeners() {
+      this.taskListeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      this.taskListeners = [];
+    },
     onModalHidden() {
       this.clearErrors();
       this.$emit("hide");
@@ -106,6 +200,15 @@ export default {
           isValidationOk = false;
         }
       }
+
+      if (this.isChallengeSupported && !this.challenge) {
+        this.error.challenge = this.$t("common.required");
+
+        if (isValidationOk) {
+          this.focusElement("challenge");
+          isValidationOk = false;
+        }
+      }
       return isValidationOk;
     },
     async setAcmeServer() {
@@ -118,35 +221,46 @@ export default {
       const eventId = this.getUuid();
 
       // register to task error
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-aborted-${eventId}`,
         this.setAcmeServerAborted
       );
 
       // register to task validation
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-validation-ok-${eventId}`,
         this.setAcmeServerValidationOk
       );
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-validation-failed-${eventId}`,
         this.setAcmeServerValidationFailed
       );
 
       // register to task completion
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-completed-${eventId}`,
         this.setAcmeServerCompleted
       );
 
+      // the action sets additionalProperties false: send only reported fields
+      const data = { url: this.url };
+
+      if (this.isChallengeSupported) {
+        data.challenge = this.challenge;
+      }
+
+      if (this.server.email) {
+        // a missing field resets the email, and the schema may reject an empty
+        // string: forward it only when there is one
+        data.email = this.server.email;
+      }
+
       const res = await to(
         this.createModuleTaskForApp(this.server.traefikInstance, {
           action: taskAction,
-          data: {
-            url: this.url,
-          },
+          data: data,
           extra: {
-            title: this.$t("settings_acme_servers.edit_acme_server"),
+            title: this.$t("settings_acme_servers.edit_acme_settings"),
             description: this.$t("common.processing"),
             eventId,
           },
@@ -182,14 +296,21 @@ export default {
         const param = validationError.parameter;
 
         // set i18n error message
-        this.error[param] = this.getI18nStringWithFallback(
+        const message = this.getI18nStringWithFallback(
           "settings_acme_servers." + validationError.error,
           "error." + validationError.error
         );
 
-        if (!focusAlreadySet) {
-          this.focusElement(param);
-          focusAlreadySet = true;
+        // focusElement would throw on a parameter whose field is not rendered
+        if (param in this.error && this.$refs[param]) {
+          this.error[param] = message;
+
+          if (!focusAlreadySet) {
+            this.focusElement(param);
+            focusAlreadySet = true;
+          }
+        } else {
+          this.error.setAcmeServer = message;
         }
       }
     },
@@ -205,4 +326,17 @@ export default {
 
 <style scoped lang="scss">
 @import "../../styles/carbon-utils";
+
+.bx--inline-notification {
+  max-width: 38rem;
+}
+
+// carbon reveals .bx--form-requirement only next to a [data-invalid] wrapper,
+// which a radio group never is; $text-error is unreachable from carbon-utils
+.challenge-error {
+  display: block;
+  max-height: none;
+  overflow: visible;
+  color: #da1e28;
+}
 </style>
diff --git a/core/ui/src/components/settings/RequestTlsCertificateModal.vue b/core/ui/src/components/settings/RequestTlsCertificateModal.vue
index 55595ae578..c40b57bf4c 100644
--- a/core/ui/src/components/settings/RequestTlsCertificateModal.vue
+++ b/core/ui/src/components/settings/RequestTlsCertificateModal.vue
@@ -137,7 +137,9 @@
     </template>
     <template slot="secondary-button">{{ $t("common.cancel") }}</template>
     <template slot="primary-button">{{
-      $t("settings_tls_certificates.request_certificate")
+      certificate
+        ? $t("common.save")
+        : $t("settings_tls_certificates.request_certificate")
     }}</template>
   </NsModal>
 </template>
diff --git a/core/ui/src/components/settings/TlsCertificatesPanel.vue b/core/ui/src/components/settings/TlsCertificatesPanel.vue
new file mode 100644
index 0000000000..084605f455
--- /dev/null
+++ b/core/ui/src/components/settings/TlsCertificatesPanel.vue
@@ -0,0 +1,1186 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <div>
+    <cv-tile light>
+      <div v-if="offlineTraefikInstances.length">
+        <NsInlineNotification
+          v-for="instance in offlineTraefikInstances"
+          :key="instance.id"
+          kind="error"
+          :title="
+            $t('settings_tls_certificates.node_is_offline', {
+              node: getNodeLabel(instance),
+            })
+          "
+          :description="getOfflineInstanceDescription(instance)"
+          :showCloseButton="false"
+        />
+      </div>
+      <div v-if="listCertificatesErrors.length">
+        <NsInlineNotification
+          v-for="(error, index) in listCertificatesErrors"
+          :key="index"
+          kind="error"
+          :title="error.title"
+          :description="error.description"
+          :showCloseButton="false"
+        />
+      </div>
+      <div class="toolbar gap-2 flex-wrap" v-if="certificates.length">
+        <!-- request certificate -->
+        <NsButton
+          v-if="nodesWithoutCertificate.length"
+          kind="primary"
+          :icon="Add20"
+          :disabled="loadingCertificates"
+          @click="showRequestCertificateModal"
+          >{{ $t("settings_tls_certificates.request_certificate") }}
+        </NsButton>
+        <cv-tooltip
+          v-else
+          alignment="center"
+          direction="top"
+          :tip="
+            $t('settings_tls_certificates.request_certificate_disabled_message')
+          "
+        >
+          <NsButton
+            kind="primary"
+            :icon="Add20"
+            disabled
+            @click="showRequestCertificateModal"
+            >{{ $t("settings_tls_certificates.request_certificate") }}
+          </NsButton>
+        </cv-tooltip>
+        <!-- upload certificate -->
+        <NsButton
+          kind="secondary"
+          :icon="Upload20"
+          @click="uploadTlsCertificateState.setVisible(true)"
+          >{{ $t("settings_tls_certificates.add_custom_certificate") }}
+        </NsButton>
+        <!-- delete obsolete certificates -->
+        <NsButton
+          kind="tertiary"
+          :icon="TrashCan20"
+          @click="showDeleteObsoleteCertificatesModal"
+          :disabled="!nodesWithObsoleteCertificates.length"
+          >{{ $t("settings_tls_certificates.delete_obsolete_certificates") }}
+        </NsButton>
+      </div>
+      <div>
+        <div>
+          <div class="data-table-filters">
+            <cv-search
+              :label="$t('common.search')"
+              :placeholder="$t('settings_tls_certificates.filter_certificates')"
+              :clear-aria-label="$t('common.clear_search')"
+              v-model="filter.text"
+              :disabled="loadingCertificates"
+              size="large"
+              ref="tableSearch"
+              class="self-end"
+              @input="onSearchInput"
+            >
+            </cv-search>
+            <NsComboBox
+              v-model="filter.certificateType"
+              :label="$t('common.choose')"
+              :title="$t('settings_tls_certificates.ui_type')"
+              :auto-filter="true"
+              :auto-highlight="true"
+              :options="typeOptions"
+              :disabled="loadingCertificates"
+            >
+            </NsComboBox>
+            <NsComboBox
+              v-model="filter.certificateStatus"
+              :label="$t('common.choose')"
+              :title="$t('settings_tls_certificates.status')"
+              :auto-filter="true"
+              :auto-highlight="true"
+              :options="statusOptions"
+              :disabled="loadingCertificates"
+            >
+            </NsComboBox>
+            <NsComboBox
+              :value="selectedNodeId"
+              @change="$emit('update:selectedNodeId', $event)"
+              :label="$t('common.choose')"
+              :title="$t('common.node')"
+              :auto-filter="true"
+              :auto-highlight="true"
+              :options="nodesForFilter"
+              :disabled="loadingCertificates"
+            >
+            </NsComboBox>
+            <cv-link @click="clearFilters()" class="self-end mb-3 shrink-0"
+              >{{ $t("common.clear_filters") }}
+            </cv-link>
+          </div>
+          <NsDataTable
+            :allRows="filteredCertificates"
+            :columns="i18nTableColumns"
+            :rawColumns="tableColumns"
+            :sortable="true"
+            :pageSizes="[10, 25, 50, 100]"
+            :overflow-menu="true"
+            :isSearchable="false"
+            :noSearchResultsLabel="$t('common.no_search_results')"
+            :noSearchResultsDescription="
+              $t('common.no_search_results_description')
+            "
+            :isLoading="loadingCertificates"
+            :skeletonRows="5"
+            :isErrorShown="!!instancesError"
+            :errorTitle="$t('action.list-installed-modules')"
+            :errorDescription="instancesError"
+            :itemsPerPageLabel="$t('pagination.items_per_page')"
+            :rangeOfTotalItemsLabel="$t('pagination.range_of_total_items')"
+            :ofTotalPagesLabel="$t('pagination.of_total_pages')"
+            :backwardText="$t('pagination.previous_page')"
+            :forwardText="$t('pagination.next_page')"
+            :pageNumberLabel="$t('pagination.page_number')"
+            ref="certificatesTable"
+            @updatePage="tablePage = $event"
+          >
+            <template slot="empty-state">
+              <template v-if="hasActiveFilters && certificates.length">
+                <!-- no search results -->
+                <NsEmptyState
+                  :title="$t('common.no_search_results')"
+                  key="no-results-empty-state"
+                >
+                  <template #description>
+                    <div class="flex flex-col items-center text-center gap-2">
+                      <p>
+                        {{ $t("common.no_search_results_description") }}
+                      </p>
+                      <NsButton
+                        kind="ghost"
+                        size="field"
+                        @click="clearFilters()"
+                        >{{ $t("common.clear_filters") }}
+                      </NsButton>
+                    </div>
+                  </template>
+                </NsEmptyState>
+              </template>
+              <template v-else>
+                <!-- no tls certificates -->
+                <NsEmptyState
+                  :title="$t('settings_tls_certificates.no_tls_certificate')"
+                  key="no-certificates-empty-state"
+                >
+                  <template #pictogram>
+                    <DocumentSecurityPictogram />
+                  </template>
+                  <template #description>
+                    <div class="flex flex-col items-center gap-4">
+                      <p>
+                        {{
+                          $t(
+                            "settings_tls_certificates.no_tls_certificate_description"
+                          )
+                        }}
+                      </p>
+                      <div class="flex flex-col items-center gap-2">
+                        <NsButton
+                          v-if="nodesWithoutCertificate.length"
+                          kind="primary"
+                          :icon="Add20"
+                          :disabled="loadingCertificates"
+                          @click="showRequestCertificateModal"
+                          >{{
+                            $t("settings_tls_certificates.request_certificate")
+                          }}
+                        </NsButton>
+                        <NsButton
+                          kind="ghost"
+                          :icon="Upload20"
+                          @click="uploadTlsCertificateState.setVisible(true)"
+                          >{{
+                            $t(
+                              "settings_tls_certificates.add_custom_certificate"
+                            )
+                          }}
+                        </NsButton>
+                      </div>
+                    </div>
+                  </template>
+                </NsEmptyState>
+              </template>
+            </template>
+            <template slot="data">
+              <cv-data-table-row
+                v-for="(row, rowIndex) in tablePage"
+                :key="`${rowIndex}`"
+                :value="`${rowIndex}`"
+              >
+                <cv-data-table-cell>
+                  <span>
+                    {{ row.ui_name }}
+                  </span>
+                </cv-data-table-cell>
+                <cv-data-table-cell>
+                  <cv-interactive-tooltip
+                    v-if="row.ui_type === 'obsolete'"
+                    alignment="start"
+                    direction="right"
+                    class="info clickable-tag"
+                  >
+                    <template #trigger>
+                      <cv-tag
+                        kind="high-contrast"
+                        :label="$t('settings_tls_certificates.obsolete')"
+                        class="no-margin"
+                      ></cv-tag>
+                    </template>
+                    <template #content>
+                      {{ $t("settings_tls_certificates.obsolete_tooltip") }}
+                    </template>
+                  </cv-interactive-tooltip>
+                  <cv-tag
+                    v-else-if="row.ui_type === 'automatic'"
+                    kind="gray"
+                    :label="$t('settings_tls_certificates.automatic')"
+                    class="no-margin"
+                  ></cv-tag>
+                  <span v-else>
+                    {{ $t("settings_tls_certificates." + row.ui_type) }}
+                  </span>
+                </cv-data-table-cell>
+                <cv-data-table-cell>
+                  <cv-interactive-tooltip
+                    v-if="row.ui_issuer !== row.issuer"
+                    alignment="center"
+                    direction="top"
+                    class="info"
+                  >
+                    <template #trigger>
+                      <cv-link>{{ row.ui_issuer }}</cv-link>
+                    </template>
+                    <template #content>
+                      {{ row.issuer }}
+                    </template>
+                  </cv-interactive-tooltip>
+                  <span v-else>
+                    {{ row.issuer }}
+                  </span>
+                </cv-data-table-cell>
+                <cv-data-table-cell>
+                  <div class="flex items-center gap-2">
+                    <span>
+                      {{ row.expiration }}
+                    </span>
+                    <cv-interactive-tooltip
+                      v-if="row.status === 'expiring'"
+                      alignment="center"
+                      direction="top"
+                      class="shrink-0"
+                    >
+                      <template #trigger>
+                        <WarningAltFilled16 class="ns-warning" />
+                      </template>
+                      <template #content>
+                        {{ $t("settings_tls_certificates.expiring_warning") }}
+                      </template>
+                    </cv-interactive-tooltip>
+                  </div>
+                </cv-data-table-cell>
+                <cv-data-table-cell>
+                  <cv-tag
+                    :kind="getTagKind(row.status)"
+                    :label="
+                      row.status === 'expiring'
+                        ? $t('settings_tls_certificates.valid')
+                        : $t('settings_tls_certificates.' + row.status)
+                    "
+                    class="no-margin"
+                  >
+                  </cv-tag>
+                </cv-data-table-cell>
+                <cv-data-table-cell>
+                  <template v-if="row.names.length > 3">
+                    <div v-for="name in row.names.slice(0, 3)" :key="name">
+                      {{ name }}
+                    </div>
+                    <cv-interactive-tooltip
+                      alignment="center"
+                      direction="top"
+                      class="info"
+                    >
+                      <template #trigger>
+                        <cv-link>
+                          {{
+                            $tc("common.plus_others", row.names.length - 3, {
+                              num: row.names.length - 3,
+                            })
+                          }}
+                        </cv-link>
+                      </template>
+                      <template #content>
+                        <ul class="unordered-list">
+                          <li v-for="name in row.names" :key="name">
+                            {{ name }}
+                          </li>
+                        </ul>
+                      </template>
+                    </cv-interactive-tooltip>
+                  </template>
+                  <template v-else>
+                    <div v-for="name in row.names" :key="name">
+                      {{ name }}
+                    </div>
+                  </template>
+                </cv-data-table-cell>
+                <cv-data-table-cell>
+                  <span>{{ row.node }}</span>
+                </cv-data-table-cell>
+                <cv-data-table-cell class="table-overflow-menu-cell">
+                  <cv-overflow-menu
+                    flip-menu
+                    class="table-overflow-menu"
+                    :data-test-id="row.name + '-menu'"
+                  >
+                    <!-- manage names -->
+                    <cv-overflow-menu-item
+                      v-if="row.default && row.type === 'internal'"
+                      @click="showManageNamesModal(row)"
+                    >
+                      <NsMenuItem
+                        :icon="Edit20"
+                        :label="$t('settings_tls_certificates.manage_names')"
+                      />
+                    </cv-overflow-menu-item>
+                    <!-- delete -->
+                    <cv-overflow-menu-item
+                      danger
+                      @click="showDeleteCertificateModal(row)"
+                    >
+                      <NsMenuItem
+                        :icon="TrashCan20"
+                        :label="$t('common.delete')"
+                      />
+                    </cv-overflow-menu-item>
+                  </cv-overflow-menu>
+                </cv-data-table-cell>
+              </cv-data-table-row>
+            </template>
+          </NsDataTable>
+        </div>
+      </div>
+    </cv-tile>
+    <UploadTlsCertificateModal
+      :state="uploadTlsCertificateState"
+      @upload-certificate-submit="uploadCustomCertificate($event)"
+      ref="uploadTlsCertificateModal"
+    />
+    <RequestTlsCertificateModal
+      :isShown="isShownRequestCertificateModal"
+      :nodes="nodesWithoutCertificate"
+      :allCertificates="certificates"
+      :certificate="currentCertificate"
+      @hide="hideRequestCertificateModal"
+    />
+    <!-- delete certificate modal -->
+    <NsDangerDeleteModal
+      :isShown="isShownDeleteCertificateModal"
+      :name="currentCertificate ? currentCertificate.ui_name : ''"
+      :title="$t('settings_tls_certificates.delete_certificate')"
+      :deleteLabel="$t('common.delete')"
+      :description="
+        $t('settings_tls_certificates.delete_certificate_description', {
+          name: currentCertificate ? currentCertificate.ui_name : '',
+        })
+      "
+      :typeToConfirm="
+        $t('common.type_to_confirm', {
+          name: currentCertificate ? currentCertificate.ui_name : '',
+        })
+      "
+      :isErrorShown="!!error.deleteCertificate"
+      :errorTitle="$t('action.delete-certificate')"
+      :errorDescription="error.deleteCertificate"
+      :isWarningShown="false"
+      @hide="hideDeleteCertificateModal"
+      @confirmDelete="deleteCertificate"
+    >
+      <template slot="explanation">
+        <p
+          v-if="currentCertificate && currentCertificate.automatic"
+          class="mg-top-sm"
+        >
+          {{ $t("settings_tls_certificates.automatic_cert_warning") }}
+        </p>
+        <NsInlineNotification
+          v-if="currentCertificate && currentCertificate.type === 'internal'"
+          kind="warning"
+          :title="$t('settings_tls_certificates.traefik_will_be_restarted')"
+          :description="
+            $t('settings_tls_certificates.delete_certificate_message', {
+              node: currentCertificate.node,
+            })
+          "
+          :showCloseButton="false"
+        />
+      </template>
+    </NsDangerDeleteModal>
+    <!-- delete obsolete certificates modal -->
+    <DeleteObsoleteCertificatesModal
+      :isShown="isShownDeleteObsoleteCertificatesModal"
+      :nodes="nodesWithObsoleteCertificates"
+      @hide="hideDeleteObsoleteCertificatesModal"
+    />
+  </div>
+</template>
+
+<script>
+import to from "await-to-js";
+import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import _cloneDeep from "lodash/cloneDeep";
+import RequestTlsCertificateModal from "@/components/settings/RequestTlsCertificateModal.vue";
+import UploadTlsCertificateModal from "@/components/settings/UploadTlsCertificateModal.vue";
+import { StateManager as UploadTlsCertificateState } from "@/components/settings/UploadTlsCertificateModal.vue";
+import Upload20 from "@carbon/icons-vue/es/upload/20";
+import DeleteObsoleteCertificatesModal from "@/components/settings/DeleteObsoleteCertificatesModal.vue";
+import WarningAltFilled16 from "@carbon/icons-vue/es/warning--alt--filled/16";
+
+export default {
+  name: "TlsCertificatesPanel",
+  components: {
+    RequestTlsCertificateModal,
+    UploadTlsCertificateModal,
+    DeleteObsoleteCertificatesModal,
+    WarningAltFilled16,
+  },
+  mixins: [TaskService, UtilService, IconService],
+  props: {
+    traefikInstances: Array,
+    internalNodes: Array,
+    isLoadingInstances: Boolean,
+    instancesError: {
+      type: String,
+      default: "",
+    },
+    // owned by the parent: bound to a query param
+    selectedNodeId: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      tablePage: [],
+      tableColumns: [
+        "ui_name",
+        "ui_type",
+        "ui_issuer",
+        "valid_to",
+        "status",
+        "names",
+        "node",
+      ],
+      certificatesByTraefikId: {},
+      isShownRequestCertificateModal: false,
+      isShownDeleteCertificateModal: false,
+      isShownDeleteObsoleteCertificatesModal: false,
+      currentCertificate: null,
+      taskListeners: [],
+      filter: {
+        text: "",
+        certificateType: "",
+        certificateStatus: "",
+      },
+      typeOptions: [
+        {
+          name: "any",
+          label: this.$t("settings_tls_certificates.any_type"),
+          value: "any",
+        },
+        {
+          name: "requested",
+          label: this.$t("settings_tls_certificates.requested"),
+          value: "requested",
+        },
+        {
+          name: "uploaded",
+          label: this.$t("settings_tls_certificates.uploaded"),
+          value: "uploaded",
+        },
+        {
+          name: "automatic",
+          label: this.$t("settings_tls_certificates.automatic"),
+          value: "automatic",
+        },
+        {
+          name: "obsolete",
+          label: this.$t("settings_tls_certificates.obsolete"),
+          value: "obsolete",
+        },
+      ],
+      statusOptions: [
+        {
+          name: "any",
+          label: this.$t("settings_tls_certificates.any_status"),
+          value: "any",
+        },
+        {
+          name: "valid",
+          label: this.$t("settings_tls_certificates.valid"),
+          value: "valid",
+        },
+        {
+          name: "expiring",
+          label: this.$t("settings_tls_certificates.expiring"),
+          value: "expiring",
+        },
+        {
+          name: "expired",
+          label: this.$t("settings_tls_certificates.expired"),
+          value: "expired",
+        },
+      ],
+      Upload20,
+      loading: {
+        listCertificatesNum: 0,
+        deleteCertificate: false,
+      },
+      error: {
+        deleteCertificate: "",
+      },
+      listCertificatesErrors: [],
+      offlineTraefikInstances: [],
+      uploadTlsCertificateState: new UploadTlsCertificateState(),
+    };
+  },
+  computed: {
+    i18nTableColumns() {
+      return this.tableColumns.map((column) => {
+        return this.$t("settings_tls_certificates." + column);
+      });
+    },
+    loadingCertificates() {
+      return this.isLoadingInstances || this.loading.listCertificatesNum > 0;
+    },
+    filteredCertificates() {
+      let certificates = this.certificates;
+
+      // filter by node
+      if (this.selectedNodeId && this.selectedNodeId !== "any") {
+        certificates = certificates.filter((certificate) => {
+          return certificate.nodeId === this.selectedNodeId;
+        });
+      }
+
+      // filter by text
+      if (this.filter.text.trim()) {
+        const searchText = this.filter.text.toLowerCase().trim();
+        certificates = certificates.filter((cert) => {
+          return (
+            cert.ui_name.toLowerCase().includes(searchText) ||
+            cert.ui_type.toLowerCase().includes(searchText) ||
+            cert.ui_issuer.toLowerCase().includes(searchText) ||
+            cert.expiration.toLowerCase().includes(searchText) ||
+            cert.status.toLowerCase().includes(searchText) ||
+            cert.serial.toLowerCase().includes(searchText) ||
+            cert.names.some((name) =>
+              name.toLowerCase().includes(searchText)
+            ) ||
+            cert.node.toLowerCase().includes(searchText)
+          );
+        });
+      }
+
+      // filter by type
+      if (
+        this.filter.certificateType &&
+        this.filter.certificateType !== "any"
+      ) {
+        certificates = certificates.filter((certificate) => {
+          return certificate.ui_type === this.filter.certificateType;
+        });
+      }
+
+      // filter by status
+      if (
+        this.filter.certificateStatus &&
+        this.filter.certificateStatus !== "any"
+      ) {
+        certificates = certificates.filter((certificate) => {
+          return certificate.status === this.filter.certificateStatus;
+        });
+      }
+      return certificates;
+    },
+    nodesForFilter() {
+      if (!this.internalNodes.length) {
+        return [];
+      }
+
+      // add "Any node" at the beginning of internalNodes array
+      const nodes = _cloneDeep(this.internalNodes);
+
+      nodes.unshift({
+        name: "any",
+        label: this.$t("common.any_node"),
+        value: "any",
+      });
+      return nodes;
+    },
+    certificates() {
+      return Object.values(this.certificatesByTraefikId)
+        .flat()
+        .sort(this.sortCertificates);
+    },
+    nodesWithoutCertificate() {
+      const nodesWithDefaultCert = [
+        ...new Set(
+          this.certificates
+            .filter((cert) => cert.default && cert.type === "internal")
+            .map((cert) => cert.nodeId)
+        ),
+      ];
+
+      return this.internalNodes.filter(
+        (node) => !nodesWithDefaultCert.includes(node.value)
+      );
+    },
+    nodesWithObsoleteCertificates() {
+      const nodesWithObsoleteCert = [
+        ...new Set(
+          this.certificates
+            .filter((cert) => cert.ui_type === "obsolete")
+            .map((cert) => cert.nodeId)
+        ),
+      ];
+
+      return this.internalNodes.filter((node) =>
+        nodesWithObsoleteCert.includes(node.value)
+      );
+    },
+    hasActiveFilters() {
+      return (
+        (this.filter.text && this.filter.text.trim() !== "") ||
+        (this.filter.certificateType &&
+          this.filter.certificateType !== "any") ||
+        (this.filter.certificateStatus &&
+          this.filter.certificateStatus !== "any") ||
+        (this.selectedNodeId && this.selectedNodeId !== "any")
+      );
+    },
+  },
+  watch: {
+    traefikInstances: function () {
+      this.listCertificates();
+    },
+    internalNodes: function (nodes) {
+      this.uploadTlsCertificateState.setNodes(nodes);
+    },
+    instancesError: function (error) {
+      // the certificates chain will not run: release its skeleton rows
+      if (error) {
+        this.loading.listCertificatesNum = 0;
+      }
+    },
+  },
+  created() {
+    this.$root.$on("reloadCertificates", this.onReloadCertificates);
+
+    this.$nextTick(() => {
+      this.filter.certificateType = "any";
+      this.filter.certificateStatus = "any";
+    });
+  },
+  beforeDestroy() {
+    this.$root.$off("reloadCertificates");
+    this.clearTaskListeners();
+  },
+  methods: {
+    registerTaskListener(eventName, handler) {
+      this.$root.$once(eventName, handler);
+      this.taskListeners.push([eventName, handler]);
+    },
+    clearTaskListeners() {
+      this.taskListeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      this.taskListeners = [];
+    },
+    showRequestCertificateModal() {
+      this.currentCertificate = null;
+      this.isShownRequestCertificateModal = true;
+    },
+    hideRequestCertificateModal() {
+      this.isShownRequestCertificateModal = false;
+    },
+    showManageNamesModal(certificate) {
+      this.currentCertificate = certificate;
+      this.isShownRequestCertificateModal = true;
+    },
+    showDeleteCertificateModal(certificate) {
+      this.currentCertificate = certificate;
+      this.isShownDeleteCertificateModal = true;
+    },
+    hideDeleteCertificateModal() {
+      this.isShownDeleteCertificateModal = false;
+    },
+    showDeleteObsoleteCertificatesModal() {
+      this.isShownDeleteObsoleteCertificatesModal = true;
+    },
+    hideDeleteObsoleteCertificatesModal() {
+      this.isShownDeleteObsoleteCertificatesModal = false;
+    },
+    async listCertificates() {
+      // a handler of a previous round would decrement the counter of this one
+      this.clearTaskListeners();
+      this.offlineTraefikInstances = [];
+      this.listCertificatesErrors = [];
+      // count upfront: the counter must not hit zero between two iterations
+      this.loading.listCertificatesNum = this.traefikInstances.length;
+
+      for (const traefikInstance of this.traefikInstances) {
+        const taskAction = "list-certificates";
+        const eventId = this.getUuid();
+
+        // register to task events
+
+        this.registerTaskListener(
+          `${taskAction}-aborted-${eventId}`,
+          (taskResult, taskContext) => {
+            this.listCertificatesAborted(
+              taskResult,
+              taskContext,
+              traefikInstance
+            );
+          }
+        );
+
+        this.registerTaskListener(
+          `${taskAction}-completed-${eventId}`,
+          this.listCertificatesCompleted
+        );
+
+        const res = await to(
+          this.createModuleTaskForApp(traefikInstance.id, {
+            action: taskAction,
+            data: {
+              expand_list: true,
+            },
+            extra: {
+              title: this.$t("action." + taskAction),
+              isNotificationHidden: true,
+              traefikInstance: traefikInstance,
+              eventId,
+            },
+          })
+        );
+        const err = res[0];
+
+        if (err) {
+          console.error(
+            `error creating task ${taskAction} for instance ${traefikInstance.id} on node ${traefikInstance.node}`,
+            err
+          );
+          // Clean up orphaned event listeners since the task was never created
+          this.$root.$off(`${taskAction}-aborted-${eventId}`);
+          this.$root.$off(`${taskAction}-completed-${eventId}`);
+
+          if (err.response && err.response.status === 404) {
+            // 404 means the module API is unreachable: node is offline
+            if (
+              traefikInstance &&
+              !this.offlineTraefikInstances.find(
+                (instance) => instance.id === traefikInstance.id
+              )
+            ) {
+              this.offlineTraefikInstances.push(traefikInstance);
+            }
+          } else {
+            // Unexpected error: display a generic inline error notification
+            this.listCertificatesErrors.push({
+              title: this.$t("action." + taskAction),
+              description: `${this.$t(
+                "error.generic_error"
+              )} (${this.getTraefikInstanceLabel(
+                traefikInstance
+              )} - ${this.getNodeLabel(traefikInstance)})`,
+            });
+          }
+          this.loading.listCertificatesNum--;
+        }
+      }
+    },
+    listCertificatesAborted(taskResult, taskContext, traefikInstance) {
+      console.error(
+        `${taskContext.action} aborted for instance ${traefikInstance.id} on node ${traefikInstance.node}`,
+        taskResult
+      );
+
+      // Add error to array
+      this.listCertificatesErrors.push({
+        title: this.$t("action." + taskContext.action),
+        description: `${this.$t(
+          "error.generic_error"
+        )} (${this.getTraefikInstanceLabel(
+          traefikInstance
+        )} - ${this.getNodeLabel(traefikInstance)})`,
+      });
+      this.loading.listCertificatesNum--;
+    },
+    listCertificatesCompleted(taskContext, taskResult) {
+      const traefikId = taskContext.extra.traefikInstance.id;
+      const nodeId = taskContext.extra.traefikInstance.node;
+      const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
+      const node = { id: nodeId, ui_name: nodeUiName };
+      const nodeLabel = this.getShortNodeLabel(node) + ` (${traefikId})`;
+      const certs = [];
+
+      for (let certificate of taskResult.output.certificates) {
+        // "Certificate" column
+
+        if (certificate.default && certificate.type === "internal") {
+          certificate.ui_name = this.$t(
+            "settings_tls_certificates.node_name_certificate",
+            { node: this.getShortNodeLabel(node) }
+          );
+        } else {
+          certificate.ui_name = certificate.subject;
+        }
+
+        // "Type" column
+
+        let ui_type = "";
+
+        if (certificate.type === "custom") {
+          ui_type = "uploaded";
+        } else if (certificate.automatic) {
+          ui_type = "automatic";
+        } else if (certificate.default && certificate.type === "internal") {
+          ui_type = "requested";
+        } else if (!certificate.default && !certificate.automatic) {
+          ui_type = "obsolete";
+        }
+        certificate.ui_type = ui_type;
+
+        // "Issuer" column
+
+        const matched = certificate.issuer.match(/,O=(.+?)(?:,|$)/);
+
+        if (matched && matched.length > 1) {
+          certificate.ui_issuer = matched[1];
+        } else {
+          certificate.ui_issuer = certificate.issuer;
+        }
+
+        // "Status" column
+
+        certificate.status = certificate.validity;
+
+        certificate.node = nodeLabel;
+        certificate.nodeId = nodeId;
+        certificate.longNodeLabel = this.getNodeLabel(node);
+        certificate.traefikInstance = traefikId;
+
+        // "Expiration" column
+
+        const validTo = new Date(certificate.valid_to);
+        const formattedValidTo = validTo.toLocaleDateString(
+          navigator.language,
+          {
+            year: "numeric",
+            month: "long",
+            day: "numeric",
+          }
+        );
+        certificate.expiration = formattedValidTo;
+
+        certs.push(certificate);
+      }
+
+      // $set() is needed for reactivity (see https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects)
+      this.$set(this.certificatesByTraefikId, traefikId, certs);
+
+      this.loading.listCertificatesNum--;
+    },
+    getTagKind(status) {
+      switch (status) {
+        case "valid":
+        case "expiring":
+          return "green";
+        case "expired":
+          return "red";
+        default:
+          return "gray";
+      }
+    },
+    getNodeLabel(instance) {
+      const nodeLabel = instance.node_ui_name
+        ? instance.node_ui_name +
+          " (" +
+          this.$t("common.node") +
+          " " +
+          instance.node +
+          ")"
+        : this.$t("common.node") + " " + instance.node;
+      return nodeLabel;
+    },
+    getTraefikInstanceLabel(instance) {
+      let label = instance.id;
+      if (instance.ui_name && instance.ui_name.trim()) {
+        label = `${instance.ui_name}(${instance.id})`;
+      }
+      return label;
+    },
+    getOfflineInstanceDescription(instance) {
+      return this.$t("settings_tls_certificates.certificates_not_displayed", {
+        instanceId: this.getTraefikInstanceLabel(instance),
+      });
+    },
+    clearFilters() {
+      this.$emit("update:selectedNodeId", "any");
+      this.filter.text = "";
+      this.filter.certificateType = "any";
+      this.filter.certificateStatus = "any";
+    },
+    onReloadCertificates() {
+      this.clearFilters();
+      this.listCertificates();
+    },
+    async deleteCertificate() {
+      this.loading.deleteCertificate = true;
+      this.error.deleteCertificate = "";
+      const taskAction = "delete-certificate";
+      const eventId = this.getUuid();
+
+      // register to task error
+      this.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.deleteCertificateAborted
+      );
+
+      // register to task completion
+      this.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.deleteCertificateCompleted
+      );
+
+      const payload = {
+        type: this.currentCertificate.type,
+      };
+
+      if (this.currentCertificate.type === "custom") {
+        payload.path = this.currentCertificate.path;
+      } else {
+        payload.serial = this.currentCertificate.serial;
+      }
+
+      const res = await to(
+        this.createModuleTaskForApp(this.currentCertificate.traefikInstance, {
+          action: taskAction,
+          data: payload,
+          extra: {
+            title: this.$t("settings_tls_certificates.delete_certificate"),
+            description: this.$t("common.processing"),
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.deleteCertificate = this.getErrorMessage(err);
+        this.loading.deleteCertificate = false;
+        return;
+      }
+      this.hideDeleteCertificateModal();
+    },
+    deleteCertificateAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.loading.deleteCertificate = false;
+    },
+    deleteCertificateCompleted() {
+      this.loading.deleteCertificate = false;
+
+      // reload certificates
+      this.listCertificates();
+    },
+    async uploadCustomCertificate(event) {
+      // set component to loading
+      this.uploadTlsCertificateState.setLoading(true);
+      // clear error state
+      this.uploadTlsCertificateState.errors.keyFile = null;
+      this.uploadTlsCertificateState.errors.certFile = null;
+      this.uploadTlsCertificateState.errors.chainFile = null;
+
+      let keyFileDecoded = await new Promise((result) => {
+        let keyFileReader = new FileReader();
+        keyFileReader.readAsBinaryString(event.keyFile);
+        keyFileReader.onerror = () => {
+          throw Error();
+        };
+        keyFileReader.onload = () => {
+          result(window.btoa(keyFileReader.result));
+        };
+      }).catch(() => {
+        this.uploadTlsCertificateState.setKeyFileError(
+          this.$t("settings_tls_certificates.cannot_load_key_file")
+        );
+        this.uploadTlsCertificateState.setLoading(false);
+      });
+
+      let certFileText = await new Promise((result) => {
+        let certFileReader = new FileReader();
+        certFileReader.readAsBinaryString(event.certFile);
+        certFileReader.onerror = () => {
+          throw Error();
+        };
+        certFileReader.onload = () => {
+          result(certFileReader.result);
+        };
+      }).catch(() => {
+        this.uploadTlsCertificateState.setCertFileErrors(
+          this.$t("settings_tls_certificates.cannot_load_cert_file")
+        );
+        this.uploadTlsCertificateState.setLoading(false);
+      });
+
+      if (event.chainFile) {
+        let chainFileText = await new Promise((result) => {
+          let chainFileReader = new FileReader();
+          chainFileReader.readAsBinaryString(event.chainFile);
+          chainFileReader.onerror = () => {
+            throw Error();
+          };
+          chainFileReader.onload = () => {
+            result(chainFileReader.result);
+          };
+        }).catch(() => {
+          this.uploadTlsCertificateState.setCertFileErrors(
+            this.$t("settings_tls_certificates.cannot_load_chain_file")
+          );
+          this.uploadTlsCertificateState.setLoading(false);
+        });
+        certFileText += `\n${chainFileText}`;
+      }
+      const certFileDecoded = window.btoa(certFileText);
+      const taskAction = "upload-certificate";
+      const eventId = this.getUuid();
+
+      // abort handler
+      this.$root.$once(`${taskAction}-aborted-${eventId}`, (error) => {
+        this.uploadTlsCertificateState.setLoading(false);
+        switch (error.exit_code) {
+          case 2:
+          case 3:
+            this.uploadTlsCertificateState.setKeyFileError(error.output);
+            break;
+          case 4:
+            this.uploadTlsCertificateState.setCertFileError(error.output);
+            break;
+          default:
+            this.uploadTlsCertificateState.setKeyFileError(error.error);
+            break;
+        }
+      });
+
+      // validation success handler
+      this.$root.$once(`${taskAction}-validation-ok-${eventId}`, () => {
+        this.uploadTlsCertificateState.setLoading(false);
+        this.uploadTlsCertificateState.setVisible(false);
+        // clear state and node combobox
+        this.$refs.uploadTlsCertificateModal.clear();
+      });
+
+      // validation failed handler
+      this.$root.$once(
+        `${taskAction}-validation-failed-${eventId}`,
+        (validationErrors) => {
+          this.uploadTlsCertificateState.setLoading(false);
+
+          for (const validationError of validationErrors) {
+            const param = validationError.parameter;
+            const errorMessage = this.getI18nStringWithFallback(
+              "settings_tls_certificates." + validationError.error,
+              "error." + validationError.error,
+              null,
+              { value: validationError.value }
+            );
+
+            switch (param) {
+              case "keyFile":
+                this.uploadTlsCertificateState.setKeyFileError(errorMessage);
+                break;
+              case "certFile":
+                this.uploadTlsCertificateState.setCertFileError(errorMessage);
+                break;
+              case "chainFile":
+                this.uploadTlsCertificateState.setChainFileError(errorMessage);
+                break;
+              default:
+                break;
+            }
+          }
+        }
+      );
+
+      // completed task
+      this.$root.$once(`${taskAction}-completed-${eventId}`, () => {
+        // clear state and node combobox
+        this.$refs.uploadTlsCertificateModal.clear();
+        this.onReloadCertificates();
+      });
+
+      const res = await to(
+        this.createModuleTaskForApp(event.targetInstance, {
+          action: taskAction,
+          data: {
+            keyFile: keyFileDecoded,
+            certFile: certFileDecoded,
+          },
+          extra: {
+            title: this.$t("settings_tls_certificates.add_custom_certificate"),
+            description: this.$t("common.processing"),
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.uploadTlsCertificateState.setKeyFileError(
+          this.$t("error.generic_error")
+        );
+        this.uploadTlsCertificateState.setLoading(false);
+      }
+    },
+    onSearchInput() {
+      // workaround to detect click on clear search button
+      if (!this.searchFilter) {
+        this.$refs.certificatesTable.goToFirstPage();
+        this.focusElement("tableSearch");
+      }
+    },
+    sortCertificates(a, b) {
+      if (a.ui_type !== b.ui_type) {
+        return b.ui_type.localeCompare(a.ui_type);
+      }
+
+      // If ui_type is the same, sort by expiration
+      return a.valid_to.localeCompare(b.valid_to);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+// carbon's .bx--tag forces a default cursor, hiding that the tooltip opens on click
+.clickable-tag ::v-deep .bx--tag {
+  cursor: pointer;
+}
+</style>
diff --git a/core/ui/src/router/index.js b/core/ui/src/router/index.js
index 1679cfc836..babfacab14 100644
--- a/core/ui/src/router/index.js
+++ b/core/ui/src/router/index.js
@@ -78,11 +78,10 @@ const routes = [
   },
   {
     path: "/settings/acme-servers",
-    name: "SettingsAcmeServers",
-    component: () =>
-      import(
-        /* webpackChunkName: "settings-acme-servers" */ "../views/settings/SettingsAcmeServers.vue"
-      ),
+    redirect: {
+      name: "SettingsTlsCertificates",
+      query: { view: "acme" },
+    },
   },
   {
     path: "/settings/account",
diff --git a/core/ui/src/views/settings/SettingsAcmeServers.vue b/core/ui/src/views/settings/SettingsAcmeServers.vue
deleted file mode 100644
index bf1168ffe7..0000000000
--- a/core/ui/src/views/settings/SettingsAcmeServers.vue
+++ /dev/null
@@ -1,396 +0,0 @@
-<!--
-  Copyright (C) 2023 Nethesis S.r.l.
-  SPDX-License-Identifier: GPL-3.0-or-later
--->
-<template>
-  <div>
-    <cv-grid fullWidth>
-      <cv-row>
-        <cv-column>
-          <cv-breadcrumb
-            aria-label="breadcrumb"
-            :no-trailing-slash="true"
-            class="breadcrumb"
-          >
-            <cv-breadcrumb-item>
-              <cv-link to="/settings">{{ $t("settings.title") }}</cv-link>
-            </cv-breadcrumb-item>
-            <cv-breadcrumb-item>
-              <cv-link to="/settings/tls-certificates">{{
-                $t("settings_tls_certificates.title")
-              }}</cv-link>
-            </cv-breadcrumb-item>
-            <cv-breadcrumb-item>
-              <span>{{ $t("settings_acme_servers.title") }}</span>
-            </cv-breadcrumb-item>
-          </cv-breadcrumb>
-        </cv-column>
-      </cv-row>
-      <cv-row>
-        <cv-column :md="4" :xlg="10" class="subpage-title">
-          <h3>{{ $t("settings_acme_servers.title") }}</h3>
-        </cv-column>
-        <cv-column :md="4" :xlg="6">
-          <div class="page-toolbar">
-            <NsButton
-              kind="tertiary"
-              size="field"
-              :icon="Certificate20"
-              @click="goToTlsCertificates()"
-              class="subpage-toolbar-item"
-              >{{ $t("settings_tls_certificates.title") }}
-            </NsButton>
-          </div>
-        </cv-column>
-      </cv-row>
-      <cv-row>
-        <cv-column>
-          <NsInlineNotification
-            kind="warning"
-            :title="$t('common.use_landscape_mode')"
-            :description="$t('common.use_landscape_mode_description')"
-            class="landscape-warning"
-          />
-        </cv-column>
-      </cv-row>
-      <cv-row>
-        <cv-column>
-          <cv-tile light>
-            <cv-grid class="no-padding">
-              <cv-row>
-                <cv-column>
-                  <NsDataTable
-                    :allRows="servers"
-                    :columns="i18nTableColumns"
-                    :rawColumns="tableColumns"
-                    :sortable="true"
-                    :pageSizes="[10, 25, 50, 100]"
-                    :overflow-menu="true"
-                    isSearchable
-                    :searchPlaceholder="
-                      $t('settings_acme_servers.search_acme_server')
-                    "
-                    :searchClearLabel="$t('common.clear_search')"
-                    :noSearchResultsLabel="$t('common.no_search_results')"
-                    :noSearchResultsDescription="
-                      $t('common.no_search_results_description')
-                    "
-                    :isLoading="loadingServers"
-                    :skeletonRows="5"
-                    :isErrorShown="
-                      !!error.listInstalledModules || !!error.getAcmeServer
-                    "
-                    :errorTitle="currentErrorAction"
-                    :errorDescription="currentErrorDescription"
-                    :itemsPerPageLabel="$t('pagination.items_per_page')"
-                    :rangeOfTotalItemsLabel="
-                      $t('pagination.range_of_total_items')
-                    "
-                    :ofTotalPagesLabel="$t('pagination.of_total_pages')"
-                    :backwardText="$t('pagination.previous_page')"
-                    :forwardText="$t('pagination.next_page')"
-                    :pageNumberLabel="$t('pagination.page_number')"
-                    @updatePage="tablePage = $event"
-                  >
-                    <template slot="empty-state">
-                      <NsEmptyState
-                        :title="$t('settings_acme_servers.no_acme_server')"
-                      >
-                        <template #description>
-                          <div>
-                            {{
-                              $t(
-                                "settings_acme_servers.no_acme_server_description"
-                              )
-                            }}
-                          </div>
-                        </template>
-                      </NsEmptyState>
-                    </template>
-                    <template slot="data">
-                      <cv-data-table-row
-                        v-for="(row, rowIndex) in tablePage"
-                        :key="`${rowIndex}`"
-                        :value="`${rowIndex}`"
-                      >
-                        <cv-data-table-cell>
-                          <span>
-                            {{ row.url }}
-                          </span>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <span>{{ row.node }}</span>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <div class="justify-flex-end">
-                            <NsButton
-                              kind="secondary"
-                              :icon="Edit20"
-                              size="small"
-                              @click="showEditServerModal(row)"
-                              :data-test-id="row.url + '-delete'"
-                              >{{ $t("common.edit") }}
-                            </NsButton>
-                          </div>
-                        </cv-data-table-cell>
-                      </cv-data-table-row>
-                    </template>
-                  </NsDataTable>
-                </cv-column>
-              </cv-row>
-            </cv-grid>
-          </cv-tile>
-        </cv-column>
-      </cv-row>
-    </cv-grid>
-    <EditAcmeServerModal
-      :isShown="isShownEditServerModal"
-      :server="currentServer"
-      @hide="hideEditServerModal"
-      @reloadServers="onReloadServers"
-    />
-  </div>
-</template>
-
-<script>
-import to from "await-to-js";
-import {
-  QueryParamService,
-  UtilService,
-  TaskService,
-  IconService,
-  PageTitleService,
-} from "@nethserver/ns8-ui-lib";
-import { mapState } from "vuex";
-import EditAcmeServerModal from "@/components/settings/EditAcmeServerModal.vue";
-
-export default {
-  name: "SettingsAcmeServers",
-  components: { EditAcmeServerModal },
-  mixins: [
-    TaskService,
-    UtilService,
-    IconService,
-    QueryParamService,
-    PageTitleService,
-  ],
-  pageTitle() {
-    return this.$t("settings_acme_servers.title");
-  },
-  data() {
-    return {
-      tablePage: [],
-      tableColumns: ["url", "node"],
-      servers: [],
-      internalNodes: [],
-      isShownEditServerModal: false,
-      currentErrorAction: "",
-      currentErrorDescription: "",
-      traefikInstances: [],
-      currentServer: null,
-      loading: {
-        listInstalledModules: false,
-        getAcmeServerNum: 0,
-      },
-      error: {
-        listInstalledModules: "",
-        getAcmeServer: "",
-      },
-    };
-  },
-  computed: {
-    ...mapState(["clusterNodes"]),
-    i18nTableColumns() {
-      return this.tableColumns.map((column) => {
-        return this.$t("settings_acme_servers." + column);
-      });
-    },
-    loadingServers() {
-      return (
-        this.loading.listInstalledModules || this.loading.getAcmeServerNum > 0
-      );
-    },
-  },
-  beforeRouteEnter(to, from, next) {
-    next((vm) => {
-      vm.watchQueryData(vm);
-      vm.queryParamsToDataForCore(vm, to.query);
-    });
-  },
-  beforeRouteUpdate(to, from, next) {
-    this.queryParamsToDataForCore(this, to.query);
-    next();
-  },
-  created() {
-    this.listInstalledModules();
-  },
-  methods: {
-    showEditServerModal(server) {
-      this.currentServer = server;
-      this.isShownEditServerModal = true;
-    },
-    hideEditServerModal() {
-      this.isShownEditServerModal = false;
-    },
-    async listInstalledModules() {
-      this.loading.listInstalledModules = true;
-      const taskAction = "list-installed-modules";
-      const eventId = this.getUuid();
-
-      // register to task error
-      this.$root.$once(
-        `${taskAction}-aborted-${eventId}`,
-        this.listInstalledModulesAborted
-      );
-
-      // register to task completion
-      this.$root.$once(
-        `${taskAction}-completed-${eventId}`,
-        this.listInstalledModulesCompleted
-      );
-      const res = await to(
-        this.createClusterTask({
-          action: taskAction,
-          extra: {
-            title: this.$t("action." + taskAction),
-            isNotificationHidden: true,
-            eventId,
-          },
-        })
-      );
-      const err = res[0];
-      if (err) {
-        console.error(`error creating task ${taskAction}`, err);
-        const errMessage = this.getErrorMessage(err);
-        this.error.listInstalledModules = errMessage;
-        this.currentErrorAction = this.$t("action." + taskAction);
-        this.currentErrorDescription = errMessage;
-        return;
-      }
-    },
-    listInstalledModulesAborted(taskResult, taskContext) {
-      console.error(`${taskContext.action} aborted`, taskResult);
-      this.error.listInstalledModules = this.$t("error.generic_error");
-      this.currentErrorAction = this.$t("action." + taskContext.action);
-      this.currentErrorDescription = this.$t("error.generic_error");
-      this.loading.listInstalledModules = false;
-    },
-    listInstalledModulesCompleted(taskContext, taskResult) {
-      // init nodes
-      let nodes = [];
-
-      for (let node of this.clusterNodes) {
-        nodes.push({
-          name: node.id.toString(),
-          label: this.getShortNodeLabel(node),
-          value: node.id.toString(),
-        });
-      }
-      let traefikInstances = [];
-
-      for (let instanceList of Object.values(taskResult.output)) {
-        for (let instance of instanceList) {
-          if (instance.id.startsWith("traefik")) {
-            traefikInstances.push(instance);
-
-            // update nodes labels
-            const node = nodes.find((node) => node.value === instance.node);
-
-            if (node) {
-              node.label += ` (${instance.id})`;
-              node.traefikInstance = instance.id;
-            }
-          }
-        }
-      }
-      this.internalNodes = nodes;
-      this.traefikInstances = traefikInstances;
-      this.loading.listInstalledModules = false;
-      this.getAcmeServer();
-    },
-    async getAcmeServer() {
-      this.servers = [];
-
-      for (const traefikInstance of this.traefikInstances) {
-        const taskAction = "get-acme-server";
-        const eventId = this.getUuid();
-        this.loading.getAcmeServerNum++;
-
-        // register to task events
-
-        this.$root.$once(
-          `${taskAction}-aborted-${eventId}`,
-          this.getAcmeServerAborted
-        );
-
-        this.$root.$once(
-          `${taskAction}-completed-${eventId}`,
-          this.getAcmeServerCompleted
-        );
-
-        const res = await to(
-          this.createModuleTaskForApp(traefikInstance.id, {
-            action: taskAction,
-            data: {
-              expand_list: true,
-            },
-            extra: {
-              title: this.$t("action." + taskAction),
-              isNotificationHidden: true,
-              traefikInstance: traefikInstance,
-              eventId,
-            },
-          })
-        );
-        const err = res[0];
-
-        if (err) {
-          console.error(`error creating task ${taskAction}`, err);
-          const errMessage = this.getErrorMessage(err);
-          this.error.getAcmeServer = errMessage;
-          this.currentErrorAction = this.$t("action." + taskAction);
-          this.currentErrorDescription = errMessage;
-          this.loading.getAcmeServerNum--;
-        }
-      }
-    },
-    getAcmeServerAborted(taskResult, taskContext) {
-      console.error(`${taskContext.action} aborted`, taskResult);
-      this.error.getAcmeServer = this.$t("error.generic_error");
-      this.currentErrorAction = this.$t("action." + taskContext.action);
-      this.currentErrorDescription = this.$t("error.generic_error");
-      this.loading.getAcmeServerNum--;
-    },
-    getAcmeServerCompleted(taskContext, taskResult) {
-      const server = taskResult.output;
-      const traefikId = taskContext.extra.traefikInstance.id;
-      const nodeId = taskContext.extra.traefikInstance.node;
-      const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
-      const node = { id: nodeId, ui_name: nodeUiName };
-      const nodeLabel = this.getShortNodeLabel(node) + ` (${traefikId})`;
-      server.node = nodeLabel;
-      server.nodeId = nodeId;
-      server.longNodeLabel = this.getNodeLabel(node);
-      server.traefikInstance = traefikId;
-      this.servers.push(server);
-      this.servers.sort(this.sortByProperty("url"));
-      this.loading.getAcmeServerNum--;
-    },
-    onReloadServers() {
-      this.getAcmeServer();
-    },
-    goToTlsCertificates() {
-      this.$router.push("/settings/tls-certificates");
-    },
-  },
-};
-</script>
-
-<style scoped lang="scss">
-@import "../../styles/carbon-utils";
-
-.justify-flex-end {
-  display: flex;
-  justify-content: flex-end;
-}
-</style>
diff --git a/core/ui/src/views/settings/SettingsTlsCertificates.vue b/core/ui/src/views/settings/SettingsTlsCertificates.vue
index d61cce9bd1..77979b0d2a 100644
--- a/core/ui/src/views/settings/SettingsTlsCertificates.vue
+++ b/core/ui/src/views/settings/SettingsTlsCertificates.vue
@@ -22,21 +22,9 @@
         </cv-column>
       </cv-row>
       <cv-row>
-        <cv-column :md="4" :xlg="10" class="subpage-title">
+        <cv-column class="subpage-title">
           <h3>{{ $t("settings_tls_certificates.title") }}</h3>
         </cv-column>
-        <cv-column :md="4" :xlg="6">
-          <div class="page-toolbar">
-            <NsButton
-              kind="tertiary"
-              size="field"
-              :icon="BareMetalServer20"
-              @click="goToAcmeServers()"
-              class="subpage-toolbar-item"
-              >{{ $t("settings_acme_servers.title") }}
-            </NsButton>
-          </div>
-        </cv-column>
       </cv-row>
       <cv-row>
         <cv-column>
@@ -52,459 +40,49 @@
     <cv-grid fullWidth>
       <cv-row>
         <cv-column>
-          <cv-tile light>
-            <div v-if="offlineTraefikInstances.length">
-              <NsInlineNotification
-                v-for="instance in offlineTraefikInstances"
-                :key="instance.id"
-                kind="error"
-                :title="
-                  $t('settings_tls_certificates.node_is_offline', {
-                    node: getNodeLabel(instance),
-                  })
-                "
-                :description="getOfflineInstanceDescription(instance)"
-                :showCloseButton="false"
-              />
-            </div>
-            <div v-if="listCertificatesErrors.length">
-              <NsInlineNotification
-                v-for="(error, index) in listCertificatesErrors"
-                :key="index"
-                kind="error"
-                :title="error.title"
-                :description="error.description"
-                :showCloseButton="false"
-              />
-            </div>
-            <div class="toolbar gap-2 flex-wrap" v-if="certificates.length">
-              <!-- request certificate -->
-              <NsButton
-                v-if="nodesWithoutCertificate.length"
-                kind="primary"
-                :icon="Add20"
-                :disabled="loadingCertificates"
-                @click="showRequestCertificateModal"
-                >{{ $t("settings_tls_certificates.request_certificate") }}
-              </NsButton>
-              <cv-tooltip
-                v-else
-                alignment="center"
-                direction="top"
-                :tip="
-                  $t(
-                    'settings_tls_certificates.request_certificate_disabled_message'
-                  )
-                "
-              >
-                <NsButton
-                  kind="primary"
-                  :icon="Add20"
-                  disabled
-                  @click="showRequestCertificateModal"
-                  >{{ $t("settings_tls_certificates.request_certificate") }}
-                </NsButton>
-              </cv-tooltip>
-              <!-- upload certificate -->
-              <NsButton
-                kind="secondary"
-                :icon="Upload20"
-                @click="uploadTlsCertificateState.setVisible(true)"
-                >{{ $t("settings_tls_certificates.add_custom_certificate") }}
-              </NsButton>
-              <!-- delete obsolete certificates -->
-              <NsButton
-                kind="tertiary"
-                :icon="TrashCan20"
-                @click="showDeleteObsoleteCertificatesModal"
-                :disabled="!nodesWithObsoleteCertificates.length"
-                >{{
-                  $t("settings_tls_certificates.delete_obsolete_certificates")
-                }}
-              </NsButton>
-            </div>
-            <div>
-              <div>
-                <div class="data-table-filters">
-                  <cv-search
-                    :label="$t('common.search')"
-                    :placeholder="
-                      $t('settings_tls_certificates.filter_certificates')
-                    "
-                    :clear-aria-label="$t('common.clear_search')"
-                    v-model="filter.text"
-                    :disabled="loadingCertificates"
-                    size="large"
-                    ref="tableSearch"
-                    class="self-end"
-                    @input="onSearchInput"
-                  >
-                  </cv-search>
-                  <NsComboBox
-                    v-model="filter.certificateType"
-                    :label="$t('common.choose')"
-                    :title="$t('settings_tls_certificates.ui_type')"
-                    :auto-filter="true"
-                    :auto-highlight="true"
-                    :options="typeOptions"
-                    :disabled="loadingCertificates"
-                  >
-                  </NsComboBox>
-                  <NsComboBox
-                    v-model="filter.certificateStatus"
-                    :label="$t('common.choose')"
-                    :title="$t('settings_tls_certificates.status')"
-                    :auto-filter="true"
-                    :auto-highlight="true"
-                    :options="statusOptions"
-                    :disabled="loadingCertificates"
-                  >
-                  </NsComboBox>
-                  <NsComboBox
-                    v-model="q.selectedNodeId"
-                    :label="$t('common.choose')"
-                    :title="$t('common.node')"
-                    :auto-filter="true"
-                    :auto-highlight="true"
-                    :options="nodesForFilter"
-                    :disabled="loadingCertificates"
-                  >
-                  </NsComboBox>
-                  <cv-link
-                    @click="clearFilters()"
-                    class="self-end mb-3 shrink-0"
-                    >{{ $t("common.clear_filters") }}
-                  </cv-link>
-                </div>
-                <NsDataTable
-                  :allRows="filteredCertificates"
-                  :columns="i18nTableColumns"
-                  :rawColumns="tableColumns"
-                  :sortable="true"
-                  :pageSizes="[10, 25, 50, 100]"
-                  :overflow-menu="true"
-                  :isSearchable="false"
-                  :noSearchResultsLabel="$t('common.no_search_results')"
-                  :noSearchResultsDescription="
-                    $t('common.no_search_results_description')
-                  "
-                  :isLoading="loadingCertificates"
-                  :skeletonRows="5"
-                  :isErrorShown="!!error.listInstalledModules"
-                  :errorTitle="currentErrorAction"
-                  :errorDescription="currentErrorDescription"
-                  :itemsPerPageLabel="$t('pagination.items_per_page')"
-                  :rangeOfTotalItemsLabel="
-                    $t('pagination.range_of_total_items')
-                  "
-                  :ofTotalPagesLabel="$t('pagination.of_total_pages')"
-                  :backwardText="$t('pagination.previous_page')"
-                  :forwardText="$t('pagination.next_page')"
-                  :pageNumberLabel="$t('pagination.page_number')"
-                  ref="certificatesTable"
-                  @updatePage="tablePage = $event"
-                >
-                  <template slot="empty-state">
-                    <template v-if="hasActiveFilters && certificates.length">
-                      <!-- no search results -->
-                      <NsEmptyState
-                        :title="$t('common.no_search_results')"
-                        key="no-results-empty-state"
-                      >
-                        <template #description>
-                          <div
-                            class="flex flex-col items-center text-center gap-2"
-                          >
-                            <p>
-                              {{ $t("common.no_search_results_description") }}
-                            </p>
-                            <NsButton
-                              kind="ghost"
-                              size="field"
-                              @click="clearFilters()"
-                              >{{ $t("common.clear_filters") }}
-                            </NsButton>
-                          </div>
-                        </template>
-                      </NsEmptyState>
-                    </template>
-                    <template v-else>
-                      <!-- no tls certificates -->
-                      <NsEmptyState
-                        :title="
-                          $t('settings_tls_certificates.no_tls_certificate')
-                        "
-                        key="no-certificates-empty-state"
-                      >
-                        <template #pictogram>
-                          <DocumentSecurityPictogram />
-                        </template>
-                        <template #description>
-                          <div class="flex flex-col items-center gap-4">
-                            <p>
-                              {{
-                                $t(
-                                  "settings_tls_certificates.no_tls_certificate_description"
-                                )
-                              }}
-                            </p>
-                            <div class="flex flex-col items-center gap-2">
-                              <NsButton
-                                v-if="nodesWithoutCertificate.length"
-                                kind="primary"
-                                :icon="Add20"
-                                :disabled="loadingCertificates"
-                                @click="showRequestCertificateModal"
-                                >{{
-                                  $t(
-                                    "settings_tls_certificates.request_certificate"
-                                  )
-                                }}
-                              </NsButton>
-                              <NsButton
-                                kind="ghost"
-                                :icon="Upload20"
-                                @click="
-                                  uploadTlsCertificateState.setVisible(true)
-                                "
-                                >{{
-                                  $t(
-                                    "settings_tls_certificates.add_custom_certificate"
-                                  )
-                                }}
-                              </NsButton>
-                            </div>
-                          </div>
-                        </template>
-                      </NsEmptyState>
-                    </template>
-                  </template>
-                  <template slot="data">
-                    <cv-data-table-row
-                      v-for="(row, rowIndex) in tablePage"
-                      :key="`${rowIndex}`"
-                      :value="`${rowIndex}`"
-                    >
-                      <cv-data-table-cell>
-                        <span>
-                          {{ row.ui_name }}
-                        </span>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <cv-tag
-                          v-if="
-                            row.ui_type === 'automatic' ||
-                            row.ui_type === 'obsolete'
-                          "
-                          :kind="
-                            row.ui_type === 'automatic'
-                              ? 'gray'
-                              : 'high-contrast'
-                          "
-                          :label="
-                            $t('settings_tls_certificates.' + row.ui_type)
-                          "
-                          class="no-margin"
-                        ></cv-tag>
-                        <span v-else>
-                          {{ $t("settings_tls_certificates." + row.ui_type) }}
-                        </span>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <cv-interactive-tooltip
-                          v-if="row.ui_issuer !== row.issuer"
-                          alignment="center"
-                          direction="top"
-                          class="info"
-                        >
-                          <template #trigger>
-                            <cv-link>{{ row.ui_issuer }}</cv-link>
-                          </template>
-                          <template #content>
-                            {{ row.issuer }}
-                          </template>
-                        </cv-interactive-tooltip>
-                        <span v-else>
-                          {{ row.issuer }}
-                        </span>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <div class="flex items-center gap-2">
-                          <span>
-                            {{ row.expiration }}
-                          </span>
-                          <cv-interactive-tooltip
-                            v-if="row.status === 'expiring'"
-                            alignment="center"
-                            direction="top"
-                            class="shrink-0"
-                          >
-                            <template #trigger>
-                              <WarningAltFilled16 class="ns-warning" />
-                            </template>
-                            <template #content>
-                              {{
-                                $t("settings_tls_certificates.expiring_warning")
-                              }}
-                            </template>
-                          </cv-interactive-tooltip>
-                        </div>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <cv-tag
-                          :kind="getTagKind(row.status)"
-                          :label="
-                            row.status === 'expiring'
-                              ? $t('settings_tls_certificates.valid')
-                              : $t('settings_tls_certificates.' + row.status)
-                          "
-                          class="no-margin"
-                        >
-                        </cv-tag>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <template v-if="row.names.length > 3">
-                          <div
-                            v-for="name in row.names.slice(0, 3)"
-                            :key="name"
-                          >
-                            {{ name }}
-                          </div>
-                          <cv-interactive-tooltip
-                            alignment="center"
-                            direction="top"
-                            class="info"
-                          >
-                            <template #trigger>
-                              <cv-link>
-                                {{
-                                  $tc(
-                                    "common.plus_others",
-                                    row.names.length - 3,
-                                    {
-                                      num: row.names.length - 3,
-                                    }
-                                  )
-                                }}
-                              </cv-link>
-                            </template>
-                            <template #content>
-                              <ul class="unordered-list">
-                                <li v-for="name in row.names" :key="name">
-                                  {{ name }}
-                                </li>
-                              </ul>
-                            </template>
-                          </cv-interactive-tooltip>
-                        </template>
-                        <template v-else>
-                          <div v-for="name in row.names" :key="name">
-                            {{ name }}
-                          </div>
-                        </template>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell>
-                        <span>{{ row.node }}</span>
-                      </cv-data-table-cell>
-                      <cv-data-table-cell class="table-overflow-menu-cell">
-                        <cv-overflow-menu
-                          flip-menu
-                          class="table-overflow-menu"
-                          :data-test-id="row.name + '-menu'"
-                        >
-                          <!-- manage names -->
-                          <cv-overflow-menu-item
-                            v-if="row.default && row.type === 'internal'"
-                            @click="showManageNamesModal(row)"
-                          >
-                            <NsMenuItem
-                              :icon="Edit20"
-                              :label="
-                                $t('settings_tls_certificates.manage_names')
-                              "
-                            />
-                          </cv-overflow-menu-item>
-                          <!-- delete -->
-                          <cv-overflow-menu-item
-                            danger
-                            @click="showDeleteCertificateModal(row)"
-                          >
-                            <NsMenuItem
-                              :icon="TrashCan20"
-                              :label="$t('common.delete')"
-                            />
-                          </cv-overflow-menu-item>
-                        </cv-overflow-menu>
-                      </cv-data-table-cell>
-                    </cv-data-table-row>
-                  </template>
-                </NsDataTable>
-              </div>
-            </div>
-          </cv-tile>
+          <NsTabs
+            :container="false"
+            :aria-label="$t('common.tab_navigation')"
+            :noDefaultToFirst="true"
+            @tab-selected="tabSelected"
+          >
+            <cv-tab
+              id="tab-1"
+              :label="$t('settings_tls_certificates.certificates')"
+              :selected="q.view === 'certificates'"
+            >
+              <cv-row>
+                <cv-column>
+                  <TlsCertificatesPanel
+                    :traefikInstances="traefikInstances"
+                    :internalNodes="internalNodes"
+                    :isLoadingInstances="loading.listInstalledModules"
+                    :instancesError="error.listInstalledModules"
+                    :selectedNodeId.sync="q.selectedNodeId"
+                  />
+                </cv-column>
+              </cv-row>
+            </cv-tab>
+            <cv-tab
+              id="tab-2"
+              :label="$t('settings_acme_servers.acme_settings')"
+              :selected="q.view === 'acme'"
+            >
+              <cv-row>
+                <cv-column>
+                  <AcmeSettingsPanel
+                    v-if="acmeTabVisited"
+                    :traefikInstances="traefikInstances"
+                    :isLoadingInstances="loading.listInstalledModules"
+                    :instancesError="error.listInstalledModules"
+                  />
+                </cv-column>
+              </cv-row>
+            </cv-tab>
+          </NsTabs>
         </cv-column>
       </cv-row>
     </cv-grid>
-    <UploadTlsCertificateModal
-      :state="uploadTlsCertificateState"
-      @upload-certificate-submit="uploadCustomCertificate($event)"
-      ref="uploadTlsCertificateModal"
-    />
-    <RequestTlsCertificateModal
-      :isShown="isShownRequestCertificateModal"
-      :nodes="nodesWithoutCertificate"
-      :allCertificates="certificates"
-      :certificate="currentCertificate"
-      @hide="hideRequestCertificateModal"
-    />
-    <!-- delete certificate modal -->
-    <NsDangerDeleteModal
-      :isShown="isShownDeleteCertificateModal"
-      :name="currentCertificate ? currentCertificate.ui_name : ''"
-      :title="$t('settings_tls_certificates.delete_certificate')"
-      :description="
-        $t('settings_tls_certificates.delete_certificate_description', {
-          name: currentCertificate ? currentCertificate.ui_name : '',
-        })
-      "
-      :typeToConfirm="
-        $t('common.type_to_confirm', {
-          name: currentCertificate ? currentCertificate.ui_name : '',
-        })
-      "
-      :isErrorShown="!!error.deleteCertificate"
-      :errorTitle="$t('action.delete-certificate')"
-      :errorDescription="error.deleteCertificate"
-      :isWarningShown="false"
-      @hide="hideDeleteCertificateModal"
-      @confirmDelete="deleteCertificate"
-    >
-      <template slot="explanation">
-        <p
-          v-if="currentCertificate && currentCertificate.automatic"
-          class="mg-top-sm"
-        >
-          {{ $t("settings_tls_certificates.automatic_cert_warning") }}
-        </p>
-        <NsInlineNotification
-          v-if="currentCertificate && currentCertificate.type === 'internal'"
-          kind="warning"
-          :title="$t('settings_tls_certificates.traefik_will_be_restarted')"
-          :description="
-            $t('settings_tls_certificates.delete_certificate_message', {
-              node: currentCertificate.node,
-            })
-          "
-          :showCloseButton="false"
-        />
-      </template>
-    </NsDangerDeleteModal>
-    <!-- delete obsolete certificates modal -->
-    <DeleteObsoleteCertificatesModal
-      :isShown="isShownDeleteObsoleteCertificatesModal"
-      :nodes="nodesWithObsoleteCertificates"
-      @hide="hideDeleteObsoleteCertificatesModal"
-    />
   </div>
 </template>
 
@@ -514,329 +92,113 @@ import {
   QueryParamService,
   UtilService,
   TaskService,
-  IconService,
   PageTitleService,
-  DateTimeService,
 } from "@nethserver/ns8-ui-lib";
 import { mapState } from "vuex";
-import _cloneDeep from "lodash/cloneDeep";
-import RequestTlsCertificateModal from "@/components/settings/RequestTlsCertificateModal.vue";
-import UploadTlsCertificateModal from "@/components/settings/UploadTlsCertificateModal.vue";
-import { StateManager as UploadTlsCertificateState } from "@/components/settings/UploadTlsCertificateModal.vue";
-import Upload20 from "@carbon/icons-vue/es/upload/20";
-import DeleteObsoleteCertificatesModal from "@/components/settings/DeleteObsoleteCertificatesModal.vue";
-import WarningAltFilled16 from "@carbon/icons-vue/es/warning--alt--filled/16";
+import TlsCertificatesPanel from "@/components/settings/TlsCertificatesPanel.vue";
+import AcmeSettingsPanel from "@/components/settings/AcmeSettingsPanel.vue";
+
+// order must match the cv-tab order: tabSelected maps the tab index
+const TAB_VIEWS = ["certificates", "acme"];
 
 export default {
   name: "SettingsTlsCertificates",
   components: {
-    RequestTlsCertificateModal,
-    UploadTlsCertificateModal,
-    DeleteObsoleteCertificatesModal,
-    WarningAltFilled16,
+    TlsCertificatesPanel,
+    AcmeSettingsPanel,
   },
-  mixins: [
-    TaskService,
-    UtilService,
-    IconService,
-    QueryParamService,
-    PageTitleService,
-    DateTimeService,
-  ],
+  mixins: [TaskService, UtilService, QueryParamService, PageTitleService],
   pageTitle() {
     return this.$t("settings_tls_certificates.title");
   },
   data() {
     return {
       q: {
+        view: "",
         selectedNodeId: "",
       },
-      tablePage: [],
-      tableColumns: [
-        "ui_name",
-        "ui_type",
-        "ui_issuer",
-        "valid_to",
-        "status",
-        "names",
-        "node",
-      ],
-      certificatesByTraefikId: {},
+      // mount once and keep alive: a v-if would re-run the task chain
+      acmeTabVisited: false,
       internalNodes: [],
-      isShownRequestCertificateModal: false,
-      isShownDeleteCertificateModal: false,
-      isShownDeleteObsoleteCertificatesModal: false,
-      currentErrorAction: "",
-      currentErrorDescription: "",
       traefikInstances: [],
-      currentCertificate: null,
-      filter: {
-        text: "",
-        certificateType: "",
-        certificateStatus: "",
-      },
-      typeOptions: [
-        {
-          name: "any",
-          label: this.$t("settings_tls_certificates.any_type"),
-          value: "any",
-        },
-        {
-          name: "requested",
-          label: this.$t("settings_tls_certificates.requested"),
-          value: "requested",
-        },
-        {
-          name: "uploaded",
-          label: this.$t("settings_tls_certificates.uploaded"),
-          value: "uploaded",
-        },
-        {
-          name: "automatic",
-          label: this.$t("settings_tls_certificates.automatic"),
-          value: "automatic",
-        },
-        {
-          name: "obsolete",
-          label: this.$t("settings_tls_certificates.obsolete"),
-          value: "obsolete",
-        },
-      ],
-      statusOptions: [
-        {
-          name: "any",
-          label: this.$t("settings_tls_certificates.any_status"),
-          value: "any",
-        },
-        {
-          name: "valid",
-          label: this.$t("settings_tls_certificates.valid"),
-          value: "valid",
-        },
-        {
-          name: "expiring",
-          label: this.$t("settings_tls_certificates.expiring"),
-          value: "expiring",
-        },
-        {
-          name: "expired",
-          label: this.$t("settings_tls_certificates.expired"),
-          value: "expired",
-        },
-      ],
-      Upload20,
+      taskListeners: [],
       loading: {
         listInstalledModules: false,
-        listCertificatesNum: 0,
-        deleteCertificate: false,
       },
       error: {
         listInstalledModules: "",
-        listCertificates: "",
-        deleteCertificate: "",
       },
-      listCertificatesErrors: [],
-      offlineTraefikInstances: [],
-      uploadTlsCertificateState: new UploadTlsCertificateState(),
     };
   },
   computed: {
-    ...mapState(["clusterNodes"]),
-    i18nTableColumns() {
-      return this.tableColumns.map((column) => {
-        return this.$t("settings_tls_certificates." + column);
-      });
-    },
-    loadingCertificates() {
-      return (
-        this.loading.listInstalledModules ||
-        this.loading.listCertificatesNum > 0
-      );
-    },
-    filteredCertificates() {
-      let certificates = this.certificates;
-
-      // filter by node
-      if (this.q.selectedNodeId && this.q.selectedNodeId !== "any") {
-        certificates = certificates.filter((certificate) => {
-          return certificate.nodeId === this.q.selectedNodeId;
-        });
-      }
-
-      // filter by text
-      if (this.filter.text.trim()) {
-        const searchText = this.filter.text.toLowerCase().trim();
-        certificates = certificates.filter((cert) => {
-          return (
-            cert.ui_name.toLowerCase().includes(searchText) ||
-            cert.ui_type.toLowerCase().includes(searchText) ||
-            cert.ui_issuer.toLowerCase().includes(searchText) ||
-            cert.expiration.toLowerCase().includes(searchText) ||
-            cert.status.toLowerCase().includes(searchText) ||
-            cert.serial.toLowerCase().includes(searchText) ||
-            cert.names.some((name) =>
-              name.toLowerCase().includes(searchText)
-            ) ||
-            cert.node.toLowerCase().includes(searchText)
-          );
-        });
-      }
-
-      // filter by type
-      if (
-        this.filter.certificateType &&
-        this.filter.certificateType !== "any"
-      ) {
-        certificates = certificates.filter((certificate) => {
-          return certificate.ui_type === this.filter.certificateType;
-        });
-      }
-
-      // filter by status
-      if (
-        this.filter.certificateStatus &&
-        this.filter.certificateStatus !== "any"
-      ) {
-        certificates = certificates.filter((certificate) => {
-          return certificate.status === this.filter.certificateStatus;
-        });
-      }
-      return certificates;
-    },
-    selectedNodeLabel() {
-      if (this.q.selectedNodeId === "any" || !this.q.selectedNodeId) {
-        return "";
-      }
-
-      const node = this.internalNodes.find(
-        (node) => node.value === this.q.selectedNodeId
-      );
-
-      if (node) {
-        return node.label;
-      }
-      return "";
-    },
-    nodesForFilter() {
-      if (!this.internalNodes.length) {
-        return [];
-      }
-
-      // add "Any node" at the beginning of internalNodes array
-      const nodes = _cloneDeep(this.internalNodes);
-
-      nodes.unshift({
-        name: "any",
-        label: this.$t("common.any_node"),
-        value: "any",
-      });
-      return nodes;
-    },
-    certificates() {
-      return Object.values(this.certificatesByTraefikId)
-        .flat()
-        .sort(this.sortCertificates);
-    },
-    nodesWithoutCertificate() {
-      const nodesWithDefaultCert = [
-        ...new Set(
-          this.certificates
-            .filter((cert) => cert.default && cert.type === "internal")
-            .map((cert) => cert.nodeId)
-        ),
-      ];
-
-      return this.internalNodes.filter(
-        (node) => !nodesWithDefaultCert.includes(node.value)
-      );
-    },
-    nodesWithObsoleteCertificates() {
-      const nodesWithObsoleteCert = [
-        ...new Set(
-          this.certificates
-            .filter((cert) => cert.ui_type === "obsolete")
-            .map((cert) => cert.nodeId)
-        ),
-      ];
-
-      return this.internalNodes.filter((node) =>
-        nodesWithObsoleteCert.includes(node.value)
-      );
-    },
-    hasActiveFilters() {
-      return (
-        (this.filter.text && this.filter.text.trim() !== "") ||
-        (this.filter.certificateType &&
-          this.filter.certificateType !== "any") ||
-        (this.filter.certificateStatus &&
-          this.filter.certificateStatus !== "any") ||
-        (this.q.selectedNodeId && this.q.selectedNodeId !== "any")
-      );
-    },
+    ...mapState(["clusterNodes", "isWebsocketConnected"]),
   },
   beforeRouteEnter(to, from, next) {
     next((vm) => {
       vm.watchQueryData(vm);
       vm.queryParamsToDataForCore(vm, to.query);
+      vm.normalizeView();
     });
   },
   beforeRouteUpdate(to, from, next) {
     this.queryParamsToDataForCore(this, to.query);
+
+    if (typeof to.query.view === "undefined") {
+      this.q.view = TAB_VIEWS[0];
+    }
+    this.normalizeView();
     next();
   },
+  watch: {
+    isWebsocketConnected: function (isConnected) {
+      if (isConnected) {
+        this.listInstalledModules();
+      }
+    },
+    "q.view": function (view) {
+      if (view === "acme") {
+        this.acmeTabVisited = true;
+      }
+    },
+  },
   created() {
-    // register to events
-    this.$root.$on("reloadCertificates", this.onReloadCertificates);
-
     this.listInstalledModules();
-
-    this.$nextTick(() => {
-      this.filter.certificateType = "any";
-      this.filter.certificateStatus = "any";
-    });
   },
   beforeDestroy() {
-    // remove event listeners
-    this.$root.$off("reloadCertificates");
+    this.clearTaskListeners();
   },
   methods: {
-    showRequestCertificateModal() {
-      this.currentCertificate = null;
-      this.isShownRequestCertificateModal = true;
+    registerTaskListener(eventName, handler) {
+      this.$root.$once(eventName, handler);
+      this.taskListeners.push([eventName, handler]);
     },
-    hideRequestCertificateModal() {
-      this.isShownRequestCertificateModal = false;
-    },
-    showManageNamesModal(certificate) {
-      this.currentCertificate = certificate;
-      this.isShownRequestCertificateModal = true;
-    },
-    showDeleteCertificateModal(certificate) {
-      this.currentCertificate = certificate;
-      this.isShownDeleteCertificateModal = true;
-    },
-    hideDeleteCertificateModal() {
-      this.isShownDeleteCertificateModal = false;
-    },
-    showDeleteObsoleteCertificatesModal() {
-      this.isShownDeleteObsoleteCertificatesModal = true;
+    clearTaskListeners() {
+      for (const [eventName, handler] of this.taskListeners) {
+        this.$root.$off(eventName, handler);
+      }
+      this.taskListeners = [];
     },
-    hideDeleteObsoleteCertificatesModal() {
-      this.isShownDeleteObsoleteCertificatesModal = false;
+    normalizeView() {
+      if (!TAB_VIEWS.includes(this.q.view)) {
+        this.q.view = TAB_VIEWS[0];
+      }
     },
     async listInstalledModules() {
+      // a handler of a previous round would decrement the counters of this one
+      this.clearTaskListeners();
       this.loading.listInstalledModules = true;
+      this.error.listInstalledModules = "";
       const taskAction = "list-installed-modules";
       const eventId = this.getUuid();
 
       // register to task error
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-aborted-${eventId}`,
         this.listInstalledModulesAborted
       );
 
       // register to task completion
-      this.$root.$once(
+      this.registerTaskListener(
         `${taskAction}-completed-${eventId}`,
         this.listInstalledModulesCompleted
       );
@@ -855,16 +217,13 @@ export default {
         console.error(`error creating task ${taskAction}`, err);
         const errMessage = this.getErrorMessage(err);
         this.error.listInstalledModules = errMessage;
-        this.currentErrorAction = this.$t("action." + taskAction);
-        this.currentErrorDescription = errMessage;
+        this.loading.listInstalledModules = false;
         return;
       }
     },
     listInstalledModulesAborted(taskResult, taskContext) {
       console.error(`${taskContext.action} aborted`, taskResult);
       this.error.listInstalledModules = this.$t("error.generic_error");
-      this.currentErrorAction = this.$t("action." + taskContext.action);
-      this.currentErrorDescription = this.$t("error.generic_error");
       this.loading.listInstalledModules = false;
     },
     listInstalledModulesCompleted(taskContext, taskResult) {
@@ -899,7 +258,6 @@ export default {
       }
       this.internalNodes = nodes;
       this.traefikInstances = traefikInstances;
-      this.uploadTlsCertificateState.setNodes(nodes);
       this.loading.listInstalledModules = false;
 
       this.$nextTick(() => {
@@ -916,463 +274,14 @@ export default {
           });
         }
       });
-
-      this.listCertificates();
-    },
-    async listCertificates() {
-      this.offlineTraefikInstances = [];
-      this.listCertificatesErrors = [];
-      this.loading.listCertificatesNum = 0;
-
-      for (const traefikInstance of this.traefikInstances) {
-        const taskAction = "list-certificates";
-        const eventId = this.getUuid();
-        this.loading.listCertificatesNum++;
-
-        // register to task events
-
-        this.$root.$once(
-          `${taskAction}-aborted-${eventId}`,
-          (taskResult, taskContext) => {
-            this.listCertificatesAborted(
-              taskResult,
-              taskContext,
-              traefikInstance
-            );
-          }
-        );
-
-        this.$root.$once(
-          `${taskAction}-completed-${eventId}`,
-          this.listCertificatesCompleted
-        );
-
-        const res = await to(
-          this.createModuleTaskForApp(traefikInstance.id, {
-            action: taskAction,
-            data: {
-              expand_list: true,
-            },
-            extra: {
-              title: this.$t("action." + taskAction),
-              isNotificationHidden: true,
-              traefikInstance: traefikInstance,
-              eventId,
-            },
-          })
-        );
-        const err = res[0];
-
-        if (err) {
-          console.error(
-            `error creating task ${taskAction} for instance ${traefikInstance.id} on node ${traefikInstance.node}`,
-            err
-          );
-          // Clean up orphaned event listeners since the task was never created
-          this.$root.$off(`${taskAction}-aborted-${eventId}`);
-          this.$root.$off(`${taskAction}-completed-${eventId}`);
-
-          if (err.response && err.response.status === 404) {
-            // 404 means the module API is unreachable: node is offline
-            if (
-              traefikInstance &&
-              !this.offlineTraefikInstances.find(
-                (instance) => instance.id === traefikInstance.id
-              )
-            ) {
-              this.offlineTraefikInstances.push(traefikInstance);
-            }
-          } else {
-            // Unexpected error: display a generic inline error notification
-            this.listCertificatesErrors.push({
-              title: this.$t("action." + taskAction),
-              description: `${this.$t(
-                "error.generic_error"
-              )} (${this.getTraefikInstanceLabel(
-                traefikInstance
-              )} - ${this.getNodeLabel(traefikInstance)})`,
-            });
-          }
-          this.loading.listCertificatesNum--;
-        }
-      }
-    },
-    listCertificatesAborted(taskResult, taskContext, traefikInstance) {
-      console.error(
-        `${taskContext.action} aborted for instance ${traefikInstance.id} on node ${traefikInstance.node}`,
-        taskResult
-      );
-
-      // Add error to array
-      this.listCertificatesErrors.push({
-        title: this.$t("action." + taskContext.action),
-        description: `${this.$t(
-          "error.generic_error"
-        )} (${this.getTraefikInstanceLabel(
-          traefikInstance
-        )} - ${this.getNodeLabel(traefikInstance)})`,
-      });
-      this.loading.listCertificatesNum--;
-    },
-    listCertificatesCompleted(taskContext, taskResult) {
-      const traefikId = taskContext.extra.traefikInstance.id;
-      const nodeId = taskContext.extra.traefikInstance.node;
-      const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
-      const node = { id: nodeId, ui_name: nodeUiName };
-      const nodeLabel = this.getShortNodeLabel(node) + ` (${traefikId})`;
-      const certs = [];
-
-      for (let certificate of taskResult.output.certificates) {
-        // "Certificate" column
-
-        if (certificate.default && certificate.type === "internal") {
-          certificate.ui_name = this.$t(
-            "settings_tls_certificates.node_name_certificate",
-            { node: this.getShortNodeLabel(node) }
-          );
-        } else {
-          certificate.ui_name = certificate.subject;
-        }
-
-        // "Type" column
-
-        let ui_type = "";
-
-        if (certificate.type === "custom") {
-          ui_type = "uploaded";
-        } else if (certificate.automatic) {
-          ui_type = "automatic";
-        } else if (certificate.default && certificate.type === "internal") {
-          ui_type = "requested";
-        } else if (!certificate.default && !certificate.automatic) {
-          ui_type = "obsolete";
-        }
-        certificate.ui_type = ui_type;
-
-        // "Issuer" column
-
-        const matched = certificate.issuer.match(/,O=(.+?)(?:,|$)/);
-
-        if (matched && matched.length > 1) {
-          certificate.ui_issuer = matched[1];
-        } else {
-          certificate.ui_issuer = certificate.issuer;
-        }
-
-        // "Status" column
-
-        certificate.status = certificate.validity;
-
-        certificate.node = nodeLabel;
-        certificate.nodeId = nodeId;
-        certificate.longNodeLabel = this.getNodeLabel(node);
-        certificate.traefikInstance = traefikId;
-
-        // "Expiration" column
-
-        const validTo = new Date(certificate.valid_to);
-        const formattedValidTo = validTo.toLocaleDateString(
-          navigator.language,
-          {
-            year: "numeric",
-            month: "long",
-            day: "numeric",
-          }
-        );
-        certificate.expiration = formattedValidTo;
-
-        certs.push(certificate);
-      }
-
-      // $set() is needed for reactivity (see https://v2.vuejs.org/v2/guide/reactivity.html#For-Objects)
-      this.$set(this.certificatesByTraefikId, traefikId, certs);
-
-      this.loading.listCertificatesNum--;
-    },
-    getTagKind(status) {
-      switch (status) {
-        case "valid":
-        case "expiring":
-          return "green";
-        case "expired":
-          return "red";
-        default:
-          return "gray";
-      }
-    },
-    getNodeLabel(instance) {
-      const nodeLabel = instance.node_ui_name
-        ? instance.node_ui_name +
-          " (" +
-          this.$t("common.node") +
-          " " +
-          instance.node +
-          ")"
-        : this.$t("common.node") + " " + instance.node;
-      return nodeLabel;
-    },
-    getTraefikInstanceLabel(instance) {
-      let label = instance.id;
-      if (instance.ui_name && instance.ui_name.trim()) {
-        label = `${instance.ui_name}(${instance.id})`;
-      }
-      return label;
-    },
-    getOfflineInstanceDescription(instance) {
-      return this.$t("settings_tls_certificates.certificates_not_displayed", {
-        instanceId: this.getTraefikInstanceLabel(instance),
-      });
-    },
-    clearFilters() {
-      this.q.selectedNodeId = "any";
-      this.filter.text = "";
-      this.filter.certificateType = "any";
-      this.filter.certificateStatus = "any";
-    },
-    onReloadCertificates() {
-      this.clearFilters();
-      this.listCertificates();
-    },
-    async deleteCertificate() {
-      this.loading.deleteCertificate = true;
-      this.error.deleteCertificate = "";
-      const taskAction = "delete-certificate";
-      const eventId = this.getUuid();
-
-      // register to task error
-      this.$root.$once(
-        `${taskAction}-aborted-${eventId}`,
-        this.deleteCertificateAborted
-      );
-
-      // register to task completion
-      this.$root.$once(
-        `${taskAction}-completed-${eventId}`,
-        this.deleteCertificateCompleted
-      );
-
-      const payload = {
-        type: this.currentCertificate.type,
-      };
-
-      if (this.currentCertificate.type === "custom") {
-        payload.path = this.currentCertificate.path;
-      } else {
-        payload.serial = this.currentCertificate.serial;
-      }
-
-      const res = await to(
-        this.createModuleTaskForApp(this.currentCertificate.traefikInstance, {
-          action: taskAction,
-          data: payload,
-          extra: {
-            title: this.$t("settings_tls_certificates.delete_certificate"),
-            description: this.$t("common.processing"),
-            eventId,
-          },
-        })
-      );
-      const err = res[0];
-
-      if (err) {
-        console.error(`error creating task ${taskAction}`, err);
-        this.error.deleteCertificate = this.getErrorMessage(err);
-        this.loading.deleteCertificate = false;
-        return;
-      }
-      this.hideDeleteCertificateModal();
-    },
-    deleteCertificateAborted(taskResult, taskContext) {
-      console.error(`${taskContext.action} aborted`, taskResult);
-      this.loading.deleteCertificate = false;
-    },
-    deleteCertificateCompleted() {
-      this.loading.deleteCertificate = false;
-
-      // reload certificates
-      this.listCertificates();
-    },
-    goToAcmeServers() {
-      this.$router.push("/settings/acme-servers");
-    },
-    async uploadCustomCertificate(event) {
-      // set component to loading
-      this.uploadTlsCertificateState.setLoading(true);
-      // clear error state
-      this.uploadTlsCertificateState.errors.keyFile = null;
-      this.uploadTlsCertificateState.errors.certFile = null;
-      this.uploadTlsCertificateState.errors.chainFile = null;
-
-      let keyFileDecoded = await new Promise((result) => {
-        let keyFileReader = new FileReader();
-        keyFileReader.readAsBinaryString(event.keyFile);
-        keyFileReader.onerror = () => {
-          throw Error();
-        };
-        keyFileReader.onload = () => {
-          result(window.btoa(keyFileReader.result));
-        };
-      }).catch(() => {
-        this.uploadTlsCertificateState.setKeyFileError(
-          this.$t("settings_tls_certificates.cannot_load_key_file")
-        );
-        this.uploadTlsCertificateState.setLoading(false);
-      });
-
-      let certFileText = await new Promise((result) => {
-        let certFileReader = new FileReader();
-        certFileReader.readAsBinaryString(event.certFile);
-        certFileReader.onerror = () => {
-          throw Error();
-        };
-        certFileReader.onload = () => {
-          result(certFileReader.result);
-        };
-      }).catch(() => {
-        this.uploadTlsCertificateState.setCertFileErrors(
-          this.$t("settings_tls_certificates.cannot_load_cert_file")
-        );
-        this.uploadTlsCertificateState.setLoading(false);
-      });
-
-      if (event.chainFile) {
-        let chainFileText = await new Promise((result) => {
-          let chainFileReader = new FileReader();
-          chainFileReader.readAsBinaryString(event.chainFile);
-          chainFileReader.onerror = () => {
-            throw Error();
-          };
-          chainFileReader.onload = () => {
-            result(chainFileReader.result);
-          };
-        }).catch(() => {
-          this.uploadTlsCertificateState.setCertFileErrors(
-            this.$t("settings_tls_certificates.cannot_load_chain_file")
-          );
-          this.uploadTlsCertificateState.setLoading(false);
-        });
-        certFileText += `\n${chainFileText}`;
-      }
-      const certFileDecoded = window.btoa(certFileText);
-      const taskAction = "upload-certificate";
-      const eventId = this.getUuid();
-
-      // abort handler
-      this.$root.$once(`${taskAction}-aborted-${eventId}`, (error) => {
-        this.uploadTlsCertificateState.setLoading(false);
-        switch (error.exit_code) {
-          case 2:
-          case 3:
-            this.uploadTlsCertificateState.setKeyFileError(error.output);
-            break;
-          case 4:
-            this.uploadTlsCertificateState.setCertFileError(error.output);
-            break;
-          default:
-            this.uploadTlsCertificateState.setKeyFileError(error.error);
-            break;
-        }
-      });
-
-      // validation success handler
-      this.$root.$once(`${taskAction}-validation-ok-${eventId}`, () => {
-        this.uploadTlsCertificateState.setLoading(false);
-        this.uploadTlsCertificateState.setVisible(false);
-        // clear state and node combobox
-        this.$refs.uploadTlsCertificateModal.clear();
-      });
-
-      // validation failed handler
-      this.$root.$once(
-        `${taskAction}-validation-failed-${eventId}`,
-        (validationErrors) => {
-          this.uploadTlsCertificateState.setLoading(false);
-
-          for (const validationError of validationErrors) {
-            const param = validationError.parameter;
-            const errorMessage = this.getI18nStringWithFallback(
-              "settings_tls_certificates." + validationError.error,
-              "error." + validationError.error,
-              null,
-              { value: validationError.value }
-            );
-
-            switch (param) {
-              case "keyFile":
-                this.uploadTlsCertificateState.setKeyFileError(errorMessage);
-                break;
-              case "certFile":
-                this.uploadTlsCertificateState.setCertFileError(errorMessage);
-                break;
-              case "chainFile":
-                this.uploadTlsCertificateState.setChainFileError(errorMessage);
-                break;
-              default:
-                break;
-            }
-          }
-        }
-      );
-
-      // completed task
-      this.$root.$once(`${taskAction}-completed-${eventId}`, () => {
-        // clear state and node combobox
-        this.$refs.uploadTlsCertificateModal.clear();
-        this.onReloadCertificates();
-      });
-
-      const res = await to(
-        this.createModuleTaskForApp(event.targetInstance, {
-          action: taskAction,
-          data: {
-            keyFile: keyFileDecoded,
-            certFile: certFileDecoded,
-          },
-          extra: {
-            title: this.$t("settings_tls_certificates.add_custom_certificate"),
-            description: this.$t("common.processing"),
-            eventId,
-          },
-        })
-      );
-      const err = res[0];
-
-      if (err) {
-        console.error(`error creating task ${taskAction}`, err);
-        this.uploadTlsCertificateState.setKeyFileError(
-          this.$t("error.generic_error")
-        );
-        this.uploadTlsCertificateState.setLoading(false);
-      }
     },
-    onSearchInput() {
-      // workaround to detect click on clear search button
-      if (!this.searchFilter) {
-        this.$refs.certificatesTable.goToFirstPage();
-        this.focusElement("tableSearch");
+    tabSelected(tabNum) {
+      if (tabNum == 0) {
+        this.q.view = "certificates";
+      } else if (tabNum == 1) {
+        this.q.view = "acme";
       }
     },
-    sortCertificates(a, b) {
-      if (a.ui_type !== b.ui_type) {
-        return b.ui_type.localeCompare(a.ui_type);
-      }
-
-      // If ui_type is the same, sort by expiration
-      return a.valid_to.localeCompare(b.valid_to);
-    },
   },
 };
 </script>
-
-<style scoped lang="scss">
-@import "../../styles/carbon-utils";
-
-.justify-flex-end {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.icon-and-text {
-  justify-content: flex-start;
-}
-</style>