diff --git a/quicknotes.md b/quicknotes.md
new file mode 100644
index 0000000..6f65d9b
--- /dev/null
+++ b/quicknotes.md
@@ -0,0 +1,8 @@
+
+projectArticleContainer
+=> projectTypeSelectionContainer
+==> projectTypeSelected et al.
+
+=> projectInformationContainer
+==> projectNumberSelectionContainer
+===> projectNumberSelector
\ No newline at end of file
diff --git a/src/components/Projects.jsx b/src/components/Projects.jsx
index b4f1aee..f20c3a7 100644
--- a/src/components/Projects.jsx
+++ b/src/components/Projects.jsx
@@ -16,13 +16,11 @@ function Projects() {
   }
 
   return (
-    <article id="projects" className="projectsContainer">
-      <section className="projectsTitlesContainer">
-        <div className="projectSelectionButtonsContainer">
-          <div className={typeProject === "web" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("web")}}>Web Dev</div>
-          <div className={typeProject === "cpp" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("cpp")}}>C++</div>
-          <div className={typeProject === "mod" ? "projectSelectionButtons projectSelectedButton" : "projectSelectionButtons projectNotSelectedButton"} onClick={() => { handleClicks("mod")}}>Game Mods</div>
-        </div>
+    <article id="projects" className="projectArticleContainer">
+      <section className="projectTypeSelectionContainer">
+          <div className={typeProject === "web" ? "projectTypeSelection projectTypeSelected projectSelectedOne" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("web")}}>Web Dev</div>
+          <div className={typeProject === "cpp" ? "projectTypeSelection projectTypeSelected projectSelectedTwo" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("cpp")}}>C++</div>
+          <div className={typeProject === "mod" ? "projectTypeSelection projectTypeSelected projectSelectedThree" : "projectTypeSelection projectNotSelected"} onClick={() => { handleClicks("mod")}}>Game Mods</div>
       </section>
       {typeProject === "web" && <WebProjects />}
       {typeProject === "cpp" && <CppProjects />}
