diff --git a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
index 7169cd435..21608d396 100644
--- a/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
+++ b/src/frontend/src/components/core/flowToolbarComponent/components/deploy-dropdown.tsx
@@ -9,6 +9,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Switch } from "@/components/ui/switch";
 import { usePatchUpdateFlow } from "@/controllers/API/queries/flows/use-patch-update-flow";
+import { CustomLink } from "@/customization/components/custom-link";
 import { ENABLE_WIDGET } from "@/customization/feature-flags";
 import ApiModal from "@/modals/apiModal/new-api-modal";
 import EmbedModal from "@/modals/EmbedModal/embed-modal";
@@ -18,9 +19,11 @@ import useFlowsManagerStore from "@/stores/flowsManagerStore";
 import useFlowStore from "@/stores/flowStore";
 import { cn } from "@/utils/utils";
 import { useState } from "react";
+import { useHref } from "react-router-dom";
 
 export default function PublishDropdown() {
-  const domain = window.location.origin;
+  const location = useHref("/");
+  const domain = window.location.origin + location;
   const [openEmbedModal, setOpenEmbedModal] = useState(false);
   const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
   const flowId = currentFlow?.id;
@@ -134,7 +137,7 @@ export default function PublishDropdown() {
               hasIO
                 ? isPublished
                   ? encodeURI(`${domain}/playground/${flowId}`)
-                  : "Active to share a public version of this Playground"
+                  : "Activate to share a public version of this Playground"
                 : "Add a Chat Input or Chat Output to access your flow"
             }
           >
@@ -145,25 +148,30 @@ export default function PublishDropdown() {
               )}
               data-testid="shareable-playground"
             >
-              <DropdownMenuItem
-                disabled={!hasIO || !isPublished}
-                className="deploy-dropdown-item group flex-1"
-                onClick={() => {
-                  if (hasIO) {
-                    if (isPublished) {
-                      window.open(`${domain}/playground/${flowId}`, "_blank");
-                    }
-                  }
-                }}
+              <CustomLink
+                className={cn(
+                  "flex-1",
+                  !hasIO || !isPublished
+                    ? "pointer-events-none cursor-default"
+                    : "",
+                )}
+                to={`/playground/${flowId}`}
+                target="_blank"
               >
-                <div className="group-hover:bg-accent">
-                  <IconComponent
-                    name="Globe"
-                    className={`${groupStyle} icon-size mr-2`}
-                  />
-                  <span>Shareable Playground</span>
-                </div>
-              </DropdownMenuItem>
+                <DropdownMenuItem
+                  disabled={!hasIO || !isPublished}
+                  className="deploy-dropdown-item group flex-1"
+                  onClick={() => {}}
+                >
+                  <div className="group-hover:bg-accent">
+                    <IconComponent
+                      name="Globe"
+                      className={`${groupStyle} icon-size mr-2`}
+                    />
+                    <span>Shareable Playground</span>
+                  </div>
+                </DropdownMenuItem>
+              </CustomLink>
               <div className={`z-50 mr-2 text-foreground`}>
                 <Switch
                   data-testid="publish-switch"