From fde8183dc444e560f0181456a0ab02f79c9a24a3 Mon Sep 17 00:00:00 2001
From: Robert Goldmann <deadlocker@gmx.de>
Date: Sun, 28 Feb 2021 18:46:46 +0100
Subject: [PATCH] #582 - use new content macro on every page

---
 src/main/resources/templates/about.ftl        |  59 ++--
 .../resources/templates/accounts/accounts.ftl |  11 +-
 .../templates/accounts/newAccount.ftl         |   5 +-
 .../templates/categories/categories.ftl       |  10 +-
 .../templates/categories/newCategory.ftl      | 114 +++----
 .../resources/templates/charts/charts.ftl     |  62 ++--
 .../resources/templates/charts/manage.ftl     |  75 ++---
 .../resources/templates/charts/newChart.ftl   |   5 +-
 src/main/resources/templates/firstUse.ftl     | 143 ++++-----
 src/main/resources/templates/hotkeys.ftl      |  34 +-
 src/main/resources/templates/index.ftl        |  60 ++--
 .../resources/templates/reports/reports.ftl   |   6 +-
 .../resources/templates/search/search.ftl     |  91 +++---
 .../resources/templates/settings/settings.ftl | 293 +++++++++---------
 .../templates/templates/newTemplate.ftl       |   5 +-
 .../templates/templates/templates.ftl         |  35 ++-
 .../transactions/newTransactionNormal.ftl     |  75 ++---
 .../transactions/newTransactionRepeating.ftl  |  95 +++---
 .../transactions/newTransactionTransfer.ftl   | 107 +++----
 .../templates/transactions/transactions.ftl   | 109 +++----
 20 files changed, 725 insertions(+), 669 deletions(-)

diff --git a/src/main/resources/templates/about.ftl b/src/main/resources/templates/about.ftl
index 62963f620..f1def31ad 100644
--- a/src/main/resources/templates/about.ftl
+++ b/src/main/resources/templates/about.ftl
@@ -16,36 +16,39 @@
                         <@header.logo "logo-huge" "responsive-img"/>
                     </div>
                 </div>
-                <div class="hide-on-small-only"><br><br></div>
-                <div class="row">
-                    <@cellKey locale.getString("about.version")/>
-                    <div class="col s8 m5 l5">
-                        ${build.getVersionName()} (${build.getVersionCode()})
 
-                        <a class="whatsNewLink" data-url="<@s.url '/about/whatsNewModal'/>">${locale.getString("about.version.whatsnew")}?</a>
-                        <div id="whatsNewModelContainerOnDemand"></div>
+                <@header.content>
+                    <div class="hide-on-small-only"><br><br></div>
+                    <div class="row">
+                        <@cellKey locale.getString("about.version")/>
+                        <div class="col s8 m5 l5">
+                            ${build.getVersionName()} (${build.getVersionCode()})
+
+                            <a class="whatsNewLink" data-url="<@s.url '/about/whatsNewModal'/>">${locale.getString("about.version.whatsnew")}?</a>
+                            <div id="whatsNewModelContainerOnDemand"></div>
+                        </div>
                     </div>
-                </div>
-                <div class="row">
-                    <@cellKey locale.getString("about.date")/>
-                    <div class="col s8 m5 l5">${build.getVersionDate()}</div>
-                </div>
-                <div class="row">
-                    <@cellKey locale.getString("about.author")/>
-                    <div class="col s8 m5 l5">${build.getAuthor()}</div>
-                </div>
-                <div class="row">
-                    <@cellKey locale.getString("about.roadmap")/>
-                    <div class="col s8 m5 l5"><a target="_blank" href="${locale.getString("roadmap.url")}">${locale.getString("about.roadmap.link")}</a></div>
-                </div>
-                <div class="row">
-                    <@cellKey locale.getString("about.sourcecode")/>
-                    <div class="col s8 m5 l5 break-all"><a target="_blank" href="${locale.getString("github.url")}">${locale.getString("github.url")}</a></div>
-                </div>
-                <div class="row">
-                    <@cellKey locale.getString("about.credits")/>
-                    <div class="col s8 m5 l5">${locale.getString("credits")}</div>
-                </div>
+                    <div class="row">
+                        <@cellKey locale.getString("about.date")/>
+                        <div class="col s8 m5 l5">${build.getVersionDate()}</div>
+                    </div>
+                    <div class="row">
+                        <@cellKey locale.getString("about.author")/>
+                        <div class="col s8 m5 l5">${build.getAuthor()}</div>
+                    </div>
+                    <div class="row">
+                        <@cellKey locale.getString("about.roadmap")/>
+                        <div class="col s8 m5 l5"><a target="_blank" href="${locale.getString("roadmap.url")}">${locale.getString("about.roadmap.link")}</a></div>
+                    </div>
+                    <div class="row">
+                        <@cellKey locale.getString("about.sourcecode")/>
+                        <div class="col s8 m5 l5 break-all"><a target="_blank" href="${locale.getString("github.url")}">${locale.getString("github.url")}</a></div>
+                    </div>
+                    <div class="row">
+                        <@cellKey locale.getString("about.credits")/>
+                        <div class="col s8 m5 l5">${locale.getString("credits")}</div>
+                    </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/accounts/accounts.ftl b/src/main/resources/templates/accounts/accounts.ftl
index 449262113..2a9341406 100644
--- a/src/main/resources/templates/accounts/accounts.ftl
+++ b/src/main/resources/templates/accounts/accounts.ftl
@@ -16,10 +16,12 @@
                         <div class="headline"><i class="material-icons">account_balance</i> ${locale.getString("menu.accounts")}</div>
                     </div>
                 </div>
-                <br>
-                <div class="center-align"><@header.buttonLink url='/accounts/newAccount' icon='add' localizationKey='title.account.new' id='button-new-account'/></div>
-                <br>
-                <div class="container account-container">
+
+                <@header.content>
+                    <br>
+                    <div class="center-align"><@header.buttonLink url='/accounts/newAccount' icon='add' localizationKey='title.account.new' id='button-new-account'/></div>
+                    <br>
+                    <div class="container account-container">
                     <table class="bordered">
                         <#list accounts as account>
                             <#if (account.getType().name() == "CUSTOM")>
@@ -52,6 +54,7 @@
                         <div class="headline center-align">${locale.getString("placeholder")}</div>
                     </#if>
                 </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/accounts/newAccount.ftl b/src/main/resources/templates/accounts/newAccount.ftl
index 7263e7bfc..f4dab542b 100644
--- a/src/main/resources/templates/accounts/newAccount.ftl
+++ b/src/main/resources/templates/accounts/newAccount.ftl
@@ -23,7 +23,9 @@
                         <div class="headline">${title}</div>
                     </div>
                 </div>
-                <div class="container">
+
+                <@header.content>
+                    <div class="container">
                     <#import "../helpers/validation.ftl" as validation>
                     <form name="NewAccount" action="<@s.url '/accounts/newAccount'/>" method="post">
                         <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
@@ -66,6 +68,7 @@
                         </div>
                     </form>
                 </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/categories/categories.ftl b/src/main/resources/templates/categories/categories.ftl
index 6f6d226d8..0687a6a60 100644
--- a/src/main/resources/templates/categories/categories.ftl
+++ b/src/main/resources/templates/categories/categories.ftl
@@ -22,11 +22,12 @@
                     </div>
                 </div>
 
-                <br>
-                <div class="center-align"><@header.buttonLink url='/categories/newCategory' icon='add' localizationKey='title.category.new'/></div>
-                <br>
+                <@header.content>
+                    <br>
+                    <div class="center-align"><@header.buttonLink url='/categories/newCategory' icon='add' localizationKey='title.category.new'/></div>
+                    <br>
 
-                <div class="container">
+                    <div class="container">
                     <table class="bordered">
                         <thead>
                             <tr>
@@ -56,6 +57,7 @@
                         <div class="headline center-align">${locale.getString("placeholder")}</div>
                     </#if>
                 </div>
+                </@header.content>
             </div>
 
             <#if currentCategory??>
diff --git a/src/main/resources/templates/categories/newCategory.ftl b/src/main/resources/templates/categories/newCategory.ftl
index 5ff60344f..f4b7f8b64 100644
--- a/src/main/resources/templates/categories/newCategory.ftl
+++ b/src/main/resources/templates/categories/newCategory.ftl
@@ -28,76 +28,80 @@
                         <div class="headline">${title}</div>
                     </div>
                 </div>
-                <div class="container">
-                    <#import "../helpers/validation.ftl" as validation>
-                    <form name="NewCategory" action="<@s.url '/categories/newCategory'/>" method="post">
-                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
-                        <input type="hidden" name="ID" value="<#if category.getID()??>${category.getID()?c}</#if>">
-                        <input type="hidden" name="type" value="<#if category.getType()??>${category.getType()}</#if>">
 
-                        <#-- name -->
-                        <div class="row">
-                            <div class="input-field col s12 m12 l8 offset-l2">
-                                <#assign categoryName=categoriesFunctions.getCategoryName(category)>
-                                <#assign isNameEditingForbidden=category.getType()?? && (category.getType().name() == "NONE" || category.getType().name() == "REST")>
+                <@header.content>
+
+                    <div class="container">
+                        <#import "../helpers/validation.ftl" as validation>
+                        <form name="NewCategory" action="<@s.url '/categories/newCategory'/>" method="post">
+                            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+                            <input type="hidden" name="ID" value="<#if category.getID()??>${category.getID()?c}</#if>">
+                            <input type="hidden" name="type" value="<#if category.getType()??>${category.getType()}</#if>">
+
+                            <#-- name -->
+                            <div class="row">
+                                <div class="input-field col s12 m12 l8 offset-l2">
+                                    <#assign categoryName=categoriesFunctions.getCategoryName(category)>
+                                    <#assign isNameEditingForbidden=category.getType()?? && (category.getType().name() == "NONE" || category.getType().name() == "REST")>
 
-                                <i class="material-icons prefix">edit</i>
-                                <input id="category-name" type="text" name="name" <@validation.validation "name"/> value="${categoryName}" <#if isNameEditingForbidden>disabled</#if>>
-                                <label for="category-name">${locale.getString("category.new.label.name")}</label>
+                                    <i class="material-icons prefix">edit</i>
+                                    <input id="category-name" type="text" name="name" <@validation.validation "name"/> value="${categoryName}" <#if isNameEditingForbidden>disabled</#if>>
+                                    <label for="category-name">${locale.getString("category.new.label.name")}</label>
+                                </div>
                             </div>
