diff --git a/apps/shared-app/src/client/link.tsx b/apps/shared-app/src/client/link.tsx
deleted file mode 100644
index 0dd49a9..0000000
--- a/apps/shared-app/src/client/link.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client';
-
-import {useRouter} from '@mfng/core/client';
-import * as React from 'react';
-
-export type LinkProps = React.PropsWithChildren<{
-  readonly pathname: string;
-}>;
-
-export function Link({children, pathname}: LinkProps): React.ReactNode {
-  const {push} = useRouter();
-
-  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
-    event.preventDefault();
-    push({pathname});
-  };
-
-  return (
-    <a href={pathname} onClick={handleClick}>
-      {children}
-    </a>
-  );
-}
diff --git a/apps/shared-app/src/shared/navigation-item.tsx b/apps/shared-app/src/shared/navigation-item.tsx
index fb62d72..f3300de 100644
--- a/apps/shared-app/src/shared/navigation-item.tsx
+++ b/apps/shared-app/src/shared/navigation-item.tsx
@@ -1,6 +1,6 @@
+import {Link} from '@mfng/core/client';
 import {useRouterLocation} from '@mfng/core/use-router-location';
 import * as React from 'react';
-import {Link} from '../client/link.js';
 
 export type NavigationItemProps = React.PropsWithChildren<{
   readonly pathname: string;
@@ -21,10 +21,11 @@ export function NavigationItem({
   }
 
   return (
-    <Link pathname={pathname}>
-      <span className="inline-block rounded-md py-1 px-3 text-zinc-200 hover:bg-zinc-600">
-        {children}
-      </span>
+    <Link
+      to={{pathname}}
+      className="inline-block rounded-md py-1 px-3 text-zinc-200 hover:bg-zinc-600"
+    >
+      {children}
     </Link>
   );
 }
diff --git a/packages/core/src/client/index.ts b/packages/core/src/client/index.ts
index fea9781..6c5bb92 100644
--- a/packages/core/src/client/index.ts
+++ b/packages/core/src/client/index.ts
@@ -1,2 +1,3 @@
 export * from './hydrate-app.js';
+export * from './link.js';
 export * from './use-router.js';
diff --git a/packages/core/src/client/link.tsx b/packages/core/src/client/link.tsx
new file mode 100644
index 0000000..a3372c7
--- /dev/null
+++ b/packages/core/src/client/link.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import {useRouter} from '@mfng/core/client';
+import type {RouterLocation} from '@mfng/core/use-router-location';
+import {useRouterLocation} from '@mfng/core/use-router-location';
+import * as React from 'react';
+import {createUrlPath} from './router-location-utils.js';
+
+export type LinkProps = React.PropsWithChildren<{
+  readonly to: Partial<RouterLocation>;
+  readonly action?: 'push' | 'replace';
+  readonly className?: string;
+}>;
+
+export function Link({
+  children,
+  to,
+  action = `push`,
+  className,
+}: LinkProps): React.ReactNode {
+  const router = useRouter();
+  const location = useRouterLocation();
+
+  const urlPath = createUrlPath({
+    pathname: to.pathname ?? location.pathname,
+    search: to.search ?? ``,
+  });
+
+  const handleClick: React.MouseEventHandler<HTMLAnchorElement> = (event) => {
+    if (!event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+      event.preventDefault();
+      router[action](to);
+    }
+  };
+
+  return (
+    <a href={urlPath} onClick={handleClick} className={className}>
+      {children}
+    </a>
+  );
+}
diff --git a/packages/core/src/client/router.tsx b/packages/core/src/client/router.tsx
index 4a6ca50..9d9f843 100644
--- a/packages/core/src/client/router.tsx
+++ b/packages/core/src/client/router.tsx
@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import type {RouterLocation} from '../use-router-location.js';
 import {createUrl, createUrlPath} from './router-location-utils.js';