diff --git a/.changeset/short-donkeys-raise.md b/.changeset/short-donkeys-raise.md
new file mode 100644
index 000000000..bd91fbd5d
--- /dev/null
+++ b/.changeset/short-donkeys-raise.md
@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Add ProductCard
diff --git a/packages/components/src/components/explore-main-product-cards.tsx b/packages/components/src/components/explore-main-product-cards.tsx
index 34c67c739..862d64f63 100644
--- a/packages/components/src/components/explore-main-product-cards.tsx
+++ b/packages/components/src/components/explore-main-product-cards.tsx
@@ -3,8 +3,8 @@ import { cn } from '../cn';
 import { FOUR_MAIN_PRODUCTS } from '../products';
 import { Heading } from './heading';
 import { ArrowIcon } from './icons';
+import { MainProductCard } from './product-card';
 import { TextLink } from './text-link';
-import { MainProductCard } from './tools-and-libraries-cards';
 
 export type ExploreMainProductCardsProps = HTMLAttributes<HTMLDivElement>;
 
diff --git a/packages/components/src/components/index.ts b/packages/components/src/components/index.ts
index 99389e60b..68885d663 100644
--- a/packages/components/src/components/index.ts
+++ b/packages/components/src/components/index.ts
@@ -26,11 +26,7 @@ export {
   type GraphQLConfCardProps,
 } from './hive-navigation';
 export { HiveFooter } from './hive-footer';
-export {
-  ToolsAndLibrariesCards,
-  MainProductCard,
-  AncillaryProductCard,
-} from './tools-and-libraries-cards';
+export { ToolsAndLibrariesCards } from './tools-and-libraries-cards';
 export * from './decorations';
 export * from './call-to-action';
 export * from './cookies-consent';
@@ -38,3 +34,4 @@ export * from './heading';
 export * from './info-card';
 export * from './stud';
 export * from './explore-main-product-cards';
+export * from './product-card';
diff --git a/packages/components/src/components/tools-and-libraries-cards/hive-decoration.svg b/packages/components/src/components/product-card/hive-decoration.svg
similarity index 97%
rename from packages/components/src/components/tools-and-libraries-cards/hive-decoration.svg
rename to packages/components/src/components/product-card/hive-decoration.svg
index 5e143d6bb..9d94d3765 100644
--- a/packages/components/src/components/tools-and-libraries-cards/hive-decoration.svg
+++ b/packages/components/src/components/product-card/hive-decoration.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="160" height="174" viewBox="0 0 160 172" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 172" fill="none">
   <mask
     id="path-1-outside-1_642_4223"
     maskUnits="userSpaceOnUse"
diff --git a/packages/components/src/components/tools-and-libraries-cards/hive-gateway-decoration.svg b/packages/components/src/components/product-card/hive-gateway-decoration.svg
similarity index 94%
rename from packages/components/src/components/tools-and-libraries-cards/hive-gateway-decoration.svg
rename to packages/components/src/components/product-card/hive-gateway-decoration.svg
index ff2b7b75d..6a2064f24 100644
--- a/packages/components/src/components/tools-and-libraries-cards/hive-gateway-decoration.svg
+++ b/packages/components/src/components/product-card/hive-gateway-decoration.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="177" height="174" viewBox="0 0 177 172" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 177 172" fill="none">
   <path
     d="m150 -11.850765-46.65480.000006V67.1886c0 13.4292-10.8768 24.306-24.3054 24.306H0l4.32e-6 46.6548H50.90466c6.36576 0 12.47094-2.529 16.97154-7.0308l75.0954-75.1056C147.4716 51.5124 150 45.408 150 39.043620000000004V-11.850765Zm12 0 46.6548.000006V67.1886c0 13.4292 10.8768 24.306 24.3054 24.306H312v46.6548h-50.9046c-6.366 0-12.471-2.529-16.9716-7.0308L168.0284 55.8562C164.5284 51.5124 162 45.408 162 39.043620000000004V-11.850765ZM150 300.1494h-46.6548V221.1096c0-13.4286-10.8768-24.3054-24.3054-24.3054H0l4.32e-6-46.6548H50.90466c6.36576 0 12.47094 2.529 16.97154 7.0302l75.0954 75.1056c4.5 4.5012 7.0284 10.605 7.0284 16.9698v50.8944Zm12 0h46.6548V221.1096c0-13.4286 10.8768-24.3054 24.3054-24.3054H312v-46.6548h-50.9046c-6.366 0-12.471 2.529-16.9716 7.0302L168.0284 232.2852c-4.5 4.5012-7.0284 10.605-7.0284 16.9698v50.8944Zm17.0214-179.022H132.978v46.0434h46.0434v-46.0434Z"
     fill="url(#paint0_linear_642_4281)"
