diff --git a/packages/ui/card.tsx b/packages/ui/card.tsx
deleted file mode 100644
index e6551f3..0000000
--- a/packages/ui/card.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from "react";
-
-export function Card({
-  className,
-  title,
-  children,
-  href,
-}: {
-  className?: string;
-  title: string;
-  children: React.ReactNode;
-  href: string;
-}): JSX.Element {
-  return (
-    <a
-      className={className}
-      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      <h2>
-        {title} <span>-&gt;</span>
-      </h2>
-      <p>{children}</p>
-    </a>
-  );
-}
diff --git a/packages/ui/components/card.tsx b/packages/ui/components/card.tsx
new file mode 100644
index 0000000..d711656
--- /dev/null
+++ b/packages/ui/components/card.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useAddUtmParams } from "../hooks/use-add-utm-params";
+
+/**
+ * This component displays a link with a title and a content.
+ * @param className - CSS classes on the `a` tag
+ * @param title - title of the card element
+ * @param children - children displayed as content of the Card (in a `p` tag)
+ * @param href - URL that the `a` tag points to
+ * @returns JSX.Element
+ */
+export function Card({
+  className,
+  title,
+  children,
+  href,
+}: Readonly<{
+  className?: string;
+  title: string;
+  children: React.ReactNode;
+  href: string;
+}>): JSX.Element {
+  const { getStringWithUtmParams } = useAddUtmParams();
+  const hrefWithParams: string = getStringWithUtmParams(href);
+
+  return (
+    <a
+      className={className}
+      href={hrefWithParams}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <h2>
+        {title} <span>-&gt;</span>
+      </h2>
+      <p>{children}</p>
+    </a>
+  );
+}
diff --git a/packages/ui/hooks/use-add-utm-params.ts b/packages/ui/hooks/use-add-utm-params.ts
new file mode 100644
index 0000000..e1ad6e0
--- /dev/null
+++ b/packages/ui/hooks/use-add-utm-params.ts
@@ -0,0 +1,34 @@
+const utmParams = {
+  utm_source: "create-turbo",
+  utm_medium: "basic",
+  utm_campaign: "create-turbo",
+};
+
+export const useAddUtmParams = (): {
+  getWithUtmParams: (href: string) => URL;
+  getStringWithUtmParams: (href: string) => string;
+} => {
+  const getWithUtmParams = (href: string): URL => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call -- `URL.canParse` shows as an unsafe call to `any`
+    if (!URL.canParse(href)) {
+      throw new Error(`${href} cannot be parsed as a valid URL.`);
+    }
+
+    const url = new URL(href);
+    const params = new URLSearchParams(url.search);
+
+    for (const [key, val] of Object.entries(utmParams)) {
+      params.set(key, val);
+    }
+    url.search = params.toString();
+    return url;
+  };
+
+  const getStringWithUtmParams = (href: string): string =>
+    getWithUtmParams(href).toString();
+
+  return {
+    getWithUtmParams,
+    getStringWithUtmParams,
+  };
+};
diff --git a/packages/ui/index.tsx b/packages/ui/index.tsx
index 926b151..3594de0 100644
--- a/packages/ui/index.tsx
+++ b/packages/ui/index.tsx
@@ -1,2 +1,2 @@
 // component exports
-export { Card } from "./card";
+export { Card } from "./components/card";