diff --git a/images/icons/arrow_yellow.svg b/images/icons/arrow_yellow.svg
new file mode 100644
index 0000000..9ab3401
--- /dev/null
+++ b/images/icons/arrow_yellow.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32.219" height="32.219" viewBox="0 0 32.219 32.219">
+    <path data-name="Pfad 958" d="M16.109 0a16.109 16.109 0 1 0 16.11 16.11A16.128 16.128 0 0 0 16.109 0m0 30.205a14.1 14.1 0 1 1 14.1-14.1 14.112 14.112 0 0 1-14.1 14.1" transform="rotate(-180 16.11 16.11)" style="fill:#e8a422"/>
+    <path data-name="Pfad 959" d="M333.8 372.639h-13.175l4.962-4.962a1.007 1.007 0 0 0-1.424-1.424l-6.681 6.68a1.007 1.007 0 0 0 0 1.424l6.681 6.681a1.007 1.007 0 0 0 1.424-1.424l-4.963-4.962H333.8a1.007 1.007 0 0 0 0-2.014" transform="rotate(-180 171.054 194.877)" style="fill:#e8a422"/>
+</svg>
diff --git a/includes/shortcodes.php b/includes/shortcodes.php
index a172fd7..432ec61 100644
--- a/includes/shortcodes.php
+++ b/includes/shortcodes.php
@@ -37,4 +37,14 @@ function getSubpages($atts){
     return $content;  
 }
 
-add_shortcode( 'subpages', 'getSubpages' );
\ No newline at end of file
+add_shortcode( 'subpages', 'getSubpages' );
+
+
+function getContactBoxes($atts){
+    ob_start();
+    $content .= get_template_part('template-parts/shortcodes/contactboxes','',$atts);
+    $content .= ob_get_clean(); 
+    return $content;  
+}
+
+add_shortcode( 'contactboxes', 'getContactBoxes' );
\ No newline at end of file
diff --git a/scss/includes/_content.scss b/scss/includes/_content.scss
index aae109d..9e4719d 100644
--- a/scss/includes/_content.scss
+++ b/scss/includes/_content.scss
@@ -43,6 +43,10 @@ a{
             margin-right: 0 !important;
         }
 
+        .boxicon {
+            width: 35px;
+            height: auto;
+        }
 
         .single-post-image{
             width: 100%;
@@ -64,16 +68,28 @@ a{
             width: 100%;
             height: 240px;
             background-color: #fff;
+
+            &.subpage-content{
+                .teaser {
+                    height: 140px;
+                }
+                height: auto;
+            }
         }
 
         .imagecontainer{
             width: 100%;
             height: 240px;
             background-color: $lightgrey;
-            background-size: cover;
+            background-size: 100%;
             background-repeat: no-repeat;
             background-position: center;
-        
+            transition: all 0.3s ease-in-out;
+          
+            &:hover{
+                transition: all 0.3s ease-in-out;
+                background-size: 105%;
+            }
         }
     }
 }
@@ -169,4 +185,5 @@ h2 {
             margin: auto;
         }
     }
-}
\ No newline at end of file
+}
+
diff --git a/scss/styles.css b/scss/styles.css
index 2976990..77712f7 100644
--- a/scss/styles.css
+++ b/scss/styles.css
@@ -394,6 +394,10 @@ a:hover {
     margin-right: 0 !important;
   }
 }
