diff --git a/pom.xml b/pom.xml
index 44873d0b836a18e1dc452e3d7d1dc72bfaeba930..9ac628a38d8625d3ce239e91fa7991397fbae5ed 100644
--- a/pom.xml
+++ b/pom.xml
@@ -65,6 +65,7 @@
         <sortablejs.version>1.8.1</sortablejs.version>
         <mousetrap.version>1.6.1</mousetrap.version>
         <plotly.version>1.48.3</plotly.version>
+        <moment.version>2.24.0</moment.version>
         <webdrivermanager.version>2.2.1</webdrivermanager.version>
         <selenium.version>3.141.59</selenium.version>
 
@@ -195,6 +196,11 @@
             <artifactId>plotly.js</artifactId>
             <version>${plotly.version}</version>
         </dependency>
+        <dependency>
+            <groupId>org.webjars</groupId>
+            <artifactId>momentjs</artifactId>
+            <version>${moment.version}</version>
+        </dependency>
 
         <!-- selenium -->
         <dependency>
diff --git a/src/main/resources/languages/_de.properties b/src/main/resources/languages/_de.properties
index ea30e4fbe238d72c9f269d65c36883c6e004b0ee..9763ddd2edf5d2ac0e3bfdde705db9c0d75bc197 100644
--- a/src/main/resources/languages/_de.properties
+++ b/src/main/resources/languages/_de.properties
@@ -349,6 +349,14 @@ chart.steps.second.label.end=Enddatum
 chart.steps.third.step=Schritt 3:
 chart.steps.third=Wende Filter an (optional)
 