diff --git a/packages/components/src/components/product-card/index.tsx b/packages/components/src/components/product-card/index.tsx
new file mode 100644
index 000000000..1dbea2b68
--- /dev/null
+++ b/packages/components/src/components/product-card/index.tsx
@@ -0,0 +1,92 @@
+import { cn } from '../../cn';
+import { FOUR_MAIN_PRODUCTS, ProductInfo, PRODUCTS } from '../../products';
+import { HighlightDecoration } from '../decorations';
+import { ArrowIcon } from '../icons';
+import { ReactComponent as HiveDecoration } from './hive-decoration.svg';
+import { ReactComponent as HiveGatewayDecoration } from './hive-gateway-decoration.svg';
+import { ReactComponent as MeshDecoration } from './mesh-decoration.svg';
+import { ReactComponent as YogaDecoration } from './yoga-decoration.svg';
+
+const cardDecorations = {
+  [PRODUCTS.HIVE.name]: HiveDecoration,
+  [PRODUCTS.YOGA.name]: YogaDecoration,
+  [PRODUCTS.MESH.name]: MeshDecoration,
+  [PRODUCTS.HIVE_GATEWAY.name]: HiveGatewayDecoration,
+};
+
+export function MainProductCard({ as: Root, product, className, ...rest }: ProductCardProps) {
+  const Decoration = cardDecorations[product.name];
+  const Icon = product.logo;
+
+  const isHive = product.name === PRODUCTS.HIVE.name;
+
+  return (
+    <Root
+      className={cn(
+        'hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 max-md:w-[283.5px]',
+        isHive && 'bg-green-1000 text-white',
+        className,
+      )}
+      {...rest}
+    >
+      <a
+        className="relative z-10 flex h-full flex-1 flex-col justify-between p-8 outline-none focus-visible:outline-none"
+        href={product.href}
+      >
+        <p className="font-medium">{product.name}</p>
+        <Icon className="mt-8" />
+        <ArrowIcon className="absolute bottom-8 right-8" />
+      </a>
+      <Decoration
+        strokeWidth="0.5px"
+        className={cn(
+          'pointer-events-none absolute bottom-0 right-0 h-full fill-blue-200 opacity-0 transition-opacity duration-500 group-focus-within:opacity-100 group-hover:opacity-100',
+          isHive && 'fill-blue-700',
+        )}
+        preserveAspectRatio="xMidYMid meet"
+      />
+      <HighlightDecoration className="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100" />
+    </Root>
+  );
+}
+
+export function AncillaryProductCard({ product, as: Root, className, ...rest }: ProductCardProps) {
+  const Logo = product.logo;
+  return (
+    <Root
+      className={cn(
+        'hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]',
+        className,
+      )}
+      {...rest}
+    >
+      <a
+        href={product.href}
+        className="relative flex h-full flex-col justify-between rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"
+      >
+        <div>
+          <p className="font-medium">{product.name}</p>
+          <p className="mt-2 text-sm text-green-800">{product.title}</p>
+        </div>
+        <div
+          role="presentation"
+          className="mt-8 flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white"
+        >
+          <Logo />
+        </div>
+        <ArrowIcon className="absolute bottom-8 right-8" />
+      </a>
+    </Root>
+  );
+}
+
+export interface ProductCardProps extends React.HTMLAttributes<HTMLElement> {
+  as: 'div' | 'li';
+  product: ProductInfo;
+}
+
+export function ProductCard(props: ProductCardProps) {
+  const isMainProduct = FOUR_MAIN_PRODUCTS.some(p => p.name === props.product.name);
+
+  return isMainProduct ? <MainProductCard {...props} /> : <AncillaryProductCard {...props} />;
+}
diff --git a/packages/components/src/components/tools-and-libraries-cards/mesh-decoration.svg b/packages/components/src/components/product-card/mesh-decoration.svg
similarity index 98%
rename from packages/components/src/components/tools-and-libraries-cards/mesh-decoration.svg
rename to packages/components/src/components/product-card/mesh-decoration.svg
index f71c79561..00f29425c 100644
--- a/packages/components/src/components/tools-and-libraries-cards/mesh-decoration.svg
+++ b/packages/components/src/components/product-card/mesh-decoration.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="156" height="174" viewBox="0 0 156 172" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 172" fill="none">
   <mask
     id="path-1-outside-1_642_4203"
     maskUnits="userSpaceOnUse"