-                        </div>
 
-                        <#-- color -->
-                        <input type="hidden" name="color" id="categoryColor" value="${category.getColor()}">
-                        <#list categoryColors as color>
-                            <#if color?counter == 1 || color?counter == 7 || color?counter == 13>
-                                <div class="row">
-                                    <div class="col s2 m1 offset-m3 no-padding">
+                            <#-- color -->
+                            <input type="hidden" name="color" id="categoryColor" value="${category.getColor()}">
+                            <#list categoryColors as color>
+                                <#if color?counter == 1 || color?counter == 7 || color?counter == 13>
+                                    <div class="row">
+                                        <div class="col s2 m1 offset-m3 no-padding">
+                                            <div class="category-color <#if color == category.getColor()>category-color-active</#if>" style="background-color: ${color}"></div>
+                                        </div>
+                                <#else>
+                                    <div class="col s2 m1 no-padding">
                                         <div class="category-color <#if color == category.getColor()>category-color-active</#if>" style="background-color: ${color}"></div>
                                     </div>
-                            <#else>
-                                <div class="col s2 m1 no-padding">
-                                    <div class="category-color <#if color == category.getColor()>category-color-active</#if>" style="background-color: ${color}"></div>
-                                </div>
-                            </#if>
+                                </#if>
 
-                            <#if color?counter == 6 || color?counter == 12>
-                                </div>
-                            </#if>
-                        </#list>
-                            <#--add custom color picker-->
-                            <div class="col s2 m1 no-padding">
-                                <div id="customColorPickerContainer" class="category-color <#if customColor == category.getColor()>category-color-active</#if>" style="background-color: ${customColor}">
-                                    <input type="text" id="customColorPicker" value="${customColor}" placeholder="+"/>
+                                <#if color?counter == 6 || color?counter == 12>
+                                    </div>
+                                </#if>
+                            </#list>
+                                <#--add custom color picker-->
+                                <div class="col s2 m1 no-padding">
+                                    <div id="customColorPickerContainer" class="category-color <#if customColor == category.getColor()>category-color-active</#if>" style="background-color: ${customColor}">
+                                        <input type="text" id="customColorPicker" value="${customColor}" placeholder="+"/>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
-                        <br>
-
-                        <#-- buttons -->
-                        <div class="row hide-on-small-only">
-                            <div class="col s6 right-align">
-                                <@header.buttonLink url='/categories' icon='clear' localizationKey='cancel'/>
-                            </div>
+                            <br>
 
-                            <div class="col s6 left-align">
-                                <@header.buttonSubmit name='action' icon='save' localizationKey='save'/>
-                            </div>
-                        </div>
-                        <div class="hide-on-med-and-up">
-                            <div class="row center-align">
-                                <div class="col s12">
+                            <#-- buttons -->
+                            <div class="row hide-on-small-only">
+                                <div class="col s6 right-align">
                                     <@header.buttonLink url='/categories' icon='clear' localizationKey='cancel'/>
                                 </div>
-                            </div>
-                            <div class="row center-align">
-                                <div class="col s12">
+
+                                <div class="col s6 left-align">
                                     <@header.buttonSubmit name='action' icon='save' localizationKey='save'/>
                                 </div>
                             </div>
-                        </div>
-                    </form>
-                </div>
+                            <div class="hide-on-med-and-up">
+                                <div class="row center-align">
+                                    <div class="col s12">
+                                        <@header.buttonLink url='/categories' icon='clear' localizationKey='cancel'/>
+                                    </div>
+                                </div>
+                                <div class="row center-align">
+                                    <div class="col s12">
+                                        <@header.buttonSubmit name='action' icon='save' localizationKey='save'/>
+                                    </div>
+                                </div>
+                            </div>
+                        </form>
+                    </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/charts/charts.ftl b/src/main/resources/templates/charts/charts.ftl
index 867c3727e..85ccd72fa 100644
--- a/src/main/resources/templates/charts/charts.ftl
+++ b/src/main/resources/templates/charts/charts.ftl
@@ -25,45 +25,47 @@
                     </div>
                 </div>
 
-                <br>
-                <div class="center-align"><@header.buttonLink url='/charts/manage' icon='edit' localizationKey='home.menu.charts.action.manage'/></div>
-                <br>
+                <@header.content>
+                    <br>
+                    <div class="center-align"><@header.buttonLink url='/charts/manage' icon='edit' localizationKey='home.menu.charts.action.manage'/></div>
+                    <br>
 
-                <div class="container">
-                    <form name="NewChartSettings" action="<@s.url '/charts'/>" method="post">
-                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+                    <div class="container">
+                        <form name="NewChartSettings" action="<@s.url '/charts'/>" method="post">
+                            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
 
-                        <div class="row">
-                            <div class="col s12">
-                                <ul class="collapsible z-depth-2">
-                                    <@stepOne/>
+                            <div class="row">
+                                <div class="col s12">
+                                    <ul class="collapsible z-depth-2">
+                                        <@stepOne/>
 
-                                    <@stepTwo/>
+                                        <@stepTwo/>
 
-                                    <@stepThree/>
-                                </ul>
+                                        <@stepThree/>
+                                    </ul>
+                                </div>
                             </div>
-                        </div>
 
-                        <@filterMacros.filterModalCharts chartSettings.getFilterConfiguration()/>
+                            <@filterMacros.filterModalCharts chartSettings.getFilterConfiguration()/>
 
-                        <#-- buttons -->
-                        <div class="row center-align">
-                            <div class="col s12">
-                                <button class="btn waves-effect waves-light background-blue" type="submit"
-                                        name="buttonSave">
-                                    <i class="material-icons left">show_chart</i>${locale.getString("chart.show")}
-                                </button>
+                            <#-- buttons -->
+                            <div class="row center-align">
+                                <div class="col s12">
+                                    <button class="btn waves-effect waves-light background-blue" type="submit"
+                                            name="buttonSave">
+                                        <i class="material-icons left">show_chart</i>${locale.getString("chart.show")}
+                                    </button>
+                                </div>
                             </div>
-                        </div>
-                    </form>
-                </div>
+                        </form>
+                    </div>
 
-                <div class="container-chart">
-                    <#if containerID??>
-                        <div id="${containerID}" class="chart-canvas"></div>
-                    </#if>
-                </div>
+                    <div class="container-chart">
+                        <#if containerID??>
+                            <div id="${containerID}" class="chart-canvas"></div>
+                        </#if>
+                    </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/charts/manage.ftl b/src/main/resources/templates/charts/manage.ftl
index e3171410a..7f8a295d3 100644
--- a/src/main/resources/templates/charts/manage.ftl
+++ b/src/main/resources/templates/charts/manage.ftl
@@ -18,42 +18,45 @@
                         <div class="headline">${locale.getString("menu.charts")}</div>
                     </div>
                 </div>
-                <br>
-                <@chartFunctions.buttons/>
-                <br>
-                <div class="container">
-                    <table class="bordered">
-                        <thead>
-                            <tr>
-                                <th>${locale.getString("chart.new.label.name")}</th>
-                                <th>${locale.getString("chart.type")}</th>
-                                <th>${locale.getString("chart.actions")}</th>
-                            </tr>
-                        </thead>
-                        <#list charts as chart>
-                            <#assign chartName=chartFunctions.getChartName(chart)>
-                            <tr>
-                                <td>${chartName}</td>
-                                <td>
-                                    <#if chart.getType().name() == "DEFAULT">
-                                        <a class="no-padding text-default"><i class="material-icons left">lock</i></a>
-                                    <#else>
-                                        <a class="no-padding text-default"><i class="material-icons left">person</i></a>
-                                    </#if>
-                                </td>
-                                <td>
-                                    <@header.buttonFlat url='/charts/' + chart.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default"/>
-                                    <#if (chart.getType().name() == "CUSTOM")>
-                                        <@header.buttonFlat url='/charts/' + chart.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default"/>
-                                    </#if>
-                                </td>
-                            </tr>
-                        </#list>
-                    </table>
-                    <#if charts?size == 0>
-                        <div class="headline center-align">${locale.getString("placeholder")}</div>
-                    </#if>
-                </div>
+
+                <@header.content>
+                    <br>
+                    <@chartFunctions.buttons/>
+                    <br>
+                    <div class="container">
+                        <table class="bordered">
+                            <thead>
+                                <tr>
+                                    <th>${locale.getString("chart.new.label.name")}</th>
+                                    <th>${locale.getString("chart.type")}</th>
+                                    <th>${locale.getString("chart.actions")}</th>
+                                </tr>
+                            </thead>
+                            <#list charts as chart>
+                                <#assign chartName=chartFunctions.getChartName(chart)>
+                                <tr>
+                                    <td>${chartName}</td>
+                                    <td>
+                                        <#if chart.getType().name() == "DEFAULT">
+                                            <a class="no-padding text-default"><i class="material-icons left">lock</i></a>
+                                        <#else>
+                                            <a class="no-padding text-default"><i class="material-icons left">person</i></a>
+                                        </#if>
+                                    </td>
+                                    <td>
+                                        <@header.buttonFlat url='/charts/' + chart.ID?c + '/edit' icon='edit' localizationKey='' classes="no-padding text-default"/>
+                                        <#if (chart.getType().name() == "CUSTOM")>
+                                            <@header.buttonFlat url='/charts/' + chart.ID?c + '/requestDelete' icon='delete' localizationKey='' classes="no-padding text-default"/>
+                                        </#if>
+                                    </td>
+                                </tr>
+                            </#list>
+                        </table>
+                        <#if charts?size == 0>
+                            <div class="headline center-align">${locale.getString("placeholder")}</div>
+                        </#if>
+                    </div>
+                </@header.content>
             </div>
 
             <#if currentChart??>
diff --git a/src/main/resources/templates/charts/newChart.ftl b/src/main/resources/templates/charts/newChart.ftl
index 236f1be4e..e80874102 100644
--- a/src/main/resources/templates/charts/newChart.ftl
+++ b/src/main/resources/templates/charts/newChart.ftl
@@ -27,7 +27,9 @@
                         <div class="headline">${title}</div>
                     </div>
                 </div>
-                <div class="container">
+
+                <@header.content>
+                    <div class="container">
                     <#import "../helpers/validation.ftl" as validation>
                     <form name="NewChart" action="<@s.url '/charts/newChart'/>" method="post">
                         <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
@@ -93,6 +95,7 @@
                         </div>
                     </form>
                 </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/firstUse.ftl b/src/main/resources/templates/firstUse.ftl
