diff --git a/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache b/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
index b4f7d3f6636f402205266062640937a21e52f876..204778bf52c6e442ab28667daa853a41afef6725 100644
--- a/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
+++ b/main/styleguide/source/_patterns/molecules/articles/main-article-preview.mustache
@@ -1,11 +1,11 @@
-<div class="flex flex-col md:flex-row mb-10">
+<div class="flex flex-col mb-5 lg:flex-row lg:mb-10">
   <img src="https://i.picsum.photos/id/361/576/576.jpg?hmac=kb62KiZkyDuigb46DUJQd7QvQM6LfYFolTdIMwEqei4" alt=""
-       class="md:mr-12">
+       class="max-w-xl lg:mr-12">
   <div class="flex flex-col items-start">
-    <span class="text-green-500 text-3xl mt-12 mb-8">2.3.2022</span>
-    <h5 class="uppercase mb-10 h-allcaps head-alt-md ">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska
+    <span class="text-green-500 head-3xl mt-12 mb-4 lg:mb-8">2.3.2022</span>
+    <h5 class="head-4xl mb-5 lg:mb-10">Senátoři vyzvali k ukončení veřejné podpory firmám z Ruska
       a Běloruska, vkteré neodsoudí akt vojenské agrese na Ukrajině</h5>
-    <p class="leading-6 mb-8">
+    <p class="leading-6 mb-4 lg:mb-8">
       Senát chce v souvislosti s ruskou agresí zabránit některým firmám z Ruska a Běloruska čerpat dotace z
       prostředků rozpočtu České republiky.
       Plénum Senátu PČR dnes schválilo usnesení Stálé komise Senátu pro dohled nad poskytováním veřejných
diff --git a/main/styleguide/source/_patterns/molecules/representative-box.mustache b/main/styleguide/source/_patterns/molecules/representative-box.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..048ad8f648615a33e1c72b40d09c1438a1b0fdc2
--- /dev/null
+++ b/main/styleguide/source/_patterns/molecules/representative-box.mustache
@@ -0,0 +1,12 @@
+<div class="w-full max-w-xs mb-1 w-80 h-80 flex flex-col items-center justify-center"
+     style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
+  <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
+  <a href="" class="btn btn__slide__wrap w-32 mt-">
+          <span class="btn bg-black text-white w-32">
+            Poslanecký klub
+          </span>
+    <span class="btn bg-white text-black w-32">
+            Poslanecký klub
+          </span>
+  </a>
+</div>
diff --git a/main/styleguide/source/_patterns/organisms/articles-section.mustache b/main/styleguide/source/_patterns/organisms/articles-section.mustache
index 07324d7f9d253dadab3ad855e9c10de0e08eb7b1..cf1ea1b1e80aeac8f9e799cd12647bff6cde6508 100644
--- a/main/styleguide/source/_patterns/organisms/articles-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/articles-section.mustache
@@ -1,14 +1,14 @@
 <div class="mb-32 section-clip py-32 bg-no-repeat"
      style="background-image: url('https://i.picsum.photos/id/630/1980/1400.jpg?hmac=WjDo021fzd9SaIlmsi9LtZJApZ02RMzdG0bYLx8iXOo')">
-  <div class="container--wide mx-auto px-4 ">
-    <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
+  <div class="container--medium mx-auto px-4">
+    <h2 class="head-7xl text-center mb-16 pb-4 lg:pb-8">
       Aktuality z paluby
     </h2>
     {{> molecules-main-article-preview }}
     <div class="flex w-11/12">
-      {{> molecules-small-article-preview }}
-      {{> molecules-small-article-preview }}
-      {{> molecules-small-article-preview }}
+      <div class="__js-root">
+      <ui-article-carousel></ui-article-carousel>
+      </div>
     </div>
   </div>
 </div>
