diff --git a/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache b/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache
index ba85982988ed7f3be760e09d7a6b4e8e3fa67798..7abcece0171750ec21ae089a14cdd1303ed6398b 100644
--- a/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache
+++ b/main/styleguide/source/_patterns/atoms/buttons/button-animated.mustache
@@ -1,8 +1,8 @@
 <a href="" class="btn btn__slide__wrap {{ classes }}">
-  <span class="btn text-sm bg-black text-white w-32 lg:text-base">
+  <span class="btn text-lg bg-black text-white w-32 lg:text-base">
     {{ btn-text }}
   </span>
-  <span class="btn text-sm bg-white text-black w-32 lg:text-base">
+  <span class="btn text-lg bg-white text-black w-32 lg:text-base">
     {{ btn-text }}
   </span>
 </a>
diff --git a/main/styleguide/source/_patterns/molecules/box-link.mustache b/main/styleguide/source/_patterns/molecules/box-link.mustache
index 0385dfe589cf6264b14b4c7e55c5bd36d43b7259..ba2fb8dbd6a12a8ab0236c6f54e7354cdffb39cf 100644
--- a/main/styleguide/source/_patterns/molecules/box-link.mustache
+++ b/main/styleguide/source/_patterns/molecules/box-link.mustache
@@ -1,5 +1,5 @@
-<div class="mb-1 w-60 w-80 h-80 flex bg-white flex-col items-center justify-center mr-1">
-  <img src="https://i.picsum.photos/id/865/90/100.jpg?hmac=0E2Zv4lGASwKCcZxquMc_v2Y3Rg68gw21euyRQ1bu80" alt="" class="mb-8">
+<div class="mb-2 w-96 h-72 flex bg-white flex-col items-center justify-center mr-1 drop-shadow-xl">
+  <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") }}
 </div>
diff --git a/main/styleguide/source/_patterns/molecules/twitter-box.mustache b/main/styleguide/source/_patterns/molecules/twitter-box.mustache
index 55d737e6c45c07c492df3f8198798784e3348e05..7a77ed3fab6a6b99d5ddf69acdb7ce6e754c587c 100644
--- a/main/styleguide/source/_patterns/molecules/twitter-box.mustache
+++ b/main/styleguide/source/_patterns/molecules/twitter-box.mustache
@@ -1,14 +1,16 @@
-<div class="p-4 flex flex-col items-center text-center border border-grey-100">
-  <img class="rounded-full shadow-sm w-12 mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
-       alt="user image"/>
-  <h5 class="font-alt mb-2">Tomáš Marný</h5>
-  <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
-  <p class="text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-    eirmod
-    tempor invidunt ut labore
-    et
-    dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.</p>
+<div class="mb-5 p-4 flex flex-col items-center text-center border border-grey-100 sm:mb-0">
+  <div class="flex flex-row sm:flex-col items-center">
+    <img class="rounded-full shadow-sm w-12 h-12 mb-4 sm:mb-2" src="https://randomuser.me/api/portraits/women/56.jpg"
+         alt="user image"/>
+    <div class="flex flex-col sm:sm:flex-col">
+      <h5 class="font-alt text-xl mb-2 sm:text-base">Tomáš Marný</h5>
+      <small class="mb-4 text-turquoise-400">@pirat.tomas.marny</small>
+    </div>
+  </div>
+  <p class="text-small sm:text-base leading-6 mb-2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+    nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et
+    justo duo dolores et ea rebum.</p>
   <a href="" class="hover:no-underline">
-    <i class="ico--twitter text-turquoise-400 text-xl"></i>
+    <i class="ico--twitter text-turquoise-400 text-3xl sm:text-xl"></i>
   </a>
 </div>
diff --git a/main/styleguide/source/_patterns/organisms/box-links-section.mustache b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
index 1f9cefd96c10017e51c16425cd81766ffa4c10f7..b8bce5a2708ceb993ea1ea2e34d6d6b163c92ec3 100644
--- a/main/styleguide/source/_patterns/organisms/box-links-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/box-links-section.mustache
@@ -1,6 +1,6 @@
 <div class="bg-cover bg-no-repeat section-clip py-16 lg:py-36"
      style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
-  <div class="container--medium">
+  <div class="container-collapsible">
     <h2 class="head-7xl text-center mb-6 xl:mb-28">
       Piráti zastupují občany
     </h2>
diff --git a/main/styleguide/source/_patterns/organisms/header.mustache b/main/styleguide/source/_patterns/organisms/header.mustache
index 585b8005234a081bcac8db35cc226f92e2678bc0..19a0e2329914836fa1a803f82d6e6b5f0944e30b 100644
--- a/main/styleguide/source/_patterns/organisms/header.mustache
+++ b/main/styleguide/source/_patterns/organisms/header.mustache
@@ -1,7 +1,7 @@
 <!-- Navbar -->
 <nav class="navbar-background bg-black xl:duration-200 xl:bg-transparent xl:absolute xl:z-50 xl:w-full hover:bg-black">
   <!-- Logo -->