index f0c9a7143..cc528a760 100644
--- a/src/main/resources/templates/firstUse.ftl
+++ b/src/main/resources/templates/firstUse.ftl
@@ -18,92 +18,95 @@
                         <div class="headline"><i class="fas fa-graduation-cap"></i> ${locale.getString("home.first.use")}</div>
                     </div>
                 </div>
-                <br>
 
-                <div class="container">
-                    <div class="container center-align">
-                        <div class="row left-align">
-                            <div class="col s12">
-                                <@indexFunctions.stepContent headline="home.first.use.step.1.headline" contentText="home.first.use.step.1.contentText" actionUrl="/accounts" actionName="home.menu.accounts.action.manage"/>
+                <@header.content>
+                    <br>
+
+                    <div class="container">
+                        <div class="container center-align">
+                            <div class="row left-align">
+                                <div class="col s12">
+                                    <@indexFunctions.stepContent headline="home.first.use.step.1.headline" contentText="home.first.use.step.1.contentText" actionUrl="/accounts" actionName="home.menu.accounts.action.manage"/>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
+                            <hr>
 
-                        <div class="row left-align">
-                            <div class="col s12">
-                                <@indexFunctions.stepContent headline="home.first.use.step.2.headline" contentText="home.first.use.step.2.contentText" actionUrl="/categories" actionName="home.menu.categories.action.manage"/>
+                            <div class="row left-align">
+                                <div class="col s12">
+                                    <@indexFunctions.stepContent headline="home.first.use.step.2.headline" contentText="home.first.use.step.2.contentText" actionUrl="/categories" actionName="home.menu.categories.action.manage"/>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
+                            <hr>
 
-                        <div class="row left-align">
-                            <div class="col s12">
-                                <@indexFunctions.stepContent headline="home.first.use.step.3.headline" contentText="home.first.use.step.3.contentText" actionUrl="/transactions/newTransaction/normal" actionName="home.menu.transactions.action.new">
-                                    <ul class="browser-default">
-                                        <li>${locale.getString("home.first.use.step.3.sub.1")}</li>
-                                        <li>${locale.getString("home.first.use.step.3.sub.2")}</li>
-                                        <li>${locale.getString("home.first.use.step.3.sub.3")}</li>
-                                        <li>${locale.getString("home.first.use.step.3.sub.4")}</li>
-                                        <li>${locale.getString("home.first.use.step.3.sub.5")}</li>
-                                        <li>${locale.getString("home.first.use.step.3.sub.6")}</li>
-                                    </ul>
-                                </@indexFunctions.stepContent>
+                            <div class="row left-align">
+                                <div class="col s12">
+                                    <@indexFunctions.stepContent headline="home.first.use.step.3.headline" contentText="home.first.use.step.3.contentText" actionUrl="/transactions/newTransaction/normal" actionName="home.menu.transactions.action.new">
+                                        <ul class="browser-default">
+                                            <li>${locale.getString("home.first.use.step.3.sub.1")}</li>
+                                            <li>${locale.getString("home.first.use.step.3.sub.2")}</li>
+                                            <li>${locale.getString("home.first.use.step.3.sub.3")}</li>
+                                            <li>${locale.getString("home.first.use.step.3.sub.4")}</li>
+                                            <li>${locale.getString("home.first.use.step.3.sub.5")}</li>
+                                            <li>${locale.getString("home.first.use.step.3.sub.6")}</li>
+                                        </ul>
+                                    </@indexFunctions.stepContent>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
+                            <hr>
 
-                        <div class="row left-align">
-                            <div class="col s12">
-                                <@indexFunctions.stepContent headline="home.first.use.step.4.headline" contentText="home.menu.transactions" actionUrl="/transactions" actionName="home.menu.transactions.action.manage">
-                                    <br>
-                                    ${locale.getString("home.first.use.step.4.contentText")}
-                                    <ul class="browser-default">
-                                        <li>${locale.getString("home.first.use.step.4.sub.1")}</li>
-                                        <li>${locale.getString("home.first.use.step.4.sub.2")}</li>
-                                        <li>${locale.getString("home.first.use.step.4.sub.3")}</li>
-                                    </ul>
-                                </@indexFunctions.stepContent>
+                            <div class="row left-align">
+                                <div class="col s12">
+                                    <@indexFunctions.stepContent headline="home.first.use.step.4.headline" contentText="home.menu.transactions" actionUrl="/transactions" actionName="home.menu.transactions.action.manage">
+                                        <br>
+                                        ${locale.getString("home.first.use.step.4.contentText")}
+                                        <ul class="browser-default">
+                                            <li>${locale.getString("home.first.use.step.4.sub.1")}</li>
+                                            <li>${locale.getString("home.first.use.step.4.sub.2")}</li>
+                                            <li>${locale.getString("home.first.use.step.4.sub.3")}</li>
+                                        </ul>
+                                    </@indexFunctions.stepContent>
+                                </div>
                             </div>
-                        </div>
-                        <hr>
+                            <hr>
 
-                        <div class="row left-align">
-                            <div class="col s12">
-                                <@indexFunctions.stepContent headline="home.first.use.step.5.headline" contentText="home.first.use.step.5.contentText" actionUrl="" actionName="">
-                                    <h5>${locale.getString("menu.templates")}</h5>
-                                    <p>
-                                        ${locale.getString("home.first.use.step.5.sub.1")}
-                                    </p>
-                                    <p>
-                                        <@indexFunctions.action url="/templates" name="home.menu.templates.action.manage"/>
-                                    </p>
+                            <div class="row left-align">
+                                <div class="col s12">
+                                    <@indexFunctions.stepContent headline="home.first.use.step.5.headline" contentText="home.first.use.step.5.contentText" actionUrl="" actionName="">
+                                        <h5>${locale.getString("menu.templates")}</h5>
+                                        <p>
+                                            ${locale.getString("home.first.use.step.5.sub.1")}
+                                        </p>
+                                        <p>
+                                            <@indexFunctions.action url="/templates" name="home.menu.templates.action.manage"/>
+                                        </p>
 
-                                    <h5>${locale.getString("menu.charts")}</h5>
-                                    <p>
-                                        ${locale.getString("home.first.use.step.5.sub.2")}
-                                    </p>
-                                    <p>
-                                        <@indexFunctions.action url="/charts/manage" name="home.menu.charts.action.manage"/>
-                                    </p>
+                                        <h5>${locale.getString("menu.charts")}</h5>
+                                        <p>
+                                            ${locale.getString("home.first.use.step.5.sub.2")}
+                                        </p>
+                                        <p>
+                                            <@indexFunctions.action url="/charts/manage" name="home.menu.charts.action.manage"/>
+                                        </p>
 
-                                    <h5>${locale.getString("menu.reports")}</h5>
-                                    <p>
-                                        ${locale.getString("home.first.use.step.5.sub.3")}
-                                    </p>
-                                    <p>
-                                        <@indexFunctions.action url="/reports" name="home.menu.reports.action.new"/>
-                                    </p>
+                                        <h5>${locale.getString("menu.reports")}</h5>
+                                        <p>
+                                            ${locale.getString("home.first.use.step.5.sub.3")}
+                                        </p>
+                                        <p>
+                                            <@indexFunctions.action url="/reports" name="home.menu.reports.action.new"/>
+                                        </p>
 
-                                    <h5>${locale.getString("home.first.use.step.5.sub.4")}</h5>
+                                        <h5>${locale.getString("home.first.use.step.5.sub.4")}</h5>
 
-                                    <p class="center-align">
-                                        <@header.buttonLink url='/' icon='home' localizationKey='home.first.use.home'/>
-                                    </p>
-                                </@indexFunctions.stepContent>
+                                        <p class="center-align">
+                                            <@header.buttonLink url='/' icon='home' localizationKey='home.first.use.home'/>
+                                        </p>
+                                    </@indexFunctions.stepContent>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/hotkeys.ftl b/src/main/resources/templates/hotkeys.ftl
index 66bf58716..afba98b73 100644
--- a/src/main/resources/templates/hotkeys.ftl
+++ b/src/main/resources/templates/hotkeys.ftl
@@ -17,29 +17,31 @@
                     </div>
                 </div>
 
-                <br>
+                <@header.content>
+                    <br>
 
-                <div class="row">
-                    <div class="col s12 headline center-align">${locale.getString("hotkeys.general")}</div>
-                </div>
-
-                <#list hotkeysGeneral as hotKey>
                     <div class="row">
-                        <@cellKeyWithModifier hotKey.getModifierLocalized()!'' hotKey.getKeyLocalized()/>
-                        <div class="col s8 m5 l5">${hotKey.getTextLocalized()}</div>
+                        <div class="col s12 headline center-align">${locale.getString("hotkeys.general")}</div>
                     </div>
-                </#list>
 
-                <div class="row">
-                    <div class="col s12 headline center-align">${locale.getString("hotkeys.global.datepicker")}</div>
-                </div>
+                    <#list hotkeysGeneral as hotKey>
+                        <div class="row">
+                            <@cellKeyWithModifier hotKey.getModifierLocalized()!'' hotKey.getKeyLocalized()/>
+                            <div class="col s8 m5 l5">${hotKey.getTextLocalized()}</div>
+                        </div>
+                    </#list>
 
-                <#list hotkeysGlobalDatePicker as hotKey>
                     <div class="row">
-                        <@cellKeyWithModifier hotKey.getModifierLocalized()!'' hotKey.getKeyLocalized()/>
-                        <div class="col s8 m5 l5">${hotKey.getTextLocalized()}</div>
+                        <div class="col s12 headline center-align">${locale.getString("hotkeys.global.datepicker")}</div>
                     </div>
-                </#list>
+
+                    <#list hotkeysGlobalDatePicker as hotKey>
+                        <div class="row">
+                            <@cellKeyWithModifier hotKey.getModifierLocalized()!'' hotKey.getKeyLocalized()/>
+                            <div class="col s8 m5 l5">${hotKey.getTextLocalized()}</div>
+                        </div>
+                    </#list>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/index.ftl b/src/main/resources/templates/index.ftl
index cdaa57927..c40a104eb 100644
--- a/src/main/resources/templates/index.ftl
+++ b/src/main/resources/templates/index.ftl
@@ -23,42 +23,44 @@
                         </div>
                     </div>
 
