diff --git a/source/_patterns/00-atoms/05-cards/hover-active-card.mustache b/source/_patterns/00-atoms/05-cards/hover-active-card.mustache
new file mode 100644
index 0000000000000000000000000000000000000000..3326bad66a0835b69c525729206be82af26c7d87
--- /dev/null
+++ b/source/_patterns/00-atoms/05-cards/hover-active-card.mustache
@@ -0,0 +1,5 @@
+<div class="card card--hoveractive {{ classes }}">
+  <div class="card__body">
+    {{ description }}
+  </div>
+</div>
diff --git a/source/_patterns/01-molecules/program-point-card/program-point-card.mustache b/source/_patterns/01-molecules/cards/image-card.mustache
similarity index 53%
rename from source/_patterns/01-molecules/program-point-card/program-point-card.mustache
rename to source/_patterns/01-molecules/cards/image-card.mustache
index 99468a2889007811234de738eb230765e97c7a46..48b29349f86b1154fa191e80dda37c398bde6d75 100644
--- a/source/_patterns/01-molecules/program-point-card/program-point-card.mustache
+++ b/source/_patterns/01-molecules/cards/image-card.mustache
@@ -1,8 +1,8 @@
-<div class="card card--hoveractive {{ classes }}">
+<div class="card {{ classes }}">
   <a href="#">
-    <img src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
+    <img class="w-full" src="{{ img.landscape-16x9.src }}" alt="{{ img.landscape-16x9.alt }}" />
   </a>
-  <div class="card__body p-4">
+  <div class="card__body {{ bodyClasses }}">
     <h1 class="card-headline mb-2"><a href="#">{{ title }}{{^ title }}{{ headline.short }}{{/ title }}</a></h1>
     <p class="card-body-text">{{ excerpt.short }}</p>
   </div>
diff --git a/source/_patterns/03-templates/elections-program.mustache b/source/_patterns/03-templates/elections-program.mustache
index cc1e32e2d523481bfb70dbaa845e43f1b55e6961..ee636939905789563bde350c6c8fe2b884989b24 100644
--- a/source/_patterns/03-templates/elections-program.mustache
+++ b/source/_patterns/03-templates/elections-program.mustache
@@ -9,14 +9,14 @@
   <h1 class="head-alt-md text-center pt-24 pb-8">VolebnĂ­ program</h1>
 
   <div class="candidate-card-list grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-    {{> molecules-program-point-card(title: "Otevřenost a zapojení občanů") }}
-    {{> molecules-program-point-card(title: "Smart city") }}
-    {{> molecules-program-point-card(title: "Řízení a organizační struktura města") }}
-    {{> molecules-program-point-card(title: "Rozvoj města a bydlení") }}
-    {{> molecules-program-point-card(title: "Doprava") }}
-    {{> molecules-program-point-card(title: "Veřejný prostor a zeleň") }}
-    {{> molecules-program-point-card(title: "Vzdělávání") }}
-    {{> molecules-program-point-card(title: "Kultura a volnĂ˝ ÄŤas") }}
+    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Otevřenost a zapojení občanů" )}}
+    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Smart city" )}}
+    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Řízení a organizační struktura města" )}}
+    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Rozvoj města a bydlení" )}}
+    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Doprava" )}}
+    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Veřejný prostor a zeleň" )}}
+    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Vzdělávání" )}}
+    {{> molecules-image-card(classes: "card--hoveractive", bodyClasses: "p-4", title: "Kultura a volnĂ˝ ÄŤas" )}}
   </div>
 
   <div class="flex flex-col pt-24 space-y-8 md:space-y-0 md:flex-row md:space-x-8">