diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 31b18b9d2f0b224f998dc513509c13cd4367dda7..d3ea2db82e9cc690e76854db1ccdfe3633f8b913 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -51,49 +51,9 @@
<div class="container">
<div class="row">
- <div class="col s6 m4 l3 center-align">
- <div class="card chart-preview background-grey-dark">
- <div class="card-image">
- <img src="<@s.url '/images/charts/a.png'/>">
- </div>
- <div class="card-action bold">
- Incomes/Expenditures<br>by categories
- </div>
- </div>
- </div>
-
- <div class="col s6 m4 l3 center-align">
- <div class="card chart-preview background-grey-dark">
- <div class="card-image">
- <img src="<@s.url '/images/charts/b.png'/>">
- </div>
- <div class="card-action bold">
- Incomes/Expenditures<br>by month
- </div>
- </div>
- </div>
-
- <div class="col s6 m4 l3 center-align">
- <div class="card chart-preview background-grey-dark">
- <div class="card-image">
- <img src="<@s.url '/images/charts/c.png'/>">
- </div>
- <div class="card-action bold">
- Incomes/Expenditures<br>by year
- </div>
- </div>
- </div>
-
- <div class="col s6 m4 l3 center-align">
- <div class="card chart-preview background-grey-dark">
- <div class="card-image">
- <img src="<@s.url '/images/charts/a.png'/>">
- </div>
- <div class="card-action bold">
- Incomes/Expenditures<br>by month by categories
- </div>
- </div>
- </div>
+ <#list charts as chart>
+ <@chartPreview chart/>
+ </#list>
</div>
</div>
@@ -331,3 +291,16 @@
</#if>
</a>
</#macro>
+
+<#macro chartPreview chart>
+ <div class="col s6 m4 l3 center-align">
+ <div class="card chart-preview background-grey-dark">
+ <div class="card-image">
+ <img src="<@s.url '/images/charts/a.png'/>">
+ </div>
+ <div class="card-action bold">
+ ${chartFunctions.getChartName(chart)}
+ </div>
+ </div>
+ </div>
+</#macro>