diff --git a/public/assets/css/page404.css b/public/assets/css/page404.css
index 928e3c3..06d8cc4 100755
--- a/public/assets/css/page404.css
+++ b/public/assets/css/page404.css
@@ -5,17 +5,9 @@
 .page_404  img{ width:100%;}
 
 .four_zero_four_bg{
- 
- background-image: url(/assets/bilder/404.jpg);
-    height: 400px;
-    background-position: center;
+ display: flex;
+ justify-content: center;
  }
-
-@media (max-width: 400px) {
- .four_zero_four_bg{
-  background-image: url(/assets/bilder/404portrait.jpg);
- }
-}
  
  
  .four_zero_four_bg h1{
@@ -32,4 +24,11 @@
     background: #39ac31;
     margin: 20px 0;
     display: inline-block;}
-	.contant_box_404{ margin-top:-50px;}
+	.contant_box_404{ margin-top:24px;}
+
+.page_404_image{
+ width: 100%;
+ max-width: 720px;
+ height: auto;
+ display: block;
+}
diff --git a/public/page/404.php b/public/page/404.php
index 91c6b10..97885f1 100755
--- a/public/page/404.php
+++ b/public/page/404.php
@@ -7,10 +7,13 @@
     <div class="col-sm-10 col-sm-offset-1  text-center"
     >
     <div class="four_zero_four_bg">
-        <img src="/assets/bilder/404.jpg" alt="404">
+        <picture>
+            <source media="(max-width: 400px)" srcset="/assets/bilder/404portrait.jpg">
+            <img src="/assets/bilder/404.jpg" alt="404" class="page_404_image rounded-lg">
+        </picture>
     </div>
     <div class="contant_box_404">
-        <a href="https://kusche.berlin" class="link_404">Zur Startseite</a>
+        <a href="https://kusche.berlin" class="btn">Zur Startseite</a>
     </div>
     </div>
     </div>