+.posts-grid .single-post .boxicon {
+  width: 35px;
+  height: auto;
+}
 .posts-grid .single-post .single-post-image {
   width: 100%;
   height: 240px;
@@ -414,13 +418,24 @@ a:hover {
   height: 240px;
   background-color: #fff;
 }
+.posts-grid .single-post .single-post-content.subpage-content {
+  height: auto;
+}
+.posts-grid .single-post .single-post-content.subpage-content .teaser {
+  height: 140px;
+}
 .posts-grid .single-post .imagecontainer {
   width: 100%;
   height: 240px;
   background-color: #f7f8f8;
-  background-size: cover;
+  background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
+  transition: all 0.3s ease-in-out;
+}
+.posts-grid .single-post .imagecontainer:hover {
+  transition: all 0.3s ease-in-out;
+  background-size: 105%;
 }
 
 #about-banner {
diff --git a/template-parts/pages/subpage.php b/template-parts/pages/subpage.php
index 1d0d09c..47b9895 100644
--- a/template-parts/pages/subpage.php
+++ b/template-parts/pages/subpage.php
@@ -1,13 +1,17 @@
 
 
 <div class="single-post bg-white">
-    <?php if( has_post_thumbnail( $args->ID )): ?>
+    <?php if( has_post_thumbnail( $args->ID )): 
+          $image = wp_get_attachment_image_src( get_post_thumbnail_id( $args->ID ), 'full' )[0];    
+    ?>
+        <div class="w-100 imagecontainer bg-gray" style="background-image:url('<?php echo $image; ?>')"></div>
     <?php else: ?>
         <div class="w-100 imagecontainer bg-gray"></div>
     <?php endif; ?>
 
-    <div class="single-post-content d-flex flex-column p-5">
+    <div class="single-post-content subpage-content d-flex flex-column p-5">
         <h2 class="fs23 mb-3"><?php echo $args->post_title; ?></h2>
-        <p><?php echo get_post_meta($args->ID,'teaser',true); ?></p>
+        <p class="teaser"><?php echo get_post_meta($args->ID,'teaser',true); ?></p>
+        <a href="<?php echo get_permalink($args->ID); ?>" ><img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/arrow_yellow.svg"></a>
     </div>
 </div>
\ No newline at end of file
diff --git a/template-parts/shortcodes/contact.php b/template-parts/shortcodes/contact.php
new file mode 100644
index 0000000..f560031
--- /dev/null
+++ b/template-parts/shortcodes/contact.php
@@ -0,0 +1,9 @@
+
+
+<div class="single-post bg-white p-5 d-flex flex-column justify-content-between h-100">
+    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/Kontakt_icon.svg" alt="Autohaus Löhr, Fahrzeugzentrum Olpe" class="boxicon my-3" />
+    <h3 class="my-3">Anschrift</h3>
+    <div class="mb-5">    
+       <?php the_field('adresse','options') ?>
+    </div>
+</div>
\ No newline at end of file
diff --git a/template-parts/shortcodes/contactboxes.php b/template-parts/shortcodes/contactboxes.php
new file mode 100644
index 0000000..dae0c4d
--- /dev/null
+++ b/template-parts/shortcodes/contactboxes.php
@@ -0,0 +1,7 @@
+
+<div class="posts-grid p-0 w-100">
+
+    <?php get_template_part('template-parts/shortcodes/contact'); ?>
+    <?php get_template_part('template-parts/shortcodes/fragen'); ?>
+    <?php get_template_part('template-parts/shortcodes/socialmedia'); ?>
+</div>
\ No newline at end of file
diff --git a/template-parts/shortcodes/fragen.php b/template-parts/shortcodes/fragen.php
new file mode 100644
index 0000000..fb0f224
--- /dev/null
+++ b/template-parts/shortcodes/fragen.php
@@ -0,0 +1,16 @@
+
+
+<div class="single-post bg-white p-5 d-flex flex-column justify-content-between h-100">
+    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/Kontakt_icon.svg" alt="Autohaus Löhr, Fahrzeugzentrum Olpe" class="boxicon my-3" />
+    <h3 class="my-3">Haben Sie Fragen?</h3>
+    <div class="mb-5">    
+    <div class="d-flex flex-row">
+        <p>Wir beraten Sie gerne:</p>
+        <p class="whatsapp"><a href="https://wa.me/4915735980000" target="_blank">02761/ 82870</a></p>
+    </div>
+    <div class="d-flex flex-row">
+        <p class="clock text-end">Mo.-Fr.:<br>Sa.:</p>
+        <p class="">08:00 - 17:00 Uhr<br>09:00 - 12:00 Uhr</p>
+    </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/template-parts/shortcodes/socialmedia.php b/template-parts/shortcodes/socialmedia.php
new file mode 100644
index 0000000..24aea83
--- /dev/null
+++ b/template-parts/shortcodes/socialmedia.php
@@ -0,0 +1,12 @@
+
+
+<div class="single-post bg-white p-5 d-flex flex-column justify-content-between h-100">
+    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/icons/Kontakt_icon.svg" alt="Autohaus Löhr, Fahrzeugzentrum Olpe" class="boxicon my-3 opacity-0" />
+    <h3 class="my-3">Folge uns auf Social Media</h3>
+    <div class="mb-5">    
+    <div class="d-flex flex-row">
+        <p class="clock text-end">Mo.-Fr.:<br>Sa.:</p>
+        <p class="">08:00 - 17:00 Uhr<br>09:00 - 12:00 Uhr</p>
+    </div>
+    </div>
+</div>
\ No newline at end of file