diff --git a/public/projectimgs/wordle.webp b/public/projectimgs/wordle.webp
new file mode 100644
index 0000000..2208515
Binary files /dev/null and b/public/projectimgs/wordle.webp differ
diff --git a/src/App.jsx b/src/App.jsx
index babd99b..d7634c3 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,14 +3,17 @@ import "./App.css";
 import Header from "@/components/Header.jsx";
 import Footer from "@/components/Footer.jsx";
 import Content from "@/components/Content.jsx";
+import ProjectContextProvider from "@/context/projectcontext";
 
 function App() {
 
   return (
     <>
-    <Header />
-    <Content />
-    <Footer />
+    <ProjectContextProvider>
+      <Header />
+      <Content />
+      <Footer />
+    </ProjectContextProvider>
     </>
   )
 }
diff --git a/src/components/CppProjects.jsx b/src/components/CppProjects.jsx
new file mode 100644
index 0000000..1f17804
--- /dev/null
+++ b/src/components/CppProjects.jsx
@@ -0,0 +1,16 @@
+/* ----- Project Imports ----- */
+import "@/styles/projects.css";
+import * as Cppdata from "@/data/cppdata.js";
+
+
+
+function CppProjects() {
+  return (
+    <section id="cpp-projects" className="cpp-projectsContainer">
+    <h2>This is projects area title</h2>
+    <p>This be some projects</p>
+    </section>
+  );
+};
+
+export default CppProjects;
\ No newline at end of file
diff --git a/src/components/Details.jsx b/src/components/Details.jsx
index 17e7a13..88bef1c 100644
--- a/src/components/Details.jsx
+++ b/src/components/Details.jsx
@@ -6,7 +6,8 @@ function Details() {
   return (
     <article className="detailsContainer">
       <section className="detailsSocialLinksContainer">
-        <a href="https://github.com/II-Paulus-II" target="_blank" ><img className="detailsSocialLinksImg" src="/github.webp" alt="github" /></a>
+
+        <a href="https://www.linkedin.com/in/paul-andrew-hughes/" target="_blank" ><img className="detailsSocialLinksImg" src="/linkedin.webp" alt="linkedin" /></a>
       </section>
       <section className="detailsTextContainer">
         <div className="detailsTextInnerContainer"><h2 className="detailsTitle">Paul Hughes</h2></div>
@@ -17,7 +18,8 @@ function Details() {
         </div>
       </section>
       <section className="detailsSocialLinksContainer">
-        <a href="https://www.linkedin.com/in/paul-andrew-hughes/" target="_blank" ><img className="detailsSocialLinksImg" src="/linkedin.webp" alt="linkedin" /></a>
+
+        <a href="https://github.com/II-Paulus-II" target="_blank" ><img className="detailsSocialLinksImg" src="/github.webp" alt="github" /></a>
       </section>
     </article>
   );
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index 3ea49f7..9ad7761 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -1,12 +1,17 @@
 /* ----- Project Imports ----- */
 import "@/styles/projects.css";
+import "@/components/WebProjects";
+import "@/components/CppProjects";
+import WebProjects from "./WebProjects";
+import CppProjects from "./CppProjects";
 
 
 function Projects() {
   return (
-    <article className="projectsContainer">
-    <h2 id="projects">This is projects area title</h2>
-    <p>This be some projects</p>
+    <article id="projects" className="projectsContainer">
+      
+      <WebProjects />
+      <CppProjects />
     </article>
   );
 };
diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx
new file mode 100644
index 0000000..6e726d1
--- /dev/null
+++ b/src/components/WebProjects.jsx
@@ -0,0 +1,16 @@
+/* ----- Project Imports ----- */
+import "@/styles/projects.css";
+import * as Webdata from "@/data/webdata.js";
+
+
+
+function WebProjects() {
+  return (
+    <section id="webprojects" className="webprojectsContainer">
+    <h2>This is projects area title</h2>
+    <p>This be some projects</p>
+    </section>
+  );
+};
+
+export default WebProjects;
\ No newline at end of file
diff --git a/src/context/projectcontext.jsx b/src/context/projectcontext.jsx
new file mode 100644
index 0000000..8f747bf
--- /dev/null
+++ b/src/context/projectcontext.jsx
@@ -0,0 +1,19 @@
+/* ----- Third Party Imports ----- */
+import { createContext, useState, useContext } from "react";
+
+/* ----- Project Imports ----- */
+
+const ProjectContext = createContext();
+
+export default function ProjectContextProvider({ children }) {
+
+  return (
+    <ProjectContext.Provider value = {{}}>
+    {children}
+    </ProjectContext.Provider>
+  );
+}
+
+export function useProjectContext() {
+  return useContext(ProjectContext);
+}
\ No newline at end of file
diff --git a/src/data/webdata.js b/src/data/webdata.js
index 84a1af8..b060efd 100644
--- a/src/data/webdata.js
+++ b/src/data/webdata.js
@@ -8,17 +8,12 @@ const BLANKTEMPLATE = {
 
 export const webProjects = [
   {
-    Name: "",
-    Details: "",
-    Technologies: "",
-    GitHub: "",
-    Hosted: "",
-  },
-  {
-    Name: "",
-    Details: "",
-    Technologies: "",
-    GitHub: "",
-    Hosted: "",
+    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.",
+    Technologies: "Next JS, React JS, PostgresQL, Clerk Auth",
+    GitHub: "https://github.com/WordleTeamLegends/wordle",
+    Hosted: "https://wordle.paulus.casa",
   },
 ];