-                    <#if settings.getShowFirstUseBanner()>
-                        <@indexFunctions.firstUseBanner/>
-                    </#if>
+                    <@header.content>
+                        <#if settings.getShowFirstUseBanner()>
+                            <@indexFunctions.firstUseBanner/>
+                        </#if>
 
-                    <div class="hide-on-small-only"><br></div>
+                        <div class="hide-on-small-only"><br></div>
 
-                    <div class="row home-menu-flex">
-                        <@indexFunctions.homeEntry url="/accounts" icon="account_balance" iconColor="" headlineText="menu.accounts" bodyText="home.menu.accounts">
-                            <@indexFunctions.action url="/accounts" name="home.menu.accounts.action.manage"/>
-                            <@indexFunctions.action url="/accounts/newAccount" name="home.menu.accounts.action.new"/>
-                        </@indexFunctions.homeEntry>
+                        <div class="row home-menu-flex">
+                            <@indexFunctions.homeEntry url="/accounts" icon="account_balance" iconColor="" headlineText="menu.accounts" bodyText="home.menu.accounts">
+                                <@indexFunctions.action url="/accounts" name="home.menu.accounts.action.manage"/>
+                                <@indexFunctions.action url="/accounts/newAccount" name="home.menu.accounts.action.new"/>
+                            </@indexFunctions.homeEntry>
 
-                        <@indexFunctions.homeEntry url="/transactions" icon="list" iconColor="text-blue-baby" headlineText="menu.transactions" bodyText="home.menu.transactions">
-                            <@indexFunctions.action url="/transactions" name="home.menu.transactions.action.manage"/>
-                            <@indexFunctions.action url="/transactions/newTransaction/normal" name="home.menu.transactions.action.new"/>
-                        </@indexFunctions.homeEntry>
+                            <@indexFunctions.homeEntry url="/transactions" icon="list" iconColor="text-blue-baby" headlineText="menu.transactions" bodyText="home.menu.transactions">
+                                <@indexFunctions.action url="/transactions" name="home.menu.transactions.action.manage"/>
+                                <@indexFunctions.action url="/transactions/newTransaction/normal" name="home.menu.transactions.action.new"/>
+                            </@indexFunctions.homeEntry>
 
-                        <@indexFunctions.homeEntry url="/templates" icon="file_copy" iconColor="text-orange-dark" headlineText="menu.templates" bodyText="home.menu.templates">
-                            <@indexFunctions.action url="/templates" name="home.menu.templates.action.manage"/>
-                        </@indexFunctions.homeEntry>
+                            <@indexFunctions.homeEntry url="/templates" icon="file_copy" iconColor="text-orange-dark" headlineText="menu.templates" bodyText="home.menu.templates">
+                                <@indexFunctions.action url="/templates" name="home.menu.templates.action.manage"/>
+                            </@indexFunctions.homeEntry>
 
-                        <@indexFunctions.homeEntry url="/charts" icon="show_chart" iconColor="text-purple" headlineText="menu.charts" bodyText="home.menu.charts">
-                            <@indexFunctions.action url="/charts/manage" name="home.menu.charts.action.manage"/>
-                            <br>
-                            <@indexFunctions.action url="/charts" name="home.menu.charts.action.show"/>
-                        </@indexFunctions.homeEntry>
+                            <@indexFunctions.homeEntry url="/charts" icon="show_chart" iconColor="text-purple" headlineText="menu.charts" bodyText="home.menu.charts">
+                                <@indexFunctions.action url="/charts/manage" name="home.menu.charts.action.manage"/>
+                                <br>
+                                <@indexFunctions.action url="/charts" name="home.menu.charts.action.show"/>
+                            </@indexFunctions.homeEntry>
 
-                        <@indexFunctions.homeEntry url="/reports" icon="description" iconColor="text-green" headlineText="menu.reports" bodyText="home.menu.reports">
-                            <@indexFunctions.action url="/reports" name="home.menu.reports.action.new"/>
-                        </@indexFunctions.homeEntry>
+                            <@indexFunctions.homeEntry url="/reports" icon="description" iconColor="text-green" headlineText="menu.reports" bodyText="home.menu.reports">
+                                <@indexFunctions.action url="/reports" name="home.menu.reports.action.new"/>
+                            </@indexFunctions.homeEntry>
 
-                        <@indexFunctions.homeEntry url="/categories" icon="label" iconColor="text-orange" headlineText="menu.categories" bodyText="home.menu.categories">
-                            <@indexFunctions.action url="/categories" name="home.menu.categories.action.manage"/>
-                            <@indexFunctions.action url="/categories/newCategory" name="home.menu.categories.action.new"/>
-                        </@indexFunctions.homeEntry>
-                    </div>
+                            <@indexFunctions.homeEntry url="/categories" icon="label" iconColor="text-orange" headlineText="menu.categories" bodyText="home.menu.categories">
+                                <@indexFunctions.action url="/categories" name="home.menu.categories.action.manage"/>
+                                <@indexFunctions.action url="/categories/newCategory" name="home.menu.categories.action.new"/>
+                            </@indexFunctions.homeEntry>
+                        </div>
+                    </@header.content>
                 </div>
             </div>
         </main>
diff --git a/src/main/resources/templates/reports/reports.ftl b/src/main/resources/templates/reports/reports.ftl
index 5cdfccab3..2eece9074 100644
--- a/src/main/resources/templates/reports/reports.ftl
+++ b/src/main/resources/templates/reports/reports.ftl
@@ -20,9 +20,10 @@
                 <#import "../helpers/globalDatePicker.ftl" as datePicker>
                 <@datePicker.datePicker currentDate "/reports"/>
 
-                <br>
+                <@header.content>
+                    <br>
 
-                <div class="container">
+                    <div class="container">
                     <form name="NewReportSettings" action="<@s.url '/reports/generate'/>" method="post" onsubmit="return validateForm()">
                         <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
                         <input type="hidden" name="ID" value="${reportSettings.getID()?c}"/>
@@ -102,6 +103,7 @@
                         </div>
                     </form>
                 </div>
+                </@header.content>
             </div>
 
             <@filterMacros.filterModal filterConfiguration/>
diff --git a/src/main/resources/templates/search/search.ftl b/src/main/resources/templates/search/search.ftl
index 0a9cee71d..117b61e20 100644
--- a/src/main/resources/templates/search/search.ftl
+++ b/src/main/resources/templates/search/search.ftl
@@ -22,60 +22,63 @@
                         <div class="headline">${locale.getString("menu.search.results", page.getTotalElements())}</div>
                     </div>
                 </div>
-                <form id="searchForm" action="<@s.url '/search'/>" method="get">
-                    <@searchMacros.searchTextAndButton search/>
-                    <@searchMacros.checkboxes search/>
-                    <input type="hidden" name="page" id="inputPageNumber" value="${page.getNumber()}"/>
-                </form>
 
-                <@searchMacros.pagination page/>
+                <@header.content>
+                    <form id="searchForm" action="<@s.url '/search'/>" method="get">
+                        <@searchMacros.searchTextAndButton search/>
+                        <@searchMacros.checkboxes search/>
+                        <input type="hidden" name="page" id="inputPageNumber" value="${page.getNumber()}"/>
+                    </form>
 
-                <div class="row search-container">
-                    <div class="col s12">
-                        <#list page.getContent() as transaction>
-                            <div class="card-panel search-result">
-                                <div class="hide-on-large-only">
-                                    <div class="row valign-wrapper">
-                                        <div class="col s3 center-align bold transaction-text">
-                                            ${dateService.getDateStringNormal(transaction.date)}
+                    <@searchMacros.pagination page/>
+
+                    <div class="row search-container">
+                        <div class="col s12">
+                            <#list page.getContent() as transaction>
+                                <div class="card-panel search-result">
+                                    <div class="hide-on-large-only">
+                                        <div class="row valign-wrapper">
+                                            <div class="col s3 center-align bold transaction-text">
+                                                ${dateService.getDateStringNormal(transaction.date)}
+                                            </div>
+                                            <@transactionsMacros.transactionType transaction/>
+                                            <@transactionsMacros.transactionAccount transaction/>
+                                            <@transactionsMacros.transactionLinks transaction/>
+                                        </div>
+                                        <div class="row valign-wrapper no-margin-bottom">
+                                            <@transactionsMacros.transactionCategory transaction "center-align"/>
+                                            <@transactionsMacros.transactionNameAndDescription transaction "s5"/>
+                                            <@transactionsMacros.transactionAmount transaction transaction.getAccount() "s4"/>
                                         </div>
-                                        <@transactionsMacros.transactionType transaction/>
-                                        <@transactionsMacros.transactionAccount transaction/>
-                                        <@transactionsMacros.transactionLinks transaction/>
-                                    </div>
-                                    <div class="row valign-wrapper no-margin-bottom">
-                                        <@transactionsMacros.transactionCategory transaction "center-align"/>
-                                        <@transactionsMacros.transactionNameAndDescription transaction "s5"/>
-                                        <@transactionsMacros.transactionAmount transaction transaction.getAccount() "s4"/>
                                     </div>
-                                </div>
-                                <div class="hide-on-med-and-down">
-                                    <div class="row valign-wrapper no-margin-bottom">
-                                        <div class="col l2 xl1 bold transaction-text transaction-line-height transaction-date">
-                                            ${dateService.getDateStringNormal(transaction.date)}
+                                    <div class="hide-on-med-and-down">
+                                        <div class="row valign-wrapper no-margin-bottom">
+                                            <div class="col l2 xl1 bold transaction-text transaction-line-height transaction-date">
+                                                ${dateService.getDateStringNormal(transaction.date)}
+                                            </div>
+                                            <@transactionsMacros.transactionCategory transaction "left-align"/>
+                                            <@transactionsMacros.transactionType transaction/>
+                                            <@transactionsMacros.transactionAccount transaction/>
+                                            <@transactionsMacros.transactionNameAndDescription transaction "l3 xl4"/>
+                                            <@transactionsMacros.transactionAmount transaction transaction.getAccount() "l2 xl2"/>
+                                            <@transactionsMacros.transactionLinks transaction/>
                                         </div>
-                                        <@transactionsMacros.transactionCategory transaction "left-align"/>
-                                        <@transactionsMacros.transactionType transaction/>
-                                        <@transactionsMacros.transactionAccount transaction/>
-                                        <@transactionsMacros.transactionNameAndDescription transaction "l3 xl4"/>
-                                        <@transactionsMacros.transactionAmount transaction transaction.getAccount() "l2 xl2"/>
-                                        <@transactionsMacros.transactionLinks transaction/>
                                     </div>
                                 </div>
