diff --git a/index.html b/index.html
index 8d74c64..9c881f4 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="description" content="Full Stack Developer focused on React, Next and Express framerworks"/>
+    <meta name="description" content="Full Stack Developer focused on React, Next and Express frameworks"/>
     <title>Paul Hughes - Full Stack Developer</title>
     <link rel="canonical" href="https://paulus.casa">
     <link rel="icon" type="image/png" href="/favicon.png" />
diff --git a/src/App.css b/src/App.css
index 8e01719..7d398b1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -10,8 +10,15 @@ html {
 
 body {
   height: 100vh;
+  max-width: 100vw;
+  overflow-y: scroll;
+}
+
+a:-webkit-any-link {
+  color: white;
 }
 
 #root {
   height: 100%;
+  width: 100%;
 }
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index a72499a..b17d61c 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -19,8 +19,7 @@ function Projects() {
     <article id="projects" className="projectsContainer">
       <section className="projectsTitlesContainer">
         <h2>Projects</h2>
-        <p>Some paragraph</p>
-        <div className="projectSelectionButtons">
+        <div className="projectSelectionButtonsContainer">
           <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>
diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx
index 0d3af36..ece101f 100644
--- a/src/components/WebProjects.jsx
+++ b/src/components/WebProjects.jsx
@@ -6,12 +6,11 @@ import { webProjects } from "@/data/webdata.js";
 function WebProjects() {
   return (
     <section id="webprojects" className="subProjectsContainer">
-    <h3>This is Web projects area title</h3>
     <div className="projectItemsContainer">
     {webProjects.map((item) => {
       return (
         <div key={item.Name} className="projectIndividualItemContainer">
-          <h4>{item.Name}</h4>
+          <h3>{item.Name}</h3>
           <p>{item.Details}</p>
           <p>{item.Features}</p>
           <p>{item.Technologies}</p>
diff --git a/src/styles/content.css b/src/styles/content.css
index d47a8ef..3237dfd 100644
--- a/src/styles/content.css
+++ b/src/styles/content.css
@@ -2,5 +2,6 @@
   display: flex;
   flex-direction: column;
   background: linear-gradient(109.6deg, rgb(10, 20, 20) 11.2%, rgb(11, 132, 145) 91.1%);
+  width: 100%;
   min-height: 100%;
 }
diff --git a/src/styles/details.css b/src/styles/details.css
index f5c2fba..972c700 100644
--- a/src/styles/details.css
+++ b/src/styles/details.css
@@ -18,7 +18,6 @@
   height: 5rem;
   display: flex;
   justify-content: center;
-  align-items: center:
 }
 
 .detailsTitle {
@@ -37,6 +36,7 @@
 }
 
 .detailsInfoLinks {
+  color: white;
   padding: 0.25rem;
   font-size: 1.5rem;
   text-decoration: none;
diff --git a/src/styles/projects.css b/src/styles/projects.css
index e581e6f..b712444 100644
--- a/src/styles/projects.css
+++ b/src/styles/projects.css
@@ -1,49 +1,47 @@
 .projectsContainer {
   min-height: 100vh;
+  width: 100%;
   padding: 3rem;
+  color: white;
 }
 
 .subProjectsContainer {
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .projectItemsContainer {
   display: flex;
   flex-direction: row;
+  position: relative;
   padding: 1rem;
-  gap: 1rem;
   margin: 1rem;
-  border: 4px black;
-  border-style: double;
+  max-width: 100vw;
   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;
+  position: relative;
+  scrollbar-color: white black;
+  scrollbar-width: thin;
+  -ms-overflow-style: none;
 }
 
 .projectIndividualItemContainer {
   display: flex;
   flex-direction: column;
-  width: 100%;
+  padding: 2rem;
+  min-width: calc(100vw - 10rem);
+  min-height: calc(100vh - 20rem);
 }
 
 .projectsTitlesContainer {
-
-}
-.projectSelectionButtons {
-
+  text-align: center; 
+}
+
+.projectSelectionButtonsContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 0.5rem;
+  gap: 1rem;
 }
 