-  <a href="" class="menu-flag flex justify-center flag bg-white my-2 p-1 main-menu__logo xl:my-3">
+  <a href="" class="menu-flag flex justify-center flag bg-white p-1 main-menu__logo xl:my-2 xl:my-3">
     <img src="../../images/logo-full-black.svg" alt="">
   </a>
   <!-- Flex container -->
@@ -13,7 +13,7 @@
         <i class="ico--menu text-3xl"></i>
       </label>
       <!-- Menu -->
-      <div class="main-menu__main main-menu-items space-x-3 2xl:space-x-6 xl:flex">
+      <div class="main-menu__main main-menu-items mt-4 space-x-3 xl:mt-0 2xl:space-x-6 xl:flex">
         <a href="#" class="menu-link">Jak pracujeme</a>
         <a href="#" class="menu-link">Program</a>
         <a href="#" class="menu-link">O nás</a>
diff --git a/main/styleguide/source/_patterns/organisms/twitter-section.mustache b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
index 9e93c3fb86373bfa31bfd7485f9b3221325d2cf7..09b693c90ab74f7bd0596f46d7329faa9b8e8028 100644
--- a/main/styleguide/source/_patterns/organisms/twitter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
@@ -1,18 +1,20 @@
 <div class="container--wide mx-auto mb-8 lg:mb-16">
-  <h2 class="head-7xl text-center mb-6 xl:mb-28">
+  <div class="flex flex-wrap justify-center">
+    <h2 class="w-full flex max-w-xs head-7xl text-left mb-6 sm:text-center xl:mb-28">
     Co právě děláme
   </h2>
+  </div>
   <div class="flex flex-wrap justify-center mb-8 lg:mb-24">
-    <div class="w-full flex max-w-xs">
+    <div class="w-full flex max-w-sm sm:max-w-xs">
       {{> molecules-twitter-box }}
     </div>
-    <div class="w-full flex max-w-xs">
+    <div class="w-full flex max-w-sm sm:max-w-xs">
       {{> molecules-twitter-box }}
     </div>
-    <div class="w-full flex max-w-xs">
+    <div class="w-full flex max-w-sm sm:max-w-xs">
       {{> molecules-twitter-box }}
     </div>
-    <div class="w-full flex max-w-xs">
+    <div class="w-full flex max-w-sm sm:max-w-xs">
       {{> molecules-twitter-box }}
     </div>
   </div>
diff --git a/main/styleguide/source/_patterns/templates/homepage.mustache b/main/styleguide/source/_patterns/templates/homepage.mustache
index dc0b7349c2f82af05de79e4043bc2358beee71d1..01a471a4aa46024f90c277e53ff0541ca687c56b 100644
--- a/main/styleguide/source/_patterns/templates/homepage.mustache
+++ b/main/styleguide/source/_patterns/templates/homepage.mustache
@@ -9,9 +9,9 @@
           <div class="grid-content-with-right-side">
             <h1 class="text-white">72% domácností bylo</h1>
             <h1 class="text-orange-250">násilně digitalizováno</h1>
-            <a href="" class="btn btn__slide__wrap ">
-              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více1</span>
-              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více1</span>
+            <a href="" class="btn btn__slide__wrap btn-carousel">
+              <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více1</span>
+              <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více1</span>
             </a>
           </div>
         </div>
@@ -22,9 +22,9 @@
           <div class="grid-content-with-right-side">
             <h1 class="text-white">72% domácností bylo</h1>
             <h1 class="text-orange-250">násilně digitalizováno</h1>
-            <a href="" class="btn btn__slide__wrap ">
-              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více2</span>
-              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více2</span>
+            <a href="" class="btn btn__slide__wrap btn-carousel">
+              <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více2</span>
+              <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více2</span>
             </a>
           </div>
         </div>
@@ -35,9 +35,9 @@
           <div class="grid-content-with-right-side">
             <h1 class="text-white">72% domácností33 bylo</h1>
             <h1 class="text-orange-250">násilně digitalizováno</h1>
-            <a href="" class="btn btn__slide__wrap ">
-              <span class="btn text-sm bg-white w-32 lg:text-base">Zjistit více3</span>
-              <span class="btn text-sm bg-black text-white w-32 lg:text-base">Zjistit více3</span>
+            <a href="" class="btn btn__slide__wrap btn-carousel">
+              <span class="btn text-lg bg-white w-32 lg:text-base">Zjistit více3</span>
+              <span class="btn text-lg bg-black text-white w-32 lg:text-base">Zjistit více3</span>
             </a>
           </div>
         </div>
diff --git a/main/styleguide/source/css/atoms/flag.pcss b/main/styleguide/source/css/atoms/flag.pcss
index f16166ec8b50376665aec4ca1a46c011cabd0720..58a71c86e601e2fc2072ad65a9ba62ca8724fa1c 100644
--- a/main/styleguide/source/css/atoms/flag.pcss
+++ b/main/styleguide/source/css/atoms/flag.pcss
@@ -8,6 +8,7 @@
     left: 100%;
     top: 0;
     background: inherit;
