diff --git a/packages/devtools/client/pages/modules/server-routes.vue b/packages/devtools/client/pages/modules/server-routes.vue
index fc3697843..8b567d4dd 100644
--- a/packages/devtools/client/pages/modules/server-routes.vue
+++ b/packages/devtools/client/pages/modules/server-routes.vue
@@ -57,65 +57,57 @@ const filterByCollection = computed(() => {
     collection.routes.push(route)
   }
 
-  filtered.value.forEach((item) => {
-    const filepathParts = item.filepath.split('/')
-    const collectionNames = filepathParts.slice(filepathParts.indexOf('server') + 1)
+  const findOrCreateCollection = (routeName: string, parentCollection?: ServerRouteInfo) => {
+    const existingCollection = parentCollection
+      ? parentCollection.routes?.find(r => r.route === routeName)
+      : collections.find(c => c.route === routeName)
+
+    if (existingCollection)
+      return existingCollection
+
+    const newCollection: ServerRouteInfo = {
+      route: routeName,
+      filepath: routeName.replace(/\W/g, '-').toLowerCase(),
+      type: 'collection',
+      routes: [],
+    }
 
-    if (collectionNames.length > 0 && collectionNames[collectionNames.length - 1].includes('.'))
-      collectionNames.pop()
+    if (parentCollection)
+      addRouteToCollection(parentCollection, newCollection)
 
-    let parentCollection: ServerRouteInfo | null = null
-    collectionNames.forEach((collectionName) => {
-      const existingCollection = parentCollection
-        ? parentCollection.routes?.find(r => r.route === collectionName)
-        : collections.find(c => c.route === collectionName)
+    else
+      collections.push(newCollection)
 
-      if (existingCollection) {
-        parentCollection = existingCollection
-      }
-      else {
-        const newCollection: ServerRouteInfo = {
-          route: collectionName,
-          filepath: collectionName.replace(/\W/g, '-').toLowerCase(),
-          type: 'collection',
-          routes: [],
-        }
-
-        if (parentCollection)
-          addRouteToCollection(parentCollection, newCollection)
+    return newCollection
+  }
 
-        else
-          collections.push(newCollection)
+  filtered.value.forEach((item) => {
+    let prefix: string | undefined
+    let parentCollection: ServerRouteInfo | undefined
 
-        parentCollection = newCollection
-      }
-    })
+    const filepathParts = item.filepath.split('/')
+    const collectionNames = filepathParts.slice(filepathParts.indexOf('server') + 1)
 
     if (item.type === 'runtime') {
-      const runtimeCollection = collections.find(c => c.route === 'runtime')
-
-      if (runtimeCollection) {
-        addRouteToCollection(runtimeCollection, item)
-      }
-      else {
-        const newCollection: ServerRouteInfo = {
-          route: 'runtime',
-          filepath: 'runtime',
-          type: 'collection',
-          routes: [item],
-        }
-
-        collections.push(newCollection)
+      collectionNames[0] = 'runtime'
+      const indexOfDist = filepathParts.indexOf('dist')
+      if (indexOfDist !== -1) {
+        prefix = filepathParts[indexOfDist - 1]
+        prefix && collectionNames.splice(1, 0, prefix)
       }
     }
 
-    else if (parentCollection) {
-      addRouteToCollection(parentCollection, item)
-    }
+    if (collectionNames.length > 0 && collectionNames[collectionNames.length - 1].includes('.'))
+      collectionNames.pop()
+
+    collectionNames.forEach((collectionName) => {
+      parentCollection = findOrCreateCollection(collectionName, parentCollection)
+    })
 
-    else {
+    if (parentCollection)
+      addRouteToCollection(parentCollection, item)
+    else
       collections.push(item)
-    }
   })
 
   return collections