diff --git a/index.css b/index.css
index 7ff00bb..bff1325 100644
--- a/index.css
+++ b/index.css
@@ -279,7 +279,7 @@ body.light-mode .projects-container h1 {
     text-align: center;
     background-color: rgb(33, 37, 41);
     border-radius: 4px;
-    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
 }
 body.light-mode .project {
     background-color: #eeeeee;
@@ -347,6 +347,77 @@ body.light-mode .project a:hover {
 }
 
 
+/* skills Section */
+.skills-container {
+    margin-top: 6rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: rgb(216, 216, 216);
+}
+body.light-mode .skills-container {
+    color: rgb(216, 216, 216);
+}
+.skills-container h1 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+    color: rgb(216, 216, 216);
+}
+body.light-mode .skills-container h1 {
+    color: #3a3a3a;
+}
+.skills-container ul {
+    margin: 0 auto;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    list-style: none;
+    gap: 1em;
+}
+.skills-container li {
+    padding: 1rem;
+    background-color: #5660ca;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+}
+.skills-container li:hover {
+    background-color: #3b43a0;
+    transform: translateY(-3px);
+}
+
+
+/* contact Section */
+.contact-container {
+    margin-top: 6rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    color: rgb(216, 216, 216);
+}
+body.light-mode .contact-container {
+    color: rgb(216, 216, 216);
+}
+.contact-container h1 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+    color: rgb(216, 216, 216);
+}
+body.light-mode .contact-container h1 {
+    color: #3a3a3a;
+}
+.contact-container a {
+    padding: 1rem;
+    background-color: #5660ca;
+    border-radius: 0.5rem;
+    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
+    text-decoration: none;    align-items: center;
+    color: rgb(216, 216, 216);
+}
+.contact-container a:hover {
+    background-color: #3b43a0;
+    transform: translateY(-3px);
+}
+
 
 /* <a> transition fix */
 .project a,
diff --git a/index.html b/index.html
index d941871..d9cdd53 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,7 @@
             <a href="#projects">Projects</a>
           </li>
           <li>
-            <a href="#about">About</a>
+            <a href="#skills">Skills</a>
           </li>
           <li>
             <a href="#contact">Contact</a>
@@ -71,21 +71,32 @@
           </div>
         </div>
       </section>
-      <section id="about">
-        <div class="about-container">
-
+      <section id="skills">
+        <div class="skills-container">
+          <h1>Skills</h1>
+          <ul>
+            <li>C#</li>
+            <li>C++</li>
+            <li>Lua</li>
+            <li>Python</li>
+            <li>HTML</li>
+            <li>CSS</li>
+            <li>JavaScript</li>
+            <li>Git</li>
+          </ul>
         </div>
       </section>
       <section id="contact">
         <div class="contact-container">
-
+          <h1>Contact</h1>
+          <a href="mailto:patrickschwarzer2000@gmail.com">Interested in working together? Send me an email <i class="fa-solid fa-envelope"></i></a>
         </div>
       </section>
     </main>
 
     <footer>
       <div class="links">
-        <a href="mailto:patrickschwarzer2000@gmail.com"><i class="fa-solid fa-envelope"></i></i></a>
+        <a href="mailto:patrickschwarzer2000@gmail.com"><i class="fa-solid fa-envelope"></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>