diff --git a/assets/the-button.png b/assets/the-button.png
new file mode 100644
index 0000000..51d934a
Binary files /dev/null and b/assets/the-button.png differ
diff --git a/index.html b/index.html
index f9df73a..81dca2e 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
         <p id="logo">[Notoric]</p>
         <div id="nav">
             <a href="#aboutme">About</a>
-            <a href="https://the-button.notoric.net">Projects</a>
+            <a href="#projects">Projects</a>
             <a href="contact.html">Contact</a>
         </div>
         <div id="links">
@@ -42,6 +42,21 @@
                 <p>I am a <em id=age>22</em> year old Computer Science graduate from De Montfort University. For as long as I can remember, I have had a desire to tinker and solve logical problems. As a child, I found myself playing with circuit kits and components all the time. I loved creating a circuit as the instructions told me, and then modifying it to add features or change how it worked. When I got my first laptop I was extatic. I began hosting game servers for my friends, tinkering around in the settings and troubleshooting crashes or installing mods. I wrote my first script in python at the age of 12 and have never looked back since.</p>
             </div>
         </div>
+        <div id="projects">
+            <h1>Projects</h1>
+            <div class="project card">
+                <div class="text-content">
+                    <h2>The Button</h2>
+                    <div class="project-tags">
+                        <p class="HTML">HTML</p>
+                        <p class="CSS">CSS</p>
+                        <p class="JS">JS</p>
+                    </div>
+                    <p class="project-description">The Button is a game created by Elendow on Steam. I have recreated this game in a single day using a basic web development stack. The user is presented with a button which contains a number. When the user clicks the button, the button with either reset back to zero or increase it's counter by one. The counter also represents the percantage chance of the button resetting to zero on the next press.</p>
+                </div>
+                <a href="https://the-button.notoric.net" target="_blank"><img src="/assets/the-button.png"></a>
+            </div>
+        </div>
     </main>
     <script src="/scripts/homepage.js"></script>
 </body>
diff --git a/styles/global.css b/styles/global.css
index 9c42f12..5c24617 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -9,7 +9,7 @@ body {
     background-color: #111;
     color: #eee;
     margin: 0;
-    font-family: "Fira Mono", monospace;
+    font-family: "Barlow", sans-serif;
     font-weight: 400;
     font-style: normal;
     font-size: 16px;
@@ -176,6 +176,7 @@ em {
 }
 
 #homepage .card {
+    font-family: "Fira Mono", monospace;
     flex-direction: row;
     padding-block: 80px;
     gap: 70px;
@@ -290,7 +291,7 @@ em {
     margin: auto;
     position: relative;
     font-family: "Barlow", sans-serif;
-    font-size: 18px;
+    margin-bottom: 100px;
 }
 
 #aboutme h1 {
@@ -302,6 +303,10 @@ em {
     z-index: 2;
 }
 
+#aboutme p {
+    font-size: 18px;
+}
+
 #box-with-title p {
     position: relative;
     z-index: 2;
@@ -311,6 +316,89 @@ em {
     font-family: "Fira Mono", monospace;
 }
 
+#projects {
+    margin: auto;
+    width: fit-content;
+}
+
+#projects h1 {
+    padding-left: 75px;
+}
+
+.project {
+    display: flex;
+    flex-direction: row;
+    padding: 2em;
+    width: fit-content;
+    margin: auto;
+    gap: 20px;
+    align-content: center;
+    justify-content: center;
+}
+
+.project:nth-child(odd) {
+    flex-direction: row-reverse;
+}
+
+.project .text-content {
+    display: flex;
+    flex-direction: column;
+    align-self: start;
+}
+
+.project h2 {
+    margin-bottom: 0;
+}
+
+.project img {
+    width: 400px;
+    height: 300px;
+    border-radius: 3em;
+    border: 0.2em solid #222;
+    cursor: pointer;
+}
+
+.project-tags {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+    margin: 0;
+    padding-block: 10px;
+    font-family: "Fira Mono", monospace;
+    font-weight: 500;
+}
+
+.HTML {
+    background-color: #E34F26 !important;
+}
+
+.CSS {
+    background-color: #1572B6 !important;
+}
+
+.JS {
+    background-color: #F7DF1E !important;
+    color: #000;
+    text-shadow: #eee 0px 0px 2px !important;
+}
+
+.project-tags p {
+    margin: 0;
+    font-size: 0.8em;
+    width: 40px;
+    border-radius: 1em;
+    background-color: #222;
+    padding: 0.2em;
+    text-align: center;
+    text-shadow: #111 0px 0px 2px;
+}
+
+.project-description {
+    max-width: 400px;
+    font-size: 1.1em;
+    margin: 0;
+}
+
 @media screen and (max-width: 1100px) {
 
     #logo {
@@ -428,6 +516,10 @@ em {
     #name {
         font-size: 3em;
     }
+
+    .project {
+        flex-direction: column;
+    }
 }
 
 @media (pointer: fine) and (hover: hover) and (max-width: 1100px) {