diff --git a/css/layout.css b/css/layout.css
index ddd91c8..bdba707 100644
--- a/css/layout.css
+++ b/css/layout.css
@@ -1,5 +1,5 @@
 *{
-    color: white;
+    color: black;
     font-size: 30px;
 }
 #spielRaum{
@@ -29,4 +29,32 @@ body{
 }
 #enemy{
     position: fixed;
-}
\ No newline at end of file
+}
+.flexbox{
+    display: flex;
+    flex-direction: row;
+}
+#rechnungen{
+    padding: 25px;
+    justify-content: space-between;
+}
+#rechnung1, #rechnung2 {
+    width: 20%;
+    margin: 0 10px;
+    padding: 20px;
+    text-align: center;
+    font-size: 1.5em;
+    z-index: 10;
+    position: relative;
+    display: inline-block;
+}
+#rechnung1 img, #rechnung2 img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
diff --git a/index.html b/index.html
index a8273a5..ffccab9 100644
--- a/index.html
+++ b/index.html
@@ -11,9 +11,9 @@
     <div id="spielRaum">
         <div id="rechnungen" class="flexbox">
 
-            <div id="rechnung1">mal-5</div>
-            <div class="mittelabstand"></div>
-            <div id="rechnung2">mal-2</div>
+            <div id="rechnung1"><img src="pics/RechenBlockRot.png" alt="">*5</div>
+            
+            <div id="rechnung2"><img src="pics/RechenBlockBlau.png" alt="">+5</div>
 
         </div>
         <div id="tom">
diff --git a/pics/RechenBlockBlau.png b/pics/RechenBlockBlau.png
new file mode 100644
index 0000000..4e9e0da
Binary files /dev/null and b/pics/RechenBlockBlau.png differ
diff --git a/pics/RechenBlockRot.png b/pics/RechenBlockRot.png
new file mode 100644
index 0000000..0c09e7b
Binary files /dev/null and b/pics/RechenBlockRot.png differ