diff --git a/components/ProjectsList.js b/components/ProjectsList.js
new file mode 100644
index 0000000..ca323f1
--- /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.category === "Media";
+  });
+  const designProjects = projects.filter((project) => {
+    return project.category === "Design";
+  });
+
+  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..3e2b68e 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",
+    category: "Media",
   },
   {
-    slug: "chess",
-    name: "Chess",
-    description: "Play chess online",
+    slug: "35mm-slide-digitization",
+    name: "35mm Slide Digitization",
+    description: "Digitized some 35mm slides",
+    category: "Media",
+  },
+  {
+    slug: "neighborhood-organization-logo",
+    name: "Neighborhood Organization Logo",
+    description: "Design logo for Neighborhood Organization",
+    category: "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 />
diff --git a/pages/projects/35mm-slide-digitization.js b/pages/projects/35mm-slide-digitization.js
new file mode 100644
index 0000000..b60bb2c
--- /dev/null
+++ b/pages/projects/35mm-slide-digitization.js
@@ -0,0 +1,24 @@
+import Head from "next/head";
+import Navigation from "@components/Navigation";
+import Footer from "@components/Footer";
+
+export default function ThirtyFiveMMSlideDigitization() {
+  return (
+    <div className="container">
+      <Head>
+        <title>35mm Slide Digitization | Projects | My Portfolio</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Navigation />
+
+      <main className="main">
+        <h1 className="main-title">35mm Slide Digitization</h1>
+
+        <p className="main-description">Digitized some 35mm slides!</p>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/pages/projects/[slug].js b/pages/projects/[slug].js
deleted file mode 100644
index 6f58233..0000000
--- a/pages/projects/[slug].js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Head from "next/head";
-import { useRouter } from "next/router";
-import Navigation from "@components/Navigation";
-import Footer from "@components/Footer";
-import projects from "../../db/projects";
-
-export default function Projects() {
-  const router = useRouter();
-  const { slug } = router.query;
-
-  console.log(slug);
-
-  const project = projects.find((project) => {
-    return project.slug === slug;
-  });
-  console.log(project);
-
-  return (
-    <div className="container">
-      <Head>
-        <title>{project.name} | Projects | My Portfolio</title>
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
-
-      <Navigation />
-
-      <main className="main">
-        <h1 className="main-title">{project.name}</h1>
-
-        <p className="main-description">{project.description}</p>
-      </main>
-
-      <Footer />
-    </div>
-  );
-}
diff --git a/pages/projects/glass-slide-digitization.js b/pages/projects/glass-slide-digitization.js
new file mode 100644
index 0000000..4879170
--- /dev/null
+++ b/pages/projects/glass-slide-digitization.js
@@ -0,0 +1,24 @@
+import Head from "next/head";
+import Navigation from "@components/Navigation";
+import Footer from "@components/Footer";
+
+export default function GlassSlideDigitization() {
+  return (
+    <div className="container">
+      <Head>
+        <title>Glass Slide Digitization | Projects | My Portfolio</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Navigation />
+
+      <main className="main">
+        <h1 className="main-title">Glass Slide Digitization</h1>
+
+        <p className="main-description">Digitized some glass slides!</p>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}
diff --git a/pages/projects/neighborhood-organization-logo.js b/pages/projects/neighborhood-organization-logo.js
new file mode 100644
index 0000000..64f5dbd
--- /dev/null
+++ b/pages/projects/neighborhood-organization-logo.js
@@ -0,0 +1,24 @@
+import Head from "next/head";
+import Navigation from "@components/Navigation";
+import Footer from "@components/Footer";
+
+export default function NeighborhoodOrganizationLogo() {
+  return (
+    <div className="container">
+      <Head>
+        <title>NeighborhoodOrganizationLogo | Projects | My Portfolio</title>
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+
+      <Navigation />
+
+      <main className="main">
+        <h1 className="main-title">NeighborhoodOrganizationLogo</h1>
+
+        <p className="main-description">NeighborhoodOrganizationLogo</p>
+      </main>
+
+      <Footer />
+    </div>
+  );
+}