diff --git a/main/styleguide/source/_patterns/organisms/representatives-section.mustache b/main/styleguide/source/_patterns/organisms/representatives-section.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..a9ccac45e3ff764dbaec44bc2786c15d108f6227
--- /dev/null
+++ b/main/styleguide/source/_patterns/organisms/representatives-section.mustache
@@ -0,0 +1,11 @@
+<div class="container--medium mb-32">
+  <h2 class="head-7xl text-center mb-14 lg:mb-28">
+    Piráti zastupují občany
+  </h2>
+  <div class="flex flex-wrap space-x-1 justify-center items-center">
+    {{> molecules-representative-box }}
+    {{> molecules-representative-box }}
+    {{> molecules-representative-box }}
+    {{> molecules-representative-box }}
+  </div>
+</div>
diff --git a/main/styleguide/source/_patterns/organisms/twitter-section.mustache b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
index 627ed8bc38eec7353b0db0583a9edd2a3c56f9c3..d58f621e882a4a8cbd89c04bd03e6333313e464a 100644
--- a/main/styleguide/source/_patterns/organisms/twitter-section.mustache
+++ b/main/styleguide/source/_patterns/organisms/twitter-section.mustache
@@ -1,5 +1,5 @@
 <div class="container--medium mx-auto pt-8 lg:py-16 mb-16">
-  <h2 class="head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center">
+  <h2 class="head-7xl text-center pb-4 lg:pb-8">
     Co právě děláme
   </h2>
   <div class="mb-8 flex flex-wrap justify-center">
diff --git a/main/styleguide/source/_patterns/templates/homepage.mustache b/main/styleguide/source/_patterns/templates/homepage.mustache
index 51692c700d2113393b532cbb450930fa5270f94d..0f5c453681efbd641d6206305e876f738db1ae5a 100644
--- a/main/styleguide/source/_patterns/templates/homepage.mustache
+++ b/main/styleguide/source/_patterns/templates/homepage.mustache
@@ -6,61 +6,7 @@
   </div>
   {{> organisms-twitter-section }}
   {{> organisms-articles-section }}
-  <div class="container--wide mx-auto px-4 mb-32">
-    <h2 class="clear-both head-alt-md md:head-alt-lg pb-4 lg:pb-8 text-center mb-16">
-      Piráti zastupují občany
-    </h2>
-    <div class="flex flex-col md:flex-row justify-center items-center">
-      <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
-           style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
-        <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
-        <a href="" class="btn btn__slide__wrap w-32 mt-">
-          <span class="btn bg-black text-white w-32">
-            Poslanecký klub
-          </span>
-          <span class="btn bg-white text-black w-32">
-            Poslanecký klub
-          </span>
-        </a>
-      </div>
-      <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
-           style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
-        <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
-        <a href="" class="btn btn__slide__wrap w-32 mt-">
-          <span class="btn bg-black text-white w-32">
-            Poslanecký klub
-          </span>
-          <span class="btn bg-white text-black w-32">
-            Poslanecký klub
-          </span>
-        </a>
-      </div>
-      <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
-           style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
-        <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
-        <a href="" class="btn btn__slide__wrap w-32 mt-">
-          <span class="btn bg-black text-white w-32">
-            Poslanecký klub
-          </span>
-          <span class="btn bg-white text-black w-32">
-            Poslanecký klub
-          </span>
-        </a>
-      </div>
-      <div class="mb-1 w-80 h-80 flex flex-col items-center justify-center md:mr-1"
-           style="background-image: url('https://i.picsum.photos/id/261/350/350.jpg?hmac=GOGR4Va2TTfzr3sxRHwTlAxqhpu4M_pl_oKex2O7fcQ')">
-        <h5 class="head-alt-md text-white mt-24 mb-8">poslanci za piráty</h5>
-        <a href="" class="btn btn__slide__wrap w-32 mt-">
-          <span class="btn bg-black text-white w-32">
-            Poslanecký klub
-          </span>
-          <span class="btn bg-white text-black w-32">
-            Poslanecký klub
-          </span>
-        </a>
-      </div>
-    </div>
-  </div>
+  {{> organisms-representatives-section }}
   {{> organisms-region-section }}
   {{> organisms-newsletter-section }}
 
