diff --git a/ui/src/components/layout/TopNavBar.vue b/ui/src/components/layout/TopNavBar.vue
index 7406b8b3025..df34ffbd467 100644
--- a/ui/src/components/layout/TopNavBar.vue
+++ b/ui/src/components/layout/TopNavBar.vue
@@ -8,7 +8,7 @@
                     </router-link>
                 </el-breadcrumb-item>
             </el-breadcrumb>
-            <h1 class="h5 fw-semibold m-0 d-inline-fle">
+            <h1 class="h5 fw-semibold m-0 d-inline-flex">
                 <slot name="title">
                     {{ title }}
                 </slot>
diff --git a/ui/src/components/namespace/Namespace.vue b/ui/src/components/namespace/Namespace.vue
index b66b0a8d0b6..12088822b27 100644
--- a/ui/src/components/namespace/Namespace.vue
+++ b/ui/src/components/namespace/Namespace.vue
@@ -69,15 +69,23 @@
                 return this.user && this.user.hasAnyActionOnAnyNamespace(permission.FLOW, action.CREATE);
             },
             routeInfo() {
+                const parts = this.$route.params.id?.split(".") || [];
                 return {
-                    title: this.$route.params.id || this.$t("namespaces"),
+                    title: parts?.[parts.length - 1] || this.$t("namespaces"),
                     breadcrumb: [
                         {
                             label: this.$t("namespaces"),
                             link: {
                                 name: "namespaces"
                             }
-                        }
+                        },
+                        ...parts.map((part, index) => ({
+                            label: part,
+                            link: {
+                                name: "namespaces/update",
+                                params: {id: parts.slice(0, index + 1).join(".")},
+                            },
+                        })),
                     ]
                 };
             },