diff --git a/packages/components/src/components/product-card/product-card.stories.tsx b/packages/components/src/components/product-card/product-card.stories.tsx
new file mode 100644
index 000000000..384241edb
--- /dev/null
+++ b/packages/components/src/components/product-card/product-card.stories.tsx
@@ -0,0 +1,31 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { hiveThemeDecorator } from '../../../../../.storybook/hive-theme-decorator';
+import { PRODUCTS } from '../../products';
+import { ProductCard } from './index';
+
+export default {
+  title: 'Hive/ProductCard',
+  component: ProductCard,
+  decorators: [hiveThemeDecorator],
+  parameters: {
+    forcedLightMode: true,
+  },
+} satisfies Meta;
+
+// interweaved to make sure main product cards look good alongside ancillary product cards
+const productsLexicographically = Object.values(PRODUCTS).sort((a, b) =>
+  a.name.localeCompare(b.name),
+);
+
+export const Default: StoryObj<typeof ProductCard> = {
+  name: 'ProductCard',
+  render() {
+    return (
+      <ul className="mt-5 grid grid-cols-4 gap-5 overflow-x-auto p-4 last-of-type:mb-24">
+        {productsLexicographically.map(product => (
+          <ProductCard as="li" key={product.name} product={product} />
+        ))}
+      </ul>
+    );
+  },
+};
diff --git a/packages/components/src/components/tools-and-libraries-cards/yoga-decoration.svg b/packages/components/src/components/product-card/yoga-decoration.svg
similarity index 98%
rename from packages/components/src/components/tools-and-libraries-cards/yoga-decoration.svg
rename to packages/components/src/components/product-card/yoga-decoration.svg
index f90268230..ed1f86d5d 100644
--- a/packages/components/src/components/tools-and-libraries-cards/yoga-decoration.svg
+++ b/packages/components/src/components/product-card/yoga-decoration.svg
@@ -1,4 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="211" height="163" viewBox="0 0 211 163" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -11 211 163" fill="none">
   <mask
     id="path-1-outside-1_642_4128"
     maskUnits="userSpaceOnUse"
diff --git a/packages/components/src/components/tools-and-libraries-cards/index.tsx b/packages/components/src/components/tools-and-libraries-cards/index.tsx
index a5adeee5e..ef34c6664 100644
--- a/packages/components/src/components/tools-and-libraries-cards/index.tsx
+++ b/packages/components/src/components/tools-and-libraries-cards/index.tsx
@@ -1,27 +1,16 @@
 import { cn } from '../../cn';
-import {
-  FOUR_MAIN_PRODUCTS,
-  ProductInfo,
-  PRODUCTS,
-  SIX_HIGHLIGHTED_PRODUCTS,
-} from '../../products';
+import { FOUR_MAIN_PRODUCTS, SIX_HIGHLIGHTED_PRODUCTS } from '../../products';
 import { CallToAction } from '../call-to-action';
-import { HighlightDecoration } from '../decorations';
 import { Heading } from '../heading';
