diff --git a/README.md b/README.md
index bf21502c09cda866df601f9f16c1172585950792..655746e690b51b7252bea4060cfcfbf21b757ec1 100644
--- a/README.md
+++ b/README.md
@@ -49,7 +49,6 @@ python manage.py migrate --settings=majak_uistyleguide.settings.dev
 python manage.py runserver --settings=majak_uistyleguide.settings.dev
 ```
 
-
 ### Setup Vite
 
 #### Install requirements
@@ -57,6 +56,11 @@ python manage.py runserver --settings=majak_uistyleguide.settings.dev
 npm i
 ```
 
+### Dev mode (with setting DJANGO_VITE_DEV_MODE = True)
+cp majak_uistyleguide/settings/local.py.example majak_uistyleguide/settings/local.py
+npm run dev
+python manage.py runserver --settings=majak_uistyleguide.settings.local
+
 ### Build
 
 The build command compiles the styleguide CSS To build, run:
diff --git a/majak_uistyleguide/settings/local-example.py b/majak_uistyleguide/settings/local.py.example
similarity index 100%
rename from majak_uistyleguide/settings/local-example.py
rename to majak_uistyleguide/settings/local.py.example
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html
deleted file mode 100644
index 56f76e81561172ea99ea00a9297919eca47a7bb0..0000000000000000000000000000000000000000
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<a href="{{ target_url }}" class="btn btn__slide__wrap {{ classes }}">
-  <span class="btn text-lg bg-black px-1 text-white lg:text-base">{{ btn_text }}</span>
-  <span class="btn text-lg bg-white px-1 text-black lg:text-base">{{ btn_text }}</span>
-</a>
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html
deleted file mode 100644
index f0202a9663896cffd53a282a0a2686b8ddb7e7bc..0000000000000000000000000000000000000000
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<button type="submit" class="btn btn__slide__wrap {{ classes }}">
-  <span class="btn text-base bg-black px-1 text-white"> {{ btn_text_form }} </span>
-  <span class="btn text-base bg-white px-1 text-black"> {{ btn_text_form }} </span>
-</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..a645a0537f1c457b0b57f855e2a166fffc5d5ac9
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.html
@@ -0,0 +1,7 @@
+<a href="{{ target_url }}" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
+  <span class="btn__body-wrap w-36 h-11">
+    <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+      {{ btn_text }}
+    </span>
+  </span>
+</a>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button.yaml
similarity index 100%
rename from majak_uistyleguide/templates/patterns/atoms/buttons/button_animated.yaml
rename to majak_uistyleguide/templates/patterns/atoms/buttons/href_button.yaml
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html
new file mode 100644
index 0000000000000000000000000000000000000000..330e383fe586f367dbbcc9cb33975e5991e7db08
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.html
@@ -0,0 +1,7 @@
+<a href="{{ target_url }}" class="btn btn--white btn--to-black btn--hoveractive uppercase">
+  <span class="btn__body-wrap w-36 h-11">
+    <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+      {{ btn_text }}
+    </span>
+  </span>
+</a>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.yaml
similarity index 100%
rename from majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.yaml
rename to majak_uistyleguide/templates/patterns/atoms/buttons/href_button_secondary.yaml
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..9dcb21c6e0a27a32fbd1d032b30635976e045e35
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.html
@@ -0,0 +1,7 @@
+<button type="button" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
+  <span class="btn__body-wrap w-36 h-11">
+    <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+      {{ btn_text }}
+    </span>
+  </span>
+</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..9a02f75465e09571d2b63ae31beeb5be3e93091f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button.yaml
@@ -0,0 +1,4 @@
+context:
+  target_url: 'https://example.com'
+  btn_text: 'Zobrazit další'
+  classes: ''
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html
deleted file mode 100644
index a4cd4ac6bc2a50cb7cb7a80722fd95ddc442e6aa..0000000000000000000000000000000000000000
--- a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_animated.html
+++ /dev/null
@@ -1,8 +0,0 @@
-<button type="button" class="btn btn__slide__wrap {{ classes }}">
-  <span class="btn text-base bg-black px-1 text-white">
-    {{ btn_text }}
-  </span>
-  <span class="btn text-base bg-white px-1 text-black">
-    {{ btn_text }}
-  </span>
-</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html
new file mode 100644
index 0000000000000000000000000000000000000000..79c31a478a3cdf827a64f92a6b8611a5c47f51d9
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.html
@@ -0,0 +1,7 @@
+<button type="button" class="btn btn--white btn--to-black btn--hoveractive uppercase">
+  <span class="btn__body-wrap w-36 h-11">
+    <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+      {{ btn_text }}
+    </span>
+  </span>
+</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..9a02f75465e09571d2b63ae31beeb5be3e93091f
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/plain_button_secondary.yaml
@@ -0,0 +1,4 @@
+context:
+  target_url: 'https://example.com'
+  btn_text: 'Zobrazit další'
+  classes: ''
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html
new file mode 100644
index 0000000000000000000000000000000000000000..a00dcd9af17d531f3f68faeaa40f916f9c36d6df
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.html
@@ -0,0 +1,7 @@
+<button type="submit" class="btn btn--black btn--to-yellow-500 btn--hoveractive uppercase">
+  <span class="btn__body-wrap w-36 h-11">
+    <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+      {{ btn_text_form }}
+    </span>
+  </span>
+</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.yaml
similarity index 100%
rename from majak_uistyleguide/templates/patterns/atoms/buttons/form_button_animated.yaml
rename to majak_uistyleguide/templates/patterns/atoms/buttons/submit_button.yaml
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html
new file mode 100644
index 0000000000000000000000000000000000000000..53edd45a86ad972331c874e81e943304c1767a22
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.html
@@ -0,0 +1,7 @@
+<button type="submit" class="btn btn--white btn--to-black btn--hoveractive uppercase">
+  <span class="btn__body-wrap w-36 h-11">
+    <span class="btn__body text-lg lg:text-base xl:w-auto w-36 h-11">
+      {{ btn_text_form }}
+    </span>
+  </span>
+</button>
diff --git a/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml
new file mode 100644
index 0000000000000000000000000000000000000000..ed4c7f75a40972fd1ca46f0833cc9731957b9266
--- /dev/null
+++ b/majak_uistyleguide/templates/patterns/atoms/buttons/submit_button_secondary.yaml
@@ -0,0 +1,3 @@
+context:
+  btn_text_form: 'Zobrazit další'
+  classes: ''
\ No newline at end of file
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html b/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html
index 73684af74514a695e383f1117096306fc3f0e9f9..5b76cc4a26041eb1786914b39220ebd948f9270e 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_carousel_item.html
@@ -11,7 +11,7 @@
           {{ text_carousel }}
         </h4>
       </a>
