diff --git a/packages/ui/app/src/api-page/web-socket/WebSocket.tsx b/packages/ui/app/src/api-page/web-socket/WebSocket.tsx
index 40d70972e4..81068c41a3 100644
--- a/packages/ui/app/src/api-page/web-socket/WebSocket.tsx
+++ b/packages/ui/app/src/api-page/web-socket/WebSocket.tsx
@@ -316,7 +316,7 @@ const WebhookContent: FC<WebSocket.Props> = ({ websocket, isLastInApi, api, type
                                         <PlaygroundButton
                                             state={{
                                                 type: "websocket",
-                                                webSocketId: websocket.slug.join("/"),
+                                                webSocketId: websocket.id,
                                                 api,
                                             }}
                                         />
diff --git a/packages/ui/app/src/api-playground/PlaygroundEndpointSelectorContent.tsx b/packages/ui/app/src/api-playground/PlaygroundEndpointSelectorContent.tsx
index a8e2c92d7c..947068a011 100644
--- a/packages/ui/app/src/api-playground/PlaygroundEndpointSelectorContent.tsx
+++ b/packages/ui/app/src/api-playground/PlaygroundEndpointSelectorContent.tsx
@@ -142,7 +142,7 @@ export const PlaygroundEndpointSelectorContent = forwardRef<HTMLDivElement, Play
                     )}
                     <ul className="relative z-0 list-none">
                         {endpoints.map((endpointItem) => {
-                            const active = endpointItem.slug.join("/") === selectedEndpoint?.slug.join("/");
+                            const active = endpointItem.id === selectedEndpoint?.id;
                             const text = renderTextWithHighlight(endpointItem.title, filterValue);
                             if (endpointItem.apiType === "endpoint") {
                                 return (