diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index f0358df..7205ae0 100644
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -48,7 +48,6 @@ h1, h2 {
 label {
     font-weight: bold;
     word-break: break-word;;
-
 }
 
 .slidecontainer {
@@ -92,7 +91,6 @@ label {
 }
 
 
-
 .input-group {
     display: flex;
     align-items: center;
@@ -116,47 +114,42 @@ label {
     height: 36px;
 }
 
-.cage-selector{
-    gap: 15px;
+.cards {
     display: flex;
+    justify-content: space-between;
     flex-wrap: wrap;
 }
 
+
 .card {
-    text-align: center;
-    color: var(--text-two);
-    flex: 1 25%;
-}
-
-
-
-.card-photo {
-    height: 200px;
-    min-width: 200px;
-    background-color: var(--background-one);
-    box-shadow: 0 0 25px rgba(17, 1, 68, 0.08);
-    border-radius: 8px;
-    position: relative;
-    cursor: pointer;
-}
-
-.card-photo img {
-    width: 70%;
-    height: 95%;
-    position: absolute;
-    margin: auto;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
-    cursor: pointer;
-}
-
-.card-photo label {
-    color: var(--text-one);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
+    transition: 0.3s;
+    margin: 0.4em;
+    min-width: 300px;
     padding: 10px;
+    border-radius: 10px;
 }
 
+@media screen and (min-width: 40em) {
+    flex: 0 1 calc(25% - 0.5em);
+}
+
+.card:hover {
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+}
+
+.info-container {
+    padding: 2px 16px;
+}
+
+img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-height: 200px;
+}
+
+
 .measurement {
     width: 100px;
 }
@@ -167,32 +160,18 @@ label {
 }
 
 input[type="checkbox"] {
-    -webkit-appearance: none;
-    position: relative;
-    width: 100%;
-    cursor: pointer;
-}
-input[type="checkbox"]:after {
-    position: absolute;
-    font-weight: 400;
-    content: "0";
-    font-size: 18px;
-    color: #478bfb;
-    right: 10px;
-    top: -5px;
-}
-input[type="checkbox"]:checked:after {
-    font-weight: 900;
-    content: "X";
-    color: #478bfb;
+    display: none;
 }
 
+
 .form-measurements {
     max-height: 90%;
 }
+
 .form-measurements input {
     width: 70%;
 }
+
 input.measurement {
     margin-top: 5%;
 }
\ No newline at end of file
diff --git a/src/assets/img/checked.png b/src/assets/img/checked.png
new file mode 100644
index 0000000..a75049e
Binary files /dev/null and b/src/assets/img/checked.png differ
diff --git a/src/assets/img/unchecked.png b/src/assets/img/unchecked.png
new file mode 100644
index 0000000..ea2b6de
Binary files /dev/null and b/src/assets/img/unchecked.png differ
diff --git a/src/index.html b/src/index.html
index 9b41ba4..ea8dda6 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/html">
+<html lang="en" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <title>Käfigrechner</title>
@@ -11,81 +11,84 @@
 <h1>Käfigrechner</h1>
 <div class="content">
     <div class="container-form">
-        <div class="cage-selector">
-            <div class="card">
-                <div class="card-photo">
+        <div class="cards">
+            <div class="card" id="card-SavicSuiteRoyaleXL">
+                <label for="SavicSuiteRoyaleXL">
                     <input type="checkbox" id="SavicSuiteRoyaleXL"/>
-                    <div>
+                    <div class="card-photo">
                         <img src="assets/img/savic-xl.jpeg">
                     </div>
-                </div>
-                <label for="SavicSuiteRoyaleXL"> Savic Suite Royale XL</label>
-            </div>
-
-
-            <div class="card">
-                <div class="card-photo">
-                    <input type="checkbox" id="SavicSuiteRoyale95Double"/>
-                    <div>
-                        <img src="assets/img/savic-95-double.jpg">
+                    <div class="info-container">
+                        <h4><b>Savic XL</b></h4>
                     </div>
-                </div>
-                <label for="SavicSuiteRoyale95Double">Savic Suite Royale 95 Double</label>
+                </label>
             </div>
 
+            <div class="card" id="card-SavicSuiteRoyale95Double">
+                <label for="SavicSuiteRoyale95Double">
+                    <input type="checkbox" id="SavicSuiteRoyale95Double"/>
+                    <div class="card-photo">
+                        <div>
+                            <img src="assets/img/savic-95-double.jpg">
+                        </div>
+                        <div class="info-container">
+                            <h4><b>95 Double</b></h4>
+                        </div>
+                    </div>
+                </label>
+            </div>
 
-            <div class="card">
-                <div class="card-photo">
+            <div class="card" id="card-TiakiKleintierkäfigEtagere">
+                <label for="TiakiKleintierkäfigEtagere">
                     <input type="checkbox" id="TiakiKleintierkäfigEtagere"/>
-                    <div>
+                    <div class="card-photo">
                         <img src="assets/img/tiaki.jpeg">
                     </div>
-                </div>
-                <label for="TiakiKleintierkäfigEtagere">TIAKI Kleintierkäfig Étagère</label>
+                    <div class="info-container">
+                        <h4><b>TIAKI Kleintierkäfig Étagère</b></h4>
+                    </div>
+                </label>
             </div>
 
             <div class="card">
-                <div class="card-photo">
-
-                    <label for="form-cage-measurements">Käfigmaße</label>
-                    <form id="form-cage-measurements" class="form-measurements">
-                        <div class="input-measurement">
-                            <label for="width">Breite (cm)</label>
-                            <input class="measurement" type="number" id="width">
-                        </div>
-                        <div class="input-measurement">
-                            <label for="depth">Tiefe (cm)</label>
-                            <input class="measurement" type="number" id="depth">
-                        </div>
-                        <div class="input-measurement">
-                            <label for="height">Höhe (cm)</label>
-                            <input class="measurement" type="number" id="height">
-                        </div>
-                    </form>
-                </div>
+                <label for="form-cage-measurements">Käfigmaße</label>
+                <form id="form-cage-measurements" class="form-measurements">
+                    <div class="input-measurement">
+                        <label for="width">Breite (cm)</label>
+                        <input class="measurement" type="number" id="width">
+                    </div>
+                    <div class="input-measurement">
+                        <label for="depth">Tiefe (cm)</label>
+                        <input class="measurement" type="number" id="depth">
+                    </div>
+                    <div class="input-measurement">
+                        <label for="height">Höhe (cm)</label>
+                        <input class="measurement" type="number" id="height">
+                    </div>
+                </form>
             </div>
-
-        </div>
-        <div class="input-element">
-            <div class="slidecontainer">
-                <label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
-                <input type="range" min="1" max="20" value="4" class="slider" id="numRats">
-            </div>
-        </div>
-
-        <div class="input-element">
-            <label for="numFullFloors">Vollebenen</label>
-            <div class="ncontainer">
-                <div class="input-group">
-                    <button onclick="decreaseFloorNum()">-</button>
-                    <input type="text" id="numFullFloors" value="3" readonly>
-                    <button onclick="increaseFloorNum()">+</button>
-                </div>
-            </div>
-        </div>
-        <div class="container output-element" id="resultsDiv">
         </div>
     </div>
+    <div class="input-element">
+        <div class="slidecontainer">
+            <label for="numRats" id="labelNumRats">Anzahl an Ratten ?</label>
+            <input type="range" min="1" max="20" value="4" class="slider" id="numRats">
+        </div>
+    </div>
+
+    <div class="input-element">
+        <label for="numFullFloors">Vollebenen</label>
+        <div class="ncontainer">
+            <div class="input-group">
+                <button onclick="decreaseFloorNum()">-</button>
+                <input type="text" id="numFullFloors" value="3" readonly>
+                <button onclick="increaseFloorNum()">+</button>
+            </div>
+        </div>
+    </div>
+    <div class="container output-element" id="resultsDiv">
+    </div>
+</div>
 </div>
 <script>
 
