diff --git a/homepage/src/components/cards/card.jsx b/homepage/src/components/cards/card.jsx
index c2bb781d..60c89ea0 100644
--- a/homepage/src/components/cards/card.jsx
+++ b/homepage/src/components/cards/card.jsx
@@ -1,48 +1,11 @@
-import Image from 'next/image';
 import DefaultCard from './defaultCard';
-import { ParseMarkdownAndHtml } from '../parseMarkdownAndHtml';
+import ProjectCard from './projectCard';
 
 const Card = ({ card }) => {
-  if (card.data.type !== 'project') {
-    return <DefaultCard card={card} />;
-  } else {
-    return (
-      <div className="col-md-4 mb-3" id={card.data.id}>
-        <div
-          className="section-main"
-          style={{ border: `1rem solid ${card.data.color.background}` }}
-        >
-          <h3>{card.data.title}</h3>
-          <div>
-            <div className="d-flex flex-wrap">
-              {card.data.avatarList.map((avatar) => (
-                <div
-                  key={avatar.data.title}
-                  className="col-3 avatar avatar-list"
-                  style={{
-                    backgroundColor: `${avatar.data.color.background}`,
-                    border: `3px solid ${avatar.data.color.border}`,
-                  }}
-                >
-                  <div
-                    style={{
-                      backgroundImage: `url(${avatar.data.image})`,
-                    }}
-                  >
-                    &nbsp;
-                  </div>
-                </div>
-              ))}
-            </div>
-            <strong>{card.data.description}</strong>
-            <ParseMarkdownAndHtml markdown={true}>
-              {card.content}
-            </ParseMarkdownAndHtml>
-          </div>
-        </div>
-      </div>
-    );
+  if (card.data.type === 'project') {
+    return <ProjectCard card={card} />;
   }
+  return <DefaultCard card={card} />;
 };
 
 export default Card;
diff --git a/homepage/src/components/cards/projectCard.jsx b/homepage/src/components/cards/projectCard.jsx
new file mode 100644
index 00000000..04a0b800
--- /dev/null
+++ b/homepage/src/components/cards/projectCard.jsx
@@ -0,0 +1,40 @@
+import { ParseMarkdownAndHtml } from '../parseMarkdownAndHtml';
+
+const ProjectCard = ({ card }) => (
+  <div className="col-md-4 mb-3" id={card.data.id}>
+    <div
+      className="section-main"
+      style={{ border: `1rem solid ${card.data.color.background}` }}
+    >
+      <h3>{card.data.title}</h3>
+      <div>
+        <div className="d-flex flex-wrap">
+          {card.data.avatarList.map((avatar) => (
+            <div
+              key={avatar.data.title}
+              className="col-3 avatar avatar-list"
+              style={{
+                backgroundColor: `${avatar.data.color.background}`,
+                border: `3px solid ${avatar.data.color.border}`,
+              }}
+            >
+              <div
+                style={{
+                  backgroundImage: `url(${avatar.data.image})`,
+                }}
+              >
+                &nbsp;
+              </div>
+            </div>
+          ))}
+        </div>
+        <strong>{card.data.description}</strong>
+        <ParseMarkdownAndHtml markdown={true}>
+          {card.content}
+        </ParseMarkdownAndHtml>
+      </div>
+    </div>
+  </div>
+);
+
+export default ProjectCard;