diff --git a/web/src/components/buttons/ShareButton.tsx b/web/src/components/buttons/ShareButton.tsx
index 08e886e..02f67c0 100644
--- a/web/src/components/buttons/ShareButton.tsx
+++ b/web/src/components/buttons/ShareButton.tsx
@@ -1,15 +1,14 @@
 import { useState } from "react";
 import { EngagementShareRecipe } from "../../services/EngagementService";
 import { isApiError } from "../../types/api/error";
+import { GetBackendUrl } from "../../services/environment";
+import ROUTE_CONSTANTS from "../../types/routes";
 
 
 interface ShareButtonProps {
   id: number;
 }
 
-// TODO: Abstract this somehow, this needs to be loaded from the env
-const DOMAIN = "http://localhost:5173/";
-
 export default function ShareButton({ id }: ShareButtonProps) {
   const [clicked, setClicked] = useState<boolean>(false);
 
@@ -17,7 +16,8 @@ export default function ShareButton({ id }: ShareButtonProps) {
     if (clicked) return;
 
     // Copy first, so it feels fast
-    await navigator.clipboard.writeText(`${DOMAIN}/v2/web/recipe/${id}`)
+    const url = `${GetBackendUrl()}${ROUTE_CONSTANTS.Recipe(id)}`;
+    await navigator.clipboard.writeText(url);
 
     const result = await EngagementShareRecipe(id);
     if (isApiError(result)) {