diff --git a/ui/src/components/NavLink.jsx b/ui/src/components/NavLink.jsx
index 3fd7b4623..5763dc115 100644
--- a/ui/src/components/NavLink.jsx
+++ b/ui/src/components/NavLink.jsx
@@ -26,7 +26,8 @@ export default React.forwardRef((props, ref) => {
       </Link>
     );
   } else {
-    const href = absolutePath ? url.toString() : cleanDuplicateSlash(getBasename() + url.toString());
+    // Note: + '/' + is required here
+    const href = absolutePath ? url.toString() : cleanDuplicateSlash(getBasename() + '/' + url.toString());
     return (
       <Link ref={ref} target="_blank" href={href}>
         {rest.children}
diff --git a/ui/src/plugins/fetch.js b/ui/src/plugins/fetch.js
index 4467339ce..ed0e51b51 100644
--- a/ui/src/plugins/fetch.js
+++ b/ui/src/plugins/fetch.js
@@ -41,6 +41,12 @@ export function fetchWithContext(
     });
 }
 
+/**
+ * @param {string} path 
+ * @returns path with '/' not duplicated except at ://
+ * 
+ * Note: we need the second .replace() because the first one doesn't catch multiple slashes at the start of the string
+ */
 export function cleanDuplicateSlash(path) {
-  return path.replace(/([^:]\/)\/+/g, "$1");
+  return path.replace(/([^:]\/)\/+/g, "$1").replace(/^(\/)+/, '/');
 }