diff --git a/index.html b/index.html
index 1503767..527cac0 100644
--- a/index.html
+++ b/index.html
@@ -91,6 +91,67 @@
       </div>
     </div>
 
+    <div class="container container-projects" id="projects">
+      <div class="row">
+        <div class="col-md-4">
+          <a href="https://ip.clerie.de" class="card">
+            <div class="card-body">
+              <p class="card-title">ip.clerie.de</p>
+              <p class="card-text">Whats my ip?</p>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-4">
+          <a href="https://status.clerie.de" class="card">
+            <div class="card-body">
+              <p class="card-title">status.clerie.de</p>
+              <p class="card-text">See my infrastructure breaking</p>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-4">
+          <a href="https://git.clerie.de/clerie/nixfiles" class="card">
+            <div class="card-body">
+              <p class="card-title">nixfiles</p>
+              <p class="card-text">All the configuration that makes a big part of my infrastructure</p>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-4">
+          <a href="https://fem.social" class="card">
+            <div class="card-body">
+              <p class="card-title">fem.social</p>
+              <p class="card-text">A mastodon instance</p>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-4">
+          <a href="https://wiki.clerie.de/notiz/start" class="card">
+            <div class="card-body">
+              <p class="card-title">Notizen</p>
+              <p class="card-text">Unsorted documentation about anything</p>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-4">
+          <a href="https://bubblesort.clerie.de" class="card">
+            <div class="card-body">
+              <p class="card-title">Bubblesort</p>
+              <p class="card-text">Interactive bubblesort implementation</p>
+            </div>
+          </a>
+        </div>
+        <div class="col-md-4">
+          <a href="https://wetter.clerie.de" class="card">
+            <div class="card-body">
+              <p class="card-title">wetter.clerie.de</p>
+              <p class="card-text">Displays DWD open weather data</p>
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+
     <div class="container container-contact" id="contact">
       <div class="row">
         <div class="col-md-6 offset-md-3">
diff --git a/style.css b/style.css
index 71d7173..e59512c 100644
--- a/style.css
+++ b/style.css
@@ -68,6 +68,21 @@ a:hover {
   box-shadow: none;
 }
 
+.card {
+  font-family: 'Amatic SC';
+  background-color: unset;
+  color: #B3B3B3; /* color: #aaaaaa; */
+
+  border-color: #B3B3B3; /* color: #aaaaaa; */
+  border-width: 1px;
+
+  margin-bottom: 30px;
+}
+
+a.card:hover {
+  text-decoration: none;
+}
+
 hr.divider {
   height: 0;
   max-width: 300px;
@@ -213,6 +228,12 @@ p.text-head {
   color: #364863;
 }
 
+/* Projects */
+.container-projects {
+  padding-bottom: 50px;
+  margin-top: auto;
+}
+
 /* Contact */
 .container-contact {
   font-size: 30px;