diff --git a/app/components/ProductCard/ProductCard.stories.ts b/app/components/ProductCard/ProductCard.stories.ts
index 7f126eb..fc77839 100644
--- a/app/components/ProductCard/ProductCard.stories.ts
+++ b/app/components/ProductCard/ProductCard.stories.ts
@@ -23,5 +23,34 @@ export const NekoBot: Story = {
     stars: 1,
     commits: 142,
     pullRequests: 75,
+    linkedButtons: [
+      {
+        url: 'https://github.com/naoido/neko-bot',
+        label: 'Github',
+      },
+    ]
   }
 }
+
+export const Website: Story = {
+  args: {
+    headerImage: "https://pbs.twimg.com/profile_banners/1846395762277826560/1737992837/1500x500",
+    title: "団体公式サイト",
+    stacks: ["Cloudflare", "React", "Cloudflareworkers"],
+    description: "団体公式のウェブサイトです。Reactで構成されており、Cloudfalre Workers使用し記事の更新などを行い、Cloudflare Pagesにデプロイしています。",
+    stars: 2,
+    commits: 86,
+    pullRequests: 54,
+    linkedButtons: [
+      {
+        url: 'https://github.com/object-t/object-t-website',
+        label: 'Github',
+      },
+      {
+        url: "https://www.figma.com/design/YWBtX9qhd0QKOTY4a2SEWx",
+        label: "Figma",
+      }
+    ]
+  }
+}
+
diff --git a/app/components/ProductCard/ProductCard.tsx b/app/components/ProductCard/ProductCard.tsx
index 9ccbd4c..017c099 100644
--- a/app/components/ProductCard/ProductCard.tsx
+++ b/app/components/ProductCard/ProductCard.tsx
@@ -2,9 +2,13 @@ import { Devicon } from "../Devicon/Devicon"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faStar } from "@fortawesome/free-regular-svg-icons";
 import { faCodeBranch, faCodePullRequest } from "@fortawesome/free-solid-svg-icons";
+import { LinkedButton } from "../LinkedButton/LinkedButton";
+import type { LinkedButtonProps } from "../LinkedButton/LinkedButton";
 
 import "./product-card.css"
 
+
+
 export interface ProductCardProps {
   headerImage: string;
   title: string;
@@ -13,6 +17,7 @@ export interface ProductCardProps {
   stars: number;
   commits: number;
   pullRequests: number;
+  linkedButtons?: LinkedButtonProps[];
 }
 
 export const ProductCard = ({
@@ -23,6 +28,7 @@ export const ProductCard = ({
   stars,
   commits,
   pullRequests,
+  linkedButtons,
   ...props
 }: ProductCardProps) => {
   return (
@@ -66,6 +72,13 @@ export const ProductCard = ({
           <div className="repo-info-number">{pullRequests}</div>
         </div>
       </div>
+      <div className="product-button-container">
+        {linkedButtons?.map((prop, index) => (
+          <div className="product-button" key={prop.url || index}>
+            <LinkedButton url={prop.url} label={prop.label} style={prop.style} backgroundColor={prop.backgroundColor} color={prop.color} />
+          </div>
+        ))}
+      </div>
     </div>
   )
 }
diff --git a/app/components/ProductCard/product-card.css b/app/components/ProductCard/product-card.css
index 09e110a..910fc37 100644
--- a/app/components/ProductCard/product-card.css
+++ b/app/components/ProductCard/product-card.css
@@ -84,3 +84,14 @@
   font-size: 48px;
   color: var(--grey-text-color);
 }
+
+.product-button-container {
+  margin-top: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-button {
+  margin: 0 10px 0;
+}