diff --git a/components/ProjectsList.js b/components/ProjectsList.js
new file mode 100644
index 0000000..bb14b0e
--- /dev/null
+++ b/components/ProjectsList.js
@@ -0,0 +1,46 @@
+import Link from "next/link";
+import projects from "../db/projects";
+import styles from "./ProjectsList.module.css";
+
+export default function ProjectsList() {
+  const mediaProjects = projects.filter((project) => {
+    return project.categories.includes("Media");
+  });
+  const designProjects = projects.filter((project) => {
+    return project.categories.includes("Media");
+  });
+
+  return (
+    <div>
+      <section>
+        <h2>Media</h2>
+        <div className={styles.list}>
+          {mediaProjects.map((project) => (
+            <div key={project.name} className={styles.listItem}>
+              <h2 className={styles.name}>{project.name}</h2>
+              <p className={styles.description}>{project.description}</p>
+              <div>
+                <Link href={`/projects/${project.slug}`}>View</Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+
+      <section>
+        <h2>Design</h2>
+        <div className={styles.list}>
+          {designProjects.map((project) => (
+            <div key={project.name} className={styles.listItem}>
+              <h2 className={styles.name}>{project.name}</h2>
+              <p className={styles.description}>{project.description}</p>
+              <div>
+                <Link href={`/projects/${project.slug}`}>View</Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
diff --git a/pages/projects.module.css b/components/ProjectsList.module.css
similarity index 100%
rename from pages/projects.module.css
rename to components/ProjectsList.module.css
diff --git a/db/projects.js b/db/projects.js
index 1b4be3b..257e608 100644
--- a/db/projects.js
+++ b/db/projects.js
@@ -1,13 +1,21 @@
 const projects = [
   {
-    slug: "farmers-market",
-    name: "Farmer's market",
-    description: "Buy some fruits and vegetables",
+    slug: "glass-slide-digitization",
+    name: "Glass Slide Digitization",
+    description: "Digitized some glass slides",
+    categories: ["Media", "Design"],
   },
   {
-    slug: "chess",
-    name: "Chess",
-    description: "Play chess online",
+    slug: "35mm-slide-digitization",
+    name: "35mm Slide Digitization",
+    description: "Digitized some 35mm slides",
+    categories: ["Media"],
+  },
+  {
+    slug: "neighborhood-organization-logo",
+    name: "Neighborhood Organization Logo",
+    description: "Design logo for Neighborhood Organization",
+    categories: ["Design"],
   },
 ];
 
diff --git a/pages/index.js b/pages/index.js
index 8387fc1..47f5b6f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,6 +1,7 @@
 import Head from "next/head";
 import Navigation from "@components/Navigation";
 import Footer from "@components/Footer";
+import ProjectsList from "@components/ProjectsList";
 
 export default function Home() {
   return (
@@ -16,6 +17,8 @@ export default function Home() {
         <h1 className="main-title">Welcome to my portfolio</h1>
 
         <p className="main-description">This is the home page</p>
+
+        <ProjectsList />
       </main>
 
       <Footer />
diff --git a/pages/projects.js b/pages/projects.js
index b6bd3ba..dfc30f2 100644
--- a/pages/projects.js
+++ b/pages/projects.js
@@ -1,9 +1,7 @@
 import Head from "next/head";
-import Link from "next/link";
 import Navigation from "@components/Navigation";
 import Footer from "@components/Footer";
-import projects from "../db/projects";
-import projectStyles from "./projects.module.css";
+import ProjectsList from "@components/ProjectsList";
 
 export default function Projects() {
   return (
@@ -20,21 +18,7 @@ export default function Projects() {
 
         <p className="main-description">This is the projects page</p>
 
-        <div>
-          <section className={projectStyles.list}>
-            {projects.map((project) => (
-              <div key={project.name} className={projectStyles.listItem}>
-                <h2 className={projectStyles.name}>{project.name}</h2>
-                <p className={projectStyles.description}>
-                  {project.description}
-                </p>
-                <div>
-                  <Link href={`/projects/${project.slug}`}>View</Link>
-                </div>
-              </div>
-            ))}
-          </section>
-        </div>
+        <ProjectsList />
       </main>
 
       <Footer />