-                            </div>
-                        </#list>
+                            </#list>
 
-                        <#-- placeholder -->
-                        <#if page.getContent()?size == 0>
-                            <div class="row">
-                                <div class="col s12">
-                                    <br><br>
-                                    <div class="headline-advice center-align">${locale.getString("search.placeholder")}</div>
+                            <#-- placeholder -->
+                            <#if page.getContent()?size == 0>
+                                <div class="row">
+                                    <div class="col s12">
+                                        <br><br>
+                                        <div class="headline-advice center-align">${locale.getString("search.placeholder")}</div>
+                                    </div>
                                 </div>
-                            </div>
-                        </#if>
+                            </#if>
+                        </div>
                     </div>
-                </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/settings/settings.ftl b/src/main/resources/templates/settings/settings.ftl
index c31be6da5..d13bd605a 100644
--- a/src/main/resources/templates/settings/settings.ftl
+++ b/src/main/resources/templates/settings/settings.ftl
@@ -19,188 +19,191 @@
                         <div class="headline"><i class="material-icons">settings</i> ${locale.getString("menu.settings")}</div>
                     </div>
                 </div>
-                <div class="container">
-                    <#import "../helpers/validation.ftl" as validation>
-                    <form name="Settings" action="<@s.url '/settings/save'/>" method="post" onsubmit="return validateForm()">
-                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" id="token"/>
-                        <input type="hidden" name="ID" value="${settings.getID()?c}">
-                        <input type="hidden" name="lastBackupReminderDate" value="${dateService.getLongDateString(settings.getLastBackupReminderDate())}">
-                        <input type="hidden" name="installedVersionCode" value="${settings.getInstalledVersionCode()}">
-                        <input type="hidden" name="whatsNewShownForCurrentVersion" value="${settings.getWhatsNewShownForCurrentVersion()?c}">
-                        <input type="hidden" name="showFirstUseBanner" value="${settings.getShowFirstUseBanner()?c}">
-
-                        <#-- password -->
-                        <div class="row">
-                            <div class="input-field col s12 m12 l8 offset-l2">
-                                <i class="material-icons prefix">vpn_key</i>
-                                <input id="settings-password" type="password" name="password" <@validation.validation "password"/> value="•••••">
-                                <label for="settings-password">${locale.getString("settings.password")}</label>
+
+                <@header.content>
+                    <div class="container">
+                        <#import "../helpers/validation.ftl" as validation>
+                        <form name="Settings" action="<@s.url '/settings/save'/>" method="post" onsubmit="return validateForm()">
+                            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}" id="token"/>
+                            <input type="hidden" name="ID" value="${settings.getID()?c}">
+                            <input type="hidden" name="lastBackupReminderDate" value="${dateService.getLongDateString(settings.getLastBackupReminderDate())}">
+                            <input type="hidden" name="installedVersionCode" value="${settings.getInstalledVersionCode()}">
+                            <input type="hidden" name="whatsNewShownForCurrentVersion" value="${settings.getWhatsNewShownForCurrentVersion()?c}">
+                            <input type="hidden" name="showFirstUseBanner" value="${settings.getShowFirstUseBanner()?c}">
+
+                            <#-- password -->
+                            <div class="row">
+                                <div class="input-field col s12 m12 l8 offset-l2">
+                                    <i class="material-icons prefix">vpn_key</i>
+                                    <input id="settings-password" type="password" name="password" <@validation.validation "password"/> value="•••••">
+                                    <label for="settings-password">${locale.getString("settings.password")}</label>
+                                </div>
                             </div>
-                        </div>
 
-                        <#-- password confirmation-->
-                        <div class="row">
-                            <div class="input-field col s12 m12 l8 offset-l2">
-                                <i class="material-icons prefix">vpn_key</i>
-                                <input id="settings-password-confirmation" type="password" name="passwordConfirmation" <@validation.validation "passwordConfirmation"/> value="•••••">
-                                <label for="settings-password-confirmation">${locale.getString("settings.password.confirmation")}</label>
+                            <#-- password confirmation-->
+                            <div class="row">
+                                <div class="input-field col s12 m12 l8 offset-l2">
+                                    <i class="material-icons prefix">vpn_key</i>
+                                    <input id="settings-password-confirmation" type="password" name="passwordConfirmation" <@validation.validation "passwordConfirmation"/> value="•••••">
+                                    <label for="settings-password-confirmation">${locale.getString("settings.password.confirmation")}</label>
+                                </div>
                             </div>
-                        </div>
 
-                        <#-- currency -->
-                        <div class="row">
-                            <div class="input-field col s12 m12 l8 offset-l2">
-                                <i class="material-icons prefix">euro</i>
-                                <input id="settings-currency" type="text" name="currency" <@validation.validation "currency"/> value="<#if settings.getCurrency()??>${settings.getCurrency()}</#if>">
-                                <label for="settings-currency">${locale.getString("settings.currency")}</label>
+                            <#-- currency -->
+                            <div class="row">
+                                <div class="input-field col s12 m12 l8 offset-l2">
+                                    <i class="material-icons prefix">euro</i>
+                                    <input id="settings-currency" type="text" name="currency" <@validation.validation "currency"/> value="<#if settings.getCurrency()??>${settings.getCurrency()}</#if>">
+                                    <label for="settings-currency">${locale.getString("settings.currency")}</label>
+                                </div>
                             </div>
-                        </div>
 
-                        <#-- rest, dark theme and backup reminder switch -->
-                        <@settingsMacros.switches settings/>
-
-                        <#-- language -->
-                        <div class="row">
-                            <div class="input-field col s12 m12 l8 offset-l2">
-                                <i class="material-icons prefix">translate</i>
-                                <select id="settings-language" name="languageType" <@validation.validation "language"/>>
-                                    <#list helpers.getAvailableLanguages() as language>
-                                        <#if settings.getLanguage() == language>
-                                            <option selected value="${language.getName()}">${language.getName()}</option>
-                                        <#else>
-                                            <option value="${language.getName()}">${language.getName()}</option>
-                                        </#if>
-                                    </#list>
-                                </select>
-                                <label for="settings-language">${locale.getString("settings.language")}</label>
+                            <#-- rest, dark theme and backup reminder switch -->
+                            <@settingsMacros.switches settings/>
+
+                            <#-- language -->
+                            <div class="row">
+                                <div class="input-field col s12 m12 l8 offset-l2">
+                                    <i class="material-icons prefix">translate</i>
+                                    <select id="settings-language" name="languageType" <@validation.validation "language"/>>
+                                        <#list helpers.getAvailableLanguages() as language>
+                                            <#if settings.getLanguage() == language>
+                                                <option selected value="${language.getName()}">${language.getName()}</option>
+                                            <#else>
+                                                <option value="${language.getName()}">${language.getName()}</option>
+                                            </#if>
+                                        </#list>
+                                    </select>
+                                    <label for="settings-language">${locale.getString("settings.language")}</label>
+                                </div>
                             </div>
-                        </div>
 
-                        <#-- search items per page -->
-                        <div class="row">
-                            <div class="input-field col s12 m12 l8 offset-l2">
-                                <i class="material-icons prefix">search</i>
-                                <select id="settings-search-items-per-page" name="searchItemsPerPage" <@validation.validation "searchItemsPerPage"/>>
-                                    <#list searchResultsPerPageOptions as number>
-                                        <#if settings.getSearchItemsPerPage() == number>
-                                            <option selected value="${number}">${number}</option>
-                                        <#else>
-                                            <option value="${number}">${number}</option>
-                                        </#if>
-                                    </#list>
-                                </select>
-                                <label for="settings-search-items-per-page">${locale.getString("settings.search.itemsPerPage")}</label>
+                            <#-- search items per page -->
+                            <div class="row">
+                                <div class="input-field col s12 m12 l8 offset-l2">
+                                    <i class="material-icons prefix">search</i>
+                                    <select id="settings-search-items-per-page" name="searchItemsPerPage" <@validation.validation "searchItemsPerPage"/>>
+                                        <#list searchResultsPerPageOptions as number>
+                                            <#if settings.getSearchItemsPerPage() == number>
+                                                <option selected value="${number}">${number}</option>
+                                            <#else>
+                                                <option value="${number}">${number}</option>
+                                            </#if>
+                                        </#list>
+                                    </select>
+                                    <label for="settings-search-items-per-page">${locale.getString("settings.search.itemsPerPage")}</label>
+                                </div>
                             </div>
-                        </div>
 
-                        <#-- backups -->
-                        <div class="container">
-                            <div class="section center-align">
-                                <div class="headline">${locale.getString("settings.backup")}</div>
+                            <#-- backups -->
+                            <div class="container">
+                                <div class="section center-align">
+                                    <div class="headline">${locale.getString("settings.backup")}</div>
+                                </div>
                             </div>
-                        </div>
 
-                        <div class="row">
-                            <div class="col s12">
-                                <div class="table-container">
-                                    <div class="table-cell">
-                                        <div class="switch-cell-margin">${locale.getString("settings.backupReminder")}</div>
-                                        <div class="switch-cell-margin">${locale.getString("settings.backup.auto")}</div>
-                                    </div>
-                                    <div class="table-cell table-cell-spacer"></div>
-                                    <div class="table-cell">
-                                        <@settingsMacros.switch "backupReminder" "backupReminderActivated" settings.getBackupReminderActivated()/>
-                                        <@settingsMacros.switch "backup.auto" "autoBackupActivated" settings.isAutoBackupActive()/>
-                                    </div>
-                                    <div class="table-cell table-cell-spacer"></div>
-                                    <div class="table-cell">
-                                        <div class="switch-cell-margin">
-                                            <a class="btn btn-flat tooltipped text-default" data-position="bottom" data-tooltip="${locale.getString("settings.backupReminder.description")}"><i class="material-icons">help_outline</i></a>
+                            <div class="row">
+                                <div class="col s12">
+                                    <div class="table-container">
+                                        <div class="table-cell">
+                                            <div class="switch-cell-margin">${locale.getString("settings.backupReminder")}</div>
+                                            <div class="switch-cell-margin">${locale.getString("settings.backup.auto")}</div>
+                                        </div>
+                                        <div class="table-cell table-cell-spacer"></div>
+                                        <div class="table-cell">
+                                            <@settingsMacros.switch "backupReminder" "backupReminderActivated" settings.getBackupReminderActivated()/>
+                                            <@settingsMacros.switch "backup.auto" "autoBackupActivated" settings.isAutoBackupActive()/>
                                         </div>
