diff --git a/src/App.jsx b/src/App.jsx
index 9bf83f6..a0028d6 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -5,6 +5,7 @@ import Footer from "@/components/Footer.jsx";
 import Content from "@/components/Content.jsx";
 import ProjectContextProvider from "@/context/ProjectContext";
 
+
 function App() {
 
   return (
diff --git a/src/components/ModProjects.jsx b/src/components/ModProjects.jsx
new file mode 100644
index 0000000..b19202e
--- /dev/null
+++ b/src/components/ModProjects.jsx
@@ -0,0 +1,15 @@
+/* ----- Project Imports ----- */
+import "@/styles/projects.css";
+import * as Modsdata from "@/data/modsdata.js";
+
+
+function ModProjects() {
+  return (
+    <section id="modprojects" className="subprojectsContainer">
+    <h3>This is Mod projects area title</h3>
+    <p>This be some Mod projects</p>
+    </section>
+  );
+};
+
+export default ModProjects;
\ No newline at end of file
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index 34d217c..a72499a 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -2,17 +2,33 @@
 import "@/styles/projects.css";
 import "@/components/WebProjects";
 import "@/components/CppProjects";
-import WebProjects from "./WebProjects";
-import CppProjects from "./CppProjects";
+import WebProjects from "@/components/WebProjects";
+import CppProjects from "@/components/CppProjects";
+import ModProjects from "@/components/ModProjects";
 import { useProjectContext } from "@/context/ProjectContext";
 
 
 function Projects() {
   const { typeProject, setTypeProject } = useProjectContext();
+
+  function handleClicks(arg) {
+    setTypeProject(arg);
+  }
+
   return (
     <article id="projects" className="projectsContainer">
+      <section className="projectsTitlesContainer">
+        <h2>Projects</h2>
+        <p>Some paragraph</p>
+        <div className="projectSelectionButtons">
+          <button type="button" onClick={() => { handleClicks("web")}}>Web Dev</button>
+          <button type="button" onClick={() => { handleClicks("cpp")}}>C++</button>
+          <button type="button" onClick={() => { handleClicks("mod")}}>Game Mods</button>
+        </div>
+      </section>
       {typeProject === "web" && <WebProjects />}
       {typeProject === "cpp" && <CppProjects />}
+      {typeProject === "mod" && <ModProjects />}
     </article>
   );
 };
diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx
index a0a9419..0d3af36 100644
--- a/src/components/WebProjects.jsx
+++ b/src/components/WebProjects.jsx
@@ -1,13 +1,26 @@
 /* ----- Project Imports ----- */
 import "@/styles/projects.css";
-import * as Webdata from "@/data/webdata.js";
+import { webProjects } from "@/data/webdata.js";
 
 
 function WebProjects() {
   return (
-    <section id="webprojects" className="webprojectsContainer">
+    <section id="webprojects" className="subProjectsContainer">
     <h3>This is Web projects area title</h3>
-    <p>This be some web projects</p>
+    <div className="projectItemsContainer">
+    {webProjects.map((item) => {
+      return (
+        <div key={item.Name} className="projectIndividualItemContainer">
+          <h4>{item.Name}</h4>
+          <p>{item.Details}</p>
+          <p>{item.Features}</p>
+          <p>{item.Technologies}</p>
+          <p>{item.GitHub}</p>
+          <p>{item.Hosted}</p>
+        </div>
+      );
+    })}
+    </div>
     </section>
   );
 };
diff --git a/src/data/webdata.js b/src/data/webdata.js
index b060efd..e53e996 100644
--- a/src/data/webdata.js
+++ b/src/data/webdata.js
@@ -11,9 +11,27 @@ export const webProjects = [
     Name: "Wordle Clone",
     Image: "/projectimgs/wordle.webp",
     Details: "As a final group project during the software development bootcamp, our group decided to work on a wordle clone using the latest version of Next JS - APP router.",
-    Features: "There are a few minor differences between our clone and the real one. First after validation of guesses, the letters that are not in the solution word are not allowed to be used again. Hence, we do not have to add the guess words to an array to prevent entering the same guess again. Further, in our version one can play as many times as they like as a new random word will be chosen each time to be the solution. Lastly, all games are recorded in the database so we decided to make signing in with clerk a necessity to play which also means that if you come back later that day you will be where you left off.",
+    Features: "There are a few minor differences between our clone and the real one. After validation of guesses, the letters that are not in the solution word are not allowed to be used again. Hence, we do not have to add the guess words to an array to prevent entering the same guess again. Further, in our version one can play as many times as they like as a new random word will be chosen each time to be the solution, rather than there being a 'word of the day'. Lastly, all games are recorded in the database so we decided to make signing in with clerk a necessity to play. If you come back later that day you will be where you left off.",
     Technologies: "Next JS, React JS, PostgresQL, Clerk Auth",
     GitHub: "https://github.com/WordleTeamLegends/wordle",
     Hosted: "https://wordle.paulus.casa",
   },
+  {
+    Name: "REACT Clicker Heroes - Hacker Version",
+    Image: "/projectimgs/wordle.webp",
+    Details: "Remaking the week 2 project with react",
+    Features: "Click to hack",
+    Technologies: "React JS",
+    GitHub: "https://github.com/II-Paulus-II/project-week6",
+    Hosted: "https://paulus-project-week2.vercel.app/",
+  },
+  {
+    Name: "Clicker Heroes - Hacker Version",
+    Image: "/projectimgs/wordle.webp",
+    Details: "As an introduction to Vanilla Javascript I made my own version of a cookie clicker or clicker heroes game",
+    Features: "Click to hack",
+    Technologies: "Javascript, html, css",
+    GitHub: "https://github.com/II-Paulus-II/project-week2",
+    Hosted: "https://paulus-project-week2.vercel.app/",
+  },
 ];
diff --git a/src/styles/projects.css b/src/styles/projects.css
index 657b45d..e581e6f 100644
--- a/src/styles/projects.css
+++ b/src/styles/projects.css
@@ -2,3 +2,48 @@
   min-height: 100vh;
   padding: 3rem;
 }
+
+.subProjectsContainer {
+  display: flex;
+  flex-direction: column;
+}
+
+.projectItemsContainer {
+  display: flex;
+  flex-direction: row;
+  padding: 1rem;
+  gap: 1rem;
+  margin: 1rem;
+  border: 4px black;
+  border-style: double;
+  overflow-x: scroll;
+  scrollbar-width: auto;      
+  scrollbar-color: blue black;
+}
+
+.projectItemsContainer::-webkit-scrollbar {
+  height: 5px;
+}
+
+.projectItemsContainer::-webkit-scrollbar-track {
+  background: rgba(144, 238, 144, 0.164);
+}
+
+.projectItemsContainer::-webkit-scrollbar-thumb {
+  background-color: black;
+  outline: 1px solid blue;
+}
+
+.projectIndividualItemContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.projectsTitlesContainer {
+
+}
+.projectSelectionButtons {
+
+}
+