diff --git a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
index 49db6e9e9fe19628667f7bb19c9cf4d03a5ffd97..7904249cbb17c4862371cd33f4f2f9abf19c18c7 100644
--- a/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
+++ b/src/main/java/de/deadlocker8/budgetmaster/charts/ChartController.java
@@ -28,6 +28,14 @@ public class ChartController extends BaseController
 		this.settingsService = settingsService;
 	}
 
+	@RequestMapping("/charts")
+	public String charts(Model model)
+	{
+		model.addAttribute("charts", chartService.getRepository().findAllByOrderByNameAsc());
+		model.addAttribute("settings", settingsService.getSettings());
+		return "charts/charts";
+	}
+
 	@RequestMapping("/charts/manage")
 	public String manage(Model model)
 	{
diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index 8792d9715c59a68e9e7d8683ddc20982c03c9018..b2e74e865d2577c22c21a175f652f6903d0e0a00 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -44,6 +44,7 @@ title.account.new=Neues Konto
 title.account.edit=Konto bearbeiten
 title.category.budgets=Verbrauch nach Kategorien
 title.filter=Filter
+title.charts=Diagramme
 title.chart.new=Neues Diagramm
 title.chart.edit=Diagramm bearbeiten
 
@@ -333,4 +334,10 @@ chart.new.label.name=Name
 chart.new.label.script=Script
 chart.new.info.default=Diese mitgeliefert Diagrammvorlage kann nicht �berschrieben werden, aber du kannst dir den Code ansehen.
 chart.type=Typ
-chart.actions=Aktionen
\ No newline at end of file
+chart.actions=Aktionen
+chart.show=Anzeigen
+
+chart.steps.first=Schritt 1: W�hle ein Diagramm
+chart.steps.first.label=Diagramm
+chart.steps.second=Schritt 2: W�hle eine Zeitspanne
+chart.steps.third=Schritt 3: Wende Filter an (optional)
\ No newline at end of file
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index aeae2ece8c2e82509c2642bf5731d04db1a6b7da..0fe85feb3674c346fa8d4982d100b229d53afef0 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -44,6 +44,7 @@ title.account.new=New Account
 title.account.edit=Edit Account
 title.category.budgets=Consumption by categories
 title.filter=Filter
+title.charts=Charts
 title.chart.new=New Chart
 title.chart.edit=Edit Chart
 
@@ -333,4 +334,10 @@ chart.new.label.name=Name
 chart.new.label.script=Script
 chart.new.info.default=This default chart can\'t be overwritten but you can have a look on how it's implemented.
 chart.type=Type
-chart.actions=Actions
\ No newline at end of file
+chart.actions=Actions
+chart.show=Show
+
+chart.steps.first=Step 1: Choose a chart
+chart.steps.first.label=Chart
+chart.steps.second=Step 2: Choose a date range
+chart.steps.third=Step 3: Apply filters (optional)
\ No newline at end of file
diff --git a/src/main/resources/static/css/dark/style.css b/src/main/resources/static/css/dark/style.css
index 0e9f302a2f9cf6d3b06d2d5111ec1ab98498cf77..66d6a04481b71d924199ddc4debf9873216fd7e8 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -298,6 +298,10 @@ textarea {
     margin-bottom: 0;
 }
 
+.no-margin-top {
+    margin-top: 0;
+}
+
 .no-margin {
     margin: 0 !important;
 }
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index a50e1b17c2ea1ddb2aefd9cbe0bdc51aebabf38f..aa697a2ae69733c1523343827f69d66126b1ceec 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -248,6 +248,10 @@ main {
     margin-bottom: 0;
 }
 
+.no-margin-top {
+    margin-top: 0;
+}
+
 .no-margin {
     margin: 0 !important;
 }
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
new file mode 100644
index 0000000000000000000000000000000000000000..e783c1d57d0acb3b9129b68fd823eb7306fc7581
--- /dev/null
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -0,0 +1,85 @@
+<html>
+    <head>
+        <#import "../helpers/header.ftl" as header>
+        <@header.header "BudgetMaster"/>
+        <#import "/spring.ftl" as s>
+    </head>
+    <body class="budgetmaster-blue-light">
+        <#import "../helpers/navbar.ftl" as navbar>
+        <@navbar.navbar "charts" settings/>
+
+        <#import "chartFunctions.ftl" as chartFunctions>
+
+        <main>
+            <div class="card main-card background-color">
+                <div class="container">
+                    <div class="section center-align">
+                        <div class="headline">${locale.getString("title.charts")}</div>
+                    </div>
+                </div>
+                <div class="container">
+                    <form name="ChartSettings" action="<@s.url '/charts/showChart'/>" method="post">
+                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+
+                        <div class="row no-margin-bottom">
+                            <div class="col s12 m12 l8 offset-l2">
+                                ${locale.getString("chart.steps.first")}
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="input-field col s12 m12 l8 offset-l2 no-margin-top">
+                                <select name="chart">
+                                    <#list charts as chart>
+                                        <#assign chartName=chartFunctions.getChartName(chart)>
+                                        <option value="${chart.getID()?c}">${chartName}</option>
+                                    </#list>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div class="row no-margin-bottom">
+                            <div class="col s12 m12 l8 offset-l2">
+                                ${locale.getString("chart.steps.second")}
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="input-field col s12 m12 l8 offset-l2 no-margin-top">
+                                <input id="chart-name" type="text" name="name" value="">
+                                <label for="chart-name">${locale.getString("chart.new.label.name")}</label>
+                            </div>
+                        </div>
+
+                        <div class="row no-margin-bottom">
+                            <div class="col s12 m12 l8 offset-l2">
+                                ${locale.getString("chart.steps.third")}
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="input-field col s12 m12 l8 offset-l2 no-margin-top">
+                                <input id="chart-name" type="text" name="name" value="">
+                                <label for="chart-name">${locale.getString("chart.new.label.name")}</label>
+                            </div>
+                        </div>
+
+                        <br>
+
+                        <#-- buttons -->
+                        <div class="hide-on-med-and-up">
+                            <div class="row center-align">
+                                <div class="col s12">
+                                    <button class="btn waves-effect waves-light budgetmaster-blue" type="submit" name="buttonSave">
+                                        <i class="material-icons left">show_chart</i>${locale.getString("chart.show")}
+                                    </button>
+                                </div>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </main>
+
+        <!-- Scripts-->
+        <#import "../helpers/scripts.ftl" as scripts>
+        <@scripts.scripts/>
+    </body>
+</html>
\ No newline at end of file