diff --git a/.chronus/changes/fix-playground-namespace-same-name-2024-7-9-16-22-29.md b/.chronus/changes/fix-playground-namespace-same-name-2024-7-9-16-22-29.md
new file mode 100644
index 000000000..d61377094
--- /dev/null
+++ b/.chronus/changes/fix-playground-namespace-same-name-2024-7-9-16-22-29.md
@@ -0,0 +1,8 @@
+---
+# Change versionKind to one of: internal, fix, dependencies, feature, deprecation, breaking
+changeKind: fix
+packages:
+  - "@typespec/html-program-viewer"
+---
+
+Fix namespace with the same name conflicting in the tree navigation
diff --git a/packages/html-program-viewer/src/react/use-tree-navigation.tsx b/packages/html-program-viewer/src/react/use-tree-navigation.tsx
index 1e19c3b58..b64ba208a 100644
--- a/packages/html-program-viewer/src/react/use-tree-navigation.tsx
+++ b/packages/html-program-viewer/src/react/use-tree-navigation.tsx
@@ -109,7 +109,8 @@ function computeTree(program: Program): TypeGraphListNode {
 }
 
 function computeTypeNode(parentPath: string, type: NamedType, name?: string): TypeGraphTypeNode {
-  const path = parentPath + "." + type.name.toString();
+  const pathSeg = name ?? type.name.toString();
+  const path = parentPath + "." + pathSeg;
   return computeTypeNodeProps(path, type, name);
 }