diff --git a/core/ui/package.json b/core/ui/package.json
index 71f901a85..215791a80 100644
--- a/core/ui/package.json
+++ b/core/ui/package.json
@@ -16,7 +16,7 @@
     "@carbon/icons-vue": "^10.37.0",
     "@carbon/themes": "^10.34.0",
     "@carbon/vue": "^2.40.0",
-    "@nethserver/ns8-ui-lib": "^1.12.4",
+    "@nethserver/ns8-ui-lib": "^2.0.1",
     "await-to-js": "^3.0.0",
     "axios": "^0.33.0",
     "carbon-components": "^10.41.0",
diff --git a/core/ui/public/i18n/en/translation.json b/core/ui/public/i18n/en/translation.json
index 8330ac4fc..dea07ecbb 100644
--- a/core/ui/public/i18n/en/translation.json
+++ b/core/ui/public/i18n/en/translation.json
@@ -18,6 +18,7 @@
         "clear_search": "Clear search",
         "settings": "Settings",
         "cancel": "Cancel",
+        "add": "Add",
         "node": "Node",
         "nodes_c": "Node | Nodes",
         "version": "Version",
@@ -402,6 +403,8 @@
         "set-route": "Set route",
         "delete-route": "Delete route",
         "list-routes": "List routes",
+        "get-trusted-proxies": "Retrieve frontend proxies",
+        "set-trusted-proxies": "Configure frontend proxies",
         "set-certificate": "Set certificate",
         "set-default-certificate": "Request certificate",
         "delete-certificate": "Delete certificate",
@@ -844,7 +847,29 @@
         "show_logs": "Show logs",
         "traefik_will_be_restarted": "Traefik will be restarted",
         "delete_route_with_certificate_message": "Deleting this route will briefly disconnect HTTP clients connected to {node}.",
