diff --git a/projects/project-1/index.html b/projects/project-1/index.html
index dc16c98..2773d36 100644
--- a/projects/project-1/index.html
+++ b/projects/project-1/index.html
@@ -8,47 +8,63 @@
     <script src="https://cdn.jsdelivr.net/npm/underscore@1.11.0/underscore-min.js"></script>
     <script src="js/tree.js"></script> <!-- Tree Maps-->
     <script src="script.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
-          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
+    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
+          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" rel="stylesheet">
 </head>
-<body>
+<body class="bg-dark">
 <div class="m-5">
     <div class="row">
-        <h1 class="col">Aufgabe 1</h1>
+        <h1 class="col text-center text-light">Aufgabe 1</h1>
+    </div>
+    <div class="row my-3">
+        <div class="col-xl-6 col-sm my-md-3 my-sm-3 my-3">
+            <div class="card">
+                <h4 class="card-header">Kreisdiagramm - Verbrauch pro Jahr</h4>
+                <div class="card-body" id="piechartYear"></div>
+            </div>
+        </div>
+        <div class="col-xl-6 col-sm my-md-3 my-sm-3 my-3">
+            <div class="card">
+                <h4 class="card-header">Kreisdiagramm - Verbrauch pro Monat</h4>
+                <div class="card-body" id="piechartMonth"></div>
+            </div>
+        </div>
+    </div>
+    <div class="row my-3">
+        <div class="col">
+            <div class="card">
+                <h4 class="card-header">Liniendiagramm</h4>
+                <div class="card-body" id="linechart"></div>
+            </div>
+        </div>
+    </div>
+    <div class="row my-3">
+        <div class="col">
+            <div class="card">
+                <h4 class="card-header">Punktdiagramm</h4>
+                <div class="card-body" id="scatterchart"></div>
+            </div>
+        </div>
+    </div>
+    <div class="row my-3">
+        <div class="col">
+            <div class="card">
+                <h4 class="card-header">Blasendiagramm</h4>
+                <div class="card-body" id="bubblechart"></div>
+            </div>
+        </div>
+    </div>
+    <div class="row mt-5 mb-3">
+        <h1 class="col text-center text-light">Aufgabe 2</h1>
     </div>
     <div class="row">
-        <figure class="col-xl-6 col-sm figure border border-primary">
-            <div id="piechartYear" class="pr-3"></div>
-            <figcaption class="figure-caption">Kreisdiagramm 1</figcaption>
-        </figure>
-        <figure class="col-xl-6 col-sm figure border border-primary">
-            <div id="piechartMonth"></div>
-            <figcaption class="figure-caption">Kreisdiagramm 2</figcaption>
-        </figure>
-    </div>
-    <div class="row justify-content-center">
-        <figure class="col figure border border-primary">
-            <div id="linechart" class=""></div>
-            <figcaption class="figure-caption">Liniendiagramm</figcaption>
-        </figure>
-    </div>
-    <div class="row justify-content-center">
-        <figure class="col figure border border-primary">
-            <div id="scatterchart"></div>
-            <figcaption class="figure-caption">Punktdiagramm</figcaption>
-        </figure>
-    </div>
-    <div class="row justify-content-center">
-        <figure class="col figure border border-primary">
-            <div id="bubblechart"></div>
-            <figcaption class="figure-caption">Blasendiagramm</figcaption>
-        </figure>
+        <div class="col">
+            <div class="card">
+                <h4 class="card-header">Folder Tree Map</h4>
+                <div class="card-body text-center" id="foldermap"></div>
+            </div>
+        </div>
     </div>
 </div>
-<h1 class="m-5">Aufgabe 2</h1>
-<div class="row">
-    <div id="foldermap" class="m-5 col"></div>
-</div>
-
 </body>
 </html>
\ No newline at end of file
