diff --git a/src/app/components/charts/line-chart/LineChart.types.ts b/src/app/components/charts/line-chart/LineChart.types.ts
index 4c0ff0e..08ed64c 100644
--- a/src/app/components/charts/line-chart/LineChart.types.ts
+++ b/src/app/components/charts/line-chart/LineChart.types.ts
@@ -7,4 +7,5 @@ export interface StackedLineChartSeries {
 export interface LineChartConfig {
   series: StackedLineChartSeries[];
   labels: string[];
+  valueFormatter?: (value: number) => string;
 }
diff --git a/src/app/components/charts/line-chart/LineChart.vue b/src/app/components/charts/line-chart/LineChart.vue
index 99edb6a..6af1801 100644
--- a/src/app/components/charts/line-chart/LineChart.vue
+++ b/src/app/components/charts/line-chart/LineChart.vue
@@ -3,9 +3,8 @@
 </template>
 
 <script lang="ts" setup>
-import { GridComponentOption, LegendComponentOption, LineSeriesOption } from 'echarts';
-import { LineChart } from 'echarts/charts';
-import { GridComponent, LegendComponent } from 'echarts/components';
+import { GridComponentOption, LegendComponentOption, LineSeriesOption, TooltipComponentOption } from 'echarts';
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
 import * as echarts from 'echarts/core';
 import { SVGRenderer } from 'echarts/renderers';
 import { computed } from 'vue';
@@ -13,9 +12,11 @@ import EChart from '@components/charts/echart/EChart.vue';
 import { LineChartConfig } from '@components/charts/line-chart/LineChart.types';
 import { ClassNames } from '@utils';
 
-echarts.use([LineChart, SVGRenderer, LegendComponent, GridComponent]);
+echarts.use([SVGRenderer, LegendComponent, GridComponent, TooltipComponent]);
 
-type EChartsOption = echarts.ComposeOption<LineSeriesOption | GridComponentOption | LegendComponentOption>;
+type EChartsOption = echarts.ComposeOption<
+  LineSeriesOption | TooltipComponentOption | GridComponentOption | LegendComponentOption
+>;
 
 const props = defineProps<{
   class?: ClassNames;
@@ -53,7 +54,10 @@ const options = computed(
       type: 'value',
       axisTick: { lineStyle: { color: 'var(--chart-line-color)' } },
       axisLine: { lineStyle: { color: 'var(--chart-line-color)' } },
-      axisLabel: { color: 'var(--chart-label)' },
+      axisLabel: {
+        color: 'var(--chart-label)',
+        formatter: props.data.valueFormatter
+      },
       splitLine: { lineStyle: { color: 'var(--chart-line-color)' } }
     },
     series: props.data.series.map((v) => ({
@@ -72,4 +76,10 @@ const options = computed(
   width: 100%;
   height: 100%;
 }
+
+.chartTooltip {
+  font-family: var(--font-family);
+  color: var(--c-primary-text);
+  background: var(--c-primary);
+}
 </style>
diff --git a/src/app/components/charts/stacked-line-chart/StackedLineChart.types.ts b/src/app/components/charts/stacked-line-chart/StackedLineChart.types.ts
new file mode 100644
index 0000000..d050bf1
--- /dev/null
+++ b/src/app/components/charts/stacked-line-chart/StackedLineChart.types.ts
@@ -0,0 +1,12 @@
+export interface StackedLineChartSeries {
+  name: string;
+  trendName: string;
+  data: number[];
+  color?: string;
+}
+
+export interface StackedLineChartConfig {
+  series: StackedLineChartSeries[];
+  labels: string[];
+  valueFormatter?: (value: number) => string;
+}
diff --git a/src/app/components/charts/stacked-line-chart/StackedLineChart.vue b/src/app/components/charts/stacked-line-chart/StackedLineChart.vue
new file mode 100644
index 0000000..eeca8e7
--- /dev/null
+++ b/src/app/components/charts/stacked-line-chart/StackedLineChart.vue
@@ -0,0 +1,150 @@
+<template>
+  <EChart :class="[$style.stackedLineChart, classes]" :options="options" />
+</template>
+
+<script lang="ts" setup>
+import { GridComponentOption, LegendComponentOption, LineSeriesOption, TooltipComponentOption } from 'echarts';
+import { LineChart } from 'echarts/charts';
+import { GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
+import * as echarts from 'echarts/core';
+import { SVGRenderer } from 'echarts/renderers';
+import { computed } from 'vue';
+import EChart from '@components/charts/echart/EChart.vue';
+import { ClassNames, rollingAverage } from '@utils';
+import { StackedLineChartConfig } from './StackedLineChart.types';
+
+echarts.use([LineChart, SVGRenderer, LegendComponent, GridComponent, TooltipComponent]);
+
+type EChartsOption = echarts.ComposeOption<
+  LineSeriesOption | TooltipComponentOption | GridComponentOption | LegendComponentOption
+>;
+
+const props = defineProps<{
+  class?: ClassNames;
+  data: StackedLineChartConfig;
+}>();
+
+const classes = computed(() => props.class);
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+const options = computed(
+  (): EChartsOption => ({
+    animation: false,
+    legend: {
+      data: props.data.series.flatMap((v) => [v.name, v.trendName]),
+      textStyle: { color: 'var(--chart-label)' },
+      lineStyle: { width: 2, cap: 'round' },
+      itemStyle: { opacity: 0 }
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '35px',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      transitionDuration: 0,
+      backgroundColor: 'var(--chart-tooltip-background-color)',
+      borderColor: 'var(--chart-tooltip-border-color)',
+      textStyle: {
+        color: 'var(--chart-tooltip-color)',
+        fontFamily: 'var(--font-family)',
+        fontSize: 12
+      },
+      valueFormatter: (v) => props.data.valueFormatter?.(v as number) ?? String(v),
+      axisPointer: {
+        type: 'cross',
+        label: {
+          color: 'var(--c-primary-text)',
+          backgroundColor: 'var(--chart-tooltip-axis-label-background)',
+          formatter: (params) => {
+            if (params.axisDimension === 'x' || !props.data.valueFormatter) {
+              return ` ${params.value}`;
+            } else {
+              return props.data.valueFormatter(params.value as number);
+            }
+          }
+        },
+        lineStyle: {
+          color: 'var(--chart-tooltip-cross-color)'
+        },
+        crossStyle: {
+          color: 'var(--chart-tooltip-cross-color)'
+        }
+      }
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      data: props.data.labels,
+      axisTick: { lineStyle: { color: 'var(--chart-line-color)' } },
+      axisLine: { lineStyle: { color: 'var(--chart-line-color)' } },
+      axisLabel: { color: 'var(--chart-label)' }
+    },
+    yAxis: {
+      type: 'value',
+      axisTick: { lineStyle: { color: 'var(--chart-line-color)' } },
+      axisLine: { lineStyle: { color: 'var(--chart-line-color)' } },
+      axisLabel: {
+        color: 'var(--chart-label)',
+        formatter: props.data.valueFormatter
+      },
+      splitLine: { lineStyle: { color: 'var(--chart-line-color)' } }
+    },
+    series: props.data.series.flatMap((s, seriesIndex, series) => {
+      const areaGraph: EChartsOption['series'] = {
+        name: s.name,
+        type: 'line',
+        data: s.data.map(
+          (d, index) =>
+            d - (seriesIndex ? series.slice(0, seriesIndex).reduce((acc, curr) => acc + curr.data[index], 0) : 0)
+        ),
+        color: s.color,
+        silent: true,
+        stack: 'Total',
+        areaStyle: {
+          color: s.color,
+          opacity: 0.15
+        },
+        emphasis: {
+          disabled: true
+        }
+      };
+
+      const trendLine: EChartsOption['series'] = {
+        name: s.trendName,
+        type: 'line',
+        data: rollingAverage(s.data, 6),
+        color: s.color,
+        showSymbol: false,
+        silent: true,
+        tooltip: {
+          show: false
+        },
+        lineStyle: {
+          width: 1,
+          type: 'dashed',
+          opacity: 0.25
+        }
+      };
+
+      return [areaGraph, trendLine];
+    })
+  })
+);
+</script>
+
+<style lang="scss" module>
+.stackedLineChart {
+  width: 100%;
+  height: 100%;
+}
+
+.chartTooltip {
+  font-family: var(--font-family);
+  color: var(--c-primary-text);
+  background: var(--c-primary);
+}
+</style>
diff --git a/src/app/pages/Frame.vue b/src/app/pages/Frame.vue
index 9cc64b9..27f0027 100644
--- a/src/app/pages/Frame.vue
+++ b/src/app/pages/Frame.vue
@@ -23,11 +23,13 @@
       <ToolsButton :class="$style.btn" />
       <AdminButton v-if="user?.admin" :class="$style.btn" />
       <ChangeYearButton :class="$style.btn" />
+
       <template v-if="media !== 'mobile'">
         <ChangeLanguageButton :class="$style.btn" />
         <ChangeCurrencyButton :class="$style.btn" />
         <InfoButton :class="$style.btn" />
       </template>
+
       <div :class="$style.divider" />
       <CloudButton :class="$style.btn" />
     </div>
diff --git a/src/app/pages/dashboard/Dashboard.vue b/src/app/pages/dashboard/Dashboard.vue
index d86c942..b1429c7 100644
--- a/src/app/pages/dashboard/Dashboard.vue
+++ b/src/app/pages/dashboard/Dashboard.vue
@@ -1,24 +1,30 @@
 <template>
   <Pane :class="$style.dashboard">
-    <template v-if="state.years.length > 1" #beforeTitle>
-      <Button :icon="RiArrowLeftSLine" rounded @click="rotateYear(-1)" />
-      <Button :icon="RiArrowRightSLine" rounded @click="rotateYear(1)" />
-    </template>
     <template #title>
-      <span>
-        <i18n-t keypath="page.dashboard.header" scope="global">
+      <template v-if="view === AllTime">
+        <RiCalendar2Line size="18" />
+        <span>
+          {{ t('page.dashboard.allTimeFromTo', { from: state.years[0].year, to: state.years.at(-1)?.year }) }}
+        </span>
+      </template>
+      <template v-else>
+        <template v-if="state.years.length > 1">
+          <Button :icon="RiArrowLeftSLine" rounded @click="rotateYear(-1)" />
+          <Button :icon="RiArrowRightSLine" rounded @click="rotateYear(1)" />
+        </template>
+        <i18n-t tag="span" keypath="page.dashboard.header" scope="global">
           <template #year>
             <TextWheel :values="allYears" :value="state.activeYear" />
           </template>
         </i18n-t>
-      </span>
+      </template>
     </template>
     <template #header>
       <div :class="$style.viewButtons">
         <Button
           textual
           size="l"
-          :icon="RiPieChartLine"
+          :icon="RiDashboardLine"
           :tooltip="t('page.dashboard.title')"
           :color="view === Overview ? 'primary' : 'dimmed'"
           @click="view = Overview"
@@ -26,11 +32,20 @@
         <Button
           textual
           size="l"
-          :icon="RiGridLine"
+          :icon="RiTableLine"
           :tooltip="t('page.dashboard.tables')"
           :color="view === Summary ? 'primary' : 'dimmed'"
           @click="view = Summary"
         />
+        <span :class="$style.divider" />
+        <Button
+          textual
+          size="l"
+          :icon="RiEarthLine"
+          :tooltip="t('page.dashboard.allTime')"
+          :color="view === AllTime ? 'primary' : 'dimmed'"
+          @click="view = AllTime"
+        />
       </div>
     </template>
     <ComponentTransition :is="view" />
@@ -38,7 +53,14 @@
 </template>
 
 <script lang="ts" setup>
-import { RiArrowLeftSLine, RiArrowRightSLine, RiGridLine, RiPieChartLine } from '@remixicon/vue';
+import {
+  RiArrowLeftSLine,
+  RiArrowRightSLine,
+  RiCalendar2Line,
+  RiDashboardLine,
+  RiEarthLine,
+  RiTableLine
+} from '@remixicon/vue';
 import { computed, shallowRef } from 'vue';
 import { useI18n } from 'vue-i18n';
 import Button from '@components/base/button/Button.vue';
@@ -46,12 +68,14 @@ import TextWheel from '@components/base/text-wheel/TextWheel.vue';
 import ComponentTransition from '@components/misc/component-transition/ComponentTransition.vue';
 import { useDataStore } from '@store/state';
 import Pane from '../shared/Pane.vue';
+import AllTime from './all-time/AllTime.vue';
 import Overview from './overview/Overview.vue';
 import Summary from './summary/Summary.vue';
+import type { Component } from 'vue';
 
 const { t } = useI18n();
 const { state, changeYear } = useDataStore();
-const view = shallowRef(Overview);
+const view = shallowRef<Component>(Overview);
 
 const allYears = computed(() => state.years.map((v) => v.year));
 
@@ -73,7 +97,14 @@ const rotateYear = (dir: -1 | 1) => {
 
 .viewButtons {
   display: flex;
-  gap: 4px;
+  align-items: center;
+  gap: 6px;
+
+  .divider {
+    width: 1px;
+    height: 80%;
+    background-color: var(--app-border);
+  }
 }
 
 .version {
diff --git a/src/app/pages/dashboard/all-time/AllTime.vue b/src/app/pages/dashboard/all-time/AllTime.vue
new file mode 100644
index 0000000..c0a74dc
--- /dev/null
+++ b/src/app/pages/dashboard/all-time/AllTime.vue
@@ -0,0 +1,162 @@
+<template>
+  <div :class="$style.allTime">
+    <div :class="$style.cards">
+      <div v-for="card in cards" :key="card.title" :class="$style.card">
+        <h2 :title="card.title" :class="$style.title">{{ card.title }}</h2>
+        <div :class="$style.content">
+          <component :is="card.icon" v-if="card.icon" :class="card.iconClass" />
+          <span :class="$style.value">{{ card.value }}</span>
+        </div>
+      </div>
+    </div>
+    <div :class="$style.chart">
+      <AllTimeChart />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { RiArrowDownDoubleLine, RiArrowUpDoubleLine } from '@remixicon/vue';
+import { computed, useCssModule } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useDataStore } from '@store/state';
+import { totals } from '@store/state/utils/budgets';
+import { ClassNames, sum } from '@utils';
+import AllTimeChart from './AllTimeChart.vue';
+import type { Component } from 'vue';
+
+interface Card {
+  title: string;
+  value: string;
+  icon?: Component;
+  iconClass?: ClassNames;
+}
+
+const { t, locale } = useI18n();
+const { state } = useDataStore();
+const styles = useCssModule();
+
+const cards = computed((): Card[] => {
+  const percent = new Intl.NumberFormat(locale.value, {
+    style: 'percent',
+    maximumFractionDigits: 2
+  });
+
+  const currency = new Intl.NumberFormat(locale.value, {
+    style: 'currency',
+    currency: state.currency,
+    maximumFractionDigits: 0
+  });
+
+  const lastYear = state.years.at(-2);
+  const currentYear = state.years.at(-1);
+
+  if (!lastYear || !currentYear) {
+    return [];
+  }
+
+  const lastYearIncome = sum(totals(lastYear.income));
+  const lastYearExpenses = sum(totals(lastYear.expenses));
+  const currentYearIncome = sum(totals(currentYear.income));
+  const currentYearExpenses = sum(totals(currentYear.expenses));
+  const allTimeIncome = sum(totals(state.years.flatMap((v) => v.income)));
+  const allTimeExpenses = sum(totals(state.years.flatMap((v) => v.expenses)));
+
+  return [
+    {
+      title: t('page.dashboard.yoyIncomeGrowth'),
+      value: percent.format((currentYearIncome - lastYearIncome) / lastYearIncome),
+      icon: currentYearIncome > lastYearIncome ? RiArrowUpDoubleLine : RiArrowDownDoubleLine,
+      iconClass: currentYearIncome > lastYearIncome ? styles.iconSuccess : styles.iconDanger
+    },
+    {
+      title: t('page.dashboard.yoyExpenseGrowth'),
+      value: percent.format((lastYearExpenses - currentYearExpenses) / currentYearExpenses),
+      icon: lastYearExpenses > currentYearExpenses ? RiArrowUpDoubleLine : RiArrowDownDoubleLine,
+      iconClass: lastYearExpenses > currentYearExpenses ? styles.iconDanger : styles.iconSuccess
+    },
+    {
+      title: t('page.dashboard.allTimeIncome'),
+      value: currency.format(allTimeIncome)
+    },
+    {
+      title: t('page.dashboard.allTimeExpenses'),
+      value: currency.format(allTimeExpenses)
+    },
+    {
+      title: t('page.dashboard.allTimeSavings'),
+      value: currency.format(allTimeIncome - allTimeExpenses)
+    }
+  ];
+});
+</script>
+
+<style lang="scss" module>
+.allTime {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.chart {
+  flex: 1;
+}
+
+.cards {
+  display: grid;
+  grid-template: 1fr / repeat(5, 1fr);
+  flex-shrink: 0;
+  padding: 16px;
+  gap: 8px;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 14px;
+  background: var(--c-dimmed-light);
+  border-radius: var(--border-radius-xxl);
+  overflow: hidden;
+
+  .content {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    .iconSuccess,
+    .iconDanger {
+      border-radius: 50%;
+      padding: 3px;
+    }
+
+    .iconSuccess {
+      background: var(--c-success);
+      color: var(--c-success-text-accent);
+    }
+
+    .iconDanger {
+      background: var(--c-danger);
+      color: var(--c-danger-text-accent);
+    }
+  }
+
+  .title {
+    font-size: var(--font-size-s);
+    font-weight: var(--font-weight-xl);
+    color: var(--theme-text);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .value {
+    font-size: var(--font-size-l);
+    font-weight: var(--font-weight-xl);
+    color: var(--theme-text);
+  }
+}
+</style>
diff --git a/src/app/pages/dashboard/all-time/AllTimeChart.vue b/src/app/pages/dashboard/all-time/AllTimeChart.vue
new file mode 100644
index 0000000..e263ce4
--- /dev/null
+++ b/src/app/pages/dashboard/all-time/AllTimeChart.vue
@@ -0,0 +1,47 @@
+<template>
+  <StackedLineChart :data="data" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { StackedLineChartConfig } from '@components/charts/stacked-line-chart/StackedLineChart.types';
+import StackedLineChart from '@components/charts/stacked-line-chart/StackedLineChart.vue';
+import { useDataStore } from '@store/state';
+import { totals } from '@store/state/utils/budgets';
+
+const { t, locale } = useI18n();
+const { state } = useDataStore();
+
+const data = computed((): StackedLineChartConfig => {
+  const totalMonths = state.years.length * 12;
+  const formatter = new Intl.NumberFormat(locale.value, {
+    style: 'currency',
+    currency: state.currency,
+    maximumFractionDigits: 0
+  });
+
+  return {
+    valueFormatter: (value) => formatter.format(value),
+    labels: Array.from({ length: totalMonths }, (_, i) => {
+      const year = Math.floor(i / 12) + state.years[0].year;
+      const month = (i % 12) + 1;
+      return `${year}-${month.toString().padStart(2, '0')}`;
+    }),
+    series: [
+      {
+        name: t('page.dashboard.expenses'),
+        trendName: t('page.dashboard.expensesTrend'),
+        data: state.years.flatMap((v) => totals(v.expenses)),
+        color: 'var(--c-danger-light-dimmed)'
+      },
+      {
+        name: t('page.dashboard.income'),
+        trendName: t('page.dashboard.incomeTrend'),
+        data: state.years.flatMap((v) => totals(v.income)),
+        color: 'var(--c-success-light-dimmed)'
+      }
+    ]
+  };
+});
+</script>
diff --git a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
index a36f05d..d7ebe72 100644
--- a/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
+++ b/src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue
@@ -97,7 +97,6 @@ const remainingBalancePercentage = computed(() => {
   display: grid;
   grid-template: 1fr / repeat(var(--panels), 1fr);
   width: 100%;
-  height: 150px;
   gap: 10px;
 
   @include globals.onMobileDevices {
diff --git a/src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue b/src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue
index 869a856..14f5914 100644
--- a/src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue
+++ b/src/app/pages/dashboard/summary/widgets/charts/DevelopmentChart.vue
@@ -18,11 +18,11 @@ const props = defineProps<{
   class?: ClassNames;
 }>();
 
-const classes = computed(() => props.class);
 const months = useMonthNames();
 const { state } = useDataStore();
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
+const classes = computed(() => props.class);
 const isEmpty = computed(() => {
   const totalIncome = sum(totals(state.income));
   const totalExpenses = sum(totals(state.expenses));
@@ -33,9 +33,15 @@ const data = computed((): LineChartConfig => {
   const income = totals(state.income);
   const expenses = totals(state.expenses);
   const endingBalance = aggregate(subtract(income, expenses));
+  const formatter = new Intl.NumberFormat(locale.value, {
+    style: 'currency',
+    currency: state.currency,
+    maximumFractionDigits: 0
+  });
 
   return {
     labels: months.value,
+    valueFormatter: (value) => formatter.format(value),
     series: [
       { name: t('page.dashboard.income'), color: 'var(--c-success-light-dimmed)', data: income },
       { name: t('page.dashboard.expenses'), color: 'var(--c-danger-light-dimmed)', data: expenses },
diff --git a/src/app/pages/shared/Pane.vue b/src/app/pages/shared/Pane.vue
index 973bee8..a489798 100644
--- a/src/app/pages/shared/Pane.vue
+++ b/src/app/pages/shared/Pane.vue
@@ -2,7 +2,6 @@
   <div :class="$style.pane">
     <div ref="header" :class="$style.header">
       <h1 :class="$style.title">
-        <slot name="beforeTitle" />
         <slot v-if="$slots.title" name="title" />
         <span v-else>{{ title }}</span>
         <template v-if="amount">
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index 44ceebd..59e9e6b 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -116,14 +116,23 @@
       "title": "Dashboard",
       "tables": "Tabellen",
       "income": "Einnahmen",
+      "incomeTrend": "Einnahmen-Trend",
       "expenses": "Ausgaben",
+      "expensesTrend": "Ausgaben-Trend",
+      "allTime": "Allzeit Übersicht",
+      "allTimeFromTo": "Allzeit Übersicht von {from} bis {to}",
       "endingBalance": "Endsaldo",
       "header": "Jährliches Budget für {year}",
       "remainingBalance": "Verbleibendes Netto bis {year}",
       "netSavings": "Nettoersparnisse",
       "yearInThePast": "Jahr liegt in der Vergangenheit",
       "yearInTheFuture": "Jahr liegt in der Zukunft",
-      "yearEnding": "Dieses Jahr neigt sich dem Ende zu..."
+      "yearEnding": "Dieses Jahr neigt sich dem Ende zu...",
+      "yoyIncomeGrowth": "Jährliches Einkommenswachstum",
+      "yoyExpenseGrowth": "Jährliches Ausgabenwachstum",
+      "allTimeIncome": "Allzeit Einnahmen",
+      "allTimeExpenses": "Allzeit Ausgaben",
+      "allTimeSavings": "Allzeit Ersparnisse"
     }
   }
 }
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index 3f8f7b5..0cb1b21 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -116,14 +116,23 @@
       "title": "Dashboard",
       "tables": "Tables",
       "income": "Income",
+      "incomeTrend": "Income Trend",
+      "allTime": "All time overview",
+      "allTimeFromTo": "All time from {from} to {to}",
       "expenses": "Expenses",
+      "expensesTrend": "Expenses Trend",
       "endingBalance": "Ending Balance",
       "header": "Annual budget for {year}",
       "remainingBalance": "Remaining Balance until {year}",
       "netSavings": "Net Savings",
       "yearInThePast": "Year is in the past",
       "yearInTheFuture": "Year is in the future",
-      "yearEnding": "This Year is coming to an end..."
+      "yearEnding": "This Year is coming to an end...",
+      "yoyIncomeGrowth": "YoY Income Growth",
+      "yoyExpenseGrowth": "YoY Expense Growth",
+      "allTimeIncome": "All Time Income",
+      "allTimeExpenses": "All Time Expenses",
+      "allTimeSavings": "All Time Savings"
     }
   }
 }
diff --git a/src/styles/themes/dark.scss b/src/styles/themes/dark.scss
index 509ecaa..2055fba 100644
--- a/src/styles/themes/dark.scss
+++ b/src/styles/themes/dark.scss
@@ -109,6 +109,13 @@
   --chart-generic-saturation: 75%;
   --chart-generic-lightness: 75%;
 
+  --chart-tooltip-background-color: var(--app-background);
+  --chart-tooltip-border-color: var(--app-border);
+  --chart-tooltip-color: var(--theme-text);
+  --chart-tooltip-cross-color: var(--c-dimmed);
+  --chart-tooltip-axis-label-color: var(--c-primary-text);
+  --chart-tooltip-axis-label-background: var(--c-primary);
+
   --border-radius-s: 2px;
   --border-radius-m: 4px;
   --border-radius-l: 6px;
diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss
index 62c0396..37c31d0 100644
--- a/src/styles/themes/light.scss
+++ b/src/styles/themes/light.scss
@@ -109,6 +109,13 @@
   --chart-generic-saturation: 55%;
   --chart-generic-lightness: 82%;
 
+  --chart-tooltip-background-color: var(--app-background);
+  --chart-tooltip-border-color: var(--app-border);
+  --chart-tooltip-color: var(--theme-text);
+  --chart-tooltip-cross-color: var(--c-primary);
+  --chart-tooltip-axis-label-color: var(--c-primary-text);
+  --chart-tooltip-axis-label-background: var(--c-primary);
+
   --border-radius-s: 2px;
   --border-radius-m: 4px;
   --border-radius-l: 6px;
diff --git a/src/utils/array.ts b/src/utils/array.ts
index 1eecd13..8382548 100644
--- a/src/utils/array.ts
+++ b/src/utils/array.ts
@@ -14,6 +14,24 @@ export const aggregate = (values: readonly number[]) => values.map((_, index) =>
 
 export const arrayify = <T>(value: T | T[]): T[] => (Array.isArray(value) ? value : [value]);
 
+export const rollingAverage = (values: readonly number[], windowSize: number): number[] => {
+  let sum = 0;
+  const result = [];
+
+  for (let i = 0; i < windowSize - 1; i++) {
+    sum += values[i];
+    result.push(sum / (i + 1));
+  }
+
+  for (let i = windowSize - 1; i < values.length; i++) {
+    sum += values[i];
+    sum -= i >= windowSize ? values[i - windowSize] : 0;
+    result.push(sum / windowSize);
+  }
+
+  return result;
+};
+
 interface OnlyId {
   id: string;
 }