diff --git a/src/components/DockerLink.astro b/src/components/DockerLink.astro
index cd172f0..e775817 100644
--- a/src/components/DockerLink.astro
+++ b/src/components/DockerLink.astro
@@ -2,32 +2,33 @@
 const { WEB_PORT = 8080 } = import.meta.env;
 
 interface Props {
-  href: string;
-  title?: string;
+	href: string;
+	title?: string;
 }
-
-const href = (() => {
-
-  let href = Astro.props.href;
-
-  if (href.startsWith("http://") || href.startsWith("https://")) {
-    return astro.props.href;
-  }
-
-  if (href.startsWith("/")) {
-    href = href.slice(1);
-  }
-
-  const base = "http://localhost";
-  if (!WEB_PORT || WEB_PORT === "80") {
-    return `${base}/${href}`;
-  }
-
-  return `${base}:${WEB_PORT}/${href}`;
-
-})();
 ---
 
-<a href={href} target="_blank" rel="noopener noreferrer">
-  Docker: {Astro.props.title ?? href}
-</a>
+<astro-docker-link data-title={Astro.props.title}>
+  <a href="#" target="_blank" rel="noopener noreferrer">
+    Docker: {Astro.props.title}
+  </a>
+</astro-docker-link>
+
+<script define:vars={{ WEB_PORT }}>
+
+class AstroDockerLink extends HTMLElement {
+  connectedCallback() {
+
+    const host = window.location.hostname;
+    const url = `http://${host}:${WEB_PORT}`;
+
+    const anchor = this.querySelector("a");
+
+    anchor.href = url;
+
+    const title = this.dataset.title || url;
+    anchor.textContent = `Docker: ${title}`;
+  }
+}
+
+customElements.define("astro-docker-link", AstroDockerLink);
+</script>