+chart.quick.this.week=Diese Woche
+chart.quick.this.month=Diesen Monat
+chart.quick.this.year=Dieses Jahr
+
+chart.quick.last.week.days=Letzte 7 Tage
+chart.quick.last.month.days=Letzte 30 Tage
+chart.quick.last.year.days=Letzte 365 Tage
+
 chart.script.default=/* This list will be dynamically filled with all the transactions between\n \
 * the start and and date you select on the "Show Chart" page\n \
 * and filtered according to your specified filter.\n \
diff --git a/src/main/resources/languages/_en.properties b/src/main/resources/languages/_en.properties
index ae218ba7a4cad30dde56c5cf656d407daba4e92b..e23664365633409fd509c1c0c8c4601d4c7c10e7 100644
--- a/src/main/resources/languages/_en.properties
+++ b/src/main/resources/languages/_en.properties
@@ -348,6 +348,14 @@ chart.steps.second.label.end=End date
 chart.steps.third.step=Step 3:
 chart.steps.third=Apply filters (optional)
 
+chart.quick.this.week=This week
+chart.quick.this.month=This month
+chart.quick.this.year=This year
+
+chart.quick.last.week.days=Last 7 days
+chart.quick.last.month.days=Last 30 days
+chart.quick.last.year.days=Last 365 days
+
 chart.script.default=/* This list will be dynamically filled with all the transactions between\n \
 * the start and and date you select on the "Show Chart" page\n \
 * and filtered according to your specified filter.\n \
diff --git a/src/main/resources/static/css/charts.css b/src/main/resources/static/css/charts.css
new file mode 100644
index 0000000000000000000000000000000000000000..4351b0893f1cf0c76da890c77228e0721a677140
--- /dev/null
+++ b/src/main/resources/static/css/charts.css
@@ -0,0 +1,14 @@
+.step-name {
+    margin-left: 1em;
+}
+
+.quick-date {
+    color: #039be5;
+    text-align: center;
+    padding: 0 0 10px 0;
+}
+
+.quick-date:hover {
+    cursor: pointer;
+    text-decoration: underline #2E79B9;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/css/dark/charts.css b/src/main/resources/static/css/dark/charts.css
new file mode 100644
index 0000000000000000000000000000000000000000..4351b0893f1cf0c76da890c77228e0721a677140
--- /dev/null
+++ b/src/main/resources/static/css/dark/charts.css
@@ -0,0 +1,14 @@
+.step-name {
+    margin-left: 1em;
+}
+
+.quick-date {
+    color: #039be5;
+    text-align: center;
+    padding: 0 0 10px 0;
+}
+
+.quick-date:hover {
+    cursor: pointer;
+    text-decoration: underline #2E79B9;
+}
\ 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 ec82a98c7188e1ba83c23f959ccbb5ae99d9ab59..66d6a04481b71d924199ddc4debf9873216fd7e8 100644
--- a/src/main/resources/static/css/dark/style.css
+++ b/src/main/resources/static/css/dark/style.css
@@ -581,10 +581,6 @@ input[type="radio"]:not(:checked) + span::before, [type="radio"]:not(:checked) +
     margin-bottom: 20px;
 }
 
-.step-name {
-    margin-left: 1em;
-}
-
 .invisible {
     opacity: 0;
 }
diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 8d100ec79aea21fe52181d38497df3ce9746fd3a..aa697a2ae69733c1523343827f69d66126b1ceec 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css
@@ -503,10 +503,6 @@ input[type="radio"]:checked + span::after, [type="radio"].with-gap:checked + spa
     margin-bottom: 20px;
 }
 
-.step-name {
-    margin-left: 1em;
-}
-
 .invisible {
     opacity: 0;
 }
diff --git a/src/main/resources/static/js/charts.js b/src/main/resources/static/js/charts.js
index 82594404ac3b50bb836cde43e867e62104210b49..9f4035c9ac71425862e5aa632ff04ca3cc2cf56e 100644
--- a/src/main/resources/static/js/charts.js
+++ b/src/main/resources/static/js/charts.js
@@ -102,6 +102,11 @@ $( document ).ready(function() {
         resetFilter();
         applyFilter(modalFilter);
     });
+
+    $(".quick-date").click(function()
+    {
+        handleQuickDate(this, pickerStartDate, pickerEndDate);
+    });
 });
 
 function applyFilter(modal)
@@ -135,4 +140,49 @@ function resetFilter()
 {
     $("#filterSettings input[type=checkbox]").prop('checked', true);
     $("#filter-name").val('');
+}
+
+function handleQuickDate(element, pickerStartDate, pickerEndDate)
+{
+    var quickType = element.dataset.quick;
+    var startDate;
+    var endDate;
+
+    switch(quickType) {
+        case '0':
+            startDate = moment().startOf('isoWeek');
+            endDate = moment().endOf('isoWeek');
+            break;
+        case '1':
+            startDate = moment().startOf('month');
+            endDate = moment().endOf('month');
+            break;
+        case '2':
+            startDate = moment().startOf('year');
+            endDate = moment().endOf('year');
+            break;
+        case '3':
+            startDate = moment().subtract(7, 'days');
+            endDate = moment();
+            break;
+        case '4':
+            startDate = moment().subtract(30, 'days');
+            endDate = moment();
+            break;
+        case '5':
+            startDate = moment().subtract(365, 'days');
+            endDate = moment();
+            break;
+    }
+
+    setDateRange(startDate, endDate, pickerStartDate, pickerEndDate);
+}
+
+function setDateRange(startDate, endDate, pickerStartDate, pickerEndDate)
+{
+    pickerStartDate.setDate(startDate.toDate());
+    pickerStartDate.setInputValue();
+
+    pickerEndDate.setDate(endDate.toDate());
+    pickerEndDate.setInputValue();
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 4a6b699caffb143a80f688fb91a8ed04832c9fde..d307a78a16aed8525ed3bd0f277bebe01dcf5cfa 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -4,6 +4,7 @@
         <@header.header "BudgetMaster"/>
         <@header.style "datepicker"/>
         <@header.style "filter"/>
+        <@header.style "charts"/>
         <#import "/spring.ftl" as s>
     </head>
     <body class="budgetmaster-blue-light">
@@ -39,7 +40,7 @@
                                             <span class="step-name">${locale.getString("chart.steps.first")}</span>
                                         </div>
                                         <div class="collapsible-body">
-                                            <div class="row">
+                                            <div class="row no-margin-bottom">
                                                 <div class="input-field col s12 m12 l8 offset-l2 no-margin-top">
                                                     <select name="chartID">
                                                         <#list charts as chart>
@@ -64,7 +65,7 @@
                                             <span class="step-name">${locale.getString("chart.steps.second")}</span>
                                         </div>
                                         <div class="collapsible-body">
-                                            <div class="row">
+                                            <div class="row no-margin-bottom">
                                                 <div class="input-field col s6 m6 l4 offset-l2">
                                                     <#assign startDate = dateService.getLongDateString(chartSettings.getStartDate())/>
 
@@ -79,6 +80,24 @@
                                                     <label for="chart-datepicker-end">${locale.getString("chart.steps.second.label.end")}</label>
                                                 </div>
                                             </div>
+                                            <div class="row no-margin-bottom">
+                                                <div class="col s12 m12 l8 offset-l2 no-margin-top">
+                                                    <table class="no-border-table">
+                                                        <tr>
+                                                            <td class="quick-date" data-quick="0">${locale.getString("chart.quick.this.week")}</td>
+                                                            <td class="quick-date" data-quick="1">${locale.getString("chart.quick.this.month")}</td>
+                                                            <td class="quick-date" data-quick="2">${locale.getString("chart.quick.this.year")}</td>
+                                                        </tr>
+                                                        <tr>
+                                                            <td class="quick-date" data-quick="3">${locale.getString("chart.quick.last.week.days")}</td>
+                                                            <td class="quick-date" data-quick="4">${locale.getString("chart.quick.last.month.days")}</td>
+                                                            <td class="quick-date" data-quick="5">${locale.getString("chart.quick.last.year.days")}</td>
+                                                        </tr>
+                                                    </table>
+                                                </div>
+                                                <div class="col s12 m12 l8 offset-l2 no-margin-top quick-date-container">
+                                                </div>
+                                            </div>
 
                                             <script>
                                                 startDate = "${startDate}".split(".");
@@ -96,7 +115,7 @@
                                             <span class="step-name">${locale.getString("chart.steps.third")}</span>
                                         </div>
                                         <div class="collapsible-body">
-                                            <div class="row">
+                                            <div class="row no-margin-bottom">
                                                 <div class="col s12 m12 l8 offset-l2 no-margin-top center-align">
                                                     <@transactionsMacros.buttonFilter chartSettings.getFilterConfiguration().isActive()/>
                                                 </div>
@@ -138,6 +157,7 @@
         <#import "../helpers/scripts.ftl" as scripts>
         <@scripts.scripts/>
         <script src="<@s.url '/webjars/plotly/1.48.3/dist/plotly.min.js'/>"></script>
+        <script src="<@s.url '/webjars/momentjs/2.24.0/min/moment.min.js'/>"></script>
         <script src="<@s.url '/js/charts.js'/>"></script>
         <script src="<@s.url '/js/filter.js'/>"></script>