-    clip-path: polygon(-2px -1px, 100% -1px, 60% 50%, 100% 100.7%, -2px 100.7%);
+    clip-path: polygon(0px 0px, 100% 0px, 0% 50%, 100% 100%, 0px 100%);
   }
 }
+
diff --git a/main/styleguide/source/css/molecules/carousels.pcss b/main/styleguide/source/css/molecules/carousels.pcss
index 035c6744a78ab45924cb7d2575ce18a9dc5dadd5..7507f48c3511586193fcbbf829e3f5b6773ba9af 100644
--- a/main/styleguide/source/css/molecules/carousels.pcss
+++ b/main/styleguide/source/css/molecules/carousels.pcss
@@ -30,18 +30,20 @@
   position: relative;
 
   .header-carousel--text {
-    @apply font-alt text-2xl sm:text-5xl uppercase lg:text-7xl;
+    @apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
     max-width: 1200px;
     position: absolute;
-    top: 35%;
-    margin-left: 15%;
-
+    top: 50%;
     @screen sm {
       margin-left: 10%;
+      top: 35%;
     }
     @screen lg {
       top: 30%;
     }
+    @screen xl {
+    margin-left: 15%;
+    }
     @screen 2xl {
       top: 45%;
     }
@@ -56,6 +58,13 @@
     transition: all 800ms ease-in-out;
     transform: scale(1.15, 1.15);
     width: 100%;
+    height: 458px;
+    object-fit: cover;
+    margin-bottom: -3px;
+
+    @screen sm {
+      height: auto;
+    }
   }
 
   .slick-slide {
@@ -85,22 +94,31 @@
   .slick-arrow {
     font-size: 0;
     position: absolute;
-    right: 10%;
+    right: 20%;
     top: 80%;
     z-index: 10;
 
+    @screen sm {
+    right: 10%;
+    }
     @screen lg {
       top: 60%;
     }
 
     &:before, &:after {
+    border-right: 3px solid white;
+    border-bottom: 3px solid white;
+    color: white;
+    content: '';
+    height: 1.3rem;
+    position: absolute;
+    width: 1.3rem;
+      @screen sm {
       border-right: 2px solid white;
       border-bottom: 2px solid white;
-      color: white;
-      content: '';
       height: .8rem;
-      position: absolute;
       width: .8rem;
+        }
       @screen lg {
         height: 1rem;
         width: 1rem;
@@ -120,16 +138,24 @@
     color: white;
     left: 5%;
     position: absolute;
-    top: 60%;
+    top: 90%;
     z-index: 10;
 
+    @screen  sm{
+    top: 60%;
+}
     li {
-      border: 1px solid white;
-      border-radius: 50%;
-      height: 6px;
-      margin-bottom: 6px;
-      width: 6px;
-
+    display:inline-block;
+    border: 1px solid white;
+    border-radius: 50%;
+    height: 6px;
+    width: 6px;
+    margin: 3px;
+
+      @screen sm {
+        display: block;
+        margin-bottom: 6px;
+      }
       &.slick-active {
         background-color: white;
       }
@@ -140,6 +166,10 @@
     }
   }
 }
+.btn-carousel{
+  @aplly h-11;
+  top: 28%;
+}
 
 .article-carousel {
   .slick-arrow {
diff --git a/main/styleguide/source/css/molecules/sliding_button.pcss b/main/styleguide/source/css/molecules/sliding_button.pcss
index 15ad7d2029ce2c12db8f9db9607c8600c0353118..4e1fbdabb4c9f25ecc362d2998e4649e1282dd62 100644
--- a/main/styleguide/source/css/molecules/sliding_button.pcss
+++ b/main/styleguide/source/css/molecules/sliding_button.pcss
@@ -1,5 +1,5 @@
 .btn {
-  @apply font-alt inline-flex justify-center items-center h-8 leading-9 py-1 xl:h-11;
+  @apply font-alt inline-flex justify-center items-center leading-9 py-1 h-11;
 }
 
 .btn__slide__wrap {
diff --git a/main/styleguide/source/css/organisms/navbar.pcss b/main/styleguide/source/css/organisms/navbar.pcss
index c651eabba645378bac7dc4cf885357f89af7bd4e..5f80724daf06b84d4d4c5284dbbac4f9676f23f3 100644
--- a/main/styleguide/source/css/organisms/navbar.pcss
+++ b/main/styleguide/source/css/organisms/navbar.pcss
@@ -38,6 +38,7 @@
 
 .navbar-background {
   background: linear-gradient(180deg, rgb(0, 0, 0) 8%, rgba(255, 255, 255, 0) 100%);
+  min-height: 63px;
 }
 .main-menu-grid {
   max-width: none;
@@ -48,7 +49,7 @@
 .menu-flag {
   position: absolute;
   left: 0;
-  width: 110px;
+  width: 209px;
 }
 
 .main-menu__external {