diff --git a/mamweb/static/css/mamweb.css b/mamweb/static/css/mamweb.css
index 27cc77a6..6cfdf1cf 100644
--- a/mamweb/static/css/mamweb.css
+++ b/mamweb/static/css/mamweb.css
@@ -759,17 +759,26 @@ div.odpocet {
 
 /*stránka organizátorů*/
 
-div.seznam_orgu {
+div.seznam_orgu, div.rozcestnik_temat {
 	text-align: center;
+	padding-bottom: 10px;
 }
 
-div.org_pole, div.rocnik_pole {
+div.org_pole, div.rocnik_pole, div.tema_pole {
 	display: inline-block;
 	width: 30%;
 	min-width: 300px;
 	text-align: center;
 }
 
+div.tema_pole {
+	display: inline-block;
+	width: 40%;
+	min-width: 350px;
+	padding-bottom: 20px;
+	text-align: center;
+}
+
 div.cislo_pole {
 	display: inline-block;
 	width: 15%;
@@ -812,6 +821,11 @@ div.org_email {
 	height: 205px;
 }
 
+#tema-rozcestnik.flip-card {
+	width: 300px;
+	height: 300px;
+}
+
 /* This container is needed to position the front and back side */
 .flip-card-inner {
  position: relative;
@@ -835,7 +849,8 @@ div.org_email {
  backface-visibility: hidden;
 }
 
-div.flip-card-foto img {
+
+div.flip-card-foto, div.flip-card-foto img {
 	width: 100%;
 	height: 100%;
 
diff --git a/seminar/static/images/tema-bez-obrazku.png b/seminar/static/images/tema-bez-obrazku.png
new file mode 100644
index 00000000..8f421df2
Binary files /dev/null and b/seminar/static/images/tema-bez-obrazku.png differ
diff --git a/seminar/templates/seminar/tematka/rozcestnik.html b/seminar/templates/seminar/tematka/rozcestnik.html
index 8c3b1a38..0218b425 100644
--- a/seminar/templates/seminar/tematka/rozcestnik.html
+++ b/seminar/templates/seminar/tematka/rozcestnik.html
@@ -2,24 +2,53 @@
 
 
 {% block content %}
-<p style="text-align:justify">Témata jsou texty nejen z oblasti matematiky, fyziky a informatiky, které popisují nějaký problém a jsou doprovázeny návodnými úlohami. Vaším úkolem je&nbsp;zamyslet se nad daným problémem a sepsat vaše úvahy ve formě krátkého textu.</p>
 
-<p style="text-align:justify"><a href="/co-je-MaM/jak-resit/">Jak řešit téma?</a></p>
+<h2>
+  {% block nadpis1a %}{% block nadpis1b %}
+  Aktuální témata
+  {% endblock %}{% endblock %}
+</h2>
 
-<p style="text-align:justify">&nbsp;</p>
+<p>Témata jsou texty nejen z oblasti matematiky, fyziky a informatiky, které popisují nějaký
+  problém a jsou doprovázeny návodnými úlohami. Vaším úkolem je&nbsp;zamyslet se nad daným
+  problémem a sepsat vaše úvahy ve formě krátkého textu.</p>
 
-<h1>Aktuální témata</h1>
+<p><a href="/co-je-MaM/jak-resit/">Jak řešit téma?</a></p>
+
+
+<div class="rozcestnik_temat">
 
 {% for tematko in tematka %}
-<h2>{{tematko.nazev}}</h2>
-<div class="tematko-obrazek">
-    {% if tematko.obrazek %}
-      <a href="{{tematko.obrazek.url}}" class="ref-tema-obr"><img src="{{tematko.obrazek.url}}" height="{{tematko.obrazek.height}}" alt="{{tematko.nazev}}"></a>
-    {% else %} {# pokud témátko nemá fotku, zobrazuje se defaultní obrázek #}
-      {% load static %} <img src="{% static 'images/no-photo.png' %}" height=200px alt="{{tematko.nazev}}">
-    {% endif %}
-</div>
 
-<p>{{tematko.abstrakt}}</p>
+{# karta témátka - zepředu ilustrační, zezadu abstrakt #}
+<div class="tema_pole">
+
+  <h3>
+    <a href='{{ rocnik.verejne_url }}'>Téma {{ tematko.nazev }}</a>
+  </h3>
+
+  <div class="flip-card" id="tema-rozcestnik">
+
+    <div class="flip-card-inner">
+      <div class="flip-card-front">
+        <div class="flip-card-foto">
+          {% if tematko.obrazek %}
+            <img src="{{ tematko.obrazek.url }}" alt="{{ tematko.nazev }}">
+          {% else %} {# pokud témátko nemá fotku, zobrazuje se defaultní obrázek #}
+            {% load static %} <img src="{% static 'images/tema-bez-obrazku.png' %}" alt="{{ tematko.nazev }}">
+          {% endif %}
+        </div>
+      </div>
+      <div class="flip-card-back">
+          <p>{{ tematko.abstrakt }}</p>
+      </div>
+    </div>
+
+  </div>
+</div>
+{# konec karty témátka #}
 {% endfor %}
+
+</div>
+
 {% endblock %}