diff --git a/src/pages/[postcode]/places/place/place.loader.ts b/src/pages/[postcode]/places/place/place.loader.ts
index 76037d4..68e2c4e 100644
--- a/src/pages/[postcode]/places/place/place.loader.ts
+++ b/src/pages/[postcode]/places/place/place.loader.ts
@@ -7,14 +7,50 @@ export interface PlaceLoaderResponse {
   location: Promise<Location>;
 }
 
-export default async function placeLoader({ params }: LoaderFunctionArgs) {
-  // TODO(WRAP-207): Use params.id instead
-  const location = LocatorApi.get<Location>(
-    `location/${params.placeName}/${params.placePostcode}`,
+function loadPlaceByProvider({
+  provider,
+  id,
+  postcode,
+}: {
+  provider: 'wrap' | 'valpak';
+  id: string;
+  postcode?: string;
+}) {
+  return LocatorApi.get<Location>(
+    provider === 'wrap'
+      ? `location/${provider}/${id}`
+      : `location/${provider}/${id}/${postcode}`,
   );
+}
+
+function loadPlaceByNameAndPostcode({
+  name,
+  postcode,
+}: {
+  name: string;
+  postcode: string;
+}) {
+  return LocatorApi.get<Location>(`location/${name}/${postcode}`);
+}
+
+export default async function placeLoader({ params }: LoaderFunctionArgs) {
+  const { placeNameOrProvider, placePostcodeOrId, placePostcode } = params;
+
+  if (placeNameOrProvider === 'wrap' || placeNameOrProvider === 'valpak') {
+    return {
+      location: loadPlaceByProvider({
+        provider: placeNameOrProvider,
+        id: placePostcodeOrId,
+        postcode: placePostcode,
+      }),
+    };
+  }
 
   return {
-    location,
+    location: loadPlaceByNameAndPostcode({
+      name: placeNameOrProvider,
+      postcode: placePostcodeOrId,
+    }),
   };
 }
 
diff --git a/src/pages/[postcode]/places/places.page.tsx b/src/pages/[postcode]/places/places.page.tsx
index 4f54476..3170bf1 100644
--- a/src/pages/[postcode]/places/places.page.tsx
+++ b/src/pages/[postcode]/places/places.page.tsx
@@ -145,12 +145,12 @@ function Places({
                     PostCodeResolver.extractPostcodeFromString(
                       location.address,
                     );
-                  const locationName = encodeURIComponent(location.name);
+                  const provider = location.locations[0].source;
 
                   return (
                     <li key={`${location.id}`}>
                       <Link
-                        to={`/${postcode}/places/${locationName}/${locationPostcode}`}
+                        to={`/${postcode}/places/${provider}/${location.id}/${locationPostcode}`}
                       >
                         <diamond-enter type="fade">
                           <diamond-card border radius>
diff --git a/src/pages/[postcode]/places/places.routes.tsx b/src/pages/[postcode]/places/places.routes.tsx
index a263659..af8c431 100644
--- a/src/pages/[postcode]/places/places.routes.tsx
+++ b/src/pages/[postcode]/places/places.routes.tsx
@@ -61,8 +61,7 @@ const routes: RouteObject[] = [
     ],
   },
   {
-    // TODO(WRAP-207): Move to /:postcode/places/:id
-    path: '/:postcode/places/:placeName/:placePostcode',
+    path: '/:postcode/places/:placeNameOrProvider/:placePostcodeOrId/:placePostcode?',
     element: <PlaceLayout />,
     errorElement: <PlaceErrorPage />,
     loader: placeLoader,