diff --git a/packages/hoppscotch-common/src/components/http/test/Runner.vue b/packages/hoppscotch-common/src/components/http/test/Runner.vue
index 96195724af2..aeb2d9ad776 100644
--- a/packages/hoppscotch-common/src/components/http/test/Runner.vue
+++ b/packages/hoppscotch-common/src/components/http/test/Runner.vue
@@ -33,7 +33,7 @@
       </div>
 
       <div v-else class="flex flex-col flex-1">
-        <HttpTestRunnerConfig v-model="tab" v-model:config="testRunnerConfig"  />
+        <HttpTestRunnerConfig v-model="tab" v-model:config="testRunnerConfig" />
       </div>
     </template>
     <template #secondary>
@@ -96,5 +96,5 @@ const emit = defineEmits<{
 
 const tab = useVModel(props, "modelValue", emit)
 
-const showResult = ref(false)
+const showResult = ref(true)
 </script>
diff --git a/packages/hoppscotch-common/src/components/http/test/RunnerConfig.vue b/packages/hoppscotch-common/src/components/http/test/RunnerConfig.vue
index a574f915fb6..00920b21c76 100644
--- a/packages/hoppscotch-common/src/components/http/test/RunnerConfig.vue
+++ b/packages/hoppscotch-common/src/components/http/test/RunnerConfig.vue
@@ -32,9 +32,8 @@
             :data="node.data.data.data"
             :is-open="true"
             :is-selected="node.data.isSelected"
-            :is-last-item="node.data.isLastItem"
             :show-selection="showCheckbox"
-            folder-type="collection"
+            folder-type="folder"
           />
 
           <HttpTestRequest
@@ -130,22 +129,16 @@
 </template>
 
 <script setup lang="ts">
-import IconHelpCircle from "~icons/lucide/help-circle"
-import IconMouseSquare from "~icons/lucide/mouse-pointer-square-dashed"
-import IconMousePointer from "~icons/lucide/mouse-pointer-square"
-import { ref } from "vue"
+import { SmartTreeAdapter } from "@hoppscotch/ui/dist/helpers/treeAdapter"
 import { useVModel } from "@vueuse/core"
-import { HoppTab } from "~/services/tab"
-import { HoppTabDocument } from "~/helpers/rest/document"
+import { ref, toRef } from "vue"
 import { useI18n } from "~/composables/i18n"
-import {
-  ChildrenResult,
-  SmartTreeAdapter,
-} from "@hoppscotch/ui/dist/helpers/treeAdapter"
-import { toRef } from "vue"
-import { Ref } from "vue"
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
-import { computed } from "vue"
+import { HoppTabDocument } from "~/helpers/rest/document"
+import { TestRunnerCollectionsAdapter } from "~/helpers/runner/adapter"
+import { HoppTab } from "~/services/tab"
+import IconHelpCircle from "~icons/lucide/help-circle"
+import IconMousePointer from "~icons/lucide/mouse-pointer-square"
+import IconMouseSquare from "~icons/lucide/mouse-pointer-square-dashed"
 import { TestRunnerConfig } from "./Runner.vue"
 
 const t = useI18n()
@@ -164,106 +157,12 @@ const config = useVModel(props, "config", emit)
 
 const showCheckbox = ref(false)
 
-class MyCollectionsAdapter implements SmartTreeAdapter<any> {
-  constructor(public data: Ref<HoppCollection<HoppRESTRequest>[]>) {}
-
-  navigateToFolderWithIndexPath(
-    collections: HoppCollection<HoppRESTRequest>[],
-    indexPaths: number[]
-  ) {
-    if (indexPaths.length === 0) return null
-
-    let target = collections[indexPaths.shift() as number]
-
-    while (indexPaths.length > 0)
-      target = target.folders[indexPaths.shift() as number]
-
-    return target !== undefined ? target : null
-  }
-
-  getChildren(id: string | null): Ref<ChildrenResult<any>> {
-    return computed(() => {
-      if (id === null) {
-        const data = this.data.value.map((item, index) => ({
-          id: index.toString(),
-          data: {
-            type: "collections",
-            isLastItem: index === this.data.value.length - 1,
-            data: {
-              parentIndex: null,
-              data: item,
-            },
-          },
-        }))
-        console.log(data)
-        return {
-          status: "loaded",
-          data: data,
-        } as ChildrenResult<any>
-      }
-
-      const indexPath = id.split("/").map((x) => parseInt(x))
-
-      const item = this.navigateToFolderWithIndexPath(
-        this.data.value,
-        indexPath
-      )
-
-      if (item) {
-        const data = [
-          ...item.folders.map((folder, index) => ({
-            id: `${id}/${index}`,
-            data: {
-              isLastItem:
-                item.folders && item.folders.length > 1
-                  ? index === item.folders.length - 1
-                  : false,
-              type: "folders",
-              isSelected: true,
-              data: {
-                parentIndex: id,
-                data: folder,
-              },
-            },
-          })),
-          ...item.requests.map((requests, index) => ({
-            id: `${id}/${index}`,
-            data: {
-              isLastItem:
-                item.requests && item.requests.length > 1
-                  ? index === item.requests.length - 1
-                  : false,
-              type: "requests",
-              isSelected: true,
-              data: {
-                parentIndex: id,
-                data: requests,
-              },
-            },
-          })),
-        ]
-
-        return {
-          status: "loaded",
-          data: data,
-        } as ChildrenResult<any>
-      } else {
-        return {
-          status: "loaded",
-          data: [],
-        }
-      }
-    })
-  }
-}
-
 const collection = toRef(
   tab.value.document.type === "test-runner"
     ? [tab.value.document.collection]
     : []
 )
 
-const collectionAdapter: SmartTreeAdapter<any> = new MyCollectionsAdapter(
-  collection
-)
+const collectionAdapter: SmartTreeAdapter<any> =
+  new TestRunnerCollectionsAdapter(collection)
 </script>
diff --git a/packages/hoppscotch-common/src/components/http/test/RunnerResult.vue b/packages/hoppscotch-common/src/components/http/test/RunnerResult.vue
index bef9cdddaae..b5549b294d3 100644
--- a/packages/hoppscotch-common/src/components/http/test/RunnerResult.vue
+++ b/packages/hoppscotch-common/src/components/http/test/RunnerResult.vue
@@ -49,19 +49,13 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { SmartTreeAdapter } from "@hoppscotch/ui/dist/helpers/treeAdapter"
 import { useVModel } from "@vueuse/core"
-import { HoppTab } from "~/services/tab"
-import { HoppTabDocument } from "~/helpers/rest/document"
+import { ref, toRef } from "vue"
 import { useI18n } from "~/composables/i18n"
-import {
-  ChildrenResult,
-  SmartTreeAdapter,
-} from "@hoppscotch/ui/dist/helpers/treeAdapter"
-import { toRef } from "vue"
-import { Ref } from "vue"
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
-import { computed } from "vue"
+import { HoppTabDocument } from "~/helpers/rest/document"
+import { TestRunnerCollectionsAdapter } from "~/helpers/runner/adapter"
+import { HoppTab } from "~/services/tab"
 
 const t = useI18n()
 const props = defineProps<{ modelValue: HoppTab<HoppTabDocument> }>()
@@ -76,106 +70,12 @@ const selectedTestTab = ref("all_tests")
 
 const showCheckbox = ref(false)
 
-class MyCollectionsAdapter implements SmartTreeAdapter<any> {
-  constructor(public data: Ref<HoppCollection<HoppRESTRequest>[]>) {}
-
-  navigateToFolderWithIndexPath(
-    collections: HoppCollection<HoppRESTRequest>[],
-    indexPaths: number[]
-  ) {
-    if (indexPaths.length === 0) return null
-
-    let target = collections[indexPaths.shift() as number]
-
-    while (indexPaths.length > 0)
-      target = target.folders[indexPaths.shift() as number]
-
-    return target !== undefined ? target : null
-  }
-
-  getChildren(id: string | null): Ref<ChildrenResult<any>> {
-    return computed(() => {
-      if (id === null) {
-        const data = this.data.value.map((item, index) => ({
-          id: index.toString(),
-          data: {
-            type: "collections",
-            isLastItem: index === this.data.value.length - 1,
-            data: {
-              parentIndex: null,
-              data: item,
-            },
-          },
-        }))
-        console.log(data)
-        return {
-          status: "loaded",
-          data: data,
-        } as ChildrenResult<any>
-      }
-
-      const indexPath = id.split("/").map((x) => parseInt(x))
-
-      const item = this.navigateToFolderWithIndexPath(
-        this.data.value,
-        indexPath
-      )
-
-      if (item) {
-        const data = [
-          ...item.folders.map((folder, index) => ({
-            id: `${id}/${index}`,
-            data: {
-              isLastItem:
-                item.folders && item.folders.length > 1
-                  ? index === item.folders.length - 1
-                  : false,
-              type: "folders",
-              isSelected: false,
-              data: {
-                parentIndex: id,
-                data: folder,
-              },
-            },
-          })),
-          ...item.requests.map((requests, index) => ({
-            id: `${id}/${index}`,
-            data: {
-              isLastItem:
-                item.requests && item.requests.length > 1
-                  ? index === item.requests.length - 1
-                  : false,
-              type: "requests",
-              isSelected: false,
-              data: {
-                parentIndex: id,
-                data: requests,
-              },
-            },
-          })),
-        ]
-
-        return {
-          status: "loaded",
-          data: data,
-        } as ChildrenResult<any>
-      } else {
-        return {
-          status: "loaded",
-          data: [],
-        }
-      }
-    })
-  }
-}
-
 const collection = toRef(
   tab.value.document.type === "test-runner"
     ? [tab.value.document.collection]
     : []
 )
 
-const collectionAdapter: SmartTreeAdapter<any> = new MyCollectionsAdapter(
-  collection
-)
+const collectionAdapter: SmartTreeAdapter<any> =
+  new TestRunnerCollectionsAdapter(collection)
 </script>
diff --git a/packages/hoppscotch-common/src/helpers/runner/adapter.ts b/packages/hoppscotch-common/src/helpers/runner/adapter.ts
new file mode 100644
index 00000000000..ab22151d81c
--- /dev/null
+++ b/packages/hoppscotch-common/src/helpers/runner/adapter.ts
@@ -0,0 +1,110 @@
+import {
+  ChildrenResult,
+  SmartTreeAdapter,
+} from "@hoppscotch/ui/dist/helpers/treeAdapter"
+import { Ref } from "vue"
+import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
+import { computed } from "vue"
+
+export class TestRunnerCollectionsAdapter implements SmartTreeAdapter<any> {
+  constructor(public data: Ref<HoppCollection<HoppRESTRequest>[]>) {}
+
+  navigateToFolderWithIndexPath(
+    collections: HoppCollection<HoppRESTRequest>[],
+    indexPaths: number[]
+  ) {
+    if (indexPaths.length === 0) return null
+
+    let target = collections[indexPaths.shift() as number]
+
+    while (indexPaths.length > 0)
+      target = target.folders[indexPaths.shift() as number]
+
+    return target !== undefined ? target : null
+  }
+
+  getChildren(id: string | null): Ref<ChildrenResult<any>> {
+    return computed(() => {
+      if (id === null) {
+        const data = this.data.value.map((item, index) => ({
+          id: `folder-${index.toString()}`,
+          data: {
+            type: "collections",
+            isLastItem: index === this.data.value.length - 1,
+            data: {
+              parentIndex: null,
+              data: item,
+            },
+          },
+        }))
+        return {
+          status: "loaded",
+          data: data,
+        } as ChildrenResult<any>
+      }
+
+      const childType = id.split("-")[0]
+
+      if (childType === "request") {
+        return {
+          status: "loaded",
+          data: [],
+        }
+      }
+
+      const folderId = id.split("-")[1]
+
+      const indexPath = folderId.split("/").map((x) => parseInt(x))
+
+      const item = this.navigateToFolderWithIndexPath(
+        this.data.value,
+        indexPath
+      )
+
+      if (item) {
+        const data = [
+          ...item.folders.map((folder, index) => ({
+            id: `folder-${folderId}/${index}`,
+            data: {
+              isLastItem:
+                item.folders && item.folders.length > 1
+                  ? index === item.folders.length - 1
+                  : false,
+              type: "folders",
+              isSelected: true,
+              data: {
+                parentIndex: id,
+                data: folder,
+              },
+            },
+          })),
+          ...item.requests.map((requests, index) => ({
+            id: `request-${id}/${index}`,
+            data: {
+              isLastItem:
+                item.requests && item.requests.length > 1
+                  ? index === item.requests.length - 1
+                  : false,
+              type: "requests",
+              isSelected: true,
+              data: {
+                parentIndex: id,
+                data: requests,
+              },
+            },
+          })),
+        ]
+
+        return {
+          status: "loaded",
+          data: data,
+        } as ChildrenResult<any>
+      } else {
+        return {
+          status: "loaded",
+          data: [],
+        }
+      }
+    })
+  }
+}
diff --git a/packages/hoppscotch-ui/src/components/smart/TreeBranch.vue b/packages/hoppscotch-ui/src/components/smart/TreeBranch.vue
index c9cdc5f75b9..e1fff5131e1 100644
--- a/packages/hoppscotch-ui/src/components/smart/TreeBranch.vue
+++ b/packages/hoppscotch-ui/src/components/smart/TreeBranch.vue
@@ -81,25 +81,31 @@ import { SmartTreeAdapter, TreeNode } from "~/helpers/treeAdapter"
 import { HOPP_UI_OPTIONS, HoppUIPluginOptions } from "./../../plugin"
 const { t } = inject<HoppUIPluginOptions>(HOPP_UI_OPTIONS) ?? {}
 
-const props = defineProps<{
-  /**
-   * The node item that will be used to render the tree branch
-   * @template T The type of the data passed to the tree branch
-   */
-  adapter: SmartTreeAdapter<T>
-  /**
-   *  The node item that will be used to render the tree branch content
-   */
-  nodeItem: TreeNode<T>
-  /**
-   *  Total number of rootNode
-   */
-  rootNodesLength?: number
-  /**
-   *  open by default
-   */
-  expandAll?: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    /**
+     * The node item that will be used to render the tree branch
+     * @template T The type of the data passed to the tree branch
+     */
+    adapter: SmartTreeAdapter<T>
+    /**
+     *  The node item that will be used to render the tree branch content
+     */
+    nodeItem: TreeNode<T>
+    /**
+     *  Total number of rootNode
+     */
+    rootNodesLength?: number
+    /**
+     *  open by default
+     */
+    expandAll?: boolean
+  }>(),
+  {
+    rootNodesLength: 0,
+    expandAll: false,
+  }
+)
 
 const CHILD_SLOT_NAME = "default"