diff --git a/main/static/main/css/styles.css b/main/static/main/css/styles.css
index aaaff8161980f09679dc4f96bfe7aa425ae9383f..1df39cbcb5573c6c996829c60785c147b88f9095 100644
--- a/main/static/main/css/styles.css
+++ b/main/static/main/css/styles.css
@@ -2667,7 +2667,7 @@ p{
 
 .contact-box{
   display: flex;
-  height: 20rem;
+  height: auto;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
@@ -4499,6 +4499,10 @@ a.icon-link:hover span{
     margin-bottom: 3rem;
   }
 
+  .xl\:mr-4{
+    margin-right: 1rem;
+  }
+
   .xl\:mb-0{
     margin-bottom: 0px;
   }
diff --git a/main/styleguide/source/_patterns/molecules/box-link.mustache b/main/styleguide/source/_patterns/molecules/box-link.mustache
index fa3596f21efe54779a5bd83f4cfce7c1a565e274..89617063fa523239f9d87c0a8f60eba705f73087 100644
--- a/main/styleguide/source/_patterns/molecules/box-link.mustache
+++ b/main/styleguide/source/_patterns/molecules/box-link.mustache
@@ -2,5 +2,5 @@
   <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt=""
        class="mb-8 max-w-20 max-h-20">
   <h5 class="head-4xl mb-8">naloď se k pirátům</h5>
-  {{> atoms-button-animated(btn-text: "Přidat se k nám") }}
+  {{> atoms-button-animated(btn-text: "Přidat se k nám" classes="shrink-0") }}
 </div>
diff --git a/main/styleguide/source/css/molecules/contact_box.pcss b/main/styleguide/source/css/molecules/contact_box.pcss
index 7923617dff2ddc19ca73b0630964aaf7cdf5c4f0..0ace8621e134db116f404fa4ad19a57513c2c303 100644
--- a/main/styleguide/source/css/molecules/contact_box.pcss
+++ b/main/styleguide/source/css/molecules/contact_box.pcss
@@ -1,4 +1,4 @@
 .contact-box {
-  @apply border border-grey-100 flex flex-col h-80 items-center justify-between px-16 py-8 text-center;
+  @apply border border-grey-100 flex flex-col h-auto min-h-80 items-center justify-between px-16 py-8 text-center;
   width: 280px;
 }
diff --git a/main/templates/main/main_contact_page.html b/main/templates/main/main_contact_page.html
index 67239920da779340dbc8d2007a3493e7abe7e9cc..32fefa7f48015d153e4881c7f5656c382ee7913b 100644
--- a/main/templates/main/main_contact_page.html
+++ b/main/templates/main/main_contact_page.html
@@ -42,27 +42,22 @@
           <h2 class="head-4xl mb-5">
             Další kontakty
           </h2>
-          <div class="flex flex-wrap gap-4 justify-center md:justify-start">
+            <div class="flex flex-wrap gap-4 justify-center md:justify-start">
             {% for contact_block in page.contact_boxes %}
               <div class="contact-box">
-                <div>
-                  <div class="h-16 mx-auto w-16 mb-3">
+                  <div>
                     {% image contact_block.value.image fill-150x150 as contact_box_image %}
-                    <img src="{{ contact_box_image.url }}" alt="{{ contact_block.title }}">
-                  </div>
-                  <h3 class="font-alt mb-3 text-xl">
-                    {{ contact_block.value.title }}
-                  </h3>
-                  <p>
-                    {{ contact_block.value.subtitle }}
-                  </p>
+                    <img src="{{ contact_box_image.url }}" alt="{{ contact_block.title }}"
+                         class="h-16 mx-auto w-16 mb-3">
+                    <h3 class="font-alt mb-3 text-xl">
+                      {{ contact_block.value.title }}
+                    </h3>
+                    <p>
+                      {{ contact_block.value.subtitle }}
+                    </p>
                 </div>
-                <a href="{{ contact_block.value.button_link }}" class="btn btn__slide__wrap">
-                  <span class="btn bg-black text-white w-32">{{ contact_block.value.button_text }}</span>
-                  <span class="btn bg-blue-300 text-white w-32">{{ contact_block.value.button_text }}</span>
-                </a>
+                {% include 'main/includes/button_animated.html' with btn_link=contact_block.value.button_link btn_text=contact_block.value.button_text extra_classes="shrink-0" %}
               </div>
-
             {% endfor %}
           </div>
         </section>
@@ -95,7 +90,8 @@
                 </span>
                   {% if contact_person_box.value.person %}
                     <span>{{ contact_person_box.value.person.phone|default_if_none:'' }}</span>
-                    <span class="text-turquoise-500">{{ contact_person_box.value.person.email|default_if_none:'' }}</span>
+                    <span
+                      class="text-turquoise-500">{{ contact_person_box.value.person.email|default_if_none:'' }}</span>
                   {% endif %}
                 </div>
               </div>