-      {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zjistit více' %}
+      {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zjistit více' %}
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html
index be1fc7a57b6b70828b9a8fcc9412365fd9a68b0b..f8393fb433e0a585fe392a05e4f83ef90c05454d 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/article_timeline_preview.html
@@ -14,6 +14,6 @@
     {{ work_article_text }}
   </p>
   <div>
-    {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %}
+    {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %}
   </div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html b/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html
index 754e51dde756305f3be4589ff7f8e011b97d5689..cc77b94220eec81ecf83b0013df019293dffea10 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/autor_perex.html
@@ -1,26 +1,26 @@
 <div class="grid-container mb-2 lg:mb-12 relative">
   <div class="grid-left-side h-full bg-grey-150 left-tab">
     <div class="p-6 flex flex-wrap flex-row items-center justify-between xl:items-start xl:flex-col">
-        <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br>{{ autor_perex }}</span>
-        <span>
+      <span class="font-bold 3xl:text-xl">AUTOR ČLÁNKU: <br>{{ autor_perex }}</span>
+      <div>
         <div class="flex flex-row static bottom-0 xl:absolute sm:bottom-5">
-            <a href="" class="flex hover:no-underline">
-              <i class="ico--facebook mx-1"></i>
-            </a>
-            <a href="" class="flex hover:no-underline">
-              <i class="ico--twitter mx-2"></i>
-            </a>
-            <a href="" class="flex hover:no-underline">
-              <i class="ico--instagram mx-1"></i>
-            </a>
+          <a href="" class="flex hover:no-underline">
+            <i class="ico--facebook mx-1"></i>
+          </a>
+          <a href="" class="flex hover:no-underline">
+            <i class="ico--twitter mx-2"></i>
+          </a>
+          <a href="" class="flex hover:no-underline">
+            <i class="ico--instagram mx-1"></i>
+          </a>
         </div>
-      </span>
+      </div>
     </div>
   </div>
   <div class="grid-content leading-6">
-    <h2 class="head-xl">
+    <p class="font-condensed text-xl leading-7 mb-5">
       {{ text_perex }}
-    </h2>
+    </p>
   </div>
   <div class="hidden grid-right-side h-full bg-grey-150 right-tab xl:block"></div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html
index 716716726b4503a4942c44fe8bb4d769fcade528..2872ebc9a4cb5fa0423043eeba7e3c301368be90 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/main_article_preview.html
@@ -1,14 +1,13 @@
 <div class="flex flex-wrap mb-5 lg:mb-10">
   <a href="#">
-  <img src="../../../../static/images/person-table.png" alt=""
-       class="lg:max-w-lg lg:mr-11">
+    <img src="../../../../static/images/person-table.png" alt="" class="lg:max-w-lg lg:mr-11">
   </a>
   <div class="flex flex-col max-w-xl items-start">
-    <span class="text-green-500 head-3xl mt-10 mb-4 lg:mb-8"> {{ main_article_date }} </span>
+    <span class="text-green-500 head-3xl mb-4 lg:mb-8"> {{ main_article_date }} </span>
     <a href="#" class="head-4xl mb-5 lg:mb-10"> {{ main_article_title }} </a>
     <p class="leading-6 mb-4 lg:mb-8">
       {{ main_article_text }}
     </p>
-    {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %}
+    {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %}
   </div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html
index 76eb79f6251dfb794208d7becfb1338b82f02305..f0053b9ad2e9fb69b43e1508d84d82073882e047 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/person_article_preview.html
@@ -11,5 +11,5 @@
   <p class="mb-6">
     {{ perston_article_text }}
   </p>
-  {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %}
+  {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %}
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html b/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html
index 6a5b144d2662d17559616ae9c2cf522d7e179ba6..f9d1d28be36ca41f7a628ac0738c285e4c80a1d9 100644
--- a/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html
+++ b/majak_uistyleguide/templates/patterns/molecules/articles/small_article_preview.html
@@ -9,6 +9,6 @@
     <h4 class="font-alt leading-5 text-base uppercase lg:text-base mb-2">
       {{ small_article_text }}
     </h4>
-    {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Číst dále' %}
+    {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Číst dále' %}
   </div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html b/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html
index b947c28501c464effc732a5c8e9eadeca23e0d75..c5c4eac45b9047979da1593ae6ed3d0adbad8693 100644
--- a/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html
+++ b/majak_uistyleguide/templates/patterns/molecules/blocks/download_block.html
@@ -7,6 +7,6 @@
       <span class="font-bold mr-1">Stáhnout soubor:</span>
       <span class="overflow-hidden text-ellipsis">{{ block_dowload_file_title }}</span>
     </div>
-     {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Stáhnout' classes='h-11 p-0' %}
+     {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Stáhnout' classes='h-11 p-0' %}
   </div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html
index 4b51345319df092314ce7fc853329eab2e6121b2..fcb15f618b9322d89fc8070e1bea8118de293226 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/bg_image_box.html
@@ -1,5 +1,5 @@
 <div class="background-hover-zoom w-96 h-60 flex bg-white flex-col items-center justify-center drop-shadow-xl xl:m-0 sm:w-80 sm:h-80 hover:no-underline"
      style="background-image: url('../../../../static/images/person-table.png')">
   <h5 class="head-alt-md text-white mt-24 mb-8">{{ representative_title }}</h5>
-        {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Poslanecký klub' %}
+        {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Poslanecký klub' %}
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html
index 8a35689c7c650d16f6669e7d0f34439f183d2e87..d298be8f1820df0c8ff4da878b38e60e9e9f8121 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/small_image_box.html
@@ -2,5 +2,5 @@
   <img src="../../../../static/images/person-table.png" alt=""
        class="mb-8 max-w-20 max-h-20">
   <h5 class="head-4xl mb-8">{{ box_link_title }}</h5>
-    {% include 'patterns/atoms/buttons/plain_button_animated.html' with btn_text='Přidat se k nám' classes='shrink-0' %}
+    {% include 'patterns/atoms/buttons/plain_button.html' with btn_text='Přidat se k nám' classes='shrink-0' %}
 </a>
diff --git a/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html b/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html
index 1cefb011085d82a51cf6084f45a8603d0bbac3fd..9e34b2f14372730113f541ff009e173f934368b2 100644
--- a/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/boxes/twitter_box.html
@@ -1,11 +1,14 @@
 <a href="#" class="mb-5 p-4 w-full flex flex-col items-center justify-between text-center border border-grey-100 sm:mb-0 hover:no-underline">
   <div>
-    <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="../../../../static/images/person-table.png"
-           alt="user image"/>
+    <div class="flex flex-row sm:flex-col items-start sm:items-center">
+      <img
+        class="rounded-full shadow-sm w-12 mr-2 sm:mr-0 mb-0 sm:mb-2"
+        src="../../../../static/images/person-table.png"
+        alt="user image"
+      />
       <div class="flex flex-col sm:flex-col">
-        <h5 class="font-alt text-xl mb-2 sm:text-base">{{ twitter_person }}</h5>
-        <small class="mb-4 text-turquoise-400">{{ twitter_mail }}</small>
+        <h5 class="font-alt text-xl mb-2 sm:text-base text-left sm:text-center">{{ twitter_person }}</h5>
+        <small class="mb-4 text-turquoise-400 text-left sm:text-center">{{ twitter_mail }}</small>
       </div>
     </div>
     <p class="text-small sm:text-base leading-6 mb-2">
diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html
index 7dd4d247dbdceada3b3cf2fb5557cba6e8147b45..2fc3269567249152752fd86fc27bbcf9a725db37 100644
--- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_box.html
@@ -9,5 +9,5 @@
       {{ address_more }}
     </p>
   </div>
-   {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Lidé' %}
+   {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Lidé' %}
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html
index fbb649286c26073d01fdbb1d77ea0c6aae39e26d..248e39fdcfa1b97bc16c9d57e4ba36d71767aee4 100644
--- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_person_large_box.html
@@ -22,7 +22,7 @@
       </span>
     </div>
     <div>
-       {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Detail' %}
+       {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %}
     </div>
   </div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html b/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html
index 7d3aa27e267db42bd2c7de5df9f7046f170d20bc..78c00445650c15d88b7b4410598b267188d5f4e8 100644
--- a/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html
+++ b/majak_uistyleguide/templates/patterns/molecules/contact/contact_simple_box.html
@@ -16,7 +16,7 @@
       </span>
     </div>
     <div>
-       {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Detail' %}
+       {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Detail' %}
     </div>
   </div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
index 015ef2b6863a26cc50fab32ad9ad08a987699a65..fccf70f1d7be4e606b85fb5aee078913cec24275 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.html
@@ -1,19 +1,20 @@
 <div class="__js-root">
   <ui-header-carousel>
     {% for content in carousel_content %}
-    <div class="xl:h-screen relative">
+    <div class="xl:min-h-screen relative">
       <img src="../../../../static/images/background-images/bg-bartos-newsletter.jpg" draggable="false">
       <div class="header-carousel--text grid-container">
-        <div class="grid-content-with-right-side h-fit">
+        <div class="h-fit">
           <h1 class="text-white">{{ content.label_first }}</h1>
-          <h1 class="text-orange-250 mb-2">{{ content.label_second }}</h1>
-          <a href="" class="btn btn__slide__wrap btn-carousel">
-            <span class="btn text-lg bg-white px-1 lg:text-base">{{ content.button_text }}</span>
-            <span class="btn text-lg bg-black text-white px-1 lg:text-base">{{ content.button_text }}</span>
+          <h1 class="text-yellow-500 mb-2">{{ content.label_second }}</h1>
+          <a href="#" class="btn btn--white btn--to-grey-175 btn--hoveractive uppercase">
+            <div class="btn__body-wrap w-32 h-11">
+              <div class="btn__body w-32 h-11 text-lg xl:text-base xl:w-auto">{{ content.button_text }}</div>
+            </div>
           </a>
         </div>
       </div>
     </div>
     {% endfor %}
   </ui-header-carousel>
-</div>
\ No newline at end of file
+</div>
diff --git a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml
index 155dcd8a2884b0a5b184247eb6134e1c78b5abbb..1de0dff52f61fec801048fef4ff7e31436dda113 100644
--- a/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml
+++ b/majak_uistyleguide/templates/patterns/molecules/menus/carousel.yaml
@@ -2,12 +2,12 @@ context:
   carousel_content:
    - label_first: '+72% domácností bylo'
      label_second: 'násilně digitalizováno'
-     button_text: 'Zjistit více1'
-   - label_first: '+72% domácností bylo'
-     label_second: 'násilně digitalizováno'
-     button_text: 'Zjistit více1'
-   - label_first: 'Pokud si tady'
-     label_second: 'Tak si na konci'
+     button_text: 'Zjistit více'
+   - label_first: '+52% domácností bylo'
+     label_second: 'násilně zachráněno'
+     button_text: 'Zjistit vícero'
+   - label_first: 'Pokud jsi tady'
+     label_second: 'Tak jsi na konci'
      button_text: 'Díky'
 
 
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html b/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html
index 6e51358b1748c67df02c2808b4261c564335d2b2..4cb7922ba838734711a1d26ba21dc5578aeca355 100644
--- a/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/articles_section.html
@@ -4,15 +4,15 @@
     <h2 class="head-7xl xl:text-center mb-6 xl:mb-28">
       {{ articles_section_title }}
     </h2>
-          {% include 'patterns/molecules/articles/main_article_preview.html' %}
+    {% include 'patterns/molecules/articles/main_article_preview.html' %}
     <div class="__js-root">
       <ui-article-carousel>
-              {% include 'patterns/molecules/articles/article_carousel_item.html' %}
-              {% include 'patterns/molecules/articles/article_carousel_item.html' %}
-              {% include 'patterns/molecules/articles/article_carousel_item.html' %}
-              {% include 'patterns/molecules/articles/article_carousel_item.html' %}
-              {% include 'patterns/molecules/articles/article_carousel_item.html' %}
-              {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+        {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+        {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+        {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+        {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+        {% include 'patterns/molecules/articles/article_carousel_item.html' %}
+        {% include 'patterns/molecules/articles/article_carousel_item.html' %}
       </ui-article-carousel>
     </div>
   </div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html
index 6fc9646ce689817af477c5c69e4eb2362d001aeb..2b7591af8420fc646434ff3a2ed0ebec988f95f3 100644
--- a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_article_list.html
@@ -8,7 +8,7 @@
         {% include 'patterns/molecules/articles/person_article_preview.html' %}
     </div>
     <div class="flex justify-center">
-      {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %}
+      {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %}
     </div>
   </div>
 </section>
diff --git a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html
index f63aca9377ba7de2285eaa9588d5f12393f17bb3..63438d5bd0d42a33cda40b586e32a582bbf08fb0 100644
--- a/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html
+++ b/majak_uistyleguide/templates/patterns/organisms/articles/main_articles_timeline.html
@@ -37,7 +37,7 @@
       </div>
     </div>
     <div class="flex justify-center">
-       {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %}
+       {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %}
     </div>
   </div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
index 033fd049c60bf318d9dbb78481ac0789e99d6c2d..8cb65017a666b535ca5d2df9ffeb19e76506e6d8 100644
--- a/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
+++ b/majak_uistyleguide/templates/patterns/organisms/layout/navbar.html
@@ -11,7 +11,7 @@
       class="main-menu grid-content-with-right-side grid justify-between items-center shadow-2xl xl:shadow-none xl:py-6">
       <!-- Hamburger Icon -->
       <input class="hidden" type="checkbox" id="menuToggle"/>
-      <label class="p-3 z-50 hamb mr-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
+      <label class="pl-3 py-3 z-50 hamb mr-1 mr-sm-3 text-white col-start-2 xl:mr-0 xl:hidden" for="menuToggle">
         <span class="container">
           <span class="bar1"></span>
           <span class="bar2"></span>
@@ -42,15 +42,14 @@
         </div>
         <div class="flex-row flex pb-8 xl:pb-0 gap-4 xl:pr-5">
           <a href="#"
-             class="btn btn--green-500 btn--hoveractive font-condensed uppercase">
+             class="btn btn--yellow-500 btn--to-yellow-600 btn--hoveractive xl:w-auto uppercase">
             <div class="btn__body-wrap w-32 h-11">
-              <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_1 }}</div>
+              <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_2 }}</div>
             </div>
           </a>
-          <a href="#"
-             class="btn btn--violet-700 btn--hoveractive font-condensed xl:w-auto uppercase">
+          <a href="#" class="btn btn--white btn--to-grey-175 btn--hoveractive uppercase">
             <div class="btn__body-wrap w-32 h-11">
-              <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_2 }}</div>
+              <div class="btn__body w-32 h-11 xl:w-auto">{{ menu_button_1 }}</div>
             </div>
           </a>
         </div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
index 77c2d9baba7e298f1df37419b82b68f39bcea4bb..d7ea844ae8dd84fafd08f5b7b7e3482a8cc9a45a 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/newsletter_section.html
@@ -9,15 +9,17 @@
   <div class="grid-container mt-20 xl:mt-0 xl:items-center z-10">
     <div class="grid-full newsletter-grid">
       <i class="newsletter-grid__icon ico--anchor text-7xl xl:text-9xl xl:w-full"></i>
-      <span class="newsletter-grid__additional-text uppercase text-xl xl:text-base font-bold mb-2 xl:w-full">
-        {{ newsletter_section_label }}
-      </span>
-      <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">{{ newsletter_section_text }}</h5>
+      <h5 class="newsletter-grid__main-text font-alt text-6xl xl:text-7xl uppercase">
+        {{ newsletter_section_text }}<br>
+        <span class="uppercase text-sm xl:text-base leading-1 mb-2 xl:w-full">
+          {{ newsletter_section_label }}
+        </span>
+      </h5>
       <div class="newsletter-grid__input flex flex-col items-start">
         <form method="post" class="w-full max-w-md" action=".">
           {% include 'patterns/atoms/form_fields/form_input.html' with form_placeholder='Tvůj email' classes='mb-3 w-full' %}
           {% include 'patterns/atoms/form_fields/form_checkbox.html' with label='Souhlasím se zpracováním osobních údajů' classes='mb-3' %}
-          {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Odebírat' %}
+          {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Odebírat' %}
         </form>
       </div>
     </div>
diff --git a/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html b/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html
index ae51314f6d03cc3501ad36e6344abab00b4923d6..841c0dcd833d33f44e4e22e274ed85831218facc 100644
--- a/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html
+++ b/majak_uistyleguide/templates/patterns/organisms/main_section/twitter_section.html
@@ -23,6 +23,6 @@
     </div>
   </div>
   <div class="flex justify-center mt-8 lg:mt-24">
-    {% include 'patterns/atoms/buttons/button_animated.html' with btn_text='Zobrazit další' %}
+    {% include 'patterns/atoms/buttons/href_button.html' with btn_text='Zobrazit další' %}
   </div>
 </div>
diff --git a/majak_uistyleguide/templates/patterns/templates/article/article_list.html b/majak_uistyleguide/templates/patterns/templates/article/article_list.html
index ca908eaac4550d947927a56d780726bc02dccfcb..900ee074cfcb2664f77155b9addc3c60a7eb4875 100644
--- a/majak_uistyleguide/templates/patterns/templates/article/article_list.html
+++ b/majak_uistyleguide/templates/patterns/templates/article/article_list.html
@@ -1,14 +1,14 @@
-    {% include 'patterns/organisms/layout/navbar.html' %}
-    {% include 'patterns/molecules/header/simple_header.html' with simple_header_title='Jak piráti pracují' %}
+{% include 'patterns/organisms/layout/navbar.html' %}
+{% include 'patterns/molecules/header/simple_header.html' with simple_header_title='Jak piráti pracují' %}
 <main role="main">
-  <div class="grid-container mb-2 xl:mb-12">
-    <div class="grid-content leading-6">
-      <h2 class="head-xl mb-2">
+  <div class="grid-container">
+    <div class="grid-content">
+      <p class="font-condensed text-xl leading-7 mb-5">
         {{ how_we_works_text_1 }}
-      </h2>
-      <h2 class="head-xl mb-2">
+      </p>
+      <p class="font-condensed text-xl leading-7 mb-5">
         {{ how_we_works_text_2 }}
-      </h2>
+      </p>
     </div>
   </div>
   <div class="__js-root">
diff --git a/majak_uistyleguide/templates/patterns/templates/people/people.html b/majak_uistyleguide/templates/patterns/templates/people/people.html
index 256e30f442d9ae3f58d9c078b8fada761c499c81..9f902b2d31ed6f00b0d2c3584488b179579c81f6 100644
--- a/majak_uistyleguide/templates/patterns/templates/people/people.html
+++ b/majak_uistyleguide/templates/patterns/templates/people/people.html
@@ -3,7 +3,7 @@
 <main role="main" class="mb-4 xl:mb-20">
   <div class="grid-container">
     <div class="grid-content">
-      <p class="font-alt text-xl leading-7 mb-5">
+      <p class="font-condensed text-xl leading-7 mb-5">
         {{ people_text }}
       </p>
     </div>
diff --git a/majak_uistyleguide/templates/patterns/templates/people/person.html b/majak_uistyleguide/templates/patterns/templates/people/person.html
index 1ebdf04ac8cf0746911403c0c5520b692328c2c5..dbbac5334dfb97eac381a7bb454f6df5e337799a 100644
--- a/majak_uistyleguide/templates/patterns/templates/people/person.html
+++ b/majak_uistyleguide/templates/patterns/templates/people/person.html
@@ -6,7 +6,7 @@
     <section class="grid-container person-grid-container">
       <div class="grid-content leading-6">
         <article class="mb-4 xl:mb-24 xl:mr-2">
-          <p class="font-alt text-xl leading-7 mb-5">
+          <p class="font-condensed text-xl leading-7 mb-5">
             {{ person_text_1 }}
           </p>
           <p class="mb-5">
diff --git a/majak_uistyleguide/templates/patterns/templates/program/program.html b/majak_uistyleguide/templates/patterns/templates/program/program.html
index 95548b91a3e2138bcccc707cbbfaddbece9d5985..df37e7202778961c892bf275f9b40c9178018c09 100644
--- a/majak_uistyleguide/templates/patterns/templates/program/program.html
+++ b/majak_uistyleguide/templates/patterns/templates/program/program.html
@@ -4,7 +4,7 @@
 <main role="main" class="mb-4 xl:mb-20">
   <div class="grid-container">
     <div class="grid-content">
-      <p class="font-alt text-xl leading-7 mb-5 program-perex">
+      <p class="font-condensed text-xl leading-7 mb-5 program-perex">
         {{ program_text }}
       </p>
     </div>
diff --git a/src/css/atoms/heading.pcss b/src/css/atoms/heading.pcss
index 43114d592635f4d279b0fa2abc5a2a40bc876993..5ae0d9982a22890fe3f1a3e5a2ccfe1e7ee4d701 100644
--- a/src/css/atoms/heading.pcss
+++ b/src/css/atoms/heading.pcss
@@ -143,8 +143,6 @@
   clip-path: polygon(0 0, 100% 0, 100% 96%, 0% 100%);
 }
 
-
-
 .head-xl {
   @apply font-alt text-base lg:text-xl font-medium leading-7 uppercase;
 }
diff --git a/src/css/molecules/carousels.pcss b/src/css/molecules/carousels.pcss
index 5fdb49d9e08a55ed1c4715d6c1fcd1d9997ff807..828e23a0c47ceb1791b061246024d618019369c6 100644
--- a/src/css/molecules/carousels.pcss
+++ b/src/css/molecules/carousels.pcss
@@ -36,14 +36,16 @@
   .header-carousel--text {
     @apply font-alt text-4xl sm:text-5xl uppercase lg:text-7xl;
     max-width: 1200px;
-    white-space: nowrap;
     position: absolute;
-    top: 50%;
-    margin-left: 10%;
+    top: 20%;
+
     @screen sm {
       margin-left: 10%;
       top: 35%;
     }
+    @screen md {
+      white-space: nowrap;
+    }
     @screen lg {
       top: 25%;
     }
@@ -51,6 +53,7 @@
       top: 30%;
     }
     @screen 2xl {
+      margin-left: 15%;
       top: 40%;
     }
   }
diff --git a/src/css/molecules/sliding_button.pcss b/src/css/molecules/sliding_button.pcss
index 03ce560c6e22be8ca8ade3ee6cfac9d11cb3e51f..d1f78c05963706f805a77c1de91738ffd02be127 100644
--- a/src/css/molecules/sliding_button.pcss
+++ b/src/css/molecules/sliding_button.pcss
@@ -3,7 +3,8 @@
   min-width: 8rem;
 }
 
-.btn__slide__wrap {
+/*
+.btn__slide__wrap {  // removed on request of MO in 2022/11
   overflow: hidden;
   position: relative;
 
@@ -28,3 +29,4 @@
     }
   }
 }
+*/
diff --git a/src/css/organisms/footer.pcss b/src/css/organisms/footer.pcss
index b34783ca19c0f482d2854c798682725d1126fd42..4a51164d17066649698c3a43c112c1cfe9d8bc24 100644
--- a/src/css/organisms/footer.pcss
+++ b/src/css/organisms/footer.pcss
@@ -28,7 +28,7 @@
       display: block;
       height: 40px;
       line-height: 40px;
-      min-width: 150px;
+      min-width: 200px;
     }
   }
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index f20bc87b2d01f06d9d567a703b63ab6dfc4cb67a..f62a7694da204bc12f91c4628f176556c8947cca 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -74,6 +74,7 @@ module.exports = {
                 '100': '#f3f3f3',
                 '125': '#f0f0f0',
                 '150': '#ECECEC',
+                '175': '#d0d0d0',
                 '200': '#ADADAD',
                 '300': '#4c4c4c',
                 '350': '#4F4F4F',
@@ -97,6 +98,8 @@ module.exports = {
                 '200': '#f7f38a',
                 '300': '#ffea5a',
                 '400': '#fde119',
+                '500': '#f9ce05',
+                '600': '#d7b103',
             },
             'red': {
                 '600': '#d60d53'
@@ -186,6 +189,10 @@ module.exports = {
                     text: 'black',
                     background: 'grey.125',
                 },
+                'grey-175': {
+                    text: 'black',
+                    background: 'grey.175',
+                },
                 'white': {
                     text: 'black',
                     background: 'white',
@@ -211,6 +218,14 @@ module.exports = {
                     text: 'black',
                     background: 'green.500',
                 },
+                'yellow-500': {
+                    text: 'black',
+                    background: 'yellow.500',
+                },
+                'yellow-600': {
+                    text: 'black',
+                    background: 'yellow.600',
+                },
                 'orange-300': {
                     text: 'white',
                     background: 'orange.300',
@@ -223,7 +238,7 @@ module.exports = {
                     text: 'black',
                     background: 'violet.500',
                 },
-              'violet-700': {
+                'violet-700': {
                     text: 'black',
                     background: 'violet.700',
                 },