diff --git a/main/styleguide/source/css/atoms/container.pcss b/main/styleguide/source/css/atoms/container.pcss
index b3e0fa8d5b7d375322c7f49e160523385acc9f7d..7aeaefae72cd5f18ef013104d4ab01a5a0e1b34f 100644
--- a/main/styleguide/source/css/atoms/container.pcss
+++ b/main/styleguide/source/css/atoms/container.pcss
@@ -9,7 +9,7 @@
 
 .container--medium {
   margin: auto;
-  max-width: 1280px;
+  max-width: 1300px;
 }
 
 .container--wide {
diff --git a/main/styleguide/source/css/atoms/heading.pcss b/main/styleguide/source/css/atoms/heading.pcss
index 23f2ec1a62a2860c55188c26f410a121eef14add..bf0e3caf38f85dbde785fc7d10717ca9ecda7723 100644
--- a/main/styleguide/source/css/atoms/heading.pcss
+++ b/main/styleguide/source/css/atoms/heading.pcss
@@ -149,12 +149,16 @@
   @apply text-2xl font-bold leading-8 uppercase
 }
 
+.head-3xl {
+  @apply text-2xl leading-4 uppercase xl:text-3xl xl:leading-8;
+}
+
 .head-4xl {
-  @apply text-4xl font-bold leading-10 uppercase mb-5;
+  @apply text-2xl font-bold leading-7 uppercase mb-5 lg:text-4xl lg:leading-10;
 }
 
-.head-8xl {
-  @apply text-7xl font-bold uppercase;
+.head-7xl {
+  @apply text-3xl font-bold uppercase lg:text-7xl;
 }
 
 
diff --git a/main/styleguide/source/js/components/articles/ArticleCarousel.vue b/main/styleguide/source/js/components/articles/ArticleCarousel.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7b6aec5d041a32ff0987879160ab3809cc916076
--- /dev/null
+++ b/main/styleguide/source/js/components/articles/ArticleCarousel.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <vue-slick-carousel v-bind="settings">
+      <div class="flex max-w-md">
+        <img src="https://i.picsum.photos/id/523/132/132.jpg?hmac=XjW7KxLZNbta7gMDNvldHNGwA9XyxpjBFUGkJqrMR4o" alt="" class="mr-4">
+        <div class="flex flex-col justify-between items-start">
+          <span class="text-green-500">23.2.2022</span>
+          <h4 class="uppercase">
+            Komentář Lukáše Koláříka: Kriminalita ve virtuálním prostoru není imaginární,
+            ale skutečná. Jak nenaletět internetovým šmejdům?
+          </h4>
+        </div>
+      </div>
+    </vue-slick-carousel>
+  </div>
+</template>
+
+<script>
+import VueSlickCarousel from 'vue-slick-carousel'
+
+export default {
+  components: {VueSlickCarousel},
+  name: 'ArticleCarousel',
+  data: () => ({
+    settings: {
+      "dots": false,
+    }
+  })
+}
+</script>
diff --git a/main/styleguide/source/js/main.js b/main/styleguide/source/js/main.js
index 4146ab9e0727fdaaef3467ea1063ca8b03383252..12575b699ced05736b1a29710190da160d06202b 100644
--- a/main/styleguide/source/js/main.js
+++ b/main/styleguide/source/js/main.js
@@ -2,6 +2,7 @@ import Vue from "vue";
 
 import { forEachNode } from "./utils";
 
+import ArticleCarousel from "./components/articles/ArticleCarousel";
 import HeaderCarousel from "./components/header/HeaderCarousel";
 import Renderer from "./components/calendar/Renderer";
 import DummyProvider from "./components/calendar/DummyProvider";
@@ -13,6 +14,7 @@ import FooterCollapsible from "./components/footer/FooterCollapsible";
 import FlipClock from "./components/FlipClock";
 
 
+Vue.component("ui-article-carousel", ArticleCarousel);
 Vue.component("ui-header-carousel", HeaderCarousel);
 Vue.component("ui-calendar-renderer", Renderer);
 Vue.component("ui-calendar-dummy-provider", DummyProvider);