diff --git a/index.css b/index.css
index a05e293..657c27a 100644
--- a/index.css
+++ b/index.css
@@ -34,7 +34,7 @@ header.scrolled {
 }
 
 .logo a {
-    color: white;
+    color: #5865f2;
     text-decoration: none;
     font-size: 32px;
     font-weight: bold;
@@ -69,7 +69,6 @@ nav ul li a:hover {
     color: #6d6d6d;
 }
 
-body.light-mode .logo a,
 body.light-mode nav ul li a {
     color: #222222;
 }
@@ -112,6 +111,7 @@ footer {
     padding: 48px 0px;
     width: 100%;
     border-top: 1px solid #222222;
+    margin-top: 5rem;
 }
 body.light-mode footer {
     background-color: #eeeeee;
@@ -140,20 +140,21 @@ footer a {
     border: none;
     border-radius: 50%;
     text-decoration: none;
+
+    transition: color 0s;
+    transition: transform 0.15s ease;
 }
 footer a:hover {
     background-color: #5865f2;
+    transform: translateY(-3px);
 }
 body.light-mode footer a {
     background-color: rgb(231, 231, 231);
     color: rgb(29, 29, 29);
-    transition: color 0s;
-    transition: transform 0.15s ease;
 }
 body.light-mode footer a:hover {
     color: white;
     background-color: #5865f2;
-    transform: translateY(-3px);
 }
 
 footer p {
@@ -178,10 +179,143 @@ main {
 
 /* Home Section */
 .home-container {
-    height: 100vh;
+    margin-top: 4rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: rgb(216, 216, 216);
+}
+.home-container h1 {
+    font-size: 3.5rem;
+}
+.home-container h2 {
+    margin-top: 0.5rem;
+    font-size: 2rem;
+}
+.home-container p {
+    margin-top: 2.5rem;
+    font-size: 1rem;
+}
+.home-container span {
+    color: #5865f2;
+}
+body.light-mode .home-container h1 {
+    color: #3a3a3a;
+}
+body.light-mode .home-container h2 {
+    color: rgb(43, 43, 43);
+}
+body.light-mode .home-container p {
+    color: rgb(43, 43, 43);
 }
 
-/* Showcase Section */
-.showcase-container {
-    height: 100vh;
+.home-container .links {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 20px;
+
+    margin-top: 2rem;
+    margin-bottom: 24px;
+}
+.home-container a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 48px;
+    height: 48px;
+
+    background-color: rgb(44, 49, 54);
+    color: white;
+    font-size: 20px;
+    border: none;
+    border-radius: 50%;
+    text-decoration: none;
+
+    transition: color 0s;
+    transition: transform 0.15s ease;
+}
+.home-container a:hover {
+    background-color: #5865f2;
+    transform: translateY(-3px);
+}
+body.light-mode .home-container a {
+    background-color: rgb(231, 231, 231);
+    color: rgb(29, 29, 29);
+}
+body.light-mode .home-container a:hover {
+    color: white;
+    background-color: #5865f2;
+}
+
+/* projects Section */
+.projects-container {
+    margin-top: 4rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: rgb(216, 216, 216);
+}
+.projects-container h1 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+}
+.projects {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
+    grid-gap: 2rem;
+}
+.project {
+    padding: 2rem;
+    margin: 0 auto;
+    text-align: center;
+    background-color: rgb(33, 37, 41);
+    border-radius: 4px;
+}
+.project h1 {
+    margin-bottom: 1.25rem;
+    font-size: 1.5rem;
+}
+.project ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 1.25rem;
+    list-style: none;
+}
+.project li {
+    margin: 0.5em;
+    font-size: 0.85rem;
+}
+.project a {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 1.5rem;
+
+    width: 42px;
+    height: 42px;
+
+    background-color: rgb(44, 49, 54);
+    color: white;
+    font-size: 20px;
+    border: none;
+    border-radius: 50%;
+    text-decoration: none;
+
+    transition: color 0s;
+    transition: transform 0.15s ease;
+}
+.project a:hover {
+    background-color: #5865f2;
+    transform: translateY(-3px);
+}
+body.light-mode .project a {
+    background-color: rgb(231, 231, 231);
+    color: rgb(29, 29, 29);
+}
+body.light-mode .project a:hover {
+    color: white;
+    background-color: #5865f2;
 }
diff --git a/index.html b/index.html
index 47ca092..4e82feb 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
             <a href="#">Home</a>
           </li>
           <li>
-            <a href="#showcase">Showcase</a>
+            <a href="#projects">Projects</a>
           </li>
           <li>
             <a href="#about">About</a>
@@ -36,12 +36,38 @@
     <main>
       <section id="home">
         <div class="home-container">
-          <p>Software Developer</p>
-        </div>
+          <h1>Hey 👋 I'm <span>Tarion</span>.</h1>
+          <h2>Game Programmer</h2>
+          <p>Currently working on a game in the Unity Engine.</p>
+          <div class="links">
+            <a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a></div>
+          </div>
       </section>
-      <section id="showcase">
-        <div class="showcase-container">
-
+      <section id="projects">
+        <div class="projects-container">
+          <h1>Projects</h1>
+          <div class="projects">
+            <div class="project">
+              <h1>Game Engine</h1>
+              <p>A Game Engine written in c++ using Lua as it's scripting language.</p>
+              <ul>
+                <li>C++</li>
+                <li>Lua</li>
+              </ul>
+              <a href="https://git.tarion.org/tarion/Game-Engine"><i class="fa-brands fa-git-alt"></i></a>
+            </div>
+            <div class="project">
+              <h1>schwarzer-energie.de</h1>
+              <p>A Website for my Dads Chimney Sweeping & Energy Performance Certificate Business.</p>
+              <ul>
+                <li>HTML</li>
+                <li>CSS</li>
+                <li>JavaScript</li>
+                <li>Hosting</li>
+              </ul>
+              <a href="https://schwarzer-energie.de/"><i class="fa-solid fa-globe"></i></a>
+            </div>
+          </div>
         </div>
       </section>
       <section id="about">
@@ -58,7 +84,7 @@
 
     <footer>
       <div class="links">
-        <a href="https://discord.gg/APgmsfA9Ae"><i class='fab fa-discord'></i></a>
+        <a href="mailto:patrickschwarzer2000@gmail.com"><i class="fa-solid fa-envelope"></i></i></a>
         <a href="https://github.com/pschwarzer20"><i class="fa-brands fa-github"></i></a>
         <a href="https://git.tarion.org/"><i class="fa-brands fa-git-alt"></i></a>
         <a href="https://steamcommunity.com/profiles/76561198119267753/"><i class="fa-brands fa-steam"></i></a>