diff --git a/src/components/WebProjects.jsx b/src/components/WebProjects.jsx
index 8185060..9b539e0 100644
--- a/src/components/WebProjects.jsx
+++ b/src/components/WebProjects.jsx
@@ -11,29 +11,27 @@ function WebProjects() {
   }
 
   return (
-    <section id="webprojects" className="subProjectsContainer">
-      <div className="projectItemsContainer">
-        <div  className="projectButtonsContainer">
-        {webProjects.map((item, index) => {
-          return (
-                <button key={`${index}tab`} type="button" onClick={() => { handleProjectTabs(index)}}>{index+1}</button>
-          );
-        })}
-        </div>
-        {webProjects.map((item, index) => {
-          return(
-            <div key={item.Name}>
-            {projectNumber === index && <div className="projectIndividualItemContainer">
-              <h3>{item.Name}</h3>
-              <p>{item.Details}</p>
-              <p>{item.Features}</p>
-              <p>{item.Technologies}</p>
-              <p>{item.GitHub}</p>
-              <p>{item.Hosted}</p>
-            </div>}
-          </div>);
+    <section id="webprojects" className="projectInformationContainer">
+      <div  className="projectNumberSelectionContainer">
+      {webProjects.map((item, index) => {
+        return (
+              <div key={`${index}tab`} className="projectNumberSelector" onClick={() => { handleProjectTabs(index)}}>{index+1}</div>
+        );
       })}
       </div>
+      {webProjects.map((item, index) => {
+        return(
+          <div key={item.Name}>
+          {projectNumber === index && <div className="projectIndividualItemContainer">
+            <h3>{item.Name}</h3>
+            <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/styles/projects.css b/src/styles/projects.css
index 7603861..5c342e5 100644
--- a/src/styles/projects.css
+++ b/src/styles/projects.css
@@ -1,26 +1,115 @@
-.projectsContainer {
+.projectArticleContainer {
   min-height: 100vh;
   width: 100%;
   padding: 3.5rem 2rem;
   color: white;
 }
 
-.subProjectsContainer {
+.projectTypeSelectionContainer {
+  text-align: center; 
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 3rem;
+  position: relative;
+}
+
+.projectTypeSelection {
+  color: white;
+  padding: 1.5rem;
+  font-weight: bolder;
+  min-width: 10rem;
+}
+
+.projectNotSelected {
+  border-top: 3px white solid;
+  border-left: 3px white solid;
+  border-right: 3px white solid;
+  border-bottom: 0;
+  z-index: 1;
+}
+
+.projectTypeSelected {
+  position: relative;
+  border-top: 3px white solid;
+  border-bottom: 0;
+}
+
+.projectTypeSelected::after, .projectTypeSelected::before {
+  content: '';
+  height: 100%;
+  border: 3px solid;
+  position: absolute;
+  bottom: -3px;
+  border-top: 0;
+  z-index: 0;
+}
+
+.projectSelectedOne::after {
+  min-width: calc(43vw + 13rem);
+  border-image: linear-gradient(to left,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 40%) 3;
+}
+
+.projectSelectedOne::before {
+  min-width: calc(43vw - 13rem);
+  border-image: linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 70%) 3;
+}
+
+.projectSelectedTwo::after {
+  min-width: 43vw;
+  border-image: linear-gradient(to left,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 40%) 3;
+}
+
+.projectSelectedTwo::before {
+  min-width: 43vw;
+  border-image: linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 40%) 3;
+}
+
+.projectSelectedThree::after {
+  min-width: calc(43vw - 13rem);;
+  border-image: linear-gradient(to left,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 70%) 3;
+}
+
+.projectSelectedThree::before {
+  min-width: calc(43vw + 13rem);
+  border-image: linear-gradient(to right,rgba(255,255,255,0) 5%,rgba(255,255,255,1) 40%) 3;
+}
+
+.projectTypeSelected::before {
+  border-left: 0;
+  right: calc(10rem - 3px);
+}
+
+.projectTypeSelected::after {
+  border-right: 0;
+  left: calc(10rem - 3px);
+}
+
+.projectInformationContainer {
   display: flex;
   flex-direction: column;
   width: 100%;
   box-sizing: content-box;
-  border: 5px white solid;
-  border-top: 0;
-  border-radius: 5px;
   position: relative;
   z-index: 0;
 }
 
-.projectItemsContainer {
-  padding: 1rem;
-  max-width: 100vw;
-  overflow: hidden
+.projectNumberSelectionContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 3rem;
+  position: relative;
+}
+
+.projectNumberSelector {
+  font-size: 1.2rem;
+  font-weight: bold;
+  padding: 0.5rem;
+  margin: 0.5rem;
+  border: 3px solid white;
 }
 
 .projectIndividualItemContainer {
@@ -29,77 +118,16 @@
   padding: 2rem;
   min-width: calc(100vw - 10rem);
   min-height: calc(100vh - 20rem);
-  border: 5px white solid;
-  border-radius: 5px;
 }
 
-.projectsTitlesContainer {
-  text-align: center; 
-  padding: 0;
-  margin: 0;
-}
+
+
 
 .projectButtonsContainer {
   display: flex;
   flex-direction: row;
-}
-
-.projectSelectionButtonsContainer {
-  display: flex;
-  flex-direction: row;
   justify-content: center;
-  gap: 3rem;
-  position: relative;
+  gap: 1rem;
 }
 
-.projectSelectionButtons {
-  color: white;
-  padding: 1.5rem;
-  font-weight: bolder;
-  min-width: 10rem;
-}
 
-.projectNotSelectedButton {
-  border-top: 3px white solid;
-  border-left: 3px white solid;
-  border-right: 3px white solid;
-  border-top-left-radius: 15%;
-  border-top-right-radius: 15%;
-  border-bottom: 0;
-  z-index: 1;
-}
-
-.projectSelectedButton {
-  position: relative;
-  border-top: 3px white solid;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
-  border-bottom: 0;
-}
-
-.projectSelectedButton::after, .projectSelectedButton::before {
-  content: '';
-  min-width: 75vw;
-  height: 100%;
-  border: 3px solid white;
-  position: absolute;
-  bottom: -3px;
-  border-top: 0;
-  z-index: 0;
-}
-
-.projectSelectedButton::before {
-  border-left: 0;
-  -moz-border-radius: 0 0 5px 0;
-  -webkit-border-radius: 0 0 5px 0;
-  border-radius: 0 0 5px 0;
-  right: calc(10rem - 3px);
-}
-
-.projectSelectedButton::after {
-  border-right: 0;
-  -moz-border-radius: 0 0 0 5px;
-  -webkit-border-radius: 0 0 0 5px;
-  border-radius: 0 0 0 5px;
-  left: calc(10rem - 3px);
-}