diff --git a/src/components/pages/Front.page.jsx b/src/components/pages/Front.page.jsx
index ef50234..8327220 100644
--- a/src/components/pages/Front.page.jsx
+++ b/src/components/pages/Front.page.jsx
@@ -13,6 +13,7 @@ import Cdiv from "../core/Cdiv";
 import FadeComponent from "../core/FadeComponent";
 import Introduction from "../sections/Introduction";
 import Experience from "../sections/Experience";
+import Projects from '../sections/Projects';
 
 //============================================================
 // Component
@@ -73,9 +74,8 @@ const FrontPage = () => {
         </FadeComponent>
         <FadeComponent delay={DELAY * 2.5}>
           <Introduction />
-        </FadeComponent>
-        <FadeComponent delay={DELAY * 2.5}>
           <Experience />
+          <Projects />
         </FadeComponent>
       </div>
     </>
diff --git a/src/components/sections/ProjectCard.jsx b/src/components/sections/ProjectCard.jsx
new file mode 100644
index 0000000..f9dd56b
--- /dev/null
+++ b/src/components/sections/ProjectCard.jsx
@@ -0,0 +1,11 @@
+import React from "react";
+
+const ProjectCard = ({ title, description }) => {
+  return (
+    <div className="w-full rounded-lg flex flex-col bg-polar-night-400 px-2 py-2 shadow-md">
+      <h2 className="text-2xl text-snow-storm-100">{title}</h2>
+      <p className="text-md text-snow-storm-100">{description}</p>
+    </div>
+  );
+};
+export default ProjectCard;
diff --git a/src/components/sections/Projects.jsx b/src/components/sections/Projects.jsx
new file mode 100644
index 0000000..f25eddb
--- /dev/null
+++ b/src/components/sections/Projects.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import ProjectCard from './ProjectCard';
+
+const Projects = () => {
+  return (
+    <div className="w-full flex flex-col justify-center items-center bg-frost-200 py-12">
+      <div className="w-full flex flex-col p-4 max-w-screen-2xl gap-4">
+        <h1 className="w-full text-7xl text-center font-display font-bold text-polar-night-400">
+          Projects
+        </h1>
+        <div className="w-full grid grid-cols-3 gap-4">
+          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+          <ProjectCard title="Hello World" description="Hello World again lol" /> 
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Projects;