diff --git a/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte b/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte
index 67a372141b..d1a20dbb44 100644
--- a/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte
+++ b/packages/builder/src/components/design/settings/controls/URLVariableTestInput.svelte
@@ -1,13 +1,28 @@
 <script>
   import { onMount } from "svelte"
-  import { Input } from "@budibase/bbui"
+  import { Input, Icon, Body, AbsTooltip } from "@budibase/bbui"
   import { previewStore } from "@/stores/builder"
 
   export let baseRoute = ""
   export let testValue = ""
 
-  // Extract route parameters (anything starting with :)
   $: routeParams = baseRoute.match(/:[a-zA-Z]+/g) || []
+  $: placeholder = (() => {
+    // Helper function to extract the route parameters
+    // e.g /employees/:id/:name becomes /employees/1/John for the placeholder
+    if (!routeParams.length) return "Add test values"
+    const segments = baseRoute.split("/").slice(2)
+    let paramCount = 1
+    return segments
+      .map(segment => {
+        if (segment.startsWith(":")) {
+          return paramCount++
+        }
+        return segment
+      })
+      .join("/")
+  })()
+
   $: {
     if ($previewStore.selectedComponentContext?.url?.testValue !== undefined) {
       testValue = $previewStore.selectedComponentContext.url.testValue
@@ -25,8 +40,18 @@
 </script>
 
 <div class="url-test-section">
-  <div class="label">URL Variable Testing</div>
-  <div class="url-pattern">Pattern: {baseRoute}</div>
+  <div class="info">
+    <Body size="XS">URL Variable Testing</Body>
+    <AbsTooltip
+      text="Test how your screen behaves with different URL parameters. Enter values in the format shown in the placeholder."
+      position={"bottom"}
+      noWrap
+    >
+      <div class="icon">
+        <Icon name="InfoOutline" size="S" disabled hoverable />
+      </div>
+    </AbsTooltip>
+  </div>
   <div class="url-test-container">
     <div class="base-input">
       <Input disabled={true} value={`/${baseRoute.split("/")[1]}/`} />
@@ -35,9 +60,7 @@
       <Input
         value={testValue}
         on:change={onVariableChange}
-        placeholder={routeParams.length
-          ? `e.g. ${routeParams.map(p => p.slice(1)).join("/")}`
-          : "Add test values"}
+        placeholder={`${placeholder}`}
       />
     </div>
   </div>
@@ -49,18 +72,13 @@
     margin-top: var(--spacing-xl);
   }
 
-  .label {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    font-weight: 500;
+  .info {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-s);
     margin-bottom: var(--spacing-s);
   }
 
-  .url-pattern {
-    font-size: var(--spectrum-global-dimension-font-size-75);
-    color: var(--spectrum-global-color-gray-700);
-    margin-bottom: var(--spacing-xs);
-  }
-
   .url-test-container {
     display: flex;
     width: 100%;
@@ -86,9 +104,4 @@
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
-
-  /* Override input styles to make them look connected */
-  .url-test-container :global(.spectrum-Textfield:focus-within) {
-    z-index: 1;
-  }
 </style>
diff --git a/packages/client/src/stores/routes.ts b/packages/client/src/stores/routes.ts
index f9e2cca27e..50df18fa11 100644
--- a/packages/client/src/stores/routes.ts
+++ b/packages/client/src/stores/routes.ts
@@ -122,14 +122,13 @@ const createRouteStore = () => {
   const setTestUrlParams = (route: string, testValue: string) => {
     const routeSegments = route.split("/").slice(2)
     const testSegments = testValue.split("/")
-    const params: Record<string, string> = {}
 
+    const params: Record<string, string> = {}
     routeSegments.forEach((segment, index) => {
       if (segment.startsWith(":") && index < testSegments.length) {
         params[segment.slice(1)] = testSegments[index]
       }
     })
-
     store.update(state => ({ ...state, testUrlParams: params }))
   }
   return {