-                                        <div class="switch-cell-margin">
-                                            <a class="btn btn-flat tooltipped text-default" data-position="bottom" data-tooltip="${locale.getString("settings.backup.auto.description")}"><i class="material-icons">help_outline</i></a>
+                                        <div class="table-cell table-cell-spacer"></div>
+                                        <div class="table-cell">
+                                            <div class="switch-cell-margin">
+                                                <a class="btn btn-flat tooltipped text-default" data-position="bottom" data-tooltip="${locale.getString("settings.backupReminder.description")}"><i class="material-icons">help_outline</i></a>
+                                            </div>
+                                            <div class="switch-cell-margin">
+                                                <a class="btn btn-flat tooltipped text-default" data-position="bottom" data-tooltip="${locale.getString("settings.backup.auto.description")}"><i class="material-icons">help_outline</i></a>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <#-- auto backup -->
-                        <@settingsMacros.autoBackup/>
+                            <#-- auto backup -->
+                            <@settingsMacros.autoBackup/>
 
-                        <br>
+                            <br>
 
-                        <#-- buttons -->
-                        <div class="row">
-                            <div class="col s12 center-align">
-                                <@header.buttonSubmit name='action' icon='save' localizationKey='save'/>
+                            <#-- buttons -->
+                            <div class="row">
+                                <div class="col s12 center-align">
+                                    <@header.buttonSubmit name='action' icon='save' localizationKey='save'/>
+                                </div>
                             </div>
-                        </div>
-                    </form>
-                </div>
+                        </form>
+                    </div>
 
-                <hr>
+                    <hr>
 
-                <#-- updates -->
-                <div class="container">
-                    <div class="section center-align">
-                        <div class="headline">${locale.getString("settings.updates")}</div>
+                    <#-- updates -->
+                    <div class="container">
+                        <div class="section center-align">
+                            <div class="headline">${locale.getString("settings.updates")}</div>
+                        </div>
                     </div>
-                </div>
 
-                <div class="row">
-                    <div class="col s12 m12 l8 offset-l2 center-align">
-                        <div class="table-container">
-                            <div class="table-cell">
-                                <div class="right-align" style="margin-bottom: 1em;">${locale.getString("settings.updates.current.version")}</div>
-                                <div class="right-align">${locale.getString("settings.updates.latest.version")}</div>
-                            </div>
+                    <div class="row">
+                        <div class="col s12 m12 l8 offset-l2 center-align">
+                            <div class="table-container">
+                                <div class="table-cell">
+                                    <div class="right-align" style="margin-bottom: 1em;">${locale.getString("settings.updates.current.version")}</div>
+                                    <div class="right-align">${locale.getString("settings.updates.latest.version")}</div>
+                                </div>
 
-                            <div class="table-cell table-cell-spacer"></div>
+                                <div class="table-cell table-cell-spacer"></div>
 
-                            <div class="table-cell">
-                                <div class="left-align" style="margin-bottom: 1em; margin-right: 5em">
-                                    <div class="banner background-grey <#if settings.isUseDarkTheme()>text-black<#else>text-white</#if>">
-                                        v${build.getVersionName()}
+                                <div class="table-cell">
+                                    <div class="left-align" style="margin-bottom: 1em; margin-right: 5em">
+                                        <div class="banner background-grey <#if settings.isUseDarkTheme()>text-black<#else>text-white</#if>">
+                                            v${build.getVersionName()}
+                                        </div>
                                     </div>
-                                </div>
-                                <div class="left-align">
-                                    <#if updateCheckService.getAvailableVersionString() == "-">
-                                        <#if settings.isUseDarkTheme()>
-                                            <#assign bannerClasses="background-grey text-black">
+                                    <div class="left-align">
+                                        <#if updateCheckService.getAvailableVersionString() == "-">
+                                            <#if settings.isUseDarkTheme()>
+                                                <#assign bannerClasses="background-grey text-black">
+                                            <#else>
+                                                <#assign bannerClasses="background-grey text-white">
+                                            </#if>
                                         <#else>
-                                            <#assign bannerClasses="background-grey text-white">
+                                            <#if updateCheckService.isUpdateAvailable()>
+                                                <#assign bannerClasses="background-orange text-black">
+                                            <#else>
+                                                <#assign bannerClasses="background-green text-white">
+                                            </#if>
                                         </#if>
-                                    <#else>
-                                        <#if updateCheckService.isUpdateAvailable()>
-                                            <#assign bannerClasses="background-orange text-black">
-                                        <#else>
-                                            <#assign bannerClasses="background-green text-white">
-                                        </#if>
-                                    </#if>
 
-                                    <div class="banner ${bannerClasses}">
-                                        ${updateCheckService.getAvailableVersionString()}
-                                    </div>
-                              </div>
-                            </div>
+                                        <div class="banner ${bannerClasses}">
+                                            ${updateCheckService.getAvailableVersionString()}
+                                        </div>
+                                  </div>
+                                </div>
 
-                            <div class="table-cell table-cell-valign">
-                                <@header.buttonLink url='/settings/updateSearch' icon='refresh' localizationKey='settings.updates.search'/>
+                                <div class="table-cell table-cell-valign">
+                                    <@header.buttonLink url='/settings/updateSearch' icon='refresh' localizationKey='settings.updates.search'/>
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
 
-                <hr>
-                <#-- database -->
-                <div class="container">
-                    <div class="section center-align">
-                        <div class="headline">${locale.getString("menu.settings.database")}</div>
+                    <hr>
+                    <#-- database -->
+                    <div class="container">
+                        <div class="section center-align">
+                            <div class="headline">${locale.getString("menu.settings.database")}</div>
+                        </div>
                     </div>
-                </div>
-                <@settingsMacros.databaseNormal/>
-                <@settingsMacros.databaseSmall/>
+                    <@settingsMacros.databaseNormal/>
+                    <@settingsMacros.databaseSmall/>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/templates/newTemplate.ftl b/src/main/resources/templates/templates/newTemplate.ftl
index 93cd13817..03078351f 100644
--- a/src/main/resources/templates/templates/newTemplate.ftl
+++ b/src/main/resources/templates/templates/newTemplate.ftl
@@ -29,7 +29,9 @@
                         <div class="headline">${title}</div>
                     </div>
                 </div>
-                <div class="container">
+
+                <@header.content>
+                    <div class="container">
                     <#import "../helpers/validation.ftl" as validation>
                     <form name="NewTemplate" action="<@s.url '/templates/newTemplate'/>" method="post" onsubmit="return validateForm(true)">
                         <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
@@ -79,6 +81,7 @@
                         <@newTransactionMacros.buttons "/templates"/>
                     </form>
                 </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/templates/templates.ftl b/src/main/resources/templates/templates/templates.ftl
index 7697670af..1325cfae2 100644
--- a/src/main/resources/templates/templates/templates.ftl
+++ b/src/main/resources/templates/templates/templates.ftl
@@ -20,25 +20,28 @@
                     <div class="section center-align">
                         <div class="headline"><i class="material-icons">file_copy</i> ${locale.getString("menu.templates")}</div>
                     </div>
-                    <div class="row">
-                        <div class="input-field col s12 m12 l8 offset-l2">
-                            <i class="material-icons prefix">search</i>
-                            <input id="searchTemplate" type="text" class="mousetrap">
-                            <label for="searchTemplate">${locale.getString("search")}</label>
+
+                    <@header.content>
+                        <div class="row">
+                            <div class="input-field col s12 m12 l8 offset-l2">
+                                <i class="material-icons prefix">search</i>
+                                <input id="searchTemplate" type="text" class="mousetrap">
+                                <label for="searchTemplate">${locale.getString("search")}</label>
+                            </div>
                         </div>
                     </div>
+                    <br>
+                    <@templateFunctions.buttons/>
+                    <br>
+                    <#if templates?size == 0>
+                        <div class="container">
+                            <div class="headline center-align">${locale.getString("placeholder")}</div>
+                        </div>
+                    <#else>
+                        <@templateFunctions.listTemplates templates/>
+                    </#if>
                 </div>
-                <br>
-                <@templateFunctions.buttons/>
-                <br>
-                <#if templates?size == 0>
-                    <div class="container">
-                        <div class="headline center-align">${locale.getString("placeholder")}</div>
-                    </div>
-                <#else>
-                    <@templateFunctions.listTemplates templates/>
-                </#if>
-            </div>
+            </@header.content>
 
             <#if currentTemplate??>
                 <@header.modalConfirmDelete title=locale.getString("info.title.template.delete") confirmUrl='/templates' cancelUrlBase='/templates' itemId=currentTemplate.getID() confirmButtonTextKey='info.title.template.delete'>
diff --git a/src/main/resources/templates/transactions/newTransactionNormal.ftl b/src/main/resources/templates/transactions/newTransactionNormal.ftl
index ec20214d1..18e4eb8f4 100644
--- a/src/main/resources/templates/transactions/newTransactionNormal.ftl
+++ b/src/main/resources/templates/transactions/newTransactionNormal.ftl
@@ -29,53 +29,56 @@
                         <div class="headline">${title}</div>
                     </div>
                 </div>
-                <div class="container">
-                    <#import "../helpers/validation.ftl" as validation>
-                    <form name="NewTransaction" action="<@s.url '/transactions/newTransaction/normal'/>" method="post" onsubmit="return validateForm()">
-                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
-                        <!-- only set ID for transactions not templates, otherwise the input is filled with the template ID and saving the transaction
-                        may then override an existing transactions if the ID is also already used in transactions table -->
-                        <input type="hidden" name="ID" value="<#if transaction.class.simpleName == "Transaction" && transaction.getID()??>${transaction.getID()?c}</#if>">
-                        <input type="hidden" name="previousType" value="<#if previousType??>${previousType.name()}</#if>">
 
-                        <#-- isPayment switch -->
-                        <@newTransactionMacros.isExpenditureSwitch transaction/>
+                <@header.content>
+                    <div class="container">
+                        <#import "../helpers/validation.ftl" as validation>
+                        <form name="NewTransaction" action="<@s.url '/transactions/newTransaction/normal'/>" method="post" onsubmit="return validateForm()">
+                            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+                            <!-- only set ID for transactions not templates, otherwise the input is filled with the template ID and saving the transaction
+                            may then override an existing transactions if the ID is also already used in transactions table -->
+                            <input type="hidden" name="ID" value="<#if transaction.class.simpleName == "Transaction" && transaction.getID()??>${transaction.getID()?c}</#if>">
+                            <input type="hidden" name="previousType" value="<#if previousType??>${previousType.name()}</#if>">
 