-        "revoke_certificate_message": "Revoking the route certificate will briefly disconnect HTTP clients connected to {node}."
+        "revoke_certificate_message": "Revoking the route certificate will briefly disconnect HTTP clients connected to {node}.",
+        "routes": "Routes",
+        "frontend_proxies": "Frontend proxies",
+        "proxies": "Frontend proxies",
+        "depth": "Trust depth",
+        "add_frontend_proxy": "Add frontend proxy",
+        "add_frontend_proxy_disabled_message": "All cluster nodes already have a frontend proxy",
+        "add_frontend_proxy_no_node_message": "No cluster node with a Traefik instance is available",
+        "edit_frontend_proxy_node": "Edit frontend proxies of {node}",
+        "delete_frontend_proxy_node": "Delete frontend proxies of {node}",
+        "delete_frontend_proxy_description": "Delete the frontend proxies of {node}? The real client IP won't be read from the X-Forwarded-For header anymore.",
+        "no_frontend_proxy": "No frontend proxy configured",
+        "no_frontend_proxy_description": "Add frontend proxy addresses to correctly identify client IPs behind reverse proxies or load balancers.",
+        "filter_frontend_proxies": "Filter",
+        "choose_node": "Choose node",
+        "frontend_proxies_placeholder": "e.g. 192.168.1.10\n2001:db8::1",
+        "frontend_proxies_helper": "Enter one IPv4 or IPv6 address per line",
+        "trust_depth": "Trust depth",
+        "trust_depth_helper": "Number of frontend proxy levels",
+        "trust_depth_tooltip": "Number of frontend proxies between the client and Traefik. With a trust depth of 1, the client IP address is read from the last entry of the X-Forwarded-For header.",
+        "trust_depth_invalid": "Enter a whole number greater than or equal to 0",
+        "bad_ip_address": "Invalid IP address. Enter one IPv4 or IPv6 address per line, without CIDR prefix",
+        "frontend_proxy_restart_message": "HTTP clients connected to {node} will be briefly disconnected. If your session goes through this node, the page reconnects on its own."
     },
     "settings_tls_certificates": {
         "title": "TLS certificates",
diff --git a/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
new file mode 100644
index 000000000..3f09a6b52
--- /dev/null
+++ b/core/ui/src/components/settings/ConfigureFrontendProxyModal.vue
@@ -0,0 +1,406 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <NsModal
+    size="default"
+    :visible="isShown"
+    :primary-button-disabled="loading.setTrustedProxies"
+    :isLoading="loading.setTrustedProxies"
+    @modal-hidden="onModalHidden"
+    @primary-click="setTrustedProxies"
+  >
+    <template slot="title">{{
+      isEditing
+        ? $t("settings_http_routes.edit_frontend_proxy_node", {
+            node: proxyConfig ? proxyConfig.nodeLabel : "",
+          })
+        : $t("settings_http_routes.add_frontend_proxy")
+    }}</template>
+    <template slot="content">
+      <cv-form @submit.prevent="setTrustedProxies">
+        <!-- when editing, the node is fixed and already named in the modal title -->
+        <!-- the key forces a remount: NsComboBox keeps its previous text when the
+             value is cleared, since it only repaints on a matching option -->
+        <NsComboBox
+          v-if="!isEditing"
+          :key="nodeComboBoxKey"
+          v-model="selectedNodeId"
+          :label="$t('settings_http_routes.choose_node')"
+          :title="$t('common.node')"
+          :auto-filter="true"
+          :auto-highlight="true"
+          :options="nodes"
+          :disabled="loading.setTrustedProxies"
+          :invalid-message="error.node"
+          light
+          ref="node"
+        />
+        <cv-text-area
+          v-model.trim="proxies_str"
+          :placeholder="$t('settings_http_routes.frontend_proxies_placeholder')"
+          :label="$t('settings_http_routes.frontend_proxies')"
+          :helper-text="$t('settings_http_routes.frontend_proxies_helper')"
+          :invalid-message="error.proxies"
+          :disabled="loading.setTrustedProxies"
+          rows="4"
+          ref="proxies"
+        />
+        <!-- cv-number-input has no tooltip slot: label markup copied from NsTextInput -->
+        <div class="label-with-tooltip">
+          <span class="bx--label">
+            {{ $t("settings_http_routes.trust_depth") }}
+          </span>
+          <cv-interactive-tooltip
+            alignment="start"
+            direction="top"
+            class="info"
+          >
+            <template slot="content">
+              {{ $t("settings_http_routes.trust_depth_tooltip") }}
+            </template>
+          </cv-interactive-tooltip>
+        </div>
+        <cv-number-input
+          v-model="depth"
+          :label="''"
+          :aria-label="$t('settings_http_routes.trust_depth')"
+          :helper-text="$t('settings_http_routes.trust_depth_helper')"
+          :invalid-message="error.depth"
+          :disabled="loading.setTrustedProxies"
+          :min="0"
+          :step="1"
+          class="trust-depth mg-bottom-md"
+          ref="depth"
+        />
+        <NsInlineNotification
+          v-if="selectedNodeLabel"
+          kind="warning"
+          :title="$t('settings_http_routes.traefik_will_be_restarted')"
+          :description="
+            $t('settings_http_routes.frontend_proxy_restart_message', {
+              node: selectedNodeLabel,
+            })
+          "
+          :showCloseButton="false"
+        />
+        <!-- need to wrap error notification inside a div: custom elements like NsInlineNotification don't have scrollIntoView() function -->
+        <div ref="setTrustedProxiesError">
+          <NsInlineNotification
+            v-if="error.setTrustedProxies"
+            kind="error"
+            :title="$t('action.set-trusted-proxies')"
+            :description="error.setTrustedProxies"
+            :showCloseButton="false"
+          />
+        </div>
+      </cv-form>
+    </template>
+    <template slot="secondary-button">{{ $t("common.cancel") }}</template>
+    <template slot="primary-button">{{
+      isEditing ? $t("common.save") : $t("common.add")
+    }}</template>
+  </NsModal>
+</template>
+
+<script>
+import to from "await-to-js";
+import { UtilService, TaskService } from "@nethserver/ns8-ui-lib";
+import { mapState } from "vuex";
+
+// set-trusted-proxies validates with ipaddress.ip_address(): no CIDR ranges, and
+// no leading-zero octets, which Python rejects since 3.9.5
+const IPV4_OCTET = "(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])";
+const IPV4 = `${IPV4_OCTET}(\\.${IPV4_OCTET}){3}`;
+const IPV4_PATTERN = new RegExp(`^${IPV4}$`);
+const IPV6_PATTERN = new RegExp(
+  `^(([0-9a-fA-F]{1,4}:){7,7}[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,7}:|([0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|([0-9a-fA-F]{1,4}:){1,5}(:[0-9a-fA-F]{1,4}){1,2}|([0-9a-fA-F]{1,4}:){1,4}(:[0-9a-fA-F]{1,4}){1,3}|([0-9a-fA-F]{1,4}:){1,3}(:[0-9a-fA-F]{1,4}){1,4}|([0-9a-fA-F]{1,4}:){1,2}(:[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:((:[0-9a-fA-F]{1,4}){1,6})|:((:[0-9a-fA-F]{1,4}){1,7}|:)|fe80:(:[0-9a-fA-F]{0,4}){0,4}%[0-9a-zA-Z]{1,}|::(ffff(:0{1,4}){0,1}:){0,1}${IPV4}|([0-9a-fA-F]{1,4}:){1,4}:${IPV4})$`
+);
+
+export default {
+  name: "ConfigureFrontendProxyModal",
+  mixins: [UtilService, TaskService],
+  props: {
+    isShown: Boolean,
+    nodes: {
+      type: Array,
+      required: true,
+    },
+    proxyConfig: { type: [Object, null], default: null },
+    isEditing: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      selectedNodeId: "",
+      nodeComboBoxKey: 0,
+      proxies_str: "",
+      depth: 1,
+      loading: {
+        setTrustedProxies: false,
+      },
+      error: {
+        node: "",
+        proxies: "",
+        depth: "",
+        setTrustedProxies: "",
+      },
+    };
+  },
+  computed: {
+    ...mapState(["isWebsocketConnected"]),
+    selectedNode() {
+      return this.nodes.find((node) => node.value === this.selectedNodeId);
+    },
+    selectedNodeLabel() {
+      return this.selectedNode ? this.selectedNode.label : "";
+    },
+  },
+  watch: {
+    isWebsocketConnected: function (isConnected) {
+      // safety net: nothing else clears the pending state if the request was cut off
+      if (isConnected && this.loading.setTrustedProxies) {
+        this.loading.setTrustedProxies = false;
+        this.$emit("hide");
+      }
+    },
+    isShown: function () {
+      if (this.isShown) {
+        this.clearErrors();
+
+        if (this.isEditing && this.proxyConfig) {
+          this.selectedNodeId = this.proxyConfig.nodeId;
+          this.proxies_str = this.proxyConfig.proxies_str;
+          // show the depth as returned by the backend, even if it is 0
+          this.depth = this.proxyConfig.depth;
+        } else {
+          this.selectedNodeId = "";
+          this.proxies_str = "";
+          this.depth = 1;
+          this.nodeComboBoxKey++;
+        }
+      }
+    },
+    "error.setTrustedProxies": function () {
+      if (this.error.setTrustedProxies) {
+        // scroll to notification error
+
+        this.$nextTick(() => {
+          const el = this.$refs.setTrustedProxiesError;
+          this.scrollToElement(el);
+        });
+      }
+    },
+  },
+  methods: {
+    onModalHidden() {
+      this.clearErrors();
+      this.$emit("hide");
+    },
+    getProxyList() {
+      return this.proxies_str
+        .split("\n")
+        .map((proxy) => proxy.trim())
+        .filter((proxy) => proxy !== "");
+    },
+    validateSetTrustedProxies() {
+      this.clearErrors();
+
+      let isValidationOk = true;
+
+      // the node field is only rendered when adding
+      // check selectedNode, not selectedNodeId: the parent drops nodes from the
+      // options as soon as they get a configuration, even while the modal is open
+
+      if (!this.isEditing && !this.selectedNode) {
+        this.error.node = this.$t("common.required");
+
+        if (isValidationOk) {
+          this.focusElement("node");
+          isValidationOk = false;
+        }
+      }
+
+      // frontend proxies
+
+      const proxyList = this.getProxyList();
+
+      if (!proxyList.length) {
+        this.error.proxies = this.$t("common.required");
+
+        if (isValidationOk) {
+          this.focusElement("proxies");
+          isValidationOk = false;
+        }
+      } else {
+        for (const proxy of proxyList) {
+          if (!IPV4_PATTERN.test(proxy) && !IPV6_PATTERN.test(proxy)) {
+            const isIPv6Like = proxy.includes(":");
+            this.error.proxies = this.$t(
+              isIPv6Like
+                ? "settings_http_routes.invalid_ipv6"
+                : "settings_http_routes.invalid_ipv4",
+              { ip: proxy }
+            );
+
+            if (isValidationOk) {
+              this.focusElement("proxies");
+              isValidationOk = false;
+            }
+            break;
+          }
+        }
+      }
+
+      // trust depth
+
+      const depth = Number(this.depth);
+
+      // cv-number-input emits NaN, not "", when a numeric value is cleared
+      if (this.depth === "" || this.depth === null || Number.isNaN(depth)) {
+        this.error.depth = this.$t("common.required");
+
+        if (isValidationOk) {
+          this.focusElement("depth");
+          isValidationOk = false;
+        }
+      } else if (!Number.isInteger(depth) || depth < 0) {
+        // the input schema requires an integer >= 0
+        this.error.depth = this.$t("settings_http_routes.trust_depth_invalid");
+
+        if (isValidationOk) {
+          this.focusElement("depth");
+          isValidationOk = false;
+        }
+      }
+
+      return isValidationOk;
+    },
+    async setTrustedProxies() {
+      if (!this.validateSetTrustedProxies()) {
+        return;
+      }
+      // when editing, the node combo box is not rendered: read the instance from the row
+      const traefikInstanceId = this.isEditing
+        ? this.proxyConfig.traefikInstance
+        : this.selectedNode.traefikInstance;
+      this.loading.setTrustedProxies = true;
+      this.error.setTrustedProxies = "";
+      const taskAction = "set-trusted-proxies";
+      const eventId = this.getUuid();
+
+      // register to task events
+
+      this.$root.$once(
+        `${taskAction}-aborted-${eventId}`,
+        this.setTrustedProxiesAborted
+      );
+
+      this.$root.$once(
+        `${taskAction}-validation-failed-${eventId}`,
+        this.setTrustedProxiesValidationFailed
+      );
+
+      this.$root.$once(
+        `${taskAction}-validation-ok-${eventId}`,
+        this.setTrustedProxiesValidationOk
+      );
+
+      this.$root.$once(
+        `${taskAction}-completed-${eventId}`,
+        this.setTrustedProxiesCompleted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(traefikInstanceId, {
+          action: taskAction,
+          // always send depth: the backend resets it to 1 if omitted
+          data: {
+            proxies: this.getProxyList(),
+            depth: Number(this.depth),
+          },
+          extra: {
+            title: this.$t("action." + taskAction),
+            description: this.$t("common.processing"),
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.setTrustedProxies = this.getErrorMessage(err);
+        this.loading.setTrustedProxies = false;
+        return;
+      }
+      // stay open until validation completes: closing now would hide the field errors
+    },
+    setTrustedProxiesAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.loading.setTrustedProxies = false;
+
+      // an abort after validation is reported by the task notification
+      this.$emit("hide");
+    },
+    setTrustedProxiesValidationOk() {
+      // the restart kills the websocket, so no completion event will arrive
+      this.loading.setTrustedProxies = false;
+      this.$emit("hide");
+    },
+    setTrustedProxiesValidationFailed(validationErrors) {
+      this.loading.setTrustedProxies = false;
+      let focusAlreadySet = false;
+
+      for (const validationError of validationErrors) {
+        const param = validationError.parameter;
+
+        // set i18n error message
+        this.error[param] = this.getI18nStringWithFallback(
+          "settings_http_routes." + validationError.error,
+          "error." + validationError.error
+        );
+
+        if (!focusAlreadySet) {
+          this.focusElement(param);
+          focusAlreadySet = true;
+        }
+      }
+    },
+    setTrustedProxiesCompleted() {
+      this.loading.setTrustedProxies = false;
+      this.$emit("reloadTrustedProxies");
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+
+.label-with-tooltip {
+  display: flex;
+  align-items: baseline;
+}
+
+// align with the form fields, capped at the same width globally
+.bx--inline-notification {
+  max-width: 38rem;
+}
+
+// wide enough to render the helper text on a single line
+.trust-depth {
+  max-width: 15rem;
+}
+
+// Carbon renders number inputs in monospace 0.75rem: match the other fields
+.trust-depth ::v-deep input[type="number"] {
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.42857;
+  letter-spacing: 0.16px;
+}
+</style>
diff --git a/core/ui/src/components/settings/HttpFrontendProxies.vue b/core/ui/src/components/settings/HttpFrontendProxies.vue
new file mode 100644
index 000000000..633b86f71
--- /dev/null
+++ b/core/ui/src/components/settings/HttpFrontendProxies.vue
@@ -0,0 +1,677 @@
+<!--
+  Copyright (C) 2026 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+<template>
+  <div>
+    <cv-tile light>
+      <!-- fullWidth: without it Carbon caps the grid at 99rem and centers it -->
+      <cv-grid fullWidth class="no-padding">
+        <cv-row>
+          <cv-column>
+            <div class="data-table-filters">
+              <cv-search
+                :label="$t('common.search')"
+                :placeholder="
+                  $t('settings_http_routes.filter_frontend_proxies')
+                "
+                :clear-aria-label="$t('common.clear_search')"
+                v-model="filter.text"
+                :disabled="loadingProxies"
+                size="large"
+                ref="tableSearch"
+                class="self-end filter-field"
+              >
+              </cv-search>
+              <NsComboBox
+                v-model="filter.nodeId"
+                :label="$t('common.choose')"
+                :title="$t('common.node')"
+                :auto-filter="true"
+                :auto-highlight="true"
+                :options="nodesForFilter"
+                :disabled="loadingProxies"
+                class="filter-field"
+              >
+              </NsComboBox>
+              <cv-link @click="clearFilters()" class="self-end mb-3 shrink-0"
+                >{{ $t("common.clear_filters") }}
+              </cv-link>
+            </div>
+          </cv-column>
+        </cv-row>
+        <!-- with no proxy configured, the button lives in the empty state -->
+        <cv-row v-if="proxyConfigs.length" class="toolbar">
+          <cv-column>
+            <NsButton
+              v-if="unconfiguredNodes.length || loadingProxies"
+              kind="primary"
+              :icon="Add20"
+              :disabled="loadingProxies"
+              @click="showAddProxyModal"
+              data-test-id="add-frontend-proxy"
+              >{{ $t("settings_http_routes.add_frontend_proxy") }}
+            </NsButton>
+            <cv-tooltip
+              v-else
+              alignment="start"
+              direction="top"
+              :tip="
+                $t('settings_http_routes.add_frontend_proxy_disabled_message')
+              "
+            >
+              <NsButton
+                kind="primary"
+                :icon="Add20"
+                disabled
+                data-test-id="add-frontend-proxy"
+                >{{ $t("settings_http_routes.add_frontend_proxy") }}
+              </NsButton>
+            </cv-tooltip>
+          </cv-column>
+        </cv-row>
+        <cv-row>
+          <cv-column>
+            <!-- NsDataTable replaces the rows with its error: report a partial
+                 failure here, so the nodes that did answer stay readable -->
+            <NsInlineNotification
+              v-if="tableError && proxyConfigs.length"
+              kind="error"
+              :title="tableErrorTitle"
+              :description="tableErrorDescription"
+              :showCloseButton="false"
+            />
+            <NsDataTable
+              :allRows="filteredProxyConfigs"
+              :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="loadingProxies"
+              :skeletonRows="3"
+              :isErrorShown="!!tableError && !proxyConfigs.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">
+                <template v-if="hasActiveFilters && proxyConfigs.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 frontend proxy configured -->
+                  <NsEmptyState
+                    :title="$t('settings_http_routes.no_frontend_proxy')"
+                    key="no-frontend-proxy-empty-state"
+                  >
+                    <template #pictogram>
+                      <NetworkPictogram />
+                    </template>
+                    <template #description>
+                      <div class="flex flex-col items-center gap-4">
+                        <p>
+                          {{
+                            $t(
+                              "settings_http_routes.no_frontend_proxy_description"
+                            )
+                          }}
+                        </p>
+                        <NsButton
+                          v-if="unconfiguredNodes.length || loadingProxies"
+                          kind="primary"
+                          :icon="Add20"
+                          :disabled="loadingProxies"
+                          @click="showAddProxyModal"
+                          data-test-id="add-frontend-proxy-empty-state"
+                          >{{ $t("settings_http_routes.add_frontend_proxy") }}
+                        </NsButton>
+                        <!-- no node to configure: the modal would open on an empty combo box -->
+                        <cv-tooltip
+                          v-else
+                          alignment="start"
+                          direction="top"
+                          :tip="
+                            $t(
+                              'settings_http_routes.add_frontend_proxy_no_node_message'
+                            )
+                          "
+                        >
+                          <NsButton
+                            kind="primary"
+                            :icon="Add20"
+                            disabled
+                            data-test-id="add-frontend-proxy-empty-state"
+                            >{{ $t("settings_http_routes.add_frontend_proxy") }}
+                          </NsButton>
+                        </cv-tooltip>
+                      </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.node }}</span>
+                  </cv-data-table-cell>
+                  <cv-data-table-cell>
+                    <div class="flex flex-col">
+                      <span v-for="proxy in row.proxies" :key="proxy">
+                        {{ proxy }}
+                      </span>
+                    </div>
+                  </cv-data-table-cell>
+                  <cv-data-table-cell>
+                    <span>{{ row.depth }}</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.node + '-menu'"
+                    >
+                      <cv-overflow-menu-item
+                        @click="showEditProxyModal(row)"
+                        :data-test-id="row.node + '-edit'"
+                      >
+                        <NsMenuItem :icon="Edit20" :label="$t('common.edit')" />
+                      </cv-overflow-menu-item>
+                      <cv-overflow-menu-item
+                        danger
+                        @click="showDeleteProxyModal(row)"
+                        :data-test-id="row.node + '-delete'"
+                      >
+                        <NsMenuItem
+                          :icon="TrashCan20"
+                          :label="$t('common.delete')"
+                        />
+                      </cv-overflow-menu-item>
+                    </cv-overflow-menu>
+                  </cv-data-table-cell>
+                </cv-data-table-row>
+              </template>
+            </NsDataTable>
+          </cv-column>
+        </cv-row>
+      </cv-grid>
+    </cv-tile>
+    <ConfigureFrontendProxyModal
+      :isShown="isShownConfigureProxyModal"
+      :nodes="isEditingProxy ? internalNodes : unconfiguredNodes"
+      :proxyConfig="currentProxyConfig"
+      :isEditing="isEditingProxy"
+      @hide="hideConfigureProxyModal"
+      @reloadTrustedProxies="getTrustedProxies"
+    />
+    <!-- delete frontend proxy modal -->
+    <NsDangerDeleteModal
+      :isShown="isShownDeleteProxyModal"
+      :name="proxyConfigToDelete ? proxyConfigToDelete.node : ''"
+      :title="
+        $t('settings_http_routes.delete_frontend_proxy_node', {
+          node: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+        })
+      "
+      :warning="$t('common.please_read_carefully')"
+      :description="
+        $t('settings_http_routes.delete_frontend_proxy_description', {
+          node: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+        })
+      "
+      :typeToConfirm="
+        $t('common.type_to_confirm', {
+          name: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+        })
+      "
+      :loading="loading.deleteTrustedProxies"
+      :isErrorShown="!!error.deleteTrustedProxies"
+      :errorTitle="$t('action.set-trusted-proxies')"
+      :errorDescription="error.deleteTrustedProxies"
+      :isWarningShown="false"
+      @hide="hideDeleteProxyModal"
+      @confirmDelete="deleteTrustedProxies"
+      data-test-id="delete-frontend-proxy-modal"
+    >
+      <template #explanation>
+        <div class="mt-4">
+          <NsInlineNotification
+            kind="warning"
+            :title="$t('settings_http_routes.traefik_will_be_restarted')"
+            :description="
+              $t('settings_http_routes.frontend_proxy_restart_message', {
+                node: proxyConfigToDelete ? proxyConfigToDelete.node : '',
+              })
+            "
+            :showCloseButton="false"
+          />
+        </div>
+      </template>
+    </NsDangerDeleteModal>
+  </div>
+</template>
+
+<script>
+import to from "await-to-js";
+import { UtilService, TaskService, IconService } from "@nethserver/ns8-ui-lib";
+import _cloneDeep from "lodash/cloneDeep";
+import { mapState } from "vuex";
+import ConfigureFrontendProxyModal from "@/components/settings/ConfigureFrontendProxyModal.vue";
+
+export default {
+  name: "HttpFrontendProxies",
+  components: {
+    ConfigureFrontendProxyModal,
+  },
+  mixins: [TaskService, UtilService, IconService],
+  props: {
+    // built by the parent view: nodes with a traefik instance carry traefikInstance
+    nodes: {
+      type: Array,
+      required: true,
+    },
+    traefikInstances: {
+      type: Array,
+      required: true,
+    },
+    isLoadingInstances: {
+      type: Boolean,
+      default: false,
+    },
+    // the instance lookup belongs to the parent: without it there is nothing to read
+    instancesError: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      tablePage: [],
+      // must match row properties: NsDataTable searches and sorts on them
+      tableColumns: ["node", "proxies", "depth"],
+      proxyConfigs: [],
+      // local on purpose: the parent binds q.selectedNodeId to the Routes tab filter
+      filter: {
+        text: "",
+        // set to the "all" sentinel by repaintNodeFilter(), once the options exist
+        nodeId: "",
+      },
+      currentProxyConfig: null,
+      proxyConfigToDelete: null,
+      isShownConfigureProxyModal: false,
+      isShownDeleteProxyModal: false,
+      isEditingProxy: false,
+      currentErrorAction: "",
+      currentErrorDescription: "",
+      // [eventName, handler] pairs registered on $root
+      readListeners: [],
+      deleteListeners: [],
+      loading: {
+        getTrustedProxiesNum: 0,
+        deleteTrustedProxies: false,
+      },
+      error: {
+        getTrustedProxies: "",
+        deleteTrustedProxies: "",
+      },
+    };
+  },
+  computed: {
+    ...mapState(["isWebsocketConnected"]),
+    i18nTableColumns() {
+      return this.tableColumns.map((column) => {
+        return this.$t("settings_http_routes." + column);
+      });
+    },
+    loadingProxies() {
+      return this.isLoadingInstances || this.loading.getTrustedProxiesNum > 0;
+    },
+    tableError() {
+      return this.instancesError || this.error.getTrustedProxies;
+    },
+    tableErrorTitle() {
+      return this.instancesError
+        ? this.$t("action.list-installed-modules")
+        : this.currentErrorAction;
+    },
+    tableErrorDescription() {
+      return this.instancesError || this.currentErrorDescription;
+    },
+    // only nodes running a traefik instance can be configured
+    internalNodes() {
+      return this.nodes.filter((node) => node.traefikInstance);
+    },
+    unconfiguredNodes() {
+      const configuredNodeIds = this.proxyConfigs.map(
+        (proxyConfig) => proxyConfig.nodeId
+      );
+
+      return this.internalNodes.filter(
+        (node) => !configuredNodeIds.includes(node.value)
+      );
+    },
+    nodesForFilter() {
+      if (!this.internalNodes.length) {
+        return [];
+      }
+
+      // add "Any node" at the beginning of internalNodes array
+      const nodes = _cloneDeep(this.internalNodes);
+
+      // same sentinel as the node filter of the routes table
+      nodes.unshift({
+        name: "all",
+        label: this.$t("common.any_node"),
+        value: "all",
+      });
+      return nodes;
+    },
+    filteredProxyConfigs() {
+      let proxyConfigs = this.proxyConfigs;
+
+      // filter by node
+      if (this.filter.nodeId && this.filter.nodeId !== "all") {
+        proxyConfigs = proxyConfigs.filter((proxyConfig) => {
+          return proxyConfig.nodeId === this.filter.nodeId;
+        });
+      }
+
+      // filter by text
+      if (this.filter.text.trim()) {
+        const searchText = this.filter.text.toLowerCase().trim();
+        proxyConfigs = proxyConfigs.filter((proxyConfig) => {
+          return (
+            proxyConfig.node.toLowerCase().includes(searchText) ||
+            proxyConfig.proxies.some((proxy) =>
+              proxy.toLowerCase().includes(searchText)
+            ) ||
+            proxyConfig.depth.toString().includes(searchText)
+          );
+        });
+      }
+      return proxyConfigs;
+    },
+    hasActiveFilters() {
+      return (
+        (this.filter.text && this.filter.text.trim() !== "") ||
+        (this.filter.nodeId && this.filter.nodeId !== "all")
+      );
+    },
+  },
+  watch: {
+    // NsComboBox paints its text from the options only when the value changes,
+    // and the parent publishes the nodes well after this component is created
+    nodesForFilter: function (nodesForFilter) {
+      if (nodesForFilter.length) {
+        this.repaintNodeFilter();
+      }
+    },
+    // the parent republishes the instances after a Traefik restart killed the
+    // websocket, which is also how this table recovers
+    traefikInstances: function () {
+      this.getTrustedProxies();
+    },
+    isWebsocketConnected: function (isConnected) {
+      // safety net: nothing else clears the pending state if the request was cut off
+      if (isConnected && this.loading.deleteTrustedProxies) {
+        this.loading.deleteTrustedProxies = false;
+        this.hideDeleteProxyModal();
+      }
+    },
+  },
+  created() {
+    if (this.traefikInstances.length) {
+      this.getTrustedProxies();
+    }
+  },
+  beforeDestroy() {
+    // a task completing after destroy would run a handler on a dead instance
+    this.clearListeners(this.readListeners);
+    this.clearListeners(this.deleteListeners);
+  },
+  methods: {
+    registerListener(listeners, eventName, handler) {
+      this.$root.$once(eventName, handler);
+      listeners.push([eventName, handler]);
+    },
+    clearListeners(listeners) {
+      listeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      listeners.splice(0);
+    },
+    clearTableError() {
+      this.error.getTrustedProxies = "";
+      this.currentErrorAction = "";
+      this.currentErrorDescription = "";
+    },
+    clearFilters() {
+      this.filter.text = "";
+      // "all", not "": NsComboBox only repaints its text on a matching option
+      this.filter.nodeId = "all";
+    },
+    repaintNodeFilter() {
+      const nodeId = this.filter.nodeId || "all";
+
+      // the value has to change for NsComboBox to read the options again
+      this.filter.nodeId = "";
+      this.$nextTick(() => {
+        this.filter.nodeId = nodeId;
+      });
+    },
+    showAddProxyModal() {
+      this.isEditingProxy = false;
+      this.currentProxyConfig = null;
+      this.isShownConfigureProxyModal = true;
+    },
+    showEditProxyModal(proxyConfig) {
+      this.isEditingProxy = true;
+      this.currentProxyConfig = proxyConfig;
+      this.isShownConfigureProxyModal = true;
+    },
+    hideConfigureProxyModal() {
+      this.isShownConfigureProxyModal = false;
+    },
+    showDeleteProxyModal(proxyConfig) {
+      this.error.deleteTrustedProxies = "";
+      this.proxyConfigToDelete = proxyConfig;
+      this.isShownDeleteProxyModal = true;
+    },
+    hideDeleteProxyModal() {
+      this.isShownDeleteProxyModal = false;
+    },
+    async getTrustedProxies() {
+      // a handler of a previous round would decrement the counter of this one
+      this.clearListeners(this.readListeners);
+      this.proxyConfigs = [];
+      // otherwise a transient error sticks after the nodes answer again
+      this.clearTableError();
+      // count the whole batch upfront: the counter must not reach zero between
+      // two iterations
+      this.loading.getTrustedProxiesNum = this.traefikInstances.length;
+
+      for (const traefikInstance of this.traefikInstances) {
+        const taskAction = "get-trusted-proxies";
+        const eventId = this.getUuid();
+
+        // register to task events
+
+        this.registerListener(
+          this.readListeners,
+          `${taskAction}-aborted-${eventId}`,
+          this.getTrustedProxiesAborted
+        );
+
+        this.registerListener(
+          this.readListeners,
+          `${taskAction}-completed-${eventId}`,
+          this.getTrustedProxiesCompleted
+        );
+
+        const res = await to(
+          this.createModuleTaskForApp(traefikInstance.id, {
+            action: taskAction,
+            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.getTrustedProxies = errMessage;
+          this.currentErrorAction = this.$t("action." + taskAction);
+          this.currentErrorDescription = errMessage;
+          this.loading.getTrustedProxiesNum--;
+        }
+      }
+    },
+    getTrustedProxiesAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.getTrustedProxies = this.$t("error.generic_error");
+      this.currentErrorAction = this.$t("action." + taskContext.action);
+      this.currentErrorDescription = this.$t("error.generic_error");
+      this.loading.getTrustedProxiesNum--;
+    },
+    getTrustedProxiesCompleted(taskContext, taskResult) {
+      const traefikId = taskContext.extra.traefikInstance.id;
+      const nodeId = taskContext.extra.traefikInstance.node;
+      const nodeUiName = taskContext.extra.traefikInstance.node_ui_name;
+      // get-trusted-proxies returns a Python set: sort for a stable display
+      const proxies = (taskResult.output.proxies || []).sort();
+
+      // drop the previous row of this node: a late event must not duplicate it
+      this.proxyConfigs = this.proxyConfigs.filter(
+        (proxyConfig) => proxyConfig.nodeId !== nodeId
+      );
+
+      // nodes without any frontend proxy are not listed
+      if (proxies.length) {
+        const node = { id: nodeId, ui_name: nodeUiName };
+
+        this.proxyConfigs.push({
+          nodeId: nodeId,
+          node: this.getShortNodeLabel(node) + ` (${traefikId})`,
+          nodeLabel: this.getShortNodeLabel(node),
+          traefikInstance: traefikId,
+          proxies: proxies,
+          proxies_str: proxies.join("\n"),
+          depth: taskResult.output.depth || 0,
+        });
+        this.proxyConfigs.sort(this.sortByProperty("node"));
+      }
+      this.loading.getTrustedProxiesNum--;
+    },
+    async deleteTrustedProxies() {
+      this.loading.deleteTrustedProxies = true;
+      this.error.deleteTrustedProxies = "";
+      const taskAction = "set-trusted-proxies";
+      const eventId = this.getUuid();
+
+      // register to task events
+
+      this.registerListener(
+        this.deleteListeners,
+        `${taskAction}-aborted-${eventId}`,
+        this.deleteTrustedProxiesAborted
+      );
+
+      this.registerListener(
+        this.deleteListeners,
+        `${taskAction}-completed-${eventId}`,
+        this.deleteTrustedProxiesCompleted
+      );
+
+      const res = await to(
+        this.createModuleTaskForApp(this.proxyConfigToDelete.traefikInstance, {
+          action: taskAction,
+          // an empty list clears the configuration and resets the depth to 0
+          data: {
+            proxies: [],
+            depth: 0,
+          },
+          extra: {
+            title: this.$t("settings_http_routes.delete_frontend_proxy_node", {
+              node: this.proxyConfigToDelete.node,
+            }),
+            description: this.$t("common.processing"),
+            eventId,
+          },
+        })
+      );
+      const err = res[0];
+
+      if (err) {
+        console.error(`error creating task ${taskAction}`, err);
+        this.error.deleteTrustedProxies = this.getErrorMessage(err);
+        this.loading.deleteTrustedProxies = false;
+        return;
+      }
+      // stay open until the task ends: closing now would hide an abort error.
+      // If the Traefik restart kills the websocket first, the reconnection
+      // watcher closes the modal and reads the configuration again.
+    },
+    deleteTrustedProxiesAborted(taskResult, taskContext) {
+      console.error(`${taskContext.action} aborted`, taskResult);
+      this.error.deleteTrustedProxies = this.$t("error.generic_error");
+      this.loading.deleteTrustedProxies = false;
+
+      // the node may have been left untouched: show what it holds now
+      this.getTrustedProxies();
+    },
+    deleteTrustedProxiesCompleted() {
+      this.loading.deleteTrustedProxies = false;
+      this.hideDeleteProxyModal();
+      this.getTrustedProxies();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../styles/carbon-utils";
+
+// Carbon makes these full width: cap them to keep the design proportions
+.filter-field {
+  max-width: 18rem;
+  width: 100%;
+}
+</style>
diff --git a/core/ui/src/views/settings/SettingsHttpRoutes.vue b/core/ui/src/views/settings/SettingsHttpRoutes.vue
index 28c3e1898..db2f3ce4a 100644
--- a/core/ui/src/views/settings/SettingsHttpRoutes.vue
+++ b/core/ui/src/views/settings/SettingsHttpRoutes.vue
@@ -40,6 +40,7 @@
         <cv-column>
           <NsInlineNotification
             v-if="
+              q.view !== 'frontend-proxies' &&
               q.selectedNodeId &&
               q.selectedNodeId !== 'all' &&
               selectedNodeLabel
@@ -59,196 +60,226 @@
       </cv-row>
       <cv-row>
         <cv-column>
-          <cv-tile light>
-            <cv-grid class="no-padding">
-              <cv-row>
-                <cv-column :md="4">
-                  <cv-combo-box
-                    v-model="q.selectedNodeId"
-                    :label="$t('common.choose')"
-                    :title="$t('common.show')"
-                    :auto-filter="true"
-                    :auto-highlight="true"
-                    :options="nodesForFilter"
-                    :disabled="loading.listInstalledModules"
-                    class="mg-bottom-xlg"
-                  >
-                  </cv-combo-box>
-                </cv-column>
-              </cv-row>
-              <cv-row class="toolbar">
-                <cv-column>
-                  <NsButton
-                    kind="secondary"
-                    :icon="Add20"
-                    @click="showCreateRouteModal"
-                    >{{ $t("settings_http_routes.create_route") }}
-                  </NsButton>
-                </cv-column>
-              </cv-row>
-              <cv-row>
-                <cv-column>
-                  <NsDataTable
-                    :allRows="filteredRoutes"
-                    :columns="i18nTableColumns"
-                    :rawColumns="tableColumns"
-                    :sortable="true"
-                    :pageSizes="[10, 25, 50, 100]"
-                    :overflow-menu="true"
-                    isSearchable
-                    :searchPlaceholder="$t('settings_http_routes.search_route')"
-                    :searchClearLabel="$t('common.clear_search')"
-                    :noSearchResultsLabel="$t('common.no_search_results')"
-                    :noSearchResultsDescription="
-                      $t('common.no_search_results_description')
-                    "
-                    :isLoading="loadingRoutes"
-                    :skeletonRows="5"
-                    :isErrorShown="
-                      !!error.listInstalledModules || !!error.listRoutes
-                    "
-                    :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')"
-                    :filterRowsCallback="filterHttpRoutes"
-                    :customSortTable="sortHttpRoutes"
-                    @updatePage="tablePage = $event"
-                  >
-                    <template slot="empty-state">
-                      <NsEmptyState
-                        :title="$t('settings_http_routes.no_http_route')"
+          <NsTabs
+            :container="false"
+            :aria-label="$t('common.tab_navigation')"
+            :noDefaultToFirst="true"
+            @tab-selected="tabSelected"
+          >
+            <cv-tab
+              id="tab-1"
+              :label="$t('settings_http_routes.routes')"
+              :selected="q.view === 'routes'"
+            >
+              <cv-tile light>
+                <!-- fullWidth: without it Carbon caps the grid at 99rem and centers it -->
+                <cv-grid fullWidth class="no-padding">
+                  <cv-row>
+                    <cv-column :md="4">
+                      <cv-combo-box
+                        v-model="q.selectedNodeId"
+                        :label="$t('common.choose')"
+                        :title="$t('common.show')"
+                        :auto-filter="true"
+                        :auto-highlight="true"
+                        :options="nodesForFilter"
+                        :disabled="loading.listInstalledModules"
+                        class="mg-bottom-xlg"
                       >
-                        <template #description>
-                          <div>
-                            {{
-                              $t(
-                                "settings_http_routes.no_http_route_description"
-                              )
-                            }}
-                          </div>
-                        </template>
-                      </NsEmptyState>
-                    </template>
-                    <template slot="data">
-                      <cv-data-table-row
-                        v-for="(row, rowIndex) in tablePage"
-                        :key="`${rowIndex}`"
-                        :value="`${rowIndex}`"
+                      </cv-combo-box>
+                    </cv-column>
+                  </cv-row>
+                  <cv-row class="toolbar">
+                    <cv-column>
+                      <NsButton
+                        kind="secondary"
+                        :icon="Add20"
+                        @click="showCreateRouteModal"
+                        >{{ $t("settings_http_routes.create_route") }}
+                      </NsButton>
+                    </cv-column>
+                  </cv-row>
+                  <cv-row>
+                    <cv-column>
+                      <NsDataTable
+                        :allRows="filteredRoutes"
+                        :columns="i18nTableColumns"
+                        :rawColumns="tableColumns"
+                        :sortable="true"
+                        :pageSizes="[10, 25, 50, 100]"
+                        :overflow-menu="true"
+                        isSearchable
+                        :searchPlaceholder="
+                          $t('settings_http_routes.search_route')
+                        "
+                        :searchClearLabel="$t('common.clear_search')"
+                        :noSearchResultsLabel="$t('common.no_search_results')"
+                        :noSearchResultsDescription="
+                          $t('common.no_search_results_description')
+                        "
+                        :isLoading="loadingRoutes"
+                        :skeletonRows="5"
+                        :isErrorShown="
+                          !!error.listInstalledModules || !!error.listRoutes
+                        "
+                        :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')"
+                        :filterRowsCallback="filterHttpRoutes"
+                        :customSortTable="sortHttpRoutes"
+                        @updatePage="tablePage = $event"
                       >
-                        <cv-data-table-cell>
-                          <div class="flex items-center gap-2">
-                            <span v-if="row.host && row.path">
-                              {{ row.host }}{{ row.path }}
-                            </span>
-                            <span v-else>
-                              {{ row.host || row.path }}
-                            </span>
-                            <cv-interactive-tooltip
-                              v-if="row.lets_encrypt_status === 'pending'"
-                              alignment="center"
-                              direction="top"
-                              class="shrink-0"
-                            >
-                              <template #trigger>
-                                <WarningAltFilled16 class="ns-warning" />
-                              </template>
-                              <template #content>
+                        <template slot="empty-state">
+                          <NsEmptyState
+                            :title="$t('settings_http_routes.no_http_route')"
+                          >
+                            <template #description>
+                              <div>
                                 {{
                                   $t(
-                                    "settings_http_routes.cannot_obtain_tls_certificate"
+                                    "settings_http_routes.no_http_route_description"
                                   )
                                 }}
-                                <cv-link
-                                  @click="goToPendingCertificateLogs(row)"
-                                >
-                                  {{ $t("settings_http_routes.show_logs") }}
-                                </cv-link>
-                              </template>
-                            </cv-interactive-tooltip>
-                          </div>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <cv-link @click="showRouteDetailModal(row)">
-                            {{ row.name }}
-                          </cv-link>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <span>
-                            {{ $t(`settings_http_routes.${row.type}`) }}
-                          </span>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <span>{{ row.node }}</span>
-                        </cv-data-table-cell>
-                        <cv-data-table-cell>
-                          <NsTag
-                            v-if="!row.user_created"
-                            kind="gray"
-                            size="sm"
-                            :label="$t('settings_http_routes.automatic')"
-                          />
-                          <NsTag
-                            v-if="
-                              row.ip_allowlist !== undefined &&
-                              row.ip_allowlist.length > 0
-                            "
-                            kind="high-contrast"
-                            size="sm"
-                            :label="$t('settings_http_routes.restricted')"
-                            class="no-margin"
-                          />
-                        </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'"
+                              </div>
+                            </template>
+                          </NsEmptyState>
+                        </template>
+                        <template slot="data">
+                          <cv-data-table-row
+                            v-for="(row, rowIndex) in tablePage"
+                            :key="`${rowIndex}`"
+                            :value="`${rowIndex}`"
                           >
-                            <cv-overflow-menu-item
-                              @click="showRouteDetailModal(row)"
-                              :data-test-id="row.name + '-details'"
-                            >
-                              <NsMenuItem
-                                :icon="ArrowRight20"
-                                :label="$t('common.see_details')"
+                            <cv-data-table-cell>
+                              <div class="flex items-center gap-2">
+                                <span v-if="row.host && row.path">
+                                  {{ row.host }}{{ row.path }}
+                                </span>
+                                <span v-else>
+                                  {{ row.host || row.path }}
+                                </span>
+                                <cv-interactive-tooltip
+                                  v-if="row.lets_encrypt_status === 'pending'"
+                                  alignment="center"
+                                  direction="top"
+                                  class="shrink-0"
+                                >
+                                  <template #trigger>
+                                    <WarningAltFilled16 class="ns-warning" />
+                                  </template>
+                                  <template #content>
+                                    {{
+                                      $t(
+                                        "settings_http_routes.cannot_obtain_tls_certificate"
+                                      )
+                                    }}
+                                    <cv-link
+                                      @click="goToPendingCertificateLogs(row)"
+                                    >
+                                      {{ $t("settings_http_routes.show_logs") }}
+                                    </cv-link>
+                                  </template>
+                                </cv-interactive-tooltip>
+                              </div>
+                            </cv-data-table-cell>
+                            <cv-data-table-cell>
+                              <cv-link @click="showRouteDetailModal(row)">
+                                {{ row.name }}
+                              </cv-link>
+                            </cv-data-table-cell>
+                            <cv-data-table-cell>
+                              <span>
+                                {{ $t(`settings_http_routes.${row.type}`) }}
+                              </span>
+                            </cv-data-table-cell>
+                            <cv-data-table-cell>
+                              <span>{{ row.node }}</span>
+                            </cv-data-table-cell>
+                            <cv-data-table-cell>
+                              <NsTag
+                                v-if="!row.user_created"
+                                kind="gray"
+                                size="sm"
+                                :label="$t('settings_http_routes.automatic')"
                               />
-                            </cv-overflow-menu-item>
-                            <cv-overflow-menu-item
-                              @click="showEditRouteModal(row)"
-                              :data-test-id="row.name + '-edit'"
-                            >
-                              <NsMenuItem
-                                :icon="Edit20"
-                                :label="$t('common.edit')"
+                              <NsTag
+                                v-if="
+                                  row.ip_allowlist !== undefined &&
+                                  row.ip_allowlist.length > 0
+                                "
+                                kind="high-contrast"
+                                size="sm"
+                                :label="$t('settings_http_routes.restricted')"
+                                class="no-margin"
                               />
-                            </cv-overflow-menu-item>
-                            <cv-overflow-menu-item
-                              danger
-                              @click="showDeleteRouteModal(row)"
-                              :disabled="!row.user_created"
-                              :data-test-id="row.name + '-delete'"
+                            </cv-data-table-cell>
+                            <cv-data-table-cell
+                              class="table-overflow-menu-cell"
                             >
-                              <NsMenuItem
-                                :icon="TrashCan20"
-                                :label="$t('common.delete')"
-                              />
-                            </cv-overflow-menu-item>
-                          </cv-overflow-menu>
-                        </cv-data-table-cell>
-                      </cv-data-table-row>
-                    </template>
-                  </NsDataTable>
-                </cv-column>
-              </cv-row>
-            </cv-grid>
-          </cv-tile>
+                              <cv-overflow-menu
+                                flip-menu
+                                class="table-overflow-menu"
+                                :data-test-id="row.name + '-menu'"
+                              >
+                                <cv-overflow-menu-item
+                                  @click="showRouteDetailModal(row)"
+                                  :data-test-id="row.name + '-details'"
+                                >
+                                  <NsMenuItem
+                                    :icon="ArrowRight20"
+                                    :label="$t('common.see_details')"
+                                  />
+                                </cv-overflow-menu-item>
+                                <cv-overflow-menu-item
+                                  @click="showEditRouteModal(row)"
+                                  :data-test-id="row.name + '-edit'"
+                                >
+                                  <NsMenuItem
+                                    :icon="Edit20"
+                                    :label="$t('common.edit')"
+                                  />
+                                </cv-overflow-menu-item>
+                                <cv-overflow-menu-item
+                                  danger
+                                  @click="showDeleteRouteModal(row)"
+                                  :disabled="!row.user_created"
+                                  :data-test-id="row.name + '-delete'"
+                                >
+                                  <NsMenuItem
+                                    :icon="TrashCan20"
+                                    :label="$t('common.delete')"
+                                  />
+                                </cv-overflow-menu-item>
+                              </cv-overflow-menu>
+                            </cv-data-table-cell>
+                          </cv-data-table-row>
+                        </template>
+                      </NsDataTable>
+                    </cv-column>
+                  </cv-row>
+                </cv-grid>
+              </cv-tile>
+            </cv-tab>
+            <cv-tab
+              id="tab-2"
+              :label="$t('settings_http_routes.frontend_proxies')"
+              :selected="q.view === 'frontend-proxies'"
+            >
+              <HttpFrontendProxies
+                :nodes="internalNodes"
+                :traefikInstances="traefikInstances"
+                :isLoadingInstances="loading.listInstalledModules"
+                :instancesError="error.listInstalledModules"
+              />
+            </cv-tab>
+          </NsTabs>
         </cv-column>
       </cv-row>
     </cv-grid>
@@ -327,14 +358,19 @@ import {
 import { mapState } from "vuex";
 import HttpRouteDetailModal from "@/components/settings/HttpRouteDetailModal.vue";
 import CreateOrEditHttpRouteModal from "@/components/settings/CreateOrEditHttpRouteModal.vue";
+import HttpFrontendProxies from "@/components/settings/HttpFrontendProxies.vue";
 import _cloneDeep from "lodash/cloneDeep";
 import WarningAltFilled16 from "@carbon/icons-vue/es/warning--alt--filled/16";
 
+// tab order: the view query param is the tab selector
+const VIEWS = ["routes", "frontend-proxies"];
+
 export default {
   name: "SettingsHttpRoutes",
   components: {
     HttpRouteDetailModal,
     CreateOrEditHttpRouteModal,
+    HttpFrontendProxies,
     WarningAltFilled16,
   },
   mixins: [
@@ -351,12 +387,12 @@ export default {
   data() {
     return {
       q: {
+        view: "",
         selectedNodeId: "",
       },
       tablePage: [],
       tableColumns: ["route", "name", "type", "node", "attributes"],
       routes: [],
-      internalNodes: [],
       isShownCreateOrEditRouteModal: false,
       isShownRouteDetailModal: false,
       isShownDeleteRouteModal: false,
@@ -366,6 +402,8 @@ export default {
       currentRoute: null,
       routeToDelete: null,
       isEditingRoute: false,
+      // [eventName, handler] pairs registered on $root for the read chain
+      readListeners: [],
       pendingCertificatesLogsPath: {},
       loading: {
         listInstalledModules: false,
@@ -380,7 +418,7 @@ export default {
     };
   },
   computed: {
-    ...mapState(["clusterNodes"]),
+    ...mapState(["clusterNodes", "isWebsocketConnected"]),
     i18nTableColumns() {
       return this.tableColumns.map((column) => {
         return this.$t("settings_http_routes." + column);
@@ -414,6 +452,27 @@ export default {
       }
       return "";
     },
+    // clusterNodes can land after list-installed-modules, on a page reload it
+    // usually does: recompute the list instead of snapshotting it once
+    internalNodes() {
+      return this.clusterNodes.map((node) => {
+        const nodeId = node.id.toString();
+        const traefikInstance = this.traefikInstances.find(
+          (instance) => instance.node === nodeId
+        );
+        const internalNode = {
+          name: nodeId,
+          label: this.getShortNodeLabel(node),
+          value: nodeId,
+        };
+
+        if (traefikInstance) {
+          internalNode.label += ` (${traefikInstance.id})`;
+          internalNode.traefikInstance = traefikInstance.id;
+        }
+        return internalNode;
+      });
+    },
     nodesForFilter() {
       if (!this.internalNodes.length) {
         return [];
@@ -430,6 +489,23 @@ export default {
       return nodes;
     },
   },
+  watch: {
+    // the filter has no option to select until both clusterNodes and the
+    // instances landed, in either order
+    internalNodes: function (internalNodes) {
+      if (internalNodes.length) {
+        this.repaintNodeFilter();
+      }
+    },
+    isWebsocketConnected: function (isConnected) {
+      // a Traefik restart kills this websocket: pending task events are lost.
+      // Always restart from the instance list, it chains everything else and
+      // republishes traefikInstances for the frontend proxies tab
+      if (isConnected) {
+        this.listInstalledModules();
+      }
+    },
+  },
   beforeRouteEnter(to, from, next) {
     next((vm) => {
       vm.watchQueryData(vm);
@@ -443,7 +519,22 @@ export default {
   created() {
     this.listInstalledModules();
   },
+  beforeDestroy() {
+    // a task completing after destroy would re-fire the whole read chain
+    this.clearListeners(this.readListeners);
+  },
+  mounted() {
+    // the tabs have no default selection: an unknown view would leave them all closed
+    if (!VIEWS.includes(this.q.view)) {
+      this.q.view = "routes";
+    }
+  },
   methods: {
+    tabSelected(tabNum) {
+      if (VIEWS[tabNum]) {
+        this.q.view = VIEWS[tabNum];
+      }
+    },
     showCreateRouteModal() {
       this.isEditingRoute = false;
       this.isShownCreateOrEditRouteModal = true;
@@ -470,19 +561,50 @@ export default {
     hideDeleteRouteModal() {
       this.isShownDeleteRouteModal = false;
     },
+    repaintNodeFilter() {
+      this.$nextTick(() => {
+        if (!this.q.selectedNodeId) {
+          // initially show all nodes
+          this.q.selectedNodeId = "all";
+          return;
+        }
+        const nodeId = this.q.selectedNodeId;
+
+        // cv-combo-box only repaints its text when the value changes
+        this.q.selectedNodeId = "";
+        this.$nextTick(() => {
+          this.q.selectedNodeId = nodeId;
+        });
+      });
+    },
+    registerListener(listeners, eventName, handler) {
+      this.$root.$once(eventName, handler);
+      listeners.push([eventName, handler]);
+    },
+    clearListeners(listeners) {
+      listeners.forEach(([eventName, handler]) => {
+        this.$root.$off(eventName, handler);
+      });
+      listeners.splice(0);
+    },
     async listInstalledModules() {
+      // a handler of a previous chain would decrement the counter of this one
+      this.clearListeners(this.readListeners);
       this.loading.listInstalledModules = true;
+      this.error.listInstalledModules = "";
       const taskAction = "list-installed-modules";
       const eventId = this.getUuid();
 
       // register to task error
-      this.$root.$once(
+      this.registerListener(
+        this.readListeners,
         `${taskAction}-aborted-${eventId}`,
         this.listInstalledModulesAborted
       );
 
       // register to task completion
-      this.$root.$once(
+      this.registerListener(
+        this.readListeners,
         `${taskAction}-completed-${eventId}`,
         this.listInstalledModulesCompleted
       );
@@ -503,7 +625,8 @@ export default {
         this.error.listInstalledModules = errMessage;
         this.currentErrorAction = this.$t("action." + taskAction);
         this.currentErrorDescription = errMessage;
-        return;
+        // otherwise the tables keep their skeleton rows for good
+        this.loading.listInstalledModules = false;
       }
     },
     listInstalledModulesAborted(taskResult, taskContext) {
@@ -512,73 +635,47 @@ export default {
       this.currentErrorAction = this.$t("action." + taskContext.action);
       this.currentErrorDescription = this.$t("error.generic_error");
       this.loading.listInstalledModules = false;
+      // the routes chain will not run: release its skeleton rows
+      this.loading.listRoutesNum = 0;
     },
     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.$nextTick(() => {
-        if (!this.q.selectedNodeId) {
-          // initially show all nodes
-          this.q.selectedNodeId = "all";
-        } else {
-          const nodeId = this.q.selectedNodeId;
-
-          // workaround to update combo box
-          this.q.selectedNodeId = "";
-          this.$nextTick(() => {
-            this.q.selectedNodeId = nodeId;
-          });
-        }
-      });
-
       this.listRoutes();
     },
     async listRoutes() {
       this.routes = [];
+      // otherwise a transient error sticks after the nodes answer again
+      this.error.listRoutes = "";
+      this.currentErrorAction = "";
+      this.currentErrorDescription = "";
+      // count the whole batch upfront: the counter must not reach zero between
+      // two iterations
+      this.loading.listRoutesNum = this.traefikInstances.length;
 
       for (const traefikInstance of this.traefikInstances) {
         const taskAction = "list-routes";
         const eventId = this.getUuid();
-        this.loading.listRoutesNum++;
 
         // register to task events
 
-        this.$root.$once(
+        this.registerListener(
+          this.readListeners,
           `${taskAction}-aborted-${eventId}`,
           this.listRoutesAborted
         );
 
-        this.$root.$once(
+        this.registerListener(
+          this.readListeners,
           `${taskAction}-completed-${eventId}`,
           this.listRoutesCompleted
         );
@@ -647,7 +744,9 @@ export default {
         route.traefikInstance = traefikId;
         routes.push(route);
       }
+      // drop the previous routes of this instance: a late event must not duplicate them
       this.routes = this.routes
+        .filter((route) => route.traefikInstance !== traefikId)
         .concat(routes)
         .sort(this.sortByProperty("name"));
       this.loading.listRoutesNum--;
diff --git a/core/ui/yarn.lock b/core/ui/yarn.lock
index fae5d8163..169a8b507 100644
--- a/core/ui/yarn.lock
+++ b/core/ui/yarn.lock
@@ -3289,9 +3289,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nethserver/ns8-ui-lib@npm:^1.12.4":
-  version: 1.12.4
-  resolution: "@nethserver/ns8-ui-lib@npm:1.12.4"
+"@nethserver/ns8-ui-lib@npm:^2.0.1":
+  version: 2.0.1
+  resolution: "@nethserver/ns8-ui-lib@npm:2.0.1"
   dependencies:
     "@rollup/plugin-json": ^4.1.0
     core-js: ^3.15.2
@@ -3300,7 +3300,7 @@ __metadata:
     vue-date-fns: ^2.0.1
   peerDependencies:
     vue: ^2.6.12
-  checksum: 319c09ec851a7391c49da77f1849d09a40da199349e5d797d1dd6d09b688a316f6bcc4cacd0018dc7a2348ccda9f155bf25ceb981720e854dde85490f8c28257
+  checksum: 1f87dc7ae9994d8c2ebe6348714f900f39096975be4f24af10b2adfa1c84e53b8782ae379d3c71b19873361d46a1f426cb8db23f7d69ae749059f3db138520a6
   languageName: node
   linkType: hard
 
@@ -14771,7 +14771,7 @@ __metadata:
     "@carbon/icons-vue": ^10.37.0
     "@carbon/themes": ^10.34.0
     "@carbon/vue": ^2.40.0
-    "@nethserver/ns8-ui-lib": ^1.12.4
+    "@nethserver/ns8-ui-lib": ^2.0.1
     "@storybook/addon-actions": ^6.2.9
     "@storybook/addon-essentials": ^6.2.9
     "@storybook/addon-links": ^6.2.9