diff --git a/components/Icons/RightArrowIcon.tsx b/components/Icons/RightArrowIcon.tsx
new file mode 100644
index 0000000..1c8ce9f
--- /dev/null
+++ b/components/Icons/RightArrowIcon.tsx
@@ -0,0 +1,26 @@
+import React from "react";
+
+type RightArrowIconProps = {
+  className?: string;
+};
+
+function RightArrowIcon({ className }: RightArrowIconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      fill="none"
+      stroke="#FFF"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className={className}
+      viewBox="0 0 24 24"
+    >
+      <path d="M5 12h14m-7-7l7 7-7 7"></path>
+    </svg>
+  );
+}
+
+export default RightArrowIcon;
diff --git a/components/ProjectCard/ProjectCard.module.css b/components/ProjectCard/ProjectCard.module.css
new file mode 100644
index 0000000..6151912
--- /dev/null
+++ b/components/ProjectCard/ProjectCard.module.css
@@ -0,0 +1,32 @@
+.projectCard {
+  display: flex;
+  align-items: center;
+  background-color: var(--fg-colour);
+  color: var(--light-text);
+  padding: 40px;
+  border-radius: 25px;
+}
+
+.projectCard h2 {
+  font-size: 30px;
+}
+
+.projectCard p {
+  margin: 20px 0 20px 0;
+  font-size: 20px;
+}
+
+.projectCard a {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+}
+
+.projectCard a .icon {
+  margin-left: 5px;
+}
+
+.projectCard img {
+  margin-left: 10px;
+  transform: rotate(7.24deg);
+}
diff --git a/components/ProjectCard/ProjectCard.tsx b/components/ProjectCard/ProjectCard.tsx
new file mode 100644
index 0000000..1b08fd1
--- /dev/null
+++ b/components/ProjectCard/ProjectCard.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import RightArrowIcon from "../Icons/RightArrowIcon";
+import styles from "./ProjectCard.module.css";
+
+type ProjectCardProps = {
+  header: string;
+  desc: string;
+  link: string;
+  image?: string;
+  imageAlt?: string;
+};
+
+function ProjectCard({ header, desc, link, image, imageAlt }: ProjectCardProps) {
+  return (
+    <div className={styles.projectCard}>
+      <div>
+        <h2>{header}</h2>
+        <p>{desc}</p>
+        <a href={link}>
+          View Code <RightArrowIcon className={styles.icon} />
+        </a>
+      </div>
+      {image ? <img src={image} alt={imageAlt} width="288" height="88"></img> : null}
+    </div>
+  );
+}
+
+export default ProjectCard;