-                        <#-- name -->
-                        <@newTransactionMacros.transactionName transaction suggestionsJSON/>
+                            <#-- isPayment switch -->
+                            <@newTransactionMacros.isExpenditureSwitch transaction/>
 
-                        <#-- amount -->
-                        <@newTransactionMacros.transactionAmount transaction/>
+                            <#-- name -->
+                            <@newTransactionMacros.transactionName transaction suggestionsJSON/>
 
-                        <#-- category -->
-                        <@newTransactionMacros.categorySelect categories transaction.getCategory() "col s12 m12 l8 offset-l2" locale.getString("transaction.new.label.category")/>
+                            <#-- amount -->
+                            <@newTransactionMacros.transactionAmount transaction/>
 
-                        <#-- date -->
-                        <@newTransactionMacros.transactionStartDate transaction currentDate/>
+                            <#-- category -->
+                            <@newTransactionMacros.categorySelect categories transaction.getCategory() "col s12 m12 l8 offset-l2" locale.getString("transaction.new.label.category")/>
 
-                        <#-- description -->
-                        <@newTransactionMacros.transactionDescription transaction/>
+                            <#-- date -->
+                            <@newTransactionMacros.transactionStartDate transaction currentDate/>
 
-                        <#-- tags -->
-                        <@newTransactionMacros.transactionTags transaction/>
+                            <#-- description -->
+                            <@newTransactionMacros.transactionDescription transaction/>
 
-                        <#-- account -->
-                        <#if transaction.getAccount()??>
-                            <@newTransactionMacros.account accounts transaction.getAccount() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
-                        <#else>
-                            <@newTransactionMacros.account accounts helpers.getCurrentAccountOrDefault() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
-                        </#if>
+                            <#-- tags -->
+                            <@newTransactionMacros.transactionTags transaction/>
 
-                        <br>
-                        <#-- buttons -->
-                        <@newTransactionMacros.buttons "/transactions"/>
-                        <@newTransactionMacros.buttonTransactionActions isEdit true previousType??/>
-                    </form>
+                            <#-- account -->
+                            <#if transaction.getAccount()??>
+                                <@newTransactionMacros.account accounts transaction.getAccount() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
+                            <#else>
+                                <@newTransactionMacros.account accounts helpers.getCurrentAccountOrDefault() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
+                            </#if>
 
-                    <div id="saveAsTemplateModalContainer"></div>
+                            <br>
+                            <#-- buttons -->
+                            <@newTransactionMacros.buttons "/transactions"/>
+                            <@newTransactionMacros.buttonTransactionActions isEdit true previousType??/>
+                        </form>
 
-                    <div id="changeTransactionTypeModalContainer"></div>
-                </div>
+                        <div id="saveAsTemplateModalContainer"></div>
+
+                        <div id="changeTransactionTypeModalContainer"></div>
+                    </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/transactions/newTransactionRepeating.ftl b/src/main/resources/templates/transactions/newTransactionRepeating.ftl
index 27456d2cb..89d20463c 100644
--- a/src/main/resources/templates/transactions/newTransactionRepeating.ftl
+++ b/src/main/resources/templates/transactions/newTransactionRepeating.ftl
@@ -28,52 +28,55 @@
                         <div class="headline">${title}</div>
                     </div>
                 </div>
-                <div class="container">
-                    <#import "../helpers/validation.ftl" as validation>
-                    <form name="NewTransaction" action="<@s.url '/transactions/newTransaction/repeating'/>" method="post" onsubmit="return validateForm()">
-                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
-                        <input type="hidden" name="ID" value="<#if transaction.getID()??>${transaction.getID()?c}</#if>">
-                        <input type="hidden" name="isRepeating" value="${transaction.isRepeating()?c}">
-                        <input type="hidden" name="previousType" value="<#if previousType??>${previousType.name()}</#if>">
-
-                        <#-- isPayment switch -->
-                        <@newTransactionMacros.isExpenditureSwitch transaction/>
-
-                        <#-- name -->
-                        <@newTransactionMacros.transactionName transaction suggestionsJSON/>
-
-                        <#-- amount -->
-                        <@newTransactionMacros.transactionAmount transaction/>
-
-                        <#-- category -->
-                        <@newTransactionMacros.categorySelect categories transaction.getCategory() "col s12 m12 l8 offset-l2" locale.getString("transaction.new.label.category")/>
-
-                        <#-- date -->
-                        <@newTransactionMacros.transactionStartDate transaction currentDate/>
-
-                        <#-- description -->
-                        <@newTransactionMacros.transactionDescription transaction/>
-
-                        <#-- tags -->
-                        <@newTransactionMacros.transactionTags transaction/>
-
-                        <#-- account -->
-                        <#if transaction.getAccount()??>
-                            <@newTransactionMacros.account accounts transaction.getAccount() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
-                        <#else>
-                            <@newTransactionMacros.account accounts helpers.getCurrentAccountOrDefault() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
-                        </#if>
-
-                        <#-- repeating options -->
-                        <@newTransactionMacros.transactionRepeating transaction currentDate/>
-                        <br>
-                        <#-- buttons -->
-                        <@newTransactionMacros.buttons "/transactions"/>
-                        <@newTransactionMacros.buttonTransactionActions isEdit false previousType??/>
-                    </form>
-
-                    <div id="changeTransactionTypeModalContainer"></div>
-                </div>
+
+                <@header.content>
+                    <div class="container">
+                        <#import "../helpers/validation.ftl" as validation>
+                        <form name="NewTransaction" action="<@s.url '/transactions/newTransaction/repeating'/>" method="post" onsubmit="return validateForm()">
+                            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+                            <input type="hidden" name="ID" value="<#if transaction.getID()??>${transaction.getID()?c}</#if>">
+                            <input type="hidden" name="isRepeating" value="${transaction.isRepeating()?c}">
+                            <input type="hidden" name="previousType" value="<#if previousType??>${previousType.name()}</#if>">
+
+                            <#-- isPayment switch -->
+                            <@newTransactionMacros.isExpenditureSwitch transaction/>
+
+                            <#-- name -->
+                            <@newTransactionMacros.transactionName transaction suggestionsJSON/>
+
+                            <#-- amount -->
+                            <@newTransactionMacros.transactionAmount transaction/>
+
+                            <#-- category -->
+                            <@newTransactionMacros.categorySelect categories transaction.getCategory() "col s12 m12 l8 offset-l2" locale.getString("transaction.new.label.category")/>
+
+                            <#-- date -->
+                            <@newTransactionMacros.transactionStartDate transaction currentDate/>
+
+                            <#-- description -->
+                            <@newTransactionMacros.transactionDescription transaction/>
+
+                            <#-- tags -->
+                            <@newTransactionMacros.transactionTags transaction/>
+
+                            <#-- account -->
+                            <#if transaction.getAccount()??>
+                                <@newTransactionMacros.account accounts transaction.getAccount() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
+                            <#else>
+                                <@newTransactionMacros.account accounts helpers.getCurrentAccountOrDefault() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
+                            </#if>
+
+                            <#-- repeating options -->
+                            <@newTransactionMacros.transactionRepeating transaction currentDate/>
+                            <br>
+                            <#-- buttons -->
+                            <@newTransactionMacros.buttons "/transactions"/>
+                            <@newTransactionMacros.buttonTransactionActions isEdit false previousType??/>
+                        </form>
+
+                        <div id="changeTransactionTypeModalContainer"></div>
+                    </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/transactions/newTransactionTransfer.ftl b/src/main/resources/templates/transactions/newTransactionTransfer.ftl
index 05e5ad9f5..1aa94eed8 100644
--- a/src/main/resources/templates/transactions/newTransactionTransfer.ftl
+++ b/src/main/resources/templates/transactions/newTransactionTransfer.ftl
@@ -29,58 +29,61 @@
                         <div class="headline">${title}</div>
                     </div>
                 </div>