-import { ArrowIcon } from '../icons';
-import { ReactComponent as HiveDecoration } from './hive-decoration.svg';
-import { ReactComponent as HiveGatewayDecoration } from './hive-gateway-decoration.svg';
-import { ReactComponent as MeshDecoration } from './mesh-decoration.svg';
-import { ReactComponent as YogaDecoration } from './yoga-decoration.svg';
+import { AncillaryProductCard, MainProductCard } from '../product-card';
 
-const cardDecorations = {
-  [PRODUCTS.HIVE.name]: HiveDecoration,
-  [PRODUCTS.YOGA.name]: YogaDecoration,
-  [PRODUCTS.MESH.name]: MeshDecoration,
-  [PRODUCTS.HIVE_GATEWAY.name]: HiveGatewayDecoration,
-};
-
-export function ToolsAndLibrariesCards({ className }: { className?: string }) {
+export function ToolsAndLibrariesCards({
+  className,
+  isHive,
+}: {
+  className?: string;
+  isHive?: boolean;
+}) {
   return (
     <section
       className={cn(
@@ -44,68 +33,12 @@ export function ToolsAndLibrariesCards({ className }: { className?: string }) {
           <AncillaryProductCard key={product.name} as="li" product={product} />
         ))}
       </ul>
-      <CallToAction href="https://github.com/the-guild-org" variant="primary">
+      <CallToAction
+        href={isHive ? '/ecosystem' : 'https://the-guild.dev/graphql/hive/ecosystem'}
+        variant="primary"
+      >
         Explore the Ecosystem
       </CallToAction>
     </section>
   );
 }
-
-export function MainProductCard({ as: Root, product }: { as: 'div' | 'li'; product: ProductInfo }) {
-  const Decoration = cardDecorations[product.name];
-  const Icon = product.logo;
-
-  return (
-    <Root
-      key={product.name}
-      className="hive-focus-within group relative flex-1 shrink-0 basis-[283.5px] overflow-hidden rounded-2xl bg-blue-400 text-green-1000 first-of-type:bg-green-1000 first-of-type:text-white max-md:w-[283.5px]"
-    >
-      <a
-        className="relative z-10 block flex-1 p-8 outline-none focus-visible:outline-none"
-        href={product.href}
-      >
-        <p className="font-medium">{product.name}</p>
-        <Icon className="mt-8" />
-        <ArrowIcon className="absolute bottom-8 right-8" />
-      </a>
-      <Decoration
-        strokeWidth="0.5px"
-        className="pointer-events-none absolute bottom-0 right-0 fill-blue-200 opacity-0 transition-opacity duration-500 group-first-of-type:fill-blue-700 group-focus-within:opacity-100 group-hover:opacity-100"
-        preserveAspectRatio="xMidYMid meet"
-      />
-      <HighlightDecoration className="pointer-events-none absolute left-0 top-[-15%] h-[150%] w-full opacity-0 transition-opacity duration-1000 group-focus-within:opacity-100 group-hover:opacity-100" />
-    </Root>
-  );
-}
-
-export function AncillaryProductCard({
-  product,
-  as: Root,
-}: {
-  product: ProductInfo;
-  as: 'div' | 'li';
-}) {
-  const Logo = product.logo;
-  return (
-    <Root
-      key={product.name}
-      className="hive-focus-within shrink-0 basis-[283.5px] rounded-2xl bg-beige-200 text-green-1000 transition-colors duration-500 hover:bg-beige-400 max-sm:min-w-[283.5px]"
-    >
-      <a
-        href={product.href}
-        className="relative flex h-full flex-col rounded-[inherit] p-8 focus:outline-none focus-visible:outline-none"
-      >
-        <p className="font-medium">{product.name}</p>
-        <p className="mt-2 text-sm text-green-800">{product.title}</p>
-        <div className="h-8 grow" />
-        <div
-          role="presentation"
-          className="flex size-8 items-center justify-center rounded bg-green-1000 p-[5px] text-sm/5 font-medium text-white"
-        >
-          <Logo />
-        </div>
-        <ArrowIcon className="absolute bottom-8 right-8" />
-      </a>
-    </Root>
-  );
-}