-                <div class="container">
-                    <#import "../helpers/validation.ftl" as validation>
-                    <form name="NewTransaction" action="<@s.url '/transactions/newTransaction/transfer'/>" method="post" onsubmit="return validateForm()">
-                        <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
-                        <!-- only set ID for transactions not templates, otherwise the input is filled with the template ID and saving the transaction
-                        may then override an existing transactions if the ID is also already used in transactions table -->
-                        <input type="hidden" name="ID" value="<#if transaction.class.simpleName == "Transaction" && transaction.getID()??>${transaction.getID()?c}</#if>">
-                        <input type="hidden" name="isExpenditure" value="true">
-                        <input type="hidden" name="previousType" value="<#if previousType??>${previousType.name()}</#if>">
-
-                        <#-- name -->
-                        <@newTransactionMacros.transactionName transaction suggestionsJSON/>
-
-                        <#-- amount -->
-                        <@newTransactionMacros.transactionAmount transaction/>
-
-                        <#-- category -->
-                        <@newTransactionMacros.categorySelect categories transaction.getCategory() "col s12 m12 l8 offset-l2" locale.getString("transaction.new.label.category")/>
-
-                        <#-- date -->
-                        <@newTransactionMacros.transactionStartDate transaction currentDate/>
-
-                        <#-- description -->
-                        <@newTransactionMacros.transactionDescription transaction/>
-
-                        <#-- tags -->
-                        <@newTransactionMacros.transactionTags transaction/>
-
-                        <#-- account -->
-                        <#if transaction.getAccount()??>
-                            <@newTransactionMacros.account accounts transaction.getAccount() "transaction-account" "account" locale.getString("transaction.new.label.account"), false/>
-                        <#else>
-                            <@newTransactionMacros.account accounts helpers.getCurrentAccountOrDefault() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
-                        </#if>
-
-                        <#-- transfer account -->
-                        <#if transaction.getTransferAccount()??>
-                            <@newTransactionMacros.account accounts transaction.getTransferAccount() "transaction-transfer-account" "transferAccount" locale.getString("transaction.new.label.transfer.account") false/>
-                        <#else>
-                            <@newTransactionMacros.account accounts helpers.getCurrentAccountOrDefault() "transaction-transfer-account" "transferAccount" locale.getString("transaction.new.label.transfer.account") false/>
-                        </#if>
-
-                        <br>
-                        <#-- buttons -->
-                        <@newTransactionMacros.buttons '/transactions'/>
-                        <@newTransactionMacros.buttonTransactionActions isEdit true previousType??/>
-                    </form>
-
-                    <div id="saveAsTemplateModalContainer"></div>
-
-                    <div id="changeTransactionTypeModalContainer"></div>
-                </div>
+
+                <@header.content>
+                    <div class="container">
+                        <#import "../helpers/validation.ftl" as validation>
+                        <form name="NewTransaction" action="<@s.url '/transactions/newTransaction/transfer'/>" method="post" onsubmit="return validateForm()">
+                            <input type="hidden" name="${_csrf.parameterName}" value="${_csrf.token}"/>
+                            <!-- only set ID for transactions not templates, otherwise the input is filled with the template ID and saving the transaction
+                            may then override an existing transactions if the ID is also already used in transactions table -->
+                            <input type="hidden" name="ID" value="<#if transaction.class.simpleName == "Transaction" && transaction.getID()??>${transaction.getID()?c}</#if>">
+                            <input type="hidden" name="isExpenditure" value="true">
+                            <input type="hidden" name="previousType" value="<#if previousType??>${previousType.name()}</#if>">
+
+                            <#-- name -->
+                            <@newTransactionMacros.transactionName transaction suggestionsJSON/>
+
+                            <#-- amount -->
+                            <@newTransactionMacros.transactionAmount transaction/>
+
+                            <#-- category -->
+                            <@newTransactionMacros.categorySelect categories transaction.getCategory() "col s12 m12 l8 offset-l2" locale.getString("transaction.new.label.category")/>
+
+                            <#-- date -->
+                            <@newTransactionMacros.transactionStartDate transaction currentDate/>
+
+                            <#-- description -->
+                            <@newTransactionMacros.transactionDescription transaction/>
+
+                            <#-- tags -->
+                            <@newTransactionMacros.transactionTags transaction/>
+
+                            <#-- account -->
+                            <#if transaction.getAccount()??>
+                                <@newTransactionMacros.account accounts transaction.getAccount() "transaction-account" "account" locale.getString("transaction.new.label.account"), false/>
+                            <#else>
+                                <@newTransactionMacros.account accounts helpers.getCurrentAccountOrDefault() "transaction-account" "account" locale.getString("transaction.new.label.account") false/>
+                            </#if>
+
+                            <#-- transfer account -->
+                            <#if transaction.getTransferAccount()??>
+                                <@newTransactionMacros.account accounts transaction.getTransferAccount() "transaction-transfer-account" "transferAccount" locale.getString("transaction.new.label.transfer.account") false/>
+                            <#else>
+                                <@newTransactionMacros.account accounts helpers.getCurrentAccountOrDefault() "transaction-transfer-account" "transferAccount" locale.getString("transaction.new.label.transfer.account") false/>
+                            </#if>
+
+                            <br>
+                            <#-- buttons -->
+                            <@newTransactionMacros.buttons '/transactions'/>
+                            <@newTransactionMacros.buttonTransactionActions isEdit true previousType??/>
+                        </form>
+
+                        <div id="saveAsTemplateModalContainer"></div>
+
+                        <div id="changeTransactionTypeModalContainer"></div>
+                    </div>
+                </@header.content>
             </div>
         </main>
 
diff --git a/src/main/resources/templates/transactions/transactions.ftl b/src/main/resources/templates/transactions/transactions.ftl
index 5784e5a4f..1e49b1ae6 100644
--- a/src/main/resources/templates/transactions/transactions.ftl
+++ b/src/main/resources/templates/transactions/transactions.ftl
@@ -20,71 +20,74 @@
             <div class="card main-card background-color">
                 <#import "../helpers/globalDatePicker.ftl" as datePicker>
                 <@datePicker.datePicker currentDate "/transactions"/>
-                <div class="container transaction-container">
-                    <div class="row">
-                        <div class="col s4">
-                            <div class="icon-block">
-                                <h1 class="center text-green budget-headline-icon"><i class="material-icons icon-budget">file_download</i></h1>
-                                <h5 class="center budget">${currencyService.getCurrencyString(budget.getIncomeSum())}</h5>
-                                <h5 class="center budget-headline">${locale.getString("title.incomes")}</h5>
+
+                <@header.content>
+                    <div class="container transaction-container">
+                        <div class="row">
+                            <div class="col s4">
+                                <div class="icon-block">
+                                    <h1 class="center text-green budget-headline-icon"><i class="material-icons icon-budget">file_download</i></h1>
+                                    <h5 class="center budget">${currencyService.getCurrencyString(budget.getIncomeSum())}</h5>
+                                    <h5 class="center budget-headline">${locale.getString("title.incomes")}</h5>
+                                </div>
                             </div>
-                        </div>
-                        <div class="col s4">
-                            <div class="icon-block">
-                                <h1 class="center ${redTextColor} budget-headline-icon"><i class="material-icons icon-budget">file_upload</i></h1>
-                                <h5 class="center budget">${currencyService.getCurrencyString(budget.getExpenditureSum())}</h5>
-                                <h5 class="center budget-headline">${locale.getString("title.expenditures")}</h5>
+                            <div class="col s4">
+                                <div class="icon-block">
+                                    <h1 class="center ${redTextColor} budget-headline-icon"><i class="material-icons icon-budget">file_upload</i></h1>
+                                    <h5 class="center budget">${currencyService.getCurrencyString(budget.getExpenditureSum())}</h5>
+                                    <h5 class="center budget-headline">${locale.getString("title.expenditures")}</h5>
+                                </div>
                             </div>
-                        </div>
-                        <div class="col s4">
-                            <div class="icon-block">
-                                <h1 class="center text-blue budget-headline-icon"><i class="fas fa-piggy-bank icon-budget"></i></h1>
-                                <h5 class="center budget">${currencyService.getCurrencyString(budget.getRest())}</h5>
-                                <h5 class="center budget-headline">${locale.getString("title.rest")}</h5>
+                            <div class="col s4">
+                                <div class="icon-block">
+                                    <h1 class="center text-blue budget-headline-icon"><i class="fas fa-piggy-bank icon-budget"></i></h1>
+                                    <h5 class="center budget">${currencyService.getCurrencyString(budget.getRest())}</h5>
+                                    <h5 class="center budget-headline">${locale.getString("title.rest")}</h5>
+                                </div>
                             </div>
                         </div>
-                    </div>
 
-                    <#-- buttons -->
-                    <@transactionsMacros.buttons filterConfiguration.isActive()/>
+                        <#-- buttons -->
+                        <@transactionsMacros.buttons filterConfiguration.isActive()/>
 
-                    <#-- transactions list -->
-                    <br>
-                    <#list transactions as transaction>
-                        <#assign shouldHighlight = highlightID?? && transaction.getID()?? && transaction.getID()==highlightID/>
+                        <#-- transactions list -->
+                        <br>
+                        <#list transactions as transaction>
+                            <#assign shouldHighlight = highlightID?? && transaction.getID()?? && transaction.getID()==highlightID/>
 
-                        <div class="hide-on-large-only transaction-row-top <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-small"<#else>"</#if>>
-                            <div class="row valign-wrapper transaction-row-bottom">
-                                <div class="col s3 center-align bold transaction-text">
-                                    ${dateService.getDateStringWithoutYear(transaction.date)}
+                            <div class="hide-on-large-only transaction-row-top <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-small"<#else>"</#if>>
+                                <div class="row valign-wrapper transaction-row-bottom">
+                                    <div class="col s3 center-align bold transaction-text">
+                                        ${dateService.getDateStringWithoutYear(transaction.date)}
+                                    </div>
+                                    <@transactionsMacros.transactionType transaction/>
+                                    <@transactionsMacros.transactionButtons transaction/>
+                                </div>
+                                <div class="row valign-wrapper transaction-row-bottom">
+                                    <@transactionsMacros.transactionCategory transaction "center-align"/>
+                                    <@transactionsMacros.transactionNameAndDescription transaction "s5"/>
+                                    <@transactionsMacros.transactionAmount transaction account "s4"/>
                                 </div>
-                                <@transactionsMacros.transactionType transaction/>
-                                <@transactionsMacros.transactionButtons transaction/>
-                            </div>
-                            <div class="row valign-wrapper transaction-row-bottom">
-                                <@transactionsMacros.transactionCategory transaction "center-align"/>
-                                <@transactionsMacros.transactionNameAndDescription transaction "s5"/>
-                                <@transactionsMacros.transactionAmount transaction account "s4"/>
                             </div>
-                        </div>
-                        <div class="hide-on-med-and-down transaction-row-top transaction-row-bottom <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-large"<#else>"</#if>>
-                            <div class="row valign-wrapper no-margin-bottom">
-                                <div class="col l1 xl1 bold transaction-text transaction-line-height">
-                                    ${dateService.getDateStringWithoutYear(transaction.date)}
+                            <div class="hide-on-med-and-down transaction-row-top transaction-row-bottom <#if transaction.isFuture()>transaction-row-transparent</#if> <#if shouldHighlight>background-blue-light transaction-row-transparent-override" id="highlighted-large"<#else>"</#if>>
+                                <div class="row valign-wrapper no-margin-bottom">
+                                    <div class="col l1 xl1 bold transaction-text transaction-line-height">
+                                        ${dateService.getDateStringWithoutYear(transaction.date)}
+                                    </div>
+                                    <@transactionsMacros.transactionCategory transaction "left-align"/>
+                                    <@transactionsMacros.transactionType transaction/>
+                                    <@transactionsMacros.transactionNameAndDescription transaction "l4 xl5"/>
+                                    <@transactionsMacros.transactionAmount transaction account "l3 xl3"/>
+                                    <@transactionsMacros.transactionButtons transaction/>
                                 </div>
-                                <@transactionsMacros.transactionCategory transaction "left-align"/>
-                                <@transactionsMacros.transactionType transaction/>
-                                <@transactionsMacros.transactionNameAndDescription transaction "l4 xl5"/>
-                                <@transactionsMacros.transactionAmount transaction account "l3 xl3"/>
-                                <@transactionsMacros.transactionButtons transaction/>
                             </div>
-                        </div>
-                        <hr>
-                    </#list>
+                            <hr>
+                        </#list>
 
-                    <#-- show placeholde text if no transactions are present in the current month or REST ist the only transaction -->
-                    <@transactionsMacros.placeholder transactions/>
-                </div>
+                        <#-- show placeholde text if no transactions are present in the current month or REST ist the only transaction -->
+                        <@transactionsMacros.placeholder transactions/>
+                    </div>
+                </@header.content>
             </div>
 
             <#if currentTransaction??>
-- 
GitLab